/* ==========================================================================
   ZORM.IO HOMEPAGE — "Trailer" (2026-10-06)
   1) reel.css      — The Long Reel concept (tokens, header, reel, UI fragments, practice, close, footer)
   2) trailer.css   — the Trailer hero (layout/look). Its timeline is trailer-timeline.css (generated, separate file)
   3) production    — header additions, mobile menu, chat clearances, carried-over sections, a11y
   Fonts are self-hosted in /assets/fonts/ (no Google Fonts).
   ========================================================================== */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url('/assets/fonts/space-grotesk.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/assets/fonts/inter.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:300 900; font-display:swap; src:url('/assets/fonts/fraunces.woff2') format('woff2'); }
/* Static Fraunces Italic 500 (latin), declared across 300–600 so the browser never fakes a weight */
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:300 600; font-display:swap; src:url('/assets/fonts/fraunces-italic.woff2') format('woff2'); }

/* ---------- 1) reel.css ---------- */
/* ==========================================================================
   ZORM — "The Long Reel" homepage concept (2026-10)
   Static HTML/CSS/vanilla JS. No build step. No WebGL.
   Sections: tokens · base · header · hero/wordmark · reel (3 modes) · plates ·
             frames · rail · UI fragments (7) · practice · closing band · footer
   ========================================================================== */


