/* ============================================================
   TUUMATA ADVISORY — Design System
   Brand: deep cool black · warm bronze · metallic white
   Type:  Jost (display) · Inter (body)
   ============================================================ */

:root{
  /* Ink / surfaces */
  --ink:#0C0F13;
  --ink-800:#0F1319;
  --ink-700:#141A21;
  --ink-600:#1C242D;
  --paper:#E7E1D3;
  --paper-light:#F1ECE2;
  --paper-ink:#2A2620;
  --paper-dim:#575049;
  --paper-line:rgba(42,38,32,0.18);
  --paper-line-2:rgba(42,38,32,0.10);

  /* Text */
  --text:#F5F2EB;
  --text-dim:#C9C4BA;
  --text-mute:#9C968B;

  /* Bronze — the brand accent */
  --bronze:#D6A461;
  --bronze-bright:#E6BC82;
  --btn-hover:#C99654;
  --bronze-deep:#9A7A54;
  --rose:#B28D8E;

  /* Lines */
  --hairline:rgba(224,214,196,0.14);
  --hairline-2:rgba(224,214,196,0.08);

  /* Metallic gradient */
  --metal:linear-gradient(103deg,#F0DEC4 0%,#D6A461 42%,#9A7A54 68%,#E6BC82 100%);
  --metal-line:linear-gradient(90deg,transparent,var(--bronze),transparent);

  /* Type scale (fluid) */
  --step--1:clamp(.8125rem,.78rem + .15vw,.9375rem);
  --step-0:clamp(1rem,.94rem + .3vw,1.125rem);
  --step-1:clamp(1.25rem,1.1rem + .7vw,1.6rem);
  --step-2:clamp(1.7rem,1.4rem + 1.4vw,2.6rem);
  --step-3:clamp(2.4rem,1.7rem + 3.4vw,4.6rem);
  --step-4:clamp(3rem,1.9rem + 5.4vw,7rem);
  --step-5:clamp(3.6rem,1.9rem + 8vw,10rem);

  /* Layout */
  --gut:clamp(1.5rem,4.5vw,4.25rem);
  --maxw:1200px;
  --ease:cubic-bezier(.22,1,.36,1);

  --surface:#14181E;
  --font-d:"Poppins",system-ui,sans-serif;
  --font-b:"Inter",system-ui,sans-serif;
  --font-serif:"Cormorant Garamond",Georgia,serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:9.5rem}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  font-family:var(--font-b);
  background:var(--ink);
  color:var(--text);
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
em{font-style:normal}
::selection{background:var(--bronze);color:var(--ink)}
/* Consistent keyboard focus for interactive elements */
a:focus-visible,button:focus-visible,.chip:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--bronze);outline-offset:3px}

.wrap{width:min(100% - (var(--gut) * 2),var(--maxw));margin-inline:auto}
/* Anchor targets clear the fixed nav (134px) instead of hiding under it */
section[id],main[id]{scroll-margin-top:9.5rem}

/* ---------- Light ground ----------
   Remaps the existing tokens locally so no component needs a light variant:
   ink surfaces become paper, text becomes paper-ink, the accent drops to the
   darker bronze that clears contrast on paper. Selection and focus resolve
   through these same tokens, so they adapt automatically. */
.on-paper{
  --ink:var(--paper);
  --text:var(--paper-ink);
  --text-dim:var(--paper-dim);
  --text-mute:var(--paper-dim);
  --hairline:var(--paper-line);
  --bronze:var(--bronze-deep);
  background:var(--paper);
  color:var(--text);
}
.on-paper ::selection{background:var(--bronze-deep);color:var(--paper)}
/* Links on paper: paper-ink text (bronze fails contrast as body colour), bronze-deep underline */
.on-paper a{color:var(--paper-ink);text-decoration:underline;text-decoration-color:var(--bronze-deep);
  text-underline-offset:2px;text-decoration-thickness:1px}

/* Section order: Services sits directly after the hero */
main{display:flex;flex-direction:column}
#hero{order:1}
#complex{order:2}
#home-services{order:3}
#statement{order:4}
#when{order:2}
#how{order:3}
#why{order:4}
#services{order:3}
#about{order:5}
#perspectives{order:5}
#contact{order:6}

/* ---------- Shared type ---------- */
h1,h2,h3{font-family:var(--font-d);font-weight:600;line-height:1.02;letter-spacing:-.01em}

.eyebrow{
  font-family:var(--font-d);
  font-size:.875rem;
  letter-spacing:.01em;
  color:var(--bronze);
  font-weight:500;
  display:inline-flex;align-items:center;gap:.5em;
}
.eyebrow i{color:var(--bronze-deep);font-style:normal;padding:0 .1em}
/* Decorative section-label marker removed */
.eyebrow__tick{display:none}
.paper .eyebrow{color:var(--paper-ink)}

.section-title{
  font-size:var(--step-3);
  letter-spacing:-.02em;
  margin-top:.5em;
}

.metal-text{
  background:var(--metal);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Buttons: the one treatment lives in the BUTTONS block further down. */

/* Site-wide close: break the heading after the first sentence at desktop only;
   it wraps naturally on mobile. */
.close-br{ display:none; }
@media (min-width:768px){ .close-br{ display:inline; } }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed;inset:0;z-index:9999;background:var(--ink);
  display:grid;place-items:center;
}
.preloader__inner{width:min(86vw,520px);text-align:center}
.preloader__mark{width:64px;margin:0 auto 2rem;opacity:.9;
  animation:floaty 3s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-8px)}}
.preloader__meta{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--font-d);letter-spacing:.2em;font-size:var(--step--1);
  text-transform:uppercase;color:var(--text-dim);margin-bottom:.9rem}
.preloader__count{color:var(--bronze);font-variant-numeric:tabular-nums}
.preloader__count i{opacity:.6;font-style:normal;font-size:.7em}
.preloader__bar{height:1px;background:var(--hairline);overflow:hidden}
.preloader__bar span{display:block;height:100%;width:0;background:var(--metal)}
body.loading{overflow:hidden;height:100vh}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
/* Custom cursor removed; standard browser cursors restored */
.cursor{display:none!important}
.cursor--legacy{position:fixed;top:0;left:0;z-index:9000;pointer-events:none;
  mix-blend-mode:difference;will-change:transform}
.cursor__dot,.cursor__ring{position:absolute;top:0;left:0;border-radius:50%;
  transform:translate(-50%,-50%)}
.cursor__dot{width:6px;height:6px;background:#fff}
.cursor__ring{width:38px;height:38px;border:1px solid rgba(255,255,255,.6);
  transition:width .35s var(--ease),height .35s var(--ease),opacity .35s}
.cursor.is-hover .cursor__ring{width:66px;height:66px;border-color:#fff}
.cursor.is-hover .cursor__dot{opacity:0}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:800;
  display:flex;align-items:center;justify-content:space-between;
  /* Brand and links sit at the page edges (page gutter), not the content
     column, so the Tuumata lockup is always hard left on wide screens. */
  padding:1.05rem var(--gut);
  /* A charcoal wash behind the links so they stay legible over any hero, fading out
     below the bar into the hero's own top ramp; the scrolled state swaps in the blur. */
  background:linear-gradient(180deg, rgba(12,15,19,.96) 0%, rgba(12,15,19,.7) 60%, rgba(12,15,19,0) 100%);
  /* Fade the bar's bottom edge so the wash (and the scrolled blur) dissolves into
     the page instead of ending in a visible hairline. */
  -webkit-mask-image:linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 82%, transparent 100%);
  transition:background .5s var(--ease),padding .5s var(--ease);
}
.nav.is-scrolled{
  background:rgba(12,15,19,.72);backdrop-filter:blur(14px);
  padding-top:.9rem;padding-bottom:.9rem;
}
.nav__brand{display:flex;align-items:center;gap:.9rem}
.nav__logo{width:60px;height:auto}
.nav__wordmark{font-family:var(--font-d);font-weight:600;letter-spacing:.22em;
  font-size:1.25rem;line-height:1;display:flex;flex-direction:column;gap:.25em}
.nav__wordmark i{font-style:normal;font-weight:400;letter-spacing:.34em;
  font-size:.82rem;color:var(--bronze)}

.nav__links{display:flex;align-items:center;gap:.4rem}
.nav__links a{position:relative;padding:.6rem 1rem;font-family:var(--font-d);
  font-weight:400;font-size:14px;letter-spacing:.01em;color:var(--text-dim);
  transition:color .4s var(--ease)}
.nav__links a span{position:relative;z-index:1}
.nav__links a:not(.nav__cta)::after{content:"";position:absolute;left:.95rem;right:.95rem;
  bottom:.45rem;height:1px;background:var(--bronze);transform:scaleX(0);
  transform-origin:left;transition:transform .45s var(--ease)}
.nav__links a:hover{color:var(--text)}
.nav__links a:not(.nav__cta):hover::after{transform:scaleX(1)}
/* Active page only: current-page treatment (driven by aria-current, not the Contact anchor) */
.nav__links a[aria-current="page"]{color:var(--text)}
.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__cta{border:1px solid var(--hairline);border-radius:100px;margin-left:.6rem;
  color:var(--text)!important;overflow:hidden;isolation:isolate}
.nav__cta::before{content:"";position:absolute;inset:0;z-index:0;background:var(--metal);
  transform:translateY(101%);transition:transform .5s var(--ease)}
.nav__cta:hover{color:var(--ink)!important}
.nav__cta:hover::before{transform:translateY(0)}

.nav__burger{display:none;flex-direction:column;gap:6px;width:44px;height:44px;
  align-items:center;justify-content:center;background:none;border:0;cursor:pointer}
.nav__burger span{width:28px;height:1.5px;background:var(--text);transition:transform .4s var(--ease),opacity .3s}
.nav__burger.is-open span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

/* Mobile menu */
.menu{position:fixed;inset:0;z-index:700;background:var(--ink-800);
  clip-path:circle(0% at calc(100% - 44px) 44px);
  transition:clip-path .7s var(--ease);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--gut);pointer-events:none}
.menu.is-open{clip-path:circle(150% at calc(100% - 44px) 44px);pointer-events:auto}
.menu__links{display:flex;flex-direction:column;gap:.2rem}
.menu__links a{font-family:var(--font-d);font-weight:600;font-size:clamp(2.2rem,11vw,4rem);
  letter-spacing:-.02em;color:var(--text);display:flex;align-items:baseline;gap:1rem;
  padding:.35rem 0;opacity:0;transform:translateY(30px);transition:color .3s}
.menu__links a span{font-size:.9rem;color:var(--bronze);font-weight:400;letter-spacing:.1em}
.menu.is-open .menu__links a{opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.menu.is-open .menu__links a:nth-child(1){transition-delay:.15s}
.menu.is-open .menu__links a:nth-child(2){transition-delay:.22s}
.menu.is-open .menu__links a:nth-child(3){transition-delay:.29s}
.menu.is-open .menu__links a:nth-child(4){transition-delay:.36s}
.menu__links a:hover{color:var(--bronze)}
.menu__foot{margin-top:3rem;display:flex;flex-direction:column;gap:.4rem;
  color:var(--text-dim);font-size:var(--step--1);letter-spacing:.04em}

/* Line-reveal utilities (used by the GSAP text reveals). The retired
   cinematic landing-hero system that once lived here has been removed;
   the live hero system is the ONE HERO SYSTEM block further down. */
.line{display:block;overflow:hidden;padding-bottom:.04em}
.line__in{display:block;will-change:transform}


/* ============================================================
   COMPLEX MIDDLE (home intro + stats)
   ============================================================ */
.complex{padding:clamp(5rem,12vh,8rem) 0;position:relative}
.complex .section-title{max-width:18ch}
/* ============================================================
   LIGHT (PAPER) SECTIONS — Munro-style editorial contrast.
   Remaps palette tokens so child components adapt automatically.
   ============================================================ */
.paper{
  --text:#2A2620;
  --text-dim:#575049;
  --text-mute:#625B52;
  --bronze:#9A7A54;
  --bronze-bright:#B8925F;
  --hairline:rgba(42,38,32,0.18);
  --hairline-2:rgba(42,38,32,0.10);
  background:var(--paper);
  color:var(--text);
}
/* gradient-fill numbers would vanish on cream, so paint them solid ink */
.paper .stat__num,.paper .statrow__num{-webkit-text-fill-color:var(--text);color:var(--text);background:none}
.paper .statement__media{display:none}
.paper ::selection{background:#8C6E45;color:#F4EFE5}
.complex .complex__stats{border-top:1px solid var(--hairline);padding-top:clamp(1.6rem,3.5vh,2.4rem)}
.complex .stat{gap:.5rem}
/* adjacent light bands get a hairline seam */
.paper + .paper{border-top:1px solid var(--hairline)}

/* Light cards inside paper regions (flat, Munro-style) */
.paper .mode,.paper .article{background:rgba(255,253,248,0.5);border-color:var(--hairline)}
.paper .mode:hover,.paper .article:hover{border-color:var(--bronze);
  background:rgba(255,253,248,0.72);box-shadow:none}

/* Full-bleed light band from a centered .wrap (used on sub-pages) */
.band-paper{background:transparent}
.band-paper::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:100vw;height:100%;background:var(--paper);z-index:0}
.band-paper > *{position:relative;z-index:1}
.modes-sect.band-paper{position:relative;border-top:0;margin-top:clamp(2.5rem,6vh,4rem);
  padding-top:clamp(3.2rem,7vh,5rem);padding-bottom:clamp(3.2rem,7vh,5rem)}
.persp__grid.band-paper{position:relative;padding-block:clamp(3.2rem,7vh,5rem)}
.band-paper.sect--line{border-top:0}
/* About page: light flow diagram + whakataukī on paper */
.paper .flow__node{background:rgba(255,253,248,0.5);border-color:var(--hairline)}
.paper .flow__mid{background:rgba(140,110,69,0.10);border-color:rgba(140,110,69,0.42)}
.paper .flow__num{-webkit-text-fill-color:var(--text);color:var(--text);background:none}
.paper .whakatauki__mi{-webkit-text-fill-color:var(--bronze);color:var(--bronze);background:none}
/* Deeper bronze for small text on cream so it clears WCAG AA; rules and large accents keep --bronze */
.paper{--bronze-text:#7A5A30}
.paper .hsec__label,.paper .situation__num,.paper .tstage__num,.paper .tstage__tag,
.paper .abouttest__num,.paper .hsec__more,.paper .person2__link{color:var(--bronze-text)}
.complex__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;margin-top:clamp(2rem,5vh,3rem)}
.complex__copy{display:flex;flex-direction:column;gap:1.2rem}
.complex__lead{font-family:var(--font-d);font-weight:400;font-size:var(--step-1);
  color:var(--text);line-height:1.28;letter-spacing:-.01em;max-width:24ch}
.complex__copy p+p{color:var(--text-dim)}
.complex__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,2.4rem)}
@media (max-width:900px){.complex__grid{grid-template-columns:1fr;gap:2.5rem}}
@media (max-width:460px){.complex__stats{grid-template-columns:1fr}}

/* ============================================================
   SERVICES TEASER (home)
   ============================================================ */
.home-services{padding:clamp(5rem,12vh,8rem) 0;border-top:1px solid var(--hairline);text-align:center}
.home-services .eyebrow{justify-content:center}
.home-services .section-title{margin-inline:auto;max-width:22ch}
.home-services__intro{max-width:62ch;margin:1.4rem auto 0;color:var(--text-dim)}
.home-services__list{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;
  margin:clamp(2rem,5vh,3rem) auto;max-width:900px}
.home-services__list li{font-family:var(--font-d);font-size:var(--step--1);color:var(--text-dim);
  border:1px solid var(--hairline);border-radius:100px;padding:.55em 1.15em}

/* ============================================================
   STATEMENT
   ============================================================ */
.statement{position:relative;overflow:hidden;padding:clamp(6rem,15vh,11rem) 0}
.statement__media{position:absolute;inset:-10% 0;z-index:0;will-change:transform}
.statement__img{width:100%;height:120%;object-fit:cover;object-position:center 66%;
  filter:grayscale(1) brightness(.38) contrast(1.05)}
.statement__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,var(--ink),rgba(12,15,19,.5) 28%,rgba(12,15,19,.55) 68%,var(--ink)),
    radial-gradient(90% 70% at 82% 18%,rgba(214,164,97,.14),transparent 55%)}
.statement .wrap{position:relative;z-index:1}
.statement__label{display:block;margin-bottom:1.6rem;font-family:var(--font-d);
  text-transform:uppercase;letter-spacing:.28em;font-size:var(--step--1);color:var(--bronze)}
.statement__heading{font-family:var(--font-d);font-weight:600;letter-spacing:-.02em;
  font-size:var(--step-3);line-height:1.05;max-width:16ch}

/* Values grid */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.6rem,3vw,3rem);
  margin-top:clamp(3.5rem,8vh,6rem)}
.value{display:flex;flex-direction:column}
.value__rule{width:34px;height:2px;background:var(--bronze);margin-bottom:1.6rem}
.value__name{font-family:var(--font-d);font-weight:600;font-size:var(--step-1);
  letter-spacing:-.01em;margin-bottom:.9rem}
.value__desc{color:var(--text-dim);font-size:var(--step-0);line-height:1.5}

/* Reveal helper — words wrapped by JS */
.word{display:inline-block;overflow:hidden;vertical-align:top}
.word__in{display:inline-block;will-change:transform}
/* When gradient text is split into words, re-apply the gradient per word
   (the clip lives on the parent <em>; split children would inherit only the
   transparent colour and render invisible). */
.statement__text em .word__in{
  background:var(--metal);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============================================================
   SERVICES (horizontal pin)
   ============================================================ */
.services{padding:clamp(5rem,12vh,9rem) 0;position:relative}
.services__head{max-width:820px;margin-bottom:clamp(1.5rem,4vh,2.5rem)}
.services__intro{margin-top:1.2rem;color:var(--text-mute);font-size:var(--step-0)}

/* ---- Orbit ---- */
.orbit{position:relative;width:min(660px,88vw);aspect-ratio:1/1;
  margin:clamp(2rem,5vh,3.5rem) auto clamp(3.5rem,8vh,6rem)}
.orbit__ring{position:absolute;inset:12%;border-radius:50%;
  border:1px solid var(--hairline);
  box-shadow:inset 0 0 90px rgba(214,164,97,.05)}
.orbit__ring--dash{inset:2%;border:1px dashed rgba(224,214,196,.10);box-shadow:none}

.node{position:absolute;display:flex;flex-direction:column;align-items:center;
  text-align:center;width:190px}
.node--n{left:50%;top:calc(12% - 40px);transform:translateX(-50%)}
.node--s{left:50%;top:calc(88% - 40px);transform:translateX(-50%)}
.node--e{left:88%;top:calc(50% - 40px);transform:translateX(-50%)}
.node--w{left:12%;top:calc(50% - 40px);transform:translateX(-50%)}

.node__badge{width:80px;height:80px;border-radius:50%;display:grid;place-items:center;
  color:var(--bronze);
  background:
    radial-gradient(130% 130% at 30% 22%,rgba(255,255,255,.10),rgba(255,255,255,0) 42%),
    radial-gradient(130% 130% at 50% 130%,rgba(214,164,97,.22),rgba(18,23,30,.95));
  border:1px solid var(--hairline);
  box-shadow:0 12px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.node__badge svg{width:32px;height:32px}
.node__text{display:flex;flex-direction:column;align-items:center}
.node__num{font-family:var(--font-d);color:var(--bronze);font-size:.78rem;letter-spacing:.24em;margin-top:1rem}
.node__title{font-family:var(--font-d);font-weight:600;font-size:var(--step-0);line-height:1.15;margin-top:.4rem}
.node__desc{display:none}
.node:hover .node__badge{transform:translateY(-5px) scale(1.07);border-color:rgba(214,164,97,.55);
  box-shadow:0 0 0 6px rgba(214,164,97,.06),0 16px 44px rgba(0,0,0,.55)}
.node:hover .node__title{color:var(--bronze)}

.orbit__center{position:absolute;inset:0;margin:auto;width:min(46%,300px);height:min(50%,320px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.5rem}
.orbit__desc{color:var(--text-dim);font-size:var(--step-0);line-height:1.5;
  min-height:5em;transition:opacity .3s var(--ease)}

/* ---- Work: header + intro ---- */
.work__head{max-width:900px;margin-bottom:clamp(2.5rem,6vh,4rem)}
/* Services-as-page: centered header + pill eyebrow */
.services--page .work__head{text-align:center;max-width:860px;margin-inline:auto}
.services--page .work__head .persp__back{margin-bottom:1.4rem}
.services--page .work__head .eyebrow{justify-content:center;border:1px solid var(--hairline);
  border-radius:100px;padding:.55em 1.2em}
.services--page .work__head .eyebrow__tick{display:none}
.services--page .work__intro{margin-inline:auto}
.work__intro{display:flex;flex-direction:column;gap:1rem;margin-top:1.4rem;max-width:62ch}
.work__intro p{color:var(--text-dim);font-size:var(--step-0)}
.work__intro p+p{color:var(--text-mute)}

/* ---- Offers ---- */
.offers{display:flex;flex-direction:column;gap:0;margin-bottom:clamp(4rem,10vh,7rem)}
.offer{display:grid;grid-template-columns:minmax(200px,.72fr) 1.6fr;gap:clamp(1.5rem,4vw,4rem);
  border-top:1px solid var(--hairline);padding:clamp(2.2rem,5vh,3.5rem) 0}
.offer:last-child{border-bottom:1px solid var(--hairline)}
.offer__aside{display:flex;flex-direction:column;gap:.7rem}
.offer__num{font-family:var(--font-d);font-size:var(--step-2);font-weight:600;line-height:1;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.offer__kicker{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.22em;
  font-size:.72rem;color:var(--bronze)}
.offer__main{max-width:64ch}
.offer__title{font-size:var(--step-2);letter-spacing:-.02em;margin-bottom:.6rem}
.offer__q{font-family:var(--font-d);font-style:italic;font-weight:400;font-size:var(--step-1);
  color:var(--text);margin-bottom:1.2rem}
.offer__lede{color:var(--text-dim);margin-bottom:1rem}
.offer__body{color:var(--text-mute);margin-bottom:1.6rem}
.offer__receive{border-top:1px solid var(--hairline-2);padding-top:1.3rem;margin-bottom:1.7rem}
.offer__rlabel{display:block;font-family:var(--font-d);text-transform:uppercase;letter-spacing:.2em;
  font-size:.7rem;color:var(--bronze);margin-bottom:.9rem}
.offer__receive ul{display:grid;gap:.55rem}
.offer__receive li{position:relative;padding-left:1.4rem;color:var(--text-dim);font-size:var(--step--1)}
.offer__receive li::before{content:"→";position:absolute;left:0;color:var(--bronze)}
.offer__cta{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-d);
  text-transform:uppercase;letter-spacing:.14em;font-size:var(--step--1);color:var(--bronze);
  position:relative;padding-bottom:.25em}
.offer__cta span{transition:transform .4s var(--ease)}
.offer__cta::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--bronze);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.offer__cta:hover::after{transform:scaleX(1)}
.offer__cta:hover span{transform:translateX(4px)}

/* ---- Disciplines (orbit sub-section) ---- */
.disciplines__head{max-width:760px;margin:0 auto clamp(1rem,3vh,2rem);text-align:center}
.section-title--sm{font-size:var(--step-2)}
.disciplines__intro{color:var(--text-dim);margin-top:1rem;font-size:var(--step-0)}
.disciplines__note{max-width:70ch;margin:clamp(2rem,5vh,3.5rem) auto 0;text-align:center;
  display:flex;flex-direction:column;gap:1rem}
.disciplines__note p{color:var(--text-dim)}
.disciplines__note p+p{color:var(--text-mute)}

/* ---- Closing CTA band ---- */
.work__cta{margin-top:clamp(4rem,10vh,7rem);border-top:1px solid var(--hairline);
  padding-top:clamp(3rem,7vh,5rem);text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:1.1rem}
.work__cta-title{font-family:var(--font-d);font-weight:600;font-size:var(--step-3);
  letter-spacing:-.02em;max-width:18ch}
.work__cta-text{color:var(--text-dim);max-width:52ch}
.work__cta .btn{margin-top:.8rem}

/* ---- Services swipe slider ---- */
.swipe{position:relative;margin-top:clamp(1.5rem,4vh,2.5rem)}
.swipe__ghost{position:absolute;top:50%;right:5%;transform:translateY(-50%);
  width:min(44%,460px);height:auto;opacity:.06;z-index:0;pointer-events:none;filter:grayscale(1)}
.swipe__viewport{overflow:hidden;touch-action:pan-y;position:relative;z-index:1}
.swipe__track{display:flex;will-change:transform;cursor:grab}
.swipe__track.is-drag{cursor:grabbing}
.panel{flex:0 0 100%;display:flex;align-items:center;min-height:clamp(340px,48vh,480px);
  padding-inline:var(--gut)}
.panel__body{max-width:58ch}
.panel__meta{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.1rem}
.panel__num{font-family:var(--font-d);font-weight:600;font-size:var(--step-2);line-height:1;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.panel__kicker{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.22em;
  font-size:.72rem;color:var(--bronze)}
.panel__title{font-size:var(--step-2);letter-spacing:-.02em;margin-bottom:.5rem}
.panel__q{font-family:var(--font-d);font-style:italic;font-size:var(--step-1);color:var(--text);margin-bottom:1.1rem}
.panel__lede{color:var(--text-dim);margin-bottom:.9rem}
.panel__text{color:var(--text-mute);margin-bottom:.9rem}
.panel__text:last-child{margin-bottom:0}

.swipe__ui{display:flex;align-items:center;gap:1.3rem;margin-top:clamp(1.8rem,4vh,2.8rem)}
.swipe__btn{width:52px;height:52px;flex-shrink:0;border-radius:50%;border:1px solid var(--hairline);
  display:grid;place-items:center;color:var(--text);background:none;cursor:pointer;
  transition:border-color .4s var(--ease),color .4s var(--ease),opacity .3s}
.swipe__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.swipe__btn:hover{border-color:var(--bronze);color:var(--bronze)}
.swipe__btn:disabled{opacity:.28;cursor:default;border-color:var(--hairline);color:var(--text)}
.swipe__bar{flex:1;height:2px;background:var(--hairline);position:relative;max-width:280px;overflow:hidden}
.swipe__bar span{position:absolute;left:0;top:0;height:100%;background:var(--metal);width:25%;
  transition:width .6s var(--ease)}
.swipe__count{font-family:var(--font-d);letter-spacing:.12em;font-size:var(--step--1);color:var(--text-dim)}
.swipe__count b{color:var(--bronze);font-weight:600}
.swipe__count i{font-style:normal;color:var(--text-mute)}
.swipe__hint{margin-left:auto;font-family:var(--font-d);text-transform:uppercase;letter-spacing:.2em;
  font-size:.66rem;color:var(--text-mute)}
/* ---- Services flip cards ---- */
.cards-wrap{position:relative;margin-top:clamp(2rem,5vh,3.5rem)}
.cards__ghost{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(40%,420px);height:auto;opacity:.08;z-index:0;pointer-events:none;filter:grayscale(1)}
.cards{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.6rem)}
.flip{perspective:1600px;min-height:clamp(280px,34vh,340px);border-radius:18px}
.flip:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.flip__inner{position:relative;width:100%;min-height:inherit;height:100%;
  transition:transform .85s var(--ease);transform-style:preserve-3d}
.flip:hover .flip__inner,.flip.is-flipped .flip__inner{transform:rotateY(180deg)}
.flip__front,.flip__back{position:absolute;inset:0;backface-visibility:hidden;
  -webkit-backface-visibility:hidden;border:1px solid var(--hairline-2);border-radius:18px;
  padding:clamp(1.6rem,2.6vw,2.3rem);display:flex;flex-direction:column;overflow:hidden}
.flip__front{background:linear-gradient(180deg,rgba(24,30,38,.82),rgba(15,19,25,.85));cursor:pointer}
.flip__front::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 82% 12%,rgba(214,164,97,.13),transparent 58%)}
.flip:hover .flip__front,.flip.is-flipped .flip__front{border-color:rgba(214,164,97,.35)}
.flip__back{transform:rotateY(180deg);background:linear-gradient(180deg,rgba(28,35,44,.94),rgba(16,21,28,.95))}
.flip__num{font-family:var(--font-d);font-weight:600;font-size:var(--step-2);line-height:1;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.flip__kicker{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.2em;font-size:.66rem;
  color:var(--bronze);margin-top:.7rem}
.flip__title{font-family:var(--font-d);font-weight:600;font-size:var(--step-1);letter-spacing:-.01em;line-height:1.12}
.flip__front .flip__title{margin-top:auto}
.flip__q{font-family:var(--font-d);font-style:italic;color:var(--text-dim);margin-top:.5rem}
.flip__hint{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.18em;font-size:.6rem;
  color:var(--text-mute);margin-top:1.1rem}
.flip__back .flip__title{margin-bottom:1rem}
.flip__back p{color:var(--text-dim);font-size:var(--step--1);line-height:1.5;margin-bottom:.8rem}
.flip__back p:last-child{margin-bottom:0;color:var(--text-mute)}
@media (max-width:720px){
  .cards{grid-template-columns:1fr}
  .flip{min-height:240px}
  .cards__ghost{width:76%;opacity:.06}
  .flip__hint{display:none}
}

/* ============================================================
   APPROACH
   ============================================================ */
.approach{position:relative;padding:clamp(5rem,13vh,9rem) 0;overflow:hidden}
.approach__ghost{position:absolute;right:-8%;top:50%;transform:translateY(-50%);
  width:min(52%,560px);height:auto;opacity:.045;z-index:0;pointer-events:none;
  filter:grayscale(1)}
.approach .wrap{position:relative;z-index:1}
.approach__head{margin-bottom:clamp(3rem,8vh,5.5rem);max-width:900px}
.approach__head .section-title{max-width:16ch}
.approach__intro{margin-top:1.4rem;color:var(--text-mute);font-size:var(--step-1);max-width:44ch}
.approach__steps{display:flex;flex-direction:column;gap:0}
.step{display:grid;grid-template-columns:minmax(240px,.9fr) 1.4fr;gap:2rem;
  border-top:1px solid var(--hairline);padding:clamp(2rem,4vh,3rem) 0;
  transition:background .5s var(--ease)}
.step:last-child{border-bottom:1px solid var(--hairline)}
.step:hover{background:linear-gradient(90deg,rgba(214,164,97,.05),transparent)}
.step__index{display:flex;flex-direction:column;gap:.4rem}
.step__index span{font-family:var(--font-d);font-size:var(--step--1);letter-spacing:.2em;color:var(--bronze)}
.step__index em{font-family:var(--font-d);font-weight:600;font-size:var(--step-2);
  letter-spacing:-.02em;background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.step__body h3{font-size:var(--step-1);margin-bottom:.7rem;font-weight:500}
.step__body p{color:var(--text-dim);max-width:52ch}

/* ============================================================
   ABOUT / COAST
   ============================================================ */
.about{position:relative;padding:clamp(6rem,16vh,12rem) 0;overflow:hidden}
.about__media{position:absolute;inset:-10% 0;z-index:0;will-change:transform}
.about__img{width:100%;height:120%;object-fit:cover;filter:grayscale(1) brightness(.42) contrast(1.05)}
.about__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,var(--ink),rgba(12,15,19,.55) 30%,rgba(12,15,19,.7) 70%,var(--ink)),
  radial-gradient(100% 60% at 80% 20%,rgba(214,164,97,.16),transparent 55%)}
.about__content{position:relative;z-index:2}
.whakatauki{text-align:center;margin-bottom:clamp(4rem,10vh,7rem)}
.whakatauki__mi{display:block;font-family:var(--font-d);font-style:italic;font-weight:400;
  font-size:var(--step-3);letter-spacing:-.01em;line-height:1.1;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.whakatauki__en{display:block;margin-top:1.2rem;color:var(--text-dim);
  font-family:var(--font-d);letter-spacing:.12em;text-transform:uppercase;font-size:var(--step--1)}
.about__grid{display:grid;grid-template-columns:1fr;gap:0;max-width:74ch;margin-inline:auto}
.about__lead p{font-family:var(--font-d);font-weight:400;font-size:var(--step-2);line-height:1.14;
  letter-spacing:-.015em}
.about__copy p{color:var(--text-dim);margin-bottom:1.3rem}
.about__copy strong{color:var(--text);font-weight:600}
.about__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.5vw,2rem);
  margin-top:2.5rem;border-top:1px solid var(--hairline);padding-top:1.8rem}
