/* ============================================================================
   Marque — shared stylesheet
   ----------------------------------------------------------------------------
   Single source of truth for every page. Paths are relative to assets/css/.

   VISUAL DIRECTION: Concept B — "Garage HUD".
   Ported from Figma 2026-08-14 (GDS, page "Marque · Website — Concept (HUD)",
   Home frame 529:5317) via the Figma Console Desktop Bridge. Token values,
   type ramp, spacing rhythm and component geometry below are read off that
   file, not eyeballed. Component class names are unchanged from the v1
   "Standard" skin so all seven pages picked up the new skin at once.

   Deviations from the Figma are deliberate and tagged in the source with a
   bang-DEVIATION marker (written inside its own comment) —
   they exist to hold the guardrails in CLAUDE.md (no real OEM marks, honesty,
   accessibility floor). Do not "fix" them back toward the comp.
   ============================================================================ */

/* Display face = Maven Pro, in ExtraBold 800 and Black 900. Changed
   2026-09-04 with the Figma relayout: the comps set every headline in Maven
   Pro (verified against the file — no missing fonts, so it is the designer's
   choice, not a substitution), which collapses the old three-family stack to
   two. Archivo is gone; it had itself replaced the licensed Lambotype on
   2026-08-27.
   ⭐ 2026-09-04 (later the same day): Space Mono is gone too — the stack is now
   ONE family. Dumping every text node in the six LATEST VERSION frames over
   REST returned 736 Maven Pro against 6 Space Mono, and all six of those are
   the same 10px "STUDIO" in the nav lockup — which lives in the very nav block
   CLAUDE.md already records as un-updated on the Book-a-demo frame. A single
   leftover node in a stale block is not a type choice, so it went with the
   rest. --mono was renamed --label: it is a proportional face now, and a token
   called "mono" that is not monospace is a trap for whoever reads it next.
   Hero h1 is 800 at 90px, section h2 and the CTA are 900. */

:root{
  /* --- HUD surfaces (Figma: frame fills) --- */
  --black:#00050F;        /* page base                      */
  --ink:#010A1F;          /* alternating section / deep well */
  --panel:#081733;        /* bento tile, sector card         */
  --panel-2:#0A1B44;      /* second-tier tile                */
  --line:#16264D;         /* hairline rule                   */
  --line-2:#22407E;       /* stronger stroke, ghost border   */

  /* --- ink + accents --- */
  --white:#FFFFFF; --mist:#C6CFE6; --mist-dim:#7C8AB0;
  --periwinkle:#709CFF;   /* structural accent */
  --amber:#FFB400;        /* primary / CTA / emphasis */
  --red:#FF5252;          /* telemetry REC only — never a CTA */
  --pearl:#E7ECF7;

  /* the recurring livery-spectrum bar */
  --spectrum:linear-gradient(90deg,var(--periwinkle),var(--pearl),var(--amber),var(--red));

  --display:"Maven Pro","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Maven Pro","Inter",system-ui,sans-serif;
  /* Labels, eyebrows, telemetry, buttons and nav. Same family as everything
     else now — the role is carried by caps + tracking + size, not by a
     second face. Kept as its own token so that role stays greppable. */
  --label:"Maven Pro","Inter",system-ui,sans-serif;

  --gutter:24px;          /* min page inset  */
  --measure:1240px;       /* Figma content width inside the 1440 frame */
  --bracket:34px;         /* viewfinder corner arm length */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--black); color:var(--white); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--amber); color:var(--black); }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:4px; }
img,svg{ max-width:100%; }

h1,h2,h3{ font-family:var(--display); letter-spacing:-0.01em; line-height:1.02; }
h1,h2{ font-weight:900; }
h3{ font-weight:700; }

/* Figma: content is 1240 wide inside a 1440 frame (100px gutters).
   width:min() keeps that exact at ≥1288px and degrades to --gutter below. */
.wrap{ width:min(var(--measure), 100% - (var(--gutter) * 2)); margin-inline:auto; }

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--amber); color:var(--black); padding:12px 20px; border-radius:0 0 8px 0; font-family:var(--label); font-weight:700; }
.skip:focus{ left:0; }

/* ===== TELEMETRY LABELS ===================================================
   Maven Pro in caps with wide tracking is the HUD's connective tissue (it was
   Space Mono until 2026-09-04). `.eyebrow` is the
   bracketed section marker; `.tel` is a raw readout line.                   */
.eyebrow{ display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--label); font-weight:700; font-size:12px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--amber); }
/* the label carries its own brackets — on the flex container the pseudo-
   elements would become flex items and land outside the rule and sub-label. */
.eyebrow .lb::before{ content:"[\00a0"; }
.eyebrow .lb::after{ content:"\00a0]"; }
.eyebrow .rule{ width:60px; height:1px; background:var(--line-2); flex:none; }
.eyebrow .sub{ font-weight:400; font-size:11px; letter-spacing:0.06em; color:var(--mist-dim); }
/* right-aligned readout (method scrubber) */
.eyebrow.split{ justify-content:space-between; }
.eyebrow .grp{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.eyebrow .sub.peri{ color:var(--periwinkle); }

.tel{ font-family:var(--label); font-size:10px; letter-spacing:0.04em; text-transform:uppercase; color:var(--mist-dim); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tel .sep{ color:var(--line-2); }
.tel .rec{ display:inline-flex; align-items:center; gap:8px; color:var(--red); font-weight:700; letter-spacing:0.06em; }
.tel .rec::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--red); animation:recBlink 1.6s steps(1) infinite; }
@keyframes recBlink{ 50%{ opacity:.25; } }

/* the livery-spectrum bar — periwinkle → pearl → amber → red */
/* width must be flexible, not fixed: a fixed width here becomes the
   min-content of the hero's grid track and blows the column out on narrow
   viewports. Figma's 560 / 320 are the caps, not the widths. */
.spectrum{ height:4px; width:100%; max-width:560px; background:var(--spectrum); border-radius:2px; }
.spectrum.short{ max-width:320px; }

/* ===== VIEWFINDER BRACKETS ================================================
   Eight amber rects (34×2 and 2×34) pinned to the corners, exactly as the
   comp builds them — drawn as one element with eight background layers so
   the markup stays a single decorative <span>.                             */
.vf{ position:absolute; inset:88px 40px; pointer-events:none; z-index:3;   /* hero: Figma y=88 / x=40 */
  background:
    linear-gradient(var(--amber),var(--amber)) 0    0    / var(--bracket) 2px no-repeat,
    linear-gradient(var(--amber),var(--amber)) 0    0    / 2px var(--bracket) no-repeat,
    linear-gradient(var(--amber),var(--amber)) 100% 0    / var(--bracket) 2px no-repeat,
    linear-gradient(var(--amber),var(--amber)) 100% 0    / 2px var(--bracket) no-repeat,
    linear-gradient(var(--amber),var(--amber)) 0    100% / var(--bracket) 2px no-repeat,
    linear-gradient(var(--amber),var(--amber)) 0    100% / 2px var(--bracket) no-repeat,
    linear-gradient(var(--amber),var(--amber)) 100% 100% / var(--bracket) 2px no-repeat,
    linear-gradient(var(--amber),var(--amber)) 100% 100% / 2px var(--bracket) no-repeat; }
.vf.inset-48{ inset:48px; }
@media (max-width:720px){ .vf{ inset:14px 16px; --bracket:22px; } .vf.inset-48{ inset:16px; } }

/* ===== BUTTONS ============================================================ */
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--label); font-weight:700;
  font-size:13px; letter-spacing:0.04em; padding:15px 28px; border-radius:32px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease; }
.btn-primary{ background:var(--amber); color:var(--black); }
.btn-primary:hover{ transform:translateY(-2px); background:#ffc42e; }
.btn-ghost{ background:transparent; color:var(--white); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--periwinkle); transform:translateY(-2px); }
.btn-sm{ font-size:11px; padding:9px 16px; }
.btn-wire{ background:transparent; color:var(--amber); border-color:var(--amber); }
.btn-wire:hover{ background:var(--amber); color:var(--black); }

.gl-logo{ fill:var(--white); } .gl-logo.dim{ fill:var(--mist-dim); }

/* ===== NAV ================================================================ */
header.nav{ position:sticky; top:0; z-index:60; height:66px;
  background:rgba(0,5,15,0.90); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav-in{ width:min(1360px, 100% - 32px); margin-inline:auto; height:66px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
/* Brand lockup — Figma 928:3296/nav/nb: the GravitasLabs logo at 99x26 with
   the product name set small beneath it, right-aligned to the logo's edge.
   The logo carries the company; STUDIO is the product it powers. */
.brand{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.brand .gl-logo{ display:block; width:99px; height:26px; }
.brand .mk{ font-family:var(--label); font-size:10px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--mist-dim); line-height:1; }
.brand:hover .mk{ color:var(--mist); }
.brand .by{ font-family:var(--label); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--mist-dim); }
.nav-links{ display:flex; align-items:center; gap:22px; }
.nav-sys{ font-family:var(--label); font-size:10px; letter-spacing:0.06em; color:var(--periwinkle); white-space:nowrap; }
.nav-links a{ font-family:var(--label); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--mist); transition:color .15s; }
.nav-links a:hover{ color:var(--white); }
.nav-links a[aria-current="page"]{ color:var(--amber); }
.nav-links a.btn{ text-transform:uppercase; }
.nav-links a.btn[aria-current="page"]{ background:var(--amber); color:var(--black); border-color:var(--amber); }

