:root {
    /* ---- Colors (from tokens-4.json) ---- */
    --color-polar-white: #f5f5f7;
    --color-absolute-black: #000000;
    --color-carbon: #111111;
    --color-white: #ffffff;
    --color-graphite: #1d1d1f;
    --color-steel: #86868b;
    --color-divider-gray: #6e6e73;
    --color-control-charcoal: #333336;
    --color-glyph-silver: #cccccc;
    --color-battery-green: #00d959;
    --color-link-blue: #0066cc;
    --color-purchase-blue: #0071e3;
    --color-gina-green: #06816f;
    --color-gina-green-hi: #079684;
    /* lighter tint of the brand green, for link text on the charcoal cards */
    --color-gina-green-tint: #1fb89f;
    --color-launch-orange: #ff791b;
    --color-new-orange: #b64400;
    --color-ember-black: #311400;

    /* ---- Surfaces ---- */
    --surface-carbon-canvas: #111111;
    --surface-black-media-stage: #000000;
    --surface-control-charcoal: #333336;
    --surface-white-retail-tile: #ffffff;
    --color-polar-footer-band: #f5f5f7;

    /* ---- Type families ---- */
    --font-display: 'Manrope', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-text: 'Manrope', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --font-weight-regular: 400;
    --font-weight-semibold: 600;

    /* ---- Spacing ---- */
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-10: 10px;
    --spacing-12: 12px;
    --spacing-14: 14px;
    --spacing-16: 16px;
    --spacing-18: 18px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-28: 28px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-48: 48px;
    --spacing-90: 90px;
    --spacing-144: 144px;
    --spacing-210: 210px;

    /* ---- Radii ---- */
    --radius-badges: 5px;
    --radius-links: 10px;
    --radius-cards: 28px;
    --radius-mediatiles: 28px;
    --radius-selectorchips: 36px;
    --radius-buttons: 980px;
    --radius-pills: 9999px;

    /* ---- Derived layout ---- */
    --gutter: clamp(22px, 4vw, 48px);
    --measure: min(100%, 720px);
    --media-max: 1680px;
    --text-max: 1020px;
    --bay: clamp(96px, 11vw, 200px);

    --ease-out: cubic-bezier(.22, .61, .36, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth
}

section[id] {
    scroll-margin-top: 84px
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }
}

body {
    margin: 0;
    background: var(--color-absolute-black);
    color: var(--color-polar-white);
    font-family: var(--font-text);
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.022em;
    font-weight: var(--font-weight-regular);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* The continuously interpolated page ground. Sections sit on it transparently,
   so black -> carbon reads as a fade, never a seam. */
#bgfield {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: var(--color-absolute-black);
    will-change: background-color;
}

#bgglow {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(120% 60% at 50% 0%, rgba(0, 113, 227, .10), transparent 70%);
    transition: opacity .9s var(--ease-soft);
}

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

[hidden] {
    display: none !important
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer
}

:focus-visible {
    outline: 2px solid var(--color-gina-green-hi);
    outline-offset: 3px;
    border-radius: 4px
}

/* ============================ TYPE ============================ */
.t-micro {
    font-family: var(--font-text);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-steel);
}

.t-eyebrow {
    font-family: var(--font-display);
    font-size: clamp(17px, 1.5vw, 19px);
    font-weight: 600;
    line-height: 1.21;
    letter-spacing: .012em;
}

.t-hero {
    font-family: var(--font-display);
    font-size: clamp(30px, 6.2vw, 78px);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.009em;
    text-transform: uppercase;
    text-wrap: balance;
    margin: 0;
}

.t-section {
    font-family: var(--font-display);
    font-size: clamp(30px, 4.6vw, 58px);
    font-weight: 600;
    line-height: 1.07;
    letter-spacing: -0.005em;
    text-wrap: balance;
    margin: 0;
}

.t-statement {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.4vw, 44px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.003em;
    text-wrap: balance;
    margin: 0;
}

.t-sub {
    font-family: var(--font-display);
    font-size: clamp(21px, 2.2vw, 28px);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: .007em;
    text-wrap: balance;
    margin: 0;
}

.t-body {
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.022em;
    margin: 0
}

.t-body-lg {
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.45;
    letter-spacing: -0.019em;
    margin: 0
}

