/* NICKOLDS | WEALTH
   Built 2026-09-28T12:23:43.083Z
   Do not edit: generated from website/src. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-300i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-300i-latin.woff2) 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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-400i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-400i-latin.woff2) 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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-300-latin.woff2) 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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-400-latin.woff2) 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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-500-latin.woff2) 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: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/eb-garamond-400i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/eb-garamond-400i-latin.woff2) 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: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/eb-garamond-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/eb-garamond-400-latin.woff2) 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: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/eb-garamond-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/eb-garamond-500-latin.woff2) 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: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/montserrat-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/montserrat-300-latin.woff2) 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: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/montserrat-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/montserrat-400-latin.woff2) 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: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/montserrat-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/montserrat-500-latin.woff2) 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;
}

/* --- The verification variant (23 Sep): IBM Plex Sans and IBM Plex Mono --- */


/* ==========================================================================
   Nickolds Intelligence Office — base layer
   Structure, components, motion and accessibility. theme.css loads after this
   this file first and then overrides tokens (and a few rules) on top.
   ========================================================================== */

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-weight: var(--body-weight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.28em; }
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--ink); }

.u-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 1rem; top: -100%; z-index: 200;
  padding: 0.9rem 1.4rem; background: var(--ink); color: var(--bg);
  font: var(--ui-font); letter-spacing: var(--ui-track); text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { top: 1rem; }

/* ----------------------------------------------------------------- layout */

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

.sec { padding-block: var(--sec-pad); position: relative; }
.sec--tight { padding-block: calc(var(--sec-pad) * 0.5); }
.sec--alt { background: var(--bg-alt); }
.sec--deep { background: var(--bg-deep); color: var(--on-deep); }
.sec--deep .eyebrow { color: var(--on-deep-accent); }
.sec--quote { padding-block: calc(var(--sec-pad) * 0.8); }
/* Our Principles opens and closes every page: a band, not a full section. */
.sec--principles { padding-block: calc(var(--sec-pad) * 0.55); }
.hero + .sec--principles { padding-top: calc(var(--sec-pad) * 0.45); }
/* A deep section. */
.sec--mark { overflow: hidden; }
.sec--mark .shell { position: relative; z-index: 1; }
@media (max-width: 43.99rem) { }

/* ------------------------------------------------------------- typography */

.display, .sec-head__h, .cta__h {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: var(--display-lh);
  text-wrap: balance;
  margin: 0;
}

.display { font-size: var(--h1); }
.sec-head__h { font-size: var(--h2); }

/* Large display text only needs a 3:1 contrast ratio, so it can carry a
   truer brand gold than the small uppercase labels can. */
.display em, .sec-head__h em, .cta__h em {
  font-style: italic;
  color: var(--display-accent);
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--eyebrow-size);
  font-weight: 400;
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: var(--eyebrow-gap);
}

.standfirst {
  margin-top: 1.65rem;
  max-width: 46ch;
  font-size: var(--standfirst-size);
  line-height: 1.6;
  color: var(--ink-mute);
  text-wrap: pretty;
}

.sec-head { max-width: var(--head-w); margin-bottom: var(--head-gap); }
.sec-head__intro {
  margin-top: 1.35rem; max-width: 62ch;
  color: var(--ink-mute); text-wrap: pretty;
}

.footnote {
  margin-top: 1.6rem;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--ink-faint);
  max-width: 92ch;
}
.footnote strong { color: var(--ink-mute); font-weight: 500; }

.disclaimer { font-size: 0.8125rem; line-height: 1.7; color: var(--ink-faint); max-width: 100ch; }

/* ----------------------------------------------------------------- lockup */

.lockup {
  display: inline-flex; align-items: center; gap: 0.75em;
  text-decoration: none; color: inherit; line-height: 1;
}
.lockup__type { display: flex; flex-direction: column; align-items: flex-start; gap: 0.42em; }
.lockup__name {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-weight: 500;
  font-size: 1.42em; letter-spacing: 0.16em;
  text-transform: uppercase; white-space: nowrap; color: var(--ink);
}
/* The bar: as tall as the capitals, a clear 0.3em either side, hairline-thin. */
.lockup__bar {
  display: inline-block; width: 1px; height: 0.78em;
  margin: 0 0.34em 0 0.2em; background: currentColor; opacity: 0.85;
}
.lockup__sub {
  font-family: var(--font-ui); font-weight: 400;
  font-size: 0.52em; letter-spacing: 0.3em;
  text-transform: uppercase; white-space: nowrap; color: var(--ink-mute);
  padding-left: 0.1em;
}
.lockup--sm { font-size: 0.8rem; }
.lockup--lg { font-size: 1.3rem; }
.lockup--xl { font-size: 1.9rem; }
.site-foot .lockup__name { color: var(--on-deep); }
.site-foot .lockup__sub { color: var(--on-deep-mute); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6em; min-height: 44px;
  padding: 1.05em 2.15em;
  font-family: var(--font-ui); font-size: var(--btn-size); font-weight: 400;
  letter-spacing: var(--ui-track); text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--accent); border-radius: var(--btn-radius);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.btn--solid { background: var(--btn-solid-bg); color: var(--btn-solid-ink); border-color: var(--btn-solid-bg); }
.btn--solid:hover { background: var(--btn-solid-bg-hover); border-color: var(--btn-solid-bg-hover); }
.btn--ghost { background: transparent; color: currentColor; border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--btn-ghost-hover); border-color: var(--accent); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.65em;
  margin-top: auto; padding-top: 1.8rem;
  font-family: var(--font-ui); font-size: var(--btn-size);
  letter-spacing: var(--ui-track); text-transform: uppercase;
  text-decoration: none; color: var(--accent-strong);
}
.link-arrow .ico { width: 1.05rem; height: 1.05rem; transition: transform .35s ease; }
.link-arrow:hover .ico { transform: translateX(5px); }

/* ----------------------------------------------------------------- header */

.site-head {
  position: sticky; top: 0; z-index: 100;
  background: var(--head-bg);
  border-bottom: 1px solid transparent;
  transition: background-color .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}
.site-head.is-stuck {
  background: var(--head-bg-stuck);
  border-bottom-color: var(--rule);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
.site-head__inner {
  display: flex; align-items: center; gap: 2rem;
  min-height: var(--head-h);
}
.site-nav { margin-inline: auto; }
.site-nav ul { display: flex; gap: clamp(1.1rem, 2.2vw, 2.3rem); }
.site-nav a {
  font-family: var(--font-ui); font-size: var(--nav-size); font-weight: 400;
  letter-spacing: var(--ui-track); text-transform: uppercase;
  text-decoration: none; color: var(--ink-mute);
  padding-block: 0.5rem;
  transition: color .3s ease;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent-strong); }

.site-head__cta { padding: 0.85em 1.7em; min-height: 40px; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-left: auto;
  background: none; border: 1px solid var(--rule-strong); border-radius: var(--btn-radius);
  cursor: pointer;
}
.nav-toggle__box { display: grid; place-items: center; }
.nav-toggle__box > * { grid-area: 1 / 1; width: 1.25rem; height: 1.25rem; transition: opacity .25s ease; }
.nav-toggle__box > :nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box > :nth-child(1) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box > :nth-child(2) { opacity: 1; }

.mobile-nav {
  position: fixed; inset: var(--head-h) 0 0; z-index: 99;
  display: flex; flex-direction: column; justify-content: center; gap: 2.5rem;
  padding: 2rem var(--gutter) 5rem;
  background: var(--bg);
  overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 0.35rem; }
.mobile-nav a {
  display: block; padding: 0.55rem 0;
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(1.9rem, 8vw, 2.7rem); letter-spacing: var(--display-track);
  text-decoration: none;
}
.mobile-nav a[aria-current="page"] { color: var(--accent-strong); }
.mobile-nav .btn { align-self: flex-start; }

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative; overflow: hidden;
  padding-block: var(--hero-pad);
  background: var(--hero-bg); color: var(--hero-ink);
}
.hero__wash {
  position: absolute; inset: -30% -10% auto; height: 160%;
  background: var(--hero-wash);
  pointer-events: none;
  /* Fade the wash out before the hero ends, so `overflow: hidden` never slices
     a radial gradient mid-fade and leaves a visible horizontal seam. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0 46%, transparent 72%);
  mask-image: linear-gradient(to bottom, #000 0 46%, transparent 72%);
}
.hero__inner { position: relative; }
.hero .eyebrow { color: var(--hero-accent); }
.hero .standfirst { color: var(--hero-mute); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.8rem; }

/* ------------------------------------------------------------------ cards */

.cards { display: grid; gap: var(--grid-gap); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
/* Pin to three columns on wide screens: the six client cards should read as
   two even rows, not 4 + 2. */
@media (min-width: 62rem) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  padding: var(--card-pad);
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
}
.card__ico { display: block; color: var(--accent-strong); margin-bottom: 1.5rem; }
.card__ico .ico { width: 1.6rem; height: 1.6rem; }
.card__h {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.3rem; letter-spacing: -0.01em; margin-bottom: 0.6rem;
}
.card__b { color: var(--ink-mute); font-size: 0.96rem; }

/* --------------------------------------------------------------- split rows */

.split { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
@media (min-width: 62rem) {
  .split { grid-template-columns: 1fr 1.1fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .split__lead { position: sticky; top: calc(var(--head-h) + 3rem); }
}
.split .sec-head { margin-bottom: 2.5rem; }

.row-item {
  display: flex; gap: 1.5rem;
  padding-block: 1.9rem;
  border-top: 1px solid var(--rule);
}
.row-item:last-child { border-bottom: 1px solid var(--rule); }
.row-item__ico { flex: none; color: var(--accent-strong); }
.row-item__ico .ico { width: 1.5rem; height: 1.5rem; }
.row-item h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.28rem; margin-bottom: 0.5rem;
}
.row-item p { color: var(--ink-mute); font-size: 0.96rem; }

/* ------------------------------------------------------------- pull quote */

.pull { position: relative; max-width: 46ch; }
.sec--quote .pull { max-width: 62ch; margin-inline: auto; text-align: center; }
.quote-mark { width: 2rem; height: 1.5rem; color: var(--accent); margin-bottom: 1.5rem; }
.sec--quote .quote-mark { margin-inline: auto; }
.pull blockquote p {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--quote-size); line-height: 1.32; letter-spacing: -0.018em;
  text-wrap: pretty;
}
.pull blockquote em { font-style: italic; color: var(--accent-strong); }
.pull figcaption {
  margin-top: 2rem;
  font-family: var(--font-ui); font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-track); text-transform: uppercase;
  color: var(--accent-strong);
}
.pull figcaption span { display: block; margin-top: 0.5rem; color: var(--ink-faint); }

/* ------------------------------------------------------------------ offers */

.offers { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.offer {
  display: flex; flex-direction: column;
  padding: var(--card-pad);
  background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--radius);
}
.offer__k {
  font-family: var(--font-ui); font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-track); text-transform: uppercase;
  color: var(--accent-strong); margin-bottom: 1.3rem;
}
.offer__h {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(1.6rem, 3vw, 2.15rem); letter-spacing: -0.022em; line-height: 1.12;
  margin-bottom: 1rem;
}
.offer__b { color: var(--ink-mute); }

/* ------------------------------------------------------------------ stats */

.stats {
  display: grid; gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.stat { display: flex; flex-direction: column; gap: 0.7rem; }
.stat__fig {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(2.6rem, 6vw, 4rem); line-height: 0.95; letter-spacing: -0.035em;
  color: var(--stat-fig);
}
.stat__lab {
  font-family: var(--font-ui); font-size: 0.78rem;
  letter-spacing: 0.09em; line-height: 1.6;
  color: var(--stat-lab); max-width: 22ch;
}

/* --------------------------------------------------------------- def list */

.two-col { display: grid; gap: clamp(3rem, 6vw, 5.5rem); grid-template-columns: 1fr; }
@media (min-width: 60rem) { .two-col { grid-template-columns: 1fr 1fr; } }

.deflist__h {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.022em;
  padding-bottom: 1.4rem; margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--accent);
}
.deflist__row { padding-block: 1.7rem; border-bottom: 1px solid var(--rule); }
.deflist dt {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.2rem; margin-bottom: 0.55rem;
}
.deflist dd { margin: 0; color: var(--ink-mute); font-size: 0.96rem; }

/* --------------------------------------------------------------- compare */

.compare { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; margin-bottom: clamp(3rem, 6vw, 5rem); }
@media (min-width: 60rem) { .compare { grid-template-columns: 1fr 1.35fr; align-items: start; } }
.compare__col { padding: var(--card-pad); background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--radius); }
.compare__col--full { background: var(--bg-deep); color: var(--on-deep); border-color: transparent; }
.compare__col--full .ticks .ico { color: var(--on-deep-accent); }
.compare__h {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(1.4rem, 2.6vw, 1.8rem); letter-spacing: -0.02em;
  margin-bottom: 1.6rem;
}

