:root{--olive:#5f6a45;--olive-d:#3d4529;--olive-l:#7d8a5c;--cream:#f2ecdc;--ink:#14170d;--card:#1b2012;--accent:#c8472f;--mute:#c9c9b2;--r:22px;--pad:clamp(14px,2vw,28px)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--olive-d)}
body{color:var(--cream);font-family:'Poppins',sans-serif;font-weight:300;letter-spacing:.02em;text-transform:uppercase;overflow-x:hidden;
 background:radial-gradient(120% 70% at 50% 0%,var(--olive-l) 0%,var(--olive) 42%,var(--olive-d) 100%) fixed}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
main,footer,.nav{position:relative;z-index:1}
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:22px var(--pad);font-size:14px;transition:transform .45s cubic-bezier(.2,.7,.2,1),background .3s}
.nav.solid{background:linear-gradient(rgba(61,69,41,.92),rgba(61,69,41,0))}
.nav.hide{transform:translateY(-110%)}
.nav .logo{position:absolute;left:50%;transform:translateX(-50%);font-family:'Fjalla One',sans-serif;font-size:18px;opacity:0;transition:opacity .4s}
.nav.show-logo .logo{opacity:1}
.link{position:relative;display:inline-block;overflow:hidden;height:1.4em;line-height:1.4em}
.link span{display:block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.link span+span{position:absolute;left:0;top:100%}
.link:hover span{transform:translateY(-100%)}

/* ---------- stage (landing) ---------- */
.stage{height:280vh;position:relative}
.sticky{position:sticky;top:0;height:100vh;overflow:hidden;-webkit-mask-image:linear-gradient(#000 88%,transparent);mask-image:linear-gradient(#000 88%,transparent)}
.wall{position:absolute;inset:0;background:
 radial-gradient(60% 55% at 50% 38%,rgba(255,255,230,.16),transparent 70%),
 linear-gradient(180deg,transparent 62%,rgba(0,0,0,.18) 100%)}
.floor{position:absolute;left:-10%;right:-10%;bottom:-18vh;height:46vh;border-radius:50% 50% 0 0/100% 100% 0 0;background:linear-gradient(180deg,rgba(95,106,69,.0),rgba(30,35,18,.55));filter:blur(2px)}
.shadow{position:absolute;left:50%;bottom:11vh;width:min(46vw,520px);height:7vh;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.5),transparent 70%);filter:blur(8px)}
.layer{position:absolute;will-change:transform}
.title{left:0;right:0;top:15vh;text-align:center;font-family:'Fjalla One',sans-serif;font-weight:400;line-height:.9;white-space:nowrap;color:var(--cream);text-transform:uppercase}
.title .line{display:block;overflow:hidden}
.title .in{display:inline-block;transform:translateY(105%);animation:rise 1.1s cubic-bezier(.2,.8,.2,1) .2s forwards}
.title .line:nth-child(2) .in{animation-delay:.35s}
.title em{font-style:normal;color:var(--accent)}
@keyframes rise{to{transform:none}}
.chair{left:50%;bottom:6vh;width:min(40vw,440px);margin-left:calc(min(40vw,440px)/-2)}
.chair img,.chair svg{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 30px rgba(0,0,0,.35))}
.sub{left:0;right:0;bottom:4vh;display:flex;justify-content:space-between;padding:0 var(--pad);font-size:clamp(11px,1.1vw,14px);line-height:1.6;opacity:0;animation:fade 1s ease 1s forwards}
.sub .hint{text-align:center}
@keyframes fade{to{opacity:1}}
.float{width:clamp(110px,14vw,210px);aspect-ratio:9/16;border-radius:20px;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.35);background:var(--card)}
.float .ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:12px;font-family:'Fjalla One',sans-serif;font-size:15px;letter-spacing:.04em}
.float video,.float img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.f1{left:7vw;top:27vh;transform:rotate(-6deg)}
.f2{right:8vw;top:20vh;transform:rotate(5deg)}
.f3{left:20vw;top:52vh;width:clamp(90px,11vw,160px);transform:rotate(4deg)}
.f4{right:20vw;top:55vh;width:clamp(90px,11vw,160px);transform:rotate(-5deg)}
.pill{position:absolute;padding:8px 16px;border-radius:99px;background:var(--cream);color:var(--ink);font-size:12px;letter-spacing:.06em;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.pill.red{background:var(--accent);color:var(--cream)}

/* ---------- work ---------- */
.filters{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 28px;margin:0 0 34px;font-size:12px}
.filters button{all:unset;cursor:pointer;color:var(--mute);opacity:.7;transition:opacity .25s;text-transform:uppercase;font:inherit;letter-spacing:.02em}
.filters button:hover,.filters button.on{opacity:1;color:var(--cream)}
.work-head{text-align:center;font-family:'Fjalla One',sans-serif;font-size:clamp(34px,6vw,84px);line-height:1;margin:clamp(30px,6vw,90px) 0 26px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,18px);padding:0 clamp(10px,1.2vw,20px) 40px}
.card{display:block;background:var(--card);border-radius:var(--r);padding:6px 6px 0;overflow:hidden;opacity:0;will-change:transform,opacity;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.card.gone{display:none}
.card .media{position:relative;aspect-ratio:9/16;border-radius:calc(var(--r) - 6px);overflow:hidden;background:#222a16}
.card .media .bg,.card .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.card:hover .media .bg,.card:hover .media video{transform:scale(1.06)}
.card .play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .3s}
.card:hover .play{opacity:1}
.card .play i{width:62px;height:62px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.card .meta{padding:14px 12px 16px}
.card h3{font-family:'Fjalla One',sans-serif;font-weight:400;font-size:17px;letter-spacing:.03em}
.card p{font-size:11px;color:var(--mute)}
.tag{text-align:center;font-family:'Fjalla One',sans-serif;font-size:clamp(44px,10vw,150px);line-height:1;margin:clamp(70px,10vw,160px) 0 clamp(60px,8vw,110px);will-change:transform,opacity}
.tag em{font-style:normal;color:var(--accent)}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:30px var(--pad) 40px;font-size:12px;border-top:1px solid rgba(242,236,220,.2)}

/* ---------- inner pages ---------- */
.page{padding:clamp(110px,14vw,190px) var(--pad) 80px;max-width:1100px;margin:auto}
.page h1{font-family:'Fjalla One',sans-serif;font-weight:400;font-size:clamp(48px,10vw,140px);line-height:1;margin-bottom:40px}
.page p{font-size:clamp(14px,1.4vw,18px);line-height:1.8;max-width:760px;margin-bottom:22px;text-transform:none;color:var(--cream)}
.page .big{font-family:'Fjalla One',sans-serif;font-size:clamp(28px,5vw,64px);text-transform:uppercase;display:block;margin:6px 0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:40px 0}
.cols h4{font-size:12px;color:var(--mute);font-weight:400;margin-bottom:10px}
.cols li{list-style:none;font-size:14px;line-height:2}
.work-view{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(24px,5vw,70px);align-items:start}
.hero-vid{aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;position:relative;background:var(--card);box-shadow:0 30px 60px rgba(0,0,0,.35)}
.hero-vid .bg{position:absolute;inset:0}
.hero-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:980px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.grid{grid-template-columns:repeat(2,1fr)}.cols,.work-view{grid-template-columns:1fr}.f3,.f4{display:none}.f1{left:3vw}.f2{right:3vw}.chair{width:62vw;margin-left:-31vw}.sub{flex-direction:column;align-items:center;gap:6px;text-align:center}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.title .in,.card,.sub{opacity:1;transform:none}}

