@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;1,6..72,300&display=swap");
@font-face{font-family:"Founders Grotesk";src:url("/assets/fonts/founders-grotesk-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Founders Grotesk";src:url("/assets/fonts/founders-grotesk-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
/* Core foundation — the only three brand colours */
--charcoal:#212322;
--cool-grey:#D9D8D6;
--white:#FFFFFF;

/* Charcoal tints — derived, for rules, states and quiet surfaces */
--charcoal-90:#383A39;
--charcoal-70:#5C5E5D;
--charcoal-50:#8A8C8B;
--charcoal-30:#B4B5B4;
--charcoal-12:#E2E2E1;
--charcoal-06:#F0F0EF;

/* Paper — the warm off-white of real printed material */
--paper:#F7F6F4;

/* Semantic aliases */
--text-primary:var(--charcoal);
--text-secondary:var(--charcoal-70);
--text-muted:var(--charcoal-50);
--text-inverse:var(--white);
--text-on-grey:var(--charcoal);

--surface-page:var(--white);
--surface-paper:var(--paper);
--surface-quiet:var(--cool-grey);
--surface-inverse:var(--charcoal);
--surface-card:var(--white);

--border-hairline:var(--charcoal-12);
--border-rule:var(--charcoal);
--border-quiet:var(--charcoal-30);
--seam:var(--charcoal);

--link:var(--charcoal);
--link-hover:var(--charcoal-70);

--focus-ring:var(--charcoal);
}
[data-theme="inverse"]{
--text-primary:var(--white);
--text-secondary:var(--charcoal-30);
--text-muted:var(--charcoal-50);
--surface-page:var(--charcoal);
--surface-card:var(--charcoal-90);
--border-hairline:var(--charcoal-70);
--border-rule:var(--white);
--link:var(--white);
--link-hover:var(--cool-grey);
--focus-ring:var(--white);
}

:root{
--font-core:"Founders Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
--font-quote:"Newsreader",Georgia,"Times New Roman",serif;
--font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;

--weight-regular:400;
--weight-medium:500;
--weight-quote:300;

/* Type scale. Display is always Medium — Regular reads soft above ~60px. */
--size-display-xl:clamp(56px,9vw,132px);
--size-display-l:clamp(44px,6.5vw,88px);
--size-display-m:clamp(34px,4.5vw,60px);
--size-heading-l:40px;
--size-heading-m:28px;
--size-heading-s:21px;
--size-quote-l:38px;
--size-quote-m:29px;
--size-body-l:19px;
--size-body:17px;
--size-body-s:15px;
--size-caption:13px;
--size-micro:10px;
--size-label:12px;

--leading-display:0.92;
--leading-heading:1.12;
--leading-quote:1.24;
--leading-body:1.6;
--leading-tight:1.25;

/* Tracking tightens as size grows. One value per register, never mixed. */
--tracking-display-xl:-0.05em;
--tracking-display:-0.035em;
--tracking-heading:-0.02em;
--tracking-quote:-0.01em;
--tracking-body:0;
--tracking-label:0.14em;

--measure-prose:64ch;
--measure-narrow:46ch;

/* Semantic roles */
--text-display-xl:var(--weight-medium) var(--size-display-xl)/var(--leading-display) var(--font-core);
--text-display:var(--weight-medium) var(--size-display-l)/var(--leading-display) var(--font-core);
--text-h1:var(--weight-medium) var(--size-heading-l)/var(--leading-heading) var(--font-core);
--text-h2:var(--weight-medium) var(--size-heading-m)/var(--leading-heading) var(--font-core);
--text-h3:var(--weight-medium) var(--size-heading-s)/var(--leading-tight) var(--font-core);
--text-quote:var(--weight-quote) var(--size-quote-m)/var(--leading-quote) var(--font-quote);
--text-lead:var(--weight-regular) var(--size-body-l)/var(--leading-body) var(--font-core);
--text-base:var(--weight-regular) var(--size-body)/var(--leading-body) var(--font-core);
--text-small:var(--weight-regular) var(--size-body-s)/var(--leading-body) var(--font-core);
--text-caption:var(--weight-regular) var(--size-caption)/1.45 var(--font-core);
--text-micro:var(--weight-regular) var(--size-micro)/1.8 var(--font-core);
}

:root{
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--space-9:96px;
--space-10:128px;
--space-11:180px;

--gutter:var(--space-6);
--page-margin:var(--space-8);
--stack-tight:var(--space-3);
--stack:var(--space-5);
--stack-loose:var(--space-7);
--section-gap:var(--space-9);
}

:root{
/* Corners stay square. The identity is built from folds and edges, not pills. */
--radius-none:0px;
--radius-hairline:2px;
--radius-control:0px;

--rule-hairline:1px;
--rule-seam:2px;
--rule-heavy:4px;

/* No shadow system. Depth comes from the seam, the fold and the image edge. */
--shadow-none:none;
--shadow-lift:0 1px 2px rgba(33,35,34,.08);

--container-prose:720px;
--container-page:1120px;
--container-wide:1440px;

--doc-page-width:210mm; /* @kind other */
--doc-page-height:297mm; /* @kind other */
--slide-width:1280px;
--slide-height:720px;
}

:root{
--ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */
--ease-exit:cubic-bezier(.4,0,1,1); /* @kind other */
--duration-instant:80ms; /* @kind other */
--duration-fast:160ms; /* @kind other */
--duration-base:260ms; /* @kind other */
--duration-slow:520ms; /* @kind other */
--duration-reveal:900ms; /* @kind other */
--motion-pause:400ms; /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{--duration-instant:0ms; /* @kind other */ --duration-fast:0ms; /* @kind other */ --duration-base:0ms; /* @kind other */ --duration-slow:0ms; /* @kind other */ --duration-reveal:0ms /* @kind other */}}

html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;font:var(--text-base);color:var(--text-primary);background:var(--surface-page);font-variant-numeric:tabular-nums}
h1,h2,h3{letter-spacing:var(--tracking-heading);text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--link);text-decoration:underline;text-underline-offset:0.18em;text-decoration-thickness:1px;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--link-hover);text-decoration-thickness:2px}
:focus-visible{outline:var(--rule-seam) solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--cool-grey);color:var(--charcoal)}

:root{--pad:clamp(20px,7.5vw,108px);--maxw:1440px;--gap:clamp(16px,2.2vw,32px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--charcoal);font-family:var(--font-core);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:var(--charcoal);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--charcoal-70)}
.wrap{max-width:var(--maxw);margin:0 auto}
.px{padding-left:var(--pad);padding-right:var(--pad)}

/* type roles */
.t-mega{font-weight:500;font-size:clamp(56px,12.8vw,184px);line-height:.9;letter-spacing:-.05em}
.t-xl{font-weight:500;font-size:clamp(40px,6.1vw,88px);line-height:.98;letter-spacing:-.045em}
.t-l{font-weight:500;font-size:clamp(28px,3.1vw,44px);line-height:1.04;letter-spacing:-.035em}
.t-m{font-weight:500;font-size:clamp(24px,2.8vw,40px);line-height:1.1;letter-spacing:-.035em}
.t-s{font-weight:500;font-size:clamp(20px,1.9vw,28px);line-height:1.06;letter-spacing:-.03em}
.t-lede{font-size:clamp(18px,1.55vw,23px);line-height:1.28;letter-spacing:-.02em}
.t-body{font-size:clamp(15px,1.15vw,17px);line-height:1.55}
.t-micro{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.amp{color:var(--charcoal-50)}
.muted{color:var(--charcoal-70)}
.quiet{color:var(--charcoal-70)}

/* header */
.site-head{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px;border-bottom:1px solid var(--charcoal-30);background:var(--white)}
.site-head img{height:21px;width:auto;display:block}
.nav{display:flex;gap:clamp(18px,2.7vw,40px);align-items:center}
.nav a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;text-decoration:none;white-space:nowrap}
.navtoggle{display:none;min-height:44px;font-size:15px}

/* ── the opening ──────────────────────────────────────
   Fills the viewport and holds while the visitor scrolls
   through a short sequence of pairings, then releases.
   Scrolling stays normal throughout: nothing is captured,
   every stop is reversible, and the sticky stage simply
   ends. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.opening-track{height:auto}
html.js .opening-track{height:calc(100vh * 4.2)}
.opening-stage{position:relative;min-height:calc(100vh - 76px);display:grid;grid-template-rows:1fr auto;overflow:hidden;background:var(--white)}
html.js .opening-stage{position:sticky;top:76px;height:calc(100vh - 76px)}
.opening-panel{position:absolute;right:0;top:0;width:50%;height:100%;background:var(--charcoal)}

.hero-pair{position:relative;z-index:1;align-self:center;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:clamp(8px,1.6vw,28px);padding:0 clamp(16px,3vw,48px);font-weight:500;font-size:clamp(30px,6.4vw,104px);line-height:1;letter-spacing:-.045em;--step:1.45em}
.hero-pair .w1{justify-self:end;text-align:right}
.hero-pair .w2{justify-self:start;text-align:left;color:var(--white)}
.hero-pair .slot{display:block;height:var(--step);clip-path:inset(0 -0.4em);min-width:0}
.hero-pair .reel{display:block;transform:translateY(calc(var(--i,0) * var(--step) * -1));will-change:transform}
.hero-pair .reel>span{display:block;height:var(--step);line-height:var(--step);white-space:nowrap}

.hero-amp{position:relative;width:clamp(56px,9.2vw,142px);height:clamp(108px,15.5vw,236px)}
.hero-amp span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(100px,15.2vw,232px);line-height:1;letter-spacing:0;font-weight:400}
.hero-amp .l{color:var(--charcoal);clip-path:inset(-30% 50% -30% -30%)}
.hero-amp .r{color:var(--white);clip-path:inset(-30% -30% -30% 50%)}

.opening-foot{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr}
.foot-left{padding:0 var(--pad) clamp(28px,4vw,56px)}
.foot-right{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 var(--pad) clamp(28px,4vw,56px);color:var(--cool-grey)}
.foot-right .t-micro{color:var(--charcoal-30)}
.ticks{display:flex;gap:8px;align-items:center}
.ticks span{display:block;width:18px;height:2px;background:var(--charcoal-70);transition:background .5s var(--ease-standard),width .5s var(--ease-standard)}
.ticks span.on{background:var(--white);width:34px}

.opening-photo{padding:clamp(28px,4vw,56px) var(--pad) 0}
.hero-img{position:relative;aspect-ratio:21/9;background:var(--cool-grey);overflow:hidden}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity 1.1s var(--ease-standard)}
.hero-img img.on{opacity:1}

@media (max-width:760px){
 html.js .opening-track{height:calc(100vh * 3.6)}
 .opening-panel{display:none}
 .hero-pair{grid-template-columns:1fr;justify-items:start;font-size:clamp(34px,10.6vw,54px);padding:0 var(--pad)}
 .hero-pair .w1,.hero-pair .w2{justify-self:start;text-align:left}
 .hero-pair .w2{color:var(--charcoal)}
 .hero-amp{width:auto;height:1.15em;font-size:1em}
 .hero-amp span{position:static;transform:none!important;font-size:1.3em;line-height:1.15;display:block}
 .hero-amp .r{display:none}
 .hero-amp .l{clip-path:none;color:var(--charcoal)}
 .opening-foot{grid-template-columns:1fr;gap:18px}
 .foot-right{justify-content:flex-start;color:var(--charcoal-70)}
 .foot-right .t-micro{color:var(--charcoal-70)}
 .ticks span{background:var(--charcoal-30)}
 .ticks span.on{background:var(--charcoal)}
 .hero-img{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
 html.js .opening-track{height:auto}
 html.js .opening-stage{position:static;height:auto}
}

/* intro */
.intro{display:grid;grid-template-columns:5fr 1fr 6fr;gap:var(--gap);padding-top:clamp(56px,8vw,120px)}
.intro .a{grid-column:1}
.intro .b{grid-column:3;display:flex;flex-direction:column;gap:20px}
.svclist{display:flex;flex-direction:column}
.svclist a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;min-height:44px;padding:14px 0 12px;border-top:1px solid var(--charcoal-30);text-decoration:none;transition:color .2s var(--ease-standard)}
.svclist a:hover{color:var(--charcoal-70)}
.ar{display:inline-block;transition:transform .25s var(--ease-standard)}
a:hover .ar{transform:translateX(8px)}

.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);padding-top:clamp(40px,5vw,72px)}
.principles div{padding-top:24px;border-top:1px solid var(--charcoal);font-size:clamp(18px,1.6vw,23px);line-height:1.2;letter-spacing:-.01em}

.bigcta{display:inline-flex;align-items:baseline;gap:20px;min-height:44px;margin-top:clamp(36px,4.5vw,56px);padding-bottom:10px;border-bottom:2px solid var(--charcoal);font-weight:500;font-size:clamp(28px,4.4vw,64px);line-height:1;letter-spacing:-.045em;text-decoration:none}

/* services */
.services{padding-top:clamp(64px,8vw,120px)}
.svcgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,44px) var(--gap);padding-top:clamp(28px,3.5vw,56px)}
.svc{display:flex;flex-direction:column;gap:18px}
.svc img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}

/* how */
.how-img{position:relative;margin-top:clamp(64px,9vw,128px);background:var(--charcoal)}
.how-img img{width:100%;height:clamp(280px,55vw,800px);object-fit:cover;object-position:50% 100%;display:block}
.how-title{position:relative;z-index:2;margin-top:clamp(-72px,-11.5vw,-166px);color:var(--white)}
.how-title span{display:block}
.how{background:var(--charcoal);color:var(--cool-grey);padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(64px,8vw,112px)}
.how-lede{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding-bottom:40px}
.how-lede p{grid-column:2}
/* ── approach accordion ────────────────────────────────
   Four beliefs, scannable at a glance, with depth on
   request. The whole row is the control. */
.acc{border-top:1px solid var(--charcoal-70)}
.acc-item{border-bottom:1px solid var(--charcoal-70)}
.acc-h{margin:0;font:inherit;font-weight:400}
.acc-head{display:grid;grid-template-columns:clamp(44px,5vw,72px) minmax(0,1.15fr) minmax(0,1fr) 44px;align-items:baseline;gap:var(--gap);width:100%;padding:clamp(26px,3.4vw,44px) clamp(10px,1.4vw,20px);text-align:left;color:var(--cool-grey);transition:background .35s var(--ease-standard)}
.acc-head:hover{background:rgba(255,255,255,.045)}
.acc-head:focus-visible{outline:var(--rule-seam) solid var(--white);outline-offset:-3px}
.acc-item.open .acc-head{background:rgba(255,255,255,.055)}
.acc-n{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal-30)}
.acc-st{font-weight:500;font-size:clamp(22px,2.9vw,42px);line-height:1.04;letter-spacing:-.03em;color:var(--white);text-wrap:balance}
.acc-pr{font-size:clamp(15px,1.5vw,21px);line-height:1.25;letter-spacing:-.015em;color:var(--charcoal-30)}
.acc-ic{position:relative;align-self:center;justify-self:end;width:22px;height:22px;flex:none}
.acc-ic::before,.acc-ic::after{content:"";position:absolute;left:50%;top:50%;background:var(--cool-grey);transition:transform .45s var(--ease-standard),opacity .3s var(--ease-standard)}
.acc-ic::before{width:22px;height:1.5px;transform:translate(-50%,-50%)}
.acc-ic::after{width:1.5px;height:22px;transform:translate(-50%,-50%)}
.acc-item.open .acc-ic::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}