.nav-toggle{ display:none; width:42px; height:38px; border:1px solid var(--line-2); border-radius:9px; background:transparent; cursor:pointer; position:relative; }
.nav-toggle span{ position:absolute; left:11px; right:11px; height:1.5px; background:var(--white); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle span:nth-child(1){ top:13px; } .nav-toggle span:nth-child(2){ top:18.5px; } .nav-toggle span:nth-child(3){ top:24px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

@media (max-width:1080px){
  .nav-toggle{ display:block; }
  .nav-links{ position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); border-bottom:1px solid var(--line); padding:8px 20px 20px;
    max-height:0; overflow:hidden; visibility:hidden; transition:max-height .25s ease, visibility .25s; }
  .nav-links.open{ max-height:560px; visibility:visible; }
  .nav-links a{ padding:14px 8px; border-bottom:1px solid var(--line); font-size:12px; }
  .nav-links .nav-sys{ padding:10px 8px 14px; border-bottom:1px solid var(--line); }
  .nav-links a.btn{ margin-top:16px; justify-content:center; border-bottom:none; }
}

/* ===== HERO (home) ========================================================
   Figma: 1440×880. Copy block on the left rail, showroom + floating product
   panels on the right, brackets at inset 40/22.                            */
.hero{ position:relative; min-height:min(880px, 92vh); display:flex; align-items:center; overflow:hidden; background:var(--black); }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:transparent; }
.hero-anim{ position:absolute; inset:0; overflow:hidden; background:radial-gradient(115% 90% at 72% 26%, #0d2350 0%, #04102c 46%, var(--black) 100%); }
.hero-floor{ position:absolute; left:-20%; right:-20%; bottom:-8%; height:62%;
  background-image:linear-gradient(rgba(112,156,255,0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(112,156,255,0.18) 1px, transparent 1px);
  background-size:46px 46px; transform:perspective(420px) rotateX(64deg); transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 78%); mask-image:linear-gradient(to top, #000 0%, transparent 78%);
  animation:floorScroll 3.4s linear infinite; opacity:.6; }
@keyframes floorScroll{ from{ background-position:0 0; } to{ background-position:0 46px; } }
.hero-glow{ position:absolute; top:-6%; right:2%; width:58vw; height:44vw; max-width:760px; max-height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(112,156,255,0.18), transparent 62%); animation:glowDrift 16s ease-in-out infinite alternate; }
@keyframes glowDrift{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-6%,5%) scale(1.1); } }
.streak{ position:absolute; height:2px; width:52%; border-radius:2px; filter:blur(1px); opacity:0; }
.streak.s1{ top:38%; background:linear-gradient(90deg, transparent, var(--periwinkle), transparent); animation:streak 7s linear infinite; }
.streak.s2{ top:56%; background:linear-gradient(90deg, transparent, var(--amber), transparent); animation:streak 9s linear .8s infinite; }
.streak.s3{ top:70%; background:linear-gradient(90deg, transparent, #7f9bff, transparent); animation:streak 6s linear 1.6s infinite; }
@keyframes streak{ 0%{ transform:translateX(-120%); opacity:0; } 12%{ opacity:.9; } 88%{ opacity:.9; } 100%{ transform:translateX(220%); opacity:0; } }
/* Figma's full-bleed hero plate (node 529:5331). Sits over .hero-anim, under
   the scrims. If the file is absent the layer is simply transparent and the
   CSS scene below shows through — every photo layer in this sheet degrades
   the same way, which is why the scenes are kept rather than deleted. */
.hero-photo{ position:absolute; inset:0; background:url("../img/hero-plate.jpg") center/cover no-repeat; }
/* three stacked scrims — matches the comp's 3 gradient rects over the plate */
.hero-vignette{ position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,5,15,.97) 0%, rgba(0,5,15,.62) 46%, rgba(0,5,15,.35) 100%),
    linear-gradient(to top, var(--black) 0%, rgba(0,5,15,0) 42%, rgba(0,5,15,.70) 100%); }

/* Not two columns. In the comp (928:3296/hero) the copy rail and the car are
   layered, not side by side: the longest headline is 918px wide in a 1440
   frame, so it runs well past halfway and over the figure. Matching that means
   the figure is positioned art behind the copy, and only the body text is held
   to a readable measure. */
.hero-in{ position:relative; z-index:2; padding:104px 0 96px; }
.hero-copy{ position:relative; z-index:3; min-width:0; }
.hero-copy .tel, .hero-copy .sub, .hero-copy .spectrum, .hero-copy .hero-cta{ max-width:600px; }
/* The caption is all that remains on the right of the hero — the car now
   comes from the background video, not a separate cut-out. */
.hero-in .hero-cap{ position:absolute; right:0; bottom:0; z-index:3; margin:0; }
.hero .tel{ margin-bottom:34px; }
.hero h1{ font-size:clamp(46px,7vw,101px); line-height:0.9; letter-spacing:-0.02em; margin:0 0 30px; }
.hero .sub{ color:var(--mist); font-size:17px; line-height:1.4; max-width:56ch; margin-top:20px; }
.hero .sub b{ color:var(--white); font-weight:600; }
.hero-cta{ display:flex; gap:24px; margin-top:36px; flex-wrap:wrap; }
.hero-cap{ font-family:var(--label); font-size:10px; letter-spacing:0.04em; text-transform:uppercase; color:var(--mist-dim); margin-top:18px; text-align:right; }

/* REMOVED 2026-09-04 — .hero-plate, .hud-panel and their ~45 lines of
   light-UI rebuild. Nothing renders them any more: the hero lost its car
   cut-out to the background video, and the case study is now one exported
   image (see .case-fig). The studio collage uses .sp/.spw, not these.
   In git if the rebuild is ever wanted back. */

/* kinetic display type — solid line + outline line.
   `.out` is amber display type, hollow (Figma: stroke 1.5–1.8).

   ⚠️ NOT -webkit-text-stroke. Maven Pro's glyphs are built from overlapping
   contours, and stroking traces the internal edges as well as the silhouette,
   so letters came out with spurious diagonals through the R, A and S. It is
   the font, not the size or weight — identical at 700/800/900 and in both the
   variable and static builds. Instead the fill is painted OVER the stroke
   (paint-order) to cover the internal artifacts, then keyed out by the
   #knockout filter. Full reasoning in assets/logo-symbol.html — including why
   the feMorphology ring that was tried first had to be abandoned. */
.kin{ display:block; }
/* stroke width is DOUBLE the intended weight — only the outer half shows. */
.kin .out{ display:block; color:var(--black); paint-order:stroke fill;
  -webkit-text-stroke:3.2px var(--amber); filter:url(#knockout); }
@media (max-width:720px){ .kin .out{ -webkit-text-stroke-width:2.4px; } }

/* ===== MARQUEE TICKER =====================================================
   Amber band under the hero. Content is duplicated so the translate loop is
   seamless; the duplicate is aria-hidden so SRs read the list once.        */
.marquee{ background:var(--amber); color:var(--black); overflow:hidden; padding:14px 0; }
.marquee-in{ display:flex; width:max-content; animation:tick 38s linear infinite; }
.marquee ul{ display:flex; align-items:center; gap:20px; list-style:none; padding-right:20px; }
.marquee li{ font-family:var(--label); font-weight:700; font-size:13px; letter-spacing:0.06em; white-space:nowrap; }
.marquee li.dot{ font-size:11px; line-height:1; }   /* the ◆ separators */
@keyframes tick{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee:hover .marquee-in{ animation-play-state:paused; }

/* ===== SECTIONS =========================================================== */
section.blk{ padding:96px 0; background:var(--black); }
section.blk.tight{ padding:68px 0; }
section.blk.alt{ background:var(--ink); border-block:1px solid var(--line); }
/* Figma runs section headings across the full 1240 measure and holds only
   the lede to a reading width — don't clamp .sec-h itself or the h2 wraps. */
.sec-h h2{ font-size:clamp(32px,3.7vw,52px); line-height:1; margin-top:30px; }
.sec-h p{ color:var(--mist); font-size:17px; line-height:1.5; margin-top:22px; max-width:820px; }
.sec-h p b{ color:var(--white); font-weight:600; }
.sec-more{ margin-top:34px; }

/* ===== PAGE HERO (inner pages) ============================================ */
.phero{ position:relative; padding:88px 0 76px; border-bottom:1px solid var(--line); overflow:hidden; background:var(--black); }
/* Audience-page hero plates (Figma: the `header` section carries the photo as
   a fill, with two linear gradients stacked over it for legibility). Set the
   photo per page through --phero-img; the gradients are shared. The comp's
   fill uses scaleMode CROP with its own transform — not reproducible in CSS,
   so this is `cover` positioned right, which lands in the same place. */
.phero[class*="aud-"]{ background:
    linear-gradient(90deg, rgba(0,5,15,.97) 0%, rgba(0,5,15,.82) 40%, rgba(0,5,15,.34) 74%, rgba(0,5,15,.62) 100%),
    linear-gradient(0deg, rgba(0,5,15,.96), rgba(0,5,15,0) 58%),
    var(--phero-img) center right / cover no-repeat,
    var(--black); }
.phero.aud-inhouse{    --phero-img:url("../img/aud-hdr-inhouse.webp"); }
.phero.aud-agencies{   --phero-img:url("../img/aud-hdr-agencies.webp"); }
.phero.aud-consulting{ --phero-img:url("../img/aud-hdr-consulting.webp"); }

/* The pillars section sits over the same plate on all three pages. Held well
   back — the four cards are the content and the car is atmosphere. */
.pillars-sec{ position:relative; overflow:hidden; }
.pillars-sec::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,5,15,.72) 0%, rgba(0,5,15,.88) 55%, rgba(0,5,15,.97) 100%),
    url("../img/aud-pillars.webp") center top / cover no-repeat; }
.pillars-sec > *{ position:relative; z-index:1; }
.phero::before{ content:""; position:absolute; inset:0; background:radial-gradient(90% 130% at 18% 0%, rgba(112,156,255,.14), transparent 62%); pointer-events:none; }
.phero .wrap{ position:relative; }
.phero h1{ font-size:clamp(36px,5.2vw,64px); line-height:0.98; margin:18px 0 0; max-width:20ch; }
/* No page currently puts an <em> in a .phero h1 — kept in step with .kin .out
   so it is right if one ever does. See the filter note above. */
.phero h1 em{ font-style:normal; color:var(--black); paint-order:stroke fill;
  -webkit-text-stroke:2.8px var(--amber); filter:url(#knockout); }
.phero .lede{ color:var(--mist); font-size:clamp(16px,1.7vw,18px); line-height:1.5; max-width:66ch; margin-top:22px; }
.phero .lede b{ color:var(--white); font-weight:600; }
.phero .spectrum{ margin-top:26px; }
.phero-cta{ display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }

/* breadcrumb-ish page position marker */
.pmark{ font-family:var(--label); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mist-dim); }
.pmark b{ color:var(--periwinkle); font-weight:400; }

/* ===== TRUST STRIP ======================================================== */
.trust{ border-block:1px solid var(--line); background:var(--ink); }
.trust-in{ display:flex; align-items:center; justify-content:space-between; gap:28px; padding-block:20px; flex-wrap:wrap; }
.powered{ display:flex; align-items:center; gap:12px; font-family:var(--label); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--mist-dim); }
.powered svg{ height:18px; width:auto; }
.trust-stats{ display:flex; gap:34px; flex-wrap:wrap; }
.trust-stats .ts b{ font-family:var(--display); font-weight:900; font-size:20px; color:var(--amber); }
.trust-stats .ts span{ font-family:var(--label); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--mist-dim); margin-left:8px; }

