/* Worldwide Framework — Direction F, Kanso. One stylesheet; tokens on :root. */

/* Self-hosted fonts (SIL Open Font License): Geist variable (100–900) for text and interface; Newsreader variable
   (optical sizes 6–72, weights 200–800, roman and italic) for headlines, names, accents and article text. Latin subsets. */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/geist-latin.woff2?v=9d846db8') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/newsreader-italic-latin.woff2?v=0e959a34') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/newsreader-latin.woff2?v=662a6e2a') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --paper: #f7f5f0;
  --ink: #1b1b1b;
  --body: #3d3d3a;
  --grey: #5b5b57;      /* 6.4:1 on paper, 5.8:1 on stone: all secondary text */
  --faint: #9a9892;     /* decorative only: rules, arrows, numerals beside a label */
  --panel: #e9e6df;
  --stone: #efebe3;     /* tonal band: alternates with paper to give the page rhythm */
  --card: #fbfaf6;      /* raised surface */
  --shadow-1: 0 1px 1px rgba(27, 27, 27, .03), 0 8px 24px -14px rgba(27, 27, 27, .18);
  --shadow-2: 0 2px 4px rgba(27, 27, 27, .04), 0 22px 48px -22px rgba(27, 27, 27, .32);
  /* Paper grain: a whisper of texture so large paper areas read as material, not as a flat fill. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .07 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
  --rule: rgba(27, 27, 27, .14);
  --red: #b8412e;       /* errors only */
  --gold: #c29b4c;      /* accent fill — from the logo's swoosh; ink text on it */
  --gold-ink: #85622a;  /* accent text on paper */
  --serif: 'Newsreader', 'Iowan Old Style', 'Times New Roman', serif;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Type scale: fluid, ~1.2 on phones opening to ~1.33 on wide screens. Tracking tightens as size grows (optical). */
  --fs-micro: 11.5px;
  --fs-xs: 13.5px;
  --fs-sm: clamp(15px, 14.4px + .15vw, 16px);
  --fs-base: clamp(16px, 15.2px + .2vw, 17.5px);
  --fs-lede: clamp(17.5px, 15.8px + .45vw, 20px);
  --fs-lead: clamp(19px, 14.5px + 1.05vw, 25px);
  --fs-h4: clamp(18px, 16.6px + .35vw, 21px);
  --fs-h3: clamp(21px, 16px + 1.1vw, 29px);
  --fs-h2: clamp(28px, 17px + 2.5vw, 50px);
  --fs-h1: clamp(40px, 18px + 4.6vw, 86px);
  --fs-display: clamp(44px, 16px + 5.6vw, 96px);
  /* Weights on the variable axis: hairline display, a book weight for reading, a firmer weight for small labels. */
  --w-display: 290;
  --w-head: 340;
  --w-text: 390;
  --w-ui: 420;
  --track-caps: .2em;
  --px: clamp(20px, 5vw, 72px);
  --sec: clamp(80px, 11vw, 160px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper) var(--grain); color: var(--ink);
  font: var(--w-text) var(--fs-base)/1.68 var(--sans); letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-kerning: normal; font-optical-sizing: auto; font-variant-ligatures: common-ligatures contextual;
  font-synthesis: none; /* never fake a bold or an upright serif */ hanging-punctuation: first allow-end last;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
[id] { scroll-margin-top: calc(var(--hdr-h, 76px) + 72px); } /* clears the header and the sticky section bar */
[hidden] { display: none !important; }

.skip { position: absolute; left: var(--px); top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 14px; font-size: 13px; }
.skip:focus { top: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Grid ─────────────────────────────────────────────── */
.g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; padding-inline: var(--px); }
.sec { padding-bottom: var(--sec); }
.c-label { grid-column: 2 / span 2; }
.c-main { grid-column: 4 / span 8; }
.c-main7 { grid-column: 4 / span 7; }
.c-main6 { grid-column: 4 / span 6; }

/* ── Type ─────────────────────────────────────────────── */
/* Labels: one voice everywhere — 11px capitals, firmer weight, even tracking, case-sensitive punctuation. */
.cap { font: var(--w-ui) var(--fs-micro)/1.8 var(--sans); letter-spacing: var(--track-caps); text-transform: uppercase; font-feature-settings: 'case'; color: var(--grey); }
.note { margin-top: 14px; font-size: var(--fs-xs); font-weight: var(--w-ui); line-height: 1.65; color: var(--grey); max-width: 20ch; }
.display { font: var(--w-display) var(--fs-display)/1.0 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.h1 { font: var(--w-display) var(--fs-h1)/1.03 var(--sans); letter-spacing: -.042em; text-wrap: balance; }
.h2 { font: var(--w-head) var(--fs-h2)/1.12 var(--sans); letter-spacing: -.032em; text-wrap: balance; }
.statement { font: var(--w-head) clamp(24px, 15px + 2vw, 42px)/1.28 var(--sans); letter-spacing: -.026em; text-wrap: balance; }
.h3 { font: var(--w-head) var(--fs-h3)/1.2 var(--sans); letter-spacing: -.022em; text-wrap: balance; }
.h4 { font: var(--w-head) var(--fs-h4)/1.28 var(--sans); letter-spacing: -.016em; margin-bottom: 8px; }
.lede { font-size: var(--fs-lede); line-height: 1.6; letter-spacing: -.008em; color: var(--body); max-width: 44ch; text-wrap: pretty; }
.lead { font: var(--w-head) var(--fs-lead)/1.5 var(--sans); letter-spacing: -.014em; text-wrap: pretty; }
.txt { font-size: var(--fs-base); line-height: 1.72; color: var(--body); }
.sm { font-size: var(--fs-sm); font-weight: var(--w-text); line-height: 1.66; color: var(--body); }
.xs { font-size: var(--fs-xs); font-weight: var(--w-ui); line-height: 1.6; letter-spacing: .004em; color: var(--grey); }
.prose { max-width: 64ch; display: flex; flex-direction: column; gap: 1.1em; }
.mute { color: var(--grey); }
/* Figures: lining and tabular wherever numbers are compared (steps, dates, numerals beside labels). */
time, .num, .steps, .dl, .meta { font-variant-numeric: lining-nums tabular-nums; }
/* Serif italic accents inside Geist text sit optically level at ~1.04em. */
:is(.display, .h1, .h2, .statement, .lead, .final h2) em { font-size: 1.04em; letter-spacing: -.012em; }

/* ── Links ────────────────────────────────────────────── */
.arrow { display: inline-flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: var(--w-ui); letter-spacing: -.004em; line-height: 1; padding-bottom: 5px; border-bottom: 1px solid var(--ink); transition: gap .4s; }
.arrow:hover { gap: 20px; }
.arrow::after { content: '→'; }
.u { border-bottom: 1px solid var(--rule); transition: border-color .3s; }
.u:hover { border-color: var(--ink); }

/* ── Header ───────────────────────────────────────────── */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--gold); z-index: 31; }
.hdr { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); padding: 26px var(--px); background: rgba(247, 245, 240, .97); backdrop-filter: saturate(1.2) blur(18px); -webkit-backdrop-filter: saturate(1.2) blur(18px); transition: background .5s, box-shadow .5s, padding .5s; }
.hdr.scrolled { box-shadow: 0 1px 0 var(--rule); padding-top: 14px; padding-bottom: 14px; }
.hdr-over:not(.scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Brand: the mark, a hairline, then the name — quiet, typographic. */
.brand { margin-right: auto; display: flex; align-items: center; gap: 14px; min-height: 44px; font: 400 15px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; color: var(--ink); }
.brand img { height: 19px; width: auto; }
.brand img { padding-right: 14px; border-right: 1px solid var(--rule); box-sizing: content-box; }
/* The name echoes the headline voice: sans, then the serif italic in gold ink. */
.brand .bn em { font: italic 400 1.14em/1 var(--serif); letter-spacing: 0; color: var(--gold-ink); }
/* Navigation in small, widely tracked capitals: an editorial register that leaves the page's type to speak. */
/* Navigation: 12.5px medium capitals in near-black, moderate tracking — refined but read at a glance. */
.nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 36px); font-size: 12.5px; font-weight: 500; line-height: 1; letter-spacing: .13em; text-transform: uppercase; font-feature-settings: 'case'; white-space: nowrap; color: #3a3a37; }
.nav a { position: relative; padding: 14px 0; transition: color .3s; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
/* Current section: a short gold rule under the label; hover draws a fainter one. */
.nav a:not(.contact)::after { content: ''; position: absolute; left: 0; right: .18em; bottom: 8px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav a:not(.contact):hover::after { transform: scaleX(1); opacity: .5; }
.nav a[aria-current]:not(.contact)::after { transform: scaleX(1); opacity: 1; }
/* Contact: a hairline pill that fills with gold on hover — present, never loud. */
.nav .contact { display: inline-flex; align-items: center; gap: 10px; margin-left: clamp(4px, 1vw, 14px); color: var(--paper); background: var(--ink); padding: 14px 20px 14px 24px; border-radius: 999px; box-shadow: 0 8px 22px -12px rgba(27, 27, 27, .55); transition: background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); }
.nav .contact .ar { color: var(--gold); letter-spacing: 0; transition: transform .45s var(--ease), color .45s var(--ease); }
.nav .contact:hover, .nav .contact[aria-current] { background: var(--gold); color: var(--ink); box-shadow: 0 12px 28px -12px rgba(133, 98, 42, .65); transform: translateY(-1px); }
.nav .contact:hover .ar, .nav .contact[aria-current] .ar { color: var(--ink); transform: translateX(3px); }
.menu-btn { display: none; align-items: center; justify-content: center; min-width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); font: 400 10.5px/1 var(--sans); letter-spacing: var(--track-caps); text-transform: uppercase; font-feature-settings: 'case'; padding: 0 8px; cursor: pointer; }
.overlay { position: fixed; inset: 0; z-index: 25; background: var(--paper); padding: 100px 24px 32px; display: none; flex-direction: column; justify-content: space-between; gap: 40px; overflow: auto; }
.overlay.open { display: flex; }
.overlay nav { display: flex; flex-direction: column; }
.overlay .arrow { align-self: flex-start; }
.overlay > nav a { padding: 14px 0; font: var(--w-head) 30px/1.1 var(--sans); letter-spacing: -.02em; }
.hdr-mobile { display: none; align-items: center; gap: 10px; }
/* Language switcher (header, mobile menu, footer) */
.langs ul { display: flex; flex-wrap: wrap; align-items: baseline; }
.langs li + li::before { content: '·'; margin: 0 7px; color: var(--faint); }
.langs a { transition: color .3s; }
.langs a:hover, .langs [aria-current] { color: var(--ink); }
.langs .off { color: var(--grey); cursor: default; }
.langs .off span[lang] { text-decoration: underline dotted rgba(27, 27, 27, .3); text-underline-offset: 4px; }
.hdr-langs { position: relative; padding-left: clamp(18px, 2.2vw, 34px); }
.hdr-langs::before { content: ''; position: absolute; left: 0; top: 50%; height: 18px; margin-top: -9px; border-left: 1px solid var(--rule); }
.lang-menu summary { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 2px; list-style: none; cursor: pointer; font-size: var(--fs-micro); font-weight: var(--w-ui); line-height: 1; letter-spacing: var(--track-caps); color: var(--ink); transition: color .3s; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary svg { color: var(--grey); transition: transform .3s var(--ease); }
.lang-menu[open] summary svg { transform: rotate(180deg); }
.lang-menu summary:hover svg { color: var(--ink); }
.lang-pop { position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px; padding: 8px; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(27, 27, 27, .25); }
.lang-pop .lm-item { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; min-height: 44px; align-items: center; padding: 0 12px; border-radius: 9px; font-size: 14px; color: var(--ink); }
.lang-pop a.lm-item:hover { background: rgba(27, 27, 27, .04); }
.lang-pop [aria-current] { background: rgba(194, 155, 76, .12); }
.lang-pop .off .lm-item { color: var(--grey); }
.lm-note { font-size: 10.5px; letter-spacing: var(--track-caps); text-transform: uppercase; font-feature-settings: 'case'; color: var(--grey); }
.lang-pop [aria-current] .lm-note { color: var(--gold-ink); }
.ov-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.ov-langs { font-size: 14px; color: var(--grey); }
.hdr-mobile .contact { font-size: 10.5px; letter-spacing: var(--track-caps); text-transform: uppercase; font-feature-settings: 'case'; padding: 12px 16px; color: var(--paper); background: var(--ink); border-radius: 999px; }
@media (max-width: 1060px) {
  .nav, .hdr-langs { display: none; }
  .hdr-mobile, .menu-btn { display: flex; }
}

/* ── Hero ─────────────────────────────────────────────── */
.hero-home { position: relative; min-height: 100svh; align-content: end; padding-top: 140px; padding-bottom: clamp(48px, 7vw, 96px); }
.hero-home .c-h { grid-column: 3 / span 9; }
.hero-home h1 { margin-bottom: 36px; max-width: 15ch; }
.hero-home h1 > span { display: block; }
.hero-home h1 .serif { display: block; font: italic 400 1.08em/1 var(--serif); letter-spacing: -.01em; color: var(--gold-ink); margin-top: .02em; }
/* Hero eyebrow: larger, firmer and in ink so it holds over the photograph; gold dots separate the three disciplines. */
.hero-home .eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-bottom: 30px; font-size: clamp(12px, 11px + .2vw, 13.5px); font-weight: 500; letter-spacing: .22em; color: var(--ink); }
.hero-home .eyebrow .sep { margin: 0 .85em; color: var(--gold); font-weight: 700; letter-spacing: 0; }
@media (max-width: 560px) { .hero-home .eyebrow { letter-spacing: .16em; } .hero-home .eyebrow .sep { margin: 0 .6em; } }
.hero-home .c-h { position: relative; z-index: 1; }
/* Photo hero: the photograph shown crisp and edge to edge. A soft ink shade sits only behind the text (lower left);
   the sky and the header area stay untouched, so the header keeps its ink type. Text is set in paper and light gold. */
