/* =============================================================
   INVIVO BRANDS — new-site-2026-v2
   Buildless static CSS. Tokens are the exact Figma values
   (Desktop/1920 + Mobile/375), authoritative June 2026.
   ============================================================= */

:root {
    /* ---- Colors (Figma tokens) ---- */
    --bg-dark:      #0d021f;   /* Colors/Dark Blue */
    --accent-cyan:  #00fdfd;   /* Colors/Cyan */
    --accent-red:   #ff0000;   /* Colors/Red */
    --accent-blue:  #0000fe;   /* Colors/Cobalt */
    --text-white:   #ffffff;   /* Colors/White */
    --dark-blue-50: #0d021f80; /* Colors/Dark Blue 50% */
    --cobalt-15:    rgba(0, 0, 254, 0.15);  /* Cobalt - 15 (card / field tint) */
    --cobalt-grad:  linear-gradient(102deg, #0000fe 0%, #0a0540 78%, #0d021f 100%); /* Cobalt → Dark Blue */
    --nav-inactive: rgba(255, 255, 255, 0.6);  /* Inactive nav item grey (Figma) */
    --hairline:     rgba(255, 255, 255, 0.7);  /* White underline — alive body (Figma 248:1860) */

    /* ---- Type — Montserrat (display) + Roboto (text) ---- */
    --font-sans:    'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Montserrat', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-xbold: 800;

    /* Desktop type scale (display fluid; text fixed). Mobile overrides below. */
    --fs-h1:    clamp(60px, 8.33vw, 160px);  /* Desktop/H1 160  */
    --fs-h2:    clamp(40px, 3.96vw, 76px);   /* Desktop/H2 76   */
    --fs-h3:    clamp(30px, 3.33vw, 64px);   /* Desktop/H3 64   */
    --fs-h5:    24px;   /* Desktop/H5 24 */
    --fs-h6:    20px;   /* Desktop/H6 20 */
    --fs-body:  20px;   /* Desktop/Body 20 */
    --fs-s1:    24px;   /* Desktop/S1 24 */
    --fs-footnote: 14px;/* Desktop/Footnote 14 */
    --fs-button: 20px;  /* Desktop/Button 20 */
    --fs-menu:  20px;   /* Desktop/Menu 20 */

    /* ---- Layout / spacing ---- */
    --gutter:  clamp(24px, 9.48vw, 182px);   /* Margins/Desktop/1920 = 182 */
    --maxw:    1556px;
    --pad-narrow: 24px;     /* Padding/Desktop/Narrow */
    --pad-standard: 32px;
    --pad-extra: 48px;
    --radius:  0;           /* Sharp corners site-wide (review round) */
    --section-pad: clamp(64px, 9.48vw, 182px);  /* Figma section inset ≈182 @1920 */
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea { font: inherit; }

body {
    background: var(--bg-dark);
    color: var(--text-white);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;   /* blob / video bleeds never cause a horizontal scroll */
}

/* Shared display heading (H2 sections) */
.section-h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-xbold);
    font-size: var(--fs-h2);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

/* Shared pill button */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: var(--fs-button);
    font-weight: var(--fw-bold);
    line-height: 1;
    white-space: nowrap;
    border: none;
    border-radius: 0;
    padding: 18px 40px;
}
.btn--cyan { background: var(--accent-cyan); color: var(--bg-dark); transition: box-shadow 0.3s ease; }
.btn--cyan:hover { box-shadow: 0 0 22px 2px rgba(0, 253, 253, 0.5); }

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

/* =============================================================
   1. HEADER / NAV (sticky) — Figma 132:2141
   ============================================================= */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--bg-dark); }
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pad-standard);
    padding: 38px var(--gutter);
}
.nav__brand { display: inline-flex; align-items: center; }
.nav__brand img { height: clamp(40px, 2.66vw, 51px); width: auto; }
.nav__menu { display: flex; align-items: center; gap: 32px; position: relative; }
.nav__link {
    position: relative;
    font-size: var(--fs-menu);
    font-weight: var(--fw-light);          /* Menu2: Roboto Light */
    color: var(--nav-inactive);            /* inactive = Figma grey */
    line-height: 1;
    padding-bottom: 6px;
    text-transform: uppercase;             /* menu items ALL CAPS (Figma) */
}
.nav__link:hover { color: var(--accent-cyan); }
.nav__link.is-active { color: var(--text-white); font-weight: var(--fw-xbold); }   /* active = white, Menu1 ExtraBold */
/* "Connect" is permanently the cyan accent (never grey/white). Base weight is Bold
   (per Figma); as the active item it steps up one notch and keeps the sliding underline. */