.t-metric {
    font-family: var(--font-display);
    font-size: clamp(40px, 5.6vw, 76px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.003em;
    font-variant-numeric: tabular-nums;
}

.muted {
    color: var(--color-steel)
}

.green {
    color: var(--color-battery-green)
}

/* ============================ SHELL ============================ */
.wrap {
    width: 100%;
    max-width: var(--media-max);
    margin-inline: auto;
    padding-inline: var(--gutter)
}

.wrap-text {
    width: 100%;
    max-width: var(--text-max);
    margin-inline: auto;
    padding-inline: var(--gutter)
}

.bay {
    padding-block: var(--bay)
}

.stack {
    display: flex;
    flex-direction: column
}

/* ============================ GLOBAL NAV ============================ */
/* ============================ NAV ============================ */
.nav {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 60;
    background: rgba(0, 0, 0, .52);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid transparent;
    transition: background-color .3s var(--ease-soft), border-color .3s var(--ease-soft);
}

.nav.is-stuck {
    background: rgba(0, 0, 0, .74);
    border-bottom-color: rgba(245, 245, 247, .10)
}

.nav-in {
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.6vw, 40px);
    max-width: var(--media-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 0 0 auto
}

.nav-home {
    display: block;
    flex: 0 0 auto
}

.nav-logo {
    height: 27px;
    width: auto;
    display: block;
    flex: 0 0 auto
}

.nav-logo-esa {
    height: 24px
}

.nav-logo-gisat {
    height: 22px
}

.nav-sep {
    width: 1px;
    height: 22px;
    background: rgba(245, 245, 247, .22);
    flex: 0 0 auto
}

.nav-project {
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: -0.018em;
    font-weight: 500;
    color: rgba(245, 245, 247, .9);
    white-space: nowrap;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.9vw, 30px);
    margin-left: auto
}

.nav-links a {
    position: relative;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -0.014em;
    color: rgba(245, 245, 247, .66);
    white-space: nowrap;
    padding-block: 22px;
    transition: color .2s var(--ease-soft);
}

.nav-links a:hover {
    color: var(--color-polar-white)
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15px;
    height: 1px;
    background: var(--color-polar-white);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .32s var(--ease-out);
}

.nav-links a.is-active {
    color: var(--color-polar-white)
}

.nav-links a.is-active::after {
    transform: scaleX(1)
}

.nav-cta {
    flex: 0 0 auto;
    background: var(--color-gina-green);
    color: var(--color-white);
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -0.014em;
    transition: background-color .2s var(--ease-soft);
}

.nav-cta:hover {
    background: var(--color-gina-green-hi)
}

@media (max-width:1180px) {
    .nav-links {
        display: none
    }

    .nav-cta {
        margin-left: auto
    }
}

@media (max-width:760px) {

    .nav-sep,
    .nav-project {
        display: none
    }
}

@media (max-width:420px) {
    .nav-brand {
        gap: 10px
    }

    .nav-logo {
        height: 21px
    }

    .nav-logo-esa {
        height: 19px
    }

    .nav-logo-gisat {
        height: 17px
    }

    .nav-cta {
        padding: 8px 14px
    }
}

/* ============================ HERO ============================ */
/* Full-bleed 16:9 stage. Height follows the viewport but is capped by the
   frame's own aspect so the image is never cropped past recognition. */
.hero {
    position: relative;
    text-align: center
}

.hero-stage {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 560px;
    max-height: calc(100vw * 9 / 16);
    overflow: hidden;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: start;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    will-change: transform, opacity
}

.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .6) 30%, rgba(0, 0, 0, .4) 52%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .88) 94%, rgba(0, 0, 0, 1) 100%);
}

.hero-copy {
    position: relative;
    z-index: 2;
    padding-block: clamp(44px, 11vh, 132px) 0
}

@media (max-width:760px) {
    .hero-stage {
        height: auto;
        max-height: none;
        min-height: 0;
        display: block;
        padding-bottom: clamp(180px, 52vw, 320px)
    }

    .hero-bg {
        inset: auto 0 0 0;
        height: clamp(240px, 68vw, 420px)
    }

    .hero-bg::after {
        background: linear-gradient(to bottom, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .85) 100%)
    }
}

.hero-lockup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: var(--spacing-20)
}

