/* ==========================================================================
   Nexo Migration — design tokens
   Palette + type from the official Nexo brand kit (2026).
   Signature: "the nexo line" — a single arc linking an origin to Australia,
   echoing the brand name (nexo = link) and the sport-visa niche (court lines).
   ========================================================================== */

/* Brand-kit type system (2026 kit, page 6): Primary = LotaGrotesqueAlt3,
   Secondary = RF Dewi. (Display = Coolvetica per the kit, but the ten main
   headlines now use RF Dewi Black instead — Coolvetica isn't loaded.) Both
   remaining faces are licensed and self-hosted via @font-face below, per this
   type-role table: Hero Title -> Display (Fraunces on the hero H1). Section
   Heading -> the ten headlines + .why-lead on RF Dewi Black; the one
   remaining plain h2 ("How does Nexo compare...") plus h1/h4 fall back to
   Primary Bold. Card Title -> h3 on Primary Semibold. Body Text -> Primary
   Regular (--font-body). Price/Code/Tag -> Secondary (--font-label: eyebrows,
   chip tags, the MARA .seal badge). Footer -> Primary (inherits --font-body,
   no override). Buttons are the one exception, pinned to --font-btn
   (Fraunces, same face as the hero H1), untouched by any of this. Quicksand
   and Playfair Display are no longer used anywhere; kept out of the @import
   below. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700;800;900&display=swap');

/* Primary brand-kit face — Regular/SemiBold/Bold cuts are all licensed and
   registered under one CSS family here, so requesting a given font-weight
   picks the matching real face instead of synthesizing it: 400 for body
   copy, 600 for card titles (h3), 700 for section headings (h1/h2/h4, which
   ask for 800 and resolve to this nearest available cut). */
@font-face {
    font-family: 'Lota Grotesque Alt3';
    src: url('../fonts/LotaGrotesqueAlt3-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lota Grotesque Alt3';
    src: url('../fonts/LotaGrotesqueAlt3-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lota Grotesque Alt3';
    src: url('../fonts/LotaGrotesqueAlt3-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Licensed Light cut, given its own family name (rather than registered as a
   300-weight of 'Lota Grotesque Alt3' above) so --font-mono always renders
   the light face regardless of any font-weight set on mono elements —
   replaces the IBM Plex Mono stand-in. */
@font-face {
    font-family: 'Lota Grotesque Alt3 Light';
    src: url('../fonts/LotaGrotesqueAlt3-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Secondary brand-kit face, licensed Regular + Bold + Black cuts received —
   used for the landing-page pull-quotes (.lp .story-quote blockquote, Bold),
   the hero lede ("Nexo means link...", .hero .lede, Regular), and the ten
   main section headlines + .why-lead (Black — replaces the earlier Coolvetica
   choice); everything else that used to stand in on --font-label now reads
   on the Primary grotesque instead (see the --font-label note further
   down). */
@font-face {
    font-family: 'RF Dewi';
    src: url('../fonts/RFDewi-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'RF Dewi';
    src: url('../fonts/RFDewi-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'RF Dewi';
    src: url('../fonts/RFDewi-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* brand kit colours, verbatim */
    --cream: #f1ede6;
    --navy: #051f30;
    --teal: #4babc2;
    --coral: #f56851;

    /* derived working shades (contrast-safe text/hover variants of the above) */
    --cream-deep: #e4ded2;
    --navy-soft: #0b2e44;
    --navy-softer: #123a54;
    --teal-ink: #1f6577;
    --teal-bright: #5fbdd3;
    --coral-ink: #be3f22;
    --coral-bright: #ff7a63;

    /* Button fill: a deeper cut of the brand coral. White button text on the raw
       #f56851 only hits ~3:1 contrast; this shade keeps the same red read and
       clears WCAG AA (4.6:1) for the white label. Hover deepens rather than
       lightens so the label stays legible through the transition. */
    --btn-red: #cf4128;
    --btn-red-hover: #b23520;
    --btn-red-rgb: 207, 65, 40;
    --slate: #4d6470;
    --teal-deep: #0f6a80; /* darker brand-teal for small icon accents, replaces old off-brand var(--teal-deep) */

    /* channel values so accent tints reference the brand hexes directly instead of ad-hoc rgba() literals */
    --navy-rgb: 5, 31, 48;
    --teal-rgb: 75, 171, 194;
    --coral-rgb: 245, 104, 81;
    --on-dark-muted: rgba(241, 237, 230, 0.7);
    --on-dark-faint: rgba(241, 237, 230, 0.15);
    --border-light: #ddd4c2;
    --border-dark: rgba(241, 237, 230, 0.16);

    /* Brand kit's primary face is LotaGrotesqueAlt3. We now hold the Regular
       (400) file for it (see @font-face above), so every remaining default
       text role — headings/labels/body/wordmark — reads in the real face.
       The few deliberate accent moments picked elsewhere this session
       (hero H1 on Fraunces, the ten section headlines on RF Dewi Black, the
       hero lede + two pull-quotes on RF Dewi Regular/Bold) keep their own
       tokens/rules and aren't affected by this. Buttons stay pinned to
       --font-btn (now Fraunces, same face as the hero H1) — a separate,
       long-standing CTA accent, not part of this swap. */
    --font-display: 'Lota Grotesque Alt3', 'Hanken Grotesk', 'Figtree', 'Segoe UI', sans-serif;
    --font-body: 'Lota Grotesque Alt3', 'Hanken Grotesk', 'Figtree', 'Segoe UI', sans-serif;
    --font-mono: 'Lota Grotesque Alt3 Light', 'Courier New', monospace;
    --font-btn: 'Fraunces', Georgia, 'Times New Roman', serif;

    /* Secondary face per the brand kit is RF Dewi — used for the hero lede,
       the two landing-page pull-quotes, and now labels/tags too (eyebrows,
       chip tags, the MARA .seal badge), per the type-role table: "Tag" ->
       Secondary. */
    --font-label: 'RF Dewi', 'Lota Grotesque Alt3', 'Hanken Grotesk', 'Figtree', 'Segoe UI', sans-serif;

    /* The wordmark now renders in the real Primary grotesque instead of its
       Hanken Grotesk stand-in — it was always meant to be "the grotesque",
       just held back from the serif/decorative accent swaps applied
       elsewhere (Fraunces, RF Dewi Black). */
    --font-logo: 'Lota Grotesque Alt3', 'Hanken Grotesk', 'Figtree', 'Segoe UI', sans-serif;

    --radius: 22px;
    /* contained measure site-wide, matching the 1240px the .lp sections use, so
       the header, hero and every inner page share one left/right edge */
    --container: 1240px;

    /* warm navy: the brand's dark blocks stay navy-anchored (brand kit has no
       new hues to add) but pick up soft coral + teal glows so they read as
       warm/welcoming rather than flat corporate slabs. */
    --warm-navy:
        radial-gradient(120% 140% at 88% -12%, rgba(245, 104, 81, 0.16), transparent 58%),
        radial-gradient(95% 120% at -8% 112%, rgba(75, 171, 194, 0.20), transparent 55%),
        linear-gradient(160deg, var(--navy) 0%, var(--navy-soft) 100%);
}

@keyframes wobble-in {
    0% { transform: rotate(0deg) scale(.9); opacity: 0; }
    60% { transform: rotate(var(--tilt, -1.5deg)) scale(1.03); opacity: 1; }
    100% { transform: rotate(var(--tilt, -1.5deg)) scale(1); }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* scroll-snap-type has to live on the actual scrolling box (the document),
   but it's a no-op anywhere nothing declares scroll-snap-align — right now
   that's only the home services rows (.lp .svc-item) — so this doesn't
   change scroll feel on any other page or section. MUST stay "proximity",
   not "mandatory": with only 4 snap points on the entire document and none
   below the services section, "mandatory" has nowhere else to resolve to
   once you're at the last row, so it permanently drags the scroll back
   there and traps the whole page — confirmed with a scripted scroll test
   after this exact regression shipped. Proximity only settles near a row
   if the scroll was already coming to rest there; it never fights a
   scroll-past and can't trap the page. */
html { scroll-snap-type: y proximity; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16.5px;
    color: var(--navy);
    background: var(--cream);
    line-height: 1.65;
    letter-spacing: -0.004em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

/* Mobile type scale: nearly every heading site-wide is sized with
   `clamp(Xrem, Yvw, Zrem)`, so shrinking the root font-size shrinks every one
   of those rem bounds at once instead of hunting down each clamp()
   individually. Because the cut is proportional, a large heading loses far
   more absolute px than small body copy does automatically — e.g. at this
   78% root, a 3.6rem hero headline drops ~12px while a 1rem paragraph drops
   ~3.5px — which is exactly "big text shrinks a lot, body shrinks a little"
   without a separate rule per selector. body's own font-size is a literal px
   value (not rem), so it needs its own explicit step down alongside it. */
@media (max-width: 720px) {
    html { font-size: 78%; }
    body { font-size: 13px; }
}

a { color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.06;
    margin: 0 0 0.5em;
    font-weight: 800;
    letter-spacing: -0.032em;
}

/* Card titles (h3) sit one step down the type hierarchy from section
   headings — Semibold instead of the Bold h1/h2/h4 resolve to. */
h3 {
    font-weight: 600;
}

.eyebrow {
    font-family: var(--font-label);
    font-weight: 600;
    font-size: 0.76rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--coral-ink);
}

/* Recurring brand mark next to section eyebrows across the page — the real
   icon lockup (nexo-logo-icon.png light / nexo-logo-icon-dark.png dark),
   picked per instance in the template to match its background, rather than
   a hand-drawn currentColor SVG. */
.eyebrow-mark {
    display: inline-block;
    width: 18px;
    height: auto;
    vertical-align: middle;
    margin-right: 7px;
    margin-top: -3px;
}

a:focus-visible, button:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
}

/* One gutter rule for the whole site: it grows with the viewport instead of
   jumping between the old 6rem / 2rem / 1.25rem breakpoints. */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.25rem); }

/* ---------------------------------- buttons --------------------------------- */

.cta, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* one button size everywhere: 1rem/1.75rem padding on a 52px min box, so a
       one-word label and a full-sentence label share the same height and the
       same optical weight */
    padding: 1rem 1.75rem;
    min-height: 52px;
    background: var(--btn-red);
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 12px;
    font-family: var(--font-btn);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.15;
    letter-spacing: -0.005em;
    border: 1.5px solid transparent;
    box-shadow: 0 1px 2px rgba(var(--navy-rgb), 0.08), 0 14px 26px -16px rgba(var(--btn-red-rgb), 0.55);
    transition: transform 200ms cubic-bezier(.4, 0, .2, 1), background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
}

.cta:hover, .btn:hover {
    background: var(--btn-red-hover);
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(var(--navy-rgb), 0.08), 0 20px 32px -16px rgba(var(--btn-red-rgb), 0.6);
}

.cta:active, .btn:active { transform: translateY(0); }

.btn-ghost {
    background: transparent;
    color: var(--on-dark, var(--cream));
    border-color: var(--border-dark);
    box-shadow: none;
}

.btn-ghost:hover { background: transparent; border-color: var(--cream); }

.btn-ghost-light {
    background: transparent;
    color: var(--navy);
    border-color: rgba(var(--navy-rgb), 0.24);
    box-shadow: none;
}

.btn-ghost-light:hover { background: transparent; border-color: var(--navy); }

.btn-outline-brand {
    background: transparent;
    color: var(--btn-red);
    border: 1px solid var(--btn-red);
    border-radius: 12px;
    padding: 0.8rem 1.4rem;
    min-height: 46px;
    box-shadow: none;
}

.btn-outline-brand:hover {
    background: rgba(var(--btn-red-rgb), 0.07);
    border-color: var(--btn-red-hover);
    color: var(--btn-red-hover);
}

/* header / inline CTA: same shape and label weight, one step down in size */
.btn-sm {
    padding: 0.7rem 1.35rem;
    min-height: 44px;
    font-size: 0.94rem;
    border-radius: 10px;
}

/* ---------------------------------- header --------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(5, 31, 48, .94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 240ms ease, box-shadow 240ms ease;
}

/* A thin route line along the header's bottom edge instead of a flat divider —
   the same teal-to-coral path language used in the hero curve and journey map.
   Hidden until the header goes solid (.is-scrolled) on every page, not just
   the homepage — it reads as a seam for the solid bar, not a mark on the
   still-transparent/top-of-page header. */
.site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--teal-bright), var(--coral));
    opacity: 0;
    transition: opacity 240ms ease;
}

.site-header.is-scrolled {
    box-shadow: 0 16px 32px -18px rgba(0, 0, 0, .45);
}

.site-header.is-scrolled::after {
    opacity: .85;
}

/* Float the header over a photo hero instead of pushing it down — the
   homepage's .hero is the only full-bleed photo band left on the site (the
   contact page went back to a plain sticky header once its hero became one
   half of a photo/form split, with a light cream half a translucent header
   would lose contrast against). A navy gradient (opaque at the top edge,
   fully transparent by the header's own bottom edge) keeps the nav legible
   over bright hero photos while still reading as blended into the hero
   rather than a hard bar. It picks up the same solid navy bar every other
   page always has as soon as the user scrolls past the hero, or while the
   mobile menu is open over it. */
body:has(.hero) .site-header {
    position: fixed;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(5, 31, 48, .55) 0%, rgba(5, 31, 48, 0) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

body:has(.hero) .site-header.is-scrolled,
body:has(.hero) .site-header.nav-open {
    background: rgba(5, 31, 48, .94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.site-header nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); padding: 16px 0; }

/* The approved lockup (Nexo Logo_Horizontal.png) is used as-is here instead
   of being recreated from text + an inline SVG mark — one real asset instead
   of an approximation of it. */
.logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo img { display: block; width: auto; max-height: 44px; height: auto; transition: transform 150ms ease; }
.logo:hover img { transform: scale(1.08); }

.navlinks { display: flex; gap: clamp(14px, 1.6vw, 28px); margin-left: auto; font-size: clamp(13.5px, .9vw + 7px, 15.5px); font-weight: 500; }

/* Spanish nav labels ("Trabajo y Residencia", "Cómo trabajamos"...) run noticeably
   longer than their English equivalents, which was pushing the header past its
   available width and stretching it tall. Tighten spacing specifically for the
   ES nav so it fits the same footprint the English copy was designed for. */
html[lang="es"] .navlinks { gap: clamp(10px, 1.1vw, 20px); font-size: clamp(12.5px, .7vw + 7px, 14.5px); }
html[lang="es"] .site-header nav { gap: clamp(14px, 1.8vw, 28px); }
.navlinks a, .nav-dropdown .nav-label { text-decoration: none; color: var(--on-dark-muted); white-space: nowrap; position: relative; background: none; border: none; font: inherit; cursor: pointer; }
.nav-dropdown .nav-label { display: inline-flex; align-items: center; gap: 6px; font-size: clamp(14.5px, .8vw + 8px, 16.5px); font-weight: 400; color: var(--cream); }
.nav-chevron { width: 10px; height: 10px; flex-shrink: 0; transition: transform .2s ease; }
.nav-dropdown.open .nav-chevron { transform: rotate(180deg); }
.navlinks a:hover, .nav-dropdown .nav-label:hover { color: var(--cream); }
.navlinks a::after, .nav-dropdown .nav-label::after {
    content: '';
    position: absolute;
    left: 0; right: 100%;
    bottom: -4px;
    height: 2px;
    background: var(--coral);
    transition: right .2s ease;
}
.navlinks a:hover::after, .nav-dropdown .nav-label:hover::after { right: 0; }
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown .dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    display: none;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(var(--navy-rgb), .1);
    border-radius: 16px;
    box-shadow: 0 24px 52px rgba(var(--navy-rgb), .18);
    padding: 8px 0 10px;
    min-width: 210px;
    z-index: 30;
    overflow: hidden;
}
.nav-dropdown.open .dropdown-menu { display: flex; }

.dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--navy);
    padding: 10px 20px;
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    border-left: 2px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.dropdown-item .icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--teal-deep); transition: color .15s ease; }

.dropdown-menu .dropdown-item:hover {
    background: rgba(var(--teal-rgb), .07);
    color: var(--teal-bright);
    border-left-color: var(--teal-bright);
}

.dropdown-item:hover .icon { color: var(--teal-bright); }

.lang-switch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(241, 237, 230, .08);
    border: 1px solid rgba(241, 237, 230, .18);
    border-radius: 999px;
    padding: 3px;
    flex-shrink: 0;
}

.lang-slide {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(var(--navy-rgb), .12);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    z-index: 0;
}

.lang-switch.lang-es .lang-slide { transform: translateX(100%); }

.lang-btn {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: transparent;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .02em;
    color: var(--on-dark-muted);
    padding: 6px 11px;
    border-radius: 999px;
    cursor: pointer;
    transition: color .15s ease;
}

.lang-btn .flag { width: 16px; height: 11.2px; border-radius: 2px; flex-shrink: 0; }
.lang-btn:hover { color: var(--cream); }
.lang-btn.is-active { color: var(--navy); }

@media (prefers-reduced-motion: reduce) {
    .lang-slide { transition: none; }
}

.navcta { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

.burger { display: none; margin-left: auto; padding: 11px; margin-right: -11px; background: none; border: 0; font: inherit; cursor: pointer; color: var(--cream); }

.burger-line {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}

.site-header.nav-open .burger-line--top { transform: translateY(6px) rotate(45deg); }
.site-header.nav-open .burger-line--mid { opacity: 0; }
.site-header.nav-open .burger-line--bottom { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
    .burger-line, .nav-chevron { transition: none; }
}

@media (max-width: 1380px) {
    /* Nav has 7 links + logo + lang switch + CTA button — that's too much
       content for the space even on small laptops (it read as congested
       well past iPad landscape), so it collapses to the burger earlier
       than the general 940px tablet breakpoint used elsewhere on the site.
       Raised from 1320px so the longer Spanish labels also get enough
       room before collapsing. */
    .navlinks, .navcta, .lang-switch { display: none; }
    .burger { display: block; }
}

/* ----------------------------------- hero ---------------------------------- */

.hero-ctas {
    display: flex;
    position: relative;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 2.75rem;
}

/* ------------------------------ itinerary strip ----------------------------- */

.itinerary {
    background: var(--cream-deep);
    border-bottom: 1px solid var(--border-light);
}

.itinerary .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    padding: 0.9rem 1.5rem;
    justify-content: center;
}

.itinerary span {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-ink);
}

.itinerary span::before {
    content: '\2022';
    color: var(--coral-ink);
    margin-right: 0.6rem;
}

.itinerary span:first-child::before { content: ''; margin-right: 0; }

/* --------------------------------- sections --------------------------------- */

section { padding: 6rem 0; }

section > .wrap > h2, .sec-head h2 {
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    margin-bottom: 0.5rem;
}

.sec-head { max-width: 640px; margin-bottom: 3rem; }

.section-lede, .sec-head p {
    color: var(--slate);
    max-width: 56ch;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.section-dark, .on-navy { background: var(--warm-navy); color: var(--cream); }
.section-dark h2, .on-navy h2 { color: var(--cream); }
.section-dark .section-lede, .section-dark .sec-head p,
.on-navy .section-lede, .on-navy .sec-head p { color: var(--on-dark-muted); }
.section-dark .eyebrow, .on-navy .eyebrow, .eyebrow.on-dark { color: var(--teal); }

.section-deep { background: var(--cream-deep); }

/* ----------------------------------- cards ----------------------------------- */

.card-grid {
    display: grid;
    /* 300px floor keeps card copy from wrapping into slivers on a 4-up row */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.ticket {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(var(--navy-rgb), 0.09);
    border-radius: 20px;
    padding: 1.9rem 1.7rem 1.6rem;
    text-decoration: none;
    color: var(--navy);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ticket:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 38px -22px rgba(var(--navy-rgb), 0.4);
}

.ticket .eyebrow { display: block; margin-bottom: 0.7rem; }

.ticket h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }

.ticket p { color: var(--slate); margin: 0; font-size: 0.96rem; flex: 1; }

.ticket .ticket-link {
    display: inline-block;
    margin-top: 1.1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--navy);
    border-bottom: 2px solid var(--coral);
    padding-bottom: 0.15rem;
    align-self: flex-start;
}

.section-dark .ticket {
    background: var(--navy-soft);
    color: var(--cream);
    border-color: rgba(241, 237, 230, 0.14);
}

.section-dark .ticket p { color: var(--on-dark-muted); }
.section-dark .ticket .ticket-link { color: var(--cream); }

/* -------------------------------- testimonials -------------------------------- */

blockquote {
    border-left: 3px solid var(--coral);
    padding-left: 1.25rem;
    margin: 0 0 1.75rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
}

blockquote cite {
    display: block;
    margin-top: 0.6rem;
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--teal-ink);
}

.section-dark blockquote cite { color: var(--teal); }

.quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.quote-card {
    background: var(--navy-soft);
    border-radius: var(--radius);
    padding: 1.9rem 1.75rem;
}

.quote-card blockquote { font-size: 1.05rem; }

/* pull-quote used to feature a single testimonial within a section */
.pullquote {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1.5px solid rgba(var(--navy-rgb), 0.14);
    max-width: 820px;
}

.pullquote blockquote {
    border: 0;
    padding-left: 0;
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.015em;
    margin-bottom: 0.75rem;
}

.pullquote blockquote::before {
    content: '\201C';
    display: block;
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1;
    color: var(--coral);
    margin-bottom: 0.25rem;
}

.pullquote cite { color: var(--slate); }

.section-dark .pullquote { border-top-color: var(--on-dark-faint); }

/* ----------------------------------- prose ----------------------------------- */

.prose p { margin: 0 0 1.1em; }
.lede { font-size: 1.15rem; color: var(--slate); }

dl dt {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    margin-top: 1.5rem;
}
dl dd { margin-left: 0; color: var(--slate); }

/* -------------------------------- detail blocks -------------------------------- */

.detail-block {
    border-left: 3px solid var(--teal);
    padding-left: 1.25rem;
    margin: 2.25rem 0;
}

.detail-block h2 {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal-ink);
    margin-bottom: 0.7rem;
}

/* --------------------------------- value chips --------------------------------- */

.value-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.25rem;
}

.value-chip {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.98rem;
    padding: 0.65rem 1.3rem;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    background: #fff;
}

/* ---------------------------------- code chips ---------------------------------- */

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.code-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45em;
    font-family: var(--font-body);
    font-size: 0.84rem;
    letter-spacing: 0.01em;
    color: var(--navy);
    background: var(--cream-deep);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 0.45rem 0.75rem;
}

.code-chip .code-num {
    color: var(--coral-ink);
    font-weight: 700;
}

/* --------------------------------- boarding pass -------------------------------- */

.pass {
    display: flex;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(var(--navy-rgb), 0.06);
    margin-bottom: 2.5rem;
    overflow: hidden;
}

.pass-main {
    flex: 1 1 auto;
    padding: 2.25rem 2.25rem 2rem;
    min-width: 0;
}

.pass-main .eyebrow { display: inline-block; margin-bottom: 0.6rem; }
.pass-main h1 { margin-bottom: 0.5rem; }
.pass-main .lede { margin: 0; }

.pass-stub {
    flex: 0 0 auto;
    width: 168px;
    background: var(--navy);
    color: var(--on-dark-muted);
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    border-left: 2px dashed var(--on-dark-faint);
}

.pass-stub::before,
.pass-stub::after {
    content: '';
    position: absolute;
    left: -11px;
    width: 22px;
    height: 22px;
    background: var(--cream);
    border-radius: 50%;
}

.pass-stub::before { top: -11px; }
.pass-stub::after { bottom: -11px; }

.pass-stub .stub-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-dark-muted);
}

.pass-stub .stub-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--cream);
    line-height: 1.25;
}

@media (max-width: 640px) {
    .pass { flex-direction: column; }
    .pass-stub {
        width: auto;
        border-left: none;
        border-top: 2px dashed var(--on-dark-faint);
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .pass-stub::before,
    .pass-stub::after {
        left: auto;
        top: -11px;
        bottom: auto;
    }
    .pass-stub::before { left: -11px; }
    .pass-stub::after { right: -11px; left: auto; }
}

/* ----------------------------------- FAQ accordion ----------------------------------- */

.faq-layout {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 420px);
    gap: 3rem;
    align-items: start;
}

.faq-categories { order: 1; }

.faq-sticky { position: sticky; top: 50%; order: 2; }

/* .reveal already animates transform for the fade-up; combine it with the
   vertical centering here instead of letting the two transforms clobber each other. */
.faq-sticky.reveal { transform: translateY(calc(-50% + 18px)); }
.faq-sticky.reveal.in-view { transform: translateY(-50%); }

.faq-sticky h2 { font-size: clamp(2.1rem, 4.2vw, 3.1rem); }

.faq-sticky-lede {
    margin-top: 0.9rem;
    color: var(--slate);
    max-width: 30ch;
    line-height: 1.6;
    font-size: 1.05rem;
}

.faq-category { max-width: 820px; margin-bottom: 2.75rem; }
.faq-category:last-child { margin-bottom: 0; }
.faq-category > .eyebrow {
    display: block;
    margin: 2.4rem 0 0.4rem;
}
.faq-category:first-child > .eyebrow { margin-top: 0; }

.faq-item { border-bottom: 1px solid rgba(var(--navy-rgb), 0.12); }

.faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.35rem 2rem 1.35rem 0;
    position: relative;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary .faq-toggle {
    flex-shrink: 0;
    position: absolute;
    right: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    background: #fff;
    color: var(--navy);
    font-size: 1rem;
    line-height: 1;
    transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.faq-item summary .faq-toggle::before {
    content: '▾';
    display: block;
    transform: rotate(0deg);
    transition: transform 0.18s ease;
}

.faq-item.is-open summary .faq-toggle {
    background: var(--teal-bright);
    color: #fff;
    border-color: transparent;
}

.faq-item.is-open summary .faq-toggle::before {
    transform: rotate(180deg);
}

.faq-item .faq-answer {
    margin: 0;
    padding: 0 2rem 1.6rem 0;
    max-width: 680px;
    color: var(--slate);
    overflow: hidden;
    transition: height 0.28s cubic-bezier(.4, 0, .2, 1), opacity 0.22s ease;
}

.faq-question { display: inline-block; max-width: calc(100% - 56px); }

@media (max-width: 940px) {
    .faq-item summary { padding-right: 2.5rem; }
    .faq-layout { grid-template-columns: 1fr; gap: 2rem; }
    .faq-sticky { position: static; order: 0; }
    .faq-sticky.reveal { transform: translateY(18px); }
    .faq-sticky.reveal.in-view { transform: translateY(0); }
    .faq-categories { order: 0; }
    .faq-sticky-lede { max-width: none; }
}

/* ------------------------------------ team ------------------------------------ */

.card {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.card img { border-radius: 10px; margin-bottom: 1rem; }
.job-title { font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-ink); }

/* ----------------------------- how it works / route ----------------------------- */

.route { background: var(--cream-deep); }

.route-dashboard {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
}

.route-dashboard .rt-head {
    text-align: center;
    max-width: 1000px;
    width: min(100%, 1000px);
    margin: 0 auto;
    padding-inline: 1rem;
}

.route-dashboard .rt-head h2 {
    text-align: center;
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: keep-all;
    margin: 0 auto .6rem;
    max-width: 900px;
}

/* "How It Works" heading centering — an ID selector, so it outranks the
   various .lp variant rules elsewhere in this file that have chipped away
   at this block over time. Scoped to #route only; the Services section is
   untouched. text-align:center on the inline-grid h2 is what actually
   centers it; no manual transform needed (a fixed translateX px/cm nudge
   here previously clipped the heading off the left edge on some viewports
   — centering must come from layout, not a magic-number shift). */
#route .rt-head {
    max-width: 1180px;
    /* .route-dashboard .rt-head sets its own `width: min(100%, 1000px)` —
       a different property than max-width, so it wasn't touched by that
       rule above and was still capping the head at 1000px regardless.
       Override the property directly instead of just max-width. */
    width: min(100%, 1180px);
    margin: 0 auto;
}
#route .rt-head h2.split-line {
    display: inline-grid;
    width: 100%;
    justify-items: center;
    text-align: center;
    gap: .08rem;
    margin: 0 auto .6rem;
    line-height: 1.04;
    letter-spacing: -.035em;
    font-size: clamp(2.1rem, 3.7vw, 2.9rem);
    max-width: min(70rem, 100%);
    white-space: normal;
    overflow-wrap: normal;
    word-break: keep-all;
    /* .route-dashboard .rt-head h2 sets text-wrap:balance, which inherits
       onto this span and rebalances it into two even-ish lines even when
       the whole phrase would otherwise fit on one — this is the actual
       "why does it fit but still wrap" culprit, not a width problem. */
    text-wrap: normal;
    transform: none;
}