.nav__link--connect,
.nav__link--connect:hover,
.nav__link--connect.is-active { color: var(--accent-cyan); }
.nav__link--connect { font-weight: var(--fw-bold); }
.nav__link--connect.is-active { font-weight: var(--fw-xbold); }
/* Shared sliding underline — WHITE (per spec); position driven in JS. */
.nav__slider {
    position: absolute; left: 0; bottom: 0;
    height: 3px; width: 0;
    background: var(--text-white);
    transform: translateX(0) scaleX(1);
    transform-origin: center;
    will-change: transform;
}
.nav__toggle {
    display: none; align-items: center; justify-content: center;
    gap: 5px; width: 40px; height: 40px; padding: 0;
    background: transparent; border: none;
}
.nav__toggle-bar {
    display: block; width: 8px; height: 8px;
    border-radius: 50%; border: 1.5px solid var(--accent-cyan); background: transparent;
}

/* =============================================================
   2. HERO (#home) — Figma 132:2193
   ============================================================= */
.hero {
    display: flex;
    flex-direction: column;
    padding: clamp(40px, 4.2vw, 80px) var(--gutter) clamp(40px, 4.7vw, 90px);
}
.hero__title { display: flex; flex-direction: column; }
.hero__headline {
    font-family: var(--font-display);
    font-weight: var(--fw-xbold);
    font-size: var(--fs-h1);
    line-height: 1;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--text-white);
}
.hero__subhead {
    align-self: flex-end;
    margin-top: clamp(6px, 0.7vw, 14px);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-align: right;
    color: var(--accent-blue);
}

/* =============================================================
   3. VIDEO — Figma 132:2198 (default hero media)
   ============================================================= */
.video { padding: 0 var(--gutter) clamp(64px, 9.48vw, 182px); }
.video__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1556 / 875;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-dark);
}
/* The poster (assets/video-poster.png) is the resting frame; the video plays on click. */
.video__el { width: 100%; height: 100%; object-fit: cover; }
.video__el::cue { background: rgba(13, 2, 31, 0.78); color: #fff; line-height: 1.35; }
.video__play {
    position: absolute; inset: 0; margin: auto;
    width: clamp(56px, 8.75vw, 168px); height: clamp(56px, 8.75vw, 168px);
    border: none; border-radius: 50%;
    background: var(--text-white);
    box-shadow: 0 10px 40px rgba(13, 2, 31, 0.35);
    display: grid; place-items: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.video__play:hover { transform: scale(1.06); box-shadow: 0 0 32px 4px rgba(0, 253, 253, 0.45); }
.video__play[hidden] { display: none; }
.video__play-icon {
    width: 0; height: 0;
    margin-left: 14%;
    border-style: solid;
    border-width: 0.27em 0 0.27em 0.42em;
    border-color: transparent transparent transparent var(--bg-dark);
    font-size: clamp(56px, 8.75vw, 168px);   /* triangle scales with the button */
}

/* Dev-only particle field (?dev-experimental-particle-field-v1) — same box as the video. */
.video__particles {
    position: relative;
    width: 100%;
    aspect-ratio: 1556 / 875;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-dark);
}
.video__particles svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.video__particles .pf-line { fill: none; stroke: rgba(255, 255, 255, 0.26); stroke-width: 1.2; }

/* =============================================================
   4. "…truly alive" (#about) — Figma 132:2204 (cobalt band)
   ============================================================= */
.alive {
    background: var(--accent-blue);
    color: var(--text-white);
    padding: var(--section-pad) var(--gutter);
}
.alive__grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: clamp(40px, 8.8vw, 169px);
    align-items: start;
}
.alive__heading { max-width: 16ch; }
.alive__body { display: flex; flex-direction: column; gap: 20px; font-size: var(--fs-body); line-height: 1.5; padding-bottom: clamp(24px, 3vw, 48px); border-bottom: 1px solid var(--hairline); }

