/* ============================================================
   APEXA QLA — V6 SPEC v11 OVERRIDES
   Loaded AFTER style-v5-brand.css. Implements progressive changes
   from the v11 spec, section by section.
   v5 stays untouched; this file is v6-only.
   ============================================================ */


/* ----------------------------------------------------------
   GLOBAL TYPE SCALE (spec v11)
   - Hero headline    72 / 48 px  · Aktiv Grotesk Extended Bold (700)
   - Section heading  48 / 32 px  · Aktiv Grotesk Extended Bold (700)
   - Subsection       24 px        · Aktiv Grotesk Extended Semibold (600)
   - Body             18 px        · Aktiv Grotesk Regular (400) · LH 1.6
   - Small / muted    14 px        · Aktiv Grotesk Regular (400)
   - Editorial italic — opt-in via .editorial-accent (rare, "warrior" style)
   ---------------------------------------------------------- */

/* Body — 18px, line-height 1.6 */
body {
  font-size: 1.125rem; /* 18px */
  line-height: 1.6;
  font-weight: 400;
}
p, .body-lg, .body-md, .lead,
.card__desc, .section__subtitle, .subtitle {
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
}

/* Small / muted — 14px Regular */
.small, .muted, .footer-v2 small,
.heading-accent, .label,
.path-step__desc,
.skill-bar__name, .skill-bar__value,
.team-slider__role,
.therapy-tools__eyebrow,
.splat__eyebrow, .apexa-stories__label,
.path-progress__label {
  font-size: 0.875rem;  /* 14px */
  line-height: 1.45;
  font-weight: 400;
}

/* Hero headline — Bold 700, 48 → 72px */
.heading-xl,
.hero__title, .hero__title-line, .hero__title--v6 {
  font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(3rem, 5.5vw, 4.5rem) !important; /* 48 → 72px */
  line-height: 1.05;
  letter-spacing: -0.02em !important;
}

/* Section heading — Bold 700, 32 → 48px */
.heading-lg,
.section__heading,
.therapy-tools__title,
.splat__title,
.apexa-stories__title,
.contact-banner__title,
.problem-v2__title,
.path-progress h2,
.team-header h2 {
  font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2rem, 3.5vw, 3rem) !important; /* 32 → 48px */
  line-height: 1.1;
  letter-spacing: -0.02em !important;
}

/* Subsection heading — Semibold 600, 24px */
.heading-md,
.card__title,
.path-step__title,
.problem-v2__subtitle,
.team-slider__name {
  font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important; /* 24px */
  line-height: 1.25;
  letter-spacing: -0.02em !important;
}

/* Mobile body — keep 18px (don't drop to 16px), line-height 1.55 */
@media (max-width: 640px) {
  body, p, .body-lg, .body-md {
    font-size: 1.0625rem; /* 17px — slightly smaller for screen real-estate */
    line-height: 1.55;
  }
  .heading-xl, .hero__title, .hero__title-line, .hero__title--v6 {
    font-size: clamp(2rem, 8vw, 3rem) !important; /* 32 → 48px */
  }
  .heading-lg, .section__heading,
  .therapy-tools__title, .splat__title, .apexa-stories__title,
  .contact-banner__title, .problem-v2__title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important; /* 24 → 32px */
  }
}


/* ----------------------------------------------------------
   SECTION 2 — EMPATHY BEAT (spec v11 §8)
   Sits on top of the existing problem-v2 layout (wing-clip mask
   on the right image area). We override only:
   - Background → warm paper #FAF8F2 (spec value)
   - Title size → editorial (smaller than heading-lg)
   - Body text → slightly above default 18px, opacity 0.85
   - Slideshow crossfade timing
   ---------------------------------------------------------- */
.empathy-beat.problem-v2 {
  background: #FAF8F2 !important;   /* warm paper — spec */
}

/* Eyebrow above the title — small, uppercase, brand orange.
   Standard "letter from the team" editorial label. */
.empathy-beat .empathy-beat__eyebrow {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;          /* ~12.5px */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem 0;
  line-height: 1.4;
}

/* Editorial title — softer than the heading-xl. Aktiv Grotesk
   Extended SemiBold, ~24-32px. Per spec: "editorial, not UI". */
.empathy-beat .problem-v2__title.empathy-beat__title {
  font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;  /* 24–32px */
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-dark);
  margin: 0 0 1.5rem 0;
}

/* Body — Aktiv Regular, slightly above 18px so editorial reads richer */
.empathy-beat .problem-v2__body.empathy-beat__body {
  font-family: "aktiv-grotesk", "Inter", sans-serif !important;
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.25vw, 1.25rem); /* 17–20px */
  line-height: 1.65;
  color: var(--text-dark);
  opacity: 0.85;
  max-width: 580px;
}
.empathy-beat .empathy-beat__body p { margin: 0 0 1rem 0; }
.empathy-beat .empathy-beat__body p:last-child { margin: 0; }

/* Slideshow crossfade — reuses .condition-img + .active classes from
   the original problem-v2 wing-clip. Override transition for slower,
   more cinematic 1s crossfade between slides. */
.empathy-beat .condition-img {
  transition: opacity 1s ease !important;
}


/* ----------------------------------------------------------
   SECTION 3 — WHO WE WALK WITH (spec v11 §9)
   Three clean condition cards. Recognition filter — parents
   self-identify in 3 seconds. Replaces the retired Sensophysio.
   ---------------------------------------------------------- */
.who-we-walk {
  background: #ffffff;
  color: var(--text-dark);
  padding: clamp(4rem, 8vh, 7rem) 0;
  position: relative;
}

.who-we-walk__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
}

.who-we-walk__header {
  max-width: 880px;
  margin: 0 auto clamp(2.5rem, 5vh, 4rem);
  text-align: center;
}

/* Eyebrow above the title — matches .empathy-beat__eyebrow styling */
.who-we-walk__eyebrow {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem 0;
  line-height: 1.4;
}

.who-we-walk__title {
  font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2rem, 3.5vw, 3rem) !important;  /* 32–48px per spec */
  line-height: 1.1;
  letter-spacing: -0.02em !important;
  color: var(--text-dark);
  margin: 0 0 1rem 0;
}

.who-we-walk__subline {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.125rem);  /* 16–18px */
  line-height: 1.55;
  color: var(--text-dark);
  opacity: 0.78;
  margin: 0;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Three columns on desktop, stacked on mobile */
.who-we-walk__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem);
}

@media (max-width: 900px) {
  .who-we-walk__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Card */
.who-card {
  background: #ffffff;
  border: 1px solid #e3e1dc;
  border-radius: 14px;
  padding: clamp(1.75rem, 2.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.35s var(--ease),
              box-shadow 0.35s var(--ease),
              border-color 0.35s var(--ease);
  position: relative;
  overflow: hidden;
}

.who-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow:
    0 18px 50px rgba(253, 157, 73, 0.18),
    0 6px 18px rgba(26, 37, 43, 0.06);
}

.who-card__index {
  font-family: "aktiv-grotesk-extended", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0;
}

.who-card__title {
  font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important;  /* 24px — subsection per spec */
  line-height: 1.2;
  letter-spacing: -0.02em !important;
  color: var(--text-dark);
  margin: 0;
}

.who-card__list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 1.25rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.who-card__list li {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 400;
  font-size: 1rem;          /* 16px */
  line-height: 1.55;
  color: var(--text-dark);
  opacity: 0.8;
  position: relative;
  padding-left: 0;
}

.who-card__link {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}

.who-card__link:hover {
  color: var(--accent-hover);
  gap: 0.65rem;
}

.who-card__link i {
  font-size: 1rem;
}

/* ---- Glassmorphism pills for Card 01 conditions list ----
   Each <li> becomes a frosted-glass pill. Adapts to both states:
   - Default (white bg)  → soft orange-tinted glass with orange border
   - Hover  (dark scrim) → translucent white glass with white border
   Backdrop-filter blur picks up whatever sits behind (video, photo). */
.who-card--has-video .who-card__list {
  /* Override base .who-card__list flex-direction: column → row,
     so pills sit side-by-side and wrap to the next row when needed. */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0.4rem 0 1.25rem 0;
  flex: 1;
  align-content: flex-start;
}

.who-card--has-video .who-card__list li {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.95rem;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--text-dark);
  font-weight: 500;
  letter-spacing: -0.005em;
  /* Default — subtle orange-tinted frosted glass */
  background: rgba(253, 157, 73, 0.1);
  border: 1px solid rgba(253, 157, 73, 0.28);
  border-radius: 100px;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 4px 14px rgba(253, 157, 73, 0.08);
  transition: background 0.45s var(--ease),
              border-color 0.45s var(--ease),
              color 0.45s var(--ease),
              box-shadow 0.45s var(--ease);
  opacity: 1;        /* override the base 0.8 from .who-card__list li */
  position: relative;
}

/* Hover state — pills sit over dark video scrim, switch to white glass */
.who-card--has-video:hover .who-card__list li {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 6px 20px rgba(0, 0, 0, 0.18);
}


/* ---- Hover-video variant (test on Card 01 — Neurological) ----
   Video sits absolutely behind the content. Default: opacity 0.
   Hover: opacity 1, content text inverts to white, dark scrim
   keeps text readable over moving footage. */
.who-card--has-video {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.who-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}

/* Dark scrim over video for text contrast */
.who-card--has-video::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(26, 37, 43, 0.55) 0%,
    rgba(26, 37, 43, 0.75) 100%
  );
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}

/* Content sits above video + scrim */
.who-card--has-video .who-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

/* On hover: reveal video + scrim */
.who-card--has-video:hover .who-card__video,
.who-card--has-video:hover::before {
  opacity: 1;
}

/* On hover: invert text colours to white */
.who-card--has-video:hover .who-card__title {
  color: #ffffff !important;
}

.who-card--has-video:hover .who-card__list li {
  color: #ffffff !important;
  opacity: 0.92;
}

/* Index "01" stays orange (already orange) — fine on dark scrim */
.who-card--has-video:hover .who-card__index {
  color: var(--accent);
}

/* Learn more — keep orange but brighten on dark bg */
.who-card--has-video:hover .who-card__link {
  color: var(--accent);
}


/* ---- Hover-neural variant (Card 02 — Motor & musculoskeletal) ----
   Canvas anchored top-right and oversized so the network bleeds past
   card edges (80% × 90% with negative offsets). A diagonal white→
   transparent overlay (bottom-left → top-right) keeps the lower-left
   text area readable while the animation lives in the upper-right.
   Hover transitions are slow (1.2s) for a smooth, calm feel. */
.who-card--has-neural {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.6s var(--ease),
              border-color 0.6s var(--ease),
              box-shadow 0.6s var(--ease);
}

/* Canvas positioned upper-right, larger than card so the network
   visually extends beyond the bounds (bleeds off the corners). */
.who-card__neural {
  position: absolute;
  top: -8%;
  right: -8%;
  width: 90%;
  height: 95%;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s ease;
  transform: scale(0.96) translate(8px, -8px);
  pointer-events: none;
  display: block;
}

