/* Built on Intent, Studio Wall v3. Shared design system.
   Wall grey, paper, ink, one vermilion. Satoshi + IBM Plex Mono.
   Shape rule: things you press are pills, things pinned to the wall are square. */

@view-transition { navigation: auto; }

@font-face{font-family:"Satoshi Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica");size-adjust:97%;ascent-override:100%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Plex Fallback";src:local("Courier New"),local("Menlo");size-adjust:100%;ascent-override:102%;descent-override:27%}

:root{
  --wall:#ECEDEF; --paper:#F8F8F6; --ink:#121315; --muted:#696C72; --dash:#A7AAB0; --accent:#E5482C;
  --bar:#D9DBDF; --idle:#D6D8DC; --ink-2:#2D2F33; --wall-2:#E3E4E7;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-pin:cubic-bezier(.34,1.56,.64,1); --ease-io:cubic-bezier(.87,0,.13,1);
  --pad:clamp(16px,2.6vw,44px);
  --f:"Satoshi","Satoshi Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fm:"IBM Plex Mono","Plex Fallback",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --lift:0 1px 0 rgba(18,19,21,.04),0 22px 40px -24px rgba(44,46,52,.42);
  --lift-hi:0 2px 0 rgba(18,19,21,.04),0 38px 60px -30px rgba(44,46,52,.5);
  --t-hero:clamp(44px,min(6.2vw,10.6vh),118px);
  --t-d1:clamp(52px,8.4vw,150px);
  --t-d2:clamp(38px,4.8vw,84px);
  --t-d3:clamp(28px,2.7vw,44px);
  --t-lead:clamp(19px,1.45vw,23px);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--wall);-webkit-text-size-adjust:100%;overflow-x:clip;scrollbar-gutter:stable}
body{margin:0;background:var(--wall);color:var(--ink);font:400 17px/1.55 var(--f);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility;font-kerning:normal}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p,h1,h2,h3,h4,figure,blockquote,dl,dd{margin:0}
h1,h2,h3,h4{font-weight:500}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
em{font-style:italic;font-weight:400}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
::selection{background:var(--accent);color:var(--ink)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:300;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:500}
.skip:focus{top:16px}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- type ---------- */
.d-hero,.d1,.d2,.d3{font-family:var(--f);font-weight:500;letter-spacing:-.04em;line-height:.98}
.d-hero{font-size:var(--t-hero)}
.d1{font-size:var(--t-d1);letter-spacing:-.045em;line-height:.94}
.d2{font-size:var(--t-d2)}
.d3{font-size:var(--t-d3);letter-spacing:-.03em;line-height:1.05}
.lead{font-size:var(--t-lead);line-height:1.42;letter-spacing:-.012em;max-width:40ch}
.body{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:56ch}
.muted{color:var(--muted)}
.ann{font:400 11.5px/1.4 var(--fm);color:var(--muted);letter-spacing:0}
.ph-label{font:400 11px/1.35 var(--fm);color:var(--muted)}
/* line masks */
.ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.ln>span{display:block;will-change:transform}
.d-hero .ln,.d1 .ln,.d2 .ln{padding-bottom:.16em;margin-bottom:-.16em}

/* ---------- links ---------- */
.roll{display:inline-flex;overflow:hidden;vertical-align:top;text-decoration:none;line-height:1.25}
.roll-t{display:block;position:relative;transition:transform .6s var(--ease-out)}
.roll-t::after{content:attr(data-text);position:absolute;left:0;top:100%;white-space:nowrap}
.roll:hover .roll-t,.roll:focus-visible .roll-t{transform:translateY(-100%)}
.u{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;position:relative}
.u::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:100% 50%;transition:transform .6s var(--ease-out)}
.u:hover::after,.u:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}

/* ---------- buttons: vermilion pill, ink fill enters from the cursor's side ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 28px;border-radius:999px;background:var(--accent);color:var(--ink);font:500 16.5px/1 var(--f);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;overflow:hidden;isolation:isolate;border:0;cursor:pointer;transition:color .35s var(--ease-out)}
.btn>*{position:relative;z-index:1}
.btn .btn-fill{position:absolute;z-index:0;left:0;top:0;width:var(--fs,320px);height:var(--fs,320px);margin:calc(var(--fs,320px) / -2) 0 0 calc(var(--fs,320px) / -2);border-radius:50%;background:var(--ink);transform:scale(0);pointer-events:none}
.btn.is-filled{color:var(--paper)}
.btn:active{transform:scale(.98)}
.btn svg{width:12px;height:auto;flex:none}
.btn-ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--ink)}
.btn-ghost .btn-fill{background:var(--ink)}
.static .btn:hover,.no-fill .btn:hover{background:var(--ink);color:var(--paper)}
.cta-box{display:inline-flex;padding:9px;border:1px dashed var(--dash)}

/* ---------- crop-marked frame: the physical unit of the wall ---------- */
.crop{position:relative;padding:10px;border:1px dashed var(--dash);--tick:var(--ink)}
.crop::before{content:"";position:absolute;inset:-7px;pointer-events:none;
  background:
    linear-gradient(var(--tick),var(--tick)) 0 0/10px 1px no-repeat,
    linear-gradient(var(--tick),var(--tick)) 0 0/1px 10px no-repeat,
    linear-gradient(var(--tick),var(--tick)) 100% 0/10px 1px no-repeat,
    linear-gradient(var(--tick),var(--tick)) 100% 0/1px 10px no-repeat,
    linear-gradient(var(--tick),var(--tick)) 0 100%/10px 1px no-repeat,
    linear-gradient(var(--tick),var(--tick)) 0 100%/1px 10px no-repeat,
    linear-gradient(var(--tick),var(--tick)) 100% 100%/10px 1px no-repeat,
    linear-gradient(var(--tick),var(--tick)) 100% 100%/1px 10px no-repeat}
.crop .media{position:relative;overflow:hidden;background:var(--wall-2)}
.crop img{width:100%;aspect-ratio:var(--ar,16/10);object-fit:cover;object-position:var(--op,50% 0%)}
.crop.phone{--ar:390/844}
.crop.phone .media{border-radius:0}
.media{position:relative;overflow:hidden;display:block}
.media img{will-change:transform}
.gr img{filter:grayscale(1) contrast(1.02)}

/* tags and chips */
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags li{font:400 12px/1 var(--fm);padding:7px 9px;background:var(--paper);color:var(--ink)}
.on-paper .tags li,.tags.on-wall li{background:var(--wall)}

/* paper note with tape */
.note{position:relative;background:var(--paper);padding:clamp(18px,1.8vw,26px);box-shadow:var(--lift);rotate:var(--r,0deg);transition:rotate .9s var(--ease-pin),translate .9s var(--ease-pin),box-shadow .6s var(--ease-out)}
.note::before{content:"";position:absolute;top:-12px;left:50%;width:96px;height:25px;translate:-50% 0;rotate:var(--tr,-3deg);background:rgba(167,170,176,.42);clip-path:polygon(0 10%,3% 0,7% 9%,93% 4%,97% 0,100% 12%,98% 90%,100% 100%,4% 96%,0 100%,2% 52%)}
.note.is-hoverable:hover{rotate:0deg;translate:0 -6px;box-shadow:var(--lift-hi)}
.note p{font-size:15.5px;line-height:1.5;color:var(--ink-2)}

/* stair glyph ornament: short bars on the mark's 30 degree angle */
.stair{display:block;width:var(--sw,120px);height:auto;overflow:visible}
.stair rect{fill:var(--bar);transform-box:fill-box}
.stair rect.a{fill:var(--accent)}

/* striped display words (built by site.js; CSS stripes are the no-JS fallback) */
.sw{position:relative;line-height:0;margin:0;font-weight:700}
.sw-text{display:block;font:700 var(--sw-size,clamp(96px,17vw,280px))/.82 var(--f);letter-spacing:-.05em;color:transparent;background:repeating-linear-gradient(to bottom,var(--accent) 0 .045em,transparent .045em .07em);-webkit-background-clip:text;background-clip:text;padding:.02em 0}
.motion:not(.js-fallback) .sw:not(.built) .sw-text{opacity:0}
.sw.built .sw-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0}
.sw-svg{display:block;width:100%;height:auto;overflow:visible}
.sw-idle{fill:var(--idle)} .sw-acc{fill:var(--accent)}
.sw-reveal{position:absolute;left:0;top:0;width:100%;display:block;overflow:hidden;will-change:transform}
.sw-reveal-in{display:block;will-change:transform}
.sw-reveal .sw-svg{width:100%;height:auto}

/* motion gates: hidden only when motion is on and JS is alive */
.motion:not(.js-fallback) [data-pin]{opacity:0}
.motion:not(.js-fallback) [data-reveal]{clip-path:inset(0 0 100% 0)}
.motion:not(.js-fallback) [data-lines] .ln>span{transform:translateY(112%)}
.motion:not(.js-fallback) [data-fade]{opacity:0}
.motion:not(.js-fallback) .film span{opacity:0}
.static .film span{opacity:1!important}
.static [data-pin],.static [data-fade]{opacity:1!important}
.static [data-reveal]{clip-path:none!important}
.static [data-lines] .ln>span{transform:none!important}

/* ---------- top bar ---------- */
.top{position:absolute;z-index:20;left:0;right:0;top:0;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad)}
.brand{display:block;width:124px;color:var(--ink);text-decoration:none}
.brand svg{display:block;width:100%;height:auto}
.top-nav ul{display:flex;gap:clamp(18px,2.2vw,34px)}
.top-nav a{font:500 15px/1.25 var(--f);letter-spacing:-.01em;display:inline-flex;align-items:center}
.top-nav a[aria-current="page"]::before{content:"<";color:var(--muted);margin-right:1px}
.top-nav a[aria-current="page"]::after{content:">";color:var(--muted);margin-left:1px}

