/* ============================================
   KELA — Design System
   ============================================ */

:root {
    --black: #000000;
    --gray-950: #060608;
    --gray-900: #0c0c10;
    --gray-850: #111117;
    --gray-800: #18181f;
    --gray-700: #222230;
    --gray-600: #333345;
    --gray-500: #555568;
    --gray-400: #777790;
    --gray-300: #9999aa;
    --gray-200: #bbbbcc;
    --white: #ffffff;

    --accent: #00d4aa;
    --accent-bright: #00f0c0;
    --accent-dim: #009977;
    --accent-glow: rgba(0, 212, 170, 0.15);
    --accent-glow-strong: rgba(0, 212, 170, 0.3);
    --red-accent: #c8553d;
    --highlight: #d6ccc2;

    --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* === Pixelik-inspired redesign tokens === */
    --bg-deep: #050505;
    --bg-soft: #0a0a0a;
    --fg-primary: #f2f2f2;
    --fg-muted: rgba(242,242,242,0.6);
    --fg-faint: rgba(242,242,242,0.35);
    --hairline: rgba(242,242,242,0.08);
    --motion-ease: cubic-bezier(0.65, 0, 0.35, 1);
    --motion-ease-out: cubic-bezier(0.19, 1, 0.22, 1);
}


/* ===== Reset ===== */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Picture wraps don't introduce flow side effects: pass layout through to
   their <img> child so existing img-targeted rules keep working. */
picture {
    display: contents;
}

/* ===== Responsive utilities =====
   The mobile-refinements pass introduces parallel mobile-only HTML blocks
   for sections whose desktop UX (sticky scroll, horizontal track, sticky
   2-col accordions) doesn't translate to touch. Switching is done with
   these two classes ONLY -- desktop selectors are never touched.

   Breakpoint: 768px (industry standard; matches existing fallback CSS in
   .s-rd, .mugen-nav, .kela-footer, etc.). */
:root { --bp-mobile: 768px; }

.is-mobile-only { display: none !important; }

@media (max-width: 768px) {
    .is-mobile-only { display: revert !important; }
    .is-desktop-only { display: none !important; }

    /* Mobile design system tokens. Inspired by anduril.com -- light-weight
       display headlines, tight-tracking mono eyebrows, generous section
       breathing. Used consistently across all mobile sections so the page
       reads as one design system. */
    :root {
        --section-pad-mobile: clamp(4rem, 12vw, 6.5rem);
        --section-side-mobile: clamp(1.25rem, 5vw, 1.75rem);
        --display-1-mobile: clamp(2.5rem, 10vw, 3.5rem);
        --display-2-mobile: clamp(1.5rem, 6vw, 1.875rem);
        --mono-eyebrow-mobile: 0.7rem;

        /* shift5.io-inspired tokens for the v2 mobile redesign. Technical /
           operational language: mono indices, big condensed headlines,
           stacked explore-cards, faint data-readout texture. Kela palette
           retained (no shift5 colors imported). */
        --m-pad: clamp(3.5rem, 11vw, 5.5rem);     /* section vertical rhythm */
        --m-side: clamp(1.25rem, 5vw, 1.75rem);   /* section horizontal pad  */
        --m-display: clamp(2.4rem, 11vw, 3.6rem); /* big condensed headline  */
        --m-display-sm: clamp(1.6rem, 6.5vw, 2.1rem);
        --m-mono: 0.7rem;                          /* uppercase mono eyebrow */
        --m-hair: rgba(255, 255, 255, 0.14);       /* hairline on dark  */
        --m-hair-dark: rgba(12, 12, 12, 0.14);     /* hairline on light */
        /* shift5's signature accent (reverse-engineered from their CSS:
           #ff5841, used on technical/operational UI). Applied sparingly to
           the mono indices + explore arrows so mobile reads unmistakably
           "operational" without overriding Kela's neutral base. One token,
           fully reversible. */
        --m-accent: #ff5841;
    }
}

/* ===== shift5-style shared mobile helpers =====
   Defined once, reused across every .s-*-mobile block. All scoped to the
   mobile breakpoint so they never affect desktop. */
@media (max-width: 768px) {
    /* Small uppercase monospace eyebrow with wide tracking. */
    .m-eyebrow {
        font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
        font-size: var(--m-mono);
        letter-spacing: 0.22em;
        text-transform: uppercase;
        margin: 0;
        opacity: 0.6;
    }
    /* Numbered index prefix, e.g. "01" -- shift5 coral accent. */
    .m-index {
        font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
        font-size: var(--m-mono);
        letter-spacing: 0.1em;
        color: var(--m-accent);
    }
    /* "Explore" affordance with a trailing arrow. */
    .m-explore {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        text-decoration: none;
        color: inherit;
        opacity: 0.85;
        transition: opacity 0.2s ease, gap 0.2s ease;
    }
    .m-explore::after {
        content: '\2192'; /* → */
        color: var(--m-accent);
        transition: transform 0.2s ease;
    }
    .m-explore:active { opacity: 0.55; }
    .m-explore:active::after { transform: translateX(3px); }
    /* Faint monospace data-readout strip (shift5's 00000000 motif). */
    .m-readout {
        font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
        font-size: 0.6rem;
        letter-spacing: 0.25em;
        opacity: 0.22;
        white-space: nowrap;
        overflow: hidden;
        user-select: none;
        margin: 0;
    }
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    color-scheme: dark;
    scrollbar-width: none;
    /* IMPORTANT: do NOT set overflow-x here. overflow-x: hidden forces
       overflow-y to compute to `auto`, turning <html> into an explicit
       scroll container -- which changes the page's scroll model and broke
       the position: sticky scroll sections. The original (working) site
       clipped horizontal overflow on <body> only; we keep it that way.
       overscroll-behavior + background are cosmetic (iOS rubber-band band
       fix) and do NOT affect the scroll/sticky model, so they stay. */
    overscroll-behavior: none;
    background: #cdc4b3;
}

::-webkit-scrollbar {
    display: none;
}

.custom-scrollbar {
    position: fixed;
    top: 0;
    right: 0;
    width: 5px;
    height: 100vh;
    z-index: 9999;
    pointer-events: none;
}

.custom-scrollbar__thumb {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.2s ease, width 0.2s ease;
    pointer-events: auto;
    cursor: pointer;
}

.custom-scrollbar:hover .custom-scrollbar__thumb,
.custom-scrollbar__thumb:active {
    background: rgba(255, 255, 255, 0.4);
    width: 7px;
}

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--white);
    /* Match html bg cream so iOS rubber-band / Chrome iOS URL-bar tint /
       WhatsApp in-app overscroll all show cream instead of dark. All
       sections set their own explicit bg, so cream here is only visible
       in the gap between page content and browser chrome -- exactly what
       we want to match against the dark video hero at the top of the page.
       The loader covers everything during its 3s animation via its own
       .kela-loader__bg (#0a0a0a) so the dark loader visual is preserved. */
    background: #0a0a0a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overscroll-behavior: none;
    width: 100%;
    max-width: 100%;
}

/* NOTE: do NOT put overflow-x: clip/hidden on <main> -- it's an
   intermediate (non-scrolling) ancestor of the position: sticky scroll
   sections (products tab rail, grid-reveal, hardware, partners pin), and
   overflow clip/hidden on such an ancestor breaks sticky positioning.
   Horizontal overflow is already clipped at the html + body level, which
   are the document scroll container and therefore safe for sticky. */

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea {
    font-family: inherit;
    font-size: inherit;
    border: none;
    outline: none;
    background: none;
    color: inherit;
}
button { cursor: pointer; }
h1, h2, h3, h4 { line-height: 1.1; text-wrap: balance; letter-spacing: -0.04em; }
body { letter-spacing: -0.011em; }

/* === Pixelik-inspired utilities (use in redesigned sections) === */
.eyebrow-mono { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); display: inline-block; }
.hairline-top { border-top: 1px solid var(--hairline); }
.hairline-bottom { border-bottom: 1px solid var(--hairline); }
.section-hairline { width: 100%; height: 1px; background: var(--hairline); }
.section-pad { padding: clamp(5rem, 10vh, 9rem) clamp(1.5rem, 4vw, 3rem); }
.container-1200 { max-width: 1200px; margin: 0 auto; }
.container-1400 { max-width: 1400px; margin: 0 auto; }

::selection {
    background: var(--highlight);
    color: var(--bg-deep);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}


/* ===== Layout ===== */

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

.container-narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
}

.section-pad {
    padding: clamp(5rem, 12vw, 10rem) 0;
}

.section-header {
    text-align: center;
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.section-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
}

.section-headline {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 1.25rem;
}

.section-sub {
    font-size: clamp(1rem, 2vw, 1.125rem);
    color: var(--gray-400);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}


/* ===== Mugen-Style Navigation ===== */

.mugen-nav {
    --nav-ease: cubic-bezier(0.625, 0.05, 0, 1);
    --nav-duration: 0.6s;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    pointer-events: none;
}

/* --- Top Bar --- */

.mugen-nav__bar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(1.25rem, 3vw, 2.5rem);
    height: 3.5em;
    background: transparent;
    position: relative;
    z-index: 2;
}

.mugen-nav__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    opacity: 0.85;
    color: var(--white);
    transition: opacity 0.3s ease, color 0.45s ease;
}

.mugen-nav__logo:hover {
    opacity: 1;
}

.mugen-nav__logo-svg {
    height: 26px;
    width: 26px;
    display: block;
    color: inherit;
    transition: color 0.45s ease;
}

/* Logo color follows the section background underneath the navbar. */
.mugen-nav[data-nav-theme="light"] .mugen-nav__logo {
    color: #0a0a0a;
}

.mugen-nav[data-nav-theme="dark"] .mugen-nav__logo {
    color: var(--white);
}

/* While the slide-out menu is open the bar sits above a dark overlay, so
   keep the logo light regardless of the section we paused on. */
.mugen-nav[data-nav-status="active"] .mugen-nav__logo {
    color: var(--white);
}

.mugen-nav__toggle {
    display: flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.4em 0;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

.mugen-nav__toggle:hover {
    color: var(--white);
}

/* Toggle color follows the section background underneath the navbar,
   mirroring the logo's data-nav-theme cascade. Text and icon lines both
   inherit via currentColor, so a single color rule is enough. */
.mugen-nav[data-nav-theme="light"] .mugen-nav__toggle {
    color: rgba(10, 10, 10, 0.7);
}

.mugen-nav[data-nav-theme="light"] .mugen-nav__toggle:hover {
    color: #0a0a0a;
}

.mugen-nav[data-nav-theme="dark"] .mugen-nav__toggle {
    color: rgba(255, 255, 255, 0.7);
}

.mugen-nav[data-nav-theme="dark"] .mugen-nav__toggle:hover {
    color: var(--white);
}

/* While the slide-out menu is open the bar sits above a dark overlay, so
   keep the toggle light regardless of the section we paused on. */
.mugen-nav[data-nav-status="active"] .mugen-nav__toggle {
    color: rgba(255, 255, 255, 0.7);
}

.mugen-nav[data-nav-status="active"] .mugen-nav__toggle:hover {
    color: var(--white);
}

.mugen-nav__toggle-text {
    position: relative;
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 450;
    letter-spacing: -0.01em;
    overflow: hidden;
    height: 1.3em;
    line-height: 1.3;
}

.mugen-nav__toggle-label {
    display: block;
    white-space: nowrap;
}

.mugen-nav__toggle-label--close {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(100%);
    opacity: 0;
}

.mugen-nav__toggle-icon {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mugen-nav__toggle:hover .mugen-nav__toggle-icon {
    transform: rotate(90deg);
}

.mugen-nav__toggle-line {
    position: absolute;
    background: currentColor;
    border-radius: 1px;
    top: 50%;
    left: 50%;
}

.mugen-nav__toggle-line--h {
    width: 12px;
    height: 1.5px;
    transform: translate(-50%, -50%);
}

.mugen-nav__toggle-line--v {
    width: 1.5px;
    height: 12px;
    transform: translate(-50%, -50%);
}

/* --- Overlay + Branding --- */

.mugen-nav__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-nav-status="active"] .mugen-nav__overlay {
    visibility: visible;
    pointer-events: auto;
}

.mugen-nav__overlay-brand {
    position: absolute;
    left: clamp(2rem, 6vw, 5rem);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    opacity: 0;
}

.mugen-nav__overlay-logo {
    height: clamp(28px, 4vw, 42px);
    width: auto;
}

.mugen-nav__overlay-tagline {
    font-family: var(--font);
    font-size: clamp(0.8rem, 1.2vw, 0.95rem);
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* --- Side Panel --- */

.mugen-nav__panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100%);
    z-index: 3;
    background: #0a0a0a;
    border-left: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    padding-top: clamp(2.5rem, 4vw, 3.5rem);
    pointer-events: none;
    transform: translateX(100%);
    will-change: transform;
}

[data-nav-status="active"] .mugen-nav__panel {
    pointer-events: auto;
}

.mugen-nav__panel-edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.25), transparent);
    opacity: 0;
    background-size: 1px 200%;
    background-position: 0 -100%;
}

.mugen-nav__panel-close {
    position: absolute;
    top: clamp(0.75rem, 1.5vw, 1.25rem);
    right: clamp(0.75rem, 1.5vw, 1.25rem);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    background: none;
    border: none;
    border-radius: 50%;
    transition: color 0.2s ease;
    z-index: 1;
}

.mugen-nav__panel-close:hover {
    color: var(--white);
}

/* --- Panel Top: Menu Label + Links --- */

.mugen-nav__panel-top {
    display: flex;
    flex-direction: column;
}

.mugen-nav__panel-label {
    display: block;
    font-family: var(--font);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 1em;
}

.mugen-nav__panel-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.mugen-nav__panel-links li a {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-family: var(--font);
    font-size: clamp(1.5rem, 2.5vw, 1.85rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.15;
    padding: 0.3em 0;
    will-change: transform, opacity;
    transition: color 0.3s ease;
}

.mugen-nav__panel-links li a:hover {
    color: var(--white);
}

/* --- Panel Bottom: Contact + Socials --- */

.mugen-nav__panel-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.mugen-nav__panel-contact {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}

.mugen-nav__panel-email {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-family: var(--font);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    transition: color 0.3s ease, border-color 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5em;
    width: fit-content;
}

.mugen-nav__panel-email:hover {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.3);
}

.mugen-nav__panel-email-plus {
    font-weight: 300;
    font-size: 1.1em;
    color: rgba(255, 255, 255, 0.4);
}

.mugen-nav__panel-location {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
}

.mugen-nav__clock {
    color: rgba(255, 255, 255, 0.35);
}

.mugen-nav__panel-socials {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}

.mugen-nav__panel-social-icons {
    display: flex;
    align-items: center;
    gap: 0.75em;
}

.mugen-nav__panel-social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.mugen-nav__panel-social-icons a:hover {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.06);
}

/* --- Panel Footer --- */

.mugen-nav__panel-footer {
    display: flex;
    align-items: center;
    gap: 1.5em;
    padding-top: 1.5em;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 2em;
}

.mugen-nav__panel-footer a {
    font-family: var(--font);
    font-size: 0.7rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.mugen-nav__panel-footer a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.mugen-nav__panel-footer a span {
    font-size: 0.85em;
}

.mugen-nav__panel-copyright {
    font-family: var(--font);
    font-size: 0.7rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.2);
    margin-left: auto;
    white-space: nowrap;
}

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

@media screen and (max-width: 768px) {
    .mugen-nav__panel {
        width: 100%;
    }

    .mugen-nav__overlay-brand {
        display: none;
    }
}


/* ===== Kela logo-reveal loader =====
   Layered fixed overlay with a dark bg, a backdrop-blur layer that ramps up
   at the halfway mark, a thin progress bar, and a centred Kela diamond that
   clip-fills left-to-right over 3 seconds. */
.kela-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    color: #fff;
    pointer-events: none;
    overflow: clip;
}

.kela-loader__bg {
    position: absolute;
    inset: 0;
    background: #0a0a0a;
    will-change: opacity;
}

.kela-loader__blur {
    position: absolute;
    inset: 0;
    opacity: 0;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    will-change: backdrop-filter, opacity;
}

.kela-loader__container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.kela-loader__logo-wrap {
    position: relative;
    width: clamp(40px, 4vw, 56px);
    aspect-ratio: 1;
}
.kela-loader__logo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
/* Base diamond: solid colors set directly in the SVG (#1C1C1C fill,
   #474747 stroke). Full opacity here — the colors themselves carry the
   subtlety. */
.kela-loader__logo.is--base { opacity: 1; }
.kela-loader__logo.is--top { /* sits inside .kela-loader__logo-fill; no clip here */ }

/* Fill mask: a regular DIV with clip-path (GSAP interpolates clip-path on a
   div far more reliably than on an inline <svg>). Starts fully clipped from
   the bottom and is animated to 0% inset so the diamond "fills" upward. */
.kela-loader__logo-fill {
    position: absolute;
    inset: 0;
    clip-path: inset(100% 0% 0% 0%);
    -webkit-clip-path: inset(100% 0% 0% 0%);
    will-change: clip-path;
}

.kela-loader__text-wrap {
    position: absolute;
    bottom: clamp(3rem, 8vh, 5rem);
    height: 1em;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.kela-loader__text {
    position: absolute;
    inset: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .kela-loader { display: none; }
}

/* Mobile: skip the GPU-bound backdrop-filter layer (matches the JS branch
   that drops the blur tweens on mobile). The dark bg fade alone carries
   the transition on phones. Also bump the diamond size + text size so
   the loader reads with proper weight on a small viewport. */
@media (max-width: 768px) {
    .kela-loader__blur { display: none; }
    .kela-loader__logo-wrap {
        width: clamp(56px, 14vw, 72px);
    }
    .kela-loader__text {
        font-size: 0.8rem;
    }
    .kela-loader__text-wrap {
        bottom: clamp(4rem, 12vh, 6rem);
    }

    /* Tap feedback on every primary CTA -- consistent across the site so
       touches feel responsive on iOS/Android (no hover state to fall back
       to). 0.15s opacity dim communicates "I got your tap". */
    .kela-footer__cta,
    .s-join__cta {
        transition: opacity 0.15s ease, background 0.2s ease, transform 0.2s ease;
    }
    .kela-footer__cta:active,
    .s-join__cta:active {
        opacity: 0.75;
    }
}


/* ===== S1 Hero (full-bleed video, Mach-style) =====
   Single full-viewport video panel:
   - .hero__live-badge = mono live badge with pulsing dot, pinned upper-left
   - .hero__headline + .hero__subhead = anchored bottom-left over the video */

.hero {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: var(--bg-deep);
}

/* --- Live badge (small mono type, pulsing dot) ---
   Element+class selector so it also wins over .hero__spec (added on the
   desktop badge purely for the GSAP fade-in hookup). */
p.hero__live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin: 0;
    max-width: none;
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1;
}

.hero__live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3dd68c;
    box-shadow: 0 0 0 0 rgba(61, 214, 140, 0.55);
    animation: heroLivePulse 2s ease-out infinite;
    flex: none;
}

@keyframes heroLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(61, 214, 140, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(61, 214, 140, 0); }
    100% { box-shadow: 0 0 0 0 rgba(61, 214, 140, 0); }
}

