/* ==========================================================================
   The planning practice (a demonstration) — design system.

   Hand-written and self-contained. No external font requests (validate.mjs
   fails any @import or src:url pointing off-origin): the display face is a
   system serif stack and the body face a system sans stack, both with
   Cyrillic coverage for a later mirror.

   THIS SHEET DEFINES ONLY WHAT THE SITE EMITS: every class below is printed
   by `_tools/site.cjs` or listed for page writers in `_tools/PAGES-BRIEF.md`
   §4, plus the few the enquiry form's markup borrows (.btn, .table-wrap,
   .two-col, .wrap--narrow). validate.mjs checks the other direction: every
   class a page carries has a rule here or in app.css.

   ------------------------------------------------------------ THE PALETTE

   EVERGREEN INK, BRASS AND A WARM PAPER — a green-shaded desk lamp, its
   brass stem, and cream plaster in daylight. Calm on purpose: nothing on
   this site is a sale or a result, and the brass is a working colour
   (links, icons, the button on a dark band), never a figure going up.

   --ink      the dark bands: the top bar, page headers, the hero, the
              footer and every .section--ink.
   --seal     BRASS, DARK GROUNDS ONLY: links, icons, rules and the primary
              button on ink.
   --seal-dk  the dark-brass twin for LIGHT grounds: links, icons, eyebrows.
   --brass    every fee on a dark ground; --brass-dk on a light one.
   --cool-lt  the --cool note's ground (information, not money).
   --signal   red: form validation, a refusal, nothing else.

   Every text pair here was measured at 4.5:1 or better, and every button
   fill at 3:1 against its ground, before the sheet shipped
   (_tmp/palette.cjs; the hero and page-header scrims assumed over a WHITE
   pixel: a cream wall or a sunlit window can be white anywhere behind the
   text); audit.mjs and audit-live.mjs measure the built pages, because a
   pair nobody listed is the pair that fails.

   THE TOKENS app.css READS are all here and keep their names.

   THE HERO'S TWO CHILDREN ARE BOTH POSITIONED — see .hero-media img, video.
   A poster and a video in normal flow stack, and the clipped hero hides the
   video while every gate reports it playing (house rules §16).
   ========================================================================== */

:root {
  --ink:        #15302b;   /* evergreen: the dark bands */
  --char:       #1f4a40;   /* the primary button on light grounds, the CTA band */
  --char-2:     #21614f;   /* links on light grounds */
  --char-3:     #6d8079;
  --seal:       #d8b46a;   /* BRASS, dark grounds only */
  --seal-hi:    #e9cc8e;   /* lightened brass: TEXT on the hero and page-header scrims */
  --seal-dk:    #7c5512;   /* dark brass, the light-ground twin */
  --seal-lt:    #f6ecd6;
  --brass:      #f3e3bd;   /* fees on a dark ground */
  --brass-dk:   #74500f;   /* fees on a light ground */
  --brass-lt:   #fbf6ea;
  --cool-lt:    #ecf2f0;   /* the --cool note's ground */
  --signal:     #b3261e;   /* red: validation, a refusal */
  --signal-lt:  #fbe9e6;
  --bone:       #f4f1ea;   /* cream plaster */
  --bone-2:     #e8e2d5;
  --paper:      #ffffff;
  --line:       #d9d3c4;
  --line-2:     #bdb4a0;
  --body:       #1a201e;
  --muted:      #4b524f;
  --muted-lt:   #56605b;   /* small labels only */
  --warm-line:  #e6cf9a;   /* border of the --warm advice note */
  --warm-ink:   #4a3308;   /* its text */
  --cool-ink:   #1d3a33;   /* the --cool note's text, on --cool-lt */
  --cool-strong:#112520;   /* its lead-in */
  --urgent-ink: #7a1e18;
  --on-ink:     rgba(255, 255, 255, .8);    /* body text on ink */
  --on-ink-lo:  rgba(255, 255, 255, .7);    /* small text on ink */
  --on-ink-line:rgba(255, 255, 255, .14);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1200px;
  --r: 4px;
  --r-lg: 8px;
  --shadow: 0 1px 2px rgba(21, 48, 43, .05), 0 8px 24px -12px rgba(21, 48, 43, .2);
  --shadow-lg: 0 2px 4px rgba(21, 48, 43, .06), 0 24px 48px -20px rgba(21, 48, 43, .3);
}

/* ------------------------------------------------------------------ base */

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

/* [hidden] MEANS HIDDEN (house rules §25.9). The UA's `[hidden] { display:
   none }` loses to any class that sets display, and an empty error box and
   a whole form once stayed on screen because of it. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  /* 17/16 as a REM, so a reader's own default font size still scales it */
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
/* AN INLINE ICON MUST BE INLINE (house rules §18): the reset above makes
   every svg a block, and a glyph at the start of a sentence then takes a
   line of its own. `.i` is only ever put on an icon. */
.i { display: inline-block; vertical-align: -.15em; flex: none; }