.stat{display:flex;flex-direction:column;gap:.4rem}
.stat__num{font-family:var(--font-d);font-weight:600;
  font-size:clamp(1.9rem,1.2rem + 2.2vw,3rem);line-height:1;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
.stat__label{color:var(--text-mute);font-size:var(--step--1);letter-spacing:.04em;line-height:1.35}

/* ============================================================
   PERSPECTIVES
   ============================================================ */
.perspectives{padding:clamp(5rem,13vh,9rem) 0;position:relative;overflow:hidden}
/* Bronze network behind the Perspectives header (matches Services ridgeline) */
.perspectives--page::before{content:"";position:absolute;inset:0 0 auto;height:60vh;z-index:0;pointer-events:none;
  background:url("../assets/network.jpg") center top/cover no-repeat;opacity:.18;
  -webkit-mask-image:linear-gradient(180deg,#000 12%,transparent);mask-image:linear-gradient(180deg,#000 12%,transparent)}
.perspectives--page .wrap{position:relative;z-index:1}
.perspectives--page,.services--page{padding-top:clamp(7.5rem,16vh,11rem);min-height:100vh}
/* Ridgeline light behind the Services page header */
.services--page::before{content:"";position:absolute;inset:0 0 auto;height:60vh;z-index:0;pointer-events:none;
  background:url("../assets/ridgeline.jpg") center top/cover no-repeat;opacity:.16;
  -webkit-mask-image:linear-gradient(180deg,#000 12%,transparent);mask-image:linear-gradient(180deg,#000 12%,transparent)}
.services--page .wrap{position:relative;z-index:1}
.persp__back{display:inline-block;margin-bottom:1.8rem;font-family:var(--font-d);
  text-transform:uppercase;letter-spacing:.14em;font-size:var(--step--1);color:var(--text-dim);
  transition:color .3s var(--ease)}
.persp__back:hover{color:var(--bronze)}
.persp__head{max-width:820px;margin-bottom:clamp(2.5rem,6vh,4rem)}
.persp__intro{margin-top:1.4rem;color:var(--text-dim);font-size:var(--step-0);max-width:58ch}
.persp__all{display:inline-flex;align-items:center;gap:.5em;margin-top:1.6rem;font-family:var(--font-d);
  text-transform:uppercase;letter-spacing:.14em;font-size:var(--step--1);color:var(--bronze);
  position:relative;padding-bottom:.2em}
.persp__all span{transition:transform .4s var(--ease)}
.persp__all::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--bronze);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.persp__all:hover::after{transform:scaleX(1)}
.persp__all:hover span{transform:translate(3px,-3px)}

.persp__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:clamp(1rem,2vw,1.6rem)}
.article{display:flex;flex-direction:column;border:1px solid var(--hairline);border-radius:18px;
  padding:clamp(1.6rem,2.5vw,2.2rem);min-height:clamp(300px,36vh,380px);
  background:linear-gradient(180deg,rgba(22,28,36,.5),rgba(15,19,25,.5));
  transition:border-color .5s var(--ease),transform .5s var(--ease),background .5s var(--ease)}
.article:hover{border-color:rgba(214,164,97,.42);transform:translateY(-6px);
  background:linear-gradient(180deg,rgba(28,35,44,.72),rgba(17,22,29,.72))}
.article__top{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem}
.article__tag{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.16em;font-size:.62rem;
  color:var(--bronze);border:1px solid var(--hairline);border-radius:100px;padding:.45em .95em}
.article__date{font-family:var(--font-d);letter-spacing:.06em;font-size:.72rem;color:var(--text-mute)}
.article__title{font-family:var(--font-d);font-weight:600;font-size:var(--step-1);line-height:1.16;
  letter-spacing:-.01em;margin-bottom:.9rem}
.article__excerpt{color:var(--text-dim);font-size:var(--step--1);line-height:1.55;margin-bottom:1.6rem}
.article__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
  border-top:1px solid var(--hairline-2);padding-top:1.2rem}
.article__author{display:flex;flex-direction:column;gap:.2rem;font-family:var(--font-d)}
.article__author b{font-weight:600;font-size:var(--step--1);color:var(--text)}
.article__author i{font-style:normal;font-size:.68rem;color:var(--text-mute);letter-spacing:.04em}
.article__link{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.1em;font-size:.62rem;
  color:var(--bronze);white-space:nowrap;transition:transform .4s var(--ease)}
.article:hover .article__link{transform:translateX(3px)}
.persp__follow{margin-top:clamp(2.5rem,6vh,4rem);display:flex;justify-content:center}
.btn__ico{display:inline-flex;align-items:center}
.btn__ico svg{width:18px;height:18px}

/* ============================================================
   Perspectives: lighter article cards on the dark page
   ============================================================ */
.article{background:linear-gradient(180deg,#212832,#181E26);border-color:var(--hairline);color:var(--text)}
.article:hover{background:linear-gradient(180deg,#28313C,#1E242E);border-color:rgba(214,164,97,.45);
  box-shadow:0 18px 46px rgba(0,0,0,.4)}
.article__tag{background:var(--bronze);color:var(--ink);border-color:transparent}
.article__date{color:var(--text-mute)}
.article__title{color:var(--text)}
.article__excerpt{color:var(--text-dim)}
.article__foot{border-top-color:var(--hairline-2)}
.article__author b{color:var(--text)}
.article__author i{color:var(--text-mute)}
.article__link{color:var(--bronze)}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{padding:clamp(6rem,14vh,10rem) 0 clamp(4rem,10vh,7rem);position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../assets/bronze-texture.jpg") center/cover no-repeat;opacity:.10;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent)}
.contact .wrap{position:relative;z-index:1}

/* Unified contact card */
.contact__card{display:grid;grid-template-columns:.92fr 1.08fr;
  border:1px solid var(--hairline);border-radius:26px;overflow:hidden;
  background:linear-gradient(180deg,#161C24,#0F141A)}
.contact__left{position:relative;overflow:hidden;padding:clamp(2rem,4vw,3.4rem);
  display:flex;align-items:flex-end;border-right:1px solid var(--hairline-2);
  min-height:clamp(420px,56vh,560px)}
.contact__glow{position:absolute;left:-18%;bottom:-24%;width:82%;aspect-ratio:1;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 42% 58%,rgba(214,164,97,.42),rgba(214,164,97,.09) 46%,transparent 68%)}
.contact__ghost{position:absolute;top:28%;right:-12%;width:min(66%,320px);height:auto;z-index:0;
  opacity:.06;filter:grayscale(1);pointer-events:none}
.contact__left-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:1.7rem;width:100%}
.contact__title{font-family:var(--font-d);font-weight:600;font-size:var(--step-2);letter-spacing:-.02em;
  line-height:1.06;max-width:15ch;margin:0}
.contact__benefits{display:flex;flex-direction:column;gap:.85rem}
.contact__benefits li{position:relative;padding-left:2rem;color:var(--text-dim);font-size:var(--step-0);line-height:1.35}
.contact__benefits li::before{content:"";position:absolute;left:0;top:.05em;width:1.35rem;height:1.35rem;border-radius:50%;
  background:var(--bronze) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230C0F13' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/13px no-repeat}
.contact__left-foot{display:flex;flex-direction:column;gap:.5rem;margin-top:.4rem;
  font-family:var(--font-d);letter-spacing:.02em;font-size:var(--step--1)}
.contact__left-foot a{color:var(--text-dim);transition:color .3s}
.contact__left-foot a:hover{color:var(--bronze)}

.contact__right{padding:clamp(2rem,4vw,3.4rem);display:flex;flex-direction:column;justify-content:center}

/* Service chips */
.form__group{display:flex;flex-direction:column;gap:.85rem}
.form__label{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;color:var(--text-mute)}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{font-family:var(--font-d);font-size:var(--step--1);color:var(--text-dim);background:rgba(9,12,16,.5);
  border:1px solid var(--hairline);border-radius:100px;padding:.55em 1.05em;cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.chip:hover{border-color:rgba(214,164,97,.5);color:var(--text)}
.chip.is-active{background:var(--bronze);color:var(--ink);border-color:transparent}

/* Form fields */
.form{display:flex;flex-direction:column;gap:1rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{background:rgba(9,12,16,.55);border:1px solid var(--hairline);border-radius:12px;
  padding:1rem 1.15rem;color:var(--text);font-family:var(--font-b);font-size:var(--step-0);
  width:100%;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.field::placeholder{color:var(--text-mute)}
.field:focus{outline:none;border-color:var(--bronze);box-shadow:0 0 0 3px rgba(214,164,97,.12)}
textarea.field{resize:vertical;min-height:120px;line-height:1.5}
.field.is-invalid{border-color:#c96f5a;box-shadow:0 0 0 3px rgba(201,111,90,.12)}
.form__actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:.4rem}

/* ============================================================
   ABOUT / OUR PEOPLE (standalone page)
   ============================================================ */
.about-page{padding-top:clamp(7.5rem,16vh,11rem);min-height:100vh;position:relative;overflow:hidden}
/* Ghosted bronze light-motion behind the About intro */
.page__video{position:absolute;top:0;left:0;width:100%;height:76vh;object-fit:cover;z-index:0;pointer-events:none;
  filter:grayscale(.15) brightness(.5) contrast(1.04);
  -webkit-mask-image:linear-gradient(180deg,#000 10%,transparent);mask-image:linear-gradient(180deg,#000 10%,transparent)}
.page__scrim{position:absolute;top:0;left:0;width:100%;height:76vh;z-index:0;pointer-events:none;
  background:
    radial-gradient(72% 60% at 50% 30%,rgba(10,12,16,.35),transparent 72%),
    linear-gradient(180deg,rgba(10,12,16,.5),rgba(10,12,16,.34) 42%,var(--ink));
  -webkit-mask-image:linear-gradient(180deg,#000 10%,transparent);mask-image:linear-gradient(180deg,#000 10%,transparent)}
.about-page > .wrap{position:relative;z-index:1}

.people__head{text-align:center;max-width:940px;margin-inline:auto;margin-bottom:clamp(3rem,8vh,5rem)}
.people__head .persp__back{margin-bottom:1.4rem}
.people__head .eyebrow{justify-content:center;border:1px solid var(--hairline);
  border-radius:100px;padding:.55em 1.2em}
.people__head .eyebrow__tick{display:none}
.people__lede{margin:1.6rem auto 0;max-width:66ch;color:var(--text-dim);
  font-size:var(--step-1);line-height:1.45}
.people__lede--sm{margin-top:1.1rem;font-size:var(--step-0);color:var(--text-mute)}

/* Generic section shell for the page */
.sect{padding:clamp(4rem,11vh,7.5rem) 0;position:relative}
.sect--line{border-top:1px solid var(--hairline)}
.sect__head{max-width:820px;margin-bottom:clamp(2.5rem,6vh,4rem)}
.sect__head--center{margin-inline:auto;text-align:center}
.sect__title{font-family:var(--font-d);font-weight:600;font-size:var(--step-2);
  letter-spacing:-.02em;line-height:1.08;margin-top:.6rem;max-width:22ch}
.sect__head--center .sect__title{margin-inline:auto}
.sect__intro{margin-top:1.3rem;color:var(--text-dim);max-width:62ch}
.sect__head--center .sect__intro{margin-inline:auto}

/* ---- The Tuumata View: vertical flow ---- */
.flow{display:grid;gap:0;max-width:820px;margin-inline:auto}
.flow__node{border:1px solid var(--hairline);border-radius:18px;
  padding:clamp(1.6rem,3vw,2.3rem);
  background:linear-gradient(180deg,rgba(24,30,38,.55),rgba(15,19,25,.55))}
.flow__mid{border-color:rgba(214,164,97,.32);
  background:linear-gradient(180deg,rgba(31,26,19,.6),rgba(18,16,12,.6))}
.flow__top{display:flex;align-items:baseline;gap:1rem;margin-bottom:1rem}
.flow__num{font-family:var(--font-d);font-weight:600;font-size:var(--step-1);line-height:1;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.flow__label{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.22em;
  font-size:.72rem;color:var(--bronze)}
.flow__title{font-family:var(--font-d);font-weight:600;font-size:var(--step-1);
  letter-spacing:-.01em;line-height:1.12;margin-bottom:1.1rem;max-width:24ch}
.flow__tags{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.1rem}
.flow__tags span{font-family:var(--font-d);font-size:var(--step--1);color:var(--text-dim);
  border:1px solid var(--hairline);border-radius:100px;padding:.4em .95em}
.flow__q{font-family:var(--font-d);font-style:italic;color:var(--text)}
.flow__gap{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.15rem 0}
.flow__gap .arrow{color:var(--bronze);font-size:1.25rem;line-height:1}
.flow__gap span{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.2em;
  font-size:.64rem;color:var(--text-mute);text-align:center;max-width:46ch}
.flow__close{margin:clamp(2rem,5vh,3rem) auto 0;text-align:center;color:var(--text-dim);max-width:72ch}

/* ---- Director bios ---- */
.bio{border-top:1px solid var(--hairline);padding:clamp(2.5rem,7vh,4.5rem) 0;
  display:grid;grid-template-columns:minmax(230px,.82fr) 1.6fr;gap:clamp(1.8rem,4vw,3.5rem)}
.bio__portrait{width:100%;max-width:230px;aspect-ratio:1;border-radius:50%;object-fit:cover;
  display:block;margin:0 0 1.6rem;background:#12161B}
.bio--rev{grid-template-columns:1.6fr minmax(230px,.82fr)}
.bio--rev .bio__aside{order:2}
@media (max-width:900px){.bio--rev .bio__aside{order:0}}
.bio__eyebrow{margin-bottom:1.1rem}
.bio__name{font-family:var(--font-d);font-weight:600;font-size:var(--step-3);
  line-height:.92;letter-spacing:-.02em}
.bio__name em{display:block;font-style:normal}
.bio__role{display:block;margin-top:.7rem;color:var(--bronze);font-family:var(--font-d);
  letter-spacing:.04em;font-size:var(--step-0)}
.bio__creds{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.bio__creds span{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.12em;
  font-size:.6rem;color:var(--text-dim);border:1px solid var(--hairline);
  border-radius:100px;padding:.45em .9em}
.bio__lead{font-family:var(--font-d);font-size:var(--step-1);line-height:1.2;
  letter-spacing:-.01em;margin-bottom:1.1rem;max-width:34ch}
.bio__text{color:var(--text-dim);margin-bottom:1.8rem;max-width:62ch}
.bio__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:1.3rem;border-top:1px solid var(--hairline-2);padding-top:1.6rem;margin-bottom:1.8rem}
/* Data as hairline rows (Munro financial-table move) */
.statrows{border-top:1px solid var(--hairline);margin-bottom:1.9rem}
.statrow{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:clamp(1.2rem,3vw,2.4rem);
  padding:1.05rem 0;border-bottom:1px solid var(--hairline-2)}
.statrow__num{font-family:var(--font-d);font-weight:600;line-height:1;
  font-size:clamp(1.7rem,1.2rem + 1.5vw,2.5rem);
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
.statrow__label{color:var(--text-dim);font-size:var(--step--1);line-height:1.35}
.disc{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;
  border-top:1px solid var(--hairline-2);padding-top:1.6rem;margin-bottom:1.8rem}
.disc__item{border:1px solid var(--hairline-2);border-radius:12px;padding:1rem 1.1rem}
.disc__t{font-family:var(--font-d);font-weight:600;color:var(--bronze);
  font-size:var(--step--1);letter-spacing:.02em;margin-bottom:.35rem}
.disc__d{color:var(--text-mute);font-size:.82rem;line-height:1.4}
.bio__points{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem 1.8rem;margin-bottom:1.7rem}
.point__num{font-family:var(--font-d);color:var(--bronze);font-size:.72rem;letter-spacing:.2em}
.point__title{font-family:var(--font-d);font-weight:600;font-size:var(--step-0);
  line-height:1.2;margin:.45rem 0 .5rem}
.point__text{color:var(--text-mute);font-size:var(--step--1);line-height:1.5}
.bio__q{font-family:var(--font-d);font-style:italic;color:var(--text);
  border-left:2px solid var(--bronze);padding-left:1.1rem;max-width:62ch;line-height:1.4}

/* ---- One issue, two tests ---- */
.tests{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.test{border:1px solid var(--hairline);border-radius:18px;
  padding:clamp(1.6rem,2.6vw,2.2rem);
  background:linear-gradient(180deg,rgba(22,28,36,.5),rgba(15,19,25,.5));
  transition:border-color .5s var(--ease),transform .5s var(--ease)}
.test:hover{border-color:rgba(214,164,97,.4);transform:translateY(-5px)}
.test__num{font-family:var(--font-d);font-weight:600;font-size:var(--step-2);line-height:1;color:var(--bronze)}
.test__q{font-family:var(--font-d);font-weight:600;font-size:var(--step-1);
  letter-spacing:-.01em;margin:.8rem 0 .8rem}
.test__text{color:var(--text-dim);font-size:var(--step--1);line-height:1.55}
.tests__note{margin:clamp(2rem,5vh,3rem) auto 0;text-align:center;
  color:var(--text-dim);max-width:66ch}

/* ---- Kaupapa / values on About ---- */
.kaupapa .value__desc{max-width:34ch}

@media (max-width:900px){
  .bio{grid-template-columns:1fr;gap:1.8rem}
  .tests{grid-template-columns:1fr}
}
@media (max-width:560px){
  .bio__points{grid-template-columns:1fr;gap:1.3rem}
  .disc{grid-template-columns:1fr}
}

/* ============================================================
   SERVICES (combined page v2): open cards + engagement modes
   ============================================================ */
.svc-lead{max-width:64ch;margin:0 auto clamp(2.5rem,6vh,3.5rem);text-align:center;
  display:flex;flex-direction:column;gap:1rem}
.svc-lead p{color:var(--text-dim)}
.svc-lead .svc-lead__note{color:var(--bronze);font-family:var(--font-d);
  text-transform:uppercase;letter-spacing:.18em;font-size:var(--step--1)}

.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.5rem)}
.svc{position:relative;border:1px solid var(--hairline);border-radius:18px;
  padding:clamp(1.6rem,2.6vw,2.3rem);
  background:linear-gradient(180deg,rgba(24,30,38,.55),rgba(15,19,25,.55));
  display:flex;flex-direction:column;gap:1rem;
  transition:border-color .5s var(--ease),transform .5s var(--ease)}
.svc:hover{border-color:rgba(214,164,97,.42);transform:translateY(-5px)}
a.svc{color:inherit;text-decoration:none}
a.svc:hover .svc__name{color:var(--bronze)}
.svc__more{margin-top:1.1rem;font-family:var(--font-d);text-transform:uppercase;
  letter-spacing:.16em;font-size:.6rem;color:var(--bronze);display:inline-flex;
  align-items:center;gap:.5em;transition:gap .4s var(--ease)}
a.svc:hover .svc__more{gap:.9em}
.svc__head{display:flex;align-items:baseline;gap:.9rem}
.svc__num{font-family:var(--font-d);font-weight:600;font-size:var(--step-2);line-height:1;color:var(--bronze)}
.svc__kicker{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.2em;
  font-size:.62rem;color:var(--bronze)}
.svc__name{font-family:var(--font-d);font-weight:600;font-size:var(--step-1);
  letter-spacing:-.01em;line-height:1.12}
.svc__q{font-family:var(--font-d);font-style:italic;color:var(--text-dim);
  font-size:var(--step-0);line-height:1.4}
.svc__caps{display:grid;gap:.55rem;margin-top:auto;border-top:1px solid var(--hairline-2);padding-top:1.1rem}
.svc__caps li{position:relative;padding-left:1.4rem;color:var(--text-mute);
  font-size:var(--step--1);line-height:1.45}
.svc__caps li::before{content:"\2192";position:absolute;left:0;color:var(--bronze)}

/* 'Where to start' band */
.svc-help{margin:clamp(2.5rem,6vh,4rem) auto 0;text-align:center;border:1px solid var(--hairline);
  border-radius:18px;padding:clamp(2rem,4vw,2.8rem);
  background:linear-gradient(180deg,rgba(214,164,97,.07),transparent);
  display:flex;flex-direction:column;align-items:center;gap:.9rem}
.svc-help h3{font-family:var(--font-d);font-weight:600;font-size:var(--step-2);letter-spacing:-.02em}
.svc-help p{color:var(--text-dim);max-width:50ch}

/* How we work (engagement modes) */
.modes-sect{border-top:1px solid var(--hairline);margin-top:clamp(3.5rem,8vh,6rem);
  padding-top:clamp(3.5rem,8vh,5.5rem)}
.modes-sect .work__head{text-align:center;max-width:820px;margin-inline:auto}
.modes-sect .work__head .eyebrow{justify-content:center}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:clamp(1rem,2vw,1.4rem);margin-top:clamp(2rem,5vh,3rem)}
.mode{border:1px solid var(--hairline);border-radius:18px;padding:clamp(1.5rem,2.4vw,2rem);
  background:linear-gradient(180deg,rgba(22,28,36,.5),rgba(15,19,25,.5));
  display:flex;flex-direction:column;gap:.85rem;
  transition:border-color .5s var(--ease),transform .5s var(--ease)}
.mode:hover{border-color:rgba(214,164,97,.4);transform:translateY(-4px)}
.mode__posture{align-self:flex-start;font-family:var(--font-d);text-transform:uppercase;
  letter-spacing:.14em;font-size:.56rem;color:var(--ink);background:var(--bronze);
  border-radius:100px;padding:.4em .8em;font-weight:600}
.mode__name{font-family:var(--font-d);font-weight:600;font-size:var(--step-1);
  letter-spacing:-.01em;line-height:1.14}
.mode__phases{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.14em;
  font-size:.6rem;color:var(--bronze)}
.mode__desc{color:var(--text-dim);font-size:var(--step--1);line-height:1.5}

@media (max-width:720px){.svc-grid{grid-template-columns:1fr}}

/* ============================================================
   KAUPAPA (values) — Option C split feature
   ============================================================ */
.kaupapa-split{display:grid;grid-template-columns:.92fr 1.08fr;border:1px solid var(--hairline);
  border-radius:20px;overflow:hidden}
.kx-feat{background:#E7E1D3;color:#2A2620;padding:clamp(2.6rem,4vw,3.8rem);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center}
.kx-feat .koru{position:absolute;right:-44px;bottom:-44px;width:240px;opacity:.16}
.kx-lab{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.24em;font-size:.64rem;color:#9A7A54;position:relative;z-index:1}
.kx-wk{font-family:var(--font-serif);font-style:italic;font-weight:500;line-height:1.08;color:#2A2620;
  font-size:clamp(2rem,1.4rem + 1.6vw,3.1rem);margin-top:1rem;position:relative;z-index:1}
.kx-en{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:#6b655c;margin-top:1.1rem;position:relative;z-index:1}
.kx-list{position:relative;overflow:hidden;background:#0C0F13;color:#F5F2EB;padding:clamp(2.6rem,4vw,3.8rem);display:flex}
.kx-ghostphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.14;filter:grayscale(.7) brightness(.8) contrast(1.05);z-index:0}
.kx-ghostlogo{position:absolute;right:-8%;top:50%;transform:translateY(-50%);width:56%;height:auto;opacity:.05;z-index:1;filter:grayscale(1)}
.kx-inner{position:relative;z-index:2;width:100%}
.kx-inner .eyebrow{color:#D6A461}
.kx-inner .sect__title{color:#F5F2EB;font-size:clamp(1.6rem,1.2rem + 1vw,2.2rem);margin:.8rem 0 1.5rem}
.kx-v{display:grid;grid-template-columns:auto 1fr;gap:.15rem 1.3rem;padding:1.05rem 0;border-top:1px solid rgba(224,214,196,.13)}
.kx-v .kn{font-family:var(--font-serif);font-style:italic;font-size:1.4rem;color:#D6A461;line-height:1}
.kx-v .kt{font-family:var(--font-d);font-weight:600;font-size:1.05rem;align-self:center}
.kx-v .kd{grid-column:2;margin:.3rem 0 0;color:#9d9a93;font-size:.86rem;line-height:1.45}
@media (max-width:820px){.kaupapa-split{grid-template-columns:1fr}}
/* Kaupapa Option D — cinematic photo overlay */
.kaupapa-d{position:relative;overflow:hidden;background:#0C0F13;width:100vw;margin-left:calc(50% - 50vw)}
/* ===== How we work with you page ===== */
/* Section lead statement (not a heading), prominent but under the eyebrow. */
.hww-lead{font-family:var(--font-d);font-weight:500;line-height:1.25;
  font-size:clamp(1.3rem,1.1rem + .7vw,1.8rem);color:var(--text);max-width:26ch;margin:.9rem 0 0}
.kd-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:grayscale(.2) brightness(.42) contrast(1.05)}
.kd-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(75% 65% at 50% 45%,rgba(10,12,16,.35),transparent 72%),
  linear-gradient(180deg,rgba(10,12,16,.72),rgba(10,12,16,.4) 40%,rgba(10,12,16,.82))}
.kaupapa-d .wrap{position:relative;z-index:2}

/* ============================================================
   SERVICE DETAIL PAGES (Option A — editorial dark)
   ============================================================ */
.svcd{padding-top:clamp(7rem,15vh,10rem)}
.svcd-num{position:absolute;right:2%;top:-1rem;font-family:var(--font-serif);font-style:italic;font-size:clamp(6rem,14vw,13rem);line-height:1;color:rgba(214,164,97,.12);z-index:0;pointer-events:none}
.svcd-back{display:inline-block;margin-bottom:1.4rem;font-family:var(--font-d);text-transform:uppercase;letter-spacing:.08em;font-size:var(--step--1);color:var(--text-dim);transition:color .3s var(--ease)}
.svcd-back:hover{color:var(--bronze)}
.svcd-title{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:clamp(2.8rem,1.8rem + 3.6vw,5rem);line-height:1;margin:1rem 0 0}
.svcd-q{font-family:var(--font-d);font-weight:300;font-size:clamp(1.4rem,1rem + 1.4vw,2rem);line-height:1.25;margin:1.4rem 0 0;max-width:26ch}
.svcd-sect{padding:clamp(3.5rem,8vh,6rem) 0;border-top:1px solid var(--hairline)}
.svcd-sect .eyebrow{margin-bottom:.6rem}
.svcd-h{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:clamp(1.8rem,1.2rem + 1.6vw,2.6rem);line-height:1.08;margin:.6rem 0 2rem;max-width:26ch}
.svcd-lead{color:var(--text-dim);max-width:68ch;margin:0 0 2rem;font-size:var(--step-0);line-height:1.6}
.svcd-when{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.svcd-wcard{border:1px solid var(--hairline);border-radius:16px;padding:clamp(1.5rem,2.4vw,2rem);background:linear-gradient(180deg,rgba(24,30,38,.5),rgba(15,19,25,.5))}
.svcd-wcard .n{font-family:var(--font-serif);font-style:italic;color:var(--bronze);font-size:1.4rem}
.svcd-wcard h3{font-family:var(--font-d);font-weight:600;font-size:var(--step-1);margin:.6rem 0 .6rem;line-height:1.15}
.svcd-wcard p{color:var(--text-mute);font-size:var(--step--1);line-height:1.55}
.svcd-layers{display:grid;gap:.8rem;max-width:940px}
.svcd-layer{border:1px solid var(--hairline);border-radius:14px;padding:1.6rem 1.8rem;background:linear-gradient(180deg,rgba(24,30,38,.5),rgba(15,19,25,.5))}
.svcd-layer--mid{border-color:rgba(214,164,97,.32);background:linear-gradient(180deg,rgba(31,26,19,.55),rgba(18,16,12,.55))}
.svcd-layer .lt{display:flex;align-items:baseline;gap:.9rem;margin-bottom:.9rem}
.svcd-layer .lt b{font-family:var(--font-d);font-weight:600;font-size:var(--step-1)}
.svcd-layer .lt i{font-style:normal;font-family:var(--font-d);text-transform:uppercase;letter-spacing:.18em;font-size:.6rem;color:var(--bronze)}
.svcd-layer .tags{display:flex;flex-wrap:wrap;gap:.5rem}
.svcd-layer .tags span{font-family:var(--font-d);font-size:var(--step--1);color:var(--text-dim);border:1px solid var(--hairline);border-radius:100px;padding:.4em .95em}
.svcd-flowlab{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.18em;font-size:.62rem;color:var(--text-mute);padding:.5rem 0;display:flex;align-items:center;gap:.6em}
.svcd-tests{display:grid;gap:0}
.svcd-t{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;padding:1.5rem 0;border-top:1px solid var(--hairline-2)}
.svcd-t:first-child{border-top:0}
.svcd-t .n{font-family:var(--font-serif);font-style:italic;font-size:1.7rem;color:var(--bronze);line-height:1}
.svcd-t h4{font-family:var(--font-d);font-weight:600;font-size:var(--step-1);margin:0}
.svcd-t p{color:var(--text-mute);font-size:var(--step--1);line-height:1.5;margin:.4rem 0 0;max-width:74ch}
.svcd-ev{display:grid;gap:0}
.svcd-evrow{display:grid;grid-template-columns:1fr 1.5fr;gap:2rem;padding:1.4rem 0;border-top:1px solid var(--hairline-2);align-items:baseline}
.svcd-evrow .tell{font-family:var(--font-serif);font-style:italic;font-size:1.3rem;color:var(--text)}
.svcd-evrow .show{color:var(--text-dim);font-size:var(--step--1);line-height:1.55}
.svcd-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.svcd-step{border:1px solid var(--hairline);border-radius:16px;padding:clamp(1.6rem,2.4vw,2.1rem);background:linear-gradient(180deg,rgba(24,30,38,.5),rgba(15,19,25,.5))}
.svcd-step .n{font-family:var(--font-serif);font-style:italic;color:var(--bronze);font-size:1.4rem}
.svcd-step h4{font-family:var(--font-d);font-weight:600;font-size:var(--step-1);margin:.4rem 0 .5rem}
.svcd-step p{color:var(--text-mute);font-size:var(--step--1);line-height:1.5}
.svcd-step .out{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--hairline-2);color:var(--text-dim);font-size:.85rem;line-height:1.5}
.svcd-step .out b{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.16em;font-size:.58rem;color:var(--bronze);display:block;margin-bottom:.35rem;font-weight:600}
@media (max-width:820px){.svcd-when{grid-template-columns:1fr}.svcd-steps{grid-template-columns:1fr}.svcd-evrow{grid-template-columns:1fr;gap:.5rem}}

/* Option B: split parchment body for service detail pages */
.svcd-body{position:relative}
.svcd-body > .svcd-sect:first-child{border-top:0}
.paper .svcd-wcard{background:none;border:0;border-radius:0;border-top:2px solid var(--bronze);padding:1.15rem 0 0}
.paper .svcd-layer{background:rgba(255,253,248,0.55)}
.paper .svcd-layer--mid{background:rgba(140,110,69,0.10);border-color:rgba(140,110,69,0.42)}
.paper .svcd-step{background:rgba(255,253,248,0.55)}
.paper .svcd-evrow .tell{color:var(--text)}
.svcd-cta-dark{border-top:0}
/* Dark interlude band inside the parchment body */
.svcd-body .svcd-dark{position:relative;border-top:0;
  --text:#F5F2EB;--text-dim:#B7B2A7;--text-mute:#8A8478;
  --bronze:#D6A461;--hairline:rgba(230,225,215,0.12);--hairline-2:rgba(224,214,196,0.08);
  color:var(--text)}
.svcd-body .svcd-dark::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:100vw;height:100%;background:var(--ink);z-index:0}
.svcd-body .svcd-dark > .wrap{position:relative;z-index:1}

/* Numeric / value flow rows (Capital, Commercial) */
.svcd-figrow{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin:1.7rem 0 .4rem}
.svcd-fig{flex:1 1 160px;border:1px solid var(--hairline);border-radius:14px;padding:1.1rem 1.2rem;background:rgba(255,253,248,.55)}
.svcd-dark .svcd-fig{background:rgba(255,255,255,.03)}
.svcd-fig b{font-family:var(--font-serif);font-style:italic;font-size:2.1rem;color:var(--bronze);display:block;line-height:1}
.svcd-fig span{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.15em;font-size:.58rem;color:var(--text-mute);display:block;margin-top:.55rem}
.svcd-sep{color:var(--bronze);font-size:1.3rem;flex:0 0 auto}
/* Stage chips flow (pathways, market growth) */
.svcd-stageflow{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1.5rem 0 .4rem}
.svcd-stage{border:1px solid var(--hairline);border-radius:100px;padding:.55em 1.05em;font-family:var(--font-d);font-size:var(--step--1);color:var(--text-dim)}
.svcd-stage b{color:var(--bronze);font-family:var(--font-serif);font-style:italic;margin-right:.45em;font-weight:500}
/* Before -> after comparison (Capital shift, Operating rhythm) */
.svcd-compare{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:1.6rem}
.svcd-col{border-top:2px solid var(--hairline);padding-top:1.1rem}
.svcd-col--to{border-top-color:var(--bronze)}
.svcd-col .cap{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.15em;font-size:.58rem;color:var(--bronze);display:block;margin-bottom:.7rem}
.svcd-col h4{font-family:var(--font-d);font-weight:600;font-size:var(--step-0);margin:0 0 .7rem;line-height:1.2}
.svcd-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.svcd-col li{color:var(--text-dim);font-size:var(--step--1);line-height:1.45;padding-left:1rem;position:relative}
.svcd-col li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--bronze)}
@media(max-width:820px){.svcd-compare{grid-template-columns:1fr}.svcd-figrow{flex-direction:column;align-items:stretch}.svcd-figrow .svcd-sep{transform:rotate(90deg);align-self:center}}

/* Legal / privacy document */
.legal{max-width:74ch}
.legal .svcd-h{font-size:clamp(1.3rem,1rem + 1vw,1.75rem);margin:2.3rem 0 .8rem}
.legal .svcd-h:first-child{margin-top:0}
.legal .svcd-lead{max-width:none;margin:0}
.legal a{color:var(--bronze);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.paper .legal a{color:var(--bronze-text)}

/* ============================================================
   HOMEPAGE (restructured 2026-09-08)
   ============================================================ */
.hsec{position:relative;padding:clamp(5rem,3.89rem + 4.57vw,8rem) 0}
.hsec__head{margin-bottom:clamp(2.2rem,5vh,3.4rem)}
.hsec__label{font-family:var(--font-d);letter-spacing:.01em;font-weight:500;
  font-size:.875rem;color:var(--bronze);display:block;margin:0 0 1.1rem}
.hsec__title{font-family:var(--font-d);font-weight:500;letter-spacing:-.01em;line-height:1.12;
  font-size:clamp(1.9rem,1.3rem + 2vw,3rem);margin:0;max-width:24ch;color:var(--text);text-wrap:balance}
.hsec__intro{font-size:clamp(1.08rem,1rem + .45vw,1.25rem);line-height:1.6;color:var(--text-dim);
  max-width:64ch;margin:1.4rem 0 0}

/* Section 2: When to bring us in */
.situations{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2.4rem,5vw,5rem)}
.situation{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1.2rem;
  border-top:1px solid var(--hairline);padding:1.7rem 0 1.5rem}
.situation__num{font-family:var(--font-d);font-weight:500;font-size:1rem;color:var(--bronze);
  grid-row:1 / span 2;padding-top:.2rem}
.situation h3{font-family:var(--font-d);font-weight:600;line-height:1.22;margin:0 0 .5rem;
  font-size:clamp(1.15rem,1rem + .5vw,1.4rem)}
.situation p{color:var(--text-dim);font-size:1.05rem;line-height:1.55;margin:0}
.hsec__more{display:inline-flex;align-items:center;gap:.55em;margin-top:clamp(1.9rem,4vh,2.7rem);
  font-family:var(--font-d);font-size:1.18rem;font-weight:500;color:var(--bronze);
  border-bottom:1px solid currentColor;padding-bottom:3px;transition:gap .4s var(--ease),opacity .3s var(--ease)}
.hsec__more:hover{gap:.9em;opacity:.82}

/* Section 3: Services (dark) */
.svclist{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2.4rem,5vw,5rem)}
.svcrow{display:grid;grid-template-columns:auto 1fr auto;gap:.2rem 1.2rem;align-items:start;
  border-top:1px solid var(--hairline);padding:1.7rem 0 1.6rem;color:inherit;text-decoration:none;
  transition:border-color .4s var(--ease)}
.svcrow__num{font-family:var(--font-d);font-weight:500;font-size:1rem;color:var(--bronze);
  grid-column:1;grid-row:1 / span 2;padding-top:.25rem}
.svcrow h3{grid-column:2;font-family:var(--font-d);font-weight:600;margin:0 0 .45rem;line-height:1.2;
  font-size:clamp(1.2rem,1rem + .6vw,1.5rem);transition:color .35s var(--ease)}
.svcrow p{grid-column:2;color:var(--text-dim);font-size:1.02rem;line-height:1.5;margin:0}
.svcrow__go{grid-column:3;grid-row:1 / span 2;align-self:center;color:var(--bronze);font-size:1.2rem;
  opacity:0;transform:translateX(-4px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.svcrow:hover{border-color:rgba(214,164,97,.5)}
.svcrow:hover h3{color:var(--bronze)}
.svcrow:hover .svcrow__go{opacity:1;transform:none}
.hsec__cta{margin-top:clamp(2.1rem,5vh,3.2rem)}

/* Services overview: six services (2026-09-08) */
.soverview{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2.4rem,5vw,5rem)}
.sov{border-top:1px solid var(--hairline);padding:1.9rem 0 1.8rem;display:flex;flex-direction:column;gap:.5rem}
.sov__num{font-family:var(--font-d);font-weight:500;color:var(--bronze);font-size:1rem}
.sov__name{font-family:var(--font-d);font-weight:600;line-height:1.15;margin:0;
  font-size:clamp(1.35rem,1rem + .8vw,1.7rem);transition:color .35s var(--ease)}
.sov__sit{color:var(--text);font-size:1.05rem;line-height:1.5;margin:.15rem 0 0}
.sov__desc{color:var(--text-dim);font-size:1rem;line-height:1.55;margin:0}
.sov__caps{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.4rem}
.sov__caps li{position:relative;padding-left:1.3rem;color:var(--text-dim);font-size:.98rem;line-height:1.45}
.sov__caps li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--bronze)}
.sov__link{margin-top:.8rem;align-self:flex-start;font-family:var(--font-d);font-size:1.02rem;font-weight:500;
  color:var(--bronze);display:inline-flex;align-items:center;gap:.5em;border-bottom:1px solid currentColor;
  padding-bottom:2px;transition:gap .35s var(--ease),opacity .3s var(--ease)}
.sov__link:hover{gap:.85em;opacity:.82}
.sov:hover .sov__name{color:var(--bronze)}
@media (max-width:820px){.soverview{grid-template-columns:1fr}}

/* Services overview: warm off-white service cards on charcoal (2026-09-08) */
.scards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,2.4vw,2rem)}
.scard{display:flex;flex-direction:column;background:#F4EFE4;color:#26221C;
  border:1px solid rgba(42,38,32,.12);border-radius:7px;padding:clamp(1.5rem,2.5vw,2rem);
  text-decoration:none;transition:border-color .3s var(--ease)}
.scard__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}
.scard__name{font-family:var(--font-d);font-weight:600;line-height:1.15;margin:0 0 1rem;color:#26221C;
  font-size:clamp(1.5rem,1.2rem + .6vw,1.7rem);transition:color .3s var(--ease)}
.scard__desc{font-size:1.02rem;line-height:1.55;color:#453F37;margin:0 0 1.6rem}
.scard__caps{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.55rem}
.scard__caps li{position:relative;padding-left:1.15rem;font-size:1rem;line-height:1.4;color:#5A5349}
.scard__caps li::before{content:"";position:absolute;left:0;top:.58em;width:5px;height:5px;border-radius:50%;background:#9A7A54}
.scard__foot{margin-top:auto;font-family:var(--font-d);font-weight:500;font-size:1rem;color:#7A5A30;
  display:inline-flex;align-items:center;gap:.5em;text-decoration:underline;text-underline-offset:3px}
.scard:hover{border-color:#9A7A54}
.scard:hover .scard__foot{color:#5F4626}
.scard:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
/* Services hero: compact, aligned with card grid, smaller heading, contact.jpg crop */
#six{padding-top:clamp(2.2rem,4.5vh,3.2rem)}

/* Services overview: editorial "how we work" (heading left, approaches right) */
.engage{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
#how-we-work{padding-bottom:clamp(2.2rem,4.5vh,3.2rem)}
.engage-seam{border-top:1px solid var(--hairline-2);margin-top:clamp(2.4rem,5.5vh,3.6rem)}
.engage__item{border-top:1px solid var(--hairline);padding:1.4rem 0}
.engage__item:first-child{border-top:0;padding-top:0}
.engage__item h3{font-family:var(--font-d);font-weight:600;margin:0 0 .4rem;line-height:1.2;
  font-size:clamp(1.15rem,1rem + .5vw,1.4rem)}
.engage__item p{color:var(--text-dim);font-size:1.02rem;line-height:1.55;margin:0;max-width:56ch}
@media (max-width:820px){
  .scards{grid-template-columns:1fr}
  .engage{grid-template-columns:1fr;gap:1.8rem}
}

/* ============================================================
   DECISION CONFIDENCE detail page (redesigned 2026-09-08)
   ============================================================ */
.stmt-serif{font-family:var(--font-serif);font-style:italic;font-weight:500;letter-spacing:0;line-height:1.12}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dc-hero{border-bottom:1px solid var(--hairline);padding-top:clamp(7.5rem,10vh,9rem)}
.dc-hero .svcd-intro{margin-bottom:0}
.dc-hero .btn{margin-top:1.6rem}

/* Section 3: full-width, diagram-led */
.dc-system__head .stmt-serif{font-size:clamp(1.8rem,1.2rem + 2vw,3rem);max-width:20ch;margin:.7rem 0 0}
.dc-system__lead{color:var(--text-dim);font-size:1.08rem;line-height:1.6;max-width:60ch;margin:1.2rem 0 0}

/* The connected diagram */
.sysdiag{position:relative;display:grid;grid-template-columns:16% 1fr 16%;gap:0 1.4rem;align-items:stretch;
  margin-top:clamp(2.6rem,5vh,3rem)}
.sysdiag__lane{position:relative;min-height:100%}
.sysdiag__line{position:absolute;top:.5rem;bottom:.5rem;width:2px;background:rgba(154,122,84,.7)}
.sysdiag__line--down{right:0}
.sysdiag__line--up{left:0}
.sysdiag__line--down::after{content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid rgba(154,122,84,.95)}
.sysdiag__line--up::after{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:9px solid rgba(154,122,84,.95)}
.sysdiag__lanelabel{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--font-d);
  text-transform:uppercase;letter-spacing:.05em;font-size:.72rem;color:#7A5A30;line-height:1.45}
.sysdiag__lane--down .sysdiag__lanelabel{left:0;right:1.2rem;text-align:right}
.sysdiag__lane--up .sysdiag__lanelabel{left:1.2rem;right:0;text-align:left}
.sysdiag__center{display:grid;gap:1rem}
.syslayer{position:relative;padding:1.15rem 1.5rem}
.syslayer::before,.syslayer::after{content:"";position:absolute;top:50%;height:2px;width:1.4rem;background:rgba(154,122,84,.7)}
.syslayer::before{left:-1.4rem}.syslayer::after{right:-1.4rem}
.syslayer h4{font-family:var(--font-d);font-weight:600;font-size:1.1rem;margin:0 0 .55rem;color:#26221C}
.syslayer--open{border-top:1px solid rgba(42,38,32,.28);border-bottom:1px solid rgba(42,38,32,.28)}
.syslayer--top p{color:#4A443B;font-size:.98rem;line-height:1.5;margin:0}
.syslayer--mid{background:rgba(154,122,84,.18);border-radius:6px;padding:1.6rem 1.6rem 1.5rem}
.sys-press{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2.4rem;margin:.2rem 0 0}
.sys-press span{font-size:1.08rem;color:#26221C;font-weight:500}
.sys-note{margin:1.5rem 0 0;color:#4a3f30;font-size:1rem;line-height:1.5;max-width:52ch}
.sys-cond{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem 1.6rem;margin:.2rem 0 0}
.sys-cond span{font-size:1rem;color:#4A443B}
.sysdiag__legend{display:none}
.dc-below{border-top:1px solid var(--hairline);margin-top:clamp(2.6rem,5vh,3.4rem);padding-top:clamp(1.6rem,3.5vh,2.2rem)}
.dc-below p{color:var(--text-dim);font-size:1.05rem;line-height:1.6;max-width:66ch;margin:0}
.dc-below p + p{margin-top:1rem}
.dc-below__q{color:var(--text)!important;font-weight:500}
@media (prefers-reduced-motion:no-preference){
  .sysdiag.is-live .sysdiag__line::before{content:"";position:absolute;left:-2px;width:6px;height:26px;border-radius:3px;background:rgba(214,164,97,.95)}
  .sysdiag.is-live .sysdiag__line--down::before{animation:dcdown 1.3s ease .3s 1 forwards}
  .sysdiag.is-live .sysdiag__line--up::before{animation:dcup 1.3s ease 1.7s 1 forwards}
  @keyframes dcdown{0%{top:0;opacity:0}12%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
  @keyframes dcup{0%{bottom:0;opacity:0}12%{opacity:1}90%{opacity:1}100%{bottom:100%;opacity:0}}
}

/* Section 4: method columns */
.dc-methodcols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,2.4vw,2rem);margin-top:clamp(2.2rem,4.5vh,3rem)}
.dc-method{border-top:1px solid var(--bronze);padding-top:1.1rem}
.dc-method h3{font-family:var(--font-d);font-weight:600;font-size:1.25rem;margin:0 0 .6rem;line-height:1.2}
.dc-method p{color:var(--text-dim);font-size:1rem;line-height:1.55;margin:0}
.dc-method .dc-outcome{color:var(--text);font-weight:500;margin-top:.9rem}
.dc-methodnote{border-top:1px solid var(--hairline);margin-top:clamp(2.4rem,5vh,3.2rem);
  padding-top:clamp(1.6rem,3.5vh,2.2rem);color:var(--text-dim);font-size:1.05rem;line-height:1.6;max-width:74ch}

/* Section 5: evidence with column headings */
.dc-tests{margin-top:clamp(1.8rem,4vh,2.6rem)}
.dc-tests__cols{display:grid;grid-template-columns:1fr 1.25fr;gap:0 clamp(2rem,4vw,3.5rem);padding-bottom:.7rem}
.dc-tests__colh{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.06em;font-size:.75rem;color:var(--bronze-text)}
.dc-testrow{display:grid;grid-template-columns:1fr 1.25fr;gap:.8rem clamp(2rem,4vw,3.5rem);
  border-top:1px solid var(--hairline);padding:1.8rem 0}
.dc-testrow h3{font-family:var(--font-d);font-weight:600;font-size:clamp(1.2rem,1rem + .5vw,1.45rem);margin:0;line-height:1.2}
.dc-testrow__assert{font-family:var(--font-serif);font-style:italic;color:var(--text);font-size:clamp(1.25rem,1rem + .7vw,1.55rem);line-height:1.25;margin:.6rem 0 0}
.dc-testrow__q{color:var(--text-mute);font-size:.95rem;line-height:1.5;margin:.55rem 0 0}
.dc-testrow__ev{color:var(--text-dim);font-size:1.05rem;line-height:1.65;margin:0;align-self:center}
.dc-tests__note{color:var(--text);font-weight:500;max-width:74ch;margin:clamp(2rem,5vh,3rem) 0 0}

@media (max-width:1024px){
  .dc-methodcols{grid-template-columns:1fr 1fr;gap:2rem}
}
@media (max-width:820px){
  .sysdiag{grid-template-columns:14px 1fr 14px;gap:0 8px}
  .sysdiag__lanelabel{display:none}
  .sysdiag__legend{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-bottom:1.4rem;
    font-family:var(--font-d);text-transform:uppercase;letter-spacing:.05em;font-size:.72rem;color:var(--bronze-text)}
  .sysdiag__line{top:.3rem;bottom:.3rem}
  .syslayer::before{left:-8px;width:8px}.syslayer::after{right:-8px;width:8px}
  .syslayer{padding:1.1rem 1.1rem}
  .syslayer--mid{padding:1.3rem 1.2rem}
  .sys-cond{grid-template-columns:1fr 1fr}
  .dc-methodcols{grid-template-columns:1fr}
  .dc-tests__cols{display:none}
  .dc-testrow{grid-template-columns:1fr;gap:.5rem;padding:1.5rem 0}
  .dc-testrow__ev{align-self:start;margin-top:.3rem}
}
@media (max-width:520px){
  .sys-press{grid-template-columns:1fr}
  .sys-cond{grid-template-columns:1fr}
}

/* Insights: article cards (2026-09-08) */
.insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:clamp(1.4rem,2.2vw,1.9rem)}
.icard{display:flex;flex-direction:column;background:#F2EDE2;color:#26221C;
  border:1px solid rgba(42,38,32,.16);border-radius:7px;padding:clamp(1.6rem,2.4vw,2rem);
  text-decoration:none;transition:border-color .3s var(--ease)}
.icard__cat{font-family:var(--font-d);font-weight:500;font-size:.875rem;color:#7A5A30}
.icard__title{font-family:var(--font-d);font-weight:600;line-height:1.2;margin:.5rem 0 .7rem;color:#26221C;
  font-size:clamp(1.4rem,1.1rem + .7vw,1.6rem)}
.icard__excerpt{font-size:1rem;line-height:1.55;color:#4A443B;margin:0 0 1.3rem}
.icard__foot{margin-top:auto;border-top:1px solid rgba(42,38,32,.16);padding-top:1rem;
  display:flex;flex-direction:column;gap:.55rem}
.icard__meta{display:flex;flex-wrap:wrap;gap:.15rem .7rem;align-items:baseline}
.icard__author{font-family:var(--font-d);font-weight:600;font-size:.95rem;color:#26221C}
.icard__date{font-size:.9rem;color:#6B645A}
.icard__link{font-family:var(--font-d);font-weight:500;font-size:.95rem;color:#7A5A30;
  display:inline-flex;align-items:center;gap:.4em;text-decoration:underline;text-underline-offset:3px}
.icard:hover{border-color:#9A7A54}
.icard:hover .icard__link{color:#5F4626}
.icard:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

/* Section 4: Why Tuumata (light) */
.why__copy p{font-size:clamp(1.08rem,1rem + .45vw,1.25rem);line-height:1.6;color:var(--text-dim);
  margin:0 0 1.1rem;max-width:66ch}
.why__promise{font-family:var(--font-d);font-weight:500;color:var(--text);
  font-size:clamp(1.15rem,1rem + .55vw,1.42rem);line-height:1.4;max-width:54ch;
  border-top:1px solid var(--hairline);padding-top:1.4rem;margin:1.7rem 0 0}
.people2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);
  margin-top:clamp(2.4rem,5vh,3.4rem)}
.person2{display:flex;flex-direction:column}
.person2__photo{width:clamp(160px,20vw,220px);aspect-ratio:1/1;object-fit:cover;
  border-radius:50%;background:rgba(0,0,0,.06);margin-bottom:1.2rem;
  border:1px solid var(--hairline)}
.person2 h3{font-family:var(--font-d);font-weight:600;font-size:1.3rem;margin:0}
.person2__role{color:var(--text-dim);font-size:1.02rem;line-height:1.5;margin:.35rem 0 .7rem}
.person2__link{font-family:var(--font-d);font-size:1.06rem;font-weight:500;color:var(--bronze);
  display:inline-flex;align-items:center;gap:.5em;border-bottom:1px solid currentColor;padding-bottom:3px;
  transition:gap .4s var(--ease),opacity .3s var(--ease)}
.person2__link:hover{gap:.85em;opacity:.82}

/* Section 5: Contact (dark) */
.contact2__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,6vw,5rem);align-items:start}
.contact2__points{list-style:none;margin:1.7rem 0 0;padding:0;display:grid;gap:.75rem}
.contact2__points li{position:relative;padding-left:1.5rem;color:var(--text-dim);font-size:1.05rem;line-height:1.5}
.contact2__points li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--bronze)}
.contact2__meta{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;margin-top:1.8rem}
.contact2__meta a{font-family:var(--font-d);font-size:1.05rem;color:var(--text-dim);transition:color .3s var(--ease)}
.contact2__meta a:hover{color:var(--bronze)}
.contact2__meta a.contact2__linkedin{font-size:.92rem;color:var(--text-mute)}

/* Accessible focus for interactive homepage elements */
.svcrow:focus-visible,.hsec__more:focus-visible,.person2__link:focus-visible,
.contact2__meta a:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
/* Keyboard focus for nav, footer and general links */
a:focus-visible,button:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:2px}

@media (max-width:820px){
  .situations,.svclist,.people2,.contact2__grid{grid-template-columns:1fr}
  .svcrow__go{display:none}
}

/* ============================================================
   ABOUT PAGE (restructured 2026-09-08)
   ============================================================ */
/* Section 2: Tuumata View sequence */
.tview{display:grid;grid-template-columns:auto 1fr;gap:0 1.6rem;align-items:stretch;
  margin:clamp(2rem,5vh,3rem) 0 0;max-width:56rem}
.tview__stages{display:grid;gap:0}
.tview__flow{display:flex;gap:1.1rem}
.tview__flow-dir{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  gap:.8rem;color:var(--bronze-text);font-family:var(--font-d);text-transform:uppercase;
  letter-spacing:.14em;font-size:.7rem;border-left:1px solid var(--hairline);padding:1.7rem 0 1.5rem .55rem}
.tview__flow-dir .lbl{writing-mode:vertical-rl}
.tview__flow-dir--up .lbl{transform:rotate(180deg)}
.tview__flow-dir b{font-weight:400;font-size:1.05rem;line-height:1}
.tview__flow-m{display:none}
.tstage{border-top:1px solid var(--hairline);padding:1.7rem 0 1.5rem;
  display:grid;grid-template-columns:auto 1fr;gap:.15rem 1.3rem}
.tstage__num{grid-row:1 / -1;font-family:var(--font-d);font-weight:500;color:var(--bronze);
  font-size:1.05rem;padding-top:.2rem}
.tstage h3{grid-column:2;font-family:var(--font-d);font-weight:600;line-height:1.22;margin:0;
  font-size:clamp(1.25rem,1rem + .6vw,1.55rem)}
.tstage__tag{grid-column:2;font-family:var(--font-d);text-transform:uppercase;letter-spacing:.1em;
  font-size:.74rem;color:var(--bronze);margin:.5rem 0 0}
.tstage__concepts{grid-column:2;color:var(--text-dim);font-size:1.05rem;line-height:1.5;margin:.55rem 0 0}
.tstage p:not(.tstage__tag):not(.tstage__concepts):not(.tstage__q){grid-column:2;color:var(--text-dim);
  font-size:1.05rem;line-height:1.55;margin:.55rem 0 0}
.tstage__q{grid-column:2;color:var(--text);font-weight:500;font-size:1.05rem;margin:.75rem 0 0}
.tstage__link{display:flex;align-items:center;gap:.7em;padding:.85rem 0 .85rem 2.4rem;
  color:var(--text-mute);font-family:var(--font-d);font-size:.98rem}
.tstage__link .ar{color:var(--bronze);font-size:1.15rem}
.tview__close{max-width:58rem;margin:clamp(2rem,5vh,3rem) 0 0;color:var(--text-dim);
  font-size:clamp(1.08rem,1rem + .45vw,1.25rem);line-height:1.6}

/* Section 3: profiles */
.profile{display:grid;grid-template-columns:270px 1fr;gap:clamp(2rem,5vw,4rem);
  border-top:1px solid var(--hairline);padding:clamp(1.8rem,4vh,2.8rem) 0}
.profile:first-of-type{border-top:0;padding-top:0}
.profile:last-of-type{padding-bottom:0}
.profile__photo{width:clamp(150px,15vw,185px);aspect-ratio:1/1;object-fit:cover;border-radius:50%;
  background:rgba(255,255,255,.05);margin-bottom:1.3rem;
  border:1px solid var(--hairline)}
.profile__name{font-family:var(--font-d);font-weight:600;line-height:1.1;margin:0;
  font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.profile__title{font-family:var(--font-d);color:var(--bronze);font-size:.98rem;letter-spacing:.02em;
  margin:.45rem 0 0;display:block}
.profile__descriptor{color:var(--text-dim);font-size:.98rem;line-height:1.5;margin:1rem 0 0;max-width:34ch}
.profile__creds{color:var(--text-mute);font-size:.95rem;line-height:1.7;margin:1rem 0 0}
.profile__statement{font-family:var(--font-d);font-weight:500;color:var(--text);line-height:1.35;
  font-size:clamp(1.2rem,1rem + .7vw,1.5rem);margin:0 0 1rem;max-width:42ch}
.profile__copy{color:var(--text-dim);font-size:1.08rem;line-height:1.6;margin:0 0 1.7rem;max-width:64ch}
.contribs{display:grid;gap:0;margin-top:.4rem}
.contrib{border-top:1px solid var(--hairline-2);padding:1.2rem 0;
  display:grid;grid-template-columns:auto 1fr;gap:.15rem 1.1rem}
.contrib__num{grid-row:1 / -1;color:var(--bronze);font-family:var(--font-d);font-weight:500;
  font-size:.98rem;padding-top:.15rem}
.contrib h4{grid-column:2;font-family:var(--font-d);font-weight:600;font-size:1.15rem;margin:0;line-height:1.25}
.contrib p{grid-column:2;color:var(--text-dim);font-size:1.02rem;line-height:1.5;margin:.35rem 0 0}
.profile__evidence{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.55rem}
.profile__evidence li{position:relative;padding-left:1.5rem;color:var(--text-dim);font-size:1.02rem;line-height:1.5}
.profile__evidence li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--bronze)}
.profile__evidence .lead{color:var(--text);font-weight:500;padding-left:0;margin-bottom:.2rem}
.profile__evidence .lead::before{display:none}
.profiles__link{margin-top:clamp(1.4rem,3vh,2rem)}
#people{padding-bottom:clamp(2.6rem,6vh,4rem)}

/* Section 4: three tests */
.abouttests{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,4vw,3rem)}
.abouttest{border-top:2px solid var(--bronze);padding:1.3rem 0 0}
.abouttest__num{color:var(--bronze);font-family:var(--font-d);font-weight:500;font-size:.95rem}
.abouttest h3{font-family:var(--font-d);font-weight:600;margin:.5rem 0 .6rem;line-height:1.2;
  font-size:clamp(1.2rem,1rem + .6vw,1.5rem)}
.abouttest p{color:var(--text-dim);font-size:1.02rem;line-height:1.55;margin:0}
.abouttests__close{max-width:58rem;margin:clamp(2rem,5vh,3rem) 0 0;color:var(--text-dim);
  font-size:clamp(1.06rem,1rem + .4vw,1.22rem);line-height:1.6}

/* Restrained whakataukii (flat, not oversized, connected to Ngaa Uara) */
.whakatauki--sm{text-align:left;margin:clamp(2.6rem,6vh,4rem) 0 0;padding-top:clamp(1.4rem,3vh,2rem);
  border-top:1px solid var(--hairline)}
.whakatauki--sm .whakatauki__mi{font-family:var(--font-d);font-style:normal;font-weight:500;
  letter-spacing:0;line-height:1.3;font-size:clamp(1.35rem,1rem + 1.4vw,1.9rem);
  background:none;-webkit-text-fill-color:var(--bronze);color:var(--bronze)}

@media (max-width:820px){
  .profile{grid-template-columns:1fr;gap:1.6rem}
  .abouttests{grid-template-columns:1fr}
  .tview{grid-template-columns:1fr}
  .tview__flow{display:none}
  .tview__flow-m{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;order:-1;margin:0 0 .7rem;
    color:var(--bronze-text);font-family:var(--font-d);text-transform:uppercase;letter-spacing:.1em;font-size:.74rem}
}

/* ============================================================
   CHOSEN STYLE: editorial serif-italic section headings
   ============================================================ */
.section-title,.statement__heading,.sect__title,.work__cta-title,.svc-help h3{
  font-family:var(--font-serif);font-style:italic;font-weight:500;letter-spacing:0;line-height:1.06}

/* Homepage service index rows (the "C bottom" treatment) */
.idx-rows{max-width:840px;margin:clamp(2rem,5vh,3rem) auto .5rem;text-align:left}
.idx-row{display:flex;align-items:baseline;gap:1.2rem;padding:1.4rem 0;border-top:1px solid var(--hairline);
  color:inherit;transition:color .3s var(--ease)}
.idx-row:last-child{border-bottom:1px solid var(--hairline)}
.idx-row__n{font-family:var(--font-d);font-size:.8rem;color:var(--bronze);letter-spacing:.06em;min-width:2.2ch}
.idx-row__main{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.idx-row__b{font-family:var(--font-d);font-weight:500;font-size:var(--step-1);letter-spacing:-.01em;
  transition:color .3s var(--ease)}
.idx-row__q{font-family:var(--font-d);font-style:italic;font-size:var(--step--1);line-height:1.42;
  color:var(--text-mute);max-width:72ch;transition:color .3s var(--ease)}
.idx-row__go{margin-left:auto;padding-left:1rem;color:var(--bronze);opacity:0;
  transform:translateX(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.idx-row:hover .idx-row__b{color:var(--bronze)}
.idx-row:hover .idx-row__q{color:var(--text-dim)}
.idx-row:hover .idx-row__go{opacity:1;transform:none}
@media (max-width:560px){.idx-row__go{display:none}}

/* Services page: the connecting argument, at length */
.svc-argument{max-width:66ch;margin:0 auto clamp(2.2rem,5vh,3rem);
  display:flex;flex-direction:column;gap:1.1rem}
.svc-argument p{color:var(--text-dim);font-size:var(--step-0);line-height:1.6}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{position:relative;border-top:1px solid var(--hairline);background:#0A0C0F;
  padding:clamp(2.6rem,6vh,3.6rem) 0 clamp(1.4rem,3vh,2rem);overflow:hidden}
.footer__inner{display:flex;flex-direction:column;gap:clamp(1.8rem,4vh,2.6rem)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1.1fr;gap:2rem clamp(2rem,5vw,4rem);align-items:start}
.footer__brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none}
.footer__logo{width:42px;display:block}
.footer__wordmark{font-family:var(--font-d);font-weight:600;letter-spacing:.14em;font-size:.95rem;
  color:var(--text);display:flex;flex-direction:column;line-height:1.15}
.footer__wordmark i{font-style:normal;font-weight:400;letter-spacing:.32em;font-size:.68rem;color:var(--bronze)}
.footer__place{color:var(--text-mute);font-size:.95rem;margin:.95rem 0 0;font-family:var(--font-d);letter-spacing:.02em}
.footer__nav{display:flex;flex-direction:column;gap:.65rem}
.footer__contact{display:flex;flex-direction:column;gap:.65rem;align-items:flex-start}
.footer__nav a,.footer__contact a{font-family:var(--font-d);font-size:1rem;color:var(--text-dim);
  transition:color .3s var(--ease)}
.footer__nav a:hover,.footer__contact a:hover{color:var(--bronze)}
.footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem 2rem;
  border-top:1px solid var(--hairline-2);padding-top:clamp(1.2rem,3vh,1.6rem);
  color:var(--text-mute);font-size:.92rem;font-family:var(--font-d);letter-spacing:.02em}
.footer__legal a{color:var(--text-mute);transition:color .3s var(--ease)}
.footer__legal a:hover{color:var(--bronze)}
.footer__legal p{margin:0}
@media (max-width:820px){
  .footer__grid{grid-template-columns:1fr;gap:1.7rem}
  .footer__legal{flex-direction:column;align-items:flex-start;gap:.7rem}
  .footer__legal .footer__copy{order:2}
  .footer__legal .footer__privacy{order:1}
  .footer__legal .footer__totop{order:3}
}
.footer__giant{font-family:var(--font-d);font-weight:600;text-align:center;line-height:.8;
  font-size:clamp(4rem,20vw,20rem);letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px var(--hairline);
  padding-bottom:.1em;user-select:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .about__grid{grid-template-columns:1fr;gap:2.5rem}
  .step{grid-template-columns:1fr;gap:1rem}
  .values{grid-template-columns:repeat(2,1fr);gap:2.5rem 2rem}
  .contact__card{grid-template-columns:1fr}
  .contact__left{border-right:0;border-bottom:1px solid var(--hairline-2);
    min-height:auto;padding-block:clamp(2rem,7vw,2.8rem)}
  .offer{grid-template-columns:1fr;gap:1.1rem}
  .offer__aside{flex-direction:row;align-items:baseline;gap:1rem}
}
/* Orbit collapses to a stacked list on narrow screens */
@media (max-width:720px){
  .orbit{width:100%;aspect-ratio:auto;display:flex;flex-direction:column;gap:0;margin:2rem 0 0}
  .orbit__ring{display:none}
  .node{position:static;transform:none;width:100%;flex-direction:row;align-items:flex-start;
    text-align:left;gap:1.1rem;border-top:1px solid var(--hairline-2);padding:1.5rem 0}
  .node__badge{width:56px;height:56px;flex-shrink:0}
  .node__badge svg{width:24px;height:24px}
  .node__text{align-items:flex-start}
  .node__num{margin-top:0}
  .node__title{margin-top:.15rem}
  .node__desc{display:block;color:var(--text-dim);font-size:var(--step--1);margin-top:.5rem;max-width:54ch}
  .orbit__center{position:static;width:100%;height:auto;align-items:flex-start;text-align:left;
    order:5;margin-top:1.8rem;gap:1.3rem}
  .orbit__desc{min-height:auto}
}
@media (max-width:560px){
  .about__stats{grid-template-columns:repeat(2,1fr);gap:1.6rem 1.2rem}
  .values{grid-template-columns:1fr;gap:2rem}
  .footer__meta{text-align:left}
  .form__row{grid-template-columns:1fr}
}

/* ============================================================
   MOTION PREP + REDUCED MOTION
   ============================================================ */
[data-reveal]{opacity:0;transform:translateY(24px)}
.js [data-words] .word__in{transform:translateY(102%)}
.js .line__in{transform:translateY(103%)}
.no-js [data-reveal]{opacity:1;transform:none}
.no-js .preloader{display:none}   /* without JavaScript the loading screen would never clear */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .line__in,.word__in{transform:none!important}
  .cursor{display:none}
  .preloader{display:none}
  .statement__img,.about__img{filter:grayscale(1) brightness(.42)}
}

/* ============================================================
   SERVICE PAGE SYSTEM v2 — added 9 Sep 2026
   Sound / Work / Hold spine, engagement chooser, page assets.
   All classes prefixed t2- so nothing collides with existing rules.
   ============================================================ */

/* ---------- Sound / Work / Hold ---------- */
.t2-swh{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,2.6rem);
  margin-top:clamp(2.2rem,4.5vh,3rem)}
.t2-swh__col{border-top:1px solid var(--bronze);padding-top:1.15rem}
.t2-swh__col--lead{border-top-width:3px}
.t2-swh__q{font-family:var(--font-serif);font-style:italic;font-weight:600;
  font-size:clamp(1.35rem,1.1rem + .8vw,1.8rem);line-height:1.15;margin:0 0 .3rem}
.t2-swh__sub{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.12em;
  font-size:.7rem;color:var(--bronze);margin:0 0 1rem}
.paper .t2-swh__sub{color:var(--bronze-text)}
.t2-swh__col ul{display:grid;gap:.9rem}
.t2-swh__col li{color:var(--text-dim);font-size:1rem;line-height:1.55;
  padding-left:1rem;position:relative}
.t2-swh__col li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  background:var(--bronze);border-radius:50%}
.paper .t2-swh__col li{color:var(--paper-dim)}
.paper .t2-swh__col li::before{background:var(--bronze-text)}
.t2-swh__note{border-top:1px solid var(--hairline);margin-top:clamp(2.2rem,4.5vh,3rem);
  padding-top:1.2rem;max-width:74ch;color:var(--text);font-weight:500}
.paper .t2-swh__note{border-color:var(--paper-line);color:var(--paper-ink)}
@media (max-width:900px){.t2-swh{grid-template-columns:1fr;gap:1.8rem}}

/* ---------- Engagement chooser ---------- */
.t2-chooser{border-top:1px solid var(--hairline);margin-top:clamp(2.6rem,5.5vh,3.6rem);
  padding-top:1.4rem}
.t2-chooser__lab{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;color:var(--bronze);margin:0 0 1rem}
.t2-chooser__list{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.t2-chooser__list a{display:inline-block;border:1px solid var(--hairline);border-radius:2px;
  padding:.6rem 1rem;font-family:var(--font-d);font-size:.95rem;color:var(--text-dim);
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.t2-chooser__list a:hover{border-color:var(--bronze);color:var(--text)}

/* ---------- Shared figure frame ---------- */
.t2-fig{margin:clamp(1.8rem,4vh,2.6rem) 0 0;color:var(--text)}
.paper .t2-fig{color:var(--paper-ink)}
.t2-fig svg{display:block;width:100%;height:auto;overflow:visible}
.t2-fig__scroll{overflow-x:auto}
.t2-fig__scroll svg{min-width:640px}
.t2-fig__cap{font-size:.92rem;line-height:1.5;color:var(--text-mute);margin:1rem 0 0;max-width:70ch}
.paper .t2-fig__cap{color:var(--paper-dim)}
.t2-svg-lab{font-family:var(--font-d);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  fill:currentColor;opacity:.62}
.t2-svg-txt{font-family:var(--font-b);font-size:13px;fill:currentColor}
.t2-svg-sm{font-family:var(--font-b);font-size:11.5px;fill:currentColor;opacity:.72}
.t2-svg-big{font-family:var(--font-d);font-weight:600;font-size:30px;fill:var(--bronze)}
.paper .t2-svg-big{fill:var(--bronze-text)}
.t2-svg-line{stroke:currentColor;stroke-width:1;opacity:.28;fill:none}
.t2-svg-acc{stroke:var(--bronze);fill:none;stroke-width:1.6}
.paper .t2-svg-acc{stroke:var(--bronze-text)}

/* ---------- Capital: funnel (animated) ---------- */
.t2-funnel__band{fill:var(--bronze);opacity:.22}
.paper .t2-funnel__band{fill:var(--bronze-deep);opacity:.24}
.t2-funnel__band--2{opacity:.40}
.t2-funnel__band--3{opacity:.62}
.t2-funnel .t2-funnel__band{transform-box:fill-box;transform-origin:bottom;
  transform:scaleY(1);transition:transform 900ms var(--ease)}
.t2-funnel:not(.is-live) .t2-funnel__band--2,
.t2-funnel:not(.is-live) .t2-funnel__band--3{transform:scaleY(1.32)}
.t2-loss{font-family:var(--font-b);font-size:11.5px;fill:currentColor;opacity:.66}

/* ---------- Performance: sawtooth (animated) ---------- */
.t2-saw__path{stroke:var(--bronze);stroke-width:2.2;fill:none;stroke-linejoin:round;
  stroke-linecap:round}
.paper .t2-saw__path{stroke:var(--bronze-deep)}
.t2-saw .t2-saw__path{stroke-dashoffset:0}
.t2-saw.is-live .t2-saw__path{animation:t2draw 1600ms var(--ease) forwards}
@keyframes t2draw{to{stroke-dashoffset:0}}

/* ---------- Governance: the filter ---------- */
.t2-filter{display:grid;grid-template-columns:1fr auto 1fr;gap:0 clamp(1.2rem,3vw,2.4rem);
  margin-top:clamp(2rem,4vh,2.8rem)}
.t2-filter__h{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.08em;
  font-size:.74rem;color:var(--bronze);padding-bottom:.8rem}
.paper .t2-filter__h{color:var(--bronze-text)}
.t2-filter__spine{grid-row:1 / span 6;grid-column:2;display:flex;align-items:center;
  justify-content:center;position:relative}
.t2-filter__spine span{writing-mode:vertical-rl;font-family:var(--font-d);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);opacity:.85;
  padding:.6rem .35rem;border-left:1px solid var(--bronze);border-right:1px solid var(--bronze)}
.paper .t2-filter__spine span{color:var(--bronze-text);border-color:rgba(140,110,69,.5)}
.t2-filter__said,.t2-filter__real{border-top:1px solid var(--hairline);padding:1.1rem 0;
  font-size:1rem;line-height:1.55}
.paper .t2-filter__said,.paper .t2-filter__real{border-color:var(--paper-line)}
.t2-filter__said{color:var(--text-mute);font-family:var(--font-serif);font-style:italic;
  font-size:1.12rem}
.paper .t2-filter__said{color:var(--paper-dim)}
.t2-filter__real{color:var(--text-dim)}
.paper .t2-filter__real{color:var(--paper-ink)}
@media (max-width:820px){
  .t2-filter{grid-template-columns:1fr}
  .t2-filter__spine{grid-row:auto;grid-column:1;justify-content:flex-start;margin:.4rem 0}
  .t2-filter__spine span{writing-mode:horizontal-tb;border-left:0;border-right:0;
    border-top:1px solid var(--bronze);border-bottom:1px solid var(--bronze)}
  .t2-filter__h--r{margin-top:1.6rem}
}

/* ---------- Commercial: leak markers ---------- */
.t2-leak{font-family:var(--font-b);font-size:11.5px;fill:currentColor;opacity:.7}
.t2-leak-mark{fill:var(--rose)}

/* ---------- Deliverables list ---------- */
.t2-deliv{display:grid;gap:0;margin-top:clamp(2rem,4vh,2.8rem)}
.t2-deliv__item{border-top:1px solid var(--hairline);padding:1.25rem 0;
  display:grid;grid-template-columns:auto 1fr;gap:0 1.4rem;align-items:baseline}
.paper .t2-deliv__item{border-color:var(--paper-line)}
.t2-deliv__n{font-family:var(--font-d);font-size:.8rem;letter-spacing:.1em;color:var(--bronze)}
.paper .t2-deliv__n{color:var(--bronze-text)}
.t2-deliv__item h3{font-family:var(--font-d);font-weight:600;font-size:1.15rem;margin:0 0 .35rem}
.t2-deliv__item p{color:var(--text-dim);font-size:1rem;line-height:1.55;margin:0;max-width:62ch}
.paper .t2-deliv__item p{color:var(--paper-dim)}

@media (prefers-reduced-motion:reduce){
  .t2-funnel .t2-funnel__band{transition:none!important;transform:scaleY(1)!important}
  .t2-saw.is-live .t2-saw__path{animation:none!important;stroke-dashoffset:0!important}
}

/* ---------- Services index: three-question grouping ---------- */
.t2-group{margin:clamp(2.4rem,5vh,3.4rem) 0 1.4rem;border-top:2px solid var(--bronze);padding-top:1.1rem}
.scards + .t2-group{margin-top:clamp(3rem,6vh,4rem)}
.t2-group__q{font-family:var(--font-serif);font-style:italic;font-weight:600;
  font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);line-height:1.1;margin:0}
.t2-group__sub{font-family:var(--font-d);font-size:1rem;color:var(--text-dim);margin:.35rem 0 0;max-width:60ch}
.paper .t2-group__sub{color:var(--paper-dim)}
.paper .t2-group{border-top-color:var(--bronze-deep)}

/* ---------- Home: the complex middle ---------- */
.t2-cm__band{fill:var(--bronze);opacity:.10}
.t2-cm__path{stroke:currentColor;stroke-width:1.4;fill:none;opacity:.55;stroke-linecap:round}
.t2-cm__path--lost{stroke:var(--rose);opacity:.9}
.t2-cm.is-live .t2-cm__path{animation:t2draw 1500ms var(--ease) forwards}
.t2-cm__dot{fill:var(--rose)}
@media (prefers-reduced-motion:reduce){
  .t2-cm.is-live .t2-cm__path{animation:none!important;stroke-dashoffset:0!important}
}

/* ---------- Founder scale strip ---------- */
.t2-scale{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,3vw,2.4rem);
  margin-top:clamp(1.8rem,4vh,2.6rem);border-top:1px solid var(--hairline);padding-top:1.6rem}
.paper .t2-scale{border-color:var(--paper-line)}
.t2-scale__n{font-family:var(--font-d);font-weight:600;font-size:clamp(1.9rem,1.4rem + 1.8vw,2.9rem);
  line-height:1;color:var(--bronze);margin:0}
.paper .t2-scale__n{color:var(--bronze-text)}
.t2-scale__l{font-size:.95rem;line-height:1.4;color:var(--text-dim);margin:.5rem 0 0}
.paper .t2-scale__l{color:var(--paper-dim)}
.t2-scale__note{color:var(--text-mute);font-size:.95rem;margin:1.4rem 0 0;max-width:70ch}
.paper .t2-scale__note{color:var(--paper-dim)}
@media (max-width:820px){.t2-scale{grid-template-columns:repeat(2,1fr);gap:1.6rem}}

/* ---------- Services index: the three-question band ---------- */
.t2-band{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;
  margin:clamp(1.5rem,3.5vh,2.1rem) 0 0}
.t2-band__col{padding:0}
.t2-band__col:not(:last-child){padding-right:clamp(1.8rem,2.6vw,2.5rem)}
.t2-band__col + .t2-band__col{border-left:1px solid rgba(140,110,69,.30);
  padding-left:clamp(1.8rem,2.6vw,2.5rem)}
.t2-band__q{font-family:var(--font-serif);font-style:italic;font-weight:600;
  font-size:clamp(1.95rem,1.5rem + 1.25vw,2.75rem);line-height:1.08;letter-spacing:0;
  color:var(--paper-ink);margin:0;text-wrap:nowrap}
.t2-band__d{font-family:var(--font-b);font-size:1.08rem;line-height:1.6;
  color:var(--paper-dim);margin:1rem 0 0;max-width:28ch}
.t2-band__note{font-size:var(--step-0);line-height:1.65;color:var(--paper-ink);
  max-width:72ch;margin:2rem 0 0}
.t2-rule{border:0;border-top:1px solid var(--paper-line);margin:2.75rem 0}
@media (max-width:900px){
  .t2-band{grid-template-columns:1fr;margin-top:1.4rem}
  .t2-band__col{padding:1.6rem 0}
  .t2-band__col:first-child{padding-top:0}
  .t2-band__col:not(:last-child){padding-right:0}
  .t2-band__col + .t2-band__col{border-left:0;border-top:1px solid rgba(140,110,69,.30);
    padding-left:0}
  .t2-band__q{font-size:clamp(1.9rem,1.68rem + 1.2vw,2.15rem);text-wrap:wrap}
  .t2-band__d{font-size:1rem;margin-top:.85rem;max-width:none}
  .t2-band__note{margin-top:1.8rem}
  .t2-rule{margin:2.2rem 0}
}
.scard__desc{font-size:1.08rem;line-height:1.6}


/* ---------- Services index: one symptom, five causes ---------- */
.t2-causes{margin-top:clamp(1.8rem,4vh,2.6rem);border-bottom:1px solid var(--hairline)}
.paper .t2-causes{border-bottom-color:var(--paper-line)}
.t2-cause{display:grid;grid-template-columns:1fr minmax(200px,15rem);
  gap:.6rem clamp(1.6rem,3vw,3rem);align-items:baseline;
  border-top:1px solid var(--hairline);padding:1.35rem 0}
.paper .t2-cause{border-color:var(--paper-line)}
.t2-cause__txt{font-size:clamp(1.05rem,1rem + .35vw,1.2rem);line-height:1.55;
  color:var(--text-dim);margin:0;max-width:60ch}
.paper .t2-cause__txt{color:var(--paper-ink)}
.t2-cause__svc{font-family:var(--font-d);font-weight:600;font-size:1rem;
  color:var(--bronze);justify-self:start;
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.t2-cause__svc:hover{border-bottom-color:var(--bronze)}
.paper .t2-cause__svc{color:var(--bronze-text)}
.t2-causes__note{margin:0;padding-top:1.5rem;
  font-family:var(--font-serif);font-style:italic;
  font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem);line-height:1.3;color:var(--text);
  max-width:46ch}
.paper .t2-causes__note{color:var(--paper-ink)}
@media (max-width:820px){
  .t2-cause{grid-template-columns:1fr;gap:.7rem}
  .t2-cause__txt{max-width:none}
}

/* ---------- Services index: following the evidence ---------- */
.t2-evid-sec{padding:clamp(4rem,7vh,5rem) 0}
.t2-evid{display:grid;grid-template-columns:40fr 60fr;
  column-gap:clamp(3.5rem,5vw,4.5rem);row-gap:0;align-items:start}
.t2-evid__lab{grid-column:1;grid-row:1;margin-bottom:.9rem}
.t2-evid__h{grid-column:1;grid-row:2;margin:0;
  font-family:var(--font-d);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(2.625rem,1.9rem + 1.1vw,3rem);line-height:1.06;color:var(--text)}
.t2-evid__h span{display:block}
.t2-evid__body{grid-column:2;grid-row:2}

/* the illustrative example */
.t2-ex{margin:0}
.t2-ex__issue{font-family:var(--font-b);font-weight:500;
  font-size:clamp(1.5rem,1.35rem + .5vw,1.75rem);line-height:1.25;
  color:var(--text);margin:0;max-width:22ch}
.t2-ex__lab{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.13em;
  font-size:.74rem;color:var(--bronze);margin:1.5rem 0 0;max-width:42%}
.t2-ex__fan{position:relative;height:42px;margin-top:.5rem}
.t2-ex__fan span{position:absolute;background:var(--bronze);opacity:.75}
.t2-ex__stub{left:50%;top:0;width:1px;height:20px}
.t2-ex__span{left:16.667%;right:16.667%;top:20px;height:1px}
.t2-ex__branch{top:20px;width:1px;height:22px}
.t2-ex__branch--1{left:16.667%}
.t2-ex__branch--2{left:50%}
.t2-ex__branch--3{left:83.333%}
.t2-ex__list{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin:.75rem 0 0;padding:0;list-style:none}
.t2-ex__list li{font-family:var(--font-b);font-size:1.08rem;line-height:1.5;
  color:var(--text-dim);text-align:center;padding:0 .6rem}
.t2-ex__note{font-size:1.08rem;line-height:1.68;color:var(--text-dim);
  margin:1.9rem 0 0;max-width:60ch}

@media (max-width:900px){
  .t2-evid{grid-template-columns:1fr}
  .t2-evid__lab,.t2-evid__h,.t2-evid__body{grid-column:1}
  .t2-evid__lab{grid-row:1}
  .t2-evid__h{grid-row:2;font-size:clamp(2rem,1.8rem + 1vw,2.25rem)}
  .t2-evid__h span{display:inline}
  .t2-evid__body{grid-row:3;margin-top:1.5rem}
  .t2-evid-sec{padding:clamp(2.5rem,6vh,3rem) 0}
  .t2-ex__lab{max-width:none}
}

/* stacked constraints: vertical spine on the left, short branch to each item */
@media (max-width:640px){
  .t2-ex__fan{height:18px}
  .t2-ex__span,.t2-ex__branch--1,.t2-ex__branch--3{display:none}
  .t2-ex__stub{left:9px;height:18px}
  .t2-ex__branch--2{left:9px;top:0;height:18px}
  .t2-ex__list{grid-template-columns:1fr;gap:0;margin-top:0;
    border-left:1px solid var(--bronze);padding-left:1.5rem;margin-left:9px}
  .t2-ex__list li{text-align:left;padding:.75rem 0;position:relative;font-size:1rem}
  .t2-ex__list li::before{content:"";position:absolute;left:-1.5rem;top:1.35em;
    width:1rem;height:1px;background:var(--bronze);opacity:.75}
  .t2-ex__list li br{display:none}
  .t2-ex__note{font-size:1rem;max-width:none;margin-top:1.6rem}
}

/* single-column variant of the constraint list, used on Capital Confidence */
.t2-cause--solo{grid-template-columns:1fr}

/* =====================================================================
   ADDED 2026-09-09 (Claude Code): media evidence block + insights media line
   ===================================================================== */
.t2-media{margin:clamp(2.4rem,5vh,3.4rem) 0 0;padding-top:1.7rem;
  border-top:1px solid var(--bronze);max-width:52rem}
.t2-media__lab{font-family:var(--font-d);text-transform:uppercase;
  letter-spacing:.16em;font-size:.72rem;font-weight:500;color:var(--bronze);
  margin:0 0 1.1rem}
.t2-media__quote{margin:0;font-family:var(--font-serif);font-style:italic;
  font-weight:500;font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem);line-height:1.25;
  color:var(--text)}
.t2-media__cite{margin-top:1.3rem}
.t2-media__who{margin:0;font-size:.98rem;line-height:1.55;color:var(--text);
  opacity:.82;max-width:44rem}
.t2-media__src{display:inline-block;margin-top:.75rem;font-family:var(--font-d);
  font-size:.85rem;letter-spacing:.02em;color:var(--bronze);text-decoration:none;
  border-bottom:1px solid rgba(214,164,97,.4);padding-bottom:1px}
.t2-media__src:hover{border-bottom-color:var(--bronze)}

/* =====================================================================
   ABOUT PAGE (redesigned + shortened 2026-09-09, Claude Code)
   ===================================================================== */
/* Compact intro: scoped to About so the shared Services/Insights hero is untouched */
#about-intro{padding-top:clamp(5.5rem,11vh,7.5rem);padding-bottom:clamp(2.6rem,6vh,3.8rem)}
/* About is now the ivory profiles directly under the header: a compact page-title
   intro, then the profiles. Top padding clears the fixed nav; the statement stays
   visibly smaller than the title. */
#who{padding-top:clamp(9.5rem,15vh,11.5rem)}
.about-title{font-family:var(--font-d);font-weight:500;letter-spacing:-.01em;line-height:1.05;
  font-size:clamp(2.15rem,1.5rem + 2.1vw,3.6rem);color:var(--paper-ink);margin:0;text-wrap:balance}
#who .about-head{margin:0}
#who .about-statement{font-size:clamp(1.2rem,1.1rem + .5vw,1.6rem);max-width:34ch;margin:.9rem 0 0}
#who .t2-people{margin-top:clamp(2rem,4vh,2.5rem)}

/* Who you work with: two balanced open columns with a fine divider */
.t2-people{display:grid;grid-template-columns:1fr 1fr;column-gap:0;margin-top:clamp(2rem,4vh,3rem)}
.t2-person{padding:0 clamp(2.2rem,4vw,3.8rem)}
.t2-person:first-child{padding-left:0}
.t2-person:last-child{padding-right:0;border-left:1px solid var(--paper-line)}
.t2-person__photo{width:clamp(120px,13vw,150px);aspect-ratio:1/1;object-fit:cover;border-radius:50%;display:block;
  border:1px solid var(--paper-line)}
.t2-person__name{font-family:var(--font-d);font-weight:600;font-size:clamp(1.4rem,1.2rem + .6vw,1.7rem);
  line-height:1.1;margin:1.3rem 0 0;color:var(--text)}
.t2-person__role{font-family:var(--font-d);color:var(--bronze-text);font-size:.98rem;letter-spacing:.02em;margin:.4rem 0 0}
.t2-person__lead{font-family:var(--font-d);font-weight:500;color:var(--text);
  font-size:clamp(1.1rem,1.02rem + .3vw,1.2rem);line-height:1.4;margin:1.2rem 0 0;max-width:38rem}
.t2-person__bio{color:var(--text);font-size:1rem;line-height:1.65;margin:1rem 0 0;max-width:34rem}
.t2-person__bio + .t2-person__bio{margin-top:.85rem}
.t2-person__creds{color:var(--paper-dim);font-size:.92rem;line-height:1.6;margin:1.2rem 0 0}
.t2-person__link{display:inline-block;margin-top:1rem;font-family:var(--font-d);font-size:.9rem;color:var(--bronze-text);
  text-decoration:none;border-bottom:1px solid rgba(122,90,48,.4);padding-bottom:1px}
.t2-person__link:hover{border-bottom-color:var(--bronze-text)}

/* Experience band: compact, attributed as combined career experience */
.t2-expband{margin-top:clamp(2.6rem,5vh,3.6rem);border-top:1px solid var(--paper-line);padding-top:clamp(1.8rem,3.5vh,2.4rem)}
.t2-expband__lead{font-family:var(--font-d);font-weight:500;font-size:.95rem;color:var(--text);margin:0 0 1.2rem}
.t2-expband__figs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.4rem)}
.t2-expband__n{display:block;font-family:var(--font-d);font-weight:600;font-size:clamp(1.7rem,1.4rem + 1vw,2.2rem);
  color:var(--bronze-text);line-height:1}
.t2-expband__l{display:block;font-size:.92rem;line-height:1.45;color:var(--paper-dim);margin-top:.5rem;max-width:24ch}
.t2-expband__link{margin:clamp(1.6rem,3vh,2.2rem) 0 0}
.t2-expband__link a{font-family:var(--font-d);font-size:.9rem;color:var(--bronze-text);
  text-decoration:none;border-bottom:1px solid rgba(122,90,48,.4);padding-bottom:1px}
.t2-expband__link a:hover{border-bottom-color:var(--bronze-text)}

/* Where direction meets delivery: compact charcoal split, heading left / copy right */
.t2-connect-sec{padding:clamp(3.5rem,7vh,5rem) 0}
.t2-connect{display:grid;grid-template-columns:minmax(13rem,22rem) 1fr;gap:clamp(1.8rem,5vw,4rem);align-items:start}
.t2-connect__r p{color:var(--text-dim);font-size:1.08rem;line-height:1.62;margin:0 0 1.1rem;max-width:60ch}
.t2-connect__r p:last-of-type{margin-bottom:0}
.t2-connect__link{display:inline-block;margin-top:1.4rem;font-family:var(--font-d);font-size:.95rem;color:var(--bronze);
  text-decoration:none;border-bottom:1px solid rgba(214,164,97,.4);padding-bottom:2px}
.t2-connect__link:hover{border-bottom-color:var(--bronze)}

@media (max-width:820px){
  .t2-people{grid-template-columns:1fr}
  .t2-person{padding:0}
  .t2-person:last-child{border-left:0;border-top:1px solid var(--paper-line);
    padding-top:clamp(2rem,5vh,2.6rem);margin-top:clamp(2rem,5vh,2.6rem)}
  .t2-connect{grid-template-columns:1fr;gap:1rem}
}
@media (max-width:600px){
  .t2-expband__figs{grid-template-columns:1fr;gap:1.3rem}
  .t2-expband__l{max-width:none}
}

/* =====================================================================
   HOMEPAGE — type-led rewrite (2026-09-10, Claude Code)
   Single left-aligned column, generous rhythm, hairline rules.
   Charcoal ground throughout; reuses brand tokens.
   ===================================================================== */
.hm-sec{padding:clamp(5rem,3.89rem + 4.57vw,8rem) 0}
.hm-hero{position:relative;overflow:hidden;padding-top:clamp(8.5rem,14vh,10rem);padding-bottom:clamp(3rem,6vh,4.5rem)}
/* Desktop: the hero fills the first screen with its muted river-mouth and bridge
   photo and centres its content, so it opens as a full statement. */
@media (min-width:900px){.hm-hero{min-height:100svh;align-content:center}}
.hm-hero > .wrap{position:relative;z-index:1}
/* Home hero photo now uses the shared .hero--photo layer (see hero-system block). */

/* Hero eyebrow: a positioning line at body-step size (raised from 0.8rem) */
.hm-eyebrow{font-family:var(--font-d);font-size:var(--step-0);font-weight:500;letter-spacing:.01em;
  color:var(--bronze);margin:0 0 1.5rem;max-width:44ch}
.hm-hero__title{font-family:var(--font-d);font-weight:500;letter-spacing:-.015em;line-height:1.05;
  font-size:clamp(2.4rem,1.5rem + 4vw,4.6rem);margin:0;max-width:15ch;color:var(--text);text-wrap:balance}
.hm-hero__stand{font-size:clamp(1.08rem,1rem + .35vw,1.2rem);line-height:1.55;color:var(--text-dim);
  max-width:52ch;margin:2rem 0 0}
.hm-hero__stand--bright{color:var(--text);margin-top:1.1rem}

/* Section headings treated as small labels above the group (chose: small label) */
.hm-h2{font-family:var(--font-d);font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:var(--step--1);line-height:1.4;color:var(--bronze);margin:0 0 clamp(1.5rem,3.5vh,2.3rem)}

/* Body-copy measure (~65 characters at the 1.1rem body size) */
:root{--hm-measure:38rem}
/* ============================================================
   HOMEPAGE COMPOSITION GRID
   One 12-column grid for the composed sections. Content caps at
   1400px, centred; side gutter never below 24px; a child may bleed
   to the viewport edge via [full-start]/[full-end] with no 100vw
   (which would include the scrollbar and overflow). Below 900px it
   collapses to one column (panels still bleed).
   ============================================================ */
.hgrid{
  --gutter:var(--gut);
  --hg-col:minmax(0, calc(min(100% - (var(--gutter) * 2), var(--maxw)) / 12));
  display:grid;
  align-items:start;
  grid-template-columns:
    [full-start] minmax(var(--gutter),1fr)
    [c1] var(--hg-col) [c2] var(--hg-col) [c3] var(--hg-col) [c4] var(--hg-col)
    [c5] var(--hg-col) [c6] var(--hg-col) [c7] var(--hg-col) [c8] var(--hg-col)
    [c9] var(--hg-col) [c10] var(--hg-col) [c11] var(--hg-col) [c12] var(--hg-col) [c13]
    minmax(var(--gutter),1fr) [full-end];
}
.hgrid > *{grid-column:c1 / c13;min-width:0}
/* Single-column sections put all their content in the content column. */
.hg-full{grid-column:c1 / c13}

/* Hero third line: a lighter warm grey, body size, comfortable over two lines. */
.hm-hero > *{position:relative;z-index:1}
.hm-hero__lede{font-size:var(--step-0);line-height:1.55;color:var(--text-dim);
  margin:clamp(1.9rem,3.2vh,2.6rem) 0 0;max-width:34ch}
/* Hero CTA: muted brass button with dark text. Sentence case with restrained
   tracking and a compact width, but a generous click height; sits close under
   the supporting sentence so explanation and action read as one. */
.hm-hero__cta{margin-top:clamp(1.9rem,3.5vh,2.7rem);justify-self:start;
  text-transform:none;letter-spacing:.005em;padding:1.05em 1.35em;font-weight:600}


/* Shared statement + accent (section two and the symptom sections). */
.hg-statement{font-family:var(--font-d);font-weight:500;font-size:clamp(2rem,4.5vw,3.75rem);
  line-height:1.05;letter-spacing:-.015em;color:var(--text);margin:0}
.hg-accent{color:var(--bronze)}
.hg-mech{font-size:1.1rem;line-height:1.62;color:var(--text-dim);margin:1.4rem 0 0}

/* Section two: one composition. Eyebrow spans the top; statement (left ~55%) and
   prose (right ~45%) share the next row, top-aligned so the explanation begins
   alongside the first headline line. The isolated rule is removed. */
.s2__eyebrow{grid-column:c1 / c13;grid-row:1;margin:0 0 clamp(1.2rem,2.5vh,1.8rem)}
.s2__statement{grid-column:c1 / c7;grid-row:2;margin:0}
.s2__rule{display:none}
.s2__prose{grid-column:c8 / c13;grid-row:2;align-self:start}
.s2__prose p{font-size:1.02rem;line-height:1.58;color:var(--text-dim);margin:0 0 .75rem;max-width:42ch}
.s2__prose p:last-child{margin:0}
.s2__cta{margin-top:1.75rem}
/* 2026-09-25: section two = Three doors, on paper. Statement, three columns
   (bold recognition line + what we do), closing line, button + quiet text link. */
.s3d__head{grid-column:c1 / c10;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.1;margin:0 0 clamp(2.4rem,6vh,3.8rem)}
.s3d__soft{color:var(--text-dim)}
.s3d__doors{grid-column:c1 / c13;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.6rem,3vw,3rem)}
.s3d__door{border-top:1px solid var(--hairline);padding-top:clamp(1.2rem,2.5vh,1.6rem)}
.s3d__lead{font-family:var(--font-d);font-weight:600;font-size:clamp(1.25rem,1rem + .7vw,1.55rem);
  line-height:1.2;color:var(--text);margin:0 0 .8rem}
.s3d__door p{margin:0;font-size:1.02rem;line-height:1.6;color:var(--text-dim);max-width:38ch}
.s3d__close{grid-column:c1 / c13;margin:clamp(2.4rem,6vh,3.6rem) 0 0;
  font-family:var(--font-d);font-size:clamp(1.15rem,1rem + .5vw,1.4rem);line-height:1.35;color:var(--text)}
.s3d__cta{grid-column:c1 / c13;display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.8rem;margin-top:1.6rem}
/* keep the dark-section sand button on paper (paper remaps --bronze darker) */
.s3d__alt{color:var(--text);text-decoration:underline;text-decoration-color:var(--bronze);
  text-underline-offset:.3em;font-size:1rem}
.s3d__alt:hover{color:var(--bronze-text)}
@media (max-width:899.98px){
  .s3d__head,.s3d__doors,.s3d__close,.s3d__cta{grid-column:c1 / c13}
  .s3d__doors{grid-template-columns:1fr}
}

/* ============================================================
   THE FOUR PATTERNS — flip tiles (t5, added 2026-09-23)
   Front: statement + how it forms. Back: what we found.
   Click / Enter / Space flips; mobile swipes the deck.
   Colours are the original symptom palette: charcoal fill,
   bronze rule and label, ivory statement, dimmed support.
   ============================================================ */
/* Two-part layout: the framing on the left, the flip-tile cluster on the right. */
.pat-layout{ display:grid; gap:clamp(2rem,5vw,3rem); }
@media (min-width:1024px){
  .pat-layout{ grid-template-columns:minmax(0,26rem) minmax(0,1fr);
    gap:clamp(2.5rem,4vw,4.5rem); align-items:start; }
}
.pat-intro .hg-statement{ font-size:clamp(1.7rem,1.2rem + 1.7vw,2.6rem); line-height:1.12;
  letter-spacing:-.01em; margin:.9rem 0 0; max-width:18ch; text-wrap:balance; }

/* The cluster: an offset 2-up of flip tiles (the even column drops a step below). */
.ptiles{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.9rem,1.6vw,1.4rem);
  align-items:stretch; }
/* One tile lifted in bronze, echoing the reference's elevated card. */
.ptile-wrap:first-child .ptile__face--front{ background:#1B1712; border-top-color:var(--bronze-bright); }
.ptile-wrap{ position:relative; display:flex; }
/* Fine offset backing edge: a hairline plane a few px behind each panel that
   shows only at the lower right. Depth without shadow, glow or motif. It stays
   put while the panel flips (the flip transform lives on .ptile__inner). */
.ptile-wrap::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  border:1px solid var(--hairline); border-radius:2px; transform:translate(6px,8px); }

/* the button is the whole tile; strip its chrome */
.ptile{ appearance:none; -webkit-appearance:none; background:none; border:0; padding:0;
  margin:0; font:inherit; color:inherit; text-align:left; width:100%; cursor:pointer;
  position:relative; z-index:1; perspective:1600px; }
.ptile__inner{ position:relative; display:grid; width:100%; height:100%;
  transform-style:preserve-3d; transition:transform .6s var(--ease); }
.ptile.is-flipped .ptile__inner{ transform:rotateY(180deg); }

/* both faces share one grid cell, so the tile sizes to the taller face */
/* Solid charcoal, a restrained step off the ink ground so the panel reads as a
   surface without a card-template look. Back is a touch warmer. */
.ptile__face{ grid-area:1 / 1; display:flex; flex-direction:column; min-height:100%;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  background:#15181E; border-top:1.5px solid var(--bronze); border-radius:2px;
  padding:clamp(1.9rem,2.7vw,2.5rem) clamp(1.6rem,2.2vw,2.05rem) clamp(1.5rem,2.4vw,1.9rem);
  transition:border-color .4s var(--ease), background .4s var(--ease); }
.ptile__face--back{ transform:rotateY(180deg); background:#1B1712; }
.ptile:hover .ptile__face{ border-top-color:var(--bronze-bright); background:#171B21; }
.ptile:hover .ptile__face--back{ background:#1E1914; }

.ptile__idx{ font-family:var(--font-mono,var(--font-d)); font-weight:500;
  font-size:var(--step--1); letter-spacing:.14em; color:var(--bronze); margin-bottom:1.5rem; }
.ptile__statement{ font-family:var(--font-d); font-weight:500; color:var(--text);
  font-size:clamp(1.22rem,1rem + .8vw,1.62rem); line-height:1.2; letter-spacing:-.012em; margin:0; }
.ptile__mech{ font-size:1.02rem; line-height:1.64; color:var(--text-dim);
  margin:1.45rem 0 1.9rem; }
.ptile__label{ font-family:var(--font-d); font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; font-size:var(--step--1); color:var(--bronze); margin:0 0 1.4rem; }
.ptile__ev{ font-size:1rem; line-height:1.62; color:var(--text); margin:0; }
.ptile__ev + .ptile__ev{ margin-top:.9rem; color:var(--text-dim); }
/* guarantee air above the foot action even on the tallest card */
.ptile__ev:last-of-type{ margin-bottom:1.9rem; }

/* Foot: a framed action, set off by a hairline so it reads as the way in.
   No icon; the label underlines on hover and the whole panel is the target. */
.ptile__hint{ display:flex; align-items:baseline; margin-top:auto; padding-top:1.5rem;
  border-top:1px solid var(--hairline);
  font-family:var(--font-d); font-weight:500; font-size:var(--step--1); letter-spacing:.05em;
  color:var(--bronze); transition:color .35s var(--ease); }
.ptile__hint-txt{ padding-bottom:2px; border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease); }
.ptile:hover .ptile__hint{ color:var(--bronze-bright); }
.ptile:hover .ptile__hint-txt{ border-bottom-color:currentColor; }

/* keyboard focus lands a ring on the visible face, not the invisible box */
.ptile:focus-visible{ outline:none; }
.ptile:focus-visible .ptile__inner{ outline:none; }
.ptile:focus-visible .ptile__face--front{ outline:2px solid var(--bronze-bright); outline-offset:4px; }
.ptile.is-flipped:focus-visible .ptile__face--front{ outline:none; }
.ptile.is-flipped:focus-visible .ptile__face--back{ outline:2px solid var(--bronze-bright); outline-offset:4px; }

/* Deliberate rhythm: drop the even columns (02 and 04) a step. A transform, not a
   margin, so the tiles keep matching heights and only shift visually. */
@media (min-width:900px){
  .ptile-wrap:nth-child(even){ transform:translateY(clamp(1.6rem,2.6vw,2.8rem)); }
}

.ptiles__swipe{ display:none; }

/* Mobile: a horizontal swipe deck, one card at a time with the next peeking. */
@media (max-width:899.98px){
  .ptiles{ display:flex; grid-template-columns:none; gap:1rem;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gut) * -1); padding:.25rem var(--gut) 1.1rem;
    scrollbar-width:none; }
  .ptiles::-webkit-scrollbar{ display:none; }
  .ptile-wrap{ flex:0 0 84%; scroll-snap-align:center; }
  .ptiles__swipe{ display:block; text-align:center; margin:.4rem 0 0;
    font-family:var(--font-d); font-size:var(--step--1); letter-spacing:.02em;
    color:var(--text-mute); }
}

/* Reduced motion: cross-fade the faces instead of a 3D flip. */
@media (prefers-reduced-motion:reduce){
  .ptile__inner{ transition:none; }
  .ptile.is-flipped .ptile__inner{ transform:none; }
  .ptile__face{ -webkit-backface-visibility:visible; backface-visibility:visible;
    transition:opacity .3s var(--ease); }
  .ptile__face--back{ transform:none; opacity:0; pointer-events:none; }
  .ptile.is-flipped .ptile__face--front{ opacity:0; pointer-events:none; }
  .ptile.is-flipped .ptile__face--back{ opacity:1; pointer-events:auto; }
}

/* Below 900px: one column, gutters kept; panels run edge to edge, padding down a step. */
@media (max-width:899.98px){
  .hgrid{
    grid-template-columns:
      [full-start] var(--gutter)
      [c1] minmax(0,1fr) [c13]
      var(--gutter) [full-end];
  }
  .hgrid > *,
  .s2__eyebrow,.s2__statement,.s2__rule,.s2__prose{grid-column:c1 / c13}
  .s2__statement,.s2__rule,.s2__prose{grid-row:auto}
}

/* What we test / How we work: two-column definition rows */
.hm-defs{margin:0;max-width:60rem}
.hm-def{display:grid;grid-template-columns:minmax(0,20rem) 1fr;gap:.5rem clamp(2rem,5vw,4rem);
  border-top:1px solid var(--hairline);padding:clamp(1.5rem,3vh,2.1rem) 0}
.hm-def:first-child{border-top:0;padding-top:0}
.hm-def__t{font-family:var(--font-d);font-weight:500;line-height:1.25;
  font-size:clamp(1.18rem,1.05rem + .45vw,1.45rem);margin:0;color:var(--text)}
.hm-def__d{font-size:1.1rem;line-height:1.6;color:var(--text-dim);margin:0;max-width:var(--hm-measure)}

/* Who you get: lead paragraph + button */
/* Ivory section heading under the gold label; the complementary backgrounds are
   the point, so they lead. */
/* Who does the work uses the standard section padding like the other sections
   (no forced full-screen height). */
.hm-who__head{color:var(--text);margin:.3rem 0 0}   /* size: .h2-section */
/* Balanced two-column: copy left, the two faces right, held in a controlled measure
   so the portraits sit close to the text rather than drifting to the edge. */
.hm-who{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.6rem,3vw,3rem);
  align-items:center;max-width:62rem}
.hm-who__copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem;max-width:40rem}
.hm-who__statement{font-size:clamp(1.02rem,.98rem + .3vw,1.18rem);line-height:1.6;
  color:var(--text-dim);margin:0}
.hm-who__statement .hg-accent{color:var(--text)}
.hm-who__people{display:flex;gap:clamp(1.4rem,2.5vw,2.4rem)}
.hm-face{display:flex;flex-direction:column;align-items:center;gap:.7rem;
  text-decoration:none;color:var(--text)}
.hm-face__photo{width:220px;max-width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:0;
  filter:grayscale(1) sepia(.15) contrast(1.05);
  border:1px solid var(--hairline-2);transition:transform .4s var(--ease),border-color .4s var(--ease)}
@media (max-width:760px){ .hm-face__photo{width:140px} }
/* Even out the two backgrounds after grayscale: Greer's (lilac) reads brighter
   than Cedric's, so dim only Greer's frame. */
.hm-face__photo--dim{ filter:grayscale(1) sepia(.15) contrast(1.05) brightness(.85); }
.hm-face:hover .hm-face__photo{transform:translateY(-3px);border-color:var(--bronze)}
.hm-face__name{font-family:var(--font-d);font-weight:500;font-size:.98rem;letter-spacing:.01em;
  color:var(--text);white-space:nowrap}
@media (max-width:760px){
  .hm-who{grid-template-columns:1fr;gap:2.2rem}
  .hm-who__people{justify-content:flex-start}
}
/* Lead-in / route sections between the blocks: a heading or a single link, held
   close to the block they introduce rather than a full section gap. */
.hm-sec--lead{padding-block:clamp(2.2rem,4.5vh,3.2rem)}
.hm-lead{font-size:1.12rem;line-height:1.58;color:var(--text-dim);max-width:34rem;margin:.9rem 0 0}
/* Oversized block statement under an eyebrow label (theready-style rhythm). */
/* Section-lead statement: prominent but ~17% smaller than the section-two
   statement, balanced so no single word is stranded on its own line. */
.hm-bstate{max-width:30ch;margin:0 0 clamp(1rem,2.2vh,1.5rem);
  font-size:clamp(1.7rem,1.1rem + 2.4vw,3.1rem);text-wrap:balance}

/* Close: centred line (the only centred element) + text routes + contact */
/* Closing statement: left-aligned to the section edge, controlled line break */
/* Compact closing invitation: fine divider, two columns (lead left, action right),
   heading smaller than the hero and balanced so no short last word is stranded. */
.hm-close{border-top:1px solid var(--hairline-2);
  padding-top:clamp(2.6rem,6vh,4rem);padding-bottom:clamp(2.6rem,6vh,4rem)}
.hm-close__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center}
.hm-close__heading{font-family:var(--font-d);font-weight:500;letter-spacing:-.01em;line-height:1.1;
  font-size:clamp(2rem,1.35rem + 1.9vw,3.25rem);color:var(--text);
  max-width:17ch;text-wrap:balance;margin:.6rem 0 0}
.hm-close__action{display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem}
.hm-close__support{font-size:var(--step-0);line-height:1.55;color:var(--text-dim);max-width:32ch;margin:0}
.hm-close__email{font-family:var(--font-b);font-size:1rem;color:var(--text-mute);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;transition:color .3s,border-color .3s}
.hm-close__email:hover{color:var(--bronze);border-bottom-color:var(--bronze)}
@media (max-width:760px){
  .hm-close__grid{grid-template-columns:1fr;gap:1.6rem;align-items:start}
}
.hm-close__line{font-family:var(--font-d);font-weight:500;letter-spacing:-.01em;line-height:1.12;
  font-size:clamp(2rem,1.4rem + 3vw,3.5rem);margin:0;max-width:24ch;color:var(--text)}
.hm-routes{display:flex;flex-wrap:wrap;gap:.7rem clamp(1.6rem,4vw,2.6rem);margin:clamp(2rem,4.5vh,3rem) 0 0}
/* Two closing routes: primary (bronze) and secondary (muted); underline trims to the text */
.hm-route{font-family:var(--font-d);font-size:1.05rem;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:4px;transition:color .25s ease}
.hm-route--primary{color:var(--bronze);text-decoration-color:var(--bronze)}
.hm-route--secondary{color:var(--text-dim);text-decoration-color:rgba(183,178,167,.45)}
.hm-route--secondary:hover{color:var(--text);text-decoration-color:var(--text)}
.hm-contact{margin-top:clamp(2.6rem,6vh,4rem);display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4rem);align-items:start}
.hm-contact__intro p{font-size:1.1rem;line-height:1.6;color:var(--text-dim);max-width:44ch;margin:0}
.hm-contact__meta{display:flex;flex-direction:column;gap:.55rem;margin-top:1.6rem}
.hm-contact__meta a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--hairline);
  padding-bottom:2px;width:fit-content}
.hm-contact__meta a:hover{border-bottom-color:var(--bronze);color:var(--bronze)}

@media (max-width:720px){
  .hm-def{grid-template-columns:1fr;gap:.4rem}
  .hm-contact{grid-template-columns:1fr;gap:2.5rem}
}

/* ============================================================
   COMPLEX MIDDLE  (long-form reading page, single column)
   ============================================================ */
.cm{padding:clamp(9.75rem,10vh + 6rem,12rem) 0 clamp(4.5rem,10vh,7rem)}
.cm__h1{font-family:var(--font-d);font-weight:500;letter-spacing:-.015em;line-height:1.04;
  font-size:clamp(2.3rem,1.7rem + 2.6vw,3.5rem);color:var(--text);margin:0 0 clamp(1.6rem,4vh,2.4rem);
  max-width:16ch;text-wrap:balance}
.cm__block{margin:clamp(3rem,7vh,4.6rem) 0 0}
.cm__h2{font-family:var(--font-d);font-weight:500;line-height:1.16;letter-spacing:-.005em;
  font-size:clamp(1.42rem,1.25rem + .6vw,1.72rem);color:var(--text);margin:0 0 clamp(1rem,2.6vh,1.4rem);
  max-width:24ch}
.cm p{font-family:var(--font-b);font-size:1.075rem;line-height:1.7;color:var(--text-dim);
  margin:0 0 1.15rem;max-width:var(--hm-measure)}
.cm p:last-child{margin-bottom:0}
.cm__open p:first-child{color:var(--text)}
/* "What it costs": restrained line stack, no markers, no box */
.cm__costs{display:flex;flex-direction:column;gap:.95rem;margin:0;max-width:var(--hm-measure)}
.cm__costs p{margin:0;color:var(--text);font-size:1.12rem;line-height:1.4}
/* question / answer set reuses the homepage .hm-defs treatment */
.cm .hm-defs{margin-top:clamp(1.4rem,3vh,2rem)}
.cm .hm-routes{margin-top:clamp(1.8rem,4vh,2.6rem)}

/* ============================================================
   SERVICES — "What we look for" (the unit / the list / the triggers).
   Uses the site's existing idiom: bronze section label, hairline rows,
   bronze row numbers; colours come from tokens so the light band adapts.
   ============================================================ */
.svc-prose{max-width:62ch}
.svc-prose > p{font-size:1.12rem;line-height:1.62;color:var(--text-dim);margin:0 0 1.2rem}
.svc-prose > p:last-child{margin-bottom:0}

/* What we look for opening: statement, definition, list. No image. */
.svc-open{padding-top:clamp(8rem,16vh,11rem)}
.svc-open__statement{font-family:var(--font-d);font-weight:500;letter-spacing:-.01em;line-height:1.1;
  font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem);color:var(--text);max-width:20ch;margin:0;text-wrap:balance}
/* Definition: one step above body size, full text colour, directly under the statement. */
.svc-open__def{font-family:var(--font-d);font-weight:500;
  font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);line-height:1.45;color:var(--text);max-width:52ch;
  margin:clamp(1.6rem,3.5vh,2.4rem) 0 clamp(1.4rem,3vh,2rem)}
.svc-open .svc-prose{margin-top:clamp(1.4rem,3vh,2rem)}
/* Full-width image band between the questions and the triggers (no text on it). */
.svc-band{width:100vw;margin-left:calc(50% - 50vw);height:clamp(200px,30vh,340px);overflow:hidden}
.svc-band__img{width:100%;height:100%;object-fit:cover;object-position:center 45%;display:block;
  filter:grayscale(.25) brightness(.72)}
.svc-examples{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.65rem;max-width:60ch}
.svc-examples li{position:relative;padding-left:1.5rem;color:var(--text);line-height:1.6;font-size:var(--step-0)}
.svc-examples li::before{content:"";position:absolute;left:0;top:.72em;width:.7rem;height:1px;
  background:var(--bronze)}

.svc-list{display:grid;gap:0;max-width:74rem}
.svc-row{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(1rem,2.5vw,1.6rem);
  border-top:1px solid var(--hairline);padding:1.5rem 0}
.svc-row:first-child{border-top:0}
.svc-row__n{grid-column:1;color:var(--bronze);font-family:var(--font-d);font-weight:500;
  font-size:.95rem;padding-top:.32rem}
.svc-row__t{grid-column:2;grid-row:1;font-family:var(--font-d);font-weight:600;
  font-size:clamp(1.15rem,1rem + .5vw,1.4rem);line-height:1.25;color:var(--text);margin:0}
.svc-row__d{grid-column:2;grid-row:2;color:var(--text-dim);font-size:1.05rem;line-height:1.55;
  margin:.4rem 0 0;max-width:62ch}
/* Single-line rows (when to call us) */
.svc-row__line{grid-column:2;font-family:var(--font-d);font-weight:500;
  font-size:clamp(1.1rem,1rem + .35vw,1.32rem);line-height:1.4;color:var(--text);margin:0;max-width:60ch}
/* Deeper bronze for the small numbers on the light band (contrast on cream) */
.paper .svc-row__n{color:var(--bronze-text)}

.svc-aside{margin:clamp(1.6rem,3.5vh,2.4rem) 0 0;color:var(--text-mute);font-family:var(--font-d);
  font-size:1rem}

/* "The questions we bring": a two-column concession table. The left column is
   the obvious question (muted); the right is ours (prominent). The payoff line
   below is the only place the page says what actually arrives — so it is set
   as a small statement, not body copy. */
.qtable__intro{font-size:clamp(1.08rem,1rem + .4vw,1.25rem);line-height:1.55;color:var(--text-dim);
  max-width:60ch;margin:0 0 clamp(1.8rem,4vh,2.6rem)}
.qtable{display:grid;gap:0;max-width:80rem}
.qtable__head{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(1.5rem,4vw,3.5rem);
  padding:0 0 1rem;border-bottom:1px solid var(--hairline)}
.qtable__h{font-family:var(--font-d);font-weight:600;font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--bronze)}
.qtable__row{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(1.5rem,4vw,3.5rem);
  padding:1.35rem 0;border-top:1px solid var(--hairline)}
.qtable__row:first-of-type{border-top:0}
.qtable__usual{color:var(--text-mute);font-size:1.05rem;line-height:1.4;margin:0;min-width:0}
.qtable__ours{color:var(--text);font-family:var(--font-d);font-weight:500;min-width:0;
  font-size:clamp(1.1rem,1rem + .35vw,1.32rem);line-height:1.32;margin:0}
.qtable__tag{display:none}
.paper .qtable__h{color:var(--bronze-text)}
.qtable__payoff{max-width:58ch;margin:clamp(2.2rem,5vh,3.2rem) 0 0;
  font-family:var(--font-d);font-weight:500;color:var(--text);
  font-size:clamp(1.25rem,1.05rem + .7vw,1.7rem);line-height:1.3;text-wrap:balance}
@media (max-width:700px){
  .qtable__head{display:none}
  .qtable__row{grid-template-columns:1fr;gap:.5rem;padding:1.5rem 0}
  .qtable__tag{display:block;font-family:var(--font-d);font-weight:600;font-size:.72rem;
    letter-spacing:.08em;text-transform:uppercase;color:var(--bronze);margin:0 0 .3rem}
  .paper .qtable__tag{color:var(--bronze-text)}
}

/* ============================================================
   EDITORIAL HOMEPAGE HERO — added 2026-09-23
   Type is the hero; the braided-river photo sits behind as a ghost.
   ============================================================ */
:root{ --font-mono:ui-monospace,monospace; }

.hme{ display:flex; align-items:center; }
/* faint editorial column grid behind the type */
.hme::before{ content:""; position:absolute; inset:0 var(--gut); z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(to right, var(--hairline-2) 0 1px, transparent 1px calc(100%/6));
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent); }
.hme__inner{ position:relative; z-index:1; width:min(100% - (var(--gut) * 2), var(--maxw)); margin-inline:auto; }
.hme__meta{ display:flex; justify-content:space-between; gap:1rem; margin-bottom:clamp(1.6rem,5vh,3rem); }
.hme__tag{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); }
/* the positioning kicker: brighter and larger so it reads as the who-it-is-for line */
.hme__tag--lead{ color:var(--bronze); font-size:clamp(.82rem,.74rem + .4vw,1rem); letter-spacing:.12em; }
.hme__unit{ white-space:normal; }
/* Plain, uniform, large: no brackets or accent. Sized big but so the second
   line ("don't always deliver.") still holds on one line on desktop. */