/* --- Video panel (full viewport) --- */
.hero__panel {
    position: relative;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Bottom padding clears the pixel-divider strip (2 rows ≈ vw/15) that the
       next section extends up over the hero, so the squares start below the
       headline + subhead instead of covering them. */
    padding: clamp(4.5rem, 9vh, 6.5rem) clamp(1.5rem, 4vw, 3rem) clamp(13rem, 21vh, 16rem);
    background: var(--bg-deep);
    overflow: hidden;
    z-index: 1;
}

.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.5;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(5,5,5,0.5) 0%, rgba(5,5,5,0.15) 35%, rgba(5,5,5,0.6) 100%);
}

.hero__top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 1rem;
    margin-bottom: clamp(2rem, 5vh, 4rem);
}

.hero__top-right {
    text-align: right;
    display: none;
}

@media (min-width: 768px) {
    .hero__top-right { display: inline-block; }
}

/* Top content: mono spec LEFT, lead copy RIGHT, both top-aligned */
.hero__content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: start;
    padding-top: clamp(0.25rem, 1.5vh, 1rem);
}

@media (min-width: 768px) {
    .hero__content {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        gap: clamp(2rem, 6vw, 5rem);
    }
}

.hero__spec {
    margin: 0;
    max-width: 22rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
}

.hero__lead {
    font-family: var(--font);
    font-size: clamp(1.05rem, 1.55vw, 1.5rem);
    font-weight: 400;
    line-height: 1.45;
    color: var(--fg-primary, #fff);
    max-width: 34rem;
    margin: 0;
    letter-spacing: -0.015em;
    justify-self: start;
}

@media (min-width: 768px) {
    .hero__lead { justify-self: end; }
}

/* Bottom-anchored headline */
.hero__headline {
    position: relative;
    z-index: 2;
    margin: auto 0 0;
    color: var(--fg-primary, #fff);
    font-family: var(--font);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.035em;
    font-size: clamp(2.75rem, 5.2vw, 5.25rem);
}

/* Subhead sits directly under the headline, bottom-left */
.hero__subhead {
    position: relative;
    z-index: 2;
    margin: clamp(1rem, 2vh, 1.5rem) 0 0;
    max-width: 34rem;
    justify-self: start;
}

/* Mobile: the 577px top margin + 60px type was tuned for a tall desktop
   hero panel. On phones the panel is already a flex column, so we use
   margin-top: auto to snap the headline to the bottom regardless of
   viewport height, and pull the panel's top/bottom padding tighter. */
@media (max-width: 768px) {
    .hero__panel {
        padding-top: clamp(4rem, 9vh, 5.5rem);
        padding-bottom: clamp(3rem, 8vh, 5rem);
    }
    .hero__headline {
        margin: auto 0 0;
        font-size: clamp(2.25rem, 11vw, 3.25rem);
        line-height: 1;
        padding: 0;
        max-width: 100%;
    }
}
.hero__headline-line {
    display: block;
    will-change: transform, opacity;
}

/* ===== FOOTER (mobile) — refined stacked footer (Anduril-style) ===== */
@media (max-width: 768px) {
    /* .is-mobile-only forces display:block here, so `gap` won't apply to the
       footer's own children — space them with margins instead. (The nested
       __top div keeps its flex/gap since it isn't .is-mobile-only.) */
    .kela-footer-mobile {
        background: #ffffff;
        color: #0c0c0c;
        padding: clamp(2.75rem, 10vw, 4rem) var(--m-side) clamp(2.5rem, 8vw, 3.5rem);
    }
    .kela-footer-mobile > * + * { margin-top: clamp(2rem, 8vw, 2.75rem); }
    .kela-footer-mobile__top {
        display: flex;
        flex-direction: column;
        gap: clamp(0.8rem, 3.5vw, 1.15rem);
    }
    .kela-footer-mobile__brand { display: inline-block; width: 140px; }
    .kela-footer-mobile__brand img { width: 100%; height: auto; display: block; }
    .kela-footer-mobile__tagline {
        margin: 0;
        font-family: var(--font);
        font-size: 1.05rem;
        line-height: 1.4;
        letter-spacing: -0.01em;
        color: rgba(12, 12, 12, 0.5);
        max-width: 26ch;
    }
    /* Full-width primary CTA so it never collides with the brand mark. */
    .kela-footer-mobile__cta {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100%;
        background: #0c0c0c;
        color: #fff;
        padding: 1.05rem 1.5rem;
        border-radius: 3px;
        font-family: var(--font);
        font-size: 1rem;
        font-weight: 500;
        text-decoration: none;
        transition: opacity 0.15s ease;
    }
    .kela-footer-mobile__cta svg { width: 16px; height: 14px; flex: 0 0 auto; }
    .kela-footer-mobile__cta:active { opacity: 0.85; }
    /* Hairline nav rows with a trailing arrow — full-width tap targets. */
    .kela-footer-mobile__nav {
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--m-hair-dark);
    }
    .kela-footer-mobile__nav a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: clamp(0.85rem, 4vw, 1.1rem) 0;
        border-bottom: 1px solid var(--m-hair-dark);
        font-family: var(--font);
        font-size: 1.15rem;
        font-weight: 500;
        letter-spacing: -0.01em;
        color: #0c0c0c;
        text-decoration: none;
        transition: opacity 0.15s ease;
    }
    .kela-footer-mobile__nav a svg { width: 14px; height: 12px; opacity: 0.35; flex: 0 0 auto; }
    .kela-footer-mobile__nav a:active { opacity: 0.55; }
    .kela-footer-mobile__socials {
        display: flex;
        gap: 0.9rem;
        color: #0c0c0c;
    }
    .kela-footer-mobile__socials a {
        color: inherit;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--m-hair-dark);
        border-radius: 50%;
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .kela-footer-mobile__socials a:active {
        background: #0c0c0c;
        border-color: #0c0c0c;
        color: #fff;
    }
    .kela-footer-mobile__bottom {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        padding-top: clamp(1.5rem, 6vw, 2rem);
        border-top: 1px solid var(--m-hair-dark);
        font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: rgba(12, 12, 12, 0.6);
    }
    .kela-footer-mobile__contact { margin: 0; line-height: 1.8; }
    .kela-footer-mobile__contact a { color: inherit; text-decoration: none; }
    .kela-footer-mobile__copyright { margin: 0; opacity: 0.7; }
    .kela-footer-mobile .kela-footer__clock { font-variant-numeric: tabular-nums; }
}

/* ===== S8 (mobile) — Boots on the ground CTA =====
   NOTE: the section carries .is-mobile-only, whose `display: revert !important`
   forces it back to `display: block` on mobile — so flex/gap/align-items are
   no-ops here. Center with text-align + margin:auto and space with margins. */
@media (max-width: 768px) {
    .s-join-mobile {
        background: var(--gray-950, #060608);
        color: #fff;
        padding: clamp(2.75rem, 10vw, 4.25rem) var(--m-side) clamp(3rem, 10vw, 4.5rem);
        text-align: center;
    }
    .s-join-mobile__eyebrow {
        color: #fff;
        opacity: 0.5;
        margin: 0 0 clamp(1.5rem, 6vw, 2.25rem);
    }
    /* Stage holds the diamond + shader canvas. margin:auto centers the block
       (the section is display:block here); isolate keeps the canvas z local. */
    .s-join-mobile__stage {
        position: relative;
        width: clamp(240px, 72vw, 340px);
        aspect-ratio: 1;
        margin: 0 auto clamp(1.5rem, 6vw, 2.25rem);
        isolation: isolate;
    }
    .s-join-mobile__diamond {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        display: block;
        filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.12));
    }
    .s-join-mobile__shader {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
        display: block;
        pointer-events: none;
    }
    .s-join-mobile__stage.has-shader .s-join-mobile__diamond { visibility: hidden; }
    .s-join-mobile__title {
        font-family: var(--font);
        font-weight: 500;
        font-size: var(--m-display);
        line-height: 0.92;
        letter-spacing: -0.04em;
        margin: 0 0 clamp(1rem, 4vw, 1.4rem);
    }
    .s-join-mobile__desc {
        font-family: var(--font);
        font-size: 0.95rem;
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.6);
        margin: 0 auto;
        max-width: 32ch;
    }
}

/* ===== S6 (mobile) — Backed by: dark header + auto-scroll card marquee ===== */
@media (max-width: 768px) {
    .s-partners-mobile {
        background: #070b0a;
        color: #fff;
        /* Full-bleed horizontally so the marquee runs edge to edge. */
        padding: var(--m-pad) 0;
    }
    .s-partners-mobile__head {
        display: flex;
        flex-direction: column;
        gap: clamp(0.6rem, 2.5vw, 1rem);
        margin-bottom: clamp(1.75rem, 7vw, 2.5rem);
        padding: 0 var(--m-side);
    }
    .s-partners-mobile__head .m-eyebrow { color: #fff; opacity: 0.5; }
    .s-partners-mobile__title {
        font-family: var(--font);
        font-weight: 500;
        font-size: var(--m-display);
        line-height: 0.95;
        letter-spacing: -0.04em;
        margin: 0;
        color: #fff;
    }
    .s-partners-mobile__sub {
        margin: 0;
        font-size: clamp(0.9rem, 3.6vw, 1.05rem);
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.5);
        max-width: 34ch;
    }
    /* Edge-fade viewport; clips the marquee and softens both ends. */
    .s-partners-mobile__viewport {
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
    }
    /* Auto-scrolling marquee. Each card owns its trailing margin so that
       translateX(-50%) lands exactly on the duplicate set => seamless loop. */
    .s-partners-mobile__track {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        width: max-content;
        will-change: transform;
        animation: partners-marquee 28s linear infinite;
    }
    /* No card chrome — logos sit directly on the dark background. */
    .s-partners-mobile__card {
        flex: 0 0 auto;
        width: clamp(9rem, 40vw, 12rem);
        height: clamp(5.5rem, 22vw, 7rem);
        margin-right: clamp(1.5rem, 7vw, 3rem);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .s-partners-mobile__card img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        /* white silhouette to read on the dark background */
        filter: brightness(0) invert(1);
        opacity: 0.85;
    }
    /* IQT keeps native colors. */
    .s-partners-mobile__card[data-keep-color] img {
        filter: none;
        opacity: 1;
    }
}
@keyframes partners-marquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .s-partners-mobile__track { animation: none; }
}

/* ===== S2 (mobile) — Product lines, shift5 numbered list ===== */
@media (max-width: 768px) {
    .s-capabilities-mobile {
        background: #ffffff;
        color: #0a0a0a;
        padding: var(--m-pad) var(--m-side);
    }
    .s-capabilities-mobile__head {
        display: flex;
        flex-direction: column;
        gap: clamp(0.85rem, 3.5vw, 1.25rem);
        margin-bottom: clamp(2.5rem, 9vw, 3.5rem);
    }
    .s-capabilities-mobile__head .m-eyebrow { color: #0a0a0a; opacity: 0.5; }
    .s-capabilities-mobile__title {
        font-family: var(--font);
        font-weight: 500;
        font-size: var(--m-display-sm);
        line-height: 1.08;
        letter-spacing: -0.025em;
        margin: 0;
    }
    .s-capabilities-mobile__caption {
        font-family: var(--font);
        font-size: 0.9rem;
        line-height: 1.55;
        color: rgba(10, 10, 10, 0.62);
        margin: 0;
    }
    .s-capabilities-mobile__list {
        list-style: none;
        margin: 0;
        padding: 0;
        border-top: 1px solid var(--m-hair-dark);
    }
    .s-capabilities-mobile__card {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity 0.6s ease, transform 0.6s ease;
        will-change: opacity, transform;
    }
    .s-capabilities-mobile__card.is-visible { opacity: 1; transform: none; }
    .s-capabilities-mobile__link {
        display: block;
        text-decoration: none;
        color: inherit;
        border-bottom: 1px solid var(--m-hair-dark);
        padding: clamp(1rem, 4vw, 1.5rem) 0;
    }
    .s-capabilities-mobile__media {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: rgba(10, 10, 10, 0.04);
        margin-bottom: clamp(0.85rem, 3.5vw, 1.25rem);
    }
    .s-capabilities-mobile__media video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .s-capabilities-mobile__row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: clamp(0.75rem, 3vw, 1rem);
    }
    .s-capabilities-mobile__row .m-index { color: var(--m-accent); }
    .s-capabilities-mobile__row .m-explore { color: #0a0a0a; }
    .s-capabilities-mobile__card-title {
        font-family: var(--font);
        font-weight: 500;
        font-size: var(--m-display-sm);
        line-height: 1.05;
        letter-spacing: -0.025em;
        margin: 0;
    }
}

/* ===== S1 (mobile) — full-bleed video hero ===== */
@media (max-width: 768px) {
    /* Page top is now a dark video hero, so the canvas (overscroll /
       rubber-band area) matches it -- no seam above the hero. */
    html, body { background: #0a0a0a; }

    .s-hero-mobile {
        display: flex;
        flex-direction: column;
        background: #0a0a0a;
    }
    /* Full-viewport media: badge pinned upper-left, title + spec anchored
       bottom-left, same dim + gradient treatment as the desktop hero. */
    .s-hero-mobile__media {
        position: relative;
        height: 100vh;
        height: 100svh;
        background: #0a0a0a;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: calc(var(--m-pad) + 2rem) var(--m-side) clamp(2.5rem, 8vw, 3.5rem);
    }
    .s-hero-mobile__media video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.5;
        z-index: 0;
    }
    /* Mirror of .hero__overlay from the desktop hero panel. */
    .s-hero-mobile__media::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
            linear-gradient(to bottom, rgba(5,5,5,0.5) 0%, rgba(5,5,5,0.15) 35%, rgba(5,5,5,0.6) 100%);
    }
    .s-hero-mobile__badge {
        position: relative;
        z-index: 2;
    }
    .s-hero-mobile__text {
        position: relative;
        z-index: 2;
        margin-top: auto;
    }
    .s-hero-mobile__title {
        margin: 0;
        font-family: var(--font);
        font-weight: 500;
        font-size: clamp(2.5rem, 12vw, 4rem);
        line-height: 0.95;
        letter-spacing: -0.04em;
        color: #fff;
    }
    .s-hero-mobile__spec {
        font-family: var(--font);
        font-size: clamp(0.95rem, 4vw, 1.15rem);
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: -0.01em;
        margin: clamp(0.85rem, 3vw, 1.25rem) 0 0;
        max-width: 30ch;
        color: rgba(255, 255, 255, 0.9);
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.9rem 2rem;
    border-radius: 100px;
    transition: all 0.3s var(--ease-out);
    letter-spacing: 0.01em;
}

.btn--primary {
    background: var(--white);
    color: var(--black);
}

.btn--primary:hover {
    background: var(--gray-200);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(255,255,255,0.1);
}

.btn--ghost {
    background: rgba(255,255,255,0.06);
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.15);
}

.btn--ghost:hover {
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.1);
}

@media (max-width: 600px) {
    .hero-ctas {
        flex-direction: column;
        align-items: center;
    }
    .btn {
        width: 100%;
        max-width: 300px;
        text-align: center;
        justify-content: center;
    }
}



/* ===== S2 — Capabilities (Figma 404:173) =====
   Header row (eyebrow + headline + caption) above a full-bleed hairline,
   followed by a 4-column grid of capability cards. Each card defaults to
   white bg + black icon/title and reveals a video + flips to white on hover. */
.s-capabilities {
    position: relative;
    z-index: 2;
    background: #ffffff;
    color: #0a0a0a;
    border-bottom: 1px solid #e4e4e4;
    margin-top: -1px;
    /* overflow stays "visible" so the .pixel-divider can extend above the
       section's top edge onto the hero video for the scroll-in transition.
       The capability cards still clip their own videos via their own rule. */
    overflow: visible;
}

/* The pixel-divider inside the capabilities section sits ABOVE section 2's
   top edge (translateY(-100%)) so its white squares appear on top of the
   hero video below, with transparent gaps revealing the video through them.
   scaleY(-1) flips it vertically so the dissolve runs from the hero side
   (top of strip) toward the section side (bottom of strip), keeping pixels
   closest to section 2 visible longest. Pixels dissolve via the same
   scrubbed ScrollTrigger that drives the footer divider. */
.s-capabilities > .pixel-divider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    margin-bottom: 0;
    transform: translateY(-100%) scaleY(-1);
}

.s-capabilities > .pixel-divider .pixel-divider__sq {
    background: var(--white);
}

/* Header row — Figma horizontal inset is 94/1512 ≈ 6.22% */
.s-capabilities__intro {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
    padding: clamp(3rem, 7.6vh, 6.5rem) clamp(1.25rem, 6.22vw, 5.875rem) clamp(2.5rem, 5vh, 4rem);
}

.s-capabilities__eyebrow {
    grid-column: 1 / -1;
    margin: 0 0 clamp(0.75rem, 2vh, 1.5rem);
    font-family: var(--font);
    font-weight: 400;
    font-size: 0.75rem;            /* 12px */
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #0a0a0a;
}

.s-capabilities__headline {
    margin: 0;
    max-width: 36ch;               /* ~567px at 37.85px */
    font-family: var(--font);
    font-weight: 400;
    font-size: clamp(1.625rem, 2.5vw, 2.366rem);  /* 37.85px @ 1512 */
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: #000;
}

.s-capabilities__caption {
    justify-self: end;
    /* Figma places caption ~52px below headline top — pulls down via top margin */
    margin: clamp(0.5rem, 3.25rem, 3.25rem) 0 0;
    max-width: 22rem;
    font-family: var(--font);
    font-weight: 400;
    font-size: 0.866rem;           /* 13.85px */
    line-height: 1.24;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #0a0a0a;
}

/* Homepage Missions subhead variant — reads as the second voice in a dialogue
   with the headline, not a footnote. Sentence case, ~2.3x the base caption
   size. Scoped via modifier class so captions elsewhere keep the base style. */
.s-capabilities__caption--subhead {
    max-width: none;
    font-weight: 500;
    font-size: clamp(1.25rem, 1.8vw, 1.75rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-transform: none;
}

/* Widen the intro's right column on the homepage so each subhead sentence
   fits on one line and breaks only at the explicit <br>. */
#problemSolution .s-capabilities__intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
}

/* Full-bleed hairline divider between header and card grid */
.s-capabilities__hr {
    height: 1px;
    background: #e4e4e4;
}

/* 4 equal-width capability cards */
.s-capabilities__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.s-capabilities__card {
    position: relative;
    aspect-ratio: 378 / 511;
    overflow: hidden;
    color: #0a0a0a;
    transition: color 0.4s ease;
    cursor: pointer;
    border-right: 1px solid #e4e4e4;
}
.s-capabilities__card:last-child { border-right: 0; }

/* Stretched link overlay makes the whole card navigate to its product
   family page. Sits above the video + inner content but stays transparent;
   hover (video reveal) still fires on the parent .s-capabilities__card. */
.s-capabilities__card-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    text-indent: -9999px;
    overflow: hidden;
}

/* Video sits behind content, invisible until hover */
.s-capabilities__card-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.45s ease;
    z-index: 0;
    pointer-events: none;
}

/* Icon + title anchored near the bottom-left of each card (Figma: ~62% from top
   to icon, ~76% from top to title; inset 31px from the left). */
