/* Data Dynamics Australia site stylesheet: the light, report-style design of 4 November 2026, in one file.
   Consolidated on 5 November 2026 from the thirteen layered files now in archive/css-2026-11-05-before-consolidation/.
   Same rendering, with dead and overridden rules removed. build.py looks for the first line of this comment.
   Order: fonts, tokens, keyframes, base, header and menu, heroes, example sheets and charts, rows and lists,
   comparison table, counters, the blue band, forms and the enquiry dialog, footer, cookie consent, utilities,
   then the media queries (one block each), reduced motion and print. */

/* Fonts: Newsreader for headings, IBM Plex Sans for text (both preloaded by build.py) */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/assets/newsreader-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/assets/newsreader-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: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url(/assets/ibmplexsans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url(/assets/ibmplexsans-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; }

/* ===== Tokens ===== */
:root {
  /* The card shadow in four layers (Martin, 5 Nov 2026: "top light, bottom shade, contact and glow") */
  --lift: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(10, 22, 40, .10), 0 8px 16px -8px rgba(10, 22, 40, .14), 0 24px 56px -16px rgba(10, 22, 40, .14);
  --lift-blue: 0 -1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(6, 14, 28, .22), 0 10px 20px -10px rgba(6, 14, 28, .32), 0 28px 64px -18px rgba(6, 14, 28, .34);
  --lift-btn: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(10, 22, 40, .20), 0 4px 10px -4px rgba(10, 22, 40, .28), 0 12px 28px -10px rgba(23, 146, 247, .55);   /* buttons: top light, contact, shade, a blue glow */
  --lift-btn-dark: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(6, 14, 28, .35), 0 4px 10px -4px rgba(6, 14, 28, .40), 0 14px 30px -10px rgba(6, 14, 28, .45);   /* the navy button on the blue band */
  --lift-btn-light: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(10, 22, 40, .12), 0 4px 10px -4px rgba(10, 22, 40, .18), 0 12px 26px -12px rgba(10, 22, 40, .22);   /* white buttons */
  --lift-modal: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 3px rgba(6, 14, 28, .24), 0 16px 32px -12px rgba(6, 14, 28, .42), 0 44px 96px -24px rgba(6, 14, 28, .46);
  color-scheme: light;
  /* One type scale (Martin, 5 Nov 2026): phone, iPad and desktop read as one site. 390 / 820 / 1440 px. */
  --fs-h1: clamp(2.5rem, 1.75rem + 3.1vw, 4.75rem);      /* 40 / 54 / 73 */
  --fs-h2: clamp(2rem, 1.45rem + 2.1vw, 3.5rem);         /* 32 / 40 / 53 */
  --fs-h3: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);   /* 22 / 25 / 30 */
  --fs-h4: clamp(1.125rem, 1rem + 0.55vw, 1.5rem);       /* 18 / 21 / 24, about a fifth under H3 at every width */
  --fs-lede: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);  /* 17 / 18 / 19 */
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;
  --navy: #0A1628;
  --navy-raised: #FFFFFF;
  --ink: #0A1628;
  --ink-2: #34445B;
  --text: #0A1628;
  --muted: #3E4E66;
  --ink-muted: #4C5D77;
  --ink-faint: #5E6E87;
  --rule: #D6DEE8;
  --paper-rule: #D6DEE8;
  --mist: #F2F5F9;
  --blue: #1792F7;
  --blue-deep: #0C74CF;
  --blue-ink: #0B66BC;
  --blue-wash: #E7F2FE;
  --main: #4A55D0; /* the main chart series: results, totals, senior debt (indigo, Martin, 4 Nov 2026) */
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --display: "IBM Plex Sans", "Segoe UI", sans-serif;
  --serif-e: "Newsreader", "Iowan Old Style", Georgia, serif;
  --quote: "Newsreader", "Iowan Old Style", Georgia, serif;
  --label: 500 12px/1.3 var(--sans);
  --wrap: 1280px;
  --gutter: 16px;
  --sp-head-gap: 24px;
  --sp-after-head: 64px;
  --sp-row: 32px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* Keyframes */