.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease-standard)}
.acc-item.open .acc-panel{grid-template-rows:1fr}
.acc-clip{overflow:hidden;min-height:0}
.acc-inner{display:grid;grid-template-columns:clamp(44px,5vw,72px) minmax(0,1.15fr) minmax(0,1fr) 44px;gap:var(--gap);padding:0 clamp(10px,1.4vw,20px) clamp(30px,3.6vw,52px);opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease-standard) .08s,transform .45s var(--ease-standard) .08s}
.acc-item.open .acc-inner{opacity:1;transform:none}
.acc-inner>*{grid-column:3}
.acc-lead{font-size:clamp(17px,1.7vw,23px);line-height:1.38;letter-spacing:-.015em;color:var(--white);max-width:44ch}
.acc-body{font-size:clamp(15px,1.15vw,16px);line-height:1.65;color:var(--charcoal-30);max-width:56ch;margin-top:16px}
.acc-out{font-size:clamp(16px,1.35vw,19px);line-height:1.4;color:var(--white);max-width:44ch;margin-top:clamp(24px,2.6vw,36px);padding-top:clamp(16px,1.8vw,24px);border-top:1px solid var(--charcoal-70)}

@media (max-width:860px){
 .acc-head{grid-template-columns:clamp(34px,8vw,48px) minmax(0,1fr) 32px;row-gap:8px;align-items:start}
 .acc-st{grid-column:2}
 .acc-pr{grid-column:2}
 .acc-ic{grid-column:3;align-self:start;margin-top:4px}
 .acc-inner{grid-template-columns:clamp(34px,8vw,48px) minmax(0,1fr) 32px}
 .acc-inner>*{grid-column:2}
}
@media (prefers-reduced-motion:reduce){
 .acc-panel,.acc-inner,.acc-ic::before,.acc-ic::after,.acc-head{transition:none}
}

/* who */
.who{position:relative;background:var(--cool-grey);margin-top:0;--who-edge:35%}
.who-img{position:relative;margin-left:var(--who-edge);height:clamp(280px,43vw,624px)}
.who-img img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.who-title{position:absolute;left:0;right:0;top:clamp(24px,4.4vw,64px);display:grid;grid-template-columns:var(--who-edge) 1fr;align-items:start;font-weight:500;font-size:clamp(30px,7.2vw,104px);line-height:1;letter-spacing:-.045em}
.who-title .a{justify-self:end;white-space:nowrap;padding-right:clamp(12px,2.2vw,32px)}
.who-title .b{justify-self:start;white-space:nowrap;color:var(--white);background:var(--charcoal);padding:.1em .22em .14em}
.who-copy{position:absolute;left:var(--pad);bottom:clamp(20px,4vw,56px);width:clamp(200px,23vw,330px)}

/* projects */
.projects{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(64px,7vw,104px)}
.projects .t-lede a{white-space:nowrap}
.projgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(36px,4.4vw,64px) var(--gap)}
.proj{display:flex;flex-direction:column;gap:14px;text-decoration:none}
.proj .name span{line-height:1.12}
.proj .name{margin-bottom:2px}
.proj .ph{overflow:hidden}
.proj img.pi{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,0,.2,1)}

.proj .name{display:flex;align-items:flex-start;gap:10px}
.proj .name img{height:20px;width:auto;display:block;flex-shrink:0}
.placeholder{width:100%;background:var(--cool-grey);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--charcoal-70);text-align:center;padding:0 16px}
.proj .placeholder,.figrow .placeholder{aspect-ratio:3/2}
.btn{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1px solid var(--charcoal);font-size:15px;line-height:1;white-space:nowrap;transition:background .2s var(--ease-standard)}
.proj:hover .btn{background:var(--charcoal-06)}

/* contact */
.contact{background:var(--charcoal);color:var(--cool-grey);padding-top:clamp(64px,8vw,120px);padding-bottom:48px}
.contact a{color:var(--cool-grey)}
.contact-cta{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(24px,4vw,48px);padding-bottom:40px;border-bottom:2px solid var(--cool-grey);text-decoration:none}
.contact-cta .you{display:flex;align-items:center;gap:clamp(14px,2.5vw,36px)}
.contact-cta .you img{height:clamp(52px,10.5vw,152px);width:auto;display:block;margin-bottom:.06em}
.contact-cta .you span{font-weight:500;font-size:clamp(64px,14.4vw,208px);line-height:.9;letter-spacing:-.05em;color:var(--white)}
.contact-cta .ask{display:flex;align-items:baseline;gap:20px;padding-bottom:12px;font-size:clamp(17px,2.2vw,32px);line-height:1.15;letter-spacing:-.02em}
.site-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-top:56px}
.footcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);flex-grow:1;max-width:720px}
.footcols>div{display:flex;flex-direction:column;gap:10px}
.footcols .t-micro{color:var(--charcoal-30)}
.footcols .val{font-size:17px;line-height:1.5}
.site-foot>img{width:84px;height:84px;display:block;flex-shrink:0}

@media (max-width:1100px){
 .whoami-grid{grid-template-columns:5fr 7fr}
 .svcgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .projgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .howgrid{grid-template-columns:1fr}
 .intro{grid-template-columns:1fr;gap:32px}
 .intro .a,.intro .b{grid-column:1}
 .how-lede{grid-template-columns:1fr}
 .how-lede p{grid-column:1}
}
@media (max-width:760px){
 .whoami-grid{grid-template-columns:1fr;gap:28px}
 .nav{display:none}
 .nav.open{display:flex;position:absolute;left:0;right:0;top:76px;flex-direction:column;gap:0;align-items:stretch;padding:8px var(--pad) 20px;background:var(--white);border-bottom:1px solid var(--charcoal-30)}
 .navtoggle{display:inline-flex;align-items:center}
 .hero-panel{width:100%;height:clamp(230px,62vw,320px)}
 .hero-lower{grid-template-columns:1fr}
 .hero-say{min-height:0}
 .principles{grid-template-columns:1fr;gap:20px}
 .svcgrid{grid-template-columns:1fr}
 .projgrid{grid-template-columns:1fr}
 .who-img{margin-left:0;margin-top:clamp(84px,26vw,140px)}
 .who-title{grid-template-columns:1fr;justify-items:start}
 .who-title .a{justify-self:start;padding-left:var(--pad);padding-right:0}
 .who-title .b{justify-self:start;margin-left:var(--pad);padding:.08em .2em .12em}
 .who-copy{position:static;width:auto;padding:24px var(--pad) 32px}
 .contact-cta{flex-direction:column;align-items:flex-start;gap:24px}
 .site-foot{flex-direction:column;align-items:flex-start;gap:32px}
 .footcols{grid-template-columns:1fr;gap:20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* service pages */
.svc-hero{padding-top:clamp(36px,5vw,72px)}
.svc-hero .eyebrow{color:var(--charcoal-70)}
.svc-hero h1{margin-top:14px}
.svc-hero .disc{margin-top:12px}
.svc-intro{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding-top:clamp(24px,3vw,40px)}
.svc-intro p{grid-column:2;font-size:clamp(18px,1.9vw,26px);line-height:1.25;letter-spacing:-.02em}
.svc-banner{width:100%;aspect-ratio:21/9;object-fit:cover;display:block;margin-top:clamp(28px,3.5vw,48px)}
.svc-sec{padding-top:clamp(48px,6vw,96px)}
.svc-sec h2{padding-bottom:clamp(20px,2.4vw,32px)}
.svc-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px) var(--gap)}
.svc-rows article{display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:1px solid var(--charcoal)}
.svc-rows .n{color:var(--charcoal-70)}
.svc-list{display:flex;flex-direction:column;max-width:900px}
.svc-list div{padding:18px 0;border-top:1px solid var(--charcoal-30);font-size:clamp(17px,1.6vw,23px);line-height:1.3;letter-spacing:-.015em}
.svc-pq{max-width:900px;margin-top:clamp(48px,6vw,96px);padding-top:clamp(20px,2.4vw,28px);border-top:2px solid var(--charcoal)}
.svc-pq blockquote{margin:0;font-family:var(--font-quote);font-weight:300;font-size:clamp(24px,3.4vw,46px);line-height:1.24;letter-spacing:-.01em}
.svc-pq figcaption{margin-top:20px}
.svc-related{padding-top:clamp(48px,6vw,96px);padding-bottom:clamp(48px,6vw,88px)}
.svc-related .projgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.svc-next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);padding-bottom:clamp(56px,7vw,96px)}
.svc-next a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:18px;border-top:1px solid var(--charcoal);text-decoration:none}
.svc-next a>span:first-child{white-space:nowrap}
@media (max-width:1100px){.svc-intro{grid-template-columns:1fr}.svc-intro p{grid-column:1}.svc-rows{grid-template-columns:1fr}.svc-related .projgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.svc-next{grid-template-columns:1fr}}
@media (max-width:760px){.svc-related .projgrid{grid-template-columns:1fr}}

/* project case study */
.proj-hero{padding-top:clamp(36px,5vw,72px)}
.proj-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:clamp(28px,3.5vw,48px);padding:clamp(24px,3vw,40px) 0 clamp(28px,3.5vw,48px);border-top:1px solid var(--charcoal);border-bottom:1px solid var(--charcoal-30)}
.proj-meta .t-micro{color:var(--charcoal-70);margin-bottom:8px}
.proj-body{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding-top:clamp(40px,5vw,72px)}
.proj-body .lede{font-size:clamp(20px,2.2vw,32px);line-height:1.18;letter-spacing:-.03em;font-weight:500}
.proj-body .cols{display:flex;flex-direction:column;gap:18px}
.figrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);padding-top:clamp(40px,5vw,72px)}
.figrow img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.figrow figcaption{display:flex;justify-content:space-between;gap:16px;padding-top:10px;font-size:13px;color:var(--charcoal-70)}
.pq{max-width:900px;margin-top:clamp(48px,6vw,96px);padding-top:clamp(20px,2.4vw,28px);border-top:2px solid var(--charcoal)}
.pq blockquote{margin:0;font-family:var(--font-quote);font-weight:300;font-size:clamp(24px,3.4vw,46px);line-height:1.24;letter-spacing:-.01em}
.pq figcaption{margin-top:20px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);padding:clamp(48px,6vw,96px) 0}
.stats div{border-top:1px solid var(--charcoal);padding-top:18px}
.stats .n{font-weight:500;font-size:clamp(40px,5vw,72px);line-height:.98;letter-spacing:-.045em}
.next{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:clamp(28px,3vw,40px) 0 clamp(56px,7vw,96px);border-top:1px solid var(--charcoal);text-decoration:none}
@media (max-width:1100px){.proj-meta{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}.proj-body{grid-template-columns:1fr}}
@media (max-width:760px){.figrow{grid-template-columns:1fr}.stats{grid-template-columns:1fr;gap:24px}.proj-meta{grid-template-columns:1fr;row-gap:22px}}

/* ── motion ─────────────────────────────────────────────
   Arrive, connect, continue. Elements move a short distance
   once, on their own easing, and settle. No parallax, no
   bounce, no perpetual movement behind reading content. */
html.js [data-rv]{opacity:0;transform:translateY(20px);transition:opacity .95s var(--ease-standard),transform .95s var(--ease-standard);transition-delay:var(--rvd,0ms);will-change:opacity,transform}
html.js [data-rv].in{opacity:1;transform:none}

html.js [data-rv-rule]{transform:scaleX(0);transform-origin:left center;transition:transform .8s var(--ease-standard);transition-delay:var(--rvd,0ms)}
html.js [data-rv-rule].in{transform:scaleX(1)}

html.js [data-rv-img]{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease-standard);transition-delay:var(--rvd,0ms)}
html.js [data-rv-img].in{clip-path:inset(0 0 0 0)}

/* hero arrives on load, not on scroll */
html.js .opening-panel{transform:scaleY(0);transform-origin:top center;transition:transform 1.1s var(--ease-standard)}
html.js .opening.ready .opening-panel{transform:none}

/* header settles once you leave the top */
.site-head{border-bottom-color:transparent;transition:border-color .3s var(--ease-standard),box-shadow .3s var(--ease-standard)}
.site-head.stuck{border-bottom-color:var(--charcoal-30)}

/* link and card micro-motion */
.svclist a,.svc-next a,.next{transition:color .22s var(--ease-standard),padding-left .32s var(--ease-standard)}
.svclist a:hover,.svc-next a:hover,.next:hover{padding-left:10px}
.proj .btn{transition:background .22s var(--ease-standard),color .22s var(--ease-standard)}
.proj:hover .btn{background:var(--charcoal);color:var(--white)}
.svc a:hover .t-s,.proj:hover .name .t-s{color:var(--charcoal-70)}
.svc .t-s,.proj .name .t-s{transition:color .22s var(--ease-standard)}