.hero-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero-veil { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    /* Centred on the text block and tall enough to cover the eyebrow on tall screens, where it lands on the pale promenade. */
    radial-gradient(ellipse 72% 80% at 24% 62%, rgba(14,13,11,.62) 0%, rgba(14,13,11,.46) 50%, rgba(14,13,11,0) 88%),
    linear-gradient(0deg, rgba(14,13,11,.5) 0%, rgba(14,13,11,.24) 40%, rgba(14,13,11,0) 66%); }
.has-photo .vline { z-index: 1; }
.hero-home.has-photo { --hero-gold: #e2c07c; }
.hero-home.has-photo h1 { color: var(--paper); }
.hero-home.has-photo h1 .serif { color: var(--hero-gold); }
.hero-home.has-photo .eyebrow { color: rgba(247,245,240,.94); }
.hero-home.has-photo .eyebrow .sep { color: var(--hero-gold); }
.hero-home.has-photo .lede { color: rgba(247,245,240,.96); }
.hero-home.has-photo .hero-meta .lede + .lede { color: rgba(247,245,240,.84); }
/* A soft shadow, not a halo: keeps edges crisp where the photograph is bright, invisible where it is dark. */
.hero-home.has-photo .c-h :is(.eyebrow, h1, .lede) { text-shadow: 0 1px 2px rgba(14,13,11,.35), 0 0 28px rgba(14,13,11,.35); }
/* The eyebrow is small, light text: it gets a firmer shadow than the headline. */
.hero-home.has-photo .eyebrow { color: var(--paper); text-shadow: 0 1px 2px rgba(14,13,11,.6), 0 0 14px rgba(14,13,11,.55), 0 0 32px rgba(14,13,11,.4); }
.hero-home.has-photo .vline span:first-child { background: var(--paper); opacity: .6; }
.hero-home.has-photo .vline span:last-child { color: rgba(247,245,240,.85); text-shadow: 0 1px 2px rgba(14,13,11,.4); }
.hero-home.has-photo .pill { box-shadow: 0 14px 34px -14px rgba(0,0,0,.6); }
/* Primary call to action */
.pill { display: inline-flex; align-items: center; gap: 14px; padding: 18px 30px; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: 15px; font-weight: var(--w-ui); letter-spacing: -.004em; line-height: 1; transition: gap .4s, background .3s; }
.pill:hover { gap: 22px; background: #b58d3e; }
/* One column: the CTA sits under the copy, over plain paving, never on the people in the photograph. */
.hero-meta { display: grid; gap: 32px; max-width: 560px; justify-items: start; }
.hero-meta .lede + .lede { margin-top: 14px; font-size: 16px; color: var(--body); }
.vline { position: absolute; left: var(--px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.vline span:first-child { width: 1px; height: 72px; background: var(--ink); opacity: .35; }
.vline span:last-child { writing-mode: vertical-rl; font-size: 10.5px; line-height: 1; letter-spacing: .28em; text-transform: uppercase; font-feature-settings: 'case'; color: var(--grey); }
.hero { position: relative; padding-top: clamp(32px, 5vw, 72px); padding-bottom: clamp(64px, 9vw, 128px); align-items: start; }
.hero .c-label { padding-top: .9em; }
.hero h1 { margin-bottom: 28px; }
.hero-cta { display: flex; gap: 28px; align-items: baseline; flex-wrap: wrap; margin-top: 32px; }
.portrait { width: clamp(130px, 16vw, 220px); aspect-ratio: 4 / 5; object-fit: cover; background: var(--panel); }
.c-portrait { grid-column: 10 / span 3; justify-self: end; align-self: start; }

/* ── Breadcrumbs / index ─────────────────────────────── */
.crumbs { padding-top: 112px; }
.crumbs ol { grid-column: 4 / span 8; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; font-weight: var(--w-ui); line-height: 1.6; letter-spacing: var(--track-caps); text-transform: uppercase; font-feature-settings: 'case'; color: var(--grey); }
.crumbs li + li::before { content: '/'; margin-right: 10px; color: var(--faint); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }
.toc { position: sticky; top: var(--hdr-h, 76px); z-index: 20; margin-bottom: clamp(56px, 7vw, 96px); transition: background .4s, box-shadow .4s; }
.toc-in { grid-column: 2 / span 10; display: flex; align-items: center; gap: 24px; padding-top: 14px; border-top: 1px solid var(--rule); transition: padding .4s, border-color .4s; }
.toc.stuck { background: rgba(247, 245, 240, .97); backdrop-filter: saturate(1.2) blur(18px); -webkit-backdrop-filter: saturate(1.2) blur(18px); box-shadow: 0 1px 0 var(--rule); }
.toc.stuck .toc-in { padding-top: 0; border-top-color: transparent; }
.toc-cta { margin-left: auto; flex: none; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .4s, transform .4s, visibility .4s; }
.toc.stuck .toc-cta { opacity: 1; visibility: visible; transform: none; }
.pill.pill-sm { padding: 10px 18px; font-size: 13px; gap: 10px; }
.toc-sentinel { height: 1px; }
.toc ul { display: flex; flex-wrap: wrap; gap: 0 24px; min-width: 0; font-size: 11px; font-weight: var(--w-ui); line-height: 1; letter-spacing: .13em; /* denser than other labels: seven items share one row */ text-transform: uppercase; font-feature-settings: 'case'; color: var(--grey); }
.toc a { display: inline-block; padding: 14px 0; white-space: nowrap; transition: color .3s; }
/* One row at every size: scrolls sideways when the links do not fit, and only then fades its edge to hint at more. */
.toc ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
 }
.toc.overflows ul { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 24px; }
.toc ul::-webkit-scrollbar { display: none; }
.toc li { scroll-snap-align: start; }
@media (max-width: 1060px) { .toc .toc-cta { display: none; } }
@media (min-width: 1061px) and (max-width: 1399px) { .toc ul { gap: 0 18px; letter-spacing: .1em; } .toc-in { gap: 16px; } }
.toc a:hover { color: var(--ink); }

/* ── Lists & rows ─────────────────────────────────────── */
.rows > * { border-top: 1px solid var(--rule); }
.rows > *:last-child { border-bottom: 1px solid var(--rule); }
.lines > li { padding: 16px 0; font: var(--w-head) clamp(16px, 1.5vw, 19px)/1.5 var(--sans); letter-spacing: -.01em; }
.lines > li > a { display: block; margin-block: -16px; padding-block: 16px; } /* a linked row (404) is tappable across its full height */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px 40px; padding: 22px 0; align-items: baseline; }
.framework > li { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; padding: 24px 0; align-items: baseline; }
.num { font: italic 400 19px/1 var(--serif); letter-spacing: 0; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.framework .name { font: var(--w-head) clamp(24px, 15px + 1.6vw, 34px)/1.1 var(--sans); letter-spacing: -.03em; }
.framework .num { font-size: clamp(20px, 14px + .9vw, 27px); }
.cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 36px 32px; }
/* Four audiences: always a balanced 2 × 2 (one column on phones) — never three plus an orphan. */
.cells.audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px clamp(32px, 5vw, 72px); }
@media (max-width: 560px) { .cells.audiences { grid-template-columns: minmax(0, 1fr); } }
.cells3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 36px 40px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 32px 20px; counter-reset: s; }
.steps .num { display: block; margin-bottom: 16px; font-size: 26px; }
.steps .h4 { margin-bottom: 8px; } /* same size as every other small heading */

