/* Layout: a keynote in black and light grey. Huge statements, pinned scenes and a bento of living product tiles, all built on the geometric tile language from Eloge's own artwork. */
@view-transition{navigation:auto}
:root{
  color-scheme:dark;
  --ink:#0F0F0F;--ink2:#1A1A1A;--ink3:#262626;--line:#3D3D3D;
  --white:#FFFFFF;--mute:#A9A9AE;--paper:#F5F5F7;--paper-mute:#55555A;
  --blue:#6293C3;--deep:#3A6385;--orange:#F39A0B;
  --disp:"Poppins","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --gl:max(clamp(16px,4.5vw,72px),env(safe-area-inset-left,0px));
  --gr:max(clamp(16px,4.5vw,72px),env(safe-area-inset-right,0px));
  --r:clamp(18px,2vw,30px);
}
*{box-sizing:border-box}
html{background:var(--ink);scroll-padding-top:80px}
body{margin:0;background:var(--ink);color:var(--white);font:400 clamp(16px,1.15vw,18px)/1.55 var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;background:var(--white);color:var(--ink);padding:10px 16px;z-index:90;border-radius:10px}
.skip:focus{top:12px}
.band{padding-left:var(--gl);padding-right:var(--gr)}
.wrap{max-width:1400px;margin-inline:auto}
.narrow{max-width:900px;margin-inline:auto}
.sec{padding-block:clamp(70px,10vw,160px)}
.paper{background:var(--paper);color:var(--ink)}
.h-xl,.h-l,.h-m{font-family:var(--disp);font-weight:600;letter-spacing:-.035em;text-wrap:balance}
.h-xl{font-size:clamp(46px,8.6vw,136px);line-height:1}
.h-l{font-size:clamp(36px,5.8vw,88px);line-height:1.04}
.h-m{font-size:clamp(25px,2.8vw,40px);line-height:1.12;letter-spacing:-.025em}
.grad{background:linear-gradient(95deg,var(--blue),#9CC1E4 45%,var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.paper .grad{background:linear-gradient(95deg,var(--deep),var(--blue) 50%,#C97B00);-webkit-background-clip:text;background-clip:text}
.eyebrow{font-family:var(--disp);font-weight:600;font-size:clamp(14px,1.2vw,18px);color:var(--orange);letter-spacing:-.005em}
.paper .eyebrow{color:#A86500}
.lede{font-size:clamp(19px,2vw,28px);line-height:1.3;color:var(--mute);max-width:32em;text-wrap:pretty;letter-spacing:-.01em}
.paper .lede{color:var(--paper-mute)}
.lede strong{color:var(--white);font-weight:500}
.paper .lede strong{color:var(--ink)}
.center{text-align:center}.center .lede{margin-inline:auto}
.stack{display:grid;gap:clamp(16px,2vw,26px)}
.center.stack{justify-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 26px;border-radius:999px;border:1px solid transparent;background:var(--white);color:var(--ink);font:600 16px var(--disp);letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s,color .2s,border-color .2s;will-change:transform}
.btn:hover{background:var(--orange);color:var(--ink)}
.btn.o{background:var(--orange)}.btn.o:hover{background:var(--white)}
.btn.g{background:transparent;color:var(--white);border-color:var(--line)}.btn.g:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.paper .btn{background:var(--ink);color:var(--white)}.paper .btn:hover{background:var(--deep)}
.paper .btn.g{background:transparent;color:var(--ink);border-color:#C5C5CA}.paper .btn.g:hover{background:var(--ink);color:var(--white)}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.center .cta{justify-content:center}
.link{font-weight:600;font-family:var(--disp);text-decoration:none;color:var(--blue);display:inline-flex;align-items:center;gap:6px;letter-spacing:-.01em}
.paper .link{color:var(--deep)}
.link::after{content:"›";font-size:1.25em;line-height:1;transition:transform .2s}
.link:hover::after{transform:translateX(4px)}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(15,15,15,.82);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}
.logo img{height:21px;width:auto}
.menu{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.menu>li>a,.menu>li>button{background:none;border:0;padding:8px 0;font:500 14px var(--body);color:#D6D6D9;text-decoration:none;cursor:pointer}
.menu>li>a:hover,.menu>li>button:hover,.menu>li>a[aria-current]{color:var(--white)}
.has-sub{position:relative}
.sub{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:min(560px,80vw);padding:14px;background:#191919;border:1px solid var(--line);border-radius:18px;display:none;grid-template-columns:1fr 1fr;gap:2px;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:grid}
.sub a{padding:9px 12px;border-radius:10px;text-decoration:none;font-size:14.5px}
.sub a:hover{background:var(--ink3)}
.nav-r{display:flex;align-items:center;gap:8px}
.srch{display:flex;align-items:center;gap:8px;height:38px;padding:0 13px;border-radius:999px;background:var(--ink3);border:0;font-size:13.5px;color:#D6D6D9;cursor:pointer}
.srch:hover{background:#333}
.srch kbd{font:500 11px var(--body);color:var(--mute);border:1px solid var(--line);border-radius:5px;padding:0 5px}
.nav .btn{min-height:38px;padding:0 16px;font-size:14px}
.burger{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;padding:9px}
.burger i{display:block;height:2px;background:var(--white);margin:6px 0}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 0;transform:scaleX(0);background:linear-gradient(90deg,var(--blue),var(--orange));z-index:70;pointer-events:none}
.crumbs{font-size:13px;color:var(--mute);padding-block:16px 0}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"›";margin-right:6px}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--white)}

/* hero */
.hero{position:relative;min-height:min(92svh,980px);display:flex;align-items:center;overflow:hidden;isolation:isolate}
#tiles{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 72% 62% at 50% 50%,rgba(15,15,15,.94) 25%,rgba(15,15,15,.45) 68%,rgba(15,15,15,.1)),linear-gradient(transparent 80%,var(--ink))}
.hero h1{font-family:var(--disp);font-weight:600;letter-spacing:-.045em;font-size:clamp(50px,10.4vw,172px);line-height:.98}
.hero h1 span{display:block}
.hero-in{padding-block:clamp(50px,7vw,90px);width:100%}
.scrollcue{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:24px;height:38px;border:1.5px solid var(--mute);border-radius:14px}
.scrollcue::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--white);animation:cue 1.8s infinite}
@keyframes cue{to{transform:translateY(13px);opacity:0}}

/* page hero */
.phero{padding-block:clamp(40px,6vw,90px) clamp(40px,6vw,80px)}
.pill{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--disp);padding:6px 13px;border-radius:999px;background:var(--ink3);color:var(--white)}
.pill i{width:7px;height:7px;background:var(--orange);border-radius:50%}

/* pinned scenes */
.scene{position:relative}
.pin{position:sticky;top:60px;height:calc(100svh - 60px);display:flex;align-items:center;justify-content:center;overflow:hidden}
.s-ai{height:280vh}
.s-zoom{height:260vh;background:var(--ink)}
.s-h{height:360vh}
.chat{width:min(760px,100%);background:#171717;border:1px solid var(--line);border-radius:var(--r);padding:clamp(16px,2.4vw,30px);display:grid;gap:14px;box-shadow:0 40px 120px rgba(98,147,195,.16)}
.q{justify-self:end;background:var(--deep);padding:11px 17px;border-radius:18px 18px 4px 18px;max-width:88%;font-size:clamp(15px,1.5vw,19px)}
.a{min-height:7.2em;font-size:clamp(16px,1.7vw,21px);line-height:1.42;color:#E9E9EC}
.a mark{background:rgba(243,154,11,.22);color:var(--orange);font-weight:600;padding:0 3px;border-radius:4px}
.caret{display:inline-block;width:.5em;height:1em;vertical-align:-2px;background:var(--orange);margin-left:2px;animation:bl 1s steps(2) infinite}
@keyframes bl{50%{opacity:0}}
.ai-head{display:grid;gap:14px;justify-items:center;text-align:center;margin-bottom:clamp(18px,3vw,36px)}
.note{font-size:13px;color:var(--mute);line-height:1.4}
.paper .note{color:var(--paper-mute)}
.zoomimg{position:absolute;inset:0;margin:auto;width:100%;height:100%;object-fit:cover;transform:scale(calc(.42 + var(--p,0)*.58));border-radius:calc((1 - var(--p,0))*48px);will-change:transform}
.zoomtxt{position:relative;z-index:2;text-align:center;padding-inline:16px;text-shadow:0 2px 40px rgba(0,0,0,.65)}
.zoomtxt p{transform:translateY(calc((1 - var(--p,0))*-34vh));transition:none}
.htrack{display:flex;gap:clamp(12px,1.8vw,24px);padding-inline:var(--gl);will-change:transform;width:max-content;align-items:center}
.hcard{flex:none;width:clamp(240px,27vw,420px);border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:3/4;background:var(--ink3)}
.hcard img{width:100%;height:100%;object-fit:cover}
.hcard.t{background:none;aspect-ratio:auto;width:clamp(300px,36vw,560px);overflow:visible;display:grid;gap:18px;align-content:center;padding-right:3vw}
.hcard figcaption{position:absolute;left:14px;bottom:12px;font:600 14px var(--disp);text-shadow:0 1px 14px rgba(0,0,0,.8)}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);margin-top:clamp(36px,5vw,70px)}
.card{position:relative;display:flex;flex-direction:column;gap:8px;min-height:clamp(290px,27vw,430px);padding:clamp(20px,2.2vw,34px);border-radius:var(--r);background:var(--ink2);overflow:hidden;text-decoration:none;color:var(--white);transition:transform .45s cubic-bezier(.2,.8,.2,1);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.012)}
.paper .card{background:var(--white);color:var(--ink)}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c6{grid-column:span 6}
.card p{color:var(--mute);max-width:30em;font-size:clamp(15px,1.15vw,17px);line-height:1.38}
.paper .card p{color:var(--paper-mute)}
.card h3{font-family:var(--disp);font-weight:600;font-size:clamp(23px,2.4vw,36px);line-height:1.08;letter-spacing:-.028em;text-wrap:balance}
.card .tag{font:600 13px var(--disp);color:var(--orange)}
.paper .card .tag{color:#A86500}
.vis{position:absolute;inset:auto 0 0 0;height:52%;pointer-events:none}
.card.img{padding:0;justify-content:flex-end}
.card.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.card.img:hover img{transform:scale(1.05)}
.card.img .tx{position:relative;padding:clamp(20px,2.2vw,34px);background:linear-gradient(transparent,rgba(0,0,0,.82));display:grid;gap:6px;color:var(--white)}
.card.img .tx p{color:#E6E6E9}
.mini-map{position:absolute;left:clamp(20px,2.2vw,34px);right:clamp(20px,2.2vw,34px);bottom:-6px;display:grid;gap:6px}
.mini-map li{display:flex;align-items:center;gap:10px;background:var(--ink3);padding:9px 12px;border-radius:11px;font-size:13.5px;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.mini-map b{font-weight:600;font-family:var(--disp)}
.mini-map .st{margin-left:auto;color:var(--orange);font-size:12.5px;white-space:nowrap}
.mini-map .me{background:var(--deep)}
.mini-graph{position:absolute;inset:auto 0 0 0;width:100%;height:50%}
.mini-graph path{fill:none;stroke:var(--orange);stroke-width:3;stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 3.6s .3s forwards cubic-bezier(.3,.7,.2,1)}
.mini-graph path.a2{stroke:var(--blue);fill:rgba(98,147,195,.1);stroke-dasharray:none;stroke-dashoffset:0;stroke-width:0;animation:none}
@keyframes draw{to{stroke-dashoffset:0}}
.phone{position:absolute;right:clamp(16px,6%,50px);bottom:-40px;width:clamp(120px,36%,180px);aspect-ratio:9/18;border:6px solid #3B3B3F;border-radius:26px;background:var(--ink);overflow:hidden;padding:18px 9px;display:grid;gap:6px;align-content:start}
.phone i{display:block;height:24px;border-radius:7px;background:var(--ink3);animation:pop 3.6s infinite}
.phone i:nth-child(1){background:var(--blue);height:48px}
.phone i:nth-child(2){animation-delay:.2s}.phone i:nth-child(3){animation-delay:.4s;background:var(--orange)}.phone i:nth-child(4){animation-delay:.6s}.phone i:nth-child(5){animation-delay:.8s}
@keyframes pop{0%,100%{opacity:.5}40%{opacity:1}}
.kan{position:absolute;inset:auto clamp(16px,2vw,30px) -10px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.kan div{display:grid;gap:6px;align-content:start;background:var(--ink3);border-radius:10px;padding:7px;min-height:120px}
.kan i{display:block;height:24px;background:#3E3E43;border-radius:5px}
.kan i.hot{background:var(--orange);animation:mv 5s infinite cubic-bezier(.6,0,.3,1)}
@keyframes mv{0%,20%{transform:translateX(0)}45%,65%{transform:translateX(calc(100% + 21px))}90%,100%{transform:translateX(calc(200% + 42px))}}
.chatm{position:absolute;inset:auto clamp(18px,2vw,30px) 18px;display:grid;gap:7px;font-size:13.5px}
.chatm span{padding:9px 13px;border-radius:13px;background:var(--ink3);max-width:90%}
.chatm .u{justify-self:end;background:var(--deep)}
.chatm b{color:var(--orange)}
.brwz{position:absolute;inset:auto clamp(16px,2vw,30px) -14px;height:48%;background:var(--ink3);border-radius:12px 12px 0 0;padding:26px 12px 12px;display:grid;grid-template-columns:2fr 1fr;gap:8px}
.brwz::before{content:"";position:absolute;left:11px;top:9px;width:30px;height:7px;background:radial-gradient(circle at 3px 3px,#6F6F75 3px,transparent 3.4px) 0 0/12px 7px}
.brwz i{border-radius:6px;background:#3E3E43}.brwz i:first-child{background:linear-gradient(120deg,var(--deep),var(--blue));grid-row:span 2}
.tiles-vis{position:absolute;right:0;bottom:0;width:62%;height:56%}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-size:12.5px;padding:4px 10px;border-radius:999px;background:var(--ink3);color:#E2E2E5}
.paper .tags li{background:#E9E9EC;color:var(--ink)}

/* marquee */
.marq{overflow:hidden;display:grid;gap:10px;margin-top:clamp(36px,5vw,60px);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mrow{display:flex;gap:10px;width:max-content;animation:mq 60s linear infinite}
.mrow.rev{animation-direction:reverse;animation-duration:74s}
.marq:hover .mrow{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mrow a{flex:none;padding:12px 19px;border-radius:999px;background:var(--ink2);text-decoration:none;font-size:clamp(14px,1.15vw,16px);white-space:nowrap;transition:background .2s,color .2s}
.mrow a b{font-weight:600;color:var(--orange);margin-right:7px}
.mrow a:hover{background:var(--white);color:var(--ink)}
.mrow a:hover b{color:var(--ink)}

/* calculator */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,70px);align-items:center;background:var(--white);border-radius:var(--r);padding:clamp(22px,4vw,60px);margin-top:clamp(30px,4vw,60px)}
.calc label{display:grid;gap:6px;font-weight:500}
.calc .row{display:flex;justify-content:space-between;gap:12px}
.calc output{font:600 18px var(--disp)}
input[type=range]{width:100%;accent-color:var(--deep);height:30px}
.calc-big{font:600 clamp(48px,7.6vw,110px)/1 var(--disp);letter-spacing:-.04em;font-variant-numeric:tabular-nums}

/* stats, steps */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,2vw,30px);margin-top:clamp(30px,4vw,60px)}
.stats b{display:block;font:600 clamp(40px,6vw,92px)/1 var(--disp);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stats span{color:var(--mute);font-size:clamp(14px,1.2vw,17px)}
.paper .stats span{color:var(--paper-mute)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(30px,4vw,60px);counter-reset:s}
.steps li{counter-increment:s;display:grid;gap:7px;align-content:start;border-top:1px solid var(--line);padding-top:16px;color:var(--mute)}
.paper .steps li{border-color:#CFCFD4;color:var(--paper-mute)}
.steps li::before{content:counter(s);font:600 14px var(--disp);color:var(--orange)}
.steps b{font:600 clamp(19px,1.8vw,26px)/1.15 var(--disp);letter-spacing:-.02em;color:var(--white)}
.paper .steps b{color:var(--ink)}

/* team */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);margin-top:clamp(30px,4vw,60px)}
.tm{background:var(--ink2);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.2,.8,.2,1);transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.tm img{width:100%;aspect-ratio:1/1.14;object-fit:cover;background:#101010}
.tm .tb{padding:clamp(14px,1.6vw,22px);display:grid;gap:7px;align-content:start}
.tm h3{font:600 clamp(20px,1.9vw,27px)/1.1 var(--disp);letter-spacing:-.02em}
.tm .role{color:var(--orange);font:600 13.5px var(--disp)}
.tm .ln{font-size:15.5px;color:var(--mute);line-height:1.38}

/* lists */
.gets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);margin-top:clamp(30px,4vw,60px)}
.gets li{background:var(--white);border-radius:var(--r);padding:clamp(20px,2.2vw,32px);display:grid;gap:8px;align-content:start;transition:transform .3s}
.gets li:hover{transform:translateY(-4px)}
.gets h3{font:600 clamp(20px,1.8vw,26px)/1.14 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.gets p{color:var(--paper-mute);font-size:16px;line-height:1.42}
.further{display:grid;gap:clamp(6px,1vw,14px);text-align:center}
.further p{font:600 clamp(32px,5.8vw,88px)/1.05 var(--disp);letter-spacing:-.035em;color:#6A6A70;transition:color .5s;text-wrap:balance}
.further p.on{color:var(--white)}
.further p:nth-child(2).on{background:linear-gradient(95deg,var(--blue),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}

/* problems */
.probs{display:grid;gap:8px;margin-top:clamp(26px,3vw,46px)}
.prob{background:var(--ink2);border-radius:18px;overflow:hidden;scroll-margin-top:90px}
.prob summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(16px,1.7vw,24px) clamp(18px,2vw,28px)}
.prob summary::-webkit-details-marker{display:none}
.prob summary h3{font:600 clamp(18px,1.7vw,24px)/1.2 var(--disp);letter-spacing:-.018em}
.prob summary::after{content:"+";flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--ink3);font-size:20px;line-height:1;transition:transform .3s,background .3s}
.prob[open] summary::after{transform:rotate(45deg);background:var(--orange);color:var(--ink)}
.prob:target{outline:2px solid var(--orange)}
.pb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,30px);padding:4px clamp(18px,2vw,28px) clamp(18px,2vw,28px)}
.pb b{display:block;font:600 13px var(--disp);color:var(--orange);margin-bottom:3px}
.pb p{color:#D8D8DB;font-size:16px;line-height:1.42}
.faq{display:grid;gap:0;margin-top:clamp(20px,3vw,40px);border-top:1px solid #CFCFD4}
.faq details{border-bottom:1px solid #CFCFD4}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font:600 clamp(17px,1.5vw,21px)/1.25 var(--disp);letter-spacing:-.015em;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq p{padding-bottom:18px;color:var(--paper-mute);max-width:66ch}

/* work */
.filters{display:flex;flex-wrap:wrap;gap:7px;margin-top:clamp(20px,3vw,40px)}
.chip{min-height:40px;padding:0 17px;border-radius:999px;border:0;background:var(--ink3);color:var(--white);font:500 14.5px var(--body);cursor:pointer;transition:background .2s,color .2s}
.chip[aria-pressed=true]{background:var(--white);color:var(--ink)}
.grid-work{columns:3 280px;column-gap:clamp(10px,1.2vw,18px);margin-top:clamp(20px,3vw,40px)}
.wk{break-inside:avoid;margin-bottom:clamp(10px,1.2vw,18px);border-radius:var(--r);overflow:hidden;position:relative;cursor:zoom-in;display:block;border:0;padding:0;background:var(--ink3);width:100%;text-align:left}
.wk img{width:100%;height:auto;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.wk:hover img{transform:scale(1.04)}
.wk span{position:absolute;left:14px;bottom:12px;font:600 14px var(--disp);text-shadow:0 1px 12px rgba(0,0,0,.85);color:var(--white)}
.lb{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;padding:20px}
.lb img{max-height:88vh;width:auto;border-radius:14px}
.lb button{position:absolute;background:var(--ink3);border:0;color:var(--white);width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:20px}
.lb .x{top:16px;right:16px}.lb .p{left:14px;top:50%}.lb .n{right:14px;top:50%}
video.reel{width:100%;display:block;border-radius:var(--r);aspect-ratio:16/9;background:#000;object-fit:contain;margin-top:clamp(20px,3vw,40px)}

/* finder */
.finder{position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:flex-start;justify-content:center;padding:max(9vh,50px) 14px 14px}
.fbox{width:min(720px,100%);max-height:78vh;display:flex;flex-direction:column;background:#1B1B1D;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 50px 140px rgba(0,0,0,.7)}
.fbox input{width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:19px 22px;font:500 clamp(18px,2vw,22px) var(--disp);color:var(--white);outline:none}
.fres{overflow:auto;padding:8px}
.fres a{display:grid;gap:1px;padding:11px 14px;border-radius:12px;text-decoration:none}
.fres a b{font-weight:500}
.fres a small{color:var(--mute);font-size:13px}
.fres a[aria-selected=true],.fres a:hover{background:var(--deep)}
.fres a[aria-selected=true] small,.fres a:hover small{color:#E3EDF6}
.fempty{padding:18px;color:var(--mute)}
.fempty a{color:var(--orange)}

/* quiz */
.quiz{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(16px,3vw,50px);align-items:start;margin-top:clamp(26px,3vw,50px)}
.qlist{display:grid;gap:8px}
.qi{background:var(--ink2);border-radius:16px;padding:14px 17px;display:grid;gap:9px}
.qi p{font-weight:500;line-height:1.35}
.qi .tg{font:600 12px var(--disp);color:var(--orange)}
.qbtns{display:flex;gap:7px}
.gauge{position:sticky;top:90px;background:var(--ink2);border-radius:var(--r);padding:clamp(20px,2.4vw,34px);display:grid;gap:14px;justify-items:center;text-align:center}
.gauge svg{width:min(240px,70%);height:auto;display:block}
.gauge circle{fill:none;stroke-width:12}
#gaugeArc{stroke:var(--orange);stroke-linecap:round;transition:stroke-dashoffset .7s cubic-bezier(.2,.8,.2,1);transform:rotate(-90deg);transform-origin:50% 50%}
.gaps{width:100%;text-align:left;display:grid;gap:6px}
.gaps a{display:block;padding:9px 12px;background:var(--ink3);border-radius:10px;text-decoration:none;font-size:14.5px}
.gaps a:hover{background:var(--deep)}

/* contact */
.cgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,4vw,70px);align-items:start}
.bigcall{font:600 clamp(32px,3.7vw,58px)/1 var(--disp);letter-spacing:-.04em;text-decoration:none;display:block;transition:color .2s;white-space:nowrap}
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.2vw,18px)}
.strip img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.bigcall:hover{color:var(--orange)}
.form{background:var(--ink2);border-radius:var(--r);padding:clamp(18px,2.6vw,38px);display:grid;gap:18px}
.form fieldset{border:0;padding:0;margin:0;display:grid;gap:9px}
.form legend,.form label{font:600 14px var(--disp);padding:0;margin-bottom:7px;display:block}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{width:100%;background:var(--ink3);border:1px solid transparent;border-radius:12px;padding:13px 14px;color:var(--white);font:400 16px var(--body)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--orange)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.hp{position:absolute!important;left:-9999px;height:1px;overflow:hidden}
.fmsg{padding:13px 15px;border-radius:12px;background:var(--ink3)}

/* final CTA, footer */
.final{background:var(--orange);color:var(--ink);text-align:center}
.final .h-xl{letter-spacing:-.045em}
.final .lede{color:#2B1D00}
.final .btn{background:var(--ink);color:var(--white)}.final .btn:hover{background:var(--white);color:var(--ink)}
.final .btn.g{background:transparent;color:var(--ink);border-color:var(--ink)}.final .btn.g:hover{background:var(--ink);color:var(--white)}
.foot{padding-block:clamp(40px,5vw,70px) 26px;font-size:14px;color:var(--mute)}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.fgrid h2{font:600 13.5px var(--disp);color:var(--white);margin-bottom:9px}
.fgrid li{margin-bottom:5px}
.fgrid a{text-decoration:none}.fgrid a:hover{color:var(--white)}
.legal{margin-top:30px;padding-top:16px;border-top:1px solid var(--ink3);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:12.5px}
.callbar{display:none}

/* reveal: visible at rest, adds polish when scripts run */
.js .r{transform:translateY(26px);opacity:.28;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s}
.js .r.in{transform:none;opacity:1}

@media (max-width:1020px){
  .menu{position:fixed;inset:60px 0 0;background:var(--ink);flex-direction:column;align-items:flex-start;gap:4px;padding:18px var(--gr) 90px var(--gl);overflow:auto;display:none;z-index:49;height:calc(100dvh - 60px)}
  .menu.open{display:flex}
  .menu>li{width:100%}
  .menu>li>a,.menu>li>button{font:600 28px var(--disp);letter-spacing:-.02em;color:var(--white);padding:7px 0;display:block}
  .sub{position:static;transform:none;display:grid;width:100%;background:none;border:0;padding:0 0 8px;box-shadow:none;grid-template-columns:1fr}
  .sub a{padding:6px 0;font-size:16px;color:var(--mute)}
  .burger{display:block}
  .srch span,.srch kbd{display:none}
  .nav .btn.hd{display:none}
  .c2,.c3,.c4{grid-column:span 3}
  .team,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .quiz,.cgrid{grid-template-columns:minmax(0,1fr)}
  .gauge{position:static}
  .s-h{height:auto}
  .s-h .pin{position:static;height:auto;display:block;padding-block:30px;overflow-x:auto;scroll-snap-type:x mandatory}
  .hcard{scroll-snap-align:center}
  .htrack{transform:none!important}
}
@media (max-width:680px){
  .c2,.c3,.c4,.c6{grid-column:span 6}
  .card{min-height:320px}
  .calc,.pb{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  .gets{grid-template-columns:minmax(0,1fr)}
  .team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fgrid>div:first-child{grid-column:1/-1}
  .two{grid-template-columns:minmax(0,1fr)}
  .scrollcue{display:none}
  .callbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:45;padding:8px max(10px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));background:rgba(15,15,15,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--ink3)}
  .callbar .btn{min-height:44px;padding:0 8px;font-size:15px}
  body{padding-bottom:62px}
}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .mini-graph path{stroke-dashoffset:0}
  .js .r{transform:none;opacity:1}
  .s-ai,.s-zoom,.s-h{height:auto}
  .pin{position:static;height:auto;min-height:70vh;padding-block:40px}
  .zoomimg{transform:none;border-radius:0}
  .zoomtxt p{transform:none}
  .s-h .pin{overflow-x:auto;display:block}
  .further p{color:var(--white)}
  .mrow{flex-wrap:wrap;width:auto}
}

/* founder */
.founder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:center}
.founder figure{border-radius:var(--r);overflow:hidden;background:#000}
.founder img{width:100%;height:auto}
@media (max-width:820px){.founder{grid-template-columns:minmax(0,1fr)}.founder figure{max-width:440px}}


/* websites showcase */
.sites{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);margin-top:clamp(30px,4vw,60px)}
.site{display:flex;flex-direction:column;background:var(--ink2);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--white);transition:transform .45s cubic-bezier(.2,.8,.2,1);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.site:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
.site .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--ink3);font-size:12.5px;color:var(--mute)}
.site .bar i{width:8px;height:8px;border-radius:50%;background:#55555A}
.site .bar i:first-child{background:var(--orange)}
.site .bar span{margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site .shot{overflow:hidden;aspect-ratio:16/9;background:#000}
.site img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.site:hover img{transform:scale(1.03)}
.site .tx{padding:clamp(16px,2vw,28px);display:grid;gap:6px}
.site .tag{font:600 13px var(--disp);color:var(--orange)}
.site h3{font:600 clamp(22px,2.2vw,32px)/1.1 var(--disp);letter-spacing:-.025em}
.site p{color:var(--mute);font-size:clamp(15px,1.15vw,17px);line-height:1.4}
.site .go{font:600 14px var(--disp);color:var(--blue);margin-top:4px}
@media (max-width:680px){.sites{grid-template-columns:minmax(0,1fr)}}


/* structure v3 */
.groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:clamp(30px,4vw,56px)}
.group{background:var(--ink2);border-radius:var(--r);padding:clamp(20px,2.2vw,34px);display:flex;flex-direction:column;gap:6px}
.paper .group{background:var(--white)}
.group h3{font:600 clamp(24px,2.4vw,34px)/1.1 var(--disp);letter-spacing:-.025em}
.group>p{color:var(--mute);margin-bottom:12px}
.paper .group>p{color:var(--paper-mute)}
.group ul{display:grid}
.group li a{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line);text-decoration:none;font-weight:500;transition:color .2s,padding .2s}
.paper .group li a{border-color:#E2E2E6}
.group li a::after{content:"›";color:var(--orange);font-size:1.2em;line-height:1}
.group li a:hover{color:var(--orange);padding-left:5px}
.paper .group li a:hover{color:#A86500}
.ptiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);margin-top:clamp(30px,4vw,56px)}
.ptile{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--ink3);text-decoration:none;color:var(--white)}
.ptile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.ptile:hover img{transform:scale(1.05)}
.ptile span{position:absolute;inset:auto 0 0 0;padding:44px clamp(14px,1.6vw,22px) clamp(14px,1.6vw,20px);background:linear-gradient(transparent,rgba(0,0,0,.85));display:grid;gap:2px}
.ptile b{font:600 clamp(21px,2vw,30px)/1.1 var(--disp);letter-spacing:-.02em}
.ptile small{font-size:14px;color:#E2E2E5}
.ptile.film{display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,var(--deep),var(--ink2) 70%)}
.ptile.film i{width:64px;height:64px;border-radius:50%;background:var(--white);display:grid;place-items:center;margin-bottom:60px}
.ptile.film i::after{content:"";margin-left:5px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--ink)}
.faces{display:flex;justify-content:center;margin-top:8px}
.faces img{width:clamp(58px,7vw,92px);height:clamp(58px,7vw,92px);object-fit:cover;border-radius:50%;border:3px solid var(--ink);margin-left:-14px;background:#101010}
.faces img:first-child{margin-left:0}
.stats3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fixbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;background:var(--ink2);border-radius:var(--r);padding:clamp(20px,2.4vw,34px)}
.reelbox{max-width:980px;margin-inline:auto}
.reelbox figcaption{margin-top:10px;color:var(--mute);font-size:15px}
.posters{columns:4 220px}
.wk.poster{background:var(--white)}
@media (max-width:1020px){.groups{grid-template-columns:minmax(0,1fr)}.ptiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.stats3{grid-template-columns:repeat(3,minmax(0,1fr))}.fixbar{flex-direction:column;align-items:flex-start}}

.further.plain p:nth-child(2).on{background:none;color:var(--white)}