.route-intro {
    max-width: 42rem;
    font-size: 1rem;
    color: var(--slate);
    margin-top: 0.85rem;
}

.route-map-layout {
    display: grid;
    grid-template-columns: minmax(320px, 40%) minmax(340px, 1fr);
    gap: 2rem;
    align-items: start;
    margin-top: 2rem;
}

.route-copy {
    display: flex;
    align-items: start;
}

.route-copy-card {
    width: 100%;
    background: #fff;
    border: 2px solid var(--navy);
    border-radius: 1.9rem;
    padding: 2rem;
    box-shadow: 0 28px 46px rgba(9, 42, 66, 0.06);
    transform: rotate(-0.6deg);
}

.route-copy-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 46% 54% 61% 39% / 45% 48% 52% 55%;
    background: rgba(var(--teal-rgb), 0.14);
    color: var(--teal-deep);
    margin-bottom: 1rem;
}

.route-copy-eyebrow {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-ink);
    margin-bottom: 0.9rem;
}

.route-copy-card h3 {
    margin-top: 0;
    font-size: clamp(1.9rem, 2.6vw, 2.3rem);
    line-height: 1.05;
    max-width: 35rem;
}

.route-copy-lead {
    margin: 1rem 0 1.5rem;
    color: var(--slate);
    line-height: 1.8;
}

.route-feature-list {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.route-feature-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    align-items: start;
    color: var(--slate);
    line-height: 1.7;
}

.route-feature-list li::before {
    content: '';
    width: 0.85rem;
    height: 0.85rem;
    margin-top: 0.3rem;
    border-radius: 50%;
    background: var(--teal-deep);
    box-shadow: 0 0 0 4px rgba(var(--teal-rgb), 0.18);
}

.route-feature-list li:nth-child(2)::before { background: var(--coral); box-shadow: 0 0 0 4px rgba(var(--coral-rgb), 0.18); }

.route-copy-card .btn { display: inline-flex; }

.route-map-panel {
    display: grid;
    gap: 1.25rem;
}

.route-map-card {
    position: relative;
    background: #fff;
    border: 2px solid var(--navy);
    border-radius: 1.9rem;
    padding: 1.75rem;
    transform: rotate(0.5deg);
    overflow: hidden;
    box-shadow: 0 28px 46px rgba(9, 42, 66, 0.06);
}

.journey-map {
    position: relative;
    width: 100%;
    aspect-ratio: 600 / 380;
}

.journey-paths {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.journey-path {
    fill: none;
    stroke: rgba(var(--teal-rgb), .6);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 2 9;
    animation: journey-flow 0.9s linear infinite;
}

@keyframes journey-flow {
    to { stroke-dashoffset: -11; }
}

@media (prefers-reduced-motion: reduce) {
    .journey-path { animation: none; }
}

.journey-plane circle { fill: var(--teal-deep); }

.journey-avatar {
    position: absolute;
    left: 18%;
    top: 53%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 15%;
    aspect-ratio: 1 / 1;
    min-width: 46px;
    max-width: 68px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--teal-bright);
    box-shadow: 0 12px 24px rgba(9, 42, 66, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal-deep);
}

.journey-avatar svg { width: 55%; height: 55%; }

.journey-card {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(165px, 30%);
    background: #fff;
    border: 1px solid rgba(var(--navy-rgb), 0.08);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 14px 28px rgba(9, 42, 66, .1);
}

.journey-card--a { left: 56%; top: 21%; transform: translateY(-50%); }
.journey-card--b { left: 66%; top: 54%; transform: translateY(-50%); }
.journey-card--c { left: 66%; top: 84%; transform: translateY(-50%); }

.journey-card-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.journey-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.journey-card-thumb.imgph .imgph-label { font-size: 6px; letter-spacing: .02em; padding: 2px; }

.journey-card-text span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--teal-deep);
}

.journey-card-text strong {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.15;
}

@media (max-width: 560px) {
    .journey-map { display: flex; flex-direction: column; align-items: center; aspect-ratio: auto; }
    .journey-paths { display: none; }
    .journey-avatar { position: static; transform: none; width: 52px; margin-bottom: 14px; }
    .journey-card { position: static; transform: none; width: 100%; max-width: none; margin-bottom: 10px; }
    .journey-card:last-child { margin-bottom: 0; }
}

/* ---- how-it-works timeline: a real 4-stop sequence, so numbering here
   actually earns its keep (unlike a decorative 01/02/03) ---- */

.route-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
    margin-top: 3rem;
}

.route-timeline-track {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 22px;
    height: 20px;
    z-index: 0;
    pointer-events: none;
}

.route-timeline-track svg { width: 100%; height: 100%; display: block; }

.route-stage {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.route-stage-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 46% 54% 61% 39% / 45% 48% 52% 55%;
    background: var(--teal-deep);
    color: #fff;
    border: 2px solid var(--navy);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.route-stage:nth-child(3) .route-stage-num { background: var(--coral); }
.route-stage:nth-child(4) .route-stage-num { background: var(--navy); }
.route-stage:nth-child(5) .route-stage-num { background: var(--coral-ink); }

.route-stage p { margin: 0; color: var(--slate); line-height: 1.6; font-size: 0.98rem; }

@media (max-width: 780px) {
    .route-timeline { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
    .route-timeline-track { display: none; }
}

@media (max-width: 480px) {
    .route-timeline { grid-template-columns: 1fr; }
}

.route-draw {
    stroke-dasharray: 960px;
    stroke-dashoffset: 960px;
    animation: route-draw 1.8s ease forwards 0.4s;
}

@keyframes route-draw {
    to { stroke-dashoffset: 0; }
}

@media (max-width: 980px) {
    .route-map-layout { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .route-map-layout { gap: 1.5rem; }
    .route-copy-card, .route-map-card { padding: 1.5rem; }
    .route-mini-cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .route-draw { stroke-dashoffset: 0 !important; }
}

.step-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(var(--navy-rgb), 0.08);
    border-radius: 1.35rem;
    padding: 1.5rem;
    box-shadow: 0 16px 26px rgba(9, 42, 66, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.step-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 40px rgba(9, 42, 66, 0.09);
    border-color: rgba(var(--navy-rgb), 0.16);
}

.step-badge {
    display: inline-flex;
    width: 2.4rem;
    height: 2.4rem;
    justify-content: center;
    align-items: center;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, var(--teal-deep) 0%, #4babc2 100%);
    color: white;
    font-weight: 800;
    margin-bottom: 1rem;
}

.step-card h3 {
    font-size: 1.18rem;
    margin-bottom: 0.65rem;
}

.step-card p {
    color: var(--slate);
    line-height: 1.7;
    font-size: 0.96rem;
}

.route-path {
    fill: none;
    stroke: rgba(1, 173, 195, 0.92);
    stroke-width: 6px;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 14px 28px rgba(38, 99, 130, 0.08));
}

.route-draw {
    stroke-dasharray: 960px;
    stroke-dashoffset: 960px;
    animation: route-draw 1.8s ease forwards 0.4s;
}

@keyframes route-draw {
    to { stroke-dashoffset: 0; }
}

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

@media (max-width: 720px) {
    .route-meta { grid-template-columns: 1fr; }
    .route-chart { min-height: 11rem; }
    .step-card { padding: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
    .route-draw { stroke-dashoffset: 0 !important; }
}

/* ---------------------------------- pillars ---------------------------------- */

.why-lead {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    font-weight: 800;
    line-height: 1.18;
    max-width: 46ch;
    margin-bottom: 1.1rem;
}

.why-body { font-size: 1.1rem; color: var(--slate); max-width: 62ch; margin-bottom: 2.75rem; }

.pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.pillar { padding: 1.75rem 1.75rem 0 0; position: relative; }

.pillar::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 46% 54% 61% 39% / 45% 48% 52% 55%;
    background: var(--teal-deep);
    margin-bottom: 1rem;
}

.pillar:nth-child(2)::before { background: var(--coral); }
.pillar:nth-child(3)::before { background: var(--navy); }
.pillar h3 { font-size: 1.2rem; margin-bottom: 0.55rem; color: var(--teal-deep); }
.pillar:nth-child(2) h3 { color: var(--coral-ink); }
.pillar:nth-child(3) h3 { color: var(--navy); }
.pillar p { font-size: 0.98rem; color: var(--slate); }

@media (max-width: 720px) { .pillars { grid-template-columns: 1fr; gap: 1.5rem; } }

/* -------------------------------- final CTA ---------------------------------- */

.final-cta { text-align: center; padding: 6.5rem 0; }
.final-cta-logo { width: 132px; height: auto; margin: 0 auto 1.4rem; display: block; }
.final-cta h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 900; margin-bottom: 0.9rem; }
.final-cta p { font-size: 1.15rem; color: rgba(var(--navy-rgb), .72); max-width: 32rem; margin: 0 auto 1.9rem; }
.final-cta .hero-ctas { justify-content: center; margin-bottom: 0; }

/* ------------------------------- error pages ---------------------------------- */

.error-page { text-align: center; padding: clamp(3.5rem, 9vw, 6.5rem) 0; }
.error-page .eyebrow { display: inline-flex; align-items: center; }
.error-page .error-code {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 13vw, 6.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--teal-ink);
    margin: 0.35em 0 0.1em;
}
.error-page .lede { max-width: 32rem; margin: 0 auto 1.9rem; }
.error-page .hero-ctas { justify-content: center; margin-bottom: 0; }

/* ------------------------------- inner page hero -------------------------------- */

.page-hero {
    background: var(--navy);
    color: var(--cream);
    padding: 4rem 0 3.25rem;
}

.page-hero .eyebrow { color: var(--teal); margin-bottom: 0.9rem; display: inline-block; }
.page-hero h1 { color: var(--cream); font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 22ch; margin-bottom: 0.6rem; }
.page-hero .lede { color: var(--on-dark-muted); max-width: 60ch; margin: 0; font-size: 1.1rem; }
.page-hero .cta { margin-top: 1.5rem; }

/* ----------------------------------- footer ----------------------------------- */

.site-footer {
    background: var(--navy);
    color: var(--on-dark-muted);
    padding: 3.5rem 1.5rem 2rem;
    font-size: 0.9rem;
}

.site-footer .foot-top {
    display: flex;
    justify-content: space-between;
    gap: 2.5rem;
    flex-wrap: wrap;
    max-width: var(--container);
    margin: 0 auto 1.75rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--on-dark-faint);
}

.site-footer .brand-mark {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--cream);
    font-size: 1.15rem;
    margin-bottom: 0.6rem;
}

.site-footer .foot-tagline { font-size: 0.88rem; color: var(--on-dark-muted); margin: 0; }

.site-footer p { margin: 0.3rem 0; }

.site-footer a { text-decoration: none; color: var(--on-dark-muted); }
.site-footer a:hover { color: var(--cream); }

.social-links, .legal-links {
    margin-top: 0.75rem;
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.legal-links { font-family: var(--font-body); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; }

.site-footer .copyright {
    margin-top: 2rem;
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-dark-muted);
    opacity: 0.7;
}

.disclaimer {
    max-width: var(--container);
    margin: 1.5rem auto 0;
    font-size: 0.78rem;
    line-height: 1.7;
    color: rgba(241, 237, 230, 0.5);
}

.pending { color: var(--coral); font-weight: 600; }

/* ----------------------------------- meta ----------------------------------- */

.meta {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--teal-ink);
}

/* ---------------------------------- responsive --------------------------------- */

@media (max-width: 1320px) {
    .site-header.nav-open nav { flex-wrap: wrap; position: relative; }
    /* Without this the burger (last in source order) gets pushed below the
       whole wrapped, full-width menu once it's open — landing at the very
       bottom of a long list instead of staying put as a reachable close
       button. Pinning it to the header's top-right keeps it exactly where
       the user tapped to open the menu. */
    .site-header.nav-open .burger {
        position: absolute;
        top: 16px;
        right: 0;
    }
    .site-header.nav-open .navlinks,
    .site-header.nav-open .navcta {
        display: flex;
        flex: 0 0 100%;
        border-top: 1px solid rgba(241, 237, 230, 0.14);
    }
    .site-header.nav-open .navlinks {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 0 0.75rem;
        gap: 1rem;
        font-size: 1rem;
    }
    /* On desktop .dropdown-menu floats absolutely over the page, which is fine
       since nothing sits below it. Stacked in the mobile menu that same
       absolute panel overlapped the nav items below it instead of pushing
       them down — Study's menu covered Work/Sport/Business entirely while
       open. Flowing it inline (like a standard mobile accordion) fixes that. */
    .site-header.nav-open .nav-dropdown {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .site-header.nav-open .dropdown-menu {
        position: static;
        margin-top: 8px;
        padding: 2px 0 2px 4px;
        min-width: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    /* `flex: 0 0 100%` here (matching .navlinks/.navcta above) stretched this
       pill to the full menu width while the two buttons inside stayed their
       natural small size — the 50%-wide sliding highlight (.lang-slide) then
       covered blank space well to the right of the actual EN/ES buttons
       instead of sitting behind them. `flex: 0 0 auto` keeps it sized to its
       own content (it still lands on its own row, since .navlinks above it
       already fills the whole previous row). Also sized down a step from
       desktop, per request, since this is the one control on the page a
       thumb taps rather than reads. */
    .site-header.nav-open .lang-switch {
        display: flex;
        flex: 0 0 auto;
        border-top: 1px solid rgba(241, 237, 230, 0.14);
        align-self: flex-start;
        margin: 0.75rem 0;
        padding: 2px;
    }
    .site-header.nav-open .lang-slide { top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); }
    .site-header.nav-open .lang-btn {
        font-size: 10px;
        gap: 4px;
        padding: 4px 7px;
    }
    .site-header.nav-open .lang-btn .flag { width: 12px; height: 8.4px; }
    .site-header.nav-open .navcta { padding: 0.75rem 0 1.25rem; }
    .site-header.nav-open .navcta .btn { width: 100%; justify-content: center; }
}

@media (max-width: 940px) {
    /* .wrap gutters are handled by the clamp in the base rule */
    .pillars { grid-template-columns: 1fr; }
    .pillar { border-right: 0; border-bottom: 1px solid rgba(var(--navy-rgb), 0.11); padding: 1.5rem 0; }
    .pillar:last-child { border-bottom: 0; }
    body .story-grid { grid-template-columns: 1fr; gap: 36px; }
    .stops { grid-template-columns: 1fr 1fr; gap: 26px; }
    .hero { padding-top: 4rem; }
    .hero-media { padding-bottom: 0; }
    .imgstrip { grid-template-columns: 1fr 1fr; }
    section { padding: 4.4rem 0; }
    .two-col { grid-template-columns: 1fr; }
}

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

@media (max-width: 560px) {
    .stops { grid-template-columns: 1fr; }
    .pillar { border-right: 0 !important; padding-left: 0 !important; }
    section { padding: 3.5rem 0; }
    .final-cta { padding: 4rem 0; }
}

/* ------------------------------- scroll reveal -------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in-view { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .reveal { transition: none; opacity: 1; transform: none; }
}

/* dot-grid cartography texture, reused on sand sections and the route map */
.dot-grid {
    background-image: radial-gradient(var(--border-light) 1px, transparent 1px);
    background-size: 18px 18px;
}

.section-dark.dot-grid {
    background-image: radial-gradient(var(--border-dark) 1px, transparent 1px);
}

/* -------------------------------- route map ------------------------------------ */

.route-map-wrap {
    background: var(--cream-deep);
    border-radius: var(--radius);
    padding: 2rem 1.5rem 1rem;
    margin-top: 2rem;
    position: relative;
}

.route-map {
    width: 100%;
    height: auto;
    display: block;
}

.route-map .route {
    fill: none;
    stroke: var(--teal);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 5 7;
    opacity: 0.5;
}

.route-map .route-draw {
    fill: none;
    stroke: var(--coral);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 550;
    stroke-dashoffset: 550;
}

.route-map.in-view .route-draw {
    animation: draw-route 0.8s ease-out forwards;
}

.route-map .pin {
    stroke: var(--navy);
    stroke-width: 2;
}

.route-map .pin.origin { fill: var(--on-dark-muted, #9db2b8); }
.route-map .pin.active { fill: var(--coral); }
.route-map .pin.inactive { fill: var(--cream); opacity: 0.6; }

.route-map text {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    fill: var(--slate);
}

.route-map text.label-active { fill: var(--navy); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    .route-map .route-draw { animation: none; stroke-dashoffset: 0; }
}

/* -------------------- Additional section media and FAQ styling -------------------- */

.section-media {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

@media (min-width: 940px) {
    .section-media { height: 420px; }
    .quotecard img.section-media { height: 240px; }
}

.quotecard img.section-media { height: 200px; }

/* ensure responsive behaviour for smaller screens */
@media (max-width: 940px) {
    .section-media { height: 220px; }
    .quotecard img.section-media { height: 180px; }
}

/* ------------------------------- booking form ---------------------------------- */

.two-col {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    align-items: start;
}

.contact-details dt {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal-ink);
    margin-top: 1.25rem;
}
.contact-details dd { margin-left: 0; color: var(--navy); }

.inquiry-form {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 1.75rem;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.field { margin-bottom: 1.1rem; }

.field label {
    display: block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal-ink);
    margin-bottom: 0.4rem;
}

.field label.required::after {
    content: " *";
    color: var(--coral-ink);
}

.inquiry-form input[type="text"],
.inquiry-form input[type="email"],
.inquiry-form input[type="tel"],
.inquiry-form select,
.inquiry-form textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--navy);
    background: var(--cream);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(var(--teal-rgb), 0.22);
}

.conditional-group[hidden] { display: none; }

.field.consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--slate);
}
.field.consent input { margin-top: 0.3rem; }
.field.consent label { text-transform: none; font-family: var(--font-body); font-weight: 400; letter-spacing: normal; color: var(--slate); }
.field.consent a { color: var(--teal-ink); text-decoration: underline; }

.hp-wrap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field-error {
    color: var(--coral-ink);
    font-size: 0.82rem;
    margin: 0.35rem 0 0;
}

.alert-success {
    background: rgba(var(--teal-rgb), 0.14);
    border: 1px solid var(--teal);
    color: var(--navy);
    padding: 0.9rem 1.1rem;
    border-radius: 10px;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}

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

/* -------------------------------- whatsapp float -------------------------------- */

.wa {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    background: var(--teal);
    color: var(--navy);
    border-radius: 999px;
    padding: 14px 22px 14px 16px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15.5px;
    text-decoration: none;
    box-shadow: 0 14px 34px -12px rgba(var(--navy-rgb), .6);
    display: flex;
    align-items: center;
    gap: 10px;
    border: 2px solid var(--navy);
    transition: transform .18s ease, background .18s ease;
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    background: #25D366; /* WhatsApp green */
    color: #ffffff;
    border-radius: 999px;
    padding: 14px 24px 14px 16px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 16.5px;
    text-decoration: none;
    box-shadow: 0 12px 30px -10px rgba(var(--navy-rgb), .45);
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    transition: transform .18s ease, background .18s ease;
    /* inviting invite animation: subtle pop + glow */
    animation: waInvite 4s ease-in-out infinite;
}

.wa:hover { transform: translateY(-3px); background: #1DA851; }
/* pause invitation animation while hovering to avoid distraction */
.wa:hover { animation-play-state: paused; }

.wa svg { display: block; flex-shrink: 0; color: #ffffff; }

.wa::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    border: 2px solid rgba(37, 211, 102, 0.18);
    animation: waPulse 2.6s ease-out infinite;
    pointer-events: none;
}

@keyframes waPulse {
    0% { transform: scale(1); opacity: .7; }
    70% { transform: scale(1.22); opacity: 0; }
    100% { transform: scale(1.22); opacity: 0; }
}

@keyframes waInvite {
    0% { transform: scale(1); box-shadow: 0 12px 30px -10px rgba(5,31,48,.45); }
    6% { transform: scale(1.06); box-shadow: 0 18px 42px -12px rgba(29,168,81, .18); }
    12% { transform: scale(1.04); box-shadow: 0 22px 48px -14px rgba(37,211,102, .24); }
    18% { transform: scale(1); box-shadow: 0 12px 30px -10px rgba(5,31,48,.45); }
    100% { transform: scale(1); box-shadow: 0 12px 30px -10px rgba(5,31,48,.45); }
}

.wa-label { white-space: nowrap; }

@media (max-width: 560px) {
    .wa { padding: 16px; right: 18px; bottom: 22px; font-size: 15px; }
    .wa-label { display: none; }
}

@media (min-width: 561px) {
    .wa { right: 24px; bottom: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .wa:hover { transform: none; }
    .wa::before { display: none; }
}

/* ------------------------------- homepage (v5) ------------------------------- */
/* Matches the nexo-home-v5.html mockup: navy hero with image placeholders,
   plain white "path" cards for services, a drawn route line for the process
   timeline, and a declaration-style comparison table. */

.seal {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-label);
    font-size: .7rem;
    letter-spacing: .06em;
    border: 1px solid var(--coral);
    color: var(--coral);
    border-radius: 999px;
    padding: .35rem .8rem;
}

.seal.pending { border-color: rgba(241, 237, 230, .35); color: rgba(241, 237, 230, .6); }

/* ---- hero ---- */

.hero {
    background:
        linear-gradient(100deg, rgba(var(--navy-rgb), .93) 0%, rgba(var(--navy-rgb), .82) 32%, rgba(var(--navy-rgb), .55) 62%, rgba(var(--navy-rgb), .3) 100%),
        url('../img/hero-bg.avif') center/cover no-repeat;
    color: var(--cream);
    position: relative;
    overflow: hidden;
    padding: 6rem 0 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Centers the heading/copy vertically in the space above the curve, instead
   of them sitting flush under the padding-top now the hero is full height.
   Longhand top/bottom margins only — .wrap's own horizontal margin:0 auto
   (centering it in the page) is untouched, and .wrap stays a plain block so
   its width/left-alignment behave exactly as everywhere else on the site. */
.hero > .wrap {
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
}

.hero .wrap-split {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 38px;
    align-items: end;
}

.hero-inner { position: relative; z-index: 2; max-width: 640px; }
.hero-media { position: relative; z-index: 2; }

.hero .hero-inner > * { position: relative; z-index: 2; }

.hero h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(2.35rem, 4.9vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -.04em;
    margin-bottom: 16px;
}

.hero h1 .accent { color: var(--teal); }

.hero h2.hero-subhead {
    font-family: var(--font-display);
    font-size: clamp(24px, 3.4vw, 40px);
    font-weight: 800;
    margin-bottom: 16px;
}

.hero h2.hero-subhead .accent { color: var(--teal); }

.doodle-host { position: relative; }
.doodle-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(280px, 90vw);
    height: auto;
    pointer-events: none;
}

.hero .lede {
    font-size: clamp(15.5px, 1.5vw, 17.5px);
    color: var(--on-dark-muted);
    max-width: 520px;
    margin-bottom: 1.85rem;
}

.trust {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: var(--on-dark-muted);
    border-top: 1px solid var(--on-dark-faint);
    padding: 20px 0 0;
}

/* Scoped to direct children only (not `.trust span`) so it lays out each
   item's icon + text as one flex row, without also flexing the nested
   data-i18n label span (or the label+colon+value wrapper below) and
   splitting them apart with their own 8px gap. */
.trust > span { display: flex; align-items: center; gap: 8px; }
.trust i { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); display: block; flex-shrink: 0; }

.hero-media { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-bottom: 18px; }
.hero-photo { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid rgba(241, 237, 230, .28); box-shadow: 0 26px 46px -22px rgba(0, 0, 0, .55); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo--wide { grid-column: 1 / 3; aspect-ratio: 16 / 10; }
.hero-media .hero-photo:nth-child(2), .hero-media .hero-photo:nth-child(3) { aspect-ratio: 1 / 1; }

.hero-curve { position: relative; height: 120px; margin-top: 34px; }
.hero-curve svg { position: absolute; left: -4%; bottom: -2px; width: 112%; height: auto; opacity: .42; pointer-events: none; }

.squiggle-seam { display: block; line-height: 0; margin-top: -1px; }
.squiggle-seam svg { width: 100%; height: 50px; display: block; }

/* ---- value strip: notes pinned along a string ----
   Each fact is a small hand-taped card, alternating tilt and height like
   this is a continuous credential ticker on a dark navy field, closer to a stock
   ticker than a testimonial carousel — flat, aligned, divided by hairlines. */

.slide-band {
    background: var(--navy);
    padding: 1.85rem 0;
    position: relative;
    overflow: hidden;
}

.slide-band::before, .slide-band::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--teal-bright), var(--coral), transparent);
    opacity: .8;
    z-index: 2;
}

.slide-band::before { left: 0; }
.slide-band::after { right: 0; }

.slide-band-wrap {
    overflow: hidden;
    position: relative;
    padding: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.slide-track {
    display: flex;
    align-items: center;
    width: max-content;
    position: relative;
    animation: slide-left 42s linear infinite;
    transform: translateX(0);
}

.slide-band-wrap:hover .slide-track { animation-play-state: paused; }

@keyframes slide-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.slide-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 32px;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    color: #fff;
    border-left: 1px solid rgba(255, 255, 255, .16);
}

.slide-item:first-child { border-left: 0; }

.slide-item-head { display: flex; align-items: center; gap: 9px; }

.slide-item .icon {
    width: 30px;
    height: 30px;
    padding: 7px;
    box-sizing: border-box;
    border-radius: 50%;
    background: rgba(var(--teal-rgb), .18);
    color: var(--teal-bright);
    flex-shrink: 0;
}

.slide-item--highlight .icon { background: rgba(var(--coral-rgb), .22); color: var(--coral-bright); }

.slide-item-tag {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--teal-bright);
    white-space: nowrap;
}

.slide-item--highlight .slide-item-tag { color: var(--coral-bright); }

.slide-item-text {
    color: #fff;
    font-weight: 600;
    font-size: 14.5px;
    white-space: nowrap;
}

@media (max-width: 680px) {
    .slide-item { padding: 0 20px; gap: 9px; }
    .slide-item .icon { width: 26px; height: 26px; padding: 6px; }
    .slide-item-text { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .slide-track { animation: none; }
}

/* ---- image placeholders ---- */

.imgph {
    position: relative;
    background: var(--cream-deep);
    border: 1.5px dashed rgba(var(--navy-rgb), .28);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--slate);
}

.imgph .imgph-label {
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--slate);
    text-align: center;
    padding: 10px 14px;
}

.imgph .imgph-label small {
    display: block;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    font-size: 11.5px;
    margin-top: 4px;
    opacity: .75;
}

.imgstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.imgstrip .imgph { aspect-ratio: 4 / 5; }

/* ---- services: numbered row list ----
   A flat, consulting-firm-style ledger of services rather than a card grid:
   big faint index numerals, an accent rail that draws in on hover, and a
   pill CTA that only appears purposeful once you engage a row. */

.services-list {
    margin-top: .5rem;
    border-top: 1px solid rgba(var(--navy-rgb), .14);
}

.service-row {
    display: grid;
    grid-template-columns: 60px 60px 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 2.2rem 1.25rem;
    border-bottom: 1px solid rgba(var(--navy-rgb), .14);
    position: relative;
    transition: background .35s ease, padding-left .35s ease;
}

.service-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--teal-bright);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

.service-row--work::before { background: var(--navy); }
.service-row--sport::before { background: var(--coral); }

.service-row:hover, .service-row:focus-within { background: rgba(var(--navy-rgb), .025); padding-left: 1.9rem; }
.service-row:hover::before, .service-row:focus-within::before { transform: scaleY(1); }

.service-row-index {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: var(--teal-ink);
    opacity: .18;
    transition: opacity .35s ease;
}

.service-row--work .service-row-index { color: var(--navy); }
.service-row--sport .service-row-index { color: var(--coral-ink); }
.service-row:hover .service-row-index { opacity: .34; }

.service-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(var(--teal-rgb), .14);
    color: var(--teal-deep);
    flex-shrink: 0;
}

.service-row-icon svg { width: 24px; height: 24px; }
.service-row--work .service-row-icon { background: rgba(var(--navy-rgb), .08); color: var(--navy); }
.service-row--sport .service-row-icon { background: rgba(var(--coral-rgb), .14); color: var(--coral-ink); }

