/* ============ GROWTH SAILOR — design system ============ */
:root{
 --ink:#06080A;--ink2:#0A0E11;--card:#0F151A;--card2:#141C21;
 --txt:#EAEFEC;--mut:#8B978F;--dim:#5C6762;
 --green:#4CBD8E;--green-b:#5FE0AB;--green-d:#12694A;--tint:rgba(76,189,142,.12);
 --red:#FF4B3E;
 --line:rgba(255,255,255,.10);--line-s:rgba(255,255,255,.055);
 --serif:'Fraunces',Georgia,serif;--sans:'Inter',-apple-system,system-ui,sans-serif;--mono:'JetBrains Mono',monospace;
 --e:cubic-bezier(.16,1,.3,1);--e2:cubic-bezier(.83,0,.17,1);
 --pad:clamp(18px,4.6vw,72px);--maxw:1380px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--txt);font-family:var(--sans);font-size:clamp(15px,1.05vw,17px);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"tnum" 1}
body.lock{overflow:hidden;height:100vh}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--green);color:#04120C}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.grain{position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.vig{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 8%,transparent 42%,rgba(0,0,0,.6) 100%)}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.85}
main,nav,footer,.mbar{position:relative;z-index:2}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(70px,9.6vw,158px);position:relative}
.pane{background:var(--ink2)}
.mono{font-family:var(--mono);font-size:clamp(9.5px,.72vw,11px);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
h1,h2,h3,h4,h5{font-weight:400}
.d{font-family:var(--serif);font-weight:300;letter-spacing:-.032em;line-height:1.02}
h2.d{font-size:clamp(30px,5.1vw,72px)}
h3.d{font-size:clamp(22px,3vw,41px)}
.lead{color:var(--mut);max-width:56ch}
.lab{display:flex;align-items:center;gap:10px;margin-bottom:clamp(24px,3.6vw,50px)}
.lab i{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none;box-shadow:0 0 12px var(--green)}
.gr{color:var(--green)}em.it{font-style:italic;color:var(--green-b)}
/* underline draw */
.udl{position:relative;display:inline-block;font-style:italic}
.udl::after{content:"";position:absolute;left:0;right:0;bottom:.03em;height:.055em;background:var(--green);transform:scaleX(0);transform-origin:0;border-radius:2px}
.udl.on::after{transform:none;transition:transform 1.1s var(--e) .55s}
/* preloader */
#pre{position:fixed;inset:0;z-index:9995;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity .6s ease}
#pre.gone{opacity:0;pointer-events:none}
#pre .pl-mark{width:78px;opacity:0;transform:scale(.9);animation:plIn 1.1s var(--e) .15s forwards}
@keyframes plIn{to{opacity:1;transform:none}}
#pre .pl-bar{width:min(300px,58vw);height:1px;background:var(--line);position:relative;overflow:hidden}
#pre .pl-bar i{position:absolute;inset:0;background:var(--green);transform:scaleX(0);transform-origin:0}
#pre .pl-n{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--dim)}
#pre .pl-w{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(18px,2.4vw,30px);letter-spacing:-.02em;color:var(--txt);opacity:0;height:1.3em;overflow:hidden}
#pre .pl-enter{opacity:0;pointer-events:none;transition:opacity .6s ease;display:flex;flex-direction:column;align-items:center;gap:12px}
#pre.ready .pl-enter{opacity:1;pointer-events:auto}
#pre.ready .pl-n,#pre.ready .pl-bar{opacity:0;transition:opacity .4s}
.pl-enter b{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--green);font-weight:400}
.pl-enter .arw{width:1px;height:34px;background:var(--line);position:relative;overflow:hidden}
.pl-enter .arw::after{content:"";position:absolute;inset:0;background:var(--green);animation:cue 1.8s var(--e) infinite}
/* curtain page transition */
#curt{position:fixed;inset:0;z-index:9994;pointer-events:none;display:grid;grid-template-columns:repeat(6,1fr)}
#curt i{background:var(--ink2);transform:scaleY(0);transform-origin:bottom;box-shadow:0 0 0 .5px rgba(0,0,0,.4)}
#curt.in i{transform:scaleY(1);transform-origin:bottom;transition:transform .62s var(--e2)}
#curt.out i{transform:scaleY(0);transform-origin:top;transition:transform .62s var(--e2)}
#curt.in i:nth-child(2),#curt.out i:nth-child(2){transition-delay:.045s}
#curt.in i:nth-child(3),#curt.out i:nth-child(3){transition-delay:.09s}
#curt.in i:nth-child(4),#curt.out i:nth-child(4){transition-delay:.135s}
#curt.in i:nth-child(5),#curt.out i:nth-child(5){transition-delay:.18s}
#curt.in i:nth-child(6),#curt.out i:nth-child(6){transition-delay:.225s}
#curtL{position:fixed;z-index:9995;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .3s}
#curt.in ~ #curtL,#curtL.on{opacity:1}
#curtL img{width:56px;opacity:.9}
/* reveal */
.rv{opacity:0;transform:translateY(24px)}
.rv.in{opacity:1;transform:none;transition:opacity .95s var(--e),transform .95s var(--e)}
.d1.in{transition-delay:.09s}.d2.in{transition-delay:.18s}.d3.in{transition-delay:.27s}.d4.in{transition-delay:.36s}
.ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.12em}
.ln>span{display:block;transform:translateY(106%);transition:transform 1.15s var(--e)}
.in .ln>span{transform:none}
.in .ln:nth-child(2)>span{transition-delay:.1s}
.in .ln:nth-child(3)>span{transition-delay:.2s}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 26px;border-radius:100px;font-size:14.5px;font-weight:500;background:var(--txt);color:var(--ink);position:relative;overflow:hidden;isolation:isolate;white-space:nowrap;will-change:transform}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--green);transform:translateY(101%);transition:transform .5s var(--e)}
.btn:hover::after{transform:none}
.btn .ar{transition:transform .45s var(--e)}
.btn:hover .ar{transform:translate(3px,-3px)}
.btn--g{background:transparent;color:var(--txt);box-shadow:inset 0 0 0 1px var(--line)}
.btn--g:hover{color:var(--ink)}
.btn--lg{padding:18px 32px;font-size:15.5px}
/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:80;transition:transform .55s var(--e)}
.nav.hide{transform:translateY(-108%)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:var(--maxw);margin-inline:auto;padding:15px var(--pad);transition:all .6s var(--e)}
.nav.cond .nav__in{max-width:900px;margin-top:10px;padding:9px 9px 9px 18px;border-radius:100px;background:rgba(10,14,17,.74);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);box-shadow:inset 0 0 0 1px var(--line),0 20px 50px -25px #000}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{height:25px;width:auto}
.brand .mk{height:26px;width:26px;object-fit:contain;display:none}
.nav.cond .brand .lk{display:none}.nav.cond .brand .mk{display:block}
.nav__l{display:flex;gap:clamp(14px,1.8vw,28px);font-size:13.6px;color:var(--mut)}
.nav__l a{position:relative;padding:4px 0;transition:color .35s}
.nav__l a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--green);transform:scaleX(0);transform-origin:0;transition:transform .45s var(--e)}
.nav__l a:hover,.nav__l a.act{color:var(--txt)}.nav__l a:hover::after,.nav__l a.act::after{transform:none}
.nav__r{display:flex;align-items:center;gap:10px}
.nav .btn{padding:11px 19px;font-size:13.4px}
.snd{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line);flex:none;transition:.4s var(--e)}
.snd:hover{box-shadow:inset 0 0 0 1px var(--green)}
.snd i{display:flex;gap:2px;align-items:center;height:13px}
.snd i b{width:2px;background:var(--dim);border-radius:2px;height:4px;transition:.3s}
.snd.on i b{background:var(--green);animation:eq 1.1s ease-in-out infinite}
.snd.on i b:nth-child(2){animation-delay:.16s}.snd.on i b:nth-child(3){animation-delay:.32s}
@keyframes eq{0%,100%{height:4px}50%{height:12px}}
.burg{display:none;width:38px;height:38px;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line)}
.burg i{display:block;width:16px;height:1px;background:var(--txt);position:relative;transition:.4s var(--e)}
.burg i::before,.burg i::after{content:"";position:absolute;left:0;width:16px;height:1px;background:var(--txt);transition:.4s var(--e)}
.burg i::before{top:-5px}.burg i::after{top:5px}
body.menu .burg i{background:transparent}
body.menu .burg i::before{top:0;transform:rotate(45deg)}
body.menu .burg i::after{top:0;transform:rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:79;background:rgba(6,8,10,.97);backdrop-filter:blur(14px);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 var(--pad);opacity:0;pointer-events:none;transition:opacity .5s var(--e)}
body.menu .sheet{opacity:1;pointer-events:auto}
.sheet a{font-family:var(--serif);font-weight:300;font-size:clamp(28px,8.4vw,50px);letter-spacing:-.03em;padding:9px 0;border-bottom:1px solid var(--line-s);display:flex;justify-content:space-between;align-items:baseline}
.sheet a span{font-family:var(--mono);font-size:10px;color:var(--dim)}
/* cursor */
.cur{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--green);z-index:9992;pointer-events:none;opacity:0;transition:width .3s var(--e),height .3s var(--e),opacity .3s,background .3s,border-radius .3s}
.cur.big{width:46px;height:46px;background:rgba(76,189,142,.2)}
.cur.scr{width:52px;height:52px;background:rgba(76,189,142,.16);box-shadow:inset 0 0 0 1px var(--green)}
.curT{position:fixed;top:0;left:0;z-index:9993;pointer-events:none;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);opacity:0;transition:opacity .3s;transform:translate(-50%,-50%)}
.curT.on{opacity:1}
#prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0;background:linear-gradient(90deg,var(--green-d),var(--green-b));z-index:9991}
#chap{position:fixed;right:var(--pad);bottom:24px;z-index:60;text-align:right;pointer-events:none;transition:opacity .5s}
#chap.dim{opacity:0}
#chap b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--green);font-weight:400}
#chap s{display:block;text-decoration:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--dim);margin-top:3px}
/* ============ hero ============ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(38px,6.6vh,84px);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:-8% 0 0;z-index:-3;background:url(../img/hero.webp) center/cover no-repeat;will-change:transform}
.hero__lines{position:absolute;inset:0;z-index:-2;width:100%;height:100%}
.hero__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,8,10,.78) 0%,rgba(6,8,10,.3) 32%,rgba(6,8,10,.86) 76%,var(--ink) 100%)}
.hero__top{position:absolute;left:0;right:0;top:clamp(88px,12vh,132px);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:100px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line);backdrop-filter:blur(8px);font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#C3CEC8}
.pill b{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;animation:blip 1.5s infinite}
@keyframes blip{0%{box-shadow:0 0 0 0 rgba(255,75,62,.6)}70%{box-shadow:0 0 0 9px rgba(255,75,62,0)}100%{box-shadow:0 0 0 0 rgba(255,75,62,0)}}
.pill.red{color:#FFD9D5;background:rgba(255,75,62,.09);box-shadow:inset 0 0 0 1px rgba(255,75,62,.32)}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(38px,7.4vw,116px);line-height:.98;letter-spacing:-.035em;margin-bottom:clamp(22px,3.6vh,40px);max-width:16ch}
.hero__rule{height:1px;background:var(--line);margin-bottom:clamp(22px,3.2vh,38px);transform:scaleX(0);transform-origin:0;transition:transform 1.6s var(--e) .6s}
.hero.in .hero__rule{transform:none}
.hero__ft{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(20px,4vw,64px);align-items:end}
.hero__sup{font-size:clamp(14.5px,1.2vw,18px);color:#B9C4BE;max-width:46ch}
.hero__sup b{color:var(--txt);font-weight:500}
.cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.hstats{display:flex;gap:clamp(16px,3vw,42px);margin-top:clamp(24px,3.6vh,40px);padding-top:20px;border-top:1px solid var(--line-s);flex-wrap:wrap}
.hstat b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(21px,2.5vw,34px);letter-spacing:-.03em;color:var(--green-b);line-height:1}
.hstat span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:7px}
.cue{position:absolute;left:var(--pad);bottom:20px;display:flex;align-items:center;gap:9px;z-index:3}
.cue .bar{width:1px;height:32px;background:var(--line);overflow:hidden;position:relative}
.cue .bar::after{content:"";position:absolute;inset:0;background:var(--green);animation:cue 2.2s var(--e) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
/* brand marquee */
.mq{overflow:hidden;padding:24px 0;border-block:1px solid var(--line-s);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq__t{display:flex;align-items:center;gap:clamp(30px,4vw,58px);width:max-content;animation:mv 44s linear infinite}
.mq:hover .mq__t{animation-play-state:paused}
@keyframes mv{to{transform:translateX(-50%)}}
.mq__i{font-family:var(--serif);font-weight:400;font-size:clamp(16px,1.6vw,22px);letter-spacing:-.02em;color:#59635C;white-space:nowrap;transition:color .35s;display:flex;align-items:center;gap:10px}
.mq__i:hover{color:var(--green-b)}
.mq__l{height:22px;width:auto;filter:grayscale(1) brightness(0) invert(.55);opacity:.75;transition:.4s var(--e)}
.mq__l:hover{filter:none;opacity:1;transform:scale(1.06)}
/* manifesto + 3D mark */
.mani{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,70px);align-items:center}
.mani p{font-family:var(--serif);font-weight:300;font-size:clamp(23px,3.6vw,54px);line-height:1.2;letter-spacing:-.025em}
.mani w{color:rgba(234,239,236,.15);transition:color .45s var(--e)}
.mani w.on{color:var(--txt)}.mani w.hl.on{color:var(--green-b)}
.stage{aspect-ratio:1;display:grid;place-items:center;perspective:1200px;position:relative}
.stage::after{content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(76,189,142,.20),transparent 68%);filter:blur(22px)}
.g3d{position:relative;width:min(340px,62%);transform-style:preserve-3d;will-change:transform}
.g3d img{position:absolute;inset:0;width:100%;height:auto}
.g3d img:first-child{position:relative}
.g3d .hint{position:absolute;left:50%;bottom:-46px;transform:translateX(-50%);white-space:nowrap}
/* stats grid */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:1px;background:var(--line-s);border:1px solid var(--line-s)}
.num{background:var(--ink2);padding:clamp(22px,2.8vw,38px);transition:background .5s var(--e);position:relative;overflow:hidden}
.num:hover{background:var(--card)}
.num__v{font-family:var(--serif);font-weight:300;font-size:clamp(38px,5.2vw,78px);line-height:.94;letter-spacing:-.04em;color:var(--green-b);display:flex;align-items:flex-start}
.num__v sup{font-family:var(--mono);font-size:10px;color:var(--dim);margin-left:5px;margin-top:.4em}
.num__l{margin-top:12px;font-size:14.5px;color:var(--mut);max-width:28ch}
.num__s{height:32px;margin-top:16px;width:100%}
/* system */
.sys{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1fr) minmax(0,.7fr);gap:clamp(22px,3.6vw,58px);align-items:start}
.sys__i{position:sticky;top:94px}
.sys__i ol{list-style:none;counter-reset:v}
.sys__i li{counter-increment:v;display:flex;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line-s);color:var(--dim);transition:color .5s var(--e),padding-left .5s var(--e)}
.sys__i li::before{content:"0" counter(v);font-family:var(--mono);font-size:10px}
.sys__i li span{font-family:var(--serif);font-weight:300;font-size:clamp(21px,2.4vw,33px);letter-spacing:-.03em}
.sys__i li.on{color:var(--txt);padding-left:8px}.sys__i li.on::before{color:var(--green)}
.sys__v{position:sticky;top:94px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);background:var(--card)}
.sys__v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s var(--e),transform 1.4s var(--e)}
.sys__v img.on{opacity:1;transform:none}
.sys__v .vt{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(transparent,rgba(6,8,10,.9))}
.blk{padding-block:clamp(30px,4.8vw,68px);border-top:1px solid var(--line-s)}
.blk:first-child{border-top:none;padding-top:0}
.blk__d{margin-top:13px;color:var(--mut);max-width:48ch;font-size:15.2px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:7px 13px;border-radius:100px;box-shadow:inset 0 0 0 1px var(--line);color:var(--mut);transition:.35s var(--e)}
.tag:hover{box-shadow:inset 0 0 0 1px var(--green);color:var(--green-b);background:var(--tint)}
.blk__p{margin-top:18px;padding-left:15px;border-left:1px solid var(--green);font-size:14.4px}
.blk__p b{font-family:var(--mono);font-size:13px;color:var(--green-b)}
/* compare */
.cmp{border-top:1px solid var(--line)}
.cmp__h,.cmp__r{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,4vw,60px)}
.cmp__h{padding-bottom:12px}
.cmp__r{padding-block:clamp(13px,1.9vw,23px);border-bottom:1px solid var(--line-s);align-items:baseline}
.cmp__r div{font-family:var(--serif);font-weight:300;font-size:clamp(15px,1.7vw,23px);letter-spacing:-.02em;line-height:1.25}
.cmp__a{color:var(--dim);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.2)}
.cmp__r:hover .cmp__b{color:var(--green-b)}
/* process */
.proc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:1px;background:var(--line-s);border:1px solid var(--line-s)}
.ph{background:var(--ink2);padding:clamp(20px,2.5vw,32px);position:relative;overflow:hidden}
.ph::before{content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--green);transition:width 1.3s var(--e)}
.in .ph::before{width:100%}
.in .ph:nth-child(2)::before{transition-delay:.18s}.in .ph:nth-child(3)::before{transition-delay:.36s}.in .ph:nth-child(4)::before{transition-delay:.54s}
.ph h4{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.03em;margin:9px 0}
.ph p{font-size:14.3px;color:var(--mut)}
.ph em{position:absolute;right:15px;top:11px;font-style:normal;font-family:var(--serif);font-size:50px;color:rgba(255,255,255,.05)}
/* cases */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:clamp(13px,1.7vw,24px)}
.cs{position:relative;border-radius:16px;overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:block}
.cs__m{aspect-ratio:16/10;overflow:hidden;position:relative}
.cs__m img{width:100%;height:100%;object-fit:cover;transform:scale(1.05) translateY(var(--py,0px));transition:transform 1.1s var(--e)}
.cs:hover .cs__m img{transform:scale(1.13) translateY(var(--py,0px))}
.cs__m::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(6,8,10,.85))}
.cs__tag{position:absolute;top:13px;left:13px;z-index:2;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:100px;background:rgba(6,8,10,.6);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px var(--line)}
.cs__n{position:absolute;left:17px;bottom:13px;z-index:2;font-family:var(--serif);font-weight:300;font-size:clamp(32px,4.2vw,56px);letter-spacing:-.04em;line-height:1;color:var(--green-b)}
.cs__b{padding:17px clamp(15px,1.5vw,22px) 21px;display:flex;justify-content:space-between;gap:13px;align-items:flex-start}
.cs__b h4{font-size:15.5px;font-weight:500;margin-bottom:5px}
.cs__b p{font-size:13.8px;color:var(--mut);max-width:36ch}
.cs__ar{width:37px;height:37px;flex:none;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line);transition:.5s var(--e)}
.cs:hover .cs__ar{background:var(--green);color:var(--ink);box-shadow:none;transform:rotate(45deg)}
/* engine */
.eng{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--ink),#07140F 55%,var(--ink))}
.eng__p{position:absolute;inset:0;background:url(../img/engine.webp) center/cover;opacity:.28;mix-blend-mode:screen}
.eng__c{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.eng__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,185px),1fr));gap:1px;background:var(--line-s);border:1px solid var(--line-s);margin-top:clamp(30px,4.6vw,60px)}
.ec{background:rgba(7,11,13,.86);padding:21px 19px;backdrop-filter:blur(4px);transition:background .5s}
.ec:hover{background:rgba(18,30,26,.9)}
.ec h5{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);font-weight:400;margin-bottom:9px}
.ec p{font-size:13.6px;color:var(--mut)}
.ebtns{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}
.ebtn{padding:12px 20px;border-radius:100px;font-size:13.4px;font-weight:500;box-shadow:inset 0 0 0 1px var(--line);transition:.4s var(--e)}
.ebtn.on,.ebtn:hover{background:var(--green);color:var(--ink);box-shadow:none}
.stack{display:flex;flex-wrap:wrap;gap:7px;margin-top:32px}
.stack span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:100px;box-shadow:inset 0 0 0 1px var(--line);color:var(--mut)}
/* founder */
.fnd{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,72px);align-items:center}
.fnd__m{position:relative;border-radius:18px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);background:var(--card)}
.fnd__m img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transform:scale(1.03) translateY(var(--py,0px));transition:transform 1.2s var(--e),filter .8s}
.fnd__m:hover img{transform:scale(1.07) translateY(var(--py,0px))}
.fnd__m::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(6,8,10,.75));pointer-events:none}
.fnd__cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.fnd__cap b{display:block;font-size:15px;font-weight:500}
.fnd blockquote{font-family:var(--serif);font-weight:300;font-size:clamp(21px,2.9vw,42px);line-height:1.22;letter-spacing:-.028em}
.fnd blockquote span{color:var(--green-b);font-style:italic}
.fnd__sig{margin-top:26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fnd__sig .nm{font-family:var(--serif);font-style:italic;font-weight:300;font-size:23px}
.sold{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:1px;background:var(--line-s);border:1px solid var(--line-s);margin-top:clamp(26px,3.4vw,42px)}
.sold div{background:var(--ink2);padding:18px 16px}
.sold b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.4vw,32px);color:var(--green-b);letter-spacing:-.03em;line-height:1}
.sold span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-top:8px}
/* testimonials */
.tst{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,285px),1fr));gap:clamp(13px,1.6vw,21px)}
.tc{background:var(--card);border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);padding:clamp(21px,2.3vw,30px);display:flex;flex-direction:column;gap:18px;transition:.55s var(--e)}
.tc:hover{background:var(--card2);transform:translateY(-5px)}
.tc blockquote{font-family:var(--serif);font-weight:300;font-size:clamp(18px,1.8vw,25px);line-height:1.28;letter-spacing:-.02em}
.tc__w{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line-s)}
.tc__w img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;box-shadow:inset 0 0 0 1px var(--line)}
.tc__w b{display:block;font-size:14.2px;font-weight:500}
.tc__w span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:3px}
.stars{display:flex;gap:3px;color:var(--green);font-size:13px}
/* rows / industries */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:0 clamp(26px,4.6vw,74px)}
.srow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-s);transition:.45s var(--e)}
.srow:hover{padding-left:9px;border-color:var(--green)}
.srow b{font-family:var(--serif);font-weight:300;font-size:clamp(17px,1.8vw,25px);letter-spacing:-.02em}
.srow i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--dim);transition:.4s;text-align:right}
.srow:hover i{color:var(--green-b)}
/* team */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:clamp(12px,1.5vw,20px)}
.mem{border-radius:14px;overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.mem__p{aspect-ratio:3/4;overflow:hidden;position:relative;background:#0C1114}
.mem__p img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .7s var(--e),transform 1.1s var(--e)}
.mem:hover .mem__p img{filter:none;transform:scale(1.05)}
.mem__b{padding:14px 15px 18px}
.mem__b h5{font-size:15px;font-weight:500}
.mem__b p{font-size:13.4px;color:var(--mut);margin-top:5px}
.mem__b em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);display:block;margin-top:8px}
/* faq */
.faq{border-top:1px solid var(--line)}
.fq{border-bottom:1px solid var(--line-s)}
.fq__q{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:clamp(17px,2.2vw,27px) 0;font-family:var(--serif);font-weight:300;font-size:clamp(17px,1.95vw,26px);letter-spacing:-.025em;line-height:1.25;transition:color .4s}
.fq__q:hover,.fq.open .fq__q{color:var(--green-b)}
.fq__s{width:11px;height:11px;flex:none;position:relative}
.fq__s::before,.fq__s::after{content:"";position:absolute;background:currentColor;transition:.45s var(--e)}
.fq__s::before{left:0;right:0;top:5px;height:1px}
.fq__s::after{top:0;bottom:0;left:5px;width:1px}
.fq.open .fq__s::after{transform:rotate(90deg);opacity:0}
.fq__a{max-height:0;overflow:hidden;transition:max-height .65s var(--e)}
.fq__a p{padding-bottom:25px;max-width:64ch;color:var(--mut);font-size:15.3px}
/* glimpse card (quick commerce teaser) */
.glm{position:relative;border-radius:20px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);background:var(--card);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:0;align-items:stretch}
.glm__t{padding:clamp(26px,3.4vw,52px);display:flex;flex-direction:column;justify-content:center;gap:16px}
.glm__m{position:relative;min-height:250px;overflow:hidden}
.glm__m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 1.2s var(--e)}
.glm:hover .glm__m img{transform:scale(1.12)}
.glm__m::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--card),transparent 55%)}
.plat{display:flex;flex-wrap:wrap;gap:7px}
.plat span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border-radius:100px;box-shadow:inset 0 0 0 1px var(--line);color:var(--mut);transition:.35s var(--e)}
.plat span:hover{color:var(--green-b);box-shadow:inset 0 0 0 1px var(--green)}
/* finale */
.fin{position:relative;overflow:hidden;text-align:center;padding-block:clamp(76px,11vw,172px)}
.fin__bg{position:absolute;inset:0;background:url(../img/hero.webp) center/cover;opacity:.32;transform:scale(1.06)}
.fin__sc{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 50%,rgba(6,8,10,.6),var(--ink))}
.fin h2{font-family:var(--serif);font-weight:300;font-size:clamp(32px,7.4vw,116px);letter-spacing:-.04em;line-height:.96}
.fin p{margin:20px auto 0;max-width:42ch;color:var(--mut);font-size:15.5px}
.finb{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.fnote{margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
/* footer */
.ft{background:var(--ink2);padding-bottom:32px;font-size:13.8px;color:var(--mut)}
.ft__g{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(20px,3vw,44px);padding-block:clamp(42px,5.6vw,80px);border-top:1px solid var(--line-s)}
.ft h6{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:400;margin-bottom:12px}
.ft a{display:block;padding:5px 0;transition:color .3s}
.ft a:hover{color:var(--green-b)}
.ft img{height:25px;width:auto;margin-bottom:13px}
.notes{font-family:var(--mono);font-size:11.5px;line-height:1.85;color:var(--dim);max-width:78ch}
.ft__n{padding-top:20px;border-top:1px solid var(--line-s);display:flex;flex-wrap:wrap;gap:10px 32px;justify-content:space-between;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
/* mobile bar */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:78;display:none;gap:10px;align-items:center;justify-content:space-between;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));background:rgba(10,14,17,.92);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 var(--line);transform:translateY(115%);transition:transform .55s var(--e)}
.mbar.on{transform:none}
.mbar p{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.mbar b{display:block;font-size:13px;color:var(--txt);font-weight:500;margin-top:2px;letter-spacing:0;text-transform:none;font-family:var(--sans)}
.mbar .btn{padding:12px 19px;font-size:13.2px}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
 .rv{opacity:1;transform:none}.ln>span{transform:none}#bg{display:none}#pre{display:none}
}
/* ============ quick commerce page ============ */
.qc-hero{position:relative;min-height:94svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(36px,6vh,74px);overflow:hidden;isolation:isolate}
.qc-hero__bg{position:absolute;inset:-8% 0 0;z-index:-3;background:url(../img/ph-quickcommerce.webp) center/cover no-repeat}
.qc-hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(36px,7vw,108px);line-height:.98;letter-spacing:-.038em;max-width:15ch;margin-bottom:clamp(20px,3.2vh,36px)}
.tick{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.tick span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);padding:7px 13px;border-radius:100px;box-shadow:inset 0 0 0 1px var(--line)}
.tick span b{color:var(--green-b);font-weight:400}
/* horizontal rail */
.rail{position:relative;height:340vh;--railpad:120px}
.rail__stick{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.rail__hd{padding-inline:var(--pad);max-width:var(--maxw);margin-inline:auto;width:100%;margin-bottom:clamp(20px,3vw,38px)}
.rail__t{display:flex;gap:clamp(12px,1.5vw,20px);padding-inline:var(--pad);will-change:transform}
.pc{flex:none;width:clamp(240px,25vw,330px);border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:14px;min-height:clamp(300px,46vh,420px);transition:.55s var(--e);position:relative;overflow:hidden}
.pc:hover{background:var(--card2);transform:translateY(-6px)}
.pc::after{content:"";position:absolute;inset:auto -30% -60% -30%;height:60%;background:radial-gradient(circle,rgba(76,189,142,.16),transparent 70%);opacity:0;transition:opacity .6s}
.pc:hover::after{opacity:1}
.pc__n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim)}
.pc h4{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.6vw,36px);letter-spacing:-.03em;line-height:1}
.pc__logo{height:24px;width:auto;filter:grayscale(1) brightness(0) invert(.8);opacity:.85;transition:.4s}
.pc:hover .pc__logo{filter:none;opacity:1}
.pc p{font-size:14px;color:var(--mut)}
.pc__f{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding-top:14px;border-top:1px solid var(--line-s)}
.pc__f b{display:block;font-family:var(--serif);font-weight:300;font-size:22px;color:var(--green-b);letter-spacing:-.02em}
.pc__f span{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);display:block;margin-top:4px}
.railbar{height:1px;background:var(--line-s);margin:clamp(18px,2.4vw,30px) var(--pad) 0;position:relative;overflow:hidden}
.railbar i{position:absolute;inset:0;background:var(--green);transform:scaleX(0);transform-origin:0}
/* checklist */
.chk{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1px;background:var(--line-s);border:1px solid var(--line-s)}
.chk div{background:var(--ink2);padding:22px 20px;transition:background .5s}
.chk div:hover{background:var(--card)}
.chk h5{font-size:15px;font-weight:500;margin-bottom:9px;display:flex;align-items:center;gap:9px}
.chk h5::before{content:"";width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--green);position:relative;flex:none;background:var(--tint)}
.chk p{font-size:13.6px;color:var(--mut)}
/* steps */
.steps{counter-reset:s}
.step{counter-increment:s;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,3vw,52px);padding-block:clamp(24px,3.4vw,46px);border-top:1px solid var(--line-s);align-items:baseline;transition:.5s var(--e)}
.step:hover{padding-left:8px}
.step::before{content:"0" counter(s);font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--green)}
.step h4{font-family:var(--serif);font-weight:300;font-size:clamp(21px,2.5vw,34px);letter-spacing:-.03em;line-height:1.05}
.step p{font-size:14.8px;color:var(--mut)}
@media (max-width:860px){
 .rail{height:auto;padding-block:clamp(50px,8vw,90px)}
 .rail__stick{position:static;height:auto;display:block}
 .rail__t{flex-direction:column;transform:none!important;padding-inline:var(--pad)}
 .pc{width:auto;min-height:0}
 .railbar{display:none}
 .step{grid-template-columns:auto 1fr;gap:12px}
 .step p{grid-column:2}
}

