/* =====================================================================
   Kingsway family layer. /assets/family.css
   Tokens, type, layout, chrome, components, document and diagram
   primitives, print base. Shared by every Kingsway site.
   Specialist layers sit in their own file and their own @layer, and set
   only the hooks listed in docs/FAMILY-SYSTEM.md. Page inline CSS is
   unlayered and always wins.
   Contrast ratios for every pair are in docs/FAMILY-SYSTEM.md.
   ===================================================================== */

@layer family {

/* Metric-matched stand-ins for Source Serif 4 while it loads from Google
   Fonts: the local Georgia, scaled to Source Serif 4's advance and given its
   ascent and descent (1.036 and 0.335 em, divided by the size adjustment),
   so text set in the fallback wraps as it will in Source Serif 4 and nothing
   moves when the font swaps in. Source Serif 4 has an optical-size axis, so
   its width against Georgia changes with size (measured 2 October 2026:
   0.93 to 0.99 at 30 to 54px display sizes, 1.00 for 21 to 24px ledes, 1.03
   at 18px): display text and running serif text get one face each. One face
   covers every weight, so no bold is synthesised. Where Georgia is not
   installed, the stack carries on as before. */
@font-face {
  font-family: "Source Serif 4 Display Fallback";
  src: local("Georgia");
  font-weight: 100 900;
  size-adjust: 97%;
  ascent-override: 106.8%;
  descent-override: 34.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Source Serif 4 Fallback";
  src: local("Georgia");
  font-weight: 100 900;
  size-adjust: 100%;
  ascent-override: 103.6%;
  descent-override: 33.5%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------------
   1. Layer 1 primitives (--k-*). Components never read these directly.
   --------------------------------------------------------------------- */
:root {
  --k-ground: #F4F0E6;
  --k-paper: #FBF9F4;
  --k-field: #FFFFFF;
  --k-band: #141A1F;
  --k-colophon: #101519;
  --k-raised: #1E252B;
  --k-band-rule: #2E383F;
  --k-band-rule-strong: #6B767F;

  --k-ink-900: #141A1F;
  --k-slate-700: #3D454C;
  --k-slate-600: #5C646B;

  --k-gold-700: #735A22;
  --k-gold-400: #C9A961;
  --k-gold-300: #D4B571;
  --k-signal: #E8C46B;

  --k-pos-700: #2F6B48;
  --k-amber-700: #9C4300;
  --k-neg-700: #9A3B26;
  --k-pos-tint: #E6F0E9;
  --k-amber-tint: #F9E9DA;
  --k-neg-tint: #F5E4DF;
  --k-est-tint: #EFE8D8;
  --k-illus-tint: #ECE6DA;

  --k-editor: #2A5B8C;
  --k-editor-tint: #E6EEF6;

  --k-stone-600: #7A7266;
  --k-stone-500: #8C8375;
  --k-stone-300: #D8D1C2;
  /* Stone: the mid band between ground and paper (V2.1). Text pairs on it are
     in docs/FAMILY-SYSTEM.md; rules on stone use stone-600, not stone-500. */
  --k-stone: #EAE3D5;

  --k-on-band: #E9ECEE;
  --k-on-band-2: #B4BCC2;
  --k-pos-band: #5FAE7E;
  --k-amber-band: #EE9A5C;
  --k-neg-band: #E39178;

  /* Type (V2.1). Source Serif 4 is the display and editorial voice; Plex Sans
     is the interface; Barlow Condensed survives only in the wordmark and in
     document and route numerals (--k-font-numeral). */
  --k-font-display: "Source Serif 4", "Source Serif 4 Display Fallback", "Iowan Old Style", Georgia, serif;
  --k-font-serif: "Source Serif 4", "Source Serif 4 Fallback", "Iowan Old Style", Georgia, serif;
  --k-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --k-font-numeral: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --k-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --k-radius: 2px;
  --k-radius-sheet: 4px;
  --k-measure: 66ch;
  --k-wrap: 1200px;
  --k-gutter: 24px;
  --k-section-pad: clamp(72px, 7.5vw, 128px);
  --k-section-pad-compact: clamp(56px, 6vw, 88px);
  --k-hatch: repeating-linear-gradient(45deg, var(--k-stone-500) 0 1.5px, transparent 1.5px 5px);
  /* A soft, layered sheet shadow: a hairline of shade, a near contact shadow
     and a long, faint fall. Paper reads as a sheet on the ground without a border. */
  --k-shadow-sheet:
    0 0 0 1px rgba(20, 26, 31, .05),
    0 1px 2px rgba(20, 26, 31, .06),
    0 6px 14px -6px rgba(20, 26, 31, .10),
    0 26px 48px -18px rgba(20, 26, 31, .18);
  --k-shadow-lift:
    0 0 0 1px rgba(20, 26, 31, .06),
    0 2px 4px rgba(20, 26, 31, .07),
    0 12px 22px -8px rgba(20, 26, 31, .14),
    0 36px 60px -20px rgba(20, 26, 31, .22);
  --k-shadow-band: 0 30px 60px -24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .2);
  --k-ease: cubic-bezier(.2, .7, .2, 1);

  /* Specialist hooks. A specialist layer may set these and nothing else. */
  --spec-accent: var(--k-on-band-2);
  --spec-print-host: "";
}

/* ---------------------------------------------------------------------
   2. Layer 2 semantic roles. Components use only these.
   Light scope is the default; .k-band and the chrome swap to charcoal;
   a paper sheet placed on a band swaps back to light.
   --------------------------------------------------------------------- */
:root,
.k-light,
.k-doc,
.k-sheet,
.k-preview,
.kmap {
  --surface-ground: var(--k-ground);
  --surface-paper: var(--k-paper);
  --surface-field: var(--k-field);
  --surface-band: var(--k-band);
  --surface-colophon: var(--k-colophon);
  --surface-raised: var(--k-raised);
  --surface-stone: var(--k-stone);

  --text: var(--k-ink-900);
  --text-2: var(--k-slate-700);
  --text-3: var(--k-slate-600);
  --text-on-band: var(--k-on-band);
  --text-on-band-2: var(--k-on-band-2);

  --rule: var(--k-stone-300);
  --rule-strong: var(--k-stone-500);
  --rule-ink: var(--k-ink-900);
  --field-border: var(--k-stone-600);

  --signature: var(--k-gold-700);
  --action-fill: var(--k-gold-400);
  --action-fill-hover: var(--k-gold-300);
  --action-text: var(--k-ink-900);
  --action-border: var(--k-gold-700);
  --outline-ink: var(--k-ink-900);
  --hover-wash: rgba(20, 26, 31, .06);

  --status-good: var(--k-pos-700);
  --status-good-tint: var(--k-pos-tint);
  --status-attention: var(--k-amber-700);
  --status-attention-tint: var(--k-amber-tint);
  --status-risk: var(--k-neg-700);
  --status-risk-tint: var(--k-neg-tint);

  --scaffold: var(--k-editor);
  --scaffold-tint: var(--k-editor-tint);
  --est-tint: var(--k-est-tint);
  --illustrative-tint: var(--k-illus-tint);

  --focus: var(--k-ink-900);
  --tag-line: var(--k-stone-600);
}

.k-band,
.k-header,
.k-colophon,
.k-lockup-tile {
  --text: var(--k-on-band);
  --text-2: var(--k-on-band-2);
  --text-3: var(--k-on-band-2);
  --rule: var(--k-band-rule);
  --rule-strong: var(--k-band-rule-strong);
  --rule-ink: var(--k-on-band-2);
  --signature: var(--k-gold-400);
  --action-border: var(--k-gold-400);
  --outline-ink: var(--k-on-band-2);
  --hover-wash: rgba(233, 236, 238, .08);
  --status-good: var(--k-pos-band);
  --status-attention: var(--k-amber-band);
  --status-risk: var(--k-neg-band);
  --focus: var(--k-gold-400);
  --tag-line: var(--k-band-rule-strong);
  background-color: var(--surface-band);
  color: var(--text);
}
.k-colophon { background-color: var(--surface-colophon); }
.k-band--raised { background-color: var(--surface-raised); }

/* Stone: a light scope on the mid band. Strong rules move to stone-600 so
   they keep 3:1 (stone-500 is 2.93 on stone). */
.k-stone {
  --rule-strong: var(--k-stone-600);
  background-color: var(--surface-stone);
  color: var(--text);
}

/* ---------------------------------------------------------------------
   3. Base and reset
   --------------------------------------------------------------------- */
:root { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
html {
  background-color: var(--surface-ground);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background-color: var(--surface-ground);
  color: var(--text);
  font-family: var(--k-font-sans);
  font-size: 18px;
  line-height: 1.65;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre) { margin: 0; }
:where(ul, ol)[class] { margin: 0; padding: 0; list-style: none; }
:where(img, video, canvas) { max-width: 100%; height: auto; }
:where(svg) { max-width: 100%; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(button) { cursor: pointer; }
:where(table) { border-collapse: collapse; }
:where(p) { max-width: var(--k-measure); }
[hidden]:not([hidden="until-found"]) { display: none !important; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--k-est-tint); color: var(--k-ink-900); }

small { font-size: max(13px, .85em); }
strong, b { font-weight: 600; }
hr, .k-rule { border: 0; border-top: 1px solid var(--rule); margin: var(--s-6) 0; }
.k-rule--ink { border-top-color: var(--rule-ink); }

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

/* Numerals: lining and tabular wherever figures are compared. */
table, .k-num, .k-figure-display, .k-amount, data[value], .k-ledger, .k-glance {
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---------------------------------------------------------------------
   4. Type scale (V2.1). Source Serif 4 for display, headings, ledes and
   document prose; Plex Sans for interface and body. Sentence case
   everywhere: uppercase only in the wordmark and the small running heads.
   --------------------------------------------------------------------- */
h1, .k-h1 {
  font-family: var(--k-font-display);
  font-weight: 540;
  font-size: clamp(36px, 2.2vw + 24px, 56px);
  line-height: 1.08;
  letter-spacing: -.012em;
  text-transform: none;
  max-width: 20ch;
  text-wrap: balance;
  color: var(--text);
}
/* Display: the one hero headline on a page. 72 to 76px desktop, 40 to 44 on a phone. */
.k-display {
  font-family: var(--k-font-display);
  font-weight: 540;
  font-size: clamp(40px, 3vw + 29px, 74px);
  line-height: 1.05;
  letter-spacing: -.015em;
  max-width: 17ch;
  text-wrap: balance;
}
/* A two-tone headline: the second clause in a quieter tone. --line starts
   a quiet sentence on its own line, so no word of it is left at the end of
   the first; leave it off where the quiet clause continues the sentence. */
.k-quiet { color: var(--text-3); font-weight: 400; }
.k-quiet--line { display: block; }
h2, .k-h2 {
  font-family: var(--k-font-display);
  font-weight: 520;
  font-size: clamp(30px, 1.35vw + 25px, 44px);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-transform: none;
  max-width: 22ch;
  text-wrap: balance;
  color: var(--text);
}
h3, .k-h3 {
  font-family: var(--k-font-sans);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -.003em;
  text-wrap-style: balance;
  color: var(--text);
}
h4, .k-h4 {
  font-family: var(--k-font-sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  text-wrap-style: balance;
  color: var(--text);
}
/* No single word alone on the last line of running text. Progressive: no
   effect where unsupported. The longhand leaves any nowrap untouched. */
p, li, dd, figcaption, .k-lede { text-wrap-style: pretty; }
/* Running head: the only small uppercase. 13px (nothing on the site is
   smaller), 600, 0.12em tracking. V2.1
   pages label sections with it. The sentence-case .k-eyebrow (alias
   .eyebrow) is kept for pages that have not moved yet: changing it would
   change their rendered text (innerText follows text-transform). */
.k-runhead {
  font-family: var(--k-font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}
.k-eyebrow, .eyebrow {
  font-family: var(--k-font-sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}
.k-lede, .lede, .hero-lede {
  font-family: var(--k-font-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.45;
  letter-spacing: -.003em;
  max-width: 44ch;
  color: var(--text-2);
}
.k-serif, .k-prose-serif {
  font-family: var(--k-font-serif);
  font-size: 18px;
  line-height: 1.6;
}
.k-serif :where(p), .k-prose-serif :where(p) { max-width: 62ch; }
.k-caption, figcaption {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-3);
}
.k-meta { font-size: 15px; color: var(--text-3); }
/* A date or a short unit in a meta line never breaks across two lines. */
.k-meta time, .k-meta .k-nw { white-space: nowrap; }
.k-small { font-size: 15px; line-height: 1.55; }
/* Figures: large tabular numerals in the display face, with a quiet Est tag. */
.k-figure-display {
  font-family: var(--k-font-display);
  font-weight: 560;
  font-size: clamp(36px, 2vw + 24px, 56px);
  line-height: 1;
  letter-spacing: -.015em;
}
.k-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 10px;
  max-width: none;
}
.k-amount > .k-amount-v {
  font-family: var(--k-font-display);
  font-weight: 560;
  font-size: var(--k-amount-size, clamp(36px, 2vw + 24px, 52px));
  line-height: .95;
  letter-spacing: -.015em;
  color: var(--text);
}
.k-amount > .k-tag--est { margin-top: .2em; }
:where(.k-eyebrow, .eyebrow, .k-runhead) + :where(h1, .k-h1, .k-display) { margin-top: 20px; }
:where(.k-eyebrow, .eyebrow, .k-runhead) + :where(h2, .k-h2) { margin-top: 14px; }
:where(h1, .k-h1, .k-display) + :where(p, .k-lede, .lede, .hero-lede) { margin-top: 28px; }
:where(h2, .k-h2) + :where(p) { margin-top: 20px; }
.k-prose > * + * { margin-top: 1em; }
.k-prose > :where(h2) { margin-top: 1.6em; }
.k-prose > :where(h3, h4) { margin-top: 1.8em; }
.k-prose > :where(h3, h4) + * { margin-top: .5em; }
.k-prose :where(ul, ol):not([class]) { padding-left: 1.25em; }
.k-prose :where(li + li) { margin-top: .35em; }

@media (max-width: 599px) {
  body { font-size: 17px; }
  h3, .k-h3 { font-size: 19px; }
  .k-lede, .lede, .hero-lede { font-size: 19px; }
  .k-serif, .k-prose-serif { font-size: 17px; }
  :where(h1, h2, .k-h1, .k-h2, .k-display) + :where(p, .k-lede, .lede, .hero-lede) { margin-top: 18px; }
}

/* ---------------------------------------------------------------------
   5. Layout (V2.1). A 12-column grid, deliberate asymmetry, generous space.
   Borders are the exception: surfaces and space separate sections.
   --------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--k-wrap);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 600px) { .wrap { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .wrap { padding-left: 40px; padding-right: 40px; } }

.k-section { padding-top: var(--k-section-pad); padding-bottom: var(--k-section-pad); }
.k-section--compact { padding-top: var(--k-section-pad-compact); padding-bottom: var(--k-section-pad-compact); }
.k-section--paper { background-color: var(--surface-paper); }
.k-section--stone { background-color: var(--surface-stone); --rule-strong: var(--k-stone-600); }
.k-section--ruled { border-top: 1px solid var(--rule); }
.k-cover { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(56px, 8vw, 112px); }
.k-section-head { max-width: 70ch; margin-bottom: clamp(32px, 4vw, 56px); }
.k-section-head > * + * { margin-top: 14px; }
.k-stack > * + * { margin-top: var(--k-stack, 16px); }

.k-cols {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--k-col-min, 260px)), 1fr));
}
.k-split {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) {
  .k-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .k-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Editorial split on the 12-column grid: .k-ed--7-5, .k-ed--5-7, .k-ed--4-8.
   One column on phones and small tablets; the two children take their
   columns from 960px. The first child leads, so DOM order is reading order. */
.k-ed {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 64px) var(--k-gutter);
  align-items: start;
}
@media (min-width: 960px) {
  .k-ed { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .k-ed--7-5 > :nth-child(1) { grid-column: 1 / span 7; }
  .k-ed--7-5 > :nth-child(2) { grid-column: 8 / span 5; }
  .k-ed--5-7 > :nth-child(1) { grid-column: 1 / span 5; }
  .k-ed--5-7 > :nth-child(2) { grid-column: 6 / span 7; }
  .k-ed--4-8 > :nth-child(1) { grid-column: 1 / span 4; }
  .k-ed--4-8 > :nth-child(2) { grid-column: 5 / span 8; }
  /* Breathing room: the lead column stops a column short of its partner. */
  .k-ed--air.k-ed--7-5 > :nth-child(1) { grid-column: 1 / span 6; }
  .k-ed--air.k-ed--5-7 > :nth-child(2) { grid-column: 7 / span 6; }
  .k-ed--air.k-ed--4-8 > :nth-child(2) { grid-column: 6 / span 7; }
  .k-ed > .k-ed-full { grid-column: 1 / -1; }
}

.k-panel {
  background-color: var(--surface-paper);
  border-radius: var(--k-radius-sheet);
  box-shadow: var(--k-shadow-sheet);
  padding: clamp(20px, 3vw, 40px);
}

/* Action rows: hero and closing calls to action. DOM order is visual order. */
.k-actions, .hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: var(--s-6);
}
@media (max-width: 599px) {
  .k-actions > .btn, .hero-cta > .btn { flex: 1 1 100%; }
}

/* The seven-rule motif: seven thin vertical rules taken from the rhythm of
   the mark (never the mark itself). At most once per page, set at a scale
   that reads as a deliberate device (62 by 44px: 1.5px rules on a 9px
   pitch), never as a small tally. Gold on charcoal; gold-ink on light.
   Decorative: aria-hidden. */
.k-bars {
  display: block;
  width: 62px;
  height: 44px;
  color: var(--signature);
  background-image: repeating-linear-gradient(to right, currentColor 0 1.5px, transparent 1.5px 9px);
  background-size: 62px 100%;
  background-repeat: no-repeat;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.k-bars--wide { width: 100%; height: 14px; background-size: auto; }

/* ---------------------------------------------------------------------
   6. Skip link
   --------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--k-signal);
  color: var(--k-ink-900);
  font-weight: 600;
  font-size: 16px;
  text-decoration: underline;
  border-radius: var(--k-radius);
}
.skip-link:focus { left: 8px; outline: 2px solid var(--k-ink-900); outline-offset: 2px; }

/* ---------------------------------------------------------------------
   7. Lockup (the wordmark and the exact mark; the mark is never restyled)
   --------------------------------------------------------------------- */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--k-on-band);
  text-decoration: none;
  min-height: 44px;
}
.lockup svg { width: 34px; height: 34px; flex: 0 0 34px; }
.lockup .words { display: flex; flex-direction: column; line-height: 1; }
.lockup .t {
  font-family: var(--k-font-numeral);
  font-weight: 700;
  font-size: 25px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--k-on-band);
}
.lockup .s {
  font-family: var(--k-font-numeral);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--spec-accent);
  margin-top: 5px;
}
.lockup:hover .t { color: #FFFFFF; }
@media (max-width: 360px) {
  .k-header .lockup svg { width: 30px; height: 30px; flex-basis: 30px; }
  .k-header .lockup .t { font-size: 22px; }
}

/* ---------------------------------------------------------------------
   8. Header and the three-tier menu (D13). No CSS order anywhere.
   --------------------------------------------------------------------- */
.k-header {
  position: relative;
  z-index: 40;
  border-bottom: 1px solid var(--k-band-rule);
}
.k-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 24px;
  row-gap: 4px;
  min-height: 72px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.k-bar > .lockup { margin-right: auto; }
.k-header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 26px;
  row-gap: 0;
}
.k-header nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 400;
  color: var(--k-on-band-2);
  text-decoration: none;
}
.k-header nav a:not(.btn):hover { color: var(--k-on-band); text-decoration: underline; }
.k-header nav a[aria-current]:not(.btn) {
  color: var(--k-on-band);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .45em;
}
.k-header nav .btn { margin-left: 4px; }

