/* ==========================================================================
   SoundEye Design System
   Clinical calm + engineered precision.
   Layer order: tokens -> reset -> primitives -> components -> pages -> a11y
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* --- Brand (unchanged, brand fidelity) --- */
    --se-cyan:        #4AC0E0;
    --se-teal:        #2BA0C0;
    --se-teal-dark:   #1E8AAA;
    --se-teal-deep:   #0F657F;   /* accessible accent for small text on light */
    --se-teal-solid:  #227D96;   /* fill that white text may sit on: 4.73:1 */
    --se-teal-solid-2:#1D6E84;   /* its pressed / hover state: 5.81:1 */
    --se-cyan-lift:   #8AD8EE;   /* highlight on dark */

    /* --- Ink ramp: cool slate harmonised to the brand hue (~205deg) --- */
    --ink-950: #071620;
    --ink-900: #0B2130;
    --ink-800: #10303F;
    --ink-700: #16455A;
    --ink-600: #2E5567;
    --ink-500: #3F5C6B;
    --ink-400: #5A7381;
    --ink-300: #9DB3BD;
    --ink-200: #C8D6DD;
    --ink-150: #DFE8EC;
    --ink-100: #E9F0F3;
    --ink-050: #F3F7F9;
    --white:   #ffffff;

    /* --- Semantic surfaces --- */
    --surface:          var(--white);
    --surface-sunken:   var(--ink-050);
    --surface-tint:     #EAF6FB;
    --surface-inverse:  var(--ink-900);

    /* --- Semantic text --- */
    --text:             var(--ink-900);
    --text-secondary:   var(--ink-500);   /* 7.1:1 on white */
    --text-muted:       var(--ink-400);   /* 5.0:1 white, 4.6:1 sunken, 4.5:1 tint */
    --text-inverse:     var(--white);
    --text-inverse-2:   rgba(255,255,255,.74);
    --text-inverse-3:   rgba(255,255,255,.56);

    /* --- Semantic lines --- */
    --line:             var(--ink-150);
    --line-strong:      var(--ink-200);
    --line-inverse:     rgba(255,255,255,.14);
    --line-inverse-2:   rgba(255,255,255,.08);

    /* --- Accent roles --- */
    --accent:           var(--se-teal);        /* icons, rules, large display type */
    --accent-solid:     var(--se-teal-solid);  /* the only fill white text sits on */
    --accent-text:      var(--se-teal-deep);   /* small text + links on light */
    --accent-on-dark:   var(--se-cyan);
    --focus:            #0F86A8;

    /* --- Type --- */
    --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --fs-3xs:  0.75rem;      /* 12 */
    --fs-2xs:  0.8125rem;    /* 13 */
    --fs-xs:   0.875rem;     /* 14 */
    --fs-sm:   0.9375rem;    /* 15 */
    --fs-base: 1rem;         /* 16 */
    --fs-md:   1.0625rem;    /* 17 */
    --fs-lg:   1.1875rem;    /* 19 */
    --fs-xl:   clamp(1.375rem, 1.15rem + 0.75vw, 1.75rem);
    --fs-2xl:  clamp(1.75rem, 1.32rem + 1.5vw, 2.5rem);
    --fs-3xl:  clamp(2.125rem, 1.55rem + 2.4vw, 3.25rem);
    --fs-4xl:  clamp(2.5rem, 1.7rem + 3.6vw, 4.25rem);
    --fs-5xl:  clamp(3rem, 1.8rem + 5.2vw, 5.5rem);

    /* --- Space (8px base) --- */
    --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
    --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
    --sp-9: 4rem;    --sp-10: 5rem;   --sp-11: 6rem;   --sp-12: 8rem;

    --section-y:    clamp(4.5rem, 3rem + 6.5vw, 8rem);
    --section-y-lg: clamp(5.5rem, 3.4rem + 9vw, 10.5rem);

    /* --- Layout --- */
    --wrap:   1200px;
    --wrap-lg: 1340px;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --measure: 62ch;

    /* --- Radius: ONE system. Pills for interactive, 6/10/16/24/32 for boxes --- */
    --r-xs:   6px;
    --r-sm:   10px;
    --r-md:   16px;
    --r-lg:   24px;
    --r-xl:   32px;
    --r-pill: 999px;

    /* --- Elevation: tinted to the ink hue, never pure black --- */
    --sh-xs:  0 1px 2px rgba(7,22,32,.06);
    --sh-sm:  0 2px 8px -2px rgba(7,22,32,.08), 0 1px 2px rgba(7,22,32,.04);
    --sh-md:  0 14px 30px -14px rgba(7,22,32,.18), 0 2px 6px rgba(7,22,32,.05);
    --sh-lg:  0 30px 64px -30px rgba(7,22,32,.30), 0 4px 14px rgba(7,22,32,.06);
    --sh-teal: 0 24px 56px -28px rgba(43,160,192,.55);

    /* --- Motion --- */
    --ease-out:    cubic-bezier(.23, 1, .32, 1);
    --ease-in-out: cubic-bezier(.77, 0, .175, 1);
    --ease-drawer: cubic-bezier(.32, .72, 0, 1);
    --dur-1: 120ms;   /* press */
    --dur-2: 180ms;   /* hover, tooltip */
    --dur-3: 240ms;   /* dropdown */
    --dur-4: 380ms;   /* panel */
    --dur-reveal: 720ms;

    /* --- Depth-imaging motif (used sparingly, product-true) --- */
    --scan-line: rgba(74,192,224,.16);
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--text);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis-weight: none;   /* never fake-bold Instrument Serif */
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-4); text-wrap: balance; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;               /* Instrument Serif ships 400 only */
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--text);
}

h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.011em;
    color: var(--text);
}

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--accent-text);
    text-decoration: none;
    transition: color var(--dur-2) ease;
}
a:hover { color: var(--se-teal-dark); }

img, svg, video { max-width: 100%; height: auto; display: block; }

strong, b { font-weight: 600; color: var(--text); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-8) 0; }

::selection { background: var(--se-cyan); color: var(--ink-950); }

/* Focus: one visible ring everywhere, never removed */
:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}
.on-dark :focus-visible,
.band-ink :focus-visible { outline-color: var(--se-cyan); }

/* Skip link */
.skip-link {
    position: absolute;
    left: var(--sp-4);
    top: 0;
    z-index: 2000;
    padding: .7rem 1.15rem;
    background: var(--ink-900);
    color: var(--white);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    transform: translateY(-150%);
    transition: transform var(--dur-3) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(var(--sp-4)); color: var(--white); }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container,
.container-fluid {
    width: min(100% - (var(--gutter) * 2), var(--wrap));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}
.container--wide { --wrap: var(--wrap-lg); }
.container--narrow { --wrap: 860px; }

.section        { padding-block: var(--section-y); }
.section--lg    { padding-block: var(--section-y-lg); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }

.band-white  { background: var(--surface); }
.band-sunken { background: var(--surface-sunken); }
.band-tint   { background: var(--surface-tint); }

/* The one dark material used across the site, so dark bands read as one system */
.band-ink {
    position: relative;
    isolation: isolate;
    color: var(--text-inverse);
    background: linear-gradient(163deg, var(--ink-950) 0%, #0C2A3A 46%, #114459 100%);
    overflow: hidden;
}
.band-ink h1, .band-ink h2, .band-ink h3,
.band-ink h4, .band-ink h5, .band-ink h6 { color: var(--text-inverse); }
.band-ink p { color: var(--text-inverse-2); }
.band-ink strong { color: var(--text-inverse); }

/* Atmospheric layers for .band-ink. Both are decorative and non-interactive. */
.band-glow {
    position: absolute;
    inset: -25%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 52% 42% at 16% 24%, rgba(74,192,224,.22), transparent 62%),
        radial-gradient(ellipse 48% 46% at 84% 80%, rgba(43,160,192,.17), transparent 66%);
    filter: blur(44px);
}

/* Hairline rules that only appear where they organise content */
.rule-top    { border-top: 1px solid var(--line); }
.rule-bottom { border-bottom: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   4. TYPE PRIMITIVES
   -------------------------------------------------------------------------- */
.s-head { max-width: 760px; margin-bottom: clamp(2.5rem, 1.6rem + 3vw, 4.25rem); }
.s-head--center { margin-inline: auto; text-align: center; }
.s-head--wide { max-width: 940px; }

.s-eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: var(--sp-4);
}
.band-ink .s-eyebrow { color: var(--se-cyan); }

.s-title {
    font-size: var(--fs-3xl);
    margin-bottom: var(--sp-5);
}
.s-title--sm { font-size: var(--fs-2xl); }

.s-lead {
    font-size: var(--fs-md);
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: var(--measure);
    margin-bottom: 0;
    text-wrap: pretty;
}
.s-head--center .s-lead { margin-inline: auto; }
.band-ink .s-lead { color: var(--text-inverse-2); }

.accent-grad { color: var(--se-cyan); }

.body-lg { font-size: var(--fs-md); line-height: 1.78; color: var(--text-secondary); }
.body-md { font-size: var(--fs-sm); line-height: 1.72; color: var(--text-secondary); }
.text-measure { max-width: var(--measure); }

.footnote {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    letter-spacing: .005em;
}
.band-ink .footnote { color: var(--text-inverse-3); }

/* Numerals that line up in columns */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* --------------------------------------------------------------------------
   5. REVEAL / MOTION UTILITIES
   Purpose: sequence the story so each section lands one beat at a time.
   -------------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity var(--dur-reveal) var(--ease-out),
        transform var(--dur-reveal) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
[data-reveal="fade"]  { transform: none; }
[data-reveal="right"] { transform: translate3d(-22px, 0, 0); }
[data-reveal="left"]  { transform: translate3d(22px, 0, 0); }
[data-reveal="scale"] { transform: scale(.965); }

