:root{--ob:#0b0b0c;--g1:#1b1b1d;--g2:#2a2a2d;--iv:#f3eee4;--be:#d9cdb8;--ch:#c8a96e;--mute:#8d877d;
--serif:'Cormorant Garamond',Georgia,serif;--sans:'Inter',system-ui,sans-serif;--ease:cubic-bezier(.16,1,.3,1);--pad:clamp(20px,5vw,72px)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ob);color:var(--iv);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}
body{overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:-.01em;line-height:1.02}
.eyebrow{font:500 11px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--ch)}
.wrap{padding:0 var(--pad);max-width:1600px;margin:0 auto}
section{position:relative}
.sec{padding:clamp(90px,14vh,170px) 0}
.sec-h{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(36px,6vh,70px);flex-wrap:wrap}
.sec-h h2{font-size:clamp(40px,6vw,92px)}
.sec-h p{max-width:420px;color:var(--be)}
.line{height:1px;background:var(--g2)}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);transition:background .5s var(--ease),backdrop-filter .5s}
.nav.solid{background:rgba(11,11,12,.72);backdrop-filter:blur(14px)}
.mark{font:500 13px/1 var(--sans);letter-spacing:.3em}.mark b{color:var(--ch);font-weight:500}
.nav ul{display:flex;gap:28px;list-style:none;font-size:13px;color:var(--be)}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--iv)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border:1px solid var(--ch);color:var(--iv);font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;border-radius:2px;transition:background .4s var(--ease),color .4s}
.btn:hover{background:var(--ch);color:var(--ob)}
.btn.solid{background:var(--ch);color:var(--ob)}.btn.solid:hover{background:var(--iv)}
.btn.sm{padding:10px 16px;font-size:11px}
.burger{display:none;background:none;border:0;color:var(--iv);font:500 12px var(--sans);letter-spacing:.2em}
@media(max-width:900px){.nav ul{display:none}.burger{display:block}
.nav.open ul{display:flex;flex-direction:column;position:fixed;inset:60px 0 auto;background:var(--ob);padding:24px var(--pad);gap:18px;font-size:18px}}

/* hero */
.hero{height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:flex-end}
.hero-bg,.hero canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-bg{filter:brightness(.62)}
.hero canvas{z-index:1}
.hero::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(11,11,12,.35) 0%,transparent 35%,rgba(11,11,12,.92) 100%)}
.hero-in{position:relative;z-index:3;padding:0 var(--pad) clamp(40px,9vh,96px);width:100%}
.hero h1{font-size:clamp(52px,10.5vw,176px)}
.hero h1 em{font-style:italic;color:var(--ch)}
.hero-row{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-top:28px;flex-wrap:wrap}
.hero-role{color:var(--be);font-size:15px;letter-spacing:.04em}
.hero-role b{color:var(--iv);font-weight:500}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.scroll-cue{position:absolute;z-index:3;right:var(--pad);top:50%;writing-mode:vertical-rl;font-size:10px;letter-spacing:.4em;color:var(--mute)}