.service-row-body { min-width: 0; }

.service-row-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--teal-ink);
    margin-bottom: 6px;
}

.service-row--work .service-row-tag { color: var(--navy); }
.service-row--sport .service-row-tag { color: var(--coral-ink); }

.service-row-body h3 { font-size: 22px; margin-bottom: 6px; }
.service-row-body p { font-size: 15.5px; color: var(--slate); max-width: 540px; margin-bottom: 0; }

.service-row-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    color: var(--navy);
    text-decoration: none;
    white-space: nowrap;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1.5px solid rgba(var(--navy-rgb), .16);
    transition: border-color .3s ease, background .3s ease, gap .3s ease;
}

.service-row-link:hover { gap: 12px; border-color: var(--teal-bright); background: rgba(var(--teal-rgb), .08); }
.service-row--work .service-row-link:hover { border-color: var(--navy); background: rgba(var(--navy-rgb), .06); }
.service-row--sport .service-row-link:hover { border-color: var(--coral); background: rgba(var(--coral-rgb), .08); }

.service-row-arrow { width: 16px; height: 16px; flex-shrink: 0; transition: transform .3s ease; }
.service-row-link:hover .service-row-arrow { transform: translateX(3px); }

@media (max-width: 860px) {
    .service-row { grid-template-columns: 44px 1fr; grid-template-areas: "index icon" "body body" "link link"; row-gap: 14px; padding: 1.9rem 1rem; }
    .service-row-index { grid-area: index; font-size: 30px; align-self: start; }
    .service-row-icon { grid-area: icon; justify-self: end; }
    .service-row-body { grid-area: body; }
    .service-row-link { grid-area: link; justify-self: start; }
    .service-row:hover, .service-row:focus-within { padding-left: 1rem; }
}

/* ---- profile split: athlete / employer stories ----
   An editorial two-column feature — captioned photo, an overlapping
   pull-quote card with a named attribution, alternating sides between
   the two sections instead of a repeated "photo + testimonial" block. */

.story-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 64px;
    align-items: center;
}

.story-grid--reverse .story-media { order: -1; }

@media (max-width: 940px) {
    .story-grid--reverse .story-media { order: 0; }
}

.story-copy h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 16px; }
.story-copy p { color: var(--slate); margin-bottom: 16px; }
.on-navy .story-copy p { color: var(--on-dark-muted); }

.story-media { position: relative; }

.story-photo {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

@media (max-width: 940px) {
    /* stacked full-width on mobile, the 4:3 ratio ran quite tall (sport &
       employer section photos) — flatter ratio keeps it a supporting visual
       rather than a second hero. */
    .story-photo { aspect-ratio: 16 / 10; }
}

.story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.story-photo-caption {
    position: absolute;
    left: 18px;
    top: 18px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--navy-rgb), .6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 7px 14px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
}

.story-photo-caption::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-bright); flex-shrink: 0; }
.story-photo--coral .story-photo-caption::before { background: var(--coral); }

.story-quote {
    position: relative;
    z-index: 2;
    margin: -54px 8% 0 auto;
    width: 80%;
    border-radius: 20px;
    padding: 2rem 2.1rem 1.8rem;
    box-shadow: 0 24px 46px -24px rgba(0, 0, 0, .5);
    overflow: hidden;
}

.story-quote--teal { background: var(--cream); color: var(--navy); border-left: 4px solid var(--teal-bright); margin-left: 0; margin-right: 8%; }

.story-quote--coral { background: var(--navy); color: var(--cream); border-left: 4px solid var(--coral); margin-left: 8%; margin-right: 0; }

/* Real icon lockup above the pull-quote (matches the client's own prototype
   "quotecard" treatment) — dark variant on the light --teal card, light
   variant on the dark --coral card, picked per instance in the template. */
.story-quote-mark { position: relative; z-index: 1; display: block; width: 34px; height: auto; margin-bottom: 14px; }

.story-quote blockquote {
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 18px;
    border: 0;
    padding: 0;
    position: relative;
    z-index: 1;
    color: inherit;
}

.story-quote-attr { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }

.story-quote-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    background: rgba(var(--teal-rgb), .16);
    color: var(--teal-deep);
    flex-shrink: 0;
}

.story-quote--coral .story-quote-avatar { background: rgba(var(--coral-rgb), .24); color: var(--coral-bright); }

.story-quote cite {
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .72;
}

@media (max-width: 940px) {
    .story-quote { margin: -40px auto 0; width: 90%; }
    .story-quote--teal, .story-quote--coral { margin-left: auto; margin-right: auto; }
}

@media (max-width: 560px) {
    .story-quote { width: 100%; margin-top: -32px; padding: 1.7rem 1.7rem 1.5rem; }
    .story-quote blockquote { font-size: 16.5px; }
}

/* ---- comparison dashboard ---- */

.compare-section { padding-top: 2.5rem; padding-bottom: 3rem; }

.compare-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
    margin-top: 2rem;
}

.compare-panel {
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,248,250,0.96));
    border: 1px solid rgba(var(--navy-rgb), 0.08);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 30px 45px rgba(9, 42, 66, 0.05);
    min-height: 290px;
}

.compare-panel--nexo { border-color: rgba(16, 96, 117, 0.14); }
.compare-panel--diy { border-color: rgba(107, 22, 22, 0.12); }

.compare-panel .eyebrow {
    display: inline-flex;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    color: var(--teal-ink);
}

.compare-panel h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    max-width: 18rem;
}

.compare-panel p {
    color: var(--slate);
    line-height: 1.7;
    max-width: 34rem;
    margin-bottom: 1.5rem;
}

.compare-list {
    display: grid;
    gap: 0.85rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.compare-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--slate);
}

.compare-list li::before {
    content: '\2713';
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    justify-content: center;
    align-items: center;
    border-radius: 0.65rem;
    background: rgba(var(--teal-rgb), 0.16);
    color: var(--teal-deep);
    font-size: 0.95rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.compare-list--muted li::before {
    background: rgba(194, 75, 75, 0.14);
    color: #8f2121;
}

.compare-architecture {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.compare-card {
    background: #fff;
    border: 1px solid rgba(var(--navy-rgb), 0.08);
    border-radius: 1.3rem;
    padding: 1.75rem;
    box-shadow: 0 20px 36px rgba(9, 42, 66, 0.04);
    transform: translateY(0);
    opacity: 0;
    animation: fade-up 0.8s ease forwards;
}

.compare-card:nth-child(1) { animation-delay: 0.1s; }
.compare-card:nth-child(2) { animation-delay: 0.2s; }
.compare-card:nth-child(3) { animation-delay: 0.3s; }
.compare-card:nth-child(4) { animation-delay: 0.4s; }
.compare-card:nth-child(5) { animation-delay: 0.5s; }
.compare-card:nth-child(6) { animation-delay: 0.6s; }

.compare-card__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.compare-card__header strong {
    font-size: 1rem;
    letter-spacing: 0.01em;
}

.compare-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.compare-pill--positive { background: rgba(var(--teal-rgb), 0.14); color: var(--teal-deep); }
.compare-pill--negative { background: rgba(var(--coral-rgb), 0.12); color: #a22d29; }

.compare-card p {
    color: var(--slate);
    line-height: 1.75;
    font-size: 0.95rem;
    margin: 0;
}

.compare-note {
    color: var(--slate);
    font-size: 0.95rem;
    max-width: 68rem;
    margin-top: 1.75rem;
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 940px) {
    .compare-summary, .compare-architecture { grid-template-columns: 1fr; }
    .compare-panel { min-height: auto; }
}

@media (max-width: 640px) {
    .compare-panel { padding: 1.6rem; }
    .compare-card { padding: 1.4rem; }
}

/* ---- DIY vs Nexo: two parallel cards ----
   Rather than a row-by-row split table, each path gets its own full card —
   Nexo's reads confident and outlined, the DIY one visibly quieter and
   dashed, so the contrast is felt before a single word is read. */

.compare-columns {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 1.75rem;
    align-items: start;
    margin-top: 2.25rem;
}

.compare-col {
    border-radius: 24px;
    padding: 1.85rem 1.9rem 0.5rem;
}

.compare-col--nexo {
    background: #fff;
    border: 2px solid var(--navy);
    box-shadow: 0 20px 40px -22px rgba(5, 31, 48, .35);
    transform: rotate(-0.5deg);
}

.compare-col--diy {
    background: var(--cream-deep);
    border: 2px dashed rgba(var(--navy-rgb), .25);
    transform: rotate(0.6deg);
}

.compare-col-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    margin: 0 0 1.1rem;
}

.compare-col--nexo .compare-col-tag { background: var(--teal-deep); color: #fff; }
.compare-col--diy .compare-col-tag { background: transparent; color: var(--slate); border: 1.5px dashed rgba(var(--navy-rgb), .3); }

.compare-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid rgba(var(--navy-rgb), 0.08);
}

.compare-col--diy .compare-row { border-bottom-color: rgba(var(--navy-rgb), 0.14); }
.compare-row:last-child { border-bottom: 0; }
.compare-row--plain { padding-left: calc(26px + 0.85rem); }

.compare-row-topic {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal-ink);
    margin: 0 0 0.3rem;
}

.compare-col--diy .compare-row-topic { color: var(--slate); }

.compare-row-body p:last-child { margin: 0; font-size: 15px; line-height: 1.5; color: var(--navy); font-weight: 600; }
.compare-col--diy .compare-row-body p:last-child { color: var(--slate); font-weight: 400; }

.lane-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.lane-mark .icon { width: 14px; height: 14px; }

.lane-mark--seal {
    background: var(--teal-deep);
    color: #fff;
    transform: rotate(-8deg);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
}

.lane-mark--void {
    border: 1.5px dashed rgba(var(--navy-rgb), 0.22);
    color: #b7bec3;
    transform: rotate(6deg);
}

@media (max-width: 780px) {
    .compare-columns { grid-template-columns: 1fr; }
    .compare-col--nexo, .compare-col--diy { transform: none; }
}

/* ---- visa index ---- */

.section-teal { background: var(--teal); color: var(--navy); }
.section-teal h2 { color: var(--navy); }
.section-teal .eyebrow { color: var(--navy); opacity: .68; }

.visas { columns: 3; column-gap: 34px; margin-bottom: 38px; }
.visas li {
    list-style: none;
    padding: 11px 0 11px 18px;
    position: relative;
    border-bottom: 1px solid rgba(var(--navy-rgb), .16);
    font-size: 15.5px;
    color: var(--navy);
    break-inside: avoid;
}
.visas li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--navy);
}
.visas li:nth-child(odd)::before { background: var(--coral); }
.visa-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.visa-foot p { font-size: 18px; color: var(--navy); font-weight: 600; }

@media (max-width: 940px) { .visas { columns: 2; } }
@media (max-width: 560px) { .visas { columns: 1; } }

@media (max-width: 940px) and (min-width: 640px) {
    .f2-top { grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 36px; }
    .f2-col { margin-top: 12px; }
}

@media (max-width: 768px) {
    .f2-top { grid-template-columns: 1fr; gap: 18px; padding-bottom: 28px; }
}

/* ----------------------------------- footer v2 ----------------------------------- */

.footer2 { background: var(--warm-navy); color: var(--cream); padding: 3rem 0 1.5rem; font-size: 14.5px; }
.f2-top { display: grid; grid-template-columns: 1.45fr .85fr .85fr .85fr 1.1fr; gap: 36px; padding-bottom: 40px; }
.f2-brand .logo { display: flex; margin-bottom: 4px; }
.f2-brand .logo img { height: 50px; width: auto; }
.f2-col h4, .f2-social h4, .f2-contact-col h4 { font-family: var(--font-display); font-size: 15.5px; font-weight: 800; color: var(--teal-bright); margin-bottom: 16px; }
.f2-brand .f2-contact-col { margin-top: 18px; }
.f2-col a { display: block; text-decoration: none; color: var(--on-dark-muted); font-size: 14.5px; padding: 6px 0; }
.f2-col a:hover { color: var(--cream); }
.f2-social .social-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.f2-social .social-item {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    font-size: 14.5px;
    color: var(--on-dark-muted);
    transition: color 0.15s ease;
}

.f2-social .social-item:hover { color: var(--cream); }

.f2-social .social-item .icon {
    display: inline-flex;
    width: 1.35rem;
    height: 1.35rem;
    justify-content: center;
    align-items: center;
    color: var(--teal-bright);
    flex-shrink: 0;
}

.f2-social .social-item:hover .icon { color: var(--cream); }

.f2-contact-col .contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 12px;
    color: var(--cream);
}
.f2-contact-col .contact-icon {
    display: inline-flex;
    width: 1.7rem;
    height: 1.7rem;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
}

.f2-contact-col .contact-icon svg { width: 15px; height: 15px; }
.f2-contact-col .contact-link { color: var(--cream); text-decoration: none; }
.f2-contact-col .contact-link:hover { text-decoration: underline; }
.f2-contact-col span { color: var(--on-dark-muted); line-height: 1.6; }

.f2-social .social-details { display: none; }

.f2-social .social-details p { margin: 0 0 0.55rem; }

.f2-bottom { border-top: 1px solid var(--on-dark-faint); padding: 22px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--on-dark-muted); opacity: .8; }
.f2-bottom a { text-decoration: none; color: var(--on-dark-muted); }
.f2-bottom a:hover { color: var(--teal); }
.f2-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.f2-copy-group { display: flex; gap: 14px; flex-wrap: wrap; }
.f2-agent { padding-left: 14px; border-left: 1px solid var(--on-dark-faint); }
.footer2 .disclaimer { padding-bottom: 30px; }

@media (max-width: 940px) {
    .f2-top { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}

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


/* ==========================================================================
   Landing v2 — editorial layer (Matilda-inspired presentation, Nexo brand)
   Scope: everything below only applies inside the .lp wrapper that the home
   template adds around its content. Other pages keep the original styles.
   Principles: oversized confident type, contained measure, calm white/cream
   rhythm, flat cards (no tilt), one dark block, 200ms motion.
   ========================================================================== */

.lp {
    /* Same Primary grotesque as --font-body/--font-display elsewhere — see
       the note on those tokens above. Buttons are unaffected: .btn/.cta use
       --font-btn, never --lp-font. */
    --lp-font: 'Lota Grotesque Alt3', 'Hanken Grotesk', 'Figtree', 'Segoe UI', sans-serif;
    --lp-muted: #46606d;
    --lp-line: rgba(var(--navy-rgb), .1);
    --lp-r-lg: 22px;
    --lp-r-md: 14px;
    --lp-r-sm: 10px;
    --lp-shadow: 0 2px 5px rgba(var(--navy-rgb), .05), 0 26px 52px -30px rgba(var(--navy-rgb), .18);
    --lp-fast: 150ms;
    --lp-ease: cubic-bezier(.4, 0, .2, 1);
    font-family: var(--lp-font);
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--navy);
}

/* contained editorial measure instead of full-bleed 6rem gutters */
.lp .wrap { max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.25rem); }

.lp h1, .lp h2, .lp h3, .lp h4 {
    font-family: var(--lp-font);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.lp section { padding: 6.75rem 0; }

.lp .sec-head { max-width: 740px; margin-bottom: 3.25rem; }
.lp .sec-head h2, .lp section > .wrap > h2 { font-size: clamp(2.1rem, 4.4vw, 3.25rem); margin-bottom: .7rem; }
.lp .sec-head p { font-size: 1.14rem; color: var(--lp-muted); margin-bottom: 0; max-width: 58ch; }

.lp .eyebrow {
    font-family: var(--lp-font);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .15em;
    color: var(--coral-ink);
}

.lp .lede { color: var(--lp-muted); }

/* buttons: the global .btn is now this same rounded rectangle, so the landing
   scope only re-states the transition timing tokens it owns. Font stays on
   --font-btn (Fraunces), same as the nav's "Book a Consultation" — this used
   to override it to --lp-font, which is the bug we're fixing. */
.lp .btn, .lp .cta {
    transition: transform var(--lp-fast) var(--lp-ease), background var(--lp-fast) var(--lp-ease), border-color var(--lp-fast) var(--lp-ease), box-shadow var(--lp-fast) var(--lp-ease);
}

/* --------------------------- credential strip ----------------------------- */

.lp .slide-band {
    background: #fff;
    border-top: 1px solid var(--lp-line);
    border-bottom: 1px solid var(--lp-line);
    padding: 1.1rem 0;
}

.lp .slide-band::before, .lp .slide-band::after { display: none; }

.lp .slide-band-wrap { max-width: none; padding: 0; }

.lp .slide-item { color: var(--navy); border-left-color: var(--lp-line); }
.lp .slide-item .icon { background: rgba(var(--teal-rgb), .14); color: var(--teal-ink); }
.lp .slide-item--highlight .icon { background: rgba(var(--coral-rgb), .14); color: var(--coral-ink); }

.lp .slide-item-tag {
    font-family: var(--lp-font);
    font-size: .68rem;
    letter-spacing: .14em;
    color: var(--teal-ink);
}

.lp .slide-item--highlight .slide-item-tag { color: var(--coral-ink); }
.lp .slide-item-text { color: var(--navy); font-weight: 600; font-size: .94rem; }

/* ------------------------------ services list ----------------------------- */

.lp #paths { background: #fff; padding-top: clamp(1.75rem, 2.5vw, 2.5rem); }

.lp .services-list, .lp .service-row { border-color: var(--lp-line); }

.lp .service-row { padding: 2.6rem 1.5rem; gap: 32px; }

.lp .service-row:hover, .lp .service-row:focus-within { background: rgba(var(--navy-rgb), .02); padding-left: 2.1rem; }

.lp .service-row-index {
    font-family: var(--lp-font);
    font-weight: 800;
    font-size: 44px;
    color: var(--navy);
    opacity: .12;
}

.lp .service-row--work .service-row-index, .lp .service-row--sport .service-row-index { color: var(--navy); }
.lp .service-row:hover .service-row-index { opacity: .26; }

.lp .service-row-icon { border-radius: var(--lp-r-md); }

.lp .service-row-tag {
    font-family: var(--lp-font);
    font-size: .72rem;
    letter-spacing: .14em;
    margin-bottom: 8px;
}

.lp .service-row-body h3 { font-size: 1.75rem; margin-bottom: 8px; }
.lp .service-row-body p { font-size: 1.04rem; color: var(--lp-muted); max-width: 56ch; }

.lp .service-row-link {
    border-radius: var(--lp-r-sm);
    border-color: rgba(var(--navy-rgb), .18);
    font-weight: 600;
    transition: border-color var(--lp-fast) var(--lp-ease), background var(--lp-fast) var(--lp-ease), gap var(--lp-fast) var(--lp-ease);
}

.lp .pullquote { border-top-color: var(--lp-line); }
.lp .pullquote blockquote { font-weight: 800; letter-spacing: -.025em; }
.lp .pullquote cite { color: var(--lp-muted); }

/* ------------------------- story sections (flat) -------------------------- */

.lp .on-navy { background: var(--navy); }

.lp .story-copy h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.lp .story-copy p { color: var(--lp-muted); font-size: 1.05rem; }
.lp .on-navy .story-copy p { color: var(--on-dark-muted); }

.lp .story-photo { border-radius: var(--lp-r-lg); }

.lp .story-quote {
    border-radius: var(--lp-r-md);
    box-shadow: var(--lp-shadow);
}

.lp .story-quote--teal { background: #fff; border-left-width: 3px; }

.lp .story-quote blockquote { font-family: 'RF Dewi', var(--lp-font); font-weight: 700; }

.lp .story-photo-caption { font-family: var(--lp-font); letter-spacing: .08em; }

/* ------------------------------ route section ----------------------------- */

.lp .route, .lp .route-dashboard { background: #fff; padding: 6.75rem 0; }

.lp .route-copy-card, .lp .route-map-card {
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-r-lg);
    transform: none;
    box-shadow: var(--lp-shadow);
    padding: 2.4rem;
}

.lp .route-copy-icon { border-radius: var(--lp-r-md); color: var(--teal-ink); }

.lp .route-copy-eyebrow { font-family: var(--lp-font); color: var(--teal-ink); }

.lp .route-copy-card h3 { font-size: clamp(1.7rem, 2.4vw, 2.15rem); letter-spacing: -.03em; }

.lp .route-copy-lead { color: var(--lp-muted); line-height: 1.7; }

.lp .route-feature-list li { color: var(--lp-muted); }

.lp .route-feature-list li::before {
    border-radius: 3px;
    width: .7rem;
    height: .7rem;
    box-shadow: none;
    background: var(--teal-ink);
}

.lp .route-feature-list li:nth-child(2)::before { background: var(--coral); box-shadow: none; }

.lp .route-status .status-pill,
.lp .route-status .status-step { font-family: var(--lp-font); }

.lp .route-stage-num {
    border-radius: 50%;
    border: 0;
    background: var(--navy);
    color: #fff;
    font-family: var(--lp-font);
    font-weight: 800;
    width: 46px;
    height: 46px;
}

.lp .route-stage .route-stage-num { background: var(--navy); }
.lp .route-stage p { color: var(--lp-muted); }

/* ------------------------------- comparison ------------------------------- */

.lp .compare-section { padding: 6.75rem 0; }

.lp .compare-col { border-radius: var(--lp-r-lg); transform: none; padding: 2.1rem 2.1rem .7rem; }

.lp .compare-col--nexo {
    border: 1px solid rgba(var(--navy-rgb), .16);
    box-shadow: var(--lp-shadow);
    transform: none;
}

.lp .compare-col--diy {
    background: transparent;
    border: 1px dashed rgba(var(--navy-rgb), .26);
    transform: none;
}

.lp .compare-col-tag {
    font-family: var(--lp-font);
    font-size: .72rem;
    letter-spacing: .14em;
    border-radius: 8px;
}

.lp .compare-row { border-bottom-color: var(--lp-line); padding: 1.05rem 0; }

.lp .compare-row-topic {
    font-family: var(--lp-font);
    font-size: .7rem;
    letter-spacing: .12em;
}

.lp .compare-row-body p:last-child { font-size: .98rem; }

.lp .lane-mark--seal { transform: none; box-shadow: none; background: var(--teal-ink); }
.lp .lane-mark--void { transform: none; }

.lp .compare-note { color: var(--lp-muted); }

/* --------------------------------- pillars -------------------------------- */

.lp .why-lead { font-family: var(--lp-font); font-size: clamp(1.9rem, 3.8vw, 2.9rem); letter-spacing: -.03em; max-width: 30ch; }
.lp .why-body { color: var(--lp-muted); }

.lp .pillar::before { border-radius: 3px; width: 36px; height: 4px; }

.lp .pillar h3, .lp .pillar:nth-child(2) h3, .lp .pillar:nth-child(3) h3 { color: var(--navy); font-size: 1.25rem; }
.lp .pillar p { color: var(--lp-muted); font-size: 1rem; }

/* --------- FAQ (Matilda reference: heading left, flat accordion right) ------ */

.lp .faq-split {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) 1.2fr;
    gap: 3rem 4.5rem;
    align-items: start;
}

/* settles vertically centered in the viewport while the questions scroll.
   The offset is computed from the viewport (50vh minus roughly half the
   intro's height) instead of a translateY(-50%) pull, so at rest the intro
   stays in its natural spot — it never rides up into the section above or
   the header rim. */
.lp .faq-intro { position: sticky; top: max(6.5rem, calc(50vh - 15rem)); }
.lp .faq-intro.reveal { transform: translateY(26px); }
.lp .faq-intro.reveal.in-view { transform: none; }

.lp .faq-intro h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 3.8vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: -.01em;
    max-width: 12ch;
    margin-bottom: .9rem;
}

.lp .faq-intro p { color: var(--lp-muted); font-size: 1.08rem; line-height: 1.65; max-width: 30ch; margin-bottom: 0; }

.lp .faq-flat { border-top: 1px solid rgba(var(--navy-rgb), .14); }

.lp .faq-group-label {
    display: block;
    margin: 2.4rem 0 .3rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--teal-ink);
}

.lp .faq-flat .faq-group-label:first-child { margin-top: 1.4rem; }

.lp .faq-item { border-bottom: 1px solid rgba(var(--navy-rgb), .14); }

.lp .faq-item summary {
    font-family: var(--lp-font);
    font-weight: 600;
    font-size: 1.13rem;
    letter-spacing: -.01em;
    line-height: 1.45;
    color: var(--navy);
    padding: 1.5rem 3.25rem 1.5rem 0;
    transition: color var(--lp-fast) var(--lp-ease);
}

.lp .faq-item summary:hover { color: var(--teal-ink); }

/* thin stroke chevron, as in the reference, instead of the circled glyph */
.lp .faq-item summary .faq-toggle {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: var(--navy);
}

.lp .faq-item summary .faq-toggle::before {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1.5px, -1.5px);
    transition: transform var(--lp-fast) var(--lp-ease);
}

.lp .faq-item.is-open summary .faq-toggle { background: transparent; color: var(--navy); }
.lp .faq-item.is-open summary .faq-toggle::before { transform: rotate(225deg) translate(-1.5px, -1.5px); }

.lp .faq-answer { color: var(--lp-muted); font-size: 1rem; line-height: 1.7; padding-right: 3.25rem; max-width: 60ch; }

@media (max-width: 940px) {
    .lp .faq-split { grid-template-columns: 1fr; gap: 2rem; }
    .lp .faq-intro { position: static; }
    .lp .faq-intro.reveal { transform: translateY(26px); }
    .lp .faq-intro.reveal.in-view { transform: none; }
    .lp .faq-intro h2, .lp .faq-intro p { max-width: none; }
}

/* --------------------------------- final CTA --------------------------------
   Reverted to the original section-teal block from the base layer; the .lp
   scope only contributes typography (Hanken Grotesk headings). */

/* ------------------------------ scroll reveal ------------------------------ */

.lp .reveal { transform: translateY(26px); transition: opacity .4s var(--lp-ease), transform .4s var(--lp-ease); }
.lp .reveal.in-view { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .lp .reveal { transition: none; transform: none; }
}

/* -------------------------------- responsive ------------------------------- */


@media (max-width: 940px) {
    /* gutters come from the shared clamp on .wrap — only vertical rhythm shifts */
    .lp section, .lp .route, .lp .route-dashboard, .lp .compare-section { padding: 4.5rem 0; }
}

@media (max-width: 560px) {
    .lp section, .lp .route, .lp .route-dashboard, .lp .compare-section { padding: 3.75rem 0; }
}

@media (max-width: 560px) {
    .lp .faq-item summary { font-size: 1.05rem; padding-right: 2.6rem; }
    .lp .faq-answer { padding-right: 1rem; }
}

/* ===== Editorial Ledger — "Every visa we work with" ===== */

.lp .vx-ledger-sec{
  background:#fff;
  padding:clamp(84px,9vw,132px) 0;
  border-top:1px solid var(--lp-line);
  border-bottom:1px solid var(--lp-line);
}

/* Asymmetric split: sticky masthead left, ledger right */
.lp .vx-split{
  display:grid;
  grid-template-columns:minmax(280px,360px) minmax(0,1fr);
  gap:clamp(3rem,6vw,6.5rem);
  align-items:start;
}

.lp .vx-head{
  /* clear the sticky site header (~78px) plus breathing room */
  position:sticky;
  top:clamp(8rem,14vh,10rem);
}

.lp .vx-eyebrow{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin:0 0 1.15rem;
  font-family:var(--lp-font);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--teal-ink);
}
.lp .vx-eyebrow::before{
  content:"";
  flex:none;
  width:2.25rem;
  height:2px;
  background:var(--coral);
}

.lp .vx-head h2{
  margin:0;
  font-family:var(--lp-font);
  font-size:clamp(2.5rem,4.6vw,3.9rem);
  line-height:1.04;
  letter-spacing:-.025em;
  font-weight:800;
  color:var(--navy);
  text-wrap:balance;
}