[data-reveal].is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Media that wipes open instead of fading. Reads like an image being scanned. */
[data-reveal="wipe"] { opacity: 1; transform: none; }
[data-reveal="wipe"] > * {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 900ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="wipe"].is-in > * { clip-path: inset(0 0 0 0); }

/* Word-by-word headline entrance, used once per page (hero only) */
.line-mask { display: block; overflow: hidden; padding-bottom: .08em; }
.line-mask > span {
    display: block;
    transform: translate3d(0, 108%, 0);
    transition: transform 980ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
.is-loaded .line-mask > span { transform: none; }
/* second display line follows the first by one beat */
.hero-title .line-mask:nth-of-type(2) > span { transition-delay: 110ms; }

/* --------------------------------------------------------------------------
   6. BUTTONS
   Every pressable element: pill radius, 44px min target, press feedback.
   -------------------------------------------------------------------------- */
.btn-se {
    --btn-bg: var(--ink-900);
    --btn-fg: var(--white);
    --btn-bd: var(--ink-900);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 46px;
    padding: .78rem 1.65rem;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .012em;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid var(--btn-bd);
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    transition:
        background-color var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out),
        color var(--dur-2) var(--ease-out),
        box-shadow var(--dur-2) var(--ease-out),
        transform var(--dur-1) var(--ease-out);
}
.btn-se:active { transform: scale(.972); }
.btn-se .btn-ico {
    font-size: .72em;
    transition: transform var(--dur-2) var(--ease-out);
}

.btn-se--lg { min-height: 54px; padding: 1rem 2.1rem; font-size: var(--fs-sm); }
.btn-se--sm { min-height: 40px; padding: .55rem 1.15rem; font-size: var(--fs-3xs); }

/* Primary: brand teal on light */
.btn-se--primary { --btn-bg: var(--accent-solid); --btn-bd: var(--accent-solid); --btn-fg: var(--white); }
/* Dark: ink on light */
.btn-se--dark    { --btn-bg: var(--ink-900); --btn-bd: var(--ink-900); --btn-fg: var(--white); }
/* Light: white on dark or on media */
.btn-se--light   { --btn-bg: var(--white); --btn-bd: var(--white); --btn-fg: var(--ink-900); }
/* Ghost variants keep a visible stroke so they never vanish into the background */
.btn-se--ghost   { --btn-bg: transparent; --btn-bd: var(--ink-200); --btn-fg: var(--text); }
.btn-se--ghost-light { --btn-bg: transparent; --btn-bd: rgba(255,255,255,.5); --btn-fg: var(--white); }

@media (hover: hover) and (pointer: fine) {
    .btn-se--primary:hover { --btn-bg: var(--se-teal-solid-2); --btn-bd: var(--se-teal-solid-2); color: var(--white); box-shadow: var(--sh-teal); }
    .btn-se--dark:hover    { --btn-bg: var(--ink-700); --btn-bd: var(--ink-700); color: var(--white); box-shadow: var(--sh-md); }
    .btn-se--light:hover   { --btn-bg: var(--se-cyan); --btn-bd: var(--se-cyan); color: var(--ink-950); }
    .btn-se--ghost:hover   { --btn-bd: var(--ink-900); --btn-bg: var(--ink-900); color: var(--white); }
    .btn-se--ghost-light:hover { --btn-bg: var(--white); --btn-bd: var(--white); color: var(--ink-900); }
    .btn-se:hover .btn-ico { transform: translateX(3px); }
    .btn-se--diag:hover .btn-ico { transform: translate(3px, -3px); }
}

/* Quiet text link with an underline that draws in from the left */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .012em;
    color: var(--accent-text);
    padding-block: .35rem;
}
.link-arrow i { font-size: .72em; transition: transform var(--dur-2) var(--ease-out); }
.link-arrow span { position: relative; }
.link-arrow span::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-3) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .link-arrow:hover i { transform: translateX(4px); }
    .link-arrow:hover span::after { transform: scaleX(1); }
}
.band-ink .link-arrow,
.on-dark .link-arrow { color: var(--se-cyan); }

/* --------------------------------------------------------------------------
   7. NAVBAR
   Floating glass rail. One line at desktop, 68px tall, 44px targets on mobile.
   -------------------------------------------------------------------------- */
.navbar {
    --nav-h: 68px;
    padding: 0;
    z-index: 1030;
    margin: .85rem auto 0;
    left: 0; right: 0;
    width: min(100% - (var(--gutter) * 2), var(--wrap-lg));
    max-width: none;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.80);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,.7);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 12px 32px -14px rgba(7,22,32,.34);
    transition:
        background-color var(--dur-4) var(--ease-out),
        box-shadow var(--dur-4) var(--ease-out),
        border-color var(--dur-4) var(--ease-out);
}
.navbar.is-solid {
    background: rgba(255,255,255,.95);
    border-color: rgba(255,255,255,.9);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 14px 34px -16px rgba(7,22,32,.3);
}
.navbar > .container-fluid {
    width: 100%;
    min-height: var(--nav-h);
    padding-inline: 1.25rem 1rem;
    gap: var(--sp-4);
    flex-wrap: nowrap;
}
.navbar-brand { padding: 0; margin: 0; display: flex; align-items: center; }
.navbar-brand img { height: 46px; width: auto; }
/* was a Bootstrap utility on the markup; it carried !important and blocked the
   mobile override, so the alignment lives here instead */
.navbar .navbar-collapse { justify-content: flex-end; }

.navbar-nav { gap: .15rem; align-items: center; }

.navbar-nav .nav-link {
    position: relative;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: -0.004em;
    color: var(--ink-700);
    padding: .55rem .85rem;
    border-radius: var(--r-pill);
    transition: color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
/* The rule hangs off the label, not the padded link box, so it always spans
   exactly the word regardless of padding or the dropdown caret. */
.navbar-nav .nav-label {
    position: relative;
    display: inline-block;
}
.navbar-nav .nav-label::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -.42em;
    height: 1.5px;
    border-radius: 2px;
    background: var(--se-teal);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur-3) var(--ease-out);
}
.navbar-nav .nav-link.active { color: var(--ink-900); font-weight: 600; }
.navbar-nav .nav-link.active .nav-label::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
    .navbar-nav .nav-link:hover { color: var(--ink-900); }
    .navbar-nav .nav-link:hover .nav-label::after { transform: scaleX(1); }
}

.nav-cta {
    margin-left: .6rem;
    min-height: 40px;
    padding: .55rem 1.25rem;
    font-size: var(--fs-2xs);
}

.navbar-toggler {
    border: 1px solid var(--ink-200);
    border-radius: var(--r-pill);
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    background: rgba(255,255,255,.5);
    transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.navbar-toggler:active { transform: scale(.94); }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon {
    width: 18px; height: 12px;
    background-image: none;
    position: relative;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1.5px;
    border-radius: 2px;
    background: var(--ink-800);
    transition: transform var(--dur-3) var(--ease-out);
}
.navbar-toggler-icon::before { top: 1px; }
.navbar-toggler-icon::after  { bottom: 1px; }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before { transform: translateY(4.5px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after  { transform: translateY(-4.5px) rotate(-45deg); }

/* --- Mega dropdown: origin-aware, scales from the trigger --- */
.nav-dropdown { position: relative; }
.nav-dropdown > .nav-link { padding-right: 1.55rem; }
.nav-dropdown > .nav-link .caret {
    position: absolute;
    right: .7rem; top: 50%;
    font-size: .5rem;
    transform: translateY(-50%);
    transition: transform var(--dur-3) var(--ease-out);
    opacity: .55;
}
.nav-dropdown:hover > .nav-link .caret,
.nav-dropdown.show > .nav-link .caret { transform: translateY(-50%) rotate(180deg); opacity: 1; }

.mega-dropdown {
    position: absolute;
    top: calc(100% + .5rem);
    left: 50%;
    width: 520px;
    padding: .5rem;
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-6px) scale(.975);
    transform-origin: top center;
    transition:
        opacity var(--dur-3) var(--ease-out),
        transform var(--dur-3) var(--ease-out),
        visibility var(--dur-3);
    z-index: 1040;
}
.nav-dropdown:hover .mega-dropdown,
.nav-dropdown:focus-within .mega-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}
.mega-inner { display: grid; grid-template-columns: 1fr 1.15fr; gap: .35rem; }

.mega-overview {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 1.35rem 1.25rem;
    border-radius: var(--r-md);
    background: linear-gradient(165deg, var(--surface-tint), rgba(234,246,251,.35));
    transition: background var(--dur-3) var(--ease-out);
}
.mega-overview:hover { background: linear-gradient(165deg, #DEF1F9, var(--surface-tint)); }
.mega-label {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--text);
    display: block;
}
.mega-desc {
    display: block;
    font-size: var(--fs-2xs);
    line-height: 1.55;
    color: var(--text-secondary);
    margin-top: .4rem;
}
.mega-arrow {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: var(--fs-2xs); font-weight: 600;
    color: var(--accent-text);
}
.mega-arrow i { font-size: .7em; transition: transform var(--dur-2) var(--ease-out); }
.mega-overview:hover .mega-arrow i { transform: translateX(4px); }

.mega-col-links { padding: 1.15rem .75rem 1rem; }
.mega-heading {
    display: block;
    font-size: var(--fs-3xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-muted);
    padding: 0 .6rem .7rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--line);
}
.mega-link {
    display: block;
    padding: .7rem .6rem;
    border-radius: var(--r-sm);
    transition: background-color var(--dur-2) var(--ease-out);
}
.mega-link:hover { background: var(--surface-sunken); }

.mega-link-title {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--text);
}
.mega-link-desc {
    display: block;
    font-size: var(--fs-3xs);
    line-height: 1.5;
    color: var(--text-muted);
    margin-top: .12rem;
}