.k-menu {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  background: transparent;
  color: var(--k-on-band);
  border: 1.5px solid var(--k-on-band-2);
  border-radius: var(--k-radius);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}
.k-menu::before {
  content: "";
  width: 16px;
  height: 11px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
}
.k-menu[aria-expanded="true"]::before {
  background:
    linear-gradient(45deg, transparent calc(50% - .75px), currentColor calc(50% - .75px), currentColor calc(50% + .75px), transparent calc(50% + .75px)),
    linear-gradient(-45deg, transparent calc(50% - .75px), currentColor calc(50% - .75px), currentColor calc(50% + .75px), transparent calc(50% + .75px));
  width: 13px;
  height: 13px;
}
.k-menu:hover { background: rgba(233, 236, 238, .08); }

/* Tier 2 and 3: the four links fold behind Menu once k-chrome has run. */
@media (max-width: 900px) {
  .k-menu { display: inline-flex; }
  .k-header[data-menu] nav a:not(.btn) { display: none; }
  .k-header[data-menu="open"] nav {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    margin-top: 8px;
    padding-bottom: 8px;
    border-top: 1px solid var(--k-band-rule);
  }
  .k-header[data-menu="open"] nav a:not(.btn) {
    display: flex;
    min-height: 48px;
    font-size: 17px;
    color: var(--k-on-band);
    border-bottom: 1px solid var(--k-band-rule);
  }
  .k-header[data-menu="open"] nav .btn { margin: 16px 0 4px; align-self: flex-start; }
}
@media (max-width: 480px) {
  .k-header[data-menu="closed"] nav { display: none; }
  .k-header[data-menu="open"] nav .btn { align-self: stretch; width: 100%; }
  .k-bar { column-gap: 12px; min-height: 64px; }
}

/* The reserved parent-brand slot takes space only when it is not hidden. */
.k-header > .k-family-slot:not([hidden]) {
  display: flex;
  align-items: center;
  min-height: 32px;
  background-color: var(--k-colophon);
  border-bottom: 1px solid var(--k-band-rule);
  font-size: 13px;
  color: var(--k-on-band-2);
}
.k-colophon .k-family-slot:not([hidden]) {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--k-on-band-2);
}

/* ---------------------------------------------------------------------
   9. Footer colophon (A3). Every parity page is styled only from here.
   --------------------------------------------------------------------- */
.k-colophon {
  padding: 56px 0 40px;
  font-size: 15px;
  line-height: 1.5;
  border-top: 1px solid var(--k-band-rule);
}
.k-colophon a { color: var(--k-on-band); text-decoration: none; }
.k-colophon a:hover { text-decoration: underline; }
.foot-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px 64px;
}
/* The lockup with the tag line under it (V2.1): one line, outside the
   disclosure, in the serif voice. */
.foot-brand { display: grid; justify-items: start; gap: 8px; }
.foot-tag {
  max-width: 32ch;
  font-family: var(--k-font-serif);
  font-size: 18px;
  line-height: 1.4;
  color: var(--k-on-band-2);
}
.foot-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: 24px 56px;
}
.foot-links a {
  display: block;
  padding: 5px 0;
  font-size: 15px;
  line-height: 1.45;
}
.foot-h {
  font-family: var(--k-font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--k-on-band-2);
  margin-bottom: 6px;
}
.k-colophon .wrap > .foot-h {
  max-width: none;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--k-band-rule);
}
.disclosure {
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
  font-size: 15px;
  line-height: 1.6;
  max-width: 70ch;
  color: var(--k-on-band-2);
}
.k-colophon .copy {
  margin-top: 24px;
  font-size: 14px;
  color: var(--k-on-band-2);
}
/* From 960px the colophon is one composed block on the 12-column grid: the
   lockup and the disclosure on the left (6 columns), the three link groups
   on the right (5 columns), the copyright line beneath. .foot-top becomes
   transparent to the grid so its two children take their own columns. */
@media (min-width: 960px) {
  .k-colophon { padding: 64px 0 40px; }
  .k-colophon .wrap {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--k-gutter);
    align-items: start;
  }
  .k-colophon .foot-top { display: contents; }
  .k-colophon .foot-top > .foot-brand { grid-column: 1 / span 6; grid-row: 1; justify-self: start; }
  .k-colophon .foot-links { grid-column: 7 / -1; grid-row: 1 / span 3; justify-self: end; grid-template-columns: repeat(3, max-content); gap: 24px clamp(32px, 3.4vw, 56px); }
  .k-colophon .wrap > .foot-h { grid-column: 1 / span 6; grid-row: 2; margin-top: 28px; padding-top: 0; border-top: 0; }
  .k-colophon .disclosure { grid-column: 1 / span 6; grid-row: 3; }
  .k-colophon .wrap > :not(.foot-top):not(.foot-h):not(.disclosure) { grid-column: 1 / -1; }
  .k-colophon .copy { max-width: none; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--k-band-rule); }
}
@media (max-width: 759px) {
  .k-colophon { padding: 40px 0 28px; }
  .disclosure { font-size: 14px; line-height: 1.55; }
  .foot-top { gap: 20px; }
  .foot-tag { font-size: 17px; }
  .foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; width: 100%; }
  .k-colophon .wrap > .foot-h { margin-top: 24px; padding-top: 18px; }
}
@media (max-width: 374px) {
  /* The first group's longest link sets its column, so no link in it wraps;
     the second group takes the rest. */
  .foot-links { grid-template-columns: max-content minmax(0, 1fr); column-gap: 12px; }
}