.hero-lockup .t-eyebrow {
    color: var(--color-polar-white)
}

.hero-lockup .x {
    color: var(--color-steel);
    font-size: 16px;
    font-weight: 400
}

.badge {
    display: inline-block;
    background: var(--color-ember-black);
    color: var(--color-launch-orange);
    font-size: 12px;
    line-height: 1.33;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: var(--radius-badges);
    padding: 4px 10px;
    margin-bottom: var(--spacing-24);
}

.hero-sub {
    max-width: 62ch;
    margin: 0 auto var(--spacing-8);
    color: var(--color-polar-white)
}

.hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-12);
    padding-block: clamp(20px, 3vw, 40px) 0
}

.btn-primary {
    display: inline-block;
    background: var(--color-gina-green);
    color: var(--color-white);
    border-radius: var(--radius-buttons);
    padding: 12px 22px;
    font-size: 17px;
    line-height: 1.24;
    letter-spacing: -0.022em;
    transition: background-color .2s var(--ease-soft), transform .2s var(--ease-out);
}

.btn-primary:hover {
    background: var(--color-gina-green-hi);
    transform: translateY(-1px)
}

/* Secondary action inside a content section, so it does not compete with Contact us.
   Type matches the paragraph above it. */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--spacing-20);
    border: 1px solid rgba(245, 245, 247, .26);
    border-radius: 999px;
    padding: 13px 24px;
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.24;
    letter-spacing: -0.019em;
    color: var(--color-polar-white);
    transition: border-color .2s var(--ease-soft), background-color .2s var(--ease-soft);
}

.btn-ghost .glyph {
    color: var(--color-gina-green-tint);
    transition: transform .25s var(--ease-out)
}

.btn-ghost:hover {
    border-color: var(--color-gina-green-tint);
    background: rgba(31, 184, 159, .10)
}

.btn-ghost:hover .glyph {
    transform: translateX(3px)
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0
}

.signup {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-10);
    margin-top: clamp(28px, 3vw, 44px);
}

.signup-field {
    flex: 1 1 300px;
    max-width: 400px;
    min-width: 0;
    background: var(--color-control-charcoal);
    color: var(--color-polar-white);
    border: 1px solid rgba(245, 245, 247, .16);
    border-radius: 999px;
    padding: 13px 22px;
    font: 17px/1.24 var(--font-text);
    letter-spacing: -0.022em;
    transition: border-color .2s var(--ease-soft), background-color .2s var(--ease-soft);
}

.signup-field::placeholder {
    color: rgba(245, 245, 247, .42)
}

.signup-field:focus {
    outline: none;
    border-color: rgba(245, 245, 247, .5);
    background: #3f3f44
}

.signup-field[aria-invalid="true"] {
    border-color: var(--color-launch-orange)
}

.signup-note {
    flex: 1 0 100%;
    margin: var(--spacing-8) 0 0;
    font-size: 14px;
    line-height: 1.43;
    letter-spacing: -0.016em;
    color: var(--color-steel);
}

/* Over the hero image the idle hint is unreadable, so it only appears once it
   has a result to report. Space is reserved either way, so nothing jumps. */
.hero .signup-note {
    opacity: 0;
    transition: opacity .2s var(--ease-soft)
}

.hero .signup-note.is-error,
.hero .signup-note.is-done {
    opacity: 1
}

.signup-note.is-error {
    color: var(--color-launch-orange)
}

.signup-note.is-done {
    color: var(--color-battery-green)
}

.hero-price {
    font-size: 14px;
    line-height: 1.29;
    letter-spacing: -0.016em;
    font-weight: 600
}

.hero-fine {
    font-size: 14px;
    line-height: 1.29;
    letter-spacing: -0.016em;
    color: var(--color-steel);
    max-width: 560px
}

/* ============================ HIGHLIGHT CHIPS ============================ */
.chips {
    display: flex;
    gap: var(--spacing-10);
    overflow-x: auto;
    padding-block: var(--spacing-8) var(--spacing-20);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter)*-1);
    padding-inline: var(--gutter);
}

.chips::-webkit-scrollbar {
    display: none
}

.chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    background: rgba(66, 66, 69, .72);
    color: rgba(255, 255, 255, .8);
    border-radius: var(--radius-selectorchips);
    padding: 8px 16px;
    font-size: 14px;
    line-height: 1.29;
    letter-spacing: -0.016em;
    white-space: nowrap;
    transition: background-color .25s var(--ease-soft), color .25s var(--ease-soft);
}

