/* homepage only. NOTE: this is a full stylesheet, not a delta on site.css,
   because the homepage hero rules intentionally differ from the case pages. */
:root{
  --bg:#17161A; --s1:#1E1D22; --s2:#28262D;
  --text:#F5F2ED; --muted:#A69EAF; --dim:#7C7488;
  --peri:#9D9BF5; --amber:#E8A33D;
  --line:rgba(245,242,237,.10);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --e:cubic-bezier(.16,.84,.28,1);
  --wrap:1180px;
  --a1:#2FB6F5; --a2:#8B5CF6;   /* section accents, overridden per section */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
.image-viewer-target{cursor:zoom-in}
.image-viewer-target:focus-visible{outline:2px solid var(--peri);outline-offset:5px;border-radius:8px}
.image-viewer{position:fixed;inset:0;z-index:600;display:grid;grid-template-rows:auto minmax(0,1fr);gap:14px;padding:20px;background:rgba(8,7,11,.94);backdrop-filter:blur(14px)}
.image-viewer[hidden]{display:none}
.image-viewer-tools{display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--text)}
.image-viewer-tools p{margin:0;font-size:13px;color:var(--muted)}
.image-viewer-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.image-viewer-actions button{min-width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--s2);color:var(--text);font:600 15px var(--sans);cursor:pointer}
.image-viewer-actions button:hover{border-color:var(--peri);background:rgba(245,242,237,.1)}
.image-viewer-stage{display:grid;place-items:center;justify-self:center;width:min(900px,100%);max-height:calc(100vh - 94px);overflow:auto;border:1px solid var(--line);border-radius:16px;background:#111;cursor:grab}
.image-viewer-stage:active{cursor:grabbing}
.image-viewer-stage img{display:block;width:100%;max-width:100%;height:auto;min-width:0;margin:auto}
.image-viewer-stage img.is-portrait{width:min(480px,70vw);max-width:none}
@media(max-width:640px){.image-viewer{padding:12px}.image-viewer-tools{align-items:flex-start}.image-viewer-tools p{display:none}.image-viewer-actions{justify-content:flex-end}.image-viewer-actions button{height:36px;min-width:36px}.image-viewer-stage{width:100%;max-height:none}.image-viewer-stage img,.image-viewer-stage img.is-portrait{width:100%;max-width:none;min-width:100%}}
p{margin:0 0 1em}
a{color:var(--text);text-decoration:none}
:focus-visible{outline:2px solid var(--peri);outline-offset:4px;border-radius:6px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;position:relative;z-index:2}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.022em;margin:0}
.d1{font-size:clamp(42px,7.2vw,84px);line-height:1.02}
.d2{font-size:clamp(32px,4.6vw,58px);line-height:1.06}
.d3{font-size:clamp(26px,3.2vw,40px);line-height:1.1}
.label{font-family:var(--sans);font-size:13.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 18px}
.body{font-size:17.5px;line-height:1.72;color:var(--muted);max-width:76ch}
.body strong{color:var(--text);font-weight:600}
.tiny{font-size:13px;line-height:1.6;color:var(--dim)}

/* glowing fields */
.glow{position:absolute;inset:-10% -20%;z-index:0;pointer-events:none;opacity:.85}
.glow::before,.glow::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.34}
.glow::before{width:52vw;height:52vw;background:var(--a1);top:-14%;right:-8%}
.glow::after{width:44vw;height:44vw;background:var(--a2);bottom:-18%;left:-10%}
section{position:relative}
main{display:flex;flex-direction:column}
main>.hero{order:0;width:100%}
main>.work{order:1;width:100%}
main>.ai{order:2;width:100%}
main>.strip{order:3;width:100%}
main>.about{order:4;width:100%}
main>.contact{order:5;width:100%}

/* nav */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:200;
  display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;
  background:rgba(16,14,20,.6);backdrop-filter:blur(18px);border:1px solid var(--line)}