/* ---------- dock ---------- */
.dock{position:fixed;z-index:60;left:50%;bottom:16px;translate:-50% 0;display:flex;align-items:center;gap:4px;padding:5px;background:rgba(248,248,246,.94);border-radius:999px;box-shadow:0 14px 34px -16px rgba(18,19,21,.45),0 0 0 1px rgba(18,19,21,.07);-webkit-backdrop-filter:saturate(1.2);transition:translate .6s var(--ease-out)}
.dock-btn{height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--wall);color:var(--ink);font:500 15px/1 var(--f);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .45s var(--ease-out)}
.dock-btn:hover{background:#E1E2E5}
.dock-plus{position:relative;width:11px;height:11px;transition:rotate .6s var(--ease-pin)}
.dock-plus::before,.dock-plus::after{content:"";position:absolute;left:0;right:0;top:5px;height:1.5px;background:currentColor}
.dock-plus::after{rotate:90deg}
[aria-expanded="true"] .dock-plus{rotate:135deg}
.dock-bi{background:transparent;padding:0 12px;font:500 18px/1 var(--f);letter-spacing:-.03em}
.dock-bi:hover{background:transparent}
.bi-b{color:var(--muted);transition:color .3s,translate .45s var(--ease-pin);display:inline-block}
.dock-bi:hover .bi-b:first-child{translate:-3px 0;color:var(--accent)}
.dock-bi:hover .bi-b:last-child{translate:3px 0;color:var(--accent)}
.dock .btn{height:44px;padding:0 20px;font-size:15px}
.dock-clock{font:400 12.5px/1 var(--fm);color:var(--muted);padding:0 14px 0 8px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- menu: a paper sheet pinned above the dock ---------- */
.menu{position:fixed;z-index:59;left:50%;bottom:84px;translate:-50% 0;width:min(100vw - 24px,780px);visibility:hidden;pointer-events:none}
.menu.open{visibility:visible;pointer-events:auto}
.menu-sheet{position:relative;background:var(--paper);box-shadow:var(--lift-hi),0 0 0 1px rgba(18,19,21,.05);padding:28px 30px 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:28px;transform-origin:50% 100%}
.menu-sheet .mc{position:absolute;width:12px;height:12px;border:0 solid var(--ink)}
.mc.tl{left:-7px;top:-7px;border-left-width:1px;border-top-width:1px}
.mc.tr{right:-7px;top:-7px;border-right-width:1px;border-top-width:1px}
.mc.bl{left:-7px;bottom:-7px;border-left-width:1px;border-bottom-width:1px}
.mc.br{right:-7px;bottom:-7px;border-right-width:1px;border-bottom-width:1px}
.menu-links li{overflow:hidden}
.menu-links a{display:flex;align-items:baseline;gap:12px;font:500 clamp(34px,4vw,50px)/1.1 var(--f);letter-spacing:-.045em;text-decoration:none;padding:2px 0}
.menu-links a .roll-t{transition:transform .6s var(--ease-out)}
.menu-links a:hover .roll-t,.menu-links a:focus-visible .roll-t{transform:translateY(-100%)}
.menu-links a[aria-current="page"]{color:var(--muted)}
.menu-links a[aria-current="page"]::after{content:"you are here";font:400 11px/1 var(--fm);color:var(--accent);letter-spacing:0}
.menu-cases{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:15px}
.menu-cases span{width:100%;}
.menu-peek{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.menu-peek .crop{background:var(--wall)}
.menu-peek img{transition:opacity .35s var(--ease-out)}
.menu-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- pin-up page transition ---------- */
.pinup{position:fixed;inset:0;z-index:200;pointer-events:none;visibility:hidden}
.pin-arrive .pinup{visibility:visible;animation:pin-failsafe 0s 3.2s forwards}
@keyframes pin-failsafe{to{visibility:hidden}}
.pinup-sheet{position:absolute;inset:0;background:var(--paper);will-change:transform}
.pinup-c{position:absolute;width:26px;height:26px;border:0 solid var(--ink)}
.pinup-c.tl{left:28px;top:28px;border-left-width:1px;border-top-width:1px;transform-origin:0 0}
.pinup-c.tr{right:28px;top:28px;border-right-width:1px;border-top-width:1px;transform-origin:100% 0}
.pinup-c.bl{left:28px;bottom:28px;border-left-width:1px;border-bottom-width:1px;transform-origin:0 100%}
.pinup-c.br{right:28px;bottom:28px;border-right-width:1px;border-bottom-width:1px;transform-origin:100% 100%}
.pinup-name{position:absolute;left:clamp(28px,5vw,80px);bottom:clamp(40px,8vh,90px);overflow:hidden;padding-bottom:.12em}
.pinup-name span{display:block;font:500 clamp(56px,9vw,160px)/.95 var(--f);letter-spacing:-.045em}
.pinup-ann{position:absolute;left:clamp(28px,5vw,80px);top:clamp(40px,7vh,80px)}
.pinup .stair{position:absolute;right:clamp(36px,6vw,96px);bottom:clamp(48px,9vh,100px);--sw:clamp(90px,9vw,150px)}

/* ---------- contextual cursor label (the system cursor stays) ---------- */
.cl{position:fixed;left:0;top:0;z-index:150;pointer-events:none;padding:8px 12px;border-radius:999px;background:var(--ink);color:var(--paper);font:400 12px/1 var(--fm);white-space:nowrap;transform:scale(0);opacity:0}

/* ---------- section scaffolding ---------- */
.sec{padding:clamp(96px,11vw,190px) var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.page-head{padding:clamp(130px,15vw,210px) var(--pad) clamp(56px,7vw,110px)}

/* =========================================================
   HOME
   ========================================================= */
.hero{position:relative;height:100vh;height:100svh;min-height:700px;max-height:1100px;overflow:hidden;isolation:isolate}
.hero-copy{position:absolute;left:var(--pad);top:40.5%;z-index:3;width:min(64vw,1100px)}
.hero h1{max-width:12.5em}
.hero-sub{margin-top:clamp(18px,2.4vh,28px);max-width:38ch;font-size:clamp(16.5px,1.25vw,19px);line-height:1.5;color:var(--ink-2)}
.hero-cta{margin-top:clamp(20px,3vh,32px);display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero-cta .roll{font-weight:500}
.wall-pins{position:absolute;inset:0;z-index:2}
.pin{position:absolute;left:var(--x);top:var(--y);width:var(--w);rotate:var(--r,0deg);user-select:none;-webkit-user-select:none;touch-action:auto}
.pin .crop{background:transparent;transition:background-color .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.pin.lift .crop{background:var(--paper);box-shadow:var(--lift-hi)}
.pin img{pointer-events:none;-webkit-user-drag:none}
.pin .ann{position:absolute;left:0;right:-30px;top:calc(100% + 8px)}
.pin .ann.up{top:auto;bottom:calc(100% + 8px)}
.can-drag .pin{cursor:grab}
.can-drag .pin:active{cursor:grabbing}
.film{position:absolute;left:0;right:0;bottom:94px;z-index:4;display:flex;justify-content:center;gap:6px;height:42px;padding:0 6px}
.film span{flex:0 0 auto;width:62px;height:42px;transform-origin:50% 100%;background:var(--wall-2);overflow:hidden;will-change:transform}
.film img{width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* staircase manifesto */
.quote{position:relative;padding:clamp(130px,16vw,250px) var(--pad);display:grid;place-items:center}
.stairq{margin:0;width:min(100%,900px);font:500 clamp(30px,4.5vw,72px)/1.04 var(--f);letter-spacing:-.045em}
.stairq .row{display:flex;justify-content:space-between;gap:.24em;padding-left:var(--l,0%);padding-right:var(--rr,0%)}
.stairq .w{display:inline-block}
.qm{color:var(--accent)}
.bars{position:absolute;top:50%;translate:0 -50%;width:clamp(110px,19vw,300px);height:auto;fill:var(--bar)}
.bars-l{left:var(--pad)} .bars-r{right:var(--pad)}
.bars rect{transform-box:fill-box}

/* selected work */
.work-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.work-head .sw{grid-column:1/8}
.work-head .lead{grid-column:8/13;padding-bottom:.6em}
.feat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin-top:clamp(64px,8vw,120px);align-items:start}
.proj{display:block;text-decoration:none;color:inherit}
.proj>.ann{display:block;margin-bottom:10px}
.proj .media img{transition:scale 1.1s var(--ease-out),opacity .5s var(--ease-out)}
.proj .alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0}
.proj:hover .media img:first-child,.proj:focus-visible .media img:first-child{scale:1.035}
.proj:hover .alt,.proj:focus-visible .alt{opacity:1}
.proj-cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:16px}
.proj h3{font:500 clamp(19px,1.5vw,23px)/1.2 var(--f);letter-spacing:-.025em}
.proj .tags{margin-top:12px}
.proj .case-flag{font:400 11.5px/1 var(--fm);color:var(--accent);white-space:nowrap}
.f1{grid-column:6/13}
.f2{grid-column:1/6;margin-top:-14vw}
.f3{grid-column:2/7;margin-top:6vw}
.f4{grid-column:8/12;margin-top:12vw}
.more-box{grid-column:8/11;margin-top:3vw;justify-self:start}
.more-box a{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 22px;border-radius:999px;background:var(--wall-2);text-decoration:none;font-weight:500}

/* four jobs: stair list with pop cards */
.jobs h2{margin-bottom:clamp(40px,5vw,80px)}
.jobs-list li{border-top:1px dashed var(--dash)}
.jobs-list li:last-child{border-bottom:1px dashed var(--dash)}
.jobs-list a{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,30ch);gap:24px;align-items:end;padding:clamp(20px,2.3vw,36px) 0 clamp(20px,2.3vw,36px) var(--in,0);text-decoration:none}
.jobs-list .jt{font:500 clamp(36px,5.6vw,96px)/.98 var(--f);letter-spacing:-.045em;transition:color .45s var(--ease-out),translate .6s var(--ease-out);display:inline-block}
.jobs-list a:hover .jt,.jobs-list a:focus-visible .jt{color:var(--accent);translate:12px 0}
.jobs-list .jd{font-size:15.5px;line-height:1.5;color:var(--muted);padding-bottom:.6em}
.jobs-list .jd b{display:block;font-weight:500;color:var(--ink);margin-bottom:4px}
.popcard{position:fixed;left:0;top:0;z-index:40;width:300px;pointer-events:none;opacity:0;visibility:hidden;background:var(--paper);padding:8px;box-shadow:var(--lift-hi)}
.popcard img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 0}

/* process: a wall you walk along */
.proc{position:relative}
.proc-inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,56px);padding:clamp(80px,9vw,140px) var(--pad)}
.proc-word{position:relative;max-width:min(100%,900px)}
.proc-word .sw.is-vertical .sw-svg,.proc-word .sw.is-vertical .sw-reveal{width:min(100%,calc(78vh * var(--arn,.2)));height:auto}
.proc-view{position:relative;overflow:visible}
.proc-lede{max-width:44ch;border:1px dashed var(--dash);padding:14px 16px;font-size:17px;line-height:1.5}
.proc-track{position:relative;display:flex;flex-direction:column;gap:clamp(80px,10vw,140px);margin-top:56px}
.proc-thread{display:none}
.step{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:24px;align-items:start;max-width:980px}
.step .note{padding:clamp(22px,2.2vw,34px)}
.step h3{font:500 clamp(44px,4.8vw,80px)/.98 var(--f);letter-spacing:-.045em;margin-bottom:clamp(28px,4vh,56px)}
.step .tags{margin-bottom:18px}
.step .crop{rotate:var(--r2,1.4deg);margin-top:var(--mt,40px);background:var(--wall)}
.step .crop img{--ar:1/1}
.step figure{max-width:min(100%,46vh)}
.step .figcap{margin-top:10px}
.step-n{font:400 12px/1 var(--fm);color:var(--accent);display:block;margin-bottom:18px}
@media (min-width:1024px){
  .motion:not(.js-fallback) .proc{height:360vh}
  .motion:not(.js-fallback) .proc-inner{grid-template-columns:minmax(120px,15vw) minmax(0,1fr);position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding-top:clamp(40px,6vh,70px);padding-bottom:clamp(90px,12vh,120px);align-items:stretch}
  .motion:not(.js-fallback) .proc-word{height:calc(100svh - 160px);display:flex;align-items:flex-start}
  .motion:not(.js-fallback) .proc-view{overflow-x:clip;overflow-y:visible;display:flex;flex-direction:column;padding-left:6px}
  .motion:not(.js-fallback) .proc-track{flex-direction:row;align-items:center;gap:clamp(70px,7vw,130px);width:max-content;margin-top:auto;margin-bottom:auto;padding-right:12vw;will-change:transform}
  .motion:not(.js-fallback) .step{width:min(62vw,880px);flex:none}
  .motion:not(.js-fallback) .step:nth-child(even){translate:0 4vh}
  .motion:not(.js-fallback) .step:nth-child(odd){translate:0 -3vh}
  .motion:not(.js-fallback) .proc-thread{display:block;position:absolute;left:0;right:0;top:50%;height:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:-1}
  .motion:not(.js-fallback) .proc-thread-idle{display:block;position:absolute;left:0;right:0;top:50%;height:0;border-top:1px dashed var(--dash);z-index:-2}
}
.proc-thread-idle{display:none}

