/* Home hero motion proof, pass four (Mason, 2026-10-20). Ink ground, cream type, acid green for the one button. Each
   beat's accent (--acc) is measured from its specimen photo and tweened as the scroll moves. No pink, no blue in the
   chrome. Every object has a home spot here; the script moves, flips, masks and breaks it from there. */
:root{--u:1vh;--ink:#060507;--ink2:#110e12;--cream:#EBDED0;--stone:#9A938A;--acid:#81FF28;--orange:#FF6A00;--purple:#762AED;--acc:#FF4DCB;--gx:clamp(16px,5vw,72px)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--cream);font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.hv{font-weight:900}.th{font-weight:300}
.bar{position:fixed;z-index:30;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:14px var(--gx);background:rgba(6,5,7,.6);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);border-bottom:1px solid rgba(235,222,208,.08)}
.menu{display:none;font:900 16px/1 'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:.04em;background:none;border:1px solid rgba(235,222,208,.35);color:var(--cream);padding:11px 12px;border-radius:3px;cursor:pointer}
.mnu{position:fixed;inset:0;z-index:60;background:var(--ink);padding:90px var(--gx) 30px;display:flex;flex-direction:column;gap:22px}
.mnu[hidden]{display:none}
.mnu nav{display:flex;flex-direction:column;gap:6px}
.mnu nav a{font:900 15vw/.9 'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:-.022em;color:var(--cream);text-decoration:none}
.mx{position:absolute;top:18px;right:var(--gx);font:600 12px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.16em;background:none;border:0;color:var(--cream);padding:12px 0;cursor:pointer}
.mn-note{margin:0;color:var(--stone);font-size:14px}
.wm{font:900 24px/1 'Big Shoulders Display',sans-serif;text-transform:uppercase;color:var(--cream);text-decoration:none;letter-spacing:-.01em}
.wm span{color:var(--orange)}
.bar nav{display:flex;gap:26px;align-items:center}
.bar nav a{font:300 19px/1 'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--cream);text-decoration:none}
.go{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:3px;background:var(--acid);color:var(--ink)!important;
  font:900 17px/1 'Big Shoulders Display',sans-serif!important;text-transform:uppercase;letter-spacing:.02em!important;text-decoration:none;text-align:center}
.go.big{min-height:58px;padding:0 26px;font-size:21px!important}
.more{color:var(--cream);font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(235,222,208,.35)}

.intro{position:fixed;inset:0;z-index:40;background:var(--ink);display:flex;align-items:center;justify-content:center;pointer-events:none}
.iw{margin:0;font:900 clamp(96px,14vw,250px)/.84 'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:-.022em;color:var(--cream);text-align:center}
.iw span{display:inline-block}.iw i{font-style:normal;color:var(--orange)}

.run{position:relative;height:1580vh}
.stage{position:sticky;top:0;height:calc(100 * var(--u));overflow:hidden;background:var(--ink)}

.chrome{position:absolute;z-index:12;top:92px;left:var(--gx);right:var(--gx);display:flex;justify-content:space-between;pointer-events:none}
.chrome p{margin:0;font:600 12px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.16em;color:var(--stone)}
.chrome b{color:var(--acc);font-weight:600}
.kick span{color:var(--cream)}

/* specimens */
.spec,.card{position:absolute;margin:0;z-index:3;will-change:transform}
.spec .ph{position:relative;overflow:hidden;border-radius:2px}
.spec img,.card img{display:block;width:100%;height:auto}
.strip{display:flex;gap:2px;margin-top:10px;height:44px;align-items:flex-start}
.spec .strip,.card .strip{opacity:0}
.sg{position:relative;height:10px;min-width:4px}
.sg em,.sg i{position:absolute;left:0;white-space:nowrap;font:600 10px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-style:normal;color:var(--cream)}
.sg em{top:16px}.sg i{top:30px;color:var(--stone)}
.tag{position:absolute;left:10px;top:10px;font:600 10px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.14em;background:rgba(6,5,7,.8);color:var(--cream);padding:6px 8px;opacity:0}

#sp-ring{right:var(--gx);top:calc(14 * var(--u));width:min(calc(54 * var(--u)),38vw)}
#sp-studio{right:var(--gx);top:calc(14 * var(--u));width:min(calc(56 * var(--u)),36vw)}
#sp-close{left:var(--gx);top:calc(22 * var(--u));width:44vw}
#sp-ring .strip{opacity:1}
#sp-line{right:var(--gx);top:calc(14 * var(--u));width:min(calc(54 * var(--u)),42vw)}
#sp-mega{left:var(--gx);top:calc(14 * var(--u));width:min(calc(54 * var(--u)),42vw)}
#sp-grill{left:50%;top:calc(12 * var(--u));width:min(calc(46 * var(--u)),40vw);margin-left:calc(min(calc(46 * var(--u)),40vw) / -2)}
#sp-door{right:var(--gx);top:calc(14 * var(--u));width:min(calc(54 * var(--u)),42vw)}

/* the lineup: the base recedes, the peacock (a masked copy) steps forward with its ring */
#sp-line .ph{overflow:visible}
#sp-line .base{transform-origin:50% 60%}
.pk{position:absolute;inset:0;transform-origin:71.7% 68%;pointer-events:none}
.pk img{clip-path:ellipse(13% 27% at 71.7% 68%)}
.mark{position:absolute;left:58.7%;top:41%;width:26%;height:54%;border:3px solid var(--acc);border-radius:50%;opacity:0}
.mark b{position:absolute;bottom:calc(100% + 10px);right:0;white-space:nowrap;font:600 11px/1.2 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.14em;background:var(--ink);color:var(--acc);padding:6px 8px}

/* the megaphone shrinks to a dot */
#sp-mega .ph{clip-path:circle(150% at 32.3% 21%)}
.dot{position:absolute;left:calc(var(--mx,32.3%) - 13px);top:calc(21% - 13px);width:26px;height:26px;border-radius:50%;background:var(--acc);transform:scale(0);z-index:2}
#sp-mega{--mx:32.3%}
#sp-mega .dot{position:absolute}
#sp-mega{overflow:visible}
.l3 .c{opacity:0}
.wd2{white-space:nowrap}

/* the grillz break into their palette */
.slices{position:absolute;left:0;top:0;width:100%;aspect-ratio:900/1117;pointer-events:none}
.sl{position:absolute;top:0;width:5.2%;height:100%;background-image:url(img3/grillz-900.webp);background-size:2000% 100%;opacity:0;transform-origin:50% 0}
.sl i{position:absolute;inset:0;opacity:0;box-shadow:inset 0 0 0 1px rgba(235,222,208,.18)}

/* the eye: its iris is the five-second ring */
.full{position:absolute;inset:0;margin:0;z-index:2;clip-path:ellipse(100% 0% at 50% 47%);overflow:hidden}
.ebox{position:absolute;left:0;top:0;transform-origin:51.1% 46.6%}
.ebox img{width:100%;height:100%;display:block}
.ring{position:absolute;left:51.1%;top:46.6%;width:44%;overflow:visible;opacity:0}
.ring .track{fill:none;stroke:rgba(6,5,7,.35);stroke-width:7}
.ring .prog{fill:none;stroke:var(--acid);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;mix-blend-mode:screen}
.ring text{font:900 64px/1 'Big Shoulders Display',sans-serif;fill:var(--ink);opacity:.82}
.estrip{position:absolute;z-index:4;left:var(--gx);right:var(--gx);bottom:18px;opacity:0}
.estrip .strip{margin:0;opacity:1}
.estrip .sg em{text-shadow:0 1px 3px rgba(0,0,0,.8)}.estrip .sg i{color:var(--cream);opacity:.8}

/* the hero */
.hero{position:absolute;z-index:6;left:var(--gx);top:calc(19 * var(--u));width:min(54vw,820px)}
h1,.l,.eh{margin:0;font-family:'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:-.022em;line-height:.84}
h1{font-size:clamp(64px,8.2vw,146px)}
h1 .hv,.l .hv,.eh .hv{display:block}
h1 .th,.l .th{display:block;color:var(--acc)}
.lead{max-width:34em;margin:26px 0 0;font-size:clamp(17px,1.35vw,21px);line-height:1.45;color:var(--cream)}
.lead b{color:var(--acc);font-weight:700}
.row2{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:26px}
.pick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:24px}
.pick>span{font:600 12px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.16em;color:var(--stone);margin-right:6px}
.chip{font:600 14px/1 'Hanken Grotesk',sans-serif;padding:9px 13px;border-radius:99px;border:1px solid rgba(235,222,208,.3);background:transparent;color:var(--cream);cursor:pointer}
.chip[aria-pressed=true]{background:var(--cream);color:var(--ink);border-color:var(--cream)}

/* lines: they wipe where they stand */
.l{position:absolute;z-index:6;font-size:clamp(52px,6.6vw,118px)}
.l .hv,.l .th{clip-path:inset(-20% 0% -20% 100%)}
.l1,.l5{left:var(--gx);top:calc(28 * var(--u));width:44vw}
.l2{left:var(--gx);bottom:calc(12 * var(--u));width:62vw}
.l2 .hv,.l2 .th{display:table;background:var(--ink);padding:.06em .12em .02em}
.l3{right:var(--gx);top:calc(28 * var(--u));width:46vw;text-align:right}
.l3 .hv{display:block}
.l4{left:var(--gx);top:calc(30 * var(--u));width:38vw}
.l6{left:var(--gx);top:calc(14 * var(--u));width:min(58vw,980px);font-size:clamp(40px,4.2vw,76px)}
.l6 .hv,.l6 .th{display:block}
.l7{left:var(--gx);top:calc(13 * var(--u));font-size:clamp(48px,5.4vw,96px)}
.l7 .hv,.l7 .th{display:inline-block}

/* the door frame that holds the steps, then becomes the editor window */
.dframe{position:absolute;z-index:7;left:0;top:0;width:10px;height:10px;border:5px solid var(--cream);opacity:0;pointer-events:none}
.steps{position:absolute;z-index:8;inset:0;pointer-events:none}
.step{position:absolute;left:50%;top:52%;width:min(760px,74vw);transform:translate(-50%,-50%)}
.step>*{clip-path:inset(-20% 0% -20% 100%)}
.step .n{display:block;font:900 clamp(80px,9vw,170px)/.84 'Big Shoulders Display',sans-serif;letter-spacing:-.022em;color:var(--acc)}
.step .sh{margin:14px 0 0;font:900 clamp(60px,8vw,150px)/.84 'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:-.022em}
.step .sl2{margin:20px 0 0;font-size:clamp(17px,1.5vw,23px);line-height:1.45;max-width:30em;color:var(--cream)}

/* the 2006 editor (a concept), ported from the v6 storyboard editor */
.ed{position:absolute;inset:0;z-index:7;pointer-events:none}
.oldwin{position:absolute;left:var(--gx);top:calc(36 * var(--u));width:min(46vw,640px);background:#fff;color:#1c2b4a;border:1px solid #6d86b8;border-radius:6px;box-shadow:0 30px 70px rgba(0,0,0,.55);font-family:Verdana,Tahoma,Geneva,sans-serif;font-size:12px;overflow:hidden;clip-path:inset(0 0 100% 0)}
.ow-title{display:flex;align-items:center;gap:10px;background:linear-gradient(#e9e9e9,#c9c9c9);color:#333;font:bold 12px/1 Tahoma,sans-serif;padding:7px 10px;border-bottom:1px solid #999}
.ow-dots{display:flex;gap:5px}.ow-dots i{width:11px;height:11px;border-radius:50%;background:#e25b4b;box-shadow:inset 0 -1px 2px rgba(0,0,0,.3)}.ow-dots i:nth-child(2){background:#f0b33a}.ow-dots i:nth-child(3){background:#68b84f}
.ow-url{background:#f4f4f4;border-bottom:1px solid #bbb;padding:6px 10px;font:11px/1 Tahoma,sans-serif;color:#555}
.ow-tabs{display:flex;gap:2px;background:#003399;padding:8px 10px 0}
.ow-tabs span{background:#6699cc;color:#fff;font-weight:bold;padding:6px 12px;border-radius:4px 4px 0 0}
.ow-tabs span.on{background:#fff;color:#003399}
.ow-body{padding:14px 16px 16px;display:grid;gap:9px;background:#fff}
.ow-row{display:grid;grid-template-columns:80px 1fr;gap:10px;align-items:start}
.ow-lab{font-weight:bold;color:#ff6600;padding-top:6px}
.ow-in,.ow-field{background:#fff;border:1px solid #7f9db9;padding:6px 8px;font-size:14px;min-height:30px}
.ow-sel b{float:right;color:#555}
.ow-field{display:grid}.ow-field>span{grid-area:1/1}
.ow-new .c{opacity:0}
.caret{display:inline-block;width:1px;height:15px;background:#1c2b4a;vertical-align:-2px;margin-left:1px}
.ow-photos{display:flex;gap:8px;align-items:center}
.ow-pic{position:relative;width:74px;height:56px;border:1px solid #7f9db9;overflow:hidden;background:#ddd}
.ow-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.op-new{opacity:0}
.ow-up{background:linear-gradient(#fdfdfd,#d7deea);border:1px solid #6b85b8;border-radius:3px;padding:5px 10px;font-weight:bold;font-size:11px}
.ow-menu{display:grid;grid-template-columns:1fr auto;gap:5px 12px;border:1px solid #7f9db9;padding:8px;font-size:13px}
.ow-menu label{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:11px;color:#003399}
.ow-box{display:inline-block;width:12px;height:12px;border:1px solid #7f9db9;background:#fff;position:relative}
.ow-box::after{content:'';position:absolute;left:3px;top:0;width:4px;height:8px;border:solid #003399;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:var(--tick,0)}
.ow-foot{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.ow-song{font-size:11px;color:#003399}
.ow-save{background:linear-gradient(#ffb36b,#ff6600);color:#fff;border:1px solid #c94f00;border-radius:3px;padding:6px 14px;font-weight:bold}
.newphone{position:absolute;right:calc(var(--gx) + 4vw);top:calc(22 * var(--u));width:min(250px,18vw);aspect-ratio:9/19;border-radius:36px;background:#0d0b0c;padding:10px;box-shadow:0 40px 80px rgba(0,0,0,.6),inset 0 0 0 2px #2a2628;opacity:0}
.np-scr{width:100%;height:100%;border-radius:27px;overflow:hidden;background:#140c09;color:#FBEBD7;display:flex;flex-direction:column}
.np-ph{position:relative;height:54%}
.np-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.np-new{opacity:0}
.np-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:14px 16px 18px}
.np-name{font-family:Anton,Impact,'Big Shoulders Display',sans-serif;font-weight:900;font-size:30px;line-height:.95;text-transform:uppercase}
.np-line{display:grid;font-size:13px;opacity:.9}.np-line>span{grid-area:1/1}
.nl-new{opacity:0}
.np-sold{align-self:flex-start;font-size:11px;font-weight:700;background:#B8462A;color:#FBEBD7;padding:5px 9px;border-radius:4px;opacity:0}
.np-btn{align-self:flex-start;margin-top:auto;background:#FBEBD7;color:#2A120B;font-weight:700;font-size:12px;padding:8px 13px;border-radius:999px}
.ed-note{position:absolute;right:calc(var(--gx) + 4vw);top:calc(calc(22 * var(--u)) + min(250px,18vw) * 19 / 9 + 14px);margin:0;font:600 10px/1.3 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.12em;color:var(--stone);opacity:0;width:min(250px,18vw);text-align:center}

/* proof: specimen cards with the quote on the back */
.card{left:50%;top:calc(18 * var(--u));width:50vw;margin-left:-25vw;perspective:1800px}
.flip{position:relative;transform-style:preserve-3d}
.face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.front .ph{position:relative;overflow:hidden;border-radius:2px}
.back{position:absolute;left:0;top:0;right:0;bottom:54px;transform:rotateY(180deg);background:var(--ink2);border:2px solid var(--acc);border-radius:2px;display:flex;align-items:center;padding:6% 7%}
.back blockquote{margin:0}
.back p{margin:0;font:300 clamp(30px,2.9vw,50px)/1.02 'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:-.01em}
.back cite{display:block;margin-top:18px;font:600 12px/1 'IBM Plex Mono',monospace;font-style:normal;text-transform:uppercase;letter-spacing:.16em;color:var(--acc)}
.bk{position:absolute;left:7%;top:20px;font:600 10px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--stone)}

/* the four sizes: spines that open one at a time (an accordion on phone) */
.sizes{position:absolute;z-index:6;left:var(--gx);right:var(--gx);top:calc(28 * var(--u));bottom:calc(8 * var(--u));display:flex;gap:10px;clip-path:inset(0 0 0 100%)}
.sz{position:relative;flex:0 0 92px;min-width:0;overflow:hidden;border:1px solid rgba(235,222,208,.22);border-radius:3px;background:var(--ink2);display:flex}
.sz.z0{flex-grow:1}
.sz-hd{all:unset;cursor:pointer;flex:0 0 90px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18px 0;border-right:1px solid rgba(235,222,208,.12)}
.sz-n{font:600 11px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--stone)}
.sz-t{writing-mode:vertical-rl;transform:rotate(180deg);font:900 30px/1 'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap}
.sz-p{font:900 22px/1 'Big Shoulders Display',sans-serif;color:var(--acc)}
.sz-in{flex:0 0 auto;width:min(560px,52vw);padding:28px 34px;display:flex;flex-direction:column;align-items:flex-start}
.sz-big{margin:0;font:900 clamp(48px,5vw,92px)/.84 'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:-.022em}
.sz-price{margin:16px 0 0;display:flex;align-items:baseline;gap:12px;font:900 clamp(40px,3.6vw,64px)/1 'Big Shoulders Display',sans-serif;color:var(--cream)}
.sz-price{background:var(--purple);padding:6px 14px 4px}
.sz-price span{font:600 11px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--cream)}
.sz-d{margin:22px 0 0;font-size:clamp(17px,1.35vw,21px);line-height:1.45;max-width:26em}
.sz-d2{margin:8px 0 22px;font-size:15px;line-height:1.45;color:var(--stone)}
.sz-in .go{margin-top:auto}

/* the close */
.end{position:absolute;z-index:6;left:var(--gx);right:var(--gx);top:50%;transform:translateY(-50%);text-align:center}
.eh{font-size:clamp(72px,8.4vw,160px)}
.eh .hv{color:var(--acid)}.eh .th{display:block}
.eh .hv,.eh .th{clip-path:inset(-20% 0% -20% 100%)}
.tiles{display:flex;justify-content:center;gap:4px;margin:30px auto 0;width:min(640px,84vw);height:64px;align-items:flex-end}
.tile{position:relative;flex:1;height:64px;overflow:hidden;border-radius:2px;opacity:0}
.tile img{width:100%;height:100%;object-fit:cover}
.tile i{position:absolute;inset:0;opacity:0}
.end .el,.end .go{clip-path:inset(-20% 0% -20% 100%)}
.el{margin:22px 0 26px;font-size:clamp(17px,1.4vw,22px)}
.el b{font:900 1.4em/1 'Big Shoulders Display',sans-serif;color:var(--acid)}

@media (max-width:760px){
 .bar{padding:14px var(--gx)}
 .bar nav a:not(.go){display:none}
 .go{min-height:40px;font-size:15px!important;padding:0 14px}
 .go.big{min-height:54px;font-size:19px!important;width:100%}
 .chrome{top:66px}
 .chrome p{font-size:10px;letter-spacing:.12em}
 .iw{font-size:27vw}.iw span{display:block}
 /* phone hero: the ring light owns the first screen, the headline sits on its lower half over a scrim */
 #sp-ring{left:0;right:0;top:0;width:100vw}
 #sp-ring .strip{display:none}
 #sp-ring .ph{border-radius:0}
 #sp-ring .ph::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,5,7,0) 38%,rgba(6,5,7,.72) 62%,var(--ink) 92%)}
 .hero{top:auto;bottom:22px;width:auto;right:var(--gx)}
 h1{font-size:15.5vw}
 .lead{font-size:16px;margin-top:14px;max-width:none}
 .row2{margin-top:16px;gap:14px}
 .more{display:none}
 .pick{margin-top:14px;gap:6px}
 .chip{font-size:13px;padding:7px 10px}
 #sp-line,#sp-mega,#sp-door{left:12vw;right:auto;top:calc(15 * var(--u));width:76vw}
 #sp-grill{left:15vw;margin-left:0;top:calc(14 * var(--u));width:70vw}
 .strip{height:40px}
 .l{font-size:12.4vw}
 .l1,.l3,.l5,.l4{left:var(--gx);right:var(--gx);top:auto;bottom:calc(5 * var(--u));width:auto;text-align:left}
 .l2{bottom:calc(12 * var(--u));width:auto;right:var(--gx)}
 .estrip{bottom:10px}
 .estrip .sg i{display:none}
 .step{width:calc(100vw - 2 * var(--gx) - 40px)}
 .step .n{font-size:22vw}.step .sh{font-size:15vw}.step .sl2{font-size:16px}
 .l6{top:96px;right:var(--gx);width:auto;font-size:8.4vw}
 .oldwin{left:var(--gx);top:auto;bottom:calc(16 * var(--u));width:74vw;font-size:10px}
 .ow-body{padding:10px;gap:7px}.ow-row{grid-template-columns:62px 1fr;gap:6px}
 .ow-in,.ow-field{font-size:12px;min-height:26px;padding:5px 6px}
 .r-mood,.r-menu,.ow-foot,.ow-url{display:none}
 .ow-pic{width:52px;height:40px}
 .newphone{right:var(--gx);top:auto;bottom:calc(4 * var(--u));width:36vw;padding:6px;border-radius:22px}
 .np-scr{border-radius:17px}.np-body{padding:8px 9px 10px;gap:5px}.np-name{font-size:17px}.np-line{font-size:10px}.np-sold{font-size:8px;padding:3px 5px}.np-btn{font-size:9px;padding:5px 8px}
 .ed-note{left:var(--gx);right:auto;top:auto;bottom:calc(calc(16 * var(--u)) - 26px);width:auto;text-align:left}
 .card{left:var(--gx);right:var(--gx);width:auto;margin-left:0;top:calc(15 * var(--u))}
 .front .ph{aspect-ratio:4/5}.front .ph img{height:100%;object-fit:cover}
 .back p{font-size:8.2vw}
 .l7{top:96px;font-size:12vw}.l7 .hv,.l7 .th{display:block}
 .sizes{top:200px;bottom:20px;flex-direction:column;gap:8px}
 .sz{flex:0 0 58px;flex-direction:column}
 .sz.z0{flex-grow:1}
 .sz-hd{flex:0 0 56px;flex-direction:row;padding:0 16px;gap:12px;border-right:0;border-bottom:1px solid rgba(235,222,208,.12)}
 .sz-t{writing-mode:horizontal-tb;transform:none;font-size:24px;flex:1}
 .sz-in{width:auto;padding:16px 16px 18px}
 .sz-big{display:none}
 .sz-price{margin:0;font-size:38px}
 .sz-d{margin-top:14px;font-size:16px}.sz-d2{font-size:14px;margin-bottom:16px}
 .sz-in .go{width:100%}
 .eh{font-size:21vw}
 .tiles{height:48px}.tile{height:48px}
}

/* who we are and what we make, the second screen */
.what{position:absolute;z-index:6;left:var(--gx);top:calc(19 * var(--u));width:min(54vw,800px)}
.what>*{clip-path:inset(-20% 0% -20% 100%)}
.wh{margin:0;font-family:'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:-.022em;line-height:.84;font-size:clamp(48px,5.6vw,100px)}
.wh .hv{display:block}.wh .th{display:block;color:var(--acc)}
.wd{margin:22px 0 0;font-size:clamp(17px,1.35vw,21px);line-height:1.45;max-width:34em}
.ofrs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}
.ofr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 14px;border:1px solid rgba(235,222,208,.22);border-radius:3px;color:var(--cream);text-decoration:none;background:rgba(6,5,7,.55)}
.ofr:hover{border-color:var(--acid)}
.o-t{font:900 24px/1 'Big Shoulders Display',sans-serif;text-transform:uppercase}
.o-p{font:900 24px/1 'Big Shoulders Display',sans-serif;color:var(--acid)}
.o-d{grid-column:1/-1;font-size:14px;color:var(--stone)}
.wn{margin:16px 0 0;font:600 12px/1.4 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.12em;color:var(--stone)}

/* the work */
.l8{left:var(--gx);top:calc(26 * var(--u));width:34vw;font-size:clamp(48px,5.2vw,96px)}
.l8 .allw{display:inline-block;margin-top:26px;font:600 16px/1 'Hanken Grotesk',sans-serif;text-transform:none;letter-spacing:0;clip-path:inset(-40% 0% -40% 100%)}
.card{left:auto;right:var(--gx);margin-left:0;top:calc(18 * var(--u));width:52vw}
.badge{position:absolute;right:14px;bottom:14px;width:22%;aspect-ratio:1;object-fit:cover;border-radius:50%;box-shadow:0 10px 30px rgba(0,0,0,.6);transform:scale(0)}
.badge.sq{border-radius:2px;aspect-ratio:1070/1400;width:16%}
.card .tag{opacity:0}
.strip.brand .sg em{white-space:normal;width:100%;line-height:1.1}
.strip.brand .sg i{top:auto;bottom:-30px}
.strip.brand{height:52px}
.back{bottom:62px;flex-direction:column;align-items:flex-start;justify-content:center}
.bq{position:absolute;left:7%;right:7%;top:50%;transform:translateY(-50%);margin:0}
.bq1 p{font-size:clamp(24px,2.1vw,38px)}
.bq1{opacity:0}
.live{position:absolute;left:7%;bottom:18px;color:var(--acid);font:600 12px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.14em;text-decoration:none}

/* the steps carry the studio photos */
.step.wp{display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:center;width:min(1180px,80vw)}
.sph{margin:0;order:2}
.sph .ph{overflow:hidden;border-radius:2px}
.sph img{display:block;width:100%;height:auto}
.sph .strip{opacity:1}
.step>.sph,.step>.stx{clip-path:inset(-20% 0% -20% 100%)}
.step>.stx>*{clip-path:none}

/* the close sits beside the couch */
.end{left:auto;right:var(--gx);width:46vw;text-align:left}
.end .tiles{margin:26px 0 0;width:100%}

/* footer */
.foot{position:relative;background:var(--ink);border-top:1px solid rgba(235,222,208,.1);padding:70px var(--gx) 30px}
.wmb{font:900 clamp(70px,15vw,280px)/.82 'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:-.03em;color:var(--cream)}
.wmb span{color:var(--orange)}
.map{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:50px}
.map div{display:flex;flex-direction:column;gap:10px}
.map b{font:600 12px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.16em;color:var(--stone);margin-bottom:6px}
.map a{color:var(--cream);text-decoration:none;font-size:16px}
.map a:hover{color:var(--acid)}
.meta{display:flex;gap:26px;margin-top:46px;font:600 12px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--cream)}
.open i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--acid);margin-right:9px;box-shadow:0 0 0 0 rgba(129,255,40,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(129,255,40,0)}100%{box-shadow:0 0 0 0 rgba(129,255,40,0)}}
.base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid rgba(235,222,208,.1);color:var(--stone);font-size:13px}
.base a{color:var(--stone)}

@media (max-width:760px){
 .bar nav a:not(.go){display:none}
 .bar nav{gap:8px}
 .menu{display:inline-block}
 .chrome{top:78px}
 #sp-studio{left:0;right:0;top:0;width:100vw}
 #sp-studio .strip{display:none}
 #sp-studio .ph{border-radius:0}
 #sp-studio .ph::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,5,7,0) 30%,rgba(6,5,7,.8) 52%,var(--ink) 70%)}
 .what{top:auto;bottom:18px;width:auto;right:var(--gx)}
 .wh{font-size:11.6vw}
 .wd{font-size:15px;margin-top:12px}
 .ofrs{grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
 .ofr{padding:9px 10px}.o-t,.o-p{font-size:19px}.o-d{display:none}
 .wn{font-size:10px;margin-top:10px}
 .l8{top:96px;right:var(--gx);width:auto;font-size:11vw}
 .l8 .allw{margin-top:12px;font-size:14px}
 .card{left:var(--gx);right:var(--gx);width:auto;top:250px}
 .front .ph{aspect-ratio:4/5}.front .ph img{height:100%;object-fit:cover;object-position:50% 40%}
 .bq p{font-size:7.4vw}.bq1 p{font-size:6vw}
 .step.wp{grid-template-columns:1fr;gap:16px;width:calc(100vw - 2 * var(--gx) - 30px)}
 .sph{order:0}.sph .ph{aspect-ratio:16/10}.sph img{height:100%;object-fit:cover}.sph .strip{display:none}
 .step.wp .n{font-size:16vw}.step.wp .sh{font-size:12.5vw}
 #sp-close{left:0;right:0;top:66px;width:100vw}
 #sp-close .strip{display:none}
 .end{left:var(--gx);right:var(--gx);width:auto;top:auto;bottom:calc(3 * var(--u));transform:none}
 .map{grid-template-columns:1fr 1fr;gap:28px 18px}
 .meta{flex-direction:column;gap:12px}
}

/* pass four: photos inside the open sizes and the steps */
.sz-go{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.sz-go .more{font-size:15px}
.sz-ph{flex:1 1 auto;min-width:0;margin:0;padding:28px 28px 20px 0;display:flex;flex-direction:column}
.sz-ph .ph{flex:1;min-height:0;overflow:hidden;border-radius:2px}
.sz-ph img{width:100%;height:100%;object-fit:cover;display:block}
.sz-ph .strip{opacity:1;flex:0 0 auto}
.sz-list{justify-content:center;gap:12px;border-left:1px solid rgba(235,222,208,.12);padding-left:28px}
.sz-list b{font:600 12px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.16em;color:var(--acc);margin-bottom:6px}
.sz-list span{font:900 clamp(22px,2vw,34px)/1 'Big Shoulders Display',sans-serif;text-transform:uppercase}
.sph .ph{aspect-ratio:16/11}.sph img{height:100%;object-fit:cover;object-position:50% 35%}
@media (max-width:760px){.sz-ph{display:none}}

/* ---- pass five (Mason, 2026-10-20): GATE and MIRROR fixes ---- */
/* words reveal whole: no clip wipes on type anywhere, so a resting scroll never shows a half-word */
.w{display:inline-block}
.l .hv,.l .th,.step>*,.step>.sph,.step>.stx,.what>*,.eh .hv,.eh .th,.end .el,.end .go,.l8 .allw,.sizes{clip-path:none}
.np-name{font-family:'Big Shoulders Display',Impact,sans-serif}

/* the work: the client's real site on a phone */
.dev{position:absolute;z-index:4;margin:0;right:calc(var(--gx) + 5vw);top:calc(13 * var(--u));height:calc(76 * var(--u));aspect-ratio:780/1688;opacity:0;will-change:transform}
.dev .scr{position:relative;height:100%;overflow:hidden;border-radius:34px;background:#0d0b0c;box-shadow:0 0 0 9px #0d0b0c,0 0 0 10px #2a2628,0 50px 90px rgba(0,0,0,.6)}
.dev .site{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.dev .tag{left:0;right:auto;top:-38px;white-space:nowrap}
.dev .strip{position:absolute;left:0;right:0;top:calc(100% + 18px);margin:0;opacity:0}
.dev .live{position:absolute;left:0;top:calc(100% + 76px);opacity:0;color:var(--acid);font:600 12px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.14em;text-decoration:none;white-space:nowrap}
.before{position:absolute;inset:0;z-index:1;background:#d9d6d0;color:#3a3633;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:12%}
.before .bl{font:600 11px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.16em;color:#77716b}
.before p{margin:0;font:400 clamp(20px,calc(2.2 * var(--u)),28px)/1.3 'Hanken Grotesk',sans-serif}
#sp-sp .site{z-index:2;clip-path:inset(100% 0 0 0)}
.msg{position:absolute;z-index:6;margin:0;left:var(--gx);top:calc(30 * var(--u));width:min(40vw,640px);opacity:0}
.msg p{margin:0;font:600 clamp(24px,2.1vw,34px)/1.28 'Hanken Grotesk',sans-serif;letter-spacing:-.005em}
.msg.sms p{display:inline-block;background:var(--cream);color:var(--ink);padding:18px 24px 20px;border-radius:26px 26px 26px 6px}
.msg.mail p{border-radius:6px;font-size:clamp(28px,2.6vw,44px)}
.msg.q p{font-weight:400;font-size:clamp(22px,1.8vw,30px);border-left:3px solid var(--acc);padding-left:22px}
.msg cite{display:block;margin-top:18px;font:600 12px/1.4 'IBM Plex Mono',monospace;font-style:normal;text-transform:uppercase;letter-spacing:.16em;color:var(--acc)}

@media (max-width:760px){
 .dev{left:0;right:0;top:0;width:100vw;height:calc(100 * var(--u));aspect-ratio:auto}
 .dev .scr{border-radius:0;box-shadow:none}
 .dev .tag{left:var(--gx);right:auto;top:auto;bottom:22px;z-index:3;position:absolute}
 .dev .strip,.dev .live{display:none}
 .before{padding:28% 10% 10%}
 .before p{font-size:26px}
 .msg{left:var(--gx);right:var(--gx);width:auto;top:auto;bottom:calc(5 * var(--u))}
 .msg p{font-size:19px}
 .msg.mail p{font-size:24px}
 .msg.q p{font-size:17px;padding-left:16px}
 .msg cite{font-size:10px;margin-top:12px}
 /* the editor stacks: window under the line, phone below it, nothing overlaps */
 .oldwin{top:250px;bottom:auto;width:calc(100vw - 2 * var(--gx))}
 .newphone{bottom:calc(5 * var(--u));width:34vw}
 .ed-note{bottom:calc(5 * var(--u));width:46vw}
 /* the sizes: shorter closed rows so the open card breathes */
 .l7{font-size:11vw}
 .sizes{top:186px;bottom:14px;gap:6px}
 .sz{flex:0 0 48px}
 .sz-hd{flex:0 0 46px}
 .sz-t{font-size:21px}.sz-p{font-size:19px}
}

/* pass five, Steve's phone findings (2026-10-20 night) */
/* no content-style mono labels on the site: the palette bars stay as color, their names and hexes go */
.sg em,.sg i,.mark b{display:none}
.strip{height:12px}
.strip.brand{height:12px}
.chrome .count{display:none}
/* the eye's line: the ink sits behind each word, so nothing shows before the words do */
.l2 .hv,.l2 .th{display:block;background:none;padding:0}
.l2 .w{background:var(--ink);padding:.06em .1em .02em;margin-right:-.06em}
@media (max-width:760px){
 /* specimens size to the visible height so the photo never reaches the line under it */
 #sp-line,#sp-mega,#sp-door{left:50%;width:min(76vw,calc(44 * var(--u)));margin-left:calc(min(76vw,calc(44 * var(--u))) / -2);top:calc(13 * var(--u))}
 #sp-grill{left:50%;width:min(70vw,calc(40 * var(--u)));margin-left:calc(min(70vw,calc(40 * var(--u))) / -2);top:calc(13 * var(--u))}
 .spec .strip{display:none}
 /* screen two fits a short screen: the offers never sit on the photo's edge */
 #sp-studio .ph{height:calc(46 * var(--u))}
 #sp-studio .base{height:100%;object-fit:cover;object-position:50% 30%}
 /* the close: a short crop of the couch that fades into the ink, the headline below it */
 #sp-close .ph{height:calc(40 * var(--u))}
 #sp-close .base{height:100%;object-fit:cover;object-position:50% 40%}
 #sp-close .ph::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,5,7,0) 55%,var(--ink) 100%)}
 .eh{font-size:15vw}
 .end .tiles{margin-top:16px}
 .el{margin:14px 0 16px}
}

/* pass five: the H3 neon video is the hero (Steve's pick, 2026-10-20); the ring light is now the first specimen */
.hvid{position:absolute;inset:0;margin:0;z-index:2;overflow:hidden}
.hvid img,.hvid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 55%}
.hvid::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,5,7,.9) 0%,rgba(6,5,7,.8) 44%,rgba(6,5,7,.35) 62%,rgba(6,5,7,0) 80%),linear-gradient(0deg,rgba(6,5,7,.55),rgba(6,5,7,0) 40%)}
@media (prefers-reduced-motion:reduce){.hvid video{display:none}}
#sp-ring{opacity:0}
#sp-ring .strip{opacity:0}
.l9{left:var(--gx);top:calc(28 * var(--u));width:44vw}
@media (max-width:760px){
 .hvid img,.hvid video{object-position:55% 50%}
 .hvid::after{background:linear-gradient(0deg,rgba(6,5,7,.92) 0%,rgba(6,5,7,.72) 42%,rgba(6,5,7,.1) 70%,rgba(6,5,7,.35) 100%)}
 .hero{bottom:calc(5 * var(--u))}
 #sp-ring{left:50%;right:auto;top:calc(13 * var(--u));width:min(76vw,calc(44 * var(--u)));margin-left:calc(min(76vw,calc(44 * var(--u))) / -2)}
 #sp-ring .ph{border-radius:2px}
 #sp-ring .ph::after{display:none}
 .l9{left:var(--gx);right:var(--gx);top:auto;bottom:calc(5 * var(--u));width:auto}
}

/* pass five b (Steve's phone test): screen two shows both of them, head to chest, on ink; the counter sits on ink everywhere */
.chrome .kick{display:inline-block;background:var(--ink);padding:6px 8px;margin-left:-8px}
.what{will-change:opacity,transform}
.what>*{opacity:1}
@media (max-width:760px){
 #sp-studio{top:110px}
 #sp-studio .ph::after{display:none}
 #sp-studio .base{object-position:50% 24%}
 .wh{font-size:10vw}
 .wd{font-size:15px;line-height:1.4}
}
@media (max-width:760px) and (max-height:720px){.wn{display:none}.wd{font-size:14px}}