/* ==========================================================================
   Design tokens.

   Single source. Ten :root blocks had accumulated across releases; they are
   merged here with each block's own note kept above its group. Where a name was
   declared twice, the value that was already winning is the one kept.
   ========================================================================== */

:root {

  /* ==========================================================================
  Infrastructure Condition Index
  Visual system.
  
  Palette is sampled directly from the supplied ICI logo files rather than
  invented, so the site and the mark cannot drift apart.
  
  Structural rule used throughout: borders and fills encode what is known.
  A solid teal edge means a record exists. A dashed mist edge means it does
  not. Nothing is outlined purely for decoration.
  ========================================================================== */
  /* Sampled from ICI-symbol-transparent.png */
  --ink: #023458;
  --ink-deep: #011F36;
  --teal: #015D75;
  --teal-soft: #E4F0F4;
  --ember: #FD8516;
  --ember-soft: #FFF1E2;
  --mist: #C3D2D9;
  --mist-soft: #DAE3E8;
  --paper: #F6F9FA;
  --white: #FFFFFF;
  --measure: 66ch;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --rhythm: clamp(3rem, 7vw, 6rem);
  --radius-lozenge: 999px;
  --radius-panel: 3px;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-data: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* ==========================================================================
  ICI visual state and result system.
  
  Colour has a job here, and only one each:
  navy   authority, structure, headings
  teal   action, active, supported and assessed
  orange selective attention, unresolved only
  slate  supporting evidence, neutral context
  mist   quiet structure
  white  breathing space
  
  No state is carried by colour alone. Every one also has a label, a border
  treatment and a position in the hierarchy.
  ========================================================================== */
  --paper-warm: #FBFCFC;
  --navy-wash: #F0F4F6;
  --teal-line: rgba(1, 110, 139, 0.22);
  --orange-wash: #FEF4E9;

  /* ==========================================================================
  Colour rebalance.
  
  The page should read from several feet away as a light architectural
  surface with controlled ICI signals, not as a blue website. Navy is
  typography and restrained structure, not a background. Large dark slabs
  are removed. Slate and mist carry most separation and supporting surface.
  ========================================================================== */
  --surface: #FCFDFD;
  --surface-quiet: #F4F7F8;
  --hairline: #DFE7EB;
  --ink-neutral: #16232E;
  /* Condition band accents. Restrained progression inside the ICI palette,
  teal to slate to ember. Deliberately not a traffic light, and carrying
  no threshold: the band name is public product vocabulary. */
  --band-excellent: #016E8B;
  --band-good: #3D8DA3;
  --band-fair: #4E6E7C;
  --band-poor: #C9761F;
  --band-eol: #FD8516;

  /* ==========================================================================
  Button system and accessibility corrections.
  
  Every value below was measured, not judged. scripts/contrast.mjs reports
  the ratio for each pair and fails if any drops below its WCAG threshold.
  Presentation tints are derived along the same hue as the brand colour.
  The ICI logo itself is untouched.
  ========================================================================== */
  /* Text-safe derived tints, all at or above 4.5:1 on their surface. */
  --band-good-text: #377F93;
  --band-fair-text: #597A88;
  --band-poor-text: #AD651B;
  --band-eol-text: #B45E10;
  --border-strong: #8A959A;
  --ember-border: #DA7213;
  --ember-on-wash: #A85A0F;
  --focus-ring: #16232E;

  /* ==========================================================================
  Public experience recalibration.
  
  Palette expanded from the existing ICI mark: navy for authority, teal as
  the interactive colour, lighter teal and aqua for supportive surfaces and
  section fields, orange as a deliberate accent only. Lighter and greener
  without becoming an environmental-marketing site.
  ========================================================================== */
  --aqua-900: #01596F;
  --aqua-700: #016E8B;
  --aqua-500: #3D93A8;
  --aqua-300: #9AC5CF;
  --aqua-100: #DCEDF0;
  --aqua-50: #EEF6F7;
  --field: #F2F8F8;
  --field-deep: #E4F0F1;
  --warm-white: #FDFDFB;

  /* ==========================================================================
  Homepage rebuild.
  
  The old homepage was a stack of evenly weighted bands, which is why nothing
  stood out. This introduces three things it lacked: a spine, a colour range
  beyond the single light blue, and entrance movement that signals hierarchy
  rather than decorating it.
  ========================================================================== */
  /* The palette had one working accent. These extend it without leaving it:
  a deep ink ground for the closer, a warm sand for the comparison strip,
  and a moss that pairs with ember for the pillar marks. Ember was already
  a token and was barely used. */
  --ink-ground: #06263C;
  --sand: #F7F1E7;
  --sand-line: #E5D8C3;
  --moss: #2E6B5E;
  --moss-soft: #E6F0ED;
  --ember-line: rgba(253, 133, 22, 0.30);
  /* The brand orange measures 2.46:1 on white and is legitimate only as a
  fill, a border or a mark. This is its text-safe counterpart at 6.07:1,
  so the accent can appear in a label without failing contrast. */
  --ember-ink: #A34700;

  /* ==========================================================================
  Mobile navigation, redesigned.
  
  The open state was rejected for reading as unfinished: a dimmed logo, a
  control still labelled "Menu" while open, a white panel on grey, and no
  branded intent. This makes the open state a deliberate ICI surface rather
  than a default disclosure on a light background.
  
  Palette discipline, as ruled: navy carries structure, teal carries the
  primary action, cool light surfaces support, and orange appears only as a
  small active and focus accent. No grey on grey, no teal on teal.
  ========================================================================== */
  /* One motion vocabulary. Everything below uses these rather than inventing
  its own timing, so interactions feel related rather than assorted. */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --masthead-h: 4.75rem;

  /* ================================================================
  ICI visual system v2 — bright public register, measured
  institutional register, one component set.
  Palette applied as tokens; foregrounds chosen for contrast.
  ================================================================ */
  --ici-navy: #023458;
  --ici-ink: #12232F;
  --ici-offwhite: #FBFAF8;
  --ici-white: #FFFFFF;
  --ici-sky: #DCEEF5;
  --ici-teal: #00B89C;
  --ici-teal-ink: #0A7A6A;
  --ici-sun: #FFC24B;
  --ev-documented: #1F6B4F;
  --ev-stated: #A96F1C;
  --ev-none: #45626F;
  --ici-hairline: #D9E3E8;
  --ici-radius: 4px;

  /* Contrast pass.
  --slate was #4E6E7C, which is 3.97:1 on white and 3.42:1 on the sky tint. It carries most
  of the secondary copy on the site, so every lede, caption and colophon line failed at rest.
  Darkened to clear 4.5:1 on both surfaces without changing the hue. */
  --slate: #4E6E7C;
  --ici-slate: #4E6E7C;

  /* --slate-text was #567684: 4.38:1 on white and lower on the warm safety tint, so it failed
  everywhere it carried body copy. Same hue, enough contrast. Remaining hard-coded muted
  inks are normalised with it so one token governs secondary text. */
  --slate-text: #45626F;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
}

/* ---------- Typography ---------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.12;
  letter-spacing: -0.021em;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.75rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); }
h3 { font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem); }
h4 { font-size: 1rem; letter-spacing: 0; }

p, ul, ol { margin: 0 0 1.1em; max-width: var(--measure); }
li { margin-bottom: 0.4em; }

a { color: var(--teal); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

.lead {
  font-size: clamp(1.125rem, 1.02rem + 0.6vw, 1.4375rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 40ch;
}

.muted { color: var(--slate); }

.fine {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--slate);
  max-width: 62ch;
}

.data { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* ---------- Layout -------------------------------------------------------- */

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

.shell-narrow { max-width: 50rem; }

.band { padding-block: var(--rhythm); }
.band-tight { padding-block: clamp(2rem, 4vw, 3.25rem); }
.band-ink { background: var(--ink); color: var(--white); }
.band-ink h2, .band-ink h3 { color: var(--white); }
.band-ink .muted { color: var(--mist); }
.band-ink a { color: var(--mist-soft); }
.band-paper { background: var(--white); }

.stack > * + * { margin-top: 1.5rem; }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 56rem) {
  .split { grid-template-columns: 1.15fr 0.85fr; }
  .split-even { grid-template-columns: 1fr 1fr; }
}

.grid-cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* ---------- Header and footer -------------------------------------------- */

.masthead {
  background: var(--white);
  border-bottom: 1px solid var(--mist);
  position: relative;
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
  padding-block: 0.75rem;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
/* Sizing lives in the header block at the end of this file, where the mark is
   sized by width with height derived. A fixed height here would contradict it. */
.brand img { display: block; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.nav a:not(.btn) {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
}
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { color: var(--teal); }
.nav-links { display: none; gap: inherit; }
@media (min-width: 52rem) { .nav-links { display: flex; gap: clamp(1rem, 2.5vw, 2rem); } }

.colophon {
  background: var(--ink-deep);
  color: var(--mist);
  padding-block: 3rem 2.5rem;
  font-size: 0.9375rem;
}
.colophon a { color: var(--white); text-decoration: none; }
.colophon a:hover { text-decoration: underline; }
.colophon h4, .colophon .colophon-h { color: var(--white); margin-bottom: 0.75rem; font-size: 0.9375rem; letter-spacing: 0; }
.colophon ul { list-style: none; padding: 0; margin: 0; }
.colophon li { margin-bottom: 0.45rem; }
.colophon-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-bottom: 2.5rem;
}
.colophon-note {
  border-top: 1px solid rgba(195, 210, 217, 0.28);
  padding-top: 1.5rem;
  color: var(--slate);
  font-size: 0.8125rem;
  max-width: 70ch;
}

/* ---------- Buttons ------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-lozenge);
  border: 1.5px solid transparent;
  font: inherit;
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn[disabled] { cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.875rem; align-items: center; }

/* ---------- Panels -------------------------------------------------------- */

.panel {
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: var(--radius-panel);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.panel-quiet { background: var(--white); border-color: var(--mist-soft); }

/* Left edge encodes record state. */
.rec { border-left: 3px solid var(--teal); }
.rec-absent { border-left: 3px dashed var(--mist); }
.rec-attention { border-left: 3px solid var(--ember); }

.callout {
  background: var(--teal-soft);
  border: 1px solid var(--mist);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-panel);
  padding: 1.25rem 1.5rem;
}
.callout-ember { background: var(--ember-soft); border-left-color: var(--ember); }
.callout p:last-child, .panel p:last-child, .panel ul:last-child { margin-bottom: 0; }

/* ---------- Evidence ring (signature element) ---------------------------- */

.ring-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 0;
}
.ring { width: min(17rem, 72vw); height: auto; }
.ring-seg { transition: fill 0.4s ease; }
.ring-count { font-size: 0.9375rem; color: var(--slate); text-align: center; max-width: 22ch; }

.ring-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: center;
  font-size: 0.875rem;
  color: var(--slate);
  list-style: none;
  padding: 0;
  margin: 0;
}
.ring-legend li { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; }
.swatch { width: 0.75rem; height: 0.75rem; border-radius: 3px; flex: none; }
.swatch-held { background: var(--teal); }
.swatch-missing { background: var(--white); border: 1.5px dashed var(--mist); }

/* ---------- Result verdict ------------------------------------------------ */

.verdict {
  border: 1px solid var(--mist);
  border-top: 4px solid var(--ink);
  border-radius: var(--radius-panel);
  background: var(--white);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.verdict-value {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
}
.verdict-label { font-size: 0.9375rem; font-weight: 650; color: var(--slate); margin: 0 0 0.35rem; }

/* ---------- System ledger ------------------------------------------------- */

.ledger { display: grid; gap: 0.875rem; }

.ledger-row {
  background: var(--white);
  border: 1px solid var(--mist-soft);
  border-radius: var(--radius-panel);
  padding: 1.1rem 1.25rem;
  display: grid;
  gap: 0.5rem 1.5rem;
}
@media (min-width: 44rem) {
  .ledger-row { grid-template-columns: 13rem 1fr; align-items: baseline; }
}
.ledger-name { font-weight: 650; margin: 0; }
.ledger-examples { font-size: 0.8125rem; color: var(--slate); margin: 0.15rem 0 0; }

.slot-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.slot {
  font-size: 0.8125rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-lozenge);
  border: 1.5px solid var(--mist);
  color: var(--slate);
  background: var(--white);
  margin: 0;
}
.slot-held { background: var(--teal-soft); border-color: var(--teal); border-style: solid; color: var(--ink); font-weight: 600; }
.slot-missing { border-style: dashed; }

.tag-absent {
  font-size: 0.8125rem;
  color: var(--slate);
  font-style: normal;
}

/* ---------- Forms --------------------------------------------------------- */

.field { margin-bottom: 1.5rem; max-width: 34rem; }
.field label, .fieldset-legend {
  display: block;
  font-weight: 650;
  margin-bottom: 0.4rem;
  color: var(--ink);
}
.field-hint { font-size: 0.875rem; color: var(--slate); margin: 0 0 0.6rem; }

input[type="text"], select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--mist);
  border-radius: var(--radius-panel);
}
input[type="text"]:focus, select:focus { border-color: var(--teal); }

fieldset { border: 0; padding: 0; margin: 0 0 1.75rem; }
legend { padding: 0; }

.choice-list { display: grid; gap: 0.625rem; list-style: none; padding: 0; margin: 0; }

.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border: 1.5px solid var(--mist);
  border-radius: var(--radius-panel);
  background: var(--white);
  cursor: pointer;
  margin: 0;
}
.choice:hover { border-color: var(--slate); }
.choice input { margin-top: 0.28rem; flex: none; accent-color: var(--teal); width: 1.05rem; height: 1.05rem; }
.choice-body { flex: 1; }
.choice-title { font-weight: 600; display: block; }
.choice-note { font-size: 0.8125rem; color: var(--slate); display: block; margin-top: 0.15rem; }
.choice:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); }

.lane-caption {
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--slate);
  margin: 1.25rem 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--mist-soft);
  max-width: none;
}

.step-heading { margin-bottom: 0.35rem; }
.step-of { font-size: 0.875rem; color: var(--slate); margin-bottom: 1.5rem; }

/* ---------- States -------------------------------------------------------- */

.state-block {
  text-align: left;
  max-width: 40rem;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.state-code {
  font-family: var(--font-data);
  font-size: 0.875rem;
  color: var(--slate);
  margin-bottom: 0.75rem;
}

.loading { color: var(--slate); }

/* ---------- Accessibility ------------------------------------------------- */

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

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 20;
  background: var(--ink);
  color: var(--white);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-panel);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.5rem; color: var(--white); }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .masthead, .colophon, .btn { display: none; }
  body { background: var(--white); }
}

/* ---------- Fact-based intake and result ------------------------------- */

.choice-inline { grid-auto-flow: column; grid-auto-columns: 1fr; }
@media (max-width: 40rem) { .choice-inline { grid-auto-flow: row; } }

.applicability-row { margin-bottom: 2rem; }

.fact-block {
  border: 1px solid var(--mist);
  border-radius: var(--radius-panel);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  background: var(--white);
}
.fact-block legend { font-size: 1.0625rem; padding: 0 0.4rem; }

.fact-grid { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .fact-grid { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.fact-grid .field { margin-bottom: 0.5rem; max-width: none; }

.system-score { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.system-score .data { font-size: 1.75rem; }
.system-score-none { font-size: 1rem; font-weight: 600; color: var(--slate); }



/* ---------- Result composition ------------------------------------------ */

.result-shell { max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); }

.result-context { padding-block: clamp(2rem, 4vw, 3rem) 0; }
.result-context h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  margin-bottom: 0.2rem;
}
.result-context .result-meta {
  color: var(--slate);
  font-size: 0.9375rem;
  margin: 0;
}

/* Desktop composition: findings lead, context sits beside them. */
.result-layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 68rem) {
  .result-layout { grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 0.75fr); }
  .result-aside { position: sticky; top: 2rem; }
}

.section-lead {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--slate);
  margin: 0 0 0.75rem;
}
.section-lead-strong { color: var(--ink); }

/* ---------- Assessed system, the hero content --------------------------- */

.assessed-list { display: grid; gap: 0; border-top: 1px solid var(--mist); }

.assessed {
  display: grid;
  gap: 0.5rem 1.5rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) 0;
  border-bottom: 1px solid var(--mist);
  align-items: center;
}
@media (min-width: 44rem) {
  .assessed { grid-template-columns: 1fr auto; }
}

.assessed-name { font-size: 1.125rem; font-weight: 650; margin: 0; color: var(--ink); }
.assessed-facts { font-size: 0.875rem; color: var(--slate); margin: 0.2rem 0 0; }

.assessed-figure { display: flex; align-items: baseline; gap: 0.6rem; }
.assessed-index {
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.assessed-band { font-size: 1rem; font-weight: 650; color: var(--teal); }

/* Segmented condition line. Equal segments, one per governed band, current
   band marked. Deliberately not proportional and carrying no axis, so no
   threshold is expressed or inferable. */
.band-line { display: flex; gap: 3px; margin-top: 0.6rem; width: 8.5rem; }
.band-seg { height: 5px; flex: 1; border-radius: 2px; background: var(--mist-soft); }
.band-seg-on { background: var(--teal); }
.band-line-caption {
  font-size: 0.75rem; color: var(--slate); margin: 0.35rem 0 0;
}

/* ---------- Unresolved, deliberately not a warning ---------------------- */

.unresolved {
  border: 1px solid var(--mist);
  border-left: 3px solid var(--ember);
  background: var(--white);
  border-radius: var(--radius-panel);
  padding: 1.25rem 1.4rem;
  margin-bottom: 0.875rem;
}
.unresolved-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.5rem 0.875rem; margin-bottom: 0.35rem;
}
.unresolved-name { font-size: 1.0625rem; font-weight: 650; margin: 0; }

/* A neutral status word, never a severity. */
.status-chip {
  font-size: 0.75rem; font-weight: 650;
  padding: 0.2rem 0.6rem; border-radius: var(--radius-lozenge);
  border: 1px solid var(--mist); color: var(--slate); background: var(--navy-wash);
}
.status-chip-recorded { border-color: var(--slate); color: var(--ink); }
.status-chip-attention { background: var(--orange-wash); }
.status-chip-assessed { border-color: var(--teal); background: var(--teal-soft); color: var(--ink); }

.unresolved p { font-size: 0.9375rem; color: var(--slate); margin: 0; max-width: 58ch; }

/* ---------- Overall index panel ----------------------------------------- */

.overall {
  border: 1px solid var(--mist);
  border-top: 3px solid var(--ink);
  border-radius: var(--radius-panel);
  background: var(--white);
  padding: clamp(1.4rem, 3vw, 1.9rem);
}
.overall-label {
  font-size: 0.8125rem; font-weight: 700; color: var(--slate);
  margin: 0 0 0.75rem; line-height: 1.35; max-width: 22ch;
}
.overall-value {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
  margin: 0 0 0.6rem; color: var(--ink);
}
.overall-value-pending { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem); }
.overall p { font-size: 0.9375rem; color: var(--slate); margin: 0; line-height: 1.55; }
.overall .band-line { width: 100%; max-width: 12rem; }

/* ---------- Core status, compact ---------------------------------------- */

.core-list { list-style: none; padding: 0; margin: 0; }
.core-item {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--mist-soft);
  font-size: 0.9375rem; margin: 0;
}
.core-item:last-child { border-bottom: 0; }
.core-role { font-weight: 600; color: var(--ink); }
.core-state { color: var(--slate); text-align: right; font-size: 0.875rem; }

/* ---------- Continuation ------------------------------------------------- */

.continuation {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-panel);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  margin-top: 3rem;
}
.continuation h2 { color: var(--white); font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); }
.continuation p { color: var(--mist); max-width: 52ch; }
.continuation .fine { color: var(--slate); }

/* ---------- Progressive disclosure -------------------------------------- */

details.disclose { border-top: 1px solid var(--mist); padding-top: 1rem; margin-top: 1.5rem; }
details.disclose > summary {
  cursor: pointer; font-weight: 650; font-size: 0.9375rem;
  color: var(--ink); list-style: none; padding: 0.25rem 0;
}
details.disclose > summary::-webkit-details-marker { display: none; }
details.disclose > summary::before { content: '+ '; color: var(--teal); font-weight: 700; }
details[open].disclose > summary::before { content: '– '; }
details.disclose .fine { margin-top: 0.75rem; }

/* ---------- Intake refinements ------------------------------------------ */

.intake-progress { display: flex; gap: 4px; margin-bottom: 1.75rem; }
.intake-progress span { height: 4px; flex: 1; border-radius: 2px; background: var(--mist-soft); }
.intake-progress span.done { background: var(--teal); }

@media (min-width: 68rem) {
  .shell-narrow { max-width: 54rem; }
}



body { background: var(--surface); }

/* Structure comes from hairlines and whitespace, not blue rules. */
.assessed-list { border-top: 1px solid var(--hairline); }
.assessed { border-bottom: 1px solid var(--hairline); }
.core-item { border-bottom: 1px solid var(--hairline); }
details.disclose { border-top: 1px solid var(--hairline); }
.masthead { border-bottom: 1px solid var(--hairline); background: var(--surface); }

/* Score numerals read as building information, not as a link. */
.assessed-index { color: var(--ink-neutral); }

/* The band, not the number, carries the condition distinction. */
.assessed-band { font-weight: 700; }
.band-excellent .assessed-band { color: var(--band-excellent); }
.band-good     .assessed-band { color: var(--band-good); }
.band-fair     .assessed-band { color: var(--band-fair); }
.band-poor     .assessed-band { color: var(--band-poor); }
.band-eol      .assessed-band { color: var(--band-eol); }

.band-excellent .band-seg-on { background: var(--band-excellent); }
.band-good     .band-seg-on { background: var(--band-good); }
.band-fair     .band-seg-on { background: var(--band-fair); }
.band-poor     .band-seg-on { background: var(--band-poor); }
.band-eol      .band-seg-on { background: var(--band-eol); }
.band-seg { background: var(--hairline); }

/* Overall panel: quiet surface, not a slab. */
.overall {
  background: var(--surface-quiet);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--slate);
}
.overall-available { border-top-color: var(--band-excellent); }
.overall-pending { border-top-color: var(--ember); }

/* Continuation: light premium panel, not a dark hero. */
.continuation {
  background: var(--surface-quiet);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--teal);
  padding: clamp(1.5rem, 3vw, 2rem);
  margin-top: 3.5rem;
  display: grid;
  gap: 1.25rem 2.5rem;
}
@media (min-width: 56rem) { .continuation { grid-template-columns: 1.2fr auto; align-items: center; } }
.continuation h2 { color: var(--ink); font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem); margin-bottom: 0.4rem; }
.continuation p { color: var(--slate); max-width: 54ch; margin: 0 0 0.5rem; font-size: 0.9375rem; }
.continuation .fine { color: var(--slate); margin: 0; }
.continuation-relationship {
  font-size: 0.8125rem; font-weight: 650; color: var(--teal);
  margin: 0 0 0.5rem; letter-spacing: 0.01em;
}

/* Footer: typographic and light. It carries little information and should
   not be one of the most prominent objects on the page. */
.colophon {
  background: var(--surface);
  color: var(--slate);
  border-top: 1px solid var(--hairline);
  padding-block: 2.25rem 1.75rem;
  font-size: 0.875rem;
}
.colophon a { color: var(--ink); }
.colophon h4, .colophon .colophon-h { color: var(--ink); font-size: 0.8125rem; }
.colophon-grid { gap: 1.5rem 2rem; margin-bottom: 1.75rem; }
.colophon-note { border-top: 1px solid var(--hairline); color: var(--slate); padding-top: 1.25rem; }
.colophon-note p { margin-bottom: 0.5rem; }

/* Status chips: mist and slate carry the neutral states. */
.status-chip-recorded { background: var(--surface-quiet); border-color: var(--hairline); color: var(--slate); }

/* Result layout, mobile-first DOM order with deliberate desktop placement. */
.result-layout { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
@media (min-width: 68rem) {
  .result-layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 0.72fr);
    column-gap: clamp(3rem, 5vw, 5rem);
    align-items: start;
  }
  .result-primary { grid-column: 1; grid-row: 1; }
  .result-aside   { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 2rem; }
  .result-secondary { grid-column: 1; grid-row: 2; }
  .continuation { grid-column: 1 / -1; }
}
@media (min-width: 100rem) {
  .result-shell { max-width: 88rem; }
}

.visually-hidden-band { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }



/* Supporting text now uses the text-safe slate everywhere it is read. */
.muted, .fine, .assessed-facts, .core-state, .ledger-examples,
.field-hint, .choice-note, .result-meta, .section-lead,
.ring-count, .continuation p, .continuation .fine, .colophon,
.overall p, .unresolved p, .status-chip-recorded {
  color: var(--slate-text);
}

/* Band labels: text-safe tints. The segment fills keep the brand hues,
   which is legitimate because they are non-text UI carrying no meaning
   on their own. */
.band-good  .assessed-band { color: var(--band-good-text); }
.band-fair  .assessed-band { color: var(--band-fair-text); }
.band-poor  .assessed-band { color: var(--band-poor-text); }
.band-eol   .assessed-band { color: var(--band-eol-text); }

.status-chip-attention { color: var(--ember-on-wash); border-color: var(--ember-border); }

/* ---------- One canonical button system --------------------------------- */

