/* ═══════════════════════════════════════════════════════════════════════
BOLTED — site.css · the system (13 Sep 2026)
One stylesheet for every page. The brief is in .claude/guglieri/brief.md,
the recap in .claude/guglieri/system.md.
The field is empty black. One light, from the top-left. One accent,
used only as light (the LED). One family, Gilroy. Objects are few:
the machined mark, three slabs, one alert. Everything else is plain.
═══════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Gilroy';src:url('/assets/fonts/Gilroy-ultralight.woff2?v=455380df') format('woff2');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url('/assets/fonts/Gilroy-light.woff2?v=45e3e22a') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url('/assets/fonts/Gilroy-regular.woff2?v=8331e674') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url('/assets/fonts/Gilroy-medium.woff2?v=a130fc4c') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url('/assets/fonts/Gilroy-semibold.woff2?v=e4ff0495') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url('/assets/fonts/Gilroy-bold.woff2?v=dc7b94ac') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url('/assets/fonts/Gilroy-extrabold.woff2?v=4be74edf') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url('/assets/fonts/Gilroy-black.woff2?v=8abee0ef') format('woff2');font-weight:900;font-style:normal;font-display:swap}
/* ═══ TOKENS ═══════════════════════════════════════════════════════════ */
:root{
--void:#050507;--s1:#101013;--s2:#15151a;--s3:#1b1b21;--s4:#232329;
--ink:#f2f2f4;--t2:#b3b3ba;--t3:#8e8e97;--t4:#7a7a84;--t5:#5a5a63;
--line:rgba(255,255,255,.09);--edge:rgba(255,255,255,.10);--edge-2:rgba(255,255,255,.16);
--top:inset 0 1px 0 rgba(255,255,255,.10);--top-2:inset 0 1px 0 rgba(255,255,255,.16);--bottom:inset 0 -1px 0 rgba(0,0,0,.55);
--cy:#45e0e8;--am:#ffb454;--red:#ff4d5e;--mint:#7de8c9;
--glow-cy:0 0 0 1px rgba(69,224,232,.22),0 0 9px rgba(69,224,232,.8);
--glow-am:0 0 0 1px rgba(255,180,84,.2),0 0 8px rgba(255,180,84,.7);
--glow-mint:0 0 0 1px rgba(125,232,201,.2),0 0 8px rgba(125,232,201,.7);
--paper:#f4f4f6;--paper-2:#fff;--paper-ink:#0b0b0e;--paper-t2:#4d4d55;--paper-t3:#6e6e78;--paper-line:rgba(11,11,14,.12);
--type:'Gilroy','Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
--mono:ui-monospace,SFMono-Regular,Menlo,monospace;
--m:clamp(20px,5vw,96px);--max:1440px;
--r-btn:12px;--r-chip:10px;--r-card:24px;--r-sheet:28px;--r-icon:22%;
--e:cubic-bezier(.16,1,.3,1);--e2:cubic-bezier(.4,0,.2,1);
/* aliases the older pages still read */
--bg:var(--void);--bg-2:var(--s1);--bg-3:var(--s2);--dim:var(--t2);--dimmer:var(--t3);--line-2:var(--edge-2);--wash:rgba(255,255,255,.04);
--mg:var(--ink);--vi:var(--ink);--r:var(--r-card);
--chrome-grad:linear-gradient(96deg,#fff 14%,#a9aec4 27%,#fff 40%,#8f95b0 52%,#fff 66%,#b9becf 80%,#fff 92%);
}
/* ═══ BASE ═════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-family:var(--type);color-scheme:dark;scrollbar-color:var(--edge-2) transparent}
body{background:var(--void);color:var(--ink);font-family:var(--type);font-weight:400;font-size:16px;line-height:1.5;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;min-height:100svh}
body.locked{overflow:hidden}
canvas,svg,img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
[hidden]{display:none!important}
b,strong{font-weight:600}
em{font-style:normal}
::selection{background:var(--cy);color:var(--void)}
:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
section[id],div[id]{scroll-margin-top:96px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;background:var(--ink);color:var(--void);font-size:13px;font-weight:600;border-radius:0 0 8px 0}
.skip:focus{left:0}
.tube{display:none}
/* ═══ TYPE ═════════════════════════════════════════════════════════════ */
.lbl,.eq,.sechead .n,.hero-ro,.hero-cap .loc,.stat span,.status,.avail,.specrow span,.alert-head,.alert-foot,.dock-foot .k,
.card-foot .k,.card > b,.tile span,.tile p,.en-top b,.en-top i,.en-for b,.meta b,.media .cap,.chart-head b,.chart-head span,
.ph b,.ph span,.tl-item b,.au-top b,.gallery figcaption,.lab-top span,.tag,.tm-yrs,.archive figcaption,.ss-meta > div span,
.ss-meta .u,.instrument-head span,.instrument-head b,.field-cap .n,.ro b,.readout .tail,.pt .tag,.crumb,.project-top span,
.project dt,.alt thead span,.alt tbody th,.svc-nav b,.tool-nav b,.nt-cat,.nt-meta,.mode > b,.mx b,.rec b,.spec b,.price > b,
.letter .sig,.day1,.foot-col h5,.foot-base,.foot-spec,.paper-meta,.menu-base,.quote figcaption,.rule b,.rulesgrid b,.honest b,
.mxt thead th,.mxt td::before,.fld label,.param > b,.builder-head b,.builder-head span,.steps li::before,.ro-btn,.alt-hint,
.wt thead th,.wt .role,.nav-spec,.panel-n,.panel li,.row-tags,.prose .kicker,.pull b,.place span.lbl,.wordmark i{
font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);font-variant-numeric:tabular-nums}
.lbl--c{color:var(--ink)}
.eq{text-transform:none;letter-spacing:.02em}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
.chrome{background:var(--chrome-grad);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.statement{font-size:clamp(34px,4.6vw,72px);font-weight:500;letter-spacing:-.03em;line-height:1.04;max-width:20ch;text-wrap:balance}
.statement--sm{font-size:clamp(28px,3.4vw,52px);line-height:1.08;max-width:24ch}
.statement--xs{font-size:clamp(24px,2.6vw,40px);letter-spacing:-.02em;line-height:1.14;max-width:26ch}
.mute{color:var(--t3)}
.display{font-size:clamp(40px,5.6vw,88px);font-weight:500;letter-spacing:-.035em;line-height:1}
.case-title{font-size:clamp(44px,7vw,120px);font-weight:500;letter-spacing:-.035em;line-height:.96}
.thin{font-weight:300}
.lead{font-size:clamp(16px,1.2vw,19px);line-height:1.55;color:var(--t2);max-width:46ch}
.lead b,.lead strong{color:var(--ink);font-weight:500}
/* ═══ LAYOUT ═══════════════════════════════════════════════════════════ */
.wrap{width:100%;max-width:var(--max);margin-inline:auto}
.sec{padding:clamp(96px,14vh,176px) var(--m) 0}
.sec--pad{padding:clamp(112px,16vh,200px) var(--m)}
.sec--tight{padding:clamp(48px,6vh,80px) var(--m) 0}
.sec--bottom{padding-bottom:clamp(96px,14vh,176px)}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap}
@media (max-width:760px){.sechead{margin-bottom:32px}}
.sechead .n{color:var(--t4);white-space:nowrap}
.sechead .lbl{color:var(--ink)}
.two{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);gap:clamp(24px,4vw,72px)}
.two > .lbl,.two-spec{padding-top:6px}
.two-spec{display:grid;align-content:start;gap:24px}
.two-spec dl{margin:0;display:grid}
.two-spec dl div{display:grid;grid-template-columns:9ch minmax(0,1fr);gap:16px;padding:10px 0;border-top:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums;line-height:1.5}
.two-spec dl div:last-child{border-bottom:1px solid var(--line)}
.two-spec dt{color:var(--t3)}
.two-spec dd{margin:0;color:var(--ink)}
@media (max-width:860px){.two{grid-template-columns:1fr;gap:32px}}
.dots{background-image:none}
/* ═══ CONTROLS ═════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:var(--r-btn);font-size:14px;font-weight:600;
background:var(--ink);color:var(--void);white-space:nowrap;
transition:background .2s var(--e2),transform .2s var(--e),box-shadow .2s var(--e)}
.btn:hover{background:#fff;transform:translateY(-1px);box-shadow:0 12px 24px -16px rgba(255,255,255,.45)}
.btn:active{transform:translateY(1px);box-shadow:none;transition-duration:.08s}
.btn svg{flex:none;transition:transform .25s var(--e)}
.btn:hover svg{transform:translateX(3px)}
.btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge-2)}
.btn--line:hover{background:var(--s2);box-shadow:inset 0 0 0 1px var(--edge-2)}
.btn--lg{padding:16px 26px;font-size:15px}
.btn--sm{padding:10px 16px;font-size:13px}
.pill,.ro-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-btn);font-size:13px;font-weight:600;
color:var(--ink);background:transparent;box-shadow:inset 0 0 0 1px var(--edge-2);white-space:nowrap;letter-spacing:0;text-transform:none;
transition:background .2s var(--e2),transform .2s var(--e)}
.pill:hover,.ro-btn:hover{background:var(--s2)}
.pill:active,.ro-btn:active{transform:translateY(1px);transition-duration:.08s}
.pill--cta{background:var(--ink);color:var(--void);box-shadow:none}
.pill--cta:hover{background:#fff}
.navbtn{font-size:13px;font-weight:600;color:var(--t2);padding:10px 0;transition:color .2s}
.navbtn:hover{color:var(--ink)}
.chip{font-size:13px;font-weight:500;padding:9px 14px;border-radius:var(--r-chip);color:var(--t2);background:var(--s1);
box-shadow:var(--top),inset 0 0 0 1px var(--line);transition:background .2s var(--e2),color .2s var(--e2),transform .2s var(--e)}
.chip:hover{color:var(--ink);background:var(--s2)}
.chip:active{transform:translateY(1px);transition-duration:.08s}
.chip[aria-pressed="true"]{color:var(--void);background:var(--ink);box-shadow:none;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.more{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--t2);transition:color .2s}
.more:hover{color:var(--ink)}
.more svg{transition:transform .25s var(--e)}
.more:hover svg{transform:translateX(3px)}
/* the LED: the only emitter on the site */
.led,.avail i,.status i,.specrow i,.alert-foot i{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;background:var(--am);box-shadow:var(--glow-am)}
.led--live,.avail i,.status--live i,.specrow .led--live,.alert-foot i{background:var(--cy);box-shadow:var(--glow-cy)}
.led--open,.status--open i{background:var(--mint);box-shadow:var(--glow-mint)}
.status{display:inline-flex;align-items:center;gap:9px;color:var(--t2);white-space:nowrap;flex:none}
.avail{display:inline-flex;align-items:center;gap:10px;color:var(--t3)}
.avail b{color:var(--ink);font-weight:700}
.specrow{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:28px}
.specrow span{display:inline-flex;align-items:center;gap:9px;color:var(--t2)}
/* ═══ NAV ══════════════════════════════════════════════════════════════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:20px;padding:22px var(--m);
transition:padding .3s var(--e),background .3s var(--e2),box-shadow .3s}
.nav.stuck{padding:12px var(--m);background:rgba(5,5,7,.94);box-shadow:inset 0 -1px 0 var(--line)}
.wordmark{display:flex;align-items:center;gap:11px;flex:none}
.wordmark svg{width:18px;height:19px;fill:var(--ink)}
.wordmark span{font-size:13px;font-weight:800;letter-spacing:.22em}
.wordmark i{font-style:normal;color:var(--t3);margin-left:2px}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);margin-left:clamp(20px,3vw,56px)}
.nav-links a{font-size:13px;font-weight:500;color:var(--t2);white-space:nowrap;transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:20px;flex:none;margin-left:auto}
.nav-spec{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;line-height:1.2}
.nav-spec b{color:var(--ink);font-weight:700}
@media (max-width:1023px){.nav-links,.nav-spec{display:none}}
@media (max-width:560px){.nav .pill--cta,.nav .btn--sm{display:none}}
/* ═══ MENU OVERLAY ═════════════════════════════════════════════════════ */
.menu{position:fixed;inset:0;z-index:70;background:var(--void);display:flex;flex-direction:column;padding:0 var(--m);overflow:auto;
opacity:0;pointer-events:none;transition:opacity .3s var(--e)}
.menu.open{opacity:1;pointer-events:auto}
.menu-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;flex:none}
.menu-figs{display:none}
.menu-nav{flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(2px,.6vh,6px);max-width:var(--max);width:100%;margin-inline:auto;padding-block:20px}
.menu-nav a{display:flex;align-items:baseline;gap:clamp(14px,2vw,28px);font-size:clamp(30px,5.2vw,64px);font-weight:500;letter-spacing:-.03em;
color:var(--t3);padding:4px 0;transition:color .2s var(--e2)}
.menu-nav a i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--t4);font-variant-numeric:tabular-nums}
.menu-nav a:hover,.menu-nav a[aria-current="page"]{color:var(--ink)}
.menu-nav a.cta{color:var(--ink)}
.menu-nav a.cta i{color:var(--cy)}
.menu-nav a.sub{font-size:clamp(17px,1.6vw,22px);letter-spacing:-.01em;padding:2px 0 2px clamp(28px,3.6vw,56px);font-weight:500}
.menu-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0 26px;border-top:1px solid var(--line);flex:none}
.menu-base a{color:var(--t2)}.menu-base a:hover{color:var(--ink)}
.menu-base b{color:var(--t2);font-weight:700}
/* ═══ HERO: the machined mark under one light ══════════════════════════ */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;
background:radial-gradient(60% 46% at 50% 0%,rgba(255,255,255,.05),transparent 70%)}
.hero-fig{position:absolute;inset:6% 0 8% 0}
.hero-fig > *{position:absolute;inset:0}
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 62%,var(--void) 100%)}
.hero-cap{position:absolute;left:var(--m);right:var(--m);bottom:max(32px,calc(var(--m) * .7));display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;pointer-events:none}
.hero-cap > *{pointer-events:auto}
.hero-cap h1{font-size:clamp(28px,3vw,44px);font-weight:500;letter-spacing:-.025em;line-height:1.1;max-width:14ch}
.hero-cap .sub{margin-top:14px;font-size:15px;line-height:1.55;color:var(--t2);max-width:40ch;text-wrap:pretty}
.hero-cap .sub b{color:var(--ink);font-weight:500}
.hero-cap .loc{margin-top:18px;display:block}
.hero-cap .avail{margin-bottom:22px}
.hero-ro{display:flex;align-items:center;gap:14px;text-align:right}
.hero-ro b{color:var(--t2)}
.bob{animation:none;flex:none}
@media (max-width:760px){.hero{min-height:600px}.hero-fig{inset:8% 0 30% 0}.hero-ro{text-align:left}.hero-ro > span{display:none}.avail .avail-x{display:none}}
/* ═══ STATS ════════════════════════════════════════════════════════════ */
.stats{display:flex;gap:clamp(32px,6vw,96px);flex-wrap:wrap;margin-top:64px}
@media (max-width:560px){.stats{display:grid;grid-template-columns:1fr 1fr;gap:32px 24px;margin-top:48px}}
.stat{display:flex;flex-direction:column;gap:10px}
.stat em{font-style:normal;font-size:13px;line-height:1.5;letter-spacing:0;color:var(--t3);max-width:30ch} /* a source or a list under the label, in its own casing */
.stat b{font-size:clamp(32px,3.2vw,52px);font-weight:500;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.sec--pad > .wrap > .statement + p,.sec--pad > .wrap > .statement + .lead{margin-top:32px}
.fence{margin-top:clamp(24px,3vh,40px);padding-top:16px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--t3);max-width:74ch}
/* ═══ POSTER: one object, copy in a narrow measure ═════════════════════ */
.poster{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);gap:clamp(32px,6vw,96px);align-items:center;min-height:min(72svh,720px)}
.poster-copy h2,.poster-copy h1{font-size:clamp(36px,4.6vw,72px);font-weight:500;letter-spacing:-.035em;line-height:1;max-width:12ch}
.poster-copy > p,.poster-copy .standfirst{margin-top:24px;font-size:16px;line-height:1.55;color:var(--t2);max-width:38ch}
.poster-copy .standfirst b{color:var(--ink);font-weight:500}
.poster-copy .btn{margin-top:32px}
.poster-copy .lbl{display:block;margin-bottom:22px}
.poster-copy .meta{margin-top:32px}
.poster-obj{position:relative;display:flex;justify-content:center;align-items:center;min-height:280px}
.poster-obj::before{content:"";position:absolute;inset:-16% -8%;pointer-events:none;background:radial-gradient(50% 50% at 50% 42%,rgba(255,255,255,.055),transparent 70%)}
@media (max-width:900px){.poster{grid-template-columns:1fr;min-height:auto;gap:40px}.poster-obj{order:-1;min-height:0}}
/* the alert, as an object */
.alert{position:relative;width:min(540px,100%);border-radius:22px;padding:18px 20px 14px;
background:linear-gradient(180deg,rgba(46,46,54,.94),rgba(28,28,34,.94));
box-shadow:var(--top-2),inset 0 -1px 0 rgba(0,0,0,.55),0 44px 80px -30px rgba(0,0,0,.95),0 2px 0 rgba(0,0,0,.45);
display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 14px;align-items:start;
transform:translateY(-18px);opacity:0;transition:transform .7s var(--e),opacity .45s var(--e2)}
.alert.in{transform:none;opacity:1}
.alert-icon{width:44px;height:44px;border-radius:11px;background:linear-gradient(165deg,#2c2c33,#141418);box-shadow:var(--top-2),inset 0 -1px 0 rgba(0,0,0,.6);display:grid;place-items:center}
.alert-icon svg{width:19px;height:20px;fill:var(--ink)}
.alert-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:2px}
.alert h3{margin-top:5px;font-size:17px;font-weight:600;letter-spacing:-.012em;line-height:1.25;color:var(--ink)}
.alert p{margin-top:3px;font-size:15px;line-height:1.4;color:var(--t2);text-wrap:pretty}
.alert-foot{grid-column:1 / -1;margin-top:14px;padding-top:12px;box-shadow:0 -1px 0 rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.alert-foot b{margin-left:auto;color:var(--ink);font-weight:700}
.alert--lg{width:min(640px,100%);padding:22px 24px 18px;grid-template-columns:52px minmax(0,1fr);gap:0 16px;border-radius:24px}
.alert--lg .alert-icon{width:52px;height:52px;border-radius:13px}
.alert--lg .alert-icon svg{width:22px;height:23px}
.alert--lg h3{font-size:20px}
.alert--lg p{font-size:16px}
@media (max-width:560px){.alert{padding:16px 16px 12px;grid-template-columns:40px minmax(0,1fr)}.alert-icon{width:40px;height:40px}.alert--lg{padding:18px 18px 14px}}
/* the slab: an app icon with thickness */
.slab{--sz:112px;width:var(--sz);height:var(--sz);border-radius:var(--r-icon);position:relative;flex:none;color:var(--ink);
background:linear-gradient(165deg,#2b2b32 0%,#17171c 58%,#111115 100%);
box-shadow:var(--top-2),inset 0 -2px 0 rgba(0,0,0,.6),inset 1px 0 0 rgba(255,255,255,.04),0 34px 54px -26px rgba(0,0,0,.95),0 3px 0 rgba(0,0,0,.5);
display:grid;place-items:center;transition:transform .3s var(--e),box-shadow .3s var(--e)}
.slab svg{width:46%;height:46%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.slab[data-badge]::after{content:attr(data-badge);position:absolute;top:-9px;right:-11px;padding:5px 9px;border-radius:100px;
font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#1a1200;line-height:1;
background:linear-gradient(180deg,#ffd27a,#ff9f1a);
box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,0,0,.25),0 8px 16px -6px rgba(255,159,26,.75)}
.slab--lg{--sz:min(42vw,300px);border-radius:22%}
.slab--lg[data-badge]::after{font-size:13px;padding:8px 14px;top:-12px;right:-14px}
a:hover .slab,.slab:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.6),inset 1px 0 0 rgba(255,255,255,.04),0 40px 60px -26px rgba(0,0,0,.95),0 3px 0 rgba(0,0,0,.5)}
/* the dock: three slabs in a row */
.dock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3.4vw,64px)}
@media (max-width:1160px){.dock{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dock-item{display:flex;flex-direction:column;gap:22px;padding-top:12px}
.dock-item h3{font-size:clamp(20px,1.8vw,26px);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.dock-item p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--t2);max-width:34ch}
.dock-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:14px;flex-wrap:wrap}
.dock-foot .k{color:var(--ink)}
.dock-item dl{display:grid;grid-template-columns:repeat(3,auto);gap:16px;justify-content:start;padding-top:6px}
.dock-item dt{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t4)}
.dock-item dd{margin-top:4px;font-size:13.5px;color:var(--t2);font-variant-numeric:tabular-nums}
@media (max-width:860px){.dock{grid-template-columns:1fr;gap:44px}}
/* the work table */
.wt{width:100%;border-collapse:collapse;font-size:15px}
.wt thead th{padding:0 20px 14px 0;text-align:left;color:var(--t4)}
.wt td{padding:22px 20px 22px 0;border-top:1px solid var(--line);vertical-align:top;text-align:left}
.wt tbody tr{transition:background .2s var(--e2);cursor:pointer}
.wt tbody tr:hover{background:var(--s1)}
.wt .yr{width:11ch;color:var(--t3);white-space:nowrap;font-variant-numeric:tabular-nums;padding-top:26px}
.wt .nm{font-size:clamp(20px,2vw,28px);font-weight:500;letter-spacing:-.02em;line-height:1.15;width:30%}
.wt .what{color:var(--t2);max-width:44ch;padding-top:24px}
.wt .role{white-space:nowrap;padding-top:26px;color:var(--t3)}
.wt .arr{width:28px;text-align:right;color:var(--t3);padding-right:0;padding-top:24px;transition:transform .25s var(--e),color .2s}
.wt tbody tr:hover .arr{color:var(--ink);transform:translateX(4px)}
@media (max-width:760px){.wt thead{display:none}.wt tr{display:block;padding:18px 0;border-top:1px solid var(--line)}
.wt td{display:block;padding:0;border:0}.wt .nm{width:auto}.wt .what{padding-top:6px}.wt .yr,.wt .role{display:inline-block;padding-top:10px;margin-right:18px;width:auto}
.wt .arr{display:none}}
/* ═══ CARDS AND SHEETS ═════════════════════════════════════════════════ */
.card,.en,.au,.lab,.project,.mode,.price,.tm,.place,.rec,.chart-wrap,.honest,.instrument,.ss-card,.field,.media,.mxt-wrap{
background:var(--s1);border-radius:var(--r-card);box-shadow:var(--top),var(--bottom),0 0 0 1px rgba(255,255,255,.03)}
.card,.en,.au,.lab,.project{transition:background .25s var(--e2),transform .25s var(--e)}
.card:hover,.en:hover,.au:hover,.lab:hover,.project:hover{background:var(--s2);transform:translateY(-2px)}
/* hairline grids keep their lines; the box gets the light */
.rules,.tiles,.modes,.shape,.pricing,.crew,.matrix,.phases,.spec,.clients{box-shadow:var(--top),var(--bottom),0 0 0 1px rgba(255,255,255,.03)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:clamp(16px,2vw,28px)}
.card{padding:clamp(24px,3vw,36px);display:flex;flex-direction:column}
.card > b{color:var(--ink);font-weight:700}
.card h3{margin:12px 0 10px;font-size:clamp(18px,1.7vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.card p{font-size:14px;line-height:1.6;color:var(--t2)}
.card p:has(+ .card-foot){margin-bottom:18px}
.card ul{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:4px}
.card li{display:flex;gap:10px;font-size:13.5px;color:var(--t2);line-height:1.5;padding:3px 0}
.card li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--t3);flex:none;margin-top:8px}
.card .card-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center}
.card .card-foot .k{color:var(--ink)}
.card .fig{display:none}
.rules{display:grid;gap:1px;background:var(--line);border-radius:var(--r-card);overflow:hidden}
.rule{background:var(--s1);padding:clamp(20px,2.2vw,28px);display:grid;grid-template-columns:32px 1fr;gap:18px}
.rule b{padding-top:3px;color:var(--t2)}
.rule h4{font-size:16px;font-weight:500;letter-spacing:-.01em;margin-bottom:8px;line-height:1.3}
.rule p{font-size:14px;line-height:1.65;color:var(--t2);max-width:56ch}
@media (min-width:1000px){.rules--2{grid-template-columns:1fr 1fr}}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r-card);overflow:hidden}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--s1);padding:clamp(24px,3.4vh,40px) clamp(18px,2vw,28px);display:flex;flex-direction:column}
.tile b{font-size:clamp(30px,3.2vw,50px);font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;color:var(--ink)}
.tile b small{font-size:.5em;color:var(--t3);font-weight:500}
.tile h4{margin-top:14px;font-size:14px;font-weight:500;line-height:1.5;color:var(--ink);max-width:24ch}
.tile span{margin-top:auto;padding-top:14px;color:var(--t4)}
.tile p{margin-top:12px;color:var(--t3)}
.engs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
@media (max-width:940px){.engs{grid-template-columns:1fr}}
.en{padding:clamp(24px,2.6vw,38px);display:flex;flex-direction:column}
.en-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:22px}
.en-top b{color:var(--ink)}
.en h3{font-size:clamp(20px,1.9vw,28px);font-weight:500;letter-spacing:-.025em;margin-bottom:10px;line-height:1.15}
.en > p{font-size:14px;line-height:1.65;color:var(--t2);max-width:38ch}
.en-for{margin-top:18px;padding:13px 15px;border-radius:10px;background:var(--s3);font-size:13.5px;line-height:1.6;color:var(--t2)}
.en-for b{color:var(--ink);display:block;margin-bottom:4px}
.en ul{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.en li{display:flex;gap:11px;padding:6px 0;font-size:13.5px;color:var(--t2);line-height:1.5}
.en li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--t3);flex:none;margin-top:8px}
.en-price{margin-top:auto;padding-top:20px;font-size:13px;color:var(--t3)}
.en-price b{color:var(--ink)}
/* ═══ SERVICE PANELS (kept for the archived homes) ═════════════════════ */
.panel{position:relative;max-width:var(--max);margin-inline:auto;min-height:min(72svh,720px);display:flex;align-items:center;overflow:hidden;
border-radius:var(--r-card);background:var(--s1);box-shadow:var(--top),var(--bottom)}
.panel + .panel{margin-top:clamp(16px,2vw,24px)}
.panel-fig{position:absolute;top:50%;right:4%;transform:translateY(-50%);width:min(40vw,600px);aspect-ratio:1;opacity:.6;pointer-events:none}
.panel-fig > *{position:absolute;inset:0}
.panel-fig--curve{top:8%;transform:none;opacity:.45;width:min(42vw,640px)}
.panel-body{position:relative;width:100%;padding:clamp(60px,9vh,120px) clamp(28px,4vw,80px);z-index:1}
.panel h2{margin-top:14px}
.panel p{margin-top:clamp(20px,3vh,32px);font-size:clamp(15px,1.2vw,17px);line-height:1.6;color:var(--t2);max-width:36ch}
.panel .btn{margin-top:clamp(22px,3vh,34px)}
.panel ul{margin-top:clamp(18px,2.4vh,26px);display:flex;flex-wrap:wrap;gap:8px;max-width:46ch}
.panel li{color:var(--t2);padding:7px 12px;border-radius:var(--r-chip);box-shadow:inset 0 0 0 1px var(--line)}
.panel-field{position:absolute;inset:0;opacity:.5;pointer-events:none}
.panel-field > hero-field{position:absolute;inset:0}
.panel-field::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,7,.9) 0%,rgba(5,5,7,.4) 45%,transparent 75%)}
.panel--field{min-height:min(78svh,760px)}
.panel--field h2{max-width:14ch}
.stack{display:grid}
.stack .panel{position:sticky;top:clamp(84px,12vh,120px);margin-top:0}
.stack .panel + .panel{margin-top:clamp(24px,4vh,48px)}
.stack + .wrap{margin-top:40px}
@media (max-width:900px){.panel{min-height:auto;display:block}.panel-fig{position:relative;top:auto;right:auto;transform:none;width:min(70vw,360px);margin:24px auto 0}
.panel-body{padding:clamp(28px,5vh,48px) clamp(22px,4vw,40px) clamp(40px,6vh,60px)}.stack .panel{position:relative;top:auto!important}}
.hero--field .hero-fig{inset:0}
.hero--field .hero-cap h1{font-size:clamp(34px,4.6vw,72px);letter-spacing:-.035em;line-height:1.02;max-width:12ch}
/* ═══ ROWS (archived homes) ════════════════════════════════════════════ */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,1fr) 26px;gap:clamp(16px,3vw,48px);align-items:center;padding:clamp(24px,3.4vh,40px) 0;border-bottom:1px solid var(--line);transition:padding-left .25s var(--e)}
a.row:hover{padding-left:12px}
.row h3{font-size:clamp(20px,2.2vw,32px);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.row .row-sub{display:block;margin-top:8px;font-size:14px;color:var(--t2);max-width:52ch}
.row .row-tags{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;color:var(--t4)}
.row .row-tags b{color:var(--t2)}
.row plot-curve{display:none}
.row-arrow{color:var(--t3);transition:transform .25s var(--e),color .2s}
a.row:hover .row-arrow{transform:translateX(4px);color:var(--ink)}
/* ═══ BELIEF ═══════════════════════════════════════════════════════════ */
.belief{position:relative}
.belief-bg{display:none}
.belief .wrap{position:relative}
.belief p{margin-top:clamp(22px,3.4vh,36px);font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:var(--t2);max-width:46ch}
.belief .btn{margin-top:clamp(26px,3.6vh,40px)}
/* ═══ THE SHEET (contact / pitch) ══════════════════════════════════════ */
.paper{position:relative;max-width:var(--max);margin-inline:auto;background:var(--paper);color:var(--paper-ink);border-radius:var(--r-sheet);
padding:clamp(44px,7vh,100px) clamp(28px,4vw,80px) clamp(28px,3.4vw,48px);overflow:hidden;
box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 2px 0 rgba(0,0,0,.5)}
.paper ::selection{background:var(--paper-ink);color:var(--paper)}
.paper-fig{display:none}
.paper > .in{position:relative}
.paper .lbl{color:var(--paper-t3)}
.paper h2{font-size:clamp(36px,5.2vw,80px);font-weight:500;letter-spacing:-.035em;line-height:1.02;max-width:16ch}
.paper h2 .mute{color:var(--paper-t3)}
.paper p{color:var(--paper-t2)}
.paper .btn{background:var(--paper-ink);color:var(--paper)}
.paper .btn:hover{background:#000;box-shadow:0 12px 24px -16px rgba(0,0,0,.6)}
.paper .chip{color:var(--paper-t2);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--paper-line)}
.paper .chip:hover{color:var(--paper-ink);box-shadow:inset 0 0 0 1px rgba(11,11,14,.3)}
.paper .chip[aria-pressed="true"]{background:var(--paper-ink);color:var(--paper);box-shadow:none}
.paper-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(50px,8vh,100px);
padding-top:24px;border-top:1px solid var(--paper-line);color:var(--paper-t3)}
.paper-meta div{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap}
.paper-meta b{color:var(--paper-ink)}
.paper-meta a:hover{color:var(--paper-ink)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:clamp(28px,4vw,70px);align-items:start;margin-top:40px}
.cleft p{font-size:15px;line-height:1.65;max-width:38ch}
.cleft .btn{margin-top:clamp(20px,2.6vh,32px)}
.cleft .note{margin-top:16px;font-size:13px;color:var(--paper-t3)}
.builder{border-radius:20px;padding:clamp(20px,2.4vw,32px);background:var(--paper-2);box-shadow:0 0 0 1px var(--paper-line),0 24px 48px -36px rgba(0,0,0,.4)}
.builder-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--paper-line);margin-bottom:20px}
.builder-head b{color:var(--paper-ink)}
.builder-head span{color:var(--paper-t3)}
.param{margin-bottom:20px}
.param > b{display:block;color:var(--paper-t2);margin-bottom:10px}
.result{margin-top:8px;padding-top:18px;border-top:1px solid var(--paper-line)}
.result p{font-size:13.5px;line-height:1.6;color:var(--paper-t3);min-height:2.6em}
.result p.ready{font-size:15px;color:var(--paper-ink)}
.result p.ready b{font-weight:600}
.result p.ready span{color:var(--paper-t2)}
.result .btn{margin-top:16px;padding:13px 22px}
.result .note{margin-top:11px;font-size:12px;color:var(--paper-t3)}
.steps{list-style:none;margin-top:20px;display:grid;gap:12px;counter-reset:s}
.steps li{position:relative;padding-left:34px;font-size:14.5px;line-height:1.6;color:var(--paper-t2)}
.steps li::before{counter-increment:s;content:"0" counter(s);position:absolute;left:0;top:4px;color:var(--paper-t3)}
.steps li b{color:var(--paper-ink);font-weight:600}
.form{display:grid;gap:20px;margin-top:28px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.fgrid{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:8px}
.fld label{color:var(--paper-t2)}
.fld label i{font-style:normal;letter-spacing:.02em;text-transform:none;font-weight:500;color:var(--paper-t3)}
.fld input,.fld textarea{font:inherit;font-size:15px;color:var(--paper-ink);background:var(--paper-2);border:0;box-shadow:inset 0 0 0 1px var(--paper-line);border-radius:var(--r-btn);padding:13px 14px;width:100%;
transition:box-shadow .2s var(--e2)}
.fld input:focus,.fld textarea:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--paper-ink)}
.fld textarea{min-height:150px;resize:vertical;line-height:1.55}
.fld input::placeholder,.fld textarea::placeholder{color:#8e8e98}
.fld.err input,.fld.err textarea{box-shadow:inset 0 0 0 1.5px #c8323f}
.fld .msg,.form-err{font-size:13px;color:#c8323f;line-height:1.5}
.form-err a{text-decoration:underline;text-underline-offset:3px;color:var(--paper-ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.form-foot .note{font-size:13px;color:var(--paper-t3)}
.form-foot .btn[disabled]{opacity:.55;cursor:progress;transform:none!important;box-shadow:none!important}
.note--priv{margin-top:-4px;font-size:13px;color:var(--paper-t3)}
.form-state{padding:clamp(10px,2vw,24px) 0;outline:0}
.form-state h3{margin-top:14px;font-size:clamp(28px,3vw,44px);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.form-state p{margin-top:12px;font-size:15px;line-height:1.65;max-width:44ch}
.form-state p b{color:var(--paper-ink);font-weight:600}
/* ═══ FOOTER: a spec sheet ═════════════════════════════════════════════ */
.foot{border-top:1px solid var(--line);padding:clamp(48px,6vh,80px) var(--m) 28px;margin-top:clamp(72px,10vh,140px)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:clamp(24px,4vw,60px);max-width:var(--max);margin-inline:auto}
@media (max-width:1000px){.foot-grid{grid-template-columns:repeat(2,1fr);gap:32px}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-brand p{margin-top:18px;font-size:14px;line-height:1.65;color:var(--t2);max-width:32ch}
.foot-brand .wm{display:none}
.foot-col h5{margin-bottom:14px;color:var(--t4)}
.foot-col a,.foot-col span{display:block;font-size:14px;color:var(--t2);padding:4px 0;transition:color .2s}
.foot-col a:hover{color:var(--ink)}
.foot-col b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.foot-spec{max-width:var(--max);margin:clamp(36px,5vh,64px) auto 0;padding-top:20px;border-top:1px solid var(--line);
display:flex;flex-wrap:wrap;gap:10px 28px;color:var(--t4);font-size:10.5px}
.foot-spec b{color:var(--t2);font-weight:700}
.foot-base{max-width:var(--max);margin:18px auto 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--t4);font-size:10.5px}
.foot-base a:hover{color:var(--ink)}
/* ═══ CASE STUDY / PAGE HEROES ═════════════════════════════════════════ */
.case-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding:120px var(--m) 0;
background:radial-gradient(60% 40% at 50% 0%,rgba(255,255,255,.04),transparent 70%)}
.case-fig{position:absolute;top:50%;right:-6%;transform:translateY(-56%);width:min(58vw,820px);aspect-ratio:1;opacity:.5;pointer-events:none}
.case-fig > *{position:absolute;inset:0}
.case-fig--wave{width:min(70vw,980px);aspect-ratio:2.2;right:-4%;opacity:.5}
.case-fig--model{opacity:.92;right:-3%;width:min(50vw,720px);transform:translateY(-52%)}
.case-fig--model > machined-model{position:absolute;inset:0}
.case-hero .scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,5,7,.4),transparent 24%,transparent 62%,var(--void))}
.case-hero .wrap{position:relative;padding-bottom:clamp(40px,6vh,70px)}
.case-hero .lbl{color:var(--t2)}
.case-hero h1{margin-top:clamp(14px,2vh,22px)}
.case-hero .display{margin-top:clamp(14px,2vh,22px)}
.case-hero .standfirst{margin-top:clamp(18px,2.6vh,30px);font-size:clamp(15px,1.3vw,19px);line-height:1.55;color:var(--t2);max-width:44ch}
.case-hero .standfirst b{color:var(--ink);font-weight:500}
.case-hero--short{min-height:min(78svh,760px)}
.case-hero--obj{min-height:min(92svh,860px);align-items:center;padding-top:132px}
.case-hero--obj .wrap{padding-bottom:0}
.case-hero--obj .poster{min-height:0}
.case-hero--obj .poster-copy h1{margin-top:0}
.meta{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap;margin-top:clamp(28px,4vh,44px);padding-top:clamp(18px,2.6vh,28px);border-top:1px solid var(--line)}
.meta div{display:flex;flex-direction:column;gap:6px}
.meta b{color:var(--t4)}
.meta span{font-size:14px;color:var(--t2);font-variant-numeric:tabular-nums}
.meta span.hi{color:var(--ink)}
.media{max-width:var(--max);margin-inline:auto;aspect-ratio:16/9;overflow:hidden;position:relative}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.media--tone img{filter:saturate(.85) contrast(1.05)}
.media .cap{position:absolute;left:clamp(14px,2vw,28px);bottom:clamp(12px,1.6vw,22px);color:var(--t2);padding:7px 11px;border-radius:8px;background:rgba(5,5,7,.7)}
.prose{max-width:66ch}
.prose h2{margin-bottom:clamp(16px,1.9vw,26px);max-width:20ch}
.prose p{font-size:clamp(15px,1.24vw,17.5px);line-height:1.7;color:var(--t2)}
.prose p + p{margin-top:18px}
.prose p strong{color:var(--ink);font-weight:500}
.prose .kicker{display:block;color:var(--ink);margin-bottom:clamp(16px,1.9vw,24px)}
.pull{margin-block:clamp(30px,3.6vw,54px);padding:clamp(22px,2.8vw,40px);background:var(--s1);border-radius:var(--r-card);box-shadow:var(--top),var(--bottom)}
.pull b{display:block;color:var(--t3);margin-bottom:15px}
.pull p{font-size:clamp(17px,1.7vw,24px);line-height:1.4;font-weight:500;color:var(--ink);letter-spacing:-.018em;max-width:33ch}
.chart-wrap{margin-block:clamp(32px,3.8vw,58px);padding:clamp(20px,2.4vw,34px)}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:22px;flex-wrap:wrap}
.chart-head b{color:var(--ink)}
.chart{width:100%;aspect-ratio:2.5/1}
@media (max-width:700px){.chart{aspect-ratio:1.4/1}}
.chart-key{display:flex;gap:clamp(16px,3vw,34px);flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.ck{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t2)}
.ck i{width:20px;height:0;flex:none;border-top:1.6px solid var(--ink)}
.ck.b i{border-top:1.6px dashed var(--t3)}
.ck.c i{border-top:1.6px solid var(--am)}
.chart-note{margin-top:16px;font-size:13px;line-height:1.66;color:var(--t3);max-width:64ch}
.phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r-card);overflow:hidden}
.phases--5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1000px){.phases--5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:960px){.phases{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.phases,.phases--5{grid-template-columns:1fr}}
.ph{background:var(--s1);padding:clamp(22px,2.4vw,32px) clamp(16px,1.8vw,24px);display:flex;flex-direction:column;min-height:230px}
.ph b{color:var(--ink);margin-bottom:auto}
.ph h4{font-size:clamp(16px,1.4vw,20px);font-weight:500;letter-spacing:-.015em;margin:18px 0 10px;line-height:1.25}
.ph p{font-size:13.5px;line-height:1.65;color:var(--t2)}
.ph span{margin-top:14px;color:var(--t3)} /* t4 measured 4.47:1 on s1 at 11px */
.honest{padding:clamp(24px,3vw,44px)}
.honest h3{font-size:clamp(20px,2vw,28px);font-weight:500;letter-spacing:-.02em;margin-bottom:22px;line-height:1.15}
.honest div{display:grid;grid-template-columns:28px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.honest b{color:var(--am);padding-top:3px}
.honest p{font-size:14px;line-height:1.7;color:var(--t2)}
.honest p strong{color:var(--ink);font-weight:500}
.quote blockquote{font-size:clamp(22px,3vw,46px);font-weight:500;line-height:1.2;letter-spacing:-.025em;max-width:26ch;text-wrap:balance}
.quote figcaption{margin-top:clamp(16px,2.4vh,26px)}
.tl{margin-top:40px}
.tl-rail{position:relative;height:1px;background:var(--line);margin-bottom:26px;overflow:hidden}
.tl-rail i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform 1.6s var(--e)}
.tl.in .tl-rail i{transform:scaleX(1)}
.tl-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,32px)}
@media (max-width:880px){.tl-items{grid-template-columns:repeat(2,1fr);gap:26px}}
.tl-item b{display:block;color:var(--ink)}
.tl-item h4{margin-top:10px;font-size:16px;font-weight:500;letter-spacing:-.01em;line-height:1.25}
.tl-item p{margin-top:8px;font-size:13.5px;line-height:1.65;color:var(--t2)}
.aud{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:clamp(14px,1.8vw,26px)}
.au{padding:clamp(24px,2.8vw,40px)}
.au-top{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.au-top i{width:7px;height:7px;border-radius:50%;background:var(--ink);flex:none}
.au-top b{color:var(--ink)}
.au h3{font-size:clamp(19px,1.8vw,26px);font-weight:500;letter-spacing:-.022em;margin-bottom:14px;line-height:1.15}
.au > p{font-size:14.5px;line-height:1.7;color:var(--t2);max-width:42ch}
.au ul{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:2px}
.au li{display:flex;gap:12px;padding:7px 0;font-size:13.5px;line-height:1.6;color:var(--t2)}
.au li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--t3);flex:none;margin-top:9px}
.next{border-top:1px solid var(--line);margin-top:clamp(96px,14vh,176px)}
.next a{display:block;padding:clamp(60px,9vh,110px) var(--m);transition:background .25s var(--e2)}
.next a:hover{background:var(--s1)}
.next .in{max-width:var(--max);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,50px)}
.next .in p{margin-top:12px;font-size:15px;color:var(--t2);max-width:44ch}
.next h2{margin-top:12px;font-size:clamp(32px,4.6vw,72px);font-weight:500;letter-spacing:-.035em;line-height:1}
.next plot-curve{display:none}
.next .in::after{content:"→";font-size:clamp(28px,3vw,44px);color:var(--t3);transition:transform .25s var(--e),color .2s;flex:none}
/* the door to the next room, painted its colour, with a look through it */
.next--door{border-top:0;background:var(--door,var(--s1));
--t2:color-mix(in oklab,var(--door,#111),#fff 80%);--t3:color-mix(in oklab,var(--door,#111),#fff 66%);--line:color-mix(in oklab,var(--door,#111),#fff 14%)}
.next--door a:hover{background:color-mix(in oklab,var(--door,#111),#fff 4%)}
.next--door .in{align-items:center}
.next--door .in::after{order:1}
.next--door .in > div:first-child{order:0;flex:1}
.next-peek{order:2;flex:none;width:min(34vw,500px);aspect-ratio:16/10;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--top),0 30px 60px -30px rgba(0,0,0,.7)}
.next-peek img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--e)}
.next--door a:hover .next-peek img{transform:scale(1.04)}
@media (max-width:760px){.next--door .in{flex-wrap:wrap}.next-peek{width:100%}}
.next a:hover .in::after{transform:translateX(6px);color:var(--ink)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:clamp(16px,2vw,28px)}
.gallery figure > div{aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;background:var(--s1);position:relative;box-shadow:var(--top),var(--bottom)}
.gallery figure > div > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gallery figcaption{margin-top:12px}
/* ═══ LABS ═════════════════════════════════════════════════════════════ */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.bench{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:clamp(12px,1.5vw,20px)}
.lab{position:relative;overflow:hidden;display:flex;flex-direction:column}
.lab[hidden]{display:none}
.bench.all .lab.feature{grid-column:1 / -1}
.lab-media{position:relative;aspect-ratio:16/10;border-bottom:1px solid var(--line);background:var(--s2);overflow:hidden}
.bench.all .lab.feature .lab-media{aspect-ratio:21/9}
.lab-media > :not(.tag){position:absolute;inset:0;width:100%;height:100%}
.lab-media > motion-icon{inset:12% 14%;width:auto;height:auto}
.lab-media > plot-curve{opacity:.9}
.lab-media img,.lab-media video{object-fit:cover}
.lab-body{padding:clamp(16px,1.8vw,22px);display:flex;flex-direction:column;gap:8px;flex:1}
.lab-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lab h3{font-size:clamp(18px,1.6vw,23px);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.lab p{font-size:14px;line-height:1.6;color:var(--t2)}
.tag{white-space:nowrap;padding:5px 10px;border-radius:8px;color:var(--ink);background:var(--s3);box-shadow:var(--top)}
.tag--abs{position:absolute;top:12px;left:12px;font-size:9.5px;padding:4px 8px;background:rgba(5,5,7,.8)}
/* ═══ COMPANY ══════════════════════════════════════════════════════════ */
.crt-wrap{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:5;transform-origin:0 0;overflow:hidden;will-change:transform;
background:#050508;box-shadow:0 40px 100px -30px rgba(0,0,0,.9)}
.crt-wrap > hero-field{position:absolute;inset:0}
.crt-hero{position:relative;height:100svh;min-height:620px}
.crt-fade{position:absolute;inset:0;pointer-events:none;z-index:6;background:linear-gradient(180deg,rgba(5,5,7,.5),transparent 18%,transparent 68%,var(--void))}
.crt-cap{position:absolute;left:var(--m);bottom:clamp(28px,4.4vh,56px);right:var(--m);z-index:7;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;pointer-events:none}
.crt-cap h1{font-size:clamp(28px,3vw,44px);font-weight:500;letter-spacing:-.025em;line-height:1.1}
.crt-cap p{margin-top:12px;font-size:14px;color:var(--t2)}
.crt-dock{width:min(880px,100%);margin:0 0 clamp(44px,7vh,72px);aspect-ratio:16/9}
/* The tube's cursor (6 October 2026, the user asked): a click changes the channel, so the pointer says so. A chip in the
label voice rides just below and right of the hand, clear of the spot being clicked. Fine pointers only; a phone reads
"Tap the tube" in the caption. */
.crt-tag{position:fixed;left:0;top:0;z-index:9;pointer-events:none;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 11px 0 10px;border-radius:var(--r-chip);
background:rgba(16,16,20,.92);box-shadow:inset 0 0 0 1px var(--edge-2),0 12px 26px -14px rgba(0,0,0,.95);font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1;
text-transform:uppercase;color:var(--ink);white-space:nowrap;opacity:0;transition:opacity .16s var(--e2);will-change:transform}
.crt-tag.on{opacity:1}
.crt-tag i{width:6px;height:6px;border-radius:50%;background:var(--cy);box-shadow:var(--glow-cy)}
.crt-tag span{display:inline-block;transition:transform .12s var(--e2)}
.crt-tag.press span{transform:scale(.92)}
@media (hover:none),(pointer:coarse){.crt-tag{display:none}}
@media (prefers-reduced-motion:reduce){.crt-tag,.crt-tag span{transition:none}}
@media (max-width:760px){
.crt-wrap{box-shadow:none;position:absolute!important;transform:none!important;width:100%!important;height:100svh!important;border-radius:0!important;background:var(--void)}
.crt-wrap > hero-field{inset:auto 0;top:50%;height:auto;aspect-ratio:16/9;transform:translateY(-58%)}
.crt-dock{display:none}
}
.eras{border-top:1px solid var(--line)}
.era{display:grid;grid-template-columns:clamp(64px,9vw,110px) minmax(0,1fr);column-gap:clamp(14px,3vw,48px);row-gap:8px;align-items:baseline;
padding:clamp(20px,2.8vh,32px) 0;border-bottom:1px solid var(--line)}
.era > span{font-size:clamp(17px,2vw,30px);font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--t3)}
.era h3{font-size:clamp(17px,1.7vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.era plot-curve{display:none}
.era p{grid-column:2;font-size:14px;line-height:1.6;color:var(--t2);max-width:60ch}
.crew{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r-card);overflow:hidden}
@media (max-width:1000px){.crew{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.crew{grid-template-columns:1fr}}
.tm{background:var(--s1);padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:16px;border-radius:0;box-shadow:none}
.tm-mark{width:64px;height:64px;border-radius:16px;background:linear-gradient(165deg,#2b2b32,#111115);box-shadow:var(--top-2),inset 0 -2px 0 rgba(0,0,0,.6);overflow:hidden}
.tm-mark plot-curve{display:none}
.tm h3{font-size:clamp(17px,1.4vw,21px);font-weight:500;letter-spacing:-.018em;line-height:1.2}
.tm-yrs{margin-top:6px;color:var(--t3)}
.tm p{font-size:14px;line-height:1.65;color:var(--t2)}
.tm ul{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.tm li{font-size:12.5px;color:var(--t3);padding:4px 0}
.team-note{margin-top:26px;font-size:14px;color:var(--t2);max-width:64ch;line-height:1.7}
.team-note b{color:var(--ink);font-weight:500}
.archive{display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;padding-bottom:16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
margin-inline:calc(-1 * var(--m));padding-inline:var(--m);scrollbar-width:thin;scrollbar-color:var(--edge-2) transparent}
.archive figure{flex:0 0 auto;width:min(78vw,420px);scroll-snap-align:start}
.archive figure > div{aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;background:var(--s1);box-shadow:var(--top),var(--bottom)}
.archive figure > div > *{width:100%;height:100%;object-fit:cover;filter:saturate(.8)}
.archive figure:hover > div > *{filter:saturate(1)}
.archive figcaption{margin-top:10px;display:flex;justify-content:space-between;gap:12px;color:var(--t4)}
.archive figcaption b{color:var(--t2)}
.places{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(16px,2vw,28px)}
.place{padding:clamp(24px,3vw,38px);display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.place span.lbl{color:var(--t4)}
.place h3{margin:10px 0 6px;font-size:clamp(20px,2vw,28px);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.place p{font-size:13.5px;color:var(--t2)}
.place b{font-size:clamp(18px,1.8vw,24px);font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
.letter{max-width:62ch;font-size:clamp(16px,1.25vw,19px);line-height:1.7;color:var(--t2)}
.letter p{margin:0}
.letter p + p{margin-top:20px}
.letter strong{color:var(--ink);font-weight:500}
.letter .sig{margin-top:30px}
.letter .sig b{display:block;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:6px}
.shape{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r-card);overflow:hidden}
@media (max-width:860px){.shape{grid-template-columns:1fr}}
.shape > div{background:var(--s1);padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:10px}
.shape b{font-size:clamp(30px,3.4vw,52px);font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.shape h3{font-size:clamp(18px,1.6vw,23px);font-weight:500;letter-spacing:-.02em;margin-top:6px;line-height:1.15}
.shape p{font-size:14px;line-height:1.65;color:var(--t2)}
.day1{margin-top:clamp(28px,4vh,44px);color:var(--ink)}
/* ═══ STYLESHEET PAGES ═════════════════════════════════════════════════ */
.ss{background-image:none}
.ss-head{padding:142px var(--m) 0}
.ss-head h1{font-weight:500;letter-spacing:-.035em;line-height:.96;font-size:clamp(46px,7vw,104px);max-width:14ch}
.ss-head h1 em{font-weight:700}
.ss-head p{margin-top:clamp(20px,2.2vw,30px);max-width:56ch;font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:var(--t2)}
.ss-head p b{color:var(--ink);font-weight:500}
.ss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(244px,100%),1fr));gap:clamp(12px,1.4vw,20px)}
.ss-grid--wide{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.ss-card{overflow:hidden;display:flex;flex-direction:column;transition:background .25s var(--e2),transform .25s var(--e)}
.ss-card:hover{background:var(--s2);transform:translateY(-2px)}
.ss-card[hidden]{display:none}
.ss-fig{position:relative;aspect-ratio:1}
.ss-fig > plot-curve{position:absolute;inset:0}
.ss-fig > div{position:absolute;inset:12%}
.ss-fig > div > *{position:absolute;inset:0}
.ss-meta{padding:14px 16px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.ss-meta > div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ss-meta b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.ss-meta > div span{color:var(--t4);white-space:nowrap}
.ss-meta .d{font-size:12px;color:var(--t2);line-height:1.5;font-variant-numeric:tabular-nums}
.ss-meta .u{color:var(--t4)}
.instrument{position:relative;overflow:hidden}
.instrument-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.instrument-head b{color:var(--ink)}
.instrument-body{position:relative;height:min(38vw,380px)}
.instrument-body > *{position:absolute;inset:0}
.field{position:relative;min-height:min(72vh,640px);overflow:hidden;background:var(--void)}
.field > hero-field,.field > machined-model{position:absolute;inset:0}
.field-cap{position:absolute;left:clamp(18px,2.4vw,34px);bottom:clamp(16px,2vw,28px);right:clamp(18px,2.4vw,34px);display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;pointer-events:none}
.field-cap b{display:block;font-size:clamp(17px,1.7vw,24px);font-weight:500;letter-spacing:-.015em}
.field-cap span{display:block;font-size:13px;color:var(--t2);margin-top:4px;max-width:52ch}
.field-cap .n{margin-top:0;color:var(--t4)}
.field-controls{position:absolute;top:clamp(14px,1.8vw,24px);right:clamp(14px,1.8vw,24px);z-index:5;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.select{font-family:var(--type);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
background-color:var(--s2);border:0;box-shadow:inset 0 0 0 1px var(--edge-2);border-radius:var(--r-btn);padding:10px 32px 10px 14px;appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat;background-position:right 13px center}
.notes{margin-top:22px;font-size:13px;color:var(--t3);max-width:72ch;line-height:1.7}
.rulesgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(24px,3vw,44px)}
.rulesgrid b{color:var(--ink)}
.rulesgrid p{margin-top:8px;font-size:14px;line-height:1.65;color:var(--t2)}
.ss-grid-container{margin-top:clamp(22px,2.6vw,34px)}
/* ═══ 404 ══════════════════════════════════════════════════════════════ */
.err{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
.err-fig{position:absolute;inset:0;z-index:0}
.err-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(75% 70% at 50% 52%,rgba(5,5,7,.55) 0%,rgba(5,5,7,.3) 45%,var(--void) 100%)}
.err-body{position:relative;z-index:10;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:140px var(--m) 80px}
.err-body h1{font-weight:500;letter-spacing:-.05em;line-height:.86;font-size:clamp(110px,22vw,320px)}
.err-body p{margin:clamp(20px,2.4vw,32px) 0 0;max-width:44ch;font-size:clamp(15px,1.2vw,17px);line-height:1.6;color:var(--t2)}
.err-body p b{color:var(--ink);font-weight:500}
.err-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(26px,3vw,40px)}
.readout{position:relative;z-index:10;display:flex;align-items:center;gap:clamp(14px,2vw,30px);flex-wrap:wrap;padding:0 var(--m) clamp(18px,3.2vw,42px)}
.ro{display:flex;flex-direction:column;gap:5px}
.ro b{color:var(--t4)}
.ro span{font-size:13px;color:var(--t2);font-variant-numeric:tabular-nums}
.ro span i{font-style:normal;color:var(--red)}
.ro .cursor{animation:blink 1.2s step-end infinite}
.readout .tail{margin-left:auto;color:var(--t4)}
/* ═══ PAGE TRANSITION ══════════════════════════════════════════════════ */
.pt{position:fixed;inset:0;z-index:90;background:var(--void);display:flex;align-items:center;justify-content:center;
pointer-events:none;opacity:0;transition:opacity .3s var(--e)}
.pt.on{opacity:1;pointer-events:auto}
.pt.instant{transition:none}
.pt svg{width:clamp(56px,7vw,96px);height:auto;overflow:visible}
.pt .o{fill:none;stroke:var(--t5);stroke-width:.5;opacity:.5}
.pt .f{fill:var(--ink);clip-path:inset(0 100% 0 0)}
.pt.on .f{animation:wipe .7s var(--e) forwards}
.pt.quick .f{animation-duration:.45s}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
.pt .tag{position:absolute;bottom:clamp(20px,4vh,40px);left:50%;transform:translateX(-50%);border:0;background:none;padding:0;box-shadow:none;color:var(--t4);white-space:nowrap}
/* ═══ SERVICE / PRODUCT PAGES ══════════════════════════════════════════ */
.faq{max-width:66ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;display:flex;align-items:baseline;justify-content:space-between;gap:20px;font-size:16px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{font-style:normal;font-size:18px;font-weight:400;color:var(--t3);flex:none;transition:transform .25s var(--e),color .2s}
.faq details[open] summary i{transform:rotate(45deg);color:var(--ink)}
.faq p{font-size:14.5px;line-height:1.7;color:var(--t2);max-width:60ch;padding:0 0 22px}
.crumb{display:flex;align-items:center;gap:10px;margin-bottom:clamp(14px,2vh,22px);color:var(--t4)}
.crumb a{color:var(--t2);transition:color .2s}.crumb a:hover{color:var(--ink)}
.crumb i{font-style:normal;color:var(--t4)}
.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
@media (max-width:860px){.projects{grid-template-columns:1fr}}
.project{position:relative;display:flex;flex-direction:column;overflow:hidden}
.project-fig{position:relative;aspect-ratio:16/9;border-bottom:1px solid var(--line);background:var(--s2);overflow:hidden}
.project-fig > *{position:absolute;inset:6% 8%}
.project-fig > img,.project-fig > picture > img{inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.project-body{padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:12px;flex:1}
.project-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.project h3{font-size:clamp(24px,2.6vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.project > .project-body > p{font-size:15px;line-height:1.6;color:var(--t2);max-width:46ch}
.project dl{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.project dt{color:var(--t4)}
.project dd{margin-top:4px;font-size:13.5px;color:var(--t2);font-variant-numeric:tabular-nums}
.project .go{position:absolute;top:clamp(14px,1.8vw,22px);right:clamp(14px,1.8vw,22px);width:38px;height:38px;border-radius:50%;
display:grid;place-items:center;color:var(--t2);background:rgba(5,5,7,.7);box-shadow:inset 0 0 0 1px var(--edge-2);transition:background .2s,color .2s,transform .25s var(--e)}
.project:hover .go{background:var(--ink);color:var(--void);transform:rotate(-45deg)}
.clients{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r-card);overflow:hidden}
@media (max-width:900px){.clients{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.clients{grid-template-columns:repeat(2,1fr)}}
.clients div{background:var(--s1);padding:clamp(20px,2.6vh,30px) clamp(14px,1.6vw,22px);font-size:clamp(15px,1.4vw,20px);font-weight:500;letter-spacing:-.01em;color:var(--t2)}
.alt-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--edge-2) transparent;overscroll-behavior-x:contain}
.alt{width:100%;min-width:900px;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.6}
.alt th,.alt td{text-align:left;vertical-align:top;padding:clamp(14px,1.6vw,22px) clamp(12px,1.4vw,20px);border-top:1px solid var(--line)}
.alt thead th{border-top:0;padding-top:0;vertical-align:bottom}
.alt thead b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.alt thead span{display:block;margin-top:4px;color:var(--t4)}
.alt tbody th{color:var(--t3);white-space:nowrap;padding-left:0;width:1%}
.alt td{color:var(--t2)}
.alt .us{background:var(--s1);color:var(--ink)}
.alt thead .us{border-radius:12px 12px 0 0;background:var(--s2)}
.alt thead .us b{color:var(--ink)}
.alt tbody tr:last-child .us{border-radius:0 0 12px 12px}
.alt-note{margin-top:22px;font-size:14px;line-height:1.7;color:var(--t2);max-width:70ch}
.alt-note b{color:var(--ink);font-weight:500}
.alt thead th:first-child,.alt tbody th{position:sticky;left:0;background:var(--void);z-index:1}
.alt-hint{display:none;margin:-8px 0 16px;color:var(--t4)}
@media (max-width:1000px){.alt-hint{display:block}}
.svc-nav,.tool-nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-block:1px solid var(--line)}
.svc-nav a,.tool-nav a{padding:clamp(22px,3vh,34px) clamp(16px,2vw,32px) clamp(22px,3vh,34px) 0;display:flex;flex-direction:column;gap:8px}
.svc-nav a + a,.tool-nav a + a{text-align:right;align-items:flex-end;border-left:1px solid var(--line);padding:clamp(22px,3vh,34px) 0 clamp(22px,3vh,34px) clamp(16px,2vw,32px)}
.svc-nav b,.tool-nav b{color:var(--t4)}
.svc-nav span,.tool-nav span{font-size:clamp(17px,2vw,28px);font-weight:500;letter-spacing:-.02em;color:var(--ink);transition:color .2s}
.svc-nav a:hover span,.tool-nav a:hover span{color:var(--t2)}
.notes-list{border-top:1px solid var(--line)}
.nt{display:grid;grid-template-columns:clamp(90px,12vw,160px) minmax(0,1fr) auto;gap:clamp(14px,3vw,40px);align-items:baseline;padding:clamp(22px,3vh,34px) 0;border-bottom:1px solid var(--line)}
.nt-cat{color:var(--ink)}
.nt h3{font-size:clamp(18px,2vw,30px);font-weight:500;letter-spacing:-.02em;line-height:1.2;max-width:30ch}
.nt-meta{white-space:nowrap;color:var(--t4)}
@media (max-width:640px){.nt{grid-template-columns:1fr;gap:8px}}
.contact-hero{padding:clamp(140px,20vh,220px) var(--m) 0}
.contact-hero .standfirst{margin-top:clamp(18px,2.6vh,30px);font-size:clamp(15px,1.3vw,19px);line-height:1.55;color:var(--t2);max-width:50ch}
.modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r-card);overflow:hidden}
@media (max-width:1000px){.modes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.modes{grid-template-columns:1fr}}
.mode{background:var(--s1);padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:10px;position:relative;border-radius:0;box-shadow:none}
.mode .fig{display:none}
.mode > b{color:var(--ink)}
.mode h3{font-size:clamp(19px,1.7vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.15;overflow-wrap:anywhere}
.mode p{font-size:14px;line-height:1.65;color:var(--t2);overflow-wrap:anywhere}
.mode ul{display:grid;gap:4px;margin-top:6px}
.mode li{display:flex;gap:10px;font-size:13.5px;color:var(--t2);line-height:1.5}
.mode li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--t3);flex:none;margin-top:8px}
.mode .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.mode .foot span:first-child{min-width:0;font-size:13px;color:var(--t3)}
.mode .foot span b{color:var(--ink);font-weight:600}
.matrix{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:1px;background:var(--line);border-radius:var(--r-card);overflow:hidden}
.mx{background:var(--s1);padding:18px 20px 20px}
.mx b{display:block;color:var(--ink);margin-bottom:8px}
.mx p{font-size:14px;line-height:1.6;color:var(--t2)}
.record{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:clamp(14px,1.8vw,26px)}
.rec{padding:clamp(20px,2.2vw,28px)}
.rec b{display:block;color:var(--t3);margin-bottom:10px}
.rec h4{font-size:17px;font-weight:500;letter-spacing:-.01em;margin-bottom:6px;line-height:1.25}
.rec p{font-size:14px;line-height:1.6;color:var(--t2)}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:1px;background:var(--line);border-radius:var(--r-card);overflow:hidden}
.spec div{background:var(--s1);padding:clamp(20px,2.4vw,32px) clamp(18px,2vw,28px)}
.spec b{display:block;color:var(--ink);margin-bottom:10px}
.spec h4{font-size:clamp(17px,1.5vw,21px);font-weight:500;letter-spacing:-.015em;margin-bottom:8px;line-height:1.25}
.spec p{font-size:14px;line-height:1.64;color:var(--t2)}
.pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r-card);overflow:hidden}
@media (max-width:860px){.pricing{grid-template-columns:1fr}}
.price{background:var(--s1);padding:clamp(24px,2.8vw,40px);display:flex;flex-direction:column;gap:8px;border-radius:0;box-shadow:none}
.price > b{color:var(--ink)}
.price .n{font-size:clamp(36px,4vw,58px);font-weight:500;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;margin-top:6px}
.price .n small{font-size:.32em;color:var(--t3);font-weight:500;letter-spacing:0;margin-left:6px}
.price p{font-size:14px;line-height:1.6;color:var(--t2)}
.price ul{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:4px}
.price li{font-size:13.5px;color:var(--t2);display:flex;gap:10px}
.price li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--t3);flex:none;margin-top:8px}
.price--hi{background:var(--s3)}
.mxt-wrap{overflow:hidden}
.mxt{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.6}
.mxt th,.mxt td{text-align:left;vertical-align:top;padding:clamp(14px,1.6vw,20px) clamp(14px,1.6vw,22px);border-top:1px solid var(--line)}
.mxt thead th{border-top:0;background:var(--s2);padding-top:14px;padding-bottom:14px;color:var(--t3)}
.mxt tbody th{width:28%;font-weight:400}
.mxt tbody th b{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.mxt tbody th span{display:block;margin-top:4px;color:var(--t3);font-size:13px;line-height:1.55}
.mxt td{color:var(--t2)}
.mxt td.rec{color:var(--ink);background:none;box-shadow:none;border-radius:0;padding:clamp(14px,1.6vw,20px) clamp(14px,1.6vw,22px)}
.mxt tbody tr{transition:background .2s var(--e2)}
.mxt tbody tr:hover{background:var(--s2)}
.mxt tfoot td{border-top:1px solid var(--edge-2);font-size:13px;color:var(--t3);background:var(--s2)}
.mxt tfoot td b{color:var(--t2);font-weight:600}
@media (max-width:760px){
.mxt thead{display:none}
.mxt tbody tr,.mxt tfoot tr{display:block;padding:14px clamp(14px,4vw,22px) 16px;border-top:1px solid var(--line)}
.mxt tbody th,.mxt td{display:block;width:auto;padding:0;border-top:0}
.mxt td{margin-top:10px;padding-left:16px}
.mxt td.rec{padding:0 0 0 16px}
.mxt td::before{content:attr(data-th);display:block;color:var(--t4);margin-bottom:3px}
.mxt tfoot td{padding-left:0;border-top:0}
}
/* ═══ REDUCED MOTION / CONTRAST / PRINT ════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
.alert{transform:none;opacity:1}
.tl-rail i{transform:scaleX(1)}
.pt{display:none}
}
@media (prefers-contrast:more){
:root{--t2:#d2d2d8;--t3:#a6a6ae;--t4:#8a8a92;--line:rgba(255,255,255,.2);--edge-2:rgba(255,255,255,.36)}
}
@media print{
.nav,.menu,.pt,.hero-fig,.panel-fig,.belief-bg,.paper-fig,.crt-wrap,.menu-figs,hero-field,machined-model,motion-icon,harmo-graph{display:none!important}
body{background:#fff;color:#000}
*{color:#000!important;border-color:#bbb!important;background:transparent!important;-webkit-text-fill-color:#000!important;box-shadow:none!important}
.sec,.sec--pad{padding:20px var(--m);break-inside:avoid}
a[href^="http"]::after,a[href^="mailto"]::after{content:" (" attr(href) ")";font-size:9pt}
}
/* ═══ STORY PASS — posters that alternate, photo slots, the facts table ═══ */
.poster--flip .poster-obj{order:-1}
.tool{scroll-margin-top:110px}
.tool .spec{margin-top:clamp(28px,4vh,44px)}
.spec--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.spec--3{grid-template-columns:1fr}}
.poster-copy .fence{max-width:38ch}
.photo{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;margin:0;
background:linear-gradient(165deg,var(--s3),var(--s1));box-shadow:var(--top),var(--bottom);display:grid;align-items:end;padding:18px 20px}
.photo--wide{aspect-ratio:16/9}
.photo--tall{aspect-ratio:4/5;max-width:440px}
.photo::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 0%,rgba(255,255,255,.05),transparent 70%)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo figcaption{position:relative;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.photo figcaption b{color:var(--ink)}
.echo-bed{position:absolute;inset:-34% -22%;opacity:.32;pointer-events:none;
-webkit-mask:radial-gradient(50% 50% at 50% 50%,#000 28%,transparent 70%);mask:radial-gradient(50% 50% at 50% 50%,#000 28%,transparent 70%)}
.echo-bed > hero-field{position:absolute;inset:0}
.poster-obj > .alert,.poster-obj > .slab,.poster-obj > .photo{position:relative}
.facts{width:100%;border-collapse:collapse;font-size:14.5px}
.facts th{width:24%;padding:21px 24px 18px 0;text-align:left;vertical-align:top;border-top:1px solid var(--line);color:var(--ink)}
.facts td{padding:18px 0;border-top:1px solid var(--line);color:var(--t2);line-height:1.55;vertical-align:top;max-width:64ch}
.facts td b{color:var(--ink);font-weight:600}
@media (max-width:640px){.facts tr{display:block;padding:16px 0;border-top:1px solid var(--line)}.facts th,.facts td{display:block;width:auto;padding:0;border:0}.facts th{margin-bottom:6px}}
.mode ul{margin-top:4px}
.sechead + .facts{margin-top:-8px}
.dock-item p{max-width:30ch}
/* ═══ THE LABEL — the brief, one step at a time, printed as you answer ══════ */
.label-form{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:clamp(20px,3vw,40px);align-items:start;position:relative}
@media (max-width:760px){.label-form{grid-template-columns:1fr}.label-form .label{order:-1;max-width:340px}}
.steps-nav{display:flex;gap:8px;margin-bottom:20px}
.steps-nav b{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--paper-t3);padding:6px 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--paper-line);font-variant-numeric:tabular-nums;transition:color .2s,background .2s}
.steps-nav b.on{color:var(--paper);background:var(--paper-ink);box-shadow:none}
.steps-nav b.done{color:var(--paper-ink)}
.step{border:0;padding:0;margin:0;min-width:0}
.step legend{display:block;padding:0;margin-bottom:12px;color:var(--paper-t2);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.step .form{margin-top:0}
.step-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
.step-foot .note{font-size:13px;color:var(--paper-t3)}
.label{position:relative;background:var(--paper-2);color:var(--paper-ink);border-radius:14px;padding:18px 18px 16px;min-height:380px;
box-shadow:0 0 0 1px var(--paper-line),0 24px 40px -28px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:14px;
transition:transform .35s var(--e),box-shadow .35s var(--e)}
.label.ready{transform:rotate(-.8deg);box-shadow:0 0 0 1px var(--paper-line),0 30px 44px -26px rgba(0,0,0,.6)}
.label-top{display:flex;justify-content:space-between;gap:10px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-t3);font-variant-numeric:tabular-nums}
.label-code{font-size:92px;font-weight:700;letter-spacing:-.05em;line-height:.9;color:var(--paper-ink);font-variant-numeric:tabular-nums;min-height:84px}
.label-spec{display:grid;gap:7px;border-top:1px solid var(--paper-line);padding-top:12px;margin:0}
.label-spec div{display:grid;grid-template-columns:54px minmax(0,1fr);gap:10px;align-items:baseline}
.label-spec dt{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-t3)}
.label-spec dd{margin:0;font-size:12.5px;color:var(--paper-t3);line-height:1.35;letter-spacing:.02em}
.label-spec dd.set{color:var(--paper-ink);font-weight:600;letter-spacing:0}
.label-fit{border-top:1px solid var(--paper-line);padding-top:12px;font-size:13px;line-height:1.45;color:var(--paper-t2);margin:0}
.label-fit b{display:block;color:var(--paper-ink);font-weight:600}
.label-fit span{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:var(--paper-t3)}
.label-bars{display:flex;gap:2px;height:34px;align-items:stretch;margin-top:auto}
.label-bars i{display:block;background:var(--paper-ink);border-radius:1px;transition:opacity .3s}
.label-foot{display:flex;justify-content:space-between;gap:10px;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-t3)}
.label-stamp{position:absolute;top:36%;left:50%;transform:translate(-50%,-50%) rotate(-14deg) scale(1.35);font-size:34px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:#c8323f;border:4px solid #c8323f;border-radius:10px;padding:4px 14px 2px;opacity:0;pointer-events:none;transition:transform .3s var(--e),opacity .2s}
.label.sent .label-stamp{opacity:.92;transform:translate(-50%,-50%) rotate(-14deg) scale(1)}
.label-form .form-state{grid-column:1 / -1}
/* ═══ THE KEYS — four rules you press ═══════════════════════════════════════ */
.keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:760px){.keys{grid-template-columns:repeat(2,minmax(0,1fr))}}
.key{position:relative;height:100px;border-radius:16px;padding:14px 16px 12px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;
background:linear-gradient(165deg,#26262d 0%,#16161b 60%,#111115 100%);color:var(--t2);
box-shadow:var(--top-2),inset 0 -3px 0 rgba(0,0,0,.65),inset 1px 0 0 rgba(255,255,255,.04),0 14px 24px -16px rgba(0,0,0,.9),0 3px 0 rgba(0,0,0,.55);
transition:transform .12s var(--e2),box-shadow .12s var(--e2),color .2s}
.key i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--t3);font-variant-numeric:tabular-nums;transition:color .2s,text-shadow .2s}
.key span{font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.key:hover{color:var(--ink)}
.key:active,.key[aria-selected="true"]{transform:translateY(2px);box-shadow:var(--top),inset 0 -1px 0 rgba(0,0,0,.65),inset 1px 0 0 rgba(255,255,255,.04),0 8px 16px -14px rgba(0,0,0,.9),0 1px 0 rgba(0,0,0,.55);color:var(--ink)}
.key[aria-selected="true"] i{color:var(--cy);text-shadow:0 0 10px rgba(69,224,232,.9),0 0 2px rgba(69,224,232,.9)}
.readout-panel{margin-top:14px;background:var(--s1);border-radius:var(--r-card);box-shadow:var(--top),var(--bottom);padding:clamp(22px,2.6vw,36px);min-height:150px}
.rule-out{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:baseline}
.rule-out b{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--t3);font-variant-numeric:tabular-nums}
.rule-out h3{font-size:clamp(19px,1.8vw,26px);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.rule-out p{grid-column:2;margin-top:8px;font-size:15px;line-height:1.6;color:var(--t2);max-width:60ch}
/* ═══ THE LETTER, refined; the sentence hero ═══════════════════════════════ */
.letter-date{display:block;margin-top:10px;color:var(--t4)}
.letter .first{font-size:clamp(20px,1.8vw,26px);line-height:1.35;letter-spacing:-.015em;color:var(--ink);font-weight:500;max-width:30ch}
.letter .first + p{margin-top:28px}
.letter .day1{display:inline-flex;align-items:center;gap:10px}
.sentence{font-size:clamp(28px,3.4vw,52px);font-weight:500;letter-spacing:-.03em;line-height:1.1;max-width:24ch;color:var(--ink);margin-top:clamp(14px,2vh,22px);text-wrap:pretty}
.sentence span{color:var(--t3)}
.case-hero .sentence + .specrow{margin-top:40px}
@media (max-width:900px) and (min-width:561px){.case-hero .specrow{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}}
/* ═══ THE MENU — seven destinations, one object each, number keys ══════════ */
.menu-top{padding:20px 0}
.menu-hint{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t4);margin-left:auto;margin-right:24px}
.menu-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,96px);align-items:center;max-width:var(--max);width:100%;margin-inline:auto;min-height:0}
.menu-nav{flex:none;display:flex;flex-direction:column;justify-content:center;gap:0;padding:0;max-width:none;width:auto}
.menu-nav a{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;align-items:baseline;
font-size:clamp(24px,3vw,40px);font-weight:500;letter-spacing:-.025em;line-height:1.1;color:var(--t2);padding:10px 12px 10px 0;margin:0 0 0 -12px;border-radius:12px;
transition:color .15s var(--e2),background .15s var(--e2)}
.menu-nav a i{grid-row:1 / span 2;align-self:start;padding-top:9px;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--t4);font-variant-numeric:tabular-nums}
.menu-nav a span{grid-column:2}
.menu-nav a small{grid-column:2;font-size:13px;font-weight:500;letter-spacing:0;color:var(--t4);line-height:1.4;margin-top:2px;transition:color .15s}
.menu-nav a:hover,.menu-nav a:focus-visible,.menu-nav a[aria-current="page"]{color:var(--ink)}
.menu-nav a:hover small,.menu-nav a:focus-visible small{color:var(--t2)}
.menu-nav a:hover{background:var(--s1);padding-left:12px}
.menu-nav a.cta{color:var(--ink);margin-top:10px}
.menu-nav a.cta i{color:var(--cy);text-shadow:0 0 8px rgba(69,224,232,.7)}
.menu-view{position:relative;min-height:min(56vh,520px);display:grid;place-items:center}
.menu-view::before{content:"";position:absolute;inset:-10%;background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.05),transparent 70%);pointer-events:none}
.mv{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(8px) scale(.98);transition:opacity .22s var(--e2),transform .3s var(--e);pointer-events:none}
.mv.on{opacity:1;transform:none}
.mv-mark{display:block;width:min(30vw,300px)}
.mv-mark svg{width:100%;height:auto;fill:var(--s4)}
.alert--mini{width:min(100%,420px);transform:none;opacity:1}
.mv-dock{display:flex;gap:clamp(16px,2vw,28px)}
.mv-dock .slab{--sz:clamp(72px,8vw,112px)}
.mv-num{text-align:left;font-size:clamp(96px,14vw,180px);font-weight:700;letter-spacing:-.06em;line-height:.85;font-variant-numeric:tabular-nums;color:var(--ink)}
.mv-num small{display:block;margin-top:18px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);max-width:24ch;line-height:1.5}
.mv-keys{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(100%,420px)}
.mv-keys .key{height:92px;pointer-events:none}
.mv-note{width:min(100%,420px);background:var(--s1);border-radius:var(--r-card);box-shadow:var(--top),var(--bottom);padding:24px 26px;display:grid;gap:12px}
.mv-note span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.mv-note b{font-size:19px;font-weight:500;letter-spacing:-.015em;line-height:1.25;color:var(--ink)}
.mv-note em{font-style:normal;display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.label--mini{width:min(100%,300px);min-height:0;transform:rotate(-1.2deg)}
.label--mini .label-bars{background:repeating-linear-gradient(90deg,#0b0b0e 0 2px,transparent 2px 4px,#0b0b0e 4px 7px,transparent 7px 9px,#0b0b0e 9px 10px,transparent 10px 13px)}
.menu-base{align-items:center;gap:16px 32px}
.menu-status{display:inline-flex;align-items:center;gap:9px;margin-left:auto}
@media (max-width:900px){.menu-body{grid-template-columns:1fr}.menu-view,.menu-hint{display:none}.menu-nav a{font-size:clamp(22px,6vw,30px);padding:8px 0}.menu-status{margin-left:0}}
/* ═══ THE FOOTER — one line of links, one spec line, the mark on the box ══ */
.foot{padding:clamp(56px,8vh,96px) var(--m) 28px;margin-top:clamp(96px,14vh,176px)}
.foot-in{position:relative;max-width:var(--max);margin-inline:auto;display:grid;gap:28px}
.foot-mark{position:absolute;right:0;top:-8px;width:clamp(72px,9vw,128px);pointer-events:none}
.foot-mark svg{width:100%;height:auto;fill:var(--s3);transition:fill .3s}
.foot:hover .foot-mark svg{fill:var(--s4)}
.foot-row{display:flex;align-items:center;gap:20px 40px;flex-wrap:wrap;padding-right:clamp(90px,11vw,150px)}
.foot-row .wordmark i{text-transform:none;letter-spacing:.02em;font-weight:500;font-size:12px}
.foot-nav{display:flex;gap:6px 22px;flex-wrap:wrap}
.foot-nav a{font-size:14px;font-weight:500;color:var(--t2);transition:color .2s}
.foot-nav a:hover{color:var(--ink)}
.foot-nav a:last-child{color:var(--ink)}
.foot-spec{margin:0;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 40px;align-items:center;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);font-variant-numeric:tabular-nums}
.foot-spec a{color:var(--t2)}
.foot-spec a:hover{color:var(--ink)}
.foot-spec > div{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center}
.foot-spec span{display:inline-flex;align-items:center;gap:9px}
@media (max-width:560px){.foot-spec > div{flex-basis:100%}}
.foot-spec b{color:var(--ink);font-weight:700}
.foot-base{margin:0;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;font-size:10.5px}
.foot-grid,.foot-col,.foot-brand{display:none}
/* ═══ CLIENTS & PARTNERS — six marks in one material ═══════════════════════ */
.logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--top),var(--bottom),0 0 0 1px rgba(255,255,255,.03)}
@media (max-width:900px){.logos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.logos{grid-template-columns:repeat(2,1fr)}}
.logo{background:var(--s1);height:124px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--t3);transition:color .2s,background .2s}
.logo:hover{color:var(--ink);background:var(--s2)}
.logo svg{height:30px;width:auto;fill:currentColor}
.logo span{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.logo:hover span{color:var(--t2)}
/* ═══ LABS — the bench as a table, the part as a point cloud ═══════════════ */
.bench-t .disc{white-space:nowrap;color:var(--t3);padding-top:26px}
.bench-t .st{white-space:nowrap;padding-top:24px}
.bench-t tr[hidden]{display:none}
.bench-t .nm{width:26%}
.bench-t .lab-no{width:9ch;color:var(--t4);white-space:nowrap;padding-top:26px;font-variant-numeric:tabular-nums}
@media (max-width:760px){.bench-t .nm{width:auto;padding-top:8px}.bench-t .lab-no,.bench-t .disc{display:inline-block;width:auto;padding-top:10px;margin-right:18px}.bench-t .st{padding-top:10px}}
.gallery--two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.gallery--two{grid-template-columns:1fr}}
/* the menu at 900px tall: seven rows with air above the base line */
.menu-body{align-items:center;padding-top:0}
.menu-nav a{font-size:clamp(22px,2.7vw,34px);padding:7px 12px 7px 0;line-height:1.08}
.menu-nav a small{font-size:12px;margin-top:1px}
.menu-nav a i{padding-top:8px}
.menu-nav a.cta{margin-top:6px}
.menu-base{padding:16px 0 20px}
.menu-view{align-self:center;margin-top:0}
@media (min-width:1100px){.menu-view{transform:scale(1.28)}}
/* ═══ THE SENTENCE — the brief a visitor completes, three chips and three fields ═══ */
.say{margin-top:48px}
.say-line{font-size:clamp(26px,3vw,44px);font-weight:500;letter-spacing:-.025em;line-height:1.4;color:var(--t2);max-width:26ch;text-wrap:pretty}
.pick{position:relative;display:inline-block;vertical-align:baseline;margin:4px .06em}
.pick select{appearance:none;-webkit-appearance:none;font:inherit;letter-spacing:inherit;line-height:1.15;color:var(--t3);background:linear-gradient(180deg,var(--s3),var(--s2));border:0;border-radius:10px;padding:.08em 1.3em .12em .5em;box-sizing:content-box;box-shadow:var(--top-2),var(--bottom),0 10px 20px -16px rgba(0,0,0,.9);cursor:pointer;transition:color .2s,transform .12s var(--e2)}
.pick.set select{color:var(--ink)}
.pick select:hover{background:linear-gradient(180deg,var(--s4),var(--s3))}
.pick select:active{transform:translateY(1px)}
.pick select:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
.pick::after{content:"";position:absolute;right:.55em;top:50%;width:.3em;height:.3em;border-right:2px solid var(--t3);border-bottom:2px solid var(--t3);transform:translateY(-72%) rotate(45deg);pointer-events:none;transition:border-color .2s}
.pick.set::after{border-color:var(--t2)}
.say-measure{position:absolute;left:0;top:0;visibility:hidden;white-space:nowrap;font:inherit;letter-spacing:inherit;padding:0}
.say-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px;margin-top:48px}
@media (max-width:760px){.say-fields{grid-template-columns:1fr}}
.say > .form-body > .fld{margin-top:24px}
.say .fld{gap:8px}
.say .fld label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.say .fld label i{font-style:normal;letter-spacing:.02em;text-transform:none;font-weight:500;color:var(--t4)}
.say .fld input,.say .fld textarea{font:inherit;font-size:17px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--edge-2);border-radius:0;padding:10px 0 12px;box-shadow:none;transition:border-color .2s}
.say .fld input:focus,.say .fld textarea:focus{outline:0;box-shadow:none;border-bottom-color:var(--cy)}
.say .fld textarea{min-height:96px;resize:vertical;line-height:1.55}
.say .fld input::placeholder,.say .fld textarea::placeholder{color:var(--t4)}
.say .fld.err input,.say .fld.err textarea{border-bottom-color:var(--red)}
.say .fld .msg,.say .form-err{color:var(--red)}
.say .form-err{margin-top:16px}
.say .form-err a{color:var(--ink)}
.say-foot{display:flex;align-items:center;gap:20px 24px;flex-wrap:wrap;margin-top:32px}
.say-foot .note{font-size:13px;color:var(--t3)}
.say-foot .note a{color:var(--t2);text-decoration:underline;text-underline-offset:3px}
.say-foot .note a:hover{color:var(--ink)}
.say .btn[disabled]{opacity:.55;cursor:progress;transform:none!important;box-shadow:none!important}
.say .form-state{padding:0}
.say .form-state h3{color:var(--ink)}
.say .form-state p{color:var(--t2)}
.say .form-state p b{color:var(--ink)}
/* the menu's contact object: the sentence, before anyone has filled it in */
.mv-say{max-width:15ch;font-size:clamp(22px,2.2vw,32px);font-weight:500;letter-spacing:-.025em;line-height:1.4;color:var(--t3)}
.mv-say b{display:inline-block;font-weight:500;color:var(--ink);background:linear-gradient(180deg,var(--s3),var(--s2));border-radius:10px;padding:.06em .5em .1em;box-shadow:var(--top-2),var(--bottom)}
/* plain closes on the void */
.cleft p{color:var(--t2)}
.cleft .btn{margin-top:24px}
/* the modes and the audience cards say it in one line, not three bullets */
.mode p{margin-top:0;font-size:14px;line-height:1.55;color:var(--t2)}
.au .au-note{margin-top:16px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.tool .facts{margin-top:40px}
.tool .facts th{width:18ch}
/* ═══ THE FILE — case study blocks: one object per viewport, every medium in one frame ═══ */
.case-hero--file{min-height:0;align-items:flex-start;padding:clamp(140px,18vh,200px) var(--m) 0}
.case-hero--file .wrap{padding-bottom:0}
.case-hero--file .case-title{max-width:12ch}
.case-obj{padding:48px var(--m) 0}
.case-obj .wrap{max-width:var(--max);margin-inline:auto}
/* the frame: a plate that holds a screenshot, a phone, a film, a photograph, a sheet, or nothing yet */
.frame{margin:0;display:grid;gap:12px;min-width:0;align-content:start}
.frame-media{position:relative;aspect-ratio:var(--ar,16/9);border-radius:var(--r-card);overflow:hidden;background:linear-gradient(165deg,var(--s3),var(--s1));box-shadow:var(--top),var(--bottom),0 0 0 1px rgba(255,255,255,.03)}
.frame-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(60% 50% at 50% 0%,rgba(255,255,255,.05),transparent 70%)}
.frame-media > img,.frame-media > picture > img,.frame-media > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.frame--card .frame-media > img,.frame--card .frame-media > picture > img{object-fit:contain;padding:6%}
.frame--sheet .frame-media > img,.frame--sheet .frame-media > picture > img{object-fit:contain;padding:7% 9%;filter:saturate(.9)}
/* a (tools/media.py: AVIF, WebP, sizes) lays its ![]()
out as if the frame held it directly */
.frame-media > picture,.project-fig > picture,.screen-box > picture{display:contents}
/* a film with a vertical cut takes that cut's shape on a phone (tools/cases.py: src_m, ar_m) */
@media (max-width:760px){.frame--art .frame-media{aspect-ratio:var(--ar-m,9/16)}}
.frame--phone .frame-media{display:grid;place-items:center}
.frame--phone.frame--contain .frame-media > video{object-fit:contain;background:#000} /* a 9:16 film on the phone's taller screen: black bars, nothing cut */
.frame--phone .frame-media > :is(img,video),.frame--phone .frame-media > picture > img{position:absolute;top:8%;left:50%;right:auto;bottom:auto;transform:translateX(-50%);height:84%;width:auto;aspect-ratio:1206/2622;object-fit:cover;border-radius:clamp(16px,4vw,38px);box-shadow:0 0 0 5px #0b0b0e,0 0 0 6px rgba(255,255,255,.14),0 34px 54px -34px rgba(0,0,0,.95)}
.frame--empty .frame-media{display:grid;place-items:center}
.frame-empty{position:relative;z-index:1;text-align:center;line-height:1.7;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.frame-empty b{display:block;color:var(--t2)}
.frame figcaption{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);font-variant-numeric:tabular-nums;line-height:1.5}
.frame figcaption b{color:var(--t2)}
.frame figcaption i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--t4);margin-right:9px;vertical-align:1px;transition:background .2s,box-shadow .2s}
.frame.playing figcaption i{background:var(--cy);box-shadow:var(--glow-cy)}
.frames{display:grid;gap:40px 24px;align-items:start}
.frames--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.frames--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.frames--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.frames--2,.frames--3{grid-template-columns:1fr}.frames--4{grid-template-columns:repeat(2,minmax(0,1fr))}.frames--3.frames--phones{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* an uneven pair: a large frame beside a smaller one, set lower, so two pictures read as a pair with a rhythm */
.frames--pair{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px clamp(24px,4vw,72px)}
.frames--pair > .frame:nth-child(2){margin-top:clamp(96px,16vh,220px)}
.frames--pair-flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.frames--pair-flip > .frame:nth-child(1){margin-top:clamp(96px,16vh,220px)}
.frames--pair-flip > .frame:nth-child(2){margin-top:0}
@media (max-width:760px){.frames--pair,.frames--pair-flip{grid-template-columns:minmax(0,1fr)}.frames--pair > .frame:nth-child(n){margin-top:0}}
/* edge to edge: one picture per case may leave the margins */
.sec--bleed{padding-inline:0}
.sec--bleed .wrap{max-width:none}
.sec--bleed .frame-media{border-radius:0;box-shadow:none}
.sec--bleed .frame-media::before{display:none}
.sec--bleed figcaption,.sec--bleed .sechead{padding-inline:var(--m)}
/* a render: a lit object on a transparent ground (tools/device-render), so it stands on the page itself */
.frame--render .frame-media{background:none;box-shadow:none;border-radius:0;overflow:visible}
.frame--render .frame-media::before{display:none}
.frame--render .frame-media > img,.frame--render .frame-media > picture > img{object-fit:contain}
.strip{display:flex;align-items:flex-start;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--m));padding:4px var(--m) 16px;scrollbar-width:thin;scrollbar-color:var(--edge-2) transparent;overscroll-behavior-x:contain}
.strip > .frame{flex:0 0 auto;width:min(72%,880px);scroll-snap-align:start}
.strip > .frame--tall{width:min(36%,320px)}
@media (max-width:760px){.strip > .frame{width:86%}.strip > .frame--tall{width:62%}}
.sec > .wrap > .sechead + .frames,.sec > .wrap > .sechead + .strip,.sec > .wrap > .sechead + .frame{margin-top:0}
.colophon th{width:16ch}
/* ═══ THE FEED — the log of what shipped, read under a loupe ═══ */
/* Lenis 1.3.26 (js/vendor/lenis.min.js, updated 5 October 2026): its stylesheet, and the old guard against CSS smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis :is([data-lenis-prevent],[data-lenis-prevent-wheel],[data-lenis-prevent-touch],[data-lenis-prevent-vertical],[data-lenis-prevent-horizontal]){overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}
.feed{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px 24px}
.fd{grid-column:span 12;min-width:0;opacity:calc(.58 + .42 * var(--f,1));transform:scale(calc(.982 + .018 * var(--f,1)));transform-origin:50% 50%}
.fd--half{grid-column:span 6}
.fd--tall{grid-column:span 4}
@media (max-width:900px){.fd--half{grid-column:span 12}.fd--tall{grid-column:span 6}}
.fd[hidden]{display:none}
/* the mosaic (js/feed.js): justified rows. Each piece keeps its own shape and each row runs the full width;
the script sets the widths, the frames take their heights from their own --ar. A wide film is a row to itself. */
.feed.is-mosaic{display:flex;flex-wrap:wrap;align-items:flex-start}
.feed.is-mosaic .fd{flex:0 0 auto;max-width:100%}
.feed.is-mosaic .fd--wide{width:100%}
.fd.on .frame figcaption{color:var(--t2)}
.fd.on .frame figcaption b{color:var(--ink)}
.fd.on .frame figcaption i{background:var(--cy);box-shadow:var(--glow-cy)}
.feed-ro{position:fixed;left:var(--m);bottom:20px;z-index:40;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 12px;border-radius:12px;background:rgba(16,16,19,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--top-2),var(--bottom),0 16px 32px -20px rgba(0,0,0,.9);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;transform:translateY(8px);transition:opacity .2s var(--e2),transform .3s var(--e);pointer-events:none}
.feed-ro.show{opacity:1;transform:none}
.feed-ro i{width:6px;height:6px;border-radius:50%;background:var(--cy);box-shadow:var(--glow-cy);flex:none}
.feed-ro b{color:var(--ink)}
@media (max-width:900px){.feed-ro{display:none}}
@media (prefers-reduced-motion:reduce){.fd{transform:none;opacity:1}}
/* ═══ THE FOOTER, quieter: one row of doors, one hairline, one base line ═══ */
.foot{padding:64px var(--m) 32px}
.foot-in{gap:32px}
.foot-mark,.foot-spec{display:none}
.foot-row{padding-right:0}
.foot-base{margin:0;padding-top:24px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px 24px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);font-variant-numeric:tabular-nums}
.foot-base > span:nth-child(2){justify-self:center}
.foot-base > span:last-child{justify-self:end}
.foot-base a{color:var(--t2);transition:color .2s}
.foot-base a:hover{color:var(--ink)}
.foot-base .foot-mail{color:var(--ink)}
@media (max-width:760px){.foot-base{grid-template-columns:1fr;gap:12px}.foot-base > span{justify-self:start!important}}
/* ═══ THE FILM — the home page's opening, cut 02 (13 → 25 Sep 2026) ═══════════
Direction lives in experiments/vgpu/src/home (built to /js/film/home.js).
Without JavaScript the shots are five posters in a row. With it (html.film-on)
the stage is sticky: it holds the screen while the scroll directs, then docks
into a plate on the page and leaves like any section. The light is handed to
the alert below (.film-light). Without WebGPU (html.film-nogpu) a still of
the sea stands in for the canvas and everything else runs the same. */
.film{position:relative}
.film-canvas,.film-still,.film-shade,.film-plate,.film-marks,.film-hud,.film-plan,.film-light{display:none}
.shot{padding:clamp(120px,18vh,200px) var(--m) clamp(64px,10vh,120px);max-width:calc(var(--max) + 2 * var(--m));margin-inline:auto;display:grid;align-content:end;justify-items:start;gap:24px}
.shot h1,.shot h2{font-weight:500;letter-spacing:-.035em;line-height:1;text-wrap:balance}
.shot h1{font-size:clamp(44px,7.4vw,120px);max-width:16ch}
.shot h2{font-size:clamp(36px,5.2vw,84px);max-width:18ch}
.shot--close h2{font-size:clamp(30px,3.9vw,64px);max-width:24ch;line-height:1.04}
.shot .l1,.shot .l2{display:block}
.shot p{color:var(--t2);font-size:clamp(16px,1.25vw,19px);line-height:1.55;max-width:44ch}
.shot .aside{color:var(--t3)}
.film-doors{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.shot .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.shot .w > span{display:inline-block;will-change:transform}
.film-on .film{height:780vh}
.film-on .film-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;
--dock:0;--pt:clamp(72px,10.5vh,104px);--pb:72px;--under:calc(100lvh - 100dvh)}
/* The canvas is as tall as the largest viewport, so a phone's toolbar never resizes it. */
.film-on .film-canvas,.film-on .film-still{display:block;position:absolute;left:0;top:0;width:100%;height:100vh;height:100lvh;touch-action:pan-y;
clip-path:inset(calc(var(--dock) * var(--pt)) calc(var(--dock) * var(--m)) calc(var(--dock) * (var(--pb) + var(--under))) calc(var(--dock) * var(--m)) round calc(var(--dock) * var(--r-sheet)))}
.film-on .film-canvas{opacity:0;transition:opacity 1.6s var(--e2)}
.film-ready .film-canvas{opacity:1}
.film-on .film-canvas[hidden],.film-on:not(.film-nogpu) .film-still{display:none}
.film-still{background:#050507 url(/assets/img/film-still.jpg?v=4c1c27f1) 50% 50% / cover no-repeat}
/* The copy never reads against the loop: the field steps back under it. */
.film-on .film-shade{display:block;position:absolute;inset:0;pointer-events:none;background:
linear-gradient(90deg,rgba(5,5,7,.78) 0,rgba(5,5,7,.35) 38%,rgba(5,5,7,0) 62%),
linear-gradient(0deg,rgba(5,5,7,.8) 0,rgba(5,5,7,0) 34%),
linear-gradient(180deg,rgba(5,5,7,.7) 0,rgba(5,5,7,0) 18%)}
/* The plate: a hairline that follows the clip in, and crop marks once it has landed. */
.film-on .film-plate{display:block;position:absolute;pointer-events:none;
inset:calc(var(--dock) * var(--pt)) calc(var(--dock) * var(--m)) calc(var(--dock) * var(--pb)) calc(var(--dock) * var(--m));
border-radius:calc(var(--dock) * var(--r-sheet));box-shadow:inset 0 0 0 1px rgba(255,255,255,calc(var(--dock) * var(--dock) * .16));
background:radial-gradient(70% 60% at 50% 0%,rgba(255,255,255,calc(var(--dock) * .035)),transparent 70%)}
.film-on .film-marks{display:block;position:absolute;inset:var(--pt) var(--m) var(--pb);pointer-events:none}
.film-marks i{position:absolute;width:14px;height:14px}
.film-marks i::before,.film-marks i::after{content:"";position:absolute;background:rgba(255,255,255,.34)}
.film-marks i::before{width:14px;height:1px}.film-marks i::after{width:1px;height:14px}
.film-marks i:nth-child(1){left:-22px;top:-22px}.film-marks i:nth-child(1)::before{top:0;left:0}.film-marks i:nth-child(1)::after{top:0;left:0}
.film-marks i:nth-child(2){right:-22px;top:-22px}.film-marks i:nth-child(2)::before{top:0;right:0}.film-marks i:nth-child(2)::after{top:0;right:0}
.film-marks i:nth-child(3){left:-22px;bottom:-22px}.film-marks i:nth-child(3)::before{bottom:0;left:0}.film-marks i:nth-child(3)::after{bottom:0;left:0}
.film-marks i:nth-child(4){right:-22px;bottom:-22px}.film-marks i:nth-child(4)::before{bottom:0;right:0}.film-marks i:nth-child(4)::after{bottom:0;right:0}
@media (max-width:760px){.film-marks i:nth-child(n){display:none}}
/* The shots stack in place, on the margin line in the lower third. */
.film-on .shot{position:absolute;left:0;right:0;bottom:0;min-height:0;padding:0 var(--m) clamp(104px,17vh,176px);pointer-events:none;z-index:3}
.film-on .shot:not(.shot--open){visibility:hidden}
.film-on .shot--open .aside{position:absolute;left:var(--m);bottom:clamp(56px,10vh,112px)}
.film-on .shot--open [data-aside="2"]{visibility:hidden}
.film-on .film-doors a{pointer-events:auto}
/* SC 04: the mark, dimensioned where it lies. The box is sized from the camera every frame. */
.film-on .film-plan{display:block;position:absolute;left:50%;top:50%;width:var(--w,0);height:var(--h,0);transform:translate(-50%,-50%);visibility:hidden;pointer-events:none;z-index:2}
.film-plan i{position:absolute;display:block;font-style:normal}
.film-plan b{position:absolute;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--t2);font-variant-numeric:tabular-nums}
.plan-h{left:0;right:0;bottom:-28px;height:1px;background:rgba(255,255,255,.3)}
.plan-h::before,.plan-h::after,.plan-v::before,.plan-v::after{content:"";position:absolute;background:rgba(255,255,255,.3)}
.plan-h::before,.plan-h::after{top:-22px;width:1px;height:28px}.plan-h::before{left:0}.plan-h::after{right:0}
.plan-h b{left:50%;top:8px;transform:translateX(-50%)}
.plan-v{top:0;bottom:0;right:-28px;width:1px;background:rgba(255,255,255,.3)}
.plan-v::before,.plan-v::after{left:-22px;height:1px;width:28px}.plan-v::before{top:0}.plan-v::after{bottom:0}
.plan-v b{left:10px;top:50%;transform:translateY(-50%)}
.film-plan .lbl{position:absolute;left:0;top:-32px;white-space:nowrap}
@media (max-width:760px){.plan-v{right:-16px}.plan-v b{left:auto;right:8px;top:-20px;transform:none}.plan-v::before,.plan-v::after{left:-12px;width:16px}}
/* The slate: scene, scenes, time, and the way out. After the hand-off it is the plate's caption. */
.film-on .film-hud{position:absolute;left:0;right:0;bottom:0;z-index:4;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:24px;
padding:0 var(--m) 26px;pointer-events:none;max-width:calc(var(--max) + 2 * var(--m));margin-inline:auto}
.film-hud > *{pointer-events:auto}
.hud-scene{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;pointer-events:none!important}
.hud-scene .led{transition:background .4s,box-shadow .4s}
.film-hud.is-handed .hud-scene .led{background:var(--t5);box-shadow:none}
.hud-bar{position:relative;height:22px}
.hud-bar::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.14)}
.hud-fill{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.hud-bar button{position:absolute;top:0;left:calc(var(--at) * 100%);width:22px;height:22px;margin-left:-11px;border-radius:6px}
.hud-bar button::before{content:"";position:absolute;left:10.5px;top:7.5px;width:1px;height:7px;background:rgba(255,255,255,.3);transition:background .2s,height .2s,top .2s}
.hud-bar button:hover::before,.hud-bar button[aria-current="true"]::before{background:var(--ink);height:11px;top:5.5px}
.hud-bar button:first-child::before{left:10.5px}
.hud-play{display:inline-flex;align-items:center;gap:9px;padding:6px 10px 6px 8px;margin:-6px -10px -6px -8px;border-radius:8px;color:var(--t2);white-space:nowrap;transition:color .2s,background .2s}
.hud-play:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.hud-play svg{width:12px;height:12px;fill:currentColor;flex:none}
.hud-play .i-pause,.hud-play .i-again,.hud-play[data-state="pause"] .i-play,.hud-play[data-state="again"] .i-play{display:none}
.hud-play[data-state="pause"] .i-pause,.hud-play[data-state="again"] .i-again{display:inline}
.hud-skip{color:var(--t2);white-space:nowrap;transition:color .2s}
.hud-skip:hover{color:var(--ink)}
.hud-hint{display:none;color:var(--t3);white-space:nowrap}
.hud-hint-tap,.is-touch .hud-hint-press{display:none}.is-touch .hud-hint-tap{display:inline}
.film-hud.is-docked .hud-skip{display:none}
.film-hud.is-docked .hud-hint{display:inline}
.film-hud.is-handed .hud-hint{visibility:hidden}
@media (max-width:760px){.film-on .film-hud{grid-template-columns:minmax(0,1fr) auto auto;gap:18px;padding-bottom:22px}.hud-bar{display:none}.film-hud.is-docked .hud-hint{display:none}}
@media (max-width:420px){.hud-x{display:none}}
/* The light, on its way from the film to the page. */
.film-on .film-light{display:block;position:fixed;left:0;top:0;z-index:45;width:10px;height:10px;border-radius:50%;pointer-events:none;opacity:0;will-change:transform,opacity;
background:#e8fdff;box-shadow:0 0 0 1px rgba(69,224,232,.4),0 0 10px 2px rgba(69,224,232,.9),0 0 38px 8px rgba(69,224,232,.3)}
/* The alert waits for it: the LED is dark and the receipt is grey until the light lands. */
.alert[data-handoff] .alert-foot i{transition:background .5s var(--e2),box-shadow .5s var(--e2)}
.alert[data-handoff] .alert-foot span,.alert[data-handoff] .alert-foot b{transition:color .5s var(--e2)}
.alert.is-waiting .alert-foot i{background:var(--s4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.alert.is-waiting .alert-foot span,.alert.is-waiting .alert-foot b{color:var(--t5)}
.alert[data-handoff]:not(.is-waiting) .alert-foot i{animation:led-land 1.1s var(--e)}
@keyframes led-land{0%{box-shadow:0 0 0 1px rgba(69,224,232,.5),0 0 22px 7px rgba(69,224,232,.95)}100%{box-shadow:var(--glow-cy)}}
/* While the film holds the screen the nav stays out of the picture. */
.film-live .nav.stuck{padding:22px var(--m);background:none;box-shadow:none}
@media (prefers-reduced-motion:reduce){.film-on .film-canvas{transition:none}.alert[data-handoff] .alert-foot i{animation:none}}
@media print{.film-on .film{height:auto}.film-on .film-stage{position:static;height:auto}.film-canvas,.film-still,.film-shade,.film-plate,.film-marks,.film-hud,.film-plan,.film-light{display:none!important}.film-on .shot{position:static;visibility:visible!important;opacity:1!important;padding:20px var(--m)}}
.film-nogpu .film-plan{display:none!important}
.film-nogpu .hud-hint{display:none!important}
/* ═══ THE WORK-LED PASS (2 Oct 2026) ═══════════════════════════════════
The company as it is: design and engineering, the work first (after fantasy.co's
order). Numbered case posters, the capability rows, Reach as a launch list. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Case posters: one project per viewport, the object alternating sides. */
.cases{display:grid;gap:160px}
.case-p .poster-copy h2{font-size:clamp(32px,3.7vw,60px);max-width:14ch;letter-spacing:-.033em;line-height:1.02}
.case-p .poster-copy > p{max-width:40ch}
.case-p .poster-obj{min-height:0}
.poster-obj > .frame{width:100%;position:relative}
.case-p .poster-copy .lbl{display:block;margin-bottom:22px}
@media (max-width:900px){.cases{gap:96px}}
/* What we do: three rows, a table you can press. */
.caps{display:grid;margin-top:48px;border-top:1px solid var(--line)}
.cap{display:grid;grid-template-columns:4ch minmax(0,21ch) minmax(0,1fr) auto;gap:8px 32px;align-items:baseline;padding:28px 0;border-bottom:1px solid var(--line);transition:background .2s}
.cap i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--t4);font-variant-numeric:tabular-nums}
.cap b{font-size:clamp(20px,1.7vw,26px);font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.cap span{color:var(--t2);font-size:16px;line-height:1.55;max-width:46ch}
.cap em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);white-space:nowrap}
.cap:hover b{color:var(--cy)}
.cap:hover em{color:var(--t2)}
@media (max-width:900px){.cap{grid-template-columns:4ch minmax(0,1fr);padding:24px 0}.cap span,.cap em{grid-column:2}.cap em{white-space:normal}}
/* Reach: a launch list. The LED is amber: in development, said as a fact. */
.lbl .led{margin-right:6px;vertical-align:1px}
.notify{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin-top:32px;max-width:440px}
.notify input[type=email]{font:inherit;font-size:16px;color:var(--ink);background:var(--s1);border:0;border-radius:var(--r-btn);padding:14px 16px;box-shadow:inset 0 0 0 1px var(--edge-2);min-width:0;transition:box-shadow .2s}
.notify input[type=email]::placeholder{color:var(--t4)}
.notify input[type=email]:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--cy)}
.notify input[aria-invalid=true]{box-shadow:inset 0 0 0 1.5px var(--red)}
.notify .btn{margin:0}
.notify-note{grid-column:1 / -1;font-size:13px;line-height:1.5;color:var(--t3)}
.notify-note a{color:var(--ink)}
.notify.is-done input,.notify.is-done .btn{display:none}
.notify.is-done .notify-note{color:var(--ink);font-size:15px}
.poster-copy .notify + .more{margin-top:24px}
@media (max-width:420px){.notify{grid-template-columns:1fr}}
.matrix{list-style:none;margin:0;padding:22px 24px;width:min(420px,100%);border-radius:var(--r-card);background:linear-gradient(180deg,rgba(32,32,38,.9),rgba(20,20,24,.9));box-shadow:var(--top-2),var(--bottom),0 44px 80px -36px rgba(0,0,0,.9);counter-reset:m}
.matrix li{display:grid;grid-template-columns:3ch 12px minmax(0,1fr);align-items:center;gap:12px;padding:11px 0;font-size:15px;color:var(--t2);border-top:1px solid rgba(255,255,255,.06)}
.matrix li:first-child{border-top:0}
.matrix li::before{counter-increment:m;content:counter(m,decimal-leading-zero);font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--t4);font-variant-numeric:tabular-nums}
.belief .stats{margin-top:40px;display:grid;grid-template-columns:repeat(4,minmax(0,max-content));gap:28px clamp(28px,4vw,64px)} /* four numbers on one line, two by two on a phone */
@media (max-width:560px){.belief .stats{grid-template-columns:1fr 1fr}}
.belief .stats + .btn{margin-top:40px}
.work-hero{padding-top:clamp(140px,22vh,240px)}
.work-hero h1{margin-top:22px;font-size:clamp(40px,6vw,96px);font-weight:500;letter-spacing:-.04em;line-height:1;max-width:14ch;text-wrap:balance}
.work-hero .lead{margin-top:32px}
/* The dock (6 October 2026): a film that opens a page (the showreel on Work, each room case's film) starts full
screen, the loop alone in its viewport; scrolling, it steps back into its frame (.dock-slot), the CRT's move from
Company (site.js). A phone and reduced motion get the frame where it belongs, in the flow, from the start. */
.dock-room,.dock-slot{display:none}
.dock-wrap{padding:92px var(--m) 0}
@media (min-width:761px) and (prefers-reduced-motion:no-preference){
.dock-wrap{position:fixed;left:0;top:0;width:100vw;height:100vh;padding:0;z-index:5;transform-origin:0 0;overflow:hidden;will-change:transform;
background:#050507;box-shadow:0 40px 100px -30px rgba(0,0,0,.9)}
.dock-wrap > .frame{position:absolute;inset:0;margin:0;display:block}
.dock-wrap .frame-media{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;box-shadow:none;background:#050507}
.dock-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dock-room{display:block;height:100svh}
.dock-slot{display:block;width:100%;aspect-ratio:16/9}
}
/* on Work it docks at the top of the hero, so it never crosses the title */
.work-hero--reel{padding-top:clamp(44px,7vh,72px)}
.work-hero--reel .dock-slot{margin-bottom:clamp(56px,9vh,104px)}
/* a room case's first section holds only the slot: on a phone its frame is already in the dock, so it closes up */
.case-obj--first:has(.dock-slot){padding-top:0}
@media (min-width:761px) and (prefers-reduced-motion:no-preference){.case-obj--first:has(.dock-slot){padding-top:clamp(96px,13vh,132px)}}
@media (min-width:761px) and (prefers-reduced-motion:no-preference){.work-hero--reel{padding-top:clamp(84px,11vh,120px)}}
/* Services: the hex bolt from LAB-14 in the hero's empty half, lit by one lamp (js/film/bolt.js). Screen
compositing drops the sheet's black, so only the drawing and its light land on the titanium ground. */
.svc-hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,72px);align-items:center}
.svc-bolt{margin:0;width:100%;max-width:520px;justify-self:end}
/* the card: a plate in the titanium family, lit from the top left like every object here, so the lamp's light
stays inside it and falls off into its surface instead of stopping at an edge you cannot see */
.svc-bolt .frame-media{isolation:isolate;background:radial-gradient(130% 95% at 22% 0%,color-mix(in oklab,var(--room,#1d2228) 62%,#000),color-mix(in oklab,var(--room,#1d2228) 16%,#000) 72%);box-shadow:var(--top),var(--bottom),0 0 0 1px rgba(255,255,255,.05),0 54px 96px -40px rgba(0,0,0,.78),0 18px 30px -18px rgba(0,0,0,.5)}
.svc-bolt canvas{position:absolute;inset:0;width:100%;height:100%;display:block;mix-blend-mode:screen;filter:contrast(1.06);opacity:0;transition:opacity 1.4s var(--e)} /* the sheet's void (#050507) pushed to true black, so no edge shows */
.svc-bolt canvas.is-lit,.svc-bolt canvas.is-still{opacity:1}
@media (max-width:900px){.svc-hero .wrap{grid-template-columns:1fr}.svc-bolt{justify-self:start;max-width:360px;margin-top:8px}}
@media (prefers-reduced-motion:reduce){.svc-bolt canvas{transition:none}}
.trace{position:absolute;inset:0;width:100%;height:100%;padding:6% 7%}
.trace-band{fill:rgba(255,255,255,.045)}
.trace-low{stroke:rgba(255,180,84,.55);stroke-width:1;stroke-dasharray:3 4}
.trace-line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.trace-now{fill:var(--cy);filter:drop-shadow(0 0 6px rgba(69,224,232,.8))}
.trace-t{font:700 10px var(--type);letter-spacing:.08em;fill:var(--t3);text-transform:uppercase}
.does{list-style:none;margin:24px 0 0;padding:0;display:grid;border-top:1px solid var(--line);max-width:40ch}
.does li{padding:10px 0;border-bottom:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t2);font-variant-numeric:tabular-nums}
.poster-copy .seen{margin-top:20px;font-size:14px;color:var(--t3)}
.seen a{color:var(--ink);box-shadow:inset 0 -1px 0 var(--edge-2);transition:box-shadow .2s}
.seen a:hover{box-shadow:inset 0 -1px 0 var(--cy)}
a.src{color:inherit;box-shadow:inset 0 -1px 0 var(--edge-2);transition:box-shadow .2s} /* a figure's source, quiet until you look */
a.src:hover{box-shadow:inset 0 -1px 0 var(--cy)}
.facts td a{color:var(--ink);box-shadow:inset 0 -1px 0 var(--edge-2)}
.poster-copy .notify{margin-top:32px}
#list .notify{margin-top:32px}
.filmcard{position:relative;display:grid;gap:14px;width:min(460px,100%);padding:28px 28px 24px;border-radius:var(--r-card);background:radial-gradient(80% 70% at 30% 0%,rgba(69,224,232,.08),transparent 60%),linear-gradient(180deg,rgba(32,32,38,.92),rgba(18,18,22,.92));box-shadow:var(--top-2),var(--bottom),0 44px 80px -36px rgba(0,0,0,.9);transition:transform .35s var(--e)}
.filmcard:hover{transform:translateY(-3px)}
.filmcard b{font-size:clamp(26px,2.6vw,38px);font-weight:500;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.filmcard-sub{color:var(--t2);font-size:15px;line-height:1.55}
.filmcard-play{display:inline-flex;align-items:center;gap:10px;margin-top:6px;font-size:14px;font-weight:600;color:var(--ink)}
.filmcard-play svg{width:12px;height:12px;color:var(--cy)}
.reels{list-style:none;margin:0;padding:10px 0;width:min(480px,100%);border-radius:var(--r-card);background:linear-gradient(180deg,rgba(32,32,38,.9),rgba(20,20,24,.9));box-shadow:var(--top-2),var(--bottom),0 44px 80px -36px rgba(0,0,0,.9)}
.reels li + li{border-top:1px solid rgba(255,255,255,.06)}
.reels a{display:grid;grid-template-columns:7ch minmax(0,1fr);gap:4px 14px;padding:14px 22px;transition:background .2s}
.reels a:hover{background:rgba(255,255,255,.03)}
.reels i{font-style:normal;grid-row:span 2;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--t4);padding-top:4px;font-variant-numeric:tabular-nums}
.reels b{font-size:16px;font-weight:500;color:var(--ink)}
.reels a:hover b{color:var(--cy)}
.reels span{font-size:13px;line-height:1.45;color:var(--t3)}
.bench-t .nm a{color:var(--ink);box-shadow:inset 0 -1px 0 var(--edge-2)}
.bench-t .nm a:hover{box-shadow:inset 0 -1px 0 var(--cy)}
.frame--object .frame-media{display:grid;place-items:center;padding:4%}
.frame--object .frame-media > .alert{position:relative;z-index:2}
.frame--object .frame-media > .trace{position:absolute}
/* Lightline: the films, on Work and Labs */
.watch .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px}
.watch .note{font-size:14px;color:var(--t3)}
.reel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
.reel-tile{display:grid;gap:12px;align-content:start}
.reel-tile p{font-size:14px;line-height:1.5;color:var(--t3);max-width:36ch}
.reel-tile:hover figcaption b{color:var(--cy)}
.reel-tile .frame-media img{transition:transform .6s var(--e)}
.reel-tile:hover .frame-media img{transform:scale(1.03)}
@media (max-width:900px){.reel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.reel-grid{grid-template-columns:1fr}}
.poster-copy .btn + .more{margin-left:24px;vertical-align:middle}
@media (max-width:420px){.poster-copy .btn + .more{display:flex;margin:20px 0 0}}
.filmcard-still{display:block;margin:-28px -28px 6px;border-radius:var(--r-card) var(--r-card) 0 0;overflow:hidden;aspect-ratio:16/10}
.filmcard-still img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e)}
.filmcard:hover .filmcard-still img{transform:scale(1.03)}
/* ═══ THE OFFER — Lightline films for other companies (2 Oct 2026) ═══════════
/lightline. The schedule is drawn the way the films are: a rail with a tick per step, a
dimension line under it, and the LED where the film is delivered. The price is the one big
number on the page, printed like a proud object (voice rule 18). */
.offer-hero .case-title{max-width:15ch}
.offer-three{margin-bottom:40px}
.days{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);border-top:1px solid var(--edge-2)}
.days::after{content:"";position:absolute;right:-3px;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--cy);box-shadow:var(--glow-cy)}
.days li{position:relative;padding-top:28px}
.days li::before{content:"";position:absolute;left:0;top:-1px;width:1px;height:12px;background:var(--ink)}
.days b{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);font-variant-numeric:tabular-nums}
.days h3{margin-top:12px;font-size:clamp(18px,1.5vw,22px);font-weight:500;letter-spacing:-.015em;line-height:1.2;color:var(--ink)}
.days p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--t2);max-width:26ch}
.days-dim{position:relative;margin-top:40px;height:12px;display:flex;justify-content:center;align-items:center;border-inline:1px solid var(--t5)}
.days-dim::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--t5)}
.days-dim span{position:relative;padding:0 14px;background:var(--void);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);font-variant-numeric:tabular-nums}
.days-note{margin-top:24px;font-size:14px;line-height:1.55;color:var(--t3)}
@media (max-width:900px){
.days{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--edge-2)}
.days::after{right:auto;top:auto;left:-4px;bottom:-4px}
.days li{padding:0 0 32px 24px}
.days li::before{left:-1px;top:7px;width:12px;height:1px}
.days p{max-width:40ch}
.days-dim{justify-content:flex-start;height:auto;margin-top:32px;border:0}
.days-dim::before{display:none}
.days-dim span{padding:0}
}
.offer-price{display:grid;justify-items:start}
.offer-n{font-size:clamp(64px,10vw,160px);font-weight:500;letter-spacing:-.045em;line-height:.9;font-variant-numeric:tabular-nums;color:var(--ink)}
.offer-n small{margin-left:16px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.offer-price > p:not(.offer-n){margin-top:32px;font-size:16px;line-height:1.55;color:var(--t2);max-width:44ch}
.offer-price .btn{margin-top:32px}
.prose > .btn{margin-top:28px}
@media (max-width:600px){.offer-hero .meta{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}}
/* The extras: a small price list under the price, one row each, the figure first in tabular numbers. */
.offer-extras{margin-top:32px;max-width:560px}
.offer-extras th{width:36%;padding:14px 16px 12px 0;font-size:14px;font-weight:500}
.offer-extras td{padding:13px 0 12px;font-size:14px}
.offer-extras td b{display:inline-block;min-width:7.5ch;margin-right:12px;font-variant-numeric:tabular-nums}
/* the TV's caption names the control the device has */
.tube-touch{display:none}
@media (pointer:coarse){.tube-fine{display:none}.tube-touch{display:inline}}
.prose > .btn + .more{margin-left:24px;vertical-align:middle}
@media (max-width:420px){.prose > .btn + .more{display:flex;margin:20px 0 0}}
/* The object's halo reaches 8% past its box on each side. Stacked on a phone the box spans the page, so the halo
pushed the page 8 px wider than the screen (Labs, 2 Oct 2026). Stacked, it keeps its height and loses the overhang. */
@media (max-width:900px){.poster-obj::before{inset:-16% 0}}
/* ═══ THE SCREENING ROOM (work) ══════════════════════════════════════════
js/screening.js. A quiet control on each case's picture; the room is a native