/* =============================================================
   5. "Breathing new life" — Figma 225:4954 (3 cols + blob graphic)
   ============================================================= */
.newlife { padding: var(--section-pad) 0; }
.newlife__heading { padding-inline: var(--gutter); max-width: calc(var(--maxw) + 2 * var(--gutter)); }
.newlife__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(32px, 2.5vw, 48px);
    padding: clamp(48px, 6.8vw, 130px) var(--gutter) 0;
}
.ncol__title {
    margin-bottom: 18px;
    font-family: var(--font-display);
    font-weight: var(--fw-xbold);
    font-size: var(--fs-h5);
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--accent-cyan);
}
.ncol__body { font-size: var(--fs-body); line-height: 1.45; color: var(--text-white); }

/* --- Blue blob graphic — static match to Figma (review: animation removed).
   A cobalt stadium bar (left, clipped at the viewport edge), a full circle, and a
   half-circle bleeding off the right edge. No hover / click / smear. --- */
.blobs {
    position: relative;
    width: 100%;
    height: 14.86vw;                       /* circle Ø 214 @1440 */
    margin-top: clamp(48px, 6.8vw, 130px);
    overflow: hidden;
}
.blob { position: absolute; top: 0; }
.blob--bar {
    left: 0;
    width: 61.6vw;                         /* 887 @1440 */
    height: 14.86vw;
    border-radius: 0 7.43vw 7.43vw 0;      /* rounded right cap; left clips at the edge */
    background: linear-gradient(90deg, #0d021f 0%, #0a0540 28%, var(--accent-blue) 100%);
}
.blob--circle {
    left: 65.1vw;                          /* 937 @1440 */
    width: 14.86vw;                        /* 214 */
    height: 14.86vw;
    border-radius: 50%;
    background: linear-gradient(145deg, #1a1aff 0%, var(--accent-blue) 60%, #0a0540 100%);
}
.blob--half {
    left: 92.6vw;                          /* 1333 @1440 → bleeds off the right edge */
    width: 7.43vw;                         /* 107 = radius */
    height: 14.86vw;
    border-radius: 7.43vw 0 0 7.43vw;      /* left half-circle, flat side at the edge */
    background: linear-gradient(145deg, #1a1aff 0%, var(--accent-blue) 70%, #0a0540 100%);
}

/* =============================================================
   6. "Snap us in" (#capes) — Figma 143:2696 (dark, 4 cards)
   ============================================================= */
.capes { padding: var(--section-pad) var(--gutter); }
.capes__heading { text-align: center; margin-bottom: clamp(48px, 6.8vw, 128px); }
.caps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.1vw, 40px); align-items: stretch; }
.cap {
    display: flex; flex-direction: column;
    background: var(--cobalt-15);
    border-radius: var(--radius);
    padding: var(--pad-narrow);
}
.cap__icon { width: clamp(70px, 5.2vw, 100px); height: clamp(70px, 5.2vw, 100px); margin: var(--pad-narrow) 0 clamp(24px, 2.3vw, 44px); }
.cap__icon img { width: 100%; height: 100%; }
.cap__title {
    margin-bottom: 20px;
    font-family: var(--font-display);
    font-weight: var(--fw-xbold);
    font-size: var(--fs-h6);
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--accent-cyan);
}
.cap__list { display: flex; flex-direction: column; gap: 8px; }
.cap__list li { font-size: var(--fs-body); line-height: 1.25; color: var(--text-white); }

/* =============================================================
   7. "How we snap" (#method) — Figma 143:3020 (cobalt; rows L + heading R)
   ============================================================= */
