/* ───────────────────────────────────────────────────────────────
   Chameleon Limited — 2026 rebuild
   Aesthetic: chromatic instrument panel. Editorial dark, precise,
   color-shifting through the brand trio (blue → violet → green).
   ─────────────────────────────────────────────────────────────── */

/* ─── Wrap-matched fallbacks for Fraunces (prevents CLS on first paint).
   size-adjust is empirically tuned so the fallback never wraps the hero
   headline onto an extra line at any viewport (tested: 360 / 390 / 768 /
   1440). Capsize's width-averaged values (≈105% Georgia, ≈115% Times) blow
   past the wrap threshold on narrow screens because Fraunces at opsz 144
   wght 520 is ~15-20% narrower than Fraunces Regular, which is what Capsize
   measures. Ascent/descent overrides stay on Fraunces-Regular metrics so
   vertical rhythm still matches. */
@font-face {
  font-family: "Fraunces Fallback Georgia";
  src: local("Georgia");
  size-adjust: 85%;
  ascent-override: 92.96%;
  descent-override: 24.24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces Fallback Times";
  src: local("Times New Roman"), local("Times");
  size-adjust: 93%;
  ascent-override: 84.72%;
  descent-override: 22.09%;
  line-gap-override: 0%;
}

/* ─── Tokens ─────────────────────────────────────────────────── */
:root {
  /* Brand (preserved from original) */
  --navy:      #0d121c;
  --navy-up:   #131a28;
  --navy-soft: #1a2236;
  --blue:      #3652de;
  --blue-soft: #c7d5fe;
  --blue-01:   #f5f7ff;
  --green:     #60b709;
  --green-hi:  #7fd820;
  --violet:    #6136de;
  --cyan:      #2da7ff;
  --ink:       #e9ecf8;
  --ink-dim:   #9da4ae;
  --ink-low:   #5d6c7b;
  --white:     #ffffff;
  --black:     #000000;

  /* Signature chromatic gradient — the "chameleon".
     Dark stops (#3652de, #6136de) lifted for legibility on navy. */
  --chroma:
    linear-gradient(92deg,
      #7aa2ff 0%,
      #89b4ff 22%,
      #9d7bff 48%,
      #3ea0c7 72%,
      #7fd820 100%);

  /* Typography */
  --f-display: "Fraunces", "Fraunces Fallback Georgia", "Fraunces Fallback Times", ui-serif, Georgia, "Times New Roman", serif;
  --f-body:    "Nunito", ui-rounded, ui-sans-serif, system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale — fluid, clamp-based */
  --fs-xs: clamp(.72rem, .68rem + .2vw, .8rem);
  --fs-sm: clamp(.82rem, .78rem + .2vw, .92rem);
  --fs-md: clamp(.95rem, .9rem + .25vw, 1.08rem);
  --fs-lg: clamp(1.15rem, 1rem + .6vw, 1.4rem);
  --fs-xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --fs-2xl: clamp(2.2rem, 1.6rem + 2.8vw, 3.6rem);
  --fs-3xl: clamp(3rem, 2rem + 4.5vw, 5.4rem);
  --fs-4xl: clamp(3.6rem, 2rem + 7vw, 7.6rem);
  --fs-hero: clamp(3.2rem, 1.6rem + 8vw, 9rem);

  /* Spacing */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;
  --sp-10: 10rem;

  /* Layout */
  --maxw: 1440px;
  --gutter: clamp(1.25rem, 2vw + 1rem, 2.5rem);
  --rail-x: clamp(1.5rem, 3.5vw, 3.5rem);

  /* Vertical rhythm: uniform section padding. The post-horizon top override
     (see [data-section] rules) collapses the top on boundaries so adjacent
     sections read as one continuous chromatic band, not two stacked gaps. */
  --section-y: clamp(4rem, 6vw, 6rem);
  --section-y-top-tight: clamp(1.75rem, 3vw, 3rem);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-1: .25s;
  --dur-2: .55s;
  --dur-3: .9s;

  /* Surfaces */
  --border: color-mix(in oklab, var(--ink) 12%, transparent);
  --border-hi: color-mix(in oklab, var(--ink) 24%, transparent);
  --glass: color-mix(in oklab, var(--navy-up) 72%, transparent);

  color-scheme: dark;
}

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; overscroll-behavior-y: none; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-body);
  font-size: var(--fs-md);
  line-height: 1.55;
  background: var(--navy);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  /* subtle layered base so the screen never feels flat */
  background-image:
    radial-gradient(1200px 700px at 82% -5%, color-mix(in oklab, var(--blue) 14%, transparent), transparent 70%),
    radial-gradient(900px 500px at 0% 40%, color-mix(in oklab, var(--violet) 10%, transparent), transparent 70%),
    radial-gradient(1000px 600px at 50% 110%, color-mix(in oklab, var(--green) 10%, transparent), transparent 70%);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
/* Typographic line-balancing — prevents orphaned short lines in headings and
   ledes. Progressive enhancement: older browsers ignore these properties. */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--green); color: var(--navy); }

/* ─── Chromatic radar backdrop (hero) ─────────────────────── */
/* The .radar host occupies the watermark slot. It holds the SVG rings
   (baseline) and, when radar.js mounts, a WebGL canvas sweep on top. */
.radar {
  position: absolute;
  /* Park the dial center directly behind the TimeAi sample-view card so the
     card reads as mounted on a live radar instrument. The large canvas + low
     shader scale keep the radial vignette soft on the left (behind the
     headline) with no hard clip. Position via top/right — NOT transform —
     because GSAP overwrites .radar's transform on scroll. */
  top: 45%; right: -29%;
  transform: translate3d(0, calc(-50% + var(--py, 0px)), 0) rotate(var(--pr, 0deg));
  width: clamp(960px, 90vw, 1440px);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .85;
  transition: opacity .8s var(--ease);
}
/* WebGL canvas: full-bleed within the host, dial centered. */
.radar__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  mix-blend-mode: screen; /* let the sweep glow over the navy/atmosphere */
}
/* Once the canvas is painting, it owns the motif — dissolve the static
   rings to a faint scaffold so the two don't read as competing systems. */
.radar[data-radar-active] .radar__canvas { opacity: .78; }
.radar[data-radar-active] .rings { opacity: .14; }
@media (prefers-reduced-motion: reduce) {
  .radar__canvas { display: none; }
  .radar[data-radar-active] .rings { opacity: .85; }
}
.rings__dots {
  transform-origin: 700px 700px;
  animation: rings-rotate 60s linear infinite;
}
@keyframes rings-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Stacked layout (≤1020px): the dashboard exhibit drops below the headline,
   so the dial loses the card that anchors it and the arcs read as stray
   clutter across the headline and proof ledger. Drop the radar entirely on
   the single-column layout — clean typography + stats look best on mobile.
   (The host has zero size, so radar.js's IntersectionObserver keeps the
   WebGL loop paused — no wasted GPU.) */
@media (max-width: 1020px) {
  .radar { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rings__dots { animation: none; } }

/* ─── Atmosphere layer (fixed) ──────────────────────────────── */
.atmosphere {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.atmosphere__mesh {
  position: absolute; inset: -10%;
  background:
    conic-gradient(from 180deg at 70% 30%,
      color-mix(in oklab, var(--blue) 40%, transparent),
      color-mix(in oklab, var(--violet) 40%, transparent),
      color-mix(in oklab, var(--green) 30%, transparent),
      color-mix(in oklab, var(--blue) 40%, transparent));
  filter: blur(120px) saturate(1.1);
  opacity: .22;
  animation: drift 40s linear infinite;
}
.atmosphere__grain {
  position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .06;
  mix-blend-mode: overlay;
}
.atmosphere__tread {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: clamp(48px, 5vw, 64px);
  background-image:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 32 48' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'><rect x='14.5' y='0' width='3' height='48' opacity='.08'/><polygon points='13,1 9,10 6,10 13,4' opacity='.22'/><polygon points='19,1 23,10 26,10 19,4' opacity='.22'/><polygon points='13,13 9,22 6,22 13,16' opacity='.16'/><polygon points='19,13 23,22 26,22 19,16' opacity='.16'/><polygon points='13,25 9,34 6,34 13,28' opacity='.22'/><polygon points='19,25 23,34 26,34 19,28' opacity='.22'/><polygon points='13,37 9,46 6,46 13,40' opacity='.16'/><polygon points='19,37 23,46 26,46 19,40' opacity='.16'/><rect x='4.5' y='0' width='1.5' height='48' opacity='.06'/><rect x='26' y='0' width='1.5' height='48' opacity='.06'/></svg>");
  background-size: 32px 48px;
  background-repeat: repeat-y;
  background-position: center top;
  opacity: 1;
  mask-image: linear-gradient(to right, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
}
@media (max-width: 700px) {
  .atmosphere__tread { display: none; }
}
@keyframes drift {
  0%   { transform: rotate(0deg)   translate3d(0,0,0); }
  50%  { transform: rotate(180deg) translate3d(2%,1%,0); }
  100% { transform: rotate(360deg) translate3d(0,0,0); }
}

/* ─── Chromatic rail (hidden in Chromatic Shift layout — sections carry color) ── */
.rail {
  display: none;
  position: fixed;
  left: var(--rail-x); top: 0; bottom: 0;
  width: 1px;
  z-index: 2;
  pointer-events: none;
}
.rail__track {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 0, var(--border) 8%, var(--border) 92%, transparent 100%);
}
.rail__beam {
  position: absolute; left: -1px; width: 3px;
  top: 0; height: 14vh;
  background: var(--chroma);
  filter: blur(.5px) saturate(1.2);
  box-shadow: 0 0 24px color-mix(in oklab, var(--green) 70%, transparent);
  will-change: transform;
  transition: transform .08s linear;
}

/* ─── Layout helpers ────────────────────────────────────────── */
.br-mobile { display: none; }
@media (max-width: 560px) {
  .br-mobile { display: initial; }
  .has-mobile-br { text-wrap: auto; }
}

.section__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: var(--sp-5);
}
.section__eyebrow span {
  color: var(--green-hi);
  font-weight: 500;
}
.section__status {
  font-size: 8px;
  letter-spacing: .2em;
  padding: .3em .7em;
  border: 1px solid color-mix(in oklab, var(--green-hi) 35%, transparent);
  border-radius: 3px;
  color: var(--green-hi);
  background: color-mix(in oklab, var(--green-hi) 6%, transparent);
  margin-left: var(--sp-3);
}
.section__eyebrow--on-blue .section__status,
.section__eyebrow--on-violet .section__status {
  border-color: color-mix(in oklab, var(--green-hi) 45%, transparent);
  background: color-mix(in oklab, var(--green-hi) 10%, transparent);
}
.section__eyebrow--light { color: color-mix(in oklab, var(--navy) 75%, transparent); }
.section__eyebrow--light span { color: var(--violet); }
.section__eyebrow--light .section__status {
  color: var(--green);
  border-color: color-mix(in oklab, var(--green) 35%, transparent);
  background: color-mix(in oklab, var(--green) 6%, transparent);
}

.section__title {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 96, "SOFT" 10, "wght" 500;
  font-weight: 500;
  font-size: var(--fs-3xl);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
}
.section__title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 460;
  color: color-mix(in oklab, var(--green-hi) 70%, var(--ink));
}
.section__sub {
  margin-top: var(--sp-5);
  font-size: var(--fs-lg);
  color: var(--ink-dim);
  max-width: 58ch;
  line-height: 1.5;
}

/* ─── Buttons ──────────────────────────────────────────────── */
.btn {
  --_bg: transparent;
  --_fg: var(--ink);
  --_bd: var(--border-hi);
  position: relative;
  display: inline-flex; align-items: center; gap: .6em;
  padding: .9em 1.25em;
  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid var(--_bd);
  border-radius: 999px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.btn svg { width: 1em; height: 1em; }
.btn:hover { transform: translateY(-1px); border-color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--green-hi); outline-offset: 3px; }

.btn--small { padding: .65em 1em; font-size: var(--fs-sm); }

.btn--primary {
  --_bg: var(--ink);
  --_fg: var(--navy);
  --_bd: transparent;
  font-weight: 700;
}
.btn--primary::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--chroma);
  opacity: 0;
  z-index: -1;
  transition: opacity var(--dur-2) var(--ease);
}
.btn--primary:hover::before { opacity: 1; }
.btn--primary:hover { color: var(--white); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); }
.btn--light { color: var(--navy); border-color: color-mix(in oklab, var(--navy) 20%, transparent); }
.btn--light:hover { background: color-mix(in oklab, var(--navy) 10%, transparent); border-color: var(--navy); color: var(--navy); }

/* ─── Masthead: ticker + floating-island nav ───────────────── */
.masthead {
  position: sticky; top: 0;
  z-index: 40;
  padding: 0 var(--gutter) 0 calc(var(--rail-x) + var(--sp-3));
  pointer-events: none; /* let pointer through gaps between pill and viewport edge */
  background: linear-gradient(to bottom, var(--navy) 0%, color-mix(in oklab, var(--navy) 98%, transparent) 100%);
}
.masthead > * { pointer-events: auto; }

/* Telemetry ticker strip */
.ticker {
  --tick-h: 30px;
  position: relative;
  height: var(--tick-h);
  margin-inline: calc(-1 * var(--sp-3));
  overflow: hidden;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 6%, transparent);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--navy) 94%, transparent),
    color-mix(in oklab, var(--navy-up) 88%, transparent)
  );
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ink) 55%, transparent);
  user-select: none;
}
.ticker::before,
.ticker::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 96px;
  pointer-events: none;
  z-index: 2;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--navy), transparent); }
.ticker::after  { right: 0; background: linear-gradient(270deg, var(--navy), transparent); }
.ticker__track {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: max-content;
  height: 100%;
  animation: ticker-scroll 62s linear infinite;
  will-change: transform;
}
.ticker__cluster {
  display: inline-flex; align-items: center;
  gap: var(--sp-4);
  padding-right: var(--sp-4);
}
.ticker__item {
  display: inline-flex; align-items: center; gap: .5em;
  white-space: nowrap;
}
.ticker__item em {
  font-style: normal;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: .06em;
}
.ticker__sep {
  color: color-mix(in oklab, var(--ink) 18%, transparent);
  font-size: 12px;
}
.ticker__item--sig em,
.ticker__item--sig { color: var(--green-hi); }
.ticker__dot,
.ticker__pulse {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--green-hi);
  box-shadow: 0 0 8px var(--green-hi);
  animation: ticker-pulse 2s ease-in-out infinite;
}
.ticker__pulse { background: #60c8ff; box-shadow: 0 0 8px #60c8ff; animation-delay: .8s; }
@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes ticker-pulse {
  0%, 100% { opacity: .45; transform: scale(.9); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track  { animation: none; }
  .ticker__dot,
  .ticker__pulse  { animation: none; opacity: 1; }
}

/* Floating island navigation */
.nav {
  position: relative;
  z-index: 41;
  margin-top: var(--sp-3);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5);
  border-radius: 999px;
  background: color-mix(in oklab, var(--navy-up) 96%, transparent);
  border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  backdrop-filter: blur(24px) saturate(1.25);
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
  box-shadow:
    0 0 0 .5px color-mix(in oklab, var(--ink) 10%, transparent),
    0 1px 0 color-mix(in oklab, var(--ink) 8%, transparent) inset,
    0 20px 40px -22px rgba(0, 0, 0, .6),
    0 1px 2px rgba(0, 0, 0, .2);
  transition:
    padding var(--dur-2) var(--ease),
    margin-top var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    background var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}
.nav[data-stuck="true"] {
  margin-top: var(--sp-2);
  padding-top: calc(var(--sp-3) - 2px);
  padding-bottom: calc(var(--sp-3) - 2px);
  border-color: color-mix(in oklab, var(--ink) 18%, transparent);
  background: color-mix(in oklab, var(--navy-up) 88%, transparent);
  box-shadow:
    0 0 0 .5px color-mix(in oklab, var(--ink) 14%, transparent),
    0 1px 0 color-mix(in oklab, var(--ink) 10%, transparent) inset,
    0 28px 48px -20px rgba(0, 0, 0, .72),
    0 2px 4px rgba(0, 0, 0, .35);
}

.nav__brand {
  display: inline-flex; align-items: center;
  gap: var(--sp-3);
  padding-right: var(--sp-3);
  border-right: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
}
.nav__brand img {
  height: 26px; width: auto;
  transition: height var(--dur-2) var(--ease);
}
.nav[data-stuck="true"] .nav__brand img { height: 22px; }

/* Sector signal: animated dot + mono caps label that updates on scroll */
.nav__sector {
  display: inline-flex; align-items: center;
  gap: .55em;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ink) 58%, transparent);
}
.nav__sector-dot {
  --sig: var(--green-hi);
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--sig);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--sig) 70%, transparent), 0 0 10px var(--sig);
  animation: sector-pulse 2.6s cubic-bezier(.4, 0, .4, 1) infinite;
  transition: background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.nav__sector-label {
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-2) var(--ease);
}
@keyframes sector-pulse {
  0%, 100% { transform: scale(1);    opacity: .8; }
  50%      { transform: scale(1.15); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__sector-dot { animation: none; opacity: 1; }
}

.nav[data-stuck="true"] .nav__social { width: 32px; height: 32px; }
.nav__menu {
  display: flex; align-items: center; gap: var(--sp-6);
  justify-self: center;
  font-size: var(--fs-sm);
  color: var(--ink-dim);
}
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: .4em;
  padding: .35em 0;
  font-weight: 600;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -.15em;
  height: 1px;
  background: var(--chroma);
  transition: right var(--dur-2) var(--ease-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { right: 0; }

/* Solutions dropdown */
.nav__drop { position: relative; }
.nav__drop-chev {
  width: .7em; height: .7em;
  transition: transform var(--dur-1) var(--ease);
  opacity: .7;
}
.nav__drop[data-open="true"] .nav__drop-chev { transform: rotate(180deg); opacity: 1; }
.nav__drop[data-open="true"] .nav__drop-trigger { color: var(--ink); }
.nav__drop[data-open="true"] .nav__drop-trigger::after { right: 0; }

.nav__drop-panel {
  position: absolute;
  top: calc(100% + var(--sp-3));
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 360px;
  padding: var(--sp-3);
  background: color-mix(in oklab, var(--navy-up) 92%, transparent);
  border: 1px solid var(--border-hi);
  border-radius: 18px;
  box-shadow: 0 20px 48px -16px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .25);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  z-index: 50;
}
.nav__drop-panel::before {
  content: "";
  position: absolute;
  top: -6px; left: 50%;
  width: 12px; height: 12px;
  transform: translateX(-50%) rotate(45deg);
  background: inherit;
  border-left: 1px solid var(--border-hi);
  border-top: 1px solid var(--border-hi);
  border-radius: 2px 0 0 0;
}
.nav__drop[data-open="true"] .nav__drop-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__drop-item {
  --dot: var(--ink);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: 12px;
  color: var(--ink);
  overflow: hidden;
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.nav__drop-item::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--dot) 14%, transparent) 0%,
    transparent 55%);
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease);
  pointer-events: none;
}
.nav__drop-item:hover { background: color-mix(in oklab, var(--ink) 5%, transparent); transform: translateX(2px); }
.nav__drop-item:hover::before { opacity: 1; }
.nav__drop-item:focus-visible { outline: 2px solid var(--dot); outline-offset: 2px; }
.nav__drop-mark {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--dot);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--dot) 50%, transparent), 0 0 12px color-mix(in oklab, var(--dot) 70%, transparent);
}
.nav__drop-chip {
  display: inline-flex; flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--dot) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--dot) 30%, transparent);
  font-family: var(--f-mono);
  line-height: 1;
}
.nav__drop-chip-label {
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ink) 55%, transparent);
}
.nav__drop-chip-val {
  font-size: 11px;
  font-weight: 500;
  color: var(--dot);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.nav__drop-chip-val sup {
  font-size: .7em;
  font-weight: 400;
  opacity: .7;
}
.nav__drop-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav__drop-name {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink);
  letter-spacing: -.005em;
}
.nav__drop-desc {
  font-size: var(--fs-xs);
  color: var(--ink-dim);
  font-weight: 500;
}
.nav__drop-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3);
  margin-top: 2px;
  border-top: 1px solid var(--border);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color var(--dur-1) var(--ease);
}
.nav__drop-foot:hover { color: var(--ink); }
.nav__drop-foot svg { width: 14px; height: 14px; }