/* Scrim behind the open mobile panel. The nav sits at 1030, this sits just under. */
.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 1029;
    background: rgba(7,22,32,.46);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-3) var(--ease-out), visibility var(--dur-3) var(--ease-out);
}
body.nav-locked { overflow: hidden; }
body.nav-locked .nav-scrim { opacity: 1; visibility: visible; }
@media (min-width: 992px) { .nav-scrim { display: none; } }

/* --- Mobile nav --- */
@media (max-width: 991.98px) {
    .navbar {
        --nav-h: 60px;
        margin: .6rem auto 0;
        border-radius: var(--r-lg);
        width: min(100% - (var(--gutter) * 2), var(--wrap-lg));
    }
    /* The collapse asks for flex-basis:100%, so the row must be allowed to wrap.
       Without this it is forced inline beside the brand and the panel lands in a
       half-width column next to the logo. */
    .navbar > .container-fluid {
        flex-wrap: wrap;
        padding-inline: 1rem;
        gap: 0;
    }
    .navbar-brand { min-height: var(--nav-h); }
    .navbar .navbar-collapse {
        flex-basis: 100%;
        justify-content: flex-start;
        padding: 0;
        max-height: calc(100dvh - var(--nav-h) - 3rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Open, the card stops pretending to be glass. Eighty percent white over a
       dark hero reads as grey mush, which is what made the panel unreadable. */
    .navbar.is-open {
        border-radius: var(--r-lg);
        background: rgba(255,255,255,.985);
        border-color: rgba(255,255,255,.95);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.9),
            0 28px 64px -24px rgba(7,22,32,.55);
    }

    .navbar-nav {
        align-items: stretch;
        gap: 0;
        width: 100%;
        padding: 0 0 1rem;
        border-top: 1px solid var(--line);
    }
    /* hairline rows, the same divider language as fact-list */
    .navbar-nav .nav-item + .nav-item > .nav-link { border-top: 1px solid var(--line); }

    .navbar-nav .nav-link {
        min-height: 54px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-4);
        font-size: var(--fs-md);
        font-weight: 500;
        color: var(--ink-800);
        padding: .8rem .15rem .8rem .8rem;
        border-radius: 0;
        background: none;
    }
    .navbar-nav .nav-label::after { display: none; }
    @media (hover: hover) and (pointer: fine) {
        .navbar-nav .nav-link:hover { background: none; color: var(--accent-text); }
    }
    /* pressable rows need to answer the finger */
    .navbar-nav .nav-link:active { color: var(--accent-text); }

    /* Current page: weight and colour carry it, plus a rule at the card edge, so
       it never rests on colour alone. */
    .navbar-nav .nav-link.active {
        background: none;
        color: var(--accent-text);
        font-weight: 600;
    }
    .navbar-nav .nav-link.active::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 3px;
        height: 22px;
        margin-top: -11px;
        border-radius: var(--r-pill);
        background: var(--accent);
    }

    .nav-dropdown > .nav-link { padding-right: .15rem; }
    .mega-dropdown, .nav-cta { margin-left: .8rem; }
    .nav-dropdown > .nav-link .caret {
        position: static;
        transform: none;
        opacity: .55;
        font-size: .7rem;
        transition: transform var(--dur-3) var(--ease-out);
    }
    .nav-dropdown.show > .nav-link .caret { transform: rotate(180deg); opacity: 1; }

    .nav-cta {
        margin: 1rem 0 0;
        min-height: 52px;
        width: 100%;
        justify-content: center;
    }

    /* Submenu. grid-template-rows 0fr -> 1fr is the one layout property worth
       animating here: it is two rows deep and it is the only way to ease an
       auto height without a hardcoded max-height. */
    .mega-dropdown {
        position: static;
        width: 100%;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        box-shadow: none;
        border: 0;
        border-radius: var(--r-sm);
        background: var(--surface-sunken);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows var(--dur-4) var(--ease-out);
    }
    .nav-dropdown.show .mega-dropdown { grid-template-rows: 1fr; }
    .mega-inner {
        overflow: hidden;
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 0;
    }
    .mega-overview {
        margin: .4rem .4rem .1rem;
        padding: .9rem 1rem;
        border-radius: var(--r-xs);
        gap: var(--sp-3);
    }
    .mega-label { display: none; }
    .mega-heading { display: none; }
    .mega-col-links { padding: .2rem .4rem .5rem; }
    .mega-link { min-height: 48px; padding: .65rem .6rem; }

    /* Rows arrive after the card has opened. Short stagger, and no delay on the
       way out so closing stays snappier than opening. */
    .navbar-collapse .nav-item {
        opacity: 0;
        transform: translateY(-6px);
        transition:
            opacity 150ms var(--ease-out),
            transform 150ms var(--ease-out);
    }
    .navbar.is-open .navbar-collapse .nav-item {
        opacity: 1;
        transform: none;
        transition-duration: 260ms;
    }
    .navbar.is-open .nav-item:nth-child(1) { transition-delay: 60ms; }
    .navbar.is-open .nav-item:nth-child(2) { transition-delay: 100ms; }
    .navbar.is-open .nav-item:nth-child(3) { transition-delay: 140ms; }
    .navbar.is-open .nav-item:nth-child(4) { transition-delay: 180ms; }
    .navbar.is-open .nav-item:nth-child(5) { transition-delay: 220ms; }
}

@media (prefers-reduced-motion: reduce) {
    .navbar-collapse .nav-item { transition-delay: 0ms !important; }
    .navbar.is-open .nav-item { transition-delay: 0ms !important; }
}


/* --------------------------------------------------------------------------
   8. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
    position: relative;
    isolation: isolate;
    background: linear-gradient(180deg, #0F3D50 0%, var(--ink-950) 34%, #0A2130 100%);
    color: var(--text-inverse-2);
    padding-block: clamp(3.5rem, 2.4rem + 4vw, 5.5rem) 0;
    overflow: hidden;
}
.footer-glow {
    position: absolute; inset: -30% -10% auto;
    height: 60%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 40% 60% at 22% 40%, rgba(74,192,224,.14), transparent 70%);
    filter: blur(50px);
}
.footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    padding-bottom: var(--sp-9);
}
.footer-brand img {
    height: 58px;
    width: auto;
    margin-bottom: var(--sp-5);
    /* the supplied lockup is dark artwork on transparency; render it white on the ink base */
    filter: brightness(0) invert(1);
    opacity: .92;
}
.footer-tagline {
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1.35;
    color: var(--white);
    max-width: 20ch;
    margin-bottom: var(--sp-5);
}
.footer-heading {
    font-family: var(--font-sans);
    font-size: var(--fs-3xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--se-cyan);
    margin-bottom: var(--sp-4);
}
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .15rem; }
.footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .35rem 0;
    font-size: var(--fs-xs);
    color: var(--text-inverse-2);
    transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .footer-links a:hover { color: var(--white); transform: translateX(3px); }
}
.footer-office { margin-bottom: var(--sp-5); }
.footer-office:last-child { margin-bottom: 0; }
.footer-office h3 {
    font-family: var(--font-sans);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--white);
    margin-bottom: .3rem;
    letter-spacing: .005em;
}
.footer-office p {
    font-size: var(--fs-2xs);
    line-height: 1.65;
    color: var(--text-inverse-3);
    margin: 0;
}
.footer-contact { display: grid; gap: .5rem; margin-top: var(--sp-5); }
.footer-contact a {
    display: inline-flex; align-items: center; gap: .55rem;
    min-height: 44px;
    font-size: var(--fs-xs);
    color: var(--text-inverse-2);
}
.footer-contact a:hover { color: var(--white); }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-block: var(--sp-5);
    border-top: 1px solid var(--line-inverse-2);
}
.footer-legal { font-size: var(--fs-3xs); color: var(--text-inverse-3); margin: 0; }
.footer-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.footer-badge {
    font-size: var(--fs-3xs);
    color: var(--text-inverse-3);
    border: 1px solid var(--line-inverse-2);
    border-radius: var(--r-pill);
    padding: .3rem .8rem;
}

@media (max-width: 991.98px) {
    .footer-top { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .footer-top { grid-template-columns: 1fr; gap: var(--sp-7); }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    padding-block: 8rem clamp(3rem, 2rem + 4vw, 5.5rem);
    background: var(--ink-950);
    overflow: hidden;
}
@supports not (min-height: 100svh) { .hero { min-height: 100vh; } }

.hero-media { position: absolute; inset: 0; z-index: -3; }
.hero-media video,
.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cool clinical grade: pull the video toward the brand hue instead of muddy warm */
    filter: saturate(.72) contrast(1.06) brightness(.86);
}

/* Cinematic grade. Two layers: a directional scrim for legibility, a hue wash for mood. */
.hero-scrim {
    position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background:
        linear-gradient(to top, rgba(4,16,24,.90) 0%, rgba(4,16,24,.62) 26%, rgba(4,16,24,.18) 58%, rgba(4,16,24,.32) 100%),
        linear-gradient(105deg, rgba(6,26,38,.62) 0%, rgba(6,26,38,.10) 52%, transparent 78%);
}
.hero-wash {
    position: absolute; inset: 0; z-index: -2; pointer-events: none;
    mix-blend-mode: soft-light;
    background: radial-gradient(ellipse 70% 60% at 22% 78%, rgba(74,192,224,.45), transparent 68%);
}

/* Depth-sensing motif: a slow scan sweep. This is the product's own point of view,
   not decoration. One instance, hero only, disabled under reduced motion. */
.hero-scan {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    overflow: hidden;
    opacity: .5;
}
.hero-scan::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 34vh;
    background: linear-gradient(to bottom, transparent, var(--scan-line) 46%, rgba(138,216,238,.22) 52%, var(--scan-line) 58%, transparent);
    animation: heroScan 13s var(--ease-in-out) infinite;
}
@keyframes heroScan {
    0%   { transform: translate3d(0, -40vh, 0); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translate3d(0, 118vh, 0); opacity: 0; }
}

.hero-inner { position: relative; z-index: 1; max-width: 46rem; }