/* Practices list */
.practice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px 40px; align-items: baseline; padding: 28px 0; transition: padding-left .5s var(--ease); }
.practice:hover { padding-left: 14px; }
.practice .t { transition: color .4s; }
.practice:hover .t { color: var(--gold-ink); }
.practice .t { font: var(--w-head) clamp(24px, 2.6vw, 36px)/1.1 var(--sans); letter-spacing: -.03em; }
.practice .t .num { display: inline-block; width: 56px; font-size: .62em; vertical-align: .18em; }
.practice .d { display: flex; justify-content: space-between; gap: 20px; font-size: var(--fs-sm); font-weight: var(--w-ui); line-height: 1.7; color: var(--grey); }
.practice .d::after { content: '→'; color: var(--ink); transition: transform .5s var(--ease), color .4s; }
.practice:hover .d::after { transform: translateX(6px); color: var(--gold-ink); }
.tag { display: block; margin: 10px 0 0 56px; font-size: 10.5px; letter-spacing: var(--track-caps); text-transform: uppercase; font-feature-settings: 'case'; color: var(--gold-ink); vertical-align: middle; }

/* Related & link lists */
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 32px; }
.related a { display: block; padding-top: 16px; border-top: 1px solid var(--rule); transition: padding-left .5s var(--ease); }
.related a:hover { padding-left: 8px; }
.related a .h4::after { content: ' →'; color: var(--faint); }
.linkrows > li > a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px 40px; padding: 20px 0; align-items: baseline; transition: padding-left .5s var(--ease); }
.linkrows > li > a:hover { padding-left: 8px; }
.linkrows .h3::after { content: ' →'; color: var(--faint); }

/* Service line (hub) */

/* People */
.people-founder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px 48px; padding: 0 0 40px; align-items: end; }
.people-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px 40px; padding-top: 32px; border-top: 1px solid var(--rule); }
.person { display: block; }
.person .nm { font: var(--w-head) 22px/1.15 var(--sans); letter-spacing: -.025em; margin-bottom: 6px; transition: color .3s; }
.person.lg .nm { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.03em; }
.person .rl { font-size: 12.5px; line-height: 1.6; color: var(--grey); }
.person:hover .nm { color: var(--grey); }
.person img { width: 96px; aspect-ratio: 1; object-fit: cover; margin-bottom: 20px; background: var(--panel); }
.adviser { display: flex; flex-direction: column; gap: 4px; }

/* Progression */
.progression { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font: var(--w-head) clamp(18px, 1.9vw, 26px)/1.3 var(--sans); letter-spacing: -.02em; }
.progression li:not(:last-child)::after { content: '→'; margin-left: 14px; color: var(--faint); }
.progression li:first-child { color: var(--ink); }
.progression li:not(:first-child) { color: var(--grey); }
.progression.lg { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.progression.lg li { color: var(--ink); }
.progression.lg li::after { content: none !important; }
.progression.lg li + li { border-left: 1px solid var(--rule); }
.progression.lg a { display: flex; flex-direction: column; gap: 18px; padding: 26px 20px 30px; font: var(--w-head) clamp(22px, 2.4vw, 36px)/1 var(--sans); letter-spacing: -.03em; transition: background .5s, color .4s; }
.progression.lg li:first-child a { padding-left: 0; }
.progression.lg a:hover { color: var(--gold-ink); }
.progression.lg .num { font-size: 16px; }

/* Callout / limits */
.limit { padding: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 14px; font-weight: var(--w-ui); line-height: 1.7; color: var(--grey); max-width: 62ch; }

/* Final CTA */
.final { position: relative; padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(120px, 16vw, 240px); }
.final-globe canvas { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; } /* out of flow: the canvas can never size its box */
/* Globe slot: right-hand columns on wide screens; hidden (and never loaded) below the desktop breakpoint. */
.final-globe { position: relative; grid-column: 9 / span 4; grid-row: 1; align-self: center; justify-self: end; width: min(100%, 440px); aspect-ratio: 1; pointer-events: none; }
/* The still is always there (no WebGL, reduced motion, Save-Data, or before the live globe loads); the live globe cross-fades over it. */
.globe-poster { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1.6s var(--ease); }
.final-globe canvas { opacity: 0; transition: opacity 1.6s var(--ease); }
.final-globe.is-ready canvas { opacity: 1; }
.final-globe.is-ready .globe-poster { opacity: 0; }
.final .c-main { grid-row: 1; }
/* Closing photograph: full-bleed behind the section, under a paper veil that is strongest behind the text and melts
   into the page above and the footer below, so the sea and mountains read only on the right. */
.final.has-photo { overflow: hidden; padding-top: clamp(96px, 11vw, 160px); padding-bottom: clamp(120px, 14vw, 200px); }
.final-photo { position: absolute; inset: 0; z-index: 0; }
.final-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.final-veil { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(247,245,240,.94) 0%, rgba(247,245,240,.86) 40%, rgba(247,245,240,.38) 64%, rgba(247,245,240,.06) 100%),
    linear-gradient(180deg, var(--paper) 0%, rgba(247,245,240,0) 20%, rgba(247,245,240,0) 76%, var(--paper) 100%); }
.final.has-photo .c-main, .final.has-photo .final-globe { position: relative; z-index: 1; }
.final.has-photo .final-globe { filter: drop-shadow(0 0 1px rgba(27, 27, 27, .3)); }
@media (min-width: 1061px) { .final:has(.final-globe) .c-main { grid-column: 3 / span 6; } }
@media (max-width: 1060px) { .final-globe { display: none; } }
.final .c-main > img { height: 22px; width: auto; margin-bottom: 36px; }
.final h2 { margin-bottom: 32px; font: var(--w-head) clamp(30px, 4.2vw, 60px)/1.12 var(--sans); letter-spacing: -.035em; text-wrap: balance; max-width: 19ch; }
.final p { margin-top: 20px; }
.final.has-photo p.xs { color: var(--body); } /* the grey note keeps ≥ 4.5:1 even over the darkest veiled pixel */

/* Article */
.article > * { max-width: 37em; } /* measured at each element's own size: ~70 characters a line */
/* Long-form reading: 18px book weight, 1.75 leading, ~66 characters a line; headings get air above, not below. */
.article p { margin: 0 0 1.15em; font-size: clamp(17px, 15.6px + .35vw, 18.5px); line-height: 1.75; color: var(--body); text-wrap: pretty; hyphens: manual; }
.article > p:first-of-type, .article .intro { font: var(--w-head) var(--fs-lead)/1.5 var(--sans); letter-spacing: -.014em; color: var(--ink); margin-bottom: 1.4em; }
.article h2 { margin: 2.6em 0 .7em; font: var(--w-head) clamp(23px, 17px + 1.2vw, 31px)/1.2 var(--sans); letter-spacing: -.024em; text-wrap: balance; color: var(--ink); }
.article h3 { margin: 2em 0 .5em; font: var(--w-ui) var(--fs-base)/1.4 var(--sans); letter-spacing: -.005em; color: var(--ink); }
.article ul, .article ol { margin: 0 0 1.4em; }
.article li { padding: 12px 0 12px 26px; border-top: 1px solid var(--rule); font-size: clamp(16px, 15px + .25vw, 17.5px); line-height: 1.65; color: var(--body); position: relative; text-wrap: pretty; }
.article li:last-child { border-bottom: 1px solid var(--rule); }
.article li::before { content: ''; position: absolute; left: 2px; top: calc(12px + .78em); width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.article strong, .article b { font-weight: var(--w-ui); color: var(--ink); }
.article em { font-style: normal; color: var(--ink); }
.article blockquote { margin: 1.6em 0; padding-left: 1.2em; border-left: 1px solid var(--gold); font: italic 400 clamp(22px, 17px + 1.1vw, 30px)/1.3 var(--serif); color: var(--ink); }
.byline { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 28px; }

/* Forms */
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 28px 32px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 11.5px; font-weight: var(--w-ui); line-height: 1.4; letter-spacing: var(--track-caps); text-transform: uppercase; font-feature-settings: 'case'; color: var(--grey); }
.field .opt { letter-spacing: .04em; text-transform: none; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 44px; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(27, 27, 27, .35); border-radius: 0;
  background: transparent; color: var(--ink); font: var(--w-text) 16px/1.5 var(--sans); -webkit-appearance: none; appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--grey) 50%), linear-gradient(135deg, var(--grey) 50%, transparent 50%); background-position: calc(100% - 10px) 50%, calc(100% - 5px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 24px; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold-ink); box-shadow: 0 1px 0 0 var(--gold-ink); }