/* ===== AUDIENCE ROUTER ==================================================== */
.router{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.router .seg{ display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line-2); border-radius:16px; padding:28px 26px; transition:transform .2s, border-color .2s; }
.router .seg:hover{ transform:translateY(-3px); border-color:var(--periwinkle); }
.router .seg .idx{ font-family:var(--label); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--periwinkle); }
.router .seg h3{ font-size:22px; line-height:1.06; margin:14px 0 12px; }
.router .seg p{ color:var(--mist); font-size:13.5px; line-height:1.46; flex:1; }
.router .seg .go{ margin-top:20px; font-family:var(--label); font-weight:700; font-size:12px; letter-spacing:.04em; color:var(--amber); display:inline-flex; align-items:center; gap:8px; transition:gap .15s; }
.router .seg:hover .go{ gap:12px; }
.router .seg.primary{ border-color:var(--amber); }
@media (max-width:900px){ .router{ grid-template-columns:1fr; } }

/* ===== BENTO VALUE GRID ===================================================
   Figma: 1240×760 — 4 equal columns, 16px gap, two 360px rows.
   A spans 2 cols · C spans both rows · D/E/F fill row 2.                    */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:360px; gap:16px; margin-top:40px; }
.bento .tile{ position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--line-2); border-radius:16px; padding:28px 26px; display:flex; flex-direction:column; transition:transform .2s, border-color .2s; }
.bento .tile:hover{ transform:translateY(-3px); }
.bento .tile.lead{ grid-column:span 2; border-color:var(--amber); padding:30px; }
.bento .tile.tall{ grid-row:span 2; justify-content:flex-end; }
.bento .tile.deep{ background:var(--panel-2); }
.bento .vn{ font-family:var(--label); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--periwinkle); position:relative; z-index:2; }
.bento .tile.lead .vn,.bento .tile.tall .vn{ color:var(--amber); }
.bento .vn.dim{ color:var(--mist-dim); font-size:11px; }
.bento h3{ font-size:22px; line-height:1.06; margin:12px 0 0; position:relative; z-index:2; }
.bento .tile.lead h3{ font-size:clamp(26px,2.4vw,34px); line-height:1.04; }
.bento p{ color:var(--mist); font-size:13.5px; line-height:1.46; margin-top:12px; position:relative; z-index:2; }
.bento .tile.lead p{ font-size:15px; line-height:1.5; max-width:60ch; }
.bento .big{ font-family:var(--display); font-weight:900; font-size:76px; line-height:.96; color:var(--amber); margin-top:10px; position:relative; z-index:2; }
.bento .big.peri{ color:var(--periwinkle); font-size:80px; }
.bento .spectrum{ width:100%; height:3px; background:linear-gradient(90deg,var(--periwinkle),var(--amber)); margin-top:auto; position:relative; z-index:2; }
.bento .tag{ align-self:flex-start; font-family:var(--label); font-weight:700; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--black); background:var(--amber); padding:4px 9px; border-radius:3px; position:relative; z-index:2; }
/* the pass-chips on the brand-safety tile */
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; position:relative; z-index:2; }
.chip{ font-family:var(--label); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--periwinkle); border:1px solid var(--line-2); border-radius:3px; padding:7px 10px; }
.chip::after{ content:" \2713"; color:var(--amber); }
/* the two-stat row on the earned-media tile */
.frow{ display:flex; gap:16px; margin-top:auto; position:relative; z-index:2; }
.frow div b{ display:block; font-family:var(--display); font-weight:900; font-size:26px; color:var(--amber); line-height:1; }
.frow div span{ display:block; font-family:var(--label); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--mist-dim); margin-top:6px; }

/* The comp fills these two tiles with car photography. Those exports live in
   assets/img/ and are layered on top by .tile-photo; .tile-scene stays as the
   CSS fallback beneath, so a missing/removed export degrades rather than
   leaving a blank tile. NOTE: the exports show a real marque — swap them for
   VELA renders before this goes public (guardrail 1). */
.tile-photo{ position:absolute; inset:0; z-index:1; background-position:center; background-size:cover; background-repeat:no-repeat; }
.tile-photo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,5,15,.50) 0%, rgba(0,5,15,.20) 34%, rgba(0,5,15,.96) 100%); }
.tile-photo.rights{ background-image:url("../img/home-tile-rights.webp"); }
.tile-photo.output{ background-image:url("../img/home-tile-output.webp"); }