.ticks { display: grid; gap: 0.95rem; }
.ticks li { display: flex; gap: 0.9rem; align-items: baseline; font-size: 0.95rem; line-height: 1.6; }
.ticks .ico { width: 0.95rem; height: 0.95rem; flex: none; color: var(--accent-strong); transform: translateY(0.15em); }

/* ------------------------------------------------------------------ steps */

.steps {
  display: grid; gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
/* Five steps, five columns — auto-fit would otherwise leave a 4 + 1 orphan. */
@media (min-width: 66rem) { .steps { grid-template-columns: repeat(5, 1fr); } }
.step { position: relative; padding-top: 2.4rem; border-top: 1px solid var(--rule); }
.step__n {
  position: absolute; top: -1.55rem; left: 0;
  display: grid; place-items: center;
  width: 3.1rem; height: 3.1rem;
  background: var(--step-bg); color: var(--step-ink);
  border: 1px solid var(--accent); border-radius: 50%;
  font-family: var(--font-display); font-size: 1.25rem;
}
.step__h {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.16rem; line-height: 1.3; margin-bottom: 0.7rem;
}
.step__b { font-size: 0.92rem; color: var(--ink-mute); }
.sec--deep .step__b { color: var(--on-deep-mute); }
.sec--deep .step { border-top-color: var(--on-deep-rule); }

.cycle {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding-top: 2rem; border-top: 1px solid var(--rule);
  font-family: var(--font-ui); font-size: 0.76rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-faint); text-align: center; line-height: 2.2;
}
.sec--deep .cycle { border-top-color: var(--on-deep-rule); color: var(--on-deep-mute); }

/* --------------------------------------------------------------- fee table */

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
.table-wrap:focus-visible { outline-offset: 0; }
.fee { width: 100%; border-collapse: collapse; min-width: 56rem; font-size: 0.88rem; }
.fee th, .fee td { padding: 1.05rem 1.15rem; text-align: left; vertical-align: top; }
.fee thead th {
  background: var(--bg-deep); color: var(--on-deep);
  font-family: var(--font-ui); font-weight: 400; font-size: 0.7rem;
  letter-spacing: 0.13em; text-transform: uppercase; line-height: 1.5;
  position: sticky; top: 0;
}
.fee tbody th { font-family: var(--font-display); font-weight: 500; font-size: 1rem; }
.fee tbody td { color: var(--ink-mute); }
.fee tbody tr + tr th, .fee tbody tr + tr td { border-top: 1px solid var(--rule); }
.fee .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fee tbody tr.is-nio { background: var(--table-hl); }
.fee tbody tr.is-nio th, .fee tbody tr.is-nio td { color: var(--ink); }
.fee tfoot { background: var(--bg-deep); color: var(--on-deep); }
.fee tfoot th, .fee tfoot td { font-family: var(--font-ui); font-size: 0.82rem; letter-spacing: 0.04em; }

/* ------------------------------------------------------- structure diagram */

.stack-dia { display: flex; flex-direction: column; align-items: center; }
.stack-dia__node {
  width: min(100%, 34rem); padding: 1.35rem 1.8rem;
  border-radius: var(--radius); text-align: center;
}
.stack-dia__node--principal, .stack-dia__node--ops { background: var(--bg-deep); color: var(--on-deep); }
.stack-dia__node--nio {
  width: min(100%, 42rem);
  background: var(--dia-nio-bg); color: var(--dia-nio-ink);
  border: 1px solid var(--accent);
}
.stack-dia__k {
  display: block; font-family: var(--font-display); font-style: italic;
  font-size: 1.5rem; margin-bottom: 0.25rem;
}
.stack-dia__t { display: block; font-family: var(--font-display); font-size: 1.06rem; }
.stack-dia__s { display: block; margin-top: 0.3rem; font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.72; }
.stack-dia__link { width: 1px; height: 2rem; background: var(--accent); }
.stack-dia__branch { width: min(100%, 62rem); height: 1px; background: var(--accent); margin-top: 2rem; }
.stack-dia__providers {
  display: grid; gap: 1.2rem; width: 100%; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.stack-dia__providers li {
  position: relative; padding: 2rem 1.2rem 1.6rem; text-align: center;
  background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--radius);
}
.stack-dia__providers li::before {
  content: ""; position: absolute; left: 50%; top: -2rem;
  width: 1px; height: 2rem; background: var(--accent);
}
.stack-dia__ico { display: grid; place-items: center; color: var(--accent-strong); margin-bottom: 1rem; }
.stack-dia__ico .ico { width: 1.5rem; height: 1.5rem; }
.stack-dia__providers .stack-dia__t { font-weight: 500; }
.stack-dia__providers .stack-dia__s { color: var(--ink-faint); opacity: 1; }

/* -------------------------------------------------------------- hub diagram */

.hub { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 68rem) { .hub { grid-template-columns: 32rem 1fr; align-items: center; } }

/* Geometry: the dashed ring sits at radius 38% of the box and each function
   badge is centred on it. Badge half-width (12.5%) must stay clear of the core
   radius (23.5%), or the 3- and 9-o'clock labels run under the core. */
.hub__ring {
  position: relative; aspect-ratio: 1; width: min(100%, 32rem); margin-inline: auto;
  display: grid; place-items: center;
}
.hub__ring::before {
  content: ""; position: absolute; inset: 12%;
  border: 1px dashed var(--accent); border-radius: 50%;
  opacity: 0.55;
}
.hub__core {
  position: relative; z-index: 1;
  display: grid; place-items: center; align-content: center; gap: 0.1rem;
  width: 47%; aspect-ratio: 1; padding: 11%;
  background: var(--bg-deep); color: var(--on-deep);
  border: 1px solid var(--accent); border-radius: 50%;
  text-align: center;
}
.hub__core-k { font-family: var(--font-display); font-size: 1.55rem; line-height: 1; letter-spacing: 0.08em; }
.hub__core-p { font-family: var(--font-display); font-style: italic; font-size: 0.9rem; line-height: 1.3; color: var(--on-deep-accent); }
.hub__core-s {
  font-family: var(--font-ui); font-size: 0.5rem; letter-spacing: 0.12em;
  line-height: 1.4; text-transform: uppercase; color: var(--on-deep-mute); margin-top: 0.5rem;
}

/* Each list item is a full-size layer rotated to its position on the ring; the
   inner span sits on the ring line and is counter-rotated to stay upright. The
   radius is therefore a percentage of the ring and scales with it. */
.hub__fns { position: absolute; inset: 0; }
.hub__fn { position: absolute; inset: 0; transform: rotate(calc(var(--i) * 60deg)); }
/* Set from a class rather than a style attribute — `style-src 'self'` in the
   CSP blocks inline styles, which would leave --i unresolved. */
.hub__fn--0 { --i: 0; } .hub__fn--1 { --i: 1; } .hub__fn--2 { --i: 2; }
.hub__fn--3 { --i: 3; } .hub__fn--4 { --i: 4; } .hub__fn--5 { --i: 5; }
.hub__fn-in {
  position: absolute; top: 12%; left: 50%;
  width: 25%;
  display: grid; justify-items: center; gap: 0.4rem; text-align: center;
  transform: translate(-50%, -50%) rotate(calc(var(--i) * -60deg));
}
.hub__fn-ico {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  background: var(--bg); border: 1px solid var(--accent); border-radius: 50%;
  color: var(--accent-strong);
}
.sec--alt .hub__fn-ico { background: var(--bg-alt); }
.hub__fn-ico .ico { width: 1.05rem; height: 1.05rem; }
.hub__fn-t {
  font-family: var(--font-ui); font-size: 0.54rem; letter-spacing: 0.06em;
  line-height: 1.45; color: var(--ink-mute); text-transform: uppercase;
}

/* Below tablet the radial layout has no room to be legible — lay the six
   functions out as a plain grid beneath the core instead. */
@media (max-width: 47.99rem) {
  .hub__ring { aspect-ratio: auto; display: block; }
  .hub__ring::before { display: none; }
  .hub__core { width: min(100%, 13rem); margin: 0 auto 2.25rem; padding: 12%; }
  .hub__fns { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  .hub__fn { position: static; transform: none; }
  .hub__fn-in { position: static; width: auto; transform: none; }
}

.hub__nodes { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 40rem) { .hub__nodes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .hub__nodes { grid-template-columns: repeat(3, 1fr); } }
.hub__node { display: grid; gap: 0.4rem; padding: 1.5rem 1.4rem; background: var(--bg); }
.sec--alt .hub__node { background: var(--bg-alt); }
.hub__node-ico { color: var(--accent-strong); }
.hub__node-ico .ico { width: 1.25rem; height: 1.25rem; }
.hub__node-t { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; }
.hub__node-p { font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent-strong); }
.hub__node-b { font-size: 0.82rem; line-height: 1.55; color: var(--ink-mute); }

/* ------------------------------------------------------------ case study */

.family {
  display: grid; gap: 1px; margin-bottom: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
}
.family__m { display: grid; place-items: center; gap: 0.35rem; padding: 1.6rem 1rem; background: var(--card-bg); text-align: center; }
.family__ico { color: var(--accent-strong); }
.family__ico .ico { width: 1.35rem; height: 1.35rem; }
.family__l { font-family: var(--font-display); font-weight: 500; font-size: 1rem; }
.family__p { font-family: var(--font-ui); font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-strong); }

.juris { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.juris__col { background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--radius); overflow: hidden; }
.juris__h {
  padding: 1rem 1.3rem; background: var(--bg-deep); color: var(--on-deep);
  font-family: var(--font-display); font-weight: 500; font-size: 1.06rem; text-align: center;
}
.juris__col > ul { display: grid; gap: 0.95rem; padding: 1.4rem 1.3rem 1.7rem; }
.juris__col > ul li { display: flex; gap: 0.8rem; align-items: baseline; font-size: 0.9rem; line-height: 1.5; }
.juris__ico { flex: none; color: var(--accent-strong); transform: translateY(0.2em); }
.juris__ico .ico { width: 1rem; height: 1rem; }

/* ----------------------------------------------------------------- scope */

.scope { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.scope__i { padding: clamp(1.8rem, 3.5vw, 2.6rem) 0; background: var(--bg); }
.sec--alt .scope__i { background: var(--bg-alt); }
.scope__h {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(1.4rem, 2.8vw, 1.9rem); letter-spacing: -0.02em; margin-bottom: 0.9rem;
}
.scope__b { color: var(--ink-mute); max-width: 88ch; }

/* --------------------------------------------------------------- pillars */

.pillars { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.pillar { display: grid; gap: 1.5rem; padding: clamp(2rem, 4vw, 3.2rem); background: var(--bg); }
.sec--alt .pillar { background: var(--bg-alt); }
@media (min-width: 54rem) { .pillar { grid-template-columns: 6rem 1fr; gap: clamp(2rem, 4vw, 3.5rem); } }
.pillar__n {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 0.85; letter-spacing: -0.04em;
  color: var(--display-accent);
}
.pillar__h {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(1.5rem, 3vw, 2.05rem); letter-spacing: -0.022em; margin-bottom: 0.9rem;
}
.pillar__p { color: var(--ink-mute); margin-bottom: 1.8rem; max-width: 70ch; }
.pillar__note {
  margin-top: 1.7rem; padding-top: 1.3rem; border-top: 1px solid var(--rule);
  font-size: 0.83rem; line-height: 1.7; color: var(--ink-faint); max-width: 78ch;
}

.notice { padding: var(--card-pad); background: var(--card-bg); border: 1px solid var(--accent); border-radius: var(--radius); }
.notice__h { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; margin-bottom: 0.9rem; }
.notice p { color: var(--ink-mute); font-size: 0.92rem; max-width: 92ch; }

/* ------------------------------------------------------------------- bio */

/* Single column since the Background panel was removed — the biography keeps a
   comfortable reading measure of its own. */
.bio { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.bio__body { display: grid; gap: 1.5rem; font-size: var(--prose-size); line-height: 1.8; max-width: 62ch; }
.bio__body p { text-wrap: pretty; }
.bio__aside { padding: var(--card-pad); background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--radius); }
.bio__aside-h {
  font-family: var(--font-ui); font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-track); text-transform: uppercase;
  color: var(--accent-strong); margin-bottom: 1.8rem;
}
.creds { display: grid; gap: 1.5rem; }
.creds div { padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); }
.creds div:last-child { padding-bottom: 0; border-bottom: 0; }
.creds dt { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; margin-bottom: 0.4rem; }
.creds dd { margin: 0; font-size: 0.88rem; color: var(--ink-mute); }

/* --------------------------------------------------------------- contact */

.contact { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 60rem) { .contact { grid-template-columns: 1.5fr 1fr; align-items: start; } }

.fields { display: grid; gap: 1.6rem; }
@media (min-width: 40rem) { .fields { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.6rem; }
.field--wide { grid-column: 1 / -1; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field label {
  font-family: var(--font-ui); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
}
.field abbr { color: var(--accent-strong); text-decoration: none; margin-left: 0.35em; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.95rem 1.05rem;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--field-bg); border: 1px solid var(--rule-strong); border-radius: var(--btn-radius);
  transition: border-color .25s ease, background-color .25s ease;
}
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--danger); }