/* Giant outline count — quiet statement of breadth */
.lp .vx-ghost{
  display:block;
  margin-top:clamp(2rem,4vw,3.5rem);
  font-family:var(--lp-font);
  font-size:clamp(8rem,11vw,12rem);
  line-height:.85;
  font-weight:800;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  color:rgba(var(--navy-rgb),.07);
  user-select:none;
  pointer-events:none;
}
@supports ((-webkit-text-stroke:1px #000)){
  .lp .vx-ghost{
    color:transparent;
    -webkit-text-stroke:2px rgba(var(--navy-rgb),.26);
  }
}

/* ===== The ledger ===== */
.lp .vx-ledger{
  list-style:none;
  margin:0;
  padding:0;
  columns:2;
  column-gap:clamp(2.5rem,4vw,4rem);
  column-rule:1px solid var(--lp-line);
}

.lp .vx-row{
  position:relative;
  display:grid;
  grid-template-columns:3.6rem minmax(0,1fr);
  align-items:baseline;
  padding:1.05rem 0;
  border-bottom:1px solid var(--lp-line);
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  transition:padding-left var(--lp-fast) var(--lp-ease);
}

/* accent rail */
.lp .vx-row::before{
  content:"";
  position:absolute;
  left:0;
  top:.9rem;
  bottom:.9rem;
  width:3px;
  background:var(--coral);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform var(--lp-fast) var(--lp-ease);
}

.lp .vx-row:hover{padding-left:.9rem;}
.lp .vx-row:hover::before{transform:scaleY(1);}

/* Oversized faint index numerals */
.lp .vx-num{
  font-family:var(--lp-font);
  font-size:1.85rem;
  line-height:1;
  font-weight:700;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:rgba(var(--navy-rgb),.22);
  transition:color var(--lp-fast) var(--lp-ease);
}
.lp .vx-row:hover .vx-num{color:var(--coral-ink);}

.lp .vx-item{
  font-family:var(--lp-font);
  font-size:1.03rem;
  font-weight:600;
  line-height:1.4;
  color:var(--navy);
  overflow-wrap:break-word;
}

/* ===== Footer of the ledger ===== */
.lp .vx-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem 2.5rem;
  margin-top:clamp(2.2rem,4vw,3.25rem);
  padding-top:1.7rem;
  border-top:2px solid var(--navy);
}
.lp .vx-foot-note{
  margin:0;
  font-family:var(--lp-font);
  font-size:1.05rem;
  font-weight:500;
  line-height:1.5;
  color:var(--lp-muted);
  max-width:36ch;
}

/* ===== Staggered reveal (keys off existing IntersectionObserver) ===== */
.lp .vx-ledger.reveal .vx-row{opacity:0;}
.lp .vx-ledger.reveal.in-view .vx-row{
  animation:vx-row-in .55s var(--lp-ease) both;
}
@keyframes vx-row-in{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:none;}
}
.lp .vx-ledger.reveal.in-view .vx-row:nth-child(1){animation-delay:.05s;}
.lp .vx-ledger.reveal.in-view .vx-row:nth-child(2){animation-delay:.085s;}
.lp .vx-ledger.reveal.in-view .vx-row:nth-child(3){animation-delay:.12s;}
.lp .vx-ledger.reveal.in-view .vx-row:nth-child(4){animation-delay:.155s;}
.lp .vx-ledger.reveal.in-view .vx-row:nth-child(5){animation-delay:.19s;}
.lp .vx-ledger.reveal.in-view .vx-row:nth-child(6){animation-delay:.225s;}
.lp .vx-ledger.reveal.in-view .vx-row:nth-child(7){animation-delay:.26s;}
.lp .vx-ledger.reveal.in-view .vx-row:nth-child(8){animation-delay:.295s;}
.lp .vx-ledger.reveal.in-view .vx-row:nth-child(9){animation-delay:.33s;}
.lp .vx-ledger.reveal.in-view .vx-row:nth-child(10){animation-delay:.365s;}
.lp .vx-ledger.reveal.in-view .vx-row:nth-child(11){animation-delay:.4s;}
.lp .vx-ledger.reveal.in-view .vx-row:nth-child(12){animation-delay:.435s;}
.lp .vx-ledger.reveal.in-view .vx-row:nth-child(13){animation-delay:.47s;}
.lp .vx-ledger.reveal.in-view .vx-row:nth-child(14){animation-delay:.505s;}
.lp .vx-ledger.reveal.in-view .vx-row:nth-child(15){animation-delay:.54s;}
.lp .vx-ledger.reveal.in-view .vx-row:nth-child(16){animation-delay:.575s;}
.lp .vx-ledger.reveal.in-view .vx-row:nth-child(17){animation-delay:.61s;}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .lp .vx-ledger.reveal .vx-row{opacity:1;}
  .lp .vx-ledger.reveal.in-view .vx-row{animation:none !important;}
  .lp .vx-row,
  .lp .vx-row::before,
  .lp .vx-num{transition:none;}
}

/* ===== Responsive ===== */
@media (max-width:1023px){
  .lp .vx-split{grid-template-columns:1fr;gap:2.75rem;}
  .lp .vx-head{position:relative;top:auto;}
  .lp .vx-head h2{position:relative;z-index:1;}
  .lp .vx-ghost{position:absolute;top:-1.1rem;right:0;margin:0;font-size:5.5rem;z-index:0;}
}

@media (max-width:640px){
  .lp .vx-ledger{columns:1;column-rule:none;}
  .lp .vx-row{grid-template-columns:3rem minmax(0,1fr);padding:.95rem 0;}
  .lp .vx-num{font-size:1.5rem;}
  .lp .vx-foot{flex-direction:column;align-items:flex-start;}
}

/* grafts from the judge panel */
.lp .vx-head h2::after { content: '.'; color: var(--coral); }




/* ==========================================================================
   Booking page (.bk) — templates/appointments/book.html
   Scope: every rule below is prefixed .bk, so this page can be colourful and
   image-led without touching the rest of the site. Brand palette only (navy,
   teal, coral, cream) with a warm sky tint for the softer accents.
   ========================================================================== */

.bk {
    --bk-ease: cubic-bezier(.4, 0, .2, 1);
    --bk-fast: 160ms;
    --bk-slow: 320ms;
    --bk-line: rgba(var(--navy-rgb), .1);
    --bk-line-dark: rgba(241, 237, 230, .16);
    --bk-muted: #46606d;
    --bk-sky: #eaf4f7;
    --bk-card: 0 1px 2px rgba(var(--navy-rgb), .05), 0 24px 48px -30px rgba(var(--navy-rgb), .28);
    --bk-card-hover: 0 2px 6px rgba(var(--navy-rgb), .07), 0 34px 60px -28px rgba(var(--navy-rgb), .34);
    --bk-r-lg: 24px;
    --bk-r-md: 16px;
    --bk-r-sm: 11px;
    color: var(--navy);
}

/* every inline <svg><use> in this page sizes to its box */
.bk svg { width: 100%; height: 100%; display: block; }

/* ...except the shared eyebrow brand mark, which isn't in a sized icon box
   like the others here and would otherwise stretch to fill its text line. */
.bk .eyebrow-mark { width: 18px; height: auto; }

/* ------------------------------- primitives ------------------------------- */

.bk .bk-sec-head { max-width: 720px; margin-bottom: 3rem; }
.bk .bk-sec-head h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); margin: .55rem 0 .7rem; }
.bk .bk-sec-head p { font-size: 1.1rem; color: var(--bk-muted); margin: 0; }
.bk .bk-sec-head--dark h2 { color: var(--cream); }
.bk .bk-sec-head--dark p { color: var(--on-dark-muted); }
.bk .bk-sec-head--dark .eyebrow { color: var(--teal-bright); }

/* icon chips — three tints so sections don't all read teal */
.bk .bk-i-teal { background: rgba(var(--teal-rgb), .15); color: var(--teal-ink); }
.bk .bk-i-coral { background: rgba(var(--coral-rgb), .15); color: var(--coral-ink); }
.bk .bk-i-sky { background: rgba(var(--navy-rgb), .08); color: var(--navy); }

.bk .bk-tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.bk .bk-tick-list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .97rem; color: var(--bk-muted); line-height: 1.5; }
.bk .bk-tick-list li svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: .28rem; color: var(--teal); }

/* staggered children: the container itself stops animating, each child fades
   up on its own delay once the shared .reveal observer fires */
.bk .bk-stagger.reveal { opacity: 1; transform: none; }
.bk .bk-stagger > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--bk-slow) var(--bk-ease), transform var(--bk-slow) var(--bk-ease);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.bk .bk-stagger.in-view > * { opacity: 1; transform: none; }

/* shared button flourishes: a light sweep on hover and an arrow that steps out */
.bk .bk-btn-shine { position: relative; overflow: hidden; }
.bk .bk-btn-shine::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
    transform: skewX(-18deg);
    transition: left var(--bk-slow) var(--bk-ease);
}
.bk .bk-btn-shine:hover::after { left: 115%; }
.bk .bk-btn-arrow { width: 17px; height: 17px; flex: 0 0 17px; transition: transform var(--bk-fast) var(--bk-ease); }
.bk .bk-btn-shine:hover .bk-btn-arrow { transform: translateX(4px); }
.bk .bk-btn-wa { width: 18px; height: 18px; flex: 0 0 18px; }

/* ---------------------------------- hero ---------------------------------- */

.bk-hero {
    position: relative;
    background: var(--warm-navy);
    color: var(--cream);
    padding: 5.5rem 0 0;
    overflow: hidden;
}

/* faint dotted field behind the hero, same motif as .dot-grid elsewhere */
.bk-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(241, 237, 230, .16) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: .5;
    pointer-events: none;
}

.bk-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 3.5rem;
    align-items: center;
}

.bk .bk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--teal-bright);
    background: rgba(var(--teal-rgb), .14);
    border: 1px solid rgba(var(--teal-rgb), .3);
    border-radius: 999px;
    padding: .42rem .95rem;
}
.bk .bk-eyebrow-icon { width: 15px; height: 15px; flex: 0 0 15px; }

.bk-hero-copy h1 {
    font-size: clamp(2.4rem, 4.8vw, 4rem);
    color: var(--cream);
    margin: 1.1rem 0 1rem;
}

.bk .bk-accent {
    background: linear-gradient(96deg, var(--teal-bright), #9fdcea);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bk .bk-lede {
    font-size: clamp(1.02rem, 1.4vw, 1.14rem);
    color: var(--on-dark-muted);
    max-width: 52ch;
    margin: 0 0 2rem;
}

.bk-hero-points { list-style: none; margin: 0 0 2.1rem; padding: 0; display: grid; gap: .7rem; }
.bk-hero-points li {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: rgba(241, 237, 230, .05);
    border: 1px solid var(--bk-line-dark);
    border-radius: var(--bk-r-md);
    padding: .75rem .95rem;
    transition: background var(--bk-fast) var(--bk-ease), border-color var(--bk-fast) var(--bk-ease), transform var(--bk-fast) var(--bk-ease);
}
.bk-hero-points li:hover { background: rgba(241, 237, 230, .09); border-color: rgba(241, 237, 230, .3); transform: translateX(4px); }
.bk-hero-points strong { display: block; font-size: .98rem; color: var(--cream); font-weight: 700; }
.bk-hero-points em { display: block; font-style: normal; font-size: .86rem; color: var(--on-dark-muted); }

.bk .bk-point-icon,
.bk .bk-float-icon,
.bk .bk-rail-icon,
.bk .bk-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 12px;
}
.bk .bk-point-icon { width: 38px; height: 38px; padding: 9px; }
.bk-hero-points .bk-i-sky { background: rgba(241, 237, 230, .12); color: var(--cream); }

.bk-hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; }

.bk .bk-live { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--on-dark-muted); margin: 0 0 3.5rem; }
.bk .bk-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: bk-pulse 2.4s infinite; flex: 0 0 9px; }

@keyframes bk-pulse {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
    70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* photo collage: a lead shot with a second, smaller frame overlapping it from
   the right, plus two cards floating off the edges */
.bk-collage {
    position: relative;
    padding: 1rem 0 3rem;
}

.bk .bk-photo {
    position: relative;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(241, 237, 230, .22);
    box-shadow: 0 30px 55px -26px rgba(0, 0, 0, .6);
}
.bk .bk-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--bk-ease); }
.bk .bk-photo:hover img { transform: scale(1.06); }

.bk .bk-photo--lead { width: 88%; aspect-ratio: 16 / 10.5; animation: bk-float 7s ease-in-out infinite; }
.bk .bk-photo--trail { width: 62%; aspect-ratio: 4 / 3; margin: -18% 0 0 auto; animation: bk-float 7s ease-in-out infinite 1.1s; }

/* caption sits top-left so the overlapping frame can't cover it */
.bk .bk-photo figcaption {
    position: absolute;
    left: 12px;
    top: 12px;
    max-width: calc(100% - 24px);
    width: max-content;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--cream);
    background: rgba(5, 31, 48, .62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 9px;
    padding: .4rem .6rem;
}

@keyframes bk-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

.bk .bk-float-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .7rem;
    background: #fff;
    color: var(--navy);
    border-radius: 14px;
    padding: .7rem .9rem;
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .55);
    animation: bk-float 6s ease-in-out infinite;
}
.bk .bk-float-card strong { display: block; font-size: .88rem; font-weight: 700; }
.bk .bk-float-card em { display: block; font-style: normal; font-size: .78rem; color: var(--bk-muted); }
.bk .bk-float-icon { width: 32px; height: 32px; padding: 7px; background: rgba(var(--teal-rgb), .15); color: var(--teal-ink); }

.bk .bk-float-card--seal { left: -18px; bottom: 2.2rem; animation-delay: .4s; }
.bk .bk-float-card--slot { right: -14px; top: 8%; animation-delay: 1.4s; }

.bk-hero-curve { position: relative; z-index: 2; height: 110px; margin-top: 1rem; }
.bk-hero-curve svg { position: absolute; left: -4%; bottom: -2px; width: 112%; height: auto; opacity: .9; }

/* ----------------------------- consultation types ----------------------------- */

.bk-types { background: var(--cream); padding: 5.5rem 0 5rem; }

.bk-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }

.bk .bk-type-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-r-lg);
    overflow: hidden;
    box-shadow: var(--bk-card);
    transition: transform var(--bk-fast) var(--bk-ease), box-shadow var(--bk-fast) var(--bk-ease), border-color var(--bk-fast) var(--bk-ease);
}
.bk .bk-type-card:hover { transform: translateY(-5px); box-shadow: var(--bk-card-hover); }
.bk .bk-type-card--migration:hover { border-color: rgba(var(--teal-rgb), .5); }
.bk .bk-type-card--study:hover { border-color: rgba(var(--coral-rgb), .45); }

/* selected state, set by the picker buttons and the radios in the form */
.bk .bk-type-card.is-picked { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .18), var(--bk-card-hover); }
.bk .bk-type-card--study.is-picked { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(var(--coral-rgb), .18), var(--bk-card-hover); }

.bk .bk-type-photo { position: relative; margin: 0; aspect-ratio: 16 / 8.4; overflow: hidden; }
.bk .bk-type-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--bk-ease); }
.bk .bk-type-card:hover .bk-type-photo img { transform: scale(1.07); }
.bk .bk-type-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--navy-rgb), .05) 0%, rgba(var(--navy-rgb), .55) 100%);
}

.bk .bk-type-tag {
    position: absolute;
    z-index: 2;
    left: 14px;
    bottom: 13px;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(255, 255, 255, .94);
    color: var(--navy);
    border-radius: 999px;
    padding: .38rem .8rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.bk .bk-type-tag svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--teal-ink); }
.bk .bk-type-card--study .bk-type-tag svg { color: var(--coral-ink); }

.bk .bk-type-body { padding: 1.6rem 1.6rem 1.4rem; flex: 1; }
.bk .bk-type-icon { width: 44px; height: 44px; padding: 10px; margin-bottom: .9rem; background: rgba(var(--teal-rgb), .14); color: var(--teal-ink); }
.bk .bk-type-card--study .bk-type-icon { background: rgba(var(--coral-rgb), .14); color: var(--coral-ink); }
.bk .bk-type-body h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.bk .bk-type-body > p { color: var(--bk-muted); margin: 0 0 1.2rem; font-size: 1rem; }
.bk .bk-type-card--study .bk-tick-list li svg { color: var(--coral); }

.bk .bk-type-pick {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    margin: 0;
    padding: 1.05rem 1.6rem;
    background: var(--bk-sky);
    border: 0;
    border-top: 1px solid var(--bk-line);
    font-family: var(--font-body);
    font-size: .98rem;
    font-weight: 700;
    color: var(--navy);
    text-align: left;
    cursor: pointer;
    transition: background var(--bk-fast) var(--bk-ease), color var(--bk-fast) var(--bk-ease);
}
.bk .bk-type-pick:hover { background: var(--teal-ink); color: #fff; }
.bk .bk-type-card--study .bk-type-pick:hover { background: var(--btn-red); color: #fff; }
.bk .bk-pick-arrow { width: 19px; height: 19px; flex: 0 0 19px; transition: transform var(--bk-fast) var(--bk-ease); }
.bk .bk-type-pick:hover .bk-pick-arrow { transform: translateX(5px); }
/* picked state: the footer button fills with the card's accent instead of
   growing a stray tick at the far end of a space-between row */
.bk .bk-type-pick[aria-pressed="true"] { background: var(--teal-ink); color: #fff; }
.bk .bk-type-card--study .bk-type-pick[aria-pressed="true"] { background: var(--btn-red); color: #fff; }

/* sport aside */
.bk .bk-aside {
    display: grid;
    grid-template-columns: 132px 1fr auto;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.75rem;
    padding: 1.1rem 1.5rem 1.1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-r-lg);
}
.bk .bk-aside-photo { margin: 0; border-radius: var(--bk-r-md); overflow: hidden; aspect-ratio: 16 / 10; }
.bk .bk-aside-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--bk-ease); }
.bk .bk-aside:hover .bk-aside-photo img { transform: scale(1.08); }
.bk .bk-aside h4 { font-size: 1.14rem; margin-bottom: .3rem; }
.bk .bk-aside p { margin: 0; color: var(--bk-muted); font-size: .96rem; max-width: 62ch; }

.bk .bk-aside-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: .95rem;
    color: var(--teal-ink);
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 2px;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--bk-fast) var(--bk-ease);
}
.bk .bk-aside-link:hover { background-size: 100% 1.5px; }
.bk .bk-aside-link svg { width: 17px; height: 17px; flex: 0 0 17px; transition: transform var(--bk-fast) var(--bk-ease); }
.bk .bk-aside-link:hover svg { transform: translateX(4px); }

/* ------------------------------- form + rail ------------------------------- */

.bk-form-sec { background: #fff; padding: 5.5rem 0; scroll-margin-top: 90px; }

.bk-form-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 2.5rem; align-items: start; }

.bk .bk-form-card {
    background: #fff;
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-r-lg);
    box-shadow: var(--bk-card);
    overflow: hidden;
}

.bk .bk-form-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.6rem 1.8rem;
    background:
        radial-gradient(120% 200% at 100% 0%, rgba(var(--coral-rgb), .16), transparent 60%),
        linear-gradient(120deg, var(--navy) 0%, var(--navy-soft) 100%);
    color: var(--cream);
}
.bk .bk-form-head h2 { font-size: 1.5rem; color: var(--cream); margin: 0 0 .25rem; }
.bk .bk-form-head p { margin: 0; font-size: .93rem; color: var(--on-dark-muted); }
.bk .bk-form-head-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    padding: 11px;
    flex: 0 0 46px;
    border-radius: 13px;
    background: rgba(var(--teal-rgb), .22);
    color: var(--teal-bright);
}

.bk .bk-form { border: 0; border-radius: 0; padding: 1.8rem; background: transparent; }

.bk .bk-fieldset { border: 0; margin: 0 0 1.6rem; padding: 0; }
.bk .bk-legend {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    margin-bottom: .9rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--bk-line);
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--navy);
}
.bk .bk-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--cream);
    font-size: .72rem;
    letter-spacing: 0;
}

.bk .bk-optional { font-weight: 500; letter-spacing: .04em; color: var(--slate); text-transform: none; }
.bk .bk-hint { margin: .4rem 0 0; font-size: .84rem; color: var(--slate); }

/* consultation type + time slot: real radios, styled as cards */
.bk .bk-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

/* both are <label> elements, so undo the uppercase micro-label treatment the
   shared form styles put on .field label */
.bk .bk-choice,
.bk .bk-slot {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--navy);
    padding: .85rem .9rem;
    border: 1.5px solid var(--border-light);
    border-radius: var(--bk-r-md);
    background: var(--cream);
    cursor: pointer;
    transition: border-color var(--bk-fast) var(--bk-ease), background var(--bk-fast) var(--bk-ease), transform var(--bk-fast) var(--bk-ease), box-shadow var(--bk-fast) var(--bk-ease);
}
.bk .bk-choice:hover,
.bk .bk-slot:hover { border-color: var(--teal); background: #fff; transform: translateY(-2px); box-shadow: 0 12px 22px -16px rgba(var(--navy-rgb), .5); }

.bk .bk-choice input,
.bk .bk-slot input { position: absolute; opacity: 0; pointer-events: none; }

.bk .bk-choice-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    padding: 8px;
    border-radius: 11px;
    background: rgba(var(--teal-rgb), .14);
    color: var(--teal-ink);
}
.bk .bk-choice[data-choice="study_education"] .bk-choice-icon { background: rgba(var(--coral-rgb), .14); color: var(--coral-ink); }
.bk .bk-choice-text strong { display: block; font-size: .96rem; font-weight: 700; }
.bk .bk-choice-text em { display: block; font-style: normal; font-size: .8rem; color: var(--slate); }

.bk .bk-choice-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 3px;
    margin-left: auto;
    border-radius: 50%;
    border: 1.5px solid var(--border-light);
    color: transparent;
    background: #fff;
    transition: background var(--bk-fast) var(--bk-ease), border-color var(--bk-fast) var(--bk-ease), color var(--bk-fast) var(--bk-ease);
}

.bk .bk-choice:has(input:checked) { border-color: var(--teal); background: #fff; box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .16); }
.bk .bk-choice:has(input:checked) .bk-choice-check { background: var(--teal); border-color: var(--teal); color: #fff; }
.bk .bk-choice[data-choice="study_education"]:has(input:checked) { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(var(--coral-rgb), .16); }
.bk .bk-choice[data-choice="study_education"]:has(input:checked) .bk-choice-check { background: var(--coral); border-color: var(--coral); }
.bk .bk-choice:has(input:focus-visible),
.bk .bk-slot:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 3px; }

.bk .bk-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.bk .bk-slot { flex-direction: column; align-items: flex-start; gap: .35rem; padding: .85rem .9rem .8rem; }
.bk .bk-slot-icon { display: inline-flex; width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: rgba(var(--teal-rgb), .13); color: var(--teal-ink); }
.bk .bk-slot--afternoon .bk-slot-icon { background: rgba(var(--coral-rgb), .13); color: var(--coral-ink); }
.bk .bk-slot--evening .bk-slot-icon { background: rgba(var(--navy-rgb), .1); color: var(--navy); }
.bk .bk-slot-name { font-size: .95rem; font-weight: 700; }
.bk .bk-slot-time { font-size: .8rem; color: var(--slate); }
.bk .bk-slot:has(input:checked) { border-color: var(--teal); background: #fff; box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .16); }

/* the date field takes the shared form shell, just not the full width */
.bk .bk-date-field input[type="date"] { max-width: 280px; }

.bk .bk-consent { margin: 0 0 1.4rem; padding: .9rem 1rem; background: var(--bk-sky); border-radius: var(--bk-r-md); }

.bk .bk-submit-row { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.bk .bk-submit-row .cta { cursor: pointer; }
.bk .bk-submit-note { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .85rem; color: var(--slate); max-width: 34ch; }
.bk .bk-submit-note svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--teal-ink); }

.bk .bk-success {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.8rem 1.8rem 0;
    padding: 1rem 1.15rem;
    background: rgba(var(--teal-rgb), .13);
    border: 1px solid var(--teal);
    border-radius: var(--bk-r-md);
    font-size: .96rem;
    font-weight: 600;
    color: var(--navy);
}
.bk .bk-success svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--teal-ink); }

/* side rail */
.bk .bk-rail { display: grid; gap: 1.25rem; position: sticky; top: 96px; }

.bk .bk-rail-card {
    background: var(--cream);
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-r-lg);
    padding: 1.4rem 1.5rem;
}
.bk .bk-rail-card h3 { display: flex; align-items: center; gap: .65rem; font-size: 1.08rem; margin-bottom: .9rem; }
.bk .bk-rail-icon { width: 34px; height: 34px; padding: 8px; }
.bk .bk-rail-note { margin: .9rem 0 0; font-size: .88rem; color: var(--bk-muted); }
.bk .bk-tick-list--rail li { font-size: .92rem; }

.bk .bk-rail-card--dark {
    background: var(--navy);
    border-color: transparent;
    color: var(--cream);
}
.bk .bk-rail-card--dark h3 { color: var(--cream); }
.bk .bk-rail-card--dark .bk-rail-note { color: var(--on-dark-muted); }
.bk .bk-rail-card--dark .bk-i-coral { background: rgba(var(--coral-rgb), .2); color: var(--coral-bright); }

.bk .bk-contact-list { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.bk .bk-contact-list a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .7rem;
    border-radius: 12px;
    border: 1px solid var(--bk-line-dark);
    color: var(--cream);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    transition: background var(--bk-fast) var(--bk-ease), border-color var(--bk-fast) var(--bk-ease), transform var(--bk-fast) var(--bk-ease);
}
.bk .bk-contact-list a:hover { background: rgba(241, 237, 230, .1); border-color: rgba(241, 237, 230, .34); transform: translateX(4px); }
.bk .bk-contact-list em { display: block; font-style: normal; font-size: .8rem; font-weight: 400; color: var(--on-dark-muted); }
.bk .bk-contact-icon { display: inline-flex; width: 30px; height: 30px; flex: 0 0 30px; padding: 7px; border-radius: 9px; background: rgba(var(--teal-rgb), .2); color: var(--teal-bright); }

.bk .bk-rail-address { display: flex; align-items: flex-start; gap: .5rem; margin: 1.1rem 0 0; font-size: .82rem; color: var(--on-dark-muted); }
.bk .bk-rail-address svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: .15rem; color: var(--teal-bright); }

.bk .bk-rail-photo {
    position: relative;
    margin: 0;
    border-radius: var(--bk-r-lg);
    overflow: hidden;
    min-height: 260px;
    display: flex;
    align-items: flex-end;
}
.bk .bk-rail-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--bk-ease); }
.bk .bk-rail-photo:hover img { transform: scale(1.05); }
.bk .bk-rail-photo figcaption {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 1.6rem 1.3rem 1.2rem;
    background: linear-gradient(180deg, transparent, rgba(5, 31, 48, .92) 42%);
    color: var(--cream);
    font-size: .95rem;
    line-height: 1.5;
    font-weight: 600;
}
.bk .bk-rail-photo figcaption em { display: block; margin-top: .5rem; font-style: normal; font-size: .8rem; font-weight: 400; color: var(--on-dark-muted); }
.bk .bk-quote-mark { font-size: 1.6rem; line-height: 0; color: var(--coral-bright); margin-right: .15rem; }

/* ----------------------------- what happens next ----------------------------- */

.bk-next { background: var(--navy); color: var(--cream); padding: 5.5rem 0; position: relative; overflow: hidden; }
.bk-next::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(90% 120% at 12% -10%, rgba(var(--teal-rgb), .22), transparent 60%),
                radial-gradient(70% 110% at 92% 110%, rgba(var(--coral-rgb), .16), transparent 60%);
    pointer-events: none;
}
.bk-next .wrap { position: relative; z-index: 2; }

.bk .bk-next-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.bk .bk-next-steps li {
    position: relative;
    padding: 1.5rem 1.35rem;
    background: rgba(241, 237, 230, .05);
    border: 1px solid var(--bk-line-dark);
    border-radius: var(--bk-r-lg);
    transition: background var(--bk-fast) var(--bk-ease), border-color var(--bk-fast) var(--bk-ease), transform var(--bk-fast) var(--bk-ease);
}
.bk .bk-next-steps li:hover { background: rgba(241, 237, 230, .09); border-color: rgba(241, 237, 230, .32); transform: translateY(-4px); }

/* dotted connector between the four cards */
.bk .bk-next-steps li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 2.55rem;
    right: -1.25rem;
    width: 1.25rem;
    border-top: 2px dotted rgba(241, 237, 230, .3);
}

.bk .bk-next-num { font-size: .8rem; font-weight: 800; letter-spacing: .14em; color: var(--teal-bright); }
.bk .bk-next-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    padding: 10px;
    margin: .7rem 0 .9rem;
    border-radius: 12px;
    background: rgba(241, 237, 230, .1);
    color: var(--cream);
    transition: background var(--bk-fast) var(--bk-ease), color var(--bk-fast) var(--bk-ease), transform var(--bk-fast) var(--bk-ease);
}
.bk .bk-next-steps li:hover .bk-next-icon { background: var(--teal); color: var(--navy); transform: rotate(-4deg) scale(1.04); }
.bk .bk-next-steps h3 { font-size: 1.16rem; color: var(--cream); margin-bottom: .4rem; }
.bk .bk-next-steps p { margin: 0; font-size: .92rem; color: var(--on-dark-muted); line-height: 1.55; }