/* founder teaser */
.founder{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.founder .big{grid-column:1/9;font:500 clamp(32px,4.2vw,68px)/1.06 var(--f);letter-spacing:-.04em}
.founder-card{grid-column:9/13;margin-top:clamp(48px,7vw,110px)}
.fc-top{display:grid;grid-template-columns:118px minmax(0,1fr);gap:18px;align-items:end}
.fc-top .crop{padding:7px}
.sig{border-bottom:1px solid var(--ink);padding:0 0 8px;min-height:64px;display:flex;align-items:flex-end}
.founder-card p{margin-top:20px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.founder-card .who{margin-top:12px;font-weight:500;color:var(--ink)}
.founder-card .roll{margin-top:18px;font-weight:500}

/* CTA with the mark drawn as a construction */
.cta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center;border-top:1px dashed var(--dash)}
.cta-mark{grid-column:1/6}
.cta-mark svg{display:block;width:100%;max-height:68vh;overflow:visible}
.guide{stroke:var(--dash);stroke-width:1;stroke-dasharray:5 5;fill:none;vector-effect:non-scaling-stroke}
.blade{fill:var(--accent)}
.cta-copy{grid-column:7/13}
.cta-copy p{margin-top:26px;max-width:40ch;font-size:clamp(17px,1.3vw,20px);line-height:1.5;color:var(--ink-2)}
.cta-copy .cta-box{margin-top:34px}

/* =========================================================
   FOOTER: a destination
   ========================================================= */
.foot{position:relative;z-index:2;background:var(--wall);padding:clamp(90px,10vw,160px) var(--pad) 120px;border-top:1px dashed var(--dash);overflow:hidden}
.foot-time{font:500 clamp(36px,5.6vw,100px)/1 var(--f);letter-spacing:-.045em;max-width:15ch}
.foot-time time{font-variant-numeric:tabular-nums;color:var(--accent)}
.foot-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px 24px;margin-top:clamp(56px,7vw,110px);font-size:15.5px}
.foot-col h2{font:400 11.5px/1.4 var(--fm);color:var(--muted);margin-bottom:14px}
.foot-col li+li{margin-top:6px}
.foot-col a{text-decoration:none}
.fc1{grid-column:1/4}.fc2{grid-column:4/7}.fc3{grid-column:7/10}.fc4{grid-column:10/13}
.foot-legal{color:var(--muted);font-size:14px}
.foot-legal p+p{margin-top:8px}
.foot-mark{position:relative;margin-top:clamp(56px,7vw,110px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px}
.foot-bi{display:block;width:100%;max-width:760px;color:inherit;text-decoration:none}
.foot-bi .sw{display:block;--sw-size:clamp(110px,24vw,420px)}
.totop{display:inline-flex;flex-direction:column;align-items:center;gap:12px;border:0;background:none;cursor:pointer;padding:8px;font:500 15px/1 var(--f)}
.totop .stair{--sw:64px;rotate:180deg}
.totop:hover .stair rect{fill:var(--accent)}
.totop .stair rect{transition:fill .3s}

/* =========================================================
   WORK INDEX: the wall
   ========================================================= */
.wh{padding:clamp(120px,13vw,190px) var(--pad) clamp(32px,4vw,56px)}
.wh-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.wh h1{grid-column:1/8}
.wh h1.sw{--sw-size:clamp(110px,19vw,320px)}
.wh-copy{grid-column:8/13;padding-bottom:.6em}
.wh-copy .d3{margin-bottom:16px}
.wbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:clamp(40px,5vw,72px)}
.filters{display:flex;flex-wrap:wrap;gap:6px}
.chip{height:38px;padding:0 15px;border-radius:999px;border:1px solid transparent;background:var(--wall-2);font:500 14.5px/1 var(--f);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background-color .35s var(--ease-out),color .35s var(--ease-out)}
.chip sup{font:400 10.5px/1 var(--fm);color:var(--muted);top:-.3em}
.chip:hover{background:#DCDDE1}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.chip[aria-pressed="true"] sup{color:#B9BBC0}
.toggle{display:inline-flex;padding:4px;border-radius:999px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,19,21,.06)}
.toggle button{height:34px;padding:0 16px;border-radius:999px;border:0;background:transparent;cursor:pointer;font:500 14px/1 var(--f)}
.toggle button[aria-pressed="true"]{background:var(--wall)}
.wbar-r{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wcount{font:400 12px/1 var(--fm);color:var(--muted);font-variant-numeric:tabular-nums}
.wall-view{position:relative;margin-top:28px;border-top:1px dashed var(--dash);border-bottom:1px dashed var(--dash);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.wall-canvas{display:grid;grid-template-columns:repeat(6,300px);gap:72px 56px;padding:80px 64px 100px;width:max-content;align-items:start}
.wi{position:relative;grid-column:span 1}
.wi-in{rotate:var(--r,0deg)}
.wi.big{grid-column:span 2}
.wi:nth-child(3n+2){margin-top:56px}
.wi:nth-child(4n+3){margin-top:22px}
.wi a{display:block;text-decoration:none;color:inherit}
.wi .crop{background:var(--wall)}
.wi .media img{transition:scale 1.1s var(--ease-out)}
.wi a:hover .media img{scale:1.04}
.wi .wi-phone{position:absolute;right:-18px;bottom:44px;width:21%;rotate:3deg;background:var(--paper);box-shadow:var(--lift)}
.wi .wi-phone .crop{padding:5px;background:var(--paper)}
.wi-cap{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-top:12px}
.wi-cap h3{font:500 18px/1.2 var(--f);letter-spacing:-.02em}
.wi.big .wi-cap h3{font-size:clamp(20px,1.7vw,26px)}
.wi .ann{display:block;margin-top:4px}
.wi.is-hidden{display:none}
.wall-hint{position:absolute;right:var(--pad);bottom:12px;pointer-events:none}
.can-drag .wall-view{overflow:hidden;cursor:grab;height:min(80vh,860px);height:min(80svh,860px)}
.can-drag .wall-view:active{cursor:grabbing}
.wlist{margin:28px var(--pad) 0;border-top:1px dashed var(--dash)}
.wlist li{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px dashed var(--dash)}
.wlist .wl-name{font:500 clamp(22px,2.2vw,32px)/1.1 var(--f);letter-spacing:-.03em}
.wlist .wl-name a{text-decoration:none}
.wlist .wl-name a:hover{color:var(--accent)}
.wlist li.is-hidden{display:none}
.more{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.more h2{grid-column:1/5}
.more-list{grid-column:6/13;columns:2;column-gap:32px}
.more-list li{break-inside:avoid;padding:12px 0;border-top:1px dashed var(--dash)}
.more-list a{font-weight:500;text-decoration:none}
.more-list a:hover{color:var(--accent)}
.more-list .ann{display:block;margin-top:2px}
.empty{padding:60px 0;font-size:18px;color:var(--muted)}

/* =========================================================
   CASE STUDY
   ========================================================= */
.cw{position:relative;isolation:isolate;height:100vh;height:100svh;min-height:720px;max-height:1100px;overflow:hidden}
.cw-copy{position:absolute;left:var(--pad);top:38%;z-index:3;width:min(54vw,880px)}
.cw h1{font-size:clamp(44px,min(5.4vw,9.4vh),104px)}
.cw-meta{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline}
.cw-meta .ann{font-size:12px}
.cw-meta a{font-weight:500}
.cw .pin.notepin{width:var(--w)}
.cw .pin.notepin .note{padding:18px 20px}
.cw .pin.tagpin .tags li{box-shadow:var(--lift)}
.cw-stair{position:absolute;z-index:1;--sw:clamp(80px,9vw,150px)}
.fin-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.fin-head h2{grid-column:1/8}
.fin-head p{grid-column:8/13}
.fin-stage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin-top:clamp(56px,6vw,96px);align-items:start}
.browser{grid-column:1/9}
.browser .chrome{display:flex;align-items:center;gap:10px;height:34px;padding:0 12px;background:var(--paper);border-bottom:1px solid var(--wall-2)}
.browser .chrome i{width:9px;height:9px;border-radius:50%;background:var(--bar)}
.browser .chrome span{margin-left:10px;font:400 11.5px/1 var(--fm);color:var(--muted)}
.browser .screen{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--wall-2)}
.browser .reel{will-change:transform}
.browser .reel img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 0}
.phones{grid-column:9/13;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6vw}
.phones .crop:nth-child(2){margin-top:12vw}
.built{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.built h2{grid-column:1/5}
.built-list{grid-column:6/13}
.built-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;padding:18px 0;border-top:1px dashed var(--dash);font-size:clamp(18px,1.45vw,22px);line-height:1.38;letter-spacing:-.012em}
.built-list .stair{--sw:30px;margin-top:.5em}
.facts-sec{padding-top:0}
.facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border-top:1px solid var(--ink);border-bottom:1px dashed var(--dash)}
.facts div{padding:18px 18px 22px 0}
.facts dt{font:400 11.5px/1.4 var(--fm);color:var(--muted);margin-bottom:10px}
.facts dd{font:500 17px/1.3 var(--f);letter-spacing:-.015em}
.next{display:block;text-decoration:none;color:inherit;border-top:1px dashed var(--dash);position:relative}
.next-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.next .ann{grid-column:1/-1;margin-bottom:12px}
.next .d1{grid-column:1/9;transition:color .45s var(--ease-out)}
.next:hover .d1{color:var(--accent)}
.next .crop{grid-column:9/13;rotate:2deg;transition:rotate .9s var(--ease-pin)}
.next:hover .crop{rotate:-1deg}

/* =========================================================
   SERVICES
   ========================================================= */
