/* ==========================================================================
   HERU — design system
   Built clean. No assets, code or design carried over from the previous site.
   Typefaces are self-hosted and SIL Open Font Licence: Source Serif 4 for
   display, Inter for everything else. Self-hosting means no third-party font
   request, so nothing here requires cookie consent.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/SourceSerif4-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/SourceSerif4-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/Inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/Inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Engineering and infrastructure register: cool neutrals, restrained colour.
     A clear mid blue — lighter and cleaner than the old site's navy, and well
     away from its electric indigo. The copper accent carries heat and hot
     water recovered, so warmth is signalled without ever showing a flame.
     Both accents are checked against WCAG AA on the page background. */
  --bg: #f7f9fb;
  --paper: #ffffff;
  --ink: #0f1c26;
  --ink-soft: #4a5a66;
  --ink-faint: #7b8b96;
  --accent: #1c74b0;
  --accent-deep: #145881;
  /* Lightened from #e9f2f9, which left the eyebrow text on tinted bands at
     4.44:1 — just under AA. This clears it. */
  --accent-tint: #eef5fb;
  --warm: #a9521f;
  --warm-tint: #fbefe6;
  --line: rgba(15, 28, 38, 0.12);
  --line-soft: rgba(15, 28, 38, 0.07);

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --max: 74rem;

  --step-hero: clamp(2.5rem, 6.2vw, 5.25rem);
  --step-h2: clamp(1.85rem, 3.6vw, 3rem);
  --step-h3: clamp(1.25rem, 1.9vw, 1.6rem);
  --step-lead: clamp(1.15rem, 1.7vw, 1.5rem);
  --step-body: 1.0625rem;
}

/* --- Base ----------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--step-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 0.85rem 1.25rem;
  z-index: 100;
}
.skip:focus { left: 0; }

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

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 52rem; }

/* Nigel's review: 230px of dead space between sections on desktop made the
   pages read as disconnected blocks. Tightened to roughly 160px. */
section { padding-block: clamp(3rem, 6vw, 5rem); }

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.5rem;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 249, 251, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 4.75rem;
}

.brand { display: flex; align-items: center; text-decoration: none; }

/* The only plain logo in the archive (no strapline) is the white one, so it is
   inverted here for the light header. Replace once HERU supplies the vector
   originals — and confirm whether "Powered by Choice" is still current. */
.brand img { height: 26px; width: auto; filter: brightness(0) saturate(100%); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.1rem);
}

.nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: 0.35rem;
  border-bottom: 1.5px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
  /* Without this, flex shrinks the items and the labels wrap to two lines
     before the breakpoint ever fires. */
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* Collapse the nav while there is still room, rather than letting it crush. */
@media (max-width: 74rem) {
  .nav { display: none; }
}

/* On a phone the sticky header was taking 9% of the screen. Trimmed so more
   of each section is visible — but the button stays at 44px tall, the minimum
   comfortable touch target, so this buys space without hurting usability. */