/* ---------------------------------------------------------------------
   10. Buttons. One gold button per viewport; everything else outline or a
   text link. 52px, 16px 600, 2px radius.
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 13px 24px;
  font-family: var(--k-font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  color: var(--action-text);
  background-color: var(--action-fill);
  border: 1px solid var(--action-border);
  border-radius: var(--k-radius);
  cursor: pointer;
  /* A label that wraps (a full-width button on a phone) splits evenly, never
     leaving one word on its second line. */
  text-wrap: balance;
  transition: background-color .18s var(--k-ease), border-color .18s var(--k-ease), color .18s var(--k-ease);
}
.btn:hover { background-color: var(--action-fill-hover); text-decoration: none; }
.btn--outline, .btn.outline, .btn.ghost {
  color: var(--text);
  background-color: transparent;
  border: 1.5px solid var(--outline-ink);
}
.btn--outline:hover, .btn.outline:hover, .btn.ghost:hover { background-color: var(--hover-wash); }
.btn--ink {
  color: var(--k-paper);
  background-color: var(--k-ink-900);
  border-color: var(--k-ink-900);
}
.btn--ink:hover { background-color: var(--k-slate-700); border-color: var(--k-slate-700); }
.btn--text {
  min-height: 44px;
  padding: 4px 2px;
  color: var(--text);
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.btn--text:hover { background: none; text-decoration-thickness: 2px; }
/* Text link with an arrow: the third action in a row, and "read more" links.
   The arrow moves 3px on hover (transform only). */
.k-textlink {
  display: inline-block;
  padding: 10px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--rule-strong);
}
/* A no-break space keeps the arrow on the last word when the label wraps. */
.k-textlink::after { content: "\00a0\2192"; font-weight: 400; }
.k-textlink:hover { text-decoration-color: currentColor; text-decoration-thickness: 1px; }
.btn--sm { min-height: 44px; padding: 8px 16px; font-size: 15px; }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.k-header .btn {
  min-height: 44px;
  padding: 8px 16px;
  font-size: 15px;
  color: var(--k-on-band);
  background-color: transparent;
  border: 1.5px solid var(--k-on-band-2);
}
.k-header .btn:hover { background-color: rgba(233, 236, 238, .08); border-color: var(--k-on-band); }
.k-arrow::after, .btn.k-arrow::after { content: "\2192"; font-weight: 400; }

/* ---------------------------------------------------------------------
   11. Forms (.k-form scope) and field errors
   --------------------------------------------------------------------- */
.k-form { display: grid; gap: 20px; }
.k-field { display: grid; gap: 6px; align-content: start; }
.k-field-row { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.k-form label, .k-label, .k-form legend {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}
.k-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.k-form legend { padding: 0; margin-bottom: 8px; }
.k-hint { font-size: 15px; line-height: 1.45; color: var(--text-3); }
/* :where keeps this base rule at the specificity of .k-form alone, so the
   textarea height, the focus border and the invalid border below apply. */
.k-form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]), select, textarea) {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--k-ink-900);
  background-color: var(--surface-field);
  border: 1px solid var(--field-border);
  border-radius: var(--k-radius);
}
.k-form textarea { min-height: 120px; resize: vertical; }
.k-form select {
  appearance: none;
  padding-right: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--k-ink-900) 50%),
    linear-gradient(135deg, var(--k-ink-900) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.k-form :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--k-ink-900);
  outline-offset: 2px;
  border-color: var(--k-ink-900);
}
.k-form :is(input, select, textarea)::placeholder { color: var(--k-slate-600); opacity: 1; }
.k-form [aria-invalid="true"] { border: 2px solid var(--status-risk); }
.k-form input[type="checkbox"], .k-form input[type="radio"] {
  width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 20px;
  accent-color: var(--k-ink-900);
}
.k-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  font-weight: 400 !important;
  cursor: pointer;
}
.k-field-error {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 15px;
  font-weight: 600;
  color: var(--status-risk);
}
.k-field-error::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--status-risk);
  color: var(--k-paper);
  font-size: 13px;
  line-height: 1;
  transform: translateY(2px);
}
.k-field-error:empty { display: none; }
.k-error-summary {
  padding: 14px 16px;
  border: 1px solid var(--status-risk);
  border-left: 4px solid var(--status-risk);
  background: var(--status-risk-tint);
  color: var(--k-ink-900);
  font-size: 16px;
}
.k-form-note { font-size: 15px; line-height: 1.5; color: var(--text-2); }
/* An enquiry form on a light page (V2.1): a paper panel without the sheet
   shadow (the shadow is kept for documents), edge to edge on phones. */
.k-form.k-panel { padding: clamp(22px, 3.2vw, 44px); box-shadow: none; }
.k-form-note a { color: var(--text); font-weight: 600; }
/* The send row: the button, then the status line the form script writes. */
.k-form-send { display: grid; gap: 14px; justify-items: start; }
/* The status line (p[role="status"] in a form panel). Empty, it takes no
   space but stays rendered, so the live region is announced when filled. */
.k-form.k-panel [role="status"] {
  max-width: none;
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--surface-paper);
  border: 1px solid var(--k-stone-500);
  border-left-width: 4px;
}
.k-form.k-panel [role="status"]:empty { padding: 0; border: 0; background: none; }
.k-form.k-panel [role="status"].is-error { border-color: var(--status-risk); background-color: var(--status-risk-tint); }
.k-form.k-panel [role="status"].is-ok { border-color: var(--status-good); background-color: var(--status-good-tint); }
.k-form.k-panel [role="status"] a { color: var(--text); font-weight: 600; }
@media (max-width: 599px) {
  .k-form.k-panel { margin: 0 -16px; padding: 26px 16px 28px; border-radius: 0; }
  .k-form.k-panel, .k-form.k-panel .k-field-row { gap: 16px; }
  .k-form-send { justify-items: stretch; }
  .k-form-send .btn { width: 100%; }
}
.k-honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------------
   12. Tags (D8). Sentence case, 13px, 22px high, shape before colour.
   --------------------------------------------------------------------- */
.k-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 7px;
  font-family: var(--k-font-sans);
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: baseline;
  color: var(--k-ink-900);
  background-color: transparent;
  border: 1px solid currentColor;
  border-radius: var(--k-radius);
}
abbr.k-tag { cursor: help; text-decoration: none; }
/* Est: quiet. A tinted tab in slate, no border, beside the figure it qualifies. */
.k-tag--est { color: var(--k-slate-700); background-color: var(--k-est-tint); border-color: transparent; padding: 1px 6px; }
/* Est inside running text (opt-in): the tab drops to the line's own rhythm,
   so a sentence with two estimates still reads as one. Glue it to its figure
   with a no-break space so it never starts a line on its own. */
.k-tag--est.k-tag--inline { display: inline; min-height: 0; padding: 0 5px; font-weight: 500; line-height: 1.45; vertical-align: 1px; }
/* Example tag (.k-tag--illustrative): a quiet outline label. Ink text, a
   stone-600 hairline (3:1), no fill. Since 2 October 2026 its words are a
   short identifier ("Example"), never "illustrative example" or "not a
   client result" (claims register row 12). */
.k-tag--illustrative { color: var(--text); background-color: transparent; border-color: var(--tag-line); white-space: normal; text-wrap: balance; max-width: 100%; }
.k-tag--client { color: var(--k-paper); background-color: var(--k-ink-900); border-color: var(--k-ink-900); }
/* Scaffolding only (working records, never on a released customer page). */
.k-tag--pending { color: var(--k-editor); background-color: var(--k-editor-tint); border: 1.5px dashed var(--k-editor); }
.k-tag--draft { color: var(--k-paper); background-color: var(--k-editor); border-color: var(--k-editor); }
.k-stamp {
  display: inline-block;
  padding: 8px 14px;
  border: 3px double var(--k-ink-900);
  color: var(--k-ink-900);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  max-width: 22ch;
  text-align: center;
}

/* ---------------------------------------------------------------------
   13. Content-type treatments (D8)
   --------------------------------------------------------------------- */
/* Illustrative: a 6px 45 degree hatched edge. */
.k-illustrative { position: relative; }
.k-illustrative::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 6px;
  background-image: var(--k-hatch);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  pointer-events: none;
}
.k-card {
  display: block;
  background-color: var(--surface-paper);
  border-radius: var(--k-radius-sheet);
  box-shadow: var(--k-shadow-sheet);
  padding: 22px 24px 22px 26px;
  color: var(--text);
  text-decoration: none;
}
.k-card.k-illustrative { padding-left: 30px; }
a.k-card { transition: transform .2s var(--k-ease), box-shadow .2s var(--k-ease); }
a.k-card:hover, a.k-card:focus-visible { transform: translateY(-2px); box-shadow: var(--k-shadow-lift); }
a.k-card:hover :where(h3, .k-card-title) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.k-card > * + * { margin-top: 8px; }

/* Anonymised client example: a solid 4px ink rule and a defined record. */
.k-client-example {
  background-color: var(--surface-paper);
  border-left: 4px solid var(--k-ink-900);
  padding: 20px 24px;
}
.k-client-example > * + * { margin-top: 12px; }
.k-defs { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--k-ink-900); }
.k-defs > div { padding: 10px 0; border-bottom: 1px solid var(--k-stone-300); }
.k-defs dt { font-size: 15px; font-weight: 600; color: var(--text-2); }
.k-defs dd { margin-top: 2px; }
@container (min-width: 520px) {
  .k-defs > div { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 16px; }
  .k-defs dd { margin-top: 0; }
}
.k-attribution { font-size: 15px; color: var(--text-2); }

/* Evidence pending: dashed editor blue on its own tint, never on paper. */
.k-pending {
  border: 1.5px dashed var(--k-editor);
  background-color: var(--k-editor-tint);
  color: var(--k-ink-900);
  padding: 16px 18px;
  border-radius: var(--k-radius);
}
.k-pending > * + * { margin-top: 10px; }
.k-pending dl { container-type: inline-size; display: grid; gap: 8px; font-size: 15px; line-height: 1.45; }
.k-pending dt { font-weight: 600; color: var(--k-editor); }
.k-pending dd { margin: 0; }
.k-pending dl > div { display: grid; gap: 2px; }
@container (min-width: 520px) {
  .k-pending dl > div { grid-template-columns: 15rem minmax(0, 1fr); gap: 12px; }
}
.k-draft-note { font-size: 15px; color: var(--k-editor); font-weight: 600; }

/* Evidence pending as a compact list: one dashed row per gap. Each row is a
   <details class="k-pending k-pending--row" data-evidence="pending"> whose
   summary holds .k-pending-t, a one-line .k-pending-needs and an owner pill,
   and whose body is the usual three-line dl. */
.k-pending-list { container-type: inline-size; display: grid; gap: 6px; }
.k-pending--row { padding: 0; }
.k-pending--row > summary {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  grid-template-areas: "mark t owner" ". needs needs";
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
  min-height: 44px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}
.k-pending--row > summary::-webkit-details-marker { display: none; }
.k-pending--row > summary::before {
  content: "+";
  grid-area: mark;
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border: 1px solid var(--k-editor);
  margin-top: 1px;
  border-radius: var(--k-radius);
  color: var(--k-editor);
  font-size: 16px;
  line-height: 1;
}
.k-pending--row[open] > summary::before { content: "\2212"; }
.k-pending--row > summary:hover .k-pending-t { text-decoration: underline; text-underline-offset: .2em; }
.k-pending-t { grid-area: t; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--k-ink-900); }
.k-pending-needs { grid-area: needs; font-size: 15px; line-height: 1.4; color: var(--k-slate-700); }
.k-pending--row > summary > .k-owner { grid-area: owner; justify-self: end; margin-top: -1px; }
.k-pending--row > dl { margin: 0; padding: 4px 14px 14px 46px; }
/* A wide list puts the item, its need and its owner on one line. */
@container (min-width: 640px) {
  .k-pending--row > summary {
    grid-template-columns: 20px minmax(12rem, 19rem) minmax(0, 1fr) auto;
    grid-template-areas: "mark t needs owner";
    column-gap: 16px;
  }
}

/* ---------------------------------------------------------------------
   14. Status chips (glyph plus word), owner pills, provenance chips
   --------------------------------------------------------------------- */
