/* =========================================================
   Matt & Zen Consulting — production styles
   Two typefaces: Newsreader (display serif) + IBM Plex Sans (UI).
   Palette: warm bronze/terracotta ground, near-white paper, one
   dominant bronze accent (values checked against the live site's
   own orange/amber so the redesign stays recognisably "theirs").
   Deliberately single art direction (no dark-mode inversion).
   ========================================================= */

:root{
  color-scheme: light;

  --paper:#F8F4EA;        /* near-white, warm */
  --paper-2:#F0E6D3;      /* quiet panel, warm */
  --ink:#2A1C10;          /* warm dark bronze-brown — headings & body on paper */
  --ink-2:#5C4630;        /* secondary text */
  --ink-3:#7D6852;        /* muted / captions */

  --navy:#1B0F06;         /* dark section ground — deep bronze-espresso, not navy */
  --navy-2:#3D2312;
  --on-navy:#F6EEE0;      /* paper text on dark ground */
  --on-navy-2:#D8C3A8;    /* secondary on dark ground */
  --on-navy-3:#AD8E6D;    /* muted on dark ground */

  --brass:#CE6B43;        /* bronze/terracotta accent, only ever on a dark ground. Was #C2603A,
                             which measured 4.499:1 on --navy and so missed AA for small text
                             by a thousandth, on every label and footer heading on the site. */
  --brass-ink:#96432A;    /* darker bronze — accent as small text on paper (AA), and button fills */

  --line:#E1D4BE;         /* hairline on paper */
  --line-navy:#4A2E19;    /* hairline on dark ground */

  --maxw:1200px;
  --gutter:clamp(22px,5.2vw,80px);
  --measure:62ch;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
strong{font-weight:600}

::selection{background:var(--navy);color:var(--on-navy)}
:focus-visible{outline:2px solid var(--brass-ink);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:var(--on-navy);
  padding:.7em 1.1em;z-index:200;text-decoration:none}
.skip:focus{left:12px;top:12px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);width:100%}

/* ---------- Type roles ---------- */
.label{
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brass-ink);
}
.label--on-navy{color:var(--brass)}
.display{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.012em;
  font-size:clamp(2.35rem,6vw,4.35rem);
}
.display em{font-style:italic}
.h2{
  font-family:var(--serif);
  font-size:clamp(1.7rem,3.4vw,2.55rem);
  line-height:1.1;
  letter-spacing:-.008em;
}
#start{scroll-margin-top:var(--hdr-h,72px)}
.lead{
  font-size:clamp(1.12rem,1.7vw,1.32rem);
  line-height:1.55;
  color:var(--ink-2);
}
.prose{max-width:var(--measure)}
.prose p + p{margin-top:1.05rem}
.prose p{color:var(--ink-2)}

/* ---------- Text-style link / CTA ---------- */
.textlink{
  display:inline-flex;align-items:baseline;gap:.5em;
  font-weight:500;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--brass-ink);
  padding-bottom:2px;
  transition:color .2s ease,border-color .2s ease,gap .2s ease;
}
.textlink:hover{color:var(--brass-ink);gap:.75em}
.textlink--on-navy{color:var(--on-navy);border-color:var(--brass)}
.textlink--on-navy:hover{color:var(--brass)}
.textlink .arw{font-family:var(--sans)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  /* Opaque, and no backdrop-filter. A blurred backdrop has to be re-sampled and re-blurred
     every frame the page moves under it, for the full width of the bar — one of the more
     expensive things a sticky header can ask for. At 86% paper it was buying almost no
     visible effect, and the bar reads the same solid. */
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:72px}
.brandmark{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink);white-space:nowrap}
.brandmark__logo{height:44px;width:auto;display:block;transition:filter .2s ease}
@media(max-width:560px){.brandmark__logo{height:36px}}

.primary-nav{display:flex;align-items:center;gap:clamp(.8rem,1.7vw,1.6rem)}
/* a touch more air than before: seven items bunched at one end looked like a list, spaced
   and centred they read as a bar */
.primary-nav__list{display:flex;gap:clamp(.85rem,1.75vw,1.9rem);list-style:none;margin:0;padding:0}
.primary-nav__list a{font-size:.88rem;text-decoration:none;color:var(--ink-2);position:relative;padding:.15em 0;white-space:nowrap}
.primary-nav__list a:hover,.primary-nav__list a[aria-current="page"]{color:var(--ink)}
/* ::before, not ::after. "Practice" carries both this current-page underline and the
   drop-down caret, and both were drawing into ::after: the caret rule won width,
   height and the 45deg rotation, but inherited position:absolute/left/right/bottom
   from this one, so the caret landed under the word as a stray diamond and the
   current-page underline disappeared. Separate pseudo-elements, both survive. */
.primary-nav__list a[aria-current="page"]::before{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--brass-ink)}
.nav-cta{font-size:.92rem}
.nav-cta-group{display:flex;align-items:center;gap:clamp(1rem,2vw,1.5rem)}
.textlink--muted{color:var(--ink-2);border-color:var(--line)}
.textlink--muted:hover{color:var(--brass-ink);border-color:var(--brass-ink)}

/* Desktop: three tracks, so the links sit in the true centre of the bar rather than
   wherever the logo and the call to action happen to leave room. `space-between` put the
   whole nav — links and button together — hard right, which read as lopsided.
   Both outer tracks are 1fr, so the centre column stays centred whatever widths the logo
   and the button take. `display:contents` lifts the list and the button out of the <nav>
   box so each can take a track; the landmark and its label survive it.
   This has to sit after the .primary-nav rules above, not next to .site-header__inner —
   same specificity, and the later one wins. */
@media(min-width:1081px){
  .site-header__inner{display:grid;grid-template-columns:1fr auto 1fr;
    align-items:center;gap:clamp(1rem,2.2vw,2.2rem)}
  .primary-nav{display:contents}
  .primary-nav__list{grid-column:2;justify-self:center}
  .nav-cta{grid-column:3;justify-self:end}
  /* The homepage has no inline nav — just the brandmark and the Menu button. Without
     this the button is auto-placed into the centre track meant for the links, and ends
     up in the middle of the bar. It belongs at the end, as it was. */
  .menu-toggle{grid-column:3;justify-self:end}
}

/* Practice dropdown — hover/focus reveal, all six pillars in one place */
.primary-nav__list li.has-dropdown{position:relative}
.primary-nav__list li.has-dropdown>a{display:inline-flex;align-items:center;gap:.4em}
.primary-nav__list li.has-dropdown>a::after{
  content:"";width:.42em;height:.42em;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);margin-top:-.3em;opacity:.65;transition:transform .18s ease}
.primary-nav__list li.has-dropdown:hover>a::after,
.primary-nav__list li.has-dropdown:focus-within>a::after{transform:rotate(225deg);margin-top:.15em}
/* The panel is set .9rem below the link so it does not crowd the bar, which left a strip
   of nothing between them: moving the pointer down to the panel crossed it, :hover went
   false and the panel closed before it could be reached. This bridges the strip, and only
   while the item is already open — an always-on invisible block under the bar would eat
   clicks on the hero behind it. It is wider than the link because the panel is centred
   and much wider, so the pointer may well travel diagonally. */
.primary-nav__list li.has-dropdown::before{content:"";display:none;position:absolute;
  top:100%;left:50%;width:264px;transform:translateX(-50%);height:1.1rem;z-index:19}
.primary-nav__list li.has-dropdown:hover::before,
.primary-nav__list li.has-dropdown:focus-within::before{display:block}
.nav-dropdown{
  position:absolute;top:100%;left:50%;transform:translate(-50%,-6px);margin-top:.9rem;
  min-width:248px;background:var(--paper);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 20px 44px -16px rgba(30,20,10,.28);
  list-style:none;margin-left:0;margin-right:0;padding:.45rem;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:20}
.primary-nav__list li.has-dropdown:hover>.nav-dropdown,
.primary-nav__list li.has-dropdown:focus-within>.nav-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.nav-dropdown a{display:block;padding:.6rem .85rem;font-size:.88rem;color:var(--ink-2);
  border-radius:4px;white-space:nowrap}
.nav-dropdown a:hover,.nav-dropdown a[aria-current="page"]{color:var(--ink);background:var(--paper-2)}
.nav-dropdown a[aria-current="page"]{font-weight:500}

/* mobile nav — toggle hidden on desktop, shown at <=1080 (nav now carries more items) */
.nav-toggle{background:none;border:1px solid var(--line);border-radius:2px;width:42px;height:38px;
  display:none;place-items:center;cursor:pointer;color:var(--ink)}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";display:block;width:18px;height:1.5px;background:currentColor;position:relative;transition:.2s}
.nav-toggle span::before{position:absolute;top:-5px}
.nav-toggle span::after{position:absolute;top:5px}
@media(max-width:1080px){
  .nav-toggle{display:grid}
  .primary-nav{position:fixed;inset:72px 0 auto 0;background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;gap:0;padding:0 var(--gutter) 1.4rem;
    max-height:calc(100vh - 72px);overflow-y:auto;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.22s ease}
  .primary-nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .primary-nav__list{flex-direction:column;gap:0;width:100%}
  .primary-nav__list li{border-bottom:1px solid var(--line);width:100%}
  .primary-nav__list a{display:block;padding:1rem 0;font-size:1.05rem}
  /* the link grows a 1rem padding box here, so an underline pinned to its bottom edge
     floats well clear of the word it belongs to */
  .primary-nav__list a[aria-current="page"]::before{bottom:.78rem}
  .nav-cta-group{flex-direction:column;align-items:flex-start;gap:0;width:100%}
  .nav-cta{padding:1.1rem 0 0}

  /* dropdown becomes an always-open, indented sublist — no hover on touch */
  .primary-nav__list li.has-dropdown{border-bottom:0}
  /* nothing to bridge once the sublist sits in the flow */
  .primary-nav__list li.has-dropdown:hover::before,
  .primary-nav__list li.has-dropdown:focus-within::before{display:none}
  .primary-nav__list li.has-dropdown>a::after{display:none}
  /* pointer-events:auto here used to defeat the closed panel's pointer-events:none —
     a child re-enabling hits overrides the parent that switched them off — so every
     inner page carried invisible, tappable nav links across the top of the content.
     Only live once the panel is actually open. */
  .nav-dropdown{position:static;transform:none;opacity:1;visibility:visible;pointer-events:none;
    margin:0 0 .4rem;padding:0 0 0 1.1rem;border:0;box-shadow:none;background:none;min-width:0}
  .primary-nav.is-open .nav-dropdown{pointer-events:auto}
  /* The desktop :hover/:focus-within pair is (0,4,1) and outranks the rule above.
     There is no hover on a phone, but focus landing anywhere in the menu fires
     :focus-within, which re-applied translate(-50%,0) — shifting the sublist half
     its width off the left of the screen — and switched hits back on. Beaten here
     at (0,4,1) and (0,5,1) respectively, rather than by reordering. */
  .primary-nav__list li.has-dropdown:hover>.nav-dropdown,
  .primary-nav__list li.has-dropdown:focus-within>.nav-dropdown{
    transform:none;pointer-events:none}
  .primary-nav.is-open li.has-dropdown:hover>.nav-dropdown,
  .primary-nav.is-open li.has-dropdown:focus-within>.nav-dropdown{pointer-events:auto}
  .nav-dropdown a{padding:.7rem 0;font-size:.98rem;border-bottom:1px solid var(--line)}
  .nav-dropdown li:last-child a{border-bottom:0}
}

/* ---------- Section rhythm ---------- */
main{display:block}
.section{padding-block:clamp(3.4rem,7.5vw,6.5rem)}
.section--tight{padding-block:clamp(2.6rem,5vw,4rem)}
/* A sticky hero stays put while the page scrolls over it, so anything following it has to
   carry its own ground or the hero shows straight through the text. :where() keeps this at
   zero specificity and it sits above the tinted modifiers, so those still win. */
.hero-mask ~ :where(.section){background:var(--paper)}
.section--navy{background:var(--navy);color:var(--on-navy)}
.section--navy .prose p{color:var(--on-navy-2)}
.section--navy .lead{color:var(--on-navy-2)}
.section--paper2{background:var(--paper-2)}
/* rises over whatever precedes it — a lighter bronze step + rounded top, like the close-form's rise */
.section--rise{position:relative;z-index:2;background:var(--navy-2);
  margin-top:-32px;border-radius:32px 32px 0 0;box-shadow:0 -24px 48px -30px rgba(0,0,0,.5);
  min-height:100svh;min-height:100vh;display:flex;align-items:center}
.section--rise > .wrap{width:100%}
/* .section--rise swaps the ground from --navy to the lighter --navy-2, where --brass
   measures 4.01:1 and misses AA. One step lighter restores it without moving the
   accent anywhere else on the site. */
.section--rise .label--on-navy{color:#DE8459}
@media(max-width:640px){.section--rise{margin-top:-20px;border-radius:20px 20px 0 0}}
.rule{height:1px;background:var(--line);border:0;margin:0}
.section--navy .rule{background:var(--line-navy)}

.section-head{display:grid;gap:1rem;max-width:60ch;margin-bottom:clamp(2rem,4vw,3rem)}
.section-head .label{margin:0}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(3.2rem,7vw,6rem) clamp(3rem,6vw,5rem)}
.hero__grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr}
@media(min-width:900px){.hero__grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:end}}
.hero__label{margin-bottom:1.6rem}
/* a text-only hero stacks its trailing padding on top of the next section's, which
   opens a dead gap — pull it in where the hero is just a statement and a standfirst */
.hero--tight{padding-bottom:clamp(.75rem,1.6vw,1.4rem)}
/* the 16ch display measure is for a short line; a full-sentence headline needs room.
   Chained deliberately — plain .hero--tight .display ties with .hero .display and loses on order */
.hero.hero--tight .display{max-width:30ch}
/* the standfirst's trailing margin exists to clear the hero actions — dead when absent */
.hero__standfirst:last-child{margin-bottom:0}
.hero .display{margin-bottom:1.7rem;max-width:16ch}
.hero__standfirst{max-width:48ch;margin-bottom:2rem}
.hero__actions{display:flex;flex-wrap:wrap;align-items:baseline;gap:1.5rem 2rem}

/* editorial navy plate used in place of photography */
.plate{
  position:relative;background:var(--navy);color:var(--on-navy);
  aspect-ratio:4/5;min-height:280px;border:1px solid var(--navy-2);
  display:flex;flex-direction:column;justify-content:space-between;padding:1.5rem;overflow:hidden;
}
.plate::before{content:"";position:absolute;inset:12px;border:1px solid var(--line-navy);pointer-events:none}
.plate--wide{aspect-ratio:16/10}
.plate--band{aspect-ratio:auto;min-height:220px}
.plate__meta{position:relative;font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-navy-3)}
.plate__word{position:relative;font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,1.9rem);
  line-height:1.15;color:var(--on-navy);max-width:18ch}
.plate__coord{position:relative;font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;color:var(--brass)}
/* photo variant — a real image behind the text, same scrim treatment as the service cards */
.plate--photo{background-size:cover;background-position:center}
.plate--photo::before{
  inset:0;border:none;
  background:linear-gradient(180deg,rgba(20,12,6,.6) 0%,rgba(20,12,6,.4) 35%,rgba(20,12,6,.44) 60%,rgba(20,12,6,.68) 100%)}
