/* NALA Studio. Layout: quiet greige ground, generous space, asymmetric image/text pairs; terracotta used only as accent. */
:root{
  --sand:#ECE6DF;        /* page ground, warm greige */
  --sand-2:#E2D9CF;      /* panels */
  --stone:#D3C7BA;       /* image placeholder */
  --terra:#885342;       /* NALA logo terracotta */
  --olive:#898562;       /* NALA logo olive */
  --brown:#885342;       /* footer */
  --charcoal:#232E2E;    /* NALA logo charcoal */
  --ink:#232E2E;
  --ink-soft:#5F6664;
  --rule:rgba(35,28,25,.16);
  --rule-light:rgba(236,230,223,.22);
  --f-sans:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gl:max(24px, env(safe-area-inset-left, 0px));
  --gr:max(24px, env(safe-area-inset-right, 0px));
  --max:1320px;
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--sand)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--f-sans);font-weight:400;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--sand)}
a{color:inherit}
p{margin:0}
img{display:block;max-width:100%}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance;letter-spacing:-.02em}
:focus-visible{outline:1px solid var(--terra);outline-offset:4px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.kicker{font-size:13px;color:var(--ink-soft);letter-spacing:.01em}
.kicker b{font-weight:500;color:var(--terra)}
.mono{font-size:12.5px;color:var(--ink-soft);letter-spacing:.01em}
.label{font-size:13px;font-weight:500;letter-spacing:.01em}
.display{font-size:clamp(32px,3.9vw,56px);line-height:1.08}
.more{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:500;font-size:15px;border-bottom:1px solid currentColor;padding-bottom:3px;transition:gap .25s,color .25s}
.more:hover{gap:14px;color:var(--terra)}
.more::after{content:"\2192"}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.top{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:20;color:var(--ink);transition:background .3s,box-shadow .3s}
.top.solid{background:color-mix(in srgb,var(--sand) 96%,transparent);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--rule)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:20px}
.wordmark{text-decoration:none;display:inline-flex;align-items:flex-end;gap:12px;line-height:1;white-space:nowrap}
.wordmark .mk{height:26px;width:auto;display:block}
.wordmark .st{font-size:11px;font-weight:400;letter-spacing:.46em;text-transform:uppercase;padding-bottom:1px}
.top nav{display:flex;gap:34px}
.top nav a{text-decoration:none;font-size:15px}
.top nav a:hover,.top nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.burger{display:none;appearance:none;background:none;border:0;padding:8px 0 8px 12px;cursor:pointer;color:inherit}
.burger i{display:block;width:26px;height:1.5px;background:currentColor;margin:6px 0}
@media (max-width:860px){.top nav{display:none}.burger{display:block}}
.scrim{position:fixed;inset:0;background:rgba(35,28,25,.35);z-index:40;opacity:0;pointer-events:none;transition:opacity .35s}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--sand);color:var(--ink);z-index:41;transform:translateX(100%);transition:transform .5s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;padding:calc(28px + env(safe-area-inset-top,0px)) max(32px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) 32px;overflow-y:auto}
body.menu-open .scrim{opacity:1;pointer-events:auto}
body.menu-open .panel{transform:none}
@media (prefers-reduced-motion: reduce){.panel,.scrim{transition:none}}
.close{align-self:flex-end;appearance:none;background:none;border:0;cursor:pointer;width:32px;height:32px;position:relative;color:inherit}
.close::before,.close::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1.5px;background:currentColor;transform:rotate(45deg)}
.close::after{transform:rotate(-45deg)}
.panel nav{display:grid;gap:6px;margin-top:40px}
.panel nav a{text-decoration:none;font-size:34px;letter-spacing:-.02em;padding:2px 0}
.panel .details{margin-top:auto;padding-top:40px;display:grid;gap:6px;font-size:15px;color:var(--ink-soft)}
.panel .details a{text-decoration:none}