.consent { margin-block: 1.8rem; font-size: 0.8rem; line-height: 1.7; color: var(--ink-faint); max-width: 60ch; }
.form-status { margin-top: 1.2rem; font-size: 0.88rem; line-height: 1.6; color: var(--danger); min-height: 1.2em; }
.form-status a { color: var(--danger); font-weight: 500; text-decoration-thickness: 1px; }
.form-done { text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1rem; border: 1px solid var(--accent); border-radius: var(--radius); }
.form-done[hidden] { display: none; }
.form-done h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.025em; margin-bottom: 0.9rem; }
.form-done p { color: var(--ink-mute); max-width: 40ch; margin-inline: auto; }

.contact__aside { padding: var(--card-pad); background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--radius); }
.contact__aside-h { font-family: var(--font-ui); font-size: var(--eyebrow-size); letter-spacing: var(--eyebrow-track); text-transform: uppercase; color: var(--accent-strong); margin-bottom: 1.5rem; }
.contact__list { display: grid; gap: 0.35rem; margin-bottom: 2rem; font-family: var(--font-display); font-size: 1.12rem; }
/* Keep the target box at least 24px tall (WCAG 2.2 target size, minimum). */
.contact__list a { display: inline-block; padding-block: 0.3rem; }
.contact__note { font-size: 0.8rem; line-height: 1.7; color: var(--ink-faint); margin-top: 1.2rem; }

/* ----------------------------------------------------------------- prose */

.prose { max-width: 72ch; display: grid; gap: clamp(2.2rem, 4vw, 3rem); }
.prose h2 {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -0.02em; margin-bottom: 0.9rem;
}
.prose p { color: var(--ink-mute); font-size: var(--prose-size); line-height: 1.8; text-wrap: pretty; }

/* ------------------------------------------------------------------- cta */

.cta { position: relative; overflow: hidden; padding-block: var(--sec-pad); background: var(--bg-deep); color: var(--on-deep); text-align: center; }
.cta__wash { position: absolute; inset: 0; background: var(--cta-wash); pointer-events: none; }
.cta__inner { position: relative; display: grid; justify-items: center; }
.cta__h { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 20ch; }
.cta__h em { color: var(--on-deep-accent); }
.cta__b { margin-block: 1.6rem 2.8rem; max-width: 52ch; color: var(--on-deep-mute); }
.cta .btn--solid { background: var(--on-deep-accent); border-color: var(--on-deep-accent); color: var(--bg-deep); }
.cta .btn--solid:hover { background: var(--on-deep); border-color: var(--on-deep); }

/* ---------------------------------------------------------------- footer */

.site-foot { background: var(--foot-bg); color: var(--foot-ink); padding-block: clamp(4rem, 8vw, 6.5rem) 3rem; }
.site-foot__top { display: grid; gap: clamp(3rem, 6vw, 5rem); }
@media (min-width: 60rem) { .site-foot__top { grid-template-columns: 1fr 1.5fr; } }
.site-foot .lockup__sub, .site-foot__tag { color: var(--foot-mute); }
.site-foot__tag { margin-top: 1.6rem; font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; }

.foot-cols { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.foot-col__h { font-family: var(--font-ui); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--foot-accent); margin-bottom: 1.3rem; }
.foot-col ul { display: grid; gap: 0.8rem; }
.foot-col a { font-size: 0.92rem; text-decoration: none; color: var(--foot-ink); transition: color .3s ease; }
.foot-col a:hover { color: var(--foot-accent); }

.site-foot__legal { margin-top: clamp(3.5rem, 7vw, 5.5rem); padding-top: 2.5rem; border-top: 1px solid var(--foot-rule); display: grid; gap: 1.6rem; }
.site-foot__legal .disclaimer { color: var(--foot-mute); }
.site-foot__meta { display: grid; gap: 0.4rem; font-size: 0.76rem; color: var(--foot-mute); }

/* ----------------------------------------------------------------- motion */

[data-reveal] { opacity: 0; transform: translateY(18px); }
.js [data-reveal] { transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 71.99rem) {
  .site-nav, .site-head__cta { display: none; }
  .nav-toggle { display: flex; }
  body.nav-open { overflow: hidden; }
}

/* ----------------------------------------------------------------- print */

@media print {
  .site-head, .mobile-nav, .cta, .hero__actions, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sec, .hero { padding-block: 1.5rem; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ------------------------------------------------------------ handover v2.1

   The only CSS added for the two-family content (handover §0.3: no new design).

   1. `.tm` is the superscript trade-mark utility §11.3 explicitly permits.
   2. The rest applies the site's EXISTING type tokens to the element types the
      verbatim legal HTML contains — lists, tables, <strong>, the small-print
      and intro paragraphs. `.prose` previously only ever held <h2> and <p>,
      so without these the pasted blocks render unstyled. No new colours,
      spacing scale or component is introduced: every value below is an
      existing custom property or mirrors an existing rule.                   */

.tm { font-size: .55em; vertical-align: super; line-height: 0; }

.prose > article { display: grid; gap: clamp(2.2rem, 4vw, 3rem); }
.prose h1 {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--h2); letter-spacing: var(--display-track);
  line-height: var(--display-lh); color: var(--ink); margin: 0 0 .4em;
}
.prose h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.3rem; letter-spacing: -0.01em; color: var(--ink);
}
.prose .ticks { padding-left: 0; }
.prose ul, .prose ol { margin: 0; padding-left: 1.4em; display: grid; gap: .9rem; }
.prose li {
  color: var(--ink-mute); font-size: var(--prose-size);
  line-height: 1.8; text-wrap: pretty;
}
.prose strong { color: var(--ink); font-weight: 500; }
.prose a { color: inherit; text-underline-offset: .2em; }
.prose .intro { color: var(--ink); }
.prose .entity, .prose .meta {
  font: var(--ui-font); letter-spacing: var(--ui-track);
  text-transform: uppercase; color: var(--accent-strong);
}
.prose .small-print,
.prose > footer p { font-size: .8125rem; line-height: 1.7; color: var(--ink-faint); }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose caption { text-align: left; color: var(--ink-faint); font-size: .8125rem; padding-bottom: .8rem; }
.prose th, .prose td {
  text-align: left; vertical-align: top; padding: .9rem 1rem .9rem 0;
  border-bottom: 1px solid var(--rule); color: var(--ink-mute);
  line-height: 1.7;
}
.prose thead th { color: var(--ink); font-weight: 500; }
.prose tbody th { color: var(--ink); font-weight: 400; padding-right: 2rem; }

/* The enquirer-type radio group (C-02). It borrows the existing .field label
   treatment so it reads as part of the same form; only the browser's default
   fieldset chrome is reset. */
.field--radio { border: 0; padding: 0; margin: 0; }
.field--radio legend {
  font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); padding: 0; margin-bottom: 0.6rem;
}
.field--radio .opt {
  display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.5rem;
  font-size: var(--body-size); line-height: var(--body-lh);
  color: var(--ink-mute); text-transform: none; letter-spacing: normal;
}
.field--radio input { width: auto; accent-color: var(--accent-strong); }

/* The enquirer-type switch hides the other type's fields with [hidden]. The
   UA's `[hidden] { display: none }` loses to `.field { display: grid }`, so
   the fields stayed visible; this restores the attribute's meaning. */
.fields [hidden] { display: none; }

/* Small print sitting on its own beneath a family page's body (F-06, T-10). */
.small-print { font-size: .8125rem; line-height: 1.7; color: var(--ink-faint); max-width: 100ch; }

/* ------------------------------------------------ the architecture (§5)

   The composition of the architecture sheet (18 Sep 2026), which handover
   §0.3 names as "the one new composition the site needs" and §5 describes
   pattern by pattern: two family columns of three stage cards with gold
   arrows between them, six numbered pillars in two rows of three, and the
   NIOS five-item strip. Built here with the site's existing tokens only, so
   it sits inside the theme's palette rather than beside it.

   .arch is the framed whole (Home). .arch__path is the same stage row laid
   horizontally, used as the path strip at the top of each family page.     */

.arch {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.8rem, 4vw, 3.5rem);
  border: 1px solid var(--rule); border-radius: var(--radius);
}

/* -- the two family columns ------------------------------------------- */
.arch__families { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
@media (min-width: 60rem) { .arch__families { grid-template-columns: 1fr 1fr; } }
.arch__families--one { grid-template-columns: 1fr; max-width: 40rem; margin-inline: auto; }

.arch__family {
  display: flex; flex-direction: column; align-items: stretch;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.arch__family-h {
  font-family: var(--font-ui); font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-track); text-transform: uppercase;
  color: var(--accent-strong); margin-bottom: 1.4rem;
}

.arch__stage {
  display: block; text-align: center; text-decoration: none; color: inherit;
  padding: 1.4rem 1.4rem 1.5rem;
  background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--radius);
  transition: border-color .3s, transform .3s;
}
.arch__stage:hover { border-color: var(--accent); }
.arch__stage:hover { transform: translateY(-2px); }
.arch__stage-name {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: 1.15rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
}
.arch__stage-name .tm { letter-spacing: 0; }
.arch__stage-rule { display: block; width: 2.4rem; height: 1px; margin: 0.7rem auto; background: var(--accent); }
.arch__stage-tag {
  display: block; font-family: var(--font-display); font-style: italic;
  font-size: 1.05rem; color: var(--ink-mute); margin-bottom: 0.45rem;
}
.arch__stage-line { display: block; font-size: 0.9rem; line-height: 1.55; color: var(--ink-mute); }

/* Gold arrow between stages: a hairline and a small chevron. */
.arch__arrow {
  display: grid; place-items: center; height: 2.2rem; color: var(--accent);
}
.arch__arrow::before { content: ""; width: 1px; height: 1.3rem; background: currentColor; }
.arch__arrow::after {
  content: ""; width: 0.45rem; height: 0.45rem; margin-top: -0.35rem;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}

.arch__entry {
  margin-top: 1.4rem; text-align: center;
  font-family: var(--font-display); font-style: italic; font-size: 0.98rem;
  color: var(--ink-mute);
}

/* -- the horizontal path strip (family pages) --------------------------- */
.arch__path {
  display: grid; gap: 0; align-items: stretch;
  grid-template-columns: 1fr;
}
@media (min-width: 54rem) {
  .arch__path { grid-template-columns: 1fr auto 1fr auto 1fr; }
  .arch__path .arch__arrow { height: auto; width: 2.6rem; grid-template-columns: 1fr; }
  .arch__path .arch__arrow::before { width: 1.4rem; height: 1px; }
  .arch__path .arch__arrow::after { margin: 0 0 0 -0.55rem; transform: rotate(-45deg); }
}
.arch__path .arch__stage[aria-current] { border-color: var(--accent); }

/* -- common delivery pillars: six, two rows of three ------------------- */
.arch__label {
  font-family: var(--font-ui); font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-track); text-transform: uppercase;
  color: var(--accent-strong); margin-bottom: 1.2rem;
}
.arch__pillars {
  display: grid; gap: 0; list-style: none; padding: 0; margin: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
@media (min-width: 44rem) { .arch__pillars { grid-template-columns: 1fr 1fr; } }
@media (min-width: 66rem) { .arch__pillars { grid-template-columns: 1fr 1fr 1fr; } }
.arch__pillar {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: center;
  padding: 1.15rem 1.2rem; border-bottom: 1px solid var(--rule);
  color: inherit; text-decoration: none;
}
@media (min-width: 66rem) {
  .arch__pillar:nth-child(n + 4) { border-bottom: 0; }
  .arch__pillar:not(:nth-child(3n)) { border-right: 1px solid var(--rule); }
}
@media (min-width: 44rem) and (max-width: 65.99rem) {
  .arch__pillar:nth-child(n + 5) { border-bottom: 0; }
  .arch__pillar:nth-child(odd) { border-right: 1px solid var(--rule); }
}
@media (max-width: 43.99rem) { .arch__pillar:last-child { border-bottom: 0; } }
.arch__pillar-n {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 2rem; line-height: 1; color: var(--display-accent);
  border-right: 1px solid var(--rule); padding-right: 0.9rem;
}
.arch__pillar-t { font-family: var(--font-display); font-size: 1.08rem; line-height: 1.3; color: var(--ink); }

/* -- underpinned by NIOS: the five-item strip --------------------------- */
.arch__nios {
  padding: 1.4rem clamp(1.2rem, 3vw, 2rem);
  background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--radius);
}
.sec--deep .arch__nios { border-color: var(--on-deep-rule); }
.arch__nios .arch__label { margin-bottom: 0.9rem; }
.arch__nios-items {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 0;
  list-style: none; padding: 0; margin: 0;
}
.arch__nios-items li {
  padding: 0.2rem 1.4rem; font-family: var(--font-display); font-size: 1.05rem;
  color: var(--ink); border-left: 1px solid var(--accent);
}
.arch__nios-items li:first-child { border-left: 0; }
.sec--deep .arch__nios-items li { color: var(--on-deep); }
.sec--deep .arch__label, .sec--deep .arch__family-h { color: var(--on-deep-accent); }