/* ---------------------------------- gallery ---------------------------------- */

.bk-gallery { background: var(--cream); padding: 5.5rem 0; }

.bk .bk-gal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 1rem;
}

.bk .bk-gal-item {
    position: relative;
    margin: 0;
    border-radius: var(--bk-r-md);
    overflow: hidden;
    box-shadow: var(--bk-card);
}
.bk .bk-gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--bk-ease); }
.bk .bk-gal-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(var(--navy-rgb), .78) 100%);
    opacity: .85;
    transition: opacity var(--bk-fast) var(--bk-ease);
}
.bk .bk-gal-item:hover img { transform: scale(1.08); }
.bk .bk-gal-item:hover::after { opacity: 1; }

.bk .bk-gal-item figcaption {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem 1.1rem;
    color: var(--cream);
    transform: translateY(6px);
    transition: transform var(--bk-fast) var(--bk-ease);
}
.bk .bk-gal-item:hover figcaption { transform: translateY(0); }
.bk .bk-gal-item figcaption strong { display: block; font-size: 1.02rem; font-weight: 700; }
.bk .bk-gal-item figcaption span { display: block; font-size: .82rem; color: rgba(241, 237, 230, .78); }

/* the lead tile holds the left half of both rows; the four smaller tiles fill
   the remaining 2×2 exactly, so the grid has no ragged edge */
.bk .bk-gal-item--lg { grid-column: span 2; grid-row: span 2; }

/* ------------------------------------ faq ------------------------------------ */

.bk-faq-sec { background: #fff; padding: 5.5rem 0; }
.bk-faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: start; }
.bk .bk-faq-intro h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); margin: .5rem 0 .6rem; }
.bk .bk-faq-intro p { color: var(--bk-muted); margin: 0 0 1.2rem; }

.bk .bk-faq-item { border-bottom: 1px solid var(--bk-line); }
.bk .bk-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.15rem 0;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
    transition: color var(--bk-fast) var(--bk-ease);
}
.bk .bk-faq-item summary::-webkit-details-marker { display: none; }
.bk .bk-faq-item summary:hover { color: var(--teal-ink); }

.bk .bk-faq-chevron {
    position: relative;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    background: var(--bk-sky);
    transition: background var(--bk-fast) var(--bk-ease), transform var(--bk-fast) var(--bk-ease);
}
.bk .bk-faq-chevron::before,
.bk .bk-faq-chevron::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 2px;
    border-radius: 2px;
    background: var(--navy);
    transform: translate(-50%, -50%);
    transition: transform var(--bk-fast) var(--bk-ease);
}
.bk .bk-faq-chevron::after { transform: translate(-50%, -50%) rotate(90deg); }
.bk .bk-faq-item summary:hover .bk-faq-chevron { background: rgba(var(--teal-rgb), .2); }
.bk .bk-faq-item[open] .bk-faq-chevron { background: var(--teal); }
.bk .bk-faq-item[open] .bk-faq-chevron::after { transform: translate(-50%, -50%) rotate(0deg); }

.bk .bk-faq-a { padding: 0 0 1.25rem; }
.bk .bk-faq-a p { margin: 0; color: var(--bk-muted); max-width: 62ch; line-height: 1.7; }
.bk .bk-faq-item[open] .bk-faq-a { animation: bk-fade-in 320ms var(--bk-ease); }

@keyframes bk-fade-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* -------------------------------- closing band -------------------------------- */

.bk-closing { position: relative; padding: 5.5rem 0; overflow: hidden; color: var(--cream); background: var(--navy); }
.bk-closing-bg { position: absolute; inset: 0; }
.bk-closing-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.bk-closing::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(var(--navy-rgb), .93) 0%, rgba(var(--navy-rgb), .72) 55%, rgba(var(--navy-rgb), .55) 100%);
}

.bk-closing-inner { position: relative; z-index: 2; text-align: center; max-width: 760px; }
.bk .bk-closing-inner h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--cream); margin-bottom: .8rem; }
.bk .bk-closing-inner p { color: var(--on-dark-muted); font-size: 1.08rem; margin: 0 auto 2rem; max-width: 58ch; }
.bk .bk-closing-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; }
.bk .bk-closing-spark {
    display: inline-flex;
    width: 44px;
    height: 44px;
    padding: 10px;
    margin-bottom: 1.1rem;
    border-radius: 14px;
    background: rgba(var(--coral-rgb), .22);
    color: var(--coral-bright);
    animation: bk-float 5s ease-in-out infinite;
}

/* --------------------------------- responsive --------------------------------- */

@media (max-width: 1080px) {
    .bk-form-grid { grid-template-columns: 1fr; }
    .bk .bk-rail { position: static; grid-template-columns: repeat(2, 1fr); }
    .bk .bk-rail-photo { min-height: 220px; }
    .bk .bk-next-steps { grid-template-columns: repeat(2, 1fr); }
    .bk .bk-next-steps li:nth-child(2)::after { display: none; }
}

@media (max-width: 940px) {
    .bk-hero { padding-top: 3.5rem; }
    .bk-hero-grid { grid-template-columns: 1fr; gap: 2.75rem; }
    .bk-collage { padding-bottom: 1.5rem; }
    .bk .bk-float-card--seal { left: 4px; }
    .bk .bk-float-card--slot { right: 4px; }
    .bk-type-grid { grid-template-columns: 1fr; }
    .bk .bk-aside { grid-template-columns: 110px 1fr; row-gap: 1rem; }
    .bk .bk-aside-link { grid-column: 1 / -1; }
    .bk-faq-grid { grid-template-columns: 1fr; gap: 2rem; }
    .bk .bk-gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
    .bk-types, .bk-form-sec, .bk-next, .bk-gallery, .bk-faq-sec, .bk-closing { padding: 4rem 0; }
}

@media (max-width: 640px) {
    .bk .bk-choice-row { grid-template-columns: 1fr; }
    .bk .bk-slots { grid-template-columns: 1fr; }
    .bk .bk-slot { flex-direction: row; align-items: center; gap: .7rem; }
    .bk .bk-slot-time { margin-left: auto; }
    .bk .bk-rail { grid-template-columns: 1fr; }
    .bk .bk-next-steps { grid-template-columns: 1fr; }
    .bk .bk-next-steps li::after { display: none !important; }
    .bk .bk-gal-item--lg { grid-column: span 2; grid-row: span 1; }
    .bk .bk-form, .bk .bk-form-head { padding: 1.25rem; }
    .bk .bk-success { margin: 1.25rem 1.25rem 0; }
    .bk .bk-aside { grid-template-columns: 1fr; }
    .bk .bk-aside-photo { aspect-ratio: 16 / 8; }
    .bk .bk-float-card--slot { top: -8px; padding: .55rem .7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bk .bk-photo,
    .bk .bk-float-card,
    .bk .bk-closing-spark,
    .bk .bk-live-dot { animation: none !important; }
    .bk .bk-stagger > * { transition: none; opacity: 1; transform: none; }
    .bk .bk-photo img,
    .bk .bk-gal-item img,
    .bk .bk-type-photo img,
    .bk .bk-aside-photo img,
    .bk .bk-rail-photo img { transition: none; }
    .bk .bk-type-card:hover,
    .bk .bk-next-steps li:hover,
    .bk .bk-hero-points li:hover,
    .bk .bk-contact-list a:hover { transform: none; }
}

/* ==========================================================================
   Contact page (.ct) — templates/core/contact.html
   Scope: every rule below is prefixed .ct. A light, single-palette page (no
   stock photo) so it reads as one calm space rather than stacked panels:
   a warm sand/cream intro band (same treatment as the FAQ hero) with the
   quick-contact chips, then a "what happens next" checklist sitting beside
   the form so the form has a reason to feel worth filling in, not just a
   box floating next to a photo.
   ========================================================================== */

.ct {
    --ct-ease: cubic-bezier(.4, 0, .2, 1);
    --ct-fast: 150ms;
    --ct-slow: 320ms;
    --ct-sand: #f7f2e8;
    --ct-sand-deep: #efe7d8;
    --ct-line: #e4dbc9;
    --ct-muted: #55707d;
    --ct-r-lg: 20px;
    --ct-r-md: 13px;
    color: var(--navy);
}

.ct svg { width: 100%; height: 100%; display: block; }

/* ---------------------------------- let's talk / form split ---------------------------------- */

/* Photo panel (~50%) and form panel (~50%), clean two-tone split — the photo
   stays inside its own panel instead of running the full width behind the
   form too. The header stays in its normal solid-navy sticky state here
   (not the floating-transparent trick .hero/.ct-hero use elsewhere) because
   the form panel is light cream; a translucent header would lose contrast
   against it.

   The photo is absolutely positioned against a relative .ct-split, and the
   form panel sits beside it in normal flow with a matching margin-left, so
   the photo always fills the exact height the form ends up needing.
   padding:0 overrides the sitewide `section { padding: 6rem 0 }` default,
   which the two halves handle themselves instead. */
.ct-split { position: relative; min-height: 680px; padding: 0; }

.ct-split-photo {
    position: absolute;
    inset: 0;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem clamp(1.75rem, 4vw, 4rem);
    background:
        linear-gradient(100deg, rgba(var(--navy-rgb), .88) 0%, rgba(var(--navy-rgb), .72) 60%, rgba(var(--navy-rgb), .4) 100%),
        url('../img/contact-bg.webp') center 30% / cover no-repeat;
    color: var(--cream);
}

.ct-split-content { max-width: 460px; }
.ct .ct-split-content h1 { color: var(--cream); font-size: clamp(2.2rem, 3vw, 3rem); letter-spacing: -.03em; line-height: 1.14; margin: 0 0 .8rem; }
.ct .ct-lede { font-size: clamp(.92rem, 1.1vw, 1rem); color: rgba(241, 237, 230, .85); line-height: 1.55; margin: 0 0 1.5rem; max-width: 56ch; }

/* three quick-contact chips side by side, frosted glass over the photo */
.ct-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0 0 1.4rem; max-width: 460px; }

.ct .ct-channel {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .75rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: var(--ct-r-md);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    text-decoration: none;
    color: var(--cream);
    transition: transform var(--ct-fast) var(--ct-ease), background var(--ct-fast) var(--ct-ease), border-color var(--ct-fast) var(--ct-ease), box-shadow var(--ct-fast) var(--ct-ease);
}
.ct .ct-channel:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .16);
    border-color: var(--coral);
    box-shadow: 0 14px 30px -16px rgba(var(--coral-rgb), .6);
}

.ct .ct-channel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    padding: 7px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .18);
    color: var(--cream);
    /* a little overshoot on the way in ("back out" easing) instead of a
       linear scale — reads as a playful pop rather than a flat resize */
    transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1), background var(--ct-fast) var(--ct-ease), color var(--ct-fast) var(--ct-ease);
}
.ct .ct-channel:hover .ct-channel-icon { transform: scale(1.15) rotate(-6deg); background: var(--coral); color: #fff; }

.ct .ct-channel-body { min-width: 0; }
.ct .ct-channel-body strong { display: block; font-size: .86rem; font-weight: 700; line-height: 1.25; }
.ct .ct-channel-body em { display: block; font-style: normal; font-size: .76rem; color: rgba(241, 237, 230, .72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------- form half ---------------------------------- */

.ct-split-form {
    margin-left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 680px;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
    background:
        radial-gradient(70% 130% at 88% -10%, rgba(var(--coral-rgb), .1), transparent 60%),
        radial-gradient(60% 110% at 6% 8%, rgba(var(--teal-rgb), .12), transparent 58%),
        var(--cream);
}
/* fills most of its panel rather than floating as a small card in a lot of
   empty cream — the panel itself (not extra max-width headroom) is what
   provides the breathing room */
.ct-split-form .ct-form-card { width: 100%; max-width: 640px; }

/* --------------------------------- form card --------------------------------- */

/* the one thing on the page worth acting on — a real card (not a full-bleed
   panel forced to fill a column) with an accent bar up top */
.ct .ct-form-card {
    position: relative;
    color: var(--navy);
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-r-lg);
    box-shadow: 0 1px 3px rgba(var(--navy-rgb), .05), 0 28px 56px -28px rgba(var(--navy-rgb), .22);
    padding: clamp(1.75rem, 3.4vw, 2.75rem);
    overflow: hidden;
}
.ct .ct-form-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--coral), var(--teal));
}

.ct .ct-form-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.ct .ct-form-head h2 { font-size: 1.5rem; letter-spacing: -.03em; margin: 0; }
/* a tag/pill, same brand-kit role as .eyebrow and .seal ("Price/Code/Tag ->
   Secondary" in the type table up top) — so it's on --font-label like every
   other small pill on the site, not the body face it was inheriting before */
.ct .ct-form-time {
    font-family: var(--font-label);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--teal-ink);
    background: rgba(var(--teal-rgb), .13);
    border-radius: 999px;
    padding: .28rem .7rem;
    white-space: nowrap;
}

.ct .ct-form { border: 0; border-radius: 0; padding: 0; background: transparent; }

/* Field shell comes from the shared .inquiry-form system; the contact page
   only tightens the vertical spacing and sizes fields up a step so the
   form reads as roomy rather than cramped. */
.ct .ct-form .field { margin-bottom: 1rem; }
.ct .ct-form .field-row { gap: 1rem; }
.ct .ct-form .field label { margin-bottom: .38rem; }
.ct .ct-form input[type="text"],
.ct .ct-form input[type="email"],
.ct .ct-form input[type="tel"],
.ct .ct-form select,
.ct .ct-form textarea { min-height: 52px; padding: .85rem 1rem; font-size: .98rem; }
.ct .ct-form textarea { min-height: 112px; }

.ct .ct-optional { font-weight: 400; font-size: .82rem; letter-spacing: 0; color: var(--slate); text-transform: none; }

.ct .conditional-group { animation: ct-fade-in 240ms var(--ct-ease); }

@keyframes ct-fade-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* folded secondary fields — still inside the form, so they still submit */
.ct .ct-more { margin: 0 0 .9rem; border-top: 1px solid var(--ct-line); }
.ct .ct-more summary {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 0 .2rem;
    list-style: none;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 700;
    color: var(--navy);
    transition: color var(--ct-fast) var(--ct-ease);
}
.ct .ct-more summary::-webkit-details-marker { display: none; }
.ct .ct-more summary:hover { color: var(--teal-ink); }
.ct .ct-more summary em { font-style: normal; font-weight: 400; font-size: .82rem; color: var(--slate); }
.ct .ct-more-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    padding: 3px;
    border-radius: 50%;
    background: var(--ct-sand);
    color: var(--navy);
    transition: transform var(--ct-fast) var(--ct-ease), background var(--ct-fast) var(--ct-ease);
}
.ct .ct-more summary:hover .ct-more-plus { background: rgba(var(--teal-rgb), .18); }
.ct .ct-more[open] .ct-more-plus { transform: rotate(45deg); background: var(--teal); color: #fff; }
.ct .ct-more-body { padding-top: .85rem; animation: ct-fade-in 240ms var(--ct-ease); }

.ct .ct-consent { margin: 0 0 1.1rem; padding: .7rem .85rem; background: var(--ct-sand); border-radius: var(--ct-r-md); font-size: .89rem; }
.ct .ct-consent label { font-size: .89rem; }

.ct .ct-submit-row { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.ct .ct-submit-row .cta { cursor: pointer; }
.ct .ct-btn-arrow { width: 17px; height: 17px; flex: 0 0 17px; transition: transform var(--ct-fast) var(--ct-ease); }
.ct .ct-submit-row .cta:hover .ct-btn-arrow { transform: translateX(4px); }
.ct .ct-submit-note { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .82rem; color: var(--slate); max-width: 30ch; }
.ct .ct-submit-note svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--teal-ink); }

/* ------------------------------ sent confirmation ------------------------------ */

/* Sits inside the form card, right above the "Send us a message" header —
   shown once Django's messages queue has something in it (the redirect-
   after-POST in core/views.py lands back here with the page fully
   reloaded, so this just needs to be in the normal page flow, not injected
   client-side). Same teal-tinted treatment as other success/info states on
   the card's white background. */
.ct-alert {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 1.3rem;
    padding: .8rem 1.1rem;
    background: rgba(var(--teal-rgb), .1);
    border: 1px solid rgba(var(--teal-rgb), .35);
    border-radius: var(--ct-r-md);
}

.ct-alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    padding: 7px;
    border-radius: 50%;
    background: rgba(var(--teal-rgb), .18);
    color: var(--teal-ink);
}

.ct-alert p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--navy); }
.ct-alert strong { font-weight: 700; }

/* -------------------------------- responsive -------------------------------- */

@media (max-width: 980px) {
    /* stack: photo becomes a full-width band on top, form flows below it —
       drop the absolute positioning that keeps the photo pinned beside the
       form on wide screens, since there's no "beside" left to fill. */
    .ct-split-photo { position: static; width: 100%; min-height: 420px; }
    .ct-split-form { margin-left: 0; min-height: 0; }
}

@media (max-width: 720px) {
    .ct-split-photo { padding: 3rem clamp(1.25rem, 5vw, 2rem); min-height: 380px; }
    .ct .ct-lede { max-width: none; }
    .ct-channels { grid-template-columns: 1fr; max-width: 320px; }
    .ct-split-form { padding: 2.75rem 1.25rem 3.5rem; }
    .ct .ct-form-card { padding: 1.4rem 1.25rem 1.5rem; }
    .ct .ct-form .field-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .ct .ct-channel:hover { transform: none; }
    .ct .ct-channel:hover .ct-channel-icon { transform: none; }
    .ct .conditional-group,
    .ct .ct-more-body { animation: none; }
}

/* ==========================================================================
   FAQ page (.fq) — templates/faq/faq_list.html
   Scope: every rule below is prefixed .fq. Same warm sand palette as the
   contact page, with a sticky category rail and a live search filter.
   The accordions reuse the shared .faq-item markup so the existing
   smooth-height accordion script drives them.
   ========================================================================== */

.fq {
    --fq-ease: cubic-bezier(.4, 0, .2, 1);
    --fq-fast: 150ms;
    --fq-sand: #f7f2e8;
    --fq-sand-deep: #efe7d8;
    --fq-line: #e4dbc9;
    --fq-muted: #55707d;
    --fq-r-lg: 22px;
    --fq-r-md: 14px;
    color: var(--navy);
}

.fq svg { width: 100%; height: 100%; display: block; }

/* ...except the shared eyebrow brand mark, which isn't in a sized icon box
   like the others here and would otherwise stretch to fill its text line. */
.fq .eyebrow-mark { width: 18px; height: auto; }

.fq .fq-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------------------------------- hero ---------------------------------- */

.fq-hero {
    padding: 5rem 0 3.25rem;
    background:
        radial-gradient(90% 130% at 88% -20%, rgba(var(--coral-rgb), .13), transparent 60%),
        radial-gradient(80% 120% at 4% 0%, rgba(var(--teal-rgb), .12), transparent 58%),
        linear-gradient(180deg, var(--fq-sand) 0%, var(--cream) 100%);
    border-bottom: 1px solid var(--fq-line);
}

.fq-hero-inner { max-width: 720px; }
.fq .fq-hero-inner h1 { font-size: clamp(2.3rem, 4.4vw, 3.5rem); margin: .7rem 0 .9rem; }
.fq .fq-lede { font-size: clamp(1.02rem, 1.35vw, 1.14rem); color: var(--fq-muted); margin: 0 0 2rem; max-width: 60ch; }

/* search */
.fq .fq-search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 480px;
    background: #fff;
    border: 1px solid var(--fq-line);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(var(--navy-rgb), .04), 0 18px 36px -28px rgba(var(--navy-rgb), .35);
    transition: border-color var(--fq-fast) var(--fq-ease), box-shadow var(--fq-fast) var(--fq-ease);
}
.fq .fq-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .2); }

.fq .fq-search-icon { display: inline-flex; width: 19px; height: 19px; flex: 0 0 19px; margin-left: 1.1rem; color: var(--teal-ink); }

.fq .fq-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: .98rem;
    color: var(--navy);
    padding: .95rem .8rem;
}
.fq .fq-search input:focus { outline: none; }
.fq .fq-search input::-webkit-search-cancel-button { display: none; }
.fq .fq-search input::placeholder { color: #90a3ad; }

.fq .fq-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 7px;
    margin-right: .6rem;
    border: 0;
    border-radius: 50%;
    background: var(--fq-sand-deep);
    color: var(--navy);
    cursor: pointer;
    transition: background var(--fq-fast) var(--fq-ease);
}
.fq .fq-search-clear:hover { background: var(--border-light); }
/* an explicit display beats the [hidden] attribute, so restate it */
.fq .fq-search-clear[hidden] { display: none; }

.fq .fq-search-status { margin: .85rem 0 0; font-size: .88rem; font-weight: 600; color: var(--teal-ink); }

/* ------------------------------ layout + rail ------------------------------ */

.fq-main { background: var(--cream); padding: 3.75rem 0 4.5rem; }
.fq-grid { display: grid; grid-template-columns: 270px 1fr; gap: 3rem; align-items: start; }

.fq .fq-rail { display: grid; gap: 1rem; position: sticky; top: 96px; }

.fq .fq-nav {
    display: grid;
    gap: .2rem;
    background: #fff;
    border: 1px solid var(--fq-line);
    border-radius: var(--fq-r-lg);
    padding: 1rem;
}
.fq .fq-nav-title {
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--teal-ink);
    padding: .3rem .6rem .6rem;
}

.fq .fq-nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .65rem;
    border-radius: 11px;
    text-decoration: none;
    color: var(--navy);
    font-size: .94rem;
    font-weight: 600;
    transition: background var(--fq-fast) var(--fq-ease), transform var(--fq-fast) var(--fq-ease);
}
.fq .fq-nav-link:hover { background: var(--fq-sand); transform: translateX(3px); }
.fq .fq-nav-icon { display: inline-flex; width: 30px; height: 30px; flex: 0 0 30px; padding: 7px; border-radius: 9px; background: var(--fq-sand); color: var(--teal-ink); }
.fq .fq-nav-link:hover .fq-nav-icon { background: rgba(var(--teal-rgb), .18); }
.fq .fq-nav-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fq .fq-nav-count {
    margin-left: auto;
    font-size: .78rem;
    font-weight: 700;
    color: var(--slate);
    font-variant-numeric: tabular-nums;
}

.fq .fq-ask {
    background: var(--fq-sand);
    border: 1px solid var(--fq-sand-deep);
    border-radius: var(--fq-r-lg);
    padding: 1.4rem 1.5rem;
}
.fq .fq-ask-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    padding: 9px;
    margin-bottom: .85rem;
    border-radius: 11px;
    background: rgba(var(--coral-rgb), .16);
    color: var(--coral-ink);
}
.fq .fq-ask h2 { font-size: 1.1rem; margin-bottom: .45rem; }
.fq .fq-ask p { margin: 0 0 1rem; font-size: .9rem; color: var(--fq-muted); }

.fq .fq-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: .93rem;
    color: var(--teal-ink);
    text-decoration: none;
    padding-bottom: 2px;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--fq-fast) var(--fq-ease);
}
.fq .fq-link:hover { background-size: 100% 1.5px; }
.fq .fq-link svg { width: 16px; height: 16px; flex: 0 0 16px; transition: transform var(--fq-fast) var(--fq-ease); }
.fq .fq-link:hover svg { transform: translateX(4px); }

/* ------------------------------ question blocks ------------------------------ */

.fq .fq-content { display: grid; gap: 1.5rem; min-width: 0; }

.fq .fq-block {
    background: #fff;
    border: 1px solid var(--fq-line);
    border-radius: var(--fq-r-lg);
    padding: 1.6rem 1.9rem 1.1rem;
    scroll-margin-top: 96px;
}

.fq .fq-block-head {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding-bottom: 1rem;
    margin-bottom: .4rem;
    border-bottom: 1px solid var(--fq-line);
}
.fq .fq-block-icon { display: inline-flex; width: 38px; height: 38px; flex: 0 0 38px; padding: 9px; border-radius: 11px; background: rgba(var(--teal-rgb), .14); color: var(--teal-ink); }
.fq .fq-block-head h2 { font-size: 1.35rem; margin: 0; }
.fq .fq-block-count {
    margin-left: auto;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--slate);
    white-space: nowrap;
}

/* accordion: the shared .faq-item rules handle the mechanics, these tune the
   type and spacing for the page's card layout */
.fq .fq-item { border-bottom: 1px solid var(--fq-line); }
.fq .fq-item:last-child { border-bottom: 0; }
.fq .fq-item summary { font-size: 1.05rem; padding: 1.15rem 3rem 1.15rem 0; transition: color var(--fq-fast) var(--fq-ease); }
.fq .fq-item summary:hover { color: var(--teal-ink); }
.fq .fq-item summary .faq-toggle { width: 32px; height: 32px; border-color: var(--fq-line); background: var(--fq-sand); font-size: .82rem; }
.fq .fq-item summary:hover .faq-toggle { background: rgba(var(--teal-rgb), .18); border-color: transparent; }
.fq .fq-item.is-open summary { color: var(--navy); }
.fq .fq-item.is-open summary .faq-toggle { background: var(--teal); color: #fff; }
.fq .fq-item .faq-answer { padding: 0 3rem 1.35rem 0; color: var(--fq-muted); }
.fq .fq-item .faq-answer p { margin: 0 0 .7rem; line-height: 1.7; max-width: 68ch; }
.fq .fq-item .faq-answer p:last-child { margin-bottom: 0; }

.fq .fq-empty,
.fq .fq-noresults { margin: 0; padding: 1.25rem 0; color: var(--fq-muted); font-size: .96rem; }
.fq .fq-noresults { text-align: center; padding: 2.5rem 1rem; background: #fff; border: 1px dashed var(--fq-line); border-radius: var(--fq-r-lg); }
.fq .fq-empty a,
.fq .fq-noresults a { color: var(--teal-ink); font-weight: 600; }

/* search filter states, toggled by the page script */
.fq [data-fq-item][hidden],
.fq [data-fq-block][hidden] { display: none; }

/* --------------------------------- closing --------------------------------- */

.fq-band {
    background: linear-gradient(180deg, var(--cream) 0%, var(--fq-sand) 100%);
    border-top: 1px solid var(--fq-line);
    padding: 3.5rem 0;
}
.fq-band-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.75rem; }
.fq .fq-band-inner h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: .4rem; }
.fq .fq-band-inner p { margin: 0; color: var(--fq-muted); max-width: 54ch; }
.fq .fq-band-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.fq .fq-btn-arrow { width: 17px; height: 17px; flex: 0 0 17px; transition: transform var(--fq-fast) var(--fq-ease); }
.fq .fq-band-actions .btn:hover .fq-btn-arrow { transform: translateX(4px); }

/* -------------------------------- responsive -------------------------------- */

@media (max-width: 980px) {
    .fq-grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .fq .fq-rail { position: static; grid-template-columns: 1fr 1fr; align-items: start; }
    .fq .fq-nav { grid-template-columns: repeat(2, 1fr); }
    .fq .fq-nav-title { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .fq-hero { padding: 3.25rem 0 2.5rem; }
    .fq .fq-rail { grid-template-columns: 1fr; }
    .fq .fq-nav { grid-template-columns: 1fr; }
    .fq .fq-block { padding: 1.25rem 1.25rem .9rem; }
    .fq .fq-block-count { display: none; }
    .fq .fq-item summary { font-size: 1rem; padding-right: 2.6rem; }
    .fq .fq-item .faq-answer { padding-right: 0; }
    .fq-band-inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .fq .fq-nav-link:hover { transform: none; }
}

/* ==========================================================================
   Home sections v3 — services split, route track, comparison grid
   Scope: .lp only. One type scale across all three (eyebrow .78rem / h2 from
   the shared .lp rule / lede 1.14rem / body 1.02rem / micro-label .74rem), so
   the sections stop looking like three different documents.
   ========================================================================== */

.lp {
    --hs-line: rgba(var(--navy-rgb), .1);
    --hs-muted: #46606d;
}

.lp .svc-split svg,
.lp .rt-track svg,
.lp .cmp svg { display: block; }

/* These two containers only borrow .reveal for its in-view flag — their
   children run the actual staggered entrances, so the wrapper stays visible. */
.lp .rt-track.reveal,
.lp .cmp.reveal { opacity: 1; transform: none; }

/* ------------------------- services: half image, half list ------------------------- */

.lp .svc-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.25rem;
    align-items: start;
    margin-bottom: 3.5rem;
}