@keyframes rise { from { transform: translateY(12px); } to { transform: none; } }
@keyframes tabtime { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes stop-in { from { transform: translateY(-0.5em) rotate(-135deg) scale(.2); } to { transform: rotate(45deg); } }
@keyframes enq-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes svc-sheet-smooth { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cc-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tabtime-e { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ===== Base: page, type, links and buttons ===== */
/* Page */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap {
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
td { font-variant-numeric: tabular-nums; }
p { margin: 0; text-wrap: pretty; }
.nw { white-space: nowrap; }   /* a title's last word and its diamond, never split (Martin, 5 Nov 2026) */
li, dd, td, blockquote, figcaption { text-wrap: pretty; }
a, button, label, input, textarea { touch-action: manipulation; }
body::before { content: ""; position: fixed; inset: 0 0 auto; z-index: 40; height: env(safe-area-inset-top, 0px); background: #FFFFFF; }
::selection { background: #CFE6FD; color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 3px; border-radius: 2px; }
.traces, canvas.flow, .frag, .site-footer .foot-mark { display: none; }
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  hyphens: manual;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  background: #FFFFFF;
  color: var(--ink);
  font-feature-settings: normal;
}
p .link { display: inline; }
a.link, p a:not([class]), .prose a, .row-work a, .email a.email-address {
  color: var(--blue-ink);
  font-weight: 500;
  letter-spacing: 0;
  background: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* Every underline is DDA Blue (Martin, 5 Nov 2026); the text keeps its own colour */
a, .link, .copy { text-decoration-color: var(--blue); }
html { scroll-behavior: smooth; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 120px); -webkit-tap-highlight-color: rgba(23, 146, 247, .18); }
/* Type */
.paper .lede, .paper .muted { color: var(--ink-muted); }
h1, h2, h3, .sheet-title { font-feature-settings: "kern", "liga", "onum" 0; }
.lede { color: var(--muted); letter-spacing: 0; }
.crumb { margin-bottom: 4px; }
.stop {
  display: inline-block;
  font-style: normal;
  color: transparent;
  width: .17em;
  height: .17em;
  margin-left: .07em;
  background: var(--blue);
  transform: rotate(45deg);
  vertical-align: baseline;
  overflow: hidden;
  user-select: text;
}
h1, h2 { margin: 0; text-wrap: balance; }
.sheet-title { text-wrap: balance; }
#why-title { text-wrap: pretty; }
.e-head, .in-short .job, .door-qs .qlist li, .door-qs .keeps b, .refer-steps b, .refer-panel b, .cta-steps li b, .ef-done b, .enq-head { text-wrap: pretty; }
h1 em { display: block; }
.muted, .prose p { font-size: var(--fs-body); }
h1 { font-family: var(--serif-e); font-weight: 360; letter-spacing: 0; font-variation-settings: "opsz" 72; }
h3 { margin: 0; text-wrap: balance; font-variation-settings: "opsz" 72; font-weight: 600 !important; }
h2 {
  max-width: 16em;
  font-family: var(--serif-e);
  font-variation-settings: "opsz" 72;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: 0;
  font-weight: 360;
}
.lede, .section-head .lede { font-size: var(--fs-lede); line-height: 1.55; }
.lede,
.page-hero .outcome,
.why-intro .muted,
.in-short p,
.prose p,
.row p,
.wrap > .rows > .row li,
.index p,
.svc-item .svc-desc,
.area.area-solo .area-copy p,
.refer-panel p,
.e-items,
.sec-cta,
.contact-card p,
.refer > div > p,
.steps p,
.vs td,
.compare td,
.hero-note,
.ex-s,
.ex-note {
  max-width: 52ch;
}
/* Row text runs a little wider than running prose (Martin, 5 Nov 2026) */
.row p, .wrap > .rows > .row li, .when-list li, .client-row .row-lead, .index p, .svc-item .svc-desc, .area.area-solo .area-copy p { max-width: 60ch; }
/* Paper sections and section heads */
.paper .link:hover { color: var(--blue-deep); }
.section-head { display: grid; max-width: 46rem; gap: var(--sp-head-gap); }
.js-on .section-head .stop, .js-on .why-copy .stop { transition: transform .7s cubic-bezier(.3,1.6,.5,1) .35s; }
.js-on .section-head:not(.in) .stop, .js-on .why-copy:not(.in) .stop { transform: translateY(-0.5em) rotate(-135deg) scale(.2); }
.js-on .section-head h2, .js-on .why-copy h2 { transition: transform .8s var(--ease), clip-path .8s var(--ease); }
.js-on .section-head:not(.in) h2, .js-on .why-copy:not(.in) h2 { transform: translateY(28px); clip-path: inset(-0.3em -0.3em 100% -0.3em); }
.section-head h2, .why-copy h2 { max-width: 20ch; clip-path: inset(-0.3em -0.3em -0.45em -0.3em); }
.paper { color: var(--ink); position: relative; background: #FBFCFD; padding-inline: 0; }
.paper + .paper { padding-top: 0; border-top: 0; }
.paper > .wrap { background: transparent; box-shadow: none; padding-inline: var(--gutter); padding-block: clamp(80px, 9vw, 128px); }
.paper:last-of-type { padding-bottom: 0; }
.paper:nth-of-type(even) {
  background: linear-gradient(180deg, #FBFCFD 0, #F2F5F9 min(240px, 30%), #F2F5F9 calc(100% - min(240px, 30%)), #FBFCFD 100%);
}
.paper + .paper > .wrap { padding-top: clamp(40px, 5vw, 72px); }
/* Links and buttons */
.link { display: inline-flex; align-items: center; gap: 8px; transition: background-size .3s var(--ease), color .2s ease; }
.btn { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; position: relative; isolation: isolate; }
.btn-primary { gap: 10px; }
.btn, .cc-btn { appearance: none; -webkit-appearance: none; }
.btn.btn-primary {
  min-height: 48px;
  padding: 0 22px;
  margin: 0;
  background: var(--blue);
  color: #FFFFFF;
  border: 0;
  border-radius: 3px;
  box-shadow: var(--lift-btn);
  transform: none;
  font: 700 1rem/1 var(--sans);
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn.btn-primary:hover, .btn.btn-primary:focus-visible { background: var(--navy); }
/* The secondary ask, Book a call, as a button beside the primary (Martin, 5 Nov 2026) */
.btn.btn-secondary { min-height: 48px; padding: 0 22px; margin: 0; background: #FFFFFF; color: var(--navy); border: 0; border-radius: 3px; font: 600 1rem/1 var(--sans); letter-spacing: 0; text-decoration: none; cursor: pointer; transition: background-color .2s ease; }
.btn.btn-secondary { box-shadow: var(--lift-btn-light); }   /* white, no outline: the shadow is its edge (Martin, 5 Nov 2026) */
.contact .btn.btn-secondary { box-shadow: var(--lift-btn-light); }   /* as light as every other white button (Martin, 5 Nov 2026) */
.btn.btn-secondary:hover, .btn.btn-secondary:focus-visible { background: var(--mist); }
.link:hover,
a.link:hover,
p a:not([class]):hover,
.prose a:hover,
.doc-facts a:hover,
.kv dd a:hover,
.row-work a:hover,
.refer-note a:hover,
.ef-note a:hover,
.enq-alt a:hover,
.refer-panel a:hover,
.email a.email-address:hover,
.legal-links .link:hover,
.hero-actions .link:hover,
.sec-cta .link:hover,
.contact-call .link:hover,
.link:focus-visible,
p a:not([class]):focus-visible {
  color: var(--navy);
}
.e-go, .index .go, .area-copy .link, .client-row .row-more, .refer .row-more {
  color: var(--blue-ink);
  font: 500 1rem/1.3 var(--sans);
  letter-spacing: 0;
  background: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.go:hover,
a:hover .go,
.entry:hover .e-go,
.index a:hover .go,
.row-more:hover,
.area-copy .link:hover,
.client-row .row-more:hover,
.refer .row-more:hover {
  color: var(--navy);
}

/* ===== Header and menu ===== */
/* Header bar */
.nav a:not(.btn) { position: relative; }
.nav a:not(.btn):hover { color: var(--text); }
.brand:hover img { opacity: .85; }
.site-header .wrap, .site-header.is-home .wrap { gap: 24px; transition: min-height .3s var(--ease); }
.nav { display: flex; align-items: center; gap: 12px; }
.nav .nav-links a:focus-visible { outline: 2px solid #1792F7; outline-offset: 2px; }
.site-header.is-scrolled .progress { opacity: 1; }
.nav .nav-links a, .nav .btn { white-space: nowrap; }
html.smooth-js { scroll-behavior: auto; }
.skip:focus { top: 16px; outline: 2px solid #fff; outline-offset: 2px; }
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--paper-rule);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 6px 24px -18px rgba(10, 22, 40, .35);
}
.site-header.menu-open { background: #FFFFFF; }
.nav-links { align-items: center; background: none; border: 0; box-shadow: none; padding: 0; gap: 28px; border-radius: 0; }
.nav .nav-links a:hover { background: none; border-bottom-color: var(--paper-rule); color: var(--navy); }
.site-header .progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
  opacity: 0;
  transition: opacity .3s;
  background: var(--blue);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 80px; }
.brand img { width: auto; max-width: none; object-fit: contain; transition: opacity .2s ease; height: 46px; }
.skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  background: var(--blue);
  color: #FFFFFF;
  border-radius: 3px;
  font: 700 1rem/1 var(--sans);
  padding: 14px 18px;
  text-decoration: none;
}
.nav .nav-links a {
  display: inline-flex;
  align-items: center;
  letter-spacing: 0;
  transition: color .2s var(--ease), background-color .2s var(--ease);
  min-height: 0;
  padding: 8px 0 6px;
  border-radius: 0;
  font: 500 1rem/1 var(--sans);
  background: none;
  box-shadow: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-2);
  text-decoration: none;
}
.nav .nav-links a[aria-current="page"] { background: none; color: var(--navy); border-bottom-color: var(--blue); }
.brand { flex: none; text-decoration: none; }
/* Menu button */
.menu-btn i { display: block; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.menu-btn {
  display: none;
  appearance: none;
  border: 1px solid var(--paper-rule);
  min-height: 44px;
  padding: 0 14px;
  cursor: pointer;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  background: #FFFFFF;
}
/* Menu panel */
.menu-panel { display: none; background: #FFFFFF; }
.menu-panel a { color: var(--ink); font-family: var(--serif-e); font-weight: 360; }
.menu-foot { font-family: var(--sans); }
.menu-foot p a { color: var(--ink-2); text-decoration: none; }
.menu-foot p a:hover, .menu-foot p a:focus-visible { color: var(--navy); text-decoration: underline; }

/* ===== Heroes ===== */
/* Home hero */
.hero .wrap { gap: clamp(40px, 6vw, 96px); padding-block: clamp(40px, 7vw, 96px) clamp(96px, 12vw, 160px); align-items: center; }
.hero h1 { animation: rise .9s .05s var(--ease) both; }
.hero .lede { animation: rise .9s .2s var(--ease) both; margin-top: 32px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; animation: rise .9s .32s var(--ease) both; margin-top: 40px; gap: 16px; }
.hero-note { animation: rise .9s .4s var(--ease) both; font-family: var(--sans); letter-spacing: 0; margin-top: 24px; }
.hero > .wrap { padding-bottom: clamp(56px, 7vw, 96px); }
.hero h1 em { font-weight: inherit; color: inherit; }
.hero h1 .stop { animation: stop-in .7s .75s cubic-bezier(.3,1.6,.5,1) both; }
.hero > .wrap, .page-hero > .wrap { position: relative; z-index: 1; }
.hero { z-index: 2; position: relative; overflow-x: clip; overflow-y: visible; }
.hero.hero-e .wrap { display: block; }
.hero-e h1 { color: var(--text); max-width: none; }
.hero-e h1 > span { display: block; white-space: normal; }
.hero-e h1 em { font-style: normal; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.hero, .page-hero { isolation: isolate; background: var(--mist); border-bottom: 1px solid var(--paper-rule); }
.hero-rule { height: 1px; margin: clamp(26px, 3.6vw, 44px) 0 clamp(28px, 3.8vw, 46px); background: var(--ink); opacity: .85; }
.hero-e h1, .page-hero h1 { font-size: var(--fs-h1); line-height: 0.98; }
/* Hero documents and their tabs */
.stage { position: relative; min-width: 0; perspective: 1400px; }
.doc-tab i { position: absolute; }
.doc-stack { display: grid; z-index: 2; }
.doc-stack .doc:not(.is-active) { visibility: hidden; opacity: 0; pointer-events: none; }
.doc-stack .doc.is-active { visibility: visible; opacity: 1; }
.doc-stack .doc {
  grid-area: 1 / 1;
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s;
  display: flex;
  flex-direction: column;
}
.doc-stack .xd-in { flex: 1; }
.doc-stack .xd-chart { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.doc-tabs { flex-wrap: nowrap; scrollbar-width: none; justify-content: safe center; }
.doc-tabs::-webkit-scrollbar { display: none; }
.doc-tab { appearance: none; cursor: pointer; overflow: hidden; flex: 0 0 auto; }
.binder { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; min-width: 0; }
.binder .doc-stack.sheets { position: relative; padding-bottom: 14px; }
.binder .doc-stack.sheets::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 7px;
  height: 24px;
  background: #FFFFFF;   /* the two sheets under the document are paper, not grey slabs (sweep, 6 Nov 2026) */
  border: 1px solid #DCE3EC;
  box-shadow: 0 2px 4px rgba(10, 22, 40, .05);
  border-radius: 0 0 3px 3px;
  z-index: 0;
}
.binder .doc-stack.sheets::after {
  content: "";
  position: absolute;
  height: 24px;
  border-radius: 0 0 3px 3px;
  z-index: 0;
  left: 20px;
  right: 20px;
  bottom: 0;
  background: #FFFFFF;
  border: 1px solid #E3E9F0;
  box-shadow: 0 2px 4px rgba(10, 22, 40, .04);
}
.binder .doc-stack .doc:not(.is-active) { transform: none; }
.binder .doc-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 56px 0 0;
  padding: 0;
  max-width: none;
  position: relative;
  z-index: 2;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
  left: auto;
  transform: none;
  width: auto;
}
.binder .doc-tabs .doc-tab i {
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  height: auto;
  background: var(--blue);
  transform: scaleY(0);
  transform-origin: top;
}
.binder .doc-tabs .doc-tab.is-active i { transform: none; }
.binder .doc-tabs .doc-tab.is-active.is-timing i { animation: tabtime-e var(--dwell, 6s) linear forwards; }
.binder .doc-tabs .doc-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.binder .doc-stack .doc {
  width: 100%;
  max-width: none;
  margin: 0;
  position: relative;
  z-index: 1;
  border-radius: 3px;
  animation: none;
  box-shadow: 0 34px 64px -42px rgba(10, 22, 40, .45);
  border: 1px solid var(--paper-rule);
}
.binder .doc-tabs .doc-tab {
  position: relative;
  margin: 0 0 0 -1px;
  min-width: 122px;
  padding: 12px 16px 12px 15px;
  text-align: left;
  font: 500 0.875rem/1.2 var(--sans);
  letter-spacing: 0;
  border: 1px solid var(--paper-rule);
  border-left: 0;
  border-radius: 0 3px 3px 0;
  box-shadow: none;
  transform: none;
  transition: color .2s var(--ease), background-color .2s var(--ease);
  background: #E6ECF3;
  color: var(--ink-2);
}
.binder .doc-tabs .doc-tab:hover { background: #F0F4F8; color: var(--ink); }
.binder .doc-tabs .doc-tab.is-active { font-weight: 600; margin-left: -2px; background: #FFFFFF; color: var(--ink); }
.binder .binder-note { grid-column: 1 / -1; margin: 14px 0 0; }
/* Page heroes */
.page-hero .wrap { padding-block: clamp(40px, 6vw, 80px) clamp(64px, 9vw, 120px); display: grid; }
.page-hero h1 { max-width: 13em; animation: rise .9s .05s var(--ease) both; font-weight: 340; letter-spacing: 0; }
.page-hero .lede { animation: rise .9s .18s var(--ease) both; }
.page-hero.with-object .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 88px); }
.page-hero.with-object .hero-copy, .page-hero .hero-copy { display: grid; gap: 24px; }
.page-hero .hero-note { margin-top: 0; }
.notfound .wrap { padding-block: clamp(96px, 14vw, 180px); display: grid; gap: 24px; }
.notfound h1 { font-size: var(--fs-h1); line-height: 0.95; }
.page-hero h1 em { font-style: normal; font-weight: inherit; color: inherit; }
.legal-hero h1 .stop { display: inline; width: auto; height: auto; margin: 0; background: none; color: inherit; transform: none; overflow: visible; }
.page-hero.with-object .hero-copy, .page-hero .wrap { gap: 24px; }
.page-hero, .counters { position: relative; overflow: hidden; }
.lede-2 span { display: block; }
.svc-hero h1 .w { display: inline-block; }
.svc-stage { padding-block: 32px; }
.svc-hero { overflow-x: clip; }
.lede .lede-line { display: block; }
.lede .lede-line + .lede-line { margin-top: .45em; }
.page-hero .outcome {
  padding-left: 18px;
  border-left: 2px solid var(--blue);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
  animation: rise .9s .26s var(--ease) both;
}
.page-hero .svc-kind { font-size: 1rem; margin-bottom: 10px; color: var(--blue-ink); }
.page-hero .hero-note, .hero-e .hero-note { color: var(--ink-muted); font-size: 0.875rem; }
.page-hero .hero-actions { margin-top: 22px; }
.page-hero .crumb { font: 400 0.875rem/1.4 var(--sans); letter-spacing: 0; color: var(--ink-muted); text-wrap: balance; }
.page-hero .crumb a { color: var(--ink-2); font-weight: 400; text-decoration: none; }
.page-hero .crumb a:hover, p.crumb a:hover { color: var(--navy); text-decoration: underline; }
/* Hero entrance (both kinds of hero) */
.hero h1, .hero .lede, .hero-actions, .hero-note, .page-hero h1, .page-hero .lede { animation-duration: .5s; }

/* ===== Example sheets and charts ===== */
/* Frames of the hero documents and the example sheets, and the letterhead, title and footer of the client pages' sheets */
.sheet-head { align-items: center; }
.sheet-letterhead { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; }
.sheet-foot span:last-child { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.doc { color: var(--ink); padding: 32px 34px 24px; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); background: #FFFFFF; }
.sheet-ref {
  font-variant-numeric: tabular-nums lining-nums;
  font-family: var(--sans);
  letter-spacing: 0;
  font-size: 12px;
  color: var(--ink-muted);
}
.sheet-letterhead span:first-child {
  display: inline-flex;
  align-items: center;
  color: var(--ink-muted);
  gap: 9px;
  font-family: var(--sans);
  letter-spacing: 0;
}
.sheet-foot { font-family: var(--sans); letter-spacing: 0; }
.sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 16px; }
.sheet-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid var(--paper-rule);
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.sheet-letterhead span:first-child { font-size: 12px; }
.sheet-foot span:last-child { white-space: nowrap; }
.sheet-title {
  font-size: 1.6rem;
  line-height: 1.05;
  font-family: var(--serif-e);
  font-weight: 420;
  letter-spacing: 0;
  font-variation-settings: "opsz" 48;
}
.sheet {
  position: relative;
  width: min(100%, 540px);
  color: var(--ink);
  border-radius: 3px;
  padding: 30px 32px 22px;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease);
  background: #FFFFFF;
  border: 1px solid var(--paper-rule);
  box-shadow: 0 34px 64px -42px rgba(10, 22, 40, .45);
}
.doc, .sheet { background-image: none; }
.sheet-letterhead { align-items: center; border-bottom: 1px solid var(--ink); }
.sheet-letterhead .sheet-mark, .vs-lockup { height: 26px; width: auto; max-width: none; opacity: 1; }
.sheet-foot { font-variant-numeric: tabular-nums lining-nums; }
/* Exhibits: the frame (the documents inside are the example documents below), and the line under the home binder */
.ex-note { display: flex; align-items: center; gap: 10px; color: var(--ink-muted); }
.ex-tip {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  background: #0A1628;
  color: #EEF3F9;
  font: 600 0.875rem/1.35 var(--sans);
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 10px 28px -10px rgba(6,14,28,.6);
  max-width: 260px;
  font-variant-numeric: tabular-nums;
}
.ex-note, .email { font-size: 0.875rem; }
.js-on .exhibit:not(.in) { transform: translateY(28px); }
.ex-single { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 24px; }
.ex-single > .exhibit.xd:is(:not(:has(.xd-chart)), :has(.xd-table)) { max-width: 880px; }   /* a document with a table, chart or not, keeps the 880 px width so the table does not stretch (6 Nov 2026) */   /* a table document reads at page width, not stretched across the screen (6 Nov 2026) */
.rp-body.exhibit { border: 0; padding: 0; background: none; box-shadow: none; gap: 16px; align-content: start; transform: none !important; }
.exhibit { margin: 0; position: relative; transition: transform .35s var(--ease); background: #FFFFFF; border: 1px solid var(--paper-rule); border-radius: 3px; }
.rp .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Example documents (design direction C, approved by Martin on 5 November 2026). The home binder documents (.doc),
   the service page sheets (.sheet) and the service exhibits (.exhibit) carry the class xd and one .xd-in inside: a
   letterhead, a serif title with the Example tag, a sub line, key figures in Newsreader numerals, the chart or table,
   and the footer. Everything in a document follows the document's own width (container xd), so it reads the same in
   a binder, a hero or a grid. Drawings and figures come from tools/charts_c.py and tools/exhibits.py. */
.xd { container: xd / inline-size; --xd-muted: #5F6F86; --xd-rule: #E7ECF2; color: var(--ink); font-family: var(--sans); letter-spacing: 0; }
.doc.xd, .sheet.xd, .exhibit.xd { padding: 0; }
.exhibit.xd { box-shadow: 0 34px 64px -42px rgba(10, 22, 40, .45); }
.xd-in { display: flex; flex-direction: column; padding: 30px 32px 18px; }
.xd-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--xd-rule); }
.xd-logo { height: 20px; width: auto; max-width: none; }
.xd-titlerow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; }
.xd-t { font: 420 27px/1.15 var(--serif-e); letter-spacing: 0; color: var(--ink); text-wrap: balance; }
.xd-sub { margin-top: 6px; max-width: 52em; font-size: 14px; line-height: 1.5; color: var(--xd-muted); }
/* Key figures: the figures line up across the strip when a label wraps (subgrid) */
.xd-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; margin: 18px 0 6px; border-top: 1px solid var(--ink); }
.xd-kpis.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xd-kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xd-kpis div { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; min-width: 0; padding: 10px 12px 10px 0; }
.xd-kpis div + div { padding-left: 12px; border-left: 1px solid var(--xd-rule); }
.xd-kpis dt { font-size: 12.5px; line-height: 1.3; color: var(--xd-muted); }
.xd-kpis dd { margin: 4px 0 0; font: 500 25px/1.1 var(--serif-e); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); white-space: nowrap; }
.xd-kpis dd span { display: block; margin-top: 4px; font: 400 12px/1.35 var(--sans); color: var(--xd-muted); white-space: normal; }
.xd-note { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.xd-foot { display: flex; justify-content: space-between; gap: 6px 16px; margin-top: auto; padding-top: 16px; font-size: 12px; line-height: 1.4; color: var(--xd-muted); }
.xd-foot span:first-child { color: var(--ink-2); }
.xd-foot span + span { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
/* Charts: one drawing shows, chosen by the chart's own width (container xc): n below 360 px, m to 480 px and w above;
   a sheet's chart (ws) takes w from 425 px; a full-width exhibit (wx) takes l from 740 px and x from 1034 px. Each
   drawing is capped at 1.25 times its own width (in tools/charts_c.py), so labels stay between about 10.5 and 13.5 px.
   The phone drawing (n) takes the desktop form and is never shown wider than drawn: 12 px labels, 11 px ticks (tk). */
.xd-chart { container: xc / inline-size; margin-top: 14px; }
.xd-chart > svg { display: block; width: 100%; height: auto; overflow: visible; }
.xd-chart > svg:is(.n, .m, .w, .l, .x) { display: none; }
.xd-chart > svg.xd-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
@container xc (max-width: 359.98px) {
  .xd-chart > svg.n { display: block; margin-inline: auto; }
}
@container xc (min-width: 360px) and (max-width: 479.98px) {
  .xd-chart:not(.ws) > svg.m { display: block; }
}
@container xc (min-width: 360px) and (max-width: 424.98px) {
  .xd-chart.ws > svg.m { display: block; }
}
@container xc (min-width: 425px) {
  .xd-chart.ws > svg.w { display: block; }
}
@container xc (min-width: 480px) {
  .xd-chart:not(.ws):not(.wx) > svg.w { display: block; }
}
@container xc (min-width: 480px) and (max-width: 739.98px) {
  .xd-chart.wx > svg.w { display: block; }
}
@container xc (min-width: 740px) and (max-width: 1033.98px) {
  .xd-chart.wx > svg.l { display: block; }
}
@container xc (min-width: 1034px) {
  .xd-chart.wx > svg.x { display: block; }
}
/* Chart labels at one small size on every chart (Martin, 6 Nov 2026: "all the charts", "sharp, just like the investments
   one", "even smaller"). The size is set on each drawing and the labels inherit it. page.js then sets each wide drawing's
   size so its labels show at 11 px whatever the chart is stretched to; without script they show at about 10.5 to 13.5 px.
   The phone drawing (n) is never stretched and keeps 12 px labels and 11 px ticks. */
.xd-chart > svg { font-size: 11px; }
.xd-chart > svg.m { font-size: 11.5px; }
.xd-chart > svg.n { font-size: 12px; }
.xd-chart text { font-family: var(--sans); fill: var(--xd-muted); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; }
.xd-chart svg.n text.tk { font-size: 11px; }
.xd-chart .c { fill: var(--ink-2); }
.xd-chart .v, .xd-chart .b { fill: var(--ink); font-weight: 600; }
.xd-chart .vw { fill: #FFFFFF; font-weight: 600; }
.xd-chart .rl { fill: #B8432F; }
.xd-chart .rb { fill: #B8432F; font-weight: 600; }
.xd-chart .hl { paint-order: stroke; stroke: #FFFFFF; stroke-width: 4px; stroke-linejoin: round; }
.xd-chart .g { stroke: var(--xd-rule); stroke-width: 1; }
.xd-chart .g0, .xd-chart .cn, .xd-chart .ld { stroke: #9AA8BB; stroke-width: 1; }
.xd-chart .cn { stroke-dasharray: 2 2; }
.xd-chart .lim { stroke: #B8432F; stroke-width: 1.25; }
.xd-chart .rf, .xd-chart .pk, .xd-chart .axl { stroke: var(--ink); stroke-width: 1; }
.xd-chart .rf { stroke-dasharray: 4 3; }
.xd-chart .nrv { stroke: var(--ink); stroke-width: 1.5; }   /* the NRV and total cost lines across each column of a capital stack */
.xd-chart .pk { stroke-dasharray: 3 3; }
.xd-chart .sep { stroke: var(--ink); stroke-opacity: .4; stroke-width: 1; }
.xd-chart .m { fill: var(--main); }
.xd-chart .ms { stroke: var(--main); }
.xd-chart .hit { fill: transparent; cursor: crosshair; }
/* Two documents of different lengths side by side (ex-fill, the deal page): the shorter one centres its chart in the
   height the row gives it, so its white space sits above and below the chart, not all above the footer */
.ex-fill .exhibit.xd .xd-in { height: 100%; }
.ex-fill .exhibit.xd .xd-chart { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
/* Tables, notes, the board's decisions and the asset mix in the sheets */
.xd-table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 13px; line-height: 1.35; font-variant-numeric: tabular-nums lining-nums; }
.xd-table th { padding: 8px 0 7px; border-bottom: 1px solid var(--ink); text-align: left; vertical-align: bottom; font: 500 11.5px/1.3 var(--sans); color: var(--xd-muted); }
.xd-table td { padding: 8px 0; border-bottom: 1px solid var(--xd-rule); vertical-align: top; }
.xd-table .n { padding-left: 14px; text-align: right; white-space: nowrap; }
.xd-table tr.sum td { border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); font-weight: 600; }
.xd-table .bad { color: #B8432F; }
.xd-table .src { padding-left: 14px; text-align: right; font-size: 12px; color: var(--xd-muted); }
.xd-table .src-m { display: none; }
.xd-table.fc td.ph { padding-right: 14px; font-weight: 600; }
.xd-notes { display: grid; gap: 6px; margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.xd-notes span { position: relative; padding-left: 17px; }
.xd-notes span::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; background: var(--blue); }
.xd-decide { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--xd-rule); }
.xd-decide p { margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--xd-muted); }
.xd-decide ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; counter-reset: sd; }
.xd-decide li { position: relative; padding-left: 26px; font-size: 13px; line-height: 1.45; counter-increment: sd; }
.xd-decide li::before { content: counter(sd); position: absolute; left: 0; top: -1px; font: 500 17px/1.2 var(--serif-e); }
/* A decision with its figure, no numbering, and the answer under it (Martin, 5 Nov 2026) */
.xd-decide ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.xd-decide ul li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-left: 0; }
.xd-decide ul li::before { content: none; }
.xd-decide ul li b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.xd-decide p.xd-out { margin: 10px 0 0; font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--ink); }
.xd-bars { display: grid; gap: 8px; margin-top: 16px; font-size: 13px; }
.xd-bars div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 3em; align-items: center; gap: 12px; }
.xd-bars i { display: block; height: 8px; background: var(--xd-rule); }
.xd-bars b { display: block; height: 100%; background: var(--main); }
.xd-bars span:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
/* The payroll working paper: award against agreement, employee by employee */
.xd-tablewrap { margin-top: 2px; }
.xd-table.boot th[scope="row"] { padding: 8px 0; border-bottom: 1px solid var(--xd-rule); text-align: left; font-weight: 600; font-size: 14px; color: var(--ink); }
.xd-table.boot .sub { display: block; font-weight: 400; font-size: 12px; color: var(--xd-muted); }
/* A table name in black with its detail in grey beneath (Martin, 5 Nov 2026) */
.xd-table td .nm { display: block; color: var(--ink); font-weight: 500; }
.xd-table td .sub { display: block; margin-top: 2px; font-weight: 400; font-size: 12px; line-height: 1.35; color: var(--xd-muted); }
.xd-table tr.sum td .nm { font-weight: 600; }
/* The allocation bar over a report's table: one colour per group, the table is the legend, the limit in red (Martin, 5 Nov 2026) */
.xd-alloc { position: relative; margin: 18px 0 2px; padding-top: 18px; }
.xd-alloc-bar { display: flex; gap: 2px; height: 12px; }
.xd-alloc-bar span { display: block; height: 100%; }
.a-p { background: var(--main); }
.a-s { background: var(--blue); }
.a-o { background: #9AA8BB; }
.xd-alloc .lim { position: absolute; top: 4px; bottom: -4px; border-left: 1.5px dashed #B8432F; }
.xd-alloc .lim-t { position: absolute; top: 0; margin-left: 5px; font: 500 11px/1.2 var(--sans); color: #B8432F; white-space: nowrap; }
.xd-table .sw { display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: 0; }
.xd-table.has-sw td .nm { padding-left: 16px; text-indent: -16px; }   /* a wrapped name stays clear of its swatch */
.xd-table.has-sw td .sub { padding-left: 16px; }
.xd-table.has-sw tr.sum td .nm, .xd-table.has-sw tr.sum td .sub { padding-left: 0; text-indent: 0; }
.xd-decide ul li b.bad { color: #B8432F; }
.xd-table.boot th.flag, .xd-table.boot td.flag { padding-left: 16px; text-align: right; white-space: nowrap; }
.xd-table.boot td.flag { font-weight: 600; }
.xd-table.boot td.flag.yes { color: var(--blue-ink); }
.xd-table.boot td.flag.no { color: #B8432F; }
.xd-table.boot td.flag.yes::before, .xd-table.boot td.flag.no::before { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.xd-table.boot td.flag.yes::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.7 2.7L10 3.2' fill='none' stroke='%230A1628' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.xd-table.boot td.flag.no::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' fill='none' stroke='%23B8432F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.xd-table.boot tr.sum th { border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); }
.xd-table.boot tr.sum td.var { color: var(--ink); }
.xd-table.boot .var-in { display: inline-flex; align-items: center; gap: 8px; }
.xd-table.boot tbody tr:hover { background: #F2F7FE; }
.xd-table.boot .hn, .xd-cap { display: none; }
.vbar { display: inline-block; height: 6px; width: var(--w); border-radius: 1px; background: var(--blue); }
.vbar.neg { background: #B8432F; }
/* A document in a column of 440 px or less (phones): compact (Martin, 5 November 2026: "mobile charts are too large").
   Padding and the gaps between letterhead, title, sub line, key figures, chart and footer a third tighter than the
   first phone sizes, key figures at 20 px with 11 px labels and notes, the chart at its own size (12 px labels).
   In the binder every document stays in the stack, so the binder keeps the height of the tallest and the 6-second timer
   never moves the page; a shorter document ends with white space above its footer, its chart not stretched. */
@container xd (max-width: 440px) {
  .xd-in { padding: 12px 11px 10px; }
  .doc-stack .doc .xd-chart { flex: none; }
  .xd-head { padding-bottom: 8px; }
  .xd-logo { height: 16px; }
  .xd-titlerow { margin-top: 10px; }
  .xd-t { font-size: 20px; }
  .xd-sub { margin-top: 4px; font-size: 13px; line-height: 1.45; }
  .xd-kpis { margin: 11px 0 3px; }
  .xd-kpis div { padding: 5px 6px 5px 0; }
  .xd-kpis div + div { padding-left: 8px; }
  .xd-kpis dt { font-size: 11px; line-height: 1.25; }
  .xd-kpis dd { margin-top: 2px; font-size: 20px; }
  .xd-kpis dd span { margin-top: 2px; font-size: 11px; line-height: 1.3; }
  .xd-chart { margin-top: 9px; }
  .xd-note { margin-top: 7px; font-size: 12px; }
  .xd-foot { gap: 2px 12px; padding-top: 10px; font-size: 11px; }
  .xd-table { margin-top: 11px; }
  .xd-table th { padding: 6px 0 5px; }
  .xd-table td { padding: 5px 0; }
  .xd-notes { margin-top: 10px; gap: 4px; font-size: 13px; }
  .xd-decide { margin-top: 11px; padding-top: 8px; }
  .xd-decide li { font-size: 13px; }
  .xd-bars { margin-top: 11px; gap: 6px; font-size: 13px; }
  .xd-table .src { display: none; }
  .xd-table .src-m { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--xd-muted); }
  .xd-bars div { grid-template-columns: 8em minmax(0, 1fr) 2.6em; }
  .xd-table.fc td.ph { padding-right: 10px; }
}
/* Four key figures go two by two in a column of 520 px or less, so A$47.9m keeps its width */
@container xd (max-width: 520px) {
  .xd-kpis.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xd-kpis.k4 div:nth-child(3) { padding-left: 0; border-left: 0; }
  .xd-kpis.k4 div:nth-child(n+3) { border-top: 1px solid var(--xd-rule); }
}
@container xd (max-width: 360px) {
  .xd-kpis dd { font-size: 18px; }
  .xd-kpis:not(.k2):not(.k4) { grid-template-columns: minmax(0, 1fr); }   /* three figures as rows on a phone (design pass, 5 Nov 2026) */
  .xd-kpis:not(.k2):not(.k4) div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--xd-rule); }
}
/* The working paper in a column of 560 px or less (phones, 5 November 2026): four columns. The agreement column and
   the bars go, the variance is headed Difference and signed (+790, (290)), and a caption line says which way it runs */
@container xd (max-width: 560px) {
  .xd-table.boot { font-size: 13px; }
  .xd-table.boot th, .xd-table.boot td { padding-left: 6px; }
  .xd-table.boot th:first-child { padding-left: 0; }
  .xd-table.boot thead th { white-space: normal; }
  .xd-table.boot th[scope="row"] { font-size: 13px; }
  .xd-table.boot th.flag, .xd-table.boot td.flag, .xd-table.boot .vbar, .xd-table.boot .hw { display: none; }
  .xd-table.boot .hn { display: inline; }
  .xd-table.boot .dv.pos { color: var(--blue-ink); }
  .xd-table.boot .dv.pos::before { content: "+"; }
  .xd-table.boot tr.sum .dv.pos { color: var(--ink); }
  .xd-cap { display: block; margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
}
/* The working paper on a phone, compact like the other documents (5 November 2026) */
@container xd (max-width: 440px) {
  .xd-table.boot { font-size: 12px; }
  .xd-table.boot th[scope="row"] { padding: 4px 0; font-size: 12px; line-height: 1.25; }
  .xd-table.boot td { padding-top: 4px; padding-bottom: 4px; }
  .xd-table.boot .sub { font-size: 11px; line-height: 1.25; }
  .xd-cap { margin-top: 7px; font-size: 11.5px; }
}
/* Report viewer (src/partials/report-pack.html, driven by src/page.js) */
.rp { display: grid; gap: 20px; }
.rp-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 18px 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: #C5D1E2;
  font: 600 0.875rem/1 var(--sans);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.rp-tab:hover { color: #fff; border-color: rgba(92,179,255,.6); transform: translateY(-1px); }
.rp-num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  font: 800 0.75rem/1 var(--sans);
}
.rp-tab.is-active .rp-num { background: #fff; color: #0C74CF; }
.rp-tab:focus-visible, .rp-prev:focus-visible, .rp-next:focus-visible { outline: 2px solid #5CB3FF; outline-offset: 2px; }
.rp-stage { position: relative; }
.rp-stack { display: grid; position: relative; }
.rp-stack::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: #DCE3EB;
  transform: translate(10px, 10px) rotate(.6deg);
  opacity: .45;
  z-index: 0;
}
.rp-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: #DCE3EB;
  z-index: 0;
  transform: translate(20px, 20px) rotate(1.2deg);
  opacity: .2;
}
.rp-page {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  background: #FBFCFD;
  border-radius: 4px;
  padding: clamp(20px, 3vw, 40px) clamp(18px, 3.4vw, 48px) 24px;
  box-shadow: 0 60px 100px -40px rgba(0,0,0,.8), 0 20px 44px -22px rgba(4,12,26,.95);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(40px) rotate(.8deg);
  transition: opacity .45s ease, transform .6s var(--ease), visibility 0s .6s;
}
.rp-page.is-past { transform: translateX(-40px) rotate(-.8deg); }
.rp-page.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s ease .05s, transform .6s var(--ease), visibility 0s;
  z-index: 2;
}
.rp-head span:first-child { display: inline-flex; align-items: center; gap: 8px; color: #0A1628; }
.rp-head img { height: 14px; width: auto; }
.rp-title { font: 800 clamp(1.5rem, 2.4vw, 2rem)/1 var(--display); letter-spacing: 0; color: #0A1628; }
.rp-body svg { max-height: 300px; }
.rp-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #D6DEE8;
  font-size: 0.75rem;
  color: #5E6E87;
}
.rp-cover {
  background: radial-gradient(120% 120% at 80% 0%, #143566 0%, #0A1628 60%);
  color: #EEF3F9;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
}
.rp-cover-in { display: grid; gap: 10px; }
.rp-cover-in img { width: 72px; height: auto; margin-bottom: 24px; }
.rp-kicker { font: 700 0.75rem/1 var(--sans); color: #5CB3FF; }
.rp-cover-t { margin: 0; font: 800 clamp(2.25rem, 4.6vw, 3.75rem)/0.95 var(--display); letter-spacing: 0; }
.rp-cover-d { margin: 0; font: 600 var(--fs-lede)/1.3 var(--sans); color: #A4B3C9; }
.rp-cover-f { margin: 32px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.15); font-size: 0.75rem; color: #8496B3; max-width: 44em; }
.rp-alloc { display: flex; height: 18px; border-radius: 3px; overflow: hidden; gap: 2px; }
.rp-alloc i { width: var(--w); display: block; transition: filter .2s; }
.rp-alloc i:hover { filter: brightness(1.15); }
.rp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.75rem; color: #4C5D77; }
.rp-legend b { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.rp-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #FDF1EF;
  color: #9A2B1F;
  font: 700 0.75rem/1.3 var(--sans);
  vertical-align: 1px;
}
.rp-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
  color: #A4B3C9;
  font: 600 0.875rem/1 var(--sans);
  font-variant-numeric: tabular-nums;
}
.rp-prev, .rp-next {
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  color: #fff;
  font: 700 1rem/1 var(--sans);
  cursor: pointer;
  transition: background-color .2s, transform .2s var(--ease);
}
.rp-prev:hover, .rp-next:hover { background: #0C74CF; transform: translateY(-1px); }
.rp, .rp-stage, .rp-stack, .rp-page, .rp-body { min-width: 0; }
.rp-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #0A1628;
  font: 700 0.75rem/1 var(--sans);
  letter-spacing: .06em;
  color: #4C5D77;
  flex-wrap: wrap;
}
.rp-tab.is-active { background: var(--navy); color: #FFFFFF; box-shadow: none; border-color: var(--navy); }

/* ===== Rows and lists ===== */
/* Rows */
.rows { display: grid; }
.row:last-child { border-bottom: 1px solid var(--paper-rule); }
.js-on .row, .js-on .quote { transition: transform .7s var(--ease); }
.js-on .row:not(.in), .js-on .quote:not(.in) { transform: translateY(18px); }
.row p + p { margin-top: 14px; }
.client-row .row-lead { color: var(--ink); }
.client-row .row-work {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  column-gap: 24px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--paper-rule);
  max-width: 46em;
}
.client-row .row-k { font-size: 0.875rem; font-weight: 600; color: var(--ink-muted); padding-top: 2px; }
.client-row .row-work ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.client-row .row-work li { color: var(--ink-muted); line-height: 1.5; padding-left: 16px; position: relative; }
.client-row .row-work li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--blue);
  transform: rotate(45deg);
}
.client-row .row-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; }
.client-row .row-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.row { display: grid; border-top: 1px solid var(--paper-rule); position: relative; padding: 34px 0; border-color: var(--paper-rule); }
.rows .row:first-child { border-top-color: var(--ink); }
.rows .row { padding-block: 26px 28px; row-gap: 8px; grid-template-columns: minmax(0, 18rem) minmax(0, 40em); }
/* Index lists and areas */
.index { display: grid; }
.index a:last-child { border-bottom: 1px solid var(--paper-rule); }
.index .go { transition: transform .3s var(--ease), color .2s; }
.index a:hover .go { transform: translateX(6px); }
.index a:first-child { border-top-color: var(--ink); }
.index a {
  display: grid;
  gap: 12px 48px;
  align-items: baseline;
  padding: var(--sp-row) 0;
  border-top: 1px solid var(--paper-rule);
  position: relative;
}
.area { display: grid; }
.area-copy { gap: 14px; align-content: start; }
.index h3 {
  transition: color .2s ease;
  font-family: var(--serif-e);
  font-weight: 400 !important;
  letter-spacing: 0;
  font-variation-settings: "opsz" 48;
}
.area.area-solo { gap: 12px 48px; align-items: baseline; padding: 26px 0 28px; border-top: 1px solid var(--paper-rule); }
.area.area-solo .area-copy { display: contents; }
.area-copy h3 {
  font-family: var(--serif-e);
  font-weight: 400 !important;
  font-size: var(--fs-h4);
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--ink);
}
.area-copy p { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.area-copy .link { justify-self: start; white-space: nowrap; }
.area + .index { margin-top: 0; }
.area + .index a:first-child { border-top: 0; }
.index a h3 { color: var(--ink); }
/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps li + li { padding-left: 32px; }
.steps h3 { margin-top: 2px; }
.steps .k { font: 500 0.875rem/1.4 var(--sans); color: var(--blue-ink); letter-spacing: 0; text-transform: none; }
.steps li { padding: 18px 32px 0 0; display: grid; gap: 10px; align-content: start; border-top: 1px solid var(--paper-rule); }
/* Space after a section head */
.map-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.section-head + * { margin-top: var(--sp-after-head); }
.map-grid .section-head + * { margin-top: 0; }
/* Rows beside a section head: a narrower label so the text is not a tall thin column (sweep, 6 Nov 2026: "What it is
   not" and "How it works" ran to eight or nine short lines at 190 to 250 px). */
@media (min-width: 961px) {   /* only while the section sits in two columns; below that the rows keep their own layout and stack on phones */
  .map-grid .rows .row { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); column-gap: 32px; }
}
/* Contents lists */
.contents { list-style: none; padding: 0; display: grid; margin: 14px 0 0; gap: 0; border-top: 1px solid var(--ink); font-size: 0.875rem; }
.contents li a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--paper-rule);
  font-weight: 500;
}
.contents li a .p { order: 3; font-feature-settings: "tnum" 1; flex: none; font-size: 0.75rem; color: var(--ink-muted); text-align: right; }
.contents li:last-child a { border-bottom: 0; }
.contents li a, .index a, a.entry { color: var(--ink); text-decoration: none; }
.contents li a:hover { color: var(--blue-ink); }
/* Services list */
.svc-kind { margin: 0; font-weight: 600; }
.svc-item:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.svc-wide { align-content: start; }
.svc-list li { will-change: auto; animation: none; }
.svc-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 0; border-top: 1px solid var(--ink); }
.svc-item::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 26px;
  bottom: 26px;
  width: 3px;
  background: var(--blue);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .2s ease;
}
.svc-item:hover::before, .svc-item:focus-visible::before { transform: none; }
.svc-group .svc-item::before { display: none; }   /* in the grouped list the bar sat in the column gap and read as a stray mark (Martin, 6 Nov 2026) */
.svc-item h3, a.svc-item h3, .index a h3, .area-copy h3 a { color: var(--ink); }   /* list titles navy at rest, blue and underlined on hover or focus (Martin, 6 Nov 2026: "fix all the blue"; supersedes blue at rest, 5 Nov) */
/* List titles hover like the footer links (Martin, 6 Nov 2026: "the hover needs to match the footer - blue line animation"):
   the title stays navy and a 1 px DDA Blue line draws in from the left under the words, line by line (build.py title_lines
   wraps each title's text in .tl; the deals rows' title links take it directly). */
.tl, .area-copy h3 a { background: linear-gradient(var(--blue), var(--blue)) left 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .3s var(--ease); -webkit-box-decoration-break: clone; box-decoration-break: clone; }   /* each line of a two-line title draws its own line, together, in every browser (Martin, 6 Nov 2026: "doesnt do both lines") */
a.svc-item:hover .tl, a.svc-item:focus-visible .tl, .index a:hover .tl, .index a:focus-visible .tl, .client-row:hover .tl, .client-row:focus-within .tl,
.area-copy h3 a:hover, .area-copy h3 a:focus-visible { background-size: 100% 1px; }
.area-copy h3 a { text-decoration: none; }   /* the plain rows on the deals page link too, so every title in the list reads the same (6 Nov 2026) */   /* titles that are links read as links at rest, so a phone shows them too (Martin, 5 Nov 2026) */
.index .go { text-wrap: balance; }
/* The same cue on the client groups of Who we work with (Martin, 5 Nov 2026) */
.client-row::before { content: ""; position: absolute; left: -16px; top: 26px; bottom: 28px; width: 3px; background: var(--blue); transform: scaleY(0); transform-origin: 50% 0; transition: transform .2s ease; }
.client-row:hover::before, .client-row:focus-within::before { transform: none; }
.client-row h3 { transition: color .2s ease; }

.svc-item .svc-desc { grid-area: d; margin: 4px 0 0; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.svc-item h3 { transition: color .2s ease; grid-area: t; line-height: 1.1; align-self: start; font-size: var(--fs-h4); }
.svc-item {
  flex-direction: column;
  text-decoration: none;
  grid-column: auto;
  display: grid;
  grid-template-areas: "t d" "k d";
  gap: 6px 36px;
  padding: 26px 0;
  border-bottom: 1px solid var(--paper-rule);
  position: relative;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}
.svc-item .svc-kind { grid-area: k; font: 500 0.875rem/1.4 var(--sans); color: var(--ink-muted); align-self: start; }
/* Services grouped by client group (5 November 2026) */
.svc-groups { border-top: 1px solid var(--ink); }
.svc-group { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--ink); }
.svc-group .svc-grid { border-top: 0; }
.svc-group .svc-item:last-child { border-bottom: 0; }
.svc-group .svc-item { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); grid-template-areas: "t d"; column-gap: clamp(32px, 4vw, 56px); padding: 32px 0 8px; border-bottom: 0; }
.svc-group .svc-item:last-child { padding-bottom: 32px; }
.client-row .row-lead + .row-lead { margin-top: 12px; }
.svc-group .svc-item h3 { font-size: var(--fs-h4); }
.svc-group .svc-item .svc-kind { margin-top: 4px; }
.svc-group-h { margin: 0; padding: 32px 0; font: 400 var(--fs-h3)/1.1 var(--serif-e); letter-spacing: 0; color: var(--ink); font-variation-settings: "opsz" 48; }
.svc-group-h .stop { display: none; }
.toc-g { margin: 18px 0 0; font: 600 0.75rem/1.3 var(--sans); color: var(--ink-muted); }
.toc-g + .contents { margin-top: 6px; }
/* Client groups list */
.fit-sec .section-head { margin-bottom: clamp(28px, 3vw, 40px); }
.fit-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.fit-list > li { border-bottom: 1px solid var(--paper-rule); }
.entry { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; gap: 8px 36px; padding: 26px 0; position: relative; }
.entry::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 26px;
  bottom: 26px;
  width: 3px;
  background: var(--blue);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .2s ease;
}
.entry:hover::before, .entry:focus-visible::before { transform: none; }
.e-group { font: 400 var(--fs-h3)/1.08 var(--serif-e); }
.e-head { display: block; font-weight: 600; font-size: var(--fs-lede); line-height: 1.4; color: var(--ink); }
.e-items { list-style: none; margin: 10px 0 0; padding: 0; }
.e-items li { padding: 3px 0 3px 18px; position: relative; }
/* The DDA Blue diamond, the mark that closes every heading, as the list marker (Martin, 5 Nov 2026: no dashes) */
.e-items li::before { content: ""; position: absolute; left: 1px; top: .8em; width: 5px; height: 5px; background: var(--blue); transform: rotate(45deg); }
/* Referrers: one situation per line, the blue diamond as marker (5 Nov 2026) */
.when-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.when-list li { position: relative; padding-left: 20px; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.when-list li::before { content: ""; position: absolute; left: 1px; top: .72em; width: 5px; height: 5px; background: var(--blue); transform: rotate(45deg); }
.when-row .when-note { margin-top: 16px; padding-left: 20px; font-size: 0.875rem; line-height: 1.55; color: var(--ink-muted); max-width: calc(72ch * 16 / 14 + 20px); }
/* Referrers rows: the text runs the width of its column, with more room between rows (Martin, 5 Nov 2026) */
.rows .when-row { grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 56px); padding-block: 32px 34px; }
.when-list { gap: 14px; }
.when-list li { max-width: calc(72ch + 20px); }
.e-go { align-self: start; padding-top: 4px; white-space: nowrap; }
.entry:hover .e-go { text-decoration-color: var(--blue); text-decoration-thickness: 2px; }
/* Questions and proof */
.door-qs .qlist { list-style: none; counter-reset: q; margin: 14px 0 0; padding: 0; display: grid; }
/* A hanging number, not a grid: in a grid every link or emphasis inside a question became its own cell and fell into
   the number column one word per line (the law firms page, question 3, found 6 Nov 2026). */
.door-qs .qlist li {
  counter-increment: q;
  position: relative;
  padding: 12px 0 12px 42px;
  border-bottom: 1px solid var(--paper-rule);
  font: 400 var(--fs-lede)/1.45 var(--display);
  letter-spacing: 0;
  color: var(--ink);
}
.door-proof {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 32px 64px;
  align-items: start;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--ink);
}
.door-stat { display: grid; gap: 10px; }
.door-stat span { font-size: 1rem; color: var(--ink-muted); max-width: 26em; }
.door-qs .keeps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; }
.door-qs .keeps li {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  gap: 4px 20px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--paper-rule);
}
.door-qs .keeps li:last-child { border-bottom: 0; }
.door-qs .keeps b { font: 800 var(--fs-lede)/1.3 var(--display, var(--sans)); }
.door-qs .keeps span { font: 400 1rem/1.55 var(--sans); text-wrap: pretty; }
.door-proof .pull { border-top: 0; padding-top: 0; }
/* Two client quotes beside the headline figure on each client page, stacked, each under its blue rule (Martin, 6 Nov 2026) */
.door-proof .door-quotes { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.door-qs .keeps b, .refer-steps b { font-size: 1.125rem; line-height: 1.3; }
.door-proof .pull blockquote { max-width: 40em; }
.door-qs .qlist li::before { content: counter(q); position: absolute; left: 0; top: 12px; font: 400 var(--fs-lede)/1.45 var(--serif-e); font-variation-settings: "opsz" 48; color: var(--ink-muted); }
/* Quotes */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; }
.quote { margin: 0; display: grid; gap: 16px; align-content: start; }
.rows + .refer-quotes { margin-top: clamp(48px, 6vw, 80px); }
.refer-quotes + .sec-cta { margin-top: clamp(32px, 4vw, 48px); }
.pull { margin: 0; display: grid; gap: 12px; }   /* the blue rule runs the full width of the column; the quote keeps a reading measure (sweep, 6 Nov 2026) */
.pull blockquote { margin: 0; max-width: 30em; font-size: var(--fs-h3); line-height: 1.2; text-wrap: balance; color: var(--ink); }
.quote blockquote { margin: 0; color: var(--ink); font-size: var(--fs-h4); line-height: 1.3; }
.quote blockquote, .pull blockquote {
  text-indent: -0.35em;
  font-family: var(--quote);
  font-style: normal;
  font-weight: 380;
  letter-spacing: 0;
}
.pull, .quotes figure { border-left: 0; border-top: 3px solid var(--blue); padding: 22px 0 0; }
.pull .who, .quote .who, .counters .ctr-proof figcaption {
  font: 400 0.875rem/1.45 var(--sans);
  color: var(--ink-muted);
  letter-spacing: 0;
  text-transform: none;
}
.pull .who strong, .quote .who strong, .counters .ctr-proof figcaption strong { font-weight: 500; color: var(--ink-2); }
/* Referrers */
.refer p { color: var(--ink-muted); max-width: 40em; margin-top: 12px; }
.refer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 48px;
  background: transparent;
  border: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 32px 0;
  align-items: start;
}
.refer-steps { list-style: none; counter-reset: rs; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; max-width: 40em; }
.refer-steps span { color: var(--ink-muted); }
.refer-actions { display: grid; gap: 12px; justify-items: start; align-content: start; padding-top: 8px; }
.refer .row-more { display: inline-block; margin-top: 22px; }
.refer-panel {
  margin-top: 40px;
  background: #fff;
  border: 1px solid var(--paper-rule);
  border-left: 3px solid var(--blue);
  padding: 24px 28px;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink-muted);
}
.refer-panel b { display: block; font: 500 var(--fs-h4)/1.3 var(--serif-e); margin-bottom: 8px; }
/* Home referrer panel: room to breathe (Martin, 5 Nov 2026) */
.refer-panel { padding: clamp(24px, 3vw, 40px) clamp(24px, 3.5vw, 48px); }
.refer-panel p { max-width: 62ch; }
.refer-actions .refer-file { max-width: 36em; margin-top: 4px; }
.refer-intro { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 32px clamp(40px, 6vw, 88px); }
.refer-intro .refer-steps { margin-top: 28px; gap: 18px; }
.refer-intro .refer-alt { margin-top: 28px; display: grid; gap: 8px; }
.refer-card { background: #FFFFFF; border: 0; padding: clamp(24px, 3vw, 40px); justify-items: stretch; }
.refer-steps li { counter-increment: rs; display: grid; grid-template-columns: 2.25rem 1fr; column-gap: 10px; }
.refer-steps li::before {
  content: counter(rs);
  grid-row: span 2;
  place-items: center;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  display: block;
  font: 400 1.75rem/1 var(--serif-e);
  font-variation-settings: "opsz" 48;
  color: var(--ink);
}
.referral {
  border: 0;
  border-top: 3px solid var(--blue);
  padding: 22px 0 0;
  font: 380 var(--fs-h3)/1.32 var(--serif-e);
  letter-spacing: 0;
  color: var(--ink);
  max-width: 30em;
}
/* Policy pages */
.doc-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
  gap: 12px 40px;
  margin: 0;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--paper-rule);
}
.doc-facts div { display: grid; gap: 4px; }
.doc-facts dt { font-size: 0.75rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-faint); }
.doc-facts dd { margin: 0; font-size: 1rem; color: var(--ink); }
.doc-end { margin-top: 24px; padding: 22px 0 0; border-top: 2px solid var(--ink); display: grid; gap: 6px; color: var(--ink-muted); }
.doc-end b { color: var(--ink); font-size: var(--fs-lede); }
.prose { max-width: 44rem; display: grid; gap: 18px; color: var(--ink-muted); }
.prose strong { color: var(--ink); font-weight: 600; }
.legal-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.legal-toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 104px); display: grid; gap: 2px; font-size: 0.875rem; }
.legal-toc b { font: var(--label); color: var(--ink-faint); margin-bottom: 10px; }
.legal-toc a:hover { color: var(--ink); border-left-color: var(--blue); }
.prose h2 { color: var(--ink); display: grid; letter-spacing: 0; }
.legal-toc a {
  color: var(--ink-muted);
  text-decoration: none;
  border-left: 2px solid var(--paper-rule);
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr);
  align-items: baseline;
  padding: 6px 0 6px 12px;
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.in-short { background: var(--blue-wash); border-top: 3px solid var(--blue); display: grid; gap: 10px; color: var(--ink); padding: 22px 26px; }
.prose > h2[id] {
  max-width: none;
  border-top: 1px solid var(--paper-rule);
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0;
  align-items: baseline;
  padding-top: 26px;
  margin-top: 10px;
  font-size: var(--fs-h4);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: 0;
  font-variation-settings: "opsz" 48;
}
.prose > h2[id] ~ p { margin-left: 3.25rem; font-size: var(--fs-body); line-height: 1.6; }
.prose > h2[id] + p { margin-top: -10px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.in-short.svc-short { margin-bottom: clamp(80px, 9vw, 128px); }
/* Section ledes run wider than body text (Martin, 5 Nov 2026) */
.section-head { max-width: 60rem; }
.section-head .lede { max-width: 76ch; text-wrap: balance; }
.in-short p { margin: 0; line-height: 1.6; }
.related, .notfound { background: #FFFFFF; color: var(--ink); }
.related { padding-block: 44px 48px; border-top: 1px solid var(--paper-rule); }
.in-short h2 { display: block; font: 600 0.875rem/1.4 var(--sans) !important; letter-spacing: .01em; color: var(--ink-muted); }
.related h2 { font: 600 0.875rem/1.4 var(--sans) !important; letter-spacing: .01em; color: var(--ink-muted); margin-bottom: 8px; }
.in-short .job { font: 500 var(--fs-lede)/1.5 var(--sans); color: var(--ink); margin: 0 0 10px; }
.prose > h2[id] .n {
  place-items: center;
  display: inline-block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font: 400 0.9375rem/1 var(--serif-e);
  font-variation-settings: "opsz" 48;
  color: var(--ink-muted);
  letter-spacing: 0;
}
.legal-toc a .n { font: 400 0.9375rem/1 var(--serif-e); color: var(--ink-muted); }
.legal-toc a[aria-current="true"] .n { color: var(--ink); }
.legal-toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--blue); background: none; }
.in-short h2 .stop, .related h2 .stop { width: 4px; height: 4px; margin-left: 3px; vertical-align: 1px; }
/* Contact page */
.contact-grid { display: grid; gap: clamp(32px, 5vw, 72px); }
.contact-card { border: 0; background: #fff; padding: clamp(24px, 3vw, 40px); display: grid; gap: 20px; border-radius: 3px; box-shadow: var(--lift); }
.contact-card .kv dd { margin: 0; }
.contact-card .kv { margin: 0; display: grid; gap: 16px; }
.contact-card .kv div { display: grid; padding: 0; gap: 4px; }
.contact-card .abn { display: block; white-space: nowrap; color: var(--ink-muted); }
.kv-note { line-height: 1.5; color: var(--ink-muted); }
.contact-card .kv dt { font: 500 1rem/1.5 var(--sans); color: var(--ink-muted); letter-spacing: 0; }
.sec-cta { margin: 28px 0 0; font-size: var(--fs-lede); color: var(--ink-2); max-width: none; text-wrap: balance; }   /* one line where it fits, balanced where it wraps (Martin, 5 Nov 2026) */
.contact-call { margin: 4px 0 8px; font-size: var(--fs-body); }   /* the secondary ask as a button, as in the menu (Martin, 5 Nov 2026) */
/* Type shared by rows, index lists and steps */
.row h3,
.svc-item h3,
.steps h3,
.why-intro h3,
.contact-card h3,
.e-group,
.refer-steps b,
.door-qs .keeps b,
.refer-panel b {
  font-family: var(--serif-e);
  font-weight: 400 !important;
  letter-spacing: 0;
  color: var(--ink);
  font-variation-settings: "opsz" 48;
}
.row h3, .index h3, .steps h3, .contact-card h3 { font-size: var(--fs-h4); line-height: 1.12; }
.row h3 { text-wrap: balance; }   /* no stub such as "Not a" left on its own line (sweep, 6 Nov 2026) */
.row p, .index p, .steps p, .e-items, .door-qs .keeps span, .contact-card .kv dd { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }

/* ===== Comparison table ===== */
.why-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.compare th { text-align: left; }
.why-copy { display: grid; gap: var(--sp-head-gap); }
.compare-scroll { min-width: 0; overflow: visible; }
.why-e h2 { max-width: 22ch; color: var(--ink); }
.why-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); margin-top: clamp(26px, 3vw, 40px); }
.why-intro h3 { font-size: var(--fs-h4); line-height: 1.2; }
.why-intro .muted { margin-top: 10px; }
.vs { width: 100%; border-collapse: collapse; margin-top: clamp(40px, 5vw, 68px); table-layout: fixed; }
.vs col.us { width: 56%; }
.vs-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.vs th { text-align: left; font-weight: 400; vertical-align: bottom; padding: 0 0 14px; }
.vs th.us { border-bottom: 3px solid var(--blue); padding-right: 40px; }
.vs th.them { border-bottom: 1px solid var(--paper-rule); padding-left: 32px; }
.vs td { vertical-align: top; padding: 18px 0 19px; border-bottom: 1px solid var(--paper-rule); }
.vs td.us { font-size: 1rem; padding-right: 40px; }
.vs td.them { font-size: 1rem; padding-left: 32px; border-left: 1px solid var(--paper-rule); }
.compare { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; border-spacing: 0; }
.compare th:last-child {
  background: none;
  border: 0;
  border-radius: 0;
  vertical-align: bottom;
  padding: 0 0 14px 28px;
  border-bottom: 1px solid var(--paper-rule);
}
.compare td {
  vertical-align: top;
  font-size: 1rem;
  overflow-wrap: anywhere;
  background: none;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--paper-rule);
}
.compare td:first-child { position: relative; padding: 18px 32px 18px 0; }
.compare td:last-child { padding: 18px 0 18px 28px; border-left: 1px solid var(--paper-rule); }
.compare th:first-child {
  font-family: var(--serif-e);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  padding: 0 32px 14px 0;
  border-bottom: 3px solid var(--blue);
  vertical-align: bottom;
}
.vs .them-h, .compare th:last-child { font: 600 0.875rem/1.3 var(--sans); color: var(--ink-muted); letter-spacing: 0; }
.vs td.us, .compare td:first-child { font-weight: 500; color: var(--ink); line-height: 1.5; }
.vs td.them, .compare td:last-child { color: var(--ink-muted); line-height: 1.5; }

