@charset "utf-8";
/* ==========================================================================
   MOTIVATE STUDIOS — system.css
   The whole stylesheet. Authored against BUILD-BRIEF.md; every token, class
   and state hook below is the frozen contract. Sections run in brief order.

   Custom properties WRITTEN BY JS that this file binds to:
     :root      --sbw                 (menu scroll-lock compensation)
     [data-glass]    --mx --my        (pointer specular)
     [data-header]   --scrolled 0..1
     [data-pipeline] --progress 0..1
     .marquee__row   --dist
     .tabs__marker   --marker-y --marker-h  (+ inline height/transform)
     [data-form]     --pulse --pulse-x --pulse-y
     stagger kids / menu items  --i
   State CLASSES / ATTRS written by JS:
     html.js · .is-in .is-revealed [data-revealed] · .is-sheening · .is-stuck
     .is-open · .is-active · [data-active] · .is-out · .is-sending · .is-done
     .is-invalid · .is-error · [data-empty] · [data-filter-empty] · [hidden]
   ========================================================================== */


/* ===== 00 · TOKENS ======================================================= */

:root {
  /* ink */
  --ink-900:#08142B;
  --ink-700:#12264A;
  --ink-500:#3D5378;
  --ink-400:#61769B;
  --ink-300:#8E9FBC;

  /* ground */
  --bg:      #EEF3FA;
  --bg-deep: #E2EAF6;
  --bg-lift: #F7FAFE;

  /* accent */
  --azure-600:#0A5FE0;
  --azure-500:#1B72FF;
  --azure-300:#6BA5FF;
  --azure-100:#D5E5FF;
  --violet-500:#6E5BF0;
  --cyan-400:#3FD0E8;

  /* glass */
  --glass-fill:      rgba(255,255,255,.50);
  --glass-fill-hi:   rgba(255,255,255,.66);
  --glass-edge:      rgba(255,255,255,.85);
  --glass-edge-cool: rgba(107,165,255,.55);
  --glass-edge-warm: rgba(110,91,240,.42);
  --glass-blur: 26px;
  --glass-shadow: 0 2px 6px rgba(8,20,43,.05), 0 18px 44px -14px rgba(8,20,43,.20);
  --glass-shadow-hi: 0 3px 10px rgba(8,20,43,.07), 0 30px 70px -18px rgba(8,20,43,.28);

  /* squircle radii */
  --r-sm:14px; --r-md:22px; --r-lg:32px; --r-xl:44px; --r-pill:999px;

  /* motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --t-fast:180ms; --t-mid:420ms; --t-slow:900ms;

  /* layout */
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1360px;
  --rule: 1px;

  /* --- derived companions (channel triplets so alpha can be computed;
         these are the SAME colours as above, never new ones) --- */
  --bg-rgb: 238 243 250;
  --bg-deep-rgb: 226 234 246;
  --bg-lift-rgb: 247 250 254;
  --ink-900-rgb: 8 20 43;
  --ink-700-rgb: 18 38 74;
  --ink-500-rgb: 61 83 120;
  --ink-300-rgb: 142 159 188;
  --azure-600-rgb: 10 95 224;
  --azure-500-rgb: 27 114 255;
  --azure-300-rgb: 107 165 255;
  --azure-100-rgb: 213 229 255;
  --violet-500-rgb: 110 91 240;
  --cyan-400-rgb: 63 208 232;

  /* type — four families, two jobs, two scripts
                 heading            body
       English   Sora               Inter Tight
       Thai      Chakra Petch       IBM Plex Sans Thai

     Sora and Inter Tight carry no Thai glyphs, so each stack names its Thai
     partner second. The browser resolves per character: a Latin letter is
     always drawn by Sora or Inter Tight, a Thai one falls through to Chakra
     Petch or IBM Plex Sans Thai — which is what keeps an English product
     name inside a Thai headline in the brand face instead of switching
     voice mid-line. The same stacks serve both languages; nothing has to be
     swapped when the language changes. */
  --font-thai-display: 'Chakra Petch';
  --font-thai: 'IBM Plex Sans Thai';
  --font-display: 'Sora', 'Sora Fallback', var(--font-thai-display), system-ui, sans-serif;
  --font-body: 'Inter Tight', var(--font-thai), system-ui, -apple-system, sans-serif;

  /* shell metrics */
  --hdr-h: 68px;
  --sbw: 0px;

  /* stacking order */
  --z-rules: 1;
  --z-hdr: 60;
  --z-skip: 80;
  --z-menu: 90;

  /* --- theme-movable literals -------------------------------------------
     Every hard-coded colour that used to sit in the body of this sheet now
     routes through one of the names below. The values here are the
     originals, to the percent — light renders exactly as it always did.
     Section 33 is the only place that moves them. --- */

  /* white film on the glass: decorative light, carries no ink */
  --film-spec:       rgba(255,255,255,.70);   /* .glass specular core       */
  --film-spec-mid:   rgba(255,255,255,.26);   /* .glass specular falloff    */
  --film-spec-t:     rgba(255,255,255,.66);   /* .glass--tint core          */
  --film-spec-t-mid: rgba(255,255,255,.20);   /* .glass--tint falloff       */
  --film-wash:       rgba(255,255,255,.34);   /* .glass 168deg wash, top    */
  --film-wash-mid:   rgba(255,255,255,.06);   /* .glass 168deg wash, mid    */
  --film-wash-t:     rgba(255,255,255,.30);   /* .glass--tint wash          */
  --film-rim:        rgba(255,255,255,.98);   /* conic rim, white terminal  */
  --film-sheen:      rgba(255,255,255,.90);   /* .glass::after 7s sweep     */
  --film-sweep:      rgba(255,255,255,.85);   /* .tile::after edge-light    */
  --film-caustic:    rgba(255,255,255,.55);   /* hero static, band 1        */
  --film-caustic-2:  rgba(255,255,255,.34);   /* hero static, band 2        */
  --film-pulse:      rgba(255,255,255,.95);   /* .form__pulse core          */
  --film-pulse-2:    rgba(255,255,255,.90);   /* .form send-pulse fallback  */
  --film-btn:        rgba(255,255,255,.50);   /* .btn body wash, top        */
  --film-btn-mid:    rgba(255,255,255,.04);   /* .btn body wash, bottom     */
  --film-solid-rim:  rgba(255,255,255,.60);   /* .btn--solid rim, top       */
  --film-panel:      rgba(255,255,255,.50);   /* .menu__panel 200deg wash   */

  /* bright top edges — the `inset 0 1px 0` hairline that sells the material */
  --edge-hi:         rgba(255,255,255,.95);
  --edge-hi-2:       rgba(255,255,255,.96);
  --edge-mid:        rgba(255,255,255,.90);
  --edge-solid:      rgba(255,255,255,.42);
  --edge-solid-hi:   rgba(255,255,255,.50);
  --edge-chip:       rgba(255,255,255,.40);

  /* translucent control bodies — unlike the film above, THESE CARRY INK,
     so in dark they become a faint light film, never a sheet of white. */
  --ctl:             rgba(255,255,255,.50);   /* round chips at rest        */
  --ctl-soft:        rgba(255,255,255,.42);   /* .menu-btn                  */
  --ctl-faint:       rgba(255,255,255,.22);   /* .btn--ghost                */
  --ctl-off:         rgba(255,255,255,.40);   /* .btn[disabled]             */
  --ctl-aside:       rgba(255,255,255,.55);   /* contact aside chip         */
  --ctl-ghost-hi:    rgba(255,255,255,.60);   /* .btn--ghost:hover          */
  --ctl-hi:          rgba(255,255,255,.72);   /* .menu-btn / .filter hover  */
  --ctl-hi-btn:      rgba(255,255,255,.80);   /* .btn:hover                 */
  --ctl-hi-arrow:    rgba(255,255,255,.85);   /* .carousel__arrow:hover     */
  --ctl-hi-close:    rgba(255,255,255,.86);   /* .menu__close:hover         */
  --ctl-hi-solid:    rgba(255,255,255,.90);   /* .ftr__social:hover + no-backdrop */

  /* opaque fallbacks — reduced transparency, more contrast, no backdrop-filter */
  --surface-flat:     rgba(255,255,255,.94);
  --surface-contrast: rgba(255,255,255,.97);
  --surface-solid:    #fff;
  --glass-flat:       rgba(255,255,255,.86);
  --panel-flat:       rgba(238,243,250,.98);

  /* panels, scrims, media wells */
  --panel-fill:      rgba(238,243,250,.72);   /* .menu__panel              */
  --scrim:           rgb(8 20 43 / .28);      /* .menu__scrim              */
  --scrim-flat:      rgb(8 20 43 / .50);
  --media-void:      #12264A;                 /* .tile__media, pre-poster  */
  --media-letterbox: #08142B;                 /* .lb__media letterbox      */

  /* the caption plate floats over artwork, so it is its own surface */
  --tile-plate:      rgb(255 255 255 / .82);
  --tile-plate-hi:   rgb(255 255 255 / .92);
  --tile-plate-flat: rgb(255 255 255 / .95);

  /* play affordance + lightbox chrome */
  --play-fill:       rgba(255,255,255,.62);
  --play-fill-hi:    #fff;
  --lb-btn:          rgba(255,255,255,.82);
  --lb-btn-hi:       #fff;
  --lb-scrim:        rgba(8,20,43,.62);
  --lb-cast:         rgba(0,0,0,.60);

  /* the ink that sits ON an accent fill. It flips in dark, because the
     accent itself has to lighten to stay legible on the dark ground. */
  --on-accent:       #fff;

  /* Shadows are cast in THIS colour, never in the ink ramp — the ink ramp
     inverts between themes and would turn every cast shadow into a halo. */
  --shade-rgb:       8 20 43;

  /* the backdrop pass under glass, and under the menu panel */
  --glass-bright: 1.06;
  --panel-bright: 1.04;

  /* strength dials for the two purely-decorative light sources */
  --mesh-k: 1;    /* hero mesh gradients */
  --orb-k:  1;    /* .orb opacity        */

  color-scheme: light;
}

@media (min-width: 768px) { :root { --hdr-h: 84px; } }

/* Registered so calc() always resolves and JS writes stay type-safe. */
@property --mx { syntax: '<percentage>'; inherits: false; initial-value: 22%; }
@property --my { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --scrolled { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --progress { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --pulse { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --pulse-x { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --pulse-y { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --mesh-k { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --orb-k  { syntax: '<number>'; inherits: true; initial-value: 1; }


/* ===== 01 · RESET & DOCUMENT ============================================ */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 24px);
  /* `clip`, never `hidden`: it kills the sideways scroll that full-bleed
     decorative layers can create without making a scroll container — so
     position:sticky (the header, .pipe__sticky) keeps working. */
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background-color: var(--bg);
  color: var(--ink-500);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

ul, ol { list-style: none; padding: 0; }
dl, dd { margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }

:where(p, figure, li, dd, address) { overflow-wrap: break-word; }
:where(h1, h2, h3, h4) { overflow-wrap: normal; }

strong, b { font-weight: 600; color: var(--ink-700); }
em { font-style: normal; }

hr { border: 0; height: var(--rule); background: rgb(var(--ink-300-rgb) / .34); }


/* ===== 02 · TYPE ======================================================== */

.t-display {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.035em;
  color: var(--ink-900);
  text-wrap: balance;
}

.t-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--ink-900);
  text-wrap: balance;
}

.t-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 2.25rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--ink-900);
  text-wrap: balance;
}

.t-h3 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.012em;
  color: var(--ink-900);
  text-wrap: balance;
}

.t-lead {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  font-weight: 300;
  line-height: 1.62;
  letter-spacing: -.005em;
  color: var(--ink-500);
  max-width: 68ch;
  text-wrap: pretty;
}

.t-body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: 0;
  color: var(--ink-500);
  max-width: 68ch;
  text-wrap: pretty;
}

.t-cap {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* Unclassed headings inside prose inherit the display voice. */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; color: var(--ink-900); }

/* More space above a heading than below it. */
:where(.sec, .sec__inner, .wrap, .glass) > :where(h2, h3) + * { margin-top: .7em; }


/* ----- 02b · THAI ------------------------------------------------------
   The Latin scale above is tuned tight: negative tracking, line-height down
   to .98. Thai cannot take either. Its tone marks stack a full storey above
   the letter and the sara-u marks hang below, so a .98 leading clips them
   against the line before, and negative tracking walks the marks into the
   neighbouring glyph. Everything here only widens what the Latin scale
   tightened — no colour, no weight, no size is touched, so the page keeps
   its proportions and only stops crushing the script.

   Scoped to html[lang="th"], which the pre-paint script in every page head
   sets from the stored preference before the first frame. */

html[lang="th"] body { line-height: 1.82; }

html[lang="th"] :where(.t-display) { line-height: 1.22; letter-spacing: 0; }
html[lang="th"] :where(.t-h1)      { line-height: 1.26; letter-spacing: 0; }
html[lang="th"] :where(.t-h2)      { line-height: 1.34; letter-spacing: 0; }
html[lang="th"] :where(.t-h3)      { line-height: 1.44; letter-spacing: 0; }
html[lang="th"] :where(h1, h2, h3, h4) { letter-spacing: 0; }
html[lang="th"] :where(.t-lead)    { line-height: 1.78; letter-spacing: 0; }
html[lang="th"] :where(.t-body)    { line-height: 1.82; letter-spacing: 0; }
html[lang="th"] :where(.t-cap)     { line-height: 1.6; letter-spacing: .02em; }