/* ---------- logo animation hero ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sting{--sh:min(80vh,112vw);height:var(--sh);width:calc(var(--sh)*.8906);left:calc(50% - var(--sh)*.4453);top:calc(50% - var(--sh)*.5);cursor:pointer}
.sting svg{display:block;width:100%;height:100%;overflow:visible}
.chair,.shadow{display:none}                       /* chair is on hold while the logo is the hero */
.sub{animation-delay:4.2s}
body.intro{overflow:hidden}
.snd-toggle{all:unset;cursor:pointer;position:fixed;left:var(--pad);bottom:76px;z-index:60;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border:1px solid rgba(242,236,220,.45);border-radius:99px;color:var(--cream);background:rgba(20,23,13,.25);backdrop-filter:blur(6px);transition:background .25s,border-color .25s}
.snd-toggle:hover,.snd-toggle[aria-pressed=true]{background:rgba(242,236,220,.16);border-color:var(--cream)}
@media(max-width:720px){.snd-toggle{bottom:96px}}

/* ---------- landing: person + logo + curved frames (scroll-driven, see hero-scroll.js) ---------- */
.stage{height:320vh;position:relative}
.h-wall,.h-frames,.h-shadow,.h-person,.h-sub,.logo-home{position:fixed;will-change:transform}
.h-wall{inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 55% at 45% 42%,rgba(255,255,230,.16),transparent 72%)}
.h-frames{inset:0;z-index:1;pointer-events:none}
.fr{position:absolute;left:0;top:0;width:var(--fw,11vw);aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:var(--card);box-shadow:0 26px 56px rgba(0,0,0,.4);opacity:0;pointer-events:auto;will-change:transform,opacity}
.fr .ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:12px;font-family:'Fjalla One',sans-serif;font-size:clamp(12px,1.05vw,16px);letter-spacing:.04em;line-height:1.1}
.fr video,.fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.logo-home{left:0;top:0;z-index:2;cursor:pointer;display:block;transform-origin:50% 50%;-webkit-tap-highlight-color:transparent}
.logo-home svg{display:block;width:100%;height:100%;overflow:visible}
.logo-home.docked{z-index:60}
.logo-home .urlfade{transition:opacity .35s}
.logo-home.docked #urlg,.logo-home.docked #urlb,.logo-home.docked #urlc,.logo-home.docked #tag{opacity:0!important}
.h-person{z-index:3;pointer-events:none;height:var(--ph);width:auto;aspect-ratio:var(--ar,.296);bottom:3vh;left:calc(var(--px) - var(--ph)*var(--ar,.296)/2);transform-origin:50% 100%}
.h-shadow{z-index:2;pointer-events:none;bottom:1.5vh;left:calc(var(--px) - var(--ph)*.34);width:calc(var(--ph)*.68);height:5vh;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.5),transparent 70%);filter:blur(10px)}
.h-sub{left:0;right:0;bottom:4vh;z-index:6;display:flex;justify-content:space-between;padding:0 var(--pad);font-size:clamp(11px,1.1vw,14px);line-height:1.6;pointer-events:none;opacity:0;animation:fade 1s ease 4.2s forwards}
.h-sub .hint{text-align:center}
body.home{--ph:min(86vh,150vw);--px:41vw;--fw:clamp(104px,10.6vw,176px)}
body.home .nav .logo{display:none}
.nav .logo img{height:34px;width:auto;display:block}
body:not(.home) .nav .logo{opacity:1}
@media(max-width:720px){body.home{--ph:min(50vh,106vw);--px:46vw;--fw:24vw}.h-sub{flex-direction:column;align-items:center;gap:6px;text-align:center}}
.h-sub.gone{opacity:0!important;transition:opacity .3s}
.snd-toggle{bottom:auto!important;top:62px;left:var(--pad)}
@media(max-width:720px){.snd-toggle{top:58px}}
body:not(.home) .nav .logo{top:50%;transform:translate(-50%,-50%)}