/* Status is restrained: a small glyph in the status colour and a word in
   ink. No box. Add .k-status--box only where a result needs emphasis. */
.k-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--text);
  background-color: transparent;
  border: 0;
  border-radius: var(--k-radius);
  --k-status-c: var(--text-2);
}
.k-status > [aria-hidden="true"] { font-size: 12px; line-height: 1; color: var(--k-status-c); }
.k-status, .k-owner { max-width: 100%; }
.k-table :is(.k-status, .k-owner) { white-space: normal; }
.k-status--risk { --k-status-c: var(--status-risk); }
.k-status--attention { --k-status-c: var(--status-attention); }
.k-status--good { --k-status-c: var(--status-good); }
.k-status--verify { --k-status-c: var(--text); }
.k-status--context { color: var(--text-2); }
.k-status--info { --k-status-c: var(--text); }
/* Emphasised: the tinted box, word and glyph in the status colour. */
.k-status--box { padding: 2px 9px; border: 1px solid currentColor; font-size: 14px; }
.k-status--box.k-status--risk { color: var(--status-risk); background-color: var(--status-risk-tint); }
.k-status--box.k-status--attention { color: var(--status-attention); background-color: var(--status-attention-tint); }
.k-status--box.k-status--good { color: var(--status-good); background-color: var(--status-good-tint); }
.k-status--box.k-status--verify, .k-status--box.k-status--info { color: var(--text); }
.k-status--box.k-status--context { border-color: var(--rule-strong); }

.k-owner {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 11px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--k-ink-900);
  background-color: transparent;
  border: 1px solid var(--k-ink-900);
  /* Half the one-line height: a capsule on one line, a rounded rectangle
     (never a stretched capsule) when the words wrap. */
  border-radius: 12px;
}
.k-owner--kingsway { color: var(--k-on-band); background-color: var(--k-band); border-color: var(--k-band); }
.k-owner--adviser { border-style: dotted; border-width: 1.5px; }

.k-prov {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 7px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text-2);
  border: 1px solid var(--k-stone-500);
  border-radius: var(--k-radius);
}

/* Name card: for approved people only. No avatar, initials or silhouette. */
.k-namecard { border-top: 2px solid var(--k-ink-900); padding-top: 12px; }
.k-namecard .k-name { font-size: 21px; font-weight: 600; line-height: 1.3; }
.k-namecard .k-role { font-size: 15px; color: var(--text-2); }

/* ---------------------------------------------------------------------
   15. Questions and sources (.k-endnotes), link index, tools, stepper
   --------------------------------------------------------------------- */
/* Page contents ("On this page"), usually on a cover band. Navigation, so the
   numerals are text-2, never gold. One column in a narrow column or on a
   phone; two columns (down, then across) wherever two 16rem columns fit. */
.k-toc { border-top: 1px solid var(--rule-strong); padding-top: 14px; }
.k-toc-h { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text-2); }
.k-toc-list { margin-top: 6px; counter-reset: k-toc; columns: 2 16rem; column-gap: 24px; }
.k-toc-list > li { counter-increment: k-toc; border-bottom: 1px solid var(--rule); break-inside: avoid; }
.k-toc a {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center;
  min-height: 44px; padding: 6px 0; font-size: 16px; font-weight: 600; line-height: 1.35; text-decoration: none;
}
.k-toc a::before { content: counter(k-toc); font-family: var(--k-font-numeral); font-weight: 600; font-size: 18px; line-height: 1; color: var(--text-2); }
.k-toc a:hover > span { text-decoration: underline; text-underline-offset: .2em; }

.k-endnotes {
  display: grid;
  gap: 32px 56px;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 28px;
  border-top: 1px solid var(--rule-ink);
  font-size: 15px;
  line-height: 1.55;
}
@media (min-width: 900px) { .k-endnotes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.k-endnotes h2, .k-endnotes .k-endnotes-h {
  font-family: var(--k-font-display);
  font-weight: 520;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -.005em;
  max-width: none;
  margin-bottom: 12px;
}
.k-questions li { border-bottom: 1px solid var(--rule); }
.k-questions li:first-child { border-top: 1px solid var(--rule); }
.k-questions a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  min-height: 44px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}
.k-questions a::after { content: "\2192"; font-weight: 400; color: var(--text-2); transition: transform .2s var(--k-ease); }
.k-questions a:hover::after { transform: translateX(3px); }
.k-questions a:hover { text-decoration: underline; }
.k-sources { counter-reset: k-src; }
.k-sources li { counter-increment: k-src; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px; padding: 6px 0; }
.k-sources li::before { content: counter(k-src) "."; font-weight: 600; color: var(--text-2); }

.k-linklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); column-gap: 32px; border-top: 1px solid var(--k-ink-900); }
.k-linklist li { border-bottom: 1px solid var(--k-stone-300); }
.k-linklist a { display: block; padding: 14px 0; text-decoration: none; min-height: 44px; }
.k-linklist a > :first-child, .k-linklist .k-link-t { display: block; font-weight: 600; font-size: 17px; }
.k-linklist a:hover .k-link-t, .k-linklist a:hover > :first-child { text-decoration: underline; }
.k-linklist .sub, .k-linklist .k-link-sub { display: block; font-size: 15px; color: var(--text-3); margin-top: 2px; }

/* Copy-link and print controls. Authored with the hidden attribute; k-chrome reveals them. */
.k-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.k-toolbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  background-color: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--k-radius);
}
.k-toolbtn:hover { border-color: var(--text); background-color: var(--hover-wash); }
.k-copy-status { font-size: 15px; color: var(--text-2); }
.k-copy-status:not(:empty)::before { content: "\2713\00a0"; color: var(--status-good); font-weight: 600; }
.k-copy-fallback {
  width: 100%;
  max-width: 36rem;
  min-height: 44px;
  padding: 8px 12px;
  font-size: 15px;
  color: var(--k-ink-900);
  background-color: var(--k-field);
  border: 1px solid var(--k-stone-600);
  border-radius: var(--k-radius);
}

/* Introduction-status stepper. aria-current="step" marks where things stand. */
.k-stepper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  counter-reset: k-step;
}
.k-stepper > li {
  counter-increment: k-step;
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  font-size: 16px;
  line-height: 1.35;
  color: var(--text-2);
}
.k-stepper > li::before {
  content: counter(k-step);
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border: 1.5px solid var(--k-stone-500);
  border-radius: 50%;
  font-family: var(--k-font-numeral);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-2);
  background: var(--surface-paper);
}
.k-stepper > li[aria-current="step"] { color: var(--text); font-weight: 600; }
.k-stepper > li[aria-current="step"]::before { background: var(--k-ink-900); border-color: var(--k-ink-900); color: var(--k-paper); }
.k-stepper > li.is-done::before { content: "\2713"; border-color: var(--k-ink-900); color: var(--k-ink-900); }
@media (min-width: 720px) {
  .k-stepper { grid-template-columns: repeat(var(--k-steps, 3), minmax(0, 1fr)); }
  .k-stepper > li { grid-template-columns: minmax(0, 1fr); padding: 0 16px 0 0; gap: 8px; }
  .k-stepper > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 13px; left: 36px; right: 8px;
    height: 0;
    border-top: 1.5px solid var(--k-stone-500);
  }
}

/* ---------------------------------------------------------------------
   15b. Disclosures and phone folds (V2.2). Moved out of the homepage,
   /review and /first-meeting, which each carried their own copy.
   --------------------------------------------------------------------- */
/* Disclosure: supporting detail behind one summary line. The title sits on
   the left and a 24px circle toggle (+, then minus) on the right, after any
   other content in the summary. Pages set the title's type where it differs
   from the 16px default. */
.k-disc > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 0;
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}
.k-disc > summary::-webkit-details-marker { display: none; }
.k-disc > summary::after {
  content: "+";
  flex: 0 0 24px;
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  margin-left: auto;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  font-family: var(--k-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--text-2);
}
.k-disc[open] > summary::after { content: "\2212"; }
.k-disc > summary:hover::after { border-color: currentColor; color: var(--text); }
/* Phone fold (with .k-disc): detail that folds only below 760px. From 760px,
   and in print, it is open and its summary is hidden. The page script closes
   it on a phone (details[data-fold]); without the script it stays open. */
@media print, (min-width: 760px) {
  .k-fold > summary { display: none; }
}
/* The heading a phone fold stands in for: on a phone the fold's summary names
   the section, so the heading is kept for assistive technology only. Each
   declaration is !important because page CSS is unlayered and would
   otherwise win (a heading's own margin would still take space). */
@media screen and (max-width: 759px) {
  .k-fold-h {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

/* ---------------------------------------------------------------------
   16. Document system (D7, C4)
   --------------------------------------------------------------------- */
.k-doc {
  position: relative;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(24px, 5vw, 64px);
  background-color: var(--surface-paper);
  color: var(--text);
  border-radius: var(--k-radius-sheet);
  box-shadow: var(--k-shadow-sheet);
}
.k-doc.k-illustrative { padding-left: calc(clamp(24px, 5vw, 64px) + 6px); }
.k-doc-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--k-ink-900);
  font-size: 15px;
  color: var(--text-2);
}
.k-doc-head .k-doc-label {
  font-family: var(--k-font-display);
  font-weight: 560;
  font-size: 19px;
  line-height: 1.2;
  color: var(--text);
}
.k-doc-cover { display: grid; gap: 28px; padding-top: 32px; }
.k-doc-cover-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 20px; }
.k-doc-title {
  font-family: var(--k-font-display);
  font-weight: 540;
  font-size: clamp(40px, 3vw + 20px, 60px);
  line-height: 1.02;
  letter-spacing: -.015em;
  max-width: none;
}
.k-doc-subtitle { font-weight: 600; font-size: clamp(18px, 1vw + 14px, 21px); line-height: 1.35; margin-top: 8px; }
.k-doc-meta { container-type: inline-size; display: grid; border-top: 1px solid var(--k-ink-900); }
.k-doc-meta > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--k-stone-300); }
.k-doc-meta dt { font-size: 15px; font-weight: 600; color: var(--text-2); }
.k-doc-meta dd { margin: 0; font-size: 16px; line-height: 1.5; }
@container (min-width: 520px) { .k-doc-meta > div { grid-template-columns: 11rem minmax(0, 1fr); gap: 16px; } }

.k-glance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--k-ink-900);
  border-bottom: 1px solid var(--k-ink-900);
}
@media (min-width: 720px) { .k-glance { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.k-glance > div { padding: 14px 16px 16px 0; border-bottom: 1px solid var(--k-stone-300); }
@media (min-width: 720px) {
  .k-glance > div { border-bottom: 0; }
  .k-glance > div + div { padding-left: 16px; border-left: 1px solid var(--k-stone-300); }
}
.k-glance dt, .k-glance .k-glance-k { font-size: 14px; font-weight: 600; color: var(--text-2); line-height: 1.35; }
.k-glance dd, .k-glance .k-glance-v {
  margin: 6px 0 0;
  font-family: var(--k-font-display);
  font-weight: 560;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.k-glance .k-glance-v--text { font-family: var(--k-font-sans); font-size: 16px; line-height: 1.4; font-weight: 600; }

/* Numbered section: 2px ink rule, gold-ink numeral, h3, an "In short" line. */
.k-sec {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 12px;
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: 20px;
  border-top: 2px solid var(--k-ink-900);
}
.k-sec > * { grid-column: 2; min-width: 0; }
.k-sec > .k-sec-n {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--k-font-numeral);
  font-weight: 700;
  font-size: 34px;
  line-height: .95;
  color: var(--signature);
}
.k-sec h3, .k-sec .k-sec-h { font-size: 22px; line-height: 1.25; }
.k-inshort { font-weight: 600; font-size: 17px; line-height: 1.45; max-width: 60ch; }
.k-inshort-label { color: var(--text-2); }
@media (min-width: 720px) {
  .k-sec { grid-template-columns: 48px minmax(0, 1fr); column-gap: 24px; }
  .k-sec > .k-sec-n { font-size: 40px; }
}

/* A block with an optional margin note: note first in the DOM, so it sits
   above the block on narrow screens and in the margin column on wide ones. */
.k-blk { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
  .k-doc .k-blk { grid-template-columns: minmax(0, 36rem) 15rem; column-gap: 32px; align-items: start; }
  .k-doc .k-blk > .k-note, .k-doc .k-blk > .k-aside { grid-column: 2; grid-row: 1; }
  .k-doc .k-blk > :not(.k-note):not(.k-aside) { grid-column: 1; grid-row: 1; }
}
.k-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  border-left: 1px solid var(--k-stone-500);
  padding-left: 12px;
}
.k-note > * + * { margin-top: 6px; }
.k-note-label { display: block; font-weight: 600; color: var(--text-2); }
.k-note--method .k-note-label { color: var(--signature); }
.k-aside { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }

/* Show the working: closed on screen, open in print. */
details.k-working { border-top: 1px solid var(--k-stone-300); margin-top: 6px; }
.k-working > summary, .k-details > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.k-working > summary::-webkit-details-marker, .k-details > summary::-webkit-details-marker { display: none; }
.k-working > summary::before, .k-details > summary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px; height: 20px;
  border: 1px solid currentColor;
  border-radius: var(--k-radius);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}