/* Diagonal mask — strong white at bottom-left → transparent at top-right.
   Sits BETWEEN the canvas and the text content. Default: opacity 0
   (so when canvas is hidden the card is just plain white). */
.who-card--has-neural::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top right,
    rgba(255, 255, 255, 1)    0%,
    rgba(255, 255, 255, 1)    32%,
    rgba(255, 255, 255, 0.92) 52%,
    rgba(255, 255, 255, 0.55) 72%,
    rgba(255, 255, 255, 0.18) 88%,
    rgba(255, 255, 255, 0)    100%
  );
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}

.who-card--has-neural .who-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

/* On hover — calm, slow fade-in for the whole layered scene */
.who-card--has-neural:hover .who-card__neural {
  opacity: 1;
  transform: scale(1) translate(0, 0);
}
.who-card--has-neural:hover::after {
  opacity: 1;
}

/* Smoother card-level hover (slower lift, gentler shadow) */
.who-card--has-neural:hover {
  transform: translateY(-4px);
  box-shadow:
    0 24px 60px rgba(253, 157, 73, 0.14),
    0 8px 24px rgba(26, 37, 43, 0.05);
  border-color: rgba(253, 157, 73, 0.35);
}


/* ============================================================
   CARD 02 — Motor & musculoskeletal
   Articulated joint-chain canvas, same architecture as the neural card
   (canvas bleeds off bottom-left, diagonal white mask over it, content
   layer above). The chain renders as connected nodes/lines that gently
   sway like a kinetic skeleton diagram.
============================================================ */
.who-card--has-muscle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.6s var(--ease),
              border-color 0.6s var(--ease),
              box-shadow 0.6s var(--ease);
}

/* Canvas positioned top-right — mirrors neural so the muscle lives in
   the same prominent corner as Card 01's main animation. */
.who-card__muscle {
  position: absolute;
  top: -8%;
  right: -8%;
  width: 90%;
  height: 95%;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s ease;
  transform: scale(0.96) translate(8px, -8px);
  pointer-events: none;
  display: block;
}

/* Diagonal mask — strong white at bottom-left → transparent at top-right */
.who-card--has-muscle::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top right,
    rgba(255, 255, 255, 1)    0%,
    rgba(255, 255, 255, 1)    32%,
    rgba(255, 255, 255, 0.92) 52%,
    rgba(255, 255, 255, 0.55) 72%,
    rgba(255, 255, 255, 0.18) 88%,
    rgba(255, 255, 255, 0)    100%
  );
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}

.who-card--has-muscle .who-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.who-card--has-muscle:hover .who-card__muscle {
  opacity: 1;
  transform: scale(1) translate(0, 0);
}
.who-card--has-muscle:hover::after { opacity: 1; }
.who-card--has-muscle:hover {
  transform: translateY(-4px);
  box-shadow:
    0 24px 60px rgba(253, 157, 73, 0.14),
    0 8px 24px rgba(26, 37, 43, 0.05);
  border-color: rgba(253, 157, 73, 0.35);
}


/* ============================================================
   CARD 03 — Sensory & development
   Concentric ripples emanating from a corner — soft pulses suggesting
   sensory perception / developmental rhythm. Same architecture: canvas
   bleed + diagonal mask + slow fade-in.
============================================================ */
.who-card--has-ripple {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.6s var(--ease),
              border-color 0.6s var(--ease),
              box-shadow 0.6s var(--ease);
}

/* Canvas covers the whole card so rings can radiate fully from corner.
   IMPORTANT: <canvas> is a replaced element (like <img>) so `inset: 0`
   alone does NOT size it to the parent — it keeps the default 300×150
   intrinsic size. We need explicit width/height to force CSS layout
   size to match the parent.
   transform-origin: top right so the scale(0.96 → 1) intro animation
   pivots from the corner, never shifting the ripple origin point. */
.who-card__ripple {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s ease;
  transform: scale(0.96);
  transform-origin: top right;
  pointer-events: none;
  display: block;
}

/* Diagonal mask — bottom-left strong (content/text legible), fades toward
   top-right where the ripple origin sits */
.who-card--has-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top right,
    rgba(255, 255, 255, 1)    0%,
    rgba(255, 255, 255, 1)    34%,
    rgba(255, 255, 255, 0.9)  54%,
    rgba(255, 255, 255, 0.55) 72%,
    rgba(255, 255, 255, 0.18) 88%,
    rgba(255, 255, 255, 0)    100%
  );
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}

.who-card--has-ripple .who-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.who-card--has-ripple:hover .who-card__ripple {
  opacity: 1;
  transform: scale(1);
}
.who-card--has-ripple:hover::after { opacity: 1; }
.who-card--has-ripple:hover {
  transform: translateY(-4px);
  box-shadow:
    0 24px 60px rgba(253, 157, 73, 0.14),
    0 8px 24px rgba(26, 37, 43, 0.05);
  border-color: rgba(253, 157, 73, 0.35);
}


/* Below the cards — single quiet "all conditions" link */
.who-we-walk__footer {
  text-align: center;
  margin-top: clamp(2rem, 4vh, 3rem);
}

.who-we-walk__all-link {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text-dark);
  opacity: 0.7;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2rem;
  transition: opacity 0.25s var(--ease), color 0.25s var(--ease), gap 0.25s var(--ease);
}

.who-we-walk__all-link:hover {
  opacity: 1;
  color: var(--accent);
  gap: 0.7rem;
}

.who-we-walk__all-link i {
  font-size: 1rem;
}


/* ----------------------------------------------------------
   BUTTONS — consolidated size + colour pass (v6 review)
   - Smaller font across the board (was 0.85–0.95rem, now 0.78–0.85)
   - White text on orange backgrounds (.btn--primary, .card__cta,
     .hero__cta-single, .problem-v2__cta, .splat__reveal-btn)
   - Padding scaled to match smaller font
   - All pill-rounded, no glow (already enforced by brand layer)
   ---------------------------------------------------------- */

/* Default button — drops from 0.85rem to 0.78rem */
.btn {
  font-size: 0.78rem !important;          /* ~12.5px */
  padding: 0.85rem 1.85rem !important;
  letter-spacing: 0.12em !important;
}

.btn--sm {
  font-size: 0.7rem !important;           /* ~11px */
  padding: 0.6rem 1.25rem !important;
}

.btn--lg {
  font-size: 0.85rem !important;          /* ~13.5px (was 0.95) */
  padding: 1rem 2.4rem !important;
}

/* Hero single CTA — orange, white text, slightly larger feel for primacy */
.hero__cta-single {
  font-size: 0.85rem !important;
  padding: 0.95rem 2.2rem !important;
}

/* Card CTA on programme cards (orange pill) */
.card__cta {
  font-size: 0.75rem !important;          /* ~12px */
  padding: 0.7rem 1.6rem !important;
  background: var(--accent) !important;
  color: #ffffff !important;
}

/* Contact banner CTA — sits on the orange parallax band, so it stays
   navy with white text for contrast (the only non-orange button by design). */
.contact-banner__cta {
  font-size: 0.85rem !important;
  padding: 0.9rem 2.2rem !important;
}

/* Problem V2 / empathy section CTA (still used elsewhere if any) */
.problem-v2__cta {
  font-size: 0.78rem !important;
  padding: 0.85rem 1.85rem !important;
  background: var(--accent) !important;
  color: #ffffff !important;
}

/* Splat / Tour reveal button — orange pill */
.splat__reveal-btn {
  font-size: 0.72rem !important;
  padding: 0.85rem 1.8rem !important;
  background: var(--accent) !important;
  color: #ffffff !important;
}



/* ----------------------------------------------------------
   SECTION 4 — THE 4-STEP JOURNEY (spec v11 §10)
   Removes the "what happens if I reach out" fear. 4 cards in a row
   on desktop, stacked on mobile. Step number, title, duration, and
   one short status badge ("Free" / "See Honorar" / "No obligation").
   ---------------------------------------------------------- */
.journey {
  background: #FAF8F2;             /* warm paper — same as empathy beat */
  color: var(--text-dark);
  padding: clamp(4rem, 8vh, 7rem) 0;
  position: relative;
}

.journey__inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
}

.journey__header {
  max-width: 880px;
  margin: 0 auto clamp(2.5rem, 5vh, 4rem);
  text-align: center;
}

/* Eyebrow — matches .empathy-beat__eyebrow / .who-we-walk__eyebrow */
.journey__eyebrow {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem 0;
  line-height: 1.4;
}

.journey__title {
  font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2rem, 3.5vw, 3rem) !important;  /* 32–48px */
  line-height: 1.1;
  letter-spacing: -0.02em !important;
  color: var(--text-dark);
  margin: 0 0 1rem 0;
}

.journey__subline {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.55;
  color: var(--text-dark);
  opacity: 0.78;
  margin: 0 auto;
  max-width: 720px;
}

/* 4 cards in a row on desktop, stacked on mobile */
.journey__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 1.5vw, 1.5rem);
}

@media (max-width: 1024px) {
  .journey__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .journey__grid {
    grid-template-columns: 1fr;
  }
}

/* Card — base look. Hover behaviour (tilt + glyph stroke-on) is
   defined further down so it can layer on top cleanly. */
.journey-card {
  background: #ffffff;
  border: 1px solid #e3e1dc;
  border-radius: 14px;
  padding: clamp(1.5rem, 2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 220px;
}

.journey-card__step {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.25rem 0;
}

.journey-card__title {
  font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.4rem !important;        /* slightly under 24px subsection */
  line-height: 1.2;
  letter-spacing: -0.02em !important;
  color: var(--text-dark);
  margin: 0;
}

.journey-card__duration {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text-dark);
  opacity: 0.7;
  margin: 0;
  flex: 1;
}

/* Status badge pill — bottom of card */
.journey-card__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 100px;
  white-space: nowrap;
  transform: scale(1);
  transform-origin: 0% 50%;       /* grow from the left edge */
  transition: background 0.4s var(--ease),
              color 0.4s var(--ease),
              border-color 0.4s var(--ease),
              transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
              opacity 0.4s var(--ease);
}

/* "Free" / "No obligation" — friendly orange-tinted */
.journey-card__badge--free {
  background: rgba(253, 157, 73, 0.15);
  color: var(--accent);
  border: 1px solid rgba(253, 157, 73, 0.32);
}

/* "See Honorar" — neutral / muted (the only paid step) */
.journey-card__badge--paid {
  background: rgba(26, 37, 43, 0.06);
  color: var(--text-dark);
  border: 1px solid rgba(26, 37, 43, 0.18);
  opacity: 0.85;
}

/* On card hover — badge swells slightly. Free/No-obligation stay
   orange (status indicators, not clickable). Only "See Honorar"
   flips to dark brand-blue to signal it's a tappable next step. */
.journey-card:hover .journey-card__badge {
  transform: scale(1.08);
  opacity: 1;
}

/* Free / No obligation — keep orange but slightly stronger on hover */
.journey-card:hover .journey-card__badge--free {
  background: rgba(253, 157, 73, 0.22);
  border-color: rgba(253, 157, 73, 0.5);
  color: var(--accent);
}