@media (prefers-reduced-motion:reduce){
 html.js [data-rv],html.js [data-rv-rule],html.js [data-rv-img],
 html.js .hero-pair .w1,html.js .hero-pair .w2,html.js .hero-amp span,html.js .hero-panel{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
}

/* ── display headings wipe up from their own baseline ── */
html.js [data-rv-wipe]{opacity:0;clip-path:inset(0 0 105% 0);transform:translateY(14px);transition:opacity .9s var(--ease-standard),clip-path 1.15s var(--ease-standard),transform 1.15s var(--ease-standard);transition-delay:var(--rvd,0ms);will-change:clip-path,transform,opacity}
html.js [data-rv-wipe].in{opacity:1;clip-path:inset(-15% -15% -15% -15%);transform:none}

/* ── parallax ──────────────────────────────────────────
   Photographs drift slower than the page inside a fixed
   frame. Amplitude is small and scales down on narrow
   screens; transform only, one rAF loop, never on text. */
html.js .px-host{overflow:hidden}
html.js img.px{transform:translate3d(0,0,0) scale(1.14);will-change:transform;backface-visibility:hidden}
.banner-frame{width:100%;aspect-ratio:21/9;margin-top:clamp(28px,3.5vw,48px)}
.banner-frame>img{width:100%;height:100%;object-fit:cover;display:block;margin:0}
.hero-frame{width:100%;aspect-ratio:2/1;margin-top:clamp(28px,3.5vw,48px)}
.hero-frame>img{width:100%;height:100%;object-fit:cover;display:block;margin:0}
@media (max-width:760px){.banner-frame{aspect-ratio:16/9}.hero-frame{aspect-ratio:3/2}}

@media (prefers-reduced-motion:reduce){
 html.js [data-rv-wipe]{opacity:1!important;clip-path:none!important;transform:none!important;transition:none!important}
 html.js img.px{transform:none!important}
 html.js .px-host{overflow:visible}
}

/* ── slot-machine headline ─────────────────────────────
   Each side of the pair turns on its own cadence, so the
   words cross-pollinate. Calm: one travel, long easing. */

/* ── ampersand: convergence ────────────────────────────
   The two halves arrive from opposite sides and resolve
   into one glyph on the seam — the brand idea, performed
   by the mark that already carries it. */
html.js .hero-amp .l{transform:translate(-50%,-50%) translateX(-22%);opacity:0}
html.js .hero-amp .r{transform:translate(-50%,-50%) translateX(22%);opacity:0}
html.js .hero-amp span{transition:transform 1.35s cubic-bezier(.22,0,.12,1),opacity 1s var(--ease-standard);transition-delay:.15s}
html.js .opening.ready .hero-amp .l,html.js .opening.ready .hero-amp .r{transform:translate(-50%,-50%);opacity:1}

/* the words converge on it from the outside */
html.js .hero-pair .w1{opacity:0;transform:translateX(-34px)}
html.js .hero-pair .w2{opacity:0;transform:translateX(34px)}
html.js .hero-pair .w1,html.js .hero-pair .w2{transition:opacity 1.1s var(--ease-standard),transform 1.35s cubic-bezier(.22,0,.12,1);transition-delay:.3s}
html.js .opening.ready .hero-pair .w1,html.js .opening.ready .hero-pair .w2{opacity:1;transform:none}

.hero-amp{transform:rotate(var(--amp-rot,0deg))}
html.js .opening.ready .hero-amp{animation:amp-breathe 19s var(--ease-standard) 2.8s infinite}
@keyframes amp-breathe{0%,100%{rotate:0deg;translate:0 0}28%{rotate:.7deg;translate:0 -3px}62%{rotate:-.5deg;translate:0 2px}}

/* the contact mark converges too, at its own pace */
.contact-cta .you img{transition:transform .8s var(--ease-standard)}
.contact-cta:hover .you img{transform:rotate(-4deg)}
.proj .name img{transition:transform .5s var(--ease-standard)}
.proj:hover .name img{transform:rotate(-8deg)}

@media (prefers-reduced-motion:reduce){
 html.js .hero-amp .l,html.js .hero-amp .r{transform:translate(-50%,-50%)!important;opacity:1!important}
 html.js .hero-pair .w1,html.js .hero-pair .w2,html.js .contact-cta .you img,html.js .contact-cta .you>span{opacity:1!important;transform:none!important}
 html.js .opening.ready .hero-amp{animation:none}
}

/* ── infinite project slider ───────────────────────────── */
.slider{position:relative}
.slider::after{content:"";position:absolute;inset:0;pointer-events:none}
.slider-track{display:flex;gap:var(--gap);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:0 var(--pad) 8px;scroll-snap-type:none}
.slider-track::-webkit-scrollbar{display:none}
.slider-track>.proj{flex:0 0 clamp(250px,25vw,340px);scroll-snap-align:start}
.slider-track>.proj .name{min-height:2.3em;align-items:flex-start}
.slider-track>.proj p{min-height:4.6em}
.slider-track:focus-visible{outline:var(--rule-seam) solid var(--focus-ring);outline-offset:4px}
.slider-hint{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:clamp(20px,2.4vw,28px)}
.slider-hint .t-micro{color:var(--charcoal-70)}
.slider-btns{display:flex;gap:8px}
.slider-btns button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--charcoal);transition:background .22s var(--ease-standard),color .22s var(--ease-standard)}
.slider-btns button:hover{background:var(--charcoal);color:var(--white)}
@media (prefers-reduced-motion:reduce){
 html.js .hero-amp span,html.js .contact-cta .you img{-webkit-mask-image:none!important;mask-image:none!important}
 html.js .opening.ready .hero-amp{animation:none}
 .hero-pair .slot>span{transition:none!important}
}

/* reels recompose at small sizes instead of shrinking */
@media (max-width:760px){
 .hero-pair{grid-template-columns:1fr;justify-items:start;row-gap:0;font-size:clamp(34px,10.6vw,52px)}
 .hero-pair .w1,.hero-pair .w2{justify-self:start;text-align:left}
 .hero-pair .w2{color:var(--charcoal)}
 .hero-amp{width:auto;height:1.1em;font-size:1em}
 .hero-amp span{position:static;transform:none!important;font-size:1.25em;line-height:1.1;display:block}
 .hero-amp .r{display:none}
 .hero-amp .l{clip-path:none;color:var(--charcoal)}
 .hero-panel{display:none}
}

/* ── coalesce ──────────────────────────────────────────
   The brand's own mark does the explaining: four forms
   meeting, and the centre belonging to all of them. It
   turns very slowly — four-fold symmetry means the turn
   never resolves to a "start". */
.coalesce{position:relative;background:var(--cool-grey);padding:clamp(32px,6vw,88px) clamp(20px,4vw,64px);margin-top:clamp(32px,4vw,56px);display:grid;place-items:center;overflow:hidden}
.co-mark{position:relative;width:min(58%,420px);aspect-ratio:1}
.co-mark img{width:100%;height:100%;display:block}
html.js .co-mark img{animation:coalesce-turn 150s linear infinite}
@keyframes coalesce-turn{to{transform:rotate(360deg)}}
.co-centre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;color:var(--cool-grey)}
.co-centre .lab{font-size:10px;font-weight:500;letter-spacing:.14em;line-height:1.5;text-transform:uppercase;white-space:nowrap}
.co-labels{position:absolute;inset:clamp(20px,3vw,44px);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;pointer-events:none}
.co-labels>span,.co-labels>a{display:flex;flex-direction:column;gap:4px;color:var(--charcoal)}
.co-labels .h,.co-labels .d{width:max-content;max-width:100%;white-space:nowrap}
.co-labels .h{font-weight:500;font-size:clamp(15px,1.8vw,24px);line-height:1.05;letter-spacing:-.03em;color:var(--charcoal)}
.co-labels .d{font-size:clamp(12px,1.15vw,15px);line-height:1.2;color:var(--charcoal-70)}
.co-labels>.tl,.co-labels>a.tl{align-items:flex-start;justify-content:flex-start;text-align:left}
.co-labels>.tr,.co-labels>a.tr{align-items:flex-end;justify-content:flex-start;text-align:right}
.co-labels>.bl,.co-labels>a.bl{align-items:flex-start;justify-content:flex-end;text-align:left}
.co-labels>.br,.co-labels>a.br{align-items:flex-end;justify-content:flex-end;text-align:right}
.weave-note{max-width:62ch;margin:clamp(16px,2vw,24px) auto 0;text-align:center}
@media (max-width:700px){
 .co-mark{width:min(72%,300px)}
 .co-labels{inset:12px}
 .co-labels .h{white-space:normal}
 .co-labels .d{display:none}
}
@media (prefers-reduced-motion:reduce){html.js .co-mark img{animation:none}}

/* the readable detail, always open */
.svc-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4.4vw,64px) var(--gap);padding-top:clamp(48px,6vw,88px)}
.svc-detail article{display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:2px solid var(--charcoal)}
.svc-detail img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;margin-top:6px}
.svc-detail .dh{font-weight:500;font-size:clamp(22px,2.6vw,36px);line-height:1.04;letter-spacing:-.03em}
.svc-detail .dsub{font-size:clamp(16px,1.5vw,21px);line-height:1.25;color:var(--charcoal-70)}
.svc-detail .dwith{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal-70);margin-top:4px}

.closing{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,104px);border-top:2px solid var(--charcoal);margin-top:clamp(48px,6vw,88px);align-items:end}
.closing .ct{font-weight:500;font-size:clamp(28px,4.4vw,64px);line-height:1;letter-spacing:-.045em}
.closing p{font-size:clamp(17px,1.6vw,23px);line-height:1.3;color:var(--charcoal-70);margin-top:14px}
.closing .talk{justify-self:start;display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 22px;background:var(--charcoal);color:var(--white);font-size:16px;text-decoration:none;transition:background .22s var(--ease-standard)}
.closing .talk:hover{background:var(--charcoal-90);color:var(--white)}

@media (max-width:900px){
 .weave{width:min(100%,440px)}
 .flabel{width:46%}
 .flabel .d{display:none}
 .svc-detail{grid-template-columns:1fr}
 .closing{grid-template-columns:1fr;gap:28px;align-items:start}
}
@media (max-width:560px){.centre .lab{font-size:9px}.flabel .h{font-size:15px}}
@media (prefers-reduced-motion:reduce){html.js .field{animation:none}}



/* ── who we are ────────────────────────────────────────── */
.whoami{padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(64px,8vw,120px)}
.whoami-grid{display:grid;grid-template-columns:4fr 7fr;gap:clamp(24px,4vw,64px);padding-top:clamp(28px,3.5vw,56px);align-items:start}
.whoami-fig{margin:0}
.whoami-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;display:block}
.whoami-body{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,22px);max-width:60ch}
.whoami-body .lede{font-size:clamp(20px,2.3vw,32px);line-height:1.18;letter-spacing:-.03em;font-weight:500}
.whoami-name{display:flex;flex-direction:column;gap:10px}
@media (max-width:1100px){.whoami-grid{grid-template-columns:5fr 7fr}}
@media (max-width:760px){.whoami-grid{grid-template-columns:1fr;gap:28px}}

/* ── approach teaser ───────────────────────────────────── */
.approach-teaser{background:var(--charcoal);color:var(--cool-grey);padding:clamp(64px,8vw,112px) 0}
.at-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:end;padding-bottom:clamp(32px,4vw,56px)}
.at-head h2{color:var(--white)}
.at-head p{max-width:52ch}
.at-list{display:flex;flex-direction:column;border-top:1px solid var(--charcoal-70)}
.at-list li{border-bottom:1px solid var(--charcoal-70)}
.at-list a{display:grid;grid-template-columns:clamp(44px,5vw,72px) minmax(0,1fr) 32px;align-items:baseline;gap:var(--gap);padding:clamp(20px,2.4vw,30px) clamp(8px,1.2vw,16px);text-decoration:none;color:var(--cool-grey);transition:background .3s var(--ease-standard),padding-left .3s var(--ease-standard)}
.at-list a:hover{background:rgba(255,255,255,.05);color:var(--white)}
.at-list .n{font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--charcoal-30)}
.at-list .s{font-weight:500;font-size:clamp(19px,2.3vw,32px);line-height:1.06;letter-spacing:-.03em;color:var(--white);text-wrap:balance}
.at-list .ar{justify-self:end;align-self:center;color:var(--charcoal-30)}
.at-more{padding-top:clamp(24px,3vw,36px);font-size:clamp(16px,1.5vw,21px)}
.at-more a{color:var(--white)}
@media (max-width:860px){.at-head{grid-template-columns:1fr;gap:20px;align-items:start}.at-list a{grid-template-columns:clamp(34px,8vw,48px) minmax(0,1fr) 28px}}

/* ── one rhythm for every section ──────────────────────
   A section opens the same way everywhere: a heavy seam,
   a micro label, then the display heading. Nothing else
   competes for the top of a section. */
.sec-head{padding-top:clamp(28px,3.2vw,44px);border-top:4px solid var(--charcoal);display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px);margin-bottom:clamp(28px,3.4vw,48px)}
.sec-head .t-micro{color:var(--charcoal-70)}
.sec-head h2{margin:0}
.sec-head h2 a{color:inherit;text-decoration:none}
.sec-head h2 a:hover{color:var(--charcoal-70)}
.sec-head p{max-width:46ch}
.approach-teaser .sec-head,.at-head .t-micro{color:var(--charcoal-30)}

.intro{padding-top:clamp(64px,8vw,120px)}
.intro .sec-head{grid-column:1/-1;border-color:var(--charcoal);margin-bottom:clamp(14px,1.6vw,22px)}
.intro-tags{margin-top:clamp(18px,2vw,26px);font-size:clamp(15px,1.3vw,17px);line-height:1.6;color:var(--charcoal-70)}
.services{padding-top:clamp(64px,8vw,120px)}
.whoami .sec-head h2{max-width:18ch}

/* a full-width photographic band, given room */
.band{overflow:hidden;background:var(--cool-grey)}
.band img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block}
.projects{padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(72px,9vw,128px)}
.projects .band{margin-bottom:clamp(36px,4.4vw,64px)}
.projects .slider-track{padding-left:var(--pad);padding-right:var(--pad)}
@media (max-width:760px){.band img{aspect-ratio:3/2}}

/* ═══ cohesion layer ══════════════════════════════════
   One rhythm, one set of rules. Written last so it
   settles anything that drifted while the site grew. */

:root{--sec:clamp(72px,9vw,144px)}

/* Section openers: a hairline, a label, a heading. The
   4px seam is reserved for a page's own title. */
.sec-head{border-top:1px solid var(--charcoal);padding-top:clamp(20px,2.4vw,30px);gap:clamp(10px,1.1vw,14px);margin-bottom:clamp(24px,3vw,44px)}
.sec-head h2{font-size:clamp(28px,4.2vw,60px);line-height:1;letter-spacing:-.04em}
.approach-teaser .sec-head,.approach-teaser .at-head{border-color:var(--charcoal-70)}

/* Section spacing: one value, everywhere. */
.intro,.services,.projects,.whoami,.approach-teaser{padding-top:var(--sec);padding-bottom:0}
.services{padding-bottom:var(--sec)}
.projects{padding-bottom:var(--sec)}
.approach-teaser{padding-bottom:var(--sec)}
/* Project gallery — one filmstrip instead of a stack of figures. */
.projgal{margin:clamp(40px,5vw,72px) 0 clamp(8px,1vw,16px)}
.gal-track{display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
.gal-track::-webkit-scrollbar{display:none}
.gal-track.is-drag{cursor:grabbing}
.gal-track:focus-visible{outline:1px solid var(--charcoal);outline-offset:6px}
.gal-item{margin:0;flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;max-width:100%}
.gal-item img{height:clamp(260px,46vw,560px);width:auto;max-width:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.gal-item figcaption{font-size:clamp(13px,1vw,15px);line-height:1.45;color:var(--charcoal-70);max-width:46ch}
.gal-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--charcoal-15,rgba(0,0,0,.12));margin-top:clamp(18px,2vw,26px);padding-top:14px}
.gal-count{color:var(--charcoal-70);font-variant-numeric:tabular-nums;white-space:nowrap}
.gal-btns{display:flex;gap:8px}
.gal-btns button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--charcoal);background:none;color:var(--charcoal);border-radius:50%;cursor:pointer;font-size:16px;line-height:1;transition:background .18s,color .18s,opacity .18s}
.gal-btns button:hover:not(:disabled){background:var(--charcoal);color:var(--white,#fff)}
.gal-btns button:disabled{opacity:.28;cursor:default}
@media (max-width:760px){.gal-item img{height:clamp(220px,60vw,360px)}}
/* Project prose: the statement runs full measure, the detail sets
   in even columns, so no half of the grid is ever left blank. */
main .proj-body{grid-template-columns:minmax(0,1fr);gap:clamp(22px,2.6vw,36px)}
main .proj-body .lede{max-width:44ch}
main .proj-body .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,32ch),1fr));gap:clamp(18px,2.4vw,40px)}
.next .t-lede{white-space:nowrap}
/* Services: the coalescing mark is the page's hero, so it sits
   straight under the masthead and takes real height. */