.s-capabilities__card-inner {
    position: absolute;
    left: clamp(1rem, 2.05vw, 1.94rem);
    right: clamp(1rem, 2.05vw, 1.94rem);
    bottom: clamp(2rem, 5.6vh, 2.8rem);
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.1vh, 0.6rem);
    color: inherit;
}

.s-capabilities__card-icon {
    display: block;
    width: clamp(48px, 4vw, 64px);
    height: clamp(48px, 4vw, 64px);
    color: inherit;
}
.s-capabilities__card-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.s-capabilities__card-title {
    margin: 0;
    font-family: var(--font);
    font-weight: 400;
    font-size: clamp(1.75rem, 2.7vw, 2.558rem);   /* 40.93px @ 1512 */
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: lowercase;
    color: inherit;
}

/* Hover: reveal video, flip icon + title white via currentColor */
.s-capabilities__card:hover {
    color: #ffffff;
}
.s-capabilities__card:hover .s-capabilities__card-video {
    opacity: 1;
}
/* Touch devices: no hover state, so the IO-driven mobile player surfaces
   the video by making it visible whenever it's in the viewport. A bottom
   gradient scrim ensures the icon + title remain readable over varying
   video frames. */
@media (max-width: 768px) {
    .s-capabilities__card-video {
        opacity: 1;
    }
    .s-capabilities__card { color: #ffffff; }
    .s-capabilities__card::after {
        content: '';
        position: absolute;
        inset: 35% 0 0 0;
        z-index: 0;
        background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.55) 70%,
            rgba(0, 0, 0, 0.85) 100%);
        pointer-events: none;
    }
    .s-capabilities__card-inner {
        left: clamp(1rem, 5vw, 1.5rem);
        right: clamp(1rem, 5vw, 1.5rem);
        bottom: clamp(1.25rem, 4vw, 1.5rem);
        gap: 0.5rem;
    }
    .s-capabilities__card-icon {
        width: 40px;
        height: 40px;
    }
    /* Bigger card title -- reads as a real Anduril-style display title
       rather than a tiny label on a video. */
    .s-capabilities__card-title {
        font-size: var(--display-2-mobile);
        line-height: 1;
    }
}

/* Responsive fallback: 2 columns on tablet, 1 column on mobile */
@media (max-width: 1024px) {
    .s-capabilities__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .s-capabilities__card:nth-child(2) { border-right: 0; }
    .s-capabilities__card:nth-child(-n+2) { border-bottom: 1px solid #e4e4e4; }
}

@media (max-width: 640px) {
    .s-capabilities__intro {
        grid-template-columns: 1fr;
    }
    .s-capabilities__caption {
        justify-self: start;
        margin-top: 0;
    }
    .s-capabilities__grid {
        grid-template-columns: 1fr;
    }
    /* Tall cinematic portrait cards on phones -- more "Anduril hero tile"
       than "thumbnail strip". */
    .s-capabilities__card {
        aspect-ratio: 4 / 5;
        border-right: 0;
        border-bottom: 1px solid #e4e4e4;
    }
    .s-capabilities__card:last-child {
        border-bottom: 0;
    }
}

/* ===== PRODUCT FAMILIES — pull-up slider (MOBILE ONLY) =====
   Applied only to the .pf-slider section, which is is-mobile-only. The desktop
   product-families grid (.s-capabilities) is deliberately untouched. Dark
   Shift5-style horizontal slider: header with prev/next arrows; dark cards with
   a line icon, title and description; a coral corner-line frame that draws in
   (staggered) when the slider scrolls into view (no hover on touch).
   Rules use the .pf-slider modifier so they only target this section. */
.pf-slider.s-capabilities {
    background: #0a0a0a;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: visible;
}

/* Header: eyebrow full-width, title left, controls right. */
.pf-slider .pf-slider__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    grid-template-columns: none;
}
.pf-slider .s-capabilities__eyebrow { flex: 1 1 100%; color: rgba(255, 255, 255, 0.55); }
.pf-slider .pf-slider__title {
    flex: 1 1 18rem;
    margin: 0;
    max-width: 24ch;
    color: #ffffff;
}
.pf-slider__controls {
    display: flex;
    gap: 0.6rem;
    flex: 0 0 auto;
}
/* Two-line subhead under the mobile Missions title — full-row in the flex
   header, white-on-dark to match the slider section. */
.pf-slider .pf-slider__caption {
    flex: 1 1 100%;
    margin: 0.25rem 0 0;
    font-family: var(--font);
    font-size: clamp(1.125rem, 4.4vw, 1.5rem);
    color: rgba(255, 255, 255, 0.85);
}
.pf-slider__ctrl {
    width: clamp(44px, 3.4vw, 54px);
    height: clamp(44px, 3.4vw, 54px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
.pf-slider__ctrl svg { width: 42%; height: 42%; display: block; }
.pf-slider__ctrl:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}
.pf-slider__ctrl:disabled { opacity: 0.28; cursor: default; }

/* Track: horizontal scroll-snap row. */
.pf-slider .s-capabilities__grid {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.pf-slider .s-capabilities__grid::-webkit-scrollbar { display: none; }

/* Card — dark tile. */
.pf-slider .s-capabilities__card {
    position: relative;
    flex: 0 0 auto;
    width: clamp(240px, 78vw, 340px);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #0c0c0c;
    color: #ffffff;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 0;
    scroll-snap-align: start;
}
.pf-slider .s-capabilities__card:last-child { border-right: 0; }
.pf-slider .s-capabilities__card-video { display: none; }
.pf-slider .s-capabilities__card::after { content: none; }
.pf-slider .s-capabilities__card-link { z-index: 4; }

/* Coral corner-line frame — top + left lines draw in on hover (the initial
   behavior); hidden at rest. */
.pf-slider .s-capabilities__card-frame {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.pf-slider .s-capabilities__card-frame::before,
.pf-slider .s-capabilities__card-frame::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: var(--m-accent, #ff5841);
    transform-origin: top left;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.pf-slider .s-capabilities__card-frame::before { width: 100%; height: 2px; transform: scaleX(0); }
.pf-slider .s-capabilities__card-frame::after { width: 2px; height: 100%; transform: scaleY(0); }
.pf-slider .s-capabilities__card:hover .s-capabilities__card-frame::before { transform: scaleX(1); }
.pf-slider .s-capabilities__card:hover .s-capabilities__card-frame::after { transform: scaleY(1); }

/* Inner: icon centered up top, text block anchored to the bottom-left. */
.pf-slider .s-capabilities__card-inner {
    position: absolute;
    inset: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(1.25rem, 1.8vw, 1.9rem);
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 3;
}
.pf-slider .s-capabilities__card-icon {
    align-self: center;
    width: clamp(40px, 3.2vw, 52px);
    height: clamp(40px, 3.2vw, 52px);
    margin: clamp(1.5rem, 6vh, 3.5rem) 0 auto;
    color: rgba(255, 255, 255, 0.9);
}
.pf-slider .s-capabilities__card-title {
    margin: 0 0 0.6rem;
    font-size: clamp(1.25rem, 1.6vw, 1.6rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: none;
    color: #ffffff;
}
.pf-slider .s-capabilities__card-desc {
    margin: 0;
    max-width: 30ch;
    font-family: var(--font);
    font-size: 0.74rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.pf-slider .s-capabilities__card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: clamp(0.9rem, 2vw, 1.25rem);
    font-family: var(--font);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--m-accent, #ff5841);
}
.pf-slider .s-capabilities__card-cta svg { width: 14px; height: 14px; }

/* ===== KELA HUB — stepped feature (Giga-style, square corners) =====
   Responsive product feature: left brand/intro/CTA + a clickable/auto-cycling
   stepper; right a crossfading media stack. Square corners throughout.
   Driven by initKelaHub(). */
.kela-hub {
    background: #0a0a0a;
    color: #ffffff;
    padding: clamp(3rem, 8vh, 7rem) 0;
    scroll-margin-top: 80px;
}
.kela-hub__wrap {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.kela-hub__card {
    display: flex;
    flex-direction: column;
    gap: clamp(1.75rem, 4vw, 3rem);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    padding: clamp(1rem, 2vw, 1.5rem);
    overflow: hidden;
}
@media (min-width: 810px) {
    .kela-hub__card { flex-direction: row; min-height: 760px; align-items: stretch; gap: clamp(2rem, 4vw, 3rem); }
}

/* LEFT column */
.kela-hub__col { display: flex; flex-direction: column; }
@media (min-width: 810px) {
    .kela-hub__col { width: 34%; flex: 0 0 34%; }
}
.kela-hub__head { display: flex; flex-direction: column; gap: clamp(0.9rem, 2vw, 1.25rem); }
.kela-hub__brand { display: flex; align-items: center; gap: 0.7rem; }
.kela-hub__icon { color: var(--m-accent, #ff5841); display: inline-flex; }
.kela-hub__icon svg { display: block; }
.kela-hub__title {
    margin: 0;
    font-family: var(--font);
    font-weight: 500;
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    letter-spacing: -0.02em;
    line-height: 1.2;
    background: linear-gradient(90deg, var(--m-accent, #ff5841) -12%, #ffffff 40%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.kela-hub__desc {
    margin: 0;
    max-width: 22rem;
    font-family: var(--font);
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
}
.kela-hub__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    padding: 0.75rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font-family: var(--font);
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.kela-hub__cta svg { width: 16px; height: 16px; }
.kela-hub__cta:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }

/* Stepper */
.kela-hub__steps {
    list-style: none;
    margin: clamp(2rem, 5vw, 3.5rem) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.kela-hub__step { position: relative; }
.kela-hub__step-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}
.kela-hub__step-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--m-accent, #ff5841);
    transform: scaleX(0);
    transform-origin: left;
}
.kela-hub__step.is-active .kela-hub__step-line::after {
    animation: kelaHubProgress 6s linear forwards;
}
@keyframes kelaHubProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kela-hub__step-btn {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: clamp(1rem, 2vw, 1.25rem) 0;
    font: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.kela-hub__step-title {
    margin: 0;
    font-family: var(--font);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.3s ease;
}
.kela-hub__step.is-active .kela-hub__step-title { color: #ffffff; }
.kela-hub__step-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.42s ease, opacity 0.42s ease;
}
.kela-hub__step.is-active .kela-hub__step-body { grid-template-rows: 1fr; opacity: 1; }
.kela-hub__step-desc {
    margin: 0;
    min-height: 0;
    overflow: hidden;
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.55);
}

/* RIGHT media */
.kela-hub__media {
    position: relative;
    width: 100%;
    height: 445px;
    overflow: hidden;
    background: #0c0c0c;
}
@media (min-width: 810px) {
    .kela-hub__media { height: auto; flex: 1; min-height: 0; }
}
.kela-hub__media-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.42s ease;
}
.kela-hub__media-item.is-active { opacity: 1; }
.kela-hub__media-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 18%);
    mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 18%);
}

/* Mobile order: brand/intro + CTA, then media, then stepper (like Giga). */
@media (max-width: 809px) {
    .kela-hub__col { display: contents; }
    .kela-hub__head { order: 0; }
    .kela-hub__cta { order: 1; margin-top: 0; }
    .kela-hub__media { order: 2; }
    .kela-hub__steps { order: 3; margin-top: 0; }
}

/* ===== S3 — Rock Pedestal + Flick Cards ===== */
.s-pedestal { position: relative; padding: clamp(6rem, 12vw, 10rem) 0 0; background: var(--black); display: flex; flex-direction: column; align-items: center; overflow: hidden; min-height: 100vh; }
.s-pedestal__title { font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif; font-size: clamp(2.5rem, 5.5vw, 4.5rem); font-weight: 500; letter-spacing: -0.03em; color: var(--white); text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.s-pedestal__rock { position: relative; width: 100%; max-width: 100%; margin-top: -150px; z-index: 0; }
.s-pedestal__rock-img { width: 800px; max-width: 100%; height: auto; display: block; margin: 0 auto; }
.flick-group { position: relative; z-index: 2; }
.flick-group__relative-object { opacity: 0; pointer-events: none; width: 47em; max-width: 100%; position: relative; }
.flick-group__relative-object-before { padding-top: 75%; }
.flick-group__collection { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.flick-group__list { justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; position: relative; }
.flick-group__item { position: absolute; }
.flick-card { color: #fff; user-select: none; background-color: #000; border-radius: 0; justify-content: center; align-items: center; width: 20em; display: flex; position: relative; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.flick-card__before { padding-top: 140%; }
.flick-card__media { justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; position: absolute; top: 0; left: 0; }
.cover-image { pointer-events: none; object-fit: cover; user-select: none; width: 100%; height: 100%; position: absolute; top: 0; left: auto; }
.flick-card__footer { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.25rem; background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%); display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; }
.flick-card__footer-text { flex: 1; min-width: 0; }
.flick-card__footer-title { font-size: 0.85rem; font-weight: 600; color: var(--white); margin-bottom: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flick-card__footer-desc { font-size: 0.7rem; color: var(--gray-400); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.flick-card__plus { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; color: var(--gray-300); font-size: 1rem; transition: all 0.2s ease; }
[data-flick-cards-item-status="active"] .flick-card__plus { border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.1); color: var(--white); }
[data-flick-cards-item-status] .flick-card__footer { opacity: 0; transition: opacity 0.3s ease; }
[data-flick-cards-item-status="active"] .flick-card__footer, [data-flick-cards-item-status="2-before"] .flick-card__footer, [data-flick-cards-item-status="2-after"] .flick-card__footer { opacity: 1; }
[data-flick-cards-dragger] { position: absolute; inset: 0; z-index: 1; pointer-events: auto; touch-action: pan-y; }
[data-flick-cards-item-status] .flick-card__media { transition: opacity 0.2s ease; opacity: 0.5; }
[data-flick-cards-item-status="2-before"] .flick-card__media, [data-flick-cards-item-status="2-after"] .flick-card__media { opacity: 0.75; }
[data-flick-cards-item-status="active"] .flick-card__media { opacity: 1; }
[data-flick-drag-status="grab"] { cursor: grab; }
[data-flick-drag-status="grabbing"] { cursor: grabbing; }
.flick-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; }
.flick-arrow:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); transform: translateY(-50%) scale(1.05); }
.flick-arrow--prev { left: clamp(1rem, 3vw, 3rem); }
.flick-arrow--next { right: clamp(1rem, 3vw, 3rem); }
@media (max-width: 768px) { .flick-card { width: 16em; } .flick-group__relative-object { width: 30em; } .s-pedestal__rock { max-width: 350px; margin-top: -2rem; } }


/* ===== Card Modal ===== */
.card-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.card-modal.is-open { opacity: 1; pointer-events: auto; overflow-y: auto; }
.card-modal__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(12px); }
.card-modal__content { position: relative; background: var(--gray-900); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: clamp(2rem, 4vw, 3rem); max-width: 900px; width: calc(100% - 3rem); margin: 3rem auto; transform: scale(0.95) translateY(10px); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.card-modal.is-open .card-modal__content { transform: scale(1) translateY(0); }
.card-modal__close { position: absolute; top: 1.25rem; right: 1.25rem; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: var(--gray-400); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; z-index: 2; }
.card-modal__close:hover { background: rgba(255,255,255,0.1); color: var(--white); }
.card-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.card-modal__title { font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; letter-spacing: -0.03em; color: var(--white); margin-bottom: 1rem; line-height: 1.1; }
.card-modal__subtitle { font-size: 0.95rem; color: var(--gray-300); line-height: 1.7; margin-bottom: 2rem; }
.card-modal__features { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem; }
.card-modal__feature { padding-left: 1rem; border-left: 2px solid rgba(255,255,255,0.08); }
.card-modal__feature-title { font-size: 0.85rem; font-weight: 600; color: var(--white); margin-bottom: 0.35rem; }
.card-modal__feature-desc { font-size: 0.8rem; color: var(--gray-400); line-height: 1.6; }
.card-modal__deploys-label { font-size: 1.1rem; font-weight: 500; color: var(--gray-300); margin-bottom: 0.75rem; font-style: italic; }
.card-modal__deploy-cards { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.card-modal__deploy { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 0.75rem 1rem; flex: 1; min-width: 180px; }
.card-modal__deploy-type { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 0.25rem; }
.card-modal__deploy-name { font-size: 0.85rem; font-weight: 600; color: var(--white); display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.card-modal__deploy-badge { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.05em; padding: 0.2rem 0.5rem; border-radius: 4px; background: rgba(255,255,255,0.08); color: var(--gray-300); white-space: nowrap; }
.card-modal__visual { background: var(--gray-850); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; overflow: hidden; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; position: relative; }
.card-modal__visual img { width: 100%; height: 100%; object-fit: cover; }
.card-modal__visual-placeholder { color: var(--gray-600); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 768px) { .card-modal__grid { grid-template-columns: 1fr; } .card-modal__visual { aspect-ratio: 16 / 9; } }


/* ===== S4/S5 — Split Sections ===== */

.s-split {
    padding: clamp(8rem, 16vw, 14rem) 0;
    background: var(--black);
}

.s-split--reverse {
    background: var(--gray-950);
}

.s-split__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 6rem);
}

.s-split__label {
    grid-column: 1 / -1;
}

.s-split__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.s-split__headline {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    color: var(--gray-300);
}

.s-split__headline strong {
    color: var(--white);
    font-weight: 700;
}

.s-split__desc {
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    color: var(--gray-400);
    line-height: 1.8;
}

.s-split__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
}

.s-split--reverse .s-split__text {
    order: 2;
}

.s-split--reverse .s-split__visual {
    order: 1;
}

@media (max-width: 768px) {
    .s-split__grid {
        grid-template-columns: 1fr;
    }
    .s-split--reverse .s-split__text,
    .s-split--reverse .s-split__visual {
        order: unset;
    }
}


/* ===== S6 — Building Blocks (numbered grid) ===== */

.s-blocks {
    padding: clamp(6rem, 14vw, 10rem) 0;
    background: var(--black);
}

.s-blocks__headline {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-align: center;
    margin-bottom: clamp(3rem, 6vw, 5rem);
    color: var(--gray-300);
}

.s-blocks__headline strong {
    color: var(--white);
    font-weight: 700;
}

.s-blocks__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.06);
    border-radius: 16px;
    overflow: hidden;
}

.s-blocks__item {
    background: var(--gray-950);
    padding: clamp(2rem, 3vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: background 0.3s ease;
}

.s-blocks__item:hover {
    background: var(--gray-900);
}

.s-blocks__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
}

.s-blocks__num {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--gray-500);
}

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

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


/* ===== S7 — Backing ===== */

.s-backed {
    padding: clamp(8rem, 16vw, 14rem) 0;
    background: var(--gray-950);
    text-align: center;
}

.s-backed__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 2.5rem;
}

.s-backed__logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 5vw, 4rem);
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.s-backed__name {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 300;
    letter-spacing: 0.06em;
    color: var(--gray-300);
}

.s-backed__sep {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.08);
}

.s-backed__tagline {
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: var(--gray-500);
    font-style: italic;
}


/* ===== S8 — Final CTA ===== */

.s-cta-final {
    padding: clamp(8rem, 16vw, 14rem) 0 clamp(4rem, 8vw, 6rem);
    background: var(--black);
    text-align: center;
    overflow: hidden;
}

