@font-face{font-family:'Anton';font-style:normal;font-weight:400;src:url(../fonts/anton-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:200;src:url(../fonts/oswald-latin-200-normal.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:300;src:url(../fonts/oswald-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:400;src:url(../fonts/oswald-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;src:url(../fonts/oswald-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;src:url(../fonts/oswald-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;src:url(../fonts/oswald-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;src:url(../fonts/instrument-serif-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;src:url(../fonts/instrument-serif-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:300;src:url(../fonts/geist-sans-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;src:url(../fonts/geist-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;src:url(../fonts/geist-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;src:url(../fonts/geist-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;src:url(../fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:italic;font-weight:400;src:url(../fonts/jetbrains-mono-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;src:url(../fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:italic;font-weight:500;src:url(../fonts/jetbrains-mono-latin-500-italic.woff2) format('woff2')}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;src:url(../fonts/dm-serif-display-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;src:url(../fonts/dm-serif-display-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;src:url(../fonts/space-grotesk-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;src:url(../fonts/space-grotesk-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;src:url(../fonts/space-grotesk-latin-700-normal.woff2) format('woff2')}
:root{--bg:#0b0b0b;--fg:#f4f1ea;--dim:rgba(244,241,234,.5);--line:rgba(244,241,234,.13);--accent:#ffb31e;--aink:#0b0b0b;--motion:1;--display:"Anton",Impact,sans-serif;--sub:"Oswald","Arial Narrow",sans-serif;--sans:"Geist",-apple-system,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;--g:clamp(20px,4.5vw,64px);--max:1560px;--ease:cubic-bezier(.22,1,.36,1);--eo:cubic-bezier(.16,1,.3,1)}
[data-theme="light"]{--bg:#f4f1ea;--fg:#0b0b0b;--dim:rgba(11,11,11,.5);--line:rgba(11,11,11,.13);--aink:#f4f1ea}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .5s var(--ease),color .5s var(--ease)}
img,video,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--accent);color:var(--aink)}
.grain{pointer-events:none;position:fixed;inset:0;z-index:9990;opacity:.055;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* ---------- cursor ---------- */
.cur{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--accent);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease)}
.cur.on{width:38px;height:38px}
.cur.on::after{content:attr(data-l);position:absolute;inset:0;display:grid;place-items:center;padding:3px;text-align:center;line-height:1.05;font-family:var(--mono);font-size:6.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--aink)}
/* normal pointer stays visible under the orange dot */
@media (hover:none){.cur{display:none}}
input,textarea{cursor:text!important}

/* ---------- page transition curtain ---------- */
.curtain{position:fixed;inset:0;z-index:9995;background:var(--accent);pointer-events:none;transform:translateY(100%);display:grid;place-items:center}
.curtain.up{animation:cUp .62s var(--eo) forwards}
.curtain.down{animation:cDown .62s var(--eo) forwards}
@keyframes cUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes cDown{from{transform:translateY(0)}to{transform:translateY(-100%)}}
.curtain span{font-family:var(--display);font-size:clamp(40px,9vw,120px);color:var(--aink);letter-spacing:-.03em;opacity:0}
.curtain.up span{animation:cIn .5s var(--eo) .12s forwards}
@keyframes cIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;padding:20px var(--g);display:flex;align-items:center;justify-content:space-between;mix-blend-mode:difference;color:#f4f1ea}
.nav .mark{font-family:var(--display);font-size:20px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.nav .mark i{width:7px;height:7px;border-radius:50%;background:var(--accent);display:block}
.nav ul{display:flex;gap:6px;align-items:center}
.nav ul a{position:relative;display:block;padding:8px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;overflow:hidden;height:32px}
/* letter-roll hover (nithin-style) */
.roll{display:flex;height:16px;overflow:hidden}
.roll b{display:block;font-weight:400;transition:transform .34s var(--eo)}
.roll b::after{content:attr(data-c);display:block}
.nav ul a:hover .roll b,.nav ul a.on .roll b{transform:translateY(-16px)}
.nav ul a.on{color:var(--accent)}
.nav .burger{display:none;width:38px;height:38px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.nav .burger s{width:20px;height:1.5px;background:currentColor;display:block;transition:transform .3s var(--ease)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:120px var(--g) 124px;overflow:hidden;text-align:center}
.hero .scribble{position:absolute;top:14%;left:6%;width:clamp(90px,13vw,190px);color:var(--accent);opacity:.85;pointer-events:none}
.hero .portrait{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) translate3d(0,var(--pxY,0px),0);width:min(clamp(230px,26vw,400px),42vh);height:min(clamp(310px,35vw,540px),56vh);border-radius:200px 200px 8px 8px;overflow:hidden;z-index:1;filter:saturate(.85) contrast(1.05)}
.hero .portrait .ph span{position:absolute;bottom:14px;left:0;right:0;padding:0 12px;font-size:9px;line-height:1.5}
.hero .portrait img{width:100%;height:100%;object-fit:cover}
.hero h1{position:relative;z-index:2;font-family:var(--sub);font-weight:400;font-size:min(clamp(58px,15.5vw,270px),20vh);line-height:.96;letter-spacing:-.045em;text-transform:uppercase;mix-blend-mode:difference;color:#f4f1ea;pointer-events:none}
.hero h1 .ln{display:block;overflow:hidden;padding:0 .14em .26em;margin:0 -.14em -.22em}
.hero h1 .ln>span{display:block;transform:translateY(105%);animation:rise 1.05s var(--eo) forwards}
.hero h1 .ln:nth-child(2)>span{animation-delay:.13s}
@keyframes rise{to{transform:translateY(0)}}
.hero .roles{position:relative;z-index:2;margin-top:clamp(20px,3vw,40px);display:flex;flex-wrap:wrap;gap:8px;justify-content:center;opacity:0;animation:fu .8s var(--eo) .5s forwards}
.hero .roles span{font-family:var(--mono);font-size:clamp(9px,1.05vw,12px);letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:color-mix(in oklab,var(--bg) 62%,transparent);backdrop-filter:blur(6px)}
@keyframes fu{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.hero .cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fu .8s var(--eo) .8s forwards}
.hero .cue i{display:block;width:1px;height:36px;background:linear-gradient(var(--accent),transparent);animation:drop calc(2.2s/var(--motion)) ease-in-out infinite}
@keyframes drop{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ---------- statement ---------- */
.stmt{padding:clamp(90px,16vw,220px) var(--g);position:relative}
.stmt .in{max-width:var(--max);margin:0 auto;font-family:var(--display);font-weight:var(--dw,400);font-size:clamp(34px,7vw,110px);line-height:1.12;letter-spacing:-.03em}
.stmt .in .hl{position:relative;display:inline-block;color:var(--accent)}
.stmt .in .hl svg{position:absolute;left:-4%;right:-4%;bottom:-.06em;width:108%;height:.34em;color:var(--accent);opacity:.55}
.stmt .swap{display:inline-grid;vertical-align:baseline;text-align:left}
.stmt .swap>em{grid-area:1/1;font-style:italic;color:var(--accent);opacity:0;transition:opacity .5s var(--ease),transform .5s var(--ease);transform:translateY(.22em)}
.stmt .swap>em.act{opacity:1;transform:translateY(0)}
.stmt .sub{max-width:var(--max);margin:clamp(32px,5vw,56px) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px)}
.stmt .sub p{font-family:var(--sub);font-weight:300;font-size:clamp(16px,1.25vw,20px);letter-spacing:.005em;line-height:1.55;color:var(--dim);max-width:46ch}

/* ---------- full-bleed parallax band ---------- */
.band-wrap{padding:0 var(--g)}
.band{position:relative;height:clamp(340px,72vh,860px);overflow:hidden;margin:0 auto;border-radius:10px}
.band .inner{position:absolute;inset:-14% 0;transform:translate3d(0,var(--pxY,0px),0);will-change:transform}
.band .inner img,.band .inner video{width:100%;height:100%;object-fit:cover}
.band .cap{position:absolute;left:20px;bottom:20px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:rgba(11,11,11,.55);backdrop-filter:blur(10px);color:#f4f1ea;padding:8px 12px;border-radius:999px;z-index:3}
/* letterboxed video band — whole frame visible, no crop */
.band.fit{height:auto;aspect-ratio:16/9;max-height:76vh;max-width:calc(76vh * 16 / 9);background:#000}
.band.fit .inner{position:absolute;inset:0;transform:none}
.band.fit video{width:100%;height:100%;object-fit:contain}
/* audio toggle */
.atg{position:absolute;right:20px;bottom:20px;z-index:4;display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;border:1px solid rgba(244,241,234,.28);background:rgba(11,11,11,.6);backdrop-filter:blur(10px);color:#f4f1ea;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.atg:hover{background:var(--accent);border-color:var(--accent);color:var(--aink)}
.atg svg{flex:none}
.vctl{position:absolute;right:20px;bottom:20px;z-index:4;display:flex;gap:8px}
.vctl .atg{position:static}

/* ---------- section head ---------- */
.sh{max-width:var(--max);margin:0 auto;padding:clamp(80px,13vw,180px) var(--g) clamp(36px,5vw,64px);display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,64px);align-items:end}
.sh .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:10px;margin-bottom:20px}
.sh .k i{width:6px;height:6px;border-radius:50%;background:var(--accent);display:block;animation:pl calc(2.4s/var(--motion)) ease-in-out infinite}
@keyframes pl{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.65)}}
.sh h2{font-family:var(--display);font-weight:var(--dw,400);font-size:clamp(38px,7.5vw,120px);line-height:1.04;letter-spacing:-.035em}
.sh h2 em{font-style:italic;color:var(--accent)}
.sh p{font-size:clamp(14px,1.1vw,17px);line-height:1.6;color:var(--dim);max-width:44ch;justify-self:end}

/* ---------- project list (hover reveal) ---------- */
.plist{max-width:var(--max);margin:0 auto;padding:0 var(--g) clamp(60px,10vw,140px);position:relative}
.prow{display:grid;grid-template-columns:1fr auto;gap:clamp(16px,3vw,48px);align-items:center;padding:clamp(22px,3.2vw,40px) 0;border-top:1px solid var(--line);position:relative;z-index:2}
.prow:last-child{border-bottom:1px solid var(--line)}
.prow .yr{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim);transition:color .4s var(--ease)}
.prow .ttl{display:flex;flex-direction:column;gap:6px;min-width:0}
.prow .ttl h3{font-family:var(--sub);font-weight:500;text-transform:uppercase;font-size:clamp(26px,4.8vw,74px);line-height:.98;letter-spacing:-.03em;transition:transform .5s var(--eo),color .4s var(--ease)}
.prow .ttl h3 em{font-style:normal;font-weight:300;color:var(--dim);transition:color .4s var(--ease)}
.prow .ttl .cats{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);transition:transform .5s var(--eo) .03s,color .4s var(--ease)}
.prow .go{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);opacity:0;transform:translateX(-14px);transition:opacity .4s var(--ease),transform .4s var(--eo),color .4s var(--ease);white-space:nowrap}
.prow::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--eo)}
.plist:hover .prow{opacity:.34;transition:opacity .4s var(--ease)}
.plist:hover .prow.hot{opacity:1}
.prow.hot::before{transform:scaleX(1)}
.prow.hot h3{color:var(--accent);transform:translateX(14px)}
.prow.hot h3 em{color:color-mix(in oklab,var(--accent) 55%,var(--fg))}
.prow.hot .cats{transform:translateX(14px)}
.prow.hot .yr{color:var(--accent)}
.prow.hot .go{opacity:1;transform:translateX(0);color:var(--accent)}
/* floating hover thumb */
.thumb{position:fixed;top:0;left:0;width:clamp(220px,20vw,340px);aspect-ratio:4/3;pointer-events:none;z-index:60;border-radius:8px;overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.9) rotate(-3deg);transition:opacity .3s var(--ease),transform .45s var(--eo);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.thumb.vis{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-2deg)}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover}
@media (hover:none){.thumb{display:none}.plist:hover .prow{opacity:1}}

/* mobile project cards */
.pcards{display:none}

/* ---------- big footer ---------- */
.foot{position:relative;padding:clamp(70px,11vw,150px) var(--g) 28px;border-top:1px solid var(--line);overflow:hidden}
.foot .lets{max-width:var(--max);margin:0 auto}
.foot .lets .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:24px;display:flex;align-items:center;gap:10px}
.foot .lets .k i{width:6px;height:6px;border-radius:50%;background:var(--accent);display:block;animation:pl calc(2.4s/var(--motion)) ease-in-out infinite}
.foot .lets h2{font-family:var(--display);font-weight:var(--dw,400);font-size:clamp(40px,9vw,150px);line-height:1.06;letter-spacing:-.04em;margin-bottom:clamp(32px,5vw,60px)}
.foot .lets h2 em{font-style:italic;color:var(--accent)}
.reach{display:inline-flex;align-items:center;gap:14px;padding:18px 30px;border-radius:999px;border:1px solid var(--fg);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;position:relative;overflow:hidden;transition:color .4s var(--ease)}
.reach>*{position:relative;z-index:2}
.reach::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .45s var(--eo);z-index:1}
.reach:hover{color:var(--aink);border-color:var(--accent)}
.reach:hover::before{transform:translateY(0)}
.foot .word{max-width:var(--max);margin:clamp(96px,13vw,180px) auto 0;font-family:var(--display);font-weight:var(--dw,400);font-size:clamp(46px,17vw,250px);line-height:.9;letter-spacing:-.045em;text-transform:uppercase;color:var(--fg);opacity:.1;pointer-events:none;user-select:none;white-space:nowrap;transform:translate3d(0,var(--pxY,0px),0)}
.fgrid{max-width:var(--max);margin:clamp(40px,6vw,70px) auto 0;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-bottom:44px;border-bottom:1px solid var(--line)}
.fgrid h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:14px;font-weight:400}
.fgrid p{font-size:14px;line-height:1.6;color:var(--dim);max-width:34ch}
.fgrid li{padding:5px 0;font-size:14px}
.fgrid li a{position:relative}
.fgrid li a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.fgrid li a:hover{color:var(--accent)}
.fgrid li a:hover::after{transform:scaleX(1)}
.fbase{max-width:var(--max);margin:20px auto 0;display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.fbase i{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:8px;animation:pl calc(2.4s/var(--motion)) ease-in-out infinite}

/* ---------- works index ---------- */
.wtop{padding:clamp(120px,17vw,220px) var(--g) clamp(30px,4vw,50px);max-width:var(--max);margin:0 auto}
.wtop h1{font-family:var(--display);font-weight:var(--dw,400);font-size:clamp(48px,12vw,190px);line-height:1.0;letter-spacing:-.04em;text-transform:uppercase}
.wtop h1 em{font-style:italic;color:var(--accent)}
.wtop .meta{margin-top:clamp(24px,4vw,44px);display:grid;grid-template-columns:repeat(3,auto);gap:clamp(20px,4vw,70px);justify-content:start;padding-top:22px;border-top:1px solid var(--line)}
.wtop .meta div span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.wtop .meta div b{font-weight:500;font-size:15px}
.chips{max-width:var(--max);margin:0 auto;padding:0 var(--g) clamp(24px,4vw,40px);display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 15px;border:1px solid var(--line);border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);transition:all .3s var(--ease)}
.chip:hover{border-color:var(--fg);color:var(--fg)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--aink)}
.chip u{text-decoration:none;opacity:.55;margin-left:6px}

/* ---------- case study ---------- */
.cs{padding-top:clamp(110px,15vw,180px)}
.crumb{max-width:var(--max);margin:0 auto;padding:0 var(--g);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:flex;gap:10px;align-items:center}
.crumb a:hover{color:var(--accent)}
.crumb s{text-decoration:none;color:var(--accent)}
.crumb b{color:var(--fg);font-weight:400}
.chead{max-width:var(--max);margin:0 auto;padding:clamp(28px,4.5vw,56px) var(--g) 0}
.chead h1{font-family:var(--display);font-weight:var(--dw,400);font-size:clamp(46px,11vw,170px);line-height:1.0;letter-spacing:-.04em;text-transform:uppercase}
.chead h1 em{display:block;font-style:italic;color:var(--accent);font-size:.44em;letter-spacing:-.02em;text-transform:none;margin-top:.18em}
.chead .tags{margin-top:clamp(22px,3.5vw,40px);display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.chead .tags s{text-decoration:none;opacity:.4}
.cintro{max-width:var(--max);margin:0 auto;padding:clamp(40px,6vw,80px) var(--g) clamp(30px,5vw,60px);display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.cintro>p,.cin-l>p{font-size:clamp(19px,2.2vw,34px);line-height:1.34;letter-spacing:-.015em;color:var(--fg);text-wrap:pretty}
.cintro>p strong,.cin-l>p strong{font-weight:400;font-family:var(--display);color:var(--accent);font-size:1.06em}
.csvc h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:14px;font-weight:400}
.csvc ul{border-top:1px solid var(--line)}
.csvc li{padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;display:flex;justify-content:space-between;gap:12px}
.csvc li u{text-decoration:none;font-family:var(--mono);font-size:10px;color:var(--dim)}
.clive{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:13px 20px;border:1px solid var(--accent);border-radius:999px;color:var(--accent);font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;transition:all .35s var(--ease)}
.clive:hover{background:var(--accent);color:var(--aink)}
.clive.alt{border-color:var(--line);color:var(--dim);margin-top:10px}
.clive.alt:hover{border-color:var(--fg);background:transparent;color:var(--fg)}
.cblocks{max-width:var(--max);margin:0 auto;padding:clamp(60px,9vw,130px) var(--g);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px);border-top:1px solid var(--line)}
.cblocks .b h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;font-weight:400}.cblocks .b p{font-size:clamp(14px,1.1vw,17px);line-height:1.65;color:var(--dim);text-wrap:pretty}
.cshots{max-width:var(--max);margin:0 auto;padding:0 var(--g) clamp(60px,9vw,130px);display:flex;flex-direction:column;gap:clamp(14px,2.2vw,32px)}
.shot{position:relative;border-radius:10px;overflow:hidden;background:color-mix(in oklab,var(--fg) 5%,var(--bg))}
.shot img,.shot video{width:100%;height:auto;display:block}
.shot.isvid{background:#000}
.shot.isvid video{width:100%;height:auto;max-height:78vh;object-fit:contain}
.shot.isvid .cap{opacity:1;transform:none;bottom:auto;top:16px}
.shot .cap{position:absolute;left:16px;bottom:16px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;background:rgba(11,11,11,.6);backdrop-filter:blur(10px);color:#f4f1ea;padding:7px 11px;border-radius:999px;opacity:0;transform:translateY(6px);transition:all .4s var(--ease)}
.shot:hover .cap{opacity:1;transform:translateY(0)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.2vw,32px)}
.pair .shot{display:flex}
.pair .shot img{object-fit:cover;height:100%;width:100%}
/* impact band */
.cimpact{background:var(--accent);color:var(--aink);padding:clamp(60px,10vw,140px) var(--g)}
.cimpact .in{max-width:var(--max);margin:0 auto}
.cimpact .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;display:flex;align-items:center;gap:10px;margin-bottom:22px}
.cimpact .k i{width:6px;height:6px;border-radius:50%;background:var(--aink);display:block}
.cimpact h2{font-family:var(--display);font-weight:var(--dw,400);font-size:clamp(26px,3.6vw,54px);line-height:1.14;letter-spacing:-.02em;max-width:32ch;margin-bottom:clamp(40px,6vw,80px);text-wrap:pretty}
.cimpact .stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(0,0,0,.22)}
.cimpact .st{padding:30px 24px 30px 0;border-right:1px solid rgba(0,0,0,.22)}
.cimpact .st:last-child{border-right:0}
.cimpact .st b{display:block;font-family:var(--display);font-weight:var(--dw,400);font-size:clamp(34px,5.6vw,88px);line-height:1.05;letter-spacing:-.03em}
.cimpact .st span{display:block;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;line-height:1.5}
/* placeholder shot for projects without imagery */
.ph{aspect-ratio:16/9;display:grid;place-items:center;position:relative;background:color-mix(in oklab,var(--fg) 7%,var(--bg))}
.ph::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,transparent 0 16px,color-mix(in oklab,var(--fg) 5%,transparent) 16px 17px)}
.ph span{position:relative;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:center;padding:20px}
.cnext{border-top:1px solid var(--line);padding:clamp(50px,8vw,110px) var(--g)}
.cnext .in{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.cnext .k{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.cnext h2{font-family:var(--display);font-weight:var(--dw,400);font-size:clamp(34px,7vw,110px);line-height:.92;letter-spacing:-.035em;text-transform:uppercase;transition:color .4s var(--ease)}
.cnext .in:hover h2{color:var(--accent)}
.cnext h2 em{font-style:italic;color:var(--accent);text-transform:none}
.totop{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.totop:hover{color:var(--accent)}

/* ---------- about / contact ---------- */
.atop{padding:clamp(120px,17vw,220px) var(--g) clamp(40px,6vw,70px);max-width:var(--max);margin:0 auto}
.atop h1{font-family:var(--display);font-weight:var(--dw,400);font-size:clamp(44px,10vw,165px);line-height:1.0;letter-spacing:-.04em;max-width:15ch;text-transform:uppercase}
.atop h1 em{font-style:italic;color:var(--accent);text-transform:none}
.abody{max-width:var(--max);margin:0 auto;padding:0 var(--g) clamp(60px,9vw,120px);display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,90px);align-items:start}
.aport{border-radius:200px 200px 10px 10px;overflow:hidden;aspect-ratio:3/4;position:sticky;top:100px;transform:translate3d(0,var(--pxY,0px),0)}
.acopy p{font-size:clamp(15px,1.35vw,21px);line-height:1.62;color:var(--dim);margin-bottom:20px;max-width:52ch}
.acopy p:first-child{font-size:clamp(19px,2vw,30px);line-height:1.36;color:var(--fg);letter-spacing:-.015em;font-family:var(--display)}
.tline{max-width:var(--max);margin:0 auto;padding:clamp(50px,8vw,110px) var(--g);border-top:1px solid var(--line)}
.trow{display:grid;grid-template-columns:120px 1fr auto;gap:24px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline;transition:padding .4s var(--ease)}
.trow:hover{padding-left:12px}
.trow .y{font-family:var(--mono);font-size:11px;color:var(--dim)}
.trow .r{font-family:var(--display);font-size:clamp(20px,2.8vw,38px);line-height:1.1;letter-spacing:-.02em}
.trow .r u{text-decoration:none;color:var(--dim)}
.trow .p{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.cgrid{max-width:var(--max);margin:0 auto;padding:0 var(--g) clamp(50px,8vw,110px)}
.cgrid .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:20px}
.cgrid .g{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cgrid .g div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(20px,3vw,38px) 14px;display:grid;place-items:center;font-family:var(--display);font-size:clamp(15px,1.7vw,24px);color:var(--dim);text-align:center;transition:all .35s var(--ease)}
.cgrid .g div:hover{background:var(--accent);color:var(--aink)}
.ctc{max-width:var(--max);margin:0 auto;padding:0 var(--g) clamp(60px,9vw,120px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px)}
.ch{padding:26px 0;border-bottom:1px solid var(--line)}
.ch span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.ch a{font-family:var(--display);font-size:clamp(24px,3.4vw,50px);line-height:1.06;letter-spacing:-.025em;display:inline-flex;align-items:center;gap:14px;transition:color .35s var(--ease)}
.ch a:hover{color:var(--accent)}
.ch a svg{transition:transform .35s var(--eo)}
.ch a:hover svg{transform:translate(4px,-4px)}
.fcard{padding:clamp(26px,3.5vw,40px);border:1px solid var(--line);border-radius:12px}
.fcard label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.fcard input,.fcard textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0 14px;font-family:var(--sans);font-size:17px;color:var(--fg);margin-bottom:22px;outline:none;transition:border-color .3s var(--ease)}
.fcard input::placeholder,.fcard textarea::placeholder{color:var(--dim)}
.fcard input:focus,.fcard textarea:focus{border-color:var(--accent)}
.fcard textarea{resize:vertical;min-height:92px}
.sent{display:grid;place-items:center;text-align:center;min-height:360px}
.sent h3{font-family:var(--display);font-size:clamp(28px,3.4vw,44px);font-weight:var(--dw,400);letter-spacing:-.025em;margin:20px 0 10px}
.sent h3 em{font-style:italic;color:var(--accent)}
.sent p{color:var(--dim);max-width:30ch;line-height:1.55;margin:0 auto}

/* ---------- marquee ---------- */
.mq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:clamp(18px,2.6vw,32px) 0;white-space:nowrap}
.mq .t{display:inline-flex;gap:52px;animation:sc calc(46s/var(--motion)) linear infinite;will-change:transform}
.mq .t>span{display:inline-flex;align-items:center;gap:52px;font-family:var(--display);font-size:clamp(30px,5.5vw,80px);line-height:1;letter-spacing:-.025em}
.mq .t svg{color:var(--accent);flex:none}
@keyframes sc{to{transform:translateX(-50%)}}
.mq.rev .t{animation-direction:reverse}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(clamp(24px,4vw,56px));transition:opacity calc(1.05s*var(--motion)) var(--eo),transform calc(1.05s*var(--motion)) var(--eo)}
.rv.in{opacity:1;transform:none}
.rvw{display:block;overflow:hidden;padding-bottom:.24em;margin-bottom:-.2em}
.rvw>span{display:block;transform:translateY(105%);transition:transform calc(1s*var(--motion)) var(--eo)}
.rvw.in>span{transform:none}

/* ---------- mobile menu ---------- */
.mm{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:90px var(--g) 40px;transform:translateY(-101%);transition:transform .55s var(--eo),visibility 0s linear .55s;visibility:hidden;pointer-events:none;overflow:hidden}
.mm.open{transform:none;visibility:visible;pointer-events:auto;transition:transform .55s var(--eo),visibility 0s}
.mm a{font-family:var(--display);font-size:clamp(40px,13vw,80px);letter-spacing:-.035em;padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;text-transform:uppercase}
.mm a u{text-decoration:none;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim)}
.mmx{position:absolute;top:22px;right:var(--g);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- progress bar ---------- */
.prog{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:150;width:0;transition:width .1s linear}

/* ---------- testimonials ---------- */
.tst{border-top:1px solid var(--line);padding-bottom:clamp(60px,9vw,130px)}
.ttrack{max-width:var(--max);margin:0 auto;padding:0 var(--g);display:grid;grid-auto-flow:column;grid-auto-columns:clamp(280px,31%,420px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--g);scrollbar-width:none}
.ttrack::-webkit-scrollbar{display:none}
.tcard{scroll-snap-align:start;display:flex;flex-direction:column;gap:24px;padding:clamp(24px,2.6vw,36px);border:1px solid var(--line);border-radius:10px;background:color-mix(in oklab,var(--fg) 3%,var(--bg));transition:border-color .4s var(--ease)}
.tcard:hover{border-color:color-mix(in oklab,var(--accent) 60%,transparent)}
.tcard .stars{color:var(--accent);letter-spacing:.18em;font-size:14px}
.tcard blockquote{font-family:var(--display);font-size:clamp(20px,1.7vw,26px);line-height:1.3;letter-spacing:-.01em;flex:1;text-wrap:pretty}
.tcard figcaption{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--line)}
.tcard figcaption img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;filter:grayscale(1);transition:filter .4s var(--ease)}
.tcard:hover figcaption img{filter:none}
.tcard figcaption b{display:block;font-weight:500;font-size:15px}
.tcard figcaption span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:4px;line-height:1.5}
.tnav{max-width:var(--max);margin:28px auto 0;padding:0 var(--g);display:flex;gap:10px;justify-content:flex-end}
.tnav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:16px;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.tnav button:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
@media (max-width:720px){.ttrack{grid-auto-columns:84%}}
/* ---------- responsive ---------- */
@media (max-width:1024px){
.stmt .sub,.sh,.cintro,.abody,.ctc{grid-template-columns:1fr}
.sh p{justify-self:start}
.cblocks{grid-template-columns:1fr;gap:32px}
.fgrid{grid-template-columns:1fr 1fr}
.cgrid .g{grid-template-columns:repeat(3,1fr)}
.cimpact .stats{grid-template-columns:1fr}
.cimpact .st{border-right:0;border-bottom:1px solid rgba(0,0,0,.22);padding-right:0}
.aport{position:static;max-width:420px}
.prow{grid-template-columns:1fr}
.prow .go{display:none}
.wtop .meta{grid-template-columns:1fr 1fr}
.pair{grid-template-columns:1fr}
}
@media (max-width:720px){
.nav ul{display:none}
.nav .burger{display:flex}
.hero{min-height:92svh}
.hero .portrait{width:clamp(190px,58vw,270px);height:clamp(250px,76vw,360px)}
.hero .scribble{top:11%;left:4%;width:80px}
.plist:hover .prow{opacity:1}
.prow{grid-template-columns:1fr;gap:10px;padding:20px 0}
.prow .yr{order:-1}
.prow.hot h3,.prow.hot .cats{transform:none}
.fgrid{grid-template-columns:1fr;gap:26px}
.fbase{flex-direction:column;gap:10px}
.cgrid .g{grid-template-columns:repeat(2,1fr)}
.band.fit{max-height:56vh;max-width:calc(56vh * 16 / 9)}
.atg span{display:none}
.atg{padding:10px;gap:0}
.trow{grid-template-columns:1fr;gap:4px}
.trow .y{order:-1}
.cnext .in{flex-direction:column;align-items:flex-start}
.wtop .meta{grid-template-columns:1fr;gap:14px}
.foot .word{font-size:20vw}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* short + landscape viewports: scale the hero to height, drop the cue */
@media (max-height:700px){
.hero{padding-top:84px;padding-bottom:84px}
.hero .roles{margin-top:16px;gap:6px}
.hero .roles span{font-size:9px;padding:6px 11px}
.hero .cue{display:none}
.hero .scribble{width:clamp(64px,9vh,110px)}
}
@media (max-height:460px){
.hero{padding-top:70px;padding-bottom:44px}
.hero .roles{display:none}
.hero .portrait{opacity:.75}
}

/* ---------- hero: pinned hexagon dissolve (white → page color on scroll) ---------- */
.hx{position:relative;height:200svh}
.hero.dissolve{position:sticky;top:0;height:100svh;min-height:0;--hp:0}
.hero.dissolve .hexcv{position:absolute;inset:0;z-index:0;display:block;pointer-events:none}
.hero.dissolve h1{transform:translate3d(0,calc(var(--hp) * -7vh),0) scale(calc(1 - var(--hp) * .05))}
.hero.dissolve .scribble{z-index:2;mix-blend-mode:difference;color:#f4f1ea;transform:translate3d(0,calc(var(--hp) * -26vh),0) rotate(calc(var(--hp) * -10deg))}
.hero.dissolve .roles{mix-blend-mode:difference;transform:translate3d(0,calc(var(--hp) * -3vh),0)}
.hero.dissolve .roles span{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:rgba(244,241,234,.45);color:#f4f1ea}
.hero.dissolve .cue{z-index:2;mix-blend-mode:difference;color:#f4f1ea}
.hero.dissolve .cue>*{opacity:calc(1 - max(0, var(--hp) - .65) * 3.2)}
.hero.dissolve .cue{display:flex;font-size:clamp(12px,1vw,14px);letter-spacing:.24em;gap:12px;bottom:clamp(24px,4vh,40px)}
.hero.dissolve .cue i{width:2px;height:clamp(48px,7vh,72px)}
/* optical centering: cancel the trailing letter-spacing on each centered line */
.hero.dissolve h1 .ln>span{padding-right:.045em}
.hero.dissolve .roles{justify-content:center;width:100%}
.hero.dissolve .roles span{padding-left:calc(14px + .12em)}
.hero.dissolve .cue{width:max-content;align-items:center;left:0;right:0;margin-inline:auto}
.hero.dissolve .cue span{margin-right:-.24em}
@media (max-width:760px){.hero.dissolve{min-height:0}}
@media (prefers-reduced-motion:reduce){.hx{height:auto}.hero.dissolve{position:relative}}

/* ---------- responsive pass: tablet + phone ---------- */
/* footer wordmark always fits edge to edge (it was clipping on phones) */
.foot .word{font-size:min(250px,calc((100vw - var(--g) * 2) / 5.5))}
/* portrait tablets + phones: bigger name in the header */
@media (max-width:1024px) and (orientation:portrait),(max-width:720px){
.hero h1{font-size:min(23vw,21vh)}
}
/* tablets: keep two-up layouts instead of stacking everything */
@media (min-width:721px) and (max-width:1024px){
.stmt .sub{grid-template-columns:1fr 1fr}
.pair{grid-template-columns:1fr 1fr}
.cimpact .stats{grid-template-columns:repeat(3,1fr)}
.cimpact .st{border-bottom:0;border-right:1px solid rgba(0,0,0,.22);padding-right:20px}
.cimpact .st:last-child{border-right:0}
}
/* phones */
@media (max-width:720px){
.foot .word{font-size:calc((100vw - var(--g) * 2) / 5.5)}
.fgrid{grid-template-columns:1fr 1fr;gap:28px 20px}
.fgrid>div:first-child{grid-column:1/-1}
.band .cap{top:12px;bottom:auto;left:12px;max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vctl{right:12px;bottom:12px}
}
/* portrait tablets + phones: wide cover images keep their shape instead of a tall crop */
@media (max-width:1024px) and (orientation:portrait){
.band:not(.fit){height:auto;aspect-ratio:16/10}
.band:not(.fit) .inner{inset:0;transform:none}  /* no parallax crop on portrait screens */
}
/* project list thumbnails — only on touch screens, which can't use the hover preview */
.prow .rthumb{display:none}
@media (hover:none){
.prow{grid-template-columns:auto 1fr auto}
.prow .rthumb{display:block;width:clamp(108px,18vw,184px);aspect-ratio:3/2;border-radius:8px;overflow:hidden;background:var(--line)}
.prow .rthumb img{width:100%;height:100%;object-fit:cover;display:block}
}
@media (hover:none) and (max-width:1024px){
.prow{grid-template-columns:auto 1fr;gap:clamp(14px,3vw,28px);align-items:center}
.prow .yr{order:0}
}
@media (hover:none) and (max-width:720px){
.prow .ttl h3{font-size:clamp(20px,6vw,26px)}
.prow .ttl .cats{font-size:9px}
}

/* ---------- disciplines: tiles ---------- */
.ctiles{max-width:var(--max);margin:0 auto;padding:0 var(--g);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.ctile{display:flex;flex-direction:column;gap:14px;cursor:pointer}
.ctile .ctimg{display:block;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:color-mix(in oklab,var(--fg) 6%,var(--bg))}
.ctile .ctimg img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.35);transform:scale(1.02);transition:transform .8s var(--eo),filter .5s var(--ease)}
.ctile:hover .ctimg img{transform:scale(1.07);filter:none}
.ctile .ctxt{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.ctile .ctxt u{text-decoration:none;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--accent)}
.ctile .ctxt b{font-family:var(--sub);font-weight:500;text-transform:uppercase;font-size:clamp(20px,2vw,30px);line-height:1;letter-spacing:-.02em;transition:color .3s var(--ease)}
.ctile:hover .ctxt b{color:var(--accent)}
.ctile .ctxt i{font-style:normal;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* ---------- discipline page ---------- */
.catp{padding-top:clamp(110px,15vw,180px)}
.cathead{max-width:var(--max);margin:0 auto;padding:clamp(28px,4.5vw,56px) var(--g) 0}
.cathead h1{font-family:var(--display);font-weight:var(--dw,400);font-size:clamp(44px,9.5vw,150px);line-height:1;letter-spacing:-.04em;text-transform:uppercase;text-wrap:balance}
.cathead .cstate{margin-top:clamp(20px,3vw,34px);max-width:52ch;font-family:var(--sub);font-weight:300;font-size:clamp(18px,1.7vw,26px);line-height:1.45;color:color-mix(in oklab,var(--fg) 82%,var(--bg))}
.cathead .chips{padding:clamp(28px,4vw,44px) 0 0;margin:0}
.crows{max-width:var(--max);margin:0 auto;padding:clamp(40px,6vw,80px) var(--g) clamp(60px,9vw,120px);display:flex;flex-direction:column;gap:clamp(56px,8vw,110px)}
.crow{min-width:0}
.crow-h{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(280px,auto);gap:clamp(18px,3vw,48px);align-items:end;padding-bottom:clamp(16px,2vw,24px);border-bottom:1px solid var(--line);margin-bottom:clamp(14px,1.8vw,22px)}
.crow-t h3{font-family:var(--sub);font-weight:500;text-transform:uppercase;font-size:clamp(24px,3vw,44px);line-height:1;letter-spacing:-.025em}
.crow-t h3 em{display:block;font-style:normal;font-weight:300;color:var(--dim);font-size:.62em;margin-top:6px;letter-spacing:-.01em}
.crow-t .meta{display:block;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.crow-h p{font-size:15px;line-height:1.6;color:color-mix(in oklab,var(--fg) 72%,var(--bg));max-width:46ch}
.crow-a{display:flex;align-items:center;gap:14px;justify-self:end}
.crow-a .clive{margin-top:0;white-space:nowrap}
.cnav{display:inline-flex;gap:8px;margin-left:auto}
.cnav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:16px;color:var(--fg);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease)}
.cnav button:hover:not(:disabled){background:var(--fg);color:var(--bg);border-color:var(--fg)}
.cnav button:disabled{opacity:.25;cursor:default}
.ctrack{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * var(--cg)) / 4);gap:var(--cg);--cg:clamp(10px,1.2vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.ctrack::-webkit-scrollbar{display:none}
.citem{margin:0;scroll-snap-align:start;min-width:0}
.citem.v{grid-column:span 2}
.citem .cimg{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:color-mix(in oklab,var(--fg) 6%,var(--bg));cursor:zoom-in}
.citem.v .cimg{cursor:default;background:#000;aspect-ratio:16/9}
.ctrack.one{grid-auto-columns:100%}
.ctrack.one .citem.v{grid-column:auto}
.ctrack.one .citem.v .cimg{max-height:72vh;aspect-ratio:16/9;margin:0 auto}
.citem .cimg img,.citem .cimg video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--eo)}
.citem.v .cimg video{object-fit:contain}
.citem .cimg:hover img{transform:scale(1.04)}
.citem .vctl{right:10px;bottom:10px}
.citem figcaption{margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);line-height:1.5}

/* ---------- lightbox ---------- */
.lbx{position:fixed;inset:0;z-index:200;background:rgba(8,8,8,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:max(60px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));animation:fu .35s var(--eo)}
.lbx img{max-width:min(1400px,100%);max-height:calc(100% - 80px);object-fit:contain;border-radius:6px}
.lbx-bar{width:min(1400px,100%);display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#f4f1ea}
.lbx-bar u{text-decoration:none;opacity:.5;margin-left:10px}
.lbx .cnav button{color:#f4f1ea;border-color:rgba(244,241,234,.25)}

/* ---------- case study chapters (SoftBank: Sōzō → AutoStore) ---------- */
.chap{padding:clamp(30px,5vw,70px) 0 clamp(8px,1.5vw,16px);border-top:1px solid var(--line);margin-top:clamp(10px,2vw,30px)}
.chap .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.chap h3{margin-top:12px;font-family:var(--display);font-weight:var(--dw,400);text-transform:uppercase;font-size:clamp(30px,5vw,72px);line-height:1;letter-spacing:-.03em}
.chap p{margin-top:16px;max-width:62ch;font-size:16px;line-height:1.65;color:color-mix(in oklab,var(--fg) 75%,var(--bg))}
.chap-l{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.cshots>.chap:first-child{border-top:0;margin-top:0;padding-top:0}

@media (max-width:1024px){
.ctiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.crow-h{grid-template-columns:minmax(0,1fr) auto;align-items:start}
.crow-h p{grid-column:1/-1;grid-row:2}
.ctrack{grid-auto-columns:calc((100% - var(--cg)) / 2.3)}
}
@media (max-width:720px){
.ctiles{gap:14px 12px}
.ctile .ctimg{aspect-ratio:1/1}
.crow-h{grid-template-columns:1fr}
.crow-h p{grid-row:auto}
.crow-a{justify-self:start;width:100%;justify-content:space-between}
.ctrack{grid-auto-columns:78%}
.citem.v{grid-column:span 1}
.citem.v .cimg{aspect-ratio:16/10}
}

/* ---------- discipline pages (editorial) ---------- */
.catp .chead .tags a{cursor:pointer;transition:color .3s var(--ease)}
.catp .chead .tags a:hover,.catp .chead .tags a.on{color:var(--accent)}
.catp .mq{margin:clamp(10px,2vw,30px) 0 clamp(40px,6vw,80px)}
.chap h3 em{display:block;font-style:italic;text-transform:none;color:var(--accent);font-size:.46em;letter-spacing:-.01em;margin-top:.2em}
.chap-m{display:block;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.catp .chap .k{font-size:10px}
.catp .crows{padding-top:0}

/* ---------- discipline pages: hero + up to four supporting pieces ---------- */
.catp .cshots{gap:clamp(12px,1.6vw,22px)}
.catp .chap{margin-top:clamp(40px,6vw,90px)}
.catp .cshots>.chap:first-child{margin-top:0}
.shot.zoom>div{cursor:zoom-in}
.csup{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.csup.n1{grid-template-columns:repeat(2,minmax(0,1fr))}
.csup.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.csup.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.csup .cfig{display:block;margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);line-height:1.5}
@media (max-width:1024px){.csup,.csup.n3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.catp .shot.zoom img{max-height:82vh;object-fit:cover}

/* supporting strip: shared height, natural widths, sideways scroll */
.sstrip-w{display:flex;flex-direction:column;gap:12px}
.sstrip{display:flex;gap:clamp(10px,1.2vw,18px);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.sstrip::-webkit-scrollbar{display:none}
.sitem{flex:none;margin:0;width:min-content;scroll-snap-align:start}
.sim{height:clamp(170px,19vw,280px);border-radius:8px;overflow:hidden;background:color-mix(in oklab,var(--fg) 6%,var(--bg));cursor:zoom-in}
.sim img{height:100%;width:auto;max-width:none;display:block;transition:transform .7s var(--eo)}
.sim:hover img{transform:scale(1.03)}
.sitem.v .sim{cursor:default;background:#000;aspect-ratio:16/9;position:relative}
.sitem.v .sim video{height:100%;width:100%;object-fit:cover;display:block}
.sitem .vctl{right:8px;bottom:8px}
.sitem figcaption{margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);line-height:1.5}

@media (max-width:720px){.sim{height:190px}}

/* bigger strip arrows with a label underneath */
.snav-w{align-self:flex-end;display:flex;flex-direction:column;align-items:center;gap:10px;margin-left:auto}
.snav{gap:12px;margin-left:0}
.snav button{width:clamp(52px,4.4vw,64px);height:clamp(52px,4.4vw,64px);font-size:clamp(20px,1.6vw,24px);border-color:rgba(244,241,234,.35)}
.snav-t{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

/* discipline tiles: hover preview (slideshow, or video for Video & Motion) */
.ctile .ctimg{position:relative}
.ctile .ctimg .cslide,.ctile:hover .ctimg img.cslide{filter:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .55s var(--ease),transform 2.4s linear}
.ctile .ctimg .cslide.on,.ctile:hover .ctimg img.cslide.on{opacity:1;transform:scale(1.12)}
.ctile .ctimg video.cslide{transform:none;transition:opacity .45s var(--ease);background:#000}
.ctile .ctimg video.cslide.on{transform:none}
.ctile .cprev{position:absolute;left:10px;bottom:10px;z-index:2;padding:6px 10px;border-radius:999px;background:rgba(11,11,11,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#f4f1ea;opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.ctile.live .cprev{opacity:1;transform:none}
.ctile.live .ccov{filter:none}
@media (prefers-reduced-motion:reduce){.ctile .ctimg .cslide{transition:opacity .3s}.ctile .ctimg .cslide.on{transform:none}}

/* page headings: the first word lights up one letter at a time */
.chase>span{transition:none}                         /* switches off instantly: only one letter lit at a time */
.chase>span.hot{color:var(--accent);transition:color .12s var(--ease)}

/* Contact — flipping "where else I work" row */
.ch.flip>.swap,.ch.flip a .swap{display:inline-grid;text-align:left}
.ch.flip .swap>i,.ch.flip .swap>em{grid-area:1/1;font-style:normal;opacity:0;transform:translateY(.22em);transition:opacity .5s var(--ease),transform .5s var(--ease);white-space:nowrap}
.ch.flip .swap>.act{opacity:1;transform:translateY(0)}
.ch.flip>.swap{display:grid;margin-bottom:10px}
.ch.flip>.swap>i{display:block;margin:0}
.ch.flip a{color:var(--accent)}
.ch.flip a:hover{color:var(--fg)}
.ch.flip a .swap{font:inherit;letter-spacing:inherit;text-transform:none;color:inherit;margin:0}
.ch.flip a .swap>em{display:inline-flex;align-items:center;gap:14px}
.ch.flip a:hover svg{transform:translate(4px,-4px)}

/* Case study: chapter jump buttons under the intro */
.cjump{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,40px)}
.cjump button{flex:1 1 240px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 16px;text-align:left;padding:16px 20px;border:1px solid var(--line);border-radius:14px;color:var(--fg);transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.cjump button span{grid-column:1/-1;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.cjump button b{font-weight:400;font-family:var(--display);font-size:clamp(17px,1.6vw,22px);line-height:1.15;letter-spacing:-.01em}
.cjump button svg{color:var(--accent);transition:transform .35s var(--eo)}
.cjump button:hover{border-color:var(--accent);background:color-mix(in oklab,var(--accent) 8%,transparent)}
.cjump button:hover svg{transform:translateY(3px)}
.band.fit img{width:100%;height:100%;object-fit:contain}
/* Impact stats: nudge 2nd and 3rd off the dividing line */
.cimpact .st+.st{padding-left:20px}
@media (max-width:1024px) and (orientation:portrait),(max-width:720px){.cimpact .st+.st{padding-left:0}}
@media (min-width:721px) and (max-width:1024px){.cimpact .st+.st{padding-left:20px}}

/* ===== Tighter type + spacing pass (Nov 8) ===== */
.cs{padding-top:clamp(96px,10vw,128px)}
.wtop{padding:clamp(100px,11vw,150px) var(--g) clamp(24px,3vw,40px)}
.wtop h1{font-size:clamp(44px,7.6vw,118px)}
.sh{padding:clamp(48px,7vw,100px) var(--g) clamp(22px,3vw,40px)}
.sh h2{font-size:clamp(30px,4.2vw,64px)}
.chead{padding-top:clamp(18px,2.6vw,32px)}
.chead h1,.cathead h1{font-size:clamp(40px,7.4vw,112px)}
.chead .tags{margin-top:clamp(16px,2.4vw,28px)}
.cband{margin-top:clamp(24px,3.5vw,44px)}
@media (orientation:landscape) and (min-width:721px){.cband .band:not(.fit){height:clamp(300px,62vh,720px)}}
.cintro{padding:clamp(32px,4.5vw,60px) var(--g) clamp(20px,3vw,40px)}
.cblocks{padding:clamp(44px,6vw,90px) var(--g)}
.cshots{padding-bottom:clamp(44px,6.5vw,96px)}
.chap{padding-top:clamp(22px,3.4vw,46px)}
.catp .chap{margin-top:clamp(28px,4vw,60px)}
.catp .mq{margin:clamp(6px,1.4vw,20px) 0 clamp(24px,3.6vw,48px)}
.crows{padding:clamp(28px,4vw,56px) var(--g) clamp(44px,6vw,90px)}
.plist{padding-bottom:clamp(44px,7vw,100px)}
.cnext{padding:clamp(40px,6vw,80px) var(--g)}

/* ===== Works header: 3D showcase ===== */
.wtop.has3d{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,3vw,48px);align-items:end}
.s3d{position:relative;min-width:0}
.s3d-stage{position:relative;height:clamp(320px,34vw,500px);cursor:pointer}
.s3d-stage::before{content:"";position:absolute;inset:8% 10%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--accent) 30%,transparent),transparent 72%);filter:blur(30px);opacity:.55;pointer-events:none}
.s3d-stage canvas{position:relative;width:100%!important;height:100%!important;display:block}
.s3d-cap{display:flex;gap:14px;align-items:baseline;justify-content:flex-end;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.s3d-cap b{font-weight:400;color:var(--fg);animation:s3dcap .5s var(--ease)}
@keyframes s3dcap{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (max-width:820px){
.wtop.has3d{grid-template-columns:1fr}
.s3d-stage{height:clamp(260px,72vw,380px)}
.s3d-cap{justify-content:flex-start}
}
.chead.has3d{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center}
.chead.has3d .s3d-stage{height:clamp(300px,30vw,460px)}
@media (max-width:820px){.chead.has3d{grid-template-columns:1fr}.chead.has3d .s3d-stage{height:clamp(260px,72vw,380px)}}

/* ===== Tablet + phone density pass (Nov 9): use columns, get to the work sooner ===== */
@media (max-width:1024px){
  .csvc ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(16px,3vw,32px)}
  .catp .csvc ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .csvc li{min-width:0}
  .csvc li span{overflow-wrap:anywhere}
  .wtop .meta{grid-template-columns:repeat(3,auto)}
}
@media (min-width:600px) and (max-width:1024px){
  .cblocks{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,32px)}
  .cblocks .b p{font-size:14px;line-height:1.6}
  .wtop.has3d,.chead.has3d{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  .wtop.has3d .s3d-stage,.chead.has3d .s3d-stage{height:clamp(260px,40vw,400px)}
}
@media (max-width:720px){
  .csvc ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catp .csvc ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .csvc li{font-size:13px;padding:10px 0}
  .wtop .meta{grid-template-columns:repeat(3,auto);gap:18px}
  .wtop .meta div b{font-size:13px}
  .cimpact .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cimpact .st{border-bottom:0;border-right:1px solid rgba(0,0,0,.22);padding:20px 10px 20px 0}
  .cimpact .st+.st{padding-left:12px}
  .cimpact .st:last-child{border-right:0}
  .cimpact .st b{font-size:clamp(24px,8vw,36px)}
  .cimpact .st span{font-size:8.5px;letter-spacing:.1em;margin-top:8px}
}
/* wide videos: shrink the frame instead of letterboxing on short screens */
.shot.isvid{max-width:calc(78vh * 16 / 9);margin-left:auto;margin-right:auto;width:100%}
.shot.isvid video{max-height:none;display:block}

/* More work: hover-to-play videos */
.rvid{position:absolute;inset:0;background:#000}
.rvid video{width:100%;height:100%;object-fit:cover;display:block}
.rvid-p{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#f4f1ea;background:rgba(11,11,11,.6);backdrop-filter:blur(8px);padding:8px 12px;border-radius:999px;transition:opacity .3s var(--ease)}
.rvid-p.off{opacity:0}

/* Next band: the whole band is one link */
.cnext a.in{color:inherit;text-decoration:none;cursor:pointer}
.cnext .nxa{display:inline-grid;place-items:center;width:64px;height:64px;border:1px solid var(--line);border-radius:50%;flex:none;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.cnext a.in:hover .nxa{background:var(--accent);color:var(--aink);border-color:var(--accent)}

html.js #root.pre{opacity:0}
.skip{position:absolute;left:-9999px}