/* GASP! Essential site · v4 "AI employee" system (2026-10-26)
   One visual language: ink ground, orange dot-screen imagery, Poppins thin/black italic, IBM Plex Mono labels.
   Rule 31: headlines stand alone; supporting text only where context is lost.
   Hand-built: static site. Buttons/links keep the Amicro #01 slide-arrow and #10 text-reveal patterns. */
:root{
  --ink:#0A0A0A;--ink-2:#121110;--orange:#E84B1C;--paper:#F4F1EC;--muted:#8E8A84;--body:#CFCAC2;--line:rgba(244,241,236,.14);
  --display:"poppins","Helvetica Neue",sans-serif;--mono:"ibm-plex-mono",ui-monospace,monospace;--text:"halyard-text","Helvetica Neue",sans-serif;--score:"lores-12",monospace;
  --gutter:clamp(18px,4vw,56px);--max:1240px;
  --spring:cubic-bezier(.34,1.25,.64,1);--out:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color:var(--paper);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{background:var(--ink);font-family:var(--text);font-size:17px;line-height:1.5;overflow-x:hidden}
a{color:inherit}
::selection{background:var(--orange);color:var(--ink)}
img{display:block;max-width:100%}
picture{display:contents}
.wrap{width:min(var(--max),100% - 2*var(--gutter));margin:0 auto}
.mono{font-family:var(--mono);font-weight:400;text-transform:uppercase;letter-spacing:.1em;font-size:12px}

/* film grain */
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:50;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.glow{position:absolute;right:-18vw;top:-22vh;width:70vw;height:70vh;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(232,75,28,.38),rgba(232,75,28,.10) 55%,rgba(232,75,28,0))}

/* ---------- nav: logo + menu ---------- */
.nav{position:fixed;z-index:60;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:max(20px,env(safe-area-inset-top)) var(--gutter) 14px;pointer-events:none;border-bottom:1px solid transparent;transition:background-color .3s ease,border-color .3s ease}
.nav.scrolled{background:rgba(10,10,10,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:var(--line);pointer-events:auto}
.nav .home,.menu-btn{pointer-events:auto;border-radius:999px;background:rgba(10,10,10,.58);-webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%);border:1px solid rgba(244,241,236,.12);box-shadow:inset 0 1px 0 rgba(244,241,236,.08),0 10px 30px -12px rgba(0,0,0,.6);transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease,transform 200ms var(--spring)}
.nav .home{display:inline-flex;padding:10px 16px}
.nav .home img{width:92px;height:auto;display:block}
.nav .home:hover,.menu-btn:hover{border-color:rgba(232,75,28,.55)}.nav .home:active{transform:scale(.96)}.nav .home:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.nav.scrolled .home,.nav.scrolled .menu-btn{background-color:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.menu-btn{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;color:var(--paper);cursor:pointer;font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:13px;padding:11px 16px}
.menu-btn i{position:relative;display:block;width:22px;height:10px}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform 300ms var(--spring),top 300ms}
.menu-btn i::before{top:0}.menu-btn i::after{top:8px}
.menu-open .menu-btn i::before{top:4px;transform:rotate(45deg)}.menu-open .menu-btn i::after{top:4px;transform:rotate(-45deg)}
.menu-btn:hover{color:var(--orange)}.menu-btn:active{transform:scale(.96)}
.menu-btn:focus-visible,.menu a:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.menu{position:fixed;inset:0;z-index:55;background:rgba(10,10,10,.97);display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);opacity:0;pointer-events:none;transition:opacity .35s ease}
.menu-open .menu{opacity:1;pointer-events:auto}
.menu ol{list-style:none}
.menu li{border-top:1px solid var(--line)}.menu li:last-child{border-bottom:1px solid var(--line)}
.menu ol a{display:block;padding:1.2vh 0;text-decoration:none;font-family:var(--display);font-style:italic;font-weight:900;letter-spacing:-.035em;font-size:clamp(44px,8.4vw,124px);line-height:1;
  opacity:.1;transform:translateY(18px);transition:opacity .6s var(--out),transform .6s var(--out),color .2s}