.arch__line {
  text-align: center; font-family: var(--font-display); font-style: italic;
  font-size: 1.05rem; color: var(--ink-mute);
}

/* -- running copy (Piers's stage copy) ---------------------------------- */
/* .prose spaces its children as separate legal sections; running paragraphs
   want a paragraph gap, and a heading wants air above it, not below. */
.stage-body { display: grid; gap: clamp(2.2rem, 4vw, 3.2rem); }
.stage-body .pull { margin: 0; }
.prose--flow { gap: 1.15rem; }
.prose--flow h3 { margin-bottom: 0.3rem; }
.prose--flow .ticks { margin-block: 0.4rem; }
.prose--flow .footnote { margin-top: 0.8rem; }

/* -- stage sections on the family pages -------------------------------- */
.stage-head { display: grid; gap: 0.6rem; max-width: var(--head-w); margin-bottom: var(--head-gap); }
.stage-head .eyebrow { margin-bottom: 0.6rem; }
.stage-head__tag {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem); color: var(--display-accent); line-height: 1.25;
}

/* ------------------------------------------------- wording-pass refinements */

/* The Home statement (H-01): a declaration, not a quotation — no quote mark. */
.statement { max-width: 62ch; margin-inline: auto; text-align: center; }
.statement .arch__stage-rule { margin: 0 auto 1.6rem; }
.statement__h {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--quote-size); line-height: 1.28; letter-spacing: -0.018em;
  color: var(--ink); text-wrap: balance;
}
.statement__sub {
  margin-top: 1.4rem; font-family: var(--font-display); font-style: italic;
  font-size: 1.15rem; color: var(--ink-mute); text-wrap: pretty;
}
.statement__sub--tight { text-align: center; max-width: 52ch; margin: 2.6rem auto 0; }

/* Attribution for first-person copy (§6.2), in the pull-quote caption style. */
.byline {
  display: block; margin-top: 1.6rem;
  font-family: var(--font-ui); font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-track); text-transform: uppercase;
  color: var(--accent-strong);
}
.standfirst .byline { margin-top: 1.4rem; }

/* A stage's closing call to action: sentence plus the family's button. */
.notice--cta { display: grid; gap: 1.4rem; justify-items: start; }
.notice__lead {
  font-family: var(--font-display); font-size: 1.3rem; line-height: 1.4;
  color: var(--ink); max-width: 46ch;
}
.notice--cta .btn { margin: 0; white-space: normal; text-align: center; max-width: 100%; }
.notice--cta > * { min-width: 0; }

/* Path-strip arrows must sit on one row: hairline then chevron, side by side. */
@media (min-width: 54rem) {
  .arch__path .arch__arrow { grid-auto-flow: column; align-items: center; justify-content: center; gap: 0; }
  .arch__path .arch__arrow::after { margin: 0 0 0 -0.5rem; }
}

/* Lists inside running copy take the running-copy size. */
.prose--flow .ticks li { font-size: var(--prose-size); line-height: 1.7; }

/* Paragraphs in a split body were butting together. */
.split__body p + p { margin-top: 1.1rem; }

/* Six steps: two rows of three, never 5 + 1. */
@media (min-width: 66rem) { .steps.steps--6 { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------ principles */
/* Seven short lines as a manifesto strip: display face, centred, hairlines. */
.principles { text-align: center; max-width: 68rem; margin-inline: auto; }
.principles .eyebrow { margin-bottom: 2.2rem; }
.principles__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem 0;
}
.principles__list li {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--ink); padding: 0.1rem 1.6rem;
  border-left: 1px solid var(--accent);
}
.principles__list li:first-child { border-left: 0; }
@media (max-width: 43.99rem) {
  .principles__list { flex-direction: column; gap: 1.1rem; }
  .principles__list li { border-left: 0; padding: 0; }
}

/* ---------------------------------------------------------------- mission */
/* The mission statement page as a band. Deep ground,
   right, the four questions in italic, the "exists" line against a gold bar,
   three columns with gold rules between, independence, the entry line. */
.mission { position: relative; overflow: hidden; }
.mission .eyebrow { color: var(--on-deep-accent); }
.mission__q {
  font-family: var(--font-display); font-weight: var(--display-weight); font-style: italic;
  font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.12; letter-spacing: var(--display-track);
  color: var(--on-deep); max-width: 22ch; margin-top: 0.4rem;
}
.mission__body { margin-top: 2rem; max-width: 62ch; font-size: var(--standfirst-size); line-height: 1.6; color: var(--on-deep-mute); }
.mission__exists {
  margin-top: 2.4rem; padding-left: 1.4rem; border-left: 2px solid var(--on-deep-accent);
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--on-deep);
}
.mission__stages {
  display: grid; gap: 0; margin-top: clamp(3rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 54rem) { .mission__stages { grid-template-columns: repeat(3, 1fr); } }
.mission__stage { padding: 0 clamp(1.4rem, 2.5vw, 2.4rem) 1.4rem; border-left: 1px solid var(--on-deep-rule); }
.mission__stage:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 53.99rem) {
  .mission__stage { border-left: 0; padding: 1.6rem 0; border-top: 1px solid var(--on-deep-rule); }
  .mission__stage:first-child { border-top: 0; }
}
.mission__stage-name {
  font-family: var(--font-ui); font-size: var(--eyebrow-size); letter-spacing: var(--eyebrow-track);
  text-transform: uppercase; color: var(--on-deep-accent); font-weight: 500;
}
.mission__stage-tag {
  margin-top: 0.9rem; font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--on-deep);
}
.mission__stage-body { margin-top: 0.9rem; font-size: 0.98rem; line-height: 1.7; color: var(--on-deep-mute); max-width: 32ch; }
.mission__stage .link-arrow { color: var(--on-deep-accent); padding-top: 1.2rem; }
.mission__independence { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--on-deep-rule); }
.mission__ind-line { margin-top: 0.6rem; color: var(--on-deep-mute); font-size: var(--body-size); }
.mission__ind-display {
  margin-top: 0.6rem; font-family: var(--font-display); font-style: italic; font-weight: var(--display-weight);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.2; color: var(--on-deep);
}
.mission__entry { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--on-deep-rule); width: fit-content; color: var(--on-deep-mute); }

.hero { position: relative; overflow: hidden; }
.hero__mark {
  position: absolute; top: clamp(1rem, 3vw, 2.5rem); right: clamp(0.5rem, 3vw, 3rem);
  width: clamp(9rem, 22vw, 20rem); height: clamp(9rem, 22vw, 20rem);
  color: var(--accent); opacity: 0.16; pointer-events: none;
}
.hero__inner { position: relative; }

/* ---------------------------------------------------------------- services */
/* The six services on /how-we-work: one card per service. */
.services { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
@media (min-width: 60rem) { .services { grid-template-columns: repeat(3, 1fr); } }
.service {
  display: flex; flex-direction: column; padding: var(--card-pad);
  background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--radius);
}
.service__name {
  font-family: var(--font-display); font-weight: 500; font-size: 1.15rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.service__name .tm { letter-spacing: 0; }
.service__tag { margin-top: 0.8rem; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--display-accent); }
.service__line { margin: 0.6rem 0 1.4rem; color: var(--ink-mute); font-size: 0.95rem; line-height: 1.6; }
.service .ticks { margin-bottom: 0.6rem; }
.service .link-arrow { margin-top: auto; }

.site-foot { position: relative; overflow: hidden; }
.site-foot > .shell { position: relative; }

/* ======================================================================
   Independent Wealth Intelligence (19 Sep 2026) — the manifesto patterns
   ====================================================================== */

/* Short lines set one beneath another in the display face. */
.litany { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.litany li {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink);
}
.litany--lg li { font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.1; }
.litany--body li { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.35; }
.litany--questions li { font-style: italic; color: var(--on-deep-accent); font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.sec--deep .litany li { color: var(--on-deep); }
.split__lead .litany, .split__body .litany { margin-top: 1.4rem; }
.split__lead .lead-line + .litany { margin-top: 1.2rem; }
.split__body .litany + .build { margin-top: 1.6rem; }

/* Short items in one row, separated by gold hairlines. */
.row-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem 0;
}
.row-list li {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.25; color: var(--ink);
  padding: 0.1rem 1.4rem; border-left: 1px solid var(--accent);
}
.row-list li:first-child { border-left: 0; }
.row-list--wrap { justify-content: flex-start; margin-top: 1.6rem; }
.row-list--wrap li { padding: 0.05rem 1rem; font-size: clamp(1.1rem, 1.7vw, 1.35rem); }
.row-list--wrap li:first-child { padding-left: 0; }
.row-list--body { justify-content: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.row-list--caps li { font-family: var(--font-ui); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-strong); }
.row-list--quiet li { font-size: clamp(1.1rem, 1.7vw, 1.35rem); color: var(--ink-mute); font-style: italic; }
.row-list--quiet { margin-bottom: 1.8rem; }
@media (max-width: 43.99rem) {
  .row-list { flex-direction: column; gap: 0.5rem; align-items: center; }
  .row-list li { border-left: 0; padding: 0; }
  .row-list--wrap { align-items: flex-start; }
}

/* Two or three sentences that build to a point; the last in gold italic. */
.build { max-width: 40ch; font-size: var(--prose-size); line-height: 1.65; margin-top: 1.6rem; }
.build span { display: block; }
.build em {
  display: block; margin-top: 0.35rem;
  font-family: var(--font-display); font-style: italic; font-weight: var(--display-weight);
  font-size: 1.35em; line-height: 1.3; color: var(--display-accent);
}
.sec--deep .build em { color: var(--on-deep-accent); }
.build--display { max-width: none; text-align: center; margin: clamp(3rem, 6vw, 5rem) auto 0; }
.build--display span { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.3; }
.build--display em { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-top: 0.4rem; }

/* One weighted line, the point of a column. */
.lead-line {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink);
}
.lead-line--accent { font-style: italic; color: var(--display-accent); }
.lead-line--after { text-align: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
.sec--deep .lead-line { color: var(--on-deep); }
.split__body p + .lead-line, .split__body .ticks + .lead-line { margin-top: 1.6rem; }
.split__lead .lead-line + p { margin-top: 1.4rem; }
.split__body .ticks + .build, .split__body p + .build { margin-top: 1.6rem; }
.split__body .ticks + p { margin-top: 1.6rem; }
.split--late { margin-top: clamp(2.5rem, 5vw, 4rem); }
.question { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.3; color: var(--display-accent); margin-top: 0.6rem; }

/* Long lists split in two. */
.ticks--2 { grid-template-columns: 1fr; }
@media (min-width: 44rem) { .ticks--2 { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }

/* A → B → C in small caps joined by gold arrows. */
.flow { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.8rem; }
.flow li {
  font-family: var(--font-ui); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-strong);
  display: flex; align-items: center; gap: 0.8rem;
}
.flow li + li::before { content: ""; width: 1.6rem; height: 1px; background: var(--accent); flex: none; }
.sec--alt .flow li, .sec--alt .row-list--caps li { color: var(--accent-strong); }

/* The intelligence gap, on the deep ground. */
.gap__between { color: var(--on-deep-mute); font-style: italic; }
.gap__exists {
  margin-top: 2rem; padding-left: 1.2rem; border-left: 2px solid var(--on-deep-accent);
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.25; color: var(--on-deep);
}

/* The category: brings together — four words — to create … */
.category { text-align: center; max-width: 60ch; margin: 0 auto; }
.category__brings, .category__to { color: var(--ink-mute); font-style: italic; }
.category .row-list { margin: 1.2rem 0; }

/* Application cards on Home (the service card pattern). */
.service__strip { margin: 0.2rem 0 1.2rem; font-family: var(--font-ui); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-strong); }
.services .service__tag { margin-top: 0; margin-bottom: 1.2rem; }

/* Statement across the full measure. */
.statement--wide { max-width: 72ch; margin-top: clamp(3rem, 6vw, 5rem); }

/* Stage heading: the name, then its tagline. */
.stage-head__name { letter-spacing: 0.06em; }
.stage-close {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 1px solid var(--rule);
  display: grid; gap: 0.4rem; text-align: center;
}
.stage-close__name { font-family: var(--font-ui); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-strong); }
.stage-close em { font-family: var(--font-display); font-style: italic; font-weight: var(--display-weight); font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.25; color: var(--display-accent); }

/* "You receive" callout. */
.receive { margin-top: 2rem; padding: var(--card-pad); background: var(--card-bg); border: 1px solid var(--accent); border-radius: var(--radius); }
.receive__h { font-family: var(--font-ui); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 0.7rem; }
.receive p { font-size: var(--prose-size); line-height: 1.65; }
.sec--alt .receive { background: var(--bg); }

/* Small print on the application pages. */
.small-print { font-size: 0.86rem; line-height: 1.6; color: var(--ink-mute); max-width: 92ch; }

