/* ==========================================================================
   COMPONENTS - reusable, page-agnostic pieces.
   Each block is self-contained: copy one to a new page and it just works.
   ========================================================================== */

/* ==========================================================================
   EYEBROW / LABEL
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background-color: currentColor;
  flex: none;
}

.eyebrow--centred::after {
  content: "";
  width: 1.75rem;
  height: 1px;
  background-color: currentColor;
  flex: none;
}

.section--sunk .eyebrow,
.site-footer .eyebrow { color: var(--brand-soft); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.8em 1.6em;
  min-height: 2.75rem;
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--border-width) solid var(--btn-border);
  border-radius: var(--radius-s);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn__icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  transition: transform var(--dur) var(--ease-out);
}

.btn:hover .btn__icon { transform: translateX(3px); }

.btn--primary {
  --btn-bg: var(--brand);
  --btn-fg: var(--on-brand);
  --btn-border: var(--brand);
  box-shadow: none;
}

.btn--primary:hover {
  --btn-bg: var(--brand-strong);
  --btn-border: var(--brand-strong);
  color: var(--on-brand-hover);
}

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: color-mix(in srgb, var(--white) 38%, transparent);
}

.btn--secondary:hover {
  --btn-bg: var(--brand);
  --btn-fg: var(--on-brand-hover);
  --btn-border: var(--brand);
}

.btn--secondary:focus-visible,
.btn--secondary:hover { color: var(--on-brand-hover); }

.btn--ghost { --btn-border: transparent; --btn-fg: var(--brand); }
.btn--ghost:hover { --btn-bg: var(--brand-soft); }

.btn--on-dark {
  --btn-fg: var(--white);
  --btn-border: color-mix(in srgb, var(--white) 40%, transparent);
}

.btn--on-dark:hover {
  --btn-bg: var(--white);
  --btn-fg: var(--ink);
  --btn-border: var(--white);
}

.btn--sm { padding: 0.6em 1.2em; min-height: 2.25rem; font-size: var(--step--2); }
.btn--lg { padding: 1em 2em; min-height: 3.25rem; font-size: var(--step-0); }
.btn--block { width: 100%; }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Text link with an animated arrow - used for "read more" affordances. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 700;
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--brand);
}

.link-arrow svg {
  width: 1em;
  height: 1em;
  transition: transform var(--dur) var(--ease-out);
}

.link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   CARD
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  background-color: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-m);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}

.card--raised { box-shadow: none; }

.card--interactive:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: none;
}

/* Stretch a link over the whole card without nesting interactive elements. */
.card__link {
  color: inherit;
  text-decoration: none;
}

.card--interactive:hover .card__link { color: var(--brand); }

.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card__icon {
  display: grid;
  place-content: center;
  width: 3rem;
  height: 3rem;
  margin-block-end: var(--space-2xs);
  border-radius: var(--radius-s);
  background-color: var(--brand-soft);
  color: var(--brand);
}

.card__icon svg { width: 1.5rem; height: 1.5rem; }

.card__title { font-size: var(--step-1); }

.card__text { color: var(--text-muted); font-size: var(--step--1); }

.card__meta {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* Numbered process step. */
.card--step { counter-increment: step; }

.card--step .card__icon {
  background-color: transparent;
  border: var(--border-width) solid var(--border);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--brand);
}

.card--step .card__icon::before { content: counter(step, decimal-leading-zero); }

/* ==========================================================================
   PRICING / PACKAGE CARD
   ========================================================================== */
.package {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-l) var(--space-m);
  background-color: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-m);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.package:hover { transform: translateY(-2px); box-shadow: none; }

.package--featured {
  background-color: var(--paper-2);
  border-color: var(--border);
  color: var(--text-muted);
  box-shadow: none;
}

.package--featured :is(h3, .package__price) { color: var(--white); }
.package--featured .package__list li::before { color: var(--brand); }
.package--featured .package__note { color: var(--text-muted); }

.package__flag {
  position: absolute;
  inset-block-start: var(--space-m);
  inset-inline-end: var(--space-m);
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
  background-color: var(--brand);
  color: var(--on-brand);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.package__name { font-size: var(--step-2); }

.package__price {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  margin-block: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.package__price small {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--text-subtle);
}

.package--featured .package__price small { color: var(--text-subtle); }

.package__note { font-size: var(--step--1); color: var(--text-muted); }

.package__list {
  list-style: none;
  margin: var(--space-m) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--step--1);
}

.package__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
}