a { color: var(--char-2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--seal-dk); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.012em;
  margin: 0 0 .55em;
}
h1 { font-size: clamp(2.15rem, 4.4vw, 3.4rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 2.9vw, 2.35rem); }
h3 { font-size: 1.24rem; }
h4 { font-size: 1.02rem; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

/* `strong` darkens body copy on the light grounds, and a hard-coded ink would
   turn it invisible on every dark one. Dark components set --strong. */
strong { color: var(--strong, var(--ink)); font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

::selection { background: var(--seal-lt); color: var(--ink); }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }
.wrap--narrow { max-width: 760px; }
@media (max-width: 640px) { .wrap { padding-inline: 1rem; } }

/* .sr — VISUALLY HIDDEN, STILL READ ALOUD. Not display:none, which removes
   it from the accessibility tree too. Every scroll box that can hold one is
   `position: relative` (house rules §37.7), or the span escapes it and
   widens the page. */
.sr {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  --strong: #fff; background: var(--char); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

.eyebrow {
  font-family: var(--sans); font-size: .745rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--seal-dk); margin: 0 0 .85rem;
}
.lead { font-size: clamp(1.06rem, 1.5vw, 1.22rem); line-height: 1.62; color: var(--body); }
.muted { color: var(--muted); }
.small { font-size: .86rem; line-height: 1.7; color: var(--muted); }
.small a { color: var(--seal-dk); }
.center { text-align: center; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-size: .935rem; font-weight: 600; letter-spacing: .005em;
  padding: .78rem 1.4rem;
  border-radius: var(--r); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--lg { padding: .95rem 1.7rem; font-size: .95rem; }
/* A BUTTON MAY WRAP ON A NARROW PHONE (house rules §15): nowrap made a long
   label wider than a 320px screen. Ugly beats broken. */
@media (max-width: 420px) { .btn { white-space: normal; text-align: center; } }

.btn--primary { --strong: #fff; background: var(--char); color: #fff; border-color: var(--char); }
.btn--primary:hover { background: var(--char-2); border-color: var(--char-2); color: #fff; }
.btn--ghost { background: transparent; color: var(--char); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--bone-2); color: var(--char); border-color: var(--char-3); }

/* THE PRIMARY BUTTON ON A DARK GROUND IS BRASS, NOT INK. A dark fill on a
   dark band measures fine as text and reads as a hole in the page. */
.hero .btn--primary, .section--ink .btn--primary, .cta-band .btn--primary, .pagehead .btn--primary {
  --strong: var(--ink); background: var(--seal); color: var(--ink); border-color: var(--seal);
}
.hero .btn--primary:hover, .section--ink .btn--primary:hover, .cta-band .btn--primary:hover, .pagehead .btn--primary:hover {
  background: var(--seal-lt); border-color: var(--seal-lt); color: var(--ink);
}
/* A GHOST BUTTON ON A DARK GROUND IS WHITE (house rules §34.6c). */
.hero .btn--ghost, .section--ink .btn--ghost, .cta-band .btn--ghost, .pagehead .btn--ghost {
  color: #fff; border-color: rgba(255, 255, 255, .45);
}
.hero .btn--ghost:hover, .section--ink .btn--ghost:hover, .cta-band .btn--ghost:hover, .pagehead .btn--ghost:hover {
  background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .7);
}

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.table-wrap + p, p + .btn-row, .prose + .btn-row { margin-top: 1rem; }

.link-more {
  display: inline-flex; align-items: center; gap: .42rem;
  font-weight: 600; font-size: .93rem; color: var(--char-2); text-decoration: none;
}
.link-more:hover { color: var(--seal-dk); }
.link-more svg { transition: transform .18s; }
.link-more:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- top bar
   WHICH HALF OF THE STRIP SURVIVES A PHONE IS A DECISION (house rules
   §29.8), and here it is the DEMONSTRATION NOTICE: it may wrap but never
   shrink to zero, and the first visit's line beside it goes below 1100px
   (it is in the drawer's foot, the rate table's caption and on the visit
   page). THE BREAKPOINT IS A FUNCTION OF THE TWO SENTENCES (house rules
   §12): the notice and the line need 1,000px between them on one row, and
   below 1100px the notice wrapped to a second line with one word on it
   (_tmp/nav-measure.mjs, the top bar band). */
.topbar {
  --strong: #fff;
  background: var(--ink); color: rgba(255, 255, 255, .78);
  font-size: .795rem; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; padding-block: .35rem; }
.topbar-left { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; }
.topbar-left li { display: flex; align-items: center; gap: .42rem; margin: 0; min-width: 0; }
.topbar-demo span { min-width: 0; }
.topbar-demo svg, .topbar-note svg { color: var(--seal); flex: none; }
.topbar-note { display: flex; align-items: center; gap: .42rem; white-space: nowrap; flex: none; }
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar a:hover { color: var(--seal-lt); }
@media (max-width: 1099px) {
  .topbar-note { display: none; }
  .topbar .wrap { justify-content: center; }
  .topbar-left { flex: 1 1 100%; justify-content: center; }
  .topbar-left li { align-items: flex-start; text-align: left; white-space: normal; }
  .topbar-demo svg { margin-top: .22em; }
}

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

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line);
}
/* NO backdrop-filter on the header: it would become the containing block of
   anything fixed inside it. The drawer is outside the header in the markup;
   this keeps it safe if that ever changes. */
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 78px; }

/* A BRAND NAME IS A LAYOUT INPUT: the text may shrink, the mark may not. */
.brand { display: flex; align-items: center; gap: .72rem; text-decoration: none; flex: 0 1 auto; min-width: 0; color: var(--ink); }
.brand-mark { flex: none; color: var(--ink); }
.brand-text { display: flex; flex-direction: column; line-height: 1.16; min-width: 0; }
.brand-name { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.brand-sub { font-size: .705rem; letter-spacing: .085em; text-transform: uppercase; color: var(--muted); margin-top: .22rem; white-space: nowrap; }

.nav { position: relative; display: flex; align-items: center; gap: .2rem; margin-left: auto; }
.nav-drop > button {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--sans); font-size: .935rem; font-weight: 550;
  color: var(--body); text-decoration: none;
  padding: .62rem .6rem; border-radius: var(--r);
  background: none; border: 0; cursor: pointer; line-height: 1;
  white-space: nowrap;
}
.nav-drop > button:hover { color: var(--char); background: var(--bone-2); }
.nav-drop { position: static; }
.nav-drop > button svg { transition: transform .2s; }
.nav-drop[data-open="true"] > button { color: var(--char); background: var(--bone-2); }
.nav-drop[data-open="true"] > button svg { transform: rotate(180deg); }

/* THE PANEL HANGS FROM THE NAV'S RIGHT EDGE AND GROWS LEFT (house rules
   §12): centred on its own button it runs off the screen the moment there
   are two dropdowns, and the nav sits at the right of the header. A closed
   panel is `visibility: hidden`, which does not remove it from the scroll
   extent — so its width never exceeds the room to its left. */