/* ============ v3 — rotating hero word ============ */
.rotwrap{display:inline-flex;align-items:baseline;position:relative;vertical-align:baseline}
.rot{position:relative;display:inline-grid;grid-auto-rows:1fr;overflow:visible;transition:width .72s var(--e);vertical-align:baseline;white-space:nowrap;justify-items:start}
.rot__w{grid-area:1/1;white-space:nowrap;font-style:italic;color:var(--green-b);opacity:0;pointer-events:none}
.rot:not(:has(.rot__w)){display:inline;font-style:italic;color:var(--green-b)}
.rot__w.on{opacity:1}
.rot__w i{display:inline-block;font-style:italic;transform:translateY(102%) rotate(6deg);opacity:0;
 transition:transform .72s var(--e),opacity .5s var(--e)}
.rot__w.on i{transform:none;opacity:1}
.rot__w.out i{transform:translateY(-106%) rotate(-5deg);opacity:0;transition:transform .6s var(--e2),opacity .38s ease}
.rot__m{position:absolute;left:0;top:0;visibility:hidden;white-space:nowrap;font-style:italic}
.rotline{position:absolute;left:0;right:0;bottom:-.06em;height:.085em;overflow:hidden;border-radius:99px}
.rotline::before{content:"";position:absolute;inset:0;
 background:repeating-linear-gradient(90deg,var(--green) 0 6px,rgba(76,189,142,.25) 6px 12px);
 background-size:200% 100%;animation:slide 2.4s linear infinite}