.method { background: var(--accent-blue); color: var(--text-white); padding: var(--section-pad) var(--gutter); }
.method__grid {
    display: grid;
    grid-template-columns: 891fr 497fr;
    gap: clamp(48px, 8.8vw, 168px);
    align-items: start;
}
.method__heading { grid-column: 2; }
.method__list { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; }
.mrow {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 24px;
    padding: 48px 0;
    border-bottom: 1px solid var(--accent-cyan);   /* thin cyan divider (Figma 248:1970) */
}
.mrow:first-child { border-top: 1px solid var(--accent-cyan); }
.mrow__icon { width: 40px; height: 40px; }
.mrow__icon img { width: 100%; height: 100%; }
.mrow__title {
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-weight: var(--fw-xbold);
    font-size: var(--fs-h5);
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--text-white);
}
.mrow__body { font-size: var(--fs-body); line-height: 1.45; }

/* =============================================================
   8. "Let's start a conversation" (#connect) — Figma 225:5003
   ============================================================= */
.connect { padding: var(--section-pad) var(--gutter); }
.connect__grid {
    display: grid;
    grid-template-columns: 939fr 497fr;
    grid-template-areas: "intro contact" "form contact";
    column-gap: clamp(48px, 6.25vw, 120px);
    align-items: start;
}
.connect__intro { grid-area: intro; margin-bottom: clamp(40px, 4.7vw, 90px); }
.connect__formwrap { grid-area: form; position: relative; overflow: hidden; }   /* anchor the scan overlay */
.connect__heading { margin-bottom: 24px; }
.connect__copy { font-size: var(--fs-body); line-height: 1.5; max-width: 38ch; }
.cform { display: flex; flex-direction: column; gap: 8px; }
.cform__field input,
.cform__field textarea {
    width: 100%;
    background: var(--cobalt-15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0;
    padding: 16px;
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    color: var(--text-white);
}
.cform__field textarea { min-height: 200px; resize: vertical; }
.cform input::placeholder, .cform textarea::placeholder { color: rgba(255, 255, 255, 0.6); opacity: 1; }
.cform__field input:focus, .cform__field textarea:focus { outline: none; border-color: var(--accent-cyan); }
.cform__prompt { display: block; padding: 16px 0 8px; font-size: var(--fs-s1); font-weight: var(--fw-medium); color: var(--text-white); }
.cform__nowrap { white-space: nowrap; }   /* keep "alive-ing" together on mobile */
.cform__disclaimer { font-size: var(--fs-footnote); font-weight: var(--fw-light); color: rgba(255, 255, 255, 0.7); }
.cform__submit { align-self: flex-start; margin-top: 16px; }

/* Contact details (right) — rows joined by a red dotted line through the dots (Figma) */
.connect__right { grid-area: contact; }
.contactcard { position: relative; display: flex; flex-direction: column; gap: var(--pad-narrow); }
.contactcard::before {
    content: ""; position: absolute; left: 4px;       /* centre of the 9px dot */
    top: 0.75em; bottom: 0.75em;                       /* reach first & last dot centres */
    border-left: 2px dotted var(--accent-red); z-index: 0;
}
.contactcard__row { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 12px; }
.contactcard__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-red); align-self: center; }
.contactcard__label { flex: none; width: 96px; font-family: var(--font-display); font-size: var(--fs-h6); font-weight: var(--fw-xbold); color: var(--accent-cyan); text-transform: uppercase; }
.contactcard__label--wide { width: auto; }
.contactcard__val { font-size: var(--fs-body); }
.contactcard__val:hover { text-decoration: underline; }
.contactcard__link { font-family: var(--font-display); font-size: var(--fs-h6); font-weight: var(--fw-xbold); color: var(--accent-cyan); }
.contactcard__link:hover { text-decoration: underline; }

/* =============================================================
   9. FOOTER — Figma 249:2406 (dark)
   ============================================================= */
.footer { background: var(--accent-blue); color: var(--text-white); padding: clamp(48px, 5.2vw, 100px) var(--gutter); }
.footer__inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 64px; }
.footer__brand { display: flex; flex-direction: column; gap: 24px; }
.footer__logo img { width: 158px; height: auto; }
.footer__copyright { font-size: var(--fs-footnote); }
.footer__cols { display: flex; gap: clamp(40px, 6vw, 120px); }
.footer__h { font-size: var(--fs-h6); font-family: var(--font-display); font-weight: var(--fw-xbold); margin-bottom: 16px; }
.footer__list { display: flex; flex-direction: column; gap: 12px; font-size: var(--fs-body); line-height: 1.4; }
.footer__list a:hover { text-decoration: underline; }
.footer__social { display: flex; gap: var(--pad-narrow); }
.footer__social img { width: 32px; height: 32px; }