.plate--photo .plate__meta{color:var(--on-navy)}
.plate--photo .plate__word{text-shadow:0 2px 14px rgba(10,6,3,.55)}

/* Awaiting a photograph. A monogram on the navy ground rather than an empty box —
   it echoes the MZ mark, it is particular to the person, and it reads as a choice
   instead of something that failed to load. Sized in container units so the same
   markup works in the small team card and the large plate on a profile. */
.plate--initials{container-type:inline-size;align-items:center;justify-content:center;padding:0}
/* The rule beneath is 2.2em wide and sets this block's width, so without an
   explicit text-align the letter rendered hard left inside it — obvious on a
   single character. The left padding separately offsets letter-spacing's
   trailing space, which otherwise drags the ink left by half of it. */
.plate--initials .plate__initials{position:relative;font-family:var(--serif);font-weight:400;
  line-height:1;letter-spacing:.06em;padding-left:.06em;text-align:center;
  color:var(--on-navy);opacity:.82;font-size:clamp(2.6rem,22cqw,7rem)}
.plate--initials .plate__initials::after{content:"";display:block;width:2.2em;height:1px;
  margin:.5em auto 0;background:var(--brass);opacity:.75}
@supports not (width:1cqw){
  .plate--initials .plate__initials{font-size:clamp(2.6rem,6vw,7rem)}
}
/* no overlaid meta/headline — just the photo, with one label pinned bottom-left */
.plate--photo-plain{justify-content:flex-end}
.plate--photo-plain::before{
  background:linear-gradient(180deg,rgba(20,12,6,0) 0%,rgba(20,12,6,0) 55%,rgba(20,12,6,.62) 100%)}

/* ---------- Pathway ---------- */
.pathway{display:grid;gap:0}
.pathway__step{display:grid;grid-template-columns:auto 1fr;gap:1.1rem 1.4rem;
  padding-block:1.15rem;border-top:1px solid var(--line);align-items:baseline}
.pathway__step:last-child{border-bottom:1px solid var(--line)}
.section--navy .pathway__step{border-color:var(--line-navy)}
.pathway__n{font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.12em;color:var(--brass-ink);
  padding-top:.15rem}
.section--navy .pathway__n{color:var(--brass)}
.pathway__t{font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.25}

/* ---------- Starters — three cards, click/hover reveals an overlay panel ---------- */
.starters{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:820px){.starters{grid-template-columns:repeat(3,1fr)}}
/* The three cards used to be wrapped in a single .reveal-band, so they arrived as one
   block. Each is now its own target and they come up in turn — the motion reads as three
   choices appearing rather than a panel switching on. */
.js .starter.reveal-band{transition-delay:0s}
.js .starter.reveal-band:nth-child(2){transition-delay:.11s}
.js .starter.reveal-band:nth-child(3){transition-delay:.22s}
@media(prefers-reduced-motion:reduce){.js .starter.reveal-band{transition-delay:0s}}
.starter{position:relative;background:var(--navy-2);border:1px solid var(--line-navy);
  border-radius:20px;overflow:hidden;min-height:340px;display:flex}
.starter__face{position:relative;flex:1;display:flex;flex-direction:column;
  padding:clamp(1.6rem,3vw,2.1rem)}
/* the card ground is --navy-2, where --brass measures 4.01:1 — see the note on
   .section--rise above */
.starter__eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:#DE8459;margin:0 0 .7rem}
.starter__title{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.3vw,1.85rem);
  line-height:1.16;color:var(--on-navy);margin:0;max-width:15ch;position:relative;z-index:1}
.starter__art{position:absolute;right:1.3rem;bottom:1.3rem;width:42%;max-width:108px;color:var(--brass);opacity:.4}
.starter__art *{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.starter__art .dot{fill:currentColor;stroke:none}

.starter__toggle{position:absolute;right:1.1rem;bottom:1.1rem;z-index:3;width:38px;height:38px;
  border-radius:999px;background:var(--on-navy);border:0;display:grid;place-items:center;
  cursor:pointer;padding:0;transition:transform .45s cubic-bezier(.2,.7,.2,1),background .2s ease}
.starter__toggle svg{width:14px;height:14px;fill:none;stroke:var(--navy);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease}
.starter.is-open .starter__toggle{transform:rotate(180deg);background:var(--brass)}
.starter.is-open .starter__toggle svg{stroke:#fff}
@media(hover:hover){
  .starter:hover .starter__toggle{background:var(--brass)}
  .starter:hover .starter__toggle svg{stroke:#fff}
}

.starter__panel{position:absolute;inset:0;z-index:2;background:color-mix(in srgb,var(--navy) 96%,black);
  padding:clamp(1.6rem,3vw,2.2rem);padding-right:4.5rem;display:flex;flex-direction:column;
  justify-content:center;gap:.9rem;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.starter__panel .label{margin:0}
.starter__panel p:not(.label){color:var(--on-navy-2);margin:0;line-height:1.55}
.starter__panel .textlink{margin-top:.2rem}
.starter.is-open .starter__panel{opacity:1;transform:none;pointer-events:auto}
@media(hover:hover){
  .starter:hover .starter__panel{opacity:1;transform:none;pointer-events:auto}
}

/* ---------- Proof strip ---------- */
.proof{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:720px){.proof{grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem)}}
.proof__item{border-top:2px solid var(--brass);padding-top:1.1rem}
.proof__k{font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-navy-3);margin-bottom:.7rem}
.section--navy .proof__item{border-color:var(--brass)}
.proof__v{font-family:var(--serif);font-size:1.28rem;line-height:1.3}
.proof__v .sub{display:block;font-family:var(--sans);font-size:.92rem;color:var(--on-navy-2);margin-top:.35rem;line-height:1.5}
.pending{color:var(--on-navy-3);font-style:italic;font-family:var(--serif)}

/* ---------- Matter vignette ---------- */
.vignette{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2.4rem)}
@media(min-width:840px){.vignette{grid-template-columns:minmax(0,14ch) 1fr;gap:clamp(2rem,6vw,5rem)}}
.vignette__meta{font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;color:var(--ink-3);line-height:1.7}
.vignette__meta .k{display:block;text-transform:uppercase;letter-spacing:.16em;color:var(--brass-ink);font-weight:500;margin-bottom:.2rem}
.vignette__body p{font-family:var(--serif);font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.5;color:var(--ink)}
.vignette__body p + p{margin-top:1.1rem}
.vignette__note{margin-top:1.4rem;font-family:var(--sans);font-size:.82rem;color:var(--ink-3);font-style:italic}

/* ---------- Split content (AIP / invest pages) ---------- */
.split{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,4vw,3.2rem)}
@media(min-width:820px){.split{grid-template-columns:1fr 1fr}}
.stack{display:grid;gap:clamp(1.6rem,3vw,2.4rem)}
.block{border-top:1px solid var(--line);padding-top:1.3rem}
.section--navy .block{border-color:var(--line-navy)}
.block--flush{border-top:0;padding-top:0}
/* nothing above the first block to divide it from, and its rule+padding knocked the
   column out of line with the paragraph beside it */
.stack > .block:first-child{border-top:0;padding-top:0}

/* plain bullet list — for scannable short items inside prose (e.g. a list of asset types) */
.plain-list{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.55rem;max-width:var(--measure)}
.plain-list li{position:relative;padding-left:1.1rem;color:var(--ink-2)}
.plain-list li::before{content:"";position:absolute;left:0;top:.62em;width:.4rem;height:1px;background:var(--brass-ink)}
.section--navy .plain-list li{color:var(--on-navy-2)}

/* stat grid — a short table of figures as cards, no rule-per-row */
.stat-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.6rem}
@media(min-width:700px){.stat-grid{grid-template-columns:repeat(3,1fr);gap:1.3rem}}
.stat-grid__item{padding:1.3rem 1.4rem;background:var(--paper);border:1px solid var(--line)}
.stat-grid__amount{font-family:var(--serif);font-size:1.1rem;color:var(--ink);margin-bottom:.35rem;line-height:1.25}
.stat-grid__days{font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brass-ink)}
.block h3{font-family:var(--serif);font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.15;margin-bottom:.7rem}
.block p{color:var(--ink-2)}
.section--navy .block p{color:var(--on-navy-2)}
.aside-note{border-left:2px solid var(--brass);padding:.2rem 0 .2rem 1.2rem;
  font-family:var(--serif);font-style:italic;color:var(--ink-2);max-width:52ch}
.section--navy .aside-note{color:var(--on-navy-2)}

/* line-drawn definition list */
.deflist{display:grid;gap:0}
.deflist__row{display:grid;grid-template-columns:1fr;gap:.4rem;padding-block:1.1rem;border-top:1px solid var(--line)}
@media(min-width:640px){.deflist__row{grid-template-columns:minmax(0,16ch) 1fr;gap:clamp(1.2rem,4vw,3rem);align-items:baseline}}
/* sub-service names run much longer than the short terms this list was built for
   ("Residential"), so they get a wider term column of their own */
@media(min-width:640px){
  .deflist--services .deflist__row{grid-template-columns:minmax(0,26ch) 1fr}
}
.deflist__row:last-child{border-bottom:1px solid var(--line)}
.deflist__t{font-family:var(--serif);font-size:1.2rem}
.deflist__d{color:var(--ink-2)}

/* ---------- People (About) ---------- */
.people{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,3.5rem)}
@media(min-width:760px){.people{grid-template-columns:1fr 1fr}}
.person__plate{margin-bottom:1.3rem}
.person h3{font-family:var(--serif);font-size:1.7rem;line-height:1.1}
.person__role{font-family:var(--sans);font-size:.82rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass-ink);margin:.5rem 0 1rem}
.person p{color:var(--ink-2)}
/* team index — photo, name, role, click through to the full profile */
.people-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,3.4vw,2.6rem)}
@media(min-width:680px){.people-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.people-grid{grid-template-columns:repeat(3,1fr)}}
.person-card a{display:grid;gap:.75rem;text-decoration:none;color:inherit}
.person-card__plate{aspect-ratio:4/5;min-height:0;margin:0 0 .5rem;
  transition:filter .3s ease,transform .3s ease}
.person-card a:hover .person-card__plate{filter:brightness(1.18)}

/* Portraits run in black and white and come back to colour under the cursor.
   It holds four photographs taken in four different places to one register —
   the open collar against the suits stops being the first thing you notice —
   without touching the files, which stay in colour on disk.
   Only where a cursor exists: on a touch screen there is no hover to undo it,
   so phones and tablets get the colour permanently. */
@media (hover:hover) and (pointer:fine){
  /* photographs only — a monogram has nothing to desaturate, and greying it
     would take the brass rule with it */
  .person-card__plate:not(.plate--initials),
  .profile__plate:not(.plate--initials){filter:grayscale(1);transition:filter .5s ease,transform .3s ease}
  .person-card a:hover .person-card__plate{filter:grayscale(0) brightness(1.06)}
  .profile__plate:hover{filter:grayscale(0)}
  @media (prefers-reduced-motion:reduce){
    .person-card__plate,.profile__plate{transition:none}
  }
}
.person-card__name{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2vw,1.55rem);
  line-height:1.15;margin:0}
.person-card__role{font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brass-ink);margin:0}
.person-card__cta{justify-self:start;font-family:var(--sans);font-size:.9rem;font-weight:500;
  color:var(--ink);border-bottom:1px solid var(--brass-ink);padding-bottom:.18em;
  transition:color .2s ease,border-color .2s ease}
.person-card a:hover .person-card__cta{color:var(--brass-ink)}

/* a portrait fills the plate on its own — no scrim, since nothing is overlaid on it */
.plate--portrait{background-size:cover;background-position:center top;border-color:transparent}
.plate--portrait::before{display:none}

/* profile page header */
.profile__plate{aspect-ratio:4/5;min-height:0}
/* profile hero: the text column sits against the middle of the portrait, and the
   hero keeps real bottom padding so the next section does not peek over the fold.
   .hero--tight alone is for text-only heroes and is far too tight here. */
.hero--profile .hero__grid{align-items:center}
.hero--tight.hero--profile{padding-bottom:clamp(4rem,8vw,7rem)}
/* two-column only: hold the first screen so the bio heading starts below the
   fold instead of peeking over it. 73px is the sticky header. */
@media(min-width:900px){
  .hero--profile{display:grid;align-content:center;min-height:calc(100svh - 73px)}
}
.profile__focus{font-family:var(--sans);font-size:.95rem;color:var(--ink-2);margin:.5rem 0 0}
.profile__meta{display:grid;gap:.4rem;margin-top:1.5rem;font-size:.95rem;color:var(--ink-2)}
.profile__meta a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:.08em}
.profile__meta a:hover{border-color:var(--brass-ink)}
.profile__meta .k{display:inline-block;width:1.2em;color:var(--ink-3)}
.profile__areas{margin-top:2rem}
.profile__areas .label{margin:0 0 .6rem}

/* insights / articles — three across, hairline over each */
.insight-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,2.8vw,2.2rem)}
@media(min-width:760px){.insight-grid{grid-template-columns:repeat(3,1fr)}}
.insight-card{display:grid;gap:.65rem;align-content:start;padding-top:1.2rem;
  border-top:1px solid var(--line)}
.insight-card__label{margin:0;font-family:var(--sans);font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brass-ink)}
.insight-card__title{margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.12rem,1.6vw,1.3rem);line-height:1.22}
.insight-card__sum{margin:0;color:var(--ink-2);font-size:.93rem;line-height:1.55}
.insight-card__more{justify-self:start;font-family:var(--sans);font-size:.88rem;font-weight:500;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--brass-ink);padding-bottom:.15em;
  transition:color .2s ease}
.insight-card__more:hover{color:var(--brass-ink)}

.person__contact{margin-top:1rem;font-size:.92rem;color:var(--ink-2);display:grid;gap:.25rem}
.person__contact a{text-decoration:none;border-bottom:1px solid var(--line)}
.person__contact a:hover{border-color:var(--brass-ink)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(2.2rem,5vw,4rem)}
@media(min-width:880px){.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.contact-detail{display:grid;gap:0}
.contact-detail__row{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding-block:1rem;border-top:1px solid var(--line-navy)}
.contact-detail__row:last-child{border-bottom:1px solid var(--line-navy)}
.contact-detail__k{font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.contact-detail__v{color:var(--on-navy-2);line-height:1.6}
.contact-detail__v a{color:var(--on-navy);text-decoration:none;border-bottom:1px solid var(--line-navy)}
.contact-detail__v a:hover{border-color:var(--brass)}
.confidential{margin-top:1.6rem;font-family:var(--serif);font-style:italic;color:var(--on-navy-2);max-width:44ch}

form{display:grid;gap:1.15rem}
.field{display:grid;gap:.45rem}
.field > label{font-family:var(--sans);font-size:.76rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:1rem;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:2px;padding:.82em .9em;width:100%}
.field textarea{resize:vertical;min-height:130px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass-ink);box-shadow:0 0 0 1px var(--brass-ink)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
@media(max-width:520px){.field-row{grid-template-columns:1fr}}
.form-actions{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;margin-top:.3rem}
.btn{font-family:var(--sans);font-weight:500;font-size:.98rem;letter-spacing:.01em;cursor:pointer;
  background:var(--navy);color:var(--on-navy);border:1px solid var(--navy);border-radius:2px;
  padding:.9em 1.7em;transition:background .2s,border-color .2s}
.btn:hover{background:#120903;border-color:#120903}
.form-status{font-size:.9rem;color:var(--brass-ink);min-height:1.2em}
.form-fine{font-size:.82rem;color:var(--ink-3);line-height:1.6;max-width:52ch}

/* ---------- CTA closer ---------- */
.closer{display:grid;gap:1.4rem;max-width:44ch}
.closer .h2{color:inherit}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:var(--on-navy);padding-block:clamp(2.8rem,6vw,4rem)}
.site-footer__top{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,3.5rem)}
@media(min-width:820px){.site-footer__top{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}}
.site-footer .brandmark__logo{filter:brightness(0) invert(1)}
.foot-col h4{font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);margin-bottom:1rem}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot-col a{color:var(--on-navy-2);text-decoration:none;font-size:.94rem}
.foot-col a:hover{color:var(--on-navy)}
.foot-col p{color:var(--on-navy-2);font-size:.94rem;line-height:1.65}
.site-footer__legal{margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid var(--line-navy);
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-size:.8rem;color:var(--on-navy-3);align-items:baseline}
.site-footer__legal a{color:var(--on-navy-3);text-decoration:none;border-bottom:1px solid transparent}
.site-footer__legal a:hover{color:var(--on-navy-2);border-color:var(--line-navy)}
.site-footer__legal .sep{opacity:.5}