.hero-title {
    font-size: var(--fs-5xl);
    line-height: 1.02;
    letter-spacing: -0.022em;
    color: var(--white);
    margin-bottom: var(--sp-5);
    text-shadow: 0 2px 40px rgba(0,0,0,.28);
}
.hero-title em {
    font-style: italic;
    color: var(--se-cyan);
}

.hero-sub {
    font-size: clamp(1.0625rem, .95rem + .5vw, 1.3125rem);
    line-height: 1.55;
    color: rgba(255,255,255,.88);
    max-width: 42ch;
    margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem);
    text-shadow: 0 1px 24px rgba(0,0,0,.3);
    text-wrap: pretty;
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); }
.hero-actions .link-arrow { color: rgba(255,255,255,.9); }
.hero-actions .link-arrow:hover { color: var(--white); }

@media (max-width: 767.98px) {
    /* Filling a portrait box with a 1.9:1 video leaves only a third of the frame
       visible. Give the media the desktop hero's own 1.6 box instead, so the crop
       matches what desktop shows, and let the copy sit beneath it on the ink. */
    .hero {
        display: block;
        min-height: 0;
        padding-block: 0 clamp(2rem, 1.4rem + 2.2vw, 2.75rem);
        background: linear-gradient(180deg, var(--ink-950) 0%, #0A2634 62%, #0C3243 100%);
    }
    .hero-media {
        position: relative;
        inset: auto;
        z-index: 0;
        /* the clip's own frame, so nothing is cropped at all */
        aspect-ratio: 1600 / 844;
    }
    .hero-media video,
    .hero-media img { height: 100%; }
    /* dissolve the foot of the frame into the ink the copy sits on */
    .hero-media::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: -1px;
        height: 42%;
        background: linear-gradient(to top, var(--ink-950) 8%, rgba(7,22,32,.55) 55%, transparent);
        pointer-events: none;
    }
    .hero-scrim, .hero-wash, .hero-scan { display: none; }

    .hero > .container { padding-top: var(--sp-4); }
    .hero-inner { max-width: none; }
    .hero-title { font-size: clamp(2.5rem, 1.6rem + 4.6vw, 3.25rem); margin-bottom: var(--sp-4); }
    .hero-sub { margin-bottom: var(--sp-5); }
    /* the copy is on a solid surface now, so it needs no shadow to stay legible */
    .hero-title, .hero-sub { text-shadow: none; }
    .hero-sub { max-width: 46ch; }
    .hero-actions .btn-se { width: 100%; }
    .hero-actions { gap: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   10. IMPACT RAIL - the real numbers, counted up on entry
   -------------------------------------------------------------------------- */
.impact {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.impact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border-inline: 1px solid var(--line);
}
.impact-cell {
    background: var(--surface);
    padding: clamp(2rem, 1.4rem + 2.4vw, 3.25rem) clamp(1.25rem, .8rem + 1.6vw, 2.5rem);
}
.impact-value {
    display: flex;
    align-items: baseline;
    gap: .04em;
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 1.9rem + 3.4vw, 4.25rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin-bottom: var(--sp-3);
}
.impact-value .unit { font-size: .52em; color: var(--accent); letter-spacing: -0.01em; }
/* a spelled-out unit ("Million") is read, not glanced at, so it takes the AA accent */
.impact-value .unit--word { margin-left: .16em; color: var(--accent-text); }
.impact-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text);
    margin-bottom: .35rem;
    letter-spacing: -0.005em;
}
.impact-note {
    font-size: var(--fs-2xs);
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
    max-width: 30ch;
}
@media (max-width: 767.98px) {
    .impact-grid { grid-template-columns: 1fr; border-inline: 0; }
    .impact-cell { padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   11. TRUST / LOGO WALL
   -------------------------------------------------------------------------- */
.trust-copy { max-width: 700px; margin-bottom: clamp(2.5rem, 1.7rem + 3vw, 4rem); }
.trust-copy .s-title { font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }

.trust-count {
    display: flex;
    align-items: baseline;
    gap: .65rem;
    margin: var(--sp-5) 0 0;
    padding-top: var(--sp-5);
    border-top: 1px solid var(--line);
    max-width: 420px;
}
.trust-count b {
    font-family: var(--font-display);
    font-size: 2.125rem;
    font-weight: 400;
    line-height: 1;
    color: var(--accent-text);
}
.trust-count span { font-size: var(--fs-2xs); color: var(--text-muted); line-height: 1.5; }

.logo-wall {
    display: grid;
    /* twelve marks, so the grid is set to divide cleanly rather than leaving a
       ragged trailing row: 6 x 2, then 4 x 3, then 3 x 4 */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(.75rem, .5rem + .8vw, 1.5rem);
    padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
}
.logo-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 104px;
    padding: .5rem;
    border-radius: var(--r-xs);
    transition: transform var(--dur-3) var(--ease-out);
}
.logo-cell img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;              /* dissolves the white box on non-alpha logos */
    filter: grayscale(1) contrast(1.08);
    opacity: .95;
    transition: filter var(--dur-3) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .logo-cell:hover { transform: translateY(-2px); }
    .logo-cell:hover img { filter: grayscale(0) contrast(1); }
}
@media (max-width: 991.98px) {
    .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
    .logo-cell { height: 72px; }
}

/* --------------------------------------------------------------------------
   12. STORY / PRIVACY TIMELINE
   -------------------------------------------------------------------------- */
.story-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    gap: clamp(2rem, 1rem + 5vw, 5.5rem);
    align-items: start;
}

.story-steps { position: relative; padding-left: clamp(3.25rem, 2rem + 2.5vw, 4.5rem); }
.story-track {
    position: absolute;
    left: clamp(1.1rem, .6rem + 1vw, 1.6rem);
    top: .45rem;
    bottom: 3rem;
    width: 2px;
    border-radius: 2px;
    background: var(--line-strong);
    overflow: hidden;
}
.story-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--se-cyan), var(--se-teal));
    transform: scaleY(var(--story-progress, 0));
    transform-origin: top;
    transition: transform 140ms linear;
}

.story-step {
    position: relative;
    padding-bottom: clamp(2.5rem, 1.6rem + 3vw, 4rem);
    opacity: .38;
    transition: opacity var(--dur-4) var(--ease-out);
}
.story-step:last-child { padding-bottom: 0; }
.story-step.is-active { opacity: 1; }

.story-dot {
    position: absolute;
    left: calc(clamp(3.25rem, 2rem + 2.5vw, 4.5rem) * -1 + clamp(1.1rem, .6rem + 1vw, 1.6rem) - 6px);
    top: .5rem;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--surface-sunken);
    border: 2px solid var(--line-strong);
    transition: background-color var(--dur-4) var(--ease-out), border-color var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
}
.story-step.is-active .story-dot {
    background: var(--se-teal);
    border-color: var(--se-cyan);
    transform: scale(1.14);
    box-shadow: 0 0 0 5px rgba(43,160,192,.14);
}

.story-kicker {
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .45rem;
    transition: color var(--dur-4) var(--ease-out);
}
.story-step.is-active .story-kicker { color: var(--accent-text); }

.story-step h3 {
    font-family: var(--font-sans);
    font-size: var(--fs-xl);
    font-weight: 600;
    letter-spacing: -0.014em;
    line-height: 1.25;
    margin-bottom: var(--sp-3);
}
.story-step p {
    font-size: var(--fs-sm);
    line-height: 1.78;
    color: var(--text-secondary);
    max-width: 52ch;
    margin: 0;
}

.story-media {
    position: sticky;
    top: clamp(6rem, 5rem + 3vw, 8rem);
}
.story-frame {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--ink-900);
    box-shadow: var(--sh-lg);
}
.story-frame img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.055);
    transition: opacity 620ms var(--ease-out), transform 1500ms var(--ease-out);
}
.story-frame img.is-active { opacity: 1; transform: scale(1); }
.story-frame::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(7,22,32,.5), transparent 46%);
}
.story-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: var(--sp-5);
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: var(--fs-2xs);
    font-weight: 500;
    color: rgba(255,255,255,.9);
}

@media (max-width: 991.98px) {
    .story-layout { grid-template-columns: 1fr; }
    .story-media { position: static; order: -1; margin-bottom: var(--sp-7); }
    .story-frame { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   13. SOLUTION CARDS
   -------------------------------------------------------------------------- */
.solution-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, .6rem + 1.2vw, 1.75rem);
}

/* Both cards are a real photograph under a scrim. The rooms do the
   differentiating, so the card itself needs no decoration at all. */
.solution-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(25rem, 20rem + 14vw, 34rem);
    padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    border-radius: var(--r-xl);
    overflow: hidden;
    text-decoration: none;
    color: var(--white);
    background: var(--ink-950);
    border: 1px solid rgba(255,255,255,.09);
    transition: transform var(--dur-4) var(--ease-out), box-shadow var(--dur-4) var(--ease-out);
}

.solution-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}
.solution-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--media-pos, center);
    transition: transform 900ms var(--ease-out);
}
.solution-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(4,16,24,.93) 10%, rgba(4,16,24,.62) 40%, rgba(4,16,24,.16) 70%, rgba(4,16,24,.34) 100%),
        linear-gradient(100deg, rgba(6,26,38,.42), transparent 58%);
}

@media (hover: hover) and (pointer: fine) {
    .solution-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
    .solution-card:hover .solution-media img { transform: scale(1.045); }
    .solution-card:hover .solution-cta i { transform: translate(3px, -3px); }
}

.solution-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .38rem .9rem;
    border-radius: var(--r-pill);
    margin-bottom: auto;
    color: var(--se-cyan);
    background: rgba(7,22,32,.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(74,192,224,.3);
}

/* keep the hardware in frame rather than letting the crop push it to the edge */
.solution-card:first-child .solution-media img { --media-pos: 58% center; }
.solution-card:last-child .solution-media img { --media-pos: 58% center; }