.menu-open .menu ol a{opacity:1;transform:none}
.menu-open .menu li:nth-child(2) a{transition-delay:.06s}.menu-open .menu li:nth-child(3) a{transition-delay:.12s}.menu-open .menu li:nth-child(4) a{transition-delay:.18s}
@media (hover:hover){.menu ol a:hover{color:var(--orange)}}
.menu a[aria-current="page"]{color:var(--orange)}
.menu .foot{margin-top:5vh;display:flex;flex-wrap:wrap;gap:12px 28px}
.menu .foot a{text-decoration:none;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:13px;color:var(--muted)}
.menu .foot a:hover{color:var(--paper)}

/* ---------- headline system: thin italic set-up, black italic payoff ---------- */
.hl{font-family:var(--display);font-style:italic;letter-spacing:-.04em;line-height:.96}
.hl .t{display:block;font-weight:200;font-size:var(--t,clamp(40px,6vw,96px))}
.hl .t.ind{padding-left:var(--ind,1.9em)}
.hl .b{display:block;font-weight:900;color:var(--orange);font-size:var(--b,clamp(52px,8.2vw,132px));line-height:.98;margin-top:.02em;white-space:nowrap}
.hl.sm{--t:clamp(34px,4.6vw,72px);--b:clamp(42px,6.2vw,98px)}
h2.bk{font-family:var(--display);font-style:italic;font-weight:900;letter-spacing:-.04em;line-height:.98;font-size:clamp(40px,5.6vw,88px)}
h2.bk em{font-style:italic;color:var(--orange)}

/* ---------- hero with the 3D construction bang ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;align-items:center;padding:16vh 0 10vh;overflow:hidden}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:2vw}
.bang3d{position:relative;aspect-ratio:520/700;width:100%;max-width:440px;justify-self:end;perspective:1100px}
.bang3d .rig{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.bang3d img{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(var(--z,0px))}
.bang3d img:nth-child(1){--z:-120px}.bang3d img:nth-child(3){--z:90px}
.hero .ctas{margin-top:6vh}

/* ---------- tiles: one structure everywhere ---------- */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;perspective:1400px}
.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{position:relative;display:block;text-decoration:none;color:var(--paper);border:1px solid var(--line);background:var(--ink);overflow:hidden;
  transform-origin:50% 100%;transition:border-color .3s ease}
.tile .img{position:relative;aspect-ratio:16/10;overflow:hidden}
.tile .img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--out)}
.tile .cap{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed var(--paper)}
.tile .cap span{position:absolute;right:14px;top:-20px;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.1em}
.tile .txt{padding:clamp(16px,2vw,26px) clamp(18px,2.2vw,30px) clamp(20px,2.4vw,32px)}
.tile .nm{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--orange)}
.tile .h{font-family:var(--display);font-style:italic;font-weight:900;letter-spacing:-.035em;line-height:1;font-size:clamp(28px,2.9vw,44px);margin-top:10px}
.three .tile .h{font-size:clamp(24px,2.2vw,34px)}
a.tile:hover{border-color:rgba(232,75,28,.7)}
a.tile:hover .img img{transform:scale(1.04)}
a.tile:active{transform:scale(.99)}
a.tile:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- sections ---------- */
.sec{position:relative;padding:18vh 0}
.sec > .wrap > h2.bk,.sec > .wrap > .hl{margin-bottom:7vh}

/* credits: three names, nothing else */
.credits ul{list-style:none;border-top:1px solid var(--line)}
.credits li{border-bottom:1px solid var(--line);padding:2.2vh 0;font-family:var(--display);font-style:italic;font-weight:200;letter-spacing:-.04em;line-height:1;font-size:clamp(34px,6.4vw,104px)}