.s-cta-final__headline {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--gray-300);
}

.s-cta-final__headline strong {
    color: var(--white);
    font-weight: 700;
}

.s-cta-final__desc {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    color: var(--gray-400);
    line-height: 1.7;
    max-width: 500px;
    margin: 0 auto 2.5rem;
}

.s-cta-final__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: clamp(4rem, 8vw, 6rem);
}

.s-cta-final__img {
    width: 100%;
    aspect-ratio: 21 / 7;
    background-size: cover;
    background-position: center top;
    border-radius: 16px 16px 0 0;
    max-width: 1100px;
    margin: 0 auto;
    opacity: 0.6;
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}






/* ===== S2.5 — SOFTWARE PRODUCT LINES (DOSS-style scroll tabs) =====
   Layout: sticky LEFT rail with active indicator, RIGHT column flows naturally.
   Each product is a vertical stack: eyebrow → title → description → visual → button. */
.s-products-scroll {
    position: relative;
    background: #000;
    z-index: 10;
    padding-bottom: clamp(4rem, 10vh, 8rem);
}

/* ----- Top header strip: Kela SDK / Kela HUB on the left, tagline right ----- */
.s-products-scroll__header {
    display: grid;
    grid-template-columns: clamp(220px, 21.2vw, 321px) minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-height: clamp(160px, 18vh, 213px);
    border-bottom: 1px solid #3f3f3f;
    padding: clamp(1.5rem, 3vh, 2.25rem) clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 3vh, 2.25rem) clamp(1.5rem, 4vw, 3rem);
    box-sizing: border-box;
}
.s-products-scroll__header-brand {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vh, 0.75rem);
}
.s-products-scroll__header-eyebrow {
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: rgba(255,255,255,0.55);
    margin: 0;
    text-transform: none;
}
.s-products-scroll__header-title {
    font-family: var(--font);
    font-size: clamp(28px, 2.5vw, 37.85px);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.02;
    color: var(--white);
    margin: 0;
}
.s-products-scroll__header-desc {
    font-family: var(--font);
    font-size: clamp(16px, 1.5vw, 22.85px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--white);
    margin: 0;
    max-width: 52ch;
    justify-self: end;
    text-align: right;
    padding-right: clamp(1.5rem, 4vw, 3rem);
}

/* ----- 2-col grid wrapper: sticky 321px sidebar + scrolling right column ----- */
.s-products-scroll__wrapper {
    display: grid;
    grid-template-columns: clamp(220px, 21.2vw, 321px) minmax(0, 1fr);
    gap: 0;
    width: 100%;
    align-items: start;
}

/* ----- LEFT: sticky tab rail ----- */
.s-products-scroll__nav-wrap {
    position: sticky;
    top: clamp(4rem, 12vh, 9rem);
    align-self: start;
    z-index: 2;
}
.s-products-scroll__nav {
    position: relative;
}
.s-products-scroll__nav-list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.s-products-scroll__nav-item {
    position: relative;
    z-index: 2;
    border-bottom: 1px solid #3f3f3f;
}
.s-products-scroll__nav-link {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    height: clamp(72px, 8.5vh, 86px);
    padding: 0 clamp(1.5rem, 6vw, 90px);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.4s ease;
}
.s-products-scroll__nav-link-text {
    font-family: var(--font);
    font-size: clamp(17px, 1.25vw, 20px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: rgba(255,255,255,0.55);
    transition: color 0.4s ease;
}
.s-products-scroll__nav-link.is-active .s-products-scroll__nav-link-text { color: #fff; }
.s-products-scroll__nav-link:hover .s-products-scroll__nav-link-text { color: rgba(255,255,255,0.85); }

/* Animated indicator: top + height set inline by JS to follow active <li> */
.s-products-scroll__tab-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    pointer-events: none;
    z-index: 1;
    background: #111;
    transition: top 450ms cubic-bezier(0.4, 0, 0.2, 1),
                height 450ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: top, height;
}

/* ----- RIGHT: scrolling product column ----- */
.s-products-scroll__content {
    position: relative;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #3f3f3f;
}

/* Each product = vertical stack: text header row → media */
.s-products-scroll__product {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    scroll-margin-top: clamp(4rem, 12vh, 9rem);
}
.s-products-scroll__product + .s-products-scroll__product {
    border-top: 1px solid #3f3f3f;
}

/* Text block: title (left) + description (right) side-by-side */
.s-products-scroll__product-text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
    padding: clamp(2rem, 4vh, 3.5rem) clamp(2rem, 6vw, 4.5rem);
    margin: 0;
}
.s-products-scroll__product-title {
    font-family: var(--font);
    font-size: clamp(20px, 1.85vw, 26px);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.02;
    color: var(--white);
    margin: 0;
    max-width: none;
}
.s-products-scroll__product-desc {
    font-family: var(--font);
    font-size: clamp(12px, 0.9vw, 12.85px);
    font-weight: 600;
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
    margin: 0;
    max-width: 368px;
    justify-self: end;
}

/* Visual: full-bleed video panel (no border-radius, no overlay) */
.s-products-scroll__product-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 0;
    overflow: hidden;
    background: #000;
    border: none;
}
.s-products-scroll__product-visual-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 0;
}
.s-products-scroll__product-visual video,
.s-products-scroll__product-visual img,
.s-products-scroll__product-visual-media video,
.s-products-scroll__product-visual-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mobile fallback */
@media (max-width: 900px) {
    .s-products-scroll__header {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: clamp(1.5rem, 4vh, 2rem) 1.25rem;
        min-height: 0;
    }
    .s-products-scroll__header-desc {
        justify-self: start;
        text-align: left;
        padding-right: 0;
        max-width: none;
    }
    .s-products-scroll__wrapper {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .s-products-scroll__nav-wrap {
        position: relative;
        top: 0;
        border-bottom: 1px solid #3f3f3f;
    }
    .s-products-scroll__content {
        border-left: none;
    }
    .s-products-scroll__nav-list {
        flex-direction: row;
        overflow-x: auto;
    }
    .s-products-scroll__nav-item {
        flex: 1 0 auto;
        border-bottom: none;
        border-right: 1px solid #3f3f3f;
    }
    .s-products-scroll__nav-item:last-child { border-right: none; }
    .s-products-scroll__nav-link {
        height: 64px;
        padding: 0 1.25rem;
        justify-content: center;
    }
    .s-products-scroll__tab-indicator { display: none; }
    .s-products-scroll__nav-link.is-active { background: #111; }
    .s-products-scroll__nav-link-text { color: rgba(255,255,255,0.55); }

    .s-products-scroll__product-text {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.75rem 1.25rem;
    }
    .s-products-scroll__product-desc {
        justify-self: start;
        max-width: none;
    }
    .s-products-scroll__product-visual { aspect-ratio: 16 / 11; }
}


/* ===== S3.5 — Composite Dual (ICOMAT-style) ===== */
.s-composite-dual { background: transparent; padding: 0 clamp(1.5rem, 4vw, 3rem) clamp(6rem, 12vh, 10rem); overflow: hidden; }
.s-composite-dual__container { max-width: 1200px; margin: 0 auto; will-change: transform; }
.s-composite-dual__text { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; margin-bottom: clamp(2.5rem, 5vh, 4rem); }
.s-composite-dual__eyebrow { font-family: var(--font); font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; color: var(--white); margin: 0; white-space: nowrap; }
.s-composite-dual__desc { max-width: 480px; }
.s-composite-dual__desc p { font-family: var(--font); font-size: 0.9375rem; line-height: 1.65; color: rgba(255,255,255,0.55); margin: 0 0 1.25rem; }
.s-composite-dual__link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font); font-size: 0.9375rem; font-weight: 500; color: var(--white); text-decoration: none; transition: gap 0.3s ease; }
.s-composite-dual__link:hover { gap: 0.85rem; }
.s-composite-dual__arrow { display: inline-flex; align-items: center; width: 12px; height: 12px; transition: transform 0.3s ease; }
.s-composite-dual__arrow svg { width: 100%; height: 100%; }
.s-composite-dual__link:hover .s-composite-dual__arrow { transform: translateX(3px); }

.s-composite-dual__cards { display: flex; gap: 18px; }
.s-composite-dual__card-wrapper { position: relative; border: 1px solid rgba(255,255,255,0.1); border-radius: 0; overflow: hidden; will-change: width; flex-shrink: 0; }
.s-composite-dual__card-wrapper--small { width: calc(50% - 9px); }
.s-composite-dual__card-wrapper--large { flex: 1; min-width: 0; }

.s-composite-dual__grid-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.s-composite-dual__square { position: absolute; width: 6px; height: 6px; border: 1px solid rgba(255,255,255,0.2); }
.s-composite-dual__square:nth-child(1) { top: 8px; left: 8px; }
.s-composite-dual__square:nth-child(2) { top: 8px; right: 8px; }
.s-composite-dual__square:nth-child(3) { bottom: 8px; left: 8px; }
.s-composite-dual__square:nth-child(4) { bottom: 8px; right: 8px; }

.s-composite-dual__card { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }
.s-composite-dual__card-title { font-family: var(--font); font-size: 0.6875rem; font-weight: 500; color: rgba(255,255,255,0.45); letter-spacing: 0.06em; text-transform: uppercase; margin: 0; padding: 1.25rem 1.5rem 0.75rem; }
.s-composite-dual__card-media { position: relative; flex: 1; padding: 0 1rem 1rem; }
.s-composite-dual__card-video { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; border-radius: 0; }

.s-composite-dual__card-btn { position: absolute; bottom: 1.75rem; left: 1.75rem; display: inline-flex; align-items: stretch; background: rgba(8,8,8,0.85); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.12); border-radius: 100px; cursor: pointer; overflow: hidden; padding: 0; transition: border-color 0.3s ease, transform 0.3s ease; }
.s-composite-dual__card-btn:hover { border-color: rgba(255,255,255,0.3); transform: scale(1.03); }
.s-composite-dual__btn-label { font-family: var(--font); font-size: 0.75rem; font-weight: 500; color: var(--white); padding: 0.55rem 0.9rem; display: flex; align-items: center; letter-spacing: 0.03em; text-transform: uppercase; overflow: hidden; }
.s-composite-dual__btn-label-text { display: block; will-change: transform; }
.s-composite-dual__btn-icon { display: flex; align-items: center; justify-content: center; width: 34px; position: relative; padding: 0.45rem 0; }
.s-composite-dual__btn-icon-border { position: absolute; left: 0; top: 15%; bottom: 15%; width: 1px; background: rgba(255,255,255,0.15); }
.s-composite-dual__btn-icon svg { width: 14px; height: 14px; }

.s-composite-dual__card-desc { font-family: var(--font); font-size: 0.875rem; font-weight: 600; line-height: 1.45; color: rgba(255,255,255,0.7); padding: 0.75rem 1.5rem 1.25rem; margin: 0; min-height: 2.5em; }

@media (max-width: 768px) {
    .s-composite-dual__text { grid-template-columns: 1fr; gap: 1rem; }
    .s-composite-dual__cards { flex-direction: column; }
    .s-composite-dual__card-wrapper--small, .s-composite-dual__card-wrapper--large { flex: none; width: 100%; }
}


/* ===== S2.5 (mobile) — Products as a vertical card stack =====
   Replaces the sticky-tab .s-products-scroll on mobile. Single source of
   truth for visibility is the .is-mobile-only utility from the foundation
   block; this CSS only defines layout/typography. */
.s-products-mobile {
    background: var(--black);
    color: var(--fg-primary, #f1f0ee);
    padding: var(--section-pad-mobile) var(--section-side-mobile);
}
.s-products-mobile__header {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: clamp(2.5rem, 8vw, 3.5rem);
}
.s-products-mobile__eyebrow {
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: var(--mono-eyebrow-mobile);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(241, 240, 238, 0.55);
    margin: 0;
}
.s-products-mobile__title {
    font-family: var(--font);
    font-size: var(--display-1-mobile);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.035em;
    margin: 0;
}
.s-products-mobile__desc {
    font-family: var(--font);
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(241, 240, 238, 0.7);
    margin: 0.25rem 0 0;
    max-width: 32ch;
}
.s-products-mobile__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 9vw, 4rem);
}
.s-products-mobile__card {
    display: flex;
    flex-direction: column;
    gap: clamp(0.875rem, 3.5vw, 1.25rem);
    padding-top: clamp(1.5rem, 5vw, 2rem);
    border-top: 1px solid rgba(241, 240, 238, 0.12);
    /* Initial state for scroll reveal; .is-visible removes the offset. */
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}
.s-products-mobile__card:first-child {
    /* The header above already provides separation; first card doesn't
       need the hairline. */
    padding-top: 0;
    border-top: 0;
}
.s-products-mobile__card.is-visible {
    opacity: 1;
    transform: none;
}
.s-products-mobile__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: rgba(241, 240, 238, 0.04);
    /* No border-radius -- matches the squared-off video tiles elsewhere
       (composite-dual, flick, grid-reveal) per prior desktop design call. */
}
.s-products-mobile__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.s-products-mobile__text {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0 0.1rem;
}
.s-products-mobile__card-eyebrow {
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: var(--mono-eyebrow-mobile);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(241, 240, 238, 0.75);
    margin: 0 0 0.1rem;
}
.s-products-mobile__card-title {
    font-family: var(--font);
    font-size: var(--display-2-mobile);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0;
}
.s-products-mobile__card-desc {
    font-family: var(--font);
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(241, 240, 238, 0.75);
    margin: 0;
}


/* ===== S2.75 — Grid Reveal (Relats-style zoom-out) ===== */
.s-grid-reveal { position: relative; height: 400vh; background: var(--black); }
.s-grid-reveal__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.s-grid-reveal__rows { display: flex; flex-direction: column; width: 100%; height: 100%; transform-origin: center center; will-change: transform; }
.s-grid-reveal__row { display: flex; width: 100%; }
.s-grid-reveal__row--top, .s-grid-reveal__row--bottom { flex: 0.8; }
.s-grid-reveal__row--center { flex: 1.2; }
.s-grid-reveal__tile { flex: 1; position: relative; overflow: hidden; clip-path: inset(5px); }
.s-grid-reveal__tile--main { flex: 1.8; }
.s-grid-reveal__tile--side { flex: 0.6; }
.s-grid-reveal__tile video { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.s-grid-reveal__overlay { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.s-grid-reveal__text { position: absolute; font-family: var(--font); font-size: clamp(1.75rem, 3.5vw, 3rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; color: var(--white); text-align: center; max-width: 750px; padding: 0 2rem; }
.s-grid-reveal__text em { font-style: italic; }
@media (max-width: 768px) { .s-grid-reveal { height: 300vh; } .s-grid-reveal__text { font-size: clamp(1.25rem, 5vw, 1.75rem); max-width: 90%; } }


/* ===== S4 (mobile) — Grid Reveal as a clean vertical stack =====
   Replaces the 300vh pinned/scrubbed desktop collage on mobile. */
.s-grid-reveal-mobile {
    background: var(--black);
    color: var(--white);
    padding: var(--section-pad-mobile) var(--section-side-mobile);
}
.s-grid-reveal-mobile__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(1.75rem, 6vw, 2.75rem);
    max-width: 36rem;
    margin: 0 auto;
}
.s-grid-reveal-mobile__eyebrow {
    color: #fff;
    opacity: 0.55;
    margin: 0;
}
/* Heading overlaid on the center video (Relats-style). */
.s-grid-reveal-mobile__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 5vw, 1.75rem);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.55));
}
.s-grid-reveal-mobile__text {
    font-family: var(--font);
    font-size: clamp(1.2rem, 5.6vw, 1.85rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.12;
    margin: 0;
    text-align: center;
    color: #ffffff;
}

/* Center row: dominant center video flanked by cropped side videos. */
.s-grid-reveal-mobile__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 64vh;
    height: 64svh;
}
.s-grid-reveal-mobile__tile {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    flex: 0 0 auto;
    /* Default fully open (no-JS / reduced-motion). initGridRevealMobile()
       sets the clipped start state and scrubs it open on scroll. */
    clip-path: inset(0 0);
    will-change: clip-path;
}
.s-grid-reveal-mobile__tile--left,
.s-grid-reveal-mobile__tile--right { flex: 0.8 1 0; height: 82%; }
.s-grid-reveal-mobile__tile--center { flex: 2.6 1 0; height: 100%; }
.s-grid-reveal-mobile__tile video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.s-grid-reveal-mobile__caption {
    font-family: var(--font);
    font-size: clamp(1.05rem, 4.5vw, 1.4rem);
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
    text-align: left;
    color: rgba(255, 255, 255, 0.9);
}
.s-grid-reveal-mobile__caption em { font-style: italic; }
/* Mobile reveal: the caption fades up on scroll-in (the heading is now an
   always-visible overlay on the center video). */
.s-grid-reveal-mobile__caption {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.s-grid-reveal-mobile__caption.is-visible {
    opacity: 1;
    transform: none;
}


/* ===== S2.9 — Bento (Linear-style) ===== */
/* ===== S2.9 — Large Composite (icomat-style) ===== */
.s-large-composite { padding: clamp(6rem, 12vh, 10rem) 0; background: var(--black); }
.s-large-composite__container { max-width: 1400px; margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 3rem); }
.s-large-composite__header { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-bottom: clamp(3rem, 6vh, 5rem); }
.s-large-composite__title { font-family: var(--font); font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; color: var(--white); margin: 0; }
.s-large-composite__desc { font-family: var(--font); font-size: clamp(0.95rem, 1.4vw, 1.1rem); line-height: 1.65; color: var(--gray-400); margin: 0; max-width: 440px; padding-top: 0.5rem; }

/* Sequence container — holds the bg grid, the centre visual, and the floating buttons */
.s-large-composite__sequence { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--black); overflow: hidden; }

/* Background grid */
.s-lc-bg { position: absolute; inset: 0; pointer-events: none; }
.s-lc-bg__border { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.08); transform-origin: center; will-change: transform; }
.s-lc-bg__border:nth-of-type(1) { top: 0; }
.s-lc-bg__border:nth-of-type(2) { top: 50%; }
.s-lc-bg__border:nth-of-type(3) { bottom: 0; }
.s-lc-bg__line { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.06); will-change: transform; }
.s-lc-bg__line--c1 { left: 12%; }
.s-lc-bg__line--c2 { left: 34%; }
.s-lc-bg__line--c3 { left: 50%; }
.s-lc-bg__line--c4 { left: 66%; }
.s-lc-bg__line--c5 { left: 88%; }
.s-lc-bg__squares { position: absolute; top: 0; bottom: 0; width: 6px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; will-change: transform; }
.s-lc-bg__squares span { display: block; width: 4px; height: 4px; background: rgba(255,255,255,0.6); }
.s-lc-bg__squares span:first-child { transform: translateY(-50%); }
.s-lc-bg__squares span:last-child { transform: translateY(50%); }
.s-lc-bg__squares--c1 { left: 23%; }
.s-lc-bg__squares--c2 { left: 34%; }
.s-lc-bg__squares--c3 { left: 50%; }
.s-lc-bg__squares--c4 { left: 66%; }
.s-lc-bg__squares--c5 { left: 77%; }