/* See Honorar — only this one flips to dark brand-blue (clickable feel) */
.journey-card:hover .journey-card__badge--paid {
  background: var(--dark);
  color: #ffffff;
  border-color: var(--dark);
}

/* CTA below the cards — quiet text link with arrow */
.journey__footer {
  text-align: center;
  margin-top: clamp(2rem, 4vh, 3rem);
}

.journey__detail-link {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text-dark);
  opacity: 0.75;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  position: relative;
  transition: opacity 0.25s var(--ease), color 0.25s var(--ease), gap 0.25s var(--ease);
}

.journey__detail-link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: 100% 50%;
  transform: scale3d(0, 1, 1);
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

.journey__detail-link:hover {
  opacity: 1;
  color: var(--accent);
  gap: 0.7rem;
}

.journey__detail-link:hover::before {
  transform-origin: 0% 50%;
  transform: scale3d(1, 1, 1);
}

.journey__detail-link i {
  font-size: 1rem;
}


/* ----------------------------------------------------------
   JOURNEY CARD HOVER — Hand-drawn glyph + 3D tilt
   - SVG glyph in top-right corner: stroke draws on via
     stroke-dasharray when hovering
   - Card tilts in 3D following mouse position (--tx / --ty
     custom props are set by v6-spec.js mousemove listener)
   - Subtle lift + orange border + soft orange shadow
   ---------------------------------------------------------- */
.journey-card {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 900px;
  --tx: 0deg;
  --ty: 0deg;
  transform: rotateX(var(--ty)) rotateY(var(--tx)) translateY(0);
  transition: transform 0.4s var(--ease),
              border-color 0.4s var(--ease),
              box-shadow 0.4s var(--ease);
}

/* SVG glyph in the top-right corner — orange, prepared for draw-on.
   On hover: stroke draws on, glyph scales up + tilts ~8° to the left,
   and the line weight bumps from 2.2 → 3.2 for a bolder feel. */
.journey-card__glyph {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  color: var(--accent);
  pointer-events: none;
  z-index: 2;
  transform-origin: 50% 50%;
  transform: scale(1) rotate(0deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.journey-card__glyph path,
.journey-card__glyph circle,
.journey-card__glyph rect {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  opacity: 0;
  /* default stroke-width comes from the SVG attribute; we bump it on hover */
  transition: stroke-dashoffset 0.8s cubic-bezier(0.7, 0, 0.2, 1),
              opacity 0.4s var(--ease),
              stroke-width 0.4s var(--ease);
}

.journey-card:hover {
  border-color: var(--accent);
  box-shadow:
    0 18px 44px rgba(253, 157, 73, 0.16),
    0 4px 14px rgba(26, 37, 43, 0.04);
}

.journey-card:hover .journey-card__glyph {
  transform: scale(1.22) rotate(-8deg);
}

.journey-card:hover .journey-card__glyph path,
.journey-card:hover .journey-card__glyph circle,
.journey-card:hover .journey-card__glyph rect {
  stroke-dashoffset: 0;
  opacity: 1;
  stroke-width: 3.2;
}

/* (Step 04 checkmark removed — only Card 03 keeps a glyph now) */


/* ---- Step 03 ORCA brand mark variant ----
   Uses the brand orca SVG (filled, not stroked) so we can't apply
   stroke-dasharray draw-on. Instead: clip-path wipe reveal from left
   to right, plus the same scale + tilt + glow as the other glyphs. */
.journey-card__glyph--orca {
  width: 70px !important;       /* wider — orca is ~1.7:1 aspect */
  height: 42px !important;
  top: 1.2rem !important;
  right: 1.2rem !important;
  clip-path: inset(0 100% 0 0); /* hidden — fully clipped from right */
  -webkit-clip-path: inset(0 100% 0 0);
  transition:
    transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1),
    clip-path 0.85s cubic-bezier(0.7, 0, 0.2, 1),
    -webkit-clip-path 0.85s cubic-bezier(0.7, 0, 0.2, 1);
}

/* Reset the path-level rules so the orca renders as filled artwork
   (the default rule sets opacity:0 + stroke-dasharray which would
   hide it entirely). */
.journey-card__glyph--orca path {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  opacity: 1 !important;
  /* keep brand fills from the SVG attributes — no override */
  transition: none !important;
}

/* Hover — wipe the clip-path open + same scale/rotate as other glyphs */
.journey-card--orca:hover .journey-card__glyph--orca {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  transform: scale(1.22) rotate(-8deg);
}


/* ----------------------------------------------------------
   SECTION 5 — ORCA IN 60 SECONDS (spec v11 §11)
   The differentiator section. Top half: explainer. Bottom half:
   3×2 grid of tool categories. FCC banner closes the section.
   ---------------------------------------------------------- */
.orca {
  background: var(--dark);            /* #25323A — brand Apexa Blue */
  color: #ffffff;
  padding: clamp(4rem, 8vh, 7rem) 0 0;     /* video sits flush at bottom */
  position: relative;
  overflow: hidden;                   /* clip parallax-shifted bg mark */
}

/* ---- Background Apexa mark — sits LOW in the section (behind cards),
   smaller scale. JS adds scroll + mouse parallax via --px / --py. */
.orca__bg {
  position: absolute;
  /* Lifted so the mark sits fully behind the tool-card grid instead of
     being cropped by the video section below. Smaller top + a bottom
     inset pull the centered mark upward. */
  inset: 5% 0 14% 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.orca__bg-mark {
  width: 50%;
  max-width: 800px;
  height: auto;
  opacity: 0.05;                       /* subtle ghost mark */
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%, #000 50%, transparent 78%, transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%, #000 50%, transparent 78%, transparent 100%
  );
  --px: 0px;
  --py: 0px;
  transform: translate3d(var(--px), var(--py), 0) scale(1.05);
  transition: transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: transform;
}

.orca__inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
  position: relative;                  /* stack above the bg mark */
  z-index: 1;
}

/* ---- Top half: explainer ---- */
.orca__intro {
  max-width: 1080px;
  margin: 0 auto clamp(3rem, 6vh, 5rem);
  text-align: center;
}

/* Eyebrow — plain small uppercase orange text, matches other sections */
.orca__eyebrow {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem 0;
  line-height: 1.4;
}

.orca__title {
  font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  line-height: 1.1;
  letter-spacing: -0.02em !important;
  color: #ffffff;
  margin: 0 0 1.5rem 0;
}

.orca__body {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 auto 0.85rem;
  max-width: 980px;
}
.orca__body:last-of-type { margin-bottom: 1.75rem; }

/* CTA — orange filled pill (brand primary on the navy section) */
/* ORCA "Understand ORCA" CTA — matched to client reference button:
   vertical orange gradient, inset highlight + glow, shine sweep, and
   the inline arrow icon slides on hover. */
.orca__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 2rem;
  background: linear-gradient(180deg, #FEAA5F, #FD9D49);
  color: #ffffff;
  border: none;
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 12px 28px -8px rgba(253, 157, 73, 0.55);
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.orca__cta:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, #FFB870, #FCA350);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 22px 44px -12px rgba(253, 157, 73, 0.7);
}
.orca__cta i {
  font-size: 1.05rem;
  transition: transform 0.3s ease;
}
.orca__cta:hover i { transform: translateX(4px); }

/* Shine sweep for the ORCA CTA */
.orca__cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transition: left 0.7s ease;
  pointer-events: none;
}
.orca__cta:hover::before { left: 110%; }

/* ---- Bottom half: 3×2 tool category grid ---- */
.orca__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.5vw, 1.5rem);
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}

@media (max-width: 1024px) {
  .orca__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .orca__grid { grid-template-columns: 1fr; }
}

/* Card — semi-transparent dark panel on the navy section. Stays
   on-brand (no jarring white card cutout) and reads cleanly against
   the navy bg via the soft border + subtle glass. */
.orca-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: clamp(1.5rem, 2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 200px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.35s var(--ease),
              background 0.35s var(--ease),
              border-color 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}

.orca-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(253, 157, 73, 0.55);
  box-shadow:
    0 18px 44px rgba(253, 157, 73, 0.2),
    0 4px 14px rgba(0, 0, 0, 0.18);
}

.orca-card__index {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.orca-card__title {
  font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.4rem !important;
  line-height: 1.2;
  letter-spacing: -0.02em !important;
  color: #ffffff;
  margin: 0;
}

/* Tools — plain text list, comma-separated visually via spacing */
.orca-card__tools {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.85rem;
}

.orca-card__tools li {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.78);
  position: relative;
  padding: 0;
  transition: color 0.3s var(--ease);
}

/* "·" separator between items (skipped on first) */
.orca-card__tools li + li::before {
  content: '·';
  display: inline-block;
  margin-right: 0.85rem;
  color: rgba(255, 255, 255, 0.35);
}

.orca-card:hover .orca-card__tools li {
  color: #ffffff;
}

/* method tool names that have a full page — clickable */
.orca-card__tools li.has-page a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(253, 157, 73, 0.45);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.orca-card__tools li.has-page a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---- FCC banner — bare text, no panel, no border ---- */
.orca__fcc {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  text-align: center;
  position: relative;
}

.orca__fcc-eyebrow {
  display: inline-block;
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.orca__fcc-text {
  font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem) !important;
  line-height: 1.4;
  letter-spacing: -0.015em !important;
  color: #ffffff;
  margin: 0 auto;
  max-width: 760px;
}


/* ---- Bottom orca video — taller, lifted up so it overlaps with
   the FCC text zone. The water-reflection top part of the video
   sits behind the FCC text via gradient blend. Plays in slow-mo
   (0.55× rate set by JS) for a calm, cinematic feel. ---- */
.orca__video {
  position: relative;
  width: 100%;
  /* Negative margin pulls the video up — its top section overlaps
     the FCC text area so reflections sit behind the copy. */
  margin-top: clamp(-7rem, -10vh, -5rem);
  height: clamp(520px, 64vh, 780px);
  overflow: hidden;
  z-index: 0;                          /* below FCC text */
}

.orca__video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

/* Top fade — navy bg → transparent. Tall fade (55%) so the navy
   carries through the FCC text zone before settling into the
   reflective water surface. */