.coalesce-hero{margin-top:0;min-height:min(78vh,780px);padding-block:clamp(40px,7vw,104px)}

/* Get in touch — the form is the page. */
.contact-page{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(64px,8vw,120px)}
.cp-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.cp-form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px) var(--gap)}
.cp-field{display:flex;flex-direction:column;gap:9px;min-width:0}
.cp-wide{grid-column:1/-1}
.cp-field .t-micro,.cp-field label{color:var(--charcoal-70)}
.cp-field .opt{text-transform:none;letter-spacing:0;color:var(--charcoal-50)}
.cp-form input,.cp-form textarea{font:inherit;font-size:clamp(16px,1.3vw,19px);color:var(--charcoal);background:none;border:0;border-bottom:1px solid var(--charcoal);border-radius:0;padding:10px 0;width:100%;min-height:44px}
.cp-form textarea{border:1px solid var(--charcoal);padding:14px;resize:vertical;line-height:1.5}
.cp-form input::placeholder,.cp-form textarea::placeholder{color:var(--charcoal-50)}
.cp-form input:focus-visible,.cp-form textarea:focus-visible{outline:1px solid var(--charcoal);outline-offset:4px}
.cp-checks{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:4px}
.cp-checks label{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;border:1px solid var(--charcoal-30,rgba(0,0,0,.28));cursor:pointer;font-size:clamp(14px,1.1vw,16px);transition:background .2s,border-color .2s,color .2s}
.cp-checks label:hover{border-color:var(--charcoal)}
.cp-checks input{width:14px;height:14px;min-height:0;accent-color:var(--charcoal);margin:0}
.cp-checks label:has(input:checked){background:var(--charcoal);border-color:var(--charcoal);color:var(--white)}
.cp-checks label:has(input:focus-visible){outline:1px solid var(--charcoal);outline-offset:3px}
.cp-submit{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;padding-top:clamp(4px,1vw,12px)}
.cp-btn{font:inherit;font-weight:500;font-size:clamp(16px,1.4vw,20px);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 30px;background:var(--charcoal);color:var(--white);border:1px solid var(--charcoal);cursor:pointer;transition:background .25s var(--ease-standard),color .25s var(--ease-standard)}
.cp-btn:hover{background:none;color:var(--charcoal)}
.cp-note{max-width:34ch;margin:0}
.cp-status{grid-column:1/-1;margin:0;min-height:1.4em;color:var(--charcoal-70)}
.cp-status.is-err{color:var(--charcoal)}
.cp-aside{display:grid;gap:clamp(22px,2.6vw,34px);border-top:1px solid var(--charcoal);padding-top:clamp(18px,2vw,26px)}
.cp-block .t-micro{color:var(--charcoal-70);margin-bottom:8px}
.cp-block p{margin:0;max-width:34ch}
@media (max-width:1000px){.cp-grid{grid-template-columns:1fr}}
@media (max-width:620px){.cp-form{grid-template-columns:1fr}}
.opening-photo{padding-top:var(--sec)}
.approach-teaser+.opening-photo{padding-top:calc(var(--sec) * 1.8)}
.contact{padding-top:var(--sec)}

/* Images: one language — full-width bands at 21:9, cards
   at 3:2, portrait at 4:5. Nothing sits on a photograph. */
.band img{aspect-ratio:21/9}
.opening-photo .band img{aspect-ratio:2/1}

/* The scroll cue retires quietly. */
[data-cue]{transition:opacity .6s var(--ease-standard)}
.foot-right{justify-content:flex-start}

/* Motion: fewer, calmer. The idle rotation was noise. */
html.js .opening.ready .hero-amp{animation:none}
html.js [data-rv]{transform:translateY(14px);transition-duration:.8s}

/* Intro reads as one column of thought, not a two-up. */
.intro{display:grid;grid-template-columns:5fr 1fr 6fr;gap:var(--gap)}
.intro .a{grid-column:1;align-self:start}
.intro .b{grid-column:3}
.svclist a{padding:18px 0 16px}

/* Services: the four cards are the section's one job. */
.services .svcgrid{padding-top:0}
.svc p.t-body{max-width:34ch}

/* Projects: heading, then the work. */
.slider-hint{padding-top:clamp(16px,2vw,24px)}
.slider-hint>span:first-child{flex:1}

/* Contact: one call to action on the page, and this is it. */
.contact{padding-bottom:clamp(32px,4vw,48px)}

/* Reading comfort */
.t-body,.acc-body,.wd-b{max-width:62ch}
.svc-intro p{max-width:42ch}

@media (max-width:1100px){
 .intro{grid-template-columns:1fr;gap:clamp(24px,4vw,40px)}
 .intro .a,.intro .b{grid-column:1}
}
@media (max-width:760px){
 :root{--sec:clamp(56px,12vw,88px)}
 .opening-photo .band img{aspect-ratio:4/3}
}

/* ── the mark series ───────────────────────────────────
   Each page carries one mark from the geometric series,
   turning slowly. Four-fold and two-fold symmetries mean
   the turn never resolves to a beginning. The homepage
   has no mark: the ampersand is its mark. */
.page-mark{display:block;width:clamp(44px,5vw,72px);height:auto;flex:none}
html.js .page-mark{animation:coalesce-turn 180s linear infinite}
.eyebrow-row{display:flex;align-items:center;gap:clamp(14px,1.8vw,24px)}
.eyebrow-row .eyebrow{white-space:nowrap}
@media (prefers-reduced-motion:reduce){html.js .page-mark{animation:none}}


/* Intro: two statements facing each other, then straight
   into the work. The four services live in one place. */
.intro{align-items:start}
.intro .a{font-size:clamp(24px,3.4vw,46px);line-height:1.06;letter-spacing:-.035em;max-width:16ch}
.intro .b{font-size:clamp(20px,2.4vw,32px);line-height:1.22;letter-spacing:-.025em;max-width:26ch;align-self:end}
@media (max-width:1100px){.intro .b{align-self:start;max-width:34ch}}

/* Large-scale imagery: full-bleed, uninterrupted, given
   its own moment between two typographic sections. */
.band.bleed{width:100%;margin:0}
.band.bleed img{aspect-ratio:2.35/1;width:100%;display:block}
section.band.bleed{margin-top:var(--sec)}
.opening-photo{padding-top:var(--sec);padding-bottom:0}
.whoami{padding-top:var(--sec)}
.whoami-grid{grid-template-columns:5fr 7fr}
.whoami-fig img{aspect-ratio:3/4}
@media (max-width:760px){.band.bleed img{aspect-ratio:4/3}}

/* ── who we are, given room ────────────────────────────
   One statement leads. The portrait and the detail sit
   below it, far apart, at a comfortable measure. */
.whoami-lede{font-weight:500;font-size:clamp(26px,3.6vw,52px);line-height:1.1;letter-spacing:-.035em;max-width:24ch;margin:0 0 clamp(48px,6vw,88px)}
.whoami-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,6vw,104px);align-items:start;padding-top:0}
.whoami-fig{margin:0;display:flex;flex-direction:column}
.whoami-fig img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 18%;display:block}
.whoami-fig figcaption{display:flex;flex-direction:column;gap:6px;margin-top:clamp(16px,1.8vw,22px);padding-top:clamp(14px,1.5vw,18px);border-top:1px solid var(--charcoal);white-space:normal}
.whoami-fig .nm{font-weight:500;font-size:clamp(17px,1.6vw,21px);line-height:1.1;letter-spacing:-.02em;color:var(--charcoal)}
.whoami-fig .rl{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal-70)}
.whoami-body{display:flex;flex-direction:column;gap:clamp(20px,2.2vw,30px);max-width:54ch;padding-top:clamp(4px,1vw,12px)}
.whoami-body p{font-size:clamp(16px,1.25vw,18px);line-height:1.75;color:var(--charcoal-70);margin:0}
@media (max-width:900px){
 .whoami-grid{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}
 .whoami-fig img{aspect-ratio:4/3;object-position:50% 22%}
 .whoami-lede{margin-bottom:clamp(32px,5vw,56px)}
}

/* Projects: one header line, then straight into the work. */
.projects-head{flex-direction:row;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:clamp(20px,2.4vw,32px)}
.projects-head>div{display:flex;flex-direction:column;gap:clamp(8px,1vw,12px)}
.all-link{font-size:clamp(16px,1.5vw,21px);white-space:nowrap;flex:none}
@media (max-width:640px){.projects-head{flex-direction:column;align-items:flex-start;gap:14px}}

/* Cards are links; the arrow is the only affordance needed. */
.proj .name{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:10px}
.proj .name .ar{align-self:center;color:var(--charcoal-50);transition:transform .3s var(--ease-standard),color .3s var(--ease-standard)}
.proj:hover .name .ar{transform:translateX(6px);color:var(--charcoal)}
.svc a>span.btn{display:none}
.svc{gap:14px}
.svc .t-s{display:flex;align-items:baseline;gap:10px}
.svc .t-s::after{content:"→";font-size:.72em;color:var(--charcoal-50);transition:transform .3s var(--ease-standard),color .3s var(--ease-standard);display:inline-block}
.svc a:hover .t-s::after{transform:translateX(6px);color:var(--charcoal)}
.slider-track>.proj p{min-height:0}

/* Services on the homepage: name the four, show the work,
   and let the service pages carry the detail. */
.services .svcgrid{grid-template-columns:1fr 1fr;gap:clamp(36px,4.6vw,72px) clamp(24px,3vw,48px)}
a.svc{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--charcoal)}
a.svc img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
a.svc .t-s{font-size:clamp(22px,2.6vw,36px);line-height:1.04;letter-spacing:-.03em}
a.svc .t-lede{font-size:clamp(16px,1.5vw,21px);line-height:1.25}
@media (max-width:760px){.services .svcgrid{grid-template-columns:1fr}a.svc img{aspect-ratio:3/2}}

/* The four labels are the doors into the four services. */
.co-labels{pointer-events:none}
.co-labels>a{pointer-events:auto;text-decoration:none;transition:opacity .35s var(--ease-standard)}
.co-labels>a .go{font-size:clamp(14px,1.3vw,18px);color:var(--charcoal-50);transition:transform .3s var(--ease-standard),color .3s var(--ease-standard);margin-top:2px}
.co-labels>a:hover .go,.co-labels>a:focus-visible .go{transform:translateX(6px);color:var(--charcoal)}
.co-labels:hover>a{opacity:.4}
.co-labels>a:hover,.co-labels>a:focus-visible{opacity:1}
.co-labels>a:focus-visible{outline:var(--rule-seam) solid var(--focus-ring);outline-offset:6px}
.coalesce:hover .co-mark img{animation-play-state:paused}
@media (max-width:700px){.co-labels>a .go{display:none}}

/* Homepage: the practice is introduced, not explained.
   The full bio lives on the About page. */
.whoami .whoami-grid{grid-template-columns:4fr 7fr;align-items:center}
.whoami .whoami-lede{margin:0;max-width:22ch;font-size:clamp(24px,3.2vw,44px)}
.whoami .whoami-fig img{aspect-ratio:4/5}

/* About page */
.about-body{padding-top:var(--sec)}
.about-body .whoami-lede{max-width:26ch;margin-bottom:clamp(40px,5vw,72px)}
.about-grid{display:grid;grid-template-columns:3fr 8fr;gap:clamp(28px,5vw,88px);align-items:start}
.about-meta{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);padding-top:6px}
.about-meta .t-micro{color:var(--charcoal-70);margin-bottom:6px}
.about-prose{display:flex;flex-direction:column;gap:clamp(20px,2.2vw,30px);max-width:56ch}
.about-prose p{font-size:clamp(16px,1.25vw,18px);line-height:1.75;color:var(--charcoal-70);margin:0}
.about-next{padding-top:var(--sec);padding-bottom:var(--sec)}
.about-next .svcgrid{grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px)}
@media (max-width:900px){
 .whoami .whoami-grid{grid-template-columns:1fr;align-items:start}
 .whoami .whoami-lede{max-width:30ch}
 .about-grid{grid-template-columns:1fr;gap:28px}
 .about-next .svcgrid{grid-template-columns:1fr}
}

/* ── contrast floor ───────────────────────────────────
   12px uppercase micro-labels are not headline scale, so
   they need 4.5:1. --charcoal-50 measures 3.38:1 on white;
   --charcoal-70 measures 6.53:1 and reads the same at this
   size. Dark-ground labels already pass and are untouched. */
.sec-head .t-micro,.svc-hero .eyebrow,.about-meta .t-micro,.proj-meta .t-micro,.quiet,.eyebrow-row .eyebrow,.combos .t-micro{color:var(--charcoal-70)}
/* The "Scroll" cue only sits on charcoal while the panel exists —
   below 760px the panel is display:none and the ground is paper, so
   the correction is scoped to the width that makes it true. */
@media (min-width:761px){.foot-right .t-micro{color:var(--charcoal-30)}}
@media (max-width:760px){.foot-right .t-micro{color:var(--charcoal-70)}}
.co-centre .lab{color:var(--cool-grey)}
.whoami-fig .rl,.co-labels .d{color:var(--charcoal-70)}
.approach-teaser .sec-head .t-micro,.at-head .t-micro,.footcols .t-micro,.acc-n{color:var(--charcoal-30)}

/* Approach: the title sits on the charcoal, not across the
   photograph's edge. Text never lands on a busy image. */
.how-img{position:static;display:block;background:var(--charcoal);padding-bottom:0}
.how-img img{width:100%;aspect-ratio:2.35/1;object-fit:cover;display:block}
.how-img .how-title{position:static;transform:none;padding-top:clamp(32px,4.4vw,64px);padding-bottom:0;color:var(--white)}
.how{padding-top:clamp(28px,3.4vw,48px)}
.how-lede{padding-top:clamp(24px,3vw,40px)}
@media (max-width:760px){.how-img img{aspect-ratio:4/3}}

/* The revealed copy keeps to the right, but with a column
   wide enough to read — roughly 60 characters, not 30. */
.acc-inner{grid-template-columns:clamp(44px,5vw,72px) minmax(0,.75fr) minmax(0,1.9fr) 44px}
.acc-lead{max-width:52ch}
.acc-body{max-width:62ch}
.acc-out{max-width:52ch}
@media (max-width:860px){.acc-inner{grid-template-columns:clamp(34px,8vw,48px) minmax(0,1fr) 32px}}