.chip:hover {
    background: rgba(92, 92, 96, .8);
    color: #fff
}

/* ============================ STATEMENT BAY ============================ */
.statement-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-24)
}

@media (max-width:860px) {
    .statement-grid {
        grid-template-columns: 1fr
    }
}

.statement-grid p {
    max-width: 34ch
}

.statement-grid .t-statement {
    max-width: 32ch
}

.statement-grid .t-statement+.t-body {
    margin-top: var(--spacing-16);
    color: var(--color-steel)
}

/* ============================ MEDIA TILES ============================ */
.tile {
    position: relative;
    border-radius: var(--radius-mediatiles);
    overflow: hidden;
    background: var(--color-absolute-black);
}

.tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform
}

.tile-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(24px, 4vw, 56px);
    background: linear-gradient(to top, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .45) 45%, transparent 100%);
}

.tile-overlay .t-body {
    max-width: 46ch;
    margin-top: var(--spacing-14);
    color: var(--color-polar-white)
}

.ratio-wide {
    aspect-ratio: 16/9
}

/* ---- smart cad: the mockup needs room, so it takes the larger column ---- */
.scad {
    display: grid;
    grid-template-columns: 1.18fr .82fr;
    gap: clamp(24px, 3.5vw, 64px);
    align-items: center
}

/* Cropped to the device; the surrounding black is dropped by the blend so no box
   edge shows against the page. */
.scad-media {
    position: relative;
    min-width: 0;
    width: 100%;
    aspect-ratio: 1.29;
    overflow: hidden
}

.scad-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    display: block;
    mix-blend-mode: screen
}

@media (max-width:900px) {
    .scad {
        grid-template-columns: 1fr;
        gap: clamp(20px, 4vw, 36px)
    }

    .scad-media {
        order: -1
    }
}

/* last mile uses the same component as smart cad, with its own crop */
.scad-media.is-lm {
    aspect-ratio: 1.46
}

.scad-media.is-lm img {
    object-position: 45% center
}

/* ============================ PINNED SEQUENCE ============================ */
.seq-track {
    position: relative
}

.seq-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 520px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.seq-media {
    position: absolute;
    inset: 0
}

.seq-frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .6s var(--ease-soft);
}

.seq-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .52
}

.seq-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .25) 40%, rgba(0, 0, 0, .88) 100%);
}

.seq-frame.is-on {
    opacity: 1
}

.seq-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--text-max);
    padding-inline: var(--gutter);
    margin-inline: auto
}

.seq-step {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s var(--ease-soft), transform .5s var(--ease-out);
    grid-area: 1/1;
}

.seq-steps {
    display: grid
}

.seq-step.is-on {
    opacity: 1;
    transform: none
}

.seq-step h2 {
    max-width: 17ch
}

.seq-step .t-body-lg {
    margin-top: var(--spacing-20);
    max-width: 44ch;
    color: var(--color-polar-white)
}

.seq-num {
    font-family: var(--font-text);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-steel);
    display: block;
    margin-bottom: var(--spacing-16);
}

.seq-rail {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: clamp(28px, 5vw, 56px);
    height: 1px;
    background: rgba(245, 245, 247, .10);
    z-index: 3;
}

.seq-rail i {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: rgba(245, 245, 247, .42);
    display: block;
}

.seq-ticks {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: clamp(40px, 5.6vw, 70px);
    display: flex;
    justify-content: space-between;
    z-index: 3;
}

.seq-ticks span {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-steel);
    transition: color .4s var(--ease-soft);
}

.seq-ticks span.is-on {
    color: var(--color-polar-white)
}

/* Small screens: no pinning, read it as a normal stack. */
@media (max-width:760px) {
    .seq-track {
        height: auto !important
    }

    .seq-stage {
        position: static;
        height: auto;
        min-height: 0;
        display: block
    }

    .seq-media {
        display: none
    }

    .seq-steps {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-48)
    }

    .seq-step {
        opacity: 1;
        transform: none;
        grid-area: auto
    }

    .seq-rail,
    .seq-ticks {
        display: none
    }
}