.hme__h1{ font-family:var(--font-d); font-weight:500; letter-spacing:-.025em; line-height:.94;
  font-size:clamp(2.8rem,1rem + 7vw,6.9rem); margin:0; color:var(--text); }
/* eyebrow: sentence case in the display face, bronze, easy to read */
.hme__eyebrow{ font-family:var(--font-d); font-weight:500; color:var(--bronze); letter-spacing:0;
  font-size:clamp(1rem,.94rem + .4vw,1.28rem); line-height:1.55; margin:0 0 clamp(1.4rem,4.5vh,2.6rem); max-width:38ch; }
/* lede + button stacked on the left, so the eye does not jump across the page */
.hme__foot{ display:flex; flex-direction:column; align-items:flex-start; gap:1.5rem;
  margin-top:clamp(2rem,5vh,3.2rem); }
.hme__lede{ font-family:var(--font-d); font-weight:400; font-size:clamp(1.05rem,1rem + .5vw,1.5rem);
  line-height:1.6; color:var(--text-dim); max-width:46ch; margin:0; }

/* ghost photo carried to the next section instead of the hero */
#the-complex-middle{ position:relative; overflow:hidden; }
.hme-ghost{ position:absolute; inset:0; z-index:0; grid-column:1 / -1; pointer-events:none;
  background:url("../assets/hero-home.webp") center center / cover no-repeat; opacity:.14; }