.nav-panel {
  position: absolute; top: calc(100% + 10px); right: 0; transform: translateY(-6px);
  width: min(46rem, calc(100vw - 3rem));
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.6rem 1.6rem 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-panel > :last-child { margin-bottom: 0; }
.nav-panel-cols:last-child { padding-bottom: 1.6rem; }
.nav-drop[data-open="true"] .nav-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.nav-panel--single { width: min(26rem, calc(100vw - 3rem)); }
.nav-panel--two { width: min(36rem, calc(100vw - 3rem)); }
.nav-panel-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.nav-panel--single .nav-panel-cols { grid-template-columns: minmax(0, 1fr); }
.nav-panel--two .nav-panel-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-col-h {
  font-size: .715rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--seal-dk); margin: 0 0 .7rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line);
}
.nav-col a { display: block; font-size: .9rem; color: var(--body); text-decoration: none; padding: .34rem 0; border-radius: 2px; line-height: 1.4; }
.nav-col a:hover { color: var(--char); }
.nav-col a[aria-current="page"] { color: var(--char); font-weight: 650; }
.nav-col--wide { grid-column: span 2; columns: 2; column-gap: 2rem; }
.nav-col--wide .nav-col-h { column-span: all; }
.nav-col--wide a { break-inside: avoid; }
.nav-panel-foot {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  margin: 1.4rem -1.6rem 0; padding: 1rem 1.6rem;
  background: var(--bone); border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.nav-foot-item { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.nav-foot-item svg { color: var(--seal-dk); }

.header-cta { display: flex; align-items: center; gap: .55rem; flex: none; }
.header-cta .btn { padding: .68rem 1.1rem; font-size: .89rem; }
.burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--line-2); border-radius: var(--r);
  color: var(--char); cursor: pointer;
}

/* THE DESKTOP BAR FITS FROM 1024px WITH NOTHING WRAPPING: five short
   dropdown labels and one button, measured in system Chrome at 1024, 1100,
   1180, 1280, 1440 and 1680 (2026-10-03, _tmp/nav-measure.mjs, which also
   fails a lockup squeezed until its text overflows): at 1024 the brand with
   its sub-line ends at 251px, the nav runs 310 to 807 and the CTA ends at
   the content edge (1000), every button one line high, 59px spare. Re-measured
   for this build's labels after the first build (_tmp/nav-measure.mjs). */
@media (max-width: 1023px) { .nav { display: none; } .burger { display: inline-flex; } .header-cta { margin-left: auto; } }
@media (max-width: 780px) {
  .header-cta .btn { display: none; }
  .site-header .wrap { min-height: 66px; }
  .brand-sub { display: none; }
  .brand-name { font-size: 1.08rem; line-height: 1.14; }
}

/* ---------------------------------------------------------------- drawer
   `overflow: hidden` IS THE LOAD-BEARING DECLARATION (house rules §15): the
   closed panel sits at translateX(100%), past the right edge, and
   `visibility: hidden` does not take it out of the scroll extent. The
   markup ships the drawer `hidden`; site.js removes the attribute to open
   it and puts it back once the close transition has run (§24.1). */
.drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; overflow: hidden; }
.drawer[data-open="true"] { visibility: visible; }
.drawer-veil { position: absolute; inset: 0; background: rgba(21, 48, 43, .55); opacity: 0; transition: opacity .25s; }
.drawer[data-open="true"] .drawer-veil { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(380px, 88vw);
  background: var(--paper);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  overflow-y: auto;
}
.drawer[data-open="true"] .drawer-panel { transform: none; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); flex: none; }
.drawer-close {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: var(--r); color: var(--char); cursor: pointer;
}
/* The call to action sits OUTSIDE the drawer's <nav>, so `.drawer-sub-nav a`
   cannot out-specify .btn--primary and set ink text on its ink fill. */
.drawer-cta { padding: 1rem 1.25rem 0; flex: none; }
.drawer-cta .btn { width: 100%; }
.drawer-sub-nav { padding: .5rem 1.25rem 1rem; flex: 1; }
.drawer-sub-nav ul { list-style: none; margin: 0; padding: 0; }
.drawer-sub-nav li { margin: 0; }
.drawer-sub-nav a {
  display: block; padding: .55rem 0; text-decoration: none;
  font-size: 1rem; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--bone-2);
}
.drawer-sub-nav a[aria-current="page"] { color: var(--seal-dk); }
.drawer-sub { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--seal-dk); margin: 1.25rem 0 .35rem; }
.drawer-foot { padding: 1.25rem; border-top: 1px solid var(--line); background: var(--bone); flex: none; font-size: .92rem; }
.drawer-foot p { display: flex; align-items: flex-start; gap: .45rem; margin: 0 0 .5rem; }
.drawer-foot p:last-child { margin: 0; }
.drawer-foot svg { color: var(--seal-dk); margin-top: .25em; }

/* ------------------------------------------------------------------ hero
   (index only: .hero > .hero-media [img.hero-img + video[data-hero]],
   then .wrap.hero-inner, then .hero-stats) */