/* ---------- white theme ---------- */
:root{--fg:#14170d;--mute:#6d7060;--bg:#ffffff}
html,body{background:#fff}
body{color:var(--fg)}
body::before,.h-wall,.h-shadow{display:none}
.nav.solid{background:linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,0))}
.work-head,.tag,.page h1,.page p,.page .big,.cols li{color:var(--fg)}
.filters button{color:var(--mute)}
.filters button:hover,.filters button.on{color:var(--fg)}
.cols h4{color:var(--mute)}
.card,.fr{color:var(--cream)}
.card p{color:#c9c9b2}
.card{box-shadow:0 18px 40px rgba(20,23,13,.18)}
.fr{box-shadow:0 22px 46px rgba(20,23,13,.28)}
footer{border-top:1px solid rgba(20,23,13,.16)}
.snd-toggle{color:var(--fg);border-color:rgba(20,23,13,.4);background:rgba(255,255,255,.6)}
.snd-toggle:hover,.snd-toggle[aria-pressed=true]{background:rgba(20,23,13,.08);border-color:var(--fg)}
.hero-vid{box-shadow:0 30px 60px rgba(20,23,13,.25)}

/* ---------- logo cursor ---------- */
html.has-jj-cur,html.has-jj-cur *{cursor:none!important}
.jj-cur{position:fixed;left:0;top:0;z-index:10000;pointer-events:none;opacity:0;transition:opacity .25s;will-change:transform}
.jj-cur.on{opacity:1}
.jj-cur.on.idle{opacity:0}
.jj-cur .t{display:block;width:22px;height:22px;overflow:visible;transform-origin:50% 50%;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.jj-cur .t path{fill:#14170d;stroke:#fff;stroke-width:14;stroke-linejoin:round;paint-order:stroke;transition:fill .2s}
.jj-cur.link .t{transform:scale(1.45)}
.jj-cur.link .t path{fill:#c8472f}
.jj-cur.play .t{transform:translate(-11px,-11px) rotate(225deg) scale(1.25)}
.jj-cur.press .t{transform:scale(.8)}
.jj-cur.link.press .t{transform:scale(1.15)}
.jj-cur.play.press .t{transform:translate(-11px,-11px) rotate(225deg) scale(1.05)}
/* splash */
#splash{position:fixed;inset:0;z-index:9999;background:#14170d;display:grid;place-items:center}
#splash .s-dot{width:40px;height:40px;border-radius:50%;background:#f2ecdc;transform:scale(0);will-change:transform}
#splash .s-rec{position:absolute;left:50%;top:calc(50% + 46px);transform:translateX(-50%);font:700 13px/1 'Poppins',sans-serif;letter-spacing:.3em;color:#ef3b24;opacity:0;text-transform:uppercase}
.navl{display:flex;gap:26px;align-items:center}

/* ---------- work index (projects.html) ---------- */
.rv{opacity:0;transform:translate3d(0,46px,0) scale(.97);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.pj{padding-bottom:40px}
.pj-head{padding:clamp(130px,17vw,230px) var(--pad) clamp(60px,10vw,150px);text-align:center}
.pj-head h1{font-family:'Fjalla One',sans-serif;font-weight:400;font-size:clamp(34px,6vw,92px);line-height:1}
.pj-pills{position:fixed;left:var(--pad);top:96px;z-index:40;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pj-pills button{all:unset;cursor:pointer;padding:7px 15px;border-radius:99px;background:var(--ink);color:var(--cream);font:400 11px/1.2 'Poppins',sans-serif;letter-spacing:.08em;text-transform:uppercase;transition:background .25s,transform .25s}
.pj-pills button:hover{transform:translateX(4px)}
.pj-pills button.on{background:var(--accent)}
.pj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,4vw,72px);padding:0 clamp(20px,7vw,130px) 120px;align-items:start}
.pj-col{display:flex;flex-direction:column;gap:clamp(50px,8vw,120px)}
.pj-col:nth-child(2){margin-top:clamp(60px,14vw,220px)}
.pj-col:nth-child(3){margin-top:clamp(20px,5vw,80px)}
.pj-card{display:block;will-change:transform}
.pj-card.s-L{width:100%}.pj-card.s-M{width:84%}.pj-card.s-S{width:70%}
.pj-card.r{margin-left:auto}
.pj-card .media{position:relative;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:0 24px 50px rgba(20,23,13,.2)}
.pj-card .media .bg,.pj-card .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.pj-card:hover .media .bg,.pj-card:hover .media video{transform:scale(1.06)}
.pj-card .lab{padding:14px 2px 0}
.pj-card h3{font-family:'Fjalla One',sans-serif;font-weight:400;font-size:clamp(20px,1.9vw,30px);letter-spacing:.02em}
.pj-card p{font-size:11px;color:var(--mute);margin-top:2px}
/* ---------- case page ---------- */
.cs{padding:0 clamp(20px,7vw,130px) 40px}
.cs-back{position:fixed;left:var(--pad);top:70px;z-index:40;padding:8px 16px;border-radius:99px;background:var(--ink);color:var(--cream);font-size:11px;letter-spacing:.08em;transition:background .25s}
.cs-back:hover{background:var(--accent)}
.cs-title{font-family:'Fjalla One',sans-serif;font-weight:400;font-size:clamp(56px,12.5vw,210px);line-height:.92;padding-top:clamp(130px,16vw,230px)}
.cs-intro{display:grid;grid-template-columns:1fr 1fr;gap:6vw;margin-top:clamp(50px,8vw,130px)}
.cs-role{font-family:'Fjalla One',sans-serif;font-weight:400;font-size:clamp(26px,3.6vw,56px);line-height:1}
.cs h3{font-family:'Fjalla One',sans-serif;font-weight:400;font-size:clamp(20px,2vw,32px);margin-bottom:12px}
.cs-intro p,.cs-part p{text-transform:none;font-size:clamp(14px,1.2vw,17px);line-height:1.7;max-width:46ch;margin-bottom:38px;letter-spacing:.01em}
.cs-did{display:flex;flex-wrap:wrap;gap:8px}
.cs-did span{padding:7px 14px;border:1px solid rgba(20,23,13,.35);border-radius:99px;font-size:11px;letter-spacing:.06em}
.cs-part{margin-top:clamp(80px,11vw,180px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:6vw;align-items:start}
.cs-part header{position:sticky;top:110px}
.cs-row{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(12px,1.6vw,26px)}
.cs-row .cs-media:nth-child(2){margin-top:clamp(20px,5vw,80px)}
.cs-media{position:relative;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;display:flex;align-items:flex-end;box-shadow:0 22px 46px rgba(20,23,13,.18);color:var(--cream)}
.cs-media span{padding:12px;font:400 11px/1 'Poppins',sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.cs-media video,.cs-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-more{margin-top:clamp(90px,12vw,200px);padding-top:40px;border-top:1px solid rgba(20,23,13,.16)}
.cs-pills{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 50px}
.cs-pills a{padding:8px 16px;border-radius:99px;background:var(--ink);color:var(--cream);font-size:11px;letter-spacing:.08em;transition:background .25s,transform .25s}
.cs-pills a:hover{background:var(--accent);transform:translateY(-2px)}
.cs-next{display:block;font-family:'Fjalla One',sans-serif;font-size:clamp(30px,6vw,96px);line-height:1;padding-bottom:20px}
@media(max-width:900px){.pj-pills{display:none}.pj-grid{grid-template-columns:repeat(2,1fr)}.pj-col:nth-child(3){grid-column:1/-1;flex-direction:row;margin-top:50px}.pj-col:nth-child(3) .pj-card{width:48%}.cs-intro,.cs-part{grid-template-columns:1fr}.cs-part header{position:static}}
@media(max-width:560px){.pj-grid{grid-template-columns:1fr}.pj-col:nth-child(2){margin-top:50px}.pj-card.s-L,.pj-card.s-M,.pj-card.s-S{width:100%}.cs-row{grid-template-columns:repeat(2,1fr)}.cs-row .cs-media:nth-child(2){margin-top:0}}
.pj-grid{padding-left:clamp(20px,14vw,250px)}
@media(max-width:900px){.pj-grid{padding-left:clamp(20px,7vw,130px)}}

/* ---------- 3D wall of frames ---------- */
.h-frames{perspective:1700px}
.ring{position:absolute;left:0;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.ring .fr{position:absolute;aspect-ratio:auto;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;box-shadow:0 30px 60px rgba(20,23,13,.28)}
.stage{height:380vh}

/* concave wall: both ends of the wall dissolve into the white page (left: behind him, right: at the page edge) */
.h-frames{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 15vw,#000 36vw,#000 74vw,transparent 99vw);mask-image:linear-gradient(90deg,transparent 0,transparent 15vw,#000 36vw,#000 74vw,transparent 99vw)}
@media(max-width:720px){.h-frames{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 22vw,#000 44vw,#000 80vw,transparent 100vw);mask-image:linear-gradient(90deg,transparent 0,transparent 22vw,#000 44vw,#000 80vw,transparent 100vw)}}

/* real video frames */
.ring .fr .ph{z-index:2;background:linear-gradient(to top,rgba(0,0,0,.58),transparent 36%);color:#fff;padding:14px}
.ring .fr video{z-index:1;background:#14170d}
.cs-row.solo{grid-template-columns:minmax(0,430px)}
.cs-media.full{box-shadow:0 30px 70px rgba(20,23,13,.3)}
.pj-card .media video{opacity:0;transition:opacity .4s}.pj-card:hover .media video{opacity:1}

/* opening: nothing but the logo animation until it has played */
.h-person,.h-shadow{opacity:0}
body.home:not(.intro-done) .nav,body.home:not(.intro-done) .h-sub{opacity:0;pointer-events:none}
body.home .nav{transition:opacity .8s ease .15s,transform .45s cubic-bezier(.2,.7,.2,1),background .3s}

/* ---------- selected work: smaller, evenly spaced frames, hover parallax ---------- */
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:clamp(22px,2.6vw,44px);row-gap:clamp(56px,6vw,96px);max-width:1280px;margin:0 auto;padding:0 clamp(18px,3vw,40px) clamp(90px,9vw,150px)}
.card{padding:0;background:transparent;border-radius:0;overflow:visible;box-shadow:none;opacity:0;transform:translate3d(0,34px,0);
 transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1);will-change:transform,opacity}
.card.in{opacity:1;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:opacity .8s ease,transform .22s ease-out}
.card .media{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#1b2012;box-shadow:0 18px 36px rgba(20,23,13,.2)}
.card .media .bg,.card .media video{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;
 transform:translate3d(calc(var(--mx,0)*-9px),calc(var(--my,0)*-9px),0);transition:transform .25s ease-out,opacity .4s}
.card:hover .media .bg,.card:hover .media video{transform:translate3d(calc(var(--mx,0)*-9px),calc(var(--my,0)*-9px),0)}
.card .media video{opacity:0}
.card:hover .media video{opacity:1}
.card .meta{padding:14px 2px 0;transform:translate3d(calc(var(--mx,0)*5px),calc(var(--my,0)*3px),0);transition:transform .25s ease-out}
.card h3{font-size:clamp(15px,1.4vw,20px);color:var(--fg)}
.card p{color:var(--mute);margin-top:2px}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px}}
@media(max-width:600px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}}
/* ---------- clients strip ---------- */
.clients{padding:clamp(40px,5vw,70px) 0 clamp(60px,7vw,110px);overflow:hidden;border-top:1px solid rgba(20,23,13,.12)}
.clients h3{text-align:center;font-family:'Poppins',sans-serif;font-weight:400;font-size:12px;letter-spacing:.22em;color:var(--mute);margin-bottom:clamp(26px,3vw,44px)}
.marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq var(--mq-t,90s) linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-item{flex:none;height:clamp(40px,4.4vw,58px);display:flex;align-items:center;padding:0 clamp(30px,4.5vw,72px)}
.mq-item img{height:100%;width:auto;max-width:210px;object-fit:contain;filter:grayscale(1) brightness(0);opacity:.86}
.mq-item span{font-family:'Fjalla One',sans-serif;font-size:clamp(22px,2.4vw,34px);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;color:var(--ink);opacity:.86}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mq-track{animation:none}}
/* the empty scroll spacer must not catch clicks meant for the wall of frames behind it */
body.home main{pointer-events:none}
body.home main>*:not(.stage){pointer-events:auto}

/* over video: same size as the normal cursor, but a negative (white, difference blend) so it always contrasts with the picture */
.jj-cur.play{mix-blend-mode:difference}
.jj-cur.play .t path{fill:#fff;stroke:none}

/* standing figure: faint floor shadow under the shoes */
.h-shadow{display:block;bottom:1.6vh;left:calc(var(--px) - var(--ph)*.2);width:calc(var(--ph)*.4);height:3.2vh;background:radial-gradient(50% 50% at 50% 50%,rgba(20,23,13,.28),transparent 72%);filter:blur(6px);transform-origin:50% 50%}
@media(max-width:720px){body.home{--ph:min(46vh,150vw);--px:44vw}}

/* ---------- helper: logo-shaped speech balloon + chat ---------- */
.helper{position:fixed;left:0;top:0;width:0;height:0;z-index:70}
.helper .hp-anchor{position:absolute;left:0;top:0;pointer-events:none}
.hp-wrap{position:absolute;left:0;bottom:0;transform:translate(-34px,0) scale(.55);transform-origin:34px 100%;opacity:0;pointer-events:none;
 transition:opacity .28s ease,transform .45s cubic-bezier(.2,1.5,.4,1);filter:drop-shadow(0 12px 18px rgba(20,23,13,.28))}
.helper.show .hp-wrap{opacity:1;transform:translate(-34px,0) scale(1);pointer-events:auto}
.hp-bubble{all:unset;box-sizing:border-box;cursor:pointer;display:block;white-space:nowrap;padding:12px 24px 12px 20px;background:#14170d;color:#f2ecdc;
 font:400 17px/1 'Fjalla One',sans-serif;letter-spacing:.05em;text-transform:uppercase;
 clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,15px 100%,0 calc(100% - 15px))}
.hp-bubble:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.helper:focus-within .hp-wrap{opacity:1;transform:translate(-34px,0) scale(1);pointer-events:auto}
.hp-tail{display:block;width:16px;height:16px;margin:-1px 0 0 26px;background:#14170d;clip-path:polygon(0 0,100% 0,0 100%)}
.hp-panel{position:fixed;width:min(340px,calc(100vw - 24px));z-index:71;pointer-events:auto;text-transform:none;letter-spacing:.01em;color:#f2ecdc;
 filter:drop-shadow(0 0 1.2px rgba(242,236,220,.95)) drop-shadow(0 18px 28px rgba(20,23,13,.28));animation:hpIn .45s cubic-bezier(.2,1.3,.4,1)}
.hp-in{display:flex;flex-direction:column;max-height:min(520px,calc(100vh - 100px));background:#14170d;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
@keyframes hpIn{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
.hp-panel[hidden]{display:none}
.hp-panel header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 10px 22px;font:400 16px/1 'Fjalla One',sans-serif;letter-spacing:.08em;color:#f2ecdc}
.hp-x{all:unset;cursor:pointer;font-size:24px;line-height:1;padding:2px 8px;color:#f2ecdc;opacity:.7}
.hp-x:hover{opacity:1;color:var(--accent)}
.hp-log{flex:1 1 auto;overflow-y:auto;padding:6px 20px 8px 22px;display:flex;flex-direction:column;gap:9px;min-height:120px;scrollbar-width:thin}
.hp-log .m{max-width:88%;padding:10px 13px;font:300 14px/1.5 'Poppins',sans-serif;border-radius:12px}
.hp-log .m.bot{background:rgba(242,236,220,.1);align-self:flex-start;border-bottom-left-radius:3px}
.hp-log .m.you{background:#f2ecdc;color:#14170d;align-self:flex-end;border-bottom-right-radius:3px}
.hp-log .m.small{background:none;padding:0 2px;font-size:12px;opacity:.6}
.hp-log .m.typing{display:flex;gap:4px;padding:13px 14px}
.hp-log .m.typing i{width:6px;height:6px;border-radius:50%;background:#f2ecdc;opacity:.5;animation:hpDot 1s infinite}
.hp-log .m.typing i:nth-child(2){animation-delay:.15s}.hp-log .m.typing i:nth-child(3){animation-delay:.3s}
@keyframes hpDot{50%{opacity:1;transform:translateY(-3px)}}
.hp-go{display:block;width:max-content;max-width:100%;margin-top:10px;padding:7px 14px;border-radius:99px;background:#f2ecdc;color:#14170d;font:400 12px/1 'Poppins',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.hp-go:hover{background:var(--accent);color:#fff}
.hp-chips{display:flex;flex-wrap:wrap;gap:7px;padding:2px 20px 10px 22px}
.hp-chips:empty{display:none}
.hp-chips button{all:unset;cursor:pointer;padding:6px 12px;border:1px solid rgba(242,236,220,.4);border-radius:99px;font:300 12px/1 'Poppins',sans-serif;color:#f2ecdc;transition:background .2s,color .2s}
.hp-chips button:hover{background:#f2ecdc;color:#14170d}
.hp-form{display:flex;align-items:center;gap:8px;padding:10px 20px 20px 22px;border-top:1px solid rgba(242,236,220,.15)}
.hp-form input{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid rgba(242,236,220,.5);color:#f2ecdc;font:300 14px 'Poppins',sans-serif;padding:8px 2px;outline:0;caret-color:#f2ecdc}
.hp-form input::placeholder{color:rgba(242,236,220,.5)}
.hp-form input:focus{border-bottom-color:#f2ecdc}
.hp-form button{all:unset;cursor:pointer;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#f2ecdc;transition:background .2s}
.hp-form button:hover{background:var(--accent)}
.hp-form svg{width:16px;height:16px;fill:#14170d}
@media(max-width:720px){.hp-panel{left:12px!important;right:12px;top:auto!important;bottom:12px;width:auto;max-height:62vh}.hp-bubble{font-size:15px;padding:10px 18px 10px 16px}}
@media(prefers-reduced-motion:reduce){.hp-wrap,.hp-panel{transition:none;animation:none}}
.quote{margin:30px 0 40px;padding:26px 0 6px;border-top:1px solid rgba(20,23,13,.16)}
.quote[hidden]{display:none}
.quote ul{margin:0 0 26px 18px}
.quote li{list-style:disc;text-transform:none;font-size:15px;line-height:1.9}
.helper.open .hp-wrap,.helper.open:focus-within .hp-wrap{opacity:0;pointer-events:none;transform:translate(-34px,0) scale(.6)}
/* horizontal (16:9) films on the case pages */
.cs-media.wide{aspect-ratio:16/9}
.cs-row.solo:has(.cs-media.wide){grid-template-columns:minmax(0,900px)}