.btn {
  min-height: 2.75rem;              /* 44px touch target */
  padding: 0.8rem 1.55rem;
  border-radius: var(--radius-lozenge);
  border: 1.5px solid transparent;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: 0.005em;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* PRIMARY. One treatment, used on home, intake, result, continuation and
   header. Measured 5.83:1. */
.btn-primary { background: var(--teal); color: var(--white); border-color: var(--teal); }
.btn-primary:hover { background: #01485C; border-color: #01485C; color: var(--white); }
.btn-primary:active { background: #014C60; border-color: #014C60; }
.btn-primary[disabled] { background: var(--mist); border-color: var(--mist); color: #4A5B64; opacity: 1; }

/* SECONDARY. Clearly a different treatment, not a second fill. 12.85:1 text,
   3.07:1 border. */
.btn-secondary { background: var(--white); color: var(--ink); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-quiet); border-color: var(--ink); color: var(--ink); }
.btn-secondary:active { background: var(--mist-soft); }

/* TERTIARY. Text action. */
.btn-tertiary {
  background: none; border-color: transparent; color: var(--ink);
  padding-inline: 0.4rem; text-decoration: underline; text-underline-offset: 0.22em;
}
.btn-tertiary:hover { color: var(--teal); background: none; }

/* The second filled variant is retired and no markup references it. */

/* ---------- Focus -------------------------------------------------------- */

/* Dual ring. The white inner ring carries contrast on dark and saturated
   surfaces, the dark outer ring carries it on light ones, so the indicator
   is visible against white, mist, teal and navy alike. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 0;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 6px var(--focus-ring);
  border-radius: 3px;
}
.btn:focus-visible { box-shadow: 0 0 0 2px var(--white), 0 0 0 6px var(--focus-ring); outline: none; }

.choice:has(input:focus-visible) { border-color: var(--teal); }

/* ==========================================================================
   Closeout corrections: header responsiveness and large-screen composition.
   Bounded. No hierarchy, palette or navigation architecture change.
   ========================================================================== */

/* ---------- Header ------------------------------------------------------- */

/* The CTA label must never wrap, and nav labels should not break mid-phrase.
   Achieved by tightening spacing and preventing breaks rather than by
   shrinking type or making the header taller. */
.masthead-inner { gap: 1rem; min-height: 4.25rem; }

.nav { gap: clamp(0.875rem, 1.6vw, 1.75rem); }
.nav-links { gap: clamp(0.875rem, 1.6vw, 1.75rem); }
.nav a:not(.btn) { white-space: nowrap; }
.nav .btn { white-space: nowrap; flex: none; }

/* The primary action in the header is slightly more compact than a page CTA
   while keeping the canonical treatment, colour and 44px target. */
.masthead .btn-primary {
  padding-inline: 1.15rem;
  font-size: 0.9375rem;
}

/* The nav appears only when there is genuinely room for it on one line, so
   labels never wrap at any width. */
@media (min-width: 52rem) and (max-width: 63.99rem) {
  .nav-links { display: none; }
}
@media (min-width: 64rem) {
  .nav-links { display: flex; }
}

/* ---------- Large-screen composition ------------------------------------- */

/* The supporting column held a short amount of content in a wide track,
   which read as dead space. Narrowing the track and letting the primary
   column take the width is a composition fix, not a density fix.
   Whitespace below the column is acceptable and left alone. */
@media (min-width: 68rem) {
  .result-layout {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
    column-gap: clamp(2.5rem, 4vw, 4rem);
  }
  .result-aside { grid-row: 1; }
  .result-secondary { grid-row: 2; }
}

/* At very large widths the measure is capped so body copy never stretches,
   and the shell stops growing rather than floating in an empty field. */
@media (min-width: 100rem) {
  .result-shell { max-width: 82rem; }
}

.assessed-facts { max-width: 60ch; }
.overall p, .unresolved p { max-width: 46ch; }



body { background: var(--warm-white); }

/* ---------- Section fields ---------------------------------------------- */

.field-tint { background: var(--surface); }
.field-deep { background: var(--field-deep); }
.field-aqua { background: linear-gradient(180deg, var(--aqua-50) 0%, var(--surface) 100%); }

.band-wide { padding-block: clamp(3.5rem, 6vw, 7rem); }

/* ---------- Large-screen canvas ------------------------------------------ */

.shell-wide { width: 100%; max-width: 94rem; margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 120rem) { .shell-wide { max-width: 104rem; } }

.prose { max-width: 34ch; }
.prose-wide { max-width: 46ch; }

/* ---------- Hero ---------------------------------------------------------- */

.hero { padding-block: clamp(2.5rem, 5vw, 5rem) clamp(3rem, 5vw, 5.5rem); }

.hero-grid { display: grid; gap: clamp(2.5rem, 4vw, 4.5rem); align-items: center; }
@media (min-width: 62rem) { .hero-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } }

.hero h1 {
  font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: 0.6rem;
}
.hero-sub {
  font-size: clamp(1.0625rem, 0.98rem + 0.5vw, 1.3125rem);
  line-height: 1.5; color: var(--slate-text); max-width: 30ch; margin-bottom: 1.75rem;
}
.hero-note { font-size: 0.875rem; color: var(--slate-text); margin-top: 1rem; }

/* ---------- Interactive evidence ring ------------------------------------ */

.ring-demo {
  background: var(--white);
  border: 1px solid var(--aqua-100);
  border-radius: 6px;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  box-shadow: 0 1px 2px rgba(2, 52, 88, 0.04), 0 12px 32px -18px rgba(2, 52, 88, 0.22);
}
.ring-demo-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.ring-demo-label { font-size: 0.75rem; font-weight: 700; color: var(--aqua-700); margin: 0; }
.ring-demo-tag {
  font-size: 0.6875rem; font-weight: 650; color: var(--slate-text);
  border: 1px solid var(--aqua-100); background: var(--aqua-50);
  padding: 0.2rem 0.55rem; border-radius: 999px;
}

.ring-demo-body { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 40rem) { .ring-demo-body { grid-template-columns: auto minmax(0, 1fr); } }

.ring-svg { width: min(15rem, 60vw); height: auto; display: block; margin-inline: auto; }
.lozenge { cursor: pointer; transition: opacity 0.15s ease, transform 0.15s ease; transform-origin: center; }
.lozenge:hover { opacity: 0.72; }
.lozenge:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.lozenge.is-active { opacity: 1; }

.ring-centre-count {
  font-size: 2.5rem; font-weight: 700; fill: var(--ink-neutral); letter-spacing: -0.03em;
}
.ring-centre-of { font-size: 0.875rem; font-weight: 650; fill: var(--slate-text); }

.record-card {
  border: 1px solid var(--aqua-100);
  border-left: 3px solid var(--aqua-700);
  border-radius: 4px;
  background: var(--aqua-50);
  padding: 1rem 1.15rem;
  min-height: 12.5rem;
}
.record-card.is-missing { border-left-color: var(--ember); background: var(--orange-wash); }
.record-system { font-size: 1.0625rem; font-weight: 700; margin: 0 0 0.15rem; color: var(--ink); }
.record-type { font-size: 0.875rem; color: var(--slate-text); margin: 0 0 0.75rem; }
.record-status {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.75rem; font-weight: 700; padding: 0.22rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--aqua-700); color: var(--aqua-900); background: var(--white);
  margin-bottom: 0.75rem;
}
.record-card.is-missing .record-status { border-color: var(--ember-border); color: var(--ember-on-wash); }
.record-line { font-size: 0.875rem; margin: 0 0 0.3rem; color: var(--ink); }
.record-line span { color: var(--slate-text); }
.record-hint { font-size: 0.8125rem; color: var(--slate-text); margin: 0.6rem 0 0; }

.ring-legend-2 { display: flex; gap: 1.25rem; font-size: 0.8125rem; color: var(--slate-text); margin-top: 1rem; }
.ring-legend-2 span { display: inline-flex; align-items: center; gap: 0.4rem; }
.dot { width: 0.7rem; height: 0.4rem; border-radius: 999px; display: inline-block; }
.dot-on { background: var(--aqua-700); }
.dot-off { background: var(--white); border: 1.5px dashed var(--mist); }

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

.value-grid { display: grid; gap: clamp(1.25rem, 2vw, 2rem); }
@media (min-width: 46rem) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 74rem) { .value-grid { grid-template-columns: repeat(4, 1fr); } }

.value-card { border-top: 2px solid var(--aqua-300); padding-top: 1.1rem; }
.value-card:nth-child(3) { border-top-color: var(--ember); }
.value-card h3 { font-size: 1.0625rem; margin-bottom: 0.35rem; }
.value-card p { font-size: 0.9375rem; color: var(--slate-text); margin: 0; max-width: 32ch; }

/* ---------- Media blocks -------------------------------------------------- */

.media-split { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 62rem) {
  .media-split { grid-template-columns: 1fr 1.15fr; }
  .media-split.is-reversed > figure { order: 2; }
}
.media-figure { margin: 0; border-radius: 6px; overflow: hidden; background: var(--field-deep); }
.media-figure img { display: block; width: 100%; height: auto; }
.media-caption {
  font-size: 0.8125rem; color: var(--slate-text);
  padding: 0.7rem 0.15rem 0; margin: 0;
}

/* ---------- Comparison: condition vs evidence ---------------------------- */

.versus { display: grid; gap: 1.25rem; }
@media (min-width: 46rem) { .versus { grid-template-columns: 1fr 1fr; } }
.versus-card { background: var(--white); border: 1px solid var(--aqua-100); border-radius: 5px; padding: 1.5rem; }
.versus-card h3 { font-size: 1rem; color: var(--aqua-900); margin-bottom: 0.4rem; }
.versus-card p { font-size: 0.9375rem; color: var(--slate-text); margin: 0; }
.versus-rule { height: 3px; width: 3rem; border-radius: 999px; background: var(--aqua-700); margin-bottom: 0.9rem; }
.versus-card.is-evidence .versus-rule { background: var(--aqua-300); }

/* ---------- Property intelligence ---------------------------------------- */

.intel-card {
  background: var(--white); border: 1px solid var(--aqua-100);
  border-top: 3px solid var(--ember); border-radius: 5px;
  padding: clamp(1.25rem, 2.5vw, 1.75rem); max-width: 27rem;
}
.intel-kicker { font-size: 0.75rem; font-weight: 700; color: var(--ember-on-wash); margin: 0 0 0.4rem; }
.intel-card h3 { font-size: 1.1875rem; margin-bottom: 0.4rem; }
.intel-card p { font-size: 0.9375rem; color: var(--slate-text); margin: 0 0 0.9rem; }
.intel-list { list-style: none; padding: 0; margin: 0 0 0.9rem; }
.intel-list li {
  font-size: 0.875rem; padding: 0.45rem 0; border-top: 1px solid var(--aqua-100);
  color: var(--ink); margin: 0;
}
.intel-meta { font-size: 0.75rem; color: var(--slate-text); margin: 0; }
.intel-never {
  font-size: 0.8125rem; color: var(--slate-text); margin-top: 1rem;
  border-left: 2px solid var(--aqua-300); padding-left: 0.85rem; max-width: 40ch;
}

/* ---------- Continuation strip ------------------------------------------- */

.flow { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.flow-node {
  font-size: 0.8125rem; font-weight: 700; padding: 0.45rem 0.9rem;
  border-radius: 999px; border: 1.5px solid var(--aqua-700); color: var(--aqua-900); background: var(--white);
}
.flow-node.is-target { border-color: var(--ink); color: var(--white); background: var(--ink); }
.flow-arrow { color: var(--aqua-500); font-weight: 700; }

.transfer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
@media (min-width: 46rem) { .transfer-list { grid-template-columns: 1fr 1fr; } }
.transfer-list li {
  font-size: 0.9375rem; padding: 0.6rem 0.85rem; margin: 0;
  background: var(--white); border: 1px solid var(--aqua-100); border-radius: 4px; color: var(--ink);
}

/* ---------- Method status strip ------------------------------------------ */

.status-strip {
  background: var(--white); border: 1px solid var(--aqua-100);
  border-left: 3px solid var(--aqua-500); border-radius: 5px;
  padding: 1.25rem 1.5rem; display: grid; gap: 0.75rem 2rem;
}
@media (min-width: 56rem) { .status-strip { grid-template-columns: 1fr auto; align-items: center; } }
.status-strip p { margin: 0; font-size: 0.9375rem; color: var(--slate-text); max-width: 62ch; }
.status-strip strong { color: var(--ink); }

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

.colophon { background: var(--surface); border-top: 1px solid var(--aqua-100); padding-block: 2.5rem 2rem; }
.colophon-lede { font-size: 0.9375rem; color: var(--slate-text); max-width: 34ch; margin: 0.35rem 0 0; }
.colophon-brand { font-size: 0.9375rem; font-weight: 700; color: var(--ink); margin: 0; }

/* ==========================================================================
   Final public completion: large-screen hero, steps, flows, intelligence,
   transfer states. Direction unchanged; composition finished.
   ========================================================================== */

/* ---------- Hero at large widths ----------------------------------------- */

.hero { position: relative; }
.hero-grid { align-items: center; }

@media (min-width: 90rem) {
  /* The evidence interaction becomes part of the hero rather than a card
     beside it: it takes the larger share of the canvas as the screen grows. */
  .hero-grid { grid-template-columns: minmax(26rem, 0.78fr) minmax(0, 1.22fr); gap: 5rem; }
  .hero { padding-block: 4.5rem 6rem; }
  .ring-demo { padding: 2.25rem 2.5rem; }
  .ring-svg { width: 19rem; }
  .ring-demo-body { grid-template-columns: auto minmax(0, 1fr); gap: 2.5rem; }
  .record-card { min-height: 14rem; padding: 1.35rem 1.5rem; }
}
@media (min-width: 120rem) {
  .hero-grid { gap: 6.5rem; }
  .ring-svg { width: 22rem; }
}

/* A quiet architectural field behind the hero so it does not read as a
   headline floating in white space. */
.hero-field {
  background:
    linear-gradient(180deg, var(--aqua-50) 0%, rgba(238, 246, 247, 0) 78%),
    var(--warm-white);
}

/* ---------- Numbered visual steps ---------------------------------------- */

.steps { display: grid; gap: clamp(1.5rem, 2.5vw, 2.25rem); counter-reset: step; }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
  border-top: 2px solid var(--aqua-300);
  padding-top: 1.1rem;
  counter-increment: step;
}
.step::before {
  content: counter(step);
  display: block; font-size: 0.8125rem; font-weight: 700;
  color: var(--aqua-700); margin-bottom: 0.5rem;
}
.step h3 { font-size: 1.0625rem; margin-bottom: 0.3rem; }
.step p { font-size: 0.9375rem; color: var(--slate-text); margin: 0; max-width: 34ch; }

/* A small piece of product UI shown inside a step. */
.step-ui {
  margin-top: 0.9rem; background: var(--white); border: 1px solid var(--aqua-100);
  border-radius: 4px; padding: 0.7rem 0.85rem; font-size: 0.8125rem; color: var(--ink);
}
.step-ui b { display: block; font-size: 0.75rem; color: var(--slate-text); font-weight: 650; margin-bottom: 0.25rem; }

/* ---------- Institutional flow -------------------------------------------- */

.chain { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 2rem; }
.chain-node {
  font-size: 0.8125rem; font-weight: 650; padding: 0.4rem 0.8rem; border-radius: 4px;
  background: var(--white); border: 1px solid var(--aqua-100); color: var(--ink);
}
.chain-node.is-end { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chain-sep { color: var(--aqua-500); font-weight: 700; }

.outcome-grid { display: grid; gap: 1.25rem; }
@media (min-width: 46rem) { .outcome-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 74rem) { .outcome-grid { grid-template-columns: repeat(3, 1fr); } }
.outcome {
  background: var(--white); border: 1px solid var(--aqua-100);
  border-radius: 5px; padding: 1.25rem 1.4rem;
}
.outcome h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.outcome p { font-size: 0.9375rem; color: var(--slate-text); margin: 0; }

/* ---------- Property intelligence grid ------------------------------------ */

.intel-grid { display: grid; gap: 1.25rem; }
@media (min-width: 50rem) { .intel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 84rem) { .intel-grid { grid-template-columns: repeat(4, 1fr); } }
.intel-grid .intel-card { max-width: none; }
.intel-card dl { margin: 0 0 0.9rem; font-size: 0.8125rem; }
.intel-card dt { color: var(--slate-text); font-weight: 650; margin-top: 0.45rem; }
.intel-card dd { margin: 0.1rem 0 0; color: var(--ink); }

/* ---------- AHR transfer states ------------------------------------------- */

.transfer-panel {
  background: var(--white); border: 1px solid var(--aqua-100);
  border-radius: 6px; padding: clamp(1.35rem, 2.5vw, 2rem);
  max-width: 44rem;
}
.transfer-steps { display: flex; gap: 0.4rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.transfer-steps span {
  font-size: 0.75rem; font-weight: 650; color: var(--slate-text);
  padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--aqua-100);
}
.transfer-steps span.is-current { background: var(--aqua-700); border-color: var(--aqua-700); color: var(--white); }
.transfer-steps span.is-done { background: var(--aqua-50); border-color: var(--aqua-300); color: var(--aqua-900); }

.route-choice { display: grid; gap: 0.75rem; margin: 1.25rem 0; }
@media (min-width: 40rem) { .route-choice { grid-template-columns: 1fr 1fr; } }
.route {
  display: block; text-align: left; width: 100%;
  border: 1.5px solid var(--aqua-100); background: var(--white);
  border-radius: 5px; padding: 1rem 1.15rem; cursor: pointer; font: inherit;
}
.route:hover { border-color: var(--aqua-500); }
.route[aria-pressed="true"] { border-color: var(--aqua-700); background: var(--aqua-50); }
.route b { display: block; font-size: 0.9375rem; color: var(--ink); }
.route span { display: block; font-size: 0.8125rem; color: var(--slate-text); margin-top: 0.15rem; }

.consent-box {
  border: 1px solid var(--aqua-100); background: var(--aqua-50);
  border-radius: 5px; padding: 1rem 1.15rem; margin: 1.25rem 0;
}
.consent-box label { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9375rem; cursor: pointer; }
.consent-box input { margin-top: 0.25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--aqua-700); flex: none; }

.state-note {
  border-left: 3px solid var(--aqua-500); padding: 0.85rem 1.1rem;
  background: var(--surface); border-radius: 0 4px 4px 0; font-size: 0.9375rem; color: var(--ink);
  margin-top: 1.25rem;
}
.state-note.is-error { border-left-color: var(--ember); background: var(--orange-wash); }
.state-note.is-done { border-left-color: var(--aqua-700); background: var(--aqua-50); }
.state-note strong { display: block; margin-bottom: 0.2rem; }
.state-note p { margin: 0; font-size: 0.875rem; color: var(--slate-text); }

.integration-flag {
  font-size: 0.75rem; font-weight: 650; color: var(--ember-on-wash);
  background: var(--orange-wash); border: 1px solid var(--ember-border);
  border-radius: 999px; padding: 0.2rem 0.6rem; display: inline-block; margin-bottom: 0.75rem;
}

/* ---------- Legal pages ---------------------------------------------------- */

.legal { max-width: 42rem; }
.legal h2 { font-size: 1.25rem; margin-top: 2.5rem; scroll-margin-top: 5rem; }
.legal p, .legal li { font-size: 0.9375rem; }
.legal-toc { background: var(--surface); border-radius: 5px; padding: 1.1rem 1.35rem; margin-bottom: 2rem; }
.legal-toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.legal-toc li { margin: 0; font-size: 0.9375rem; }

/* ---------- Result: coverage and next action ------------------------------ */

.assessed-extra { margin-top: 0.6rem; display: grid; gap: 0.3rem; }
.assessed-extra p { margin: 0; font-size: 0.8125rem; color: var(--slate-text); }
.assessed-extra b { color: var(--ink); font-weight: 650; }
.next-action {
  font-size: 0.8125rem; color: var(--aqua-900); background: var(--aqua-50);
  border: 1px solid var(--aqua-100); border-radius: 4px; padding: 0.4rem 0.65rem;
  display: inline-block; margin-top: 0.4rem;
}

/* ==========================================================================
   Architectural hero.

   The building is the visual hero. ICI is the layer that reveals what is
   known about it. The interface sits over the architecture rather than
   beside a coloured field.

   Imagery is swappable: replace the two files named in --hero-image and the
   composition holds. No layout depends on a specific photograph.
   ========================================================================== */

.hero-arch {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--warm-white);
}

.hero-arch-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-arch-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%;
  display: block;
}

/* A calm scrim so type stays legible over any supplied image without
   flattening the architecture into a colour block. */
.hero-arch::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(253, 253, 251, 0.97) 0%, rgba(253, 253, 251, 0.94) 30%,
      rgba(253, 253, 251, 0.72) 46%, rgba(253, 253, 251, 0.18) 62%, rgba(2, 52, 88, 0.06) 100%);
}

.hero-arch .hero-grid { position: relative; z-index: 1; }
.hero-arch { padding-block: clamp(3rem, 6vw, 7rem); }

@media (min-width: 62rem) {
  /* Text left, architecture visible right, evidence resolving over it. */
  .hero-arch .hero-grid { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
  .hero-arch { min-height: 40rem; display: flex; align-items: center; }
}
@media (min-width: 90rem) {
  .hero-arch { min-height: 46rem; }
  .hero-arch .hero-grid { grid-template-columns: minmax(24rem, 0.72fr) minmax(0, 1.28fr); }
}
@media (min-width: 120rem) {
  .hero-arch { min-height: 52rem; }
}

/* On narrow screens the image sits above the text rather than behind it, so
   the architecture is still present and the type is never compromised. */
@media (max-width: 61.99rem) {
  .hero-arch-media { position: relative; inset: auto; height: 14rem; margin-bottom: 1.75rem; }
  .hero-arch-media img { border-radius: 5px; }
  .hero-arch::after { display: none; }
  .hero-arch { padding-top: 1.5rem; }
}

/* The evidence card gains depth so it reads as resolving out of the scene. */
.hero-arch .ring-demo {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-color: rgba(154, 197, 207, 0.6);
  box-shadow: 0 2px 4px rgba(2, 52, 88, 0.06), 0 26px 60px -28px rgba(2, 52, 88, 0.38);
}

.hero-credit {
  position: absolute; right: var(--gutter); bottom: 0.75rem; z-index: 1;
  font-size: 0.6875rem; color: var(--slate-text); opacity: 0.75;
}
@media (max-width: 61.99rem) { .hero-credit { display: none; } }

/* ---------- Stewardship band --------------------------------------------- */

.stewardship { position: relative; overflow: hidden; }
.stewardship-media { position: absolute; inset: 0; z-index: -2; }
.stewardship-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.stewardship::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(253,253,251,0.96) 0%, rgba(253,253,251,0.9) 38%, rgba(253,253,251,0.45) 60%, rgba(253,253,251,0.12) 100%);
}
@media (max-width: 61.99rem) {
  .stewardship-media { position: relative; inset: auto; height: 12rem; margin-bottom: 1.5rem; }
  .stewardship::after { display: none; }
}

/* ==========================================================================
   Form field alignment.

   Defect: in a row of fields, a label that wraps to two lines pushed its
   control below the neighbouring controls, so "Where does that come from?"
   visibly sagged. Fixed at the component level rather than by patching that
   one row: every field becomes a two-row grid whose label area is one track
   and whose control is another, so all controls in a row share a baseline
   regardless of label length. Labels are never truncated.
   ========================================================================== */

.fact-grid { align-items: stretch; }

.fact-grid .field {
  display: grid;
  grid-template-rows: auto 1fr;   /* label area, then control pinned below */
  align-content: start;
  margin-bottom: 0;
}
.fact-grid .field > label {
  align-self: start;
  margin-bottom: 0.45rem;
  line-height: 1.3;
}
.fact-grid .field > input,
.fact-grid .field > select {
  align-self: end;                /* control sits at the bottom of its cell */
}

/* On a single-column stack the extra track collapses naturally. */
@media (max-width: 39.99rem) {
  .fact-grid .field { grid-template-rows: auto auto; }
  .fact-grid .field + .field { margin-top: 1rem; }
}

/* Controls must share an intrinsic height, or a select and a text input in
   the same row still differ by a few pixels even when correctly aligned. */
input[type="text"], select {
  min-height: 2.875rem;
  line-height: 1.3;
}
.fact-grid .field > input,
.fact-grid .field > select {
  box-sizing: border-box;
  height: 2.875rem;
}

/* ---------- Supplementary building inventory ------------------------------ */

.inv-group { border-top: 1px solid var(--hairline); padding-top: 0.9rem; margin-top: 0; }
.inv-group > summary { font-size: 1rem; }

.chip-list { list-style: none; padding: 0; margin: 0.9rem 0 0.4rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip-list li { margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1.5px solid var(--aqua-100); background: var(--white);
  border-radius: 999px; padding: 0.45rem 0.9rem; cursor: pointer;
  font-size: 0.9375rem; color: var(--ink); min-height: 2.5rem;
}
.chip:hover { border-color: var(--aqua-500); }
.chip input { width: 1rem; height: 1rem; accent-color: var(--aqua-700); margin: 0; }
.chip:has(input:checked) { border-color: var(--aqua-700); background: var(--aqua-50); font-weight: 600; }

/* ---------- Inventory summary --------------------------------------------- */

.inv-summary {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
  background: var(--surface); border-radius: 5px; padding: 1rem 1.35rem; margin-bottom: 1.75rem;
}
.inv-summary div { min-width: 7rem; }
.inv-summary b { display: block; font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.inv-summary span { font-size: 0.8125rem; color: var(--slate-text); }

/* ---------- Result: other things recorded --------------------------------- */

.recorded-list { display: grid; gap: 0.6rem; }
@media (min-width: 46rem) { .recorded-list { grid-template-columns: 1fr 1fr; } }
.recorded {
  border: 1px solid var(--hairline); border-left: 3px solid var(--mist);
  border-radius: 4px; background: var(--white); padding: 0.85rem 1.1rem;
}
.recorded.has-evidence { border-left-color: var(--aqua-500); }
.recorded p { margin: 0; }
.recorded-name { font-weight: 650; font-size: 0.9375rem; color: var(--ink); }
.recorded-state { font-size: 0.8125rem; color: var(--slate-text); margin-top: 0.15rem; }

/* ==========================================================================
   Public-experience checkpoint: header substance, environmental pathways,
   hazard-example hierarchy.

   Bounded. No palette change, no navigation architecture change, no change
   to the button system, and no change to any result or methodology surface.
   ========================================================================== */

/* ---------- Header: wide alignment, a larger mark, a real menu ------------ */

/* The masthead now uses the same wide shell as the content bands, so the brand
   and the primary action sit on the same vertical lines as the page beneath
   them. Before this the header was 128px inside the content edge at 1440 and
   240px inside it at 1920 and above, which read as a narrow bar floating over
   a wide page.

   Measured before this block, the header overflowed the viewport at 320, 360,
   375, 390 and 1024 pixels. The brand, the navigation and the CTA together
   were wider than the room available and the page scrolled sideways. Nothing
   here merely enlarges the mark; it also gives the row a way to run out of
   space that is not horizontal overflow, and gives every width a way to reach
   every destination. */

.masthead-inner {
  gap: 1.25rem;
  min-height: 4.75rem;
  padding-block: 0.9rem;
}

/* The mark is sized by width with height derived, so its aspect ratio is held
   by the geometry rather than by two numbers agreeing with each other. The
   max-width lets the brand give way if a row still runs short instead of
   pushing anything off the viewport. The artwork is never redrawn, recropped
   or distorted; at worst it is drawn smaller. */
.brand { min-width: 0; flex: 0 1 auto; }
.brand img {
  width: 9rem;
  height: auto;
  max-width: 100%;
}
.nav { flex: 0 0 auto; }

@media (min-width: 24rem)  { .brand img { width: 10rem; } }
@media (min-width: 40rem)  { .brand img { width: 12.5rem; } }
@media (min-width: 64rem)  { .brand img { width: 14rem; } }
@media (min-width: 88rem)  { .brand img { width: 15.5rem; } }
@media (min-width: 120rem) { .brand img { width: 17rem; } }

/* ---------- The navigation breakpoint ------------------------------------ */

/* Measured, the four labels plus the CTA need about 830px beside the brand.
   At 1024 the previous 64rem breakpoint could not seat them without either
   overflowing the page or shrinking the mark below its existing size, which
   is why the page scrolled sideways there. Inline navigation therefore starts
   at 74rem, and every width below it reaches the same destinations through the
   Menu control rather than through the footer. */
@media (max-width: 73.99rem) {
  .nav-links { display: none; }
}
@media (min-width: 74rem) {
  .nav-links { display: flex; }
}

/* Labels grow once there is width to absorb them. Below 88rem the mark, the
   navigation and the CTA are still sharing a close row, and enlarging type
   there would reintroduce the crowding this is meant to remove. */
@media (min-width: 88rem) {
  .nav a:not(.btn) { font-size: 1rem; }
  .masthead .btn-primary { font-size: 1rem; padding-inline: 1.35rem; }
}

/* ---------- Menu control -------------------------------------------------- */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding-inline: 0.85rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
}
.nav-toggle:hover { border-color: var(--aqua-700); color: var(--aqua-900); }
.nav-toggle:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Three bars, drawn rather than iconised, so the control carries a familiar
   affordance alongside its label instead of relying on the word alone. */
.nav-toggle-bars {
  width: 1rem;
  height: 0.75rem;
  flex: none;
  background:
    linear-gradient(var(--ink), var(--ink)) top left / 100% 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center left / 100% 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom left / 100% 2px no-repeat;
}
.nav-toggle[aria-expanded="true"] { border-color: var(--aqua-700); color: var(--aqua-900); }

/* Declared after the control itself, so source order does the hiding rather
   than a specificity contest. Inline navigation and the Menu control are
   alternatives and never appear together. */
@media (min-width: 74rem) {
  .nav-toggle { display: none; }
  .nav-menu { display: none; }
}

.nav-menu {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 20;
  background: var(--white);
  border-bottom: 1px solid var(--mist);
  box-shadow: 0 18px 32px -24px rgba(2, 52, 88, 0.45);
}
.nav-menu[hidden] { display: none; }

.nav-menu-inner {
  display: flex;
  flex-direction: column;
  padding-block: 0.5rem 1rem;
}
.nav-menu-inner a {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding-block: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  border-bottom: 1px solid var(--hairline);
}
.nav-menu-inner a:hover,
.nav-menu-inner a[aria-current="page"] { color: var(--teal); }
.nav-menu-inner a.nav-menu-cta {
  margin-top: 1rem;
  justify-content: center;
  border-bottom: none;
}

/* ---------- Where the primary action sits --------------------------------- */

/* Measured, the Menu control is 82px wide and the CTA 157px at their compact
   sizes. Below 30rem the brand cannot hold a recognisable width beside both:
   at 390 it would fall to 93px. The CTA therefore sits in the menu below 30rem
   and in the header above it. It is never shown in both places, and it is
   never dropped. */
/* The selector below said `.btn-primary`. The header action later became a secondary button,
   and nothing updated this rule, so the intent above stopped happening: below 30rem the brand,
   Menu and the CTA all rendered together and the action appeared twice on the first screen,
   once here and once in the hero. Matching the header action by its position in the nav rather
   than by its current variant keeps the rule true if the variant changes again. */
@media (max-width: 29.99rem) {
  .masthead .nav > .btn { display: none; }
}
@media (min-width: 30rem) {
  /* Specificity matters here. `.nav-menu-inner a` sets display: flex, so a
     bare `.nav-menu-cta` rule loses and the action renders in both the header
     and the menu at once. */
  .nav-menu-inner a.nav-menu-cta { display: none; }
}

/* At narrow widths the controls tighten so the brand keeps its size. The 44px
   touch target comes from .btn min-height and from an explicit min-height on
   the Menu control, and is untouched here. */
@media (max-width: 39.99rem) {
  .masthead-inner { gap: 0.6rem; }
  .nav { gap: 0.75rem; }
  .nav-toggle { font-size: 0.8125rem; padding-inline: 0.55rem; gap: 0.4rem; }
  .masthead .nav > .btn { font-size: 0.8125rem; padding-inline: 0.6rem; }
}

/* ---------- Hero supporting statement ------------------------------------ */

/* The supporting line now names three things rather than two, so it is given
   slightly more measure to avoid running to five lines. */
.hero-arch .hero-sub { max-width: 44ch; }

/* ---------- Environmental value pathways --------------------------------- */

/* Each pathway states the register's chain in order: what is recorded, what
   decision that supports, what may follow. The term list is the structure,
   not an ornament, and it is what stops a possibility being read as a result. */
.pathways {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.75rem;
}
@media (min-width: 46rem) { .pathways { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 74rem) { .pathways { grid-template-columns: repeat(4, 1fr); } }

.pathway {
  background: var(--white);
  border: 1px solid var(--aqua-100);
  border-radius: 5px;
  padding: 1.25rem 1.35rem;
}
.pathway h3 { font-size: 1.0625rem; margin: 0 0 0.75rem; }
.pathway dl { margin: 0; }
.pathway dt {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--aqua-700);
  margin-top: 0.7rem;
}
.pathway dt:first-child { margin-top: 0; }
.pathway dd {
  margin: 0.15rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--slate-text);
}