/* The NIO band. */
.cta--nio .cta__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 5vw, 3.6rem); letter-spacing: 0.22em; line-height: 1; color: var(--on-deep); margin-bottom: 1rem; }
.cta--nio .eyebrow { color: var(--on-deep-accent); margin-bottom: 1.6rem; }
.cta--nio .cta__h { max-width: 26ch; margin-bottom: 2.4rem; }
.cta--nio .cta__mark { margin-bottom: 1.6rem; }

/* Four standard cards in one row on wide screens. */
.cards--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
@media (min-width: 62rem) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }
.cards--4 .card__h { letter-spacing: 0.08em; }

/* Three application cards side by side. */
@media (min-width: 62rem) { .services--3 { grid-template-columns: repeat(3, 1fr); } .services--2 { grid-template-columns: repeat(2, 1fr); } }

.site-foot__sep { color: var(--on-deep-accent); padding-inline: 0.4rem; }
.split__body .build + .ticks, .split__body .build + p { margin-top: 1.6rem; }
.split__lead .litany + .build { margin-top: 1.6rem; }
.flow { gap: 0.5rem 0.6rem; }
.flow li { font-size: 0.78rem; letter-spacing: 0.14em; gap: 0.6rem; }
.flow li + li::before { width: 1.2rem; }
.flow + p, .split__lead .flow + p { margin-top: 1.6rem; }
.split__body .compare__h:not(:first-child), .split__body .ticks + .compare__h, .split__body .litany + .compare__h { margin-top: 2rem; }

/* ======================================================================
   Design pass (19 Sep, evening)
   ====================================================================== */

/* Hero: text left. */
.hero__inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.hero__text { max-width: 44rem; }
@media (min-width: 62rem) {
  .hero__inner { grid-template-columns: minmax(0, 1.3fr) minmax(15rem, .7fr); gap: clamp(2rem, 5vw, 6rem); }
}
@media (max-width: 61.99rem) {
}
.hero__mark { display: none; }
.litany--hero { margin-top: 1.4rem; gap: 0.15rem; }
.litany--hero li { font-size: clamp(1.35rem, 2.3vw, 1.85rem); color: var(--ink-mute); line-height: 1.25; }
.hero .hero__actions { margin-top: 2.6rem; }

.sec--deep .sec-head__mark { color: var(--on-deep-accent); }

/* Our Principles as a ruled band. */
.sec--principles { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sec--principles + .sec { border-top: 0; }

.receive__h { display: flex; align-items: center; gap: 0.6rem; }

/* The lead column: a lead line followed by a build. */
.split__lead .lead-line + .build { margin-top: 1.6rem; }
/* Stage sections sit closer to their dividers. */
.sec--stage { padding-block: calc(var(--sec-pad) * 0.7); }

/* ======================================================================
   Clarity pass — a centred hero; calmer rhythm
   ====================================================================== */
.hero__inner { display: block; }
.hero__text { max-width: 54rem; margin-inline: auto; text-align: center; }
.hero__text .display { margin-inline: auto; max-width: 18ch; }
.hero__text .standfirst { margin-inline: auto; max-width: 48ch; }
.hero__glyph { width: 2.6rem; height: 2.6rem; color: var(--accent); margin: 0 auto 1.6rem; }
.hero .hero__actions { justify-content: center; margin-top: 2.4rem; }
.hero__wash { inset: -30% -10% auto; }
/* The four hero lines read as one sentence-run beneath the standfirst. */
.litany--hero { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.1rem 0.55em; margin-top: 1rem; }
.litany--hero li { font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-style: italic; color: var(--display-accent); line-height: 1.4; }

/* Fewer competing treatments: the build's closing line sits in ink, one step up. */
.build em { font-size: 1.22em; color: var(--ink); }
.sec--deep .build em { color: var(--on-deep); }
.build--display em { color: var(--display-accent); font-size: clamp(1.9rem, 4vw, 3rem); }

/* Measure: body text never runs wider than it can be read comfortably. */
.split__body p:not([class]), .split__lead p:not([class]), .split__lead .standfirst { max-width: 58ch; }
.split__body .ticks li span { max-width: 56ch; }

/* The hero wash is one soft centred glow, never a visible edge. */
.hero__wash { inset: -20% -20% auto; height: 150%; }
/* The perimeter notice: link inline with its sentence. */
.disclaimer .link-arrow { display: inline-flex; margin: 0 0 0 0.5rem; padding-top: 0; vertical-align: baseline; }

/* ======================================================================
   Clarity pass II — nothing hidden, nothing stray, readable sizes
   ====================================================================== */
[data-reveal], .js [data-reveal] { opacity: 1; transform: none; transition: none; }

/* Lists and body copy one step larger; the site is read, not scanned. */
.ticks li { font-size: 1.02rem; line-height: 1.6; }
.split__body p:not([class]), .split__lead p:not([class]) { font-size: var(--prose-size); line-height: 1.7; }
.split__lead .standfirst { margin-bottom: 0; }
.split__lead .standfirst + .build { margin-top: 1.6rem; }

/* Stacked lines are followed by a clear pause. */
.litany + p, .litany + .build, .litany + .ticks, .litany + .flow { margin-top: 1.6rem; }
.split__body p + .ticks, .split__body p + .flow { margin-top: 1.2rem; }
.split__body .compare__h + .litany { margin-top: 0; }

/* Path strip and stage heads sit a little tighter. */
.stage-head { margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.stage-head__tag { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

/* Statement blocks and closing lines get a consistent top margin. */
.statement--wide { margin-top: clamp(2.5rem, 5vw, 4rem); }
.build--display { margin-top: clamp(2.5rem, 5vw, 4rem); }
.lead-line--after { margin-top: clamp(2rem, 4vw, 3rem); }

/* ======================================================================
   One column, one measure — the manifesto pages read as a typeset document
   ====================================================================== */
.column { max-width: 62ch; margin-inline: auto; text-align: center; }
.column > * + * { margin-top: clamp(1.4rem, 2.4vw, 1.9rem); }
.column > .litany + .litany { margin-top: 1rem; }
.column p:not([class]) { margin-inline: auto; max-width: 58ch; font-size: var(--prose-size); line-height: 1.7; }
.column .build { max-width: none; margin-inline: auto; }
.column .build em { display: block; }
.column .lead-line { max-width: 34ch; margin-inline: auto; }
.column .litany { text-align: center; }
.column .row-list { justify-content: center; margin-top: clamp(1.4rem, 2.4vw, 1.9rem); }
.column .row-list li:first-child { padding-left: 1.1rem; }
.column .row-list li { font-size: clamp(1.1rem, 1.7vw, 1.32rem); padding: 0.05rem 1.1rem; }
.column .quiet { font-style: italic; color: var(--ink-mute); }
.sec--deep .column .quiet { color: var(--on-deep-mute); }
.column--late { margin-top: clamp(2.5rem, 5vw, 4rem); }
.column--stage { text-align: left; }
.column--stage .lead-line, .column--stage p { margin-inline: 0; }
.column--stage .litany { text-align: left; }
.column--stage .receive { text-align: left; }
.column .receive { text-align: left; }

/* Centred section heads: the rule and its diamond sit on the axis. */
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center::before { left: 50%; right: auto; width: 7rem; transform: translateX(-50%); background: var(--accent); }
.sec-head--center::after { left: calc(50% - 3.5px); }
.sec-head--center .sec-head__intro { margin-inline: auto; }
.stage-head--center { margin-inline: auto; text-align: center; }

/* The display build sits on the same axis with a little more air. */
.build--display { margin-top: clamp(2.6rem, 5vw, 4.4rem); }

/* Statement block after the centred column. */
.statement--wide { margin-top: clamp(2.6rem, 5vw, 4.4rem); }

/* Stage split: the lead column now carries the receive box; even the gutters. */
@media (min-width: 62rem) { .sec--stage .split { grid-template-columns: 1fr 1fr; } }
.split__lead .receive { margin-top: 2rem; }

/* Application cards: centred content to match the page. */
.service { text-align: center; align-items: center; }
.service .link-arrow { justify-content: center; }
.service__line { max-width: 28ch; }

/* Standard cards centred too. */
.cards--4 .card { text-align: center; }
.litany--quiet li { font-style: italic; color: var(--ink-mute); font-size: clamp(1.1rem, 1.7vw, 1.3rem); }
.column .row-list--caps li { font-size: 0.8rem; padding: 0 0.95rem; }

/* ======================================================================
   The block system (19 Sep, late) — one layout for every section
   ====================================================================== */
.block { display: grid; grid-template-columns: 1fr; gap: 1.8rem; }
@media (min-width: 62rem) {
  .block { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
}
.block__head { text-align: left; }
.block__head .eyebrow { margin-bottom: 1rem; }
.block__title {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.08; letter-spacing: -0.015em; color: var(--ink);
  max-width: 14ch;
}
.sec--stage .block__title { letter-spacing: 0.06em; font-size: clamp(2.1rem, 3.8vw, 3rem); }
.sec--intro .block__title { font-family: var(--font-ui); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-strong); padding-top: 0.5rem; }
.sec--deep .block__title { color: var(--on-deep); }

.block__body { max-width: 62ch; text-align: left; }
.block__body > * + * { margin-top: 1.25rem; }
.block__body > p:not([class]) { font-size: var(--prose-size); line-height: 1.7; }
.block__body > .rows, .block__body > .defrows, .block__body > .apps, .block__body > .arch__path { margin-top: 2rem; margin-bottom: 2rem; }
.block__body > .link-arrow { margin-top: 1.6rem; }

/* One step up: the sentence that carries the section. */
.lead {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink);
}
.sec--deep .lead { color: var(--on-deep); }
.block__body > .lead + .lead { margin-top: 0.6rem; }

/* Set apart: a question or line in the display face, gold. */
.pull-line {
  font-family: var(--font-display); font-style: italic; font-weight: var(--display-weight);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.25; color: var(--display-accent);
  padding-left: 1.1rem; border-left: 2px solid var(--accent);
}
.sec--deep .pull-line { color: var(--on-deep-accent); border-left-color: var(--on-deep-accent); }

/* Closing lines: the last one in the display face. */
.close-lines p { font-size: var(--prose-size); line-height: 1.7; }
.close-lines p + p { margin-top: 0.35rem; }
.close-lines__last {
  font-family: var(--font-display) !important; font-weight: var(--display-weight);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem) !important; line-height: 1.3 !important; color: var(--ink); margin-top: 0.6rem !important;
}
.sec--deep .close-lines__last { color: var(--on-deep); }

/* Ruled rows. */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.rows li { padding: 0.95rem 0; border-bottom: 1px solid var(--rule); font-size: var(--prose-size); line-height: 1.6; }
.rows--questions li { font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.35; color: var(--ink); }
.sec--deep .rows, .sec--deep .rows li { border-color: var(--on-deep-rule); }
.sec--deep .rows--questions li { color: var(--on-deep); }

/* Ruled rows with a term. */
.defrows { margin: 0; border-top: 1px solid var(--rule); }
.defrows__row { display: grid; grid-template-columns: 1fr; gap: 0.35rem 2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 44rem) { .defrows__row { grid-template-columns: minmax(0, 15rem) 1fr; } }
.defrows dt { margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.defrows dd { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--ink-mute); }
.defrows__name { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; line-height: 1.3; color: var(--ink); }
.defrows__code { font-family: var(--font-ui); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.18em; color: var(--accent-strong); }

/* The process strip as a line of small caps. */
.strip { font-family: var(--font-ui); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-strong); }

/* You receive: a ruled note, not a box. */
.receive {
  padding: 1.1rem 0 1.1rem 1.2rem; border-left: 2px solid var(--accent);
  font-size: var(--prose-size); line-height: 1.65; background: none; border-top: 0; border-right: 0; border-bottom: 0; border-radius: 0;
}
.sub { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; margin-top: 2rem !important; }

/* The two applications: two ruled cards. */
.apps { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 44rem) { .apps { grid-template-columns: 1fr 1fr; } }
.app {
  display: flex; flex-direction: column; gap: 0.6rem; padding: var(--card-pad);
  background: var(--card-bg); border: 1px solid var(--card-line); text-decoration: none; color: inherit;
  transition: border-color .3s ease;
}
.app:hover { border-color: var(--accent); }
.app__name { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.app__aud { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--display-accent); }
.app__for { font-size: 0.98rem; line-height: 1.6; color: var(--ink-mute); }
.app__strip { font-family: var(--font-ui); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-strong); margin-top: 0.4rem; }
.app .link-arrow { margin-top: auto; padding-top: 1.4rem; }

/* Hero: left axis like everything else. */
.hero__text { text-align: left; margin-inline: 0; max-width: 60rem; }
.hero__text .display { margin-inline: 0; max-width: 16ch; }
.hero__text .standfirst { margin-inline: 0; max-width: 60ch; }
.hero__glyph { margin: 0 0 1.6rem; }
.hero .hero__actions { justify-content: flex-start; }