@media (max-width: 46rem) {
  .site-header__inner { min-height: 3.5rem; gap: 1rem; }
  .brand img { height: 21px; }
  .site-header .btn {
    padding: 0.66rem 1.1rem;
    font-size: 0.9063rem;
  }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: 'Inter', sans-serif;
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
  padding: 1.05rem 2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.btn--primary { background: var(--accent); color: var(--bg); }
.btn--primary:hover { background: var(--accent-deep); transform: translateY(-2px); }

.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn svg { flex: none; transition: transform 0.2s ease; }
.btn:hover svg { transform: translateX(4px); }

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

.hero { padding-block: clamp(3.5rem, 8vw, 7rem) 0; }

.hero__headline {
  font-size: var(--step-hero);
  max-width: 22ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* The second sentence is the first time HERU is named at all. */
.hero__intro {
  font-size: var(--step-lead);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.hero__intro strong { color: var(--ink); font-weight: 600; }

.claims {
  list-style: none;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  padding: 0;
  display: grid;
  gap: 0.9rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  max-width: 60rem;
}

.claims li {
  font-size: 1.0625rem;
  font-weight: 500;
  padding-top: 1rem;
  border-top: 1.5px solid var(--ink);
}

/* Full-bleed image: the building, never the machine. */
.hero__figure { margin: 0; }

/* No crop on desktop: the render is composed 16:9 and its proportions are to
   be preserved. A fixed height with object-fit was cutting off the entrance
   and the people using the building — the whole point of the image. */
.hero__figure img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* The portrait render is very tall on a phone, so it is capped — and
   object-position holds the entrance and curved facade in frame, as the
   artwork's own guidance asks. */
@media (max-width: 40rem) {
  .hero__figure img {
    height: 58vh;
    object-fit: cover;
    object-position: center 68%;
  }
}

.hero__cta {
  display: flex;
  justify-content: center;
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

.placeholder-note {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 0.85rem;
  font-style: italic;
}

/* --- Why change ----------------------------------------------------------- */

.band-tint { background: var(--accent-tint); }

.changed {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 44rem;
}

.changed li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
}

.changed li:first-child { border-top: 1px solid var(--line); }

.changed span:last-child {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  flex: none;
}

/* The point of the whole list. */
.changed li[data-unchanged] span:last-child { color: var(--warm); }
.changed li[data-unchanged] { font-weight: 600; }

/* --- Closed-loop infographic ----------------------------------------------
   Supplied artwork, shown whole. It carries its own title and must not be
   cropped, so no object-fit here — the image keeps its full proportions and
   the transparent PNG sits directly on the page's pale blue-grey.
   -------------------------------------------------------------------------- */

/* The artwork carries a lot of its own whitespace, so the section around it
   needs far less than the usual rhythm or a dead gap opens up beneath. */
.section--loop { padding-block: clamp(1.5rem, 3vw, 3rem); }

.loop-figure {
  margin: 0;
  display: flex;
  justify-content: center;
}

.loop-figure img {
  width: 100%;
  max-width: 46rem;
  height: auto;
}

@media (max-width: 40rem) {
  .loop-figure img { max-width: 22rem; }
}

/* --- Video facade ---------------------------------------------------------
   A poster and a play button. The Vimeo iframe is only inserted on click, so
   no third-party request is made — and therefore no cookie consent is needed
   — unless the visitor actually chooses to watch.
   -------------------------------------------------------------------------- */

.video { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.video__play {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink);
  cursor: pointer;
  line-height: 0;
}

.video__play img { width: 100%; height: auto; transition: opacity 0.25s ease; }
.video__play:hover img { opacity: 0.86; }

.video__icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 24px rgba(15, 28, 38, 0.32);
  transition: transform 0.2s ease, background 0.2s ease;
}
.video__play:hover .video__icon { transform: scale(1.07); background: var(--accent-deep); }

/* The play triangle reads better nudged very slightly right of centre. */
.video__icon svg { margin-left: 3px; }

.video__note {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin: 0.85rem 0 0;
}

/* Once loaded, the iframe takes the poster's place at the same ratio. */
.video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink);
}
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Defining sentence ---------------------------------------------------- */

.defining {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  max-width: 24ch;
  margin: 0;
  text-wrap: balance;
}

.defining em { font-style: normal; color: var(--warm); }

/* Body text following a large serif statement needs air, or the two sizes
   collide. */
.defining + p { margin-top: 1.75rem; }

/* --- Validation ----------------------------------------------------------- */

.proof {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.proof__item {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: clamp(1.5rem, 3vw, 2.1rem);
}

.proof__item h3 {
  font-size: var(--step-h3);
  margin-bottom: 0.6rem;
}

.proof__item p {
  color: var(--ink-soft);
  font-size: 0.9688rem;
  margin: 0;
}

.proof__source {
  display: block;
  margin-top: 1.1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --- Investor route (deliberately after validation) ----------------------- */

.split {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  margin-top: clamp(2.5rem, 5vw, 3rem);
}

.route {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(1.75rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
  background: var(--paper);
}

.route h3 { font-size: var(--step-h3); }
.route p { color: var(--ink-soft); margin: 0; flex: 1; }

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--bg);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.site-footer a { color: var(--bg); }

.site-footer__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.site-footer h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, 0.55);
  margin: 0 0 1.1rem;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.6rem; }
.site-footer a { text-decoration: none; opacity: 0.85; }
.site-footer a:hover { opacity: 1; text-decoration: underline; }

.site-footer__note {
  font-size: 0.875rem;
  color: rgba(247, 249, 251, 0.6);
  margin: 1rem 0 0;
  max-width: 22ch;
}