/* Centre visual */
.s-large-composite__visual { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.s-large-composite__visual video,
.s-large-composite__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Floating annotation buttons */
.s-lc-btn { position: absolute; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.6rem 0.55rem 0.95rem; border: 0; border-radius: 999px; background: transparent; color: var(--white); cursor: pointer; font-family: var(--font); font-size: 0.875rem; font-weight: 500; letter-spacing: -0.005em; line-height: 1; isolation: isolate; overflow: hidden; will-change: transform, opacity; transition: color 0.45s ease; }
.s-lc-btn__bg { position: absolute; inset: 0; background: rgba(20,20,22,0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.12); border-radius: inherit; z-index: -2; }
.s-lc-btn__white { position: absolute; inset: 0; background: var(--white); border-radius: inherit; transform: translateY(110%); transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1); z-index: -1; }
.s-lc-btn:hover { color: var(--black); }
.s-lc-btn:hover .s-lc-btn__white { transform: translateY(0); }
.s-lc-btn__label { position: relative; z-index: 1; display: inline-block; overflow: clip; line-height: 1.1; white-space: nowrap; }
.s-lc-btn__label-inner { display: inline-block; will-change: transform; }
.s-lc-btn__icon { position: relative; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; }
.s-lc-btn__icon-border { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; transition: border-color 0.45s ease; }
.s-lc-btn:hover .s-lc-btn__icon-border { border-color: rgba(0,0,0,0.4); }
.s-lc-btn__icon svg { width: 8px; height: 8px; color: currentColor; }

/* Button positions (mirroring icomat layout) */
.s-lc-btn--1 { top: 28%; left: 22%; }
.s-lc-btn--2 { top: 64%; left: 35%; }
.s-lc-btn--3 { top: 50%; left: 70%; }

/* Mobile fallback */
@media (max-width: 768px) {
    .s-large-composite__header { grid-template-columns: 1fr; gap: 1rem; }
    .s-large-composite__sequence { aspect-ratio: 4 / 5; }
    .s-large-composite__visual { width: 90%; height: 70%; }
    .s-lc-bg__hide-mobile { display: none; }
    .s-lc-btn { font-size: 0.75rem; padding: 0.45rem 0.55rem 0.45rem 0.75rem; gap: 0.4rem; }
    .s-lc-btn--1 { top: 18%; left: 8%; }
    .s-lc-btn--2 { top: 78%; left: 12%; }
    .s-lc-btn--3 { top: 48%; right: 6%; left: auto; }
}


/* ===== S5 — Hardware Workflow (Glyphic-style sticky scroll-driven) ===== */
.s-rd {
    position: relative;
    height: 225vh;                       /* 3 steps × 75vh of scroll */
    background: #f5f3ee;
    color: #0c0c0c;
}

.s-rd__container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
}

/* Header — small eyebrow + title, left-aligned. Sits at the top of the sticky strip. */
.s-rd__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: clamp(4.5rem, 9vh, 7rem) 0 clamp(1.25rem, 2.5vh, 1.75rem);
}
.s-rd__head-eyebrow {
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #0c0c0c;
}
.s-rd__title {
    font-family: var(--font);
    font-size: clamp(2rem, 3.4vw, 2.6rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: #0c0c0c;
    margin: 0;
}

.s-rd__subtitle {
    font-family: var(--font);
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    line-height: 1.5;
    color: rgba(12, 12, 12, 0.65);
    max-width: 36rem;
    margin: 0.6rem 0 0;
}

/* Sticky stage — fills 75vh, vertically centered in the viewport.
   Content stacked top-down: header strip, hairline, then 2-col body. */
.s-rd__sticky {
    position: sticky;
    top: 12.5vh; /* center the 75vh sticky frame within the viewport */
    height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}

/* Hairline below the header — full viewport width (edge-to-edge), no container padding. */
.s-rd__hr {
    height: 1px;
    width: 100%;
    background: rgba(12,12,12,0.18);
    flex-shrink: 0;
}

/* Two-column split: left media + right step panels, ~50/50. Fills the
   remaining vertical space below the header, so both columns are exactly
   as tall as the viewport minus the header strip. */
.s-rd__inner {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
}

/* LEFT: media — stretches to fill the full inner height so its edges match
   the right column. No aspect-ratio (height is governed by the inner). */
.s-rd__media {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
}
.s-rd__media-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.s-rd__media-item.is-active { opacity: 1; }
.s-rd__media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* RIGHT: stacked panels filling the inner height. Active grows to fill the
   remaining vertical space after the two inactive (fixed-height) rows, so
   the right column always exactly matches the left media's height. */
.s-rd__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-left: 1px solid rgba(12,12,12,0.15);
}
.s-rd__list {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.s-rd__item {
    padding: clamp(1rem, 1.5vw, 1.5rem) clamp(1.25rem, 2vw, 2rem);
    border-bottom: 1px solid rgba(12,12,12,0.15);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    flex: 0 0 auto;
    min-height: clamp(80px, 11vh, 125px);
    transition: background 0.35s ease, flex-basis 0.4s ease;
}
.s-rd__item.is-active {
    background: rgba(12,12,12,0.04);
    flex: 1 1 auto; /* takes all remaining space — auto-sized to media height */
    min-height: clamp(190px, 27vh, 320px);
    justify-content: flex-start;
}
.s-rd__item-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

/* Numbered chip — outlined when inactive, filled dark when active. */
.s-rd__index {
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(12,12,12,0.4);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(12,12,12,0.55);
    flex-shrink: 0;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
    opacity: 0.7;
}
.s-rd__heading {
    font-family: var(--font);
    font-size: clamp(1.15rem, 1.6vw, 1.6rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #0c0c0c;
    margin: 0;
    flex: 1;
    opacity: 0.45;
    transition: opacity 0.3s ease;
}
.s-rd__item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0c0c0c;
    opacity: 0;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
}

.s-rd__item.is-active .s-rd__index {
    background: #0c0c0c;
    color: #fff;
    border-color: #0c0c0c;
    opacity: 1;
}
.s-rd__item.is-active .s-rd__heading { opacity: 1; }
.s-rd__item.is-active .s-rd__item-dot { opacity: 1; }

/* Description: collapsed when inactive, visible when active. */
.s-rd__desc {
    font-family: var(--font);
    font-size: clamp(0.9rem, 1vw, 1rem);
    line-height: 1.5;
    color: rgba(12,12,12,0.7);
    max-width: 34rem;
    margin: 0;
    padding-left: calc(2rem + 0.85rem); /* chip width + gap — align under heading */
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
}
.s-rd__item.is-active .s-rd__desc {
    max-height: 200px;
    opacity: 1;
    margin-top: 0.9rem;
}

/* Mobile fallback */
@media (max-width: 768px) {
    .s-rd { height: auto; }
    .s-rd__sticky { position: relative; height: auto; padding: 0 0 clamp(4rem, 8vw, 6rem); display: block; }
    .s-rd__head { padding-top: clamp(3rem, 6vw, 4rem); }
    .s-rd__inner { grid-template-columns: 1fr; gap: 0; }
    .s-rd__media { aspect-ratio: 4 / 3; }
    .s-rd__content { border-left: none; border-top: 1px solid rgba(12,12,12,0.15); }
    .s-rd__item.is-active { min-height: 0; }
    .s-rd__item.is-active .s-rd__desc { max-height: none; padding-left: 0; }
}


/* ===== Pixel Divider ===== */
.pixel-divider { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--pd-cols, 30), 1fr); background: transparent; pointer-events: none; margin-bottom: -2px; }
.pixel-divider__sq { aspect-ratio: 1; background: var(--black); }


/* ===== Footer (Figma 511:494) — clean white block, 2-column layout =====
   The pixel-divider sits flush at the TOP of the white footer; squares are
   black (base var(--black)) so they read as a dotted strip on white, then
   dissolve on scroll-in. */

.kela-footer {
    position: relative;
    background: #ffffff;
    color: #0c0c0c;
    min-height: clamp(440px, 50vh, 560px);
    padding: 0 clamp(1.5rem, 4vw, 4rem) clamp(2rem, 5vh, 3rem);
}

.kela-footer > .pixel-divider {
    position: relative;
    z-index: 3;
    margin: 0 calc(-1 * clamp(1.5rem, 4vw, 4rem)) clamp(1.5rem, 4vh, 2.5rem);
}

.kela-footer__inner {
    position: relative;
    display: grid;
    /* Right column sizes to its content (vector width). Most of the footer
       is intentionally empty space on the left, per the Figma. */
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: clamp(2rem, 6vw, 6rem);
    width: 100%;
    max-width: 1512px;
    margin: 0 auto;
    min-height: inherit;
}

.kela-footer__col {
    min-width: 0;
}

.kela-footer__col--left {
    display: flex;
    flex-direction: column;
    /* Brand sits at top; CTA is vertically centered in the remaining space
       (matches the Figma design where Let's Talk hits roughly mid-footer). */
}

.kela-footer__col--right {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: clamp(0.75rem, 2vh, 1.25rem);
    /* Width is driven by the vector image; nav/socials/contact stack
       left-aligned beneath, all sharing the same left edge as the vector. */
    width: clamp(220px, 26vw, 320px);
}

/* LEFT — brand + Let's Talk */
.kela-footer__brand {
    display: inline-block;
    color: #0c0c0c;
    text-decoration: none;
}
.kela-footer__brand-img {
    width: clamp(110px, 11vw, 140px);
    height: auto;
    display: block;
    user-select: none;
}
.kela-footer__cta {
    align-self: flex-start;
    /* Auto top + bottom margins center the CTA vertically in the space
       below the brand mark. Matches the Figma mid-column placement. */
    margin-top: auto;
    margin-bottom: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0c0c0c;
    color: #ffffff;
    padding: 0.65rem 1.5rem;
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    letter-spacing: -0.005em;
    transition: background 0.2s ease, transform 0.2s ease;
}
.kela-footer__cta:hover {
    background: #1a1a1a;
    transform: translateY(-1px);
}

/* RIGHT — vector sits in normal flow at the top of the right column and
   drives the column width; nav / socials / contact stack underneath,
   left-aligned to the vector's left edge. Bottom row keeps contact on the
   left and the © glyph on the right via space-between. */
.kela-footer__mark {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: clamp(1rem, 3vh, 2rem);
    pointer-events: none;
    user-select: none;
}
.kela-footer__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.4;
}
.kela-footer__nav a {
    color: #0c0c0c;
    text-decoration: none;
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 500;
    transition: opacity 0.2s ease;
}
.kela-footer__nav a:hover { opacity: 0.6; }

.kela-footer__socials {
    display: inline-flex;
    gap: 0.6rem;
    align-items: center;
    margin-top: 0.5rem;
}
.kela-footer__socials a {
    color: #0c0c0c;
    display: inline-flex;
    transition: opacity 0.2s ease;
}
.kela-footer__socials a:hover { opacity: 0.6; }

.kela-footer__bottom {
    margin-top: auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    padding-top: clamp(1rem, 3vh, 2rem);
}

.kela-footer__contact {
    font-family: var(--font);
    font-size: 0.85rem;
    line-height: 1.5;
    color: #0c0c0c;
    margin: 0;
}
.kela-footer__contact a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.kela-footer__contact a:hover { opacity: 0.6; }

.kela-footer__clock { font-variant-numeric: tabular-nums; }

.kela-footer__copyright {
    font-family: var(--font);
    font-size: 0.85rem;
    color: #0c0c0c;
    margin: 0;
    white-space: nowrap;
}

/* Mobile: stack columns. */
@media (max-width: 768px) {
    .kela-footer {
        min-height: auto;
        padding: 0 clamp(1.25rem, 5vw, 2rem) clamp(2.5rem, 8vw, 4rem);
    }
    .kela-footer__inner {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 6vw, 2.5rem);
    }
    .kela-footer__col--left {
        gap: clamp(1.25rem, 5vw, 2rem);
    }
    /* Reset the desktop margin: auto -- on mobile we want the CTA to sit
       directly under the brand mark, not pushed to the bottom of nothing. */
    .kela-footer__cta {
        margin-top: 0;
        margin-bottom: 0;
    }
    .kela-footer__col--right {
        width: 100%;
        max-width: none;
        align-items: flex-start;
    }
    .kela-footer__mark {
        max-width: min(220px, 60vw);
    }
    .kela-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* Underline link effect */
[data-underline-link] {
    text-decoration: none;
    position: relative;
}

[data-underline-link]::before {
    content: "";
    position: absolute;
    bottom: -0.0625em;
    left: 0;
    width: 100%;
    height: 0.1em;
    background-color: currentColor;
    transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
}

@media (hover: hover) and (pointer: fine) {
    [data-underline-link]:hover::before {
        transform-origin: left;
        transform: scaleX(1) rotate(0.001deg);
    }
}

@media screen and (max-width: 991px) {
    .kela-footer__links-row {
        flex-flow: column;
    }

    .kela-footer__col {
        width: 100%;
    }

    .kela-footer__logo-row {
        gap: 1.5rem;
    }
}

@media screen and (max-width: 767px) {
    .kela-footer__col {
        gap: 1rem;
    }

    .kela-footer__a {
        font-size: 1.75rem;
    }

    .kela-footer__eyebrow {
        font-size: 0.875rem;
    }
}


/* ===== Responsive ===== */

@media (max-width: 1024px) {
    .os-visual {
        grid-template-columns: 1fr;
        gap: 3rem;
        min-height: auto;
    }

    .os-nodes {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    .os-sensors, .os-effectors {
        align-items: center;
    }

    .os-node {
        transform: translateY(20px);
    }

    .os-effectors .os-node {
        transform: translateY(20px);
    }

    .os-core {
        margin: 0 auto;
    }

    .os-canvas {
        display: none;
    }

    .product-row,
    .product-row-reverse {
        grid-template-columns: 1fr;
    }

    .product-row-reverse {
        direction: ltr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .impact-features {
        grid-template-columns: 1fr;
    }

    .footer-top {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* legacy nav-links / nav-hamburger removed */

    .domains-grid {
        grid-template-columns: 1fr;
    }

    .hardware-grid {
        grid-template-columns: 1fr;
    }

    .advantages-grid {
        grid-template-columns: 1fr;
    }

    .investor-logos {
        flex-direction: column;
        gap: 1.5rem;
    }

    .investor-sep {
        width: 32px;
        height: 1px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-badges {
        flex-direction: column;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}


/* ===== Bottom Blur Strip ===== */

.bottom-blur {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
    z-index: 50;
    mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}


/* ===== TOC — Sunday.ai-style right-side pill =====
   Closed: a 36x120 dark glass pill anchored to the right edge of the viewport,
   vertically centered. Inside, vertical fill bars (one per section) sit on
   the right at a FIXED 110px tall area (vertically centered) so they stay
   put visually as the pill expands. The active section's bar is taller
   (22px) and contains a fill that scales vertically with intra-section
   scroll progress (driven by a --progress CSS var written from JS).
   Hovering or focusing the pill expands it leftward to 300x460 and reveals
   a panel of thumbnail+label rows. The pill is hidden until JS adds
   .is-visible (after the user reaches the second section). */
.toc {
    --toc-width-closed: 36px;
    --toc-width-open: 300px;
    --toc-height-closed: 120px;
    --toc-height-open: 460px;
    --toc-bars-h: 110px;
    --toc-fg: #f1f0ee;
    --toc-fg-muted: rgba(241, 240, 238, 0.6);
    --toc-bg: rgba(14, 14, 20, 0.28);
    --toc-bg-open: rgba(14, 14, 20, 0.5);
    --toc-bar-track: rgba(241, 240, 238, 0.32);
    --toc-bar-fill: rgba(255, 255, 255, 1);
    --toc-bar-w: 4px;
    --toc-bar-h-idle: 8px;
    --toc-bar-h-active: 22px;

    position: fixed;
    top: 50%;
    right: clamp(0.75rem, 1.5vw, 1.25rem);
    /* Initial state: parked off-screen right, invisible.
       JS adds .is-visible to slide it into place after the user reaches
       the second section (#problemSolution). */
    transform: translate3d(calc(100% + 1.5vw), -50%, 0);
    opacity: 0;
    z-index: 50;
    width: var(--toc-width-closed);
    height: var(--toc-height-closed);
    overflow: hidden;
    border-radius: 14px;
    background: var(--toc-bg);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--toc-fg);
    /* Glass-morphism: outer drop shadow + inset top/left highlight to mimic
       light catching the rim of real glass + subtle inset bottom shadow */
    box-shadow:
        0 10px 36px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 1px 0 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);
    transition: width 0.36s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.36s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.22s ease-out,
                border-radius 0.36s ease-out,
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.4s ease-out;
}
.toc.is-visible {
    transform: translate3d(0, -50%, 0);
    opacity: 1;
}

/* Bars column — anchored at the pill's vertical center with a FIXED height
   of 110px, so the bars stay in the same screen position regardless of
   whether the pill is collapsed or expanded. */
.toc__bars {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: var(--toc-width-closed);
    height: var(--toc-bars-h);
    margin: 0;
    padding: 6px 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    z-index: 2;
}
.toc__bars > li {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.toc__bar {
    --bar-h: var(--toc-bar-h-idle);
    position: relative;
    display: block;
    width: var(--toc-bar-w);
    height: var(--bar-h);
    padding: 0;
    border: 0;
    background: var(--toc-bar-track);
    border-radius: 999px;
    overflow: hidden;
    cursor: pointer;
    transition: height 0.3s cubic-bezier(0.65, 0, 0.35, 1),
                background 0.2s ease-out;
}
.toc__bar:hover {
    background: rgba(241, 240, 238, 0.32);
}
.toc__bar:focus-visible {
    outline: 2px solid var(--toc-bar-fill);
    outline-offset: 2px;
}
.toc__bar.is-active {
    --bar-h: var(--toc-bar-h-active);
}
.toc__fill {
    --progress: 0;
    position: absolute;
    inset: 0;
    background: var(--toc-bar-fill);
    border-radius: inherit;
    transform-origin: top;
    transform: scaleY(var(--progress));
    transition: transform 0.08s linear;
}

/* Open panel — absolutely positioned to the LEFT of the bars column so it
   doesn't push layout when collapsed. Hidden until open. */
.toc__panel {
    position: absolute;
    top: 0;
    right: var(--toc-width-closed);
    bottom: 0;
    width: calc(var(--toc-width-open) - var(--toc-width-closed));
    padding: 10px 6px 10px 12px;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(8px);
    overflow-y: auto;
    transition: opacity 0.22s ease-out,
                transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.22s;
}
.toc__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 4px;
}
.toc__panel-title {
    margin: 0;
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--toc-fg);
}
.toc__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--toc-fg-muted);
    cursor: pointer;
    transition: background 0.18s ease-out, color 0.18s ease-out;
}
.toc__close:hover {
    background: rgba(241, 240, 238, 0.08);
    color: var(--toc-fg);
}
.toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.toc__item {
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.28s ease-out, transform 0.28s ease-out;
}
.toc__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    transition: background 0.2s ease-out;
}
.toc__link:hover {
    background: rgba(241, 240, 238, 0.06);
}
.toc__thumb {
    flex: 0 0 auto;
    width: 76px;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 5px;
    background: rgba(241, 240, 238, 0.06);
}
.toc__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.toc__labels {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.toc__label-main {
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--toc-fg);
    line-height: 1.2;
}
.toc__label-sub {
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--toc-fg-muted);
    line-height: 1.3;
}