/* Path strip inside the intro block. */
.block__body .arch__path { grid-auto-flow: row; grid-template-columns: 1fr; gap: 0.6rem; }
@media (min-width: 44rem) { .block__body .arch__path { grid-auto-flow: column; grid-template-columns: 1fr auto 1fr auto 1fr; } }
.block__body .arch__stage { padding: 1rem 0.8rem; }
.block__body .arch__stage-name { font-size: 0.9rem; }
.block__body .arch__stage-rule { display: none; }

/* Section rhythm: a little tighter with the two-column blocks. */
.sec--stage { padding-block: calc(var(--sec-pad) * 0.8); }

/* ======================================================================
   The document (19 Sep, late) — one page, the block system throughout
   ====================================================================== */
.block__sub { margin-top: 0.9rem; font-family: var(--font-ui); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-strong); }
.sec--app .block__title { letter-spacing: 0.08em; }
.sec--stage .block__title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: 0.1em; }
.sec--stage { padding-block: calc(var(--sec-pad) * 0.55); }
.sec--app { padding-bottom: calc(var(--sec-pad) * 0.4); }
.sec--app + .sec--stage { padding-top: calc(var(--sec-pad) * 0.2); }
.sec--small-print { padding-top: 0; }
.sec--small-print .small-print { margin-left: 0; }
@media (min-width: 62rem) { .sec--small-print .small-print { margin-left: calc(4 / 11 * 100% + clamp(3rem, 6vw, 6rem) * 4 / 11); max-width: 62ch; } }
.rows--links a { text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--accent); }
.rows--links a:hover { color: var(--accent-strong); }
.sec--principles { display: none; }
.hero .display { max-width: 18ch; }
.block__body > .receive { margin-top: 1.6rem; margin-bottom: 1.6rem; }
.block__body > .lead, .block__body > .pull-line, .block__body > .receive { font-size: revert-layer; }
.block__body > .lead { font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.3; }
.block__body > .pull-line { font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.25; }
.receive, .sec--alt .receive, .sec--deep .receive { background: transparent; }
.block__title { max-width: 16ch; }
.rows--principles li { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.35; color: var(--ink); padding: 0.8rem 0; }
.cta--nio .cta__eyebrow { margin-bottom: 2.2rem; }
.cta--nio .cta__name { margin-bottom: 1.2rem; }
/* Our Principles: a ruled two-column grid of ten. */
.rows--principles { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
@media (min-width: 44rem) {
  .rows--principles { grid-template-columns: 1fr 1fr; column-gap: 0; }
  .rows--principles li:nth-child(odd) { padding-right: 1.6rem; border-right: 1px solid var(--rule); }
  .rows--principles li:nth-child(even) { padding-left: 1.6rem; }
}
.rows--principles li { font-size: clamp(1.15rem, 1.7vw, 1.35rem); padding: 1rem 0; min-height: 4.6rem; display: flex; align-items: center; }
/* Our Principles: bullets across the whole width of the page. */
.principles-h { max-width: none; margin-bottom: clamp(2rem, 4vw, 3rem); }
.bullets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1.1rem 2.5rem; }
@media (min-width: 44rem) { .bullets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .bullets { grid-template-columns: repeat(5, 1fr); gap: 1.6rem 2.2rem; } }
.bullets li {
  position: relative; padding-left: 1.3rem;
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(1.15rem, 1.6vw, 1.3rem); line-height: 1.35; color: var(--ink);
}
.bullets li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg);
}
.sec--principles-grid { padding-block: calc(var(--sec-pad) * 0.75); }

/* ======================================================================
   Flow pass (20 Sep) — numbered chapters, a framework grid, tighter rhythm
   ====================================================================== */
.block__num {
  font-family: var(--font-ui); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.22em; color: var(--accent-strong);
  margin-bottom: 1rem; padding-bottom: 0.9rem; position: relative; max-width: 16ch;
}
.block__num::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.2rem; height: 1px; background: var(--accent); }
.sec--deep .block__num { color: var(--on-deep-accent); }
.sec--deep .block__num::after { background: var(--on-deep-accent); }
.block__head .block__num + .eyebrow { margin-top: 0.2rem; }

/* The sections are not numbered (28 Sep). The hairline that sat under the
   number stays: it is what gives the title column its top edge. */
.block__rule {
  display: block; width: 2.2rem; height: 1px; background: var(--accent);
  margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
}
.sec--deep .block__rule { background: var(--on-deep-accent); }

/* Stages: a smaller lead, a hairline between consecutive stages. */
.sec--stage .lead, .sec--stage .block__body > .lead { font-size: clamp(1.25rem, 1.8vw, 1.45rem); line-height: 1.35; }
.sec--stage + .sec--stage .block { border-top: 1px solid var(--rule); padding-top: calc(var(--sec-pad) * 0.55); }
.sec--stage { padding-block: 0 calc(var(--sec-pad) * 0.55); }
.sec--app + .sec--stage .block { border-top: 1px solid var(--rule); padding-top: calc(var(--sec-pad) * 0.55); }
.sec--stage .block__title { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.sec--stage .block__head .eyebrow { margin-bottom: 0.7rem; }

/* The framework: title and lead in the block grid, then six pillars across the page. */
.block--open .block__body > .lead { margin-top: 0.3rem; }
.block--after { margin-top: clamp(2rem, 4vw, 3rem); }
.pillars {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule);
}
@media (min-width: 44rem) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { padding: 1.6rem 1.6rem 1.8rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 44rem) { .pillar { padding-right: 2.2rem; } }
.pillar__n { display: block; font-family: var(--font-ui); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.22em; color: var(--accent-strong); margin-bottom: 0.9rem; }
.pillar__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 1.6vw, 1.32rem); line-height: 1.3; color: var(--ink); margin-bottom: 0.6rem; max-width: 18ch; }
.pillar__body { font-size: 0.98rem; line-height: 1.65; color: var(--ink-mute); max-width: 34ch; }

/* Principles: the number sits above the title like every chapter. */
.sec--principles-grid .block__num { margin-bottom: 1rem; }
.principles-h { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }

/* Hero: a touch less air now the page has more structure. */
.hero { padding-block: clamp(4rem, 9vw, 7.5rem); }
.hero .hero__actions { margin-top: 2.2rem; }
/* The framework grid wins over the older pillar card rules. */
.pillars .pillar { display: block; background: transparent; gap: 0; grid-template-columns: none; padding: 1.6rem 2.2rem 1.8rem 0; }
.pillars .pillar__n { font-family: var(--font-ui); font-weight: 500; font-size: 0.72rem; line-height: 1; letter-spacing: 0.22em; color: var(--accent-strong); }

/* ======================================================================
   Branding pass (20 Sep) — alignment tidied
   ====================================================================== */

.hero__glyph { display: none; }

/* Chapter numbers carry the mark. */
.block__num { display: flex; align-items: center; gap: 0.6rem; }
.block__num::after { display: none; }
.block__num { padding-bottom: 0; margin-bottom: 1.1rem; }

/* You receive: the mark sits inside the ruled note. */
.receive { display: grid; grid-template-columns: 1rem 1fr; gap: 0.75rem; align-items: start; }

/* Closing band. */
.cta--nio .cta__mark { display: none; }

/* Alignment: titles wrap on their own terms; the principles grid keeps even columns. */
.block__title { max-width: 12ch; text-wrap: balance; }
.sec--app .block__title, .sec--stage .block__title { max-width: none; }
.principles-h { max-width: none; }
.bullets { align-items: start; }
.bullets li { text-wrap: pretty; }
@media (min-width: 62rem) { .bullets { gap: 1.8rem 2.6rem; } }
.block__head .eyebrow { max-width: 22ch; }
/* Section numbers, eyebrows and titles share one left edge with the body's first line. */
.block__head .block__num + .block__title { margin-top: 0; }
.block__title { max-width: 16ch; }
.block__head .eyebrow { max-width: 30ch; }

/* ======================================================================
   Formatting pass (20 Sep) — legal prose on the body column; hero measures
   ====================================================================== */
/* Legal pages: the verbatim prose sits on the document's body column, not a stranded left column. */
.prose { max-width: 62ch; }
@media (min-width: 62rem) { .prose { margin-left: calc(4 / 11 * 100% + clamp(3rem, 6vw, 6rem) * 4 / 11); } }
.prose h2 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); letter-spacing: 0.08em; max-width: none; }
.prose > article, .prose { gap: clamp(1.8rem, 3vw, 2.4rem); }
.prose .intro { font-size: var(--prose-size); }

/* Hero titles wrap at a comfortable measure. */
.hero__text .display { max-width: 20ch; text-wrap: balance; }

/* Contact: aside aligns with the first field; consent runs the full width. */
.contact { align-items: start; }
@media (min-width: 62rem) { .contact { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.contact__aside { margin-top: 0; }
.consent label { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; max-width: 60ch; }
.footnote { max-width: 60ch; }
.consent label { display: block; position: relative; padding-left: 1.8rem; max-width: 60ch; line-height: 1.6; }
.consent label input { position: absolute; left: 0; top: 0.3em; margin: 0; }
/* Our Principles at the very top: a compact band between the header and the hero. */
.sec--principles-top { padding-block: clamp(2.2rem, 4vw, 3.2rem); border-bottom: 1px solid var(--rule); }
.sec--principles-top .principles-h { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-bottom: clamp(1.2rem, 2vw, 1.6rem); }
.sec--principles-top .bullets li { font-size: clamp(1.05rem, 1.4vw, 1.15rem); }
.sec--principles-top + .hero { padding-top: clamp(3rem, 7vw, 6rem); }
/* Multi-page: the principles band sits under the framework hero. */
.sec--principles-top { border-bottom: 0; }
.hero + .sec--principles-grid { padding-block: clamp(2.6rem, 5vw, 4rem); }
.hero__text .eyebrow { max-width: none; }

/* ======================================================================
   Clarity pass (20 Sep) — the application names carry; client types follow
   ====================================================================== */
/* Application hero: NIO PRIVATE / NIO FIDUCIARY in ink, the audience beneath in gold. */
.hero__text .eyebrow__name { display: block; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.3em; color: var(--ink); }
.hero__text .eyebrow__aud { display: block; margin-top: 0.7rem; font-weight: 400; color: var(--accent-strong); }

/* Link rows to the two applications: name bold, audience beneath, an arrow. */
.rows--apps li { padding: 1.2rem 0; }
.rows--apps a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.2rem; align-items: center; border-bottom: 0; color: var(--ink); text-decoration: none; }
.rows--apps .rows__line { font-size: var(--prose-size); line-height: 1.5; transition: color .3s ease; }
.rows__name { font-weight: 600; letter-spacing: 0.05em; }
.rows__aud { grid-column: 1; margin-top: 0.5rem; font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-strong); }
.rows--apps .ico { grid-column: 2; grid-row: 1 / span 2; width: 1.1rem; height: 1.1rem; color: var(--accent-strong); transition: transform .3s ease; }
.rows--apps a:hover .rows__line { color: var(--accent-strong); }
.rows--apps a:hover .ico { transform: translateX(5px); }

/* Contact: the application name above the client type. */
.field--radio .opt { align-items: start; margin-bottom: 0.9rem; }
.field--radio .opt input { margin-top: 0.45em; }
.opt__text { display: block; color: var(--ink); }
.opt__name { display: block; font-family: var(--font-ui); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.2rem; }

/* Footer strip: one line per application, the name in bone, the process in the muted tone. */
.site-foot__tag { display: flex; flex-direction: column; gap: 0.6rem; }
.site-foot__app strong { font-weight: 600; color: var(--foot-ink); margin-right: 0.7rem; }
.site-foot__strip { color: var(--foot-mute); }

/* Header: the current page a step heavier. */
.site-nav a[aria-current="page"] { font-weight: 500; }

/* Pillar names hold to two lines. */
.pillar__name { max-width: 22ch; }

/* ======================================================================
   Header and mobile pass (20 Sep)
   ====================================================================== */
/* The mobile menu's button is a button, not a menu line. */
.mobile-nav .mobile-nav__cta { font-family: var(--font-ui); font-size: var(--btn-size); letter-spacing: var(--ui-track); padding: 1em 2.2em; align-self: flex-start; }
/* The current page carries a gold rule in the header. */
.site-nav a { position: relative; }
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.1rem; height: 1px; background: var(--accent); }
/* Client types on narrow screens: a little less tracking so they hold together. */
@media (max-width: 44rem) { .hero__text .eyebrow__aud { letter-spacing: 0.16em; } }

/* ======================================================================
   The identity (28 Sep) — Piers's NICKOLDS | WEALTH wordmark
   ======================================================================
   The wordmark is artwork, not type: two PNGs used as CSS masks over one
   box, cut from the one file, so NICKOLDS takes the ink colour of whatever
   ground it sits on, the rule and WEALTH take the gold, and the two halves
   can never drift apart. */