/* home opener: film seen through the letters, opening up as you scroll */
.reveal{position:relative;height:200vh}
.reveal.still{height:auto}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--brown)}
.reveal.still .stage{position:relative}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mask{position:absolute;inset:0;background:var(--sand);mix-blend-mode:screen;display:grid;place-items:center;transform-origin:50% 47%;will-change:transform,opacity}
.mask .word{width:min(84vw,150vh);height:auto;display:block;transform:translateY(-5%)}
.lines{position:absolute;left:0;right:0;bottom:calc(14vh + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;gap:24px;padding-left:var(--gl);padding-right:var(--gr);max-width:var(--max);margin:0 auto;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.enter{position:absolute;left:50%;bottom:calc(32px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap}
.enter::after{content:"";display:block;width:1px;height:28px;background:currentColor;margin:10px auto 0;animation:drip 2.4s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion: reduce){.enter::after{animation:none}}
.cap{position:absolute;left:0;right:0;bottom:0;color:#fff;opacity:0;background:linear-gradient(180deg,rgba(35,28,25,0),rgba(35,28,25,.55))}
.cap .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding-block:120px calc(48px + env(safe-area-inset-bottom,0px))}
.cap h1{font-size:clamp(44px,7vw,104px);line-height:.96;font-weight:300;text-transform:uppercase;letter-spacing:-.01em}
.cap h1 b{font-weight:600}
.tagline{display:grid;gap:12px;max-width:30ch;font-size:17px}
.cap .kicker{color:rgba(255,255,255,.85)}
.vid-toggle{position:absolute;z-index:3;right:calc(var(--gr));top:calc(88px + env(safe-area-inset-top,0px));width:36px;height:36px;border-radius:50%;border:1px solid rgba(35,28,25,.35);background:rgba(236,230,223,.6);cursor:pointer;display:grid;place-items:center;padding:0}
.vid-toggle span{width:9px;height:11px;border-left:2.5px solid var(--ink);border-right:2.5px solid var(--ink)}
.vid-toggle.paused span{width:0;height:0;border:0;border-left:10px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
@media (max-width:640px){.lines{flex-direction:column;align-items:center;gap:6px;font-size:11px;bottom:calc(16vh + env(safe-area-inset-bottom,0px))}}

/* studio intro */
.intro{padding-block:150px 140px}
.intro .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.intro figure{grid-column:1/6;margin:0}
.intro figure img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--stone)}
.intro .txt{grid-column:7/13;display:grid;gap:44px;padding-top:40px}
.intro .body{display:grid;gap:18px;max-width:42ch;color:var(--ink-soft);margin-left:auto;margin-right:8%}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--rule);padding-top:22px}
.facts h3{font-size:16px;font-weight:500;margin-bottom:6px;letter-spacing:0}
.facts p{font-size:14.5px;color:var(--ink-soft)}
@media (max-width:900px){.intro{padding-block:96px}.intro .wrap{grid-template-columns:1fr;gap:40px}.intro figure,.intro .txt{grid-column:auto}.intro .txt{padding-top:0}.intro .body{margin:0}.facts{grid-template-columns:1fr}}

/* home: featured projects */
.featured{padding-bottom:40px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-bottom:40px}
.feat{padding-bottom:140px}
.feat-img{display:block;overflow:hidden;background:var(--stone)}
.feat-img img{width:100%;aspect-ratio:16/8;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.feat-img:hover img{transform:scale(1.02)}
.feat-row{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:36px;align-items:start}
.feat-title{grid-column:1/5}
.feat-title h3{font-size:clamp(28px,3vw,44px);line-height:1.08;margin-top:10px}
.feat-text{grid-column:5/9;display:grid;gap:24px;justify-items:start;color:var(--ink-soft)}
.feat-side{grid-column:10/13;margin:0;margin-top:-140px;position:relative}
.feat-side img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--stone);box-shadow:0 0 0 14px var(--sand)}
.feat.flip .feat-title{grid-column:5/9;grid-row:1}
.feat.flip .feat-text{grid-column:9/13;grid-row:1}
.feat.flip .feat-side{grid-column:1/4;grid-row:1}
@media (max-width:900px){.feat{padding-bottom:96px}.feat-img img{aspect-ratio:4/3}.feat-row,.feat.flip .feat-row{grid-template-columns:1fr;gap:20px}.feat-row>*,.feat.flip .feat-row>*{grid-column:auto!important;grid-row:auto!important}.feat-side{display:none}}
@media (prefers-reduced-motion: reduce){.feat-img img{transition:none}}
.all-link .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-block:36px 140px}
.all-link p{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.015em;max-width:28ch}