.nav__end { display: flex; align-items: center; gap: var(--sp-3); justify-self: end; }

.nav__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  color: var(--ink-dim);
  border: 1px solid var(--border);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.nav__social:hover { color: var(--ink); border-color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); }
.nav__social svg { width: 16px; height: 16px; }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: color-mix(in oklab, var(--ink) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  border-radius: 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 color-mix(in oklab, var(--ink) 6%, transparent) inset,
    0 2px 4px rgba(0, 0, 0, .25);
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
  z-index: 31;
}
.nav__toggle[aria-expanded="true"] {
  background: color-mix(in oklab, var(--ink) 10%, transparent);
  border-color: color-mix(in oklab, var(--ink) 16%, transparent);
}
.nav__toggle:active { transform: scale(.96); }
.nav__toggle span {
  position: absolute;
  left: 50%;
  height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  transition:
    width var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),
    opacity var(--dur-1) var(--ease),
    top var(--dur-2) var(--ease),
    background var(--dur-1) var(--ease);
}
.nav__toggle span:nth-child(1) { top: 15px; width: 20px; transform: translateX(-50%); }
.nav__toggle span:nth-child(2) { top: 21px; width: 12px; transform: translateX(-90%); }
.nav__toggle span:nth-child(3) { top: 27px; width: 20px; transform: translateX(-50%); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; width: 20px; transform: translateX(-50%) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; transform: translateX(-50%); }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; width: 20px; transform: translateX(-50%) rotate(-45deg); }

@media (max-width: 860px) {
  .ticker { display: none; }
  .masthead {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-left: var(--gutter);
    background: transparent;
  }
  main {
    padding-top: 73px;
  }
  .masthead::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    bottom: -32px;
    background: linear-gradient(to bottom,
      var(--navy) 0%,
      color-mix(in oklab, var(--navy) 96%, transparent) 55%,
      transparent 100%);
    opacity: var(--scroll-t, 0);
    pointer-events: none;
    z-index: 0;
    transition: opacity var(--dur-2) var(--ease);
  }
  .nav {
    margin-top: var(--sp-3);
    padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
    transition:
      border-color var(--dur-2) var(--ease),
      background var(--dur-2) var(--ease),
      box-shadow var(--dur-2) var(--ease);
  }
  .nav::after {
    content: "";
    position: absolute; inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: var(--chroma);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: calc(var(--scroll-t, 0) * .25);
    transition: opacity var(--dur-2) var(--ease);
    pointer-events: none;
  }
  .nav[data-stuck="true"] {
    background: color-mix(in oklab, var(--navy-up) 88%, transparent);
    border-color: color-mix(in oklab, var(--ink) 14%, transparent);
    backdrop-filter: blur(32px) saturate(1.4);
    -webkit-backdrop-filter: blur(32px) saturate(1.4);
    box-shadow:
      0 1px 0 color-mix(in oklab, var(--ink) 10%, transparent) inset,
      0 20px 40px -18px rgba(0, 0, 0, .7),
      0 4px 8px rgba(0, 0, 0, .3),
      0 1px 20px -4px color-mix(in oklab, var(--green) 10%, transparent);
  }
  .nav__brand { padding-right: 0; border-right: 0; }
  .nav__sector {
    display: inline-flex;
    gap: 0;
    pointer-events: none;
  }
  .nav__sector-label { display: none; }
  .nav__sector-dot {
    width: 6px; height: 6px;
    border-radius: 2px;
  }
  .nav__menu { display: none; }
  .nav__cta  { display: none; }
  .nav__social { display: none; }
  .nav__toggle { display: block; }

  /* Reset nav glass when mobile menu is open */
  body[data-menu-open="true"] .nav,
  body[data-menu-open="true"] .nav[data-stuck="true"] {
    transition: none;
    background: color-mix(in oklab, var(--navy-up) 96%, transparent);
    border-color: color-mix(in oklab, var(--ink) 8%, transparent);
    backdrop-filter: blur(24px) saturate(1.25);
    -webkit-backdrop-filter: blur(24px) saturate(1.25);
    box-shadow:
      0 1px 0 color-mix(in oklab, var(--ink) 8%, transparent) inset,
      0 20px 40px -22px rgba(0, 0, 0, .6),
      0 1px 2px rgba(0, 0, 0, .2);
  }
  body[data-menu-open="true"] .nav::after { opacity: 0; }
  body[data-menu-open="true"] .masthead > * { pointer-events: none; }
  body[data-menu-open="true"] .nav__toggle { pointer-events: auto; }
}

/* ─── Mobile menu panel — Console 2026 ─────────────────────── */
.mobile-menu {
  --mm-pad-top: clamp(6rem, 13vh, 7.5rem);
  --mm-pad-x: clamp(1rem, 3vw + .25rem, 1.75rem);
  --mm-pad-bottom: calc(var(--gutter) + env(safe-area-inset-bottom));

  position: fixed; inset: 0;
  z-index: 30;
  display: flex;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear .25s;
}
.mobile-menu[hidden] { display: flex; }
.mobile-menu[data-open="true"] {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

/* Full-bleed backdrop: layered chromatic wash + grain over navy.
   Scrim fades in fast so there's no see-through window while the
   backdrop-filter is still warming up on the GPU. */
.mobile-menu__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(78% 60% at 18% 12%, color-mix(in oklab, var(--blue) 22%, transparent) 0%, transparent 62%),
    radial-gradient(70% 55% at 88% 6%,  color-mix(in oklab, var(--violet) 18%, transparent) 0%, transparent 65%),
    radial-gradient(95% 70% at 50% 112%, color-mix(in oklab, var(--green) 16%, transparent) 0%, transparent 66%),
    color-mix(in oklab, var(--navy) 92%, transparent);
  backdrop-filter: blur(28px) saturate(1.18);
  -webkit-backdrop-filter: blur(28px) saturate(1.18);
  opacity: 0;
  will-change: opacity;
  transform: translateZ(0);
  transition: opacity .08s ease;
}
.mobile-menu[data-open="true"] .mobile-menu__scrim {
  opacity: 1;
  transition: opacity .2s cubic-bezier(.2, .9, .25, 1);
}
.mobile-menu__scrim::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Content panel: curtained reveal from top */
.mobile-menu__panel {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  padding:
    var(--mm-pad-top)
    var(--gutter)
    var(--mm-pad-bottom)
    var(--mm-pad-x);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  clip-path: inset(0 0 12% 0);
  transform: translateY(10px);
  opacity: 0;
  transition:
    clip-path .2s ease,
    transform .2s ease,
    opacity .08s ease;
}
.mobile-menu[data-open="true"] .mobile-menu__panel {
  clip-path: inset(0 0 0 0);
  transform: none;
  opacity: 1;
  transition:
    clip-path var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out),
    opacity .15s ease;
}

/* Vertical chromatic rail flush with content */
.mobile-menu__rail {
  position: absolute;
  left: calc(var(--mm-pad-x) - 2px);
  top: var(--mm-pad-top);
  bottom: var(--mm-pad-bottom);
  width: 1px;
  overflow: hidden;
  opacity: 0;
  transition: opacity .08s ease;
}
.mobile-menu[data-open="true"] .mobile-menu__rail {
  opacity: 1;
  transition: opacity var(--dur-2) var(--ease);
  transition-delay: 80ms;
}
.mobile-menu__rail::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in oklab, var(--ink) 14%, transparent) 8%,
    color-mix(in oklab, var(--ink) 14%, transparent) 92%,
    transparent 100%);
}
.mobile-menu__beam {
  position: absolute;
  left: -2px; width: 3px;
  top: 0; height: 28%;
  background: var(--chroma);
  filter: blur(.3px) saturate(1.25);
  box-shadow: 0 0 14px color-mix(in oklab, var(--green) 55%, transparent);
  border-radius: 2px;
  transform: translateY(-110%);
  transition: transform .12s ease;
}
.mobile-menu[data-open="true"] .mobile-menu__beam {
  transform: translateY(55vh);
  transition: transform 1.15s var(--ease-out);
  transition-delay: 180ms;
}

/* Inner column */
.mobile-menu__inner {
  position: relative;
  display: flex; flex-direction: column;
  gap: clamp(1.25rem, 3vw, 1.85rem);
  padding-left: clamp(.85rem, 2.4vw, 1.25rem);
}

/* Top eyebrow — small mono marker with a live dot */
.mobile-menu__marker {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.mobile-menu__marker-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--green-hi);
  box-shadow: 0 0 8px color-mix(in oklab, var(--green-hi) 75%, transparent);
  animation: mm-pulse 2.4s ease-in-out infinite;
}
@keyframes mm-pulse { 50% { opacity: .45; } }

/* Primary nav list */
.mobile-menu__list {
  display: flex; flex-direction: column;
  margin: 0; padding: 0;
  border-top: 1px solid var(--border);
}
.mobile-menu__item {
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(12px);
}
.mobile-menu[data-open="true"] .mobile-menu__item {
  opacity: 1;
  transform: none;
  transition:
    transform .7s var(--ease-out),
    opacity .7s var(--ease-out);
  transition-delay: calc(160ms + var(--i, 0) * 55ms);
}
.mobile-menu__link {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: clamp(.95rem, 2.2vw, 1.1rem) 0;
  font-family: var(--f-display);
  font-variation-settings: "opsz" 80, "SOFT" 30, "wght" 440;
  font-size: clamp(2rem, 1.15rem + 4.2vw, 2.85rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  transition: color var(--dur-1) var(--ease);
}
.mobile-menu__link:hover,
.mobile-menu__link:focus-visible {
  color: var(--green-hi);
}
.mobile-menu__link[aria-current="page"] {
  color: var(--green-hi);
}
.mobile-menu__num {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  color: var(--ink-low);
  font-variation-settings: normal;
  font-weight: 400;
  align-self: start;
  padding-top: .85em;
  transition: color var(--dur-1) var(--ease);
}
.mobile-menu__link:hover .mobile-menu__num,
.mobile-menu__link:focus-visible .mobile-menu__num,
.mobile-menu__link[aria-current="page"] .mobile-menu__num { color: var(--green-hi); }
.mobile-menu__word { display: inline-block; }
.mobile-menu__arrow {
  width: 1.1rem; height: 1.1rem;
  color: var(--ink-low);
  opacity: 0;
  transform: translateX(-.4rem);
  transition:
    transform var(--dur-2) var(--ease-out),
    opacity var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}
.mobile-menu__link:hover .mobile-menu__arrow,
.mobile-menu__link:focus-visible .mobile-menu__arrow,
.mobile-menu__link[aria-current="page"] .mobile-menu__arrow {
  opacity: 1;
  transform: none;
  color: var(--green-hi);
}
@media (hover: none) {
  .mobile-menu__arrow { opacity: 1; transform: none; }
}

/* Solutions section — always visible card grid */
.mobile-menu__solutions {
  display: flex; flex-direction: column;
  gap: .75rem;
  padding-top: var(--sp-3);
  opacity: 0;
  transform: translateY(12px);
}
.mobile-menu[data-open="true"] .mobile-menu__solutions {
  opacity: 1;
  transform: none;
  transition:
    opacity .7s var(--ease-out),
    transform .7s var(--ease-out);
  transition-delay: 540ms;
}
.mobile-menu__slabel {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-low);
}
.mobile-menu__slabel::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border), transparent);
}
.mobile-menu__stag { color: var(--ink-dim); }
.mobile-menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .6rem;
}
.mobile-menu__card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "dot name"
    ".   desc";
  column-gap: .65rem;
  row-gap: .15rem;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in oklab, var(--navy-up) 62%, transparent);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}
.mobile-menu__card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(70% 90% at 100% 0%, color-mix(in oklab, var(--card, var(--blue)) 20%, transparent) 0%, transparent 62%);
  opacity: .7;
  pointer-events: none;
  z-index: -1;
}
.mobile-menu__card:hover,
.mobile-menu__card:focus-visible {
  border-color: color-mix(in oklab, var(--card, var(--blue)) 55%, var(--border-hi));
  transform: translateY(-1px);
}
.mobile-menu__card:active { transform: translateY(0); }
.mobile-menu__card[aria-current="page"] {
  border-color: color-mix(in oklab, var(--card, var(--blue)) 65%, var(--border-hi));
  background: color-mix(in oklab, var(--navy-up) 80%, transparent);
}
.mobile-menu__card[aria-current="page"]::before { opacity: 1; }
.mobile-menu__card-dot {
  grid-area: dot;
  align-self: center;
  width: 8px; height: 8px;
  border-radius: 3px;
  background: var(--card, var(--blue));
  box-shadow: 0 0 10px color-mix(in oklab, var(--card, var(--blue)) 70%, transparent);
}
.mobile-menu__card-name {
  grid-area: name;
  font-family: var(--f-display);
  font-variation-settings: "opsz" 60, "SOFT" 30, "wght" 520;
  font-size: 1.08rem;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.mobile-menu__card-desc {
  grid-area: desc;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--ink-dim);
  letter-spacing: 0;
}

/* Footer: CTA + social + status */
.mobile-menu__foot {
  display: flex; flex-direction: column;
  gap: .85rem;
  padding-top: var(--sp-3);
  opacity: 0;
  transform: translateY(12px);
}
.mobile-menu[data-open="true"] .mobile-menu__foot {
  opacity: 1;
  transform: none;
  transition:
    opacity .7s var(--ease-out),
    transform .7s var(--ease-out);
  transition-delay: 640ms;
}
.mobile-menu__cta {
  width: 100%;
  justify-content: center;
  padding-block: .95rem;
}
.mobile-menu__foot-row {
  display: flex; align-items: center; justify-content: center;
  gap: .7rem;
}
.mobile-menu__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  color: var(--ink-dim);
  border: 1px solid var(--border);
  transition:
    color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease);
}
.mobile-menu__social:hover,
.mobile-menu__social:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
  background: color-mix(in oklab, var(--ink) 6%, transparent);
}
.mobile-menu__social svg { width: 16px; height: 16px; }
.mobile-menu__foot-sep {
  width: 3px; height: 3px;
  border-radius: 999px;
  background: var(--border-hi);
}
.mobile-menu__status {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  color: var(--ink-low);
}

body[data-menu-open="true"] { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu__panel,
  .mobile-menu__item,
  .mobile-menu__solutions,
  .mobile-menu__foot,
  .mobile-menu__beam,
  .mobile-menu__rail { transition: none !important; transform: none !important; }
  .mobile-menu__marker-dot { animation: none !important; }
  .mobile-menu[data-open="true"] .mobile-menu__panel { clip-path: inset(0 0 0 0); }
}

/* ─── Hero ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  z-index: 1;
  overflow-x: clip;
  padding: var(--section-y) var(--gutter);
  padding-left: calc(var(--rail-x) + var(--sp-6));
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, .72fr);
  grid-template-areas:
    "eyebrow exhibit"
    "title   exhibit"
    "sub     exhibit"
    "proof   exhibit"
    "cta     exhibit";
  gap: var(--sp-5) var(--sp-8);
  align-items: start;
}
@media (max-width: 1020px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "title"
      "sub"
      "proof"
      "cta"
      "exhibit";
    gap: var(--sp-6);
  }
}

.hero__eyebrow { grid-area: eyebrow; display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.hero__kicker {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.chip {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .4em .8em;
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: var(--ink);
  background: color-mix(in oklab, var(--navy-up) 60%, transparent);
}
.chip__dot {
  width: .5em; height: .5em; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px var(--green), 0 0 0 3px color-mix(in oklab, var(--green) 30%, transparent);
  animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 12px var(--green), 0 0 0 0 color-mix(in oklab, var(--green) 45%, transparent); }
  50%      { box-shadow: 0 0 18px var(--green), 0 0 0 6px color-mix(in oklab, var(--green) 0%, transparent); }
}

/* Headline — the chameleon moment */
.hero__title {
  grid-area: title;
  font-family: var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 10, "wght" 500;
  font-weight: 500;
  font-size: clamp(2.9rem, 1.5rem + 7vw, 7.8rem);
  line-height: .94;
  letter-spacing: -.04em;
  color: var(--ink);
  text-wrap: balance;
}
.hero__line {
  display: block;
  overflow: clip;
  overflow-clip-margin: .6em;
  padding: .15em .2em;
  margin: -.15em -.2em;
}
/* Waterfall rhythm: lead anchors wide/bold, body carries, coda grounds w/ inline tail */
.hero__line--lead {
  font-size: 1.18em;
  letter-spacing: -.055em;
  line-height: .92;
}
.hero__line--body {
  font-size: .92em;
  line-height: .96;
}
.hero__line--coda {
  font-size: .6em;
  line-height: 1.08;
  padding-top: .14em;
  overflow-clip-margin: 1.2em;
  padding-left: .25em;
  padding-right: .25em;
  margin-left: -.25em;
  margin-right: -.25em;
}
.hero__sep {
  display: inline-block;
  width: 1px;
  height: .58em;
  margin: 0 .55em .06em;
  vertical-align: middle;
  background: var(--chroma);
  background-size: 100% 220%;
  animation: shift-y 8s linear infinite;
  opacity: .78;
}
.hero__tail {
  color: var(--ink-dim);
  font-style: normal;
  font-variation-settings: "opsz" 96, "SOFT" 20, "wght" 440;
  letter-spacing: -.015em;
}
.hero__line-inner {
  display: inline-block;
  transform: translateY(0);
  transition: transform .95s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
@starting-style {
  .hero__line-inner { transform: translateY(102%); }
}
.hero__italic {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 380;
  color: color-mix(in oklab, var(--ink) 88%, transparent);
}

/* Registered custom props — animatable typed values for chroma */
@property --chroma-angle { syntax: "<angle>";      inherits: false; initial-value: 92deg; }
@property --chroma-pos   { syntax: "<percentage>"; inherits: false; initial-value: 0%;    }
@property --chroma-opsz  { syntax: "<number>";     inherits: false; initial-value: 144;   }
@property --chroma-wght  { syntax: "<number>";     inherits: false; initial-value: 520;   }

.hero__chroma {
  --chroma-angle: 92deg;
  --chroma-opsz: 144;
  --chroma-wght: 520;
  background:
    linear-gradient(
      var(--chroma-angle),
      #7aa2ff 0%,
      #89b4ff 22%,
      #9d7bff 48%,
      #3ea0c7 72%,
      #7fd820 100%
    );
  background-size: 220% 100%;
  background-position: var(--chroma-pos) 50%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-variation-settings: "opsz" var(--chroma-opsz), "SOFT" 10, "wght" var(--chroma-wght);
  padding-right: .08em;
  animation: chroma-drift 14s linear infinite;
  transition: --chroma-angle .55s var(--ease-out);
}
@keyframes chroma-drift {
  from { --chroma-pos: 0%;   }
  to   { --chroma-pos: calc(1100% / 6); }
}

/* Scroll-linked variable-font breathe on chroma — native scroll timeline */
@supports (animation-timeline: scroll()) {
  .hero__chroma {
    animation:
      chroma-drift 14s linear infinite,
      chroma-breathe linear both;
    animation-timeline: auto, scroll(root);
    animation-range: normal, 0 70vh;
  }
  @keyframes chroma-breathe {
    from { --chroma-opsz: 144; --chroma-wght: 520; }
    to   { --chroma-opsz: 108; --chroma-wght: 460; }
  }
}

.hero__sub {
  grid-area: sub;
  max-width: 52ch;
  font-size: var(--fs-lg);
  color: var(--ink-dim);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Per-word reveal — JS segments into .hero__sub-word with --i */
.hero__sub-word {
  display: inline-block;
  transform: translateY(.35em);
  opacity: 0;
  filter: blur(5px);
  transition:
    transform .75s var(--ease-out),
    opacity  .6s  var(--ease-out),
    filter   .6s  var(--ease-out);
  transition-delay: calc(var(--i, 0) * 22ms);
  will-change: transform, opacity, filter;
}
.hero__sub.is-in .hero__sub-word {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
}
.hero__cta {
  grid-area: cta;
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-3);
}

/* ─── Italic chroma underline ──────────────────────────────── */
.hero__italic {
  position: relative;
  display: inline-block;
}
.hero__italic-ink { position: relative; z-index: 1; }
.hero__underline {
  position: absolute;
  left: 0; right: 0; bottom: -.08em;
  width: 100%; height: .22em;
  pointer-events: none;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  opacity: 0;
}
[data-reveal].is-in .hero__underline {
  animation: chroma-underline 1.4s var(--ease-out) .8s forwards;
}
@keyframes chroma-underline {
  0%   { stroke-dashoffset: 220; opacity: 0; }
  20%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* ─── Proof strip ─────────────────────────────────────────── */
.hero__proof {
  grid-area: proof;
  margin: var(--sp-2) 0 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(.9rem, 2vw, 1.75rem);
  padding: var(--sp-4) clamp(1rem, 1.6vw, 1.25rem);
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--navy-up) 55%, transparent), color-mix(in oklab, var(--navy) 75%, transparent));
  backdrop-filter: blur(8px);
  max-width: max-content;
  position: relative;
  overflow: hidden;
}
.hero__proof-head {
  width: 100%;
  display: flex;
  gap: var(--sp-5);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-2);
  border-bottom: 1px dashed color-mix(in oklab, var(--ink) 12%, transparent);
  font-family: var(--f-mono);
  font-size: 8px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ink) 30%, transparent);
}
.hero__proof::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 2px;
  background: var(--chroma);
  background-size: 100% 220%;
  animation: shift-y 8s linear infinite;
  opacity: .9;
}
@keyframes shift-y {
  0%   { background-position: 50% 0%; }
  100% { background-position: 50% 220%; }
}
.hero__proof-cell {
  display: flex; flex-direction: column; gap: .2rem;
  min-width: 0;
}
.hero__proof-cell dt {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-low);
}
.hero__proof-cell dd {
  margin: 0;
  display: inline-flex; align-items: baseline; gap: .35rem;
  font-family: var(--f-display);
  font-variation-settings: "opsz" 72, "wght" 520;
  font-size: clamp(1.35rem, 1rem + 1vw, 1.85rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.hero__proof-plus {
  font-family: var(--f-mono);
  font-size: .6em;
  color: var(--blue-soft);
  font-weight: 500;
}
.hero__proof-delta {
  font-family: var(--f-mono);
  font-size: .5em;
  letter-spacing: .08em;
  color: var(--green-hi);
  font-weight: 500;
}
.hero__proof-sep {
  align-self: stretch;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--border) 25%, var(--border) 75%, transparent);
}
@media (max-width: 560px) {
  .hero__proof { gap: .9rem 1.2rem; padding: var(--sp-3) var(--sp-4); }
  .hero__proof-sep { display: none; }
}