.site-footer__legal {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(247, 249, 251, 0.16);
  font-size: 0.8125rem;
  color: rgba(247, 249, 251, 0.6);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.site-footer__legal p { margin: 0; max-width: 58ch; }

.site-footer__links { display: flex; gap: 1.5rem; flex: none; }
.site-footer__links a { text-decoration: none; opacity: 0.85; }
.site-footer__links a:hover { opacity: 1; text-decoration: underline; }

/* --- Typography split ------------------------------------------------------
   Serif carries the narrative voice — the hero, the section statements, the
   defining sentences. Sans carries structure: product names, card titles,
   specifications. Editorial where the page persuades, technical where it
   evidences.
   -------------------------------------------------------------------------- */

.h-sans {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  font-size: var(--step-h3);
}

.section-title {
  font-size: var(--step-h2);
  max-width: 22ch;
  margin-bottom: 1.25rem;
}

.lede {
  font-size: var(--step-lead);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
}

.section--tight { padding-block: clamp(2.25rem, 4.5vw, 3.75rem); }

.section-more { margin-top: 2rem; }

.link-arrow {
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
}
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { border-bottom-color: var(--accent); }

.note {
  font-size: 0.875rem;
  color: var(--ink-faint);
  max-width: 52ch;
  margin-top: 2rem;
}

/* --- Page head ------------------------------------------------------------ */

.page-head { padding-block: clamp(2.5rem, 5.5vw, 4.25rem) clamp(1.75rem, 3.5vw, 2.5rem); }

.page-head__title {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  max-width: 20ch;
  margin-bottom: 1.5rem;
}

.eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }

/* --- Lists ---------------------------------------------------------------- */

.ticks { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 46rem; }

.ticks li {
  position: relative;
  padding-left: 1.75rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* --- Specification lists -------------------------------------------------- */

.spec { margin: 1.5rem 0 0; }

.spec > div {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) 1fr;
  gap: 1rem 1.5rem;
  padding-block: 0.8rem;
  border-top: 1px solid var(--line-soft);
}

.spec dt {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.spec dd { margin: 0; font-size: 0.9688rem; }

@media (max-width: 34rem) {
  .spec > div { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* Inside a card the two-column form has nowhere near enough width — the value
   column collapses and every value wraps to three or four lines. Stack them. */
.unit .spec > div {
  grid-template-columns: 1fr;
  gap: 0.2rem;
}

/* --- Units ---------------------------------------------------------------- */

.units {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
}

.unit {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: clamp(1.5rem, 3vw, 2rem);
}

.unit__order {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.unit__name { font-size: 1.5rem; margin-bottom: 0.6rem; }
.unit__equiv { color: var(--ink-soft); font-size: 0.9688rem; }

/* --- Sector cards --------------------------------------------------------- */

.sectors {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.sector {
  display: block;
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.sector:hover { border-color: var(--accent); transform: translateY(-3px); }

.sector h3 { margin-bottom: 0.6rem; }
.sector p { color: var(--ink-soft); font-size: 0.9688rem; margin-bottom: 1rem; }

.sector__unit {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --- Evidence ------------------------------------------------------------- */

.evidence {
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.evidence:first-child { border-top: 0; padding-top: 0; }

.evidence__source {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.evidence h2 { margin-bottom: 0.9rem; }

/* --- Roadmap -------------------------------------------------------------- */

.roadmap { list-style: none; counter-reset: step; margin: 2rem 0 0; padding: 0; }

.roadmap li {
  counter-increment: step;
  position: relative;
  padding-left: 3.25rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--line);
}

.roadmap li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
  display: grid;
  place-items: center;
}

.roadmap h3 { margin-bottom: 0.4rem; }
.roadmap p { color: var(--ink-soft); margin: 0; }

/* --- Downloads ------------------------------------------------------------ */

.downloads { list-style: none; margin: 0; padding: 0; }

.downloads li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-block: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
.downloads li:first-child { border-top: 0; padding-top: 0; }

.downloads h2 { margin-bottom: 0.5rem; }
.downloads p { color: var(--ink-soft); max-width: 40ch; margin-bottom: 0.4rem; }

.meta {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin: 0;
}

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

.form-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 56rem) {
  .form-layout { grid-template-columns: 1fr; }
}

.field-row {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.field { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; }

.field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}

.field span { color: var(--warm); }

.field input,
.field select,
.field textarea {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.8rem 0.9rem;
  width: 100%;
}

.field textarea { resize: vertical; min-height: 8rem; }

.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); }

.field--check { flex-direction: row; align-items: center; gap: 0.65rem; }
.field--check input { width: auto; }
.field--check label { font-weight: 400; color: var(--ink-soft); }

.form-note {
  font-size: 0.875rem;
  color: var(--ink-soft);
  max-width: 48ch;
  margin: 1.5rem 0 0;
}
.form-note a { color: var(--accent); }

.contact-aside h2 { margin-bottom: 0.75rem; }
.contact-aside a { color: var(--accent); }

/* --- Outstanding-work markers --------------------------------------------
   Deliberately visible. These flag content that must come from HERU or from
   Counsel rather than being drafted here, and should be gone before launch.
   -------------------------------------------------------------------------- */

.todo {
  border: 1px dashed var(--warm);
  background: var(--warm-tint);
  border-radius: 4px;
  padding: 1.25rem 1.4rem;
  margin-top: 2rem;
}

.todo__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: 0.6rem;
}

.todo p { font-size: 0.9375rem; margin-bottom: 0.7rem; }
.todo p:last-child { margin-bottom: 0; }

/* --- Timeline -------------------------------------------------------------
   Yesterday, today and what comes next. The whole philosophy in one graphic,
   readable in about five seconds. Tomorrow is the only column given colour.
   -------------------------------------------------------------------------- */

.timeline {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
  /* Cards size to their content. Stretching them to equal height leaves dead
     space under Yesterday and Today, and Tomorrow having more to say is the
     point of the graphic. */
  align-items: start;
}

.era {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--paper);
}

.era__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.25rem;
}

.era__steps {
  list-style: none;
  counter-reset: era;
  margin: 0;
  padding: 0;
}

.era__steps li {
  counter-increment: era;
  position: relative;
  padding-left: 2rem;
  padding-block: 0.6rem;
  font-size: 1.125rem;
  font-weight: 500;
  border-top: 1px solid var(--line-soft);
}
.era__steps li:first-child { border-top: 0; }

/* A downward chevron between steps, rather than numbers — this reads as flow. */
.era__steps li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.15rem;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(45deg);
}

