/* ==========================================================================
   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.
   ========================================================================== */

:root {
  /* Sampled from ICI-symbol-transparent.png */
  --ink:        #023458;
  --ink-deep:   #011F36;
  --teal:       #015D75;
  --teal-soft:  #E4F0F4;
  --ember:      #FD8516;
  --ember-soft: #FFF1E2;
  --slate:      #618594;
  --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;
}

*, *::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 {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
}
.nav a:hover, .nav a[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 { color: var(--white); margin-bottom: 0.75rem; font-size: 0.9375rem; }
.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); }

/* ==========================================================================
   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.
   ========================================================================== */

:root {
  --paper-warm: #FBFCFC;
  --navy-wash: #F0F4F6;
  --teal-line: rgba(1, 110, 139, 0.22);
  --orange-wash: #FEF4E9;
}

/* ---------- 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; }
}

/* ==========================================================================
   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.
   ========================================================================== */

:root {
  --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: #618594;
  --band-poor: #C9761F;
  --band-eol: #FD8516;
}

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 { 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; }

/* ==========================================================================
   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.
   ========================================================================== */

:root {
  /* 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;
  --slate-text:          #567684;
  --border-strong:       #8A959A;
  --ember-border:        #DA7213;
  --ember-on-wash:       #A85A0F;

  --focus-ring: #16232E;
}

/* 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 { 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; }

/* ==========================================================================
   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.
   ========================================================================== */

:root {
  --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;
}

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

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

.field-tint { background: var(--field); }
.field-deep { background: var(--field-deep); }
.field-aqua { background: linear-gradient(180deg, var(--aqua-50) 0%, var(--field) 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(--field); 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(--field); 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(--field); 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(--field); 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 { 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. */
@media (max-width: 29.99rem) {
  .masthead .btn-primary { 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 .btn-primary { 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: 34ch; }

/* ---------- 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);
}
.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(--field);
  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(--field);
  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(--field); }
.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; font-size: 0.8125rem !important; }
.notice-foot { font-size: 0.8125rem !important; margin-bottom: 0 !important; }

/* ---------- 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(--field); 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(--field); 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(--field); 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; }