:root{--ink:#0e0e0e;--char:#171717;--graph:#242424;--line:rgba(255,255,255,.14);--mist:#ececec;--paper:#f4f4f2;--silver:#b9b9b6;--dim:#8a8a87;--serif:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif;--sans:'Raleway',system-ui,-apple-system,'Segoe UI',sans-serif;--pad:clamp(20px,5vw,72px);--max:1320px}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:#e9e9e6;font:300 17px/1.75 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}ul,ol{list-style:none}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:10px 14px;z-index:100}.skip:focus{left:8px}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
.eyebrow{font:500 11px/1.4 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--silver)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:.005em}h1 i,h2 i,.logo i{font-style:italic}
h2{font-size:clamp(34px,5.4vw,64px)}h3{font-size:clamp(22px,2.6vw,30px)}
.lede{font-size:clamp(16px,1.6vw,19px);color:#d3d3cf;max-width:60ch}.cap{color:var(--silver);font-size:15px;line-height:1.7;max-width:78ch}
/* header */
.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top)) var(--pad) 14px;transition:background .35s,backdrop-filter .35s,padding .35s}
.top.solid{background:rgba(14,14,14,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo{font:400 22px/1 var(--serif);letter-spacing:.02em}
.top nav{display:flex;gap:clamp(14px,2.4vw,34px);align-items:center;font:500 11.5px var(--sans);letter-spacing:.2em;text-transform:uppercase}
.top nav a{opacity:.8;transition:opacity .2s}.top nav a:hover{opacity:1}.top nav .pill{border:1px solid rgba(255,255,255,.5);padding:10px 16px;opacity:1}.top nav .pill:hover{background:#fff;color:#000}
.burger{display:none;background:none;border:0;width:44px;height:44px;position:relative;cursor:pointer}.burger span{position:absolute;left:10px;right:10px;height:1.5px;background:#fff;transition:.3s}.burger span:first-child{top:19px}.burger span:last-child{top:26px}
.burger[aria-expanded=true] span:first-child{top:22px;transform:rotate(45deg)}.burger[aria-expanded=true] span:last-child{top:22px;transform:rotate(-45deg)}
@media(max-width:860px){.burger{display:block}.top nav{position:fixed;inset:0;background:rgba(10,10,10,.97);flex-direction:column;justify-content:center;gap:26px;font-size:15px;opacity:0;pointer-events:none;transition:opacity .3s}.top nav.open{opacity:1;pointer-events:auto}.top nav a{opacity:1}.top .burger{z-index:2}.top .logo{z-index:2}}
/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero>img{position:absolute;inset:0;width:100%;height:115%;object-fit:cover;object-position:50% 60%;z-index:-2;transform:translateY(var(--py,0));will-change:transform}
.shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 35%,rgba(0,0,0,.82) 100%)}
.hero-in{padding-bottom:clamp(60px,10vh,110px);padding-top:120px}.hero h1{font-size:clamp(30px,10.2vw,168px);letter-spacing:-.01em;margin:18px 0 6px}
.hero .by{font:500 clamp(12px,1.4vw,15px) var(--sans);letter-spacing:.42em;margin-bottom:26px;color:#fff}.hero .lede{margin-bottom:32px;color:#e5e5e2}.llc{margin-top:34px;font:500 10.5px var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.ctas{display:flex;gap:14px;flex-wrap:wrap}.btn{display:inline-block;background:#f2f2ef;color:#0e0e0e;font:600 11.5px var(--sans);letter-spacing:.22em;text-transform:uppercase;padding:17px 30px;transition:.25s;border:1px solid #f2f2ef}.btn:hover{background:transparent;color:#fff}.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}.btn.ghost:hover{background:#fff;color:#000}
.scroll{position:absolute;right:var(--pad);bottom:34px;width:26px;height:46px;border:1px solid rgba(255,255,255,.5);border-radius:14px}.scroll span{position:absolute;left:50%;top:9px;width:2px;height:8px;background:#fff;margin-left:-1px;animation:dot 1.8s infinite}@keyframes dot{60%{transform:translateY(16px);opacity:0}}
@media(max-width:700px){.scroll{display:none}}
/* sections */
section{position:relative}.about,.specs,.projects,.exp,.beyond,.contact{padding:clamp(70px,11vw,150px) 0}
.two{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,7vw,110px);align-items:start}@media(max-width:900px){.two{grid-template-columns:1fr}}
.about{background:var(--char)}.about h2{margin:14px 0 30px}.about p{margin-bottom:20px;max-width:58ch;color:#d7d7d3}.about .quote{font:italic 400 clamp(22px,3vw,34px)/1.3 var(--serif);color:#fff;margin-top:34px;border-top:1px solid var(--line);padding-top:26px}
.swatches{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.sw{overflow:hidden;display:block}.sw img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(.15) contrast(1.05)}.sw.s0{grid-row:span 2}.sw.s0 img{aspect-ratio:3/5}.sw.s2{margin-top:-24px}
.specs{background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(54px,8vw,100px) 0}.spec-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px;margin-top:26px}
.spec-list li{font:400 clamp(22px,2.6vw,32px)/1.2 var(--serif);padding:22px 0;border-top:1px solid var(--line);display:flex;gap:18px;align-items:baseline}.spec-list span{font:500 11px var(--sans);letter-spacing:.2em;color:var(--dim)}
@media(max-width:860px){.spec-list{grid-template-columns:1fr 1fr}}@media(max-width:520px){.spec-list{grid-template-columns:1fr}}
.sec-h{margin-bottom:clamp(30px,5vw,60px)}.sec-h h2{margin:12px 0 14px}
/* project cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px)}@media(max-width:760px){.cards{grid-template-columns:1fr}}
.card{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--graph);display:block}.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .6s}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.85))}.card:hover img{transform:scale(1.05)}
.card-t{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(20px,3vw,36px)}.card-t h3{font-size:clamp(28px,3.4vw,44px);margin:8px 0 12px}.more{font:500 11px var(--sans);letter-spacing:.22em;text-transform:uppercase}.more b{display:inline-block;transition:transform .3s}.card:hover .more b{transform:translateX(6px)}
/* experience */
.exp{background:var(--char)}.tl>li{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--line)}.when{font:500 12px var(--sans);letter-spacing:.14em;color:var(--silver);text-transform:uppercase;padding-top:6px}
.tl h3{font-size:clamp(22px,2.4vw,28px)}.where{font:500 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:6px 0 12px}.tl ul li{color:#cfcfcb;font-size:15.5px;padding-left:18px;position:relative;margin-bottom:6px;line-height:1.65}.tl ul li::before{content:"";position:absolute;left:0;top:.8em;width:8px;height:1px;background:var(--silver)}
.edu{position:sticky;top:96px;border:1px solid var(--line);padding:30px;background:var(--ink)}.edu div{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.edu h3{font-size:22px}.edu p{color:var(--silver);font-size:14.5px;margin-top:6px}
@media(max-width:900px){.edu{position:static}}@media(max-width:560px){.tl>li{grid-template-columns:1fr;gap:6px}}
/* beyond */
.beyond{background:var(--mist);color:#121212}.beyond .eyebrow{color:#666}.beyond .cap{color:#555}.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.tile{position:relative;aspect-ratio:3/4;overflow:hidden;display:block;background:#bbb}.tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s}.tile:hover img{transform:scale(1.06)}.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.7))}
.tile span{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;color:#fff;font:400 clamp(17px,1.8vw,22px)/1.15 var(--serif)}
@media(max-width:900px){.tiles{grid-template-columns:repeat(3,1fr)}}@media(max-width:560px){.tiles{grid-template-columns:1fr 1fr}}
/* contact */
.contact{background:var(--ink)}.contact h2{margin:14px 0 26px}.cbox{border:1px solid var(--line);padding:clamp(26px,4vw,48px);display:grid;gap:18px;background:var(--char)}.who{font:400 28px var(--serif)}
.cl{display:block;border-top:1px solid var(--line);padding-top:14px;font-size:18px;overflow-wrap:anywhere;transition:color .2s}a.cl:hover{color:#fff}.cl small{display:block;font:500 10.5px var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}.cbox .btn{text-align:center;margin-top:8px}
.foot{background:#080808;border-top:1px solid var(--line);padding:46px 0 34px;font-size:14.5px;color:var(--silver)}.foot .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}.foot .wrap>div{display:grid;gap:6px}.foot .logo{color:#fff;font-size:26px}.foot a:hover{color:#fff}
.demo{max-width:var(--max);margin:34px auto 0;padding:22px var(--pad) 0;border-top:1px solid var(--line);font-size:12.5px;letter-spacing:.04em;color:var(--dim)}.demo a{text-decoration:underline;text-underline-offset:3px}
/* project pages */
.phero{position:relative;min-height:72svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}.phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.phero .wrap{padding-bottom:clamp(40px,7vw,80px);padding-top:130px}
.phero h1{font-size:clamp(44px,8vw,108px);margin:12px 0 18px}.phero.short{min-height:0;background:var(--char)}.phero.short .wrap{padding-top:140px;padding-bottom:50px}.back{display:inline-block;margin-bottom:34px;font:500 11px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--silver)}.back:hover{color:#fff}
.blocks{padding-top:clamp(40px,6vw,80px);padding-bottom:40px}.blk{padding:clamp(34px,5vw,64px) 0;border-top:1px solid var(--line)}.blk:first-child{border-top:0}.blk-h{margin-bottom:26px;display:grid;gap:10px}.blk-h h3{font-size:clamp(28px,3.6vw,46px)}
.prose p{max-width:68ch;color:#d4d4d0;margin-bottom:14px}
.mason{column-count:3;column-gap:12px}.mason.wide{column-count:2}.mason.one{column-count:1;max-width:760px}.mason .ph{display:block;break-inside:avoid;margin-bottom:12px;overflow:hidden;background:var(--graph);position:relative;cursor:zoom-in}
.mason .ph img{width:100%;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .6s}.mason .ph:hover img{transform:scale(1.04)}.mason.contain .ph{background:#fff}
@media(max-width:900px){.mason{column-count:2}}@media(max-width:480px){.mason{column-gap:8px}.mason .ph{margin-bottom:8px}.mason.wide{column-count:1}}
.next{border-top:1px solid var(--line);background:var(--char)}.next a{display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:center;max-width:var(--max);margin:0 auto;padding:clamp(44px,7vw,90px) var(--pad)}.next b{font:400 clamp(34px,6vw,80px)/1.05 var(--serif)}.next .eyebrow{grid-column:1/-1}.arrow{font-size:clamp(30px,5vw,60px);transition:transform .3s}.next a:hover .arrow{transform:translateX(10px)}
/* before / after */
.ba{position:relative;aspect-ratio:var(--r,4/3);max-height:84svh;width:100%;max-width:min(100%,calc(84svh*var(--rn,1.33)));margin:0 auto;overflow:hidden;background:#000;user-select:none;touch-action:pan-y;--p:50%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ba-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-bar{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}.ba-bar span{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px;border-radius:50%;background:#fff;box-shadow:0 2px 16px rgba(0,0,0,.5)}
.ba-bar span::before,.ba-bar span::after{content:"";position:absolute;top:50%;width:8px;height:8px;border:solid #111;border-width:2px 2px 0 0;margin-top:-4px}.ba-bar span::before{left:11px;transform:rotate(-135deg)}.ba-bar span::after{right:11px;transform:rotate(45deg)}
.ba{cursor:ew-resize}.ba input{position:absolute;left:0;bottom:0;width:100%;height:1px;opacity:0;margin:0;pointer-events:none}.ba:focus-within .ba-bar span{outline:2px solid #fff;outline-offset:3px}
.tag{position:absolute;top:14px;padding:6px 11px;background:rgba(0,0,0,.6);font:600 10.5px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#fff;pointer-events:none}.tag.b{left:14px}.tag.a{right:14px}
.ba-blk .cap{margin:18px auto 0;max-width:var(--max)}
/* lightbox */
dialog#lightbox{border:0;background:rgba(6,6,6,.96);width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;color:#fff}dialog#lightbox::backdrop{background:#000}
#lightbox figure{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 64px 20px}#lightbox img{max-width:100%;max-height:calc(100dvh - 130px);object-fit:contain}#lightbox figcaption{margin-top:14px;color:var(--silver);font-size:14px;text-align:center;max-width:70ch}
.lbx,.lbn{position:absolute;z-index:3;background:rgba(255,255,255,.08);border:0;color:#fff;cursor:pointer;width:48px;height:48px;border-radius:50%;font-size:30px;line-height:1}.lbx{top:max(14px,env(safe-area-inset-top));right:14px}.lbn{top:50%;margin-top:-24px}.lbn.prev{left:12px}.lbn.next{right:12px}.lbx:hover,.lbn:hover{background:rgba(255,255,255,.2)}
@media(max-width:700px){#lightbox figure{padding:60px 8px 16px}.lbn{top:auto;bottom:18px;margin:0}.lbn.prev{left:calc(50% - 60px)}.lbn.next{right:calc(50% - 60px)}}
/* gallery page (light) */
body.light{background:var(--mist);color:#121212}.light .phero.short{background:var(--mist)}.light .phero h1{color:#0e0e0e}.light .eyebrow,.light .back{color:#666}.light .lede,.light .cap{color:#444}.light .back:hover{color:#000}
.light .top.solid{background:rgba(236,236,236,.85);border-color:rgba(0,0,0,.1)}.light .top,.light .top .logo{color:#0e0e0e}.light .burger span{background:#000}.light .top nav .pill{border-color:rgba(0,0,0,.4)}.light .top nav .pill:hover{background:#000;color:#fff}
@media(max-width:860px){.light .top nav{background:rgba(236,236,236,.98);color:#000}.light .burger[aria-expanded=true] span{background:#000}}
.light .mason .ph{background:#d8d8d6}.gal{padding:clamp(34px,5vw,70px) 0;border-top:1px solid rgba(0,0,0,.12)}.gal h2{font-size:clamp(30px,4.4vw,54px)}
.gtabs{display:flex;gap:10px;flex-wrap:wrap;padding-top:20px;padding-bottom:24px;position:sticky;top:64px;z-index:20;background:linear-gradient(var(--mist) 75%,transparent)}.gtabs a{border:1px solid rgba(0,0,0,.3);padding:9px 16px;font:500 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#111;background:var(--mist)}.gtabs a:hover{background:#111;color:#fff}
.light .foot{background:#0e0e0e;color:var(--silver)}
/* motion */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.hero>img{transform:none!important;height:100%}.scroll span{animation:none}.card img,.mason .ph img,.tile img{transition:none}}
.no-js .reveal{opacity:1;transform:none}

.phero .shade{background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.4) 40%,rgba(0,0,0,.92) 100%)}
.phero h1{font-size:clamp(40px,8vw,108px)}
.hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:6px 12px;background:rgba(0,0,0,.6);font:500 10px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;pointer-events:none;white-space:nowrap;transition:opacity .4s}.ba.used .hint{opacity:0}
.ghead{display:grid;grid-template-columns:1.4fr .6fr;gap:40px;align-items:end}.artimg img{width:100%;aspect-ratio:4/5;object-fit:cover}@media(max-width:700px){.ghead{grid-template-columns:1fr}.artimg{max-width:240px}}
.feat{display:grid;gap:12px;grid-template-columns:1fr 1fr}.feat .ph{display:block;overflow:hidden;background:var(--graph);cursor:zoom-in}.feat .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}.feat .ph:hover img{transform:scale(1.04)}
.feat.land .ph img{aspect-ratio:4/3}.feat.land.n3 .ph:first-child{grid-column:1/-1}.feat.land.n3 .ph:first-child img{aspect-ratio:16/9}.feat.n1{grid-template-columns:1fr;max-width:900px}.feat.n1 .ph img{aspect-ratio:auto}
.feat.port{grid-template-columns:repeat(3,1fr)}.feat.port.n2{grid-template-columns:1fr 1fr;max-width:900px}.feat.port .ph img{aspect-ratio:3/4}
@media(max-width:600px){.feat{gap:8px}.feat.port.n3{grid-template-columns:1fr 1fr}.feat.port.n3 .ph:first-child{grid-column:1/-1}.feat.port.n3 .ph:first-child img{aspect-ratio:4/5}}
.light .feat .ph{background:#d8d8d6}
.feat.port.n4{grid-template-columns:repeat(4,1fr)}@media(max-width:700px){.feat.port.n4{grid-template-columns:1fr 1fr}}
/* justified rows: every photo whole, rows filled edge to edge */
.just{display:flex;flex-wrap:wrap;gap:12px;--rh:270px}.just::after{content:"";flex-grow:2.2}
.just .ph{display:block;overflow:hidden;background:var(--graph);cursor:zoom-in;flex:var(--ar) 1 calc(var(--ar)*var(--rh));min-width:0}
.just .ph img{width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}.just .ph:hover img{transform:scale(1.04)}
@media(max-width:900px){.just{--rh:190px}}@media(max-width:480px){.just{--rh:120px;gap:8px}}
.light .just .ph{background:#d8d8d6}