/* ==========================================================================
   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).
   ========================================================================== */

/* Landing-v2 faces: Hanken Grotesk is the closest open Graphik stand-in, and
   Fraunces stands in for the reference serif display (matildamigration.com FAQ
   heading). Only used under the .lp scope. */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700;800;900&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 — a commercial font we
       don't have licensed files for, so Hanken Grotesk (already loaded for
       the wordmark) stands in as the closest free grotesque until the real
       files are available to swap in via @font-face. It now drives every
       system font token (headings, labels, body) so the whole site reads as
       one face — except buttons, pinned to their own --font-btn token so
       this swap doesn't touch them. */
    --font-display: 'Hanken Grotesk', 'Figtree', 'Segoe UI', sans-serif;
    --font-body: 'Hanken Grotesk', 'Figtree', 'Segoe UI', sans-serif;
    --font-label: 'Hanken Grotesk', 'Figtree', 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
    --font-btn: 'Playfair Display', Georgia, 'Times New Roman', serif;

    /* The wordmark stays on the grotesque — in the reference the nav, headings
       and body all went serif but "Nexo / MIGRATION" did not. */
    --font-logo: 'Hanken Grotesk', 'Figtree', 'Segoe UI', sans-serif;

    /* The hero strapline only. Comic Sans MS ships on macOS and Windows;
       Comic Neue is the metrically-similar web fallback for everything else. */
    --font-accent: 'Comic Sans MS', 'Comic Neue', 'Chalkboard SE', cursive;

    --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; }

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; }

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;
}

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

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. */
.site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--teal-bright), var(--coral));
    opacity: .85;
}

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

.site-header nav { display: flex; align-items: center; gap: 30px; padding: 16px 0; }

.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; color: var(--cream); }
.logo svg { display: block; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.logo:hover svg { transform: scale(1.08); }
.logo-txt { font-family: var(--font-logo); font-weight: 800; font-size: 23px; letter-spacing: -.03em; line-height: 1; }
.logo-sub { font-family: var(--font-logo); font-size: 8.5px; letter-spacing: .34em; color: var(--teal-bright); font-weight: 600; display: block; margin-top: 2px; }

.navlinks { display: flex; gap: 22px; margin-left: auto; font-size: 15.5px; font-weight: 500; }
.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; }
.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-eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--teal-deep);
    padding: 10px 20px 12px;
    border-bottom: 1px solid rgba(var(--navy-rgb), .08);
    margin-bottom: 4px;
}

.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); }

.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: 1180px) {
    /* Nav has 7 links + logo + lang switch + CTA button — that's too much
       content for the space even on iPad landscape (1024px) and small
       laptops, so it needs to collapse well before the general 940px
       tablet breakpoint used elsewhere on the site. */
    .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-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; }
    .route .node { opacity: 1 !important; transform: none !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;
}

.route.in .node {
    opacity: 1;
    transform: scale(1);
}

.route .node {
    opacity: 0;
    transform: scale(0.4);
    transform-origin: center;
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.34, 1.56, .64, 1);
}

.route.in .node:nth-of-type(1) { transition-delay: 0.25s; }
.route.in .node:nth-of-type(2) { transition-delay: 0.85s; }
.route.in .node:nth-of-type(3) { transition-delay: 1.4s; }
.route.in .node:nth-of-type(4) { transition-delay: 1.95s; }

@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; }
    .route .node { opacity: 1 !important; transform: none !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-squiggle { width: 120px; height: auto; margin: 0 auto 1.25rem; 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; }

/* ------------------------------- 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: 1180px) {
    .site-header.nav-open nav { flex-wrap: wrap; }
    .site-header.nav-open .navlinks,
    .site-header.nav-open .lang-switch,
    .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;
    }
    .site-header.nav-open .lang-switch {
        align-self: flex-start;
        margin: 0.75rem 0;
    }
    .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 1.6s 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;
}

.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;
}

.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: var(--font-display);
    font-size: clamp(38px, 5.4vw, 64px);
    font-weight: 900;
    margin-bottom: 16px;
}

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

/* "Connecting Lives, Building Futures." — the brand line under the h1.
   Bold, light blue, tracked slightly tight so it reads as a strapline rather
   than a second paragraph. Covers both markups: <p class="accent"> on the live
   home page and <p class="tagline accent"> on the ok/rough mockups. */
.hero p.accent,
.hero .tagline {
    color: var(--teal-bright);
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: clamp(17px, 1.85vw, 21px);
    line-height: 1.35;
    letter-spacing: -0.015em;
    margin: 0 0 1.1rem;
}

.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;
}