/* services */
.services{background:var(--sand-2)}
.services .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-block:140px}
.services .left{grid-column:1/6;display:grid;gap:28px;align-content:start}
.services .left p{color:var(--ink-soft);max-width:40ch}
.services .left img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-top:12px;background:var(--stone)}
.services .right{grid-column:7/13}
.svc{border-top:1px solid var(--rule)}
.svc:last-child{border-bottom:1px solid var(--rule)}
.svc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:40px 1fr auto;align-items:baseline;gap:12px;padding:26px 0}
.svc summary::-webkit-details-marker{display:none}
.svc summary .mono{color:var(--terra)}
.svc summary h3{font-size:clamp(21px,2vw,27px);letter-spacing:-.015em}
.pm{width:14px;height:14px;position:relative;align-self:center}
.pm::before,.pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor}
.pm::after{transform:rotate(90deg);transition:transform .25s}
.svc[open] .pm::after{transform:rotate(0)}
.svc .body{padding:0 0 30px 52px;display:grid;gap:14px;max-width:58ch;color:var(--ink-soft)}
.svc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px;color:var(--ink)}
@media (max-width:960px){.services .wrap{grid-template-columns:1fr;gap:48px;padding-block:96px}.services .left,.services .right{grid-column:auto}.svc .body{padding-left:0}}

/* process */
.process{padding-block:140px}
.process .sec-head{padding-bottom:48px}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.step{border-top:1px solid var(--ink);padding-top:20px;min-width:0}
.step .mono{color:var(--terra)}
.step h3{font-size:19px;letter-spacing:-.01em;margin:12px 0 8px}
.step p{font-size:15px;color:var(--ink-soft)}
@media (max-width:960px){.process{padding-block:96px}.steps{grid-template-columns:1fr 1fr;gap:32px 24px}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* enquiry */
.enquiry{display:grid;grid-template-columns:1fr 1fr;background:var(--sand-2)}
.enquiry .img{position:relative;min-height:560px;background:var(--stone)}
.enquiry .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.enquiry .inner{padding:110px max(48px,var(--gr)) 110px 72px;max-width:700px}
.enquiry .lead{margin-top:18px;color:var(--ink-soft);max-width:42ch}
.contacts{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:22px;font-size:15px}
.contacts a{text-decoration:none;border-bottom:1px solid var(--rule)}
form{display:grid;gap:22px;margin-top:44px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.f{display:grid;gap:4px}
.f span{font-size:13px;color:var(--ink-soft)}
input,textarea{font:inherit;font-size:17px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);padding:8px 0;border-radius:0;width:100%}
textarea{min-height:96px;resize:vertical}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--ink)}
fieldset{border:0;padding:0;margin:0}
legend{padding:0;margin-bottom:10px;font-size:13px;color:var(--ink-soft)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;font-size:14px;padding:7px 14px;border:1px solid var(--rule);border-radius:99px;cursor:pointer}
.chip input:checked + span{background:var(--ink);color:var(--sand);border-color:var(--ink)}
.chip input:focus-visible + span{outline:1px solid var(--terra);outline-offset:3px}
.send{justify-self:start;appearance:none;background:var(--ink);color:var(--sand);border:0;padding:15px 30px;font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:background .25s}
.send:hover{background:var(--terra)}
.note{font-size:15px;padding:14px 16px;border:1px solid var(--rule);background:var(--sand)}
@media (max-width:960px){.enquiry{grid-template-columns:1fr}.enquiry .img{min-height:320px}.enquiry .inner{padding:72px var(--gr) 80px var(--gl);max-width:none}}
@media (max-width:520px){.row2{grid-template-columns:1fr}}