/* video hero: plays by itself, scroll moves it through 3 short steps */
.vhero{height:260svh;position:relative}
.vhero-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:flex-end}
.vhero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.88)}
.vhero-pin::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.35) 0%,transparent 35%,rgba(11,11,12,.9) 100%)}
.vhero-in{position:relative;z-index:2;padding:0 var(--pad) clamp(40px,9vh,96px);width:100%}
.vhero h1{font-size:clamp(52px,10.5vw,176px);display:grid}
.vhero h1 em{font-style:italic;color:var(--ch)}
.vs{display:block;transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .vs{opacity:.18}html.js .vs.on{opacity:1}
.vsteps{position:absolute;right:var(--pad);top:-40vh;list-style:none;display:grid;gap:14px;font-size:11px;letter-spacing:.2em;color:var(--mute)}
.vsteps li{padding-left:22px;position:relative;transition:color .5s}
.vsteps li::before{content:'';position:absolute;left:0;top:50%;width:12px;height:1px;background:currentColor;transition:width .5s var(--ease)}
.vsteps li.on{color:var(--ch)}.vsteps li.on::before{width:18px}
@media(max-width:760px){.vhero{height:220svh}.vsteps{display:none}}

/* portrait page (dark full-bleed photo, text left) */
.portrait{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:#0a0a0a}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.portrait::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.85) 0%,rgba(10,10,10,.35) 50%,transparent 70%)}
.portrait-in{position:relative;z-index:2;width:100%}
.portrait h2{font-size:clamp(50px,7.4vw,124px);font-weight:400;margin:22px 0 28px;line-height:.98}
.portrait p{color:var(--be);max-width:430px}
.portrait .stats{max-width:520px}
@media(max-width:1100px){.portrait{align-items:flex-end;padding-bottom:60px}.portrait{flex-direction:column;align-items:stretch}.portrait picture{display:block;position:relative;height:64svh}.portrait img{object-position:50% 20%}.portrait-in{margin-top:-18svh}
.portrait::after{background:linear-gradient(180deg,transparent 25%,rgba(10,10,10,.95) 72%)}}

/* profile */
.profile{display:grid;grid-template-columns:5fr 7fr;gap:clamp(30px,6vw,110px);align-items:center}
.profile figure{aspect-ratio:4/5;overflow:hidden;border-radius:2px}
.profile figure img{width:100%;height:115%;object-fit:cover}
.profile h2{font-size:clamp(36px,4.6vw,70px);margin:18px 0 24px}
.profile p{color:var(--be);max-width:560px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;list-style:none;border-top:1px solid var(--g2);padding-top:26px}
.stats b{display:block;font:300 clamp(34px,4vw,56px)/1 var(--serif);color:var(--ch)}
.stats span{font-size:12px;color:var(--mute);letter-spacing:.08em}
@media(max-width:820px){.profile{grid-template-columns:1fr}}

/* expertise */
.exp{list-style:none;border-top:1px solid var(--g2)}
.exp li{display:grid;grid-template-columns:70px 1fr 1.2fr;gap:20px;padding:30px 0;border-bottom:1px solid var(--g2);align-items:baseline;transition:padding .5s var(--ease)}
.exp li:hover{padding-left:14px}
.exp i{font:400 13px var(--sans);color:var(--ch);font-style:normal}
.exp h3{font-size:clamp(28px,3.4vw,50px)}
.exp p{color:var(--be);font-size:15px}
@media(max-width:700px){.exp li{grid-template-columns:40px 1fr}.exp p{grid-column:2}}

/* category tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tile{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--g1);display:block;isolation:isolate}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .8s;filter:brightness(.7)}
.tile:hover img{transform:scale(1.06);filter:brightness(.85)}
.tile-t{position:absolute;inset:auto 0 0;padding:24px;display:flex;justify-content:space-between;align-items:end;background:linear-gradient(transparent,rgba(11,11,12,.85))}
.tile h3{font-size:clamp(28px,2.6vw,42px)}
.tile small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ch)}
.tile.empty{display:flex;align-items:center;justify-content:center;border:1px solid var(--g2);background:
 repeating-linear-gradient(90deg,transparent 0 59px,rgba(200,169,110,.07) 59px 60px),repeating-linear-gradient(0deg,transparent 0 59px,rgba(200,169,110,.07) 59px 60px),var(--g1)}
.tile.empty .tile-t{background:none}
.tile.empty svg{width:42%;opacity:.5;stroke:var(--ch);fill:none;stroke-width:1}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tiles{grid-template-columns:1fr}.tile{aspect-ratio:16/11}}

/* project cards */
.projects{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,28px)}
.card{grid-column:span 6;display:block;perspective:1200px}
.card:nth-child(3n+1){grid-column:span 7}.card:nth-child(3n+2){grid-column:span 5}.card:nth-child(3n){grid-column:2 / span 10}
.card-in{position:relative;overflow:hidden;border-radius:2px;transform-style:preserve-3d;transition:transform .7s var(--ease)}
.card-in img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover .card-in img{transform:scale(1.04)}
.glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(232,210,160,.22),transparent 45%);opacity:0;transition:opacity .5s}
.card:hover .glare{opacity:1}
.card-m{display:flex;justify-content:space-between;gap:16px;padding:18px 2px 0;align-items:baseline}
.card h3{font-size:clamp(24px,2.4vw,36px)}
.card .tags{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);text-align:right}
@media(max-width:820px){.card,.card:nth-child(n){grid-column:1 / -1}}

/* process */
.process{height:300vh}
.process-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;margin-top:50px}
.track{position:absolute;top:-26px;left:0;right:0;height:1px;background:var(--g2)}
.track b{position:absolute;inset:0;background:var(--ch);transform-origin:left;transform:scaleX(var(--p,0))}
.step i{font:300 64px/1 var(--serif);color:var(--g2);font-style:normal;transition:color .6s}
.step.on i{color:var(--ch)}
.step h3{font-size:30px;margin:12px 0 10px}
.step p{color:var(--be);font-size:14px}
@media(max-width:820px){.process{height:auto}.process-pin{position:static;height:auto;padding:100px 0}.steps{grid-template-columns:1fr 1fr}.step i{color:var(--ch)}}