.rotline::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--green-b),transparent);
 transform:translateX(-100%)}
.rotline.go::after{animation:sweep .9s var(--e) 1}
@keyframes slide{to{background-position:-24px 0}}
@keyframes sweep{to{transform:translateX(100%)}}
/* particle logo stage */
.plogo{width:100%;height:100%;position:absolute;inset:0}
.stage{position:relative}
.stage .mono{z-index:3}
/* compare expansion */
.cmp__r{position:relative;cursor:pointer}
.cmp__r .cmp__b{transition:color .4s}
.cmp__x{grid-column:1/-1;max-height:0;overflow:hidden;transition:max-height .6s var(--e)}
.cmp__xi{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(14px,2vw,30px);
 padding:18px 0 6px;align-items:center}
.cmp__xi figure{border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);aspect-ratio:16/10;background:var(--card)}
.cmp__xi img{width:100%;height:100%;object-fit:cover}
.cmp__xi p{font-family:var(--sans);font-size:14.4px;color:var(--mut);letter-spacing:0;line-height:1.6}
.cmp__xi p b{color:var(--txt);font-weight:500}
.cmp__r.open{background:linear-gradient(90deg,rgba(76,189,142,.05),transparent)}
/* platform ring */
.ringwrap{position:relative;display:grid;place-items:center;aspect-ratio:16/11;min-height:260px}
.ring{position:relative;width:100%;height:100%;display:grid;place-items:center}
.ring::after{content:"";position:absolute;width:46%;aspect-ratio:1;border-radius:50%;
 background:radial-gradient(circle,rgba(76,189,142,.16),transparent 70%);filter:blur(20px)}
.ring__c{position:absolute;text-align:center;z-index:200;pointer-events:none}
.ring__c b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(19px,2.2vw,30px);letter-spacing:-.03em}
.ring__i{position:absolute;padding:9px 15px;border-radius:100px;background:rgba(10,14,17,.8);
 box-shadow:inset 0 0 0 1px var(--line);backdrop-filter:blur(6px);font-family:var(--mono);
 font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
 transition:box-shadow .35s,color .35s;will-change:transform}
.ring__i:hover{box-shadow:inset 0 0 0 1px var(--green);color:var(--green-b)}
/* captain cards */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(12px,1.6vw,22px)}
.cap{position:relative;border-radius:16px;overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);
 transition:transform .6s var(--e),box-shadow .6s var(--e)}