/* Thai writes without spaces between words, so a long run is one "word" to
   the line-breaker unless the browser segments it. Chromium does that with
   auto-phrase; Safari and Firefox already break Thai on their own. The
   @supports keeps the declaration away from engines that would ignore it. */
@supports (word-break: auto-phrase) {
  html[lang="th"] :where(p, li, dd, address, h1, h2, h3, h4,
                         .t-display, .t-h1, .t-h2, .t-h3, .t-lead, .t-body) {
    word-break: auto-phrase;
  }
}

/* balance re-wraps a heading into even lines by measuring words; with no
   word gaps to measure it only adds jitter. pretty is the safer setting. */
html[lang="th"] :where(.t-display, .t-h1, .t-h2, .t-h3) { text-wrap: pretty; }

/* A Thai line with no break opportunity would otherwise push the column
   wide. This lets the very long ones break rather than overflow. */
html[lang="th"] :where(p, li, dd, address) { overflow-wrap: break-word; }


/* ===== 03 · LAYOUT PRIMITIVES ========================================== */

.wrap,
.sec__inner,
.ftr__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sec {
  position: relative;
  padding-block: clamp(72px, 11vh, 136px);
}

.sec > .wrap > .t-h1,
.sec > .sec__inner > .t-h1,
.sec > .wrap > .t-h2,
.sec > .sec__inner > .t-h2 { margin-bottom: clamp(30px, 4vh, 54px); }

.sec--deep { background-color: var(--bg-deep); }

.sec--intro {
  isolation: isolate;
  padding-top: calc(var(--hdr-h) + clamp(56px, 12vh, 132px));
  padding-bottom: clamp(48px, 8vh, 96px);
  overflow: clip;
}
.sec--intro > .orb { z-index: -1; top: -34%; right: -14%; }
.sec--intro > .sec__inner { position: relative; z-index: 1; }
.sec--intro .t-h1 { margin-bottom: clamp(18px, 2.4vh, 28px); }
.sec--intro .t-lead { max-width: 56ch; }

.sec--stages { padding-block: clamp(48px, 7vh, 88px); }
.sec--stages .t-h2 { margin-bottom: .6em; }

.sec--switcher { padding-block: clamp(56px, 9vh, 112px); }

.sec--pledge { padding-block: clamp(56px, 9vh, 112px); }

.sec--cta { padding-block: clamp(64px, 10vh, 128px); }

.sec__cta {
  margin-top: clamp(34px, 5vh, 60px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}


/* ===== 04 · BROWSER SURFACES =========================================== */

::selection {
  background-color: var(--azure-100);
  color: var(--ink-900);
  text-shadow: none;
}

html { scrollbar-color: var(--azure-300) var(--bg-deep); scrollbar-width: thin; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
  background-color: var(--azure-300);
  border-radius: var(--r-pill);
  border: 3px solid var(--bg-deep);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--azure-500); }
::-webkit-scrollbar-corner { background: var(--bg-deep); }

input, textarea, select, [contenteditable] { caret-color: var(--azure-500); }

:focus-visible {
  outline: 2px solid var(--azure-500);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Links: azure-600 clears 4.5:1 on every ground in this palette; azure-500
   is reserved for fills, icons and large type where 3:1 is the bar. */
a:where(:not([class])) {
  color: var(--azure-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(var(--azure-300-rgb) / .8);
  text-underline-offset: .22em;
  transition: text-decoration-color var(--t-fast) var(--ease-out),
              text-underline-offset var(--t-fast) var(--ease-out);
}
a:where(:not([class])):hover {
  text-decoration-color: var(--azure-600);
  text-underline-offset: .16em;
}

::placeholder { color: var(--ink-500); opacity: .78; }

.skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: var(--z-skip);
  padding: .7rem 1.15rem;
  border-radius: var(--r-pill);
  background-color: var(--bg-lift);
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  box-shadow: var(--glass-shadow);
  translate: 0 calc(-100% - 24px);
  transition: translate var(--t-mid) var(--ease-out);
}
.skip:focus-visible { translate: 0 0; }


/* ===== 05 · GLASS — the material ======================================= */

.glass {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(22px, 3vw, 38px);
  border-radius: var(--r-lg);
  color: var(--ink-500);

  /* 1 · fill + backdrop */
  background-color: var(--glass-fill);
  /* 4 · pointer specular (fixed top-left default so touch still reads glass) */
  background-image:
    radial-gradient(128% 96% at var(--mx) var(--my),
      var(--film-spec) 0%,
      var(--film-spec-mid) 34%,
      rgba(255,255,255,0) 66%),
    linear-gradient(168deg,
      var(--film-wash) 0%,
      var(--film-wash-mid) 40%,
      rgb(var(--azure-100-rgb) / .18) 100%);
  background-repeat: no-repeat;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(var(--glass-bright));
          backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(var(--glass-bright));

  /* 2b · bright top edge + cast shadow (offset + blur, never a halo) */
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge);

  transition:
    background-color var(--t-mid) var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out),
    backdrop-filter var(--t-mid) var(--ease-out),
    -webkit-backdrop-filter var(--t-mid) var(--ease-out);
}

/* 2 · edge refraction — a gradient ring, brightest top-left, cooling round
   the rim and going warm at the far corner. Masked, so it follows the
   squircle instead of sitting on it like a flat border. */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background:
    conic-gradient(from -45deg at 50% 50%,
      var(--film-rim) 0%,
      var(--glass-edge) 10%,
      var(--glass-edge-cool) 32%,
      var(--glass-edge-warm) 54%,
      var(--glass-edge-cool) 74%,
      var(--glass-edge) 91%,
      var(--film-rim) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}

/* 3 · ambient sheen sweep — 7s, linear, slow enough to be furniture. */
.glass::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -35%;
  bottom: -35%;
  left: -62%;
  width: 44%;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    var(--film-sheen) 48%,
    rgba(255,255,255,0) 100%);
  filter: blur(16px);
  opacity: .18;
  transform: translate3d(0,0,0) rotate(17deg);
  animation: glass-sheen 7s linear infinite;
}

@keyframes glass-sheen {
  from { transform: translate3d(0,0,0) rotate(17deg); }
  to   { transform: translate3d(378%,0,0) rotate(17deg); }
}

/* 5 · hover — the material brightens, lifts, and takes one fast sweep. */
@media (hover: hover) and (pointer: fine) {
  .glass:hover {
    background-color: var(--glass-fill-hi);
    box-shadow: var(--glass-shadow-hi), inset 0 1px 0 var(--edge-hi);
  }
}
.glass.is-sheening::after { animation-duration: 2.4s; }

.glass--flush { padding: 0; }

.glass--tint {
  background-color: rgb(var(--azure-100-rgb) / .46);
  background-image:
    radial-gradient(128% 96% at var(--mx) var(--my),
      var(--film-spec-t) 0%, var(--film-spec-t-mid) 36%, rgba(255,255,255,0) 68%),
    linear-gradient(168deg, var(--film-wash-t), rgb(var(--azure-300-rgb) / .16));
}
@media (hover: hover) and (pointer: fine) {
  .glass--tint:hover { background-color: rgb(var(--azure-100-rgb) / .6); }
}

/* Large panels take the extra-large radius. */
.stat-card, .tabs__stage, .cta, .cta-band__panel, .pledge, .gets,
.form, .case__info, .gallery__frame { border-radius: var(--r-xl); }

/* Continuous corners where the engine can actually draw them. */
@supports (corner-shape: squircle) {
  .glass, .btn, .tile, .tile__meta, .menu__panel, .filters, .filter,
  .skip, .steps__item, .carousel__arrow, .pipe__icon, .form__input,
  .gallery__frame, .case__info { corner-shape: squircle; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass { background-color: var(--glass-flat); }
  .glass--tint { background-color: rgb(var(--azure-100-rgb) / .82); }
}


/* ===== 06 · BUTTON ===================================================== */

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 46px;
  padding: .74rem 1.4rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.008em;
  text-decoration: none;
  color: var(--ink-900);
  background-color: var(--glass-fill-hi);
  background-image: linear-gradient(168deg, var(--film-btn), var(--film-btn-mid));
  -webkit-backdrop-filter: blur(18px) saturate(180%) brightness(var(--glass-bright));
          backdrop-filter: blur(18px) saturate(180%) brightness(var(--glass-bright));
  box-shadow:
    0 1px 2px rgb(var(--shade-rgb) / .06),
    0 10px 26px -14px rgb(var(--shade-rgb) / .34),
    inset 0 1px 0 var(--glass-edge);
  cursor: pointer;
  transition:
    transform 100ms var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out),
    background-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1.25px;
  pointer-events: none;
  background: conic-gradient(from -45deg at 50% 50%,
    var(--film-rim), var(--glass-edge) 12%, var(--glass-edge-cool) 36%,
    var(--glass-edge-warm) 56%, var(--glass-edge-cool) 76%, var(--film-rim));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}

.btn__label { display: inline-block; }

.btn__arrow {
  width: 1em;
  height: 1em;
  flex: none;
  color: currentColor;
  transition: transform var(--t-mid) var(--ease-out);
}

.btn:hover { transform: translateY(-2px); background-color: var(--ctl-hi-btn); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn:hover { box-shadow:
    0 2px 4px rgb(var(--shade-rgb) / .07),
    0 10px 30px -8px rgb(var(--azure-500-rgb) / .45),
    inset 0 1px 0 var(--edge-hi); }

.btn:focus-visible { outline: 2px solid var(--azure-500); outline-offset: 3px; }

/* Feedback lands on pointerdown — :active fires there, in 100ms. */
.btn:active { transform: scale(.97); transition-duration: 100ms; }

.btn[disabled], .btn[aria-disabled="true"] {
  color: var(--ink-300);
  background-color: var(--ctl-off);
  box-shadow: inset 0 0 0 1px rgb(var(--ink-300-rgb) / .4);
  cursor: not-allowed;
  transform: none;
}
.btn[disabled]::before, .btn[aria-disabled="true"]::before { opacity: .3; }

/* --- solid: the one strongest CTA per page --- */
.btn--solid {
  color: var(--on-accent);
  background-color: var(--azure-600);
  background-image: linear-gradient(180deg, var(--azure-500) 0%, var(--azure-600) 62%);
  box-shadow:
    0 1px 2px rgb(var(--azure-600-rgb) / .28),
    0 12px 30px -12px rgb(var(--azure-500-rgb) / .55),
    inset 0 1px 0 var(--edge-solid);
}
.btn--solid::before {
  background: linear-gradient(180deg, var(--film-solid-rim), var(--film-wash-mid) 55%, rgb(var(--violet-500-rgb) / .3));
}
.btn--solid:hover {
  background-color: var(--azure-500);
  background-image: linear-gradient(180deg, var(--azure-500) 0%, var(--azure-600) 78%);
  box-shadow:
    0 2px 5px rgb(var(--azure-600-rgb) / .3),
    0 14px 34px -8px rgb(var(--azure-500-rgb) / .6),
    inset 0 1px 0 var(--edge-solid-hi);
}
.btn--solid:active { background-image: none; background-color: var(--azure-600); }
.btn--solid[disabled] { background-image: none; background-color: rgb(var(--azure-300-rgb) / .5); color: var(--bg-lift); }

/* --- ghost: no fill, a 1px azure ring --- */
.btn--ghost {
  color: var(--ink-900);
  background-color: var(--ctl-faint);
  background-image: none;
  box-shadow: inset 0 0 0 1px var(--azure-100), 0 6px 18px -14px rgb(var(--shade-rgb) / .5);
}
.btn--ghost::before { opacity: .5; }
.btn--ghost:hover {
  background-color: var(--ctl-ghost-hi);
  box-shadow: inset 0 0 0 1px var(--azure-300), 0 10px 30px -8px rgb(var(--azure-500-rgb) / .45);
}
.btn--ghost:active { background-color: rgb(var(--azure-100-rgb) / .7); }


/* ===== 07 · ORB ======================================================== */

.orb {
  position: absolute;
  z-index: 0;
  width: var(--orb-size, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: calc(.55 * var(--orb-k));
  background:
    radial-gradient(circle at 34% 30%,
      rgb(var(--azure-300-rgb) / .95) 0%,
      rgb(var(--azure-500-rgb) / .85) 30%,
      rgb(var(--violet-500-rgb) / .7) 58%,
      rgb(var(--cyan-400-rgb) / .45) 82%,
      rgb(var(--cyan-400-rgb) / 0) 100%);
  filter: blur(clamp(28px, 5vw, 64px));
}

/* Signal rings: three concentric hairlines drawn in one gradient layer, then
   scaled outward and faded on a 6s loop. Two staggered copies keep a ring
   always travelling. (Deviation, §3.3: layered `box-shadow` cannot produce
   thin rings with gaps — outer shadows always fill from the border box out —
   so the ring set is drawn with hard-stop radial gradients instead.) */
.orb::before,
.orb::after {
  content: '';
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgb(var(--azure-300-rgb) / 0) 0 41%,
    var(--glass-edge) 41% calc(41% + 1px),
    rgb(var(--azure-300-rgb) / 0) calc(41% + 1px) 63%,
    rgb(var(--azure-300-rgb) / .8) 63% calc(63% + 1px),
    rgb(var(--azure-300-rgb) / 0) calc(63% + 1px) 86%,
    rgb(var(--violet-500-rgb) / .55) 86% calc(86% + 1px),
    rgb(var(--azure-300-rgb) / 0) calc(86% + 1px) 100%);
  opacity: 0;
  animation: orb-ring 6s var(--ease-out) infinite;
}
.orb::after { animation-delay: 3s; }

@keyframes orb-ring {
  0%   { transform: scale(.42); opacity: 0; }
  14%  { opacity: .85; }
  100% { transform: scale(1.55); opacity: 0; }
}

.orb--xl { --orb-size: clamp(420px, 52vw, 760px); }
.orb--md { --orb-size: clamp(260px, 30vw, 440px); opacity: calc(.42 * var(--orb-k)); }
.orb--sm { --orb-size: clamp(180px, 22vw, 300px); opacity: calc(.34 * var(--orb-k)); }


/* ===== 08 · VERTICAL RULE FRAMING ====================================== */

.rules { display: none; }

@media (min-width: 768px) {
  .rules {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--z-rules);
    pointer-events: none;
  }
  .rules > span {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--rule);
    /* three segments, two joins */
    background-image: linear-gradient(to bottom,
      rgb(var(--ink-300-rgb) / .22) 0 31%,
      transparent 31% 35%,
      rgb(var(--ink-300-rgb) / .22) 35% 65%,
      transparent 65% 69%,
      rgb(var(--ink-300-rgb) / .22) 69% 100%);
  }
  .rules > span:first-child { left: calc(var(--gutter) / 2); }
  .rules > span:last-child  { right: calc(var(--gutter) / 2 + var(--sbw, 0px)); }

  /* the two `+` joins, drawn — not typed */
  .rules > span::before,
  .rules > span::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 11px;
    height: 11px;
    translate: -50% -50%;
    background-image:
      linear-gradient(to right, rgb(var(--ink-300-rgb) / .45) 0 100%),
      linear-gradient(to bottom, rgb(var(--ink-300-rgb) / .45) 0 100%);
    background-size: 100% var(--rule), var(--rule) 100%;
    background-position: center, center;
    background-repeat: no-repeat;
  }
  .rules > span::before { top: 33%; }
  .rules > span::after  { top: 67%; }
}