.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: .9; 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;
}

.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::before {
    content: '\201C';
    position: absolute;
    top: -6px;
    left: 20px;
    font-family: var(--font-display);
    font-size: 68px;
    font-weight: 800;
    line-height: 1;
}

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

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

.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; }
}

.promise {
    background: var(--navy);
    border-radius: 24px;
    padding: 56px 52px;
    color: var(--cream);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 44px;
    align-items: start;
}

.promise .bar { width: 6px; align-self: stretch; background: var(--coral); border-radius: 99px; min-height: 120px; }
.promise h2 { font-size: clamp(26px, 3.2vw, 38px); color: var(--cream); margin-bottom: 18px; }
.promise p { font-size: 19px; color: var(--on-dark-muted); max-width: 640px; line-height: 1.62; }

/* ---- 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) {
    .promise { grid-template-columns: 1fr; padding: 38px 28px; gap: 24px; }
    .promise .bar { width: 56px; height: 6px; min-height: 0; }
}

@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-txt { font-size: 34px; color: var(--cream); }
.f2-brand .logo { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.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;
    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; }
.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 brand-kit stand-in 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: '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: 200ms;
    --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. */
.lp .btn, .lp .cta {
    font-family: var(--lp-font);
    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.5rem 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; }

.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: var(--lp-font); font-weight: 600; }

.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: 'Fraunces', Georgia, serif;
    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 .7s var(--lp-ease), transform .7s 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);
  border-top:2px solid var(--navy);
}

.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: 220ms;
    --bk-slow: 520ms;
    --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; }

/* ------------------------------- 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 900ms 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 900ms 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 900ms 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 900ms 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. Built to sit inside one viewport:
   intro on the left, form on the right, secondary fields folded into a
   disclosure so the visible form stays six lines long.
   ========================================================================== */

.ct {
    --ct-ease: cubic-bezier(.4, 0, .2, 1);
    --ct-fast: 200ms;
    --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; }

/* the sticky header is 73px tall; filling the rest of the viewport keeps the
   page a single screen on a laptop without forcing overflow on short ones */
.ct-page {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 73px);
    padding: 2.25rem 0 2.75rem;
    background:
        radial-gradient(80% 120% at 92% -10%, rgba(var(--coral-rgb), .14), transparent 62%),
        radial-gradient(70% 110% at 2% 8%, rgba(var(--teal-rgb), .13), transparent 58%),
        linear-gradient(170deg, var(--ct-sand) 0%, var(--cream) 62%, var(--ct-sand) 100%);
}

.ct-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 3rem; width: 100%; align-items: center; }

/* -------------------------------- intro column -------------------------------- */

.ct .ct-intro h1 { font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -0.038em; margin: .55rem 0 .65rem; }
.ct .ct-lede { font-size: 1.08rem; line-height: 1.6; color: var(--ct-muted); margin: 0 0 1.5rem; max-width: 38ch; }

/* photo: warm, human, and doing the job a wall of copy would otherwise do */
.ct .ct-photo {
    position: relative;
    margin: 0 0 1.25rem;
    border-radius: var(--ct-r-lg);
    overflow: hidden;
    aspect-ratio: 16 / 9.6;
    box-shadow: 0 2px 4px rgba(var(--navy-rgb), .06), 0 30px 55px -32px rgba(var(--navy-rgb), .55);
}
.ct .ct-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ct-ease); }
.ct .ct-photo:hover img { transform: scale(1.04); }
.ct .ct-photo figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.2rem 1.15rem 1rem;
    background: linear-gradient(180deg, transparent, rgba(5, 31, 48, .88) 55%);
    color: var(--cream);
}
.ct .ct-photo figcaption strong { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.ct .ct-photo figcaption span { display: block; font-size: .86rem; line-height: 1.45; color: rgba(241, 237, 230, .82); margin-top: .15rem; }

/* three channels side by side so they read as a row of options, not a list */
.ct-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1.15rem; }

