/*
 * secondcity — Second City Roofing.
 *
 * A Birmingham roofing contractor. The design has to read as a working trade
 * business, not a marketing site: weight, material and plain confidence rather
 * than gradients, glass and rounded corners. Slate and clay because that is
 * what the crews actually lay.
 *
 * Two constraints from the framework shape the layout, not just decorate it:
 *
 *   The macro context sits above the first <h2> and carries the centerpiece
 *   annotation. It gets real visual weight — the dark band — because that is
 *   the block the first-pass gate reads and the block a visitor decides on.
 *
 *   Below that is micro context, and it must be VISUALLY segmented: "layout,
 *   not headings, determines information boundaries". A visually continuous
 *   block reads as one chunk regardless of the H2 structure inside it, so the
 *   section rules and card boundaries are load-bearing, not styling.
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Source+Sans+3:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --ink:        #15181b;
  --slate:      #39434e;
  --slate-mid:  #5d6874;
  --slate-soft: #8b95a1;
  --rule:       #dcd8d2;
  --rule-soft:  #eae7e2;
  --paper:      #f5f3f0;
  --panel:      #ffffff;
  --clay:       #b0491c;
  --clay-dark:  #8a3714;
  --clay-tint:  #fbf0e9;
  --lead:       #1d2d3d;   /* brand steel, from the logo palette */

  --display: Archivo, "Helvetica Neue", Helvetica, sans-serif;
  --body:    "Source Sans 3", system-ui, -apple-system, sans-serif;

  /* 1140px at a 16px root. One container width for the whole site — header,
     fold, body and footer all align to the same edges, which is what stops the
     page reading as separately-designed strips stacked on top of each other. */
  --container: 71.25rem;
  /* The Outer template is an article: its fold and its body are the same
     column, so they share one token. Setting them separately is what put the
     headline on the container's left edge while the prose sat centred. */
  --read: 44rem;
  /* For a band that carries its own gutter INSIDE its max-width. Without it the
     content box is container-minus-two-gutters, so the header nav and the body
     sat narrower than the fold and the footer, and nothing lined up. */
  --container-outer: calc(71.25rem + 2 * clamp(1rem, 3.5vw, 2rem));
  --measure:   36rem;      /* ~68 characters, the reading column */
  --wide:      var(--container);

  /* Gutters step with the viewport: thumbs need less edge on a phone than a
     desktop needs breathing room. */
  --pad: clamp(1rem, 3.5vw, 2rem);

  /* Breakpoints, named so the intent is legible at each @media below.
     phone < 30rem · small < 48rem · tablet 48-64rem · desktop >= 64rem */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--clay-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

/* ── site chrome ───────────────────────────────────────────────────────────
   Kept small on purpose. Large nav and footer blocks dilute prominence
   weighting for both terms and links — the same reason I-nodes beat S-nodes.
   The rules live with the header and footer sections further down; this block
   only sets the two bands' colour. */

/* ── the fold ──────────────────────────────────────────────────────────────
   ONE element paints the band.

   The previous version put the background on the h1, the centerpiece and the
   first section separately. Each is a different width — the h1 unconstrained,
   the centerpiece capped to the reading measure — so the dark band covered only
   as far as the narrowest of them and the white hero text landed on white. The
   wrapper is the fix: .k-fold paints, .k-fold-inner constrains.

   Core and Outer differ from here down. Core is a conversion band; Outer is an
   editorial opening. A comparison page and a service page must not share a
   skeleton, and the document template is itself a signal of page purpose. */

main { display: block; }

.k-fold { padding: clamp(2.25rem, 6vw, 4rem) var(--pad) clamp(2rem, 5vw, 3.25rem); }
.k-fold-inner { max-width: var(--wide); margin: 0 auto; }
/* The reading column is centred and sized for reading — roughly 68 characters
   — rather than pinned to the left of a 1140px band. The fold stays full
   container width, so the two read as deliberately different measures. */
.k-body { max-width: calc(46rem + 2 * var(--pad)); margin: 0 auto;
  padding: 0 var(--pad) 1rem; }

.k-fold h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 1.15rem + 3.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
  max-width: 19ch;
}
.k-fold h1::after {
  content: ""; display: block; width: 3.5rem; height: 4px;
  background: var(--clay); margin-top: 1.15rem;
}
.k-centerpiece {
  margin: 1.15rem 0 0;
  max-width: var(--measure);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.55;
  text-wrap: pretty;
}
.k-eyebrow {
  margin: 0 0 0.7rem;
  font-family: var(--display); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--clay);
}

/* --- Core: the conversion band ----------------------------------------- */
/* ⚠ THE FOLD HAS TWO GROUNDS, AND EVERY COMPONENT IN IT HAS TO KNOW WHICH.
   Core opens on a dark band, Outer on a white one, and the same twenty-eight
   fold components render on both. They used to hard-code light-panel cards and
   ink text, which on the Outer fold meant white cards on a white ground, and a
   separate rule further down assumed the FIRST section of any page was on the
   dark band — so the calculator on /advice/pricing/square-metre-rates/ and
   /advice/hiring/scaffolding/, both Outer, drew dark fields on a light fold.
   These tokens are the fix: a component asks for --fold-card, not for a colour,
   and the template it lands in decides what that is. */
.k-t-core .k-fold {
  background: var(--lead); color: #fff;
  --fold-ink: #ffffff;
  --fold-muted: #b8c2cc;
  --fold-label: #9fabb8;
  --fold-card: #2b333b;
  --fold-card-edge: #3c4650;
  --fold-field: #1b2229;
  --fold-field-edge: #46515d;
  --fold-on: rgba(176, 73, 28, 0.26);
  --fold-on-edge: #d2793f;
  --fold-on-ink: #f6d9c6;
}
.k-t-outer .k-fold {
  --fold-ink: var(--ink);
  --fold-muted: var(--slate);
  --fold-label: var(--slate-mid);
  --fold-card: var(--paper);
  --fold-card-edge: var(--rule-soft);
  --fold-field: #ffffff;
  --fold-field-edge: var(--rule);
  --fold-on: var(--clay-tint);
  --fold-on-edge: var(--clay);
  --fold-on-ink: var(--clay-dark);
}
.k-t-core .k-fold h1 { color: #fff; }
.k-t-core .k-centerpiece { color: #ccd4dc; }
.k-t-core .k-fold > .k-fold-inner > section { margin: 1.75rem 0 0; padding: 0;
  background: none; border: 0; border-radius: 0; }
.k-fold label { color: var(--fold-label); }
.k-t-core .k-fold p { color: var(--fold-muted); }
.k-fold input, .k-fold select, .k-fold textarea {
  background: var(--fold-field); border-color: var(--fold-field-edge); color: var(--fold-ink); }
.k-fold input::placeholder { color: var(--slate-soft); }
.k-fold legend { color: var(--fold-ink); }

/* --- Outer: the editorial opening -------------------------------------- */
.k-t-outer .k-fold {
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  padding-bottom: clamp(1.5rem, 4vw, 2.25rem);
}
.k-t-outer .k-fold h1 { color: var(--ink); max-width: none;
  font-size: clamp(1.9rem, 1.1rem + 3vw, 2.9rem); }
.k-t-outer .k-fold h1::after { width: 2.5rem; height: 3px; margin-top: 1rem; }
.k-t-outer .k-centerpiece { color: var(--slate); font-size: clamp(1.09rem, 1rem + 0.4vw, 1.25rem); }
.k-t-outer .k-fold > .k-fold-inner > section {
  margin: 1.5rem 0 0; padding: 0.9rem 1rem;
  background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 3px;
  max-width: none;
}
.k-t-outer .k-body { max-width: calc(var(--read) + 2 * var(--pad)); }

/* .k-fold pads, .k-fold-inner constrains — so the inner max-width is the bare
   measure, and the two content boxes come out the same width and centred on the
   same axis. The band still runs full width; only the column inside it aligns. */
.k-t-outer .k-fold-inner { max-width: var(--read); }

/* ── micro context ─────────────────────────────────────────────────────── */

.k-body > h2 {
  margin: 2.75rem 0 0.85rem;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  line-height: 1.2; letter-spacing: -0.018em;
  max-width: 28ch; text-wrap: balance;
}
.k-body > h2:first-child { margin-top: 1.75rem; }
.k-body > h2 + h2 { margin-top: 1.5rem; }
.k-body > p + h2, .k-body > ul + h2, .k-body > ol + h2 { margin-top: 2.5rem; }
.k-body > section + h2 { margin-top: 2.75rem; }
.k-body > h2::before {
  content: ""; display: block; width: 2.25rem; height: 3px;
  background: var(--clay); margin-bottom: 0.8rem;
}
main h3 { margin: 0 0 0.7rem; font-family: var(--display); font-weight: 700;
  font-size: 1.0625rem; letter-spacing: -0.01em; }

main p, main li { max-width: var(--measure); text-wrap: pretty; }
.k-body p, .k-body li, .k-body h2, .k-body h3 { max-width: none; }
.k-body > p { color: var(--slate); font-size: 1.06rem; }
.k-body > p > strong { color: var(--ink); font-weight: 600; }
main ul, main ol { padding-left: 1.15rem; }
.k-body > p + ul, .k-body > p + ol { margin-top: 0.65rem; }
.k-body > ul, .k-body > ol { margin-bottom: 1.25rem; }
main li { margin-bottom: 0.4rem; }
/* Specification lines. A value like "a holding repair; visible; does not
   address adjacent fixings" is a spec, not a sentence, and it is set as one.
   Wrapping it in a sentence frame is what AUTHORSHIP.md §1 calls the machine
   showing — and it is what this theme published until 0.22.0. */
.k-body > ul.k-spec { list-style: none; padding-left: 0; margin: 1.1rem 0 1.35rem;
  border-top: 1px solid var(--rule-soft); }
.k-body > ul.k-spec > li { margin: 0; padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule-soft); color: var(--slate);
  font-size: 1rem; line-height: 1.55; }
.k-body > ul.k-spec > li > strong { color: var(--ink); font-weight: 600; }
@media (min-width: 48rem) {
  .k-body > ul.k-spec > li { display: grid; grid-template-columns: 14rem 1fr;
    gap: 0 1.25rem; align-items: baseline; }
}

.k-border { font-style: italic; color: var(--slate-mid);
  border-left: 3px solid var(--clay); padding: 0.35rem 0 0.35rem 1rem;
  margin: 2.25rem 0 0.5rem; }

.k-body > section {
  margin: 2rem 0; padding: 1.25rem 1.375rem;
  background: var(--panel); border: 1px solid var(--rule-soft); border-radius: 4px;
}
.k-body > section > :last-child { margin-bottom: 0; }

/* The closing call to action on all 53 Outer documents. Centred: it is the one
   block on an article that is not prose, and left-aligning a heading, a button
   and a telephone number in a wide dark band leaves the right two thirds of it
   empty. */
.k-outer-cta { background: var(--lead) !important; border-color: var(--lead) !important;
  color: #fff; text-align: center; padding: clamp(1.75rem, 4vw, 2.5rem) 1.5rem !important; }
.k-outer-cta h3 { color: #fff; margin: 0 auto; max-width: 22ch; }
.k-outer-cta p { color: #b8c2cc; margin: 0 auto; max-width: 40ch; }
.k-outer-cta a { color: #fff; }
.k-outer-cta-form { margin: 1.15rem 0 0.7rem !important;
  display: flex; justify-content: center; }
.k-outer-cta-form button { font-size: 1rem; padding: 0.85rem 1.75rem; width: auto; }

/* ── forms — every one genuinely works with JavaScript off ─────────────── */

main form { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-end; margin: 0 0 1rem; }
main label { display: block; font-family: var(--display); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.02em; margin-bottom: 0.3rem; color: var(--slate-mid); }
main input, main select {
  font: 400 1rem/1.2 var(--body); padding: 0.7rem 0.8rem; min-height: 2.9rem;
  background: #fff; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 3px;
}
main input:focus, main select:focus { border-color: var(--clay); }
main input[type="number"] { width: 7.5rem; }
main input[type="text"], main input[type="tel"], main input[type="date"] { width: 12rem; }
/* ⚠ CHECKBOXES WERE MISSING FROM THIS RULE. Only radio was exempted, so every
   checkbox on the site inherited `main input` — 2.9rem tall, 0.7rem of padding,
   a border and a filled background — and rendered as a large empty box sitting
   above its own label instead of beside it. Eight fold components use them. */
main input[type="radio"], main input[type="checkbox"] {
  min-height: 0; width: auto; height: auto; padding: 0;
  margin: 0.2rem 0 0; accent-color: var(--clay);
  background: none; border: 0; border-radius: 0; flex: 0 0 auto;
}
main button {
  font-family: var(--display); font-weight: 700; font-size: 0.97rem; letter-spacing: 0.01em;
  min-height: 2.9rem; padding: 0.75rem 1.6rem;
  background: var(--clay); color: #fff; border: 0; border-radius: 3px; cursor: pointer;
}
main button:hover { background: var(--clay-dark); }

/* ⚠ REMOVED. This targeted "the first section on the page" and assumed it sat
   on the dark Core band. On an Outer page the fold is white, and this painted
   the calculator's fields dark on it. The fold tokens above do the job
   correctly, per template rather than per position. */

.k-tel-number {
  display: inline-block; font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 2.9rem); letter-spacing: -0.025em;
  color: #fff; text-decoration: none; border-bottom: 3px solid var(--clay);
}
.k-tel-number:hover { color: var(--clay); }

/* ── the calculator ────────────────────────────────────────────────────────
   Reported as bad-looking, and it was. Label and input were flat siblings in a
   flex row, so a label wrapped away from the field it named and four controls
   broke into a ragged line. Each control is its own .k-field now and they sit
   on a grid, with the answer as a figure rather than a paragraph. */

.k-calculator form { display: block; margin: 0 0 1.25rem; }
.k-fields {
  display: grid; gap: 0.75rem;
  grid-template-columns: 1fr;
  align-items: end;
}
.k-field { display: flex; flex-direction: column; min-width: 0; }
.k-field label { margin-bottom: 0.35rem; }
.k-field label span {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--slate-soft);
}
.k-field input, .k-field select { width: 100%; }
.k-field-go button { width: 100%; }

.k-result {
  padding: 1.1rem 1.25rem;
  background: var(--fold-card); border: 1px solid var(--fold-card-edge);
  border-radius: 4px;
}
.k-result > p { margin: 0; color: var(--fold-muted); font-size: 0.95rem; }
.k-result > p + p, .k-result > dl + p { margin-top: 0.9rem; }

/* the answer, at the size an answer deserves */
.k-figure { display: flex; flex-direction: column; margin: 0 0 0.9rem !important; }
.k-figure span {
  font-family: var(--display); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--fold-label);
}
.k-figure strong {
  font-family: var(--display); font-weight: 800; color: var(--fold-ink);
  font-size: clamp(1.65rem, 1.1rem + 2vw, 2.4rem); line-height: 1.05;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  margin: 0.15rem 0;
}

/* the working, so the figure is checkable rather than asserted */
/* ⚠ A <dl> in a three-column grid places dt, dd, dt, dd, dt, dd in source
   order, so the first row came out "Plan area · 72 m² · Slope area" and the
   second "94 m² · Difference · 31% more" — every label beside the wrong figure.
   Explicit rows keep each term above its own value. */
.k-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 0.2rem 1rem; margin: 0; padding-top: 0.9rem;
  border-top: 1px solid var(--fold-card-edge);
}
.k-stats dt { grid-row: 1; }
.k-stats dd { grid-row: 2; }
.k-stats dt {
  font-family: var(--display); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--fold-label);
}
.k-stats dd {
  margin: 0.2rem 0 0; font-family: var(--display); font-weight: 700;
  font-size: 1.05rem; color: var(--fold-ink); font-variant-numeric: tabular-nums;
}