/* ─── Hero — mobile re-composition (≤560px) ──────────────────
   Rebuilds spacing, title rhythm, proof ledger, CTAs and cluster
   for narrow viewports. Desktop grid & reveal system untouched. */
@media (max-width: 560px) {
  .hero {
    padding: clamp(2.25rem, 6vw, 3.25rem) var(--gutter) clamp(2.5rem, 6vw, 3.5rem);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    gap: var(--sp-4);
  }

  /* Eyebrow: chip only on mobile — kicker is noise before a headline this big */
  .hero__eyebrow {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
  .hero__kicker { display: none; }

  /* Strip pill container — bare dot + text breaks the nav-echo */
  .chip {
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
    backdrop-filter: none;
  }

  /* Title: wall-to-wall scale, compressed leading for editorial impact */
  .hero__title {
    font-size: clamp(3.2rem, 16vw, 5rem);
    letter-spacing: -.048em;
    line-height: .9;
  }
  .hero__line--lead  { font-size: 1.12em; line-height: .88; }
  .hero__line--body  { font-size: .87em; letter-spacing: -.035em; }
  .hero__line--coda  {
    font-size: .6em;
    line-height: 1.1;
    padding-top: .1em;
  }
  .hero__line--coda .hero__line-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .4em;
    row-gap: .2em;
  }
  .hero__italic { align-self: baseline; }
  .hero__sep   { display: none; }
  .hero__tail  { display: inline-block; }

  .hero__sub {
    font-size: 1.08rem;
    line-height: 1.6;
    max-width: 42ch;
    margin-top: calc(var(--sp-4) * .75);
  }

  /* Proof strip → editorial data ledger.
     Monospace row numerals, hairline rules, right-aligned numerals.
     Drops the card chrome so the data reads directly on the atmosphere. */
  .hero__proof {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    margin-top: var(--sp-5);
    max-width: none;
    width: 100%;
    background: none;
    backdrop-filter: none;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    overflow: visible;
    counter-reset: proof;
  }
  .hero__proof::before {
    left: 0; top: 0; bottom: auto;
    width: clamp(44px, 22vw, 84px);
    height: 1px;
    background: var(--chroma);
    background-size: 220% 100%;
    animation: shift-x 8s linear infinite;
  }
  @keyframes shift-x {
    0%   { background-position: 0% 50%; }
    100% { background-position: 220% 50%; }
  }
  .hero__proof-cell {
    counter-increment: proof;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: .85rem;
    align-items: baseline;
    padding: .95rem 0 .85rem;
    border-bottom: 1px solid var(--border);
    position: relative;
  }
  .hero__proof-cell::before {
    content: counter(proof, decimal-leading-zero);
    grid-row: 1 / span 2;
    align-self: center;
    font-family: var(--f-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
    color: var(--blue-soft);
    padding: .3em .55em .28em;
    border: 1px solid var(--border-hi);
    border-radius: 5px;
    background: color-mix(in oklab, var(--navy-up) 55%, transparent);
    line-height: 1;
  }
  .hero__proof-cell dt {
    grid-column: 2;
    font-size: 10px;
    letter-spacing: .10em;
    line-height: 1.3;
    align-self: center;
    padding-right: .25rem;
  }
  .hero__proof-cell dd {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    margin: 0;
    display: grid;
    justify-items: end;
    gap: .1rem;
    text-align: right;
    font-size: 1.45rem;
  }
  .hero__proof-cell dd .hero__proof-num   { line-height: 1; }
  .hero__proof-cell dd .hero__proof-delta {
    font-size: 9px;
    letter-spacing: .1em;
    opacity: .9;
  }
  .hero__proof-sep { display: none; }

  /* CTAs: full-width primary, hairline-rule secondary.
     Keeps the chromatic hover reveal on the primary button. */
  .hero__cta {
    width: 100%;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
  }
  .hero__cta .btn {
    width: 100%;
    justify-content: center;
    padding: 1.05em 1.25em;
  }
  .hero__cta .btn--ghost {
    border-color: var(--border);
    background: color-mix(in oklab, var(--navy-up) 40%, transparent);
  }

  /* Instrument cluster: compact 2×2 bento that actually fits.
     Forces real 2-column grid via minmax(0, 1fr) so content shrinks.
     Dials spacing, type, sparkline/bars down without losing the panel feel. */
  .hero__exhibit { margin-top: var(--sp-5); gap: var(--sp-2); }
  .hero__exhibit-label {
    font-size: 10px;
    letter-spacing: .18em;
  }
  .cluster {
    padding: var(--sp-3);
    border-radius: 14px;
    font-size: .9em;
  }
  .cluster__head, .cluster__foot { font-size: 9.5px; letter-spacing: .14em; }
  .cluster__head { margin-bottom: var(--sp-3); }
  .cluster__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .5rem;
  }
  .cluster__cell {
    padding: .7rem .75rem .8rem;
    border-radius: 10px;
    gap: .3rem;
    min-width: 0;
  }
  .cluster__label { font-size: 9px; letter-spacing: .12em; }
  .cluster__value { font-size: 1.2rem; }
  .cluster__value sup { font-size: .42em; }
  .cluster__delta  { font-size: 9.5px; }
  .cluster__spark  { height: 22px; }
  .cluster__bars   { height: 30px; gap: 2px; margin-top: .35rem; }
  .cluster__foot   { margin-top: var(--sp-3); padding-top: var(--sp-2); }

  /* Scroll cue sits tighter to the cluster, still data-flavored */
  .hero__scrollcue {
    margin-top: var(--sp-5);
    gap: .65rem;
    font-size: 10.5px;
    letter-spacing: .2em;
  }
  .hero__scrollcue-num { padding: .28em .5em; }

  /* Flag-sheet header: irrelevant in mobile ledger layout */
  .hero__proof-head { display: none; }
  /* Radar is hidden ≤1020px (see the .radar display:none rule above). */
}

/* ─── Automotive elements — mobile overrides ─────────────── */
@media (max-width: 640px) {
  .horizon::after {
    display: none;
  }
  .trust__chip-status {
    display: none;
  }
  .section__status {
    display: none;
  }
  .slab__bay {
    font-size: 8px;
  }
}

/* ─── Hero — extra-narrow safety (≤360px) ────────────────── */
@media (max-width: 360px) {
  .hero__title { font-size: clamp(2.35rem, 13vw, 2.9rem); }
  .hero__proof-cell dd { font-size: 1.3rem; }
  .cluster__value { font-size: 1.08rem; }
}

/* ─── Scroll cue ──────────────────────────────────────────── */
.hero__scrollcue {
  position: absolute;
  left: calc(var(--rail-x) + var(--sp-6));
  bottom: clamp(1rem, 2vw, 1.75rem);
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.hero__scrollcue:hover { color: var(--ink); }
.hero__scrollcue-num {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .25em .55em;
  border: 1px solid var(--border-hi);
  border-radius: 4px;
  background: color-mix(in oklab, var(--navy-up) 65%, transparent);
  color: var(--blue-soft);
  font-weight: 500;
  letter-spacing: .12em;
}
.hero__scrollcue-text::before {
  content: "— ";
  color: var(--ink-low);
}
.hero__scrollcue-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 22px;
  color: color-mix(in oklab, var(--green-hi) 80%, var(--ink));
  animation: scroll-bob 2.4s var(--ease) infinite;
}
.hero__scrollcue-arrow svg { width: 100%; height: 100%; }
@keyframes scroll-bob {
  0%, 100% { transform: translateY(-3px); opacity: .65; }
  50%      { transform: translateY(3px);  opacity: 1; }
}
@media (max-width: 720px) {
  .hero__scrollcue { position: static; margin-top: var(--sp-6); }
  .hero__scrollcue-arrow { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scrollcue-arrow { animation: none; }
}

/* Reveal (JS adds .is-in) */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal]:nth-child(2) { transition-delay: 80ms; }
[data-reveal]:nth-child(3) { transition-delay: 160ms; }
[data-reveal]:nth-child(4) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* GSAP takeover: when animations.js loads, it handles reveals */
.gsap-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
.gsap-ready .hero__sub-word { opacity: 1; transform: none; filter: none; transition: none; }
.gsap-ready .slab__visual { opacity: 1; transform: none; transition: none; }
.gsap-ready .slab__points li { opacity: 1; transform: none; transition: none; }
.gsap-ready .slab::after { transform: scaleX(1); transition: none; }
.gsap-ready .slab__rail::before { transform: scaleY(1); transition: none; }
.gsap-ready .slab__rail::after { opacity: 1; transform: scale(1); transition: none; }
.gsap-ready .cta__sig-img { opacity: 0; transition: none; }
.gsap-ready .cta__stamp { opacity: .78; transition: none; }
.gsap-ready [data-reveal].is-in .hero__underline { animation: none; }
/* Only disable balance on headings that SplitText actually processes */
.gsap-ready .hero__title,
.gsap-ready .trust__title,
.gsap-ready .about__title,
.gsap-ready .voices__title { text-wrap: auto; }
.gsap-ready .voices__more { visibility: hidden; }
.gsap-ready .slab__visual { transition: box-shadow .3s ease; }
.gsap-word { display: inline-block; }
em .gsap-word { padding-right: .15em; }

/* ─── Hero exhibit wrapper (frame label + cluster) ───────── */
.hero__exhibit {
  grid-area: exhibit;
  align-self: start;
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  perspective: 1400px;
}
.hero__exhibit-label {
  display: inline-flex; align-items: center; gap: .55em;
  align-self: flex-start;
  padding-left: .1em;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hero__exhibit-label svg {
  width: 16px; height: 12px;
  color: color-mix(in oklab, var(--green-hi) 85%, var(--ink));
  transform: rotate(24deg);
}
.hero__exhibit .cluster {
  margin-top: 0;
  transform: rotate3d(0, 1, 0, -2.2deg) rotate3d(1, 0, 0, .8deg);
  transform-origin: 85% 30%;
  transition: transform .6s var(--ease-out);
}
.hero__exhibit:hover .cluster { transform: rotate3d(0, 1, 0, -.6deg); }
@media (max-width: 1020px) {
  .hero__exhibit .cluster { transform: none; }
}

/* ─── Instrument cluster ───────────────────────────────────── */
.cluster {
  position: relative;
  align-self: start;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--navy-up) 75%, transparent), color-mix(in oklab, var(--navy) 85%, transparent));
  border: 1px solid var(--border);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  box-shadow:
    0 1px 0 0 color-mix(in oklab, var(--ink) 6%, transparent) inset,
    0 24px 48px -28px color-mix(in oklab, var(--blue) 30%, transparent);
  overflow: hidden;
  font-size: .92em;
}
.cluster::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(600px 200px at 50% -10%, color-mix(in oklab, var(--blue) 40%, transparent), transparent 70%);
  pointer-events: none;
  opacity: .5;
}
.cluster__head, .cluster__foot {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.cluster__head { margin-bottom: var(--sp-4); }
.cluster__status { display: inline-flex; align-items: center; gap: .5em; color: var(--green-hi); }
.cluster__status i {
  width: .4em; height: .4em; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse 1.8s var(--ease) infinite;
}

.cluster__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.cluster__cell {
  padding: var(--sp-4);
  background: color-mix(in oklab, var(--navy) 40%, transparent);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: .35rem;
}
.cluster__cell--wide { grid-column: span 2; }

.cluster__label {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-low);
}
.cluster__value {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 60, "wght" 520;
  font-size: clamp(1.3rem, .9rem + 1vw, 1.75rem);
  line-height: 1;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
  letter-spacing: -.02em;
}
.cluster__value sup {
  font-family: var(--f-mono);
  font-size: .48em; font-weight: 400; color: var(--ink-dim);
  margin-left: .15em;
  vertical-align: super;
}
.cluster__value--green { color: var(--green-hi); }
.cluster__value--blue  { color: color-mix(in oklab, var(--blue) 75%, var(--ink)); }

.cluster__delta {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .05em;
  color: var(--ink-dim);
}
.cluster__delta--up { color: var(--green-hi); }

.cluster__spark { width: 100%; height: 32px; margin-top: auto; }

.cluster__bars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 3px;
  height: 44px;
  margin-top: var(--sp-2);
}
.cluster__bars span {
  height: calc(var(--h) * 100%);
  background: linear-gradient(to top, color-mix(in oklab, var(--blue) 70%, transparent), var(--green-hi));
  border-radius: 2px;
  min-height: 3px;
  animation: bar-pop .9s var(--ease-out) backwards;
}
.cluster__bars span:nth-child(1) { animation-delay: .05s; }
.cluster__bars span:nth-child(2) { animation-delay: .1s; }
.cluster__bars span:nth-child(3) { animation-delay: .15s; }
.cluster__bars span:nth-child(4) { animation-delay: .2s; }
.cluster__bars span:nth-child(5) { animation-delay: .25s; }
.cluster__bars span:nth-child(6) { animation-delay: .3s; }
.cluster__bars span:nth-child(7) { animation-delay: .35s; }
.cluster__bars span:nth-child(8) { animation-delay: .4s; }
.cluster__bars span:nth-child(9) { animation-delay: .45s; }
.cluster__bars span:nth-child(10) { animation-delay: .5s; }
.cluster__bars span:nth-child(11) { animation-delay: .55s; }
.cluster__bars span:nth-child(12) { animation-delay: .6s; }
@keyframes bar-pop {
  from { transform: scaleY(0); opacity: 0; transform-origin: bottom; }
  to   { transform: scaleY(1); opacity: 1; }
}

.cluster__foot { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--border); }
.cluster__pulse { display: inline-flex; gap: 3px; }
.cluster__pulse i {
  width: 3px; height: 10px; border-radius: 1px;
  background: var(--green);
  animation: equalize 1s var(--ease) infinite;
}
.cluster__pulse i:nth-child(1) { animation-delay: 0s; }
.cluster__pulse i:nth-child(2) { animation-delay: .15s; height: 14px; }
.cluster__pulse i:nth-child(3) { animation-delay: .3s; height: 7px; }
@keyframes equalize {
  0%, 100% { transform: scaleY(.4); }
  50%      { transform: scaleY(1); }
}