/* Project facts sit on one line now that the placeholder
   year is gone. */
main .proj-meta,.wrap .proj-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22ch),1fr));gap:clamp(20px,2.6vw,36px) var(--gap)}
@media (max-width:760px){main .proj-meta,.wrap .proj-meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){main .proj-meta,.wrap .proj-meta{grid-template-columns:1fr}}

/* About: portrait, facts, prose — three columns, the
   portrait carrying the person and the band carrying
   the work. No photograph does two jobs. */
.about-grid{grid-template-columns:3fr 2.4fr 6fr}
.about-portrait{margin:0}
.about-portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 22%;display:block}
.whoami-fig img{object-position:50% 20%}
@media (max-width:900px){
 .about-grid{grid-template-columns:1fr}
 .about-portrait img{aspect-ratio:4/3;object-position:50% 20%}
}

/* ═══ the opening arrives without JS ═══════════════════
   The words and the panel were hidden by CSS and revealed
   by a class that JS adds on load — so any environment
   where that callback does not run got a blank hero. The
   entrance is now a self-completing animation: it ends
   visible whether or not anything else runs. */
html.js .opening-panel{transform:none;animation:op-panel 1.1s var(--ease-standard) both}
@keyframes op-panel{from{transform:scaleY(0)}to{transform:none}}

html.js .hero-amp .l{transform:translate(-50%,-50%);opacity:1;animation:op-amp-l 1.35s cubic-bezier(.22,0,.12,1) .15s both}
html.js .hero-amp .r{transform:translate(-50%,-50%);opacity:1;animation:op-amp-r 1.35s cubic-bezier(.22,0,.12,1) .15s both}
@keyframes op-amp-l{from{transform:translate(-50%,-50%) translateX(-22%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
@keyframes op-amp-r{from{transform:translate(-50%,-50%) translateX(22%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}

html.js .hero-pair .w1{opacity:1;transform:none;animation:op-w1 1.35s cubic-bezier(.22,0,.12,1) .3s both}
html.js .hero-pair .w2{opacity:1;transform:none;animation:op-w2 1.35s cubic-bezier(.22,0,.12,1) .3s both}
@keyframes op-w1{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
@keyframes op-w2{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
 html.js .opening-panel,html.js .hero-amp .l,html.js .hero-amp .r,
 html.js .hero-pair .w1,html.js .hero-pair .w2{animation:none}
}

/* The opening's scroll range, in viewport units — resolved by the
   browser against the live viewport rather than read once by JS. */
html.js .opening-track{height:calc(100vh * 2.8)}
@media (max-width:760px){html.js .opening-track{height:calc(100vh * 2.4)}}
@media (prefers-reduced-motion:reduce){html.js .opening-track{height:auto}}

/* ═══ OPENING (rebuilt) ════════════════════════════════
   Five pairings, each carrying a photograph of the work it
   names. One scroll position drives frames, words and cue.
   Everything paints without JS: frame 0 and its words are
   visible by default; opening.js only takes over on scroll. */
.hero2{position:relative}
.h2-track{height:auto}
.hero2.h2-live .h2-track{height:calc(100vh * 4.6)}
.h2-stage{position:relative;height:calc(100vh - 76px);min-height:460px;overflow:hidden;display:grid;place-items:center}
.hero2.h2-live .h2-stage{position:sticky;top:76px}
.h2-frames{position:absolute;inset:0}
.h2-frame{position:absolute;inset:0;opacity:0;will-change:opacity,transform}
.h2-frame.first{opacity:1}
.h2-frame img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(.92)}
.h2-tone{position:absolute;top:0;height:100%;width:50%;pointer-events:none}
.h2-tone.l{left:0;background:rgba(247,247,245,.58);mix-blend-mode:lighten}
.h2-tone.r{right:0;background:rgba(33,35,34,.72);mix-blend-mode:multiply}
.h2-pair{position:relative;z-index:3;width:100%;margin:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:clamp(8px,1.6vw,28px);padding:0 clamp(16px,3vw,48px);font-weight:500;font-size:clamp(32px,6.2vw,104px);line-height:1;letter-spacing:-.045em}
.h2-l,.h2-r{position:relative;display:block;height:1em}
.h2-l{justify-self:end}
.h2-r{justify-self:start}
.h2-word{position:absolute;top:0;white-space:nowrap;opacity:0;will-change:opacity,transform}
.h2-word.first{opacity:1}
.h2-l .h2-word{right:0;color:var(--charcoal)}
.h2-r .h2-word{left:0;color:var(--white)}
.h2-amp{position:relative;width:clamp(58px,9vw,140px);height:clamp(110px,15vw,232px)}
.h2-amp span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(102px,14.8vw,228px);line-height:1;font-weight:400}
.h2-amp .l{color:var(--charcoal);clip-path:inset(-30% 50% -30% -30%)}
.h2-amp .r{color:var(--white);clip-path:inset(-30% -30% -30% 50%)}
.h2-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end;padding:0 var(--pad) clamp(26px,3.4vw,44px)}
.h2-state{margin:0;font-weight:500;font-size:clamp(17px,1.9vw,26px);line-height:1.1;letter-spacing:-.03em;color:var(--charcoal)}
.h2-nav{display:flex;align-items:center;gap:16px}
.h2-dots{display:flex;gap:8px}
.h2-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--charcoal-30);cursor:pointer;transition:background .3s var(--ease-standard)}
.h2-dot[aria-current="true"]{background:var(--white)}
.h2-dot:hover{background:var(--cool-grey)}
.h2-nav .t-micro{color:var(--charcoal-30)}
@media (max-width:760px){
 .hero2.h2-live .h2-track{height:auto}
 .hero2.h2-live .h2-stage{position:static}
 .h2-stage{height:auto;min-height:0;padding:clamp(44px,11vw,68px) 0 clamp(26px,5vw,36px)}
 .h2-frames,.h2-tone{display:none}
 .h2-pair{grid-template-columns:1fr;justify-items:start;font-size:clamp(34px,10.4vw,56px);padding:0 var(--pad)}
 .h2-l,.h2-r{justify-self:start}
 .h2-l .h2-word,.h2-r .h2-word{left:0;right:auto;color:var(--charcoal)}
 .h2-amp{width:auto;height:auto}
 .h2-amp span{position:static;transform:none;font-size:1.25em;display:block}
 .h2-amp .r{display:none}
 .h2-amp .l{clip-path:none}
 .h2-foot{position:static;grid-template-columns:1fr;padding:clamp(22px,5vw,30px) var(--pad) 0}
 .h2-dot[aria-current="true"]{background:var(--charcoal)}
 .h2-nav .t-micro{color:var(--charcoal-70)}
}

/* Static mode — reduced motion, or JS unavailable. No scroll sequence,
   so the dots become the control and every pairing stays reachable. */
.hero2:not(.h2-live) .h2-frame,.hero2:not(.h2-live) .h2-word{transition:none}
.hero2.h2-static .h2-dot{width:11px;height:11px}
.hero2.h2-static .h2-nav .t-micro{display:none}
.hero2:not(.h2-live) .h2-dot[aria-current="true"]{outline:2px solid var(--white);outline-offset:2px}
@media (max-width:760px){.hero2:not(.h2-live) .h2-dot[aria-current="true"]{outline-color:var(--charcoal)}}

/* ═══ HERO ═════════════════════════════════════════════
   Autoplaying pairings. Type sits on charcoal, photography in its
   own panel — the seam between them is the edge of the two, and the
   ampersand straddles it. No type over faces, so each frame can be
   cropped for the photograph rather than for legibility. */
.hero{position:relative;display:grid;grid-template-columns:44fr 56fr;min-height:min(calc(100vh - 76px),820px);background:var(--charcoal);overflow:hidden}
.hx-type{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vh,34px);padding:clamp(40px,5vw,72px) clamp(28px,4vw,64px)}
.hx-pair{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(2px,.6vh,8px);font-weight:500;font-size:clamp(38px,5.1vw,88px);line-height:.94;letter-spacing:-.045em;color:var(--white)}
.hx-l,.hx-r{position:relative;display:block;height:1em;width:100%}
.hx-word{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform:translateY(.16em)}
.hx-word.on{opacity:1;transform:none}
.hero.hx-anim .hx-word{transition:opacity .5s var(--ease-standard),transform .6s var(--ease-standard)}
.hero.hx-anim .hx-word.on{transition-delay:.1s}
.hx-r .hx-word{color:var(--cool-grey)}
.hx-state{margin:0;font-weight:500;font-size:clamp(16px,1.5vw,22px);line-height:1.15;letter-spacing:-.025em;color:var(--white)}
.hx-ctl{display:flex;align-items:center;gap:20px;margin-top:clamp(4px,1.6vh,18px)}
.hx-dots{display:flex;gap:9px}
.hx-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:background .3s var(--ease-standard)}
.hx-dot[aria-current="true"]{background:var(--white)}
.hx-dot:hover{background:var(--cool-grey)}
.hx-toggle{background:none;border:0;padding:4px 0;color:rgba(255,255,255,.62);cursor:pointer;letter-spacing:.09em}
.hx-toggle:hover{color:var(--white)}
.hx-media{position:relative}
.hx-frames{position:absolute;inset:0}
.hx-frame{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.035)}
.hx-frame.on{opacity:1;transform:none}
.hero.hx-anim .hx-frame{transition:opacity .85s var(--ease-standard),transform 1.4s var(--ease-standard)}
.hx-frame img{width:100%;height:100%;object-fit:cover;display:block}
.hx-amp{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);z-index:3;font-size:clamp(90px,11vw,180px);line-height:1;color:var(--white);pointer-events:none;mix-blend-mode:difference}
@media (max-width:860px){
 .hero{grid-template-columns:1fr;min-height:0}
 .hx-media{order:-1;aspect-ratio:4/3}
 .hx-frames{position:absolute}
 .hx-type{padding:clamp(30px,7vw,44px) var(--pad) clamp(34px,8vw,48px)}
 .hx-pair{font-size:clamp(40px,11.5vw,66px)}
}

/* ═══ MASTHEAD ═════════════════════════════════════════
   One page-opening for every interior page. Charcoal ground,
   paper type, the ampersand bleeding off the corner — the
   same vocabulary as the homepage seam, so every page
   announces itself the same way. */
.masthead{position:relative;background:var(--charcoal);color:var(--white);overflow:hidden;padding:clamp(52px,7.4vw,112px) 0 clamp(44px,5.6vw,80px)}
.mh-inner{position:relative;z-index:2}
.mh-eyebrow{color:var(--cool-grey)}
.mh-eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s var(--ease-standard)}
.mh-eyebrow a:hover{border-bottom-color:var(--cool-grey)}
.mh-title{margin:16px 0 0;color:var(--white);max-width:21ch}
.mh-lede{margin:22px 0 0;max-width:50ch;color:var(--cool-grey)}
.mh-note{margin:14px 0 0;max-width:52ch;color:var(--cool-grey)}
.mh-title .amp{color:var(--cool-grey)}
.mh-amp{position:absolute;right:-.06em;bottom:-.3em;z-index:1;font-weight:400;font-size:clamp(230px,33vw,440px);line-height:1;color:rgba(247,247,245,.07);pointer-events:none;user-select:none}
.proj-hero.mh-after{padding-top:clamp(34px,4.2vw,58px)}
.masthead + .band.bleed{margin-top:0}
@media (max-width:760px){.mh-amp{font-size:190px;right:-.1em}}

/* Project figures — shared by every project page. */
.figrow figure img{width:100%;height:auto;display:block}
.figrow figure figcaption{margin-top:12px;font-size:14px;color:var(--charcoal-70)}
.figrow-tall{align-items:start;margin-top:clamp(28px,3.4vw,48px)}
.figrow.figrow-tall figure img{height:auto;object-fit:contain;aspect-ratio:auto}
.figrow.figrow-tall figure:first-child img{border:1px solid var(--border-hairline)}
.proj-link{margin:clamp(34px,4.2vw,58px) 0 0;border-top:1px solid var(--border-hairline);padding-top:clamp(20px,2.4vw,30px)}
.proj-link a{white-space:nowrap;text-decoration:none;color:var(--charcoal);border-bottom:1px solid var(--charcoal-30);padding-bottom:4px;transition:border-color .3s var(--ease-standard)}
.proj-link a:hover{border-bottom-color:var(--charcoal)}

/* Full-width project figure — for collateral mockups that carry
   readable detail and shouldn't be halved. */
.figfull{margin:0 0 clamp(26px,3.2vw,44px)}
.figrow{margin-bottom:clamp(26px,3.2vw,44px)}
.figfull img{width:100%;display:block}
.figfull figcaption{padding-top:12px}

/* Intro — the statement now leads the section, with the practice
   description as a two-paragraph column beside it. */
.intro-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3.6vw,52px);align-items:start;padding-top:clamp(8px,1.2vw,18px)}
.intro-head{margin:0;max-width:22ch;font-size:clamp(32px,7.2vw,96px);line-height:1;letter-spacing:-.04em;overflow-wrap:normal;hyphens:none;text-wrap:balance}
.intro-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26ch),1fr));gap:clamp(14px,2.4vw,40px);max-width:none}
.intro-body p{margin:0}
.intro .intro-grid{grid-column:1}
.intro-fig{grid-column:3;margin:0;align-self:stretch;min-height:100%}
.intro-fig img{width:100%;height:100%;min-height:clamp(320px,34vw,520px);object-fit:cover;object-position:58% 30%;display:block}
@media (max-width:1100px){.intro-fig{grid-column:1}.intro-fig img{min-height:0;aspect-ratio:3/2;height:auto}}
@media (max-width:760px){.intro-grid{grid-template-columns:1fr;gap:clamp(20px,5vw,30px)}.intro-head{font-size:clamp(32px,8.6vw,56px)}}
/* With the statement moved out, the opening foot carries only the
   pairing dots and the scroll cue. */
.h2-foot{grid-template-columns:1fr}
.h2-nav{justify-content:space-between;width:100%}
/* Left-hand word sits on the paper side and must stay charcoal. */
.h2-l .h2-word{color:var(--charcoal)}
.h2-nav .t-micro{color:var(--cool-grey)}

/* footer: four columns */
.footcols{grid-template-columns:repeat(4,minmax(0,1fr));max-width:960px}
@media (max-width:1100px){.footcols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.footcols{grid-template-columns:1fr}}