.hero { --strong: #fff; position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
/* BOTH CHILDREN ARE POSITIONED (house rules §16): two block children at
   100% stack, and the clipped hero hides the second. The poster stays the
   LCP element and never animates its own opacity. */
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-img { width: 100%; height: 100%; object-fit: cover; }
/* THE SCRIM IS TUNED TO A WHITE WALL. The hero is a cream-walled office in
   daylight, and a plaster wall or a sunlit window can be white anywhere
   behind the text, so the scrim assumes a WHITE pixel there: ink at .66 over pure
   white is the lightest ground white text still reads on at 4.5:1. The text
   column ends at about two thirds of the frame at 1024px, where the
   gradient is still above .7; past it the room shows. Below 1024px the
   column is the whole width, so the scrim is even. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(21, 48, 43, .9) 0%, rgba(21, 48, 43, .84) 55%, rgba(21, 48, 43, .58) 76%, rgba(21, 48, 43, .26) 100%),
    linear-gradient(to top, rgba(21, 48, 43, .6), transparent 42%);
}
@media (max-width: 1023px) {
  .hero-media::after { background: linear-gradient(to bottom, rgba(21, 48, 43, .84), rgba(21, 48, 43, .9)); }
}
/* From 1280px the text column ends near the middle of the frame, so the
   scrim lifts sooner and the room shows on the right (the room is where
   the first meeting happens). The column's own band keeps at least .66. */
@media (min-width: 1280px) {
  .hero-media::after {
    background:
      linear-gradient(100deg, rgba(21, 48, 43, .88) 0%, rgba(21, 48, 43, .8) 44%, rgba(21, 48, 43, .66) 56%, rgba(21, 48, 43, .3) 72%, rgba(21, 48, 43, .08) 100%),
      linear-gradient(to top, rgba(21, 48, 43, .5), transparent 36%);
  }
}
/* PADDING-BLOCK, NOT THE SHORTHAND, and the column pinned to the wrap's own
   left edge (house rules §24.6): the shorthand zeroed the side gutter and
   `margin-inline: auto` centred the column away from the logo. */
.hero-inner {
  position: relative; z-index: 2;
  padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3rem, 6vw, 5rem);
  max-width: 660px;
  margin-inline: max(0px, calc((100% - var(--wrap)) / 2)) auto;
}
.hero h1, .hero h2, .hero h3 { color: #fff; margin-bottom: .5em; }
/* text on the scrim is the LIGHTENED brass, measured over a white pixel
   (_tmp/palette.cjs) */
.hero .eyebrow { color: var(--seal-hi); }
.hero .lead { color: rgba(255, 255, 255, .9); margin-bottom: 2rem; }
.hero .btn-row { margin-bottom: 2.2rem; }
.hero .gen-note { color: rgba(255, 255, 255, .82); }
.hero-meta {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: .6rem 1.9rem;
  list-style: none; margin: 1.6rem 0 0; padding: 0;
}
.hero-meta li { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .9rem; color: rgba(255, 255, 255, .88); }
.hero-meta svg { color: var(--seal); }
/* As many columns as there are figures; an opaque ink cell by default so a
   strip dropped on a light section is still legible. */
.hero-stats {
  position: relative; z-index: 2; margin: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 1px; background: var(--line-2); border-top: 1px solid var(--line-2);
}
.hero-stats > div { --strong: #fff; background: var(--ink); padding: 1.4rem 1.35rem; }
.hero .hero-stats { background: var(--on-ink-line); border-top-color: var(--on-ink-line); }
.hero .hero-stats > div { background: rgba(21, 48, 43, .9); }
.hero-stats dt { font-family: var(--serif); font-size: 1.6rem; color: var(--seal); line-height: 1.05; margin-bottom: .38rem; }
.hero-stats dd { margin: 0; font-size: .84rem; color: rgba(255, 255, 255, .78); line-height: 1.45; }
@media (max-width: 800px) {
  .hero-stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------- pagehead */

.pagehead {
  --strong: #fff; position: relative; background: var(--ink); color: #fff; overflow: hidden;
  padding: clamp(2.6rem, 5.5vw, 4.4rem) 0 clamp(2.2rem, 4.5vw, 3.4rem);
}
.pagehead-media { position: absolute; inset: 0; }
/* site.js writes --px inline as the page scrolls (±40px at most); the 1.08
   scale keeps the picture's edges outside the header while it drifts. */
.pagehead-media img { --px: 0px; width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--px), 0) scale(1.08); will-change: transform; }
/* The same white-pixel rule as the hero: the heading, the lead and the
   label line sit on ink at .76 or more wherever they reach. */
.pagehead-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(21, 48, 43, .94) 0%, rgba(21, 48, 43, .88) 48%, rgba(21, 48, 43, .7) 74%, rgba(21, 48, 43, .48) 100%);
}
@media (max-width: 1023px) { .pagehead-media::after { background: rgba(21, 48, 43, .86); } }
.pagehead .wrap { position: relative; z-index: 2; }
.pagehead h1 { color: #fff; max-width: 22ch; }
.pagehead .lead { color: rgba(255, 255, 255, .88); max-width: 62ch; }
.pagehead .eyebrow { color: var(--seal-hi); }
.pagehead .small, .pagehead .muted { color: rgba(255, 255, 255, .8); }
/* A link in a page header is WHITE and underlined: white holds 4.5:1 on the
   scrim where the lead ends (.7 over a white pixel), wherever it falls
   (_tmp/palette.cjs). */
.pagehead .small a, .pagehead a:not(.btn), .hero a:not(.btn) { color: #fff; text-decoration: underline; }
.pagehead .small a:hover, .pagehead a:not(.btn):hover, .hero a:not(.btn):hover { color: var(--seal-lt); }
.pagehead--plain { background: var(--char); }

.crumbs { margin-bottom: 1.5rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; font-size: .8rem; }
.crumbs li { margin: 0; color: rgba(255, 255, 255, .86); }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: rgba(255, 255, 255, .5); }
.pagehead .crumbs a { color: rgba(255, 255, 255, .9); text-decoration: none; }
.pagehead .crumbs a:hover { color: var(--seal-lt); }

.pagehead-meta { display: flex; flex-wrap: wrap; gap: .55rem 1.5rem; list-style: none; margin: 1.6rem 0 0; padding: 0; }
.pagehead-meta li { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .875rem; color: rgba(255, 255, 255, .88); }
.pagehead-meta svg { color: var(--seal); }

/* THE LABEL LINE under a header photograph (GBL § 396-b). */
.gen-note { display: flex; align-items: flex-start; gap: .4rem; margin: 1.4rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.gen-note svg { margin-top: .15rem; color: var(--seal-dk); }
.pagehead .gen-note { color: rgba(255, 255, 255, .82); }
.pagehead .gen-note svg, .hero .gen-note svg { color: var(--seal); }

/* -------------------------------------------------------------- sections */

.section { padding: clamp(3.2rem, 6.5vw, 5.5rem) 0; }
.section--alt { background: var(--bone); }
.section--tight { padding: clamp(2.4rem, 4.5vw, 3.6rem) 0; }
.section--ink { --strong: #fff; background: var(--ink); color: var(--on-ink); }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink a:not(.btn) { color: var(--seal); }
.section--ink a:not(.btn):hover { color: var(--seal-lt); }
.section--ink .eyebrow { color: var(--seal); }
.section--ink .lead { color: rgba(255, 255, 255, .86); }
.section--ink .small, .section--ink .muted { color: var(--on-ink-lo); }

.section-head { max-width: 68ch; margin-bottom: 2.6rem; }
.section-head.center { margin-inline: auto; }
.section-head p:last-child { margin-bottom: 0; }
.section-head--tight { margin: 2.2rem 0 1rem; }
.section-head--tight h3 { font-size: 1.32rem; margin: 0; }
.section-foot { margin: 2.2rem 0 0; }
.section-foot + h3, .section-foot + h2 { margin-top: 2.4rem; }

/* minmax(0, 1fr), NOT 1fr (house rules §12): a 1fr track has a min-content
   minimum, so a table that scrolls inside its own box grows the track and
   the whole page scrolls sideways instead. */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

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

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* Centring is right for a picture beside prose and wrong for two columns of
   prose, which read as misaligned: those opt into top alignment. */
.split--top { align-items: start; }
.split--rev .split-media { order: 2; }
.split-media img { width: 100%; height: auto; border-radius: var(--r-lg); }
.split-copy h2 { margin-bottom: .6em; }
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .split--rev .split-media { order: 0; }
}
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.4rem); align-items: start; }
.two-col > div > h2 { margin-bottom: .7rem; }
.two-col img { border-radius: var(--r-lg); width: 100%; height: auto; }
@media (max-width: 860px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

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

.svc-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; color: var(--body); min-width: 0;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.svc-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.svc-card-media { display: block; }
.svc-card-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.svc-card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.svc-card h3 { margin-bottom: .45rem; font-size: 1.14rem; }
.svc-card h3 a { color: var(--ink); text-decoration: none; }
.svc-card h3 a:hover { color: var(--seal-dk); text-decoration: underline; }
.svc-card p { font-size: .92rem; color: var(--muted); margin-bottom: 1rem; }
.svc-card p:last-child { margin-bottom: 0; }
.svc-card .section-foot { margin-top: auto; padding-top: .4rem; }
.svc-card-tag {
  display: flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--seal-dk); margin: 0 0 .6rem;
}
.svc-card--plain { background: var(--paper); }
.section--alt .svc-card--plain { background: var(--paper); }