.cap:hover{transform:translateY(-7px);box-shadow:inset 0 0 0 1px var(--green),0 26px 50px -30px #000}
.cap__p{aspect-ratio:4/5;overflow:hidden;position:relative;background:#111}
.cap__p img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 1.1s var(--e),filter .7s}
.cap:hover .cap__p img{transform:scale(1.06)}
.cap__p::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(6,8,10,.92))}
.cap__r{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--green-b);padding:5px 10px;border-radius:100px;background:rgba(6,8,10,.6);
 box-shadow:inset 0 0 0 1px var(--line)}
.cap__n{position:absolute;left:16px;right:16px;bottom:14px;z-index:2}
.cap__n h5{font-family:var(--serif);font-weight:300;font-size:clamp(21px,2.2vw,30px);letter-spacing:-.03em}
.cap__n span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);display:block;margin-top:4px}
.cap__b{padding:16px 16px 20px;font-size:13.8px;color:var(--mut)}
.cap__b em{font-style:italic;color:var(--txt);display:block;margin-top:10px;font-family:var(--serif);font-size:15.5px}
/* work case cards */
.cases--work{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.wk{position:relative;border-radius:16px;overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column}
.wk__m{aspect-ratio:3/2;overflow:hidden;position:relative;background:#0C1114}
.wk__m img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.1s var(--e)}
.wk:hover .wk__m img{transform:scale(1.12)}
.wk__k{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--mono);font-size:9px;letter-spacing:.13em;
 text-transform:uppercase;padding:5px 10px;border-radius:100px;background:rgba(6,8,10,.62);box-shadow:inset 0 0 0 1px var(--line)}
.wk__b{padding:18px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.wk__b h4{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.1vw,28px);letter-spacing:-.03em;line-height:1.05}
.wk__b p{font-size:13.9px;color:var(--mut)}
.wk__f{margin-top:auto;padding-top:13px;border-top:1px solid var(--line-s);display:flex;justify-content:space-between;align-items:center;gap:10px}
.wk__f span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.wk__f b{font-family:var(--mono);font-size:10px;color:var(--green-b);font-weight:400}
/* inner page hero */
.phero{position:relative;min-height:74svh;display:flex;flex-direction:column;justify-content:flex-end;
 padding-block:clamp(120px,17vh,190px) clamp(30px,5vh,60px);overflow:hidden;isolation:isolate}
.phero__bg{position:absolute;inset:-8% 0 0;z-index:-3;background-size:cover;background-position:center}
.phero h1{font-family:var(--serif);font-weight:300;font-size:clamp(34px,6.4vw,96px);line-height:1;letter-spacing:-.038em;max-width:16ch}
.phero .lead{margin-top:20px;font-size:clamp(15px,1.2vw,18px)}
.crumb{display:flex;gap:10px;align-items:center;margin-bottom:18px}
.crumb a{color:var(--dim);transition:color .3s}
.crumb a:hover{color:var(--green-b)}
.pgnav{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,3vw,34px)}
.pgnav a{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:9px 15px;
 border-radius:100px;box-shadow:inset 0 0 0 1px var(--line);color:var(--mut);transition:.35s var(--e)}
.pgnav a:hover{color:var(--green-b);box-shadow:inset 0 0 0 1px var(--green)}
/* deep content blocks */
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1px;background:var(--line-s);border:1px solid var(--line-s)}
.dgrid>div{background:var(--ink2);padding:clamp(20px,2.4vw,32px);transition:background .5s}
.dgrid>div:hover{background:var(--card)}
.dgrid h4{font-family:var(--serif);font-weight:300;font-size:clamp(19px,2vw,27px);letter-spacing:-.03em;margin-bottom:10px}
.dgrid p{font-size:14.2px;color:var(--mut)}
.dgrid .mono{margin-bottom:12px;display:block}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3.4vw,60px);align-items:center}
.split figure{border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);aspect-ratio:4/3;background:var(--card)}
.split figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.03) translateY(var(--py,0px));transition:transform 1.2s var(--e)}
.split:hover figure img{transform:scale(1.08) translateY(var(--py,0px))}

/* ================================================================
   PROPORTIONAL SHRINK — the desktop composition scales down instead
   of collapsing into a single stacked column. Columns are preserved;
   type and spacing ride vw with readable floors.
   ================================================================ */
@media (max-width:1180px){
 :root{--pad:clamp(16px,3.6vw,44px)}
 .sys{grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:clamp(18px,3vw,34px)}
 .sys__v{grid-column:1/-1;position:relative;top:auto;aspect-ratio:16/9;order:-1;margin-bottom:16px}
 .sys__i{position:sticky;top:84px}
}
@media (max-width:860px){
 :root{--pad:clamp(13px,3.4vw,22px);--maxw:100%}
 body{font-size:clamp(12.6px,3.35vw,15px);line-height:1.55}
 .sec{padding-block:clamp(42px,9vw,74px)}
 h2.d{font-size:clamp(21px,5.6vw,34px)}
 h3.d{font-size:clamp(17px,4.4vw,26px)}
 .lead{font-size:clamp(12.6px,3.3vw,15px)}
 .mono{font-size:clamp(8px,2.1vw,9.5px);letter-spacing:.13em}
 .lab{margin-bottom:clamp(16px,4vw,28px)}
 .btn{padding:clamp(10px,2.8vw,13px) clamp(15px,4vw,22px);font-size:clamp(11.5px,3vw,13.5px)}
 .btn--lg{padding:clamp(12px,3.2vw,15px) clamp(17px,4.4vw,25px);font-size:clamp(12px,3.2vw,14px)}
 /* nav keeps its shape, just smaller */
 .nav__in{padding:11px var(--pad)}
 .brand img{height:clamp(17px,4.6vw,22px)}
 .nav__l{display:flex;gap:clamp(9px,2.6vw,16px);font-size:clamp(9.5px,2.5vw,12px)}
 .nav__r .btn{display:inline-flex}
 .burg{display:none}
 .snd{width:29px;height:29px}
 .nav.cond .nav__in{max-width:none;margin-top:0;border-radius:0;padding:9px var(--pad)}
 /* hero keeps its two-part footer */
 .hero,.qc-hero,.phero{padding-top:clamp(84px,17vh,120px)}
 .hero h1,.qc-hero h1{font-size:clamp(27px,8.4vw,52px);max-width:14ch}
 .phero h1{font-size:clamp(24px,7.6vw,46px)}
 .hero__top{top:clamp(60px,10vh,88px)}
 .pill{padding:6px 11px;font-size:clamp(7.5px,2.05vw,9px);gap:6px}
 .pill b{width:5px;height:5px}
 .hero__ft{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(12px,3vw,24px);align-items:end}
 .cta{justify-content:flex-end;gap:7px}
 .hstats{gap:clamp(10px,3vw,22px);padding-top:14px;margin-top:clamp(16px,3.4vw,26px)}
 .hstat b{font-size:clamp(14px,4vw,22px)}
 .hstat span{font-size:clamp(7px,1.9vw,8.6px);margin-top:5px}
 /* signature compositions stay side-by-side, scaled */
 .mani{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(10px,2.6vw,22px)}
 .mani p{font-size:clamp(15px,4.4vw,28px);line-height:1.18}
 .stage{aspect-ratio:1}
 .fnd{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(12px,3vw,26px)}
 .fnd blockquote{font-size:clamp(14px,4vw,25px)}
 .fnd__sig{gap:9px;margin-top:16px}
 .fnd__sig .nm{font-size:17px}
 .glm{grid-template-columns:minmax(0,1fr) minmax(0,.78fr)}
 .glm__t{padding:clamp(16px,3.6vw,28px);gap:11px}
 .glm__m{min-height:0}
 .glm__m::after{background:linear-gradient(90deg,var(--card),transparent 55%)}
 .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,3vw,26px)}
 /* card grids shrink instead of stacking */
 .nums{grid-template-columns:1fr 1fr}
 .num{padding:clamp(13px,3.4vw,22px)}
 .num__v{font-size:clamp(25px,7vw,44px)}
 .num__l{font-size:clamp(11px,2.9vw,13px);margin-top:8px}
 .num__s{height:22px;margin-top:10px}
 .proc,.eng__g,.chk,.dgrid{grid-template-columns:1fr 1fr}
 .ph{padding:clamp(13px,3.2vw,20px)}
 .ph h4{font-size:clamp(15px,4vw,23px);margin:6px 0}
 .ph p,.ec p,.chk p,.dgrid p{font-size:clamp(11px,2.85vw,13px)}
 .ph em{font-size:34px;right:10px;top:7px}
 .cases,.cases--work,.tst,.team,.caps{grid-template-columns:1fr 1fr;gap:clamp(8px,2.2vw,14px)}
 .cs__b,.wk__b,.cap__b{padding:clamp(11px,2.8vw,16px)}
 .cs__b h4,.wk__b h4{font-size:clamp(12.5px,3.2vw,17px)}
 .cs__b p,.wk__b p,.cap__b{font-size:clamp(10.5px,2.75vw,12.6px)}
 .cs__n{font-size:clamp(20px,5.6vw,36px);left:12px;bottom:10px}
 .cs__ar{width:28px;height:28px}
 .tc{padding:clamp(13px,3.2vw,20px);gap:12px}
 .tc blockquote{font-size:clamp(12.5px,3.4vw,19px)}
 .tc__w img{width:32px;height:32px}
 .tc__w b{font-size:12px}
 .cap__n h5{font-size:clamp(14px,3.8vw,21px)}
 .sys{grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:clamp(12px,3vw,22px)}
 .sys__i li{padding:7px 0}
 .sys__i li span{font-size:clamp(13px,3.6vw,22px)}
 .blk{padding-block:clamp(16px,4vw,32px)}
 .blk__d{font-size:clamp(11.5px,2.95vw,13.6px);margin-top:8px}
 .tag,.stack span,.plat span,.tick span{font-size:clamp(8px,2.1vw,9.6px);padding:5px 9px}
 .tags{gap:5px;margin-top:12px}
 .blk__p{font-size:clamp(11px,2.8vw,13px);margin-top:12px;padding-left:11px}
 .cmp__r div{font-size:clamp(11.5px,3.1vw,17px);line-height:1.2}
 .cmp__xi{grid-template-columns:minmax(0,.6fr) minmax(0,1fr);gap:10px;padding-top:12px}
 .cmp__xi p{font-size:clamp(10.5px,2.7vw,12.5px)}
 .srow{padding:9px 0}
 .srow b{font-size:clamp(13px,3.5vw,20px)}
 .srow i{font-size:clamp(8px,2.1vw,9.5px)}
 .fq__q{font-size:clamp(13px,3.5vw,20px);padding:clamp(11px,2.9vw,18px) 0}
 .fq__a p{font-size:clamp(11.5px,2.95vw,13.6px);padding-bottom:16px}
 .fin{padding-block:clamp(50px,11vw,90px)}
 .fin h2{font-size:clamp(26px,8.6vw,58px)}
 .fin p{font-size:clamp(12px,3.1vw,14px)}
 .step{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:clamp(9px,2.4vw,20px);padding-block:clamp(13px,3.2vw,24px)}
 .step h4{font-size:clamp(14px,3.8vw,22px)}
 .step p{font-size:clamp(11px,2.85vw,13px)}
 .ft__g{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(10px,2.6vw,20px);padding-block:clamp(28px,6vw,50px)}
 .ft{font-size:clamp(10.5px,2.7vw,12.5px)}
 .ft img{height:19px}
 .ft h6{font-size:8px;margin-bottom:8px}
 .notes{font-size:9.5px;line-height:1.7}
 .ft__n{font-size:8px;gap:6px 16px}
 .pc{width:clamp(180px,54vw,240px);min-height:0;padding:16px}
 .pc h4{font-size:clamp(16px,4.4vw,24px)}
 .pc p{font-size:clamp(10.5px,2.7vw,12.5px)}
 .pgnav a{font-size:8.5px;padding:7px 11px}
 .mbar{display:none}
 #chap{display:none}.cur,.curT{display:none}
 .ringwrap{min-height:190px}
 .ring__i{font-size:8px;padding:6px 9px}
}
@media (max-width:520px){
 .hero__ft{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
 .cta{flex-direction:column;align-items:flex-end}
 .nav__l{display:none}
 .burg{display:grid;width:32px;height:32px}
 .nav__r .btn{padding:9px 13px;font-size:11px}
 .ft__g{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
 .rv{opacity:1;transform:none}.ln>span{transform:none}#bg{display:none}#pre{display:none}
 .rot__w i{transform:none;opacity:1}
}

.hero h1 .ln,.qc-hero h1 .ln,.fin h2 .ln{padding-bottom:.24em;margin-bottom:-.18em}
.rotline{bottom:0}

/* ============ case study pages ============ */
.chero{position:relative;min-height:82svh;display:flex;flex-direction:column;justify-content:flex-end;
 padding-block:clamp(110px,16vh,180px) clamp(28px,5vh,56px);overflow:hidden;isolation:isolate}
.chero__bg{position:absolute;inset:-6% 0 0;z-index:-3;background-size:cover;background-position:center;filter:saturate(.8)}
.chero__sc{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,8,10,.86) 0%,rgba(6,8,10,.55) 40%,rgba(6,8,10,.92) 82%,var(--ink) 100%)}
.chero h1{font-family:var(--serif);font-weight:300;font-size:clamp(36px,8vw,120px);line-height:.94;letter-spacing:-.042em}
.cmeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(50%,150px),1fr));gap:1px;background:var(--line-s);
 border:1px solid var(--line-s);margin-top:clamp(22px,3.4vw,40px)}