.ct .ct-channel {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .7rem;
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-r-md);
    text-decoration: none;
    color: var(--navy);
    transition: transform var(--ct-fast) var(--ct-ease), box-shadow var(--ct-fast) var(--ct-ease), border-color var(--ct-fast) var(--ct-ease);
}
.ct .ct-channel:hover { transform: translateY(-3px); border-color: rgba(var(--teal-rgb), .5); box-shadow: 0 16px 28px -20px rgba(var(--navy-rgb), .55); }

.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: 10px; }
.ct .ct-i-teal { background: rgba(var(--teal-rgb), .15); color: var(--teal-ink); }
.ct .ct-i-coral { background: rgba(var(--coral-rgb), .15); color: var(--coral-ink); }
.ct .ct-i-sand { background: var(--ct-sand-deep); color: var(--navy); }

.ct .ct-channel-body { min-width: 0; }
.ct .ct-channel-body strong { display: block; font-size: .9rem; font-weight: 700; line-height: 1.3; }
.ct .ct-channel-body em { display: block; font-style: normal; font-size: .78rem; color: var(--ct-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ct .ct-foot { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.4rem; }
.ct .ct-address { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .88rem; color: var(--ct-muted); }
.ct .ct-address svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--teal-ink); }

.ct .ct-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: .92rem;
    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(--ct-fast) var(--ct-ease);
}
.ct .ct-link:hover { background-size: 100% 1.5px; }
.ct .ct-link svg { width: 16px; height: 16px; flex: 0 0 16px; }

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

.ct .ct-form-card {
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-r-lg);
    box-shadow: 0 1px 2px rgba(var(--navy-rgb), .04), 0 30px 60px -38px rgba(var(--navy-rgb), .45);
    padding: 1.6rem 1.7rem 1.7rem;
}

.ct .ct-form-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
}
.ct .ct-form-head h2 { font-size: 1.35rem; letter-spacing: -.03em; margin: 0; }
.ct .ct-form-time {
    font-size: .8rem;
    font-weight: 600;
    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 so the whole thing still fits a screen. */
.ct .ct-form .field { margin-bottom: .85rem; }
.ct .ct-form .field-row { gap: .9rem; }
.ct .ct-form .field label { margin-bottom: .32rem; }
.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: 48px; padding: .72rem .9rem; }
.ct .ct-form textarea { min-height: 96px; }

.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); }

.ct .ct-success {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 1.25rem;
    padding: .85rem 1rem;
    background: rgba(var(--teal-rgb), .13);
    border: 1px solid var(--teal);
    border-radius: var(--ct-r-md);
    font-size: .93rem;
    font-weight: 600;
}
.ct .ct-success svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--teal-ink); }

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

@media (max-width: 980px) {
    /* below two columns the one-screen constraint stops making sense */
    .ct-page { display: block; min-height: 0; padding: 2.5rem 0 3rem; }
    .ct-grid { grid-template-columns: 1fr; gap: 2rem; }
    .ct .ct-lede { max-width: none; }
    .ct .ct-photo { aspect-ratio: 16 / 7; }
}

@media (max-width: 720px) {
    .ct-channels { grid-template-columns: 1fr; }
    .ct .ct-photo { aspect-ratio: 16 / 10; }
    .ct .ct-form-card { padding: 1.25rem 1.15rem 1.4rem; }
    .ct .ct-form .field-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .ct .ct-channel:hover { 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: 200ms;
    --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; }

.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: center;
    margin-bottom: 3.5rem;
}

.lp .svc-media {
    position: relative;
    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 900ms 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);
}
.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;
}
.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; padding-top: 3.5rem; }