.tile-scene{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.tile-scene::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,5,15,.50) 0%, rgba(0,5,15,.20) 34%, rgba(0,5,15,.96) 100%); }
/* vertical light bars — the "rights" tile */
.tile-scene.pillars{ background:linear-gradient(180deg,#04122e,#00050F);
  background-image:
    repeating-linear-gradient(90deg, rgba(112,156,255,.55) 0 2px, transparent 2px 34px),
    linear-gradient(180deg,#061838,#00050F);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%); }
.tile-scene.pillars::before{ content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg, rgba(255,82,82,.45) 0 2px, transparent 2px 78px);
  transform:translateX(17px); }
/* perspective floor — the "output" tile */
.tile-scene.floor{ background:radial-gradient(120% 90% at 50% 0%, #16336f, #00050F 74%); }
.tile-scene.floor::before{ content:""; position:absolute; left:-40%; right:-40%; bottom:-14%; height:88%;
  background-image:linear-gradient(rgba(255,180,0,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255,180,0,.55) 1px, transparent 1px);
  background-size:40px 40px; transform:perspective(300px) rotateX(62deg); transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to top, #000, transparent 76%); mask-image:linear-gradient(to top, #000, transparent 76%); }

@media (max-width:1080px){
  .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
  .bento .tile{ min-height:300px; }
  .bento .tile.lead{ grid-column:span 2; }
  .bento .tile.tall{ grid-row:auto; min-height:360px; }
}
@media (max-width:620px){
  .bento{ grid-template-columns:1fr; }
  .bento .tile.lead{ grid-column:auto; }
  .bento .big{ font-size:60px; } .bento .big.peri{ font-size:64px; }
}

/* ===== INSIDE THE STUDIO — the comp's panel collage =======================
   Ported from Figma `sec·studio` (531:7306). Stage is 1240×640; the four
   panels are the configurator's real light UI, rebuilt as HTML.

   HOW THE SCALING WORKS — read this before touching any number below.
   Every length inside .studio-canvas is written as `calc(N * var(--u))`,
   where N is the comp's own pixel value straight out of Figma and --u is
   1/1240th of the stage width. So the whole collage scales as one rigid
   piece: nothing reflows, nothing needs a breakpoint, and at a 1240px-wide
   stage 1u === 1px and the port is pixel-exact against the comp.

   --u is `0.0806452cqw`, which means .studio-stage must be the query
   container. Note --u is declared on .studio-canvas, the CHILD — an
   element's own cq units resolve against its *ancestor* container, never
   itself, so declaring --u on .studio-stage would silently resolve against
   the viewport instead and the collage would size off the wrong box.

   Under 1080px this all switches off (--u becomes 1px) and the same panels
   become a horizontal scroller at natural size, which is what the 390 comp
   (602:238) does.                                                          */
.studio-stage{ position:relative; container-type:inline-size; margin-top:34px;
  background:var(--ink); border:1px solid var(--line); border-radius:4px;
  aspect-ratio:1240/640; overflow:hidden; }
.studio-canvas{ --u:0.0806452cqw; position:absolute; inset:0;
  font-family:var(--body); color:#1a1c1e; }
/* periwinkle bloom — comp ellipse 531:7314, 1000×700 at 120,-160 */
.studio-canvas::before{ content:""; position:absolute; pointer-events:none;
  left:calc(120*var(--u)); top:calc(-160*var(--u));
  width:calc(1000*var(--u)); height:calc(700*var(--u));
  background:radial-gradient(closest-side, rgba(112,156,255,.18), rgba(112,156,255,0)); }
/* display:contents so the .spw children position against .studio-canvas.
   The rail only becomes a real box in the mobile scroller below. */
.studio-rail{ display:contents; }

/* panel + its caption tab. Comp puts the cap 6px above the panel, same x. */
/* NB .spw carries no z-index on purpose. A caption tab and its own panel sit
   at DIFFERENT depths in the comp: ONE-TAP PUBLISH is tucked *behind* the
   Liveries panel while the SHARE & EXPORT panel it labels is in front of it.
   A z-index on the wrapper would make it a stacking context and weld the two
   together, so the tab would ride over Liveries. Depth is set per element. */
.spw{ position:absolute; display:flex; flex-direction:column; gap:calc(6*var(--u)); }
.spw .sp-cap, .spw .sp{ position:relative; }
.pw-paint{ left:calc(36*var(--u));  top:calc(118*var(--u)); }
.pw-ai   { left:calc(350*var(--u)); top:calc(88*var(--u));  }
.pw-liv  { left:calc(664*var(--u)); top:calc(42*var(--u));  }
.pw-share{ left:calc(910*var(--u)); top:calc(118*var(--u)); }
.pw-paint .sp-cap, .pw-paint .sp{ z-index:1; }
.pw-ai    .sp-cap, .pw-ai    .sp{ z-index:2; }
.pw-liv   .sp-cap, .pw-share .sp-cap{ z-index:2; }
.pw-liv   .sp{ z-index:5; }
.pw-share .sp{ z-index:6; }
/* z-order is the comp's: Paint and AI GENERATION are *under* the bottom fade
   so they dissolve into the well; Liveries and SHARE & EXPORT are over it. */
.studio-fade{ position:absolute; z-index:3; pointer-events:none; left:0; right:0;
  top:calc(440*var(--u)); height:calc(200*var(--u));
  background:linear-gradient(180deg, rgba(1,10,31,0), var(--ink)); }
.studio-cap{ position:absolute; z-index:4; left:36px; bottom:22px; margin:0;
  font-family:var(--label); font-size:10px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--mist-dim); }

.sp-cap{ align-self:flex-start; display:inline-flex; align-items:center; white-space:nowrap;
  gap:calc(7*var(--u)); background:var(--black);
  padding:calc(6*var(--u)) calc(10*var(--u));
  font-family:var(--label); font-weight:700; font-size:calc(9.5*var(--u)); letter-spacing:.02em; }
.sp-cap i{ width:calc(10*var(--u)); height:calc(2*var(--u)); background:currentColor; flex:none; }
.sp-cap.peri{ color:var(--periwinkle); }
.sp-cap.amber{ color:var(--amber); }

/* the light product panel itself — #F1F0F4 on #C4C6D0, the real product's
   palette. Heights are deliberately content-driven, not the comp's fixed
   values: Paint and AI GENERATION overrun the 640 stage and are meant to be
   clipped by it, so a few px of drift never shows. */
.sp{ width:calc(330*var(--u)); background:#f1f0f4; border:1px solid #c4c6d0;
  padding:calc(24*var(--u)) calc(32*var(--u)) calc(32*var(--u));
  display:flex; flex-direction:column; gap:calc(14*var(--u));
  box-shadow:0 calc(30*var(--u)) calc(60*var(--u)) calc(-24*var(--u)) rgba(0,0,0,.75); }
/* Required, not tidying. The mobile rule below caps .sp with max-height, and
   a column flex container answers that by SHRINKING its children — the 58px
   colour swatches collapsed to 16px. These rows must overflow and be clipped,
   never compress. */
.sp > *{ flex:none; }
.pw-liv .sp{ width:calc(320*var(--u)); }
.sp .ic{ width:calc(22*var(--u)); height:calc(22*var(--u)); flex:none;
  fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.sp-hd{ display:flex; align-items:center; justify-content:space-between; gap:calc(8*var(--u)); }
.sp-hd h3{ display:flex; align-items:center; gap:calc(8*var(--u)); margin:0;
  font-family:var(--body); font-weight:800; letter-spacing:0; color:#1a1c1e; }
.sp-hd .t26{ font-size:calc(26*var(--u)); }
.sp-hd .t24{ font-size:calc(24*var(--u)); }
.sp-hd .t20{ font-size:calc(20*var(--u)); letter-spacing:.02em; }
.sp-x{ font-weight:700; font-size:calc(18*var(--u)); }
.sp-x.dim{ font-size:calc(16*var(--u)); color:#44474e; }
.sp-lb{ margin:0; font-size:calc(11*var(--u)); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#44474e; }

/* — PAINT — */
.sp-sel{ display:flex; align-items:center; gap:calc(8*var(--u)); font-size:calc(15*var(--u)); font-weight:500; }
.sp-sel b{ font-size:calc(14*var(--u)); font-weight:700; }
.sw22{ width:calc(22*var(--u)); height:calc(22*var(--u)); flex:none; }
/* the family strip overflows its own panel in the comp too — clipped, not wrapped */
.sp-family{ display:flex; gap:calc(10*var(--u)); background:#ababae; overflow:hidden;
  padding:calc(12*var(--u)) calc(12*var(--u)) calc(16*var(--u)); }
.fam{ width:calc(58*var(--u)); height:calc(58*var(--u)); flex:none; }
.fam.all{ background:#fff; display:flex; align-items:center; justify-content:center;
  font-size:calc(11*var(--u)); font-weight:700; letter-spacing:.04em; }
.sp-finish{ display:flex; align-items:flex-start; gap:calc(8*var(--u)); }
.fin{ display:flex; align-items:center; justify-content:center; flex:none;
  font-weight:700; font-size:calc(13*var(--u)); letter-spacing:.06em; }
.fin.on{ width:calc(102*var(--u)); height:calc(100*var(--u)); background:#fff;
  flex-direction:column; justify-content:flex-start; gap:calc(6*var(--u)); padding-top:calc(44*var(--u)); }
.fin.on i{ width:calc(70*var(--u)); height:calc(3*var(--u)); background:#ffc000; }
.fin.dark{ width:calc(102*var(--u)); height:calc(47*var(--u)); margin-top:calc(27*var(--u)); background:#000; color:#fff; }
.fin.grid{ width:calc(46*var(--u)); height:calc(40*var(--u)); margin-top:calc(30*var(--u)); background:#000;
  display:grid; grid-template-columns:repeat(2, calc(6*var(--u))); gap:calc(3*var(--u));
  align-content:center; justify-content:center; }
.fin.grid em{ width:calc(6*var(--u)); height:calc(6*var(--u)); background:#fff; border-radius:calc(1*var(--u)); }
.sp-gh{ margin:0; font-size:calc(16*var(--u)); font-weight:700; }
.sp-row{ display:flex; align-items:center; gap:calc(14*var(--u)); font-size:calc(19*var(--u)); font-weight:500; }
.sw46{ width:calc(46*var(--u)); height:calc(46*var(--u)); flex:none; }

/* — AI GENERATION — */
.sp-box{ background:#e2e2e6; border:1px solid #c4c6d0; min-height:calc(100*var(--u));
  padding:calc(12*var(--u)) calc(16*var(--u)) calc(24*var(--u));
  font-size:calc(14*var(--u)); font-weight:500; line-height:1.4; color:#44474e; }
.sp-pills{ display:flex; flex-wrap:wrap; gap:calc(8*var(--u)); }
.sp-pills span{ background:#e2e2e6; padding:calc(8*var(--u)) calc(16*var(--u));
  font-size:calc(12*var(--u)); font-weight:700; letter-spacing:.04em; }
.sp-pills span.on{ background:#ffc000; }
.sp-btn{ display:flex; align-items:center; justify-content:center; gap:calc(8*var(--u));
  height:calc(50*var(--u)); background:#ffc000;
  font-size:calc(14*var(--u)); font-weight:700; letter-spacing:.04em; }
.sp-btn .ic{ width:calc(18*var(--u)); height:calc(18*var(--u)); }
.sp-note{ display:flex; gap:calc(8*var(--u)); background:#e2e2e6;
  padding:calc(8*var(--u)) calc(12*var(--u));
  font-size:calc(11*var(--u)); font-weight:500; line-height:1.3; color:#44474e; }
.sp-note .ic{ width:calc(16*var(--u)); height:calc(16*var(--u)); }
.sp-results{ display:grid; grid-template-columns:repeat(2, calc(140*var(--u))); gap:calc(10*var(--u)); }
.sp-results span{ height:calc(96*var(--u)); background:#000; }
.sp-results span.on{ outline:calc(3*var(--u)) solid #ffc000; outline-offset:calc(-3*var(--u)); }

/* — LIVERIES — */
.sp-tabs{ display:flex; }
.sp-tabs span{ position:relative; width:50%; text-align:center;
  padding:calc(12*var(--u)) calc(16*var(--u));
  font-size:calc(11*var(--u)); font-weight:700; letter-spacing:.08em; }
.sp-tabs span.on::after{ content:""; position:absolute; left:0; bottom:0;
  width:calc(10*var(--u)); height:calc(2*var(--u)); background:#ffc000; }
.sp-back{ margin:0; font-size:calc(11*var(--u)); font-weight:600; letter-spacing:.04em; color:#44474e; }
.sp-verify{ background:#e2e2e6; padding:calc(24*var(--u)); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:calc(8*var(--u)); }
.sp-verify .dots{ display:flex; gap:calc(6*var(--u)); }
.sp-verify .dots i{ width:calc(6*var(--u)); height:calc(6*var(--u)); border-radius:50%; background:#44474e; }
.sp-verify .dots i:last-child{ background:#1a1c1e; }
.sp-verify b{ font-size:calc(13*var(--u)); font-weight:700; letter-spacing:.02em; }
.sp-verify > span:last-child{ font-size:calc(11*var(--u)); font-weight:500; line-height:1.35; color:#44474e; }

/* — SHARE & EXPORT — */
.sp-prev{ height:calc(150*var(--u)); background:#000; display:flex; align-items:center; justify-content:center; }
.sp-prev .film{ width:calc(40*var(--u)); height:calc(40*var(--u)); color:#fff; }
.sp-toggle{ display:flex; align-items:center; gap:calc(10*var(--u)); font-size:calc(15*var(--u)); font-weight:500; }
.sp-toggle em{ position:relative; flex:none; margin-left:auto;
  width:calc(44*var(--u)); height:calc(26*var(--u)); border-radius:calc(13*var(--u)); background:#ffc000; }
.sp-toggle em::after{ content:""; position:absolute; right:calc(2*var(--u)); top:calc(2*var(--u));
  width:calc(22*var(--u)); height:calc(22*var(--u)); border-radius:50%; background:#fff; }
.sp-duo, .sp-trio{ display:flex; gap:calc(10*var(--u)); }
.sp-duo span, .sp-trio span{ flex:1; display:flex; align-items:center; justify-content:center;
  gap:calc(8*var(--u)); background:#e2e2e6; font-weight:700; letter-spacing:.02em; }
.sp-duo span{ height:calc(42*var(--u)); font-size:calc(13*var(--u)); }
.sp-trio span{ height:calc(40*var(--u)); font-size:calc(12*var(--u)); }
.sp-trio span.on{ background:#ffc000; }
.sp-duo .ic{ width:calc(18*var(--u)); height:calc(18*var(--u)); }
.sp-trio .ic{ width:calc(16*var(--u)); height:calc(16*var(--u)); }

/* Under 1080 the collage can't hold: scaled to a 390 viewport the 11px
   labels land near 3px. The 390 comp (602:238) answers this by laying the
   same panels out as a horizontal scroller at natural size — so --u drops
   back to a literal pixel and the rail becomes a real flex row.
   !DEVIATION: the comp's mobile screen drops the Paint panel; all four are
   kept here, since a scroller has no length limit and hiding a panel from
   phone users only loses content. */
@media (max-width:1079px){
  .studio-stage{ container-type:normal; aspect-ratio:auto; overflow:visible;
    background:none; border:0; border-radius:0; }
  .studio-canvas{ --u:1px; position:static; }
  .studio-canvas::before{ display:none; }
  .studio-rail{ display:flex; gap:18px; align-items:flex-start;
    overflow-x:auto; overflow-y:hidden; padding:4px 20px 18px;
    margin-inline:calc(var(--pad, 20px) * -1);
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .spw{ position:static; flex:none; scroll-snap-align:center; }
  /* Paint and AI GENERATION are ~800–970px tall at natural size; the comp
     clips them too (mobile AI GENERATION is 727 with clipsContent). */
  .pw-paint .sp, .pw-ai .sp{ max-height:620px; overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);
    mask-image:linear-gradient(180deg,#000 82%,transparent); }
  .studio-fade{ display:none; }
  .studio-cap{ position:static; margin-top:14px; }
}

.cfg-note{ position:relative; z-index:2; margin-top:24px; padding:18px 20px; background:var(--panel); border:1px solid var(--line-2); border-left:2px solid var(--amber); border-radius:4px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.cfg-note p{ font-size:14.5px; color:var(--mist); flex:1; min-width:220px; } .cfg-note p b{ color:var(--white); }
.cfg-note .btn{ flex-shrink:0; }

/* ===== METHOD — filmstrip + scrubber ======================================
   Figma: a 2px rail with five sector nodes and a white playhead, then five
   235px sector cards. Cleared sectors read amber; pending read dim.        */
.rail{ position:relative; height:44px; margin-top:36px; }
.rail-track{ position:absolute; left:0; right:0; top:14px; height:2px; background:var(--line); }
.rail-prog{ position:absolute; left:0; top:14px; height:2px; width:62%; background:linear-gradient(90deg,var(--periwinkle),var(--amber)); }
.rail-head{ position:absolute; left:62%; top:2px; width:3px; height:26px; background:var(--white); }
.rail-node{ position:absolute; top:9px; transform:translateX(-50%); }
.rail-node .dot{ display:block; width:12px; height:12px; border-radius:50%; background:var(--panel-2); border:2px solid var(--line-2); }
.rail-node.on .dot{ background:var(--amber); border-color:var(--amber); }
.rail-node .s{ position:absolute; top:19px; left:50%; transform:translateX(-50%); font-family:var(--label); font-weight:700; font-size:9px; letter-spacing:.02em; color:var(--mist-dim); }
.rail-node.on .s{ color:var(--amber); }

.strip{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:22px; }
.sector{ display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:4px; overflow:hidden; transition:transform .2s, border-color .2s; }
.sector.on{ border-color:var(--line-2); }
.sector:hover{ transform:translateY(-3px); border-color:var(--periwinkle); }
.sector .hd{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; background:rgba(0,5,15,.4); border-bottom:1px solid var(--line); }
.sector .hd .hl{ font-family:var(--label); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mist-dim); }
.sector.on .hd .hl{ color:var(--amber); }
.sector .hd .st{ font-family:var(--label); font-weight:700; font-size:11px; color:var(--mist-dim); }
.sector.on .hd .st{ color:var(--periwinkle); }
.sector .bd{ padding:16px; }
.sector .bd h3{ font-size:15px; line-height:1.12; }
.sector .bd p{ color:var(--mist); font-size:12px; line-height:1.42; margin-top:6px; }
/* !DEVIATION — comp uses car photography in the 132px media band; CSS scene
   instead, for the same reason as the bento tiles (guardrail 1). */
.sector .media{ position:relative; height:132px; overflow:hidden; background:radial-gradient(120% 100% at 50% 0%, #10265a, #030c20 72%); }
.sector .media::before{ content:""; position:absolute; left:-40%; right:-40%; bottom:-20%; height:96%;
  background-image:linear-gradient(rgba(112,156,255,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(112,156,255,.28) 1px, transparent 1px);
  background-size:26px 26px; transform:perspective(200px) rotateX(64deg); transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 80%); mask-image:linear-gradient(to top,#000,transparent 80%); }
.sector .media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,5,15,0) 40%, rgba(0,5,15,.85) 100%); }
/* Each sector's Figma export is layered over its tint, in one background-image
   list — if the JPG 404s the gradient behind it still paints. */
.sector .media{ background-size:cover; background-position:center; background-repeat:no-repeat; }
.sector:nth-child(1) .media{ background-image:url("../img/home-scene-1.webp"), radial-gradient(120% 100% at 50% 0%, #10265a, #030c20 72%); }
.sector:nth-child(2) .media{ background-image:url("../img/home-scene-2.webp"), radial-gradient(120% 100% at 50% 0%, #3a1d5e, #030c20 72%); }
.sector:nth-child(3) .media{ background-image:url("../img/home-scene-3.webp"), radial-gradient(120% 100% at 50% 0%, #1c3a2e, #030c20 72%); }
.sector:nth-child(4) .media{ background-image:url("../img/home-scene-4.webp"), radial-gradient(120% 100% at 50% 0%, #2a2a2a, #030c20 72%); }
.sector:nth-child(5) .media{ background-image:url("../img/home-scene-5.webp"), radial-gradient(120% 100% at 50% 0%, #4a1f3a, #030c20 72%); }
/* the perspective grid is scene dressing — it would sit on top of the photo */
.sector .media::before{ opacity:.35; }
@media (max-width:1080px){ .strip{ grid-template-columns:repeat(3,1fr); } .rail{ display:none; } }
@media (max-width:720px){ .strip{ grid-template-columns:1fr; } }

/* ===== HOW IT WORKS (full page) =========================================== */
.steps{ margin-top:44px; display:flex; flex-direction:column; gap:20px; }
.step{ display:grid; grid-template-columns:320px 1fr; gap:28px; align-items:center; background:var(--panel); border:1px solid var(--line-2); border-radius:4px; padding:18px; transition:border-color .2s; }
.step:hover{ border-color:var(--periwinkle); }
.step:nth-child(even){ grid-template-columns:1fr 320px; }
.step:nth-child(even) .hiw-media{ order:2; }
.step-body .sn{ font-family:var(--label); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--periwinkle); }
.step-body h3{ font-size:22px; margin:10px 0; }
.step-body p{ color:var(--mist); font-size:15px; max-width:56ch; }
.step-body .wl{ font-family:var(--label); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--mist-dim); margin-top:12px; display:inline-block; }
@media (max-width:820px){ .step, .step:nth-child(even){ grid-template-columns:1fr; } .step:nth-child(even) .hiw-media{ order:0; } }

.hiw-media{ position:relative; aspect-ratio:16/10; border-radius:2px; overflow:hidden; border:1px solid var(--line-2);
  background:radial-gradient(120% 100% at 50% 0%, #0f2c5f, #030c20); }
.hiw-media .chrome{ position:absolute; left:10px; right:10px; bottom:8px; height:3px; border-radius:3px; background:rgba(255,255,255,.12); z-index:4; overflow:hidden; }
.hiw-media .chrome::after{ content:""; position:absolute; left:0; top:0; height:100%; width:30%; background:var(--periwinkle); border-radius:3px; animation:playhead 4s linear infinite; }
@keyframes playhead{ from{ transform:translateX(-100%); } to{ transform:translateX(430%); } }
.hiw-media .rec{ position:absolute; top:9px; right:11px; z-index:4; font-family:var(--label); font-size:8px; letter-spacing:.12em; color:var(--mist-dim); display:flex; align-items:center; gap:5px; }
.hiw-media .rec::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--amber); animation:blink 1.4s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:.25; } }
.hiw-svg{ position:absolute; inset:0; width:100%; height:100%; }
.hiw-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:5; }

.mini-body{ fill:var(--periwinkle); }
.mini-glass{ fill:#040e26; } .mini-tire{ fill:#04091c; } .mini-rim{ fill:#fff; }
.s1-body{ fill:var(--periwinkle); opacity:0; animation:s1fill 4s ease infinite; }
.s1-outline{ fill:none; stroke:var(--periwinkle); stroke-width:2; stroke-dasharray:900; stroke-dashoffset:900; animation:s1draw 4s ease infinite; }
@keyframes s1draw{ 0%{ stroke-dashoffset:900; } 45%{ stroke-dashoffset:0; } 60%,100%{ stroke-dashoffset:0; opacity:.25; } }
@keyframes s1fill{ 0%,45%{ opacity:0; } 62%{ opacity:1; } 100%{ opacity:1; } }
.s1-scan{ fill:rgba(200,220,255,.35); animation:s1scan 4s ease-in-out infinite; }
@keyframes s1scan{ 0%{ transform:translateX(-40px); opacity:0; } 10%{ opacity:1; } 45%{ transform:translateX(320px); opacity:1; } 55%,100%{ opacity:0; } }
.s2-body{ animation:s2cycle 4s steps(1) infinite; }
@keyframes s2cycle{ 0%{ fill:#709CFF; } 25%{ fill:#FFB400; } 50%{ fill:#16306E; } 75%{ fill:#FF5252; } }
.s2-stripe{ fill:#fff; opacity:.85; }
.s2-dot{ fill:var(--line-2); } .s2-ring{ fill:none; stroke:#fff; stroke-width:2; animation:s2ring 4s steps(1) infinite; }
@keyframes s2ring{ 0%{ transform:translateX(0); } 25%{ transform:translateX(26px); } 50%{ transform:translateX(52px); } 75%{ transform:translateX(78px); } }
.s3-scan{ fill:rgba(112,156,255,.5); animation:s3scan 4s ease-in-out infinite; }
@keyframes s3scan{ 0%{ transform:translateY(-10px); opacity:0; } 8%{ opacity:1; } 55%{ transform:translateY(150px); opacity:1; } 62%,100%{ opacity:0; } }
.s3-check{ fill:none; stroke:var(--amber); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:70; stroke-dashoffset:70; animation:s3check 4s ease infinite; }
@keyframes s3check{ 0%,60%{ stroke-dashoffset:70; } 74%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:0; } }
.s3-pass{ fill:var(--amber); font-family:var(--label); font-size:12px; letter-spacing:.1em; opacity:0; animation:s3pass 4s ease infinite; }
@keyframes s3pass{ 0%,64%{ opacity:0; } 78%,100%{ opacity:1; } }
.s4-bar-fill{ fill:var(--amber); transform-origin:left center; transform:scaleX(0); animation:s4prog 4s ease infinite; }
@keyframes s4prog{ 0%{ transform:scaleX(0); } 70%{ transform:scaleX(1); } 100%{ transform:scaleX(1); } }
.s4-play{ fill:#fff; opacity:.9; animation:s4pulse 4s ease infinite; }
@keyframes s4pulse{ 0%,70%{ opacity:.5; transform:scale(.96); } 82%{ opacity:1; transform:scale(1.06); } 100%{ opacity:.9; transform:scale(1); } }
.s4-ready{ fill:var(--amber); font-family:var(--label); font-size:11px; letter-spacing:.12em; opacity:0; animation:s4ready 4s ease infinite; }
@keyframes s4ready{ 0%,72%{ opacity:0; } 84%,100%{ opacity:1; } }
.s5-card{ transform:translateY(40px); opacity:0; animation:s5rise 4s ease infinite; }
@keyframes s5rise{ 0%{ transform:translateY(40px); opacity:0; } 26%{ transform:translateY(0); opacity:1; } 88%{ transform:translateY(0); opacity:1; } 100%{ transform:translateY(-8px); opacity:0; } }
.s5-heart{ fill:var(--red); transform-origin:center; transform:scale(0); animation:s5heart 4s ease infinite; }
@keyframes s5heart{ 0%,34%{ transform:scale(0); } 46%{ transform:scale(1.3); } 54%,100%{ transform:scale(1); } }
.s5-tag{ fill:var(--periwinkle); font-family:var(--label); font-size:10px; }

/* compact 5-up strip (legacy home teaser — still used by inner pages) */
.stepstrip{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:40px; }
.stepstrip .ss{ background:var(--panel); border:1px solid var(--line-2); border-radius:4px; padding:20px 18px; }
.stepstrip .ss .n{ font-family:var(--label); font-weight:700; font-size:11px; letter-spacing:.06em; color:var(--periwinkle); }
.stepstrip .ss h3{ font-size:16px; margin:10px 0 8px; }
.stepstrip .ss p{ font-size:13px; color:var(--mist); }
@media (max-width:980px){ .stepstrip{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .stepstrip{ grid-template-columns:1fr; } }

/* ===== REFRAME ============================================================ */
.reframe{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:44px; }
.reframe .col{ background:var(--panel); border:1px solid var(--line-2); border-radius:4px; padding:28px 26px; transition:transform .2s; }
.reframe .col:hover{ transform:translateY(-3px); }
.reframe .col.hard{ border-top:2px solid var(--mist-dim); } .reframe .col.easy{ border-top:2px solid var(--amber); }
.reframe .col .lab{ font-family:var(--label); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mist-dim); } .reframe .col.easy .lab{ color:var(--amber); }
.reframe .col h3{ font-size:22px; margin:12px 0 10px; }
.reframe .col ul{ list-style:none; margin-top:14px; }
.reframe .col li{ font-size:14px; color:var(--mist); padding:9px 0 9px 22px; position:relative; border-top:1px solid var(--line); }
.reframe .col li::before{ content:"\203A"; position:absolute; left:2px; color:var(--periwinkle); font-family:var(--display); } .reframe .col.easy li::before{ color:var(--amber); }
@media (max-width:760px){ .reframe{ grid-template-columns:1fr; } }

/* ===== VALUE STACK (inner pages) ========================================== */
.stack{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:44px; }
.val{ background:var(--panel); border:1px solid var(--line-2); border-radius:4px; padding:28px 26px; position:relative; transition:transform .2s; }
.val:hover{ transform:translateY(-3px); }
.val.lead{ border-color:var(--amber); }
.val .vn{ font-family:var(--label); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--periwinkle); } .val.lead .vn{ color:var(--amber); }
.val h3{ font-size:22px; margin:12px 0 10px; padding-right:96px; }
.val p{ color:var(--mist); font-size:14.5px; line-height:1.5; }
.val .tag{ position:absolute; top:24px; right:24px; font-family:var(--label); font-weight:700; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--black); background:var(--amber); padding:4px 9px; border-radius:3px; }
@media (max-width:760px){ .stack{ grid-template-columns:1fr; } .val h3{ padding-right:0; } .val .tag{ position:static; display:inline-block; margin-bottom:10px; } }

/* ===== 3-UP CARDS ========================================================= */
.why{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.why .card{ background:var(--panel); border:1px solid var(--line-2); border-radius:4px; padding:26px 24px; transition:transform .2s; }
.why .card:hover{ transform:translateY(-3px); }
.why .card .u{ font-family:var(--label); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mist-dim); }
.why .card h3{ font-size:19px; margin:10px 0 8px; }
.why .card p{ color:var(--mist); font-size:14px; } .why .card .out{ color:var(--periwinkle); font-weight:600; }
section.blk.alt .why .card{ background:var(--panel-2); }
@media (max-width:760px){ .why{ grid-template-columns:1fr; } }

/* ===== COMPARISON TABLE =================================================== */
.cmp-scroll{ margin-top:44px; overflow-x:auto; border:1px solid var(--line-2); border-radius:4px; background:var(--panel); }
table.cmp{ width:100%; border-collapse:collapse; min-width:760px; }
table.cmp th, table.cmp td{ padding:15px 16px; text-align:left; border-bottom:1px solid var(--line); font-size:13.5px; }
table.cmp thead th{ font-family:var(--label); font-weight:700; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mist-dim); vertical-align:bottom; background:var(--black); }
table.cmp thead th.us{ color:var(--amber); }
table.cmp tbody th{ font-weight:600; color:var(--white); font-family:var(--body); }
table.cmp td{ color:var(--mist); text-align:center; }
table.cmp td.us{ background:rgba(255,180,0,.06); color:var(--white); font-weight:600; }
table.cmp tr:last-child th, table.cmp tr:last-child td{ border-bottom:none; }
.cmp-hint{ margin-top:12px; font-family:var(--label); font-size:10.5px; color:var(--mist-dim); }

/* ===== TRACK TABS (for-partners) ========================================== */
.tracks{ display:flex; gap:10px; margin-top:36px; flex-wrap:wrap; }
.track-btn{ font-family:var(--label); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--mist); background:transparent; border:1px solid var(--line-2); border-radius:32px; padding:12px 20px; cursor:pointer; transition:all .15s; }
.track-btn:hover{ color:var(--white); border-color:var(--periwinkle); }
.track-btn[aria-selected="true"]{ color:var(--black); background:var(--amber); border-color:var(--amber); }
.track-panel[hidden]{ display:none; }
.track-panel{ margin-top:32px; }

/* ===== SPLIT / PANELS ===================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:44px; align-items:start; }
@media (max-width:820px){ .split{ grid-template-columns:1fr; gap:24px; } }
.panel{ background:var(--panel); border:1px solid var(--line-2); border-radius:4px; padding:28px; }
section.blk.alt .panel{ background:var(--panel-2); }
.panel h3{ font-size:20px; margin-bottom:12px; }
.panel .lab{ font-family:var(--label); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mist-dim); }
.ticks{ list-style:none; margin-top:14px; }
.ticks li{ font-size:14.5px; color:var(--mist); padding:10px 0 10px 26px; position:relative; border-top:1px solid var(--line); }
.ticks li:first-child{ border-top:none; }
.ticks li::before{ content:""; position:absolute; left:3px; top:18px; width:11px; height:6px; border-left:2px solid var(--amber); border-bottom:2px solid var(--amber); transform:rotate(-45deg); }
.ticks li b{ color:var(--white); font-weight:600; }
.ticks.peri li::before{ border-color:var(--periwinkle); }

.numlist{ list-style:none; margin-top:36px; display:flex; flex-direction:column; }
.numlist li{ display:grid; grid-template-columns:64px 1fr; gap:20px; padding:24px 0; border-top:1px solid var(--line); align-items:start; }
.numlist li .n{ font-family:var(--label); font-weight:700; font-size:12px; letter-spacing:.06em; color:var(--periwinkle); padding-top:5px; }
.numlist li h3{ font-size:19px; margin-bottom:8px; }
.numlist li p{ color:var(--mist); font-size:15px; max-width:70ch; }
@media (max-width:600px){ .numlist li{ grid-template-columns:1fr; gap:6px; } }

.platforms{ display:flex; flex-wrap:wrap; gap:8px; }
.pf{ font-family:var(--label); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--mist); border:1px solid var(--line-2); border-radius:3px; padding:9px 12px; }
.pf.hl{ color:var(--periwinkle); border-color:rgba(112,156,255,.45); }

/* ===== ENGINE ============================================================= */
.engine{ background:var(--panel); border:1px solid var(--line-2); border-radius:4px; padding:40px; display:grid; grid-template-columns:1.3fr 1fr; gap:36px; align-items:center; }
.engine .gl-big{ height:30px; width:auto; margin-bottom:20px; }
.engine h2{ font-size:clamp(26px,3vw,38px); } .engine p{ color:var(--mist); font-size:16px; margin-top:16px; }
section.blk.alt .engine{ background:var(--panel-2); }
@media (max-width:820px){ .engine{ grid-template-columns:1fr; gap:24px; padding:28px; } }

/* ===== FORMS ============================================================== */
.form-card{ background:var(--panel); border:1px solid var(--line-2); border-radius:4px; padding:32px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-family:var(--label); font-weight:700; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mist-dim); }
.field label .req{ color:var(--amber); }
.field input, .field select, .field textarea{
  font-family:var(--body); font-size:15px; color:var(--white); background:var(--black);
  border:1px solid var(--line-2); border-radius:3px; padding:13px 14px; width:100%;
  transition:border-color .15s, box-shadow .15s; }
.field textarea{ min-height:118px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:#4d5c80; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--periwinkle); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(255,180,0,.16); }
.field select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--mist-dim) 50%),linear-gradient(135deg,var(--mist-dim) 50%,transparent 50%); background-position:calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px); background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:40px; }
.field select option{ background:var(--black); color:var(--white); }
.form-foot{ display:flex; align-items:center; gap:16px; margin-top:24px; flex-wrap:wrap; }
.form-foot .fine{ font-family:var(--label); font-size:10.5px; color:var(--mist-dim); flex:1; min-width:200px; }
.form-status{ margin-top:18px; padding:14px 16px; border-radius:3px; font-size:14px; display:none; }
.form-status.show{ display:block; }
.form-status.ok{ background:rgba(255,180,0,.10); border:1px solid rgba(255,180,0,.4); color:var(--white); }
.form-status.err{ background:rgba(255,82,82,.10); border:1px solid rgba(255,82,82,.45); color:var(--white); }
.form-status b{ color:var(--amber); } .form-status.err b{ color:var(--red); }
.form-status a{ color:var(--periwinkle); text-decoration:underline; }
.form-status .btn{ text-decoration:none; }
/* per-field validation message returned by /api/demo-access */
.field-err{ font-family:var(--label); font-size:10.5px; letter-spacing:.02em; color:var(--red); }
.field input[aria-invalid="true"]{ border-color:var(--red); }
.field input[aria-invalid="true"]:focus{ box-shadow:0 0 0 3px rgba(255,82,82,.18); border-color:var(--red); }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }

/* ===== CTA ================================================================ */
.cta{ position:relative; overflow:hidden; text-align:center; padding:120px 0; border-top:1px solid var(--line);
  background:url("../img/home-cta.webp") center/cover no-repeat, var(--black); }
.cta::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 130% at 50% 100%, rgba(112,156,255,.16), transparent 62%),
    linear-gradient(180deg, rgba(0,5,15,.90), rgba(0,5,15,.80) 50%, rgba(0,5,15,.96)); }
.cta .wrap{ position:relative; z-index:2; }
.cta h2{ font-size:clamp(34px,5vw,72px); line-height:.96; letter-spacing:-0.01em; margin:26px auto 0; }
.cta h2 em{ font-style:normal; display:block; color:var(--black); paint-order:stroke fill;
  -webkit-text-stroke:3.6px var(--amber); filter:url(#knockout); }
/* No text-stroke support means no outline AND a near-black fill, i.e. invisible
   headlines. Fall all the way back to solid amber. */
@supports not ((-webkit-text-stroke: 1px red) or (text-stroke: 1px red)){
  .kin .out, .phero h1 em, .cta h2 em{ color:var(--amber); filter:none; }
}
.cta .spectrum{ margin:26px auto 0; }
.cta p{ color:var(--mist); font-size:16px; line-height:1.5; max-width:62ch; margin:26px auto 0; } .cta p b{ color:var(--white); }
.cta-actions{ display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.cta-fine{ margin-top:24px; font-family:var(--label); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--mist-dim); }
.cta .eyebrow{ justify-content:center; letter-spacing:.10em; }

/* ===== FOOTER ============================================================= */
footer{ background:var(--black); border-top:1px solid var(--line); padding:40px 0; }
.foot-in{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start; }
.foot-brand{ max-width:640px; }
.foot-brand .flb{ display:flex; align-items:baseline; gap:10px; }
.foot-brand .mk{ font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:.02em; }
.foot-brand .by{ font-family:var(--label); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--mist-dim); }
.foot-brand .pw{ display:flex; align-items:center; gap:10px; margin-top:12px; font-family:var(--label); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--mist-dim); }
.foot-brand .pw svg{ height:15px; width:auto; }
.foot-links{ display:flex; gap:28px; flex-wrap:wrap; align-items:center; }
.foot-links a{ font-family:var(--label); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--mist); }
.foot-links a:hover{ color:var(--amber); }
.foot-note{ margin-top:22px; font-family:var(--label); font-size:9.5px; line-height:1.65; color:var(--mist-dim); max-width:900px; }
.foot-note a{ color:var(--periwinkle); }

/* ===== UTIL =============================================================== */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
.center{ text-align:center; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ===== RESPONSIVE — hero ================================================== */
@media (max-width:1080px){
  .hero-in{ padding:80px 0 72px; }
  .hero-fig{ display:none; }          /* the panel collage needs real width */
  .hero-cap{ text-align:left; }
}
@media (max-width:720px){
  /* without the plate there is nothing to fill 880px — let the copy set it */
  .hero{ min-height:0; }
  .hero-in{ padding:72px 0 64px; }
  .hero .tel{ margin-bottom:26px; }
}

/* ===== REDUCED MOTION =====================================================
   Everything decorative must be silenced here. Extend this block if you add
   motion anywhere — it is part of the accessibility floor (see CLAUDE.md).  */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-floor,.hero-glow,.streak,
  .marquee-in,.tel .rec::before,
  .hiw-media .chrome::after,.hiw-media .rec::before,
  .s1-body,.s1-outline,.s1-scan,.s2-body,.s2-ring,.s3-scan,.s3-check,.s3-pass,
  .s4-bar-fill,.s4-play,.s4-ready,.s5-card,.s5-heart{ animation:none !important; }
  .s1-outline{ stroke-dashoffset:0; } .s1-body{ opacity:1; } .s3-check{ stroke-dashoffset:0; }
  .s3-pass,.s4-ready,.s5-card{ opacity:1; } .s4-bar-fill{ transform:scaleX(1); } .s5-card{ transform:none; } .s5-heart{ transform:scale(1); }
  /* the ticker stops rather than scrolls; it is a list, not a message */
  .marquee-in{ transform:none; }
  .marquee{ overflow-x:auto; }
  .car-body,.car-accent,.car-rim,.cfg-social{ transition:none; }
  .btn:hover,.reframe .col:hover,.val:hover,.why .card:hover,.router .seg:hover,
  .bento .tile:hover,.sector:hover{ transform:none; }
  .nav-links{ transition:none; }
  /* Autoplaying clips are motion — hold on the static SVG/anim fallback instead. */
  .hero-video,.hiw-video{ display:none !important; }
}

/* a disabled CTA must read as unavailable, not as a normal button that failed */
.btn:disabled{ opacity:.45; cursor:not-allowed; filter:grayscale(.35); }

/* ===== MODAL SHELL ========================================================
   Shared by the contact form and the legal pages. Height is dvh, not vh —
   on mobile Safari vh is the *largest* viewport, so the bottom of a tall
   panel would sit under the browser chrome and its close button with it. */
.modal-open{ overflow:hidden; }
.mdl{ position:fixed; inset:0; z-index:300; display:flex; align-items:center;
  justify-content:center; padding:min(4vw,34px); }
.mdl-backdrop{ position:absolute; inset:0; background:rgba(0,5,15,.86); backdrop-filter:blur(3px);
  animation:mdlFade .18s ease-out; }
.mdl-panel{ position:relative; z-index:1; display:flex; flex-direction:column;
  width:min(720px,100%); max-height:100%; overflow:hidden;
  background:var(--ink); border:1px solid var(--line-2); border-radius:8px;
  box-shadow:0 50px 120px -40px rgba(0,0,0,.9);
  animation:mdlRise .22s cubic-bezier(.2,.7,.3,1); }
.mdl-body{ overflow:auto; padding:30px 34px 34px; }
.mdl-x{ position:absolute; top:12px; right:12px; z-index:2;
  width:32px; height:32px; display:grid; place-items:center;
  background:var(--panel); color:var(--mist); border:1px solid var(--line-2);
  border-radius:4px; font-size:13px; cursor:pointer; transition:.15s; }
.mdl-x:hover{ color:var(--black); background:var(--amber); border-color:var(--amber); }
@keyframes mdlFade{ from{ opacity:0 } }
@keyframes mdlRise{ from{ opacity:0; transform:translateY(14px) } }
@media (max-width:700px){
  .mdl{ padding:0; }
  .mdl-panel{ width:100%; height:100dvh; max-height:none; border:0; border-radius:0; }
  .mdl-body{ padding:26px 20px 30px; }
}

/* ===== CONTACT FORM ======================================================= */
.cf-h{ font-family:var(--display); font-weight:900; font-size:32px; line-height:1.02;
  letter-spacing:-0.015em; margin:14px 0 18px; }
.cf-intent{ display:flex; flex-wrap:wrap; gap:8px; }
.cf-seg{ font-family:var(--label); font-weight:700; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mist); background:transparent;
  border:1px solid var(--line-2); border-radius:32px; padding:9px 15px; cursor:pointer;
  transition:.15s; }
.cf-seg:hover{ color:var(--white); border-color:var(--periwinkle); }
.cf-seg.on{ color:var(--black); background:var(--amber); border-color:var(--amber); }
.cf-lede{ margin:16px 0 22px; font-size:14.5px; line-height:1.6; color:var(--mist); }
.cf-form{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.cf-form .field.wide, .cf-actions{ grid-column:1 / -1; }
.cf-form .field label i{ font-style:normal; color:var(--mist-dim); text-transform:none; letter-spacing:0; }
.cf-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px; }
.cf-done{ font-size:15px; line-height:1.65; color:var(--mist); }
.cf-done b{ color:var(--white); display:block; margin-bottom:6px; }
@media (max-width:620px){ .cf-form{ grid-template-columns:1fr; } }

/* the consent sentence must read as prose, not as a field caption.
   Selector has to out-specify `.field label` (0,1,1) — plain `.cbx` is
   (0,1,0) and loses wherever it sits in the file, hence `label.cbx`. */
.field label.cbx{ display:flex; align-items:flex-start; gap:11px; cursor:pointer;
  font-family:var(--body); font-weight:400; font-size:13px; line-height:1.5;
  letter-spacing:0; text-transform:none; color:var(--mist); }
.field label.cbx input[type="checkbox"]{ flex:none; width:18px; height:18px; margin:1px 0 0;
  accent-color:var(--amber); cursor:pointer; }
.field label.cbx a{ color:var(--periwinkle); text-decoration:underline; }
.form-hint{ margin:0; font-family:var(--label); font-size:10.5px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--mist-dim); }
.form-status.err{ color:var(--red); }
.form-status.err a{ color:var(--amber); }

/* ===== LEGAL DOCUMENT (in a modal, and on its own page) =================== */
.legal-doc h1{ font-size:30px; margin-bottom:6px; }
.legal-doc h2{ font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:0;
  margin:26px 0 8px; color:var(--white); }
.legal-doc p, .legal-doc li{ font-size:14px; line-height:1.7; color:var(--mist); }
.legal-doc p{ margin:0 0 12px; }
.legal-doc ul{ margin:0 0 12px; padding-left:20px; }
.legal-doc li{ margin-bottom:6px; }
.legal-doc a{ color:var(--periwinkle); text-decoration:underline; }
.legal-doc .updated{ font-family:var(--label); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mist-dim); margin-bottom:22px; }
.legal-doc .wrap{ padding:0; max-width:none; }
.legal-doc .blk{ padding:0; }
.legal-loading{ font-family:var(--label); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mist-dim); }
.legal-page main{ max-width:780px; margin:0 auto; padding:70px var(--gutter) 90px; }

/* footer legal row sits under the main link row, quieter than it */
.foot-legal{ margin-top:14px; }
.foot-links.legal a{ color:var(--mist-dim); }
.foot-links.legal a:hover{ color:var(--mist); }

@media (prefers-reduced-motion: reduce){
  .mdl-backdrop, .mdl-panel{ animation:none; }
}

/* ===== 2026-09-04 RELAYOUT ================================================
   Components introduced by the new Figma set (LATEST VERSION, 967:12071).
   The comps set every display line in uppercase; the markup stays sentence
   case and the transform lives here, because the casing is presentation and
   some screen readers spell short all-caps strings out letter by letter. */
.hero h1, .cta h2, .phero h1{ text-transform:uppercase; }
/* The comp sets this in three lines, and the explicit <br>s in the markup say
   where. At 90px "FROM FAN-DESIGNED" is wider than the 600px copy column, so
   the h1 is allowed out of it and over the figure — which is what the comp
   does too. Capped against the viewport so it never forces a sideways scroll. */
.hero h1{ font-size:clamp(38px,6.2vw,90px); font-weight:800; letter-spacing:-0.02em;
  position:relative; z-index:3; max-width:940px; }
.cta h2{ font-weight:900; }
.phero h1{ font-size:clamp(34px,4.6vw,58px); font-weight:800; line-height:1.0; letter-spacing:-0.015em; }

/* the big ghosted ordinal on router cards and pillars */
.router .seg .num{ font-family:var(--display); font-weight:900; font-size:52px;
  line-height:1; color:var(--line-2); margin-top:10px; }

/* --- pillars: four numbered capability blocks ---------------------------- */
.pillars{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:44px; }
.pillar{ position:relative; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line-2); border-radius:16px; padding:30px 28px; }
.pillar .vn{ font-family:var(--label); font-weight:700; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--periwinkle); }
/* .tag's amber chip styling is scoped to .bento, so the pillars need their
   own copy — without it these render as plain text, not chips. */
.pillar .tag{ align-self:flex-start; font-family:var(--label); font-weight:700; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--black); background:var(--amber);
  padding:4px 9px; border-radius:3px; white-space:nowrap; }
.pillar .num{ font-family:var(--display); font-weight:900; font-size:64px; line-height:1;
  color:var(--line-2); margin:6px 0 2px; }
.pillar h3{ font-size:23px; line-height:1.08; margin:0 0 12px; }
.pillar > p{ color:var(--mist); font-size:15px; line-height:1.55; margin:0 0 18px; }
.pillar ul{ list-style:none; margin:auto 0 0; padding:0; display:grid; gap:9px; }
.pillar li{ display:flex; gap:10px; align-items:baseline;
  color:var(--mist); font-size:12.5px; line-height:1.45; }
.pillar li::before{ content:"▹"; color:var(--periwinkle); font-weight:700; flex:none; }
.pillar .hd{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
@media (max-width:820px){ .pillars{ grid-template-columns:1fr; } }

/* --- reframe: the manual way vs the productised way ---------------------- */
.reframe{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:44px; }
.rf{ background:var(--panel); border:1px solid var(--line-2); border-radius:16px; padding:30px 28px; }
.rf.now{ border-color:var(--amber); }
.rf-lab{ font-family:var(--label); font-weight:700; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mist-dim); }
.rf.now .rf-lab{ color:var(--amber); }
.rf h3{ font-size:22px; margin:10px 0 18px; }
.rf ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.rf li{ display:flex; gap:12px; align-items:baseline; color:var(--mist); font-size:14px; line-height:1.5; }
.rf li i{ font-style:normal; font-weight:700; font-size:13px; flex:none; }
.rf.old li i{ color:var(--red); }
.rf.now li i{ color:var(--amber); }
@media (max-width:820px){ .reframe{ grid-template-columns:1fr; } }

/* --- three oversized signal numbers -------------------------------------- */
.bigstats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:44px; }
.bigstat{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px 26px; }
.bigstat b{ display:block; font-family:var(--display); font-weight:900;
  font-size:clamp(34px,4.4vw,52px); line-height:1; color:var(--amber); }
.bigstat span{ display:block; margin-top:12px; color:var(--mist); font-size:14px; line-height:1.45; }
@media (max-width:760px){ .bigstats{ grid-template-columns:1fr; } }

/* --- case study ----------------------------------------------------------- */
.case-in{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
/* Figma 1004:12100 — the shield and the title are one horizontal row, 32px
   apart, top-aligned: two 36px lines of title stand exactly as tall as the
   83px shield. Added 2026-09-04 when Bryan put the mark into the comp. */
.case-head{ display:flex; align-items:flex-start; gap:32px; margin:22px 0 0; }
.case-logo{ flex:none; width:74px; height:auto; }
.case-copy h2{ font-size:clamp(26px,3vw,34px); line-height:1.06; margin:0; }
.case-lede{ color:var(--white); font-size:16px; line-height:1.55; margin:18px 0 16px; }
.case-list{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:10px; }
.case-list li{ display:flex; gap:10px; align-items:baseline; color:var(--mist); font-size:15px; line-height:1.5; }
.case-list li::before{ content:"▹"; color:var(--periwinkle); font-weight:700; flex:none; }
/* The case study figure is ONE exported image, not a rebuild. In the comp
   (group 928:3468) it is an eight-layer collage — glow, two plates, three
   product panels, a caption and the car cut-out on top — whose stacking and
   offsets carry no meaning worth reproducing in CSS. Exporting the group is
   pixel-exact and leaves nothing to drift. */
.case-fig .case-shot{ display:block; width:100%; aspect-ratio:1351/1313;
  background:url("../img/home-case.webp") center/contain no-repeat; }
/* Consulting has its own collage (group 928:3144) — same construction, its
   own artwork and its own Animoca line in the copy beside it. */
.case-fig .case-shot.consult{ background-image:url("../img/consult-case.webp"); }
@media (max-width:900px){
  .case-in{ grid-template-columns:1fr; gap:34px; }
  .case-head{ gap:20px; }
  .case-logo{ width:60px; }
  .case-fig{ order:-1; }
}

/* --- book a demo: copy rail + request form ------------------------------- */
.book{ padding-top:70px; }
.book-in{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.book-copy h1{ font-size:clamp(36px,4.4vw,58px); margin:22px 0 0; text-transform:uppercase; font-weight:900; }
.book-lb{ font-family:var(--label); font-weight:700; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--periwinkle); margin:32px 0 14px; }
.book-see{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.book-see li{ display:flex; gap:14px; align-items:baseline; }
.book-see b{ font-family:var(--label); font-weight:700; font-size:11px; letter-spacing:.06em;
  color:var(--amber); flex:none; padding-top:2px; }
.book-see i{ display:block; font-style:normal; font-weight:600; font-size:14.5px; color:var(--white); }
.book-see span{ color:var(--mist); font-size:13.5px; line-height:1.5; }
.book-who{ color:var(--mist); font-size:14.5px; line-height:1.6; margin:0; }
.book-form{ background:var(--panel); border:1px solid var(--line-2); border-radius:16px; padding:28px 26px 26px; }
.book-form .fh{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:22px; }
.book-form .fh .book-lb{ margin:0; }
.book-form .dots{ display:flex; gap:5px; }
.book-form .dots i{ width:7px; height:7px; border-radius:50%; background:var(--line-2); }
.book-form select{ width:100%; }
.book-fine{ margin:18px 0 0; font-family:var(--label); font-size:10px; letter-spacing:.03em;
  line-height:1.6; color:var(--mist-dim); }
@media (max-width:900px){
  .book-in{ grid-template-columns:1fr; gap:40px; }
}

/* ===== HOW IT WORKS — Figma 928:3848 =====================================
   Full-bleed plate + solid/outline headline + scrubber, then five sectors
   alternating image and copy (S1 S3 S5 image-left, S2 S4 image-right).

   Every .hiw-shot layers its export OVER a CSS scene rather than instead of
   it — the same convention as the bento tiles. A missing file falls back to
   the gradient instead of a broken-image box, which is what makes dropping
   new exports in a pure file copy. */
.hiw-hero{ position:relative; display:flex; align-items:center; overflow:hidden;
  min-height:min(592px,80vh); padding:96px 0 72px; background:var(--black); }
.hiw-plate{ position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(90deg, rgba(0,5,15,.96) 0%, rgba(0,5,15,.72) 46%, rgba(0,5,15,.15) 78%),
    linear-gradient(0deg, rgba(0,5,15,.92), rgba(0,5,15,0) 55%),
    url("../img/hiw-header.webp") center right / cover no-repeat; }
.hiw-hero .wrap{ position:relative; z-index:2; }
.hiw-hero h1{ font-size:clamp(34px,4.6vw,60px); font-weight:800; line-height:1.04;
  letter-spacing:-0.015em; margin:20px 0 0; max-width:900px; }
.hiw-rail{ margin-top:44px; max-width:1240px; }
.hiw-rail .rail-node .s{ white-space:nowrap; }

.hiw-sec{ padding:96px 0; }
.hiw-in{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.hiw-in.img-right .hiw-fig{ order:2; }
/* Each well carries its export's OWN aspect ratio. The Figma exports are the
   bounding box of the composition, not the 600x360 imw frame — the panels and
   cards overflow it — so a shared 5:3 well would letterbox every one of them.
   Ratios below are the real pixel dimensions of the files in assets/img/. */
.hiw-shot{ display:block; width:100%; aspect-ratio:5/3;
  background-repeat:no-repeat; background-position:center; background-size:contain; }
/* No fallback scene behind these (removed 2026-09-04, Bryan's call): the
   exports are transparent cut-outs and a gradient panel showed through them
   as a visible slab. A missing file now leaves the well empty rather than
   filled — which is the intent, but it does mean a 404 is silent. */
.hiw-s1{ aspect-ratio:987/699;   background-image:url("../img/hiw-s1.webp"); }
.hiw-s2{ aspect-ratio:1200/810;  background-image:url("../img/hiw-s2.webp"); }
.hiw-s3{ aspect-ratio:1200/893;  background-image:url("../img/hiw-s3.webp"); }
.hiw-s4{ aspect-ratio:1236/1034; background-image:url("../img/hiw-s4.webp"); }
.hiw-s5{ aspect-ratio:1200/921;  background-image:url("../img/hiw-s5.webp"); }

.hiw-tc h2{ font-size:clamp(26px,2.6vw,34px); line-height:1.06; margin:18px 0 16px; }
.hiw-tc > p{ color:var(--mist); font-size:16px; line-height:1.6; margin:0; }
/* ⚠️ These two are children of .hiw-tc, so `.hiw-tc > p{ margin:0 }` (0,1,1)
   outranks a bare class (0,1,0) and flattens their margins. .hiw-chip had been
   patched with !important; .pub-lb had not, so its 30px top margin was silently
   dropped and the "Publishes to" label collided with the chip above it (Bryan,
   2026-09-04). Both now qualify with the element+class instead, which outranks
   the reset honestly and lets the !important go. */
.hiw-tc > p.hiw-chip{ display:inline-block; margin-top:22px; font-family:var(--label);
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--periwinkle);
  border:1px solid var(--line-2); border-radius:4px; padding:8px 12px; }

.hiw-tc > p.pub-lb{ margin:34px 0 14px; font-family:var(--label); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mist-dim); }
.pub-row{ list-style:none; display:flex; gap:14px; margin:0; padding:0; }
.pub-row svg{ width:22px; height:22px; fill:none; stroke:var(--periwinkle);
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; display:block; }
.pub-row li{ width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:50%; background:var(--panel); }

@media (max-width:900px){
  .hiw-in{ grid-template-columns:1fr; gap:34px; }
  .hiw-in.img-right .hiw-fig{ order:0; }
  .hiw-sec{ padding:68px 0; }
  .hiw-plate{ background-position:center; }
  .hiw-plate::after{ content:""; position:absolute; inset:0; background:rgba(0,5,15,.5); }
}


/* --- platform icons on the Output bento tile (Figma 931:4429-4435) -------
   Real 3D icon art from the comp, not the flat SVGs used in the publish row
   on How it works. They sit over .tile-photo.output. */
.tile-icons{ position:relative; z-index:2; display:flex; gap:10px; margin-top:auto;
  padding-top:18px; }
.tile-icons span{ width:46px; height:46px; flex:none; background-size:contain;
  background-position:center; background-repeat:no-repeat;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
.tile-icons .ig{ background-image:url("../img/home-icon-instagram.webp"); }
.tile-icons .tt{ background-image:url("../img/home-icon-tiktok.webp"); }
.tile-icons .xx{ background-image:url("../img/home-icon-x.webp"); }
.tile-icons .yt{ background-image:url("../img/home-icon-youtube.webp"); }
@media (max-width:700px){ .tile-icons span{ width:38px; height:38px; } }