.k-working[open] > summary::before, .k-details[open] > summary::before { content: "\2212"; }
.k-working-body { padding: 2px 0 14px 30px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.k-working-body > * + * { margin-top: 6px; }
.k-formula { font-variant-numeric: lining-nums tabular-nums; color: var(--text); }
.k-key { font-family: var(--k-font-mono); font-size: 14px; color: var(--text); background: var(--k-est-tint); padding: 0 4px; border-radius: var(--k-radius); }
details.k-details { border-top: 1px solid var(--k-stone-300); border-bottom: 1px solid var(--k-stone-300); }
.k-details > summary { font-size: 16px; }
.k-details-body { padding: 4px 0 20px; }

/* Tables: real tables, captions, th scope; stacked rows below 600px. */
/* Table rules read the scope tokens, so a table on a charcoal band keeps
   its header rule (on-band-2) and hairlines (band rule). */
.k-table-wrap { overflow-x: auto; }
/* The scroll box clips anything drawn outside it, so rings go inside. */
.k-table-wrap :focus-visible { outline-offset: -2px; }
.k-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
}
.k-table caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 10px;
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
}
.k-table th, .k-table td {
  padding: 10px 14px 10px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.k-table :is(th, td):last-child { padding-right: 0; }
.k-table thead th {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
  vertical-align: bottom;
  border-bottom: 1.5px solid var(--rule-ink);
}
.k-table tbody th { font-weight: 600; }
.k-table .num, .k-table [data-num] { text-align: right; white-space: nowrap; }
.k-table tr.k-group > * {
  padding-top: 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--rule-ink);
}
.k-table tfoot :is(th, td) { border-top: 1.5px solid var(--rule-ink); border-bottom: 0; font-weight: 600; }
.k-table .k-working { margin-top: 4px; }
@media (max-width: 599px) {
  .k-table:not(.k-table--keep) { font-size: 15px; }
  .k-table:not(.k-table--keep) thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  .k-table:not(.k-table--keep) :is(tbody, tfoot, tr) { display: block; }
  .k-table:not(.k-table--keep) tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .k-table:not(.k-table--keep) tr.k-group { padding: 18px 0 6px; border-bottom: 1px solid var(--rule-ink); }
  .k-table:not(.k-table--keep) :is(th, td) {
    display: block;
    position: relative;
    padding: 3px 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }
  .k-table:not(.k-table--keep) :is(th, td)[data-label] { padding-left: calc(36% + 12px); min-height: 1.6em; }
  .k-table:not(.k-table--keep) tr.k-group > * { padding: 0; }
  .k-table:not(.k-table--keep) :is(th, td)[data-label]::before {
    content: attr(data-label);
    position: absolute;
    left: 0; top: 4px;
    width: 36%;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-2);
  }
  .k-table:not(.k-table--keep) tfoot :is(th, td) { border-top: 0; }
  .k-table:not(.k-table--keep) tfoot tr { border-top: 1.5px solid var(--rule-ink); border-bottom: 0; }
}

/* Ledger: a table with a Type column and a count line. */
.k-ledger-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding-top: 12px;
  font-size: 15px;
  color: var(--text-2);
}
.k-ledger-count strong { font-family: var(--k-font-display); font-weight: 560; font-size: 24px; color: var(--text); }

/* Boundaries, disclosure box, sign-off. */
.k-boundaries { border: 3px double var(--k-ink-900); padding: 16px 20px; font-size: 16px; line-height: 1.55; }
.k-boundaries > * + * { margin-top: 8px; }
.k-boundaries-h { font-weight: 600; }
.k-disclosure-box, .honest {
  border: 1px solid var(--signature);
  padding: clamp(18px, 2.5vw, 24px);
}
.k-disclosure-box > * + *, .honest > * + * { margin-top: 10px; }
.k-disclosure-box-h { font-weight: 600; }
.k-signoff {
  position: relative;
  display: grid;
  gap: 20px;
  /* Three columns once the block is 560px wide, one column below it: never
     a 2 + 1 layout that leaves the watermark in an empty cell. */
  grid-template-columns: repeat(auto-fill, minmax(clamp(25.1%, (560px - 100%) * 999, 100%), 1fr));
  padding-top: 28px;
}
.k-signoff > div { border-bottom: 1px solid var(--k-ink-900); min-height: 64px; display: flex; align-items: flex-start; }
.k-signoff > div > span { font-size: 15px; font-weight: 600; color: var(--text-2); }
.k-signoff[data-watermark]::after {
  content: attr(data-watermark);
  position: absolute;
  left: 0; right: 0; top: 66%;
  text-align: center;
  font-family: var(--k-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2vw + 12px, 30px);
  color: var(--k-slate-600);
  transform: translateY(-50%) rotate(-3deg);
  pointer-events: none;
}

/* Position scale: Stay, Fix, Explore, Move. The active one is solid ink.
   Works with literal spans plus data-position, or with aria-current. */
.k-scale, .kmap-legend { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.k-scale > *, .kmap-legend > span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 11px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--k-ink-900);
  background-color: transparent;
  border: 1px solid var(--k-ink-900);
  border-radius: var(--k-radius);
}
.k-scale > [aria-current], .k-scale > .is-active,
:is(.k-scale, .kmap-legend)[data-position="stay"] > :nth-child(1),
:is(.k-scale, .kmap-legend)[data-position="fix"] > :nth-child(2),
:is(.k-scale, .kmap-legend)[data-position="explore"] > :nth-child(3),
:is(.k-scale, .kmap-legend)[data-position="move"] > :nth-child(4) {
  color: var(--k-paper);
  background-color: var(--k-ink-900);
}
/* Narrow screens: tighter chips, so the four steps read as one scale on one row. */
@media (max-width: 400px) {
  .k-scale > *, .kmap-legend > span { padding: 2px 7px; }
}
/* Track variant: four stations on a hairline; the active one a filled ink
   node with its word in ink 600. Same literal markup (four spans plus
   data-position or aria-current on the parent's child). */
.k-scale--track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  max-width: 28rem;
}
.k-scale--track::before {
  content: "";
  position: absolute;
  left: 12.5%; right: 12.5%;
  top: 8px;
  height: 1px;
  background-color: var(--k-stone-600);
}
.k-scale.k-scale--track > *, .kmap-legend.k-scale--track > span {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-2);
  background: none;
  border: 0;
}
.k-scale--track > *::before {
  content: "";
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--k-stone-600);
  background-color: var(--surface-paper);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.k-scale--track > [aria-current], .k-scale--track > .is-active,
.k-scale--track[data-position="stay"] > :nth-child(1),
.k-scale--track[data-position="fix"] > :nth-child(2),
.k-scale--track[data-position="explore"] > :nth-child(3),
.k-scale--track[data-position="move"] > :nth-child(4) {
  color: var(--k-ink-900);
  background: none;
  font-weight: 600;
}
.k-scale--track > [aria-current]::before, .k-scale--track > .is-active::before,
.k-scale--track[data-position="stay"] > :nth-child(1)::before,
.k-scale--track[data-position="fix"] > :nth-child(2)::before,
.k-scale--track[data-position="explore"] > :nth-child(3)::before,
.k-scale--track[data-position="move"] > :nth-child(4)::before {
  background-color: var(--k-ink-900);
  border-color: var(--k-ink-900);
  box-shadow: 0 0 0 3px var(--surface-paper), 0 0 0 4px var(--k-ink-900);
}
/* Rule variant (V2.1): a typeset scale, not a control. One hairline runs
   over the four words, spaced evenly across it; the active word is set
   larger in the display face, in ink, under a 3px ink bar on the hairline.
   Nothing looks clickable.
   Same literal markup (four spans plus data-position or aria-current).
   --k-scale-active sets the active size (default 24px). */
.k-scale--rule {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 12px;
  width: 100%;
  border-top: 1px solid var(--rule-strong);
}
.k-scale.k-scale--rule > *, .kmap-legend.k-scale--rule > span {
  position: relative;
  display: block;
  min-height: 0;
  padding: 12px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text-3);
  background: none;
  border: 0;
  border-radius: 0;
}
.k-scale--rule > [aria-current], .k-scale--rule > .is-active,
.k-scale--rule[data-position="stay"] > :nth-child(1),
.k-scale--rule[data-position="fix"] > :nth-child(2),
.k-scale--rule[data-position="explore"] > :nth-child(3),
.k-scale--rule[data-position="move"] > :nth-child(4) {
  font-family: var(--k-font-display);
  font-size: var(--k-scale-active, 24px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  background: none;
}
.k-scale--rule > [aria-current]::after, .k-scale--rule > .is-active::after,
.k-scale--rule[data-position="stay"] > :nth-child(1)::after,
.k-scale--rule[data-position="fix"] > :nth-child(2)::after,
.k-scale--rule[data-position="explore"] > :nth-child(3)::after,
.k-scale--rule[data-position="move"] > :nth-child(4)::after {
  content: "";
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 3px;
  background-color: var(--k-ink-900);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Document preview (.k-preview): the imagery of the site. A paper sheet
   with a document running head (a serif title line over a dateline, on an
   ink rule), a soft layered shadow and a 4px radius. One style everywhere.
   On a charcoal band it switches back to the light scope. Example
   previews add .k-illustrative (the 6px hatched edge) and carry one quiet
   identifier in the running head ("XYZ Agency · Example review", or
   "Example" on a generic preview; V2.3). The sheet shadow is kept
   for documents: cards, forms and panels elsewhere do not use it, so the
   previews read as the site's imagery. A preview that is a link lifts 3px
   on hover and focus (transform and shadow only).
   .k-preview--backed (an offset stone block) is deprecated: the homepage
   stages its preview on a stone column instead. */
.k-preview {
  position: relative;
  display: block;
  background-color: var(--surface-paper);
  color: var(--text);
  border-radius: var(--k-radius-sheet);
  box-shadow: var(--k-shadow-sheet);
  text-decoration: none;
}
.k-band .k-preview { box-shadow: var(--k-shadow-band); }
.k-preview--backed {
  margin-right: 18px;
  margin-bottom: 18px;
  box-shadow: var(--k-shadow-sheet), 18px 18px 0 0 var(--k-stone);
}
.k-section--stone .k-preview--backed, .k-stone .k-preview--backed { box-shadow: var(--k-shadow-sheet), 18px 18px 0 0 var(--k-paper); }
a.k-preview { transition: transform .22s var(--k-ease), box-shadow .22s var(--k-ease); }
a.k-preview:hover, a.k-preview:focus-visible { transform: translateY(-3px); box-shadow: var(--k-shadow-lift); }
a.k-preview:focus-visible { outline-offset: 4px; }
.k-preview.k-illustrative::before { border-radius: var(--k-radius-sheet) 0 0 var(--k-radius-sheet); }
/* The running head reads as a document's: the title line in the display
   face, the dateline under it in Plex Sans, sentence case, on an ink rule
   (as .k-doc-head). */
.k-preview-head {
  max-width: none;
  display: grid;
  justify-items: start;
  gap: 1px;
  padding: 14px clamp(18px, 2vw, 26px) 11px;
  border-bottom: 1px solid var(--rule-ink);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}
.k-preview-head > :first-child {
  font-family: var(--k-font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}
.k-preview-body { padding: 20px clamp(18px, 2vw, 26px) 24px; }
.k-preview-body > * + * { margin-top: 16px; }
.k-preview-title {
  font-family: var(--k-font-display);
  font-weight: 540;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -.01em;
  max-width: none;
}
/* Rows of a preview: a quiet label above a serif answer, on hairlines. */
.k-preview-rows { display: grid; margin-top: 18px; }
.k-preview-rows > div { display: grid; align-content: start; gap: 8px; padding: 16px 0; border-top: 1px solid var(--rule); }
.k-preview-rows > div:last-child { padding-bottom: 4px; }
.k-preview-rows dt { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--text-2); }
.k-preview-rows dd { margin: 0; font-family: var(--k-font-serif); font-size: 18px; line-height: 1.42; color: var(--text); }
.k-preview :where(p) { max-width: none; }
.k-preview-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 16px;
  padding: 0 clamp(18px, 2vw, 26px) 18px;
}
/* A tag in a preview's foot is a plain line beside the link (no page uses
   one since V2.3: the identifier sits in the running head). */
.k-preview-foot .k-tag--illustrative {
  min-height: 0;
  padding: 0;
  border: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-2);
  white-space: normal;
}
@media (prefers-reduced-motion: reduce) {
  a.k-preview:hover, a.k-preview:focus-visible, a.k-card:hover, a.k-card:focus-visible { transform: none; }
}