.sh{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.sh h1{grid-column:1/9}
.sh-side{grid-column:9/13}
.sh-jump{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.sh-jump a{height:36px;padding:0 14px;border-radius:999px;background:var(--wall-2);display:inline-flex;align-items:center;text-decoration:none;font:500 14px/1 var(--f)}
.sh-jump a:hover{background:var(--ink);color:var(--paper)}
.panels{position:relative}
.panel{position:sticky;top:0;height:100vh;height:100svh;min-height:680px;overflow:hidden}
.panel-inner{position:absolute;inset:0;background:var(--paper);transform-origin:50% 20%;overflow:hidden;will-change:transform;
  background-image:
    radial-gradient(120% 90% at var(--gx,85%) var(--gy,15%),rgba(229,72,44,.14),rgba(229,72,44,0) 60%),
    repeating-linear-gradient(0deg,rgba(229,72,44,.075) 0 2px,transparent 2px 10px)}
.panel-dim{position:absolute;inset:0;background:var(--wall);opacity:0;pointer-events:none;z-index:8}
.panel-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding:clamp(90px,12vh,130px) var(--pad) clamp(100px,13vh,130px);align-items:end}
.panel-text{grid-column:1/7;position:relative;z-index:3}
.panel-kind{font:400 12px/1.4 var(--fm);color:var(--ink-2);margin-bottom:18px;display:flex;gap:10px;align-items:center}
.panel-kind .stair{--sw:34px}
.panel h2{font:500 var(--t-d1)/.92 var(--f);letter-spacing:-.05em}
.panel-body{margin-top:24px;font-size:clamp(17px,1.3vw,20px);line-height:1.5;color:var(--ink-2);max-width:40ch}
.panel .tags{margin-top:22px;max-width:520px}
.panel .tags li{background:var(--wall)}
.panel-art{grid-column:7/13;position:relative;align-self:center;height:100%}
.panel-art .a1{position:absolute;right:0;top:4%;width:92%;rotate:-1.2deg}
.panel-art .a2{position:absolute;left:-2%;bottom:2%;width:24%;rotate:2.4deg}
.panel-art .crop{background:var(--paper);box-shadow:var(--lift)}
.panel-art .ann{display:block;margin-top:8px}
.also{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.also h2{grid-column:1/5}
.also-list{grid-column:6/13}
.also-list li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;padding:26px 0;border-top:1px dashed var(--dash)}
.also-list h3{font:500 clamp(26px,2.4vw,38px)/1.05 var(--f);letter-spacing:-.035em}
.also-list p{font-size:16px;line-height:1.55;color:var(--ink-2)}
.also-list .tags{margin-top:14px}
.products h2{max-width:14ch}
.notes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin-top:clamp(56px,7vw,110px);align-items:start}
.nw1{grid-column:1/6}
.nw2{grid-column:6/9;margin-top:13vw}
.nw3{grid-column:9/13;margin-top:3vw}
.note img{width:100%;aspect-ratio:4/3;object-fit:cover}
.note .ann{display:block;margin-top:8px}
.note h3{font:500 clamp(28px,2.6vw,42px)/1 var(--f);letter-spacing:-.045em;margin-top:22px}
.note .np{margin-top:12px}
.note .meta{margin-top:16px;font:400 12px/1.45 var(--fm);color:var(--muted)}
.models-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin-top:clamp(48px,6vw,90px)}
.model{background:var(--paper);padding:clamp(22px,2.4vw,36px);display:flex;flex-direction:column;gap:18px;position:relative}
.model h3{font:500 clamp(30px,3vw,48px)/1 var(--f);letter-spacing:-.04em}
.model p{font-size:16px;line-height:1.55;color:var(--ink-2);max-width:46ch}
.model .tags li{background:var(--wall)}
.model .ann{margin-top:auto}
.m1{grid-column:1/8;grid-row:span 2;min-height:440px;background-image:repeating-linear-gradient(0deg,rgba(229,72,44,.07) 0 2px,transparent 2px 10px);background-color:var(--paper)}
.m1 h3{font-size:clamp(40px,4.4vw,72px)}
.m2{grid-column:8/13}
.m3{grid-column:8/13;background:var(--ink);color:var(--paper)}
.m3 p{color:#D3D5D9}
.m3 .ann{color:#B4B7BC}
.m3 .tags li{background:#2A2C30;color:var(--paper)}
.ticker{overflow:hidden;border-top:1px dashed var(--dash);border-bottom:1px dashed var(--dash);padding:26px 0}
.ticker-track{display:flex;width:max-content;will-change:transform}
.ticker-track span{font:500 clamp(28px,3.4vw,56px)/1 var(--f);letter-spacing:-.04em;padding-right:.9em;white-space:nowrap;display:inline-flex;align-items:center;gap:.9em}
.ticker-track span::after{content:"";width:.5em;height:.11em;background:var(--accent);rotate:-30deg}
.faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.faq h2{grid-column:1/5}
.faq-list{grid-column:6/13}
.faq details{border-top:1px dashed var(--dash)}
.faq details:last-child{border-bottom:1px dashed var(--dash)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:22px 0;font:500 clamp(19px,1.6vw,24px)/1.3 var(--f);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .dock-plus{flex:none;width:13px;height:13px}
.faq summary .dock-plus::before,.faq summary .dock-plus::after{top:6px}
.faq details[open] summary .dock-plus{rotate:135deg}
.faq .ans{padding:0 0 24px;max-width:60ch;font-size:16.5px;line-height:1.6;color:var(--ink-2)}

/* =========================================================
   STUDIO
   ========================================================= */
.st-wrap{position:relative}
.st-hero{position:relative;z-index:2;min-height:calc(100svh - var(--gh,22vw));padding:clamp(130px,15vw,210px) var(--pad) 40px}
.st-hero h1{max-width:14ch}
.st-hero .lead{margin-top:28px}
.giant{position:sticky;z-index:0;top:calc(100svh - var(--gh,22vw));height:var(--gh,22vw);display:flex;align-items:flex-end;padding:0 var(--pad);overflow:hidden;pointer-events:none}
.giant svg{display:block;width:100%;height:auto;overflow:visible}
.giant text{font-family:var(--f);font-weight:500;fill:var(--ink)}
.over{position:relative;z-index:2;background:var(--wall)}
.over::before{content:"";position:absolute;left:0;right:0;top:-1px;border-top:1px dashed var(--dash)}
.intro2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.intro2 p.d3{grid-column:3/12}
.nope h2{margin-bottom:clamp(36px,5vw,72px)}
.nope-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,28ch);gap:24px;align-items:end;padding:clamp(18px,2.2vw,34px) 0;border-top:1px dashed var(--dash)}
.nope-line{font:500 clamp(34px,6vw,104px)/1 var(--f);letter-spacing:-.05em}
.strike-wrap{position:relative;display:inline-block}
.strike{position:absolute;left:-.04em;right:-.04em;top:54%;height:.08em;background:var(--accent);transform-origin:0 50%;rotate:-1.2deg}
.motion:not(.js-fallback) .strike{transform:scaleX(0)}
.static .strike{transform:none!important}
.nope-why{font-size:16px;line-height:1.5;color:var(--muted);padding-bottom:.5em}
.princ-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2vw,32px);align-items:start;padding:clamp(22px,2.6vw,40px) 0 clamp(22px,2.6vw,40px) var(--in,0)}
.princ-list .stair{--sw:clamp(48px,5vw,80px);margin-top:.35em}
.princ-list h3{font:500 clamp(28px,3.4vw,56px)/1.04 var(--f);letter-spacing:-.04em;max-width:22ch}
.princ-list p{margin-top:12px;font-size:16.5px;line-height:1.55;color:var(--ink-2);max-width:52ch}
.rel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.rel-head{grid-column:1/6}
.rel-head p{margin-top:22px}
.rel-confirm{margin-top:16px}
.principles h2{margin-bottom:clamp(32px,4vw,64px)}
.rel-board{grid-column:6/13;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-top:30px}
.rel-board .note:nth-child(2){margin-top:70px}
.rel-board h3{font:500 clamp(26px,2.4vw,38px)/1 var(--f);letter-spacing:-.04em;margin-bottom:16px}
.rel-board .tags{margin-top:16px}
.rel-board .tags li{background:var(--wall)}
.rel-string{position:absolute;left:24%;right:24%;top:72px;height:0;border-top:2px dashed var(--accent);z-index:3;transform-origin:0 50%}
.fnote{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.fnote blockquote{grid-column:1/9}
.fnote blockquote p{font:500 clamp(32px,4.2vw,68px)/1.06 var(--f);letter-spacing:-.04em}
.fnote .founder-card{grid-column:9/13;margin-top:clamp(80px,12vw,180px)}
.band{display:block;background:var(--ink);color:var(--paper);overflow:hidden;text-decoration:none;padding:clamp(26px,3vw,44px) 0}
.band-track{display:flex;width:max-content;will-change:transform}
.band-item{display:inline-flex;align-items:center;gap:clamp(20px,2.4vw,40px);padding-right:clamp(20px,2.4vw,40px)}
.band-item b{font:500 clamp(48px,6vw,104px)/1 var(--f);letter-spacing:-.045em;white-space:nowrap}
.band-item small{font-size:15px;line-height:1.35;color:#C9CBD0;width:28ch}
.band:hover b{color:var(--accent)}
.band:focus-visible{outline-offset:-4px}

/* =========================================================
   CONTACT
   ========================================================= */
.ct{position:relative;padding:clamp(120px,13vw,180px) var(--pad) clamp(80px,9vw,140px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.ct-left{grid-column:1/7;padding-right:2vw;position:relative}
.ct-left .lead{margin-top:24px}
.ct-direct{margin-top:40px;display:grid;gap:14px}
.ct-direct>*{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:14px 0;border-top:1px dashed var(--dash);text-decoration:none}
.ct-direct>*:last-child{border-bottom:1px dashed var(--dash)}
.ct-direct b{font:500 20px/1.2 var(--f);letter-spacing:-.02em}

.brief-note{margin-top:56px;width:min(100%,360px);--r:-2deg}
.brief-note .ann{display:block;margin-bottom:10px}
.brief-note p{font:500 19px/1.4 var(--f);letter-spacing:-.015em;color:var(--ink);min-height:4.2em}
.brief-note p span{color:var(--accent)}
.sheet-wrap{grid-column:7/13;position:relative}
.sheet{position:relative;background:var(--paper);padding:clamp(24px,3vw,48px);box-shadow:var(--lift-hi);rotate:.6deg}
.sheet::before,.sheet::after{content:"";position:absolute;top:-12px;width:96px;height:25px;background:rgba(167,170,176,.42);clip-path:polygon(0 10%,3% 0,7% 9%,93% 4%,97% 0,100% 12%,98% 90%,100% 100%,4% 96%,0 100%,2% 52%)}
.sheet::before{left:12%;rotate:-4deg}
.sheet::after{right:12%;rotate:3deg}
.sheet h2{font:500 clamp(28px,2.6vw,40px)/1.05 var(--f);letter-spacing:-.04em;margin-bottom:28px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label,.field legend{font:500 14.5px/1.3 var(--f);color:var(--ink)}
.field .opt{font:400 11.5px/1 var(--fm);color:var(--muted);margin-left:6px}
.field input,.field textarea,.field select{width:100%;border:0;border-bottom:1px solid var(--muted);background:transparent;padding:10px 0;font-size:17px;border-radius:0;outline:none;transition:border-color .3s}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.field textarea{min-height:110px;resize:vertical;line-height:1.5}
.field input:focus,.field textarea:focus,.field select:focus{border-bottom-color:var(--ink);box-shadow:0 2px 0 0 var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:#7E8187}
.field .help{font-size:13.5px;line-height:1.4;color:var(--muted)}
.field .err{font-size:13.5px;line-height:1.4;color:#B3321B;display:none}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid textarea{border-bottom-color:#B3321B}
fieldset.field{border:0;padding:0;margin:0;min-width:0}
.checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.checks label{position:relative;cursor:pointer}
.checks input{position:absolute;opacity:0;width:1px;height:1px}
.checks span{display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:999px;background:var(--wall);font:500 14.5px/1 var(--f);transition:background-color .3s,color .3s}
.checks input:checked+span{background:var(--ink);color:var(--paper)}
.checks input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;margin-top:8px}
.form-done{display:none;padding:12px 0}
.form-done h3{font:500 clamp(30px,3vw,46px)/1.05 var(--f);letter-spacing:-.04em}
.form-done p{margin-top:14px;color:var(--ink-2);max-width:46ch}
.sheet.done .form{display:none}
.sheet.done .form-done{display:block}
.steps{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.steps h2{grid-column:1/-1;margin-bottom:clamp(36px,5vw,72px)}
.steps ol{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.steps li{position:relative;padding-top:24px;border-top:1px solid var(--ink);margin-top:var(--mt,0)}
.steps li:nth-child(2){--mt:clamp(40px,5vw,80px)}
.steps li:nth-child(3){--mt:clamp(80px,10vw,160px)}
.steps .n{font:400 12px/1 var(--fm);color:var(--accent)}
.steps h3{font:500 clamp(26px,2.4vw,38px)/1.05 var(--f);letter-spacing:-.035em;margin:16px 0 12px}
.steps p{font-size:16px;line-height:1.55;color:var(--ink-2);max-width:36ch}
.ct-now{margin-top:clamp(56px,6vw,96px);grid-column:1/-1;font-size:clamp(18px,1.4vw,21px);color:var(--ink-2)}
.ct-now time{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .f2{margin-top:-9vw}
  .panel-text{grid-column:1/8}
  .panel-art{grid-column:7/13}
  .founder-card,.fnote .founder-card{grid-column:8/13}
  .facts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* below 1024: walls become stacked walls, frames never share space with text */
@media (max-width:1023px){
  .hero,.cw{height:auto;min-height:0;max-height:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:20px;row-gap:0;align-content:start;padding:96px var(--pad) 120px;overflow:visible}
  .wall-pins{position:static;display:contents}
  .pin{position:relative;left:auto;top:auto;width:auto}
  .pin.desk-only{display:none}
  .pin .ann.up{top:calc(100% + 8px);bottom:auto}
  .hero .m1,.cw .m1{grid-column:1;grid-row:1;width:min(92%,340px);justify-self:start}
  .hero .m2,.cw .m2{grid-column:2;grid-row:1;width:min(46%,150px);justify-self:end;margin-top:28px}
  .hero-copy,.cw-copy{position:relative;left:auto;top:auto;width:auto;grid-column:1/-1;grid-row:2;margin:76px 0 64px}
  .hero .m3,.cw .m3{grid-column:1;grid-row:3;width:min(48%,150px);justify-self:end;margin-right:6%}
  .hero .m4,.cw .m4{grid-column:2;grid-row:3;width:min(100%,340px);justify-self:start;margin-top:26px}
  .cw .m5{grid-column:1/-1;grid-row:4;width:min(78%,340px);justify-self:center;margin-top:64px}
  .film{position:relative;left:auto;right:auto;bottom:auto;grid-column:1/-1;grid-row:5;margin:72px calc(-1 * var(--pad)) 0;justify-content:flex-start;overflow:hidden}
  .cw-stair{display:none}
  .proc-inner{grid-template-columns:1fr}
  .proc-word{max-width:100%}
  .fin-head h2,.fin-head p{grid-column:1/-1}
  .fin-head p{margin-top:18px}
  .browser{grid-column:1/-1}
  .phones{grid-column:1/-1;width:min(100%,520px);margin:48px auto 0}
  .phones .crop:nth-child(2){margin-top:60px}
  .panel-grid{align-content:end;grid-template-rows:1fr auto}
  .panel-art{grid-column:1/-1;grid-row:1;height:auto;align-self:start;position:relative;min-height:0}
  .panel-art .a1{position:relative;width:84%;margin-left:auto;top:0}
  .panel-art .a2{width:22%;bottom:-10%}
  .panel-text{grid-column:1/-1;grid-row:2}
  .panel h2{font-size:clamp(46px,9vw,84px)}
}
@media (max-width:767px){
  body{font-size:16px}
  .top{height:64px}
  .brand{width:108px}
  .top-nav{display:none}
  html:not(.js) .top-nav{display:block}
  html:not(.js) .top-nav ul{gap:12px}
  .dock{bottom:12px}
  .dock-btn{padding:0 14px}
  .dock .btn{padding:0 16px}
  .dock-clock{display:none}
  .menu{bottom:76px}
  .menu-sheet{grid-template-columns:1fr;padding:24px 22px 20px}
  .menu-peek .crop{display:none}
  .hero h1{font-size:clamp(40px,11vw,52px)}
  .hero-sub{font-size:16px}
  .hero-cta{gap:18px}
  .film{height:34px;gap:4px}
  .film span{width:48px;height:34px}
  .stairq{font-size:8.4vw}
  .stairq .row{padding:0!important;flex-wrap:wrap;justify-content:flex-start;gap:0 .26em}
  .stairq .row:nth-child(even){justify-content:flex-end}
  .bars{display:none}
  .work-head,.wh-top,.sh,.fin-head,.built,.also,.faq,.more,.intro2,.rel,.fnote,.founder,.cta,.steps,.next-in{display:block}
  .work-head .lead,.wh-copy,.sh-side{margin-top:28px}
  .feat{display:flex;flex-direction:column;gap:64px}
  .f2,.f3,.f4{margin-top:0}
  .f4{width:78%;align-self:flex-end}
  .more-box{align-self:flex-start}
  .jobs-list a{grid-template-columns:1fr;gap:10px;padding-left:calc(var(--in,0) * .4)}
  .jobs-list .jt{font-size:clamp(34px,10vw,46px)}
  .step{grid-template-columns:1fr}
  .step .crop{width:78%;margin-left:auto;--mt:0px}
  .founder .big,.fnote blockquote p{font-size:clamp(30px,8.4vw,40px)}
  .founder-card,.fnote .founder-card{margin-top:48px;max-width:420px}
  .cta-mark{width:62%;margin:0 auto 32px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .fc1,.fc2,.fc3,.fc4{grid-column:auto}
  .fc4{grid-column:1/-1}
  .foot-mark{grid-template-columns:1fr}
  .totop{justify-self:start;flex-direction:row}
  .wall-canvas{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 18px;padding:36px var(--pad) 48px;width:100%}
  .wi.big{grid-column:span 2}
  .wi:nth-child(3n+2),.wi:nth-child(4n+3){margin-top:0}
  .wi .wi-phone{right:-6px;width:24%}
  .wall-view{overflow:visible;border:0}
  .wall-hint{display:none}
  .wlist li{grid-template-columns:1fr;gap:6px}
  .more-list{columns:1;margin-top:28px}
  .cw .m5{width:90%}
  .facts{grid-template-columns:1fr 1fr}
  .next .crop{margin-top:28px;width:78%}
  .built-list,.also-list,.faq-list{margin-top:32px}
  .notes{display:flex;flex-direction:column;gap:56px}
  .nw2,.nw3{margin-top:0}
  .nw2{width:88%;align-self:flex-end}
  .models-grid{display:flex;flex-direction:column}
  .m1{min-height:0}
  .also-list li{grid-template-columns:1fr;gap:12px}
  .panel{min-height:640px}
  .panel-grid{padding-top:84px;padding-bottom:96px;gap:16px}
  .panel-body{font-size:16px;margin-top:16px}
  .panel .tags{margin-top:16px}
  .panel-art .a2{display:none}
  .panel-art .a1{width:100%}
  .nope-list li{grid-template-columns:1fr;gap:10px}
  .princ-list li{padding-left:0!important}
  .rel-board{grid-template-columns:1fr;gap:40px;margin-top:40px}
  .rel-board .note:nth-child(2){margin-top:0}
  .rel-string{display:none}
  .band-item small{display:none}
  .ct{display:block;padding-top:110px}
  .sheet-wrap{margin-top:56px}
  .sheet{rotate:0deg}
  .form{grid-template-columns:1fr}
  .brief-note{display:none}
  .steps ol{grid-template-columns:1fr;gap:40px}
  .steps li{--mt:0!important}
}
@media (max-width:400px){
  .dock-bi{padding:0 8px}
  .dock-btn{padding:0 12px;font-size:14.5px}
  .dock .btn{padding:0 14px;font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
  @view-transition{navigation:none}
}

/* =========================================================
   v3.1 REFINEMENTS (client round): buttons, mark, menu, scale, brand wall
   ========================================================= */
:root{--accent-deep:#C8391F}

/* buttons. Primary: deep vermilion fill, white label (5.2:1), ink fills in from the hover side (white on ink 18:1).
   Secondary: ink outline and label (17:1 on wall, 18:1 on paper), ink fills in, label turns paper. */
.btn{background:var(--accent-deep);color:#fff;font-weight:500;box-shadow:none;transition:color .25s var(--ease-out) .05s,box-shadow .3s var(--ease-out)}
.btn .btn-fill{background:var(--ink)}
.btn.is-filled{color:#fff}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px;background:var(--ink);color:#fff}
.btn-2{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-2.is-filled,.btn-2:focus-visible{color:var(--paper)}
.static .btn:hover,.no-fill .btn:hover{background:var(--ink);color:#fff}
.static .btn-2:hover,.no-fill .btn-2:hover{background:var(--ink);color:var(--paper)}
.on-dark .btn-2{color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--paper)}
.on-dark .btn-2 .btn-fill{background:var(--paper)}
.on-dark .btn-2.is-filled{color:var(--ink)}
.dock .btn{font-weight:500}
.hero-cta{gap:14px}
.more-box{justify-self:start}

/* the real mark and lockup */
.dock-mark{width:44px;padding:0;justify-content:center;background:transparent}
.dock-mark svg{width:15px;height:auto;color:var(--ink);transition:transform .6s var(--ease-pin)}
.dock-mark:hover{background:transparent}
.dock-mark:hover svg{transform:rotate(-30deg) scale(1.08)}
.foot-lock{display:block;width:min(100%,640px);color:var(--ink);transition:color .45s var(--ease-out)}
.foot-lock svg{display:block;width:100%;height:auto}
.foot-lock:hover{color:var(--accent-deep)}
.pinup-ann{width:120px;color:var(--ink)}
.pinup-ann svg{display:block;width:100%;height:auto}

/* menu: text only. Index number slides in, letters roll up in a stagger */
.menu{width:min(100vw - 24px,460px)}
.menu-sheet{grid-template-columns:1fr;gap:18px;padding:30px 32px 22px}
.menu-links a{gap:14px;align-items:center}
.menu-links .mi{font:400 12px/1 var(--fm);color:var(--accent-deep);width:2.2em;opacity:0;transform:translateX(-10px);transition:opacity .45s var(--ease-out),transform .6s var(--ease-out)}
.menu-links a:hover .mi,.menu-links a:focus-visible .mi,.menu-links a[aria-current="page"] .mi{opacity:1;transform:none}
.menu-links .ml{display:inline-flex;overflow:hidden;padding-bottom:.06em}
.menu-links .ch{display:inline-block;white-space:pre;text-shadow:0 1.15em 0 currentColor;transition:transform .6s var(--ease-out);transition-delay:calc(var(--i) * 22ms)}
.menu-links a:hover .ch,.menu-links a:focus-visible .ch{transform:translateY(-1.15em)}
.menu-links a[aria-current="page"]::after{content:none}
.menu-links a[aria-current="page"]{color:var(--ink)}
.menu-meta{border-top:1px dashed var(--dash);padding-top:14px}

/* striped words at v2 scale: they dominate their sections */
.work-head{display:block}
.work-head .sw{width:min(78vw,1320px)}
.work-head .lead{margin:clamp(28px,3vw,44px) 0 0 auto;max-width:34ch;padding:0}
.wh-top{display:block}
.wh h1.sw{width:min(78vw,1320px)}
.wh-copy{margin:clamp(28px,3vw,44px) 0 0 auto;max-width:520px;padding:0}
@media (min-width:1024px){
  .motion:not(.js-fallback) .proc-inner{grid-template-columns:minmax(150px,20vw) minmax(0,1fr);padding-top:24px;padding-bottom:24px}
  .motion:not(.js-fallback) .proc-word{height:calc(100svh - 48px)}
  .proc-word .sw.is-vertical .sw-svg,.proc-word .sw.is-vertical .sw-reveal{width:calc((100svh - 48px) * var(--arn,.2));max-width:100%}
  .motion:not(.js-fallback) .proc-view{padding-top:clamp(40px,7vh,80px);padding-bottom:clamp(70px,10vh,100px)}
}

/* breathing room and rhythm */
.sec{padding-top:clamp(110px,13vw,220px);padding-bottom:clamp(110px,13vw,220px)}
.ann{font-size:11px;letter-spacing:.01em}
.pin .ann{right:auto;white-space:nowrap}
.proj>.ann{margin-bottom:12px}
.feat{row-gap:40px}
.lead{max-width:36ch}
.jobs-list .jd{max-width:24ch}

/* brand in use: collateral pinned to the wall */
.bu-wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px 24px;margin-top:clamp(48px,6vw,96px);align-items:start}
.bu{rotate:var(--r,0deg)}
.bu .crop{background:var(--wall)}
.bu figcaption{margin-top:10px}
.bu-art{position:relative;overflow:hidden;box-shadow:var(--lift)}
.bu-card{grid-column:1/6}
.bu-letter{grid-column:7/11;margin-top:8vw}
.bu-social{grid-column:2/5;margin-top:-2vw}
.bu-sign{grid-column:6/13;margin-top:4vw}
.biz{aspect-ratio:85/55;background:var(--paper);padding:9% 9% 8%;display:flex;flex-direction:column}
.biz-lock{width:52%;color:var(--ink)} .biz-lock svg,.letter-lock svg,.sign-lock svg{display:block;width:100%;height:auto}
.biz-bar{width:14%;height:3px;background:var(--accent-deep);margin:auto 0 12px}
.biz-line{font:500 clamp(11px,1vw,15px)/1.4 var(--f);color:var(--ink)}
.biz-line.m{font:400 clamp(9px,.8vw,12px)/1.4 var(--fm);color:var(--muted)}
.letter{aspect-ratio:3/4;background:#fff;padding:12% 12%;display:flex;flex-direction:column;gap:7%}
.letter-lock{width:46%;color:var(--ink)}
.letter-rule{height:1px;background:var(--accent-deep);width:100%;margin-top:4%}
.letter-l{height:5px;background:var(--wall-2)} .letter-l.w1{width:62%} .letter-l.w2{width:88%} .letter-l.w3{width:74%}
.social{aspect-ratio:1/1;background:var(--ink);color:var(--paper);padding:12%;display:flex;flex-direction:column;justify-content:space-between}
.social-mark{width:20%;color:var(--accent)} .social-mark svg,.sign-mark svg{display:block;width:100%;height:auto}
.social-t{font:500 clamp(20px,2vw,32px)/1.02 var(--f);letter-spacing:-.04em}
.sign{aspect-ratio:16/9;background:linear-gradient(180deg,#DADCDF,#CDD0D4);display:flex;align-items:center;gap:5%;padding:0 9%}
.sign-mark{width:12%;color:var(--accent-deep);filter:drop-shadow(0 6px 8px rgba(18,19,21,.25))}
.sign-lock{width:48%;color:var(--ink);filter:drop-shadow(0 3px 4px rgba(18,19,21,.18))}
@media (max-width:767px){
  .work-head .sw,.wh h1.sw{width:100%}
  .bu-wall{grid-template-columns:1fr 1fr;gap:40px 16px}
  .bu-card,.bu-sign{grid-column:1/-1;margin-top:0}
  .bu-letter,.bu-social{grid-column:auto;margin-top:0}
  .menu{width:calc(100vw - 24px)}
}

/* striped words drawn with CSS (background-clip:text), no measuring, no SVG */
.sw{line-height:.82}
.sw .sw-text,.sw.built .sw-text{position:relative!important;display:inline-block;width:auto;height:auto;overflow:visible;clip:auto;white-space:nowrap;padding:.02em .04em .02em 0;opacity:1!important;font-weight:700;letter-spacing:-.05em;line-height:.82}
.sw-svg,.sw-reveal{display:none!important}
#work-h .sw-text,#wh-h .sw-text{font-size:clamp(96px,19vw,360px)}
.work-head .sw,.wh h1.sw{width:auto}
#proc-h{position:relative;display:inline-block}
#proc-h .sw-text{font-size:clamp(80px,18vw,300px)}
#proc-h .sw-text.idle{background-image:repeating-linear-gradient(to bottom,var(--idle) 0 .045em,transparent .045em .07em)}
#proc-h .sw-acc{position:absolute!important;left:0;top:0}
@media (min-width:1024px){
  .motion:not(.js-fallback) #proc-h .sw-text{writing-mode:vertical-rl;font-size:calc((100vh - 60px) / 3.7);font-size:calc((100svh - 60px) / 3.7);padding:0 .02em .04em;background-image:repeating-linear-gradient(to left,var(--accent) 0 .045em,transparent .045em .07em)}
  .motion:not(.js-fallback) #proc-h .sw-text.idle{background-image:repeating-linear-gradient(to left,var(--idle) 0 .045em,transparent .045em .07em)}
  .motion:not(.js-fallback) .proc-word{overflow:hidden}
}

/* =========================================================
   v3.2: launch round
   ========================================================= */
/* micro-interactions: crop marks draw outward and frames tilt on hover */
.crop::before{transition:transform .6s var(--ease-out)}
a:hover .crop::before,.pin:hover .crop::before,.m3d:hover::before,.bu:hover .crop::before{transform:scale(1.025)}
.proj .crop,.wi .crop,.next .crop{transition:rotate .9s var(--ease-pin)}
.proj:hover .crop{rotate:-.6deg}
.wi a:hover .crop{rotate:.5deg}

/* contact: the mark in metal */
.m3d{margin-top:44px;width:min(100%,420px);background:var(--wall);rotate:-1deg}
.m3d-stage{position:relative;aspect-ratio:4/4.4;background:radial-gradient(80% 60% at 50% 42%,#F4F4F2,#E4E5E8)}
.m3d-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.m3d-flat{position:absolute;left:32%;top:22%;width:36%;height:auto;color:var(--ink);filter:drop-shadow(0 18px 18px rgba(18,19,21,.22))}
.gl-on .m3d-flat{display:none}
.m3d figcaption{margin-top:10px}
.ct-left .brief-note{margin-top:-40px;margin-left:auto;position:relative;z-index:2}

/* form: label lifts, underline draws, valid tick, loading state */
.field label,.field legend{transition:color .3s var(--ease-out),transform .45s var(--ease-out);transform-origin:0 50%}
.field:focus-within>label{color:var(--accent-deep);transform:translateY(-2px)}
.field input,.field textarea,.field select{background-image:linear-gradient(var(--ink),var(--ink));background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;transition:background-size .6s var(--ease-out),border-color .3s}
.field input:focus,.field textarea:focus{background-size:100% 2px;box-shadow:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%)}
.field.valid>label::after{content:"";display:inline-block;width:9px;height:5px;margin-left:8px;border-left:1.5px solid var(--accent-deep);border-bottom:1.5px solid var(--accent-deep);transform:translateY(-3px) rotate(-45deg)}
.btn.is-loading{pointer-events:none}
.btn.is-loading .bl{opacity:.85}
.btn .bl{display:inline-flex;align-items:center;gap:10px;position:relative;z-index:1}
.form-done .btn{margin-top:22px}
.form-done h3{font-size:clamp(32px,3.4vw,52px)}

/* services detail */
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:clamp(40px,5vw,80px)}
.det{background:var(--paper);padding:clamp(22px,2.4vw,36px)}
.det h3{font:500 clamp(26px,2.4vw,38px)/1.05 var(--f);letter-spacing:-.035em;margin-bottom:22px}
.det dl{display:grid;gap:14px}
.det dt{font:400 11px/1.4 var(--fm);color:var(--muted);margin-bottom:4px}
.det dd{font-size:16px;line-height:1.5;color:var(--ink-2)}
.pd{margin-top:14px;display:grid;gap:6px}
.pd li{font-size:15px;line-height:1.4;padding-left:18px;position:relative}
.pd li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--accent-deep);rotate:-30deg}

/* studio: week by week */
.wk-list{margin-top:clamp(36px,4vw,64px)}
.wk-list li{display:grid;grid-template-columns:minmax(150px,14vw) minmax(0,.6fr) minmax(0,1fr);gap:24px;align-items:baseline;padding:22px 0 22px var(--in,0);border-top:1px dashed var(--dash)}
.wk-w{font:400 12px/1.4 var(--fm);color:var(--accent-deep)}
.wk-list h3{font:500 clamp(26px,2.6vw,42px)/1 var(--f);letter-spacing:-.04em}
.wk-list p{font-size:16px;line-height:1.5;color:var(--ink-2);max-width:46ch}

/* case sections */
.cs-brief .d3,.cs-mobile .d3{margin-top:18px;max-width:28ch}
.cs-brief,.cs-mobile{padding-bottom:0}
.str-list .n{font:400 12px/1 var(--fm);color:var(--accent-deep);min-width:2em;margin-top:.55em}
.cs-next{margin-top:40px}
.cs-next ul{margin-top:12px;display:grid;gap:8px;font-size:17px}
.cs-visit{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}

/* 404 */
.lost .pin{opacity:1}

/* mobile: 44px targets, full-screen menu */
@media (max-width:767px){
  .chip,.toggle button,.checks span{min-height:44px}
  .chip{height:44px}
  .foot-col li a,.menu-cases a,.ct-direct>*{min-height:44px;display:inline-flex;align-items:center}
  .menu{inset:0;left:0;bottom:0;translate:none;width:100%;height:100%}
  .menu-sheet{height:100%;padding:90px 24px 100px;display:flex;flex-direction:column;justify-content:center;box-shadow:none}
  .menu-sheet .mc{display:none}
  .menu-links a{font-size:clamp(40px,12vw,58px);min-height:56px}
  .detail-grid{grid-template-columns:1fr}
  .wk-list li{grid-template-columns:1fr;gap:6px;padding-left:0}
  .m3d{width:100%;rotate:0deg}
  .ct-left .brief-note{display:block;margin-top:24px;width:100%}
  .btn{min-height:48px}
}

/* =========================================================
   v3.3: responsive polish. One rhythm per breakpoint, real
   frame sizes on phones and tablets, 12px+ mono, 44px targets.
   Breakpoints: phone <=767, tablet 768-1023, desktop >=1024.
   ========================================================= */
:root{--sec:clamp(128px,10.6vw,176px);--sec-h:calc(var(--sec) / 2);--head-top:clamp(140px,13vw,200px);--rp:0px;--top-h:76px}
@media (max-width:1023px){:root{--pad:32px;--sec:104px;--head-top:148px}}
@media (max-width:767px){:root{--pad:20px;--sec:72px;--head-top:112px;--top-h:64px}}

/* headings wrap in balanced lines, paragraphs avoid orphans */
h1,h2,h3,.d-hero,.d1,.d2,.d3,.ln>span,.foot-time,.big,.nope-line,.jt{text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}

/* vertical rhythm: each section carries half the gap on each side, so section to section is one --sec */
.sec{padding-top:var(--sec-h);padding-bottom:var(--sec-h)}
.cs-brief,.cs-mobile{padding-bottom:var(--sec-h)}
.facts-sec{padding-top:var(--sec-h)}
.cta,.next{margin-top:var(--sec-h);padding-top:var(--sec)}
.foot{margin-top:var(--sec-h);padding-top:var(--sec);padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
.quote{padding-top:var(--sec);padding-bottom:var(--sec)}
.page-head{padding-top:var(--head-top);padding-bottom:var(--sec-h)}
.wh{padding-top:var(--head-top)}
.ct{padding-top:var(--head-top);padding-bottom:var(--sec-h)}
.st-hero{padding-top:var(--head-top)}
.dock{bottom:calc(16px + env(safe-area-inset-bottom,0px))}

/* mono never below 12px */
.ann,.ph-label,.proj .case-flag,.facts dt,.foot-col h2,.det dt,.field .opt,.browser .chrome span,.chip sup{font-size:12px}
.wi .case-flag{font:400 12px/1 var(--fm);color:var(--accent-deep);white-space:nowrap}
.biz-line{font-size:clamp(13px,1vw,15px)}
.biz-line.m{font-size:12px}

/* text-roll links: the copy waits one full box below, so it is always clipped,
   whatever padding the link carries for its tap target */
.roll{padding-top:var(--rp);padding-bottom:var(--rp);line-height:1.25}
.roll-t{line-height:1.25}
.roll-t::after{top:calc(100% + var(--rp))}
.roll:hover .roll-t,.roll:focus-visible .roll-t{transform:translateY(calc(-100% - var(--rp)))}
.top-nav a.roll{--rp:calc((44px - 1.25em) / 2)}
.brand{min-height:44px;display:flex;align-items:center}
@media (hover:none){
  .roll-t::after{content:none}
  .roll:hover .roll-t{transform:none}
  .menu-links .ch{text-shadow:none}
  .menu-links a:hover .ch{transform:none}
}

/* ---------- touch sizes: 44px targets ---------- */
@media (max-width:1023px),(pointer:coarse){
  .roll{--rp:calc((44px - 1.25em) / 2);min-width:44px}
  .foot-col li a.roll{min-height:0;display:inline-flex}
  .foot-col li+li{margin-top:0}
  .foot-col li[data-placeholder]{min-height:44px;display:flex;align-items:center}
  .foot-col>.ann{margin-bottom:4px!important}
  .u{display:inline-flex;align-items:center;min-height:44px;min-width:44px;background:none;padding-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
  .u::after{bottom:calc(50% - .9em)}
  /* links inside running text stay inline (WCAG 2.5.8 exempts in-sentence links); only standalone links get the 44px box */
  :is(p,li,dd,dt,td,figcaption,blockquote,label,small,summary,h2,h3,h4) .u{display:inline;min-height:0;min-width:0}
  :is(p,li,dd,dt,td,figcaption,blockquote,label,small,summary,h2,h3,h4) .u::after{bottom:0}
  .menu-cases a{min-width:44px}
  .more-list a,.wlist .wl-name a{display:inline-flex;align-items:center;min-height:44px}
  .chip,.sh-jump a,.toggle button,.checks span{height:44px;min-height:44px}
  .sh-jump a{padding:0 16px}
  .checks input{inset:0;width:100%;height:100%;margin:0;cursor:pointer}
  .totop{min-height:44px}
}

/* =================== tablet and phone (<1024) =================== */
@media (max-width:1023px){
  body{font-size:16.5px}
  .d-hero{font-size:clamp(40px,8.2vw,64px)}
  .cw h1{font-size:clamp(40px,8.2vw,64px)}
  .d1{font-size:clamp(40px,9vw,72px)}
  .d2{font-size:clamp(32px,6vw,48px)}
  .d3{font-size:clamp(26px,3.8vw,32px)}

  /* hero and case walls: a stacked wall with frames at real size */
  .hero,.cw{grid-template-columns:minmax(0,1fr);column-gap:0;padding:calc(var(--top-h) + 28px) var(--pad) var(--sec-h)}
  .hero .m1,.cw .m1{grid-area:1/1;justify-self:start;align-self:start;width:var(--fw-l);margin:0 0 30px}
  .hero .m2,.cw .m2{grid-area:1/1;justify-self:end;align-self:start;width:var(--fw-p);margin:var(--f-off) 1% 30px 0;z-index:2}
  .hero-copy,.cw-copy{grid-area:2/1;margin:var(--hc-t) 0 var(--hc-b)}
  .hero .m3{grid-area:3/1;justify-self:start;align-self:start;width:var(--fw-s);margin:var(--f-off) 0 30px 2%}
  .cw .m3{grid-area:3/1;justify-self:start;align-self:start;width:var(--fw-p);margin:var(--f-off) 0 30px 1%;z-index:2}
  .hero .m4,.cw .m4{grid-area:3/1;justify-self:end;align-self:start;width:var(--fw-l);margin:0 0 30px}
  .cw .pin.notepin.m5,.cw .m5{grid-area:4/1;justify-self:center;width:min(78%,420px);margin:20px 0 0}
  .cw .note p{font-size:16px}
  .hero{--fw-l:52vw;--fw-p:23vw;--fw-s:28vw;--f-off:56px;--hc-t:28px;--hc-b:40px}
  .cw{--fw-l:52vw;--fw-p:23vw;--f-off:56px;--hc-t:28px;--hc-b:40px}
  .cw-meta{align-items:center;gap:0 20px}
  .cw-meta .ann{font-size:12.5px}

  /* filmstrip becomes a horizontal snap row of real frames */
  .film{position:relative;grid-area:4/1;left:auto;right:auto;bottom:auto;height:auto;display:flex;justify-content:flex-start;gap:14px;margin:8px calc(-1 * var(--pad)) 0;padding:10px var(--pad) 12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .film::-webkit-scrollbar{display:none}
  .film span{flex:0 0 auto;width:var(--ft,30vw);height:auto;aspect-ratio:16/10;padding:5px;border:1px dashed var(--dash);background:transparent;scroll-snap-align:start}
  .film img{width:100%;height:100%;object-fit:cover;object-position:50% 0}

  /* staircase quote: left and right steps instead of justified rows */
  .stairq{font-size:6vw}
  .stairq .row{padding:0!important;flex-wrap:wrap;justify-content:flex-start;gap:0 .26em}
  .stairq .row:nth-child(even){justify-content:flex-end}
  .bars{display:none}

  /* selected work on tablet: two staggered columns of large frames */
  .feat{row-gap:64px;margin-top:56px}
  .f1{grid-column:4/13}
  .f2{grid-column:1/10;margin-top:0}
  .f3{grid-column:4/13;margin-top:0}
  .f4{grid-column:1/10;margin-top:0}
  .more-box{grid-column:10/13;align-self:end;justify-self:end;margin-top:0}

  /* process: a vertical sequence with a bold striped word */
  .proc-inner{padding:var(--sec-h) var(--pad);gap:28px}
  #proc-h .sw-text{font-size:18vw}
  .proc-track{gap:72px;margin-top:40px}
  .step{gap:24px;max-width:none}
  .step h3{font-size:clamp(40px,7vw,56px);margin-bottom:24px}
  .step figure{width:min(76%,460px);max-width:none;margin-left:auto}
  .step .crop{width:100%;margin-left:0;--mt:0px}

  /* stacked heads and two-part sections */
  .sh,.also,.rel,.fnote,.founder{display:block}
  .sh-side{margin-top:28px;max-width:520px}
  .also-list,.rel-board{margin-top:40px}
  .founder-card,.fnote .founder-card{margin-top:48px;max-width:440px}
  .rel-board{padding-top:16px}
  .rel-string{top:58px}

  /* services: outcome panels become pinned sheets with their artefacts in view */
  .panels{display:grid;gap:12px}
  .panel{position:relative;top:auto;height:auto;min-height:0;overflow:visible}
  .panel-inner{position:relative;inset:auto}
  .panel-dim{display:none}
  .panel-grid{position:relative;inset:auto;display:flex;flex-direction:column;gap:0;padding:56px var(--pad) 64px}
  .panel-art{order:-1;grid-column:auto;grid-row:auto;height:auto;margin:0 0 64px;align-self:stretch}
  .panel-art .a1{position:relative;top:auto;right:auto;left:auto;width:78%;margin:0;rotate:-1.2deg}
  .panel-art .a2{display:block;position:absolute;left:auto;right:2%;bottom:-36px;width:22%;rotate:2.4deg;z-index:2}
  .panel-art .a2 .ann{display:none}
  .panel-art .a1 .ann{margin-top:10px}
  .panel-text{grid-column:auto;grid-row:auto;max-width:620px}
  .panel-kind{font-size:13px;margin-bottom:16px}
  .panel h2{font-size:clamp(40px,8.4vw,68px)}
  .panel-body{font-size:17px;margin-top:18px}
  .panel .tags{margin-top:20px}

  /* products as notes: two up, the third centred */
  .notes{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 28px}
  .nw1{grid-column:1}
  .nw2{grid-column:2;margin-top:72px}
  .nw3{grid-column:1/-1;width:min(64%,460px);justify-self:center;margin-top:0}

  /* work wall: a stacked grid instead of a sideways scroller */
  .wall-view{overflow:visible;border:0}
  .wall-canvas{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 32px;padding:40px var(--pad) 56px;width:100%}
  .wi.big{grid-column:span 2}
  .wi:nth-child(3n+2),.wi:nth-child(4n+3){margin-top:0}
  .wall-hint{display:none}

  /* case study */
  .next .ann{display:block}
  .next .d1{display:block}
  .next .crop{margin-top:32px;width:min(78%,520px)}
  .phones{margin-top:56px}

  /* studio: the giant word sits above the dock */
  .giant{top:calc(100svh - var(--gh,22vw) - 84px)}
  .st-hero{min-height:calc(100svh - var(--gh,22vw) - 84px)}

  /* contact: the sheet gets the full width */
  .ct{display:block}
  .ct-left{padding-right:0}
  .sheet-wrap{margin-top:56px}

  /* footer */
  .foot-grid{gap:40px 24px}
  .foot-time{font-size:clamp(36px,7vw,56px)}
}

/* =================== tablet only (768-1023) =================== */
@media (min-width:768px) and (max-width:1023px){
  .film{--ft:28vw}
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr));font-size:16px}
  .fc1,.fc2,.fc3{grid-column:auto}
  .fc4{grid-column:1/-1;max-width:560px}
  .sheet{rotate:.4deg}
  .m3d{width:min(100%,440px)}
  .cta-mark{grid-column:1/6}
  .cta-copy{grid-column:6/13}
  .bu-wall{gap:56px 24px}
  .bu-card{grid-column:1/7}
  .bu-letter{grid-column:8/12;margin-top:40px}
  .bu-social{grid-column:2/6;margin-top:0}
  .bu-sign{grid-column:6/13;margin-top:24px}
  .jobs-list a{grid-template-columns:minmax(0,1fr) minmax(180px,26ch)}
}

/* =================== phone (<=767) =================== */
@media (max-width:767px){
  body{font-size:16px}
  .d-hero,.cw h1,.hero h1{font-size:clamp(40px,11.2vw,46px)}
  .d1{font-size:clamp(40px,11.4vw,46px)}
  .d2{font-size:clamp(32px,9vw,36px)}
  .d3{font-size:clamp(24px,6.8vw,28px)}
  .lead{font-size:19px;max-width:none}

  /* reading sizes: 17px body, 16px for card copy */
  .body,.hero-sub,.cta-copy p,.founder-card p,.panel-body,.faq .ans,.princ-list p,.rel-head p,.proc-lede{font-size:17px;line-height:1.55}
  .steps p,.wk-list p,.also-list p,.model p,.det dd,.nope-why,.jobs-list .jd,.note p,.pd li,.ct-now{font-size:16px}
  .jobs-list .jd{max-width:none}

  /* mono labels 13px on phones */
  .ann,.ph-label,.proj .case-flag,.wi .case-flag,.facts dt,.det dt,.field .opt,.browser .chrome span,.step-n,.panel-kind,.note .meta,.wk-w,.str-list .n,.steps .n,.wcount,.cw-meta .ann{font-size:13px}
  .tags li{font-size:12.5px;padding:8px 10px}
  .pin .ann,.proj>.ann{font-size:12.5px}

  /* hero wall: frames at 58 to 60vw, phones at 30vw */
  .hero{--fw-l:60vw;--fw-p:30vw;--fw-s:33vw;--f-off:44px;--hc-t:22px;--hc-b:28px}
  .cw{--fw-l:60vw;--fw-p:30vw;--f-off:44px;--hc-t:22px;--hc-b:28px}
  .cw .pin.notepin.m5,.cw .m5{width:min(84%,340px)}
  .hero-sub{margin-top:16px}
  .hero-cta{margin-top:24px;gap:12px}
  .film{--ft:46vw;gap:12px}

  /* quote */
  .stairq{font-size:8.4vw}

  /* selected work */
  .feat{display:flex;flex-direction:column;gap:56px;margin-top:40px}
  .f1,.f2,.f3{width:100%}
  .f4{width:86%;align-self:flex-end}
  .proj-cap{gap:12px;margin-top:14px}
  .proj h3{font-size:20px}
  .more-box{align-self:flex-start}

  /* jobs */
  .jobs h2{margin-bottom:32px}
  .jobs-list a{padding-top:22px;padding-bottom:22px}

  /* process: the word fills the width, bold stripes, fully vermilion once in view */
  #proc-h .sw-text{font-size:22vw;background-image:repeating-linear-gradient(to bottom,var(--accent) 0 .054em,transparent .054em .07em)}
  #proc-h .sw-text.idle{background-image:repeating-linear-gradient(to bottom,var(--idle) 0 .054em,transparent .054em .07em)}
  .proc-inner{gap:20px}
  .proc-track{gap:56px;margin-top:32px}
  .step h3{font-size:40px;margin-bottom:20px}
  .step figure{width:84%}

  /* founder and cta */
  .founder .big,.fnote blockquote p{font-size:clamp(30px,8.6vw,36px)}
  .founder-card,.fnote .founder-card{margin-top:40px}
  .fc-top{grid-template-columns:128px minmax(0,1fr)}
  .cta-mark{width:56%;margin:0 auto 36px}
  .cta-copy p{margin-top:20px}
  .cta-copy .cta-box{margin-top:28px}

  /* footer */
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px 20px;font-size:16px;margin-top:48px}
  .fc3,.fc4{grid-column:1/-1}
  .foot-mark{margin-top:56px}
  .foot-legal{font-size:14px}

  /* services panels on phones */
  .panel-grid{padding:44px var(--pad) 52px}
  .panel-art{margin-bottom:56px}
  .panel-art .a1{width:84%}
  .panel-art .a2{width:28%;right:0;bottom:-32px}
  .panel h2{font-size:clamp(40px,11.4vw,46px)}
  .sh-jump{gap:8px}

  /* products: one column, slight stagger */
  .notes{display:flex;flex-direction:column;gap:56px;margin-top:40px}
  .nw1,.nw2,.nw3{width:100%;margin-top:0}
  .nw2{width:92%;align-self:flex-end}
  .nw3{width:96%}
  .note h3{font-size:32px}

  .models-grid{gap:16px;margin-top:40px}
  .also-list li{padding:24px 0}
  .faq summary{font-size:19px;min-height:64px;padding:18px 0}

  /* work wall on phones: big frames full width, the rest two up with stacked captions */
  .wall-canvas{gap:40px 16px;padding:32px var(--pad) 48px}
  .wi-cap{flex-direction:column;align-items:flex-start;gap:4px}
  .wi-cap h3{font-size:17px}
  .wi.big .wi-cap{flex-direction:row;align-items:baseline;justify-content:space-between}
  .wi.big .wi-cap h3{font-size:21px}

  /* case study */
  .next .crop{width:86%}
  .phones{gap:20px}
  .facts div{padding:16px 16px 20px 0}
  .facts dd{font-size:16.5px}
  .cs-brief .d3,.cs-mobile .d3{margin-top:14px}

  /* studio */
  .nope h2{margin-bottom:28px}
  .princ-list li{padding-top:24px;padding-bottom:24px}
  .rel-board{gap:44px}

  /* contact */
  .sheet-wrap{margin-top:48px}
  .sheet{padding:28px 20px 32px}
  .m3d{margin-top:36px}
  .steps h2{margin-bottom:32px}
  .ct-now{margin-top:48px}
}

/* v3.3 fixes: nested tag lists are not rows; studio giant word clears the dock */
.also-list>li{display:grid}
.also-list .tags li{display:block;padding:7px 9px;border-top:0;background:var(--paper);font-size:12px}
@media (max-width:1023px){
  .giant{margin-bottom:84px}
  .st-hero{min-height:calc(100svh - var(--gh,22vw) - 84px)}
}
@media (max-width:767px){
  .also-list .tags li{font-size:12.5px;padding:8px 10px}
  .hero{--fw-s:28vw}
  .hero .m3{margin-left:0}
  .hero .m4{width:56vw}
}
/* wall pins share m1..m5 with the service models: keep the model styling off the pins */
.pin.m1,.pin.m2,.pin.m3{min-height:0;background:none;color:inherit}
.pin.m3 .ann{color:var(--muted)}
@media (max-width:1023px){
  .next-in{display:block}
  .next .crop{width:min(64%,520px);margin-left:auto;margin-right:4%}
}
@media (max-width:767px){
  .next .crop{width:86%;margin-right:2%}
}
/* the hidden checkbox covers its pill, so the input itself is the 44px target */
.checks input{inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.top-nav a.roll{min-width:44px;justify-content:center}
@media (max-width:1023px){
  .hero .m2 .ann,.cw .m2 .ann,.hero .m4 .ann,.cw .m4 .ann{left:auto;right:0;text-align:right}
  .hero .m3{margin-top:calc(var(--f-off) + 16px)}
}
/* studio on phones and tablets: the giant word rests under the intro instead of at the foot of an empty screen */
@media (max-width:1023px){
  .giant{top:calc(60svh - var(--gh,22vw));margin-bottom:0}
  .st-hero{min-height:calc(60svh - var(--gh,22vw))}
}
@media (max-width:767px){
  .giant{top:calc(56svh - var(--gh,22vw))}
  .st-hero{min-height:calc(56svh - var(--gh,22vw))}
}

/* services panels on desktop: the title keeps to its six columns, the phone pins to the right of the art */
@media (min-width:1024px){
  .panel-text{grid-column:1/7}
  .panel-art{grid-column:7/13}
  .panel h2{font-size:clamp(56px,6vw,104px)}
  .panel-body{max-width:38ch}
  .panel-art .a1{right:auto;left:0;width:86%}
  .panel-art .a2{left:auto;right:0;bottom:3%;width:22%}
}

/* work wall on phones: one frame per row at about 88vw, stepping left and right like pins on a wall */
@media (max-width:767px){
  .wall-canvas{grid-template-columns:minmax(0,1fr);gap:48px 0;padding:32px var(--pad) 56px}
  .wi,.wi.big{grid-column:1;width:88vw;max-width:100%;justify-self:start}
  .wi:nth-child(even){justify-self:end}
  .wi-cap,.wi.big .wi-cap{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px}
  .wi-cap h3,.wi.big .wi-cap h3{font-size:20px}
  .wi .wi-phone{right:-4px;bottom:52px;width:26%}
}

/* v3.4 fixes: menu case links keep their 44px box (they sit inside p.menu-cases) */
@media (max-width:1023px),(pointer:coarse){
  .menu-cases .u{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
}