/* ===== 09 · HEADER ===================================================== */

.hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-hdr);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--hdr-h);
  padding-inline: var(--gutter) calc(var(--gutter) + var(--sbw, 0px));
  padding-block: 10px;
}

/* Material layer sits behind the content so the scroll edge fade never
   dims the logo — an edge effect, not a 1px divider. */
.hdr::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgb(var(--bg-rgb) / calc(var(--scrolled) * .55));
  box-shadow: 0 10px 30px -22px rgb(var(--shade-rgb) / calc(var(--scrolled) * .85));
  -webkit-mask-image: linear-gradient(to bottom, #000 0 64%, rgba(0,0,0,.35) 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0 64%, rgba(0,0,0,.35) 88%, transparent 100%);
  transition: background-color var(--t-fast) linear;
}
.hdr.is-stuck::before {
  -webkit-backdrop-filter: blur(calc(var(--scrolled) * 18px)) saturate(calc(100% + var(--scrolled) * 70%));
          backdrop-filter: blur(calc(var(--scrolled) * 18px)) saturate(calc(100% + var(--scrolled) * 70%));
}

.hdr__logo {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--ink-900);
  border-radius: var(--r-sm);
  transition: opacity var(--t-fast) var(--ease-out);
}
.hdr__logo img {
  width: auto;
  height: clamp(26px, 3.2vw, 32px);
  object-fit: contain;
}
.hdr__logo span {
  font-family: var(--font-display);
  font-size: clamp(.75rem, 1.1vw, .8125rem);
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.15;
  display: inline-flex;
  flex-direction: column;
}
.hdr__logo em { font-weight: 300; color: var(--ink-500); letter-spacing: .2em; }
.hdr__logo:hover { opacity: .68; }
.hdr__logo:active { opacity: .5; }

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .55rem 1.05rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-900);
  background-color: var(--ctl-soft);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
          backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 0 0 1px var(--azure-100), inset 0 1px 0 var(--glass-edge),
              0 6px 18px -14px rgb(var(--shade-rgb) / .6);
  transition: transform 100ms var(--ease-out), background-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.menu-btn:hover { background-color: var(--ctl-hi); box-shadow: inset 0 0 0 1px var(--azure-300), inset 0 1px 0 var(--edge-hi), 0 8px 22px -12px rgb(var(--azure-500-rgb) / .5); }
.menu-btn:active { transform: scale(.97); transition-duration: 100ms; }
.menu-btn:focus-visible { outline: 2px solid var(--azure-500); outline-offset: 3px; }

.menu-btn__lines {
  position: relative;
  display: block;
  width: 18px;
  height: 12px;
  flex: none;
}
.menu-btn__lines i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.menu-btn__lines i:first-child { top: 1px; }
.menu-btn__lines i:last-child  { bottom: 1px; }
.menu-btn:hover .menu-btn__lines i:first-child { transform: translateY(-1px); }
.menu-btn:hover .menu-btn__lines i:last-child  { transform: translateY(1px); }

.menu-btn[aria-expanded="true"] .menu-btn__lines i:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:last-child  { transform: translateY(-4.25px) rotate(-45deg); }

.menu-btn__text { display: none; }
@media (min-width: 640px) { .menu-btn__text { display: inline; } }


/* ===== 10 · SLIDE-IN MENU ============================================== */

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
}
.menu[hidden] { display: none; }

.menu__scrim {
  position: absolute;
  inset: 0;
  background-color: var(--scrim);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out);
  cursor: pointer;
}
.menu.is-open .menu__scrim { opacity: 1; }

.menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(100%, 460px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 5vh, 48px);
  padding: calc(var(--hdr-h) + 20px) clamp(24px, 6vw, 52px) clamp(32px, 6vh, 56px);
  border-radius: var(--r-xl) 0 0 var(--r-xl);

  /* Control-Center panel: the page stays faintly visible behind it. */
  background-color: var(--panel-fill);
  background-image: linear-gradient(200deg, var(--film-panel), rgb(var(--azure-100-rgb) / .22));
  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(var(--panel-bright));
          backdrop-filter: blur(30px) saturate(180%) brightness(var(--panel-bright));
  box-shadow: -2px 0 8px rgb(var(--shade-rgb) / .06),
              -28px 0 70px -20px rgb(var(--shade-rgb) / .32),
              inset 1px 0 0 var(--glass-edge);

  transform: translate3d(101%, 0, 0);
  transition: transform 420ms var(--ease-in-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu.is-open .menu__panel {
  transform: translate3d(0, 0, 0);
  transition-duration: 480ms;
  transition-timing-function: var(--ease-out);
}

.menu__close {
  position: absolute;
  top: clamp(16px, 2.4vh, 26px);
  right: clamp(20px, 5vw, 44px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  color: var(--ink-900);
  background-color: var(--ctl);
  box-shadow: inset 0 0 0 1px var(--azure-100);
  transition: transform 100ms var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.menu__close svg { width: 20px; height: 20px; }
.menu__close:hover { background-color: var(--ctl-hi-close); }
.menu__close:active { transform: scale(.94); transition-duration: 100ms; }
.menu__close:focus-visible { outline: 2px solid var(--azure-500); outline-offset: 3px; }

.menu__list {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}
.menu__list li + li { border-top: var(--rule) solid rgb(var(--ink-300-rgb) / .3); }

.menu__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(.7rem, 1.7vh, 1.1rem);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.1;
  color: var(--ink-900);
  text-decoration: none;
  opacity: 0;
  translate: 34px 0;
  transition:
    opacity 460ms var(--ease-out),
    translate 460ms var(--ease-out),
    color var(--t-fast) var(--ease-out);
}
.menu.is-open .menu__list a {
  opacity: 1;
  translate: none;
  transition-delay: calc(var(--i, 0) * 60ms + 90ms);
}
.menu:not(.is-open) .menu__list a { transition-delay: 0ms; }

.menu__list a:hover { color: var(--azure-600); }
.menu__list a:hover .menu__arrow { transform: translateX(5px); opacity: 1; }
.menu__list a:active { color: var(--azure-600); opacity: .7; }
.menu__list a:focus-visible { outline: 2px solid var(--azure-500); outline-offset: 4px; }

.menu__list a[aria-current="page"] { color: var(--azure-600); }
.menu__list a[aria-current="page"] .menu__arrow { opacity: 1; }

.menu__arrow {
  width: 20px;
  height: 20px;
  flex: none;
  opacity: .42;
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}

.menu__foot {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding-top: clamp(16px, 3vh, 26px);
  border-top: var(--rule) solid rgb(var(--ink-300-rgb) / .3);
  opacity: 0;
  translate: 0 14px;
  transition: opacity 460ms var(--ease-out) 80ms, translate 460ms var(--ease-out) 80ms;
}
.menu.is-open .menu__foot { opacity: 1; translate: none; transition-delay: 400ms; }

.menu__mail {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  font-weight: 400;
  letter-spacing: -.012em;
  color: var(--azure-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(var(--azure-300-rgb) / .8);
  text-underline-offset: .22em;
  transition: text-decoration-color var(--t-fast) var(--ease-out), text-underline-offset var(--t-fast) var(--ease-out);
}
.menu__mail:hover { text-decoration-color: var(--azure-600); text-underline-offset: .16em; }


/* ===== 11 · REVEAL ===================================================== */

/* `translate` carries the entrance so component `transform` hovers stay free. */
[data-reveal] {
  opacity: 0;
  translate: 0 28px;
  filter: blur(5px);
  transition:
    opacity var(--t-slow) var(--ease-out),
    translate var(--t-slow) var(--ease-out),
    filter var(--t-slow) var(--ease-out);
}
[data-reveal].is-revealed,
[data-reveal].is-in,
[data-reveal][data-revealed] { opacity: 1; translate: none; filter: none; }

[data-reveal-stagger] > * {
  opacity: 0;
  translate: 0 22px;
  transition:
    opacity var(--t-slow) var(--ease-out),
    translate var(--t-slow) var(--ease-out);
}
[data-reveal-stagger] > [data-revealed],
[data-reveal-stagger] > .is-revealed { opacity: 1; translate: none; }

@media (scripting: none) {
  [data-reveal], [data-reveal-stagger] > * {
    opacity: 1 !important;
    translate: none !important;
    filter: none !important;
  }
}


/* ===== 12 · HERO ======================================================= */

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  /* The mesh is painted on the container too, so the hero is never bare
     for the frames before WebGL boots — or if it never does. */
  background-color: var(--bg);
  background-image:
    radial-gradient(72% 58% at 12% 14%, rgb(var(--azure-300-rgb) / calc(.78 * var(--mesh-k))) 0%, rgb(var(--azure-300-rgb) / 0) 62%),
    radial-gradient(58% 62% at 84% 8%,  rgb(var(--violet-500-rgb) / calc(.5 * var(--mesh-k))) 0%, rgb(var(--violet-500-rgb) / 0) 60%),
    radial-gradient(66% 54% at 92% 74%, rgb(var(--cyan-400-rgb) / calc(.5 * var(--mesh-k))) 0%, rgb(var(--cyan-400-rgb) / 0) 64%),
    radial-gradient(80% 66% at 30% 96%, rgb(var(--azure-500-rgb) / calc(.42 * var(--mesh-k))) 0%, rgb(var(--azure-500-rgb) / 0) 66%),
    radial-gradient(120% 96% at 50% 40%, rgb(var(--bg-lift-rgb) / .9) 0%, rgb(var(--bg-lift-rgb) / 0) 58%),
    linear-gradient(168deg, var(--bg-lift) 0%, var(--bg) 44%, var(--bg-deep) 100%);
}

.liquid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* The static mesh: what non-WebGL and reduced-motion visitors actually see.
   Full mesh again + caustic bands + vignette, so it stands on its own. */
.hero__bg > .hero__bg--static {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out);
  background-color: var(--bg);
  background-image:
    /* thin caustic highlight bands */
    linear-gradient(104deg, rgba(255,255,255,0) 30%, var(--film-caustic) 40%, rgba(255,255,255,0) 46%),
    linear-gradient(104deg, rgba(255,255,255,0) 54%, var(--film-caustic-2) 61%, rgba(255,255,255,0) 66%),
    /* the mesh */
    radial-gradient(64% 52% at 10% 10%,  rgb(var(--azure-300-rgb) / calc(.85 * var(--mesh-k))) 0%, rgb(var(--azure-300-rgb) / 0) 60%),
    radial-gradient(52% 58% at 82% 4%,   rgb(var(--violet-500-rgb) / calc(.58 * var(--mesh-k))) 0%, rgb(var(--violet-500-rgb) / 0) 58%),
    radial-gradient(58% 50% at 96% 66%,  rgb(var(--cyan-400-rgb) / calc(.58 * var(--mesh-k))) 0%, rgb(var(--cyan-400-rgb) / 0) 62%),
    radial-gradient(74% 62% at 26% 92%,  rgb(var(--azure-500-rgb) / calc(.5 * var(--mesh-k))) 0%, rgb(var(--azure-500-rgb) / 0) 64%),
    radial-gradient(44% 40% at 58% 46%,  rgb(var(--violet-500-rgb) / calc(.3 * var(--mesh-k))) 0%, rgb(var(--violet-500-rgb) / 0) 70%),
    /* soft vignette so the composition has a centre */
    radial-gradient(112% 92% at 46% 44%, rgb(var(--bg-lift-rgb) / .94) 0%, rgb(var(--bg-lift-rgb) / .1) 50%, rgb(var(--bg-deep-rgb) / .5) 100%),
    linear-gradient(168deg, var(--bg-lift), var(--bg) 46%, var(--bg-deep));
}
/* liquid.js puts the modifier on .hero__bg when WebGL stands down. */
.hero__bg.hero__bg--static > .hero__bg--static { opacity: 1; }
html:not(.js) .hero__bg > .hero__bg--static { opacity: 1; }

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}
.hero__video[hidden] { display: none; }
/* azure duotone pass over the footage */
.hero__bg:has(.hero__video:not([hidden]))::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--azure-500);
  mix-blend-mode: color;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  gap: clamp(30px, 6vh, 60px);
  align-content: end;
  padding-block: calc(var(--hdr-h) + clamp(28px, 6vh, 60px)) clamp(44px, 9vh, 92px);
}

.hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 30px);
}
/* A real scrim: ink stays ≥9:1 even over the most saturated shader frame. */
.hero__copy::before {
  content: '';
  position: absolute;
  inset: clamp(-26px, -4vw, -14px) clamp(-30px, -5vw, -16px);
  z-index: -1;
  border-radius: var(--r-xl);
  background:
    radial-gradient(118% 128% at 6% 26%,
      rgb(var(--bg-rgb) / .94) 0%,
      rgb(var(--bg-rgb) / .78) 44%,
      rgb(var(--bg-rgb) / 0) 82%);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
          backdrop-filter: blur(9px) saturate(120%);
  -webkit-mask-image: radial-gradient(118% 128% at 6% 26%, #000 0%, #000 46%, transparent 84%);
          mask-image: radial-gradient(118% 128% at 6% 26%, #000 0%, #000 46%, transparent 84%);
  pointer-events: none;
}
.hero__copy .t-display { max-width: 15ch; }
.hero__copy .t-lead { max-width: 46ch; color: var(--ink-700); font-weight: 400; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(4px, 1vh, 12px);
}

@media (min-width: 768px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.24fr) minmax(268px, .76fr);
    grid-template-areas: "copy card";
    align-content: stretch;
    column-gap: clamp(32px, 5vw, 80px);
  }
  .hero__copy { grid-area: copy; align-self: start; padding-top: clamp(12px, 4vh, 48px); }
  .stat-card { grid-area: card; justify-self: end; align-self: end; width: 100%; max-width: 400px; }
}


/* ===== 13 · STAT CARD ================================================== */

.stat-card {
  position: relative;
  padding: clamp(24px, 3vw, 34px) clamp(24px, 3vw, 34px) clamp(52px, 6vw, 68px);
}
.stat-card > .t-h3 { color: var(--ink-900); margin-bottom: clamp(16px, 2.4vh, 24px); }

.stat-card__list {
  display: grid;
  gap: clamp(14px, 2.2vh, 22px);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: clamp(12px, 1.8vh, 18px);
  border-bottom: var(--rule) solid rgb(var(--ink-300-rgb) / .34);
}
.stat:last-child { border-bottom: 0; padding-bottom: 0; }

.stat__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--ink-900);
  line-height: 1;
  letter-spacing: -.035em;
}

.stat__label { color: var(--ink-500); }

.stat-card__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(38px, 5vw, 48px);
  color: var(--azure-500);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.stat-card__wave-track { color: var(--azure-300); }

/* The one place a non-compositor property animates: the brief names a
   stroke-dash waveform, and there is no transform equivalent. Tiny path,
   killed outright under reduced motion. */
.stat-card__pulse { animation: wave-run 3.2s linear infinite; }
@keyframes wave-run {
  from { stroke-dashoffset: 320; }
  to   { stroke-dashoffset: 0; }
}


/* ===== 14 · TABS → ACCORDION =========================================== */

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

.tabs__rail { display: contents; }
.tabs__stage { display: contents; }

.tabs__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  min-height: 56px;
  padding: 1rem 2.4rem 1rem 0;
  text-align: left;
  font-family: var(--font-display);
  color: var(--ink-700);
  border-bottom: var(--rule) solid rgb(var(--ink-300-rgb) / .38);
  transition: color var(--t-fast) var(--ease-out), padding-left var(--t-mid) var(--ease-out);
}
.tabs__tab:hover { color: var(--ink-900); }
.tabs__tab:active { opacity: .72; }
.tabs__tab:focus-visible { outline: 2px solid var(--azure-500); outline-offset: -2px; border-radius: var(--r-sm); }
.tabs__tab[aria-selected="true"], .tabs__tab.is-active { color: var(--ink-900); }

.tabs__n {
  flex: none;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-500);
  transition: color var(--t-fast) var(--ease-out);
}
.tabs__tab[aria-selected="true"] .tabs__n,
.tabs__tab.is-active .tabs__n { color: var(--azure-600); }

.tabs__name {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.25;
}

/* Accordion chevron — drawn from two hairlines, no glyph. */
.tabs__tab::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: var(--ink-400);
  translate: 0 -70%;
  rotate: 45deg;
  transition: rotate var(--t-mid) var(--ease-out), translate var(--t-mid) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.tabs__tab[aria-expanded="true"]::after { rotate: -135deg; translate: 0 -20%; color: var(--azure-600); }

.tabs__marker { display: none; }
.tabs__marker[hidden] { display: none; }

.tabs__panel {
  display: flex;
  flex-direction: column;
  gap: .95rem;
  align-items: flex-start;
  padding: clamp(18px, 3vw, 26px) 0 clamp(26px, 4vw, 34px);
}
.tabs__panel[hidden] { display: none; }

.tabs__tagline { color: var(--ink-900); }
.tabs__note { color: var(--ink-500); font-size: .9375rem; }

.tabs__list {
  display: grid;
  gap: .55rem;
  width: 100%;
  margin-top: .25rem;
  color: var(--ink-500);
  max-width: 60ch;
}
.tabs__list li {
  position: relative;
  padding-left: 1.4rem;
  line-height: 1.5;
}
.tabs__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgb(var(--azure-300-rgb) / .9);
  box-shadow: inset 0 0 0 1px rgb(var(--azure-600-rgb) / .35);
}

.tabs__stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin-top: .6rem;
  padding: .9rem 1.15rem;
  border-radius: var(--r-md);
  color: var(--ink-700);
}
.tabs__stat:not(.glass) {
  background-color: rgb(var(--azure-100-rgb) / .55);
  box-shadow: inset 0 0 0 1px rgb(var(--azure-300-rgb) / .5), inset 0 1px 0 var(--glass-edge);
}
.tabs__stat strong, .tabs__stat-value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}
.tabs__stat-label { color: var(--ink-500); font-size: .95rem; }

.tabs__more { margin-top: .7rem; }

/* interleave rail + stage into one accordion column below 768 */
.tabs__tab:nth-child(1) { order: 1 } .tabs__panel:nth-child(1) { order: 2 }
.tabs__tab:nth-child(2) { order: 3 } .tabs__panel:nth-child(2) { order: 4 }
.tabs__tab:nth-child(3) { order: 5 } .tabs__panel:nth-child(3) { order: 6 }
.tabs__tab:nth-child(4) { order: 7 } .tabs__panel:nth-child(4) { order: 8 }
.tabs__tab:nth-child(5) { order: 9 } .tabs__panel:nth-child(5) { order: 10 }
.tabs__marker { order: 20; }

@media (min-width: 768px) {
  .tabs {
    display: grid;
    grid-template-columns: minmax(230px, 33%) minmax(0, 1fr);
    gap: clamp(26px, 3.4vw, 56px);
    align-items: start;
  }

  .tabs__rail {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 18px;
  }
  .tabs__tab { padding: 1.05rem 1rem 1.05rem 0; }
  .tabs__tab::after { display: none; }
  .tabs__tab:hover { padding-left: 6px; }
  .tabs__tab[aria-selected="true"] { padding-left: 6px; }

  .tabs__marker {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: var(--marker-h, 56px);
    border-radius: var(--r-pill);
    background-image: linear-gradient(180deg, var(--azure-500), var(--azure-600));
    box-shadow: 0 2px 10px -4px rgb(var(--azure-500-rgb) / .8);
    transform: translate3d(0, var(--marker-y, 0px), 0);
    transition: transform var(--t-mid) var(--ease-out), height var(--t-mid) var(--ease-out);
    pointer-events: none;
  }
  .tabs__marker[hidden] { display: none; }

  .tabs__stage {
    display: grid;
    min-height: 320px;
    padding: 0;
  }
  .tabs__panel {
    grid-area: 1 / 1;
    padding: clamp(28px, 3.2vw, 44px);
    opacity: 0;
    translate: 0 12px;
    transition: opacity 380ms var(--ease-out), translate 380ms var(--ease-out);
  }
  .tabs__panel.is-active { opacity: 1; translate: none; }
  .tabs__panel:not(.is-active) { pointer-events: none; }
}

@media (max-width: 767.98px) {
  .tabs__panel {
    padding-inline: clamp(14px, 4vw, 20px);
    margin-bottom: 10px;
    border-radius: var(--r-md);
    background-color: rgb(var(--bg-lift-rgb) / .72);
    box-shadow: inset 0 0 0 1px rgb(var(--azure-100-rgb) / .8);
  }
  .tabs__tab { padding-right: 2.6rem; }
}


/* ===== 15 · WORK TILES ================================================= */

.tiles {
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
  grid-template-columns: 1fr;
}

.tile {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: clip;
  border-radius: var(--r-lg);
  background-color: var(--bg-deep);
  text-decoration: none;
  color: var(--ink-900);
  box-shadow: var(--glass-shadow);
  transition: box-shadow var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
}
.tile[hidden] { display: none; }
.tile.is-out { opacity: 0; pointer-events: none; }

.tile__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: clip;
  border-radius: inherit;
  background-color: var(--media-void);
}
.tile__media > .poster,
.tile__media > img,
.tile__media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform 700ms var(--ease-out);
}
.poster { border-radius: inherit; }

/* Azure edge-light: one sweep across the rim on hover. */
.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(104deg,
    rgba(255,255,255,0) 34%,
    rgb(var(--azure-300-rgb) / .55) 46%,
    var(--film-sweep) 50%,
    rgb(var(--azure-300-rgb) / .55) 54%,
    rgba(255,255,255,0) 66%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  padding: 1.5px;
  transform: translate3d(-40%, 0, 0);
}

.tile__meta {
  position: absolute;
  z-index: 2;
  left: clamp(10px, 1.6vw, 14px);
  right: clamp(10px, 1.6vw, 14px);
  bottom: clamp(10px, 1.6vw, 14px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: clamp(13px, 1.8vw, 17px) clamp(15px, 2vw, 19px);
  border-radius: var(--r-md);
  /* .82 fill keeps secondary ink ≥5:1 even over the darkest poster */
  background-color: var(--tile-plate);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 2px 6px rgb(var(--shade-rgb) / .1),
              0 14px 32px -18px rgb(var(--shade-rgb) / .5),
              inset 0 1px 0 var(--edge-mid);
  transform: translate3d(0, 12px, 0);
  transition: transform var(--t-mid) var(--ease-out),
              background-color var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}

.tile__name {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.24;
  color: var(--ink-900);
}
.tile__tag {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-700);
}

.tile:hover,
.tile:focus-visible { box-shadow: var(--glass-shadow-hi); }
.tile:hover .tile__media > .poster,
.tile:hover .tile__media > img,
.tile:hover .tile__media > video,
.tile:focus-visible .tile__media > .poster { transform: scale(1.05); }
.tile:hover .tile__meta,
.tile:focus-visible .tile__meta {
  transform: none;
  background-color: var(--tile-plate-hi);
  box-shadow: 0 3px 10px rgb(var(--shade-rgb) / .12),
              0 22px 46px -20px rgb(var(--shade-rgb) / .55),
              inset 0 1px 0 var(--edge-hi-2);
}
.tile:hover::after,
.tile:focus-visible::after { animation: tile-sweep 900ms var(--ease-out) 1; }
.tile:active { transform: scale(.99); transition-duration: 100ms; }
.tile:focus-visible { outline: 2px solid var(--azure-500); outline-offset: 3px; }

@keyframes tile-sweep {
  0%   { opacity: 0; transform: translate3d(-45%, 0, 0); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(45%, 0, 0); }
}

@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* ===== 16 · SCROLL-LINKED PIPELINE ===================================== */

.pipe {
  position: relative;
  height: auto;
  padding-block: 0;
}

.pipe__sticky {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5vh, 56px);
  padding-block: clamp(64px, 10vh, 120px);
}
.pipe__sticky > * {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.pipe__icons {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 3vw, 34px);
  padding-block: 6px;
}
/* connector track + progress fill */
.pipe__icons::before,
.pipe__icons::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  top: calc(var(--pipe-chip, 56px) / 2 + 6px);
  height: var(--rule);
  border-radius: var(--r-pill);
}
.pipe__icons::before { background-color: rgb(var(--ink-300-rgb) / .42); }
.pipe__icons::after {
  background-image: linear-gradient(90deg, var(--azure-500), var(--violet-500));
  transform: scaleX(var(--progress));
  transform-origin: left center;
  transition: transform 120ms linear;
}

.pipe__icon {
  position: relative;
  z-index: 1;
  flex: 1 1 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
  color: var(--ink-500);
  transition: color var(--t-mid) var(--ease-out);
}
.pipe__icon > svg,
.pipe__glyph {
  width: var(--pipe-chip, 56px);
  height: var(--pipe-chip, 56px);
  flex: none;
  padding: 14px;
  border-radius: var(--r-pill);
  background-color: rgb(var(--bg-lift-rgb) / .82);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
          backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgb(var(--azure-100-rgb) / .95), inset 0 1px 0 var(--glass-edge),
              0 4px 14px -10px rgb(var(--shade-rgb) / .6);
  color: var(--ink-500);
  transition: background-color var(--t-mid) var(--ease-out),
              color var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out);
}
.pipe__icon > span:not(.pipe__n) {
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .03em;
}
.pipe__n {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-500);
  order: -1;
}