/* The flight path draws itself when the section scrolls in. It lives in the
   gap above the cards — overlapping them would put the plane behind their
   backdrop-filter and smear it. */
.lp .rt-line { position: absolute; inset: 0 0 auto 0; z-index: 1; height: 46px; pointer-events: none; }
.lp .rt-line svg { width: 100%; height: 46px; }
.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 1.6s var(--lp-ease) .15s;
}
.lp .rt-track.in-view .rt-path { stroke-dashoffset: 0; }

/* the offset-path mirrors the SVG path, scaled to the 46px band */
.lp .rt-plane {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    width: 28px;
    height: 28px;
    padding: 6px;
    margin: -14px 0 0 -14px;
    border-radius: 50%;
    background: var(--coral);
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(var(--coral-rgb), .9);
    opacity: 0;
    offset-path: path('M40 31 C 260 3, 420 3, 620 23 C 820 43, 980 43, 1160 17');
    offset-rotate: 0deg;
}
.lp .rt-track.in-view .rt-plane { animation: rt-fly 1.75s var(--lp-ease) .15s forwards; }

@keyframes rt-fly {
    0% { offset-distance: 0%; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { offset-distance: 100%; opacity: 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.6rem 1.4rem 1.5rem;
    border-radius: 18px;
    background: rgba(241, 237, 230, .06);
    border: 1px solid var(--border-dark);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s var(--lp-ease), transform .6s var(--lp-ease), background 220ms var(--lp-ease), border-color 220ms var(--lp-ease);
    transition-delay: calc(var(--i, 0) * 110ms);
}
.lp .rt-track.in-view .rt-stop { opacity: 1; transform: none; }
.lp .rt-stop:hover { background: rgba(241, 237, 230, .11); border-color: rgba(241, 237, 230, .3); }

.lp .rt-stop-num {
    font-family: var(--lp-font);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .16em;
    color: var(--teal-bright);
    font-variant-numeric: tabular-nums;
}
.lp .rt-stop-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    padding: 10px;
    margin: .75rem 0 .9rem;
    border-radius: 13px;
    background: rgba(241, 237, 230, .1);
    color: var(--cream);
    transition: background 220ms var(--lp-ease), color 220ms var(--lp-ease), transform 220ms var(--lp-ease);
}
.lp .rt-stop:hover .rt-stop-icon { background: var(--teal); color: var(--navy); transform: rotate(-4deg) scale(1.05); }
.lp .rt-stop h3 { font-size: 1.2rem; color: var(--cream); margin: 0 0 .35rem; }
.lp .rt-stop p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--on-dark-muted); }

/* the four cities people actually land in */
.lp .rt-cities { margin-top: 3.25rem; }
.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: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.lp .rt-city {
    position: relative;
    margin: 0;
    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 900ms 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; }
    .lp .svc-media { aspect-ratio: 16 / 10; }
    .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-line { display: none; }
    .lp .rt-track { padding-top: 0; }

    .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; }
    .lp .rt-city-row { grid-template-columns: 1fr; }
    .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-plane { display: none; }
    .lp .rt-stop,
    .lp .cmp-row { opacity: 1; transform: none; transition: none; }
    .lp .rt-stop:hover .rt-stop-icon,
    .lp .rt-city:hover img { transform: none; }
}