/* Open state — only triggers when the pill has been revealed (.is-visible),
   so hovering before reveal does nothing. Width + height transition smoothly
   to a FIXED open size; bars stay anchored at the pill's vertical center
   (their own .toc__bars { top:50%; transform: translateY(-50%) } pins them). */
.toc.is-visible:hover,
.toc.is-visible:focus-within,
.toc[data-state="open"].is-visible {
    width: var(--toc-width-open);
    height: var(--toc-height-open);
    border-radius: 16px;
    background: var(--toc-bg-open);
}
.toc.is-visible:hover .toc__panel,
.toc.is-visible:focus-within .toc__panel,
.toc[data-state="open"].is-visible .toc__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition: opacity 0.22s ease-out 0.06s,
                transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0s;
}
.toc.is-visible:hover .toc__item,
.toc.is-visible:focus-within .toc__item,
.toc[data-state="open"].is-visible .toc__item {
    opacity: 1;
    transform: translateX(0);
}
/* Stagger the items in */
.toc.is-visible:hover .toc__item:nth-child(1),
.toc.is-visible:focus-within .toc__item:nth-child(1),
.toc[data-state="open"].is-visible .toc__item:nth-child(1) { transition-delay: 0.04s; }
.toc.is-visible:hover .toc__item:nth-child(2),
.toc.is-visible:focus-within .toc__item:nth-child(2),
.toc[data-state="open"].is-visible .toc__item:nth-child(2) { transition-delay: 0.08s; }
.toc.is-visible:hover .toc__item:nth-child(3),
.toc.is-visible:focus-within .toc__item:nth-child(3),
.toc[data-state="open"].is-visible .toc__item:nth-child(3) { transition-delay: 0.12s; }
.toc.is-visible:hover .toc__item:nth-child(4),
.toc.is-visible:focus-within .toc__item:nth-child(4),
.toc[data-state="open"].is-visible .toc__item:nth-child(4) { transition-delay: 0.16s; }
.toc.is-visible:hover .toc__item:nth-child(5),
.toc.is-visible:focus-within .toc__item:nth-child(5),
.toc[data-state="open"].is-visible .toc__item:nth-child(5) { transition-delay: 0.20s; }
.toc.is-visible:hover .toc__item:nth-child(6),
.toc.is-visible:focus-within .toc__item:nth-child(6),
.toc[data-state="open"].is-visible .toc__item:nth-child(6) { transition-delay: 0.24s; }
.toc.is-visible:hover .toc__item:nth-child(7),
.toc.is-visible:focus-within .toc__item:nth-child(7),
.toc[data-state="open"].is-visible .toc__item:nth-child(7) { transition-delay: 0.28s; }

@media (max-width: 900px) {
    .toc { display: none; }
}


/* ===== S5 (mobile) — Hardware accordion =====
   Replaces the sticky scrubbed .s-rd on mobile. Single-open accordion;
   first item expanded by default. */
.s-rd-mobile {
    background: var(--white, #f1f0ee);
    color: #0c0c0c;
    padding: var(--section-pad-mobile) var(--section-side-mobile);
}
.s-rd-mobile__head {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: clamp(2.5rem, 8vw, 3.5rem);
    max-width: 32rem;
}
.s-rd-mobile__eyebrow {
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: var(--mono-eyebrow-mobile);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(12, 12, 12, 0.55);
}
.s-rd-mobile__title {
    font-family: var(--font);
    font-size: var(--display-1-mobile);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.035em;
    margin: 0;
}
.s-rd-mobile__subtitle {
    font-family: var(--font);
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(12, 12, 12, 0.7);
    margin: 0.25rem 0 0;
}

.s-rd-mobile__list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid rgba(12, 12, 12, 0.12);
}
.s-rd-mobile__item {
    border-bottom: 1px solid rgba(12, 12, 12, 0.12);
}

/* Header is a real <button> for keyboard/tap, but visually a row. */
.s-rd-mobile__item-header {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    min-height: 44px;          /* WCAG touch target */
    padding: clamp(1rem, 4vw, 1.25rem) 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(0.75rem, 3vw, 1rem);
    cursor: pointer;
    color: inherit;
    text-align: left;
    font: inherit;
    transition: opacity 0.15s ease, background 0.2s ease;
}
.s-rd-mobile__item-header:active {
    opacity: 0.75;
}
.s-rd-mobile__index {
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: var(--mono-eyebrow-mobile);
    color: var(--m-accent, #ff5841);
    min-width: 1.5em;
    letter-spacing: 0.1em;
}
.s-rd-mobile__heading {
    font-family: var(--font);
    font-size: var(--display-2-mobile);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.05;
}
.s-rd-mobile__chevron {
    width: 16px;
    height: 16px;
    position: relative;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.s-rd-mobile__chevron::before,
.s-rd-mobile__chevron::after {
    content: '';
    position: absolute;
    background: #0c0c0c;
    border-radius: 1px;
}
.s-rd-mobile__chevron::before {
    left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%);
}
.s-rd-mobile__chevron::after {
    top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.s-rd-mobile__item.is-active .s-rd-mobile__chevron::after {
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
}
/* Tap feedback: hint of bg under the row that's currently open. */
.s-rd-mobile__item.is-active .s-rd-mobile__item-header { background: rgba(12, 12, 12, 0.025); }
.s-rd-mobile__item-header:active { background: rgba(12, 12, 12, 0.05); }

/* Collapsed by default; transitions open via max-height + opacity. */
.s-rd-mobile__body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.45s ease, opacity 0.35s ease;
    overflow: hidden;
}
.s-rd-mobile__item.is-active .s-rd-mobile__body {
    grid-template-rows: 1fr;
    opacity: 1;
}
.s-rd-mobile__body > * {
    min-height: 0; /* required to let the grid-row collapse animate cleanly */
}
.s-rd-mobile__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: 0.5rem 0 clamp(1rem, 4vw, 1.5rem);
    background: rgba(12, 12, 12, 0.04);
}
.s-rd-mobile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.s-rd-mobile__desc {
    font-family: var(--font);
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(12, 12, 12, 0.78);
    margin: 0 0 clamp(1rem, 4vw, 1.5rem);
}
.s-rd-mobile__item-header-inner {
    /* (unused -- reserved if you ever want to make headers sticky.) */
}

/* Fallback for browsers that don't support grid-template-rows animation
   (Firefox up to ~117 etc): use max-height. */
@supports not (grid-template-rows: 0fr) {
    .s-rd-mobile__body {
        display: block;
        max-height: 0;
        transition: max-height 0.45s ease, opacity 0.35s ease;
    }
    .s-rd-mobile__item.is-active .s-rd-mobile__body {
        max-height: 600px;
    }
}


/* ===== S6 — PARTNERS (pinned horizontal scroll, white -> black) =====
   Outer wrapper is tall so we have ~1.8 viewports of vertical scroll to drive
   the horizontal sweep. The inner __pin sticks to the viewport while the JS
   timeline translates the .s-partners__track horizontally and crossfades the
   bg color + heading states at progress ~0.5. */
.s-partners {
    position: relative;
    width: 100%;
    height: 280vh;
    color: #1a1a1d;
}
.s-partners__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
.s-partners__bg {
    position: absolute;
    inset: 0;
    background-color: #f5f3ee; /* matches .s-rd hardware section */
    z-index: 0;
    will-change: background-color;
}

/* Side heading: two states stacked, JS crossfades them as bg flips. */
.s-partners__heading {
    position: absolute;
    top: clamp(2.5rem, 5vw, 4.5rem);
    left: clamp(1rem, 4.5vw, 4.25rem);
    z-index: 2;
    pointer-events: none;
    width: clamp(18rem, 38vw, 32rem);
}
.s-partners__heading-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.2vw, 1.25rem);
}
.s-partners__heading-state--light {
    opacity: 1;
}
.s-partners__heading-state--dark {
    opacity: 0;
}
.s-partners__overline {
    margin: 0;
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.s-partners__heading-state--light .s-partners__overline { color: #686868; }
.s-partners__heading-state--dark  .s-partners__overline { color: #b8b8b8; }
.s-partners__title {
    margin: 0;
    font-family: var(--font);
    font-weight: 500;
    font-size: clamp(2rem, 4.6vw, 3.75rem);
    line-height: 1;
    letter-spacing: -0.025em;
    max-width: 14ch;
}
.s-partners__heading-state--light .s-partners__title { color: #1a1a1d; }
.s-partners__heading-state--dark  .s-partners__title { color: #f1f0ee; }

/* Horizontal flex track. 50vw padding lets the first item enter from the right
   edge and the last item fully clear off the left edge. */
.s-partners__track {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0 50vw;
    display: flex;
    align-items: center;
    gap: clamp(2rem, 4vw, 4.5rem);
    height: 100%;
    will-change: transform;
}
.s-partners__item {
    flex: 0 0 auto;
    width: clamp(240px, 22vw, 360px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.875rem, 1.2vw, 1.25rem);
}
.s-partners__logo {
    width: 100%;
    aspect-ratio: 16 / 7;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.s-partners__logo img {
    max-width: 75%;
    max-height: 70%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    /* Logos default to a monochrome black silhouette (cream background).
       Color is driven by the section background state, not per-logo: once the
       bg flips to dark (.is-dark, toggled in JS), EVERY logo turns white so no
       logo disappears into the dark and leaves a gap. */
    filter: brightness(0) saturate(0);
    opacity: 0.9;
    transition: opacity 0.3s ease, filter 0.3s ease;
}
/* Dark background state: invert(1) turns the black silhouette into pure white. */
.s-partners.is-dark .s-partners__logo img {
    filter: brightness(0) saturate(0) invert(1);
}
/* Opt-out: logos marked data-keep-color render in their original artwork
   (e.g. the In-Q-Tel seal, where the multi-colour design carries meaning). */
.s-partners__item[data-keep-color] .s-partners__logo img,
.s-partners.is-dark .s-partners__item[data-keep-color] .s-partners__logo img {
    filter: none;
    opacity: 1;
}
.s-partners__caption {
    margin: 0;
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: clamp(0.75rem, 0.9vw, 0.85rem);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.s-partners__item[data-side="light"] { color: #686868; }
.s-partners__item[data-side="dark"]  { color: #b8b8b8; }

/* Mobile + reduced-motion fallback: drop the pin and lay the boxes out as a
   simple wrapping grid so we don't hijack scroll on touch devices. */
@media (max-width: 900px) {
    .s-partners {
        height: auto;
        background: #f5f3ee;
        padding: clamp(3.5rem, 11vw, 6rem) clamp(1.25rem, 5vw, 2rem);
    }
    .s-partners__overline {
        font-size: 0.7rem;
        letter-spacing: 0.2em;
    }
    .s-partners__title {
        font-size: clamp(2.5rem, 10vw, 3.5rem);
        max-width: 12ch;
    }
    .s-partners__pin {
        position: static;
        height: auto;
        overflow: visible;
    }
    .s-partners__bg { display: none; }
    .s-partners__heading {
        position: relative;
        inset: auto;
        top: auto;
        left: auto;
        width: 100%;
        margin-bottom: clamp(2rem, 5vw, 3rem);
        height: auto;
    }
    .s-partners__heading-state {
        position: relative;
        inset: auto;
        opacity: 1;
    }
    .s-partners__heading-state--dark { display: none; }
    .s-partners__track {
        padding: 0;
        flex-wrap: wrap;
        gap: clamp(1.5rem, 4vw, 2.5rem);
        height: auto;
    }
    .s-partners__item {
        width: calc(50% - 1rem);
    }
    .s-partners__item[data-side="dark"] { color: #686868; }
    /* The mobile bg is forced to light cream, so every logo renders as a
       black silhouette regardless of its desktop-side flag (otherwise the
       4 dark-side logos stay inverted to white and disappear on cream). */
    .s-partners__item[data-side="dark"] .s-partners__logo img {
        filter: brightness(0) saturate(0);
    }
    /* data-keep-color still wins (IQT mark stays in native colors). */
    .s-partners__item[data-keep-color] .s-partners__logo img {
        filter: none;
    }
}
/* Very small phones: drop partners to a single column so each logo gets
   enough horizontal space to read clearly. */
@media (max-width: 480px) {
    .s-partners__item {
        width: 100%;
    }
    .s-partners__logo img {
        max-width: 60%;
        max-height: 60%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .s-partners {
        height: auto;
        background: #f5f3ee;
        padding: clamp(3rem, 9vw, 6rem) clamp(1rem, 4.5vw, 4.25rem);
    }
    .s-partners__pin {
        position: static;
        height: auto;
        overflow: visible;
    }
    .s-partners__bg { display: none; }
    .s-partners__heading {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin-bottom: clamp(2rem, 5vw, 3rem);
        height: auto;
    }
    .s-partners__heading-state { position: relative; inset: auto; opacity: 1; }
    .s-partners__heading-state--dark { display: none; }
    .s-partners__track {
        padding: 0;
        flex-wrap: wrap;
        gap: clamp(1.5rem, 4vw, 2.5rem);
        height: auto;
    }
    .s-partners__item { width: clamp(240px, 30vw, 360px); }
    .s-partners__item[data-side="dark"] { color: #686868; }
}


/* ===== S8 — JOIN THE BUILDERS (final CTA above the footer) =====

   3-column dark CTA section. Left holds the headline, center holds the
   Kela diamond with a STACK of heavily-blurred horizontal "godrays"
   that translate vertically as the user scrolls. Right holds the
   description + Let's Talk CTA button.

   The rays sit ABOVE the diamond (z-index 3 > diamond's 2), so as the
   stack slides down through the SVG, the white blurred bars overpaint
   the white silhouette underneath. ScrollTrigger drives the rays group
   from yPercent: -60 (above) to +60 (below) across the whole section's
   scroll window. */

.s-join {
    position: relative;
    background: var(--gray-950); /* matches the body bg (and the dark state of #partners) */
    color: #fff;
    min-height: clamp(560px, 92vh, 900px);
    padding: clamp(3rem, 7vh, 6rem) 0;
    overflow: hidden;
}


.s-join__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 0;                       /* zero gap so column dividers sit flush */
    width: 100%;                  /* FULL viewport width — no max-width and
                                     no outer padding, so the column borders
                                     and the title/desc block borders reach
                                     all the way to the viewport edges. */
    min-height: inherit;
}

.s-join__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* No padding on the column. Horizontal whitespace is provided by
       the title-block / desc-block themselves so their borders extend
       across the entire column width (edge-to-divider). */
}
.s-join__col--left   { justify-content: flex-start; align-items: flex-start; border-right: 1px solid rgba(255,255,255,0.15); }
.s-join__col--center { justify-content: center;     align-items: center;     border-right: 1px solid rgba(255,255,255,0.15); }
.s-join__col--right  { justify-content: flex-end;   align-items: flex-end;   text-align: right; }

/* Title block: anchored to the top of the left column, with a partial
   horizontal divider below it. Horizontal padding lives INSIDE the block
   (not on the column) so the border-bottom extends all the way from the
   viewport's left edge to the column-right vertical divider. */
.s-join__title-block {
    display: flex;
    flex-direction: column;
    gap: clamp(0.6rem, 1.2vh, 1rem);
    padding: 0 clamp(1.5rem, 3vw, 3rem) clamp(1.25rem, 2.5vh, 2rem);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    width: 100%;
}

/* Description block: anchored to the bottom of the right column. Same
   "padding inside the block" trick so its border-top spans from the
   column-left vertical divider to the viewport's right edge. */
.s-join__desc-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: clamp(0.85rem, 1.5vh, 1.1rem);
    padding: clamp(1.25rem, 2.5vh, 2rem) clamp(1.5rem, 3vw, 3rem) 0;
    border-top: 1px solid rgba(255,255,255,0.15);
    width: 100%;
}

.s-join__eyebrow {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}

.s-join__title {
    font-family: var(--font);
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0;
}

.s-join__desc {
    font-family: var(--font);
    font-size: clamp(0.65rem, 0.75vw, 0.78rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    max-width: 22ch;
    margin: 0;
}

.s-join__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: #fff;
    color: #0c0c0c;
    padding: 0.85rem 1.4rem;
    text-decoration: none;
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    border-radius: 0;
    transition: background 0.3s ease, transform 0.3s ease;
}
.s-join__cta:hover { background: #f0f0f0; transform: translateX(2px); }
.s-join__cta-arrow {
    display: inline-flex;
    align-items: center;
    width: 13px;
    height: 11px;
    transition: transform 0.3s ease;
}
.s-join__cta-arrow svg { width: 100%; height: 100%; }
.s-join__cta:hover .s-join__cta-arrow { transform: translateX(3px); }

/* Stage holds the diamond + shader canvas. isolation creates a stacking
   context so the canvas z-index is local to this card. */
.s-join__stage {
    position: relative;
    width: clamp(320px, 42vw, 560px);
    aspect-ratio: 1;
    isolation: isolate;
}
.s-join__diamond {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
}

/* Shader canvas: fills the diamond stage. The shaders.com runtime mounts
   its WebGL composition here (Glass + FallingLines + Pixelate + Dither +
   ReflectivePlane). When the shader paints its first frame, JS adds
   .has-shader to the stage which hides the SVG fallback underneath. */
.s-join__shader {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: block;
    pointer-events: none;
}
.s-join__stage.has-shader .s-join__diamond { visibility: hidden; }

/* One-shot entry choreography for the text + CTA. The shader handles
   its own animation independently. */
.s-join__eyebrow, .s-join__title, .s-join__desc, .s-join__cta {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.s-join.is-visible .s-join__eyebrow { transition-delay: 0.05s; opacity: 1; transform: none; }
.s-join.is-visible .s-join__title   { transition-delay: 0.18s; opacity: 1; transform: none; }
.s-join.is-visible .s-join__desc    { transition-delay: 0.35s; opacity: 1; transform: none; }
.s-join.is-visible .s-join__cta     { transition-delay: 0.50s; opacity: 1; transform: none; }

/* Mobile fallback */
@media (max-width: 900px) {
    .s-join { min-height: auto; padding: clamp(3.5rem, 9vw, 5.5rem) 0; }
    .s-join__inner { grid-template-columns: 1fr; gap: clamp(1.75rem, 6vw, 2.75rem); }
    /* Drop the column dividers on mobile — single column stack. Block
       borders (title-bottom / desc-top) stay since they still read well
       as in-column separators. */
    .s-join__col--left,
    .s-join__col--center { border-right: none; }
    .s-join__col--left   { align-items: center; text-align: center; }
    .s-join__col--center { order: 0; }
    .s-join__col--right  { align-items: center; text-align: center; }
    .s-join__title-block { align-items: center; }
    .s-join__desc-block  { align-items: center; }     /* override desktop flex-end */
    .s-join__desc        { text-align: center; }
    .s-join__title       { text-align: center; }
    .s-join__stage       { width: min(280px, 70vw); }
}

@media (prefers-reduced-motion: reduce) {
    .s-join__eyebrow, .s-join__title, .s-join__desc, .s-join__cta {
        opacity: 1; transform: none; transition: none;
    }
}


/* ===== Reduced motion ===== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}


/* ============================================
   PRODUCT FAMILY PAGES (giga.ai-inspired)
   Cinematic full-bleed hero, airy light content,
   big-number stats, sticky-scroll feature reveal,
   dark spotlight stat band, centered closing CTA.
   Keeps the Kela nav / loader / footer chrome.
   ============================================ */

.pf-page { background: #f5f2ec; }

/* --- Shared pill buttons --- */
.pf-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.65rem;
    border-radius: 999px;
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    transition: transform 0.35s var(--motion-ease-out), background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    will-change: transform;
}
.pf-btn:hover { transform: translateY(-2px); }
.pf-btn--light { background: #ffffff; color: #0b0b0a; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22); }
.pf-btn--light:hover { box-shadow: 0 16px 44px rgba(0, 0, 0, 0.30); }
.pf-btn--dark { background: #0b0b0a; color: #ffffff; }
.pf-btn--dark:hover { background: #232323; }
.pf-btn--ghost { background: transparent; color: inherit; border: 1px solid currentColor; opacity: 0.85; }
.pf-btn--ghost:hover { opacity: 1; }
.pf-hero .pf-btn--ghost { color: #ffffff; }
.pf-btn__arrow { width: 13px; height: 11px; display: inline-block; }
.pf-btn__arrow svg { width: 100%; height: 100%; display: block; }

/* --- Hero pill badge --- */
.pf-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff;
}
.pf-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #00d4aa); }

/* ===== HERO — full-bleed cinematic, centered ===== */
.pf-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background: #0a0a0a;
}
.pf-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.pf-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 50% 38%, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.42) 58%, rgba(0,0,0,0.72) 100%),
        linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.08) 32%, rgba(0,0,0,0.55) 100%);
}
.pf-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 62rem;
    padding: clamp(6rem, 12vh, 9rem) clamp(1.5rem, 5vw, 2rem) clamp(3rem, 8vh, 5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.25rem, 2.4vw, 1.75rem);
}
.pf-hero__title {
    margin: 0;
    color: #ffffff;
    font-family: var(--font);
    font-weight: 400;
    font-size: clamp(2.25rem, 5.2vw, 4.5rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-wrap: balance;
}
.pf-hero__sub {
    margin: 0;
    max-width: 36rem;
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--font);
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.5;
    letter-spacing: -0.01em;
}
.pf-hero__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
}
.pf-hero__scroll-cue {
    position: absolute;
    left: 50%;
    bottom: clamp(1.25rem, 4vh, 2.25rem);
    transform: translateX(-50%);
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.pf-hero__scroll-cue::after {
    content: '';
    width: 1px;
    height: 32px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
    animation: pfCue 2s ease-in-out infinite;
}
@keyframes pfCue { 0%, 100% { opacity: 0.3; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* Hero entrance */
.pf-hero__inner > * {
    opacity: 0;
    transform: translateY(20px);
    animation: pfRise 1s var(--motion-ease-out) forwards;
}
.pf-hero__inner > *:nth-child(1) { animation-delay: 0.35s; }
.pf-hero__inner > *:nth-child(2) { animation-delay: 0.45s; }
.pf-hero__inner > *:nth-child(3) { animation-delay: 0.55s; }
.pf-hero__inner > *:nth-child(4) { animation-delay: 0.65s; }
@keyframes pfRise { to { opacity: 1; transform: none; } }

/* ===== INTRO / OVERVIEW (light: lead paragraph + metadata) ===== */
.pf-intro {
    position: relative;
    background: #f5f2ec;
    color: #0b0b0a;
    padding: clamp(5rem, 11vw, 9rem) clamp(1.5rem, 4vw, 3rem);
}
.pf-intro__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 900px) {
    .pf-intro__inner {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
        gap: clamp(3rem, 6vw, 6rem);
        align-items: start;
    }
}
.pf-intro__eyebrow { display: block; margin-bottom: clamp(1.25rem, 2vw, 1.75rem); color: rgba(11, 11, 10, 0.5); }
.pf-intro__lead {
    margin: 0;
    font-family: var(--font);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.8vw, 2.5rem);
    line-height: 1.28;
    letter-spacing: -0.025em;
    color: #0b0b0a;
}
.pf-intro__lead strong { font-weight: 600; }

.pf-meta { display: flex; flex-direction: column; border-top: 1px solid rgba(11, 11, 10, 0.14); }
.pf-meta__row {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 1rem;
    padding: clamp(0.85rem, 1.4vw, 1.15rem) 0;
    border-bottom: 1px solid rgba(11, 11, 10, 0.14);
}
.pf-meta__key {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(11, 11, 10, 0.5);
    padding-top: 0.2em;
}
.pf-meta__val {
    font-family: var(--font);
    font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: #0b0b0a;
}

/* ===== COUNTER INTRUSION — Figma hero + overview ===== */
.ci-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1512 / 357;
    min-height: 280px;
    max-height: 80vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #0a0a0a;
}
.ci-hero__media { position: absolute; inset: 0; z-index: 0; }
.ci-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
}
.ci-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to bottom,
            rgba(0,0,0,0.45) 0%,
            rgba(0,0,0,0.06) 24%,
            rgba(0,0,0,0) 55%,
            rgba(0,0,0,0.42) 100%);
}
.ci-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(2.5rem, 7vh, 5.5rem) clamp(1.5rem, 5vw, 4rem);
}
.ci-hero__title {
    margin: 0;
    color: #ffffff;
    font-family: var(--font);
    font-weight: 400;
    font-size: clamp(2.75rem, 8vw, 6.25rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    text-wrap: balance;
    opacity: 0;
    transform: translateY(24px);
    animation: pfRise 1s var(--motion-ease-out) 0.35s forwards;
}

.ci-overview {
    background: #c4bbb0;
    color: #1c1c1c;
    border-bottom: 1px solid #e4e4e4;
    padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem) clamp(4rem, 8vw, 7rem);
}
.ci-overview__inner { max-width: 1260px; margin: 0 auto; }
.ci-overview__lead-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: clamp(1rem, 2vw, 1.75rem);
    align-items: center;
    min-height: clamp(170px, 20vw, 276px);
}
.ci-overview__mark {
    grid-column: 1 / span 3;
    color: #c9c1b7;
}
.ci-overview__mark svg { display: block; width: 100%; height: auto; }
.ci-overview__lead {
    grid-column: 6 / span 7;
    margin: 0;
    font-family: var(--font);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.55vw, 2.25rem);
    line-height: 1.24;
    letter-spacing: -0.03em;
    color: #111111;
}
.ci-overview__rule {
    border: 0;
    height: 1px;
    background: rgba(28, 28, 28, 0.32);
    margin: clamp(2.5rem, 5vw, 4.25rem) 0 0;
}
.ci-overview__detail-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: clamp(1rem, 2vw, 1.75rem);
    align-items: stretch;
    padding-top: clamp(2.25rem, 3.5vw, 3rem);
}
.ci-overview__detail-row::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 33.333%;
    width: 1px;
    background: rgba(28, 28, 28, 0.32);
}
.ci-overview__aside {
    grid-column: 1 / span 3;
    display: flex;
    flex-direction: column;
}
.ci-overview__eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(28, 28, 28, 0.7);
}
.ci-overview__note {
    margin: auto 0 0;
    max-width: 17.5rem;
    font-family: var(--font);
    font-size: 0.9375rem;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: rgba(28, 28, 28, 0.85);
}
.ci-overview__figure {
    grid-column: 5 / span 8;
    aspect-ratio: 836 / 471;
    overflow: hidden;
}
.ci-overview__figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .ci-hero { aspect-ratio: 16 / 11; max-height: none; }
    .ci-hero__title { font-size: clamp(2.5rem, 13vw, 4rem); }
    .ci-overview__lead-row {
        grid-template-columns: 1fr;
        row-gap: clamp(1.5rem, 6vw, 2.25rem);
        min-height: 0;
    }
    .ci-overview__mark { grid-column: 1; width: 58%; max-width: 240px; }
    .ci-overview__lead { grid-column: 1; }
    .ci-overview__detail-row {
        grid-template-columns: 1fr;
        row-gap: clamp(2rem, 7vw, 2.75rem);
    }
    .ci-overview__detail-row::before { display: none; }
    .ci-overview__aside,
    .ci-overview__figure { grid-column: 1; }
    .ci-overview__note { margin: 1.25rem 0 0; max-width: 30rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ci-hero__title { animation: none; opacity: 1; transform: none; }
}