.pathway-note {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--slate-text);
  border-left: 2px solid var(--aqua-300);
  padding-left: 0.85rem;
  max-width: 62ch;
}

/* ---------- Hazard examples: two shown, two on request -------------------- */

/* The four examples previously ran the full width of the page and took more
   of the homepage than the condition-and-evidence story they are meant to
   support. Two are shown at a readable width and two are one keystroke away,
   which keeps the layer legible without letting it lead. */
@media (min-width: 50rem) {
  .intel-grid { grid-template-columns: repeat(2, minmax(0, 30rem)); justify-content: start; }
}
@media (min-width: 84rem) {
  .intel-grid { grid-template-columns: repeat(2, minmax(0, 30rem)); }
}

.intel-more { margin-top: 1.5rem; max-width: 62rem; }
.intel-more .intel-grid { margin-top: 1.25rem; }

/* ---------- Menu scrim and page inertness --------------------------------- */

/* While the menu is open the page beneath it is obscured and made inert. Two
   problems are solved together: the page's own primary action was visible
   under the panel, so "Check my building" appeared twice on screen at once,
   and a covered control that is still clickable and still in the tab order is
   a trap regardless of what it says. The page is never altered during ordinary
   use; this applies only while the panel is open. */

.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: rgba(6, 34, 54, 0.62);
  backdrop-filter: blur(3px);
}
/* The scrim used to run under the masthead, which is why the logo read as
   dimmed even though the bar was painted above it: the blur applied to the
   backdrop behind a bar that is not fully opaque. It now starts below the
   masthead, so the brand is never behind glass. */
body.menu-open .menu-scrim { top: var(--masthead-h, 4.75rem); }
.menu-scrim[hidden] { display: none; }

/* The masthead and its panel stay above the scrim so the Menu control remains
   operable and the panel remains legible. The bar is given an opaque surface
   while open, or the scrim tints the header it is supposed to sit under. */
.masthead { position: relative; z-index: 25; }

/* The scrim is a child of the masthead, so within that stacking context the
   bar itself has to be lifted above it. Without this the logo and the Menu
   control are dimmed by the scrim they are supposed to sit above. */
.masthead-inner { position: relative; z-index: 20; }
body.menu-open .masthead { background: var(--white); }

/* The panel is a fixed-position overlay while open, so a long page cannot
   scroll behind it. */
body.menu-open { overflow: hidden; }

@media (min-width: 74rem) {
  .menu-scrim { display: none; }
}

/* ==========================================================================
   PARTB-01 to PARTB-04: the building label, the four layers, the label steps
   and the external-resources register.

   The label is meant to read as an issued document, not as a dashboard panel.
   That difference is carried by a few deliberate choices: a rule under the
   header rather than a card shadow, a reference number set in a monospace
   face at a size that says "quote this", and findings that are a list of
   stated results rather than a grid of gauges.
   ========================================================================== */

.ici-label {
  background: var(--white);
  border: 1px solid var(--aqua-200);
  border-top: 4px solid var(--teal);
  border-radius: 3px;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: 0 20px 40px -32px rgba(2, 52, 88, 0.5);
}

.label-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--mist);
}
.label-kicker {
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aqua-700);
  font-weight: 700;
}
/* The reference number is the one element a person reads aloud or types back,
   so it is set in a face where the excluded characters stay unambiguous. */
.label-id {
  margin: 0.3rem 0 0;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: clamp(1.0625rem, 2vw, 1.375rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.label-qr { width: 3.25rem; height: 3.25rem; flex: none; }

.label-identity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.25rem;
  margin: 1rem 0 0;
}
@media (min-width: 30rem) { .label-identity { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.label-identity dt {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate-text);
  font-weight: 700;
}
.label-identity dd { margin: 0.2rem 0 0; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }

.label-block { margin-top: 1.15rem; }
.label-block-title {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--aqua-700);
}

.label-systems, .label-findings { list-style: none; margin: 0; padding: 0; }

.label-system {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1rem 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.875rem;
}
.label-system-name { font-weight: 650; color: var(--ink); }
.label-system-detail { grid-column: 1; color: var(--slate-text); }

/* Provenance is a statement about paperwork. It is deliberately quiet, and it
   sits in the systems block, never beside a finding, so that a system with no
   document is never read as a system in poor condition. */
.label-prov {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
  white-space: nowrap;
  background: var(--surface);
  color: var(--slate-text);
  border: 1px solid var(--mist);
}
.label-prov-document-supported { background: var(--aqua-50); color: var(--aqua-900); border-color: var(--aqua-200); }
.label-prov-official-source { background: var(--aqua-50); color: var(--aqua-900); border-color: var(--aqua-300); }
.label-prov-not-established { font-style: italic; }

.label-finding {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.875rem;
}
.label-finding-system { font-weight: 650; color: var(--ink); }
.label-finding-value {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink-neutral);
}
.label-finding-band { font-size: 0.75rem; color: var(--slate-text); min-width: 5.5rem; text-align: right; }

/* An unavailable finding is an honest outcome, not a warning. No red, no icon,
   no alarm. It states that there is no result and why, and the reason is never
   a claim about the building. */
.label-finding.is-unavailable { grid-template-columns: 1fr auto; }
.label-finding-state {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--slate-text);
  text-transform: uppercase;
}
.label-finding-reason {
  grid-column: 1 / -1;
  font-size: 0.8125rem;
  color: var(--slate-text);
  margin-top: 0.1rem;
}

.label-withheld {
  margin: 0.9rem 0 0;
  font-size: 0.8125rem;
  color: var(--slate-text);
  border-left: 2px solid var(--aqua-300);
  padding-left: 0.75rem;
}

.label-foot {
  margin-top: 1.05rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--mist);
}
.label-foot p { margin: 0 0 0.4rem; font-size: 0.75rem; line-height: 1.5; color: var(--slate-text); }
.label-foot p:last-child { margin-bottom: 0; }
.label-example-note { font-weight: 650; color: var(--ink-neutral); }

/* ---------- What you can do next ------------------------------------------ */

/* Structurally and visually outside the findings. The dashed rule and the
   tinted ground mark it as advice attached to the label rather than as part of
   the result, which is the distinction a reader has to be able to make without
   reading the disclaimer. */
.label-next {
  margin-top: 1.15rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px dashed var(--aqua-200);
  border-radius: 3px;
}
.label-next-lead { margin: 0 0 0.6rem; font-size: 0.75rem; color: var(--slate-text); line-height: 1.5; }
.label-next-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.label-next-item { display: grid; gap: 0.15rem; }
.label-next-purpose {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aqua-700);
}
.label-next-text { font-size: 0.8125rem; line-height: 1.5; color: var(--slate-text); }

/* ---------- Four layers --------------------------------------------------- */

/* A numbered sequence rather than four equal cards. Four cards in a row is the
   dashboard shape this section is moving away from. */
.layers { list-style: none; margin: 2rem 0 0; padding: 0; max-width: none; display: grid; gap: 1.5rem; }
@media (min-width: 46rem) { .layers { grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; } }

.layer { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.layer-number {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--aqua-300);
  line-height: 1;
  padding-top: 0.15rem;
}
.layer h3 { margin: 0 0 0.4rem; font-size: 1.0625rem; }
.layer p { margin: 0; color: var(--slate-text); font-size: 0.9375rem; line-height: 1.55; max-width: 46ch; }

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

.label-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 46rem) { .label-steps { grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; } }
@media (min-width: 74rem) { .label-steps { grid-template-columns: repeat(3, 1fr); } }
.label-steps .step { border-top: 2px solid var(--aqua-200); padding-top: 0.9rem; }
.step-number {
  display: block;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--aqua-700);
  margin-bottom: 0.35rem;
}

/* ---------- External resources -------------------------------------------- */

.resources { list-style: none; margin: 1.75rem 0 0; padding: 0; max-width: none; display: grid; gap: 1.25rem; }
@media (min-width: 46rem) { .resources { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 88rem) { .resources { grid-template-columns: repeat(3, 1fr); } }

.resource { border-left: 2px solid var(--aqua-200); padding-left: 1rem; }
.resource-authority {
  margin: 0;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--slate-text);
}
.resource-title { display: inline-block; margin-top: 0.3rem; font-weight: 650; font-size: 0.9375rem; }
.resource-relation { margin: 0.4rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--slate-text); }
.resource-checked { margin: 0.45rem 0 0; font-size: 0.6875rem; color: var(--slate-text); }


/* ==========================================================================
   Presentation correction: sample report route, print, four-step flow.
   ========================================================================== */

/* ---------- CTA contrast --------------------------------------------------
   Measured, not eyeballed. White on the previous #016E8B was 5.83:1, which
   clears WCAG AA but is thin for a small semibold label sitting over a
   photographic hero. The token now measures 7.44:1, hover 9.6:1 and active
   11.1:1, all against white text. Changing the token rather than the button
   keeps every ICI CTA consistent, which is what the ruling asked for. */
.btn-primary:active { background: #013D4F; border-color: #013D4F; color: var(--white); }
.btn-primary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.btn-primary[disabled], .btn-primary[aria-disabled="true"] {
  background: var(--mist);
  border-color: var(--mist);
  color: var(--slate-text);
  cursor: not-allowed;
}
.nav-menu-inner a.nav-menu-cta:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- Sample report page -------------------------------------------- */

.crumb { margin: 0 0 0.75rem; font-size: 0.8125rem; color: var(--slate-text); }
.sample-flag {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--slate-text);
  border-left: 2px solid var(--aqua-300);
  padding-left: 0.85rem;
  max-width: 62ch;
}

.report-band { background: var(--surface); }
.report-surface { max-width: 52rem; margin: 0 auto; }

.report-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  max-width: 52rem;
  margin: 0 auto 1.25rem;
}
.report-actions-note { font-size: 0.8125rem; color: var(--slate-text); }

.sample-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.sample-invite h2 { margin: 0 0 0.4rem; }
.sample-invite p { margin: 0; max-width: 58ch; }

/* ---------- Four-step flow ------------------------------------------------
   The previous layout put seven steps in a narrow left column and left the
   right half of the desktop canvas empty. Each step now spans the shell, with
   the explanation and its example side by side, alternating so the page has a
   rhythm rather than a single ragged edge. */

.flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.flow-step { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 62rem) {
  .flow-step { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); }
  .flow-step:nth-child(even) .flow-step-body { order: 2; }
}

.flow-step-body { position: relative; }
.flow-step-number {
  display: block;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  color: var(--aqua-200);
  margin-bottom: 0.35rem;
}
.flow-step-body h2 { margin: 0 0 0.6rem; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.flow-step-body p { margin: 0; color: var(--slate-text); line-height: 1.6; max-width: 52ch; }

.flow-step-example {
  background: var(--white);
  border: 1px solid var(--aqua-200);
  border-left: 3px solid var(--teal);
  border-radius: 3px;
  padding: 1.25rem 1.4rem;
}
.flow-step-example dl { margin: 0; max-width: none; display: grid; gap: 0.9rem; }
.flow-step-example dt {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--aqua-700);
}
.flow-step-example dd { margin: 0.15rem 0 0; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }

/* ---------- Print ---------------------------------------------------------
   A printed label is the artefact somebody keeps, so it is designed rather
   than left to the browser. Navigation, calls to action and photography come
   off; the report goes to a white ground at full width. */

@media print {
  .masthead, .colophon, .no-print, .nav-menu, .menu-scrim { display: none !important; }
  html, body { background: #FFFFFF !important; }
  body { font-size: 11pt; }
  .band, .band-wide, .band-tight { padding-block: 0 !important; }
  .report-band { background: #FFFFFF !important; }
  .shell, .shell-wide { max-width: none; padding-inline: 0; }
  .report-surface { max-width: none; margin: 0; }
  .ici-label {
    border: 1px solid #333333;
    box-shadow: none;
    padding: 0;
    border-top-width: 3px;
  }
  .label-next { background: #FFFFFF !important; border: 1px solid #999999; }
  .ici-label, .label-foot p, .label-next-text, .label-system-detail, .label-finding-reason {
    color: #000000 !important;
  }
  a[href]::after { content: ""; }
  .ici-label { break-inside: avoid; }
  .label-block, .label-next { break-inside: avoid; }
}

/* ==========================================================================
   Equipment, notices, guide and resources.

   The equipment experience is part of ICI, not a separate microsite, so it
   reuses the label's typographic language: monospace for identifiers, quiet
   state labels, and results that read as statements rather than as a database
   view.
   ========================================================================== */

/* ---------- Homepage doors ------------------------------------------------ */

.door {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.door h2 { margin: 0 0 0.4rem; font-size: clamp(1.15rem, 2vw, 1.5rem); }
.door p { margin: 0; max-width: 62ch; }

/* ---------- Lookup -------------------------------------------------------- */

.lookup-scope { margin-top: 1rem; font-size: 0.9375rem; color: var(--slate-text); }
.lookup-note { font-size: 0.9375rem; color: var(--slate-text); }

.lookup-fields { display: grid; gap: 1.25rem; }
@media (min-width: 46rem) { .lookup-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lookup-field { display: grid; gap: 0.35rem; }
.lookup-field > span:first-child { font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
.lookup-optional { font-weight: 500; color: var(--slate-text); }
.lookup-field select,
.lookup-field input[type="text"] {
  min-height: 2.75rem;
  padding: 0.4rem 0.7rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
}
.lookup-field select:focus-visible,
.lookup-field input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.lookup-why { font-size: 0.75rem; color: var(--slate-text); line-height: 1.45; }

.lookup-result { margin-top: 1.75rem; }
.result-panel {
  background: var(--white);
  border: 1px solid var(--aqua-200);
  border-left: 3px solid var(--teal);
  border-radius: 3px;
  padding: 1.25rem 1.4rem;
}
.result-panel.is-quiet { border-left-color: var(--mist); background: transparent; }
.result-panel.is-attention { border-left-color: var(--accent, #C8651B); }
.result-state {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aqua-700);
}
.result-panel p { margin: 0 0 0.65rem; font-size: 0.9375rem; line-height: 1.55; color: var(--slate-text); }
.result-panel p:last-child { margin-bottom: 0; }
.result-sub { font-weight: 650; color: var(--ink); margin-top: 1rem; }
.result-notices { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.9rem; max-width: none; }
.result-notice { border-top: 1px solid var(--hairline); padding-top: 0.75rem; }
.result-notice p { margin: 0 0 0.35rem; font-size: 0.875rem; }
.result-notice-authority { font-size: 0.6875rem !important; text-transform: uppercase; letter-spacing: 0.05em; color: var(--aqua-700) !important; font-weight: 700; }
.result-notice-title { font-weight: 650; color: var(--ink) !important; }
.lookup-coverage { margin-top: 1.25rem; font-size: 0.8125rem; color: var(--slate-text); max-width: 66ch; }

/* ---------- Notice explorer ---------------------------------------------- */

.notice-filters { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 46rem) { .notice-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 74rem) { .notice-filters { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.notice-filters label { display: grid; gap: 0.3rem; font-size: 0.75rem; font-weight: 700; color: var(--ink); }
.notice-filters select {
  min-height: 2.75rem; padding: 0.35rem 0.6rem; font: inherit; font-size: 0.9375rem;
  background: var(--white); border: 1.5px solid var(--border-strong); border-radius: 4px; color: var(--ink);
}
.notice-filters select:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.notice-count { font-size: 0.8125rem; color: var(--slate-text); margin: 0 0 1rem; }
.notice-empty { font-size: 0.9375rem; color: var(--slate-text); max-width: 62ch; }

.notices { display: grid; gap: 1.25rem; }
@media (min-width: 62rem) { .notices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.notice {
  background: var(--white);
  border: 1px solid var(--aqua-200);
  border-top: 3px solid var(--aqua-300);
  border-radius: 3px;
  padding: 1.25rem 1.4rem;
}
.notice[hidden] { display: none; }
.notice-authority { margin: 0 0 0.4rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--aqua-700); }
.notice h3 { margin: 0 0 0.6rem; font-size: 1.0625rem; }
.notice p { font-size: 0.875rem; line-height: 1.55; color: var(--slate-text); margin: 0 0 0.6rem; }
.notice-meta { margin: 0 0 0.75rem; display: grid; gap: 0.4rem; }
.notice-meta dt { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--aqua-700); }
.notice-meta dd { margin: 0.1rem 0 0; font-size: 0.875rem; color: var(--ink); }
.notice-applicability { border-left: 2px solid var(--aqua-300); padding-left: 0.75rem; /* 0.8125rem !important held this governed applicability wording at 13px and no later rule could reach it. It is body copy, not a badge, so it takes the reading size. */ font-size: 1rem; }
.notice-foot { font-size: 1rem; margin-bottom: 0; }

/* ---------- Guide --------------------------------------------------------- */

.guide { display: grid; gap: 2rem; }
@media (min-width: 74rem) { .guide { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: 4rem; align-items: start; } }
.guide-toc { position: sticky; top: 6rem; }
.guide-toc-title { margin: 0 0 0.6rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--aqua-700); }
.guide-toc ul { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: 0.5rem; }
.guide-toc a { font-size: 0.875rem; }
.guide-body { display: grid; gap: 2.5rem; }
.guide-section h2 { margin: 0 0 0.75rem; font-size: clamp(1.15rem, 2vw, 1.45rem); }
.guide-section p { margin: 0 0 0.85rem; line-height: 1.65; color: var(--slate-text); max-width: 62ch; }
.guide-section p:last-child { margin-bottom: 0; }

/* ---------- Resources route ---------------------------------------------- */

.resources-full .resource { padding-bottom: 0.5rem; }
.resource-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; margin: 0.5rem 0 0; }
.resource-meta dt { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--aqua-700); }
.resource-meta dd { margin: 0; font-size: 0.8125rem; color: var(--ink); }

/* ---------- Check session note -------------------------------------------- */

.check-session-note { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--slate-text); }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Transition profile.

   Optimistic without greenwashing: the existing blue-green palette, structured
   system relationships, and evidence cues. No leaves, no glowing buildings, no
   badges, no percentages.
   ========================================================================== */

.outcome-list { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: none; display: grid; gap: 0.75rem; }
@media (min-width: 62rem) { .outcome-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 2.5rem; } }
.outcome-list li { position: relative; padding-left: 1.35rem; font-size: 0.9375rem; line-height: 1.55; color: var(--slate-text); }
.outcome-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--aqua-300); }

/* ---------- The evidence ladder ------------------------------------------ */

.ladder, .pathway, .stages { list-style: none; margin: 2rem 0 0; padding: 0; max-width: none; display: grid; gap: 1.5rem; }
@media (min-width: 62rem) { .ladder, .pathway { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 3rem; } }
@media (min-width: 88rem) { .ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ladder-step, .pathway-step, .stage { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.ladder-number, .pathway-number, .stage-number {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 1.5rem; font-weight: 600; line-height: 1; color: var(--aqua-300); padding-top: 0.1rem;
}
.ladder-step h3, .pathway-step h3, .stage h3 { margin: 0 0 0.35rem; font-size: 1.0625rem; }
.ladder-step p, .pathway-step p, .stage p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--slate-text); max-width: 46ch; }
.stage-detail { margin-top: 0.6rem !important; border-left: 2px solid var(--aqua-200); padding-left: 0.8rem; font-size: 0.875rem !important; }
@media (min-width: 62rem) { .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; } }

/* ---------- Transition profile ------------------------------------------- */

.state-key { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: none; display: grid; gap: 0.6rem; }
@media (min-width: 62rem) { .state-key { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 2.5rem; } }
.state-key li { font-size: 0.875rem; color: var(--slate-text); }
.state-chip {
  display: inline-block; margin-right: 0.5rem; padding: 0.15rem 0.5rem; border-radius: 2px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em;
  background: var(--surface); border: 1px solid var(--mist); color: var(--slate-text);
}
.state-present-and-documented { background: var(--aqua-50); border-color: var(--aqua-200); color: var(--aqua-900); }

.profile-groups { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 62rem) { .profile-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 88rem) { .profile-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.profile-group {
  background: var(--white); border: 1px solid var(--aqua-200);
  border-top: 3px solid var(--aqua-300); border-radius: 3px; padding: 1.15rem 1.3rem;
}
.profile-group h3 { margin: 0 0 0.75rem; font-size: 0.9375rem; }
.profile-group ul { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: 0.7rem; }
.profile-system { display: grid; gap: 0.2rem; border-top: 1px solid var(--hairline); padding-top: 0.6rem; }
.profile-system:first-child { border-top: none; padding-top: 0; }
.profile-system-name { font-size: 0.875rem; font-weight: 650; color: var(--ink); }
.profile-system-note { font-size: 0.75rem; line-height: 1.45; color: var(--slate-text); }

.disposition {
  justify-self: start; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: 2px;
  background: var(--surface); border: 1px solid var(--mist); color: var(--slate-text);
}
.disposition-condition-bearing { background: var(--aqua-50); border-color: var(--aqua-300); color: var(--aqua-900); }

/* ---------- Procurement --------------------------------------------------- */

.perf-ladder { list-style: none; margin: 1.75rem 0 0; padding: 0; max-width: none; display: grid; gap: 0.85rem; }
@media (min-width: 62rem) { .perf-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 2.5rem; } }
.perf-ladder li { display: grid; gap: 0.15rem; border-left: 2px solid var(--aqua-200); padding-left: 0.9rem; }
.perf-name { font-size: 0.9375rem; font-weight: 650; color: var(--ink); }
.perf-meaning { font-size: 0.8125rem; line-height: 1.5; color: var(--slate-text); }

.example-scenario { background: var(--white); border: 1px solid var(--aqua-200); border-radius: 3px; padding: clamp(1.25rem, 2.5vw, 1.75rem); margin-top: 1.5rem; }
.example-scenario h3 { margin: 0 0 1rem; font-size: 1.0625rem; }
.example-scenario h4 { margin: 1.25rem 0 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--aqua-700); }
.example-scenario ul { margin: 0; padding-left: 1.1rem; max-width: none; }
.example-scenario li { font-size: 0.875rem; line-height: 1.55; color: var(--slate-text); }
.example-grid { display: grid; gap: 0.6rem; margin: 0; }
@media (min-width: 46rem) { .example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 2rem; } }
.example-grid dt { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--aqua-700); }
.example-grid dd { margin: 0.1rem 0 0; font-size: 0.875rem; color: var(--ink); }

.resource-category { margin-bottom: 2.5rem; }
.resource-category h2 { font-size: 1.0625rem; margin: 0 0 1rem; }


/* ==========================================================================
   Project request.

   A considered organizational intake, not a checklist. Desktop puts the
   selection and the summary side by side; mobile runs one step at a time with
   the summary underneath, because two compressed columns on a phone is how a
   considered form becomes an abandoned one.
   ========================================================================== */

.request-layout { display: grid; gap: 2rem; margin-top: 1.5rem; }
@media (min-width: 74rem) {
  .request-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 3.5rem; align-items: start; }
  .request-panel { position: sticky; top: 6rem; }
}

/* ---------- Progress ------------------------------------------------------ */

.request-progress { list-style: none; margin: 0 0 2rem; padding: 0; max-width: none; display: grid; gap: 0.25rem; }
@media (min-width: 46rem) { .request-progress { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; } }
.request-progress-step button {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  min-height: 2.75rem; padding: 0.4rem 0.2rem;
  background: none; border: none; border-top: 3px solid var(--mist);
  font: inherit; text-align: left; cursor: pointer; color: var(--slate-text);
}
.request-progress-step button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.request-progress-step.is-current button { border-top-color: var(--teal); color: var(--ink); }
.request-progress-step.is-done button { border-top-color: var(--aqua-300); }
.request-progress-number {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 0.8125rem; font-weight: 700; color: var(--aqua-700);
}
.request-progress-title { font-size: 0.8125rem; font-weight: 650; }

.request-step-heading { font-size: clamp(1.15rem, 2vw, 1.5rem); margin: 0 0 1rem; }
.request-step-heading:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
.request-help { font-size: 0.9375rem; color: var(--slate-text); max-width: 60ch; margin: 0 0 1.25rem; }
.request-fields { margin-bottom: 1rem; }
@media (min-width: 46rem) { .request-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.request-systems { margin-bottom: 0.75rem; }
.request-systems > summary { font-size: 0.9375rem; font-weight: 650; }
.request-systems .rfp-checks { margin-top: 0.75rem; }

.request-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.request-indicator { margin-top: 1rem; font-size: 0.8125rem; color: var(--slate-text); }

/* ---------- Summary panel ------------------------------------------------- */

/* Before anything is selected this panel explains what the visitor receives,
   so the initial composition is never a large empty white area. */
.request-intro {
  background: var(--white); border: 1px solid var(--aqua-200); border-left: 3px solid var(--aqua-300);
  border-radius: 3px; padding: clamp(1.25rem, 2.5vw, 1.65rem);
}
.request-intro h3 { margin: 0 0 0.85rem; font-size: 1.0625rem; }
.request-intro ul { margin: 0; padding-left: 1.1rem; max-width: none; display: grid; gap: 0.5rem; }
.request-intro li { font-size: 0.9375rem; line-height: 1.5; color: var(--slate-text); }
.request-intro-note { margin: 1.1rem 0 0; font-size: 0.8125rem; color: var(--slate-text); border-top: 1px solid var(--hairline); padding-top: 0.85rem; }

.request-summary {
  background: var(--white); border: 1px solid var(--aqua-200); border-top: 4px solid var(--teal);
  border-radius: 3px; padding: clamp(1.25rem, 2.5vw, 1.65rem);
  box-shadow: 0 20px 40px -32px rgba(2, 52, 88, 0.5);
}
.request-kicker { margin: 0 0 0.85rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--aqua-700); }
.request-summary section { border-top: 1px solid var(--hairline); padding-top: 0.85rem; margin-top: 0.85rem; }
.request-summary h4 { margin: 0 0 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--aqua-700); }
.request-summary ul { margin: 0; padding-left: 1.1rem; max-width: none; }
.request-summary li { font-size: 0.875rem; line-height: 1.55; color: var(--slate-text); }
.request-note { margin: 0.6rem 0 0; font-size: 0.8125rem; color: var(--slate-text); border-left: 2px solid var(--aqua-300); padding-left: 0.75rem; }
.request-foot { border-top: 1px solid var(--mist); margin-top: 1.15rem; padding-top: 0.85rem; }
.request-foot p { margin: 0; font-size: 0.75rem; color: var(--slate-text); line-height: 1.5; }