.orca__video-fade {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 55%;
  background: linear-gradient(
    180deg,
    var(--dark) 0%,
    rgba(37, 50, 58, 0.95) 18%,
    rgba(37, 50, 58, 0.7)  42%,
    rgba(37, 50, 58, 0.3)  72%,
    rgba(37, 50, 58, 0)    100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Bottom fade — transparent → warm paper (#FAF8F2). Blends the video
   smoothly into the warriors section below so the navy → beige hand-off
   feels continuous instead of a hard cut. */
.orca__video-fade-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(
    180deg,
    rgba(250, 248, 242, 0)    0%,
    rgba(250, 248, 242, 0.25) 35%,
    rgba(250, 248, 242, 0.7)  72%,
    rgba(250, 248, 242, 0.95) 90%,
    #FAF8F2                   100%
  );
  pointer-events: none;
  z-index: 2;
}

/* FCC banner sits ABOVE the video so text reads over the reflection */
.orca__fcc {
  position: relative;
  z-index: 3;
}


/* ----------------------------------------------------------
   SECTION 6 — BEHIND EVERY NUMBER, A LITTLE WARRIOR (spec v11 §13)
   Editorial proof. Top: headline + featured "156" number with caption.
   Bottom: 4 stat cards with thin vertical dividers between them.
   Warm paper background.
   ---------------------------------------------------------- */
.warriors {
  background: #FAF8F2;
  color: var(--text-dark);
  padding: clamp(4rem, 8vh, 7rem) 0;
}

.warriors__inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
}

/* ---- Top: editorial block ---- */
.warriors__editorial {
  max-width: 1080px;
  margin: 0 auto clamp(3rem, 6vh, 4.5rem);
  text-align: center;
}

/* Standard small eyebrow — matches A LETTER FROM THE TEAM,
   WHO WE WALK WITH, YOUR PATH, THE UMBRELLA OVER EVERYTHING */
.warriors__eyebrow {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem 0;
  line-height: 1.4;
}

.warriors__headline {
  font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  line-height: 1.12;
  letter-spacing: -0.02em !important;
  color: var(--text-dark);
  margin: 0 0 clamp(2.25rem, 4vw, 3rem) 0;
}

/* Featured number block — 156 on the LEFT, label + caption on the RIGHT */
.warriors__featured {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  text-align: left;
}

.warriors__featured-num {
  font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(5rem, 11vw, 10rem);    /* 80–160px */
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--dark);                      /* #25323A toolkit Blue */
  display: inline-block;
  /* counter ticks via JS update — gpu-accelerate the layer for smoothness */
  will-change: contents;
}

/* Family illustration sits between the 156 number and the text block.
   Height tracks the 156 font-size so they appear same-height on every
   viewport. Hidden by default — JS fades it in once the counter finishes. */
.warriors__featured-icon {
  height: clamp(5rem, 11vw, 10rem);
  width: auto;
  display: block;
  flex-shrink: 0;
  /* reveal state — toggled by JS via .warriors__featured.is-counted */
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: opacity 0.7s var(--ease) 0.05s,
              transform 0.7s var(--ease) 0.05s;
}

.warriors__featured-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 360px;
  /* reveal state — staggered slightly after the icon */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease) 0.2s,
              transform 0.7s var(--ease) 0.2s;
}

.warriors__featured.is-counted .warriors__featured-icon {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.warriors__featured.is-counted .warriors__featured-text {
  opacity: 1;
  transform: translateY(0);
}

/* Sub-heading style — bigger than before, not all-caps */
.warriors__featured-label {
  font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(1.4rem, 2vw, 1.75rem) !important;
  line-height: 1.15;
  letter-spacing: -0.015em !important;
  color: var(--text-dark);
  margin: 0;
  text-transform: none;
}

/* Caption — small, muted. Brand feedback was "no italics", so we use
   small caps instead of italic for the editorial flourish. */
.warriors__featured-caption {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.5;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--text-dark);
  opacity: 0.6;
  margin: 0;
}

/* Mobile: stack the number and text vertically */
@media (max-width: 640px) {
  .warriors__featured {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  .warriors__featured-text { align-items: center; text-align: center; }
}


/* ---- Bottom: 4 supporting stat cards with thin vertical dividers,
   wrapped in a white card panel that fades in on scroll. ---- */
.warriors__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #ffffff;
  border-radius: 14px;
  padding: 0;                    /* no top/bottom padding — cards own it */
  /* hidden by default — IntersectionObserver toggles .is-visible */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.6, 0.2, 1),
              transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.warriors__stats.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.warrior-stat {
  padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  position: relative;
}

/* Brand SVG illustration above the number — fixed-size box so all 4
   icons share the same width AND height regardless of native aspect.
   object-fit: contain keeps each illustration intact inside the box. */
.warrior-stat__icon {
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
  margin-bottom: 0.85rem;
  flex-shrink: 0;
  transform-origin: 50% 50%;
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.warrior-stat:hover .warrior-stat__icon {
  transform: scale(1.14);
}

/* Thin dividers between cards (skip first) */
.warrior-stat + .warrior-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(26, 37, 43, 0.14);
}

/* All 4 cards share consistent baselines:
   - icon row: fixed 96px box (above)
   - number row: fixed line-height + min-height
   - label row: 1 line, fixed
   - description row: 2-line min-height so all wrap to same band */
.warrior-stat__num {
  font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--dark);
  min-height: 1em;
  display: flex;
  align-items: center;
}

.warrior-stat__label {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  /* !important needed — the brand layer applies -0.02em via the
     wildcard [class*="__label"] selector with !important. */
  letter-spacing: 4px !important;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.4rem;
  min-height: 1em;
}

.warrior-stat__desc {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-dark);
  opacity: 0.78;
  margin: 0.4rem auto 0;
  max-width: 220px;
  min-height: 2.9em;     /* ≈ 2 lines — keeps cards aligned at the bottom */
}

/* Responsive: 2 cols on tablet, 1 col on mobile (dividers off) */
@media (max-width: 900px) {
  .warriors__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 0;
  }
  .warrior-stat:nth-child(odd)::before { display: none; }
  .warrior-stat:nth-child(2)::before { display: block; }
}

@media (max-width: 540px) {
  .warriors__stats {
    grid-template-columns: 1fr;
    gap: 1.25rem 0;
  }
  .warrior-stat::before { display: none !important; }
}


/* ----------------------------------------------------------
   SECTION 7 — PARENT VOICES (spec v11 §14)
   3 video testimonial cards, trust signal band, CTA. Lightbox
   modal opens YouTube embed on click (defined further down).
   ---------------------------------------------------------- */
.voices {
  background: #ffffff;
  color: var(--text-dark);
  padding: clamp(4rem, 8vh, 7rem) 0;
}

.voices__inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
}

.voices__header {
  max-width: 880px;
  margin: 0 auto clamp(2.5rem, 5vh, 4rem);
  text-align: center;
}

.voices__eyebrow {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem 0;
  line-height: 1.4;
}

.voices__title {
  font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  line-height: 1.12;
  letter-spacing: -0.02em !important;
  color: var(--text-dark);
  margin: 0 0 0.85rem 0;
}

.voices__subline {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.55;
  color: var(--text-dark);
  opacity: 0.78;
  margin: 0 auto;
  max-width: 640px;
}

/* ---- 3 video cards in a row ---- */
.voices__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem);
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}

@media (max-width: 900px) {
  .voices__grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
}

/* Card */
.voice-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  transition: transform 0.4s var(--ease);
}

.voice-card:hover { transform: translateY(-4px); }

/* Thumbnail with play button overlay */
.voice-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: #1a252b;
  isolation: isolate;
}

.voice-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.92);
  transition: filter 0.4s var(--ease), transform 0.6s var(--ease);
}

/* Subtle dark gradient at the bottom for legibility of the duration */
.voice-card__thumb::after {
  content: '';
  position: absolute;
  inset: 60% 0 0 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
}

.voice-card:hover .voice-card__thumb img {
  filter: brightness(1);
  transform: scale(1.04);
}

/* Play button — orange-tinted glassmorphism disc centered on the thumb */
/* Play button — matched to client reference: clean white disc with a
   dark play glyph, flips to brand orange (white glyph) + scales up when
   the card is hovered. */
.voice-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1),
              background 0.3s var(--ease),
              color 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}

.voice-card__play svg {
  margin-left: 3px;     /* visual centering — play triangle is right-heavy */
}

.voice-card:hover .voice-card__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 14px 32px -6px rgba(253, 157, 73, 0.55);
}

/* Duration chip in bottom-right corner of the thumb */
.voice-card__duration {
  position: absolute;
  bottom: 0.85rem;
  right: 0.95rem;
  z-index: 3;
  background: rgba(26, 37, 43, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
}

/* Meta block beneath the thumb */
.voice-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.voice-card__name {
  font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.2rem !important;
  line-height: 1.2;
  letter-spacing: -0.02em !important;
  color: var(--text-dark);
  margin: 0;
}

.voice-card__sub {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-dark);
  opacity: 0.7;
  margin: 0;
}

/* ---- Rating row — single row, ABOVE cards: stars + 4.9/5 + Trustpilot + Google ---- */
.voices__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
}

.voices__stars {
  font-size: 2.5rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.voices__rating-score {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
}
.voices__rating-score strong { font-weight: 700; }

/* ---- Trust logos in the rating row ---- */
.trust-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.3rem;
  text-decoration: none;
  transition: filter 0.35s ease, transform 0.35s ease;
  will-change: filter;
}

.trust-logo svg {
  display: block;
  height: 100%;
  width: auto;
}

.trust-logo:hover,
.trust-logo:focus-visible {
  transform: translateY(-1px);
}

/* ---- Baseline alignment ----
   The Trustpilot SVG's height is set by its STAR (taller than the
   wordmark), so its "Trustpilot" text sits lower in the box than
   Google's wordmark, which fills its own viewBox. Both logos are the
   same box height + centered, so we nudge each so the two wordmark
   BASELINES line up flat. (Shared rule → fixes homepage + every page.) */
.trust-logo--trustpilot {
  filter: saturate(0) brightness(0.78) contrast(0.95);
  position: relative;
  top: -4px;               /* lift the lower-sitting Trustpilot wordmark */
}
.trust-logo--trustpilot:hover,
.trust-logo--trustpilot:focus-visible {
  filter: none;
}

/* Google — multicolor SVG with hardcoded brand fills. Its wordmark fills
   the viewBox, so it reads a touch larger; trim its height slightly so it
   matches the Trustpilot wordmark size, then drop it to the shared baseline. */
.trust-logo--google {
  filter: saturate(0) brightness(0.78) contrast(0.95);
  height: 1.7rem;
  position: relative;
  top: 1px;
}
.trust-logo--google:hover,
.trust-logo--google:focus-visible {
  filter: none;
}

@media (max-width: 600px) {
  .voices__rating { gap: 0.9rem; }
  .voices__stars { font-size: 2rem; }
  .voices__rating-score { font-size: 1.25rem; }
  .trust-logo { height: 2rem; }
}

/* ---- Footer row — certified (left) + CTA (right) on one line ---- */
.voices__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
  border-top: 1px solid rgba(26, 37, 43, 0.1);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.voices__certified {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;        /* hold natural width — anchor to the left edge */
  margin-right: auto;    /* push the CTA all the way to the right */
  text-align: left;
}

.voices__certified-icon {
  width: clamp(20px, 1.8vw, 26px);
  height: auto;
  flex-shrink: 0;
  display: block;
}

.voices__certified-text {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 400;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-dark);
  opacity: 0.85;
}

.voices__certified-text strong {
  font-weight: 700;
  color: var(--text-dark);
  opacity: 1;
}

@media (max-width: 700px) {
  .voices__footer { justify-content: center; text-align: center; }
  .voices__certified { flex: 0 1 auto; justify-content: center; }
}

.voices__cta {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text-dark);
  opacity: 0.78;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  position: relative;
  transition: opacity 0.25s var(--ease), color 0.25s var(--ease), gap 0.25s var(--ease);
}