/* footer */
footer{background:var(--brown);color:var(--sand);overflow:hidden}
footer .wrap{padding-block:96px 36px;display:grid;gap:64px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.fgrid p.big{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.015em;max-width:18ch;line-height:1.2}
.fgrid h4{margin:0 0 12px;font-size:13px;font-weight:400;opacity:.65}
.fgrid p,.fgrid a{font-size:15px;display:block;text-decoration:none;line-height:1.8;overflow-wrap:anywhere}
.fgrid a:hover{text-decoration:underline;text-underline-offset:4px}
.fword{display:block;width:calc(100% - 2*var(--gl));max-width:var(--max);height:auto;margin:0 auto -6vw;color:rgba(236,230,223,.09)}
.fbrand{display:grid;gap:28px;align-content:start}
.flogo{width:180px;height:auto;color:var(--sand)}
.ack{max-width:64ch;font-size:13.5px;opacity:.75;border-top:1px solid var(--rule-light);padding-top:24px}
.base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;opacity:.65}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}}
@media (max-width:480px){.fgrid{grid-template-columns:1fr}}

/* projects page */
.page-head{padding-block:calc(170px + env(safe-area-inset-top,0px)) 56px}
.page-head .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.page-head h1{grid-column:1/8;font-size:clamp(48px,7.5vw,112px);line-height:.95;letter-spacing:-.035em}
.page-head p{grid-column:9/13;color:var(--ink-soft)}
@media (max-width:760px){.page-head .wrap{grid-template-columns:1fr}.page-head h1,.page-head p{grid-column:auto}}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:36px}
.filters button{appearance:none;font:inherit;font-size:14px;padding:7px 15px;border:1px solid var(--rule);border-radius:99px;background:transparent;color:var(--ink);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--sand);border-color:var(--ink)}
.filters button:focus-visible{outline:1px solid var(--terra);outline-offset:3px}
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:80px 24px;padding-bottom:140px}
.card{text-decoration:none;display:block;min-width:0;grid-column:span 6}
.card .ph{overflow:hidden;background:var(--stone)}
.card .ph img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.card:hover .ph img{transform:scale(1.02)}
.card .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:18px}
.card h2{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.015em;min-width:0}
.card .sub{display:block;margin-top:4px;color:var(--ink-soft);font-size:15px}
.card.wide{grid-column:1/-1}
.card.wide .ph img{aspect-ratio:21/9}
.card:nth-child(3n+2){margin-top:0}.card:nth-child(3n){margin-top:120px}
@media (max-width:760px){.cards{grid-template-columns:1fr;gap:56px}.card,.card.wide{grid-column:auto;margin-top:0!important}.card.wide .ph img{aspect-ratio:4/3}}
.status{font-size:13px;white-space:nowrap;color:var(--ink-soft)}
.status::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;background:var(--terra);vertical-align:1px}
.status.concept::before{background:var(--olive)}
.also{padding-bottom:140px}
.plist{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--rule);columns:2;column-gap:24px}
.plist li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule);break-inside:avoid}
.plist h3{font-size:18px;letter-spacing:-.01em}
.plist .mono{white-space:nowrap}
@media (max-width:700px){.plist{columns:1}}