/* depth: a sticky stage the visitor flies through (the one leftover from the 3D journey) */
.depth{position:relative;height:250vh}
.depth .stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;perspective:900px;overflow:hidden}
.depth .inner{text-align:center;transform-style:preserve-3d;width:min(1100px,92vw)}
.depth .q{font-family:var(--display);font-style:italic;font-weight:200;letter-spacing:-.03em;line-height:1.08;font-size:clamp(26px,3.6vw,54px);max-width:18em;margin:0 auto}
.depth .big{display:block;white-space:nowrap;font-family:var(--display);font-style:italic;font-weight:900;letter-spacing:-.05em;line-height:.9;color:var(--orange);font-size:clamp(46px,13vw,220px);margin-top:3vh;will-change:transform,opacity}

/* process: five squares, LoRes numerals */
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.steps::before{content:"";position:absolute;left:14px;right:14%;top:17px;height:1px;background:linear-gradient(90deg,var(--orange),rgba(232,75,28,.15))}
.steps li{position:relative}
.steps .n{display:grid;place-items:center;width:34px;height:34px;font-family:var(--score);font-weight:700;font-size:18px;color:var(--orange);background:var(--ink);border:1px solid var(--orange)}
.steps li:first-child .n{background:var(--orange);color:var(--ink)}
.steps b{display:block;margin-top:16px;font-family:var(--display);font-style:italic;font-weight:900;letter-spacing:-.03em;font-size:clamp(22px,2.4vw,36px);line-height:1}

/* about: numbers that do the talking */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.stats > div{padding:3vh 2vw 3vh 0;border-right:1px solid var(--line)}
.stats > div + div{padding-left:2vw}.stats > div:last-child{border-right:0}
.stats .big{font-family:var(--display);font-style:italic;font-weight:200;letter-spacing:-.05em;line-height:.9;color:var(--orange);font-size:clamp(60px,9vw,150px)}
.stats .who{margin-top:14px}
.lines{list-style:none;border-top:1px solid var(--line)}
.lines li{border-bottom:1px solid var(--line);padding:2.4vh 0;font-family:var(--display);font-style:italic;font-weight:900;letter-spacing:-.035em;line-height:1;font-size:clamp(28px,4.4vw,68px)}
.lines li:nth-child(even){font-weight:200}

/* ---------- buttons (Amicro #01 slide-arrow, #10 text-reveal) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;height:60px;padding:0 30px;border-radius:40px;background:var(--orange);color:var(--ink);
  text-decoration:none;font-family:var(--display);font-style:italic;font-weight:800;font-size:17px;white-space:nowrap;
  transition:scale 240ms cubic-bezier(.34,1.40,.64,1),transform 240ms cubic-bezier(.34,1.30,.64,1)}
.btn svg{width:16px;height:16px;flex:none;transition:opacity 180ms ease,transform 180ms cubic-bezier(.34,1.40,.64,1)}
.btn .a{margin-right:10px}
.btn .t{display:block;transition:transform 180ms cubic-bezier(.34,1.40,.64,1)}
.btn .b{position:absolute;right:30px;top:50%;margin-top:-8px;opacity:0;transform:translateX(-12px)}
@media (hover:hover){.btn:hover{scale:1.04}.btn:hover .a{opacity:0;transform:translateX(-12px)}.btn:hover .t{transform:translateX(-26px)}.btn:hover .b{opacity:1;transform:none}}
.btn:active{scale:.96}
.link{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--paper)}
.link .win{height:20px;overflow:hidden;display:block}
.link .stack{display:flex;flex-direction:column;transition:transform 300ms var(--spring)}
.link .stack span{height:20px;line-height:20px;display:block;font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:13px;white-space:nowrap}
.link .stack span+span{color:var(--orange)}
.link svg{width:14px;height:14px;transition:transform 300ms var(--spring)}
@media (hover:hover){.link:hover .stack{transform:translateY(-20px)}.link:hover svg{transform:rotate(45deg)}}
.link:active{transform:scale(.97)}
.btn:focus-visible,.link:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}

/* ---------- close + footer ---------- */
.close{padding:20vh 0 6vh;border-top:1px solid var(--line)}
.close h2.bk{font-size:clamp(46px,8.6vw,140px)}
.close .ctas{margin-top:5vh}
/* closing question: three eager bots beside the button */
.close .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);column-gap:clamp(24px,4vw,64px);align-items:center}
.close h2.bk,.close .sign{grid-column:1 / -1}
.close .pick{grid-column:2;grid-row:2;margin-top:3vh}
.sign .night{flex-basis:100%;margin:0 0 6px -10px}.sign .night canvas{max-width:240px}
@media (max-width:860px){.close .wrap{grid-template-columns:1fr}.close .pick{grid-column:1;grid-row:auto;max-width:360px;margin-top:6vh}}
.sign{margin-top:16vh;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:end}
.sign .who{font-size:15px;line-height:1.5}.sign .who b{font-weight:600}.sign .who span{color:var(--muted)}
.sign nav{display:flex;flex-wrap:wrap;gap:10px 24px}
.sign nav a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;text-decoration:none}
.sign nav a:hover{color:var(--paper)}
.sign .legal{flex-basis:100%;margin:0;font-size:12px;line-height:1.5;color:var(--muted)}