/* the photo stays put — same sticky-rail convention as .fq-rail/.bk-rail
   (top: 96px, just clear of the sticky header) — while .svc-list scrolls
   past it and hands off which shot is active as each row crosses centre
   (see initServiceSwitcher in site.js) */
.lp .svc-media {
    position: sticky;
    top: 96px;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4 / 4.4;
    background: var(--cream-deep);
    box-shadow: 0 2px 6px rgba(var(--navy-rgb), .06), 0 40px 70px -40px rgba(var(--navy-rgb), .55);
}

/* the shots are stacked; only the active one is visible */
.lp .svc-shot {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 520ms var(--lp-ease), transform 420ms var(--lp-ease);
    pointer-events: none;
}
.lp .svc-shot.is-active { opacity: 1; transform: scale(1); }
.lp .svc-shot img { width: 100%; height: 100%; object-fit: cover; }

.lp .svc-shot figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 3rem 1.5rem 1.4rem;
    background: linear-gradient(180deg, transparent, rgba(5, 31, 48, .9) 62%);
    color: var(--cream);
    font-size: .98rem;
    line-height: 1.45;
}
.lp .svc-shot-tag {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--teal-bright);
    margin-bottom: .3rem;
}

.lp .svc-list { display: grid; gap: .5rem; }

.lp .svc-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.1rem;
    padding: 1.35rem 1.4rem;
    border-radius: 16px;
    border: 1px solid transparent;
    cursor: default;
    transition: background 260ms var(--lp-ease), border-color 260ms var(--lp-ease), box-shadow 260ms var(--lp-ease), transform 260ms var(--lp-ease);
    /* one row at a time: scroll-snap-stop forces the scroll to actually
       stop here rather than letting a fast flick sail past to a row
       further down, so a single scroll gesture advances exactly one row
       — the same row initServiceSwitcher (in site.js) then measures as
       closest to centre and hands the sticky photo to. */
    scroll-snap-align: center;
    scroll-snap-stop: always;
    scroll-margin: 96px 0;
}
.lp .svc-item.is-active {
    background: #fff;
    border-color: var(--hs-line);
    box-shadow: 0 1px 2px rgba(var(--navy-rgb), .05), 0 22px 44px -30px rgba(var(--navy-rgb), .4);
}

.lp .svc-num {
    font-family: var(--lp-font);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--navy);
    opacity: .22;
    font-variant-numeric: tabular-nums;
    transition: opacity 260ms var(--lp-ease), color 260ms var(--lp-ease);
}
.lp .svc-item.is-active .svc-num { opacity: 1; color: var(--teal-ink); }

.lp .svc-body h3 { font-size: 1.5rem; margin: 0 0 .45rem; }
.lp .svc-body > p { font-size: 1.02rem; line-height: 1.6; color: var(--hs-muted); margin: 0; max-width: 46ch; }

/* the link only shows on the active row, so the list stays quiet */
.lp .svc-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .9rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--teal-ink);
    text-decoration: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 260ms var(--lp-ease), max-height 260ms var(--lp-ease);
}
.lp .svc-item.is-active .svc-link { opacity: 1; max-height: 3rem; }
.lp .svc-link svg { width: 17px; height: 17px; flex: 0 0 17px; transition: transform 200ms var(--lp-ease); }
.lp .svc-link:hover svg { transform: translateX(4px); }
.lp .svc-link:hover { color: var(--navy); }

/* ------------------------------- route: the track ------------------------------- */

.lp .route-dashboard {
    position: relative;
    overflow: hidden;
    background: var(--navy);
    color: var(--cream);
    padding: 5.5rem 0 3rem;
}
.lp .rt-bg { position: absolute; inset: 0; }
.lp .rt-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.lp .route-dashboard::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(80% 120% at 6% 0%, rgba(var(--teal-rgb), .3), transparent 58%),
        radial-gradient(70% 110% at 96% 100%, rgba(var(--coral-rgb), .22), transparent 60%),
        linear-gradient(180deg, rgba(var(--navy-rgb), .82), rgba(var(--navy-rgb), .95));
}
.lp .route-dashboard .wrap { position: relative; z-index: 2; }

.lp .rt-head {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 2.5rem;
    align-items: end;
    margin-bottom: 3.75rem;
}
.lp .rt-head .eyebrow { color: var(--teal-bright); }
.lp .rt-head h2 { color: var(--cream); font-size: clamp(2.1rem, 4.4vw, 3.25rem); margin: .55rem 0 .7rem; }
.lp .rt-head .route-intro { color: var(--on-dark-muted); font-size: 1.14rem; margin: 0; max-width: 52ch; }
.lp .rt-head-side { display: grid; gap: 1.1rem; justify-items: start; }

.lp .rt-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.lp .rt-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .8rem;
    border-radius: 999px;
    background: rgba(241, 237, 230, .08);
    border: 1px solid var(--border-dark);
    font-size: .84rem;
    font-weight: 600;
    color: var(--cream);
}
.lp .rt-chip svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--teal-bright); }

.lp .rt-track { position: relative; }

/* The route line — a normal block element sitting above the stop cards, not
   an absolute overlay. Same technique as the prototype: width 100%, height
   auto, so the 1000×200 viewBox keeps its own proportions instead of being
   squashed into a fixed band. */
.lp .rt-line { display: block; width: 100%; height: auto; margin: 0 0 1rem; pointer-events: none; }
.lp .rt-path {
    fill: none;
    stroke: rgba(95, 189, 211, .75);
    /* non-scaling-stroke means this is screen pixels, not viewBox units */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    vector-effect: non-scaling-stroke;
    transition: stroke-dashoffset 0.8s var(--lp-ease) .15s;
}
.lp .rt-track.in-view .rt-path { stroke-dashoffset: 0; }

.lp .rt-stops {
    position: relative;
    z-index: 2;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.lp .rt-stop { position: relative; padding: 1.25rem 1.4rem 0 0; transition: opacity .3s ease, transform .25s ease; }

/* On desktop the stops sit side-by-side and cross the viewport threshold
   together, so each stop is timed to arrive just after its own dot lights
   up on the route line above (see .rt-node delays below) — the line draws
   to stop 1, stop 1 arrives, then it's on to stop 2, and so on. --d is the
   shared arrival time each child below builds its own offset from, so the
   drop-line, the number and the copy land as one small sequence per stop
   instead of one flat card-wide fade. On the stacked mobile layout the
   .rt-line/nodes are hidden and each stop already triggers on its own real
   scroll position, so the 980px override further down resets --d to a
   quick, even stagger instead. */
.lp .rt-stop:nth-child(1) { --d: .4s; }
.lp .rt-stop:nth-child(2) { --d: 1s; }
.lp .rt-stop:nth-child(3) { --d: 1.55s; }
.lp .rt-stop:nth-child(4) { --d: 2.1s; }

/* a marker line drops from the route down to the number, planting each
   stop where its dot actually sits (the 4 dots and the 4 grid columns land
   on the same x-positions, so this lines up exactly, not approximately) */
.lp .rt-stop-drop {
    position: absolute; top: 0; left: 50%; width: 2px; height: 1.25rem;
    overflow: hidden;
}
.lp .rt-stop-drop::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(var(--navy-rgb), .4), rgba(var(--navy-rgb), 0));
    transform: translateY(-100%);
    /* two different delays on purpose: the draw-in (transform) waits for
       --d, same as the rest of the arrival sequence, but the colour swap on
       hover (background) needs to react immediately, every time — matched
       lists below so the two never share a delay value. */
    transition-property: transform, background;
    transition-duration: .5s, .25s;
    transition-timing-function: cubic-bezier(.16, 1, .3, 1), ease;
    transition-delay: var(--d, 0s), 0s;
}
.lp .rt-stop.in-view .rt-stop-drop::after { transform: translateY(0); }

.lp .rt-stop-num {
    display: block;
    font-family: var(--lp-font);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .16em;
    color: var(--teal-bright);
    font-variant-numeric: tabular-nums;
    margin: 0 0 .6rem;
    opacity: 0;
    transform: scale(.6);
    /* same split as the drop-line above: the pop-in (opacity/transform)
       rides the arrival delay, the hover pill (background/color/padding/
       radius) always reacts at 0 — matched-length lists so a value never
       gets borrowed across the two groups. */
    transition-property: opacity, transform, background, color, padding, border-radius;
    transition-duration: .3s, .4s, .25s, .25s, .25s, .25s;
    transition-timing-function: ease, cubic-bezier(.34, 1.56, .64, 1), ease, ease, ease, ease;
    transition-delay: calc(var(--d, 0s) + .1s), calc(var(--d, 0s) + .1s), 0s, 0s, 0s, 0s;
}
.lp .rt-stop.in-view .rt-stop-num { opacity: 1; transform: none; }

/* the heading and copy settle into focus rather than just sliding up —
   a soft blur clearing as they land reads as more considered than a flat
   translate, and it echoes the line above still drawing into focus too */
.lp .rt-stop h3,
.lp .rt-stop p {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(5px);
    transition-property: opacity, transform, filter, color;
    transition-duration: .6s, .6s, .6s, .25s;
    transition-timing-function: cubic-bezier(.16, 1, .3, 1), cubic-bezier(.16, 1, .3, 1), ease, ease;
}
.lp .rt-stop h3 { font-size: 1.2rem; color: var(--cream); margin: 0 0 .35rem; transition-delay: calc(var(--d, 0s) + .2s), calc(var(--d, 0s) + .2s), calc(var(--d, 0s) + .2s), 0s; }
.lp .rt-stop p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--on-dark-muted); transition-delay: calc(var(--d, 0s) + .3s), calc(var(--d, 0s) + .3s), calc(var(--d, 0s) + .3s), 0s; }
.lp .rt-stop.in-view h3,
.lp .rt-stop.in-view p { opacity: 1; transform: none; filter: blur(0); }

/* --------------------------- hover: one stop at a time --------------------------- */
/* hovering a stop lifts and highlights it, dims its neighbours, and (see
   the matching .rt-node rules further down, near the rest of the dot
   styling) lights up its dot back on the route line — the same dot-to-card
   pairing the drop-line already draws, now reversible: point at the card
   and see which dot it belongs to. */
.lp .rt-stops:hover .rt-stop:not(:hover) { opacity: .5; }
.lp .rt-stop:hover { transform: translateY(-4px); }
.lp .rt-stop:hover .rt-stop-num { background: var(--coral); color: #fff; padding: .2rem .55rem; border-radius: 999px; display: inline-block; }
.lp .rt-stop:hover .rt-stop-drop::after { background: linear-gradient(180deg, rgba(var(--coral-rgb), .7), rgba(var(--coral-rgb), 0)); }
.lp .rt-stop:hover h3 { color: var(--coral-ink); }

/* the cities people actually land in — an auto-scrolling row, same
   duplicate-content loop technique as .slide-track near the top of the
   page, so it reads as a carousel rather than a static 3-up grid */
.lp .rt-cities {
    margin-top: 3.25rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.lp .rt-cities-label {
    margin: 0 0 1rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--teal-bright);
}
.lp .rt-city-row {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    width: max-content;
    animation: slide-left 52s linear infinite;
}
.lp .rt-cities:hover .rt-city-row { animation-play-state: paused; }
.lp .rt-city {
    position: relative;
    margin: 0;
    flex: 0 0 clamp(180px, 27vw, 305px);
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--border-dark);
}
.lp .rt-city img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--lp-ease); }
.lp .rt-city:hover img { transform: scale(1.07); }
.lp .rt-city figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.4rem .9rem .8rem;
    background: linear-gradient(180deg, transparent, rgba(5, 31, 48, .88));
    color: var(--cream);
}
.lp .rt-city figcaption span { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .16em; color: var(--teal-bright); }
.lp .rt-city figcaption strong { font-size: .98rem; font-weight: 700; }

/* ------------------------------ comparison grid ------------------------------ */

.lp .compare-section { background: var(--cream); }

.lp .cmp {
    background: #fff;
    border: 1px solid var(--hs-line);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(var(--navy-rgb), .04), 0 30px 60px -42px rgba(var(--navy-rgb), .45);
}

.lp .cmp-head,
.lp .cmp-row { display: grid; grid-template-columns: 1.05fr 1.25fr 1.25fr; align-items: stretch; }

.lp .cmp-head {
    background: var(--navy);
    color: var(--cream);
}
.lp .cmp-head-topic,
.lp .cmp-head-cell {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .95rem 1.5rem;
    font-family: var(--lp-font);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.lp .cmp-head-topic { color: var(--on-dark-muted); }
.lp .cmp-head-cell svg { width: 17px; height: 17px; flex: 0 0 17px; }
.lp .cmp-head-cell--nexo { color: var(--cream); background: rgba(var(--teal-rgb), .22); }
.lp .cmp-head-cell--nexo svg { color: var(--teal-bright); }
.lp .cmp-head-cell--diy { color: var(--on-dark-muted); }
.lp .cmp-head-cell--diy svg { color: rgba(241, 237, 230, .45); }

.lp .cmp-row {
    border-top: 1px solid var(--hs-line);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s var(--lp-ease), transform .55s var(--lp-ease);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.lp .cmp.in-view .cmp-row { opacity: 1; transform: none; }
.lp .cmp-row:hover { background: rgba(var(--navy-rgb), .015); }

.lp .cmp-topic {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0;
    padding: 1.15rem 1.5rem;
    font-family: var(--lp-font);
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
}
.lp .cmp-topic span:first-child {
    font-size: .78rem;
    font-weight: 800;
    color: var(--navy);
    opacity: .28;
    font-variant-numeric: tabular-nums;
}

.lp .cmp-cell {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: 1.15rem 1.5rem;
    border-left: 1px solid var(--hs-line);
}
.lp .cmp-cell svg { width: 19px; height: 19px; flex: 0 0 19px; margin-top: .1rem; }
.lp .cmp-cell p { margin: 0; font-size: 1rem; line-height: 1.55; }

/* the Nexo lane is the one being argued for, so it reads first */
.lp .cmp-cell--nexo { background: rgba(var(--teal-rgb), .06); }
.lp .cmp-cell--nexo svg { color: var(--teal-ink); }
.lp .cmp-cell--nexo p { color: var(--navy); font-weight: 600; }
.lp .cmp-cell--diy svg { color: rgba(var(--navy-rgb), .32); }
.lp .cmp-cell--diy p { color: var(--hs-muted); }

.lp .compare-note {
    margin: 1.5rem 0 0;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--hs-muted);
    max-width: 76ch;
}

/* --------------------------------- responsive --------------------------------- */

@media (max-width: 980px) {
    .lp .svc-split { grid-template-columns: 1fr; gap: 2rem; }
    /* stacked single column — nothing for the photo to stay fixed against,
       so it just flows normally like any other block. Needs `relative`, not
       `static`: the four .svc-shot photos are `position: absolute; inset: 0`
       and rely on this element as their containing block — `static` let them
       escape it and stretch to the next positioned ancestor instead, which is
       exactly what caused mobile's blank/mis-sized photo card. */
    .lp .svc-media { position: relative; top: auto; aspect-ratio: 16 / 8; }
    .lp .svc-link { opacity: 1; max-height: 3rem; }
    .lp .svc-item { background: #fff; border-color: var(--hs-line); }

    .lp .rt-head { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; }
    .lp .rt-stops { grid-template-columns: 1fr 1fr; }
    .lp .rt-track svg.rt-line { display: none; }
    /* no dot to drop a line from here, and no route line to sync with —
       each card already fires on its own real scroll position, so a short
       even stagger between the number/heading/copy is enough */
    .lp .rt-stop-drop { display: none; }
    .lp .rt-stop { padding-top: 0; }
    .lp .rt-stop:nth-child(1) { --d: 0ms; }
    .lp .rt-stop:nth-child(2) { --d: 120ms; }
    .lp .rt-stop:nth-child(3) { --d: 240ms; }
    .lp .rt-stop:nth-child(4) { --d: 360ms; }

    .lp .cmp-head { display: none; }
    .lp .cmp-row { grid-template-columns: 1fr; }
    .lp .cmp-topic { padding-bottom: .5rem; }
    .lp .cmp-cell { border-left: 0; padding-top: .75rem; padding-bottom: .75rem; }
    .lp .cmp-cell--nexo { border-left: 3px solid var(--teal); }
    .lp .cmp-cell--diy { border-left: 3px solid var(--border-light); padding-bottom: 1.2rem; }
}

@media (max-width: 620px) {
    .lp .rt-stops { grid-template-columns: 1fr; }
    /* was 74vw — a single city card nearly filled the phone screen. Smaller,
       per request, so two cards preview at once instead of one. */
    .lp .rt-city { flex-basis: 46vw; }
    .lp .svc-item { padding: 1.1rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lp .svc-shot { transition: opacity 1ms; transform: none; }
    .lp .rt-path { transition: none; stroke-dashoffset: 0; }
    .lp .rt-node { opacity: 1; transform: none; transition: none; }
    .lp .rt-city-row { animation: none; }
    .lp .rt-stop-drop::after { transform: none; transition: none; }
    .lp .rt-stop-num,
    .lp .rt-stop h3,
    .lp .rt-stop p,
    .lp .cmp-row { opacity: 1; transform: none; filter: none; transition: none; }
    .lp .rt-city:hover img { transform: none; }
    .lp .rt-stop:hover { transform: none; }
    /* the matching reduced-motion reset for the node hover-highlight lives
       right next to that rule, near the rest of the .rt-node styling —
       source order matters here (see the comment there) so it can't live
       in this earlier block. */
}

/* ==========================================================================
   Landing page polish — vertical rhythm, type scale, hover behaviour
   Appended last so it settles the values the earlier .lp blocks set. The goal
   is one rhythm and one type scale across every band of the page instead of
   each section carrying its own spacing.
   ========================================================================== */

/* ------------------------------ vertical rhythm ------------------------------ */

/* Sections were a flat 6.75rem top and bottom, which stacked into 216px of
   dead space at every seam. One fluid step, applied to every band. */
.lp section,
.lp .route,
.lp .route-dashboard,
.lp .compare-section,
.lp .vx-ledger-sec,
.lp .final-cta { padding: clamp(3rem, 4.4vw, 4rem) 0; }

/* the closing band carries its own scale, one step down from the sections */
.lp .final-cta h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: -.035em; }
.lp .final-cta p { font-size: 1.08rem; max-width: 46ch; margin-bottom: 1.6rem; }
.lp .final-cta-logo { width: 108px; margin-bottom: 1rem; }

.lp .sec-head { margin-bottom: clamp(1.75rem, 2.8vw, 2.5rem); max-width: 700px; }
.lp .sec-head h2,
.lp section > .wrap > h2 { margin-bottom: .5rem; }

/* the hero's closing curve was 154px of empty navy */
.hero-curve { height: 60px; margin-top: 14px; }
.hero { padding-top: 5rem; }

.lp .pullquote { margin-top: clamp(2rem, 3.5vw, 3rem); padding-top: clamp(1.6rem, 2.5vw, 2.2rem); }
.lp .svc-split { margin-bottom: 0; }
.lp .rt-cities { margin-top: clamp(2rem, 3.5vw, 2.75rem); }
.lp .why-body { margin-bottom: clamp(1.75rem, 3vw, 2.4rem); }
.lp .compare-note { margin-top: 1.25rem; }

/* -------------------------------- type scale -------------------------------- */

/* h2 topped out at 3.25rem (52px at this width), which read as a poster rather
   than a page. The rest of the scale is derived from it. */
.lp .sec-head h2,
.lp section > .wrap > h2 { font-size: clamp(1.95rem, 3.3vw, 2.85rem); letter-spacing: -.035em; line-height: 1.06; }
.lp .rt-head h2 { font-size: clamp(1.95rem, 3.3vw, 2.85rem); }
.lp .why-lead { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.12; max-width: 26ch; }

.lp .sec-head p,
.lp .rt-head .route-intro { font-size: 1.08rem; line-height: 1.6; max-width: 56ch; }
.lp .why-body { font-size: 1.06rem; line-height: 1.68; max-width: 60ch; }

.lp .eyebrow,
.lp .rt-head .eyebrow { font-size: .72rem; letter-spacing: .18em; font-weight: 700; }

.lp h3 { letter-spacing: -.03em; }
.lp .svc-body h3 { font-size: 1.42rem; }
.lp .rt-stop h3 { font-size: 1.14rem; }

/* one muted colour for secondary copy across the page */
.lp .sec-head p,
.lp .svc-body > p,
.lp .why-body,
.lp .compare-note,
.lp .pullquote cite,
.lp .cmp-cell--diy p { color: var(--lp-muted); }

/* hero: slightly smaller display size, tighter tracking, wider measure */
.hero h1 { font-size: clamp(2.35rem, 4.9vw, 3.6rem); letter-spacing: -.04em; font-weight: 700; }
.hero .lede { font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.6; max-width: 54ch; }

/* --------------------------------- interaction --------------------------------- */

/* every text link on the page shares one hover: an underline that sweeps in */
.lp .svc-link,
.lp .service-row-link,
.lp .story-copy a:not(.btn),
.lp .compare-note a {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 200ms var(--lp-ease), color 200ms var(--lp-ease);
}
.lp .svc-link:hover,
.lp .service-row-link:hover,
.lp .story-copy a:not(.btn):hover,
.lp .compare-note a:hover { background-size: 100% 1.5px; }

/* pillars pick up the same lift the cards elsewhere use */
.lp .pillar {
    padding: 1rem 1.1rem .75rem 0;
    border-radius: 14px;
    transition: transform 200ms var(--lp-ease), background 200ms var(--lp-ease);
}
.lp .pillar:hover { transform: translateY(-3px); background: rgba(var(--navy-rgb), .025); }
.lp .pillar h3 { font-size: 1.12rem; margin-bottom: .4rem; }

/* visa ledger rows respond to the cursor instead of sitting flat */
.lp .vx-row { transition: background 180ms var(--lp-ease), padding-left 180ms var(--lp-ease); border-radius: 8px; }
.lp .vx-row:hover { background: rgba(var(--teal-rgb), .09); padding-left: .5rem; }

/* the slide-band chips get the same treatment as the rest of the cards */
.lp .slide-item { transition: transform 200ms var(--lp-ease); }
.lp .slide-item:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .lp .pillar:hover,
    .lp .slide-item:hover { transform: none; }
    .lp .vx-row:hover { padding-left: 0; }
}

/* ==========================================================================
   Warm-light pass — brand kit palette, lighter surface mix
   The kit is four colours: cream #F1EDE6, navy #051F30, teal #4BABC2, coral
   #F56851. Nothing new is introduced here; what changes is the proportion.
   Navy was carrying four full-width bands (hero, sport, route, footer) which
   read cold. Navy now does type and one dark moment; cream and a warm paper
   white carry the page.
   ========================================================================== */

:root {
    /* warm off-white for the "light" sections — pure #fff next to cream reads
       blue-ish and clinical, this keeps the whole page on the cream axis */
    --paper: #fbf9f5;
    --paper-line: #ece5d8;
}

/* ------------------------------- hero: lighter ------------------------------- */

/* the overlay was near-opaque navy over the photograph; letting more of the
   image through makes the top of the page feel like a place, not a slab */
.hero {
    background:
        /* scrim under the trust line, which otherwise sits on bright water */
        linear-gradient(to top, rgba(var(--navy-rgb), .55) 0%, rgba(var(--navy-rgb), .12) 34%, transparent 55%),
        linear-gradient(100deg, rgba(var(--navy-rgb), .9) 0%, rgba(var(--navy-rgb), .76) 30%, rgba(var(--navy-rgb), .44) 62%, rgba(var(--navy-rgb), .16) 100%),
        radial-gradient(70% 90% at 88% 8%, rgba(var(--coral-rgb), .18), transparent 62%),
        url('../img/hero-bg.avif') center/cover no-repeat;
}

/* on a lighter hero the supporting copy needs a touch more weight */
.hero .lede { color: rgba(241, 237, 230, .88); }
.hero .trust { color: rgba(241, 237, 230, .82); }

/* ----------------------------- light section mix ----------------------------- */

.lp #paths,
.lp .vx-ledger-sec,
.lp .faq-sec { background: var(--paper); }

.lp .compare-section { background: var(--cream); }

/* Route: was a second navy band with a photo behind it. Same layout, now on
   paper with a soft teal wash, so the page has one dark moment (sport) rather
   than four. */
.lp .route-dashboard {
    background: var(--paper);
    color: var(--navy);
}
.lp .rt-bg img { opacity: .06; }
.lp .route-dashboard::after {
    background:
        radial-gradient(70% 110% at 4% 0%, rgba(var(--teal-rgb), .16), transparent 62%),
        radial-gradient(60% 100% at 98% 100%, rgba(var(--coral-rgb), .12), transparent 62%);
}

.lp .rt-head h2 { color: var(--navy); }
.lp .rt-head .eyebrow { color: var(--coral-ink); }
.lp .rt-head .route-intro { color: var(--lp-muted); }

.lp .rt-chip {
    background: #fff;
    border-color: var(--paper-line);
    color: var(--navy);
    box-shadow: 0 1px 2px rgba(var(--navy-rgb), .04);
}
.lp .rt-chip svg { color: var(--teal-ink); }

.lp .rt-stop-num { color: var(--coral-ink); }
.lp .rt-stop h3 { color: var(--navy); }
.lp .rt-stop p { color: var(--lp-muted); }

.lp .rt-path { stroke: rgba(var(--teal-rgb), .85); }
.lp .rt-cities-label { color: var(--coral-ink); }
.lp .rt-city { border-color: var(--paper-line); }

/* -------------------------------- why nexo -------------------------------- */

.lp .why-sec { background: var(--cream); }

.lp .why-grid {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    margin-bottom: clamp(2.25rem, 3.5vw, 3rem);
}

.lp .why-copy .eyebrow { display: block; margin-bottom: .7rem; }
.lp .why-copy .why-lead { margin-bottom: .9rem; }
.lp .why-copy .why-body { margin-bottom: 1.4rem; }

.lp .why-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .97rem;
    font-weight: 700;
    color: var(--teal-ink);
    text-decoration: none;
    padding-bottom: 2px;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 200ms var(--lp-ease), color 200ms var(--lp-ease);
}
.lp .why-link:hover { background-size: 100% 1.5px; }
.lp .why-link svg { width: 17px; height: 17px; flex: 0 0 17px; transition: transform 200ms var(--lp-ease); }
.lp .why-link:hover svg { transform: translateX(4px); }

.lp .why-photo {
    position: relative;
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 16 / 11;
    box-shadow: 0 2px 6px rgba(var(--navy-rgb), .06), 0 36px 64px -38px rgba(var(--navy-rgb), .5);
}
.lp .why-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--lp-ease); }
.lp .why-photo:hover img { transform: scale(1.04); }
.lp .why-photo figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 3rem 1.4rem 1.25rem;
    background: linear-gradient(180deg, transparent, rgba(5, 31, 48, .88) 60%);
    color: var(--cream);
    font-size: .98rem;
    line-height: 1.45;
}
.lp .why-photo-tag {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--teal-bright);
    margin-bottom: .3rem;
}

/* pillars sit under the split as a full-width row */
.lp .wrap-reset { max-width: none; padding: 0; }
.lp .why-sec .pillars { border-top: 1px solid rgba(var(--navy-rgb), .1); padding-top: clamp(1.5rem, 2.5vw, 2rem); }

/* --------------------------- warmer surfaces elsewhere --------------------------- */

.lp .svc-item.is-active,
.lp .cmp,
.lp .story-quote--teal { border-color: var(--paper-line); }

.lp .cmp-head { background: var(--navy); }

/* the credential ticker sits between the hero and the first light section */
.lp .slide-band { background: var(--paper); border-color: var(--paper-line); }