.solution-name {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: var(--sp-8) 0 var(--sp-3);
}
.solution-role {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: rgba(255,255,255,.82);
    margin-bottom: var(--sp-5);
    max-width: 34ch;
}

.solution-facts {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-6);
    display: grid;
    gap: .5rem;
    color: rgba(255,255,255,.84);
}
.solution-facts li {
    position: relative;
    padding-left: 1.35rem;
    font-size: var(--fs-2xs);
    line-height: 1.55;
}
.solution-facts li::before {
    content: "";
    position: absolute;
    left: 0; top: .55em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--se-cyan);
}

.solution-cta {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--se-cyan);
}
.solution-cta i { font-size: .72em; transition: transform var(--dur-2) var(--ease-out); }

@media (max-width: 767.98px) {
    .solution-grid { grid-template-columns: 1fr; }
    .solution-card { min-height: 26rem; }
}

/* --------------------------------------------------------------------------
   14. RECOGNITION (accreditation + awards, one dark chapter)
   -------------------------------------------------------------------------- */
.accredit-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, .6rem + 1.2vw, 1.5rem);
    max-width: 820px;
    margin: 0 auto clamp(3rem, 2rem + 3vw, 4.5rem);
}
.accredit-card {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: center;
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    background: rgba(255,255,255,.05);
    border: 1px solid var(--line-inverse);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.accredit-logo {
    display: flex; align-items: center; justify-content: center;
    height: 62px;
    padding: .5rem .65rem;
    background: var(--white);
    border-radius: var(--r-sm);
}
.accredit-logo img { max-height: 100%; max-width: 100%; object-fit: contain; }
.accredit-card p {
    font-size: var(--fs-2xs);
    line-height: 1.65;
    color: var(--text-inverse-2);
    margin: 0;
}

.awards-wall {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.65rem, .4rem + .8vw, 1.15rem);
    max-width: 1000px;
    margin-inline: auto;
}
.award-tile {
    aspect-ratio: 33 / 20;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--line-inverse);
    box-shadow: 0 14px 34px -22px rgba(0,0,0,.8);
    transition: transform var(--dur-4) var(--ease-out), border-color var(--dur-4) var(--ease-out), box-shadow var(--dur-4) var(--ease-out);
}
.award-tile img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
    .award-tile:hover {
        transform: translateY(-4px);
        border-color: rgba(74,192,224,.42);
        box-shadow: 0 24px 50px -24px rgba(74,192,224,.45);
    }
}

.programme-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.programme-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--fs-2xs);
    font-weight: 500;
    color: var(--text-inverse-2);
    padding: .5rem 1.1rem;
    border: 1px solid var(--line-inverse);
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.04);
}
.programme-pill i { color: var(--se-cyan); font-size: .78em; }

@media (max-width: 767.98px) {
    .accredit-row { grid-template-columns: 1fr; }
    .accredit-card { grid-template-columns: 88px minmax(0, 1fr); gap: var(--sp-4); }
    .awards-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   15. MISSION MOMENT
   -------------------------------------------------------------------------- */
.mission-quote {
    max-width: 900px;
    margin-inline: auto;
    text-align: center;
}
.mission-mark {
    display: block;
    font-family: var(--font-display);
    font-size: 4rem;
    line-height: .6;
    color: var(--se-cyan);
    margin-bottom: var(--sp-5);
}
.mission-text {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.75rem);
    line-height: 1.28;
    letter-spacing: -0.018em;
    color: var(--text);
    margin-bottom: var(--sp-7);
    text-wrap: balance;
}
.mission-text strong { font-weight: 400; font-style: italic; color: var(--accent-text); }

/* --------------------------------------------------------------------------
   16. PARTNER / VALUE COLUMNS - hairlines, not card boxes
   -------------------------------------------------------------------------- */
.pillar-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.5rem, .8rem + 2.4vw, 3rem);
}
.pillar-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pillar {
    padding-top: var(--sp-5);
    border-top: 2px solid var(--ink-900);
}
.band-ink .pillar { border-top-color: var(--se-cyan); }
.pillar-index {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: .16em;
    color: var(--accent-text);
    margin-bottom: var(--sp-4);
}
.band-ink .pillar-index { color: var(--se-cyan); }

.pillar h3, .pillar h4 {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -0.012em;
    margin-bottom: var(--sp-3);
}
.pillar p {
    font-size: var(--fs-xs);
    line-height: 1.72;
    color: var(--text-secondary);
    margin: 0;
}
.band-ink .pillar p { color: var(--text-inverse-2); }

@media (max-width: 991.98px) {
    .pillar-grid, .pillar-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .pillar-grid, .pillar-grid--3 { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* --------------------------------------------------------------------------
   17. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band { text-align: center; }
/* The closing band and the footer must read as one continuous dark base, so this
   gradient runs vertically and lands on the footer's first stop. */
.band-ink.cta-band {
    background: linear-gradient(180deg, var(--ink-950) 0%, #0C3243 52%, #0F3D50 100%);
}
.cta-title {
    font-size: var(--fs-3xl);
    color: var(--white);
    max-width: 20ch;
    margin: 0 auto var(--sp-5);
}
.cta-lead {
    font-size: var(--fs-md);
    line-height: 1.7;
    color: var(--text-inverse-2);
    max-width: 52ch;
    margin: 0 auto var(--sp-7);
}
.cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4) var(--sp-6);
}

/* --------------------------------------------------------------------------
   18. PAGE HERO (subpages)
   -------------------------------------------------------------------------- */
.page-hero {
    padding-block: clamp(8.5rem, 6.5rem + 6vw, 12rem) clamp(4rem, 2.8rem + 4vw, 6.5rem);
}
.page-hero-inner { max-width: 46rem; }
.page-hero-inner--center { margin-inline: auto; text-align: center; }
.page-hero h1 {
    font-size: var(--fs-4xl);
    color: var(--white);
    margin-bottom: var(--sp-5);
}
.page-hero .s-lead {
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: rgba(255,255,255,.82);
    max-width: 46ch;
}
.page-hero-inner--center .s-lead { margin-inline: auto; }
.page-hero-actions { margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); align-items: center; }
.page-hero-inner--center .page-hero-actions { justify-content: center; }

/* A compact stat strip that can sit at the foot of a page hero */
.hero-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
    border-top: 1px solid var(--line-inverse);
}
.hero-fact {
    padding: var(--sp-5) clamp(1.25rem, .8rem + 1.4vw, 2.25rem);
    border-left: 1px solid var(--line-inverse-2);
}
.hero-fact:first-child { border-left: 0; padding-left: 0; }
.hero-fact b {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
    color: var(--se-cyan);
    margin-bottom: .45rem;
}
.hero-fact span { font-size: var(--fs-2xs); line-height: 1.55; color: var(--text-inverse-2); display: block; max-width: 27ch; text-wrap: pretty; }
/* facts that double as the page's contents: each jumps to the section that proves it */
a.hero-fact { display: block; color: inherit; text-decoration: none; }
a.hero-fact b { transition: color var(--dur-2) var(--ease-out); }
a.hero-fact:focus-visible { outline: 2px solid var(--se-cyan); outline-offset: 4px; border-radius: var(--r-xs); }
@media (hover: hover) {
    a.hero-fact:hover b { color: var(--se-cyan-lift); }
    a.hero-fact:hover span { color: var(--text-inverse); }
}
@media (max-width: 575.98px) {
    .hero-fact { border-left: 0; border-top: 1px solid var(--line-inverse-2); padding-inline: 0; }
    .hero-fact:first-child { border-top: 0; }
}

/* --------------------------------------------------------------------------
   19. SPEC BOARD - lattice of capabilities, replaces equal card rows
   -------------------------------------------------------------------------- */
.spec-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.spec-board--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spec-cell {
    background: var(--surface);
    padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
    transition: background-color var(--dur-3) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .spec-cell:hover { background: var(--surface-sunken); }
}

.spec-cell h3, .spec-cell h4 {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.35;
    margin-bottom: var(--sp-3);
}
.spec-cell p {
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: var(--text-secondary);
    /* the heading is the only thing above this now, so the measure has to hold
       itself in: a two-up board is wide enough to run 90 characters otherwise */
    max-width: 46ch;
    margin: 0;
}
@media (max-width: 991.98px) { .spec-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .spec-board, .spec-board--2 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   20. FEATURE ROWS + CLAIM PLATES
   -------------------------------------------------------------------------- */
.feature-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: center;
    margin-bottom: clamp(3.5rem, 2.2rem + 5vw, 6.5rem);
}
.feature-row:last-of-type { margin-bottom: 0; }
.feature-row--flip .feature-media { order: 2; }

.feature-eyebrow {
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: var(--sp-4);
}
.feature-row h3 {
    font-size: var(--fs-2xl);
    margin-bottom: var(--sp-4);
}
.feature-row > .feature-copy > p {
    font-size: var(--fs-sm);
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 54ch;
    margin-bottom: var(--sp-5);
}
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.check-list li {
    position: relative;
    padding-left: 1.75rem;
    font-size: var(--fs-xs);
    line-height: 1.65;
    color: var(--text);
}
.check-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0; top: .1em;
    font-size: .72em;
    color: var(--accent);
}