/* ---------------------------------------------------------------------
   17. Diagram primitives (D9). Lines are drawn with exact dash patterns,
   so the stroke table survives both screen and print.
   --------------------------------------------------------------------- */
.k-figure { margin: 0; display: grid; gap: 14px; }
.k-figure > figcaption, .k-figcaption { font-size: 15px; line-height: 1.5; color: var(--text-2); max-width: 70ch; }
.k-fig-n { font-weight: 600; color: var(--signature); font-variant-numeric: lining-nums; }
.k-fig-title { font-weight: 600; color: var(--text); }
.k-basis { font-size: 14px; color: var(--text-2); }
.k-basis > b, .k-basis > strong { color: var(--text); }
.k-figure-frame {
  background-color: var(--surface-paper);
  border-radius: var(--k-radius-sheet);
  padding: clamp(16px, 3vw, 32px);
}

.k-node {
  display: block;
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--k-ink-900);
  background-color: var(--surface-paper);
  border: 1.5px solid var(--k-ink-900);
}
.k-node-t { display: block; font-weight: 600; }
.k-node-sub, .k-node small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.k-node--check { border: 1.5px dotted var(--k-slate-600); }
.k-node--muted { border-color: var(--k-stone-500); color: var(--text-2); }

/* Lockup tile: keeps the exact mark on charcoal on a light page and in print. */
.k-lockup-tile {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.k-lockup-tile svg { width: 30px; height: 30px; flex: 0 0 30px; }
.k-tile-name {
  font-family: var(--k-font-numeral);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--k-on-band);
}
.k-tile-caption { display: block; margin-top: 4px; font-size: 14px; line-height: 1.35; color: var(--k-on-band-2); }

/* Line swatches and CSS connectors. One meaning per stroke. */
.k-line, .k-swatch {
  --k-c: var(--k-ink-900);
  --k-w: 2px;
  --k-dash: var(--k-c) 0 100%;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.k-swatch {
  display: inline-block;
  width: 36px;
  height: var(--k-w);
  vertical-align: middle;
  background-image: repeating-linear-gradient(to right, var(--k-dash));
}
.k-swatch { position: relative; }
.k-swatch.k-line--paid::after, .k-swatch.k-line--maypay::after, .k-swatch.k-line--income::after, .k-swatch.k-line--recovery::after {
  content: "";
  position: absolute;
  right: 1px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -4px;
  border-top: 2px solid var(--k-c);
  border-right: 2px solid var(--k-c);
  transform: rotate(45deg);
}
.k-line--axis { --k-c: var(--k-stone-500); --k-w: 1px; }
.k-line--node { --k-w: 1.5px; }
.k-line--contract { }
.k-line--paid { }
.k-line--maypay { --k-dash: var(--k-c) 0 6px, transparent 6px 10px; }
.k-line--income { --k-c: var(--signature); --k-dash: var(--k-c) 0 6px, transparent 6px 10px; }
.k-line--info { --k-w: 1.5px; --k-dash: var(--k-c) 0 3px, transparent 3px 6px; }
.k-line--recovery { --k-c: var(--status-risk); --k-dash: var(--k-c) 0 6px, transparent 6px 9px; }
.k-line--check { --k-c: var(--k-slate-600); --k-w: 1.5px; --k-dash: var(--k-c) 0 1.5px, transparent 1.5px 4.5px; }

/* SVG stroke classes for page-drawn SVG figures. */
.k-stroke { fill: none; stroke-linecap: square; stroke-linejoin: miter; }
.k-stroke--axis { stroke: var(--k-stone-500); stroke-width: 1; }
.k-stroke--node { stroke: var(--k-ink-900); stroke-width: 1.5; }
.k-stroke--contract, .k-stroke--paid { stroke: var(--k-ink-900); stroke-width: 2; }
.k-stroke--maypay { stroke: var(--k-ink-900); stroke-width: 2; stroke-dasharray: 6 4; }
.k-stroke--income { stroke: var(--signature); stroke-width: 2; stroke-dasharray: 6 4; }
.k-stroke--info { stroke: var(--k-ink-900); stroke-width: 1.5; stroke-dasharray: 3 3; }
.k-stroke--recovery { stroke: var(--k-neg-700); stroke-width: 2; stroke-dasharray: 6 3; }
.k-stroke--check { stroke: var(--k-slate-600); stroke-width: 1.5; stroke-dasharray: 1.5 3; }

/* Numbered marker: 20px ink circle, paper numeral. */
.k-marker {
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background-color: var(--k-ink-900);
  color: var(--k-paper);
  font-family: var(--k-font-numeral);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.k-marker--income { background-color: var(--signature); }

/* Gate mark: a 10px open circle with a bar. */
.k-gate {
  display: inline-block;
  position: relative;
  width: 12px; height: 12px;
  border: 1.5px solid var(--k-ink-900);
  border-radius: 50%;
  background-color: var(--surface-paper);
  vertical-align: middle;
}
.k-gate::after {
  content: "";
  position: absolute;
  left: 50%; top: -5px; bottom: -5px;
  width: 1.5px;
  margin-left: -.75px;
  background: var(--k-ink-900);
}

/* Legend and the "In words" list. */
.k-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.k-legend > li { display: inline-flex; align-items: center; gap: 8px; }
.k-inwords-h { font-size: 15px; font-weight: 600; color: var(--text); }
.k-inwords { counter-reset: k-words; display: grid; gap: 10px; font-size: 16px; line-height: 1.5; }
.k-inwords > li { counter-increment: k-words; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; }
.k-inwords > li::before {
  content: counter(k-words);
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background-color: var(--k-ink-900);
  color: var(--k-paper);
  font-family: var(--k-font-numeral);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Numbered process row (.k-process): five steps across on desktop, each
   numeral on one shared hairline; a numbered rail on phones. Combine with
   .k-inwords when the row is also a figure's accessible text. Each li holds
   an optional .k-process-t (a short title) and the step text. Mark the
   step about Kingsway's own income with .k-process-income (gold-ink). */
.k-process, .k-inwords.k-process {
  counter-reset: k-proc;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-2);
}
.k-process > li, .k-inwords.k-process > li {
  counter-increment: k-proc;
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 4px;
  align-items: start;
  align-content: start;
  padding: 0 0 26px;
}
.k-process > li > * { grid-column: 2; min-width: 0; }
.k-process > li::before, .k-inwords.k-process > li::before {
  content: counter(k-proc);
  grid-column: 1;
  grid-row: 1 / span 3;
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  margin: 0;
  border-radius: 50%;
  background-color: var(--k-ink-900);
  color: var(--k-paper);
  font-family: var(--k-font-numeral);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  position: relative;
  z-index: 1;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.k-process > li.k-process-income::before { background-color: var(--signature); color: var(--k-paper); }
.k-process > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14.5px; top: 30px; bottom: 0;
  width: 1px;
  background-color: var(--rule-strong);
}
.k-process-t { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--text); padding-top: 4px; }
/* From 960px the row runs across; .k-process--rail keeps the numbered rail. */
@media (min-width: 960px) {
  .k-process:not(.k-process--rail) { grid-template-columns: repeat(var(--k-steps, 5), minmax(0, 1fr)); column-gap: var(--k-gutter); font-size: 15px; }
  .k-process:not(.k-process--rail) > li { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 0; }
  .k-process:not(.k-process--rail) > li > * { grid-column: 1; }
  .k-process:not(.k-process--rail) > li::before { grid-row: auto; margin-bottom: 12px; }
  .k-process:not(.k-process--rail) > li:not(:last-child)::after { left: 42px; right: calc(-1 * var(--k-gutter) + 12px); top: 14.5px; bottom: auto; width: auto; height: 1px; }
  .k-process:not(.k-process--rail) .k-process-t { padding-top: 0; }
}
.k-process--rail > li { padding-bottom: 20px; }
.k-process--rail > li:last-child { padding-bottom: 0; }

/* Generic three-party broker diagram. The page supplies the labels.
   Wide: the broker tile across the top, party A bottom left, party C bottom
   right, A to C lines between them, vertical lanes up to the tile.
   Narrow: A, broker, C stacked; A to C lines down the left rail; C lane on
   the right; labels give way to numbered markers and the "In words" list. */
.k-broker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 1.05fr) minmax(0, 1fr);
  grid-template-areas:
    "hub hub hub"
    "la  .   lc"
    "a   ac  c";
  align-items: stretch;
}
.k-broker__hub {
  grid-area: hub;
  margin-left: 6%;
  margin-right: 6%;
  justify-content: center;
  flex-wrap: wrap;
  text-align: left;
}
.k-broker__a { grid-area: a; }
.k-broker__c { grid-area: c; }
.k-broker__a, .k-broker__c { display: flex; flex-direction: column; justify-content: center; }
.k-broker__hub > span { min-width: 0; }
.k-broker__la { grid-area: la; }
.k-broker__lc { grid-area: lc; }
.k-broker__ac { grid-area: ac; }
.k-lane { position: relative; display: flex; min-height: 150px; }
.k-broker__la, .k-broker__lc { justify-content: flex-start; gap: 0; }
.k-broker__la { padding-left: 30%; }
.k-broker__lc { padding-left: 6%; }
.k-broker__ac { flex-direction: column; justify-content: center; gap: 14px; min-height: 0; padding: 10px 0; }

.k-link { position: relative; display: flex; color: var(--k-ink-900); }
.k-link-label {
  font-size: 14px;
  line-height: 1.35;
  color: var(--k-ink-900);
  background-color: var(--surface-paper);
}
.k-link > .k-marker { position: relative; z-index: 1; }
.k-link > .k-gate { position: absolute; z-index: 1; }

/* Horizontal link (A to C): label above a full-width line. */
.k-broker__ac .k-link { flex-direction: column; gap: 6px; padding: 0 10px; }
.k-broker__ac .k-link::before {
  content: "";
  order: 2;
  height: var(--k-w);
  margin: 0 -10px;
  background-image: repeating-linear-gradient(to right, var(--k-dash));
}
.k-broker__ac .k-link > .k-link-label { order: 1; display: flex; gap: 8px; align-items: flex-start; }
.k-broker__ac .k-link[data-arrow="end"]::after,
.k-broker__ac .k-link[data-arrow="start"]::after {
  content: "";
  position: absolute;
  bottom: calc(var(--k-w) / 2 - 5px);
  width: 9px; height: 9px;
  border-top: 2px solid var(--k-c);
  border-right: 2px solid var(--k-c);
}
.k-broker__ac .k-link[data-arrow="end"]::after { right: 2px; transform: rotate(45deg); }
.k-broker__ac .k-link[data-arrow="start"]::after { left: 2px; transform: rotate(-135deg); }

