/* Variant 2: "inside the box". The whole site is one infinite zoom:
   every scene hides the next scene inside a portal, and the last one leads back to the box. */
:root{
  --paper:#f3f0e9; --white:#fbfaf6; --ink:#121211; --yellow:#f7d840; --blue:#2e3df2; --orange:#ff5a1f;
  --kraft:#d4a86e; --kraft-d:#b88a4f; --kraft-l:#e6c38f; --grid:#e9e6de;
  --sans:"Inter Tight",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; --serif:"Instrument Serif",Georgia,serif;
  /* page + card skin (themes override these) */
  --page-bg:var(--paper); --page-fg:var(--ink); --page-line:rgba(18,18,17,.14); --page-accent:var(--orange);
  --btn-bg:var(--ink); --btn-fg:var(--paper); --band-bg:var(--ink); --band-fg:var(--paper); --logo-filter:invert(1);
  --card-bg:var(--paper); --card-fg:var(--ink); --card-line:var(--ink);
  --logo-on-bg:brightness(0); --page-logo:brightness(0); --page-logo-mode:color;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--page-bg);color:var(--page-fg);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body.home,html:has(body.home){height:100%;overflow:hidden;touch-action:none;overscroll-behavior:none}
button{font:inherit;color:inherit}

/* ── the camera ── */
#world{position:fixed;inset:0;overflow:hidden;transition:opacity .25s}
.stack{position:absolute;inset:0}
.scene{position:absolute;left:0;top:0;overflow:hidden;background:var(--bg);color:var(--fg)}
.scene.nested{transform-origin:0 0}

/* ── portals: the next scene, waiting inside this one ── */
.portal{position:absolute;transform-origin:0 0;z-index:6;cursor:zoom-in}
.portal-win{position:absolute;inset:0;overflow:hidden;background:var(--paper);box-shadow:0 0 0 2px var(--fg);transition:box-shadow .25s}
.portal:hover .portal-win{box-shadow:0 0 0 3px var(--fg),8px 8px 0 0 var(--fg)}
.portal-win.void{background:var(--ink)}
.portal-label{position:absolute;left:0;bottom:100%;margin-bottom:8px;font:700 11px/1 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;color:var(--fg);pointer-events:none}
.portal:hover .portal-label::after{content:" ↘";}

/* ── shared type ── */
.eyebrow{font:700 12px/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase;margin:0}
.mega{font-weight:850;letter-spacing:-.05em;line-height:.86;margin:0}
.lede{font-size:clamp(15px,1.3vw,20px);line-height:1.42;max-width:32em;font-weight:460;margin:0}
.s-head{position:absolute;left:6vw;top:14vh;width:min(38vw,560px);z-index:5;pointer-events:none}
.s-head h2{font-size:min(5vw,8.4vh);margin:16px 0 20px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.tags span{border:1.5px solid currentColor;border-radius:99px;padding:5px 10px;font:700 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em}
.pill{font:750 15px/1 var(--sans);background:var(--fg);color:var(--bg);border:0;border-radius:99px;padding:15px 22px;cursor:pointer;transition:transform .2s}
.pill:hover{transform:translateY(-2px) rotate(-1.5deg)}
.mono-s{font:600 12px var(--mono);opacity:.7}

/* ── 00 the box ── */
.sc-box{--bg:var(--paper);--fg:var(--ink)}
.mega span{display:block}
.mega s{text-decoration-thickness:.1em;text-decoration-color:var(--orange)}
.mega em{font-style:normal;background:var(--orange);color:var(--paper);padding:0 .1em;border-radius:.06em}
.flap.b{transform-box:fill-box;transform-origin:50% 100%;animation:flap 3.2s ease-in-out infinite}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.9)}}
@keyframes shake{20%{translate:-6px 2px}40%{translate:5px -3px}60%{translate:-3px 1px}80%{translate:2px 0}}

/* ── 01 what if ── */
.sc-q{--bg:var(--yellow);--fg:var(--ink)}
.s1-eyebrow{position:absolute;left:6vw;top:14vh;max-width:min(46vw,620px);z-index:4;text-transform:none;letter-spacing:0;font-weight:500}
@keyframes blink{50%{opacity:0}}
.chips{position:absolute;inset:0;z-index:2}
.chip{position:absolute;left:0;top:0;font:750 clamp(13px,1.05vw,17px)/1 var(--sans);padding:.6em .95em;border:2px solid var(--ink);border-radius:99px;
  background:var(--yellow);white-space:nowrap;cursor:pointer;user-select:none}