/* ---------- Held conversion state ----------------------------------------- */

.request-held {
  margin-top: 1.75rem; padding: 1.35rem 1.5rem;
  background: var(--surface); border: 1px dashed var(--aqua-300); border-radius: 3px;
}
.request-held-title { margin: 0 0 0.6rem; font-size: 1rem; font-weight: 650; color: var(--ink); }
.request-held p { font-size: 0.875rem; line-height: 1.55; color: var(--slate-text); margin: 0 0 0.85rem; }
.request-held-note { margin-top: 0.9rem !important; margin-bottom: 0 !important; font-size: 0.8125rem !important; }

/* ---------- Preparedness hub ---------------------------------------------- */

.prep-modules { display: grid; gap: 1.5rem; margin-top: 1.75rem; }
@media (min-width: 62rem) { .prep-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
.prep-module {
  background: var(--white); border: 1px solid var(--aqua-200);
  border-top: 3px solid var(--aqua-300); border-radius: 3px;
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
}
.prep-module h3 { margin: 0 0 0.6rem; font-size: 1.0625rem; }
.prep-module h4 { margin: 1.15rem 0 0.45rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--aqua-700); }
.prep-module p, .prep-module li { font-size: 0.875rem; line-height: 1.55; color: var(--slate-text); }
.prep-module ul { margin: 0; padding-left: 1.1rem; max-width: none; }
.prep-affects { margin: 0; }
.prep-systems { display: grid; gap: 0.2rem; }
.prep-authority { margin-top: 1.35rem !important; padding-top: 1rem; border-top: 1px solid var(--hairline); grid-template-columns: 1fr !important; }
.prep-authority .resource { border-left-width: 2px; }



/* ---------- Entrance movement ---------------------------------------------
   Short, small, once. Movement here is a hierarchy cue: the eye is told what
   arrived first. Anything longer would be decoration, and decoration on a
   product about evidence reads as noise. */
/* Visible by default. The pre-animation state is applied only once the motion
   system has positively initialized and added `motion-ready`, so content is
   never invisible because an animation failed to start, a class was dropped, or
   a script never ran. The scripting media query below is defence in depth, not
   the protection. */
.reveal { opacity: 1; transform: none; }
.motion-ready .reveal { animation: ici-rise 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.reveal-1 { animation-delay: 70ms; }
.reveal-2 { animation-delay: 140ms; }
.reveal-3 { animation-delay: 210ms; }
.reveal-4 { animation-delay: 280ms; }

@keyframes ici-rise {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Reduced motion is honoured globally further up; this makes the intent local
   and explicit, because a hidden element that never animates is a broken page. */
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none !important; opacity: 1; transform: none; }
}

/* ---------- Shared section furniture --------------------------------------
   Every band gets an eyebrow and a title at one scale, so a visitor can read
   the page's outline by skimming. This is the spine, expressed typographically. */

.section-eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}
.section-title {
  margin: 0;
  font-size: clamp(1.5rem, 3.2vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 24ch;
}
.prose-lead {
  margin-top: 1rem;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.6;
  max-width: 62ch;
}

.hero-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}

/* ---------- The comparison strip -------------------------------------------
   The positioning claim, given its own ground so it cannot be skimmed past.
   Two questions side by side; ours carries the accent. */

.strip { background: var(--sand); border-block: 1px solid var(--sand-line); }
.strip-lead {
  margin: 0 0 1.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.strip-pair { display: grid; gap: 1.5rem; }
@media (min-width: 52rem) { .strip-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; } }

.strip-side { border-top: 3px solid var(--sand-line); padding-top: 1.1rem; }
.strip-side.is-ours { border-top-color: var(--ember); }
.strip-kicker { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 700; color: var(--slate); }
.strip-side.is-ours .strip-kicker { color: var(--ember-ink); }
.strip-question {
  margin: 0 0 0.6rem;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.25;
  font-weight: 600;
  color: var(--ink);
  max-width: 20ch;
}
.strip-note { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--slate-text); max-width: 42ch; }

/* ---------- Layers ---------------------------------------------------------- */

.layers-band .layers { margin-top: 2.5rem; }
.layer-number {
  font-family: var(--font-data);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ember-ink);
  line-height: 1;
  padding-top: 0.2rem;
}

/* ---------- Doors ------------------------------------------------------------
   Two audiences, unequal weight. The building-owner card is the feature because
   it is the harder sell and the one that carries the programme conversation. */

.doors-figure { margin: 2rem 0 0; border-radius: var(--radius-panel); overflow: hidden; }
.doors { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 62rem) { .doors { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2rem; } }

.door-card {
  background: var(--white);
  border: 1px solid var(--mist-soft);
  border-top: 4px solid var(--mist);
  border-radius: var(--radius-panel);
  padding: clamp(1.5rem, 3vw, 2.15rem);
}
.door-card.is-feature { border-top-color: var(--teal); background: var(--surface); }
.door-kicker { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.door-card.is-feature .door-kicker { color: var(--teal); }
.door-card h3 { margin: 0 0 0.75rem; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.2; }
.door-card > p { margin: 0 0 1.15rem; font-size: 0.9375rem; line-height: 1.6; color: var(--slate-text); }
.door-list { list-style: none; margin: 0 0 1.5rem; padding: 0; max-width: none; display: grid; gap: 0.5rem; }
.door-list li { position: relative; padding-left: 1.35rem; font-size: 0.875rem; color: var(--slate-text); }
.door-list li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--ember);
}

/* ---------- Pillars ---------------------------------------------------------
   Three destinations, each with a drawn mark rather than an icon font, so the
   page carries some non-textual identity without importing an icon set. */

.pillars { display: grid; gap: 1.25rem; margin-top: 2.25rem; }
@media (min-width: 52rem) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }

.pillar {
  display: block;
  background: var(--white);
  border: 1px solid var(--mist-soft);
  border-radius: var(--radius-panel);
  padding: clamp(1.35rem, 2.5vw, 1.75rem);
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.pillar:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 16px 30px -26px rgba(2, 52, 88, 0.55); }
.pillar:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.pillar h3 { margin: 1rem 0 0.6rem; font-size: 1.0625rem; }
.pillar p { margin: 0 0 1.1rem; font-size: 0.875rem; line-height: 1.55; color: var(--slate-text); }
.pillar-go { font-size: 0.8125rem; font-weight: 650; color: var(--teal); }
.pillar-go::after { content: " \2192"; }

.pillar-mark { display: block; width: 2.5rem; height: 2.5rem; border-radius: 4px; }
.pillar-mark-equipment { background: var(--teal-soft); box-shadow: inset 0 0 0 2px var(--teal), inset 0 -0.6rem 0 -0.42rem var(--teal); }
.pillar-mark-climate { background: var(--moss-soft); box-shadow: inset 0 0 0 2px var(--moss), inset 0.55rem 0 0 -0.42rem var(--moss); }
.pillar-mark-region { background: var(--ember-soft); box-shadow: inset 0 0 0 2px var(--ember); border-radius: 50%; }

/* ---------- Closer -----------------------------------------------------------
   Deep ground, once, at the end. The only dark band on the site, which is what
   makes it read as an ending rather than another section. */

.closer { position: relative; background: var(--ink-ground); overflow: hidden; }
.closer-figure { position: absolute; inset: 0; margin: 0; }
.closer-figure img { width: 100%; height: 100%; object-fit: cover; opacity: 0.18; }
.closer-inner { position: relative; text-align: center; }
.closer-inner h2 { color: var(--white); font-size: clamp(1.5rem, 3.5vw, 2.5rem); margin: 0 auto 0.75rem; max-width: 20ch; letter-spacing: -0.015em; }
.closer-inner > p { color: var(--mist); margin: 0 auto 1.75rem; max-width: 46ch; }
.closer-inner .btn-row { justify-content: center; }
.closer-inner .btn-tertiary { color: var(--white); border-color: rgba(255, 255, 255, 0.45); }
.closer-inner .btn-tertiary:hover { border-color: var(--white); }
.closer-note { margin-top: 2rem !important; font-size: 0.8125rem; color: var(--mist); }
.closer-note a { color: var(--white); }
.btn-large { font-size: 1.0625rem; padding-inline: 1.75rem; min-height: 3.25rem; }

@media print { .closer, .strip, .doors-figure, .pillars { display: none; } }

/* The rebuilt headline is longer than the question it replaced, so the hero
   copy column needs more of the grid and the type needs a wider measure.
   Measured at 1440: seven wrapped lines before this, three after. */
@media (min-width: 62rem) {
  .hero-arch .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 3.5rem; }
  .hero-copy h1 { max-width: 17ch; font-size: clamp(2.1rem, 3.6vw, 3.1rem); }
  .hero-arch .hero-sub { max-width: 46ch; }
}
@media (min-width: 100rem) {
  .hero-arch .hero-grid { gap: 5rem; }
}
.hero-copy .btn-row { flex-wrap: wrap; }

/* The doors photograph ran ~700px tall at 1440, which is a lot of canvas for
   context. Cropped to a band so it sets the scene without taking the section. */
.doors-figure { max-height: 20rem; }
.doors-figure img { width: 100%; height: 20rem; object-fit: cover; object-position: center 62%; }
@media (max-width: 46rem) { .doors-figure, .doors-figure img { max-height: 13rem; height: 13rem; } }

/* ==========================================================================
   Homepage narrative rebuild.

   Every section previously wore the same tinted band and the same card grid,
   which is why nothing looked important. Each band below gets a distinct
   treatment: a split, a benefit grid, three doors, two large intelligence
   panels, a two-card continuation and a figure row. Same palette, different
   shapes.
   ========================================================================== */

.strip-foot {
  margin: 2rem 0 0;
  font-size: 0.9375rem;
  color: var(--slate-text);
  max-width: 60ch;
  border-top: 1px solid var(--sand-line);
  padding-top: 1.1rem;
}

/* ---------- What you receive ---------------------------------------------- */

.profile-split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 62rem) { .profile-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 4rem; } }
.profile-figure { margin: 0; border-radius: var(--radius-panel); overflow: hidden; }

.tick-list { list-style: none; margin: 1.75rem 0 0; padding: 0; max-width: none; display: grid; gap: 0.7rem; }
.tick-list li { position: relative; padding-left: 1.75rem; font-size: 0.9375rem; line-height: 1.5; color: var(--slate-text); }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: 0.36em;
  width: 0.7rem; height: 0.4rem;
  border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}
.tick-tight { margin-top: 1rem; gap: 0.45rem; }
.tick-tight li { font-size: 0.8125rem; padding-left: 1.5rem; }

/* ---------- Benefits ------------------------------------------------------- */

.benefits-band { background: var(--surface); }
.benefits { display: grid; gap: 1.75rem 2.5rem; margin-top: 2.5rem; }
@media (min-width: 46rem) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.benefit { border-top: 2px solid var(--teal-line); padding-top: 1rem; }
.benefit h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.benefit p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--slate-text); }

/* ---------- Three doors ---------------------------------------------------- */

.doors-three { margin-top: 2.25rem; }
@media (min-width: 62rem) { .doors-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.doors-three .door-card { display: flex; flex-direction: column; }
.doors-three .door-card > p { flex: 1; }

/* ---------- Intelligence panels --------------------------------------------
   Two large panels rather than a card row, because these are the destinations
   that carry the most product and should not read as tiles. */

.intel-band { background: var(--ink-ground); }
.intel-band .section-eyebrow { color: var(--mist); }
.intel-band .section-title { color: var(--white); max-width: 30ch; }
.intel-pair { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 62rem) { .intel-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }

.intel-panel {
  display: block;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-panel);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  text-decoration: none;
  color: var(--white);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.intel-panel:hover { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.09); transform: translateY(-2px); }
.intel-panel:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.intel-panel h3 { margin: 1rem 0 0.65rem; font-size: clamp(1.15rem, 2vw, 1.45rem); color: var(--white); }
.intel-panel p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--mist); }
.intel-panel .tick-list li { color: var(--mist); }
.intel-panel .tick-list li::before { border-color: var(--ember); }
.intel-panel .pillar-go { display: inline-block; margin-top: 1.35rem; color: var(--white); }
.panel-flag {
  display: inline-block; margin: 1rem 0 0 !important;
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-ground) !important; background: var(--ember);
  padding: 0.2rem 0.55rem; border-radius: 2px;
}
.is-almanac h3 { margin-top: 0.75rem; }
.intel-foot { margin: 2.25rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--mist); max-width: 78ch; }

/* ---------- Continuation ---------------------------------------------------- */

.continue-split { display: grid; gap: 1.5rem; }
@media (min-width: 62rem) { .continue-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
.continue-card {
  background: var(--white);
  border: 1px solid var(--mist-soft);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-panel);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.continue-card h3 { margin: 0 0 0.7rem; font-size: 1.15rem; }
.continue-card p { margin: 0 0 1.35rem; font-size: 0.9375rem; line-height: 1.6; color: var(--slate-text); }

/* ---------- Trust row ------------------------------------------------------- */

.trust-band { background: var(--surface-quiet); border-block: 1px solid var(--hairline); }
.trust-row { display: grid; gap: 1.5rem; }
@media (min-width: 46rem) { .trust-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
.trust-figure {
  margin: 0 0 0.35rem;
  font-family: var(--font-data);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  color: var(--teal);
  line-height: 1;
}
.trust-label { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--slate-text); max-width: 30ch; }
.trust-note { margin: 2rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--slate-text); max-width: 80ch; }

@media print { .intel-band, .benefits-band, .trust-band, .continue-band { display: none; } }


/* The pillar marks were drawn for a light ground. On the dark panels they
   rendered as two identical empty squares, which reads as a broken icon rather
   than as identity. Withdrawn there: an ornament that has to be explained is
   not doing any work. */
.intel-panel .pillar-mark { display: none; }
.intel-panel h3 { margin-top: 0; }
.intel-panel .panel-flag { margin-top: 0 !important; }


/* ==========================================================================
   Visual acceptance corrections.
   ========================================================================== */

/* Section 7 ran 1030px, the longest on the page and 49 percent taller than the
   median. The content is all governance-required, so the reduction is density
   rather than deletion: the three-term chain sits inline instead of stacked. */
@media (min-width: 46rem) {
  .pathway { padding: 1rem 1.15rem; }
  .pathway dt { margin-top: 0.55rem; font-size: 0.6875rem; }
  .pathway dd { font-size: 0.8125rem; line-height: 1.4; }
  .pathway h3 { margin-bottom: 0.5rem; font-size: 1rem; }
}
@media (min-width: 74rem) { .pathways { gap: 1rem; } }

/* Mobile ran 11,682 CSS pixels. Band rhythm is the largest single contributor
   on a narrow screen, where every grid is one column and every gap is spent
   vertically. Tightened below 46rem only; desktop pacing is unchanged. */
@media (max-width: 45.99rem) {
  .band-wide { padding-block: clamp(2.5rem, 8vw, 3.5rem); }
  .band-tight { padding-block: clamp(1.75rem, 6vw, 2.5rem); }
  .benefits { gap: 1.25rem; }
  .benefit { padding-top: 0.75rem; }
  .doors, .intel-pair, .continue-split, .pathways { gap: 1rem; }
  .door-card, .intel-panel, .continue-card { padding: 1.25rem 1.35rem; }
  .tick-list { margin-top: 1.25rem; gap: 0.55rem; }
  .trust-row { gap: 1.25rem; }
  .profile-split, .strip-pair { gap: 1.75rem; }
}

/* The trust figures now carry short words, not bare numerals. */
.trust-figure { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }

.pathway-names { list-style: none; margin: 1.75rem 0 0; padding: 0; max-width: none; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pathway-names li {
  font-size: 0.875rem; font-weight: 650; color: var(--ink);
  background: var(--white); border: 1px solid var(--aqua-200);
  border-left: 3px solid var(--teal); border-radius: 3px; padding: 0.45rem 0.9rem;
}
.pathway-detail { margin-top: 1.5rem; }
.pathway-detail .pathways { margin-top: 1.25rem; }



@media (min-width: 40rem) { :root { --masthead-h: 4.75rem; } }
@media (min-width: 88rem) { :root { --masthead-h: 5.4rem; } }

/* ---------- The control ---------------------------------------------------- */

.nav-toggle-word { font: inherit; }

/* A drawn mark that becomes a close cross, so the icon and the word agree. */
.nav-toggle-mark {
  position: relative;
  width: 1.05rem;
  height: 0.8rem;
  flex: none;
}
.nav-toggle-mark::before,
.nav-toggle-mark::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out), top var(--dur-fast) var(--ease-out);
}
.nav-toggle-mark::before { top: 0; box-shadow: 0 0.35rem 0 currentColor; }
.nav-toggle-mark::after { top: 0.7rem; }

.nav-toggle[aria-expanded="true"] {
  background: var(--ink-ground);
  border-color: var(--ink-ground);
  color: var(--white);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-mark::before {
  top: 0.35rem; box-shadow: none; transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-mark::after {
  top: 0.35rem; transform: rotate(-45deg);
}
.nav-toggle:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; }

/* The masthead stays a solid surface while the menu is open, so the brand is
   never read through a scrim. */
body.menu-open .masthead {
  background: var(--white);
  border-bottom-color: var(--teal);
}

/* ---------- The panel ------------------------------------------------------ */

.nav-menu {
  background: var(--ink-ground);
  border-bottom: none;
  box-shadow: 0 24px 40px -28px rgba(2, 24, 40, 0.75);
  animation: ici-menu-in var(--dur-base) var(--ease-out) both;
}
@keyframes ici-menu-in {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to   { opacity: 1; transform: none; }
}

.nav-menu-inner { padding-block: 0.75rem 1.35rem; }

.nav-menu-inner a {
  position: relative;
  min-height: 3.25rem;
  padding-inline: 0.25rem;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
.nav-menu-inner a:hover { color: var(--white); padding-left: 0.75rem; }
.nav-menu-inner a:hover::before,
.nav-menu-inner a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 1.35rem;
  transform: translateY(-50%);
  background: var(--ember);
  border-radius: 2px;
}
.nav-menu-inner a[aria-current="page"] { color: var(--white); padding-left: 0.75rem; font-weight: 700; }
.nav-menu-inner a[aria-current="page"]::after {
  content: "Current page";
  margin-left: auto;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--ember-ink);
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
}
.nav-menu-inner a:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: -3px;
  color: var(--white);
}

/* The primary action keeps its prominence inside the panel: a teal fill on
   navy, not a bordered ghost competing with the links above it. */
.nav-menu-inner a.nav-menu-cta {
  margin-top: 1.25rem;
  min-height: 3rem;
  background: var(--teal);
  border: 1.5px solid var(--teal);
  color: var(--white);
  font-weight: 700;
  padding-left: 0;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nav-menu-inner a.nav-menu-cta::before,
.nav-menu-inner a.nav-menu-cta::after { content: none; }
.nav-menu-inner a.nav-menu-cta:hover { background: #01485C; border-color: #01485C; padding-left: 0; }
.nav-menu-inner a.nav-menu-cta:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; }

/* ---------- Shared interaction timing -------------------------------------- */

.btn { transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.pillar, .intel-panel { transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.disclose > summary { transition: color var(--dur-fast) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .nav-menu { animation: none; }
  .nav-toggle-mark::before, .nav-toggle-mark::after,
  .btn, .pillar, .intel-panel, .nav-menu-inner a { transition: none; }
}

/* Entrance animation must never be the reason content is invisible. The
   keyframes use `both`, so an element sits at opacity 0 through its delay. That
   is correct while animations run and unacceptable if they never start, so
   where scripting is unavailable the reveals are simply on. */
@media (scripting: none) {
  .reveal { animation: none !important; opacity: 1; transform: none; }
}

/* ==========================================================================
   Interior polish, cohort 1.

   Check My Building, the equipment hub, the lookup, recall results and the
   guide read as functional documentation rather than a finished product. This
   is presentation only: no governed question, value, state or contract is
   touched, and the semantic form controls stay exactly as they are.
   ========================================================================== */

/* ---------- Shared tool shell ---------------------------------------------
   A contained surface for anything the visitor operates, so a form stops
   floating on the page background. Used by the intake, the lookup and the
   notice controls. */
.tool-shell {
  background: var(--white);
  border: 1px solid var(--mist-soft);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius-panel);
  padding: clamp(1.35rem, 3vw, 2rem);
  box-shadow: 0 18px 34px -30px rgba(2, 52, 88, 0.45);
}
.tool-eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--teal);
}
.tool-note {
  margin: 1.1rem 0 0; padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.8125rem; line-height: 1.55; color: var(--slate-text);
}

/* ---------- 1. Check My Building ------------------------------------------ */

/* Option rows, not browser-default radios. The input keeps its real semantics
   and its own focus ring; only the row around it is designed. */
.choice {
  min-height: 3.25rem;
  border-radius: 5px;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.choice:hover { border-color: var(--teal); background: var(--surface); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.choice:has(input:checked) {
  border-color: var(--teal);
  background: var(--teal-soft);
  box-shadow: inset 3px 0 0 var(--teal);
}
.choice:has(input:checked) .choice-title { font-weight: 700; }

.intake-progress { gap: 6px; }
.intake-progress span {
  transition: background var(--dur-base) var(--ease-out), flex var(--dur-base) var(--ease-out);
}
.step-of {
  display: inline-block;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--teal); background: var(--teal-soft);
  padding: 0.25rem 0.6rem; border-radius: 3px; margin-bottom: 1.1rem;
}
.check-session-note {
  border-left: 2px solid var(--aqua-300);
  padding-left: 0.8rem;
  margin-bottom: 1.5rem;
}
.field label { display: block; font-weight: 650; margin-bottom: 0.25rem; }
.field select, .field input[type="text"], .field input[type="number"] {
  width: 100%; min-height: 3rem; padding: 0.5rem 0.75rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--border-strong); border-radius: 4px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field select:hover { border-color: var(--teal); }
.field select:focus-visible, .field input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Validation reads as a correction to make, not an alarm. Red is reserved for
   a real hazard classification, which a missing form answer is not. */
.field-error, .form-error {
  border-left: 3px solid var(--ember);
  background: var(--ember-soft);
  padding: 0.6rem 0.85rem;
  border-radius: 3px;
  color: var(--ink);
  font-size: 0.875rem;
}

/* ---------- 2. Equipment hub ---------------------------------------------- */

.hub-modules { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 62rem) { .hub-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.hub-module {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--mist-soft);
  border-top: 3px solid var(--aqua-300);
  border-radius: var(--radius-panel);
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.hub-module:hover { border-top-color: var(--teal); transform: translateY(-2px); }
.hub-module h3 { margin: 0.75rem 0 0.5rem; font-size: 1.0625rem; }
.hub-module p { margin: 0 0 1.1rem; font-size: 0.9375rem; line-height: 1.55; color: var(--slate-text); flex: 1; }
.hub-status {
  align-self: flex-start;
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 2px;
  background: var(--teal-soft); color: var(--aqua-900); border: 1px solid var(--aqua-200);
}
.hub-status.is-reference { background: var(--surface); color: var(--slate-text); border-color: var(--mist); }

/* ---------- 3. Equipment Lookup -------------------------------------------- */

.lookup { max-width: 62rem; }
.lookup-form { background: none; }
.lookup-fields { gap: 1.15rem; }
.lookup-field select, .lookup-field input[type="text"] {
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.lookup-field select:hover, .lookup-field input[type="text"]:hover { border-color: var(--teal); }
.lookup-field select:not([data-empty]) { border-color: var(--teal); }

.result-panel {
  border-radius: 5px;
  animation: ici-result-in var(--dur-base) var(--ease-out) both;
}
.motion-ready .result-panel { animation-name: ici-result-in; }
@keyframes ici-result-in {
  from { opacity: 0; transform: translate3d(0, 5px, 0); }
  to   { opacity: 1; transform: none; }
}
.result-state {
  display: inline-block;
  padding: 0.22rem 0.55rem;
  border-radius: 3px;
  background: var(--teal-soft);
  color: var(--aqua-900);
  border: 1px solid var(--aqua-200);
}
/* Attention, not alarm. The authority classifies severity; ICI does not. */
.result-panel.is-attention .result-state { background: var(--ember-soft); color: var(--ink); border-color: var(--ember); }
.result-panel.is-quiet .result-state { background: var(--surface); color: var(--slate-text); border-color: var(--mist); }

/* ---------- 4. Recall results and filters ---------------------------------- */

.notice-filters {
  background: var(--white);
  border: 1px solid var(--mist-soft);
  border-radius: var(--radius-panel);
  padding: 1.1rem 1.25rem;
}
.notice-filters select:hover { border-color: var(--teal); }
.notice {
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.notice:hover { border-top-color: var(--teal); }
.notice-authority {
  display: inline-block;
  background: var(--teal-soft);
  border: 1px solid var(--aqua-200);
  border-radius: 3px;
  padding: 0.2rem 0.5rem;
}
.notice[data-state="reference"] .notice-authority { background: var(--surface); color: var(--slate-text); border-color: var(--mist); }
.notice-foot { border-top: 1px solid var(--hairline); padding-top: 0.7rem; }

/* ---------- 5. Equipment guide --------------------------------------------- */

.guide-section { border-top: 1px solid var(--hairline); padding-top: 1.35rem; }
.guide-section:first-child { border-top: none; padding-top: 0; }
.guide-section h2::before {
  content: "";
  display: block;
  width: 1.75rem; height: 3px;
  background: var(--teal);
  margin-bottom: 0.7rem;
  border-radius: 2px;
}
/* The stop-and-call sections are the most important thing on the page. */
#professional, #photography {
  background: var(--ember-soft);
  border-left: 3px solid var(--ember);
  border-radius: 3px;
  padding: 1.25rem 1.4rem;
}
#professional h2::before, #photography h2::before { background: var(--ember-ink); }
.guide-toc a { transition: color var(--dur-fast) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .choice, .hub-module, .notice, .result-panel, .intake-progress span,
  .field select, .lookup-field select { transition: none; animation: none; }
}

/* ---------- Check My Building: desktop composition -------------------------
   The intake ran in a single narrow column and left most of a 1440 viewport
   empty. A supporting column now carries progress and the session boundary, so
   the assessment column keeps a readable measure without the page looking
   abandoned. One column below 62rem. */
@media (min-width: 62rem) {
  .intake-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
    max-width: 74rem;
  }
  .intake-aside { position: sticky; top: 6.5rem; }
}
.intake-aside {
  background: var(--surface);
  border: 1px solid var(--mist-soft);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-panel);
  padding: 1.35rem 1.5rem;
}
.intake-aside h2 { margin: 0 0 0.75rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--teal); }
.intake-aside ul { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: 0.6rem; }
.intake-aside li { font-size: 0.875rem; line-height: 1.5; color: var(--slate-text); }
.intake-aside .fine { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--hairline); }