.nav a{font-size:13.5px;font-weight:600;color:var(--muted);padding:9px 15px;border-radius:999px;transition:color .2s var(--e),background .2s var(--e),filter .2s var(--e),transform .2s var(--e),box-shadow .25s var(--e)}
.nav a:hover{color:var(--text);background:rgba(245,242,237,.07)}
.nav a.me{color:var(--text);font-family:var(--serif);font-weight:500;font-size:15px}
@media(max-width:640px){.nav a:not(.me):not(.hire){display:none}}
.nav a.hire,.nav button.hire{background:linear-gradient(90deg,var(--peri),#B9A0F0);color:#16121C;font-weight:700}
.nav a.hire:hover,.nav button.hire:hover{color:#16121C;filter:brightness(1.09);transform:translateY(-1px);box-shadow:0 6px 18px rgba(157,155,245,.38)}
.nav a.me{white-space:nowrap}
@media(max-width:640px){
  .nav{top:12px;padding:5px 6px;max-width:calc(100% - 24px)}
  .nav a.me{font-size:14px;padding:9px 12px}
  .nav a.hire{padding:9px 16px}
}

/* hero */
.hero{--a1:#7C5CFF;--a2:#E8A33D;min-height:100svh;display:flex;align-items:center;padding:120px 0 60px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero .body{font-size:19px;max-width:46ch;margin-top:22px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:700;
  border:1px solid transparent;cursor:pointer;transition:transform .2s var(--e),box-shadow .3s var(--e)}
.btn.solid{background:linear-gradient(100deg,var(--peri),#C0A2F2 60%,var(--amber));color:#15111B;box-shadow:0 10px 34px rgba(157,155,245,.24)}
.btn.solid:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(157,155,245,.34)}
.btn.wire{border-color:var(--line);color:var(--text);background:rgba(245,242,237,.03)}
.btn.wire:hover{border-color:var(--peri);transform:translateY(-2px)}

/* device */
.device{position:relative;justify-self:center;width:100%;max-width:330px}
.device::before{content:"";position:absolute;inset:-14% -22%;background:radial-gradient(closest-side,color-mix(in srgb,var(--a1) 50%,transparent),transparent 72%);filter:blur(34px);z-index:0}
.phone{position:relative;z-index:1;aspect-ratio:390/800;border-radius:46px;background:#05050A;
  border:1px solid rgba(245,242,237,.14);overflow:hidden;box-shadow:0 46px 90px rgba(0,0,0,.62)}
.phone .notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:104px;height:24px;background:#000;border-radius:14px;z-index:5}
.phone .hbar{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:118px;height:4px;border-radius:2px;background:rgba(245,242,237,.28);z-index:5}
.facade{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;overflow:hidden;font-size:0;
  background:linear-gradient(168deg,#0E3358 0%,#2B2A6E 52%,#54287A 100%)}
.facade img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:opacity .4s var(--e),transform .7s var(--e)}
.facade:hover img{opacity:1;transform:scale(1.03)}
.pl{position:absolute;inset:0;display:grid;place-items:center;z-index:3}
.pl i{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:rgba(245,242,237,.14);backdrop-filter:blur(10px);border:1px solid rgba(245,242,237,.4);
  transition:transform .3s var(--e),background .3s var(--e)}
.facade:hover .pl i{transform:scale(1.09);background:rgba(245,242,237,.22)}
.pl i::after{content:"";width:0;height:0;border-left:17px solid var(--text);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.phone iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.devcap{text-align:center;margin-top:16px;font-size:12.5px;color:var(--dim)}
/* iPhone 12 Pro frame: screen 390x844, ~12pt bezel */
.ip{position:relative;width:100%;aspect-ratio:414/868;border-radius:13.2%/6.3%;
  background:linear-gradient(150deg,#3a3a42,#15151a 42%,#2b2b33);padding:2.9%;
  box-shadow:0 22px 50px rgba(0,0,0,.62),inset 0 0 0 1px rgba(245,242,237,.09)}
.ip .scr{position:relative;width:100%;height:100%;border-radius:11.3%/5.4%;overflow:hidden;background:#000}
.ip .scr img,.ip .scr video{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.ip.tall-screen{aspect-ratio:414/980}
.runoff-device{position:relative;align-self:start}
.runoff-device.runoff-start{aspect-ratio:414/1468}
.runoff-device.runoff-waiting{aspect-ratio:414/980}
.runoff-device.runoff-contact{aspect-ratio:414/2272}
.runoff-device>.ip{position:absolute;inset:0 auto auto 0}
.ip.runoff-screen{aspect-ratio:414/868;overflow:visible}
.ip.runoff-screen .scr{overflow:visible;border-radius:11.3% 11.3% 0 0/5.4% 5.4% 0 0}
.ip.runoff-screen .scr img{height:auto;object-fit:initial;position:relative;z-index:3;border-radius:11.3% 11.3% 0 0/5.4% 5.4% 0 0}
.ip .nch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:40%;height:3.4%;
  background:#000;border-radius:0 0 14px 14px;z-index:4}
.ew-mobile .ios-status{position:absolute;inset:0 0 auto;height:4.8%;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:0 7%;background:#000;color:#fff;font:700 clamp(6px,.72vw,9px)/1 var(--sans);letter-spacing:.02em}
.ew-mobile>img{position:absolute;top:4.8%;left:0;width:100%;height:auto!important;object-fit:initial!important;object-position:top!important}
.ew-mobile .ew-action{position:absolute;z-index:5;left:0;right:0;bottom:0;height:13.5%;display:flex;align-items:center;padding:5% 7%;background:#fff;border-top:1px solid #eee}
.ew-mobile .ew-action span{display:grid;place-items:center;width:100%;height:100%;min-height:0;border-radius:8px;background:#0b0b0b;color:#fff;font:600 clamp(7px,.9vw,11px)/1 var(--sans)}
.ew-mobile .ew-action.is-disabled span{background:#d7d9d9;color:#5b6060}
.frame-row{display:flex;gap:28px;flex-wrap:wrap;justify-content:center;align-items:flex-end;margin:34px 0 0}
.frame-row .device{max-width:240px}
.case.evgw .ip .scr{background:#fff}
.case.evgw .frame-row{align-items:flex-start}
.case.evgw>.wrap>p:last-child{position:relative;z-index:20;pointer-events:auto}
.mac{position:relative;width:100%}
.mac .screen{position:relative;border-radius:14px 14px 0 0;background:#000;border:1px solid rgba(245,242,237,.14);
  border-bottom:none;overflow:hidden;box-shadow:0 46px 90px rgba(0,0,0,.5)}
.mac .screen::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:7px;height:7px;
  border-radius:50%;background:#0a0a0a;z-index:5;box-shadow:0 0 0 1px rgba(245,242,237,.08)}
.mac .screen img{width:100%;height:auto;display:block}
.mac .deck{height:14px;background:linear-gradient(180deg,#1c1a22,#0c0a10);border-radius:0 0 10px 10px;
  border:1px solid rgba(245,242,237,.1);border-top:none;position:relative}
.mac .deck::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:16%;height:5px;
  background:rgba(0,0,0,.35);border-radius:0 0 6px 6px}
.mac-wrap{max-width:640px;margin:34px auto 0}
@media(max-width:900px){
  .hero{min-height:auto;padding:132px 0 40px}
  .device{max-width:270px}
}

/* marquee */
.strip{border-block:1px solid var(--line);overflow:hidden;padding:28px 0;background:rgba(245,242,237,.02)}
.track{display:flex;gap:44px;width:max-content;animation:run 38s linear infinite}
.track span{font-size:13px;font-weight:600;color:var(--dim);letter-spacing:.05em;white-space:nowrap}
.track span::after{content:"·";margin-left:44px;color:var(--peri)}
@keyframes run{to{transform:translateX(-50%)}}
.strip:hover .track{animation-play-state:paused}

/* POV */
.pov{--a1:#E8A33D;--a2:#9D9BF5;padding:130px 0;text-align:center;overflow:hidden}
.pov .d2{max-width:19ch;margin:0 auto 26px}
.pov .grad{background:linear-gradient(96deg,var(--amber),#F2C57C 40%,var(--peri));-webkit-background-clip:text;background-clip:text;color:transparent}
.pov .body{max-width:60ch;margin:0 auto;font-size:18px}

/* work */
.work{padding:40px 0 0}
.sec-top{padding-bottom:20px}
.case{padding:96px 0;overflow:hidden;border-top:1px solid var(--line)}
.case.bku{--a1:#2FB6F5;--a2:#8B5CF6}
.case.evg{--a1:#34D399;--a2:#22D3EE}
.case.wu{--a1:#FFD24A;--a2:#FF7A3D}
.case.rtr{--a1:#F5C451;--a2:#E8834D}
.case.evgw{--a1:#8B9DF5;--a2:#34D399}
.case-head{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start;margin-bottom:44px}
.meta{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:22px 0 0}
.meta li{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:4px 11px}
@media(max-width:900px){.case-head{grid-template-columns:1fr;gap:24px}}

/* big visual */
.shot{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:var(--s1)}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(16,14,20,.5))}
.shot .fill{aspect-ratio:16/9;display:grid;place-items:center;text-align:center;padding:34px;
  background:radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--a1) 26%, transparent), transparent 62%),
             radial-gradient(120% 120% at 90% 100%, color-mix(in srgb, var(--a2) 26%, transparent), transparent 60%), var(--s1)}
.shot .fill b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text);margin-bottom:9px}
.shot .fill span{font-size:14px;color:var(--muted);max-width:40ch;display:block;line-height:1.6}
.cap{margin:14px 2px 0;font-size:14px;line-height:1.6;color:var(--muted);max-width:76ch}
.cap b{color:inherit;font-weight:700}
.qt{border-left:2px solid var(--a1);padding:3px 0 3px 20px;margin:0 0 16px;color:var(--text);font-size:18px;line-height:1.55;font-style:italic;max-width:60ch}
.qt:last-child{margin-bottom:0}
.quotes{margin:22px 0 0}
.shot img{width:100%;height:auto;display:block}
.shot.device-cutout{overflow:visible;border:0;border-radius:0;background:transparent}
.shot.device-cutout::after{display:none}
.shot.device-cutout img{mix-blend-mode:normal}
.shot .prototype-frame{width:100%;height:800px;display:block;border:0;background:#efece4}
.shot img.blend{opacity:.85}
.shot.tall{max-height:760px;overflow:hidden}
.shot.tall img{object-fit:cover;object-position:top}
/* home overrides .shot.tall to max-height:620px inline; case study pages use 760px */

.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
/* iPhone 8: silver body, white face, 375x667pt screen.
   Screen is absolutely positioned so top/bottom % resolve against HEIGHT, not width. */
.ip8{position:relative;width:100%;max-width:252px;margin:0 auto;aspect-ratio:431/887;
  border-radius:13.4%/6.5%;
  background:linear-gradient(148deg,#ececf0,#c4c4cd 20%,#f6f6f8 48%,#bcbcc6 76%,#e6e6ec);
  box-shadow:0 26px 54px rgba(0,0,0,.58),0 2px 5px rgba(0,0,0,.45)}
.ip8::before{content:"";position:absolute;inset:1.5%;border-radius:12.1%/5.9%;
  background:linear-gradient(180deg,#fcfcfd,#f1f1f4);box-shadow:inset 0 0 0 1px rgba(0,0,0,.09)}
.ip8 .scr{position:absolute;top:12.2%;bottom:12.2%;left:6.6%;right:6.6%;
  overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(0,0,0,.28)}
/* pull the iOS status bar (20pt of a 667pt screen = 3%) up out of frame */
.ip8 .scr img{position:absolute;top:-3%;left:0;width:100%;height:auto;display:block}
.ip8 .spk{position:absolute;top:7.6%;left:50%;transform:translateX(-50%);width:16%;height:.95%;
  border-radius:99px;background:#31333a;z-index:2}
.ip8 .cam{position:absolute;top:7.3%;left:35.5%;width:2.7%;aspect-ratio:1;border-radius:50%;
  background:#2b2d33;z-index:2}
.ip8 .hb{position:absolute;bottom:3.5%;left:50%;transform:translateX(-50%);width:13%;aspect-ratio:1;
  border-radius:50%;background:linear-gradient(160deg,#fdfdfe,#e3e3e9);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.17);z-index:2}
.duo{align-items:start}

@media(max-width:820px){.duo{grid-template-columns:1fr}}

/* video tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:34px}
.tile{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--s1);
  transition:transform .3s var(--e),border-color .3s var(--e),box-shadow .3s var(--e)}
.tile:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 0 1px color-mix(in srgb,var(--a1) 60%,transparent)}
.tile .th{display:block;aspect-ratio:16/9;position:relative;
  background:linear-gradient(150deg,color-mix(in srgb,var(--a1) 70%,#0A0A12),color-mix(in srgb,var(--a2) 70%,#0A0A12))}
.tile .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82}
.tile:hover .th img{opacity:1}
.tile .tt{display:block;padding:13px 15px;font-size:13.5px;font-weight:600;color:var(--text)}
.tile .tt small{display:block;font-weight:500;color:var(--dim);font-size:12px;margin-top:2px}

.more{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--text);
  border-bottom:1px solid color-mix(in srgb,var(--a1) 70%,transparent);padding-bottom:5px;transition:gap .25s var(--e),color .25s var(--e)}
.more:hover{gap:16px}
.more span{background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent;font-size:18px}

/* stats */
.stats{display:flex;flex-wrap:wrap;gap:14px 56px;margin:44px 0 0;padding:28px 0 0;border-top:1px solid var(--line)}
.stat .n{font-family:var(--serif);font-size:clamp(30px,3.6vw,44px);line-height:1;
  background:linear-gradient(92deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .t{font-size:13px;color:var(--dim);margin-top:8px;max-width:20ch;line-height:1.5}

/* AI */
.ai{--a1:#9D9BF5;--a2:#E8A33D;padding:120px 0;overflow:hidden;border-top:1px solid var(--line)}
.steps{margin-top:64px;display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
/* connecting path down the steps */
.step{position:relative}
.step::before{content:"";position:absolute;left:30px;top:52px;width:11px;height:11px;border-radius:50%;
  background:var(--peri);box-shadow:0 0 0 4px rgba(157,155,245,.16);z-index:2}
.step::after{content:"";position:absolute;left:35px;top:63px;bottom:-14px;width:1px;z-index:1;
  background:linear-gradient(180deg,rgba(157,155,245,.55),rgba(157,155,245,.06))}
.step:last-child::after{display:none}
.step{background:var(--bg);padding:44px 44px 44px 72px;display:grid;grid-template-columns:1fr 1.35fr;gap:44px;align-items:start;
  transition:background .35s var(--e)}
.step:hover{background:var(--s1)}
.step h3{font-size:clamp(26px,3.2vw,40px);line-height:1.1;color:var(--muted);
  transition:color .2s var(--e),transform .2s var(--e)}
.step:hover h3{color:var(--text);transform:translateY(-2px)}
.step:hover::before{box-shadow:0 0 0 6px rgba(157,155,245,.22)}
.step-fig{margin:24px 0 0}
.step-fig>img,.ai-prototype-video{display:block;width:100%;height:auto}
.step-fig .fill{aspect-ratio:4/3;padding:24px}
.step-fig .fill span{font-size:13px;max-width:34ch}
@media(max-width:860px){.step-fig{max-width:420px}}
.step .body{font-size:16.5px;max-width:52ch}
@media(max-width:860px){.step{grid-template-columns:1fr;gap:18px;padding:32px 26px 32px 56px}.step::before{left:22px;top:38px}.step::after{left:27px;top:49px}}
.proof-list{display:flex;flex-direction:column}
.proof-list p{font-size:16.5px;max-width:52ch;margin:0;padding:14px 0;border-top:1px solid var(--line)}
.proof-list p:first-child{border-top:none;padding-top:0}
.tool-row{display:flex;flex-wrap:wrap;gap:44px;align-items:flex-start;margin:8px 0 40px}
.tool-row div{display:flex;flex-direction:column;align-items:center;gap:9px}
.tool-row img{width:40px;height:40px;object-fit:contain;opacity:.72;transition:opacity .2s var(--e),transform .2s var(--e)}
.tool-row div:hover img{opacity:1;transform:translateY(-2px)}
.tool-row span{font-size:12.5px;color:var(--dim);font-weight:600;letter-spacing:.02em}

/* about */
.about{--a1:#E8A33D;--a2:#9D9BF5;padding:120px 0;overflow:hidden;border-top:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:330px 1fr;gap:60px;align-items:start}
.portrait{border-radius:20px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;
  background:radial-gradient(120% 120% at 25% 10%, rgba(232,163,61,.28), transparent 60%),
             radial-gradient(120% 120% at 85% 95%, rgba(157,155,245,.28), transparent 58%), var(--s1);
  display:grid;place-items:center;text-align:center;padding:26px}
.portrait b{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text);display:block;margin-bottom:8px}
.portrait span{font-size:13.5px;color:var(--muted);line-height:1.6}
.portrait .memoji-coin{width:100%;height:auto;transform-origin:center;transform-style:preserve-3d;backface-visibility:visible;
  animation:memoji-spin-in 1.45s cubic-bezier(.18,.82,.24,1) both;animation-play-state:paused}
.portrait.memoji-enter .memoji-coin{animation-play-state:running}
@keyframes memoji-spin-in{
  0%{opacity:0;transform:scale(.12) rotateY(-720deg)}
  72%{opacity:1;transform:scale(1.06) rotateY(18deg)}
  100%{opacity:1;transform:scale(1) rotateY(0deg)}
}
.about-money{margin:34px 0;padding-top:30px;border-top:1px solid var(--line)}
.about-money .label{margin-bottom:12px}
.about-money h3{font-size:clamp(25px,3vw,36px);line-height:1.12;margin:0 0 20px;max-width:18ch}
.about-money .grad{background:linear-gradient(96deg,var(--amber),#F2C57C 40%,var(--peri));-webkit-background-clip:text;background-clip:text;color:transparent}
.about-money .body{margin-bottom:16px}
.about-money .body:last-child{margin-bottom:0}
.roles{list-style:none;padding:0;margin:36px 0 0}
.roles li{display:grid;grid-template-columns:118px 1fr;gap:18px;padding:14px 0;border-top:1px solid var(--line);font-size:15px;align-items:baseline}
.roles .y{font-size:13px;color:var(--dim);font-weight:600}
.roles b{font-weight:600}
.roles span{color:var(--muted)}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:34px}.portrait{max-width:300px}}
@media(max-width:520px){.roles li{grid-template-columns:1fr;gap:2px}}
@media(prefers-reduced-motion:reduce){.portrait .memoji-coin{animation:none}}

/* contact */
.contact{--a1:#9D9BF5;--a2:#E8A33D;padding:140px 0 110px;text-align:center;overflow:hidden;border-top:1px solid var(--line)}
.contact .body{margin:0 auto 34px}
.foot{border-top:1px solid var(--line);padding:26px 40px 46px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:12.5px;color:var(--dim)}
.foot p:first-child{font-size:14px;color:var(--muted)}

/* case study pages (body{--a1;--a2} accent pair set per page) */
.cs-hero{padding:150px 0 50px;overflow:hidden}
.back{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:30px}
.back:hover{color:var(--text)}
.cs-lede{font-size:clamp(19px,2.1vw,24px);line-height:1.5;color:var(--text);max-width:34ch;margin:26px 0 0;font-family:var(--serif)}
.cs-body{padding:56px 0 40px}
.sec{padding:60px 0 0}
.sec h2{font-size:clamp(24px,2.8vw,34px);margin-bottom:20px}
.steps-n{list-style:none;padding:0;margin:0;counter-reset:s}
/* story timeline: all steps visible, connected rail */
.tl{margin-top:10px}
.tl-item{display:grid;grid-template-columns:auto 1fr;gap:24px;padding-bottom:36px;position:relative}
.tl-item:last-child{padding-bottom:0}
.tl-item-mark{position:relative;z-index:1}
.tl-num{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700;color:#12100E;background:linear-gradient(140deg,var(--a1),var(--a2))}
.tl-item::before{content:"";position:absolute;left:19px;top:46px;bottom:-6px;width:2px;background:linear-gradient(180deg,var(--a1),var(--a2));opacity:.32;z-index:0}
.tl-item:last-child::before{display:none}
.tl-item h4{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.3vw,26px);letter-spacing:-.02em;margin:0 0 10px;padding-top:7px}
.tl-item .body{margin:0}
@media(max-width:760px){
  .tl-item{gap:16px;padding-bottom:28px}
  .tl-num{width:34px;height:34px;font-size:12.5px}
  .tl-item::before{left:16px;top:40px}
  .tl-item h4{font-size:18px;padding-top:4px}
}
.steps-n li{counter-increment:s;position:relative;padding-left:54px;margin-bottom:26px;color:var(--muted);font-size:16.5px;line-height:1.7;max-width:68ch}
.steps-n li b{color:var(--text);font-weight:700}
.steps-n li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1px;font-family:var(--serif);font-size:18px;
  background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.todo{border:1px dashed var(--line);border-radius:14px;padding:20px 22px;color:var(--dim);font-size:14.5px;line-height:1.65;max-width:68ch}
.todo b{display:block;color:var(--muted);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:7px}
.nextprev{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:70px 0 90px;border-top:1px solid var(--line);margin-top:70px}

/* reveal */
.up{opacity:0;transform:translateY(26px);transition:opacity .8s var(--e),transform .8s var(--e)}
.up.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .up{opacity:1!important;transform:none!important}
}

/* ---------- pressed states (desktop + touch) ---------- */
a,button,.btn,.facade,summary{-webkit-tap-highlight-color:transparent}
/* primary + secondary buttons */
.btn:active{transition-duration:.07s}
.btn.solid:active{transform:translateY(0) scale(.965);
  box-shadow:0 4px 14px rgba(157,155,245,.26);filter:brightness(.95)}
.btn.wire:active{transform:translateY(0) scale(.965);
  background:rgba(245,242,237,.09);border-color:var(--peri)}
/* nav links, work button, menu rows */
.nav a:not(.hire):active,.nav .nbtn:active{background:rgba(245,242,237,.14);color:var(--text);
  transform:scale(.96);transition-duration:.07s}
.nav a.hire:active,.nav button.hire:active{transform:translateY(0) scale(.96);
  filter:brightness(.93);box-shadow:0 2px 8px rgba(157,155,245,.3);transition-duration:.07s}
.submenu a:active,.mmenu a:active{background:rgba(245,242,237,.15);transition-duration:.07s}
/* text links and the video facade */
.more:active,.back:active{opacity:.65;transition-duration:.07s}
.facade:active{transform:scale(.994);transition-duration:.07s}
.facade:active .pl i{transform:scale(.94);background:rgba(245,242,237,.3)}
/* the custom cursor dips on press */
.dot-cursor.press{transform:translate(-50%,-50%) scale(.72)}
.dot-cursor.hot.press{transform:translate(-50%,-50%) scale(.9)}
@media(prefers-reduced-motion:reduce){
  .btn.solid:active,.btn.wire:active,.nav a:not(.hire):active,.nav .nbtn:active,
  .nav a.hire:active,.nav button.hire:active,.facade:active{transform:none}
}

/* eyebrows: match the AI section's periwinkle across the page */
.pov>.wrap>.label,.work .sec-top .label,.about .label{
  background-image:linear-gradient(90deg,var(--peri),var(--peri))}

/* keep intrinsic aspect ratio when CSS controls width and the tag carries width/height attrs */
img[width][height]{height:auto}
.ip8 .scr img[width][height],.ip .scr img[width][height],.facade img[width][height],
.phone img[width][height],.mac .screen img[width][height]{height:100%}

/* nav: work dropdown + mobile menu */
.nav .nbtn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;font-family:inherit;
  font-size:13.5px;font-weight:600;color:var(--muted);padding:9px 15px;border-radius:999px;cursor:pointer;
  transition:color .2s var(--e),background .2s var(--e),transform .2s var(--e)}
.nav .nbtn:hover,.nav .nbtn[aria-expanded="true"]{color:var(--text);background:rgba(245,242,237,.07)}
.chev{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .22s var(--e)}
[aria-expanded="true"] .chev{transform:rotate(-135deg) translate(-2px,-2px)}
.nsub{position:relative;display:flex}
.submenu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);min-width:300px;
  background:rgba(20,17,26,.97);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid var(--line);border-radius:18px;padding:8px;
  box-shadow:0 26px 64px rgba(0,0,0,.66);z-index:210}
.submenu[hidden]{display:none}
.submenu a{display:block;padding:10px 14px;border-radius:12px;color:var(--text)}
.submenu a b{display:block;font-size:14px;font-weight:600}
.submenu a span{display:block;font-size:12px;color:var(--dim);margin-top:2px}
.submenu a:hover{background:rgba(245,242,237,.07)}
.submenu .allwork{margin-top:6px;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--peri)}
.submenu .allwork:hover{background:rgba(245,242,237,.07)}
.mtoggle{display:none;align-items:center;justify-content:center;border:0;cursor:pointer;
  width:38px;height:38px;padding:0;flex:none;border-radius:50%;font-family:inherit}
.mmenu{position:fixed;top:74px;left:50%;transform:translateX(-50%);width:min(340px,calc(100vw - 24px));
  background:rgba(20,17,26,.97);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid var(--line);border-radius:20px;padding:10px;z-index:199;
  box-shadow:0 28px 68px rgba(0,0,0,.66);max-height:calc(100svh - 96px);overflow-y:auto}
.mmenu[hidden]{display:none}
.mmenu>a{display:block;padding:12px 14px;border-radius:12px;font-size:15px;font-weight:600;color:var(--text)}
.mmenu>a:hover{background:rgba(245,242,237,.07)}
.mmenu .mm-h{margin:10px 0 4px;padding:0 14px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.mmenu .mm-case{display:block;padding:9px 14px;border-radius:12px;color:var(--text)}
.mmenu .mm-case b{display:block;font-size:14px;font-weight:600}
.mmenu .mm-case span{display:block;font-size:12px;color:var(--dim);margin-top:2px}
.mmenu .mm-case:hover{background:rgba(245,242,237,.07)}
.mmenu .mm-all{display:block;margin:8px 0 0;padding:10px 14px;border-radius:12px;
  font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--peri)}
.mmenu .mm-all:hover{background:rgba(245,242,237,.07)}
.mmenu .mm-sep{height:1px;background:var(--line);margin:12px 6px}
@media(max-width:640px){
  .nav .nl,.nsub{display:none}
  .nav a.hire{display:none}
  .mtoggle{display:inline-flex}
}

/* ---------- restored: hero, vine, phone cluster, cursor, overflow ---------- */
body{overflow-x:hidden}
.case{position:relative}

.hero{display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:110px 0 60px}
.hero-inner{display:flex;align-items:flex-start;gap:clamp(22px,3vw,52px);max-width:880px;margin:0 auto}
.hero-copy{text-align:left;max-width:600px}
.hero-copy .d1{max-width:20ch;font-size:clamp(28px,3.7vw,44px);line-height:1.1;text-wrap:balance}
.hero-copy .body{max-width:54ch;margin-bottom:0}
.hero-copy .cta{margin-top:40px}

.vine{flex:none;width:clamp(142px,16.8vw,235px);margin-top:-4px}
.vine svg{display:block;width:100%;height:auto;overflow:visible}
.vine .root,.vine .br{fill:none;stroke:url(#vineGrad);stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1}
.vine .root{stroke-width:3.2;animation:vdraw .5s ease-out forwards}
.vine .br{animation:vdraw .52s cubic-bezier(.25,.7,.35,1) forwards}
.vine .bud{fill:url(#vineGrad);filter:url(#tipGlow);opacity:0;transform:scale(0);
  transform-box:fill-box;transform-origin:center;animation:vbud .55s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes vdraw{to{stroke-dashoffset:0}}
@keyframes vbud{to{opacity:.95;transform:scale(1)}}

.hero-visuals{margin-top:clamp(42px,5vw,68px)}
.work{display:flex;flex-direction:column}
.work>.wrap,.work>article{width:100%}
.work>.sec-top{order:0}
.work>.evg{order:1}
.work>.evgw{order:2}
.work>.bku{order:3}
.work>.wu{order:4}
.visual-switch{display:flex;justify-content:center;gap:4px;margin:0 auto 20px;width:max-content;padding:4px;border:1px solid var(--line);
  border-radius:999px;background:rgba(16,14,20,.7)}
.visual-switch button{border:0;border-radius:999px;background:transparent;color:var(--dim);padding:7px 13px;font:600 11.5px/1 var(--sans);cursor:pointer}
.visual-switch button.is-on{background:rgba(245,242,237,.1);color:var(--text)}
.evergreen-home-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(340px,1.1fr);grid-template-areas:"copy preview" "cta preview";
  column-gap:clamp(36px,6vw,88px);row-gap:30px;align-items:center}
.evergreen-home-copy{grid-area:copy;align-self:end}
.evergreen-home-copy .d3{max-width:17ch}
.evergreen-home-copy .body{max-width:45ch;margin:24px 0 0;font-size:16px}
.evergreen-home-cta{grid-area:cta;align-self:start;margin:0}
.evergreen-preview{grid-area:preview;display:grid;place-items:center;min-width:0;margin:0}
.evergreen-artifact-stack{position:relative;width:100%;min-height:520px}
.evergreen-markdown{position:absolute;left:0;top:6%;width:78%;height:365px;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#171820;box-shadow:0 26px 70px rgba(0,0,0,.42);transform:rotate(-1.5deg)}
.evergreen-markdown::after{content:"";position:absolute;inset:auto 0 0;height:72px;background:linear-gradient(transparent,#171820)}
.evergreen-markdown-bar{height:38px;display:flex;align-items:center;gap:7px;padding:0 13px;border-bottom:1px solid rgba(255,255,255,.1);background:#20212a;color:#9293a0;font:500 9px/1 var(--mono)}
.evergreen-markdown-bar span{width:7px;height:7px;border-radius:50%;background:#565866}
.evergreen-markdown-bar b{margin-left:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.evergreen-markdown-body{padding:21px 23px;color:#b9bac5;font:500 11px/1.48 var(--mono)}
.evergreen-markdown-body p{margin:0 0 12px}
.evergreen-markdown-body .md-h1{color:#f0edf5;font-size:15px;font-weight:700}
.evergreen-markdown-body strong{color:#e5e2eb}
.evergreen-markdown-body em{color:#7f9dff;font-style:normal}
.md-flow{display:flex;align-items:center;gap:8px;margin-top:17px;color:#f0edf5}
.md-flow span{flex:1;padding:10px 6px;border:1px solid rgba(127,157,255,.35);border-radius:7px;background:rgba(127,157,255,.08);text-align:center;font-size:9px}
.md-flow small{color:#8f91a0;font-size:7px}
.md-flow i{color:#7f9dff;font-style:normal}
.evergreen-screen-crop{position:absolute;right:0;bottom:0;z-index:2;width:min(48%,270px);aspect-ratio:710/1540;background:transparent;filter:drop-shadow(0 26px 34px rgba(0,0,0,.55))}
.evergreen-preview-video{display:block;width:100%;height:100%;object-fit:contain;background:transparent;
  clip-path:inset(2.1% 5.8% 2.1% 5.8% round 14px)}
@media(max-width:1050px){
  .evergreen-home-layout{grid-template-columns:minmax(0,.95fr) minmax(300px,1.05fr);column-gap:32px}
  .evergreen-home-copy .d3{max-width:22ch}
  .evergreen-artifact-stack{min-height:480px}
  .evergreen-markdown{width:82%;height:330px}
  .evergreen-screen-crop{width:min(49%,245px)}
}
@media(max-width:680px){
  .evergreen-home-layout{grid-template-columns:1fr;grid-template-areas:"copy" "preview" "cta";gap:32px}
  .evergreen-preview{justify-items:start}
  .evergreen-artifact-stack{min-height:480px}
  .evergreen-markdown{top:0;width:88%;height:330px}
  .evergreen-screen-crop{width:min(48%,230px)}
}
.bank-home-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(340px,1.1fr);grid-template-areas:"copy preview" "cta preview";
  column-gap:clamp(36px,6vw,88px);row-gap:30px;align-items:center}
.bank-home-copy{grid-area:copy;align-self:end}
.bank-home-copy .d3{max-width:17ch}
.bank-home-copy .body{max-width:45ch;margin:24px 0 0;font-size:16px}
.bank-home-cta{grid-area:cta;align-self:start;margin:0}
.bank-home-preview{grid-area:preview;min-width:0;margin:0}
.bank-home-preview .shot{overflow:visible;border:0;background:transparent;border-radius:0}
.bank-home-preview .shot::after{display:none}
.bank-home-preview img{width:112%;max-width:none;margin-left:-6%;mix-blend-mode:normal}
@media(max-width:1050px){
  .bank-home-layout{grid-template-columns:minmax(0,.95fr) minmax(300px,1.05fr);column-gap:32px}
  .bank-home-copy .d3{max-width:22ch}
}
@media(max-width:680px){
  .bank-home-layout{grid-template-columns:1fr;grid-template-areas:"copy" "preview" "cta";gap:28px}
  .bank-home-preview{max-width:720px}
}
.wu-home-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:620px}
.wu-home-gallery figure{min-width:0;margin:0}
.wu-home-gallery .shot{aspect-ratio:375/1100;overflow:hidden;border-radius:14px;background:#fff;transition:transform .2s var(--e),border-color .2s var(--e)}
.wu-home-gallery .shot img{width:100%;height:auto;display:block}
.wu-home-gallery .shot:hover{transform:translateY(-3px);border-color:rgba(255,210,74,.55)}
@media(max-width:640px){.wu-home-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.constellation{position:relative;height:clamp(390px,43vw,475px);max-width:1080px;margin:0 auto}
.constellation::before{content:"";position:absolute;inset:3% 5%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(157,155,245,.13),transparent 68%);filter:blur(34px)}
.const-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.const-lines path{fill:none;stroke:rgba(245,242,237,.12);stroke-width:1.2;stroke-dasharray:4 7;
  vector-effect:non-scaling-stroke;transition:stroke .35s var(--e),stroke-width .35s var(--e),filter .35s var(--e)}
.const-node{position:absolute;z-index:2;display:flex;flex-direction:column;padding:11px;border:1px solid var(--line);
  border-radius:16px;background:rgba(20,18,25,.86);backdrop-filter:blur(12px);box-shadow:0 18px 54px rgba(0,0,0,.38);
  transition:transform .35s var(--e),border-color .35s var(--e),opacity .35s var(--e),box-shadow .35s var(--e)}
.const-kicker{font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:1px 2px 9px}
.const-media{display:block;overflow:hidden;border-radius:9px;background:#09080c;aspect-ratio:16/9}
.const-media img{width:100%;height:100%;object-fit:cover;display:block;opacity:.8;transition:opacity .35s var(--e),transform .55s var(--e)}
.const-title{font-size:11.5px;line-height:1.38;font-weight:650;color:var(--muted);margin:10px 2px 2px}
.node-research{width:20%;left:0;top:6%}.node-flow{width:22%;left:23%;top:52%}
.node-product{width:27%;left:41%;top:8%}.node-code{width:21%;left:69%;top:55%}.node-outcome{width:19%;right:0;top:7%}
.const-code{display:block;border-radius:9px;padding:16px 14px;background:#0b0a10;border:1px solid rgba(245,242,237,.06);
  color:#c9c6d1;font:11px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace}
.const-code i{color:var(--peri);font-style:normal}.const-code b{color:#73d9bf;font-weight:500}
.const-outcome{font-family:var(--serif);font-size:clamp(17px,1.8vw,24px);line-height:1.15;color:var(--text);padding:9px 2px 7px}
.const-outcome i{font-family:var(--sans);font-style:normal;color:var(--amber);font-size:.65em}
.const-node:hover,.const-node:focus-visible,.const-node.is-related{border-color:color-mix(in srgb,var(--peri) 60%,transparent);
  box-shadow:0 22px 62px rgba(0,0,0,.5),0 0 0 1px rgba(157,155,245,.1)}
.const-node:hover,.const-node:focus-visible{transform:translateY(-7px);z-index:5}
.const-node:hover .const-media img,.const-node:focus-visible .const-media img{opacity:1;transform:scale(1.035)}
.constellation.has-active .const-node:not(.is-active):not(.is-related){opacity:.45}
.const-lines path.is-active{stroke:var(--peri);stroke-width:1.8;stroke-dasharray:7 6;filter:drop-shadow(0 0 5px rgba(157,155,245,.6));animation:const-path 1.1s linear infinite}
@keyframes const-path{to{stroke-dashoffset:-13}}

.process-stack{max-width:1080px;margin:0 auto}.process-stack[hidden]{display:none}
.stack-stage{position:relative;height:clamp(390px,43vw,475px);perspective:1200px;overflow:hidden;border-radius:24px;
  background:radial-gradient(ellipse at 60% 50%,rgba(157,155,245,.13),transparent 55%)}
.stack-card{position:absolute;left:50%;top:48%;width:clamp(310px,44vw,520px);aspect-ratio:16/9;padding:12px;border-radius:18px;
  border:1px solid rgba(245,242,237,.14);background:rgba(22,20,28,.88);backdrop-filter:blur(10px);
  box-shadow:0 25px 70px rgba(0,0,0,.48);transform-style:preserve-3d;will-change:transform;
  transition:transform .5s var(--e),border-color .3s var(--e),opacity .3s var(--e)}
.stack-card img{display:block;width:100%;height:calc(100% - 25px);object-fit:cover;border-radius:10px;opacity:.84}
.stack-research{--base-x:-68%;--base-y:-69%;transform:translate(var(--base-x),var(--base-y)) rotate(-8deg);opacity:.5}
.stack-flow{--base-x:-58%;--base-y:-60%;transform:translate(var(--base-x),var(--base-y)) rotate(-4deg);opacity:.64}
.stack-code{--base-x:-48%;--base-y:-51%;transform:translate(var(--base-x),var(--base-y)) rotate(1deg);opacity:.78}
.stack-product{--base-x:-38%;--base-y:-42%;transform:translate(var(--base-x),var(--base-y)) rotate(5deg)}
.stack-code .const-code{height:calc(100% - 25px);font-size:clamp(12px,1.35vw,16px);padding:clamp(20px,3vw,36px)}
.stack-caption{position:absolute;left:4%;bottom:8%;z-index:8;max-width:250px;display:flex;flex-direction:column}
.stack-caption .label{margin-bottom:9px}.stack-caption strong{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.15}
.stack-caption>span:last-child{font-size:11px;color:var(--dim);margin-top:10px}

.dot-cursor{position:fixed;left:0;top:0;width:13px;height:13px;border-radius:50%;
  background:rgba(245,242,237,.9);box-shadow:0 0 0 1px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.35);
  border:0 solid rgba(245,242,237,.95);box-sizing:border-box;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);opacity:0;
  transition:width .18s var(--e),height .18s var(--e),background .18s var(--e),
    border-width .18s var(--e),opacity .18s var(--e)}
.dot-cursor.on{opacity:1}
.dot-cursor.hot{width:38px;height:38px;background:transparent;border-width:1.5px;
  box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.dot-cursor.press{transform:translate(-50%,-50%) scale(.72)}
.dot-cursor.hot.press{transform:translate(-50%,-50%) scale(.9)}
body.dot-on{cursor:none}
body.dot-on a,body.dot-on button,body.dot-on .btn,body.dot-on .facade{cursor:none}
body.dot-on input,body.dot-on textarea,body.dot-on select{cursor:auto}
@media(hover:none),(pointer:coarse){.dot-cursor{display:none!important}}

@media(max-width:860px){
  .constellation{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:620px}
  .const-lines{display:none}.const-node,.node-research,.node-flow,.node-product,.node-code,.node-outcome{position:relative;inset:auto;width:auto}
  .node-product{grid-column:span 2}.constellation.has-active .const-node:not(.is-active):not(.is-related){opacity:1}
  .stack-caption{left:18px;bottom:18px}.stack-card{width:min(68vw,430px)}
}
@media(max-width:760px){
  .hero-inner{flex-direction:column;align-items:center;gap:22px;text-align:center}
  .vine{width:116px;height:auto;margin-top:0}
  .hero-copy{text-align:center}
  .hero-copy .d1,.hero-copy .body{margin-left:auto;margin-right:auto}
  .hero-copy .cta{justify-content:center}
}
@media(max-width:520px){
  .visual-switch{max-width:100%;width:auto;gap:2px}.visual-switch button{padding:7px 9px;font-size:10.5px}
  .constellation{grid-template-columns:1fr}.node-product{grid-column:auto}
  .stack-stage{height:430px}.stack-card{width:78vw;left:54%;top:42%}.stack-caption{max-width:210px}
  .stack-caption strong{font-size:19px}
}
@media(prefers-reduced-motion:reduce){
  .vine .root,.vine .br{animation:none;stroke-dashoffset:0}
  .vine .bud{animation:none;opacity:.95;transform:none}
  .const-lines path.is-active{animation:none}
}

/* tablet and up: hold "I follow problems to their roots," on one line.
   The phrase measures 14.3em at any size, so the cap is in em and scales with the
   clamp()ed font. The old 20ch cap resolved to ~12em and forced a break mid-phrase. */
@media(min-width:641px){
  .hero-inner{max-width:1080px}
  .hero-copy{max-width:780px}
  .hero-copy .d1{max-width:17em;text-wrap:pretty}
}

/* Audit gate G2: a phone-sized screen must be visible before any scroll.
   The hero had no image or video above the fold at any width. The phone costs the
   headline some measure, so at this breakpoint it drops from 17em to 15em, which still
   holds "I follow problems to their roots," on one line (the phrase measures 14.3em). */
.hero-phone{display:block}
@media(min-width:980px){
  .hero-inner{max-width:1140px;gap:clamp(24px,3vw,36px);align-items:center}
  .vine{width:clamp(150px,13vw,185px)}
  .hero-copy{max-width:660px}
  .hero-copy .d1{max-width:15em}
  .hero-phone{flex:none;width:clamp(188px,16vw,224px);margin:0}
}

/* Mobile G2: the phone has to be above the fold at 390x844 too. There is not room
   to stack tree, phone, headline, subhead and buttons, so the tree and the phone
   share one row and the copy drops below them. */
@media(max-width:760px){
  .hero{padding-top:76px;padding-bottom:40px}
  .hero-inner{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:13px}
  .vine{order:1;width:84px;margin:0}
  .hero-phone{order:2;width:132px;margin:0}
  .hero-copy{order:3;flex-basis:100%;text-align:center;margin-top:4px}
}

/* the hero prototype is shown bare: the .ip phone chrome added a gray frame and its
   rounded .scr clipped into the recording's own taupe screen corners */
.hero-phone{position:relative}
.hero-phone-video{position:relative;z-index:3;display:block;width:100%;height:auto;
  clip-path:inset(2.1% 5.8% 2.1% 5.8% round clamp(10px,1.3vw,16px));
  box-shadow:0 24px 60px rgba(0,0,0,.55)}

/* the phone must not vanish between the mobile row and the 980px desktop rule,
   or G2 fails on every tablet and small laptop */
@media(min-width:761px) and (max-width:979px){
  .hero-phone{flex:none;width:clamp(130px,18.5vw,170px);margin:0}
  .hero-copy .d1{max-width:15em}
}