/* ring pulse on the live stage */
.pipe__icon::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: var(--pipe-chip, 56px);
  height: var(--pipe-chip, 56px);
  translate: -50% 0;
  border-radius: 50%;
  border: 1.5px solid rgb(var(--azure-500-rgb) / .75);
  opacity: 0;
  pointer-events: none;
}
.pipe__icon[data-active] { color: var(--ink-900); }
.pipe__icon[data-active] > svg,
.pipe__icon[data-active] .pipe__glyph {
  background-color: var(--azure-500);
  background-image: linear-gradient(180deg, var(--azure-500), var(--azure-600));
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 var(--edge-chip),
              0 8px 24px -10px rgb(var(--azure-500-rgb) / .7);
  transform: translateY(-2px);
}
.pipe__icon[data-active]::after { animation: pipe-pulse 1.9s var(--ease-out) infinite; }

@keyframes pipe-pulse {
  0%   { opacity: .8; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.65); }
}

.pipe__copy { position: relative; }

.pipe__stage {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding-block: clamp(18px, 3vh, 28px);
  opacity: 0;
  translate: 0 20px;
  transition: opacity var(--t-mid) var(--ease-out), translate var(--t-mid) var(--ease-out);
}
.pipe__stage[data-revealed], .pipe__stage.is-revealed { opacity: 1; translate: none; }
.pipe__stage .t-lead { max-width: 58ch; }

.pipe__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  padding-top: clamp(20px, 3vh, 30px);
  border-top: var(--rule) solid rgb(var(--ink-300-rgb) / .4);
}
.pipe__foot .t-body { flex: 1 1 26ch; max-width: 52ch; }

@media (min-width: 768px) {
  .pipe { height: 420vh; }
  /* Home carries the condensed strip (brief §4.1) — the same five stages, but
     it must not cost four screens of scroll on the way to Why Motivate. */
  [data-page="home"] .pipe { height: 260vh; }
  .pipe__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    justify-content: center;
    padding-block: calc(var(--hdr-h) + 24px) clamp(32px, 6vh, 64px);
  }
  .pipe__icons { flex-wrap: nowrap; --pipe-chip: 64px; }
  .pipe__copy { display: grid; min-height: 200px; }
  .pipe__stage {
    grid-area: 1 / 1;
    justify-content: center;
    opacity: 0;
    translate: 0 14px;
    pointer-events: none;
  }
  .pipe__stage[data-active] { opacity: 1; translate: none; pointer-events: auto; }
}


/* ===== 17 · PILLARS ==================================================== */

.pillars {
  display: grid;
  gap: clamp(16px, 2.4vw, 26px);
  grid-template-columns: 1fr;
}

.pillar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform var(--t-mid) var(--ease-out),
              background-color var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pillar:hover { transform: translateY(-3px); }
}

.pillar__mark {
  width: 44px;
  height: 44px;
  flex: none;
  color: var(--azure-600);
  opacity: .9;
}
.pillar__body { display: flex; flex-direction: column; gap: .8rem; }
.pillar .t-h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
.pillar .t-body { color: var(--ink-500); }

.pillar--lead .pillar__mark { width: 88px; height: 88px; opacity: .7; }

@media (min-width: 640px) {
  .pillar--lead { flex-direction: row; align-items: flex-start; gap: clamp(20px, 3vw, 38px); }
}
@media (min-width: 1024px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar--lead { grid-column: 1 / -1; align-items: center; }
  .pillar--lead .t-h2 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
}


/* ===== 18 · MARQUEE ==================================================== */

.marquee {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vw, 34px);
  padding-block: clamp(8px, 2vh, 18px);
  overflow: clip;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__row {
  display: flex;
  width: max-content;
  gap: clamp(34px, 5vw, 76px);
  will-change: transform;
  animation: marquee-ltr 64s linear infinite;
}
.marquee__row[data-dir="rtl"] {
  animation-name: marquee-rtl;
  animation-duration: 78s;
}

.marquee__set {
  display: flex;
  align-items: center;
  gap: clamp(34px, 5vw, 76px);
  flex: none;
}

@keyframes marquee-ltr {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--dist, 1400px) * -1), 0, 0); }
}
@keyframes marquee-rtl {
  from { transform: translate3d(calc(var(--dist, 1400px) * -1), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.marquee:hover .marquee__row,
.marquee:focus-within .marquee__row { animation-play-state: paused; }

.lg {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Each logo carries its own optical height in --lg-h: a square mark and a
     long wordmark cannot share one height and look balanced. --lg-k scales the
     whole wall for smaller screens. */
  height: calc(var(--lg-h, 40) * var(--lg-k, 1) * 1px);
  flex: none;
}
.marquee { --lg-k: .78; }
@media (min-width: 640px) { .marquee { --lg-k: .88; } }
@media (min-width: 1024px) { .marquee { --lg-k: 1; } }

.lg img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
}
.lg__mono {
  opacity: .78;
  transition: opacity 220ms var(--ease-out);
}
.lg__color {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}
.lg:hover .lg__mono { opacity: 0; }
.lg:hover .lg__color { opacity: 1; }


/* ===== 19 · RESULTS CAROUSEL =========================================== */

.carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 28px);
}

.carousel__viewport {
  /* the slide must size from the viewport, never from the shrink-to-fit
     flex track — a percentage there resolves circularly and blows the page out */
  container-type: inline-size;
  overflow: clip;
  padding-block: 14px;
  margin-block: -14px;
  cursor: grab;
  touch-action: pan-y;
}
.carousel__viewport:active { cursor: grabbing; }

.carousel__track {
  display: flex;
  gap: clamp(14px, 2vw, 24px);
  list-style: none;
  will-change: transform;
}

.carousel__slide {
  flex: 0 0 auto;
  width: 86vw;
  width: min(100cqi, 560px);
  display: flex;
}
.carousel__slide > .glass {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(26px, 3.4vw, 40px);
  border-radius: var(--r-xl);
  opacity: .58;
  transition: opacity var(--t-mid) var(--ease-out),
              background-color var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.carousel__slide.is-active > .glass { opacity: 1; }
.carousel__slide .t-lead { max-width: 46ch; }
.carousel__slide * { -webkit-user-select: none; user-select: none; }

.carousel__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin-top: auto;
  padding-top: clamp(14px, 2vh, 22px);
  border-top: var(--rule) solid rgb(var(--ink-300-rgb) / .4);
}
.carousel__stats li { display: flex; flex-direction: column; gap: 2px; }

.carousel__bar {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
}

.carousel__arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r-pill);
  color: var(--ink-900);
  background-color: var(--ctl);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
          backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 0 0 1px var(--azure-100), inset 0 1px 0 var(--glass-edge),
              0 6px 18px -14px rgb(var(--shade-rgb) / .6);
  transition: transform 100ms var(--ease-out), background-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.carousel__arrow svg { width: 18px; height: 18px; }
.carousel__arrow:hover {
  background-color: var(--ctl-hi-arrow);
  color: var(--azure-600);
  box-shadow: inset 0 0 0 1px var(--azure-300), inset 0 1px 0 var(--edge-hi),
              0 10px 26px -12px rgb(var(--azure-500-rgb) / .55);
}
.carousel__arrow:active { transform: scale(.94); transition-duration: 100ms; }
.carousel__arrow:focus-visible { outline: 2px solid var(--azure-500); outline-offset: 3px; }
.carousel__arrow:disabled { color: var(--ink-300); box-shadow: inset 0 0 0 1px rgb(var(--ink-300-rgb) / .4); cursor: not-allowed; transform: none; }

.carousel__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}
.carousel__dots li { display: flex; }
.carousel__dots button,
.carousel__dot {
  display: block;
  width: 44px;
  height: 44px;
  padding: 19px 14px;
  border-radius: var(--r-pill);
  background-clip: content-box;
  background-color: rgb(var(--ink-300-rgb) / .7);
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-mid) var(--ease-out);
}
.carousel__dots button:hover { background-color: var(--azure-300); }
.carousel__dots button:focus-visible { outline: 2px solid var(--azure-500); outline-offset: -8px; }
.carousel__dots button.is-active,
.carousel__dots button[aria-current="true"] {
  background-color: var(--azure-600);
  transform: scaleX(1.9);
}
.carousel__dots button:active { transform: scale(.9); transition-duration: 100ms; }


/* ===== 20 · CTA ======================================================== */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(72px, 12vh, 148px);
  background-color: var(--bg);
}
.cta-band > .orb {
  right: -8%;
  bottom: -30%;
  z-index: -1;
}

.cta-band__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(22px, 4vh, 38px);
  padding: clamp(34px, 6vw, 76px);
  text-align: left;
}
.cta-band__panel .t-h1 { letter-spacing: -.02em; }

.cta {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.4vh, 22px);
  padding: clamp(30px, 5vw, 60px);
}
.cta .t-lead { max-width: 54ch; }

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(6px, 1.4vh, 14px);
}

@media (min-width: 768px) {
  .cta-band__panel { align-items: center; text-align: center; }
  .cta-band__panel .t-h1 { max-width: 18ch; }
}


/* ===== 21 · SERVICES (svc) ============================================= */

.svc { padding-block: clamp(56px, 9vh, 118px); }

.svc .sec__inner {
  display: grid;
  gap: clamp(18px, 3vw, 30px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.svc__mark {
  display: inline-grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: var(--r-md);
  color: var(--azure-600);
  background-color: rgb(var(--bg-lift-rgb) / .8);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
          backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgb(var(--azure-100-rgb) / .95), inset 0 1px 0 var(--glass-edge),
              0 6px 20px -14px rgb(var(--shade-rgb) / .6);
}
.svc__icon { width: 40px; height: 40px; }

.svc__title {
  display: flex;
  flex-direction: column;
  gap: .28em;
}
.svc__title-name { color: var(--ink-900); }
.svc__title-tag {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--azure-600);
}

.svc__body { display: flex; flex-direction: column; gap: 1.05em; }
.svc__copy { color: var(--ink-500); }

.svc__list {
  display: grid;
  gap: .55rem;
  margin-top: .6em;
  padding-top: 1.2em;
  border-top: var(--rule) solid rgb(var(--ink-300-rgb) / .4);
  color: var(--ink-700);
  font-size: .9375rem;
}
.svc__list li { position: relative; padding-left: 1.4rem; }
.svc__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgb(var(--azure-300-rgb) / .9);
  box-shadow: inset 0 0 0 1px rgb(var(--azure-600-rgb) / .35);
}

.svc__stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-self: flex-start;
  max-width: 100%;
  gap: .5rem;
  padding: .9rem 1.15rem;
  border-radius: var(--r-md);
  background-color: rgb(var(--azure-100-rgb) / .55);
  box-shadow: inset 0 0 0 1px rgb(var(--azure-300-rgb) / .5), inset 0 1px 0 var(--glass-edge);
}
.svc__stat-value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}
.svc__stat-label { color: var(--ink-500); font-size: .95rem; }

.svc__partner {
  color: var(--ink-500);
  padding-top: .2em;
}

@media (min-width: 1024px) {
  .svc .sec__inner {
    grid-template-columns: 68px minmax(0, 26ch) minmax(0, 1fr);
    column-gap: clamp(26px, 3.4vw, 56px);
  }
  .svc__mark { grid-row: 1; position: sticky; top: calc(var(--hdr-h) + 32px); }
  .svc__title { grid-row: 1; position: sticky; top: calc(var(--hdr-h) + 32px); }
  .svc__body { grid-row: 1; }
}


/* ===== 22 · STEPS · PLEDGE · GETS ====================================== */

.steps {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  grid-template-columns: 1fr;
  counter-reset: step;
}
.steps__item {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--r-lg);
}
.steps__item .t-h3 {
  display: flex;
  align-items: baseline;
  gap: .7rem;
}
.steps__n {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--azure-600);
  flex: none;
}
.steps__item .t-body { color: var(--ink-500); }

@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps__item:first-child { grid-column: span 2; }
}

.pledge {
  padding: clamp(32px, 5.5vw, 68px);
  border-radius: var(--r-xl);
}
.pledge .t-h2 { max-width: 26ch; text-wrap: balance; }

.gets {
  display: grid;
  padding: clamp(10px, 2vw, 20px) clamp(22px, 3.4vw, 44px);
}
.gets__row {
  display: grid;
  gap: .35rem .5rem;
  padding-block: clamp(20px, 3vh, 30px);
  border-bottom: var(--rule) solid rgb(var(--ink-300-rgb) / .4);
}
.gets__row:last-child { border-bottom: 0; }
.gets dt { color: var(--ink-900); }
.gets dd { color: var(--ink-500); max-width: 62ch; }

@media (min-width: 768px) {
  .gets__row {
    grid-template-columns: minmax(0, 22ch) minmax(0, 1fr);
    column-gap: clamp(24px, 4vw, 64px);
    align-items: baseline;
  }
}


/* ===== 23 · WORK PAGE — filters · gallery · case · empty ============== */

.filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  margin-bottom: clamp(24px, 4vh, 40px);
  padding: 7px;
  border-radius: var(--r-pill);
  background-color: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(1.06);
          backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(1.06);
  box-shadow: inset 0 0 0 1px rgb(var(--azure-100-rgb) / .9), inset 0 1px 0 var(--glass-edge),
              var(--glass-shadow);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }

.filter {
  flex: none;
  min-height: 40px;
  padding: .5rem 1.1rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
  color: var(--ink-700);
  transition: background-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform 100ms var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.filter:hover { background-color: var(--ctl-hi); color: var(--ink-900); }
.filter:active { transform: scale(.96); transition-duration: 100ms; }
.filter:focus-visible { outline: 2px solid var(--azure-500); outline-offset: 2px; }
.filter[aria-pressed="true"],
.filter.is-active {
  color: var(--on-accent);
  background-color: var(--azure-600);
  background-image: linear-gradient(180deg, var(--azure-500), var(--azure-600) 62%);
  box-shadow: 0 1px 2px rgb(var(--azure-600-rgb) / .3),
              0 8px 20px -12px rgb(var(--azure-500-rgb) / .65),
              inset 0 1px 0 var(--edge-chip);
}
.filter[disabled] { color: var(--ink-300); cursor: not-allowed; transform: none; }

.gallery {
  display: grid;
  gap: clamp(14px, 2.2vw, 26px);
  grid-template-columns: 1fr;
}
.gallery__frame {
  position: relative;
  overflow: clip;
  padding: clamp(8px, 1vw, 12px);
  border-radius: var(--r-xl);
  background-color: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(1.06);
          backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(1.06);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge),
              inset 0 0 0 1px rgb(var(--azure-100-rgb) / .8);
}
.gallery__frame > :where(img, video, svg, .poster) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--r-xl) - 10px);
  aspect-ratio: 4 / 3;
}
.gallery__frame figcaption { padding: .9rem .4rem .25rem; color: var(--ink-500); font-size: .875rem; }

@media (min-width: 640px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.case { display: block; }
.case__head {
  padding-top: calc(var(--hdr-h) + clamp(48px, 10vh, 116px));
  padding-bottom: clamp(32px, 6vh, 68px);
}
.case__head .t-h1 { margin-bottom: .5em; }
.case__head .t-lead { max-width: 58ch; }

.case__info {
  display: grid;
  padding: clamp(10px, 2vw, 20px) clamp(22px, 3.4vw, 40px);
}
.case__row {
  display: grid;
  gap: .2rem .5rem;
  padding-block: clamp(14px, 2.2vh, 20px);
  border-bottom: var(--rule) solid rgb(var(--ink-300-rgb) / .4);
}
.case__row:last-child { border-bottom: 0; }
.case__row > :first-child {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.case__row > :last-child { color: var(--ink-900); font-family: var(--font-display); font-weight: 400; }

@media (min-width: 640px) {
  .case__row { grid-template-columns: minmax(0, 16ch) minmax(0, 1fr); align-items: baseline; }
}
@media (min-width: 1024px) {
  .case__info { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); }
}

.empty,
.tiles__empty,
[data-filter-empty] {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  margin: 0;
  padding: clamp(40px, 8vh, 84px) clamp(20px, 4vw, 40px);
  text-align: center;
  border-radius: var(--r-xl);
  color: var(--ink-500);
  background-color: rgb(var(--bg-lift-rgb) / .55);
  box-shadow: inset 0 0 0 1px rgb(var(--azure-100-rgb) / .9);
}
.empty[hidden], .tiles__empty[hidden], [data-filter-empty][hidden] { display: none; }
.empty .t-h3, .empty strong { color: var(--ink-900); }

[data-empty] { min-height: 240px; }


/* ===== 24 · FORM ======================================================= */

.form {
  position: relative;
  display: grid;
  gap: clamp(16px, 2.6vh, 24px);
  padding: clamp(24px, 4vw, 48px);
}

.form__field {
  position: relative;
  display: flex;
  flex-direction: column;
}

.form__label {
  position: absolute;
  top: 50%;
  left: 1.1rem;
  translate: 0 -50%;
  transform-origin: left center;
  pointer-events: none;
  color: var(--ink-500);
  font-size: 1rem;
  line-height: 1.2;
  transition: translate var(--t-mid) var(--ease-out),
              scale var(--t-mid) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}

.form__input {
  width: 100%;
  min-height: 58px;
  padding: 1.45rem 1.1rem .55rem;
  border: 0;
  border-radius: var(--r-md);
  color: var(--ink-900);
  background-color: rgb(var(--bg-lift-rgb) / .78);
  box-shadow: inset 0 0 0 1px rgb(var(--azure-100-rgb) / .95), inset 0 1px 0 var(--glass-edge);
  transition: box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
  appearance: none;
}
textarea.form__input { min-height: 140px; padding-top: 1.6rem; resize: vertical; line-height: 1.6; }
select.form__input {
  cursor: pointer;
  /* drawn chevron, not a glyph */
  background-image:
    linear-gradient(45deg, transparent 49%, var(--ink-500) 49% calc(49% + 1.5px), transparent calc(49% + 1.5px)),
    linear-gradient(-45deg, transparent 49%, var(--ink-500) 49% calc(49% + 1.5px), transparent calc(49% + 1.5px));
  background-size: 9px 9px, 9px 9px;
  background-position: right 1.35rem top 55%, right 0.8rem top 55%;
  background-repeat: no-repeat;
  padding-right: 3rem;
}

.form__input:hover { background-color: rgb(var(--bg-lift-rgb) / .95); }
.form__input:focus-visible {
  outline: 2px solid var(--azure-500);
  outline-offset: 2px;
  background-color: var(--bg-lift);
  box-shadow: inset 0 0 0 1px var(--azure-300);
}
.form__input:disabled { color: var(--ink-300); background-color: rgb(var(--bg-deep-rgb) / .6); cursor: not-allowed; }
.form__input::placeholder { color: var(--ink-500); opacity: .72; }

/* floating label */
.form__input:focus + .form__label,
.form__input:not(:placeholder-shown) + .form__label,
.form__label:has(+ .form__input:focus),
.form__field:focus-within .form__label,
.form__field.has-value .form__label {
  translate: 0 -168%;
  scale: .78;
  color: var(--ink-500);
}
.form__field:focus-within .form__label { color: var(--azure-600); }
select.form__input ~ .form__label { translate: 0 -168%; scale: .78; }

.form__input.is-invalid,
.form__input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--azure-600); }
.form__field.is-invalid .form__label { color: var(--azure-600); }

.form__error,
.form__note {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ink-500);
  min-height: 1.5em;
}
.form__error:empty, .form__note:empty { min-height: 0; }
.form__error,
.form__note.is-error {
  display: flex;
  gap: .5rem;
  padding: .7rem .95rem;
  border-radius: var(--r-sm);
  color: var(--ink-900);
  background-color: rgb(var(--azure-100-rgb) / .7);
  box-shadow: inset 0 0 0 1px var(--azure-300);
}
.form__error:empty { display: none; }

.form :where(button[type="submit"], .btn--solid) { justify-self: start; }

/* radial sheen pulse, driven by --pulse / --pulse-x / --pulse-y */
.form__pulse {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transform-origin: var(--pulse-x) var(--pulse-y);
  background: radial-gradient(circle at var(--pulse-x) var(--pulse-y),
    var(--film-pulse) 0%,
    rgb(var(--azure-300-rgb) / .6) 34%,
    rgb(var(--violet-500-rgb) / .28) 62%,
    rgba(255,255,255,0) 78%);
}
.form.is-sending .form__pulse,
.form.is-done .form__pulse {
  opacity: calc(.92 - var(--pulse) * .92);
  transform: scale(calc(.2 + var(--pulse) * 2));
}

/* Fallback pulse when the page ships no .form__pulse element: the sheen
   layer is repurposed for the send. */
.form.is-sending::after,
.form.is-done::after {
  animation: none;
  top: 0; bottom: 0; left: 0; width: 100%;
  filter: none;
  border-radius: inherit;
  background: radial-gradient(circle at var(--pulse-x) var(--pulse-y),
    var(--film-pulse-2) 0%,
    rgb(var(--azure-300-rgb) / .55) 36%,
    rgba(255,255,255,0) 76%);
  opacity: calc(.85 - var(--pulse) * .85);
  transform: scale(calc(.2 + var(--pulse) * 2));
  transform-origin: var(--pulse-x) var(--pulse-y);
}
.form:has(.form__pulse).is-sending::after,
.form:has(.form__pulse).is-done::after { background: none; opacity: 0; }

.form.is-sending .form__field,
.form.is-sending button[type="submit"] { opacity: .55; transition: opacity var(--t-mid) var(--ease-out); }

.form__done {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  opacity: 0;
  translate: 0 12px;
  transition: opacity var(--t-mid) var(--ease-out) 200ms, translate var(--t-mid) var(--ease-out) 200ms;
}
.form__done[hidden] { display: none; }
.form__done.is-active { opacity: 1; translate: none; }
.form__done :where(h2, h3) { color: var(--ink-900); }
.form__done p { color: var(--ink-500); max-width: 46ch; }
.form.is-done .form__field,
.form.is-done .form__note,
.form.is-done button[type="submit"] { display: none; }


/* ===== 25 · FOOTER ===================================================== */

.ftr {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(56px, 9vh, 108px) clamp(28px, 4vh, 44px);
  background-color: var(--bg-deep);
  color: var(--ink-500);
}
.ftr > .orb {
  right: -6%;
  bottom: -34%;
  z-index: -1;
}

.ftr__line {
  max-width: 20ch;
  margin-bottom: clamp(28px, 5vh, 52px);
}

.ftr__contact {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem clamp(18px, 3vw, 40px);
  font-size: 1rem;
  margin-bottom: clamp(24px, 4vh, 40px);
}
.ftr__contact a {
  color: var(--azure-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(var(--azure-300-rgb) / .8);
  text-underline-offset: .22em;
  transition: text-decoration-color var(--t-fast) var(--ease-out),
              text-underline-offset var(--t-fast) var(--ease-out);
}
.ftr__contact a:hover { text-decoration-color: var(--azure-600); text-underline-offset: .16em; }
.ftr__contact a:active { opacity: .7; }
.ftr__contact li > span { color: var(--ink-500); }

.ftr__social ul,
ul.ftr__social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(28px, 5vh, 48px);
}
.ftr__social a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  color: var(--ink-700);
  background-color: var(--ctl);
  box-shadow: inset 0 0 0 1px rgb(var(--azure-100-rgb) / .95), inset 0 1px 0 var(--glass-edge);
  transition: transform 100ms var(--ease-out), color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.ftr__social svg { width: 21px; height: 21px; }
.ftr__social a:hover {
  color: var(--azure-600);
  background-color: var(--ctl-hi-solid);
  box-shadow: inset 0 0 0 1px var(--azure-300), inset 0 1px 0 var(--edge-hi),
              0 8px 22px -12px rgb(var(--azure-500-rgb) / .55);
}
.ftr__social a:active { transform: scale(.94); transition-duration: 100ms; }
.ftr__social a:focus-visible { outline: 2px solid var(--azure-500); outline-offset: 3px; }

.ftr__legal {
  padding-top: clamp(18px, 3vh, 28px);
  border-top: var(--rule) solid rgb(var(--ink-300-rgb) / .45);
  color: var(--ink-500);
}

@media (min-width: 768px) {
  .ftr__line { font-size: clamp(1.8rem, 3.2vw, 2.6rem); max-width: 16ch; }
}


/* ===== 26 · PAGE TRANSITION WIPE ====================================== */

.wipe {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(101%, 0, 0);
  background-image: linear-gradient(100deg,
    rgb(var(--bg-rgb) / .86),
    rgb(var(--azure-100-rgb) / .92) 45%,
    rgb(var(--bg-rgb) / .86));
  -webkit-backdrop-filter: blur(26px) saturate(180%);
          backdrop-filter: blur(26px) saturate(180%);
}


/* ===== 27 · RESPONSIVE ================================================ */

@media (min-width: 640px) {
  .stat-card__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
  .stat { border-bottom: 0; border-right: var(--rule) solid rgb(var(--ink-300-rgb) / .34); padding: 0 clamp(10px, 1.6vw, 18px) 0 0; }
  .stat:last-child { border-right: 0; }
}

@media (min-width: 768px) {
  /* the hero card returns to a single stacked column beside the copy */
  .stat-card__list { grid-template-columns: 1fr; gap: clamp(14px, 2.2vh, 22px); }
  .stat { border-right: 0; border-bottom: var(--rule) solid rgb(var(--ink-300-rgb) / .34); padding: 0 0 clamp(12px, 1.8vh, 18px); }
  .stat:last-child { border-bottom: 0; padding-bottom: 0; }
}

@media (min-width: 1024px) {
  .cta { padding: clamp(44px, 5vw, 72px); }
}

/* Touch targets and drag comfort */
@media (hover: none) {
  .tile__meta { transform: none; }
  .carousel__slide > .glass { opacity: 1; }
}