/* Two-column option cards where the labels stay readable. */
@media (min-width: 46rem) {
  .choice-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-list .choice { align-items: flex-start; }
}
@media (min-width: 62rem) { .intake-layout .choice-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field select optgroup { font-style: normal; font-weight: 700; color: var(--slate-text); }

/* ---------- Equipment hub marks ---------------------------------------------
   Three drawn marks rather than an icon font: a rating plate, a notice sheet
   and an open guide. Each says what its module does, which is the only reason
   to have a mark at all. */
.hub-mark { display: block; width: 2.5rem; height: 2.5rem; border-radius: 3px; position: relative; }
.hub-mark-plate { border: 2px solid var(--teal); background: var(--teal-soft); }
.hub-mark-plate::before, .hub-mark-plate::after {
  content: ""; position: absolute; left: 20%; height: 2px; background: var(--teal);
}
.hub-mark-plate::before { top: 32%; width: 60%; }
.hub-mark-plate::after { top: 58%; width: 38%; }
.hub-mark-notice { border: 2px solid var(--ember-ink); background: var(--ember-soft); }
.hub-mark-notice::before {
  content: ""; position: absolute; left: 50%; top: 22%; width: 2px; height: 34%;
  background: var(--ember-ink); transform: translateX(-50%);
}
.hub-mark-notice::after {
  content: ""; position: absolute; left: 50%; top: 66%; width: 4px; height: 4px;
  border-radius: 50%; background: var(--ember-ink); transform: translateX(-50%);
}
.hub-mark-guide { border: 2px solid var(--aqua-700); background: var(--surface); }
.hub-mark-guide::before {
  content: ""; position: absolute; left: 50%; top: 15%; width: 2px; height: 70%;
  background: var(--aqua-700); transform: translateX(-50%);
}
.hub-capability {
  margin: 0 0 1.1rem !important;
  font-size: 0.75rem; font-weight: 650; color: var(--aqua-700);
  flex: none !important;
}
.hub-module .hub-status { margin-top: 0.9rem; }

/* ---------- Compact mobile footer -------------------------------------------
   The footer ran 1,199 CSS pixels on mobile, about 43 per cent of the equipment
   hub page. Every link and legal statement is preserved; the reduction comes
   from a two-column grid, tighter rhythm, and dropping the descriptive lede
   that repeats what the page above already said. Target is under 600px, which
   is roughly what the links alone occupy at a readable size. */
@media (max-width: 45.99rem) {
  .colophon { padding-block: 2rem 1.75rem; }
  .colophon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
  .colophon-lede { display: none; }
  .colophon h4 { margin-bottom: 0.4rem; font-size: 0.6875rem; }
  .colophon ul { display: grid; gap: 0.3rem; }
  .colophon li a { display: inline-block; padding-block: 0.25rem; font-size: 0.8125rem; }
  .colophon-note { margin-top: 1.5rem; padding-top: 1rem; }
  .colophon-note p { margin-bottom: 0.5rem; font-size: 0.75rem; line-height: 1.45; }
}

/* Semantic level corrected, visual weight preserved. An h3 sitting directly
   under an h1 with no h2 between is a real defect for anyone navigating by
   headings; it is not a reason to make the text bigger. */
h2.as-h3, h2.label-block-title { font-size: 1.0625rem; }
h2.label-block-title {
  margin: 0 0 0.6rem;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--aqua-700);
}
.hub-module h2.as-h3 { margin: 0.75rem 0 0.5rem; }
.notice h2.as-h3 { margin: 0 0 0.6rem; }

/* ---------- Recall browser hierarchy ---------------------------------------
   Authority, jurisdiction, date, affected equipment and the match limitation
   stay visible. Only the product description and the remedy move behind a
   disclosure, because neither is needed to recognise a potentially relevant
   notice, and together they were most of the page height. */
.filter-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.85rem; margin-bottom: 1.25rem; }
.notice-count { margin: 0 !important; font-weight: 650; color: var(--ink); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 2rem; padding: 0.2rem 0.6rem;
  font: inherit; font-size: 0.8125rem; font-weight: 650;
  background: var(--teal-soft); color: var(--aqua-900);
  border: 1px solid var(--aqua-200); border-radius: 999px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.filter-chip:hover { border-color: var(--teal); background: var(--white); }
.filter-chip:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.notice-more { margin-top: 0.7rem; }
.notice-more > summary { font-size: 0.8125rem; font-weight: 650; }
.notice-more p { margin-top: 0.6rem; }
.notice-key { margin-bottom: 0.75rem !important; }

/* ---------- Footer disclosure groups ----------------------------------------
   Every link and legal statement is preserved. On mobile the four groups
   collapse behind accessible native disclosures; on desktop they are forced
   open and the marker is removed, so the expanded footer is unchanged.
   Native <details> works with keyboard, touch, no JavaScript and no motion. */
.colophon-details > summary { list-style: none; cursor: pointer; }
.colophon-details > summary::-webkit-details-marker { display: none; }
.colophon-details > summary h4 { display: inline; }

@media (max-width: 45.99rem) {
  .colophon-grid { grid-template-columns: 1fr; gap: 0; }
  .colophon-details { border-bottom: 1px solid var(--hairline); }
  .colophon-details > summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 2.75rem; padding-block: 0.35rem;
  }
  .colophon-details > summary::after {
    content: ""; width: 0.55rem; height: 0.55rem; flex: none;
    border-right: 2px solid var(--slate-text); border-bottom: 2px solid var(--slate-text);
    transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease-out);
  }
  .colophon-details[open] > summary::after { transform: rotate(-135deg); }
  .colophon-details > summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -2px; }
  .colophon-details ul { padding-block: 0.25rem 0.85rem; }
}

@media (min-width: 46rem) {
  /* Desktop keeps the fully expanded footer. The groups stay closed in the
     markup so mobile collapses by default; here the closed content is shown
     anyway by overriding display, and the control is made inert. */
  .colophon-details > summary { pointer-events: none; }
  .colophon-details > summary::after { display: none; }
  .colophon-details:not([open]) > ul { display: block; }
}
@media (prefers-reduced-motion: reduce) { .colophon-details > summary::after { transition: none; } }

/* ---------- Guided lookup --------------------------------------------------- */
.lookup-steps { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: 1.15rem; }
@media (min-width: 62rem) { .lookup-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; } }
.lookup-step { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; }
.lookup-step-n {
  width: 1.75rem; height: 1.75rem; margin-top: 1.4rem;
  display: grid; place-items: center; flex: none;
  font-family: var(--font-data); font-size: 0.8125rem; font-weight: 700;
  color: var(--slate-text); background: var(--surface);
  border: 1px solid var(--mist); border-radius: 50%;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.lookup-step.is-done .lookup-step-n { background: var(--teal); border-color: var(--teal); color: var(--white); }
.lookup-required { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ember-ink); }
.lookup-optional { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate-text); }

.lookup-review { margin-top: 1.5rem; padding: 0.9rem 1.1rem; background: var(--surface); border-left: 3px solid var(--teal); border-radius: 3px; }
.lookup-review-label { margin: 0 0 0.3rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--teal); }
.lookup-review-text { margin: 0; font-size: 1rem; font-weight: 650; color: var(--ink); }
.lookup-actions { margin-top: 1.25rem; }
.lookup-empty { margin-top: 1.5rem; padding-left: 1rem; border-left: 2px solid var(--mist); font-size: 0.9375rem; color: var(--slate-text); }
.lookup-result:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
.lookup-result-query { margin: 0 0 0.85rem; font-size: 0.875rem; color: var(--slate-text); }

/* ---------- Guide chapters --------------------------------------------------
   Safety chapters stay visible and prominent; only secondary explanation moves
   behind a native disclosure. Prominence comes from the ember ground and the
   rule, not from red as decoration. */
.guide-toc ol { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: 0.35rem; counter-reset: none; }
.guide-toc a { display: flex; gap: 0.6rem; align-items: baseline; min-height: 2.5rem; padding: 0.3rem 0; font-size: 0.875rem; }
.guide-toc a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.guide-toc-n { font-family: var(--font-data); font-size: 0.75rem; font-weight: 700; color: var(--aqua-700); flex: none; }
.guide-section.is-safety { background: var(--ember-soft); border-left: 3px solid var(--ember-ink); border-radius: 3px; padding: 1.35rem 1.5rem; }
.guide-section.is-safety h2::before { background: var(--ember-ink); }
.guide-more { margin-top: 0.5rem; }
.guide-more > summary { font-size: 0.875rem; font-weight: 650; }
.guide-back { margin: 1rem 0 0 !important; font-size: 0.8125rem; }
@media (min-width: 74rem) { .guide-back { display: none; } }

/* Start over sits with the session note, because they describe the same thing:
   what this browser is holding and how to let it go. */
.check-restart { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.85rem; margin: 0 0 1.5rem; }
.check-restart .fine { margin: 0; }

/* ==========================================================================
   Transition page composition. Chapters, evidence diagram, system families.
   Base content is visible without script. Motion is reveal-only and removed
   entirely under prefers-reduced-motion.
   ========================================================================== */

.tr-hero-grid { display: grid; gap: 2rem; align-items: center; }
.tr-hero-grid h1 { max-width: 22ch; }
.tr-hero-grid .hero-sub { max-width: 58ch; }
.tr-hero-grid .lookup-scope { max-width: 62ch; }
.tr-hero-actions { margin-top: 1.75rem; }
.tr-hero-figure { margin: 0; }
.tr-hero-figure img {
  width: 100%; height: auto; display: block;
  border-radius: 14px; box-shadow: 0 18px 44px rgba(11, 31, 51, 0.18);
}
@media (min-width: 900px) {
  .tr-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 3rem; }
}

.tsec-nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--white); border-bottom: 1px solid var(--hairline);
}
.tsec-nav-inner {
  display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: thin;
  padding-top: 0.5rem; padding-bottom: 0.5rem;
}
.tsec-nav a {
  flex: 0 0 auto; padding: 0.5rem 0.85rem; border-radius: 999px;
  font-size: 0.875rem; font-weight: 600; text-decoration: none;
  color: var(--ink-neutral); white-space: nowrap;
}
.tsec-nav a:hover, .tsec-nav a:focus-visible { background: var(--surface); color: var(--ink); }

.prose.lede { max-width: 64ch; margin-top: 0.75rem; font-size: 1.0625rem; }
.sub-head { margin-top: 3rem; }
.field-slate { background: var(--mist); }

.evidence-svg { width: 100%; height: auto; margin: 2rem 0 1rem; display: block; }
.ev-rail { stroke: var(--teal); stroke-width: 2; }
.ev-dot { fill: var(--ink-deep); }
.ev-num { fill: var(--white); font-size: 15px; font-weight: 700; }
.ev-label { fill: var(--ink); font-size: 14px; font-weight: 600; }
.ev-foot { fill: var(--ink-neutral); font-size: 14px; }

.ladder-grid, .pathway-grid { display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .ladder-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ladder-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .pathway-grid { grid-template-columns: repeat(2, 1fr); } }

.decision-key .state-chip { background: var(--ember-soft); color: var(--ink-deep); border: 1px solid var(--ember); }

.sysfam { display: grid; gap: 0.75rem; margin-top: 1.75rem; }
.sysfam-group { border: 1px solid var(--hairline); border-radius: 12px; background: var(--white); }
.sysfam-group > summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; cursor: pointer; list-style: none;
}
.sysfam-group > summary::-webkit-details-marker { display: none; }
.sysfam-group > summary h3 { margin: 0; font-size: 1.0625rem; }
.sysfam-count { color: var(--ink-neutral); font-size: 0.8125rem; white-space: nowrap; }
.sysfam-group[open] > summary { border-bottom: 1px solid var(--hairline); }
.sysfam-group > ul { margin: 0; padding: 0.75rem 1.25rem 1.25rem; list-style: none; }

.who-grid { display: grid; gap: 2.5rem; margin-top: 1.5rem; }
@media (min-width: 900px) { .who-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem; } }

/* ==========================================================================
   Interior cohort composition: Equipment, How it works, Preparedness.
   ========================================================================== */

.eq-hero-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .eq-hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; } }
.eq-hero-plate {
  border: 1px solid var(--hairline); border-radius: 12px; background: var(--white);
  padding: 1.25rem 1.5rem; box-shadow: 0 10px 30px rgba(11, 31, 51, 0.08);
}
.eq-plate-cap { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-neutral); margin: 0 0 0.75rem; }
.eq-plate-rows > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px dashed var(--hairline); }
.eq-plate-rows dt { font-weight: 600; margin: 0; }
.eq-plate-rows dd { margin: 0; color: var(--ink-neutral); }
.eq-plate-foot { margin: 0.9rem 0 0; font-size: 0.875rem; color: var(--ink-neutral); }

