@font-face{font-family:Supreme;src:url(assets/regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Supreme;src:url(assets/bold.ttf) format("truetype");font-weight:600;font-display:swap}

:root{
 --green:#1F5132;--green-deep:#163b25;--green-tint:#e7eee8;
 --ink:#17211b;--muted:#646e68;--line:#dde2dc;--paper:#f4f3ee;--white:#fff;
 --serif:Newsreader,Georgia,serif;--sans:Supreme,"Helvetica Neue",Arial,sans-serif;
 --g:clamp(20px,4.4vw,80px);
 --ease:cubic-bezier(.2,.7,.2,1);--ease-io:cubic-bezier(.76,0,.24,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 17px/1.6 var(--sans);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--green);outline-offset:4px}

/* ---------- type scale (one scale, used everywhere) ---------- */
.display{font:300 clamp(46px,6.4vw,104px)/1 var(--serif);letter-spacing:-.025em}
.h1{font:300 clamp(40px,5vw,76px)/1.04 var(--serif);letter-spacing:-.02em}
.h2{font:300 clamp(32px,3.4vw,52px)/1.1 var(--serif);letter-spacing:-.015em}
.h3{font:400 clamp(22px,1.8vw,28px)/1.2 var(--serif)}
.h4{font:600 17px/1.35 var(--sans)}
.lead{font-size:clamp(18px,1.4vw,21px);line-height:1.55;color:var(--muted)}
.body{color:var(--muted)}
.small{font-size:14px;color:var(--muted)}
.label{font:600 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.meta{font:600 10.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.meta i{font-style:normal;margin:0 .7em;opacity:.45}
em.s{font-family:var(--serif);font-style:italic;font-weight:300}

.wrap{padding-left:var(--g);padding-right:var(--g)}
.sec{padding-top:clamp(72px,9vw,140px);padding-bottom:clamp(72px,9vw,140px)}
.sec.tight{padding-top:clamp(48px,6vw,90px);padding-bottom:clamp(48px,6vw,90px)}
.paper{background:var(--paper)}
.green{background:var(--green);color:#fff}
.green .body,.green .lead,.green .small,.green .meta{color:#c9dacd}

.link{display:inline-flex;align-items:center;gap:.5em;font-size:15px;padding-bottom:4px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease)}
.link:hover{background-size:0 1px;background-position:100% 100%}
.link b{font-weight:400;transition:transform .4s var(--ease)}
.link:hover b{transform:translate(3px,-3px)}
.btn{display:inline-flex;align-items:center;gap:.7em;height:52px;padding:0 26px;border-radius:999px;background:var(--green);color:#fff;font-size:15px;transition:background .3s}
.btn:hover{background:var(--green-deep)}
.btn.light{background:#fff;color:var(--green)}
.btn.ghost{background:transparent;border:1px solid currentColor}

/* ---------- header ---------- */
header{position:fixed;inset:0 0 auto;z-index:50;height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--g);color:var(--ink);background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:background .4s,color .4s,border-color .4s,transform .5s var(--ease)}
header.scrolled{border-color:var(--line)}
header.hide{transform:translateY(-100%)}
body.over-hero header:not(.scrolled){background:transparent;color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
.wordmark{display:flex;align-items:center;gap:12px}
.wordmark b{font:600 25px/1 var(--sans);letter-spacing:.02em}
.wordmark span{border-left:1px solid currentColor;padding-left:12px;font:600 8.5px/1.25 var(--sans);letter-spacing:.2em}
.wordmark .city{font:600 8.5px/1.25 var(--sans);font-style:normal;letter-spacing:.2em;text-transform:uppercase;opacity:.9;padding-left:12px;border-left:1px solid currentColor;align-self:stretch;display:flex;align-items:center}
header nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);font-size:14px}
header nav a{position:relative;padding:6px 0}
header nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
header nav a:not(.btn):hover::after,header nav a.on::after{transform:scaleX(1);transform-origin:left}
header .btn{height:40px;padding:0 18px;font-size:13.5px}
body.over-hero header:not(.scrolled) .btn{background:#fff;color:var(--green)}
.menu-btn{display:none;font-size:14px}
.menu{position:fixed;inset:0;z-index:60;background:var(--green);color:#fff;padding:24px var(--g);display:flex;flex-direction:column;transform:translateY(-100%);transition:transform .7s var(--ease-io);visibility:hidden}
.menu.open{transform:none;visibility:visible}
.menu .top{display:flex;justify-content:space-between;align-items:center;height:30px}
.menu nav{margin-top:auto;display:grid;gap:8px}
.menu nav a{font:300 44px/1.15 var(--serif)}
.menu .small{color:#c9dacd;margin-top:40px}

/* ---------- reveal transitions ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
.mask{overflow:hidden;position:relative;background:var(--paper)}
.mask>img,.mask>video{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.8s var(--ease)}
.mask::after{content:"";position:absolute;inset:0;background:var(--paper);transform-origin:top;transition:transform 1.2s var(--ease-io)}
.green .mask::after{background:var(--green)}
.mask.in::after{transform:scaleY(0)}
.mask.in>img,.mask.in>video{transform:scale(1.001)}
a:hover .mask.in>img{transform:scale(1.035)}
@media(prefers-reduced-motion:reduce){.rv,.mask>img,.mask>video,.mask::after{transition:none!important;opacity:1;transform:none}.mask::after{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;max-height:1100px;color:#fff;overflow:hidden;background:#1a2a20}
.hero-scenes{position:absolute;inset:0;isolation:isolate}
.hero-scene{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;z-index:0}
.hero-scene.active{opacity:1;visibility:visible;z-index:2}.hero-scene.leaving{opacity:1;visibility:visible;z-index:1}
.hero-scene video{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%}
.hero-shade{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(6,14,9,.42),transparent 24%,transparent 52%,rgba(6,14,9,.6) 78%,rgba(6,14,9,.9))}
.hero-copy{position:absolute;z-index:4;left:var(--g);bottom:56px;max-width:720px}
.hero-copy .label{opacity:.88}
.hero-copy .display{font-size:clamp(40px,4.6vw,76px);line-height:1.02;margin:18px 0 28px}
.hero-actions{display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.cta-glass,.cta-text{display:inline-flex;align-items:center;gap:14px;white-space:nowrap;font-size:15px;letter-spacing:.01em;color:#fff}
.ar{width:24px;height:10px;fill:none;stroke:currentColor;stroke-width:1.2;transition:transform .5s var(--ease)}
.cta-glass:hover .ar,.cta-text:hover .ar{transform:translateX(5px)}
.cta-glass{height:52px;padding:0 24px 0 26px;border-radius:999px;background:rgba(31,81,50,.24);border:1px solid rgba(190,225,200,.32);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);transition:background .35s,border-color .35s}
.cta-glass:hover{background:rgba(31,81,50,.5);border-color:rgba(190,225,200,.55)}
.cta-text{color:rgba(255,255,255,.88);padding:6px 0}
.hero-gal{position:absolute;z-index:4;right:var(--g);bottom:56px;width:min(420px,34vw)}
.hero-now{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:14px}
.hero-nm,.hero-mt{overflow:hidden}
.hero-nm span,.hero-mt span{display:inline-block}
.hero-nm{font:400 19px/1.25 var(--serif)}
.hero-mt{font:600 10px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:4px}
.hero-ct{font-size:12px;color:rgba(255,255,255,.62);white-space:nowrap}
.hero-segs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.hero-segs button{position:relative;height:14px}
.hero-segs button::before,.hero-segs button i{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:rgba(255,255,255,.25)}
.hero-segs button i{background:#a9dbb8;box-shadow:0 0 8px rgba(169,219,184,.45);transform:scaleX(0);transform-origin:left}
.hero-segs button.done i{transform:scaleX(1);opacity:.4;box-shadow:none}
@keyframes drip{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- clients ---------- */
.clients{display:grid;grid-template-columns:minmax(200px,1fr) 3.6fr;align-items:center;gap:40px;padding-top:44px;padding-bottom:44px;border-bottom:1px solid var(--line)}
.clients-head h2{font:300 26px/1.15 var(--serif);color:var(--ink)}
.clients-head p{font:600 10.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.logos{display:grid;grid-template-columns:repeat(6,1fr);align-items:center}
.logos li{position:relative;display:flex;align-items:center;justify-content:center;height:96px}
.logos li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line);transform:scaleY(0);transform-origin:top;transition:transform .9s var(--ease) calc(var(--i)*90ms)}
.logos img{height:var(--h,40px);width:auto;max-width:150px;max-width:min(150px,86%);opacity:0;transform:translateY(22px) scale(.96);filter:blur(4px);transition:opacity .9s var(--ease) calc(var(--i)*110ms + 150ms),transform 1s var(--ease) calc(var(--i)*110ms + 150ms),filter .9s var(--ease) calc(var(--i)*110ms + 150ms)}
.logos.in li::before{transform:scaleY(1)}
.logos.in img{opacity:1;transform:none;filter:none}
.logos.in li:hover img{transform:translateY(-3px) scale(1.04);transition-delay:0s;transition-duration:.45s}
@media(prefers-reduced-motion:reduce){.logos img{opacity:1;transform:none;filter:none;transition:none}.logos li::before{transform:none}}
/* ---------- statement (words light up on scroll) ---------- */
.statement{display:grid;grid-template-columns:1fr 3.4fr;gap:40px}
.statement p.h2{max-width:22ch}
.statement .w{color:#c6cfc8;transition:color .5s}
.statement .w.lit{color:var(--green)}
.statement .after{display:flex;gap:28px;align-items:center;margin-top:40px}

/* ---------- what we do ---------- */
.wwd{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(40px,7vw,120px);align-items:start}
.wwd-head{position:sticky;top:120px}
.wwd-head .h2{margin:20px 0 22px}
.wwd-figure{margin-top:36px;aspect-ratio:4/3.1;width:100%}
.wwd-figure img{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease),transform 1.6s var(--ease)!important}
.wwd-figure img.on{opacity:1}
.svc-list li{border-top:1px solid var(--line)}
.svc-list li:last-child{border-bottom:1px solid var(--line)}
.svc-list a{display:grid;grid-template-columns:44px 1fr 24px;gap:12px;padding:28px 0;align-items:start;transition:padding .5s var(--ease)}
.svc-list a:hover{padding-left:10px}
.svc-list .n{font-size:12px;color:var(--muted);padding-top:8px}
.svc-list .h3{transition:color .3s}
.svc-list a:hover .h3{color:var(--green)}
.svc-list p{margin-top:8px;color:var(--muted);font-size:15.5px;max-width:48ch}
.svc-list .arr{padding-top:6px;opacity:.35;transition:opacity .3s,transform .4s var(--ease)}
.svc-list a:hover .arr{opacity:1;transform:translate(3px,-3px)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(64px,7vw,110px);border-top:1px solid var(--line)}
.pillars article{padding:34px 34px 0 0}
.pillars article+article{padding-left:34px;border-left:1px solid var(--line)}
.pillars .label{color:var(--green)}
.pillars .h3{margin:16px 0 12px}
.pillars p{font-size:15.5px;color:var(--muted)}
.soon{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--green-tint);color:var(--green);font:600 9.5px/1.6 var(--sans);letter-spacing:.12em;vertical-align:middle}

/* ---------- process strip ---------- */
.process-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:56px}
.process-head .h2{max-width:16ch;margin-top:18px}
.steps{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.steps::before,.steps .bar{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:#cfd6d0}
.steps .bar{background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform 2.2s var(--ease-io)}
.steps.in .bar{transform:scaleX(1)}
.steps li{position:relative;padding-top:38px}
.steps li::before{content:"";position:absolute;top:0;left:0;width:15px;height:15px;border-radius:50%;background:var(--paper);border:1px solid #b9c3bb;transition:background .4s,border-color .4s}
.steps.in li::before{background:var(--green);border-color:var(--green)}
.steps li:nth-child(2)::before{transition-delay:.35s}.steps li:nth-child(3)::before{transition-delay:.7s}.steps li:nth-child(4)::before{transition-delay:1.05s}.steps li:nth-child(5)::before{transition-delay:1.4s}.steps li:nth-child(6)::before{transition-delay:1.75s}
.steps .n{font-size:12px;color:var(--muted)}
.steps h3{font:400 21px/1.2 var(--serif);margin:6px 0 10px}
.steps p{font-size:14.5px;color:var(--muted)}
.steps li.key h3{color:var(--green)}
.steps li.key h3::after{content:"Where every project starts";display:block;font:600 9.5px/1.6 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-top:6px}

/* ---------- recent projects (Oktra-style feature + grid) ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:44px}
.sec-head .h2{margin-top:16px}
.feature{display:grid;grid-template-columns:1.55fr 1fr;background:var(--paper)}
.feature .mask{aspect-ratio:16/10.4;height:100%}
.feature .txt{padding:clamp(28px,4vw,64px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.feature .txt p{color:var(--muted)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,40px)}
.cards.mt{margin-top:clamp(20px,2.6vw,40px)}
.card .mask{aspect-ratio:4/3}
.card.tall .mask{aspect-ratio:4/4.6}
.card .meta{margin-top:18px}
.card h3{font:400 clamp(20px,1.6vw,24px)/1.3 var(--serif);margin-top:8px;max-width:34ch;transition:color .3s}
.card:hover h3{color:var(--green)}

/* ---------- group band ---------- */
.group{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,140px);align-items:end}
.group .h2{margin:18px 0 20px}
.cos{display:grid;gap:0}
.cos li{display:grid;grid-template-columns:14px 1fr auto;gap:16px;align-items:center;padding:22px 0;border-top:1px solid rgba(255,255,255,.2)}
.cos li:last-child{border-bottom:1px solid rgba(255,255,255,.2)}
.cos i{width:10px;height:10px;border-radius:50%}
.cos b{font:300 26px/1.2 var(--serif)}
.cos span{font-size:13px;color:#c9dacd}
.cos li.me b::after{content:"You are here";margin-left:12px;font:600 9.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.5);padding:4px 7px;border-radius:999px;vertical-align:middle}

/* ---------- CTA ---------- */
.cta{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end}
.cta .display{color:var(--green)}
.cta .side{display:grid;gap:22px;justify-items:start}
.cta .side p{color:var(--muted);max-width:40ch}

/* ---------- footer ---------- */
footer{background:var(--green-deep);color:#fff;padding-top:80px;padding-bottom:36px}
.f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:70px;border-bottom:1px solid rgba(255,255,255,.15)}
.f-top .h3{max-width:16ch}
.f-top h4{font:600 10.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#9fbfa9;margin-bottom:16px}
.f-top li{margin-bottom:8px;font-size:15px}
.f-top a:hover{opacity:.7}
.f-bot{display:flex;justify-content:space-between;gap:20px;padding-top:26px;font-size:12.5px;color:#9fbfa9;flex-wrap:wrap}

/* ---------- inner page head ---------- */
.ph{padding-top:calc(78px + clamp(56px,8vw,120px));padding-bottom:clamp(40px,5vw,72px);display:grid;grid-template-columns:1fr 3.4fr;gap:40px}
.ph .h1{max-width:18ch}
.ph .lead{max-width:56ch;margin-top:26px}
.crumb{font-size:13px;color:var(--muted)}
.crumb a:hover{color:var(--ink)}

/* ---------- portfolio ---------- */
.filter{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:sticky;top:78px;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);z-index:10}
.filter .meta{margin-right:6px}
.filter button{font-size:15px;color:var(--muted);padding:4px 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.filter button.on{color:var(--ink);border-color:var(--ink)}
.filter .count{margin-left:auto;font-size:13px;color:var(--muted)}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,4vw,64px) clamp(20px,2.6vw,40px)}
.pgrid .card{transition:opacity .5s var(--ease)}
.pgrid .card.out{display:none}
.pgrid .feature{grid-column:1/-1}

/* ---------- project page (sticky facts) ---------- */
.proj{display:grid;grid-template-columns:minmax(300px,1fr) 2.1fr;gap:clamp(40px,5vw,90px);align-items:start;padding-top:calc(78px + 56px)}
.facts{position:sticky;top:110px;display:grid;gap:30px;padding-bottom:40px}
.facts .h1{font-size:clamp(38px,3.6vw,58px)}
.facts .intro{color:var(--muted);font-size:16px}
.facts dl{display:grid;grid-template-columns:auto 1fr;border-top:1px solid var(--line)}
.facts dt,.facts dd{padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.facts dt{font:600 10.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:15px;padding-right:22px}
.facts dd.tbc{color:#a8b0aa;font-style:italic}
.facts .tags{display:flex;flex-wrap:wrap;gap:6px}
.facts .tags span{font-size:12.5px;padding:3px 10px;border:1px solid var(--line);border-radius:999px}
.facts .actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.flow{display:grid;gap:clamp(20px,2.4vw,36px);padding-bottom:clamp(60px,8vw,120px)}
.flow .row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,36px)}
.flow figure .mask{aspect-ratio:16/10}
.flow .row figure .mask{aspect-ratio:4/5}
.flow figcaption{font-size:13px;color:var(--muted);margin-top:12px;display:flex;justify-content:space-between;gap:12px}
.flow .quote{padding:clamp(28px,4vw,60px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.flow .quote p{font:300 clamp(24px,2.3vw,34px)/1.3 var(--serif);color:var(--green);max-width:30ch}
.flow .quote span{display:block;margin-top:14px}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,36px)}
.next{display:grid;grid-template-columns:1fr 1.4fr;align-items:center;gap:40px;border-top:1px solid var(--line)}
.next .mask{aspect-ratio:16/8}
.next .h1{transition:color .3s}
.next:hover .h1{color:var(--green)}

/* ---------- expertise list ---------- */
.xp{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(40px,6vw,100px);align-items:start}
.xp-list>li{border-top:1px solid var(--line)}
.xp-list>li:last-child{border-bottom:1px solid var(--line)}
.xp-item{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:38px 0}
.xp-item .n{font-size:12px;color:var(--muted);padding-top:10px}
.xp-item .h2{font-size:clamp(30px,2.7vw,42px);transition:color .3s}
.xp-list>li.on .h2{color:var(--green)}
.xp-item>div>p{margin-top:14px;color:var(--muted);max-width:56ch}
.xp-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;margin-top:24px}
.xp-cols h4{font:600 10.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.xp-cols li{font-size:15px;padding:5px 0;border-bottom:1px solid var(--line)}
.xp-cols .seen li{border:0;padding:3px 0}
.xp-item .link{margin-top:26px}
.xp-side{position:sticky;top:120px}
.xp-side .mask{aspect-ratio:4/5}
.xp-side img{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease)!important}
.xp-side img.on{opacity:1}
.xp-side p{margin-top:14px;font-size:13px;color:var(--muted)}
.xp-inline{display:none}

/* ---------- service page (design-led) ---------- */
.svc-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:end;padding-top:calc(78px + clamp(56px,7vw,100px))}
.svc-hero .mask{aspect-ratio:4/4.4}
.svc-hero .lead{margin-top:26px;max-width:46ch}
.design-band .sec-head{margin-bottom:56px}
.dgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(20px,2.4vw,36px)}
.dgrid figure .mask{aspect-ratio:4/3.4}
.dgrid figure:first-child .mask{aspect-ratio:auto;height:100%;min-height:340px}
.dgrid figure:first-child{grid-row:span 2;display:flex;flex-direction:column}
.dgrid figure:first-child .mask{flex:1}
.dgrid figcaption{margin-top:14px}
.dgrid figcaption b{display:block;font:400 21px/1.25 var(--serif)}
.dgrid figcaption span{font-size:14px;color:var(--muted)}
.dnote{grid-column:2/-1;align-self:end;padding:28px;border:1px solid rgba(255,255,255,.25)}
.paper .dnote{border-color:var(--line)}
.dnote p{font:300 22px/1.35 var(--serif)}
.stages{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.stages li{padding:30px 28px 0 0}
.stages li+li{padding-left:28px;border-left:1px solid var(--line)}
.stages .n{font:300 46px/1 var(--serif);color:var(--green)}
.stages h3{font:600 17px/1.3 var(--sans);margin:18px 0 8px}
.stages p{font-size:15px;color:var(--muted)}
.works{display:grid;grid-template-columns:1fr 2fr;gap:40px}
.works ul{columns:2;column-gap:40px}
.works li{break-inside:avoid;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;display:flex;gap:14px}
.works li span{color:var(--muted);font-size:12px;padding-top:3px;width:22px}
.proof{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.proof .mask{aspect-ratio:16/10}
.proof .h2{margin:16px 0}

/* ---------- approach ---------- */
.tl{display:grid;gap:0}
.tl>li{display:grid;grid-template-columns:1fr 3.4fr;gap:40px;padding:48px 0;border-top:1px solid var(--line)}
.tl>li:last-child{border-bottom:1px solid var(--line)}
.tl .num{position:sticky;top:120px;align-self:start;font:300 clamp(56px,6vw,96px)/.9 var(--serif);color:#cfd8d1;transition:color .6s}
.tl>li.in .num{color:var(--green)}
.tl .h2{font-size:clamp(28px,2.6vw,40px)}
.tl .body{margin-top:12px;max-width:60ch}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}
.tri h4{font:600 10.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:8px}
.tri p{font-size:15px;color:var(--muted)}
.tl>li.key{background:linear-gradient(90deg,var(--paper),var(--paper)) 0 0/100% 100% no-repeat}
.tl>li.key{margin:0 calc(var(--g)*-1);padding-left:var(--g);padding-right:var(--g)}
.tl .imgs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.tl .imgs .mask{aspect-ratio:4/3}

/* ---------- about ---------- */
.about-img .mask{aspect-ratio:21/9}
.values{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.values li{padding:34px 34px 0 0}
.values li+li{padding-left:34px;border-left:1px solid var(--line)}
.values .h3{margin:14px 0 10px}
.values p{color:var(--muted);font-size:15.5px}

/* ---------- contact ---------- */
.contact{padding-bottom:clamp(72px,9vw,140px);display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(40px,6vw,110px);align-items:start;padding-top:calc(78px + clamp(48px,6vw,90px))}
.contact .h1{margin:18px 0 18px}
.prog{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:40px 0 36px}
.prog li{font-size:12px;color:var(--muted);padding-top:12px;position:relative}
.prog li::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--line)}
.prog li::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.prog li.done::after,.prog li.on::after{transform:scaleX(1)}
.prog li.on{color:var(--ink)}
.q{margin-bottom:34px}
.q>label,.q>legend{display:block;font:400 22px/1.3 var(--serif);margin-bottom:16px;padding:0}
.q>label small,.q>legend small{font:400 13px var(--sans);color:var(--muted);margin-left:8px}
fieldset{border:0;margin:0;padding:0;min-width:0}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tiles.c4{grid-template-columns:repeat(4,1fr)}
.tiles.c2{grid-template-columns:repeat(2,1fr)}
.tiles label{position:relative;display:block;cursor:pointer}
.tiles input{position:absolute;opacity:0;pointer-events:none}
.tiles span{display:flex;flex-direction:column;gap:4px;min-height:100%;padding:16px 16px 15px;border:1px solid var(--line);border-radius:10px;font-size:15px;transition:border-color .25s,background .25s,box-shadow .25s}
.tiles span small{font-size:12.5px;color:var(--muted)}
.tiles label:hover span{border-color:#b6c2b9}
.tiles input:checked+span{border-color:var(--green);background:var(--green-tint);box-shadow:inset 0 0 0 1px var(--green)}
.tiles input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 18px}
.fields .full{grid-column:1/-1}
.f label{display:block;font-size:13px;color:var(--muted);margin-bottom:7px}
.f input,.f textarea,.f select{width:100%;border:0;border-bottom:1px solid #c9d1cb;padding:10px 0 11px;background:transparent;font-size:17px;border-radius:0;transition:border-color .3s}
.f textarea{min-height:110px;resize:vertical}
.f input:focus,.f textarea:focus,.f select:focus{outline:0;border-color:var(--green)}
.drop{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px dashed #b9c4bc;border-radius:10px;padding:18px 20px;font-size:14.5px;color:var(--muted);cursor:pointer}
.drop b{font-weight:400;color:var(--ink)}
.drop input{display:none}
.form-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.form-actions .back{font-size:15px;color:var(--muted)}
.step{animation:stepin .6s var(--ease)}
@keyframes stepin{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.review{display:grid;grid-template-columns:auto 1fr;border-top:1px solid var(--line)}
.review dt,.review dd{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.review dt{color:var(--muted);padding-right:30px}
.notice{margin-top:22px;padding:16px 18px;border-radius:10px;background:var(--paper);font-size:14px;color:var(--muted)}
.c-side{position:sticky;top:120px;display:grid;gap:30px}
.c-side .mask{aspect-ratio:4/3.3}
.next-steps li{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:16px 0;border-top:1px solid var(--line)}
.next-steps li span{font:300 22px/1 var(--serif);color:var(--green)}
.next-steps li p{font-size:15px;color:var(--muted)}
.next-steps li b{display:block;font-weight:400;color:var(--ink);margin-bottom:2px}
.direct{display:grid;gap:6px;font-size:15px}
.direct .tbc{color:#a8b0aa;font-style:italic}

/* ---------- responsive ---------- */
@media(max-width:1100px){
 .steps{grid-template-columns:repeat(3,1fr);row-gap:40px}
 .steps::before,.steps .bar{display:none}
 .stages{grid-template-columns:1fr 1fr}.stages li:nth-child(3){padding-left:0;border-left:0}.stages li{padding-bottom:30px}
 .f-top{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
 header nav{display:none}.menu-btn{display:block}
 .hero-copy{bottom:150px;right:var(--g)}
 .hero-gal{left:var(--g);right:var(--g);width:auto;bottom:28px}
 .clients,.statement,.wwd,.group,.cta,.ph,.feature,.proj,.xp,.svc-hero,.proof,.works,.next,.contact{grid-template-columns:1fr}
 .clients{gap:22px}.logos li{height:76px}.logos img{height:calc(var(--h,40px)*.78);max-width:90px}
 .wwd-head,.facts,.xp-side,.c-side{position:static}
 .wwd-figure{display:none}
 .pillars,.values{grid-template-columns:1fr}.pillars article+article,.values li+li{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:30px}
 .pillars article,.values li{padding-right:0}
 .process-head,.sec-head{flex-direction:column;align-items:flex-start}
 .pgrid,.cards,.flow .row,.ba,.dgrid,.tri,.tl>li,.tl .imgs{grid-template-columns:1fr}
 .dgrid figure:first-child{grid-row:auto}.dgrid figure:first-child .mask{min-height:0;aspect-ratio:4/3}.dnote{grid-column:auto}
 .tl .num{position:static;font-size:52px}
 .xp-side{display:none}.xp-inline{display:block;margin-top:22px}.xp-inline .mask{aspect-ratio:4/3}
 .xp-cols{grid-template-columns:1fr}
 .works ul{columns:1}
 .tiles,.tiles.c4{grid-template-columns:1fr 1fr}
 .fields{grid-template-columns:1fr}
 .f-top{grid-template-columns:1fr}
 .statement .after{flex-wrap:wrap}
}
@media(max-width:560px){
 :root{--g:20px}
 body{font-size:16px}
 header{height:66px}.wordmark b{font-size:22px}
 .hero{min-height:600px}
 .logos{grid-template-columns:repeat(3,1fr);row-gap:4px}.logos li{height:72px}.logos li:nth-child(3n+1)::before{display:none}

 .steps,.stages{grid-template-columns:1fr}.stages li{padding-left:0!important;border-left:0!important}
 .tiles.c2{grid-template-columns:1fr}
 .ph,.proj,.svc-hero,.contact{padding-top:calc(66px + 40px)}
 .filter{top:66px;gap:16px}.filter .count{display:none}
 .menu nav a{font-size:36px}
}

/* green-glass system: header button matches the hero button */
body.over-hero header:not(.scrolled) .btn{background:rgba(31,81,50,.24);color:#fff;border:1px solid rgba(190,225,200,.32);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
header .btn{border-radius:999px}
@media(max-width:560px){
 .hero-shade{background:linear-gradient(180deg,rgba(6,14,9,.45),transparent 22%,rgba(6,14,9,.25) 42%,rgba(6,14,9,.72) 60%,rgba(6,14,9,.92))}
 .hero-actions{gap:20px;flex-wrap:nowrap}
 .cta-glass{height:48px;padding:0 18px 0 20px;font-size:14px;gap:10px}
 .cta-text{font-size:14px;gap:10px}
 .ar{width:20px}
 .hero-copy{bottom:140px}
}

/* ---------- who we are (aligned media grid, deep green) ---------- */
.who{background:var(--green-deep);color:#fff}
.who-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(48px,6vw,100px);align-items:center;padding-top:clamp(64px,7vw,110px);padding-bottom:clamp(64px,7vw,110px)}
.who-media{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:8px;height:min(70vh,620px)}
.wm{position:relative;margin:0;overflow:hidden;min-height:0}
.wm0{grid-column:1;grid-row:1/3}.wm1{grid-column:2;grid-row:1}.wm2{grid-column:2;grid-row:2}.wm3{grid-column:3;grid-row:1/3}
.wm .mask{position:absolute;inset:0;background:#10301d}
.wm .mask>img,.wm .mask>video{width:100%;height:100%;object-fit:cover}
.wm1 img{object-position:50% 45%}.wm2 img{object-position:40% 65%}.wm3 img{object-position:45% 60%}
.wm .mask::after{background:var(--green-deep);transition-delay:calc(var(--i)*110ms)}
.wm::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:3px;background:#a9dbb8;transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) calc(var(--i)*140ms + .6s)}
.wm:has(.mask.in)::after{transform:scaleX(.28)}
.wm:hover::after{transform:scaleX(1);transition-delay:0s;transition-duration:.6s}
.wm .mask{box-shadow:inset 0 0 0 1px rgba(169,219,184,.14)}
.who-media::before{content:"";position:absolute;width:56px;height:56px;border-left:1px solid rgba(169,219,184,.55);border-top:1px solid rgba(169,219,184,.55);transform:translate(-14px,-14px)}
.who-media::after{content:"";position:absolute;right:0;bottom:0;width:56px;height:56px;border-right:1px solid rgba(169,219,184,.55);border-bottom:1px solid rgba(169,219,184,.55);transform:translate(14px,14px)}
.who-media{position:relative}
.wm:hover .mask.in>img{transform:scale(1.04)}
.who-text .label{color:#a9dbb8}
.who-h{font:300 clamp(32px,3.2vw,50px)/1.08 var(--serif);letter-spacing:-.015em;margin:18px 0 20px;max-width:15ch}
.who-h em{font-style:italic;color:#a9dbb8}
.who-p{color:#c9dacd;max-width:42ch;font-size:16.5px;line-height:1.65}
.who-disc{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:30px;padding:16px 0;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#e6efe8}
.who-disc i{width:4px;height:4px;border-radius:50%;background:#a9dbb8;opacity:.8}
.who-links{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:30px}
@media(max-width:960px){
 .who-grid{grid-template-columns:1fr}
 .who-media{height:auto;grid-template-rows:62vw 62vw}
}

/* ---------- scroll transitions ---------- */
body.fx3 .hero{overflow:hidden}
body.fx3 .who{will-change:clip-path}
.logos li,.cg{will-change:transform,opacity}
body[class*="fx"] .logos img{transition:none;opacity:1;transform:none;filter:none}
body[class*="fx"] .logos li::before{transform:none}
.fx-switch{position:fixed;z-index:200;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.95);color:#17211b;box-shadow:0 8px 30px rgba(0,0,0,.25);font-size:13px}
.fx-switch span{padding:0 10px;font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#646e68}
.fx-switch button{padding:8px 14px;border-radius:999px;color:#17211b}
.fx-switch button.on{background:#163b25;color:#fff}
@media(max-width:560px){.fx-switch button{padding:8px 10px;font-size:12px}.fx-switch span{display:none}}

.who-kick{display:flex;align-items:center;gap:14px;font:600 13px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#a9dbb8}
.who-kick::before{content:"";width:36px;height:1.5px;background:#a9dbb8}

/* ---------- what we do · expanding panels ---------- */
.wwd-top{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end;margin-bottom:40px}
.wwd-top .h2{margin-top:16px;max-width:18ch}
.wwd-top .body{max-width:40ch;justify-self:end}
.who-kick.dark{color:var(--green)}.who-kick.dark::before{background:var(--green)}
.xpan{display:flex;gap:8px;height:min(64vh,560px)}
.xp{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:4px;background:#13301f;color:#fff;transition:flex .9s var(--ease)}
.xp.on{flex:4.4}
.xp-media{position:absolute;inset:0}
.xp-media>video,.xp-gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xp-gal img{opacity:0;transform:scale(1.06);transition:opacity 1s,transform 6s linear}
.xp-gal img.on{opacity:1;transform:scale(1)}
.xp-draw{position:absolute;inset:0;background:#f4f1e8}
.xp-svg{position:absolute;inset:6% 6% 22% 6%}
.xp-svg svg{width:100%;height:100%}
.xp-svg path{fill:transparent;stroke:#1F5132;stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.xp.run .xp-svg path{animation:xpdraw 2.4s var(--d,0s) cubic-bezier(.6,.1,.3,1) forwards}
@keyframes xpdraw{to{stroke-dashoffset:0}}
.xp-ren{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .6s}
.xp.on .xp-ren{opacity:0}
.xp.run .xp-ren{animation:xpren 1.6s 4.6s ease forwards}
@keyframes xpren{to{opacity:1}}
.xp[data-kind="draw"]:nth-child(4) .xp-ren{object-fit:contain;background:#f4f1e8}
/* legibility: a deep bottom shade, stronger when closed */
.xp::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(6,18,11,.35) 0%,rgba(6,18,11,0) 26%,rgba(6,18,11,0) 46%,rgba(6,18,11,.78) 82%,rgba(6,18,11,.92));transition:opacity .6s}
.xp:not(.on)::after{background:linear-gradient(180deg,rgba(6,18,11,.55),rgba(6,18,11,.35) 40%,rgba(6,18,11,.88))}
.xp-n{position:absolute;z-index:3;left:18px;top:16px;font:600 10.5px/1 var(--sans);letter-spacing:.14em;color:#a9dbb8}
.xp-lab{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:24px 22px 22px;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.xp-lab b{display:block;font:300 clamp(22px,1.9vw,30px)/1.1 var(--serif);white-space:nowrap}
.xp-lab span{display:block;max-width:44ch;margin-top:8px;font-size:14.5px;color:#d6e6da;opacity:0;transform:translateY(8px);transition:opacity .5s .25s,transform .6s .25s var(--ease)}
.xp-lab em{display:inline-flex;align-items:center;gap:10px;margin-top:12px;font-style:normal;font-size:13.5px;color:#a9dbb8;opacity:0;transition:opacity .5s .35s}
.xp.on .xp-lab span{opacity:1;transform:none}
.xp.on .xp-lab em{opacity:1}
.xp:not(.on) .xp-lab b{position:absolute;left:20px;bottom:22px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:21px}
@media(max-width:860px){
 .wwd-top{grid-template-columns:1fr}.wwd-top .body{justify-self:start}
 .xpan{flex-direction:column;height:auto}
 .xp{flex:none;height:76px;transition:height .8s var(--ease)}
 .xp.on{height:380px}
 .xp:not(.on) .xp-lab b{writing-mode:horizontal-tb;transform:none;position:static;font-size:19px}
 .xp:not(.on) .xp-lab{padding:0 18px 0 54px;top:0;display:flex;align-items:center}
 .xp-n{top:30px}
}
@media(prefers-reduced-motion:reduce){.xp.run .xp-svg path{animation:none;stroke-dashoffset:0}.xp.run .xp-ren{animation:none;opacity:1}}
/* drawing panels: keep the paper clean, shade only behind the text */
.xp[data-kind="draw"].on::after{background:linear-gradient(180deg,transparent 58%,rgba(6,18,11,.55) 78%,rgba(6,18,11,.9))}
.xp[data-kind="draw"].on .xp-svg{inset:5% 8% 26% 8%}

/* ---- sketch → photo, v2 ---- */
.xp-draw{background:#f2eee3 radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.55),transparent 70%)}
.xp-draw::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(31,81,50,.05) 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,rgba(31,81,50,.05) 0 1px,transparent 1px 28px)}
.xp-svg{transition:opacity 2.6s ease}
.xp-svg svg{overflow:visible}
.xp-svg path{fill:transparent;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.xp-svg g.ink{filter:url(#pencil)}
.xp-svg g.ink path{stroke:#2c3631;stroke-width:1.05;opacity:.88}
.xp-svg g.ghost{filter:url(#pencil2)}
.xp-svg g.ghost path{stroke:#4c5a52;stroke-width:.7;opacity:.3}
.xp.run .xp-svg path{animation:xpdraw 1.6s var(--d,0s) cubic-bezier(.55,.05,.35,1) forwards}
.xp-ren{opacity:1;transition:opacity .6s}
.xp.on .xp-ren{opacity:0}
.xp.run .xp-ren{animation:xpreveal 3.2s 3.6s cubic-bezier(.4,0,.2,1) forwards}
@keyframes xpreveal{0%{opacity:0;filter:blur(14px) grayscale(.9) contrast(.8) brightness(1.15);transform:scale(1.06)}45%{opacity:.75}100%{opacity:1;filter:none;transform:none}}
.xp.run .xp-svg{animation:xpsketchout 2.8s 4.2s ease forwards;mix-blend-mode:multiply;z-index:1}
@keyframes xpsketchout{to{opacity:0}}
.xp-draw .xp-ren{z-index:0}
.xp[data-kind="draw"].on .xp-svg{inset:7% 5% 24% 5%}
/* ---- joinery: drawn → rendered → built ---- */
.xj .xj-pair{position:absolute;inset:6% 0 24% 0;display:flex;justify-content:center;align-items:flex-start;gap:5%}
.xj figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center}
.xj-a{transform:translateX(42%);transition:none}
.xj-box{position:relative;height:92%;aspect-ratio:409/907}
.xj-box .xp-svg,.xj-box .xp-ren{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:fill!important}
.xj-box .xp-ren{opacity:0}
.xj-dim{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:#1F5132;stroke-width:.6;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.xj-dim path{stroke-dasharray:400;stroke-dashoffset:400}
.xj-h,.xj-w{position:absolute;font:600 9.5px/1 var(--sans);letter-spacing:.12em;color:#1F5132;opacity:0}
.xj-h{left:-34px;top:50%;transform:rotate(-90deg) translateX(50%);transform-origin:left}
.xj-w{left:50%;bottom:-24px;transform:translateX(-50%)}
.xj figcaption{margin-top:12px;font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#1F5132;opacity:0}
.xj-b{opacity:0;transform:translateX(30px)}
.xj-vid{height:92%;aspect-ratio:720/1280;overflow:hidden;clip-path:inset(0 0 0 100%);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.xj-vid video{width:100%;height:100%;object-fit:cover;display:block}
/* timeline */
.xp.run .xj-dim path{animation:xjdim 1.2s 2.6s ease forwards}
@keyframes xjdim{to{stroke-dashoffset:0}}
.xp.run .xj-h,.xp.run .xj-w{animation:xjfade .6s 3.5s forwards}
.xp.run .xj-a figcaption{animation:xjfade .6s 1s forwards}
@keyframes xjfade{to{opacity:1}}
.xp.run .xj-box .xp-ren{animation:xpreveal 3s 4.2s cubic-bezier(.4,0,.2,1) forwards}
.xp.run .xj-box .xp-svg{animation:xpsketchout 2.6s 4.8s ease forwards}
.xp.run .xj-a{animation:xjslide 1.4s 7.4s cubic-bezier(.65,0,.35,1) forwards}
@keyframes xjslide{to{transform:none}}
.xp.run .xj-b{animation:xjin 1.2s 7.8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes xjin{to{opacity:1;transform:none}}
.xp.run .xj-vid{animation:xjwipe 1.4s 7.9s cubic-bezier(.65,0,.35,1) forwards}
@keyframes xjwipe{to{clip-path:inset(0 0 0 0)}}
.xp.run .xj-b figcaption{animation:xjfade .6s 8.8s forwards}
.xp:not(.on) .xj-pair{opacity:.9}
.xp[data-kind="join"].on::after{background:linear-gradient(180deg,transparent 64%,rgba(6,18,11,.6) 82%,rgba(6,18,11,.9))}
.xp[data-kind="join"]:not(.on) .xj-a{transform:none}
.xp[data-kind="join"]:not(.on) .xj-box .xp-ren{opacity:1}
.xp[data-kind="join"]:not(.on) .xj-b,.xp[data-kind="join"]:not(.on) .xj-dim,.xp[data-kind="join"]:not(.on) .xp-svg{display:none}
.xj figcaption{margin-top:40px}
.xj .xj-pair{inset:5% 0 26% 0}
.xj-w{bottom:-22px}

/* ---- design & planning: plan → perspective study with notes → as built ---- */
.xd .xd-plan{inset:8% 6% 26% 6%!important;transition:none}
.xd-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);aspect-ratio:1672/941;min-width:100%;min-height:100%}
.xd-box .xp-svg,.xd-box .xp-ren,.xd-box .xd-notes{position:absolute;inset:0;width:100%;height:100%}
.xd-box .xp-svg svg{width:100%;height:100%}
.xd-box .xp-svg svg{transform:none}
.xd-box .xp-ren{object-fit:fill;opacity:0}
.xd-persp g.ink path{stroke:#2c3631;stroke-width:.9;opacity:.8}
.xd-notes{overflow:visible;pointer-events:none}
.xd-n line{stroke:#1F5132;stroke-width:1;fill:none;stroke-dasharray:4 3;opacity:0}
.xd-n text{font:500 clamp(13px,1.2vw,18px)/1 'Caveat',cursive;fill:#1F5132;opacity:0;paint-order:stroke;stroke:#f2eee3;stroke-width:4px}
.xd-tag{position:absolute;z-index:3;right:16px;top:14px;font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#1F5132;background:rgba(242,238,227,.85);padding:6px 8px;border-radius:3px;opacity:0}
.xp:not(.on) .xd-plan,.xp:not(.on) .xd-persp,.xp:not(.on) .xd-notes,.xp:not(.on) .xd-tag{display:none}
.xp[data-kind="design"]:not(.on) .xd-box .xp-ren{opacity:1}
.xp[data-kind="design"].on::after{background:linear-gradient(180deg,transparent 60%,rgba(6,18,11,.55) 80%,rgba(6,18,11,.9))}
/* timeline (seconds after hover) */
.xp.run .xd-plan path{animation:xpdraw 1.2s var(--d,0s) cubic-bezier(.55,.05,.35,1) forwards}
.xp.run .xd-plan{animation:xdplanout .9s 3.3s ease forwards}
@keyframes xdplanout{to{opacity:0;transform:scale(.94)}}
.xp.run .xd-t1{animation:xdtag 3.4s .2s forwards}
.xp.run .xd-t2{animation:xdtag 4.4s 3.8s forwards}
.xp.run .xd-t3{animation:xdtagin .8s 9s forwards}
@keyframes xdtag{0%,100%{opacity:0}10%,85%{opacity:1}}
@keyframes xdtagin{to{opacity:1}}
.xp.run .xd-persp path{animation:xpdraw 1.4s var(--d,0s) cubic-bezier(.55,.05,.35,1) forwards}
.xp.run .xd-n line{animation:xdnote .5s calc(6.2s + var(--n)*.35s) forwards}
.xp.run .xd-n text{animation:xdnote .7s calc(6.4s + var(--n)*.35s) forwards}
@keyframes xdnote{to{opacity:1}}
.xp.run .xd-box .xp-ren{animation:xpreveal 3s 8.6s cubic-bezier(.4,0,.2,1) forwards}
.xp.run .xd-persp,.xp.run .xd-notes{animation:xpsketchout 2.6s 9.4s ease forwards}
.xd-persp{mix-blend-mode:multiply;z-index:2}.xd-notes{z-index:3}.xd-box .xp-ren{z-index:1}
.xd-n text{dominant-baseline:auto}
.xd-n line{stroke-dasharray:3 3}
.xd-n circle{fill:#1F5132}

/* joinery layout v2: two equal frames, no overlaps */
.xj .xj-pair{inset:5% 6% 27% 6%;gap:clamp(28px,4vw,64px)}
.xj-a{transform:translateX(calc(50% + clamp(14px,2vw,32px)))}
.xj-box,.xj-vid{height:calc(100% - 34px)}
.xj figcaption{margin-top:14px}
.xj-w{bottom:-18px;font-size:9px}
.xj-h{left:-28px}
.xj-box .xp-svg g.ink path{stroke-width:1;opacity:.9}
.xj-box,.xj-vid{height:calc(100% - 52px)}
.xj figcaption{margin-top:32px}
.xj-b figcaption{margin-top:32px}

/* dimension label sits below its line, clear of captions */
.xj-w{bottom:-44px!important;background:none}
.xj-dim path:last-child{transform:translateY(0)}
.xj figcaption{margin-top:58px!important}
.xj-box,.xj-vid{height:calc(100% - 78px)!important}

/* ---------- lower sections (from mock) ---------- */
.nglogo{display:inline-flex;flex-direction:column;line-height:1;color:var(--c)}
.nglogo b{font:800 30px/1 Archivo,sans-serif;font-stretch:125%;letter-spacing:-.005em}
.nglogo i{display:flex;align-items:center;gap:5px;margin-top:5px;font-style:normal}
.nglogo u{width:7px;height:7px;border-radius:50%;display:block}
.nglogo em{font:400 8.5px/1 'IBM Plex Mono',monospace;letter-spacing:.42em;color:#5e6066;margin-left:6px;font-style:normal}
.gr-c .nglogo em{color:#c9dacd}.gr-c .nglogo u:first-child{box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.gr-b .nglogo{margin:0 auto 18px}
/* compact list v2 */
.pr-d{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pr-d a{display:grid;grid-template-columns:168px 1fr;gap:22px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:8px;transition:border-color .3s,background .3s}
.pr-d a:hover{border-color:#c8d3cb;background:var(--paper)}
.pr-d figure{aspect-ratio:1/1;overflow:hidden;border-radius:5px}
.pr-d img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pr-d a:hover img{transform:scale(1.06)}
.pr-d .m{font:600 9.5px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.pr-d h3{font:400 22px/1.2 var(--serif);margin:4px 0 8px}
.pr-d p{font-size:14.5px;color:var(--mut);line-height:1.55}
.pr-d .go{display:inline-flex;align-items:center;gap:10px;margin-top:12px;font-size:13.5px;color:var(--green)}
/* process D · photo cards on a route */
.pd{position:relative}
.pd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.pd-c{position:relative;border-radius:8px;overflow:hidden;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s}
.pd-c:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(16,40,26,.12)}
.pd-ph{position:relative;aspect-ratio:16/9;overflow:hidden;background:#13301f}
.pd-ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);mix-blend-mode:luminosity;opacity:.85;transition:filter .7s,opacity .7s,transform 1.2s var(--ease)}
.pd-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,59,37,.15),rgba(22,59,37,.55));transition:opacity .7s}
.pd-c:hover .pd-ph img{filter:none;mix-blend-mode:normal;opacity:1;transform:scale(1.05)}
.pd-c:hover .pd-ph::after{opacity:.25}
.pd-n{position:absolute;z-index:2;left:18px;bottom:12px;font:300 64px/1 var(--serif);color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.pd-stage{position:absolute;z-index:2;right:14px;top:14px;font:600 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(10,30,18,.55);padding:6px 9px;border-radius:999px;backdrop-filter:blur(6px)}
.pd-b{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.pd-b h3{font:400 24px/1.15 var(--serif)}
.pd-b p{font-size:14.5px;color:var(--mut);margin:8px 0 16px}
.pd-out{margin-top:auto;display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px dashed #cdd6cf;font-size:13.5px}
.pd-out svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--green);stroke-width:1.5}
.pd-out b{font:600 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-right:4px}
.pd-bar{height:3px;background:var(--line);position:relative}
.pd-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--green)}
.pd-c.key{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.pd-c.key .pd-stage{background:var(--mint);color:var(--gd)}
.gr-c{display:flex;align-items:center;gap:18px;padding-top:26px;padding-bottom:26px;background:var(--gd);color:#fff}
.gr-c .logo{width:86px}
.gr-c p{font-size:14.5px;color:#c9dacd}.gr-c p b{color:#fff;font-weight:400;font-family:var(--serif);font-size:18px;margin-right:8px}
.gr-c .link{margin-left:auto;color:var(--mint);font-size:14px}

.nglogo{display:inline-flex;flex-direction:column;line-height:1;color:var(--c)}
.nglogo b{font:800 30px/1 Archivo,sans-serif;font-stretch:125%;letter-spacing:-.005em}
.nglogo i{display:flex;align-items:center;gap:5px;margin-top:5px;font-style:normal}
.nglogo u{width:7px;height:7px;border-radius:50%;display:block}
.nglogo em{font:400 8.5px/1 'IBM Plex Mono',monospace;letter-spacing:.42em;color:#5e6066;margin-left:6px;font-style:normal}
.gr-c .nglogo em{color:#c9dacd}.gr-c .nglogo u:first-child{box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.gr-b .nglogo{margin:0 auto 18px}
/* compact list v2 */
.pr-d{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pr-d a{display:grid;grid-template-columns:168px 1fr;gap:22px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:8px;transition:border-color .3s,background .3s}
.pr-d a:hover{border-color:#c8d3cb;background:var(--paper)}
.pr-d figure{aspect-ratio:1/1;overflow:hidden;border-radius:5px}
.pr-d img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pr-d a:hover img{transform:scale(1.06)}
.pr-d .m{font:600 9.5px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.pr-d h3{font:400 22px/1.2 var(--serif);margin:4px 0 8px}
.pr-d p{font-size:14.5px;color:var(--mut);line-height:1.55}
.pr-d .go{display:inline-flex;align-items:center;gap:10px;margin-top:12px;font-size:13.5px;color:var(--green)}
/* process D · photo cards on a route */
.pd{position:relative}
.pd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.pd-c{position:relative;border-radius:8px;overflow:hidden;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s}
.pd-c:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(16,40,26,.12)}
.pd-ph{position:relative;aspect-ratio:16/9;overflow:hidden;background:#13301f}
.pd-ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);mix-blend-mode:luminosity;opacity:.85;transition:filter .7s,opacity .7s,transform 1.2s var(--ease)}
.pd-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,59,37,.15),rgba(22,59,37,.55));transition:opacity .7s}
.pd-c:hover .pd-ph img{filter:none;mix-blend-mode:normal;opacity:1;transform:scale(1.05)}
.pd-c:hover .pd-ph::after{opacity:.25}
.pd-n{position:absolute;z-index:2;left:18px;bottom:12px;font:300 64px/1 var(--serif);color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.pd-stage{position:absolute;z-index:2;right:14px;top:14px;font:600 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(10,30,18,.55);padding:6px 9px;border-radius:999px;backdrop-filter:blur(6px)}
.pd-b{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.pd-b h3{font:400 24px/1.15 var(--serif)}
.pd-b p{font-size:14.5px;color:var(--mut);margin:8px 0 16px}
.pd-out{margin-top:auto;display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px dashed #cdd6cf;font-size:13.5px}
.pd-out svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--green);stroke-width:1.5}
.pd-out b{font:600 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-right:4px}
.pd-bar{height:3px;background:var(--line);position:relative}
.pd-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--green)}
.pd-c.key{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.pd-c.key .pd-stage{background:var(--mint);color:var(--gd)}
@media(max-width:860px){.pr-d,.pd-grid{grid-template-columns:1fr}.pr-d a{grid-template-columns:110px 1fr}}

.ca{background:var(--gd);color:#fff;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end;position:relative;overflow:hidden}
.ca::after{content:"";position:absolute;right:-12vw;top:-30%;width:46vw;height:46vw;border-radius:50%;border:1px solid rgba(169,219,184,.18);pointer-events:none}
.ca h2{font:300 clamp(48px,6vw,96px)/1 var(--serif);letter-spacing:-.025em}
.ca h2 em{font-style:italic;color:var(--mint)}
.ca .side p{color:#c9dacd;max-width:40ch;margin-bottom:24px}
.ca .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.ca .chips span{font-size:13px;padding:7px 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#dfe9e2}

.pa-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:44px}
.gr-c .link{display:inline-flex;align-items:center;gap:12px}
.ca .cta-glass{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35)}
@media(max-width:860px){.pr-d,.pd-grid{grid-template-columns:1fr}.pr-d a{grid-template-columns:110px 1fr}.ca{grid-template-columns:1fr}.pa-head{flex-direction:column;align-items:flex-start}.gr-c{flex-wrap:wrap}}

/* how a project runs · photo track */
.pc-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin-right:calc(var(--g)*-1);padding-right:var(--g);scrollbar-width:none;cursor:grab}
.pc-track::-webkit-scrollbar{display:none}
.pc-track.drag{cursor:grabbing;scroll-snap-type:none}
.pc-track.drag img{pointer-events:none}
.pc-c{flex:0 0 clamp(270px,26vw,360px);scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s}
.pc-c:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(16,40,26,.12)}
.pc-c.key{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.pc-c.key .pd-stage{background:var(--mint);color:var(--gd)}
.pc-c figure{position:relative;aspect-ratio:4/3;overflow:hidden;background:#13301f;margin:0}
.pc-c figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pc-c:hover figure img{transform:scale(1.05)}
.pc-c figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,24,14,.55))}
.pc-c .pd-n,.pc-c .pd-stage{z-index:2}
.pc-b{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.pc-b h3{font:400 24px/1.15 var(--serif)}
.pc-b p{font-size:14.5px;color:var(--mut);margin:8px 0 16px}
.pc-hint{display:flex;align-items:center;gap:20px;margin-top:22px;font-size:13px;color:var(--mut)}
.pc-nav{display:flex;gap:6px}
.pc-nav button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);color:var(--ink);transition:background .3s,color .3s}
.pc-nav button:hover{background:var(--green);color:#fff;border-color:var(--green)}
.pc-hint .bar{flex:1;max-width:320px;height:2px;background:var(--line);position:relative;margin-left:auto}
.pc-hint .bar i{position:absolute;left:0;top:0;bottom:0;width:16%;background:var(--green);transition:width .2s}
:root{--gd:#163b25;--mint:#a9dbb8;--paper:#f4f3ee}
.cta-text.dark,.pa-head .cta-text{color:var(--ink)}
.gr-c{border-bottom:1px solid rgba(255,255,255,.12)}

/* ===== finishing pass: at-a-glance lower page ===== */
.slim{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin-top:34px;border-top:1px solid var(--line)}
.slim li{padding:16px 22px 0 0;display:flex;flex-direction:column;gap:2px}
.slim li+li{padding-left:22px;border-left:1px solid var(--line)}
.slim b{font:600 10.5px/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.slim span{font:400 17px/1.35 var(--serif);color:var(--ink)}
.six{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;counter-reset:x}
.six li{display:flex;flex-direction:column}
.six figure{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:6px;margin:0;background:#13301f}
.six img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.six li:hover img{transform:scale(1.06)}
.six figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,24,14,.6))}
.six figure span{position:absolute;z-index:2;left:12px;bottom:8px;font:300 38px/1 var(--serif);color:#fff}
.six li.key figure{box-shadow:0 0 0 2px var(--green)}
.six h3{font:400 19px/1.2 var(--serif);margin:12px 0 4px}
.six li.key h3{color:var(--green)}
.six p{font-size:13.5px;line-height:1.5;color:var(--mut)}
.six em{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:10px;font-style:normal;font-size:12.5px;color:var(--green)}
.six em svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}
.tiles4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.t4{position:relative;display:block;aspect-ratio:3/4;border-radius:8px;overflow:hidden;color:#fff;background:#13301f}
.t4 figure{position:absolute;inset:0;margin:0}
.t4 img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.t4:hover img{transform:scale(1.06)}
.t4::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,24,14,0) 35%,rgba(8,24,14,.86));transition:background .5s}
.t4:hover::after{background:linear-gradient(180deg,rgba(8,24,14,.15) 10%,rgba(8,24,14,.92))}
.t4-c{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:18px 18px 18px}
.t4-c .m{font:600 9.5px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.t4-c h3{font:400 21px/1.15 var(--serif);margin-top:4px}
.t4-c .d{font-size:13.5px;line-height:1.5;color:#d6e6da;max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .5s,margin .5s}
.t4-c .go{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--mint);max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .5s}
.t4:hover .t4-c .d{max-height:90px;opacity:1;margin-top:8px}
.t4:hover .t4-c .go{max-height:30px;opacity:1;margin-top:10px}
@media(hover:none){.t4-c .d{max-height:90px;opacity:1;margin-top:6px}}
.ca2{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px;background:var(--gd);color:#fff;padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px)}
.ca2 h2{font:300 clamp(34px,3.6vw,54px)/1 var(--serif);letter-spacing:-.02em;white-space:nowrap}
.ca2 h2 em{font-style:italic;color:var(--mint)}
.ca2 p{color:#c9dacd;max-width:44ch;font-size:15px}
.ca2 .cta-glass{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35)}
footer.ft2{background:var(--gd);color:#fff;padding-top:0;padding-bottom:26px}
.ft2 nav{display:flex;flex-wrap:wrap;gap:8px 28px;padding:22px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);font-size:14px}
.ft2 nav a:hover{color:var(--mint)}
.ft2-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:20px;flex-wrap:wrap}
.ft2-g{display:flex;align-items:center;gap:18px}
.ft2-g>span{font-size:12.5px;color:#9fbfa9}
.ft2 .nglogo b{font-size:22px}.ft2 .nglogo u:first-child{box-shadow:0 0 0 1px rgba(255,255,255,.55)}.ft2 .nglogo em{color:#9fbfa9}
.ft2-c{font-size:12px;color:#9fbfa9}
@media(max-width:1100px){.six{grid-template-columns:repeat(3,1fr);row-gap:28px}.tiles4{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.ca2{grid-template-columns:1fr;gap:18px}.ca2 h2{white-space:normal}.slim{grid-template-columns:1fr}.slim li+li{padding-left:0;border-left:0}}
@media(max-width:560px){.six{grid-template-columns:1fr 1fr;gap:12px}.six p{display:none}}
#what{padding-bottom:clamp(48px,5vw,72px)}
#what+section{padding-top:clamp(64px,7vw,100px)}
.ft2 .nglogo,.ft2 .nglogo b{color:#fff}

/* process: green separation */
.proc{position:relative;border-top:3px solid var(--green);background:linear-gradient(180deg,#f3f7f4,#fff 260px)}
.proc .pa-head{padding-bottom:28px;border-bottom:1px solid #d5e2d8;margin-bottom:32px}
.proc .pa-head .cta-text{border:1px solid var(--green);border-radius:999px;padding:10px 18px;color:var(--green)}
.proc .pa-head .cta-text:hover{background:var(--green);color:#fff}
/* closing CTA card */
.ca3{background:var(--gd);padding-top:clamp(36px,4vw,56px);padding-bottom:clamp(36px,4vw,56px)}
.ca3-in{display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px;padding:clamp(28px,3.4vw,48px);border:1px solid rgba(169,219,184,.35);border-radius:12px;background:linear-gradient(120deg,rgba(169,219,184,.08),rgba(169,219,184,0) 60%);position:relative;overflow:hidden}
.ca3-in::after{content:"";position:absolute;right:-80px;top:-120px;width:340px;height:340px;border-radius:50%;border:1px solid rgba(169,219,184,.18);pointer-events:none}
.ca3 .who-kick{color:var(--mint)}.ca3 .who-kick::before{background:var(--mint)}
.ca3 h2{font:300 clamp(38px,4.2vw,64px)/1 var(--serif);letter-spacing:-.02em;color:#fff;margin:14px 0 12px}
.ca3 h2 em{font-style:italic;color:var(--mint)}
.ca3-t>p:last-child{color:#c9dacd;max-width:52ch;font-size:16px}
.ca3-a{display:flex;flex-direction:column;align-items:stretch;gap:12px;min-width:240px;position:relative;z-index:1}
.ca3-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;height:58px;padding:0 24px 0 28px;border-radius:999px;background:var(--mint);color:var(--gd);font-size:16px;font-weight:600;transition:background .3s,transform .3s}
.ca3-btn:hover{background:#fff;transform:translateY(-2px)}
.ca3-sec{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;height:50px;padding:0 24px 0 28px;border-radius:999px;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:15px;transition:background .3s}
.ca3-sec:hover{background:rgba(255,255,255,.08)}
@media(max-width:860px){.ca3-in{grid-template-columns:1fr}.ca3-a{min-width:0}}

/* perspective sketch: pencil sweep reveal */
.xd-sk{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:2;opacity:0;-webkit-mask-image:linear-gradient(100deg,#000 0 42%,transparent 58% 100%);mask-image:linear-gradient(100deg,#000 0 42%,transparent 58% 100%);-webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-position:100% 0;mask-position:100% 0}
.xd-sk{filter:grayscale(1) contrast(1.25) brightness(1.04)}
.xd-sk2{filter:none;-webkit-mask-image:linear-gradient(100deg,#000 0 46%,transparent 54% 100%);mask-image:linear-gradient(100deg,#000 0 46%,transparent 54% 100%)}
.xp:not(.on) .xd-sk{display:none}
.xp.run .xd-sk{animation:xdsk 2.6s 3.5s cubic-bezier(.55,.1,.35,1) forwards,xpsketchout 2.6s 9.4s ease forwards}
.xp.run .xd-sk2{animation:xdsk 1.8s 5.2s cubic-bezier(.55,.1,.35,1) forwards,xpsketchout 2.6s 9.4s ease forwards}
@keyframes xdsk{0%{opacity:1;-webkit-mask-position:100% 0;mask-position:100% 0}100%{opacity:1;-webkit-mask-position:0 0;mask-position:0 0}}

/* detailed pencil plan + joinery sketch, swept on */
.xd-pl{position:absolute;inset:3% 3% 20% 3%;width:94%;height:77%;object-fit:contain;z-index:2;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(100deg,#000 0 44%,transparent 56% 100%);mask-image:linear-gradient(100deg,#000 0 44%,transparent 56% 100%);-webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-position:100% 0;mask-position:100% 0}
.xp:not(.on) .xd-pl{display:none}
.xp.run .xd-pl{animation:xdsk 2.4s .3s cubic-bezier(.55,.1,.35,1) forwards,xdplanout .9s 3.3s ease forwards}
.xj-sk{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:2;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(180deg,#000 0 44%,transparent 56% 100%);mask-image:linear-gradient(180deg,#000 0 44%,transparent 56% 100%);-webkit-mask-size:100% 260%;mask-size:100% 260%;-webkit-mask-position:0 100%;mask-position:0 100%}
.xp:not(.on) .xj-sk{display:none}
.xp.run .xj-sk{animation:xjsk 2.6s .2s cubic-bezier(.55,.1,.35,1) forwards,xpsketchout 2.6s 4.8s ease forwards}
@keyframes xjsk{to{-webkit-mask-position:0 0;mask-position:0 0}}
/* hero: scenes + caption link to their project */
.hero-shade{pointer-events:none}
.hero-link{display:inline-flex;align-items:baseline;gap:12px;color:inherit}
.hero-link .hero-go{font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.7;transition:opacity .3s,transform .4s}
.hero-link:hover .hero-go{opacity:1;transform:translateX(4px)}
/* smooth page-to-page transitions */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s ease-out both}
::view-transition-new(root){animation:vt-in .32s ease-out both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

html{scroll-behavior:auto;overflow-anchor:auto}
html.boot .rv,html.boot .rv2,html.boot .up,html.boot .rise,html.boot .band2,html.boot .rh,html.boot .rh .num{transition:none!important}
/* calm reveal: images fade in softly instead of a sliding cover (no column wipe) */
.mask::after{display:none}
.mask>img,.mask>video{opacity:0;transform:scale(1.03);transition:opacity 1.1s var(--ease),transform 1.6s var(--ease)}
.mask.in>img,.mask.in>video{opacity:1;transform:none}
.wm::after{display:none}
.wm .mask>img,.wm .mask>video{transition-delay:calc(var(--i,0)*90ms)}
html.boot .mask>img,html.boot .mask>video{transition:none!important}
/* collage: no animation at all */
.wm .mask>img,.wm .mask>video{opacity:1!important;transform:none!important;transition:none!important}
.who,.who-text,.wm{transform:none!important}
/* ===== WhatsApp section (homepage) ===== */
.wa-sec{background:var(--green-deep,#10291a);color:#fff;padding:clamp(72px,8vw,120px) var(--g,5vw)}
.wa-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;max-width:1440px;margin:0 auto}
.wa-t{grid-column:1/7}.wa-t .who-kick{color:#a9dbb8}
.wa-t h2{font:300 clamp(40px,4.6vw,68px)/1.02 var(--serif);letter-spacing:-.03em;margin:18px 0 18px}.wa-t h2 em{color:#a9dbb8}
.wa-t p{color:#c9dacd;font-size:17px;line-height:1.6;max-width:42ch}
.wa-acts{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:34px}
.wa-b{display:inline-flex;align-items:center;gap:14px;background:#fff;color:#10291a;border-radius:999px;padding:8px 26px 8px 8px;font:600 16px/1 var(--sans);transition:transform .3s}
.wa-b:hover{transform:translateY(-2px)}
.wa-b .ic,.wap .ic{border-radius:50%;background:#1F5132;color:#fff;display:flex;align-items:center;justify-content:center}
.wa-b .ic{width:48px;height:48px}.wa-b svg{width:24px;height:24px}
.wa-o{display:inline-flex;align-items:center;gap:10px;color:#fff;font-size:15px;border-bottom:1px solid rgba(169,219,184,.6);padding-bottom:3px}
.wa-chat{grid-column:8/13;background:#efeae2;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(0,0,0,.6);color:#17211b}
.wa-ch{display:flex;align-items:center;gap:12px;background:#fff;padding:14px 16px;border-bottom:1px solid #e3ddd3}
.wa-ch .av{width:40px;height:40px;border-radius:50%;background:#10291a;color:#fff;display:flex;align-items:center;justify-content:center;font:800 9.5px/1 Archivo,sans-serif;font-stretch:125%}
.wa-ch b{font:600 15px/1.2 var(--sans)}.wa-ch span{display:block;font-size:12px;color:#5f6963}
.wa-body{padding:20px 16px;display:flex;flex-direction:column;gap:10px}
.bb{max-width:80%;padding:9px 12px;border-radius:10px;font-size:14.5px;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.bb.in{background:#fff;align-self:flex-start;border-top-left-radius:2px}
.bb.out{background:#d9fdd3;align-self:flex-end;border-top-right-radius:2px}
.bb.bimg{padding:4px 4px 8px;width:62%;display:block}.bb.bimg img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:7px;display:block}.bb.bimg span{display:block;padding:7px 8px 0}
.wa-in{display:flex;gap:10px;align-items:center;padding:10px 12px;background:#f0f2f5}
.wa-in span{flex:1;background:#fff;border-radius:999px;padding:11px 16px;font-size:14px;color:#8a938d}
.wa-in i{width:40px;height:40px;border-radius:50%;background:#1F5132;display:flex;align-items:center;justify-content:center;color:#fff}.wa-in svg{width:20px;height:20px}
@media(max-width:900px){.wa-t,.wa-chat{grid-column:1/-1}.wa-chat{margin-top:44px}}
.wa-ch .av{width:46px;height:46px;flex:none;flex-direction:column;gap:2px;background:#1F5132;font:inherit}
.wa-ch .av b{font:600 10.5px/1 Supreme,Helvetica,sans-serif;letter-spacing:.06em;color:#fff}
.wa-ch .av i{font:600 5.5px/1 Supreme,Helvetica,sans-serif;font-style:normal;letter-spacing:.32em;color:#a9dbb8;margin-left:.32em}
/* ===== mobile pass ===== */
@media(max-width:700px){
 .tiles4{grid-template-columns:1fr!important;gap:18px}
 .t4{aspect-ratio:4/3}
 .t4-c h3{font-size:24px}
 .t4-c .d{max-height:none!important;opacity:1!important;font-size:14px}
 .t4-c .go{max-height:30px!important;opacity:1!important;margin-top:10px}
 .wa-t h2{font-size:40px}
 .wa-b{padding:6px 22px 6px 6px;font-size:15px}
}
@media(max-width:700px){.t4::after{background:linear-gradient(180deg,rgba(8,24,14,.1) 20%,rgba(8,24,14,.9) 70%)}}
@media(max-width:700px){
 .hero-scene video{object-position:var(--fx,50%) 50%}
 /* What we do: calm static cards on phones — no expanding/rotating */
 .xpan{gap:10px}
 .xp,.xp.on{height:200px!important;transition:none!important}
 .xp .xp-ren{opacity:1!important;animation:none!important}
 .xp .xp-svg,.xp .xd-plan,.xp .xd-persp,.xp .xd-notes,.xp .xd-tag,.xp .xj-dim{display:none!important}
 .xp:not(.on)::after,.xp::after{background:linear-gradient(180deg,rgba(6,18,11,.15) 30%,rgba(6,18,11,.85))!important}
 .xp .xp-lab,.xp:not(.on) .xp-lab{position:absolute;left:18px;right:18px;bottom:16px;top:auto;padding:0;display:block}
 .xp .xp-lab b,.xp:not(.on) .xp-lab b{writing-mode:horizontal-tb;transform:none;position:static;font-size:21px}
 .xp .xp-lab span,.xp .xp-lab em{display:none}
 /* centre the WhatsApp section */
 .wa-t{text-align:center}.wa-t .who-kick{justify-content:center}.wa-t p{margin-left:auto;margin-right:auto}
 .wa-acts{justify-content:center;flex-direction:column;gap:18px}
 .ca3-in{text-align:center}
}
@media(max-width:700px){
 .xp .xj-pair{inset:0;display:block}
 .xp .xj-a{display:none!important}
 .xp .xj-b{opacity:1!important;transform:none!important;animation:none!important;position:absolute;inset:0;margin:0}
 .xp .xj-vid{position:absolute;inset:0;height:100%;width:100%;aspect-ratio:auto;clip-path:none!important;animation:none!important;box-shadow:none}
 .xp .xj-vid video{width:100%;height:100%;object-fit:cover}
 .xp .xj-b figcaption{display:none}
}
@media(max-width:700px){.xp:has(.xj-pair){background:#13301f url(media/wwd/divider-built.jpg) center 40%/cover}.xp .xj-pair,.xp:has(.xj-pair) .xp-draw{display:none!important}}