/* ===== COUNTER INTRUSION — use-case tabs ===== */
.ci-uses {
    background: #000000;
    color: #ffffff;
    border-bottom: 1px solid rgba(228, 228, 228, 0.16);
}
.ci-uses__grid {
    display: grid;
    grid-template-columns: minmax(0, 45.7%) minmax(0, 54.3%);
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "tl    title"
        "tabs  ."
        "media panel";
}
.ci-uses__title-spacer { grid-area: tl; }
.ci-uses__title-cell { grid-area: title; }
.ci-uses__tabs { grid-area: tabs; }
.ci-uses__media { grid-area: media; }
.ci-uses__panels { grid-area: panel; }

/* Dividers: vertical line down the left column, full-width line under the title row */
.ci-uses__title-spacer,
.ci-uses__tabs,
.ci-uses__media { border-right: 1px solid rgba(228, 228, 228, 0.16); }
.ci-uses__title-spacer,
.ci-uses__title-cell { border-bottom: 1px solid rgba(228, 228, 228, 0.16); }

.ci-uses__title-cell {
    display: flex;
    align-items: flex-end;
    min-height: clamp(150px, 21vw, 320px);
    padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem) clamp(1.75rem, 3vw, 2.75rem) clamp(2rem, 4.5vw, 4.5rem);
}
.ci-uses__title {
    margin: 0;
    font-family: var(--font);
    font-weight: 400;
    font-size: clamp(2.25rem, 5vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: #ffffff;
}

.ci-uses__tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: clamp(56px, 5.5vw, 68px);
}
.ci-uses__tab {
    appearance: none;
    min-width: 0;
    border: 0;
    border-right: 1px solid rgba(228, 228, 228, 0.16);
    background: transparent;
    color: #ffffff;
    font-family: var(--font);
    font-size: clamp(0.8125rem, 1.05vw, 1rem);
    letter-spacing: -0.03em;
    line-height: 1.2;
    text-align: center;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.ci-uses__tab:last-child { border-right: 0; }
.ci-uses__tab:hover { background: rgba(255, 255, 255, 0.06); }
.ci-uses__tab.is-active {
    background: #ffffff;
    color: #000000;
}
.ci-uses__tab:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -4px;
}

.ci-uses__media {
    position: relative;
    overflow: hidden;
    min-height: clamp(260px, 30vw, 446px);
}
.ci-uses__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

.ci-uses__panels {
    padding: clamp(2rem, 3.5vw, 2.75rem) clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4.5vw, 4.5rem);
}
.ci-uses__panel { display: none; }
.ci-uses__panel.is-active { display: block; }
.ci-uses__panel[hidden] { display: none; }
.ci-uses__desc {
    margin: 0;
    max-width: 38ch;
    font-family: var(--font);
    font-weight: 400;
    font-size: clamp(1.05rem, 1.55vw, 1.5rem);
    line-height: 1.24;
    letter-spacing: -0.03em;
    color: #ffffff;
}
.ci-uses__panel.is-active .ci-uses__desc {
    animation: pfRise 0.55s var(--motion-ease-out);
}

@media (max-width: 768px) {
    .ci-uses__grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "tabs"
            "media"
            "panel";
    }
    .ci-uses__title-spacer { display: none; }
    .ci-uses__title-cell,
    .ci-uses__tabs,
    .ci-uses__media { border-right: 0; }
    .ci-uses__title-cell {
        min-height: 0;
        border-bottom: 1px solid rgba(228, 228, 228, 0.16);
    }
    .ci-uses__tab {
        font-size: 0.8125rem;
        padding: 0.5rem 0.4rem;
    }
    .ci-uses__media { min-height: clamp(220px, 60vw, 360px); }
    .ci-uses__desc { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ci-uses__panel.is-active .ci-uses__desc { animation: none; }
}

/* ===== COUNTER INTRUSION — Detect-to-Engage (Sense / Think / Act) pull-up slider ===== */
.ci-flow {
    background: #000000;
    color: #ffffff;
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 6vw, 5.5rem);
}
.ci-flow__inner { width: 100%; }
.ci-flow__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
}
.ci-flow__title {
    margin: 0;
    max-width: 26ch;
    font-family: var(--font);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.9vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #ffffff;
}
.ci-flow__controls { display: flex; gap: 0.6rem; flex-shrink: 0; }
.ci-flow__arrow {
    width: clamp(42px, 4vw, 52px);
    height: clamp(42px, 4vw, 52px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.25s ease, opacity 0.25s ease, border-color 0.25s ease;
}
.ci-flow__arrow:hover { background: rgba(255, 255, 255, 0.16); }
.ci-flow__arrow svg { width: 40%; height: 40%; display: block; }
.ci-flow__arrow:disabled { opacity: 0.28; cursor: default; }
.ci-flow__arrow:disabled:hover { background: rgba(255, 255, 255, 0.06); }

.ci-flow__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% / 3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ci-flow__track::-webkit-scrollbar { display: none; }
.ci-flow__item {
    scroll-snap-align: start;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    min-height: clamp(360px, 42vw, 500px);
    padding: clamp(1.75rem, 2.6vw, 2.75rem) clamp(1.5rem, 5vw, 4rem) clamp(2.5rem, 4vw, 3.5rem);
    display: flex;
    flex-direction: column;
}
.ci-flow__item:last-child { border-right: 0; }
.ci-flow__item-icon {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    padding: clamp(0.75rem, 2vw, 1.5rem) 0 clamp(2rem, 4vw, 3.25rem);
}
.ci-flow__item-icon svg { width: clamp(92px, 11vw, 148px); height: auto; display: block; }
.ci-flow__item-title {
    margin: 0 0 0.6rem;
    font-family: var(--font);
    font-weight: 400;
    font-size: clamp(1.15rem, 1.5vw, 1.5rem);
    letter-spacing: -0.02em;
    color: #ffffff;
}
.ci-flow__item-desc {
    margin: 0;
    max-width: 34ch;
    font-family: var(--font-mono);
    font-size: clamp(0.62rem, 0.8vw, 0.72rem);
    line-height: 1.55;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 900px) {
    .ci-flow__track { grid-auto-columns: 60%; }
}
@media (max-width: 768px) {
    .ci-flow__head { align-items: flex-start; }
    .ci-flow__track { grid-auto-columns: 82%; }
    .ci-flow__item { min-height: clamp(300px, 86vw, 400px); }
}

/* ===== STATS BAND (dark, big numbers) ===== */
.pf-stats {
    background: #0b0b0a;
    color: #ffffff;
    padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 4vw, 3rem);
}
.pf-stats__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 760px) { .pf-stats__inner { grid-template-columns: repeat(3, 1fr); } }
.pf-stat { display: flex; flex-direction: column; gap: 0.6rem; }
.pf-stat__num {
    font-family: var(--font);
    font-weight: 300;
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: #ffffff;
}
.pf-stat__label {
    font-family: var(--font);
    font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
    max-width: 18rem;
}

/* ===== STICKY-SCROLL FEATURE REVEAL ===== */
.pf-scroll {
    background: #f5f2ec;
    color: #0b0b0a;
    padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 4vw, 3rem) clamp(5rem, 9vw, 8rem);
}
.pf-scroll__head { max-width: 1200px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.pf-scroll__eyebrow { display: block; margin-bottom: 1rem; color: rgba(11, 11, 10, 0.5); }
.pf-scroll__title {
    margin: 0;
    max-width: 22ch;
    font-family: var(--font);
    font-weight: 500;
    font-size: clamp(1.9rem, 3.6vw, 3.25rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
}
.pf-scroll__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 900px) {
    .pf-scroll__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
    .pf-scroll--reverse .pf-scroll__media { order: -1; }
}

/* Sticky media column (desktop) / hidden on mobile (steps carry inline media) */
.pf-scroll__media {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background: #ddd6c8;
    aspect-ratio: 1 / 1;
}
@media (max-width: 899px) { .pf-scroll__media { display: none; } }
@media (min-width: 900px) {
    .pf-scroll__media { position: sticky; top: clamp(5rem, 12vh, 8rem); }
}
.pf-scroll__media-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.6s var(--motion-ease), transform 0.9s var(--motion-ease);
}
.pf-scroll__media-item.is-active { opacity: 1; transform: scale(1); }
.pf-scroll__media-item img,
.pf-scroll__media-item video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Steps */
.pf-scroll__steps { display: flex; flex-direction: column; }
.pf-step {
    padding: clamp(2rem, 4vw, 3.5rem) 0;
    border-top: 1px solid rgba(11, 11, 10, 0.14);
    transition: opacity 0.4s ease;
}
.pf-step:first-child { border-top: 0; }
@media (min-width: 900px) {
    .pf-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.38; }
    .pf-step.is-active { opacity: 1; }
}
.pf-step__index {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(11, 11, 10, 0.5);
}
.pf-step__index::before { content: ''; width: 1.75rem; height: 1px; background: currentColor; opacity: 0.5; }
.pf-step__title {
    margin: 0 0 1rem;
    font-family: var(--font);
    font-weight: 500;
    font-size: clamp(1.6rem, 2.6vw, 2.25rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}
.pf-step__desc {
    margin: 0;
    max-width: 34rem;
    font-family: var(--font);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.6;
    color: rgba(11, 11, 10, 0.68);
}
.pf-step__media { margin-top: 1.5rem; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 10; }
.pf-step__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) { .pf-step__media { display: none; } }

/* ===== SPOTLIGHT — dark cinematic stat band ===== */
.pf-spotlight {
    position: relative;
    overflow: hidden;
    background: #0a0a0a;
    color: #ffffff;
    padding: clamp(5rem, 12vw, 9rem) clamp(1.5rem, 4vw, 3rem);
    text-align: center;
}
.pf-spotlight__media { position: absolute; inset: 0; z-index: 0; }
.pf-spotlight__media img,
.pf-spotlight__media video { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.pf-spotlight__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(100% 100% at 50% 50%, rgba(0,0,0,0.2), rgba(0,0,0,0.72));
}
.pf-spotlight__inner {
    position: relative;
    z-index: 2;
    max-width: 50rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}
.pf-spotlight__num {
    font-family: var(--font);
    font-weight: 300;
    font-size: clamp(4rem, 12vw, 9rem);
    line-height: 0.9;
    letter-spacing: -0.05em;
}
.pf-spotlight__text {
    margin: 0;
    max-width: 38rem;
    font-family: var(--font);
    font-size: clamp(1.15rem, 1.8vw, 1.6rem);
    line-height: 1.4;
    letter-spacing: -0.015em;
    color: rgba(255, 255, 255, 0.85);
}