.cmeta div{background:rgba(10,14,17,.72);backdrop-filter:blur(6px);padding:15px 16px}
.cmeta b{display:block;font-size:14.5px;font-weight:500;margin-top:6px}
/* gallery */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.3vw,18px)}
.gi{position:relative;border-radius:14px;overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);
 cursor:zoom-in;opacity:0;transform:translateY(34px) scale(.985)}
.gi.in{opacity:1;transform:none;transition:opacity 1s var(--e),transform 1.1s var(--e)}
.gi img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--e),filter .6s}
.gi:hover img{transform:scale(1.05)}
.gi::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(6,8,10,.5));opacity:0;transition:opacity .5s}
.gi:hover::after{opacity:1}
.gi__n{position:absolute;right:12px;bottom:10px;z-index:2;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
 color:var(--txt);opacity:0;transform:translateY(6px);transition:.45s var(--e)}
.gi:hover .gi__n{opacity:1;transform:none}
.g-w7{grid-column:span 7}.g-w5{grid-column:span 5}.g-w6{grid-column:span 6}
.g-w4{grid-column:span 4}.g-w8{grid-column:span 8}.g-w12{grid-column:span 12}
.g-t{aspect-ratio:4/5}.g-s{aspect-ratio:1}.g-l{aspect-ratio:16/10}.g-p{aspect-ratio:3/4}
/* lightbox */
.lb{position:fixed;inset:0;z-index:9993;background:rgba(4,6,7,.94);backdrop-filter:blur(14px);
 display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,54px);
 opacity:0;pointer-events:none;transition:opacity .45s var(--e)}
.lb.on{opacity:1;pointer-events:auto}
.lb img{max-width:100%;max-height:84svh;object-fit:contain;border-radius:10px;
 transform:scale(.96);transition:transform .55s var(--e);box-shadow:0 40px 90px -40px #000}
.lb.on img{transform:none}
.lb__x,.lb__p,.lb__nx{position:absolute;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
 box-shadow:inset 0 0 0 1px var(--line);background:rgba(10,14,17,.7);transition:.35s var(--e);z-index:3}
.lb__x:hover,.lb__p:hover,.lb__nx:hover{background:var(--green);color:var(--ink);box-shadow:none}
.lb__x{top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px)}
.lb__p{left:clamp(10px,2.4vw,26px);top:50%;transform:translateY(-50%)}
.lb__nx{right:clamp(10px,2.4vw,26px);top:50%;transform:translateY(-50%)}
.lb__c{position:absolute;bottom:clamp(14px,3vw,26px);left:50%;transform:translateX(-50%);font-family:var(--mono);
 font-size:10px;letter-spacing:.16em;color:var(--mut)}
/* story blocks */
.story{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(18px,3.4vw,64px);align-items:start}
.story h3{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.4vw,32px);letter-spacing:-.03em;line-height:1.06}
.story p{color:var(--mut);font-size:15.2px}
.story p+p{margin-top:12px}
.story__b{padding-block:clamp(24px,3.6vw,52px);border-top:1px solid var(--line-s)}
.story__b:first-child{border-top:none;padding-top:0}
/* next project */
.nextp{position:relative;display:block;overflow:hidden;border-radius:18px;box-shadow:inset 0 0 0 1px var(--line);
 min-height:clamp(190px,26vw,320px);display:grid;place-items:center;text-align:center;background:var(--card)}
.nextp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34;transform:scale(1.04);
 transition:transform 1.3s var(--e),opacity .7s}
.nextp:hover img{transform:scale(1.1);opacity:.5}
.nextp__t{position:relative;z-index:2;padding:20px}
.nextp__t b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(26px,4.4vw,58px);letter-spacing:-.04em;margin-top:8px}

/* ================================================================
   MOBILE PASS 2 — founder composition, galleries, case pages,
   lightbox ergonomics and always-reachable CTA
   ================================================================ */
@media (max-width:1040px){
 .story{grid-template-columns:minmax(0,.46fr) minmax(0,1fr);gap:clamp(14px,2.6vw,34px)}
 .cmeta{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
 /* founder — image column now fills the row and crops on the face */
 .fnd{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:stretch;gap:clamp(10px,2.6vw,20px)}
 .fnd__m{height:100%;border-radius:14px}
 .fnd__m img{aspect-ratio:auto;height:100%;min-height:clamp(200px,52vw,330px);object-position:50% 18%}
 .fnd>div:last-child{display:flex;flex-direction:column;justify-content:center}
 .fnd blockquote{font-size:clamp(13px,3.7vw,22px);line-height:1.2}
 .fnd .lead{margin-top:10px!important}
 .fnd__cap{left:10px;right:10px;bottom:9px}
 .fnd__cap b{font-size:12px}
 .fnd__sig{margin-top:12px;gap:8px}
 .fnd__sig .nm{font-size:15px}
 .fnd__sig .btn{padding:9px 14px;font-size:11.5px}
 .sold{grid-template-columns:1fr 1fr;margin-top:14px}
 .sold div{padding:11px 12px}
 .sold b{font-size:clamp(14px,3.8vw,22px)}
 .sold span{font-size:7.6px;margin-top:5px}
 /* case pages */
 .chero{min-height:70svh;padding-top:clamp(84px,17vh,120px)}
 .chero h1{font-size:clamp(28px,9vw,60px)}
 .cmeta{grid-template-columns:1fr 1fr;margin-top:16px}
 .cmeta div{padding:10px 11px}
 .cmeta b{font-size:11.5px;margin-top:4px}
 .story{grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(10px,2.6vw,22px)}
 .story h3{font-size:clamp(14px,3.9vw,23px)}
 .story p{font-size:clamp(11.5px,2.95vw,13.5px)}
 .story__b{padding-block:clamp(14px,3.4vw,26px)}
 /* gallery — spans collapse to a clean two-up */
 .gal{gap:8px}
 .g-w4,.g-w5,.g-w6,.g-w7{grid-column:span 6}
 .g-w8,.g-w12{grid-column:span 12}
 .gi{border-radius:10px}
 .nextp{min-height:clamp(140px,34vw,210px)}
 .nextp__t b{font-size:clamp(20px,6.4vw,38px)}
 /* lightbox */
 .lb__x,.lb__p,.lb__nx{width:38px;height:38px}
 .lb img{max-height:76svh}
 .lb__c{font-size:8.5px}
 /* misc */
 .phero{min-height:62svh}
 .pgnav{gap:6px;margin-top:16px}
 .split figure{aspect-ratio:1}
 .glm__t .btn{padding:10px 15px;font-size:12px}
 .crumb{margin-bottom:12px;gap:7px}
}
@media (max-width:520px){
 /* the CTA must never disappear: bar returns once the nav button is dropped */
 .mbar{display:flex}
 .nav__r .btn{display:none}
 .hero__top>.mono{display:none}
 .hero__ft{grid-template-columns:1fr;gap:14px}
 .cta{flex-direction:row;justify-content:flex-start;flex-wrap:wrap}
 .hero__sup{max-width:100%}
 .fnd{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
 .fnd blockquote{font-size:clamp(12.5px,4.2vw,18px)}
 .cmeta{grid-template-columns:1fr 1fr}
 .g-w4,.g-w5,.g-w6,.g-w7{grid-column:span 6}
 .mani{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:8px}
 .mani p{font-size:clamp(14px,4.8vw,22px)}
 .cases,.cases--work,.tst,.team,.caps{gap:7px}
 .proc,.eng__g,.chk,.dgrid,.nums{grid-template-columns:1fr 1fr}
 .step{grid-template-columns:auto 1fr;gap:8px}
 .step p{grid-column:2/-1;margin-top:4px}
 .ringwrap{min-height:160px}
 .sec{padding-block:clamp(34px,8vw,56px)}
 body{padding-bottom:56px}
}
@media (max-width:380px){
 .cases,.cases--work,.tst,.caps,.team{grid-template-columns:1fr}
 .hstats>.hstat:nth-child(3){display:none}
 .ft__g{grid-template-columns:1fr}
}

/* static mark fallback — visible until the wireframe canvas paints */
.stage .fbk{position:absolute;width:56%;max-width:320px;opacity:.9;transition:opacity .8s var(--e);z-index:1}
.stage.live .fbk{opacity:0}
.plogo{z-index:2}

/* ============ brand-book slides — one section per spread ============ */
.slides{counter-reset:sl}
.sl{counter-increment:sl;padding-block:clamp(26px,4.4vw,72px);border-top:1px solid var(--line-s);
 display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);gap:clamp(16px,3vw,52px);align-items:start}
.sl:first-child{border-top:none;padding-top:0}
.sl__n{position:sticky;top:96px}
.sl__n b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(30px,4vw,58px);
 letter-spacing:-.04em;line-height:1;color:rgba(234,239,236,.14);transition:color .6s var(--e)}
.sl:hover .sl__n b{color:var(--green-b)}
.sl__n h4{font-family:var(--serif);font-weight:300;font-size:clamp(17px,2vw,26px);letter-spacing:-.03em;margin:10px 0 8px;line-height:1.1}
.sl__n p{font-size:13.6px;color:var(--mut)}
.sl__m{position:relative;border-radius:14px;overflow:hidden;background:var(--card);
 box-shadow:inset 0 0 0 1px var(--line);cursor:zoom-in;
 opacity:0;transform:translateY(38px) scale(.985)}