.package__list li::before {
  content: "✓";
  color: var(--brand);
  font-weight: 700;
  line-height: var(--leading-body);
}

.package__list li[data-excluded]::before { content: "–"; color: var(--text-subtle); }
.package__list li[data-excluded] { opacity: 0.6; }

.package__cta { margin-block-start: auto; }

/* ==========================================================================
   SOCIAL LINKS
   Icons inherit currentColor, so they always match the brand token.
   ========================================================================== */
.social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.social__link {
  display: grid;
  place-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0;
  border: 0;
  color: var(--text);
  text-decoration: none;
  transition: transform var(--dur) var(--ease-spring),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.social__link svg { width: 1.15rem; height: 1.15rem; }

.social__link:hover,
.social__link:focus-visible {
  transform: translateY(-3px);
  background-color: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

.social--inline .social__link {
  width: auto;
  height: auto;
  padding: 0.5em 0.9em;
  gap: 0.5em;
  grid-auto-flow: column;
  align-items: center;
  font-size: var(--step--1);
  font-weight: 600;
}

.social--on-dark .social__link {
  border-color: color-mix(in srgb, var(--white) 22%, transparent);
  color: var(--white);
}

.social--on-dark .social__link:hover { background-color: var(--brand); border-color: var(--brand); }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form { display: flex; flex-direction: column; gap: var(--space-m); }

.form__row {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.field { display: flex; flex-direction: column; gap: var(--space-3xs); }

.field__label {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.field__label .required { color: var(--brand); }

.field__hint { font-size: var(--step--2); color: var(--text-subtle); }

.field__control {
  width: 100%;
  padding: 0.8em 1em;
  min-height: 3rem;
  background-color: var(--surface);
  color: var(--text);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-s);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.field__control:hover { border-color: var(--border-strong); }

.field__control:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: none;
}

textarea.field__control { min-height: 9rem; line-height: var(--leading-body); }

select.field__control {
  appearance: none;
  padding-inline-end: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237d7268' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.75rem;
}

/* Invalid state is driven by the JS validator setting aria-invalid, so the
   styling follows the accessibility attribute rather than a parallel class. */
.field__control[aria-invalid="true"] {
  border-color: var(--error);
  background-color: var(--error-soft);
}

.field__control[aria-invalid="true"]:focus {
  box-shadow: none;
}

.field__error {
  display: none;
  align-items: center;
  gap: 0.4em;
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--error);
}

.field__error::before { content: "!"; display: grid; place-content: center; width: 1.05em; height: 1.05em; border-radius: 0; background-color: var(--error); color: var(--white); font-size: 0.8em; }

.field__error:not(:empty) { display: flex; }

/* --------------------------------------------------------------- checkbox */
.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs);
  align-items: start;
  font-size: var(--step--1);
  color: var(--text-muted);
  cursor: pointer;
}

.checkbox input {
  appearance: none;
  width: 1.35rem;
  height: 1.35rem;
  margin-block-start: 0.15em;
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-xs);
  background-color: var(--surface);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.checkbox input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5 5.5 10.5 11.5 3.5' fill='none' stroke='%23fffcf7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.9rem;
}

.checkbox input[aria-invalid="true"] { border-color: var(--error); }

/* ------------------------------------------------------------- honeypot
   Bot bait. Hidden from humans and from assistive tech, but present in the
   DOM so scripted spam fills it in and the submit is rejected. */
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* --------------------------------------------------------- form feedback */
.form__status {
  display: none;
  gap: var(--space-xs);
  align-items: flex-start;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-s);
  border: var(--border-width) solid transparent;
  font-size: var(--step--1);
}

.form__status[data-state="success"],
.form__status[data-state="error"] { display: flex; }

.form__status[data-state="success"] {
  background-color: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  color: var(--success);
}

.form__status[data-state="error"] {
  background-color: var(--error-soft);
  border-color: color-mix(in srgb, var(--error) 35%, transparent);
  color: var(--error);
}

.form__status svg { width: 1.25rem; height: 1.25rem; flex: none; margin-block-start: 0.1em; }

/* Spinner shown while the request is in flight. */
.btn__spinner { display: none; width: 1.1em; height: 1.1em; flex: none; }

.btn[data-state="sending"] .btn__spinner { display: block; animation: spin 700ms linear infinite; }
.btn[data-state="sending"] .btn__icon { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   ACCORDION - built on <details>, works with JavaScript disabled.
   ========================================================================== */
.accordion { border-block-start: var(--border-width) solid var(--border); }

.accordion__item { border-block-end: var(--border-width) solid var(--border); }

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-m);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  cursor: pointer;
  list-style: none;
}