/* ============================================================
   Full-bleed photographic hero (home opening screen)
   ============================================================ */
.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}

/* ---------- Home hero — the gold cover ----------
   Anne asked for the exact background from the live site, so this is rebuilt from it
   rather than approximated: the same hammered-gold photograph, the same flat ivory veil
   over it, and the same concentric ripple at 7% in the two brand golds. Reproduced from
   mattandzenconsulting.com, 16 Oct 2026.
   The consequence is that this hero is LIGHT while every other hero on the site is dark,
   so the lockup, the logo and the menu button all have to be inked for it. */
/* Sticky, so it holds while the page stacks over it. "Where would you like to start?" is
   drawn as a card — rounded top, lifted edge, its own shadow — and that shape only reads
   if there is something still behind it for the card to climb over. Without this the hero
   just scrolls away and the card has nothing to stack on. */
.hero-full{position:sticky;top:0;min-height:100svh;min-height:100vh;display:flex;align-items:flex-end;
  overflow:hidden;background:#FFFFF5;color:var(--ink);isolation:isolate;z-index:0}
/* every section after it has to paint above the held hero, and be opaque doing it, or the
   gold shows straight through — the one section with no background of its own is the
   stacking-cards block, which had been relying on the body colour */
.hero-full ~ section{position:relative;z-index:1}
.hero-full ~ section.who-stack-section{background:var(--paper)}
.hero-full__layer{position:absolute;inset:0}
/* same pixels as the live site's PNG, re-encoded: 2.0 MB -> 542 KB, and on a texture
   this soft the difference is not visible */
.hero-full__bg{background:url("images/hero-gold-texture.jpg") center/cover no-repeat}
/* the live site lays a flat 30% ivory wash over the foil — every stop of its gradient is
   the same colour, so a flat fill is the same thing said plainly. It is what stops the
   gold shouting. */
.hero-full__glow{background:rgba(255,255,245,.3)}
/* concentric ripple, centred, clipped by the viewport — 10 ellipses alternating between
   the terracotta and the yellow gold, the whole layer at 7% */
.hero-full__glow::before{content:"";position:absolute;inset:0;opacity:.07;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'%3E%3Cellipse cx='720' cy='450' rx='108' ry='60' fill='none' stroke='%23C65D3B' stroke-width='2.4'/%3E%3Cellipse cx='720' cy='450' rx='249.75' ry='138.75' fill='none' stroke='%23EAAA2B' stroke-width='2.4'/%3E%3Cellipse cx='720' cy='450' rx='405' ry='225' fill='none' stroke='%23C65D3B' stroke-width='2.4'/%3E%3Cellipse cx='720' cy='450' rx='573.75' ry='318.75' fill='none' stroke='%23EAAA2B' stroke-width='2.4'/%3E%3Cellipse cx='720' cy='450' rx='756' ry='420' fill='none' stroke='%23C65D3B' stroke-width='1.6'/%3E%3Cellipse cx='720' cy='450' rx='951.75' ry='528.75' fill='none' stroke='%23EAAA2B' stroke-width='1.6'/%3E%3Cellipse cx='720' cy='450' rx='1167.75' ry='648.75' fill='none' stroke='%23C65D3B' stroke-width='1.6'/%3E%3Cellipse cx='720' cy='450' rx='1404' ry='780' fill='none' stroke='%23EAAA2B' stroke-width='1.6'/%3E%3Cellipse cx='720' cy='450' rx='1674' ry='930' fill='none' stroke='%23C65D3B' stroke-width='1.6'/%3E%3Cellipse cx='720' cy='450' rx='1971' ry='1095' fill='none' stroke='%23EAAA2B' stroke-width='1.6'/%3E%3C/svg%3E") center/cover no-repeat}

/* the hero still has to hand over to a navy section, so it dissolves into it at the foot
   rather than cutting hard from gold to dark */
/* A long, shallow shadow rather than a short hard one. At 88% the bridge into the navy
   section had almost no depth and the rounded top of that section met bright gold as an
   edge. This starts at 70% so the foil darkens gradually as it goes, but holds at 18% at
   the point "Discover more" sits (84%) so the link stays readable, then closes quickly. */
.hero-full__fade{background:linear-gradient(180deg,
  transparent 70%,rgba(27,15,6,.18) 86%,var(--navy) 100%)}

/* ---------- Masked-photo hero ----------
   The place name is cut out of the photograph: the picture only reads inside the
   letterforms, over a dimmed, warm-graded version of itself. Drifts slowly; no scroll-pinning. */
/* full screen, and it holds while the rest of the page rises over it */
.hero-mask{--hm-img:url("images/jakarta.webp");
  position:sticky;top:0;z-index:0;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;background:var(--navy);color:var(--on-navy);
  min-height:100vh;min-height:100svh}
/* PRACTICE-AREA LANDING PAGES — the quiet version.
   No photograph in the letters here. Cutting the picture out of the area name was tried
   at length and the colour was wrong every time it was tuned: gold on a gold ground is a
   loud effect, and on six landing pages it would be loud six times. The brief was subtle
   and calm, so the type is plain warm bone and the photograph stays where it belongs —
   behind, as atmosphere. `indonesia.html` keeps the masked word: there it is one page and
   one place name, which is what the effect was for.
   Brass is now spent on one thing only, the button. The kicker steps back to a muted bone
   so the eye goes name, sentence, button, and nothing competes. */
.hero-mask--area{--hm-img:url("images/svc-immigration.jpg");--hm-size:clamp(2.6rem,7.6vw,6rem)}
.hero-mask--area .hm-word{font-size:var(--hm-size);max-width:12ch;
  background-image:none;filter:none;animation:none;
  color:#EDE6D8;-webkit-text-fill-color:#EDE6D8;
  letter-spacing:-.014em}
.hero-mask--area .hm-kicker{letter-spacing:.28em}
/* The clip box has to be told the word's size. `em` on the wrapper resolves against the
   wrapper's own inherited 17px, not the 72px word inside it, so a padding meant to clear
   the ascenders came out at 2px and sheared the tops off the glyphs. */
.hero-mask--area .hm-clip{font-size:var(--hm-size);padding-block:.18em;margin-block:-.18em}
/* everything after the hero has to paint above it, and be opaque doing it */
.hero-mask ~ .section{position:relative;z-index:2}
.hero-mask + .section,.section--lift{position:relative;z-index:2;margin-top:-2.75rem;
  border-radius:30px 30px 0 0;box-shadow:0 -30px 64px -34px rgba(0,0,0,.62)}
@media(max-width:640px){
  .hero-mask + .section,.section--lift{margin-top:-1.6rem;border-radius:20px 20px 0 0}
}
/* A tinted section that is itself the .wrap would only paint its background 1200px
   wide, leaving the ground showing at both edges. Let it bleed, and pad the content
   back to the same 1200px column instead. The gutter has to be added on top of the
   centring calc, or the content sits a full gutter left of every other section. */
.section--paper2.wrap,.section--navy.wrap,.hero-mask ~ .section.wrap{max-width:none;
  padding-inline:max(var(--gutter),calc(50% - var(--maxw)/2 + var(--gutter)))}
/* two-column spec comparison. Collapses to stacked rows on small screens, where each
   value is prefixed by the column it belongs to (data-col) since the header is hidden. */
.spec-table{width:100%;border-collapse:collapse;margin-top:clamp(1.4rem,2.6vw,2rem);
  font-size:clamp(.94rem,1.1vw,1rem)}
.spec-table th,.spec-table td{text-align:left;vertical-align:top;
  padding:clamp(.85rem,1.4vw,1.1rem) 1.4rem clamp(.85rem,1.4vw,1.1rem) 0;
  border-bottom:1px solid var(--line)}
.spec-table td:last-child,.spec-table th:last-child{padding-right:0}
.spec-table thead th{font-family:var(--serif);font-weight:400;line-height:1.1;
  font-size:clamp(1.3rem,2.1vw,1.7rem);color:var(--ink);
  border-bottom:1px solid var(--brass-ink);padding-top:0}
.spec-table thead td{border-bottom:1px solid var(--brass-ink);padding-top:0}
.spec-table tbody th{font-family:var(--sans);font-weight:500;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brass-ink);width:13rem;line-height:1.5}
.spec-table tbody td{color:var(--ink-2);line-height:1.55}
.spec-table tbody tr:last-child th,.spec-table tbody tr:last-child td{border-bottom:none}
@media(max-width:760px){
  .spec-table,.spec-table tbody,.spec-table tr,.spec-table tbody th,.spec-table tbody td{
    display:block;width:auto}
  .spec-table thead{display:none}
  .spec-table tbody tr{padding-block:1.05rem;border-bottom:1px solid var(--line)}
  .spec-table tbody tr:last-child{border-bottom:none}
  .spec-table tbody th{width:auto;padding:0 0 .55rem;border-bottom:none}
  .spec-table tbody td{padding:0 0 .5rem;border-bottom:none}
  .spec-table tbody td:last-child{padding-bottom:0}
  .spec-table tbody td::before{content:attr(data-col) " — ";color:var(--ink);font-weight:500}
}

/* The day requirement drawn to scale against the 105-day baseline, so the trade — more
   capital, fewer days — is visible rather than only stated. Bars are proportional to the
   real figures; they carry no information the text does not, so they are aria-hidden. */
.ladder{list-style:none;margin:clamp(1.5rem,2.8vw,2.2rem) 0 0;padding:0}
.ladder__row{display:grid;grid-template-columns:minmax(9rem,13rem) 1fr auto;align-items:center;
  gap:clamp(1rem,2.2vw,2rem);padding-block:clamp(.8rem,1.3vw,1rem);border-top:1px solid var(--line)}
.ladder__row:last-child{border-bottom:1px solid var(--line)}
.ladder__amt{font-family:var(--serif);font-size:clamp(1rem,1.3vw,1.14rem);color:var(--ink)}
.ladder__bar{height:5px;border-radius:999px;background:rgba(43,26,12,.09);overflow:hidden}
.ladder__bar > span{display:block;height:100%;border-radius:999px;background:var(--brass-ink)}
.ladder__days{font-family:var(--sans);font-weight:500;font-size:.92rem;letter-spacing:.04em;
  color:var(--brass-ink);text-align:right;min-width:4.5rem}
.ladder__row--base .ladder__bar > span{background:var(--ink-3)}
.ladder__row--base .ladder__amt,.ladder__row--base .ladder__days{color:var(--ink-2)}
@media(max-width:640px){
  .ladder__row{grid-template-columns:1fr auto;gap:.45rem 1rem}
  .ladder__bar{grid-column:1/-1;order:3}
}

/* scannable scope list — two columns on wider screens so a long list stays short to read */
.check-list{list-style:none;margin:clamp(1.3rem,2.4vw,1.9rem) 0 0;padding:0;display:grid;
  grid-template-columns:1fr}
@media(min-width:720px){
  .check-list{grid-template-columns:repeat(2,1fr);column-gap:clamp(2rem,4.5vw,4.5rem)}
}
.check-list li{position:relative;padding:.7rem 0 .7rem 1.5rem;border-bottom:1px solid var(--line);
  color:var(--ink-2);line-height:1.5}
/* the dash has to sit on the optical centre of the FIRST line, which is the top padding
   plus half a line box. A flat em offset put it ~4px high, and wrapping items made it obvious. */
.check-list li::before{content:"";position:absolute;left:0;top:calc(.7rem + .75em);
  width:.55rem;height:1px;background:var(--brass-ink)}

/* banner hero for service pages — a wide photographic band with the title over it.
   The scrim is heavier on the left, where the text sits, and thins out to the right so
   the photograph is still readable as a picture rather than uniformly dimmed. */
.hero-band{position:relative;isolation:isolate;display:flex;align-items:center;
  min-height:clamp(230px,33vw,420px);
  background-color:var(--navy);background-image:var(--band-img);
  background-size:cover;background-position:center 58%;background-repeat:no-repeat}
/* Weighted to the left, where the title and kicker sit: a bright photograph under
   that end took the title to 2.85:1 and the kicker to 3.54:1. The right-hand end is
   left alone so the picture still reads. */
.hero-band::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(27,15,6,.88) 0%,rgba(27,15,6,.62) 46%,rgba(27,15,6,.22) 100%)}
.hero-band__inner{position:relative;z-index:1;width:100%;
  padding-block:clamp(2.2rem,5vw,3.4rem)}
/* brass is a mid tone and disappears against a sunlit wall — the kicker needs a light
   value and its own shadow to hold over an unpredictable photograph */
.hero-band__kicker{margin:0 0 .75rem;color:#EFDCC0;text-shadow:0 1px 16px rgba(0,0,0,.75)}
.hero-band__kicker a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .2s ease}
.hero-band__kicker a:hover{border-bottom-color:currentColor}
.hero-band__title{margin:0;font-family:var(--serif);font-weight:400;color:#F6EEE0;
  font-size:clamp(1.95rem,4.8vw,3.5rem);line-height:1.05;letter-spacing:-.012em;max-width:19ch;
  text-shadow:0 2px 26px rgba(0,0,0,.45)}

/* A flat run of 14 items reads as a dump. Grouping them into labelled clusters gives the
   section structure instead of decoration, and makes it scannable — you can find "subdivision"
   without reading the lot. The inner lists reuse .check-list so the dash rule lives in one place. */
.scope-groups{display:grid;grid-template-columns:1fr;
  gap:clamp(1.7rem,3vw,2.6rem) clamp(2rem,4vw,4rem);
  margin-top:clamp(1.4rem,2.6vw,2.2rem)}
@media(min-width:680px){.scope-groups{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.scope-groups{grid-template-columns:repeat(3,1fr)}}
.scope-group .label{margin:0 0 .2rem}
.scope-group .check-list{grid-template-columns:1fr;margin-top:0}
.scope-group .check-list li:last-child{border-bottom:none}

/* long-form article: a reading measure for prose, with tables free to sit full width
   in their own section so a four-column comparison is not squeezed into the text column */
.article-body{max-width:68ch}
.article-body > * + *{margin-top:1.1rem}
.article-body h2{margin-top:clamp(2.2rem,4vw,3.2rem)}
.article-body h3{font-family:var(--serif);font-weight:400;line-height:1.2;
  font-size:clamp(1.15rem,1.9vw,1.4rem);margin-top:clamp(1.6rem,3vw,2.2rem)}
.article-body p{color:var(--ink-2);line-height:1.65}
.article-body a{color:inherit;text-decoration:none;
  border-bottom:1px solid var(--brass-ink);padding-bottom:.05em}
.article-body a:hover{color:var(--brass-ink)}
/* single column inside the reading measure — two columns at 68ch is unreadable */
.article-body .check-list{margin-top:1.1rem;grid-template-columns:1fr}
.article-meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin:0;
  font-family:var(--sans);font-size:.9rem;color:var(--ink-3)}