.field [aria-invalid="true"] { border-bottom-color: var(--red); }
.err { font-size: 12.5px; color: var(--red); min-height: 0; }
.err:empty { display: none; }
.hp { position: absolute; left: -9999px; }
.submit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; margin-top: 8px; }
.submit .xs { max-width: 40ch; }
.submit button { display: inline-flex; align-items: center; gap: 14px; padding: 18px 30px; border: 0; border-radius: 999px; background: var(--gold); color: var(--ink); font: var(--w-ui) 15px/1 var(--sans); letter-spacing: -.004em; cursor: pointer; transition: gap .4s, background .3s, box-shadow .4s var(--ease); box-shadow: 0 10px 26px -14px rgba(133, 98, 42, .55); }
.submit button:hover { gap: 20px; background: #b58d3e; }
.submit button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.submit button[disabled] { opacity: .5; cursor: progress; }
.status { grid-column: 1 / -1; padding: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.status[hidden] { display: none; }
.status.error { border-color: var(--red); }

/* Definition list (legal) */
.dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px 32px; padding: 14px 0; }
.dl dt { color: var(--grey); font-size: 13.5px; }
.todo { color: var(--red); }

/* ── Footer ───────────────────────────────────────────── */
.ftr { padding-top: clamp(56px, 6vw, 88px); padding-bottom: 36px; border-top: 1px solid var(--rule); font-size: 13.5px; font-weight: var(--w-ui); line-height: 1.9; color: var(--grey); row-gap: clamp(40px, 5vw, 64px); }
.ftr .brandcol { grid-column: 1 / span 5; }
.ftr .brandcol .b { display: flex; align-items: center; gap: 10px; color: var(--ink); margin-bottom: 6px; }
.ftr .brandcol img { height: 16px; width: auto; }
.ftr .ftr-mail { display: inline-block; margin-top: 14px; font-size: 15px; color: var(--ink); }
/* Three link columns, the last ending on the right edge: 7–8, 9–10, 11–12. */
.ftr .col { grid-column: span 2; display: flex; flex-direction: column; }
.ftr .brandcol + .col { grid-column: 7 / span 2; }
.ftr h2 { font: var(--w-ui) var(--fs-micro)/1.8 var(--sans); letter-spacing: var(--track-caps); text-transform: uppercase; font-feature-settings: 'case'; color: var(--ink); margin-bottom: 10px; }
.ftr a { transition: color .3s; }
.ftr a:hover { color: var(--ink); }
.ftr .base { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.ftr .base-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 28px; }
.ftr-legal { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* ── Motion ───────────────────────────────────────────── */
@keyframes up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.a-up { animation: up 1.2s .1s var(--ease) both; }
.a-up2 { animation: up 1.2s .3s var(--ease) both; }
.a-up3 { animation: up 1.2s .55s var(--ease) both; }
.a-fade { animation: fade 1.6s .9s both; }
.vline span:first-child { transform-origin: top; animation: grow 1.4s 1s var(--ease) both; }
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1100px) {
  .ftr .brandcol { grid-column: 1 / -1; }
  .ftr .col, .ftr .brandcol + .col { grid-column: span 4; } /* three link columns in one row under the brand */
}
@media (max-width: 820px) {
  .g > * { grid-column: 1 / -1 !important; }
  .g > .hero-photo, .g > .hero-veil, .g > .final-photo, .g > .final-veil { grid-column: auto !important; grid-row: auto !important; }
  .final-veil { background: linear-gradient(180deg, var(--paper) 0%, rgba(247,245,240,.84) 22%, rgba(247,245,240,.8) 60%, rgba(247,245,240,.55) 84%, var(--paper) 100%); }
  .final-photo img { object-position: 58% 50%; }
  .hdr-mobile .contact { padding: 8px 14px; }
  .g { row-gap: 18px; }
  .vline { display: none; }
  .hero-home { min-height: 92svh; padding-top: 120px; }
  .hero-photo img { object-position: 50% 62%; }
  .hero-veil { background: linear-gradient(180deg, rgba(14,13,11,0) 0%, rgba(14,13,11,.18) 18%, rgba(14,13,11,.55) 42%, rgba(14,13,11,.7) 100%); }
  .c-portrait { justify-self: start; order: -1; }
  .framework > li { grid-template-columns: 36px minmax(0, 1fr); }
  .framework > li > div { grid-column: 2; } /* the description block, not just its first paragraph */
  .pair, .linkrows > li > a, .dl > div { grid-template-columns: minmax(0, 1fr); }
  .ftr .col, .ftr .brandcol + .col { grid-column: span 6 !important; }
  .ftr nav.col:first-of-type { grid-row: span 2; } /* Practices on the left; People and The firm stack on the right */
  .ftr { row-gap: 28px; padding-top: 48px; }
  .ftr .base { padding-top: 20px; gap: 12px 24px; }
  .crumbs { padding-top: 96px; }
}
@media (max-width: 359px) { /* only the narrowest phones stack the footer columns */
  .ftr .col, .ftr .brandcol + .col { grid-column: 1 / -1 !important; }
  .ftr nav.col:first-of-type { grid-row: auto; }
}
@media print {
  .hdr, .overlay, .progress, .final, .ftr, .toc, .skip { display: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ── Signature: one emphasised phrase per statement, in gold serif italic ── */
.statement em, .lead em, .lede em, .final h2 em, .h2 em, .h1 em {
  font: italic 400 1.04em/1 var(--serif); letter-spacing: -.005em; color: var(--gold-ink);
}

/* ── Dark band: the founder statement ── */
.band-dark { background: var(--ink); color: var(--paper); padding-top: clamp(96px, 12vw, 180px); padding-bottom: clamp(96px, 12vw, 180px); margin-bottom: var(--sec); }
.band-dark .cap { color: rgba(247, 245, 240, .62); }
.band-dark .statement { font-size: clamp(26px, 3.1vw, 46px); line-height: 1.3; }
.band-dark .statement em { color: var(--gold); }
.band-dark .txt { color: rgba(247, 245, 240, .74); }
.band-dark .person .rl { color: rgba(247, 245, 240, .62); }
.band-dark .person:hover .nm { color: var(--gold); }
.band-dark .arrow { border-color: var(--gold); color: var(--paper); }
.band-dark :focus-visible { outline-color: var(--paper); }
.founder-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-top: clamp(48px, 6vw, 80px); padding-top: 28px; border-top: 1px solid rgba(247, 245, 240, .18); }

/* ── Why clients stay: photograph + numbered reasons ── */
.why { align-items: center; }
.why-photo { grid-column: 2 / span 5; margin: 0; overflow: hidden; background: var(--panel); }
.why-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.6s var(--ease); }
.why-photo:hover img { transform: scale(1.025); }
.why-text { grid-column: 8 / span 4; }
.why-list { margin-top: 32px; }
.why-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 0; padding: 26px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.why-list li:last-child { border-bottom: 1px solid var(--rule); }
.why-list .num { grid-row: 1; } /* row 1 only, so it shares the title's baseline */
.why-list li > :not(.num) { grid-column: 2; }
.why-list .h3 { margin-bottom: 6px; }

/* ── Hero photograph settles in once ── */
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
.hero-photo img { animation: settle 2.8s var(--ease) both; }

@media (max-width: 820px) {
  .progression.lg { grid-template-columns: minmax(0, 1fr); }
  .progression.lg li + li { border-left: 0; border-top: 1px solid var(--rule); }
  .progression.lg a { flex-direction: row; align-items: baseline; gap: 20px; padding: 18px 0; }
  .progression.lg li:first-child a { padding-left: 0 !important; }
  .progression.lg .num { width: 28px; flex: none; }
  .why-photo img { aspect-ratio: 4 / 3; }
}

/* ── Inner pages ── */
.hero-bignum { grid-column: 11 / span 2; justify-self: end; align-self: start; margin-top: .1em; font: italic 400 clamp(110px, 12vw, 200px)/.8 var(--serif); letter-spacing: -.04em; color: rgba(133, 98, 42, .16); white-space: nowrap; user-select: none; pointer-events: none; z-index: 0; }
.hero .c-main6 { position: relative; z-index: 1; }
@media (min-width: 821px) and (max-width: 1280px) { .hero:has(.hero-bignum) .c-main6 { grid-column: 4 / span 6; } .hero-bignum { grid-column: 11 / span 2; font-size: clamp(96px, 10vw, 150px); } }
.hero-bignum::before { content: attr(data-mark); } /* decoration only: kept out of the text layer */
@media (max-width: 820px) { .hero-bignum { display: none; } }
.hero-label { display: block; }
.hero-label .num { display: inline-block; margin-right: 12px; vertical-align: baseline; }
.hero-label .num { font-size: 18px; letter-spacing: 0; text-transform: none; }
.hero .lede em { font-size: 1.04em; }
.role { margin: -6px 0 26px; font: italic 400 clamp(20px, 2vw, 28px)/1.25 var(--serif); color: var(--gold-ink); }

/* Related: large numbered panels */
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.panels li + li { border-left: 1px solid var(--rule); }
.panels a { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 26px 24px 30px; transition: background .5s, color .4s; }
.panels li:first-child a { padding-left: 0; }
.panels .pt { font: var(--w-head) clamp(20px, 2vw, 28px)/1.15 var(--sans); letter-spacing: -.025em; text-wrap: balance; }
.panels .pt::after { content: ' →'; color: var(--faint); transition: color .4s; }
.panels a:hover .pt { color: var(--gold-ink); }
.panels a:hover .pt::after { color: var(--gold-ink); }

/* Dark band contents */
.band-dark .sm, .band-dark .h4 { color: rgba(247, 245, 240, .74); }
.band-dark .person .nm { color: var(--paper); }
.band-links { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.band-cells { margin-top: 8px; }
.band-dark .statement a { color: inherit; }

@media (max-width: 820px) {
  .panels { grid-template-columns: minmax(0, 1fr); }
  .panels li + li { border-left: 0; border-top: 1px solid var(--rule); }
  .panels a { padding: 20px 0 24px; }
}

/* ── Homepage: specialists & insights ── */
.specialists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.spec { display: flex; flex-direction: column; gap: 8px; padding: 32px 32px 34px 0; transition: color .4s; }
.spec + .spec { border-left: 1px solid var(--rule); padding-left: 32px; }
.spec .nm { font: var(--w-head) clamp(24px, 2.4vw, 34px)/1.1 var(--sans); letter-spacing: -.03em; }
.spec .rl { font: italic 400 19px/1.3 var(--serif); color: var(--gold-ink); margin-bottom: 8px; }
.spec .sm { max-width: 40ch; }
.spec .more { margin-top: 14px; font-size: 13px; font-weight: var(--w-ui); }
.spec .more::after { content: ' →'; transition: margin-left .4s; }
.spec:hover .nm { color: var(--gold-ink); }
.insight-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 6px 32px; padding: 26px 0; align-items: baseline; transition: padding-left .5s var(--ease); }
.insight-row .h3 { font-size: clamp(20px, 2vw, 28px); }
.insight-row .sm { grid-column: 2; max-width: 62ch; }
.insight-row:hover { padding-left: 8px; }
.insight-row:hover .h3 { color: var(--gold-ink); }
@media (max-width: 820px) {
  .spec + .spec { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .insight-row { grid-template-columns: minmax(0, 1fr); }
  .insight-row .sm { grid-column: 1; }
}

/* ── Journeys: framework → practices, audiences → starting pages ── */
.fw-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; font-size: 13px; font-weight: var(--w-ui); }
.fw-links a { color: var(--gold-ink); border-bottom: 1px solid transparent; transition: border-color .3s; }
.fw-links a:hover { border-color: var(--gold-ink); }
.audiences a { display: flex; flex-direction: column; }
.audiences .go { margin-top: 12px; font-size: 13px; font-weight: var(--w-ui); color: var(--gold-ink); }
.audiences .go::after { content: ' →'; transition: margin-left .4s; }
.audiences a:hover .h4 { color: var(--gold-ink); }
.audiences a:hover .go::after { margin-left: 4px; }

/* ── Details ── */
.toc a[aria-current] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--gold); }
.motto { margin-bottom: 22px; font: var(--w-head) clamp(20px, 1.8vw, 26px)/1.25 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.motto em { font: italic 400 1em/1 var(--serif); color: var(--gold-ink); }
@media (prefers-contrast: more) {
  :root { --grey: #4a4a47; --rule: rgba(27, 27, 27, .4); --faint: #6b6b67; }
  .hero-veil { background: rgba(14, 13, 11, .72) !important; }
  .band-dark .cap, .band-dark .txt, .band-dark .sm { color: var(--paper); }
}

/* ── Utilities (spacing and measure; keep templates free of one-off styles) ── */
.mt { margin-top: 28px; } .mt-s { margin-top: 22px; } .mt-xs { margin-top: 10px; } .mb { margin-bottom: 24px; }
.measure { max-width: 56ch; }
.statement.statement-sm { font-size: clamp(22px, 2.4vw, 34px); }

/* ── Touch: comfortable tap targets (WCAG 2.2: ≥ 24px; we aim for 44px) ── */
@media (pointer: coarse) {
  .ftr a, .ftr .langs li > * { display: inline-flex; align-items: center; min-height: 40px; } /* 40px rows: tappable without turning the footer into a tower */
  .ftr .col { gap: 0; }
  .crumbs li { min-height: 32px; align-items: center; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 32px; } /* the link itself, not just its row, is the 32px target */
  .u { padding-block: 6px; }
}
.ov-mail { font-size: 14px; color: var(--grey); border-bottom: 1px solid var(--rule); padding-bottom: 3px; }

/* ── Rendering performance: skip layout/paint of off-screen sections until they approach the viewport.
   Content stays in the accessibility tree and find-in-page; `auto` remembers each section's real size once rendered. */
main > section.sec, main > section.final, main > section.band-dark, main > .g.sec, .ftr { content-visibility: auto; contain-intrinsic-size: auto 720px; }
@media print { main > section.sec, main > section.final, main > section.band-dark, main > .g.sec, .ftr { content-visibility: visible; } }

/* Narrow phones: the header keeps brand, Contact and Menu on one line without crowding. */
@media (max-width: 440px) {
  .hdr { gap: 10px; }
  .brand { gap: 10px; font-size: 13px; }
  .brand img { height: 17px; padding-right: 0; border-right: 0; }
  .hdr-mobile { gap: 4px; }
  .hdr-mobile .contact { letter-spacing: .12em; padding: 11px 13px; }
  .menu-btn { padding: 0 2px 0 6px; letter-spacing: .14em; }
}

/* Mid widths: the text spans most of the frame, so the shade reaches further right. */
@media (min-width: 821px) and (max-width: 1199px) {
  .hero-veil { background: linear-gradient(90deg, rgba(14,13,11,.6) 0%, rgba(14,13,11,.45) 55%, rgba(14,13,11,.15) 100%), linear-gradient(0deg, rgba(14,13,11,.45) 0%, rgba(14,13,11,0) 60%); }
}



/* ── Depth & rhythm ───────────────────────────────────────
   Paper and stone bands alternate with the one dark band; lists become surfaces you can feel under the pointer;
   people are raised cards. Everything stays quiet at rest and answers on hover. */
.c-label > .cap::before { content: ''; display: block; width: 28px; height: 1px; margin-bottom: 14px; background: var(--gold); }
.band-dark .c-label > .cap::before { background: var(--gold); }
.sec-stone { background: var(--stone) var(--grain); padding-top: var(--sec); margin-bottom: var(--sec); box-shadow: inset 0 1px 0 rgba(27, 27, 27, .05), inset 0 -1px 0 rgba(27, 27, 27, .05); }
.band-dark { background-image: var(--grain); }

/* Practices: each row lifts into a card on hover; the arrow sits in a ring that fills with gold. */
.sec-stone .rows > * { border-color: rgba(27, 27, 27, .1); }
.rows > li { position: relative; isolation: isolate; }
.practice::before, .insight-row::before { content: ''; position: absolute; z-index: -1; inset: 6px calc(-1 * clamp(14px, 2vw, 28px)); border-radius: 18px; background: var(--card); box-shadow: var(--shadow-2); opacity: 0; transform: scale(.985); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.practice:hover::before, .insight-row:hover::before, .practice:focus-visible::before, .insight-row:focus-visible::before { opacity: 1; transform: none; }
.practice:hover, .insight-row:hover { padding-left: 0; }
.practice .t .num { font-size: .7em; }
.practice .d { color: var(--body); align-items: center; }
.practice .d::after { content: '→'; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(27, 27, 27, .18); border-radius: 50%; font-size: 15px; transition: background .45s var(--ease), border-color .45s var(--ease), transform .5s var(--ease), color .4s; }
.practice:hover .d::after { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateX(4px); }
.insight-row .cap { color: var(--gold-ink); }

/* Specialists: raised cards with a round portrait, or a serif monogram until one is supplied. */
.sec-stone .specialists { border: 0; gap: clamp(16px, 2vw, 28px); }
.sec-stone .spec, .sec-stone .spec + .spec { position: relative; padding: clamp(28px, 3vw, 40px); border: 0; border-radius: 22px; background: var(--card); box-shadow: var(--shadow-1); transition: box-shadow .6s var(--ease), transform .6s var(--ease); }
.sec-stone .spec:hover { box-shadow: var(--shadow-2); transform: translateY(-4px); }
.spec .mono { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 22px; border: 1px solid rgba(194, 155, 76, .55); border-radius: 50%; font: italic 400 26px/1 var(--serif); letter-spacing: .02em; color: var(--gold-ink); background: radial-gradient(circle at 30% 25%, #fff 0%, var(--card) 60%); }
img.mono { padding: 0; object-fit: cover; background: var(--panel); }
.spec .more { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding-top: 18px; color: var(--ink); }
.sec-stone .spec .more::after { content: '→'; color: var(--gold-ink); transition: transform .45s var(--ease); }
.sec-stone .spec:hover .more::after { transform: translateX(4px); }

/* From tax to digital: cells fill like keys on hover. */
.progression.lg a { position: relative; isolation: isolate; }
.progression.lg a::before { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--card); opacity: 0; transition: opacity .5s var(--ease); }
.progression.lg a:hover::before { opacity: 1; }
.progression.lg li:first-child a { padding-left: 20px; }

/* Courtyard photograph: a hairline gold frame offset behind it gives the image a place on the page. */
.why-photo { position: relative; overflow: visible; background: none; }
.why-photo picture { display: block; overflow: hidden; position: relative; z-index: 1; } /* plain photograph, like the hero: no frame, no shadow */
.why-photo picture img { display: block; width: 100%; height: auto; }
@media (max-width: 820px) { .practice::before, .insight-row::before { inset: 4px -10px; } }
@media (prefers-reduced-motion: reduce) { .sec-stone .spec:hover { transform: none; } }

/* Header over the dark photo hero (home, before scrolling): light type on a soft top shade. It returns to ink
   on paper as soon as the page scrolls, or when the mobile menu opens over paper. */
.hero-home.has-photo .hero-veil::before { content: ''; position: absolute; inset: 0 0 auto; height: 200px; background: linear-gradient(180deg, rgba(14,13,11,.5) 0%, rgba(14,13,11,0) 100%); }
.hdr-over:not(.scrolled):not(:has(.menu-btn[aria-expanded="true"])) {
  --hdr-fg: var(--paper);
  color: var(--paper);
}
.hdr-over:not(.scrolled):not(:has(.menu-btn[aria-expanded="true"])) :is(.brand, .nav a:not(.contact), .lang-menu summary, .menu-btn) { color: var(--paper); text-shadow: 0 1px 2px rgba(14,13,11,.3); }
.hdr-over:not(.scrolled):not(:has(.menu-btn[aria-expanded="true"])) .nav a:not(.contact) { color: rgba(247,245,240,.95); }
.hdr-over:not(.scrolled):not(:has(.menu-btn[aria-expanded="true"])) .nav a:not(.contact):hover { color: var(--paper); }
.hdr-over:not(.scrolled):not(:has(.menu-btn[aria-expanded="true"])) .brand .bn em { color: #e2c07c; }
.hdr-over:not(.scrolled):not(:has(.menu-btn[aria-expanded="true"])) .brand img { filter: invert(1) hue-rotate(180deg) brightness(1.15); border-color: rgba(247,245,240,.3); }
.hdr-over:not(.scrolled):not(:has(.menu-btn[aria-expanded="true"])) .lang-menu summary svg { color: rgba(247,245,240,.8); }
.hdr-over:not(.scrolled):not(:has(.menu-btn[aria-expanded="true"])) .hdr-langs::before { border-color: rgba(247,245,240,.3); }
.hdr-over:not(.scrolled):not(:has(.menu-btn[aria-expanded="true"])) :is(.nav .contact, .hdr-mobile .contact) { background: var(--paper); color: var(--ink); box-shadow: 0 10px 26px -12px rgba(0,0,0,.55); }
.hdr-over:not(.scrolled):not(:has(.menu-btn[aria-expanded="true"])) .nav .contact .ar { color: var(--gold-ink); }
.hdr-over:not(.scrolled):not(:has(.menu-btn[aria-expanded="true"])) .nav .contact:hover { background: var(--gold); }
.hdr-over :is(.brand, .nav a, .lang-menu summary, .menu-btn, .brand img) { transition: color .4s, background .4s, filter .4s, text-shadow .4s; }

/* People index: the founding partner spans the row as a wide card; the partners sit side by side beneath. */
.partners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.sec-stone .partners .spec { display: flex; flex-direction: column; }
.spec .spec-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sec-stone .partners .spec-lg { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; gap: clamp(24px, 4vw, 56px); padding: clamp(32px, 4vw, 56px); }
.spec-lg .mono { flex: none; width: clamp(88px, 9vw, 120px); height: clamp(88px, 9vw, 120px); margin: 0; font-size: clamp(34px, 3.4vw, 46px); }
.spec-lg .nm { font-size: clamp(32px, 3.6vw, 52px); }
.spec-lg .rl { font-size: clamp(19px, 1.6vw, 23px); }
.spec-lg .sm { max-width: 52ch; font-size: var(--fs-base); }
@media (max-width: 720px) { .partners { grid-template-columns: minmax(0, 1fr); } .sec-stone .partners .spec-lg { flex-direction: column; } }

/* Service rows: number | title + summary | scope list | arrow. One clickable surface that lifts on hover. */
.line { position: relative; isolation: isolate; display: grid; grid-template-columns: clamp(40px, 4vw, 60px) minmax(0, 1.1fr) minmax(0, 1fr) 44px; align-items: baseline; gap: 16px clamp(24px, 3.4vw, 48px); padding: clamp(32px, 3.6vw, 44px) 0; }
.line.no-num { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 44px; }
.line::before { content: ''; position: absolute; z-index: -1; inset: 8px calc(-1 * clamp(14px, 2vw, 28px)); border-radius: 18px; background: var(--card); box-shadow: var(--shadow-2); opacity: 0; transform: scale(.985); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.line:hover::before, .line:focus-within::before { opacity: 1; transform: none; }
.line-num { font-size: clamp(20px, 14px + .9vw, 27px); }
.line-main .h3 { font-size: clamp(23px, 16px + 1.3vw, 32px); line-height: 1.15; letter-spacing: -.026em; text-wrap: balance; }
.line-main .h3 a { transition: color .4s; }
.line-main .h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; } /* whole row is the link target */
.line:hover .h3 a { color: var(--gold-ink); }
.line-main .sm { margin-top: 14px; max-width: 46ch; }
.line-list { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-sm); line-height: 1.5; color: var(--body); }
.line-list li { position: relative; padding-left: 20px; }
.line-list li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); } /* small gold dot as the list marker */
.line-go { display: grid; place-items: center; align-self: start; width: 44px; height: 44px; border: 1px solid rgba(27, 27, 27, .18); border-radius: 50%; font-size: 15px; transition: background .45s var(--ease), border-color .45s var(--ease), transform .5s var(--ease); }
.line:hover .line-go { background: var(--gold); border-color: var(--gold); transform: translateX(4px); }
@media (max-width: 900px) {
  .line { grid-template-columns: clamp(36px, 8vw, 48px) minmax(0, 1fr); }
  .line.no-num { grid-template-columns: minmax(0, 1fr); }
  .line .line-list { grid-column: 2; }
  .line.no-num .line-list { grid-column: 1; }
  .line-go { display: none; }
}

/* ── Readability ─────────────────────────────────────────
   Small text is set larger, firmer and darker; small headings get a reading weight (hairline weights are kept
   for display sizes only); text links are a size up with a clear weight; dark-band text is near-solid. */
.h4, .why-list .h3, .pair .h3, .panels .pt, .cells .h4, .steps .h4 { font-weight: 450; letter-spacing: -.012em; }
.h4 { font-size: clamp(19px, 17.4px + .4vw, 22px); }
.sm { line-height: 1.62; }
.cap { color: #4f4f4b; }
.note { color: var(--body); font-size: 14px; max-width: 22ch; }
.audiences .go, .fw-links, .spec .more, .insight-row .cap { font-size: 14.5px; font-weight: 500; }
.audiences .go { margin-top: 14px; }
.fw-links a { border-bottom-color: rgba(133, 98, 42, .3); }
.person .rl { font-size: 14px; color: var(--body); }
.practice .d, .line-list { color: var(--body); }
.band-dark .cap { color: rgba(247, 245, 240, .76); }
.band-dark .txt, .band-dark .sm, .band-dark .h4 { color: rgba(247, 245, 240, .88); }
.band-dark .person .rl { color: rgba(247, 245, 240, .78); }
.ftr { color: var(--body); }
/* Text grids: never narrower than ~26 characters a line (three columns at most on desktop). */
.cells { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 40px clamp(28px, 3vw, 44px); }
.cells .sm { max-width: 40ch; }

/* ── Serif display ───────────────────────────────────────
   Headlines, names and statements are set in Newsreader (display optical size); reading text, labels and the
   interface stay in Geist. A book-weight (380) at display sizes reads refined, not heavy; italics are the true italic. */
:root { --display: var(--serif); }
:is(.display, .h1, .h2, .statement, .final h2, .practice .t, .framework .name, .line-main .h3, .insight-row .h3,
    .spec .nm, .person .nm, .panels .pt, .progression.lg a, .why-list .h3, .pair .h3, .article h2, .motto, .overlay > nav a, .role) {
  font-family: var(--display); font-weight: 380; font-kerning: normal; font-variant-ligatures: common-ligatures contextual; font-optical-sizing: auto;
}
:is(.display, .h1, .h2, .statement, .final h2, .lead, .motto, .practice .t, .line-main .h3, .spec .nm) em { font-size: 1em; letter-spacing: inherit; }
.display { font-size: clamp(46px, 15px + 5.5vw, 102px); line-height: 1.0; letter-spacing: -.026em; }
.hero-home h1 .serif { font-size: 1em; letter-spacing: -.02em; margin-top: 0; }
.h1 { font-size: clamp(40px, 16px + 4.4vw, 86px); line-height: 1.02; letter-spacing: -.024em; }
.h1-article { font-size: clamp(34px, 16px + 3vw, 64px); line-height: 1.08; letter-spacing: -.018em; }
.h2 { font-size: clamp(30px, 16px + 2.5vw, 54px); line-height: 1.08; letter-spacing: -.018em; }
.statement { font-size: clamp(26px, 15px + 2.2vw, 46px); line-height: 1.2; letter-spacing: -.014em; }
.band-dark .statement { font-size: clamp(27px, 15px + 2.4vw, 50px); line-height: 1.18; }
.statement.statement-sm { font-size: clamp(23px, 15px + 1.6vw, 36px); }
.final h2 { font-size: clamp(34px, 15px + 3.6vw, 68px); line-height: 1.08; letter-spacing: -.022em; max-width: 17ch; }
.practice .t { font-size: clamp(27px, 15px + 2.2vw, 42px); line-height: 1.06; letter-spacing: -.016em; }
.practice .t .num { font-size: .56em; vertical-align: .22em; }
.framework .name { font-size: clamp(27px, 15px + 1.8vw, 40px); line-height: 1.04; letter-spacing: -.014em; }
.line-main .h3 { font-size: clamp(25px, 15px + 1.6vw, 35px); line-height: 1.1; letter-spacing: -.014em; }
.insight-row .h3 { font-size: clamp(23px, 15px + 1.2vw, 32px); line-height: 1.14; letter-spacing: -.012em; }
.spec .nm { font-size: clamp(27px, 17px + 1.5vw, 38px); line-height: 1.06; letter-spacing: -.014em; }
.spec-lg .nm { font-size: clamp(37px, 20px + 2.8vw, 60px); }
.person .nm { font-size: 26px; letter-spacing: -.012em; }
.person.lg .nm { font-size: clamp(33px, 19px + 2vw, 50px); letter-spacing: -.016em; }
.panels .pt { font-size: clamp(23px, 15px + 1.2vw, 32px); line-height: 1.12; letter-spacing: -.012em; }
.progression.lg a { font-size: clamp(25px, 15px + 1.7vw, 40px); letter-spacing: -.014em; }
.why-list .h3, .pair .h3 { font-size: clamp(23px, 15px + 1vw, 30px); line-height: 1.14; letter-spacing: -.012em; font-weight: 400; }
.article h2 { font-size: clamp(26px, 17px + 1.3vw, 35px); line-height: 1.14; letter-spacing: -.012em; }
.motto { font-size: clamp(22px, 15px + 1vw, 29px); line-height: 1.16; }
.motto em { font-size: 1em; }
.overlay > nav a { font-size: 34px; line-height: 1.08; letter-spacing: -.014em; }
.role { font-style: italic; }
@media (max-width: 560px) { .display { font-size: clamp(42px, 12vw, 54px); } .h1 { font-size: clamp(36px, 10.6vw, 48px); } }
.practice .t .tag { font-family: var(--sans); font-weight: 500; letter-spacing: var(--track-caps); }

/* ── Alignment ───────────────────────────────────────────
   Every section label sits on the first baseline of the content beside it (whatever that content's size),
   and numerals share the baseline of the title they number. Baseline alignment, not pixel offsets, so it
   holds at every width and in every language. */
section.g:has(> .c-label) { align-items: first baseline; }
.framework > li, .line, .practice { align-items: first baseline; }
.why .why-text { align-self: center; }
section.g#team { align-items: start; } /* content starts with a card: the label aligns with its top edge */

/* ── Typographic details ─────────────────────────────────
   Related links read as titles (serif, like every other list title); arrows always come from the sans, so they
   stay short and firm next to serif text; long breadcrumbs are truncated; articles open with a drop cap. */
.linkrows .h3 { font-family: var(--display); font-weight: 400; font-size: clamp(23px, 15px + 1.1vw, 31px); line-height: 1.14; letter-spacing: -.012em; transition: color .4s; }
.linkrows .h3::after, .panels .pt::after { content: '→'; font-family: var(--sans); font-size: .5em; font-weight: 400; vertical-align: .28em; margin-left: .45em; color: var(--gold-ink); display: inline-block; transition: transform .45s var(--ease); }
.linkrows > li { position: relative; isolation: isolate; }
.linkrows > li > a::before { content: ''; position: absolute; z-index: -1; inset: 6px calc(-1 * clamp(14px, 2vw, 28px)); border-radius: 18px; background: var(--card); box-shadow: var(--shadow-2); opacity: 0; transform: scale(.985); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.linkrows > li > a:hover::before, .linkrows > li > a:focus-visible::before { opacity: 1; transform: none; }
.linkrows > li > a:hover { padding-left: 0; }
.linkrows > li > a:hover .h3 { color: var(--gold-ink); }
.linkrows > li > a:hover .h3::after, .panels a:hover .pt::after { transform: translateX(4px); }
.linkrows > li > a { padding: 26px 0; }
.crumbs li { min-width: 0; }
.crumbs ol { align-items: baseline; }
.crumbs [aria-current] { display: inline-block; max-width: min(46ch, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; line-height: 1.6; padding: 0; margin: 0; }
.crumbs li { display: inline-flex; align-items: baseline; }

/* ── Article text in the serif ────────────────────────────
   Long-form reading in Newsreader's text optical size: ~19px, generous leading, ~66 characters a line.
   Short descriptions, ledes and the interface stay in Geist. */
.article p, .article li { font-family: var(--serif); font-weight: 400; font-size: clamp(18px, 16.6px + .35vw, 20px); line-height: 1.62; letter-spacing: 0; }
.article > p:first-of-type { font-family: var(--serif); font-weight: 380; font-size: clamp(21px, 17.5px + .9vw, 26px); line-height: 1.42; letter-spacing: -.008em; }
.article em { font-style: italic; color: var(--gold-ink); }
.article strong, .article b { font-weight: 560; }
@media (min-width: 821px) { .practice { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } } /* the serif runs wider: room for 'Risk & Due Diligence' on one line */

/* Closing call to action: the primary button, then the note. */
.final .pill { margin-top: 6px; box-shadow: 0 12px 30px -14px rgba(133, 98, 42, .6); }
.final p.xs { margin-top: 22px; }
.overlay .arrow { font-size: 16px; }

/* Touch targets: text links keep their size but gain an invisible 44px-tall hit area (WCAG 2.5.8). */
.arrow, .u, .fw-links a, .audiences .go, .ov-langs a { position: relative; }
.arrow::before, .u::before, .fw-links a::before, .ov-langs a::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }

/* Connected issues (About): the thread. Two hairlines frame seven columns; a gold line runs through every point.
   Motion, once, on reveal: the thread draws across; as it reaches each point the point lands (with a ripple) and
   its word rises out of a mask beneath it. Then a soft light travels the thread every few seconds. */
.thread { --line: 34px; --draw: 1.8s; --at: calc(var(--draw) / var(--n)); position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); width: calc(100% + (100% - 140px) / 8 + 20px); margin: 48px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.thread::before { content: ''; position: absolute; left: 0; right: 0; top: var(--line); height: 1px; background: linear-gradient(90deg, var(--gold), var(--gold) 92%, rgba(194, 155, 76, 0)); transform: scaleX(0); transform-origin: left; transition: transform var(--draw) cubic-bezier(.45, 0, .2, 1); }
.thread.in::before { transform: none; }
.thread li { position: relative; padding: calc(var(--line) - 4px) 16px 32px 0; cursor: default; }
.thread .dot { position: relative; z-index: 1; display: block; width: 9px; height: 9px; margin-bottom: 22px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px var(--paper); transform: scale(0); transition: transform .6s cubic-bezier(.34, 1.7, .5, 1) calc(var(--i) * var(--at) + .05s); }
.thread.in .dot { transform: none; }
.thread .dot::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; }
.thread.in .dot::after { animation: thread-ripple 1.3s var(--ease) calc(var(--i) * var(--at) + .1s) 1 both; }
@keyframes thread-ripple { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(3.4); opacity: 0; } }
/* The word sits in a clipping box and rises into view: a typographic reveal rather than a fade. */
.thread .tw { display: block; overflow: hidden; padding-bottom: .12em; font: 400 clamp(18px, 15px + .35vw, 20px)/1.15 var(--serif); letter-spacing: -.012em; color: var(--ink); }
.thread .tw > span { display: block; text-wrap: balance; transform: translateY(110%); transition: transform .9s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * var(--at) + .2s), color .3s; }
.thread.in .tw > span { transform: none; }
.thread li:hover .tw > span { color: var(--gold-ink); }
.thread li:hover .dot { transform: scale(1.45); transition: transform .3s var(--ease); }
/* Afterwards: a soft light travels the thread. */
.thread::after { content: ''; position: absolute; top: calc(var(--line) - 1px); left: 0; width: 120px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 244, 214, 0), rgba(255, 246, 222, .95) 50%, rgba(255, 244, 214, 0)); opacity: 0; pointer-events: none; }
.thread.in::after { animation: thread-glint 4.2s cubic-bezier(.45, 0, .55, 1) calc(var(--draw) + 1.4s) infinite; }
@keyframes thread-glint { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 72% { opacity: 1; } 84%, 100% { left: calc(100% - 120px); opacity: 0; } }
.thread-after { margin-top: 36px; max-width: 60ch; }
@media (max-width: 1100px) { /* seven columns get too narrow: the thread turns vertical */
  .thread { width: auto; grid-template-columns: minmax(0, 1fr); margin-top: 28px; padding: 10px 0; max-width: 480px; }
  .thread::before { left: 4px; right: auto; top: 26px; bottom: 26px; width: 1px; height: auto; background: var(--gold); transform: scaleY(0); transform-origin: top; }
  .thread.in::before { transform: none; }
  .thread::after { top: 26px; left: 3px; width: 3px; height: 90px; background: linear-gradient(180deg, rgba(255, 244, 214, 0), rgba(255, 246, 222, .95) 50%, rgba(255, 244, 214, 0)); }
  @keyframes thread-glint { 0% { top: 26px; opacity: 0; } 10% { opacity: 1; } 72% { opacity: 1; } 84%, 100% { top: calc(100% - 116px); opacity: 0; } }
  .thread li { display: grid; grid-template-columns: 9px minmax(0, 1fr); column-gap: 22px; align-items: center; padding: 12px 0; }
  .thread .dot { margin: 0; }
  .thread .tw { font-size: 20px; }
  .thread-after { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) { .thread::before, .thread .dot, .thread .tw > span { transform: none; transition: none; } .thread::after, .thread .dot::after { display: none; } }

/* ── Phone layout ────────────────────────────────────────── */
@media (max-width: 820px) {
  .contact-aside { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px !important; padding-bottom: 36px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); }
  .contact-aside > div:last-child { grid-column: 1 / -1; } /* the email address needs the full width */
  .contact-aside a { overflow-wrap: anywhere; }
  .form { margin-top: 8px; }
  .vline { display: none; }
  .hero-home { padding-top: 112px; }
  .hero-home .eyebrow { font-size: 12px; }
  .cap { font-size: 12px; }
  .toc ul { padding-right: 24px; }
}
/* Narrow phones: two columns leave long labels no room (es: "Confidencialidad", "Recomendación"). */
@media (max-width: 440px) {
  .contact-aside { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
}
/* 16px inputs: iOS Safari zooms the page on focus when an input is smaller. */
.field input, .field select, .field textarea { font-size: 16px; }
/* Service-list titles and profile expertise titles on phones: one tap row ≥ 44px */
@media (pointer: coarse) {
  .line-main .h3 a, .linkrows .h3 { display: inline-block; padding-block: 8px; margin-block: -8px; }
  .toc a { padding: 16px 0; }
}

/* Mid-size desktops (1061–1240px): the full menu is shown but space is tight. The brand drops its name and keeps
   only the mark; the menu links sit a little closer. Keeps the desktop menu usable down to the phone-menu breakpoint. */
@media (min-width: 1061px) and (max-width: 1240px) {
  .brand .bn { display: none; }
  .brand img { padding-right: 0; border-right: 0; }
  .nav { gap: clamp(14px, 1.8vw, 24px); font-size: 12px; letter-spacing: .1em; }
  .nav .contact { padding: 12px 16px 12px 18px; }
}
/* Hero label: the practice name stays on one line next to its numeral. */
.hero-label { white-space: nowrap; }
@media (max-width: 1240px) { .hero-label { white-space: normal; } .hero-label .num { display: block; margin: 0 0 6px; } }
/* German and French practice names are longer than their column: there the label wraps under the numeral at every width. */
:is(:lang(de), :lang(fr)) .hero-label { white-space: normal; }
:is(:lang(de), :lang(fr)) .hero-label .num { display: block; margin: 0 0 6px; }
/* German compounds ("Unternehmensgründung") and long French words can be wider than a headline or label column: hyphenate them, and break
   as a last resort. Short words are left alone. Labels in the narrow left column may wrap. */
:is(:lang(de), :lang(fr)) :is(h1, h2, h3, h4, p, li, dd, .cap, .nm, .rl, .h4) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; overflow-wrap: break-word; }
:is(:lang(de), :lang(fr)) :is(.c-label, .hero-label) .cap, :is(:lang(de), :lang(fr)) .c-label > .cap { white-space: normal; }