.sl__m.in{opacity:1;transform:none;transition:opacity 1s var(--e),transform 1.1s var(--e)}
.sl__m img{width:100%;height:auto;display:block;transition:transform 1.3s var(--e)}
.sl__m:hover img{transform:scale(1.035)}
.sl__m::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 60px rgba(0,0,0,.35);pointer-events:none}
.sl__z{position:absolute;right:12px;bottom:12px;z-index:2;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
 padding:6px 11px;border-radius:100px;background:rgba(6,8,10,.62);box-shadow:inset 0 0 0 1px var(--line);
 opacity:0;transform:translateY(6px);transition:.45s var(--e)}
.sl__m:hover .sl__z{opacity:1;transform:none}
@media (max-width:860px){
 .sl{grid-template-columns:minmax(0,.32fr) minmax(0,1fr);gap:10px;padding-block:clamp(14px,3.4vw,28px)}
 .sl__n{position:static}
 .sl__n b{font-size:clamp(18px,5vw,32px)}
 .sl__n h4{font-size:clamp(12.5px,3.3vw,18px);margin:5px 0 4px}
 .sl__n p{font-size:11px}
 .sl__m{border-radius:10px}
}

/* ============ work page: brand books ============ */
.books{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(12px,1.6vw,22px)}
.bk{position:relative;border-radius:18px;overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);
 display:block;isolation:isolate;transition:transform .7s var(--e),box-shadow .7s var(--e)}
.bk:hover{transform:translateY(-8px);box-shadow:inset 0 0 0 1px var(--green),0 30px 60px -34px #000}
.bk__m{aspect-ratio:4/3;overflow:hidden;position:relative;background:#0C1114}
.bk__m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s var(--e),transform 1.3s var(--e)}
.bk__m img+img{opacity:0}
.bk:hover .bk__m img{transform:scale(1.06)}
.bk:hover .bk__m img:first-child{opacity:0}
.bk:hover .bk__m img+img{opacity:1}
.bk__m::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(6,8,10,.92))}
.bk__tag{position:absolute;top:13px;left:13px;z-index:3;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
 text-transform:uppercase;padding:6px 11px;border-radius:100px;background:rgba(6,8,10,.6);
 box-shadow:inset 0 0 0 1px var(--line);color:var(--green-b)}
.bk__c{position:absolute;top:13px;right:13px;z-index:3;font-family:var(--mono);font-size:9px;letter-spacing:.12em;
 color:var(--mut);display:flex;gap:4px;align-items:center}
.bk__c i{display:block;width:5px;height:5px;border-radius:1px;background:var(--green);opacity:.35;transition:.4s var(--e)}
.bk:hover .bk__c i{opacity:1}
.bk:hover .bk__c i:nth-child(2){transition-delay:.06s}
.bk:hover .bk__c i:nth-child(3){transition-delay:.12s}
.bk__t{position:absolute;left:16px;right:16px;bottom:14px;z-index:3}
.bk__t h4{font-family:var(--serif);font-weight:300;font-size:clamp(21px,2.3vw,31px);letter-spacing:-.035em;line-height:1}
.bk__t span{display:block;font-size:12.6px;color:var(--mut);margin-top:6px}
.bk__b{padding:15px 16px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.bk__b p{font-size:13.4px;color:var(--mut);max-width:30ch}
.bk__ar{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
 box-shadow:inset 0 0 0 1px var(--line);transition:.5s var(--e)}
.bk:hover .bk__ar{background:var(--green);color:var(--ink);box-shadow:none;transform:rotate(45deg)}
.bk--wide{grid-column:span 2}
@media (max-width:860px){
 .books{grid-template-columns:1fr 1fr;gap:8px}
 .bk--wide{grid-column:span 2}
 .bk__t h4{font-size:clamp(14px,3.8vw,22px)}
 .bk__t span{font-size:10.5px;margin-top:4px}
 .bk__b{padding:11px 12px 14px}
 .bk__b p{font-size:11px}
 .bk__ar{width:26px;height:26px}
}
@media (max-width:380px){.books{grid-template-columns:1fr}.bk--wide{grid-column:span 1}}

/* ============ work page: five disciplines ============ */
.svcs{border-top:1px solid var(--line)}
.svc{border-bottom:1px solid var(--line-s);position:relative}
.svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--green);
 transform:scaleY(0);transform-origin:top;transition:transform .6s var(--e)}
.svc.near::before{transform:scaleY(1)}
.svc__h{width:100%;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:clamp(12px,2.4vw,32px);
 padding:clamp(16px,2.6vw,30px) 0 clamp(16px,2.6vw,30px) 0;text-align:left;transition:padding-left .6s var(--e)}
.svc.near .svc__h,.svc.open .svc__h{padding-left:clamp(12px,1.6vw,22px)}
.svc__n{color:var(--dim);transition:color .5s}
.svc.near .svc__n,.svc.open .svc__n{color:var(--green)}
.svc__ttl{font-family:var(--serif);font-weight:300;font-size:clamp(24px,4.4vw,62px);letter-spacing:-.04em;line-height:1;
 color:rgba(234,239,236,.45);transition:color .55s var(--e)}
.svc.near .svc__ttl{color:var(--txt)}
.svc.open .svc__ttl{color:var(--green-b)}
.svc__c{color:var(--dim);white-space:nowrap}
.svc__x{width:13px;height:13px;position:relative;flex:none}
.svc__x::before,.svc__x::after{content:"";position:absolute;background:currentColor;transition:.5s var(--e)}
.svc__x::before{left:0;right:0;top:6px;height:1px}
.svc__x::after{top:0;bottom:0;left:6px;width:1px}
.svc.open .svc__x::after{transform:rotate(90deg);opacity:0}
.svc__p{max-height:0;overflow:hidden;transition:max-height .75s var(--e)}
.svc__pi{padding:0 0 clamp(22px,3vw,36px)}
.svc__d{color:var(--mut);max-width:56ch;margin-bottom:clamp(14px,2vw,22px);font-size:15px}
.sps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,178px),1fr));gap:clamp(9px,1.2vw,16px)}
.sp{display:block;border-radius:14px;overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);
 opacity:0;transform:translateY(20px);transition:opacity .6s var(--e),transform .6s var(--e),box-shadow .5s var(--e)}
.svc.open .sp{opacity:1;transform:none}
.svc.open .sp:nth-child(2){transition-delay:.06s}.svc.open .sp:nth-child(3){transition-delay:.12s}
.svc.open .sp:nth-child(4){transition-delay:.18s}.svc.open .sp:nth-child(5){transition-delay:.24s}
.svc.open .sp:nth-child(6){transition-delay:.3s}
.sp:hover{box-shadow:inset 0 0 0 1px var(--green)}
.sp__m{display:block;aspect-ratio:4/3;overflow:hidden;position:relative;background:#0C1114}
.sp__m img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e)}
.sp:hover .sp__m img{transform:scale(1.08)}
.sp__t{display:block;padding:11px 13px 14px}
.sp__t b{display:block;font-size:14px;font-weight:500}
.sp__t i{display:block;font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.12em;
 text-transform:uppercase;color:var(--dim);margin-top:5px}
@media (max-width:860px){
 .svc__h{grid-template-columns:auto 1fr auto;gap:10px;padding-block:clamp(11px,2.8vw,18px)}
 .svc__c{display:none}
 .svc__ttl{font-size:clamp(17px,5.2vw,32px)}
 .sps{grid-template-columns:1fr 1fr;gap:7px}
 .sp__t{padding:8px 9px 11px}
 .sp__t b{font-size:11.5px}
 .sp__t i{font-size:7.6px;margin-top:3px}
 .svc__d{font-size:12px;margin-bottom:12px}
}