.article-note{margin-top:clamp(2rem,4vw,3rem);padding-top:1.3rem;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--ink-3);line-height:1.6;max-width:68ch}

/* topic filter on the news index */
.topic-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:clamp(1.2rem,2.4vw,1.8rem);
  padding:0;list-style:none}
.topic-pill{font-family:var(--sans);font-size:.86rem;font-weight:500;color:var(--ink-2);
  background:none;border:1px solid var(--line);border-radius:999px;
  padding:.44em 1.05em;cursor:pointer;transition:color .2s ease,border-color .2s ease,background .2s ease}
.topic-pill:hover{border-color:var(--brass-ink);color:var(--ink)}
.topic-pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.news-empty{margin-top:clamp(1.6rem,3vw,2.2rem);color:var(--ink-3)}
.news-card__topic{margin:0;font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass-ink)}

/* a sub-service name becomes a link once it has a page of its own; the ones that do not
   stay plain text rather than pointing somewhere that does not answer the question */
.deflist__t a{color:inherit;text-decoration:none;border-bottom:1px solid var(--brass-ink);
  padding-bottom:.08em;transition:color .2s ease}
.deflist__t a:hover{color:var(--brass-ink)}
.deflist__t a .arw{display:inline-block;transition:transform .2s ease}
.deflist__t a:hover .arw{transform:translateX(3px)}
.deflist__soon{font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-left:.6rem;white-space:nowrap}

/* standfirst under the Our Services heading */
.services__intro-text{margin:1.1rem 0 0;color:var(--ink-2);line-height:1.6;
  font-size:clamp(.95rem,1.2vw,1.02rem)}

/* Pier Law pattern: a short index of the services in an area, then each one expanded
   in full further down the same page. Avoids a separate page per sub-service. */
.jump-list{list-style:none;margin:clamp(1.3rem,2.4vw,1.9rem) 0 0;padding:0;display:grid;
  grid-template-columns:1fr}
@media(min-width:720px){.jump-list{grid-template-columns:repeat(2,1fr);
  column-gap:clamp(2rem,4.5vw,4.5rem)}}
.jump-list li{position:relative;padding:.75rem 0 .75rem 1.5rem;border-bottom:1px solid var(--line);
  color:var(--ink-3);line-height:1.5;font-family:var(--sans);font-size:.98rem}
.jump-list li::before{content:"";position:absolute;left:0;top:calc(.75rem + .75em);
  width:.55rem;height:1px;background:var(--brass-ink)}
.jump-list a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .2s ease,color .2s ease}
.jump-list a:hover{color:var(--brass-ink);border-bottom-color:var(--brass-ink)}
.jump-list a .arw{display:inline-block;transition:transform .2s ease}
.jump-list a:hover .arw{transform:translateX(3px)}
/* a service expanded further down the page */
.svc-detail{scroll-margin-top:6rem}
.svc-detail__how{margin-top:clamp(1.3rem,2.4vw,1.8rem)}

/* sub-services on a practice landing page: one card each, leading to its own page */
.subcards{list-style:none;margin:clamp(1.4rem,2.6vw,2.2rem) 0 0;padding:0;display:grid;
  grid-template-columns:1fr;gap:clamp(1rem,2vw,1.5rem)}
@media(min-width:760px){.subcards{grid-template-columns:repeat(2,1fr)}}
.subcard{display:flex}
.js .subcard.reveal-band{opacity:.35;transform:translateY(16px)}
.js .subcard.reveal-band.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .subcard.reveal-band{opacity:1;transform:none}}
.subcard > *{display:flex;flex-direction:column;gap:.55rem;width:100%;
  border:1px solid var(--line);border-radius:18px;background:var(--paper);
  padding:clamp(1.2rem,2.2vw,1.65rem);text-decoration:none;color:inherit;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.subcard a:hover{border-color:var(--brass);transform:translateY(-2px);
  box-shadow:0 20px 40px -28px color-mix(in srgb,var(--ink) 50%,transparent)}
.subcard__title{font-family:var(--serif);font-weight:400;line-height:1.15;
  font-size:clamp(1.2rem,2vw,1.5rem);color:var(--ink)}
.subcard__desc{color:var(--ink-2);line-height:1.55;font-size:.97rem;flex:1}
.subcard__more{margin-top:.5rem;font-family:var(--sans);font-size:.88rem;font-weight:500;
  color:var(--ink);align-self:flex-start;border-bottom:1px solid var(--brass-ink);padding-bottom:.15em}
.subcard__more .arw{display:inline-block;transition:transform .2s ease}
.subcard a:hover .subcard__more{color:var(--brass-ink)}
.subcard a:hover .subcard__more .arw{transform:translateX(3px)}
/* no page yet — same card, visibly not a destination.
   Border is #9C8056, not --line: --line is 1.18:1 on --paper-2, i.e. invisible, which
   defeats the one job the dashed edge has. This clears 3:1 and still reads light,
   because a dashed stroke covers about half the pixels a solid one does. */
.subcard--pending > *{border-style:dashed;border-color:#9C8056;background:none}
.subcard__pending{margin-top:.5rem;font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);align-self:flex-start}

.contact-block{display:grid;gap:.5rem;font-size:.95rem;color:var(--ink-2)}
.contact-block a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:.08em}
.contact-block a:hover{border-color:var(--brass-ink)}
.section--navy .contact-block{color:var(--on-navy-2)}
.section--navy .contact-block a{border-color:var(--line-navy)}
.section--navy .contact-block a:hover{border-color:var(--brass)}
/* the lockup steps back as the page covers it (set by script; no scroll-jacking) */
.hero-mask__inner{will-change:opacity,transform}
.hero-mask__layer{position:absolute;inset:0;pointer-events:none}
.hero-mask__bg{background:radial-gradient(125% 95% at 24% 10%,var(--navy-2) 0%,var(--navy) 58%,#0F0803 100%)}
/* the photograph held right back — it is atmosphere here, the word carries the real picture */
.hero-mask__photo{background:var(--hm-img) center 44%/cover no-repeat;
  mix-blend-mode:luminosity;opacity:.09;filter:blur(3px);
  animation:hmBack 44s ease-in-out infinite alternate}
/* This layer animates background-size and background-position on a full-screen box that
   is also blurred and blended, so every frame costs a re-raster, a re-blur and a re-blend.
   The hero is sticky and never releases, so that was running for the whole length of the
   page — including the entire time it is hidden behind the sections above it. The header
   going solid is exactly the moment it is covered, and the header is a sibling of <main>,
   so it can say so. */
.site-header.is-solid ~ main .hero-mask__photo{animation-play-state:paused}
.hero-mask__fade{background:linear-gradient(180deg,rgba(27,15,6,.45) 0%,rgba(27,15,6,0) 34%,
  rgba(27,15,6,.5) 80%,var(--navy) 100%)}

.hero-mask__inner{position:relative;z-index:2;padding-block:clamp(3.5rem,9vh,5.5rem);
  display:grid;justify-items:start;gap:clamp(1rem,2.4vw,1.6rem)}
/* Every hero this sits on is a dark photographic band. Brass measured 4.01:1 over
   the Indonesia hero, and the ivory the area heroes used was .52 alpha, which came
   out at 4.25:1 over the darkest of them — both under AA for text this size. One
   treatment at .62 clears it on all seven. */
.hm-kicker{margin:0;font-family:var(--sans);font-size:.76rem;font-weight:500;letter-spacing:.32em;
  text-transform:uppercase;color:rgba(246,238,224,.62)}
.hm-word{margin:0;font-family:var(--serif);font-weight:400;line-height:.95;letter-spacing:-.018em;
  font-size:clamp(3.2rem,13vw,10.5rem);color:#F4F1EA;
  padding-block:.12em;margin-block:-.12em}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hm-word{
    /* the photograph itself, lifted enough to read at text size and nudged warm */
    background-image:linear-gradient(168deg,rgba(240,185,60,.20) 0%,rgba(194,96,58,.24) 100%),
      var(--hm-img);
    background-blend-mode:soft-light;
    background-repeat:no-repeat;
    background-size:auto,260% auto;
    filter:brightness(1.5) contrast(1.04) saturate(.9);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:hmWord 40s ease-in-out infinite alternate}
}
@keyframes hmWord{from{background-position:center,38% 36%}to{background-position:center,56% 45%}}
@keyframes hmBack{from{background-position:center 40%;background-size:cover}
  to{background-position:center 50%;background-size:116% auto}}

/* small screens: the letter stems are only a few pixels wide, so the picture has to be
   zoomed much further in or it reads as a flat wash */
@media(max-width:640px){
  .hm-word{font-size:clamp(3.5rem,15.5vw,10.5rem)}
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .hm-word{background-size:auto,460% auto;filter:brightness(1.42) contrast(1.1) saturate(.92)}
  }
}

.hm-lead{margin:0;max-width:46ch;color:var(--on-navy-2);line-height:1.55;
  font-size:clamp(1rem,1.4vw,1.14rem)}
.hm-link{display:inline-flex;align-items:center;gap:.6em;color:var(--on-navy);text-decoration:none;
  font-family:var(--sans);font-size:.92rem;font-weight:500;border-bottom:1px solid var(--brass);
  padding-bottom:.3em;transition:color .25s ease,border-color .25s ease,gap .25s ease}
.hm-link:hover{color:var(--brass);gap:.9em}

/* Solid pill, kept from the landing-page hero that replaced this one for a while: the
   underlined `.hm-link` above sat too quietly for a landing page, and its label was not
   optically centred because an inline box cannot centre padding. */
/* Outline, not a solid. Once the gold came out of the lettering and the kicker, a filled
   brass pill was the only saturated thing left on the screen and it carried more weight
   than a first step should. Bone hairline, bone label, and the brass kept to the arrow —
   the accent is still there, it is just the size of a glyph. */
.hm-cta{display:inline-flex;align-items:center;justify-content:center;gap:.8em;
  padding:.96em 1.75em;border-radius:999px;
  /* .42 rather than the .34 this looked best at: below that the hairline falls under the
     3:1 a control boundary needs, and the difference is not visible anyway */
  background:transparent;color:#EDE6D8;border:1px solid rgba(237,230,216,.42);
  font-family:var(--sans);font-size:.9rem;font-weight:500;text-decoration:none;
  transition:border-color .25s ease,background .25s ease,color .25s ease}
.hm-cta:hover{color:#FFF8EC;border-color:rgba(237,230,216,.72);
  background:rgba(237,230,216,.07)}
.hm-cta .arw{color:var(--brass);transition:transform .25s ease}
.hm-cta:hover .arw{transform:translateX(3px)}

/* Arrival. Each part comes up in turn; the word rises out of its own clipped box so the
   masked photograph inside it is never visible mid-flight. Landing pages only — the rest
   of the hero's motion is the slow drift already on the word and the backdrop. */
.hero-mask--area .hm-kicker{animation:hmIn .9s cubic-bezier(.16,1,.3,1) .1s both}
.hm-clip{display:block;margin:0;overflow:hidden}
.hm-clip > .hm-word{display:block}
.hero-mask--area .hm-clip > .hm-word{
  animation:hmWordIn 1.05s cubic-bezier(.16,1,.3,1) .16s both}
.hero-mask--area .hm-lead{animation:hmIn .9s cubic-bezier(.16,1,.3,1) .42s both}
.hero-mask--area .hm-cta{animation:hmIn .9s cubic-bezier(.16,1,.3,1) .52s both}
@keyframes hmIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hmWordIn{from{transform:translateY(102%)}to{transform:translateY(0)}}

@media(prefers-reduced-motion:reduce){
  .hm-word,.hero-mask__photo{animation:none}
  .hero-mask--area .hm-kicker,.hero-mask--area .hm-clip > .hm-word,
  .hero-mask--area .hm-lead,.hero-mask--area .hm-cta{animation:none}
}

.hero-lockup{position:relative;z-index:2;width:100%;
  /* lifted off the foot of the frame: the lockup used to finish inside the navy fade,
     which is why 'Discover more' had all but disappeared into it */
  padding:clamp(5rem,12vh,7rem) var(--gutter) clamp(7rem,16vh,10.5rem);
  display:grid;justify-items:start;gap:clamp(1.3rem,3vw,1.9rem)}
.hf-kicker{font-family:var(--sans);font-size:.8rem;letter-spacing:.5em;text-transform:uppercase;
  color:var(--brass-ink);margin:0}
.hf-headline{font-family:var(--serif);font-weight:400;font-size:clamp(2.3rem,6.2vw,5.2rem);
  line-height:1.06;letter-spacing:-.01em;color:var(--ink);margin:0;max-width:16ch;text-align:left}
/* Anne's terracotta from the live site, taken down a step. Two numbers have to hold at
   once here and the first attempt only watched one of them: the accent has to separate
   from the gold behind it, AND from the ink beside it. #C65D3B read as a chosen colour
   but sat at 1.63 on the foil; #96432A read on the foil but only separated from the ink
   by 2.46, so it looked like faded black rather than an accent. This sits between them —
   3.09 against the ink, and still unmistakably terracotta. */
.hf-accent{font-style:normal;color:#AE4E32}
/* inked for the gold ground, not the dark one it used to sit on */
.hf-more{display:inline-flex;align-items:center;gap:.7em;color:var(--ink);text-decoration:none;
  font-family:var(--sans);font-size:.92rem;font-weight:500;
  border-bottom:1px solid rgba(42,28,16,.42);padding-bottom:.3em;
  transition:border-color .25s ease,color .25s ease,gap .25s ease}
.hf-more:hover{color:var(--brass-ink);border-color:var(--brass-ink);gap:1em}
.hf-more__arrow{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;animation:hfBob 2.2s ease-in-out infinite}
@keyframes hfBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* one-time entrance: kicker -> headline -> discover-more */
@keyframes hfRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hf-kicker,.hf-headline,.hf-more{opacity:0;animation:hfRise .85s cubic-bezier(.2,.7,.2,1) forwards}
.hf-kicker{animation-delay:.15s}
.hf-headline{animation-delay:.35s}
.hf-more{animation-delay:.65s}
@media (prefers-reduced-motion:reduce){
  .hf-kicker,.hf-headline,.hf-more{opacity:1;animation:none;transform:none}
  .hf-more__arrow{animation:none}
}

/* header sitting over the photo, going solid on scroll */
.site-header--hero{position:fixed;left:0;right:0;top:0;background:transparent;backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.16);transition:background .3s ease,border-color .3s ease}
.site-header--hero .brandmark__logo{filter:brightness(0) invert(1)}
/* `> li >` matters: the drop-down links are also descendants of .primary-nav__list, and
   this rule outranks `.nav-dropdown a`, so without it the panel rendered as a blank
   white box — near-white labels on a paper panel. */