@media (min-width: 30rem) {
  .k-fields { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 48rem) {
  .k-fields { grid-template-columns: repeat(3, minmax(0, 1fr)) 1.4fr auto; }
  .k-field-wide { grid-column: auto; }
  .k-field-go button { width: auto; }
  .k-figure { flex-direction: row; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
  .k-figure strong { order: -1; margin: 0; }
}

/* ── tables, accordions, cards ─────────────────────────────────────────── */

table { border-collapse: collapse; width: 100%; margin: 0 0 1rem; font-size: 0.97rem; }
th, td { text-align: left; padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--rule-soft); }
thead th {
  font-family: var(--display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-soft);
  border-bottom: 2px solid var(--rule);
}
tbody th { font-weight: 600; }
.k-compare { overflow-x: auto; }

details { border-top: 1px solid var(--rule-soft); padding: 0.85rem 0; }
details:first-of-type { border-top: 0; }
summary { font-family: var(--display); font-weight: 600; cursor: pointer; color: var(--ink); }
summary::marker { color: var(--clay); }
details p { margin: 0.6rem 0 0; color: var(--slate); }

.k-bridges ul, .k-evidence ul {
  display: grid; gap: 0.85rem; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.k-bridges li {
  max-width: none; margin: 0; padding: 0.9rem 1rem;
  background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 3px;
}
.k-bridges li a { font-family: var(--display); font-weight: 600; text-decoration: none; }
.k-bridges li a:hover { text-decoration: underline; }
.k-evidence li { max-width: none; }
figure { margin: 0; }
figcaption { font-size: 0.85rem; color: var(--slate-mid); margin-top: 0.45rem; }

.k-nap { background: var(--clay-tint) !important; border-color: #ecd8c9 !important; }
.k-nap p { font-size: 1rem; color: var(--slate); }
.k-nap .k-tel { font-weight: 600; }

/* structural section indexes — containers the map does not define */
/* ── section containers: /advice/, /advice/faults/, /areas/ ────────────────
   ⚠ Their <main> carried no k-t-* class, so not one container rule matched and
   the whole index ran edge to edge with no padding — the only template on the
   site outside the grid everything else aligns to. It uses the same fold band
   and the same container as Core and Outer now. */
.k-t-section .k-fold { background: var(--lead); color: #fff;
  padding: clamp(2.25rem, 5vw, 3.5rem) var(--pad) clamp(1.75rem, 4vw, 2.75rem); }
.k-t-section .k-fold-inner { max-width: var(--container); margin: 0 auto; }
.k-t-section .k-fold h1 { color: #fff; max-width: 20ch; }
.k-t-section .k-centerpiece { color: #ccd4dc; max-width: 56ch; margin-bottom: 0; }
.k-t-section .k-section-index {
  padding: clamp(2.25rem, 4.5vw, 3.5rem) var(--pad);
  background: var(--paper); margin: 0; border: 0; border-radius: 0;
}

.k-section-index ul { max-width: var(--container); margin: 0 auto;
  display: grid; gap: 0.6rem; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.k-section-index li { margin: 0; max-width: none; padding: 1rem 1.15rem;
  background: var(--panel); border: 1px solid var(--rule-soft); border-radius: 4px; }
.k-section-index li a { display: block; font-family: var(--display); font-weight: 700;
  font-size: 1rem; text-decoration: none; color: var(--clay-dark); margin-bottom: 0.3rem; }
.k-section-index li a:hover { color: var(--ink); }
.k-section-index li span { color: var(--slate); font-size: 0.92rem; line-height: 1.5; }

/* ── layout variants — the visual anti-template rule ───────────────────────
   Classification runs on visual and layout embeddings, so pages sharing an
   archetype AND a layout cluster as one template however well the copy differs.
   Each rule gives one page a different fold geometry. */

@media (min-width: 64rem) {
  .k-v-service-grid .k-fold h1,
  .k-v-hero .k-fold h1 { max-width: 17ch; }
  .k-v-telephone .k-fold h1 { max-width: 14ch; font-size: clamp(1.8rem, 1rem + 2.7vw, 2.6rem); }

  /* split — the centerpiece sits beside the component */
  .k-v-two-column .k-fold-inner,
  .k-v-diagram-split .k-fold-inner,
  .k-v-matrix .k-fold-inner,
  .k-v-layer-diagram .k-fold-inner,
  .k-v-load-diagram .k-fold-inner,
  .k-v-calculator .k-fold-inner { display: grid; grid-template-columns: 1.1fr 1fr;
    gap: 0 2.5rem; align-items: start; }
  .k-v-two-column .k-fold h1, .k-v-diagram-split .k-fold h1,
  .k-v-matrix .k-fold h1, .k-v-layer-diagram .k-fold h1,
  .k-v-load-diagram .k-fold h1, .k-v-calculator .k-fold h1 { grid-column: 1 / -1; }

  /* bleed — the component runs wider than the reading column */
  .k-v-filmstrip .k-fold-inner > section,
  .k-v-full-bleed .k-fold-inner > section,
  .k-v-photo-pair .k-fold-inner > section,
  .k-v-step-strip .k-fold-inner > section,
  .k-v-sequence .k-fold-inner > section { max-width: none; }

  /* grids differ per page so the silhouettes do too */
  .k-v-service-grid .k-bridges ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k-v-status-list .k-bridges ul,
  .k-v-three-card .k-bridges ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .k-v-diagram-split .k-bridges ul, .k-v-matrix .k-bridges ul,
  .k-v-full-bleed .k-bridges ul, .k-v-load-diagram .k-bridges ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-v-cost-table table { font-variant-numeric: tabular-nums; }
}

/* ── the eight district centerpieces ──────────────────────────────────────
   LAUNCH-PLAN.md §2.5. Until these existed all eight district pages rendered
   one fold signature between them: coverage check, then a stock card that
   rendered nothing. Each of these gives one district its own geometry, and
   each is a working GET form — the highlight below is server-rendered state,
   not script. */

.k-street-wave, .k-junctions, .k-designation, .k-slope-split,
.k-matrix, .k-eras, .k-valley, .k-portfolio { margin: 1.6rem 0 0; }

.k-street-wave form, .k-junctions form, .k-designation form, .k-slope-split form,
.k-matrix form, .k-eras form, .k-valley form, .k-portfolio form { margin-bottom: 1.1rem; }

.k-street-wave fieldset, .k-junctions fieldset, .k-designation fieldset,
.k-slope-split fieldset, .k-eras fieldset, .k-valley fieldset,
.k-portfolio fieldset { border: 0; padding: 0; margin: 0 0 0.85rem; }
.k-junctions legend, .k-designation legend, .k-slope-split legend, .k-eras legend,
.k-valley legend, .k-portfolio legend {
  padding: 0; margin-bottom: 0.6rem; font-family: var(--display);
  font-weight: 600; color: var(--fold-ink);
}

/* The chosen row. One rule, eight components — the state is the same idea
   everywhere and only the container geometry differs. */
.k-wave .k-on, .k-junction-list .k-on, .k-designation-list .k-on,
.k-era-list .k-on, .k-slopes .k-on {
  border-color: var(--fold-on-edge); background: var(--fold-on);
}
.k-matrix tr.k-on { background: var(--fold-on); }
.k-matrix tr.k-on th { color: var(--fold-on-ink); }

/* Sutton Coldfield — the street wave, laid out as one */
.k-wave { display: grid; gap: 0.5rem; padding: 0; margin: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); counter-reset: none; }
.k-wave li { margin: 0; max-width: none; padding: 0.7rem 0.8rem; font-size: 0.92rem;
  background: var(--fold-card); border: 1px solid var(--fold-card-edge); border-radius: 3px; }
.k-wave li strong { display: block; font-family: var(--display); margin-bottom: 0.2rem; }

/* Harborne — numbered junctions beside the diagram column */
.k-junctions label { display: inline-flex; align-items: baseline; gap: 0.4rem;
  margin: 0 1rem 0.4rem 0; }
.k-junction-list { padding: 0; margin: 0; list-style: none; counter-reset: junction; }
.k-junction-list li { counter-increment: junction; position: relative; margin: 0 0 0.55rem;
  max-width: none; padding: 0.7rem 0.9rem 0.7rem 2.6rem;
  background: var(--fold-card); border: 1px solid var(--fold-card-edge); border-radius: 3px; }
.k-junction-list li::before {
  content: counter(junction); position: absolute; left: 0.85rem; top: 0.7rem;
  width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--clay);
  color: #fff; font-size: 0.78rem; font-weight: 700; text-align: center; line-height: 1.3rem;
}

/* Edgbaston — a checked status list, closer to L9 than L8 */
.k-designation label { width: min(100%, 26rem); }
.k-designation-list { padding: 0; margin: 0; list-style: none; }
.k-designation-list li { margin: 0; max-width: none; padding: 0.7rem 0.9rem;
  background: var(--fold-card); border: 1px solid var(--fold-card-edge); border-top-width: 0; }
.k-designation-list li:first-child { border-top-width: 1px; border-radius: 3px 3px 0 0; }
.k-designation-list li:last-child { border-radius: 0 0 3px 3px; }

/* Moseley — mirrored panels. The symmetry is the argument. */
.k-slope-split label { display: inline-flex; align-items: baseline; gap: 0.4rem;
  margin: 0 1rem 0.4rem 0; }
.k-slopes { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.k-slopes > div { padding: 0.95rem 1.05rem; background: var(--fold-card);
  border: 1px solid var(--fold-card-edge); border-radius: 3px; }
.k-slopes h3 { margin: 0 0 0.4rem; font-size: 1.02rem; }
.k-slopes p { margin: 0 0 0.5rem; font-size: 0.93rem; }
.k-slopes p:last-child { margin-bottom: 0; }

/* Solihull — the only tabular district centerpiece */
.k-matrix table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.k-matrix th, .k-matrix td { text-align: left; vertical-align: top;
  padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--fold-card-edge); }
.k-matrix thead th { font-family: var(--display); font-size: 0.8rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--fold-label); }

/* Erdington — three cards, and the fold is a branch rather than a statement */
.k-era-cards { display: grid; gap: 0.75rem; grid-template-columns: 1fr; margin-bottom: 0.9rem; }
.k-era-cards label { display: block; padding: 0.85rem 0.95rem; cursor: pointer;
  background: var(--fold-card); border: 1px solid var(--fold-card-edge); border-radius: 3px; }
.k-era-cards label.k-on { border-color: var(--fold-on-edge); background: var(--fold-on); }
.k-era-cards strong { display: block; font-family: var(--display); margin: 0.35rem 0 0.2rem; }
.k-era-cards span { display: block; font-size: 0.88rem; color: var(--fold-label); }
.k-era-list { padding: 0; margin: 0; list-style: none; }
.k-era-list li { margin: 0 0 0.5rem; max-width: none; padding: 0.7rem 0.9rem;
  background: var(--fold-card); border: 1px solid var(--fold-card-edge); border-radius: 3px; }

/* Kings Heath — the most diagram-heavy district page */
.k-valley label { display: inline-flex; align-items: baseline; gap: 0.4rem;
  margin: 0 1rem 0.4rem 0; }
.k-valley-list { margin: 0; display: grid; gap: 0 1.1rem;
  grid-template-columns: max-content 1fr; align-items: baseline; }
.k-valley-list dt { font-family: var(--display); font-weight: 600; color: var(--fold-ink);
  padding: 0.7rem 0 0.7rem 0.85rem; border-left: 3px solid var(--fold-card-edge); }
.k-valley-list dd { margin: 0; padding: 0.7rem 0; font-size: 0.94rem; color: var(--fold-muted); }
.k-valley-list dt.k-on { border-left-color: var(--fold-on-edge); color: var(--fold-on-ink); }

/* Selly Oak — the only district page that opens with a form */
.k-portfolio label { display: block; font-size: 0.85rem; color: var(--fold-label);
  margin: 0 0 0.2rem; }
.k-portfolio input[type="text"] { width: 100%; margin-bottom: 0.55rem; }

@media (min-width: 48rem) {
  .k-slopes { grid-template-columns: 1fr 1fr; }
  .k-era-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k-valley-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k-portfolio fieldset { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64rem) {
  /* ⚠ SPECIFICITY. `.k-t-core .k-fold-inner` further down this file sets the
     Core fold's two-column grid and the explicit grid-areas for the hero. It
     has the same specificity as `.k-v-matrix .k-fold-inner` and comes later, so
     every variant rule written as a bare `.k-v-*` descendant loses on Core
     pages and does nothing at all. The compound form — both classes are on
     <main> — wins, which is why these are written this way. */

  .k-t-core.k-v-filmstrip .k-fold-inner,
  .k-t-core.k-v-diagram-split .k-fold-inner,
  .k-t-core.k-v-status-list .k-fold-inner,
  .k-t-core.k-v-mirror-split .k-fold-inner,
  .k-t-core.k-v-matrix .k-fold-inner,
  .k-t-core.k-v-three-card .k-fold-inner,
  .k-t-core.k-v-full-bleed .k-fold-inner,
  .k-t-core.k-v-multi-address .k-fold-inner {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  }

  /* The coverage check keeps the right column beside the headline. The
     district's own centerpiece takes the full width beneath both, because it
     is the block that has to differ and it needs the measure to do it. */
  .k-t-core.k-v-filmstrip .k-fold-inner > .k-coverage,
  .k-t-core.k-v-diagram-split .k-fold-inner > .k-coverage,
  .k-t-core.k-v-status-list .k-fold-inner > .k-coverage,
  .k-t-core.k-v-mirror-split .k-fold-inner > .k-coverage,
  .k-t-core.k-v-matrix .k-fold-inner > .k-coverage,
  .k-t-core.k-v-three-card .k-fold-inner > .k-coverage,
  .k-t-core.k-v-full-bleed .k-fold-inner > .k-coverage,
  .k-t-core.k-v-multi-address .k-fold-inner > .k-coverage { grid-area: 1 / 2 / 3 / 3; }

  /* ⚠ The Core fold's second column is 19–23rem — it is sized for the call-to-
     action card, not for a component. The calculator was auto-placed into it
     and rendered four numeric fields and a select inside 23rem: the labels
     wrapped to three lines each and the covering select showed "Cc". Anything
     that is a page's own centrepiece takes the full band beneath the headline. */
  /* Two components in one fold cannot both claim row 3. The calculator takes
     it and the table follows on row 4. */
  .k-t-core .k-fold-inner > .k-calculator { grid-area: 3 / 1 / 4 / 3; max-width: none; }
  .k-t-core .k-fold-inner > .k-compare,
  .k-t-core .k-fold-inner > .k-symptoms { grid-area: 4 / 1 / 5 / 3; max-width: none; }

  .k-t-core .k-fold-inner > .k-street-wave,
  .k-t-core .k-fold-inner > .k-junctions,
  .k-t-core .k-fold-inner > .k-designation,
  .k-t-core .k-fold-inner > .k-slope-split,
  .k-t-core .k-fold-inner > .k-matrix,
  .k-t-core .k-fold-inner > .k-eras,
  .k-t-core .k-fold-inner > .k-valley,
  .k-t-core .k-fold-inner > .k-portfolio { grid-area: 3 / 1 / 4 / 3; max-width: none; }

  /* And then each one is shaped differently inside that band. */
  .k-v-filmstrip .k-wave { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .k-v-mirror-split .k-slopes { gap: 2.25rem; }
  .k-v-three-card .k-era-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k-v-full-bleed .k-valley-list { grid-template-columns: 15rem 1fr; }
  .k-v-matrix .k-matrix table { font-size: 0.94rem; }

  /* Harborne: the drawing left, the numbered list right — the only district
     page that splits its fold vertically. Kings Heath: full bleed, at twice
     the height of any other district centerpiece. */
  .k-v-diagram-split .k-junctions {
    display: grid; gap: 0 2rem; grid-template-columns: 1.05fr 1fr; align-items: start;
  }
  .k-v-diagram-split .k-junctions > p { grid-column: 1 / -1; }
  .k-v-diagram-split .k-junctions > figure { grid-row: 2 / 5; }
  .k-v-full-bleed .k-valley > figure { max-width: 44rem; margin: 0 auto 1.2rem; }

  /* Harborne splits its own band; Edgbaston keeps a narrow status column,
     which is closer to an L9 Regulatory fold than to a district one. */
  .k-v-diagram-split .k-junction-list {
    display: grid; gap: 0.6rem; grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .k-v-diagram-split .k-junction-list li { margin: 0; }
  .k-v-status-list .k-designation-list { max-width: 40rem; }

  /* Selly Oak's is structurally an L10 conversion fold wearing an L8 plan. */
  .k-v-multi-address .k-portfolio fieldset { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Outer pages carrying a two-column variant need the wide measure; the
     reading column is 44rem and two columns inside it are 20rem each. */
  .k-t-outer.k-v-layer-diagram .k-fold-inner,
  .k-t-outer.k-v-load-diagram .k-fold-inner,
  .k-t-outer.k-v-two-column .k-fold-inner,
  .k-t-outer.k-v-photo-pair .k-fold-inner,
  .k-t-outer.k-v-step-strip .k-fold-inner,
  .k-t-outer.k-v-branch .k-fold-inner { max-width: var(--wide); }
}

/* ── the service centrepieces ─────────────────────────────────────────────
   LAUNCH-PLAN.md §2.5, the L1 cluster. Twenty-one service pages carried the
   same fold and nothing in it about the service. Ten shapes, keyed to the shape
   of the decision each page puts to its reader. */

.k-compare-two, .k-methods, .k-scope, .k-gates, .k-stack,
.k-models, .k-triage, .k-per-year, .k-deck, .k-sequence { margin: 1.6rem 0 0; }

.k-compare-two form, .k-methods form, .k-scope form, .k-gates form, .k-stack form,
.k-models form, .k-triage form, .k-per-year form, .k-deck form,
.k-sequence form { margin: 0 0 1.1rem; }
.k-compare-two fieldset, .k-methods fieldset, .k-scope fieldset, .k-gates fieldset,
.k-stack fieldset, .k-models fieldset, .k-triage fieldset, .k-deck fieldset,
.k-sequence fieldset { border: 0; padding: 0; margin: 0 0 0.75rem; }
.k-compare-two legend, .k-methods legend, .k-scope legend, .k-gates legend,
.k-stack legend, .k-models legend, .k-triage legend, .k-deck legend,
.k-sequence legend { padding: 0; margin-bottom: 0.55rem;
  font-family: var(--display); font-weight: 600; color: var(--fold-ink); }
/* An option is a control and a line of text that may wrap to three lines. A
   baseline-aligned inline row puts the second line under the control; a
   two-column grid keeps it beside it, and a shared column width stops six
   options running ragged across the band. */
.k-compare-two label, .k-gates label, .k-scope label, .k-models label,
.k-deck label, .k-sequence label, .k-methods label, .k-stack label,
.k-differential label, .k-verdict label, .k-anatomy label, .k-chain label,
.k-signs label, .k-response label, .k-junctions label, .k-designation label,
.k-slope-split label, .k-valley label, .k-eras label {
  display: inline-grid; grid-template-columns: auto 1fr; gap: 0 0.55rem;
  align-items: start; vertical-align: top; line-height: 1.45;
  width: min(100%, 21rem); margin: 0 1.25rem 0.65rem 0;
}

/* two named approaches, one of which is the wrong one */
.k-two { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.k-two > div { padding: 0.95rem 1.05rem; background: var(--fold-card);
  border: 1px solid var(--fold-card-edge); border-radius: 3px; }
.k-two > div.k-on { border-color: var(--fold-on-edge); background: var(--fold-on); }
.k-two h3 { margin: 0 0 0.4rem; font-size: 1.02rem; }
.k-two p { margin: 0 0 0.5rem; font-size: 0.93rem; }
.k-two p:last-child { margin-bottom: 0; }

/* several methods, each with the constraint that decides it */
.k-method-list, .k-deck-list { margin: 0; display: grid; gap: 0 1.2rem;
  grid-template-columns: max-content 1fr; align-items: baseline; }
.k-method-list dt, .k-deck-list dt { font-family: var(--display); font-weight: 600;
  color: var(--fold-ink); padding: 0.65rem 0 0.65rem 0.85rem;
  border-left: 3px solid var(--fold-card-edge); }
.k-method-list dd, .k-deck-list dd { margin: 0; padding: 0.65rem 0;
  font-size: 0.94rem; color: var(--fold-muted); }
.k-method-list dd em, .k-deck-list dd em { color: var(--fold-on-ink); font-style: normal; }
.k-method-list dt.k-on, .k-deck-list dt.k-on { border-left-color: var(--fold-on-edge); color: var(--fold-on-ink); }

/* the scope, in the order it happens */
.k-scope-list { counter-reset: k-scope; list-style: none; padding: 0; margin: 0; }
.k-scope-list li { counter-increment: k-scope; position: relative; margin: 0 0 0.45rem;
  max-width: none; padding: 0.6rem 0.9rem 0.6rem 2.5rem; background: var(--fold-card);
  border: 1px solid var(--fold-card-edge); border-radius: 3px; font-size: 0.95rem; }
.k-scope-list li::before { content: counter(k-scope); position: absolute; left: 0.8rem;
  top: 0.6rem; width: 1.25rem; height: 1.25rem; border-radius: 2px;
  background: var(--fold-card-edge); color: var(--fold-ink); font-size: 0.75rem;
  font-weight: 700; text-align: center; line-height: 1.25rem; }
.k-scope-list li.k-on { border-color: var(--fold-on-edge); background: var(--fold-on); }
.k-scope-list li.k-on::before { background: var(--clay); color: #fff; }

/* the gates that decide feasibility */
.k-gate-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem;
  grid-template-columns: 1fr; }
.k-gate-list li { margin: 0; max-width: none; padding: 0.75rem 0.9rem;
  background: var(--fold-card); border-left: 3px solid var(--fold-card-edge); font-size: 0.94rem; }
.k-gate-list li strong { display: block; font-family: var(--display); margin-bottom: 0.2rem; }
.k-gate-list li.k-on { border-left-color: var(--fold-on-edge); background: var(--fold-on); }

/* the build-up, printed top layer first */
.k-layers { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.k-layers li { margin: 0 0 2px; max-width: none; padding: 0.5rem 0.9rem;
  background: var(--fold-card); border: 1px solid var(--fold-card-edge);
  font-size: 0.92rem; font-family: var(--display); }
.k-layers li:first-child { border-radius: 3px 3px 0 0; }
.k-layers li:last-child { border-radius: 0 0 3px 3px; background: var(--fold-card); }
.k-stack p.k-on { border-left: 3px solid var(--clay); padding-left: 0.85rem; }

/* tables: the maintenance model, the stack triage, the arithmetic */
.k-models table, .k-triage table, .k-per-year table {
  width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.k-models th, .k-models td, .k-triage th, .k-triage td,
.k-per-year th, .k-per-year td { text-align: left; vertical-align: top;
  padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--fold-card-edge); }
.k-models thead th, .k-triage thead th, .k-per-year thead th {
  font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--fold-label); }
.k-models tr.k-on, .k-triage tr.k-on, .k-per-year tr.k-on { background: var(--fold-on); }
.k-per-year table { font-variant-numeric: tabular-nums; }

/* the stages, and what the last one leaves */
.k-stages { list-style: none; counter-reset: k-stage; padding: 0; margin: 0;
  display: grid; gap: 0.6rem; grid-template-columns: 1fr; }
.k-stages li { counter-increment: k-stage; margin: 0; max-width: none;
  padding: 0.8rem 0.9rem 0.8rem 1rem; background: var(--fold-card);
  border-top: 3px solid var(--fold-card-edge); font-size: 0.93rem; }
.k-stages li::before { content: "Stage " counter(k-stage); display: block;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fold-label); margin-bottom: 0.3rem; }
.k-stages li strong { display: block; font-family: var(--display); margin-bottom: 0.2rem; }
.k-stages li.k-on { border-top-color: var(--fold-on-edge); background: var(--fold-on); }

@media (min-width: 48rem) {
  .k-two { grid-template-columns: 1fr 1fr; }
  .k-gate-list { grid-template-columns: 1fr 1fr; }
  .k-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  /* The service centrepiece takes the full band beneath the hero, which is
     the row the hero's trust strip would otherwise have to itself. */
  .k-t-core .k-fold-inner > .k-compare-two,
  .k-t-core .k-fold-inner > .k-methods,
  .k-t-core .k-fold-inner > .k-scope,
  .k-t-core .k-fold-inner > .k-gates,
  .k-t-core .k-fold-inner > .k-stack,
  .k-t-core .k-fold-inner > .k-models,
  .k-t-core .k-fold-inner > .k-triage,
  .k-t-core .k-fold-inner > .k-per-year,
  .k-t-core .k-fold-inner > .k-deck,
  .k-t-core .k-fold-inner > .k-sequence { grid-area: 5 / 1 / 6 / 3; max-width: none; }

  .k-v-two-panel .k-two { gap: 2rem; }
  .k-v-method-rail .k-method-list { grid-template-columns: 15rem 1fr; }
  .k-v-scope-wide .k-scope-list { display: grid; gap: 0.5rem;
    grid-template-columns: 1fr 1fr; }
  .k-v-scope-wide .k-scope-list li { margin: 0; }
  .k-v-gate-grid .k-gate-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-v-stack .k-layers { max-width: 30rem; }
  .k-v-load-diagram .k-deck-list { grid-template-columns: 18rem 1fr; }
  .k-v-cost-table .k-per-year table { font-size: 0.96rem; }
  .k-v-triage-wide .k-triage table { font-size: 0.96rem; }
  .k-v-triage-wide .k-triage thead th:first-child { width: 30%; }
}

/* ── the fault centrepieces ───────────────────────────────────────────────
   LAUNCH-PLAN.md §2.5, the L4 cluster. Thirteen diagnostic pages shared one
   fold. AUTHORSHIP.md §3 governs the tone: no red, no alarm colouring, no
   warning iconography. A fault is stated, not staged. */

.k-differential, .k-verdict, .k-anatomy, .k-chain, .k-signs,
.k-response { margin: 1.6rem 0 0; }
.k-differential form, .k-verdict form, .k-anatomy form, .k-chain form,
.k-signs form, .k-response form { margin: 0 0 1.1rem; }
.k-differential fieldset, .k-verdict fieldset, .k-anatomy fieldset,
.k-chain fieldset, .k-signs fieldset, .k-response fieldset {
  border: 0; padding: 0; margin: 0 0 0.75rem; }
.k-differential legend, .k-verdict legend, .k-anatomy legend, .k-chain legend,
.k-signs legend, .k-response legend { padding: 0; margin-bottom: 0.55rem;
  font-family: var(--display); font-weight: 600; color: var(--fold-ink); }


/* this, or the thing it is mistaken for */
.k-candidates { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 1.1rem; }
.k-candidates > div { padding: 0.9rem 1rem; background: var(--fold-card);
  border: 1px solid var(--fold-card-edge); border-radius: 3px; }
.k-candidates > div.k-on { border-color: var(--fold-on-edge); background: var(--fold-on); }
.k-candidates h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.k-candidates p { margin: 0; font-size: 0.93rem; }
.k-tests { margin: 0; display: grid; gap: 0 1.1rem;
  grid-template-columns: max-content 1fr; align-items: baseline; }
.k-tests dt { font-family: var(--display); font-weight: 600; color: var(--fold-ink);
  padding: 0.55rem 0; }
.k-tests dd { margin: 0; padding: 0.55rem 0; font-size: 0.93rem; color: var(--fold-muted);
  border-bottom: 1px solid var(--fold-card-edge); }
.k-tests dt { border-bottom: 1px solid var(--fold-card-edge); }

/* harmless, or worth doing — the pages that decline the sale */
.k-verdict > p { padding: 0.75rem 0 0.75rem 0.9rem; margin: 0 0 0.5rem;
  border-left: 3px solid var(--fold-card-edge); font-size: 0.95rem; }
.k-verdict > p.k-on { border-left-color: var(--fold-on-edge); background: var(--fold-on); }
.k-verdict > p strong { color: var(--fold-ink); font-family: var(--display); }
.k-factors { list-style: none; padding: 0; margin: 0.9rem 0 0; }
.k-factors li { margin: 0 0 0.35rem; max-width: none; font-size: 0.9rem;
  color: var(--fold-label); }

/* the detail that works, against the one somebody used instead */
.k-wrong { padding: 0.8rem 0.95rem; margin: 0 0 1rem; background: var(--fold-card);
  border: 1px dashed var(--fold-card-edge); font-size: 0.94rem; }
.k-wrong strong { display: block; font-family: var(--display); color: var(--fold-ink);
  margin-bottom: 0.2rem; }
.k-right { list-style: none; padding: 0; margin: 0 0 1rem;
  display: grid; gap: 0.55rem; grid-template-columns: 1fr; }
.k-right li { margin: 0; max-width: none; padding: 0.7rem 0.9rem; font-size: 0.93rem;
  background: var(--fold-card); border: 1px solid var(--fold-card-edge); border-radius: 3px; }
.k-right li strong { display: block; font-family: var(--display); margin-bottom: 0.15rem; }
.k-right li.k-on { border-color: var(--fold-on-edge); background: var(--fold-on); }

/* what follows, in order */
.k-chain-list { counter-reset: k-link; list-style: none; padding: 0; margin: 0 0 1rem; }
.k-chain-list li { counter-increment: k-link; position: relative; margin: 0 0 0.45rem;
  max-width: none; padding: 0.7rem 0.9rem 0.7rem 2.4rem; font-size: 0.93rem;
  background: var(--fold-card); border: 1px solid var(--fold-card-edge); border-radius: 3px; }
.k-chain-list li::before { content: counter(k-link); position: absolute;
  left: 0.8rem; top: 0.7rem; font-family: var(--display); font-weight: 700;
  font-size: 0.85rem; color: var(--fold-label); }
.k-chain-list li.k-on { border-color: var(--fold-on-edge); background: var(--fold-on); }
.k-chain-list li strong { display: block; font-family: var(--display); margin-bottom: 0.15rem; }

/* count first, then the verdict for that count */

.k-count { padding: 0.9rem 1rem; background: var(--fold-on);
  border: 1px solid #ecd8c9; border-radius: 3px; font-size: 0.96rem; }
.k-count strong { font-family: var(--display); color: var(--fold-ink); }

/* make-safe first, decisions afterwards */
.k-response-list { counter-reset: k-step; list-style: none; padding: 0; margin: 0 0 1rem;
  display: grid; gap: 0.6rem; grid-template-columns: 1fr; }
.k-response-list li { counter-increment: k-step; margin: 0; max-width: none;
  padding: 0.8rem 0.9rem; font-size: 0.93rem; background: var(--fold-card);
  border-top: 3px solid var(--fold-card-edge); }
.k-response-list li::before { content: "Step " counter(k-step); display: block;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fold-label); margin-bottom: 0.3rem; }
.k-response-list li strong { display: block; font-family: var(--display); margin-bottom: 0.15rem; }

@media (min-width: 48rem) {
  .k-candidates { grid-template-columns: 1fr 1fr; }
  .k-right { grid-template-columns: 1fr 1fr; }
  .k-response-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .k-signs label { display: inline-flex; width: 48%; }
}

@media (min-width: 64rem) {
  .k-t-outer .k-fold-inner > .k-differential,
  .k-t-outer .k-fold-inner > .k-verdict,
  .k-t-outer .k-fold-inner > .k-anatomy,
  .k-t-outer .k-fold-inner > .k-chain,
  .k-t-outer .k-fold-inner > .k-signs,
  .k-t-outer .k-fold-inner > .k-response { max-width: none; }
  .k-v-differential .k-fold-inner { max-width: var(--wide); }
  .k-v-differential .k-tests { grid-template-columns: 17rem 1fr; }
  .k-v-verdict .k-fold-inner { max-width: 52rem; }
  .k-v-anatomy .k-fold-inner { max-width: var(--wide); }
  .k-v-anatomy .k-right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-v-chain .k-fold-inner { max-width: 54rem; }
  .k-v-signs .k-fold-inner { max-width: 50rem; }
  .k-v-response .k-fold-inner { max-width: var(--wide); }
}

/* ⚠ EVERY BAND RULE BELOW IS SCOPED TO .k-t-core, AND THAT IS LOAD-BEARING.
   `.k-body > section` — the older micro-component rule — is one class and one
   element, which outranks a bare `.k-sec-how`. It painted the dark band white,
   the warm band white, and imposed its own padding on all six. Two classes beat
   one class and an element, so the scope is what makes these apply at all. */

/* ── Core: the eight-section landing page ─────────────────────────────────
   Eight section TYPES, not one type eight times. The first attempt put borders
   round each question and left the page reading as a styled FAQ, which is what
   it was. See inc/landing.php for what feeds each band. */

.k-t-core .k-body { max-width: none; padding: 0; }
.k-t-core .k-sec{ padding: clamp(2.75rem, 5.5vw, 4.5rem) var(--pad); background: var(--panel); }
.k-t-core .k-sec-in{ max-width: var(--container); margin: 0 auto; }
.k-eyebrow-sec {
  margin: 0 0 0.85rem; font-family: var(--display); font-size: 0.74rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay);
}
.k-t-core .k-sec h2, .k-t-core .k-sec h3{
  margin: 0 0 1.1rem; max-width: 24ch;
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.15rem); line-height: 1.12;
  letter-spacing: -0.022em;
}
.k-t-core .k-sec h2::after, .k-t-core .k-sec h3::after{
  content: ""; display: block; width: 2.5rem; height: 3px;
  background: var(--clay); margin-top: 0.9rem;
}
.k-t-core .k-sec .k-lead{
  max-width: 48ch; margin: 0 0 1.3rem; color: var(--ink);
  font-size: clamp(1.06rem, 0.98rem + 0.4vw, 1.24rem); line-height: 1.5;
}
.k-t-core .k-sec .k-lead strong{ font-weight: 600; }
.k-t-core .k-sec p{ color: var(--slate); max-width: 62ch; }
.k-t-core .k-sec-open{ padding-bottom: 0; }

/* 2 · what we fix — the facts as service cards */
.k-t-core .k-sec-fix{ background: var(--panel); }
.k-t-core .k-sec-fix ul.k-spec{
  display: grid; gap: 0.9rem; border: 0; margin: 1.6rem 0 0; padding: 0;
  grid-template-columns: 1fr;
}
.k-t-core .k-sec-fix ul.k-spec > li{
  display: block; margin: 0; padding: 1.25rem 1.35rem; border: 0;
  background: var(--paper); border-left: 3px solid var(--clay); border-radius: 4px;
  font-size: 0.95rem; color: var(--slate); line-height: 1.55;
}
.k-t-core .k-sec-fix ul.k-spec > li > strong{
  display: block; margin-bottom: 0.35rem; color: var(--ink);
  font-family: var(--display); font-size: 1rem; font-weight: 700;
  letter-spacing: 0; text-transform: none;
}
.k-t-core .k-sec-fix > .k-sec-in > ul:not(.k-spec){
  list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.k-t-core .k-sec-fix > .k-sec-in > ul:not(.k-spec) > li{
  position: relative; margin: 0; max-width: none; padding: 0.85rem 1rem 0.85rem 2.2rem;
  background: var(--paper); border-radius: 3px; color: var(--slate); font-size: 0.94rem;
}
.k-t-core .k-sec-fix > .k-sec-in > ul:not(.k-spec) > li::before{
  content: ""; position: absolute; left: 0.95rem; top: 1.2rem;
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--clay);
}

/* 3 · how it works — the mechanism, numbered, on the dark band */
.k-t-core .k-sec-how{ background: var(--lead); color: #fff; }
.k-t-core .k-sec-how .k-eyebrow-sec{ color: #d2793f; }
.k-t-core .k-sec-how h3, .k-t-core .k-sec-how .k-border{
  color: #fff; font-family: var(--display); font-weight: 700; font-style: normal;
  border: 0; padding: 0; margin: 0 0 1.6rem; max-width: 26ch;
  font-size: clamp(1.4rem, 1.05rem + 1.5vw, 1.95rem); line-height: 1.15;
}
.k-t-core .k-sec-how .k-border::after{
  content: ""; display: block; width: 2.5rem; height: 3px;
  background: var(--clay); margin-top: 0.9rem;
}
.k-mechanism {
  list-style: none; counter-reset: k-mech; padding: 0; margin: 0;
  display: grid; gap: 2rem; grid-template-columns: 1fr;
}
.k-mechanism > li {
  counter-increment: k-mech; position: relative; margin: 0; max-width: none;
  padding-top: 3rem; color: #b8c2cc; font-size: 0.98rem; line-height: 1.55;
}
.k-mechanism > li::before {
  content: counter(k-mech, decimal-leading-zero); position: absolute; top: 0; left: 0;
  font-family: var(--display); font-weight: 800; font-size: 2.3rem;
  line-height: 1; color: #3c4650;
}

/* 4 · what it costs — its own warm band */
.k-t-core .k-sec-cost{ background: var(--clay-tint); }
.k-price-rows { list-style: none; padding: 0; margin: 1.3rem 0 0; }
.k-price-rows > li {
  margin: 0; max-width: none; padding: 0.95rem 0; font-size: 0.98rem; color: var(--slate);
  border-bottom: 1px solid #eddcd0; display: grid; gap: 0.2rem 2rem;
  grid-template-columns: 1fr;
}
.k-price-rows > li > strong {
  color: var(--clay-dark); font-family: var(--display); font-size: 0.98rem;
}

/* 5 · straight answers — compact, two columns, secondary */
.k-t-core .k-sec-qa{ background: var(--paper); }
.k-qa-grid { display: grid; gap: 1.9rem 3rem; grid-template-columns: 1fr; margin-top: 1.4rem; }
/* ⚠ Scoped to match `.k-t-core .k-sec h2`, which is two classes and an element.
   A bare `.k-qa-grid h2` loses to it, and the answers section rendered its
   questions at full section size with the clay rule under each — which is
   exactly the styled-FAQ look this restructure exists to remove. */
.k-t-core .k-sec-qa .k-qa-grid h2 {
  font-size: 1.06rem; margin: 0 0 0.45rem; max-width: none; line-height: 1.35;
  letter-spacing: -0.01em; font-weight: 700;
}
.k-t-core .k-sec-qa .k-qa-grid h2::after { display: none; }
.k-t-core .k-sec-qa .k-qa-grid .k-lead,
.k-t-core .k-sec-qa .k-qa-grid p {
  font-size: 0.96rem; line-height: 1.55; color: var(--slate); max-width: none; margin: 0 0 0.6rem;
}
.k-t-core .k-sec-qa .k-qa-grid .k-lead strong { font-weight: 600; color: var(--ink); }
.k-qa-grid ul { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.93rem; color: var(--slate); }
.k-qa-grid ul.k-spec { list-style: none; padding: 0; border: 0; }
.k-qa-grid ul.k-spec > li { border: 0; padding: 0.45rem 0; margin: 0; }
.k-qa-grid ul.k-spec > li > strong { display: block; color: var(--ink); font-size: 0.86rem; }

/* 6 · where we work */
.k-t-core .k-sec-where{ background: var(--panel); }
.k-district-tiles {
  list-style: none; padding: 0; margin: 1.4rem 0 1.2rem;
  display: grid; gap: 0.6rem; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.k-district-tiles > li { margin: 0; max-width: none; }
.k-district-tiles a, .k-district-tiles span {
  display: block; padding: 0.85rem 1rem; background: var(--paper);
  border: 1px solid var(--rule-soft); border-radius: 3px; text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 0.95rem; color: var(--ink);
}
.k-district-tiles a:hover { border-color: var(--clay); color: var(--clay-dark); }
.k-district-tiles span { color: var(--slate); }

/* 8 · the closing call to action */
.k-t-core .k-sec-close{ background: var(--lead); color: #fff; text-align: center; }
.k-t-core .k-sec-close h3{ color: #fff; margin: 0 auto 0.9rem; max-width: 20ch; }
.k-t-core .k-sec-close h3::after{ margin: 0.9rem auto 0; }
.k-t-core .k-sec-close p{ color: #9aa5b1; max-width: 52ch; margin: 0 auto; }
.k-close-actions {
  display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1.75rem !important;
}
.k-close-actions a {
  display: inline-block; font-family: var(--display); font-weight: 700; font-size: 1rem;
  padding: 0.9rem 1.6rem; border-radius: 3px; text-decoration: none;
  background: var(--clay); color: #fff;
}
.k-close-actions a:hover { background: var(--clay-dark); color: #fff; }
.k-close-actions .k-close-tel {
  background: transparent; border: 2px solid rgba(255, 255, 255, 0.32); color: #fff;
}

/* the micro components between the bands keep the same ground and measure */
.k-t-core .k-body > section:not(.k-sec) {
  padding: clamp(2.25rem, 4vw, 3.5rem) max(var(--pad), (100% - var(--container)) / 2);
  background: var(--paper); border-top: 1px solid var(--rule-soft); margin: 0;
}
.k-t-core .k-body > section:not(.k-sec) > h2,
.k-t-core .k-body > section:not(.k-sec) > h3 {
  margin-top: 0; font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.75rem);
}

@media (min-width: 48rem) {
.k-t-core .k-sec-fix ul.k-spec{ grid-template-columns: 1fr 1fr; }
  .k-mechanism { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k-price-rows > li { grid-template-columns: 1fr 1.4fr; align-items: baseline; }
  .k-qa-grid { grid-template-columns: 1fr 1fr; }
  .k-district-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
.k-t-core .k-sec-fix ul.k-spec{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-t-core .k-sec-cost .k-sec-in{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 3.5rem;
    align-items: start; }
.k-t-core .k-sec-cost .k-eyebrow-sec, .k-t-core .k-sec-cost h3{ grid-column: 1; }
.k-t-core .k-sec-cost .k-price-rows{ grid-column: 2; grid-row: 1 / 4; margin-top: 0; }
}

/* ── choice lists: the control lives inside its own outcome ────────────────
   The components used to print a chooser and then print every outcome again
   below it. With a select that is invisible — the options are collapsed — but
   with radios or checkboxes every label was on screen twice. 22 pages were
   repeating 100% of their labels. The input sits in the item now. */

.k-scope-list, .k-gate-list, .k-chain-list, .k-stages, .k-right, .k-two,
.k-candidates, .k-method-list, .k-deck-list, .k-junction-list,
.k-designation-list, .k-slopes, .k-verdict-list { list-style: none; padding: 0; }

.k-scope-list > li > label, .k-gate-list > li > label, .k-chain-list > li > label,
.k-stages > li > label, .k-right > li > label, .k-two > li > label,
.k-candidates > li > label, .k-method-list > li > label, .k-deck-list > li > label,
.k-junction-list > li > label, .k-designation-list > li > label,
.k-slopes > li > label, .k-verdict-list > li > label {
  display: grid; grid-template-columns: auto 1fr; gap: 0 0.65rem;
  align-items: start; width: 100%; margin: 0; cursor: pointer; line-height: 1.5;
}
.k-scope-list > li > label > span, .k-gate-list > li > label > span,
.k-chain-list > li > label > span, .k-stages > li > label > span,
.k-right > li > label > span, .k-two > li > label > span,
.k-candidates > li > label > span, .k-method-list > li > label > span,
.k-deck-list > li > label > span, .k-junction-list > li > label > span,
.k-designation-list > li > label > span, .k-slopes > li > label > span,
.k-verdict-list > li > label > span { min-width: 0; }
.k-scope-list strong, .k-gate-list strong, .k-chain-list strong, .k-stages strong,
.k-right strong, .k-two strong, .k-candidates strong, .k-method-list strong,
.k-deck-list strong, .k-junction-list strong, .k-designation-list strong,
.k-slopes strong, .k-verdict-list strong {
  display: block; font-family: var(--display); color: var(--fold-ink);
  margin-bottom: 0.15rem;
}

/* grids, so a two-way choice reads as two panels and a six-way as a list */
.k-two, .k-candidates, .k-slopes, .k-verdict-list, .k-deck-list, .k-method-list,
.k-right, .k-gate-list, .k-scope-list, .k-chain-list, .k-stages,
.k-junction-list, .k-designation-list {
  display: grid; gap: 0.7rem; margin: 0 0 1.1rem; grid-template-columns: 1fr;
}
.k-two > li, .k-candidates > li, .k-slopes > li, .k-verdict-list > li,
.k-deck-list > li, .k-method-list > li, .k-right > li, .k-gate-list > li,
.k-scope-list > li, .k-chain-list > li, .k-stages > li,
.k-junction-list > li, .k-designation-list > li {
  margin: 0; max-width: none; padding: 0.85rem 1rem; font-size: 0.94rem;
  background: var(--fold-card); border: 1px solid var(--fold-card-edge);
  border-radius: 3px; color: var(--fold-muted);
}
.k-two > li.k-on, .k-candidates > li.k-on, .k-slopes > li.k-on,
.k-verdict-list > li.k-on, .k-deck-list > li.k-on, .k-method-list > li.k-on,
.k-right > li.k-on, .k-gate-list > li.k-on, .k-scope-list > li.k-on,
.k-chain-list > li.k-on, .k-stages > li.k-on, .k-junction-list > li.k-on,
.k-designation-list > li.k-on {
  border-color: var(--fold-on-edge); background: var(--fold-on);
}
.k-scope-list > li::before, .k-chain-list > li::before, .k-junction-list > li::before,
.k-stages > li::before { content: none; }
.k-scope-list, .k-chain-list, .k-junction-list, .k-stages { counter-reset: none; }

/* the era cards keep their own shape and carry the detail they used to repeat */
.k-era-detail { display: block; margin-top: 0.5rem; padding-top: 0.5rem;
  border-top: 1px solid var(--fold-card-edge); color: var(--fold-muted);
  font-size: 0.9rem; }

/* tables: the control lives in the row it selects */
.k-triage th[scope="row"] label, .k-models th[scope="row"] label {
  display: grid; grid-template-columns: auto 1fr; gap: 0 0.55rem;
  align-items: start; margin: 0; cursor: pointer; width: 100%;
}
.k-triage form button, .k-models form button { margin-top: 0.9rem; }

@media (min-width: 48rem) {
  .k-two, .k-candidates, .k-slopes, .k-verdict-list { grid-template-columns: 1fr 1fr; }
  .k-gate-list, .k-right, .k-scope-list, .k-chain-list, .k-method-list,
  .k-deck-list, .k-junction-list, .k-designation-list {
    grid-template-columns: 1fr 1fr;
  }
  .k-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .k-scope-list, .k-gate-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── print — the L5 archetype's affordance is a real print view ─────────── */

/* ⚠ `form { display: none }` used to be in this list, from when the only form
   in an L5 fold was a print button. The checklist now lives INSIDE that form,
   so hiding the form printed a blank sheet. Only the controls go. */
@media print {
  .k-site-head, .k-site-foot, .k-bridges, .k-evidence, .k-centerpiece,
  button, .k-topic-select, .k-cta { display: none; }
  fieldset, legend { border: 0; padding: 0; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main > article > h1 { background: none; color: #000; padding: 0; }
  main > article > section { border: 0; padding: 0; background: none; }
  h2 { margin-top: 1.4rem; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ══ header, hero and mobile ═══════════════════════════════════════════════
   All of this sits OUTSIDE the audited primary region (the hero is inside it,
   but below the H1 and centerpiece), so it is free to carry the commercial
   furniture a trade site needs: a number to ring and one repeated action. */

.k-skip { position: absolute; left: -9999px; }
.k-skip:focus { left: 1rem; top: 1rem; z-index: 30; background: #fff; color: var(--ink);
  padding: 0.6rem 1rem; border-radius: 3px; }

.k-site-head { background: var(--lead); color: #fff; padding: 0;
  display: block; position: relative; z-index: 20; }
.k-head-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem;
  padding: 0.85rem var(--pad); max-width: var(--container-outer); margin: 0 auto;
}

/* --- the hamburger: a checkbox, so it opens without JavaScript ---------- */
.k-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.k-burger {
  display: none; order: 5;                     /* last in the bar: far right */
  width: 44px; height: 44px; flex: 0 0 44px;   /* full tap target */
  flex-direction: column; justify-content: center; gap: 5px;
  padding: 0 10px; margin-right: -10px; cursor: pointer;
}
.k-burger span { display: block; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease; }
.k-nav-toggle:focus-visible + .k-burger { outline: 2px solid var(--clay); outline-offset: 2px; }
.k-nav-toggle:checked + .k-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.k-nav-toggle:checked + .k-burger span:nth-child(2) { opacity: 0; }
.k-nav-toggle:checked + .k-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.k-wordmark img { display: block; height: 42px; width: auto; }
.k-wordmark { display: flex; flex-direction: column; line-height: 1; text-decoration: none;
  font-family: var(--display); letter-spacing: -0.02em; margin: 0; }
.k-wordmark-1 { font-weight: 600; font-size: 0.78rem; color: var(--clay);
  text-transform: uppercase; letter-spacing: 0.13em; }
.k-wordmark-2 { font-weight: 800; font-size: 1.3rem; color: #fff; text-transform: uppercase; }

.k-head-nav { flex: 1 1 18rem; }
.k-head-nav ul { display: flex; flex-wrap: wrap; gap: 0.3rem 1.3rem;
  margin: 0; padding: 0; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: 0.9rem; }
.k-head-nav a { color: #cfd6dd; text-decoration: none; padding: 0.35rem 0;
  border-bottom: 2px solid transparent; display: inline-block; }
.k-head-nav a:hover { color: #fff; border-bottom-color: var(--clay); }

.k-head-contact { display: flex; align-items: center; gap: 0.75rem 1.15rem; flex-wrap: wrap;
  margin-left: auto; }
.k-head-tel { display: flex; flex-direction: column; text-decoration: none; line-height: 1.15; }
.k-head-tel-label { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: #8b97a3; font-family: var(--display); font-weight: 600; }
.k-head-tel-number { font-family: var(--display); font-weight: 800; font-size: 1.15rem;
  color: #fff; letter-spacing: -0.015em; }
.k-head-tel:hover .k-head-tel-number { color: var(--clay); }
.k-head-cta { font-family: var(--display); font-weight: 700; font-size: 0.88rem;
  background: var(--clay); color: #fff; text-decoration: none;
  padding: 0.72rem 1.1rem; border-radius: 3px; white-space: nowrap;
  min-height: 44px; display: inline-flex; align-items: center; }
.k-head-cta:hover { background: #c85a28; color: #fff; }

.k-site-crumbs { background: #1a2027; padding: 0.5rem var(--pad); }
.k-site-crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 auto; padding: 0;
  list-style: none; max-width: var(--container); font-size: 0.78rem; color: #7e8a96; }
.k-site-crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: #4c5763; }
.k-site-crumbs a { color: #9fabb7; text-decoration: none; }
.k-site-crumbs a:hover { color: #fff; text-decoration: underline; }

/* ── the Core hero ─────────────────────────────────────────────────────────
   The fold is the grid, and it places four things:

     row 1   H1                      col 1        CTA card   col 2, spanning
     row 2   centerpiece             col 1        rows 1-3
     row 3   process steps           col 1
     row 4   trust facts             full width, both columns

   Earlier versions ran H1 + centerpiece + steps + facts all down column one
   against a short card in column two, which left a dead quarter of the band
   bottom-right. Moving the facts to a full-width strip under both columns
   balances the two heights and gives the band a base. */

.k-hero-steps, .k-hero-facts, .k-hero-cta { margin: 1.75rem 0 0; }

@media (min-width: 64rem) {
  .k-t-core .k-fold-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
    column-gap: 3.5rem;
    align-items: start;
  }
  .k-t-core .k-fold-inner > h1            { grid-area: 1 / 1; margin-bottom: 0; }
  .k-t-core .k-fold-inner > .k-centerpiece { grid-area: 2 / 1; }
  .k-t-core .k-fold-inner > .k-hero-steps  { grid-area: 3 / 1; }
  .k-t-core .k-fold-inner > .k-hero-cta    { grid-area: 1 / 2 / 4 / 3; margin-top: 0.4rem; }
  .k-t-core .k-fold-inner > .k-hero-facts  { grid-area: 4 / 1 / 5 / 3; }

  /* Two or three lines, not five. 15ch made the headline a narrow tower. */
  .k-t-core .k-fold h1 { max-width: 20ch; }
  .k-t-core .k-centerpiece { max-width: 46ch; }
  /* L3 and L10 carry no hero card, so the second column stands empty and the
     annotation reads as a narrow strip against a wide band. */
  .k-t-core .k-fold-inner:not(:has(.k-hero-cta)) > h1,
  .k-t-core .k-fold-inner:not(:has(.k-hero-cta)) > .k-centerpiece {
    grid-column: 1 / -1; max-width: 62ch;
  }
}

/* --- left column: the process ------------------------------------------- */
.k-hero-steps ol { counter-reset: k; list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem; }
.k-hero-steps li { counter-increment: k; margin: 0; max-width: none;
  display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.1rem 0.75rem; }
.k-hero-steps li::before {
  content: counter(k); grid-row: 1 / span 2;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--clay); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}
.k-hero-steps strong { font-family: var(--display); font-weight: 700; font-size: 0.98rem; color: #fff; }
.k-hero-steps span { font-size: 0.87rem; line-height: 1.5; color: #98a4b0; }

/* --- full-width strip: the trust facts ---------------------------------- */
.k-hero-facts { padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.14); }
.k-hero-facts ul {
  display: grid; gap: 0.85rem 2rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.k-hero-facts li { max-width: none; margin: 0; font-size: 0.85rem; line-height: 1.5; color: #94a0ac; }
.k-hero-facts strong { display: block; font-family: var(--display); font-weight: 700;
  font-size: 0.9rem; color: #dfe5eb; margin-bottom: 0.15rem; }

/* --- right column: the call to action ----------------------------------- */
.k-hero-cta {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.13) !important;
  border-top: 3px solid var(--clay) !important;
  border-radius: 4px;
  padding: 1.4rem 1.45rem 1.5rem !important;
}
.k-hero-tel { margin: 0 !important; display: flex; flex-direction: column; }
.k-hero-tel-label { font-family: var(--display); font-weight: 600; font-size: 0.7rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: #8b97a3; margin-bottom: 0.3rem; }
.k-hero-tel-number {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.75rem, 1.1rem + 1.9vw, 2.2rem); line-height: 1;
  color: #fff; text-decoration: none; letter-spacing: -0.028em;
  border-bottom: 3px solid var(--clay); padding-bottom: 0.22rem; align-self: flex-start;
}
.k-hero-tel-number:hover { color: var(--clay); }
.k-hero-hours { margin: 0.8rem 0 0 !important; font-size: 0.82rem !important;
  line-height: 1.5; color: #8f9ba7 !important; max-width: none; }
.k-hero-cta .k-coverage { margin: 1.1rem 0 0 !important; padding: 1.1rem 0 0 !important;
  border: 0 !important; border-top: 1px solid rgba(255,255,255,0.13) !important;
  background: none !important; border-radius: 0 !important; max-width: none; }
.k-hero-cta .k-coverage form { gap: 0.55rem; }
.k-hero-cta .k-coverage input { flex: 1 1 7rem; min-width: 0; }
.k-hero-cta .k-coverage button { flex: 1 1 auto; }
.k-hero-cta .k-coverage p { font-size: 0.8rem !important; line-height: 1.5; margin-bottom: 0 !important; }
.k-hero-book { margin: 1.1rem 0 0 !important; }
.k-hero-book button { width: 100%; font-size: 1rem; padding: 0.9rem 1.2rem; }

/* Below 64rem it is one column, and the CTA comes second — after the headline
   and centerpiece, before the argument for it. */
@media (max-width: 63.99rem) {
  .k-t-core .k-fold-inner { display: flex; flex-direction: column; }
  /* ⚠ A flex item with no `order` gets 0, which sorts BEFORE order:1. Only the
     five hero parts were numbered, so every district, service and fault
     centrepiece rendered ABOVE THE H1 on a phone — the reader met a checkbox
     list before they met the page title. Everything else is placed after the
     hero explicitly.
     min-width:0 because a flex item will not shrink below its content's
     min-content width, and a long option label was making the whole column
     wider than the viewport and cutting every line of the page off. */
  .k-t-core .k-fold-inner > * { order: 6; min-width: 0; }
  .k-t-core .k-fold-inner > h1 { order: 1; }
  .k-t-core .k-fold-inner > .k-centerpiece { order: 2; }
  .k-t-core .k-fold-inner > .k-hero-cta { order: 3; }
  .k-t-core .k-fold-inner > .k-hero-steps { order: 4; }
  .k-t-core .k-fold-inner > .k-hero-facts { order: 5; }
}

/* ── tablet: 48rem to 64rem ────────────────────────────────────────────────
   Wide enough for two columns, not for the desktop fold split. The hero stacks
   but its inner grids pair up, so the band does not become a long ribbon. */

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .k-hero-facts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-hero-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 1.75rem; }
  .k-hero-cta { max-width: 34rem; }
  .k-bridges ul, .k-evidence ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-fold h1 { max-width: 22ch; }
  .k-body { max-width: none; }
}

/* ── mobile and small tablet ────────────────────────────────────────────────────────────── */

@media (max-width: 63.99rem) {
  /* Explicit flex order across the whole bar.
     .k-head-bar wraps, and the nav takes the full width — so anything ordered
     AFTER the nav lands on a line of its own beneath it. The burger carried
     order:5 against the nav's order:4, which is why it (and the close X, which
     is the same control) sat under the open menu instead of beside the logo.
     Row one is logo, phone, burger; the nav wraps to row two. */
  .k-burger      { display: flex; order: 3; }
  .k-wordmark    { order: 1; }
  .k-head-contact { order: 2; margin-left: auto; }
  .k-head-nav    { order: 4; }
  .k-head-bar { gap: 0.6rem 0.9rem; }
  .k-wordmark-2 { font-size: 1.12rem; }
  .k-wordmark img { height: 34px; }
  .k-head-tel-label { display: none; }
  .k-head-cta { font-size: 0.82rem; padding: 0.6rem 0.85rem; }

  /* The nav collapses behind the toggle. grid-template-rows animates to a
     content-sized height without a hard-coded max-height guess. */
  .k-head-nav {
    flex-basis: 100%;
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .22s ease;
  }
  .k-head-nav > * { overflow: hidden; min-height: 0; }
  .k-nav-toggle:checked ~ .k-head-nav { grid-template-rows: 1fr; }
  /* no gap above the collapsed nav, or the bar gains a dead row */
  .k-head-nav:not(:has(> ul)) { display: none; }
  .k-head-nav ul { flex-direction: column; gap: 0; padding-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.14); margin-top: 0.5rem; }
  .k-head-nav li { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .k-head-nav a { display: block; padding: 0.85rem 0; font-size: 1rem; min-height: 44px; }

  .k-hero-tel-number { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  main form { gap: 0.6rem; }
  /* ⚠ SAME OMISSION AS THE DESKTOP RULE, with !important on top. A text field
     should fill the phone's width; a checkbox or radio stretched to 100% is a
     40rem-wide empty box with its label underneath it. Both are excluded. */
  main input:not([type="checkbox"]):not([type="radio"]),
  main select { width: 100% !important; }
  main button { width: 100%; }
  /* One option per line on a phone: two 21rem columns do not fit, and half of
     each label was wrapping under its own control. */
  .k-compare-two label, .k-gates label, .k-scope label, .k-models label,
  .k-deck label, .k-sequence label, .k-methods label, .k-stack label,
  .k-differential label, .k-verdict label, .k-anatomy label, .k-chain label,
  .k-signs label, .k-response label, .k-junctions label, .k-designation label,
  .k-slope-split label, .k-valley label, .k-eras label {
    width: 100%; margin-right: 0;
  }
  .k-foot-grid { gap: 1.75rem; }
}

/* ── phone: below 30rem ────────────────────────────────────────────────── */

@media (max-width: 30rem) {
  .k-head-contact { gap: 0.5rem; }
  .k-head-tel-number { font-size: 1rem; }
  .k-head-cta { font-size: 0.78rem; padding: 0.55rem 0.7rem; }
  .k-hero-facts ul { grid-template-columns: 1fr; }
  .k-fold h1 { font-size: clamp(1.65rem, 7.5vw, 2.1rem); }
  .k-body > h2 { font-size: 1.25rem; }
  .k-bridges ul, .k-evidence ul, .k-foot-grid { grid-template-columns: 1fr !important; }
  .k-hero-cta { padding: 1.15rem 1.1rem 1.25rem !important; }
  table { font-size: 0.88rem; }
  th, td { padding: 0.5rem 0.55rem; }
}

/* ── footer ────────────────────────────────────────────────────────────── */

.k-site-foot { background: var(--lead); color: #b8c1cb;
  margin-top: 4.5rem; padding: 3rem var(--pad) 2rem; }
.k-foot-grid { display: grid; gap: 2rem 2.5rem; max-width: var(--container); margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.k-foot-col h2 { font-family: var(--display); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: #7e8a96;
  margin: 0 0 0.8rem; max-width: none; }
.k-foot-col h2::before { content: none; }
.k-foot-col ul { margin: 0; padding: 0; list-style: none; }
.k-foot-col li { margin-bottom: 0.42rem; max-width: none; font-size: 0.94rem; }
.k-foot-col a { color: #c3ccd5; text-decoration: none; }
.k-foot-col a:hover { color: #fff; text-decoration: underline; }
.k-foot-mark { font-family: var(--display); font-weight: 800; font-size: 1.15rem;
  color: #fff; text-transform: uppercase; letter-spacing: -0.015em; margin: 0 0 0.7rem; }
.k-foot-brand p, .k-foot-contact p { font-size: 0.92rem; line-height: 1.55; color: #97a3af; }
.k-foot-warranty { color: #7e8a96 !important; }
.k-foot-tel { font-family: var(--display); font-weight: 800; font-size: 1.3rem;
  color: #fff !important; text-decoration: none; letter-spacing: -0.02em; }
.k-foot-tel:hover { color: var(--clay) !important; }
.k-foot-cta { display: inline-block; font-family: var(--display); font-weight: 700;
  font-size: 0.9rem; background: var(--clay); color: #fff !important;
  padding: 0.7rem 1.1rem; border-radius: 3px; text-decoration: none; }
.k-foot-cta:hover { background: #c85a28; }
.k-site-foot .k-foot-legal {
  max-width: var(--container); margin: 2.5rem auto 0; padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.8rem; line-height: 1.5; color: #6f7b87;
}

/* ══ the mobile action bar ═════════════════════════════════════════════════
   Phones and small tablets only. On a phone the fold scrolls away within a
   screen or two, and the two things a roofing customer wants are the number
   and the booking — so both stay reachable without scrolling back.

   It sits outside the main element, so it adds nothing to the primary region and no
   anchors to the audit. The header's booking button hides at the same
   breakpoint: one booking action on screen, never two competing ones. */

.k-action-bar { display: none; }

@media (max-width: 63.99rem) {
  .k-action-bar {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; inset: auto 0 0 0; z-index: 40;
    background: var(--lead);
    border-top: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 -6px 18px rgba(0,0,0,0.28);
    /* clears the iPhone home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .k-action-bar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 56px; padding: 0.55rem 0.75rem;
    font-family: var(--display); font-weight: 700; font-size: 0.95rem;
    text-decoration: none; text-align: center; line-height: 1.15;
  }
  .k-action-call { color: #fff; border-right: 1px solid rgba(255,255,255,0.14); }
  .k-action-call:hover, .k-action-call:focus { color: var(--clay); }
  .k-action-label { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: #8b97a3; font-weight: 600; margin-bottom: 0.15rem; }
  .k-action-value { font-size: 1.02rem; letter-spacing: -0.015em; }
  .k-action-book { background: var(--clay); color: #fff; }
  .k-action-book:hover, .k-action-book:focus { background: #c85a28; color: #fff; }

  /* the bar is fixed, so the footer needs room to finish above it */
  .k-site-foot { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }

  /* one booking action on screen: the header button gives way to the bar */
  .k-head-cta { display: none; }
}

@media (max-width: 30rem) {
  .k-action-bar a { font-size: 0.88rem; }
  .k-action-value { font-size: 0.95rem; }
}

/* ══ the homepage: service grid and district list ══════════════════════════
   The root document is a shortlist, not a service page. These two blocks are
   the shortlist — every Quality Node reachable from here, each service in one
   line, each district named with the housing stock that makes its page worth
   having. Both sit below the fold like every other link on the site. */

.k-service-grid ul, .k-district-grid ul {
  display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none;
}
.k-service-grid li, .k-district-grid li {
  max-width: none; margin: 0;
  display: grid; gap: 0.15rem;
  padding: 0.85rem 0; border-top: 1px solid var(--rule-soft);
}
.k-service-grid li:first-child, .k-district-grid li:first-child { border-top: 0; padding-top: 0.3rem; }
.k-service-grid li span, .k-district-grid li span {
  font-size: 0.92rem; line-height: 1.5; color: var(--slate-mid);
}
.k-service-name, .k-district-name {
  font-family: var(--display); font-weight: 700; font-size: 1.06rem;
  letter-spacing: -0.012em; text-decoration: none; color: var(--ink);
}
.k-service-name:hover, .k-district-name:hover { color: var(--clay); text-decoration: underline; }
.k-service-name::after, .k-district-name::after { content: " \2192"; color: var(--clay); }
.k-district-grid > p { margin-top: 1rem; font-size: 0.9rem; color: var(--slate-mid); }

@media (min-width: 48rem) {
  .k-service-grid ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.25rem; }
  .k-district-grid ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.25rem; }
  /* the first row of each column loses its rule, not just the first item */
  .k-service-grid li:nth-child(2), .k-district-grid li:nth-child(2) {
    border-top: 0; padding-top: 0.3rem; }
}

/* The homepage carries two index blocks rather than one service's detail, so
   its reading column runs wider than a service page's. */
/* ⚠ REMOVED: `.k-v-service-grid .k-body { max-width: 54rem }`.
   It narrowed the homepage's reading column back when Core rendered as an
   article column, and it sits AFTER the full-bleed rule with the same
   specificity — so on the homepage every landing band was capped at 54rem and
   drew a white box with the page ground showing down both sides, while the
   hero above it ran edge to edge. The bands hold their own measure now, at
   .k-sec-in. */

/* ══ line diagrams ═════════════════════════════════════════════════════════
   Inline SVG so the labels are real text — crawlable, selectable, and legible
   with images disabled. currentColor lets one drawing read on the dark Core
   fold and the light Outer body without a second file. */

.k-diagram figure { margin: 0 0 1rem; }
.k-svg { width: 100%; height: auto; display: block; color: var(--ink); }

.k-svg .k-roof   { fill: rgba(176,73,28,0.07); stroke: currentColor; stroke-width: 2; }
.k-svg .k-wall   { fill: none; stroke: currentColor; stroke-width: 2; }
.k-svg .k-ridge,
.k-svg .k-hip    { fill: none; stroke: var(--clay); stroke-width: 3; }
.k-svg .k-valley { fill: none; stroke: var(--clay); stroke-width: 3; stroke-dasharray: 7 4; }
.k-svg .k-stack  { fill: rgba(0,0,0,0.06); stroke: currentColor; stroke-width: 2; }
.k-svg .k-flash  { fill: none; stroke: var(--clay); stroke-width: 4; }
.k-svg .k-gutter { fill: rgba(0,0,0,0.08); stroke: currentColor; stroke-width: 1.5; }
.k-svg .k-slate  { fill: rgba(0,0,0,0.05); stroke: currentColor; stroke-width: 1.5; }
.k-svg .k-insul  { fill: rgba(176,73,28,0.16); stroke: var(--clay); stroke-width: 1.5; }
.k-svg .k-void   { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 3 3; }
.k-svg .k-layer  { fill: rgba(0,0,0,0.08); stroke: currentColor; stroke-width: 1.5; }
.k-svg .k-vcl    { fill: var(--clay); }
.k-svg .k-timber { fill: none; stroke: currentColor; stroke-width: 3; }
.k-svg .k-party  { fill: none; stroke: currentColor; stroke-width: 3; stroke-dasharray: 6 4; }
.k-svg .k-vent   { fill: none; stroke: var(--clay); stroke-width: 2; stroke-dasharray: 8 5; }
.k-svg .k-dim,
.k-svg .k-arc    { fill: none; stroke: currentColor; stroke-width: 1.2; }
.k-svg .k-lead   { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.5; }
.k-svg .k-dot    { fill: var(--clay); }
.k-svg .k-lbl    { font: 600 12px var(--display); fill: currentColor; }
.k-svg .k-head   { font: 700 15px var(--display); fill: currentColor; }
.k-svg .k-note   { font: 400 12px var(--body); fill: currentColor; opacity: 0.75; }

@media (max-width: 46rem) {
  .k-svg .k-lbl { font-size: 14px; }
  .k-svg .k-note { font-size: 13px; }
}

/* the data-bearing diagrams: bars, decision nodes, arrows */
.k-svg .k-bar       { fill: var(--clay); }
.k-svg .k-bar-short { fill: none; stroke: var(--clay); stroke-width: 1.5; stroke-dasharray: 5 4; }
.k-svg .k-node      { fill: rgba(0,0,0,0.05); stroke: currentColor; stroke-width: 1.5; }
.k-svg .k-node-head { fill: rgba(176,73,28,0.12); stroke: var(--clay); stroke-width: 1.5; }
.k-svg .k-node-yes  { fill: rgba(176,73,28,0.12); stroke: var(--clay); stroke-width: 2; }
.k-svg .k-node-no   { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 6 4; }
.k-svg .k-arrow     { fill: none; stroke: var(--clay); stroke-width: 2; }
.k-svg .k-tipfill   { fill: var(--clay); }
.k-svg .k-breach    { fill: var(--clay); }
.k-svg .k-stain     { fill: rgba(176,73,28,0.35); }

/* ══ the regulatory decision flow ══════════════════════════════════════════
   Branches for real: a GET form resolving server-side, so it answers with
   JavaScript off. Every outcome prints whether or not the form is submitted —
   the control selects, it does not conceal, because a crawler never submits and
   a reader should not have to guess which branch is theirs. */

.k-flow-q { font-family: var(--display); font-weight: 700;
  font-size: 1.08rem; line-height: 1.35; color: var(--ink); margin: 0 0 0.9rem; }
.k-flow-form { display: flex; flex-direction: column; align-items: stretch;
  gap: 0.5rem; margin-bottom: 1.1rem; }
.k-flow-form label { display: flex; align-items: flex-start; gap: 0.6rem;
  font-family: var(--body); font-weight: 400; font-size: 1rem; color: var(--ink);
  padding: 0.6rem 0.75rem; min-height: 44px;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--panel);
  cursor: pointer; margin-bottom: 0; }
.k-flow-form label:hover { border-color: var(--clay); }
.k-flow-form input[type="radio"] { margin-top: 0.28rem; }
.k-flow-form button { align-self: flex-start; }

.k-flow-outcomes { list-style: none; margin: 0 0 1rem; padding: 0;
  counter-reset: f; display: grid; gap: 0.7rem; }
.k-flow-outcomes li { max-width: none; margin: 0; padding: 0.8rem 0.9rem;
  border-left: 3px solid var(--rule); background: var(--paper);
  font-size: 0.95rem; line-height: 1.55; color: var(--slate); }
.k-flow-outcomes li strong { display: block; font-family: var(--display);
  font-weight: 700; color: var(--ink); margin-bottom: 0.2rem; }
.k-flow-outcomes .k-flow-on { border-left-color: var(--clay);
  background: var(--clay-tint); }

.k-flow-note { font-size: 0.92rem; color: var(--ink); font-weight: 600; }
.k-flow-legal { font-size: 0.88rem; color: var(--slate-mid); font-style: italic;
  border-top: 1px solid var(--rule-soft); padding-top: 0.8rem; }

/* ── the reference centrepieces ───────────────────────────────────────────
   LAUNCH-PLAN.md §2.5, the L7 cluster. Fourteen reference pages rendered two
   fold shapes between them. Seven shapes, keyed to the shape of the lookup the
   page's reader is actually making. */

.k-terms, .k-audit, .k-limits, .k-observed, .k-order,
.k-field-test, .k-apart { margin: 1.6rem 0 0; }
.k-terms form, .k-audit form, .k-limits form, .k-observed form,
.k-order form, .k-field-test form, .k-apart form { margin: 0 0 1.1rem; }
.k-audit fieldset, .k-observed fieldset, .k-order fieldset,
.k-field-test fieldset { border: 0; padding: 0; margin: 0 0 0.75rem; }
.k-audit legend, .k-observed legend, .k-order legend, .k-field-test legend {
  padding: 0; margin-bottom: 0.55rem; font-family: var(--display);
  font-weight: 600; color: var(--fold-ink); }
.k-observed label, .k-order label, .k-field-test label {
  display: inline-grid; grid-template-columns: auto 1fr; gap: 0 0.55rem;
  align-items: start; vertical-align: top; line-height: 1.45;
  width: min(100%, 21rem); margin: 0 1.25rem 0.65rem 0; }

/* the qualifier under an answer, and the page's own closing statement */
.k-note-head { font-family: var(--display); font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.01em; color: var(--fold-ink); margin: 1.15rem 0 0.5rem; }
.k-note-list { margin: 0 0 1rem; padding: 0; list-style: none; }
ol.k-note-list { counter-reset: k-note; }
ol.k-note-list li { counter-increment: k-note; padding-left: 2.1rem; position: relative; }
ol.k-note-list li::before { content: counter(k-note); position: absolute; left: 0;
  top: 0.55rem; width: 1.3rem; height: 1.3rem; border-radius: 2px;
  background: var(--fold-card-edge); color: var(--fold-ink); font-size: 0.72rem;
  font-weight: 700; text-align: center; line-height: 1.3rem; }
.k-note-list li { margin: 0; max-width: none; font-size: 0.92rem;
  color: var(--fold-muted); padding-top: 0.45rem; padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--fold-card-edge); }
.k-note-list li strong { color: var(--fold-ink); font-family: var(--display); }
dl.k-note-list { display: grid; gap: 0 1.1rem;
  grid-template-columns: max-content 1fr; align-items: baseline; }
dl.k-note-list dt { font-family: var(--display); font-weight: 600;
  color: var(--fold-ink); padding: 0.5rem 0;
  border-bottom: 1px solid var(--fold-card-edge); }
dl.k-note-list dd { margin: 0; padding: 0.5rem 0; font-size: 0.92rem;
  color: var(--fold-muted); border-bottom: 1px solid var(--fold-card-edge); }
.k-verdict-line { margin: 1rem 0 0; font-size: 0.95rem; color: var(--fold-muted);
  border-top: 1px solid var(--fold-card-edge); padding-top: 0.85rem; }

/* a vocabulary, grouped by where you look */
.k-term-groups { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
.k-term-group { padding: 0.85rem 1rem; background: var(--fold-card);
  border: 1px solid var(--fold-card-edge); border-radius: 3px; }
.k-term-group.k-on { border-color: var(--fold-on-edge); background: var(--fold-on); }
.k-term-head { margin: 0 0 0.5rem !important; font-family: var(--display);
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fold-label); }
.k-term-group dl { margin: 0; display: grid; gap: 0 0.7rem;
  grid-template-columns: max-content 1fr; align-items: baseline; }
.k-term-group dt { font-family: var(--display); font-weight: 600;
  color: var(--fold-ink); padding: 0.28rem 0; font-size: 0.94rem; }
.k-term-group dd { margin: 0; padding: 0.28rem 0; font-size: 0.9rem;
  color: var(--fold-muted); }

/* tick what the document names; the gaps are the finding */
.k-audit-list { list-style: none; padding: 0; margin: 0; display: grid;
  gap: 0.4rem; grid-template-columns: 1fr; }
ol.k-audit-list { counter-reset: k-line; }
.k-audit-list li { margin: 0; max-width: none; padding: 0.55rem 0.75rem;
  background: var(--fold-card); border: 1px solid var(--fold-card-edge);
  border-radius: 3px; font-size: 0.93rem; }
.k-audit-list li.k-on { border-color: var(--fold-on-edge); background: var(--fold-on); }
.k-audit-list label { display: grid; grid-template-columns: auto 1fr;
  gap: 0 0.55rem; align-items: start; line-height: 1.45; margin: 0; width: 100%; }
.k-audit-list label strong { font-family: var(--display); color: var(--fold-ink); }
.k-audit-list label span { color: var(--fold-muted); }
.k-audit-result { font-size: 0.95rem; color: var(--fold-ink) !important;
  padding: 0.75rem 0.9rem; background: var(--fold-card);
  border-left: 3px solid var(--fold-on-edge); margin: 0 0 0.4rem; }

/* the figure, and the thing that limits it */
.k-limits table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.k-limits th, .k-limits td { text-align: left; vertical-align: top;
  padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--fold-card-edge); }
.k-limits thead th { font-family: var(--display); font-size: 0.78rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--fold-label); }
.k-limits tr.k-on { background: var(--fold-on); }
.k-limits tbody th label { display: inline-grid; grid-template-columns: auto 1fr;
  gap: 0 0.5rem; align-items: start; margin: 0; width: 100%; }
.k-limits button { margin-top: 0.9rem; }

/* what you can see, what it settles, in what order it fails */
.k-observed-list, .k-test-list { list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0.6rem; grid-template-columns: 1fr; }
.k-observed-list li, .k-test-list li { margin: 0; max-width: none;
  padding: 0.75rem 0.9rem; background: var(--fold-card);
  border-left: 3px solid var(--fold-card-edge); font-size: 0.93rem; }
.k-observed-list li.k-on, .k-test-list li.k-on {
  border-left-color: var(--fold-on-edge); background: var(--fold-on); }
.k-observed-list strong, .k-test-list strong { display: block;
  font-family: var(--display); margin-bottom: 0.2rem; color: var(--fold-ink); }

.k-order-list { list-style: none; counter-reset: k-fail; padding: 0; margin: 0;
  display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
.k-order-list li { counter-increment: k-fail; margin: 0; max-width: none;
  padding: 0.7rem 0.9rem; background: var(--fold-card);
  border-top: 3px solid var(--fold-card-edge); font-size: 0.93rem; }
.k-order-list li::before { content: counter(k-fail); display: block;
  font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--fold-label); margin-bottom: 0.25rem; }
.k-order-list li.k-on { border-top-color: var(--fold-on-edge); background: var(--fold-on); }
.k-order-list strong { display: block; font-family: var(--display);
  margin-bottom: 0.2rem; color: var(--fold-ink); }

/* three products, one word */
.k-apart table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.k-apart th, .k-apart td { text-align: left; vertical-align: top;
  padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--fold-card-edge); }
.k-apart thead th { font-family: var(--display); font-size: 0.78rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--fold-label); }
.k-apart tr.k-on { background: var(--fold-on); }
.k-apart tbody th label { display: inline-grid; grid-template-columns: auto 1fr;
  gap: 0 0.5rem; align-items: start; margin: 0; width: 100%; }
.k-apart button { margin-top: 0.9rem; }

@media (min-width: 48rem) {
  .k-observed-list, .k-test-list { grid-template-columns: 1fr 1fr; }
  .k-audit-list { grid-template-columns: 1fr 1fr; }
  .k-order-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  /* Seven lookup shapes, drawn differently. A glossary wants columns, an audit
     wants a single readable run, a table wants the wide measure. */
  .k-t-outer.k-v-term-grid .k-fold-inner,
  .k-t-outer.k-v-audit-long .k-fold-inner,
  .k-t-outer.k-v-life-table .k-fold-inner,
  .k-t-outer.k-v-limit-table .k-fold-inner,
  .k-t-outer.k-v-product-table .k-fold-inner,
  .k-t-outer.k-v-sequence-list .k-fold-inner,
  .k-t-outer.k-v-flow-pair .k-fold-inner,
  .k-t-outer.k-v-bench-test .k-fold-inner { max-width: var(--wide); }

  .k-v-term-grid .k-term-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k-v-term-grid .k-term-group dl { grid-template-columns: 1fr; gap: 0; }
  .k-v-term-grid .k-term-group dd { padding-top: 0; padding-bottom: 0.5rem; }
  .k-v-audit-long .k-audit-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k-v-audit-short .k-audit-list { grid-template-columns: 1fr 1fr; }
  .k-v-life-table .k-limits table { font-size: 1rem; font-variant-numeric: tabular-nums; }
  .k-v-life-table dl.k-note-list { grid-template-columns: 12rem 1fr; }
  .k-v-limit-table .k-limits table { font-size: 1rem; }
  .k-v-limit-table .k-limits thead th:first-child { width: 34%; }
  .k-v-sequence-list .k-order-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .k-v-part-list .k-order-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k-v-condition .k-observed-list { grid-template-columns: 1fr 1fr; }
  .k-v-layer-pair .k-observed-list { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .k-v-access .k-observed-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k-v-bench-test .k-test-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .k-v-flow-pair .k-test-list { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .k-v-flow-pair .k-note-list { columns: 2; column-gap: 1.6rem; }
  .k-v-product-table .k-apart table { font-size: 0.97rem; }
  .k-v-product-table .k-apart thead th:first-child { width: 26%; }
}

@media (min-width: 64rem) {
  .k-t-outer.k-v-two-bodies .k-fold-inner { max-width: var(--wide); }
  .k-v-two-bodies .k-apart thead th:first-child { width: 24%; }
  .k-v-two-bodies .k-note-list { columns: 3; column-gap: 1.6rem; }
  .k-v-two-bodies .k-note-list li { break-inside: avoid; }
}

/* ── the print view, resolved on the server ───────────────────────────────
   ?print=1 puts k-print on <body> — see the body_class filter in functions.php.
   The same rules as @media print, applied on screen, so the reader sees the
   sheet they are about to print and the control works with JavaScript off. */

body.k-print .k-site-head,
body.k-print .k-site-foot,
body.k-print .k-bridges,
body.k-print .k-evidence,
body.k-print .k-cta,
body.k-print .k-outer-cta,
body.k-print .k-topic-select,
body.k-print .k-eyebrow,
body.k-print button { display: none; }
body.k-print .k-fold { background: var(--panel); padding-bottom: 1rem; }
body.k-print .k-fold h1 { color: var(--ink); }
body.k-print .k-centerpiece { color: var(--slate); }
body.k-print .k-fold input[type="checkbox"],
body.k-print .k-fold input[type="radio"] { opacity: 1; }

/* ── the instructional centrepieces ───────────────────────────────────────
   LAUNCH-PLAN.md §2.5, the L5 cluster. Eight pages, one fold, and a print
   button that printed nothing. Five shapes, keyed to the shape of the
   procedure each page sets out. */

.k-pitch, .k-checks, .k-calendar, .k-run, .k-closure { margin: 1.6rem 0 0; }
.k-pitch form, .k-checks form, .k-calendar form, .k-run form,
.k-closure form { margin: 0 0 1.1rem; }
.k-checks fieldset, .k-run fieldset, .k-closure fieldset {
  border: 0; padding: 0; margin: 0 0 0.75rem; }
.k-checks legend, .k-run legend, .k-closure legend { padding: 0;
  margin-bottom: 0.55rem; font-family: var(--display); font-weight: 600;
  color: var(--fold-ink); }
.k-run label, .k-closure label { display: inline-grid;
  grid-template-columns: auto 1fr; gap: 0 0.55rem; align-items: start;
  vertical-align: top; line-height: 1.45; width: min(100%, 21rem);
  margin: 0 1.25rem 0.65rem 0; }

/* rise over run */
.k-pitch .k-fields { grid-template-columns: 1fr; }
.k-pitch .k-field label span { display: block; }

/* tick what you have done */
.k-check-list { list-style: none; padding: 0; margin: 0; display: grid;
  gap: 0.45rem; grid-template-columns: 1fr; }
ol.k-check-list { counter-reset: k-check; }
.k-check-list li { margin: 0; max-width: none; padding: 0.6rem 0.8rem;
  background: var(--fold-card); border: 1px solid var(--fold-card-edge);
  border-radius: 3px; font-size: 0.93rem; }
.k-check-list li.k-on { border-color: var(--fold-on-edge); background: var(--fold-on); }
.k-check-list label { display: grid; grid-template-columns: auto 1fr;
  gap: 0 0.55rem; align-items: start; line-height: 1.45; margin: 0; width: 100%; }
.k-check-list label strong { font-family: var(--display); color: var(--fold-ink); }
.k-check-list label span { color: var(--fold-muted); }
.k-check-result { font-size: 0.95rem; color: var(--fold-ink) !important;
  padding: 0.75rem 0.9rem; background: var(--fold-card);
  border-left: 3px solid var(--fold-on-edge); margin: 0 0 0.4rem; }

/* the year, and who does each task */
.k-calendar table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.k-calendar th, .k-calendar td { text-align: left; vertical-align: top;
  padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--fold-card-edge); }
.k-calendar thead th { font-family: var(--display); font-size: 0.78rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--fold-label); }
.k-calendar tr.k-on { background: var(--fold-on); }
.k-calendar tbody th { font-family: var(--display); color: var(--fold-ink); }

/* an order that matters */
.k-run-list { list-style: none; counter-reset: k-run; padding: 0; margin: 0;
  display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
.k-run-list li { counter-increment: k-run; margin: 0; max-width: none;
  padding: 0.7rem 0.9rem 0.7rem 2.6rem; position: relative;
  background: var(--fold-card); border: 1px solid var(--fold-card-edge);
  border-radius: 3px; font-size: 0.93rem; }
.k-run-list li::before { content: counter(k-run); position: absolute;
  left: 0.75rem; top: 0.7rem; width: 1.35rem; height: 1.35rem; border-radius: 2px;
  background: var(--fold-card-edge); color: var(--fold-ink); font-size: 0.74rem;
  font-weight: 700; text-align: center; line-height: 1.35rem; }
.k-run-list li.k-on { border-color: var(--fold-on-edge); background: var(--fold-on); }
.k-run-list li.k-on::before { background: var(--clay); color: #fff; }
.k-run-list strong { font-family: var(--display); color: var(--fold-ink); }
.k-run-list label { width: 100%; margin: 0; }

/* the opening, and what closes it */
.k-closure-list { list-style: none; padding: 0; margin: 0; display: grid;
  gap: 0.6rem; grid-template-columns: 1fr; }
.k-closure-list li { margin: 0; max-width: none; padding: 0.7rem 0.9rem;
  background: var(--fold-card); border-left: 3px solid var(--fold-card-edge);
  font-size: 0.93rem; }
.k-closure-list li.k-on { border-left-color: var(--fold-on-edge);
  background: var(--fold-on); }
.k-closure-list strong { display: block; font-family: var(--display);
  color: var(--fold-ink); margin-bottom: 0.2rem; }
.k-closure-shut { margin: 1.1rem 0 0; display: grid; gap: 0 1.1rem;
  grid-template-columns: max-content 1fr; align-items: baseline; }
.k-closure-shut dt { font-family: var(--display); font-weight: 600;
  color: var(--fold-ink); padding: 0.55rem 0 0.55rem 0.85rem;
  border-left: 3px solid var(--fold-card-edge); }
.k-closure-shut dt.k-on { border-left-color: var(--fold-on-edge);
  color: var(--fold-on-ink); }
.k-closure-shut dd { margin: 0; padding: 0.55rem 0; font-size: 0.93rem;
  color: var(--fold-muted); }

@media (min-width: 48rem) {
  .k-pitch .k-fields { grid-template-columns: 1fr 1fr auto; align-items: end; }
  .k-check-list { grid-template-columns: 1fr 1fr; }
  .k-closure-list { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64rem) {
  .k-t-outer.k-v-check-wide .k-fold-inner,
  .k-t-outer.k-v-calendar .k-fold-inner,
  .k-t-outer.k-v-run-long .k-fold-inner,
  .k-t-outer.k-v-run-stages .k-fold-inner,
  .k-t-outer.k-v-closure-three .k-fold-inner { max-width: var(--wide); }

  .k-v-pitch-calc .k-pitch .k-fields { grid-template-columns: 1fr 1fr auto; }
  .k-v-check-wide .k-check-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k-v-check-four .k-check-list { grid-template-columns: 1fr 1fr; }
  .k-v-check-four ol.k-note-list { columns: 2; column-gap: 1.6rem; }
  .k-v-calendar .k-calendar table { font-size: 0.97rem; }
  .k-v-calendar .k-calendar thead th:first-child { width: 26%; }
  .k-v-run-long .k-run-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .k-v-run-stages .k-run-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .k-v-closure-three .k-closure-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k-v-closure-three .k-closure-shut { grid-template-columns: 14rem 1fr; }
  .k-v-closure-pair .k-closure-list { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
}

/* ── the regulatory centrepieces ──────────────────────────────────────────
   LAUNCH-PLAN.md §2.5, the L9 cluster. Eight of nine rendered one question,
   three radios and three outcomes. Six shapes, plus the decision flow retained
   on the two pages whose brief names it as that page's own asset. */

.k-threshold, .k-permission, .k-routes, .k-clauses,
.k-evidence-run, .k-duties { margin: 1.6rem 0 0; }
.k-threshold form, .k-permission form, .k-routes form, .k-clauses form,
.k-evidence-run form, .k-duties form { margin: 0 0 1.1rem; }
.k-clauses fieldset, .k-evidence-run fieldset { border: 0; padding: 0; margin: 0 0 0.75rem; }
.k-clauses legend, .k-evidence-run legend { padding: 0; margin-bottom: 0.55rem;
  font-family: var(--display); font-weight: 600; color: var(--fold-ink); }
.k-clauses label, .k-evidence-run label { display: inline-grid;
  grid-template-columns: auto 1fr; gap: 0 0.55rem; align-items: start;
  vertical-align: top; line-height: 1.45; width: min(100%, 21rem);
  margin: 0 1.25rem 0.65rem 0; }

.k-threshold .k-fields { grid-template-columns: 1fr; }
.k-threshold .k-field label span { display: block; }

/* the property decides, not the job */
.k-status-list { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid;
  gap: 0.5rem; grid-template-columns: 1fr; }
.k-status-list li { margin: 0; max-width: none; padding: 0.7rem 0.9rem;
  background: var(--fold-card); border-left: 3px solid var(--fold-card-edge);
  font-size: 0.93rem; color: var(--fold-muted); }
.k-status-list li.k-on { border-left-color: var(--fold-on-edge); background: var(--fold-on); }
.k-status-list strong { display: block; font-family: var(--display);
  color: var(--fold-ink); margin-bottom: 0.2rem; }

/* tables: the permission baseline, the two routes, the duties */
.k-permission table, .k-routes table, .k-duties table {
  width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.k-permission th, .k-permission td, .k-routes th, .k-routes td,
.k-duties th, .k-duties td { text-align: left; vertical-align: top;
  padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--fold-card-edge); }
.k-permission thead th, .k-routes thead th, .k-duties thead th {
  font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--fold-label); }
.k-permission tbody th, .k-duties tbody th { font-family: var(--display);
  color: var(--fold-ink); }
.k-routes tr.k-on, .k-duties tr.k-on { background: var(--fold-on); }
.k-routes tbody th label, .k-duties tbody th label { display: inline-grid;
  grid-template-columns: auto 1fr; gap: 0 0.5rem; align-items: start;
  margin: 0; width: 100%; }
.k-routes button, .k-duties button { margin-top: 0.9rem; }

/* the clauses in your own document */
.k-clause-list { list-style: none; padding: 0; margin: 0; display: grid;
  gap: 0.6rem; grid-template-columns: 1fr; }
.k-clause-list li { margin: 0; max-width: none; padding: 0.75rem 0.9rem;
  background: var(--fold-card); border: 1px solid var(--fold-card-edge);
  border-radius: 3px; font-size: 0.93rem; }
.k-clause-list li.k-on { border-color: var(--fold-on-edge); background: var(--fold-on); }
.k-clause-list strong { font-family: var(--display); color: var(--fold-ink); }
.k-clause-result { font-size: 0.95rem; color: var(--fold-ink) !important;
  padding: 0.75rem 0.9rem; background: var(--fold-card);
  border-left: 3px solid var(--fold-on-edge); margin: 0 0 0.9rem; }

/* the order a claim depends on — AUTHORSHIP.md §3: no alarm colouring here */
.k-evidence-list { list-style: none; counter-reset: k-ev; padding: 0; margin: 0;
  display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
.k-evidence-list li { counter-increment: k-ev; margin: 0; max-width: none;
  padding: 0.7rem 0.9rem; background: var(--fold-card);
  border-top: 3px solid var(--fold-card-edge); font-size: 0.93rem; }
.k-evidence-list li::before { content: "Step " counter(k-ev); display: block;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fold-label); margin-bottom: 0.25rem; }
.k-evidence-list li.k-on { border-top-color: var(--fold-on-edge); background: var(--fold-on); }
.k-evidence-list strong { display: block; font-family: var(--display);
  color: var(--fold-ink); margin-bottom: 0.2rem; }
.k-evidence-next { font-family: var(--display); font-weight: 600;
  color: var(--fold-ink) !important; font-size: 1rem; margin: 0.9rem 0 0; }

@media (min-width: 48rem) {
  .k-threshold .k-fields { grid-template-columns: 1fr 1fr auto; align-items: end; }
  .k-status-list { grid-template-columns: 1fr 1fr; }
  .k-clause-list { grid-template-columns: 1fr 1fr; }
  .k-evidence-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .k-t-outer.k-v-permission .k-fold-inner,
  .k-t-outer.k-v-routes .k-fold-inner,
  .k-t-outer.k-v-clauses .k-fold-inner,
  .k-t-outer.k-v-evidence .k-fold-inner,
  .k-t-outer.k-v-duty-pair .k-fold-inner,
  .k-t-outer.k-v-duty-three .k-fold-inner { max-width: var(--wide); }

  .k-v-threshold .k-threshold .k-fields { grid-template-columns: 1fr 1fr auto; }
  .k-v-threshold ol.k-note-list { columns: 2; column-gap: 1.6rem; }
  .k-v-threshold ol.k-note-list li { break-inside: avoid; }
  .k-v-permission .k-status-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .k-v-permission .k-permission thead th:first-child { width: 40%; }
  .k-v-routes .k-routes thead th:first-child { width: 22%; }
  .k-v-clauses .k-clause-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .k-v-clauses dl.k-note-list { grid-template-columns: 15rem 1fr; }
  .k-v-evidence .k-evidence-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .k-v-duty-pair .k-duties thead th:first-child { width: 18%; }
  .k-v-duty-three .k-duties thead th:first-child { width: 22%; }
  .k-v-branch-select .k-flow-form { flex-direction: row; align-items: center;
    flex-wrap: wrap; gap: 0.75rem; }
}

/* ── the comparison centrepieces ──────────────────────────────────────────
   LAUNCH-PLAN.md §2.5, the L6 cluster. Five of eight shared one fold, and the
   comparison module the archetype is defined by printed nothing on six of
   them. Five shapes, each of which reaches a verdict. */

.k-identify, .k-positions, .k-spec-compare, .k-use, .k-decide { margin: 1.6rem 0 0; }
.k-identify form, .k-positions form, .k-spec-compare form, .k-use form,
.k-decide form { margin: 0 0 1.1rem; }
.k-identify fieldset, .k-use fieldset, .k-decide fieldset {
  border: 0; padding: 0; margin: 0 0 0.75rem; }
.k-identify legend, .k-use legend, .k-decide legend { padding: 0;
  margin-bottom: 0.55rem; font-family: var(--display); font-weight: 600;
  color: var(--fold-ink); }
.k-identify label, .k-use label { display: inline-grid;
  grid-template-columns: auto 1fr; gap: 0 0.55rem; align-items: start;
  vertical-align: top; line-height: 1.45; width: min(100%, 21rem);
  margin: 0 1.25rem 0.65rem 0; }

/* the tell that separates two constructions */
.k-identify-pair { list-style: none; padding: 0; margin: 0; display: grid;
  gap: 1rem; grid-template-columns: 1fr; }
.k-identify-pair li { margin: 0; max-width: none; padding: 0.95rem 1.05rem;
  background: var(--fold-card); border: 1px solid var(--fold-card-edge);
  border-radius: 3px; font-size: 0.94rem; }
.k-identify-pair li.k-on { border-color: var(--fold-on-edge); background: var(--fold-on); }
.k-identify-pair strong { display: block; font-family: var(--display);
  color: var(--fold-ink); margin-bottom: 0.25rem; }

/* tables: the positions, the attributes, the systems */
.k-positions table, .k-spec-compare table, .k-use table {
  width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.k-positions th, .k-positions td, .k-spec-compare th, .k-spec-compare td,
.k-use th, .k-use td { text-align: left; vertical-align: top;
  padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--fold-card-edge); }
.k-positions thead th, .k-spec-compare thead th, .k-use thead th {
  font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--fold-label); }
.k-positions tbody th, .k-spec-compare tbody th, .k-use tbody th {
  font-family: var(--display); color: var(--fold-ink); }
.k-positions tr.k-on, .k-spec-compare tr.k-on { background: var(--fold-on); }
.k-positions tbody th label, .k-spec-compare tbody th label { display: inline-grid;
  grid-template-columns: auto 1fr; gap: 0 0.5rem; align-items: start;
  margin: 0; width: 100%; }
.k-positions button, .k-spec-compare button { margin-top: 0.9rem; }
.k-use table { font-variant-numeric: tabular-nums; margin-top: 0.4rem; }

/* what the roof is for */
.k-use-list { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid;
  gap: 0.6rem; grid-template-columns: 1fr; }
.k-use-list li { margin: 0; max-width: none; padding: 0.75rem 0.9rem;
  background: var(--fold-card); border-left: 3px solid var(--fold-card-edge);
  font-size: 0.93rem; }
.k-use-list li.k-on { border-left-color: var(--fold-on-edge); background: var(--fold-on); }
.k-use-list strong { display: block; font-family: var(--display);
  color: var(--fold-ink); margin-bottom: 0.2rem; }

/* the evidence, and the route it points to */
.k-decide-list { list-style: none; padding: 0; margin: 0; display: grid;
  gap: 0.5rem; grid-template-columns: 1fr; }
.k-decide-list li { margin: 0; max-width: none; padding: 0.65rem 0.85rem;
  background: var(--fold-card); border: 1px solid var(--fold-card-edge);
  border-radius: 3px; font-size: 0.93rem; }
.k-decide-list li.k-on { border-color: var(--fold-on-edge); background: var(--fold-on); }
.k-decide-list label { display: grid; grid-template-columns: auto 1fr;
  gap: 0 0.55rem; align-items: start; line-height: 1.45; margin: 0; width: 100%; }
.k-decide-list strong { font-family: var(--display); color: var(--fold-ink); }
.k-decide-list span { color: var(--fold-muted); }
.k-decide-result { font-size: 1rem; color: var(--fold-ink) !important;
  padding: 0.85rem 1rem; background: var(--fold-card);
  border-left: 3px solid var(--fold-on-edge); margin: 0; }

@media (min-width: 48rem) {
  .k-identify-pair { grid-template-columns: 1fr 1fr; }
  .k-use-list { grid-template-columns: 1fr 1fr; }
  .k-decide-list { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64rem) {
  .k-t-outer.k-v-identify .k-fold-inner,
  .k-t-outer.k-v-positions-four .k-fold-inner,
  .k-t-outer.k-v-positions-three .k-fold-inner,
  .k-t-outer.k-v-spec-two .k-fold-inner,
  .k-t-outer.k-v-spec-one .k-fold-inner,
  .k-t-outer.k-v-seasons .k-fold-inner,
  .k-t-outer.k-v-use-table .k-fold-inner { max-width: var(--wide); }

  .k-v-identify .k-identify-pair { gap: 2rem; }
  .k-v-identify dl.k-note-list { grid-template-columns: 10rem 1fr; }
  .k-v-positions-four .k-positions thead th:first-child { width: 16%; }
  .k-v-positions-three .k-positions thead th:first-child { width: 18%; }
  .k-v-spec-two .k-spec-compare thead th:first-child { width: 18%; }
  .k-v-spec-two .k-spec-compare table { font-size: 0.96rem; }
  .k-v-spec-one .k-spec-compare thead th:first-child { width: 30%; }
  .k-v-seasons .k-spec-compare thead th:first-child { width: 22%; }
  .k-v-seasons .k-spec-compare table { font-size: 1rem; }
  .k-v-use-table .k-use-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .k-v-use-table .k-use table { font-size: 0.96rem; }
  .k-v-decide .k-decide-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k-t-core.k-v-decide .k-fold-inner > .k-decide { max-width: none; }
}

/* ── the pricing centrepieces ─────────────────────────────────────────────
   LAUNCH-PLAN.md §2.5, the L3 cluster. Five pages led with one footprint
   calculator, including the page whose own finding is that area does not set
   the price. Four shapes, keyed to what each figure is actually per. */

.k-lines, .k-flat-cost, .k-basis, .k-rates { margin: 1.6rem 0 0; }
.k-lines form, .k-flat-cost form, .k-basis form, .k-rates form { margin: 0 0 1.1rem; }
.k-lines table, .k-flat-cost table, .k-basis table, .k-rates table {
  width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.k-lines th, .k-lines td, .k-basis th, .k-basis td, .k-rates th, .k-rates td {
  text-align: left; vertical-align: top; padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--fold-card-edge); }
.k-lines thead th, .k-basis thead th, .k-rates thead th {
  font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--fold-label); }
.k-lines tbody th, .k-basis tbody th, .k-rates tbody th {
  font-family: var(--display); color: var(--fold-ink); }
.k-lines tr.k-on, .k-basis tr.k-on, .k-rates tr.k-on { background: var(--fold-on); }
.k-basis tbody th label { display: inline-grid; grid-template-columns: auto 1fr;
  gap: 0 0.5rem; align-items: start; margin: 0; width: 100%; }
.k-basis button { margin-top: 0.9rem; }
.k-lines table, .k-rates table { font-variant-numeric: tabular-nums; }
.k-lines td:last-child, .k-rates td:nth-child(2) { white-space: nowrap; }

.k-flat-cost .k-fields { grid-template-columns: 1fr; }
.k-flat-cost .k-field label span { display: block; }

@media (min-width: 48rem) {
  .k-flat-cost .k-fields { grid-template-columns: 1fr 1fr auto; align-items: end; }
}

@media (min-width: 64rem) {
  .k-t-outer.k-v-access .k-fold-inner,
  .k-t-outer.k-v-rates .k-fold-inner { max-width: var(--wide); }

  /* The calculator page keeps its two-column band; the line table goes under
     both columns rather than being squeezed beside the result. */
  .k-t-core.k-v-calculator .k-fold-inner > .k-lines { grid-column: 1 / -1; max-width: none; }
  .k-t-core.k-v-flat-cost .k-fold-inner > .k-flat-cost,
  .k-t-core.k-v-basis-list .k-fold-inner > .k-basis { max-width: none; }
  .k-v-basis-list .k-basis thead th:first-child { width: 26%; }
  .k-v-access .k-basis thead th:first-child { width: 20%; }
  .k-v-access ol.k-note-list { columns: 2; column-gap: 1.6rem; }
  .k-v-access ol.k-note-list li { break-inside: avoid; }
  .k-v-rates .k-rates thead th:first-child { width: 28%; }
  .k-v-rates .k-rates table { font-size: 0.97rem; }
  .k-v-flat-cost .k-flat-cost .k-fields { grid-template-columns: 1fr 1fr auto; }
}

/* ── the emergency centrepieces ───────────────────────────────────────────
   LAUNCH-PLAN.md §2.5, the L2 cluster. AUTHORSHIP.md §3 governs both: no red,
   no alarm colouring, no warning iconography. These use the same neutral card
   treatment as every other fold on the site, deliberately. */

.k-makesafe, .k-losses { margin: 1.6rem 0 0; }
.k-makesafe form, .k-losses form { margin: 0 0 1.1rem; }
.k-makesafe fieldset, .k-losses fieldset { border: 0; padding: 0; margin: 0 0 0.75rem; }
.k-makesafe legend, .k-losses legend { padding: 0; margin-bottom: 0.55rem;
  font-family: var(--display); font-weight: 600; color: var(--fold-ink); }
.k-makesafe label, .k-losses label { display: inline-grid;
  grid-template-columns: auto 1fr; gap: 0 0.55rem; align-items: start;
  vertical-align: top; line-height: 1.45; width: min(100%, 21rem);
  margin: 0 1.25rem 0.65rem 0; }
.k-makesafe-list, .k-loss-list { list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0.6rem; grid-template-columns: 1fr; }
.k-makesafe-list li, .k-loss-list li { margin: 0; max-width: none;
  padding: 0.75rem 0.9rem; background: var(--fold-card);
  border-left: 3px solid var(--fold-card-edge); font-size: 0.93rem; }
.k-makesafe-list li.k-on, .k-loss-list li.k-on {
  border-left-color: var(--fold-on-edge); background: var(--fold-on); }
.k-makesafe-list strong, .k-loss-list strong { display: block;
  font-family: var(--display); color: var(--fold-ink); margin-bottom: 0.2rem; }

@media (min-width: 48rem) {
  .k-makesafe-list { grid-template-columns: 1fr 1fr; }
  .k-loss-list { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64rem) {
  .k-t-core.k-v-telephone .k-fold-inner > .k-makesafe,
  .k-t-core.k-v-losses .k-fold-inner > .k-losses { max-width: none; }
  .k-v-telephone .k-makesafe-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .k-v-losses .k-loss-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .k-v-losses ol.k-note-list { columns: 2; column-gap: 1.6rem; }
  .k-v-losses ol.k-note-list li { break-inside: avoid; }
}

/* ── every fold table gets its own scroll container ───────────────────────
   .k-compare has had `overflow-x: auto` since the comparison table shipped,
   and every table component added since — the district matrix, the service
   triage, and the reference, instructional, regulatory, comparison and pricing
   tables — needed the same thing and did not have it. A three-column table of
   prose at 360px otherwise widens the document rather than scrolling inside
   itself, and the page scrolls sideways. The section scrolls; the page does
   not. */

.k-terms, .k-audit, .k-limits, .k-apart,
.k-checks, .k-calendar,
.k-threshold, .k-permission, .k-routes, .k-duties,
.k-positions, .k-spec-compare, .k-use,
.k-lines, .k-basis, .k-rates,
.k-models, .k-triage, .k-per-year, .k-matrix { overflow-x: auto; }

/* ── page photograph ─────────────────────────────────────────────────────
   Sits at the top of the body, between the fold band and the article. The
   intrinsic width/height attributes are emitted by the component so the
   space is reserved before the file loads and the article never jumps. */
.k-photo{ margin: 0; overflow: hidden; }
.k-photo img{
  display: block; width: 100%; height: auto;
  /* The source is 16:9. Letterboxing it here keeps the first heading on
     screen on a laptop — at the body's 46rem a 16:9 frame is over 400px
     tall and pushed "What we fix" below the fold. width/height stay on the
     element so the space is still reserved before the file loads. */
  aspect-ratio: 21 / 8; object-fit: cover; object-position: center 42%;
}
/* The photograph is the head of the band beneath it, not a loose banner:
   the band's top padding closes up so the two read as one element. */
.k-t-core .k-photo + .k-sec{ padding-top: clamp(1.75rem, 3vw, 2.5rem); }
.k-photo + h2{ margin-top: 1.5rem; }
@media (max-width: 40rem){
  /* Narrow: a 21:8 crop becomes a sliver, so give the height back. */
  .k-photo img{ aspect-ratio: 16 / 9; }
}