/* ─── RO-ticket horizon (section divider) ─────────────────── */
.horizon {
  position: relative;
  z-index: 2;
  height: 1px;
  background: var(--chroma);
  opacity: .55;
}
.horizon::after {
  content: attr(data-ro);
  position: absolute;
  right: var(--gutter);
  bottom: 4px;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ink) 40%, transparent);
  background: var(--navy);
  padding: .35em .9em .35em .7em;
  border-left: 2px solid var(--green-hi);
}
[data-section="blue"] + .horizon::after {
  background: var(--blue);
  color: color-mix(in oklab, #ffffff 50%, transparent);
}
[data-section="violet"] + .horizon::after { background: #14102a; }
[data-section="green"] + .horizon::after {
  background: var(--green);
  color: var(--navy);
  border-left-color: var(--navy);
}

/* Collapse top padding on the section that immediately follows the chromatic
   horizon rule. Adjacent sections both carried full ~100px of vertical
   padding, which stacked into ~200px of empty space at every color break.
   The outgoing section keeps its full bottom rhythm; the incoming section
   hugs the band edge so color transitions feel like one continuous sweep. */
.horizon + [data-section] {
  padding-top: var(--section-y-top-tight);
}
@media (max-width: 640px) {
  .horizon {
    height: 32px;
    background:
      url("data:image/svg+xml;utf8,<svg viewBox='0 0 48 32' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'><rect x='22.5' y='0' width='3' height='32' opacity='.08'/><polygon points='21,1 10,5 10,8 21,4' opacity='.22'/><polygon points='27,1 38,5 38,8 27,4' opacity='.22'/><polygon points='21,9 10,13 10,16 21,12' opacity='.16'/><polygon points='27,9 38,13 38,16 27,12' opacity='.16'/><polygon points='21,17 10,21 10,24 21,20' opacity='.22'/><polygon points='27,17 38,21 38,24 27,20' opacity='.22'/><polygon points='21,25 10,29 10,32 21,28' opacity='.16'/><polygon points='27,25 38,29 38,32 27,28' opacity='.16'/><rect x='8' y='0' width='1.5' height='32' opacity='.06'/><rect x='38.5' y='0' width='1.5' height='32' opacity='.06'/></svg>"),
      var(--chroma);
    background-size: 48px 32px, 100% 100%;
    background-repeat: repeat-x, no-repeat;
    opacity: .5;
  }
}

/* ─── Section theming: chromatic shift ────────────────────── */
[data-section] {
  position: relative;
  z-index: 1;
}
[data-section="blue"] {
  --bg: #3652de;
  --bg-up: #2a45c4;
  --ink-local: #ffffff;
  --ink-local-dim: color-mix(in oklab, #ffffff 78%, transparent);
  --ink-local-low: color-mix(in oklab, #ffffff 56%, transparent);
  --accent-local: #60b709;
  background: var(--bg);
  color: var(--ink-local);
}
[data-section="violet"] {
  --bg: #1d1636;
  --bg-up: #2b2452;
  --ink-local: #ffffff;
  --ink-local-dim: color-mix(in oklab, #ffffff 72%, transparent);
  --ink-local-low: color-mix(in oklab, #ffffff 48%, transparent);
  --accent-local: #8c7cf3;
  background:
    radial-gradient(1400px 800px at 85% -10%, color-mix(in oklab, #6136de 50%, transparent), transparent 60%),
    radial-gradient(1000px 600px at 0% 110%, color-mix(in oklab, #6136de 35%, transparent), transparent 60%),
    #14102a;
  color: var(--ink-local);
}
[data-section="green"] {
  --bg: #7fd820;
  --bg-up: #6dc115;
  --ink-local: #0d121c;
  --ink-local-dim: color-mix(in oklab, #0d121c 75%, transparent);
  --ink-local-low: color-mix(in oklab, #0d121c 55%, transparent);
  --accent-local: #0d121c;
  background:
    radial-gradient(900px 500px at 85% 0%, color-mix(in oklab, #60b709 60%, transparent), transparent 70%),
    var(--bg);
  color: var(--ink-local);
}
[data-section="navy"],
[data-section="hero"] {
  --ink-local: var(--ink);
  --ink-local-dim: var(--ink-dim);
  --ink-local-low: var(--ink-low);
  --accent-local: var(--green-hi);
}
[data-section="finale"] {
  --ink-local: #0d121c;
}

/* Ghosted hex-code stamp: single oversized stroked numeral that bleeds
   mostly off the right edge of its chromatic section. Decorative only —
   very low opacity so it acts as a signature watermark without competing
   with foreground content. */
.section-stamp {
  position: absolute;
  right: clamp(-6rem, -4vw, -2rem);
  bottom: clamp(-1rem, -1vw, 0rem);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: clamp(6rem, 16vw, 18rem);
  line-height: .8;
  letter-spacing: -.04em;
  white-space: nowrap;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
}
.section-stamp--blue {
  -webkit-text-stroke-color: color-mix(in oklab, #ffffff 18%, transparent);
}
.section-stamp--green {
  -webkit-text-stroke-color: color-mix(in oklab, #0d121c 16%, transparent);
}
.trust, .voices { isolation: isolate; }
.trust__inner, .voices__inner { position: relative; z-index: 1; }
@media (max-width: 720px) {
  .section-stamp { display: none; }
}

/* Eyebrow variants on colored sections */
.section__eyebrow--on-blue    { color: color-mix(in oklab, #ffffff 82%, transparent); }
.section__eyebrow--on-blue span { color: #ffffff; }
.section__eyebrow--on-violet  { color: color-mix(in oklab, #ffffff 60%, transparent); }
.section__eyebrow--on-violet span { color: #c7d5fe; }
.section__eyebrow--on-green   { color: color-mix(in oklab, var(--navy) 70%, transparent); }
.section__eyebrow--on-green span { color: var(--navy); }


/* ─── Trust: full-bleed electric blue ─────────────────────── */
.trust {
  padding: var(--section-y) var(--gutter);
  padding-left: calc(var(--rail-x) + var(--sp-6));
  overflow: hidden;
}
.trust__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4.5vw, 4.5rem);
}

/* ── Head: editorial block ── */
.trust__head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: var(--sp-5);
  align-items: end;
  padding-bottom: clamp(1.25rem, 2vw, 2rem);
  border-bottom: 1px solid color-mix(in oklab, #ffffff 20%, transparent);
}
.trust__head .section__eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
@media (max-width: 880px) {
  .trust__head { grid-template-columns: 1fr; align-items: start; }
}

.trust__title {
  margin-top: var(--sp-4);
  font-family: var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 10, "wght" 520;
  font-weight: 520;
  font-size: var(--fs-3xl);
  line-height: .96;
  letter-spacing: -.04em;
  color: #ffffff;
  max-width: 18ch;
}
.trust__title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 440;
  color: #c7d5fe;
}
.trust__body {
  font-size: var(--fs-md);
  max-width: 42ch;
  color: color-mix(in oklab, #ffffff 80%, transparent);
  line-height: 1.55;
  padding-bottom: .35rem; /* optical baseline align with title */
}

/* ── Roster: marquee scaffold ── */
.trust__roster {
  position: relative;
  border: 1px solid color-mix(in oklab, #ffffff 16%, transparent);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, #ffffff 6%, transparent), transparent 60%),
    color-mix(in oklab, #0d121c 18%, transparent);
  overflow: hidden;
  isolation: isolate;
}
.trust__roster::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in oklab, #ffffff 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, #ffffff 4%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 40%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.trust__roster-rail {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in oklab, #ffffff 62%, transparent);
  border-bottom: 1px dashed color-mix(in oklab, #ffffff 18%, transparent);
}
.trust__roster-pulse {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--green-hi);
  box-shadow: 0 0 10px var(--green-hi);
  animation: ticker-pulse 2s ease-in-out infinite;
}
.trust__roster-label { color: #ffffff; font-weight: 500; }
.trust__roster-sep { color: color-mix(in oklab, #ffffff 30%, transparent); }
.trust__roster-meta { color: color-mix(in oklab, #ffffff 70%, transparent); }
.trust__roster-index {
  margin-left: auto;
  color: color-mix(in oklab, #ffffff 50%, transparent);
}
@media (max-width: 640px) {
  .trust__roster-rail { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .trust__roster-index { margin-left: 0; width: 100%; }
}

.trust__marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: clamp(1.1rem, 1.5vw, 1.6rem) 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.trust__track {
  display: flex;
  align-items: stretch;
  gap: var(--sp-4);
  width: max-content;
  padding-inline: var(--sp-5);
  animation: trust-scroll 48s linear infinite;
  will-change: transform;
}
.trust__marquee:hover .trust__track,
.trust__marquee:focus-within .trust__track { animation-play-state: paused; }

@keyframes trust-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ── Chip: horizontal logo + id + name ── */
.trust__chip {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 260px;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
  background: color-mix(in oklab, #ffffff 6%, transparent);
  border: 1px solid color-mix(in oklab, #ffffff 14%, transparent);
  border-radius: 12px;
  color: #ffffff;
  transition:
    background var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}
.trust__chip:hover {
  background: color-mix(in oklab, #ffffff 11%, transparent);
  border-color: color-mix(in oklab, #ffffff 36%, transparent);
  transform: translateY(-2px);
}
.trust__chip:focus-visible {
  outline: 2px solid var(--green-hi);
  outline-offset: 3px;
}

.trust__chip-logo {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 78px; height: 54px;
  padding: var(--sp-2);
  background: color-mix(in oklab, #0d121c 35%, transparent);
  border: 1px solid color-mix(in oklab, #ffffff 10%, transparent);
  border-radius: 8px;
}
.trust__chip-logo img {
  max-height: 36px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .9;
  transition: opacity var(--dur-2) var(--ease);
}
.trust__chip:hover .trust__chip-logo img { opacity: 1; }

.trust__chip-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: var(--sp-3);
  border-left: 1px solid color-mix(in oklab, #ffffff 16%, transparent);
  min-width: 0;
}
.trust__chip-id {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in oklab, #ffffff 58%, transparent);
}
.trust__chip-name {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -.005em;
  line-height: 1.15;
  white-space: nowrap;
}

/* ── "+ more" chip ── */
.trust__chip--more {
  background: transparent;
  border-style: dashed;
  border-color: color-mix(in oklab, #c7d5fe 45%, transparent);
  cursor: default;
}
.trust__chip--more:hover {
  background: color-mix(in oklab, #c7d5fe 8%, transparent);
  border-color: color-mix(in oklab, #c7d5fe 70%, transparent);
  transform: none;
}
.trust__chip-glyph {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 54px;
  color: #c7d5fe;
}
.trust__chip-glyph svg { width: 26px; height: 26px; }
.trust__chip--more .trust__chip-id { color: #c7d5fe; }
.trust__chip-status {
  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 8px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .35em .7em;
  border-radius: 3px;
  border: 1px solid color-mix(in oklab, var(--green-hi) 40%, transparent);
  color: var(--green-hi);
  background: color-mix(in oklab, var(--green-hi) 8%, transparent);
  white-space: nowrap;
}

.trust__chip--more .trust__chip-name {
  font-family: var(--f-display);
  font-weight: 460;
  font-style: normal;
  font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 460;
  font-size: var(--fs-md);
  color: #ffffff;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.trust__chip--more .trust__chip-name em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 440;
  color: #c7d5fe;
  font-weight: inherit;
}

/* ── Readout: industry stats ── */
.trust__readout {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2vw, 1.75rem);
  padding-top: clamp(1.25rem, 2vw, 2rem);
  border-top: 1px solid color-mix(in oklab, #ffffff 20%, transparent);
}
.trust__readout-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in oklab, #ffffff 82%, transparent);
}
.trust__readout-label { color: #ffffff; font-weight: 500; }
.trust__readout-sep { color: color-mix(in oklab, #ffffff 30%, transparent); }

.trust__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 3rem);
}
.trust__stats > div {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-left: var(--sp-4);
  border-left: 1px solid color-mix(in oklab, #ffffff 22%, transparent);
  min-width: 0;
}
.trust__stats > div::before {
  content: attr(data-stat);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #dce3ff;
}
.trust__stats dt {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in oklab, #ffffff 85%, transparent);
  line-height: 1.35;
  order: 2;
}
.trust__stats dd {
  order: 1;
  font-family: var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 20, "wght" 500;
  font-size: clamp(3rem, 2rem + 3.8vw, 5.2rem);
  line-height: .95;
  letter-spacing: -.03em;
  color: #ffffff;
  margin: 0;
}
.trust__stats dd sup {
  font-size: .4em;
  vertical-align: .7em;
  color: #c7d5fe;
  font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 440;
  font-style: italic;
  margin-left: .05em;
}

/* ── Mobile: lift each stat into a layered glass card with a
      data-driven hairline progress indicator. The bar fill is
      driven by inline --p on each stat div. ── */
@media (max-width: 780px) {
  .trust__readout {
    gap: clamp(1rem, 3.5vw, 1.5rem);
    padding-top: clamp(1.1rem, 3.5vw, 1.5rem);
    border-top-color: color-mix(in oklab, #ffffff 14%, transparent);
  }
  .trust__stats {
    grid-template-columns: 1fr;
    gap: clamp(.75rem, 2.4vw, 1.05rem);
  }
  .trust__stats > div {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: 0;
    padding: clamp(1.55rem, 5.2vw, 1.9rem) clamp(1.15rem, 4.2vw, 1.45rem) clamp(1.15rem, 4vw, 1.4rem);
    border-left: none;
    border-radius: 18px;
    background:
      radial-gradient(140% 110% at 100% 0%,
        color-mix(in oklab, #ffffff 14%, transparent) 0%,
        transparent 56%),
      linear-gradient(180deg,
        color-mix(in oklab, #ffffff 5%, transparent) 0%,
        color-mix(in oklab, #0a1246 22%, transparent) 100%);
    box-shadow:
      inset 0 1px 0 color-mix(in oklab, #ffffff 32%, transparent),
      inset 0 0 0 1px color-mix(in oklab, #ffffff 9%, transparent),
      inset 0 -1px 0 color-mix(in oklab, #000000 28%, transparent),
      0 20px 36px -26px color-mix(in oklab, #05092a 80%, transparent);
  }
  .trust__stats > div > * { position: relative; z-index: 1; }

  /* Index tag anchors top-left; absolute so the numeral can sit flush */
  .trust__stats > div::before {
    position: absolute;
    top: clamp(.9rem, 3.2vw, 1.1rem);
    left: clamp(1.15rem, 4.2vw, 1.45rem);
    margin: 0;
    font-size: 10.5px;
    letter-spacing: .24em;
    color: color-mix(in oklab, #ffffff 60%, transparent);
    z-index: 2;
  }

  /* Tiny accent dot next to the index, tone-coded */
  .trust__stats > div::after {
    content: "";
    order: 3;
    display: block;
    margin-top: clamp(.9rem, 3vw, 1.15rem);
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg,
      color-mix(in oklab, #ffffff 82%, transparent) 0,
      color-mix(in oklab, #ffffff 82%, transparent) calc(var(--p, 0) * 1%),
      color-mix(in oklab, #ffffff 12%, transparent) calc(var(--p, 0) * 1%),
      color-mix(in oklab, #ffffff 12%, transparent) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, #ffffff 6%, transparent);
  }

  .trust__stats dd {
    order: 2;
    margin: 0;
    font-size: clamp(3.6rem, 17vw, 5rem);
    line-height: .9;
    letter-spacing: -.035em;
  }
  .trust__stats dd sup {
    font-size: .3em;
    vertical-align: .85em;
    color: color-mix(in oklab, #ffffff 62%, transparent);
  }
  .trust__stats dt {
    order: 4;
    margin-top: clamp(.7rem, 2.5vw, .95rem);
    font-size: 10.5px;
    letter-spacing: .18em;
    color: color-mix(in oklab, #ffffff 82%, transparent);
  }

  /* Positive-tone stat: accent-green fill + supsign */
  .trust__stats > div[data-tone="pos"]::before {
    color: color-mix(in oklab, #a8ef52 78%, transparent);
  }
  .trust__stats > div[data-tone="pos"]::after {
    background: linear-gradient(90deg,
      #a8ef52 0,
      #60b709 calc(var(--p, 0) * 1%),
      color-mix(in oklab, #ffffff 12%, transparent) calc(var(--p, 0) * 1%),
      color-mix(in oklab, #ffffff 12%, transparent) 100%);
    box-shadow:
      inset 0 0 0 1px color-mix(in oklab, #ffffff 6%, transparent),
      0 0 12px -2px color-mix(in oklab, #60b709 55%, transparent);
  }
  .trust__stats > div[data-tone="pos"] dd sup { color: #a8ef52; }
}

@media (hover: none) {
  .trust__roster-hoverhint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .trust__track { animation: none; }
}

/* ─── About ───────────────────────────────────────────────── */
.about {
  padding: var(--section-y) var(--gutter);
  padding-left: calc(var(--rail-x) + var(--sp-6));
}
.about__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.about__title {
  margin-top: var(--sp-4);
  font-family: var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 10, "wght" 520;
  font-weight: 520;
  font-size: var(--fs-3xl);
  line-height: .96;
  letter-spacing: -.04em;
  max-width: 20ch;
}
.about__title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 440;
  color: var(--green-hi);
}
.about__lede {
  margin-top: var(--sp-5);
  font-size: var(--fs-lg);
  max-width: 60ch;
  color: var(--ink-dim);
  line-height: 1.55;
}

.pillars-inline {
  margin-top: var(--sp-8);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 860px) {
  .pillars-inline {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    border-top: 0;
    border-bottom: 0;
    margin-top: var(--sp-6);
  }
}

.pillars-inline li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  border-right: 1px solid var(--border);
}
.pillars-inline li:first-child { padding-left: 0; }
.pillars-inline li:last-child { border-right: 0; padding-right: 0; }
@media (max-width: 860px) {
  .pillars-inline li {
    position: relative;
    grid-template-columns: 1fr;
    gap: 0;
    border-right: 0;
    border-bottom: 0;
    padding: var(--sp-5) var(--sp-5) var(--sp-5) calc(var(--sp-5) + 3px);
    background:
      radial-gradient(280px 180px at 100% 0%, color-mix(in oklab, var(--green) 14%, transparent), transparent 70%),
      color-mix(in oklab, var(--navy-up) 70%, transparent);
    border: 1px solid var(--border);
    border-left: 3px solid var(--green-hi);
    border-radius: 18px;
    box-shadow:
      inset 0 1px 0 color-mix(in oklab, #ffffff 4%, transparent),
      0 2px 12px rgba(0,0,0,.18);
  }
  .pillars-inline li:first-child { padding-left: calc(var(--sp-5) + 3px); }
  .pillars-inline li:last-child { padding-right: var(--sp-5); border-right: 1px solid var(--border); }
  .pillars-inline li:nth-child(2) {
    border-left-color: var(--blue);
    background:
      radial-gradient(240px 200px at 0% 100%, color-mix(in oklab, var(--blue) 14%, transparent), transparent 70%),
      color-mix(in oklab, var(--navy-up) 70%, transparent);
  }
  .pillars-inline li:nth-child(3) {
    border-left-color: var(--violet);
    background:
      radial-gradient(260px 160px at 80% 100%, color-mix(in oklab, var(--violet) 14%, transparent), transparent 70%),
      color-mix(in oklab, var(--navy-up) 70%, transparent);
  }
  .pillars-inline__n {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    font-size: .6rem;
    color: var(--ink-low);
    opacity: 0.4;
    letter-spacing: .14em;
  }
  .pillars-inline__noun {
    grid-column: 1;
    font-size: var(--fs-xl);
    line-height: 1.1;
  }
  .pillars-inline em {
    font-size: clamp(1.1rem, 0.85rem + 1.2vw, 1.45rem);
    grid-column: 1;
    margin-top: 0;
  }
  .pillars-inline__blurb {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    line-height: 1.55;
  }
}

.pillars-inline__n {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  color: var(--ink-low);
  grid-row: 1;
}
.pillars-inline__noun {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 48, "SOFT" 0, "wght" 800;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--ink);
  grid-column: 1 / -1;
}
.pillars-inline em {
  font-family: var(--f-display);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 250;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--green-hi);
  grid-column: 1 / -1;
  margin-top: -.15em;
}
.pillars-inline__blurb {
  grid-column: 1 / -1;
  margin-top: var(--sp-4);
  color: var(--ink-dim);
  max-width: 34ch;
  font-size: var(--fs-md);
  line-height: 1.5;
}

.about__split {
  margin-top: var(--sp-8);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-7);
  align-items: start;
}
@media (max-width: 860px) { .about__split { grid-template-columns: 1fr; gap: var(--sp-6); } }

.about__col {
  position: relative;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.about__idx {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  color: var(--ink-low);
  margin-bottom: var(--sp-3);
  display: block;
}
.about__h3 {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 80, "SOFT" 20, "wght" 440;
  font-size: var(--fs-xl);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
  max-width: 24ch;
}
.about__col p {
  margin-top: var(--sp-4);
  color: var(--ink-dim);
  max-width: 56ch;
  font-size: var(--fs-md);
  line-height: 1.55;
}

/* ─── Stack: full-bleed violet, 4 product slabs ───────────── */
.stack {
  padding: var(--section-y) var(--gutter);
  padding-left: calc(var(--rail-x) + var(--sp-6));
}
.stack__head {
  max-width: var(--maxw);
  margin: 0 auto var(--sp-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}
.stack__head .section__eyebrow { margin-bottom: 0; }
.stack__head .stack__sub {
  justify-self: start;
  max-width: 62ch;
}
@media (min-width: 1024px) {
  .stack__head {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    column-gap: var(--sp-8);
    align-items: end;
  }
  .stack__head .section__eyebrow {
    grid-column: 1 / -1;
  }
  .stack__head .stack__title {
    grid-column: 1;
    grid-row: 2;
  }
  .stack__head .stack__sub {
    grid-column: 2;
    grid-row: 2;
    padding-bottom: .4rem;
  }
}

/* Chromatic palette legend — delivers on the "one chromatic system" promise
   before the reader hits the slabs. */
.stack__legend {
  max-width: var(--maxw);
  margin: 0 auto var(--sp-8);
  padding-top: var(--sp-5);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  position: relative;
  border-top: 1px solid color-mix(in oklab, #ffffff 14%, transparent);
}
.stack__legend::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    #2da7ff 0%, #2da7ff 25%,
    #60b709 25%, #60b709 50%,
    #8c7cf3 50%, #8c7cf3 75%,
    #c7d5fe 75%, #c7d5fe 100%);
  opacity: .9;
  pointer-events: none;
}
.stack__legend-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) 0 0;
  position: relative;
}
.stack__legend-item + .stack__legend-item {
  border-left: 1px dashed color-mix(in oklab, #ffffff 14%, transparent);
  padding-left: var(--sp-4);
}
.stack__legend-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.stack__legend-num {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  color: var(--accent);
}
.stack__legend-name {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 20, "wght" 460;
  font-size: var(--fs-lg);
  line-height: 1;
  letter-spacing: -.015em;
  color: #ffffff;
}
.stack__legend-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.stack__legend-hue {
  color: color-mix(in oklab, var(--accent) 65%, #ffffff 35%);
}
.stack__legend-hex {
  color: color-mix(in oklab, #ffffff 45%, transparent);
}
@media (max-width: 860px) {
  .stack__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stack__legend::before {
    background: linear-gradient(90deg,
      #2da7ff 0%, #2da7ff 50%,
      #60b709 50%, #60b709 100%);
  }
  .stack__legend-item { padding: var(--sp-4) var(--sp-3) var(--sp-3) 0; }
  .stack__legend-item + .stack__legend-item { padding-left: var(--sp-3); }
  .stack__legend-item:nth-child(3) {
    border-left: 0;
    padding-left: 0;
    padding-top: var(--sp-5);
    margin-top: var(--sp-3);
    border-top: 1px solid color-mix(in oklab, #ffffff 14%, transparent);
    position: relative;
  }
  .stack__legend-item:nth-child(3)::before,
  .stack__legend-item:nth-child(4)::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -1px;
    height: 2px;
    pointer-events: none;
  }
  .stack__legend-item:nth-child(3)::before { background: #8c7cf3; }
  .stack__legend-item:nth-child(4) {
    padding-top: var(--sp-5);
    margin-top: var(--sp-3);
    border-top: 1px solid color-mix(in oklab, #ffffff 14%, transparent);
    position: relative;
  }
  .stack__legend-item:nth-child(4)::before { background: #c7d5fe; }
}

.stack__title {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 10, "wght" 520;
  font-weight: 520;
  font-size: var(--fs-3xl);
  line-height: .96;
  letter-spacing: -.04em;
  color: #ffffff;
}
.stack__title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 460;
  background: linear-gradient(92deg, #8c7cf3, #c7d5fe 60%, #7fd820);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.stack__title em .gsap-word {
  background: inherit;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.stack__sub {
  font-size: var(--fs-lg);
  color: color-mix(in oklab, #ffffff 75%, transparent);
  max-width: 50ch;
  line-height: 1.5;
}

.slabs {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border-top: 1px solid color-mix(in oklab, #ffffff 14%, transparent);
}
.slab {
  display: grid;
  grid-template-columns: 104px minmax(0, 1.1fr) minmax(360px, 1.05fr);
  gap: var(--sp-7);
  padding: clamp(3rem, 5vw, 5rem) 0;
  border-bottom: 1px solid color-mix(in oklab, #ffffff 14%, transparent);
  position: relative;
  isolation: isolate;
  align-items: stretch;
}

/* Accent sweep along bottom — 0→100% when slab enters view */
.slab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent 80%);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.4s var(--ease-out);
  pointer-events: none;
}
.slab.is-in::after { transform: scaleX(1); }

/* Visual panel: slide in from its "far" side */
.slab__visual {
  opacity: 0;
  transform: translateX(18px);
  transition: opacity .9s var(--ease-out) .15s, transform .9s var(--ease-out) .15s;
}
.slab:nth-child(even) .slab__visual { transform: translateX(-18px); }
.slab.is-in .slab__visual { opacity: 1; transform: translateX(0); }

/* Bullet stagger */
.slab__points li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.slab.is-in .slab__points li { opacity: 1; transform: none; }
.slab.is-in .slab__points li:nth-child(1) { transition-delay: .35s; }
.slab.is-in .slab__points li:nth-child(2) { transition-delay: .45s; }
.slab.is-in .slab__points li:nth-child(3) { transition-delay: .55s; }

@media (prefers-reduced-motion: reduce) {
  .slab::after { transform: scaleX(1); transition: none; }
  .slab__visual { opacity: 1; transform: none; transition: none; }
  .slab__points li { opacity: 1; transform: none; transition: none; }
  .slab__rail::before { transform: scaleY(1); transition: none; }
  .slab__rail::after { opacity: 1; transform: scale(1); transition: none; }
  .slab__num, .slab__tag { transition: none; }
}
.slab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 6%, transparent), transparent 40%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
  z-index: -1;
}
@media (hover: hover) {
  .slab:hover::before { opacity: 1; }
}

@media (max-width: 860px) {
  .slab { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-7) 0; }
}
@media (min-width: 861px) {
  .slab { grid-auto-flow: dense; }
  .slab:nth-child(even) {
    grid-template-columns: minmax(360px, 1.05fr) 104px minmax(0, 1.1fr);
  }
  .slab:nth-child(even) .slab__visual { grid-column: 1; grid-row: 1; }
  .slab:nth-child(even) .slab__rail   { grid-column: 2; grid-row: 1; }
  .slab:nth-child(even) .slab__body   { grid-column: 3; grid-row: 1; }
}

.slab__rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
  align-self: stretch;
  padding: .25rem 0 var(--sp-4) var(--sp-4);
}
.slab__rail::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 1px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 80%, transparent) 0%,
    color-mix(in oklab, var(--accent) 45%, transparent) 45%,
    color-mix(in oklab, var(--accent) 6%, transparent) 85%,
    transparent 100%);
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 1.1s var(--ease-out);
  pointer-events: none;
}
.slab.is-in .slab__rail::before { transform: scaleY(1); }
.slab__rail::after {
  content: "";
  position: absolute;
  left: -3px; top: .5rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 70%, transparent);
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  pointer-events: none;
}
.slab.is-in .slab__rail::after { opacity: 1; transform: scale(1); }
@media (hover: hover) {
  .slab:hover .slab__rail::after {
    box-shadow: 0 0 18px color-mix(in oklab, var(--accent) 90%, transparent);
  }
}

.slab__num {
  font-family: var(--f-mono);
  font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .02em;
  color: color-mix(in oklab, var(--accent) 88%, #ffffff);
  transition: color var(--dur-2) var(--ease), text-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
@media (hover: hover) {
  .slab:hover .slab__num {
    color: #ffffff;
    text-shadow: 0 0 22px color-mix(in oklab, var(--accent) 70%, transparent);
    transform: translateX(2px);
  }
}
.slab__tag {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .4em .85em;
  border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border-radius: 999px;
  color: #ffffff;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), letter-spacing var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
@media (hover: hover) {
  .slab:hover .slab__tag {
    background: color-mix(in oklab, var(--accent) 24%, transparent);
    border-color: color-mix(in oklab, var(--accent) 90%, transparent);
    letter-spacing: .14em;
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent), 0 6px 22px -10px color-mix(in oklab, var(--accent) 75%, transparent);
  }
}

.slab__body {}
.slab__title {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 20, "wght" 440;
  font-weight: 440;
  font-size: var(--fs-2xl);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: #ffffff;
  max-width: 20ch;
}
.slab__copy {
  margin-top: var(--sp-4);
  color: color-mix(in oklab, #ffffff 78%, transparent);
  max-width: 54ch;
  font-size: var(--fs-md);
  line-height: 1.55;
}
.slab__points {
  margin-top: var(--sp-4);
  display: flex; flex-direction: column; gap: .5rem;
}
.slab__points li {
  position: relative;
  padding-left: 1.5em;
  font-family: var(--f-body);
  font-size: var(--fs-md);
  color: color-mix(in oklab, #ffffff 75%, transparent);
}
.slab__points li::before {
  content: "";
  position: absolute;
  left: 0; top: .7em;
  width: .6em; height: 1px;
  background: var(--accent);
}
.slab__link {
  display: inline-flex; align-items: center; gap: .5em;
  margin-top: var(--sp-5);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .02em;
  color: #ffffff;
  padding-bottom: .25em;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 70%, transparent);
  transition: gap var(--dur-2) var(--ease), border-color var(--dur-1) var(--ease);
}
.slab__link svg { width: .85em; height: .85em; }
.slab__link:hover { gap: .75em; border-color: var(--accent); }

.slab__visual {
  position: relative;
  min-height: 320px;
  padding: var(--sp-6);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  background:
    radial-gradient(700px 340px at 90% -20%, color-mix(in oklab, var(--accent) 24%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, #0d121c 60%, transparent), color-mix(in oklab, #0d121c 85%, transparent));
  border-radius: 20px;
  overflow: hidden;
  display: flex; flex-direction: column; gap: var(--sp-5);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, #ffffff 7%, transparent),
    0 40px 80px -40px color-mix(in oklab, var(--accent) 30%, transparent);
}
.slab__visual::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in oklab, #ffffff 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, #ffffff 4%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(600px 400px at 100% 100%, black, transparent 70%);
  pointer-events: none;
  opacity: .5;
}

/* Bay number watermarks inside the grid */
.slab__visual .slab__bay {
  position: absolute;
  top: var(--sp-5); right: var(--sp-5);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in oklab, #ffffff 30%, transparent);
  pointer-events: none;
  z-index: 0;
}

/* Per-slab visual differentiation — the light falls from a different
   angle for each accent so the four panels feel like members of a
   system, not clones with tinted fills. */
.slab[data-accent="blue"] .slab__visual {
  background:
    radial-gradient(700px 340px at 92% -20%, color-mix(in oklab, var(--accent) 28%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, #0d121c 60%, transparent), color-mix(in oklab, #0d121c 85%, transparent));
}
.slab[data-accent="green"] .slab__visual {
  background:
    radial-gradient(600px 420px at 8% 115%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 68%),
    radial-gradient(320px 260px at 95% 10%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, #0d121c 60%, transparent), color-mix(in oklab, #0d121c 85%, transparent));
}
.slab[data-accent="violet"] .slab__visual {
  background:
    radial-gradient(520px 520px at 50% 50%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 68%),
    linear-gradient(180deg, color-mix(in oklab, #0d121c 55%, transparent), color-mix(in oklab, #0d121c 88%, transparent));
}
.slab[data-accent="cyan"] .slab__visual {
  background:
    radial-gradient(900px 260px at 50% -30%, color-mix(in oklab, var(--accent) 28%, transparent), transparent 75%),
    radial-gradient(420px 420px at 8% 110%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, #0d121c 62%, transparent), color-mix(in oklab, #0d121c 88%, transparent));
}

/* Same idea for the grid-overlay falloff — each card has its own
   direction of vignette so the pattern of light varies. */
.slab[data-accent="blue"]  .slab__visual::before { mask-image: radial-gradient(620px 420px at 100% 100%, black, transparent 72%); }
.slab[data-accent="green"] .slab__visual::before { mask-image: radial-gradient(620px 420px at 0% 0%, black, transparent 72%); }
.slab[data-accent="violet"] .slab__visual::before { mask-image: radial-gradient(520px 520px at 50% 50%, black, transparent 70%); opacity: .38; }
.slab[data-accent="cyan"]  .slab__visual::before { mask-image: radial-gradient(620px 420px at 100% 0%, black, transparent 72%); }
.slab__mark {
  align-self: flex-start;
  max-height: 32px;
  width: auto;
  opacity: .95;
}
.slab__svg {
  width: 100%;
  height: auto;
  max-height: 200px;
  flex: 1;
}
.slab__readout {
  display: flex; flex-direction: column; gap: .15rem;
  padding-top: var(--sp-3);
  border-top: 1px dashed color-mix(in oklab, #ffffff 18%, transparent);
}
.slab__readout-label {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  color: color-mix(in oklab, #ffffff 60%, transparent);
}
.slab__readout-val {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 20, "wght" 500;
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2.1rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: #ffffff;
}
.slab__readout-val sup {
  font-family: var(--f-mono);
  font-size: .45em;
  color: color-mix(in oklab, #ffffff 70%, transparent);
  vertical-align: super;
  margin-left: .15em;
}

/* ─── Voices: full-bleed chameleon green, editorial spread ─ */
.voices {
  padding: var(--section-y) var(--gutter);
  padding-left: calc(var(--rail-x) + var(--sp-6));
  overflow: hidden;
}
.voices__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.voices__title {
  margin-top: var(--sp-5);
  font-family: var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 10, "wght" 520;
  font-weight: 520;
  font-size: var(--fs-3xl);
  line-height: .96;
  letter-spacing: -.04em;
  color: var(--navy);
  max-width: 22ch;
}
.voices__title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 440;
  color: color-mix(in oklab, var(--navy) 82%, var(--blue) 18%);
  background: linear-gradient(transparent 62%, color-mix(in oklab, #ffffff 70%, transparent) 62%) no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  padding: 0 .12em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* Editorial split: featured voice (left) + three supporting (right) */
.voices__wall {
  margin-top: var(--sp-7);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0;
  border-top: 1px solid color-mix(in oklab, var(--navy) 35%, transparent);
  border-left: 1px solid color-mix(in oklab, var(--navy) 35%, transparent);
}
@media (max-width: 860px) {
  .voices__wall { grid-template-columns: 1fr; }
}

.voice {
  position: relative;
  padding: clamp(1.5rem, 2.2vw, 2.25rem);
  border-right: 1px solid color-mix(in oklab, var(--navy) 35%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--navy) 35%, transparent);
  display: flex; flex-direction: column; gap: var(--sp-5);
  background: transparent;
  transition: background var(--dur-2) var(--ease);
  contain: style paint;
}
.voice:hover,
.voice:focus-within { background: color-mix(in oklab, #ffffff 18%, transparent); }

.voice blockquote { margin: 0; }
.voice blockquote p {
  margin: 0;
  font-family: var(--f-display);
  font-variation-settings: "opsz" 80, "SOFT" 20, "wght" 460;
  font-size: clamp(1.1rem, .85rem + .65vw, 1.4rem);
  line-height: 1.34;
  letter-spacing: -.015em;
  color: var(--navy);
  transition: font-variation-settings var(--dur-3) var(--ease);
}
.voice:hover blockquote p,
.voice:focus-within blockquote p {
  font-variation-settings: "opsz" 80, "SOFT" 85, "wght" 480;
}
.voice blockquote p strong {
  font-weight: 600;
  color: var(--navy);
  background: linear-gradient(transparent 60%, color-mix(in oklab, #ffffff 65%, transparent) 60%) no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  padding: 0 .1em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.voice figcaption {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed color-mix(in oklab, var(--navy) 35%, transparent);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--navy) 70%, transparent);
}
.voice__scale {
  color: var(--navy);
  font-weight: 500;
  font-feature-settings: "tnum" 1;
}
.voice__who { color: color-mix(in oklab, var(--navy) 65%, transparent); text-align: right; }

/* ── Featured voice: magazine spread ─────────────────────── */
.voice--featured {
  grid-column: 1;
  grid-row: 1 / span 3;
  padding: clamp(2rem, 3.2vw, 3.75rem);
  gap: clamp(1.25rem, 2vw, 2rem);
  justify-content: space-between;
}
@media (max-width: 860px) {
  .voice--featured { grid-column: 1; grid-row: auto; }
}

.voice__mark {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 440;
  font-style: italic;
  font-size: clamp(6rem, 13vw, 11rem);
  line-height: .55;
  color: color-mix(in oklab, var(--navy) 24%, transparent);
  display: block;
  margin-bottom: -.2em;
  user-select: none;
  pointer-events: none;
  transition: color var(--dur-2) var(--ease), transform var(--dur-3) var(--ease);
  transform-origin: top left;
}
.voice--featured:hover .voice__mark {
  color: color-mix(in oklab, var(--navy) 55%, transparent);
  transform: translateY(-4px) rotate(-2deg);
}

.voice--featured .voice__quote p {
  font-size: clamp(1.5rem, .9rem + 1.9vw, 2.5rem);
  line-height: 1.2;
  font-variation-settings: "opsz" 120, "SOFT" 30, "wght" 440;
  letter-spacing: -.02em;
}
.voice--featured:hover .voice__quote p,
.voice--featured:focus-within .voice__quote p {
  font-variation-settings: "opsz" 120, "SOFT" 80, "wght" 460;
}

.voice__cap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: end;
  padding-top: var(--sp-5);
  border-top: 1px dashed color-mix(in oklab, var(--navy) 35%, transparent);
}
@media (max-width: 560px) {
  .voice__cap { grid-template-columns: 1fr; }
}

.voice__stat { display: flex; flex-direction: column; gap: .3rem; }
.voice__stat-lead {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--navy) 60%, transparent);
}
.voice__stat-val {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 0, "wght" 560;
  font-size: clamp(2.6rem, 1.8rem + 2.8vw, 4.6rem);
  line-height: .88;
  letter-spacing: -.045em;
  color: var(--navy);
  font-feature-settings: "tnum" 1, "ss01" 1;
  display: inline-flex;
  align-items: baseline;
  gap: .04em;
}
.voice__stat-prefix {
  font-size: .5em;
  margin-right: .02em;
  color: color-mix(in oklab, var(--navy) 78%, transparent);
  font-variation-settings: "opsz" 80, "SOFT" 20, "wght" 520;
}
.voice__stat-unit {
  font-family: var(--f-mono);
  font-size: .24em;
  letter-spacing: .04em;
  margin-left: .1em;
  color: color-mix(in oklab, var(--navy) 70%, transparent);
  text-transform: none;
  vertical-align: baseline;
  bottom: 0;
  font-weight: 500;
}
.voice__stat-foot {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--navy) 65%, transparent);
}
.voice__stat-foot [data-count-up] { font-weight: 600; color: var(--navy); }

.voice__who--featured {
  display: flex; flex-direction: column; gap: .3rem;
  text-align: right;
  align-self: end;
}
@media (max-width: 560px) {
  .voice__who--featured { text-align: left; }
}
.voice__who-name {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 80, "SOFT" 20, "wght" 560;
  font-size: clamp(1rem, .8rem + .45vw, 1.25rem);
  color: var(--navy);
  text-transform: none;
  letter-spacing: -.015em;
}
.voice__who-role {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--navy) 60%, transparent);
}

/* ── Verified stamp on featured ──────────────────────────── */
.voice__stamp {
  position: absolute;
  top: clamp(1.25rem, 2.2vw, 2.25rem);
  right: clamp(1.25rem, 2.2vw, 2.25rem);
  padding: .45rem .85rem;
  border: 1.5px dashed color-mix(in oklab, var(--navy) 55%, transparent);
  border-radius: 3px;
  transform: rotate(-4deg);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--navy) 60%, transparent);
  display: flex; flex-direction: column; gap: .1rem;
  line-height: 1.15;
  background: color-mix(in oklab, #ffffff 6%, transparent);
  user-select: none;
  pointer-events: none;
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.voice--featured:hover .voice__stamp {
  transform: rotate(-2deg) scale(1.04);
  border-color: var(--navy);
  color: var(--navy);
}
.voice__stamp-line:first-child {
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .2em;
}
@media (max-width: 560px) {
  .voice__stamp { top: 1rem; right: 1rem; padding: .35rem .65rem; }
}

/* ── Read more dealer stories CTA ────────────────────────── */
.voices__more {
  margin-top: var(--sp-6);
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .9rem .6rem .6rem;
  border: 1px solid color-mix(in oklab, var(--navy) 45%, transparent);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  background: color-mix(in oklab, #ffffff 4%, transparent);
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.voices__more:hover {
  background: color-mix(in oklab, #ffffff 22%, transparent);
  border-color: var(--navy);
  transform: translateY(-1px);
}
.voices__more-count {
  display: inline-flex;
  align-items: center;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--navy);
  color: var(--green);
  font-weight: 700;
  letter-spacing: .08em;
}
.voices__more-label { font-weight: 500; }
.voices__more-arrow {
  display: inline-flex;
  margin-left: .15rem;
  transition: transform var(--dur-2) var(--ease);
}
.voices__more:hover .voices__more-arrow { transform: translateX(4px); }

/* ── Scroll-driven entrance + highlighter draw-in ────────── */
@keyframes voice-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes voice-hl-draw {
  from { background-size: 0% 100%; }
  to   { background-size: 100% 100%; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .voice {
      animation: voice-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
    .voice blockquote p strong,
    .voices__title em {
      background-size: 0% 100%;
      animation: voice-hl-draw linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 40%;
    }
  }
}


/* ─── CTA · service-ticket plate ─────────────────────────── */
.cta {
  padding: var(--section-y) var(--gutter);
  padding-left: calc(var(--rail-x) + var(--sp-6));
}
.cta__ticket {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(2.25rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem);
  background:
    radial-gradient(900px 500px at 100% 0%, color-mix(in oklab, var(--blue) 22%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--navy-up) 82%, transparent), color-mix(in oklab, var(--navy) 92%, transparent));
  border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
  isolation: isolate;
  overflow: hidden;
}
.cta__ticket::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in oklab, var(--ink) 5%, transparent) 1px, transparent 1px);
  background-size: 100% 36px;
  mask-image: radial-gradient(700px 400px at 100% 100%, black, transparent 75%);
  pointer-events: none;
  opacity: .45;
}

/* technical-drawing index corners */
.cta__corner {
  position: absolute;
  width: 16px; height: 16px;
  border: 1px solid color-mix(in oklab, var(--green-hi) 80%, transparent);
  pointer-events: none;
}
.cta__corner--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.cta__corner--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.cta__corner--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.cta__corner--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

.cta__head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: var(--sp-4);
  border-bottom: 1px dashed color-mix(in oklab, var(--ink) 22%, transparent);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.cta__slug { display: inline-flex; align-items: center; gap: .5em; }
.cta__slug--pulse { color: var(--green-hi); }
.cta__slug--pulse i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  animation: pulse 2s var(--ease) infinite;
}

.cta__fields {
  margin-top: var(--sp-5);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: color-mix(in oklab, var(--ink) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
}
@media (max-width: 720px) { .cta__fields { grid-template-columns: repeat(2, 1fr); } }

.cta__field {
  padding: var(--sp-4);
  background: color-mix(in oklab, var(--navy) 80%, transparent);
  display: flex; flex-direction: column; gap: .35rem;
}
.cta__label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-low);
}
.cta__value {
  font-family: var(--f-body);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--ink);
}
.cta__value--placeholder {
  color: var(--ink-dim);
  font-style: italic;
  font-weight: 400;
  border-bottom: 1px dashed color-mix(in oklab, var(--ink) 25%, transparent);
  padding-bottom: 1px;
}

.cta__title {
  margin-top: var(--sp-7);
  font-family: var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 10, "wght" 520;
  font-weight: 520;
  font-size: var(--fs-3xl);
  line-height: .96;
  letter-spacing: -.04em;
  color: var(--ink);
  max-width: 22ch;
}
.cta__title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 440;
  color: var(--green-hi);
}

.cta__body {
  margin-top: var(--sp-5);
  max-width: 60ch;
  font-size: var(--fs-lg);
  color: var(--ink-dim);
  line-height: 1.55;
}

.cta__sign {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px dashed color-mix(in oklab, var(--ink) 22%, transparent);
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
}
.cta__sign-label {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-hi);
}
.cta__submit { position: relative; }
.cta__secondary {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--ink-dim);
  padding-bottom: 2px;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.cta__secondary:hover { color: var(--ink); border-color: var(--ink); }

/* Countersigned line */
.cta__counter {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px dashed color-mix(in oklab, var(--ink) 22%, transparent);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-6);
  align-items: center;
}
@media (max-width: 720px) {
  .cta__counter { grid-template-columns: 1fr; gap: var(--sp-5); }
}

.cta__sig {
  display: flex; flex-direction: column; gap: .4rem;
  min-width: 0;
}
.cta__sig-img {
  width: 100%;
  max-width: 360px;
  height: auto;
  filter: drop-shadow(0 0 10px color-mix(in oklab, var(--green) 50%, transparent));
  opacity: 0;
  transition: opacity 1s var(--ease-out);
}
[data-signature].is-in .cta__sig-img { opacity: 1; }

.cta__sig-line {
  display: block;
  width: 360px;
  max-width: 100%;
  height: 1px;
  background: color-mix(in oklab, var(--ink) 30%, transparent);
}
.cta__sig-caption {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: .2rem;
}

.cta__stamp {
  width: clamp(96px, 12vw, 130px);
  height: clamp(96px, 12vw, 130px);
  color: var(--green-hi);
  transform: rotate(-8deg);
  opacity: 0;
  transition: opacity .6s var(--ease-out) 1.6s, transform .6s var(--ease-out) 1.6s;
}
[data-signature].is-in .cta__stamp {
  opacity: .78;
  transform: rotate(-8deg) scale(1);
}
.cta__stamp-svg { width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .cta__sig-img { transition: none; opacity: 1; }
  .cta__stamp { transition: none; opacity: .78; }
}

/* ─── Footer ─────────────────────────────────────────────── */
/* 2026-era: an instrument readout. Status band, dispatch CTA,
   mono-indexed link columns, a chroma-shifting monolith wordmark,
   and a HUD meta row with live clock. */

.footer {
  position: relative;
  margin-top: var(--sp-9);
  padding: var(--sp-7) clamp(1.25rem, 3vw, 3rem) var(--sp-5);
  max-width: var(--maxw);
  margin-inline: auto;
  border-top: 1px solid var(--border);
  overflow: hidden;
  isolation: isolate;
}
/* Fine HUD grid baked into the footer background */
.footer__grid {
  position: absolute; inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(to right,
      color-mix(in oklab, var(--ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom,
      color-mix(in oklab, var(--ink) 5%, transparent) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  mask-image:
    radial-gradient(120% 80% at 50% 120%, #000 35%, transparent 75%);
  -webkit-mask-image:
    radial-gradient(120% 80% at 50% 120%, #000 35%, transparent 75%);
  opacity: .7;
}
/* Chromatic bloom anchored to the monolith */
.footer__glow {
  position: absolute;
  left: 50%; bottom: -20%;
  width: 120%;
  aspect-ratio: 3 / 1;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 70% at 50% 100%,
      color-mix(in oklab, var(--violet) 45%, transparent) 0%,
      color-mix(in oklab, var(--blue) 28%, transparent) 38%,
      transparent 72%),
    radial-gradient(40% 55% at 15% 95%,
      color-mix(in oklab, var(--blue) 38%, transparent) 0%,
      transparent 60%),
    radial-gradient(40% 55% at 85% 95%,
      color-mix(in oklab, var(--green) 28%, transparent) 0%,
      transparent 60%);
  filter: blur(6px);
  opacity: .55;
}

/* ─── Status band ────────────────────────────────────────── */
.footer__status {
  display: flex; flex-wrap: wrap;
  gap: .4rem .75rem;
  align-items: center;
  padding: .55rem .9rem;
  margin: 0 auto var(--sp-6);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in oklab, var(--navy-up) 55%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--ink-dim);
  width: fit-content;
  max-width: 100%;
  justify-content: center;
}
.footer__chip {
  display: inline-flex; align-items: center;
  gap: .4rem;
  padding: .1rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.footer__chip + .footer__chip {
  border-left: 1px solid var(--border);
  padding-left: .75rem;
  border-radius: 0;
}
.footer__chip b {
  color: var(--ink-low);
  font-weight: 500;
  letter-spacing: .12em;
}
.footer__chip--live { color: var(--ink); }
.footer__chip--clock time {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.footer__pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-hi);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--green-hi) 80%, transparent);
  animation: footer-pulse 2.4s var(--ease-out) infinite;
}
@keyframes footer-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--green-hi) 70%, transparent); }
  70%  { box-shadow: 0 0 0 9px color-mix(in oklab, var(--green-hi) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--green-hi) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .footer__pulse { animation: none; }
}

/* ─── Dispatch banner (full-width, 2-col) ────────────────── */
.footer__dispatch {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr);
  align-items: center;
  gap: var(--sp-6) var(--sp-7);
  padding: var(--sp-6) var(--sp-6);
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--navy-up) 82%, transparent),
      color-mix(in oklab, var(--navy) 72%, transparent));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.footer__dispatch::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--chroma);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .38;
  pointer-events: none;
}
.footer__dispatch::after {
  content: "";
  position: absolute;
  right: -6%; top: -40%;
  width: 420px; aspect-ratio: 1;
  background: radial-gradient(circle at center,
    color-mix(in oklab, var(--violet) 55%, transparent),
    transparent 65%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}
.footer__dispatch > * { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .footer__dispatch { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-6); }
  .footer__dispatch-text { gap: .65rem; }
  .footer__dispatch h3 { line-height: 1.12; }
  .footer__dispatch-form { gap: var(--sp-4); }
}
@media (max-width: 480px) {
  .footer__dispatch { padding: clamp(1.5rem, 5vw, 2rem); }
  .footer__dispatch::after { width: 280px; right: -12%; top: -30%; }
}
.footer__dispatch-text { display: grid; gap: .4rem; max-width: 52ch; }
.footer__kicker {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-low);
}
.footer__dispatch h3 {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 540;
  font-size: var(--fs-2xl);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--ink);
}
.footer__dispatch p {
  font-size: var(--fs-sm);
  color: var(--ink-dim);
  max-width: 46ch;
}
.footer__dispatch-form { display: grid; gap: var(--sp-3); min-width: 0; }
.footer__input {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .4rem;
  padding: .35rem .35rem .35rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border-hi);
  background: color-mix(in oklab, var(--navy) 70%, transparent);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.footer__input:focus-within {
  border-color: color-mix(in oklab, var(--blue-soft) 60%, var(--border-hi));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--blue) 22%, transparent);
}
.footer__input input {
  background: transparent; border: 0; outline: 0;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  padding: .55rem 0;
  min-width: 0;
}
.footer__input input::placeholder { color: var(--ink-low); }
.footer__input button {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1rem;
  border-radius: 999px;
  color: var(--navy);
  background: var(--ink);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.footer__input button:hover {
  background: var(--green-hi);
  transform: translateX(2px);
}
.footer__input button svg { transition: transform var(--dur-1) var(--ease); }
.footer__input button:hover svg { transform: translateX(2px); }
.footer__dispatch-meta {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--ink-low);
}
.footer__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-low);
}
.footer__dispatch[data-state="ok"] .footer__dot { background: var(--green-hi); }
.footer__dispatch[data-state="err"] .footer__dot { background: #ff6c61; }
.footer__dispatch[data-state="ok"] .footer__dispatch-meta { color: var(--green-hi); }
.footer__dispatch[data-state="err"] .footer__dispatch-meta { color: #ff9a93; }

/* ─── Link columns (centered) ────────────────────────────── */
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-7) 0 var(--sp-5);
  text-align: center;
}
@media (max-width: 960px) { .footer__cols { grid-template-columns: repeat(2, 1fr); } }

.footer__cols h4 {
  display: inline-flex; align-items: baseline; justify-content: center;
  gap: .55rem;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--sp-4);
  font-weight: 600;
}
.footer__idx {
  color: var(--ink-low);
  font-weight: 400;
  letter-spacing: .1em;
}
.footer__cols ul { display: grid; gap: .1rem; justify-items: center; }
.footer__cols a {
  position: relative;
  display: inline-block;
  padding: .4rem .2rem;
  color: var(--ink-dim);
  font-size: var(--fs-sm);
  transition: color var(--dur-1) var(--ease);
}
/* Centered underline that expands out from the middle on hover */
.footer__cols a::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 4px;
  width: 0; height: 1px;
  background: var(--chroma);
  transform: translateX(-50%);
  transition: width var(--dur-2) var(--ease-out);
}
.footer__cols a:hover,
.footer__cols a:focus-visible {
  color: var(--ink);
  outline: none;
}
.footer__cols a:hover::before,
.footer__cols a:focus-visible::before { width: 100%; }

/* ─── Monolith wordmark ─────────────────────────────────── */
/* Container queries size font to container width, so the wordmark
   fills edge-to-edge at any viewport and never clips. */
.footer__monolith {
  position: relative;
  container-type: inline-size;
  margin: var(--sp-3) 0 var(--sp-2);
  line-height: .78;
  user-select: none;
}

/* ─── Sign-off colophon (below monolith) ──────────────────
   Italic Fraunces tagline flanked by thin chromatic rules,
   with social icons on a line below. The wordmark above IS
   the brand — no mini-logo competes with it. */
.footer__signoff {
  display: grid;
  justify-items: center;
  gap: var(--sp-5);
  margin: var(--sp-5) 0 var(--sp-4);
  text-align: center;
}
.footer__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 360;
  font-size: var(--fs-lg);
  line-height: 1.3;
  color: var(--ink-dim);
}
.footer__tag em {
  font-style: italic;
  max-width: 52ch;
  letter-spacing: -.005em;
}
.footer__tag-mark {
  flex: 0 0 56px;
  height: 1px;
  background: var(--chroma);
  opacity: .7;
}
.footer__social {
  display: inline-flex;
  gap: .45rem;
}
.footer__social a {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--navy-up) 60%, transparent);
  color: var(--ink-dim);
  transition: transform var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}
.footer__social a:hover {
  color: var(--ink);
  border-color: var(--border-hi);
  background: color-mix(in oklab, var(--blue) 18%, var(--navy-up));
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  .footer__tag { font-size: var(--fs-md); gap: var(--sp-3); }
  .footer__tag-mark { flex-basis: 28px; }
}
.footer__monolith-word {
  display: block;
  text-align: center;
  font-family: var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 640;
  font-size: 15.4cqi;
  letter-spacing: -.048em;
  background: linear-gradient(92deg,
    #7aa2ff 0%, #9d7bff 32%, #c7d5fe 54%, #3ea0c7 78%, #7fd820 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 18px 42px color-mix(in oklab, var(--violet) 42%, transparent));
  animation: footer-chroma 22s linear infinite;
}
@keyframes footer-chroma {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
@media (prefers-reduced-motion: reduce) {
  .footer__monolith-word { animation: none; }
}

/* ─── Horizon ────────────────────────────────────────────── */
.footer__horizon {
  position: relative;
  height: 18px;
  display: grid;
  align-items: center;
  margin-top: var(--sp-2);
}
.footer__horizon-line {
  display: block;
  height: 1px;
  background: var(--chroma);
  opacity: .75;
}
.footer__horizon-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(
    circle, color-mix(in oklab, var(--ink) 22%, transparent) 1px, transparent 1.4px);
  background-size: 10px 18px;
  background-position: 0 50%;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  opacity: .5;
}

/* ─── Meta row ───────────────────────────────────────────── */
.footer__bot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--ink-low);
}
.footer__mono { color: var(--ink-dim); }
.footer__mono--mid { justify-self: center; color: var(--ink-low); }
@media (max-width: 760px) {
  .footer__bot { grid-template-columns: 1fr auto; }
  .footer__mono--mid { grid-column: 1 / -1; justify-self: start; }
}
.footer__top-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .85rem .5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--navy-up) 65%, transparent);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: transform var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}
.footer__top-btn svg { transition: transform var(--dur-2) var(--ease-out); }
.footer__top-btn:hover {
  border-color: var(--border-hi);
  background: color-mix(in oklab, var(--blue) 22%, var(--navy-up));
  transform: translateY(-2px);
}
.footer__top-btn:hover svg { transform: translate(3px, -3px) rotate(-8deg); }

/* ─── Small screen ────────────────────────────────────────── */
@media (max-width: 600px) {
  :root { --rail-x: var(--gutter); }
  .nav__brand img { height: 26px; }
}

/* Visually-hidden utility (a11y) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ─────────────────────────────────────────────────────────────
   SUBPAGE SYSTEM
   Shared primitives for about, blog, testimonials, partners,
   contact, careers, privacy, and solution detail pages.
   ───────────────────────────────────────────────────────────── */

/* Subpage hero — compact editorial masthead */
.subhero {
  position: relative;
  padding: var(--section-y) var(--rail-x) clamp(3rem, 1rem + 4vw, 5.5rem);
  max-width: var(--maxw);
  margin: 0 auto;
  overflow: hidden;
}
.subhero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-dim);
  margin-bottom: var(--sp-4);
}
.subhero__eyebrow span { color: var(--blue-soft); }
.subhero__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 1.4rem + 5vw, 5.4rem);
  line-height: 1;
  letter-spacing: -.02em;
  max-width: 22ch;
}
.subhero__title em {
  font-style: italic;
  color: var(--blue-soft);
}
@media (max-width: 560px) {
  .subhero__title,
  .about__title,
  .voices__title { max-width: none; }
}
.subhero__lede {
  margin-top: var(--sp-5);
  max-width: 62ch;
  font-size: var(--fs-lg);
  color: var(--ink-dim);
  line-height: 1.55;
}
.subhero__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-6);
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.subhero__meta b { color: var(--ink); font-weight: 500; }

/* Subhero rings watermark */
.subhero__rings {
  position: absolute;
  top: 50%; right: -5%;
  transform: translateY(-50%);
  width: min(75vh, 860px);
  opacity: .42;
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 960px) { .subhero__rings { right: -50%; opacity: .22; } }

/* Generic section shell for subpages — uses same color bands as home */
.page-section {
  position: relative;
  padding: clamp(4rem, 2rem + 5vw, 7rem) var(--rail-x);
}
.page-section__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.page-section__head {
  display: grid;
  gap: var(--sp-4);
  max-width: 900px;
  margin-bottom: var(--sp-7);
}
.page-section__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.2rem);
  line-height: 1.05; letter-spacing: -.015em;
}
.page-section__title em {
  font-style: italic;
  color: var(--blue-soft);
}
.page-section__lede {
  max-width: 62ch;
  color: var(--ink-dim);
  font-size: var(--fs-lg);
  line-height: 1.55;
}

/* ─── ABOUT: team grid ─────────────────────────────────────── */
.people {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, .6rem + 1.5vw, 2.2rem);
}
@media (max-width: 900px) { .people { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .people { grid-template-columns: 1fr; }
  .person__body { padding: var(--sp-4) var(--sp-3); }
  .person__quote { padding-left: var(--sp-4); }
}

.person {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--sp-3) var(--sp-3) 0;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: color-mix(in oklab, var(--navy-up) 80%, transparent);
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.person:hover { transform: translateY(-4px); border-color: var(--border-hi); box-shadow: 0 12px 40px rgba(0,0,0,.28); }
.person__photo {
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, color-mix(in oklab, var(--blue) 30%, transparent), color-mix(in oklab, var(--violet) 30%, transparent));
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.person__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  filter: saturate(.95) contrast(1.02);
}
.person__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.38) 100%);
  border-radius: inherit;
  pointer-events: none;
}
.person__badge {
  position: absolute;
  top: var(--sp-4); left: var(--sp-4);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .35em .65em;
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in oklab, var(--navy) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.person__badge i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-hi);
  box-shadow: 0 0 8px var(--green-hi);
}
.person__body {
  padding: var(--sp-5) var(--sp-4);
  display: grid; gap: var(--sp-4);
}
.person__name {
  font-family: var(--f-display); font-weight: 500;
  font-size: var(--fs-lg);
  letter-spacing: -.01em;
}
.person__role {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-soft);
}
.person__quote {
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--sp-5);
  border-left: 2px solid color-mix(in oklab, var(--green-hi) 40%, transparent);
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.3rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.person__quote::before {
  content: none;
}
.person__bio {
  color: var(--ink-dim);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
@media (max-width: 560px) { .person__photo { aspect-ratio: 1 / 1; } }

/* About "Driving Change" pull section */
.pullblock {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: start;
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border);
}
@media (max-width: 860px) { .pullblock { grid-template-columns: 1fr; } }
.pullblock__tag {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue-soft);
}
.pullblock__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.6rem, 1rem + 2vw, 2.6rem);
  line-height: 1.1; letter-spacing: -.015em;
  margin-top: var(--sp-3);
}
.pullblock__body {
  color: var(--ink-dim);
  font-size: var(--fs-md);
  line-height: 1.65;
}
.pullblock__body p + p { margin-top: var(--sp-4); }

/* Video cards — used by about + trusted-partners */
.vid-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, .5rem + 1vw, 1.5rem);
  margin-top: var(--sp-7);
}
@media (max-width: 760px) { .vid-grid { grid-template-columns: 1fr; } }
.vid-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: color-mix(in oklab, var(--navy-up) 70%, transparent);
  aspect-ratio: 16 / 9;
  display: flex; align-items: flex-end;
  padding: var(--sp-5);
  text-decoration: none; color: inherit;
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.vid-card:hover { transform: translateY(-2px); border-color: var(--border-hi); }
.vid-card__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(closest-side at 30% 40%, color-mix(in oklab, var(--blue) 40%, transparent), transparent 70%),
    radial-gradient(closest-side at 70% 60%, color-mix(in oklab, var(--violet) 40%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in oklab, var(--navy-soft) 85%, transparent), color-mix(in oklab, var(--navy) 95%, transparent));
  z-index: 0;
}
.vid-card__bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .35;
  mix-blend-mode: luminosity;
}
.vid-card__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.65) 100%);
}
.vid-card__body { position: relative; z-index: 1; }
.vid-card__label {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue-soft);
}
.vid-card__title {
  font-family: var(--f-display); font-weight: 500;
  font-size: var(--fs-xl); line-height: 1.1;
  margin-top: var(--sp-2);
  letter-spacing: -.01em;
}
.vid-card__play {
  position: absolute; top: var(--sp-5); right: var(--sp-5);
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid color-mix(in oklab, #fff 30%, transparent);
  background: color-mix(in oklab, #000 40%, transparent);
  backdrop-filter: blur(8px);
  color: #fff;
  z-index: 1;
}

/* ─── BLOG INDEX ───────────────────────────────────────────── */
.blog-feature {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
  padding: clamp(1rem, .5rem + 1vw, 2rem);
  border: 1px solid var(--border);
  border-radius: 22px;
  background: color-mix(in oklab, var(--navy-up) 65%, transparent);
  margin-bottom: var(--sp-8);
}
@media (max-width: 860px) { .blog-feature { grid-template-columns: 1fr; } }
.blog-feature__media {
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--navy-up);
}
.blog-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-feature__body { display: grid; gap: var(--sp-4); }
.blog-feature__tags {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.blog-tag {
  display: inline-flex; align-items: center;
  padding: .35em .75em;
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-soft);
  border: 1px solid color-mix(in oklab, var(--blue-soft) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--blue) 10%, transparent);
}
.blog-feature__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  line-height: 1.1; letter-spacing: -.015em;
}
.blog-feature__desc {
  color: var(--ink-dim);
  font-size: var(--fs-md);
  line-height: 1.6;
}
.blog-feature__more {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--f-mono); font-size: var(--fs-sm);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
}
.blog-feature__more svg { width: 1em; height: 1em; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, .5rem + 1.2vw, 1.8rem);
}
@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in oklab, var(--navy-up) 60%, transparent);
  color: inherit;
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.blog-card:hover { transform: translateY(-2px); border-color: var(--border-hi); }
.blog-card__media {
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: var(--navy-up);
  position: relative;
}
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__num {
  position: absolute; bottom: var(--sp-3); left: var(--sp-3);
  padding: .3em .6em;
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .14em;
  color: var(--ink);
  background: color-mix(in oklab, var(--navy) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.blog-card__title {
  font-family: var(--f-display); font-weight: 500;
  font-size: var(--fs-lg);
  line-height: 1.2; letter-spacing: -.01em;
}
.blog-card__desc {
  color: var(--ink-dim);
  font-size: var(--fs-sm);
  line-height: 1.55;
  margin-top: var(--sp-2);
}
.blog-card__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim);
}
.blog-card__foot svg { width: 14px; height: 14px; }

/* ─── TESTIMONIALS WALL (expanded voices) ────────────────── */
.wall {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, .5rem + 1vw, 1.5rem);
}
.wall__quote {
  grid-column: span 6;
  position: relative;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in oklab, var(--navy-up) 55%, transparent);
  display: grid; gap: var(--sp-4);
  align-content: start;
}
.wall__quote--wide { grid-column: span 8; }
.wall__quote--narrow { grid-column: span 4; }
@media (max-width: 960px) {
  .wall__quote,
  .wall__quote--wide,
  .wall__quote--narrow { grid-column: span 12; }
}
.wall__quote::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 3px;
  background: var(--accent, var(--chroma));
  border-radius: 0 0 3px 0;
}
.wall__quote[data-accent="green"]  { --accent: var(--green-hi); }
.wall__quote[data-accent="blue"]   { --accent: var(--cyan); }
.wall__quote[data-accent="violet"] { --accent: var(--violet); }
.wall__quote[data-accent="cyan"]   { --accent: var(--blue-soft); }

.wall__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-4);
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.wall__ref { color: var(--ink); }
.wall__p {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  line-height: 1.4;
  letter-spacing: -.005em;
  color: color-mix(in oklab, var(--ink) 95%, transparent);
}
.wall__p strong {
  font-style: italic; font-weight: 500;
  color: var(--ink);
  background: linear-gradient(180deg, transparent 62%, color-mix(in oklab, var(--green-hi) 35%, transparent) 62%);
  padding: 0 .12em;
}
.wall__who {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.wall__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: color-mix(in oklab, var(--blue) 35%, var(--navy-soft));
  border: 1px solid var(--border-hi);
}
.wall__avatar img { width: 100%; height: 100%; object-fit: cover; }
.wall__whoname {
  display: grid; gap: 2px;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--ink);
  line-height: 1.25;
}
.wall__whoname span {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-dim);
}

/* ─── Wall controls (filter pills + live count) ──────────── */
.wall-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.wall-filters {
  display: inline-flex;
  gap: .25rem;
  padding: .3rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in oklab, var(--navy-up) 70%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  max-width: 100%;
}
.wall-filters__pill {
  --dot: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .95rem;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--dur-1) var(--ease),
    background-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}
.wall-filters__pill:hover { color: var(--ink); }
.wall-filters__pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--dot) 70%, transparent);
}
.wall-filters__pill.is-active {
  color: var(--ink);
  background: color-mix(in oklab, var(--navy-soft) 92%, var(--ink) 8%);
  box-shadow: inset 0 0 0 1px var(--border-hi);
}
.wall-filters__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 10px color-mix(in oklab, var(--dot) 65%, transparent);
  flex-shrink: 0;
}
.wall-filters__pill.is-active .wall-filters__dot {
  box-shadow: 0 0 14px color-mix(in oklab, var(--dot) 80%, transparent), 0 0 0 3px color-mix(in oklab, var(--dot) 18%, transparent);
}
.wall-filters__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6em;
  padding: 0 .45em;
  border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 8%, transparent);
  font-size: calc(var(--fs-xs) * .9);
  color: var(--ink);
  letter-spacing: 0;
}
.wall-status {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.wall-status__val {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--ink);
  letter-spacing: -.01em;
  text-transform: none;
  min-width: 1.2em;
  text-align: center;
}
@media (max-width: 600px) {
  .wall-controls { justify-content: flex-start; }
  .wall-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    width: 100%;
    max-width: none;
  }
  .wall-filters::-webkit-scrollbar { display: none; }
  .wall-filters__pill { flex-shrink: 0; scroll-snap-align: start; }
}