/* Vertical link (party up to the tile): a line with the label beside it. */
.k-broker__la .k-link, .k-broker__lc .k-link {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
  flex: 1 1 0;
  max-width: 220px;
}
.k-broker__la .k-link::before, .k-broker__lc .k-link::before {
  content: "";
  align-self: stretch;
  flex: 0 0 var(--k-w);
  width: var(--k-w);
  background-image: repeating-linear-gradient(to bottom, var(--k-dash));
}
.k-broker__la .k-link[data-arrow]::after, .k-broker__lc .k-link[data-arrow]::after {
  content: "";
  position: absolute;
  left: calc(6px + var(--k-w) / 2 - 5.5px);
  width: 9px; height: 9px;
  border-top: 2px solid var(--k-c);
  border-right: 2px solid var(--k-c);
}
.k-broker__la .k-link[data-arrow="end"]::after, .k-broker__lc .k-link[data-arrow="end"]::after { top: 0; transform: rotate(-45deg); }
.k-broker__la .k-link[data-arrow="start"]::after, .k-broker__lc .k-link[data-arrow="start"]::after { bottom: 0; transform: rotate(135deg); }
.k-broker__la .k-link > .k-gate, .k-broker__lc .k-link > .k-gate { left: calc(6px + var(--k-w) / 2 - 6px); top: calc(50% - 6px); }
.k-broker__la .k-link > .k-gate::after, .k-broker__lc .k-link > .k-gate::after { left: -4px; right: -4px; top: 50%; bottom: auto; width: auto; height: 1.5px; margin: -.75px 0 0; }
.k-broker__la .k-link > .k-link-label, .k-broker__lc .k-link > .k-link-label { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.k-broker__ac .k-link > .k-gate { left: 50%; bottom: calc(var(--k-w) / 2 - 6px); }
.k-lane-note { align-self: center; max-width: 200px; font-size: 14px; line-height: 1.35; color: var(--text-2); font-style: italic; padding: 0 8px; }
.k-link-label > .k-lane-note { display: block; align-self: auto; max-width: none; padding: 4px 0 0; }

/* Stroke modifiers on links. */
.k-link--contract, .k-link--paid { --k-c: var(--k-ink-900); --k-w: 2px; --k-dash: var(--k-c) 0 100%; }
.k-link--maypay { --k-c: var(--k-ink-900); --k-w: 2px; --k-dash: var(--k-c) 0 6px, transparent 6px 10px; }
.k-link--income { --k-c: var(--signature); --k-w: 2px; --k-dash: var(--k-c) 0 6px, transparent 6px 10px; }
.k-link--info { --k-c: var(--k-ink-900); --k-w: 1.5px; --k-dash: var(--k-c) 0 3px, transparent 3px 6px; }
.k-link--recovery { --k-c: var(--k-neg-700); --k-w: 2px; --k-dash: var(--k-c) 0 6px, transparent 6px 9px; }
.k-link--check { --k-c: var(--k-slate-600); --k-w: 1.5px; --k-dash: var(--k-c) 0 1.5px, transparent 1.5px 4.5px; }
.k-link--income .k-marker { background-color: var(--signature); }
.k-link::before, .k-link::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

@media (max-width: 719px) {
  .k-broker {
    grid-template-columns: 50px minmax(0, 1fr) 64px;
    grid-template-areas:
      "a   a   a"
      "ac  la  ."
      "ac  hub hub"
      "ac  .   lc"
      "c   c   c";
  }
  .k-broker__hub { margin: 0; justify-content: flex-start; flex-wrap: nowrap; align-items: flex-start; }
  .k-broker .k-link-label > span:not(.k-marker), .k-lane-note { display: none; }
  .k-lane { min-height: 76px; }
  .k-broker__ac { flex-direction: row; justify-content: flex-start; gap: 4px; padding: 0 0 0 6px; }
  .k-broker__ac .k-link { flex-direction: row; align-items: center; padding: 0; gap: 0; width: 20px; justify-content: center; }
  .k-broker__ac .k-link::before {
    order: 0;
    position: absolute;
    left: calc(50% - var(--k-w) / 2);
    top: 0; bottom: 0;
    width: var(--k-w); height: auto;
    margin: 0;
    background-image: repeating-linear-gradient(to bottom, var(--k-dash));
  }
  .k-broker__ac .k-link > .k-link-label { order: 0; background: transparent; }
  .k-broker__ac .k-link[data-arrow="end"]::after { right: auto; left: calc(50% - 5.5px); bottom: 0; transform: rotate(135deg); }
  .k-broker__ac .k-link[data-arrow="start"]::after { left: calc(50% - 5.5px); top: 0; bottom: auto; transform: rotate(-45deg); }
  .k-broker__la { justify-content: center; padding-left: 0; }
  .k-broker__lc { justify-content: flex-start; padding-left: 4px; }
  .k-broker__la .k-link, .k-broker__lc .k-link { flex: 0 0 auto; gap: 4px; padding: 0 2px; }
  .k-broker__la .k-link[data-arrow="end"]::after { top: auto; bottom: 0; transform: rotate(135deg); }
  .k-broker__la .k-link[data-arrow="start"]::after { bottom: auto; top: 0; transform: rotate(-45deg); }
  .k-broker__la .k-link[data-arrow]::after, .k-broker__lc .k-link[data-arrow]::after { left: calc(2px + var(--k-w) / 2 - 5.5px); }
  .k-broker__la .k-link > .k-gate, .k-broker__lc .k-link > .k-gate { left: calc(2px + var(--k-w) / 2 - 6px); }
}

/* ---------------------------------------------------------------------
   17b. Service page layout (.svc-), shared by the specialist service pages
   (V2.1). A wide cover with the standfirst beside the actions, a split
   section head, a ruled problem index, the process row with a stone aside
   under it (.svc-hand, V2.3), one document sheet on stone, one charcoal band
   for Kingsway's own position, and a quiet close. Page-specific drawings
   stay in the page's own <style>.
   --------------------------------------------------------------------- */
/* ---- Cover: a wide headline, then the standfirst beside the actions ---- */
.svc-hero { padding-top: clamp(40px, 5.6vw, 84px); padding-bottom: clamp(56px, 6vw, 92px); }
.svc-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.svc-hero .k-display { max-width: 20ch; }
.svc-hero-text { margin-top: 28px; }
.svc-hero-text > p { max-width: 44ch; }
.svc-hero-text > p + p { margin-top: 16px; }
.svc-hero-text > .svc-lede-ink { color: var(--text); }
.svc-hero-act { margin-top: 32px; }
.svc-hero-act .hero-cta { margin-top: 0; }
.svc-hero-note { margin-top: 20px; max-width: 54ch; font-size: 15px; line-height: 1.55; color: var(--text-2); }
@media (min-width: 960px) {
  .svc-hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--k-gutter); }
  .svc-hero-grid > * { grid-column: 1 / -1; }
  .svc-hero-grid > .svc-hero-text { grid-column: 1 / span 7; }
  .svc-hero-act { grid-column: 8 / span 5; grid-row: 3; align-self: start; justify-self: end; width: min(100%, 23.5rem); margin-top: 34px; }
  .svc-hero-act .hero-cta { display: grid; gap: 12px; }
  .svc-hero-act .btn { width: 100%; }
  .svc-hero-note { margin-top: 18px; }
}
@media (max-width: 599px) {
  .svc-hero-text { margin-top: 18px; }
  .svc-hero-act { margin-top: 26px; }
}

/* ---- Section heads ---- */
.svc-head-split { display: grid; gap: 18px var(--k-gutter); margin-bottom: clamp(36px, 4vw, 56px); }
.svc-head-split > :first-child > * + * { margin-top: 14px; }
.svc-head-split > p { max-width: 46ch; color: var(--text-2); }
@media (min-width: 960px) {
  .svc-head-split { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .svc-head-split > :first-child { grid-column: 1 / span 7; }
  .svc-head-split > p { grid-column: 8 / span 5; padding-bottom: 4px; }
}

/* ---- The problem: a ruled index, each title beside its line ---- */
.svc-problem .k-section-head { margin-bottom: 0; }
.svc-problem .k-section-head > p { max-width: 40ch; color: var(--text-2); }
.svc-points { border-top: 1px solid var(--rule-ink); }
.svc-points > li { display: grid; gap: 6px var(--k-gutter); padding: 22px 0 26px; border-bottom: 1px solid var(--rule-strong); }
.svc-points h3 { font-family: var(--k-font-display); font-weight: 540; font-size: 24px; line-height: 1.2; letter-spacing: -.008em; }
.svc-points p { max-width: 52ch; font-size: 17px; line-height: 1.6; color: var(--text-2); }
@media (min-width: 720px) {
  .svc-points > li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ---- How it works: the process row ---- */
.svc-process { --k-steps: 4; }
.svc-process p { max-width: 34ch; }
@media (min-width: 960px) {
  .svc-process.k-process { font-size: 16px; }
  .svc-process .k-process-t { font-size: 17px; }
}

/* ---- The working view: one document sheet on stone ---- */
.svc-fig { margin: 0; }
.svc-fig > figcaption { margin-top: 18px; max-width: 72ch; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.svc-sheet .k-preview-head { padding-left: clamp(20px, 3.4vw, 48px); padding-right: clamp(20px, 3.4vw, 48px); }
.svc-sheet .k-preview-body { padding: clamp(20px, 3vw, 40px) clamp(20px, 3.4vw, 48px) clamp(20px, 2.4vw, 32px); }
.svc-sheet .k-preview-foot { row-gap: 4px; padding: 0 clamp(20px, 3.4vw, 48px) 20px; }

/* ---- What to have to hand (or when it is not a fit) and when to look
   again: a stone aside under the steps ---- */
.svc-aside { padding: clamp(22px, 2.6vw, 34px); background-color: var(--surface-stone); border-radius: var(--k-radius-sheet); --rule-strong: var(--k-stone-600); }
.svc-aside h3 { font-size: 17px; line-height: 1.4; }
.svc-aside > h3 + p { margin-top: 6px; }
.svc-aside > p, .svc-aside li { font-size: 16px; line-height: 1.6; color: var(--text-2); }
.svc-aside > :is(p, ul) + h3 { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--rule-strong); }
.svc-aside > ul { margin-top: 10px; }
.svc-aside li { padding: 9px 0; border-top: 1px solid var(--k-stone-300); }
.svc-aside li:first-child { padding-top: 2px; border-top: 0; }
.svc-aside li:last-child { padding-bottom: 0; }
.svc-aside a { color: var(--text); font-weight: 600; }
/* V2.3: the aside sits under the four steps in #how, its two parts side by
   side from 720px (moved from the two service pages, which each set the
   same block under their own prefix). */
.svc-hand { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 22px; }
.svc-hand > div > h3 + p { margin-top: 6px; }
.svc-hand p { font-size: 16px; line-height: 1.6; color: var(--text-2); }
.svc-hand > div > ul { margin-top: 10px; }
@media (max-width: 719px) {
  .svc-hand > div + div { padding-top: 22px; border-top: 1px solid var(--rule-strong); }
}
@media (min-width: 720px) {
  .svc-hand { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 0; }
  .svc-hand > div:first-child { padding-right: clamp(24px, 3vw, 44px); }
  .svc-hand > div + div { padding-left: clamp(24px, 3vw, 44px); border-left: 1px solid var(--rule-strong); }
}

/* ---- Kingsway's own position (charcoal, once per page) ---- */
.svc-band-grid { display: grid; gap: 26px var(--k-gutter); }
.svc-band h3 { max-width: 18ch; font-family: var(--k-font-display); font-weight: 520; font-size: clamp(30px, 1.6vw + 23px, 46px); line-height: 1.1; letter-spacing: -.012em; }
.svc-band-main > p { margin-top: 22px; max-width: 60ch; font-size: 17px; line-height: 1.65; color: var(--text-2); }
@media (min-width: 960px) {
  .svc-band-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .svc-band-grid > .k-bars { grid-column: 1; margin-top: 8px; }
  .svc-band-main { grid-column: 2 / span 6; }
}
@media (max-width: 599px) {
  .svc-band-grid > .k-bars { width: 50px; height: 34px; background-size: 50px 100%; }
}

/* ---- Close ---- */
.svc-close-grid { align-items: end; }
.svc-close h2 { max-width: 14ch; font-size: clamp(32px, 2vw + 24px, 54px); line-height: 1.08; }
.svc-close-copy > p { max-width: 50ch; font-family: var(--k-font-serif); font-size: clamp(19px, .45vw + 15.5px, 22px); line-height: 1.5; color: var(--text-2); }
.svc-close .hero-cta { margin-top: 28px; }

@media (max-width: 599px) {
  .svc-points h3 { font-size: 22px; }
  .svc-points p, .svc-band-main > p { font-size: 16px; }
}

@media print {
  /* Tighter section rhythm on paper (V2.2: moved from the two service pages,
     which each set it). */
  main:has(> .svc-hero) .k-section { padding-top: 7mm; padding-bottom: 7mm; }
  .svc-hero { padding: 0 0 6mm; }
  .svc-hero-grid, .svc-close-grid, .svc-band-grid, .svc-head-split { display: block; }
  .svc-hero-text { margin-top: 4mm; }
  .svc-hero-text > p { max-width: none; }
  .svc-hero-act { margin-top: 3mm; width: auto; }
  .svc-head-split > p { margin-top: 3mm; max-width: none; }
  .svc-points > li { grid-template-columns: 55mm minmax(0, 1fr); padding: 3mm 0; break-inside: avoid; }
  .svc-points h3 { font-size: 12pt; }
  .svc-points p, .svc-aside > p, .svc-aside li, .svc-band-main > p, .svc-close-copy > p { font-size: 10pt; }
  .svc-aside { margin-top: 6mm; padding: 0; background: none; break-inside: avoid; }
  .svc-hand { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 6mm; }
  .svc-hand p { font-size: 10pt; }
  .svc-band-grid > .k-bars { display: none; }
  .svc-band h3 { max-width: none; font-size: 16pt; }
  .svc-close h2 { max-width: none; font-size: 18pt; }
  .svc-process { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 5mm; font-size: 9.5pt; }
  .svc-process > li { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .svc-process > li > * { grid-column: 1; }
  .svc-process > li::before { grid-row: auto; margin-bottom: 2mm; }
  .svc-process > li:not(:last-child)::after { display: none; }
  .svc-process p { max-width: none; }
  .svc-fig { break-inside: avoid; }
}

/* ---------------------------------------------------------------------
   17c. Article layout (.k-article-), V2.1: the light editorial cover on the
   body's axis, serif prose on paper with a sticky contents list from
   1100px, one next step on stone, then related questions and sources.
   Used by /insights articles and content/templates/article.html.
   --------------------------------------------------------------------- */
/* Cover: light, the headline wide, the byline and dates under a hairline. */
.k-article-cover { padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(44px, 5.5vw, 80px); }
.k-article-cover .k-runhead a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.k-article-cover h1 { font-size: clamp(36px, 2.4vw + 24px, 60px); line-height: 1.07; letter-spacing: -.014em; max-width: 21ch; }
.k-article-cover .k-lede { max-width: 44ch; }
.k-article-credit { margin-top: clamp(28px, 3vw, 40px); padding-top: 16px; border-top: 1px solid var(--rule-ink); }
.k-article-credit .k-meta { max-width: none; }
/* From 1100px the cover shares the body's axis: the running head in the margin, the headline over the text column. */
@media (min-width: 1100px) {
  .k-article-cover .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--k-gutter); }
  .k-article-cover .k-runhead { grid-column: 1 / span 3; grid-row: 1; padding-top: 14px; }
  .k-article-cover h1, .k-article-cover .k-lede, .k-article-credit { grid-column: 4 / span 9; }
  .k-article-cover h1 { grid-row: 1; margin-top: 0; }
}
.k-article-credit .k-byline { color: var(--text); font-weight: 600; font-size: 16px; }
.k-article-credit .k-meta + .k-meta { margin-top: 4px; }

/* Body: editorial prose in the serif on a paper ground, contents in the margin. */
.k-article-main { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(56px, 7vw, 104px); }
.k-article-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px var(--k-gutter); }
.k-article-toc { display: none; }
.k-article-body { font-family: var(--k-font-serif); font-size: 18px; line-height: 1.65; color: var(--text); }
.k-article-body > * { max-width: 64ch; }
.k-article-body > p:first-child { font-size: 1.12em; line-height: 1.55; }
.k-article-body h2 { font-size: clamp(26px, .9vw + 20px, 32px); line-height: 1.18; max-width: 26ch; scroll-margin-top: 24px; }
.k-article-body ul:not([class]) { padding-left: 1.2em; }
.k-article-body li::marker { color: var(--text-3); }
.k-article-body li + li { margin-top: .6em; }
.k-article-body strong { font-weight: 600; }
.k-article-body a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.k-article-pull { margin: 2em 0 !important; padding: 4px 0 4px 24px; border-left: 3px solid var(--k-ink-900); }
.k-article-pull p { font-family: var(--k-font-display); font-size: clamp(22px, .7vw + 17px, 26px); line-height: 1.38; letter-spacing: -.005em; }
.k-article-disclaimer { margin-top: 2.4em !important; padding-top: 16px; border-top: 1px solid var(--rule); font-family: var(--k-font-sans); font-size: 15px; line-height: 1.55; color: var(--text-2); }
.k-article-disclaimer a { color: var(--text); }
@media (min-width: 600px) { .k-article-body { font-size: 19px; } }
@media (min-width: 1100px) {
  .k-article-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .k-article-toc { display: block; grid-column: 1 / span 3; position: sticky; top: 24px; align-self: start; }
  .k-article-body { grid-column: 4 / span 8; }
}
.k-article-toc-h { padding-bottom: 10px; border-bottom: 1px solid var(--rule-ink); }
.k-article-toc ol { counter-reset: k-article-toc; list-style: none; padding: 0; margin: 0; }
.k-article-toc li { counter-increment: k-article-toc; border-bottom: 1px solid var(--rule); }
.k-article-toc a { display: grid; grid-template-columns: 24px minmax(0, 1fr); padding: 10px 0; font-size: 15px; line-height: 1.35; font-weight: 500; text-decoration: none; color: var(--text); }
.k-article-toc a::before { content: counter(k-article-toc); font-family: var(--k-font-numeral); font-weight: 600; font-size: 16px; color: var(--signature); }
.k-article-toc a:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* The one next step. */
.k-article-next h2 { max-width: 20ch; }
.k-article-next .k-article-next-copy > p:not(.k-runhead) { font-size: 18px; color: var(--text-2); max-width: 46ch; }
@media (min-width: 960px) { .k-article-next .k-ed { align-items: end; } .k-article-next .k-actions { justify-content: flex-end; margin-top: 0; } }