/* ============ full-frame project reel — one brand at a time ============ */
.reel{position:relative;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.reel__t{display:flex;gap:clamp(12px,1.4vw,22px);will-change:transform;padding-inline:clamp(12px,3vw,44px);
 cursor:grab;touch-action:pan-y}
.reel__t.drag{cursor:grabbing}
.rl{flex:0 0 auto;width:min(1080px,86vw);position:relative;border-radius:18px;overflow:hidden;
 background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:block;
 transition:box-shadow .5s var(--e),transform .6s var(--e)}
.rl:hover{box-shadow:inset 0 0 0 1px var(--green),0 34px 70px -40px #000}
.rl__m{aspect-ratio:16/9;position:relative;overflow:hidden;background:#0C1114}
.rl__m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 transition:opacity .8s var(--e),transform 1.4s var(--e)}
.rl__m img+img{opacity:0}
.rl:hover .rl__m img:first-child{opacity:0}
.rl:hover .rl__m img+img{opacity:1;transform:scale(1.04)}
.rl__m::after{content:"";position:absolute;inset:0;
 background:linear-gradient(90deg,rgba(6,8,10,.72),rgba(6,8,10,.1) 55%),linear-gradient(0deg,rgba(6,8,10,.8),transparent 45%)}
.rl__i{position:absolute;left:clamp(20px,3vw,46px);right:clamp(20px,3vw,46px);bottom:clamp(18px,2.6vw,38px);z-index:2;
 display:flex;justify-content:space-between;align-items:flex-end;gap:18px}
.rl__i h4{font-family:var(--serif);font-weight:300;font-size:clamp(24px,3.4vw,54px);letter-spacing:-.04em;line-height:1}
.rl__i p{font-size:clamp(12.5px,1.15vw,15.5px);color:#C0CBC5;max-width:46ch;margin-top:10px}
.rl__k{position:absolute;top:clamp(16px,2.2vw,30px);left:clamp(20px,3vw,46px);z-index:2;font-family:var(--mono);
 font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;padding:7px 13px;border-radius:100px;
 background:rgba(6,8,10,.55);box-shadow:inset 0 0 0 1px var(--line);color:var(--green-b);backdrop-filter:blur(6px)}
.rl__c{position:absolute;top:clamp(16px,2.2vw,30px);right:clamp(20px,3vw,46px);z-index:2;font-family:var(--mono);
 font-size:9.5px;letter-spacing:.13em;color:var(--mut)}
.rl__ar{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);background:rgba(6,8,10,.4);backdrop-filter:blur(6px);
 transition:.5s var(--e)}
.rl:hover .rl__ar{background:var(--green);color:var(--ink);box-shadow:none;transform:rotate(45deg)}
.reel__f{display:flex;align-items:center;gap:14px;margin-top:clamp(12px,1.6vw,20px)}
.reel__b{flex:1;height:1px;background:var(--line-s);position:relative;overflow:hidden}
.reel__b i{position:absolute;inset:0;background:var(--green);transform-origin:0;transform:scaleX(0)}
.reel__h{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
@media (max-width:860px){
 .rl{width:88vw;border-radius:13px}
 .rl__m{aspect-ratio:4/3}
 .rl__i{left:14px;right:14px;bottom:13px;gap:10px}
 .rl__i h4{font-size:clamp(17px,5.4vw,30px)}
 .rl__i p{font-size:11px;margin-top:6px;max-width:30ch}
 .rl__ar{width:32px;height:32px}
 .rl__k,.rl__c{font-size:8px;padding:5px 9px;top:12px;left:14px}
 .rl__c{right:14px;padding:0;background:none;box-shadow:none}
 .reel__t{gap:9px;padding-inline:6vw}
}
@media (prefers-reduced-motion:reduce){.reel__t{transform:none!important}}

/* ================= review pass: header, urgency, founder, team, footer ================= */
/* header — glass from the very start, logo larger, shrinking on scroll */
.nav__in{max-width:calc(var(--maxw) - 40px);margin-top:12px;padding:12px 12px 12px 20px;border-radius:100px;
 background:rgba(10,14,17,.42);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 18px 44px -30px #000}
.nav.cond .nav__in{max-width:880px;margin-top:9px;padding:8px 8px 8px 17px;
 background:rgba(10,14,17,.76);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 22px 52px -26px #000}
.brand img{height:34px;transition:height .6s var(--e),opacity .4s var(--e)}
.nav.cond .brand img{height:26px}
.brand .mk{height:34px;width:34px}
.nav.cond .brand .mk{height:26px;width:26px}
/* urgency pill — clearer promise, still calm */
.pill.red b{background:var(--red);box-shadow:0 0 0 0 rgba(255,75,62,.55)}
.pill.red{letter-spacing:.12em}
/* founder block — mobile composition fixed properly */
@media (max-width:860px){
 .fnd{grid-template-columns:1fr;gap:14px;align-items:start}
 .fnd__m{height:auto;border-radius:14px;max-width:none}
 .fnd__m img{aspect-ratio:16/11;height:auto;min-height:0;object-position:50% 22%}
 .fnd blockquote{font-size:clamp(15px,4.6vw,26px);line-height:1.24}
 .fnd .lead{font-size:clamp(12px,3.2vw,14px)}
 .fnd__sig{flex-wrap:wrap;gap:10px}
 .fnd__sig .mono{width:100%;order:3}
 .sold{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
 .fnd__m img{aspect-ratio:4/3;object-position:50% 20%}
 .fnd blockquote{font-size:clamp(14px,5vw,20px)}
}
/* team — one card per row, larger, more detail */
.crew{display:grid;gap:clamp(12px,1.6vw,20px)}
.cw{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:0;border-radius:18px;overflow:hidden;
 background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .6s var(--e),transform .6s var(--e)}
.cw:hover{box-shadow:inset 0 0 0 1px var(--green),0 30px 60px -40px #000;transform:translateY(-4px)}
.cw__m{position:relative;overflow:hidden;background:#111;min-height:clamp(220px,26vw,340px)}
.cw__m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
 filter:grayscale(1) contrast(1.05);transition:filter .8s var(--e),transform 1.2s var(--e)}
.cw:hover .cw__m img{filter:grayscale(1) contrast(1.12) brightness(1.06);transform:scale(1.04)}
.cw__m::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,rgba(16,22,26,.9))}
.cw__b{padding:clamp(20px,2.6vw,40px);display:flex;flex-direction:column;justify-content:center;gap:12px}
.cw__r{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.cw__b h4{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.6vw,50px);letter-spacing:-.04em;line-height:1}
.cw__b p{font-size:clamp(13px,1.05vw,15.4px);color:var(--mut);max-width:56ch}
.cw__q{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(15px,1.5vw,21px);
 color:var(--txt);padding-left:14px;border-left:1px solid var(--green);margin-top:4px}
.cw__t{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cw__t span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
 padding:6px 11px;border-radius:100px;box-shadow:inset 0 0 0 1px var(--line);color:var(--mut)}
@media (max-width:860px){
 .cw{grid-template-columns:minmax(0,.44fr) minmax(0,1fr)}
 .cw__m{min-height:0}
 .cw__b{padding:13px 14px;gap:7px}
 .cw__b h4{font-size:clamp(17px,4.6vw,26px)}
 .cw__b p{font-size:clamp(10.8px,2.85vw,12.8px)}
 .cw__q{font-size:clamp(11.5px,3vw,14px);padding-left:9px;margin-top:2px}
 .cw__t{gap:4px}
 .cw__t span{font-size:7.6px;padding:4px 8px}
 .cw__r{font-size:8px}
}
@media (max-width:520px){.cw{grid-template-columns:1fr}.cw__m{aspect-ratio:4/3}.cw__m::after{background:linear-gradient(0deg,rgba(16,22,26,.92),transparent 55%)}}
/* footer mark animation */
.ftmark{position:relative;display:grid;place-items:center;padding:clamp(30px,5vw,70px) 0 clamp(10px,2vw,24px);
 border-top:1px solid var(--line-s)}
.ftmark canvas{width:min(340px,64vw);aspect-ratio:1;display:block}
.ftmark .fbk{position:absolute;width:min(190px,36vw);opacity:.85;transition:opacity .8s var(--e)}
.ftmark.live .fbk{opacity:0}
.ftmark__t{position:absolute;bottom:clamp(4px,1.4vw,14px);text-align:center;pointer-events:none}
.ftmark__t b{display:block;font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(15px,1.8vw,24px);
 letter-spacing:-.02em;color:var(--txt)}

/* ================= alignment pass: overflow guards & optical fixes ================= */
/* every two-column grid gets a zero min so long words can't push a track wide */
.cmp__h,.cmp__r,.cmp__xi,.sys,.mani,.fnd,.glm,.split,.story,.sl,.cw,.step,.hero__ft{min-width:0}
.cmp__h>*,.cmp__r>*,.cmp__xi>*,.sys>*,.mani>*,.fnd>*,.glm>*,.split>*,.story>*,.sl>*,.cw>*,.hero__ft>*{min-width:0}
.nums,.proc,.dgrid,.chk,.eng__g,.two,.cases,.tst,.crew,.books,.sps{min-width:0}
.nums>*,.proc>*,.dgrid>*,.chk>*,.eng__g>*,.cases>*,.tst>*,.crew>*,.sps>*{min-width:0}
p,h1,h2,h3,h4,h5,blockquote{overflow-wrap:break-word}
.mono,.tag,.stack span,.plat span,.tick span,.cw__t span{overflow-wrap:anywhere}
/* the display serif needs optical alignment — pull the first line flush left */
h1,h2.d,h3.d,.fin h2,.hero h1,.phero h1,.chero h1,.rl__i h4,.cw__b h4{text-wrap:balance}
.lead,.hero__sup,.blk__d,.story p,.cw__b p{text-wrap:pretty}
/* consistent vertical rhythm between a label and the heading under it */
.lab+h2.d,.lab+h2,.lab+.d{margin-top:calc(-1 * clamp(4px,0.6vw,10px))}
/* stop the fixed chapter badge colliding with the mobile bar */
@media (max-width:1024px){#chap{bottom:66px}}
/* tables of numbers align on the same baseline across the row */
.hstats,.sold,.tick{align-items:flex-start}
/* the reel must never cause a horizontal scrollbar on the page */
html,body{max-width:100%;overflow-x:clip}
/* focus states — visible for keyboard users on every interactive element */
a:focus-visible,button:focus-visible,input:focus-visible,.svc__h:focus-visible,.rl:focus-visible,.gi:focus-visible{
 outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
/* touch targets stay at least 40px on coarse pointers */
@media (pointer:coarse){
 .nav__l a,.ft a,.srow,.fq__q,.svc__h{min-height:40px;display:flex;align-items:center}
 .ft a{padding-block:8px}
 .srow{padding-block:12px}
}

/* ============ v4 — review pass (Aug 2026) ============ */
/* nav brand: glass chip from load, logo +6px, condenses on scroll */
.brand{padding:8px 16px;border-radius:100px;background:rgba(6,8,10,.55);
 box-shadow:inset 0 0 0 1px var(--line);backdrop-filter:blur(14px) saturate(1.35);
 -webkit-backdrop-filter:blur(14px) saturate(1.35);transition:padding .55s var(--e),background .55s var(--e),box-shadow .55s var(--e)}
.brand .lk{height:31px;transition:height .55s var(--e)}
.brand:hover{box-shadow:inset 0 0 0 1px rgba(95,224,171,.35)}
.nav.cond .brand{padding:4px 8px;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav.cond .brand .mk{height:21px;width:21px}
/* hero rotating word — its own voice: soft/wonky cut of Fraunces, glow, kinetic underline */
.rot,.rot__w,.rot__m{font-variation-settings:'SOFT' 100,'WONK' 1;font-weight:380;letter-spacing:-.02em}
.rot__w,.rot:not(:has(.rot__w)){color:var(--green-b);text-shadow:0 0 34px rgba(95,224,171,.42),0 0 90px rgba(95,224,171,.18)}
/* hero stats — glass hover pops */
.hstat{position:relative}
.hstat__pop{position:absolute;left:0;bottom:calc(100% + 12px);width:max-content;max-width:236px;padding:12px 15px;
 border-radius:13px;background:rgba(10,14,17,.68);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
 box-shadow:inset 0 0 0 1px rgba(95,224,171,.24),0 26px 60px -22px rgba(0,0,0,.85);
 font-family:var(--sans);font-size:12.2px;line-height:1.5;color:var(--mut);letter-spacing:0;text-transform:none;
 opacity:0;transform:translateY(7px) scale(.96);transform-origin:14px 100%;transition:.45s var(--e);pointer-events:none;z-index:6}
.hstat__pop::after{content:"";position:absolute;left:16px;top:100%;border:5px solid transparent;border-top-color:rgba(10,14,17,.68)}
.hstat:hover .hstat__pop{opacity:1;transform:none}
@media (hover:none){.hstat__pop{display:none}}
/* ledger tiles — glass lift + four distinct instruments */
.num{cursor:default}
.num:hover{box-shadow:inset 0 0 0 1px rgba(95,224,171,.26);z-index:2}
.num::after{content:"";position:absolute;inset:auto -25% -55% -25%;height:65%;
 background:radial-gradient(circle,rgba(76,189,142,.13),transparent 70%);opacity:0;transition:opacity .6s}
.num:hover::after{opacity:1}
.nviz{height:40px;margin-top:14px;width:100%;display:block}
.nviz__fill{opacity:0;transition:opacity 1.1s var(--e) .35s}
.num.go .nviz__fill{opacity:1}
.nviz__bar{transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--e)}
.num.go .nviz__bar{transform:none}
.nviz__dot{opacity:0;transform:scale(0);transform-origin:center;transition:.5s var(--e)}
.num.go .nviz__dot{opacity:1;transform:none}
.nviz__cell{opacity:.12;transition:opacity .4s ease}
.num.go .nviz__cell.lit{opacity:1}
@media (max-width:1180px) and (min-width:861px){.nums{grid-template-columns:repeat(2,1fr)}}
/* hero stats — grids instead of hidden children */
@media (max-width:1180px){.hstat{flex:1 1 auto;min-width:110px}}
@media (max-width:860px){.hstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,2.4vw,18px)}}
@media (max-width:520px){.hstats{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 20px;padding-top:12px}
 .hstat b{font-size:clamp(17px,5.6vw,24px)}.hstat span{font-size:clamp(7.5px,2.3vw,9px)}}
/* system caption chip — readable over any art */
.sys__v .vt{left:14px;right:auto;bottom:14px;padding:9px 15px;border-radius:100px;
 background:rgba(6,8,10,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 box-shadow:inset 0 0 0 1px rgba(95,224,171,.3)}
.sys__v .vt .mono{color:var(--txt)}
/* how-it-runs — live boxes */
.ph{transition:background .5s var(--e),transform .5s var(--e),box-shadow .5s var(--e)}
.ph:hover{background:var(--card);transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(95,224,171,.22);z-index:2}
.ph:hover::before{width:100%}
.ph:hover em{color:rgba(95,224,171,.2)}
.ph em{transition:color .5s}
/* engine — six instruments, always symmetric */
@media (min-width:861px){.eng__g{grid-template-columns:repeat(3,1fr)}}
.ec{transition:background .5s,box-shadow .5s,transform .5s var(--e)}
.ec:hover{box-shadow:inset 0 0 0 1px rgba(95,224,171,.2);transform:translateY(-3px)}
/* testimonials — word on the street */
@media (min-width:861px){.tst{grid-template-columns:repeat(3,1fr)}}
.tc{position:relative}
.tc:hover{box-shadow:inset 0 0 0 1px rgba(95,224,171,.3),0 34px 70px -34px rgba(0,0,0,.9)}
.tc__mark{font-family:var(--serif);font-weight:300;font-size:46px;line-height:.55;color:var(--green);transition:.5s var(--e);display:block}
.tc:hover .tc__mark{transform:scale(1.22) rotate(-8deg);color:var(--green-b);text-shadow:0 0 26px rgba(95,224,171,.5)}
.tc__av{width:40px;height:40px;border-radius:50%;background:var(--tint,rgba(76,189,142,.12));flex:none;
 display:grid;place-items:center;font-family:var(--mono);font-size:13px;color:var(--green-b);
 box-shadow:inset 0 0 0 1px rgba(95,224,171,.32)}
/* captains — bigger, richer rows */
.crew{gap:clamp(14px,2vw,26px)}
.cw{grid-template-columns:minmax(0,.52fr) minmax(0,1fr)}
.cw__m{min-height:clamp(260px,30vw,430px)}
.cw__b{padding:clamp(24px,3.2vw,52px);gap:13px}
.cw__b p{max-width:62ch;font-size:clamp(13.5px,1.1vw,15.8px)}
.cw__i{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim)}
@media (max-width:860px){.cw{grid-template-columns:minmax(0,.46fr) minmax(0,1fr)}.cw__m{min-height:0}}
/* crew band — the real people, colour arrives on hover */
.crewband{position:relative;display:block;border-radius:18px;overflow:hidden;
 box-shadow:inset 0 0 0 1px var(--line);min-height:clamp(230px,36vw,440px);isolation:isolate}
.crewband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 filter:grayscale(1) sepia(.5) hue-rotate(104deg) saturate(1.3) brightness(.6) contrast(1.06);
 transform:scale(1.015);transition:filter 1.1s var(--e),transform 1.4s var(--e)}
.crewband:hover img{filter:grayscale(0) sepia(0) hue-rotate(0deg) saturate(1) brightness(.94) contrast(1);transform:scale(1.05)}
.crewband::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(6,8,10,.88));z-index:1}
.crewband__t{position:absolute;left:clamp(16px,2.4vw,34px);right:clamp(16px,2.4vw,34px);bottom:clamp(14px,2.2vw,30px);z-index:2;
 display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.crewband__t h3{font-family:var(--serif);font-weight:300;font-size:clamp(20px,3vw,40px);letter-spacing:-.035em;margin-top:8px}
.crewband__cta{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:100px;
 background:rgba(6,8,10,.55);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(95,224,171,.35);
 color:var(--green-b);transition:.45s var(--e);white-space:nowrap}
.crewband:hover .crewband__cta{background:var(--green);color:var(--ink);box-shadow:none}
/* crew wall */
.wall{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(9px,1.3vw,18px)}
.wf{margin:0;position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;
 background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.wf img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03);transition:transform .9s var(--e),filter .9s var(--e)}
.wf:hover img{transform:scale(1.06)}
.wf::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 68%,rgba(6,8,10,.55));opacity:0;transition:opacity .6s}
.wf:hover::after{opacity:1}
/* founder — never crop the captain on a phone */
.fnd__m img{object-position:center 16%}
@media (max-width:640px){
 .fnd{grid-template-columns:1fr;gap:20px}
 .fnd__m img{aspect-ratio:4/5}
 .fnd blockquote{font-size:clamp(18px,5.7vw,27px)}
 .fnd__sig{margin-top:18px;gap:12px}
 .sold{grid-template-columns:1fr 1fr}
}
/* footer mark — bigger and calmer on phones */
@media (max-width:860px){
 .ftmark canvas{width:min(430px,88vw)}
 .ftmark .fbk{width:min(235px,50vw)}
 .ftmark{padding:36px 0 20px}
}