/* ─── Wall (expanded): staggered entrance ────────────────── */
.wall--expanded .wall__quote {
  grid-column: span 6;
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity .7s var(--ease-out),
    translate .7s var(--ease-out),
    border-color var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease),
    background-color var(--dur-1) var(--ease);
}
.wall--expanded.is-in .wall__quote { opacity: 1; translate: 0 0; }
.wall--expanded.is-in .wall__quote:nth-child(1) { transition-delay: 0ms, 0ms, 0s, 0s, 0s; }
.wall--expanded.is-in .wall__quote:nth-child(2) { transition-delay: 70ms, 70ms, 0s, 0s, 0s; }
.wall--expanded.is-in .wall__quote:nth-child(3) { transition-delay: 140ms, 140ms, 0s, 0s, 0s; }
.wall--expanded.is-in .wall__quote:nth-child(4) { transition-delay: 210ms, 210ms, 0s, 0s, 0s; }
.wall--expanded.is-in .wall__quote:nth-child(5) { transition-delay: 280ms, 280ms, 0s, 0s, 0s; }
.wall--expanded.is-in .wall__quote:nth-child(6) { transition-delay: 350ms, 350ms, 0s, 0s, 0s; }
.wall--expanded.is-in .wall__quote:nth-child(7) { transition-delay: 420ms, 420ms, 0s, 0s, 0s; }
.wall--expanded.is-in .wall__quote:nth-child(8) { transition-delay: 490ms, 490ms, 0s, 0s, 0s; }