.site-header--hero .primary-nav__list > li > a{color:rgba(247,244,237,.86)}
.site-header--hero .primary-nav__list > li > a:hover,
.site-header--hero .primary-nav__list > li > a[aria-current="page"]{color:#fff}
.site-header--hero .primary-nav__list > li > a[aria-current="page"]::before{background:#fff}
.site-header--hero .nav-toggle{border-color:rgba(247,244,237,.45);color:#F7F4ED}
/* The home hero is gold, not dark. The bar stays transparent over it, but the logo must
   not be knocked out white and the menu button must not be ivory — both would vanish.
   Dropped as soon as .is-solid takes over past the hero. */
.site-header--hero.on-light:not(.is-solid) .brandmark__logo{filter:none}
.site-header--hero.on-light:not(.is-solid) .menu-toggle{color:var(--ink)}
.site-header--hero.on-light:not(.is-solid){border-bottom-color:rgba(42,28,16,.14)}
/* the "Request a conversation" link is a .textlink, which is inked for paper */
.site-header--hero .nav-cta{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
.site-header--hero .nav-cta:hover{color:#fff;border-bottom-color:var(--brass)}

.btn-outline{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(247,244,237,.6);
  color:#F7F4ED;padding:.62em 1.4em;border-radius:2px;text-decoration:none;font-family:var(--sans);
  font-size:.9rem;font-weight:500;letter-spacing:.02em;transition:background .2s,color .2s,border-color .2s}
.btn-outline:hover{background:var(--brass);color:#fff;border-color:var(--brass)}

.site-header--hero.is-solid{background:var(--paper);border-bottom:1px solid var(--line)}
.site-header--hero.is-solid .brandmark__logo{filter:none}
.site-header--hero.is-solid .primary-nav__list > li > a{color:var(--ink-2)}
.site-header--hero.is-solid .primary-nav__list > li > a:hover{color:var(--ink)}
.site-header--hero.is-solid .nav-toggle{border-color:var(--line);color:var(--ink)}
.site-header--hero.is-solid .nav-cta{color:var(--ink);border-bottom-color:var(--brass-ink)}
.site-header--hero.is-solid .nav-cta:hover{color:var(--brass-ink)}
.site-header--hero.is-solid .btn-outline{border-color:var(--ink);color:var(--ink)}
.site-header--hero.is-solid .btn-outline:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Below 1081 the links live in the drop-down panel, which is paper whatever the bar is
   doing, so they have to be inked again. This was pinned at 860 while only the homepage
   used the transparent bar and the homepage has no inline nav; the panel actually starts
   at 1080, which left a band where the links were white on paper. */
@media(max-width:1080px){
  .site-header--hero .primary-nav__list > li > a{color:var(--ink-2)}
  .site-header--hero .primary-nav__list > li > a:hover,
  .site-header--hero .primary-nav__list > li > a[aria-current="page"]{color:var(--ink)}
  .site-header--hero .primary-nav__list > li > a[aria-current="page"]::before{background:var(--brass-ink)}
  .site-header--hero .nav-cta{color:var(--ink);border-bottom-color:var(--brass-ink)}
  .site-header--hero .btn-outline{color:var(--ink);border-color:var(--ink);margin-top:1.1rem}
}

/* form on navy ground (contact) */
.section--navy .field > label{color:var(--on-navy-2)}
.section--navy .form-fine{color:var(--on-navy-3)}
.section--navy .form-status{color:var(--brass)}
.section--navy .btn{background:var(--on-navy);color:var(--navy);border-color:var(--on-navy)}
.section--navy .btn:hover{background:#fff;border-color:#fff}

/* ============================================================
   The practice — contents-page fold
   ============================================================ */
.practice-intro{max-width:34em}
.practice-intro .h2{margin-bottom:1.1rem}
.practice-intro .lead{color:var(--ink-2)}
.practice-intro .lead + .lead{margin-top:.85rem}

.contents{margin-top:clamp(2.4rem,5vw,4rem);display:grid}
.entry{display:grid;grid-template-columns:1fr;gap:.45rem;padding:clamp(1.3rem,2.6vw,1.95rem) 0;
  text-decoration:none;color:var(--ink)}
@media(min-width:760px){
  .entry{grid-template-columns:minmax(12rem,18rem) minmax(0,34em);
    gap:clamp(1.6rem,4vw,3.25rem);align-items:baseline}
}
.entry__lead{display:flex;align-items:baseline;gap:.85rem}
.entry__n{font-family:var(--serif);font-size:1rem;color:var(--brass-ink);font-variant-numeric:tabular-nums}
.entry__title{font-family:var(--serif);font-size:clamp(1.3rem,2.1vw,1.6rem);line-height:1.15;
  transition:color .25s ease}
.entry__desc{color:var(--ink-2);font-size:1rem;line-height:1.62;max-width:34em}
.entry:hover .entry__title,.entry:focus-visible .entry__title{color:var(--brass-ink)}
.entry:focus-visible{outline:2px solid var(--brass-ink);outline-offset:5px;border-radius:2px}

.practice__out{margin-top:clamp(1.9rem,4vw,2.8rem)}

/* Who stands behind this — principals + regulation boundary */
.tbc{font-family:var(--sans);font-weight:500;font-size:.62em;letter-spacing:.09em;text-transform:uppercase;
  color:#a8512f;border:1px dashed rgba(168,81,47,.5);border-radius:3px;padding:.14em .5em;
  vertical-align:middle;white-space:normal;display:inline-block}
.principals{display:grid;grid-template-columns:1fr;gap:clamp(2.4rem,5vw,3.5rem);
  margin-top:clamp(2.6rem,5vw,4rem)}
@media(min-width:720px){.principals{grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,5rem)}}
.principal__name{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.2rem);
  line-height:1.08;margin:0}
.principal__role{font-family:var(--sans);font-size:.82rem;letter-spacing:.05em;color:var(--ink-3);
  margin:.55rem 0 1.1rem}
.principal__bio{color:var(--ink-2);line-height:1.68;max-width:46ch;margin:0}
.principal__creds{font-family:var(--sans);font-size:.77rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid var(--line);line-height:1.7}
.who-anchor{margin-top:clamp(3rem,6vw,4.5rem);background:var(--navy);color:var(--on-navy);
  padding:clamp(1.9rem,4vw,3.2rem)}
.who-anchor__eyebrow{font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-navy-3);margin:0 0 1.1rem}
.who-anchor p.who-anchor__line{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.3vw,1.8rem);
  line-height:1.35;color:var(--on-navy);max-width:36ch;margin:0}
.who-links{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;margin-top:clamp(1.8rem,4vw,2.6rem)}

/* The pathway — quiet editorial stages */
.pathway-section{background:var(--paper)}
.pathway2{border-top:1px solid var(--line);margin-top:clamp(2rem,4vw,3rem)}
.pathway2__item{display:grid;grid-template-columns:1fr;gap:.3rem;
  padding-block:clamp(1.8rem,4vw,2.9rem);border-bottom:1px solid var(--line)}
@media(min-width:760px){
  .pathway2__item{grid-template-columns:auto minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:start}
}
.pathway2__n{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,4.5vw,3.6rem);line-height:.85;
  color:color-mix(in srgb,var(--ink) 20%,var(--paper));font-variant-numeric:tabular-nums}
.pathway2__body{max-width:54ch}
.pathway2__title{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.4vw,2rem);
  line-height:1.12;margin:0}
.pathway2__desc{color:var(--ink-2);line-height:1.65;margin:.7rem 0 0}

/* Close — navy "Ready to talk?" (continuous with the map), white form rises over it */
.close{position:relative;background:var(--navy)}
.close-statement{position:sticky;top:0;height:100svh;display:grid;place-items:center;
  background:var(--navy);color:var(--on-navy);overflow:hidden;padding:0 var(--gutter,clamp(20px,5vw,64px))}
.close-statement__inner{max-width:24ch;text-align:center}
.cs-line{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,7vw,5.5rem);
  line-height:1.04;letter-spacing:-.015em;color:var(--on-navy);margin:0}
.cs-line--accent{color:var(--brass)}
.js .cs-line{opacity:0;transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .close-statement.is-in .cs-line{opacity:1;transform:none;transition-delay:calc(var(--i,0)*.13s)}

.close-form{position:relative;z-index:2;background:var(--paper);color:var(--ink);
  border-radius:clamp(22px,3vw,40px) clamp(22px,3vw,40px) 0 0;
  box-shadow:0 -40px 70px -40px rgba(20,12,6,.4);
  padding:clamp(3rem,8vh,6rem) 0 clamp(3.4rem,9vh,6rem)}
.close-form__inner{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr}
@media(min-width:860px){.close-form__inner{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.close-form__head .h2{margin:.6rem 0 0;color:var(--ink);max-width:18ch}
.close-form__lede{margin:1.1rem 0 0;color:var(--ink-2);line-height:1.6;max-width:38ch}

.close-form__form{display:grid;gap:1.2rem}
.cf-row{display:grid;gap:1.2rem}
@media(min-width:560px){.cf-row{grid-template-columns:1fr 1fr}}
.cf-field{display:grid;gap:.45rem}
.cf-field label{font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.cf-field input,.cf-field select,.cf-field textarea{width:100%;font:inherit;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:.7em .85em;
  transition:border-color .2s ease,box-shadow .2s ease}
.cf-field textarea{resize:vertical;min-height:5.5em}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{outline:none;
  border-color:var(--brass);box-shadow:0 0 0 3px color-mix(in srgb,var(--brass) 18%,transparent)}
.cf-field select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.cf-fine{font-size:.85rem;color:var(--ink-3);line-height:1.5;margin:.2rem 0 0}
.cf-actions{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:.4rem}
.cf-btn{font-family:var(--sans);font-weight:500;font-size:.98rem;color:var(--on-navy);
  background:var(--brass-ink);border:0;border-radius:999px;padding:.85em 1.8em;cursor:pointer;
  transition:background-color .2s ease}
.cf-btn:hover{background:#7C3820;background:color-mix(in srgb,var(--brass-ink) 85%,#000)}
.cf-status{font-family:var(--sans);font-size:.92rem;color:var(--ink-2)}
@media(prefers-reduced-motion:reduce){.js .cs-line{opacity:1;transform:none}}

/* ============================================================
   Services — sticky intro beside an independently scrolling
   stack of service cards. CSS position:sticky only; the right
   column's own height (six cards) is what releases the sticky
   left column once it runs out — no JS pin-scroller.
   ============================================================ */
.services{background:var(--paper-2);padding-block:clamp(3.5rem,8vh,6rem)}
.services__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.2rem,5vh,3rem)}
@media(min-width:760px){
  .services__grid{grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);
    gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
}
.services__intro{display:grid;gap:1.3rem;align-content:start}
@media(min-width:760px){
  .services__intro{position:sticky;top:calc(var(--hdr-h,72px) + 24px);
    border-right:1px solid var(--brass);padding-right:clamp(1.6rem,3vw,2.6rem)}
}
.services__eyebrow{margin:0}
.services__heading{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,4.4vw,3.1rem);
  line-height:1.08;letter-spacing:-.01em;color:var(--ink);margin:0}
/* inline-flex + explicit colour so the label centres in the pill and the button keeps its
   own colour inside .article-body, where `a { color: inherit }` would otherwise win */
.services__cta{justify-self:start;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:500;font-size:.92rem;line-height:1;
  color:var(--paper);background:var(--ink);border-radius:999px;padding:.95em 1.7em;
  text-decoration:none;border:0;transition:background .2s ease}
.article-body a.services__cta{color:var(--paper)}
.services__cta:hover{background:var(--brass-ink)}

/* Service index: a numbered rail beside compact cards. Replaces the previous stack of
   tall cards, each of which carried four sub-service pills — 24 pills that resolved to
   8 real destinations, five cards' worth all pointing at the same page as their own
   button. One destination per card now, and the whole card is the link. */
.svc-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,2vw,1.5rem)}
.svc-item{position:relative;display:grid;grid-template-columns:2.6rem minmax(0,1fr);
  gap:clamp(.9rem,2vw,1.5rem);align-items:start}
/* the rail: a hairline from each number down to the next */
.svc-item::before{content:"";position:absolute;left:1.3rem;top:2.9rem;
  bottom:calc(-1 * clamp(1rem,2vw,1.5rem));width:1px;background:var(--line)}
.svc-item:last-child::before{display:none}
.svc-item__num{position:relative;z-index:1;display:grid;place-items:center;
  width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--line);background:var(--paper);
  font-family:var(--sans);font-size:.78rem;color:var(--ink-3);font-variant-numeric:tabular-nums;
  transition:border-color .5s ease,color .5s ease}
.svc-item.is-in .svc-item__num{border-color:var(--brass-ink);color:var(--brass-ink)}

.svc-item__card{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1rem,2vw,1.6rem);align-items:center;
  border:1px solid var(--line);border-radius:18px;background:var(--paper);
  padding:clamp(1.2rem,2.2vw,1.7rem);text-decoration:none;color:inherit;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
@media(min-width:720px){
  .svc-item__card{grid-template-columns:minmax(0,1fr) clamp(130px,15vw,180px)}
}
.svc-item__card:hover{border-color:var(--brass);transform:translateY(-2px);
  box-shadow:0 20px 40px -28px color-mix(in srgb,var(--ink) 50%,transparent)}
.svc-item__text{display:grid;gap:.5rem}
.svc-item__title{font-family:var(--serif);font-weight:400;line-height:1.12;
  font-size:clamp(1.35rem,2.3vw,1.85rem);color:var(--ink)}
.svc-item__desc{color:var(--ink-2);line-height:1.55;font-size:clamp(.95rem,1.2vw,1.02rem)}
.svc-item__more{justify-self:start;margin-top:.3rem;font-family:var(--sans);font-size:.88rem;
  font-weight:500;color:var(--ink);border-bottom:1px solid var(--brass-ink);padding-bottom:.15em}
.svc-item__more .arw{transition:transform .2s ease;display:inline-block}
.svc-item__card:hover .svc-item__more{color:var(--brass-ink)}
.svc-item__card:hover .svc-item__more .arw{transform:translateX(3px)}
.svc-item__thumb{border-radius:12px;background-size:cover;background-position:center;
  min-height:clamp(132px,13vw,158px);align-self:stretch}

/* cards you have not scrolled to yet sit back, then come up as you reach them */
.js .svc-item.reveal-band{opacity:.4;transform:translateY(14px)}
.js .svc-item.reveal-band.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .svc-item.reveal-band{opacity:1;transform:none}
}

/* Reach — Auckland-centred, scroll-staged corridor chart (pinned) */
.reach{position:relative;background:var(--navy);color:var(--on-navy);min-height:300svh}
.reach__stage{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden}
.reach__figure{position:absolute;inset:0;z-index:1}
.reach__figure svg{width:100%;height:100%;display:block;overflow:visible}
.reach__head{position:relative;z-index:2;max-width:33ch;
  padding:clamp(104px,13vh,164px) 0 0 clamp(20px,5vw,64px)}
.reach__head .h2{margin:.55rem 0 0;color:var(--on-navy)}
.reach__lede{margin:1.05rem 0 0;color:var(--on-navy-2);max-width:33ch;line-height:1.6}

/* Auckland hub — a ring, not a target */
.reach-hub__halo{fill:none;stroke:var(--brass);stroke-width:1.3;opacity:.16}
.reach-hub__ring{fill:none;stroke:var(--on-navy);stroke-width:1.5;opacity:.85}
.reach-hub__dot{fill:var(--brass)}
.reach-hub__label{fill:var(--on-navy);font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:.005em}
.reach-hub__sub{fill:var(--on-navy-3);font-family:var(--sans);font-size:13px;letter-spacing:.24em}

