:root{--sand:#e9e1d4;--sand2:#ddd2c1;--stone:#c9bba6;--char:#262626;--ink:#1c1b19;--mute:#6f675d;--sans:'Manrope',system-ui,sans-serif;--serif:'Instrument Serif',Georgia,serif;--pad:clamp(20px,4vw,64px);--ease:cubic-bezier(.7,0,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--sand);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body.loading,body.menu-open,body.lb-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit}
em,i{font-family:var(--serif);font-style:italic;font-weight:400}
h1,h2,h3{font-weight:400;letter-spacing:-.035em;line-height:1}
h2{font-size:clamp(44px,6.4vw,104px)}
.label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--mute)}
:focus-visible{outline:2px solid var(--char);outline-offset:3px}
/* loader */
.loader{position:fixed;inset:0;z-index:100;background:var(--char);color:var(--sand);display:grid;place-items:center;transition:transform 1s var(--ease)}
.loader.done{transform:translateY(-100%)}
.plan{width:min(300px,60vw);fill:none;stroke:var(--stone);stroke-width:1}
.plan path{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.6s var(--ease) forwards}
.plan path:nth-child(2){animation-delay:.2s}.plan path:nth-child(3){animation-delay:.35s}.plan path:nth-child(4){animation-delay:.5s}.plan path:nth-child(5){animation-delay:.65s}.plan path:nth-child(6){animation-delay:.8s}.plan path:nth-child(7){animation-delay:.9s}
@keyframes draw{to{stroke-dashoffset:0}}
.loader-words{position:absolute;left:var(--pad);bottom:var(--pad);display:flex;gap:18px;font-family:var(--serif);font-style:italic;font-size:clamp(24px,3vw,40px)}
.loader-words span{opacity:0;transform:translateY(20px);animation:wIn .6s var(--ease) forwards}
.loader-words span:nth-child(1){animation-delay:.3s}.loader-words span:nth-child(2){animation-delay:.6s}.loader-words span:nth-child(3){animation-delay:.9s}.loader-words span:nth-child(4){animation-delay:1.2s}
@keyframes wIn{to{opacity:1;transform:none}}
.loader-count{position:absolute;right:var(--pad);bottom:var(--pad);font-size:clamp(60px,10vw,150px);font-weight:300;letter-spacing:-.05em;line-height:.8}
/* header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:30px;padding:22px var(--pad);color:var(--sand);mix-blend-mode:difference}
.logo{font-size:20px;font-weight:500;letter-spacing:-.02em;text-decoration:none}
.hdr-meta{font-size:13px;opacity:.8}
.menu-btn{margin-left:auto;display:flex;align-items:center;gap:14px;background:none;border:0;color:inherit;font:500 14px var(--sans);letter-spacing:.06em;cursor:pointer;text-transform:uppercase}
.mb-lines{width:28px;height:12px;position:relative}.mb-lines i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .4s var(--ease)}
.mb-lines i:first-child{top:2px}.mb-lines i:last-child{bottom:2px}
.menu-btn[aria-expanded=true] .mb-lines i:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-btn[aria-expanded=true] .mb-lines i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
/* menu */
.menu{position:fixed;inset:0;z-index:55;background:var(--char);color:var(--sand);display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr auto;padding:110px var(--pad) 34px;gap:40px;clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease);visibility:hidden}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible}
.menu-links{display:flex;flex-direction:column;justify-content:center}
.menu-links a{font-size:clamp(46px,7.5vw,118px);letter-spacing:-.045em;line-height:1.02;text-decoration:none;display:flex;align-items:baseline;gap:20px;transform:translateY(40px);opacity:0;transition:transform .8s var(--ease),opacity .8s,color .3s}
.menu-links a small{font-size:14px;letter-spacing:.1em;color:var(--stone)}
.menu.open .menu-links a{transform:none;opacity:1}
.menu.open .menu-links a:nth-child(2){transition-delay:.06s}.menu.open .menu-links a:nth-child(3){transition-delay:.12s}.menu.open .menu-links a:nth-child(4){transition-delay:.18s}
.menu-links:hover a{color:#6c655c}.menu-links a:hover,.menu-links a:focus-visible{color:var(--sand)}
.menu-img{overflow:hidden;align-self:center;aspect-ratio:4/5;max-height:62vh}
.menu-img img{width:100%;height:100%;object-fit:cover;transition:opacity .4s}
.menu-foot{grid-column:1/-1;display:flex;justify-content:space-between;font-size:13px;color:var(--stone)}
/* hero */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;color:var(--sand)}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 2.4s var(--ease)}
body.ready .hero-img img{transform:scale(1)}
.hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,27,25,.25),rgba(28,27,25,.05) 40%,rgba(28,27,25,.55))}
.hero-copy{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad)}
.hero h1{font-size:clamp(56px,10.5vw,184px);letter-spacing:-.055em;line-height:.92}
.hero h1 em{letter-spacing:-.02em}
.line{display:block;overflow:hidden}.line>span{display:block;transform:translateY(105%);transition:transform 1.2s var(--ease)}
body.ready .line>span{transform:none}body.ready .line:nth-child(2)>span{transition-delay:.12s}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:34px}
.hero-foot p{max-width:30em;font-size:16px;opacity:.92}
.circle-link{flex:none;width:72px;height:72px;border:1px solid rgba(233,225,212,.6);border-radius:50%;display:grid;place-items:center;text-decoration:none;font-size:22px;transition:background .3s,color .3s}
.circle-link:hover{background:var(--sand);color:var(--char)}
/* statement */
.statement{padding:clamp(100px,14vw,200px) var(--pad);display:grid;grid-template-columns:1fr;gap:70px}
.statement p{font-size:clamp(28px,3.5vw,54px);letter-spacing:-.03em;line-height:1.14;max-width:22em}
.statement .muted{color:#9b9184}
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(38,38,38,.2)}
.facts div{padding:20px 20px 0 0}.facts dt{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}.facts dd{font-size:20px}
/* sectors */
.sectors{background:var(--char);color:var(--sand);padding:clamp(70px,8vw,110px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:center;padding:0 var(--pad) 36px}
.sectors .label{color:var(--stone)}
.sec-ctrl{display:flex;align-items:center;gap:12px}
.counter{font-size:15px;margin-right:16px;font-variant-numeric:tabular-nums}.counter b{font-weight:500;font-size:28px}
.arrow{width:52px;height:52px;border-radius:50%;border:1px solid rgba(233,225,212,.35);background:none;color:var(--sand);font-size:18px;cursor:pointer;transition:background .3s,color .3s}
.arrow:hover{background:var(--sand);color:var(--char)}
.sec-viewport{overflow:hidden;cursor:grab;touch-action:pan-y}
.sec-viewport.drag{cursor:grabbing}
.sec-track{display:flex;gap:24px;padding:0 var(--pad);transition:transform .9s var(--ease);will-change:transform}
.slide{flex:0 0 min(78vw,1100px);display:grid;grid-template-columns:1.5fr 1fr;gap:30px;opacity:.35;transition:opacity .6s}
.slide.on{opacity:1}
.slide figure{overflow:hidden;aspect-ratio:16/11}
.slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.4s var(--ease);pointer-events:none;user-select:none}
.slide.on img{transform:scale(1)}
.slide-copy{display:flex;flex-direction:column;justify-content:space-between;padding:6px 0}
.slide-copy .n{font-size:13px;letter-spacing:.14em;color:var(--stone)}
.slide-copy h3{font-size:clamp(40px,4.6vw,76px);letter-spacing:-.045em;margin:14px 0 16px}
.slide-copy p{color:#bfb5a6;max-width:26em}
.slide-copy button{align-self:flex-start;margin-top:24px;background:none;border:0;border-bottom:1px solid var(--sand);color:var(--sand);font:500 14px var(--sans);padding:0 0 4px;cursor:pointer;letter-spacing:.04em}
.sec-progress{margin:44px var(--pad) 0;height:1px;background:rgba(233,225,212,.2)}.sec-progress i{display:block;height:100%;background:var(--sand);width:20%;transition:width .9s var(--ease)}
/* projects */
.projects{padding:clamp(100px,12vw,170px) var(--pad)}
.proj-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:54px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{background:none;border:1px solid rgba(38,38,38,.25);border-radius:999px;padding:9px 16px;font:500 14px var(--sans);color:var(--char);cursor:pointer;transition:all .3s}
.filters button sup{font-size:10px;margin-left:4px;color:var(--mute)}
.filters button[aria-pressed=true]{background:var(--char);color:var(--sand);border-color:var(--char)}.filters button[aria-pressed=true] sup{color:var(--stone)}
.proj-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:56px 24px}
.proj{grid-column:span 4;cursor:pointer;background:none;border:0;text-align:left;font:inherit;color:inherit;animation:pIn .7s var(--ease) both}
.proj:nth-child(5n+1){grid-column:span 7}.proj:nth-child(5n+2){grid-column:span 5}
@keyframes pIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.proj figure{overflow:hidden;aspect-ratio:4/3;margin-bottom:16px;background:var(--sand2)}
.proj:nth-child(5n+2) figure{aspect-ratio:4/5}
.proj img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s}
.proj:hover img,.proj:focus-visible img{transform:scale(1.05)}
.proj-meta{display:flex;justify-content:space-between;gap:16px;font-size:14px}
.proj-meta b{font-weight:500;font-size:18px;letter-spacing:-.02em}
.proj-meta span{color:var(--mute)}
/* practice */
.practice{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);padding:0 var(--pad) clamp(100px,12vw,170px);align-items:start}
.prac-img{position:sticky;top:90px;overflow:hidden;aspect-ratio:4/5}.prac-img img{width:100%;height:100%;object-fit:cover}
.prac-copy h2{margin:20px 0 50px}
.principles{list-style:none}
.principles li{display:grid;grid-template-columns:70px 1fr;padding:30px 0;border-top:1px solid rgba(38,38,38,.2)}
.principles span{font-size:14px;color:var(--mute);padding-top:6px}
.principles h3{font-size:30px;margin-bottom:10px}.principles p{color:var(--mute)}
/* contact */
.contact{background:var(--sand2);display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(30px,6vw,100px);padding:clamp(90px,11vw,160px) var(--pad)}
.contact h2{margin:20px 0 24px}.contact-copy>p:last-child{color:var(--mute);max-width:26em}
.enq fieldset{border:0;margin-bottom:30px}
.enq legend{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--mute);margin-bottom:14px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills button{background:transparent;border:1px solid rgba(38,38,38,.3);border-radius:999px;padding:10px 18px;font:500 14px var(--sans);cursor:pointer;color:var(--char);transition:all .25s}
.pills button[aria-pressed=true]{background:var(--char);color:var(--sand)}
.range-wrap{display:flex;align-items:center;gap:24px}
input[type=range]{flex:1;accent-color:var(--char);height:30px}
output{font-size:24px;letter-spacing:-.03em;min-width:150px;text-align:right}
.row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fld{display:block;margin-bottom:22px}.fld span{display:block;font-size:13px;color:var(--mute);margin-bottom:4px}
.fld input,.fld textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(38,38,38,.35);padding:10px 0;font:400 18px var(--sans);color:var(--ink);outline:none}
.fld input:focus,.fld textarea:focus{border-color:var(--char)}
.fld input[aria-invalid=true]{border-color:#a2412c}
.err{color:#a2412c;font-size:14px;min-height:22px;margin-bottom:10px}
.btn{display:inline-flex;gap:14px;align-items:center;background:var(--char);color:var(--sand);border:0;border-radius:999px;padding:18px 30px;font:500 15px var(--sans);cursor:pointer;transition:gap .3s}
.btn:hover{gap:22px}
.enq-done{margin-top:28px;padding:24px;border:1px solid rgba(38,38,38,.25)}
.enq-done h3{font-size:30px;margin-bottom:10px}.enq-done p{color:var(--mute);font-size:15px}.enq-done pre{white-space:pre-wrap;font:400 14px/1.6 var(--sans);background:var(--sand);padding:16px;margin:14px 0}
/* footer */
.ftr{background:var(--char);color:var(--sand);padding:clamp(60px,8vw,110px) var(--pad) 28px;overflow:hidden}
.ftr-big{font-size:clamp(64px,13.5vw,240px);letter-spacing:-.06em;line-height:.85;white-space:nowrap}
.ftr-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;margin-top:50px;padding-top:24px;border-top:1px solid rgba(233,225,212,.2);font-size:13px;color:var(--stone)}
.ftr-row span:nth-child(2){max-width:40em}
/* lightbox */
.lightbox{position:fixed;inset:0;z-index:80;background:var(--sand);display:grid;grid-template-columns:1.6fr 1fr;animation:lbIn .5s var(--ease)}
.lightbox[hidden]{display:none}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-fig{overflow:hidden;background:var(--sand2)}.lb-fig img{width:100%;height:100%;object-fit:cover;animation:pIn .7s var(--ease)}
.lb-info{padding:110px var(--pad) var(--pad);display:flex;flex-direction:column;overflow:auto}
.lb-info h3{font-size:clamp(40px,4vw,64px);margin:16px 0 20px}.lb-info>p{color:var(--mute)}
.lb-info dl{display:grid;grid-template-columns:auto 1fr;gap:10px 30px;margin:30px 0;padding:20px 0;border-top:1px solid rgba(38,38,38,.2);font-size:14px}
.lb-info dt{color:var(--mute)}
.lb-nav{margin-top:auto;display:flex;justify-content:space-between;align-items:center}
.lb-nav button,.lb-close{background:none;border:0;font:500 14px var(--sans);cursor:pointer;color:var(--char);letter-spacing:.04em}
.lb-close{position:absolute;top:26px;right:var(--pad);z-index:2;text-transform:uppercase}
/* reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal,.line>span{opacity:1;transform:none}.plan path{stroke-dashoffset:0}.loader-words span{opacity:1;transform:none}}
@media (max-width:900px){
 .hdr-meta{display:none}
 .menu{grid-template-columns:1fr}.menu-img{display:none}
 .menu-foot{flex-direction:column;gap:4px}
 .slide{flex-basis:86vw;grid-template-columns:1fr}
 .facts{grid-template-columns:1fr}
 .proj-grid{grid-template-columns:1fr 1fr;gap:40px 16px}
 .proj,.proj:nth-child(5n+1),.proj:nth-child(5n+2){grid-column:span 1}
 .proj:nth-child(3n+1){grid-column:1/-1}
 .practice,.contact{grid-template-columns:1fr}
 .prac-img{position:relative;top:0;aspect-ratio:16/11}
 .lightbox{grid-template-columns:1fr;grid-template-rows:45vh 1fr}
 .lb-info{padding-top:30px}
 .lb-close{background:var(--sand);padding:8px 12px;border-radius:999px;top:16px}
}
@media (max-width:560px){.proj-grid{grid-template-columns:1fr}.proj:nth-child(n){grid-column:1}.row{grid-template-columns:1fr;gap:0}.hero-foot p{font-size:15px}.circle-link{width:56px;height:56px}.sec-head{flex-direction:column;align-items:flex-start;gap:16px}.counter b{font-size:22px}output{font-size:18px;min-width:110px}}