/* ─── Wall tile: hover lift + pointer-reactive accent bloom ─ */
.wall--expanded .wall__quote {
  isolation: isolate;
  overflow: hidden;
  --accent: var(--ink);
}
.wall--expanded .wall__quote::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, -10%),
    color-mix(in oklab, var(--accent) 26%, transparent),
    transparent 58%
  );
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
  z-index: -1;
}
.wall--expanded .wall__quote:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border-hi));
  background: color-mix(in oklab, var(--navy-up) 72%, transparent);
}
.wall--expanded .wall__quote:hover::after { opacity: 1; }

/* ─── Wall head: brand pill ──────────────────────────────── */
.wall__brand {
  --brand: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .28rem .65rem;
  border: 1px solid color-mix(in oklab, var(--brand) 30%, var(--border));
  border-radius: 999px;
  color: color-mix(in oklab, var(--brand) 60%, var(--ink));
  background: color-mix(in oklab, var(--brand) 8%, transparent);
  font-family: var(--f-mono);
  font-size: calc(var(--fs-xs) * .95);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wall__brand[data-brand-label="ccg"]        { --brand: var(--violet); }
.wall__brand[data-brand-label="warrantyai"] { --brand: var(--green-hi); }
.wall__brand[data-brand-label="timeai"]     { --brand: var(--cyan); }
.wall__brand-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 8px color-mix(in oklab, var(--brand) 70%, transparent);
}