.accordion__summary::-webkit-details-marker { display: none; }

.accordion__summary:hover { color: var(--brand); }

.accordion__icon {
  position: relative;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: var(--border-width) solid var(--border-strong);
  transition: transform var(--dur) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 0.7rem;
  height: 2px;
  background-color: currentColor;
  translate: -50% -50%;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.accordion__icon::after { rotate: 90deg; }

.accordion__item[open] .accordion__icon { transform: rotate(135deg); }
.accordion__item[open] .accordion__summary { color: var(--brand); }

.accordion__panel {
  padding-block-end: var(--space-m);
  color: var(--text-muted);
  max-width: 62ch;
}

.accordion__item[open] .accordion__panel { animation: fade-up var(--dur) var(--ease-out); }

/* ==========================================================================
   QUOTE / TESTIMONIAL
   ========================================================================== */
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-l);
  background-color: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-l);
}

.quote__text {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.35;
  letter-spacing: var(--tracking-tight);
}

.quote__text::before { content: "“"; color: var(--brand); }
.quote__text::after { content: "”"; color: var(--brand); }

.quote__author {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-block-start: auto;
  font-size: var(--step--1);
  font-style: normal;
}

.quote__avatar {
  display: grid;
  place-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 50%;
  background-color: var(--brand-soft);
  color: var(--brand);
  font-family: var(--font-display);
  font-weight: 600;
}

.quote__name { font-weight: 700; display: block; }
.quote__role { color: var(--text-subtle); font-size: var(--step--2); }

/* ==========================================================================
   STAT
   ========================================================================== */
.stat { display: flex; flex-direction: column; gap: var(--space-3xs); }

.stat__value {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--brand);
}

.stat__label {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.section--sunk .stat__value { color: var(--white); }
.section--sunk .stat__label { color: color-mix(in srgb, var(--white) 62%, transparent); }

/* ==========================================================================
   TAG / FILTER PILL
   ========================================================================== */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.filter {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem; /* 44px minimum touch target */
  padding: 0.5em 1.1em;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--surface);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-muted);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.filter:hover { border-color: var(--brand); color: var(--brand); }

.filter[aria-pressed="true"] {
  background-color: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand);
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-s);
  padding: var(--space-s);
  background-color: color-mix(in srgb, var(--paper) 92%, transparent);
  border: 0;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  color: var(--white);
}

.lightbox::backdrop { background-color: color-mix(in srgb, #000 70%, transparent); }

.lightbox:not([open]) { display: none; }

.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }

.lightbox__count {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.lightbox__stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs);
  min-height: 0;
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
}

.lightbox__img {
  max-height: 72svh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--radius-s);
  background-color: transparent;
  animation: fade-up var(--dur) var(--ease-out);
}

.lightbox__caption {
  text-align: center;
  font-size: var(--step--1);
  color: var(--text-muted);
}

.lightbox__btn {
  display: grid;
  place-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 50%;
  border: var(--border-width) solid color-mix(in srgb, var(--white) 28%, transparent);
  color: var(--white);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.lightbox__btn:hover { background-color: color-mix(in srgb, var(--white) 16%, transparent); transform: scale(1.06); }

.lightbox__btn svg { width: 1.25rem; height: 1.25rem; }

/* Side arrows on wide screens; a centred pair below the image on narrow
   ones. Declared before the media query so the query actually wins. */
.lightbox__nav-mobile { display: none; }

@media (max-width: 40em) {
  .lightbox__stage { grid-template-columns: minmax(0, 1fr); }
  .lightbox__stage .lightbox__btn { display: none; }
  .lightbox__nav-mobile { display: flex; gap: var(--space-s); justify-content: center; }
}

/* ==========================================================================
   WHATSAPP FAB — floating button, present on every page.
   ========================================================================== */
.whatsapp-fab {
  position: fixed;
  right: var(--space-m);
  bottom: var(--space-m);
  bottom: calc(var(--space-m) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-sticky);
  display: grid;
  place-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: var(--brand);
  color: var(--on-brand);
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  background-color: var(--brand-strong);
  transform: translateY(-2px);
  color: var(--on-brand);
}

.whatsapp-fab svg { width: 1.75rem; height: 1.75rem; }

@media (max-width: 40em) {
  .whatsapp-fab { width: 3.25rem; height: 3.25rem; right: var(--space-s); bottom: var(--space-s); }
  .whatsapp-fab svg { width: 1.6rem; height: 1.6rem; }
}