.era--next {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.era--next .era__label { color: var(--accent); }
.era--next .era__steps li::before {
  border-right-color: var(--accent);
  border-bottom-color: var(--accent);
}

.era__note {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(28, 116, 176, 0.25);
  font-size: 0.9375rem;
  color: var(--accent-deep);
}

/* --- Progressive disclosure ----------------------------------------------
   The Authorised Materials page answers the questions in the order a visitor
   would actually ask them.
   -------------------------------------------------------------------------- */

.disclose { margin-top: clamp(1rem, 2vw, 2rem); }

.disclose__step {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 1.5rem;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--line);
}
.disclose__step:first-child { border-top: 0; padding-top: 0; }

.disclose__n {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.75rem;
  color: var(--accent);
  margin: 0;
  line-height: 1.2;
}

.disclose__step h2 { margin-bottom: 0.75rem; }
.disclose__step p:last-child { margin-bottom: 0; }
.disclose__step em { font-style: normal; color: var(--warm); font-weight: 500; }

@media (max-width: 34rem) {
  .disclose__step { grid-template-columns: 1fr; gap: 0.5rem; }
  .disclose__n { font-size: 1.25rem; }
}

/* A qualifying statement that carries weight — full body size, marked by a
   rule rather than shrunk into fine print. */
.qualifier {
  border-left: 2px solid var(--accent);
  padding-left: 1.25rem;
  max-width: 52ch;
  margin-top: 1.75rem;
  color: var(--ink);
}

/* --- Category summary -----------------------------------------------------
   Category names only. The examples themselves live in the downloadable
   document, so this page keeps to explaining the principle.
   -------------------------------------------------------------------------- */

.cat-summary {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: clamp(2rem, 4vw, 2.75rem);
  align-items: start;
}

.cat-summary h3 { margin-bottom: 1rem; }

.cat-summary__note {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin: 1.25rem 0 0;
}

.chips { list-style: none; margin: 0; padding: 0; display: flex;
         flex-wrap: wrap; gap: 0.5rem; }

.chips li {
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  border: 1px solid rgba(28, 116, 176, 0.28);
}

/* Muted rather than alarming: exclusion is a deliberate engineering decision. */
.chips--excluded li {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
}

/* --- Document link -------------------------------------------------------- */