/* ─── Feature tile: span full width, oversize mark, stat ─── */
.wall__quote--feature {
  grid-column: span 12 !important;
  padding: clamp(1.75rem, 1.15rem + 2vw, 3.25rem);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 55%),
    color-mix(in oklab, var(--navy-up) 62%, transparent);
  gap: var(--sp-5);
}
.wall__quote--feature .wall__p {
  font-size: clamp(1.35rem, 1rem + 1.15vw, 2rem);
  line-height: 1.32;
  letter-spacing: -.015em;
  max-width: 42ch;
  position: relative;
  z-index: 1;
}
.wall__mark {
  position: absolute;
  top: -.15em;
  right: .25em;
  font-family: var(--f-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(7rem, 3rem + 13vw, 13rem);
  line-height: 1;
  color: color-mix(in oklab, var(--accent) 18%, transparent);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.wall__stat {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  position: relative;
  z-index: 1;
}
.wall__stat em {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: color-mix(in oklab, var(--accent) 70%, var(--ink));
  text-transform: none;
}

/* ─── Closer tile: span full width, centered quiet block ─── */
.wall__quote--closer {
  grid-column: span 12 !important;
  justify-items: center;
  text-align: center;
  padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
}
.wall__quote--closer .wall__head { width: min(100%, 52ch); }
.wall__quote--closer .wall__p {
  font-size: clamp(1.15rem, 1rem + .65vw, 1.5rem);
  max-width: 48ch;
  margin-inline: auto;
}
.wall__quote--closer .wall__who {
  border-top: 0;
  padding-top: var(--sp-2);
  justify-content: center;
}

/* ─── Filter hidden state (View Transitions reorders) ────── */
.wall__quote[data-hidden="true"] { display: none; }

/* When filtered to a single brand, reflow as responsive auto-fit
   so a 3-or-5-tile result doesn't leave an orphan half-tile. */
.wall--expanded[data-filter]:not([data-filter="all"]) {
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}
.wall--expanded[data-filter]:not([data-filter="all"]) .wall__quote,
.wall--expanded[data-filter]:not([data-filter="all"]) .wall__quote--feature,
.wall--expanded[data-filter]:not([data-filter="all"]) .wall__quote--closer {
  grid-column: auto !important;
}
.wall--expanded[data-filter]:not([data-filter="all"]) .wall__quote--closer {
  text-align: left;
  justify-items: stretch;
}
.wall--expanded[data-filter]:not([data-filter="all"]) .wall__quote--closer .wall__p {
  margin-inline: 0;
  max-width: none;
}
.wall--expanded[data-filter]:not([data-filter="all"]) .wall__quote--closer .wall__who {
  justify-content: flex-start;
}

/* Neutralize feature-tile ornaments inside a narrow filtered column */
.wall--expanded[data-filter]:not([data-filter="all"]) .wall__quote--feature {
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  background: color-mix(in oklab, var(--navy-up) 55%, transparent);
  gap: var(--sp-4);
}
.wall--expanded[data-filter]:not([data-filter="all"]) .wall__quote--feature .wall__mark { display: none; }
.wall--expanded[data-filter]:not([data-filter="all"]) .wall__quote--feature .wall__stat {
  font-size: var(--fs-xs);
  letter-spacing: .14em;
}
.wall--expanded[data-filter]:not([data-filter="all"]) .wall__quote--feature .wall__stat em {
  font-size: var(--fs-lg);
}
.wall--expanded[data-filter]:not([data-filter="all"]) .wall__quote--feature .wall__p {
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  max-width: none;
  line-height: 1.4;
  letter-spacing: -.005em;
}

/* ─── Empty state when no matches ────────────────────────── */
.wall-empty {
  margin: var(--sp-6) auto 0;
  padding: var(--sp-6);
  max-width: 48ch;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 18px;
  color: var(--ink-dim);
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  letter-spacing: .06em;
}
.wall-empty[hidden] { display: none; }

/* ─── Automotive: rev-sweep CTA hover ────────────────────── */
@property --sweep-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.btn--primary {
  --sweep-angle: 0deg;
}
.btn--primary::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--sweep-angle),
    transparent 0deg,
    var(--green-hi) 40deg,
    var(--cyan) 80deg,
    transparent 120deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events: none;
  z-index: 2;
}
.btn--primary:hover::after {
  opacity: 1;
  animation: rev-sweep 1.2s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes rev-sweep {
  from { --sweep-angle: -60deg; }
  to   { --sweep-angle: 300deg; }
}
@media (prefers-reduced-motion: reduce) {
  .btn--primary::after { display: none; }
}

/* ─── Automotive: instrument bezel treatment ─────────────── */
.cluster {
  box-shadow:
    0 1px 0 0 color-mix(in oklab, var(--ink) 6%, transparent) inset,
    inset 0 0 0 1px color-mix(in oklab, var(--ink) 4%, transparent),
    inset 0 1px 2px color-mix(in oklab, #ffffff 4%, transparent),
    0 24px 48px -28px color-mix(in oklab, var(--blue) 30%, transparent);
}
.cluster::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, #ffffff 12%, transparent) 0%,
    color-mix(in oklab, #ffffff 4%, transparent) 30%,
    color-mix(in oklab, #ffffff 2%, transparent) 70%,
    color-mix(in oklab, #ffffff 6%, transparent) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.slab__visual {
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, #ffffff 8%, transparent),
    inset 0 -1px 0 color-mix(in oklab, #ffffff 3%, transparent),
    inset 1px 0 0 color-mix(in oklab, #ffffff 4%, transparent),
    inset -1px 0 0 color-mix(in oklab, #ffffff 4%, transparent),
    0 40px 80px -40px color-mix(in oklab, var(--accent) 30%, transparent);
}
.slab__visual::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    160deg,
    color-mix(in oklab, #ffffff 10%, transparent) 0%,
    color-mix(in oklab, var(--accent) 8%, transparent) 35%,
    transparent 60%,
    color-mix(in oklab, #ffffff 5%, transparent) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* ─── Automotive: shift-light scroll indicator ───────────── */
.shiftlights {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 var(--sp-3);
  margin-left: auto;
}
.shiftlights__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--ink) 12%, transparent);
  transition: background .4s var(--ease), box-shadow .4s var(--ease), transform .3s var(--ease);
  will-change: transform;
}
.shiftlights__dot.is-lit {
  background: var(--green-hi);
  box-shadow: 0 0 6px var(--green-hi), 0 0 12px color-mix(in oklab, var(--green-hi) 50%, transparent);
  transform: scale(1.15);
}
.shiftlights__dot.is-lit:nth-child(6) {
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan), 0 0 12px color-mix(in oklab, var(--cyan) 50%, transparent);
}
.shiftlights__dot.is-lit:nth-child(7) {
  background: #ff5252;
  box-shadow: 0 0 8px #ff5252, 0 0 16px color-mix(in oklab, #ff5252 50%, transparent);
  animation: redline-flash .5s ease-in-out infinite;
}
@keyframes redline-flash {
  0%, 100% { opacity: .8; }
  50%      { opacity: 1; transform: scale(1.3); }
}
@media (max-width: 860px) {
  .shiftlights { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .shiftlights__dot { transition: none; }
  .shiftlights__dot.is-lit:nth-child(7) { animation: none; opacity: 1; }
}

/* ─── Automotive: odometer digit roll ────────────────────── */
.odo {
  display: inline-flex;
  align-items: flex-start;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: baseline;
}
.odo__col {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: transform 1.4s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.odo__col span {
  display: block;
  text-align: center;
  height: 1em;
  line-height: 1;
  flex-shrink: 0;
}
.odo__static {
  display: inline;
  line-height: 1;
  flex-shrink: 0;
}
.odo sup {
  font-size: .48em;
  align-self: flex-start;
  margin-top: .15em;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .odo__col { transition: none; }
}

/* ─── View Transitions: cinematic filter reorder ─────────── */
::view-transition-old(.voice),
::view-transition-new(.voice) {
  animation-duration: .45s;
  animation-timing-function: var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .wall--expanded .wall__quote { opacity: 1; translate: 0; transition: none; }
  .wall--expanded .wall__quote:hover { transform: none; }
  .wall--expanded .wall__quote::after { display: none; }
}

@media (max-width: 960px) {
  .wall--expanded .wall__quote { grid-column: span 12; }
}

/* ─── TRUSTED PARTNERS page ─────────────────────────────── */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, .5rem + 1vw, 1.5rem);
  list-style: none;
  padding: 0;
}
.partner-grid > li {
  display: flex;
  flex-direction: column;
  list-style: none;
}
.partner-grid > li .partner-card {
  flex: none;
}
@media (max-width: 860px) { .partner-grid { grid-template-columns: repeat(2, 1fr); } }
.partner-card {
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in oklab, var(--navy-up) 70%, transparent);
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.partner-card:hover { transform: translateY(-2px); border-color: var(--border-hi); }
.partner-card img {
  max-width: 75%;
  max-height: 70%;
  width: auto; height: auto;
  filter: brightness(0) invert(1);
  opacity: .8;
  transition: opacity var(--dur-1) var(--ease);
}
.partner-card:hover img { opacity: 1; }
.partner-card__name {
  margin-top: var(--sp-3);
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
}

.sdl-invite {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-6);
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(60% 80% at 100% 0%, color-mix(in oklab, var(--blue) 22%, transparent), transparent 70%),
    color-mix(in oklab, var(--navy-up) 55%, transparent);
  margin-top: var(--sp-8);
}
@media (max-width: 760px) { .sdl-invite { grid-template-columns: 1fr; } }
.sdl-invite__tag {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue-soft);
}
.sdl-invite__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.4rem, 1rem + 1.3vw, 2rem);
  line-height: 1.1; letter-spacing: -.01em;
  margin-top: var(--sp-3);
}
.sdl-invite__body {
  margin-top: var(--sp-3);
  color: var(--ink-dim);
  font-size: var(--fs-md);
  max-width: 60ch;
}

/* ─── CONTACT page ─────────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-aside {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(50% 80% at 0% 0%, color-mix(in oklab, var(--violet) 22%, transparent), transparent 60%),
    color-mix(in oklab, var(--navy-up) 55%, transparent);
}
.contact-aside__row {
  display: grid; gap: var(--sp-2);
}
.contact-aside__label {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.contact-aside__val {
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ink);
}
.contact-aside__val a { color: inherit; }
.contact-aside__val a:hover { text-decoration: underline; }
.contact-aside__hours {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-soft);
}

.contactform {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: 22px;
  background: color-mix(in oklab, var(--navy-up) 70%, transparent);
}
.contactform__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 600px) { .contactform__row { grid-template-columns: 1fr; } }
.field {
  display: grid; gap: var(--sp-2);
}
.field__label {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.field input, .field textarea, .field select {
  font-family: var(--f-body);
  font-size: var(--fs-md);
  color: var(--ink);
  background: color-mix(in oklab, var(--navy) 55%, transparent);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .85em 1em;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--blue-soft);
  background: color-mix(in oklab, var(--navy) 30%, transparent);
}
.field textarea { min-height: 150px; resize: vertical; }
.field--check {
  flex-direction: row; display: flex; gap: var(--sp-3); align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--ink-dim);
}
.field--check input[type="checkbox"] {
  accent-color: var(--green-hi);
  margin-top: 3px;
  flex-shrink: 0;
}
.contactform__submit { justify-self: start; margin-top: var(--sp-3); }

/* ─── CAREERS / Join Our Team ──────────────────────────── */
.perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, .5rem + 1vw, 1.5rem);
}
@media (max-width: 860px) { .perks { grid-template-columns: 1fr; } }
.perk {
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in oklab, var(--navy-up) 55%, transparent);
}
.perk__num {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .16em; color: var(--blue-soft);
}
.perk__title {
  margin-top: var(--sp-3);
  font-family: var(--f-display); font-weight: 500;
  font-size: var(--fs-xl); line-height: 1.1;
}
.perk__body {
  margin-top: var(--sp-3);
  color: var(--ink-dim);
  font-size: var(--fs-md);
  line-height: 1.6;
}