@media (max-width: 940px) {
    .lp .why-grid { grid-template-columns: 1fr; }
    .lp .why-photo { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   Services head, reviews band, mirrored FAQ
   Three consecutive sections were all "heading on the left, content on the
   right". They now alternate: ledger left-headed, reviews centred, FAQ
   right-headed — so the eye gets a change of rhythm going down the page.
   ========================================================================== */

/* ------------------------------- services head ------------------------------- */

.lp .svc-head {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: end;
    margin-bottom: clamp(2rem, 3.2vw, 2.75rem);
    padding-bottom: clamp(1.25rem, 2.2vw, 1.75rem);
    border-bottom: 1px solid rgba(var(--navy-rgb), .1);
}

.lp .svc-head .eyebrow { display: block; margin-bottom: .6rem; }
.lp .svc-head h2 { font-size: clamp(1.95rem, 3.3vw, 2.85rem); letter-spacing: -.035em; line-height: 1.06; margin: 0; max-width: 18ch; }
.lp .svc-head-lede { font-size: 1.08rem; line-height: 1.6; color: var(--lp-muted); margin: 0 0 1rem; max-width: 42ch; }

.lp .svc-head-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--teal-ink);
}
.lp .svc-head-meta::before { content: ''; flex: 1; height: 1px; background: rgba(var(--navy-rgb), .14); order: 2; }
.lp .svc-head-count { order: 3; font-size: 1.05rem; letter-spacing: -.02em; color: var(--navy); opacity: .3; }

/* --------------------------- services list: warmer, richer --------------------------- */

/* each pathway carries its own accent from the kit: teal for study, deep teal
   for work, coral for sport */
.lp .svc-item { --svc-accent: var(--teal); --svc-ink: var(--teal-ink); }
.lp .svc-item[data-svc="work"] { --svc-accent: var(--teal-deep); --svc-ink: var(--teal-deep); }
.lp .svc-item[data-svc="sport"] { --svc-accent: var(--coral); --svc-ink: var(--coral-ink); }

.lp .svc-item {
    position: relative;
    grid-template-columns: auto 1fr;
    gap: 1.15rem;
    padding: 1.4rem 1.5rem;
    border-radius: 18px;
}

/* a rule down the left edge that fills in on the active row */
.lp .svc-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 3px;
    background: var(--svc-accent);
    opacity: 0;
    transform: scaleY(.4);
    transform-origin: center;
    transition: opacity 260ms var(--lp-ease), transform 260ms var(--lp-ease);
}
.lp .svc-item.is-active::before { opacity: 1; transform: scaleY(1); }
.lp .svc-item:hover { background: rgba(var(--navy-rgb), .022); }
.lp .svc-item.is-active:hover { background: #fff; }

.lp .svc-item.is-active .svc-num { color: var(--svc-ink); }
.lp .svc-tag,
.lp .svc-item[data-svc="sport"] .svc-tag { color: var(--svc-ink); }
.lp .svc-body h3 { font-size: 1.42rem; line-height: 1.2; margin-bottom: .5rem; }
.lp .svc-body > p { font-size: 1.02rem; line-height: 1.65; max-width: 44ch; }
.lp .svc-link { color: var(--svc-ink); margin-top: 1rem; font-size: .96rem; }
.lp .svc-item.is-active .svc-link { max-height: 3.2rem; }

/* the caption chip on the photo picks up the same accent */
.lp .svc-shot[data-svc-shot="sport"] .svc-shot-tag { color: var(--coral-bright); }

/* ---------------------------------- reviews ---------------------------------- */






/* the global blockquote rule adds a coral rule and display type; a review card
   wants neither — the stars and the attribution already frame it */



/* ------------------------------- FAQ, mirrored ------------------------------- */

/* the ledger above is heading-left; flipping the FAQ keeps two long list
   sections from reading as the same layout twice */
.lp #faq .faq-split { grid-template-columns: 1.12fr .88fr; }
.lp #faq .faq-intro { order: 2; }
.lp #faq .faq-flat { order: 1; }
.lp #faq .faq-intro h2, .lp #faq .faq-intro p { max-width: 26ch; }

@media (max-width: 980px) {
    .lp .svc-head { grid-template-columns: 1fr; align-items: start; gap: 1rem; }
    .lp .svc-head h2 { max-width: none; }
    .lp #faq .faq-split { grid-template-columns: 1fr; }
    .lp #faq .faq-intro { order: 0; }
    .lp #faq .faq-flat { order: 1; }
}

@media (max-width: 680px) {
}


/* ==========================================================================
   Inner pages — one type scale, one surface palette, one form
   Everything outside the landing page (.lp) and the three scoped pages
   (.bk booking, .ct contact, .fq faq) ran on the original heavier scale with
   navy page heroes. This aligns them with the warm system the rest of the
   site now uses, straight off the brand kit: cream and paper surfaces, navy
   ink, teal for structure, coral for emphasis.
   ========================================================================== */

:root {
    --ink: var(--navy);
    --ink-muted: #46606d;   /* body copy on light — 5.5:1 on cream */
    --ink-soft: #6d8794;    /* captions and meta */
}

/* ------------------------------- page heroes ------------------------------- */

/* was a flat navy slab on every inner page */
.page-hero {
    background:
        radial-gradient(80% 130% at 92% -20%, rgba(var(--coral-rgb), .14), transparent 60%),
        radial-gradient(70% 120% at 2% 0%, rgba(var(--teal-rgb), .13), transparent 58%),
        linear-gradient(180deg, #f7f2e8 0%, var(--cream) 100%);
    border-bottom: 1px solid #e4dbc9;
    padding: clamp(3.25rem, 5vw, 4.75rem) 0 clamp(2.5rem, 4vw, 3.5rem);
}

.page-hero .eyebrow { color: var(--coral-ink); display: inline-block; margin-bottom: .7rem; }
.page-hero h1 {
    color: var(--ink);
    font-size: clamp(2.1rem, 4vw, 3.1rem);
    letter-spacing: -.038em;
    line-height: 1.05;
    max-width: 20ch;
    margin-bottom: .7rem;
}
.page-hero .lede { color: var(--ink-muted); font-size: 1.08rem; line-height: 1.6; max-width: 58ch; }
.page-hero .cta { margin-top: 1.6rem; }

/* --------------------------- rhythm on inner pages --------------------------- */

main > section { padding: clamp(2.75rem, 4.2vw, 3.75rem) 0; }
main > section.page-hero + section { padding-top: clamp(2.5rem, 3.6vw, 3.25rem); }
main { min-height: 52vh; }

/* --------------------------- type scale on inner pages --------------------------- */

main > section h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); letter-spacing: -.035em; line-height: 1.1; }
main > section h3 { font-size: 1.24rem; letter-spacing: -.028em; }
main > section p { font-size: 1.02rem; line-height: 1.65; }
main > section .section-lede { font-size: 1.08rem; color: var(--ink-muted); max-width: 58ch; }
main > section .eyebrow { font-size: .72rem; letter-spacing: .18em; font-weight: 700; }

.prose { color: var(--ink-muted); font-size: 1.04rem; line-height: 1.75; max-width: 68ch; }
.prose p { margin: 0 0 1.05em; }
.prose strong { color: var(--ink); font-weight: 700; }

/* ------------------------------ cards + chips ------------------------------ */

.card-grid { gap: 1.25rem; }

.ticket {
    background: #fff;
    border: 1px solid #e8e0d1;
    border-radius: 18px;
    padding: 1.5rem 1.5rem 1.4rem;
    box-shadow: 0 1px 2px rgba(var(--navy-rgb), .04), 0 22px 44px -34px rgba(var(--navy-rgb), .4);
    transition: transform 220ms cubic-bezier(.4, 0, .2, 1), box-shadow 220ms cubic-bezier(.4, 0, .2, 1), border-color 220ms cubic-bezier(.4, 0, .2, 1);
}
.ticket:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--teal-rgb), .5);
    box-shadow: 0 2px 5px rgba(var(--navy-rgb), .05), 0 32px 56px -32px rgba(var(--navy-rgb), .45);
}
.ticket .eyebrow { color: var(--teal-ink); margin-bottom: .55rem; }
.ticket h3 { font-size: 1.3rem; margin-bottom: .45rem; color: var(--ink); }
.ticket p { color: var(--ink-muted); font-size: 1rem; line-height: 1.6; }

/* each card in a grid takes the next accent from the kit, so a row of cards
   isn't four identical teal blocks */
.card-grid .ticket:nth-child(3n+2) .eyebrow { color: var(--coral-ink); }
.card-grid .ticket:nth-child(3n+2):hover { border-color: rgba(var(--coral-rgb), .5); }
.card-grid .ticket:nth-child(3n+3) .eyebrow { color: var(--teal-deep); }

.code-chip {
    background: #fff;
    border: 1px solid #e8e0d1;
    border-radius: 999px;
    padding: .45rem .95rem;
    font-size: .92rem;
    color: var(--ink);
    transition: border-color 200ms ease, transform 200ms ease;
}
.code-chip:hover { border-color: rgba(var(--teal-rgb), .55); transform: translateY(-2px); }
.code-chip .code-num { color: var(--coral-ink); font-weight: 700; }

.detail-block h2 { color: var(--ink); }
.detail-block { border-color: #e8e0d1; }

/* service detail header card */
.pass { border-color: #e8e0d1; box-shadow: 0 1px 2px rgba(var(--navy-rgb), .04), 0 24px 48px -36px rgba(var(--navy-rgb), .4); }
.pass-main .eyebrow { color: var(--coral-ink); }
.pass-main h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -.038em; }
.pass-main .lede { color: var(--ink-muted); font-size: 1.06rem; }

/* ============================== the form system ==============================
   Applied everywhere a form appears (contact, booking, anything later). Roomy
   fields, sentence-case labels at a readable size, a warm border that turns
   teal on focus — closer to the reference form the client liked than the
   compact admin-style fields we had.
   ========================================================================== */

.inquiry-form .field { margin-bottom: 1.15rem; }
.inquiry-form .field-row { gap: 1rem; }

.inquiry-form .field label {
    display: block;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: -.005em;
    text-transform: none;
    color: var(--ink);
    margin-bottom: .4rem;
}

.inquiry-form input[type="text"],
.inquiry-form input[type="email"],
.inquiry-form input[type="tel"],
.inquiry-form input[type="date"],
.inquiry-form select,
.inquiry-form textarea {
    width: 100%;
    min-height: 52px;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid #e2d9c8;
    border-radius: 12px;
    padding: .8rem .95rem;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.inquiry-form textarea { min-height: 120px; line-height: 1.6; resize: none; }

.inquiry-form input:hover,
.inquiry-form select:hover,
.inquiry-form textarea:hover { border-color: #d3c6ae; }

.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 4px rgba(var(--teal-rgb), .16);
}

.inquiry-form ::placeholder { color: #9aabb4; }

.inquiry-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23051f30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 16px 16px;
    cursor: pointer;
}

.field.consent { font-size: .92rem; }
.field.consent input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--teal); }
.field-error { font-size: .86rem; font-weight: 600; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------- phone field: country-code combobox ---------------------- */

.phone-field { position: relative; }

/* one bordered pill holding the code trigger and the number input together,
   instead of two separate boxes side by side */
.phone-combo {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1.5px solid #e2d9c8;
    border-radius: 12px;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}
.phone-combo:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(var(--teal-rgb), .16); }

.phone-combo input[type="tel"] {
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.phone-combo input[type="tel"]:focus { box-shadow: none; }

/* hidden until JS enhances the field (see initPhoneCountryCombo) — until
   then the real <select> below is the visible, fully-functional control */
.phone-cc-trigger {
    display: none;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    padding: 0 .7rem;
    border: 0;
    border-right: 1.5px solid #e2d9c8;
    background: transparent;
    font-family: var(--font-body);
    color: var(--ink);
    cursor: pointer;
}
.phone-combo.is-enhanced .phone-cc-trigger { display: flex; }
.phone-combo.is-enhanced .phone-cc-select-wrap { display: none; }

/* flag is a Unicode regional-indicator emoji (built in JS from the ISO code —
   see initPhoneCountryCombo), not an image, so it's sized with font-size
   rather than width/height/box-shadow. Covers all ~190 countries in the
   list below without needing a hand-drawn SVG per flag. */
.phone-combo .phone-cc-badge { font-size: 17px; line-height: 1; flex: 0 0 auto; font-style: normal; }
.phone-cc-dial { font-size: .92rem; color: var(--slate); }
.phone-cc-caret { width: 14px; height: 14px; flex: 0 0 14px; color: var(--slate); transition: transform 180ms ease; }
.phone-cc-trigger[aria-expanded="true"] .phone-cc-caret { transform: rotate(180deg); }

.phone-cc-select-wrap { flex: 0 0 auto; }
.phone-cc-select-wrap select { width: 140px; border-right: 1.5px solid #e2d9c8; border-radius: 12px 0 0 12px; }

/* the search + list panel, floating below the whole combo */
.phone-cc-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + .5rem);
    left: 0;
    width: min(320px, 100%);
    background: #fff;
    border: 1.5px solid #e2d9c8;
    border-radius: 14px;
    box-shadow: 0 20px 45px -20px rgba(var(--navy-rgb), .35);
    padding: .7rem;
}

.phone-cc-search {
    width: 100%;
    min-height: 42px;
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--ink);
    background: var(--cream);
    border: 1.5px solid #e2d9c8;
    border-radius: 10px;
    padding: .5rem .8rem;
    margin-bottom: .5rem;
}
.phone-cc-search:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(var(--teal-rgb), .16); }

.phone-cc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
}
.phone-cc-option {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .5rem;
    border-radius: 8px;
    font-size: .95rem;
    color: var(--ink);
    cursor: pointer;
}
.phone-cc-option:hover, .phone-cc-option.is-selected { background: rgba(var(--teal-rgb), .1); }
.phone-cc-list .phone-cc-option-flag { font-size: 18px; line-height: 1; flex: 0 0 22px; font-style: normal; }
.phone-cc-option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-cc-option-dial { color: var(--slate); font-size: .9rem; flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
    .ticket:hover, .code-chip:hover { transform: none; }
}

/* ==========================================================================
   Route section — gradient band instead of a washed-out cream slab
   Cream on the copy side, brand teal on the image side, with the photograph
   fading in from the right underneath. Keeps the section light without the
   flat, milky look, and gives the white stop cards something to sit against.
   ========================================================================== */

/* Warm gradient: cream where the copy sits, sunset tones on the right, with
   the outback photograph rising out of the bottom-right corner. */
.lp .route-dashboard {
    background: linear-gradient(104deg, var(--cream) 0%, #f4ece1 48%, #f3e0d1 84%, #efd6c4 100%);
    border-top: 1px solid rgba(var(--coral-rgb), .16);
    border-bottom: 1px solid rgba(var(--coral-rgb), .16);
}

.lp .rt-bg { overflow: hidden; }
.lp .rt-bg img {
    opacity: .34;
    object-position: 62% 66%;
    /* the photograph lives in the bottom-right corner only, well away from the copy */
    -webkit-mask-image: radial-gradient(90% 95% at 100% 100%, #000 6%, rgba(0, 0, 0, .5) 34%, transparent 66%);
    mask-image: radial-gradient(90% 95% at 100% 100%, #000 6%, rgba(0, 0, 0, .5) 34%, transparent 66%);
}

.lp .route-dashboard::after {
    background:
        linear-gradient(104deg, rgba(241, 237, 230, .96) 0%, rgba(241, 237, 230, .84) 36%, rgba(241, 237, 230, .44) 68%, rgba(241, 237, 230, .18) 100%),
        /* settle the bottom edge back into cream so the band doesn't end on a line */
        linear-gradient(to top, rgba(241, 237, 230, .85) 0%, transparent 16%),
        radial-gradient(70% 90% at 4% 0%, rgba(var(--teal-rgb), .16), transparent 60%);
}

.lp .rt-chip { background: rgba(255, 255, 255, .94); }
.lp .rt-city { border-color: rgba(255, 255, 255, .55); }
.lp .rt-path { stroke: rgba(var(--navy-rgb), .5); }

@media (max-width: 940px) {
    /* stacked, the photo would sit behind the text — pull it back */
    .lp .rt-bg img { opacity: .32; }
}

/* A 4-card grid in three columns leaves one card stranded on its own row.
   When there are exactly four (or two), lay them out two-up instead. */
.card-grid:has(> :nth-child(2):last-child),
.card-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 760px) {
    .card-grid:has(> :nth-child(2):last-child),
    .card-grid:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Type pass 2 — a step up in heading size, one accent for the services list
   The employer block ("Hiring or signing someone from overseas?") is the
   pattern the client picked out: small eyebrow, big heading, one punchy
   sentence, then the detail. These rules give every section that shape.
   ========================================================================== */

/* headings up one step */
.lp .sec-head h2,
.lp section > .wrap > h2,
.lp .rt-head h2,
.lp .svc-head h2,
.lp .story-copy h2 { font-size: clamp(2.05rem, 3.5vw, 3.05rem); letter-spacing: -.035em; line-height: 1.06; }
.lp .why-lead { font-size: clamp(1.85rem, 3.2vw, 2.7rem); }
.lp .final-cta h2 { font-size: clamp(2rem, 3.6vw, 3rem); }

/* the opening sentence of a section carries more weight than the detail that
   follows it — that's what makes the employer block read well */
.lp .sec-head p,
.lp .svc-head-lede,
.lp .rt-head .route-intro,
.lp .cm-head p,
.lp .story-copy p:first-of-type {
    font-size: 1.14rem;
    line-height: 1.55;
    color: #3d5a68;
}
.lp .story-copy p:first-of-type { font-weight: 500; margin-bottom: 1rem; }
.lp .on-navy .story-copy p:first-of-type { color: rgba(241, 237, 230, .92); }
.lp .story-copy p:not(:first-of-type) { font-size: 1.02rem; line-height: 1.68; }

.lp .eyebrow { font-size: .74rem; letter-spacing: .2em; }

/* Services: one accent across all three pathways, as requested — coral for
   study, work and sport alike. */
.lp .svc-item,
.lp .svc-item[data-svc="work"],
.lp .svc-item[data-svc="sport"] { --svc-accent: var(--coral); --svc-ink: var(--coral-ink); }
.lp .svc-shot .svc-shot-tag,
.lp .svc-shot[data-svc-shot="sport"] .svc-shot-tag { color: var(--coral-bright); }
.lp .svc-item.is-active { box-shadow: 0 1px 2px rgba(var(--navy-rgb), .05), 0 22px 44px -30px rgba(var(--coral-rgb), .45); }
.lp .svc-head-meta { color: var(--coral-ink); }

/* ==========================================================================
   Reviews band — dark
   The one dark moment between the ledger and the FAQ. Warm navy so it reads
   as an accent rather than a hole in the page, with the cards staying white
   so the quotes keep full contrast.
   ========================================================================== */


/* faint dot field, the same motif the booking hero uses */




/* the dark band's cream text was cascading into the white cards */

/* let the heading hold one line at desktop */

/* ==========================================================================
   Section labels + services head
   Coral was doing too much work — it labelled every section as well as every
   button. Section labels move to brand teal (the "light blue" of the kit) and
   go up a size; coral stays for actions and small accents.
   ========================================================================== */

.lp .eyebrow,
.lp .vx-eyebrow,
.lp .rt-cities-label,
.lp .svc-head-meta,
.lp .rt-head .eyebrow,
.lp .why-copy .eyebrow {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--teal-ink);
}

/* on the dark bands the same label in the brighter teal — the route band is
   light now, so its city label stays on the darker teal */
.lp .on-navy .eyebrow,

/* one coral label left, on the comparison, so the accent still appears */
.lp .compare-section .eyebrow { color: var(--coral-ink); }

/* ------------------------------- services head ------------------------------- */

/* centred title block, no rule underneath */
.lp .svc-head {
    display: block;
    max-width: 760px;
    margin: 0 auto clamp(2.25rem, 3.4vw, 3rem);
    padding-bottom: 0;
    border-bottom: 0;
    text-align: center;
}
.lp .svc-head .eyebrow { display: block; margin-bottom: .75rem; }
.lp .svc-head h2 { max-width: none; margin: 0 auto .7rem; }
.lp .svc-head-lede { margin: 0 auto; max-width: 52ch; }

/* "03 · Three ways in" as a light-blue pill under the lede */
.lp .svc-head-meta {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 1.25rem 0 0;
    padding: .42rem .95rem;
    border-radius: 999px;
    background: rgba(var(--teal-rgb), .13);
    border: 1px solid rgba(var(--teal-rgb), .3);
    font-size: .78rem;
}
.lp .svc-head-meta::before { content: none; }
.lp .svc-head-count {
    order: 0;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--teal-ink);
    opacity: 1;
    font-variant-numeric: tabular-nums;
}

/* the ghost "17" is gone from the ledger head; keep the heading centred in
   its own column rather than sitting against a hole where the number was */
.lp .vx-head { align-self: start; }

/* .lp .svc-body > p (the muted-body rule) outranks a plain .lp .svc-tag, so
   the tag needs to match at the same depth to keep its accent colour */
.lp .svc-body > .svc-tag { color: var(--svc-ink); }

/* Services head: headline on one line, centred, with the supporting sentence
   under it. The container widens so the line has room at desktop; the clamp
   still shrinks it on narrower screens rather than forcing an overflow. */
.lp .svc-head { max-width: 1080px; }
.lp .svc-head h2 {
    font-size: clamp(1.75rem, 3.15vw, 2.85rem);
    max-width: none;
    text-wrap: balance;
}
.lp .svc-head-lede { max-width: 58ch; }

/* let the supporting sentence sit on one line too, and balance it if it wraps */
.lp .svc-head-lede { max-width: 70ch; text-wrap: balance; }

/* The "not sure which applies to you?" prompt now sits under the heading in
   the left column rather than at the foot of the list, so it reads as part of
   the section's opening rather than an afterthought. */
.lp .vx-head .vx-foot {
    display: block;
    margin-top: clamp(1.5rem, 2.6vw, 2.1rem);
    padding-top: clamp(1.25rem, 2vw, 1.6rem);
    border-top: 1px solid rgba(var(--navy-rgb), .14);
}
.lp .vx-head .vx-foot-note {
    max-width: 30ch;
    font-size: 1.06rem;
    margin-bottom: 1.15rem;
}

/* ==========================================================================
   Route feature line + services head
   The route head had three pill chips sitting directly above four card
   boxes — five boxed shapes in one glance. The features are now a quiet
   line of icon + label, so the cards below are the only boxes in the band.
   ========================================================================== */

.lp .rt-marks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 2rem;
    align-self: end;
}
.lp .rt-marks li {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy);
}
.lp .rt-marks svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--teal-ink); }
.lp .rt-marks li:nth-child(2) svg { color: var(--coral-ink); }
.lp .rt-marks li:nth-child(3) svg { color: var(--teal-deep); }

/* the head is a two-column band again: copy left, the three marks right */
.lp .rt-head { align-items: end; }

/* center the route dashboard heading and allow it to break into two lines */
.lp .route-dashboard .rt-head {
    text-align: center;
}
.lp .route-dashboard .rt-head h2.split-line {
    display: inline-grid;
    justify-items: center;
    text-align: center;
    gap: .08rem;
    margin: 0 auto .55rem;
    line-height: 1.04;
    letter-spacing: -.035em;
    font-size: clamp(2.1rem, 3.7vw, 2.9rem);
    max-width: min(48rem, 100%);
    white-space: normal;
    overflow-wrap: normal;
    word-break: keep-all;
}
.lp .route-dashboard .rt-head h2.split-line span {
    display: block;
}
/* Each span is its own block, so the line 1 / line 2 split always holds —
   no white-space:nowrap needed to force it. A forced nowrap span shrinks
   to its own unwrapped content width and only centers within that box, not
   the viewport, so it drifted off-center the moment the text was wider
   than the box (which it always was) instead of just wrapping like normal
   centered text. Plain wrapping is what actually stays centered at every
   width. */

/* ------------------------------- services head ------------------------------- */

/* label sits between two short brand rules instead of floating on its own.
   Needs to match .lp .svc-head .eyebrow (which sets display:block) on
   specificity, hence the extra step. */
.lp .head-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    margin-bottom: .9rem;
}
.lp .head-label::before,
.lp .head-label::after {
    content: '';
    width: 34px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--teal));
}
.lp .head-label::after { background: linear-gradient(90deg, var(--teal), transparent); }

/* the nexo line closes the block — the same arc as the logo and the hero */
.lp .svc-head-arc { display: block; width: 220px; height: auto; margin: 1.35rem auto 0; }

@media (max-width: 980px) {
    .lp .rt-marks { align-self: start; gap: .6rem 1.5rem; }
}

/* ==========================================================================
   Our commitments — replaces the reviews band
   Nexo has no clients yet, so the page states what it will be held to instead
   of borrowing social proof. Same dark band, padding and container as the
   section it replaces, so the light/dark rhythm of the page is unchanged.
   The items use the .pillar treatment from the Why Nexo block: a short rule
   in a kit colour above a short title.
   ========================================================================== */

.lp .cm-sec {
    position: relative;
    background: var(--warm-navy);
    color: var(--cream);
    overflow: hidden;
}

/* the same dot field the band already carried */
.lp .cm-sec::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(241, 237, 230, .14) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: .45;
    pointer-events: none;
}
.lp .cm-sec .wrap { position: relative; z-index: 2; }

.lp .cm-head { max-width: 720px; margin: 0 auto clamp(2rem, 3.2vw, 2.75rem); text-align: center; }
.lp .cm-head .eyebrow { display: block; margin-bottom: .6rem; color: var(--teal-bright); }
.lp .cm-head h2 { font-size: clamp(2.05rem, 3.5vw, 3.05rem); letter-spacing: -.035em; color: var(--cream); margin-bottom: .55rem; }
.lp .cm-head p { color: var(--on-dark-muted); margin: 0; }

/* 2 x 2 on desktop, stacked on mobile */
.lp .cm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; }

.lp .cm-item {
    padding: 1rem 1.1rem .75rem 0;
    border-radius: 14px;
    transition: transform 200ms var(--lp-ease), background 200ms var(--lp-ease);
}
.lp .cm-item:hover { transform: translateY(-3px); background: rgba(241, 237, 230, .05); }

/* the pillar rule, in kit order: teal, coral, navy-on-dark reads as cream */
.lp .cm-item::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 3px;
    background: var(--teal);
    margin-bottom: 1rem;
}
.lp .cm-item:nth-child(2)::before { background: var(--coral); }
.lp .cm-item:nth-child(3)::before { background: var(--teal-bright); }
.lp .cm-item:nth-child(4)::before { background: var(--coral-bright); }

.lp .cm-item h3 { font-size: 1.12rem; color: var(--cream); margin-bottom: .4rem; }
.lp .cm-item p { font-size: 1rem; line-height: 1.6; color: var(--on-dark-muted); margin: 0; }

.lp .cm-foot {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: clamp(1.5rem, 2.5vw, 2rem) 0 0;
    font-size: .95rem;
    color: var(--on-dark-muted);
}
.lp .cm-foot a {
    font-weight: 700;
    color: var(--teal-bright);
    text-decoration: none;
    padding-bottom: 2px;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 200ms var(--lp-ease);
}
.lp .cm-foot a:hover { background-size: 100% 1.5px; }