/* ================= page signatures (v4.1) ================= */

/* SERVICES · hero deck: the four services as cards fanned in 3D */
.deck{position:relative;justify-self:end;width:118%;max-width:640px;aspect-ratio:1/1;perspective:1300px;margin-right:-6%}
.deck .rig{position:absolute;inset:0;transform-style:preserve-3d}
.deck img{position:absolute;left:4%;top:20%;width:92%;height:auto;aspect-ratio:16/10;object-fit:cover;border:1px solid rgba(244,241,236,.18);background:var(--ink);will-change:transform;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 0 0 1px rgba(232,75,28,.06)}

/* SERVICES · chapters: one service per band, image + what's included, pip rail tracks position */
.chap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,88px);align-items:center;padding:14vh 0;border-top:1px solid var(--line);scroll-margin-top:80px}
.chap:nth-child(even) .media{order:2}
.chap:nth-child(even),.prod:nth-child(even){grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.chap .media{position:relative;border:1px solid var(--line);perspective:1400px}
.chap .media img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.chap .media .cap{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed var(--paper)}
.chap .media .cap span{position:absolute;right:14px;top:-20px;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.1em}
.chap .nm{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--orange)}
.chap h2{font-family:var(--display);font-style:italic;font-weight:900;letter-spacing:-.04em;line-height:.96;font-size:clamp(40px,4.8vw,76px);margin-top:14px}
.chap .d,.prod .d{margin-top:2.4vh;max-width:46ch;font-size:18px;line-height:1.6;color:var(--body)}
.inc{list-style:none;margin-top:4vh;border-top:1px solid var(--line)}
.inc li{display:flex;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--body)}
.inc li::before{content:"";width:13px;height:14px;flex:none;background:url(img/mark-slash.svg) center/contain no-repeat}
.rail{position:fixed;left:max(14px,calc((100vw - var(--max)) / 2 - 44px));top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:8px;opacity:0;transition:opacity .4s ease}
.rail.on{opacity:1}
.rail a{display:block;width:10px;height:22px;background:rgba(244,241,236,.18);transition:background-color .3s ease,transform .45s var(--spring)}
.rail a.lit{background:var(--orange);transform:scaleY(1.25)}
.rail a:hover{background:var(--paper)}.rail a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* SERVICES · track: the five steps light up as you scroll */
.track{position:relative;height:230vh}
.track .stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center}
.track .line{position:relative;height:2px;background:rgba(244,241,236,.14);margin:8vh 0 0}
.track .fill{position:absolute;inset:0;background:var(--orange);transform-origin:left;transform:scaleX(var(--p,0))}
.track ol{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:-18px}
.track li{position:relative}
.track .n{display:grid;place-items:center;width:36px;height:36px;font-family:var(--score);font-weight:700;font-size:18px;color:var(--orange);background:var(--ink);border:1px solid var(--orange);transition:background-color .3s ease,color .3s ease,transform .5s var(--spring)}
.track b{display:block;margin-top:18px;font-family:var(--display);font-style:italic;font-weight:200;letter-spacing:-.04em;line-height:1;font-size:clamp(24px,3.4vw,56px);color:var(--muted);transform-origin:left bottom;transition:color .3s ease,transform .5s var(--spring),font-weight .3s}
.track li.lit .n{background:var(--orange);color:var(--ink)}
.track li.lit b{color:var(--paper)}
.track li.now b{font-weight:900;color:var(--orange);transform:scale(1.08)}