/* ===== 28 · PREFERENCE OVERRIDES ====================================== */

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

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }

  /* Kill every loop, sweep, marquee and parallax outright. */
  .glass::after,
  .orb::before,
  .orb::after,
  .stat-card__pulse,
  .pipe__icon::after,
  .tile::after { animation: none !important; }
  .glass::after, .orb::before, .orb::after, .pipe__icon::after { opacity: 0 !important; }
  .stat-card__pulse { stroke-dashoffset: 0; }
  .marquee__row { animation: none !important; transform: none !important; }
  .marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
    scrollbar-width: thin;
  }
  .marquee__row { width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee__set[aria-hidden="true"] { display: none; }

  /* Entrances collapse to already-visible; colour/opacity changes stay. */
  [data-reveal],
  [data-reveal-stagger] > *,
  .pipe__stage,
  .menu__list a,
  .menu__foot {
    opacity: 1 !important;
    translate: none !important;
    filter: none !important;
  }
  .tabs__panel { opacity: 1; translate: none; }
  .tabs__panel:not(.is-active):not([hidden]) { opacity: 1; }

  /* The pipeline un-pins entirely, exactly as motion.js does. */
  .pipe { height: auto !important; }
  .pipe__sticky { position: static; height: auto; justify-content: flex-start; }
  .pipe__copy { display: block; }
  .pipe__stage { position: static; grid-area: auto; pointer-events: auto; }

  .hero__bg > .hero__bg--static { opacity: 1; }
  .hero__copy::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(var(--bg-rgb) / .86); }

  .skip { translate: 0 0; opacity: 0; pointer-events: none; }
  .skip:focus-visible { opacity: 1; pointer-events: auto; }

  .menu__panel { transform: none; opacity: 0; pointer-events: none; }
  .menu.is-open .menu__panel { opacity: 1; pointer-events: auto; }

  .btn:hover, .tile:hover, .pillar:hover, .menu-btn:hover { transform: none; }
  .tile:hover .tile__media > .poster { transform: none; }
  .wipe { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .glass,
  .glass--tint,
  .filters,
  .gallery__frame,
  .btn,
  .menu-btn,
  .carousel__arrow,
  .tile__meta,
  .svc__mark,
  .pipe__icon > svg,
  .pipe__glyph,
  .hdr::before,
  .menu__panel,
  .wipe {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    background-color: var(--surface-flat) !important;
    background-image: none !important;
  }
  .glass::before, .btn::before { background: var(--azure-100); }
  .glass::after, .tile::after { display: none; }
  .glass { box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--azure-100); }
  .hdr::before {
    background-color: rgb(var(--bg-rgb) / var(--scrolled)) !important;
    -webkit-mask-image: none;
            mask-image: none;
    border-bottom: var(--rule) solid rgb(var(--ink-300-rgb) / calc(var(--scrolled) * .6));
  }
  .menu__panel { background-color: var(--bg) !important; }
  .menu__scrim { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--scrim-flat); }
  .btn--solid { background-color: var(--azure-600) !important; background-image: none !important; color: var(--on-accent) !important; }
  .filter[aria-pressed="true"], .filter.is-active { background-color: var(--azure-600) !important; background-image: none !important; color: var(--on-accent) !important; }
  .hero__copy::before { background: rgb(var(--bg-rgb) / .95) !important; -webkit-mask-image: none; mask-image: none; }
  .orb { opacity: .2; }
}

@media (prefers-contrast: more) {
  .glass,
  .filters,
  .gallery__frame,
  .tile__meta,
  .steps__item,
  .case__info,
  .form {
    background-color: var(--surface-contrast);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    box-shadow: var(--glass-shadow), inset 0 0 0 1.5px var(--ink-700);
  }
  .glass::before { background: var(--ink-700); }
  .glass::after, .orb, .tile::after { display: none; }
  .btn { background-color: var(--surface-solid); box-shadow: inset 0 0 0 1.5px var(--ink-900); color: var(--ink-900); }
  .btn::before { display: none; }
  .btn--solid { background-color: var(--azure-600); background-image: none; color: var(--on-accent); box-shadow: inset 0 0 0 1.5px var(--ink-900); }
  .btn--ghost { box-shadow: inset 0 0 0 1.5px var(--ink-900); }
  .t-body, .t-lead, .t-cap, .stat__label, .svc__copy, .gets dd { color: var(--ink-700); }
  .hdr::before { background-color: var(--bg); -webkit-mask-image: none; mask-image: none; border-bottom: 1.5px solid var(--ink-700); }
  .menu__panel { background-color: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  :focus-visible { outline-width: 3px; }
  .tabs__tab, .stat, .gets__row, .case__row { border-color: var(--ink-500); }
  .tabs__list li::before, .svc__list li::before { background-color: var(--azure-600); box-shadow: none; }
  .tabs__stat:not(.glass), .svc__stat { background-color: rgb(var(--azure-100-rgb) / .95); box-shadow: inset 0 0 0 1.5px var(--ink-700); }
  .hero__copy::before { background: var(--bg); -webkit-mask-image: none; mask-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .btn { background-color: var(--ctl-hi-solid); }
  .btn--solid { background-color: var(--azure-600); }
  .btn--ghost { background-color: var(--ctl-hi); }
  .menu-btn, .carousel__arrow, .menu__close, .ftr__social a { background-color: var(--ctl-hi-solid); }
  .menu__panel { background-color: var(--panel-flat); }
  .tile__meta { background-color: var(--tile-plate-flat); }
  .filters, .gallery__frame { background-color: var(--ctl-hi-solid); }
  .svc__mark, .pipe__icon > svg, .pipe__glyph { background-color: var(--bg-lift); }
  .hdr::before { background-color: rgb(var(--bg-rgb) / calc(var(--scrolled) * .92)); }
  .hero__copy::before { background: rgb(var(--bg-rgb) / .92); }
  .wipe { background-image: linear-gradient(100deg, var(--bg), var(--azure-100) 45%, var(--bg)); }
}

/* ======================================================================
   30 · CONTACT LAYOUT
   The brief page puts the form and the direct lines side by side (§4.5).
   contact.html ships them as two children of the second .sec__inner; the
   base rules leave that block single-column, which stretches every control
   to ~1200px and strands the aside a full screen below the fold.
   ====================================================================== */

/* Keep the controls at a sane measure even before the split kicks in. */
[data-page="contact"] .sec--intro > .sec__inner:has(.form) {
  --contact-gap: clamp(20px, 2.4vw, 40px);
  margin-top: clamp(28px, 4vh, 52px);
}

@media (min-width: 640px) {
  /* Name | Company, then Email | Service; message and the send row span. */
  .form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(14px, 1.6vw, 22px);
    align-items: start;
  }
  .form > :not(.form__field) { grid-column: 1 / -1; }
  .form__field:has(textarea) { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  [data-page="contact"] .sec--intro > .sec__inner:has(.form) {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--contact-gap);
    align-items: start;
  }
  /* The aside is the shorter column — let it sit with the form's first field
     rather than stretching to match the form's height. */
  [data-page="contact"] .sec--intro > .sec__inner:has(.form) > aside {
    position: sticky;
    top: calc(var(--hdr-h) + 24px);
  }
}

/* Fallback for engines without :has() — never leaves the page broken, it just
   caps the measure instead of splitting the columns. */
@supports not selector(:has(*)) {
  .form { max-width: 46rem; }
}

/* The aside's social nav ships unclassed (no block class existed in the
   vocabulary) — give it the same chip row as the footer. */
[data-page="contact"] .sec__inner:has(.form) > aside nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  list-style: none;
  padding: 0;
}
[data-page="contact"] .sec__inner:has(.form) > aside nav a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  color: var(--ink-500);
  background: var(--ctl-aside);
  box-shadow: inset 0 0 0 1px var(--azure-100);
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
[data-page="contact"] .sec__inner:has(.form) > aside nav a:hover {
  color: var(--azure-600);
  background: var(--surface-solid);
  transform: translateY(-2px);
}
[data-page="contact"] .sec__inner:has(.form) > aside nav a svg { width: 20px; height: 20px; }
[data-page="contact"] .sec__inner:has(.form) > aside > ul { list-style: none; padding: 0; }
[data-page="contact"] .sec__inner:has(.form) > aside > ul li + li { margin-top: 6px; }

/* ======================================================================
   31 · WORK TILES ARE DISPLAY-ONLY
   The grid shows the work; it no longer navigates anywhere, so the tiles
   are <figure> + <figcaption>, not links. Keep the media life (a slow
   zoom, the caption lifting) — that reads as "this is a moving showcase",
   not as "this is clickable". Drop every affordance that promised a click.
   ====================================================================== */
figure.tile { margin: 0; cursor: default; }
figure.tile:active { transform: none; }
figure.tile::after { content: none; }          /* the click-sweep is gone */
.tile__meta { cursor: default; }

/* A <video> dropped into a tile behaves exactly like the drawn poster. */
.tile__media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tile__media > video + .poster { display: none; }   /* real media wins */

/* ======================================================================
   32 · WORK MEDIA — play affordance + lightbox
   A tile only looks clickable when it actually has something to show, so
   .is-playable is added by JS and nothing else in the grid pretends.
   ====================================================================== */

.tile.is-playable { cursor: pointer; }

.tile__play {
  position: absolute;
  inset: auto auto 50% 50%;
  transform: translate(-50%, 50%) scale(.94);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--ink-900);
  background: var(--play-fill);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 6px 22px -6px rgb(var(--shade-rgb) / .45);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.tile.is-playable .tile__play { opacity: 1; transform: translate(-50%, 50%) scale(1); }
.tile.is-playable:hover .tile__play,
.tile__play:focus-visible { background: var(--play-fill-hi); transform: translate(-50%, 50%) scale(1.06); }
.tile__play:focus-visible { outline: 2px solid var(--azure-500); outline-offset: 3px; }
.tile__play:active { transform: translate(-50%, 50%) scale(.97); transition-duration: 100ms; }
.tile__play svg { width: 26px; height: 26px; margin-left: 3px; }

/* --- lightbox -------------------------------------------------------- */

.lb { position: fixed; inset: 0; z-index: 120; }
.lb[hidden] { display: none !important; }

.lb__scrim {
  position: absolute;
  inset: 0;
  background: var(--lb-scrim);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}
.lb.is-open .lb__scrim { opacity: 1; }

.lb__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  opacity: 0;
  transform: scale(.97) translateY(10px);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.lb.is-open .lb__panel { opacity: 1; transform: none; }

.lb__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(1200px, 100%);
  max-height: 78vh;
  border-radius: var(--r-lg);
  overflow: clip;
  box-shadow: 0 24px 80px -20px var(--lb-cast);
}
.lb__media {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  background: var(--media-letterbox);
}

.lb__cap { color: rgba(255, 255, 255, .82); margin: 0; text-align: center; }

.lb__close {
  position: absolute;
  top: clamp(12px, 2.4vw, 28px);
  right: clamp(12px, 2.4vw, 28px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--ink-900);
  background: var(--lb-btn);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.lb__close:hover { background: var(--lb-btn-hi); transform: scale(1.06); }
.lb__close:active { transform: scale(.96); transition-duration: 100ms; }
.lb__close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .lb__scrim, .lb__panel, .tile__play { transition: none; }
  .lb__panel { transform: none; }
}

/* A hosted reel arrives as an iframe with no intrinsic size, so give the
   stage the 16:9 box the player expects. */
.lb__media--embed {
  width: min(1200px, 92vw);
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  border: 0;
  display: block;
  background: var(--media-letterbox);
}


/* ======================================================================
   33 · DARK THEME
   Token-level. The only component rules are the three at the end, for the
   two surfaces this sheet cannot reach with a custom property: the WebGL
   hero canvas and the dark-artwork logos. Everything else moves by token.

   The two blocks are a PAIR and hold identical declarations:
     A — :root[data-theme="dark"]              the runtime; the inline
         script in <head> resolves light | dark | auto to a concrete
         data-theme before first paint.
     B — @media (prefers-color-scheme: dark)   the no-JS mirror, so the
         :root:not([data-theme="light"])       page is still right if that
                                               script never runs.
   CSS has no include, so the declarations are duplicated. They are
   generated from one source and verified by a parser, not by eye: any
   check must assert A and B hold byte-identical declaration sets.
   ====================================================================== */