/* ============================ CLOSE LOOK ============================ */
.look {
    display: grid;
    grid-template-columns: minmax(260px, 360px) 1fr;
    gap: clamp(24px, 4vw, 64px);
    align-items: center
}

@media (max-width:940px) {
    .look {
        grid-template-columns: 1fr
    }
}

.crsl {
    position: relative
}

.crsl-track {
    display: flex;
    gap: var(--spacing-10);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    scroll-behavior: smooth;
    margin-inline: calc(var(--gutter)*-1);
    padding-inline: var(--gutter);
    padding-block: 4px;
    scroll-padding-inline: var(--gutter);
}

.crsl-track::-webkit-scrollbar {
    display: none
}

.crsl-card {
    flex: 0 0 clamp(250px, 27vw, 360px);
    scroll-snap-align: start
}

/* Centre the row when the cards fit; "safe" falls back to flex-start when they
   overflow, so the first card is never scrolled out of reach. */
#products .crsl-track {
    justify-content: safe center
}

/* The track is a scroll container, so it clips vertically. This gives the prime
   card's glow room to bloom instead of being cut off top and bottom. */
#partners .crsl-track {
    padding-block: 38px;
    margin-block: -30px
}

/* Grow to share the row so all four always fit on a desktop; below 228px each
   they stop shrinking and the row goes back to being a scroller. */
#products .crsl-card {
    flex: 1 1 200px;
    min-width: 200px;
    max-width: 320px
}

.crsl-media {
    border-radius: var(--radius-mediatiles);
    overflow: hidden;
    background: #000;
    aspect-ratio: 4/3
}

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

.crsl-cap {
    margin-top: var(--spacing-12);
    font-size: 14px;
    line-height: 1.43;
    letter-spacing: -0.016em;
    color: var(--color-steel);
}

.crsl-cap b {
    color: var(--color-polar-white);
    font-weight: 600
}

.crsl-nav {
    display: flex;
    justify-content: center;
    gap: var(--spacing-8);
    margin-top: clamp(28px, 3.4vw, 48px)
}

.crsl-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-control-charcoal);
    color: rgba(255, 255, 255, .85);
    display: grid;
    place-items: center;
    font-size: 16px;
    line-height: 1;
    transition: background-color .2s var(--ease-soft), opacity .2s var(--ease-soft);
}

.crsl-btn:hover:not([disabled]) {
    background: #3f3f44;
    color: #fff
}

.crsl-btn[disabled] {
    opacity: .32;
    cursor: default
}

/* ============================ METRICS ============================ */
.metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 48px);
}

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

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

.metric .t-metric {
    display: block
}

.metric .lbl {
    display: block;
    margin-top: var(--spacing-12);
    color: var(--color-polar-white);
    font-size: 17px;
    line-height: 1.24;
    letter-spacing: -0.022em;
    font-weight: 600
}

.metric .sub {
    display: block;
    margin-top: 6px;
    color: var(--color-steel);
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: -0.016em
}

.metric .unit {
    font-size: .44em;
    letter-spacing: -0.01em;
    margin-left: .12em
}

/* ============================ TIMELINE ============================ */
.tl {
    position: relative;
    margin-top: clamp(40px, 5vw, 72px)
}

.tl-line {
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgba(245, 245, 247, .16)
}

.tl-line i {
    position: absolute;
    inset: 0 0 auto 0;
    height: 0%;
    background: var(--color-polar-white);
    display: block
}

.tl-item {
    position: relative;
    padding-left: 40px;
    padding-bottom: clamp(32px, 4vw, 56px)
}

.tl-item:last-child {
    padding-bottom: 0
}

.tl-dot {
    position: absolute;
    left: 0;
    top: 5px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--color-carbon);
    border: 1px solid var(--color-divider-gray);
    transition: background-color .4s var(--ease-soft), border-color .4s var(--ease-soft), transform .4s var(--ease-out);
}

.tl-item.is-on .tl-dot {
    background: var(--color-polar-white);
    border-color: var(--color-polar-white);
    transform: scale(1.15)
}

.tl-when {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-steel)
}

.tl-item.is-on .tl-when {
    color: var(--color-battery-green)
}

.tl-what {
    margin-top: 8px;
    font-size: clamp(19px, 2vw, 26px);
    line-height: 1.2;
    letter-spacing: -0.015em;
    font-weight: 600
}