/* Phones: only the chosen document is in the stack, so the card takes its height (no white space under a short one).
   The documents do not rotate on a phone (page.js), so the page only moves when the reader taps a tab. */
@media (max-width: 760px) {
  .binder .doc-stack .doc:not(.is-active) { display: none; }
}

/* ===== Counters ===== */
.ctr-list { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.ctr-list li { align-content: start; }
.js-on .ctr-list li { transition: transform .7s var(--ease), opacity .7s ease; }
.js-on .ctr-list li:has(.counter:not(.in)) { transform: translateY(16px); opacity: .4; }
.ctr-proof figure { margin: 0; display: grid; align-content: start; }
.ctr-proof blockquote { margin: 0; }
.ctr-trust { grid-column: 1 / -1; }
.ctr-proof { display: grid; align-items: start; }
.counters > .wrap { position: relative; z-index: 3; }
.ctr-list span { text-wrap: balance; }
.counters { background: #FFFFFF; color: var(--ink); }
.ctr-h { max-width: none; color: var(--ink); }
.counters .ctr-list li { border-color: var(--paper-rule); }
.counters .wrap {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: clamp(28px, 5vw, 80px);
  row-gap: 0;
  padding-block: clamp(64px, 8vw, 120px);
  align-items: start;
}
.counters .ctr-h { grid-column: 1; grid-row: 1; position: sticky; top: 112px; }
.counters .ctr-list { grid-column: 2; grid-row: 1; display: block; border-top: 1px solid var(--ink); }
.counters .ctr-list li:nth-child(n) {
  display: grid;
  grid-template-columns: minmax(0, 18.5rem) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 22px 0 24px;
  border-left: 0;
  border-bottom: 1px solid var(--paper-rule);
}
.counters .ctr-list span { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-2); max-width: 36em; margin-top: -5px; }
.counters .ctr-proof {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(56px, 6vw, 88px);
  padding-top: 0;
}
.counters .ctr-proof figure { padding: 22px 0 0; border-left: 0; border-top: 3px solid var(--blue); gap: 18px; }
.counters .ctr-proof blockquote {
  font: 400 var(--fs-h3)/1.32 var(--serif-e);
  letter-spacing: 0;
  color: var(--ink);
  text-indent: -0.42em;
}
.counters .ctr-trust { margin-top: clamp(12px, 2vw, 24px); font-size: 0.875rem; color: var(--ink-muted); }
.counters .ctr-list b, .door-stat b.counter {
  font: 350 clamp(2.75rem, 2.1rem + 2vw, 3.75rem)/1 var(--serif-e);
  letter-spacing: 0;
  font-variation-settings: "opsz" 72;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
  -webkit-text-fill-color: currentColor;
  background: none;
}
.counters .ctr-fn { grid-column: 2; margin: 18px 0 0; font: 400 0.875rem/1.5 var(--sans); color: var(--ink-muted); }

/* ===== The blue band ===== */
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 12px; }
.email { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.copy { transition: color .2s, border-color .2s; }
.email-address { display: inline-block; padding-block: 3px; }
.contact-card .email { font-size: var(--fs-body); }
.contact-card .email a.email-address { font-weight: 400; }
.contact-card .email .copy { font-size: var(--fs-body); }
.paper .email { color: var(--ink-muted); }
.contact > .wrap { position: relative; z-index: 1; }
.cta-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: cta; }
.cta-steps li { counter-increment: cta; font-size: 1rem; line-height: 1.5; }
.cta-steps li::before { content: counter(cta); display: block; }
.contact h2 .stop { background: #FFFFFF; opacity: 1; }
.contact .link:hover, .contact .link:focus-visible { color: #0A1628; }
.cta-steps li b { text-wrap: balance; display: block; }
.cta-steps li span { text-wrap: pretty; display: block; }
.contact { isolation: isolate; position: relative; overflow-x: clip; overflow-y: visible; z-index: 2; background: var(--blue); color: #FFFFFF; }
.contact .wrap { display: grid; gap: 24px; padding-block: clamp(72px, 9vw, 128px); }
.contact .cta-steps li { color: var(--ink); background: #FFFFFF; border-top: 0; border-radius: 3px; padding: 26px 26px 28px; box-shadow: var(--lift-blue); }
.contact h2 { color: #FFFFFF; font: 360 var(--fs-h2)/1.04 var(--serif-e); max-width: none; }
.contact .cta-steps li b { letter-spacing: 0; color: var(--ink); margin-bottom: 8px; font: 450 var(--fs-h4)/1.25 var(--serif-e); }
.contact .cta-steps li span { color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
.contact .cta-steps { margin-top: clamp(24px, 4vw, 48px); gap: clamp(20px, 3vw, 44px); }
.contact .cta-steps li::before {
  letter-spacing: 0;
  margin-bottom: 12px;
  font: 400 1.75rem/1 var(--serif-e);
  font-variation-settings: "opsz" 48;
  color: var(--blue);
}
.contact .btn.btn-primary { background: var(--navy); box-shadow: var(--lift-btn-dark); }
.contact .btn.btn-primary:hover, .contact .btn.btn-primary:focus-visible { background: #FFFFFF; color: var(--navy); }
.paper .copy, .enq-close {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  cursor: pointer;
  color: var(--blue-ink);
  font: 500 0.875rem/1.4 var(--sans);
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.copy:hover, .paper .copy:hover, .enq-close:hover, .copy:focus-visible, .enq-close:focus-visible { color: var(--navy); border: 0; background: none; }
.contact .cta-note { margin-top: 18px; font: 400 0.875rem/1.5 var(--sans); color: #FFFFFF; }
.contact .cta-note a { color: #FFFFFF; font-weight: 400; text-decoration-color: rgba(255, 255, 255, .55); }
.contact .cta-note a:hover, .contact .cta-note a:focus-visible { color: #FFFFFF; text-decoration-color: #FFFFFF; }

/* ===== Forms and the enquiry dialog ===== */
/* Enquiry dialog */
.enq-dialog::backdrop { background: rgba(6,14,28,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.enq-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.enq-form { display: grid; gap: 16px; color: #0A1628; }
.enq-form[hidden], .ef-done[hidden] { display: none; }
.enq-card .enq-form, .enq-card .ef-done { margin-top: 4px; }
.enq-dialog, .enq-dialog form { overscroll-behavior: contain; }
.enq-body .enq-alt { margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--paper-rule); font-size: 0.875rem; color: var(--ink-2); }
.enq-dialog {
  border: 0;
  color: #0A1628;
  border-radius: 6px;
  background: #FFFFFF;
  box-shadow: var(--lift-modal);
  width: min(720px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
}
.enq-dialog[open] { animation: enq-in .3s var(--ease) both; grid-template-rows: auto minmax(0, 1fr); display: flex; flex-direction: column; }
.enq-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--paper-rule);
  font: 450 var(--fs-h4)/1.2 var(--serif-e);
  letter-spacing: 0;
  color: var(--ink);
  background: #FFFFFF;
  flex: none;
}
.enq-body {
  padding: 22px 22px max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  background: #fff;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Form fields */
.ef-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.ef { display: grid; gap: 6px; }
.ef > span { font: 600 1rem/1.4 var(--sans); color: #0A1628; }
.ef > span i { font-style: normal; font-weight: 500; color: #5E6E87; margin-left: 4px; }
.ef input, .ef textarea {
  width: 100%;
  font: 400 1rem/1.5 var(--sans);
  color: #0A1628;
  background: #FBFCFD;
  border: 1px solid #C9D3E0;
  padding: 11px 13px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  border-radius: 3px;
}
.ef textarea { resize: vertical; min-height: 128px; }
input::placeholder, textarea::placeholder { color: var(--ink-faint); font-weight: 400; opacity: 1; }
.ef input:hover, .ef textarea:hover { border-color: #93A4BC; }
.ef input:focus, .ef textarea:focus { outline: none; border-color: #1792F7; box-shadow: 0 0 0 3px rgba(23,146,247,.18); background: #fff; }
.ef small { font-size: 1rem; line-height: 1.5; color: #5E6E87; }
.ef-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ef-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ef-note { color: #5E6E87; }
.ef-status:empty { display: none; }
.ef-check { display: flex; gap: 10px; align-items: flex-start; }
.ef-check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--blue); flex: none; }
.ef-check span { font-size: 1rem; }
.ef-note, .refer-note, .kv-note { font-size: var(--fs-body); line-height: 1.5; }   /* one text size in the forms and contact cards, roles by weight and colour (Martin, 5 Nov 2026: "sizing is all off") */
.ef-error { font: 400 1rem/1.5 var(--sans); color: var(--navy); }
.ef-error[hidden] { display: none; }
.ef.is-invalid input, .ef.is-invalid textarea { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.ef-check.is-invalid input { outline: 1px solid var(--blue); outline-offset: 2px; }
.ef-check + .ef-error { margin-top: -8px; }
.ef-done { padding: 4px 0 8px; color: var(--ink); outline: none; }
.ef-done b { display: block; font: 450 var(--fs-h4)/1.3 var(--serif-e); letter-spacing: 0; color: var(--ink); }

/* ===== Footer ===== */
.foot-meta { align-content: start; }
.foot-col a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.foot-col a:hover::after { transform: scaleX(1); }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 400 12px/1.5 var(--sans); letter-spacing: 0; }
.foot-brand .tag > span { display: block; }   /* the two lines only; the diamond stop and its word stay inline */
.foot-brand .btn { justify-self: end; }
.foot-col { display: grid; align-content: start; gap: 12px; font-size: 0.875rem; }
.site-footer > *:not(.foot-mark) { position: relative; z-index: 3; }
.site-footer .foot-brand .tag { font-weight: 360; letter-spacing: 0; }
.site-footer { position: relative; overflow: hidden; background: #FFFFFF; border-top: 1px solid var(--paper-rule); }
.site-footer .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-block: clamp(56px, 6vw, 88px) 32px;
}
.foot-brand {
  align-content: start;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px 40px;
  grid-column: auto;
  display: block;
  padding-bottom: 0;
  border-bottom: 0;
}
.foot-brand .tag { margin: 22px 0; font: 400 var(--fs-h4)/1.25 var(--serif-e); color: var(--ink); }
.foot-col b { font: 600 0.875rem/1.3 var(--sans); letter-spacing: 0; color: var(--ink); margin-bottom: 6px; }
.foot-col a { position: relative; width: fit-content; font-size: 0.875rem; }
.site-footer .foot-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  padding-top: 20px;
  border-top: 1px solid var(--paper-rule);
  font-size: 0.875rem;
  color: var(--ink-2);
}
.site-footer .foot-bottom { grid-column: 1 / -1; border-top: 0; padding-top: 0; font-size: 0.75rem; color: var(--ink-muted); }
.site-footer .foot-bottom { align-items: center; }
.foot-social { display: inline-flex; flex: none; color: var(--navy); padding: 4px; margin: -4px; transition: color .2s ease; }
.foot-social:hover, .foot-social:focus-visible { color: var(--blue); }
.foot-brand img { grid-column: 1 / -1; width: auto; height: 46px; }
.foot-col a, .foot-meta a { color: var(--ink-2); font-weight: 400; text-decoration: none; }
.foot-col a:hover, .foot-col a:focus-visible { color: var(--navy); }
/* footer columns already draw a blue line on hover, so no second underline */
.foot-meta a:hover, .foot-meta a:focus-visible {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ===== Cookie consent (built by src/tags.js on the live site) ===== */
.cc {
  position: fixed;
  z-index: 60;
  left: max(16px, env(safe-area-inset-left, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  margin: 0 auto;
  max-width: 760px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 18px 16px 22px;
  background: #FFFFFF;
  color: var(--ink);
  border: 1px solid var(--paper-rule);
  border-top: 3px solid var(--blue);
  border-radius: 6px;
  box-shadow: 0 34px 64px -32px rgba(10, 22, 40, .55);
  font: 400 .875rem/1.5 var(--sans);
  animation: cc-in .45s var(--ease) both;
}
.cc[hidden] { display: none; }
.cc p { flex: 1; color: var(--ink-2); }
.cc-btns { display: flex; gap: 8px; flex: none; }
.cc-btn {
  cursor: pointer;
  border-radius: 3px;
  padding: 12px 18px;
  font: 700 .875rem/1 var(--sans);
  background: #FFFFFF;
  color: var(--ink);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  border: 1px solid var(--paper-rule);
}
.cc-btn:hover { border-color: var(--ink-2); }
.cc-yes { background: var(--blue); color: #FFFFFF; border-color: var(--blue); }
.cc-yes:hover { background: var(--navy); border-color: var(--navy); }
.cc-btn:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }

/* ===== Utilities ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
table.sr-only { display: block; }
.lh-word { display: none; }

/* ===== Media queries ===== */

/* Wider gutter from 720 px */
@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

/* From 1100 px */
@media (min-width: 1100px) {
  :root { --gutter: 56px; }
  .cta-steps li span + span { white-space: nowrap; }
  .cta-steps li span { white-space: normal; text-wrap: pretty; }
}

/* Large screens: wider page from 1600 px */
@media (min-width: 1600px) {
  :root { --wrap: 1400px; --gutter: 64px; }
  .page-hero.with-object .wrap > .sheet, .page-hero.with-object .wrap > .stage { justify-self: end; }
}

/* Very large screens from 1880 px */
@media (min-width: 1880px) {
  :root { --wrap: 1520px; --gutter: 72px; }
}

/* Header links tighten between 961 and 1180 px */
@media (max-width: 1180px) and (min-width: 961px) {
  .nav-links { gap: 20px; }
  .nav .nav-links a { font-size: 0.875rem; }
}

/* 1080 px and narrower */
@media (max-width: 1080px) {
  .svc-group { grid-template-columns: minmax(0, 1fr); }
  .svc-group-h { padding-bottom: 0; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-e .hero-copy { max-width: 40em; }
  .counters .wrap { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .counters .ctr-h { position: static; }
  .counters .ctr-list { grid-column: 1; grid-row: auto; }
  .counters .ctr-fn { grid-column: 1; margin-top: 16px; }
}

/* Tablets: hero documents centred between 601 and 1080 px */
@media (min-width: 601px) and (max-width: 1080px) {
  .page-hero.with-object .wrap > .sheet, .page-hero.with-object .wrap > .stage { margin-inline: auto; width: min(100%, 640px); }
  .hero-e .binder { width: min(100%, 760px); margin-inline: auto; }
}

/* 1040 px and narrower: the header links give way to the Menu button and its panel */
@media (max-width: 1040px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
  .nav .menu-btn, .menu-panel .menu-btn { border-radius: 3px; font: 600 0.875rem/1 var(--sans); min-height: 42px; padding: 0 16px 0 14px; }
  .nav .menu-btn i { width: 16px; height: 1.5px; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
  .nav .menu-btn:hover, .menu-panel .menu-btn:hover { background: var(--mist); border-color: var(--ink-2); }
  body.menu-open { overflow: hidden; }
  .menu-panel {
    position: fixed;
    inset: 0;
    z-index: 35;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s;
    padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 32px) max(var(--gutter), env(safe-area-inset-left, 0px));
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .menu-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s;
  }
  .menu-panel a { line-height: 1.15; text-decoration: none; }
  .menu-top { display: flex; align-items: center; justify-content: space-between; min-height: 80px; padding-top: env(safe-area-inset-top, 0px); }
  .menu-top .menu-brand { display: block; padding: 0; border: 0; font-size: 0; line-height: 0; }
  .menu-top .menu-brand img { height: 46px; width: auto; }
  .menu-panel .close { position: static; }
  .menu-panel .close i { position: relative; width: 14px; height: 14px; background: none; box-shadow: none; }
  .menu-panel .close i::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 1.5px;
    background: currentColor;
    transform: rotate(45deg);
  }
  .menu-panel .close i::after {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 1.5px;
    background: currentColor;
    transform: rotate(-45deg);
  }
  .menu-links { display: flex; flex-direction: column; margin-top: 24px; }
  .menu-links a {
    display: block;
    font-size: 1.75rem;
    line-height: 1.15;
    padding: 12px 0;
  }
  .menu-links a[aria-current="page"] { color: var(--blue-ink); }
  .menu-links a:hover, .menu-links a:focus-visible { color: var(--blue-ink); }
  .menu-foot { margin-top: 40px; display: grid; gap: 10px; }
  .menu-foot p { margin: 0; }
  .menu-foot p a { display: inline-block; font-family: var(--sans); font-size: 1rem; padding: 6px 0; border: 0; }
  .menu-foot .btn { display: flex; width: 100%; }
  .menu-foot .menu-mail { margin: 6px 0 0; font: 400 0.9375rem/1.5 var(--sans); color: var(--ink-2); }
  .menu-foot .menu-mail a { display: inline; padding: 0; font: inherit; color: var(--blue-ink); text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 3px; }
}

/* 1024 px and narrower */
@media (max-width: 1024px) {
  .refer { grid-template-columns: minmax(0, 1fr); }
}

/* 960 px and narrower: two-column layouts go to one */
@media (max-width: 960px) {
  .section-head h2, .why-copy h2 { max-width: none; }
  .nav .btn { display: none; }
  .hero .wrap, .page-hero.with-object .wrap { grid-template-columns: minmax(0, 1fr); }
  .svc-stage { padding-block: 8px; }
  /* Stacked, the head and its rows take the same space as every other section head (spacing check, 6 Nov 2026: the grid
     gap added 40 px on phones, so "What it is not" sat 92 px above its rows against 52 px elsewhere) */
  .map-grid { display: block; }
  .map-grid .section-head + * { margin-top: var(--sp-after-head); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; }
  .steps li + li { padding-left: 0; }
  .steps li:nth-child(even) { padding-left: 32px; }
  .legal-grid { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; }
  .why-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 900 px and narrower */
@media (max-width: 900px) {
  .binder { grid-template-columns: 1fr; }
  .binder .doc-tabs .doc-tab {
    flex: none;
    min-width: 0;
    white-space: nowrap;
    margin: 0 0 -1px;
    padding: 11px 14px;
    border: 1px solid var(--paper-rule);
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
  }
  .binder .doc-tabs .doc-tab.is-active { margin: 0 0 -1px; }
  .binder .doc-tabs .doc-tab i {
    left: 8px;
    right: 8px;
    top: 0;
    bottom: auto;
    width: auto;
    height: 3px;
    transform-origin: left;
    transform: scaleX(0);
  }
  .binder .doc-tabs .doc-tab.is-active.is-timing i { animation-name: tabtime; }
  .binder .doc-stack .doc { border-radius: 0 0 3px 3px; }
  /* every document stays in the stack (no jump between tabs); a shorter document centres its chart in the space, so the gap splits above and below instead of collecting at the foot (5 Nov 2026) */
  .binder .doc-tabs {
    order: -1;
    flex-direction: row;
    margin: 0;
    overflow-x: auto;
    padding: 0 28px 0 2px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent);
  }
  .rp-stack::before, .rp-stack::after { display: none; }
  .site-footer .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .site-footer .foot-brand { grid-column: 1 / -1; }
  .site-footer .foot-col:nth-of-type(2) { grid-column: 1; grid-row: span 2; }
}

/* 760 px and narrower */
@media (max-width: 760px) {
  :root { --sp-head-gap: 16px; --sp-after-head: 40px; --sp-row: 24px; }
  .crumb a { display: inline-block; padding: 8px 0; }
  .section-head { margin-bottom: 36px; }
  .paper > .wrap { padding-block: 56px; }
  .paper + .paper > .wrap { padding-top: 40px; }
  .in-short.svc-short { margin-bottom: 56px; }
  .page-hero .lede, .hero .lede { margin-top: 18px; }
  .hero-actions { margin-top: 28px; }
  .hero-note { margin-top: 16px; }
  .hero-e .wrap, .page-hero .wrap { padding-bottom: 48px; }
  .doc-facts { grid-template-columns: minmax(0, 1fr); }
  .sheet, .doc { padding: 24px 20px; }
  .quotes { grid-template-columns: minmax(0, 1fr); }
  .door-proof { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .entry { grid-template-columns: 1fr; gap: 6px; padding: 24px 0; }
  .entry::before { display: none; }
  .e-go { padding-top: 8px; }
  .refer-panel { padding: 20px; }
  .svc-item::before, .client-row::before { display: none; }
  .client-row .row-work { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .area.area-solo { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 24px 0; }
  .index .go { display: inline; }
  .rows .row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0 24px; }
  .row h3 { margin-bottom: 2px; }
  .index a { padding-block: 30px; gap: 8px; grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li:nth-child(n) { padding-left: 0; }
  .svc-item { grid-template-areas: "t" "k" "d"; gap: 6px; padding: 24px 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .svc-group { grid-template-columns: minmax(0, 1fr); }
  .svc-group .svc-item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "d"; padding: 18px 0 4px; }
  .svc-group .svc-item:last-child { padding-bottom: 22px; }
  .svc-group-h { padding: 28px 0 0; }
  .svc-group .svc-item { padding: 18px 0 20px; }
  .why-intro { grid-template-columns: 1fr; }
  /* Comparison tables on phones (Martin, 6 Nov 2026: "looks a bit strange"): one row per point, our line first,
     then the usual experience under a small "Usually" label. The header stays for screen readers only, and the
     grey quote-like bars are gone. Same for the home table (.vs) and the /services table (.compare). */
  .vs, .vs tbody, .vs tr, .vs td,
  .compare, .compare tbody, .compare tr, .compare td { display: block; width: 100%; }
  .vs thead, .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vs tbody, .compare tbody { border-top: 3px solid var(--blue); }
  .vs tr, .compare tr { padding: 18px 0 20px; border-bottom: 1px solid var(--paper-rule); }
  .vs td, .compare td, .vs td.us, .vs td.them, .compare td:first-child, .compare td:last-child { border: 0; padding: 0; }
  .vs td.them, .compare td:last-child { margin-top: 10px; }
  .vs td.them::before, .compare td:last-child::before { content: "Usually"; display: block; margin-bottom: 2px; font: 600 0.75rem/1.4 var(--sans); color: var(--ink-faint); }
  .ctr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counters .ctr-list { row-gap: 28px; }
  .counters .ctr-list li:nth-child(n) { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px 0 22px; }
  .counters .ctr-list span { margin-top: 0; }
  .counters .wrap { padding-block: 48px 56px; row-gap: 0; }
  .counters .ctr-proof { grid-template-columns: minmax(0, 1fr); margin-top: 32px; gap: 28px; }
  .counters .ctr-proof blockquote, .pull blockquote, .quotes blockquote { text-indent: 0; }
  .counters .ctr-proof figure { padding-top: 18px; gap: 12px; }
  .counters .ctr-trust { margin-top: 8px; }
  .cta-steps { grid-template-columns: minmax(0, 1fr); }
  .contact .wrap { padding-block: 56px; }
  .contact .cta-steps { gap: 22px; }
  .contact .cta-steps li { padding: 20px 20px 22px; }
  .enq-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-brand { grid-template-columns: minmax(0, 1fr); }
  .foot-brand .btn { justify-self: start; }
  .site-footer .foot-col { gap: 0; }
  .site-footer .foot-col a { display: inline-block; padding: 4px 0; }
}

/* 640 px and narrower */
@media (max-width: 640px) {
  .page-hero .outcome { padding-left: 14px; }
}

/* 600 px and narrower (phones) */
@media (max-width: 600px) {
  :root { --gutter: 24px; }
  /* the five document tabs on a phone: five equal boxes, three above and two centred below, none off-screen (Martin, 5 Nov 2026) */
  .binder .doc-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; overflow: visible; padding: 0; margin: 0 0 8px; -webkit-mask-image: none; mask-image: none; }
  .binder .doc-tabs .doc-tab, .binder .doc-tabs .doc-tab.is-active { grid-column: span 2; min-width: 0; justify-content: center; text-align: center; white-space: nowrap; margin: 0; padding: 10px 4px; border: 1px solid var(--paper-rule); border-radius: 3px; }
  .binder .doc-tabs .doc-tab:nth-child(4) { grid-column: 2 / span 2; }
  .binder .doc-tabs .doc-tab:nth-child(5) { grid-column: 4 / span 2; }
  .binder .doc-stack .doc { border-radius: 3px; }
  p + p { margin-top: 18px; }
  .section-head { gap: 10px; margin-bottom: 52px; }
  .site-header .wrap, .menu-top { min-height: 68px; }
  .brand img, .menu-top .menu-brand img { height: 40px; }
  .hero h1 .stop, .page-hero h1 .stop { width: .2em; height: .2em; }
  .hero > .wrap { gap: 28px; }
  .page-hero .wrap { padding-top: 24px; gap: 18px; }
  .page-hero .lede { margin-top: 26px; }
  .hero .wrap { padding-top: 40px; }
  .hero .lede { margin-top: 26px; }
  .hero-actions { margin-top: 40px; }
  .hero-note { margin-top: 26px; }
  .hero-e h1 > span { white-space: nowrap; }
  .rp-tabs {
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 6px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent);
  }
  .rp-tabs::-webkit-scrollbar { display: none; }
  .rp-tab { flex: 0 0 auto; }
  .sheet-ref { white-space: nowrap; }
  .ex-single { gap: 20px; }
  .doc { min-width: 0; }
  .sheet-letterhead { gap: 8px; flex-wrap: nowrap; }
  .sheet-letterhead .sheet-mark, .vs-lockup { height: 22px; }
  .door-proof { gap: 20px; }
  .prose > h2[id] { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .prose > h2[id] ~ p { margin-left: 0; }
  .client-row .row-work { row-gap: 12px; }
  .svc-list li + li { border-top: 1px solid var(--paper-rule); }
  .svc-list li a { display: block; }
  .svc-list li a span:first-child { display: block; font-weight: 600; line-height: 1.35; }
  .svc-list li a .p { display: block; margin-top: 3px; white-space: normal; }
  .door-qs .keeps li { grid-template-columns: minmax(0, 1fr); }
  .contents li a { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 0; }
  .contents li a .p { text-align: left; }
  .counters .ctr-list { row-gap: 44px; }
  .site-footer .wrap { gap: 28px 24px; }
  .contact > .wrap { gap: 20px; }
  .enq-dialog { inset: 0; margin: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .enq-head {
    padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
  }
  .enq-body {
    padding: 16px max(16px, env(safe-area-inset-right, 0px)) max(32px, calc(env(safe-area-inset-bottom, 0px) + 24px)) max(16px, env(safe-area-inset-left, 0px));
  }
  .cc { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
  .cc-btns .cc-btn { flex: 1; }
}

/* 560 px and narrower: the comparison table stacks */
@media (max-width: 560px) {
  .rp-tab { padding: 0 14px 0 6px; min-height: 38px; }
  .rp-num { width: 24px; height: 24px; }
  .rp-head span:last-child { display: none; }
  .rp-cover { min-height: 320px; }
  .rp .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ef-row { grid-template-columns: minmax(0, 1fr); }
}

/* 480 px and narrower */
@media (max-width: 480px) {
  .sheet-letterhead { row-gap: 6px; }
  .sheet-ref { margin-left: auto; }
}

/* 340 px and narrower */
@media (max-width: 340px) {
  .binder .doc-tabs .doc-tab { font-size: 0.8125rem; padding-inline: 2px; }
  .site-footer .wrap { grid-template-columns: minmax(0, 1fr); }
  .site-header .wrap, .menu-top { gap: 12px; }
  .brand img, .menu-top .menu-brand img { height: 34px; }
}

/* From 561 px: comparison table columns */
@media (min-width: 561px) {
  .compare th:first-child, .compare td:first-child { width: 60%; }
  .compare th:last-child, .compare td:last-child { width: 40%; }
  .compare td:last-child { font-size: 1rem; }
}

/* From 601 px */
@media (min-width: 601px) {
  .doc-tabs { flex-wrap: wrap; justify-content: center; }
}

/* From 761 px: row and index columns */
@media (min-width: 761px) {
  .row { column-gap: 48px; }
  .index a { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr) clamp(10rem, 18vw, 16rem); }
  .index .go { justify-self: end; text-align: right; white-space: normal; }
  .wrap > .rows > .row { grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 56px); }
  .area.area-solo { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr) clamp(10rem, 18vw, 16rem); }
  .area.area-solo .area-copy .link { justify-self: end; text-align: right; white-space: normal; }
}
/* An upright iPad: titles get 12rem so a service name takes two lines, not four (sweep, 6 Nov 2026) */
@media (min-width: 761px) and (max-width: 1100px) {
  .index a, .area.area-solo { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) clamp(10rem, 17vw, 12rem); }
  /* Row lists take the same 12rem title column on an iPad, so the text gets the width (Martin, 6 Nov 2026: "left column
     is too large"; it was 16.5 to 18rem, about 40% of the page at 820 px) */
  .rows .row, .wrap > .rows > .row, .rows .when-row { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); column-gap: 40px; }
}
/* "How we help" on the client pages follows the services list (Martin, 6 Nov 2026: "these should follow the same principle
   design as the services section"): a title column and a description column, no rule between rows, a dark rule above and
   below the list. A row's own link (another page) sits under its description, not in a third column. */
.door-index, .section-head + .area.area-solo { border-top: 1px solid var(--ink); }
.door-index.area-more { border-top: 0; }
.door-index { border-bottom: 1px solid var(--ink); }
.door-index a, .door-index a:first-child, .area.area-solo { border-top: 0; }
.door-index a:last-child { border-bottom: 0; }
@media (min-width: 761px) {
  .door-index a, .area.area-solo { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 56px); row-gap: 8px; padding: 32px 0 8px; }
  .door-index a:last-child { padding-bottom: 32px; }
  .door-index a .go, .area.area-solo .area-copy .link { grid-column: 2; justify-self: start; text-align: left; }
}
@media (max-width: 760px) {
  .door-index a, .area.area-solo { padding: 24px 0 4px; }
  .door-index a:last-child { padding-bottom: 24px; }
}

/* From 961 px */
@media (min-width: 961px) {
  .hero .wrap { grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); }
  .hero .sheet, .page-hero .sheet { margin-left: auto; }
  /* The binder's side tabs keep their width: "Proof of debt claim" takes two lines, and every tab is two lines tall so they stay even */
}

/* Between 961 and 1439 px */
@media (min-width: 961px) and (max-width: 1439px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
}

/* From 1041 px: header links on an even grid */
@media (min-width: 1041px) {
  .nav-links { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: 40px; }
  .nav .nav-links a { justify-content: center; }
}

/* From 1200 px */
@media (min-width: 1200px) {
  .svc-list li a .p { white-space: nowrap; }
}

/* Motion that runs only when the visitor has not asked for less */
@media (prefers-reduced-motion: no-preference) {
  .svc-hero .crumb { animation: rise .6s var(--ease) both; }
  .svc-hero h1 .w { animation: rise .7s var(--ease) both; }
  .svc-hero h1 .w:nth-child(1) { animation-delay: .08s; }
  .svc-hero h1 .w:nth-child(2) { animation-delay: .2s; }
  .svc-hero h1 .w:nth-child(3) { animation-delay: .32s; }
  .page-hero h1 .stop { animation: stop-in .7s .6s cubic-bezier(.3,1.6,.5,1) both; }   /* every page title's diamond drops in (Martin, 5 Nov 2026) */
  .svc-hero h1 .stop { animation: stop-in .7s .85s cubic-bezier(.3,1.6,.5,1) both; }
  .svc-hero .lede { animation: rise .7s .45s var(--ease) both; }
  .sheet { animation: svc-sheet-smooth .9s .2s cubic-bezier(.22, .61, .36, 1) backwards; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .js-on .section-head .stop, .js-on .section-head h2, .js-on .why-copy h2, .js-on .why-copy .stop {
    transition: none;
    transform: none;
    clip-path: none;
  }
  .site-header .wrap { transition: none; }
  .hero h1, .hero .lede, .hero-actions, .hero-note { animation: none; }
  .doc-stack .doc { transition: none; }
  .hero h1 .stop, .page-hero h1 .stop { animation: none; }
  .sheet { animation: none; }
  .js-on .exhibit { transform: none; transition: none; }
  .rp-page, .rp-page.is-active { transition: none; transform: none; }
  .js-on .row, .js-on .quote { transform: none; transition: none; }
  .entry::before, .binder .doc-tabs .doc-tab { transition: none; }
  .js-on .ctr-list li { transition: none; transform: none; opacity: 1; }
  .cc { animation: none; }
  html { scroll-behavior: auto; }
}

/* Print (the policy pages print cleanly) */
@media print {
  body, .paper, .page-hero { background: #fff !important; color: #000; }
  a { color: #000 !important; }
  .menu-panel,
  .contact,
  .site-header,
  .site-footer,
  .legal-toc,
  .enq-dialog,
  .page-hero .crumb,
  .doc-end .link[href="#top"] {
    display: none;
  }
  .hero { color: #000; }
  .hero .lede { color: #333; }
  .page-hero { padding: 0 0 12px; min-height: 0; }
  .page-hero h1, .page-hero .lede, .prose, .prose h2, .prose strong, .doc-facts dd, .in-short { color: #000; }
  .page-hero .outcome { color: #000; border-left-color: #000; }
  .legal-grid { display: block; }
  .prose { max-width: none; }
  .prose h2 { break-after: avoid; }
  .in-short { background: none; border: 1px solid #999; }
  .cc { display: none; }
}

@media (min-width: 901px) {
  .refer-panel { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(40px, 5vw, 72px); align-items: start; }
  .refer-panel b { margin-bottom: 0; font-size: var(--fs-h4); line-height: 1.25; }
}

/* svc-short two columns: the engagement box uses the width of the page (Martin, 5 Nov 2026) */
@media (min-width: 901px) {
  .in-short.svc-short { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: clamp(40px, 5vw, 80px); row-gap: 10px; padding: clamp(26px, 3vw, 40px) clamp(26px, 3.5vw, 48px); align-items: start; }
  .in-short.svc-short > h2 { grid-column: 1; grid-row: 1; }
  .in-short.svc-short > .job { grid-column: 1; grid-row: 2; margin: 0; font-size: var(--fs-lede); line-height: 1.45; max-width: 34ch; }
  .in-short.svc-short > p:not(.job) { grid-column: 2; grid-row: 1 / span 3; max-width: 64ch; }
}