/* SERVICES · creative index: rows; the dot image follows the cursor */
.index{list-style:none;border-top:1px solid var(--line)}
.index a{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:baseline;padding:3.2vh 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--paper);transition:color .2s ease}
.index .nm{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--orange)}
.index .h{font-family:var(--display);font-style:italic;font-weight:900;letter-spacing:-.04em;line-height:1;font-size:clamp(28px,4.2vw,64px);transition:transform .45s var(--spring)}
@media (hover:hover){.index a:hover .h{transform:translateX(18px)}}
.index a:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.index .thumb{display:none}
.index.deep a{align-items:start}
.index.deep .nm{padding-top:.9em}
.index.deep .bd{display:block}
.index.deep .h{display:block;font-size:clamp(28px,3.4vw,52px)}
.index.deep .d{display:block;margin-top:12px;max-width:52ch;font-size:17px;line-height:1.6;color:var(--body);transition:transform .45s var(--spring) .03s}
@media (hover:hover){.index.deep a:hover .d{transform:translateX(18px)}}
/* services · scanline wipe: the dot screen prints down the frame as it scrolls in */
.chap .media{overflow:hidden}
.js .chap .media[data-scan] img,.js .chap .media[data-scan] canvas{clip-path:inset(0 0 calc((1 - var(--s,0)) * 100%) 0)}
.js .chap .media[data-scan]::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,var(--orange) 0,var(--orange) 2px,rgba(232,75,28,.28) 3px,rgba(232,75,28,0) 26px);
  transform:translateY(calc(var(--s,0) * 100% - 1px));opacity:calc((1 - var(--s,0)) * 8)}
.js .chap .media[data-scan] .cap{opacity:calc((var(--s,0) - .9) * 10)}
/* products · iris: the frame opens like a lens */
.prod .media{overflow:hidden}
.js .prod .media[data-iris] img{clip-path:circle(calc(var(--s,0) * 76%) at 50% 50%);transform:scale(calc(1.18 - var(--s,0) * .18))}
.peek{position:fixed;left:0;top:0;width:360px;aspect-ratio:16/10;pointer-events:none;z-index:40;opacity:0;border:1px solid var(--line);transition:opacity .25s ease;will-change:transform}
.peek{background:var(--ink)}
.peek canvas{width:100%;height:100%}
.peek.on{opacity:1}

/* ABOUT · full-bleed arena hero */
.hero.full{min-height:100vh;min-height:100svh;align-items:end;padding:0 0 12vh}
.hero.full .bgimg{position:absolute;inset:0;overflow:hidden}
.hero.full .bgimg img{width:100%;height:100%;object-fit:cover;transform-origin:50% 30%;will-change:transform}
.hero.full .bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--ink) 0%,rgba(10,10,10,.92) 22%,rgba(10,10,10,.55) 42%,rgba(10,10,10,0) 68%)}
.hero.full .wrap{display:block}

/* ABOUT · scoreboard: dot-matrix panel, LoRes numerals */
.board{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);
  background-color:#0d0c0b;background-image:radial-gradient(rgba(232,75,28,.13) 1.4px,transparent 1.6px);background-size:9px 9px}