/* Claim plate: a typographic panel that states one true figure. */
.claim-plate {
    position: relative;
    isolation: isolate;
    aspect-ratio: 16 / 11;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border-radius: var(--r-xl);
    overflow: hidden;
    background: linear-gradient(162deg, var(--ink-950) 0%, #0D2E3F 60%, #14536B 100%);
    color: var(--white);
    box-shadow: var(--sh-lg);
}
.claim-plate--tint {
    background: linear-gradient(162deg, #F2FAFD 0%, var(--surface-tint) 100%);
    color: var(--text);
    border: 1px solid var(--line);
    box-shadow: var(--sh-md);
}
.claim-plate::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background-image: radial-gradient(rgba(255,255,255,.15) 1.4px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 68% 68% at 62% 34%, #000 6%, transparent 74%);
    mask-image: radial-gradient(ellipse 68% 68% at 62% 34%, #000 6%, transparent 74%);
}
.claim-plate--tint::after { background-image: radial-gradient(rgba(43,160,192,.28) 1.4px, transparent 1.4px); }

.claim-figure {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 2.1rem + 6.6vw, 7.5rem);
    line-height: .92;
    letter-spacing: -0.035em;
    margin: auto 0 0;
}
.claim-plate--tint .claim-figure { color: var(--accent-text); }
.claim-figure sup { font-size: .34em; vertical-align: super; letter-spacing: 0; margin-left: .06em; }
.claim-figure .claim-unit { font-size: .38em; letter-spacing: -0.01em; margin-left: .14em; }
.claim-caption {
    font-size: var(--fs-xs);
    line-height: 1.55;
    max-width: 24ch;
    margin: var(--sp-4) 0 0;
    color: rgba(255,255,255,.78);
}
.claim-plate--tint .claim-caption { color: var(--text-secondary); }
.claim-chip {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .4rem .9rem;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.28);
    color: var(--white);
}
.claim-plate--tint .claim-chip {
    background: rgba(255,255,255,.8);
    border-color: var(--line-strong);
    color: var(--accent-text);
}
.claim-chip i { font-size: .82em; }

@media (max-width: 767.98px) {
    .feature-row { grid-template-columns: 1fr; }
    .feature-row--flip .feature-media { order: 0; }
    .claim-plate { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   21. SEQUENCE STRIP - three beats across a full-width row
   -------------------------------------------------------------------------- */
.sequence {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.sequence-beat {
    position: relative;
    background: var(--surface);
    padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
}
.sequence-beat:nth-child(2) { background: var(--surface-sunken); }
.sequence-state {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .35rem .8rem;
    border-radius: var(--r-pill);
    margin-bottom: var(--sp-5);
}
.sequence-state--armed  { color: var(--accent-text); background: var(--surface-tint); }
.sequence-state--held   { color: #8A6212; background: #FDF3DE; }
.sequence-state--rearm  { color: var(--accent-text); background: var(--surface-tint); }
/* a photograph carried inside a sequence beat */
.sequence-shot {
    aspect-ratio: 668 / 410;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface-sunken);
    margin-bottom: var(--sp-5);
}
.sequence-shot img { width: 100%; height: 100%; object-fit: cover; }

.sequence-beat h3,
.sequence-beat h4 {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: 600;
    margin-bottom: var(--sp-3);
}
.sequence-beat p {
    font-size: var(--fs-2xs);
    line-height: 1.72;
    color: var(--text-secondary);
    margin: 0;
}
.sequence-beat::after {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: -9px; top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 18px; height: 18px;
    display: grid; place-items: center;
    font-size: .5rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--white);
}
.sequence-beat:last-child::after { display: none; }
.sequence-beat:has(.sequence-shot)::after { display: none; }
@media (max-width: 767.98px) {
    .sequence { grid-template-columns: 1fr; }
    .sequence-beat::after { right: 50%; top: auto; bottom: -9px; transform: translateX(50%) rotate(90deg); }
}

/* --------------------------------------------------------------------------
   22. RISK LINE - the escalation that runs ahead of a bed exit
   A drawn timeline, not a card row: the four postures LASSO reads sit on a
   continuous rail, and the bed exit sits past a threshold as the only beat a
   conventional alarm reaches. Three channels carry that split, never colour
   alone: position, node shape (solid vs hollow) and the tag copy.
   -------------------------------------------------------------------------- */
.riskline {
    --rl-dot: 12px;
    --rl-gap: clamp(1.25rem, .7rem + 1.8vw, 2.25rem);
    --rl-rail: rgba(43,160,192,.45);
    --rl-bridge: var(--rl-gap);

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.2fr);
    gap: var(--rl-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}
.riskstep {
    position: relative;
    margin: 0;
    padding-top: calc(var(--rl-dot) + var(--sp-5));
}

/* Rail. The line is its own element so the draw-in scale never squashes the
   node sitting on top of it. */
.riskstep-track {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: var(--rl-dot);
    pointer-events: none;
}
.riskstep-line {
    position: absolute;
    top: 50%; left: 0;
    width: calc(100% + var(--rl-bridge));
    height: 2px;
    margin-top: -1px;
    background: var(--rl-rail);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 560ms var(--ease-out);
    transition-delay: calc(var(--reveal-delay, 0ms) + 120ms);
}
.riskstep.is-in .riskstep-line { transform: scaleX(1); }
.riskstep-node {
    position: absolute;
    top: 50%; left: 0;
    width: var(--rl-dot);
    height: var(--rl-dot);
    margin-top: calc(var(--rl-dot) / -2);
    border-radius: var(--r-pill);
    background: var(--accent);
    /* rings the node in the band colour so the rail breaks cleanly around it */
    box-shadow: 0 0 0 5px var(--surface);
}

.riskstep-title {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.35;
    color: var(--text);
    margin: 0 0 var(--sp-3);
}
.riskstep-body {
    font-size: var(--fs-xs);
    line-height: 1.72;
    color: var(--text-secondary);
    margin: 0;
}

/* The handoff: step four reaches across a doubled gap to the bed exit. */
.riskstep--handoff { --rl-bridge: calc(var(--rl-gap) * 2); }

/* Past the threshold. */
.riskstep--late {
    margin-left: var(--rl-gap);
    --rl-bridge: 0px;
}
.riskstep--late .riskstep-line { background: none; }
.riskstep--late .riskstep-node {
    background: var(--surface);
    border: 2px solid var(--ink-300);
}
.riskstep--late::before {
    content: "";
    position: absolute;
    left: calc(var(--rl-gap) * -0.5);
    top: 0; bottom: var(--sp-2);
    border-left: 1px dashed var(--line-strong);
}
.riskline-note {
    display: block;
    max-width: 64ch;
    margin: clamp(2.25rem, 1.5rem + 2.4vw, 3.25rem) 0 0;
    font-size: var(--fs-2xs);
    line-height: 1.6;
    color: var(--text-muted);
}

/* Below the desktop range the rail turns vertical, which is what a timeline
   wants to do anyway. */
@media (max-width: 991.98px) {
    .riskline {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .riskstep {
        padding-top: 0;
        padding-left: calc(var(--rl-dot) + var(--sp-5));
        padding-bottom: var(--sp-7);
    }
    .riskstep:last-child { padding-bottom: 0; }
    .riskstep-track {
        top: .34em; left: 0;
        width: var(--rl-dot);
        height: 100%;
    }
    .riskstep-line {
        top: 0;
        left: calc(var(--rl-dot) / 2 - 1px);
        width: 2px;
        height: 100%;
        margin-top: 0;
        transform: scaleY(0);
        transform-origin: center top;
    }
    .riskstep.is-in .riskstep-line { transform: scaleY(1); }
    .riskstep-node { top: 0; margin-top: 0; }

    .riskstep--handoff .riskstep-line { height: calc(100% + var(--sp-6)); }
    .riskstep--late {
        margin-left: 0;
        margin-top: var(--sp-6);
    }
    .riskstep--late::before {
        left: 0;
        right: 0;
        top: calc(var(--sp-6) / -2);
        bottom: auto;
        border-left: 0;
        border-top: 1px dashed var(--line-strong);
    }
}

@media (prefers-reduced-motion: reduce) {
    .riskstep-line { transform: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   23. COMPARISON TABLE
   -------------------------------------------------------------------------- */
.compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.compare-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}
.compare-table th,
.compare-table td {
    padding: clamp(.9rem, .7rem + .5vw, 1.15rem) clamp(1rem, .8rem + .6vw, 1.5rem);
    text-align: left;
    font-size: var(--fs-xs);
    vertical-align: middle;
}
.compare-table thead th {
    font-family: var(--font-sans);
    font-size: var(--fs-3xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line);
}
.compare-table tbody td { border-top: 1px solid var(--line); }
.compare-table tbody tr:first-child td { border-top: 0; }
.compare-table td:first-child { font-weight: 500; color: var(--text); width: 34%; }
.compare-table td:nth-child(2) { color: var(--text-muted); }
.compare-table th:last-child { color: var(--accent-text); background: rgba(43,160,192,.09); }
.compare-table td:last-child { background: rgba(43,160,192,.05); color: var(--text); }
.compare-table--neutral th:last-child { color: var(--text-muted); background: var(--surface-sunken); }
.compare-table--neutral td:last-child { background: transparent; }
/* In a product-vs-product table neither column may read as the winner, so both
   value columns get the same weight the desktop rules reserve for "ours". */
.compare-table--neutral td:nth-child(2),
.compare-table--neutral td:last-child { color: var(--text); }
.compare-table--neutral th:nth-child(2),
.compare-table--neutral th:last-child { width: 33%; }

.compare-table .ic-x { color: #B4626B; margin-right: .5rem; font-size: .82em; }
.compare-table .ic-c { color: var(--accent); margin-right: .5rem; font-size: .82em; }

/* Below the width where the three columns fit, the table becomes a stack of
   cards. Nothing hides behind a sideways gesture, so nothing needs a scroll
   affordance, and the row label sits with the value it belongs to. */
@media (max-width: 760px) {
    .compare-wrap { overflow-x: visible; border: 0; background: transparent; }
    .compare-table { min-width: 0; display: block; }
    .compare-table thead { display: none; }
    .compare-table tbody { display: block; }

    .compare-table tbody tr {
        display: block;
        margin-bottom: var(--sp-4);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        background: var(--surface);
        overflow: hidden;
    }
    .compare-table tbody tr:last-child { margin-bottom: 0; }

    .compare-table tbody td {
        display: block;
        width: auto;
        padding: var(--sp-4) var(--sp-5);
        border-top: 1px solid var(--line);
        background: transparent;
    }
    .compare-table tbody td:first-child {
        /* beats the 34% column width the desktop rule sets */
        width: auto;
        border-top: 0;
        background: var(--surface-sunken);
        font-size: var(--fs-2xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: var(--text-muted);
    }
    .compare-table tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .3rem;
        font-size: var(--fs-3xs);
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--text-muted);
    }
}

/* --------------------------------------------------------------------------
   24. TESTIMONIAL
   -------------------------------------------------------------------------- */
.quote-block { max-width: 780px; margin-inline: auto; text-align: center; }
.quote-text {
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2rem);
    line-height: 1.42;
    letter-spacing: -0.012em;
    color: var(--text);
    margin-bottom: var(--sp-6);
    text-wrap: balance;
}
.quote-attrib {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-size: var(--fs-2xs);
    color: var(--text-secondary);
}
.quote-attrib b { font-weight: 600; color: var(--text); }
.quote-attrib .sep { width: 20px; height: 1px; background: var(--line-strong); }

/* --------------------------------------------------------------------------
   25. FORMS
   -------------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.field { display: grid; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field label {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.003em;
}
.field label .opt { font-weight: 400; color: var(--text-muted); }
.field .form-control,
.field input,
.field textarea,
.field select {
    width: 100%;
    min-height: 48px;
    padding: .75rem 1rem;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.65; }
.field ::placeholder { color: var(--text-muted); opacity: 1; }
.field .form-control:focus,
.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(43,160,192,.16);
}
.field .help { font-size: var(--fs-3xs); color: var(--text-muted); }
.field .error {
    display: none;
    font-size: var(--fs-3xs);
    font-weight: 500;
    color: #A5474F;
}
.field.is-invalid .form-control,
.field.is-invalid input,
.field.is-invalid textarea { border-color: #C0616A; }
.field.is-invalid .error { display: block; }

.form-note { font-size: var(--fs-3xs); color: var(--text-muted); margin: 0; }

.form-status {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    line-height: 1.6;
    margin-bottom: var(--sp-5);
}
.form-status i { margin-top: .2em; }
.form-status--ok   { background: #E9F7EF; color: #1E6B41; border: 1px solid #BFE5CF; }
.form-status--err  { background: #FDEDEE; color: #8F3B43; border: 1px solid #F3C9CD; }

/* Contact details rail */
.contact-rail { display: grid; gap: 0; border-top: 1px solid var(--line); }
.contact-item {
    display: block;
    padding: var(--sp-5) 0;
    border-bottom: 1px solid var(--line);
}
.contact-item .k { display: block; font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; color: var(--text-muted); margin-bottom: .15rem; }
.contact-item .v { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.contact-item a.v { display: inline-flex; align-items: center; min-height: 40px; color: var(--accent-text); }

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

/* --------------------------------------------------------------------------
   26. OFFICES + PEOPLE
   -------------------------------------------------------------------------- */
.office-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.office {
    background: var(--surface);
    padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
}
.office .flag {
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: var(--sp-4);
}
.office h3 { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 600; margin-bottom: var(--sp-3); }
.office address {
    font-style: normal;
    font-size: var(--fs-2xs);
    line-height: 1.75;
    color: var(--text-secondary);
    margin: 0;
}
@media (max-width: 767.98px) { .office-grid { grid-template-columns: 1fr; } }


/* --------------------------------------------------------------------------
   27. MISC CONTENT BLOCKS
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
.split--center { align-items: center; }
.split--60 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 991.98px) { .split, .split--60 { grid-template-columns: 1fr; } }

/* Definition rows: a titled fact list without card chrome */
.fact-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.fact-list > div { padding: var(--sp-5) 0; border-bottom: 1px solid var(--line); }
.fact-list h3,
.fact-list h4 { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; margin-bottom: .3rem; }
.fact-list p { font-size: var(--fs-2xs); line-height: 1.72; color: var(--text-secondary); margin: 0; }

/* Pull panel: a tinted aside for a mission statement or callout */
.pull-panel {
    padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    background: var(--surface-tint);
    border-radius: var(--r-lg);
    border: 1px solid rgba(43,160,192,.16);
}
.pull-panel .k {
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: var(--sp-4);
}
.pull-panel p {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
    line-height: 1.4;
    color: var(--text);
    margin: 0;
}
.pull-panel p strong { font-weight: 400; font-style: italic; color: var(--accent-text); }

/* Grant / support callout */
.support-note {
    display: block;
    padding: var(--sp-5);
    border-radius: var(--r-md);
    background: var(--surface-sunken);
    border: 1px solid var(--line);
}
.support-note--narrow { max-width: 720px; margin-inline: auto; }
.support-note p { font-size: var(--fs-2xs); line-height: 1.7; color: var(--text-secondary); margin: 0; }

/* Grant acknowledgement: the funder's mark on the white it was designed for,
   with the relationship spelled out beside it rather than implied. */
.grant-mark {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    max-width: 760px;
    margin-inline: auto;
    padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem) clamp(1.5rem, 1rem + 2vw, 2.75rem);
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--sh-sm);
}
.grant-mark-logo {
    box-sizing: content-box;
    width: clamp(120px, 6rem + 5vw, 176px);
    height: auto;
    padding-right: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    border-right: 1px solid var(--line);
}
.grant-mark-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text); margin: 0 0 .3rem; }
.grant-mark-text p:last-child { font-size: var(--fs-2xs); line-height: 1.7; color: var(--text-secondary); margin: 0; }
@media (max-width: 575.98px) {
    .grant-mark { grid-template-columns: 1fr; gap: var(--sp-5); }
    .grant-mark-logo { width: 140px; padding-right: 0; border-right: 0; }
}

/* Media frame for real photography */
.media-frame {
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--surface-sunken);
    box-shadow: var(--sh-md);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame--tall { aspect-ratio: 4 / 5; }
.media-frame--wide { aspect-ratio: 16 / 10; }
/* Depth output is inherently low resolution. Cap the frame so it is never
   blown up past the point where it reads as sensor data rather than a mistake. */
.media-frame--depth { max-width: 400px; margin-inline: auto; }
/* For photographs whose subject sits low in the frame. */
.media-frame--focus-low img { object-position: 50% 72%; }
.media-caption { font-size: var(--fs-3xs); color: var(--text-muted); margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   28. REDUCED MOTION + PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    [data-reveal="wipe"] > * { clip-path: none !important; }
    .line-mask > span { transform: none !important; }
    .hero-scan { display: none; }
    .hero-media video { display: none; }
    .story-frame img { transform: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
    .navbar, .mega-dropdown, .accredit-card {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(255,255,255,.97);
    }
    .accredit-card { background: rgba(255,255,255,.1); }
}

@media print {
    .navbar, .hero-scan, .band-glow, .footer-glow { display: none !important; }
    body { color: #000; background: #fff; font-size: 11pt; }
    .band-ink { background: #fff !important; color: #000 !important; }
    .band-ink h1, .band-ink h2, .band-ink h3, .band-ink p { color: #000 !important; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   29. UTILITIES
   A deliberately short list. If something here gets used more than a few times
   it belongs in a component instead.
   -------------------------------------------------------------------------- */
.u-mt-6 { margin-top: var(--sp-6); }
.u-mt-7 { margin-top: var(--sp-7); }
.u-mt-8 { margin-top: clamp(2.5rem, 1.8rem + 3vw, 4rem); }
.u-mt-9 { margin-top: clamp(3.5rem, 2.4rem + 4vw, 5.5rem); }
.u-mb-6 { margin-bottom: var(--sp-6); }

/* Honeypot. Off-screen rather than display:none, so bots that skip hidden
   inputs still fill it in. */
.form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
}

/* --------------------------------------------------------------------------
   30. SCROLL STAGES
   A stage pins one visual and maps its own scroll range onto 0..1, published
   as --stage-progress. Video scrubbing, wipes and beat changes all read that
   single number, so the page never measures more than once per frame.
   -------------------------------------------------------------------------- */
.scroll-stage {
    --stage-length: 300;
    --stage-length-sm: 250;
    position: relative;
    isolation: isolate;
    min-height: calc(var(--stage-length, 300) * 1svh);
    /* NOT overflow:hidden. An overflowing ancestor makes a scroll container and
       silently disables position:sticky on everything inside it. */
    overflow: visible;
}
.scroll-stage--short { --stage-length: 230; --stage-length-sm: 200; }
.scroll-stage--ink {
    color: var(--text-inverse);
    background: linear-gradient(163deg, var(--ink-950) 0%, #0C2A3A 46%, #114459 100%);
}
.scroll-stage--ink h2, .scroll-stage--ink h3 { color: var(--text-inverse); }
.scroll-stage--ink .s-lead, .scroll-stage--ink .footnote { color: var(--text-inverse-2); }
.scroll-stage--ink .s-eyebrow { color: var(--se-cyan); }

/* the intro rides in normal flow and scrolls away before the panel pins */
.stage-intro {
    padding-block: var(--section-y) clamp(2rem, 1.4rem + 2vw, 3rem);
}
@supports not (height: 1svh) {
    .scroll-stage { min-height: calc(var(--stage-length, 300) * 1vh); }
}

.stage-sticky {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-block: clamp(4.5rem, 3rem + 5vw, 6rem) clamp(2.5rem, 2rem + 3vw, 4rem);
    overflow: hidden;   /* clips this panel's own glow, safe: it is the sticky box itself */
}
@supports not (height: 100svh) { .stage-sticky { min-height: 100vh; } }

.stage-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: center;
    width: 100%;
}
.stage-layout--flip .stage-media { order: 2; }

/* --- the scrubbed sequence --------------------------------------------- */
.stage-media { position: relative; }

.device-frame {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--ink-950);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--sh-lg);
}
.band-white .device-frame,
.band-sunken .device-frame { border-color: var(--line-strong); }

.device-frame video,
.device-frame img {
    display: block;
    width: 100%;
    height: auto;
}
.split .device-frame img { aspect-ratio: 4 / 5; object-fit: cover; }

/* A frame sequence held as one sprite sheet. No byte-range requests, no codec
   negotiation, no autoplay policy: it behaves the same on every host. */
.frame-seq {
    position: relative;
    aspect-ratio: 448 / 348;
    background-repeat: no-repeat;
    background-size: calc(var(--seq-cols, 8) * 100%) calc(var(--seq-rows, 6) * 100%);
    background-position: 0% 0%;
}
.frame-seq > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--dur-4) var(--ease-out);
}
/* the poster only steps aside once the sprite has decoded */
.frame-seq.is-active > img { opacity: 0; }

/* A product turntable is tall and narrow rather than a 4:5 sensor frame, and it
   sits on its own studio backdrop, so it needs no device chrome around it. */
.frame-seq--product {
    aspect-ratio: 232 / 580;
    /* a tall object has to be sized by height, or it runs past the pinned panel */
    height: min(58svh, 600px);
    width: auto;
    margin-inline: auto;
    border-radius: var(--r-lg);
    overflow: hidden;
}
@supports not (height: 1svh) { .frame-seq--product { height: min(58vh, 600px); } }
@media (max-width: 991.98px) {
    .frame-seq--product { height: min(46svh, 430px); }
}
.frame-seq--product > img { object-fit: contain; }

/* a thin sensing rule that tracks the scrub, so the reader can see that the
   scroll is what is moving the sequence */
.device-scrub {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: rgba(255,255,255,.14);
}
.device-scrub::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: scaleX(var(--stage-progress, 0));
    transform-origin: left;
    background: linear-gradient(90deg, var(--se-teal), var(--se-cyan));
}