/* Smallest phones: the brand keeps its mark only, so the name never runs under the Contact button. */
@media (max-width: 374px) { .brand .bn { display: none; } .brand img { padding-right: 0; border-right: 0; } }
@media (max-width: 400px) { .hdr-mobile .contact { letter-spacing: .1em; padding-inline: 12px; } }

/* Team page: a member without a profile page shares the partner card, without hover lift or link styling. */
.sec-stone .spec-member { cursor: default; }
.sec-stone .spec-member:hover { box-shadow: var(--shadow-1); transform: none; }
.sec-stone .spec-member:hover .nm { color: var(--ink); }
main > .sec-stone:last-child { margin-bottom: 0; } /* a stone band that ends the page meets the footer directly */

/* ── Profile hero ────────────────────────────────────────
   Name, role and introduction on the left; the portrait as a proper 4:5 photograph on the right, top-aligned with
   the name and set like the courtyard photo (soft shadow, offset gold hairline frame). The name is sized to sit
   on one line beside the portrait; the role and introduction keep a comfortable measure. */
.hero-profile .h1 { font-size: clamp(44px, 18px + 4vw, 84px); margin-bottom: 14px; }
.hero-profile .role { margin: 0 0 30px; font-size: clamp(19px, 15px + .6vw, 25px); line-height: 1.3; }
.hero-profile .lede { max-width: 50ch !important; }
.hero-profile.has-portrait .c-main6 { grid-column: 4 / span 5; }
.hero-profile .c-portrait { grid-column: 10 / span 3; justify-self: end; align-self: start; position: relative; width: min(100%, 380px); margin: 10px 0 0; } /* the figure is exactly the photo's size, so the frame follows the photo */
.hero-profile .portrait { position: relative; z-index: 1; display: block; width: 100%; max-width: 380px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; filter: saturate(.86) contrast(.98); }
.hero-profile .portrait { max-width: none; } /* a gentle grade, like the courtyard photo, calms busy backgrounds */
@media (max-width: 1060px) { .hero-profile.has-portrait .c-main6 { grid-column: 4 / span 6; } .hero-profile .c-portrait { grid-column: 10 / span 3; } }
@media (max-width: 820px) {
  .hero-profile .c-portrait { order: -1; width: min(62%, 260px); margin: 0 0 32px; justify-self: start; }
  .hero-profile .h1 { font-size: clamp(40px, 11vw, 52px); }
}