.board > div{padding:4.5vh 2.4vw 4vh;border-right:1px solid var(--line)}
.board > div:last-child{border-right:0}
.board .big{font-family:"lores-28",var(--score);font-weight:400;line-height:.85;color:var(--orange);font-size:clamp(64px,9vw,148px);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.board .who{margin-top:18px;color:var(--paper)}

/* PRODUCTS · split hero: two doors, each tilts toward the cursor */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;min-height:100svh;perspective:1600px}
.door{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gutter) 12vh;text-decoration:none;color:var(--paper);overflow:hidden;border-right:1px solid var(--line);transform-style:preserve-3d;will-change:transform;transition:transform .6s var(--out)}
.door:last-child{border-right:0}
.door .bgimg{position:absolute;inset:0;z-index:-1}
.door .bgimg img{width:100%;height:100%;object-fit:cover;opacity:.75;transition:opacity .4s ease,transform .8s var(--out)}
.door .bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--ink) 8%,rgba(10,10,10,.35) 55%,rgba(10,10,10,.1))}
.door .nm{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--orange)}
.door .hl{margin-top:14px}
.door .hl .b,.door .hl .t{font-size:clamp(40px,5.4vw,92px);white-space:normal}
@media (hover:hover){.door:hover .bgimg img{opacity:1;transform:scale(1.04)}}
.door:focus-visible{outline:2px solid var(--orange);outline-offset:-6px}
.door:active{transform:scale(.995)}

/* PRODUCTS · detail rows */
.prod{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,88px);align-items:center;padding:14vh 0;border-top:1px solid var(--line);scroll-margin-top:80px}
.prod:nth-child(even) .media{order:2}
.prod .media{border:1px solid var(--line)}
.prod .media img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.prod .nm{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--orange)}
.prod h2{font-family:var(--display);font-style:italic;font-weight:900;letter-spacing:-.04em;line-height:.96;font-size:clamp(40px,4.8vw,76px);margin-top:14px}
.prod .ctas{margin-top:4vh}

@media (max-width:860px){
  .deck{position:absolute;right:-24vw;top:4vh;width:86vw;max-width:none;opacity:.5;z-index:-1}
  .chap,.prod,.chap:nth-child(even),.prod:nth-child(even){grid-template-columns:1fr;padding:9vh 0;gap:26px}
  .chap:nth-child(even) .media,.prod:nth-child(even) .media{order:0}
  .rail{display:none}
  .track{height:auto}.track .stage{position:relative;height:auto;padding:4vh 0}
  .track .line{display:none}.track ol{grid-template-columns:1fr;gap:16px;margin-top:0}
  .track li{display:flex;align-items:center;gap:18px}.track b{margin-top:0;color:var(--paper)}
  .index a{grid-template-columns:1fr;gap:10px}
  .index .thumb{display:block;border:1px solid var(--line);margin-bottom:6px}
  .board{grid-template-columns:1fr}.board > div{border-right:0;border-bottom:1px solid var(--line)}.board > div:last-child{border-bottom:0}
  .split{grid-template-columns:1fr;min-height:auto}
  .door{min-height:62svh;border-right:0;border-bottom:1px solid var(--line)}
  .door:first-child{padding-top:16vh}
}

/* ---------- motion hooks (env.js drives transform/opacity only) ---------- */
.js [data-rise]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--out),transform .9s var(--out);transition-delay:calc(var(--i,0) * 110ms)}
.js [data-rise].in{opacity:1;transform:none}
.js [data-fly]{opacity:0}