.device-tag {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .8rem;
    border-radius: var(--r-pill);
    background: rgba(7,22,32,.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.16);
    font-family: var(--font-sans);
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.9);
}
.device-tag .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--se-cyan);
}

/* --- demo footage: real sensor video with a key to its frame states ----- */
.demo-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: center;
}
.demo-media { margin: 0; }

/* one clear affordance over the poster; native controls take over once it plays */
.demo-play {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: auto;
    width: clamp(3.5rem, 2.9rem + 2vw, 4.75rem);
    height: clamp(3.5rem, 2.9rem + 2vw, 4.75rem);
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.34);
    background: rgba(7,22,32,.62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--white);
    font-size: clamp(1rem, .9rem + .4vw, 1.25rem);
    box-shadow: var(--sh-lg);
    cursor: pointer;
    transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
/* a play triangle's visual centre sits right of its bounding box */
.demo-play i { transform: translateX(.1em); }
.demo-play:active { transform: scale(.96); }
.demo-play:focus-visible { outline: 2px solid var(--se-cyan); outline-offset: 4px; }
@media (hover: hover) {
    .demo-play:hover { background: rgba(7,22,32,.8); transform: scale(1.05); }
}

.demo-key-title {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text);
    margin-bottom: var(--sp-4);
}
/* each swatch is a miniature of the footage: a dark depth field inside the
   frame colour. The three colours are sampled from the video, not the palette. */