/* Fees: per-adviser price lists. Name and detail on the left, price on the right in the serif, VAT note small. */
.fee-role { margin-bottom: 10px; }
.fee-for { max-width: 46ch; color: var(--body); }
.fee-group { margin-top: clamp(40px, 5vw, 64px); }
.fee-gh { margin-bottom: 12px; }
.fees > li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 32px; padding: 18px 0; }
.fee-n { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fee-name { font: var(--w-head) clamp(16px, 1.5vw, 19px)/1.4 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.fee-p { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; flex-shrink: 0; }
.fee-from { font: var(--w-ui) var(--fs-micro)/1 var(--sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--grey); }
.fee-amt { font: 400 clamp(24px, 1.6vw + 14px, 32px)/1 var(--serif); letter-spacing: -.01em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.fee-vat { font-size: var(--fs-xs); color: var(--grey); }
.fee-more { margin-top: 14px; }
.fee-areas { margin-top: clamp(40px, 5vw, 64px); }
.fee-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fee-tags > li { padding: 7px 14px; border: 1px solid var(--rule); border-radius: 999px; font-size: var(--fs-xs); line-height: 1.3; color: var(--body); }
.sec-stone .fee-tags > li { background: var(--card); border-color: transparent; }
.fee-tags-dark > li { border-color: rgba(247, 245, 240, .22); color: rgba(247, 245, 240, .88); }
.fee-links { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: clamp(32px, 4vw, 48px); }
/* Phones: the price stays on the right. "From" sits above the figure so the price column stays narrow and the name
   wraps beside it; only the "Request a proposal" link drops below its name. */
@media (max-width: 480px) {
  .fees > li { gap: 16px; }
  .fee-name { overflow-wrap: break-word; hyphens: auto; } /* long compounds (de) never push the price off-screen */
  .fee-p { flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
  .fee-from { margin-right: calc(-1 * var(--track-caps)); } /* trailing tracking would inset it from the figure's edge */
  .fees > li:has(> .fee-ask) { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.fee-note { margin-top: clamp(48px, 6vw, 80px); padding-top: 20px; border-top: 1px solid rgba(247, 245, 240, .16); }
.band-dark .fee-note { color: rgba(247, 245, 240, .7); }
/* 1241–1599px: brand name visible and seven menu links; the links tighten slightly. Longer languages keep only the
   mark a little longer (es up to 1399px, fr up to 1319px, de up to 1279px) so the name never runs into the menu. */
@media (min-width: 1241px) and (max-width: 1599px) {
  .nav { gap: clamp(16px, 1.6vw, 26px); letter-spacing: .11em; }
  .hdr { gap: clamp(16px, 1.8vw, 28px); }
}
@media (min-width: 1241px) and (max-width: 1399px) { :lang(es) .brand .bn { display: none; } :lang(es) .brand img { padding-right: 0; border-right: 0; } }
@media (min-width: 1241px) and (max-width: 1319px) { :lang(fr) .brand .bn { display: none; } :lang(fr) .brand img { padding-right: 0; border-right: 0; } }
@media (min-width: 1241px) and (max-width: 1279px) { :lang(de) .brand .bn { display: none; } :lang(de) .brand img { padding-right: 0; border-right: 0; } }
/* Fees: group introduction, quoted-on-request link, monthly unit, "typical support" list and disclaimer. */
.fee-gtext { max-width: 56ch; margin: -2px 0 16px; color: var(--grey); }
.fee-ask { flex-shrink: 0; font-size: 13.5px; }
.fee-per { font: var(--w-ui) var(--fs-xs)/1 var(--sans); letter-spacing: 0; color: var(--grey); margin-left: 2px; }
.fee-ll { margin-top: 28px; }
.fee-list { margin-top: 10px; columns: 2; column-gap: 32px; }
.fee-list > li { position: relative; break-inside: avoid; padding: 5px 0 5px 20px; font-size: var(--fs-sm); line-height: 1.5; color: var(--body); }
.fee-list > li::before { content: ''; position: absolute; left: 0; top: 1.05em; width: 10px; height: 1px; background: var(--gold); }
.fee-disc { max-width: 60ch; margin-top: 22px; padding-left: 14px; border-left: 1px solid var(--gold); }
@media (max-width: 640px) { .fee-list { columns: 1; } }