/* homepage approach: full accordion + button */
.approach-teaser .acc{margin-top:clamp(8px,1vw,16px)}
.at-more{padding-top:clamp(32px,4vw,56px)}
.at-more a.at-btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:12px 24px;border:1px solid var(--white);color:var(--white);text-decoration:none;font-weight:500;font-size:clamp(16px,1.3vw,18px);letter-spacing:-.01em;transition:background .16s var(--ease-standard),color .16s var(--ease-standard)}
.at-more a.at-btn:hover{background:var(--white);color:var(--charcoal)}
.at-more a.at-btn:focus-visible{outline:2px solid var(--white);outline-offset:2px}
/* services index without the mark: four doors, 2x2 */
.coalesce-hero.no-mark{display:block;min-height:0;padding:0 var(--pad);background:var(--cool-grey)}
.no-mark .co-labels{position:static;inset:auto;grid-template-rows:auto;gap:0 var(--gap);max-width:var(--wrap,1440px);margin:0 auto;padding-block:clamp(24px,4vw,64px)}
.no-mark .co-labels>a{align-items:flex-start!important;text-align:left!important;justify-content:space-between!important;gap:clamp(24px,4vw,64px);min-height:clamp(180px,20vw,300px);padding:clamp(20px,2vw,28px) 0 clamp(28px,3vw,44px);border-top:1px solid var(--charcoal)}
.no-mark .co-labels .h{font-size:clamp(26px,3.4vw,52px);white-space:normal}
.no-mark .co-labels .d{display:block;font-size:clamp(15px,1.4vw,20px)}
@media (max-width:700px){.no-mark .co-labels{grid-template-columns:1fr}.no-mark .co-labels>a{min-height:0}}

/* service pages: description before projects; banner crop kept to heads */
.banner-frame{aspect-ratio:16/9;max-height:82vh}
.svc-desc{padding-top:var(--sec)}
.svc-desc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);padding-top:clamp(14px,1.6vw,22px)}
.svc-desc-lede{margin:0;font-size:clamp(22px,2.4vw,34px);line-height:1.2;letter-spacing:-.025em;max-width:24ch}
.svc-desc-body{display:flex;flex-direction:column;gap:16px}
.svc-desc-body p{margin:0}
.svc-related{padding-top:var(--sec)}
@media (max-width:860px){.svc-desc-grid{grid-template-columns:1fr;gap:24px}}

/* enquiry: sent state */
.cp-btn:disabled{opacity:.6;cursor:progress}
.cp-form [aria-invalid="true"]{border-color:var(--charcoal);border-bottom-width:2px}
.cp-done{display:flex;flex-direction:column;align-items:flex-start;gap:16px;border-top:4px solid var(--charcoal);padding-top:clamp(20px,2.4vw,32px)}
.cp-done[hidden]{display:none}
.cp-done:focus{outline:none}
.cp-done .t-micro{color:var(--charcoal-70)}
.cp-done h2{margin:0}
.cp-done p{margin:0;max-width:44ch}
.cp-again{font:inherit;font-weight:500;font-size:clamp(15px,1.2vw,17px);min-height:48px;padding:0 24px;margin-top:8px;background:none;color:var(--charcoal);border:1px solid var(--charcoal);cursor:pointer;transition:background .16s var(--ease-standard)}
.cp-again:hover{background:var(--charcoal-06)}
.cp-again:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px}

/* audit 2026-10-03 */
.skip-link{position:absolute;left:var(--pad,24px);top:-100px;z-index:100;padding:12px 18px;background:var(--charcoal);color:var(--white);font-weight:500;text-decoration:none}
.skip-link:focus{top:12px;outline:2px solid var(--white);outline-offset:2px}
.footcols{grid-template-columns:repeat(3,minmax(0,1fr));max-width:820px}
@media (max-width:1100px){.footcols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.footcols{grid-template-columns:1fr}}
.whoami .whoami-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start;gap:clamp(32px,6vw,104px)}
.whoami-lead{display:flex;flex-direction:column;gap:clamp(24px,3vw,40px)}
.whoami .whoami-lede{margin:0}
.whoami-name{padding-top:clamp(14px,1.5vw,18px);border-top:1px solid var(--charcoal);display:flex;flex-direction:column;gap:6px}
.whoami-name .nm{font-weight:500;font-size:clamp(17px,1.6vw,21px);line-height:1.1;letter-spacing:-.02em}
.whoami-name .rl{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal-70)}
.whoami .whoami-body{max-width:58ch;padding-top:clamp(6px,1vw,14px)}
@media (max-width:900px){.whoami .whoami-grid{grid-template-columns:1fr}}

/* ── Refinements — 3 October 2026 ─────────────────────────────── */

/* Opening on phones: keep the photographs and the seam. The seam turns
   horizontal — paper above, charcoal below — and the ampersand is split
   across it, so the brand idea survives the stack instead of being
   dropped. Same scroll sequence as desktop. */
@media (max-width:760px){
 .hero2.h2-live .h2-track{height:calc(100vh * 4.2);height:calc(100svh * 4.2)}
 .hero2.h2-live .h2-stage{position:sticky;top:76px}
 .h2-stage{height:calc(100vh - 76px);height:calc(100svh - 76px);min-height:520px;padding:0;display:grid;place-items:center}
 .h2-frames,.h2-tone{display:block}
 .h2-tone{left:0;right:0;width:100%;height:50%}
 .h2-tone.l{top:0}
 .h2-tone.r{top:50%}
 .h2-pair{grid-template-columns:1fr;justify-items:center;font-size:clamp(46px,13.5vw,68px);padding:0}
 .h2-l,.h2-r{justify-self:stretch;width:100%}
 .h2-l .h2-word,.h2-r .h2-word{left:0;right:0;text-align:center}
 .h2-l .h2-word{color:var(--charcoal)}
 .h2-r .h2-word{color:var(--white)}
 .h2-amp{width:100%;height:2em}
 .h2-amp span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:2em;display:block}
 .h2-amp .r{display:block;color:var(--white);clip-path:inset(50% -30% -30% -30%)}
 .h2-amp .l{color:var(--charcoal);clip-path:inset(-30% -30% 50% -30%)}
 .h2-foot{position:absolute;padding:0 var(--pad) 22px}
 .h2-dot{background:rgba(255,255,255,.35)}
 .h2-dot[aria-current="true"]{background:var(--white)}
 .h2-nav .t-micro{color:var(--cool-grey)}
 .hero2:not(.h2-live) .h2-dot[aria-current="true"]{outline-color:var(--white)}
}

/* Who we are: one statement, then the portrait beside the detail. */
.whoami-lede{font-size:clamp(24px,2.9vw,40px);max-width:30ch;margin-top:clamp(28px,3vw,44px)}
.whoami-grid{grid-template-columns:4fr 7fr}
.whoami-fig img{aspect-ratio:4/5;object-position:50% 22%}
@media (max-width:900px){.whoami-grid{grid-template-columns:1fr}.whoami-fig{max-width:420px}.whoami-fig img{aspect-ratio:4/5}}

/* Photo still to come: a quiet tile carrying the mark, not a note. */
.placeholder.ph-mark{background:var(--charcoal);position:relative;overflow:hidden;padding:0}
.placeholder.ph-mark::after{content:"&";position:absolute;right:-.08em;bottom:-.3em;font-size:clamp(140px,16vw,260px);line-height:1;font-weight:400;color:#2f3231}
.placeholder.ph-mark.hero-frame::after{font-size:clamp(240px,34vw,560px)}
.proj:hover .placeholder.ph-mark::after{color:#383b3a}

/* Services index: four rows, each a sentence you can act on. */
.svcrows{padding-top:clamp(40px,5vw,80px);padding-bottom:clamp(56px,7vw,112px)}
.svcrow{display:grid;grid-template-columns:clamp(40px,5vw,72px) minmax(0,1.15fr) minmax(0,1fr) auto;gap:clamp(16px,3vw,48px);align-items:baseline;padding:clamp(28px,3.4vw,48px) 0;border-top:1px solid var(--charcoal);text-decoration:none;color:var(--charcoal);transition:opacity .35s var(--ease-standard)}
.svcrow:last-child{border-bottom:1px solid var(--charcoal)}
.svcrow .n{color:var(--charcoal-70)}
.svcrow .h{font-weight:500;font-size:clamp(28px,3.6vw,56px);line-height:1.02;letter-spacing:-.04em}
.svcrow .h .amp{color:var(--charcoal-50)}
.svcrow .d{display:flex;flex-direction:column;gap:8px;max-width:42ch}
.svcrow .v{font-weight:500;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.02em}
.svcrow .note{font-size:clamp(15px,1.15vw,17px);line-height:1.55;color:var(--charcoal-70)}
.svcrow .go{font-size:clamp(20px,2vw,28px);color:var(--charcoal-50);transition:transform .3s var(--ease-standard),color .3s var(--ease-standard)}
.svcrows:hover .svcrow{opacity:.4}
.svcrows .svcrow:hover,.svcrows .svcrow:focus-visible{opacity:1}
.svcrow:hover .go,.svcrow:focus-visible .go{transform:translateX(8px);color:var(--charcoal)}
@media (max-width:900px){.svcrow{grid-template-columns:1fr auto;row-gap:14px}.svcrow .n{grid-column:1/-1}.svcrow .d{grid-column:1/-1;grid-row:3}.svcrow .go{grid-column:2;grid-row:2}}
@media (hover:none){.svcrows:hover .svcrow{opacity:1}}

/* Service pages: related work four-up, so long names don't crush. */
.svc-related .projgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.svc-related .projgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.svc-related .projgrid{grid-template-columns:1fr}}
.banner-frame + .svc-related{padding-top:clamp(56px,7vw,112px)}

/* Project pages: give the outbound link its own room above "Next". */
.proj-link{margin-bottom:clamp(40px,5vw,72px)}
.proj-link a{text-decoration-thickness:1px;text-underline-offset:.22em}

/* ── Refinements — 11 October 2026 ────────────────────────────── */

/* Opening: four pairings now, so a shorter scroll track. */
.hero2.h2-live .h2-track{height:calc(100vh * 3.8)}
@media (max-width:760px){.hero2.h2-live .h2-track{height:calc(100vh * 3.5);height:calc(100svh * 3.5)}}

/* Who we are: portrait left, statement and bio right, both starting
   on the same line; caption sits under the portrait. */
.whoami .sec-head{margin-bottom:clamp(32px,4vw,56px)}
.whoami-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,104px);align-items:start;padding-top:0}
.whoami-fig{margin:0}
.whoami-fig img{aspect-ratio:4/5;object-position:50% 20%}
.whoami-text{display:flex;flex-direction:column;gap:clamp(24px,2.6vw,36px)}
.whoami-text .whoami-lede{margin:0;max-width:24ch;font-size:clamp(24px,2.6vw,38px);line-height:1.12}
.whoami-text .whoami-body{padding:clamp(20px,2.2vw,28px) 0 0;border-top:1px solid var(--charcoal);max-width:58ch}
@media (max-width:900px){
 .whoami-grid{grid-template-columns:1fr;gap:clamp(28px,6vw,44px)}
 .whoami-fig{max-width:none}
 .whoami-fig img{aspect-ratio:4/3;object-position:50% 24%}
}

/* How we work: the principle leads; the inconvenient truth sits
   beside it under a column label, so the link to the intro is plain. */
.acc-cols{display:grid;grid-template-columns:clamp(44px,5vw,72px) minmax(0,1.15fr) minmax(0,1fr) 44px;gap:var(--gap);padding:0 clamp(10px,1.4vw,20px) 14px}
.acc-cols .t-micro{color:var(--charcoal-30)}
.acc-st .amp{color:var(--charcoal-50)}
.acc-pr{color:var(--cool-grey);font-size:clamp(17px,1.7vw,24px);line-height:1.3;letter-spacing:-.02em;text-wrap:balance}
.acc-lb{display:none}
.acc-inner{grid-template-columns:clamp(44px,5vw,72px) minmax(0,1.15fr) minmax(0,1fr) 44px}
.acc-inner>*{grid-column:3}
@media (max-width:860px){
 .acc-cols{display:none}
 .acc-lb{display:block;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal-50);margin:6px 0 6px}
 .acc-inner{grid-template-columns:clamp(34px,8vw,48px) minmax(0,1fr) 32px}
 .acc-inner>*{grid-column:2}
}

/* Service pages: one client voice, between the banner and the work. */
.svc-voice{padding-top:clamp(56px,7vw,112px)}
.svc-voice .svc-pq{margin-top:0;max-width:980px}
.svc-pq blockquote{font-size:clamp(22px,2.7vw,38px);line-height:1.3;text-wrap:pretty}
.svc-pq figcaption{display:flex;flex-direction:column;gap:6px}
.svc-pq .nm{font-weight:500;font-size:clamp(16px,1.4vw,19px);letter-spacing:-.02em}
.svc-pq .rl{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal-70)}
.svc-voice + .svc-related{padding-top:clamp(56px,7vw,112px)}
.acc-inner{row-gap:0}
.acc-body{margin-top:clamp(14px,1.4vw,18px)}

/* ── Service pages, rebuilt — 11 October 2026 ─────────────────────
   Words lead. One measured grid (5 / 7) carries every section, so
   headings, image, list and quote all start on the same two lines. */
.sv-intro{padding-top:clamp(56px,7vw,112px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.sv-lead{grid-column:1/11;margin:0;font-weight:500;font-size:clamp(26px,3.2vw,46px);line-height:1.12;letter-spacing:-.035em;color:var(--charcoal);text-wrap:balance}
.sv-sub{grid-column:6/12;margin:clamp(24px,3vw,44px) 0 0;font-size:clamp(17px,1.5vw,21px);line-height:1.5;letter-spacing:-.01em;color:var(--charcoal-70);max-width:46ch}
.sv-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,104px);align-items:start;margin-top:var(--sec);padding-top:clamp(28px,3vw,44px);border-top:1px solid var(--charcoal)}
.sv-fig{margin:0}
.sv-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.sv-col{display:flex;flex-direction:column;gap:clamp(14px,1.4vw,20px);max-width:58ch}
.sv-col h2{margin:0 0 clamp(6px,1vw,14px)}
.sv-col p,.sv-list .v{margin:0;font-size:clamp(16px,1.25vw,18px);line-height:1.7;color:var(--charcoal-70)}
.sv-side h2{margin:0}
.sv-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--charcoal-30)}
.sv-list li{display:grid;grid-template-columns:clamp(36px,4vw,56px) minmax(0,1fr);column-gap:clamp(12px,1.6vw,24px);row-gap:6px;padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid var(--charcoal-30)}
.sv-list .n{grid-row:1/3;color:var(--charcoal-70);padding-top:.35em}
.sv-list .k{font-weight:500;font-size:clamp(19px,1.7vw,24px);line-height:1.2;letter-spacing:-.025em;color:var(--charcoal)}
.sv-list .v{line-height:1.6}
.sv-help .sv-list{margin-top:calc(-1 * clamp(18px,2vw,26px));border-top:0}
/* Testimonial: a quiet band, the serif at reading size. */
.sv-quote{background:var(--cool-grey);margin-top:var(--sec);padding:clamp(56px,7vw,112px) 0}
.sv-quote .sv-row{margin-top:0;border-top-color:var(--charcoal)}
.sv-quote-fig{margin:0;max-width:40ch}
.sv-quote-fig blockquote{margin:0;font-family:var(--font-quote);font-weight:300;font-size:clamp(22px,2.2vw,32px);line-height:1.35;letter-spacing:-.005em;color:var(--charcoal);text-wrap:pretty}
.sv-quote-fig figcaption{display:flex;flex-direction:column;gap:6px;margin-top:clamp(20px,2.4vw,32px)}
.sv-quote-fig .nm{font-weight:500;font-size:clamp(16px,1.3vw,18px);letter-spacing:-.02em}
.sv-quote-fig .rl{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal-70)}
.sv-quote + .wrap{padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(56px,7vw,104px)}
/* Closing block carries the page's own question. */
.contact-cta .ask:has(.ask-q){flex-direction:column;align-items:flex-start;gap:8px}
.contact-cta .ask-q{font-size:clamp(14px,1.1vw,16px);letter-spacing:0;color:var(--cool-grey);opacity:.75}
.contact-cta .ask-a{display:flex;align-items:baseline;gap:16px}
@media (max-width:900px){
 .sv-lead,.sv-sub{grid-column:1/-1}
 .sv-row{grid-template-columns:1fr;gap:clamp(20px,5vw,32px)}
 .sv-help .sv-list{margin-top:0}
}
/* rows sit inside the wrap, so hairlines stop at the content edge */
.sv-why,.sv-help,.sv-approach{padding-top:0}
.sv-quote .sv-row{border-top:0;padding-top:0}
.sv-quote-fig{max-width:30em}
.sv-quote-fig blockquote{font-size:clamp(22px,2vw,30px)}
.sv-quote + .wrap{padding-bottom:clamp(40px,4vw,64px)}