.tl-note {
    margin-top: 8px;
    color: var(--color-steel);
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.022em;
    max-width: 52ch
}

/* ============================ WHITE TILES ============================ */
.card {
    background: var(--color-control-charcoal);
    color: var(--color-polar-white);
    border-radius: var(--radius-cards);
    padding: clamp(24px, 2.6vw, 36px);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    transition: transform .4s var(--ease-out);
}

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

/* the prime contractor's card carries a slow brand-green glow */
.card.is-prime {
    box-shadow: 0 0 0 1px rgba(31, 184, 159, .28), 0 0 38px -9px rgba(31, 184, 159, .38);
}

.card .role {
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.022em;
    font-weight: 400;
    text-transform: none;
    color: var(--color-steel)
}

.card .name {
    font-family: var(--font-display);
    font-size: clamp(21px, 2vw, 28px);
    line-height: 1.14;
    letter-spacing: .007em;
    font-weight: 600
}

.card .desc {
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.022em;
    color: rgba(245, 245, 247, .72);
    flex: 1
}

.card .ref {
    color: var(--color-gina-green-tint);
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.022em
}

.card .ref:hover {
    text-decoration: underline
}

/* ============================ FOOTER ============================ */
.footer {
    background: var(--color-absolute-black);
    color: var(--color-polar-white);
    position: relative;
    z-index: 1
}

.footer-in {
    max-width: var(--media-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-block: clamp(40px, 5vw, 64px)
}

.footer-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(20px, 2.4vw, 40px);
    padding-block: var(--spacing-24);
    border-bottom: 1px solid rgba(245, 245, 247, .12);
}

.footer-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: clamp(22px, 2.4vw, 40px);
    padding-block: var(--spacing-32);
    align-items: start;
}

.footer h3 {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.33;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
    color: var(--color-polar-white)
}

.footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.footer li,
.footer p {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: rgba(245, 245, 247, .62);
    margin: 0
}

.footer a.lnk {
    color: var(--color-glyph-silver)
}

.footer a.lnk:hover {
    color: var(--color-polar-white);
    text-decoration: underline
}

.footer-funding {
    border-top: 1px solid rgba(245, 245, 247, .12);
    padding-block: var(--spacing-24)
}

.footer-funding h3 {
    margin-bottom: 6px
}

.footer-base {
    border-top: 1px solid rgba(245, 245, 247, .12);
    padding-block: var(--spacing-16);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center
}

.footer-base p {
    color: var(--color-steel)
}

/* ============================ REVEAL ============================ */
/* Nothing is hidden by default: JS only arms elements that start below the
   fold, so the page at rest (and without JS) is fully legible. */
.rv-armed {
    opacity: 0;
    transform: translateY(24px)
}

.rv-in {
    opacity: 1;
    transform: none;
    transition: opacity .7s var(--ease-soft), transform .7s var(--ease-out);
}

.rv-armed[data-rv-delay="1"] {
    transition-delay: .08s
}

.rv-armed[data-rv-delay="2"] {
    transition-delay: .16s
}

.rv-armed[data-rv-delay="3"] {
    transition-delay: .24s
}

.rv-armed[data-rv-delay="4"] {
    transition-delay: .32s
}

.hero-line {
    display: block;
    overflow: hidden
}

.hero-line>span {
    display: block;
    animation: heroRise .95s var(--ease-out) backwards
}

.hero-line:nth-child(2)>span {
    animation-delay: .09s
}

@keyframes heroRise {
    from {
        transform: translateY(105%)
    }

    to {
        transform: none
    }
}

.fade-up {
    animation: fadeUp .8s var(--ease-out) .35s backwards
}

.fade-up.d2 {
    animation-delay: .48s
}

.fade-up.d3 {
    animation-delay: .6s
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media (prefers-reduced-motion:reduce) {
    .rv-armed {
        opacity: 1 !important;
        transform: none !important
    }

    .hero-line>span {
        transform: none;
        animation: none
    }

    .fade-up {
        opacity: 1;
        animation: none
    }

    .seq-frame,
    .seq-step {
        transition-duration: .01ms
    }

    .card:hover,
    .btn-primary:hover {
        transform: none
    }

    * {
        scroll-behavior: auto !important
    }
}