#the-complex-middle > :not(.hme-ghost){ position:relative; z-index:1; }

/* ============================================================
   HOMEPAGE EDITORIAL BUILD — t5- banner, added 2026-09-24
   New classes only, prefixed t5-. Reuses existing tokens.
   ============================================================ */

/* ---- Hero: photo lifted so the bridge reads; left stays near-black (baked gradient) ---- */
/* Muted: a dark scrim over the photo, heaviest on the left where the type sits,
   plus a touch of desaturation. The bridge still reads on the right. */
.t5-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem; flex-wrap:wrap;
  margin-bottom:clamp(1.4rem,4.5vh,2.6rem); }
.t5-meta .hme__eyebrow{ margin:0; }
.t5-loc{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-mute); white-space:nowrap; }

/* ---- Who does the work: the single closing line ---- */
.t5-who-line{ font-family:var(--font-d); font-weight:500; color:var(--text);
  font-size:clamp(1.05rem,1rem + .4vw,1.3rem); line-height:1.4; margin:1.4rem 0 0; }

/* ONE CLOSE SECTION (hero-system, 2026-10-02)
   Unified closing invitation across the site. Replaces the old
   .hsec--center close and the Why page .t8-close2 variant: same
   heading treatment, button, email line, spacing and centring on
   every page that has a close. */
.close{ position:relative; padding:clamp(5rem,3.89rem + 4.57vw,8rem) 0; text-align:center; }
.close__title{ font-family:var(--font-d); font-weight:600; font-size:var(--t-close);
  line-height:1.05; letter-spacing:-.01em; color:var(--text); margin:0 auto;
  max-width:none; text-wrap:balance; }
.paper .close__title{ color:var(--paper-ink); }
.close__cta{ margin-top:var(--space-bb); }
.close__email{ margin:clamp(1.4rem,3vh,2rem) 0 0; font-family:var(--font-d); font-weight:500; font-size:15px; letter-spacing:.01em; }
.close__email a{ color:var(--text-dim); text-decoration:none; transition:color .3s; }
.close__email a:hover{ color:var(--bronze); }
.close__email a:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; }

/* ============================================================
   HOMEPAGE EDITORIAL COHERENCE — t5- banner, added 2026-09-24
   Applies the hero's editorial treatment to the rest of the page
   (ui-ux-pro-max: weight-hierarchy, whitespace-balance, contrast).
   ============================================================ */

/* Section eyebrows: match the hero eyebrow — sentence case, Medium (500),
   bronze, no uppercase (weight-hierarchy + consistency). */
.hm-h2{ text-transform:none; letter-spacing:0; font-weight:500;
  font-size:clamp(.95rem,.9rem + .3vw,1.15rem); }

/* Distinction between scrolls: a hairline at the top of each major section
   (whitespace-balance). Symptoms stay grouped under "how the distance shows up". */
#the-problem{ border-top:1px solid var(--hairline); }


/* ============================================================
   FOOTER (ft2, added 2026-09-25) — replaces .footer on every page.
   Cream band, four columns: page links, dot map of Aotearoa,
   email pill + phone, LinkedIn + utility links.
   ============================================================ */
.ft2{background:var(--paper);color:var(--paper-ink);padding:clamp(3rem,6vw,4.5rem) clamp(16px,5vw,4rem) 2rem}
.ft2__grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1.4fr 1.2fr 1fr;gap:2.5rem}
.ft2__h{font-family:var(--font-b,Inter),system-ui,sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-ink);margin:0 0 1.3rem}
.ft2__h--gap{margin-top:2.2rem}
.ft2 ul{list-style:none;margin:0;padding:0}
.ft2__brand{display:inline-flex;align-items:center;gap:.75rem;margin:0 0 1.5rem;color:var(--paper-ink)}
.ft2__mark{height:40px;overflow:hidden;flex:none}
.ft2__mark img{height:58px;width:auto;display:block;mix-blend-mode:multiply}
.ft2__word{display:flex;flex-direction:column;font-family:var(--font-d);font-weight:600;font-size:1.2rem;line-height:1;
  letter-spacing:.2em;text-transform:uppercase}