.voices__cta::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: 100% 50%;
  transform: scale3d(0, 1, 1);
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

.voices__cta:hover {
  opacity: 1;
  color: var(--accent);
  gap: 0.7rem;
}

.voices__cta:hover::before {
  transform-origin: 0% 50%;
  transform: scale3d(1, 1, 1);
}

.voices__cta i { font-size: 1rem; }


/* ---- Lightbox modal ---- */
.voices-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 4rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}

.voices-lightbox[hidden] { display: none; }

.voices-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.voices-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 20, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

.voices-lightbox__frame {
  position: relative;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  transform: scale(0.96);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.voices-lightbox.is-open .voices-lightbox__frame {
  transform: scale(1);
}

.voices-lightbox__player,
.voices-lightbox__player iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.voices-lightbox__close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}

.voices-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: rotate(90deg);
}


/* ----------------------------------------------------------
   LINK HOVER — Codrops "Metis" underline wipe
   Source: https://tympanus.net/Development/LineHoverStyles/ (sample 01)
   Behaviour:
   - Default: no underline visible
   - Hover: 1px line wipes in from LEFT to RIGHT (300ms)
   - Mouse-leave: line wipes out to the RIGHT (300ms)
   Applied to in-content text links only. Buttons + CTAs are
   excluded — they keep their pill / solid-fill styles.
   ---------------------------------------------------------- */

/* Base — every link target gets a 1px pseudo line at the bottom.
   Default: scale-X 0 with origin RIGHT (invisible).
   Hover : scale-X 1 with origin LEFT (sweeps in left→right).
   Mouse-leave reverses naturally because non-hovered selector
   reverts to default origin RIGHT. */
.nav__menu a,
.nav__utility-link,
.footer-v2 a:not(.btn),
.mobile-menu__nav a,
.who-card__link,
.who-we-walk__all-link,
.empathy-beat__body a,
.body-lg a,
.subtitle a,
p a:not(.btn):not(.card__cta):not(.contact-banner__cta):not(.problem-v2__cta) {
  position: relative;
  white-space: nowrap;
  text-decoration: none;
}

.nav__menu a::before,
.nav__utility-link::before,
.footer-v2 a:not(.btn)::before,
.mobile-menu__nav a::before,
.who-card__link::before,
.who-we-walk__all-link::before,
.empathy-beat__body a::before,
.body-lg a::before,
.subtitle a::before,
p a:not(.btn):not(.card__cta):not(.contact-banner__cta):not(.problem-v2__cta)::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background: currentColor;
  top: 100%;
  left: 0;
  pointer-events: none;
  transform-origin: 100% 50%;
  transform: scale3d(0, 1, 1);
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

.nav__menu a:hover::before,
.nav__utility-link:hover::before,
.footer-v2 a:not(.btn):hover::before,
.mobile-menu__nav a:hover::before,
.who-card__link:hover::before,
.who-we-walk__all-link:hover::before,
.empathy-beat__body a:hover::before,
.body-lg a:hover::before,
.subtitle a:hover::before,
p a:not(.btn):not(.card__cta):not(.contact-banner__cta):not(.problem-v2__cta):hover::before {
  transform-origin: 0% 50%;
  transform: scale3d(1, 1, 1);
}

/* The "all conditions A-Z" link previously had a static border-bottom —
   remove it so the wipe-in line is the only underline. */
.who-we-walk__all-link {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* The .who-card__link already has a built-in gap-shift on hover — keep
   that, just remove text-decoration so only the wipe line shows. */
.who-card__link {
  text-decoration: none;
}


/* ----------------------------------------------------------
   EDITORIAL ACCENT — inline orange emphasis (no italic).
   Per brand-designer feedback "no italicised text", we use
   colour ONLY (brand orange) for emphasis words like "superhero",
   "good enough", "a little warrior", etc.
   Use as: <em class="editorial-accent">superhero</em>
   ---------------------------------------------------------- */
.editorial-accent {
  font-style: normal !important;
  color: var(--accent) !important;
  font-weight: inherit;
}


/* ----------------------------------------------------------
   HERO (Section 1 — spec v11)
   - Single static headline ("Progress isn't chance — it's architecture.")
   - Sub-line ("Welcome to ApexaQLA.")
   - Single CTA ("Start your journey") — brand orange, high contrast
   - Quiet tag below ("ORCA · paediatric rehab from the umbrella down.")
   - NO secondary CTA, NO progress dots
   - NO rotating slogans (v6 keeps WebGL scroll-bound video, but text is static)
   - Type scale: 72px desktop / 48px mobile · Aktiv Grotesk Extended Bold
   ---------------------------------------------------------- */

/* Hide old hero progress dots (removed in markup but CSS rules remain) */
.hero__progress { display: none !important; }

/* Tighter, centered content stack on v6 */
.hero__content--v6 {
  max-width: 1100px;
  text-align: left;
}

/* Single static headline — spec scale: 72px desktop / 48px mobile,
   Aktiv Grotesk Extended Bold, -2% letter-spacing (already from brand layer) */
.hero__title--v6 {
  font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.75rem, 5.5vw, 4.5rem) !important; /* 44px → 72px */
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--white);
  margin: 0 0 1.5rem 0;
  /* Single-line layout — neutralise the old rotation transform stack */
  position: static !important;
  height: auto !important;
}

.hero__title--v6 .hero__title-line {
  position: static !important;
  display: block;
  opacity: 1 !important;
  transform: none !important;
}

/* Sub-line: "Welcome to ApexaQLA." — quiet and small, sits BELOW headline */
.hero__subline {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 2rem 0;
  max-width: 540px;
}

/* Single CTA — brand orange, white text, rounded pill (brand layer) */
.hero__cta-group--v6 {
  display: flex;
  margin: 0 0 2.5rem 0;
}

/* Hero CTA — matched to client reference: vertical orange gradient pill,
   inset highlight + soft glow, white shine sweep on hover, sliding arrow,
   and a gentle idle pulse ring. (.btn/.btn--primary classes were removed
   from the markup so the v5-brand !important rules no longer interfere.) */
.hero__cta-single {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 2rem;
  background: linear-gradient(180deg, #FEAA5F, #FD9D49);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 12px 28px -8px rgba(253, 157, 73, 0.55),
    0 0 0 0 rgba(253, 157, 73, 0.4);
  animation: hero-cta-pulse 3s ease-in-out infinite;
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}
.hero__cta-single:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, #FFB870, #FCA350);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 22px 44px -12px rgba(253, 157, 73, 0.7);
  animation: none;
}
.hero__cta-single::after {
  content: "→";
  transition: transform 0.3s ease;
}
.hero__cta-single:hover::after { transform: translateX(4px); }

@keyframes hero-cta-pulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.25),
      0 12px 28px -8px rgba(253, 157, 73, 0.55),
      0 0 0 0 rgba(253, 157, 73, 0.35);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.25),
      0 12px 28px -8px rgba(253, 157, 73, 0.55),
      0 0 0 14px rgba(253, 157, 73, 0);
  }
}

/* Quiet ORCA tag below CTA — very small, low-opacity, uppercase letter-spaced */
.hero__quiet-tag {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* Mobile: tighter spacing */
@media (max-width: 640px) {
  .hero__title--v6 {
    font-size: clamp(2rem, 8vw, 3rem) !important; /* 32px → 48px */
  }
  .hero__subline {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  .hero__cta-group--v6 {
    margin-bottom: 1.75rem;
  }
}


/* ============================================================
   SECTION 09 — TOGETHER CTA
   Full-width navy block, centered headline + sub-line + 2 CTAs
============================================================ */
.together-cta {
  position: relative;
  width: 100%;
  background: #25323A;                       /* Apexa navy */
  color: #ffffff;
  padding: clamp(4rem, 10vw, 7rem) clamp(1.25rem, 4vw, 3rem);
  overflow: hidden;
  isolation: isolate;
}

/* Subtle radial glow behind the headline for atmosphere */
.together-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 35%,
      rgba(253, 157, 73, 0.08) 0%,
      rgba(253, 157, 73, 0) 60%);
  pointer-events: none;
  z-index: -1;
}

.together-cta__inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.together-cta__title {
  font-family: "aktiv-grotesk-extended", "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(1.75rem, 4.2vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
  max-width: 18ch;
}

/* Editorial accent inherits orange from the global rule, but we keep it
   explicit here so it pops against the navy background */
.together-cta__title .editorial-accent {
  color: var(--accent);
  font-style: normal;
}

.together-cta__subline {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 56ch;
  margin: 0;
}

/* Two CTAs side by side */
.together-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
}

.together-cta__btn {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1.1rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  position: relative;     /* for the shine ::before */
  overflow: hidden;
  transition: background 0.35s ease,
              color 0.35s ease,
              border-color 0.35s ease,
              transform 0.35s ease,
              box-shadow 0.35s ease;
  will-change: transform;
}

.together-cta__btn i {
  font-size: 1.1em;
  line-height: 1;
}

/* Primary — vertical orange gradient (client reference) */
.together-cta__btn--primary {
  background: linear-gradient(180deg, #FEAA5F, #FD9D49);
  color: #ffffff;
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 12px 28px -8px rgba(253, 157, 73, 0.55);
}

.together-cta__btn--primary:hover,
.together-cta__btn--primary:focus-visible {
  background: linear-gradient(180deg, #FFB870, #FCA350);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 22px 44px -12px rgba(253, 157, 73, 0.7);
}
.together-cta__btn--primary::after {
  content: "→";
  margin-left: 0.15rem;
  transition: transform 0.3s ease;
}
.together-cta__btn--primary:hover::after { transform: translateX(4px); }

/* Secondary — outlined white (client reference) */
.together-cta__btn--secondary {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
}

.together-cta__btn--secondary:hover,
.together-cta__btn--secondary:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
  transform: translateY(-3px);
}

/* Mobile: stack CTAs full-width for easier tap targets */
@media (max-width: 600px) {
  .together-cta__actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
  }
  .together-cta__btn {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================
   HERO v6 — lighter overlay gradient
   Base v4 overlay goes 25 → 45 → 70 → 100% navy which is heavy on
   the new sunset/lake video. Lighten each stop so more of the video
   shows through (especially the warm sunset frames). Bottom stays
   semi-opaque so the seam between hero and the next white section
   reads cleanly.
============================================================ */
.hero-webgl .hero__overlay,
.hero .hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(37, 50, 58, 0.10) 0%,
    rgba(37, 50, 58, 0.20) 40%,
    rgba(37, 50, 58, 0.40) 75%,
    rgba(37, 50, 58, 0.70) 100%
  );
}


/* ============================================================
   HERO v6 — MOBILE FALLBACK
   On phones / touch devices the WebGL2 video-texture pipeline is
   unreliable: iOS Safari often refuses to upload a paused <video> into
   a GL texture, and frame-accurate currentTime scrubbing is choppy on
   touch scrolling anyway. So on mobile we hide the canvas and show the
   <video> element directly as a full-bleed autoplay loop. The matching
   v6-spec.js IIFE kills the scrub ScrollTrigger and starts playback.
============================================================ */
@media (max-width: 900px), (pointer: coarse) {
  .hero-webgl .hero__video-source {
    /* Reset the v4-base "hidden source" rule (1×1 / opacity:0) so the
       element actually renders on mobile. */
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    opacity: 1 !important;
    pointer-events: none;
    z-index: 1;
    display: block;
  }
  .hero-webgl .hero__canvas {
    display: none;
  }
}