/* Animated brand-takeover tokens (interpolate because they are registered) */
@property --bg  { syntax:'<color>'; inherits:true; initial-value:#0b0e09; }
@property --ink { syntax:'<color>'; inherits:true; initial-value:#eef3e4; }
@property --acc { syntax:'<color>'; inherits:true; initial-value:#c8ff3d; }

:root{
  --paper:#f3efe7; --paper-2:#e9e3d7; --rule:rgba(16,14,12,.14);
  --ink0:#0f0e0c; --ink-2:#4f4a42; --ink-3:#7a736a;
  --or:#ff5607; --or2:#ff8c00; --grad:linear-gradient(135deg,#ff5607 0%,#ff8c00 100%);
  --sg:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --fr:'Fraunces',Georgia,'Times New Roman',serif;
  --in:'Inter',ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
  --gut:clamp(16px,3.4vw,72px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-in:cubic-bezier(.16,1,.3,1);
  --f:round(down, 9vw, 2px);     /* width of the orange film frame between plates (whole px: no hairline bleed) */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; background:var(--paper); color:var(--ink0); -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{ margin:0; overflow-x:clip; background:var(--paper); color:var(--ink0); font:400 16px/1.55 var(--sg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--or); outline-offset:3px; border-radius:4px; }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.skip{ position:fixed; left:12px; top:-60px; z-index:100; background:var(--ink0); color:#fff; padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:600; }
.skip:focus{ top:12px; }
em.fr, .fr-i{ font-family:var(--fr); font-style:italic; font-weight:340; letter-spacing:-.01em; font-variation-settings:'opsz' 144; }

/* ---------- Header (scrolls away, Instrument-style pills) ---------- */
.top{ position:relative; z-index:5; padding:18px var(--gut) 0; }
.top__nav{ display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; gap:14px; }
.top__brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font:700 19px/1 var(--sg); letter-spacing:-.02em; }
.top__brand img{ width:22px; height:auto; }
.pills{ display:flex; gap:6px; list-style:none; margin:0; padding:0; }
.pills--r{ justify-content:flex-end; }
.pills a{ display:inline-flex; align-items:center; height:32px; padding:0 14px; border-radius:999px; background:rgba(15,14,12,.07); text-decoration:none; font:600 11.5px/1 var(--sg); letter-spacing:.08em; text-transform:uppercase; transition:background .2s var(--ease), color .2s var(--ease); }
.pills a:hover{ background:var(--ink0); color:var(--paper); }
.pills sup{ font-size:.72em; margin-left:2px; color:var(--or); font-weight:700; vertical-align:super; line-height:0; }
.top__fact{ margin:0; text-align:center; font:500 12.5px/1.3 var(--sg); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); }
.top__fact b{ color:var(--ink0); font-weight:700; }
.pills .pill--cta{ background:var(--grad); color:#140700; box-shadow:0 6px 18px -8px rgba(255,86,7,.6); }
.pills .pill--cta:hover{ background:var(--ink0); color:#fff; }

/* Floating CTA that persists after the hero */
.float-cta{ position:fixed; z-index:40; right:var(--gut); top:16px; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px; border-radius:999px; background:var(--grad); color:#140700; text-decoration:none; font:700 12px/1 var(--sg); letter-spacing:.08em; text-transform:uppercase; box-shadow:0 10px 30px -12px rgba(0,0,0,.45); opacity:0; transform:translateY(-10px); pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease); }
.float-cta.on{ opacity:1; transform:none; pointer-events:auto; }
.float-cta:hover{ background:#140700; color:#fff; }

/* ---------- Hero: the wordmark ---------- */
.hero{ position:relative; padding:clamp(18px,2.6vw,44px) var(--gut) 0; display:flex; flex-direction:column; min-height:calc(100svh - 50px); }
.hero .mark{ margin-block:auto; }
.mark{ margin:0; font-weight:700; font-family:var(--sg); color:var(--ink0); line-height:1; }
.mark__word{ display:block; white-space:nowrap; font-size:var(--wm,29.5vw); letter-spacing:-.045em; line-height:.8; margin-left:var(--wm-shift,-.035em); padding-top:.04em; }
.mark__word .o{ position:relative; color:transparent; }
/* Aperture sits exactly on the O glyph's ink box (JS measures; these are fallbacks) */
.ap{ position:absolute; left:var(--apx,.045em); top:var(--apy,.205em); width:var(--apw,.69em); height:var(--aph,.715em); border-radius:50%; background:linear-gradient(150deg,#ff8c00 0%,#ff5607 70%); }
.ap__win{ position:absolute; inset:var(--ring-y,.112em) var(--ring-x,.128em); border-radius:50%; overflow:hidden; background:#0b0e09; isolation:isolate; transform:translateZ(0); }
.ap__slide{ position:absolute; inset:0; opacity:0; transition:opacity .7s var(--ease), transform 2.8s linear; transform:scale(1.08); }
.ap__slide.on{ opacity:1; transform:scale(1); }
.ap__slide .ui{ position:absolute; left:0; top:0; transform-origin:0 0; pointer-events:none; }
.ap__glint{ position:absolute; inset:var(--ring-y,.112em) var(--ring-x,.128em); border-radius:50%; box-shadow:inset 0 0 0 .006em rgba(0,0,0,.35), inset 0 .03em .05em rgba(0,0,0,.28); pointer-events:none; z-index:2; }

.hero__row{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 clamp(16px,1.6vw,32px); align-items:end; margin-top:clamp(18px,2.4vw,44px); padding-bottom:clamp(18px,2.2vw,36px); border-bottom:1px solid var(--rule); }
.lede{ grid-column:1 / span 6; margin:0; font:500 clamp(26px,2.75vw,54px)/1.06 var(--sg); letter-spacing:-.03em; text-wrap:balance; }
.lede em{ font-family:var(--fr); font-style:italic; font-weight:330; letter-spacing:-.015em; }
.lede em::after{ content:''; }
.now{ grid-column:7 / span 3; margin:0; padding:0; list-style:none; font:500 13px/1 var(--sg); }
.now__label{ display:block; font:600 10.5px/1 var(--sg); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; }
.now ol{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; }
.now a{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink-3); transition:color .3s var(--ease); white-space:nowrap; }
.now a i{ width:9px; height:9px; border-radius:50%; background:var(--c); box-shadow:0 0 0 1px rgba(0,0,0,.18) inset; flex:none; opacity:.55; transition:opacity .3s, transform .3s var(--ease); }
.now a.on{ color:var(--ink0); }
.now a.on i{ opacity:1; transform:scale(1.35); }
.now small{ font:600 9.5px/1 var(--sg); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--rule); border-radius:999px; padding:3px 6px; }
.cta-block{ grid-column:10 / span 3; justify-self:end; text-align:left; }
.btn{ display:inline-flex; align-items:center; gap:14px; height:62px; padding:0 26px 0 30px; border-radius:999px; background:var(--grad); color:#140700; text-decoration:none; font:700 17px/1 var(--sg); letter-spacing:-.005em; box-shadow:0 14px 34px -14px rgba(255,86,7,.75); transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; white-space:nowrap; }
.btn .arr{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#140700; color:#ff8c00; font-size:16px; transition:transform .25s var(--ease); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 20px 40px -14px rgba(255,86,7,.85); }
.btn:hover .arr{ transform:translateX(3px); }
.cta-note{ margin:12px 0 0; max-width:30ch; font:400 13px/1.45 var(--sg); color:var(--ink-2); }
.hero__foot{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 0 18px; font:600 10.5px/1 var(--sg); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.hero__foot a{ text-decoration:none; color:var(--ink0); }
.hero__foot a:hover{ color:var(--or); }
.hero__foot .reel-cue{ display:inline-flex; align-items:center; gap:10px; }
.hero__foot .reel-cue b{ display:inline-block; width:46px; height:1px; background:currentColor; position:relative; }
.hero__foot .reel-cue b::after{ content:''; position:absolute; right:0; top:-3px; border:3.5px solid transparent; border-left:5px solid currentColor; border-right:0; }

/* ==========================================================================
   THE REEL — three modes
   1) pinned + brand takeover (scroll-driven, Chrome/Safari 26, motion OK, ≥900px)
   2) scroll-snap carousel with arrows (≥900px, no timeline support / reduced motion)
   3) vertical stack (<900px)
   ========================================================================== */
.reel{ position:relative; background:#0b0e09; }
.skip-reel{ position:absolute; z-index:20; left:var(--gut); top:12px; height:36px; display:inline-flex; align-items:center; padding:0 14px; border-radius:999px; background:var(--ink0); color:#fff; text-decoration:none; font:600 12px/1 var(--sg); }
.skip-reel:not(:focus){ clip-path:inset(50%); opacity:0; }
.stage{ position:relative; }
.track{ display:flex; }
.storyboard{ display:none; }

/* Plates carry their own palette (used directly in modes 2 + 3 and in the storyboard) */
.plate{ --a:var(--pacc); position:relative; background:var(--pbg); color:var(--pink); }
.p-sentinel{ --pbg:#0b0e09; --pink:#eef3e4; --pacc:#c8ff3d; }
.p-zormdesk{ --pbg:#5ea0ff; --pink:#06101f; --pacc:#ffffff; }
.p-saving  { --pbg:#0e1a2c; --pink:#f3ecdc; --pacc:#c8a862; }
.p-beehive { --pbg:#c3f832; --pink:#20201f; --pacc:#e08a00; }
.p-silox   { --pbg:#0d0b08; --pink:#efe6d4; --pacc:#c9a15b; }
.p-glitch  { --pbg:#ff2bd6; --pink:#0b0410; --pacc:#16f2ff; }
.p-life    { --pbg:#cfdfd6; --pink:#101815; --pacc:#0a7d6c; }

.plate__grid{ height:100%; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 clamp(16px,1.6vw,32px); align-items:center; padding:clamp(64px,8vh,96px) var(--gut) clamp(92px,12vh,120px); }
.plate__copy{ grid-column:1 / span 5; align-self:center; max-width:640px; }
.plate__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 clamp(16px,2.6vh,28px); font:600 11.5px/1 var(--sg); letter-spacing:.14em; text-transform:uppercase; }
.plate__meta .num{ font-variant-numeric:tabular-nums; }
.plate__meta .num span{ opacity:.5; }
.plate__meta .status{ display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 10px; border-radius:999px; border:1px solid color-mix(in srgb, currentColor 30%, transparent); }
.plate__meta .status i{ width:7px; height:7px; border-radius:50%; background:var(--a); box-shadow:0 0 0 3px color-mix(in srgb, var(--a) 25%, transparent); }
.plate__meta .cat{ opacity:.66; letter-spacing:.12em; }
.plate__name{ margin:0; font:700 clamp(60px,6.9vw,150px)/.86 var(--sg); letter-spacing:-.05em; text-wrap:balance; }
.plate__tag{ margin:clamp(12px,1.8vh,20px) 0 0; max-width:21ch; font:330 clamp(22px,1.95vw,38px)/1.12 var(--fr); font-style:italic; letter-spacing:-.012em; font-variation-settings:'opsz' 144; }
.verbs{ list-style:none; margin:clamp(20px,3.4vh,36px) 0 0; padding:0; max-width:560px; }
.verbs li{ display:grid; grid-template-columns:112px 1fr; gap:18px; padding:13px 0 14px; border-top:1px solid color-mix(in srgb, currentColor 22%, transparent); font:400 15.5px/1.45 var(--sg); }
.verbs li:last-child{ border-bottom:1px solid color-mix(in srgb, currentColor 22%, transparent); }
.verbs b{ display:flex; align-items:baseline; gap:8px; font:700 11.5px/1.9 var(--sg); letter-spacing:.14em; text-transform:uppercase; }
.verbs b::before{ content:''; width:7px; height:7px; flex:none; transform:translateY(-1px); background:var(--a); border-radius:1px; }
.verbs li:last-child b::before{ border-radius:50%; animation:pulse 2.4s var(--ease) infinite; }
.verbs span{ opacity:.86; text-wrap:pretty; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--a) 60%, transparent);} 60%{ box-shadow:0 0 0 7px transparent; } }
.plate__links{ display:flex; flex-wrap:wrap; gap:8px 26px; margin:clamp(18px,2.8vh,30px) 0 0; font:600 14.5px/1 var(--sg); }
.plate__links a{ text-decoration:none; padding-bottom:5px; background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat; transition:background-size .3s var(--ease); }
.plate__links a:hover{ background-size:0 1.5px; background-position:100% 100%; }
.plate__ui{ grid-column:6 / span 7; margin:0; align-self:center; justify-self:center; width:100%; display:flex; flex-direction:column; align-items:center; }
.plate__ui figcaption{ margin-top:14px; align-self:flex-end; font:500 10.5px/1.2 var(--sg); letter-spacing:.12em; text-transform:uppercase; opacity:.6; }
.fit{ position:relative; }
.fit > .ui{ position:absolute; left:0; top:0; transform-origin:0 0; transform:scale(var(--s,1)); }

/* Orange film frame between plates */
.frame{ position:relative; flex:0 0 var(--f); background:linear-gradient(180deg,#ff5607,#ff8c00); color:#160800; display:flex; flex-direction:column; align-items:center; justify-content:space-between; overflow:hidden; }
.frame::before,.frame::after{ content:''; position:absolute; left:50%; translate:-50% 0; width:34%; height:100%; background:repeating-linear-gradient(180deg, #1a0a02 0 22px, transparent 22px 40px); border-radius:4px; opacity:.88; }
.frame::before{ left:22%; width:16%; }
.frame::after{ left:78%; width:16%; }
.frame__edge{ position:absolute; top:50%; left:50%; translate:-50% -50%; rotate:-90deg; white-space:nowrap; font:700 clamp(12px,1vw,16px)/1 var(--sg); letter-spacing:.32em; text-transform:uppercase; background:linear-gradient(90deg,#ff6a0a,#ff7d06); padding:10px 18px; z-index:1; }
.frame__edge img{ display:inline-block; box-sizing:content-box; width:13px; height:auto; vertical-align:-5px; margin-right:12px; rotate:90deg; padding:4px 5px; border-radius:5px; background:#160800; }

/* Progress rail */
.rail{ display:none; }
.arrows{ display:none; }

/* ---- Mode 2: carousel (≥900px default) ---- */
@media (min-width:900px){
  .stage{ height:100vh; height:100svh; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; container-type:size; }
  .stage::-webkit-scrollbar{ display:none; }
  .track{ height:100%; width:max-content; }
  .plate{ flex:0 0 100cqw; height:100%; scroll-snap-align:start; }
  .rail{ display:flex; position:absolute; z-index:6; left:var(--gut); right:var(--gut); bottom:clamp(22px,3.4vh,34px); align-items:flex-end; gap:24px; }
  .arrows{ display:flex; gap:8px; position:absolute; z-index:7; right:var(--gut); bottom:calc(clamp(22px,3.4vh,34px) + 52px); }
  .arrows button{ width:46px; height:46px; border-radius:50%; border:1px solid color-mix(in srgb, var(--rail-ink,#fff) 40%, transparent); background:transparent; color:var(--rail-ink,#fff); font:600 18px/1 var(--sg); cursor:pointer; backdrop-filter:none; }
  .arrows button:hover{ background:#ff5607; border-color:#ff5607; }
  /* In carousel mode the rail lives inside the scroller's viewport: make it sticky-left */
  .stage-wrap{ position:relative; }
}
.stage-wrap{ position:relative; }
.rail__nav{ flex:1; position:relative; }
.rail__notches{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; list-style:none; margin:0; padding:0; }
.rail__notches button{ all:unset; cursor:pointer; display:block; padding-top:12px; position:relative; font:600 11px/1.1 var(--sg); letter-spacing:.1em; text-transform:uppercase; color:var(--rail-ink,#fff); opacity:.55; transition:opacity .25s var(--ease); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail__notches button::before{ content:''; position:absolute; left:0; right:0; top:0; height:2px; background:currentColor; opacity:.35; }
.rail__notches button::after{ content:''; position:absolute; left:0; top:-3px; width:2px; height:8px; background:currentColor; }
.rail__notches button span{ font-variant-numeric:tabular-nums; margin-right:8px; opacity:.6; }
.rail__notches button:hover, .rail__notches button[aria-current="true"]{ opacity:1; }
.rail__notches button[aria-current="true"]::before{ opacity:1; height:3px; }
.rail__notches button:focus-visible{ outline:2px solid #ff5607; outline-offset:4px; }
.rail__skip{ flex:none; display:inline-flex; align-items:center; gap:10px; height:34px; padding:0 16px; border-radius:999px; background:var(--grad); color:#140700; text-decoration:none; font:700 11px/1 var(--sg); letter-spacing:.1em; text-transform:uppercase; }
.rail__skip:hover{ background:#fff; }

/* ---- Mode 1: pinned + brand takeover ---- */
@supports (animation-timeline: view()){
  @media (min-width:900px) and (prefers-reduced-motion:no-preference){
    .reel{ view-timeline:--reel block; background:transparent; }
    .stage-wrap{ position:sticky; top:0; height:100vh; z-index:2; background:var(--bg); color:var(--ink);
            animation:takeover linear both; animation-timeline:--reel; animation-range:contain 0% contain 100%; }
    .stage{ position:relative; height:100%; overflow:hidden; scroll-snap-type:none; }
    .track{ animation:slide linear both; animation-timeline:--reel; animation-range:contain 0% contain 100%; will-change:transform; }
    .stage .plate{ --a:var(--acc); background:transparent; color:inherit; }
    .rail{ --rail-ink:var(--ink); }
    .rail .rail__fill{ display:block; }
    .arrows{ display:none; }
    .storyboard{ display:block; position:relative; z-index:1; min-height:600vh; }
    .storyboard .plate{ height:100vh; border-top:10px solid #ff5607; }
  }
}
.rail__fill{ display:none; position:absolute; left:0; right:0; top:0; height:3px; background:var(--grad); transform-origin:0 50%; transform:scaleX(0); animation:fill linear both; animation-timeline:--reel; animation-range:contain 0% contain 100%; }
@keyframes fill{ to{ transform:scaleX(1); } }

/* Seven plates, held ±3.5% around each stop, eased between (timing fn applies per segment) */
@keyframes slide{
  0%,3.5%        { transform:translateX(0); }
  13.17%,20.17%  { transform:translateX(calc(-1 * (100cqw + var(--f)))); }
  29.83%,36.83%  { transform:translateX(calc(-2 * (100cqw + var(--f)))); }
  46.5%,53.5%    { transform:translateX(calc(-3 * (100cqw + var(--f)))); }
  63.17%,70.17%  { transform:translateX(calc(-4 * (100cqw + var(--f)))); }
  79.83%,86.83%  { transform:translateX(calc(-5 * (100cqw + var(--f)))); }
  96.5%,100%     { transform:translateX(calc(-6 * (100cqw + var(--f)))); }
}
@keyframes takeover{
  0%,5.9%        { --bg:#0b0e09; --ink:#eef3e4; --acc:#c8ff3d; }
  10.75%,22.6%   { --bg:#5ea0ff; --ink:#06101f; --acc:#ffffff; }
  27.4%,39.25%   { --bg:#0e1a2c; --ink:#f3ecdc; --acc:#c8a862; }
  44.1%,55.9%    { --bg:#c3f832; --ink:#20201f; --acc:#e08a00; }
  60.75%,72.6%   { --bg:#0d0b08; --ink:#efe6d4; --acc:#c9a15b; }
  77.4%,89.25%   { --bg:#ff2bd6; --ink:#0b0410; --acc:#16f2ff; }
  94.1%,100%     { --bg:#cfdfd6; --ink:#101815; --acc:#0a7d6c; }
}
.track, .stage-wrap{ animation-timing-function:cubic-bezier(.65,0,.35,1); }

/* ---- Mode 3: vertical stack (<900px) ---- */
@media (max-width:899.98px){
  .track{ flex-direction:column; }
  .plate__grid{ display:block; padding:56px 16px 48px; }
  .plate__copy{ max-width:none; }
  .plate__name{ font-size:clamp(52px,15vw,84px); }
  .plate__tag{ font-size:24px; }
  .verbs li{ grid-template-columns:96px 1fr; gap:12px; font-size:15px; }
  .plate__ui{ margin-top:32px; }
  .plate__ui figcaption{ align-self:flex-start; }
  .frame{ flex:0 0 46px; flex-direction:row; background:linear-gradient(90deg,#ff5607,#ff8c00); }
  .frame::before,.frame::after{ width:100%; height:9px; left:0; translate:none; top:7px; background:repeating-linear-gradient(90deg,#1a0a02 0 14px, transparent 14px 26px); }
  .frame::after{ top:auto; bottom:7px; left:0; width:100%; }
  .frame__edge{ rotate:0deg; font-size:10px; padding:4px 10px; }
  .frame__edge img{ rotate:0deg; width:11px; }
  .skip-reel{ position:static; display:flex; justify-content:center; height:44px; border-radius:0; background:#0b0e09; color:#fff; }
}

/* ==========================================================================
   UI FRAGMENTS — HTML recreations of each product (Inter lives only here)
   Base size 760×480; scaled by JS to fit the plate column.
   ========================================================================== */
.ui{ width:760px; height:480px; border-radius:14px; overflow:hidden; font:400 12px/1.35 var(--in); display:grid; grid-template-rows:38px 1fr; letter-spacing:0; text-align:left; box-shadow:0 50px 90px -40px rgba(0,0,0,.65), 0 18px 36px -18px rgba(0,0,0,.35); }
.ui *{ box-sizing:border-box; }
.ui h6{ margin:0 0 10px; font:700 9.5px/1 var(--in); letter-spacing:.14em; text-transform:uppercase; opacity:.62; display:flex; justify-content:space-between; }
.ui h6 em{ font-style:normal; letter-spacing:.04em; text-transform:none; font-weight:500; opacity:.8; }
.ui p{ margin:0; }
.ui__bar{ display:flex; align-items:center; gap:7px; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.025); }
.ui__bar > i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.12); }
.ui__name{ margin-left:10px; font:800 9.5px/1 var(--in); letter-spacing:.17em; text-transform:uppercase; }
.ui__crumb{ margin-left:14px; font-size:11px; opacity:.45; }
.ui__live{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; height:20px; padding:0 9px; border-radius:999px; font:800 9px/1 var(--in); letter-spacing:.12em; text-transform:uppercase; }
.ui__live::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.card{ border-radius:11px; padding:14px; }

/* -- Sentinel -- */
.ui-sen{ background:#0b0e09; color:#eef3e4; }
.ui-sen .ui__name{ color:#c8ff3d; }
.ui-sen .ui__live{ background:rgba(200,255,61,.13); color:#c8ff3d; }
.sen{ display:grid; grid-template-columns:50px 230px 1fr; grid-template-rows:186px 1fr 22px; gap:10px; padding:10px 12px 8px 0; }
.sen__side{ grid-row:1 / span 3; border-right:1px solid rgba(255,255,255,.06); display:flex; flex-direction:column; align-items:center; gap:10px; padding-top:4px; margin-top:-10px; padding-top:14px; }
.sen__side b{ width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.05); position:relative; }
.sen__side b.on{ background:rgba(200,255,61,.16); box-shadow:inset 0 0 0 1px rgba(200,255,61,.4); }
.sen__side b::after{ content:''; position:absolute; inset:9px; border-radius:2px; border:1.5px solid rgba(238,243,228,.45); }
.sen__side b.on::after{ border-color:#c8ff3d; border-radius:50%; }
.ui-sen .card{ background:#12170e; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.sen__score{ display:flex; flex-direction:column; }
.gauge{ position:relative; width:118px; height:118px; margin:2px auto 0; }
.gauge svg{ width:100%; height:100%; rotate:-90deg; }
.gauge circle{ fill:none; stroke-width:11; }
.gauge .trk{ stroke:#1f2716; }
.gauge .val{ stroke:#c8ff3d; stroke-linecap:round; stroke-dasharray:289 314; }
.gauge strong{ position:absolute; inset:0; display:grid; place-items:center; font:800 36px/1 var(--in); letter-spacing:-.03em; }
.gauge strong small{ display:block; font-size:8.5px; letter-spacing:.16em; opacity:.55; font-weight:700; margin-top:-26px; }
.up{ margin-top:8px!important; text-align:center; font:700 10.5px/1 var(--in); color:#c8ff3d; letter-spacing:.04em; }
.sen__perf .spark{ width:100%; height:100px; }
.kpis{ display:flex; gap:22px; margin-top:8px; font-size:11px; opacity:.85; }
.kpis b{ font-size:17px; font-weight:800; margin-right:4px; letter-spacing:-.02em; }
.kpis b.l{ color:#c8ff3d; }
.rev{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 10px; padding:7px 10px; border-radius:8px; background:rgba(255,255,255,.035); margin-bottom:7px; }
.rev .st{ grid-column:1; color:#c8ff3d; letter-spacing:1px; font-size:10.5px; }
.rev .st s{ text-decoration:none; opacity:.25; }
.rev p{ grid-column:1; font-size:11px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rev em{ grid-column:2; grid-row:1 / span 2; }
.rev em{ font-style:normal; font:800 8.5px/1 var(--in); letter-spacing:.1em; text-transform:uppercase; padding:5px 7px; border-radius:999px; }
.rev em.ok{ background:rgba(255,255,255,.08); }
.rev em.ai{ background:#c8ff3d; color:#0b0e09; }
.sen__rent table{ width:100%; border-collapse:collapse; font-size:11px; font-variant-numeric:tabular-nums; }
.sen__rent th{ text-align:left; font:600 9px/1 var(--in); letter-spacing:.1em; text-transform:uppercase; opacity:.5; padding:0 0 7px; }
.sen__rent td{ padding:7px 0; border-top:1px solid rgba(255,255,255,.06); }
.sen__rent td:last-child, .sen__rent th:last-child{ text-align:right; }
.chip{ display:inline-block; padding:3px 7px; border-radius:999px; font:700 9px/1 var(--in); letter-spacing:.06em; }
.chip.lime{ background:rgba(200,255,61,.14); color:#c8ff3d; }
.chip.dim{ background:rgba(255,255,255,.07); }
.sen__foot{ grid-column:2 / span 2; display:flex; align-items:center; gap:8px; font-size:10.5px; opacity:.55; }
.sen__foot::before{ content:''; width:6px; height:6px; border-radius:50%; background:#c8ff3d; }

/* -- ZormDesk -- */
.ui-zd{ background:#0a1220; color:#e6eefc; }
.ui-zd .ui__name{ color:#5ea0ff; }
.ui-zd .ui__live{ background:rgba(94,160,255,.14); color:#8dbcff; }
.ui-zd .ui__search{ margin-left:auto; margin-right:10px; width:200px; height:22px; border-radius:6px; background:rgba(255,255,255,.06); font-size:10.5px; display:flex; align-items:center; padding:0 9px; opacity:.6; }
.ui-zd .ui__search + .ui__live{ margin-left:0; }
.zd{ display:grid; grid-template-columns:150px 1fr 268px; }
.zd__side{ padding:14px 10px; border-right:1px solid rgba(255,255,255,.06); display:flex; flex-direction:column; gap:3px; font-size:11.5px; }
.zd__side a{ display:flex; justify-content:space-between; padding:7px 9px; border-radius:7px; text-decoration:none; opacity:.72; }
.zd__side a.on{ background:rgba(94,160,255,.14); opacity:1; color:#bcd6ff; }
.zd__side a b{ font-size:10px; background:#5ea0ff; color:#06101f; border-radius:999px; padding:1px 6px; }
.zd__side hr{ border:0; border-top:1px solid rgba(255,255,255,.06); margin:8px 0; }
.zd__list{ padding:12px 12px 0; border-right:1px solid rgba(255,255,255,.06); }
.zd__filters{ display:flex; gap:5px; margin-bottom:10px; }
.zd__filters span{ font-size:10px; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.05); opacity:.75; }
.zd__filters span.on{ background:#e6eefc; color:#0a1220; opacity:1; font-weight:600; }
.tk{ display:grid; grid-template-columns:26px 1fr auto; gap:9px; align-items:center; padding:9px 8px; border-radius:8px; margin-bottom:3px; }
.tk.on{ background:rgba(94,160,255,.1); box-shadow:inset 2px 0 0 #5ea0ff; }
.av{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font:700 9.5px/1 var(--in); background:var(--avc,#2a3a55); color:#fff; }
.tk__t{ font-size:11.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tk__m{ display:flex; gap:5px; margin-top:4px; }
.tk__m span{ font-size:9px; font-weight:700; padding:2px 6px; border-radius:4px; background:rgba(255,255,255,.07); letter-spacing:.03em; }
.tk__m span.r{ background:rgba(94,160,255,.18); color:#a9cbff; }
.tk__m span.s{ background:rgba(130,230,180,.14); color:#9fe8c4; }
.tk time{ font-size:10px; opacity:.45; }
.zd__detail{ padding:14px; display:flex; flex-direction:column; gap:10px; }
.zd__detail h4{ margin:0; font:700 14px/1.25 var(--in); letter-spacing:-.01em; }
.zd__detail .meta{ font-size:10px; opacity:.55; }
.ai-box{ border-radius:9px; padding:11px; background:linear-gradient(180deg,rgba(94,160,255,.16),rgba(94,160,255,.06)); box-shadow:inset 0 0 0 1px rgba(94,160,255,.25); font-size:11px; line-height:1.5; }
.ai-box b{ display:block; font:800 8.5px/1 var(--in); letter-spacing:.14em; text-transform:uppercase; color:#8dbcff; margin-bottom:6px; }
.wall{ margin-top:auto; border-radius:9px; padding:10px; background:rgba(255,255,255,.04); }
.wall p{ display:flex; gap:8px; align-items:center; font-size:10.5px; padding:5px 0; }
.wall p + p{ border-top:1px solid rgba(255,255,255,.06); }
.wall p i{ width:18px; height:18px; border-radius:5px; display:grid; place-items:center; font-style:normal; font-size:10px; background:rgba(255,184,0,.18); color:#ffcc55; flex:none; }
.zd__foot{ grid-column:1 / -1; }

/* -- Saving Strat (light chart paper) -- */
.ui-ss{ background:#f7f3ea; color:#0e1a2c; }
.ui-ss .ui__bar{ background:#fffdf8; border-bottom:1px solid rgba(14,26,44,.08); }
.ui-ss .ui__bar > i{ background:rgba(14,26,44,.12); }
.ui-ss .ui__name{ font:600 15px/1 var(--fr); letter-spacing:-.01em; text-transform:none; color:#0e1a2c; }
.ui-ss .ui__crumb{ opacity:.55; }
.ss-steps{ margin-left:auto; display:flex; align-items:center; gap:4px; font-size:10px; opacity:.8; }
.ss-steps i{ width:14px; height:4px; border-radius:2px; background:#2f9f78; }
.ss-steps i.off{ background:rgba(14,26,44,.14); }
.ss-steps span{ margin-left:8px; }
.ss{ display:grid; grid-template-columns:250px 1fr; gap:0; }
.ss__score{ padding:18px 20px; border-right:1px solid rgba(14,26,44,.08); }
.ss__big{ display:flex; align-items:baseline; gap:8px; }
.ss__big strong{ font:500 84px/.9 var(--fr); letter-spacing:-.04em; color:#0e1a2c; font-variation-settings:'opsz' 144; }
.ss__big span{ font-size:12px; opacity:.6; }
.ss__band{ display:inline-block; margin:6px 0 16px; font:700 9.5px/1 var(--in); letter-spacing:.14em; text-transform:uppercase; color:#1d7a5a; background:rgba(47,159,120,.12); padding:5px 8px; border-radius:999px; }
.bar{ margin-bottom:11px; }
.bar div{ display:flex; justify-content:space-between; font-size:11px; margin-bottom:5px; }
.bar div b{ font-variant-numeric:tabular-nums; }
.bar u{ display:block; height:6px; border-radius:3px; background:rgba(14,26,44,.08); text-decoration:none; position:relative; overflow:hidden; }
.bar u::after{ content:''; position:absolute; inset:0; width:var(--v); background:var(--bc,#2f9f78); border-radius:3px; }
.ss__chart{ padding:16px 18px 14px; display:flex; flex-direction:column; }
.ss__chart h6{ color:#0e1a2c; }
.ss__map{ flex:1; position:relative; border-radius:10px; background:
   repeating-linear-gradient(0deg, rgba(14,26,44,.05) 0 1px, transparent 1px 28px),
   repeating-linear-gradient(90deg, rgba(14,26,44,.05) 0 1px, transparent 1px 28px), #fbf8f1; box-shadow:inset 0 0 0 1px rgba(14,26,44,.08); overflow:hidden; }
.ss__map svg{ position:absolute; inset:0; width:100%; height:100%; }
.ss__next{ margin-top:12px; display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; background:#0e1a2c; color:#f3ecdc; }
.ss__next b{ font:800 8.5px/1 var(--in); letter-spacing:.14em; text-transform:uppercase; color:#c8a862; }
.ss__next p{ font-size:12px; flex:1; }
.ss__next em{ font-style:normal; font-weight:800; color:#7fe0b8; }
.ss__next span{ font-size:10.5px; font-weight:700; padding:7px 10px; border-radius:7px; background:#c8a862; color:#0e1a2c; }
.ss__foot{ margin-top:8px; font-size:10px; opacity:.55; }

/* -- Bee Hive -- */
.ui-bh{ background:#232322; color:#f4f4ef; }
.ui-bh .ui__name{ color:#c3f832; }
.ui-bh .ui__live{ background:rgba(195,248,50,.14); color:#c3f832; }
.bh{ display:grid; grid-template-columns:1fr 262px; gap:12px; padding:14px; }
.bh__today h5{ margin:0; font:800 22px/1 var(--in); letter-spacing:-.03em; }
.bh__today h5 small{ font-size:12px; font-weight:500; opacity:.55; letter-spacing:0; margin-left:6px; }
.bh__pts{ float:right; font:800 11px/1 var(--in); color:#232322; background:#c3f832; padding:6px 9px; border-radius:999px; }
.task{ display:grid; grid-template-columns:22px 1fr auto; gap:11px; align-items:center; padding:10px 12px; border-radius:11px; background:#2d2d2b; margin-top:7px; }
.task .ck{ width:22px; height:22px; border-radius:7px; border:2px solid rgba(255,255,255,.22); display:grid; place-items:center; font-size:12px; color:#232322; font-weight:900; }
.task.done .ck{ background:#c3f832; border-color:#c3f832; }
.task.done .tt{ opacity:.55; text-decoration:line-through; text-decoration-thickness:1px; }
.tt{ font-size:12.5px; font-weight:600; }
.ts{ display:flex; gap:6px; margin-top:4px; font-size:10px; opacity:.75; align-items:center; }
.ts .who{ width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font:800 8px/1 var(--in); color:#232322; background:var(--avc); opacity:1; }
.ts .rot{ color:#c3f832; }
.ts .loc{ color:#f5a623; }
.task .pt{ font:800 11px/1 var(--in); color:#c3f832; }
.bh__side{ display:flex; flex-direction:column; gap:10px; }
.bh__card{ border-radius:13px; background:#2d2d2b; padding:13px; }
.hive{ display:flex; align-items:center; gap:14px; }
.hex{ width:74px; height:82px; position:relative; flex:none; }
.hex svg{ width:100%; height:100%; }
.hex strong{ position:absolute; inset:0; display:grid; place-items:center; font:800 17px/1 var(--in); }
.hex strong small{ font-size:10px; opacity:.6; font-weight:600; }
.hive p{ font-size:11px; opacity:.75; }
.hive p b{ display:block; font-size:13px; opacity:1; margin-bottom:3px; color:#fff; }
.fam{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:4px; }
.fam div{ text-align:center; font-size:10px; }
.fam .av{ margin:0 auto 5px; width:32px; height:32px; font-size:11px; color:#232322; }
.fam b{ display:block; color:#c3f832; font-size:11px; }
.near{ display:flex; gap:10px; align-items:center; background:linear-gradient(135deg,rgba(245,166,35,.22),rgba(245,166,35,.08)); box-shadow:inset 0 0 0 1px rgba(245,166,35,.35); }
.near i{ width:30px; height:30px; border-radius:9px; background:#f5a623; display:grid; place-items:center; flex:none; color:#232322; font-style:normal; font-weight:900; }
.near p{ font-size:11px; }
.near p b{ display:block; font-size:12px; }

/* -- SiloX -- */
.ui-sx{ background:#0a0907; color:#efe6d4; font-family:var(--in); }
.ui-sx .ui__bar{ border-bottom-color:rgba(201,161,91,.16); }
.ui-sx .ui__name{ color:#c9a15b; }
.ui-sx .ui__live{ background:transparent; color:#c9a15b; box-shadow:inset 0 0 0 1px rgba(201,161,91,.5); }
.sx{ display:grid; grid-template-rows:1fr auto auto; padding:18px 22px 14px; background:radial-gradient(60% 70% at 50% 34%, rgba(201,161,91,.10), transparent 70%); }
.sx__key{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.sx__key svg{ width:76px; height:86px; }
.sx__key b{ font:700 10px/1 var(--mono); letter-spacing:.32em; color:#c9a15b; }
.sx__key span{ font-size:11px; opacity:.55; }
.silos{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:6px; }
.silo{ border-radius:10px; padding:12px 11px; background:#13110d; box-shadow:inset 0 0 0 1px rgba(201,161,91,.16); }
.silo i{ display:block; width:22px; height:22px; border-radius:6px; margin-bottom:12px; box-shadow:inset 0 0 0 1.5px #c9a15b; position:relative; }
.silo i::after{ content:''; position:absolute; inset:6px; border-radius:1px; background:#c9a15b; opacity:.75; }
.silo b{ display:block; font-size:12.5px; font-weight:700; letter-spacing:-.01em; }
.silo span{ display:block; margin-top:3px; font:500 9.5px/1.2 var(--mono); color:#c9a15b; opacity:.85; }
.radio{ margin-top:12px; display:flex; justify-content:space-between; align-items:center; padding:9px 12px; border-radius:8px; background:#13110d; font:600 10px/1 var(--mono); letter-spacing:.06em; }
.radio span{ opacity:.6; }
.radio em{ font-style:normal; color:#c9a15b; }

/* -- GlitchXP -- */
.ui-gx{ background:#08070b; color:#f5f0ff; }
.ui-gx .ui__name{ color:#ff2bd6; }
.ui-gx .ui__live{ background:#ff2bd6; color:#08070b; }
.gx{ display:grid; grid-template-columns:1.15fr 1fr; gap:12px; padding:14px; background:
   linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0/100% 4px; }
.gx__cmd{ border-radius:12px; padding:18px; background:#100d16; box-shadow:inset 0 0 0 1px rgba(255,43,214,.22); display:flex; flex-direction:column; }
.gx__cmd h6{ color:#ff8beb; opacity:.9; }
.gx__title{ font:900 15px/1 var(--in); letter-spacing:.2em; text-transform:uppercase; }
.gx__title small{ display:block; margin-top:6px; font-size:10px; letter-spacing:.06em; font-weight:500; opacity:.55; text-transform:none; }
.ui .tminus{ margin-top:auto; position:relative; font:900 128px/.82 var(--in); letter-spacing:-.06em; color:#fff; text-shadow:-4px 0 0 rgba(22,242,255,.85), 4px 0 0 rgba(255,43,214,.85); }
.ui .tminus + p{ margin-top:12px; font:700 10px/1 var(--in); letter-spacing:.2em; text-transform:uppercase; color:#16f2ff; }
.gx__side{ display:flex; flex-direction:column; gap:8px; }
.phase{ display:grid; grid-template-columns:28px 1fr auto; gap:10px; align-items:center; padding:10px 12px; border-radius:10px; background:#100d16; }
.phase i{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font:900 11px/1 var(--in); font-style:normal; background:rgba(255,255,255,.06); }
.phase.done i{ background:rgba(22,242,255,.14); color:#16f2ff; }
.phase.now{ box-shadow:inset 0 0 0 1px #ff2bd6; background:linear-gradient(90deg,rgba(255,43,214,.16),#100d16); }
.phase.now i{ background:#ff2bd6; color:#08070b; }
.phase b{ font-size:12px; }
.phase span{ display:block; font-size:10px; opacity:.55; margin-top:2px; font-weight:400; }
.phase em{ font-style:normal; font:800 8.5px/1 var(--in); letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.phase.now em{ color:#ff2bd6; opacity:1; }
.checks{ display:flex; flex-wrap:wrap; gap:5px; margin-top:2px; }
.checks span{ font-size:10px; font-weight:600; padding:5px 8px; border-radius:6px; background:rgba(22,242,255,.08); color:#9ff8ff; }

/* -- Life Sciences (credibility site / pipeline page) -- */
.ui-ls{ background:#f6f9f7; color:#101815; }
.ui-ls .ui__bar{ background:#e9f0ec; border-bottom:1px solid rgba(16,24,21,.08); }
.ui-ls .ui__bar > i{ background:rgba(16,24,21,.14); }
.ui-ls .url{ margin:0 auto; width:320px; height:22px; border-radius:6px; background:#fff; font-size:10.5px; display:flex; align-items:center; justify-content:center; color:#45564e; box-shadow:inset 0 0 0 1px rgba(16,24,21,.08); }
.ls{ display:grid; grid-template-rows:auto 1fr; }
.ls__nav{ display:flex; align-items:center; gap:18px; padding:14px 24px; font-size:11px; color:#45564e; border-bottom:1px solid rgba(16,24,21,.07); }
.ls__nav strong{ font:600 16px/1 var(--fr); color:#101815; margin-right:auto; letter-spacing:-.01em; }
.ls__nav span.on{ color:#101815; font-weight:600; box-shadow:0 2px 0 #0a9d85; padding-bottom:3px; }
.ls__nav em{ font-style:normal; font-weight:700; padding:7px 11px; border-radius:7px; background:#0d1a15; color:#fff; }
.ls__body{ display:grid; grid-template-columns:1fr 200px; gap:18px; padding:18px 24px; }
.ls__body h4{ margin:0 0 4px; font:500 30px/1 var(--fr); letter-spacing:-.02em; }
.ls__body .sub{ font-size:11px; color:#6b7c74; margin-bottom:14px; }
.pipe{ width:100%; border-collapse:collapse; font-size:11px; }
.pipe th{ font:700 8.5px/1 var(--in); letter-spacing:.12em; text-transform:uppercase; color:#6b7c74; text-align:left; padding:0 0 8px; }
.pipe td{ padding:10px 0; border-top:1px solid rgba(16,24,21,.08); }
.pipe td:first-child{ width:120px; font-weight:600; }
.pipe td:first-child small{ display:block; font-weight:400; color:#93a49b; font-size:9.5px; margin-top:2px; }
.pbar{ height:12px; border-radius:6px; background:rgba(16,24,21,.06); position:relative; }
.pbar::after{ content:''; position:absolute; left:0; top:0; bottom:0; width:var(--v); border-radius:6px; background:linear-gradient(90deg,#0a9d85,#35e0c4); }
.pticks{ display:grid; grid-template-columns:repeat(4,1fr); font:700 8.5px/1 var(--in); letter-spacing:.1em; text-transform:uppercase; color:#6b7c74; }
.ls__aside{ align-self:start; border-radius:12px; padding:16px 14px 14px; background:#0d1a15; color:#e8f2ed; display:flex; flex-direction:column; gap:9px; }
.ls__aside ul{ list-style:none; margin:2px 0 4px; padding:0; font-size:10.5px; }
.ls__aside li{ padding:6px 0; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; }
.ls__aside li em{ font-style:normal; color:#35e0c4; }
.ls__aside b{ font:500 17px/1.15 var(--fr); }
.ls__aside p{ font-size:10.5px; opacity:.7; }
.ls__aside span{ margin-top:4px; text-align:center; font-weight:700; font-size:11px; padding:9px; border-radius:8px; background:#35e0c4; color:#0d1a15; }

/* ==========================================================================
   PRACTICE — editorial "How we work" spread
   ========================================================================== */
.practice{ position:relative; z-index:3; background:var(--paper); padding:clamp(80px,10vw,180px) var(--gut) clamp(48px,5vw,90px); }
.practice__head{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 clamp(16px,1.6vw,32px); align-items:end; }
.kicker{ grid-column:1 / span 12; display:flex; gap:14px; align-items:center; margin:0 0 28px; font:600 11px/1 var(--sg); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.kicker::before{ content:''; width:26px; height:2px; background:var(--grad); }
.practice h2{ grid-column:1 / span 8; margin:0; font:700 clamp(56px,8.4vw,176px)/.86 var(--sg); letter-spacing:-.055em; }
.practice h2 em{ font-family:var(--fr); font-style:italic; font-weight:300; letter-spacing:-.03em; }
.practice__intro{ grid-column:9 / span 4; margin:0 0 .6em; font:400 17px/1.5 var(--sg); color:var(--ink-2); max-width:38ch; }
.pull{ margin:clamp(60px,7vw,120px) 0 clamp(40px,5vw,80px); padding:0; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 clamp(16px,1.6vw,32px); }
.pull blockquote{ grid-column:2 / span 10; margin:0; font:300 clamp(32px,3.9vw,76px)/1.06 var(--fr); font-style:italic; letter-spacing:-.025em; text-wrap:balance; font-variation-settings:'opsz' 144; }
.pull blockquote span{ color:var(--or); }
.pull figcaption{ grid-column:2 / span 10; margin-top:18px; font:600 11px/1 var(--sg); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.disc{ list-style:none; margin:0; padding:0; counter-reset:d; }
.disc > li{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 clamp(16px,1.6vw,32px); padding:clamp(28px,3vw,52px) 0; border-top:1px solid var(--ink0); align-items:start; }
.disc > li:last-child{ border-bottom:1px solid var(--ink0); }
.disc__n{ grid-column:1 / span 1; font:300 clamp(28px,2.6vw,48px)/1 var(--fr); font-style:italic; color:var(--or); }
.disc__t{ grid-column:2 / span 5; }
.disc__t h3{ margin:0; font:700 clamp(36px,3.9vw,76px)/.92 var(--sg); letter-spacing:-.045em; }
.disc__t p{ margin:14px 0 0; font:330 clamp(20px,1.6vw,30px)/1.15 var(--fr); font-style:italic; }
.disc__b{ grid-column:7 / span 4; font:400 16px/1.55 var(--sg); color:var(--ink-2); }
.disc__b p{ margin:0 0 14px; }
.disc__b .proof{ color:var(--ink0); padding-left:14px; border-left:2px solid var(--or); }
.disc__c{ grid-column:11 / span 2; list-style:none; margin:0; padding:0; font:500 13.5px/1.5 var(--sg); }
.disc__c li{ display:block; padding:0 0 6px; border:0; }
.disc__c a{ display:inline-block; margin-top:10px; font-weight:700; text-decoration:none; border-bottom:1.5px solid currentColor; }
.disc__c a:hover{ color:var(--or); }
.practice__meta{ margin-top:24px; display:flex; flex-wrap:wrap; gap:10px 28px; font:500 13px/1.4 var(--sg); color:var(--ink-2); }
.practice__meta b{ color:var(--ink0); }

/* ==========================================================================
   CLOSING BAND — the whole band is the link
   ========================================================================== */
.close{ position:relative; z-index:3; background:#0f0e0c; padding:0; }
.close__link{ display:block; position:relative; overflow:hidden; text-decoration:none; color:#140700; background:var(--grad); padding:clamp(56px,7vw,120px) var(--gut) clamp(40px,5vw,84px); }
.close__link::before{ content:''; position:absolute; inset:0; background:#0f0e0c; transform:translateY(101%); transition:transform .6s var(--ease-in); }
.close__link > *{ position:relative; }
.close__kicker{ display:flex; justify-content:space-between; gap:20px; font:600 12px/1 var(--sg); letter-spacing:.16em; text-transform:uppercase; }
.close__cta{ display:block; margin:clamp(28px,3.4vw,60px) 0 clamp(28px,3.4vw,56px); font:700 clamp(64px,12.4vw,250px)/.86 var(--sg); letter-spacing:-.06em; transition:color .4s var(--ease); }
.close__cta .arr{ display:inline-block; font-weight:400; transition:transform .5s var(--ease-in); }
.close__cta .nw{ white-space:nowrap; }
.close__cta em{ font-family:var(--fr); font-style:italic; font-weight:300; letter-spacing:-.04em; }
.close__note{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 clamp(16px,1.6vw,32px); font:400 clamp(16px,1.2vw,21px)/1.45 var(--sg); }
.close__note span{ grid-column:1 / span 6; max-width:46ch; }
.close__note b{ grid-column:10 / span 3; justify-self:end; align-self:end; font:600 12px/1 var(--sg); letter-spacing:.16em; text-transform:uppercase; }
.close__link:hover::before, .close__link:focus-visible::before{ transform:none; }
.close__link:hover, .close__link:focus-visible{ color:#ff8c00; }
.close__link:hover .arr{ transform:translateX(.18em); }
.close__link:focus-visible{ outline:4px solid #fff; outline-offset:-10px; }

/* Footer */
.foot{ background:#0f0e0c; color:#d9d3c7; padding:clamp(48px,5vw,88px) var(--gut) 28px; font:400 14px/1.6 var(--sg); }
.foot__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:32px clamp(16px,1.6vw,32px); }
.foot__brand{ grid-column:1 / span 4; }
.foot__brand img{ width:34px; height:auto; margin-bottom:18px; }
.foot__brand p{ margin:0; max-width:34ch; color:#a49d90; }
.foot h4{ margin:0 0 14px; font:600 10.5px/1 var(--sg); letter-spacing:.16em; text-transform:uppercase; color:#7d776b; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li a{ text-decoration:none; display:inline-flex; align-items:center; gap:9px; padding:3px 0; }
.foot li a:hover{ color:#ff8c00; }
.foot li i{ width:8px; height:8px; border-radius:50%; background:var(--c); }
.foot__col1{ grid-column:6 / span 2; } .foot__col2{ grid-column:8 / span 2; } .foot__col3{ grid-column:10 / span 3; }
.foot__base{ display:flex; justify-content:space-between; gap:16px; margin-top:56px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size:12px; color:#7d776b; }

/* ---------- Wide screens: use the 1920 gutters ---------- */
@media (min-width:1700px){
  .verbs li{ font-size:17px; }
  .plate__meta{ font-size:12.5px; }
  .rail__notches button{ font-size:12px; }
}

/* ---------- Tablet / phone ---------- */
@media (max-width:1180px){
  .top__fact{ display:none; }
  .top__nav{ grid-template-columns:auto 1fr auto; }
  .pills:not(.pills--r){ justify-content:center; }
  .lede{ grid-column:1 / span 7; }
  .now{ display:none; }
  .cta-block{ grid-column:8 / span 5; }
}
@media (max-width:899.98px){
  .top{ padding-top:14px; }
  .pills:not(.pills--r){ display:none; }
  .pills--r li:not(:last-child){ display:none; }
  .top__nav{ grid-template-columns:auto 1fr; }
  .pills .pill--cta{ height:36px; padding:0 14px; font-size:11px; }
  .hero{ min-height:0; padding-top:28px; }
  .hero__row{ display:block; margin-top:22px; padding-bottom:24px; }
  .lede{ font-size:clamp(26px,7.4vw,34px); }
  .now{ display:block; margin-top:26px; }
  .now ol{ grid-template-columns:1fr 1fr; }
  .cta-block{ margin-top:26px; display:block; justify-self:stretch; }
  .hero__foot > span:not(.reel-cue){ display:none; }
  .hero__foot .reel-cue b{ width:28px; }
  .btn{ width:100%; justify-content:space-between; height:58px; }
  .hero__foot{ font-size:9.5px; }
  .practice h2{ grid-column:1 / -1; }
  .practice__intro{ grid-column:1 / -1; margin-top:20px; }
  .pull blockquote, .pull figcaption{ grid-column:1 / -1; }
  .disc > li{ display:block; }
  .disc__n{ display:block; margin-bottom:10px; }
  .disc__b{ margin-top:18px; }
  .disc__c{ margin-top:10px; display:flex; flex-wrap:wrap; gap:4px 14px; }
  .disc__c li{ padding:0; }
  .close__cta{ font-size:clamp(52px,15vw,96px); }
  .close__note{ display:block; }
  .close__note b{ display:block; margin-top:22px; }
  .foot__brand, .foot__col1, .foot__col2, .foot__col3{ grid-column:1 / -1; }
  .foot__col1, .foot__col2{ grid-column:span 6; }
  .float-cta{ top:auto; bottom:14px; right:14px; left:14px; justify-content:center; height:50px; font-size:13px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .ap__slide{ transform:none!important; }
}

/* ZormDesk detail additions */
.zd__facts{ display:flex; gap:6px; flex-wrap:wrap; }
.zd__facts span{ font-size:10px; padding:4px 7px; border-radius:6px; background:rgba(255,255,255,.05); opacity:.85; }
.zd__facts b{ font-weight:700; }
.zd__reply{ border-radius:9px; padding:10px 11px; background:rgba(255,255,255,.04); font-size:10.5px; line-height:1.5; opacity:.92; }
.zd__reply b{ display:block; font:800 8.5px/1 var(--in); letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin-bottom:6px; }
.zd__reply span{ display:inline-block; margin-top:8px; font-weight:700; font-size:10px; padding:5px 9px; border-radius:6px; background:#5ea0ff; color:#06101f; }
.bh__today .task{ padding:8px 12px; margin-top:6px; }

/* ---------- 2) trailer.css ---------- */
/* ==========================================================================
   ZORM — "TRAILER" hero (2026-10). Layout + look. The timeline lives in
   trailer-timeline.css (one 15 s loop shared by every animation).
   Layers (z): cut-1…cut-6 platform cuts · cut-7 orange end card · bands (wipes)
               · grain · .t-live (the only interactive / accessible layer) · header
   Every cut repeats the "constant" chrome (lockup, statement, strip) in its own
   ink, so the wipe recolours it exactly along the film-strip edge.
   ========================================================================== */

@property --tp { syntax:'<number>'; inherits:true; initial-value:0; }

/* ---------- Header rides on top of the trailer ---------- */
body.has-trailer{ --lock-h:26px; }
.has-trailer .top{ position:absolute; inset:0 0 auto; z-index:40; }
.has-trailer .top__fact{ display:none; }
.has-trailer .top__nav{ grid-template-columns:auto 1fr auto; }
.has-trailer .pills:not(.pills--r){ justify-content:flex-start; margin-left:10px; }
.has-trailer .top .pills a{ background:rgba(14,12,10,.5); color:#f7f2ea; -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.has-trailer .top .pills a:hover{ background:#f7f2ea; color:#140700; }
.has-trailer .top .pills sup{ color:#ff8c00; }
.has-trailer .top .pills a.pill--cta{ position:relative; isolation:isolate; overflow:hidden; background:var(--grad); color:#140700; box-shadow:none; }
.has-trailer .top .pill--cta::before{ content:''; position:absolute; inset:0; z-index:-1; background:#140700; opacity:0; border-radius:inherit; }
.has-trailer .top .pills a.pill--cta:hover{ background:#f7f2ea; color:#140700; }
/* The brand link stays (home + focus) but is drawn by each cut's real-wordmark lockup underneath */
.has-trailer .top__brand{ width:calc(var(--lock-h,26px) * 290 / 69); height:32px; color:transparent; border-radius:6px; }
.has-trailer .top__brand > *{ visibility:hidden; }

/* ---------- Stage ---------- */
.t{
  --nm-top:clamp(92px,11.6cqh,138px);
  --bot:clamp(16px,2.8cqh,32px);
  --strip-h:30px;
  --cta-h:58px; --cta-w:288px;
  --cta-b:calc(var(--bot) + var(--strip-h) + clamp(14px,2.2cqh,26px));
  --say-b:calc(var(--cta-b) + var(--cta-h) + clamp(18px,3.4cqh,36px));
  --sayfs:clamp(40px,5cqw,108px);
  --colw:clamp(300px,37cqw,780px);
  --ctrl-w:clamp(250px,21cqw,330px);
  --bw:clamp(96px,10.5cqw,210px);
  position:relative; display:block; height:100vh; height:100svh; min-height:600px; max-height:1600px; padding:0;
  container-type:size; overflow:clip; isolation:isolate; background:#0b0e09; color:#eef3e4;
}
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.t-stage{ position:absolute; inset:0; overflow:clip; }
.cut{
  --fs:min(calc((100cqw - 2 * var(--gut)) / var(--w) * .985), 40cqh);
  --capb:calc(var(--nm-top) + var(--fs) * .714);
  --s:1.06;
  position:absolute; inset:0; background:var(--bg); color:var(--ink); overflow:clip; visibility:hidden;
}
.cut-1{ visibility:visible; z-index:1; } .cut-2{ z-index:2; } .cut-3{ z-index:3; } .cut-4{ z-index:4; } .cut-5{ z-index:5; } .cut-6{ z-index:6; } .cut-7{ z-index:7; }
@media (min-width:1800px) and (min-height:1000px){ .cut{ --s:1.3; } }

/* Lockup — the real wordmark (Z paths untouched, ORM = currentColor) */
.cut__lock{ position:absolute; left:var(--gut); top:18px; height:32px; display:flex; align-items:center; color:var(--ink); }
.cut__lock svg{ display:block; height:var(--lock-h); width:auto; aspect-ratio:290/69; overflow:visible; }
.cut__lock--tile{ left:calc(var(--gut) - 10px); padding:0 10px; border-radius:9px; background:#140700; color:#f7f2ea; }

.cut__meta{ position:absolute; left:var(--gut); top:calc(var(--nm-top) - 30px); margin:0; display:flex; align-items:center; gap:12px; font:600 11.5px/1 var(--sg); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.cut__meta b{ font-weight:700; font-variant-numeric:tabular-nums; }
.cut__meta .of{ opacity:.5; margin-left:-6px; }
.cut__meta .st{ display:inline-flex; align-items:center; gap:7px; height:22px; padding:0 10px; border-radius:999px; border:1px solid color-mix(in srgb, currentColor 32%, transparent); }
.cut__meta .st i{ width:7px; height:7px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 28%, transparent); }
.cut__meta .cat{ opacity:.7; letter-spacing:.12em; }

/* The giant platform name — fitted edge to edge in pure CSS (--w = ink width in em) */
.cut__nm{ position:absolute; left:var(--gut); top:calc(var(--nm-top) - .131 * var(--fs)); margin:0 0 0 calc(var(--fs) * -.04); display:flex; align-items:baseline; font:700 var(--fs)/1 var(--sg); letter-spacing:-.05em; white-space:nowrap; will-change:transform; }
.nm{ display:inline-block; clip-path:inset(-.3em -.5em -.1em -.5em); }
.nm .l{ display:inline-block; will-change:transform; }
.cut__aside{ align-self:flex-start; margin:calc(var(--fs) * .17) 0 0 calc(var(--fs) * .1); font:300 calc(var(--fs) * .2)/1 var(--fr); font-style:italic; letter-spacing:-.02em; color:var(--acc); }
.cut__aside small{ display:block; margin-top:.7em; font:500 14px/1.3 var(--sg); font-style:normal; letter-spacing:.02em; color:var(--ink); opacity:.72; }

/* The big screen — the reel's HTML product UI, slammed in by the camera */
.cut__scr{ position:absolute; right:var(--gut); top:calc(var(--capb) - var(--fs) * .2); bottom:calc(var(--cta-b) + 26px); width:calc(100cqw - 2 * var(--gut) - var(--colw) - 28px); margin:0; z-index:2; }
.cam{ position:absolute; right:0; top:0; width:calc(760px * var(--s)); height:calc(480px * var(--s)); transform-origin:var(--fx,50%) var(--fy,40%); will-change:transform; }
.zm{ position:absolute; left:0; top:0; width:760px; height:480px; transform:scale(var(--s)); transform-origin:0 0; }
.zm .ui{ box-shadow:0 60px 110px -40px rgba(0,0,0,.7), 0 22px 40px -20px rgba(0,0,0,.45); }
.c-silox .zm .ui{ box-shadow:0 0 0 1px rgba(201,161,91,.38), 0 60px 110px -40px #000; }
.c-sentinel .zm .ui{ box-shadow:0 0 0 1px rgba(200,255,61,.16), 0 60px 110px -40px #000; }
.c-saving .zm .ui{ box-shadow:0 60px 120px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); }
.cut__scr .cap{ position:absolute; right:0; top:calc(480px * var(--s) + 12px); margin:0; font:500 10px/1.2 var(--sg); letter-spacing:.12em; text-transform:uppercase; opacity:.62; white-space:nowrap; }

/* The constant statement (repeated per cut in its ink; the active verb carries the platform accent) */
.cut__say{ position:absolute; left:var(--gut); bottom:var(--say-b); width:var(--colw); z-index:3; }
.say{ margin:0; font:700 var(--sayfs)/.92 var(--sg); letter-spacing:-.048em; }
.say span{ display:block; opacity:.24; white-space:nowrap; }
.say span.on{ opacity:1; }
.say span.on{ text-decoration:underline; text-decoration-color:var(--acc); text-decoration-thickness:.075em; text-underline-offset:.13em; text-decoration-skip-ink:auto; }
.lede{ margin:clamp(14px,2.2cqh,26px) 0 0; max-width:36ch; font:400 clamp(15px,1.12cqw,21px)/1.42 var(--sg); opacity:.86; text-wrap:balance; }
.lede em{ font-family:var(--fr); font-style:italic; font-weight:340; letter-spacing:-.01em; }
.cut__note{ position:absolute; left:calc(var(--gut) + var(--cta-w) + 18px); bottom:var(--cta-b); height:var(--cta-h); width:min(23ch, calc(var(--colw) - var(--cta-w) - 18px)); margin:0; display:flex; align-items:center; font:400 12.5px/1.45 var(--sg); opacity:.72; }

/* Chapter strip (visual; the real buttons sit exactly on top in .t-chap) */
.cut__strip{ position:absolute; left:var(--gut); right:calc(var(--gut) + var(--ctrl-w) + 24px); bottom:var(--bot); height:var(--strip-h); margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; font:600 10.5px/1 var(--sg); letter-spacing:.12em; text-transform:uppercase; }
.cut__strip li{ position:relative; padding-top:13px; opacity:.48; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cut__strip li.is-past{ opacity:.78; } .cut__strip li.is-now{ opacity:1; }
.cut__strip i{ position:absolute; left:0; right:0; top:0; height:2px; background:color-mix(in srgb, currentColor 26%, transparent); }
.cut__strip .is-past i{ background:currentColor; }
.cut__strip .is-now i::after{ content:''; position:absolute; left:0; right:0; top:-1px; height:4px; background:var(--acc); transform-origin:0 50%; border-radius:2px; }
.c-zormdesk .cut__strip .is-now i::after{ background:#06101f; }
.cut__strip b{ font-weight:700; margin-right:8px; opacity:.6; font-variant-numeric:tabular-nums; }
.cut__strip small{ margin-left:6px; font-size:8.5px; padding:2px 5px; border:1px solid currentColor; border-radius:999px; opacity:.7; }

/* ---------- The orange end card ---------- */
.cut--end{ background:linear-gradient(118deg,#ff5607 0%,#ff7300 55%,#ff8c00 100%); color:#140700; }
.sprk{ position:absolute; left:0; right:0; height:12px; background:repeating-linear-gradient(90deg, #140700 0 20px, transparent 20px 36px); opacity:.9; animation:sprk .9s linear infinite; border-radius:3px; }
.sprk--t{ top:3px; height:9px; } .sprk--b{ bottom:4px; }
@keyframes sprk{ to{ background-position:-36px 0; } }
.cut--end .cut__lock{ top:18px; }
.cut--end .cut__meta{ top:calc(var(--nm-top) - 30px); }
.cut--end .cut__meta .cat{ opacity:.82; }
.cut--end{ --efs:min(calc((100cqw - 2 * var(--gut)) * .92 / 5.572), 20.5cqh); }
.end__say{ position:absolute; left:var(--gut); top:calc(var(--nm-top) - .06 * var(--efs)); margin:0 0 0 calc(var(--efs) * -.035); font:700 var(--efs)/.9 var(--sg); letter-spacing:-.05em; transform-origin:0 50%; }
.end__say .ln{ display:block; overflow:clip; overflow-clip-margin:.14em; padding-bottom:.02em; }
.end__say .in{ display:block; white-space:nowrap; }
.end__say em{ font-family:var(--fr); font-style:italic; font-weight:300; letter-spacing:-.035em; }
/* the sign-off: the real wordmark on a black slate, locked up with "We stay." */
.end__slate{ position:absolute; left:calc(var(--gut) + var(--efs) * 3.62); right:var(--gut); top:calc(var(--nm-top) - .06 * var(--efs) + var(--efs) * 1.97); height:calc(var(--efs) * .72); border-radius:clamp(12px,1.1cqw,22px); background:#140700; color:#f7f2ea; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 clamp(22px,2.4cqw,48px); box-shadow:0 40px 80px -36px rgba(60,16,0,.75); }
.end__slate svg{ height:48%; width:auto; aspect-ratio:290/69; overflow:visible; flex:none; }
.end__slate span{ font:600 clamp(10px,.8cqw,13px)/1.5 var(--sg); letter-spacing:.2em; text-transform:uppercase; opacity:.62; text-align:right; white-space:nowrap; }
.cut--end .cut__say{ bottom:var(--say-b); }
.cut--end .cut__strip li{ opacity:.85; }

/* ---------- Film-strip wipes (the reel's frame motif, crossing the screen) ---------- */
.band{ position:absolute; top:0; bottom:0; left:0; z-index:20; width:var(--bw); visibility:hidden; transform:translateX(100cqw); background:linear-gradient(180deg,#ff5607,#ff8c00); color:#160800; overflow:hidden; will-change:transform; box-shadow:-18px 0 40px -18px rgba(0,0,0,.35), 18px 0 40px -18px rgba(0,0,0,.35); }
.band::before,.band::after{ content:''; position:absolute; top:0; height:100%; width:16%; background:repeating-linear-gradient(180deg, #1a0a02 0 22px, transparent 22px 40px); border-radius:4px; opacity:.88; }
.band::before{ left:14%; } .band::after{ right:14%; }
.band__edge{ position:absolute; top:50%; left:50%; translate:-50% -50%; rotate:-90deg; white-space:nowrap; font:700 clamp(11px,.9cqw,15px)/1 var(--sg); letter-spacing:.3em; text-transform:uppercase; background:linear-gradient(90deg,#ff6a0a,#ff7d06); padding:9px 16px; z-index:1; }
.band__edge img{ display:inline-block; box-sizing:content-box; width:12px; height:auto; vertical-align:-4px; margin-right:12px; rotate:90deg; padding:4px 5px; border-radius:5px; background:#160800; }

/* Film grain — very light, keeps flat colour fields from looking like a template */
.t-grain{ position:absolute; inset:-60px; z-index:25; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .7s steps(5) infinite; }
@keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-22px,14px)} 40%{transform:translate(18px,-26px)} 60%{transform:translate(-12px,-8px)} 80%{transform:translate(26px,20px)} 100%{transform:translate(0,0)} }

/* ---------- The live layer: h1, CTA, chapters, pause, skip ---------- */
.t-live{ position:absolute; inset:0; z-index:30; pointer-events:none; }
.t-cta-wrap{ position:absolute; left:var(--gut); bottom:var(--cta-b); pointer-events:auto; }
.t-cta{ position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:space-between; gap:14px; box-sizing:border-box; width:var(--cta-w); height:var(--cta-h); padding:0 14px 0 28px; border-radius:999px; background:var(--grad); color:#140700; text-decoration:none; font:700 17px/1 var(--sg); letter-spacing:-.005em; white-space:nowrap; box-shadow:0 18px 40px -18px rgba(0,0,0,.55); transition:transform .25s var(--ease); }
.t-cta::before{ content:''; position:absolute; inset:0; z-index:-1; background:#140700; opacity:0; }
.t-cta .arr{ display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; box-shadow:inset 0 0 0 1.5px currentColor; font-size:16px; transition:transform .25s var(--ease); }
.t-cta:hover{ transform:translateY(-2px); }
.t-cta:hover .arr{ transform:translateX(3px); }
.t-cta:focus-visible{ outline:3px solid #fff; outline-offset:3px; box-shadow:0 0 0 7px #140700; }

.t-chap{ position:absolute; left:var(--gut); right:calc(var(--gut) + var(--ctrl-w) + 24px); bottom:var(--bot); height:var(--strip-h); margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; pointer-events:auto; }
.t-chap button{ all:unset; box-sizing:border-box; display:block; width:100%; height:calc(var(--strip-h) + 14px); margin-top:-14px; cursor:pointer; color:transparent; font-size:1px; overflow:hidden; white-space:nowrap; border-radius:6px; }
.t-chap button:focus-visible{ outline:2px solid #fff; box-shadow:0 0 0 4px #140700; }

.t-ctrl{ position:absolute; right:var(--gut); bottom:calc(var(--bot) - 6px); display:flex; gap:8px; pointer-events:auto; }
.t-pause, .t-skip{ display:inline-flex; align-items:center; gap:10px; height:40px; padding:0 16px; border-radius:999px; background:rgba(14,12,10,.55); color:#f7f2ea; -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); font:600 11px/1 var(--sg); letter-spacing:.12em; text-transform:uppercase; text-decoration:none; cursor:pointer; user-select:none; white-space:nowrap; }
.t-pause{ padding-left:8px; }
.t-pause:hover, .t-skip:hover{ background:#f7f2ea; color:#140700; }
.t-pause__box{ position:absolute; left:0; top:0; width:1px; height:1px; opacity:0; margin:0; }
.t-pause__box:focus-visible ~ .t-live .t-pause{ outline:2px solid #ff8c00; outline-offset:3px; }
.t-skip:focus-visible{ outline:2px solid #ff8c00; outline-offset:3px; }
.t-ring{ position:relative; width:26px; height:26px; flex:none; }
.t-ring::before{ content:''; position:absolute; inset:0; border-radius:50%; background:conic-gradient(#ff7a00 calc(var(--tp) * 360deg), rgba(255,255,255,.2) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); }
.t-ring::after{ content:''; position:absolute; left:50%; top:50%; width:8px; height:9px; translate:-50% -50%; background:linear-gradient(90deg, currentColor 0 3px, transparent 3px 5px, currentColor 5px 8px); }
.is-paused{ display:none; }
#tr-pause:checked ~ .t-live .is-play{ display:none; }
#tr-pause:checked ~ .t-live .is-paused{ display:inline; }
#tr-pause:checked ~ .t-live .t-ring::after{ width:9px; height:10px; translate:-35% -50%; background:currentColor; clip-path:polygon(0 0, 100% 50%, 0 100%); }

/* Pause: pure CSS (checkbox) or held by JS (off-screen / hand-off / finished) */
#tr-pause:checked ~ .t-stage *, #tr-pause:checked ~ .t-stage *::before, #tr-pause:checked ~ .t-stage *::after,
#tr-pause:checked ~ .t-live *, #tr-pause:checked ~ .t-live *::before, #tr-pause:checked ~ .t-live *::after,
.t.is-held .t-stage *, .t.is-held .t-stage *::before, .t.is-held .t-stage *::after,
.t.is-held .t-live *, .t.is-held .t-live *::before, .t.is-held .t-live *::after,
body:has(#tr-pause:checked) .top .pill--cta, body:has(#tr-pause:checked) .top .pill--cta::before,
body:has(.t.is-held) .top .pill--cta, body:has(.t.is-held) .top .pill--cta::before{ animation-play-state:paused !important; }

/* ---------- Hand-off: one frame of orange film between the trailer and plate 01 ---------- */
.handoff{ position:relative; z-index:3; height:clamp(58px,6.2vw,104px); background:linear-gradient(90deg,#ff5607,#ff8c00); color:#160800; overflow:hidden; }
.handoff::before,.handoff::after{ content:''; position:absolute; left:0; right:0; height:18%; background:repeating-linear-gradient(90deg, #1a0a02 0 22px, transparent 22px 40px); opacity:.88; border-radius:3px; }
.handoff::before{ top:11%; } .handoff::after{ bottom:11%; }
.handoff__edge{ position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:1; white-space:nowrap; font:700 clamp(11px,.95vw,15px)/1 var(--sg); letter-spacing:.3em; text-transform:uppercase; background:linear-gradient(90deg,#ff6a0a,#ff7d06); padding:9px 18px; }
.handoff__edge img{ display:inline-block; box-sizing:content-box; width:12px; height:auto; vertical-align:-4px; margin-right:12px; padding:4px 5px; border-radius:5px; background:#160800; }

/* ---------- Wide ---------- */
@media (min-width:1700px){
  body.has-trailer{ --lock-h:30px; }
  .t{ --strip-h:32px; --cta-h:64px; --cta-w:318px; }
  .t-cta{ font-size:19px; }
  .cut__meta{ font-size:12.5px; }
  .cut__strip{ font-size:11.5px; }
  .cut__note{ font-size:13.5px; }
  .cut__scr .cap{ font-size:11px; }
}
@media (max-width:1180px) and (min-width:900px){
  .t{ --colw:clamp(300px,40cqw,520px); }
  .cut__note{ display:none; }
}

/* ---------- Phone / small tablet: re-composed vertical frame ---------- */
@media (max-width:899.98px){
  .has-trailer .top{ padding-top:12px; }
  .has-trailer .top__brand{ height:36px; }
  body.has-trailer{ --lock-h:22px; }
  .t{ --gut:16px; --nm-top:clamp(98px,14cqh,118px); --bot:14px; --strip-h:40px; --cta-h:52px; --cta-w:calc(100cqw - 32px);
      --cta-b:calc(var(--bot) + 40px + 12px); --say-b:calc(var(--cta-b) + var(--cta-h) + 20px); --sayfs:clamp(34px,10.6cqw,52px); --ctrl-w:236px; --bw:84px;
      min-height:640px; max-height:none; }
  .cut{ --fs:min(calc((100cqw - 32px) / var(--w) * .985), 30cqw); --say-h:calc(var(--sayfs) * 2.76 + 72px); }
  .cut__lock{ top:14px; height:36px; }
  .cut__meta{ top:calc(var(--nm-top) - 28px); font-size:10.5px; gap:10px; }
  .cut__meta .cat{ display:none; }
  .cut__scr{ left:var(--gut); right:-18cqw; width:auto; top:calc(var(--capb) + 16px); bottom:calc(var(--say-b) + var(--say-h) + 10px); }
  .cam{ left:0; right:auto; }
  .cut__scr .cap{ left:0; right:auto; font-size:9px; }
  .cut__say{ width:auto; right:var(--gut); }
  .lede{ font-size:15px; max-width:30ch; }
  .cut__note{ display:none; }
  .cut__strip{ right:calc(var(--gut) + var(--ctrl-w) + 14px); bottom:calc(var(--bot) + 14px); height:6px; gap:4px; font-size:0; }
  .cut__strip li{ padding:0; height:6px; }
  .cut__strip b, .cut__strip small{ display:none; }
  .t-chap{ display:none; }
  .t-ctrl{ bottom:var(--bot); gap:6px; }
  .t-pause, .t-skip{ height:38px; padding:0 13px; font-size:10px; letter-spacing:.1em; }
  .t-pause{ padding-left:6px; }
  .t-cta{ font-size:16px; }
  .end__say{ --efs:min(calc((100cqw - 32px) / 5.572), 13cqh); }
  .cut__aside{ display:none; }
  .end__slate{ left:var(--gut); right:var(--gut); top:calc(var(--nm-top) + var(--efs) * 2.95 + 24px); bottom:calc(var(--say-b) + 120px); height:auto; flex-direction:column; justify-content:center; gap:16px; padding:0 18px; }
  .end__slate svg{ width:min(72%,300px); height:auto; }
  .end__slate span{ text-align:center; font-size:10px; }
  .handoff__edge{ font-size:9.5px; letter-spacing:.22em; padding:6px 10px; }
}

/* ---------- Reduced motion: one composed still, chapters switch instantly ---------- */
@media (prefers-reduced-motion:reduce){
  .t *, .t *::before, .t *::after, .has-trailer .top .pill--cta, .has-trailer .top .pill--cta::before{ animation:none !important; }
  .t .band, .t .t-grain{ display:none; }
  .t .t-pause{ display:none; }
  .t .cut__strip .is-now i::after{ transform:none; }
  .t .cut{ visibility:hidden; clip-path:none; }
  .t:not([data-show]) .cut-1,
  .t[data-show="1"] .cut-1, .t[data-show="2"] .cut-2, .t[data-show="3"] .cut-3, .t[data-show="4"] .cut-4,
  .t[data-show="5"] .cut-5, .t[data-show="6"] .cut-6, .t[data-show="7"] .cut-7{ visibility:visible; }
  .t .t-still{ display:block; }
}
.t-still{ display:none; }

/* ---------- 3) production layer ---------- */

/* ==========================================================================
   HOMEPAGE PRODUCTION LAYER (2026-10-06)
   Everything below is new for the live page: header additions, mobile menu,
   chat-bubble clearances, the carried-over sections restyled into the reel's
   language, no-JS fallbacks, touch targets and contrast fixes.
   ========================================================================== */

/* Contrast-safe orange for text/marks on paper (#c2410c on #f3efe7 = 6.4:1);
   --ink-3 darkened to 5.1:1 on paper (was 4.1:1). */
:root{ --ink-3:#6b645b; --or-ink:#c2410c; --focus:#ff6a1a; --night:#0f0e0c; --night-ink:#ece6da; --night-2:#b3ab9d; }
:focus-visible{ outline-color:var(--focus); }
.trusted, .practice, .kit, .yours{ --focus:#c2410c; }
.pull blockquote span, .disc__n{ color:var(--or-ink); }
.disc__c a:hover{ color:var(--or-ink); }

/* ---------- Header additions: search + menu buttons as pills ---------- */
.pills button{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:32px; padding:0 12px; border-radius:999px; cursor:pointer; font:600 11.5px/1 var(--sg); letter-spacing:.08em; text-transform:uppercase; }
.has-trailer .top .pills button{ background:rgba(14,12,10,.5); color:#f7f2ea; -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); transition:background .2s var(--ease), color .2s var(--ease); }
.has-trailer .top .pills button:hover{ background:#f7f2ea; color:#140700; }
.pills button:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
.pills .pill--ico{ width:32px; padding:0; }
.li-menu{ display:none; }
.pill--menu i{ position:relative; width:14px; height:8px; border-top:1.5px solid currentColor; border-bottom:1.5px solid currentColor; }

/* ---------- The chat bubble (chat.js: fixed 56px, right/bottom 28px) must never sit on a control ---------- */
@media (min-width:900px){
  .t{ --ctrl-w:calc(clamp(250px,21cqw,330px) + 76px); }
  .t-ctrl{ right:calc(var(--gut) + 76px); }
  .rail{ right:calc(var(--gut) + 76px); }
  .arrows{ right:calc(var(--gut) + 76px); }
}
@media (max-width:899.98px){
  #zorm-chat-bubble{ right:12px!important; bottom:12px!important; width:48px!important; height:48px!important; }
  #zorm-chat-panel{ bottom:72px!important; }
  .t{ --ctrl-w:226px; }
  .t-ctrl{ right:72px; }
  .t-skip .sk-long{ display:none; }
  .float-cta{ right:72px; left:12px; bottom:12px; height:48px; }
}
.t-skip .sk-short{ display:none; }
@media (max-width:899.98px){ .t-skip .sk-short{ display:inline; } }

/* ---------- Mobile menu sheet (live markup + JS, restyled) ---------- */
.mobile-menu{ position:fixed; inset:0; z-index:10001; display:flex; flex-direction:column; background:var(--night); color:var(--night-ink); padding:14px 16px calc(18px + env(safe-area-inset-bottom)); visibility:hidden; opacity:0; transform:translateY(-8px); transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s; overflow-y:auto; overscroll-behavior:contain; }
.mobile-menu.open{ visibility:visible; opacity:1; transform:none; transition:opacity .25s var(--ease), transform .25s var(--ease); }
body.menu-open{ overflow:hidden; }
.mm-top{ display:flex; align-items:center; justify-content:space-between; height:48px; }
.mm-logo{ display:flex; align-items:center; height:44px; color:#f7f2ea; }
.mm-logo svg{ height:24px; width:auto; aspect-ratio:290/69; overflow:visible; }
.mm-close{ all:unset; position:relative; width:44px; height:44px; border-radius:999px; cursor:pointer; background:rgba(255,255,255,.08); }
.mm-close span{ position:absolute; left:13px; right:13px; top:50%; height:1.5px; background:currentColor; rotate:45deg; }
.mm-close span + span{ rotate:-45deg; }
.mm-close:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.mm-body{ flex:1; padding-top:18px; }
.mm-label{ margin:22px 0 8px; font:600 10.5px/1 var(--sg); letter-spacing:.18em; text-transform:uppercase; color:var(--night-2); }
.mm-label:first-child{ margin-top:0; }
.mm-nav{ display:flex; flex-direction:column; }
.mm-nav a{ display:flex; align-items:center; justify-content:space-between; min-height:52px; border-bottom:1px solid rgba(255,255,255,.1); text-decoration:none; font:600 22px/1.1 var(--sg); letter-spacing:-.02em; }
.mm-nav a span{ color:#ff8c00; font-weight:400; }
.mm-plats{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.mm-plats a{ display:flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; font:500 15px/1.2 var(--sg); }
.mm-plats i, .foot li i{ width:8px; height:8px; border-radius:50%; background:var(--c); flex:none; }
.mm-search{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:10px; margin-top:18px; min-height:44px; padding:0 16px; border-radius:999px; background:rgba(255,255,255,.08); cursor:pointer; font:600 13px/1 var(--sg); }
.mm-search:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.mm-foot{ padding-top:18px; }
.mm-cta{ display:flex; align-items:center; justify-content:space-between; height:54px; padding:0 22px; border-radius:999px; background:var(--grad); color:#140700; text-decoration:none; font:700 16px/1 var(--sg); }
.mm-meta{ display:flex; justify-content:space-between; margin-top:14px; font:500 12px/1 var(--sg); color:var(--night-2); }

/* ==========================================================================
   SHARED SECTION GRAMMAR (paper / night), Space Grotesk + Fraunces italic
   ========================================================================== */
.sec__head{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 clamp(16px,1.6vw,32px); align-items:end; }
.sec__head h2, .why__head h2, .yours h2{ grid-column:1 / span 8; margin:0; font:700 clamp(48px,6.6vw,140px)/.88 var(--sg); letter-spacing:-.05em; text-wrap:balance; }
.sec__head h2 em, .why__head h2 em, .yours h2 em{ font-family:var(--fr); font-style:italic; font-weight:300; letter-spacing:-.03em; }
.sec__intro{ grid-column:9 / span 4; margin:0 0 .5em; max-width:40ch; font:400 17px/1.55 var(--sg); color:var(--ink-2); }
.why .kicker, .process .kicker, .meet .kicker{ color:var(--night-2); }

/* ---------- Client logo strip (the six live logos, nothing added) ---------- */
.trusted{ position:relative; z-index:3; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 clamp(16px,1.6vw,32px); align-items:center; padding:clamp(36px,3.6vw,64px) var(--gut); background:var(--paper); border-bottom:1px solid var(--rule); }
.trusted__lab{ grid-column:1 / span 3; margin:0; display:flex; align-items:center; gap:14px; font:600 11px/1.3 var(--sg); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.trusted__lab::before{ content:''; width:26px; height:2px; background:var(--grad); flex:none; }
.trusted__row{ grid-column:4 / span 9; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 36px; }
.trusted__row img{ width:auto; height:clamp(28px,2.4vw,40px); filter:brightness(0); opacity:.62; }

/* ---------- Why one operator (night) ---------- */
.why{ position:relative; z-index:3; background:var(--night); color:var(--night-ink); padding:clamp(80px,9vw,170px) var(--gut) clamp(64px,7vw,130px); }
.why__head{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 clamp(16px,1.6vw,32px); align-items:end; }
.why__head h2{ grid-column:1 / span 9; }
.why__head h2 em{ color:#ff8c00; }
.why__intro{ grid-column:1 / span 7; margin:clamp(28px,3vw,48px) 0 0; max-width:60ch; font:400 clamp(17px,1.25vw,21px)/1.55 var(--sg); color:var(--night-2); }

.chain{ margin:clamp(48px,5vw,88px) 0 clamp(40px,4.4vw,80px); display:grid; gap:14px; }
.chain__row{ display:grid; grid-template-columns:clamp(120px,11vw,180px) 1fr; gap:18px; align-items:center; }
.chain__lab{ font:600 11px/1.2 var(--sg); letter-spacing:.18em; text-transform:uppercase; color:var(--night-2); }
.chain__row--new .chain__lab{ color:#ff8c00; }
.chain ol{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(18px,2vw,34px); }
.chain ol li{ position:relative; display:flex; align-items:center; min-height:58px; padding:0 16px; border-radius:10px; border:1px dashed rgba(236,230,218,.28); font:500 clamp(13px,1vw,16px)/1.2 var(--sg); color:#d6cfc2; }
.chain ol li + li::before{ content:'✕'; position:absolute; left:calc(-1 * clamp(18px,2vw,34px)); width:clamp(18px,2vw,34px); text-align:center; color:#ff6a1a; font:700 13px/1 var(--sg); }
.chain ol li.is-x{ border-style:solid; border-color:rgba(255,106,26,.55); color:#ffb27a; font-family:var(--fr); font-style:italic; font-weight:400; }
.chain__film{ position:relative; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; align-items:center; min-height:58px; padding:12px 18px; border-radius:10px; background:linear-gradient(90deg,#ff5607,#ff8c00); color:#140700; font:600 clamp(13px,1vw,16px)/1.2 var(--sg); overflow:hidden; }
.chain__film::before, .chain__film::after{ content:''; position:absolute; left:0; right:0; height:6px; background:repeating-linear-gradient(90deg,#1a0a02 0 14px,transparent 14px 26px); opacity:.85; }
.chain__film::before{ top:4px; } .chain__film::after{ bottom:4px; }
.chain__film span{ position:relative; padding-left:16px; }
.chain__film span::before{ content:''; position:absolute; left:0; top:50%; width:7px; height:7px; translate:0 -50%; border-radius:50%; background:#140700; }
.chain__film b{ position:relative; padding:7px 12px; border-radius:999px; background:#140700; color:#ff8c00; font:700 11px/1 var(--sg); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }

.why__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 clamp(16px,1.6vw,32px); border-top:1px solid rgba(236,230,218,.22); }
.why__list li{ padding:clamp(22px,2.2vw,34px) 0 0; }
.why__n{ display:block; font:300 clamp(26px,2.2vw,40px)/1 var(--fr); font-style:italic; color:#ff8c00; }
.why__list h3{ margin:16px 0 10px; font:700 clamp(22px,1.75vw,32px)/1.05 var(--sg); letter-spacing:-.03em; }
.why__list p{ margin:0; max-width:34ch; font:400 15.5px/1.55 var(--sg); color:var(--night-2); }

/* ---------- Process (night): three frames on one strip ---------- */
.process{ position:relative; z-index:3; background:var(--night); color:var(--night-ink); padding:clamp(80px,9vw,170px) var(--gut) clamp(72px,8vw,150px); }
.process .sec__intro{ color:var(--night-2); }
.steps{ list-style:none; margin:clamp(48px,5vw,96px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; position:relative; }
.steps::before{ content:''; position:absolute; left:0; right:0; top:44px; height:3px; background:linear-gradient(90deg,#ff5607,#ff8c00 70%,rgba(255,140,0,0)); }
.steps li{ position:relative; padding:0 clamp(16px,2.4vw,48px) 0 0; }
.steps li::before{ content:''; position:absolute; left:0; top:37px; width:17px; height:17px; border-radius:50%; background:var(--night); box-shadow:inset 0 0 0 3px #ff8c00; }
.steps li:last-child::after{ content:'→'; position:absolute; right:0; top:28px; font:400 28px/1 var(--sg); color:#ff8c00; }
.steps__wk{ margin:0; font:600 11px/1 var(--sg); letter-spacing:.18em; text-transform:uppercase; color:#ff8c00; }
.steps__n{ display:block; margin-top:56px; font:300 clamp(56px,6vw,120px)/.8 var(--fr); font-style:italic; color:rgba(236,230,218,.22); }
.steps h3{ margin:14px 0 12px; font:700 clamp(28px,2.6vw,50px)/.95 var(--sg); letter-spacing:-.04em; }
.steps li > p:last-child{ margin:0; max-width:38ch; font:400 15.5px/1.55 var(--sg); color:var(--night-2); }

/* ---------- Toolkit (paper): a ruled 4 × 2 sheet ---------- */
.kit{ position:relative; z-index:3; background:var(--paper); padding:clamp(80px,9vw,170px) var(--gut) clamp(64px,7vw,130px); }
.kit__grid{ list-style:none; margin:clamp(44px,4.6vw,88px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--ink0); }
.kit__grid li{ padding:clamp(20px,2vw,32px) clamp(16px,1.6vw,28px) clamp(26px,2.6vw,40px) 0; border-bottom:1px solid var(--rule); }
.kit__grid li:not(:nth-child(4n+1)){ padding-left:clamp(16px,1.6vw,28px); border-left:1px solid var(--rule); }
.kit__n{ display:block; font:300 26px/1 var(--fr); font-style:italic; color:var(--or-ink); }
.kit__grid h3{ margin:14px 0 10px; font:700 clamp(21px,1.6vw,28px)/1.05 var(--sg); letter-spacing:-.03em; }
.kit__grid p{ margin:0; font:400 15px/1.55 var(--sg); color:var(--ink-2); }

/* ---------- Meet Zorm (night): the video in an orange film frame ---------- */
.meet{ position:relative; z-index:3; background:var(--night); color:var(--night-ink); padding:clamp(80px,9vw,170px) var(--gut) clamp(80px,9vw,170px); }
.meet .sec__intro{ color:var(--night-2); }
.meet__film{ position:relative; margin:clamp(44px,4.6vw,88px) auto 0; max-width:1280px; padding:clamp(22px,2.2vw,34px) clamp(10px,1vw,16px); border-radius:14px; background:linear-gradient(180deg,#ff5607,#ff8c00); }
.meet__sprk{ position:absolute; left:14px; right:14px; height:clamp(8px,.8vw,12px); background:repeating-linear-gradient(90deg,#1a0a02 0 20px,transparent 20px 36px); opacity:.9; border-radius:3px; }
.meet__sprk--t{ top:clamp(7px,.7vw,11px); } .meet__sprk--b{ bottom:clamp(7px,.7vw,11px); }
.meet__edge{ position:absolute; right:22px; top:100%; margin-top:14px; display:inline-flex; align-items:center; gap:10px; font:600 11px/1 var(--sg); letter-spacing:.24em; text-transform:uppercase; color:var(--night-2); }
.meet__edge img{ width:12px; height:auto; }
.vfacade{ position:relative; display:block; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:6px; background:#101014; color:#fff; text-decoration:none; }
.vfacade img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.vfacade::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,12,.2),rgba(10,10,12,0) 38%,rgba(10,10,12,.62) 100%); }
.vfacade:hover img{ transform:scale(1.03); }
.vfacade-play{ position:absolute; z-index:1; left:50%; top:50%; translate:-50% -50%; display:grid; place-items:center; width:clamp(72px,7vw,104px); aspect-ratio:1; border-radius:50%; background:var(--grad); color:#140700; box-shadow:0 18px 44px -14px rgba(0,0,0,.6); transition:transform .3s var(--ease); }
.vfacade-play svg{ width:34%; height:auto; margin-left:6%; }
.vfacade:hover .vfacade-play{ transform:scale(1.07); }
.vfacade-meta{ position:absolute; z-index:1; left:clamp(16px,2vw,28px); bottom:clamp(14px,1.8vw,24px); }
.vfacade-meta b{ display:block; font:700 clamp(18px,1.6vw,26px)/1.1 var(--sg); letter-spacing:-.02em; }
.vfacade-meta span{ font:500 13px/1.4 var(--sg); color:rgba(255,255,255,.85); }
.vfacade:focus-visible{ outline:3px solid #fff; outline-offset:-6px; }
.meet__film iframe{ display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:6px; background:#000; }

/* ---------- Your turn (paper): audience chips + CTA ---------- */
.yours{ position:relative; z-index:3; background:var(--paper); padding:clamp(80px,9vw,170px) var(--gut) clamp(72px,8vw,150px); }
.yours__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:32px clamp(16px,1.6vw,32px); align-items:end; }
.yours__copy{ grid-column:1 / span 7; }
.yours h2{ font-size:clamp(46px,5.8vw,124px); }
.yours__side{ grid-column:8 / span 5; }
.yours .sec__intro{ margin:0; }
.chips{ list-style:none; margin:24px 0 30px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.chips li{ display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border-radius:999px; border:1px solid var(--ink0); font:500 14px/1.2 var(--sg); }
.chips li:nth-child(1)::before, .chips li::before{ content:''; width:6px; height:6px; margin-right:9px; border-radius:50%; background:var(--or-ink); }
.yours .btn{ height:60px; }

/* ---------- Footer: live link set, reel styling, real wordmark ---------- */
.foot h4, .foot__h{ margin:0 0 14px; font:600 10.5px/1 var(--sg); letter-spacing:.16em; text-transform:uppercase; color:#968f82; }
.foot__mark{ display:inline-flex; align-items:center; min-height:44px; margin-bottom:10px; color:#f7f2ea; }
.foot__mark svg{ height:30px; width:auto; aspect-ratio:290/69; overflow:visible; }
.foot__base{ color:#968f82; }
@media (min-width:900px){ .foot__col1{ grid-column:6 / span 2; } .foot__col2{ grid-column:8 / span 2; } .foot__col3{ grid-column:10 / span 3; } }
.foot__two{ columns:2; column-gap:24px; }
.foot{ padding-bottom:104px; }  /* the chat bubble sits bottom-right: keep the © line clear of it */
.meet__film{ max-width:1180px; }
.foot__two li{ break-inside:avoid; }

/* ---------- No-JS: UI fragments keep a sane size (JS scales them exactly) ---------- */
.no-js .fit{ width:760px; max-width:100%; height:480px; overflow:hidden; border-radius:14px; }
.no-js .fit > .ui{ position:relative; }
@media (max-width:899.98px){ .no-js .fit{ height:auto; } .no-js .fit > .ui{ zoom:.45; } }
.no-js .float-cta{ display:none; }
/* trailer screens: JS fits --s to each box; without JS use safe fixed scales */
@media (max-width:1180px){ .no-js .cut{ --s:.8; } }
@media (max-width:899.98px){ .no-js .cut{ --s:.5; } }

/* ---------- Tablet / phone ---------- */
@media (max-width:1180px){
  .why__list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px; }
  .kit__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kit__grid li:not(:nth-child(4n+1)){ padding-left:0; border-left:0; }
  .kit__grid li:nth-child(2n){ padding-left:clamp(16px,1.6vw,28px); border-left:1px solid var(--rule); }
  .trusted__lab{ grid-column:1 / -1; margin-bottom:22px; }
  .trusted__row{ grid-column:1 / -1; }
  .chain ol li{ padding:0 10px; }
}
@media (max-width:899.98px){
  .has-trailer .pills--r .li-menu{ display:list-item; }
  .has-trailer .pills--r li:not(.li-menu){ display:none; }
  .has-trailer .top .pills button{ height:40px; padding:0 16px; }
  .sec__head h2, .why__head h2, .yours h2, .sec__intro, .why__intro{ grid-column:1 / -1; }
  .sec__head h2, .why__head h2, .yours h2{ font-size:clamp(42px,12.4vw,72px); }
  .sec__intro{ margin-top:20px; font-size:16px; }
  .why__intro{ font-size:16px; }
  .chain__row{ grid-template-columns:1fr; gap:10px; }
  .chain ol{ grid-template-columns:1fr; gap:22px; }
  .chain ol li{ min-height:44px; }
  .chain ol li + li::before{ left:0; right:0; top:-19px; width:auto; }
  .chain__film{ grid-template-columns:1fr; gap:10px; padding:18px; }
  .chain__film b{ justify-self:start; }
  .why__list{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:44px; }
  .steps::before{ left:8px; right:auto; top:8px; bottom:0; width:3px; height:auto; background:linear-gradient(180deg,#ff5607,#ff8c00 80%,rgba(255,140,0,0)); }
  .steps li{ padding:0 0 0 40px; }
  .steps li::before{ top:2px; }
  .steps li:last-child::after{ display:none; }
  .steps__n{ margin-top:16px; font-size:56px; }
  .kit__grid{ grid-template-columns:1fr; }
  .kit__grid li, .kit__grid li:nth-child(2n){ padding-left:0; border-left:0; padding-right:0; }
  .trusted__row{ justify-content:flex-start; gap:18px 30px; }
  .trusted__row img{ height:26px; }
  .meet__film{ padding:20px 8px; border-radius:10px; }
  .meet__edge{ right:4px; font-size:9.5px; }
  .yours__copy, .yours__side{ grid-column:1 / -1; }
  .yours .btn{ width:100%; justify-content:space-between; }
  .foot__col3{ grid-column:1 / -1; }
}

/* ---------- Touch: 44px targets, 16px inputs (chat + search palette included) ---------- */
@media (pointer:coarse){
  .has-trailer .top .pills a, .has-trailer .top .pills button{ height:44px; }
  .pills .pill--ico{ width:44px; }
  .t-pause, .t-skip{ height:44px; }
  .plate__links a{ display:inline-flex; align-items:flex-end; min-height:44px; }
  .disc__c a{ display:inline-flex; align-items:center; min-height:44px; margin-top:0; }
  .practice__meta a{ display:inline-flex; align-items:center; min-height:44px; }
  .foot li a{ min-height:44px; padding:0; }
  .rail__notches button{ padding-top:18px; padding-bottom:14px; }
  .rail__skip{ height:44px; }
  .arrows button{ width:48px; height:48px; }
  .skip-reel{ min-height:44px; }
  input, select, textarea, #zorm-chat-panel input, #zorm-chat-panel textarea, .zorm-field{ font-size:16px!important; }
}

/* ---------- Reduced motion (the concept's rules already stop the trailer + reel) ---------- */
@media (prefers-reduced-motion:reduce){
  .vfacade img, .vfacade-play, .mobile-menu{ transition:none!important; }
}

/* Header pills + trailer controls: glass a touch darker so 11px labels hold ≥ 4.5:1 even over the lime / blue cuts */
.has-trailer .top .pills a:not(.pill--cta), .has-trailer .top .pills button{ background:rgba(14,12,10,.64); }
.has-trailer .top .pills a:not(.pill--cta):hover, .has-trailer .top .pills button:hover{ background:#f7f2ea; }
.t-pause, .t-skip{ background:rgba(14,12,10,.64); }
.t-pause:hover, .t-skip:hover{ background:#f7f2ea; }