.ft2__word i{font-style:normal;font-weight:500;font-size:.58rem;letter-spacing:.42em;margin-top:.4rem;color:#7A5A30}
.ft2__brands li,.ft2__list li{margin-bottom:.7rem;font-size:.98rem;line-height:1.4;color:var(--paper-ink)}
.ft2__brands b{font-weight:700}
.ft2 a{color:inherit;text-decoration:none;transition:color .3s var(--ease)}
.ft2 a:hover{color:#7A5A30}
.ft2__map{width:100%;max-width:200px;height:auto;display:block}
.ft2__map circle{fill:#A8A194}
.ft2__social{display:flex;gap:1rem;margin-bottom:1.4rem}
.ft2__copy{text-align:center;margin:3.2rem 0 0;font-size:.875rem;color:var(--paper-dim)}
.ft2 a:focus-visible{outline:2px solid #9A7A54;outline-offset:3px}
@media (max-width:900px){.ft2__grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.ft2__grid{grid-template-columns:1fr}}

/* ============================================================
   HOMEPAGE TYPE SCALE (design-taste pass, 2026-09-25)
   The four section statements had drifted to four sizes (48/60/38/49px).
   One statement size now, so the hero is the only step above it and the
   What-we've-found findings are the only step below.
   ============================================================ */
.s3d__head,.hm-close__heading{
  font-size:clamp(2rem,1.35rem + 1.9vw,3.25rem);line-height:1.08;letter-spacing:-.012em}
/* One action rule (design-taste pass): the sand button is only for starting a
   conversation, and carries no arrow. Links that take you to read more are
   text links with an arrow that nudges on hover. */
.tlink{display:inline-flex;align-items:baseline;gap:.45em;font-family:var(--font-d);font-weight:500;
  font-size:1.05rem;color:var(--text);text-decoration:underline;text-decoration-color:var(--bronze);
  text-decoration-thickness:1px;text-underline-offset:.35em;transition:color .3s var(--ease)}
.tlink:hover{color:var(--bronze)}
.paper .tlink:hover{color:#7A5A30}
.tlink__arrow{display:inline-block;text-decoration:none;transition:transform .45s var(--ease)}
.tlink:hover .tlink__arrow{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.tlink:hover .tlink__arrow{transform:none}}

.s3d__cta .tlink{font-size:1.1rem}

/* ============================================================
   INTERACTION POLISH (design-engineering pass, 2026-09-25)
   Hover and press are seen tens of times a visit: keep them short,
   property-specific and on strong ease-out. Press gives feedback.
   Hover motion only where a real pointer exists.
   ============================================================ */
:root{--ease-out:cubic-bezier(.23,1,.32,1)}

/* Text links and the arrow nudge: quicker, and the link presses too */
.tlink{transition:color .2s ease}
.tlink__arrow{transition:transform .2s var(--ease-out)}
.tlink:active .tlink__arrow{transform:translateX(2px)}

/* Nav: colour 200ms; underline draws on ease-out; the scrolled bar only
   fades its background (padding no longer animates, it is a layout property) */
.nav{transition:background-color .35s ease}
.nav.is-scrolled{padding-top:1.05rem;padding-bottom:1.05rem}
.nav__links a{transition:color .2s ease}
.nav__links a:not(.nav__cta)::after{transition:transform .28s var(--ease-out)}
.nav__cta::before{transition:transform .3s var(--ease-out)}

/* Portraits: a short lift on hover */
.hm-face__photo{transition:transform .25s var(--ease-out),border-color .2s ease}
.hm-face:active .hm-face__photo{transform:scale(.98)}

/* Mobile menu: opens at a considered pace, closes fast (the system responding);
   all five links stagger, not four */
.menu{transition:clip-path .38s var(--ease-out)}
.menu.is-open{transition:clip-path .6s var(--ease-out)}
.menu.is-open .menu__links a{transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.menu.is-open .menu__links a:nth-child(1){transition-delay:.12s}
.menu.is-open .menu__links a:nth-child(2){transition-delay:.17s}
.menu.is-open .menu__links a:nth-child(3){transition-delay:.22s}
.menu.is-open .menu__links a:nth-child(4){transition-delay:.27s}
.menu.is-open .menu__links a:nth-child(5){transition-delay:.32s}

/* Touch screens fire hover on tap: no hover movement there */
@media (hover:none){
  .hm-face:hover .hm-face__photo,
  .tlink:hover .tlink__arrow{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .btn:active,.hm-face:active .hm-face__photo{transform:none}
  .menu,.menu.is-open{transition:opacity .2s ease}
  .menu.is-open .menu__links a{transition:opacity .2s ease;transform:none}
}

/* Who does the work: heading now sits inside the left column; the column's own
   gap spaces it, so drop the heading's standalone bottom margin. */
.hm-who__copy .hm-who__head{margin:0}
/* Who does the work: the portraits fill and balance the right-hand column
   (was a narrow auto column pinned beside the copy). */
@media (min-width:761px){
  .hm-who{max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem)}
  .hm-who__people{justify-content:space-evenly;gap:clamp(1.5rem,3vw,3rem)}
  .hm-face__photo{width:clamp(150px,15vw,230px)}
  .hm-face__name{font-size:1.05rem}
}

/* ============================================================
   WHY DECISIONS DON'T DELIVER: split editorial layout (2026-09-25)
   After the Dalberg Catalyst reference, in Tuumata's palette. Full-bleed
   photo hero fading into ink; alternating half-and-half rows (text + real
   photograph); a photo with an overlapping bronze card; a display heading
   for What it costs. Thin vertical rule beside each text block with a
   segment that tracks reading progress (js/why.js). All photos are
   Greer's own, graded to match the site.
   ============================================================ */
.wy{--wy-ink:#0C0F13;--wy-char:#13171C}
.wy-label{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(1.15rem,1rem + .35vw,1.35rem);letter-spacing:.005em;color:var(--bronze);margin:0 0 1rem}

/* Hero */
.wy-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--wy-ink)}
.wy-hero__media{position:absolute;inset:0}
.wy-hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.wy-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,15,19,.6) 0%,rgba(12,15,19,.08) 26%,rgba(12,15,19,.2) 55%,rgba(12,15,19,.85) 82%,var(--wy-ink) 100%)}
.wy-hero__inner{position:relative;z-index:1;width:100%;padding-bottom:clamp(2.5rem,9vh,6rem)}
.wy-h1{font-family:var(--font-d);font-weight:600;font-size:clamp(3rem,1.2rem + 6.4vw,7.6rem);
  line-height:.94;letter-spacing:-.028em;color:var(--text);max-width:11ch;margin:0}

/* Opening */
.wy-open{background:var(--wy-ink);padding:clamp(2rem,6vh,4rem) 0 clamp(4.5rem,11vh,8rem)}
.wy-open__p{font-family:var(--font-d);font-weight:400;font-size:clamp(1.3rem,1rem + 1.05vw,1.9rem);
  line-height:1.45;color:var(--text-dim);max-width:46ch;margin:0}
.wy-open__p .wd-em{color:var(--text)}

/* Split rows */
.wy-split{display:grid;grid-template-columns:1fr;background:var(--wy-char)}
.wy-split--ink{background:var(--wy-char)}
.wy-split--paper{--text:#2A2620;--text-dim:#575049;--text-mute:#7A7268;--bronze:#7A5A30;
  --hairline:rgba(42,38,32,.2);background:var(--paper);color:var(--text)}
.wy-split__media{position:relative;overflow:hidden;min-height:62vw}
.wy-split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wy-split__text{display:flex;align-items:center;padding:clamp(3rem,9vw,7rem) var(--gut)}
.wy-h2{font-family:var(--font-d);font-weight:600;font-size:clamp(1.7rem,1.15rem + 1.5vw,2.6rem);
  line-height:1.1;letter-spacing:-.012em;color:var(--text);margin:0 0 1.2rem;max-width:18ch}
.wy-p{font-size:1.02rem;line-height:1.72;color:var(--text-dim);margin:0;max-width:52ch}
.wy-p .wd-em{color:var(--text)}
.wy-lead{font-family:var(--font-d);font-size:clamp(1.12rem,1rem + .4vw,1.3rem);line-height:1.45;color:var(--text);margin:0 0 1.1rem;max-width:40ch}
@media (min-width:900px){
  .wy-split{grid-template-columns:1fr 1fr;min-height:min(94vh,880px)}
  .wy-split--text-left .wy-split__media{order:2}
  .wy-split__media{min-height:0}
  .wy-split__text{padding:clamp(4rem,9vh,7rem) clamp(2.5rem,6vw,7rem)}
}

/* The reading rule: a hairline with a segment that moves as you read */
.wy-rule{position:relative;padding-left:clamp(1.3rem,2.4vw,2.2rem);border-left:1px solid var(--hairline)}
.wy-rule__seg{position:absolute;left:-1px;top:0;width:2px;height:26%;background:var(--text);opacity:.85;
  transform:translate3d(0,0,0);will-change:transform}
@media (min-width:900px){
  .wy-split--text-right .wy-rule{border-left:0;border-right:1px solid var(--hairline);padding-left:0;padding-right:clamp(1.3rem,2.4vw,2.2rem)}
  .wy-split--text-right .wy-rule__seg{left:auto;right:-1px}
}

/* Respect: photo with an overlapping bronze card, fading into paper */
.wy-feature{position:relative;overflow:hidden;min-height:min(100vh,920px);display:flex;align-items:flex-end;
  padding:clamp(8rem,30vh,16rem) var(--gut) 0;background:var(--paper)}
.wy-feature__media{position:absolute;inset:0}
.wy-feature__media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.wy-feature::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,15,19,.35) 0%,rgba(12,15,19,0) 30%,rgba(231,225,211,0) 62%,var(--paper) 100%)}
.wy-card{position:relative;z-index:1;background:#D6A461;color:#0C0F13;width:min(100%,36rem);
  padding:clamp(2rem,4vw,3.2rem);margin-left:max(0px,calc((100vw - var(--maxw)) / 2 - var(--gut) + 3rem))}