.chip:hover{background:var(--ink);color:var(--yellow)}
.chip i{display:inline-block;font-style:normal}
.chip.pop i{animation:pop .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes pop{0%{transform:scale(1)}30%{transform:scale(1.5) rotate(-8deg)}100%{transform:scale(1)}}
.qmark{position:absolute;z-index:5}
.qmark svg{position:absolute;left:0;top:0;overflow:visible}
.qmark path{fill:none;stroke:var(--ink);stroke-linecap:butt}

/* ── 02 research ── */
.sc-r{--bg:var(--white);--fg:var(--ink)}
.notes{position:absolute;inset:0;z-index:2;pointer-events:none}
.note{position:absolute;font:500 12.5px/1.4 var(--mono);color:#8a867c;width:min(220px,40vw)}
.note::before{content:attr(data-n);display:block;font-size:10px;opacity:.6;margin-bottom:2px}
.note .ins{display:block;color:var(--orange);font-weight:700;opacity:0;margin-top:5px}
.notes.mag{background:var(--white);z-index:3}
.notes.mag .note{color:var(--ink)}
.notes.mag .ins{opacity:1}

/* ── 03 design ── */
.sc-d{--bg:var(--blue);--fg:var(--paper);--s1:var(--yellow);--s2:var(--orange);--s3:var(--paper);--s4:var(--ink);--s-line:var(--ink)}
.pad-clear{position:absolute;right:12px;top:10px;background:none;border:1.5px solid var(--paper);border-radius:99px;padding:6px 12px;font:700 11px var(--mono);text-transform:uppercase;cursor:pointer}
.pad-clear:hover{background:var(--paper);color:var(--blue)}

/* ── 04 technology ── */
.sc-t{--bg:var(--grid);--fg:var(--ink);--scr-bg:var(--paper);--scr-ink:var(--ink);--scr-a:var(--orange);--scr-b:var(--blue);background-image:radial-gradient(rgba(0,0,0,.16) 1px,transparent 1.5px);background-size:22px 22px}
.node{position:absolute;background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:12px 18px 12px 14px;box-shadow:5px 5px 0 var(--ink);z-index:2}
.node b{display:block;font-weight:800;font-size:clamp(15px,1.25vw,20px);letter-spacing:-.02em}
.node small{display:block;font:600 11px/1.3 var(--mono);opacity:.7;margin-top:3px}
.node.in{left:0;width:40%}
.node.in:nth-of-type(1){top:6%}.node.in:nth-of-type(2){top:38%}.node.in:nth-of-type(3){top:70%}
.node.out{right:0;top:10%;width:50%;padding:12px}
.port{position:absolute;right:-12px;top:50%;margin-top:-11px;width:22px;height:22px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);cursor:crosshair;touch-action:none;padding:0;z-index:3}
.port:hover,.port:focus-visible{background:var(--yellow)}
.node.on .port{background:var(--orange)}
.node.out .port{left:-12px;right:auto;top:44px}
.node.out.hot{box-shadow:5px 5px 0 var(--orange)}
.screen{display:block;width:100%;aspect-ratio:4/3;background:var(--paper);border:1.5px solid var(--ink);border-radius:8px;margin:8px 0 6px;image-rendering:pixelated}
.cables{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.cables path{fill:none;stroke:var(--orange);stroke-width:6;stroke-linecap:round}
.cables path.live{stroke:var(--ink);stroke-dasharray:2 10}
.sc-t .s-head h2{transition:letter-spacing .08s}

/* ── clients & work ── */
.sc-clients{--bg:var(--orange);--fg:var(--ink)}
.wall{position:absolute;left:48vw;top:13vh;width:46vw;height:31vh;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:8px}
.cl-logo{border:1.5px solid color-mix(in srgb,var(--fg) 28%,transparent);border-radius:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:8px;text-align:center;transition:background .2s,color .2s}
.cl-logo b{font-weight:800;font-size:clamp(14px,1.3vw,20px);letter-spacing:-.03em}
.cl-logo small{font:700 10px var(--mono);text-transform:uppercase;letter-spacing:.06em;opacity:.6}
.cl-logo img{max-width:72%;max-height:46%;object-fit:contain;filter:var(--logo-on-bg)}
.cl-logo img.color{filter:none}
.wall .cl-logo{min-height:0;overflow:hidden}
.wall .cl-logo img{max-height:64%}
.wall .cl-logo{background:#fff;border-color:transparent;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.wall .cl-logo:hover{border-color:transparent;box-shadow:0 10px 24px -12px rgba(0,0,0,.35)}
/* highlighted words */
.lede mark{background:var(--yellow);color:var(--ink);padding:0 .14em;border-radius:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cl-logo{transition:border-color .2s,transform .2s}.cl-logo:hover{border-color:var(--fg);transform:translateY(-2px)}
.card{position:absolute;left:0;top:0;width:var(--cw);z-index:3;cursor:grab;touch-action:none;user-select:none;perspective:1100px}
/* the card is a real two-sided object: tapping turns it over */
.card .in{position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.35,.45,1)}
.card .front,.card .back{background:var(--card-bg);color:var(--card-fg);border:2px solid var(--card-line);border-radius:12px;padding:10px 10px 12px;box-shadow:6px 6px 0 var(--card-line);
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.card .back{position:absolute;inset:0;transform:rotateY(180deg);padding:14px 14px 12px;display:flex;flex-direction:column;overflow:hidden}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;display:block;pointer-events:none;background:#ddd}
.card h3{font-size:clamp(15px,1.15vw,18px);margin:10px 2px 3px;letter-spacing:-.02em;line-height:1.1}
.card .back p{font-weight:750;font-size:clamp(14px,1.1vw,17px);line-height:1.2;letter-spacing:-.02em;margin:0 0 10px}
.card .back ul{list-style:none;margin:0 0 10px;padding:0;font:600 10px/1.7 var(--mono);text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.card .in{transition:none}}

/* ── 06 talk ── */
.sc-c{--bg:var(--ink);--fg:var(--paper)}
.sc-c .s-head{width:min(56vw,900px);pointer-events:auto}
.sc-c .s-head h2{font-size:min(5.6vw,9vh)}
.sc-c .s-head h2 em{font-style:normal;color:var(--yellow)}
.ask{margin-top:4vh;max-width:760px}
.ask-q{display:flex;align-items:baseline;gap:.3em;font-weight:800;font-size:min(2.8vw,4.6vh);letter-spacing:-.03em;border-bottom:3px solid var(--yellow);padding-bottom:6px}
.ask-q input{flex:1;min-width:0;background:none;border:0;outline:0;font:inherit;color:var(--yellow);letter-spacing:inherit}
.ask-q input::placeholder{color:rgba(247,216,64,.4)}
.ask-row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.ask-row input{flex:1 1 160px;background:none;border:1.5px solid rgba(243,240,233,.4);border-radius:99px;padding:13px 16px;font:600 13px var(--mono);color:var(--paper);outline:0}
.ask-row input:focus{border-color:var(--yellow)}
.ask-row button{background:var(--yellow);color:var(--ink);border:0;border-radius:99px;padding:13px 22px;font:800 15px var(--sans);cursor:pointer}
.ask-msg{font:600 13px/1.5 var(--mono);color:var(--yellow);min-height:1.5em;margin:12px 0 0}
.ways{position:absolute;right:6vw;top:16vh;width:min(26vw,360px);z-index:4;font:600 13px/1.5 var(--mono)}
.ways a,.ways button{color:var(--paper);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font:inherit;text-align:left}
.ways a:hover,.ways button:hover{color:var(--yellow)}
.ways div{border-top:1.5px solid rgba(243,240,233,.25);padding:12px 0}
.ways .k{display:block;font-size:10px;opacity:.55;text-transform:uppercase;letter-spacing:.08em}
.ways .big{font:800 clamp(16px,1.5vw,22px)/1.2 var(--sans);letter-spacing:-.02em}

/* ── portal placement per scene ── */
.sc-q .portal{position:absolute}
.sc-r .portal{left:6vw;top:73vh}
.sc-d .portal{left:7vw;top:72vh}
.sc-t .portal{left:7vw;top:72vh}
.sc-clients .portal{left:7vw;top:73vh}
.sc-c .portal{right:8vw;bottom:10vh}

/* ── portrait / phones ── */
@media (max-aspect-ratio:4/5){
  .s-head{left:6vw;right:6vw;width:auto;top:12.5vh}
  .s-head h2{font-size:9.6vw;margin:10px 0 12px}
  .s-head .tags{display:none}
  .s1-eyebrow{top:12.5vh;max-width:none;right:6vw}
  .node{padding:8px 12px 8px 10px}
  .node small{display:none}
  .wall{left:6vw;width:88vw;gap:6px}
  .cl-logo img{max-width:82%;max-height:52%}
  .sc-clients .card{display:none}
  .sc-r .portal{left:auto;right:7vw;top:14vh}
  .sc-r .s-head{right:42vw}
  .ways{position:static;width:auto;margin-top:3vh}
  .ways div{padding:8px 0}
  .sc-c .s-head{width:auto}
  .sc-c .s-head h2{font-size:9vw}
  .ask-q{font-size:6.2vw}
  .sc-c .portal{right:6vw;bottom:12vh}
}
.meter{font:700 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;display:flex;align-items:center;gap:10px;white-space:nowrap}
.meter .bar{width:64px;height:2px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.meter .bar b{position:absolute;inset:0;background:#fff;transform-origin:0 0;transform:scaleX(0)}
.hb{background:none;border:1.5px solid #fff;color:#fff;border-radius:99px;padding:7px 12px;font:700 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.hb:hover,.hb[aria-pressed=true]{background:#fff;color:#000}
.dock{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;z-index:20;mix-blend-mode:difference;color:#fff}
.dock .hint{font:700 11px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;text-align:center;max-width:60vw}
.dock .hb{width:34px;height:34px;padding:0;display:grid;place-items:center;font-size:14px}
.stamp{position:fixed;inset:0;display:grid;place-items:center;z-index:19;pointer-events:none;mix-blend-mode:difference;color:#fff;
  font:800 min(30vw,46vh)/1 var(--sans);letter-spacing:-.06em;opacity:0}
@media (max-aspect-ratio:4/5){
  .meter{grid-column:1/-1;grid-row:2;justify-self:start}
  .meter .bar{width:40px}
  .dock .hint{max-width:62vw;font-size:10px}
}

/* ── menu: links to real pages ── */
.nav{display:flex;gap:8px}
.hb{text-decoration:none}
#menuBtn{display:none}
@keyframes mIn{from{clip-path:circle(0 at 100% 0)}to{clip-path:circle(150% at 100% 0)}}
@media (max-aspect-ratio:4/5){ #menuBtn{display:block} }

@media (prefers-reduced-motion:reduce){
  .flap{animation:none}
}

/* ═════════ pages: Work, Studio, Contact (normal scrolling pages) ═════════ */
.page{--fg:var(--page-fg);--bg:var(--page-bg);min-height:100vh}
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 6vw;background:var(--page-bg);border-bottom:1.5px solid var(--page-line)}
.top-logo img{height:19px;display:block;filter:var(--logo-filter)}
.top-nav{display:flex;gap:6px;flex-wrap:wrap}
.top-nav a,.top-cta{font:700 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--page-fg);border:1.5px solid var(--page-fg);border-radius:99px;padding:8px 13px;white-space:nowrap}
.top-nav a[aria-current=page],.top-nav a:hover{background:var(--page-fg);color:var(--page-bg)}
.top-cta{border-color:transparent;opacity:.75}.top-cta:hover{opacity:1}
.pg{padding:0 6vw}
.pg-hero{padding-top:13vh;padding-bottom:9vh}
.pg-hero h1{font-weight:850;letter-spacing:-.05em;line-height:.9;font-size:clamp(46px,8vw,132px);margin:18px 0 28px;max-width:13em}
.pg-hero .lede{font-size:clamp(17px,1.5vw,23px)}
.pg-sec{padding-top:9vh;padding-bottom:9vh;border-top:1.5px solid var(--page-line)}
.pg-sec>h2{font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;margin:0 0 30px;opacity:.7}
.sector{display:grid;grid-template-columns:minmax(160px,1fr) 4fr;gap:3vw;padding:30px 0;border-top:1.5px solid var(--page-line)}
.sector:first-of-type{border-top:0;padding-top:0}
.sector h3{font:700 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.07em;margin:6px 0 0;opacity:.7}
.logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:28px 34px;align-items:center}
.logos li{height:52px;display:flex;align-items:center;justify-content:center}
.logos img{max-width:min(100%,150px);max-height:100%;object-fit:contain;filter:var(--page-logo);opacity:.88;transition:opacity .2s,transform .2s}
.logos li:hover img{opacity:1;transform:scale(1.06)}
.logos img.color{filter:none;opacity:1}
.ph{display:inline-block;font:700 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;border:1.5px dashed currentColor;border-radius:99px;padding:5px 9px;opacity:.7;margin-top:18px}
.stats{display:flex;flex-wrap:wrap;gap:12px 32px;margin:0 0 30px}
.stats p{margin:0}
.stats b{display:block;font-size:clamp(34px,3.6vw,56px);font-weight:850;letter-spacing:-.045em;line-height:1;color:var(--page-accent)}
.stats span{font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.07em;opacity:.65}
.kv{margin:0 0 22px}
.kv .k{display:block;font:700 10px var(--mono);text-transform:uppercase;letter-spacing:.08em;opacity:.55;margin-bottom:6px}
.kv p{margin:0;font-size:clamp(16px,1.3vw,20px);line-height:1.4}
.kv .q{font-size:clamp(20px,1.9vw,28px);line-height:1.2;font-weight:700;letter-spacing:-.025em}
.kv .tags{margin-top:0}
.cta-band{margin-top:4vh;padding:12vh 6vw;background:var(--band-bg);color:var(--band-fg);display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(34px,5.2vw,82px);letter-spacing:-.045em;line-height:.95;margin:0;font-weight:850;max-width:11em}
.btn{display:inline-block;background:var(--btn-bg);color:var(--btn-fg);font:800 16px/1 var(--sans);padding:18px 26px;border-radius:99px;text-decoration:none;transition:transform .2s}
.btn:hover{transform:translateY(-2px) rotate(-1.5deg)}
.cta-band .btn{background:var(--band-fg);color:var(--band-bg)}
.manifesto{font-size:clamp(30px,4.4vw,70px);font-weight:750;letter-spacing:-.035em;line-height:1.05;max-width:17em;margin:0}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:s}
.steps div{border:1.5px solid var(--page-line);border-radius:14px;padding:22px 18px 26px;min-height:200px;display:flex;flex-direction:column;justify-content:space-between}
.steps span{font:700 11px var(--mono);opacity:.6}
.steps b{font-size:clamp(24px,2.2vw,34px);letter-spacing:-.04em;display:block;line-height:1}
.steps p{margin:6px 0 0;font-size:16px;line-height:1.3}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw}
.svc h3{font-size:clamp(30px,3vw,46px);letter-spacing:-.045em;margin:0 0 10px;font-weight:850}
.svc p{margin:0 0 20px;font-size:18px;line-height:1.35}
.svc ul{list-style:none;padding:0;margin:0;font:600 13px/1 var(--mono)}
.svc li{padding:12px 0;border-top:1.5px solid var(--page-line)}
.ink-panel{background:var(--ink);color:var(--paper);border-radius:22px;padding:7vh 5vw;display:grid;grid-template-columns:1.4fr 1fr;gap:5vw;margin-bottom:8vh}
.ink-panel .ways{position:static;width:auto}
.ink-panel .ask{margin-top:0}
.ink-panel .ask-q{font-size:clamp(24px,2.8vw,42px)}
.foot{padding:5vh 6vw;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font:600 12px var(--mono);border-top:1.5px solid var(--page-line)}
.foot a{color:inherit;text-decoration:none;margin-left:16px}.foot a:first-child{margin-left:0}.foot a:hover{color:var(--page-accent)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (max-aspect-ratio:4/5),(max-width:760px){
  .ask-q{flex-wrap:wrap;gap:0}
  .ask-q span{width:100%}
  .ask-row input,.ask-row button{flex:1 1 100%}
}
@media (max-width:760px){
  .top{padding:14px 5vw}.top-cta{display:none}
  .pg-hero{padding-top:8vh;padding-bottom:6vh}
  .sector{grid-template-columns:1fr;gap:16px}
  .logos{grid-template-columns:repeat(3,1fr);gap:22px 20px}
  .logos li{height:44px}
  .ink-panel>*{min-width:0}
  .case,.svc,.ink-panel{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}.steps div{min-height:0;gap:18px}
  .ink-panel{padding:5vh 6vw}
}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.stats.sm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin-bottom:20px}
.stats.sm span{display:block;margin-top:4px;line-height:1.35}
.stats.sm b{font-size:clamp(24px,2.2vw,34px)}
/* storyline: the slide-by-slide case narrative */
.story{list-style:none;counter-reset:st;margin:6px 0 22px;padding:0}
.story li{counter-increment:st;position:relative;padding:0 0 16px 38px;border-left:1.5px solid var(--page-line);margin-left:11px}
.story li:last-child{border-left-color:transparent;padding-bottom:0}
.story li::before{content:counter(st,decimal-leading-zero);position:absolute;left:-12px;top:-2px;width:24px;height:24px;border-radius:50%;background:var(--page-accent);color:var(--page-bg);font:800 10px/24px var(--mono);text-align:center}
.story b{display:block;font-size:15px;margin-bottom:3px}
.story p{margin:0;font-size:15px;line-height:1.45;opacity:.85}
/* slide gallery inside a case (the original carousel, swipeable) */
.slides{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:4px 0 20px;padding-bottom:6px;scrollbar-width:thin}
.slides img{flex:0 0 82%;max-width:320px;aspect-ratio:4/5;object-fit:cover;border-radius:8px;scroll-snap-align:start;background:#000}

/* ── research method explainer (usability / A/B testing) ── */
.tag-btn{border:1.5px solid currentColor;border-radius:99px;padding:5px 10px;font:700 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;background:var(--yellow);color:var(--ink);border-color:var(--ink);cursor:pointer;pointer-events:auto}
.tag-btn:hover{background:var(--ink);color:var(--yellow)}
.svc-m{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:10px;width:100%;font:inherit}
.svc-m span{font-size:10px;opacity:.6;letter-spacing:.04em;text-transform:uppercase}
.svc-m:hover,.svc-m:focus-visible{color:var(--page-accent)}
.mdlg{width:min(680px,92vw);max-height:88vh;border:0;border-radius:18px;padding:34px 34px 30px;background:var(--page-bg,var(--ink));color:var(--page-fg,var(--paper));
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);font-family:var(--sans);overflow:auto}
.mdlg::backdrop{background:rgba(10,10,9,.6);backdrop-filter:blur(4px)}
.mdlg[open]{animation:mdlgIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes mdlgIn{from{opacity:0;transform:translateY(18px) scale(.98)}}
.mdlg h2{font-size:clamp(30px,4vw,46px);letter-spacing:-.045em;line-height:1;margin:8px 0 10px;font-weight:850}
.mdlg .mdlg-line{font-size:18px;line-height:1.4;margin:0 0 24px;opacity:.85}
.mdlg h3{font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;opacity:.6;margin:22px 0 12px}
.mdlg ul{margin:0;padding-left:18px;line-height:1.5;font-size:15px}
.mdlg-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mdlg-proj{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.mdlg-proj a{border:1.5px solid var(--page-line,rgba(255,255,255,.2));border-radius:10px;padding:8px 12px;color:inherit;text-decoration:none;font-weight:700;font-size:14px}
.mdlg-proj a span{display:block;font-weight:500;font-size:12px;opacity:.65}
.mdlg-proj a:hover{border-color:var(--page-accent,var(--yellow))}
.mdlg-empty{opacity:.7;margin:0 0 24px}
.mdlg-x{position:absolute;right:16px;top:12px;background:none;border:0;color:inherit;font-size:30px;line-height:1;cursor:pointer;opacity:.7}
.mdlg-x:hover{opacity:1}
@media (max-width:640px){.mdlg{padding:26px 22px}.mdlg-cols{grid-template-columns:1fr}}

/* ── usability test: a tiny product the visitor has to use ── */
.ut-stage{position:relative;margin:4px 0 10px}
.ut-mock{position:relative;background:#fbf8f1;color:#1d1c19;border-radius:14px;overflow:hidden;font-family:var(--sans);border:1.5px solid var(--page-line,rgba(255,255,255,.2));user-select:none}
.ut-nav{display:flex;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid #e6e0d2;font-size:13px}
.ut-nav b{font-size:16px;margin-right:auto;letter-spacing:-.03em}
.ut-nav span{cursor:pointer;color:#5a564d}
.ut-screen{padding:18px 16px 14px;min-height:270px;display:flex;flex-direction:column}
.ut-screen h4{font-size:26px;line-height:1;letter-spacing:-.04em;margin:4px 0 8px;font-weight:850}
.ut-screen p{font-size:13px;margin:0 0 14px;color:#5a564d}
.ut-ctas{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.ut-btn{background:#1d1c19;color:#fbf8f1;border-radius:99px;padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer}
.ut-link{font-size:13px;font-weight:700;cursor:pointer;color:#1d1c19}
.ut-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:auto}
.ut-tiles span{background:#efe8d8;border-radius:8px;padding:12px 8px;font-size:11.5px;font-weight:700;cursor:pointer}
.ut-foot{display:flex;gap:14px;font-size:10.5px;color:#8a8579;margin-top:18px;padding-top:10px;border-top:1px solid #e6e0d2}
.ut-foot span{cursor:pointer}
.ut-plan{display:flex;justify-content:space-between;align-items:center;border:1.5px solid #e2dccd;border-radius:10px;padding:14px;margin-top:8px;cursor:pointer;font-size:14px}
.ut-plan:hover{border-color:#1d1c19}
.ut-heat{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .6s}
.ut-heat.on{opacity:1}
.ut-cover{position:absolute;inset:0;display:grid;place-items:center;background:rgba(17,18,16,.55);backdrop-filter:blur(3px);border-radius:14px}
.ut-bar{display:flex;align-items:center;gap:16px;font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.05em;margin:0 0 6px}
.ut-clock{color:var(--page-accent,var(--yellow));font-size:16px}
.ut-give{margin-left:auto;background:none;border:0;color:inherit;opacity:.65;font:inherit;cursor:pointer;text-decoration:underline}
.ut-result{scroll-margin-top:20px}
.ut-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 14px}
.ut-stats b{display:block;font-size:clamp(26px,4vw,38px);font-weight:850;letter-spacing:-.045em;color:var(--page-accent,var(--yellow))}
.ut-stats span{font:700 10px var(--mono);text-transform:uppercase;letter-spacing:.06em;opacity:.65}
.ut-find,.ut-fix{font-size:16px;line-height:1.45;margin:0 0 12px}
.ut-fix{padding:12px 14px;border-left:3px solid var(--page-accent,var(--yellow));background:rgba(255,255,255,.04)}
.ut-legend{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font:600 11px var(--mono);opacity:.75;margin:0 0 12px}
.ut-legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.ut-legend i.a{background:#ff5a1f}.ut-legend i.b{background:#F4D85A}
.ut-again{background:none;border:1.5px solid currentColor;color:inherit;border-radius:99px;padding:8px 14px;font:700 11px var(--mono);text-transform:uppercase;cursor:pointer}
.ut-this{font:850 24px var(--sans)!important;text-transform:none!important;letter-spacing:-.03em!important;opacity:1!important;margin-top:30px!important}
.ut-screen[hidden]{display:none}

/* ═════════ Work page: typed project grid ═════════ */
.wk-hero{padding-bottom:4vh!important}
.wk-filter{position:sticky;top:62px;z-index:8;background:var(--page-bg);border-bottom:1.5px solid var(--page-line);padding:10px 0}
.wk-chips{display:flex;gap:8px;overflow-x:auto;padding:0 6vw;scrollbar-width:none}
.wk-chips::-webkit-scrollbar{display:none}
.wk-chip{flex:0 0 auto;border:1.5px solid var(--page-line);background:none;color:var(--page-fg);border-radius:99px;padding:9px 14px;font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;white-space:nowrap}
.wk-chip span{opacity:.5;margin-left:3px}
.wk-chip.on{background:var(--page-fg);color:var(--page-bg);border-color:var(--page-fg)}
.wk-list{padding-top:4vh;padding-bottom:4vh}
.wk-group{padding:5vh 0 6vh;border-top:1.5px solid var(--page-line);scroll-margin-top:130px}
.wk-group:first-child{border-top:0;padding-top:2vh}
.wk-ghead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:22px}
.wk-ghead h2{font-size:clamp(24px,2.6vw,38px);letter-spacing:-.04em;font-weight:850;margin:0}
.wk-ghead p{margin:0;opacity:.65;font-size:15px;flex:1 1 260px}
.wk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:32px 20px}
.pcard{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:4px;min-width:0}
.pcard:focus-visible{outline:2px solid var(--page-accent);outline-offset:4px;border-radius:12px}
.pc-cover{position:relative;display:block;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--ink-2,#1a1b18);margin-bottom:10px}
.pc-cover img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pc-cover.fit::before{content:"";position:absolute;inset:-20px;background:var(--img) center/cover;filter:blur(22px) brightness(.75) saturate(1.2);transform:scale(1.1)}
.pc-cover.fit img{object-fit:contain;padding:8%}
.pc-cover.logo{background:#fff}
.pc-cover.logo img{object-fit:contain;padding:22%}
.pcard:hover .pc-cover img{transform:scale(1.04)}
.pc-play{position:absolute;z-index:2;left:10px;bottom:10px;font:700 10px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;background:rgba(17,18,16,.75);color:#fff;padding:5px 8px;border-radius:99px}
.pc-client{font:700 10.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;opacity:.55}
.pc-title{font-size:clamp(16px,1.3vw,20px);font-weight:800;letter-spacing:-.025em;line-height:1.15}
.pc-stat{font-size:13px;opacity:.75}
.pc-stat b{color:var(--page-accent);font-weight:850;font-size:15px}
/* project detail */
.pdlg{width:min(760px,94vw)}
.pd-media{margin:-34px -34px 18px;max-height:56vh;overflow:hidden;background:#000;display:flex;justify-content:center}
.pd-media video,.pd-media img{max-width:100%;max-height:56vh;object-fit:contain;display:block}
.pdlg h2{font-size:clamp(28px,4vw,44px)}
.pdlg .kv p{font-size:16px}
.pd-quote{margin:18px 0;padding-left:14px;border-left:3px solid var(--page-accent);font-size:17px;line-height:1.45}
.pd-quote cite{display:block;margin-top:8px;font:700 11px var(--mono);font-style:normal;text-transform:uppercase;opacity:.65}
.pd-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:26px;padding-top:18px;border-top:1.5px solid var(--page-line)}
.pd-next{background:none;border:0;color:inherit;font:700 14px var(--sans);cursor:pointer;text-align:right;max-width:60%}
.pd-next:hover{color:var(--page-accent)}
@media (max-width:760px){
  .wk-filter{top:56px}
  .wk-chips{padding:0 5vw}
  .wk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .pc-title{font-size:15px}
  .pc-client{font-size:9.5px}
  .pc-stat{font-size:12px}
  .pd-media{margin:-26px -22px 16px}
  .pd-next{max-width:100%;text-align:left}
}

/* ═════════ Home: one scroll, one box ═════════ */
.hm-stage{position:relative}
.hm-stage.live{height:340vh}
.hm-sticky{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:4vw;align-items:center;padding:10vh 6vw}
.hm-stage.live .hm-sticky{position:sticky;top:0;height:100vh;height:100svh;padding-top:62px;padding-bottom:0;overflow:hidden}
.hm-copy{position:relative;z-index:3;will-change:transform,opacity}
.hm-copy h1{font-weight:850;letter-spacing:-.05em;line-height:.92;font-size:clamp(44px,6.2vw,100px);margin:18px 0 26px}
.hl{display:inline-block;animation:hl-in 1s cubic-bezier(.2,.7,.2,1) both}
.hl:nth-child(2){animation-delay:.12s}.hl:nth-child(3){animation-delay:.24s}
@keyframes hl-in{from{opacity:0;transform:translateY(40%)}}
.hm-copy s{text-decoration:none;position:relative}
.hm-copy s::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:.09em;background:var(--yellow);transform:scaleX(0);transform-origin:left;animation:strike .7s .9s cubic-bezier(.7,0,.3,1) forwards}
@keyframes strike{to{transform:scaleX(1)}}
.hm-copy em{display:inline-block;animation:pop .9s 1.35s cubic-bezier(.3,1.5,.5,1) both}
@keyframes pop{from{opacity:0;transform:translateY(.35em) scale(.6) rotate(-6deg)}}
.hm-copy .lede,.hm-ctas{animation:hl-in 1s .45s cubic-bezier(.2,.7,.2,1) both}
.hm-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:34px}
.ghost{color:var(--page-fg);font:700 16px var(--sans);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.ghost:hover{color:var(--page-accent)}
.hm-box{position:relative;z-index:1;align-self:end;margin-bottom:6vh;will-change:transform,opacity}
.hm-box svg{width:100%;max-width:440px;display:block;margin:0 auto;overflow:visible}
.hm-box svg *{stroke:#8a6234;stroke-width:1.5;stroke-linejoin:round}
.bx-in{fill:#2b1d10}.bx-side{fill:var(--kraft-d)}.bx-front{fill:var(--kraft)}.bx-fl{fill:var(--kraft-l)}.bx-fl.b{fill:var(--kraft)}
.bx-stamp{fill:#5a3d1a;stroke:none!important;font:700 11px var(--mono);letter-spacing:.12em}
.hm-hint{text-align:center;font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;opacity:.6;margin:14px 0 0;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}
.hm-reel{position:relative;display:block;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--ink-2,#1a1b18);color:#fff;text-decoration:none}
.hm-stage.live .hm-reel{position:absolute;inset:0;z-index:4;aspect-ratio:auto;border-radius:0;visibility:hidden}
.hm-obj{position:absolute;left:0;top:0;z-index:2;opacity:0;pointer-events:none;will-change:transform;filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
.hm-stage:not(.live) .hm-obj{display:none}
.hm-reel video{width:100%;height:100%;object-fit:cover;display:block}
.hm-cap{position:absolute;left:6vw;bottom:7vh;max-width:min(520px,88vw);font-size:clamp(15px,1.3vw,19px);line-height:1.35;background:rgba(17,18,16,.78);padding:16px 20px;border-radius:14px;backdrop-filter:blur(8px)}
.hm-stage.live .hm-cap{opacity:0}
.hm-cap b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.6em;color:var(--yellow);margin-bottom:4px}
.hm-cap i{display:block;font-style:normal;font-weight:700;margin-top:8px}
.hm-stage:not(.live) .hm-box{display:none}
.hm-stage:not(.live) .hm-cap{left:12px;right:12px;bottom:12px;padding:10px 12px;font-size:13px}
.hm-stage:not(.live) .hm-cap b{font-size:1.2em}
/* clients: one slow line of logos */
.hm-clients{padding:5vh 0;border-top:1.5px solid var(--page-line);border-bottom:1.5px solid var(--page-line)}
.marquee{overflow:hidden;margin-top:22px;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;width:max-content;list-style:none;margin:0;padding:0;gap:56px;align-items:center;animation:mq 90s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track li{flex:0 0 auto}
.mq-track img{height:30px;width:auto;max-width:120px;object-fit:contain;display:block;opacity:.85}
@keyframes mq{to{transform:translateX(calc(-50% - 28px))}}
.hm-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.more{color:var(--page-fg);font:700 14px var(--sans);text-decoration:none;opacity:.75}.more:hover{opacity:1;color:var(--page-accent)}
.hm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
a.pcard{color:inherit;text-decoration:none}
.pc-cover{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pc-vid{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}
.hm-note{text-align:center;padding-top:10vh;padding-bottom:10vh}
.hm-note blockquote{margin:16px auto 14px;max-width:18em;font-size:clamp(28px,3.6vw,54px);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.hm-ins{font-size:clamp(17px,1.5vw,22px);margin:0}
.hm-ins span{font-family:var(--serif);font-style:italic;font-size:1.2em;color:var(--page-accent);background:linear-gradient(var(--yellow),var(--yellow)) left bottom/0 2px no-repeat;transition:background-size 1s .9s cubic-bezier(.7,0,.3,1)}
.hm-note.in .hm-ins span{background-size:100% 2px}
/* words that rise into place */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w i{display:inline-block;font-style:inherit;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d)}
.split.in .w i,.in .split .w i{transform:none}
.split.reveal{opacity:1;transform:none}
.mag{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.progress{position:fixed;left:0;right:0;top:0;height:3px;background:var(--yellow);transform:scaleX(0);transform-origin:left;z-index:60;pointer-events:none}
/* moving between pages: the next page opens from the middle, like box flaps */
@view-transition{navigation:auto}
.top{view-transition-name:top}
::view-transition-old(root){animation:vt-out .45s cubic-bezier(.7,0,.3,1) both}
::view-transition-new(root){animation:vt-in .7s cubic-bezier(.7,0,.3,1) both}
@keyframes vt-out{to{transform:scale(.94);opacity:.3}}
@keyframes vt-in{from{clip-path:inset(50% 0 50% 0)}to{clip-path:inset(0)}}
@media (max-width:900px){
  .hm-sticky{grid-template-columns:1fr;gap:24px;padding-top:7vh}
  .hm-stage.live .hm-sticky{grid-template-rows:auto 1fr;align-content:start;padding-top:calc(56px + 4vh)}
  .hm-box{margin-bottom:3vh}.hm-box svg{max-width:330px}
  .hm-stage:not(.live) .hm-reel{max-width:420px;aspect-ratio:4/4.4}
  .hm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .hm-copy h1{font-size:clamp(40px,11vw,60px);margin:14px 0 18px}
  .hm-ctas{gap:18px;margin-top:24px}
  .mq-track{gap:40px}.mq-track img{height:24px}
}
@media (prefers-reduced-motion:reduce){
  .hl,.hm-copy em,.hm-copy .lede,.hm-ctas,.hm-hint,.mq-track{animation:none}
  .hm-copy s::after{animation:none;transform:none}
  .mq-track{flex-wrap:wrap;width:auto;justify-content:center}.mq-track li[aria-hidden]{display:none}
  .split .w i{transform:none;transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* home: what we do, in the same five types as the Work page */
.hm-proc{margin:0;max-width:26em;opacity:.7;font-size:16px}
.hm-do{margin-top:30px;border-top:1.5px solid var(--page-line)}
.do-row{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.5fr) auto;gap:8px 28px;align-items:baseline;padding:26px 0;border-bottom:1.5px solid var(--page-line);color:inherit;text-decoration:none;isolation:isolate}
.do-row::before{content:"";position:absolute;inset:0 -2vw;background:var(--yellow);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.7,0,.3,1);z-index:-1;border-radius:6px}
.do-row:hover::before,.do-row:focus-visible::before{transform:scaleY(1)}
.do-row:hover,.do-row:focus-visible{color:var(--ink)}
.do-row:focus-visible{outline:none}
.do-n{font-size:13px;opacity:.5}
.do-row h3{margin:0;font-size:clamp(22px,2.2vw,32px);line-height:1.05}
.do-txt{display:flex;flex-direction:column;gap:6px;font-size:16px;line-height:1.4}
.do-txt i{font-style:normal;font-size:13.5px;opacity:.6}
.do-go{font-size:14px;font-weight:500;white-space:nowrap;transition:transform .3s}
.do-row:hover .do-go{transform:translateX(6px)}
.do-try{margin:26px 0 0;font-size:15px;opacity:.85}
.do-try .ghost{background:none;border:0;padding:0;cursor:pointer;font-size:15px}
@media (max-width:760px){
  .do-row{grid-template-columns:34px 1fr;gap:6px 10px;padding:20px 0}
  .do-txt,.do-go{grid-column:2}
  .do-row::before{inset:0 -5vw;border-radius:0}
}

/* ═════════ Exploration: creation tools ═════════ */
.tools{display:grid;gap:22px;margin-top:10px}
.tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);border:1.5px solid var(--page-line);border-radius:20px;overflow:hidden;color:inherit;text-decoration:none;background:var(--ink-2)}
.tool-art{position:relative;min-height:380px;display:grid;place-items:center;background:radial-gradient(circle at 50% 75%,rgba(217,249,107,.18),transparent 55%),#0a0a0a;perspective:900px;overflow:hidden}
.ms-pad{width:58%;max-width:280px;aspect-ratio:1;display:grid;place-items:center;border-radius:16px;background:linear-gradient(145deg,#d9d9d4,#a9a9a3);box-shadow:inset 0 0 0 6px rgba(255,255,255,.35),0 40px 60px rgba(0,0,0,.6);transform:rotateX(52deg) rotateZ(-38deg);transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.ms-pad b{font:800 clamp(20px,2.4vw,34px)/.9 var(--sans);letter-spacing:-.04em;color:#151515;text-align:center;transform:rotate(-8deg)}
.ms-mark{position:absolute;right:16%;top:18%;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ink);font-size:26px;transform:scale(0) rotate(-30deg);transition:transform .4s .15s cubic-bezier(.3,1.6,.5,1)}
.tool:hover .ms-pad,.tool:focus-visible .ms-pad{transform:rotateX(52deg) rotateZ(-38deg) translateZ(-26px) scale(.96)}
.tool:hover .ms-mark,.tool:focus-visible .ms-mark{transform:scale(1) rotate(0)}
.tool-body{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,4vw,48px)}
.tool-name{font-size:clamp(34px,4vw,58px);font-weight:400;letter-spacing:-.06em;line-height:.95}
.tool-line{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.8vw,26px);color:var(--page-accent)}
.tool-text{font-size:16px;line-height:1.5;opacity:.85;max-width:32em}
.tool-text a{color:var(--page-accent)}
.tool .tags{display:flex;flex-wrap:wrap;gap:6px}
.tool .btn{align-self:flex-start;margin-top:8px}
.tool-proof{margin:-6px 4px 0;font-size:14px;opacity:.75}
.tool-proof a{color:var(--page-accent)}
.tool-soon{display:flex;flex-direction:column;gap:10px;padding:clamp(24px,4vw,40px);border-style:dashed;background:none}
.tool-soon .tool-name{font-size:clamp(24px,2.6vw,36px)}
@media (max-width:820px){.tool{grid-template-columns:1fr}.tool-art{min-height:280px}}

/* ═════════ mobile menu ═════════ */
.top-menu{display:none}
@media (max-width:760px){
  .top-logo,.top-menu{position:relative;z-index:2}
  .top-menu{display:block;background:none;color:var(--page-fg);border:1.5px solid var(--page-fg);border-radius:99px;padding:9px 16px;font:700 11px/1 var(--sans);text-transform:uppercase;cursor:pointer}
  .nav-open .top-menu{background:var(--page-fg);color:var(--page-bg)}
  .top-nav{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;padding:96px 6vw 6vh;background:var(--page-bg);visibility:hidden;opacity:0;transition:opacity .3s,visibility 0s .3s}
  .nav-open .top-nav{visibility:visible;opacity:1;transition:opacity .3s}
  .top .top-nav a{border:0;border-bottom:1.5px solid var(--page-line);border-radius:0;padding:18px 0;font:400 clamp(36px,11vw,52px)/1 var(--sans)!important;letter-spacing:-.06em!important;text-transform:none;background:none!important;color:var(--page-fg)!important;opacity:0;transform:translateY(16px);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
  .nav-open .top .top-nav a{opacity:1;transform:none;transition-delay:calc(var(--i)*60ms + 80ms)}
  .top .top-nav a[aria-current=page]{color:var(--yellow)!important;font-family:var(--serif)!important;font-style:italic;letter-spacing:-.02em!important}
  body.nav-open{overflow:hidden}
}
.mdlg-x.back{font-size:22px}

/* Work: second filter row */
.wk-more{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 6vw 0}
.wk-sel{position:relative;display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--page-line);border-radius:99px;padding:0 30px 0 14px;height:36px;font-size:13px;cursor:pointer}
.wk-sel::after{content:"▾";position:absolute;right:12px;pointer-events:none;font-size:11px;opacity:.7}
.wk-sel span{font-weight:700;font-size:11px;text-transform:uppercase;opacity:.6}
.wk-sel select{appearance:none;-webkit-appearance:none;background:none;border:0;color:inherit;font:inherit;padding:0;cursor:pointer;max-width:46vw;text-overflow:ellipsis}
.wk-sel select option{color:#111;background:#fff}
.wk-sel.on{border-color:var(--yellow);background:var(--yellow);color:var(--ink)}
.wk-sel.on span{opacity:.75}
.wk-count{font-size:13px;opacity:.6;margin-left:auto}
.wk-clear{background:none;border:0;color:var(--page-accent);font:600 13px var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.wk-chip:disabled{opacity:.3;cursor:default}
.pcard[hidden],.wk-group[hidden]{display:none!important}
.wk-empty{padding:8vh 0;font-size:18px;text-align:center}
.wk-empty .ghost{background:none;border:0;cursor:pointer;font-size:18px;padding:0}
.wk-empty a{color:var(--page-accent)}
@media (max-width:760px){
  .wk-more{padding:8px 5vw 0;gap:6px 8px}
  .wk-sel{flex:1 1 40%;min-width:0;height:34px;padding:0 24px 0 12px;font-size:12.5px}
  .wk-sel span{display:none}
  .wk-sel select{max-width:none;flex:1;min-width:0;white-space:nowrap;overflow:hidden}
  .wk-count{margin-left:0;flex:1 1 auto;order:3;font-size:12px;line-height:1}
  .wk-clear{order:4;font-size:12px}
  .wk-group{scroll-margin-top:170px}
}

/* filter bar, tidied: one height, one rhythm, a hint that the type row scrolls */
.wk-filter{padding:12px 0;display:flex;flex-direction:column;gap:8px}
.wk-chips{padding:0 6vw;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.wk-chips::after{content:"";flex:0 0 24px}
.wk-chip{height:38px;display:inline-flex;align-items:center;padding:0 16px}
.wk-more{padding:0 6vw;gap:8px;align-items:center}
.wk-sel{height:38px;padding:0 34px 0 16px;font-size:13px;font-weight:500}
.wk-sel::after{right:14px}
.wk-status{display:inline-flex;align-items:center;gap:14px;margin-left:auto;font-size:13px}
.wk-status[hidden]{display:none}
.wk-status .wk-count{margin:0;opacity:.6}
@media (max-width:760px){
  .wk-filter{padding:10px 0;gap:8px}
  .wk-chips,.wk-more{padding:0 5vw}
  .wk-chip,.wk-sel{height:36px}
  .wk-sel{flex:1 1 0;padding:0 28px 0 14px}
  .wk-sel::after{right:12px}
  .wk-status{flex:1 1 100%;order:3;margin:2px 0 0;justify-content:space-between;font-size:12px}
}

/* ═════════ motion borrowed in spirit from getlayers.ai: Lumora, Northwall, Codescan, Artefakt ═════════ */
/* readout: words light up as they cross the screen */
.readout .rw{opacity:.2;transition:opacity .35s}
.readout .rw.on{opacity:1}
.readout em .rw{opacity:.35}.readout em .rw.on{opacity:1}
/* rack focus: the card under the cursor stays sharp, the rest drift out of focus */
@media (hover:hover) and (pointer:fine){
  .wk-grid .pcard{transition:filter .45s,opacity .45s}
  .wk-grid:has(.pcard:hover) .pcard:not(:hover){filter:blur(3px) saturate(.5);opacity:.5}
}
/* hero lattice */
.pg-hero{position:relative;isolation:isolate}
.lattice{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;-webkit-mask:linear-gradient(180deg,#000 60%,transparent);mask:linear-gradient(180deg,#000 60%,transparent)}
/* preloader */
html.preload .hl,html.preload .hm-copy em,html.preload .hm-copy .lede,html.preload .hm-ctas,html.preload .hm-copy s::after{animation-play-state:paused}
html.preload body{overflow:hidden}
.pl{position:fixed;inset:0;z-index:100;pointer-events:none}
.pl-a,.pl-b{position:absolute;left:0;right:0;height:50.5%;background:var(--ink);transition:transform .9s cubic-bezier(.75,0,.2,1)}
.pl-a{top:0}.pl-b{bottom:0}
.pl.open .pl-a{transform:translateY(-100%)}.pl.open .pl-b{transform:translateY(100%)}
.pl-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .3s}
.pl.open .pl-in{opacity:0}
/* the torch hunt */
.pl-look{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}
.pl-look.open{pointer-events:none}
.pl-look .pl-in{display:block}
.lk-hidden{position:absolute;inset:0;pointer-events:none}
.lk-hidden span{position:absolute;font-family:var(--serif);font-style:italic;color:rgba(246,246,244,.5);font-size:clamp(18px,3.2vw,30px);white-space:nowrap;transform:translate(-50%,-50%)}
.lk-clue{position:absolute;width:clamp(64px,10vw,110px);transform:translate(-50%,-50%) rotate(var(--r));transition:filter .4s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.lk-clue.found{z-index:2;filter:drop-shadow(0 0 18px rgba(255,222,89,.9));transform:translate(-50%,-50%) rotate(0deg) scale(1.12)}
.lk-ring{position:absolute;z-index:2;width:86px;height:86px;margin:-43px 0 0 -43px;border-radius:50%;border:2px solid var(--yellow);opacity:0;pointer-events:none}
.lk-ring.on{animation:lk-ring .7s ease-out forwards}
@keyframes lk-ring{0%{opacity:1;transform:scale(.6)}100%{opacity:0;transform:scale(1.8)}}
.lk-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle var(--rad,150px) at var(--x,50%) var(--y,40%),rgba(255,222,89,.14) 0,rgba(255,222,89,.05) 50%,rgba(13,13,13,0) 68%,rgba(13,13,13,.93) 90%,var(--ink) 100%)}
.lk-aim{position:absolute;z-index:3;left:0;top:0;width:var(--d,0px);height:var(--d,0px);border-radius:50%;border:2px solid var(--yellow);pointer-events:none;transform:translate(-50%,-50%);transition:opacity .2s}
.lk-load{position:absolute;z-index:5;left:0;right:0;top:0;height:3px;background:rgba(246,246,244,.1);overflow:hidden}
.lk-load b{position:absolute;inset:0;background:var(--yellow);transform-origin:left;transform:scaleX(var(--p,0))}
.lk-top{position:absolute;z-index:5;left:6vw;right:6vw;top:22px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
.lk-top span{font:700 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:rgba(246,246,244,.6);margin-top:10px}
.lk-n{font:400 clamp(44px,9vw,84px)/.9 var(--sans);letter-spacing:-.06em;color:var(--paper);font-variant-numeric:tabular-nums}
.lk-bottom{position:absolute;z-index:5;left:0;right:0;bottom:12vh;display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none;text-align:center}
.lk-hunt{margin:0;font:700 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:rgba(246,246,244,.55)}
.lk-words{margin:0;display:flex;gap:12px;font-size:clamp(28px,6vw,46px);letter-spacing:-.06em;line-height:1}
.lk-words i{font-style:normal;min-width:1.6em;color:rgba(246,246,244,.18);border-bottom:1.5px solid rgba(246,246,244,.18);padding-bottom:4px;transition:color .4s,border-color .4s}
.lk-words i.on{color:var(--paper);border-color:transparent}
.lk-words i.on:last-child{font-family:var(--serif);font-style:italic;color:var(--yellow);letter-spacing:-.02em}
.lk-closed{margin:0;font-family:var(--serif);font-style:italic;color:var(--yellow);font-size:22px;opacity:0;transition:opacity .3s}
.pl-look.solved .lk-closed{opacity:1}
.lk-skip{position:absolute;z-index:6;right:6vw;bottom:calc(5vh + env(safe-area-inset-bottom));background:none;border:0;color:rgba(246,246,244,.6);font:700 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;cursor:pointer;padding:10px}
.lk-skip:hover{color:var(--yellow)}

/* ═════════ home motion, round 2 ═════════ */
.pc-vid{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}
/* clients: running line + logos in colour on hover */
.mq-track.js{animation:none;will-change:transform}
.mq-track li{position:relative;padding:8px 14px;border-radius:10px;transition:background .25s}
.mq-color{position:absolute;left:14px;top:8px;width:calc(100% - 28px)!important;height:calc(100% - 16px)!important;max-width:none!important;object-fit:contain;opacity:0;transition:opacity .25s}
.mq-track li:hover{background:#fff}
.mq-track li:hover>img:first-child{opacity:0}
.mq-track li:hover .mq-color{opacity:1}
/* numbers */
.hm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:5vh}
.st{margin:0;display:flex;flex-direction:column;gap:6px;border-top:1.5px solid var(--page-line);padding-top:14px}
.st b{font-size:clamp(40px,5vw,76px);font-weight:400;letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums}
.st span{font-size:14px;opacity:.65}
/* what we do */
.do-peek{position:fixed;left:0;top:0;width:220px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;z-index:50;pointer-events:none;opacity:0;scale:.6;transition:opacity .25s,scale .4s cubic-bezier(.3,1.4,.5,1);box-shadow:0 24px 50px rgba(0,0,0,.5);background:var(--ink-2)}
.do-peek.on{opacity:1;scale:1}
.do-peek video,.do-peek img{width:100%;height:100%;object-fit:cover;display:block}
.do-row.focus::before{transform:scaleY(1)}
.do-row.focus{color:var(--ink)}
.do-row.focus .do-go{transform:translateX(6px)}
/* field note cable */
.cable{display:block;width:120px;height:90px;margin:4px auto 10px;overflow:visible}
.cable path{fill:none;stroke:var(--yellow);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw,1))}
.cable rect{fill:var(--yellow);opacity:0;transform-origin:80px 110px;transform:scale(.4);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.cable.plugged rect{opacity:1;transform:none}
/* the band lights up */
.cta-band{background:color-mix(in srgb,var(--band-bg) calc(var(--lit,1)*100%),var(--page-bg));color:color-mix(in srgb,var(--band-fg) calc(var(--lit,1)*100%),var(--page-fg))}
.cta-band .btn{background:color-mix(in srgb,var(--band-fg) calc(var(--lit,1)*100%),var(--yellow));color:color-mix(in srgb,var(--band-bg) calc(var(--lit,1)*100%),var(--ink))}
@media (max-width:760px){
  .hm-stats{grid-template-columns:1fr 1fr;gap:18px 14px}
  .hm-stage.live{height:240vh}
}
@media (prefers-reduced-motion:reduce){ .hm-stats b{transition:none} }
.pcard .pc-client,.pcard .pc-title,.pcard .pc-stat{transition:opacity .5s}
.pcard.stacked .pc-client,.pcard.stacked .pc-title,.pcard.stacked .pc-stat,.pcard.stacked .pc-play{opacity:0}
.bx-fl.in{fill:#c49a62}
.pd-full{color:var(--page-fg);font:600 14px var(--sans);text-decoration:underline;text-underline-offset:4px}
.pd-full:hover{color:var(--page-accent)}

/* ═════════ project pages (/work/<id>/) ═════════ */
.cs{padding-top:7vh;padding-bottom:4vh;max-width:1100px}
.cs-crumbs{display:flex;gap:8px;font-size:13px;opacity:.6;margin-bottom:28px}
.cs-crumbs a{color:inherit}
.cs h1{font-size:clamp(38px,5.6vw,84px);margin:12px 0 18px;max-width:14em}
.cs .lede{max-width:34em;font-size:clamp(17px,1.5vw,22px)}
.cs-stats{margin:30px 0 0}
.cs-stats p{margin:0;display:flex;flex-direction:column;gap:4px}
.cs-stats b{font-size:clamp(34px,4vw,58px);font-weight:400;letter-spacing:-.06em;color:var(--page-accent)}
.cs-stats span{font-size:14px;opacity:.65}
.cs-media{margin:34px 0;border-radius:16px;overflow:hidden;background:#000;display:flex;justify-content:center;max-height:80vh}
.cs-media video,.cs-media img{max-width:100%;max-height:80vh;display:block;object-fit:contain}
.cs-body{max-width:760px}
.cs .kv h2.k{font:700 11px var(--sans)!important;letter-spacing:.06em!important;text-transform:uppercase;line-height:1.2;margin:0 0 8px}
.cs-slides img{flex-basis:70%;max-width:420px}
.case-body .pcard{opacity:1;transform:none}
.pg-hero h1.manifesto{font-size:clamp(30px,4.4vw,70px);max-width:17em;margin:0}