/* =============================================================
   Mid-width (769–1200): relax the 4-up + two-column layouts
   ============================================================= */
@media (min-width: 769px) and (max-width: 1200px) {
    .caps4 { grid-template-columns: repeat(2, 1fr); }
    .alive__grid { grid-template-columns: 1fr; gap: 40px; }
    .connect__grid { grid-template-columns: 1fr; grid-template-areas: "intro" "form" "contact"; row-gap: 40px; }
    .connect__right { padding-top: 0; }
}

/* =============================================================
   Mobile (≤768) — Figma Mobile/375
   ============================================================= */
@media (max-width: 768px) {
    :root {
        --fs-h1: clamp(56px, 21.3vw, 80px);
        --fs-h2: clamp(30px, 9.6vw, 36px);
        --fs-h3: clamp(26px, 8.5vw, 32px);
        --fs-h5: 20px; --fs-h6: 18px; --fs-body: 16px; --fs-s1: 20px;
        --fs-footnote: 12px; --fs-button: 16px;
        --gutter: 16px;
        --radius: 0;
        --section-pad: 80px;
    }

    /* Header → kebab */
    .nav { flex-wrap: wrap; gap: 0; padding: 16px var(--gutter); }
    .nav__brand img { height: 51px; }
    .nav__toggle { display: inline-flex; }
    .nav__menu {
        flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: var(--pad-narrow);
        max-height: 0; padding-top: 0; opacity: 0; visibility: hidden; overflow: hidden;
    }
    html:not(.motion-off) .nav__menu { transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.35s ease, visibility 0.35s; }
    .nav.is-open .nav__menu { max-height: 360px; padding-top: var(--pad-narrow); opacity: 1; visibility: visible; }

    .hero { padding-top: 32px; padding-bottom: 24px; }
    .hero__headline { text-align: left; }
    .hero__subhead { align-self: flex-start; text-align: left; }

    .video { padding-bottom: var(--section-pad); }
    .video__play { width: 56px; height: 56px; }
    .video__play-icon { font-size: 56px; }

    .alive__grid { grid-template-columns: 1fr; gap: 28px; }
    .alive__heading { max-width: none; }
    .alive__body { margin-inline: -8px; }   /* reduced side margin so body copy isn't too tight (comment 44) */

    .newlife__cols { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; }
    .blobs { height: 24vw; }
    .blob--bar { width: 58vw; height: 24vw; border-radius: 0 12vw 12vw 0; }
    .blob--circle { left: 62vw; width: 24vw; height: 24vw; }
    .blob--half { left: 88vw; width: 12vw; height: 24vw; border-radius: 12vw 0 0 12vw; }

    .caps4 { grid-template-columns: 1fr; gap: 16px; }
    .capes__heading { text-align: left; }

    .method__grid { grid-template-columns: 1fr; gap: 32px; }
    .method__heading { grid-column: 1; grid-row: 1; }
    .method__list { grid-column: 1; grid-row: 2; }
    .mrow { padding: 32px 0; }

    /* Mobile order: intro → contact → form (Figma 249:2625) */
    .connect__grid { grid-template-columns: 1fr; grid-template-areas: "intro" "contact" "form"; row-gap: 40px; }
    .connect__intro { margin-bottom: 0; }
    .connect__right { border-left: none; padding-left: 0; }

    .footer__inner { flex-direction: column; gap: 40px; }
    .footer__cols { flex-direction: column; gap: 32px; }
}

/* =============================================================
   MOTION & INTERACTION POLISH (master switch: html.motion-off)
   ============================================================= */