.wy-rule--card{--hairline:rgba(12,15,19,.3);--text:#0C0F13}
.wy-card__h{font-family:var(--font-d);font-weight:600;font-size:clamp(1.6rem,1.15rem + 1.3vw,2.4rem);
  line-height:1.08;letter-spacing:-.012em;color:#0C0F13;margin:0 0 1rem}
.wy-card__h .wd-accent-deep{color:#4A3A22}
.wy-card__p{margin:0;font-size:1rem;line-height:1.68;color:rgba(12,15,19,.84)}
.wy-respect-rest{padding-top:clamp(2.5rem,6vh,4rem)}
.wy-respect-rest .wd-persp{margin-top:0}

/* What it isn't: big heading left, reading text right */
.wy-split--plain{padding:clamp(4.5rem,11vh,8rem) var(--gut);gap:clamp(1.6rem,5vw,6rem);align-items:start;border-top:1px solid var(--hairline)}
.wy-split--plain .wy-split__text{padding:0;align-items:flex-start}
.wy-h2--big{font-size:clamp(2.4rem,1.3rem + 3.4vw,4.8rem);line-height:1;letter-spacing:-.025em;max-width:10ch;margin:0}
@media (min-width:900px){
  .wy-split--plain{min-height:0;padding-left:max(var(--gut),calc((100% - var(--maxw)) / 2));padding-right:max(var(--gut),calc((100% - var(--maxw)) / 2))}
}

/* What it costs: display heading in bronze */
.wy-costs{background:var(--wy-ink);padding:clamp(5rem,12vh,9rem) 0 clamp(4rem,10vh,7rem)}
.wy-display{font-family:var(--font-d);font-weight:600;font-size:clamp(2.4rem,1.2rem + 4vw,5.6rem);
  line-height:1;letter-spacing:-.028em;color:var(--bronze);max-width:17ch;margin:0 0 clamp(2.5rem,6vh,4rem)}

/* Motion: headings rise out of a mask once, on view (js adds .wy-js); reduced motion = none */
.wy-js [data-wy-rise].is-in{opacity:1;transform:none;
  transition:opacity .9s cubic-bezier(.23,1,.32,1),transform 1.1s cubic-bezier(.23,1,.32,1)}
@media (prefers-reduced-motion:reduce){
  .wy-rule__seg{display:none}
}
.wy-hero__inner{padding-left:max(var(--gut),calc((100% - var(--maxw)) / 2));padding-right:max(var(--gut),calc((100% - var(--maxw)) / 2));margin:0;max-width:none}
.wy-hero::after{background:linear-gradient(180deg,rgba(12,15,19,.6) 0%,rgba(12,15,19,.08) 24%,rgba(12,15,19,.3) 48%,rgba(12,15,19,.88) 78%,var(--wy-ink) 100%)}

/* ============================================================
   WHAT WE'VE FOUND: proof horizon (2026-09-25), built to
   _design/tuumata-proof-horizon-mockup.html. Each row is an icon column
   and a text column meeting on one horizon line. Above it: stage tag and
   the ask. Below it: the finding. The doorway crosses the line: top in
   --text-mute, legs below in --bronze. The part below the line fades up
   ~220ms after the row enters view, once (script in index.html).
   ============================================================ */

/* Scrolled top bar is solid ink with a crisp edge (2026-09-25). The old
   translucent bar blurred content beneath it and faded at its lower edge,
   so text scrolling under it showed as smeared duplicate copies. */
.nav.is-scrolled{background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none;
  -webkit-mask-image:none;mask-image:none}




/* ============================================================
   HORIZON BAND (2026-09-25), from _design/tuumata-horizon-mockup.html.
   Sits at the foot of Three doors: paper above the line, ink below. The
   band's background changes at 60% of its height, exactly where each
   doorway's clip changes from ink stroke to bronze stroke, so every door
   inverts as it crosses. One doorway centred under each door column.
   ============================================================ */
#the-problem{padding-bottom:0}
.hz-band{grid-column:full-start / full-end;margin-top:72px;
  background:linear-gradient(to bottom,var(--paper) 0 60%,var(--ink) 60% 100%)}
.hz-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.6rem,3vw,3rem);
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.hz-door{display:block;width:100%;height:clamp(140px,20vw,300px)}
.hz-shape{transform-box:fill-box;transform-origin:center bottom}
.hz-js .hz-shape{opacity:0;transform:translateY(22px)}
.hz-js .hz-band.in .hz-shape{opacity:1;transform:none;transition:transform 900ms cubic-bezier(.22,1,.36,1),opacity 900ms cubic-bezier(.22,1,.36,1)}
.hz-js .hz-band.in .hz-door:nth-child(2) .hz-shape{transition-delay:120ms}
.hz-js .hz-band.in .hz-door:nth-child(3) .hz-shape{transition-delay:240ms}
@media (prefers-reduced-motion:reduce){.hz-js .hz-shape{opacity:1;transform:none;transition:none}}
.hz-row{width:min(100% - 2 * var(--gut),var(--maxw));max-width:none;padding-inline:0}
@media (max-width:899.98px){ .s3d__doors + .hz-band{margin-top:48px} }
/* Each doorway area is square (max 300px), so the band's height always equals
   the drawing's height and the colour change lands exactly on the line (y=180/300). */
.hz-door{width:100%;max-width:300px;height:auto;aspect-ratio:1 / 1;margin-inline:auto}

/* ============================================================
   BUTTONS — one treatment for the whole site (one-button, 2026-10-02).
   Two kinds only: Primary (solid sand) and Tonal (accent outline, clear
   fill). Poppins 500, 15px, sentence case; 52px min height; 0 28px
   padding; 2px corners; no arrow. A scale(.97) press on :active. Hover
   colour changes apply only under a real pointer (@media hover:hover) so
   a tap on a phone never leaves a button stuck in its hover state. The
   focus ring uses the accent that reads on the section: --bronze on dark,
   --bronze-text on paper (sand on paper is too faint).
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-d);font-weight:500;font-size:15px;line-height:1.2;
  letter-spacing:.005em;text-transform:none;white-space:nowrap;text-decoration:none;
  min-height:52px;padding:0 28px;border-radius:2px;border:0;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,
    transform .16s cubic-bezier(.23,1,.32,1)}
.btn .btn__label{text-decoration:none}
.btn:active{transform:scale(.97)}

/* Primary: solid sand, dark text — the same on dark and on paper. The
   doubled class in paper/cream contexts beats paper link-colour rules
   (such as .paper .legal a), so the ink label is never recoloured. */
.btn--solid{background:#D6A461;color:#0C0F13}
.paper .btn.btn--solid,.on-paper .btn.btn--solid,.ft2 .btn.btn--solid{color:#0C0F13}
/* Tonal: accent outline, transparent fill — dark by default */
.btn--tonal{background:transparent;border:1px solid var(--bronze);color:var(--bronze)}
/* Tonal on paper (the footer email, and any paper/cream section).
   Literal #7A5A30 is --bronze-text's value: that token is only defined
   inside .paper, and the footer .ft2 is paper but not a .paper element. */
.paper .btn--tonal,.on-paper .btn--tonal,.ft2 .btn--tonal{
  border-color:#7A5A30;color:#7A5A30}

/* Hover colour only where a real pointer exists */
@media (hover:hover){
  .btn--solid:hover{background:var(--btn-hover);color:#0C0F13}
  .btn--tonal:hover{background:rgba(214,164,97,.10)}
  .paper .btn--tonal:hover,.on-paper .btn--tonal:hover,.ft2 .btn--tonal:hover{
    background:rgba(122,90,48,.10)}
}

/* Focus ring: accent that reads on the section behind it */
.btn:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.paper .btn:focus-visible,.on-paper .btn:focus-visible,.ft2 .btn:focus-visible{
  outline-color:#7A5A30}

/* Footer email: the address is the whole button; keep it inside the column */
.ft2__email{max-width:100%}

@media (prefers-reduced-motion:reduce){ .btn:active{transform:none} }


/* Week figure (shared) */
.t9-week{ max-width:1000px; margin:48px 0; padding:0; }
.t9-week__row{ display:grid; grid-template-columns:160px minmax(0,1fr); align-items:center; height:26px; }
.t9-week__day{ font-family:var(--font-d); font-weight:400; font-size:15px; color:var(--text-mute); }
.t9-week__bar{ position:relative; height:14px; background:#20262E; }
@media (max-width:699.98px){ .t9-week__bar{ height:10px; } }
.t9-week__fill{ display:block; height:100%; width:calc(var(--len) + 45px);
  background:linear-gradient(90deg, var(--bronze) 0, var(--bronze) calc(100% - 90px), rgba(214,164,97,0) 100%);
  clip-path:inset(0 100% 0 0); transition:clip-path .9s var(--ease); }
.t9-week.is-in .t9-week__fill{ clip-path:inset(0 0 0 0); }
.t9-week__row:nth-child(1) .t9-week__fill{ transition-delay:0ms; }
.t9-week__row:nth-child(2) .t9-week__fill{ transition-delay:90ms; }
.t9-week__row:nth-child(3) .t9-week__fill{ transition-delay:180ms; }
.t9-week__row:nth-child(4) .t9-week__fill{ transition-delay:270ms; }
.t9-week__row:nth-child(5) .t9-week__fill{ transition-delay:360ms; }
.t9-week__cap{ margin:20px 0 0; padding-left:56px; font-family:var(--font-d); font-weight:400; font-size:15px;
  line-height:1.5; color:var(--text-dim); }
@media (max-width:699.98px){ .t9-week__row{ grid-template-columns:1fr; height:auto; row-gap:3px; align-items:start; margin-bottom:12px; } .t9-week__cap{ padding-left:0; } }
@media (prefers-reduced-motion:reduce){ .t9-week__fill{ transition:none; } }

/* Homepage v5 sections */
.hv5{ padding:clamp(5rem,3.89rem + 4.57vw,8rem) 0; }
.hv5--paper{ background:var(--paper); }
.hv5--follow{ padding-top:clamp(2.4rem,4vh,3.4rem); }
.hv5__rule{ border-top:1px solid var(--hairline); }
.hv5--paper .eyebrow{ color:#7A5A30; }
.hv5--paper .eyebrow::after{ background:#7A5A30; }
.hv5-h2{ color:var(--text); margin:.9rem 0 0; }   /* size: .h2-section */
.hv5-h2--paper{ color:var(--paper-ink); }
/* "What we do" H2 to the shared 553px measure (matches the inner-page H2s). */

/* ============================================================
   WHEREVER YOU'RE STARTING — intro strip (starting-strip, 2026-10-01)
   A compact dark strip under the hero: a light heading in the hero-rail
   position and four "label + one line" columns in the main column. One
   hairline on top, tight padding. The rail track matches the hero rail so
   the heading lines up. 4-up >=1024px, 2-up 640-1023px, stacked below 640.
   ============================================================ */
/* ---- Horizon stages: four stages on one line (horizon-stages, 2026-10-01) ---- */
.icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.hzicon{ display:block; fill:none; stroke:currentColor; stroke-width:6; stroke-linecap:butt; stroke-linejoin:miter; color:var(--bronze); }

.strip{ background:var(--ink); border-top:1px solid rgba(245,242,235,.12); padding:clamp(5rem,3.89rem + 4.57vw,8rem) 0; }
.horizon__head{ color:var(--text); margin:0; }   /* size: .h2-section */

/* icon row / horizon line / text row (mobile-first: below 768) */
.horizon__icons{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; align-items:end; }
.hzicon--lg{ width:100%; height:78px; stroke-width:4; }
.horizon__line{ height:2px; width:100%; margin-top:-2px; transform-origin:left center;
  background:linear-gradient(90deg, var(--bronze), var(--bronze) 80%, transparent); }
.horizon__text{ display:grid; grid-template-columns:1fr; gap:26px; margin-top:28px; }
.horizon__num{ font-family:var(--font-d); font-weight:600; font-size:12px; letter-spacing:.14em; color:var(--bronze); margin:0 0 10px; }
.horizon__name{ font-family:var(--font-d); font-weight:500; font-size:21px; line-height:1.2; color:var(--text); margin:0 0 10px; }
.horizon__sentence{ font-family:var(--font-b); font-weight:400; font-size:16px; line-height:1.6; color:var(--text-dim); margin:0; max-width:40ch; }

/* tablet 768 to 1023 */
@media (min-width:768px){
  .horizon__icons{ gap:24px; }
  .hzicon--lg{ width:88px; height:97px; }
  .horizon__text{ grid-template-columns:repeat(4,1fr); gap:24px; }
}
/* desktop 1024 and up */
@media (min-width:1024px){
  .horizon__icons{ gap:40px; }
  .hzicon--lg{ width:120px; height:132px; }
  .horizon__text{ gap:40px; }
  .horizon__name{ font-size:24px; }
  .horizon__sentence{ font-size:17px; }
}

/* Motion: CSS default (no JS / reduced motion) is the finished state.
   JS adds .horizon--ready (hidden start) then .horizon--in on scroll (once). */
/* The horizon line draws first (0.6s), then each icon pops up from behind
   the horizon, starting edge-on (a sliver of line) and turning face-on on its vertical axis as it rises,
   overshoots slightly and settles. Left to right, 1.1s each staggered 0.15s.
   The clip hides anything below the line so the icons emerge from it.
   The text columns fade in with their icon. Runs once. (2026-10-06) */
.horizon--ready .horizon__line{ transform:scaleX(0); transition:transform .6s ease-out; }
.horizon--ready.horizon--in .horizon__line{ transform:scaleX(1); }
.horizon--ready .horizon__icon{ clip-path:inset(-40% -40% 0 -40%); perspective:600px; }
.horizon--ready .hzicon{ transform:translateY(110%) rotateY(90deg); transform-origin:50% 100%; backface-visibility:visible; }
.horizon--ready.horizon--in .horizon__icon .hzicon{ animation:hz-rise 1.1s cubic-bezier(.22,.8,.3,1) both; }
@keyframes hz-rise{
  0%  { transform:translateY(110%) rotateY(90deg); }
  55% { transform:translateY(-9%) rotateY(320deg); }
  78% { transform:translateY(2%) rotateY(352deg); }
  100%{ transform:translateY(0) rotateY(360deg); }
}
.horizon--ready .horizon__col{ opacity:0; transform:translateY(12px); transition:opacity .55s ease, transform .55s ease; }
.horizon--ready.horizon--in .horizon__col{ opacity:1; transform:translateY(0); }
.horizon--ready.horizon--in .horizon__icon:nth-child(1) .hzicon{ animation-delay:.60s; }
.horizon--ready.horizon--in .horizon__col:nth-child(1){ transition-delay:.60s; }
.horizon--ready.horizon--in .horizon__icon:nth-child(2) .hzicon{ animation-delay:.75s; }
.horizon--ready.horizon--in .horizon__col:nth-child(2){ transition-delay:.75s; }
.horizon--ready.horizon--in .horizon__icon:nth-child(3) .hzicon{ animation-delay:.90s; }
.horizon--ready.horizon--in .horizon__col:nth-child(3){ transition-delay:.90s; }
.horizon--ready.horizon--in .horizon__icon:nth-child(4) .hzicon{ animation-delay:1.05s; }
.horizon--ready.horizon--in .horizon__col:nth-child(4){ transition-delay:1.05s; }
@media (prefers-reduced-motion:reduce){
  .horizon--ready .horizon__line,
  .horizon--ready .horizon__icon,
  .horizon--ready .horizon__col{ transition:none !important; transform:none !important; opacity:1 !important; }
  .horizon--ready .hzicon{ animation:none !important; transform:none !important; }
  .horizon--ready .horizon__icon{ clip-path:none; }
}
.hv5-lead{ font-family:var(--font-d); font-weight:400; font-size:clamp(1.05rem,1rem + .6vw,1.4rem); line-height:1.4; color:var(--text-dim); margin:1.2rem 0 0; max-width:54ch; }
.hv5-body{ font-family:var(--font-b); font-size:var(--step-0); line-height:1.65; color:var(--text-dim); margin:1.2rem 0 0; max-width:60ch; }
.hv5-line{ font-family:var(--font-d); font-weight:500; font-size:clamp(1.15rem,1rem + .8vw,1.5rem); line-height:1.3; color:var(--text); margin:1.6rem 0 0; }
.hv5-close{ font-family:var(--font-d); font-weight:400; font-size:1.2rem; line-height:1.45; color:var(--text); margin:2rem 0 0; max-width:48ch; }
.hv5-source{ font-family:var(--font-b); font-size:0.875rem; line-height:1.55; color:var(--text-dim); margin:1rem 0 0; max-width:60ch; }
.hv5-week{ max-width:900px; }
.hv5-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.5rem); margin:48px 0 0; }
@media (max-width:759px){ .hv5-cols{ grid-template-columns:1fr; } }
.hv5-col{ border-top:1px solid var(--paper-line); padding-top:clamp(1.2rem,2.5vw,1.6rem); }
.hv5-step{ font-family:var(--font-d); font-weight:500; font-size:.95rem; letter-spacing:.01em; color:#7A5A30; margin:0; }
.hv5-col__h{ font-family:var(--font-d); font-weight:500; font-size:clamp(1.3rem,1rem + .8vw,1.6rem); line-height:1.2; color:var(--paper-ink); margin:.5rem 0 0; }
.hv5-col__p{ font-family:var(--font-b); font-size:var(--step-0); line-height:1.65; color:var(--paper-dim); margin:.8rem 0 0; }
.hv5-paper-line{ font-family:var(--font-d); font-weight:500; font-size:clamp(1.15rem,1rem + .8vw,1.5rem); line-height:1.3; color:var(--paper-ink); margin:clamp(2.4rem,5vw,3.4rem) 0 0; max-width:44ch; }
.hv5-teach{ border-top:1px solid var(--paper-line); margin-top:clamp(2.4rem,5vw,3.4rem); padding-top:clamp(1.6rem,3vw,2.2rem); max-width:760px; }
.hv5-teach p{ font-family:var(--font-b); font-size:var(--step-0); line-height:1.65; color:var(--paper-dim); margin:0; }
/* TBC placeholder for real figures (launch checklist, do not publish) */
.tbc{ font-style:italic; color:var(--bronze); }

/* What we do page */
.wd-h2{ font-family:var(--font-d); font-weight:500; font-size:var(--t-h2); line-height:1.1; letter-spacing:-.02em; color:var(--text); margin:.7rem 0 0; max-width:18ch; }
/* Service blocks: stabilise / mature / lead (what-we-do-page, 2026-10-01) */
.wds__forwhen{ font-family:var(--font-b); font-size:var(--t-body); line-height:1.6; color:var(--text-dim); margin:1.6rem 0 0; max-width:62ch; }
.wds__body{ font-family:var(--font-b); font-size:var(--t-body); line-height:1.65; color:var(--text-dim); margin:1.4rem 0 0; max-width:62ch; }
.wds__result{ margin:1.9rem 0 0; }
.wds__result .eyebrow{ margin-bottom:.8rem; }
.wds__body--result{ margin:0; }
.wds__extra{ font-family:var(--font-b); font-size:var(--t-body); line-height:1.6; color:var(--text-dim); margin:2rem 0 0; max-width:62ch; }
.wds__which{ font-family:var(--font-d); font-weight:500; font-size:1.35rem; line-height:1.3; color:var(--text); margin:5rem 0 0; }
.wds-lead-sec{ padding-bottom:2.5rem; }
.wd-cols{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); margin:clamp(2rem,4vw,3rem) 0 0; }
.wd-cols--3{ grid-template-columns:repeat(3,1fr); }
.wd-cols--2{ grid-template-columns:repeat(2,1fr); }
.wd-cols--holds{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .wd-cols--3{ grid-template-columns:1fr; } }
@media (max-width:759px){ .wd-cols--2, .wd-cols--holds{ grid-template-columns:1fr; } }
.wd-col{ border-top:1px solid var(--hairline); padding-top:clamp(1.1rem,2.5vw,1.5rem); }
.wd-col__h{ font-family:var(--font-d); font-weight:500; font-size:clamp(1.2rem,1rem + .6vw,1.5rem); line-height:1.22; color:var(--text); margin:0; }
.wd-col__p{ font-family:var(--font-b); font-size:var(--step-0); line-height:1.65; color:var(--text-dim); margin:.7rem 0 0; }
.wd-stages{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.2rem,2.5vw,2rem); margin:clamp(1.4rem,3vw,2rem) 0 0; }
@media (max-width:759px){ .wd-stages{ grid-template-columns:1fr 1fr; } }
.wd-stage{ border-top:1px solid var(--hairline); padding-top:1rem; }
.wd-stage__n{ font-family:var(--font-d); font-weight:500; font-size:.9rem; color:var(--bronze); margin:0; }
.paper .wd-stage__n{ color:var(--bronze-text); }
.wd-stage__h{ font-family:var(--font-d); font-weight:500; font-size:1.15rem; color:var(--text); margin:.3rem 0 0; }
.wd-stage__p{ font-family:var(--font-b); font-size:var(--step-0); line-height:1.6; color:var(--text-dim); margin:.5rem 0 0; }
.paper .tbc{ color:#7A5A30; }

/* How we work additions (prompt 4) */
.hww-starts{ grid-template-columns:repeat(3,1fr); }
@media (max-width:759px){ .hww-starts{ grid-template-columns:1fr; } }
.wd-col__p strong{ font-family:var(--font-d); font-weight:500; color:var(--text); }

/* Homepage paper line, tight follow variant */
.hv5-paper-line--tight{ margin-top:clamp(1rem,2vw,1.4rem); }

/* ============================================================
   HOMEPAGE HERO — capacity-and-hero (prompt 13), 2026-09-30
   Two-column editorial hero: a left rail (bronze rule + audience
   line) beside a big Poppins headline, over a darker black-and-
   white photo. Scoped to .hme; overrides the earlier hero rules
   by source order. index.html only uses these classes.
   ============================================================ */

/* Shared rail — other homepage sections can reuse .hm-rail later */
.hm-rail{ display:flex; flex-direction:column; align-items:flex-start; max-width:26ch; }
.hm-rail .hme__rule{ display:block; width:32px; height:1px; background:var(--bronze); margin:0 0 14px; }
/* Break set in the markup as "For leaders of organisations / being set up,
   growing or changing." Width alone can't do it here: line 2 is wider than
   line 1 plus "being", so any width that fits line 2 also keeps "being" on
   line 1. max-width keeps both lines from over-running the rail column. */
.hm-rail .hme__eyebrow{ font-family:var(--font-d); font-weight:500; color:var(--bronze);
  font-size:15px; line-height:1.5; letter-spacing:0; text-transform:none; max-width:26ch; margin:0; }

/* Main column + headline */
.hme__main{ min-width:0; max-width:780px; }
.hme__h1{ font-family:"Poppins",var(--font-d); font-weight:600;
  font-size:clamp(2.5rem,1.4rem + 3.9vw,4.5rem); line-height:1.04; letter-spacing:-.025em;
  color:var(--text); max-width:15ch; margin:0; }
.hme__lede{ max-width:62ch; margin-top:clamp(1.75rem,3vw,2.5rem); }

/* Actions row */
.hme__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:2rem; margin-top:2.25rem; }
.hme__link{ font-family:var(--font-d); font-size:15px; color:var(--text); text-decoration:underline;
  text-underline-offset:5px; text-decoration-thickness:1px; transition:color .3s var(--ease); }
.hme__link:hover{ color:var(--bronze); }
.hme__link:focus-visible{ outline:2px solid var(--bronze); outline-offset:4px; }

/* Single column: label, H1, lede and buttons share one left edge (no rail). */
.hme__main{ max-width:820px; }
/* Hero label is a sentence, not a section name: bronze, no line, wraps to 2 lines. */
.hero-eyebrow{ font-family:var(--font-d); font-weight:500; font-size:15px; line-height:1.4;
  color:var(--bronze); max-width:34ch; margin:0 0 28px; text-wrap:balance; }
/* Desktop: no measure cap so the positioning line sits on one line. */
@media (min-width:1024px){ .hero-eyebrow{ max-width:none; } }

/* Home hero photo now uses the shared .hero--photo layer (see the hero
   system block); #masthead supplies the image via custom properties. */

/* ============================================================
   HOMEPAGE HIDDEN COST — section 2 (2026-10-06)
   Replaces the pinned "week scroll". A reader-driven 3D graphic: five
   glass tubes on a canvas (js/hidden-cost.js) and a "How connected are
   your functions?" slider, then four points and one route. Nothing is
   scroll-linked. Only index.html uses .hc classes.
   ============================================================ */
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.hc .hv5-h2{ max-width:24ch; }
.hc .hv5-h2 em{ font-style:normal; color:var(--bronze); }
.hc__sub{ color:var(--text-dim); max-width:58ch; }

.hc__fig{ display:none; margin:clamp(36px,6vw,64px) 0 0; border:1px solid rgba(245,242,235,.14); border-radius:10px; overflow:hidden;
  background:radial-gradient(70% 60% at 50% 38%, #1d242d 0%, #12171d 45%, #0D1115 100%);
  padding:clamp(8px,2vw,20px) clamp(12px,3vw,40px) clamp(24px,3vw,36px); justify-items:center; }
.hc__fig.is-live{ display:grid; }
.hc__stage{ width:min(100%,820px); position:relative; }
.hc__stage canvas{ display:block; width:100%; height:auto; touch-action:pan-y; }

.hc__ctl{ width:min(100%,460px); margin-top:clamp(6px,1.5vw,14px); }
.hc__q{ display:block; text-align:center; font-family:var(--font-d); font-size:13px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bronze); }
.hc__range{ -webkit-appearance:none; appearance:none; width:100%; height:30px; background:transparent; margin-top:8px; cursor:pointer; }
.hc__range::-webkit-slider-runnable-track{ height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--bronze) var(--pct,0%),rgba(245,242,235,.25) var(--pct,0%)); }
.hc__range::-moz-range-track{ height:3px; border-radius:2px; background:rgba(245,242,235,.25); }
.hc__range::-moz-range-progress{ height:3px; background:var(--bronze); }
.hc__range::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; border-radius:50%; border:0;
  background:radial-gradient(circle at 35% 30%,#F3DDB5,#D6A461 55%,#9A7A54);
  box-shadow:0 6px 14px rgba(0,0,0,.45),0 0 0 1px rgba(255,240,215,.25); margin-top:-11.5px; transition:transform .15s; }
.hc__range::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; border:0;
  background:radial-gradient(circle at 35% 30%,#F3DDB5,#D6A461 55%,#9A7A54); box-shadow:0 6px 14px rgba(0,0,0,.45); }
.hc__range:active::-webkit-slider-thumb{ transform:scale(1.12); }
.hc__range:focus-visible{ outline:none; }
.hc__range:focus-visible::-webkit-slider-thumb{ box-shadow:0 6px 14px rgba(0,0,0,.45),0 0 0 6px rgba(214,164,97,.3); }
.hc__ends{ display:flex; justify-content:space-between; margin-top:2px; font-family:var(--font-d); font-size:12px;
  font-weight:500; letter-spacing:.08em; color:var(--text-mute); }
.hc__state{ margin:clamp(18px,3vw,26px) 0 0; text-align:center; font-family:var(--font-d); font-weight:500;
  font-size:clamp(17px,1.6vw,20px); color:var(--text); min-height:1.5em; }
.hc__state b{ font-weight:500; color:var(--bronze); }
.hc__hint{ margin:8px 0 0; text-align:center; font-size:13px; color:var(--text-mute); transition:opacity .4s; }

.hc__pts{ list-style:none; margin:clamp(48px,7vw,80px) 0 0; padding:32px 0 0; border-top:1px solid rgba(245,242,235,.14);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,3vw,40px); }
.hc__pts li{ display:flex; flex-direction:column; gap:12px; }
.hc__n{ font-family:var(--font-d); font-size:13px; font-weight:500; color:var(--bronze); letter-spacing:.12em; }
.hc__k{ font-family:var(--font-d); font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--text-mute); }
.hc__t{ margin:0; font-family:var(--font-b); font-size:var(--t-body,17px); line-height:1.6; color:var(--text-dim); }
.hc__t--lead{ font-family:var(--font-d); font-weight:500; font-size:clamp(20px,1.9vw,24px); line-height:1.3; color:var(--text); }
.hc__link{ margin-top:clamp(40px,6vw,64px); }
@media (max-width:899.98px){ .hc__pts{ grid-template-columns:1fr 1fr; } }
@media (max-width:639.98px){ .hc__pts{ grid-template-columns:1fr; gap:28px; } }

/* ============================================================
   SECTION LABELS — unified (accent-bright, 2026-09-30)
   Every section label matches the hero rail: a 32x1px line in the
   label's colour, a 12px gap, then Jost 500 16px sentence-case text,
   and 1rem below it to the heading. Bronze on dark, --bronze-text on
   paper (handled by the .paper overrides above). One shared rule so
   labels can't drift. The hero rail (.hm-rail) keeps its own layout.
   Page-specific label classes are pointed at this same style.
   ============================================================ */
.eyebrow, .ph-eyebrow, .hsec__label,
.t10-eyebrow2, .contact-eyebrow, .hm-h2{
  display:flex; align-items:center; gap:16px; margin-bottom:28px;
  font-family:var(--font-d); font-weight:500; font-size:15px; line-height:1.4;
  letter-spacing:0; text-transform:none; color:var(--bronze);
}
.eyebrow::after, .ph-eyebrow::after, .hsec__label::after,
.t10-eyebrow2::after, .contact-eyebrow::after, .hm-h2::after{
  content:""; flex:0 0 64px; width:64px; height:1px; background:var(--bronze); opacity:.7;
  transform-origin:left center;
}
.paper .eyebrow, .paper .ph-eyebrow, .paper .hsec__label,
.paper .t10-eyebrow2, .paper .contact-eyebrow, .paper .hm-h2,
.on-paper .eyebrow{ color:var(--bronze-text); }
.paper .eyebrow::after, .paper .ph-eyebrow::after, .paper .hsec__label::after,
.paper .t10-eyebrow2::after, .paper .contact-eyebrow::after, .paper .hm-h2::after,
.on-paper .eyebrow::after{ background:var(--bronze-text); }
/* Hairline draws left to right on scroll into view, once; instant with no JS
   or reduced motion (default state below is the drawn-in line). */
.lbl-js .eyebrow::after, .lbl-js .ph-eyebrow::after, .lbl-js .hsec__label::after,
.lbl-js .t10-eyebrow2::after, .lbl-js .contact-eyebrow::after, .lbl-js .hm-h2::after{
  transform:scaleX(0); transition:transform .7s var(--ease);
}
.lbl-js .eyebrow.in::after, .lbl-js .ph-eyebrow.in::after, .lbl-js .hsec__label.in::after,
.lbl-js .t10-eyebrow2.in::after, .lbl-js .contact-eyebrow.in::after, .lbl-js .hm-h2.in::after{
  transform:scaleX(1);
}
@media (prefers-reduced-motion:reduce){
  .lbl-js .eyebrow::after, .lbl-js .ph-eyebrow::after, .lbl-js .hsec__label::after,
  .lbl-js .t10-eyebrow2::after, .lbl-js .contact-eyebrow::after, .lbl-js .hm-h2::after{
    transform:scaleX(1); transition:none;
  }
}


/* ============================================================
   TYPE SYSTEM — shared scale (type-system, 2026-10-01)
   Roles: page H1, 7+ number, statement, section H2, closing, H3,
   intro, pull, body, small meta. Desktop / mobile(390) via clamp.
   Page-specific headings (t8-*, t10-*) are sized in each page's
   own <style>; these cover the homepage and shared classes.
   ============================================================ */
:root{
  --t-h1: clamp(2.5rem, 1.57rem + 3.81vw, 5rem);         /* 40 -> 80 */
  --t-num: clamp(5rem, 3.89rem + 4.57vw, 8rem);          /* 80 -> 128 */
  --t-stmt: clamp(1.875rem, 1.55rem + 1.33vw, 2.75rem);  /* 30 -> 44 */
  --t-sig: clamp(2.5rem, 1.76rem + 3.05vw, 4.5rem);      /* 40 -> 72 signature */
  --t-h2: clamp(2rem, 1.63rem + 1.52vw, 3rem);           /* 32 -> 48 */
  --t-close: clamp(2.125rem, 1.61rem + 2.1vw, 3.5rem);   /* 34 -> 56 */
  --t-h3: clamp(1.3125rem, 1.24rem + .29vw, 1.5rem);     /* 21 -> 24 */
  --t-intro: clamp(1.125rem, 1.08rem + .19vw, 1.25rem);  /* 18 -> 20 */
  --t-pull: clamp(1.25rem, 1.11rem + .57vw, 1.625rem);   /* 20 -> 26 */
  --t-body: clamp(1.0625rem, 1.04rem + .1vw, 1.125rem);  /* 17 -> 18 */
}
/* Page H1 */
.hme__h1{ font-family:var(--font-d); font-weight:600; font-size:var(--t-h1);
  line-height:1.0; letter-spacing:-.03em; color:var(--text); max-width:none; margin:0; text-wrap:balance; }
/* Signature statement: the one standout line on a page (keeps its own colour). */
.t-signature{ font-family:var(--font-d); font-weight:600; font-size:var(--t-sig);
  line-height:1.05; letter-spacing:-.02em; }
/* Section H2s */
/* .hsec__title is a section H2 (How we work, Insights). The closing
   invitation has its own component now (.close__title). */
.hsec__title{ font-family:var(--font-d); font-weight:500; font-size:var(--t-h2);
  line-height:1.1; letter-spacing:-.02em; max-width:18ch; }
/* H3 / card names */
.hv5-col__h{ font-family:var(--font-d); font-weight:500; font-size:var(--t-h3); line-height:1.25; }
/* Intro paragraphs */
.hme__lede, .hsec__intro{ font-family:var(--font-d); font-weight:400; font-size:var(--t-intro);
  line-height:1.6; max-width:600px; }
/* Pull lines */
.hv5-paper-line{ font-family:var(--font-d); font-weight:500;
  font-size:var(--t-pull); line-height:1.3; }
/* Body (homepage paragraphs) */
.hv5-col__p, .hm-who__statement{ font-family:var(--font-b);
  font-weight:400; font-size:var(--t-body); line-height:1.65; }
.hm-who__statement{ max-width:60ch; }
/* Small meta */
.hv5-step{ font-family:var(--font-d); font-weight:500; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; line-height:1.4; }
.hv5-num{ font-family:var(--font-d); font-weight:600; font-size:40px; line-height:1;
  color:#7A5A30; margin:0 0 .35rem; }

/* ---- Phase 2 spacing fixups (type-system, 2026-10-01) ---- */


/* ---- Shared spacing tokens (type-system, 2026-10-01) ----
   heading->body 24, body->button 40, column gap 48. Applied to the shared and
   homepage classes so intra-section rhythm can't drift. */
:root{ --space-hb:24px; --space-bb:40px; --space-col:48px; }
.hme__lede{ margin-top:var(--space-hb); }
.hme__actions{ margin-top:var(--space-bb); }
.hsec__intro, .wd-lede, .contact-lead{ margin-top:var(--space-hb); }
.hsec__cta{ margin-top:var(--space-bb); }
.hv5-col__p{ margin-top:var(--space-hb); }
.hv5-cols{ column-gap:var(--space-col); }


/* Homepage "Who does the work": single column, portraits removed. Label,
   heading, body (60ch) and the secondary button on the standard content edge. */
.who-home{ max-width:var(--maxw); }
.who-home .hm-who__head{ margin:0; }
.who-home .hm-who__statement{ margin:24px 0 0; max-width:60ch; }

/* ============================================================
   WHAT WE DO — page visuals (wwd-visuals, 2026-10-01)
   ============================================================ */

/* --- Two-column stage layout --- */
.wds__diagram{ margin-top:40px; }
@media (min-width:1024px){
  .wds__grid{ display:grid; grid-template-columns:52% 1fr; gap:72px; align-items:center; }
  .wds__diagram{ margin-top:0; }
}


/* --- 04 Broader outcomes (B4): dark section, set apart with a bronze rule --- */
.wds-bo-sec{ border-top:1px solid color-mix(in srgb, var(--bronze) 40%, transparent); }
.wds-bo-eyebrow::after{ display:none; }
.wds-bo-tag{ display:inline-block; font-family:"Poppins",var(--font-d); font-weight:500; font-size:12px;
  letter-spacing:.08em; color:var(--bronze); border:1px solid var(--bronze); border-radius:999px;
  padding:3px 10px; text-transform:none; white-space:nowrap; }
.bo-dia{ width:100%; max-width:420px; height:auto; display:block; margin-inline:auto; }
.bo-dia__node{ fill:none; stroke:var(--bronze); stroke-width:1.5; }
.bo-dia__link{ stroke:var(--bronze); stroke-width:1; opacity:.6; }
.bo-dia__drop{ stroke:var(--bronze); stroke-width:1; opacity:.3; }
.bo-dia__bar{ fill:none; stroke:var(--bronze); stroke-width:1.5; }
.bo-dia__lbl{ font-family:"Poppins",var(--font-d); font-weight:500; font-size:13px; fill:var(--text-dim); }
.bo-dia__barlbl{ font-family:"Poppins",var(--font-d); font-weight:500; font-size:14px; fill:var(--bronze); letter-spacing:.01em; }

/* --- Result panel (all three sections) --- */
.wds .wds__result{ position:relative; max-width:520px; margin-top:32px;
  --accent:var(--bronze); --accent-30:rgba(214,164,97,.3); --accent-70:rgba(214,164,97,.7); --panelbg:var(--surface); }
.wds.paper .wds__result{ --accent:var(--bronze-text); --accent-30:rgba(122,90,48,.3); --accent-70:rgba(122,90,48,.7); --panelbg:#EFEAE0; }
.wds__result::before{ content:""; position:absolute; left:8px; top:8px; right:-8px; bottom:-8px; border:1px solid var(--accent-30); z-index:0; }
.wds__panel{ position:relative; z-index:1; padding:22px 24px 24px; border:1px solid var(--accent-30); background:var(--panelbg); }
.wds__panel-h{ display:flex; align-items:center; font-family:var(--font-d); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--accent); margin:0; }
.wds__panel-h::after{ content:""; margin-left:12px; width:40px; height:1px; background:var(--accent-70); }
.wds__panel-t{ margin:10px 0 0; font-family:var(--font-d); font-weight:500; font-size:18px; line-height:1.5; color:var(--text); }

/* --- Half-day session line --- */
.wds__extra{ border-top:1px solid rgba(122,90,48,.3); padding-top:28px; margin-top:64px; font-size:16px; color:#575049; max-width:60ch; }

/* ============================================================
   WHAT WE DO — stages: result ticks + one performance graph
   (wwd-stages, 2026-10-07). Scoped to the three stage sections
   via .sg-grid / .sg so #broader-outcomes is untouched.
   ============================================================ */

/* Stage layout: text left, graph right, top-aligned; graph ~1.3x text.
   Mobile (<900px): heading, graph, then For when / body / results. */
.wds__grid.sg-grid{ display:grid; grid-template-columns:1fr;
  grid-template-areas:"head" "graph" "body"; gap:0; align-items:start; }
.sg-grid__head{ grid-area:head; }
.sg-grid .wds__diagram{ grid-area:graph; margin:clamp(1.6rem,5vw,2.2rem) 0 0; }
.sg-grid__body{ grid-area:body; margin-top:clamp(1.6rem,5vw,2.2rem); }
@media (min-width:900px){
  .wds__grid.sg-grid{ grid-template-columns:0.9fr 1.3fr;
    grid-template-areas:"head graph" "body graph"; column-gap:clamp(40px,5vw,72px); row-gap:0; }
  .sg-grid .wds__diagram{ margin:0; align-self:start; }
  .sg-grid__body{ margin-top:clamp(1.3rem,2.5vh,1.9rem); }
}

/* Result ticks */
.wds-result{ margin-top:clamp(1.8rem,4vh,2.4rem); max-width:520px; }
.wds-rh{ font-family:var(--font-d); font-weight:600; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bronze); margin:0 0 2px; }
.paper .wds-rh{ color:var(--bronze-text); }
.wds-ticks{ list-style:none; margin:0; padding:0; }
.wds-tick{ display:flex; gap:14px; align-items:flex-start; font-family:var(--font-d); font-weight:600;
  font-size:17px; line-height:1.35; color:var(--text); border-top:1px solid var(--hairline); padding:10px 0; }
.paper .wds-tick{ border-top-color:rgba(42,38,32,.15); }
.wds-tick__m{ flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  margin-top:-1px; color:var(--ink); background:var(--bronze); }
.paper .wds-tick__m{ background:var(--bronze-text); color:var(--paper); }
.wds-tick__m svg{ width:15px; height:15px; }
.wds-tick__t{ padding-top:1px; }
/* Motion start state only once JS marks the list ready */
.wds-ticks.is-ready .wds-tick{ opacity:0; }

/* Graph: HTML header row (readable on mobile) above the SVG plot */
.sg__head{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1.4vw,18px); margin-bottom:16px; }
.sg__col{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.sg__rule{ display:block; width:100%; height:var(--h,2px); background:var(--bronze); transform-origin:left center; }
.paper .sg__rule{ background:var(--bronze-text); }
.sg__meta{ display:flex; align-items:baseline; gap:8px; min-width:0; }
.sg__num{ font-family:var(--font-d); font-weight:600; font-size:12px; letter-spacing:.12em; color:var(--bronze); }
.paper .sg__num{ color:var(--bronze-text); }
.sg__name{ font-family:var(--font-d); font-weight:600; font-size:clamp(14px,1.3vw,17px); line-height:1.1;
  color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* dim non-current columns: rule ~35%, text ~40% */
.sg[data-stage="0"] .sg__col:not(:nth-child(1)) .sg__meta,
.sg[data-stage="1"] .sg__col:not(:nth-child(2)) .sg__meta,
.sg[data-stage="2"] .sg__col:not(:nth-child(3)) .sg__meta{ opacity:.4; }
.sg[data-stage="0"] .sg__col:not(:nth-child(1)) .sg__rule,
.sg[data-stage="1"] .sg__col:not(:nth-child(2)) .sg__rule,
.sg[data-stage="2"] .sg__col:not(:nth-child(3)) .sg__rule{ opacity:.35; }
.sg__plot{ width:100%; }
.sg__plot svg{ display:block; width:100%; height:auto; overflow:visible; }
.sg__plot text{ font-family:var(--font-d); }
.sg-lbl{ font-weight:600; font-size:17px; }
.sg-ax{ font-weight:500; font-size:15px; letter-spacing:.14em; }
/* Mobile: enlarge SVG text so nothing renders under 11px at 390 wide */
@media (max-width:899.98px){
  .sg-lbl{ font-size:23px; }
  .sg-ax{ font-size:23px; }
  .sg__name{ font-size:14px; }
}

/* --- Side marker (wide screens only) --- */
/* Only shown at >=1600px, where there is room beside the content column.
   Below that it would sit over the Stabilise diagram, so it is hidden. */
.wwd-side{ display:none; }
@media (min-width:1600px){
  .wwd-side{ display:flex; flex-direction:column; gap:18px; position:fixed; right:28px; top:50%; transform:translateY(-50%);
    z-index:40; opacity:0; pointer-events:none; transition:opacity .4s ease; }
  .wwd-side--on{ opacity:1; pointer-events:auto; }
  .wwd-side__item{ display:flex; align-items:center; justify-content:flex-end; gap:12px; text-decoration:none; }
  .wwd-side__name{ font-family:var(--font-d); font-weight:500; font-size:13px; color:var(--wwd-accent, var(--bronze)); opacity:0; transition:opacity .25s, color .25s; }
  .wwd-side__dot{ width:10px; height:10px; border-radius:50%; border:1.5px solid var(--wwd-accent, var(--bronze)); box-sizing:border-box; transition:transform .25s, background .25s, border-color .25s; }
  .wwd-side:hover .wwd-side__name{ opacity:1; }
  .wwd-side__item--active .wwd-side__name{ opacity:1; }
  .wwd-side__item--active .wwd-side__dot{ background:var(--wwd-accent, var(--bronze)); transform:scale(1.3); }
  .wwd-side__item:focus{ outline:none; }
  .wwd-side__item:focus-visible{ outline:2px solid var(--wwd-accent, var(--bronze)); outline-offset:3px; }
}

/* ============ Shared drawn arrow (replaces text arrow glyphs in links) ============ */
.arw{ display:inline-block; vertical-align:middle; margin-left:10px;
  color:var(--bronze); transition:transform .25s cubic-bezier(.2,.7,.2,1); }
.paper .arw{ color:var(--bronze-text); }
.hv5--paper .arw, .on-paper .arw{ color:#7A5A30; }
.arw--down{ transform:rotate(90deg); }
.arw--upright{ transform:rotate(-45deg); }
/* Keep the last word and its arrow together so the arrow never wraps alone. */
.arw-wrap{ white-space:nowrap; }
@media (prefers-reduced-motion:no-preference){
  a:hover .arw, a:focus-visible .arw{ transform:translateX(4px); }
  a:hover .arw--down, a:focus-visible .arw--down{ transform:rotate(90deg) translateX(4px); }
  a:hover .arw--upright, a:focus-visible .arw--upright{ transform:rotate(-45deg) translateX(4.24px); }
}

/* ============ Ledger row link (ends a section) — shared ============ */
.link-ledger{ position:relative; isolation:isolate; display:flex; align-items:center; gap:20px;
  width:100%; box-sizing:border-box; padding:22px 24px; margin-top:var(--space-bb);
  text-decoration:none; border-top:1px solid var(--lr-accent); border-bottom:1px solid var(--lr-accent);
  --lr-accent:var(--bronze); --lr-text:var(--text); --lr-bg:var(--ink); }
.link-ledger > *{ position:relative; z-index:1; }
.link-ledger::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--lr-accent);
  transform:scaleX(0); transform-origin:left center; transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.link-ledger__num{ font-family:var(--font-d); font-weight:600; font-size:13px; letter-spacing:.12em;
  color:var(--lr-accent); transition:color .55s cubic-bezier(.2,.7,.2,1); }
.link-ledger__text{ font-family:var(--font-d); font-weight:500; font-size:clamp(20px,2.4vw,28px);
  line-height:1.2; flex:1; color:var(--lr-text); transition:color .55s cubic-bezier(.2,.7,.2,1); }
.link-ledger__arw{ flex:none; color:var(--lr-accent);
  transition:color .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); }
.link-ledger:hover::before, .link-ledger:focus-visible::before{ transform:scaleX(1); }
.link-ledger:hover .link-ledger__num, .link-ledger:focus-visible .link-ledger__num,
.link-ledger:hover .link-ledger__text, .link-ledger:focus-visible .link-ledger__text,
.link-ledger:hover .link-ledger__arw, .link-ledger:focus-visible .link-ledger__arw{ color:var(--lr-bg); }
.link-ledger:hover .link-ledger__arw, .link-ledger:focus-visible .link-ledger__arw{ transform:translateX(6px); }
.link-ledger:focus{ outline:none; }
.link-ledger:focus-visible{ outline:2px solid var(--lr-accent); outline-offset:3px; }
.link-ledger + .link-ledger{ border-top:none; margin-top:0; }
@media (max-width:899.98px){ .link-ledger{ padding:18px 16px; } }
/* Paper and hv5--paper contexts: accent, resting text, and hover fill-text colour */
.paper .link-ledger{ --lr-accent:var(--bronze-text); --lr-text:#2A2620; --lr-bg:var(--paper); }
.hv5--paper .link-ledger{ --lr-accent:#7A5A30; --lr-text:#2A2620; --lr-bg:var(--paper); }
@media (prefers-reduced-motion:reduce){
  .link-ledger::before, .link-ledger__num, .link-ledger__text, .link-ledger__arw{ transition:none; }
}

/* Small inline bronze link (e.g. "Ask us about it") on paper sections. */
.wds__ask{ font-family:var(--font-d); font-weight:500; color:#7A5A30; text-decoration:none; white-space:nowrap; }
.wds__ask .arw{ color:#7A5A30; }

/* ============================================================
   ONE HERO SYSTEM (hero-system 2026-10-02; spacing rule hero-spacing 2026-10-07)
   .hero sets the shared label, H1 and subline styles, no rule into the next
   section and no scroll cues. The five inner page heroes (What we do, How we
   work, Who we are, Why decisions don't deliver, Insights) add .hero--inner,
   the What we do format: desktop min-height 84svh (84vh fallback, capped at
   960px, grows if the content is taller), content left-aligned and centred
   in the visible area under the nav, so the space from the nav to the label
   equals the space from the last line to the hero's bottom (at least 48px;
   hero-visible 2026-10-07); tablet 72svh, the same; mobile 70svh (92svh for
   Who we are and Why), also centred, at least 24px. The rules are at
   the end of this block.
   .hero--photo adds the B&W photo layer and fade (the homepage values),
   per page via --hero-img / --hero-img-mobile / --hero-pos / --hero-bright.
   .hero--page is the content-height variant for the working pages
   (Contact, Privacy). Mobile: content height plus section padding, minimum
   70svh; where the next section has no clean mobile start the hero fills
   the screen so nothing is cut (Who we are, Why).
   EXCEPTION: the homepage (#masthead) keeps its own centred .hm-hero/.hme
   layout and H1 (the agreed reference that must not change); it takes
   .hero--photo only for the photo layer, so its look is unchanged.
   ============================================================ */
.hero{ position:relative; min-height:100vh; min-height:100svh;
  padding-top:clamp(10.5rem,16vh,12rem); padding-bottom:clamp(2.4rem,5.5vh,3.6rem); }
.hero--page{ min-height:0; }
@media (max-width:767.98px){ .hero{ min-height:70svh; } .hero--page{ min-height:0; } }
.hero .eyebrow{ margin:0 0 clamp(1rem,2.5vw,1.6rem); }
.hero__title{ font-family:var(--font-d); font-weight:600; letter-spacing:-.03em; line-height:1.0;
  font-size:var(--t-h1); color:var(--text); margin:0; text-wrap:balance; }
.paper .hero__title{ color:var(--paper-ink); }
.hero__sub{ font-family:var(--font-d); font-weight:400; font-size:var(--t-intro); line-height:1.6;
  color:var(--text-dim); max-width:46ch; margin:clamp(1rem,2.5vh,1.5rem) 0 0; }
/* Hero label and heading sit above the fold at load, where the scroll
   reveal never fires; keep them visible instead of parked at opacity 0. */
.hero [data-reveal]{ opacity:1 !important; transform:none !important; }
/* .hero--inner: the shared inner-page spacing (see the comment above). 122px is the fixed nav. */
.hero--inner{ --hero-navh:122px; --hero-pad:24px;
  display:flex; flex-direction:column; justify-content:center;
  min-height:70vh; min-height:70svh; padding-top:calc(var(--hero-navh) + var(--hero-pad)); padding-bottom:var(--hero-pad); }   /* centred in the visible area under the nav: equal space above the label and below the last line */
.hero--inner > .wrap{ width:min(100% - (var(--gut) * 2),var(--maxw)); }
/* a ledger button under a hero heading (Who we are: Read our story) sits about the heading's width */
.hero .hero__link{ max-width:620px; margin-top:clamp(32px,4.5vh,48px); }
@media (min-width:768px){
  .hero--inner{ --hero-pad:48px; min-height:72vh; min-height:72svh; }
}
@media (min-width:1024px){
  .hero--inner{ min-height:84vh; min-height:min(84svh,960px); }
  .hero--inner .hero__title + .hero__sub{ margin-top:28px; }
}

.hero--photo{ position:relative; overflow:hidden; isolation:isolate; }
.hero--photo::before{ content:""; position:absolute; inset:0; z-index:-2;
  background:var(--hero-img) var(--hero-pos, center center) / cover no-repeat;
  filter:grayscale(1) contrast(1.1) brightness(var(--hero-bright, .65)); }
.hero--photo::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to top, #0C0F13 0%, rgba(12,15,19,0) 35%),
             linear-gradient(to right, #0C0F13 0%, #0C0F13 30%, rgba(12,15,19,.58) 58%, rgba(12,15,19,.54) 86%, rgba(12,15,19,.1) 100%); }
@media (max-width:1023.98px){
  .hero--photo::before{ background-image:var(--hero-img-mobile); }
  .hero--photo::after{ background:linear-gradient(to top, #0C0F13 0%, rgba(12,15,19,0) 35%),
             linear-gradient(180deg, rgba(12,15,19,.48) 0%, #0C0F13 100%); }
}
/* Per-page photos and focal point. */
#masthead{ --hero-img:url("../assets/hero-home-v2.webp"); --hero-img-mobile:url("../assets/hero-home-v2-mobile.webp"); --hero-pos:center center; --hero-bright:.65; }
/* Homepage hero: the river runs. A silent looping clip of the same photo sits
   over the still (same grade), under the scrim. Desktop only, never with
   reduced motion; the script adds it, so the still is always the fallback. */
.hme__video{ position:absolute; inset:0; z-index:-2; width:100%; height:100%;
  object-fit:cover; object-position:center center; pointer-events:none;
  filter:grayscale(1) contrast(1.1) brightness(var(--hero-bright, .65));
  opacity:0; transition:opacity 1.2s ease; }
.hme__video.is-playing{ opacity:1; }
#how-we-work-intro{ --hero-img:url("../assets/hww-canal.webp"); --hero-img-mobile:url("../assets/hww-canal-mobile.webp"); --hero-pos:center 40%; }
#what-we-do-intro{ --hero-img:url("../assets/wwd-geothermal.webp"); --hero-img-mobile:url("../assets/wwd-geothermal-mobile.webp"); --hero-pos:center 45%; }
#who-intro{ --hero-img:url("../assets/coast-wide.webp"); --hero-img-mobile:url("../assets/coast-wide-mobile.webp"); --hero-pos:center 55%; }
/* What we do mobile hero: its photo is lighter at the top, so strengthen the
   top fade a touch to keep the bronze eyebrow above 4.5:1 at .65 brightness. */
@media (max-width:1023.98px){
  #what-we-do-intro.hero--photo::after{
    background:linear-gradient(to top, #0C0F13 0%, rgba(12,15,19,0) 35%),
               linear-gradient(180deg, rgba(12,15,19,.56) 0%, #0C0F13 100%); }
}
/* Mobile: heroes whose next section has no clean mobile start fill the
   screen so no cut row or paragraph peeks (Who story has no heading on
   mobile; the Why table has no header on mobile). */
@media (max-width:767.98px){ #who-intro, #why-intro{ min-height:92svh; } }

/* ============================================================
   INSIGHTS (redesign): hero, featured, editorial index,
   From the field, On the record (paper), filter + show-all.
   Dark and paper palettes come from the shared tokens.
   ============================================================ */
/* 1. Hero: type only, no empty min-height, ~96px below the paragraph */
.ins-hero .hero__sub{ max-width:52ch; }
/* the first section follows straight on at the standard 96px */
#writing.ins-writing{ padding-top:64px; }
@media (min-width:1024px){ #writing.ins-writing{ padding-top:96px; } }

/* ============================================================
   WHAT WE DO — editorial hero + "Where to start" list
   (wwd-start-list, 2026-10-07)
   ============================================================ */
/* Part A: hero */
.hero--wwd .wwdh__accent{ color:var(--bronze); }
.wwdh-br{ display:none; }
.wwdh__rule{ display:none; }
/* the intro paragraph now sits in a plain dark band under the hero (placement to be decided) */
.wwd-introband{ background:var(--ink); padding:clamp(56px,7vw,96px) 0; }
.wwd-introband .wwdh__row{ margin-top:0; }
.wwd-introband .hero__sub{ margin:0; }
.wwdh__sub{ max-width:52ch; }
@media (min-width:1024px){
  .wwdh-br{ display:inline; }
  .wwdh__row{ display:grid; grid-template-columns:repeat(12,1fr); gap:0 clamp(16px,2vw,32px);
    margin-top:0; align-items:start; }
  .wwdh__rule{ display:block; grid-column:1 / span 1; width:64px; height:2px; background:var(--bronze);
    align-self:start; margin-top:.75em; }
  .wwdh__sub{ grid-column:7 / 13; font-size:20px; line-height:1.6; margin:0; }
}

/* Part B: Where to start list (dark) */
.wts__h{ font-family:var(--font-d); font-weight:600; letter-spacing:-.02em; line-height:1.05;
  font-size:clamp(2.1rem,1.3rem + 2.4vw,3.4rem); color:var(--text); margin:.6rem 0 0; max-width:18ch; text-wrap:balance; }
.wts__list{ margin-top:clamp(2rem,5vh,3.2rem); border-top:1px solid var(--hairline); }
.wts__row{ display:grid; grid-template-columns:1fr 190px 40px; align-items:center; gap:0 clamp(16px,2vw,28px);
  padding:22px clamp(14px,1.5vw,20px); border-bottom:1px solid var(--hairline); text-decoration:none; color:inherit;
  position:relative; isolation:isolate; }
/* Rows behave like the site's link-ledger ("See where it breaks down"): a
   bronze bar fills from the left on hover and the content inverts to ink.
   Subtle alternating row tint. */
.wts__row > *{ position:relative; z-index:1; }
.wts__row:nth-child(even){ background:color-mix(in srgb, var(--bronze) 5%, transparent); }
.wts__row::before{ content:""; position:absolute; inset:0; z-index:0;
  background:var(--bronze); transform:scaleX(0); transform-origin:left center;
  transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.wts__row:hover::before, .wts__row:focus-visible::before{ transform:scaleX(1); }
.wts__sit{ font-family:var(--font-d); font-weight:500; font-size:clamp(17px,1.2vw,22px); line-height:1.3;
  color:var(--text); transition:color .4s var(--ease); }
.wts__tag{ font-family:var(--font-d); font-weight:600; font-size:clamp(13px,1vw,15px); letter-spacing:.04em;
  text-transform:uppercase; color:var(--bronze); white-space:nowrap; transition:color .4s var(--ease); }
.wts__row[data-stage="any"] .wts__tag{ color:var(--text); }
.wts__arw{ justify-self:end; color:var(--bronze); display:inline-flex;
  transition:color .4s var(--ease), transform .4s var(--ease); }
/* hover: content inverts to ink over the bronze fill */
.wts__row:hover .wts__sit, .wts__row:focus-visible .wts__sit,
.wts__row:hover .wts__tag, .wts__row:focus-visible .wts__tag,
.wts__row:hover .wts__arw, .wts__row:focus-visible .wts__arw{ color:var(--ink); }
.wts__row:hover .wts__arw .arw, .wts__row:focus-visible .wts__arw .arw{ transform:translateX(4px); }
.wts__row:focus{ outline:none; }
.wts__row:focus-visible{ outline:2px solid var(--bronze); outline-offset:-2px; }
/* Footer row: muted note (left) + an inline ledger link (right), one baseline */
.wts__foot{ display:flex; align-items:baseline; justify-content:space-between; gap:16px 32px; flex-wrap:wrap;
  margin-top:32px; }
.wts__note{ font-family:var(--font-b); font-size:17px; line-height:1.5; color:var(--text-dim); margin:0; }
.wts__note a{ color:var(--text-dim); text-decoration:underline; text-underline-offset:3px; transition:color .25s; }
.wts__note a:hover{ color:var(--bronze); }
/* Inline ledger link: matches the site's link-ledger text size and arrow */
.ledger-ln{ display:inline-flex; align-items:center; gap:14px; text-decoration:none; font-family:var(--font-d);
  font-weight:500; font-size:clamp(20px,2.4vw,28px); line-height:1.2; color:var(--bronze); }
.ledger-ln__arw{ flex:none; color:var(--bronze); transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.ledger-ln:hover .ledger-ln__arw, .ledger-ln:focus-visible .ledger-ln__arw{ transform:translateX(6px); }
.ledger-ln:focus{ outline:none; }
.ledger-ln:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; }
@media (max-width:760px){
  .wts__row{ grid-template-columns:1fr auto; grid-template-areas:"sit arw" "tag arw"; gap:10px 16px;
    padding:20px 4px; align-items:start; }
  .wts__sit{ grid-area:sit; }
  .wts__tag{ grid-area:tag; }
  .wts__arw{ grid-area:arw; align-self:start; }
}
/* Footer row and leadership strip stack on mobile */
@media (max-width:760px){
  .wts__foot{ flex-direction:column; align-items:flex-start; gap:16px; }
  }

/* What we do hero: deepen the right fade so the big bronze line clears 4.5:1 over the photo */
@media (min-width:1024px){
  #what-we-do-intro.hero--wwd::after{
    background:
      linear-gradient(to top, #0C0F13 0%, rgba(12,15,19,0) 35%),
      linear-gradient(to right, #0C0F13 0%, #0C0F13 42%, rgba(12,15,19,.76) 72%, rgba(12,15,19,.6) 100%); }
}

/* ============================================================
   HOME — WHY IT HAPPENS: "the lights stay on" (home-lights, 2026-10-07)
   Replaces the 3D slider / org chart in #the-work-around-the-work.
   A real building at dusk (assets/home-tower.mp4) fills the section; twelve
   lights arrive as one row, then scatter (js/home-lights.js). The words sit
   on the right over the sky; on phones the building sits above the words.
   ============================================================ */
.hl{ position:relative; overflow:hidden; padding:0; min-height:max(600px,92vh); display:grid; background:var(--ink); }
.hl__bg{ position:absolute; inset:0; overflow:hidden; }
.hl__vid{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.15) brightness(.7); }
.hl__dusk{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,15,19,.25),rgba(12,15,19,.45)); }
.hl__win{ position:absolute; opacity:0; mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(255,214,150,.42) 0%,rgba(255,214,150,.62) 70%,rgba(255,214,150,.78) 100%);
  box-shadow:0 0 10px rgba(255,214,150,.22); }
.hl__read{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(12,15,19,0) 46%,rgba(12,15,19,.72) 62%,rgba(12,15,19,.84) 100%); }
.hl__wrap{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,38%); align-items:center;
  padding-block:clamp(72px,10vh,120px); }
.hl__words{ grid-column:2; }
.hl__h2{ margin:14px 0 0; font-family:var(--font-d); font-weight:600; font-size:clamp(1.7rem,1rem + 1.5vw,2.6rem); line-height:1.12; color:var(--text); }
.hl__h2 em{ display:block; font-style:normal; color:var(--bronze); padding-left:1.1em; margin-top:.25em; }
.hl__close{ margin:clamp(22px,3.4vh,34px) 0 0; font-family:var(--font-d); font-weight:500; font-size:clamp(19px,1.5vw,25px); line-height:1.35; color:var(--text); }
.hl__close em{ font-style:normal; color:var(--bronze); }
.hl .hl__link{ margin-top:clamp(26px,4vh,40px); }
.hl .hl__link .link-ledger__text{ font-size:clamp(18px,1.5vw,24px); white-space:nowrap; }   /* one line in the narrower column */
.hl__replay{ position:absolute; z-index:3; left:var(--gut); bottom:clamp(20px,4vh,36px); width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(214,164,97,.5); background:rgba(12,15,19,.6); color:var(--text); font-size:15px; line-height:1; cursor:pointer; }
.hl__replay[hidden]{ display:none; }
@media (max-width:899.98px){
  .hl{ min-height:0; display:block; }
  .hl__bg{ position:relative; inset:auto; height:min(112vw,64vh); }   /* taller, so the building fills the phone */
  .hl__read{ background:linear-gradient(180deg,rgba(12,15,19,0) 70%,rgba(12,15,19,.9) 100%); }
  .hl__wrap{ display:block; padding-block:28px 56px; }
  .hl__h2 em{ padding-left:0; }
  .hl__replay{ left:auto; right:var(--gut); bottom:auto; top:calc(min(112vw,64vh) - 54px); }
}

/* ============================================================
   HOME — WHO DOES THE WORK: the ledger (signed-it-off-ledger, 2026-10-07)
   Where we've worked / what we did there, six rows on a bronze rule with a
   tick at each row (no circles), then two full-width link rows.
   Motion (js/signed-ledger.js adds .sl--anim / .sl--in): the rule draws over
   1.4s, rows fade up 8px as the line reaches them, links follow.
   ============================================================ */
.sl{ --sl-cols:360px 1fr; --sl-gap:48px; --sl-rule:-30px; margin-top:clamp(48px,7vh,72px); padding-left:40px; }
.sl__head{ display:grid; grid-template-columns:var(--sl-cols); column-gap:var(--sl-gap); padding-bottom:16px;
  border-bottom:1px solid var(--hairline); font-family:var(--font-d); font-weight:600; font-size:12px; line-height:1;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bronze); }
.sl__rows{ position:relative; margin:0; }
.sl__row{ position:relative; display:grid; grid-template-columns:var(--sl-cols); column-gap:var(--sl-gap); align-items:baseline;
  padding:26px 0; border-bottom:1px solid var(--hairline); }
.sl__where{ font-family:var(--font-d); font-weight:600; font-size:clamp(22px,1.2rem + .9vw,30px); line-height:1.2; color:var(--text); }
.sl__what{ margin:0; font-family:var(--font-b); font-size:clamp(17px,1rem + .2vw,19px); line-height:1.5; color:var(--text-dim); }
.sl__what b{ font-weight:600; color:var(--text); }
/* the rule: full bronze at the top, about 25% at the bottom */
.sl__rule{ position:absolute; left:var(--sl-rule); top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,var(--bronze),rgba(214,164,97,.25)); transform-origin:top center; }
/* a 12 x 2 tick at each row, centred on the rule, level with the row's first line */
.sl__row::before{ content:""; position:absolute; left:calc(var(--sl-rule) - 5px); top:calc(26px + .62em); width:12px; height:2px;
  background:var(--bronze); font-size:clamp(22px,1.2rem + .9vw,30px); transform-origin:center; }
.sl__links{ margin-top:84px; }
.who-home .sl__links .link-ledger{ margin-top:0; padding:30px 24px; }
.who-home .sl__links .link-ledger__text{ font-size:clamp(22px,1.2rem + 1.3vw,34px); }
/* motion: hiding is instant (.sl--anim); the transitions live on the reveal (.sl--in) */
.sl--anim .sl__rule{ transform:scaleY(0); }
.sl--anim .sl__row{ opacity:0; transform:translateY(8px); }
.sl--anim .sl__row::before{ transform:scaleX(0); }
.sl--anim.sl__links{ opacity:0; transform:translateY(8px); }
.sl--in .sl__rule{ transform:scaleY(1); transition:transform 1.4s cubic-bezier(.45,.05,.35,1); }
.sl--in .sl__row{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; transition-delay:calc(var(--i) * .23s + .08s); }
.sl--in .sl__row::before{ transform:scaleX(1); transition:transform .35s ease; transition-delay:calc(var(--i) * .23s + .08s); }
.sl--in.sl__links{ opacity:1; transform:none; transition:opacity .6s ease 1.55s, transform .6s ease 1.55s; }
@media (max-width:767.98px){
  .sl{ --sl-cols:1fr; --sl-rule:-22px; padding-left:28px; }
  .sl__head{ display:flex; gap:24px; }
  .sl__row{ row-gap:8px; padding:22px 0; }
  .sl__row::before{ top:calc(22px + .62em); }
  .sl__links{ margin-top:56px; }
  .who-home .sl__links .link-ledger{ padding:22px 16px; }
}
@media (prefers-reduced-motion:reduce){
  .sl--in .sl__rule, .sl--in .sl__row, .sl--in .sl__row::before, .sl--in.sl__links{ transition:none; }
}

/* ============================================================
   HOMEPAGE SECTION HEADINGS: one system (home-fixes, 2026-10-07)
   Every homepage section H2 uses .h2-section. Desktop gets a big two- or
   three-line heading (with deliberate .br-desk breaks); tablet and phone
   wrap naturally. 32px under the heading on desktop, 20px on phones.
   Not used by: the hero H1, the lights section heading (narrow column over
   the video), the shared closing heading (.close__title, on every page).
   ============================================================ */
.h2-section{ font-family:var(--font-d); font-weight:600; font-size:clamp(2rem,1.4rem + 3vw,2.4rem); line-height:1.08;
  letter-spacing:-.02em; max-width:none; }
h2.h2-section + *{ margin-top:20px; }
.br-desk{ display:none; }
@media (min-width:768px) and (max-width:1023.98px){
  .h2-section{ font-size:clamp(2.4rem,1.2rem + 3vw,3.4rem); line-height:1.05; }
}
@media (min-width:1024px){
  .h2-section{ font-size:clamp(3rem,1.4rem + 3.2vw,5rem); line-height:1.02; letter-spacing:-.025em; max-width:18ch; }
  h2.h2-section + *{ margin-top:32px; }
  .br-desk{ display:inline; }
}

/* ============================================================
   WHO DOES THE WORK: the ledger on a raised card (ledger-card, 2026-10-07)
   Reuses the What we do result card (.wds__panel, dark version: --surface,
   1px bronze at 30%, square corners). The rule and ticks sit inside the
   card padding; the card edge closes the table, so the last row has no rule.
   ============================================================ */
.sl.sl--card{ margin-top:clamp(48px,7vh,72px); padding:48px 48px 48px 88px; background:var(--surface); border:1px solid rgba(214,164,97,.3); }
h2.h2-section + .sl.sl--card{ margin-top:32px; }
.sl--card .sl__row:last-of-type{ border-bottom:0; padding-bottom:0; }
@media (max-width:767.98px){
  .sl.sl--card{ padding:24px 24px 24px 50px; }
  h2.h2-section + .sl.sl--card{ margin-top:20px; }
}

/* ============================================================
   WHO DOES THE WORK: the ledger on phones (ledger-mobile, 2026-10-07)
   Under 768px each row becomes a label and a statement: the level is a small
   bronze eyebrow, the description is the main line. No column labels and no
   hairlines; 26px between rows. The rule sits 24px inside the card, with a
   tick level with each eyebrow. Desktop is unchanged.
   ============================================================ */
@media (max-width:767.98px){
  .sl.sl--card{ --sl-rule:-24px; padding:24px 22px 26px 50px; }
  .sl--card .sl__head{ display:none; }
  .sl--card .sl__row{ display:block; padding:0; border-bottom:0; }
  .sl--card .sl__row + .sl__row{ margin-top:26px; }
  .sl--card .sl__where{ margin:0 0 6px; font-family:var(--font-d); font-weight:600; font-size:12px; line-height:1.3;
    letter-spacing:.14em; text-transform:uppercase; color:var(--bronze); }
  .sl--card .sl__what{ font-family:var(--font-d); font-weight:500; font-size:18px; line-height:1.4; color:var(--text); text-wrap:pretty; }
  .sl--card .sl__what b{ font-weight:600; }
  /* the tick sits level with the eyebrow (12px text, 1.3 line-height) */
  .sl--card .sl__row::before{ top:7px; font-size:12px; }
  .who-home .sl__links{ margin-top:40px; }
  .who-home .sl__links .link-ledger__text{ font-size:clamp(20px,5.6vw,22px); }
  .who-home .sl__links .link-ledger{ padding:22px 6px; gap:12px; }
  .who-home .sl__links .link-ledger__arw{ width:30px; height:18px; }   /* keeps each link on one line at 360 */
}

/* ============================================================
   INSIGHTS — cards back + design uplift (insights-cards, 2026-10-07)
   Writing: article cards on paper (bronze top edge with a 45° cut corner,
   ghost photo behind). From the field: photo cards on dark. On the record:
   one list. Motion lives in js/main.js; with no JS or reduced motion
   everything shows in its final state.
   ============================================================ */
/* Section headings */
.ins-head{ margin-bottom:clamp(28px,4vh,44px); }
.ins-head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px 32px; flex-wrap:wrap; }
.ins-eyebrow{ display:flex; align-items:center; gap:12px; margin:0 0 10px; font-family:var(--font-d); font-weight:600;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--bronze); }
.paper .ins-eyebrow{ color:var(--bronze-text); }
.ins-eyebrow::after{ content:""; width:40px; height:1px; background:currentColor; transform-origin:left center; }
.ins-eyebrow--anim::after{ transform:scaleX(0); transition:transform .6s cubic-bezier(.45,.05,.35,1) .1s; }
.ins-eyebrow--anim.is-in::after{ transform:scaleX(1); }
.ins-h2{ margin:0; font-family:var(--font-d); font-weight:600; font-size:clamp(2.4rem,1.4rem + 2.6vw,4rem);
  line-height:1.04; letter-spacing:-.025em; color:var(--text); }
.paper .ins-h2{ color:var(--paper-ink); }

/* Filter chips */
.ins-filter{ display:flex; flex-wrap:wrap; gap:8px; }
.ins-chip{ font-family:var(--font-d); font-weight:500; font-size:13px; line-height:1; color:var(--paper-ink);
  background:transparent; border:1px solid rgba(42,38,32,.28); border-radius:999px; padding:10px 15px; cursor:pointer;
  transition:background .25s,color .25s,border-color .25s; }
.ins-chip:hover{ border-color:var(--bronze-text); }
.ins-chip.is-active{ background:var(--paper-ink); color:var(--paper); border-color:var(--paper-ink); }
.ins-chip:focus-visible{ outline:2px solid var(--bronze-text); outline-offset:3px; }
.ins-empty{ margin:24px 0 0; font-family:var(--font-b); font-size:1rem; color:var(--paper-dim); }

/* Writing cards */
.icards{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:640px){ .icards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .icards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.icard{ --cut:22px; position:relative; isolation:isolate; display:flex; flex-direction:column; min-height:100%;
  padding:30px 26px 24px; background:#F2EDE2; color:var(--paper-ink); text-decoration:none; overflow:hidden;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; }
/* the bronze edge: along the top, then down the cut */
.icard::before, .icard::after{ content:""; position:absolute; z-index:2; top:0; height:3px; background:var(--bronze-text); }
.icard::before{ left:0; width:calc(100% - var(--cut)); transform-origin:left center; }
.icard::after{ left:calc(100% - var(--cut)); width:calc(var(--cut) * 1.4143); transform-origin:left top; transform:rotate(45deg); }
/* ghost photo */
/* photo band across the top of the card (was a faint ghost behind the text) */
.icard__ghost{ position:relative; display:block; height:clamp(140px,11vw,168px); margin:-30px -26px 22px; overflow:hidden; background:#ECE6DA; }
.icard__ghost img{ display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(.97); opacity:.68; mix-blend-mode:multiply;   /* softened towards the paper */
  transition:filter .4s ease, opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.icard__cat{ font-family:var(--font-d); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#5F4626; }
.icard__title{ margin:12px 0 0; font-family:var(--font-d); font-weight:600; font-size:clamp(21px,1.2rem + .4vw,24px);
  line-height:1.2; letter-spacing:-.01em; color:var(--paper-ink); text-wrap:balance; }
.icard__excerpt{ margin:12px 0 24px; font-family:var(--font-b); font-size:15px; line-height:1.55; color:var(--paper-dim); }
.icard__foot{ display:flex; flex-direction:column; gap:3px; margin-top:auto; padding-top:16px; border-top:1px solid var(--paper-line);
  font-family:var(--font-b); font-size:13px; line-height:1.45; }
.icard__by{ color:var(--paper-dim); }
.icard__stage{ color:var(--bronze-text); }
.icard__link{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-family:var(--font-d); font-weight:600;
  font-size:14px; color:var(--bronze-text); text-decoration:none; }
.icard *{ text-decoration:none; }
.icard__link .arw{ transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.icard:hover, .icard:focus-visible{ transform:translateY(-4px); box-shadow:0 18px 34px -18px rgba(42,38,32,.45); }
.icard:hover .icard__ghost img, .icard:focus-visible .icard__ghost img{ filter:grayscale(.35) contrast(1.04); opacity:1; transform:scale(1.04); }
.icard:hover .icard__link .arw, .icard:focus-visible .icard__link .arw{ transform:translate(3px,-3px); }
.icard:focus{ outline:none; }
.icard:focus-visible{ box-shadow:inset 0 0 0 2px var(--bronze-text), 0 18px 34px -18px rgba(42,38,32,.45); }
/* the edge draws in (js adds .icards--anim, then .is-drawn per card) */
.icards--anim .icard::before{ transform:scaleX(0); }
.icards--anim .icard::after{ transform:rotate(45deg) scaleX(0); }
.icards--anim .icard.is-drawn::before{ transform:scaleX(1); transition:transform .5s cubic-bezier(.45,.05,.35,1); }
.icards--anim .icard.is-drawn::after{ transform:rotate(45deg) scaleX(1); transition:transform .22s ease-out .5s; }

/* From the field: photo cards */
.ins-field{ overflow:hidden; }
.fcards{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:640px){ .fcards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .fcards{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.fcard{ position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; height:380px; overflow:hidden;
  border:1px solid rgba(245,242,235,.1); color:var(--text); text-decoration:none; background:#14181E; }
.fcard__photo{ position:absolute; left:0; right:0; top:-8%; bottom:-8%; z-index:-2; }
.fcard__photo img{ display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(.85) brightness(.75); transition:filter .45s ease; }
.fcard::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top,rgba(12,15,19,.96) 0%,rgba(12,15,19,.82) 34%,rgba(12,15,19,.2) 62%,rgba(12,15,19,0) 80%); }
.fcard__body{ position:relative; display:flex; flex-direction:column; gap:6px; padding:20px 22px 22px; }
.fcard__body::before{ content:""; position:absolute; top:0; left:22px; right:22px; height:2px; background:var(--bronze);
  transition:left .45s cubic-bezier(.2,.7,.2,1), right .45s cubic-bezier(.2,.7,.2,1); }
.fcard__date{ font-family:var(--font-b); font-size:12px; color:rgba(245,242,235,.72); }
.fcard__title{ font-family:var(--font-d); font-weight:600; font-size:20px; line-height:1.2; color:var(--text); }
.fcard__text{ font-family:var(--font-b); font-size:14px; line-height:1.5; color:rgba(245,242,235,.84); }
.fcard:hover .fcard__photo img, .fcard:focus-visible .fcard__photo img{ filter:grayscale(.6) brightness(.92); }
.fcard:hover .fcard__body::before, .fcard:focus-visible .fcard__body::before{ left:0; right:0; }
.fcard:focus{ outline:none; }
.fcard:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; }

/* On the record: one list */
.rlist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--paper-line); }
.rrow{ border-bottom:1px solid var(--paper-line); }
.rrow__a{ position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,220px) 1fr auto; align-items:baseline;
  gap:6px 28px; padding:22px 4px; color:var(--paper-ink); text-decoration:none; }
.rrow__a::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(122,90,48,.07);
  transform:scaleX(0); transform-origin:left center; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.rrow__src{ font-family:var(--font-b); font-size:13px; color:var(--paper-dim); }
.rrow__head{ font-family:var(--font-d); font-weight:500; font-size:clamp(17px,1rem + .35vw,20px); line-height:1.3; }
.rrow__who{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-d); font-weight:600; font-size:14px; color:var(--bronze-text); white-space:nowrap; }
.rrow__arw{ transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.rrow__a:hover::before, .rrow__a:focus-visible::before{ transform:scaleX(1); }
.rrow__a:hover .rrow__arw, .rrow__a:focus-visible .rrow__arw{ transform:translate(2px,-2px); }
.rrow__a:focus{ outline:none; }
.rrow__a:focus-visible{ outline:2px solid var(--bronze-text); outline-offset:-2px; }
.rlist__more{ display:none; margin-top:22px; padding:0; background:none; border:0; cursor:pointer;
  font-family:var(--font-d); font-weight:600; font-size:15px; color:var(--bronze-text); }
.rlist__more span{ display:inline-block; transition:transform .3s; }
.rlist__more:hover span{ transform:translateX(4px); }
.rlist__more:focus-visible{ outline:2px solid var(--bronze-text); outline-offset:4px; }
.rlist--js + .rlist__more{ display:inline-block; }
.rlist--js .rrow--extra{ display:none; }
.rlist--js.is-open .rrow--extra{ display:block; }
.rlist__note{ margin:18px 0 0; font-family:var(--font-b); font-size:13px; line-height:1.5; color:var(--paper-dim); }
@media (max-width:760px){
  .rrow__a{ grid-template-columns:1fr auto; grid-template-areas:"src who" "head head"; gap:6px 16px; padding:18px 2px; }
  .rrow__src{ grid-area:src; }
  .rrow__who{ grid-area:who; }
  .rrow__head{ grid-area:head; }
}
@media (prefers-reduced-motion:reduce){
  .icard, .icard__ghost img, .icard__link .arw, .fcard__photo img, .fcard__body::before, .rrow__a::before, .rrow__arw{ transition:none; }
}

/* Insights hero (insights-hero-depth): the shared photo hero, set the How we work way. */
#insights-hero{ --hero-img:url("../assets/wy-road.jpg"); --hero-img-mobile:url("../assets/wy-road.jpg"); --hero-pos:30% 60%; --hero-bright:.8; }   /* a touch lighter than the shared .65 */
@media (min-width:1024px){ #insights-hero{ --hero-pos:60% 55%; } }
/* desktop: the road photo is lighter than the others, so the shared scrim's hard stop at 30% showed
   as a vertical seam and the nav wash as a line across the top. Softer, longer ramps here. */
@media (min-width:1024px){
  #insights-hero.hero--photo::after{ background:
    linear-gradient(to top, #0C0F13 0%, rgba(12,15,19,0) 38%),
    linear-gradient(to bottom, rgba(12,15,19,.92) 0%, rgba(12,15,19,.55) 14%, rgba(12,15,19,0) 34%),
    linear-gradient(to right, #0C0F13 0%, rgba(12,15,19,.97) 18%, rgba(12,15,19,.86) 34%, rgba(12,15,19,.64) 50%, rgba(12,15,19,.42) 66%, rgba(12,15,19,.28) 84%, rgba(12,15,19,.18) 100%); }
}
/* phones: the lighter photo needs a slightly stronger top fade to keep the eyebrow above 4.5:1 */
@media (max-width:1023.98px){
  #insights-hero.hero--photo::after{ background:linear-gradient(to top, #0C0F13 0%, rgba(12,15,19,0) 35%),
    linear-gradient(180deg, rgba(12,15,19,.6) 0%, #0C0F13 100%); }
}

/* ============================================================
   WHY HERO: the building, floors acting out the subheading (why-floors, 2026-10-07)
   assets/home-tower.mp4 mirrored so the building sits on the right; floor bands
   (js/why-floors.js) light down, then up, then close in on the middle floor,
   which keeps pulsing. Each sentence of the subheading lights as its part plays.
   ============================================================ */
.wf{ overflow:hidden; isolation:isolate; }
.wf__bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; background:var(--ink); }
.wf__vid{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1);
  filter:grayscale(1) contrast(1.12) brightness(.6); }
.wf__band{ position:absolute; opacity:0; mix-blend-mode:screen; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,226,180,.22),rgba(255,226,180,.32));
  box-shadow:inset 0 1px 0 rgba(214,164,97,.95),inset 0 -1px 0 rgba(214,164,97,.95); }
.wf__band--top{ clip-path:polygon(0 0,74% 0,100% 62%,100% 100%,0 100%); }   /* the sloped glass roof, mirrored */
.wf__read{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,#0C0F13 0%,rgba(12,15,19,0) 30%),
             linear-gradient(180deg,rgba(12,15,19,.64) 0%,rgba(12,15,19,.84) 100%); }
@media (min-width:1024px){
  .wf__read{ background:linear-gradient(to top,#0C0F13 0%,rgba(12,15,19,0) 28%),
    linear-gradient(to right,#0C0F13 0%,rgba(12,15,19,.94) calc(var(--wf-x,38vw) - 60px),rgba(12,15,19,.6) calc(var(--wf-x,38vw) + 60px),rgba(12,15,19,.12) calc(var(--wf-x,38vw) + 320px),rgba(12,15,19,0) 100%); }   /* --wf-x: where the text ends (js) */
}
/* the sentence in play lights up, with a bronze line drawing under it */
.wf-s{ background-image:linear-gradient(var(--bronze),var(--bronze)); background-repeat:no-repeat; background-position:0 100%;
  background-size:0 1px; transition:color .4s ease, background-size .5s cubic-bezier(.2,.7,.2,1); }
.wf-s.is-on{ color:var(--text); background-size:100% 1px; }
@media (prefers-reduced-motion:reduce){ .wf-s{ transition:none; } }

/* An article card with no photo (Greer's call): the photo band holds the post's line instead, in ink */
.icard__quote{ display:flex; align-items:center; padding:0 26px; background:var(--ink); color:#F0DEC4;
  font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-weight:500; font-size:clamp(22px,1.2rem + .5vw,27px); line-height:1.2; }
.icard--quote:hover .icard__quote, .icard--quote:focus-visible .icard__quote{ color:var(--bronze); }

/* ============================================================
   HOW WE WORK (hww-design, 2026-10-07): Greer's wording, the homepage's edge.
   Dark and paper sections alternate; shared .h2-section headings; bronze
   rules draw in, the 35 counts up, rows rise in staggered, the Expect lines
   reveal one at a time, the involvement scale fills to the row you point at,
   and the three steps join up along a drawn line. Motion: js/how-we-work.js
   (adds .hw-js); without it, or with reduced motion, everything shows final.
   ============================================================ */
.hw-sec{ position:relative; padding:clamp(80px,9vw,128px) 0; background:var(--ink); color:var(--text); }
.hw-sec.paper{ background:var(--paper); color:var(--paper-ink); }
.hw-eyebrow{ display:flex; align-items:center; gap:12px; margin:0 0 14px; font-family:var(--font-d); font-weight:600; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bronze); }
.paper .hw-eyebrow{ color:var(--bronze-text); }
.hw-eyebrow::after{ content:""; width:40px; height:1px; background:currentColor; transform-origin:left center; }
.hw-h2{ color:inherit; margin:0; }
.hw-sec h2.h2-section + *{ margin-top:clamp(40px,5vw,64px); }   /* room under the big headings, as on the homepage */
.hw-num{ display:block; font-family:var(--font-d); font-weight:600; font-size:13px; letter-spacing:.12em; color:var(--bronze); }
.paper .hw-num{ color:var(--bronze-text); }
.hw-textlink{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-d); font-weight:600; font-size:16px; color:inherit;
  text-decoration:none; padding-bottom:6px; border-bottom:2px solid var(--bronze); }
.paper .hw-textlink{ border-bottom-color:var(--bronze-text); }
.hw-textlink span{ transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.hw-textlink:hover span, .hw-textlink:focus-visible span{ transform:translateX(5px); }
.hw-textlink:focus-visible{ outline:2px solid var(--bronze); outline-offset:4px; }

/* 1. the 35 section as one statement (hww-35, 2026-10-08) */
.hw35{ padding:88px 0; }
.hw35__stmt{ margin:0; max-width:30ch; font-family:var(--font-d); font-weight:500; font-size:clamp(1.6rem,1rem + 1.6vw,2.5rem);
  line-height:1.35; letter-spacing:-.01em; color:rgba(245,242,235,.62); }
.hw35__stmt b{ font-weight:600; color:var(--text); }
.hw35__stmt .hw35__lead{ color:var(--bronze); white-space:nowrap; }
.hw35 .hw-count{ display:inline-block; min-width:1.25em; text-align:right; font-variant-numeric:tabular-nums; }
.hw35__link{ display:inline-flex; align-items:center; gap:8px; margin-top:28px; padding-bottom:4px; border-bottom:2px solid var(--bronze);
  font-family:var(--font-d); font-weight:600; font-size:17px; color:var(--text); text-decoration:none; transition:color .2s ease; }
.hw35__link span{ transition:transform .3s cubic-bezier(.23,1,.32,1); }
.hw35__link:hover{ color:var(--bronze); }
.hw35__link:hover span{ transform:translateX(4px); }
.hw35__link:focus-visible{ outline:2px solid var(--bronze); outline-offset:4px; }
@media (min-width:1024px){ .hw35__stmt{ max-width:42ch; } }   /* four lines: keeps the section near 450px tall */
@media (max-width:767.98px){ .hw35__stmt{ max-width:none; font-size:26px; line-height:1.4; } .hw35{ padding:64px 0; } }
@media (pointer:coarse){ .hw35__link{ min-height:44px; } }

/* 2. four commitments (paper) */
.hw-four{ list-style:none; display:grid; grid-template-columns:1fr; gap:40px; margin:clamp(40px,5vw,64px) 0 0; padding:0; }
@media (min-width:768px){ .hw-four{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .hw-four{ grid-template-columns:repeat(4,1fr); gap:clamp(24px,2.6vw,44px); } }
.hw-four li{ position:relative; padding-top:30px; }
.hw-four__rule{ position:absolute; left:0; top:0; height:3px; width:100%; background:var(--bronze-text); transform-origin:left center; }
.hw-four h3{ margin:12px 0 0; font-family:var(--font-d); font-weight:600; font-size:clamp(21px,1.1rem + .5vw,26px); line-height:1.2; color:var(--paper-ink); }
.hw-four p{ margin:14px 0 0; font-family:var(--font-b); font-size:16px; line-height:1.6; color:var(--paper-dim); }
.hw-commit__link{ margin-top:clamp(44px,5vw,64px); }

/* 3. what we find (dark), hf (2026-10-07): one screen on desktop. Each pattern sits on a
   track; option B: each bronze line pushes out, stalls and slips back ("we find"), then all push through as
   "Then we rebuild the patterns with you" arrives. Hover or focus a row to see its old pattern. */
.hf__grid{ display:grid; grid-template-columns:1fr; gap:clamp(36px,5vw,56px); }
.hf__lede{ margin:0; max-width:30ch; font-family:var(--font-d); font-weight:400; font-size:clamp(17px,1rem + .2vw,19px); line-height:1.5; color:rgba(240,234,224,.78); }
.hf .h2-section{ font-size:clamp(2.4rem,1.2rem + 2.6vw,4rem); }
.hw-sec .hf__intro h2.h2-section + *{ margin-top:clamp(18px,2.4vh,28px); }
.hf__list{ list-style:none; margin:0; padding:0; }
.hf__list li{ position:relative; display:grid; grid-template-columns:44px 1fr; align-items:start; padding:clamp(14px,2.2vh,22px) 0 clamp(22px,3vh,30px); outline:none; cursor:default; }
.hf__n{ display:block; width:24px; height:2px; transform-origin:left center; margin-top:calc(clamp(19px,1rem + .85vw,28px) * .625 - 1px); background:rgba(224,214,196,.5); transition:background-color .5s; }
.hf__t{ font-family:var(--font-d); font-weight:500; font-size:clamp(19px,1rem + .85vw,28px); line-height:1.25; color:rgba(240,234,224,.66); transition:color .5s; }
.hf__list li.is-found .hf__n, .hf.is-rebuilt .hf__n{ background:var(--bronze); }
.hf__list li.is-found .hf__t, .hf.is-rebuilt .hf__t{ color:var(--text); }
.hf__line{ position:absolute; left:0; right:0; bottom:0; height:16px; display:block; }
.hf__track{ position:absolute; left:0; right:0; bottom:6px; height:1px; background:rgba(224,214,196,.18); }
.hf__bar{ position:absolute; left:0; right:0; bottom:5.5px; height:2px; background:var(--bronze); transform-origin:left center; }
.hf__list li:focus-visible .hf__t{ text-decoration:underline; text-decoration-color:var(--bronze); text-underline-offset:6px; }
.hf__rebuild{ position:relative; padding-top:clamp(26px,3.4vh,40px); display:grid; grid-template-columns:1fr; gap:12px 48px; align-items:start; }
.hf__rule{ position:absolute; left:0; right:0; top:0; height:2px; background:var(--bronze); transform-origin:left center; }
.hf__rb-h{ margin:0; font-family:var(--font-d); font-weight:600; font-size:clamp(28px,1.1rem + 2.1vw,46px); line-height:1.1; letter-spacing:-.02em; color:var(--text); max-width:16ch; }
.hf__rb-p{ margin:0; font-family:var(--font-d); font-weight:500; font-size:clamp(18px,1rem + .55vw,24px); line-height:1.45; color:var(--bronze); max-width:30ch; }
@media (min-width:1024px){
  .hf{ min-height:100vh; min-height:100svh; display:grid; align-content:center; padding:clamp(96px,12vh,128px) 0 clamp(56px,8vh,96px); }
  .hf__grid{ grid-template-columns:5fr 7fr; column-gap:clamp(56px,7vw,120px); row-gap:clamp(36px,5vh,60px); }
  .hf__rebuild{ grid-column:1 / -1; grid-template-columns:5fr 7fr; column-gap:clamp(56px,7vw,120px); }
  .hf__rb-p{ padding-top:.35em; }
}
.hw-js .hf__list li, .hw-js .hf__rb-h, .hw-js .hf__rb-p{ opacity:0; transform:translateY(14px); }
.hw-js .hf__rule{ transform:scaleX(0); }


/* 5. getting started (paper, hww-rest): involvement on the left/right, then the three steps */
.hw-start__top{ display:grid; grid-template-columns:1fr; gap:clamp(32px,4vw,48px); }
.hw-start__lede{ margin:0; max-width:32ch; font-family:var(--font-b); font-size:18px; line-height:1.6; color:var(--paper-dim); }
.hw-sec .hw-start__intro h2.h2-section + *{ margin-top:clamp(18px,2.4vh,26px); }
.hw-scale{ position:relative; height:64px; margin:0 0 18px; }
.hw-scale__track{ position:absolute; left:0; right:0; top:10px; height:2px; background:rgba(42,38,32,.18); }
.hw-scale__fill{ position:absolute; left:0; top:0; bottom:0; width:var(--fill,100%); background:var(--bronze-text); transition:width .6s cubic-bezier(.45,.05,.35,1); }
.hw-scale__stop{ position:absolute; top:0; left:var(--x); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; }
.hw-scale__track + .hw-scale__stop{ transform:none; align-items:flex-start; }
.hw-scale__stop:last-of-type{ transform:translateX(-100%); align-items:flex-end; }
.hw-scale__stop i{ width:22px; height:22px; border-radius:50%; background:var(--paper); border:2px solid var(--bronze-text); box-sizing:border-box;
  transition:background-color .35s, box-shadow .35s; }
.hw-scale__stop.is-on i{ background:var(--bronze-text); box-shadow:0 0 0 6px rgba(122,90,48,.15); }
.hw-scale__stop b{ margin-top:14px; font-family:var(--font-d); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bronze-text); white-space:nowrap; }
.hw-ways__rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--paper-line); }
.hw-ways__rows li{ position:relative; isolation:isolate; display:grid; grid-template-columns:1fr; gap:6px; padding:clamp(18px,2vw,24px) 18px; border-bottom:1px solid var(--paper-line); outline:none; cursor:default; }
.hw-ways__rows li::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(122,90,48,.09); transform:scaleX(0); transform-origin:left center;
  transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.hw-ways__rows li.is-on::before{ transform:scaleX(1); }
.hw-ways__rows li:focus-visible{ box-shadow:inset 0 0 0 2px var(--bronze-text); }
.hw-ways__rows h3{ margin:0; font-family:var(--font-d); font-weight:600; font-size:clamp(20px,1rem + .55vw,24px); line-height:1.2; color:var(--paper-ink); }
.hw-ways__rows p{ margin:0; font-family:var(--font-b); font-size:17px; line-height:1.55; color:var(--paper-dim); }
@media (min-width:900px){ .hw-ways__rows li{ grid-template-columns:220px minmax(0,1fr); gap:32px; align-items:baseline; } }
@media (max-width:599.98px){ .hw-scale__stop b{ font-size:9.5px; letter-spacing:.08em; } }
@media (min-width:1024px){
  .hw-start__top{ grid-template-columns:5fr 7fr; column-gap:clamp(56px,7vw,120px); align-items:start; }
}
/* the three steps, under a rule */
.hw-start__steps{ position:relative; margin-top:clamp(56px,7vw,80px); padding-top:clamp(28px,3vw,40px); }
.hw-start__rule{ position:absolute; left:0; right:0; top:0; height:2px; background:var(--bronze-text); transform-origin:left center; }
.hw-start__label{ margin-bottom:0; }
.hw-steps__list{ position:relative; list-style:none; display:grid; grid-template-columns:1fr; gap:36px; margin:clamp(28px,3vw,40px) 0 0; padding:0 0 0 34px; }
.hw-steps__line{ position:absolute; left:10px; top:10px; bottom:0; width:2px; background:var(--bronze-text); transform-origin:top center; }
.hw-steps__list li{ position:relative; }
.hw-steps__list li i{ position:absolute; left:-34px; top:0; width:22px; height:22px; border-radius:50%; background:var(--bronze-text); box-shadow:0 0 0 6px var(--paper); }
.hw-steps__list .hw-num{ margin-top:2px; }
.hw-steps__list h3{ margin:10px 0 0; font-family:var(--font-d); font-weight:600; font-size:clamp(21px,1.1rem + .5vw,26px); line-height:1.2; color:var(--paper-ink); }
.hw-steps__list p{ margin:12px 0 0; max-width:36ch; font-family:var(--font-b); font-size:16px; line-height:1.6; color:var(--paper-dim); }
@media (min-width:900px){
  .hw-steps__list{ grid-template-columns:repeat(3,1fr); gap:clamp(28px,3vw,56px); padding:46px 0 0; }
  .hw-steps__line{ left:0; right:0; top:10px; bottom:auto; width:auto; height:2px; transform-origin:left center; }
  .hw-steps__list li i{ left:0; top:-46px; }
}
.hw-start{ padding:clamp(72px,8vw,96px) 0; }

/* 6. the close, How we work wording: one line, a note under the button */
.hw-close .close__title{ font-size:clamp(2.2rem,1.2rem + 3.2vw,4rem); max-width:none; }

/* motion start states, only once the script is running */
.hw-js .hw-rise, .hw-js .hw-four li > :not(.hw-four__rule):not(p), .hw-js .hw-steps__list li > :not(i):not(p),
.hw-js .hw-h2, .hw-js .hw-eyebrow{ opacity:0; transform:translateY(16px); }
.hw-js .hw-eyebrow::after{ transform:scaleX(0); }
.hw-js .hw-four__rule{ transform:scaleX(0); }
.hw-js .hw35__ph{ opacity:.35; }
.hw-js .hw35__link{ opacity:0; }
.hw-js .hw-hsub__l{ opacity:0; }
.hw-js .hw-steps__line{ transform:scaleY(0); }
.hw-js .hw-start__rule{ transform:scaleX(0); }

.hw-js .hf__n{ transform:scaleX(0); }
.hw-js .hw-steps__list li i{ transform:scale(0); }
@media (min-width:900px){ .hw-js .hw-steps__line{ transform:scaleX(0); } }
.hw-js .hw-scale__fill{ width:0; }
.is-in.hw-eyebrow::after{ transform:scaleX(1); transition:transform .6s cubic-bezier(.45,.05,.35,1) .1s; }
@media (prefers-reduced-motion:reduce){ .hw-scale__fill, .hw-ways__rows li::before, .hw-scale__stop i, .hw-textlink span{ transition:none; } }

/* How we work hero subheading: three Expect lines, one per line, Expect in bronze */
.hero .hw-hsub{ max-width:none; }
.hw-hsub__l{ display:block; }
.hw-hsub em{ font-style:normal; color:var(--bronze); }

/* Mobile menu fit (2026-10-07): six links no longer fit centred on a phone, so the first
   one slid under the logo. The panel now starts below the nav bar, scrolls if it has to,
   and the links are a touch smaller. No blue tap flash on the burger. */
.menu{justify-content:flex-start;padding-top:calc(var(--gut) + 108px);overflow-y:auto;overscroll-behavior:contain}
.menu__links a{font-size:clamp(1.8rem,8.4vw,3.4rem);padding:.3rem 0}
.menu__foot{margin-top:2rem}
@media (min-height:740px){ .menu{justify-content:center;padding-top:calc(var(--gut) + 72px)} }
.nav__burger{-webkit-tap-highlight-color:transparent}
.nav__burger:focus{outline:none}
.nav__burger:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}

/* Insights drop-downs on phones (js/insights-fold.js adds .has-fold, only below 768px) */
.ins-fold__btn{ display:flex; align-items:center; gap:12px; width:100%; margin:0; padding:0; background:none; border:0;
  font:inherit; color:inherit; letter-spacing:inherit; line-height:inherit; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ins-fold__t{ flex:1; min-width:0; }
.ins-fold__chev{ flex:none; transition:transform .45s cubic-bezier(.22,1,.36,1); }
.has-fold:not(.is-folded) .ins-fold__chev{ transform:rotate(180deg); }
.ins-fold__btn:focus{ outline:none; }
.ins-fold__btn:focus-visible{ outline:2px solid var(--bronze); outline-offset:6px; border-radius:2px; }
.paper .ins-field .ins-fold{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1); }
.ins-fold__in{ min-height:0; overflow:hidden; }
.is-folded .ins-fold{ grid-template-rows:0fr; }
.has-fold .ins-h2{ font-size:clamp(1.9rem,1.2rem + 3vw,2.6rem); }
.has-fold .ins-head{ margin-bottom:0; }
.has-fold .ins-fold__in > :first-child{ margin-top:clamp(24px,4vh,36px); }
.has-fold .ins-filter{ margin-bottom:24px; }
.hsec.has-fold{ padding-top:48px; padding-bottom:48px; border-top:1px solid var(--hairline); }
.paper.has-fold{ border-top-color:var(--paper-line); }
#writing.ins-writing.has-fold{ border-top:0; padding-top:48px; }
.has-fold .ins-fold__in > :first-child.ins-filter{ margin-top:24px; }

/* ============ Quality pass (2026-10-08) ============ */
/* the dark bronze text colour, wherever a light section or card uses it (it was only defined
   inside .paper, so "Challenge the system." on Why fell back to near-white on paper) */
.t8-sec--paper, .contact-formwrap{ --bronze-text:#7A5A30; }
/* skip link: hidden until a keyboard user tabs to it */
.skip-link{ position:fixed; left:16px; top:12px; z-index:2000; padding:12px 18px; background:var(--bronze); color:var(--ink);
  font-family:var(--font-d); font-weight:600; font-size:15px; text-decoration:none; transform:translateY(-160%); opacity:0; pointer-events:none; transition:transform .2s cubic-bezier(.23,1,.32,1), opacity .2s; }
.skip-link:focus{ transform:none; opacity:1; pointer-events:auto; outline:2px solid var(--text); outline-offset:2px; }
main:focus{ outline:none; }
/* footer headings at a readable size */
.ft2__h{ font-size:12px; }
/* touch screens: every tap target at least 44px tall */
@media (pointer:coarse){
  .ft2__brands li, .ft2__list li{ margin-bottom:0; }
  .ft2__brands a, .ft2__list a{ display:inline-flex; align-items:center; min-height:44px; }
  .ft2__social a, .ab-lin{ display:inline-flex; align-items:center; justify-content:flex-start; min-width:44px; min-height:44px; }
  .ins-chip, .ins-fold__btn, .rlist__more{ min-height:44px; }
  .hw-textlink, .ledger-ln, .svcd-back{ display:inline-flex; align-items:center; min-height:44px; }
  .close__email a{ display:inline-flex; align-items:center; min-height:44px; }
  .ft2__brand{ min-height:44px; }
  .wts__note a{ display:inline-block; padding:12px 0; margin:-12px 0; }
}

/* ============ Who we are, Cedric's review (who-cedric-review, 2026-10-08) ============ */
/* hero: lighter photo, the What we do / How we work treatment */
#who-intro{ --hero-bright:.75; }
@media (min-width:1024px){
  #who-intro.hero--photo::after{ background:
    linear-gradient(to top, #0C0F13 0%, rgba(12,15,19,0) 32%),
    linear-gradient(to right, rgba(12,15,19,.8) 0%, rgba(12,15,19,.76) 30%, rgba(12,15,19,.42) 55%, rgba(12,15,19,.38) 100%); }
}
.ab-herolink{ display:inline-flex; align-items:center; gap:8px; margin-top:32px; font-family:var(--font-d); font-weight:600; font-size:18px;
  color:var(--text); text-decoration:none; padding-bottom:4px; border-bottom:2px solid var(--bronze); transition:color .2s ease; }
.ab-herolink span{ transition:transform .3s cubic-bezier(.23,1,.32,1); }
.ab-herolink:hover{ color:var(--bronze); }
.ab-herolink:hover span{ transform:translateY(3px); }
.ab-herolink:focus-visible{ outline:2px solid var(--bronze); outline-offset:4px; }
.hero .ab-herolink{ align-self:flex-start; }
/* section eyebrows: the small uppercase label used on How we work */
.ab-eyebrow{ display:flex; align-items:center; gap:12px; margin:0 0 18px; font-family:var(--font-d); font-weight:600; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bronze); }
.ab-eyebrow::after{ content:""; width:40px; height:1px; background:currentColor; }
.t8-sec--paper .ab-eyebrow{ color:#7A5A30; }
/* the story statement */
.ab-stmt{ margin:0 0 56px; max-width:none; font-family:var(--font-d); font-weight:600; font-size:clamp(2rem,1.2rem + 2.4vw,3.4rem);
  line-height:1.15; letter-spacing:-.02em; color:var(--text); }
.ab-stmt em{ font-style:normal; color:var(--bronze); }
/* figures: 35 on its own, then four */
.ab-proof__lead{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:8px 28px; padding:22px 0 clamp(28px,3vw,40px); border-top:1px solid rgba(214,164,97,.4); }
#numbers .ab-proof__n{ font-size:clamp(48px,2rem + 3vw,76px); font-variant-numeric:tabular-nums; }
#numbers .ab-proof__n--big{ font-size:clamp(88px,4rem + 4vw,120px); line-height:.82; letter-spacing:-.04em; }
#numbers .ab-proof__lead .ab-proof__l{ margin:0 0 .4em; font-family:var(--font-d); font-weight:500; font-size:clamp(19px,1rem + .5vw,24px); line-height:1.25; color:var(--text); max-width:22ch; }
#numbers .ab-proof__l{ font-size:17px; max-width:22ch; }
@media (max-width:599.98px){ #numbers .ab-proof__grid{ grid-template-columns:1fr; } #numbers .ab-proof__col + .ab-proof__col{ border-left:none; padding-left:0; } }
/* who we've worked with: real heading and intro line */
.ab-worked__h2{ margin:0; color:var(--paper-ink); }
.ab-worked__intro{ margin:clamp(16px,2vw,22px) 0 clamp(2.4rem,5vw,3.4rem); max-width:52ch; font-family:var(--font-d); font-weight:400; font-size:clamp(18px,1rem + .3vw,20px); line-height:1.55; color:var(--paper-dim); }
/* profiles: two highlights each, normal body otherwise; Selected work beside the photo */
#people .ab-person__panel{ font-family:var(--font-d); font-weight:500; font-size:20px; line-height:1.5; }
#people .ab-person__p{ font-family:var(--font-b); font-weight:400; font-size:17px; line-height:1.7; max-width:62ch; }
.ab-work{ margin-top:28px; max-width:240px; }
.ab-work__label{ margin:0 0 8px; font-family:var(--font-d); font-weight:500; font-size:13px; color:#7A5A30; }
.ab-work__list{ list-style:none; margin:0; padding:0; }
.ab-work__list li{ padding:10px 0; border-top:1px solid rgba(122,90,48,.25); font-family:var(--font-b); font-size:15px; line-height:1.45; color:var(--paper-ink); }
@media (max-width:900px){
  #people .ab-person__aside{ display:contents; }
  #people .ab-person__photo{ order:0; }
  #people .ab-person__body{ order:1; }
  #people .ab-work{ order:2; margin-top:0; max-width:none; }
}
/* values: a wider name column so Tiro Whaanui stays on one line */
#values .ab-values__h{ font-size:clamp(2rem,1.4rem + 3vw,2.4rem); line-height:1.08; margin-bottom:clamp(2.4rem,5vw,3.4rem); }
@media (min-width:768px) and (max-width:1023.98px){ #values .ab-values__h{ font-size:clamp(2.4rem,1.2rem + 3vw,3.4rem); line-height:1.05; } }
@media (min-width:1024px){ #values .ab-values__h{ font-size:clamp(3rem,1.4rem + 3.2vw,5rem); line-height:1.02; letter-spacing:-.025em; } }
@media (min-width:901px){ #values .ab-vrow{ grid-template-columns:360px 1fr; } }

/* ============ Who we've worked with, as one system (who-layers, 2026-10-08) ============ */
.ly{ --ly-line:rgba(122,90,48,.45); --ly-bt:#7A5A30; }
.ly__box{ position:relative; display:grid; grid-template-columns:1fr; border:1px solid var(--ly-line); }
.ly__label{ position:absolute; top:0; left:24px; transform:translateY(-50%); margin:0; padding:0 12px; background:var(--paper);
  font-family:var(--font-d); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ly-bt); }
.ly__layers{ position:relative; padding:28px 24px 20px; }
.ly__spine{ position:absolute; left:31px; top:56px; height:calc(100% - 120px); width:2px; background:var(--ly-bt); transform-origin:top center; }
.ly__list{ list-style:none; margin:0; padding:0; }
.ly__row{ display:grid; grid-template-columns:16px 1fr; column-gap:20px; row-gap:6px; padding:20px 0; border-top:1px solid rgba(122,90,48,.2); }
.ly__row:first-child{ border-top:0; }
.ly__dot{ grid-row:1 / span 2; position:relative; z-index:1; width:16px; height:16px; margin-top:.35em; border-radius:50%; background:var(--ly-bt); box-sizing:border-box; transition:background-color .3s ease; }
.ly__dot--hollow{ background:var(--paper); border:2px solid var(--ly-bt); }
.ly__name{ margin:0; font-family:var(--font-d); font-weight:600; font-size:clamp(19px,1rem + .4vw,22px); line-height:1.3; color:var(--paper-ink); }
.ly__items{ margin:0; font-family:var(--font-b); font-weight:400; font-size:17px; line-height:1.6; color:var(--paper-dim); }
.ly__i{ white-space:nowrap; }
.ly__i:not(:last-child)::after{ content:" \00B7"; color:var(--ly-bt); }
/* phones: one item per line, no separators (the longest items are wider than the column) */
@media (max-width:599.98px){ .ly__items .ly__i{ display:block; white-space:normal; padding:2px 0; } .ly__items .ly__i::after{ content:none; } .ly .ly__layers{ padding:24px 18px 16px; } .ly .ly__spine{ left:25px; } .ly .ly__beyond{ padding:20px 18px; } .ly .ly__side{ padding:24px 18px; } }
.ly__side{ padding:28px 24px; background:rgba(122,90,48,.10); border-top:1px solid var(--ly-line); }
.ly__kicker{ margin:0 0 14px; padding-left:12px; border-left:3px solid var(--ly-bt); font-family:var(--font-d); font-weight:600; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.6; color:var(--ly-bt); }
.ly__side-h{ margin:0; font-family:var(--font-d); font-weight:600; font-size:22px; line-height:1.25; color:var(--paper-ink); }
.ly__side-p{ margin:8px 0 18px; font-family:var(--font-b); font-size:15px; line-height:1.55; color:#5A5248; }
.ly__side-list{ list-style:none; margin:0; padding:0; }
.ly__side-list li{ padding:11px 0; border-top:1px solid rgba(122,90,48,.25); font-family:var(--font-b); font-size:17px; line-height:1.4; color:var(--paper-ink); }
.ly__beyond{ display:grid; grid-template-columns:16px 1fr; column-gap:20px; row-gap:6px; padding:24px; border:1px dashed var(--ly-line); border-top:0; }
@media (min-width:1024px){
  .ly__box{ grid-template-columns:minmax(0,1fr) 340px; }
  .ly__layers{ padding:32px 40px 24px 32px; }
  .ly__spine{ left:39px; }
  .ly__row, .ly__beyond{ grid-template-columns:16px 200px minmax(0,1fr); column-gap:24px; align-items:start; }
  .ly__dot{ grid-row:auto; }
  .ly__side{ border-top:0; border-left:1px solid var(--ly-line); padding:36px 32px; }
  .ly__beyond{ padding:28px 40px 28px 32px; }
}
/* motion start states, only once the script is running */
.ly-js .ly__spine{ transform:scaleY(0); }
.ly-js .ly__row{ opacity:0; transform:translateY(12px); }
.ly-js .ly__row .ly__dot{ background:var(--paper); border:2px solid var(--ly-bt); }
.ly-js .ly__row.is-lit .ly__dot{ background:var(--ly-bt); }
.ly-js .ly__side{ opacity:0; }
.ly-js .ly__beyond{ opacity:0; clip-path:inset(0% 0% 100% 0%); }
.ly__side .ly__kicker{ color:#674B27; }   /* darker on the tinted panel to pass 4.5:1 */

/* ============ What we do, visual redesign (wwd-redesign, 2026-10-08) ============ */
/* hero: one colour heading, the intro under it, the shared photo treatment */
#what-we-do-intro{ --hero-bright:.78; }
#what-we-do-intro .wwd-hsub{ margin:32px 0 0; max-width:46ch; font-family:var(--font-d); font-weight:400; font-size:clamp(17px,1rem + .3vw,20px);
  line-height:1.6; color:rgba(245,242,235,.85); }
@media (min-width:1024px){
  #what-we-do-intro.hero--photo::after{ background:
    linear-gradient(to top, #0C0F13 0%, rgba(12,15,19,0) 32%),
    linear-gradient(to right, rgba(12,15,19,.8) 0%, rgba(12,15,19,.76) 30%, rgba(12,15,19,.42) 55%, rgba(12,15,19,.38) 100%); }
}
@media (max-width:767.98px){ #what-we-do-intro.hero--inner{ --hero-navh:96px; } }

/* the three stages: one paper section, blocks left, one pinned chart right */
.stg{ --stg-bt:#7A5A30; --stg-ink:#2A2620; --stg-fade:#6A6258; }
.stg__eyebrow{ display:flex; align-items:center; gap:12px; margin:0; padding-bottom:20px; border-bottom:1px solid rgba(122,90,48,.25);
  font-family:var(--font-d); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--stg-bt); }
.stg__eyebrow::after{ content:""; width:40px; height:1px; background:currentColor; }
.stg__grid{ display:grid; grid-template-columns:1fr; gap:40px; }
.stg__block{ padding:clamp(40px,6vw,64px) 0; border-bottom:1px solid rgba(122,90,48,.2); }
.stg__block:last-child{ border-bottom:0; }
.stg__label{ margin:0 0 14px; font-family:var(--font-d); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--stg-bt); transition:color .4s; }
.stg__h{ margin:0; font-family:var(--font-d); font-weight:600; font-size:clamp(32px,1.4rem + 1.9vw,46px); line-height:1.08; letter-spacing:-.02em; color:var(--stg-ink); transition:color .4s; }
.stg__p{ margin:18px 0 0; max-width:44ch; font-family:var(--font-b); font-size:17px; line-height:1.65; color:var(--paper-dim); transition:color .4s; }
.stg__result{ margin-top:28px; padding-left:18px; border-left:2px solid var(--stg-bt); }
.stg__rh{ margin:0 0 8px; font-family:var(--font-d); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--stg-bt); }
.stg__res{ list-style:none; margin:0; padding:0; }
.stg__res li{ padding:4px 0; font-family:var(--font-d); font-weight:500; font-size:18px; line-height:1.4; color:var(--stg-ink); transition:color .4s; }
/* the chart card */
.stg__card{ margin:0; padding:28px; background:#F1ECE2; border:1px solid rgba(122,90,48,.25); }
.stg__svg{ display:block; width:100%; height:auto; aspect-ratio:600 / 290; overflow:visible; }
.stg__tint{ fill:rgba(122,90,48,.10); opacity:0; }
.stg__div, .stg__base{ stroke:rgba(42,38,32,.16); stroke-width:1; vector-effect:non-scaling-stroke; }
.stg__seg{ fill:none; stroke:var(--stg-ink); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.stg__dot{ fill:var(--stg-bt); }
.stg__note{ font-family:var(--font-d); font-weight:600; font-size:15px; fill:var(--stg-bt); }
.stg__labels{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:14px; }
.stg__labels span{ padding-top:10px; border-top:2px solid transparent; text-align:center; font-family:var(--font-d); font-weight:600; font-size:14px; color:var(--stg-ink); }
.stg__cap{ display:none; margin:14px 0 0; font-family:var(--font-b); font-size:15px; line-height:1.5; color:var(--paper-dim); }
.stg__caps{ list-style:none; margin:16px 0 0; padding:0; }
.stg__caps li{ padding:6px 0; font-family:var(--font-b); font-size:15px; line-height:1.5; color:var(--paper-dim); }
.stg__caps b{ font-weight:600; color:var(--stg-ink); }
/* with the script: one stage at a time */
.stg-js .stg__cap{ display:block; }
.stg-js .stg__caps{ display:none; }
.stg-js .stg__note, .stg-js .stg__dot{ opacity:0; }
.stg-js .stg__labels span{ font-weight:500; color:#6A6258; transition:color .4s, border-color .4s; }
.stg-js .stg__labels span.is-on{ font-weight:600; color:var(--stg-ink); border-top-color:var(--stg-bt); }
.stg-js .stg__block:not(.is-on) .stg__label,
.stg-js .stg__block:not(.is-on) .stg__h,
.stg-js .stg__block:not(.is-on) .stg__p,
.stg-js .stg__block:not(.is-on) .stg__res li{ color:var(--stg-fade); }
.stg-js .stg__block:not(.is-on) .stg__result{ border-left-color:rgba(122,90,48,.4); }
@media (min-width:1024px){
  .stg__grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:80px; align-items:start; }
  .stg__block{ min-height:78vh; display:flex; flex-direction:column; justify-content:center; }
  .stg__aside{ align-self:stretch; }
  .stg__sticky{ position:sticky; top:110px; padding:clamp(40px,6vw,64px) 0; }
  .stg__card{ padding:34px; }
}
/* below 1024: the chart once, full width, above the blocks, the whole line visible (option B) */
@media (max-width:1023.98px){
  .stg__aside{ order:-1; margin-top:32px; }
  .stg-js .stg__cap{ display:none; }
  .stg-js .stg__caps{ display:block; }
  .stg-js .stg__seg{ opacity:1 !important; }
  .stg-js .stg__note, .stg-js .stg__dot{ opacity:1 !important; }
  .stg-js .stg__tint{ opacity:0 !important; }
  .stg-js .stg__labels span{ font-weight:600; color:var(--stg-ink); }
  .stg-js .stg__labels span.is-on{ border-top-color:transparent; }
  .stg-js .stg__block:not(.is-on) .stg__label{ color:var(--stg-bt); }
  .stg-js .stg__block:not(.is-on) .stg__h, .stg-js .stg__block:not(.is-on) .stg__res li{ color:var(--stg-ink); }
  .stg-js .stg__block:not(.is-on) .stg__p{ color:var(--paper-dim); }
  .stg-js .stg__block:not(.is-on) .stg__result{ border-left-color:var(--stg-bt); }
  .stg__card{ padding:18px; }
  .stg__note{ font-size:26px; }
}

/* what does your organisation need: hairlines only, quiet tags, arrows on intent */
#where-to-start .wts__row:nth-child(even){ background:none; }
#where-to-start .wts__tag{ font-family:var(--font-d); font-weight:600; font-size:13px; letter-spacing:0; text-transform:none; }
#where-to-start .wts__arw{ opacity:0; transition:opacity .2s ease; }
#where-to-start .wts__row:hover .wts__arw, #where-to-start .wts__row:focus-visible .wts__arw{ opacity:1; }
#where-to-start .wts__row::before{ background:rgba(214,164,97,.12); }
#where-to-start .wts__row:hover .wts__sit, #where-to-start .wts__row:focus-visible .wts__sit,
#where-to-start .wts__row:hover .wts__tag, #where-to-start .wts__row:focus-visible .wts__tag{ color:inherit; }
#where-to-start .wts__row:hover .wts__tag, #where-to-start .wts__row:focus-visible .wts__tag{ color:var(--bronze); }
#where-to-start .wts__row:hover .wts__arw, #where-to-start .wts__row:focus-visible .wts__arw{ color:var(--bronze); }
#where-to-start .wts__note{ font-family:var(--font-d); font-weight:500; font-size:18px; color:var(--text); }
#where-to-start .wts__note a{ color:var(--text); }
#where-to-start .wts__more{ font-family:var(--font-d); font-weight:500; font-size:18px; color:var(--text); gap:10px; }
#where-to-start .wts__more .ledger-ln__arw{ width:24px; height:14px; }

/* ============ Why decisions don't deliver, final rebuild (why-final, 2026-10-08) ============ */
/* hero: grows to fit; two actions and one line under them */
#why-intro.wy-hero{ min-height:auto; padding-bottom:clamp(48px,7vh,80px); }
@media (min-width:1024px){ #why-intro.wy-hero{ min-height:min(84svh,960px); } }
.wy-hero .hero__sub.wy-hero__lede{ max-width:40ch; color:var(--text); }
.wy-hero__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:44px; }
.wy-hero__acts .btn{ margin:0; }
.wy-tlink{ display:inline-flex; align-items:center; gap:8px; padding-bottom:3px; border-bottom:2px solid var(--bronze); font-family:var(--font-d); font-weight:600; font-size:16px;
  color:var(--text); text-decoration:none; transition:color .2s ease; }
.wy-tlink span{ transition:transform .3s cubic-bezier(.23,1,.32,1); }
.wy-tlink:hover{ color:var(--bronze); }
.wy-tlink:hover span{ transform:translateX(3px); }
.wy-tlink:focus-visible{ outline:2px solid var(--bronze); outline-offset:4px; }
@media (pointer:coarse){ .wy-tlink{ min-height:44px; } }
@media (max-width:767.98px){
  #why-intro.wy-hero{ --hero-navh:122px; --hero-pad:18px; min-height:auto; }
  #why-intro.wy-hero .wrap{ display:flex; flex-direction:column; align-items:flex-start; }   /* phones: the offer moves below the actions */
  .wy-hero .eyebrow{ order:1; } .wy-hero .hero__title{ order:2; } .wy-hero__lede{ order:3; } .wy-hero__acts{ order:4; margin-top:28px; } .wy-hero__line{ order:5; }
  .wy-hero .hero__title{ font-size:44px; line-height:1.05; }
  }

@media (max-width:1023.98px){ .wy-hero .wf__floors{ display:none; } }   /* phones and tablets: the floor lights would run behind the text */

/* sections */
.wy-sec{ padding:clamp(80px,9vw,128px) 0; background:var(--ink); color:var(--text); }
.wy-sec--rule{ border-top:1px solid rgba(245,242,235,.12); }
.wy-sec--paper{ background:var(--paper); color:var(--paper-ink); }
.wy-eyebrow{ display:flex; align-items:center; gap:12px; margin:0 0 16px; font-family:var(--font-d); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--bronze); }
.wy-eyebrow::after{ content:""; width:40px; height:1px; background:currentColor; }
.wy-sec--paper .wy-eyebrow{ color:#7A5A30; }
.wy-h2{ margin:0; max-width:18ch; font-family:var(--font-d); font-weight:600; font-size:clamp(2.2rem,1.2rem + 3vw,3.6rem); line-height:1.05; letter-spacing:-.02em; }
.wy-intro{ margin:20px 0 0; max-width:52ch; font-family:var(--font-d); font-weight:400; font-size:clamp(17px,1rem + .3vw,20px); line-height:1.55; color:rgba(245,242,235,.78); }
.wy-sec--paper .wy-intro{ color:#4A443B; }
.wy-sec .wy-h2{ color:var(--text); }
.wy-sec--paper .wy-h2{ color:var(--paper-ink); }

/* 2. the diagram */
/* motion start states (only with the script) */

/* 3. the four parts (paper) */
.wy-parts{ list-style:none; margin:clamp(40px,5vw,56px) 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:36px; }
.wy-part{ padding-top:18px; border-top:2px solid #7A5A30; }
.wy-part__name{ margin:0; font-family:var(--font-d); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#7A5A30; }
.wy-part__pull{ margin:10px 0 0; font-family:var(--font-d); font-weight:600; font-size:clamp(21px,1rem + .6vw,24px); line-height:1.2; color:var(--paper-ink); }
.wy-part__p{ margin:12px 0 0; font-family:var(--font-b); font-size:15px; line-height:1.6; color:#4A443B; }
@media (min-width:768px){ .wy-parts{ grid-template-columns:1fr 1fr; gap:40px 32px; } }
@media (min-width:1024px){ .wy-parts{ grid-template-columns:repeat(4,1fr); gap:28px; } }

/* 4. signs */
.wy-signs{ list-style:none; margin:clamp(36px,5vw,52px) 0 0; padding:0; display:grid; grid-template-columns:1fr; column-gap:48px; }
@media (min-width:1024px){ .wy-signs{ grid-template-columns:1fr 1fr; } }
.wy-sign{ border-top:1px solid rgba(214,164,97,.3); }
.wy-sign__row{ display:flex; align-items:flex-start; gap:16px; padding:18px 0; cursor:pointer; }
.wy-sign__cb{ position:absolute; opacity:0; width:1px; height:1px; }
.wy-sign__box{ flex:none; width:22px; height:22px; margin-top:2px; border:2px solid var(--bronze); border-radius:3px; box-sizing:border-box; display:grid; place-items:center; transition:background-color .2s ease; }
.wy-sign__box::after{ content:""; width:10px; height:5px; border-left:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(-45deg) translate(1px,-1px); opacity:0; }
.wy-sign__cb:checked + .wy-sign__box{ background:var(--bronze); }
.wy-sign__cb:checked + .wy-sign__box::after{ opacity:1; }
.wy-sign__cb:focus-visible + .wy-sign__box{ outline:2px solid var(--text); outline-offset:3px; }
.wy-sign__t{ font-family:var(--font-d); font-weight:500; font-size:clamp(17px,1rem + .2vw,19px); line-height:1.4; color:var(--text); }
.wy-sign__exp{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s cubic-bezier(.23,1,.32,1); }
.wy-sign__exp-in{ min-height:0; overflow:hidden; }
.wy-sign__exp p{ margin:0 0 18px 38px; font-family:var(--font-b); font-size:15px; line-height:1.55; color:rgba(245,242,235,.72); }
.wy-sign:has(.wy-sign__cb:checked) .wy-sign__exp{ grid-template-rows:1fr; }
.wy-count{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 24px; margin-top:32px; padding-top:24px; border-top:1px solid rgba(214,164,97,.3); opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s cubic-bezier(.23,1,.32,1); }
.wy-count.is-in{ opacity:1; transform:none; }
.wy-count__n{ font-family:var(--font-d); font-weight:600; font-size:clamp(40px,2rem + 1.6vw,52px); line-height:1; color:var(--bronze); font-variant-numeric:tabular-nums; }
.wy-count__t{ margin:0; max-width:44ch; font-family:var(--font-d); font-weight:500; font-size:18px; line-height:1.45; color:var(--text); }
.wy-count__link{ color:var(--bronze); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px; }
.wy-count__link:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; }

/* 5. what fixes it */
.wy-stmt{ margin:0; max-width:30ch; font-family:var(--font-d); font-weight:500; font-size:clamp(28px,1.2rem + 2vw,40px); line-height:1.2; letter-spacing:-.015em; color:var(--text); }
.wy-stmt b{ font-weight:600; color:var(--bronze); }

/* ============ Why decisions don't deliver, readability pass (why-readability, 2026-10-08) ============ */
.wy-sec{ padding:104px 0; }
@media (max-width:767.98px){ .wy-sec{ padding:72px 0; } }
.wy-intro{ font-family:var(--font-d); font-weight:400; font-size:20px; line-height:1.6; color:rgba(245,242,235,.88); }
.wy-sec--paper .wy-intro{ color:#3E3931; }
/* 3. the diagram: centred, narrower, shorter */
.wy-sec--center > .wrap > .wy-eyebrow{ justify-content:center; }
.wy-sec--center > .wrap > .wy-eyebrow::before{ content:""; width:40px; height:1px; background:currentColor; }
.wy-sec--center > .wrap > .wy-h2{ margin-left:auto; margin-right:auto; text-align:center; }
.wy-sec--center > .wrap > .wy-intro{ margin-left:auto; margin-right:auto; text-align:center; max-width:50ch; }
/* 4. four parts: two by two */
#four-places .wy-parts{ gap:56px 72px; }
@media (min-width:768px){ #four-places .wy-parts{ grid-template-columns:1fr 1fr; } }
#four-places .wy-part__name{ font-size:13px; }
#four-places .wy-part__pull{ font-size:clamp(24px,1rem + 1vw,30px); }
#four-places .wy-part__p{ max-width:52ch; font-size:18px; line-height:1.65; color:#3E3931; }
/* 5. signs: heading left, list right */
.wy-signs-grid{ display:grid; grid-template-columns:1fr; gap:32px; }
@media (min-width:1024px){ .wy-signs-grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:72px; align-items:start; } }
#signs .wy-signs{ margin:0; grid-template-columns:1fr; border-bottom:1px solid rgba(214,164,97,.3); }
#signs .wy-sign__t{ font-size:20px; line-height:1.4; }
#signs .wy-sign__exp p{ font-size:16px; color:rgba(245,242,235,.88); }
#signs .wy-count{ margin-top:28px; }
@media (min-width:1024px){ #signs .wy-signs-grid__r{ padding-top:30px; } }
/* 6. what fixes it (paper) */
.wy-fix .wy-eyebrow{ color:#7A5A30; }
.wy-fix .wy-stmt{ max-width:26ch; font-size:clamp(30px,1.3rem + 2vw,44px); color:var(--paper-ink); }
.wy-fix .wy-stmt b{ color:#7A5A30; }
/* 7. getting started (dark) */
.wy-hero .btn.btn--solid, #start .btn.btn--solid{ font-family:var(--font-d); font-weight:600; font-size:17px; padding:18px 30px; }
.wy-hero .btn.btn--solid .btn__label, #start .btn.btn--solid .btn__label{ font-size:17px; }
/* body copy on dark: no faint paragraphs */
#follow .wy-intro, #signs .wy-intro{ color:rgba(245,242,235,.88); }

/* What we do small changes (wwd-small-changes, 2026-10-08) */
.stg__notes{ display:none; }
@media (max-width:767.98px){
  .stg__notes{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:10px; }
  .stg__notes span{ font-family:var(--font-d); font-weight:600; font-size:14px; line-height:1.25; color:#7A5A30; }
  .stg__note{ display:none; }
  .stg__labels span{ font-size:14px; }
  .stg__caps{ margin-top:16px; }
}
.stg__next{ margin:10px 0 0; font-family:var(--font-b); font-style:italic; font-size:15px; line-height:1.5; color:#3E3931; }
.stg__next a{ color:#7A5A30; text-decoration:underline; text-underline-offset:3px; }
.stg__next a:focus-visible{ outline:2px solid #7A5A30; outline-offset:2px; }

/* Why: what's assumed / what's real (why-small-changes, 2026-10-08) */
#follow .wy-h2{ max-width:20ch; font-size:clamp(2rem,1.2rem + 2.6vw,3.25rem); }
#follow .wy-intro{ max-width:54ch; }
.ar{ position:relative; max-width:1100px; margin:64px auto 0; }
.ar__svg{ position:absolute; left:0; top:0; pointer-events:none; overflow:visible; z-index:1; }
.ar__line{ fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.ar__head{ fill:#F5F2EB; }
.ar__mark{ fill:var(--ink); stroke-width:2; }
.ar__mark--a{ stroke:#D6A461; } .ar__mark--r{ stroke:#F5F2EB; }
.ar__t{ width:100%; border-collapse:collapse; table-layout:fixed; text-align:left; }
.ar__t col, .ar__t thead td{ width:170px; }
.ar__t thead td:first-child{ width:170px; }
.ar__h{ padding:0 0 18px 56px; font-family:var(--font-d); font-weight:600; font-size:22px; color:var(--text); }
.ar__h--a{ color:var(--bronze); }
.ar__row{ border-top:1px solid rgba(245,242,235,.14); }
.ar__row th, .ar__row td{ padding:26px 0 26px 56px; vertical-align:top; }
.ar__row th{ padding-left:0; }
.ar__lab{ font-family:var(--font-d); font-weight:600; font-size:20px; color:var(--text); }
.ar__a{ font-family:var(--font-b); font-size:19px; line-height:1.45; color:rgba(245,242,235,.85); }
.ar__r{ font-family:var(--font-b); font-weight:500; font-size:19px; line-height:1.45; color:var(--text); }
.ar__q{ font-family:var(--font-d); font-weight:600; letter-spacing:-.015em; color:var(--text); }
.ar__q--md{ font-size:clamp(24px,1rem + 1vw,30px); line-height:1.15; }
.ar__q--lg{ font-size:clamp(40px,1.6rem + 2vw,52px); line-height:1; }
.ar--js .ar__a, .ar--js .ar__r{ opacity:0; transition:opacity .4s ease; }
.ar--js .ar__a.is-on, .ar--js .ar__r.is-on{ opacity:1; }
.ar__mark, .ar__head{ transition:opacity .25s ease; }
@media (max-width:767.98px){
  .ar{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); margin:0; }
}
/* the page ends at "Prioritise execution" */
.wy-fix .btn.btn--solid{ font-family:var(--font-d); font-weight:600; font-size:17px; padding:18px 30px; }
/* no JavaScript: the line cannot be measured, so each column gets a plain rail in its gutter */
.no-js .ar__row td.ar__a{ background:linear-gradient(#D6A461,#D6A461) no-repeat 21px 0 / 3px 100%; }
.no-js .ar__row td.ar__r{ background:linear-gradient(#F5F2EB,#F5F2EB) no-repeat 21px 0 / 3px 100%; }

/* ============ Who we are small changes (who-small-changes, 2026-10-08) ============ */
/* figures: five across from 1100px; three across between 901 and 1099 */
@media (min-width:901px) and (max-width:1099.98px){
  #numbers .ab-proof__grid{ grid-template-columns:repeat(3,1fr); row-gap:2rem; }
  #numbers .ab-proof__col:nth-child(3n+1){ border-left:none; padding-left:0; }
}
/* who we've worked with: the layered organisation */
#worked .lw__h{ max-width:16ch; }
.lw__intro{ margin:24px 0 56px; max-width:54ch; font-family:var(--font-d); font-weight:400; font-size:clamp(18px,1rem + .4vw,21px); line-height:1.55; color:#3E3931; }
.lw__layers{ position:relative; list-style:none; margin:0; padding:0; border-top:1px solid rgba(42,38,32,.18); }
.lw__spine{ position:absolute; left:8px; width:2px; background:#7A5A30; transform-origin:top center; list-style:none; }
.lw__row{ display:grid; grid-template-columns:40px 1fr; column-gap:0; row-gap:6px; align-items:start; padding:22px 0; border-bottom:1px solid rgba(42,38,32,.18); }
.lw__dot{ grid-row:1 / span 2; position:relative; z-index:1; width:18px; height:18px; margin-top:.3em; border-radius:50%; background:#7A5A30; box-sizing:border-box; transition:background-color .3s ease; }
.lw__name{ margin:0; font-family:var(--font-d); font-weight:600; font-size:clamp(19px,1rem + .4vw,22px); line-height:1.3; color:var(--paper-ink); }
.lw__items{ margin:0; font-family:var(--font-b); font-weight:400; font-size:clamp(16px,.95rem + .2vw,18px); line-height:1.6; color:#3E3931; }
.lw__i{ white-space:nowrap; }
.lw__i:not(:last-child)::after{ content:"\00a0\00b7"; margin-right:.05em; color:#7A5A30; }
@media (max-width:599.98px){ .lw__items .lw__i{ display:block; white-space:normal; padding:2px 0; } .lw__items .lw__i::after{ content:none; } }   /* phones: one item per line */
.lw__across{ margin-top:40px; padding:30px 34px; background:var(--ink); color:var(--text); display:grid; grid-template-columns:1fr; gap:22px; }
.lw__across-h{ margin:0; font-family:var(--font-d); font-weight:600; font-size:24px; line-height:1.2; color:var(--text); }
.lw__across-p{ margin:8px 0 0; font-family:var(--font-b); font-size:15px; line-height:1.5; color:rgba(245,242,235,.75); }
.lw__across-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:16px 24px; }
.lw__across-list li{ padding-top:12px; border-top:2px solid rgba(214,164,97,.55); font-family:var(--font-b); font-weight:500; font-size:16px; line-height:1.4; color:var(--text); }
.lw__across-list li:first-child{ color:var(--bronze); }
.lw__row--along{ margin-top:32px; border-bottom:0; padding:0; }
@media (min-width:600px){ .lw__across-list{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){
  .lw__row{ grid-template-columns:40px 220px minmax(0,1fr); }
  .lw__dot{ grid-row:auto; }
  .lw__across{ grid-template-columns:260px minmax(0,1fr); gap:40px; }
  .lw__across-list{ grid-template-columns:repeat(5,1fr); }
}
.lw__row--along > span{ grid-row:1 / span 2; }
@media (min-width:1024px){ .lw__row--along > span{ grid-row:auto; } }
.lw-js .lw__spine{ transform:scaleY(0); }
.lw-js .lw__layers .lw__row{ opacity:0; transform:translateY(10px); }
.lw-js .lw__layers .lw__row .lw__dot{ background:var(--paper); border:2px solid #7A5A30; }
.lw-js .lw__layers .lw__row.is-lit .lw__dot{ background:#7A5A30; }
.lw-js .lw__across{ opacity:0; }
.lw-js .lw__across-list li{ opacity:0; transform:translateY(8px); }
.lw-js .lw__row--along{ opacity:0; transform:translateY(8px); }
/* values: one row of columns (dark section) */
.vr{ display:grid; grid-template-columns:1fr; gap:0; margin-top:clamp(2.4rem,5vw,3.4rem); }
.vr__col{ padding:24px 0; border-top:1px solid rgba(245,242,235,.14); }
.vr__name{ margin:0; font-family:var(--font-d); font-weight:600; font-size:24px; line-height:1.2; color:var(--bronze); }
.vr__pos{ margin:10px 0 0; font-family:var(--font-d); font-weight:600; font-size:12px; line-height:1.5; letter-spacing:.12em; text-transform:uppercase; color:rgba(245,242,235,.75); }
.vr__exp{ margin:12px 0 0; font-family:var(--font-b); font-size:17px; line-height:1.6; color:rgba(245,242,235,.88); }
@media (min-width:768px){ .vr{ grid-template-columns:1fr 1fr; gap:40px 48px; } .vr__col{ border-top:2px solid var(--bronze); padding:22px 0 0; } }
@media (min-width:1024px){ .vr{ grid-template-columns:repeat(4,1fr); gap:40px; } }
.lw-js .vr__col{ opacity:0; transform:translateY(12px); }
#numbers .ab-proof__grid .ab-proof__n{ font-size:clamp(44px,1.6rem + 2.2vw,62px); }   /* five across: room for 90%+ */
/* Why tidy (why-tidy, 2026-10-08): the close in two columns; one-colour quotes; one style of row label */
.ar__lab{ white-space:nowrap; }
.ar__t thead td:first-child{ width:190px; }
.wy-fix{ padding:104px 0 112px; }
.wy-fix__grid{ display:grid; grid-template-columns:1fr; gap:40px; }
.wy-fix .wy-stmt{ margin:0; max-width:20ch; font-family:var(--font-d); font-weight:500; font-size:clamp(32px,1.4rem + 2.2vw,48px); line-height:1.15; color:var(--paper-ink); }
.wy-fix .wy-stmt b{ font-weight:600; color:#7A5A30; }
.wy-fix__r{ padding-top:26px; border-top:2px solid #7A5A30; }
.wy-fix__line{ margin:0; max-width:18ch; font-family:var(--font-d); font-weight:600; font-size:clamp(22px,1rem + .8vw,26px); line-height:1.3; color:var(--paper-ink); }
.wy-fix__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin-top:26px; }
.wy-fix__acts .btn{ margin:0; }
.wy-fix__mail{ font-family:var(--font-b); font-weight:500; font-size:16px; color:#3E3931; text-decoration:none; border-bottom:1px solid #7A5A30; padding-bottom:2px; }
.wy-fix__mail:hover{ color:#7A5A30; }
.wy-fix__mail:focus-visible{ outline:2px solid #7A5A30; outline-offset:3px; }
@media (min-width:1024px){ .wy-fix__grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:80px; align-items:end; } }
@media (max-width:767.98px){ .wy-fix{ padding:72px 0 80px; } .wy-fix__acts{ flex-direction:column; align-items:stretch; } .wy-fix__acts .btn{ justify-content:center; text-align:center; } .wy-fix__mail{ align-self:flex-start; } }
@media (pointer:coarse){ .wy-fix__mail{ display:inline-flex; align-items:center; min-height:44px; } }

/* Why formatting (why-formatting, 2026-10-08): follow head left-aligned to the table; table on one top line with a
   narrower gap; assumed side faded, real side bronze; six flip cards on phones; the close aligned to the top */
.ar__top{ max-width:1040px; margin:0 auto; }
#follow .ar__top .wy-h2{ max-width:24ch; }
#follow .ar__top .wy-intro{ max-width:62ch; text-wrap:pretty; }
.ar__br{ display:none; }
@media (min-width:1024px){ .ar__br{ display:inline; } #follow .ar__top .wy-h2{ max-width:none; } }
.ar{ max-width:1040px; }
.ar__h{ padding:0 0 18px 48px; }
.ar__h--a{ color:rgba(245,242,235,.58); }
.ar__h--r{ color:var(--bronze); }
.ar__row th, .ar__row td{ padding:28px 48px 28px 48px; vertical-align:top; }
.ar__row th{ padding-left:0; padding-right:16px; }
.ar__row td.ar__r{ padding-right:0; }
.ar__lab{ line-height:1.45; }
.ar__a, .ar__a.ar__q{ color:rgba(245,242,235,.58); }
.ar__r, .ar__r.ar__q{ color:var(--text); }
.ar__head{ fill:var(--bronze); }
.ar__mark--a{ stroke:#6E6B66; } .ar__mark--r{ stroke:var(--bronze); }
.no-js .ar__row td.ar__a{ background:linear-gradient(#6E6B66,#6E6B66) no-repeat 0 0 / 3px 100%; }
.no-js .ar__row td.ar__r{ background:linear-gradient(#D6A461,#D6A461) no-repeat 0 0 / 3px 100%; }
.arf{ display:none; }
@media (max-width:767.98px){
  .ar{ display:none; }
  .arf{ display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:1fr auto; grid-auto-rows:1fr; gap:14px; list-style:none; margin:40px 0 0; padding:0; }
  .arf__item{ position:relative; display:flex; }
  .arf__note{ margin:-4px 0 8px; }
  .arf__hint{ margin:0; font-family:var(--font-b); font-size:14px; line-height:1.4; color:rgba(245,242,235,.72); }
  .arf__card{ display:block; width:100%; margin:0; padding:0; border:0; border-radius:4px; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; perspective:1200px; -webkit-tap-highlight-color:transparent; }
  .arf__card:focus-visible{ outline:2px solid var(--bronze); outline-offset:4px; }
  .arf__in{ display:grid; height:100%; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.4,.1,.2,1); }
  .arf__card[aria-pressed="true"] .arf__in{ transform:rotateY(180deg); }
  .arf__face{ grid-area:1 / 1; display:flex; flex-direction:column; padding:22px; background:#14181E; border:1px solid rgba(245,242,235,.16); border-top:2px solid #6E6B66; border-radius:4px; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
  .arf__face--r{ transform:rotateY(180deg); border-top-color:var(--bronze); }
  .arf__lab{ display:block; font-family:var(--font-d); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--bronze); }
  .arf__h{ display:block; margin:10px 0 8px; font-family:var(--font-d); font-weight:600; font-size:17px; color:rgba(245,242,235,.58); }
  .arf__face--r .arf__h{ color:var(--text); }
  .arf__t{ display:block; font-family:var(--font-b); font-size:17px; line-height:1.45; color:rgba(245,242,235,.6); }
  .arf__face--r .arf__t{ font-weight:500; color:var(--text); }
  .arf__t--md, .arf__t--lg{ font-family:var(--font-d); font-weight:600; letter-spacing:-.015em; }
  .arf__t--md{ font-size:26px; line-height:1.15; }
  .arf__t--lg{ font-size:40px; line-height:1; }
  .no-js .arf{ grid-auto-rows:auto; }
  .no-js .arf__note{ display:none; }
  .no-js .arf__hint{ display:none; }
  .no-js .arf__card{ cursor:default; perspective:none; }
  .no-js .arf__in{ display:flex; flex-direction:column; gap:8px; transform:none; transition:none; }
  .no-js .arf__face{ grid-area:auto; transform:none; }
}
@media (max-width:767.98px) and (prefers-reduced-motion:reduce){
  .arf__card{ perspective:none; }
  .arf__in, .arf__card[aria-pressed="true"] .arf__in{ transform:none; transition:none; }
  .arf__face{ transform:none; transition:opacity .3s ease; }
  .arf__face--r{ opacity:0; }
  .arf__card[aria-pressed="true"] .arf__face--a{ opacity:0; }
  .arf__card[aria-pressed="true"] .arf__face--r{ opacity:1; }
  .no-js .arf__face--r{ opacity:1; }
}
@media (min-width:768px){ .wy-fix{ padding:96px 0; } }
@media (min-width:1024px){
  .wy-fix__line{ max-width:28ch; }
  .wy-fix__grid{ grid-template-columns:minmax(0,1fr) auto; column-gap:64px; align-items:start; }
  .wy-fix__r{ align-self:stretch; display:flex; flex-direction:column; margin-top:9px; }
  .wy-fix__acts{ flex-wrap:nowrap; margin-top:auto; padding-top:26px; }
}
@media (min-width:768px) and (max-width:1023.98px){ .wy-fix__acts{ flex-direction:column; align-items:flex-start; } }

/* Why closing line (why-closing-line, 2026-10-08): one colour, two sentences on their own lines, left-aligned to the table */
.ar__end{ max-width:1040px; margin:72px auto 0; }
.ar__end-a{ margin:0; font-family:var(--font-d); font-weight:500; font-size:22px; line-height:1.4; color:rgba(245,242,235,.7); }
.ar__end-b{ margin:14px 0 0; max-width:30ch; font-family:var(--font-d); font-weight:600; font-size:38px; line-height:1.25; letter-spacing:-.01em; color:var(--text); }
.ar__end .wy-tlink{ margin-top:32px; }
#follow{ padding-bottom:96px; }
@media (max-width:767.98px){
  #follow{ padding-bottom:72px; }
  .ar__end{ margin-top:56px; }
  .ar__end-a{ font-size:18px; }
  .ar__end-b{ font-size:28px; }
}

/* Why close polish (why-close-polish, 2026-10-08): statement in one colour, lighter right line, one bronze, even spacing */
.wy-fix .wy-stmt{ font-weight:400; color:var(--paper-ink); }
.wy-fix .wy-stmt b{ font-weight:600; color:var(--paper-ink); }
.wy-fix__line{ font-weight:500; }
.wy-fix__r{ border-top-color:#D6A461; }
.wy-fix__mail{ border-bottom:1px solid #D6A461; padding-bottom:4px; transition:box-shadow .2s ease; }
.wy-fix__mail:hover{ box-shadow:0 1px 0 #D6A461; }
@media (max-width:767.98px){ .wy-fix{ padding:64px 0; } }

/* Who we've worked with polish (who-layers-polish, 2026-10-08): one colour in the across band, band lined up with the
   layer names, item rules level with the heading's cap height, "Alongside" a step smaller than the layer names */
.lw__across{ padding:30px 34px 30px 40px; align-items:start; }
.lw__across-list li:first-child{ color:var(--text); }
.lw__name--along{ font-size:clamp(17px,calc(1rem + .4vw - 2px),20px); }
@media (min-width:1024px){ .lw__across-list{ align-items:start; } .lw__across-list li{ margin-top:6px; } }

/* Our story layout (who-our-story-v3, 2026-10-09): lead + three paragraphs on the left, links on the right */
.st{ display:grid; grid-template-columns:minmax(0,1fr); }
.st__main{ max-width:62ch; }
.st__lead{ margin:0 0 24px; font-family:var(--font-d); font-weight:400; font-size:25px; line-height:1.5; color:var(--text); }
.st .ab-story__p{ font-family:var(--font-b); font-weight:400; font-size:19px; line-height:1.75; color:rgba(245,242,235,.78); max-width:none; }
.st .ab-story__p + .ab-story__p{ margin-top:24px; }
.st__lead, .st .ab-story__p{ text-wrap:pretty; }
.st__side .t10-story2__links{ margin-top:48px; }
.st__side .link-ledger{ margin-top:0; padding:24px 4px; }
.st__side .link-ledger{ gap:16px; }
.st__side .link-ledger__text{ font-size:26px; }
@media (min-width:1024px){ .st__side .link-ledger__text{ font-size:clamp(20px,1.67vw,24px); } .st__side .link-ledger__arw{ width:32px; height:20px; } }
@media (min-width:1024px){
  .st{ grid-template-columns:minmax(0,7fr) minmax(0,4fr); column-gap:112px; align-items:start; }
  .st__side .t10-story2__links{ margin-top:0; }
}
@media (max-width:767.98px){
  .st__lead{ font-size:21px; }
  .st .ab-story__p{ font-size:17px; }
  .st__side .link-ledger__text{ font-size:clamp(18px,5.1vw,20px); }   /* each link on one line at 360 */
  .st__side .link-ledger__arw{ width:32px; height:20px; }
}