.key-swatch {
    display: inline-block;
    width: 1.15em;
    height: .76em;
    margin-right: .6em;
    vertical-align: -.06em;
    border: 3px solid;
    border-radius: 2px;
    background: var(--ink-600);
}
.key-swatch--scan  { border-color: #FFFFFF; box-shadow: 0 0 0 1px var(--line-strong); }
.key-swatch--track { border-color: #14FF09; }
.key-swatch--alert { border-color: #E90002; }

@media (max-width: 991.98px) {
    .demo-layout { grid-template-columns: 1fr; }
}

/* --- the beats that change as the sequence advances --------------------- */
.stage-beats { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }

.stage-beat {
    position: relative;
    padding: clamp(.6rem, .3rem + .8vh, 1rem) 0 clamp(.6rem, .3rem + .8vh, 1rem) var(--sp-6);
    border-top: 1px solid var(--line);
    opacity: .5;
    transition: opacity var(--dur-4) var(--ease-out);
}
.band-ink .stage-beat { border-top-color: var(--line-inverse-2); }
.stage-beat:first-child { border-top: 0; }
.stage-beat.is-current { opacity: 1; }

.stage-beat::before {
    content: "";
    position: absolute;
    left: 0; top: calc(clamp(.6rem, .3rem + .8vh, 1rem) + .45em);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--line-strong);
    transition: background-color var(--dur-4) var(--ease-out), box-shadow var(--dur-4) var(--ease-out);
}
.band-ink .stage-beat::before { background: rgba(255,255,255,.22); }
.stage-beat.is-current::before {
    background: var(--se-teal);
    box-shadow: 0 0 0 4px rgba(43,160,192,.16);
}
.band-ink .stage-beat.is-current::before {
    background: var(--se-cyan);
    box-shadow: 0 0 0 4px rgba(74,192,224,.18);
}

.stage-beat h3 {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -0.012em;
    margin-bottom: .3rem;
}
.stage-beat p {
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 42ch;
    margin: 0;
}
.band-ink .stage-beat p { color: var(--text-inverse-2); }

.stage-label {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: .35rem;
}
.band-ink .stage-label { color: var(--se-cyan); }

@media (max-width: 991.98px) {
    .scroll-stage { min-height: calc(var(--stage-length-sm, var(--stage-length, 300)) * 1svh); }
    .stage-sticky { min-height: 100svh; align-items: flex-start; padding-top: 6rem; }
    .stage-layout { grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }
    .stage-layout--flip .stage-media { order: 0; }
    .stage-beat { padding-block: var(--sp-3); }
    .stage-beat p { font-size: var(--fs-2xs); }
}

/* --------------------------------------------------------------------------
   31. WIPE COMPARE
   Two frames of the same room. Scroll pulls the sensor's view across the
   ordinary one, so the difference is shown rather than described.
   -------------------------------------------------------------------------- */
.wipe {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--ink-950);
    box-shadow: var(--sh-lg);
}
.wipe img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* A soft leading edge rather than a hard cut. The two frames are separate
   renders of the same room, so a knife-edge wipe would make the furniture jump;
   a gradient seam reads as the sensor sweeping across instead. */
.wipe-top {
    --wipe-at: calc(var(--stage-progress, 0) * 118% - 9%);
    -webkit-mask-image: linear-gradient(to right,
        #000 0%,
        #000 calc(var(--wipe-at) - 5%),
        rgba(0,0,0,.55) var(--wipe-at),
        transparent calc(var(--wipe-at) + 5%),
        transparent 100%);
    mask-image: linear-gradient(to right,
        #000 0%,
        #000 calc(var(--wipe-at) - 5%),
        rgba(0,0,0,.55) var(--wipe-at),
        transparent calc(var(--wipe-at) + 5%),
        transparent 100%);
}

.wipe-edge {
    position: absolute;
    top: 0; bottom: 0;
    left: calc(var(--stage-progress, 0) * 100%);
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(to bottom, transparent, var(--se-cyan) 12%, var(--se-cyan) 88%, transparent);
    box-shadow: 0 0 24px 4px rgba(74,192,224,.45);
    opacity: calc(1 - max(0, (var(--stage-progress, 0) - .93) * 14));
    pointer-events: none;
}
.wipe-edge::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 34px; height: 34px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--se-cyan);
    background: rgba(7,22,32,.4);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.wipe-caption {
    position: absolute;
    bottom: var(--sp-4);
    z-index: 2;
    padding: .35rem .85rem;
    border-radius: var(--r-pill);
    background: rgba(7,22,32,.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.92);
    transition: opacity var(--dur-4) var(--ease-out);
}
.wipe-caption--a { left: var(--sp-4); opacity: calc(1 - var(--stage-progress, 0)); }
.wipe-caption--b { right: var(--sp-4); opacity: var(--stage-progress, 0); }

/* --------------------------------------------------------------------------
   32. PARALLAX + PROGRESS RAIL
   -------------------------------------------------------------------------- */
[data-parallax] { overflow: hidden; }
[data-parallax] > img {
    transform: translate3d(0, calc(var(--parallax, 0) * var(--parallax-amt, 20px)), 0) scale(1.09);
    will-change: transform;
}

.progress-rail {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 1050;
    pointer-events: none;
}
.progress-rail::after {
    content: "";
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--se-teal), var(--se-cyan));
    transform: scaleX(var(--page-progress, 0));
    transform-origin: left;
}

/* --------------------------------------------------------------------------
   33. REVEAL VARIANTS
   -------------------------------------------------------------------------- */
/* A headline wiping up from behind its own baseline. Negative bottom inset so
   descenders are never clipped. */
[data-reveal="rise"] {
    opacity: 1;
    transform: translate3d(0, 16px, 0);
    clip-path: inset(0 0 100% 0);
    transition:
        clip-path 950ms var(--ease-out),
        transform 950ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="rise"].is-in {
    transform: none;
    clip-path: inset(0 0 -14% 0);
}

/* Used sparingly: content resolving into focus reads as arriving rather than
   sliding. Blur is expensive, so this is for one grid per page at most. */
[data-reveal="focus"] {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(.985);
    filter: blur(7px);
    transition:
        opacity var(--dur-reveal) var(--ease-out),
        transform var(--dur-reveal) var(--ease-out),
        filter var(--dur-reveal) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="focus"].is-in { opacity: 1; transform: none; filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
    [data-reveal="rise"] { clip-path: none !important; transform: none !important; }
    [data-reveal="focus"] { filter: none !important; }
    [data-parallax] > img { transform: none !important; }
    .stage-sticky { position: static; min-height: 0; padding-block: var(--section-y); }
    .scroll-stage { min-height: 0; }
    .stage-beat { opacity: 1; }
    .wipe-top { --wipe-at: 50%; }
    .device-scrub { display: none; }
    .progress-rail { display: none; }
}