.eq-start { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.eq-start li { display: grid; gap: 0.25rem; padding: 1rem 1.25rem; background: var(--white); border-radius: 10px; border: 1px solid var(--hairline); }
@media (min-width: 860px) { .eq-start li { grid-template-columns: 1fr 1.4fr auto; align-items: center; gap: 1.5rem; } }
.eq-start-when { font-weight: 700; }
.eq-start-then { color: var(--ink-neutral); }
.eq-start-go { font-weight: 600; white-space: nowrap; }

.eq-primary { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .eq-primary { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.eq-primary-frag { background: var(--ink-deep); color: var(--white); border-radius: 14px; padding: 1.5rem 1.75rem; }
.eq-frag-label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; margin: 0 0 0.9rem; }
.eq-frag-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.eq-frag-steps li { display: flex; gap: 0.75rem; align-items: baseline; }
.eq-frag-steps span { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--teal); color: var(--ink-deep); font-weight: 700; font-size: 0.8125rem; flex: 0 0 auto; }
.eq-frag-foot { margin: 1.1rem 0 0; font-size: 0.875rem; opacity: 0.8; }
.eq-pair { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .eq-pair { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.eq-module { background: var(--white); border: 1px solid var(--hairline); border-radius: 14px; padding: 1.75rem; }
.eq-module-notice { border-top: 4px solid var(--teal); }
.eq-module-guide { border-top: 4px solid var(--ember); }

.hiw-track { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 1.5rem 0 0; padding: 0; }
.hiw-track li { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9375rem; color: var(--ink-neutral); }
.hiw-track-n { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--teal); color: var(--ink-deep); font-size: 0.8125rem; }
.journey .flow-step { position: relative; }
.journey-rail { display: none; }
@media (min-width: 900px) {
  .journey { position: relative; }
  .journey::before { content: ""; position: absolute; left: 1.5rem; top: 1.5rem; bottom: 1.5rem; width: 2px; background: var(--hairline); }
  .journey .flow-step { padding-left: 4.5rem; }
  .journey-rail { display: block; position: absolute; left: 0; top: 0.35rem; }
  .journey-dot, .journey-rail .flow-step-number {
    display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--ink-deep); color: var(--white); font-weight: 700; position: static;
  }
}
.hiw-bounds { margin: 1.25rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; color: var(--ink-neutral); }

.prep-boundary { background: var(--surface); }
.prep-contexts { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid var(--hairline); }
.prep-contexts-inner { display: flex; gap: 0.4rem; overflow-x: auto; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.prep-ctx { flex: 0 0 auto; padding: 0.5rem 0.9rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; text-decoration: none; color: var(--ink); border: 1px solid var(--hairline); white-space: nowrap; }
.prep-ctx.ctx-climate { border-color: var(--teal); }
.prep-ctx.ctx-heat { border-color: #c8862f; }
.prep-ctx.ctx-cold { border-color: #3f76a8; }
.prep-ctx.ctx-wildfire { border-color: #8a6a5e; }
.prep-diagram { margin: 1.25rem 0 1.5rem; }
.prep-svg { width: 100%; max-width: 560px; height: auto; display: block; }
.pd-roofline { fill: none; stroke: var(--ink-deep); stroke-width: 3; }
.pd-body { fill: none; stroke: var(--ink-deep); stroke-width: 3; }
.pd-divider { stroke: var(--hairline); stroke-width: 2; }
.pd-dot { fill: var(--hairline); }
.pd-node.is-marked .pd-dot { fill: var(--teal); stroke: var(--ink-deep); stroke-width: 2.5; }
.pd-label { font-size: 13px; fill: var(--ink-neutral); }
.pd-node.is-marked .pd-label { fill: var(--ink); font-weight: 700; }
.ctx-heat .pd-node.is-marked .pd-dot { fill: #e0a33f; }
.ctx-cold .pd-node.is-marked .pd-dot { fill: #6fa2d0; }
.ctx-wildfire .pd-node.is-marked .pd-dot { fill: #a8867a; }
.prep-diagram-cap { font-size: 0.8125rem; color: var(--ink-neutral); margin-top: 0.6rem; max-width: 64ch; }
.prep-cols { display: grid; gap: 1.5rem; margin-top: 0.5rem; }
@media (min-width: 860px) { .prep-cols { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.prep-col h4 { margin-top: 0; }

/* ==========================================================================
   Visual correction pass: Equipment proof hero, distinct module rhythm,
   Preparedness split hero, context navigator, four distinct diagrams.
   Every colour below resolves against a real palette token.
   ========================================================================== */

.eq-seq { margin: 1.5rem 0 0; padding-left: 1.15rem; display: grid; gap: 0.35rem; color: var(--ink-neutral); font-size: 0.9375rem; }
.eq-proof { background: var(--ink-deep); color: var(--white); border-radius: 14px; padding: 1.5rem 1.6rem; box-shadow: 0 18px 44px rgba(11, 31, 51, 0.22); }
.eq-proof-tag { margin: 0 0 1rem; font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--teal); }
.eq-proof-query dl { margin: 0; display: grid; gap: 0.3rem; }
.eq-proof-query dl > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,0.16); padding-bottom: 0.3rem; }
.eq-proof-query dt { margin: 0; opacity: 0.72; font-size: 0.8125rem; }
.eq-proof-query dd { margin: 0; font-weight: 700; font-size: 0.875rem; }
.eq-proof-review { margin: 0.9rem 0 0; font-size: 0.8125rem; opacity: 0.8; }
.eq-proof-result { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 2px solid var(--teal); }
.eq-proof-state { margin: 0 0 0.4rem; font-weight: 700; color: var(--teal); }
.eq-proof-authority { margin: 0 0 0.25rem; font-size: 0.75rem; opacity: 0.75; }
.eq-proof-title { margin: 0 0 0.5rem; font-size: 0.9375rem; font-weight: 600; }
.eq-proof-limit { margin: 0; font-size: 0.8125rem; opacity: 0.82; }
.eq-proof-foot { margin: 1.1rem 0 0; font-size: 0.75rem; opacity: 0.7; border-top: 1px solid rgba(255,255,255,0.16); padding-top: 0.8rem; }
.eq-limit { color: var(--ink-neutral); font-size: 0.875rem; max-width: 52ch; }

.eq-notice-surface { border-left: 4px solid var(--ember); background: var(--white); border-radius: 0 14px 14px 0; padding: 1.75rem 2rem; display: grid; gap: 1.75rem; }
@media (min-width: 900px) { .eq-notice-surface { grid-template-columns: 1fr 1.05fr; gap: 3rem; align-items: start; } }
.eq-notice-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.eq-notice-table caption { text-align: left; font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-neutral); padding-bottom: 0.6rem; }
.eq-notice-table th, .eq-notice-table td { text-align: left; padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.eq-notice-table th { width: 34%; color: var(--ink-neutral); font-weight: 600; }

.eq-guide { display: grid; gap: 2rem; }
@media (min-width: 900px) { .eq-guide { grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: start; } }
.eq-idpath { list-style: none; margin: 0; padding: 0; counter-reset: idp; display: grid; gap: 0; }
.eq-idpath li { counter-increment: idp; display: grid; gap: 0.2rem; padding: 1rem 0 1rem 3rem; border-top: 1px solid var(--hairline); position: relative; }
.eq-idpath li:last-child { border-bottom: 1px solid var(--hairline); }
.eq-idpath li::before { content: counter(idp); position: absolute; left: 0; top: 1rem; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ember); color: var(--ink-deep); font-weight: 700; font-size: 0.8125rem; }
.eq-idpath span { color: var(--ink-neutral); font-size: 0.9375rem; }

.eq-close-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .eq-close-grid { grid-template-columns: 0.85fr 1.15fr; gap: 3.5rem; align-items: start; } }
.eq-close-bounds { margin: 0; display: grid; gap: 1rem; }
.eq-close-bounds > div { padding: 1rem 1.25rem; background: var(--white); border-radius: 10px; border-left: 3px solid var(--teal); }
.eq-close-bounds dt { margin: 0 0 0.3rem; font-weight: 700; font-size: 0.875rem; }
.eq-close-bounds dd { margin: 0; color: var(--ink-neutral); font-size: 0.9375rem; }

.prep-hero-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .prep-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; } }
.prep-thesis { border-left: 3px solid var(--ember); padding-left: 1rem; margin: 1.5rem 0; font-weight: 600; max-width: 54ch; }
.prep-hero-visual { background: var(--white); border-radius: 14px; padding: 1.25rem; border: 1px solid var(--hairline); }
.prep-hero-svg { max-width: none; }
.prep-boundary .prose { max-width: 78ch; }

.prep-ctx { border-width: 2px; }
.prep-ctx:hover, .prep-ctx:focus-visible { background: var(--surface); }
.prep-ctx.ctx-wildfire { border-color: var(--ember); }
.prep-modules { display: grid; gap: 1.5rem; }
.prep-module { padding: 1.75rem; }
.prep-module[data-context="ctx-wildfire"] { border-left: 4px solid var(--ember); }

.pd-ring { fill: none; stroke: var(--teal-line); stroke-width: 2; stroke-dasharray: 5 6; }
.pd-outer { fill: none; stroke: var(--ink-neutral); stroke-width: 2; stroke-dasharray: 4 5; }
.pd-envelope { fill: var(--white); stroke: var(--ink-deep); stroke-width: 2.5; }
.pd-layer { fill: var(--white); stroke: var(--hairline); stroke-width: 1.5; }
.pd-flow { stroke: var(--teal); stroke-width: 2; fill: none; }
.pd-arrow { fill: var(--teal); }
.pd-airpath { fill: none; stroke: var(--ember); stroke-width: 2.5; stroke-dasharray: 7 5; }
.pd-core { fill: var(--ink-deep); font-size: 13px; font-weight: 700; }
.pd-sub { fill: var(--ink-neutral); font-size: 12px; }
.pd-foot { fill: var(--ink-neutral); font-size: 12px; }
.ctx-heat .pd-flow, .ctx-heat .pd-arrow { stroke: #b06f1e; fill: none; }
.ctx-heat .pd-arrow { fill: #b06f1e; }
.ctx-cold .pd-envelope { stroke: #2f5f8a; }

/* ==========================================================================
   Preparedness context explorer. Visible by default; the navigator only
   takes effect once the script adds .is-enhanced.
   ========================================================================== */
.prep-selector { display: grid; gap: 0.5rem; grid-template-columns: 1fr 1fr; margin-bottom: 1.5rem; }
@media (min-width: 760px) { .prep-selector { display: flex; flex-wrap: wrap; gap: 0.5rem; } }
.prep-selector .prep-ctx {
  display: block; min-height: 48px; padding: 0.85rem 1rem; border-radius: 10px;
  border: 2px solid var(--hairline); background: var(--white); color: var(--ink-deep);
  font-weight: 600; font-size: 0.9375rem; text-decoration: none; text-align: left;
}
.prep-selector .prep-ctx.is-active { border-color: var(--ember); box-shadow: inset 3px 0 0 var(--ember); }
.prep-selector .prep-ctx:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.prep-panels { display: grid; gap: 1.5rem; }
.is-enhanced .prep-panels { gap: 0; }
.prep-module[data-prep-panel] {
  background: var(--white); border: 1px solid var(--hairline); border-radius: 14px;
  padding: 1.75rem;
}
.prep-module[data-prep-panel]:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.prep-module[data-context="ctx-wildfire"] { border-left: 4px solid var(--ember); }
.prep-panel-grid { display: grid; gap: 1.5rem; margin: 1.25rem 0 1.5rem; }
@media (min-width: 1000px) { .prep-panel-grid { grid-template-columns: 0.95fr 1.05fr; gap: 2.5rem; align-items: start; } }
.prep-lists { display: grid; gap: 1.25rem; }
@media (min-width: 620px) { .prep-lists { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.prep-lists h4 { margin: 0 0 0.4rem; font-size: 0.875rem; }
.prep-lists ul { margin: 0; padding-left: 1.05rem; font-size: 0.875rem; }
.prep-source { border-top: 3px solid var(--ember); padding-top: 1rem; display: grid; gap: 0.5rem; }
.prep-source-authority { margin: 0; font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-neutral); }
.prep-source-meta { margin: 0; display: grid; gap: 0.35rem 1.5rem; font-size: 0.8125rem; }
@media (min-width: 620px) { .prep-source-meta { grid-template-columns: repeat(4, 1fr); } }
.prep-source-meta dt { margin: 0; color: var(--ink-neutral); }
.prep-source-meta dd { margin: 0; font-weight: 600; }
.prep-source-limit { margin: 0; font-size: 0.8125rem; color: var(--ink-neutral); }
.prep-source-go { font-weight: 600; }

/* Preparedness bridge and active-panel proportions. */
.prep-bridge-thesis { font-size: 1.0625rem; max-width: 62ch; margin-top: 0; }
.prep-bridge-seq { list-style: none; margin: 1.75rem 0 1.5rem; padding: 0; display: grid; gap: 0; counter-reset: pb; }
@media (min-width: 900px) { .prep-bridge-seq { grid-template-columns: repeat(3, 1fr); gap: 0 1.5rem; } }
.prep-bridge-seq li { display: grid; gap: 0.25rem; padding: 1rem 0 1rem 2.75rem; position: relative; border-top: 2px solid var(--teal-line); }
@media (min-width: 900px) { .prep-bridge-seq li::after { content: "\\2192"; position: absolute; right: -1.15rem; top: 1rem; color: var(--teal); } .prep-bridge-seq li:last-child::after { content: none; } }
.prep-bridge-n { position: absolute; left: 0; top: 0.95rem; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--ink-deep); color: var(--white); font-size: 0.8125rem; font-weight: 700; }
.prep-bridge-seq span:not(.prep-bridge-n) { color: var(--ink-neutral); font-size: 0.875rem; }
.prep-bridge-note { max-width: 82ch; font-size: 0.875rem; color: var(--ink-neutral); border-left: 3px solid var(--ember); padding-left: 1rem; }
@media (min-width: 1000px) { .prep-panel-grid { grid-template-columns: 40% 1fr; gap: 2.5rem; } }
.prep-lists { grid-template-columns: 1fr; }
@media (min-width: 620px) and (max-width: 999px) { .prep-lists { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .prep-lists { grid-template-columns: 1fr; gap: 1.5rem; }
  .prep-lists .prep-col:first-child { border-left: 3px solid var(--teal); padding-left: 1rem; }
  .prep-lists .prep-col:not(:first-child) { display: grid; grid-template-columns: 1fr; }
  .prep-doc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

/* Transition compression: compact evidence key, merged regions, audience disclosures. */
.evidence-key { margin: 1.5rem 0 0; display: grid; gap: 0; }
@media (min-width: 760px) { .evidence-key { grid-template-columns: repeat(2, 1fr); gap: 0 2.5rem; } }
@media (min-width: 1200px) { .evidence-key { grid-template-columns: repeat(3, 1fr); } }
.evidence-key > div { padding: 0.7rem 0; border-top: 1px solid var(--hairline); }
.evidence-key dt { display: flex; align-items: baseline; gap: 0.55rem; font-weight: 700; font-size: 0.9375rem; margin: 0 0 0.15rem; }
.evidence-key-n { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--ink-deep); color: var(--white); font-size: 0.75rem; flex: 0 0 auto; }
.evidence-key dd { margin: 0; color: var(--ink-neutral); font-size: 0.875rem; }
.sub-region { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid var(--teal-line); }
.aud { border-top: 1px solid var(--hairline); }
.aud:last-of-type { border-bottom: 1px solid var(--hairline); }
.aud > summary { cursor: pointer; padding: 1.1rem 0; list-style: none; display: grid; gap: 0.2rem; }
.aud > summary::-webkit-details-marker { display: none; }
.aud > summary h3 { margin: 0; font-size: 1.0625rem; }
.aud-benefit { color: var(--ink-neutral); font-size: 0.9375rem; }
.aud[open] > summary { border-bottom: 1px solid var(--hairline); }
.aud > *:not(summary) { margin-top: 1rem; }
.band-wide { padding-top: 3rem; padding-bottom: 3rem; }

/* Transition: energy-evaluation comparison and audience disclosures. */
.energy-lede { font-size: 1.0625rem; font-weight: 600; max-width: 46ch; margin-bottom: 1.5rem; }
.energy-split { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .energy-split { grid-template-columns: 1fr 1fr; gap: 3rem; position: relative; }
  .energy-split::before { content: ""; position: absolute; left: 50%; top: 0.25rem; bottom: 0.25rem; width: 1px; background: var(--hairline); } }
.energy-col { display: grid; gap: 0.75rem; align-content: start; }
.energy-tag { margin: 0; font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-neutral); padding-bottom: 0.5rem; border-bottom: 2px solid var(--hairline); }
.energy-col-ici .energy-tag { border-bottom-color: var(--teal); color: var(--ink-deep); }
.energy-claim { margin: 0; font-size: 0.9375rem; }
.energy-list { margin: 0.25rem 0 0; padding-left: 1.05rem; display: grid; gap: 0.4rem; color: var(--ink-neutral); font-size: 0.875rem; }
.energy-independence { margin-top: 2rem; padding: 1rem 1.25rem; background: var(--surface); border-left: 3px solid var(--ember); font-size: 0.875rem; max-width: none; }

.aud { border: 1px solid var(--hairline); border-radius: 12px; margin-bottom: 0.75rem; background: var(--white); }
.aud:last-of-type { border-bottom: 1px solid var(--hairline); }
.aud > summary {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  column-gap: 1rem; row-gap: 0.2rem; padding: 1.25rem 1.4rem;
}
.aud > summary h3 { grid-column: 2; }
.aud-benefit { grid-column: 2; }
.aud-n { grid-row: 1 / span 2; font-size: 1.25rem; font-weight: 700; color: var(--teal); font-variant-numeric: tabular-nums; }
.aud-more { grid-row: 1 / span 2; grid-column: 3; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--teal); position: relative; }
.aud-more::before, .aud-more::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink-deep); transform: translate(-50%, -50%); }
.aud-more::before { width: 0.75rem; height: 2px; }
.aud-more::after { width: 2px; height: 0.75rem; transition: transform 200ms ease; }
.aud[open] .aud-more::after { transform: translate(-50%, -50%) scaleY(0); }
.aud[open] .aud-more { background: var(--teal-soft); }
.aud > *:not(summary) { padding-left: 1.4rem; padding-right: 1.4rem; }
.aud > *:last-child { padding-bottom: 1.4rem; }
@media (prefers-reduced-motion: reduce) { .aud-more::after { transition: none; } }


body{background:var(--ici-offwhite);color:var(--ici-ink)}
h1,h2,h3{color:var(--ici-navy)}

/* Action. Navy on teal measures 5.10:1; white on teal does not, so it is not used. */
.btn-primary{background:var(--ici-teal);border-color:var(--ici-teal);color:var(--ici-navy);font-weight:650}
.btn-primary:hover{background:#00A88F;border-color:#00A88F;color:var(--ici-navy)}
.btn-primary:focus-visible{outline:3px solid var(--ici-navy);outline-offset:2px}
.btn-tertiary{color:var(--ici-teal-ink);border-color:var(--ici-teal-ink)}
.btn-tertiary:hover{background:var(--ici-sky)}
a{color:var(--ici-teal-ink)}

/* Section grounds: sky bands carry the bright register. */
.ici-sky{background:var(--ici-sky)}
.ici-plain{background:var(--ici-offwhite)}
.ici-navy-band{background:var(--ici-navy);color:#EAF3F7}
.ici-navy-band h2,.ici-navy-band h3{color:#FFFFFF}
.ici-navy-band a{color:#9FE8DA}

/* Marketing copy sits on the ground, not in a card. */
.ici-section{padding:clamp(2.5rem,6vw,5rem) 0}
.ici-section>.shell>h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin:0 0 .4rem}
.ici-lede{max-width:62ch;font-size:1.05rem;margin:0 0 1.2rem}
.ici-rule{border:0;border-top:1px solid var(--ici-hairline);margin:0}

/* Document surface: anything that is a record. */
.ici-profile{background:var(--ici-white);border:1px solid var(--ici-hairline);
  border-radius:var(--ici-radius);box-shadow:none;padding:1.25rem 1.25rem 1rem}
.ici-profile-head{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;
  border-bottom:1px solid var(--ici-hairline);padding-bottom:.75rem;margin-bottom:.75rem}
.ici-profile-head h3{margin:0;font-size:1.1rem}
.ici-row{display:grid;grid-template-columns:minmax(7rem,1fr) auto;gap:.25rem .75rem;
  align-items:baseline;padding:.7rem 0;border-bottom:1px solid var(--ici-hairline)}
.ici-row:last-of-type{border-bottom:0}
.ici-row-name{font-weight:650;color:var(--ici-navy)}
.ici-row-note{grid-column:1/-1;font-size:.9rem;color:#40525E;margin:.15rem 0 0}
.ici-withheld{background:#F4F8FA;border-left:3px solid var(--ici-navy);padding:.7rem .9rem;
  margin:.9rem 0 0;font-size:.95rem}
.ici-next{margin:.8rem 0 0;font-size:.95rem}

/* Identifier plate: references, dates, model and serial numbers, readings only. */
.ici-plate{display:inline-block;background:var(--ici-navy);color:#EAF3F7;
  font-family:var(--font-data);font-size:.85rem;letter-spacing:.02em;
  padding:.2rem .5rem;border-radius:2px}

/* Evidence state: label plus mark plus colour. Colour is never the only signal. */
.ici-ev{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;font-weight:600}
.ici-ev::before{font-family:var(--font-data);font-size:.8rem;line-height:1}
.ici-ev-documented{color:var(--ev-documented)}
.ici-ev-documented::before{content:"[D]"}
.ici-ev-stated{color:var(--ev-stated)}
.ici-ev-stated::before{content:"[S]"}
.ici-ev-none{color:var(--ev-none)}
.ici-ev-none::before{content:"[ ]"}

/* Result chips on the preview. Not evidence colours. */
.ici-finding{font-family:var(--font-data);font-size:.9rem;color:var(--ici-navy);
  background:var(--ici-sky);padding:.15rem .45rem;border-radius:2px}
.ici-noresult{font-size:.9rem;color:var(--ev-none);font-weight:600}

/* Building paths: cards, because each is a selectable route. */
.ici-paths{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));margin-top:1.4rem}
.ici-path{background:var(--ici-white);border:1px solid var(--ici-hairline);border-radius:var(--ici-radius);
  overflow:hidden;display:flex;flex-direction:column}
.ici-path img{width:100%;height:9.5rem;object-fit:cover;display:block}
.ici-path-body{padding:.85rem 1rem 1.1rem}
.ici-path h3{margin:0 0 .3rem;font-size:1.05rem}
.ici-path p{margin:0;font-size:.93rem}

/* Three-step process: numbers, no cards. */
.ici-steps{counter-reset:s;list-style:none;padding:0;margin:1.4rem 0 1.6rem;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.ici-steps li{counter-increment:s;padding-left:2.6rem;position:relative}
.ici-steps li::before{content:counter(s);position:absolute;left:0;top:-.15rem;
  width:1.9rem;height:1.9rem;border-radius:50%;background:var(--ici-teal);color:var(--ici-navy);
  display:grid;place-items:center;font-weight:700;font-family:var(--font-data)}

/* Benefit band: compact, three across, no boxes. */
.ici-benefits{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin-top:1.2rem}
.ici-benefits h3{font-size:1.05rem;margin:0 0 .3rem}
.ici-benefits p{margin:0}

/* Media-led sections. */
.ici-media{display:grid;gap:clamp(1.2rem,4vw,2.5rem);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.ici-media img{width:100%;border-radius:var(--ici-radius);display:block}
.ici-figure-note{font-size:.82rem;color:#4A5C68;margin:.4rem 0 0}

/* Product relationship: compact, three columns, hairline separated. */
.ici-trio{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  border-top:1px solid var(--ici-hairline);margin-top:1.2rem}
.ici-trio>div{padding:1.1rem 1.2rem 1.2rem;border-bottom:1px solid var(--ici-hairline)}
.ici-trio h3{font-size:1rem;margin:0 0 .3rem}
.ici-trio p{margin:0;font-size:.94rem}

/* Measured institutional register: same system, more navy, tighter. */
.ici-measured{--ici-offwhite:#F4F7F9}
.ici-measured .ici-section{padding:clamp(2rem,4vw,3.2rem) 0}
.ici-measured .ici-lede{font-size:1rem}
.ici-measured h2{color:var(--ici-navy)}

/* Reference-page contents navigation. */
.ici-toc{background:var(--ici-white);border:1px solid var(--ici-hairline);border-radius:var(--ici-radius);
  padding:.9rem 1.1rem;margin:1.2rem 0 1.8rem}
.ici-toc h2{font-size:.95rem;margin:0 0 .5rem;text-transform:none}
.ici-toc ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.ici-toc a{font-size:.94rem}

/* Signature animation: the sample profile assembles once. */
.ici-build .ici-row,.ici-build .ici-withheld,.ici-build .ici-next{opacity:0;transform:translateY(6px)}
.ici-build.is-done .ici-row,.ici-build.is-done .ici-withheld,.ici-build.is-done .ici-next{
  opacity:1;transform:none;transition:opacity .22s ease,transform .22s ease}
.ici-build .ici-row.is-in,.ici-build .ici-withheld.is-in,.ici-build .ici-next.is-in{
  opacity:1;transform:none;transition:opacity .22s ease,transform .22s ease}
.ici-build.is-complete{box-shadow:0 0 0 3px var(--ici-sun);transition:box-shadow .3s ease}
@media (prefers-reduced-motion:reduce){
  .ici-build .ici-row,.ici-build .ici-withheld,.ici-build .ici-next{opacity:1;transform:none;transition:none}
  .ici-build.is-complete{box-shadow:none}
}

/* Assessment flow: clearer progress and calmer optional fields. */
.step-of{font-family:var(--font-data);font-size:.85rem;color:var(--ici-navy);letter-spacing:.02em}
.check-step .choice{border-radius:var(--ici-radius)}
.check-step .choice:focus-within{outline:2px solid var(--ici-teal-ink);outline-offset:2px}
.field-hint{color:#4A5C68}
.ici-progress{height:4px;background:var(--ici-sky);border-radius:2px;overflow:hidden;margin:.6rem 0 1.2rem}
.ici-progress span{display:block;height:100%;background:var(--ici-teal)}

/* Never a horizontal scrollbar. */
html,body{max-width:100%;overflow-x:hidden}
img{max-width:100%;height:auto}


/* ---- Equipment hero: dark example panel, AA contrast throughout -------
   The panel previously set dark teal #015D75 on near-black navy, which is
   1.6:1 and effectively invisible. Every foreground here is measured. */
.eq-proof{background:var(--ici-navy);color:#EAF3F7;box-shadow:none;
  border:1px solid rgba(255,255,255,.14);border-radius:var(--ici-radius)}
.eq-proof p,.eq-proof li,.eq-proof dd,.eq-proof dt{color:#EAF3F7}
.eq-proof-tag{color:#A8DCEC;letter-spacing:.09em}            /* eyebrow, 8.5:1 */
.eq-proof-state{color:#FFC24B;font-weight:700}               /* "Potentially relevant", 8.0:1 */
.eq-proof-title{color:#FFFFFF}
.eq-proof-query,.eq-proof-result,.eq-proof-authority{color:#EAF3F7}
.eq-proof-foot,.eq-proof-limit,.eq-proof-review{color:#C9DDE6;font-size:.86rem}
.eq-proof hr,.eq-proof .eq-proof-foot{border-color:rgba(255,255,255,.24)}
.eq-proof a{color:#9FE8DA;text-decoration:underline}
.eq-proof a:hover{color:#FFFFFF}
.eq-proof a:focus-visible{outline:3px solid var(--ici-sun);outline-offset:2px}
.eq-proof-state::before{content:"[!] ";font-family:var(--font-data)}   /* mark, never colour alone */


/* ================================================================
   Condition Profile — print and PDF.
   Letter pages, consistent margins, nothing split across a page,
   no browser chrome, no interactive controls, legible in grayscale.
   ================================================================ */
@media print{
  @page{size:Letter;margin:16mm 14mm 18mm}
  html,body{background:#fff;color:#000;font-size:10.5pt}
  header,footer,nav,.masthead,.nav,.nav-menu,.menu-scrim,.colophon,.btn,.btn-row,
  .report-actions,.check-restart,.transfer-panel button,.alm-ctl,.alm-pad,
  [hidden],.visually-hidden-band{display:none !important}
  a{color:#000;text-decoration:none}
  a[href^="/"]::after,a[href^="http"]::after{content:"" }   /* no raw URLs in print */
  main{max-width:none;padding:0}

  /* Report header repeats sensibly and stays sharp. */
  .ici-report-head{display:flex;gap:12mm;align-items:flex-start;
    border-bottom:1.2pt solid #023458;padding-bottom:4mm;margin-bottom:6mm}
  .ici-report-head img{height:12mm;width:auto}
  .ici-report-title{font-size:16pt;margin:0;color:#000}
  .ici-report-meta{font-family:var(--font-data);font-size:9pt;color:#000}

  /* Nothing is allowed to split. */
  .ici-profile,.result-panel,.assessed,.core-item,.ici-row,.ici-withheld,
  .continuation,.transfer-panel,.ici-toc,.panel,.callout{
    break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid;orphans:3;widows:3}
  p,li{orphans:3;widows:3}
  .ici-print-break{break-before:page}

  /* Ink-conscious: structure through rules, not filled blocks. */
  .ici-profile,.result-panel{border:0.6pt solid #444;background:#fff;box-shadow:none;padding:4mm}
  .ici-plate{background:#fff;color:#000;border:0.6pt solid #444;padding:0.5mm 1.5mm}
  .ici-finding{background:#fff;border:0.6pt solid #444}
  .ici-sky,.ici-navy-band,.band-tight,.band-wide{background:#fff !important;color:#000 !important}

  /* Evidence states stay readable in grayscale: the mark carries the meaning. */
  .ici-ev,.ici-ev-documented,.ici-ev-stated,.ici-ev-none{color:#000 !important;font-weight:700}

  /* Running footer with the profile reference. */
  .ici-print-foot{display:block !important;font-family:var(--font-data);font-size:8pt;
    border-top:0.6pt solid #999;padding-top:2mm;margin-top:6mm}
}
.ici-print-foot{display:none}
.ici-report-head{display:flex;gap:1rem;align-items:center;border-bottom:2px solid var(--ici-navy);
  padding-bottom:.75rem;margin-bottom:1rem}
.ici-report-head img{height:2.4rem;width:auto}
.ici-report-title{margin:0;font-size:1.4rem}
.ici-report-meta{font-family:var(--font-data);font-size:.85rem;color:#40525E}

/* ---- Condition Profile: glance, unresolved table, actions, continuation ---- */
.ici-glance{background:var(--ici-white);border:1px solid var(--ici-hairline);border-radius:var(--ici-radius);
  padding:1rem 1.2rem;margin:1.4rem 0}
.ici-glance-h{font-size:1.05rem;margin:0 0 .6rem}
.ici-glance-grid{display:grid;gap:.6rem 1.4rem;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin:0}
.ici-glance-grid dt{font-size:.85rem;color:#40525E}
.ici-glance-grid dd{margin:0;font-family:var(--font-data);font-size:1.25rem;color:var(--ici-navy)}
.ici-glance-next{margin:.9rem 0 0;padding-top:.7rem;border-top:1px solid var(--ici-hairline);font-size:.95rem}
.ici-unresolved,.ici-actions,.ici-continue{margin:1.6rem 0}
.ici-unresolved h2,.ici-actions h2,.ici-continue h2{font-size:1.05rem;margin:0 0 .6rem}
.ici-table{width:100%;border-collapse:collapse;font-size:.92rem;background:var(--ici-white)}
.ici-table th,.ici-table td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--ici-hairline);vertical-align:top}
.ici-table thead th{font-size:.8rem;color:#40525E;text-transform:none;font-weight:650}
.ici-action-group{margin:0 0 .9rem}
.ici-action-group h3{font-size:.95rem;margin:0 0 .3rem;color:var(--ici-navy)}
.ici-action-group ul{margin:0;padding-left:1.1rem}
.ici-action-group li{margin:.2rem 0}
@media print{
  .ici-glance,.ici-unresolved,.ici-actions,.ici-continue,.ici-action-group,.ici-table tr{
    break-inside:avoid;page-break-inside:avoid}
  .ici-table{font-size:9.5pt}
  .ici-glance{border:0.6pt solid #444;background:#fff}
  .ici-glance-grid dd{color:#000}
  .result-layout{display:block}
  .result-aside{margin-top:6mm}
}


/* ---- Print layout corrections found by inspecting rendered PDF pages ---- */
@media print{
  .ici-glance-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:3mm 6mm}
  .ici-glance-grid dt{font-size:8.5pt}
  .ici-glance-grid dd{font-size:12pt;margin-top:1mm}
  .ici-profile-head{display:block}
  .ici-profile-head h3{display:inline;margin-right:4mm}
  .ici-profile-head .ici-plate{float:right}
  .ici-withheld+.ici-withheld{display:none}   /* never two withheld panels in a row */
  .ici-actions h2,.ici-unresolved h2,.ici-continue h2{margin-top:4mm}
}

/* A short report must not spill a trailing line onto an empty page. */
@media print{
  @page{margin:14mm 14mm 15mm}
  .ici-glance{margin:4mm 0;padding:3mm 4mm}
  .ici-profile{padding:3mm}
  .ici-unresolved,.ici-actions,.ici-continue{margin:4mm 0}
  .ici-limits{margin-top:4mm}
  .ici-limits h2{font-size:10pt}
  .ici-print-foot{margin-top:4mm;padding-top:1.5mm}
  .ici-row{padding:2mm 0}
  h1{font-size:15pt;margin:0 0 1mm}
  h2{font-size:11.5pt}
  .ici-action-group li{margin:0.5mm 0}
}


/* ---- Equipment example panel: rendered-contrast lock ------------------
   Written at higher specificity than the original .eq-proof-* rules so the
   cascade cannot reverse them, and the stylesheet is content-hashed so a
   cached copy cannot serve the old dark-teal-on-navy values. */
.eq-proof .eq-proof-tag,
.eq-hero .eq-proof .eq-proof-tag{color:#DCEEF5 !important;opacity:1}
.eq-proof .eq-proof-state,
.eq-hero .eq-proof .eq-proof-state{color:#FFC24B !important;font-weight:700;font-size:1.05rem;
  display:inline-flex;align-items:center;gap:.4rem}
.eq-proof .eq-proof-state::before{content:"!";font-family:var(--font-data);font-weight:700;
  color:#023458;background:#FFC24B;width:1.25rem;height:1.25rem;border-radius:50%;
  display:inline-grid;place-items:center;font-size:.8rem}
.eq-proof .eq-proof-title,.eq-proof dt{color:#FFFFFF !important}
.eq-proof .eq-proof-query,.eq-proof .eq-proof-result,.eq-proof .eq-proof-authority,
.eq-proof dd,.eq-proof p{color:#EAF3F7}
.eq-proof .eq-proof-foot,.eq-proof .eq-proof-limit,.eq-proof .eq-proof-review{color:#C9DDE6 !important}
.eq-proof a{color:#9FE8DA !important}


/* ---- Almanac composition: map full width, evidence below in a grid ---- */
.alm-work{display:block}
.alm-stage{width:100%}
.alm-mapwrap{width:100%;max-width:none}
.alm-map{width:100%;height:auto;aspect-ratio:1000/620}
.alm-panel{width:100%;max-width:none;margin:1.5rem 0 0;border:0;background:transparent;padding:0}
.alm-summary{background:var(--ici-white);border:1px solid var(--ici-hairline);
  border-radius:var(--ici-radius);padding:1rem 1.2rem;margin:0 0 1.2rem}
.alm-summary h2{margin:0 0 .3rem;font-size:1.25rem}
.alm-availability{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:.6rem 0 0;font-size:.9rem}
.alm-availability span{display:inline-flex;align-items:center;gap:.35rem}
.alm-availability b{font-family:var(--font-data);color:var(--ici-navy)}
.alm-evgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.alm-evcard{background:var(--ici-white);border:1px solid var(--ici-hairline);
  border-radius:var(--ici-radius);padding:.9rem 1rem;break-inside:avoid}
.alm-evcard h3{margin:0 0 .25rem;font-size:1rem}
.alm-evcard .alm-figure{font-family:var(--font-data);font-size:1.35rem;color:var(--ici-navy);margin:.1rem 0}
.alm-evcard .alm-sub{font-size:.85rem;color:#40525E;margin:.1rem 0 .4rem}
.alm-evcard ul{margin:.3rem 0 0;padding-left:1.05rem;font-size:.85rem;color:#40525E}
.alm-evcard li{margin:.15rem 0}
.alm-unavail{margin:1.2rem 0 0}
.alm-unavail h3{font-size:.95rem;margin:0 0 .5rem}
.alm-unavail ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.alm-unavail li{font-size:.82rem;background:var(--ici-sky);color:var(--ici-navy);
  padding:.2rem .55rem;border-radius:999px}
.alm-foot{margin:1.6rem 0 0;padding-top:.9rem;border-top:1px solid var(--ici-hairline);
  font-size:.82rem;color:#40525E}
@media (max-width:860px){
  .alm-evgrid{grid-template-columns:1fr}
  .alm-mapwrap{padding:.4rem}
  .alm-map{aspect-ratio:4/3}
}


/* Question list on the transition page: scannable, not a card grid. */
.ici-qlist{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.ici-qlist li{padding:.55rem .8rem;background:var(--ici-white);
  border-left:3px solid var(--ici-teal);border-radius:0 var(--ici-radius) var(--ici-radius) 0;font-size:.95rem}


/* ================================================================
   Condition Profile as a document: screen and print.
   Intended to survive being emailed to a lender, an insurer or a board.
   ================================================================ */
.ici-doc-head{display:flex;gap:1.1rem;align-items:flex-start;padding:1.15rem 1.3rem;
  background:linear-gradient(135deg,var(--ici-navy) 0%,#04456f 100%);color:#fff;
  border-radius:14px 14px 0 0;border-bottom:4px solid var(--ici-teal)}
.ici-doc-mark{width:56px;height:56px;flex:none;background:#fff;border-radius:10px;padding:6px;
  box-sizing:border-box}
.ici-doc-id{min-width:0}
.ici-doc-kicker{margin:0;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#8FD8E8}
.ici-doc-title{margin:.15rem 0 .1rem;font-size:1.45rem;font-weight:700;letter-spacing:-.01em;color:#fff}
.ici-doc-ref{margin:.1rem 0 0;font-family:var(--font-data);font-size:.95rem;color:var(--ici-sun)}
.ici-doc-meta{margin:.15rem 0 0;font-size:.82rem;color:#BFDCEA}
.report-surface,.ici-doc-body{border:1px solid var(--ici-hairline);border-top:0;
  border-radius:0 0 14px 14px;background:var(--ici-white);padding:1.3rem;
  box-shadow:0 1px 2px rgba(2,52,88,.06),0 10px 26px rgba(2,52,88,.08)}
.report-surface h2{font-size:1.05rem;color:var(--ici-navy);margin:1.4rem 0 .5rem;
  padding-bottom:.3rem;border-bottom:2px solid var(--ici-sky)}
.report-surface h2:first-child{margin-top:0}
.ici-doc-foot{margin:1.2rem 0 0;padding-top:.8rem;border-top:1px solid var(--ici-hairline);
  display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center;font-size:.78rem;color:#45626F}
.ici-doc-foot strong{color:var(--ici-navy)}

@media print{
  @page{size:Letter;margin:14mm 14mm 16mm}
  .ici-doc-head{-webkit-print-color-adjust:exact;print-color-adjust:exact;
    background:var(--ici-navy) !important;color:#fff !important;border-radius:0;
    border-bottom:3pt solid var(--ici-teal);padding:8mm 9mm;break-after:avoid}
  .ici-doc-title{color:#fff !important;font-size:20pt}
  .ici-doc-kicker{color:#8FD8E8 !important;font-size:8pt}
  .ici-doc-ref{color:#FFC24B !important;font-size:11pt}
  .ici-doc-meta{color:#BFDCEA !important;font-size:9pt}
  .ici-doc-mark{background:#fff !important;width:16mm;height:16mm}
  .report-surface{border:0;border-radius:0;box-shadow:none;padding:6mm 0 0}
  .report-surface h2{border-bottom:0.8pt solid #023458;color:#000 !important;font-size:12pt}
  .ici-doc-foot{color:#000;border-top:0.6pt solid #999;font-size:8pt}
}

@media print{
  /* nothing but the document itself */
  .skip,.masthead,.nav,.nav-menu,.menu-scrim,.colophon,.check-restart,
  .btn,.btn-row,.report-actions,.ici-print-foot+*{display:none !important}
  body{background:#fff}
  main{padding:0;margin:0;max-width:none}
  .ici-doc-head{margin:0 0 6mm}
  .ici-doc-head+*{break-before:avoid}
  .label-kicker,.label-id{display:none}
}

/* Sample: the Almanac half of the combined document. */
.sample-alm{margin:1.6rem 0 0;padding-top:1.2rem;border-top:3px solid var(--ici-teal)}
.sample-alm h2{font-size:1.1rem;color:var(--ici-navy);margin:0 0 .3rem}
.sample-alm-lede{margin:0 0 .6rem;font-size:.9rem;color:#40525E}
.sample-alm-scope{margin:0 0 .9rem;font-size:.85rem;color:#22333F;background:var(--ici-sky);
  padding:.6rem .8rem;border-radius:8px;border-left:4px solid var(--ici-sun)}
.sample-alm-row{display:flex;flex-wrap:wrap;gap:.4rem 1rem;justify-content:space-between;
  align-items:baseline;padding:.55rem 0;border-bottom:1px solid var(--ici-hairline)}
.sample-alm-k{margin:0;font-size:.82rem;color:#45626F}
.sample-alm-v{margin:.1rem 0 0;font-family:var(--font-data);font-size:1.05rem;color:var(--ici-navy)}
.sample-alm-v span{font-family:var(--font-body);font-size:.78rem;color:#45626F}
.sample-alm-s{margin:0;font-size:.8rem;color:#40525E;text-align:right;max-width:24ch}
.sample-alm-h3{font-size:.95rem;color:var(--ici-navy);margin:1rem 0 .3rem}
.sample-alm-do{margin:0;padding-left:1.1rem;font-size:.88rem;color:#33424E}
.sample-alm-do li{margin:.2rem 0}
.sample-alm-note{margin:.9rem 0 0;font-size:.78rem;color:#45626F}
@media print{.sample-alm,.sample-alm-row{break-inside:avoid}
  .sample-alm{border-top:1.5pt solid #023458}}

/* Dark bands: the heading must beat every later section rule that sets a navy heading.
   .ici-measured h2 appeared after .ici-navy-band h2 at equal specificity, so on the three
   sections carrying both classes the heading rendered navy on navy and was invisible unless
   selected. Two classes on the element wins outright and cannot be reopened by section order. */
.ici-navy-band.ici-measured h2,
.ici-navy-band.ici-measured h3,
.ici-navy-band.ici-measured .ici-lede{color:#FFFFFF}
.ici-navy-band.ici-measured .fine,
.ici-navy-band.ici-measured .ici-note{color:#C8DCE6}

/* Check journey, rebuilt flow.
   .choice-inline forced three option cards into three columns at every width with a 10px
   gap and no breakpoint, which is why the boxes read as cramped on a phone. They stack
   below 44rem and keep a comfortable touch target at every width. */
.choice-inline { gap: 0.5rem; }
@media (max-width: 44rem) {
  .choice-list.choice-inline { grid-auto-flow: row; grid-auto-columns: auto; }
}
.applicability-row .choice { min-height: 3rem; padding: 0.8rem 1rem; align-items: center; }
.applicability-row .choice-title { font-weight: 600; line-height: 1.3; }
.applicability-row + .applicability-row { margin-top: 1.75rem; }
.applicability-row .field-hint { margin: 0.15rem 0 0.7rem; }

.check-scopenote {
  margin: 1rem 0 0; padding: 0.8rem 1rem;
  border-left: 3px solid var(--teal, #0F8C7A);
  background: var(--teal-soft, #EAF6F3);
  font-size: 0.9rem; line-height: 1.5;
}
.check-excluded {
  margin: 1.5rem 0 0; padding: 0.8rem 1rem;
  border: 1px dashed var(--mist, #C9D6DE); border-radius: 6px;
}

/* Review: the actual submission, shown as it will be sent. */
.review-summary { margin: 1rem 0 1.75rem; }
.review-list { margin: 0; display: grid; gap: 0; }
.review-list > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--mist, #E3EBF0);
}
.review-list dt { margin: 0; color: var(--slate, #40525E); font-size: 0.9rem; }
.review-list dd { margin: 0; font-weight: 600; text-align: right; }
@media (max-width: 30rem) {
  .review-list > div { flex-direction: column; gap: 0.15rem; }
  .review-list dd { text-align: left; }
}
/* Cards sharing a row must share its height, whatever the label wraps to. Without this the
   middle option sat 22px taller than its neighbours whenever its text ran to two lines. */
.choice-list { align-items: stretch; }
.choice-list > li { display: flex; }
.choice-list > li > .choice { flex: 1; }


.alm-lede, .alm-coverage, .ici-figure-note, .colophon-fine, .fine { color: #4E6E7C; }

/* .btn-tertiary set its text to the teal accent on hover and lost the border fill behind it,
   which measured as low as 1.4:1. Hover, focus and active now darken the ink and keep a
   surface behind it, so the control never reads as teal-on-teal. */
.btn-tertiary:hover,
.btn-tertiary:focus-visible,
.btn-tertiary:active {
  color: #0A5F53;
  background: var(--ici-sky, #E4F0F4);
  border-color: #0A5F53;
}
.ici-navy-band .btn-tertiary,
.closer-inner .btn-tertiary { color: #FFFFFF; border-color: rgba(255, 255, 255, .55); }
.ici-navy-band .btn-tertiary:hover,
.ici-navy-band .btn-tertiary:focus-visible,
.ici-navy-band .btn-tertiary:active,
.closer-inner .btn-tertiary:hover,
.closer-inner .btn-tertiary:focus-visible,
.closer-inner .btn-tertiary:active {
  color: #023458; background: #FFFFFF; border-color: #FFFFFF;
}

/* The skip link is off-screen until focused. Hover must not reveal it at 1:1. */
.skip-link:not(:focus):not(:focus-visible) { color: transparent; }

/* Primary control: one definition for every state, placed last so no earlier rule can
   reopen it. Navy on teal at rest and hover, white on navy while pressed. The previous
   stack set the pressed colour in one rule and the pressed background in another, and the
   pair that actually resolved measured close to 1:1. */
.btn-primary,
.btn-primary:link,
.btn-primary:visited { background: var(--ici-teal, #00B89C); border-color: var(--ici-teal, #00B89C); color: #023458; }
.btn-primary:hover { background: #00A88F; border-color: #00A88F; color: #023458; }
.btn-primary:active,
.btn-primary:focus-visible:active { background: #013D4F; border-color: #013D4F; color: #FFFFFF; }
.btn-primary[disabled] { background: #D9E3E8; border-color: #D9E3E8; color: #40525E; opacity: 1; }

/* Warm-tinted callouts carried their own muted ink at 4.38:1. */
.callout p, .callout li, .safety p, .safety li, .warm-note p { color: #45626F; }

.guide-section p, .guide-section li,
.notice-authority, .ici-figure-note, .alm-src, .alm-sub { color: #45626F; }

/* Interactive states on dark bands.
   The generic .btn-tertiary hover/focus/active rule sets teal ink, which measures about
   2.1:1 against a navy band. The band override is doubled here so no later single-class
   state rule can outrank it, whichever state the browser resolves. */
.ici-navy-band.ici-navy-band .btn-tertiary:hover,
.ici-navy-band.ici-navy-band .btn-tertiary:focus,
.ici-navy-band.ici-navy-band .btn-tertiary:focus-visible,
.ici-navy-band.ici-navy-band .btn-tertiary:active,
.closer-inner.closer-inner .btn-tertiary:hover,
.closer-inner.closer-inner .btn-tertiary:focus,
.closer-inner.closer-inner .btn-tertiary:focus-visible,
.closer-inner.closer-inner .btn-tertiary:active {
  color: #023458; background: #FFFFFF; border-color: #FFFFFF;
}

/* The pressed primary resolved its colour from one rule and its background from another,
   which landed on white-on-white. Both are set together here, last, for every state. */
.btn-primary.btn-primary:hover { background: #00A88F; border-color: #00A88F; color: #023458; }
.btn-primary.btn-primary:focus,
.btn-primary.btn-primary:focus-visible { background: var(--ici-teal, #00B89C); border-color: #023458; color: #023458; }
.btn-primary.btn-primary:active { background: #013D4F; border-color: #013D4F; color: #FFFFFF; }
.btn-primary.btn-primary[disabled] { background: #D9E3E8; border-color: #D9E3E8; color: #40525E; }

/* Two real residuals from the contrast audit.
   .btn-tertiary sat at 4.39:1 on the sky band and a plain link sat at 3.26:1 on the amber
   preview panel. Both are darkened only where those surfaces apply. */
.ici-sky .btn-tertiary { color: #08624F; border-color: #08624F; }
.bcx-preview a, .bcx-preview a:visited { color: #0A4A3E; }
/* Hover darkened the teal, which lowered contrast against the navy label rather than
   raising it. Hover now lightens, which both reads as a state change and clears 4.5:1. */
.btn-primary.btn-primary:hover { background: #16C4A8; border-color: #16C4A8; color: #023458; }

/* ==========================================================================
   Report presentation. One stylesheet for the generated report and the sample,
   matching lib/reportView.js. Screen and print.
   ========================================================================== */
.rp {
  max-width: 52rem; margin: 0 auto; background: #FFFFFF;
  border: 1px solid #D9E3E8; border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(2, 52, 88, .06), 0 12px 28px rgba(2, 52, 88, .08);
}
.rp-head {
  display: flex; gap: 1.15rem; align-items: flex-start; position: relative;
  padding: 1.6rem 2rem; background: linear-gradient(135deg, #023458 0%, #04456f 100%);
  color: #FFFFFF; border-bottom: 4px solid #00B89C;
}
.rp-logo { width: 64px; height: 64px; flex: none; background: #FFFFFF; border-radius: 10px; padding: 7px; box-sizing: border-box; }
.rp-kicker { margin: 0; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #A8DFF0; }
.rp-title { margin: .15rem 0 .1rem; font-size: 1.6rem; line-height: 1.15; font-weight: 700; }
.rp-ref { margin: .2rem 0 0; font-family: var(--font-data, ui-monospace, monospace); font-size: .85rem; color: #FFC24B; }
.rp-meta { margin: .3rem 0 0; font-size: .88rem; color: #D3E6F0; }
.rp-stamp {
  position: absolute; top: 1.5rem; right: 1.75rem; margin: 0;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .3rem .7rem; border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
}

/* generous gutters: no box may sit against a page edge */
.rp-body { padding: 2rem 2rem 2.25rem; }
.rp-section + .rp-section { margin-top: 2.25rem; padding-top: 2rem; border-top: 1px solid #E6EDF1; }
.rp-h { margin: 0 0 1rem; font-size: 1.05rem; letter-spacing: .01em; color: #023458; }
.rp-sub { margin: 1.5rem 0 .75rem; font-size: .92rem; color: #45626F; }
.rp-lede { margin: 0 0 1rem; color: #45626F; line-height: 1.55; }
.rp-empty { margin: 0; color: #45626F; }

/* 1 at a glance */
.rp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.1rem; margin: 0; }
.rp-facts dt { margin: 0 0 .2rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #4E6E7C; }
.rp-facts dd { margin: 0; font-weight: 650; color: #023458; }
.rp-scope { margin: 1.25rem 0 0; padding: .8rem 1rem; border-left: 3px solid #00B89C; background: #EAF6F3; font-size: .9rem; line-height: 1.55; }

/* 2 condition profile */
.rp-index { display: flex; align-items: baseline; gap: .9rem; }
.rp-index-n { font-family: var(--font-data, inherit); font-size: 3.2rem; line-height: 1; font-weight: 700; color: #023458; }
.rp-index-b { font-size: 1rem; color: #45626F; }
.rp-noindex { margin: 0; padding: .85rem 1rem; background: #F4F8FA; border-radius: 8px; color: #233B4A; }
.rp-why { margin: .9rem 0 0; padding-left: 1.1rem; color: #45626F; font-size: .9rem; line-height: 1.55; }

/* 3 systems */
.rp-row { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: .95rem 0; border-bottom: 1px solid #EDF2F5; }
.rp-row:last-child { border-bottom: 0; }
.rp-row-name { margin: 0; font-weight: 650; color: #023458; }
.rp-row-detail { margin: .2rem 0 0; font-size: .85rem; color: #45626F; }
.rp-row-result { text-align: right; white-space: nowrap; }
.rp-score { font-family: var(--font-data, inherit); font-size: 1.5rem; font-weight: 700; color: #023458; }
.rp-band { display: block; font-size: .8rem; color: #45626F; }
.rp-noresult { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: #45626F; }

/* 4 coverage */
.rp-chips { margin: .85rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.rp-chips-k { font-size: .8rem; color: #45626F; margin-right: .35rem; }
.rp-chip { font-size: .8rem; padding: .2rem .6rem; border-radius: 999px; }
.rp-chip-in { background: #E4F3EF; color: #0A5F53; }
.rp-chip-na { background: #EEF3F6; color: #45626F; }

/* 5 missing */
.rp-gap { padding: .8rem 0; border-bottom: 1px solid #EDF2F5; }
.rp-gap:last-of-type { border-bottom: 0; }
.rp-gap-name { margin: 0; font-weight: 650; color: #023458; }
.rp-gap-why { margin: .2rem 0 0; font-size: .88rem; color: #45626F; line-height: 1.5; }
.rp-gap-note { margin: 1rem 0 0; font-size: .88rem; color: #45626F; }

/* 6 climate: visually separated, and never mistaken for the assessment */
.rp-aside { background: #F6F9FB; margin-left: -2rem; margin-right: -2rem; padding: 2rem; border-top: 1px solid #E6EDF1; }
.rp-aside .rp-h { color: #24455C; }
.rp-climate { margin: 0; padding-left: 1.1rem; color: #233B4A; line-height: 1.6; }
.rp-climate li + li { margin-top: .5rem; }

/* 7 actions */
.rp-action { padding: .9rem 0; border-bottom: 1px solid #EDF2F5; }
.rp-action:last-child { border-bottom: 0; }
.rp-action-k { margin: 0 0 .2rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #0A5F53; }
.rp-action-t { margin: 0; line-height: 1.55; color: #233B4A; }

/* 8 limitations */
.rp-limits { margin: 0; padding-left: 1.1rem; color: #45626F; line-height: 1.6; font-size: .9rem; }
.rp-sample-note { margin: 1rem 0 0; font-size: .88rem; color: #233B4A; font-style: italic; }

@media (max-width: 40rem) {
  .rp-body { padding: 1.25rem 1.15rem 1.5rem; }
  .rp-head { padding: 1.25rem 1.15rem; gap: .85rem; }
  .rp-title { font-size: 1.25rem; }
  .rp-stamp { position: static; display: inline-block; margin-top: .5rem; }
  .rp-aside { margin-left: -1.15rem; margin-right: -1.15rem; padding: 1.5rem 1.15rem; }
  .rp-row { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .rp-row-result { text-align: left; }
  .rp-index-n { font-size: 2.5rem; }
}

@media print {
  .rp { border: 0; box-shadow: none; max-width: none; }
  .rp-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; border-radius: 0; }
  .rp-body { padding: 8mm 0 0; }
  .rp-section { break-inside: avoid; }
  .rp-section + .rp-section { margin-top: 7mm; padding-top: 5mm; }
  .rp-aside { margin: 0; padding: 5mm 6mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp-h { font-size: 11pt; }
  .no-print { display: none !important; }
}
/* Almanac detail placed inside the report's climate section. */
.rp-climate-sub + .rp-climate-sub { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #E0E9EE; }
.rp-climate-sub h3 { margin: 0 0 .6rem; font-size: .95rem; color: #24455C; }
.rp-climate-rows { display: grid; gap: .65rem; margin: .85rem 0; }
.rp-climate-row { display: grid; gap: .1rem; }
.rp-climate-k { margin: 0; font-weight: 650; color: #023458; }
.rp-climate-row p { margin: 0; color: #233B4A; line-height: 1.5; }
.rp-climate-note { margin: .8rem 0 0; font-size: .88rem; color: #45626F; line-height: 1.55; }
.rp-climate-detail .ici-alm-card { background: #FFFFFF; border: 1px solid #DDE7EC; border-radius: 10px; padding: 1rem 1.15rem; margin: .75rem 0; }
.rp-foot { padding: 1.25rem 2rem 1.5rem; border-top: 1px solid #E6EDF1; background: #F9FBFC; }
.rp-foot-brand { margin: 0 0 .25rem; font-weight: 650; color: #023458; font-size: .88rem; }
.rp-foot-line { margin: 0; font-size: .82rem; color: #45626F; line-height: 1.5; }
@media (max-width: 40rem) { .rp-foot { padding: 1.1rem 1.15rem 1.25rem; } }
@media print { .rp-foot { -webkit-print-color-adjust: exact; print-color-adjust: exact; padding: 5mm 0 0; } }

/* An empty validation region still painted its ember bar, so every step showed a warning
   stripe with nothing in it. It appears only when it has something to say. */
.field-error:empty, .form-error:empty {
  display: none;
  padding: 0;
  border: 0;
  background: none;
}

/* Report print density.
   Eight pages for a four-system report came from section-level break-inside:avoid pushing
   each block whole onto a fresh page, plus screen-sized spacing carried into print. Sections
   flow; only a single row or card is kept whole. */
@media print {
  .rp-section { break-inside: auto; }
  .rp-section + .rp-section { margin-top: 5mm; padding-top: 3mm; }
  .rp-row, .rp-gap, .rp-action, .rp-climate-row { break-inside: avoid; }
  .rp-head { padding: 6mm 8mm; }
  .rp-logo { width: 44px; height: 44px; }
  .rp-title { font-size: 16pt; }
  .rp-index-n { font-size: 24pt; }
  .rp-body { padding: 5mm 0 0; }
  .rp-h { margin: 0 0 3mm; font-size: 10.5pt; }
  .rp-lede, .rp-limits, .rp-climate { font-size: 9pt; line-height: 1.4; }
  .rp-row { padding: 2.5mm 0; }
  .rp-action { padding: 2.5mm 0; }
  /* collapsed supporting detail stays collapsed on paper */
  .alm-detail-fold:not([open]) > *:not(summary) { display: none; }
  .rp-climate-detail details:not([open]) > *:not(summary) { display: none; }
}
/* Final print density pass: the report is a summary, not a manual. Supporting prose sets
   tighter on paper and the collapsed blocks contribute only their one-line summary. */
@media print {
  .rp-section + .rp-section { margin-top: 4mm; padding-top: 2.5mm; }
  .rp-gap { padding: 2mm 0; }
  .rp-gap-why { font-size: 8.5pt; line-height: 1.35; }
  .rp-action-t { font-size: 9pt; line-height: 1.4; }
  .rp-facts { gap: 4mm; }
  .rp-aside { padding: 4mm 6mm; }
  .rp-climate-sub + .rp-climate-sub { margin-top: 3mm; padding-top: 2.5mm; }
  .rp-climate-sub summary { font-size: 9pt; }
  .ici-alm-card { padding: 3mm 4mm; margin: 2mm 0; }
  .ici-alm-actions li { font-size: 9pt; line-height: 1.4; }
  .rp-foot { padding: 3mm 0 0; }
}
/* The climate aside bleeds to the card edge on screen with negative side margins. In print
   the body has no side padding, so those margins pushed it outside the page box and the
   engine spilled it onto pages of its own. */
@media print {
  .rp-aside { margin-left: 0; margin-right: 0; padding-left: 4mm; padding-right: 4mm; }
  .ici-alm-card, .ici-alm-table, .rp-climate-sub { break-inside: auto; }
  .rp-climate-sub h3, .rp-climate-sub summary { break-after: avoid; }
}
/* Legacy print rules forbade these from splitting, so each one that outgrew the remaining
   space took a page of its own. Inside the report they may split; only their rows stay whole.
   The continuation offer is a call to action, not part of the document, so it does not print. */
@media print {
  .ici-action-group, .ici-actions, .ici-alm-cards { break-inside: auto; page-break-inside: auto; }
  .ici-action-group li, .ici-alm-actions li { break-inside: avoid; }
  .continuation, .transfer-panel { display: none !important; }
}
/* Report print: nothing inside the document may claim a page of its own. Only the smallest
   units (a system row, a gap, an action, a list item) are kept whole. */
@media print {
  .rp *, .rp-aside * { break-inside: auto !important; page-break-inside: auto !important; }
  .rp-row, .rp-gap, .rp-action, .rp-climate-row,
  .rp-limits li, .ici-alm-actions li, .rp-facts > div {
    break-inside: avoid !important; page-break-inside: avoid !important;
  }
  .rp { font-size: 9.5pt; }
  .rp-gap-why, .rp-lede { font-size: 8.5pt; }
}

/* Print pagination.
   Measured, not assumed. Toggling the container's overflow property changed nothing: 960 mm
   of content produced five pages with overflow either hidden or visible, and 899 mm produced
   four either way. There is no forced break. The report was simply taller than the page
   budget, and an earlier measurement understated it because it was taken at the browser
   viewport width rather than the 192 mm print column, so everything that wraps measured short.

   The container still flows rather than sitting in its own formatting context, and the
   corners and shadow are screen decoration, so both are dropped on paper.

   Nothing is hidden: a collapsed disclosure prints as its summary, which is exactly what the
   reader sees on screen, and its content stays reachable there. The saving comes from the
   card, action and section spacing below, which is density, not omission. */
@media print {
  .rp { overflow: visible; border-radius: 0; box-shadow: none; border: 0; }
  .rp-head { border-radius: 0; }
  .rp details:not([open]) > *:not(summary) { display: none; }
  .rp details:not([open]) { break-inside: avoid; }
  .rp summary { list-style: none; font-weight: 600; color: #24455C; }
  .rp .ici-alm-card { padding: 2.5mm 3.5mm; margin: 2mm 0; border-width: 0.4pt; }
  .rp .ici-alm-card h3 { font-size: 9.5pt; margin: 0 0 1mm; }
  .rp .ici-alm-card p { margin: 0 0 1.2mm; font-size: 8.5pt; line-height: 1.4; }
  .rp .ici-alm-actions { margin: 0; }
  .rp .ici-alm-actions li { margin: 0 0 1.2mm; }
  .rp-action { padding: 2mm 0; }
  .rp-section + .rp-section { margin-top: 4mm; padding-top: 2.5mm; }
}

/* Print selection. Screen shows every governed finding; paper shows the selected ones.
   Nothing here removes content from the page, and nothing is hidden from the reader. */
.rp-print-only { display: none; }
@media print {
  .rp-print-omit { display: none !important; }
  .rp-print-only { display: block; }
  .rp-remainder {
    margin: 3mm 0 0; padding: 2mm 3mm; font-size: 8.5pt; font-style: italic;
    color: #45626F; border-left: 0.8pt solid #00B89C;
  }
}

/* Hero map. The homepage shows the map the headline invites you into, rather than a picture
   of a house, which sold the checking tool rather than the Almanac. */
.hero-map{background:rgba(255,255,255,.94);border:1px solid var(--ici-hairline,#D9E3E8);
  border-radius:16px;padding:1.1rem 1.2rem 1.2rem;
  box-shadow:0 1px 2px rgba(2,52,88,.06),0 12px 28px rgba(2,52,88,.10)}
.hero-map-label{margin:0 0 .6rem;font-size:.8rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ici-teal-ink,#0A7A6A)}
.hero-map-svg{display:block;width:100%;height:auto;aspect-ratio:620/400;
  background:#F6F9FB;border-radius:10px}
.hero-bound{fill:#BFDCE6;stroke:#2E5F74;stroke-width:.5;stroke-linejoin:round;
  opacity:0;animation:heroFade .5s ease forwards}
/* Every boundary is drawn the same. Shading one country differently makes the map look
   like it is taking a position, which it is not: this is one continent, no selection. */
@keyframes heroFade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-bound{animation:none;opacity:1}}
.hero-lookup{display:flex;gap:.5rem;margin:.9rem 0 .5rem;flex-wrap:wrap}
.hero-lookup input{flex:1 1 9rem;min-width:0;min-height:44px;padding:.5rem .8rem;
  border:1px solid var(--ici-hairline,#D9E3E8);border-radius:10px;font-size:1rem;
  color:var(--ici-navy,#023458);background:#fff}
.hero-lookup input:focus-visible{outline:3px solid var(--ici-teal-ink,#0A7A6A);outline-offset:2px}
.hero-lookup .btn{min-height:44px;white-space:nowrap}
.hero-map-note{margin:0;font-size:.8rem;line-height:1.45;color:#45626F}
.hero-map.is-plain .hero-map-svg{display:none}
@media (max-width:48rem){.hero-map{padding:.9rem}}

/* The hero and the section beneath it ran together with no edge. A distinct band, a rule and
   real spacing separate them. */
.ici-band-top{border-top:1px solid var(--ici-hairline,#D9E3E8);padding-top:3.25rem}
.ici-band-top>.shell{padding-top:.5rem}
@media (max-width:48rem){.ici-band-top{padding-top:2.25rem}}

/* Contained cards and expandable groups.
   The previous sections were floating text in a wide column, which left large empty bands on
   desktop and no visual grouping. Cards give each point an edge; the groups collapse so the
   section stays short. */
.ici-cardgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  margin:1.4rem 0 0}
.ici-cardgrid-3{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.ici-card{background:#fff;border:1px solid var(--ici-hairline,#D9E3E8);border-radius:12px;
  padding:1.15rem 1.25rem;box-shadow:0 1px 2px rgba(2,52,88,.05)}
.ici-card h3,.ici-card h4{margin:0 0 .45rem;font-size:1rem;color:var(--ici-navy,#023458)}
.ici-card p{margin:0;font-size:.925rem;line-height:1.55;color:#31505F}
.ici-card em{display:block;margin-top:.45rem;color:#5D7684;font-style:italic}
.ici-actions{margin:1.4rem 0 0;display:flex;gap:.65rem;flex-wrap:wrap}

.ici-group{border:1px solid var(--ici-hairline,#D9E3E8);border-radius:12px;background:#fff;
  margin:1.2rem 0 0;padding:0 1.15rem}
.ici-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;min-height:56px;padding:.5rem 0}
.ici-group>summary::-webkit-details-marker{display:none}
.ici-group>summary::after{content:"+";font-size:1.2rem;font-weight:700;
  color:var(--ici-teal-ink,#0A7A6A)}
.ici-group[open]>summary::after{content:"\2212"}
.ici-group>summary h3{margin:0;font-size:1.05rem;color:var(--ici-navy,#023458)}
.ici-group-note{font-size:.85rem;font-weight:600;color:var(--ici-teal-ink,#0A7A6A);
  white-space:nowrap;margin-left:auto;margin-right:.6rem}
.ici-group>summary:focus-visible{outline:3px solid var(--ici-teal-ink,#0A7A6A);
  outline-offset:2px;border-radius:8px}
.ici-group .ici-cardgrid{margin-top:0}
.ici-group>.fine,.ici-group>p{margin:1rem 0}
.ici-group[open]{padding-bottom:1.15rem}
@media (max-width:40rem){
  .ici-cardgrid{gap:.85rem}
  .ici-card{padding:1rem}
  .ici-group{padding:0 .9rem}
  .ici-group>summary h3{font-size:1rem}
}

/* Equipment and records grid.
   Stretching every cell to the tallest in its row pushed a short field's control to the
   bottom of its box, which is why "How do you know?" sat far below its own label while the
   warranty field beside it looked correct. Cells now align to their own top and each field
   stacks label, control and hint with nothing between them. */
.fact-grid { align-items: start; }
.fact-grid .field { display: flex; flex-direction: column; align-items: stretch; }
.fact-grid .field + .field { margin-top: 0; }
.fact-grid .field > label { margin-bottom: 0.3rem; }
.fact-grid .field > select,
.fact-grid .field > input[type="text"] { width: 100%; }
.fact-grid .field > .field-hint { margin: 0.35rem 0 0; }

/* Visitor-provided equipment identifiers on the Condition Profile. Rows appear only for
   values the visitor actually entered; a blank optional box produces nothing at all. */
.rp-row-ids { margin: 0.5rem 0 0; }
.rp-ids-label { font-size: 0.8125rem; color: var(--slate); margin: 0 0 0.25rem; }
.rp-row-ids dl { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.75rem; margin: 0; }
.rp-row-ids dt { font-weight: 650; }
.rp-row-ids dd { margin: 0; overflow-wrap: anywhere; }

/* Footer link groups.
   The desktop footer relied on setting display:block on a closed <details>'s child to keep
   every list visible. Chrome now hides that content through ::details-content with
   content-visibility:hidden, so the old override stopped revealing anything and the whole
   footer read as six headings that did nothing when clicked. The modern property is set
   alongside the original rule, so the lists show in browsers that have ::details-content and
   in those that do not. */
@media (min-width: 46rem) {
  .colophon-details::details-content { content-visibility: visible; block-size: auto; }
  .colophon-details > ul { display: block; }
}
/* Below that width the group really is an accordion, so the summary must stay clickable. */
@media (max-width: 45.999rem) {
  .colophon-details > summary { pointer-events: auto; cursor: pointer; }
}

}


/* Climate hero photograph.
   One section: the image is the background, the copy sits on it. The scrim is a horizontal
   gradient, dense on the left where the text is and clearing to almost nothing on the right
   so the apartments, trees and sky stay legible instead of the whole frame going dark. */
.ici-hero-photo { position: relative; isolation: isolate; overflow: hidden; }
.ici-hero-photo__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 50%; z-index: 0;
}
.ici-hero-photo__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(8, 28, 46, 0.94) 0%,
      rgba(8, 28, 46, 0.88) 30%,
      rgba(8, 28, 46, 0.58) 55%,
      rgba(8, 28, 46, 0.26) 78%,
      rgba(8, 28, 46, 0.14) 100%),
    linear-gradient(180deg, rgba(8, 28, 46, 0.34) 0%, rgba(8, 28, 46, 0) 45%);
}
.ici-hero-photo__content {
  position: relative; z-index: 2;
  padding-block: 5.5rem 5rem;
  min-height: 30rem;
  display: flex; flex-direction: column; justify-content: center;
}
.ici-hero-photo__content > * { max-width: 42rem; }
.ici-hero-photo .hero-eyebrow { color: #A9E7DA; }
.ici-hero-photo h1 { color: #FFFFFF; margin-bottom: 1rem; }
.ici-hero-photo .ici-lede { color: #E8F2F6; }
.ici-hero-photo .btn-row { margin-top: 1.75rem; }

/* The secondary action has to read against a photograph, so it carries its own surface
   rather than relying on a border over whatever pixels happen to be behind it. */
.btn-on-photo {
  display: inline-block; background: rgba(255, 255, 255, 0.96); color: #0B2233;
  border: 1px solid rgba(255, 255, 255, 0.96); border-radius: 999px;
  padding: 0.75rem 1.5rem; font-weight: 650; text-decoration: none;
}
.btn-on-photo:hover { background: #FFFFFF; }
.btn-on-photo:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

@media (max-width: 45.999rem) {
  /* an intentional crop: the frame pulls right and down onto the quieter sky and street so
     the copy is not sitting on top of the building detail */
  .ici-hero-photo__img { object-position: 78% 42%; }
  .ici-hero-photo__scrim {
    background:
      linear-gradient(180deg,
        rgba(8, 28, 46, 0.86) 0%,
        rgba(8, 28, 46, 0.80) 52%,
        rgba(8, 28, 46, 0.52) 100%);
  }
  .ici-hero-photo__content { padding-block: 3rem 2.75rem; min-height: 26rem; }
  .ici-hero-photo__content > * { max-width: none; }
  .ici-hero-photo .btn-row { display: grid; gap: 0.6rem; }
  .ici-hero-photo .btn-row .btn, .ici-hero-photo .btn-row .btn-on-photo { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ici-hero-photo, .ici-hero-photo * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------- homepage section rhythm
   The Almanac section and the closing call to action used to share a background edge that
   cut between them, so they read as one block split in the wrong place. The closing section
   now carries its own surface and its own generous spacing, and the Almanac section ends
   with its lookup card rather than trailing off. */
.ici-closing { background: var(--aqua-50); border-top: 1px solid var(--aqua-100);
  padding-block: 4.5rem; }
.ici-closing-shell { text-align: center; }
.ici-closing-shell .ici-lede { margin: 0 auto 1.5rem; max-width: 46ch; }
.ici-sky + .ici-closing { margin-top: 0; }

/* homepage Almanac entry point */
.home-lookup { margin-top: 2rem; padding: 1.5rem 1.5rem 1.25rem; background: #FFFFFF;
  border: 1px solid var(--aqua-100); border-left: 4px solid var(--teal); border-radius: 10px;
  max-width: 44rem; }
.home-lookup h3 { margin: 0 0 0.35rem; font-size: 1.125rem; color: var(--ink); }
.home-lookup-note { font-size: 0.875rem; color: var(--slate-text); margin: 0 0 1rem; }
.home-lookup-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.home-lookup-form input { flex: 1 1 12rem; min-width: 10rem; }
.home-lookup-msg { margin: 0.6rem 0 0; font-size: 0.9375rem; color: var(--teal); min-height: 1.4em; }
.home-lookup-msg.is-error { color: #8A2B10; }
.home-lookup .fine { margin: 0.75rem 0 0; }
@media (max-width: 45.999rem) {
  .ici-closing { padding-block: 3rem; }
  .home-lookup { padding: 1.15rem; margin-top: 1.5rem; }
  .home-lookup-form { display: grid; }
  .home-lookup-form .btn { width: 100%; }
}

/* ------------------------------------------------------------ for-organizations
   Rhythm comes from alternating surfaces, cards, numbered steps and real interface
   imagery rather than from consecutive prose blocks. */
.org-hero { background: var(--aqua-50); border-bottom: 1px solid var(--aqua-100);
  padding-block: 3.5rem 3rem; }
.org-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 2.5rem; align-items: center; }
.org-hero-copy .ici-lede { max-width: 46ch; }
.org-shot { margin: 0; }
.org-shot img { display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--aqua-100); box-shadow: 0 10px 30px rgba(2, 52, 88, 0.10);
  background: #FFFFFF; }
.org-shot-hero img { max-height: 30rem; object-fit: cover; object-position: top center; }
.org-shot figcaption { font-size: 0.875rem; color: var(--slate-text); margin-top: 0.6rem; }
.org-cards .ici-card h3 { font-size: 1.0625rem; margin: 0 0 0.35rem; }
.org-steps { list-style: none; padding: 0; margin: 1.5rem 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.org-steps li { background: #FFFFFF; border: 1px solid var(--aqua-100);
  border-top: 4px solid var(--teal); border-radius: 10px; padding: 1.25rem; }
.org-steps h3 { margin: 0.5rem 0 0.4rem; font-size: 1.0625rem; }
.org-steps p { margin: 0; }
.org-step-n { display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 999px; background: var(--teal);
  color: #FFFFFF; font-weight: 700; font-size: 0.9375rem; }
.org-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem; align-items: center; }
.org-split-rev .org-shot { order: 2; }
.org-split h2 { margin-top: 0; }
.org-limits { margin: 1rem 0 1.25rem; padding-left: 1.2rem; }
.org-limits li { margin: 0.4rem 0; }
@media (max-width: 60rem) {
  .org-steps { grid-template-columns: 1fr; }
}
@media (max-width: 45.999rem) {
  .org-hero { padding-block: 2.25rem 2rem; }
  .org-hero-grid, .org-split { grid-template-columns: 1fr; gap: 1.5rem; }
  .org-split-rev .org-shot { order: 0; }
  .org-shot-hero img { max-height: 18rem; }
}

/* R15.5.1 workstream 3: system accordions on the equipment step.
   Native <details>, so the marker is suppressed and a chevron drawn instead. Nothing here
   hides an entered value: a closed system keeps its inputs, it just does not occupy the
   page. */
.sys{border:1px solid var(--ici-hairline);border-radius:12px;background:var(--ici-white);margin:.75rem 0;overflow:hidden}
.sys>.sys-summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.75rem;
  padding:.85rem 1rem;min-height:3rem;font-weight:600}
.sys>.sys-summary::-webkit-details-marker{display:none}
.sys>.sys-summary:hover{background:var(--ici-teal,#eef6fa)}
.sys>.sys-summary:focus-visible{outline:3px solid var(--ici-navy);outline-offset:-3px}
.sys-name{flex:1 1 auto;min-width:0}
.sys-status{flex:none;font-weight:400;font-size:.82rem;color:#40525E;text-align:right}
.sys-status[data-state="Not started"]{color:#5b6b76}
.sys-chev{flex:none;width:.7rem;height:.7rem;border-right:2px solid var(--ici-navy);
  border-bottom:2px solid var(--ici-navy);transform:rotate(45deg);transition:transform .15s}
.sys[open]>.sys-summary .sys-chev{transform:rotate(-135deg)}
.sys-panel{border:0;margin:0;padding:0 1rem 1rem}
.sys-disc{border-top:1px solid var(--ici-hairline);margin-top:.9rem;padding-top:.2rem}
.sys-disc>.sys-disc-summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  gap:.5rem;padding:.6rem 0;min-height:2.5rem;font-weight:600;font-size:.94rem}
.sys-disc>.sys-disc-summary::-webkit-details-marker{display:none}
.sys-disc>.sys-disc-summary::after{content:"";width:.55rem;height:.55rem;
  border-right:2px solid var(--ici-navy);border-bottom:2px solid var(--ici-navy);
  transform:rotate(45deg)}
.sys-disc[open]>.sys-disc-summary::after{transform:rotate(-135deg)}
.sys-disc>.sys-disc-summary:focus-visible{outline:3px solid var(--ici-navy);outline-offset:2px}
.sys-review{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.4rem}
.sys-review button{width:100%;display:flex;justify-content:space-between;align-items:center;
  gap:.75rem;padding:.6rem .85rem;border:1px solid var(--ici-hairline);border-radius:10px;
  background:var(--ici-white);text-align:left;cursor:pointer;min-height:2.75rem}
.sys-review button:focus-visible{outline:3px solid var(--ici-navy);outline-offset:2px}
#system-progress{margin:.4rem 0 .9rem}
@media (max-width:480px){
  /* the name and the chevron share the first line; the answer count sits under the name
     rather than pushing the chevron onto a third line, which made the bar 109px tall */
  .sys>.sys-summary{display:grid;grid-template-columns:1fr auto;
    grid-template-areas:"name chev" "status chev";align-items:center;
    column-gap:.6rem;row-gap:.1rem;padding:.7rem .8rem}
  .sys-name{grid-area:name}
  .sys-chev{grid-area:chev;align-self:center}
  .sys-status{grid-area:status;text-align:left;font-size:.8rem}
  .sys-panel{padding:0 .8rem .8rem}
  .sys-review button{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){.sys-chev{transition:none}}

/* R15.5.1 workstream 4: profile hierarchy and print reduction. */
.rp-more>.rp-more-summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.6rem}
.rp-more>.rp-more-summary::-webkit-details-marker{display:none}
.rp-more>.rp-more-summary::after{content:"";width:.6rem;height:.6rem;
  border-right:2px solid var(--ici-navy);border-bottom:2px solid var(--ici-navy);
  transform:rotate(45deg)}
.rp-more[open]>.rp-more-summary::after{transform:rotate(-135deg)}
.rp-more>.rp-more-summary:focus-visible{outline:3px solid var(--ici-navy);outline-offset:2px}
.rp-more>.rp-more-summary .rp-h{margin:0}
.rp-sub-section{margin-top:1.1rem}
.rp-result-note{margin:.6rem 0 0}
.rp-row-action{margin:.35rem 0 0;font-size:.92rem}
@media print{
  /* the supporting block is never a disclosure on paper: the reader cannot open it.
     It is emitted open, reopened before printing, and forced open here as a third guard,
     so a printed profile is complete whatever happened on screen. */
  .rp-more>.rp-more-summary::after{display:none}
  .rp-more>.rp-more-body{display:block!important}
  /* A reader cannot open a disclosure on paper. Every disclosure body inside the report is
     painted, and the affordance is hidden, so nothing prints as a heading over blank space.
     A block proven empty at print time carries nothing and is dropped entirely. */
  .rp details>*:not(summary){display:block!important}
  .rp summary{list-style:none}
  .rp summary::-webkit-details-marker{display:none}
  .rp .rp-print-empty{display:none!important}
  .rp-section{break-inside:auto;page-break-inside:auto}
  .rp-row{break-inside:avoid;page-break-inside:avoid}
  .rp-sub-section{break-inside:avoid;page-break-inside:avoid}
  /* Print density. Vertical rhythm only: no type size is reduced anywhere, no evidence is
     dropped and no limitation is suppressed. A five-system profile with full local context
     was running to three pages purely on whitespace between blocks. */
  .rp-head{padding:.7rem 1rem}
  .rp-logo{width:48px;height:48px}
  .rp-body{gap:.5rem}
  .rp-section{margin:0 0 .5rem;padding:.5rem .75rem}
  .rp-h{margin:0 0 .3rem}
  .rp-row{padding:.35rem 0}
  .rp-sub-section{margin-top:.5rem}
  .rp-lede{margin:.2rem 0 .4rem}
  .rp-action{margin:.3rem 0}
  .rp-foot{padding:.5rem 1rem}
}


/* R15.5.1, founder ruling 3. The two uppercase micro-labels were .72rem and .7rem, which
   measured 11.52px and 11.2px. Both are raised to 12px in the browser and on paper. Colour,
   letter-spacing and weight are unchanged, so contrast is unchanged. */
.rp-kicker{font-size:12px}
.rp-action-k{font-size:12px}
@media print{
  .rp-kicker{font-size:12px}
  .rp-action-k{font-size:12px}
  /* Founder ruling 2. The two-column supporting section was tried and REVERTED: it did not
     reduce the five-system report below three pages, and Chromium dropped the closing
     limitations subsection out of the printed output, so it made the report worse rather
     than better. The verified three-page layout stands. */
  .rp-sub-section h3{break-after:avoid;page-break-after:avoid}
}


/* R15.5.1, founder ruling on the governed print summary. The summary block exists in the
   document at all times and is shown only on paper; the full Almanac detail is shown only
   in the browser. Which evidence appears is decided in lib/printSummary.js and
   applyPrintSelection(), not here: these rules only show the variant already chosen. */
.rp-print-only{display:none}
.rp-local-summary .rp-ls-row{margin:.55rem 0;padding-bottom:.45rem;
  border-bottom:1px solid var(--ici-hairline)}
.rp-local-summary .rp-ls-row:last-of-type{border-bottom:0}
.rp-ls-name{margin:0 0 .15rem;font-weight:600}
.rp-ls-facts{display:flex;flex-wrap:wrap;gap:.15rem 1.1rem;margin:0 0 .2rem}
.rp-ls-facts div{display:flex;gap:.3rem}
.rp-ls-facts dt{font-weight:600}
.rp-ls-facts dd{margin:0}
.rp-ls-why{margin:0}
.rp-ls-more{margin:.6rem 0 0}
/* R15.5.1, founder ruling (Option D): local measurements as one compact table. Body text keeps
   its inherited size; only the row structure is compact. */
.rp-ls-table{width:100%;border-collapse:collapse;margin:.3rem 0 .5rem;table-layout:fixed}
.rp-ls-table th,.rp-ls-table td{text-align:left;vertical-align:top;padding:.15rem .5rem .15rem 0;
  line-height:1.3;border-bottom:1px solid var(--ici-hairline);overflow-wrap:anywhere}
.rp-ls-table th:nth-child(1){width:22%}
.rp-ls-table th:nth-child(2){width:36%}
.rp-ls-table th:nth-child(3){width:14%}
.rp-ls-table th:nth-child(4){width:28%}
.rp-ls-table thead th{font-weight:600}
.rp-ls-table tbody th{font-weight:600}
.rp-ls-table tr{break-inside:avoid}
.rp-ls-limits{margin:.3rem 0 .6rem;padding-left:1.1rem}
.rp-ls-limits li{margin:.1rem 0}
@media print{
  .rp-print-only{display:block}
  .rp-print-omit{display:none!important}
  /* rows and headings of the measurement table never split; a table that crosses a page
     repeats its column headings */
  /* R15.5.1 compaction ruling: the footer never stands alone on a page. result.js carries its
     lines inside the final section, which keeps together. */
  .rp-foot-print{margin-top:.6rem;padding-top:.4rem;border-top:1px solid var(--ici-hairline);
    break-before:avoid;page-break-before:avoid;break-inside:avoid;page-break-inside:avoid}
  /* Chromium does not honour break avoidance inside an opened details element, so the final
     section is printed as one unbreakable box: it moves to the next page whole, never leaving
     its footer lines behind on their own. */
  #rp-limitations{display:inline-block;width:100%;vertical-align:top}
  /* the supporting block is the last thing in the report; its trailing padding alone could
     start an empty final page when the content ended close to the foot of a page */
  #rp-supporting,#rp-supporting .rp-more,#rp-supporting .rp-more-body{padding-bottom:0;margin-bottom:0}
  /* Vertical rhythm of the governed summary only. No type size changes. */
  .rp-local-summary .rp-h3{margin:.35rem 0 .15rem}
  .rp-local-summary .rp-lede{margin:.1rem 0 .2rem}
  .rp-ls-table{margin:.15rem 0 .3rem}
  .rp-ls-table th,.rp-ls-table td{padding:.08rem .45rem .08rem 0;line-height:1.25}
  .rp-ls-limits{margin:.2rem 0 .3rem}
  .rp-ls-limits li{margin:0;line-height:1.35}
  .rp-local-summary p{line-height:1.35}
  .rp-local-summary .rp-ls-row{margin:.3rem 0;padding-bottom:.25rem}
  .rp-ls-more{margin:.3rem 0 0}
  .rp-foot-print p{margin:0}
  .rp-ls-table thead{display:table-header-group}
  .rp-local-summary .rp-h3{break-after:avoid;page-break-after:avoid}
}

/* Contact and save capture cards (R15.5.9) */
.capture-card { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1fr); background: var(--white); border: 1px solid var(--mist-soft); border-top: 4px solid var(--teal); border-radius: 12px; padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: 0 12px 32px rgba(1, 31, 54, 0.08); max-width: 64rem; margin: clamp(1.5rem, 4vw, 3rem) auto; }
@media (min-width: 56rem) { .capture-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.capture-eyebrow { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); font-weight: 700; margin: 0 0 0.5rem; }
.capture-heading { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; margin: 0 0 0.75rem; color: var(--ink); }
.capture-lede { color: var(--slate); margin: 0 0 1rem; max-width: 46ch; }
.capture-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.capture-points li { padding-left: 1.4rem; position: relative; color: var(--ink); }
.capture-points li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--teal); }
.capture-form { display: grid; gap: 0.25rem; }
.capture-form .field input, .capture-form .field select { width: 100%; }
.capture-row { display: grid; gap: 0 0.9rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) { .capture-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.capture-form .choice-list { gap: 0.5rem; }
.capture-form .choice { padding: 0.65rem 0.85rem; }
.capture-form .choice-note, .capture-card-save .choice-note { font-size: 0.75rem; }
.capture-form .check-nav .btn-primary { width: 100%; font-size: 1.05rem; padding-block: 0.8rem; }
.capture-fine { font-size: 0.75rem; color: var(--slate); }
.capture-more { margin: 0.5rem 0; }
.capture-more summary { cursor: pointer; color: var(--teal); font-weight: 600; }
.capture-card-save { grid-template-columns: minmax(0, 1fr) !important; border-top-color: var(--ember); margin: 1.25rem 0; max-width: none; box-shadow: 0 8px 24px rgba(1, 31, 54, 0.07); }
.capture-card-save > .choice-list .choice { border-width: 2px; padding: 0.9rem 1rem; background: var(--teal-soft); }
.capture-card-save > .choice-list .choice-title { font-size: 1.05rem; }
.capture-card-save .check-save-details { display: grid; gap: 0.25rem; }
@media print { .capture-card-save { display: none; } }

.capture-form fieldset.field { border: 0; padding: 0; margin: 0.75rem 0 0; }
.capture-form legend, .capture-form .lead-retrofit legend, .capture-form .lead-retrofit > p:first-child { font-weight: 700; color: var(--ink); margin-bottom: 0.5rem; }
.capture-form .choice-list, .capture-card-save .choice-list { grid-template-columns: minmax(0, 1fr) !important; grid-auto-flow: row !important; }
.capture-form .choice, .capture-card-save .choice { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 0.75rem !important; text-align: left !important; min-height: 0 !important; }
.capture-form .choice input, .capture-card-save .choice input { margin: 0.2rem 0 0 !important; width: 1.15rem; height: 1.15rem; }
.capture-form .choice-title { font-size: 0.95rem; margin: 0; }
.capture-form .choice-note, .capture-card-save .choice-note { font-weight: 400 !important; line-height: 1.45; }

/* Seasonal Building Readiness (in development) */
.readiness-controls { background: var(--white); border: 1px solid var(--mist-soft); border-radius: 12px; padding: clamp(1rem, 2.5vw, 1.75rem); margin-bottom: 1.5rem; }
.readiness-season, .readiness-drivers { margin: 2rem 0; }
.readiness-season h2, .readiness-drivers h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: var(--ink); border-bottom: 2px solid var(--teal-soft); padding-bottom: 0.4rem; }
.readiness-items { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.readiness-items > li { background: var(--white); border: 1px solid var(--mist-soft); border-left: 4px solid var(--teal); border-radius: 8px; padding: 0.9rem 1.1rem; }
.readiness-items p { margin: 0 0 0.4rem; }
.readiness-source { font-size: 0.8125rem; color: var(--slate); }
.readiness-regional { font-size: 0.8125rem; color: var(--teal); font-weight: 600; }
.readiness-links { margin: 0.25rem 0 0.5rem; padding-left: 1.2rem; }
.readiness-boundaries { margin-top: 2rem; }

/* Before you call a contractor (in development) */
.readiness-prep { margin: 2.5rem 0; }
.prep-controls { background: var(--white); border: 1px solid var(--mist-soft); border-radius: 12px; padding: clamp(1rem, 2.5vw, 1.75rem); }
.prep-sheet { margin-top: 1.5rem; }
.prep-page { background: var(--white); border: 1px solid var(--mist-soft); border-top: 4px solid var(--teal); border-radius: 12px; padding: clamp(1rem, 2.5vw, 2rem); }
.prep-page h3 { margin: 0.25rem 0 0.5rem; font-size: 1.25rem; }
.prep-page h4 { margin: 0.9rem 0 0.25rem; font-size: 0.95rem; color: var(--teal); text-transform: uppercase; letter-spacing: 0.04em; }
.prep-page ul { margin: 0; padding-left: 1.1rem; }
.prep-mark { font-size: 0.8125rem; color: var(--slate); margin: 0; }
.prep-none { color: var(--slate); margin: 0; }
.prep-nondiagnosis { font-weight: 700; margin-top: 1rem; }
.prep-boundary, .prep-purpose { font-size: 0.8125rem; color: var(--slate); }

.navigator-controls { background: var(--white); border: 1px solid var(--mist-soft); border-radius: 12px; padding: clamp(1rem, 2.5vw, 1.5rem); margin-bottom: 1rem; }
.navigator-group { margin: 1.25rem 0; }
.navigator-group h3 { font-size: 1.05rem; color: var(--ink); margin-bottom: 0.5rem; }
.driver-condition { font-weight: 700; color: var(--teal); margin: 0 0 0.25rem; }
.driver-line { font-size: 0.875rem; margin: 0 0 0.3rem; }

.readiness-link a { font-size: 0.8125rem; font-weight: 600; }

/* Retrofit Readiness Profile and Building Information Gap Index (in development) */
.retrofit-controls { background: var(--white); border: 1px solid var(--mist-soft); border-radius: 12px; padding: clamp(1rem, 2.5vw, 1.75rem); }
.retrofit-systems { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.retrofit-system { border: 1px solid var(--mist-soft); border-radius: 8px; padding: 0.75rem 0.9rem; }
.retrofit-system h3 { font-size: 1rem; margin: 0 0 0.5rem; }
.retrofit-system label { display: block; font-size: 0.8125rem; margin-bottom: 0.4rem; }
.retrofit-system select { width: 100%; }
.retrofit-output { margin-top: 2rem; }
.retrofit-table { width: 100%; border-collapse: collapse; margin: 0.75rem 0 1.25rem; }
.retrofit-table th, .retrofit-table td { text-align: left; border-bottom: 1px solid var(--mist-soft); padding: 0.4rem 0.5rem; font-size: 0.9rem; }
.retrofit-table caption { text-align: left; font-weight: 700; padding-bottom: 0.3rem; }
.gap-index { border: 1px solid var(--mist-soft); border-top: 4px solid var(--teal); border-radius: 12px; padding: clamp(1rem, 2.5vw, 1.75rem); margin: 1.5rem 0; background: var(--white); }
.gap-number { margin: 0.5rem 0; }
.gap-value { font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 700; color: var(--ink); }
.gap-scale { color: var(--slate); }
.gap-unavailable { font-weight: 700; color: var(--ink); }

/* Homepage tools band and the sixth navigation item */
.tools-band { background: var(--paper); }
.tools-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin: 1rem 0; }
@media (min-width: 48rem) { .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tool-card { background: var(--white); border: 1px solid var(--mist-soft); border-top: 3px solid var(--teal); border-radius: 10px; padding: 1.1rem 1.25rem; }
.tool-card h3 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.tool-card p { margin: 0; color: var(--slate); }

/* Building Operating Conditions Brief */
.brief-controls { background: var(--white); border: 1px solid var(--mist-soft); border-radius: 12px; padding: clamp(1rem, 2.5vw, 1.75rem); }
.brief-systems { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.brief-system { display: block; font-size: 0.8125rem; }
.brief-system select { width: 100%; }
.brief-output { margin-top: 2rem; }
.brief-items { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.9rem; }
.brief-items > li { background: var(--white); border: 1px solid var(--mist-soft); border-left: 4px solid var(--teal); border-radius: 8px; padding: 0.9rem 1.1rem; }
.brief-items h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.brief-why { font-size: 0.8125rem; color: var(--teal); margin: 0 0 0.4rem; }
.brief-line { font-size: 0.875rem; margin: 0 0 0.3rem; }
.brief-source { font-size: 0.8125rem; color: var(--slate); margin: 0.3rem 0 0; }
.brief-municipal { font-size: 0.75rem; color: var(--slate); margin: 0.2rem 0 0; }
.brief-limits { font-size: 0.8125rem; color: var(--slate); border-top: 1px solid var(--mist-soft); padding-top: 0.75rem; }

/* R15.8.1 presentation fixes */
.ici-sky + .ici-sky, .ici-plain + .ici-plain { border-top: 1px solid var(--ici-hairline); }
.ici-section + .ici-section { position: relative; }
.ici-tools { background: var(--ici-white); border-top: 1px solid var(--ici-hairline); border-bottom: 1px solid var(--ici-hairline); }
.ici-tools .tools-grid { margin-top: 1.25rem; }
.ici-closing-shell p { max-width: none; margin-inline: auto; text-align: center; }
.ici-closing-shell .btn { display: inline-flex; align-items: center; justify-content: center; }
.snapshot { margin: 1.5rem 0 0; }
.snapshot img { display: block; width: 100%; height: auto; border: 1px solid var(--ici-hairline); border-radius: 10px; box-shadow: 0 14px 34px rgba(1, 31, 54, 0.10); background: var(--ici-white); }
.snapshot figcaption { font-size: 0.8125rem; color: var(--slate); margin-top: 0.5rem; }
.snapshot-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); margin-top: 1.5rem; }
@media (min-width: 56rem) { .snapshot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.snapshot-grid .snapshot { margin: 0; }
.hero-snapshot { margin-top: 1.75rem; max-width: 56rem; }

.snapshot img { aspect-ratio: 760 / 570; object-fit: cover; object-position: top center; }
.hero-snapshot img { aspect-ratio: 1000 / 700; }

/* Review-and-consent step: use the width instead of one long column (R15.8.1) */
@media (min-width: 68rem) {
  .intake-layout { grid-template-columns: minmax(0, 1.5fr) minmax(17rem, 21rem); max-width: 88rem; }
  /* The final step needs the whole width: the supporting column has already been read by then. */
  .intake-layout:has(.check-step[data-step="5"]:not([hidden])) { grid-template-columns: minmax(0, 1fr); max-width: 82rem; }
  .intake-layout:has(.check-step[data-step="5"]:not([hidden])) .intake-aside { display: none; }
  .check-step[data-step="5"] .review-consent-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; }
  .check-step[data-step="5"] .review-summary { margin-top: 0; }
  .capture-card-save .check-save-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
  .capture-card-save .check-save-details > .field-hint, .capture-card-save .check-save-details > .choice-list,
  .capture-card-save .check-save-details > fieldset, .capture-card-save .check-save-details > .capture-fine,
  .capture-card-save .check-save-details > details { grid-column: 1 / -1; }
}
.check-save-more { margin: 0.5rem 0 0.75rem; }
.check-save-more > summary { cursor: pointer; font-weight: 600; color: var(--teal); font-size: 0.875rem; }
.check-save-more p { font-size: 0.8125rem; color: var(--slate); margin: 0.4rem 0 0; }

.profile-snapshot { max-width: 46rem; margin: 1.5rem auto 0; }
.profile-snapshot img { aspect-ratio: 766 / 463; object-fit: contain; background: var(--ici-white); }

@media (min-width: 68rem) {
  .shell-intake { max-width: 92rem; }
  .intake-layout:has(.check-step[data-step="5"]:not([hidden])) { max-width: none; }
  .check-step[data-step="5"] .review-consent-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .check-step[data-step="5"] .review-summary .review-list > div { padding-block: 0.5rem; }
}

/* Product snapshots: fewer, larger, legible (R15.8.1) */
.snapshot-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 60rem) { .snapshot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.snapshot-grid .snapshot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.snapshot-grid .snapshot:last-child { grid-column: 1 / -1; max-width: 46rem; margin-inline: auto; }
.snapshot figcaption { text-align: center; }
.profile-snapshot { max-width: 48rem; }
/* condition closeout, layout-only print compression (founder approval): governed condition layer spacing */
@media print{.rp-local-summary[data-print-layer="implications"] .rp-h3{margin:.3rem 0 .2rem}
.rp-local-summary[data-print-layer="implications"] .rp-ls-why{margin:0 0 .2rem;line-height:1.3}
.rp-local-summary[data-print-layer="implications"] .rp-ls-src{margin-top:.3rem}}