/* Corridors + markets */
.reach-line{fill:none;stroke:var(--brass);stroke-width:1.2;opacity:.34}
.reach-city__dot{fill:none;stroke:var(--on-navy);stroke-width:1.4;opacity:.9}
.reach-city__label{fill:var(--on-navy-2);font-family:var(--sans);font-size:17px;letter-spacing:.015em}
.js .reach-city{opacity:0}
.js .reach-line{stroke-dasharray:2600;stroke-dashoffset:2600}

/* Hover — light one partner's corridor, quiet the rest */
.reach__head{pointer-events:none}
.reach-city{cursor:default}
.reach-city .reach-line,.reach-city .reach-city__dot,.reach-city .reach-city__label{
  transition:opacity .25s ease,stroke .25s ease,fill .25s ease,stroke-width .25s ease}
.reach-city:focus{outline:none}
.reach-city:hover .reach-line,.reach-city:focus-visible .reach-line{opacity:.95!important;stroke-width:2.1}
.reach-city:hover .reach-city__dot,.reach-city:focus-visible .reach-city__dot{fill:var(--brass);stroke:var(--brass)}
.reach-city:hover .reach-city__label,.reach-city:focus-visible .reach-city__label{fill:var(--on-navy)}
.reach-city:focus-visible .reach-city__dot{r:8}
.reach__figure svg:has(.reach-city:hover) .reach-city:not(:hover) .reach-line{opacity:.08!important}
.reach__figure svg:has(.reach-city:hover) .reach-city:not(:hover) .reach-city__dot,
.reach__figure svg:has(.reach-city:hover) .reach-city:not(:hover) .reach-city__label{opacity:.3}

/* Pulse phase — corridors breathe, Auckland pings outward */
.reach.is-pulsing .reach-line{animation:reachBreathe 2.6s ease-in-out infinite}
.reach.is-pulsing .reach-hub__halo{transform-box:fill-box;transform-origin:center;
  animation:reachPing 2.8s ease-out infinite}
@keyframes reachBreathe{0%,100%{opacity:.26}50%{opacity:.62}}
@keyframes reachPing{0%{transform:scale(1);opacity:.42}70%{opacity:0}100%{transform:scale(3.1);opacity:0}}

/* Click panel — one partner market over the navy */
.reach-city.is-clickable{cursor:pointer}
/* Indonesia is the only market with a partner firm and a page behind it — mark it so the
   map shows there is something to open, rather than hiding it one click deep */
.reach-city--partner .reach-city__dot{fill:var(--brass);stroke:var(--brass)}
.reach-city--partner .reach-city__label{fill:var(--on-navy);font-weight:500}
.reach-city__ring{fill:none;stroke:var(--brass);stroke-width:1.1;opacity:.45}
.reach-city--partner:hover .reach-city__ring,
.reach-city--partner:focus-visible .reach-city__ring{opacity:.9}
html.reach-panel-open{overflow:hidden}
.reach-panel{position:fixed;inset:0;z-index:500}
.reach-panel[hidden]{display:none!important}
.reach-panel__scrim{position:absolute;inset:0;background:rgba(18,10,5,.6);opacity:0;
  transition:opacity .35s ease}
.reach-panel.is-open .reach-panel__scrim{opacity:1}
.reach-panel__sheet{position:absolute;top:0;right:0;height:100%;width:min(430px,90vw);
  background:#211206;border-left:2px solid var(--brass);box-shadow:-30px 0 80px -30px rgba(0,0,0,.6);
  padding:clamp(2.2rem,5vw,3.4rem);display:flex;flex-direction:column;overflow-y:auto;
  transform:translateX(100%);transition:transform .42s cubic-bezier(.2,.7,.2,1)}
.reach-panel.is-open .reach-panel__sheet{transform:none}
.reach-panel__close{position:absolute;top:.9rem;right:1.1rem;background:none;border:0;
  color:var(--on-navy-3);font-size:1.9rem;line-height:1;cursor:pointer;padding:.1rem .45rem;
  transition:color .2s ease}
.reach-panel__close:hover{color:var(--on-navy)}
.reach-panel__eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);margin:.4rem 0 0}
.reach-panel__city{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,2.7rem);
  line-height:1.04;color:var(--on-navy);margin:.9rem 0 0}
.reach-panel__line{color:var(--on-navy-2);line-height:1.65;max-width:34ch;margin:1.3rem 0 0}
.reach-panel__tagwrap{margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid var(--line-navy)}
.reach-panel__tagslabel{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-navy-3);margin:0 0 .9rem}
.reach-panel__tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.reach-panel__tags li{display:flex}
.reach-panel__tags a{font-family:var(--sans);font-size:.82rem;color:var(--on-navy-2);text-decoration:none;
  border:1px solid color-mix(in srgb,var(--brass) 45%,transparent);border-radius:999px;
  padding:.36em .9em;white-space:nowrap;transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.reach-panel__tags a::after{content:" \2197";color:var(--brass)}
.reach-panel__tags a:hover{color:var(--on-navy);border-color:var(--brass);
  background:color-mix(in srgb,var(--brass) 12%,transparent)}
.reach-panel__cta{margin-top:auto;padding-top:2.4rem;align-self:flex-start;
  font-family:var(--sans);font-weight:500;color:var(--brass);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--brass) 55%,transparent);padding-bottom:2px;
  transition:border-color .2s ease,color .2s ease}
.reach-panel__cta:hover{color:#E0A878;border-color:#E0A878}

/* Screen-reader / mobile market list */
.reach__list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(max-width:760px){
  .reach{min-height:0}
  .reach__stage{position:relative;top:auto;height:auto;min-height:0;overflow:visible;padding-bottom:clamp(2.6rem,9vw,3.6rem)}
  .reach__head{padding:clamp(88px,20vw,120px) clamp(20px,5vw,64px) 0}
  .reach__figure{display:none}
  .reach__list{position:static;width:auto;height:auto;clip:auto;white-space:normal;list-style:none;
    padding:0 clamp(20px,5vw,64px);margin:clamp(1.8rem,7vw,2.6rem) 0 0;display:grid;gap:0}
  .reach__list li{font-family:var(--serif);font-size:1.3rem;color:var(--on-navy);
    border-top:1px solid var(--line-navy);padding:0}

  /* The map is hidden here, and with it the line of text and the links each
     country carries. The list opens instead, built from that same data, so the
     phone shows the work rather than a column of names. */
  .reach-m__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
    background:none;border:0;padding:.95rem 0;text-align:left;cursor:pointer;
    font-family:var(--serif);font-size:1.3rem;line-height:1.2;color:var(--on-navy)}
  .reach-m__sign{position:relative;width:14px;height:14px;flex:none}
  .reach-m__sign::before,.reach-m__sign::after{content:"";position:absolute;
    background:var(--brass);transition:transform .25s ease}
  .reach-m__sign::before{left:0;right:0;top:6px;height:1.5px}
  .reach-m__sign::after{top:0;bottom:0;left:6px;width:1.5px}
  .reach-m__q[aria-expanded="true"] .reach-m__sign::after{transform:scaleY(0)}
  .reach-m__a{padding:0 0 1.15rem}
  .reach-m__a p{margin:0;color:var(--on-navy-2);line-height:1.6;font-size:1rem;
    font-family:var(--sans)}
  .reach-m__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.95rem !important}
  .reach-m__tags a{display:inline-block;padding:.42rem .85rem;border:1px solid var(--line-navy);
    border-radius:999px;font-family:var(--sans);font-size:.82rem;color:var(--on-navy);
    text-decoration:none}
  .reach-m__tags a::after{content:" \2197";color:var(--brass)}
}
@media(prefers-reduced-motion:reduce){
  .reach{min-height:100svh}
  .reach__stage{position:relative;top:auto}
  .reach.is-pulsing .reach-line,.reach.is-pulsing .reach-hub__halo{animation:none}
}

/* Stacking cards — who stands behind this (CSS sticky + scroll-timeline recede) */
.who-stack-section{background:linear-gradient(to bottom,var(--navy) 0,var(--navy) 6vh,var(--paper) 60vh)}
.card-stack{--stack-row:88svh;--stack-top:clamp(120px,13vh,168px);
  --stack-card-height:calc(var(--stack-row) - 2 * var(--stack-top));
  grid-auto-rows:var(--stack-row);display:grid;position:relative;
  max-width:54rem;margin-inline:auto;padding-block:clamp(1.5rem,4vw,3rem) 0}
.stack-card{position:sticky;top:var(--stack-top);height:var(--stack-card-height);
  transform-origin:50% 0%;backface-visibility:hidden;will-change:transform,filter;
  background:var(--navy);color:var(--on-navy);
  border-radius:20px;padding:clamp(1.6rem,3.4vw,2.8rem);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 34px 66px -34px rgba(22,12,5,.55)}
.stack-card:nth-child(1){z-index:1}
.stack-card:nth-child(2){z-index:2}
.stack-card:nth-child(3){z-index:3}
.stack-card:nth-child(4){z-index:4}
.stack-card:nth-child(5){z-index:5}
.stack-card__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-family:var(--sans);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-navy-3)}
.stack-card__n{font-family:var(--serif);font-size:1rem;letter-spacing:.04em;color:var(--on-navy-2)}
/* centre the body in the leftover height — margin-top:auto alone dumped all the
   slack into one gap under the kicker row, which read as broken spacing */
.stack-card__body{margin-block:auto;display:grid;gap:1rem}
.stack-card__h{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3.1vw,2.6rem);
  line-height:1.08;letter-spacing:-.01em;margin:0;color:var(--on-navy);max-width:20ch}
.stack-card__h--name{max-width:none}
.stack-card__p{color:var(--on-navy-2);line-height:1.6;max-width:54ch;margin:0;
  font-size:clamp(1rem,1.35vw,1.12rem)}
.stack-card__links{display:flex;flex-wrap:wrap;gap:1rem 1.8rem;margin-top:.6rem}
.stack-card__links a{color:var(--on-navy);text-decoration:none;font-weight:500;
  border-bottom:1px solid var(--line-navy);padding-bottom:2px;transition:border-color .2s}
.stack-card__links a:hover{border-color:var(--on-navy)}
/* alternating bronze cards (deep muted bronze, ivory text) */
.stack-card--bronze{background:#6E4526;color:var(--on-navy)}
.stack-card--bronze .stack-card__top,.stack-card--bronze .stack-card__n{color:rgba(244,237,226,.62)}
.stack-card--bronze .stack-card__p{color:rgba(244,237,226,.87)}
.stack-card--bronze .stack-card__links a{color:var(--on-navy);border-bottom-color:rgba(244,237,226,.34)}
.stack-card--bronze .stack-card__links a:hover{border-color:var(--on-navy)}
.stack-card--bronze .tbc{color:#F2C79E;border-color:rgba(242,199,158,.5)}

/* recede is applied by JS (scroll-linked); no transform = clean flat stack */
@media (prefers-reduced-motion:reduce){.stack-card{transform:none!important;filter:none!important}}
@media(max-width:640px){
  .card-stack{--stack-row:82svh;--stack-top:104px}
  .stack-card{border-radius:16px}
}

/* ============================================================
   Partners — a brown band carrying the figures and a marquee of client marks.
   The ground is the bronze already used by .stack-card--bronze, over a very
   quiet vertical grain: two repeating-linear-gradients at 3-5% alpha, on
   irregular periods so the stripes never line up into an obvious pattern.
   Flat fills elsewhere per STYLE.md — this is texture, not a gradient fill.
   Logos arrive in five different brand colours, so they are rendered as flat
   white marks: it reads as one set, and it is what the client asked for.
   ============================================================ */
.partners{position:relative;overflow:hidden;color:var(--on-navy);
  background-color:#6E4526;background-image:url('images/partners-wood.jpg');
  background-size:cover;background-position:center}
/* the grain is a photograph, so the type needs a scrim over it rather than the
   other way round: .42 keeps the figures and the lead above 4.5:1 against the
   brightest part of the board while the grain still reads */
.partners::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(27,15,6,.46)}
.partners > *{position:relative;z-index:1}
.partners__head{max-width:var(--measure)}
.partners__head .h2{margin:0;color:var(--on-navy)}
.partners__lead{margin:1rem 0 0;color:rgba(246,238,224,.92);line-height:1.6;
  font-size:clamp(1rem,1.35vw,1.12rem)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);margin:clamp(2.4rem,5.5vw,4rem) 0 0;
  border-top:1px solid rgba(246,238,224,.22)}
.stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:.45rem;
  padding:clamp(1.5rem,3.2vw,2.4rem) clamp(1rem,2.2vw,1.8rem);
  border-left:1px solid rgba(246,238,224,.22)}
.stat:first-child{border-left:0;padding-left:0}
/* column-reverse puts the figure above its label visually, while the DOM keeps
   label-then-value so a screen reader reads "Partners Served, 500+" */