@media (min-width:901px){.sv-side{position:sticky;top:112px;align-self:start}}

/* ── Project case studies — 11 October 2026 ───────────────────────
   The seam carries the hero: a charcoal panel holding the title meets
   the photograph at a hard edge. Below, three numbered chapters with a
   change of pace each — white, white with the contribution list beside
   the story, then charcoal for the outcome — and a next-project band. */
.cs{--edge:max(var(--pad),calc((100vw - var(--maxw)) / 2 + var(--pad)))}
.cs-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:min(calc(100vh - 76px),880px);background:var(--charcoal);color:var(--white)}
.cs-panel{display:flex;flex-direction:column;gap:clamp(40px,5vw,72px);padding:clamp(36px,4.4vw,64px) clamp(28px,4vw,64px) clamp(32px,3.6vw,52px) var(--edge)}
.cs-back{color:var(--cool-grey);text-decoration:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;align-self:flex-start}
.cs-back::before{content:"←";font-size:14px;letter-spacing:0;transition:transform .3s var(--ease-standard)}
.cs-back:hover::before{transform:translateX(-4px)}
.cs-title-block{margin-top:auto}
.cs-title{margin:0;font-weight:500;font-size:clamp(40px,5.4vw,84px);line-height:.98;letter-spacing:-.045em;color:var(--white);text-wrap:balance}
.cs-strap{margin:clamp(18px,2vw,28px) 0 0;font-size:clamp(18px,1.6vw,23px);line-height:1.35;letter-spacing:-.015em;color:var(--cool-grey);max-width:30ch}
.cs-facts{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;gap:clamp(20px,2.6vw,40px);padding-top:clamp(18px,2vw,24px);border-top:1px solid rgba(247,247,245,.22)}
.cs-facts div{display:flex;flex-direction:column;gap:10px;min-width:0}
.cs-facts dt{color:var(--charcoal-30)}
.cs-facts dd{margin:0;display:flex;flex-direction:column;gap:4px;font-size:clamp(14px,1.05vw,16px);line-height:1.4;color:var(--white)}
.cs-facts a{color:var(--white);text-decoration-color:rgba(247,247,245,.45);text-underline-offset:.22em}
.cs-facts a:hover{text-decoration-color:var(--white)}
.cs-hero-img{margin:0;position:relative;overflow:hidden;min-height:340px}
.cs-hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Summary: the one sentence a visitor should leave with. */
.cs-summary{padding-top:clamp(72px,9vw,144px);padding-bottom:clamp(24px,3vw,40px)}
.cs-statement{margin:0;max-width:30ch;font-weight:500;font-size:clamp(26px,3.3vw,50px);line-height:1.12;letter-spacing:-.04em;color:var(--charcoal);text-wrap:pretty}

/* Chapters */
.cs-sec{padding:clamp(64px,8vw,128px) 0}
.cs-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(24px,3vw,40px);align-items:start}
.cs-head{grid-column:1/5;display:flex;flex-direction:column;gap:14px;padding-top:clamp(16px,1.8vw,22px);border-top:1px solid currentColor}
.cs-n{font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--charcoal-50)}
.cs-head h2{margin:0;font-weight:500;font-size:clamp(24px,2.2vw,32px);line-height:1.05;letter-spacing:-.03em}
.cs-text{grid-column:5/13;padding-top:clamp(16px,1.8vw,22px);border-top:1px solid var(--charcoal-30)}
.cs-lead{margin:0;max-width:34ch;font-weight:500;font-size:clamp(21px,1.95vw,29px);line-height:1.28;letter-spacing:-.025em;color:var(--charcoal);text-wrap:pretty}
.cs-body{margin-top:clamp(28px,3vw,44px);columns:2 22ch;column-gap:var(--gap)}
.cs-body p{margin:0 0 1.1em;break-inside:avoid;font-size:clamp(15px,1.12vw,17px);line-height:1.7;color:var(--charcoal-70)}
@media (min-width:901px){.cs-head{position:sticky;top:112px}}

/* 02 — the contribution list sits under the chapter heading */
.cs-contrib{margin-top:clamp(28px,3.4vw,52px);display:flex;flex-direction:column;gap:12px}
.cs-contrib .t-micro{color:var(--charcoal-70)}
.cs-contrib ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--charcoal-30)}
.cs-contrib li{padding:11px 0;border-bottom:1px solid var(--charcoal-30);font-size:clamp(15px,1.15vw,17px);line-height:1.35;letter-spacing:-.01em;color:var(--charcoal)}

/* 03 — the outcome, in charcoal */
.cs-dark{background:var(--charcoal);color:var(--white)}
.cs-dark .cs-head{border-top-color:rgba(247,247,245,.5)}
.cs-dark .cs-n{color:var(--charcoal-30)}
.cs-dark .cs-text{border-top-color:rgba(247,247,245,.18)}
.cs-dark .cs-lead{color:var(--white);font-size:clamp(24px,2.5vw,38px);line-height:1.2;max-width:28ch}
.cs-dark .cs-body p{color:var(--charcoal-30)}
.cs-closing{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,1.6vw,22px);align-items:start;margin:clamp(28px,3vw,44px) 0 0;padding-top:clamp(20px,2.2vw,28px);border-top:1px solid rgba(247,247,245,.18);max-width:52ch;font-size:clamp(17px,1.4vw,20px);line-height:1.45;letter-spacing:-.01em;color:var(--white)}
.cs-closing img{width:clamp(22px,2vw,30px);height:auto;filter:invert(1);opacity:.55;margin-top:2px}
.cs-out{margin:clamp(32px,3.4vw,48px) 0 0}
.cs-out a{display:inline-flex;gap:12px;align-items:center;min-height:52px;padding:0 clamp(20px,1.8vw,26px);border:1px solid rgba(247,247,245,.6);color:var(--white);text-decoration:none;font-weight:500;font-size:15px;letter-spacing:-.005em;transition:background .25s var(--ease-standard),color .25s var(--ease-standard)}
.cs-out a:hover{background:var(--white);color:var(--charcoal)}

/* Next project */
.cs-next{display:block;background:var(--cool-grey);color:var(--charcoal);text-decoration:none}
.cs-next-in{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.cs-next-txt{display:flex;flex-direction:column;gap:14px}
.cs-next-txt .t-micro{color:var(--charcoal-70)}
.cs-next-title{font-weight:500;font-size:clamp(30px,4.2vw,64px);line-height:1;letter-spacing:-.045em}
.cs-next-title .ar{display:inline-block;color:var(--charcoal-50);transition:transform .35s var(--ease-standard),color .35s var(--ease-standard)}
.cs-next:hover .cs-next-title .ar{transform:translateX(10px);color:var(--charcoal)}
.cs-next-img{flex:none;width:clamp(160px,22vw,320px);aspect-ratio:3/2;overflow:hidden}
.cs-next-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease-standard)}
.cs-next:hover .cs-next-img img{transform:scale(1.03)}

@media (max-width:900px){
 .cs-hero{grid-template-columns:1fr;min-height:0}
 .cs-panel{padding:clamp(28px,7vw,44px) var(--pad) clamp(28px,7vw,40px);gap:clamp(36px,9vw,56px)}
 .cs-hero-img{min-height:0;aspect-ratio:4/3;order:2}
 .cs-head,.cs-text{grid-column:1/-1}
 .cs-head{border-top:1px solid currentColor}
 .cs-text{border-top:0;padding-top:0}
 .cs-body{columns:1}
}
@media (max-width:560px){
 .cs-facts{grid-template-columns:1fr 1fr}
 .cs-facts div:nth-child(2){grid-row:span 2}
 .cs-next-img{display:none}
}
/* case study refinements: facts as labelled rows, calmer large type */
.cs-facts{grid-template-columns:1fr;gap:0;padding-top:0;border-top:0}
.cs-facts div{display:grid;grid-template-columns:clamp(84px,8vw,112px) minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px solid rgba(247,247,245,.18)}
.cs-facts div:last-child{border-bottom:1px solid rgba(247,247,245,.18)}
.cs-facts dt{padding-top:3px}
.cs-statement{font-size:clamp(24px,2.7vw,40px);max-width:36ch;line-height:1.16}
.cs-dark .cs-lead{font-size:clamp(22px,2.1vw,32px);max-width:32ch}
@media (max-width:560px){.cs-facts{grid-template-columns:1fr}.cs-facts div:nth-child(2){grid-row:auto}}
.cs-sec:not(.cs-dark) + .cs-sec:not(.cs-dark){padding-top:0}
@media (max-width:900px){
 .cs-head{display:contents}
 .cs-n{grid-column:1/-1;order:0;padding-top:16px;border-top:1px solid currentColor}
 .cs-head h2{grid-column:1/-1;order:1;margin-top:-12px}
 .cs-text{order:2}
 .cs-contrib{grid-column:1/-1;order:3;margin-top:8px}
}

/* ── Case study body text, refined — 11 October 2026 ──────────────
   One column at a reading measure, not two ragged ones. The lead and
   the body share a left edge; the body is quieter and narrower. */
.cs-text{max-width:none}
.cs-lead{max-width:30ch;font-size:clamp(21px,1.85vw,28px);line-height:1.3;letter-spacing:-.022em}
.cs-body{columns:auto;max-width:60ch;margin-top:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:1.05em}
.cs-body p{margin:0;font-size:clamp(16px,1.2vw,18px);line-height:1.68;letter-spacing:-.003em;color:var(--charcoal-70);text-wrap:pretty;hanging-punctuation:first}
.cs-lead,.cs-statement,.cs-closing span{hanging-punctuation:first}
.cs-dark .cs-lead{max-width:30ch}
.cs-dark .cs-body p{color:rgba(247,247,245,.72)}
.cs-closing{max-width:48ch}
/* sections breathe evenly */
.cs-sec{padding:clamp(56px,7vw,112px) 0}
.cs-sec:not(.cs-dark) + .cs-sec:not(.cs-dark){padding-top:clamp(8px,1vw,16px)}
/* gallery between Our role and The outcome */
.cs-gallery{padding:clamp(8px,1vw,16px) 0 clamp(56px,7vw,112px)}
.cs-gallery .projgal{margin:0}
/* no photo yet: the panel takes the full width and the mark holds the right */
.cs-hero-nophoto{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.cs-hero-mark{position:relative;overflow:hidden;background:#2a2c2b;display:flex;align-items:flex-end;justify-content:flex-end;font-weight:400;font-size:clamp(320px,46vw,760px);line-height:.8;color:#333535;user-select:none}
@media (max-width:900px){.cs-hero-mark{display:none}}

/* ── Case-study gallery — same frame on every page ─────────────────
   Every slide is the same 3:2 frame at the same height, so pages read
   alike whatever the photographs. Empty frames hold the layout until
   images are added. */
.cs-gallery{padding:clamp(8px,1vw,16px) 0 clamp(56px,7vw,112px)}
.cs-gal-head{display:flex;justify-content:space-between;align-items:baseline;padding-top:clamp(16px,1.8vw,22px);border-top:1px solid var(--charcoal);margin-bottom:clamp(20px,2.4vw,32px)}
.cs-gal-head .t-micro{color:var(--charcoal-70)}
.cs-gallery .projgal{margin:0}
.cs-gallery .gal-item{width:auto}
.cs-gallery .gal-item img,.cs-gallery .gal-ph{display:block;height:clamp(220px,34vw,500px);width:auto;aspect-ratio:3/2;object-fit:cover;max-width:86vw}
.cs-gallery .gal-contain img{object-fit:contain;background:var(--cool-grey)}
.cs-gallery .gal-item figcaption{max-width:52ch;min-height:1.45em}
.gal-ph{position:relative;overflow:hidden;background:var(--cool-grey)}
.gal-ph::after{content:"&";position:absolute;right:-.06em;bottom:-.28em;font-weight:400;font-size:clamp(150px,20vw,300px);line-height:1;color:rgba(33,35,34,.06)}
.cs-title-long{font-size:clamp(34px,4.2vw,64px)}

/* ── Bilingual top level — 11 October 2026 ────────────────────────
   Te reo Māori leads, English sits beneath it, quieter. */
.nav{gap:clamp(16px,2.3vw,34px)}
.nav a{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;line-height:1.1}
.nav .bi-mi{font-size:15px;color:var(--charcoal)}
.nav .bi-en{font-size:11px;letter-spacing:.02em;color:var(--charcoal-70)}
.nav a[aria-current="page"] .bi-mi{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em}
.bi-eye .bi-sep{margin:0 .7em;opacity:.5}
.bi-eye .bi-en{opacity:.6}
.bi-list{display:flex;flex-direction:column;gap:8px}
.bi-list a{display:inline-flex;align-items:baseline;gap:10px;text-decoration:none;align-self:flex-start}
.bi-list .bi-mi{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.bi-list .bi-en{font-size:.82em;opacity:.6}
@media (max-width:1100px){.nav{gap:clamp(12px,1.8vw,22px)}.nav .bi-mi{font-size:14px}}
@media (max-width:760px){
 .nav.open a{flex-direction:row;align-items:baseline;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--charcoal-15,rgba(0,0,0,.08))}
 .nav.open .bi-mi{font-size:18px}
 .nav.open .bi-en{font-size:13px}
}
.cs-back.bi-eye .bi-sep{margin:0 .2em}

/* ════════════════════════════════════════════════════════════════
   Motion and usability pass — 12 October 2026
   One easing curve for interface movement: var(--ease-standard).
   ════════════════════════════════════════════════════════════════ */

/* ── scrolling ── */
html{scroll-padding-top:96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html.nav-locked{overflow:hidden}
img{height:auto}

/* ── reveals: short, early, once ── */
html.js [data-rv]{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-standard),transform .5s var(--ease-standard);transition-delay:var(--rvd,0ms)}
html.js [data-rv].in{opacity:1;transform:none}
html.js [data-rv-img]{opacity:0;clip-path:none;transition:opacity .65s var(--ease-standard)}
html.js [data-rv-img].in{opacity:1}
html.js [data-rv-wipe]{opacity:1;clip-path:none;transform:none}
@media (prefers-reduced-motion:reduce){html.js [data-rv],html.js [data-rv-img]{opacity:1!important;transform:none!important;transition:none!important}}

/* ── hero: one signature moment ── */
.hero2.h2-live .h2-track{height:240vh}
.h2-l,.h2-r{clip-path:inset(-.12em -100vw -.3em -100vw)}
.hero2.h2-settle .h2-word{transition:opacity .24s var(--ease-standard),transform .24s var(--ease-standard)}
.hero2.h2-live .h2-frame{transition:none}
/* single screen (phones, reduced motion): the dots are the control */
.hero2.h2-static .h2-frame{opacity:0;transition:opacity .9s var(--ease-standard)}
.hero2.h2-static .h2-frame.on{opacity:1}
.hero2.h2-static .h2-word{opacity:0;transform:translate3d(0,.32em,0);transition:opacity .22s var(--ease-standard),transform .26s var(--ease-standard)}
.hero2.h2-static .h2-word.was{transform:translate3d(0,-.32em,0)}
.hero2.h2-static .h2-word.on{opacity:1;transform:none;transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.hero2 .h2-frame,.hero2 .h2-word{transition:none!important}}

/* foot: slide controls and skip link left, two actions right */
.h2-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;grid-template-columns:none}
.h2-nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);width:auto;justify-content:flex-start}
.h2-dots{display:flex;gap:0;margin-left:-17px}
.h2-dot,.hero2.h2-static .h2-dot{position:relative;width:44px;height:44px;padding:0;border:0;border-radius:0;background:none;cursor:pointer}
.h2-dot::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);background:rgba(33,35,34,.28);transition:background .2s var(--ease-standard),width .2s var(--ease-standard),height .2s var(--ease-standard)}
.h2-dot:hover::before{background:rgba(33,35,34,.6)}
.h2-dot[aria-current="true"]::before{width:11px;height:11px;background:var(--charcoal)}
.h2-dot:focus-visible{outline:none}
.h2-dot:focus-visible::after{content:"";position:absolute;inset:9px;border-radius:50%;border:2px solid var(--charcoal)}
.hero2:not(.h2-live) .h2-dot[aria-current="true"]{outline:none}
.h2-dot[aria-current="true"],.h2-dot:hover{background:none}
.h2-skip{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:500;color:var(--charcoal);text-decoration:none;border-bottom:1px solid transparent}
.h2-skip:hover,.h2-skip:focus-visible{border-bottom-color:currentColor}
.h2-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.h2-btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 22px;border:1px solid rgba(247,247,245,.75);color:var(--white);font-size:15px;font-weight:500;text-decoration:none;transition:background .2s var(--ease-standard),color .2s var(--ease-standard),border-color .2s var(--ease-standard)}
.h2-btn:hover,.h2-btn:focus-visible{background:var(--white);color:var(--charcoal);border-color:var(--white)}
.h2-btn-solid{background:var(--white);color:var(--charcoal);border-color:var(--white)}
.h2-btn-solid:hover,.h2-btn-solid:focus-visible{background:transparent;color:var(--white)}
.h2-btn:focus-visible{outline:2px solid var(--white);outline-offset:3px}
@media (max-width:760px){
 .h2-foot{flex-direction:column;align-items:stretch;gap:10px;padding-bottom:20px}
 .h2-nav{justify-content:space-between}
 .h2-dot::before{background:rgba(247,247,245,.4)}
 .h2-dot:hover::before{background:rgba(247,247,245,.7)}
 .h2-dot[aria-current="true"]::before{background:var(--white)}
 .h2-dot:focus-visible::after{border-color:var(--white)}
 .h2-skip{color:var(--white);font-size:13px}
 .h2-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .h2-btn{justify-content:center;padding:0 12px;font-size:14px;text-align:center}
 .h2-btn .ar{display:none}
 .h2-pair{margin-top:-40px}
 .h2-tone.l{height:var(--seam,50%)}
 .h2-tone.r{top:var(--seam,50%);height:auto;bottom:0}
}