/* recruiters */
.rec{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--g2);border:1px solid var(--g2)}
.rec > div{background:var(--ob);padding:34px 28px}
.rec h3{font-size:26px;margin-bottom:16px;color:var(--ch)}
.rec ul{list-style:none;color:var(--be);font-size:14px;display:grid;gap:8px}
@media(max-width:900px){.rec{grid-template-columns:1fr 1fr}}@media(max-width:520px){.rec{grid-template-columns:1fr}}

/* contact */
.contact{text-align:center}
.contact h2{font-size:clamp(46px,9vw,150px)}
.contact h2 em{color:var(--ch)}
.contact p{color:var(--be);margin:22px auto 36px;max-width:560px}
.contact .hero-cta{justify-content:center}
.social{display:flex;gap:26px;justify-content:center;margin-top:40px;font-size:13px;color:var(--mute)}
.social a:hover{color:var(--ch)}
footer{padding:30px var(--pad);display:flex;justify-content:space-between;font-size:12px;color:var(--mute);border-top:1px solid var(--g2);flex-wrap:wrap;gap:10px}

/* inner pages */
.page-h{padding:clamp(130px,22vh,220px) 0 50px}
.page-h h1{font-size:clamp(50px,9vw,140px);margin-top:16px}
.page-h p{color:var(--be);max-width:640px;margin-top:22px;font-size:17px}
.crumb{font-size:12px;color:var(--mute);letter-spacing:.1em}.crumb a:hover{color:var(--ch)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.filters a,.filters button{background:none;border:1px solid var(--g2);color:var(--be);padding:9px 16px;border-radius:40px;font:400 13px var(--sans);cursor:pointer;transition:all .3s}
.filters a:hover,.filters button:hover{border-color:var(--ch);color:var(--iv)}
.filters .on{background:var(--ch);border-color:var(--ch);color:var(--ob)}
.filters a span{opacity:.55;margin-left:6px;font-size:11px}
.grid-img{columns:3 320px;column-gap:14px}
.grid-img figure{break-inside:avoid;margin-bottom:14px;overflow:hidden;border-radius:2px;position:relative}
.grid-img figcaption{position:absolute;inset:auto 0 0;padding:14px;font-size:12px;color:var(--be);background:linear-gradient(transparent,rgba(11,11,12,.9));opacity:0;transition:opacity .4s}
.grid-img figure:hover figcaption{opacity:1}
.empty-state{border:1px solid var(--g2);padding:70px 30px;text-align:center;color:var(--be)}
.empty-state h3{font-size:36px;color:var(--iv);margin-bottom:10px}
.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--g2);border-bottom:1px solid var(--g2);padding:26px 0;margin:40px 0 60px}
.meta dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.meta dd{font-family:var(--serif);font-size:24px;margin-top:6px}
@media(max-width:700px){.meta{grid-template-columns:1fr 1fr}}
.p-hero{height:88svh;overflow:hidden;position:relative}
.p-hero img{width:100%;height:100%;object-fit:cover}
.next{display:block;padding:90px 0;text-align:center;border-top:1px solid var(--g2)}
.next h2{font-size:clamp(40px,7vw,110px);transition:color .4s}.next:hover h2{color:var(--ch)}

/* reveal: content is visible without JS */
html.js [data-rv]{opacity:0;transform:translateY(40px)}
@media(prefers-reduced-motion:reduce){html.js [data-rv]{opacity:1;transform:none}}

/* ---------- exterior 3D showcase ---------- */
.ext3d{height:calc(var(--n) * 90svh + 100svh);position:relative}
.ext-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:3vh}
.ext-h{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;width:100%}
.ext-h h2{font-size:clamp(36px,4.6vw,74px)}
.ext-h p{max-width:340px;color:var(--be);font-size:14px}
.ring{position:relative;height:min(56vh,40vw);perspective:1800px;transform-style:preserve-3d}
.rc{position:absolute;left:50%;top:0;width:min(62vw,880px);height:100%;margin-left:calc(min(62vw,880px) / -2);transform-style:preserve-3d;will-change:transform,opacity;transition:filter .5s}
.rc-img{position:relative;height:calc(100% - 64px);overflow:hidden;border-radius:2px;box-shadow:0 40px 80px rgba(0,0,0,.6)}
.rc-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.rc:hover .rc-img img{transform:scale(1.05)}
.rc:hover .glare{opacity:1}
.rc-m{display:flex;align-items:baseline;gap:18px;padding-top:16px}
.rc-m i{font-style:normal;font-size:12px;color:var(--ch)}
.rc-m h3{font:200 clamp(24px,2.6vw,40px)/1 'Oswald',var(--sans);text-transform:uppercase;letter-spacing:.02em;flex:1}
.rc-m span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--be)}
.ext-count{display:flex;align-items:center;gap:16px;font-size:12px;color:var(--mute);width:100%}
.ec-now{color:var(--ch)}.ec-bar{flex:0 0 160px;height:1px;background:var(--g2);position:relative}
.ec-bar b{position:absolute;inset:0;background:var(--ch);transform-origin:left;transform:scaleX(var(--p,0))}
/* no JS: plain row */
html:not(.js) .ext3d{height:auto}html:not(.js) .ext-pin{position:static;height:auto;padding:100px 0}
html:not(.js) .ring{height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 var(--pad)}
html:not(.js) .rc{position:static;width:auto;margin:0;height:340px}
@media(max-width:760px){.ring{height:52vh}.rc{width:78vw;margin-left:-39vw}.rc-m span{display:none}.ext-h p{display:none}}

