/* =========================================================================
ARVELIC — careful software, grown slowly v5 · 2026
========================================================================= */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/bodoni-moda.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 900;font-display:swap;src:url(../fonts/bodoni-moda-italic.woff2) format("woff2")}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:100 800;font-stretch:87.5%;font-display:swap;src:url(../fonts/martian-mono.woff2) format("woff2")}
@font-face{font-family:"Mona Sans";font-style:normal;font-weight:200 900;font-stretch:75% 125%;font-display:swap;src:url(../fonts/mona-sans.woff2) format("woff2")}
:root{
--paper:#F3EDE2; --paper-2:#FAF6EE; --paper-3:#E8DFCF;
--ink:#151513; --ink-2:#4B4A44; --ink-3:#8B887E;
--line:rgba(21,21,19,.1); --line-2:rgba(21,21,19,.2);
--night:#11120F; --night-2:#1A1B17; --cream:#F0EADC; --cream-2:rgba(240,234,220,.68); --cream-3:rgba(240,234,220,.42); --nline:rgba(240,234,220,.12);
--moss:#27402F; --gold:#C39A4E; --gold-2:#D8B878; --clay:#B8674A;
--serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
--sans:"Mona Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--wide:112%;
--ease:cubic-bezier(.16,1,.3,1); --ease-2:cubic-bezier(.65,0,.35,1);
--gut:clamp(20px,4vw,64px);
--r:clamp(20px,2.2vw,32px);
--grid:rgba(21,21,19,.045);
color-scheme:light;
}
:root[data-theme="dark"]{
--paper:#11120F; --paper-2:#1A1B18; --paper-3:#23241F;
--ink:#EEE9DD; --ink-2:#B6B1A4; --ink-3:#827E73;
--line:rgba(238,233,221,.1); --line-2:rgba(238,233,221,.2);
--night:#080907; --night-2:#141512; --grid:rgba(238,233,221,.05);
color-scheme:dark;
}
html{transition:background-color .6s var(--ease)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{margin:0;background:transparent;color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--clay);outline-offset:4px;border-radius:6px}
.wrap{padding-inline:var(--gut);max-width:2200px;margin-inline:auto;width:100%}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.mono{font-family:var(--mono)!important}
.eyebrow{display:flex;align-items:center;gap:14px;margin:0;font:400 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow b{font-weight:500;color:var(--ink);padding:5px 7px 4px;box-shadow:inset 0 0 0 1px var(--line-2);border-radius:3px}
.work .eyebrow b,.contact .eyebrow b{color:var(--cream);box-shadow:inset 0 0 0 1px rgba(240,234,220,.25)}
.lbl{font:400 12px/1.25 var(--mono);color:var(--ink-3)}
/* split helpers (built by JS) */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .05em .24em;margin:-.12em -.05em -.24em}
.wi{display:inline-block}
.tilt,.spin{width:100%;transform-style:preserve-3d;will-change:transform}
/* ---------------- loader ---------------- */
html.seen .loader,html:not(.js) .loader{display:none}
/* ---------------- "visit" label that follows the pointer over a product ---------------- */
.vis-cur{position:fixed;left:0;top:0;z-index:80;pointer-events:none;display:none;align-items:center;gap:10px;height:44px;padding:0 18px 0 20px;border-radius:999px;background:var(--paper-2);color:var(--ink);font:500 14px/1 var(--sans);white-space:nowrap;box-shadow:0 10px 30px -10px rgba(0,0,0,.45);transform:translate(-50%,-50%) scale(0);opacity:0}
.vis-cur i{font-style:normal}
@media (hover:hover) and (pointer:fine){.vis-cur{display:inline-flex}.pn-vis{cursor:pointer}}
/* ---------------- nav ---------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px var(--gut);transition:transform .8s var(--ease),color .5s}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);opacity:0;transition:opacity .5s,background .5s;box-shadow:0 1px 0 var(--line)}
.nav.solid::before{opacity:1}
.nav.hide{transform:translateY(-110%)}
.nav.on-dark{color:var(--cream)}
.nav.on-dark::before{background:color-mix(in srgb,var(--night) 80%,transparent);box-shadow:0 1px 0 var(--nline)}
.nav-l{display:flex;align-items:center;gap:22px;justify-self:start;min-width:0}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand .mk{width:30px;height:30px;overflow:visible}
.brand .bw{height:18px;width:auto}
.brand .mb{transition:transform .8s var(--ease)}
.brand:hover .mb:nth-child(odd){transform:translateX(5px)}.brand:hover .mb:nth-child(even){transform:translateX(-5px)}
.brand .ms{transition:transform .8s var(--ease)}.brand:hover .ms{transform:translateY(-3px)}
.nav-idx{display:flex;align-items:center;gap:10px;height:22px;padding-left:22px;box-shadow:inset 1px 0 0 color-mix(in srgb,currentColor 22%,transparent);font:400 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.nav-idx b{font-weight:500}
.nidx-w{display:block;overflow:hidden;height:1.3em;line-height:1.3em;opacity:.6}
#nidx-t{display:block}
@media (max-width:1180px){.nav-idx{display:none}}
/* text that rolls up on hover (built by JS) */
.rl{display:inline-flex;flex-direction:column;overflow:hidden;height:1.3em;line-height:1.3em;vertical-align:top}
.rl>span{display:block;white-space:nowrap;transition:transform .65s var(--ease)}
a:hover .rl>span,button:hover .rl>span{transform:translateY(-100%)}
.links{display:flex;gap:2px;padding:4px;border-radius:999px}
.links a{position:relative;padding:9px 16px;font-size:14.5px;border-radius:999px;transition:background .35s,color .35s}
.links a:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.nav-r{display:flex;align-items:center;gap:10px;justify-self:end}
.nbtn{position:relative;display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--paper);font:500 14px/1 var(--sans);overflow:hidden;isolation:isolate;transition:background .4s,color .4s}
.nav.on-dark .nbtn{background:var(--cream);color:var(--night)}
.nbtn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--moss);transform:translateY(101%);border-radius:inherit;transition:transform .6s var(--ease)}
.nbtn:hover::before{transform:none}.nbtn:hover{color:var(--cream)}
.ibtn{position:relative;width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 28%,transparent);transition:background .35s,box-shadow .35s}
.ibtn:hover{background:color-mix(in srgb,currentColor 9%,transparent)}
.ibtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ibtn .moon,.ibtn .off{display:none}
:root[data-theme="dark"] #thm .sun{display:none}:root[data-theme="dark"] #thm .moon{display:inline}
#snd[aria-pressed="false"] .on{display:none}#snd[aria-pressed="false"] .off{display:inline}
#snd[aria-pressed="true"] .on{animation:sndw 1.6s ease-in-out infinite}
@keyframes sndw{50%{opacity:.35}}
body.menu-on .ibtn{opacity:0;pointer-events:none}
.menu{display:inline-flex;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper);position:relative;transition:background .4s,color .4s}
.nav.on-dark .menu{background:var(--cream);color:var(--night)}
.menu span{position:absolute;left:14px;right:14px;height:1.5px;border-radius:2px;background:currentColor;transition:transform .6s var(--ease),top .6s var(--ease)}
.menu span:first-child{top:18px}.menu span:last-child{top:25px}
.menu[aria-expanded="true"] span:first-child{top:21.5px;transform:rotate(45deg)}
.menu[aria-expanded="true"] span:last-child{top:21.5px;transform:rotate(-45deg)}
@media (max-width:900px){.nav{grid-template-columns:1fr auto;padding:12px var(--gut)}.links,.nav-r .nbtn{display:none}}
body.menu-on .nav{color:var(--cream)}
body.menu-on .nav::before{opacity:0}
body.menu-on .menu{background:var(--cream);color:#151513}
body.menu-on .bm-f{stroke:var(--night)}
/* ---------------- buttons ---------------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:54px;padding:0 26px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;isolation:isolate;transition:color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--moss);border-radius:inherit;transform:translateY(101%);transition:transform .6s var(--ease)}
.btn:hover::before{transform:none}
.btn i{font-style:normal;display:inline-block;transition:transform .6s var(--ease)}
.btn:hover i{transform:translateY(3px)}
.btn-q{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-q::before{background:var(--ink)}
.btn-q:hover{color:var(--paper)}
.pill{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor;font-size:14.5px;transition:background .35s,color .35s}
/* ---------------- drawing-board columns behind the paper sections ---------------- */
.cols-bg{position:fixed;inset:0;z-index:-1;pointer-events:none}
.cols-bg .wrap{height:100%;display:grid;grid-template-columns:repeat(4,1fr)}
.cols-bg i{box-shadow:-1px 0 0 var(--grid)}
.cols-bg i:last-child{box-shadow:-1px 0 0 var(--grid),1px 0 0 var(--grid)}
@media (max-width:900px){.cols-bg .wrap{grid-template-columns:repeat(2,1fr)}.cols-bg i:nth-child(n+3){display:none}.cols-bg i:nth-child(2){box-shadow:-1px 0 0 var(--grid),1px 0 0 var(--grid)}}
/* ---------------- hero ---------------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
.hero-g{flex:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-rows:1fr auto;column-gap:clamp(24px,4vw,80px);padding-top:clamp(112px,15vh,170px);padding-bottom:clamp(84px,11vh,124px)}
.hero-t{grid-column:1;grid-row:1;align-self:center;display:flex;flex-direction:column;gap:clamp(22px,2.6vw,38px);position:relative;z-index:2}
.hero-h{margin:0;white-space:nowrap;font:300 clamp(52px,7.2vw,132px)/.9 var(--sans);letter-spacing:-.055em;font-stretch:var(--wide)}
.hero-h em{letter-spacing:-.035em;padding-right:.04em}
.hc{display:inline-block}
.hero-b{grid-column:1;grid-row:2;display:flex;flex-direction:column;align-items:flex-start;gap:26px;position:relative;z-index:2;padding-top:clamp(28px,4vh,48px)}
.hero-p{margin:0;max-width:44ch;font-size:clamp(16px,1.15vw,18.5px);line-height:1.55;color:var(--ink-2)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
/* the diorama: a ground plate and three sheets of tracing paper, floating */
.dio{grid-column:2;grid-row:1/3;align-self:center;justify-self:center;position:relative;width:100%;max-width:min(760px,calc(100svh - 290px));aspect-ratio:1/1;perspective:2000px;display:grid;place-items:center}
.dio-s{position:relative;width:62%;aspect-ratio:400/280;transform-style:preserve-3d;transform:rotateX(var(--rx,56deg)) rotateZ(var(--rz,-34deg));--gap:clamp(58px,6.8vw,124px);margin-top:26%}
.pl{--ink:#151513;--ink-2:#4B4A44;--ink-3:#8B887E;color:#151513;position:absolute;inset:0;border-radius:5px;transform-style:preserve-3d;
transform:translateZ(calc(var(--i) * var(--gap) + var(--fl,0px) + var(--drop,0px) + var(--lift,0px) + var(--i) * var(--ex,0) * 150px))}
.pl-0{--i:0;background:#E2DBC9}
.pl-1{--i:1}.pl-2{--i:2}.pl-3{--i:3}
.pl-1,.pl-2,.pl-3{background-color:rgba(251,249,244,.84);box-shadow:inset 0 0 0 1px rgba(21,21,19,.16);cursor:pointer;
background-image:linear-gradient(rgba(21,21,19,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(21,21,19,.045) 1px,transparent 1px);background-size:5% 7.1428%}
.pl svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.pl .rg{stroke:rgba(21,21,19,.45);stroke-width:.9}
.pl-0::before{content:"";position:absolute;inset:12% 14%;border-radius:10px;background:rgba(58,44,20,.26);filter:blur(16px);transform:translate(4%,6%);opacity:var(--shd,1)}
.pl-0 .fu{stroke:rgba(21,21,19,.32);stroke-width:1.2}
.pl-e{position:absolute;background:#CFC5AE}
.pl-ef{left:0;right:0;top:100%;height:14px;transform-origin:50% 0;transform:rotateX(-90deg);background:#C8BDA3}
.pl-er{top:0;bottom:0;left:100%;width:14px;transform-origin:0 50%;transform:rotateY(90deg);background:#D7CEB9}
.pl-1 .ln{stroke:#5B3FE0}
.pl-1 rect.f{fill:rgba(124,92,255,.2)}
.pl-1 .tr{stroke:rgba(91,63,224,.18);stroke-width:6}
.pl-1 .arc{stroke:#5B3FE0;stroke-width:6;stroke-dasharray:.72 1;transform:rotate(-90deg);transform-origin:318px 112px}
.pl-2 .ln{stroke:#3A2A1E}
.pl-2 .am1{stroke:#B8322B;stroke-width:5;stroke-dasharray:14 10;stroke-linecap:butt}
.pl-2 .am2{stroke:#23457E;stroke-width:5;stroke-dasharray:14 10;stroke-dashoffset:12;stroke-linecap:butt}
.pl-2 .stp{stroke-dasharray:2 3}
.pl-2 .seal{fill:#A8322B;stroke:none}.pl-2 .heart{fill:#F7EFE2;stroke:none}
.pl-3 .ln{stroke:#20352A}
.pl-3 .dt{fill:#1E9E5A;stroke:none}
.pl-t{position:absolute;left:4.5%;bottom:5%;font:500 9px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.pl-0 .pl-t{top:4%;bottom:auto;left:auto;right:4.5%;color:rgba(21,21,19,.6)}
.pl-s{position:absolute;right:4.5%;bottom:4.4%;font:italic 400 13px/1 var(--serif);color:var(--ink-2)}
.pl-a{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(195,154,78,.22)}
.pl-1 .pl-a{left:9%;top:62%}.pl-2 .pl-a{left:91%;top:46%}.pl-3 .pl-a{left:12%;top:22%}
.pl-1::after,.pl-2::after,.pl-3::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(112deg,transparent calc(var(--sh,50%) - 22%),rgba(255,255,255,.5) var(--sh,50%),transparent calc(var(--sh,50%) + 22%))}
.dio-ln{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke:var(--ink-3);stroke-width:1}
.co{position:absolute;z-index:3;display:grid;gap:6px;padding:11px 14px 12px;min-width:168px;background:color-mix(in srgb,var(--paper-2) 78%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--line-2);border-radius:3px;cursor:pointer;transition:background .45s var(--ease),color .45s var(--ease)}
.co b{font:500 9px/1 var(--mono);letter-spacing:.08em;color:var(--ink-3);transition:color .45s}
.co span{font:400 17px/1 var(--sans);font-stretch:var(--wide);letter-spacing:-.02em}
.co small{font:italic 400 13px/1.1 var(--serif);color:var(--ink-2);transition:color .45s}
.co:hover,.co.on{background:var(--ink);color:var(--paper)}
.co:hover b,.co.on b{color:var(--gold-2)}.co:hover small,.co.on small{color:rgba(242,239,231,.7)}
.co-3{left:-9%;top:3%}.co-2{right:-6%;top:40%}.co-1{left:-6%;bottom:12%}
@media (max-width:1180px){.dio-ln,.co{display:none}}
.dio-tag{position:absolute;font:400 11px/1.3 var(--mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
/* registration marks and the sheet footer */
.rm{position:absolute;width:15px;height:15px;z-index:3;pointer-events:none}
.rm::before,.rm::after{content:"";position:absolute;background:var(--ink-3)}
.rm::before{left:7px;top:0;width:1px;height:15px}.rm::after{top:7px;left:0;height:1px;width:15px}
.rm-tl{top:92px;left:calc(var(--gut) - 7px)}.rm-tr{top:92px;right:calc(var(--gut) - 7px)}
.rm-bl{bottom:58px;left:calc(var(--gut) - 7px)}.rm-br{bottom:58px;right:calc(var(--gut) - 7px)}
.hero-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;padding-bottom:22px;font:400 11px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.hero-foot>span:last-child{justify-self:end}
.hf-scroll{display:flex;flex-direction:column;align-items:center;gap:10px}
.hf-scroll i{width:1px;height:40px;background:var(--line-2);position:relative;overflow:hidden}
.hf-scroll i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--ink);animation:drip 2.2s var(--ease-2) infinite}
@keyframes drip{to{top:100%}}
@media (max-width:1100px) and (min-width:901px){.dio-s{width:66%}}
@media (max-width:900px){
.hero{min-height:0}
.hero-g{grid-template-columns:1fr;grid-template-rows:none;padding-top:clamp(88px,12svh,120px);padding-bottom:44px}
.hero-t,.hero-b,.dio{grid-column:1}
.hero-b{display:contents}
.hero-t{grid-row:1}.hero-p{grid-row:2;margin-top:18px}.dio{grid-row:3;touch-action:pan-y}.hero-cta{display:none}
.hero-h{font-size:clamp(50px,14.6vw,100px);line-height:.92}
.dio{max-width:560px;width:112%;margin:-6px -6% 0;aspect-ratio:1/.98}
.dio-s{width:66%;margin-top:22%;--gap:clamp(42px,12.5vw,80px)}
.hero-b{padding-top:6px;gap:22px}
.hero-foot,.rm-bl,.rm-br{display:none}
.rm-tl,.rm-tr{top:78px}
.pl-t{font-size:8.5px}.pl-s{font-size:11px}
}
.dio-cap{display:none}
@media (max-width:520px){.rm-tl,.rm-tr{display:none}.pl-s{display:none}}
@media (max-width:900px){.dio-cap{position:absolute;left:0;right:0;bottom:2%;display:flex;justify-content:center;align-items:center;gap:10px;font:400 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);pointer-events:none}.dio-cap i{width:22px;height:1px;background:currentColor;opacity:.6}}
/* the field now lives in the contact section, drawn in cream on moss */
.field{position:absolute;left:0;right:0;bottom:0;height:clamp(220px,40%,460px);z-index:0;pointer-events:none;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40%);mask-image:linear-gradient(to bottom,transparent 0,#000 40%)}
.field canvas{width:100%;height:100%}
@media (max-width:900px){.field{height:26%}}
/* ---------------- why ---------------- */
.intro{padding-block:clamp(120px,16vw,240px) clamp(120px,14vw,220px);display:grid;gap:clamp(28px,3vw,40px)}
.mf{margin:0;font:300 clamp(32px,4.6vw,80px)/1.08 var(--sans);letter-spacing:-.04em;max-width:24ch;font-stretch:var(--wide)}
html.js:not(.calm) .mf .w{opacity:.14}
.mf .w{display:inline}
/* ---------------- headings ---------------- */
.h2{margin:22px 0 0;font:300 clamp(46px,6.4vw,116px)/.95 var(--sans);letter-spacing:-.04em;font-stretch:var(--wide)}
/* ---------------- work ---------------- */
.work{position:relative;z-index:2;color:var(--cream);padding:clamp(20px,3vw,40px) 0 0;overflow-x:clip}
.work-bg{position:absolute;inset:0;z-index:-1;background:var(--night);box-shadow:0 0 0 1px var(--nline);border-radius:var(--r) var(--r) 0 0}
.work .eyebrow{color:var(--cream-3)}
.work .h2 em{color:var(--gold-2)}
.marq{overflow:hidden;border-bottom:1px solid var(--nline);padding:clamp(18px,2vw,28px) 0 clamp(26px,3vw,40px)}
.marq-t{display:flex;align-items:center;gap:clamp(28px,4vw,64px);width:max-content;font:300 clamp(64px,9vw,164px)/1 var(--sans);letter-spacing:-.04em;will-change:transform;font-stretch:var(--wide)}
.marq-t .mono{font-size:.68em;letter-spacing:-.06em;font-weight:500}
.marq-t em{color:var(--gold-2)}
.marq-t i{font-style:normal;font-size:.3em;color:var(--cream-3)}
.work-h{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end;padding-block:clamp(80px,10vw,150px) clamp(40px,5vw,70px)}
.work-p{margin:0;color:var(--cream-2);max-width:40ch;justify-self:end;font-size:17px}
@media (max-width:900px){.work-h{grid-template-columns:1fr;gap:22px}.work-p{justify-self:start}}
.hz{position:relative}
.hz-track{display:flex;gap:clamp(18px,2vw,32px);padding:0 var(--gut);width:max-content;will-change:transform}
.hz-ui{display:none}
.panel{position:relative;flex:none;width:min(86vw,1480px);height:min(calc(100svh - 170px),800px);border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:minmax(300px,3.3fr) minmax(0,8.7fr);transform-origin:50% 0}
.panel::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;background:#050605;opacity:var(--shade,0);pointer-events:none}
.pn-txt{position:relative;z-index:2;padding:clamp(26px,3vw,48px);display:flex;flex-direction:column;gap:16px;min-width:0;container-type:inline-size}
.pn-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pn-n{font:400 12px/1 var(--mono);opacity:.6}
.st{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 35%,transparent);font:400 11.5px/1 var(--mono)}
.st i{width:6px;height:6px;border-radius:50%;background:#6FBF8B;box-shadow:0 0 10px #6FBF8B;animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.3}}
.pn-name{margin:auto 0 0;font:300 min(16.5cqi,96px)/.9 var(--sans);letter-spacing:-.04em;font-stretch:var(--wide)}
.pn-name.mono{font-weight:500;font-size:min(21cqi,90px);letter-spacing:-.07em}
.pn-say{margin:0;font:italic 400 clamp(20px,1.7vw,27px)/1.2 var(--serif);opacity:.85}
.pn-d{margin:0;font-size:15px;line-height:1.55;opacity:.72;max-width:44ch}
.pn-list{list-style:none;margin:4px 0 0;padding:0;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.pn-list li{padding:10px 0;border-bottom:1px solid color-mix(in srgb,currentColor 16%,transparent);font-size:14px;display:flex;align-items:center;gap:10px}
.pn-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5}
.pn-go{align-self:flex-start;margin-top:6px;display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 22px;border-radius:999px;font-weight:500;font-size:15px}
.pn-go i{font-style:normal;display:inline-block;transition:transform .5s var(--ease)}
.pn-go:hover i{transform:translate(3px,-3px)}
.pn-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.pn-acts .pn-go{margin:0}
.pn-open{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 38%,transparent);font-size:15px;font-weight:500;transition:background .35s}
.pn-open:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.pn-open i{font-style:normal}
.pn-list{display:none}
.pn-vis{position:relative;display:grid;place-items:center;padding:clamp(18px,2.4vw,44px);perspective:1800px;overflow:hidden;min-width:0;cursor:pointer}
/* panel themes */
.p-bb{background:radial-gradient(70% 90% at 80% 20%,#2a1d5c 0%,#140f2b 55%,#0c0a18 100%);color:#EDEAF7}
.p-bb .pn-say{color:#C9B8FF}
.p-bb .pn-go{background:#EDEAF7;color:#140f2b}
.p-sd{background:#EEE3D0;color:#2E2118}
.p-sd::before{content:"";position:absolute;inset:14px;border-radius:calc(var(--r) - 8px);pointer-events:none;z-index:1;
border:9px solid transparent;border-image:repeating-linear-gradient(45deg,#B8322B 0 14px,transparent 14px 24px,#23457E 24px 38px,transparent 38px 48px) 9;opacity:.9}
.p-sd .pn-say{color:#9E2A24}
.p-sd .pn-go{background:#9E2A24;color:#FBF3E6}
.p-sd .st i{background:#9E2A24;box-shadow:0 0 10px #9E2A24}
.p-gl{background:#0A0C0B;color:#E7EFEA;background-image:linear-gradient(rgba(60,255,150,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(60,255,150,.05) 1px,transparent 1px);background-size:44px 44px}
.p-gl .pn-name span{color:#3BE38A}
.p-gl .pn-say{color:#7CF2B0}
.p-gl .pn-go{background:#3BE38A;color:#06120B}
.p-gl .st i{background:#3BE38A;box-shadow:0 0 10px #3BE38A}
.p-next{width:min(56vw,860px);display:grid;place-items:center;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--nline);grid-template-columns:1fr}
.nx{text-align:center;display:grid;justify-items:center;gap:16px;padding:30px}
.nx svg{width:84px;height:84px;color:var(--gold-2)}
.nx p{margin:0;font:300 clamp(34px,3.8vw,62px)/1.02 var(--sans);letter-spacing:-.04em;max-width:13ch;font-stretch:var(--wide)}
/* big screens: a sideways gallery, pinned */
@media (min-width:981px){
.hz{height:100svh;display:flex;flex-direction:column;justify-content:center;gap:28px;padding-top:40px}
.hz-ui{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;font:400 12px/1 var(--mono);color:var(--cream-3)}
.hz-c b{font-weight:400;color:var(--cream)}
.hz-bar{height:1px;background:var(--nline);position:relative;overflow:hidden}
.hz-bar i{position:absolute;inset:0;background:var(--cream);transform-origin:left;transform:scaleX(0)}
}
/* phones & tablets: a deck of cards that stack as you scroll */
@media (max-width:980px){
.hz-track{width:auto;flex-direction:column;gap:28px;padding-bottom:28px}
.panel{position:sticky;width:100%;height:auto;grid-template-columns:1fr;transform-origin:50% 0;box-shadow:0 -18px 40px -24px rgba(0,0,0,.7);will-change:transform}
.panel:nth-child(1){top:74px}.panel:nth-child(2){top:86px}.panel:nth-child(3){top:98px}.panel:nth-child(4){top:110px}
.tilt,.spin{transform-style:flat;will-change:auto}
.pn-shade{position:absolute;inset:0;z-index:6;border-radius:inherit;background:#050605;opacity:0;pointer-events:none;will-change:opacity}
html.js .pn-txt>*{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
html.js .pn-txt.in>*{opacity:1;transform:none}
.pn-txt.in>:nth-child(2){transition-delay:.06s}.pn-txt.in>:nth-child(3){transition-delay:.12s}.pn-txt.in>:nth-child(4){transition-delay:.18s}.pn-txt.in>:nth-child(5){transition-delay:.24s}.pn-txt.in>:nth-child(6){transition-delay:.3s}.pn-txt.in>:nth-child(7){transition-delay:.36s}
.pn-vis{order:-1;padding:14px 14px 0}
.pn-txt{padding:20px 22px 24px;gap:12px}
.pn-name{margin-top:4px}
.pn-say{font-size:20px}
.pn-list{display:none}
.pn-go{margin-top:4px;height:46px}
.p-next{width:100%;min-height:340px}
.p-sd::before{inset:8px;border-width:6px}
.p-sd .pn-vis{padding:22px 22px 0}
}
@media (prefers-reduced-motion:reduce){.pn-txt>*{opacity:1!important;transform:none!important}}
/* ---------------- numbers ---------------- */
.nums{display:grid;grid-template-columns:repeat(4,1fr);padding-block:clamp(110px,12vw,190px) 0}
.num{padding:26px 22px 0 0;border-top:1px solid var(--line-2)}
.num+.num{padding-left:22px;border-left:1px solid var(--line)}
.num b{display:block;font:200 clamp(72px,9vw,156px)/.9 var(--sans);font-stretch:125%;letter-spacing:-.05em}
.num>span{display:block;margin-top:14px;color:var(--ink-2);max-width:22ch}
@media (max-width:900px){.nums{grid-template-columns:1fr 1fr;row-gap:40px}.num b{font-size:clamp(52px,14.5vw,110px)}.num:nth-child(3){padding-left:0;border-left:0}}
/* ---------------- principles ---------------- */
.studio{padding-top:clamp(120px,14vw,220px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5vw,100px);align-items:start}
.st-l{position:sticky;top:120px}
.st-p{margin:28px 0 0;max-width:36ch;color:var(--ink-2);font-size:17px}
.rows{list-style:none;margin:0;padding:0}
.row{position:relative;display:grid;grid-template-columns:64px 1fr clamp(70px,8vw,120px);gap:clamp(16px,2.4vw,36px);align-items:start;padding:clamp(28px,3.2vw,48px) 0}
.row .rule{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-2);transform-origin:left}
.row:last-child{border-bottom:1px solid var(--line-2)}
.row-n{font:400 12px/1 var(--mono);color:var(--ink-3);padding-top:14px}
.row h3{margin:0;font:300 clamp(34px,3.6vw,60px)/1 var(--sans);letter-spacing:-.04em;font-stretch:var(--wide)}
.row p{margin:16px 0 0;max-width:46ch;color:var(--ink-2);font-size:clamp(15.5px,1.1vw,17px)}
.row svg{width:100%;height:auto;fill:none;stroke:var(--moss);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.row{isolation:isolate}
.row svg{transition:transform .9s var(--ease),stroke .5s}
@media (hover:hover) and (pointer:fine){
.row{transition:color .55s var(--ease)}
.row::before{content:"";position:absolute;inset:0 -28px;z-index:-1;border-radius:4px;background:var(--ink);transform:scaleY(0);transform-origin:50% 100%;transition:transform .75s var(--ease)}
.row:hover::before{transform:none;transform-origin:50% 0}
.row:hover{color:var(--paper)}
.row:hover p{color:rgba(242,239,231,.68)}
.row:hover .row-n{color:var(--gold-2)}
.row:hover svg{stroke:var(--gold-2);transform:rotate(-8deg) scale(1.08)}
}
@media (max-width:900px){
.studio{grid-template-columns:1fr}
.st-l{position:relative;top:0}
.row{grid-template-columns:1fr 64px;gap:14px 20px}
.row-n{grid-column:1/-1;padding:0}
.row svg{grid-column:2;grid-row:2;align-self:start}
}
/* ---------------- story ---------------- */
.story{padding-block:clamp(120px,14vw,220px) clamp(110px,14vw,200px)}
.story-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,6vw,110px);align-items:start}
.dict-w{perspective:1400px;position:sticky;top:120px}
.dict{padding:clamp(26px,3vw,42px);border-radius:6px;background:var(--paper-2);box-shadow:0 0 0 1px var(--line),0 40px 80px -50px rgba(21,21,19,.45);transform-origin:0 50%;will-change:transform}
.ety{margin-top:28px}
.et{display:grid;gap:8px}
.et-l{font:400 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.et-w{margin:4px 0 0;font:300 clamp(54px,5.4vw,92px)/.95 var(--sans);font-stretch:var(--wide);letter-spacing:-.05em}
.et-2 .et-w{color:var(--moss)}
:root[data-theme="dark"] .et-2 .et-w{color:var(--gold-2)}
.et-p{margin:0;font:400 12px/1.2 var(--mono);color:var(--ink-3)}.et-p b{font-weight:500;color:var(--ink)}
.et-m{margin:4px 0 0;font-size:16px;line-height:1.45;color:var(--ink-2);max-width:32ch}
.et-ln{position:relative;height:74px;margin:20px 0 20px 3px;width:2px}
.et-ln i{position:absolute;inset:0;background:var(--line-2);transform-origin:50% 0}
.et-ln b{position:absolute;left:50%;top:0;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(195,154,78,.2)}
.et-ln::after{content:"";position:absolute;left:-5px;bottom:-2px;width:8px;height:8px;border-right:2px solid var(--line-2);border-bottom:2px solid var(--line-2);transform:rotate(45deg)}
.dn{margin:28px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--ink-2)}.dn b{color:var(--ink);font-weight:500}
.big{margin:0;font:300 clamp(40px,5vw,88px)/1 var(--sans);letter-spacing:-.04em;font-stretch:var(--wide)}
.big em{color:var(--moss)}
.story-t .cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:clamp(36px,5vw,64px)}
.story-t .cols p{margin:0;color:var(--ink-2);font-size:17px}
.sig{margin:clamp(30px,4vw,48px) 0 0;font:italic 400 20px/1 var(--serif);color:var(--ink-2)}
@media (max-width:900px){.story-g{grid-template-columns:1fr}.dict-w{position:relative;top:0;max-width:460px}.story-t .cols{grid-template-columns:1fr;gap:16px}}
.growth{margin-top:clamp(90px,12vw,170px)}
.gr-line{height:1px;background:var(--line);position:relative;margin-bottom:34px}
.gr-line i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0)}
html:not(.js) .gr-line i,.calm .gr-line i{transform:none}
.gr{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,60px)}
.g{position:relative}
.g::before{content:"";position:absolute;top:-39px;left:0;width:9px;height:9px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
.g-k{font:400 11.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.g h4{margin:14px 0 8px;font:300 clamp(28px,2.6vw,42px)/1.05 var(--sans);letter-spacing:-.04em;font-stretch:var(--wide)}
.g p{margin:0 0 14px;color:var(--ink-2);max-width:32ch}
.g a{font:400 12.5px/1 var(--mono);border-bottom:1px solid var(--line-2);padding-bottom:3px}
@media (max-width:760px){.gr{grid-template-columns:1fr;gap:40px}.gr-line,.g::before{display:none}.g{padding-left:20px;box-shadow:inset 1px 0 0 var(--line-2)}}
/* ---------------- contact + footer ---------------- */
.contact{overflow:hidden;padding:clamp(120px,14vw,210px) 0 clamp(80px,10vw,140px);background:var(--moss);color:var(--cream);border-radius:var(--r) var(--r) 0 0;position:relative;z-index:2}
.contact .eyebrow{color:var(--cream-3)}
.ct-in{position:relative;z-index:1}
.ct-h{margin:24px 0 0;font:300 clamp(56px,9.6vw,176px)/.9 var(--sans);letter-spacing:-.04em;max-width:12ch;font-stretch:var(--wide)}
.ct-h em{color:var(--gold-2)}
.ct-mail{display:inline-flex;align-items:baseline;gap:18px;margin-top:clamp(40px,6vw,80px);font:300 clamp(28px,4.6vw,80px)/1.05 var(--sans);letter-spacing:-.04em;position:relative;padding-bottom:10px;max-width:100%;font-stretch:var(--wide)}
.ct-mail span{overflow-wrap:anywhere}
.ct-mail::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--cream);transform-origin:left;transition:transform .8s var(--ease)}
.ct-mail:hover::after{transform:scaleX(0);transform-origin:right}
.ct-mail i{font-style:normal;font-size:.6em;transition:transform .6s var(--ease)}
.ct-mail:hover i{transform:translate(8px,-8px)}
.ct-row{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-top:clamp(50px,7vw,90px);padding-top:28px;border-top:1px solid rgba(240,234,220,.18)}
.ct-row p{margin:0;max-width:44ch;color:var(--cream-2)}
.ct-links{display:flex;gap:10px;flex-wrap:wrap}
.contact .pill:hover{background:var(--cream);color:var(--moss)}
.foot{background:var(--moss);color:var(--cream);padding:0 0 calc(26px + env(safe-area-inset-bottom));overflow:hidden;position:relative;z-index:2}
.ft-g{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;padding-top:50px;border-top:1px solid rgba(240,234,220,.18)}
.ft-k{display:block;font:400 11.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--cream-3);margin-bottom:16px}
.ft-g a{display:block;padding:5px 0;color:var(--cream-2);transition:color .2s}
.ft-g a:hover{color:var(--cream)}
.ft-b p{margin:0;font:300 clamp(26px,2.6vw,38px)/1.05 var(--sans);letter-spacing:-.04em;font-stretch:var(--wide)}
.ft-word{margin-top:clamp(28px,4vw,60px);color:var(--cream)}
.ft-word svg{display:block;width:100%;height:auto;overflow:hidden}
.ft-l{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:22px;font:400 12px/1.4 var(--mono);color:var(--cream-3)}
.totop:hover{color:var(--cream)}
@media (max-width:760px){.ft-g{grid-template-columns:1fr 1fr}.ft-b{grid-column:1/-1}}
/* 404 */
.nf{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:28px var(--gut)}
.nf .eyebrow{margin-bottom:26px}
.nf h1{margin:0;font:300 clamp(64px,13vw,220px)/.9 var(--sans);letter-spacing:-.04em;font-stretch:var(--wide)}
.nf h1 em{color:var(--moss)}
.nf p{max-width:36ch;color:var(--ink-2);margin:22px 0 28px}
.nf .pill:hover{background:var(--ink);color:var(--paper)}
/* reduced motion: everything simply shows */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}.loader{display:none}}
/* =========================================================================
PRODUCT PREVIEWS — each product rebuilt in HTML at 1920×1080 and scaled
to fit its window (JS sets the scale). Nothing here is a screenshot.
========================================================================= */
@font-face{font-family:"Sundry Serif";font-style:normal;font-weight:620;font-display:swap;src:url(../fonts/preview/sundry-serif.woff2) format("woff2")}
@font-face{font-family:"Sundry Serif";font-style:italic;font-weight:480;font-display:swap;src:url(../fonts/preview/sundry-serif-italic.woff2) format("woff2")}
@font-face{font-family:"Sundry Hand";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/preview/sundry-hand.woff2) format("woff2")}
@font-face{font-family:"Sundry Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/preview/sundry-mono.woff2) format("woff2")}
@font-face{font-family:"Sundry Mono";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/preview/sundry-mono-bold.woff2) format("woff2")}
@font-face{font-family:"JB Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/preview/jb-mono.woff2) format("woff2")}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* the window each preview lives in */
.win{position:relative;width:100%;border-radius:12px;overflow:hidden;background:#111;box-shadow:0 44px 90px -34px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.09);isolation:isolate}
.win-bar{position:relative;z-index:2;display:flex;align-items:center;gap:14px;height:34px;padding:0 14px;background:#1B1B1D;color:rgba(255,255,255,.62);font:400 11.5px/1 var(--sans)}
.win-dots{display:flex;gap:6px;flex:none}.win-dots i{width:10px;height:10px;border-radius:50%;background:#FF5F57}.win-dots i:nth-child(2){background:#FEBC2E}.win-dots i:nth-child(3){background:#28C840}
.win-url{flex:1;max-width:320px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:6px;height:22px;padding:0 10px;border-radius:6px;background:rgba(255,255,255,.07);white-space:nowrap;overflow:hidden}
.win-url .ic{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
.win-live{display:flex;align-items:center;gap:6px;flex:none;font:500 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#6FD99A}
.win-live i{width:6px;height:6px;border-radius:50%;background:#3DDC97;box-shadow:0 0 8px #3DDC97;animation:blink 2s ease-in-out infinite}
.win-app .win-bar{justify-content:space-between;background:#060606}
.win-app-t{display:flex;align-items:center;gap:8px;font:500 10.5px/1 var(--mono);letter-spacing:.08em;color:rgba(255,255,255,.7)}
.win-app-t i{width:9px;height:9px;border-radius:2px;background:#3BE38A;box-shadow:0 0 8px #3BE38A}
.win-ctl{display:flex;gap:20px}.win-ctl i{width:10px;height:1px;background:rgba(255,255,255,.55)}
.mock{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#0B0A11}
.mock.sd{background:#EEE3D1}.mock.gl{background:#0A0A0A}
.app{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;transform:scale(.4);font-family:var(--sans);font-stretch:100%;letter-spacing:normal;-webkit-font-smoothing:antialiased;text-align:left;line-height:1.35;cursor:default}
.app .ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.app p,.app h4,.app h5,.app ul{margin:0}
.bbx em,.glx em{font-family:inherit;letter-spacing:normal}
.glare{position:absolute;inset:0;z-index:9;pointer-events:none;background:radial-gradient(45% 55% at var(--mx,50%) var(--my,0%),rgba(255,255,255,.14),transparent 70%);opacity:0;transition:opacity .6s var(--ease)}
.pn-vis:hover .glare{opacity:1}
.win-ph{border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
/* ================================= Backbench ================================= */
.bbx{display:grid;grid-template-columns:240px 1fr;background:#0B0A11;color:#ECEAF4}
.bbx::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(900px 520px at 360px 40px,rgba(96,62,196,.3),transparent 70%),radial-gradient(760px 560px at 250px 1100px,rgba(150,36,60,.26),transparent 70%),radial-gradient(900px 760px at 1960px 760px,rgba(18,96,104,.22),transparent 70%)}
.b-side{position:relative;z-index:1;display:flex;flex-direction:column;min-height:0;padding:16px 12px 12px;background:rgba(10,9,16,.92);box-shadow:1px 0 0 rgba(255,255,255,.07)}
.b-brand{display:flex;align-items:center;gap:12px;padding:0 8px 14px}
.b-logo svg{width:36px;height:36px;display:block}
.b-brand b{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em}
.b-brand small{display:block;margin-top:2px;font-size:9.5px;font-weight:600;letter-spacing:.16em;color:rgba(236,234,244,.5)}
.b-sc{flex:1;min-height:0;overflow:hidden}
.b-g{display:flex;justify-content:space-between;align-items:center;margin:12px 12px 5px;font-size:10px;font-weight:600;letter-spacing:.16em;color:rgba(236,234,244,.42)}
.b-g .b-gc{width:13px;height:13px}
.b-nav{list-style:none;padding:0}
.b-nav li{position:relative;display:flex;align-items:center;gap:11px;height:32px;padding:0 10px 0 12px;border-radius:9px;font-size:14px;white-space:nowrap;color:rgba(236,234,244,.8);cursor:pointer;transition:background .35s,color .35s,box-shadow .35s}
.b-nav li .ic{width:17px;height:17px;opacity:.85}
.b-nav li:hover{background:rgba(255,255,255,.05)}
.b-nav li em{margin-left:auto;padding:4px 6px;border-radius:5px;background:rgba(139,108,255,.16);color:#A996FF;font:700 8.5px/1 var(--sans);font-style:normal;letter-spacing:.08em}
.b-nav li.on{background:linear-gradient(90deg,rgba(124,92,255,.36),rgba(124,92,255,.1));color:#fff;font-weight:600;box-shadow:inset 0 0 0 1px rgba(150,120,255,.35),0 0 26px -8px rgba(124,92,255,.7)}
.b-me{padding-top:10px}
.b-xp{height:3px;margin:0 8px 14px;border-radius:3px;background:rgba(255,255,255,.08)}.b-xp i{display:block;width:52%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7C5CFF,#B18CFF)}
.b-user{display:flex;align-items:center;gap:12px;padding:0 8px}
.b-av{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:#1B1926;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:14px;font-weight:700}
.b-user b{display:block;font-size:14px;font-weight:700}.b-user small{font-size:12px;color:rgba(236,234,244,.52)}
.b-user em{margin-left:auto;font-style:normal;color:rgba(236,234,244,.55)}
.b-built{margin:14px 8px 0;font-size:11.5px;color:rgba(236,234,244,.5)}.b-built b{color:#fff}
.b-main{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.b-top{display:flex;align-items:center;gap:10px;height:60px;flex:none;padding:0 56px}
.b-top>b{margin-right:auto;font-size:17px;font-weight:700;letter-spacing:-.01em}
.b-search{display:flex;align-items:center;gap:10px;width:230px;height:38px;padding:0 9px 0 14px;border-radius:10px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:13.5px;color:rgba(236,234,244,.55)}
.b-search .ic{width:15px}.b-search kbd{margin-left:auto;padding:4px 6px;border-radius:5px;background:rgba(255,255,255,.08);font:500 10.5px/1 "JB Mono",var(--mono)}
.b-pro{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:10px;background:linear-gradient(180deg,#FFD36B,#F2B233);color:#3A2500;font-size:14px;font-weight:800}
.b-pro .ic{width:15px}
.b-chip{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);font-size:14px;font-weight:700}
.b-chip .fl{width:15px;color:#FF9F43;fill:rgba(255,159,67,.3)}
.b-coin{background:rgba(124,92,255,.08);box-shadow:inset 0 0 0 1px rgba(124,92,255,.5)}.b-coin .ic{width:15px;color:#A996FF}
.b-av2{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#A855F7,#EC4899);font-size:14px;font-weight:700}
.b-view{position:relative;flex:1;min-height:0;overflow:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.win.live .b-view{overflow-y:auto}
.b-content{padding:20px 56px 64px;will-change:transform}
.b-hero{display:grid;grid-template-columns:1fr 376px;gap:30px;align-items:start}
.b-hi{position:relative;margin-top:6px;padding:46px 0 46px 16px}
.b-hi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;background:linear-gradient(#9B6BFF,#E86BC5)}
.b-hi small{font-size:11.5px;font-weight:600;letter-spacing:.16em;color:rgba(236,234,244,.52)}
.b-hi h4{margin:16px 0 18px;font-size:74px;font-weight:800;line-height:1;letter-spacing:-.05em}
.b-hi p{font-size:16.5px;color:rgba(236,234,244,.86)}.b-hi p b{font-weight:800}
.b-lvl{padding:22px 22px 26px;border-radius:14px;background:rgba(12,11,18,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.b-lvt{display:flex;align-items:center;gap:16px}
.b-ring{position:relative;width:90px;height:90px;flex:none;display:grid;place-items:center}
.b-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.b-ring circle,.b-sr circle{fill:none;stroke:rgba(255,255,255,.09);stroke-width:5}
.b-ring .a{stroke:#fff;stroke-linecap:round}
.b-ring b{font-size:18px;font-weight:700}
.b-lvt>div>b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em}
.b-lvt small{display:block;margin-top:3px;font-size:12px;color:rgba(236,234,244,.5)}
.b-streak{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:6px 12px;border-radius:8px;background:rgba(255,170,60,.12);color:#FFB054;font-size:15px;font-weight:700}
.b-streak .ic{width:15px}.b-streak .fl{fill:rgba(255,176,84,.3)}
.b-cap{margin:22px 0 12px!important;font-size:10.5px;font-weight:600;letter-spacing:.16em;color:rgba(236,234,244,.5)}
.b-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.b-week span{display:grid;justify-items:center;gap:10px}
.b-week i{width:100%;aspect-ratio:1/1.05;border-radius:7px;background:rgba(255,255,255,.05)}
.b-week i.d{background:#3C2F8F}.b-week i.t{background:#46389F;box-shadow:inset 0 0 0 2px #8C7BFF}
.b-week em{font-size:10px;font-style:normal;font-weight:700;color:rgba(236,234,244,.5)}
.b-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:26px;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.b-stats>div{display:grid;gap:9px;padding:22px 20px;box-shadow:1px 0 0 rgba(255,255,255,.1)}
.b-stats small{font-size:11px;font-weight:600;letter-spacing:.16em;color:rgba(236,234,244,.6)}
.b-stats b{font:500 38px/1 "JB Mono",var(--mono)}
.b-stats span{font-size:12.5px;color:rgba(236,234,244,.5)}
.bbx .k-g{--c:#3DDC97}.bbx .k-o{--c:#F5B43C}.bbx .k-r{--c:#FF5A5F}
.b-stats b.k-g{color:var(--c)}
.b-note{display:flex;align-items:center;gap:18px;margin-top:26px;padding:16px 28px 16px 16px;border-radius:12px;background:rgba(124,92,255,.06);box-shadow:inset 0 0 0 1px rgba(124,92,255,.42)}
.b-bell{width:42px;height:42px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(124,92,255,.18);color:#A996FF}
.b-note b{display:block;font-size:16px;font-weight:800}.b-note small{font-size:13.5px;color:rgba(236,234,244,.72)}
.b-on{margin-left:auto;padding:9px 14px;border-radius:999px;background:#fff;color:#111;font-size:13.5px;font-weight:700;cursor:pointer}
.b-no{padding:0 4px;font-size:13.5px;font-weight:700;color:rgba(236,234,244,.8);cursor:pointer}
.b-row{display:grid;grid-template-columns:1fr 604px;gap:16px;margin-top:20px}
.b-class{position:relative;display:grid;align-content:center;gap:8px;padding:30px 22px;border-radius:12px;background:rgba(18,16,30,.72);box-shadow:inset 0 0 0 1px rgba(124,92,255,.46)}
.b-class small{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;letter-spacing:.2em;color:rgba(236,234,244,.6)}.b-class small i{width:7px;height:7px;border-radius:50%;background:#8C6BFF}
.b-class b{font-size:24px;font-weight:800;letter-spacing:-.02em}.b-class span{font-size:13px;color:rgba(236,234,244,.6)}
.b-class em{position:absolute;right:22px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;background:#fff;color:#111;font-size:14px;font-style:normal;font-weight:700}
.b-class em .ic{width:14px}
.b-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.b-tiles span{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:14px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);cursor:pointer;transition:background .3s}
.b-tiles span:hover{background:rgba(255,255,255,.06)}
.b-tiles i{grid-row:1/3;width:40px;height:40px;border-radius:10px;display:grid;place-items:center}
.b-tiles .t1 i{background:rgba(124,92,255,.18);color:#A996FF}.b-tiles .t2 i{background:rgba(255,160,60,.16);color:#FFB054}.b-tiles .t3 i{background:rgba(61,220,151,.14);color:#3DDC97}.b-tiles .t4 i{background:rgba(255,92,150,.16);color:#FF6FA5}
.b-tiles b{font-size:14.5px;font-weight:800}.b-tiles small{font-size:11.5px;color:rgba(236,234,244,.45)}
.b-by{display:flex;align-items:center;gap:18px;margin:38px 0 18px}
.b-by h5{font-size:26px;font-weight:800;letter-spacing:-.03em}.b-by i{flex:1;height:1px;background:rgba(255,255,255,.1)}.b-by span{padding-right:12px;font-size:13.5px;font-weight:700;color:rgba(236,234,244,.85)}
.b-all{border-radius:16px;overflow:hidden;background:rgba(18,17,26,.76);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.b-allt{display:flex;justify-content:space-between;align-items:flex-start;padding:20px 18px 18px}
.b-allt small{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;color:rgba(236,234,244,.55)}
.b-allt b{font:500 36px/1.3 "JB Mono",var(--mono);color:#F5B43C}.b-allt em{font-size:18px;font-style:normal;color:#F5B43C}
.b-allt span{display:block;font-size:12.5px;color:rgba(236,234,244,.5)}
.b-bar{width:360px;padding-top:16px}.b-bar>div{display:flex;gap:4px;height:6px}.b-bar>div i{border-radius:3px;background:var(--c)}
.b-bar i.k-g{flex:48}.b-bar i.k-o{flex:12}.b-bar i.k-r{flex:36}
.b-bar p{display:flex;gap:14px;margin-top:12px!important;font-size:11.5px;font-weight:700}.b-bar p span{color:var(--c)}.b-bar p i{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:currentColor}
.b-subs{display:grid;grid-template-columns:1fr 1fr;box-shadow:0 -1px 0 rgba(255,255,255,.08)}
.b-sub{display:flex;align-items:center;gap:16px;padding:14px 18px;box-shadow:0 1px 0 rgba(255,255,255,.07);cursor:pointer;transition:background .3s}
.b-sub:nth-child(odd){box-shadow:0 1px 0 rgba(255,255,255,.07),1px 0 0 rgba(255,255,255,.07)}
.b-sub:hover{background:rgba(255,255,255,.03)}
.b-sr{position:relative;width:42px;height:42px;flex:none;display:grid;place-items:center}
.b-sr svg{position:absolute;inset:0;transform:rotate(-90deg)}.b-sr circle{stroke-width:3.2}
.b-sr .a{stroke:var(--c);stroke-linecap:round}
.b-sr b{font-size:13px;font-weight:800}
.b-sub strong{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em}
.b-sub small{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:12px;font-weight:700;color:var(--c)}.b-sub small i{width:6px;height:6px;border-radius:50%;background:currentColor}
.b-cnt{margin-left:auto;font-size:14px;color:rgba(236,234,244,.5)}.b-cnt b{font-size:15px;color:#fff}
.b-arr{width:16px!important;opacity:.5}
/* ================================== Sundry ================================== */
.sdx{overflow:hidden;background:#EEE3D1;color:#2B1F17;font-family:"Sundry Mono",ui-monospace,monospace}
.s-paper{position:absolute;inset:0;background:
radial-gradient(130% 100% at 50% 42%,transparent 52%,rgba(125,84,44,.2) 100%),
radial-gradient(55% 50% at 32% 42%,rgba(255,250,240,.6),transparent 72%),
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg,#F2E9DA,#E9DCC6)}
.s-props>*{position:absolute}
.s-polaroid{left:-52px;top:66px;width:236px;height:306px;padding:16px 16px 64px;background:#F8F4ED;transform:rotate(-13deg);box-shadow:0 24px 40px -14px rgba(60,40,20,.4);filter:blur(1px);opacity:.92}
.s-polaroid i{display:block;width:100%;height:100%;background:radial-gradient(40% 30% at 70% 38%,rgba(255,236,190,.9),transparent 70%),linear-gradient(180deg,#9EB1BA 0%,#C8C2B2 46%,#8C8A6E 66%,#5C5845 100%)}
.s-pen1{left:-34px;top:540px;width:28px;height:640px;border-radius:14px;background:linear-gradient(90deg,#3B3530,#6D645B 45%,#29241F);transform:rotate(-20deg);filter:blur(3.5px);opacity:.55}
.s-pen2{left:70px;top:640px;width:13px;height:520px;border-radius:7px;background:linear-gradient(90deg,#9A7B45,#D8B876 50%,#8C6D3A);transform:rotate(-19deg);filter:blur(4px);opacity:.45}
.s-note{right:-34px;top:-26px;width:196px;height:238px;display:grid;align-content:start;gap:14px;padding:34px 24px;background:#EFE2C9;transform:rotate(13deg);box-shadow:0 12px 30px -12px rgba(60,40,20,.45);font:500 25px/1 "Sundry Hand",cursive;color:rgba(80,56,36,.6);filter:blur(.6px)}
.s-fpen{left:1706px;top:146px;width:320px;height:22px;border-radius:11px;background:linear-gradient(180deg,#303030,#0C0C0C 58%,#262626);transform:rotate(36deg);transform-origin:0 50%;box-shadow:0 22px 26px -12px rgba(0,0,0,.5)}
.s-fpen i{position:absolute}
.s-nib{left:-38px;top:3px;width:42px;height:16px;background:linear-gradient(180deg,#EDCC80,#A9853C);clip-path:polygon(0 50%,100% 0,100% 100%)}
.s-ring{left:30px;top:0;width:14px;height:100%;background:linear-gradient(180deg,#F2D790,#9C7A33)}
.s-cap{left:150px;top:-1px;width:6px;height:24px;border-radius:2px;background:linear-gradient(180deg,#E9C979,#8E6C2C)}
.s-flowers{inset:0;width:100%;height:100%;filter:blur(1.3px)}
.s-cup{right:30px;bottom:-70px;width:250px;height:160px;border-radius:50%;background:radial-gradient(58% 52% at 50% 44%,#F8F2E8,#DDCFBA);filter:blur(5px);opacity:.85}
.s-frame{position:absolute;inset:14px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(120,88,58,.3),inset 0 0 0 5px rgba(255,250,240,.25),inset 0 0 0 6px rgba(120,88,58,.12)}
.s-nav{position:absolute;left:110px;right:128px;top:28px;z-index:2;display:flex;justify-content:space-between;align-items:flex-start}
.s-logo{position:relative;display:flex;align-items:flex-start;gap:16px}
.s-tile{width:60px;height:60px;flex:none;display:grid;place-items:center;background:#FFFDF8;border:3px dotted #D8CCB9;box-shadow:0 2px 8px rgba(80,50,20,.14)}
.s-tile svg{width:30px}
.s-flour{position:absolute;left:54px;top:28px;width:44px}
.s-logo p{margin-top:4px;font:620 31px/1 "Sundry Serif",Georgia,serif;letter-spacing:-.02em;color:#211711}
.s-logo p em{margin-left:4px;font:italic 480 21px/1 "Sundry Serif",Georgia,serif;letter-spacing:0;color:#7C5B3F}
.s-logo small{display:block;margin-top:10px;font-size:14.5px;letter-spacing:.05em;color:#4A3A2E}
.s-nav nav{display:flex;align-items:center;gap:22px;margin-top:14px;font-size:14.5px;letter-spacing:.03em;color:#3A2C22}
.s-nav nav>span{cursor:pointer}
.s-pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;background:rgba(255,252,246,.72);box-shadow:inset 0 0 0 1px rgba(160,120,80,.32);color:#7C5B3F}
.s-pill svg{width:15px}
.s-red-p{color:#A8322B;box-shadow:inset 0 0 0 1px rgba(168,50,43,.38)}
.s-lang{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(255,252,246,.72);box-shadow:inset 0 0 0 1px rgba(160,120,80,.32);font-size:12px}
.s-lang b,.s-lang i{padding:6px 9px;border-radius:999px;font-style:normal;font-weight:700;color:#7A6A5A;transition:background .3s,color .3s}
.s-lang .on{background:#A8322B;color:#fff}
.s-hero{position:absolute;left:193px;top:306px;z-index:2;width:720px}
.s-kick{display:flex;align-items:center;gap:8px;margin-bottom:12px!important;font:500 24px/1 "Sundry Hand",cursive;color:#9A6B35}
.s-kick svg{width:22px}
.s-hero h4{font:620 66px/1.1 "Sundry Serif",Georgia,serif;letter-spacing:-.028em;color:#211711}
.s-red{position:relative;display:inline-block;color:#A62F28}
.s-ul{position:absolute;left:0;bottom:-12px;width:100%;height:20px;overflow:visible}
.s-div{display:flex;align-items:center;gap:18px;margin:24px 0 30px;color:#B9914F}
.s-div i{width:88px;height:1px;background:rgba(160,120,70,.5)}.s-div svg{width:18px}
.s-sub{font-size:17.5px;line-height:1.7;letter-spacing:.02em;color:#3E3026}
.s-btns{display:flex;align-items:center;gap:26px;margin-top:34px}
.s-btn{display:inline-flex;align-items:center;height:53px;padding:0 28px;border-radius:3px;background:linear-gradient(180deg,#B3362E,#9C2A23);color:#FFF6EC;font-size:16px;font-weight:700;letter-spacing:.02em;box-shadow:0 12px 20px -10px rgba(150,40,30,.65),inset 0 1px 0 rgba(255,255,255,.18);cursor:pointer}
.s-lnk{padding-bottom:6px;border-bottom:1px dashed rgba(168,50,43,.6);font-size:15px;color:#A8322B;cursor:pointer}
.s-env{position:absolute;left:978px;top:262px;z-index:2;width:654px;height:470px}
.s-letter{position:absolute;left:67px;top:0;width:504px;height:150px;display:grid;align-content:start;gap:7px;padding:24px 46px;border-radius:3px;background:#FBF8F1;box-shadow:0 6px 16px rgba(80,50,20,.12)}
.s-letter i{width:70%;height:2px;border-radius:2px;background:rgba(80,70,60,.24)}.s-letter i:nth-child(2){width:62%}.s-letter i:nth-child(3){width:48%}
.s-letter b{position:absolute;right:66px;top:10px;font-size:16px;color:#C0392B}
.s-air{position:absolute;left:0;top:79px;width:654px;height:391px;padding:17px;border-radius:16px;background:repeating-linear-gradient(-45deg,#B8342C 0 26px,#F4ECDF 26px 44px,#2B4C8A 44px 70px,#F4ECDF 70px 88px);box-shadow:0 32px 50px -24px rgba(70,40,15,.5),0 2px 6px rgba(70,40,15,.14)}
.s-card{position:relative;height:100%;overflow:hidden;border-radius:6px;background:radial-gradient(90% 80% at 30% 30%,#FBF6EE,#F0E6D5);box-shadow:inset 0 0 0 1px rgba(120,90,60,.14)}
.s-flap{position:absolute;inset:0;width:100%;height:100%}
.s-lbl{position:absolute;left:39px;top:100px;font-size:12px;font-weight:700;letter-spacing:.14em;color:#8A7A68}
.s-lbl.s-l2{top:201px}
.s-hand{position:absolute;left:39px;width:297px;padding:0 0 6px 30px;border-bottom:1.5px dashed rgba(140,120,100,.45);font:500 27px/1 "Sundry Hand",cursive;color:rgba(120,104,88,.55)}
.s-h1{top:120px}.s-h2{top:222px}
.s-post{position:absolute;left:399px;top:47px;width:106px;height:106px;display:grid;place-items:center;border-radius:50%;border:2.5px solid #C0453D;box-shadow:inset 0 0 0 5px #F6EEE2,inset 0 0 0 6.5px #C0453D;color:#C0453D;text-align:center;transform:rotate(-4deg)}
.s-post b{margin-top:-12px;font-size:13px;line-height:1.35;letter-spacing:.06em}
.s-post svg{position:absolute;bottom:17px;left:50%;width:15px;margin-left:-7.5px}
.s-wave{position:absolute;left:506px;top:96px;width:70px}
.s-stamp{position:absolute;left:536px;top:9px;width:73px;height:86px;display:grid;justify-items:center;align-content:space-between;padding:7px 4px;background:#F3EBDD;border:3px dotted #E2D6C2;box-shadow:0 2px 6px rgba(70,40,15,.22)}
.s-stamp small{font-size:6.5px;font-weight:700;letter-spacing:.1em;color:#6E5A45}.s-stamp svg{width:30px}
.s-coffee{position:absolute;right:35px;bottom:20px;z-index:3;display:flex;align-items:center;gap:10px;height:38px;padding:0 18px;border-radius:999px;background:#B3362E;color:#FFF3E8;font-size:14px;font-weight:700;box-shadow:0 10px 18px -8px rgba(150,40,30,.6);cursor:pointer}
.s-coffee svg{width:17px}
/* ================================== GLCHLAB ================================== */
.glx{display:flex;flex-direction:column;background:#0A0A0A;color:#E6E9E7}
.g-menu{display:flex;align-items:center;gap:34px;height:42px;flex:none;padding:0 26px;box-shadow:0 1px 0 rgba(255,255,255,.06);font-size:14.5px;color:rgba(230,233,231,.86)}
.g-body{flex:1;min-height:0;display:grid;grid-template-columns:1fr 72px 400px}
.g-stage{position:relative;overflow:hidden;background:#070707}
.g-img{position:absolute;left:250px;top:0;bottom:0;width:950px;background:#000}
.g-cv{display:block;width:100%;height:100%;image-rendering:pixelated}
.g-tools{position:absolute;left:522px;top:14px;display:flex;align-items:center;gap:30px;height:50px;padding:0 24px;border-radius:12px;background:rgba(18,18,18,.94);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:14.5px}
.g-tools i{width:1px;height:22px;background:rgba(255,255,255,.12)}.g-tools b{font:500 14px/1 "JB Mono",var(--mono)}.g-tools .ic{width:16px}
.g-hd{position:absolute;top:470px;width:16px;height:52px;display:grid;place-items:center;background:#141414;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:rgba(255,255,255,.5)}
.g-hd.l{left:0;border-radius:0 6px 6px 0}.g-hd.r{right:0;border-radius:6px 0 0 6px}.g-hd .ic{width:10px}
.g-scroll{position:absolute;right:6px;top:4px;width:3px;height:680px;border-radius:3px;background:rgba(255,255,255,.1)}
.g-rail{display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:20px 0;background:#0B0B0B;box-shadow:-1px 0 0 rgba(255,255,255,.06)}
.g-rail>div{display:grid;justify-items:center;gap:14px}
.g-rail span{width:48px;height:48px;display:grid;place-items:center;border-radius:10px;color:rgba(255,255,255,.55);cursor:pointer;transition:background .3s,color .3s}
.g-rail span:hover{background:rgba(255,255,255,.05)}
.g-rail span.on{color:#3BE38A;background:rgba(59,227,138,.08);box-shadow:inset 0 0 0 2px #2FC273}
.g-rail .ic{width:20px;height:20px}.g-rail>div:last-child>.ic{color:rgba(255,255,255,.55)}
.g-rail .g-bot{color:#3BE38A}
.g-panel{display:flex;flex-direction:column;gap:8px;overflow:hidden;padding:26px 20px 20px;background:#0C0C0C;box-shadow:-1px 0 0 rgba(255,255,255,.06)}
.g-h{margin-bottom:6px;font-size:16px;font-weight:700}
.g-panel small{margin-top:8px;font:600 11px/1 var(--sans);letter-spacing:.1em;color:rgba(230,233,231,.55)}
.g-sec{display:flex;justify-content:space-between;align-items:center}.g-sec small{color:#E6E9E7}
.g-mini{display:flex;gap:10px;color:rgba(255,255,255,.4)}.g-mini .ic{width:14px}.g-mini i,.g-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.3)}
.g-selr{display:grid;grid-template-columns:1fr 34px 34px;gap:8px}
.g-sel{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 14px;border-radius:8px;background:#161616;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:15px}
.g-sel .ic{width:12px;opacity:.5}.g-sel.b{height:42px;background:#131313}
.g-sq{display:grid;place-items:center;border-radius:8px;background:#161616;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:rgba(255,255,255,.6);cursor:pointer}
.g-sl{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px 10px;margin-top:10px;font-size:15px}
.g-sl em{min-width:62px;padding:8px 12px;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font:500 13px/1 "JB Mono",var(--mono);font-style:normal;color:#3BE38A}
.g-sl .g-plain{min-width:0;padding:0;box-shadow:none;color:rgba(255,255,255,.4)}
.g-sl>i{position:relative;grid-column:1/-1;height:3px;border-radius:3px;background:rgba(255,255,255,.12)}
.g-sl>i b{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5);transition:left .9s var(--ease)}
.g-sl .k1{left:38%}.g-sl .k2{left:100%}.g-sl .k3{left:18%}.g-sl .k4{left:50%}
.g-ramp{display:block;padding:12px 14px;border-radius:8px;background:#080808;font:500 15px/1 "JB Mono",var(--mono);letter-spacing:.2em}
.g-in{display:block;padding:12px 14px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font:500 13px/1 "JB Mono",var(--mono);color:rgba(255,255,255,.35)}
.g-hint{margin-top:2px!important;font-size:13px;line-height:1.5;color:rgba(230,233,231,.45)}
.g-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.g-tg{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:15px}
.g-tg i{position:relative;width:40px;height:22px;border-radius:999px;background:#2A2A2A;cursor:pointer;transition:background .3s}
.g-tg i::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#8A8A8A;transition:transform .3s var(--ease),background .3s}
.g-tg i.on{background:#1F7A4A}.g-tg i.on::after{transform:translateX(18px);background:#3BE38A}
.g-status{display:flex;align-items:center;justify-content:space-between;height:48px;flex:none;padding:0 16px;background:#0A0A0A;box-shadow:0 -1px 0 rgba(255,255,255,.06);font-size:13px}
.g-file{display:flex;align-items:center;gap:8px}.g-file i{width:7px;height:7px;border-radius:50%;background:#3BE38A}
.g-mid{display:flex;align-items:center;gap:14px}
.g-ready{margin-right:6px;color:rgba(255,255,255,.45)}
.g-seg{display:flex;align-items:center;gap:4px;padding:4px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font:500 11px/1 "JB Mono",var(--mono);letter-spacing:.08em}
.g-seg i{padding:6px 10px;font-style:normal;color:rgba(255,255,255,.4)}.g-seg b{padding:6px 12px;border-radius:5px;background:#27C46F;color:#04130A;font-weight:600}
.g-ur{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font:500 11px/1 "JB Mono",var(--mono);letter-spacing:.08em;color:rgba(255,255,255,.75)}
.g-ur em{display:flex;align-items:center;gap:8px;margin-left:14px;font-style:normal;color:rgba(255,255,255,.3)}.g-ur .ic{width:14px}
.g-zm{display:flex;align-items:center;gap:14px;padding:6px 12px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.g-zm i{font-style:normal;color:rgba(255,255,255,.6)}.g-zm b{font:500 13px/1 "JB Mono",var(--mono)}.g-zm u{width:38px;height:14px;border-radius:3px;background:#3A3A3A}.g-zm .ic{width:14px;opacity:.6}
.g-gpu{display:flex;align-items:center;gap:18px;font:500 13px/1 "JB Mono",var(--mono)}.g-gpu b{font-weight:500;color:#3BE38A}.g-gpu em{font-style:normal;color:#3BE38A}.g-gpu span{color:rgba(255,255,255,.45)}
/* ================================= live preview ================================= */
.lb{position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;visibility:hidden;color:var(--cream)}
.lb.on{visibility:visible}
.lb-bg{position:absolute;inset:0;background:rgba(9,9,8,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .6s var(--ease)}
.lb.on .lb-bg{opacity:1}
.lb-bar,.lb-hint{position:relative;opacity:0;transition:opacity .5s var(--ease)}
.lb.on .lb-bar,.lb.on .lb-hint{opacity:1;transition-delay:.25s}
.lb.closing .lb-bg,.lb.closing .lb-bar,.lb.closing .lb-hint{opacity:0;transition-delay:0s}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px var(--gut)}
.lb-t{display:flex;align-items:center;gap:14px;min-width:0;font:400 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.lb-t b{padding:5px 7px 4px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(240,234,220,.3);font-weight:500}
.lb-t span{font:300 24px/1 var(--sans);font-stretch:var(--wide);letter-spacing:-.03em;text-transform:none;white-space:nowrap}
.lb-t em{font:400 10.5px/1 var(--mono);font-style:normal;letter-spacing:.08em;color:#6FD99A;white-space:nowrap}
.lb-r{display:flex;align-items:center;gap:10px}
.lb .pill:hover{background:var(--cream);color:var(--ink)}
.lb-x{position:relative;width:44px;height:44px;flex:none;border-radius:50%;background:var(--cream)}
.lb-x span{position:absolute;left:14px;right:14px;top:21px;height:1.5px;background:#151513}.lb-x span:first-child{transform:rotate(45deg)}.lb-x span:last-child{transform:rotate(-45deg)}
.lb-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 var(--gut);overflow:auto;overscroll-behavior:contain}
.lb-stage .win{width:min(100%,calc((100svh - 170px) * 16 / 9 + 0px));flex:none;box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.12)}
.lb-hint .ph{display:none}
.lb-hint{margin:0;padding:14px var(--gut) 18px;text-align:center;font:400 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(240,234,220,.45)}
@media (max-width:900px){
.lb-stage{justify-content:flex-start}
.lb-stage .win{width:1000px}
.lb-t em{display:none}
.lb-hint .pc{display:none}.lb-hint .ph{display:inline}
.lb .pill{height:40px;padding:0 14px;font-size:13.5px}
}
/* theme switch: the new look spreads out from the button */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
/* numbers roll like an odometer (built by JS) */
.num b.odo{display:flex;align-items:flex-start;white-space:nowrap}
.od{display:inline-block;height:.9em;overflow:hidden}
.od-s{display:block;line-height:.9em}
.od-p{display:inline-block}
/* dark mode: moss accents turn gold so they stay readable */
:root[data-theme="dark"] .big em,:root[data-theme="dark"] .nf h1 em{color:var(--gold-2)}
:root[data-theme="dark"] .row svg{stroke:var(--gold-2)}
:root[data-theme="dark"] .btn:not(.btn-q):hover{color:var(--cream)}
/* =========================================================================
v12 — seeds, veil, now, newsletter
========================================================================= */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the veil between pages */
.veil{position:fixed;inset:0;z-index:300;display:none;place-items:center;background:#27402F;clip-path:inset(100% 0 0 0)}
.veil-m{width:84px}.veil-m svg{width:100%;height:auto;display:block}
html.veil-in body::before{content:"";position:fixed;inset:0;z-index:299;background:#27402F}
/* a sprout (hero soil and the 404 garden) */
.sprout{position:absolute;width:calc(44px * var(--s,1));height:calc(88px * var(--s,1));margin:calc(-88px * var(--s,1)) 0 0 calc(-22px * var(--s,1));pointer-events:none;transform-origin:50% 100%}
.sprout svg{width:100%;height:100%;overflow:visible;display:block}
.sprout{--pi:#22342A;--pw:#A7C38C;--pe:#DDAE4F}
:root[data-theme="dark"] .sprout{--pi:#E4DDCB;--pw:#4F7457;--pe:#DDB463}
.sp-stem{fill:none;stroke:#7FA56C;stroke-width:2;stroke-linecap:butt;stroke-dasharray:1}
.sp-leaf{fill:var(--pw);stroke:var(--pi);stroke-width:.5;stroke-linejoin:round}
.sp-bud path{fill:var(--pe);stroke:var(--pi);stroke-width:.45}.sp-bud .sp-awn{fill:none;stroke-width:.4}
.sp-seed{fill:#8A6A3A}
.sp-soil{fill:rgba(90,66,36,.28);transform-origin:30px 118px}
.sp-sway{transform-origin:30px 118px;animation:sway 4.2s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
:root[data-theme="dark"] .sp-stem{stroke:#6C9A74}
/* hero: the ground plate takes seeds; each sprout stands up, facing you */
.dio-cap .cap-t{transition:opacity .4s}
/* status: launching soon */
.st-soon i{background:#F5B43C!important;box-shadow:0 0 10px #F5B43C!important}
/* now growing */
.now{position:relative;z-index:2;margin-top:-10px;padding-bottom:10px}
.now-in{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:clamp(16px,2.4vw,40px);padding:18px 22px;border-radius:14px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line),0 24px 60px -40px rgba(21,21,19,.35)}
.now-k{display:flex;align-items:center;gap:10px;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.now-k i{position:relative;width:8px;height:8px;border-radius:50%;background:#3DBE74}
.now-k i::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(61,190,116,.45);animation:ping 2s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:1}70%,100%{transform:scale(3.2);opacity:0}}
.now-t{margin:0;font-size:15.5px;line-height:1.45;color:var(--ink-2)}.now-t b{color:var(--ink);font-weight:500}.now-t span{display:block;font-size:13.5px;color:var(--ink-3)}
.now-bar{width:210px}
.now-st{display:flex;justify-content:space-between;font:400 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.now-st .on{color:var(--ink)}
.now-bar>i{position:relative;display:block;height:3px;border-radius:3px;background:var(--line)}
.now-bar>i b{position:absolute;left:0;top:0;bottom:0;width:calc(var(--grow,.5) * 100%);border-radius:inherit;background:linear-gradient(90deg,var(--gold),#3DBE74);transform-origin:left}
.now-bar>i b::after{content:"";position:absolute;right:-4px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#3DBE74;box-shadow:0 0 0 4px rgba(61,190,116,.2)}
.now-a{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:500;white-space:nowrap}
.now-a i{font-style:normal;transition:transform .5s var(--ease)}.now-a:hover i{transform:translateX(4px)}
@media (max-width:900px){
.now{margin-top:6px}
.now-in{grid-template-columns:1fr;gap:16px;padding:20px}
.now-bar{width:100%}
.now-a{justify-self:start}
}
/* newsletter */
.nl{display:grid;grid-template-columns:1fr minmax(0,440px);gap:24px 40px;align-items:end;margin-top:clamp(50px,7vw,90px);padding:clamp(22px,3vw,34px);border-radius:18px;background:rgba(240,234,220,.06);box-shadow:inset 0 0 0 1px rgba(240,234,220,.14)}
.nl-h{margin:0;font:300 clamp(28px,3vw,44px)/1.05 var(--sans);font-stretch:var(--wide);letter-spacing:-.04em}
.nl-h em{color:var(--gold-2)}
.nl-p{margin:10px 0 0;color:var(--cream-2);font-size:15px;max-width:46ch}
.nl-f{display:flex;gap:8px;padding:6px;border-radius:999px;background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px rgba(240,234,220,.2);transition:box-shadow .3s}
.nl-f:focus-within{box-shadow:inset 0 0 0 1.5px var(--gold-2)}
.nl-f input{flex:1;min-width:0;height:46px;padding:0 16px;border:0;background:transparent;color:var(--cream);font:400 15.5px var(--sans);outline:none}
.nl-f input::placeholder{color:rgba(240,234,220,.45)}
.nl-f button{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;border-radius:999px;background:var(--cream);color:#27402F;font-weight:500;font-size:14.5px;white-space:nowrap;transition:background .3s}
.nl-f button:hover{background:var(--gold-2)}
.nl-f button i{font-style:normal}
.nl-ok{grid-column:1/-1;margin:0;min-height:0;font:400 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-2)}
.nl-ok:empty{display:none}
@media (max-width:760px){.nl{grid-template-columns:1fr}.nl-f button span{display:none}.nl-f button{padding:0 18px}}
.sig a,.ft-l a{border-bottom:1px solid currentColor}
/* phones: the deck's own layer only, never the track's */
@media (max-width:980px){.hz-track{will-change:auto;transform:none!important}}
/* ================================ 404 garden ================================ */
.g404{position:relative;min-height:100svh;display:flex;flex-direction:column;padding:26px var(--gut) 0;overflow:hidden}
.g404 .brand{display:flex;align-items:center;gap:11px}.g404 .brand .mk{width:30px}.g404 .brand .bw{height:18px;width:auto}
.g4-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.g4-t{position:relative;z-index:2;margin-top:clamp(40px,9vh,110px);max-width:760px}
.g4-t h1{margin:18px 0 0;font:300 clamp(56px,10vw,160px)/.9 var(--sans);font-stretch:var(--wide);letter-spacing:-.05em}
.g4-t h1 em{color:var(--moss)}
:root[data-theme="dark"] .g4-t h1 em{color:var(--gold-2)}
.g4-t p{margin:22px 0 0;max-width:40ch;color:var(--ink-2);font-size:17px}
.g4-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.g4-soil{position:relative;flex:1;min-height:clamp(240px,40svh,420px);margin:30px calc(var(--gut) * -1) 0;cursor:crosshair;touch-action:manipulation;
background:repeating-linear-gradient(180deg,transparent 0 26px,rgba(90,66,36,.16) 26px 28px),linear-gradient(180deg,#D9C7A6,#BFA37A);
-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%);mask-image:linear-gradient(180deg,transparent,#000 18%)}
:root[data-theme="dark"] .g4-soil{background:repeating-linear-gradient(180deg,transparent 0 26px,rgba(0,0,0,.25) 26px 28px),linear-gradient(180deg,#3A2F22,#2A2218)}
.g4-hud{position:absolute;left:var(--gut);right:var(--gut);bottom:22px;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:12px;font:400 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#3A2C1C;pointer-events:none}
:root[data-theme="dark"] .g4-hud{color:#E8DCC6}
.g4-hud b{font-weight:500;font-size:14px}
.g4-msg{position:absolute;left:50%;top:44%;z-index:3;transform:translate(-50%,-50%);font:400 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#3A2C1C;text-align:center;pointer-events:none;transition:opacity .5s}
:root[data-theme="dark"] .g4-msg{color:#E8DCC6}
.g4-share[hidden]{display:none}
@media (min-width:980px){
.g404{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto 1fr;column-gap:clamp(30px,4vw,70px);padding-bottom:26px}
.g4-top{grid-column:1/-1}
.g4-t{align-self:center;margin-top:0}
.g4-t h1{font-size:clamp(56px,6.6vw,120px)}
.g4-soil{margin:30px 0 0;border-radius:22px;min-height:0;-webkit-mask-image:none;mask-image:none;box-shadow:inset 0 0 0 1px rgba(90,66,36,.2),0 40px 80px -50px rgba(60,40,10,.5)}
}
/* =========================================================================
v14 — founder, studio notes, living footer, product colours, roots
========================================================================= */
/* founder */
.founder{padding-block:clamp(40px,6vw,90px) clamp(110px,13vw,200px)}
.fd-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,90px);align-items:center}
.fd-pic{position:relative;aspect-ratio:1/1;border-radius:28px;overflow:hidden;background:
radial-gradient(60% 60% at 30% 25%,rgba(216,184,120,.55),transparent 70%),linear-gradient(160deg,#2C4735,#1B2C21);box-shadow:0 50px 90px -50px rgba(21,21,19,.6)}
.fd-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fd-mono{position:absolute;inset:0;display:grid;place-items:center;font:200 clamp(160px,22vw,320px)/1 var(--sans);font-stretch:125%;letter-spacing:-.06em;color:#F0EADC}
.fd-pic.has-img .fd-mono{display:none}
.fd-ring{position:absolute;left:8%;bottom:8%;width:54px;height:54px;border-radius:50%;background:#D8B878;box-shadow:0 0 0 10px rgba(216,184,120,.2)}
.fd-pic.has-img .fd-ring{display:none}
.fd-t .h2{margin-bottom:26px}
.fd-p{margin:0 0 14px;max-width:48ch;font-size:clamp(16.5px,1.25vw,19px);line-height:1.55;color:var(--ink-2)}
.fd-p:first-of-type{color:var(--ink)}
.fd-a{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.fd-a .pill:hover{background:var(--ink);color:var(--paper)}
@media (max-width:900px){.fd-card{grid-template-columns:1fr}.fd-pic{max-width:420px}}
/* studio notes */
.notes{padding-bottom:clamp(120px,14vw,210px)}
.nt-h{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(40px,5vw,70px)}
.nt-p{margin:0;max-width:40ch;justify-self:end;color:var(--ink-2);font-size:17px}
.nt-g{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.nt{position:relative;display:flex;flex-direction:column;gap:12px;padding:14px 14px 24px;border-radius:20px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);transition:transform .8s var(--ease),box-shadow .6s var(--ease)}
.nt:hover{transform:translateY(-8px);box-shadow:inset 0 0 0 1px var(--line-2),0 40px 70px -40px rgba(21,21,19,.4)}
.nt-art{position:relative;display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;margin-bottom:6px}
.nt-art.a1{background:linear-gradient(180deg,#E5D7BB,#CDB791);display:flex;flex-direction:column;justify-content:center;gap:9%;padding:0 10%}
.nt-art.a1 i{display:block;height:2px;border-radius:2px;background:rgba(80,58,30,.4);transform:rotate(-4deg);transition:transform 1s var(--ease)}
.nt-art.a1 i:nth-child(even){transform:rotate(-3deg) translateX(4%)}
.nt-art.a1 b{position:absolute;left:52%;top:46%;width:16px;height:16px;border-radius:50%;background:#C39A4E;box-shadow:0 0 0 8px rgba(195,154,78,.22);transition:transform 1s var(--ease)}
.nt:hover .nt-art.a1 b{transform:translateY(-12px) scale(1.2)}
.nt-art.a2{background:radial-gradient(70% 90% at 80% 20%,#2a1d5c,#110d22);display:grid;grid-template-columns:repeat(3,1fr);gap:8%;padding:9% 12%}
.nt-art.a2 i{border-radius:8px;background:rgba(124,92,255,.16);box-shadow:inset 0 0 0 1px rgba(160,130,255,.35);transition:background .6s}
.nt-art.a2 i:nth-child(7),.nt-art.a2 i:nth-child(8),.nt-art.a2 i:nth-child(9){background:rgba(124,92,255,.5)}
.nt:hover .nt-art.a2 i:nth-child(odd){background:rgba(124,92,255,.5)}
.nt-art.a3{background:#050605;background-image:radial-gradient(circle at 50% 50%,#BFD2C4 0 1.2px,transparent 1.7px);background-size:7px 7px;
-webkit-mask-image:radial-gradient(42% 58% at 48% 50%,#000 30%,rgba(0,0,0,.35) 62%,transparent 80%);mask-image:radial-gradient(42% 58% at 48% 50%,#000 30%,rgba(0,0,0,.35) 62%,transparent 80%);transition:background-size .8s var(--ease)}
.nt:hover .nt-art.a3{background-size:5px 5px}
.nt-m{padding:0 8px;font:400 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.nt h3{margin:0;padding:0 8px;font:300 clamp(24px,2vw,32px)/1.08 var(--sans);font-stretch:var(--wide);letter-spacing:-.035em}
.nt p{margin:0;padding:0 8px;color:var(--ink-2);font-size:15px;line-height:1.5}
.nt-go{margin-top:auto;padding:10px 8px 0;font-size:14px;font-weight:500}
.nt-go i{font-style:normal;display:inline-block;transition:transform .6s var(--ease)}.nt:hover .nt-go i{transform:translateX(6px)}
@media (max-width:900px){.nt-h{grid-template-columns:1fr;gap:18px}.nt-p{justify-self:start}.nt-g{grid-template-columns:1fr}}
/* living footer */
.foot .nl{margin:0 0 clamp(50px,6vw,80px);padding-top:clamp(50px,6vw,80px);background:none;box-shadow:none;border-radius:0;padding-inline:0;border-top:1px solid rgba(240,234,220,.18)}
.ft-g{border-top:0;padding-top:0}
.ft-pr a{display:flex!important;align-items:center;justify-content:space-between;gap:12px;max-width:220px}
.sx{display:inline-flex;align-items:center;gap:6px;padding:4px 8px 3px;border-radius:999px;font:500 9.5px/1 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(240,234,220,.2)}
.sx::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.sx.live{color:#7FD9A2}.sx.soon{color:#F5C46B}
.sx.live::before{animation:blink 2.4s ease-in-out infinite}
.ft-now{display:inline-flex;align-items:center;gap:10px;color:var(--cream-2)}
.ft-now i{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE3A1,#E9A83C);box-shadow:0 0 12px rgba(245,190,90,.6);flex:none}
.ft-now.night i{background:radial-gradient(circle at 65% 35%,transparent 45%,#E8E1CF 46%);box-shadow:none}
.ft-now.dusk i{background:radial-gradient(circle at 35% 35%,#FFC98A,#D4674A);box-shadow:0 0 12px rgba(212,103,74,.5)}
@media (max-width:760px){.ft-l{flex-direction:column;align-items:flex-start}}
/* product colours: the dark room takes on each product's colour as it passes */
.work-bg{background:var(--wk,var(--night))!important}
/* roots under "root." */
/* ================================ studio note pages ================================ */
.ar-nav{display:flex;justify-content:space-between;align-items:center;padding-block:22px}
.ar-nav .brand .mk{width:30px}.ar-nav .brand .bw{height:18px;width:auto}
.ar-back{font-size:14.5px;padding:10px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);transition:background .3s}
.ar-back:hover{background:var(--paper-2)}
.ar{max-width:820px;padding-top:clamp(50px,9vh,110px);padding-bottom:clamp(80px,10vw,140px)}
.ar h1{margin:24px 0 0;font:300 clamp(42px,6vw,84px)/1 var(--sans);font-stretch:var(--wide);letter-spacing:-.045em;text-wrap:balance}
.ar-dek{margin:24px 0 0;font:italic 400 clamp(20px,2vw,26px)/1.35 var(--serif);color:var(--ink-2)}
.ar-by{display:flex;align-items:center;gap:12px;margin:34px 0 0;padding:18px 0;border-block:1px solid var(--line);font-size:14.5px;color:var(--ink-2)}
.ar-by a{border-bottom:1px solid currentColor}
.ar-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#27402F;color:#F0EADC;font-weight:500}
.ar-b{margin-top:40px;font-size:clamp(17px,1.3vw,19.5px);line-height:1.7;color:var(--ink-2)}
.ar-b p{margin:0 0 1.2em}.ar-b b{color:var(--ink);font-weight:500}.ar-b a{color:var(--ink);border-bottom:1px solid currentColor}
.ar-b h2{margin:1.9em 0 .6em;font:400 clamp(24px,2.2vw,32px)/1.1 var(--sans);font-stretch:var(--wide);letter-spacing:-.03em;color:var(--ink)}
.ar-b blockquote{margin:1.6em 0;padding:4px 0 4px 26px;border-left:2px solid var(--gold);font:italic 400 clamp(26px,3vw,40px)/1.2 var(--serif);color:var(--ink)}
.ar-next{display:grid;grid-template-columns:1fr auto;gap:10px 20px;align-items:end;margin-top:60px;padding:26px 28px;border-radius:18px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);transition:transform .7s var(--ease)}
.ar-next:hover{transform:translateY(-6px)}
.ar-next .eyebrow{grid-column:1/-1}
.ar-next b{font:300 clamp(22px,2vw,30px)/1.1 var(--sans);font-stretch:var(--wide);letter-spacing:-.03em}
.ar-next i{font-style:normal;font-size:24px}
.ar-f{display:flex;justify-content:space-between;padding-block:26px;border-top:1px solid var(--line);font:400 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.st{white-space:nowrap}
.founder[hidden],.notes[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){html.js .panel .spin{transform:none!important}}
/* =========================================================================
v17 — grain, light and motion
========================================================================= */
/* film grain over everything: one fixed layer, no blend modes (cheap on phones) */
.grain{position:fixed;inset:-120px;z-index:250;pointer-events:none;opacity:.075;
background:url("data:image/svg+xml;utf8,") 0 0/220px 220px}
:root[data-theme="dark"] .grain{opacity:.11;filter:invert(1)}
@media (hover:hover) and (pointer:fine){.grain{animation:grain 1s steps(6) infinite;will-change:transform}}
@keyframes grain{0%,100%{transform:translate3d(0,0,0)}17%{transform:translate3d(-60px,30px,0)}33%{transform:translate3d(40px,-70px,0)}50%{transform:translate3d(-90px,-20px,0)}67%{transform:translate3d(70px,60px,0)}83%{transform:translate3d(-20px,90px,0)}}
/* reading progress: a gold hairline under the nav */
.nav-pr{position:absolute;left:0;right:0;bottom:0;height:1.5px;background:linear-gradient(90deg,var(--gold),#E8C98C);transform-origin:0 50%;transform:scaleX(0);opacity:.9;pointer-events:none}
/* the hero sun: a soft light behind the model that follows the time of day in India */
.hsun{position:absolute;left:50%;top:44%;width:92%;aspect-ratio:1/1;margin:-46% 0 0 -46%;border-radius:50%;pointer-events:none;z-index:-1;
background:radial-gradient(closest-side,var(--sun,rgba(232,190,110,.42)),transparent 72%);filter:blur(6px);animation:hsun 14s ease-in-out infinite alternate;will-change:transform}
@keyframes hsun{from{transform:translate3d(-4%,2%,0) scale(.96)}to{transform:translate3d(5%,-3%,0) scale(1.06)}}
:root[data-theme="dark"] .hsun{opacity:.55}
/* the dark room: a soft light follows the pointer */
.spot{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;border-radius:inherit}
.spot i{position:absolute;left:0;top:0;width:720px;height:720px;margin:-360px 0 0 -360px;border-radius:50%;background:radial-gradient(closest-side,rgba(240,234,220,.075),transparent);opacity:0;transition:opacity .8s var(--ease);will-change:transform}
.work:hover .spot i{opacity:1}
@media (hover:none){.spot{display:none}}
/* GLCHLAB's name glitches when you point at it */
@media (hover:hover) and (pointer:fine){
.p-gl .pn-name:hover{animation:glitch .9s steps(2) infinite}
}
@keyframes glitch{
0%{text-shadow:2px 0 #FF3B6B,-2px 0 #2EE6FF;transform:none}
20%{text-shadow:-3px 1px #FF3B6B,3px -1px #2EE6FF;transform:translateX(1px)}
40%{text-shadow:1px -1px #FF3B6B,-1px 1px #2EE6FF;clip-path:inset(0 0 42% 0)}
60%{text-shadow:-2px 0 #FF3B6B,2px 0 #2EE6FF;clip-path:inset(38% 0 0 0);transform:translateX(-2px)}
80%{text-shadow:3px 1px #FF3B6B,-3px -1px #2EE6FF;clip-path:none}
100%{text-shadow:none;transform:none}
}
/* links underline from left to right */
.ft-g a span,.ft-g a:not(:has(span)),.dr-f a,.sig a,.ar-by a,.ft-l a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease),color .2s}
.ft-g a:hover span,.ft-g a:not(:has(span)):hover,.dr-f a:hover,.sig a:hover,.ar-by a:hover,.ft-l a:hover{background-size:100% 1px}
.sig a,.ft-l a,.ar-by a{border-bottom:0;background-size:100% 1px;padding-bottom:1px}
.sig a:hover,.ft-l a:hover,.ar-by a:hover{background-size:0 1px;background-position:100% 100%}
/* now growing: light runs along the stage bar */
.now-bar>i{overflow:hidden}
.now-bar>i b{overflow:visible}
.now-bar>i::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);transform:translateX(-120%);animation:shine 3.2s var(--ease-2) infinite 1.5s}
@keyframes shine{60%,100%{transform:translateX(420%)}}
/* numbers: a rule draws above each */
.num{border-top-color:transparent!important;position:relative}
.num::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line-2);transform-origin:0 50%;transition:transform 1.6s var(--ease-2)}
html.js:not(.calm) .num:not(.ruled)::before{transform:scaleX(0)}
.num:nth-child(2)::before{transition-delay:.12s}.num:nth-child(3)::before{transition-delay:.24s}.num:nth-child(4)::before{transition-delay:.36s}
/* buttons: magnetic on desktop (JS), a softer press everywhere */
.btn,.nbtn,.ibtn,.pill,.pn-go,.pn-open,.now-a{-webkit-tap-highlight-color:transparent}
.btn:active,.nbtn:active,.pill:active,.pn-go:active,.pn-open:active,.now-a:active,.ibtn:active{scale:.97}
.btn,.nbtn,.pill,.pn-go,.pn-open,.now-a,.ibtn{transition:scale .25s var(--ease),background .35s,color .35s,box-shadow .35s}
/* =========================================================================
v19 — the Arvelic world
========================================================================= */
/* ---------------- preloader: PREPARING THE GROUND ---------------- */
.loader{position:fixed;inset:0;z-index:100;background:#12130F;color:#F0EADC;display:grid;place-items:center;overflow:hidden;clip-path:inset(0 0 0 0)}
.ld-fu{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(240,234,220,.14);stroke-width:1}
.ld-fu path{stroke-dasharray:1;stroke-dashoffset:1}
.ld-in{position:relative;display:flex;align-items:center;gap:20px;margin-top:-6vh}
.ld-in .mk{width:clamp(56px,6vw,76px);height:auto;overflow:visible;color:#F0EADC}
.ld-in .bw{height:clamp(34px,4vw,48px);width:auto;color:#F0EADC;clip-path:inset(0 100% 0 0)}
.ld-t{position:absolute;left:0;right:0;top:calc(50% + 7vh);margin:0;display:flex;justify-content:center;font:400 clamp(11px,1.1vw,13px)/1 var(--mono);letter-spacing:.42em;color:rgba(240,234,220,.72);overflow:hidden;padding:4px 0}
.ld-t .lt{display:inline-block;transform:translateY(110%)}.ld-t .lsp{display:inline-block;width:.9em}
.ld-f{position:absolute;left:var(--gut);right:var(--gut);bottom:28px;display:flex;justify-content:space-between;align-items:flex-end;font:400 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(240,234,220,.45)}
.ld-c{font:200 clamp(44px,6vw,84px)/.8 var(--sans);font-stretch:125%;letter-spacing:-.04em;color:#F0EADC;font-variant-numeric:tabular-nums}
.ld-c b{font-weight:200}
@media (max-width:600px){.ld-t{letter-spacing:.28em}.ld-k{display:none}}
/* ---------------- cursor (fine pointers only) ---------------- */
.cur{position:fixed;left:0;top:0;z-index:260;pointer-events:none;display:none}
html.cc .cur{display:block}
html.cc body,html.cc a,html.cc button,html.cc .pl,html.cc .pn-vis,html.cc [data-cursor]{cursor:none}
html.cc input,html.cc textarea{cursor:text}
.cur-d{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--ink);transition:transform .45s var(--ease),background .3s,opacity .3s}
.cur.on-dark .cur-d{background:#F0EADC}
.cur.hov .cur-d{transform:scale(4.4);background:transparent;box-shadow:inset 0 0 0 .5px currentColor;color:var(--ink)}
.cur.on-dark.hov .cur-d{color:#F0EADC}
.cur-l{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--paper);font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transform:translate(-50%,-50%) scale(0);opacity:0;transition:transform .5s var(--ease),opacity .3s}
.cur.lab .cur-l{transform:translate(-50%,-50%) scale(1);opacity:1}.cur.lab .cur-d{opacity:0}
.cur.drag .cur-l{width:74px;height:74px;padding:0;justify-content:center;border-radius:50%;background:var(--gold);color:#151513}
.cur.down .cur-l{transform:translate(-50%,-50%) scale(.86)}
/* ---------------- toast (easter eggs) ---------------- */
.toast{position:fixed;left:50%;bottom:26px;z-index:240;transform:translate(-50%,30px);opacity:0;padding:12px 18px;border-radius:999px;background:#151513;color:#F0EADC;font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;pointer-events:none;transition:transform .7s var(--ease),opacity .5s}
.toast.on{transform:translate(-50%,0);opacity:1}
.toast b{color:var(--gold-2);font-weight:500}
/* ---------------- nav: the menu button, everywhere ---------------- */
.menu{width:auto;height:44px;padding:0 6px 0 18px;gap:12px;align-items:center;border-radius:999px}
.menu-l{font:500 12px/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase}
.menu b{position:relative;display:block;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,currentColor 12%,transparent)}
.menu span{left:9px;right:9px}
.menu span:first-child{top:12.5px}.menu span:last-child{top:18.5px}
.menu[aria-expanded="true"] span:first-child,.menu[aria-expanded="true"] span:last-child{top:15.5px}
@media (max-width:900px){.menu-l{display:none}.menu{padding:0;width:44px;justify-content:center}.menu b{background:none}}
/* ---------------- the editorial menu: the ground rises ---------------- */
.drawer{position:fixed;inset:0;z-index:55;background:#12130F;color:#F0EADC;display:flex;flex-direction:column;padding:110px 0 calc(26px + env(safe-area-inset-bottom));visibility:hidden;clip-path:inset(100% 0 0 0 round 40px 40px 0 0);transition:clip-path 1s var(--ease-2),visibility 0s 1s}
.drawer.on{visibility:visible;clip-path:inset(0 0 0 0 round 0);transition:clip-path 1s var(--ease-2),visibility 0s}
.dr-fu{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(240,234,220,.08);stroke-width:1;pointer-events:none}
.dr-fu path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease)}
.drawer.on .dr-fu path{stroke-dashoffset:0}
.dr-g{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:center}
.dr-nav{display:flex;flex-direction:column}
.dr-nav a{position:relative;display:grid;grid-template-columns:48px 1fr;align-items:baseline;column-gap:14px;padding:8px 0;border-bottom:1px solid rgba(240,234,220,.1);transition:opacity .4s}
.dr-nav:hover a{opacity:.35}.dr-nav a:hover{opacity:1}
.dr-nav i{font:400 11px/1 var(--mono);font-style:normal;color:rgba(240,234,220,.45)}
.dr-w{display:block;overflow:hidden;padding-bottom:.08em}
.dr-w span{display:block;font:300 clamp(46px,7vw,112px)/.98 var(--sans);font-stretch:112%;letter-spacing:-.05em;transform:translateY(110%);transition:transform 1.1s var(--ease),letter-spacing .7s var(--ease)}
.dr-nav a:hover .dr-w span{letter-spacing:-.03em}
.dr-nav em{grid-column:2;font:italic 400 15px/1.2 var(--serif);color:rgba(240,234,220,.55);opacity:0;transform:translateY(8px);transition:opacity .6s,transform .8s var(--ease)}
.drawer.on .dr-w span{transform:none}
.drawer.on .dr-nav em{opacity:1;transform:none}
.drawer.on .dr-nav a:nth-child(1) .dr-w span{transition-delay:.3s}.drawer.on .dr-nav a:nth-child(2) .dr-w span{transition-delay:.37s}.drawer.on .dr-nav a:nth-child(3) .dr-w span{transition-delay:.44s}.drawer.on .dr-nav a:nth-child(4) .dr-w span{transition-delay:.51s}
.drawer.on .dr-nav a:nth-child(n) em{transition-delay:.7s}
.dr-side{display:flex;flex-direction:column;gap:2px;opacity:0;transform:translateY(20px);transition:opacity .8s .5s,transform 1s var(--ease) .5s}
.drawer.on .dr-side{opacity:1;transform:none}
.dr-pv{position:relative;aspect-ratio:4/3;margin-bottom:30px;perspective:1200px}
.dr-card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:22px;border-radius:14px;background:#F3EDE2;color:#151513;box-shadow:0 40px 70px -30px rgba(0,0,0,.8);transform:rotateX(18deg) rotateZ(-4deg) translateY(30px) scale(.94);opacity:0;transition:transform .8s var(--ease),opacity .5s}
.dr-card.c-work{background:linear-gradient(135deg,#1E1640,#2A1D5C);color:#EDEAF7}
.dr-card.c-studio{background:#27402F;color:#F0EADC}
.dr-card.c-story{background:#F3EDE2}
.dr-card.c-contact{background:#C39A4E}
.dr-card.on{transform:rotateX(0) rotateZ(-1.5deg) translateY(0) scale(1);opacity:1}
.dr-k{margin:0 0 10px;font:400 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(240,234,220,.45)}
.dr-side>a{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(240,234,220,.1);font-size:16px}
.dr-f{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:22px;font:400 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(240,234,220,.6)}
.dr-ig{display:flex;gap:18px}
@media (max-width:900px){.dr-g{grid-template-columns:1fr;align-content:center}.dr-pv{display:none}.dr-side{margin-top:10px}.dr-nav em{display:none}.dr-t{display:none}}
body.menu-on .nav{color:var(--cream)}
body.menu-on .nav::before{opacity:0}
body.menu-on .menu{background:var(--cream);color:#151513}
body.menu-on .bm-f{stroke:var(--night)}
/* ---------------- hero: the ground line, and what grows from it ---------------- */
.gline{position:relative;height:1px;margin-top:clamp(10px,1.4vw,20px);max-width:min(100%,640px)}
.gline>i{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--ink) 0 70%,transparent);opacity:.35;transform-origin:0 50%}
.gsprout{position:absolute;bottom:0;width:clamp(34px,3.6vw,56px);height:auto;overflow:visible;left:var(--sx,60%)}
.gsprout{--pi:#22342A;--pw:#A7C38C;--pe:#DDAE4F}
:root[data-theme="dark"] .gsprout{--pi:#E4DDCB;--pw:#4F7457;--pe:#DDB463}
.gs-st{fill:none;stroke:#7FA56C;stroke-width:2.2;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:1}
.gs-l1 path,.gs-l2 path{fill:var(--pw);stroke:var(--pi);stroke-width:.5;stroke-linejoin:round}
.gs-l1 .gs-m,.gs-l2 .gs-m{fill:none;stroke-width:.35;opacity:.5}
.gs-b path{fill:var(--pe);stroke:var(--pi);stroke-width:.45}
.gs-b .gs-aw{fill:none;stroke-width:.4}
@media (max-width:900px){.gline{display:none}}
/* ---------------- the product sheets: paper, not cards ---------------- */
.panel{transition:translate .8s var(--ease),box-shadow .8s var(--ease);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 50px 90px -50px rgba(0,0,0,.9)}
.pn-edge{position:absolute;inset:10px;z-index:4;border-radius:calc(var(--r) - 6px);border:1px dashed color-mix(in srgb,currentColor 18%,transparent);pointer-events:none;transition:inset .8s var(--ease),border-color .6s}
.p-sd .pn-edge{display:none}
.pn-fold{position:absolute;right:0;top:0;z-index:4;width:34px;height:34px;pointer-events:none;background:linear-gradient(225deg,transparent 50%,rgba(0,0,0,.18) 50%,rgba(255,255,255,.14) 62%,rgba(0,0,0,.08));border-bottom-left-radius:8px;transition:width .7s var(--ease),height .7s var(--ease)}
.p-sd .pn-fold{background:linear-gradient(225deg,var(--night) 50%,rgba(0,0,0,.16) 50%,#F8F0E2 62%,#E6D6BE)}
.pn-meta{position:absolute;right:clamp(18px,2vw,30px);bottom:clamp(16px,1.8vw,26px);z-index:4;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:70%;pointer-events:none}
.pn-meta>*{padding:6px 9px 5px;border-radius:999px;background:rgba(10,10,10,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#F0EADC;font:400 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .7s var(--ease)}
.pn-meta b{font-weight:500;background:var(--gold);color:#151513}
@media (hover:hover) and (pointer:fine){
.panel:hover{translate:0 -10px;box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 70px 110px -50px rgba(0,0,0,.95)}
.panel:hover .pn-edge{inset:16px;border-color:color-mix(in srgb,currentColor 34%,transparent)}
.panel:hover .pn-fold{width:52px;height:52px}
.panel:hover .pn-meta>*{opacity:1;transform:none}
.panel:hover .pn-meta>:nth-child(2){transition-delay:.05s}.panel:hover .pn-meta>:nth-child(3){transition-delay:.1s}.panel:hover .pn-meta>:nth-child(4){transition-delay:.15s}
}
@media (min-width:981px){.hz-track{gap:clamp(-40px,-1.4vw,-12px)}.panel{margin-right:0}}
@media (max-width:980px){.pn-meta{display:none}.pn-fold{width:26px;height:26px}}
/* ---------------- Why "Arvelic"? — grow the word ---------------- */
.morph{margin-top:24px}
.mo-k,.mo-say{position:relative;margin:0;height:1.3em;font:400 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.mo-say{height:1.4em;margin-top:10px;font-size:12px;letter-spacing:.02em;text-transform:none}.mo-say b{color:var(--ink);font-weight:500}
.mo-k>span,.mo-say>span{position:absolute;left:0;top:0;transition:opacity .4s,transform .6s var(--ease)}
.mo-b{opacity:0;transform:translateY(8px)}
.morph.done .mo-a{opacity:0;transform:translateY(-8px)}.morph.done .mo-b{opacity:1;transform:none}
.mo-w{display:flex;align-items:flex-end;margin:16px 0 0;height:1.05em;font:300 clamp(64px,7vw,120px)/1 var(--sans);font-stretch:112%;letter-spacing:-.05em;overflow:hidden;padding-bottom:.06em}
.mo-c{display:inline-block;position:relative}
.mo-A{width:.56em}.mo-A i{position:absolute;left:0;bottom:0;font-style:normal;white-space:nowrap}
.mo-A i:last-child{opacity:0}
.morph.done .mo-A i:first-child{opacity:0}.morph.done .mo-A i:last-child{opacity:1}
.mo-slot{position:relative;display:inline-block;width:var(--sw,1.2em);height:1em}
.mo-old,.mo-new{position:absolute;left:0;bottom:0;display:flex;white-space:nowrap}
.mo-old i,.mo-new i{display:inline-block;font-style:normal}
.mo-new i{color:var(--moss)}
:root[data-theme="dark"] .mo-new i{color:var(--gold-2)}
.mo-track{position:relative;height:44px;margin-top:22px;touch-action:none}
.mo-g{position:absolute;left:0;right:0;top:21px;height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 10px)}
.mo-fill{position:absolute;left:0;top:21px;height:2px;width:calc(var(--p,0) * 100%);border-radius:2px;background:linear-gradient(90deg,#8A6A3A,var(--gold))}
.mo-h{position:absolute;top:4px;left:calc(var(--p,0) * (100% - 36px));width:36px;height:36px;border-radius:50%;background:var(--ink);box-shadow:0 6px 16px -6px rgba(0,0,0,.5);display:grid;place-items:center;touch-action:none}
.mo-h span{width:10px;height:10px;border-radius:50%;background:var(--gold);transition:transform .4s var(--ease)}
.mo-h:hover span,.mo-h:focus-visible span{transform:scale(1.4)}
.mo-hint{display:flex;justify-content:space-between;align-items:center;margin:8px 0 0;font:400 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.mo-hint em{font:italic 400 13px/1 var(--serif);letter-spacing:0;text-transform:none}
/* ---------------- Idea → Experiment → Product → Growth ---------------- */
.growth{display:none}
.path{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);align-items:start;margin-top:clamp(100px,12vw,180px)}
.pa-stage{position:sticky;top:clamp(90px,14vh,130px);aspect-ratio:4/3;border-radius:22px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line),0 50px 90px -60px rgba(21,21,19,.5);overflow:hidden}
.pa-svg{position:absolute;inset:0;width:100%;height:100%}
.pa-now{position:absolute;left:20px;bottom:18px;margin:0;font:400 11px/1 var(--mono);letter-spacing:.08em;color:var(--ink-3)}.pa-now b{font-weight:500;color:var(--ink)}
.pa-h{margin:22px 0 0;font:300 clamp(38px,4.4vw,72px)/.98 var(--sans);font-stretch:var(--wide);letter-spacing:-.045em}
.pa-steps{list-style:none;margin:clamp(40px,5vw,70px) 0 0;padding:0}
.pa-s{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:clamp(34px,6vh,70px) 0;border-top:1px solid var(--line);opacity:.35;transition:opacity .6s}
.pa-s.on{opacity:1}
.pa-n{font:400 11px/1 var(--mono);letter-spacing:.08em;color:var(--ink-3);padding-top:10px}
.pa-s h4{margin:0;font:300 clamp(30px,3vw,48px)/1 var(--sans);font-stretch:var(--wide);letter-spacing:-.04em}
.pa-s p{margin:12px 0 14px;max-width:40ch;color:var(--ink-2);font-size:16.5px}
.pa-s a{font:400 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--line-2);padding-bottom:3px}
@media (max-width:900px){
.path{grid-template-columns:1fr;gap:0}
.pa-stage{top:70px;z-index:2;aspect-ratio:16/10}
.pa-t{padding-top:30px}
.pa-s{padding:44px 0}
}
/* ---------------- footer: grass that leans toward you ---------------- */
.grass{position:absolute;left:0;right:0;bottom:0;height:70px;pointer-events:none;overflow:hidden;z-index:1}
.foot .wrap{position:relative;z-index:2}
.grass i{position:absolute;bottom:-2px;width:2px;height:var(--h);border-radius:2px 2px 0 0;background:linear-gradient(#5E9A6E,#2A4A35);transform-origin:50% 100%;transform:rotate(calc(var(--r) * 1deg + var(--on,0) * clamp(-24deg,(var(--px,50) - var(--bx)) * .9deg,24deg)));transition:transform 1.1s cubic-bezier(.2,1.5,.4,1)}
@media (hover:none){.grass i{transform:none;rotate:calc(var(--r) * 1deg)}.grass.live i{animation:blade 4.5s ease-in-out infinite alternate}.grass.live i:nth-child(3n){animation-delay:-1.5s}.grass.live i:nth-child(3n+1){animation-delay:-3s}}
@keyframes blade{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.ft-word .fb{transition:transform .9s var(--ease)}
@media (hover:hover){.ft-word:hover .fb:nth-child(odd){transform:translateX(18px)}.ft-word:hover .fb:nth-child(even){transform:translateX(-18px)}}
.ft-word .fs,.ft-word .fd{cursor:pointer;pointer-events:auto}
.ft-word svg{pointer-events:none}
.fgarden{position:absolute;left:0;right:0;top:0;height:0;z-index:4;pointer-events:none}
/* reduced motion: the world stands still and complete */
@media (prefers-reduced-motion:reduce){
.ld-t .lt{transform:none}.dr-w span{transform:none}.gs-st{stroke-dashoffset:0}.gs-l1,.gs-l2,.gs-b{transform:none}
.pa-s{opacity:1}
}
.bed{position:fixed;left:0;right:0;bottom:0;height:0;z-index:230;pointer-events:none;transition:opacity .8s}
.bed.out{opacity:0}
.paper-gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-g{position:relative;z-index:1}
html.js:not(.calm) .gsprout,html.js:not(.calm) .pa-gate{visibility:hidden}
html.js:not(.calm) .gsprout.ok,html.js:not(.calm) .pa-gate.ok{visibility:visible}
/* ================= v20 — the plate: a botanical study of an idea ================= */
.pa-stage{--pi:#22342A;--pw:#A7C38C;--pw2:#7FA56C;--ps1:#E9DCC3;--ps2:#E0CFAF;--ps3:#D6C29D;--pd:#6E5230;--pr:#8A6A3A;--pg:#B9CB8C;--pe:#DDAE4F;--pf:#BF9448;--pgr:#D9B77A}
:root[data-theme="dark"] .pa-stage{--pi:#E4DDCB;--pw:#4F7457;--pw2:#6C9A74;--ps1:#2B251D;--ps2:#251F18;--ps3:#1F1A14;--pd:#A08560;--pr:#B28C58;--pg:#6F8D57;--pe:#DDB463;--pf:#9C7F48;--pgr:#C9A56A}
.pa-grid path{stroke:var(--pi);stroke-width:.35;opacity:.07}
.pa-sun .bt-s0{fill:var(--pe);opacity:.16}
.pa-sun .bt-s1{fill:none;stroke:var(--pe);stroke-width:.5;stroke-dasharray:1.2 2.2;opacity:.7}
.pa-sun .bt-s2 path{stroke:var(--pe);stroke-width:.6;stroke-linecap:round;opacity:.6}
.pf .pfl{fill:none;stroke:var(--pf);stroke-width:.8;stroke-linecap:round}
.pf .pfn{stroke-width:.45}
.pf .pfe{fill:var(--pf)}
.pf.r0{opacity:.4}.pf.r1{opacity:.62}.pf.r2{opacity:.85}
.pa-soil .bt-b1{fill:var(--ps1)}.pa-soil .bt-b2{fill:var(--ps2)}.pa-soil .bt-b3{fill:var(--ps3)}
.pa-soil .bt-st path{fill:none;stroke:var(--pd);stroke-linecap:round}
.pa-soil .bt-st .bt-d0{stroke-width:.7;opacity:.35}.pa-soil .bt-st .bt-d1{stroke-width:1.1;opacity:.3}.pa-soil .bt-st .bt-d2{stroke-width:1.6;opacity:.22}
.pa-soil .bt-ht{fill:none;stroke:var(--pd);stroke-width:.4;opacity:.35;stroke-linecap:round}
.pa-soil .bt-sn ellipse{fill:var(--ps1);stroke:var(--pd);stroke-width:.5;opacity:.8}
.pa-soil .bt-rd{fill:none;stroke:var(--pi);stroke-width:.8;stroke-linejoin:round;opacity:.75}
.pa-roots path{fill:none;stroke:var(--pr);stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:1}
.pa-roots .bt-rm{stroke-width:1.1}.pa-roots .bt-rl{stroke-width:.55;opacity:.85}
.pa-halo{fill:none;stroke:var(--pe);stroke-width:.6;stroke-dasharray:1 2.4}
.pa-idea .bt-fr{fill:none;stroke:var(--pi);stroke-width:.6;opacity:.55}
.bt-gr{fill:var(--pgr);stroke:var(--pi);stroke-width:.6;stroke-linejoin:round}
.bt-gc{fill:none;stroke:var(--pi);stroke-width:.45;opacity:.7}
.pa-puff circle{fill:var(--pd);opacity:0}
.pa-cole{fill:var(--pw);stroke:var(--pi);stroke-width:.5}
.pa-stem{fill:none;stroke:var(--pw2);stroke-width:2.6;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:1}
.pa-stem2{fill:none;stroke:var(--pi);stroke-width:.6;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:1;opacity:.8}
.pa-nodes path{stroke:var(--pi);stroke-width:1;stroke-linecap:round}
.pa-lf .bt-lb{fill:var(--pw);stroke:var(--pi);stroke-width:.55;stroke-linejoin:round}
.pa-lf .bt-lm{fill:none;stroke:var(--pi);stroke-width:.4;opacity:.45}
.pa-rach{fill:none;stroke:var(--pi);stroke-width:.9;stroke-dasharray:1;stroke-dashoffset:1}
.pa-sp .bt-g{fill:var(--pg);stroke:var(--pi);stroke-width:.5;stroke-linejoin:round}
.pa-sp .bt-y{fill:var(--pe);stroke:var(--pi);stroke-width:.5;opacity:0}
.pa-sp .bt-sl{stroke:var(--pi);stroke-width:.35;opacity:.55}
.pa-awns path{fill:none;stroke:var(--pi);stroke-width:.45;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:1;opacity:.85}
.pa-rule path{fill:none;stroke:var(--pi);stroke-width:.5;opacity:.5}
.pa-rule text,.pa-an .bt-t1,.pa-hd .bt-t1,.pa-mk text{font:400 5.4px var(--mono);letter-spacing:.08em;text-transform:uppercase;fill:var(--pi)}
.pa-rule text{opacity:.5}
.pa-mk .mkl{stroke:var(--pe);stroke-width:.5;stroke-dasharray:2 2.5;opacity:.8}
.pa-mk .mkt{fill:var(--pe)}
.pa-mk text{font-size:5.8px;fill:var(--pi);font-weight:500}
.pa-an circle{fill:var(--pe);stroke:var(--pi);stroke-width:.4}
.pa-an path{fill:none;stroke:var(--pi);stroke-width:.45;opacity:.6}
.pa-an .bt-t2,.pa-hd .bt-t2{font:italic 400 8px var(--serif);fill:var(--pi);opacity:.75}
.pa-hd .bt-t1{opacity:.55}
.pa-now span{margin-left:10px;color:var(--ink-2);font-style:normal}
.pa-now span::before{content:"·";margin-right:10px;color:var(--ink-3)}
@media (max-width:900px){
.pa-stage{aspect-ratio:4/3}
.pa-an .bt-t2,.pa-hd .bt-t2{font-size:10px}
.pa-an .bt-t1,.pa-rule text,.pa-hd .bt-t1,.pa-mk text{font-size:7px}
.pa-rule text{display:none}
}
/* ---------------- v20 — menu preview sheets, with something on them ---------------- */
.dr-pv{container-type:inline-size}
.dr-card{justify-content:flex-start;gap:2.2cqw;padding:4.4cqw;overflow:hidden}
.dr-card p{margin:0}
.dc-h{display:flex;justify-content:space-between;gap:10px;padding-bottom:2.2cqw;border-bottom:1px solid;border-color:color-mix(in srgb,currentColor 22%,transparent);font:400 max(8.5px,1.45cqw)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.dc-h span:first-child{opacity:.9}.dc-h span:last-child{opacity:.5}
.dc-b{margin-top:auto!important;font:300 5.2cqw/1 var(--sans);font-stretch:112%;letter-spacing:-.035em}
.dc-b em{font:italic 400 1.02em/1 var(--serif);letter-spacing:-.01em}
.dc-f{display:flex;justify-content:space-between;gap:10px;font:400 max(8px,1.3cqw)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.5}
.dr-card .dc-h,.dr-card .dc-b,.dr-card .dc-f{opacity:0;transform:translateY(8px);transition:opacity .6s,transform .9s var(--ease)}
.dr-card .dc-f{transition-delay:0s}
.dr-card.on .dc-h{opacity:1;transform:none;transition-delay:.1s}
.dr-card.on .dc-b{opacity:1;transform:none;transition-delay:.3s}
.dr-card.on .dc-f{opacity:.5;transform:none;transition-delay:.4s}
.dr-card svg{fill:none;stroke:currentColor;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease-2)}
.dr-card.on svg{stroke-dashoffset:0;transition-delay:.25s}
/* work: three product sheets, fanned */
.dc-fan{position:relative;flex:1;min-height:0;display:flex;justify-content:center;align-items:center;gap:0}
.dc-s{position:relative;flex:none;width:27cqw;height:92%;margin:0 -1cqw;display:flex;flex-direction:column;gap:.8cqw;padding:1.9cqw;border-radius:1.3cqw;box-shadow:0 2.4cqw 4cqw -1.4cqw rgba(0,0,0,.55);opacity:0;transform:translateY(14%) rotate(0);transition:transform 1s var(--ease),opacity .5s}
.dc-s em{font:400 max(7.5px,1.2cqw)/1 var(--mono);font-style:normal;letter-spacing:.1em;opacity:.55}
.dc-s i{flex:1;min-height:0;display:block;margin:.6cqw 0}
.dc-s b{font:400 2.5cqw/1 var(--sans);font-stretch:112%;letter-spacing:-.02em}
.dc-s small{font:italic 400 1.75cqw/1.1 var(--serif);opacity:.7}
.s-bb{background:#0B0A11;color:#ECEAF4;z-index:1}
.s-sd{background:#EEE3D1;color:#2B1F17;z-index:2}
.s-gl{background:#0A0A0A;color:#E6E9E7;z-index:3}
.dr-card.on .s-bb{opacity:1;transform:rotate(-5deg) translateY(2%);transition-delay:.15s}
.dr-card.on .s-sd{opacity:1;transform:rotate(1deg) translateY(-3%);transition-delay:.22s}
.dr-card.on .s-gl{opacity:1;transform:rotate(6deg) translateY(3%);transition-delay:.29s}
.bb-g{display:grid!important;grid-template-columns:repeat(4,1fr);gap:.7cqw;align-content:center}
.bb-g u{display:block;aspect-ratio:1;border-radius:.5cqw;box-shadow:inset 0 0 0 1px rgba(236,234,244,.22)}
.bb-g u.f{background:#8C7CF0;box-shadow:none}
.sd-e{display:flex!important;align-items:center;justify-content:center}
.sd-e svg{width:86%;stroke:#2B1F17;stroke-width:.9}
.sd-e svg circle{fill:#B8674A;stroke:#8E4A33}
.gl-d{background:radial-gradient(circle,#E6E9E7 0 36%,transparent 42%) 0 0/1.15cqw 1.15cqw;-webkit-mask:radial-gradient(circle at 42% 45%,#000 0 18%,rgba(0,0,0,.35) 42%,transparent 62%);mask:radial-gradient(circle at 42% 45%,#000 0 18%,rgba(0,0,0,.35) 42%,transparent 62%)}
/* studio: the four promises */
.dc-ls{flex:1;min-height:0;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2.2cqw 3.4cqw;align-content:center}
.dc-ls li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:1.8cqw;align-items:center;padding-top:1.8cqw;border-top:1px solid rgba(240,234,220,.18);font:300 3.1cqw/1.05 var(--sans);font-stretch:108%;letter-spacing:-.02em;opacity:0;transform:translateY(10px);transition:opacity .6s,transform .9s var(--ease)}
.dc-ls svg{grid-row:1/3;width:8cqw;height:8cqw;stroke-width:3.4;color:#C9DDB0}
.dc-ls i{font:400 max(7.5px,1.2cqw)/1 var(--mono);font-style:normal;letter-spacing:.1em;opacity:.5;margin-bottom:.6cqw;align-self:end}
.dr-card.on .dc-ls li{opacity:1;transform:none}
.dr-card.on .dc-ls li:nth-child(1){transition-delay:.18s}.dr-card.on .dc-ls li:nth-child(2){transition-delay:.25s}.dr-card.on .dc-ls li:nth-child(3){transition-delay:.32s}.dr-card.on .dc-ls li:nth-child(4){transition-delay:.39s}
/* the name: a dictionary entry on a ploughed field */
.dc-dict{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:1.6cqw}
.dc-w{display:flex;align-items:baseline;gap:2.2cqw;font:300 10.4cqw/1 var(--sans);font-stretch:112%;letter-spacing:-.05em}
.dc-w s{text-decoration:none;opacity:.4}
.dc-w s b{font-weight:300;text-decoration:line-through;text-decoration-thickness:1px}
.dc-w i{font-style:normal;font-size:.5em;color:#C39A4E}
.dc-w span b{font:italic 400 1.04em/1 var(--serif);letter-spacing:-.02em;color:#27402F}
.dc-say{font:400 max(8px,1.35cqw)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.dc-say em{font:italic 400 1.7cqw/1 var(--serif);text-transform:none;letter-spacing:0}
.dc-def{max-width:50ch;font:400 max(11px,2.15cqw)/1.45 var(--sans);opacity:.75}
.dc-def b{font-weight:500}
.dc-fu{width:100%;height:7cqw;stroke:#8A6A3A!important;stroke-width:1.2;opacity:.45}
.dr-card .dc-dict>*{opacity:0;transform:translateY(10px);transition:opacity .6s,transform .9s var(--ease)}
.dr-card.on .dc-dict>*{opacity:1;transform:none}
.dr-card.on .dc-dict>:nth-child(1){transition-delay:.15s}.dr-card.on .dc-dict>:nth-child(2){transition-delay:.25s}.dr-card.on .dc-dict>:nth-child(3){transition-delay:.32s}
.dr-card.on .dc-say{opacity:.6}.dr-card.on .dc-def{opacity:.75}
/* contact: a postcard, stamped */
.dc-post{flex:1;min-height:0;position:relative;display:grid;grid-template-columns:1fr auto;gap:3cqw;align-items:start;padding:2.4cqw 0 0}
.dc-msg p{font:italic 400 4.9cqw/1.05 var(--serif);letter-spacing:-.01em;max-width:13ch;margin-bottom:2.6cqw}
.dc-msg p em{font-style:normal;font-family:var(--sans);font-weight:300;font-stretch:112%;letter-spacing:-.04em}
.dc-ad{position:relative;display:block;max-width:80%;margin-top:1.1cqw;padding:0 0 .9cqw 7cqw;font:italic 400 2.6cqw/1.2 var(--serif);opacity:0;transition:opacity .6s}
.dc-ad small{position:absolute;left:0;bottom:1.1cqw;font:400 max(7px,1.1cqw)/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.dc-ad .dc-time{font:inherit}
.dc-ad::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.35;transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--ease)}
.dr-card.on .dc-ad{opacity:1}.dr-card.on .dc-ad::after{transform:none}
.dr-card.on .dc-ad:nth-of-type(1),.dr-card.on .dc-ad:nth-of-type(1)::after{transition-delay:.3s}
.dr-card.on .dc-ad:nth-of-type(2),.dr-card.on .dc-ad:nth-of-type(2)::after{transition-delay:.4s}
.dr-card.on .dc-ad:nth-of-type(3),.dr-card.on .dc-ad:nth-of-type(3)::after{transition-delay:.5s}
.dc-stamp{width:12cqw;height:14.5cqw;display:flex;align-items:center;justify-content:center;background:#F3EDE2;color:#27402F;outline:1px dashed rgba(21,21,19,.45);outline-offset:-0.8cqw;box-shadow:0 1cqw 2cqw -1cqw rgba(0,0,0,.4);transform:rotate(3deg)}
.dc-stamp svg{width:62%;stroke-width:2.6}
.dc-pm{position:absolute;right:8cqw;top:10.5cqw;width:13cqw;height:13cqw;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5cqw;border:1px solid rgba(21,21,19,.6);box-shadow:inset 0 0 0 .6cqw #C39A4E,inset 0 0 0 calc(.6cqw + 1px) rgba(21,21,19,.45);color:rgba(21,21,19,.72);font:400 max(6.5px,1.05cqw)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:rotate(-14deg) scale(1.5);transition:opacity .25s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.dc-pm b{font:400 2.2cqw/1 var(--sans);font-stretch:112%;letter-spacing:-.02em;text-transform:none}
.dr-card.on .dc-pm{opacity:1;transform:rotate(-14deg) scale(1);transition-delay:.55s}
@media (prefers-reduced-motion:reduce){.dr-card *{transition:none!important}.dr-card svg{stroke-dashoffset:0}}
@media (max-width:600px){.pa-hd .bt-t1{display:none}}
/* ================= v21 — the pile (phones), and lighter layers everywhere ================= */
@media (max-width:980px){
/* sheets cast their shadow up onto the one they cover */
.panel{transition:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 -26px 50px -30px rgba(0,0,0,.8)}
.pn-shade{background:linear-gradient(180deg,#050605 0,#0B0C0A 60%,#050605)}
.pn-edge{transition:none}
}
/* frosted glass costs a phone a full re-blur of everything that scrolls under it, every frame */
@media (hover:none){
.nav::before{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--paper) 96%,transparent)}
.co{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--paper-2) 95%,transparent)}
}
/* animations off-screen are paused, so the page is still when you are elsewhere */
.anim-off,.anim-off *,.anim-off *::before,.anim-off *::after{animation-play-state:paused!important}
.drawer:not(.on) *,.drawer:not(.on) *::before{animation-play-state:paused!important}
/* v22: the Now strip follows the work now */
.work+.now{margin-top:clamp(56px,7vw,100px)}
/* ================= v22 — the flight: hero sheets become the work ================= */
.dio-ln,.dio-cap{transition:opacity .45s var(--ease)}
.dio.flying .pl-1,.dio.flying .pl-2,.dio.flying .pl-3{visibility:hidden}
.dio.flying .co,.dio.flying .dio-ln,.dio.flying .dio-cap{opacity:0!important}
.flight{position:fixed;inset:0;z-index:45;pointer-events:none;visibility:hidden;overflow:hidden}
.flight.on{visibility:visible}
.fly{position:absolute;left:0;top:0;transform-origin:0 0;transform-style:preserve-3d;will-change:transform}
.fly .fly-f,.fly .fly-b{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.fly .fly-f{position:absolute;left:0;top:0;inset:auto;transform-origin:0 0;cursor:auto;box-shadow:inset 0 0 0 1px rgba(21,21,19,.16),0 30px 60px -30px rgba(21,21,19,.45)}
.fly .fly-b{position:absolute!important;left:0;top:0;width:100%;height:100%;margin:0;transform:rotateY(180deg)}
html.fly-on #p-backbench .pn-vis .tilt,html.fly-on #p-sundry .pn-vis .tilt,html.fly-on #p-glchlab .pn-vis .tilt{visibility:hidden}
.fly .fly-f{background-color:rgba(251,249,244,.97)}
/* ================= v22 — phones: one sheet, one screen, read before the next ================= */
.pn-cs{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding-bottom:4px;font:500 14px/1 var(--sans);border-bottom:1px solid color-mix(in srgb,currentColor 35%,transparent);transition:border-color .4s}
.pn-cs i{font-style:normal;transition:transform .5s var(--ease)}
.pn-cs:hover{border-color:currentColor}.pn-cs:hover i{transform:translateX(4px)}
.pn-rail{display:none}
@media (max-width:980px){
.hz-track{gap:0;padding-bottom:14px}
.panel:nth-child(1){top:10px}.panel:nth-child(2){top:17px}.panel:nth-child(3){top:24px}.panel:nth-child(4){top:31px}
.p-bb,.p-sd,.p-gl{display:flex;flex-direction:column;height:calc(100svh - 24px - var(--k,0) * 7px);margin-bottom:62svh}
.p-bb{--k:0}.p-sd{--k:1}.p-gl{--k:2}
.p-bb .pn-vis,.p-sd .pn-vis,.p-gl .pn-vis{flex:none}
.p-bb .pn-txt,.p-sd .pn-txt,.p-gl .pn-txt{flex:1;min-height:0;padding:18px 22px 50px;gap:11px}
.deck .pn-list{display:block;margin:2px 0 0}
.deck .pn-list li{padding:9px 0;font-size:13.5px}
.deck .pn-acts{margin-top:auto}
.p-next{margin-top:14px;min-height:calc(60svh)}
/* the words arrive in reading order */
html.js .deck .pn-txt>*{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform 1s var(--ease)}
/* once the sheet has landed, the words not yet read are already there, faint, like pencil */
html.js .deck .pn-txt.in>*{opacity:.13;transform:translateY(8px)}
html.js .deck .pn-txt.in>.pn-top,html.js .deck .pn-txt.in>.pn-name,html.js .deck .pn-txt.in>.pn-say{opacity:1;transform:none}
html.js .deck .pn-txt.in>.pn-name{transition-delay:.06s}html.js .deck .pn-txt.in>.pn-say{transition-delay:.14s}
html.js .deck .pn-txt.r1>.pn-d{opacity:.72;transform:none}
html.js .deck .pn-txt.r2>.pn-list{opacity:1;transform:none}
html.js .deck .pn-list li{opacity:.5;transform:translateX(-6px);transition:opacity .6s,transform .8s var(--ease)}
html.js .deck .pn-txt.r2 .pn-list li{opacity:1;transform:none}
html.js .deck .pn-txt.r2 .pn-list li:nth-child(2){transition-delay:.08s}html.js .deck .pn-txt.r2 .pn-list li:nth-child(3){transition-delay:.16s}html.js .deck .pn-txt.r2 .pn-list li:nth-child(4){transition-delay:.24s}
html.js .deck .pn-txt.r3>.pn-acts,html.js .deck .pn-txt.r3>.pn-cs{opacity:1;transform:none}
html.js .deck .pn-txt.r3>.pn-cs{transition-delay:.1s}
html.js .deck .pn-txt>.pn-rail{opacity:1;transform:none}
/* a hairline: how much of this sheet is left to read */
.deck .pn-rail{display:flex;align-items:center;gap:10px;position:absolute;left:22px;right:22px;bottom:16px;background:linear-gradient(color-mix(in srgb,currentColor 28%,transparent),color-mix(in srgb,currentColor 28%,transparent)) 0 50%/calc(100% - 8.2em) 1px no-repeat;font:400 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.55}
.deck .pn-rail i{flex:1;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.deck .pn-txt.r3 .pn-rail span{opacity:.9}
}
/* ================= v22 — case studies: /work// ================= */
.cs main{overflow-x:clip}
/* the opening: a sheet of tracing paper lies over the product; scroll turns it */
.cs-pin{position:relative;height:240svh;z-index:2}
.cs-pin.p-sd::before{display:none}
.cs-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.cs-pin.p-sd .cs-sticky::before{content:"";position:absolute;inset:12px;border-radius:18px;pointer-events:none;border:9px solid transparent;border-image:repeating-linear-gradient(45deg,#B8322B 0 14px,transparent 14px 24px,#23457E 24px 38px,transparent 38px 48px) 9;opacity:.85}
.cs-hero{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.4fr);gap:clamp(30px,5vw,90px);align-items:center;width:100%;padding-top:64px}
.cs-back{display:inline-flex;align-items:center;gap:10px;margin-bottom:34px;font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.7;transition:opacity .4s}
.cs-back i{font-style:normal;transition:transform .5s var(--ease)}
.cs-back:hover{opacity:1}.cs-back:hover i{transform:translateX(-4px)}
.cs-pin .eyebrow{color:inherit;opacity:.65}.cs-pin .eyebrow b{color:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 35%,transparent)}
.cs-ht{container-type:inline-size;min-width:0}
.cs-h{margin:20px 0 0;font:300 min(17cqi,148px)/.9 var(--sans);font-stretch:var(--wide);letter-spacing:-.05em}
.cs-h.mono{font-weight:500;letter-spacing:-.075em}.cs-h span{color:#3BE38A}
.cs-say{margin:16px 0 0;font:italic 400 clamp(21px,2vw,31px)/1.2 var(--serif)}
.p-bb .cs-say{color:#C9B8FF}.p-sd .cs-say{color:#9E2A24}.p-gl .cs-say{color:#7CF2B0}
.cs-meta{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;margin:38px 0 0;max-width:470px}
.cs-meta div{padding-top:12px;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.cs-meta dt{font:400 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.55}
.cs-meta dd{margin:7px 0 0;font-size:15px}
.cs-stage{position:relative;margin:0}
.cs-win .win{box-shadow:0 60px 120px -50px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
.p-sd .cs-win .win{box-shadow:0 50px 100px -50px rgba(60,40,20,.55),0 0 0 1px rgba(46,33,24,.12)}
.cs-glc{position:absolute;left:-14%;top:-18%;width:128%;max-width:none;height:136%;pointer-events:none;z-index:3}
.cs-paper{position:absolute;inset:0;z-index:2;border-radius:12px;background:#FBF8F1;background-image:linear-gradient(rgba(21,21,19,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(21,21,19,.045) 1px,transparent 1px);background-size:5% 7.14%;box-shadow:0 40px 80px -40px rgba(0,0,0,.6);color:#151513;transform-origin:100% 100%}
.cs-paper svg{position:absolute;inset:6% 8% 12%;width:84%;height:82%;fill:none;stroke:#151513;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.cs-paper .rg{stroke:rgba(21,21,19,.45)}
.p-bb .cs-paper .ln{stroke:#5B3FE0}.p-bb .cs-paper rect.f{fill:rgba(124,92,255,.2)}.p-bb .cs-paper .tr{stroke:rgba(91,63,224,.18);stroke-width:6}.p-bb .cs-paper .arc{stroke:#5B3FE0;stroke-width:6;stroke-dasharray:.72 1;transform:rotate(-90deg);transform-origin:318px 112px}
.p-sd .cs-paper .ln{stroke:#3A2A1E}.p-sd .cs-paper .am1{stroke:#B8322B;stroke-width:5;stroke-dasharray:14 10}.p-sd .cs-paper .am2{stroke:#23457E;stroke-width:5;stroke-dasharray:14 10;stroke-dashoffset:12}.p-sd .cs-paper .seal{fill:#A8322B;stroke:none}.p-sd .cs-paper .heart{fill:#F7EFE2;stroke:none}.p-sd .cs-paper .stp{stroke-dasharray:2 3}
.p-gl .cs-paper .ln{stroke:#20352A}.p-gl .cs-paper .dt{fill:#1E9E5A;stroke:none}
.cs-pl-t{position:absolute;left:5%;bottom:6%;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.cs-stage.gl-on .cs-paper{visibility:hidden}
.cs-cap{position:relative;display:flex;align-items:center;gap:14px;margin-top:22px;min-height:14px;font:400 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.cs-cap span{transition:opacity .6s var(--ease),transform .8s var(--ease)}
.cs-cap .c1{position:absolute;left:0;top:0;opacity:0;transform:translateY(8px)}
.cs-stage.turned .cs-cap .c0{opacity:0;transform:translateY(-8px)}
.cs-stage.turned .cs-cap .c1{opacity:.8;transform:none}
.cs-hint{margin-left:auto;font-style:normal;opacity:.5;transition:opacity .5s}
.cs-stage.turned .cs-hint{opacity:0}
/* chapters */
.cs-body{display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(30px,6vw,110px);padding-top:clamp(100px,11vw,170px)}
.cs-idx{position:sticky;top:130px;align-self:start;display:grid;gap:2px}
.cs-idx a{position:relative;display:flex;gap:12px;align-items:baseline;padding:9px 0 9px 16px;font-size:14px;color:var(--ink-3);transition:color .4s}
.cs-idx a::before{content:"";position:absolute;left:0;top:50%;width:6px;height:1px;background:currentColor;transition:width .5s var(--ease)}
.cs-idx a i{font:400 10px/1 var(--mono);font-style:normal;letter-spacing:.06em}
.cs-idx a.on{color:var(--ink)}.cs-idx a.on::before{width:10px;background:var(--gold)}
.cs-ch{padding-bottom:clamp(110px,12vw,190px)}
.cs-q{margin:24px 0 0;max-width:19ch;font:300 clamp(34px,4.3vw,70px)/1.02 var(--sans);font-stretch:var(--wide);letter-spacing:-.04em}
.cs-q em{color:var(--moss)}
:root[data-theme="dark"] .cs-q em{color:var(--gold-2)}
.cs-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,52px);max-width:900px;margin-top:40px;color:var(--ink-2);font-size:17px;line-height:1.62}
.cs-cols p{margin:0}
/* the problem: things scattered across a desk, gathered into one */
.cs-scatter{position:relative;height:clamp(380px,40vw,540px);margin-top:64px;border-radius:24px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;background-position:-1px -1px}
.cs-scatter ul{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.cs-bit{position:absolute;left:50%;top:44%;will-change:transform}
.cs-bit span{display:block;transform:translate(-50%,-50%);padding:14px 20px 13px;border-radius:8px;background:#FFFDF8;color:#151513;box-shadow:0 1px 0 rgba(21,21,19,.06),0 18px 36px -18px rgba(21,21,19,.4),inset 0 0 0 1px rgba(21,21,19,.08);font:400 clamp(15px,1.4vw,19px)/1 var(--sans);white-space:nowrap}
.cs-bit span::before{content:"";display:inline-block;width:6px;height:6px;margin:0 10px 2px 0;border-radius:50%;background:var(--gold)}
.cs-bb .cs-bit span::before{background:#7C5CFF}.cs-sd .cs-bit span::before{background:#B8322B}.cs-gl .cs-bit span::before{background:#1E9E5A}
.cs-into{position:absolute;left:0;right:0;bottom:30px;margin:0;text-align:center;font:italic 400 clamp(24px,2.4vw,36px)/1 var(--serif);opacity:0;transform:translateY(14px)}
/* the process: four sheets, dealt in order */
.cs-steps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);position:relative}
.cs-step{position:relative}
.cs-step-in{position:relative;height:100%;min-height:clamp(300px,26vw,380px);display:flex;flex-direction:column;padding:22px 20px 24px;border-radius:14px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -44px rgba(21,21,19,.5)}
.cs-step-in::after{content:"";position:absolute;inset:8px;border-radius:9px;border:1px dashed var(--line-2);pointer-events:none}
.cs-sn{font:400 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.cs-step svg{width:64px;height:64px;margin:28px 0 auto;fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.cs-step:nth-child(4) svg{stroke:var(--moss)}
:root[data-theme="dark"] .cs-step:nth-child(4) svg{stroke:var(--gold-2)}
.cs-step h3{margin:26px 0 0;font:300 clamp(22px,1.9vw,28px)/1.08 var(--sans);font-stretch:var(--wide);letter-spacing:-.03em}
.cs-step p{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
/* screens, up close */
.cs-shots{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px);margin-top:56px}
.cs-shot{margin:0}
.cs-zoom{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;box-shadow:0 40px 80px -50px rgba(21,21,19,.6),0 0 0 1px var(--line)}
.cs-zoom .app{transform-origin:0 0}
.z-bb{background:#0B0A11}.z-sd{background:#EEE3D1}.z-gl{background:#0A0A0A}
.cs-shot figcaption{display:grid;gap:6px;margin-top:16px}
.cs-shot figcaption b{font:400 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.cs-shot figcaption span{color:var(--ink-2);font-size:15px}
.cs-feats{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:40px 0 0;padding:0}
.cs-feats li{padding:11px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:14px}
/* where it is now */
.cs-path{position:relative;display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:56px 0 0;padding:0;max-width:880px}
.cs-path::before{content:"";position:absolute;left:6px;right:6px;top:6px;height:1px;background:var(--line-2)}
.cs-path li{position:relative;padding-top:28px;font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.cs-path li i{position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2)}
.cs-path li.done i{background:var(--ink-3);box-shadow:none}
.cs-path li.on{color:var(--ink)}
.cs-path li.on i{background:var(--gold);box-shadow:0 0 0 5px rgba(195,154,78,.22)}
.cs-path li.on i::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(195,154,78,.5);animation:ping 2.2s ease-out infinite}
.cs-nums{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:880px;margin-top:60px}
.cs-num{padding:24px 24px 0 0;border-top:1px solid var(--line-2)}
.cs-num+.cs-num{padding-left:24px;border-left:1px solid var(--line)}
.cs-num b{font:200 clamp(64px,8vw,130px)/.9 var(--sans);letter-spacing:-.05em;font-stretch:var(--wide)}
.cs-num em{font:300 clamp(40px,4vw,70px)/1 var(--sans);font-style:normal;color:var(--gold)}
.cs-num span{display:block;margin-top:14px;max-width:26ch;color:var(--ink-2);font-size:15px}
.cs-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:54px}
.cs-acts .btn i{font-style:normal}
/* the next sheet */
.cs-next{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px 30px;margin:clamp(40px,6vw,90px) var(--gut) 0;padding:clamp(28px,4vw,60px);border-radius:var(--r) var(--r) 0 0;overflow:hidden;min-height:clamp(360px,44vw,620px)}
.cs-next.p-sd::before{inset:12px}
.cs-next .eyebrow{grid-column:1/-1;align-self:start;color:inherit;opacity:.7}.cs-next .eyebrow b{color:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 35%,transparent)}
.cs-nx-n{grid-column:1;font:300 clamp(64px,11vw,190px)/.86 var(--sans);font-stretch:var(--wide);letter-spacing:-.055em;transition:letter-spacing .9s var(--ease)}
.cs-next:hover .cs-nx-n{letter-spacing:-.035em}
.cs-nx-s{grid-column:1;font:italic 400 clamp(19px,1.8vw,28px)/1.2 var(--serif);opacity:.85}
.cs-nx-p{position:absolute;right:clamp(28px,6vw,110px);top:50%;width:min(36vw,440px);aspect-ratio:400/280;transform:translateY(-58%) rotate(-7deg);border-radius:6px;background:rgba(251,249,244,.92);color:#151513;box-shadow:0 50px 90px -40px rgba(0,0,0,.6);transition:transform 1s var(--ease)}
.cs-next:hover .cs-nx-p{transform:translateY(-62%) rotate(-3deg) scale(1.03)}
.cs-nx-p svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#151513;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.cs-nx-p .rg{stroke:rgba(21,21,19,.45)}
.cs-next.p-bb .cs-nx-p .ln{stroke:#5B3FE0}.cs-next.p-bb .cs-nx-p rect.f{fill:rgba(124,92,255,.2)}.cs-next.p-bb .cs-nx-p .tr{stroke:rgba(91,63,224,.18);stroke-width:6}.cs-next.p-bb .cs-nx-p .arc{stroke:#5B3FE0;stroke-width:6;stroke-dasharray:.72 1;transform:rotate(-90deg);transform-origin:318px 112px}
.cs-next.p-sd .cs-nx-p .ln{stroke:#3A2A1E}.cs-next.p-sd .cs-nx-p .am1{stroke:#B8322B;stroke-width:5;stroke-dasharray:14 10}.cs-next.p-sd .cs-nx-p .am2{stroke:#23457E;stroke-width:5;stroke-dasharray:14 10;stroke-dashoffset:12}.cs-next.p-sd .cs-nx-p .seal{fill:#A8322B;stroke:none}.cs-next.p-sd .cs-nx-p .heart{fill:#F7EFE2;stroke:none}
.cs-next.p-gl .cs-nx-p .ln{stroke:#20352A}.cs-next.p-gl .cs-nx-p .dt{fill:#1E9E5A;stroke:none}
.cs-nx-a{grid-column:2;grid-row:2/4;align-self:end;display:grid;place-items:center;width:clamp(64px,7vw,96px);aspect-ratio:1;border-radius:50%;font-style:normal;font-size:clamp(22px,2.4vw,32px);background:currentColor;position:relative;z-index:2;transition:transform .8s var(--ease)}
.cs-nx-a::after{content:"→";position:absolute;inset:0;display:grid;place-items:center}
.cs-next.p-bb .cs-nx-a::after{color:#140f2b}.cs-next.p-sd .cs-nx-a::after{color:#FBF3E6}.cs-next.p-gl .cs-nx-a::after{color:#06120B}
.cs-next.p-sd .cs-nx-a{background:#9E2A24}.cs-next.p-gl .cs-nx-a{background:#3BE38A}
.cs-next:hover .cs-nx-a{transform:translateX(8px)}
.cs .foot{margin-top:0}
/* a small chapter tag for phones */
.cs-chip{display:none}
@media (max-width:900px){
.cs-pin{height:210svh}
.cs-hero{grid-template-columns:1fr;gap:26px;padding-top:74px}
.cs-back{margin-bottom:22px}
.cs-h{font-size:clamp(56px,16vw,96px)}
.cs-meta{grid-template-columns:1fr 1fr;gap:12px 18px;margin-top:24px}
.cs-meta dd{font-size:14px}
.cs-cap{margin-top:16px}.cs-hint{display:none}
.cs-body{grid-template-columns:1fr;padding-top:90px}
.cs-idx{display:none}
.cs-cols{grid-template-columns:1fr;font-size:16px}
.cs-steps{grid-template-columns:1fr 1fr}
.cs-shots{grid-template-columns:1fr}
.cs-nums{grid-template-columns:1fr}.cs-num+.cs-num{padding-left:0;border-left:0}
.cs-next{grid-template-columns:1fr;min-height:520px;margin-inline:0}
.cs-nx-p{position:relative;right:auto;top:auto;width:78%;transform:rotate(-5deg);margin:30px 0 10px;grid-row:2}
.cs-next:hover .cs-nx-p{transform:rotate(-3deg)}
.cs-nx-a{grid-column:1;grid-row:auto;justify-self:end}
.cs-chip{position:fixed;left:50%;bottom:16px;z-index:55;display:flex;align-items:center;gap:10px;padding:10px 16px 9px;border-radius:999px;background:color-mix(in srgb,var(--paper) 94%,transparent);box-shadow:0 10px 30px -12px rgba(21,21,19,.45),inset 0 0 0 1px var(--line);font:400 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;transform:translate(-50%,160%);transition:transform .7s var(--ease)}
.cs-chip.on{transform:translate(-50%,0)}
.cs-chip b{font-weight:500}
}
@media (max-width:560px){.cs-steps{grid-template-columns:1fr}.cs-step-in{min-height:0}.cs-step svg{margin:18px 0 0}}
html.calm .cs-pin{height:auto}html.calm .cs-sticky{position:relative;height:auto;min-height:100svh}html.calm .cs-paper,html.calm .cs-glc{display:none}
/* ================= v22 — pages turn like paper (cross-document view transitions) ================= */
@media (prefers-reduced-motion:no-preference){
@view-transition{navigation:auto;types:turn}
}
.cs-h{view-transition-name:case-title}
::view-transition-group(case-title){animation-duration:1.05s;animation-timing-function:cubic-bezier(.65,0,.35,1);z-index:5}
::view-transition-old(case-title),::view-transition-new(case-title){height:100%;object-fit:contain;object-position:left center}
html:active-view-transition-type(turn)::view-transition-image-pair(root),html:active-view-transition-type(back)::view-transition-image-pair(root){isolation:auto}
html:active-view-transition-type(turn)::view-transition-old(root){z-index:2;transform-origin:0 50%;animation:vt-turn-out 1.05s cubic-bezier(.65,0,.35,1) both}
html:active-view-transition-type(turn)::view-transition-new(root){z-index:1;animation:vt-under 1.05s cubic-bezier(.65,0,.35,1) both}
html:active-view-transition-type(back)::view-transition-old(root){z-index:1;animation:vt-under-out 1.05s cubic-bezier(.65,0,.35,1) both}
html:active-view-transition-type(back)::view-transition-new(root){z-index:2;transform-origin:0 50%;animation:vt-turn-in 1.05s cubic-bezier(.65,0,.35,1) both}
@keyframes vt-turn-out{0%{transform:perspective(2600px) rotateY(0);filter:brightness(1)}60%{filter:brightness(.8)}100%{transform:perspective(2600px) rotateY(-96deg);filter:brightness(.55)}}
@keyframes vt-under{0%{transform:scale(.94) translateX(2%);filter:brightness(.72)}100%{transform:none;filter:none}}
@keyframes vt-turn-in{0%{transform:perspective(2600px) rotateY(-96deg);filter:brightness(.55)}100%{transform:perspective(2600px) rotateY(0);filter:brightness(1)}}
@keyframes vt-under-out{0%{transform:none;filter:none}100%{transform:scale(.94) translateX(2%);filter:brightness(.72)}}
/* the flying copies are pictures: nothing inside them blinks or breathes */
.flight *,.flight *::before,.flight *::after{animation:none!important;transition:none!important}
.dio.ready .co{transition:opacity .45s var(--ease),background .45s var(--ease),color .45s var(--ease)}
/* ================= v24 — the case-study stamp, and phone cards that always fit ================= */
.pn-cs{display:none}
.pn-badge{position:absolute;z-index:9;display:grid;place-items:center;width:124px;height:124px;border-radius:50%;
background:var(--bdg,#EDEAF7);color:var(--bdf,#140f2b);box-shadow:0 26px 50px -22px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.14),inset 0 0 0 1px rgba(0,0,0,.06);
transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.p-bb .pn-badge{--bdg:#EDEAF7;--bdf:#1B1440}
.p-sd .pn-badge{--bdg:#9E2A24;--bdf:#FBF3E6}
.p-gl .pn-badge{--bdg:#3BE38A;--bdf:#06120B}
.pn-badge svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:bdg-spin 18s linear infinite;will-change:transform}
.pn-badge text{font:500 9.4px/1 var(--mono);letter-spacing:.14em;fill:currentColor}
.pn-badge::before{content:"";position:absolute;inset:25%;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 30%,transparent)}
.pn-badge i{position:relative;font-style:normal;font-size:24px;line-height:1;transition:transform .7s var(--ease)}
@keyframes bdg-spin{to{transform:rotate(360deg)}}
@media (hover:hover){
.pn-badge:hover{transform:scale(1.07) rotate(-6deg);box-shadow:0 34px 60px -24px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.2)}
.pn-badge:hover i{transform:rotate(-45deg) scale(1.1)}
.pn-badge:hover svg{animation-duration:6s}
}
.pn-badge:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
/* big screens: the stamp sits on the sheet's lower edge, half off the paper, where the words meet the picture */
@media (min-width:981px){
.panel{overflow:visible}
.pn-badge{left:calc(max(300px,27.5%) - 62px);bottom:-46px}
.hz{gap:40px}
}
@media (max-width:980px){
/* phones: the stamp is pressed onto the corner of the picture */
.pn-badge{width:80px;height:80px;right:22px;top:var(--bdy,180px)}
.pn-badge text{font-size:10.2px;letter-spacing:.12em}
.pn-badge i{font-size:19px}
.p-bb .pn-vis,.p-sd .pn-vis,.p-gl .pn-vis{padding:12px 12px 0}
.p-sd .pn-vis{padding:18px 18px 0}
.p-bb .pn-txt,.p-sd .pn-txt,.p-gl .pn-txt{padding:16px 20px 46px;gap:10px;overflow:hidden}
.deck .pn-txt>*{flex-shrink:0}
.deck .pn-n{white-space:nowrap}
.deck .pn-n{font-size:11px}
.deck .st{padding:6px 10px;font-size:10.5px}
.deck .pn-name{margin-top:6px;font-size:min(15.5cqi,66px)}
.deck .pn-name.mono{font-size:min(19cqi,66px)}
.deck .pn-say{font-size:clamp(17px,4.9cqi,21px)}
.deck .pn-d{font-size:14.5px;line-height:1.52;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
/* the features as four small tags, two by two */
.deck .pn-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;border-top:0;margin-top:2px}
.deck .pn-list li{padding:9px 10px;border:0;border-radius:10px;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 16%,transparent);font-size:12.5px;line-height:1.2;gap:8px}
.deck .pn-list li::before{flex:none;width:4px;height:4px}
/* one row of actions: the site, and a round button for the live preview */
.deck .pn-acts{flex-wrap:nowrap;gap:8px}
.deck .pn-go{flex:1 1 auto;justify-content:space-between;height:48px;min-width:0;padding:0 18px;font-size:14.5px}
.deck .pn-go > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deck .pn-open{flex:none;width:48px;height:48px;padding:0;justify-content:center;border-radius:50%}
.deck .pn-open > span{display:none}
.deck .pn-open i{font-size:17px}
/* a short screen: fewer words, never cut */
.deck .pn-txt.tight .pn-list{display:none}
.deck .pn-txt.tighter .pn-d{-webkit-line-clamp:3}
.deck .pn-txt.tighter .pn-name{font-size:min(13cqi,54px)}
.deck .pn-txt.tightest .pn-d{display:none}
}
@media (max-width:360px){.deck .pn-go{font-size:13.5px;padding:0 14px}.deck .pn-say{font-size:16px}}
.pn-n{white-space:nowrap}
/* ================= v25 — the flying sheets are real paper on desktops (WebGL) ================= */
.flight-gl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.flight.gl .fly .fly-f{visibility:hidden}
/* =========================================================================
v26 · THE FIELD — the home page is one walk through an etched world.
Without WebGL (or with reduced motion, or no JS) the same scenes are simply
sections of a page; with it (html.w-3d) they sit on top of the 3D stage.
========================================================================= */
.world{position:relative}
.w-gl,.w-css,.w-hud,.w-pill,.w-sketches{display:none}
.w-top b,.sc .eyebrow b{font-variant-numeric:tabular-nums}
.w-h1{margin:0;font:300 clamp(46px,6.5vw,124px)/.9 var(--sans);font-stretch:112%;letter-spacing:-.047em;color:var(--ink)}
.w-l{display:block}
.w-star{display:inline-block;font-style:normal;font-size:.36em;vertical-align:.8em;margin:0 .1em;color:var(--gold)}
.w-root{position:relative;display:inline-block;font-size:1.04em;letter-spacing:-.035em;padding-right:.06em}
.w-ul{position:absolute;left:-2%;bottom:-.1em;width:104%;height:.22em;fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;overflow:visible;pointer-events:none}
.w-ul path{stroke-dasharray:1;stroke-dashoffset:0}
.w-ul path+path{stroke-width:1.3;opacity:.6}
.w-sub{max-width:31ch;margin:26px 0 0;color:var(--ink-2);font-size:clamp(15px,1.15vw,18px);line-height:1.5}
.w-scroll{display:none}
.w-h2{margin:0;font:300 clamp(36px,4.3vw,72px)/.96 var(--sans);font-stretch:112%;letter-spacing:-.045em;color:var(--ink)}
.w-p{max-width:38ch;margin:18px 0 0;color:var(--ink-2);font-size:16px;line-height:1.55}
.w-mf{margin:22px 0 0;max-width:24ch;font:400 clamp(27px,2.9vw,50px)/1.13 var(--sans);font-stretch:106%;letter-spacing:-.028em;color:var(--ink)}
.w-nums{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 26px;max-width:1000px}
.w-nums li{padding-top:14px;box-shadow:inset 0 1px 0 var(--line-2)}
.w-nums b{display:block;font:300 clamp(40px,4.2vw,70px)/1 var(--sans);font-stretch:112%;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.w-nums span{display:block;margin-top:10px;max-width:19ch;font:400 10.5px/1.45 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
/* ---- the product cards ---- */
.prod-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:26px 26px 24px;border-radius:20px;background:var(--paper-2);color:var(--ink);
box-shadow:0 0 0 1px var(--line),0 40px 80px -48px rgba(21,21,19,.5)}
.prod-k{margin:0;font:400 10px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.prod-card .pn-top{margin-top:2px}
.prod-card .pn-n{opacity:.55;white-space:nowrap}
.prod-card .st{color:var(--ink-2)}
.prod-card .pn-name{margin:8px 0 0;font:300 clamp(46px,4.5vw,78px)/.9 var(--sans);font-stretch:112%;letter-spacing:-.05em;color:var(--ink)}
.prod-card .pn-name.mono{font-weight:500;font-size:clamp(40px,3.9vw,68px);letter-spacing:-.07em}
.prod-card .pn-say{margin:0;font-size:clamp(19px,1.45vw,24px);opacity:1}
.pr-bb .prod-card .pn-say{color:#5B3FE0}
.pr-sd .prod-card .pn-say{color:#9E2A24}
.pr-gl .prod-card .pn-name span{color:#169150}
.pr-gl .prod-card .pn-say{color:#177A45}
:root[data-theme="dark"] .pr-bb .prod-card .pn-say{color:#C9B8FF}
:root[data-theme="dark"] .pr-sd .prod-card .pn-say{color:#E5988F}
:root[data-theme="dark"] .pr-gl .prod-card .pn-say,:root[data-theme="dark"] .pr-gl .prod-card .pn-name span{color:#7CF2B0}
.prod-card .pn-d{margin:2px 0 0;font-size:14.5px;line-height:1.55;opacity:1;color:var(--ink-2);max-width:46ch}
.prod-card .pn-list{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin:2px 0 0;border:0}
.prod-card .pn-list li{padding:8px 0;font-size:12.8px;border-bottom:1px solid var(--line)}
.prod-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px}
.prod-card .pn-go{margin:0;height:46px;padding:0 20px;font-size:14.5px}
.pr-bb .prod-card .pn-go{background:#1B1540;color:#EDEAF7}
.pr-gl .prod-card .pn-go{background:#0E2016;color:#3BE38A}
.pr-sd .prod-card .pn-go{background:#9E2A24;color:#FBF3E6}
.pr-bb .prod-card .pn-badge{--bdg:#1B1540;--bdf:#EDEAF7}
.pr-sd .prod-card .pn-badge{--bdg:#9E2A24;--bdf:#FBF3E6}
.pr-gl .prod-card .pn-badge{--bdg:#0E2016;--bdf:#3BE38A}
.pr-sd .prod-card .st i{background:#C0453D;box-shadow:0 0 10px #C0453D}
.pr-gl .prod-card .st i{background:#2FCB78;box-shadow:0 0 10px #2FCB78}
.prod-open{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:14px;font-weight:500;color:var(--ink);transition:box-shadow .35s,background .35s,scale .25s var(--ease)}
.prod-open i{font-style:normal;font-size:15px}
.prod-open:hover{background:var(--ink);color:var(--paper)}
.prod-open:active{scale:.97}
.prod .prod-card .pn-badge{left:auto;bottom:auto;right:-22px;top:-34px;width:104px;height:104px}
.prod .prod-card .pn-badge text{font-size:10px;letter-spacing:.12em}
.prod .prod-card .pn-badge i{font-size:20px}
.w-now{display:flex;align-items:center;gap:14px;margin:0;font-size:14px;color:var(--ink-2)}
.w-now .now-k{color:var(--ink)}
/* ---- the promises, the name, the growth steps ---- */
.w-sheets{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.w-sheet-in{position:relative;display:flex;flex-direction:column;gap:14px;height:100%;padding:28px 26px 30px;background:#F8F3E9;color:#1C231D;border-radius:3px;
box-shadow:0 0 0 1px rgba(28,35,29,.12),0 30px 50px -34px rgba(28,35,29,.55)}
.w-sn{font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(28,35,29,.55)}
.w-sheet svg{width:88px;height:88px;fill:none;stroke:#1C231D;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.w-sheet h3{margin:auto 0 0;font:400 30px/1.02 var(--sans);font-stretch:108%;letter-spacing:-.035em}
.w-css .w-sheet h3{font-size:36px}
.w-css .w-sheet p{font-size:17.5px;line-height:1.45}
.w-css .w-sheet svg{width:96px;height:96px}
.w-css .w-sn{font-size:12px}
.w-sheet p{margin:0;font-size:15px;line-height:1.5;color:rgba(28,35,29,.72)}
.w-pin{position:absolute;left:50%;top:-7px;width:14px;height:22px;margin-left:-7px;border-radius:3px;background:#C9B38A;box-shadow:inset 0 0 0 1px rgba(28,35,29,.35),0 4px 6px -3px rgba(0,0,0,.4)}
.sc-name .dict{max-width:520px}
.w-big{margin:0;font:400 clamp(28px,2.7vw,46px)/1.12 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.w-big em{color:var(--moss)}
:root[data-theme="dark"] .w-big em{color:var(--gold-2)}
.w-name-t .cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.w-name-t .cols p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.w-name-t .sig{margin:22px 0 0;font:400 11px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.w-name-t .sig a{color:var(--ink);box-shadow:inset 0 -1px 0 var(--line-2)}
.w-steps{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:0;max-width:430px}
.w-step{display:grid;grid-template-columns:54px 1fr;gap:4px;padding:16px 0;box-shadow:inset 0 1px 0 var(--line-2)}
.w-stn{font:400 11px/1.9 var(--mono);color:var(--ink-3)}
.w-step h4{margin:0;font:400 26px/1.1 var(--sans);font-stretch:108%;letter-spacing:-.03em}
.w-step p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2);max-width:36ch}
.w-step a{display:inline-block;margin-top:8px;font:400 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);box-shadow:inset 0 -1px 0 var(--line-2);padding-bottom:3px}
/* ---- the night: contact ---- */
.w-night-h{font-size:clamp(44px,6vw,104px)}
.w-night-a{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px}
.w-plant-b{display:inline-flex;align-items:center;gap:14px;height:58px;padding:0 28px;border-radius:999px;background:var(--gold-2);color:#16140E;font-size:16px;font-weight:500;
box-shadow:0 20px 40px -18px rgba(216,184,120,.6);transition:background .35s,scale .25s var(--ease),box-shadow .5s}
.w-plant-b i{font-style:normal;transition:transform .7s var(--ease)}
.w-plant-b:hover{background:#E9CD92;box-shadow:0 26px 50px -16px rgba(216,184,120,.8)}
.w-plant-b:hover i{transform:rotate(180deg) scale(1.2)}
.w-plant-b:active{scale:.97}
.sc-night .ct-mail{margin-top:0;display:inline-flex;align-items:center;gap:10px;font:400 clamp(18px,1.6vw,24px)/1 var(--sans);color:inherit;padding:18px 6px;box-shadow:inset 0 -1px 0 currentColor}
.sc-night .ct-mail i{font-style:normal}
.sc-night .ct-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.sc-night .pill{box-shadow:inset 0 0 0 1px rgba(240,234,220,.28);color:inherit}
/* ---- plant an idea: a sheet of paper, sent by mail ---- */
.w-plant{width:min(560px,calc(100vw - 32px));max-height:calc(100svh - 32px);padding:0;border:0;border-radius:6px;background:#F8F3E9;color:#1C231D;
box-shadow:0 0 0 1px rgba(28,35,29,.12),0 60px 120px -40px rgba(0,0,0,.7);overflow:auto}
.w-plant::backdrop{background:rgba(12,13,11,.55);backdrop-filter:blur(3px)}
.w-plant[open]{animation:plant-in .7s var(--ease)}
@keyframes plant-in{from{opacity:0;transform:translateY(30px) rotate(-1.5deg)}}
.w-plant-f{display:flex;flex-direction:column;gap:16px;padding:34px clamp(22px,4vw,40px) 30px}
.w-plant-f .eyebrow{color:rgba(28,35,29,.55)}
.w-plant-f .eyebrow b{color:#1C231D;box-shadow:inset 0 0 0 1px rgba(28,35,29,.25)}
.w-plant h2{margin:0;font:300 clamp(40px,6vw,58px)/.95 var(--sans);font-stretch:112%;letter-spacing:-.045em}
.w-plant-p{margin:0;font-size:15px;line-height:1.5;color:rgba(28,35,29,.7)}
.w-plant label{display:flex;flex-direction:column;gap:6px;font:400 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(28,35,29,.6)}
.w-plant input,.w-plant textarea{width:100%;padding:10px 0;border:0;border-bottom:1px solid rgba(28,35,29,.28);border-radius:0;background:transparent;color:#1C231D;font:400 17px/1.4 var(--sans);resize:vertical;outline:0;transition:border-color .3s}
.w-plant input:focus,.w-plant textarea:focus{border-bottom-color:#1C231D}
.w-plant textarea{min-height:92px;background-image:repeating-linear-gradient(transparent 0 31px,rgba(28,35,29,.12) 31px 32px);line-height:32px;padding-top:0}
.w-plant-a{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.w-plant .btn{background:#1C231D;color:#F8F3E9}
.w-plant-x{width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(28,35,29,.2);font-size:22px;line-height:1;color:#1C231D}
/* ================= flat: no WebGL, calm, or no JS — a page of sections ================= */
html:not(.w-3d) .sc{position:relative;max-width:1440px;margin:0 auto;padding:clamp(88px,11vw,150px) var(--gut)}
html:not(.w-3d) .sc-arrive{min-height:86vh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:140px}
html:not(.w-3d) .sc-arrive .w-top{margin-bottom:auto}
html:not(.w-3d) .w-work-h{margin-bottom:46px}
html:not(.w-3d) .w-prods{display:grid;gap:clamp(56px,7vw,110px)}
html:not(.w-3d) .prod{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(26px,4vw,64px);align-items:center}
html:not(.w-3d) .w-nav{display:none}
html:not(.w-3d) .w-now{margin-top:56px}
html:not(.w-3d) .sc-name{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,90px);align-items:center}
html:not(.w-3d) .sc-night{max-width:none;background:var(--night);color:var(--cream)}
html:not(.w-3d) .sc-night .w-h2,html:not(.w-3d) .sc-night .w-p{color:inherit}
html:not(.w-3d) .sc-night .eyebrow{color:var(--cream-3)}
@media (max-width:900px){
html:not(.w-3d) .prod,html:not(.w-3d) .sc-name{grid-template-columns:1fr}
html:not(.w-3d) .w-sheets{grid-template-columns:1fr 1fr}
html:not(.w-3d) .w-nums{grid-template-columns:1fr 1fr;gap:26px}
html:not(.w-3d) .prod .prod-card .pn-badge{right:12px;top:-40px;width:86px;height:86px}
}
@media (max-width:560px){html:not(.w-3d) .w-sheets{grid-template-columns:1fr}html:not(.w-3d) .w-name-t .cols{grid-template-columns:1fr}}
/* ================= 3D: the stage ================= */
.w-3d .world{height:1400vh}
.w-3d .w-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--paper);isolation:isolate}
.w-3d .w-gl{display:block;position:absolute;inset:0;width:100%;height:100%}
.w-3d .w-css{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
.w-3d .w-ui{position:absolute;inset:0;z-index:2;pointer-events:none}
.w-3d .w-hud{display:flex;position:absolute;left:var(--gut);bottom:clamp(18px,3.4vh,34px);z-index:3;align-items:center;gap:16px;pointer-events:none;
font:400 10.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);transition:color .6s,opacity .6s}
.w-idx{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.w-idx b{font-weight:500;color:var(--ink)}
.w-idx i{font-style:normal;opacity:.6}
.w-idx em{font:italic 400 14px/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink);margin-left:6px}
.w-bar{position:relative;width:clamp(70px,9vw,140px);height:1px;background:var(--line-2);overflow:hidden}
.w-bar i{position:absolute;inset:0;background:currentColor;transform-origin:0 50%;transform:scaleX(0)}
.w-hint{display:none}
.w-scrim{display:none}
.w-3d .w-scrim{display:block;position:absolute;left:0;right:0;top:0;height:clamp(96px,15vh,140px);z-index:2;pointer-events:none;background:linear-gradient(var(--wp,var(--paper)) 12%,color-mix(in srgb,var(--wp,var(--paper)) 60%,transparent) 55%,transparent)}
.w-3d .w-pill{display:inline-flex;position:fixed;right:var(--gut);bottom:clamp(16px,3vh,30px);z-index:50;align-items:center;gap:12px;height:50px;padding:0 22px;border-radius:999px;
background:var(--ink);color:var(--paper);font-size:14.5px;font-weight:500;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);transition:opacity .5s,transform .7s var(--ease),background .35s}
.w-pill i{font-style:normal;color:var(--gold-2);transition:transform .7s var(--ease)}
.w-pill:hover i{transform:rotate(180deg) scale(1.2)}
.w-3d .w-pill.off{opacity:0;transform:translateY(20px);pointer-events:none}
.w-3d .w-sketches{display:none}
/* the nav floats over the world: no band, never hides */
.w-live .nav::before{opacity:0}
.w-live .nav.hide{transform:none}
body.w-night .w-hud{color:var(--cream-2)}
body.w-night .w-idx b,body.w-night .w-idx em{color:var(--cream)}
/* the things that live in the 3D layer */
.w-css .w-board{width:1100px;pointer-events:auto;cursor:pointer}
.w-css .w-board .win{box-shadow:0 0 0 1px rgba(28,35,29,.25),0 30px 60px -30px rgba(0,0,0,.6);border-radius:10px}
.w-css .w-hang{display:block;width:380px;pointer-events:auto;list-style:none}
.w-css .w-hang .w-sheet-in{min-height:480px;padding:30px 28px 32px;box-shadow:0 0 0 1px rgba(28,35,29,.14),0 24px 40px -26px rgba(28,35,29,.6)}
.w-css .w-easel{width:560px;pointer-events:auto}
.w-css .w-easel .dict{max-width:none;padding:34px 36px;border-radius:3px;background:#F8F3E9;color:#1C231D;box-shadow:0 0 0 1px rgba(28,35,29,.14);--ink:#1C231D;--ink-2:#4B4A44;--ink-3:#8B887E;--line:rgba(21,21,19,.1);--line-2:rgba(21,21,19,.2);--paper:#F3EDE2}
.w-css .w-easel .mo-w{font-size:104px}
.w-css .w-easel .mo-new i{color:#27402F}
.w-css .w-easel .dn{font-size:15px}
.w-css .w-easel .eyebrow{color:#8B887E}
.w-css .w-easel .eyebrow b{color:#1C231D;box-shadow:inset 0 0 0 1px rgba(21,21,19,.2)}
/* scenes: each sits on the stage, and shows only while you are at it */
.w-3d .sc{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s linear .5s}
.w-3d .sc.on{opacity:1;visibility:visible;transition:opacity .6s var(--ease),visibility 0s}
.w-3d .sc a,.w-3d .sc button,.w-3d .sc .prod-card{pointer-events:auto}
.w-3d .sc:not(.on) *{pointer-events:none!important}
.w-3d .sc .eyebrow{color:var(--ink-3)}
/* words rise into place when their scene arrives */
.w-3d .sc [data-in],.w-3d .sc .w-l,.w-3d .sc .w-rise{transition:transform 1.1s var(--ease),opacity .9s var(--ease),clip-path 1.1s var(--ease)}
.w-3d .sc:not(.on) .w-rise{opacity:0;transform:translateY(24px)}
.w-3d .sc .w-rise{transition-delay:calc(var(--d,0) * 1s)}
.w-3d .sc:not(.on) .w-l{clip-path:inset(0 0 100% 0);transform:translateY(.5em)}
.w-3d .sc .w-l{clip-path:inset(-.2em -.2em -.3em -.2em)}
.w-3d .sc .w-l+.w-l{transition-delay:.08s}
.w-3d .sc-arrive .w-ul path{transition:stroke-dashoffset 1.4s var(--ease) .75s}
.w-3d .sc-arrive:not(.on) .w-ul path{stroke-dashoffset:1;transition-delay:0s}
/* 0 · arrival */
.w-3d .sc-arrive{display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gut) clamp(76px,12vh,120px)}
.w-3d .sc-arrive .w-top{position:absolute;top:clamp(92px,13vh,130px);left:var(--gut)}
.w-3d .w-lede{position:absolute;left:var(--gut);top:calc(clamp(92px,13vh,130px) + 40px);max-width:30ch}
.w-3d .w-sub{margin:0;max-width:30ch}
.w-3d .w-scroll{display:flex;position:absolute;left:50%;bottom:clamp(18px,3.4vh,34px);transform:translateX(-50%);align-items:center;gap:12px;margin:0;font:400 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-shadow:0 0 8px var(--paper),0 0 3px var(--paper)}
.w-scroll i{position:relative;width:1px;height:26px;background:var(--line-2);overflow:hidden}
.w-scroll i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--ink);animation:w-drip 2.2s var(--ease) infinite}
@keyframes w-drip{to{top:110%}}
.w-3d .sc-arrive .w-h1{text-shadow:0 0 30px var(--paper),0 0 12px var(--paper)}
/* a way in: a plain underlined line, the arrow in a ring */
.w-cta{display:inline-flex;align-items:center;gap:12px;margin-top:22px;color:var(--ink);font-size:14px;font-weight:500;text-decoration:none}
.w-cta span{position:relative;padding:4px 0}
.w-cta span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right;transition:transform .6s var(--ease)}
.w-cta:hover span::after{transform:scaleX(0)}
.w-cta i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);font-style:normal;font-size:14px;transition:background .5s var(--ease),color .5s var(--ease),border-color .5s,transform .6s var(--ease)}
.w-cta:hover i{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(3px)}
.w-cta:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
.w-3d .sc-arrive:not(.on) .w-lede{opacity:0;transform:translateY(14px)}
/* the name, as a dictionary would give it */
.w-def{max-width:34ch;margin:26px 0 0;color:var(--ink-2);font-size:13.5px;line-height:1.55}
.w-def b{font:italic 400 19px/1 var(--serif);color:var(--ink);letter-spacing:.01em}
.w-def i{font:400 10.5px/1 var(--mono);letter-spacing:.08em;color:var(--ink-3);margin:0 6px}
.w-def span{display:block;margin-top:8px}
.w-def em{font-size:1.12em;color:var(--ink)}
.w-def small{font-size:inherit}
.w-3d .w-def{position:absolute;right:calc(var(--gut) + 4px);top:calc(clamp(92px,13vh,130px) + 30px);max-width:36ch;margin:0;padding-top:14px;border-top:1px solid var(--line-2);text-shadow:0 0 10px var(--paper),0 0 4px var(--paper);transition:opacity .9s var(--ease) .8s,transform 1.1s var(--ease) .8s}
.w-3d .sc-arrive:not(.on) .w-def{opacity:0;transform:translateY(14px);transition-delay:0s}
.w-3d .sc-arrive .w-lede{transition:opacity .9s var(--ease) .5s,transform 1.1s var(--ease) .5s}
/* the stage is a printed plate: a sunk plate-mark round the edge, and a caption for every view */
.w-plate{display:none}
@media (min-width:761px) and (min-aspect-ratio:17/20){
.w-3d .w-stage::after{content:"";position:absolute;inset:10px;z-index:4;pointer-events:none;border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);outline:1px solid color-mix(in srgb,var(--ink) 7%,transparent);outline-offset:-5px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--paper) 40%,transparent),inset 0 0 38px -12px color-mix(in srgb,var(--ink) 16%,transparent)}
.w-3d .w-plate{display:flex;position:absolute;right:calc(var(--gut) + 4px);top:clamp(92px,13vh,130px);z-index:3;align-items:baseline;gap:12px;margin:0;pointer-events:none;color:var(--ink-3);font:400 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.w-3d .w-plate{text-shadow:0 0 10px var(--paper),0 0 4px var(--paper)}
body.w-night .w-plate{text-shadow:0 0 10px var(--night),0 0 4px var(--night)}
.w-3d .w-plate b{font:italic 400 15px/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink-2)}
.w-3d .w-plate span{position:relative;padding-left:22px}
.w-3d .w-plate span::before{content:"";position:absolute;left:0;top:50%;width:12px;height:1px;background:currentColor;opacity:.6}
body.w-night .w-plate{color:var(--cream-3)}
body.w-night .w-plate b{color:var(--cream-2)}
body.w-night .w-stage::after{border-color:rgba(240,234,220,.14);outline-color:rgba(240,234,220,.06);box-shadow:none}
.w-stage[data-at="3"] .w-rail,.w-stage[data-at="3"] .w-plate,.w-stage[data-at="4"] .w-rail{opacity:0;pointer-events:none}
.w-3d .w-plate{transition:opacity .6s var(--ease)}
.w-3d .w-rail{transition:opacity .6s var(--ease)}
}
/* 1 · seeds */
.w-3d .sc-seeds{padding:clamp(110px,17vh,170px) var(--gut) 0}
.w-3d .sc-seeds::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 88%,transparent) 0%,color-mix(in srgb,var(--paper) 50%,transparent) 42%,transparent 70%)}
.w-3d .w-mf .w{opacity:.14;transition:opacity .6s var(--ease)}
.w-3d .w-mf .w.lit{opacity:1}
.w-3d .w-nums{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(70px,11vh,110px);margin:0;max-width:none}
.w-3d .sc-seeds .w-nums li{background:linear-gradient(color-mix(in srgb,var(--paper) 70%,transparent),transparent);padding-right:10px}
/* 2 · the greenhouse */
.w-3d .w-work-h{position:absolute;top:clamp(92px,13vh,128px);left:var(--gut)}
.w-3d .w-work-h .w-h2{font-size:clamp(26px,2.2vw,38px);margin-top:14px}
.w-3d .w-prods{position:absolute;left:var(--gut);top:50%;width:min(440px,33vw);transform:translateY(-44%);display:grid}
.w-3d .prod{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(26px);transition:opacity .5s var(--ease),transform .9s var(--ease),visibility 0s .5s}
.w-3d .prod.on{opacity:1;visibility:visible;transform:none;transition:opacity .7s var(--ease) .1s,transform 1s var(--ease) .1s,visibility 0s}
.w-3d .prod:not(.on) *{pointer-events:none!important}
.w-3d .prod-card{background:color-mix(in srgb,var(--paper-2) 94%,transparent)}
.w-3d .w-nav{position:absolute;left:var(--gut);bottom:clamp(70px,11vh,108px);display:flex;align-items:center;gap:14px;font:400 11px/1 var(--mono);color:var(--ink-3)}
.w-3d .w-nav b{color:var(--ink);font-weight:500}
.w-arrow{width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--paper-2) 90%,transparent);box-shadow:inset 0 0 0 1px var(--line-2);font-size:16px;color:var(--ink);transition:background .3s,color .3s,scale .25s var(--ease)}
.w-arrow:hover{background:var(--ink);color:var(--paper)}
.w-arrow:active{scale:.94}
.w-3d .w-now{display:block;position:absolute;right:var(--gut);bottom:clamp(80px,12vh,118px);max-width:min(420px,34vw);padding:12px 18px;border-radius:14px;background:color-mix(in srgb,var(--paper-2) 92%,transparent);box-shadow:0 0 0 1px var(--line);font-size:13px;line-height:1.45}
.w-3d .w-now .now-k{display:inline-flex;margin-right:8px;vertical-align:1px}
.w-3d .w-now>span:not(.now-k){display:none}
/* 3 · promises */
.w-3d .w-studio-h{position:absolute;left:var(--gut);bottom:clamp(70px,11vh,110px);max-width:min(560px,48vw)}
.w-3d .w-studio-h .w-p{margin-top:12px;font-size:15px}
.w-3d .sc-studio::before{content:"";position:absolute;inset:auto 0 0 0;height:46%;z-index:-1;background:linear-gradient(transparent,color-mix(in srgb,var(--paper) 86%,transparent))}
/* 4 · the name */
.w-3d .w-name-t{position:absolute;right:var(--gut);top:50%;width:min(480px,36vw);transform:translateY(-46%);padding:30px 30px 26px;border-radius:20px;background:color-mix(in srgb,var(--paper-2) 92%,transparent);box-shadow:0 0 0 1px var(--line),0 40px 80px -48px rgba(21,21,19,.45)}
.w-3d .w-name-t .cols{grid-template-columns:1fr;gap:12px;margin-top:18px}
.w-3d .w-name-t .cols p{font-size:14px}
/* 5 · growth */
.w-3d .sc-grow{padding:clamp(100px,15vh,150px) var(--gut) 0}
.w-3d .sc-grow::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 86%,transparent),color-mix(in srgb,var(--paper) 40%,transparent) 36%,transparent 58%)}
.w-3d .w-steps{margin-top:26px}
.w-3d .w-step{opacity:.34;transition:opacity .6s var(--ease)}
.w-3d .w-step p,.w-3d .w-step a{display:block;max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height .7s var(--ease),opacity .6s var(--ease),margin .7s var(--ease)}
.w-3d .w-step.done{opacity:.62}
.w-3d .w-step.on{opacity:1}
.w-3d .w-step.on p{max-height:120px;opacity:1;margin-top:6px}
.w-3d .w-step.on a{max-height:30px;opacity:1;margin-top:10px;display:inline-block}
.w-3d .w-step.on .w-stn{color:var(--gold)}
/* 6 · night */
.w-3d .sc-night{display:flex;flex-direction:column;justify-content:center;padding:90px var(--gut) 80px;color:var(--cream)}
.w-3d .sc-night .w-h2,.w-3d .sc-night .w-p{color:inherit}
.w-3d .sc-night .w-p{color:var(--cream-2)}
.w-3d .sc-night .eyebrow{color:var(--cream-3)}
.w-3d .sc-night .eyebrow b{color:var(--cream);box-shadow:inset 0 0 0 1px rgba(240,234,220,.25)}
.w-3d .sc-night .w-night-h{max-width:12ch}
/* ================= phones and tall screens ================= */
@media (max-width:760px),(max-aspect-ratio:17/20){
.w-3d .sc-arrive{padding-bottom:clamp(96px,15vh,130px)}
.w-3d .w-h1{font-size:clamp(40px,12.4vw,64px)}
/* the phone hero: a title plate at the top, the field in the middle, a way in at the foot */
.w-3d .sc-arrive{justify-content:flex-start;padding:124px 18px 0}
.w-3d .sc-arrive::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(color-mix(in srgb,var(--paper) 92%,transparent) 0%,color-mix(in srgb,var(--paper) 70%,transparent) 26%,transparent 44%,transparent 66%,color-mix(in srgb,var(--paper) 80%,transparent) 80%,color-mix(in srgb,var(--paper) 96%,transparent) 100%)}
.w-3d .sc-arrive .w-top{top:84px;left:18px}
.w-3d .sc-arrive .w-h1{font-size:clamp(46px,13.6vw,68px);line-height:.95}
.w-3d .w-def{position:relative;right:auto;top:auto;margin-top:14px;padding:0;border:0;max-width:none;font-size:12.5px}
.w-3d .w-def b{font-size:16px}
.w-3d .w-def span{display:inline;margin:0}
.w-3d .w-def small{display:none}
.w-3d .w-lede{left:18px;right:18px;top:auto;bottom:70px;max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.w-3d .w-sub{font-size:14.5px;line-height:1.45;max-width:23ch}
.w-3d .w-cta{flex-direction:column-reverse;align-items:center;gap:8px;margin:0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-family:var(--mono)}
.w-3d .w-cta span{padding:0}
.w-3d .w-cta span::after{display:none}
.w-3d .w-cta i{width:52px;height:52px;background:var(--ink);color:var(--paper);border-color:var(--ink);font-size:17px}
.w-3d .sc-seeds{padding-top:96px}
.w-3d .sc-seeds::before{background:linear-gradient(color-mix(in srgb,var(--paper) 90%,transparent) 0%,color-mix(in srgb,var(--paper) 55%,transparent) 55%,color-mix(in srgb,var(--paper) 85%,transparent))}
.w-3d .w-mf{font-size:clamp(24px,7vw,34px);max-width:none}
.w-3d .w-nums{grid-template-columns:1fr 1fr;gap:16px 18px;bottom:clamp(74px,11vh,96px)}
.w-3d .w-nums b{font-size:38px}
.w-3d .w-work-h{top:78px}
.w-3d .w-work-h .w-h2{display:none}
.w-3d .w-prods{left:12px;right:12px;top:auto;bottom:70px;width:auto;transform:none}
.w-3d .prod-card{padding:18px 18px 16px;gap:8px;border-radius:18px}
.w-3d .prod-k,.w-3d .prod-card .pn-list{display:none}
.w-3d .prod-card .pn-name{font-size:44px;margin-top:2px}
.w-3d .prod-card .pn-name.mono{font-size:40px}
.w-3d .prod-card .pn-say{font-size:18px}
.w-3d .prod-card .pn-d{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.w-3d .prod-card .pn-go,.w-3d .prod-open{height:42px;font-size:13.5px;padding:0 16px}
.w-3d .prod-open span{display:none}
.w-3d .prod .prod-card .pn-badge{width:76px;height:76px;right:12px;top:-62px}
.w-3d .prod .prod-card .pn-badge text{font-size:10.4px}
.w-3d .prod .prod-card .pn-badge i{font-size:17px}
.w-3d .w-nav{display:none}
.w-3d .w-now{display:none}
.w-3d .w-studio-h{left:16px;right:16px;bottom:74px;max-width:none}
.w-3d .w-studio-h .w-h2{font-size:34px}
.w-3d .w-studio-h .w-p{display:none}
.w-3d .w-name-t{left:12px;right:12px;top:auto;bottom:70px;width:auto;transform:none;padding:20px 20px 18px}
.w-3d .w-name-t .cols{display:none}
.w-3d .w-big{font-size:25px}
.w-3d .sc-grow{padding-top:88px}
.w-3d .sc-grow .w-h2{font-size:36px}
.w-3d .sc-grow::before{background:linear-gradient(color-mix(in srgb,var(--paper) 90%,transparent),transparent 34%,transparent 58%,color-mix(in srgb,var(--paper) 92%,transparent) 82%)}
.w-3d .w-steps{position:absolute;left:16px;right:16px;bottom:74px;margin:0;max-width:none}
.w-3d .w-step{grid-template-columns:40px 1fr;padding:10px 0}
.w-3d .w-step:not(.on){display:none}
.w-3d .w-step h4{font-size:24px}
.w-3d .sc-night{justify-content:flex-end;padding-bottom:84px}
.w-3d .w-night-h{font-size:46px}
.w-3d .w-plant-b{height:54px;padding:0 24px}
.w-3d .w-hud{bottom:22px}
.w-3d .w-hint,.w-3d .w-idx i{display:none}
.w-3d .w-bar{width:56px}
.w-3d .w-pill{height:46px;padding:0 18px;font-size:13.5px;bottom:14px;right:12px}
.w-3d .w-scroll{display:none}
}
@media (max-width:760px){.w-css .w-hang .w-sheet-in{min-height:500px}}
/* ================= v27 · chapters, letters ================= */
.w-rail{display:none}
.w-3d .w-rail{display:flex;position:absolute;right:clamp(14px,1.6vw,26px);top:50%;z-index:3;transform:translateY(-50%);flex-direction:column;align-items:flex-end;gap:2px;pointer-events:auto}
.w-rail a{position:relative;display:flex;align-items:center;gap:10px;height:26px;padding:0 0 0 12px;font:400 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);transition:color .4s}
.w-rail b{font-weight:500;opacity:.7;transition:opacity .4s}
.w-rail span{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .7s var(--ease),opacity .4s}
.w-rail i{width:14px;height:1px;background:currentColor;opacity:.55;transition:width .7s var(--ease),opacity .4s,background .4s}
.w-rail a.on{color:var(--ink)}
.w-rail a.on b{opacity:1}
.w-rail a.on span{max-width:90px;opacity:1}
.w-rail a.on i{width:34px;opacity:1;background:var(--gold)}
.w-rail:hover span{max-width:90px;opacity:.8}
body.w-night .w-rail a{color:var(--cream-3)}
body.w-night .w-rail a.on{color:var(--cream)}
.wd{display:inline-block;white-space:nowrap}
.ch{display:inline-block}
.w-3d .sc .ch{transition:transform 1s var(--ease) calc(var(--i) * 16ms + .12s),opacity .8s var(--ease) calc(var(--i) * 16ms + .12s),filter .8s var(--ease) calc(var(--i) * 16ms + .12s)}
.w-3d .sc:not(.on) .ch{opacity:0;transform:translateY(.55em) rotate(5deg);filter:blur(5px);transition-delay:0s;transition-duration:.35s}
.w-3d .sc .w-l{clip-path:none!important;transform:none!important}
@media (max-width:760px),(max-aspect-ratio:17/20){.w-3d .w-rail{display:none}}
@media (prefers-reduced-motion:reduce){.w-3d .sc .ch{transition:none}}
/* =========================================================================
v28 · CINEMATIC — words over a lit world. The field is a real place now,
so the type is light, set over soft shade, and cards are dark glass.
========================================================================= */
.w-cine{--cw:#F6F2E9;--cw2:rgba(246,242,233,.8);--cw3:rgba(246,242,233,.56);--cl:rgba(246,242,233,.16);--glass:rgba(15,16,13,.58)}
.w-cine .w-stage{background:#0b0c0a}
.w-cine .w-stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(0deg,rgba(7,8,6,.62) 0%,rgba(7,8,6,.28) 26%,rgba(7,8,6,0) 48%),linear-gradient(90deg,rgba(7,8,6,.42) 0%,rgba(7,8,6,0) 46%)}
.w-cine .w-scrim{background:linear-gradient(rgba(7,8,6,.52),rgba(7,8,6,.18) 60%,rgba(7,8,6,0))}
.w-cine .sc,.w-cine .sc .w-h1,.w-cine .sc .w-h2,.w-cine .w-mf,.w-cine .w-big,.w-cine .w-step h4,.w-cine .w-nums b{color:var(--cw)}
.w-cine .sc .eyebrow{color:var(--cw3)}
.w-cine .sc .eyebrow b{color:var(--cw);box-shadow:inset 0 0 0 1px rgba(246,242,233,.3)}
.w-cine .w-sub,.w-cine .w-p{color:var(--cw2)}
.w-cine .sc-arrive .w-h1{text-shadow:0 2px 40px rgba(0,0,0,.28)}
.w-cine .w-star{color:#E6C48A}
.w-cine .w-ul{stroke:#E6C48A}
.w-cine .sc-seeds::before{background:linear-gradient(90deg,rgba(7,8,6,.62) 0%,rgba(7,8,6,.3) 42%,rgba(7,8,6,0) 70%)}
.w-cine .w-mf .w{opacity:.26}
.w-cine .w-mf .w.lit{opacity:1}
.w-cine .w-nums li{box-shadow:inset 0 1px 0 rgba(246,242,233,.26);background:none}
.w-cine .w-nums span{color:var(--cw3)}
/* products: dark glass */
.w-cine .prod-card{background:var(--glass);color:var(--cw);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 90px -40px rgba(0,0,0,.7)}
@media (hover:hover) and (pointer:fine){.w-cine .prod-card,.w-cine .w-name-t,.w-cine .w-now,.w-cine .w-arrow{-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25)}}
@media (hover:none){.w-cine .prod-card,.w-cine .w-name-t{background:rgba(15,16,13,.84)}}
.w-cine .prod-card .pn-name{color:var(--cw)}
.w-cine .prod-card .pn-d{color:var(--cw2)}
.w-cine .prod-k,.w-cine .prod-card .pn-n{color:var(--cw3);opacity:1}
.w-cine .prod-card .st{color:var(--cw2)}
.w-cine .prod-card .pn-list li{border-color:var(--cl);color:var(--cw2)}
.w-cine .pr-bb .prod-card .pn-say{color:#C9B8FF}
.w-cine .pr-sd .prod-card .pn-say{color:#F2A89D}
.w-cine .pr-gl .prod-card .pn-say,.w-cine .pr-gl .prod-card .pn-name span{color:#7CF2B0}
.w-cine .pr-bb .prod-card .pn-go{background:#EDEAF7;color:#1B1540}
.w-cine .pr-sd .prod-card .pn-go{background:#C0453D;color:#FFF6EE}
.w-cine .pr-gl .prod-card .pn-go{background:#3BE38A;color:#06120B}
.w-cine .pr-bb .prod-card .pn-badge{--bdg:#EDEAF7;--bdf:#1B1440}
.w-cine .pr-gl .prod-card .pn-badge{--bdg:#3BE38A;--bdf:#06120B}
.w-cine .prod-open{color:var(--cw);box-shadow:inset 0 0 0 1px rgba(246,242,233,.3)}
.w-cine .prod-open:hover{background:var(--cw);color:#11120F}
.w-cine .w-arrow{background:var(--glass);color:var(--cw);box-shadow:inset 0 0 0 1px rgba(246,242,233,.22)}
.w-cine .w-arrow:hover{background:var(--cw);color:#11120F}
.w-cine .w-nav,.w-cine .w-nav b{color:var(--cw3)}
.w-cine .w-nav b{color:var(--cw)}
.w-cine .w-now{background:var(--glass);box-shadow:0 0 0 1px rgba(255,255,255,.1);color:var(--cw2)}
.w-cine .w-now .now-k,.w-cine .w-now b{color:var(--cw)}
/* promises, name, growth */
.w-cine .sc-studio::before{background:linear-gradient(transparent,rgba(7,8,6,.55))}
.w-cine .w-name-t{background:var(--glass);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 90px -40px rgba(0,0,0,.7)}
.w-cine .w-big em{color:#E6C48A}
.w-cine .w-name-t .cols p{color:var(--cw2)}
.w-cine .w-name-t .sig{color:var(--cw3)}
.w-cine .w-name-t .sig a{color:var(--cw);box-shadow:inset 0 -1px 0 rgba(246,242,233,.35)}
.w-cine .sc-grow::before{background:linear-gradient(90deg,rgba(7,8,6,.6),rgba(7,8,6,.25) 38%,rgba(7,8,6,0) 60%)}
.w-cine .w-step{box-shadow:inset 0 1px 0 var(--cl)}
.w-cine .w-step p{color:var(--cw2)}
.w-cine .w-step a{color:var(--cw);box-shadow:inset 0 -1px 0 rgba(246,242,233,.35)}
.w-cine .w-stn{color:var(--cw3)}
.w-cine .w-step.on .w-stn{color:#E6C48A}
/* chrome */
.w-cine .w-hud{color:var(--cw2)}
.w-cine .w-idx b,.w-cine .w-idx em{color:var(--cw)}
.w-cine .w-bar{background:rgba(246,242,233,.24)}
.w-cine .w-rail a{color:var(--cw3)}
.w-cine .w-rail a.on{color:var(--cw)}
.w-cine .w-rail a.on i{background:#E6C48A}
.w-cine .w-scroll{color:var(--cw3)}
.w-cine .w-scroll i{background:rgba(246,242,233,.25)}
.w-cine .w-scroll i::after{background:var(--cw)}
.w-cine .w-pill{background:var(--cw);color:#11120F;box-shadow:0 18px 40px -16px rgba(0,0,0,.55)}
.w-cine .w-pill i{color:#A87A2E}
@media (max-width:760px),(max-aspect-ratio:17/20){
.w-cine .w-stage::before{background:linear-gradient(0deg,rgba(7,8,6,.72) 0%,rgba(7,8,6,.34) 34%,rgba(7,8,6,0) 58%)}
.w-cine .sc-seeds::before{background:linear-gradient(rgba(7,8,6,.62),rgba(7,8,6,.2) 55%,rgba(7,8,6,.5))}
.w-cine .sc-grow::before{background:linear-gradient(rgba(7,8,6,.55),transparent 36%,transparent 55%,rgba(7,8,6,.62) 80%)}
}
.w-cine .sc-seeds .w-nums li{background:none;padding-right:10px}
@media (min-width:761px) and (max-height:820px){
.w-3d .prod-k,.w-3d .prod-card .pn-list{display:none}
.w-3d .prod-card{padding:22px 22px 20px;gap:10px}
.w-3d .prod-card .pn-name{font-size:clamp(40px,4vw,58px)}
.w-3d .prod-card .pn-name.mono{font-size:clamp(36px,3.6vw,52px)}
.w-3d .w-prods{transform:translateY(-42%)}
.w-3d .w-nav{bottom:clamp(60px,9vh,90px)}
.w-3d .w-name-t .cols p+p{display:none}
}