.stat__num{margin:0;font-family:var(--serif);font-weight:400;line-height:.95;
  font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.02em;color:#F2C79E}
.stat__label{font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(246,238,224,.66)}

/* Four identical sets translate by exactly one set width (25%), so the loop is
   seamless. Two sets is the usual pattern but is wrong here: one set is narrower
   than a desktop viewport, so the track ran out and left a gap at the right edge
   near the end of each cycle. The copies are aria-hidden so the list is announced once. */
.partners__rail{position:relative;margin-top:clamp(2.6rem,5.5vw,4rem);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.partners__track{display:flex;width:max-content;animation:partners-scroll 71s linear infinite}
.partners__rail:hover .partners__track,
.partners__rail:focus-within .partners__track{animation-play-state:paused}
.partners__set{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.partners__item{flex:none;padding-inline:clamp(1.8rem,4.5vw,4rem);
  display:flex;align-items:center;min-height:clamp(78px,9vw,112px)}
/* the marks are already flat white with transparency, so only opacity varies */
.partners__logo{display:block;width:auto;opacity:.78;transition:opacity .3s ease;
  height:clamp(22px,2.6vw,34px)}
.partners__item:hover .partners__logo{opacity:1}
/* Optical sizing: a wide wordmark, a mark inside a box, and a stacked roundel
   all need different heights to carry the same weight. Matching them on height
   alone left Can-Achieve an unreadable speck. */
.partners__logo--boxed{height:clamp(30px,3.4vw,44px)}
.partners__logo--stacked{height:clamp(46px,5.2vw,68px)}
/* very wide wordmarks need less height to match the others' x-height */
.partners__logo--wide{height:clamp(16px,1.9vw,25px)}

/* Reviews — a second block on the same board, so there is no seam between the
   marks and the quotes. Sits inside .partners, which already carries the grain
   and the scrim; .partners > * puts it above both. */
.reviews{margin-top:clamp(3rem,7vw,6rem);padding-bottom:clamp(.5rem,1.5vw,1.2rem)}
.reviews__h{margin:0 0 clamp(1.6rem,3.2vw,2.4rem);font-family:var(--serif);font-weight:400;
  line-height:1.1;font-size:clamp(1.5rem,3vw,2.2rem);color:var(--on-navy)}
.reviews__grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:clamp(1rem,1.8vw,1.4rem)}
.review{display:flex}
.review__card{height:100%;width:100%;display:flex;flex-direction:column;gap:clamp(.9rem,1.6vw,1.2rem);
  margin:0;padding:clamp(1.3rem,2.4vw,1.75rem);border-radius:18px;
  background:rgba(23,13,5,.76);
  box-shadow:inset 0 0 0 1px rgba(246,238,224,.17),0 26px 50px -34px rgba(0,0,0,.85)}
/* the grain is a photograph and the brightest boards wash out italic serif, so
   the card carries most of the contrast itself and the blur only softens what
   is left showing through */
@supports (backdrop-filter:blur(6px)){.review__card{backdrop-filter:blur(6px)}}
.review__stars{margin:0;color:#F2C79E;font-size:1rem;letter-spacing:.18em;line-height:1}
.review__quote{margin:0;flex:1}
.review__quote p{margin:0;font-family:var(--serif);font-style:italic;line-height:1.5;
  font-size:clamp(1rem,1.3vw,1.1rem);color:rgba(246,238,224,.94)}
.review__by{display:flex;flex-direction:column;gap:.2rem;
  border-top:1px solid rgba(246,238,224,.18);padding-top:clamp(.8rem,1.5vw,1.1rem)}
.review__name{font-family:var(--sans);font-weight:600;font-size:.98rem;color:var(--on-navy)}
.review__matter{font-family:var(--sans);font-size:.85rem;color:#F2C79E}

/* The drop. Scroll drives it, so the cards are pulled down one after another
   rather than firing once on entry — JS writes --d (0 to 1) per card and the
   transform reads it, which keeps the work off the main thread's layout path. */
.js .reviews__h,
.js .reviews__grid .review{will-change:transform,opacity}
.js .reviews__h,
.js .reviews__grid .review{--d:0;opacity:var(--d);
  transform:translate3d(0,calc((1 - var(--d)) * -72px),0)}
@media(prefers-reduced-motion:reduce){
  .js .reviews__h,
  .js .reviews__grid .review{--d:1 !important;opacity:1;transform:none}
}
@media(max-width:600px){
  .reviews__grid{grid-template-columns:1fr}
}
@keyframes partners-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-25%,0,0)}}

@media(max-width:760px){
  .stats{grid-template-columns:repeat(2,1fr);border-top:0}
  .stat{border-left:0;border-top:1px solid rgba(246,238,224,.22);padding-inline:0}
  .stat:nth-child(2n){padding-left:clamp(1rem,4vw,1.6rem);
    border-left:1px solid rgba(246,238,224,.22)}
}
/* no motion: the track stops and the marks wrap into a centred row */
@media (prefers-reduced-motion:reduce){
  .partners__track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .partners__set[aria-hidden]{display:none}
  .partners__set{flex-wrap:wrap;justify-content:center}
  .partners__rail{-webkit-mask-image:none;mask-image:none}
}

/* ============================================================
   Process — the section pins to the viewport and the four steps travel
   sideways as you scroll down. A deliberate exception to "no pinned
   slideshows" in STYLE.md; see the Motion note there.
   ============================================================ */
.procx{background:var(--paper);padding-block:0;--panels:4;--panel-w:clamp(17rem,66vw,40rem)}
.procx__scroll{height:calc(var(--panels) * 90svh)}
.procx__pin{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(1.4rem,3.5vh,2.6rem);
  /* the header is fixed and overlaps a top:0 sticky, so clear it explicitly */
  padding-block:calc(var(--hdr-h,72px) + clamp(1rem,2.5vh,2rem)) clamp(2.5rem,6vh,4.5rem)}
.procx__head{flex:none}
.procx__head .h2{margin:.5rem 0 0;color:var(--ink)}

.procx__viewport{flex:1 1 auto;min-height:0;display:flex;align-items:center;overflow:hidden}
.procx__track{list-style:none;margin:0;display:flex;align-items:stretch;
  gap:clamp(1.4rem,4vw,3.2rem);
  /* line the first panel up with .wrap's content edge, not the raw gutter */
  padding:0 0 0 calc(max((100vw - var(--maxw)) / 2, 0px) + var(--gutter));
  will-change:transform}
/* the panel is taller than its text on purpose: the left hairline then reads as a
   full-height column rule and holds the composition, instead of the copy floating
   in the middle of an empty pin */
.procx__panel{flex:0 0 var(--panel-w);display:flex;flex-direction:column;
  justify-content:center;min-height:min(54svh,30rem);
  padding-left:clamp(1.2rem,2.6vw,2.2rem);
  border-left:1px solid var(--line);
  opacity:.32;transition:opacity .5s ease}
.procx__panel.is-active{border-left-color:var(--brass)}
.procx__panel.is-active{opacity:1}
.procx__t{font-family:var(--serif);font-weight:400;margin:0;color:var(--ink);
  font-size:clamp(1.8rem,4vw,3.1rem);line-height:1.08;letter-spacing:-.012em}
.procx__d{margin:.85rem 0 0;color:var(--ink-2);line-height:1.6;max-width:42ch;
  font-size:clamp(1rem,1.35vw,1.12rem)}

.procx__foot{flex:none;display:flex;align-items:center;
  gap:clamp(1rem,3vw,2.4rem);flex-wrap:wrap}
.procx__progress{position:relative;flex:1 1 8rem;height:1px;background:var(--line)}
.procx__bar{position:absolute;inset:0 auto 0 0;width:0;background:var(--brass);
  will-change:width}
.procx__links{display:flex;flex-wrap:wrap;gap:1rem 1.8rem;margin:0;flex:none}
.procx__links a{color:var(--ink);text-decoration:none;font-weight:500;
  border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .2s}
.procx__links a:hover{border-color:var(--brass)}

/* Under 768px, and for anyone who asked for less motion, the pin is dropped
   entirely: the steps become a plain vertical list. Pinning a horizontal
   track on a phone fights the user's own scroll. */
@media(max-width:768px),(prefers-reduced-motion:reduce){
  .procx{padding-block:clamp(3.4rem,7.5vw,6.5rem)}
  .procx__scroll{height:auto}
  .procx__pin{position:static;height:auto;overflow:visible;padding-block:0;
    gap:clamp(1.8rem,5vw,2.6rem)}
  .procx__viewport{display:block;overflow:visible}
  /* the track is not inside a .wrap, so it carries the gutter itself here */
  .procx__track{flex-direction:column;gap:0;transform:none!important;
    padding:0 var(--gutter);max-width:var(--maxw);margin-inline:auto}
  .procx__panel{flex:none;opacity:1;border-left:0;padding-left:0;min-height:0;
    padding-block:clamp(1.6rem,5vw,2.4rem);border-top:1px solid var(--line)}
  .procx__panel:first-child{border-top:0;padding-top:0}
    .procx__foot .procx__progress,.procx__foot   .procx__foot{margin-top:.5rem}
}

/* ============================================================
   Showcase — left index drives a right image-stage (crossfade),
   accordion under 768px. The "what we do" section.
   ============================================================ */
.showcase{position:relative;background:var(--paper);overflow:hidden}
.showcase__list{list-style:none;margin:0;padding:0}
.showcase__lead{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:1.05;margin:0;
  font-size:clamp(1.7rem,6vw,2.3rem)}
.sc-head{display:flex;align-items:baseline;gap:.85rem;width:100%;text-align:left;background:none;border:0;
  cursor:pointer;color:var(--ink);font-family:var(--serif);transition:opacity .3s ease;
  padding:clamp(.9rem,3vw,1.1rem) clamp(1.2rem,4vw,1.5rem)}
.sc-item:not(.is-active) .sc-head{opacity:.4}
.sc-head__n{font-size:.8rem;color:inherit;opacity:.65;font-variant-numeric:tabular-nums}
.sc-head__t{font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.15;font-weight:400}
.sc-head:focus-visible{outline:2px solid var(--ink);outline-offset:-3px;border-radius:9px}
.sc-panel__bg{background-size:cover;background-position:center}
.sc-panel__scrim{background:linear-gradient(180deg,rgba(24,14,6,.15),rgba(24,14,6,.72))}
.sc-panel__title{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.9rem);
  line-height:1.05;margin:0 0 .7rem;color:#F6F2E8}
.sc-panel__desc{color:rgba(246,242,232,.86);font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.55;margin:0}
.sc-panel__desc + .sc-panel__desc{margin-top:.7rem}
.sc-panel__link{display:inline-flex;gap:.5em;margin-top:1.35rem;color:#F6F2E8;text-decoration:none;
  font-weight:500;border-bottom:1px solid rgba(246,242,232,.5);padding-bottom:2px;transition:border-color .2s}
.sc-panel__link:hover{border-color:#F6F2E8}

@media(min-width:768px){
  .showcase{min-height:max(100vh,720px)}
  .showcase__aside{width:42%;min-height:max(100vh,720px);display:flex;flex-direction:column;
    justify-content:center;gap:clamp(1.4rem,3.5vh,2.3rem);padding:clamp(2rem,5vh,4rem) clamp(1.6rem,3.2vw,3rem)}
  .showcase__lead{font-size:clamp(1.7rem,2.7vw,2.5rem);max-width:15ch;padding-left:clamp(1rem,2vw,1.5rem)}
  .showcase__list{display:flex;flex-direction:column;gap:.4rem}
  .sc-item{display:flex;align-items:center;border-radius:10px;transition:background .25s ease}
  .sc-item.is-active{background:color-mix(in srgb,var(--ink) 5%,var(--paper))}
  .sc-panel{position:absolute;top:0;bottom:0;right:0;width:58%;opacity:0;pointer-events:none;
    transition:opacity .32s ease}
  .sc-item.is-active .sc-panel{opacity:1;pointer-events:auto}
  .sc-panel__bg{position:absolute;inset:0}
  .sc-panel__scrim{position:absolute;inset:0}
  .sc-panel__content{position:absolute;left:0;bottom:0;padding:clamp(1.8rem,4vw,3.4rem);max-width:46ch}
}
@media(max-width:767px){
  .showcase__aside{padding-top:clamp(4.5rem,13vw,6rem)}
  .showcase__lead{padding:0 clamp(1.3rem,4vw,1.6rem);margin-bottom:clamp(1.3rem,4vw,1.8rem);max-width:18ch}
  .sc-item{border-top:1px solid var(--line)}
  .sc-item:first-child{border-top:0}
  /* The scrim is a sibling of the photo, not a child of it. Without position on
     .sc-panel its inset:0 resolved against .showcase, so all five scrims covered
     the whole section and buried the list and the lead under five dark gradients.
     Contained here, and held to the photo band, which is the only thing it is for:
     on mobile the text sits below the picture, not on it. */
  .sc-panel{position:relative;max-height:0;overflow:hidden;transition:max-height .35s ease}
  .sc-item.is-active .sc-panel{max-height:640px}
  .sc-panel__bg{position:relative;height:210px}
  .sc-panel__scrim{position:absolute;left:0;right:0;top:0;height:210px}
  .sc-panel__content{padding:1.1rem clamp(1.4rem,4vw,2rem) 1.7rem;max-width:none}
  .sc-panel__title{color:var(--ink)}
  .sc-panel__desc{color:var(--ink-2)}
  .sc-panel__link{color:var(--ink);border-color:var(--brass-ink)}
}
@media (prefers-reduced-motion:reduce){
  .sc-panel{transition:none}
}

/* Thesis band + chapters — the sequence after the hero */
.thesis-band{padding-top:clamp(5rem,9vw,8.5rem);padding-bottom:clamp(2.5rem,6vw,5rem)}
.thesis-band__title{font-family:var(--serif);font-weight:400;font-size:clamp(1.95rem,4.4vw,3.5rem);
  line-height:1.06;letter-spacing:-.012em;max-width:19ch;margin:0}
.thesis-band__sub{margin-top:clamp(1.3rem,2.6vw,2rem);max-width:54ch;display:grid;gap:.65rem}
.thesis-band__sub p{color:var(--ink-2);font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.55}

.chapters{border-top:1px solid var(--line)}
.chapter{position:relative;min-height:55vh;display:flex;align-items:center;overflow:hidden;
  border-bottom:1px solid var(--line)}
.chapter__inner{position:relative;width:100%}
.chapter__num{position:absolute;left:-.05em;top:50%;transform:translateY(-50%);z-index:0;
  font-family:"Libre Caslon Display",Georgia,serif;font-size:clamp(8rem,33vh,24rem);line-height:.8;
  color:color-mix(in srgb,var(--ink) 9%,transparent);pointer-events:none;user-select:none;
  font-variant-numeric:tabular-nums}
.chapter__body{position:relative;z-index:1;padding-left:clamp(0px,11vw,10rem)}
.chapter__title{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,4.6vw,3.7rem);
  line-height:1.03;letter-spacing:-.01em;margin:0}
.chapter__title a{text-decoration:none;color:inherit;transition:color .25s ease}
.chapter__title a:hover{color:var(--brass-ink)}
.chapter__line{margin-top:clamp(1rem,2vw,1.5rem);max-width:44ch;color:var(--ink-2);
  font-size:clamp(1.05rem,1.55vw,1.2rem);line-height:1.6}
@media(max-width:640px){
  .chapter{min-height:46vh}
  .chapter__num{font-size:clamp(7rem,26vh,14rem);color:color-mix(in srgb,var(--ink) 7%,transparent)}
  .chapter__body{padding-left:0}
}

/* one whole-band reveal (progressive enhancement; visible without JS / reduced motion) */
.js .reveal-band{opacity:0;transform:translateY(18px);transition:opacity .85s ease,transform .85s ease}
.js .reveal-band.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal-band{opacity:1;transform:none;transition:none}}

/* ---------- utilities ---------- */
.mt-s{margin-top:1rem}.mt-m{margin-top:1.8rem}.mt-l{margin-top:2.6rem}
.center{text-align:center}
.narrow{max-width:52ch}

/* ============================================================
   Full-screen menu (Osmo-style), click Menu -> animated overlay
   ============================================================ */
.menu-toggle{display:inline-flex;align-items:center;gap:.6rem;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:.86rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:inherit;padding:.4rem 0;line-height:1}
.menu-toggle__lines{width:22px;height:9px;position:relative;display:inline-block}
.menu-toggle__lines::before,.menu-toggle__lines::after{content:"";position:absolute;left:0;right:0;
  height:1.5px;background:currentColor;transition:transform .3s ease}