/* ---- A · runtime ---------------------------------------------------- */
:root[data-theme="dark"] {
  /* ink — #E9F0FB at the top of the ramp down to #7C90B2 at the bottom.
     Every step is a cool near-neutral pulled toward the brand navy, so the
     page reads as ink on navy, never as grey on black. */
  --ink-900:#E9F0FB;
  --ink-700:#C8D7EE;
  --ink-500:#A4B6D4;
  --ink-400:#8D9FBF;
  --ink-300:#7C90B2;

  /* ground — the brand's own navy world. --bg-deep is BELOW --bg and
     --bg-lift ABOVE it, keeping the light theme's relationship intact. */
  --bg:      #070E1D;
  --bg-deep: #040A16;
  --bg-lift: #0D1A33;

  /* accent — both hues lift so they stay legible on the dark ground.
     --azure-600 stays the ≥4.5:1 "link and small type" azure; --azure-500
     stays the fill/icon/large-type azure. */
  --azure-600:#7FB2FF;
  --azure-500:#5C9BFF;
  --azure-300:#9AC4FF;
  /* --azure-100 is the one token whose ROLE, not value, inverts: it is
     never an ink, only the palest tint-fill and hairline ring. On a dark
     ground the palest tint IS a deep one. */
  --azure-100:#17325E;
  --violet-500:#9B8CFF;
  --cyan-400:#5FDDF2;

  /* glass — a light film on darkness. Same blur, same sweep; the fill drops
     to ~5–9% white and the backdrop is darkened rather than brightened. */
  --glass-fill:      rgba(255,255,255,.055);
  --glass-fill-hi:   rgba(255,255,255,.085);
  --glass-edge:      rgba(255,255,255,.16);
  --glass-edge-cool: rgba(154,196,255,.30);
  --glass-edge-warm: rgba(155,140,255,.24);
  --glass-blur: 26px;
  --glass-shadow:    0 2px 6px rgba(0,0,0,.40), 0 18px 44px -14px rgba(0,0,0,.66);
  --glass-shadow-hi: 0 3px 10px rgba(0,0,0,.48), 0 30px 70px -18px rgba(0,0,0,.78);
  --glass-bright: .78;
  --panel-bright: .72;

  /* derived companions — the same colours as above, as channel triplets */
  --bg-rgb: 7 14 29;
  --bg-deep-rgb: 4 10 22;
  --bg-lift-rgb: 13 26 51;
  --ink-900-rgb: 233 240 251;
  --ink-700-rgb: 200 215 238;
  --ink-500-rgb: 164 182 212;
  --ink-300-rgb: 124 144 178;
  --azure-600-rgb: 127 178 255;
  --azure-500-rgb: 92 155 255;
  --azure-300-rgb: 154 196 255;
  --azure-100-rgb: 23 50 94;
  --violet-500-rgb: 155 140 255;
  --cyan-400-rgb: 95 221 242;

  /* Shadows go black, not navy: on a #070E1D ground a navy shadow is
     invisible and an inked one would be a halo. */
  --shade-rgb: 0 0 0;

  /* white film — dialled right down. The rim is the loudest of these and
     it is the one that must NOT glow, so it lands at 30%, not 98%. */
  --film-spec:       rgba(255,255,255,.10);
  --film-spec-mid:   rgba(255,255,255,.04);
  --film-spec-t:     rgba(255,255,255,.09);
  --film-spec-t-mid: rgba(255,255,255,.035);
  --film-wash:       rgba(255,255,255,.06);
  --film-wash-mid:   rgba(255,255,255,.015);
  --film-wash-t:     rgba(255,255,255,.05);
  --film-rim:        rgba(255,255,255,.30);
  --film-sheen:      rgba(255,255,255,.55);
  --film-sweep:      rgba(255,255,255,.55);
  --film-caustic:    rgba(255,255,255,.10);
  --film-caustic-2:  rgba(255,255,255,.06);
  --film-pulse:      rgba(255,255,255,.55);
  --film-pulse-2:    rgba(255,255,255,.50);
  --film-btn:        rgba(255,255,255,.09);
  --film-btn-mid:    rgba(255,255,255,.012);
  --film-solid-rim:  rgba(255,255,255,.34);
  --film-panel:      rgba(255,255,255,.07);

  --edge-hi:         rgba(255,255,255,.20);
  --edge-hi-2:       rgba(255,255,255,.22);
  --edge-mid:        rgba(255,255,255,.14);
  --edge-solid:      rgba(255,255,255,.34);
  --edge-solid-hi:   rgba(255,255,255,.40);
  --edge-chip:       rgba(255,255,255,.30);

  /* control bodies. These carry ink, so they stay a FILM — 4–18% white over
     the navy — and the ink on them is the (now light) ink ramp. */
  --ctl:             rgba(255,255,255,.07);
  --ctl-soft:        rgba(255,255,255,.06);
  --ctl-faint:       rgba(255,255,255,.04);
  --ctl-off:         rgba(255,255,255,.035);
  --ctl-aside:       rgba(255,255,255,.07);
  --ctl-ghost-hi:    rgba(255,255,255,.12);
  --ctl-hi:          rgba(255,255,255,.13);
  --ctl-hi-btn:      rgba(255,255,255,.15);
  --ctl-hi-arrow:    rgba(255,255,255,.16);
  --ctl-hi-close:    rgba(255,255,255,.16);
  --ctl-hi-solid:    rgba(255,255,255,.18);

  /* opaque fallbacks — these replace the material outright, so they are
     real navy surfaces rather than a film. */
  --surface-flat:     rgb(14 26 47 / .97);
  --surface-contrast: rgb(9 17 33 / .98);
  --surface-solid:    #101C33;
  --glass-flat:       rgb(14 26 47 / .92);
  --panel-flat:       rgb(8 16 31 / .98);

  --panel-fill:      rgba(9,18,36,.80);
  --scrim:           rgb(0 0 0 / .62);
  --scrim-flat:      rgb(0 0 0 / .74);
  --media-void:      #050B16;
  --media-letterbox: #03070F;

  /* The caption plate sits on artwork that stays bright in both themes, so
     it flips to a dark plate and carries the light ink ramp. */
  --tile-plate:      rgb(9 17 33 / .84);
  --tile-plate-hi:   rgb(11 21 40 / .92);
  --tile-plate-flat: rgb(9 17 33 / .96);

  --play-fill:       rgb(7 14 29 / .66);
  --play-fill-hi:    rgb(13 26 51 / .92);
  --lb-btn:          rgb(13 26 51 / .88);
  --lb-btn-hi:       rgb(26 43 77 / .96);
  --lb-scrim:        rgba(2,6,14,.78);
  --lb-cast:         rgba(0,0,0,.72);

  /* The accent lifted to stay readable ON the ground, so the ink that sits
     ON the accent has to go the other way. */
  --on-accent:       #06101F;

  /* The hero mesh and the orbs are pure light sources: at full strength on
     a near-black ground they stop being atmosphere and become glare. */
  --mesh-k: .34;
  --orb-k:  .62;

  color-scheme: dark;
}

/* --- the rules no token can carry -------------------------------------
   Two surfaces in this page are painted by something other than CSS, so
   there is no custom property to move. Both fixes live here, under the
   dark root, and nowhere else.

   1 · The hero is a WebGL canvas. liquid.js compiles its palette into the
       fragment shader as GLSL constants (GROUND #EEF3FA, AZURE #1B72FF,
       VIOLET #6E5BF0, CYAN #3FD0E8) and never reads a custom property, so
       in dark mode it would keep painting the light world underneath a
       dark page. invert(1) flips its lightness and hue-rotate(180deg) puts
       the hue back, which lands it almost exactly on the dark ramp above:
       #EEF3FA -> #080D14 (~--bg), #1B72FF -> #479EFF (~--azure-500),
       #6E5BF0 -> #9986FF (~--violet-500), #D5E5FF -> #0D1D37 (~--bg-lift).
       Only CYAN lands dark rather than light, so the caustics read as dark
       streaks instead of bright ones. The real fix is for liquid.js to
       read the tokens; until it does, this is the seam.

   2 · motivate-ink.webp (the header wordmark) and every *-mono.webp on the
       client wall are flat dark artwork baked into the markup, which this
       file does not own. Force them to a white silhouette: brightness(0)
       flattens the mark to black without touching its alpha and invert(1)
       lifts it to white, while opacity() multiplies with .lg__mono's own
       opacity and its hover transition, so the wall still lights up on
       hover. A dark-mode <img src> swap in the HTML is the real fix, and
       the asset for it (motivate-white.webp) already ships. */
:root[data-theme="dark"] .liquid        { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="dark"] .hdr__logo img { filter: brightness(0) invert(1) opacity(.92); }
:root[data-theme="dark"] .lg__mono      { filter: brightness(0) invert(1) opacity(.86); }

/* ---- B · no-JS mirror of A (identical declarations) ------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* ink — #E9F0FB at the top of the ramp down to #7C90B2 at the bottom.
       Every step is a cool near-neutral pulled toward the brand navy, so the
       page reads as ink on navy, never as grey on black. */
    --ink-900:#E9F0FB;
    --ink-700:#C8D7EE;
    --ink-500:#A4B6D4;
    --ink-400:#8D9FBF;
    --ink-300:#7C90B2;

    /* ground — the brand's own navy world. --bg-deep is BELOW --bg and
       --bg-lift ABOVE it, keeping the light theme's relationship intact. */
    --bg:      #070E1D;
    --bg-deep: #040A16;
    --bg-lift: #0D1A33;

    /* accent — both hues lift so they stay legible on the dark ground.
       --azure-600 stays the ≥4.5:1 "link and small type" azure; --azure-500
       stays the fill/icon/large-type azure. */
    --azure-600:#7FB2FF;
    --azure-500:#5C9BFF;
    --azure-300:#9AC4FF;
    /* --azure-100 is the one token whose ROLE, not value, inverts: it is
       never an ink, only the palest tint-fill and hairline ring. On a dark
       ground the palest tint IS a deep one. */
    --azure-100:#17325E;
    --violet-500:#9B8CFF;
    --cyan-400:#5FDDF2;

    /* glass — a light film on darkness. Same blur, same sweep; the fill drops
       to ~5–9% white and the backdrop is darkened rather than brightened. */
    --glass-fill:      rgba(255,255,255,.055);
    --glass-fill-hi:   rgba(255,255,255,.085);
    --glass-edge:      rgba(255,255,255,.16);
    --glass-edge-cool: rgba(154,196,255,.30);
    --glass-edge-warm: rgba(155,140,255,.24);
    --glass-blur: 26px;
    --glass-shadow:    0 2px 6px rgba(0,0,0,.40), 0 18px 44px -14px rgba(0,0,0,.66);
    --glass-shadow-hi: 0 3px 10px rgba(0,0,0,.48), 0 30px 70px -18px rgba(0,0,0,.78);
    --glass-bright: .78;
    --panel-bright: .72;

    /* derived companions — the same colours as above, as channel triplets */
    --bg-rgb: 7 14 29;
    --bg-deep-rgb: 4 10 22;
    --bg-lift-rgb: 13 26 51;
    --ink-900-rgb: 233 240 251;
    --ink-700-rgb: 200 215 238;
    --ink-500-rgb: 164 182 212;
    --ink-300-rgb: 124 144 178;
    --azure-600-rgb: 127 178 255;
    --azure-500-rgb: 92 155 255;
    --azure-300-rgb: 154 196 255;
    --azure-100-rgb: 23 50 94;
    --violet-500-rgb: 155 140 255;
    --cyan-400-rgb: 95 221 242;

    /* Shadows go black, not navy: on a #070E1D ground a navy shadow is
       invisible and an inked one would be a halo. */
    --shade-rgb: 0 0 0;

    /* white film — dialled right down. The rim is the loudest of these and
       it is the one that must NOT glow, so it lands at 30%, not 98%. */
    --film-spec:       rgba(255,255,255,.10);
    --film-spec-mid:   rgba(255,255,255,.04);
    --film-spec-t:     rgba(255,255,255,.09);
    --film-spec-t-mid: rgba(255,255,255,.035);
    --film-wash:       rgba(255,255,255,.06);
    --film-wash-mid:   rgba(255,255,255,.015);
    --film-wash-t:     rgba(255,255,255,.05);
    --film-rim:        rgba(255,255,255,.30);
    --film-sheen:      rgba(255,255,255,.55);
    --film-sweep:      rgba(255,255,255,.55);
    --film-caustic:    rgba(255,255,255,.10);
    --film-caustic-2:  rgba(255,255,255,.06);
    --film-pulse:      rgba(255,255,255,.55);
    --film-pulse-2:    rgba(255,255,255,.50);
    --film-btn:        rgba(255,255,255,.09);
    --film-btn-mid:    rgba(255,255,255,.012);
    --film-solid-rim:  rgba(255,255,255,.34);
    --film-panel:      rgba(255,255,255,.07);

    --edge-hi:         rgba(255,255,255,.20);
    --edge-hi-2:       rgba(255,255,255,.22);
    --edge-mid:        rgba(255,255,255,.14);
    --edge-solid:      rgba(255,255,255,.34);
    --edge-solid-hi:   rgba(255,255,255,.40);
    --edge-chip:       rgba(255,255,255,.30);

    /* control bodies. These carry ink, so they stay a FILM — 4–18% white over
       the navy — and the ink on them is the (now light) ink ramp. */
    --ctl:             rgba(255,255,255,.07);
    --ctl-soft:        rgba(255,255,255,.06);
    --ctl-faint:       rgba(255,255,255,.04);
    --ctl-off:         rgba(255,255,255,.035);
    --ctl-aside:       rgba(255,255,255,.07);
    --ctl-ghost-hi:    rgba(255,255,255,.12);
    --ctl-hi:          rgba(255,255,255,.13);
    --ctl-hi-btn:      rgba(255,255,255,.15);
    --ctl-hi-arrow:    rgba(255,255,255,.16);
    --ctl-hi-close:    rgba(255,255,255,.16);
    --ctl-hi-solid:    rgba(255,255,255,.18);

    /* opaque fallbacks — these replace the material outright, so they are
       real navy surfaces rather than a film. */
    --surface-flat:     rgb(14 26 47 / .97);
    --surface-contrast: rgb(9 17 33 / .98);
    --surface-solid:    #101C33;
    --glass-flat:       rgb(14 26 47 / .92);
    --panel-flat:       rgb(8 16 31 / .98);

    --panel-fill:      rgba(9,18,36,.80);
    --scrim:           rgb(0 0 0 / .62);
    --scrim-flat:      rgb(0 0 0 / .74);
    --media-void:      #050B16;
    --media-letterbox: #03070F;

    /* The caption plate sits on artwork that stays bright in both themes, so
       it flips to a dark plate and carries the light ink ramp. */
    --tile-plate:      rgb(9 17 33 / .84);
    --tile-plate-hi:   rgb(11 21 40 / .92);
    --tile-plate-flat: rgb(9 17 33 / .96);

    --play-fill:       rgb(7 14 29 / .66);
    --play-fill-hi:    rgb(13 26 51 / .92);
    --lb-btn:          rgb(13 26 51 / .88);
    --lb-btn-hi:       rgb(26 43 77 / .96);
    --lb-scrim:        rgba(2,6,14,.78);
    --lb-cast:         rgba(0,0,0,.72);

    /* The accent lifted to stay readable ON the ground, so the ink that sits
       ON the accent has to go the other way. */
    --on-accent:       #06101F;

    /* The hero mesh and the orbs are pure light sources: at full strength on
       a near-black ground they stop being atmosphere and become glare. */
    --mesh-k: .34;
    --orb-k:  .62;

    color-scheme: dark;
  }

  :root:not([data-theme="light"]) .liquid        { filter: invert(1) hue-rotate(180deg); }
  :root:not([data-theme="light"]) .hdr__logo img { filter: brightness(0) invert(1) opacity(.92); }
  :root:not([data-theme="light"]) .lg__mono      { filter: brightness(0) invert(1) opacity(.86); }
}