/* ============ v5 — scroll film (work page) ============ */
.scrubwrap{position:fixed;inset:0;z-index:1;pointer-events:none;background:var(--ink)}
.scrubwrap canvas{width:100%;height:100%;display:block}
body.scrub #bg{display:none}
body.scrub .phero__bg{display:none}
body.scrub .pane{background:rgba(8,12,15,.6);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
body.scrub .phero{background:transparent}
@media (prefers-reduced-motion:reduce){body.scrub .pane{background:var(--pane)}}

/* ============ v6 — polish round 2 ============ */
/* nav: plain logo, just bigger */
.brand{padding:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.brand:hover{box-shadow:none}
.brand .lk{height:33px}
.nav.cond .brand{padding:0;background:transparent}
@media (max-width:860px){.brand .lk{height:clamp(24px,5.8vw,29px)}}
/* reels: two cards per frame */
.rl{width:min(620px,46vw)}
.rl__i h4{font-size:clamp(20px,2.3vw,36px)}
.rl__i p{font-size:clamp(11px,.95vw,13.5px);max-width:40ch;margin-top:7px}
.rl__ar{width:38px;height:38px}
@media (max-width:860px){.rl{width:min(430px,74vw)}}
/* extracted logo grid */
.logogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,14px)}
.lgc{display:grid;place-items:center;aspect-ratio:16/9;border-radius:12px;background:var(--card);
 box-shadow:inset 0 0 0 1px var(--line);transition:.5s var(--e);padding:11% 13%}
.lgc img{max-width:100%;max-height:100%;object-fit:contain;opacity:.8;transition:.5s var(--e)}
.lgc:hover{background:var(--card2);box-shadow:inset 0 0 0 1px rgba(95,224,171,.35);transform:translateY(-3px)}
.lgc:hover img{opacity:1;transform:scale(1.05)}
/* scrub page: cheap surfaces, one canvas */
body.scrub .pane{background:rgba(8,12,15,.87);backdrop-filter:none;-webkit-backdrop-filter:none}
body.scrub #heroLines{display:none}

/* v6.1 — mobile polish */
@media (max-width:520px){
 .tst{grid-template-columns:1fr;gap:10px}
 .tc blockquote{font-size:clamp(14px,4vw,17px)}
 .tc{padding:16px}
 .logogrid{grid-template-columns:repeat(2,1fr)}
 .pgnav a{padding:9px 13px;font-size:9px}
 .cw__b p{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
}
@media (max-width:860px){
 .crewband__t h3{font-size:clamp(17px,4.6vw,26px)}
 .hstat__pop{display:none}
 .lgc{padding:9% 11%}
}

/* ============ v7 — crew wall redesign + mobile hardening + world clocks ============ */
html,body{overflow-x:clip}
.wall{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,38px) clamp(14px,2vw,28px)}
.wf{margin:0;aspect-ratio:auto;border-radius:0;overflow:visible;background:transparent;box-shadow:none}
.wf::after{display:none}
.wf__n{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;
 padding-bottom:8px;border-bottom:1px solid var(--line-s);transition:border-color .5s var(--e)}
.wf__n b{font-size:clamp(12.5px,1.05vw,15.5px);font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf__n .mono{font-size:8.5px;color:var(--dim);flex:none;transition:color .5s}
.wf__m{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--card);
 box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .5s var(--e),transform .6s var(--e)}
.wf__m img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03);
 transition:transform .9s var(--e),filter .9s var(--e)}
.wf__m::before{content:"";position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .6s var(--e);
 background:linear-gradient(180deg,transparent 55%,rgba(18,105,74,.38))}
.wf:hover .wf__m{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(95,224,171,.4),0 30px 60px -34px #000}
.wf:hover .wf__m img{transform:scale(1.06)}
.wf:hover .wf__m::before{opacity:1}
.wf:hover .wf__n{border-color:rgba(95,224,171,.45)}
.wf:hover .wf__n .mono{color:var(--green-b)}
@media (min-width:861px){.wall .wf:nth-child(3n+2){transform:translateY(clamp(12px,1.8vw,28px))}}
@media (max-width:860px){
 .wall{grid-template-columns:repeat(3,1fr);gap:16px 10px}
 .wf__n b{font-size:clamp(9px,2.6vw,12px)}
 .wf__n .mono{display:none}
}
@media (max-width:520px){
 .wall{grid-template-columns:repeat(2,1fr);gap:18px 12px}
 .wf__n b{font-size:clamp(11px,3.4vw,13px)}
}
/* mobile nav must never overflow */
@media (max-width:860px){
 .nav__in{gap:8px}
 .nav .btn{padding:9px 12px;font-size:clamp(10px,2.7vw,12px);white-space:nowrap}
}
@media (max-width:400px){
 .nav__l{display:none}
 .burg{display:grid;width:32px;height:32px}
 .brand .lk{height:clamp(21px,6vw,25px)}
}
/* world clocks */
.tz{display:flex;flex-wrap:wrap;gap:clamp(10px,1.6vw,22px);padding:clamp(14px,2vw,22px) 0;
 border-top:1px solid var(--line-s)}
.tz div{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:10px;
 letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.tz b{font-weight:400;color:var(--txt);font-size:12.5px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.tz span{color:var(--green)}
@media (max-width:860px){.tz{gap:10px 16px}.tz div{font-size:8.5px}.tz b{font-size:11px}}

/* v7.1 — ten-strong wall */
@media (min-width:861px){
 .wall{grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,30px) clamp(12px,1.5vw,20px)}
 .wall .wf:nth-child(3n+2){transform:none}
 .wall .wf:nth-child(even){transform:translateY(clamp(10px,1.5vw,22px))}
 .wf__n b{font-size:clamp(11px,.95vw,14px)}
}
@media (max-width:860px){.wall{grid-template-columns:repeat(2,1fr);gap:18px 12px}.wf__n .mono{display:inline}}

/* ============ v8 — hero rotator (white / heavy / glowing / fast) ============ */
.rot,.rot__w,.rot__m{
 font-family:var(--sans);
 font-style:normal;
 font-weight:800;
 font-variation-settings:normal;
 letter-spacing:-.045em;
 transition:width .3s var(--e);
}
.rot__w,.rot:not(:has(.rot__w)){
 color:#fff;font-style:normal;
 text-shadow:0 0 22px rgba(255,255,255,.5),0 0 58px rgba(255,255,255,.26),0 0 120px rgba(255,255,255,.12);
}
.rot__w i{
 font-style:normal;
 transform:translateY(88%);
 transition:transform .3s var(--e),opacity .22s var(--e);
}
.rot__w.on i{transform:none}
.rot__w.out i{transform:translateY(-92%);transition:transform .26s var(--e2),opacity .18s ease}
@media (prefers-reduced-motion:reduce){.rot__w i{transform:none;opacity:1}}

/* ============ v8 — client logo collage (tapering stack) ============ */
.lgstack{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,.7vw,11px)}
.lgrow{display:flex;justify-content:center;gap:clamp(6px,.7vw,11px);width:100%}
.lgc{display:grid;place-items:center;border-radius:10px;background:var(--card);
 box-shadow:inset 0 0 0 1px var(--line);transition:.45s var(--e);
 height:var(--h);flex:0 1 calc(var(--h) * 2.1);min-width:0;padding:0 3%;aspect-ratio:auto}
.lgc img{max-width:82%;max-height:56%;object-fit:contain;opacity:.72;transition:.45s var(--e)}
.lgc:hover{background:var(--card2);box-shadow:inset 0 0 0 1px rgba(95,224,171,.4);transform:translateY(-3px)}
.lgc:hover img{opacity:1;transform:scale(1.07)}
.lgrow:nth-child(1){--h:clamp(30px,3.4vw,48px)}
.lgrow:nth-child(2){--h:clamp(34px,3.9vw,55px)}
.lgrow:nth-child(3){--h:clamp(38px,4.4vw,62px)}
.lgrow:nth-child(4){--h:clamp(44px,5.1vw,72px)}
.lgrow:nth-child(5){--h:clamp(52px,6vw,86px)}
.lgrow:nth-child(5) .lgc img{max-height:50%}
@media (max-width:860px){
 .lgstack{gap:5px}.lgrow{gap:5px}
 .lgc{border-radius:8px}
}