.info-card {
  background: var(--bone); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.7rem;
  min-width: 0; overflow-wrap: anywhere; color: var(--body);
}
.section--alt .info-card { background: var(--paper); }
@media (max-width: 380px) { .info-card { padding: 1.15rem; } }
.info-card + .info-card { margin-top: 1.25rem; }
/* stacked cards are spaced; cards in a grid row share one top line (§36.6) */
.grid > .info-card + .info-card { margin-top: 0; }
.info-card h3 { font-size: 1.1rem; margin-bottom: .7rem; }
.info-card p { font-size: .93rem; }

/* ------------------------------------------------------------------ team */

.team-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; color: var(--body); min-width: 0; }
.team-photo { display: block; }
.team-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.team-card-body { padding: 1.35rem 1.45rem 1.6rem; }
.team-card h3 { font-size: 1.1rem; margin-bottom: .18rem; }
.team-role { font-size: .875rem; color: var(--char-2); font-weight: 600; margin: 0 0 .7rem; }
.team-card p { font-size: .93rem; }
.team-card .small { margin: 0 0 .5rem; }
.team-shot { display: flex; align-items: flex-start; gap: .35rem; margin: .8rem 0 0; color: var(--muted-lt); }
.team-shot svg { color: var(--seal-dk); margin-top: .2em; }

/* ----------------------------------------------------------------- lists */

.checklist { list-style: none; margin: 0 0 1.2em; padding: 0; }
.checklist li { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .6rem; font-size: .96rem; }
.checklist svg { color: var(--seal-dk); margin-top: .3em; }
/* the cross is the refusal red, so the two lists differ by more than a shape */
.checklist--no svg { color: var(--signal); }

.deflist { list-style: none; margin: 0; padding: 0; }
.prose + .deflist, .deflist + .prose { margin-top: 1.8rem; }
.deflist > li { padding: 1.15rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.deflist > li:first-child { padding-top: 0; }
.deflist > li:last-child { border-bottom: 0; padding-bottom: 0; }
.deflist h3 { font-family: var(--sans); font-size: 1rem; font-weight: 650; color: var(--ink); margin-bottom: .3rem; }
.deflist p { font-size: .95rem; color: var(--muted); margin: 0; }

.numbered { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.numbered > li { counter-increment: step; position: relative; padding-left: 3.4rem; margin-bottom: 1.7rem; }
.numbered > li:last-child { margin-bottom: 0; }
.numbered > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -.1rem;
  font-family: var(--serif); font-size: 1.35rem; color: var(--seal-dk);
  border-right: 1px solid var(--line); padding-right: .85rem; width: 2.55rem; text-align: right;
}
.numbered h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.numbered p { font-size: .95rem; color: var(--muted); margin: 0; }
/* A preparation list (S.prepList): one plain sentence an item. */
.numbered--plain > li { margin-bottom: 1rem; padding-top: .15rem; }
.numbered--plain > li::before { font-size: 1.1rem; top: .05rem; }
.numbered--plain p { font-size: 1rem; color: var(--body); }

.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { padding: .7rem 0; border-bottom: 1px solid var(--line); margin: 0; font-size: .95rem; color: var(--muted); }
.link-list li:last-child { border-bottom: 0; }
.link-list .small { display: block; margin-top: .2rem; }

/* A list of sentences, each a statement (a boundary's facts): a mark, not a number. */
.fact-list { list-style: none; margin: 0 0 1.2em; padding: 0; }
.fact-list li { position: relative; margin: 0; padding: .7rem 0 .7rem 1.4rem; border-bottom: 1px solid var(--line); font-size: .97rem; color: var(--body); }
.fact-list li:last-child { border-bottom: 0; }
.fact-list li::before { content: ""; position: absolute; left: .2rem; top: 1.3rem; width: .45rem; height: .45rem; border-radius: 1px; background: var(--seal-dk); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.chips li { margin: 0; font-size: .85rem; color: var(--body); padding: .38rem .8rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); }
.chips a { color: var(--char-2); text-decoration: none; }
.chips a:hover { color: var(--seal-dk); text-decoration: underline; }

/* ------------------------------------------------------------------- faq */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 0; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--ink); line-height: 1.34;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px; margin-top: .42em;
  border-right: 1.5px solid var(--seal-dk); border-bottom: 1.5px solid var(--seal-dk);
  transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--char-2); }
.faq-body { padding: 0 0 1.35rem; max-width: 78ch; }
.faq-body p { font-size: .96rem; color: var(--muted); margin: 0; }

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