.lockup__name {
  position: relative; display: block;
  /* the artwork's own aspect ratio, 1355 x 136 */
  height: 1.05em; width: calc(1.05em * 9.9632);
  font-size: 1.42em;
}
.lockup__name-ink, .lockup__name-bar {
  position: absolute; inset: 0;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
}
.lockup__name-ink {
  background-color: var(--ink);
  -webkit-mask-image: url("/assets/img/wordmark-wealth-ink.a19ec3ac.png");
  mask-image: url("/assets/img/wordmark-wealth-ink.a19ec3ac.png");
}
.lockup__name-bar {
  background-color: var(--accent-strong);
  -webkit-mask-image: url("/assets/img/wordmark-wealth-gold.ca17892f.png");
  mask-image: url("/assets/img/wordmark-wealth-gold.ca17892f.png");
}
.site-foot .lockup__name-ink { background-color: var(--on-deep-bone); }
.site-foot .lockup__name-bar { background-color: var(--on-deep-accent); }
/* The sub-line hangs off the wordmark's own box, so it keeps its left edge. */
.lockup__sub { font-size: 0.52em; }
.lockup__type { gap: 0.5em; }

/* The closing band: the wordmark itself, centred, then the strapline. */
.cta--nio .lockup { justify-content: center; margin-bottom: 1.4rem; }
/* Driven from width, not type size: at 10:1 a font-size that fits at 1440
   runs off the side of a phone. */
.lockup--xl .lockup__name {
  width: min(34rem, 78vw); height: calc(min(34rem, 78vw) / 9.9632); font-size: inherit;
}
/* The header wordmark is only a few pixels tall; the link around it still has
   to be something a thumb can hit. */
a.lockup--sm { padding-block: 0.45rem; }

/* A long call to action ("Discuss your current arrangements") is wider than a
   phone; below the two-column breakpoint the label wraps and the padding comes
   in rather than the button running off the side. */
@media (max-width: 43.99rem) {
  .btn { white-space: normal; text-wrap: balance; padding-inline: 1.4em; max-width: 100%; }
}
.cta--nio .lockup__name-ink { background-color: var(--on-deep-bone); }
.cta--nio .lockup__name-bar { background-color: var(--on-deep-accent); }
.cta--nio .cta__strip {
  font-family: var(--font-ui); font-weight: 300; font-size: 0.72rem;
  letter-spacing: 0.22em; color: var(--on-deep-accent); margin: 1rem 0 2.2rem;
}

/* Reversed on the deep ground. */
.site-foot .lockup__mark { color: var(--on-deep); }
.sec--deep .block__mark, .sec--deep .receive__mark, .sec--deep .sec-head__mark { color: var(--on-deep); }

/* ======================================================================
   Visual pass (22 Sep) — the detail, not the layout
   ======================================================================
   Colour, weight and rule work only: nothing moves, nothing is renamed. */

/* The six pillars read as a ruled grid on the page, not a filled slab: the
   old card rules left a tinted background showing through the 1px gaps. */
.pillars { background: transparent; border: 0; border-top: 1px solid var(--rule); overflow: visible; }
.pillars .pillar { border-bottom: 1px solid var(--rule); }
@media (min-width: 62rem) {
  /* A hairline between the columns, so the grid is read as a table of six. */
  .pillars .pillar:not(:nth-child(3n)) { border-right: 1px solid var(--rule); padding-right: 2.2rem; }
  .pillars .pillar:not(:nth-child(3n+1)) { padding-left: 2.2rem; }
}

/* Chapter numbers gain the gold rule the left column lost when the mark moved
   inline: it anchors the head to the body's first line. */
.block__head .block__num { position: relative; padding-top: 1.15rem; }
.block__head .block__num::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 2.4rem; height: 1px; background: var(--accent);
}
.sec--deep .block__head .block__num::before { background: var(--on-deep-accent); }

/* Form fields: a paler field against the page and a gold focus ring, so the
   control being filled is never in doubt. */
.field input, .field select, .field textarea { border-color: var(--rule-strong); transition: border-color .2s ease, box-shadow .2s ease; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* The contact card becomes a ruled column: a gold rule, then the detail. */
.contact__aside { background: transparent; border: 0; border-top: 2px solid var(--accent); padding: 1.8rem 0 0; }

/* Buttons: a firmer ghost outline, and a gold hairline on hover. */
.btn--ghost { border-color: var(--rule-strong); }
.btn--ghost:hover { border-color: var(--accent); }

/* Ragged edges read better than justified ones when the measure is this tight. */
p, li, dd { text-wrap: pretty; }

/* ======================================================================
   Sizing and alignment audit (22 Sep) — measured, not eyeballed
   ======================================================================
   A geometry pass over seven pages at 1440, 1280, 1024, 768 and 390 found
   three things worth fixing: UI text under 11.5px, tap targets under the
   24px WCAG 2.2 minimum, and stage headings sitting 91px below their own
   body text. Nothing here moves a column. */

/* 1. The smallest labels come up to the same floor as the rest. */
.foot-col__h { font-size: 0.72rem; }
.rows__aud { font-size: 0.72rem; }
.lockup__sub { font-size: 0.56em; }
.pillars .pillar__n { font-size: 0.74rem; }

/* 2. Targets: every inline link and control clears 24px. */
.link-arrow { min-height: 24px; padding-block: 0.15rem; }
.site-foot a, .foot-col a, .contact__note a, .footnote a, .consent a, .small-print a, .prose a {
  display: inline-block; padding-block: 0.25rem;
}
.field--radio input, .consent input { width: 1.05rem; height: 1.05rem; }
.field--radio .opt { padding-block: 0.15rem; }

/* 3. The stage head sat too low against its lead: the rule, number and
      eyebrow stack was 91px deep. Tightened to about 70px. */
.block__head .block__num { margin-bottom: 0.85rem; }
.sec--stage .block__head .eyebrow, .block__head .eyebrow { margin-bottom: 0.55rem; }
.site-foot__tag { font-size: 0.74rem; }

/* 4. The header nav wrapped onto two lines between 992px and about 1200px,
      where the items, the lockup and the button are all still on one row.
      The items never wrap now, and the type tightens over that range.

      The 25 Sep rewrite gives the two propositions their full names in the
      nav, so the row is wider again: the menu button takes over below 72rem
      and the tightened type runs from there up to 100rem. */
.site-nav a { white-space: nowrap; }
@media (min-width: 72rem) and (max-width: 100rem) {
  .site-nav a { font-size: 0.685rem; letter-spacing: 0.11em; }
  .site-nav ul { gap: 0.95rem; }
  .site-head__inner { gap: 1.4rem; }
}

/* The hero came down twice (22 Sep); section titles follow it down a step so
   the page keeps its order — hero, then chapter, then lead, then body. */
.block__title { font-size: clamp(1.5rem, 2.8vw, 2.25rem); }
.principles-h { font-size: clamp(1.5rem, 2.8vw, 2.25rem); }

/* ======================================================================
   Optimisation pass (23 Sep)
   ====================================================================== */
/* The display face is a light 300; at phone sizes that reads as thin rather
   than as elegant, so it gains a little weight where the type is smallest. */
@media (max-width: 44rem) {
  .display, .block__title, .lead, .close-lines__last { font-weight: 400; }
}

/* The hero carries less type than it used to; close the gap under it so the
   first chapter is not stranded below the fold on a laptop. */
.hero { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* Ruled rows: the rule belongs to the row above, so the last one does not
   leave a hanging line under the final item. */
.rows li:last-child { border-bottom-color: transparent; }
.rows--questions li:last-child, .rows--apps li:last-child { border-bottom-color: var(--rule); }

/* The "what NIO does not do" register sits inside the body column, which is
   62ch wide: a 15rem term column left the definitions wrapping at about 25
   characters. The term now sits above its definition, as a label. */
.block__body .defrows__row, .prose-intro .defrows__row { grid-template-columns: 1fr; gap: 0.45rem; padding: 1.3rem 0; }
.block__body .defrows__name, .prose-intro .defrows__name {
  font-family: var(--font-ui); font-weight: 500;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-strong);
}
.block__body .defrows dd, .prose-intro .defrows dd { font-size: var(--prose-size); line-height: 1.68; color: var(--ink); max-width: 62ch; }
.block__body .defrows__row:last-child, .prose-intro .defrows__row:last-child { border-bottom-color: transparent; }

/* ------------------------------------------------- legal prose paragraphs */
/* Sections on the legal pages used to hold a single paragraph each, so the
   grid gap between sections was all the spacing they needed. Several now run
   to three or four paragraphs, which ran together without a gap of their own. */
.prose section > p + p { margin-top: 1.05rem; }

/* ------------------------------------------ the two propositions (25 Sep) */
/* Two wide panels rather than the three narrow tiles .service was written
   for, so they set left like the rest of the page and drop the 28ch cap. */
.sec--two-apps .block__title { margin-bottom: clamp(2rem, 4vw, 3rem); }
.services--two { grid-template-columns: 1fr; gap: var(--grid-gap); }
@media (min-width: 52rem) {
  .services--two { grid-template-columns: repeat(2, 1fr); }
}
.services--two .service { text-align: left; align-items: stretch; }
.services--two .service .link-arrow { justify-content: flex-start; }
.services--two .service__line { max-width: none; }
.service__aud {
  margin-top: 1.1rem; font-family: var(--font-ui); font-weight: 500;
  font-size: 0.78rem; letter-spacing: 0.1em; color: var(--ink);
}
.service__focus-h {
  margin-bottom: 0.5rem; font-family: var(--font-ui); font-weight: 500;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-strong);
}
.services--two .service .ticks { margin-bottom: 1.2rem; }
.services--two .service__tag { margin-bottom: 1.4rem; }

/* ------------------------------------------------ the three stages (28 Sep) */
/* Same card as the two-application row, three across, left aligned like every
   other body column on the site. */
.services--three { grid-template-columns: 1fr; gap: var(--grid-gap); }
@media (min-width: 44rem) { .services--three { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .services--three { grid-template-columns: repeat(3, 1fr); } }
.services--three .service { text-align: left; align-items: stretch; }
.services--three .service .link-arrow { justify-content: flex-start; margin-top: auto; }
.services--three .service__line { max-width: none; margin-bottom: 1.6rem; }
.services--three .service__name { margin-bottom: 1rem; }
/* The process line is a heading here, not a sentence: it holds one line. */
.stages-h { max-width: none; text-wrap: nowrap; }
@media (max-width: 43.99rem) { .stages-h { text-wrap: wrap; } }

/* --------------------------------------------- standalone intros (25 Sep) */
/* The application pages carry a short introduction between the hero and the
   first block. It sits in the body column so it lines up with every block
   below it, rather than running the full width of the shell. */
.prose-intro { max-width: 62ch; }
@media (min-width: 62rem) {
  /* the 4fr head column plus the block gap, so it starts where bodies start */
  .prose-intro { margin-left: calc((100% - clamp(3rem, 6vw, 6rem)) * 4 / 11 + clamp(3rem, 6vw, 6rem)); }
}
.prose-intro > p:not([class]) { font-size: var(--prose-size); line-height: 1.7; color: var(--ink-mute); }
.prose-intro > * + * { margin-top: 1.25rem; }
.prose-intro > .pull-line { margin-top: 2rem; }
.prose-intro > .defrows { margin-top: 2rem; }

/* ---------------------------------------------- legal prose lists (25 Sep) */
/* `display: grid` on a <ul> suppresses list markers, so the legal lists read
   as unmarked indented paragraphs. They are laid out as lists again, with the
   marker in the accent, and a list now leaves a gap before the text after it. */
.prose section ul:not(.ticks), .prose section ol { display: block; margin: 1.15rem 0; padding-left: 1.35em; }
.prose section ul:not(.ticks) { list-style: disc; }
.prose section ol { list-style: decimal; }
.prose section li + li { margin-top: 0.7rem; }
.prose section li::marker { color: var(--accent); }

/* -------------------------------------- inline links in body copy (26 Sep) */
/* An inline link sits at the body line height, which is under the 24px tap
   target a phone wants. Padding on an inline element grows the hit box
   without disturbing the line box around it. */
@media (max-width: 43.99rem) {
  .block__body a:not(.link-arrow):not(.btn),
  .prose-intro a:not(.link-arrow):not(.btn) { padding-block: 0.28rem; }
}

/* ------------------------------------------- legal page contents (26 Sep) */
/* Important information runs to 20,000px and forty sections, privacy nearly
   as far, and the head column beside the prose was empty the whole way down.
   The contents list goes there and sticks while the body moves. */
.legal { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 62rem) {
  /* Same two columns as a marketing block, so the prose sits on the one
     spine the whole site shares. Only pages that have a contents list get
     the second column; a short legal page keeps the single one. */
  .legal--toc { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  /* The prose indents itself by the 4fr share when it stands alone; inside
     this grid the column already does that, so cancel it. */
  .legal--toc .prose { margin-left: 0; }
  .legal-toc {
    position: sticky; top: calc(var(--head-h) + 1.5rem);
    max-height: calc(100vh - var(--head-h) - 4rem); overflow-y: auto;
    /* forty entries do not fit the viewport; the fade says the list goes on */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
  }
  /* beside the prose the list is a standing column, not something to open */
  .legal-toc__h { cursor: default; pointer-events: none; }
  .legal-toc__h::after { display: none; }
}
.legal-toc__h {
  font-family: var(--font-ui); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-strong);
  /* the whole row is the tap target when the list is a disclosure */
  padding-block: 0.7rem; margin-bottom: 0.35rem; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.legal-toc__h::-webkit-details-marker { display: none; }
/* the chevron is the only thing that says the list opens; it goes at the
   width where the list is a disclosure and not a standing column */
.legal-toc__h::after {
  content: ''; width: 0.5rem; height: 0.5rem; flex: none;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg); transition: transform .25s ease;
}
.legal-toc__d[open] > .legal-toc__h::after { transform: translateY(0.1em) rotate(-135deg); }
.legal-toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.legal-toc li { border-bottom: 1px solid var(--rule); }
.legal-toc a {
  display: block; padding: 0.6rem 0; line-height: 1.45;
  font-family: var(--font-ui); font-weight: 300; font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--ink-mute); text-decoration: none; transition: color .25s ease;
}
.legal-toc a:hover, .legal-toc a:focus-visible { color: var(--accent-strong); }
/* the section the reader is in, marked while they scroll */
.legal-toc a.is-current { color: var(--accent-strong); }
.legal-toc li:has(> a.is-current) { box-shadow: inset 2px 0 0 var(--accent-strong); }
.legal-toc a.is-current { padding-left: 0.7rem; }
/* the header is fixed, so an anchor would otherwise land under it */
.prose section { scroll-margin-top: calc(var(--head-h) + 1.5rem); }