/* ---------- presentation page (reference layout) ---------- */
.cond{font-family:'Oswald',var(--sans);font-weight:200;text-transform:uppercase;letter-spacing:.01em;line-height:.98}
.cond span{display:block}
.pz-hero{position:relative;height:100svh;min-height:620px;display:flex;align-items:center;overflow:hidden}
.pz-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pz-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.88) 0%,rgba(11,11,12,.45) 42%,transparent 70%),linear-gradient(0deg,rgba(11,11,12,.7),transparent 30%)}
.pz-in{position:relative;z-index:2;width:100%}
.pz-in h1{font-size:clamp(56px,8.6vw,150px);margin:22px 0 30px}
.pz-rule{display:block;width:60px;height:1px;background:var(--be);margin-bottom:26px}
.pz-lead{max-width:360px;color:var(--iv);margin-bottom:34px}
.pz-count{position:absolute;z-index:2;right:var(--pad);bottom:12vh;display:grid;justify-items:center;gap:10px;font-size:12px;border:1px solid rgba(243,238,228,.35);padding:14px 12px}
.pz-count i{width:14px;height:1px;background:var(--be)}
.pz-row{padding-top:70px}
.pz-bar{display:flex;align-items:center;gap:24px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:28px}
.pz-bar i{flex:1;height:1px;background:var(--g2)}
.pz-bar a:hover{color:var(--ch)}
.pz-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pz-2{grid-template-columns:repeat(2,1fr)}
.pz-ci{aspect-ratio:4/3.1;overflow:hidden}
.pz-ci img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pz-c:hover .pz-ci img{transform:scale(1.05)}
.pz-c > i{display:block;font-style:normal;font-size:11px;color:var(--be);margin:16px 0 6px}
.pz-c h3{font-size:clamp(24px,2.2vw,34px)}
.pz-c p{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--be);margin:6px 0 16px}
.pz-c span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;display:flex;justify-content:space-between;max-width:180px}
.pz-c:hover span{color:var(--ch)}
.pz-concept{padding:120px var(--pad) 40px}
.pz-big{font:300 clamp(24px,2.6vw,40px)/1.35 var(--serif);max-width:1100px;margin-top:20px}
.pz-full figure{position:relative;margin-bottom:6px}
.pz-full img{width:100%;max-height:100svh;object-fit:cover}
.pz-full figcaption{position:absolute;left:0;bottom:20px;font-size:12px;letter-spacing:.1em;color:var(--iv);text-shadow:0 1px 8px #000}
.pz-full figcaption i{font-style:normal;color:var(--ch)}
.pz-cta{position:relative;min-height:90svh;display:flex;align-items:center;margin-top:100px;overflow:hidden}
.pz-cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pz-cta::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.85),rgba(11,11,12,.3) 55%,transparent)}
.pz-cta .wrap{position:relative;z-index:2;width:100%}
.pz-cta h2{font-size:clamp(52px,7.4vw,124px);margin:18px 0 34px}
@media(max-width:820px){.pz-3,.pz-2{grid-template-columns:1fr}.pz-count{display:none}
.pz-hero::after{background:linear-gradient(0deg,rgba(11,11,12,.92) 10%,rgba(11,11,12,.3) 60%,transparent)}.pz-hero{align-items:flex-end;padding-bottom:60px}}

.pz-full{display:grid;grid-template-columns:1fr 1fr;gap:6px}.pz-full figure{grid-column:1/-1;margin:0}.pz-full figure.tall{grid-column:auto}.pz-full figure.tall img{max-height:none;height:100%;aspect-ratio:941/1672}@media(max-width:760px){.pz-full figure.tall{grid-column:1/-1}}

.pz-hero::before{content:'';position:absolute;inset:0 0 auto;height:160px;z-index:1;background:linear-gradient(rgba(11,11,12,.75),transparent)}

/* image protection */
img,video{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
figure,.pz-ci,.rc-img,.tile{position:relative}figure::after,.pz-ci::after{content:'';position:absolute;inset:0;z-index:1}figure figcaption{z-index:2}