.cta-band { --strong: #fff; background: var(--char); color: rgba(255, 255, 255, .84); padding: clamp(2.8rem, 5vw, 4rem) 0; }
.cta-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; }
.cta-band h2 { color: #fff; margin-bottom: .5em; }
.cta-band .lead { color: rgba(255, 255, 255, .86); max-width: 62ch; margin: 0; }
@media (max-width: 860px) { .cta-inner { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------- advice note
   Four kinds. --warm is a promise the practice keeps (the written plan,
   the published fee, the written agreement); --cool is information, on a
   cool green-gray ground; --warn is the quiet, definite "read this
   properly" (not investment advice, the registration line, the limits) —
   neutral, because a qualification on every page shown in red would leave
   red meaning nothing; --urgent is the refusal red and is kept for the
   few sentences about protecting yourself from somebody else (S.NOTES
   names which). Every note carries its own light ground, so each restates
   its own text colour and --strong. */
.advice-note {
  --strong: var(--ink);
  display: flex; align-items: flex-start; gap: .65rem;
  background: var(--bone); border: 1px solid var(--line); border-left: 3px solid var(--seal-dk);
  border-radius: var(--r); padding: 1rem 1.2rem;
  font-size: .9rem; color: var(--body); line-height: 1.6;
  margin: 2.4rem 0 0;
}
.advice-note p { margin: 0; min-width: 0; }
.advice-note svg { color: var(--seal-dk); margin-top: .2em; }
.advice-note + .advice-note { margin-top: 1rem; }
.advice-note--lead { margin: 0 0 1.8rem; }
.advice-note--warm { background: var(--seal-lt); border-color: var(--warm-line); border-left-color: var(--seal-dk); color: var(--warm-ink); }
.advice-note--cool { --strong: var(--cool-strong); background: var(--cool-lt); border-color: var(--line); border-left-color: var(--char-2); color: var(--cool-ink); }
.advice-note--cool svg { color: var(--char-2); }
.advice-note--warn { background: var(--bone-2); border-color: var(--line-2); border-left-color: var(--ink); color: var(--body); }
.advice-note--warn svg { color: var(--ink); }
.advice-note--urgent { --strong: #5a1611; background: var(--signal-lt); border-color: var(--signal); border-left: 4px solid var(--signal); color: var(--urgent-ink); }
.advice-note--urgent svg { color: var(--signal); }
.advice-note a { color: inherit; font-weight: 600; }

/* ----------------------------------------------------------------- tables
   EVERY TABLE IS INSIDE .table-wrap, which scrolls on a phone rather than
   widening the page, and is `position: relative` so an .sr span inside a
   table cannot escape it (house rules §37.7). A `.num` cell is right-aligned
   and MAY WRAP: a range breaks at its "to" (§37.7). */
.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.4rem; }
.table-wrap > table { min-width: 22rem; }
.rate-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.rate-table caption { caption-side: top; text-align: left; padding-bottom: .7rem; line-height: 1.5; }
.rate-table th, .rate-table td { text-align: left; padding: .62rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.rate-table th:first-child, .rate-table td:first-child { padding-left: 0; }
.rate-table th:last-child, .rate-table td:last-child { padding-right: 0; }
.rate-table thead th { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-lt); font-weight: 700; border-bottom-color: var(--line-2); vertical-align: bottom; }
.rate-table tbody th { font-weight: 620; color: var(--ink); }
.rate-table td { color: var(--body); font-variant-numeric: tabular-nums; }
.rate-table .num { text-align: right; }
.rate-table td.num { color: var(--brass-dk); font-weight: 650; }
/* A FIGURE COLUMN HAS A FLOOR (house rules §32.4 #3, §37.7): a range may break
   at its "to", never between a figure and its "to" — at 390px a range read
   on three lines without it (an earlier build). */
.rate-table td.num { min-width: 5.9rem; }
.rate-table tbody tr:last-child th, .rate-table tbody tr:last-child td { border-bottom: 0; }
/* The head of a row group in S.feeTable(): the group's own sentence from D. */
.rate-table tr.rate-group th {
  padding: 1.1rem 0 .5rem; font-family: var(--sans); font-size: .84rem; font-weight: 500; line-height: 1.5;
  color: var(--muted); border-bottom: 1px solid var(--line-2); white-space: normal; text-wrap: pretty;
}
.rate-table tbody tr.rate-group:first-child th { padding-top: .4rem; }

.hours-table { width: 100%; border-collapse: collapse; font-size: .91rem; }
.hours-table caption { caption-side: top; text-align: left; padding-bottom: .6rem; }
.hours-table th, .hours-table td { text-align: left; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.hours-table th { font-weight: 600; color: var(--ink); }
.hours-table td { color: var(--muted); text-align: right; }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }
.hours-table tr[data-today="true"] th, .hours-table tr[data-today="true"] td { color: var(--ink); font-weight: 700; }

/* ------------------------------------------------- the worked example
   S.feeExample(): a kicker that says what the card is before anything else
   on it does ("A worked example: a household's fees"), who it is for, the
   fee lines and the total for the year (.sum-rows), and the closing note. BOTH ENDS OF EVERY RANGE
   ARE IN ONE .num SPAN, at one size (6 RCNY § 5-12). `.sum-rows
   li.sum-total`, never a bare `.sum-total`: the bare class loses to
   `.sum-rows li` (house rules §22). */
.sum {
  --strong: var(--ink);
  border: 1px solid var(--line); border-left: 3px solid var(--brass-dk);
  border-radius: var(--r); background: var(--bone); color: var(--body);
  padding: 1.15rem 1.3rem 1.25rem; margin: 1.6rem 0; min-width: 0;
}
.section--alt .sum { background: var(--paper); }
.grid > .sum { margin: 0; }
.sum-kicker { display: flex; align-items: center; gap: .4rem; margin: 0 0 .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--seal-dk); }
.sum-h { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .55rem; row-gap: .1rem; margin: 0 0 .6rem; font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.sum-h .muted { font-family: var(--sans); font-weight: 400; color: var(--muted); }
.sum-answers { margin: 0 0 .8rem; font-size: .86rem; color: var(--muted); }
.sum-answers summary { cursor: pointer; color: var(--char-2); font-weight: 600; list-style-position: inside; }
.sum-answers summary:hover { color: var(--seal-dk); }
.sum-qa { margin: .6rem 0 0; display: grid; gap: .35rem; }
.sum-qa > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .1rem .9rem; padding-bottom: .35rem; border-bottom: 1px dotted var(--line); }
.sum-qa > div:last-child { border-bottom: 0; }
.sum-qa dt { color: var(--muted); }
.sum-qa dd { margin: 0; color: var(--body); }
@media (max-width: 520px) { .sum-qa > div { grid-template-columns: minmax(0, 1fr); } }
.sum-rows { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
/* TWO LINES A ROW: the label and the figure on top, the explanation under
   the label. The label column has a floor so a long figure never squeezes it
   to a letter a line (house rules §32.4 #3). */
.sum-rows li {
  display: grid; grid-template-columns: minmax(7.5rem, 1fr) auto; gap: .1rem 1rem; align-items: baseline;
  padding: .4rem 0; border-bottom: 1px dotted var(--line); margin: 0; color: var(--body);
}
.sum-rows li span:first-child { min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--ink); }
.sum-rows li span:nth-child(2) { grid-column: 1; grid-row: 2; font-size: .84rem; color: var(--muted); }
.sum-rows li span:nth-child(3) { grid-column: 2; grid-row: 1; }
.sum-rows .num { font-variant-numeric: tabular-nums; text-align: right; color: var(--brass-dk); font-weight: 650; white-space: normal; max-width: 15rem; }
.sum-rows li.sum-total { border-bottom: 0; border-top: 1px solid var(--line-2); margin-top: .3rem; padding-top: .6rem; font-size: 1.02rem; }
.sum-rows li.sum-total .num { color: var(--ink); font-weight: 700; }
/* The subtotal row: a rule above it, the figures of the lines end there. */
.sum-rows li.sum-sub-row { border-top: 1px solid var(--line-2); margin-top: .2rem; }
/* A line across both columns: the first meeting's condition above the lines,
   the no-sales-tax line where a tax row would be. */
.sum-rows li.sum-line { display: block; border-bottom: 1px dotted var(--line); padding: .15rem 0 .45rem; }
.sum-rows li.sum-line span:first-child { font-weight: 500; font-size: .86rem; color: var(--muted); }
@media (max-width: 420px) { .sum-rows li { grid-template-columns: minmax(0, 1fr) auto; } .sum-rows .num { max-width: 10rem; } }
.sum-flags { list-style: none; margin: .8rem 0 0; padding: 0; font-size: .86rem; }
.sum-flags li { display: flex; align-items: flex-start; gap: .45rem; margin: 0 0 .4rem; color: var(--body); }
.sum-flags svg { color: var(--seal-dk); margin-top: .22em; }
.sum-note { margin: .8rem 0 0; font-size: .85rem; color: var(--muted); }
/* A part's own heading inside the card, and the sentence under it. */
.sum-sub { margin: 1.05rem 0 .35rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.sum-lead { margin: 0 0 .5rem; font-size: .86rem; color: var(--muted); }
.sum-rows + .sum-lead { margin: .6rem 0 0; }
/* ------------------------------------------------------------- pictures
   EVERY PICTURE IS LABELED (GBL § 396-b): on the picture (.gen-wrap with a
   .gen-tag), or for a page header and a wide figure in a line beside it. */
.gen-wrap { position: relative; display: block; }
.gen-wrap > img { display: block; width: 100%; height: auto; }
.gen-tag {
  position: absolute; left: .5rem; bottom: .5rem; max-width: calc(100% - 1rem);
  background: rgba(21, 48, 43, .82); color: #fff;
  font-size: .68rem; line-height: 1.35; padding: .22rem .5rem; border-radius: 3px;
}
.figure-wide { margin: 0 0 1.4rem; }
.figure-wide img { width: 100%; height: auto; border-radius: var(--r-lg); }
.figure-wide figcaption { margin-top: .45rem; }
.split-media .gen-wrap img, .two-col .gen-wrap img { border-radius: var(--r-lg); }

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

.prose { max-width: 74ch; }
.prose h2 { margin-top: 2.6rem; font-size: 1.5rem; }
.prose h3 { margin-top: 1.9rem; font-size: 1.13rem; font-family: var(--sans); font-weight: 650; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .5em; }
.wrap--narrow + .wrap--narrow > .prose:first-child { margin-top: 1rem; }
.prose + .prose { margin-top: 1.1em; }

/* ---------------------------------------------------------------- 404 */

.err { text-align: center; padding: clamp(4rem, 10vw, 8rem) 0; }
.err-code { font-family: var(--serif); font-size: clamp(4rem, 12vw, 8rem); line-height: 1; color: var(--seal-dk); margin-bottom: .3rem; }

/* ==========================================================================
   THE DARK BAND. A component with its own light ground keeps its own ink
   inside .section--ink (house rules §15, §19, §29.8: a light card under a
   blanket dark-ground rule draws white headings on white paper, and there
   is nothing to see because there is nothing there). And every component
   that sits directly on the band restates its colours for it.
   ========================================================================== */
.section--ink :is(.svc-card, .info-card, .team-card, .sum) { --strong: var(--ink); color: var(--body); }
.section--ink :is(.svc-card, .info-card, .team-card) :is(h3, h3 a) { color: var(--ink); }
.section--ink :is(.svc-card, .info-card, .team-card, .sum) :is(p, .small, .muted, .sum-note, .sum-answers) { color: var(--muted); }
.section--ink :is(.svc-card, .info-card, .team-card, .sum) a:not(.btn) { color: var(--char-2); }
.section--ink :is(.svc-card, .info-card, .team-card, .sum) :is(.svc-card-tag, .sum-kicker, .team-shot svg, .link-more) { color: var(--seal-dk); }
.section--ink .sum-h { color: var(--ink); }
.section--ink .sum-rows li span:first-child { color: var(--ink); }
.section--ink .sum-rows .num { color: var(--brass-dk); }
.section--ink .sum-rows li.sum-total .num { color: var(--ink); }
.section--ink .sum-rows li.sum-line span:first-child { color: var(--muted); }
/* the verdict and the card's own headings keep their ink: the blanket
   `.sum p` rule above would turn the stop sentence muted gray on its red tint */
.section--ink .sum .sum-verdict p { color: inherit; }
.section--ink .sum .sum-verdict p.sum-verdict-h { color: var(--ink); }
.section--ink .sum .sum-verdict--stop p.sum-verdict-h { color: #5a1611; }
.section--ink .sum .sum-verdict p.sum-verdict-k { color: var(--muted); }
.section--ink .sum .sum-verdict--stop p.sum-verdict-k { color: var(--signal); }
.section--ink .sum p.sum-sub { color: var(--ink); }
.section--ink .team-role { color: var(--char-2); }

.section--ink .checklist svg, .section--ink .numbered > li::before { color: var(--seal); }
.section--ink .numbered > li::before { border-right-color: var(--on-ink-line); }
.section--ink :is(.numbered, .deflist) h3 { color: #fff; }
.section--ink :is(.numbered, .deflist) p, .section--ink .numbered--plain p { color: var(--on-ink); }
.section--ink .deflist > li { border-bottom-color: var(--on-ink-line); }
.section--ink .faq, .section--ink .faq details { border-color: var(--on-ink-line); }
.section--ink .faq summary { color: #fff; }
.section--ink .faq summary::after { border-color: var(--seal); }
.section--ink .faq-body p { color: var(--on-ink); }
.section--ink .link-list li { color: var(--on-ink-lo); border-bottom-color: var(--on-ink-line); }
.section--ink .fact-list li { color: var(--on-ink); border-bottom-color: var(--on-ink-line); }
.section--ink .fact-list li::before { background: var(--seal); }
.section--ink .chips li { border-color: rgba(255, 255, 255, .26); color: var(--on-ink); background: rgba(255, 255, 255, .05); }
.section--ink .rate-table thead th { color: var(--on-ink-lo); border-bottom-color: rgba(255, 255, 255, .26); }
.section--ink .rate-table tbody th { color: #fff; }
.section--ink .rate-table td { color: var(--on-ink); }
.section--ink .rate-table td.num { color: var(--brass); }
.section--ink .rate-table th, .section--ink .rate-table td { border-bottom-color: var(--on-ink-line); }
.section--ink .rate-table tr.zone-refused td { color: var(--seal); }
.section--ink .rate-table tr.rate-group th { color: var(--on-ink-lo); border-bottom-color: rgba(255, 255, 255, .26); }
.section--ink .hours-table th { color: #fff; }
.section--ink .hours-table td { color: var(--on-ink-lo); }
.section--ink .hours-table th, .section--ink .hours-table td { border-bottom-color: var(--on-ink-line); }
.section--ink .gen-note, .section--ink .figure-wide figcaption { color: var(--on-ink-lo); }
.section--ink .gen-note svg { color: var(--seal); }
.section--ink .team-shot { color: var(--muted-lt); }

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

.site-footer { --strong: #fff; background: var(--ink); color: rgba(255, 255, 255, .74); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; font-size: .92rem; }
.site-footer .brand, .site-footer .brand-mark, .site-footer .brand-name { color: #fff; }
.site-footer .brand-sub { color: rgba(255, 255, 255, .7); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem; padding-bottom: 2.6rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
@media (max-width: 980px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-brand .brand { margin-bottom: 1.1rem; }
.footer-brand p { font-size: .89rem; color: rgba(255, 255, 255, .72); max-width: 44ch; }
.site-footer h4 { color: #fff; font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer h4 + .hours-table { margin-top: 0; }
.footer-contact h4:not(:first-child) { margin-top: 1.6rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .48rem; font-size: .875rem; }
.site-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.site-footer a:hover { color: var(--seal); }
.footer-contact li { display: flex; align-items: flex-start; gap: .55rem; min-width: 0; overflow-wrap: anywhere; }
.footer-contact svg { color: var(--seal); margin-top: .2em; }
/* THE FOOTER IS A DARK BAND TOO (house rules §19): the hours table's ink
   headings were ink on ink here once, 800 failures in one audit. */
.site-footer .hours-table caption, .site-footer .small { color: rgba(255, 255, 255, .7); }
.site-footer .hours-table th { color: #fff; }
.site-footer .hours-table td { color: rgba(255, 255, 255, .74); }
.site-footer .hours-table th, .site-footer .hours-table td { border-bottom-color: rgba(255, 255, 255, .12); }
.site-footer .hours-table tr[data-today="true"] th, .site-footer .hours-table tr[data-today="true"] td { color: var(--seal); }
.footer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.6rem 0 1.2rem; font-size: .8rem; color: rgba(255, 255, 255, .7); }
.footer-bar ul { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.footer-bar li { margin: 0; font-size: .8rem; }
.footer-disclaimer {
  display: block; font-size: .8rem; line-height: 1.62; color: rgba(255, 255, 255, .7);
  border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 1.1rem; margin: 0 0 1.1rem; max-width: 100ch;
}
.footer-disclaimer:last-child { margin-bottom: 0; }
.footer-disclaimer svg { color: var(--seal); margin-right: .25rem; }
.footer-disclaimer strong { color: rgba(255, 255, 255, .92); }
.footer-disclaimer a { color: var(--seal); text-decoration: underline; }

/* ------------------------------------------------------------- motion
   site.js adds .rv only to elements BELOW THE FOLD AT LOAD and reveals them
   with a scroll sweep, so nothing above the fold is ever hidden and a failed
   script hides nothing. Transforms and opacity only. Off under reduced
   motion. */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .pagehead-media img { transform: none; }
}

/* ------------------------------------------------------------- printing */

@media print {
  .topbar, .site-header, .drawer, .cta-band, .site-footer, .hero-media, .pagehead-media { display: none !important; }
  .pagehead, .hero { background: none; color: #000; }
  .pagehead h1, .hero h1 { color: #000; }
  body { font-size: 11pt; color: #000; }
  a { text-decoration: none; color: #000; }
  .sum-answers > *:not(summary) { display: block; }
}

/* A grid of cards followed by prose or links in the same section needs the
   section's own rhythm between them (the home page's two service bands). */
.grid + .prose, .grid + .link-list, .grid + .section-foot { margin-top: 2.25rem; }
/* A table that follows prose or a split, and prose that follows a table, keep
   the same gap (the rates page's rate table and its worked examples). */
.prose + .table-wrap, .split + .table-wrap, .table-wrap + .prose, .table-wrap + .table-wrap, .advice-note + .table-wrap { margin-top: 2rem; }
.prose + .checklist, .prose + .deflist, .prose + .fact-list { margin-top: .9rem; }

/* Spacing between a note and the prose after it, and between prose and the card grid after it
   (lead's full-size look, index fees and "where a plan stops" sections touched). */
.advice-note + .prose, .prose + .advice-note { margin-top: 1.4rem; }
.prose + .grid { margin-top: 2.25rem; }
.advice-note + .link-list { margin-top: 1rem; }
.advice-note + .checklist, .prose + .numbered { margin-top: 1.1rem; }
.numbered + .link-list, .checklist + .link-list { margin-top: 1.2rem; }
.advice-note + .chips { margin-top: 1rem; }