/* ===== CLOSING CTA (centered, giga-style) ===== */
.pf-cta {
    background: #f5f2ec;
    color: #0b0b0a;
    padding: clamp(5rem, 12vw, 9rem) clamp(1.5rem, 4vw, 3rem);
    text-align: center;
}
.pf-cta__inner {
    max-width: 44rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.pf-cta__title {
    margin: 0;
    font-family: var(--font);
    font-weight: 500;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}
.pf-cta__desc {
    margin: 0;
    max-width: 34rem;
    font-family: var(--font);
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.5;
    color: rgba(11, 11, 10, 0.65);
}
.pf-cta__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
    .pf-hero__inner > * { animation: none; opacity: 1; transform: none; }
    .pf-hero__scroll-cue::after { animation: none; }
    .pf-scroll__media-item { transition: none; }
}

/* ============================================
   AIR DEFENSE — Anduril "Seapower"-style layout
   Oversized editorial manifesto, full-bleed
   alternating feature blocks, family-of-systems
   card rail, cinematic close. Reuses Kela chrome.
   ============================================ */

/* --- Shared rule-prefixed eyebrow --- */
.ad-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.ad-eyebrow::before {
    content: '';
    width: 1.75rem;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

/* ===== MANIFESTO — giant statement + inline proof ===== */
.ad-manifesto {
    background: #f5f2ec;
    color: #0b0b0a;
    padding: clamp(5.5rem, 13vw, 11rem) clamp(1.5rem, 5vw, 4rem);
}
.ad-manifesto__inner { max-width: 1320px; margin: 0 auto; }
.ad-manifesto__eyebrow { color: rgba(11, 11, 10, 0.55); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.ad-manifesto__title {
    margin: 0;
    max-width: 20ch;
    font-family: var(--font);
    font-weight: 400;
    font-size: clamp(2.3rem, 6.2vw, 5.75rem);
    line-height: 1.0;
    letter-spacing: -0.04em;
    text-wrap: balance;
}
.ad-manifesto__title em { font-style: normal; color: rgba(11, 11, 10, 0.4); }
.ad-manifesto__foot {
    margin-top: clamp(2.75rem, 5vw, 4.5rem);
    padding-top: clamp(2rem, 3vw, 2.75rem);
    border-top: 1px solid rgba(11, 11, 10, 0.16);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 900px) {
    .ad-manifesto__foot {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        gap: clamp(3rem, 7vw, 7rem);
        align-items: start;
    }
}
.ad-manifesto__lead {
    margin: 0;
    font-family: var(--font);
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: rgba(11, 11, 10, 0.7);
}
.ad-manifesto__stats { display: flex; flex-direction: column; }
.ad-manifesto__stat {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: clamp(0.9rem, 1.5vw, 1.15rem) 0;
    border-top: 1px solid rgba(11, 11, 10, 0.16);
}
.ad-manifesto__stat:first-child { border-top: 0; padding-top: 0; }
.ad-manifesto__stat-num {
    font-family: var(--font);
    font-weight: 300;
    font-size: clamp(2.1rem, 3.6vw, 3rem);
    line-height: 1;
    letter-spacing: -0.035em;
}
.ad-manifesto__stat-label {
    font-family: var(--font);
    font-size: 0.95rem;
    line-height: 1.4;
    color: rgba(11, 11, 10, 0.6);
}

/* ===== SHOWCASE — full-bleed alternating feature blocks ===== */
.ad-showcase { background: #0a0a0a; color: #ffffff; }
.ad-showcase__row {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.ad-showcase__row:first-child { border-top: 0; }
@media (min-width: 960px) {
    .ad-showcase__row { grid-template-columns: 1fr 1fr; align-items: stretch; }
    .ad-showcase__row--reverse .ad-showcase__media { order: 2; }
    .ad-showcase__row--reverse .ad-showcase__body { border-left: 0; border-right: 1px solid rgba(255, 255, 255, 0.12); }
}
.ad-showcase__media {
    position: relative;
    overflow: hidden;
    min-height: clamp(300px, 56vw, 660px);
    background: #111111;
}
.ad-showcase__media img,
.ad-showcase__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ad-showcase__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.75rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5rem);
}
@media (min-width: 960px) { .ad-showcase__body { border-left: 1px solid rgba(255, 255, 255, 0.12); } }
.ad-showcase__index {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.ad-showcase__title {
    margin: 0 0 1.1rem;
    font-family: var(--font);
    font-weight: 400;
    font-size: clamp(1.8rem, 3.2vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}
.ad-showcase__desc {
    margin: 0;
    max-width: 44ch;
    font-family: var(--font);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.66);
}
.ad-showcase__list {
    list-style: none;
    margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.ad-showcase__list li {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    padding: 0.85rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--font);
    font-size: 0.975rem;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.82);
}
.ad-showcase__list li::before {
    content: '';
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    margin-top: 0.5em;
    border-radius: 50%;
    background: var(--accent, #00d4aa);
}

/* ===== FAMILY OF SYSTEMS — horizontal card rail ===== */
.ad-family { background: #f5f2ec; color: #0b0b0a; padding: clamp(4.5rem, 9vw, 8rem) 0; }
.ad-family__head {
    max-width: 1320px;
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
    padding: 0 clamp(1.5rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
}
.ad-family__eyebrow { color: rgba(11, 11, 10, 0.55); }
.ad-family__title {
    margin: 0;
    max-width: 22ch;
    font-family: var(--font);
    font-weight: 400;
    font-size: clamp(1.9rem, 4vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
}
.ad-family__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(80%, 80%);
    gap: clamp(1rem, 1.6vw, 1.5rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding: 0 clamp(1.5rem, 5vw, 4rem);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ad-family__rail::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .ad-family__rail { grid-auto-columns: minmax(46%, 46%); } }
@media (min-width: 1000px) { .ad-family__rail { grid-auto-columns: minmax(30.5%, 30.5%); } }
.ad-card {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid rgba(11, 11, 10, 0.1);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s var(--motion-ease-out), box-shadow 0.4s ease;
    will-change: transform;
}
.ad-card:hover { transform: translateY(-4px); box-shadow: 0 22px 54px rgba(0, 0, 0, 0.14); }
.ad-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: #ddd6c8; }
.ad-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--motion-ease); }
.ad-card:hover .ad-card__media img { transform: scale(1.05); }
.ad-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: clamp(1.5rem, 2.2vw, 2rem);
}
.ad-card__cat {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(11, 11, 10, 0.5);
}
.ad-card__name {
    margin: 0;
    font-family: var(--font);
    font-weight: 500;
    font-size: clamp(1.25rem, 1.8vw, 1.6rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.ad-card__desc {
    margin: 0;
    font-family: var(--font);
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(11, 11, 10, 0.62);
}
.ad-card__arrow {
    margin-top: auto;
    padding-top: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0b0b0a;
}
.ad-card__arrow svg { width: 14px; height: 11px; display: block; transition: transform 0.3s ease; }
.ad-card:hover .ad-card__arrow svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
    .ad-card,
    .ad-card__media img,
    .ad-card__arrow svg { transition: none; }
}


/* ============================================
   AUTONOMY — capability / fleet / payload grids
   Bracket-corner cards on light or dark sections.
   Used by autonomy.html (Anduril-style structure).
   ============================================ */
.au-section {
    padding: clamp(4.5rem, 10vw, 8.5rem) clamp(1.5rem, 5vw, 4rem);
}
.au-section--dark { background: #0a0a0a; color: #ffffff; }
.au-section--light { background: #f5f2ec; color: #0b0b0a; }
.au-section__inner { max-width: 1320px; margin: 0 auto; }

.au-section__head { max-width: 60ch; margin-bottom: clamp(2.75rem, 5vw, 4.5rem); }
.au-section__eyebrow { color: inherit; opacity: 0.6; }
.au-section__title {
    margin: clamp(1.25rem, 2.5vw, 1.85rem) 0 0;
    max-width: 22ch;
    font-family: var(--font);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.8vw, 3.1rem);
    line-height: 1.06;
    letter-spacing: -0.035em;
    text-wrap: balance;
}
.au-section__lead {
    margin: clamp(1rem, 1.8vw, 1.5rem) 0 0;
    font-family: var(--font);
    font-size: clamp(1.02rem, 1.4vw, 1.2rem);
    line-height: 1.55;
    letter-spacing: -0.01em;
    opacity: 0.66;
}

/* Card grids */
.au-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(0.85rem, 1.4vw, 1.15rem);
}
.au-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.au-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.au-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.5rem, 2.2vw, 2.1rem);
    min-height: clamp(13rem, 18vw, 16rem);
    transition: transform 0.4s var(--motion-ease-out, ease), background-color 0.4s ease;
}
.au-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    --c: rgba(11, 11, 10, 0.28);
    --len: 16px;
    --t: 1px;
    background:
        linear-gradient(var(--c), var(--c)) top left / var(--len) var(--t),
        linear-gradient(var(--c), var(--c)) top left / var(--t) var(--len),
        linear-gradient(var(--c), var(--c)) top right / var(--len) var(--t),
        linear-gradient(var(--c), var(--c)) top right / var(--t) var(--len),
        linear-gradient(var(--c), var(--c)) bottom left / var(--len) var(--t),
        linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--len),
        linear-gradient(var(--c), var(--c)) bottom right / var(--len) var(--t),
        linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--len);
    background-repeat: no-repeat;
    transition: opacity 0.4s ease;
}
.au-section--dark .au-card::before { --c: rgba(255, 255, 255, 0.32); }
.au-card:hover { transform: translateY(-4px); }
.au-section--light .au-card:hover { background: rgba(11, 11, 10, 0.025); }
.au-section--dark .au-card:hover { background: rgba(255, 255, 255, 0.04); }
.au-card:hover::before { --c: var(--accent, #00d4aa); }

.au-card__icon {
    width: clamp(2.1rem, 2.6vw, 2.5rem);
    height: clamp(2.1rem, 2.6vw, 2.5rem);
    color: var(--accent, #00d4aa);
}
.au-card__icon svg { width: 100%; height: 100%; display: block; }
.au-card__title {
    margin: 0;
    font-family: var(--font);
    font-weight: 500;
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
}
.au-card__desc {
    margin: 0;
    margin-top: auto;
    padding-top: 0.5rem;
    font-family: var(--font);
    font-size: 0.95rem;
    line-height: 1.5;
    letter-spacing: -0.005em;
    opacity: 0.62;
}

@media (max-width: 1000px) {
    .au-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .au-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .au-grid--4,
    .au-grid--3 { grid-template-columns: 1fr; }
    .au-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .au-card { transition: none; }
}


/* ============================================
   CONNECTED WARFARE — kinetics.html
   Fixed side index, coded hero, full-bleed
   spotlight stack, compact detail strips,
   big-statement band. (Anduril-style structure.)
   ============================================ */

/* ----- Fixed side index ----- */
.cw-index {
    position: fixed;
    top: 50%;
    right: clamp(1rem, 2.5vw, 2.25rem);
    transform: translateY(-50%);
    z-index: 60;
    pointer-events: none;
}
.cw-index__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: flex-end;
}
.cw-index__link {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
    padding: 0.5rem 0;
    text-decoration: none;
    color: var(--cw-index-color, rgba(255, 255, 255, 0.5));
    transition: color 0.35s ease;
}
.cw-index__code {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    width: 1.6rem;
    text-align: right;
    opacity: 0.7;
}
.cw-index__label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(0.4rem);
    transition: max-width 0.4s var(--motion-ease, ease), opacity 0.35s ease, transform 0.4s var(--motion-ease, ease);
}
.cw-index__link:hover,
.cw-index__link.is-active { color: var(--cw-index-active, #ffffff); }
.cw-index__link:hover .cw-index__label,
.cw-index__link.is-active .cw-index__label {
    max-width: 12rem;
    opacity: 1;
    transform: translateX(0);
}
.cw-index__link.is-active .cw-index__code { opacity: 1; color: var(--accent, #00d4aa); }
/* The index is centered over the dark full-bleed hero + spotlights + statement,
   so it stays light-on-dark; .is-on-light flips it for any light section under it. */
.cw-index.is-on-light { --cw-index-color: rgba(11, 11, 10, 0.45); --cw-index-active: #0b0b0a; }
@media (max-width: 1000px) { .cw-index { display: none; } }

/* ----- Coded hero additions (layered over .pf-hero) ----- */
.cw-hero__inner { max-width: 60rem; }
.cw-hero__eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.cw-hero__code {
    display: block;
    font-family: var(--font-mono);
    font-size: clamp(0.8rem, 1.1vw, 1rem);
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--accent, #00d4aa);
    margin-bottom: 0.75rem;
}
.cw-hero__title { margin-top: 0; }
.cw-hero__motto {
    margin: clamp(0.75rem, 1.5vw, 1.1rem) 0 0;
    font-family: var(--font-mono);
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}
.cw-hero__sub { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }

/* ----- Full-bleed spotlight section ----- */
.cw-spot {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #0a0a0a;
    color: #ffffff;
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem);
}
.cw-spot__media { position: absolute; inset: 0; z-index: 0; }
.cw-spot__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cw-spot__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.25) 0%, rgba(10, 10, 10, 0.35) 45%, rgba(10, 10, 10, 0.88) 100%);
}
.cw-spot__inner {
    position: relative;
    z-index: 2;
    max-width: 48rem;
}
.cw-spot__eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: clamp(0.85rem, 1.6vw, 1.25rem);
}
.cw-spot__code {
    display: block;
    font-family: var(--font-mono);
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--accent, #00d4aa);
    margin-bottom: 0.5rem;
}
.cw-spot__name {
    margin: 0;
    font-family: var(--font);
    font-weight: 400;
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
}
.cw-spot__desc {
    margin: clamp(1.1rem, 2vw, 1.6rem) 0 0;
    max-width: 42ch;
    font-family: var(--font);
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
}
.cw-spot__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    transition: border-color 0.3s ease, color 0.3s ease;
}
.cw-spot__cta svg { width: 13px; height: 11px; transition: transform 0.3s ease; }
.cw-spot__cta:hover { border-color: var(--accent, #00d4aa); color: var(--accent, #00d4aa); }
.cw-spot__cta:hover svg { transform: translateX(4px); }

/* ----- Compact detail strip ----- */
.cw-detail {
    padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem);
    scroll-margin-top: 80px;
}
.cw-detail--light { background: #f5f2ec; color: #0b0b0a; }
.cw-detail--dark { background: #0a0a0a; color: #ffffff; }
.cw-detail__inner { max-width: 1320px; margin: 0 auto; }
.cw-detail__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: clamp(1rem, 1.8vw, 1.4rem);
}
.cw-detail__label:not(:first-child) { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

.cw-detail__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 1.4vw, 1.1rem);
}
.cw-chip {
    flex: 1 1 8rem;
    min-width: 8rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: clamp(1.1rem, 1.8vw, 1.5rem);
    border: 1px solid var(--cw-line, rgba(11, 11, 10, 0.16));
    border-radius: 6px;
}
.cw-detail--dark .cw-chip { --cw-line: rgba(255, 255, 255, 0.18); }
.cw-chip__val {
    font-family: var(--font);
    font-weight: 300;
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--accent, #00d4aa);
}
.cw-chip__key {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.6;
}

.cw-detail__tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.cw-tag {
    padding: 0.55rem 1rem;
    border: 1px solid var(--cw-line, rgba(11, 11, 10, 0.16));
    border-radius: 100px;
    font-family: var(--font);
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}
.cw-detail--dark .cw-tag { --cw-line: rgba(255, 255, 255, 0.18); }

.cw-detail__variants {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.cw-var {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 1rem;
    padding: clamp(0.85rem, 1.4vw, 1.1rem) 0;
    border-top: 1px solid var(--cw-line, rgba(11, 11, 10, 0.14));
}
.cw-var:first-child { border-top: 0; }
.cw-var__status {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.cw-var__status--fielded { color: #0a8a5f; }
.cw-var__status--eval { color: #b07a12; }
.cw-var__status--dev { color: rgba(11, 11, 10, 0.4); }
.cw-detail--dark .cw-var__status--dev { color: rgba(255, 255, 255, 0.4); }
.cw-var__name {
    font-family: var(--font);
    font-weight: 500;
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    letter-spacing: -0.02em;
}
.cw-var__cat {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.55;
    text-align: right;
}
@media (max-width: 600px) {
    .cw-var { grid-template-columns: 5.5rem minmax(0, 1fr); }
    .cw-var__cat { grid-column: 2; text-align: left; }
}

/* ----- Big-statement band ----- */
.cw-statement {
    background: #0a0a0a;
    color: #ffffff;
    padding: clamp(5rem, 13vw, 11rem) clamp(1.5rem, 5vw, 4rem);
}
.cw-statement__inner { max-width: 1320px; margin: 0 auto; }
.cw-statement__title {
    margin: 0;
    max-width: 16ch;
    font-family: var(--font);
    font-weight: 400;
    font-size: clamp(2.6rem, 8vw, 7rem);
    line-height: 0.95;
    letter-spacing: -0.045em;
    text-wrap: balance;
}
.cw-statement__sub {
    margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
    max-width: 48ch;
    font-family: var(--font);
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.62);
}

@media (prefers-reduced-motion: reduce) {
    .cw-index__label,
    .cw-spot__cta,
    .cw-spot__cta svg { transition: none; }
}


/* ============================================
   AUTONOMY — TRS-style two-column header
   + swap-in-ready media placeholders.
   Used by autonomy.html (Anduril TRS structure).
   ============================================ */

/* --- Two-column header variant (left title, right lead) --- */
.pf-hero--split {
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
}
.pf-hero--split .pf-hero__split {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1320px;
    margin: auto auto 0;
    align-self: flex-end;
    padding: clamp(6rem, 14vh, 9rem) clamp(1.5rem, 5vw, 4rem) clamp(4.5rem, 11vh, 7rem);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 900px) {
    .pf-hero--split .pf-hero__split {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: clamp(2.5rem, 6vw, 6rem);
        align-items: end;
    }
}
.pf-hero--split .pf-hero__eyebrow {
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.pf-hero--split .pf-hero__title {
    margin: 0;
    text-wrap: balance;
}
.pf-hero--split .pf-hero__split-body {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2.4vw, 1.75rem);
    align-items: flex-start;
}
.pf-hero--split .pf-hero__sub { margin: 0; max-width: 40ch; }
.pf-hero--split .pf-hero__actions { margin-top: 0; justify-content: flex-start; }
/* Stagger the two columns in on load */
.pf-hero--split .pf-hero__split-lead,
.pf-hero--split .pf-hero__split-body {
    opacity: 0;
    transform: translateY(20px);
    animation: pfRise 1s var(--motion-ease-out) forwards;
}
.pf-hero--split .pf-hero__split-lead { animation-delay: 0.35s; }
.pf-hero--split .pf-hero__split-body { animation-delay: 0.5s; }

/* --- Swap-in-ready media placeholder (matches .ad-showcase__media) --- */
.au-media-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 14px),
        linear-gradient(135deg, #16181a 0%, #0e0f10 100%);
}
.au-media-ph::before {
    content: '';
    position: absolute;
    inset: clamp(1rem, 3vw, 2.25rem);
    border: 1px dashed rgba(255, 255, 255, 0.16);
}
.au-media-ph__label {
    position: relative;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.au-media-ph__label::after {
    content: ' — image';
    color: rgba(255, 255, 255, 0.28);
}
@media (prefers-reduced-motion: reduce) {
    .pf-hero--split .pf-hero__split-lead,
    .pf-hero--split .pf-hero__split-body { animation: none; opacity: 1; transform: none; }
}