/* ============================================================
   FOOTER v6 — full v11 spec, 3 bands
   1) Pre-footer (newsletter, social, lang) — slightly darker
   2) Reference grid — brand navy
   3) Legal strip — darkest tone
============================================================ */

.footer-v6 {
  --fv6-navy: #25323A;          /* main band */
  --fv6-darker: #1d272d;        /* pre-footer band */
  --fv6-darkest: #131a1f;       /* legal strip */
  --fv6-line: rgba(255, 255, 255, 0.08);
  --fv6-text: rgba(255, 255, 255, 0.85);
  --fv6-text-mute: rgba(255, 255, 255, 0.6);
  --fv6-beige: #a89f8e;         /* lightened beige for legibility on navy */
  --fv6-accent: #FD9D49;
  width: 100%;
  background: var(--fv6-navy);
  color: var(--fv6-text);
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
}

/* All footer links share a quiet underline-on-hover treatment */
.footer-v6 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s var(--ease, ease), opacity 0.25s var(--ease, ease);
}
.footer-v6 a:hover,
.footer-v6 a:focus-visible {
  color: var(--fv6-accent);
}

/* Section headings (Visit us / Quick links / Resources / Trust) */
.footer-v6__heading {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 1.2rem;
}

/* Sub-headings inside columns (Get directions / Visitor & Family Maps /
   Certifications / Partners / Reviews / Banking) — slightly smaller +
   beige to keep hierarchy below the main heading. */
.footer-v6__sub-heading {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fv6-beige);
  margin: 0 0 0.7rem;
}


/* =============== BAND 1 — Pre-footer (compact single row) =============== */
.footer-v6__pre {
  background: var(--fv6-darker);
  border-bottom: 1px solid var(--fv6-line);
}

.footer-v6__pre-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.25rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  row-gap: 1.25rem;
  align-items: center;
}

@media (max-width: 880px) {
  .footer-v6__pre-inner {
    grid-template-columns: 1fr auto;
    row-gap: 1.25rem;
  }
  /* Newsletter spans the full width on smaller screens, social + lang sit on row 2 */
  .footer-v6__newsletter { grid-column: 1 / -1; }
}

/* ----- Newsletter — title + form + consent stacked tight ----- */
.footer-v6__newsletter {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

/* Title styled to match the rest of the footer headings */
.footer-v6__newsletter-title {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
}

/* Sub-line under the title — quiet helper text, kept tight */
.footer-v6__newsletter-sub {
  margin: -0.15rem 0 0.15rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--fv6-text-mute);
  max-width: 64ch;
}

/* Form: separate glass pills for input + Subscribe button */
.footer-v6__newsletter-form {
  display: flex;
  gap: 0.5rem;
  max-width: 480px;
  width: 100%;
}

.footer-v6__newsletter-form input[type="email"],
.footer-v6__newsletter-form button {
  height: 44px;
  border-radius: 999px;
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0 1.6rem;
  color: #ffffff;
  background: linear-gradient(180deg, #FEAA5F, #FD9D49);
  border: none;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 8px 20px -8px rgba(253, 157, 73, 0.5);
  transition: background 0.35s ease,
              box-shadow 0.35s ease,
              transform 0.35s ease;
}

.footer-v6__newsletter-form input[type="email"] {
  flex: 1;
  min-width: 0;
  outline: 0;
  /* slightly more transparent so the input reads as a "field" vs the button */
  background: rgba(255, 255, 255, 0.05);
}
.footer-v6__newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.footer-v6__newsletter-form input:focus {
  border-color: rgba(253, 157, 73, 0.6);
  background: rgba(255, 255, 255, 0.1);
}

.footer-v6__newsletter-form button {
  cursor: pointer;
  white-space: nowrap;
}
.footer-v6__newsletter-form button:hover,
.footer-v6__newsletter-form button:focus-visible {
  background: linear-gradient(180deg, #FFB870, #FCA350);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 14px 28px -10px rgba(253, 157, 73, 0.7);
}
/* Shine sweep on Subscribe */
.footer-v6__newsletter-form button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transition: left 0.7s ease;
  pointer-events: none;
}
.footer-v6__newsletter-form button:hover::before { left: 110%; }

/* Consent — single line, tight */
.footer-v6__newsletter-consent {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.74rem;
  color: var(--fv6-text-mute);
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
}
.footer-v6__newsletter-consent input[type="checkbox"] {
  margin: 0;
  accent-color: var(--fv6-accent);
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.footer-v6__newsletter-consent a {
  color: var(--fv6-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
}

.footer-v6__social {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.footer-v6__social a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--fv6-text);
  font-size: 1.05rem;
  transition: background 0.4s ease,
              color 0.4s ease,
              transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}
/* Hover — fill the circle with brand orange, white icon, lift + glow
   (matched to client reference .footer-social) */
.footer-v6__social a:hover,
.footer-v6__social a:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -8px rgba(253, 157, 73, 0.5);
}

/* Language switcher — pills, inside the Trust column (below Banking) */
.footer-v6__lang { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.2rem; }
.footer-v6__lang button {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--fv6-line);
  color: var(--fv6-text-mute);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 500;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
              transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}
/* metallic shine sweep — same as the .page-btn buttons, for consistency */
.footer-v6__lang button::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}
.footer-v6__lang button:hover::before { left: 120%; }
.footer-v6__lang button:hover { transform: translateY(-2px); }
.footer-v6__lang button.is-active,
.footer-v6__lang button[aria-current="true"] {
  background: #ffffff;
  color: var(--fv6-navy);
  border-color: #ffffff;
  font-weight: 600;
}
.footer-v6__lang button:hover:not(.is-active) {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}


/* =============== BAND 2 — Reference grid =============== */
.footer-v6__main {
  background: var(--fv6-navy);
}

.footer-v6__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
  display: grid;
  grid-template-columns:
    minmax(0, 1.4fr)   /* brand */
    minmax(0, 1.2fr)   /* visit us */
    minmax(0, 1fr)     /* quick + resources stacked */
    minmax(0, 1.4fr);  /* trust */
  gap: clamp(2rem, 3.5vw, 3rem);
}

/* Quick links + Resources share one column, stacked vertically */
.footer-v6__col-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  min-width: 0;
}

@media (max-width: 1100px) {
  .footer-v6__grid { grid-template-columns: 1.2fr 1fr 1.4fr; }
  .footer-v6__brand { grid-column: 1 / -1; max-width: 60ch; margin-bottom: 1rem; }
}
@media (max-width: 720px) {
  .footer-v6__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-v6__brand { grid-column: 1 / -1; }
  .footer-v6__col--trust { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-v6__grid { grid-template-columns: 1fr; }
  .footer-v6__brand,
  .footer-v6__col--trust { grid-column: auto; }
}

/* ----- Column 1 — Brand ----- */
.footer-v6__brand {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.footer-v6__logo {
  width: clamp(200px, 18vw, 260px);
  height: auto;
  display: block;
}
.footer-v6__tagline {
  margin: 0;
  font-size: 0.88rem;
  color: var(--fv6-beige);
  line-height: 1.55;
  max-width: 38ch;
}
.footer-v6__regids {
  margin: 0;
  font-size: 0.72rem;
  color: rgba(168, 159, 142, 0.75);
  letter-spacing: 0.02em;
  line-height: 1.6;
}
/* Lilly badge — circular by default (just the dog silhouette), expands on
   hover/focus to reveal "Lilly · Master cuddler" with the dog turning orange. */
.footer-v6__lilly {
  display: inline-flex;
  align-items: center;
  height: 76px;
  width: 76px;
  padding: 0 0 0 14px;     /* nudges the tall dog SVG into visual centre */
  margin: 0.4rem 0 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--fv6-line);
  border-radius: 999px;
  align-self: flex-start;
  cursor: pointer;
  overflow: hidden;
  font-family: inherit;
  color: var(--fv6-beige);
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s ease,
              border-color 0.3s ease;
}

.footer-v6__lilly-icon {
  width: auto;
  height: 56px;            /* dog is 123×187 — height-driven so proportions stay */
  flex-shrink: 0;
  display: block;
  color: var(--fv6-beige); /* SVG fill="currentColor" inherits this */
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer-v6__lilly-text {
  white-space: nowrap;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: #ffffff;
  padding: 0 1.1rem 0 0.7rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
  pointer-events: none;
}

.footer-v6__lilly:hover,
.footer-v6__lilly:focus-visible {
  width: 250px;
  background: rgba(253, 157, 73, 0.08);
  border-color: rgba(253, 157, 73, 0.3);
  outline: none;
}

.footer-v6__lilly:hover .footer-v6__lilly-icon,
.footer-v6__lilly:focus-visible .footer-v6__lilly-icon {
  color: var(--fv6-accent);  /* dog turns orange */
  transform: scale(1.06);
}

.footer-v6__lilly:hover .footer-v6__lilly-text,
.footer-v6__lilly:focus-visible .footer-v6__lilly-text {
  opacity: 1;
  transform: translateX(0);
}

/* ----- Columns 2-4 — Visit us / Quick / Resources ----- */
.footer-v6__col {
  display: flex;
  flex-direction: column;
}

.footer-v6__address {
  font-style: normal;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--fv6-text);
  margin: 0 0 0.85rem;
}
.footer-v6__address strong {
  color: #ffffff;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 0.15rem;
}
.footer-v6__address a {
  color: var(--fv6-text);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  text-underline-offset: 3px;
}
.footer-v6__address a:hover { color: var(--fv6-accent); }

.footer-v6__hours {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--fv6-text-mute);
}

.footer-v6__map-links {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1.25rem;
  font-size: 0.82rem;
}
.footer-v6__map-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fv6-beige);
}
.footer-v6__map-links a:hover { color: var(--fv6-accent); }
.footer-v6__map-links i { font-size: 0.95rem; }

/* "Coming 2026" tag */
.footer-v6__tag {
  display: inline-block;
  background: rgba(253, 157, 73, 0.18);
  color: var(--fv6-accent);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  margin-left: 0.3rem;
  vertical-align: middle;
}
.footer-v6__address--upcoming {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fv6-line);
  opacity: 0.92;
}

.footer-v6__visitor-maps {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fv6-line);
}
.footer-v6__visitor-maps a {
  display: block;
  font-size: 0.82rem;
  color: var(--fv6-beige);
  padding: 0.18rem 0;
}
.footer-v6__visitor-maps a:hover { color: var(--fv6-accent); }

/* Quick links + Resources — bullet-less link lists */
.footer-v6__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.footer-v6__links a {
  font-size: 0.9rem;
  color: var(--fv6-text);
  display: inline-block;
  position: relative;
}
.footer-v6__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--fv6-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.3s var(--ease, ease);
}
.footer-v6__links a:hover::after,
.footer-v6__links a:focus-visible::after { transform: scaleX(1); }