/* ==========================================================================
   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-squiggle { margin-bottom: .9rem; }

.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: 92px; margin-top: 26px; }
.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: 800; }
.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 {
    background: #fff;
    border-color: var(--paper-line);
    box-shadow: 0 1px 2px rgba(var(--navy-rgb), .04), 0 22px 44px -32px rgba(var(--navy-rgb), .35);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.lp .rt-stop:hover {
    background: #fff;
    border-color: rgba(var(--teal-rgb), .55);
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(var(--navy-rgb), .05), 0 30px 52px -30px rgba(var(--navy-rgb), .42);
}
.lp .rt-stop-num { color: var(--teal-ink); }
.lp .rt-stop-icon { background: rgba(var(--teal-rgb), .14); color: var(--teal-ink); }
.lp .rt-stop:hover .rt-stop-icon { background: var(--teal); color: #fff; }
.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 900ms 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: vertical; }

.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; }

@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%);
}

/* cards need more presence now that they sit on colour */
.lp .rt-stop { background: rgba(255, 255, 255, .94); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.lp .rt-stop:hover { background: #fff; }
.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; }

/* ------------------------------- 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 --------------------------- */

/* less air between the head, the track and the cities row */
.lp .rt-track { padding-top: 3rem; }
.lp .rt-cities { margin-top: clamp(1.75rem, 3vw, 2.4rem); }

/* a faint continuous guide under everything else */
.lp .rt-trail {
    fill: none;
    stroke: rgba(var(--teal-rgb), .3);
    stroke-width: 2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* the dotted line that travels the route, drawn in on arrival then drifting */
.lp .rt-path {
    stroke: var(--teal-ink);
    stroke-width: 2.5;
    stroke-dasharray: 2 13;
    stroke-dashoffset: 0;
    opacity: 0;
    transition: opacity 700ms var(--lp-ease) .2s;
}
.lp .rt-track.in-view .rt-path {
    opacity: 1;
    animation: rt-drift 3.4s linear infinite;
}

@keyframes rt-drift {
    to { stroke-dashoffset: -30; }
}

/* four station dots sitting on the route, one per stop, lighting up in turn */
.lp .rt-stop-dot {
    position: absolute;
    top: 0;
    width: 11px;
    height: 11px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--cream);
    border: 2px solid var(--teal);
    opacity: 0;
    transform: scale(.4);
    transition: opacity 320ms var(--lp-ease), transform 320ms var(--lp-ease);
    transition-delay: calc(.35s + var(--d) * .28s);
}
/* Sitting on the curve above each card. The tops are the path's own y at each
   card's centre x, solved from the cubic and converted to a percentage of the
   46px band — eyeballed values drift off the line. */
.lp .rt-stop-dot:nth-child(2) { left: 12.5%; top: 39.4%; }
.lp .rt-stop-dot:nth-child(3) { left: 37.5%; top: 24.3%; }
.lp .rt-stop-dot:nth-child(4) { left: 62.5%; top: 71.8%; }
.lp .rt-stop-dot:nth-child(5) { left: 87.5%; top: 66.5%; }

.lp .rt-track.in-view .rt-stop-dot {
    opacity: 1;
    transform: scale(1);
    animation: rt-ping 3.6s var(--lp-ease) infinite;
    animation-delay: calc(1.2s + var(--d) * .45s);
}

@keyframes rt-ping {
    0%, 78%, 100% { box-shadow: 0 0 0 0 rgba(var(--teal-rgb), .55); }
    88% { box-shadow: 0 0 0 9px rgba(var(--teal-rgb), 0); }
}

/* the plane now flies the route on a loop rather than once */
.lp .rt-track.in-view .rt-plane { animation: rt-fly 9s var(--lp-ease) .3s infinite; }

@keyframes rt-fly {
    0% { offset-distance: 0%; opacity: 0; }
    4% { opacity: 1; }
    36% { opacity: 1; }
    42% { offset-distance: 100%; opacity: 0; }
    100% { offset-distance: 100%; opacity: 0; }
}

/* the numbers get a little more presence as the cards arrive */
.lp .rt-stop-num { font-size: .82rem; letter-spacing: .18em; }

@media (prefers-reduced-motion: reduce) {
    .lp .rt-trail { animation: none; }
    .lp .rt-stop-dot { animation: none !important; opacity: 1; transform: none; transition: none; }
    .lp .rt-track.in-view .rt-plane { animation: none; }
}

/* ==========================================================================
   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 */
.lp .svc-head h2,
.lp .rt-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;
}

/* 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 .rt-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 */
.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.jpg') 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 squiggle is drawn navy in the markup — light it up for the dark band */
.lp .final-cta-squiggle path { stroke: var(--teal-bright); }

/* 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 .45s ease, transform .7s 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(180px, 62vw, 240px); border-radius: 17px; }
    .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; }
}