/* ----------------------------------------------- long block titles (26 Sep) */
/* Titles settle at 16ch and clamp(1.5rem, 2.8vw, 2.25rem) further down this
   sheet, which stacks a long one four or five lines deep and can leave a
   single short word alone on the last. Past forty-five characters the title
   gets a wider measure and one step down in size; it has to sit after those
   later rules to win at the same specificity. */
.block__title--long {
  max-width: 22ch; font-size: clamp(1.35rem, 2.3vw, 1.85rem); text-wrap: balance;
}

/* ------------------------------------------- Our Services menu (28 Sep) */
/* One nav item for the three stages. The panel opens on hover and on
   focus-within, so it works with the script blocked; site.js adds tap,
   Escape and click-away on top. */
.site-nav ul { align-items: center; }
.site-nav .has-menu { position: relative; }
.nav-parent {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin: 0; padding: 0.5rem 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-ui); font-size: var(--nav-size); font-weight: 400;
  letter-spacing: var(--ui-track); text-transform: uppercase;
  color: var(--ink-mute); white-space: nowrap;
  transition: color .3s ease;
}
.nav-parent:hover, .nav-parent:focus-visible, .nav-parent[aria-expanded="true"] { color: var(--accent-strong); }
/* the item is marked when the reader is on one of its three pages */
.nav-parent[data-here="true"] { color: var(--accent-strong); font-weight: 500; position: relative; }
.nav-parent[data-here="true"]::after {
  content: ""; position: absolute; left: 0; right: 1.1rem; bottom: 0.1rem; height: 1px; background: var(--accent);
}
.nav-parent__caret {
  width: 0.38rem; height: 0.38rem; flex: none;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg); transition: transform .25s ease;
}
.nav-parent[aria-expanded="true"] .nav-parent__caret { transform: translateY(0.08em) rotate(-135deg); }

.site-nav .submenu {
  position: absolute; top: 100%; left: -1.4rem; z-index: 40;
  display: block; flex-direction: column; gap: 0; width: max-content; min-width: 17rem; max-width: 22rem;
  margin-top: 0.55rem; padding: 0.4rem 0;
  background: var(--bg); border: 1px solid var(--rule);
  box-shadow: 0 18px 40px rgba(20, 18, 15, .10);
  opacity: 0; visibility: hidden; transform: translateY(-0.3rem);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
/* The panel sits a little below the button. Without something spanning that
   gap the pointer leaves the item on its way down and the menu shuts. */
.site-nav .submenu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -0.7rem; height: 0.7rem;
}
.has-menu:hover .submenu,
.nav-parent[aria-expanded="true"] + .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
/* With the script blocked, focus is the only way in. With it running, focus
   must not hold the panel open or Escape cannot close it. */
html:not(.js) .has-menu:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.site-nav .submenu li + li { border-top: 1px solid var(--rule); }
.site-nav .submenu a {
  display: block; padding: 0.85rem 1.4rem; text-transform: none; letter-spacing: 0;
  font-family: var(--font-ui); color: var(--ink-mute); white-space: normal;
}
.site-nav .submenu a:hover, .site-nav .submenu a:focus-visible { background: var(--bg-alt); color: var(--ink); }
.site-nav .submenu a[aria-current="page"]::after { display: none; }
.submenu__name {
  display: block; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-strong);
}
.submenu__line {
  display: block; margin-top: 0.3rem;
  font-family: var(--font-display); font-size: 0.95rem; line-height: 1.3; color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .site-nav .submenu { transition: none; }
  .nav-parent__caret { transition: none; }
}

/* On a phone the three are already listed; a second disclosure would put
   them two taps away. */
.mobile-nav__group > ul { margin-top: 0.15rem; padding-left: 0.9rem; border-left: 1px solid var(--rule); }
.mobile-nav__group-h {
  margin: 0.9rem 0 0.2rem;
  font-family: var(--font-ui); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-strong);
}


/* ==========================================================================
   The NIO theme — "Private Ledger"
   The deck translated directly to the web. Warm bone ground, black
   ink, gold hairlines, Garamond throughout. Print-like restraint: square
   corners, no shadows, rules instead of boxes wherever a rule will do.

   Chosen by Piers from four candidate directions (19 Sep 2026). The other
   three — Dark Vault, Intelligence Layer, Quiet Authority — are in git
   history before this commit should they ever be wanted for comparison.
   ========================================================================== */

:root {
  /* -- metrics ----------------------------------------------------------- */
  --shell: 78rem;
  --gutter: clamp(1.5rem, 5vw, 4.5rem);
  --sec-pad: clamp(3.5rem, 7vw, 6rem);
  --hero-pad: clamp(4.5rem, 10vw, 8.5rem);
  --grid-gap: clamp(1.5rem, 2.5vw, 2.25rem);
  --card-pad: clamp(1.8rem, 3vw, 2.6rem);
  --radius: 0px;
  --btn-radius: 0px;
  --head-h: 5.5rem;
  --head-w: 46rem;
  --head-gap: clamp(2.5rem, 5vw, 4rem);

  /* -- type -------------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --font-body: "EB Garamond", Garamond, "Times New Roman", serif;
  --font-ui: Montserrat, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --body-size: 1.075rem;
  --body-lh: 1.72;
  --body-weight: 400;
  --prose-size: 1.13rem;
  --standfirst-size: clamp(1.12rem, 1.7vw, 1.35rem);

  --h1: clamp(2rem, 4.2vw, 3.4rem);
  --h2: clamp(2.1rem, 4.6vw, 3.5rem);
  --quote-size: clamp(1.45rem, 3.1vw, 2.3rem);

  --display-weight: 300;
  --display-track: -0.022em;
  --display-lh: 1.08;

  --eyebrow-size: 0.745rem;
  --eyebrow-track: 0.26em;
  --eyebrow-gap: 1.7rem;

  --ui-font: 400 0.72rem/1 Montserrat, sans-serif;
  --ui-track: 0.17em;
  --nav-size: 0.75rem;
  --btn-size: 0.75rem;

  /* -- colour ------------------------------------------------------------ */
  --bg: #f1eee6;
  --bg-alt: #e8e3d5;
  --bg-deep: #0c0b09;

  --ink: #14120f;
  --ink-mute: #4c4740;
  --ink-faint: #6a645a;

  --accent: #9b7d3a;          /* rules and borders only — never text */
  --brand-red: #980f1f;       /* the bar in the wordmark, sampled from the artwork */
  --mark: #000000;
  --accent-strong: #6b5220;   /* small text — 5.4:1 on the alt ground, 5.3:1 on the base */
  --display-accent: #7d6127;  /* large italic display accents — 3.9:1 */

  --rule: #dbd4c3;
  --rule-strong: #c4bba2;

  --card-bg: #f8f6f0;
  --card-line: #e0d9c7;
  --table-hl: #f5eeda;
  --field-bg: #fbfaf6;

  /* On the black grounds everything reverses to gold, never to white
     (§ Piers, 22 Sep): gold for type, a brighter gold for accents, a muted
     gold for secondary lines. A deep antique gold rather than a champagne
     one (§ Piers, 22 Sep), measured at 6.9:1, 8.2:1 and 4.8:1 on the
     deep ground.
     The blacks themselves are warm rather than absolute (#14120f type,
     #0c0b09 grounds): against a warm bone page, pure #000 reads cold and
     punches a hole in the spread. The mark stays true black, as drawn. */
  --on-deep: #b8944a;
  /* The deep ground is gold throughout, but the wordmark has to keep the
     artwork's own two tones: the dark word inverts to bone, the rule and
     WEALTH stay gold. */
  --on-deep-bone: #efe9dc;
  --on-deep-mute: #97793c;
  --on-deep-accent: #c9a253;
  --on-deep-red: #c8313f;
  --on-deep-rule: rgba(184, 148, 74, .34);

  --hero-bg: var(--bg);
  --hero-ink: var(--ink);
  --hero-mute: var(--ink-mute);
  --hero-accent: var(--accent-strong);
  --hero-wash:
    radial-gradient(60% 55% at 50% 30%, rgba(168, 135, 63, .15), transparent 72%);

  --head-bg: transparent;
  --head-bg-stuck: rgba(240, 237, 228, .88);

  --btn-solid-bg: #14120f;
  --btn-solid-bg-hover: #2a2620;
  --btn-solid-ink: #c9a253;
  --btn-ghost-hover: rgba(168, 135, 63, .12);

  --stat-fig: var(--ink);
  --stat-lab: var(--ink-mute);
  --step-bg: var(--bg);
  --step-ink: var(--ink);
  --dia-nio-bg: #e9dfc2;
  --dia-nio-ink: #14120f;

  --cta-wash: radial-gradient(62% 62% at 50% 0%, rgba(184, 148, 74, .15), transparent 68%);

  --foot-bg: #0c0b09;
  --foot-ink: #b8944a;
  --foot-mute: #97793c;
  --foot-accent: #c9a253;
  --foot-rule: rgba(184, 148, 74, .3);

  --danger: #8d3a2b;
}

/* Deep sections invert the accent tokens so nested components stay legible.
   Note that the component tokens below must be restated here rather than
   inherited: a custom property whose value is `var(--ink)` is substituted where
   it is *declared*, so redefining --ink alone would not reach them. */
.sec--deep, .cta, .site-foot, .compare__col--full {
  --ink: var(--on-deep);
  --ink-mute: var(--on-deep-mute);
  --ink-faint: var(--on-deep-mute);
  --accent-strong: var(--on-deep-accent);
  --display-accent: var(--on-deep-accent);
  --rule: var(--on-deep-rule);
  --stat-fig: var(--on-deep-accent);
  --stat-lab: var(--on-deep-mute);
  --step-bg: transparent;
  --step-ink: var(--on-deep-accent);
  --card-bg: rgba(184, 148, 74, .07);
  --card-line: var(--on-deep-rule);
}

/* -- variant character ----------------------------------------------------- */

/* Hairline rule with the logo's centre diamond, used to open each section. */
.sec-head { position: relative; padding-top: 2.6rem; }
.sec-head::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 34%, transparent 34%);
}
.sec-head::after {
  content: "";
  position: absolute; top: -3px; left: calc(34% - 3.5px);
  width: 7px; height: 7px; background: var(--accent);
  transform: rotate(45deg);
}

/* Classical, generously tracked small caps for the eyebrow. */
.eyebrow { font-weight: 400; }

/* Cards read as tinted panels, not as objects with depth. */
.card, .offer, .compare__col, .bio__aside, .contact__aside, .notice { box-shadow: none; }

/* A ledger rule under every figure. */
.stat { padding-top: 1.6rem; border-top: 1px solid var(--accent); }

/* The fee table is the centrepiece here — give it the full ledger treatment. */
.fee tbody th { font-family: var(--font-display); font-weight: 500; }
.fee tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--card-bg) 55%, transparent); }
.fee tbody tr.is-nio { background: var(--table-hl); box-shadow: inset 3px 0 0 var(--accent); }

/* Quotes are set centred and large, as on the deck's quotation slide. */
.sec--quote { background: var(--bg-alt); }

/* Centred section heads: the rule and diamond sit on the page's axis. */
.sec-head.sec-head--center::before { left: 50%; right: auto; width: 7rem; transform: translateX(-50%); background: var(--accent); }
.sec-head.sec-head--center::after { left: calc(50% - 3.5px); }
#eras .steps { max-width: 56rem; margin-inline: auto; }