/* project page */
.p-hero{position:relative;height:min(92vh,900px);min-height:520px;overflow:hidden;color:#fff;background:var(--stone)}
.p-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,28,25,.25) 0%,rgba(35,28,25,0) 22%,rgba(35,28,25,0) 55%,rgba(35,28,25,.55) 100%)}
.p-hero .wrap{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-block:0 calc(48px + env(safe-area-inset-bottom,0px))}
.p-hero h1{font-size:clamp(40px,6vw,92px);line-height:.98;letter-spacing:-.03em;max-width:12ch}
.p-hero .status{color:#fff}
.p-hero .status::before{background:#fff}
.p-hero .status.concept::before{background:transparent;box-shadow:inset 0 0 0 1px #fff}
.top.on-photo:not(.solid){color:#fff}
.meta-bar{padding-block:64px 48px}
.meta-bar .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px}
.meta-bar dl{margin:0;border-top:1px solid var(--rule);padding-top:14px}
.meta-bar dt{color:var(--ink-soft);font-size:13px}
.meta-bar dd{margin:4px 0 0;font-size:17px}
@media (max-width:760px){.meta-bar .wrap{grid-template-columns:1fr 1fr}}
.project-body{padding-bottom:120px}
.spread{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.spread figure{margin:0;min-width:0}
.spread img{width:100%;height:100%;object-fit:cover}
.spread figcaption{margin-top:10px;display:flex;justify-content:space-between;gap:12px}
.ph{overflow:hidden;background:var(--stone)}
.s-a{grid-column:1/9}.s-a .ph{aspect-ratio:16/10}
.s-b,.s-b2,.w-b{display:flex;flex-direction:column;justify-content:flex-end;gap:16px;color:var(--ink-soft)}
.s-b{grid-column:9/13}.s-b2{grid-column:1/5}.w-b{grid-column:8/13}
.s-b .quote,.s-b2 .quote,.w-b .quote{font-size:clamp(22px,2vw,28px);line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.s-c{grid-column:1/6}.s-c .ph{aspect-ratio:4/5}
.s-d{grid-column:6/13}.s-d .ph{aspect-ratio:16/11}
.s-e{grid-column:1/13}.s-e .ph{aspect-ratio:21/9}
.s-f{grid-column:1/7}.s-f .ph{aspect-ratio:3/2}
.s-g{grid-column:7/13}.s-g .ph{aspect-ratio:3/2}
.s-h{grid-column:5/13}.s-h .ph{aspect-ratio:16/10}
.s-i{grid-column:1/8}.s-i .ph{aspect-ratio:16/11}
.s-j{grid-column:8/13}.s-j .ph{aspect-ratio:4/5}
.s-k{grid-column:span 4}.s-k .ph{aspect-ratio:4/3}
.d-p{grid-column:span 4}.d-p .ph{aspect-ratio:4/5}
.d-h{grid-column:span 6}.d-h .ph{aspect-ratio:5/4}
.w-a{grid-column:1/8}.w-a .ph{aspect-ratio:4/3}
.built{font-size:13px;font-weight:400;color:var(--terra)}
@media (max-width:860px){.spread{grid-template-columns:1fr;gap:32px}.spread>*{grid-column:auto!important}.s-c .ph,.d-p .ph,.d-h .ph{aspect-ratio:4/3}.s-e .ph{aspect-ratio:16/10}}
.next .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;border-top:1px solid var(--rule);padding-block:56px 120px}
.next .back{grid-column:1/5;display:grid;gap:18px;align-content:start}
.next .go{grid-column:6/13;text-decoration:none;display:grid;gap:14px}
.next .go .ph img{width:100%;aspect-ratio:16/8;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.next .go:hover .ph img{transform:scale(1.02)}
.next h2{font-size:clamp(26px,2.8vw,40px);letter-spacing:-.02em}
@media (max-width:760px){.next .wrap{grid-template-columns:1fr}.next .back,.next .go{grid-column:auto}}
.cta-band{background:var(--charcoal);color:var(--sand)}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-block:88px}
.cta-band h2{font-size:clamp(28px,3.2vw,46px);line-height:1.1;max-width:20ch}
.cta-band .more:hover{color:#fff}

/* split pages */
.pillars{padding-block:20px 140px}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.pgrid>div{border-top:1px solid var(--ink);padding-top:18px}
.pgrid .mono{color:var(--terra)}
.pgrid h3{font-size:21px;margin:10px 0 8px}
.pgrid p{color:var(--ink-soft);font-size:15.5px}
@media (max-width:900px){.pgrid{grid-template-columns:1fr 1fr;gap:32px 24px}}
@media (max-width:520px){.pgrid{grid-template-columns:1fr}}
.svc-link{display:grid;grid-template-columns:40px 1fr auto;align-items:baseline;gap:12px;padding:26px 0;border-top:1px solid var(--rule);text-decoration:none;transition:color .25s,padding .25s}
.svc-link:nth-last-child(2){border-bottom:1px solid var(--rule)}
.svc-link .mono{color:var(--terra)}
.svc-link h3{font-size:clamp(21px,2vw,27px);letter-spacing:-.015em}
.svc-link::after{content:"\2192";color:var(--terra)}
.svc-link:hover{color:var(--terra);padding-left:8px}
.svc-all{margin-top:32px}
@media (prefers-reduced-motion: reduce){.svc-link{transition:none}}
.cdetails{padding-bottom:64px}
.cdetails .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.cdetails dl{margin:0;border-top:1px solid var(--rule);padding-top:14px}
.cdetails dt{font-size:13px;color:var(--ink-soft)}
.cdetails dd{margin:4px 0 0;font-size:17px;overflow-wrap:anywhere}
.cdetails a{text-decoration:none;border-bottom:1px solid var(--rule)}
@media (max-width:760px){.cdetails .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.cdetails .wrap{grid-template-columns:1fr}}
.page-head + .services .wrap,.page-head + .intro{padding-top:40px}

/* lightbox */
.project-body .spread .ph img{cursor:zoom-in}
.project-body .spread figure:focus-visible{outline:1px solid var(--terra);outline-offset:4px}
.lb{position:fixed;inset:0;z-index:60;background:#1C1613;color:#ECE6DF;display:grid;grid-template-rows:auto 1fr auto;opacity:0;pointer-events:none;transition:opacity .3s}
.lb.open{opacity:1;pointer-events:auto}
.lb:not(.open){visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.lb-top,.lb-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(16px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 12px max(20px,env(safe-area-inset-left,0px));font-size:13px}
.lb-bot{padding:12px max(20px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));justify-content:center;opacity:.8}
.lb-stage{position:relative;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0 72px}
.lb-stage img{display:block;max-width:100%;max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px);object-fit:contain;user-select:none;-webkit-user-drag:none;transition:opacity .25s}
.lb button{appearance:none;background:none;border:0;color:inherit;cursor:pointer;font:inherit}
.lb-close{width:40px;height:40px;position:relative}
.lb-close::before,.lb-close::after{content:"";position:absolute;left:9px;right:9px;top:50%;height:1.5px;background:currentColor;transform:rotate(45deg)}
.lb-close::after{transform:rotate(-45deg)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;font-size:26px!important;opacity:.75}
.lb-nav:hover{opacity:1}
.lb-prev{left:8px}.lb-next{right:8px}
.lb button:focus-visible{outline:1px solid #ECE6DF;outline-offset:2px}
@media (max-width:700px){.lb-stage{padding:0}.lb-nav{display:none}}
@media (prefers-reduced-motion: reduce){.lb,.lb-stage img{transition:none}}

[hidden]{display:none!important}
.cards.filtered .card{margin-top:0!important}

/* founder / name */
.founder{padding-block:40px 140px}
.founder .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;border-top:1px solid var(--rule);padding-top:64px}
.acro{grid-column:1/7;margin:0;display:grid;gap:2px;font-size:clamp(34px,4.6vw,68px);line-height:1.02;letter-spacing:-.03em;font-weight:300;color:var(--ink-soft)}
.acro b{font-weight:500;color:var(--terra)}
.ftxt{grid-column:8/13;display:grid;gap:18px;color:var(--ink-soft)}
.ftxt .display{color:var(--ink)}
@media (max-width:900px){.founder{padding-block:24px 96px}.founder .wrap{grid-template-columns:1fr;gap:36px;padding-top:48px}.acro,.ftxt{grid-column:auto}}
.svc[id],section[id]{scroll-margin-top:96px}

/* founder name lockup, refined */
.founder .acro{grid-column:1/6;display:grid;gap:22px;font-size:inherit;line-height:1;color:var(--ink)}
.acro-mark{width:min(100%,340px);height:auto;color:var(--ink)}
.acro-line{margin:0;font-size:12px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:6px 14px}
.acro-line span{color:var(--terra)}
@media (max-width:900px){.founder .acro{grid-column:auto}.acro-mark{width:220px}}
@media (max-width:900px){.acro-line{flex-direction:column;gap:6px}.acro-line span{display:none}}

.founder .acro{color:var(--ink)}
.acro-lockup{display:block;width:min(100%,420px);height:auto}
@media (max-width:900px){.acro-lockup{width:min(100%,300px)}}

.studio-head h1{color:var(--ink)}
.studio-head .acro-lockup{width:min(100%,560px)}
@media (max-width:760px){.studio-head .acro-lockup{width:min(100%,320px)}}
@media (min-width:1001px){.cdetails .wrap{grid-template-columns:repeat(5,1fr)}}
@media (min-width:761px) and (max-width:1000px){.cdetails .wrap{grid-template-columns:repeat(3,1fr)}}
picture{display:contents}