/* ----- Column 5 — Trust ----- */
.footer-v6__col--trust { gap: 0; }

.footer-v6__trust-block {
  margin-bottom: 1.4rem;
}
.footer-v6__trust-block:last-child { margin-bottom: 0; }

/* Certifications + Partners — placeholder circles (same size for both
   bands). Each <span> still carries its brand name in the DOM for screen
   readers; the visible label is hidden via 0px width inside the circle.
   Swap each placeholder with the real monochrome SVG once the client
   provides each logo. */
.footer-v6__cert-grid,
.footer-v6__partner-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.footer-v6__cert,
.footer-v6__partner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--fv6-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Hide the placeholder text visually — kept in the DOM for accessibility */
  font-size: 0;
  color: transparent;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  flex-shrink: 0;
}
.footer-v6__cert:hover,
.footer-v6__partner:hover {
  border-color: rgba(253, 157, 73, 0.4);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

/* Reviews — Google (top) + Trustpilot (below), each with rating next to it.
   Logo default: white-tinted (brightness(0) invert(1) flattens all hardcoded
   fills into pure white, opacity dims for the quiet aesthetic).
   Hover: filter:none restores each brand's original colours. */
.footer-v6__reviews {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-v6__review-row {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--fv6-text);
  transition: transform 0.3s ease;
  align-self: flex-start;
}

.footer-v6__review-row:hover,
.footer-v6__review-row:focus-visible {
  transform: translateY(-1px);
}

.footer-v6__review-logo {
  display: inline-flex;
  align-items: center;
  height: 24px;
  filter: brightness(0) invert(1);
  opacity: 0.6;
  transition: filter 0.35s ease, opacity 0.35s ease;
  will-change: filter, opacity;
}

.footer-v6__review-logo svg {
  display: block;
  height: 100%;
  width: auto;
}

.footer-v6__review-row:hover .footer-v6__review-logo,
.footer-v6__review-row:focus-visible .footer-v6__review-logo {
  filter: none;
  opacity: 1;
}

/* Trustpilot's logo renders slightly taller than Google's at the same
   height — keep them visually balanced */
.footer-v6__review-logo--google { height: 22px; }
.footer-v6__review-logo--trustpilot { height: 20px; }

/* Rating number pill (e.g. "4.9 / 5") */
.footer-v6__review-rating {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-size: 0.82rem;
  color: var(--fv6-text-mute);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.footer-v6__review-rating strong {
  color: var(--fv6-text);
  font-weight: 600;
}

/* Banking */
.footer-v6__bank {
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
  color: var(--fv6-text-mute);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.footer-v6__bank strong { color: var(--fv6-text); font-weight: 600; }

.footer-v6__qr-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--fv6-beige);
  border-bottom: 1px dashed transparent;
  padding-bottom: 1px;
}
.footer-v6__qr-link:hover {
  color: var(--fv6-accent);
  border-bottom-color: rgba(253, 157, 73, 0.5);
}
.footer-v6__qr-link i { font-size: 1rem; }


/* =============== BAND 3 — Legal strip =============== */
.footer-v6__legal {
  background: var(--fv6-darkest);
  border-top: 1px solid var(--fv6-line);
}

.footer-v6__legal-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem clamp(1.25rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.02em;
}
@media (max-width: 880px) {
  .footer-v6__legal-inner {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    text-align: center;
    padding: 1.25rem clamp(1rem, 4vw, 2rem);
  }
}

.footer-v6__legal-copy { justify-self: start; }
.footer-v6__legal-links {
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  align-items: center;
}
.footer-v6__legal-links a {
  color: rgba(255, 255, 255, 0.7);
  position: relative;
}
.footer-v6__legal-links a + a::before {
  content: '·';
  position: absolute;
  left: -0.6rem;
  color: rgba(255, 255, 255, 0.25);
}
.footer-v6__legal-links a:hover { color: var(--fv6-accent); }

.footer-v6__legal-ids {
  justify-self: end;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 880px) {
  .footer-v6__legal-copy,
  .footer-v6__legal-links,
  .footer-v6__legal-ids { justify-self: center; }
  .footer-v6__legal-links { justify-content: center; }
}


/* ============================================================
   MEGA MENU — full-width drop panel with 7 panels
   Triggered by hover/focus on .nav__link[data-mega] buttons.
   v6-spec.js manages open/close + keyboard interaction.
============================================================ */

/* Wider dark pill at the top of the page — 7 nav items need real
   breathing room. Bumped max-width + inner padding so the links don't
   feel cramped on desktop. Once the user scrolls and the pill flips to
   white it becomes full-width via border-radius:0 anyway, so this only
   affects the floating dark state. */
.nav:not(.scrolled) .nav__bar {
  max-width: 1780px;
  padding: 0.85rem 2rem 0.85rem 2.5rem;     /* keep base vertical padding */
}

/* Utility bar (phone + Portal Login + language) — visible from the
   start of the page, not only after scroll. Base v4 hides it (max-height:0,
   opacity:0) until .nav.scrolled is applied; here we show it on the dark
   hero too. NO background — sits transparent over the hero video, with
   darker text so it reads against bright sunset frames. The scrolled
   rules in style-v4.css still win for the white state thanks to higher
   specificity. */
.nav:not(.scrolled) .nav__utility {
  max-height: 50px;
  opacity: 1;
  overflow: visible;
  background: transparent;
}

/* Darker text + icons in the default state so they're legible on the
   hero video (no opaque bar behind them anymore). */
.nav:not(.scrolled) .nav__utility-link {
  color: var(--text-dark);
  opacity: 0.85;
}
.nav:not(.scrolled) .nav__utility-link:hover {
  opacity: 1;
}

/* Protect the logo + actions from flex-shrink — when the menu has 7
   items the flex container can compress siblings to fit, which squashes
   the logo image horizontally. Hard-pin these so they keep aspect ratio. */
.nav__logo,
.nav__actions {
  flex-shrink: 0;
}
.nav__logo {
  padding-right: clamp(1rem, 2vw, 2rem);  /* breathing space before the menu */
}
.nav__logo img {
  flex-shrink: 0;
  display: block;
  max-width: none;       /* override any global img max-width */
}

/* Responsive logo swap.
   ≥ 1500px : show the original horizontal logo (wide layout)
   ≤ 1500px : swap to the stacked SVG (wings + "APEXA QLA" below) — much
              narrower horizontally so it frees space for the 7 nav items
              and keeps the Contact Us button inside the dark pill.
   The stacked SVG ships with navy fills; brightness(0) invert(1) flips
   them to pure white so it reads on the dark nav.

   IMPORTANT: selectors use `.nav__logo .nav__logo-stacked` (2-class
   specificity) so they win against the `.nav__logo img { display: block }`
   rule above (1-class + 1-tag), otherwise BOTH logos render together. */
.nav__logo .nav__logo-stacked { display: none; }

@media (max-width: 1500px) {
  .nav__logo .nav__logo-horiz { display: none; }
  .nav__logo .nav__logo-stacked {
    display: block;
    height: 48px;
    width: auto;
    filter: brightness(0) invert(1);
  }
}

/* When the nav is in the scrolled (white) state, the stacked logo
   needs to be DARK on white — drop the invert filter. */
.nav.scrolled .nav__logo .nav__logo-stacked {
  filter: none;
}

/* Mobile menu trigger — bump from 1024px (v4 base) to 1200px since the
   v6 mega menu has 7 trigger buttons instead of 5. Below this width
   the desktop menu starts to compress; switch to the burger + accordion
   for a clean experience. */
@media (max-width: 1200px) {
  .nav__menu { display: none !important; }
  .nav__cta  { display: none !important; }
  .nav__burger { display: flex !important; }
  /* Mega menu container too — only relevant on hover from the desktop
     triggers, which are now hidden */
  .mega-menu { display: none !important; }
}

/* Top-level button styling — match the base .nav__link-group a typography
   so buttons look identical to the original anchors (uppercase, white,
   tracked). The base v4 rules use the `a` selector and don't reach
   <button>, so we replicate them here. */
.nav__link-group { gap: clamp(0.9rem, 1.6vw, 1.8rem); }  /* tighter — keeps Contact Us inside the pill */

.nav__link {
  background: none;
  border: 0;
  padding: 0.45rem 0.2rem;
  font-family: var(--font-body), "aktiv-grotesk", "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0.85;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  position: relative;
  transition: opacity 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.nav__link i {
  font-size: 0.95em;
  opacity: 0.6;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav__link:hover,
.nav__link:focus-visible {
  opacity: 1;
  outline: none;
}
.nav__link:hover i,
.nav__link:focus-visible i { opacity: 1; }

.nav__link[aria-expanded="true"] {
  opacity: 1;
  color: var(--accent);
}
.nav__link[aria-expanded="true"] i {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--accent);
}

/* SCROLLED LIGHT STATE — solid white when user engages.
   Default scrolled state is rgba(255,255,255,0.72) on the pill +
   rgba(255,255,255,0.75) on the utility bar, both with backdrop-blur,
   which can pick up dark sections behind and look greyish.
   When the user hovers the nav or opens the mega menu, flip BOTH the
   utility bar and the pill to fully opaque white. */
.nav.scrolled:hover .nav__bar,
.nav.scrolled:focus-within .nav__bar,
body.mega-open .nav.scrolled .nav__bar {
  background: #ffffff !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 20px 40px -10px rgba(253, 157, 73, 0.32),
    0 4px 30px -2px rgba(72, 123, 140, 0.18);
}

/* Utility bar (top row with phone / portal / language) — same treatment */
.nav.scrolled:hover .nav__utility,
.nav.scrolled:focus-within .nav__utility,
body.mega-open .nav.scrolled .nav__utility {
  background: #ffffff !important;
  border-bottom-color: rgba(72, 123, 140, 0.18) !important;
}

/* When the nav is in its scrolled state (white pill bg), the buttons
   need to flip to dark text to keep contrast — same rule the base CSS
   applies to the original anchors. */
.nav.scrolled .nav__link {
  color: var(--text-dark);
  opacity: 0.78;
}
.nav.scrolled .nav__link:hover,
.nav.scrolled .nav__link:focus-visible {
  color: var(--accent);
  opacity: 1;
}
.nav.scrolled .nav__link[aria-expanded="true"] {
  color: var(--accent);
  opacity: 1;
}

/* The mega panel container — sits below .nav__bar inside .nav <header> */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border-top: 1px solid rgba(26, 37, 43, 0.08);
  border-bottom: 1px solid rgba(26, 37, 43, 0.06);
  box-shadow: 0 24px 48px -12px rgba(26, 37, 43, 0.18);
  /* Hidden by default; smooth fade + slight slide-down on open */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.4s;
  z-index: 90;
  will-change: opacity, transform;
}
.mega-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0s;
}

/* Invisible "hover bridge" above the panel — bridges the gap between
   the nav pill and the panel so the cursor can travel down without
   triggering mouseleave on the trigger. Only active when panel is open
   (pointer-events follows the parent's pointer-events). */