/* ── homepage: approach summary ── */
.ap-cols{display:grid;grid-template-columns:clamp(44px,5vw,72px) minmax(0,1.15fr) minmax(0,1fr);gap:var(--gap);padding:0 clamp(10px,1.4vw,20px) 12px;margin-top:clamp(24px,3vw,40px)}
.ap-cols .t-micro{color:var(--charcoal-30)}
.ap-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(247,247,245,.22)}
.ap-list li{display:grid;grid-template-columns:clamp(44px,5vw,72px) minmax(0,1.15fr) minmax(0,1fr);gap:var(--gap);align-items:baseline;padding:clamp(20px,2.4vw,30px) clamp(10px,1.4vw,20px);border-bottom:1px solid rgba(247,247,245,.22)}
.ap-n{font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--charcoal-30)}
.ap-p{font-weight:500;font-size:clamp(22px,2.4vw,34px);line-height:1.05;letter-spacing:-.03em;color:var(--white)}
.ap-p .amp{color:var(--charcoal-50)}
.ap-t{font-size:clamp(16px,1.4vw,20px);line-height:1.35;color:var(--cool-grey)}
@media (max-width:760px){.ap-cols{display:none}.ap-list li{grid-template-columns:36px minmax(0,1fr);row-gap:6px}.ap-t{grid-column:2}}
.home-quote{margin-top:var(--sec)}

/* ── approach accordion: quick, anchored, and truly closed ── */
.acc-panel{transition:grid-template-rows .22s var(--ease-standard),visibility 0s linear .22s;visibility:hidden}
.acc-item.open .acc-panel{transition:grid-template-rows .3s var(--ease-standard),visibility 0s;visibility:visible}
.acc-inner{transform:none;transition:opacity .16s var(--ease-standard)}
.acc-item.open .acc-inner{transition:opacity .18s var(--ease-standard) .06s}
.acc-ic::before,.acc-ic::after{transition:transform .18s var(--ease-standard),opacity .18s var(--ease-standard)}
html:not(.js) .acc-panel{grid-template-rows:1fr;visibility:visible}
html:not(.js) .acc-inner{opacity:1}

/* ── cards: one coordinated response ── */
.proj img.pi,.svc img,.cs-next-img img{transition:transform .4s var(--ease-standard)}
.proj:hover img.pi,.proj:focus-visible img.pi,.svc:hover img,.svc:focus-visible img,.cs-next:hover .cs-next-img img,.cs-next:focus-visible .cs-next-img img{transform:scale(1.025)}
.proj .ph,.svc,.cs-next-img{overflow:hidden}
.proj .name .t-s,.svc .t-s{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-decoration-color .2s var(--ease-standard)}
.proj:hover .name .t-s,.proj:focus-visible .name .t-s,.svc:hover .t-s,.svc:focus-visible .t-s{text-decoration-color:currentColor}
.proj .name .ar,.svc .t-s::after,.svcrow .go,.co-labels>a .go,.cs-next-title .ar,.all-link .ar,.at-btn .ar,.ar{transition:transform .2s var(--ease-standard),color .2s var(--ease-standard)}
.proj:hover .name .ar,.proj:focus-visible .name .ar,.svc:hover .t-s::after,.svc:focus-visible .t-s::after,.svcrow:hover .go,.svcrow:focus-visible .go,.cs-next:hover .cs-next-title .ar,a:hover>.ar,a:focus-visible>.ar{transform:translateX(4px)}
.proj:focus-visible,.svc:focus-visible,.svcrow:focus-visible,.cs-next:focus-visible{outline:2px solid var(--charcoal);outline-offset:6px}
@media (hover:none){.proj .name .t-s,.svc .t-s{text-decoration-color:var(--charcoal-30)}.proj .name .ar{color:var(--charcoal)}}
.svc,.proj{transform:none!important}

/* project cards carry one or two service labels */
.proj-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 -2px}
.proj-tags span{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--charcoal-70);padding:5px 8px 4px;border:1px solid var(--charcoal-30);line-height:1}

/* ── navigation ── */
.nav .bi-en{font-size:12px;letter-spacing:.01em;color:#5d605e}
.nav a:hover .bi-mi{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;text-decoration-color:var(--charcoal-30)}
.site-head.stuck{border-bottom-color:var(--charcoal-30)}
@media (max-width:760px){
 .nav{display:flex;position:absolute;left:0;right:0;top:76px;flex-direction:column;gap:0;align-items:stretch;padding:8px var(--pad) 20px;background:var(--white);border-bottom:1px solid var(--charcoal-30);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s var(--ease-standard),transform .2s var(--ease-standard),visibility 0s linear .2s;max-height:calc(100svh - 76px);overflow:auto}
 .nav.open{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease-standard),transform .25s var(--ease-standard),visibility 0s}
 .nav.open .bi-en,.nav .bi-en{font-size:14px;color:#5d605e}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.nav{transition:none!important}}

/* ── contact form: editable areas read as editable ── */
.cp-form input,.cp-form textarea{background:#f4f4f2;border:1px solid var(--charcoal-30);padding:12px 14px;border-radius:0;transition:border-color .16s var(--ease-standard),background .16s var(--ease-standard)}
.cp-form input:hover,.cp-form textarea:hover{border-color:var(--charcoal-70)}
.cp-form input:focus,.cp-form textarea:focus{background:var(--white);border-color:var(--charcoal)}
.cp-form input:focus-visible,.cp-form textarea:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px}
.cp-form [aria-invalid="true"]{border-color:var(--charcoal);border-width:2px}
.cp-checks input{background:none;border:0;padding:0}
.mh-lede a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
@media (max-width:620px){.cp-checks{display:grid;grid-template-columns:1fr;gap:8px}.cp-checks label{width:100%}}

/* ── footer: a clear destination ── */
.contact-cta .ask:has(.ask-btn){flex-direction:column;align-items:flex-start;gap:14px}
.contact-cta .ask-btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 26px;background:var(--white);color:var(--charcoal);font-size:clamp(16px,1.3vw,18px);font-weight:500;letter-spacing:-.01em;transition:background .2s var(--ease-standard),color .2s var(--ease-standard)}
.contact-cta:hover .ask-btn,.contact-cta:focus-visible .ask-btn{background:var(--cool-grey)}
.contact-cta:hover .ask-btn .ar{transform:translateX(4px)}
.contact-cta:focus-visible{outline:2px solid var(--white);outline-offset:8px}
.footcols,.footcols a,.footcols .val,.site-foot{opacity:1!important;transform:none!important}

/* ── quieter secondary ampersands ── */
.mh-amp{color:rgba(247,247,245,.045)}
.cs-hero-mark{color:#303231}
.cs-closing img{opacity:.35}
.placeholder.ph-mark::after{color:#2b2d2c}
.gal-ph::after{color:rgba(33,35,34,.04)}

/* ── headings wrap with intent; long names keep room for arrows ── */
h1,h2,.t-xl,.t-l,.cs-title,.cs-next-title,.svcrow .h,.acc-st,.ap-p{text-wrap:balance}
.cs-title,.cs-next-title,.svcrow .h,.mh-title,.proj .name .t-s{overflow-wrap:break-word;hyphens:manual}
.proj .name{grid-template-columns:auto minmax(0,1fr) auto}
@media (max-width:420px){.cs-title{font-size:clamp(32px,9.5vw,44px)}.cs-title-long{font-size:clamp(28px,8.4vw,38px)}.cs-next-title{font-size:clamp(26px,8vw,34px)}.svcrow .h{font-size:clamp(24px,7.6vw,32px)}}

/* ── mobile rhythm: keep section breaks, trim the repeats ── */
@media (max-width:760px){
 .sv-intro,.cs-summary{padding-top:clamp(40px,10vw,56px)}
 .sv-sub{margin-top:18px}
 .sv-row{margin-top:clamp(48px,12vw,64px)}
 .cs-sec{padding:clamp(44px,11vw,60px) 0}
 .cs-sec:not(.cs-dark) + .cs-sec:not(.cs-dark){padding-top:8px}
 .cs-body{margin-top:18px}
 .cs-gallery{padding-bottom:clamp(44px,11vw,60px)}
 .sec-head{margin-bottom:20px}
 .whoami-lede{margin-bottom:0}
 .sv-quote{padding:clamp(44px,11vw,60px) 0}
}

/* ── colour: graphic treatment stays in the hero; elsewhere photographs are natural ── */
.proj img.pi,.svc img,.sv-fig img,.cs-hero-img img,.gal-item img,.whoami-fig img,.intro-fig img{filter:none}
.whoami{padding-bottom:var(--sec)}
.bi-list .bi-en{opacity:.78}
.home-quote{margin-top:0}

/* One long word in a case-study title (AbelTasman.com) — keep it whole */
@media (min-width:421px){.cs-title-word{font-size:clamp(32px,4.1vw,62px)}}

/* Testimonials carousel on service pages — 12 October 2026
   Controls sit under the eyebrow, so a change of quote length never moves them. */
.svq{min-width:0}
.svq-slide + .svq-slide{margin-top:48px}
.svq-ready .svq-slide{margin-top:0}
.svq-ready .svq-slide:not(.on){display:none}
.svq-ready .svq-slide.on{animation:svq-in .45s var(--ease-standard) both}
@keyframes svq-in{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
.sv-quote-fig.svq-long{max-width:36em}
.svq-long blockquote{font-size:clamp(18px,1.45vw,21px);line-height:1.55;letter-spacing:0}
.svq-long blockquote p{margin:0}
.svq-long blockquote p + p{margin-top:.85em}
.svq-long blockquote p:first-child::before{content:"“"}
.svq-long blockquote p:last-child::after{content:"”"}
.svq-foot{max-width:240px;margin-top:clamp(24px,2.4vw,36px);border-top-color:rgba(33,35,34,.18)}
.sv-quote:not(:has(.svq-ready)) .svq-foot{display:none}
@media (max-width:900px){.svq-foot{max-width:none;margin-top:18px}}
@media (prefers-reduced-motion:reduce){.svq-ready .svq-slide.on{animation:none}}

/* Homepage testimonials — every quote in the same frame and type size; the frame holds the
   height of the longest so nothing below jumps. Phones let the height follow the quote. */
.svq-even.svq-ready .svq-track{display:grid}
.svq-even.svq-ready .svq-slide:not(.on){display:block;grid-area:1/1;visibility:hidden}
.svq-even.svq-ready .svq-slide.on{grid-area:1/1}
@media (max-width:760px){.svq-even.svq-ready .svq-slide:not(.on){display:none}}