html.js:not(.motion-off) .reveal-item {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js:not(.motion-off) .reveal-item.in { opacity: 1; transform: none; }

.motion-toggle {
    position: fixed; left: 16px; bottom: 16px; z-index: 90;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; font-family: var(--font-sans); font-size: 12px; font-weight: var(--fw-medium);
    line-height: 1; color: var(--text-white);
    background: rgba(13, 2, 31, 0.72); border: 1px solid var(--accent-cyan); border-radius: 0;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.motion-toggle__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-cyan); box-shadow: 0 0 8px rgba(0, 253, 253, 0.8); }
.motion-toggle[aria-pressed="false"] .motion-toggle__dot { background: transparent; border: 1px solid var(--accent-cyan); box-shadow: none; }
.motion-toggle:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

/* Form errors / states */
.cform__error { display: block; margin-top: 4px; font-size: var(--fs-footnote); font-weight: var(--fw-medium); color: var(--accent-red); }
.cform__error[hidden] { display: none; }
.cform__field input.is-invalid, .cform__field textarea.is-invalid { border: 1px solid var(--accent-red); }
.cform__scan {
    position: absolute; top: 0; left: 0; right: 0; height: 45%;
    pointer-events: none; opacity: 0; transform: translateY(-120%);
    background: linear-gradient(to bottom, rgba(0,253,253,0) 0%, rgba(0,253,253,0.35) 50%, rgba(0,253,253,0) 100%);
}
html:not(.motion-off) .cform__scan.is-active { opacity: 1; animation: scan-sweep 0.85s ease-in-out forwards; }
@keyframes scan-sweep { from { transform: translateY(-120%); } to { transform: translateY(320%); } }

.formdone { margin-top: var(--pad-narrow); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.formdone[hidden] { display: none; }
html:not(.motion-off) .formdone.in { animation: snap-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes snap-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.formdone__check { width: 52px; height: 52px; }
.formdone__check-ring, .formdone__check-tick { fill: none; stroke: var(--accent-cyan); stroke-linecap: round; stroke-linejoin: round; }
.formdone__check-ring { stroke-width: 2; }
.formdone__check-tick { stroke-width: 3; }
html:not(.motion-off) .formdone.in .formdone__check-ring { stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw-ring 0.5s ease forwards; }
html:not(.motion-off) .formdone.in .formdone__check-tick { stroke-dasharray: 44; stroke-dashoffset: 44; animation: draw-tick 0.35s ease 0.45s forwards; }
@keyframes draw-ring { to { stroke-dashoffset: 0; } }
@keyframes draw-tick { to { stroke-dashoffset: 0; } }
.formdone__lead { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-xbold); line-height: 1.1; color: var(--accent-cyan); }
.formdone__msg { font-size: var(--fs-body); line-height: 1.5; color: var(--text-white); }
.cform.is-locked input, .cform.is-locked textarea, .cform.is-locked .cform__submit { opacity: 0.55; cursor: not-allowed; }

/* Master kill switch */
html.motion-off .nav__slider, html.motion-off .btn--cyan, html.motion-off .video__play,
html.motion-off .cform__scan, html.motion-off .formdone, html.motion-off .blob {
    transition: none !important; animation: none !important;
}
@media (max-width: 768px) {
    .nav__slider { display: none; }
    .nav__link.is-active { box-shadow: inset 0 -3px 0 var(--text-white); }
}

/* Mobile kebab: sequential fill on open / empty on close */
html:not(.motion-off) .nav__toggle-bar { transition: background-color 0.25s ease; }
html:not(.motion-off) .nav.is-open .nav__toggle-bar { background: var(--accent-cyan); }
html:not(.motion-off) .nav__toggle-bar:nth-child(1) { transition-delay: 0.16s; }
html:not(.motion-off) .nav__toggle-bar:nth-child(2) { transition-delay: 0.08s; }
html:not(.motion-off) .nav__toggle-bar:nth-child(3) { transition-delay: 0s; }
html:not(.motion-off) .nav.is-open .nav__toggle-bar:nth-child(1) { transition-delay: 0s; }
html:not(.motion-off) .nav.is-open .nav__toggle-bar:nth-child(2) { transition-delay: 0.08s; }
html:not(.motion-off) .nav.is-open .nav__toggle-bar:nth-child(3) { transition-delay: 0.16s; }