.jobs {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
.job {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in oklab, var(--navy-up) 55%, transparent);
  color: inherit;
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.job:hover { border-color: var(--border-hi); transform: translateX(2px); }
@media (max-width: 680px) {
  .job { grid-template-columns: 1fr; }
  .job__arrow { justify-self: end; }
}
.job__num {
  font-family: var(--f-mono); font-size: var(--fs-sm);
  letter-spacing: .1em; color: var(--blue-soft);
}
.job__body { display: grid; gap: 2px; }
.job__title {
  font-family: var(--f-display); font-weight: 500;
  font-size: var(--fs-lg);
}
.job__meta {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.job__arrow {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--ink);
  transition: background var(--dur-1) var(--ease);
}
.job:hover .job__arrow { background: color-mix(in oklab, var(--ink) 8%, transparent); }

/* ─── PROSE (privacy, blog posts) ────────────────────── */
.prose {
  max-width: 72ch;
  margin: 0 auto;
  color: var(--ink);
  font-size: var(--fs-md);
  line-height: 1.75;
}
.prose h2 {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.2rem);
  line-height: 1.15; letter-spacing: -.01em;
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
  font-family: var(--f-display); font-weight: 500;
  font-size: var(--fs-lg);
  margin-top: var(--sp-6); margin-bottom: var(--sp-3);
}
.prose p, .prose ul, .prose ol {
  margin-bottom: var(--sp-4);
  color: var(--ink-dim);
}
.prose p strong, .prose li strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol {
  padding-left: 1.5em;
  list-style: disc;
}
.prose ol { list-style: decimal; }
.prose a {
  color: var(--blue-soft);
  border-bottom: 1px solid color-mix(in oklab, var(--blue-soft) 50%, transparent);
}
.prose a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ─── SOLUTION DETAIL page feature rows ──────────────── */
.feature-rows {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  counter-reset: feat;
}
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
  counter-increment: feat;
}
@media (max-width: 860px) { .feature-row { grid-template-columns: 1fr; } }
.feature-row:nth-child(even) .feature-row__body { order: 2; }
.feature-row:nth-child(even) .feature-row__visual { order: 1; }
@media (max-width: 860px) {
  .feature-row:nth-child(even) .feature-row__body,
  .feature-row:nth-child(even) .feature-row__visual { order: 0; }
}
.feature-row__num::before {
  content: counter(feat, decimal-leading-zero);
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .16em; color: var(--accent, var(--blue-soft));
}
.feature-row__kicker {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent, var(--blue-soft));
  margin-bottom: var(--sp-3);
}
.feature-row__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.6rem, 1rem + 1.8vw, 2.4rem);
  line-height: 1.1; letter-spacing: -.01em;
}
.feature-row__body p {
  margin-top: var(--sp-4);
  color: var(--ink-dim);
  font-size: var(--fs-md);
  line-height: 1.65;
}
.feature-row__visual {
  position: relative;
  aspect-ratio: 5 / 4;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 20% 20%, color-mix(in oklab, var(--accent, var(--blue)) 22%, transparent), transparent 70%),
    color-mix(in oklab, var(--navy-up) 70%, transparent);
  display: grid;
  place-items: center;
  padding: var(--sp-6);
}
.feature-row__visual svg { max-width: 80%; max-height: 80%; }
.feature-row__stat {
  position: absolute;
  bottom: var(--sp-5); left: var(--sp-5);
  display: grid; gap: 4px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 12px;
  background: color-mix(in oklab, var(--navy) 70%, transparent);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
  font-family: var(--f-mono);
}
.feature-row__stat-label {
  font-size: var(--fs-xs); letter-spacing: .14em;
  color: var(--ink-dim);
}
.feature-row__stat-val {
  font-size: var(--fs-lg);
  color: var(--ink);
}

/* Solution page hero accent override — each tool's color, solid for legibility */
.subhero[data-accent="blue"]   .subhero__title em { color: var(--blue-soft); }
.subhero[data-accent="green"]  .subhero__title em { color: var(--green-hi); }
.subhero[data-accent="violet"] .subhero__title em { color: #b9a8ff; }
.subhero[data-accent="cyan"]   .subhero__title em { color: var(--cyan); }

/* Page-level CTA plate (reused across subpages) */
.page-cta {
  position: relative;
  margin: 0 auto;
  max-width: 1120px;
  padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  border-radius: 28px;
  border: 1px solid var(--border);
  background:
    radial-gradient(60% 100% at 100% 0%, color-mix(in oklab, var(--violet) 22%, transparent), transparent 60%),
    radial-gradient(50% 100% at 0% 100%, color-mix(in oklab, var(--green) 18%, transparent), transparent 60%),
    color-mix(in oklab, var(--navy-up) 60%, transparent);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--sp-5);
}
.page-cta__tag {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue-soft);
}
.page-cta__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  line-height: 1.05; letter-spacing: -.015em;
  max-width: 20ch;
}
.page-cta__title em {
  font-style: italic;
  color: var(--blue-soft);
}
.page-cta__body {
  max-width: 52ch;
  color: var(--ink-dim);
  font-size: var(--fs-md);
}
.page-cta__actions {
  display: flex; gap: var(--sp-4); flex-wrap: wrap; justify-content: center;
}

/* Stat strip used across subpages */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in oklab, var(--navy-up) 55%, transparent);
  margin-top: var(--sp-7);
}
@media (max-width: 720px) { .stat-strip { grid-template-columns: 1fr; } }
.stat-strip__cell {
  display: grid;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  border-left: 1px solid var(--border);
}
.stat-strip__cell:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 720px) {
  .stat-strip__cell { border-left: 0; padding-left: 0; padding-top: var(--sp-4); border-top: 1px solid var(--border); }
  .stat-strip__cell:first-child { padding-top: 0; border-top: 0; }
}
.stat-strip__label {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.stat-strip__val {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 1rem + 2.5vw, 3rem);
  letter-spacing: -.01em;
  color: var(--ink);
}
.stat-strip__val sup { font-size: .5em; font-weight: 400; color: var(--ink-dim); margin-left: .2em; }

/* ───────────────────────────────────────────────────────────────
   Cross-document View Transitions — "Chromatic Handoff"
   Same-origin MPA opt-in. Persistent chrome stays anchored while
   the content column performs directional slides keyed to the
   navigation type (set in vt.js via pageswap/pagereveal).
   ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   Mobile polish — tap targets, iOS input zoom, content wrap
   Scoped to ≤640px so desktop density is preserved.
   ═══════════════════════════════════════════════════════════════ */

/* Contact grid: allow email/phone text to wrap so the 1fr column
   doesn't inflate to min-content width. */
.contact-layout > * { min-width: 0; }
.contact-aside__val,
.contact-aside__val a { overflow-wrap: break-word; word-break: normal; }
/* Email is a single long token; scale it down on narrow screens so it
   fits on one line, and let it break only at the @ (via <wbr>) if not. */
@media (max-width: 640px) {
  .contact-aside__val--email { font-size: var(--fs-lg); line-height: 1.2; }
}

@media (pointer: coarse), (max-width: 640px) {
  /* iOS Safari auto-zooms when focusing inputs below 16px — force at least
     16px on all form controls at mobile widths. */
  input, textarea, select,
  .field input, .field textarea, .field select,
  .footer__input input,
  .contactform__input, .contactform__textarea { font-size: 16px; }

  /* Homepage sections use an asymmetric left pad (rail-x + sp-6) to clear
     the decorative rail. The rail is hidden below 860px — drop the extra
     inset so content gets symmetric gutters and breathes. */
  .hero, .trust, .about, .stack, .voices, .cta {
    padding-left: var(--gutter);
  }

  /* Mobile menu children keep their intrinsic height so the flex column
     never compresses the list or the grid. */
  .mobile-menu__inner > *,
  .mobile-menu__grid,
  .mobile-menu__card,
  .mobile-menu__link,
  .mobile-menu__cta { flex-shrink: 0; }

  /* Newsletter input pill — grow to a 44px minimum tap area. */
  .footer__input { padding: .4rem .4rem .4rem 1.1rem; }
  .footer__input input { font-size: 16px; padding: .75rem 0; min-height: 44px; }
  .footer__input button { min-height: 44px; padding: .75rem 1.1rem; }

  /* Footer link columns: each anchor is ≥44×44 tap target. */
  .footer__cols a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: .55rem .7rem; }
  .footer__cols ul { gap: .25rem; }

  /* Social row: larger tap area without changing icon size. */
  .footer__social a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* Back-to-top pill: ensure 44px tall. */
  .footer__top-btn { min-height: 44px; padding: .65rem 1rem .65rem 1.1rem; }

  /* Primary inline links with underline accents — ensure 44px tappable. */
  .slab__link,
  .cta__secondary,
  .hero__scrollcue { min-height: 44px; display: inline-flex; align-items: center; }

  /* Nav brand tap target. */
  .nav__brand { min-height: 44px; display: inline-flex; align-items: center; }

  /* Mobile menu solution cards: full-row tap area with generous padding. */
  .mobile-menu__card { min-height: 64px; }

  /* Contact consent: whole row is the label, enlarge tap area + checkbox. */
  .field--check { min-height: 44px; padding: .4rem 0; align-items: center; }
  .field--check input[type="checkbox"] { width: 22px; height: 22px; flex-shrink: 0; margin-top: 0; }

  /* Contact aside: phone/email links ≥44px tall. */
  .contact-aside__val a { min-height: 44px; display: inline-flex; align-items: center; }

  /* CTA buttons: uniform 44px minimum. */
  .btn { min-height: 44px; }

  /* Testimonials filter pills: 44px tall. */
  .wall-filters__pill { min-height: 44px; padding: .7rem 1.05rem; }
}

@view-transition { navigation: auto; }

/* Anchor the persistent chrome. Names isolate these elements from
   the default ::view-transition-group(root) snapshot so they don't
   participate in the slide. */
.masthead     { view-transition-name: site-header; }
.rail         { view-transition-name: site-rail; }
.atmosphere   { view-transition-name: site-atmosphere; }

/* Shared-element morphs — home .slab rail ↔ solution subhero eyebrow.
   Each solution pair is named uniquely; the browser tweens position,
   size, and typography between snapshots. */
#slab-timeai      .slab__rail, body[data-page="timeai"]     .subhero__eyebrow { view-transition-name: sol-key-timeai; }
#slab-warrantyai  .slab__rail, body[data-page="warrantyai"] .subhero__eyebrow { view-transition-name: sol-key-warrantyai; }
#slab-ccg         .slab__rail, body[data-page="ccg"]        .subhero__eyebrow { view-transition-name: sol-key-ccg; }
#slab-aivault     .slab__rail, body[data-page="aivault"]    .subhero__eyebrow { view-transition-name: sol-key-aivault; }

/* Tune the morph: browser default group anim scales/translates from
   old → new rect. A slightly longer duration lets the font-swap read. */
::view-transition-group(sol-key-timeai),
::view-transition-group(sol-key-warrantyai),
::view-transition-group(sol-key-ccg),
::view-transition-group(sol-key-aivault) {
  animation-duration: .68s;
  animation-timing-function: cubic-bezier(.22,1,.36,1);
}
::view-transition-old(sol-key-timeai),     ::view-transition-new(sol-key-timeai),
::view-transition-old(sol-key-warrantyai), ::view-transition-new(sol-key-warrantyai),
::view-transition-old(sol-key-ccg),        ::view-transition-new(sol-key-ccg),
::view-transition-old(sol-key-aivault),    ::view-transition-new(sol-key-aivault) {
  animation-duration: .68s;
  animation-timing-function: cubic-bezier(.22,1,.36,1);
}

/* Signal-dot continuity — the pulse on the first ticker cluster threads
   a single bright point through every navigation. The dot's color is
   page-local (default green, recolored per solution via --accent-hue)
   so the morph carries a hue-shift for free. */
.ticker__cluster:first-child .ticker__item--sig .ticker__dot { view-transition-name: signal-dot; }
::view-transition-group(signal-dot) { animation-duration: .52s; animation-timing-function: cubic-bezier(.22,1,.36,1); }

/* Root timing — crisp, not theatrical. */
::view-transition-group(root) { animation-duration: .52s; animation-timing-function: cubic-bezier(.22,1,.36,1); }
::view-transition-old(root),
::view-transition-new(root)   { animation-duration: .52s; animation-timing-function: cubic-bezier(.22,1,.36,1); mix-blend-mode: normal; }

/* Persistent header + rail: backdrop-filter snapshots flicker — suppress
   the old snapshot and instantly reveal the new. The live element keeps
   rendering underneath so nothing pops. */
::view-transition-group(site-header),
::view-transition-group(site-rail)   { animation-duration: .52s; }
::view-transition-old(site-header),
::view-transition-old(site-rail)     { animation: none; display: none; }
::view-transition-new(site-header),
::view-transition-new(site-rail)     { animation: none; }

/* Hero line slide: skip the starting-style transition while a VT is running,
   otherwise the snapshot freezes the line mid-slide and the live DOM keeps
   animating underneath — the handoff reads as a double animation. With
   duration 0s the element snaps to its resting position before the snapshot
   is taken, and the VT crossfade alone handles the entrance on back-nav. */
html:active-view-transition .hero__line-inner { transition-duration: 0s; }

/* Atmosphere — the conic mesh riding underneath. Unlike the header,
   we *do* want this to animate: a slight counter-rotation + hue-shift
   reads as "the room turned a different color" as pages swap. */
::view-transition-group(site-atmosphere) { animation-duration: .72s; animation-timing-function: cubic-bezier(.22,1,.36,1); }
::view-transition-old(site-atmosphere)   { animation: atm-out .56s cubic-bezier(.55,.05,.3,1) both; }
::view-transition-new(site-atmosphere)   { animation: atm-in  .72s cubic-bezier(.22,1,.36,1) both; }

@keyframes atm-out {
  to { opacity: 0; transform: scale(1.06) rotate(-1.5deg); filter: hue-rotate(-14deg) saturate(.85); }
}
@keyframes atm-in {
  from { opacity: 0; transform: scale(.96) rotate(1.5deg); filter: hue-rotate(14deg) saturate(1.15); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ── Directional types (set by vt.js) ───────────────────────── */

/* Forward (home → solution / home → detail pages): content dives
   in from the right with a subtle chromatic glow. */
html:active-view-transition-type(nav-forward)::view-transition-old(root) {
  animation: chm-out-left .48s cubic-bezier(.55,.05,.3,1) both;
}
html:active-view-transition-type(nav-forward)::view-transition-new(root) {
  animation: chm-in-right .58s cubic-bezier(.22,1,.36,1) both;
}

/* Back (solution → home / detail → index): mirror of forward. */
html:active-view-transition-type(nav-back)::view-transition-old(root) {
  animation: chm-out-right .48s cubic-bezier(.55,.05,.3,1) both;
}
html:active-view-transition-type(nav-back)::view-transition-new(root) {
  animation: chm-in-left .58s cubic-bezier(.22,1,.36,1) both;
}

/* Lateral (solution ↔ solution): chromatic crossfade with a short
   vertical drift — reads "same altitude, different hue." */
html:active-view-transition-type(nav-lateral)::view-transition-old(root) {
  animation: chm-lateral-out .5s cubic-bezier(.55,.05,.3,1) both;
}
html:active-view-transition-type(nav-lateral)::view-transition-new(root) {
  animation: chm-lateral-in .6s cubic-bezier(.22,1,.36,1) both;
}

/* Peer (about/contact/blog/etc): a quiet lift — no direction baked
   in, just clarity. */
html:active-view-transition-type(nav-peer)::view-transition-old(root) {
  animation: chm-peer-out .42s cubic-bezier(.55,.05,.3,1) both;
}
html:active-view-transition-type(nav-peer)::view-transition-new(root) {
  animation: chm-peer-in .55s cubic-bezier(.22,1,.36,1) both;
}

@keyframes chm-out-left {
  to { opacity: 0; transform: translate3d(-6vw, 0, 0) scale(.985); filter: blur(2px); }
}
@keyframes chm-in-right {
  from { opacity: 0; transform: translate3d(7vw, 0, 0) scale(.992); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes chm-out-right {
  to { opacity: 0; transform: translate3d(6vw, 0, 0) scale(.985); filter: blur(2px); }
}
@keyframes chm-in-left {
  from { opacity: 0; transform: translate3d(-7vw, 0, 0) scale(.992); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes chm-lateral-out {
  to { opacity: 0; transform: translate3d(0, -1.2vh, 0) scale(.99); filter: blur(3px) saturate(.6); }
}
@keyframes chm-lateral-in {
  from { opacity: 0; transform: translate3d(0, 1.6vh, 0) scale(.992); filter: blur(8px) saturate(1.4); }
  55%  { opacity: 1; filter: blur(0) saturate(1); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes chm-peer-out {
  to { opacity: 0; transform: translate3d(0, -.8vh, 0); filter: blur(1.5px); }
}
@keyframes chm-peer-in {
  from { opacity: 0; transform: translate3d(0, 1.2vh, 0); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Brand-accent tint: the incoming page's accent bleeds through the
   slide via a fixed pseudo-layer on <html>, painted from --accent-hue
   which vt.js sets on :root just before pagereveal. */
html::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background:
    radial-gradient(60vw 55vh at 85% -10%, color-mix(in oklab, var(--accent-hue, transparent) 38%, transparent), transparent 65%),
    radial-gradient(70vw 65vh at 10% 110%, color-mix(in oklab, var(--accent-hue, transparent) 26%, transparent), transparent 70%);
  mix-blend-mode: screen;
  view-transition-name: site-tint;
}
html:active-view-transition ::view-transition-group(site-tint) { animation-duration: .6s; }
html:active-view-transition ::view-transition-old(site-tint) { animation: chm-tint-out .45s ease-out both; }
html:active-view-transition ::view-transition-new(site-tint) { animation: chm-tint-in .62s cubic-bezier(.22,1,.36,1) both; }
@keyframes chm-tint-in  { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes chm-tint-out { 0% { opacity: 0; } 50% { opacity: .6; } 100% { opacity: 0; } }

/* Reduced motion: drop the choreography — browser default cross-fade
   is still acceptable and ships with the platform. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .01ms; }
  html:active-view-transition-type(nav-forward)::view-transition-old(root),
  html:active-view-transition-type(nav-forward)::view-transition-new(root),
  html:active-view-transition-type(nav-back)::view-transition-old(root),
  html:active-view-transition-type(nav-back)::view-transition-new(root),
  html:active-view-transition-type(nav-lateral)::view-transition-old(root),
  html:active-view-transition-type(nav-lateral)::view-transition-new(root),
  html:active-view-transition-type(nav-peer)::view-transition-old(root),
  html:active-view-transition-type(nav-peer)::view-transition-new(root) { animation: none; }
  ::view-transition-old(site-tint),
  ::view-transition-new(site-tint) { animation: none; }
  ::view-transition-old(site-atmosphere),
  ::view-transition-new(site-atmosphere) { animation: none; }
  ::view-transition-group(sol-key-timeai),
  ::view-transition-group(sol-key-warrantyai),
  ::view-transition-group(sol-key-ccg),
  ::view-transition-group(sol-key-aivault),
  ::view-transition-group(signal-dot) { animation-duration: .01ms; }
}