.mega-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 32px;            /* matches typical gap between pill bottom & panel */
  pointer-events: inherit; /* inherits auto when .is-open, none otherwise */
  background: transparent;
}

/* When the mega menu is open, retract the white-fade nav background so
   panel contents read against the navy. We piggyback on the nav's body
   class hooks — adding `body.mega-open` is done by JS. */
body.mega-open {
  /* leave hooks for nav adjustments if needed */
}

/* Each panel — only the matching one gets .is-active.
   Inactive panels are display:none so layout collapses to the active one;
   the active panel runs a short fade-up animation that re-fires every
   time the user switches between panels (great for snappy panel-swap). */
.mega-menu__panel {
  display: none;
  padding: 0;
}
.mega-menu__panel.is-active {
  display: block;
  animation: megaPanelIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes megaPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Children stagger — columns + feature cards fade up sequentially.
   Re-runs every time .is-active gets re-applied (panel swap). */
.mega-menu__panel.is-active .mega-menu__col,
.mega-menu__panel.is-active .mega-feature,
.mega-menu__panel.is-active .mega-menu__banner {
  animation: megaChildIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.mega-menu__panel.is-active > .mega-menu__inner > .mega-feature--orca {
  animation-delay: 0.04s;
}
.mega-menu__panel.is-active .mega-menu__grid > *:nth-child(1) { animation-delay: 0.06s; }
.mega-menu__panel.is-active .mega-menu__grid > *:nth-child(2) { animation-delay: 0.10s; }
.mega-menu__panel.is-active .mega-menu__grid > *:nth-child(3) { animation-delay: 0.14s; }
.mega-menu__panel.is-active .mega-menu__grid > *:nth-child(4) { animation-delay: 0.18s; }
.mega-menu__panel.is-active .mega-menu__grid > *:nth-child(5) { animation-delay: 0.22s; }
.mega-menu__panel.is-active .mega-menu__grid > *:nth-child(6) { animation-delay: 0.26s; }
.mega-menu__panel.is-active .mega-menu__banner { animation-delay: 0.3s; }

@keyframes megaChildIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respect reduced-motion users — kill the fancy animation, keep just opacity */
@media (prefers-reduced-motion: reduce) {
  .mega-menu,
  .mega-menu__panel.is-active,
  .mega-menu__panel.is-active .mega-menu__col,
  .mega-menu__panel.is-active .mega-feature,
  .mega-menu__panel.is-active .mega-menu__banner {
    animation: none !important;
    transition: opacity 0.2s ease !important;
    transform: none !important;
  }
}

.mega-menu__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
}

/* Layout grids — vary per panel */
.mega-menu__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Start here: 1 hero feature + 2 link columns */
.mega-menu__grid--start {
  grid-template-columns: 1.4fr 1fr 1fr;
}

/* Four-column: 3 link columns + 1 feature card on the right */
.mega-menu__grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ORCA: 3×2 grid of categories under a full-width hero */
.mega-menu__grid--six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* Concierge: hero left + one link column right */
.mega-menu__grid--concierge {
  grid-template-columns: 1.5fr 1fr;
}

@media (max-width: 1100px) {
  .mega-menu__grid--start,
  .mega-menu__grid--four { grid-template-columns: 1fr 1fr; }
  .mega-menu__grid--six { grid-template-columns: 1fr 1fr; }
}

/* Column heading — small uppercase tracked, navy */
.mega-menu__col-heading {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin: 0 0 0.85rem;
}
.mega-menu__col-sub {
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-style: italic;
  font-size: 0.78rem;
  color: rgba(26, 37, 43, 0.55);
  margin: -0.5rem 0 0.85rem;
  line-height: 1.4;
}

/* Link list inside each column */
.mega-menu__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mega-menu__links a {
  display: block;
  padding: 0.45rem 0.6rem;
  margin: 0 -0.6rem;        /* hover bg extends beyond text edges */
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-dark);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.mega-menu__links a:hover,
.mega-menu__links a:focus-visible {
  background: rgba(253, 157, 73, 0.08);
  color: var(--accent);
  outline: none;
}

.mega-link__title {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.3;
}
.mega-link__desc {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(26, 37, 43, 0.55);
  margin-top: 0.1rem;
}
.mega-menu__links a:hover .mega-link__desc { color: rgba(253, 157, 73, 0.8); }

/* ============== Feature cards ============== */
.mega-feature {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.45rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border-radius: 14px;
  text-decoration: none;
  color: #ffffff;
  background: var(--text-dark);
  position: relative;
  overflow: hidden;
  min-height: 180px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  isolation: isolate;
}
.mega-feature:hover,
.mega-feature:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -8px rgba(26, 37, 43, 0.35);
  outline: none;
}

.mega-feature__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.mega-feature__title {
  font-family: "aktiv-grotesk-extended", "Inter", sans-serif;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: #ffffff;
}
.mega-feature__title .editorial-accent {
  color: var(--accent);
  font-style: normal;
}
.mega-feature__sub {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  max-width: 38ch;
}
.mega-feature__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--accent);
  margin-top: 0.4rem;
  transition: gap 0.25s ease;
}
.mega-feature:hover .mega-feature__cta { gap: 0.65rem; }

/* Variant: orange-accented Concierge card */
.mega-feature--concierge {
  background: linear-gradient(135deg, #2a3942 0%, #1d272d 100%);
  border: 1px solid rgba(253, 157, 73, 0.22);
}

/* Variant: full-width ORCA hero on top of the panel */
.mega-feature--orca {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 2rem);
  gap: 1rem;
  background: linear-gradient(90deg, #1d272d 0%, #25323a 100%);
}
.mega-feature--orca .mega-feature__title {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
}

/* Variant: Trust & numbers — bold large numbers */
.mega-feature--trust .mega-feature__title {
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  line-height: 1.15;
}

/* FCC banner at bottom of ORCA panel */
.mega-menu__banner {
  margin: clamp(1.25rem, 2vw, 1.75rem) 0 0;
  padding: 0.85rem 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(26, 37, 43, 0.7);
  background: rgba(253, 157, 73, 0.06);
  border-radius: 8px;
  line-height: 1.45;
}
.mega-menu__banner em {
  font-style: italic;
  color: var(--text-dark);
}

/* ============== Hide mega-menu on touch / mobile (use mobile menu instead) ============== */
@media (max-width: 1024px), (pointer: coarse) {
  .mega-menu { display: none !important; }
}


/* ============================================================
   MOBILE MENU — accordion with hierarchical sub-lists
============================================================ */
.mobile-menu__group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-menu__group summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.5rem;
  font-family: "aktiv-grotesk", "Inter", sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: #ffffff;
  user-select: none;
}
.mobile-menu__group summary::-webkit-details-marker { display: none; }
.mobile-menu__group summary i {
  transition: transform 0.3s ease;
  font-size: 1.2em;
  opacity: 0.7;
}
.mobile-menu__group[open] summary i {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--accent);
}
.mobile-menu__group[open] summary {
  color: var(--accent);
}

.mobile-menu__sub {
  display: flex;
  flex-direction: column;
  padding: 0 0.5rem 1.25rem 0.5rem;
}
.mobile-menu__sub strong {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 1rem 0 0.4rem;
  display: block;
}
.mobile-menu__sub strong:first-child { margin-top: 0.4rem; }
.mobile-menu__sub a {
  display: block;
  padding: 0.55rem 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.2s ease;
}
.mobile-menu__sub a:hover,
.mobile-menu__sub a:focus { color: var(--accent); }
.mobile-menu__sub a.mobile-menu__feature {
  margin-top: 0.6rem;
  color: var(--accent);
  font-weight: 500;
}

.mobile-menu__cta {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--accent);
  color: #ffffff;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  font-weight: 500;
}


/* ============================================================
   BUTTON SHINE SWEEP + NAV CTA — matched to client reference
   (gorgeous-lokum). A white gradient streak slides L→R across the
   button on hover. Applied to all primary/secondary CTAs.
============================================================ */

/* Nav "Contact Us" pill — same vertical gradient as the other CTAs,
   no arrow (header button), with the shine sweep. */
.nav__cta {
  background: linear-gradient(180deg, #FEAA5F, #FD9D49);
  color: #ffffff;
  border: none;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 4px 12px -4px rgba(253, 157, 73, 0.45);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.nav__cta:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #FFB870, #FCA350);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 10px 24px -8px rgba(253, 157, 73, 0.7);
}

/* Shine sweep pseudo — shared across all CTA buttons */
.hero__cta-single::before,
.together-cta__btn--primary::before,
.together-cta__btn--secondary::before,
.nav__cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transition: left 0.7s ease;
  pointer-events: none;
}
.hero__cta-single:hover::before,
.together-cta__btn--primary:hover::before,
.together-cta__btn--secondary:hover::before,
.nav__cta:hover::before {
  left: 110%;
}

/* ============================================================
   Floating WhatsApp button (site-wide, injected via footer partial)
============================================================ */
.wa-fab {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 940;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: grid; place-items: center;
  box-shadow: 0 10px 28px -6px rgba(37, 211, 102, 0.55), 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.35s ease;
  -webkit-tap-highlight-color: transparent;
}
.wa-fab__icon { position: relative; z-index: 2; width: 32px; height: 32px; fill: #fff; }
/* idle pulse ring */
.wa-fab::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: 50%; background: #25D366;
  animation: waPulse 2.4s ease-out infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  70%  { opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}
.wa-fab:hover {
  transform: scale(1.09) translateY(-2px);
  box-shadow: 0 16px 40px -6px rgba(37, 211, 102, 0.7), 0 6px 16px rgba(0, 0, 0, 0.2);
}
/* hover tooltip */
.wa-fab__tip {
  position: absolute; right: 72px; top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: #25323A; color: #fff;
  font-family: "aktiv-grotesk", "Inter", sans-serif; font-size: 0.8rem; font-weight: 500;
  white-space: nowrap; padding: 0.5rem 0.8rem; border-radius: 9px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}
.wa-fab__tip::after {
  content: ""; position: absolute; right: -5px; top: 50%;
  transform: translateY(-50%); border: 5px solid transparent; border-left-color: #25323A;
}
.wa-fab:hover .wa-fab__tip { opacity: 1; transform: translateY(-50%) translateX(0); }
/* hide during the fullscreen 3D tour (like the custom cursor) */
body.tour-open .wa-fab { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .wa-fab::after { animation: none; } }
@media (max-width: 560px) {
  .wa-fab { width: 52px; height: 52px; }
  .wa-fab__icon { width: 28px; height: 28px; }
  .wa-fab__tip { display: none; }
}

/* WhatsApp brand colour — homepage CTA + footer/mega text links */
.together-cta__btn[href*="wa.me"] {
  background: #25D366;
  border-color: #25D366;
  color: #ffffff;
}
.together-cta__btn[href*="wa.me"]:hover {
  background: #1fb457;
  border-color: #1fb457;
  color: #ffffff;
}
.footer-v6 a[href*="wa.me"] { color: #25D366; }
.mega-menu a[href*="wa.me"] .mega-link__title { color: #25D366; }