@media (max-width: 720px) {
    .lp .cm-grid { grid-template-columns: 1fr; gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lp .cm-item:hover { transform: none; }
}

/* ==========================================================================
   Route section — centred head, animated flight path
   The head is centred over the four stops so the band reads as one block
   rather than copy on the left and a list floating right. The path gains a
   permanent dotted trail, a line that draws itself in, four station dots that
   light up in sequence, and a plane that flies the route on a slow loop.
   ========================================================================== */

/* the arc under the services head is gone */
.lp .svc-head-arc { display: none; }

/* ------------------------------- centred head ------------------------------- */

.lp .rt-head {
    display: block;
    max-width: 780px;
    margin: 0 auto clamp(1.75rem, 2.8vw, 2.5rem);
    text-align: center;
}
.lp .rt-head .eyebrow { display: block; margin-bottom: .7rem; }
.lp .rt-head h2 { margin: 0 auto .6rem; max-width: 20ch; }
.lp .rt-head .route-intro { margin: 0 auto; max-width: 60ch; }

.lp .rt-marks {
    justify-content: center;
    align-self: auto;
    margin-top: 1.35rem;
    gap: .6rem 1.9rem;
}

/* --------------------------- the path and its motion --------------------------- */

.lp .rt-cities { margin-top: clamp(1.75rem, 3vw, 2.4rem); }

/* Ported directly from the approved prototype (nexo-home-prototype 01.html):
   same viewBox, same path, same node positions/colours, same draw-in timing
   and easing. --rt-len is the path's real length, computed in JS
   (getTotalLength, see initRoutePath in site.js) so the dash pattern always
   matches the curve exactly; 1000 is just a sane fallback before JS runs. */
.lp .rt-path { fill: none; stroke: var(--navy); stroke-width: 7; stroke-linecap: round; vector-effect: none; }
.lp .rt-path {
    stroke-dasharray: var(--rt-len, 1000);
    stroke-dashoffset: var(--rt-len, 1000);
    transition: stroke-dashoffset 2.1s cubic-bezier(.5, 0, .2, 1);
}
.lp .rt-track.in-view .rt-path { stroke-dashoffset: 0; }

/* Four solid nodes on the curve: navy start, two teal waypoints, a larger
   coral finish — the brand mark's own dot convention. Each pops in with a
   staggered scale + opacity transition once the track is in view, on the
   same per-node delays as the prototype (no continuous pulsing). */
.lp .rt-node {
    fill: var(--teal);
    opacity: 0;
    transform: scale(.4);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity .45s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.lp .rt-node-start { fill: var(--navy); }
.lp .rt-node-end { fill: var(--coral); }

.lp .rt-track.in-view .rt-node { opacity: 1; transform: scale(1); }
.lp .rt-track.in-view .rt-node:nth-of-type(1) { transition-delay: .25s; }
.lp .rt-track.in-view .rt-node:nth-of-type(2) { transition-delay: .85s; }
.lp .rt-track.in-view .rt-node:nth-of-type(3) { transition-delay: 1.4s; }
.lp .rt-track.in-view .rt-node:nth-of-type(4) { transition-delay: 1.95s; }

/* hovering a stop card (.rt-stop:hover, defined with the rest of the card
   styling above) lights its dot back up and dims the other three — the
   explicit 0s delay matters: without it these would inherit whichever
   per-node arrival delay is set above, and hovering stop 4 would sit there
   for nearly 2s before its dot visibly reacted. */
.lp .rt-track:has(.rt-stop:hover) .rt-node { opacity: .35; transition-delay: 0s; }
.lp .rt-track:has(.rt-stop:nth-child(1):hover) .rt-node:nth-of-type(1),
.lp .rt-track:has(.rt-stop:nth-child(2):hover) .rt-node:nth-of-type(2),
.lp .rt-track:has(.rt-stop:nth-child(3):hover) .rt-node:nth-of-type(3),
.lp .rt-track:has(.rt-stop:nth-child(4):hover) .rt-node:nth-of-type(4) {
    opacity: 1;
    transform: scale(1.35);
    transition-delay: 0s;
}
/* placed here rather than with the other reduced-motion rules further up —
   specificity ties with the hover rule above, so this has to come after it
   in the file to actually win. */
@media (prefers-reduced-motion: reduce) {
    .lp .rt-track:has(.rt-stop:hover) .rt-node,
    .lp .rt-track:has(.rt-stop:nth-child(1):hover) .rt-node:nth-of-type(1),
    .lp .rt-track:has(.rt-stop:nth-child(2):hover) .rt-node:nth-of-type(2),
    .lp .rt-track:has(.rt-stop:nth-child(3):hover) .rt-node:nth-of-type(3),
    .lp .rt-track:has(.rt-stop:nth-child(4):hover) .rt-node:nth-of-type(4) { transform: none; }
}

/* the numbers get a little more presence as the cards arrive */
.lp .rt-stop-num { font-size: .82rem; letter-spacing: .18em; }

/* ==========================================================================
   Route stops — centred under their own dot
   The head and the path above are both centred, but each stop's number,
   heading and copy still started flush against the column's left edge —
   so the drop-line pointed at a dot in the middle of the column while the
   text it led to sat off to one side, and with barely any gap between the
   four, stop 1's copy ran right up against stop 2's label. Centring each
   stop under its dot (and letting the copy wrap into a short, even block
   instead of the full column width) gives all four the same visual centre
   as the path above and opens real air between them.
   ========================================================================== */

.lp .rt-stops { column-gap: 2rem; }

.lp .rt-stop {
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
}
.lp .rt-stop-drop { transform: translateX(-50%); }

.lp .rt-stop p {
    max-width: 26ch;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 620px) {
    .lp .rt-stop p { max-width: 34ch; }
}

/* below 980px the SVG path and its drop-lines are hidden (see the .rt-track
   svg.rt-line / .rt-stop-drop rules above), which also removes the padding
   that used to separate the marks row from "STOP 1" — put a little of that
   space back so the two rows don't collide. */
@media (max-width: 980px) {
    .lp .rt-stops { margin-top: 1.25rem; }
}

/* ==========================================================================
   Route head — services treatment, one-line title, highlighted lede
   ========================================================================== */

/* the label sits between two brand rules on both sections now */
.lp .rt-head .head-label { justify-content: center; margin-bottom: .9rem; }

/* title holds one line and shrinks with the viewport rather than wrapping */
.lp .rt-head h2 { max-width: none; font-size: clamp(1.75rem, 3.15vw, 2.85rem); }

/* the supporting line is the one piece of highlighted copy in the section:
   short, bold, brand teal, on a soft tint of the same colour */
.lp .rt-head .route-intro {
    display: inline-block;
    max-width: none;
    margin: .35rem auto 0;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    background: rgba(var(--teal-rgb), .14);
    color: var(--teal-ink);
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.4;
}

@media (max-width: 720px) {
    .lp .rt-head .route-intro { display: block; border-radius: 14px; }
}

/* The label needs to outrank ".lp .rt-head .eyebrow { display: block }" and
   its services twin, so it matches on the same number of classes and comes
   last in the sheet. */
.lp .eyebrow.head-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
}
.lp .eyebrow.head-label::before,
.lp .eyebrow.head-label::after {
    content: '';
    width: 34px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--teal));
}
.lp .eyebrow.head-label::after { background: linear-gradient(90deg, var(--teal), transparent); }

/* ==========================================================================
   Route lede, comparison head, pillars and commitments
   The rule-above-the-title treatment was doing duty in two different sections
   and reading dated. The Why Nexo block now runs on numerals, the commitments
   on icons, so the two read as different kinds of list.
   ========================================================================== */

/* ------------------------------- route lede ------------------------------- */

/* no tint behind it — just larger, bolder, in coral, on the display face */
.lp .rt-head .route-intro {
    display: block;
    padding: 0;
    background: none;
    margin: .55rem auto 0;
    max-width: 34ch;
    font-family: var(--lp-font);
    font-size: clamp(1.15rem, 1.6vw, 1.38rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.35;
    color: var(--coral-ink);
}

/* ---------------------------- comparison section ---------------------------- */

/* centred head, matching services and how-it-works */
.lp .cmp-head-block { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.lp .cmp-head-block h2 { margin-left: auto; margin-right: auto; max-width: 22ch; }
.lp .cmp-head-block p { margin-left: auto; margin-right: auto; }

/* warmer table: the header band picks up the sunset tones from the route
   band above it, and the DIY lane sits on warm sand rather than plain white */
.lp .cmp-head {
    background:
        linear-gradient(100deg, var(--navy) 0%, var(--navy-soft) 62%, #1a4256 100%);
}
.lp .cmp-head-cell--nexo { background: rgba(var(--teal-rgb), .3); }
.lp .cmp-head-cell--diy { background: rgba(var(--coral-rgb), .18); color: rgba(241, 237, 230, .85); }
.lp .cmp-head-cell--diy svg { color: var(--coral-bright); }

.lp .cmp-cell--nexo { background: rgba(var(--teal-rgb), .09); }
.lp .cmp-cell--diy { background: #fdf6ee; }
.lp .cmp-cell--diy svg { color: rgba(var(--coral-rgb), .6); }
.lp .cmp-topic span:first-child { color: var(--coral-ink); opacity: .8; }
.lp .cmp-row:hover .cmp-cell--nexo { background: rgba(var(--teal-rgb), .14); }
.lp .cmp-row:hover .cmp-cell--diy { background: #fbeee0; }

/* --------------------------- Why Nexo: numerals --------------------------- */

.lp .pillar::before { content: none; }

.lp .pillar {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .85rem;
    align-items: baseline;
    padding: .25rem 1.1rem .5rem 0;
}
.lp .pillar-num {
    grid-row: 1 / 3;
    font-family: var(--lp-font);
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(var(--teal-rgb), .85);
    transition: color 220ms var(--lp-ease), -webkit-text-stroke-color 220ms var(--lp-ease);
}
.lp .pillar:nth-child(2) .pillar-num { -webkit-text-stroke-color: rgba(var(--coral-rgb), .9); }
.lp .pillar:nth-child(3) .pillar-num { -webkit-text-stroke-color: rgba(var(--navy-rgb), .55); }
.lp .pillar:hover .pillar-num { color: rgba(var(--teal-rgb), .16); }
.lp .pillar:nth-child(2):hover .pillar-num { color: rgba(var(--coral-rgb), .16); }
.lp .pillar:nth-child(3):hover .pillar-num { color: rgba(var(--navy-rgb), .1); }
.lp .pillar h3 { margin-bottom: .3rem; }

/* --------------------------- commitments: icons --------------------------- */

.lp .cm-item::before { content: none; }

.lp .cm-item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    align-items: start;
    padding: .9rem 1.1rem .9rem 0;
}
.lp .cm-icon {
    grid-row: 1 / 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 10px;
    border-radius: 50%;
    background: rgba(241, 237, 230, .1);
    border: 1px solid var(--border-dark);
    color: var(--teal-bright);
    transition: background 220ms var(--lp-ease), color 220ms var(--lp-ease), transform 220ms var(--lp-ease);
}
.lp .cm-icon svg { width: 100%; height: 100%; }
.lp .cm-item:nth-child(2) .cm-icon,
.lp .cm-item:nth-child(4) .cm-icon { color: var(--coral-bright); }
.lp .cm-item:hover .cm-icon { background: var(--teal); color: var(--navy); transform: rotate(-4deg) scale(1.05); }
.lp .cm-item:nth-child(2):hover .cm-icon,
.lp .cm-item:nth-child(4):hover .cm-icon { background: var(--coral); color: var(--navy); }
.lp .cm-item h3 { margin-bottom: .3rem; }

@media (prefers-reduced-motion: reduce) {
    .lp .cm-item:hover .cm-icon { transform: none; }
}

/* keep the coral line on one line at desktop */
.lp .rt-head .route-intro { max-width: 62ch; text-wrap: balance; }

/* ==========================================================================
   Section heads — one shared shape
   Services, How it works and DIY vs Nexo now share the same block: label
   between two rules, headline on a single line, one line of supporting copy.
   Reference cue from matildamigration.com: a heavy headline over a darker,
   larger caption than the muted grey we were using.
   ========================================================================== */

/* headline: heavier and tighter, and allowed the full container so it holds
   one line rather than breaking at an arbitrary measure. The route heading
   is excluded here — its copy runs long, so it needs to wrap and stay
   centred rather than being forced onto one unbreakable (and overflowing)
   line; see the .rt-head h2 rule below instead. */
.lp .svc-head h2,
.lp .cmp-head-block h2 {
    max-width: none;
    font-weight: 800;
    letter-spacing: -.042em;
    line-height: 1.05;
    font-size: clamp(1.7rem, 3.05vw, 2.8rem);
    text-wrap: nowrap;
}
.lp .rt-head h2 {
    max-width: none;
    font-weight: 800;
    letter-spacing: -.042em;
    line-height: 1.15;
    font-size: clamp(1.7rem, 3.05vw, 2.8rem);
    text-wrap: balance;
}

/* the caption under each headline: darker and a step larger, one line */
.lp .svc-head-lede,
.lp .cmp-head-block p {
    max-width: none;
    font-size: clamp(1.02rem, 1.35vw, 1.16rem);
    line-height: 1.5;
    color: #2f4652;
    text-wrap: balance;
}

/* the DIY label joins the others in brand teal */
.lp .compare-section .eyebrow { color: var(--teal-ink); }

/* the comparison block sits centred like the other two */
.lp .cmp-head-block { max-width: none; }

@media (max-width: 900px) {
    /* below this the headlines have to wrap, so let them */
    .lp .svc-head h2,
    .lp .cmp-head-block h2 { text-wrap: balance; }
}

/* ==========================================================================
   Home FAQ intro — headline and two links, nothing else
   The sticky column carried a lede and a bordered card; it now carries the
   label, one very large headline, and two plain links.
   ========================================================================== */

.lp #faq .faq-intro h2 {
    font-size: clamp(2.2rem, 4.2vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -.04em;
    max-width: 12ch;
    margin-bottom: 1.4rem;
}

.lp #faq .faq-links { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.lp #faq .faq-links a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--teal-ink);
    text-decoration: none;
    padding-bottom: 3px;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 200ms var(--lp-ease);
}
.lp #faq .faq-links a::after { content: '→'; font-size: .95em; transition: transform 200ms var(--lp-ease); }
.lp #faq .faq-links a:hover { background-size: 100% 1.5px; }
.lp #faq .faq-links a:hover::after { transform: translateX(3px); }
.lp #faq .faq-links a + a { color: var(--coral-ink); }

/* ==========================================================================
   Home FAQ list — editorial, not another card stack
   Every other section on the page is built from cards and panels. This one is
   deliberately the opposite: no container, no chevron button, just large
   questions on hairlines with a thin plus that turns into a cross, and the
   category shown as a small side note rather than a stacked label.
   ========================================================================== */

.lp #faq .faq-flat { border-top: 0; }

/* category as a hairline divider with the label sitting on it */
.lp #faq .faq-group-label {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 2.6rem 0 .2rem;
    font-size: .72rem;
    letter-spacing: .2em;
    color: var(--teal-ink);
}
.lp #faq .faq-group-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(var(--navy-rgb), .12);
}
.lp #faq .faq-flat .faq-group-label:first-child { margin-top: 0; }

/* questions carry the section: larger, roomier, hairline between */
.lp #faq .faq-item { border-bottom: 1px solid rgba(var(--navy-rgb), .1); }
.lp #faq .faq-item summary {
    font-size: clamp(1.08rem, 1.5vw, 1.24rem);
    font-weight: 700;
    letter-spacing: -.022em;
    padding: 1.35rem 3rem 1.35rem 0;
    transition: color 200ms var(--lp-ease), padding-left 200ms var(--lp-ease);
}
.lp #faq .faq-item summary:hover { color: var(--teal-ink); padding-left: .35rem; }
.lp #faq .faq-item.is-open summary { color: var(--navy); }

.lp #faq .faq-answer { padding: 0 3rem 1.5rem 0; }
.lp #faq .faq-answer p { font-size: 1.02rem; line-height: 1.7; color: var(--lp-muted); max-width: 62ch; }

@media (prefers-reduced-motion: reduce) {
    .lp #faq .faq-item summary:hover { padding-left: 0; }
}

/* the intro column is just a headline and two links now, so give the
   questions the width instead of leaving a third of the row empty.
   Desktop only — unscoped, these two came after (and so beat) the
   max-width:940px single-column/static rules above, silently reinstating
   the cramped two-column sticky rail on mobile. */
@media (min-width: 941px) {
    .lp #faq .faq-split { grid-template-columns: 1.45fr .55fr; gap: clamp(2rem, 4vw, 3.5rem); }
    .lp #faq .faq-intro { position: sticky; top: 7rem; }
}

/* ==========================================================================
   Home FAQ — chevron dropdown, restated
   Back to a chevron rather than a plus, but not the plain circled button used
   elsewhere: the chevron sits bare until you approach it, when a soft disc
   grows in behind it. Open flips it and turns the disc coral.
   ========================================================================== */

.lp #faq .faq-item summary .faq-toggle {
    position: absolute;
    right: 0;
    /* centred against the question, which can run to two lines */
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* the disc that grows in on hover / open */
.lp #faq .faq-item summary .faq-toggle::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(var(--teal-rgb), .16);
    opacity: 0;
    transform: scale(.45);
    transition: opacity 220ms var(--lp-ease), transform 260ms cubic-bezier(.34, 1.4, .64, 1), background 220ms var(--lp-ease);
}
.lp #faq .faq-item summary:hover .faq-toggle::after { opacity: 1; transform: scale(1); }
.lp #faq .faq-item.is-open summary .faq-toggle::after { opacity: 1; transform: scale(1); background: rgba(var(--coral-rgb), .18); }

/* the chevron itself, drawn from two borders so it stays crisp */
.lp #faq .faq-item summary .faq-toggle::before {
    content: '';
    position: relative;
    z-index: 1;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--navy);
    border-bottom: 2px solid var(--navy);
    border-radius: 1px;
    background: transparent;
    /* optical centring via margin so the rotation stays clean */
    margin-top: -4px;
    transform: rotate(45deg);
    transition: transform 260ms cubic-bezier(.34, 1.4, .64, 1), border-color 220ms var(--lp-ease);
}
.lp #faq .faq-item.is-open summary .faq-toggle::before {
    margin-top: 3px;
    transform: rotate(-135deg);
    border-color: var(--coral-ink);
}

/* the short line under the headline */
.lp #faq .faq-note {
    margin: 0 0 1.3rem;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--lp-muted);
    max-width: 26ch;
}
.lp #faq .faq-intro h2 { margin-bottom: .7rem; }

@media (prefers-reduced-motion: reduce) {
    .lp #faq .faq-item summary .faq-toggle::after,
    .lp #faq .faq-item summary .faq-toggle::before { transition: none; }
}

/* ==========================================================================
   TRIAL — final CTA over the outback photograph
   Delete this whole block to go back to the flat teal band.
   Deep brand blue: teal-ink into teal-deep into navy, with the kangaroo
   sunset showing through as silhouettes. Copy flips to cream for contrast.
   ========================================================================== */

.lp .final-cta {
    position: relative;
    overflow: hidden;
    color: var(--cream);
    background: linear-gradient(168deg, #1f6577 0%, #124e63 44%, #06293a 100%);
}

.lp .final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/australia_kangaroos.webp') center 62% / cover no-repeat;
    opacity: .34;
    mix-blend-mode: luminosity;
}

/* keeps the photograph as texture and holds contrast under the copy */
.lp .final-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(70% 100% at 50% 118%, rgba(var(--teal-rgb), .34), transparent 60%),
        linear-gradient(180deg, rgba(6, 41, 58, .55) 0%, rgba(6, 41, 58, .38) 42%, rgba(6, 41, 58, .62) 100%);
}

.lp .final-cta .wrap { position: relative; z-index: 2; }
.lp .final-cta h2 { color: var(--cream); }
.lp .final-cta p { color: rgba(241, 237, 230, .82); }

/* the real mark, not a hand-drawn stand-in — a soft coral glow behind it
   gives the closing moment a little brand presence of its own */
.lp .final-cta-logo { filter: drop-shadow(0 0 26px rgba(var(--coral-rgb), .38)); }

/* the secondary button, if a WhatsApp number is set, needs the dark variant */
.lp .final-cta .btn-ghost-light { color: var(--cream); border-color: var(--border-dark); }
.lp .final-cta .btn-ghost-light:hover { border-color: var(--cream); }

/* ==========================================================================
   JOY BAND — the photo wall, plus the "these photos are alive" treatments
   that go with it.

   The site had plenty of skylines and flat-lays and very few faces. This
   block is the counterweight: warm, saturated, always drifting. Two rows
   scroll in opposite directions using the same duplicate-the-items trick as
   .slide-band, so the loop is seamless with no JS.

   Everything here degrades to a static, wrapped grid under
   prefers-reduced-motion — the duplicate items are display:none'd there so
   nothing is shown (or clipped) twice.
   ========================================================================== */

.joy-sec {
    position: relative;
    overflow: hidden;
    padding: 5rem 0 5.5rem;
    background:
        radial-gradient(80% 120% at 12% 0%, rgba(var(--teal-rgb), .16), transparent 58%),
        radial-gradient(70% 110% at 92% 100%, rgba(var(--coral-rgb), .18), transparent 60%),
        var(--cream);
}

/* a slow warm drift across the backdrop so the band never sits perfectly still */
.joy-sec::before {
    content: '';
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(38% 42% at 50% 50%, rgba(var(--coral-rgb), .13), transparent 70%);
    animation: joy-drift 19s ease-in-out infinite alternate;
}

@keyframes joy-drift {
    from { transform: translate3d(-6%, -3%, 0) scale(1); }
    to   { transform: translate3d(6%, 4%, 0) scale(1.12); }
}

.joy-sec .wrap { position: relative; z-index: 1; }

.joy-head { text-align: center; max-width: 46rem; margin: 0 auto 3rem; }
.joy-head h2 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: .9rem; }
.joy-lede { color: var(--slate); margin: 0 auto; max-width: 52ch; font-size: 1.06rem; }

.joy-marquee {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.joy-row {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.joy-track {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    width: max-content;
    padding: .85rem 0;
}

/* Row A drifts left, row B drifts right, at different speeds — the mismatch is
   what stops the two rows reading as one rigid block. */
.joy-row--a .joy-track { animation: joy-scroll 46s linear infinite; }
.joy-row--b .joy-track { animation: joy-scroll 61s linear infinite reverse; }

.joy-marquee:hover .joy-track { animation-play-state: paused; }

@keyframes joy-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.joy-shot {
    position: relative;
    flex: 0 0 auto;
    width: clamp(216px, 25vw, 316px);
    aspect-ratio: 4 / 3;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    background: var(--cream-deep);
    transform: rotate(var(--tilt, 0deg));
    box-shadow: 0 18px 34px -20px rgba(var(--navy-rgb), .55);
    transition: transform .45s cubic-bezier(.2, .8, .3, 1), box-shadow .45s ease;
}

.joy-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* the source photos are a mixed bag of exposures; a light common grade
       pulls them together and gives the band its lift */
    filter: saturate(1.1) contrast(1.03);
    transition: filter .35s ease, transform 420ms cubic-bezier(.2, .8, .3, 1);
}

/* straighten, lift and warm up under the cursor */
.joy-shot:hover {
    transform: rotate(0deg) translateY(-9px) scale(1.035);
    box-shadow: 0 30px 52px -22px rgba(var(--navy-rgb), .6);
}

.joy-shot:hover img { filter: saturate(1.28) contrast(1.05); transform: scale(1.06); }

.joy-shot figcaption {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 1;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(var(--navy-rgb), .62);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .92;
    transform: translateY(0);
    transition: opacity .35s ease, transform .35s ease, background .35s ease;
}

.joy-shot:hover figcaption { opacity: 1; background: rgba(var(--navy-rgb), .82); }

@media (max-width: 680px) {
    .joy-sec { padding: 3.5rem 0 4rem; }
    .joy-head { margin-bottom: 2.2rem; }
    .joy-shot { width: clamp(130px, 44vw, 170px); border-radius: 14px; }
    .joy-track, .joy-marquee { gap: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .joy-sec::before { animation: none; }
    .joy-row { -webkit-mask-image: none; mask-image: none; overflow: visible; }
    /* the row-scoped selectors above set the animation, so the reset has to
       match their specificity — a bare .joy-track rule loses to them and the
       track keeps sliding, which slices the wrapped grid off at the edge */
    .joy-row--a .joy-track,
    .joy-row--b .joy-track {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
        padding: .85rem max(1.5rem, calc((100vw - var(--container)) / 2));
    }
    /* the second copy of each row only exists to make the loop seamless */
    .joy-shot[aria-hidden="true"] { display: none; }
    .joy-shot { transform: none; transition: none; }
    .joy-shot img { transition: none; }
    .joy-shot:hover { transform: none; }
    .joy-shot:hover img { transform: none; }
}

/* ==========================================================================
   Photos that breathe — a very slow Ken Burns push on the big editorial
   photos so the page has life even when nothing is being hovered. Slow
   enough (26s) to read as depth rather than movement.
   ========================================================================== */

@keyframes photo-breathe {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to   { transform: scale(1.075) translate3d(0, -1.2%, 0); }
}

/* Deliberately NOT applied to .why-photo / .rt-city: both already have a
   designed hover zoom on the img, and a running animation outranks a plain
   declaration in the cascade — breathing them would silently kill the hover.
   They get the saturation lift below instead, which uses filter and doesn't
   collide. */
.svc-shot.is-active img,
.story-photo img {
    animation: photo-breathe 26s ease-in-out infinite alternate;
    will-change: transform;
}

/* saturation lift on the editorial photos, matching the joy band's grade */
.svc-shot img,
.story-photo img,
.why-photo img,
.rt-city img {
    filter: saturate(1.08) contrast(1.02);
    transition: filter .5s ease;
}

.story-photo:hover img,
.why-photo:hover img,
.rt-city:hover img { filter: saturate(1.24) contrast(1.05); }

@media (prefers-reduced-motion: reduce) {
    .svc-shot.is-active img,
    .story-photo img { animation: none; }
}

/* ==========================================================================
   Inner-page hero with a photograph. about / migration / study-abroad had no
   imagery at all.

   Note the hero this sits on is the LIGHT one redefined further up (warm cream
   gradient, coral eyebrow, navy headline) — not the old navy slab. So the
   photo is inset on the right and masked out towards the copy rather than
   laid under it: a dark scrim would fight the navy headline instead of
   helping it. Masking (rather than veiling with a flat colour) lets the
   hero's own vertical cream gradient show through, so the fade blends
   whatever the band's background happens to be.
   ========================================================================== */

.page-hero--photo { position: relative; overflow: hidden; }

.page-hero--photo .ph-bg {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(58%, 780px);
    z-index: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 24%, rgba(0, 0, 0, .72) 52%, #000 78%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 24%, rgba(0, 0, 0, .72) 52%, #000 78%);
}

.page-hero--photo .ph-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.12);
    animation: photo-breathe 30s ease-in-out infinite alternate;
}

/* a touch of brand warmth over the photo so it belongs to the palette */
.page-hero--photo .ph-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(247, 242, 232, .3) 0%, rgba(241, 237, 230, .16) 100%),
        radial-gradient(80% 120% at 96% 4%, rgba(var(--teal-rgb), .16), transparent 62%);
}

.page-hero--photo .wrap { position: relative; z-index: 1; }
.page-hero--photo { padding-top: clamp(3.25rem, 5vw, 4.5rem); }

/* Narrow screens can't afford a side-by-side split — the photo would sit
   straight under the headline. Drop it out of the absolute layer and let it
   run as a full-bleed band above the copy instead. */
@media (max-width: 860px) {
    .page-hero--photo { padding-top: 0; }
    .page-hero--photo .ph-bg {
        position: relative;
        inset: auto;
        width: auto;
        height: clamp(170px, 40vw, 250px);
        margin-bottom: clamp(1.5rem, 4vw, 2rem);
        -webkit-mask-image: none;
        mask-image: none;
    }
    .page-hero--photo .ph-bg::after {
        background: linear-gradient(180deg, transparent 55%, rgba(247, 242, 232, .85) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-hero--photo .ph-bg img { animation: none; }
}

/* ==========================================================================
   Home sections — tighter gap above each section's own eyebrow label
   (SERVICES, Athletes/coaches/clubs, For businesses & clubs, How it works,
   DIY vs Nexo, WHY NEXO, The good part, What we cover, Our commitments).
   These sit under the ".lp section" 6.75rem default, which reads as too
   much dead air above the label; only the top offset is trimmed, bottom
   spacing is untouched. IDs are used so this wins over the earlier
   .lp .route-dashboard / .lp .compare-section / .lp section rules without
   needing !important.
   ========================================================================== */
.lp #paths,
.lp #sport,
.lp #employers,
.lp #route,
.lp #comparison,
.lp #why,
.lp #moments,
.lp #commitments,
.lp .vx-ledger-sec {
    padding-top: 1rem;
}

/* ==========================================================================
   Home sections — RF Dewi Black on the ten main headlines only ("Every
   pathway to Australia...", "Coming to Australia...", "Hiring or
   signing...", "Every milestone visible...", the why-lead statement, "This
   is what the paperwork is for.", "Every visa we work with", "We're new...",
   "Answers before you ask", "Let's find out where you stand") — replaces the
   earlier Coolvetica choice. Deliberately excludes "How does Nexo
   compare..." (the remaining .lp h2 outside this list), which stays on
   --font-display, so each selector below targets its own section rather
   than reusing the shared .sec-head/.wrap>h2 rule.
   ========================================================================== */
.lp .svc-head h2,
.lp .story-copy h2,
.lp .rt-head h2,
.lp .why-lead,
.lp .joy-head h2,
.lp .vx-head h2,
.lp .cm-head h2,
.lp .faq-intro h2,
.lp .final-cta h2 {
    font-family: 'RF Dewi', var(--font-display);
    font-weight: 900;
}

/* Hero lede ("Nexo means link...") on the licensed RF Dewi Regular cut —
   same family as the two landing-page pull-quotes, which stay on Bold. */
.hero .lede {
    font-family: 'RF Dewi', var(--lp-font);
    font-weight: 400;
}