/* Related questions and sources. */
.k-article-end { padding-top: clamp(48px, 5vw, 80px); padding-bottom: clamp(48px, 5vw, 80px); }
.k-article-sources-lead { margin-bottom: 6px; color: var(--text-2); }
.k-article-end .k-sources a { color: var(--text); }

@media print {
  .k-article-cover { padding-top: 0; padding-bottom: 5mm; }
  .k-article-cover h1 { font-size: 24pt; }
  .k-article-main { padding-top: 4mm; padding-bottom: 4mm; }
  .k-article-toc { display: none; }
  .k-article-body { font-size: 11pt; }
  .k-article-body h2 { font-size: 15pt; break-after: avoid; }
  .k-article-pull { break-inside: avoid; }
  .k-article-next { display: none; }
  .k-article-end { padding-top: 4mm; }
}

/* ---------------------------------------------------------------------
   18. Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   19. Print base (D12). A4, ink on white, bands print white with a rule.
   --------------------------------------------------------------------- */
@page {
  size: A4;
  margin: 18mm 16mm 20mm;
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font-family: "IBM Plex Sans", Arial, sans-serif;
    font-size: 8pt;
    color: #3D454C;
  }
}
@media print {
  :root, .k-light, .k-doc, .k-sheet, .k-preview, .kmap,
  .k-band, .k-header, .k-colophon {
    --surface-ground: #FFFFFF;
    --surface-paper: #FFFFFF;
    /* Bands print white (D3, D12), so anything raised on a band does too;
       otherwise a raised card keeps its charcoal fill under ink text. */
    --surface-band: #FFFFFF;
    --surface-colophon: #FFFFFF;
    --surface-raised: #FFFFFF;
    --text: #141A1F;
    --text-2: #3D454C;
    --text-3: #3D454C;
    --rule: #D8D1C2;
    --rule-ink: #141A1F;
    --signature: #735A22;
    --focus: #141A1F;
    --status-good: #2F6B48;
    --status-attention: #9C4300;
    --status-risk: #9A3B26;
  }
  html, body { background: #FFFFFF !important; color: #141A1F; }
  body { font-size: 10.5pt; line-height: 1.45; }
  h1, .k-h1 { font-size: 28pt; max-width: none; }
  h2, .k-h2 { font-size: 18pt; }
  h3, .k-h3 { font-size: 13pt; }
  .k-figure-display, .k-glance dd, .k-glance .k-glance-v, .k-amount > .k-amount-v { font-size: 20pt; }
  .k-display { font-size: 32pt; max-width: none; }
  .k-lede, .lede, .hero-lede { font-size: 12.5pt; }
  .k-serif, .k-prose-serif { font-size: 10.5pt; line-height: 1.45; }
  .k-table { font-size: 9.5pt; }
  .k-note, .k-caption, figcaption, .k-small { font-size: 8.5pt; }

  /* Bands print white with a thin rule; text in ink. */
  .k-band, .k-header, .k-colophon {
    background: #FFFFFF !important;
    color: #141A1F !important;
    border-color: #141A1F;
    box-shadow: none;
  }
  .k-band { border-top: .5pt solid #141A1F; border-bottom: .5pt solid #141A1F; }
  .k-header { border-bottom: .5pt solid #141A1F; margin-bottom: 5mm; }
  /* The printed colophon is compact and prefers to stay with the page
     above it, so a document's last lines and its disclosure share a page. */
  .k-colophon { border-top: .5pt solid #141A1F; margin-top: 4mm; padding: 5mm 0 0; break-before: avoid; }
  .k-colophon .lockup .t { font-size: 16pt; }
  .k-colophon .lockup .s { font-size: 7.5pt; }
  main > .k-band:first-child { border-top: 0; }
  .k-colophon a, .k-colophon .foot-h, .k-colophon .foot-tag, .k-colophon .copy { color: #141A1F !important; }
  .k-signoff { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* The exact mark prints only inside a charcoal lockup tile. */
  .k-header .lockup svg, .k-colophon .lockup svg { display: none; }
  .lockup .t, .lockup .s { color: #141A1F !important; }
  .k-lockup-tile { background-color: #141A1F !important; }
  .k-lockup-tile .k-tile-name { color: #E9ECEE !important; }
  .k-lockup-tile .k-tile-caption { color: #B4BCC2 !important; }

  /* Hidden in print. */
  .skip-link, .k-menu, .k-header nav, .btn, .k-toolbtn, .k-tools, .k-copy-status, .k-toc,
  .k-copy-fallback, .k-no-print, .k-colophon .foot-links, .k-family-slot,
  form:not(.k-print-keep) { display: none !important; }

  /* Disclosure prints in ink, 8.5pt, on every printed footer. */
  .k-colophon .wrap > .foot-h { margin-top: 4mm; padding-top: 0; border: 0; font-size: 8.5pt; }
  .disclosure { color: #141A1F !important; font-size: 8.5pt; line-height: 1.4; max-width: none; }
  .k-colophon .copy { font-size: 8.5pt; margin-top: 3mm; }
  .k-colophon .foot-top { display: block; }
  .k-colophon .foot-tag { margin-top: 1mm; font-size: 9.5pt; }

  /* Paper sheets lose their shadow (and any lift); previews keep a hairline
   so they still read as sheets; tags keep their borders. */
  .k-doc, .kmap, .k-panel, .k-card, .k-preview { box-shadow: none !important; background: #FFFFFF; transform: none !important; }
  .k-preview, .k-card { border: .5pt solid #8C8375; margin-right: 0; margin-bottom: 0; }
  .k-section--stone, .k-stone { background: #FFFFFF !important; }
  .k-doc { border: 0; padding: 0; max-width: none; }
  .k-doc.k-illustrative { padding-left: 5mm; }
  .k-tag, .k-status, .k-prov, .k-owner, .k-marker, .k-pending,
  .k-scale > *, .kmap-legend > span, .kmap-status, .k-stepper > li::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Breaks. */
  h1, h2, h3, h4, .k-runhead, .k-doc-head, .k-sec-n { break-after: avoid; }
  /* The disclosure never parts from its heading: the printed colophon (about
     45mm) moves to the next page whole rather than splitting. */
  .k-colophon .foot-h { break-after: avoid; }
  .k-colophon .wrap { break-inside: avoid; }
  tr, figure, .k-figure, .k-note, .k-namecard, .k-boundaries, .k-disclosure-box,
  .k-card, .k-pending, .k-client-example, .k-signoff, .k-glance, .k-preview, .k-process > li { break-inside: avoid; }
  .k-appendix, .k-print-break { break-before: page; }

  /* Details open in print (k-chrome opens them; this is the CSS fallback). */
  details[data-print-open]::details-content,
  [data-print-scope] details::details-content { content-visibility: visible; display: block; }
  .k-working > summary::before, .k-details > summary::before, .k-pending--row > summary::before, .k-disc > summary::after { display: none; }
  .k-pending--row > summary { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t owner" "needs needs"; }

  /* Links in documents print their address. */
  main a[href^="/"]:not(.btn):not(.k-no-url)::after,
  .k-doc a[href^="/"]:not(.btn):not(.k-no-url)::after { content: " (" var(--spec-print-host) attr(href) ")"; font-size: .85em; }
  main a[href^="http"]:not(.btn):not(.k-no-url)::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  main a[href^="#"]::after { content: none; }

  /* Scoped print: only the target, its ancestors and its contents. */
  html.k-print-scoped main :not(.k-print-target, .k-print-target *, :has(.k-print-target)) { display: none !important; }

  /* Stacked tables never apply on paper. */
  .k-table thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}

} /* end @layer family */