@media (max-width:860px){
  .hero{padding:18vh 0 8vh}
  .hero .wrap{grid-template-columns:1fr}
  .bang3d{position:absolute;right:-14vw;top:-6vh;width:64vw;max-width:none;opacity:.55;z-index:-1}
  .tiles,.tiles.three{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:18px}
  .steps::before{left:17px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .steps li{display:flex;align-items:center;gap:18px}.steps b{margin-top:0}
  .stats{grid-template-columns:1fr}
  .stats > div,.stats > div + div{padding:3vh 0;border-right:0;border-bottom:1px solid var(--line)}
  .nav .home img{width:76px}.nav .home{padding:9px 13px}.menu-btn{padding:10px 13px}
  .depth{height:200vh}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grain{animation:none}
  .js [data-rise],.js [data-fly]{opacity:1;transform:none;transition:none}
  .js [data-scan],.js [data-iris]{--s:1 !important}
  .menu ol a{opacity:1;transform:none;transition:none}
  .depth{height:auto}.depth .stage{position:relative;height:auto;padding:18vh 0}
  .track{height:auto}.track .stage{position:relative;height:auto}
}

/* ================= v4.2 · paid landing pages + lead form (2026-10-26) ================= */
/* LP hero: headline + one context line + CTA, relay bot on the right */
.hero.lp .wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.hero.lp .for{margin-top:3.2vh;color:var(--muted)}
.hero.lp .ctas{margin-top:4.5vh}
.hero.lp .heroBot{max-width:520px;justify-self:end}
.tile .img .gbot{width:100%;height:100%;aspect-ratio:auto}
/* pricing board: same scoreboard, numerals sized for "$2,500" */
.board.price .big{font-size:clamp(52px,6.2vw,104px)}
/* lead form: underline fields on ink, mono labels, the site's orange button */
.lead{grid-column:1;grid-row:2;margin-top:5vh;max-width:760px}
.lead .row{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.lead label{display:block;padding:14px 0 0}
.lead label .mono{display:block;color:var(--muted);font-size:11px}
.lead input,.lead select{width:100%;margin-top:6px;padding:10px 0 12px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--paper);
  font-family:var(--display);font-style:italic;font-weight:200;font-size:clamp(20px,1.9vw,26px);letter-spacing:-.02em;outline:0;transition:border-color .2s ease;-webkit-appearance:none;appearance:none}
.lead select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23E84B1C' stroke-width='1.8'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center;background-size:16px;padding-right:26px}
.lead select option{background:var(--ink);color:var(--paper);font-style:normal}
.lead input:focus,.lead select:focus{border-bottom-color:var(--orange);box-shadow:0 1px 0 0 var(--orange)}
.lead input:focus-visible,.lead select:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.lead .ok:focus{outline:0}
.lead input[aria-invalid="true"],.lead select[aria-invalid="true"]{border-bottom-color:var(--orange);border-bottom-style:dashed}
.lead .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead .ctas{margin-top:4.5vh}
button.btn{border:0;cursor:pointer}
button.btn[disabled]{opacity:.55;cursor:progress}
.lead .msg{min-height:1.5em;margin-top:2.4vh;color:var(--muted)}
.lead .msg.err{color:var(--orange)}
.lead.done .row,.lead.done label,.lead.done .ctas.send{display:none}
.lead .ok h3{font-family:var(--display);font-style:italic;font-weight:900;letter-spacing:-.035em;line-height:1;font-size:clamp(32px,3.6vw,56px)}
.lead .ok .ctas{margin-top:3.5vh}
@media (max-width:860px){
  .hero.lp .wrap{grid-template-columns:1fr}
  .hero.lp .heroBot{max-width:360px;justify-self:start;margin-top:6vh}
  .lead{grid-column:1}
  .lead .row{grid-template-columns:1fr}
}
.close.solo{border-top:0;padding-top:22vh}
/* privacy: one readable column, same type system */
.legalpage{padding-top:22vh}
.legalpage .prose{max-width:62ch;margin-top:6vh}
.legalpage .prose h2{font-family:var(--display);font-style:italic;font-weight:900;letter-spacing:-.03em;font-size:clamp(24px,2.4vw,34px);line-height:1.05;margin:5vh 0 1.4vh}
.legalpage .prose p{color:var(--body);font-size:18px;line-height:1.65}
.legalpage .prose p.mono{color:var(--muted);font-size:12px}
.legalpage .prose a{color:var(--orange)}