.menu-toggle__lines::before{top:0}
.menu-toggle__lines::after{bottom:0}
.site-header--hero .menu-toggle{color:#F7F4ED}
.site-header--hero.is-solid .menu-toggle{color:var(--ink)}

html.menu-open{overflow:hidden}
html.menu-open .site-header .menu-toggle,
html.menu-open .site-header--hero.is-solid .menu-toggle{color:#F7F4ED}
/* The on-light rule above (0,4,0) outranks the first selector here (0,3,1), so over
   the gold home hero the button stayed inked once the menu opened and CLOSE sank
   into the dark panel. Beaten explicitly rather than by reordering. */
html.menu-open .site-header--hero.on-light:not(.is-solid) .menu-toggle{color:#F7F4ED}
html.menu-open .menu-toggle__lines::before{transform:translateY(3.75px) rotate(45deg)}
html.menu-open .menu-toggle__lines::after{transform:translateY(-3.75px) rotate(-45deg)}
html.menu-open .site-header{z-index:400;background:transparent;border-color:transparent;backdrop-filter:none}

/* underlay: menu sits behind the page shell; page slides down to reveal it */
.page-shell{position:relative;z-index:2;background:var(--paper);
  transition:transform .7s cubic-bezier(.76,0,.24,1),border-radius .7s cubic-bezier(.76,0,.24,1)}
html.menu-open .page-shell{transform:translateX(-42vw);border-radius:22px;overflow:hidden;
  box-shadow:0 0 90px -8px rgba(20,12,6,.55)}
.site-menu{position:fixed;inset:0;z-index:1;background:var(--navy);color:var(--on-navy);
  visibility:hidden;transition:visibility 0s linear .7s;overflow-y:auto}
html.menu-open .site-menu{visibility:visible;transition:visibility 0s}
.site-menu__inner{width:42vw;margin-left:auto;min-height:100%;
  padding:clamp(3.5rem,9vh,6rem) clamp(2.5rem,4vw,4.5rem) clamp(2rem,5vh,4rem);
  display:flex;flex-direction:column;justify-content:center}
@media(max-width:768px){
  html.menu-open .page-shell{transform:translateX(-84vw)}
  .site-menu__inner{width:84vw}
}
.site-menu__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.1rem,.9vh,.5rem)}
.site-menu__list a{display:inline-flex;align-items:baseline;gap:clamp(.8rem,1.4vw,1.2rem);width:fit-content;
  text-decoration:none;color:var(--on-navy);font-family:var(--serif);font-weight:400;
  font-size:clamp(1.25rem,2.1vw,2.05rem);line-height:1.15;letter-spacing:-.005em;
  opacity:0;transform:translateY(24px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1),color .25s}
html.menu-open .site-menu__list a{opacity:1;transform:none}
html.menu-open .site-menu__list li:nth-child(1) a{transition-delay:.20s}
html.menu-open .site-menu__list li:nth-child(2) a{transition-delay:.25s}
html.menu-open .site-menu__list li:nth-child(3) a{transition-delay:.30s}
html.menu-open .site-menu__list li:nth-child(4) a{transition-delay:.35s}
html.menu-open .site-menu__list li:nth-child(5) a{transition-delay:.40s}
html.menu-open .site-menu__list li:nth-child(6) a{transition-delay:.45s}
html.menu-open .site-menu__list li:nth-child(7) a{transition-delay:.50s}
.site-menu__n{font-family:var(--sans);font-size:clamp(.78rem,1vw,.95rem);letter-spacing:.16em;
  color:var(--brass);align-self:center}
.site-menu__list a:hover{color:var(--brass)}

/* Practice row — expandable to reveal the six pillars inline */
.site-menu__row{display:flex;align-items:center;gap:.7rem}
.site-menu__expand{background:none;border:1px solid var(--line-navy);border-radius:50%;
  width:clamp(30px,3vw,36px);height:clamp(30px,3vw,36px);flex:none;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--on-navy-2);transition:border-color .2s ease,color .2s ease}
.site-menu__expand:hover{border-color:var(--brass);color:var(--brass)}
.site-menu__chev{display:block;width:.46em;height:.46em;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .25s ease}
.site-menu__expand[aria-expanded="true"] .site-menu__chev{transform:rotate(225deg);margin-top:.32em}
.site-menu__sub{list-style:none;margin:0;padding-left:clamp(2.6rem,4.4vw,4rem);
  display:grid;gap:.05rem;max-height:0;overflow:hidden;transition:max-height .4s ease}
.site-menu__item--expand.is-open .site-menu__sub{max-height:28rem}
.site-menu__sub a{display:block;width:auto;font-family:var(--sans);font-weight:400;
  font-size:clamp(.96rem,1.25vw,1.1rem);color:var(--on-navy-2);padding:.48rem 0}
.site-menu__sub a:hover{color:var(--brass)}
@media(prefers-reduced-motion:reduce){.site-menu__sub,.site-menu__chev{transition:none}}
.site-menu__foot{margin-top:clamp(2rem,5vh,3.5rem);display:flex;flex-wrap:wrap;gap:.5rem 2rem;
  font-family:var(--sans);font-size:.86rem;color:var(--on-navy-3);
  opacity:0;transform:translateY(18px);transition:opacity .5s ease .56s,transform .6s ease .56s}
html.menu-open .site-menu__foot{opacity:1;transform:none}
.site-menu__foot a{color:var(--on-navy-2);text-decoration:none;border-bottom:1px solid var(--line-navy)}
.site-menu__foot a:hover{color:var(--on-navy)}
.site-menu__foot a.site-menu__foot-cta{font-weight:500;font-size:.92rem;color:var(--on-navy);border-color:var(--brass)}
.site-menu__foot a.site-menu__foot-cta:hover{color:var(--brass)}
@media (prefers-reduced-motion:reduce){
  .site-menu,.site-menu__list a,.site-menu__foot{transition:none}
}

/* ---------- FAQ — one question per row, answers folded away ----------
   Native <details>/<summary>: it opens without script, it is reachable by keyboard, and
   screen readers announce the expanded state on their own. The only things taken off it
   are the browser's default triangle and the focus outline on the whole row, which is
   replaced by one on the question text. */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:1.4rem;
  padding:clamp(1.05rem,1.9vw,1.4rem) 0;
  font-family:var(--serif);font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.35;
  color:var(--ink);transition:color .2s ease}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--brass-ink)}
.faq__item[open] > .faq__q{color:var(--brass-ink)}
/* the sign: a plus that loses its upright stroke when the row opens */
.faq__q::after{content:"";flex:none;margin-left:auto;position:relative;
  width:13px;height:13px;margin-top:.42em;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;
  transition:transform .25s ease,opacity .25s ease}
.faq__item[open] > .faq__q::after{transform:rotate(90deg);
  background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat}
.faq__a{padding:0 0 clamp(1.1rem,2vw,1.5rem);max-width:72ch}
.faq__a p{margin:0;color:var(--ink-2);line-height:1.65;font-size:clamp(.98rem,1.15vw,1.04rem)}
.faq__a p + p{margin-top:.8rem}
.faq__a strong{color:var(--ink);font-weight:500}
.faq__item[open] .faq__a{animation:faqIn .32s ease both}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .faq__item[open] .faq__a{animation:none}
  .faq__q::after{transition:none}
}

/* ---------- Rate tool — what an hourly rate clears ----------
   The AEWV thresholds are multiples of one number, which is almost impossible to hold in
   your head from prose. Here the number is a thing you move: drag the rate and the rows
   you clear light up. It degrades to a plain, readable list of thresholds without script
   — every value is in the markup, and the slider is a native range input. */
.rate{margin-top:clamp(1.6rem,3vw,2.4rem)}
.rate__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.55rem;border-bottom:1px solid var(--line)}
.rate__label{font-family:var(--sans);font-size:.73rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-2)}
.rate__value{font-family:var(--serif);font-size:clamp(2.1rem,4.6vw,3.1rem);line-height:1;
  color:var(--brass-ink);font-variant-numeric:tabular-nums}
.rate__slider{width:100%;margin:1.15rem 0 .5rem;accent-color:var(--brass-ink);cursor:pointer}
.rate__slider:focus-visible{outline:2px solid var(--brass-ink);outline-offset:4px}
.rate__note{margin:0 0 clamp(1.3rem,2.4vw,1.9rem);font-size:.92rem;color:var(--ink-2);max-width:62ch}

.rate__list{list-style:none;margin:0;padding:0}
.rate__row{display:grid;grid-template-columns:auto minmax(0,1fr) 1.35rem;
  grid-template-areas:"amt what state" "bar bar bar";
  gap:.15rem 1.15rem;align-items:baseline;
  padding:1rem 0 .95rem;border-top:1px solid var(--line)}
.rate__amt{grid-area:amt;font-family:var(--sans);font-size:1rem;font-weight:500;
  color:var(--ink-2);font-variant-numeric:tabular-nums;transition:color .3s ease}
.rate__what{grid-area:what;font-size:.95rem;line-height:1.55;color:var(--ink-2);transition:color .3s ease}
.rate__what strong{color:var(--ink);font-weight:500;transition:color .3s ease}
.rate__state{grid-area:state;justify-self:end;align-self:center;
  width:1.1rem;height:1.1rem;border-radius:50%;border:1px solid var(--line);
  position:relative;transition:border-color .3s ease,background .3s ease}
/* the tick, drawn from two borders and only shown once the row is cleared */
.rate__state::after{content:"";position:absolute;left:.3rem;top:.14rem;
  width:.3rem;height:.55rem;border:solid #fff;border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) scale(.4);opacity:0;transition:opacity .25s ease,transform .25s ease}
.rate__bar{grid-area:bar;height:3px;margin-top:.75rem;background:var(--line);border-radius:2px}
.rate__bar > span{display:block;height:100%;width:0;border-radius:2px;background:#CBB79B;
  transition:width .7s cubic-bezier(.16,1,.3,1),background .3s ease}
.rate.is-in .rate__bar > span{width:var(--w)}

.rate__row.is-met .rate__amt{color:var(--brass-ink)}
.rate__row.is-met .rate__what{color:var(--ink)}
.rate__row.is-met .rate__bar > span{background:var(--brass)}
.rate__row.is-met .rate__state{background:var(--brass);border-color:var(--brass)}
.rate__row.is-met .rate__state::after{opacity:1;transform:rotate(45deg) scale(1)}

@media(max-width:560px){
  .rate__row{grid-template-columns:auto 1.35rem;
    grid-template-areas:"amt state" "what what" "bar bar";gap:.3rem .9rem}
}
@media(prefers-reduced-motion:reduce){
  .rate__bar > span,.rate__state,.rate__state::after,.rate__amt,.rate__what{transition:none}
}

/* A band frame that is dark at source. The photograph has to be lifted without lifting
   the type with it, so it moves onto its own layer behind the scrim and takes the filter
   there — a filter on .hero-band itself would wash out the title and kicker too.
   The scrim is eased off on the right at the same time, or the lift is simply eaten by it;
   the left stays dark enough to carry the heading. */
.hero-band--lift{background-image:none}
.hero-band--lift::after{content:"";position:absolute;inset:0;z-index:-1;
  background-image:var(--band-img);background-size:cover;
  background-position:center 58%;background-repeat:no-repeat;
  filter:brightness(1.62) contrast(.9) saturate(1.06)}
.hero-band--lift::before{background:linear-gradient(90deg,
  rgba(27,15,6,.74) 0%,rgba(27,15,6,.4) 46%,rgba(27,15,6,.1) 100%)}

/* The phone action bar does not exist above 767px. Declared here, outside the
   media query, because a bare div in normal flow added 27px to every desktop
   page before this line existed. */
.mobile-bar{display:none}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE (≤767px)
   Everything below is phone-only. The desktop rendering is unchanged — every
   page was pixel-diffed at 1400px before and after this block was added.
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:767px){

  /* ── Vertical rhythm ──────────────────────────────────────────────────────
     The desktop clamps bottom out at their minimum here, which is generous on
     a 390px screen and costs roughly a screen of scrolling per page. */
  .section{padding-block:2.9rem}
  .section--tight{padding-block:2.2rem}
  .hero{padding-block:2.1rem 1.6rem}
  .hero--tight{padding-bottom:1rem}

  /* ── Services list ────────────────────────────────────────────────────────
     The 01–06 rail cost 56px of a 390px screen and squeezed every card to
     290px. The number moves into the card's corner and the cards run to the
     screen edge, so the photographs get the full width instead of a 250px
     thumbnail sitting inside a box. */
  .svc-item{grid-template-columns:minmax(0,1fr);gap:0}
  .svc-item::before{display:none}
  /* the number now lands on the photograph, so it needs its own ground rather
     than ink that disappears into whatever the picture is doing */
  .svc-item__num{position:absolute;top:.8rem;left:.8rem;z-index:2;
    width:auto;height:auto;min-width:2rem;border:0;border-radius:999px;
    background:rgba(23,13,5,.62);color:#F6EEE0;
    padding:.3rem .6rem;font-size:.72rem;letter-spacing:.1em}
  @supports (backdrop-filter:blur(4px)){
    .svc-item__num{backdrop-filter:blur(4px)}
  }
  .svc-item.is-in .svc-item__num{border-color:transparent;color:#F6EEE0}
  .svc-list{margin-inline:calc(-1 * var(--gutter));gap:1px}
  .svc-item__card{padding:0;gap:0;border-radius:0;border-inline:0;
    border-top:1px solid var(--line);border-bottom:0}
  .svc-item:first-child .svc-item__card{border-top:0}
  .svc-item__text{padding:1.15rem var(--gutter) 1.5rem}
  .svc-item__thumb{order:-1;border-radius:0;min-height:196px}

  /* ── Partner marquee ──────────────────────────────────────────────────────
     Four duplicate sets make a 14,788px track — needed at 1400px, where one set
     is narrower than the viewport, but absurd at 390px where a single set is
     already nine screens wide. The browser has to composite that whole strip
     every frame and the band arrived late, or only after a scroll forced a
     repaint. Two sets here, and the keyframe travels one set width either way,
     so the loop stays seamless and the speed is unchanged. */
  .partners__set:nth-of-type(n+3){display:none}
  .partners__track{animation-name:partners-scroll-mobile}

  /* ── Sub-service cards ───────────────────────────────────────────────────── */
  .subcards{gap:.9rem}
  .subcard > *{padding:1.15rem 1.2rem 1.3rem}

  /* ── Sticky action bar ────────────────────────────────────────────────────
     A phone should never be more than a thumb away from calling or enquiring.
     On index it lives inside .page-shell, so it travels with the page when the
     full-screen menu slides it aside instead of hanging over the menu. */
  .mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:grid;grid-template-columns:1fr 1fr;
    background:color-mix(in srgb,var(--paper) 92%,transparent);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom,0)}
  @supports (backdrop-filter:blur(8px)){
    .mobile-bar{backdrop-filter:blur(8px)}
  }
  .mobile-bar__btn{display:flex;align-items:center;justify-content:center;gap:.5em;
    min-height:54px;font-family:var(--sans);font-size:.92rem;font-weight:500;
    letter-spacing:.02em;text-decoration:none;color:var(--ink)}
  .mobile-bar__btn + .mobile-bar__btn{border-left:1px solid var(--line)}
  .mobile-bar__btn--primary{background:var(--brass-ink);color:#FFF8F0}
  /* the bar covers the last of the footer unless the page makes room for it */
  body{padding-bottom:54px}
  html.menu-open .mobile-bar{opacity:0;pointer-events:none;transition:opacity .2s ease}
}

@keyframes partners-scroll-mobile{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}


/* Three flags beside the heading on Our Firm, the size of lapel pins: the
   principal lived in Singapore and Malaysia as a child and the section turns on
   America throughout. Monochrome, so they sit with the type rather than shouting
   over it — the field is the ink, the emblems are knocked out of it. */
.pins{display:inline-flex;align-items:center;gap:.26em;
  margin-left:.4em;vertical-align:.1em;white-space:nowrap}
.pins .pin{width:.62em;height:auto;display:block;
  fill:var(--brass-ink);opacity:.85;
  box-shadow:0 1px 4px -1px rgba(42,28,16,.3)}
.pins .pin__field{fill:var(--ink)}
/* Malaysia's canton is blue on the flag. #033669 is the blue already in the
   logo, so it is the brand's own rather than one invented for this. */
.pins .pin__canton{fill:#033669}
.pins .pin__knock{fill:var(--paper)}
@media(max-width:700px){
  .pins{display:block;margin:.5em 0 0}
}