.doc-link {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  max-width: 34rem;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.doc-link:hover { border-color: var(--accent); transform: translateY(-2px); }

.doc-link__icon {
  flex: none;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--paper);
  background: var(--accent);
  border-radius: 3px;
  padding: 0.45rem 0.5rem;
}

.doc-link__text { display: flex; flex-direction: column; gap: 0.2rem; }
.doc-link__text strong { font-weight: 600; }
.doc-link__text span { font-size: 0.875rem; color: var(--ink-faint); }

/* --- Material categories --------------------------------------------------
   Authorised and not-authorised use the same card so exclusion reads as a
   deliberate engineering decision rather than a shortcoming. The excluded set
   is muted, never alarming — no red, no warning marks.
   -------------------------------------------------------------------------- */

.materials {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

.material-cat {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--accent);
  border-radius: 4px;
  padding: clamp(1.35rem, 2.5vw, 1.75rem);
}

.material-cat h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.9rem;
}

.material-cat ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.material-cat li {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  padding-block: 0.3rem;
  padding-left: 1rem;
  position: relative;
}

.material-cat li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.material-cat--excluded {
  background: transparent;
  border-top-color: var(--ink-faint);
}

.material-cat--excluded li::before {
  background: none;
  width: 7px;
  height: 1.5px;
  border-radius: 0;
  top: 1.1rem;
  background-color: var(--ink-faint);
}

/* --- Optional-field marker ------------------------------------------------ */

.optional {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint) !important;
  margin-left: 0.4rem;
}

/* --- Page figures --------------------------------------------------------- */

.figure { margin: clamp(2rem, 4vw, 3rem) 0 0; }

.figure img {
  width: 100%;
  height: clamp(16rem, 42vh, 28rem);
  object-fit: cover;
  border-radius: 4px;
}

/* Logos need their full shape and their own white ground — no cropping. */
.figure--plain img {
  height: auto;
  object-fit: contain;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

.figure figcaption {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin-top: 0.85rem;
  max-width: 52ch;
}

/* --- Small button --------------------------------------------------------- */

.btn--sm { padding: 0.7rem 1.4rem; font-size: 0.9375rem; }

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

/* --- Links page -----------------------------------------------------------
   The destination for the QR code on vehicles, so it is scanned on a phone,
   outdoors, one-handed. Large tap targets, short lines, no clutter.
   -------------------------------------------------------------------------- */

.links-page { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.links-page__title {
  font-size: clamp(1.75rem, 4.5vw, 2.6rem);
  max-width: 18ch;
  margin-bottom: 1.25rem;
}

.linklist {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  max-width: 34rem;
}

.linklist a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  /* Comfortably above the 44px minimum touch target, for outdoor use. */
  padding: 1.1rem 1.35rem;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.linklist a:hover { border-color: var(--accent); transform: translateY(-2px); }

.linklist__label { font-weight: 600; font-size: 1.0625rem; }
.linklist__note { font-size: 0.875rem; color: var(--ink-faint); }

.linklist__primary a {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.linklist__primary a:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.linklist__primary .linklist__note { color: rgba(255, 255, 255, 0.78); }

.links-page__foot { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* A single line that closes an argument. Nigel's review found the "resource
   management must evolve too" conclusion read as just another paragraph, so
   the point of the whole page was being missed. */
.statement {
  font-size: var(--step-lead);
  line-height: 1.4;
  font-weight: 600;
  color: var(--accent-deep);
  margin-block-start: 1.5em;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--accent);
  max-width: 40ch;
}

/* h2.h-sans carried no bottom margin, so section headings sat hard against
   their first paragraph while .section-title had breathing room. Nigel's
   review was about exactly this kind of spacing inconsistency. */
h2.h-sans { margin-bottom: 0.9rem; }

/* Two of the three proof cards go straight to the report they describe, so they
   have to look and behave like links without breaking the row's alignment. */
.proof__item--link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.proof__item--link:hover,
.proof__item--link:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgb(15 28 38 / 0.08);
  transform: translateY(-2px);
}

.proof__cta {
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-deep);
}

.proof__cta::after { content: " \2192"; }

.proof__item--link:hover .proof__cta { text-decoration: underline; }

/* The source line sits above the call to action, pushed to the card's base so
   all three cards keep a common baseline. */
.proof__item--link .proof__source { margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  .proof__item--link { transition: none; }
  .proof__item--link:hover { transform: none; }
}