/* ==========================================================================
   DARe brand tokens — from NU_DARe_Brand Guidelines_7.pdf
   JT Marnie is DARe's brand font; the files are the same ones dare.ac.uk
   serves (assets/fonts). There is no Light cut, so the Figma design's 300 and
   400 both use Regular. Calibri stays as the fallback, per the guidelines.
   ========================================================================== */
@font-face {
  font-family: 'JT Marnie';
  src: url("../fonts/jtmarnie-regular-webfont.woff2") format("woff2");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JT Marnie';
  src: url("../fonts/jtmarnie-medium-webfont.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JT Marnie';
  src: url("../fonts/jtmarnie-mediumitalic-webfont.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JT Marnie';
  src: url("../fonts/jtmarnie-bold-webfont.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JT Marnie';
  src: url("../fonts/jtmarnie-bolditalic-webfont.woff2") format("woff2");
  font-weight: 600 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --color-water: #00295e; /* dark navy — primary */
  --color-leaf: #5ecf70;  /* green */
  --color-sky: #0096ff;   /* blue */
  --color-stone: #e6e6e6; /* light grey */
  --color-white: #ffffff;

  /* Every colour below this line is one of the four above at reduced
     opacity — not a new colour. The brand guide defines exactly four
     colours (plus white); UI chrome like info banners and muted text
     still needs lighter/darker variants, so those are derived as tints
     of an approved colour rather than separate arbitrary greys/blues. */
  --color-water-muted: rgba(0, 41, 94, 0.68);   /* secondary text */
  --color-water-faint: rgba(0, 41, 94, 0.5);    /* tertiary text, badges */
  --color-sky-tint-bg: rgba(0, 150, 255, 0.07);   /* info banner background */
  --color-sky-tint-border: rgba(0, 150, 255, 0.3); /* info banner border */

  --font-brand: 'JT Marnie', Calibri, 'Segoe UI', Arial, sans-serif;

  --box-border-radius: 10px;
  --shadow-soft: 0 4px 14px rgba(0, 41, 94, 0.15);
}

* { box-sizing: border-box; }

/* Browsers don't inherit font-family into form controls by default —
   <button> falls back to the OS UI font unless told otherwise. Diagram
   boxes and labels are <button>s (for click/keyboard accessibility), so
   without this they'd silently skip JT Marnie/Calibri entirely. */
button { font-family: inherit; font-weight: inherit; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-brand);
  /* JT Marnie is "used in Bold and Medium" per the brand guide — no
     Regular/Light weight. 500 is the base so body copy defaults to
     Medium; anything that needs more emphasis sets 600/700 explicitly. */
  font-weight: 500;
  color: var(--color-water);
  background: var(--color-white);
}

a { color: var(--color-sky); }

/* ---------- Site header ---------- */
.site-header {
  background: var(--color-water);
  color: var(--color-white);
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
}

/* Brand guide's own minimum digital size for the master logo (195px wide,
   below which the secondary/symbol-only mark should be used instead). */
.site-header .logo {
  width: 195px;
  height: auto;
  display: block;
}

.site-header .brand-subtitle {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  padding-left: 0.75rem;
}

.site-header nav a {
  color: var(--color-white);
  text-decoration: none;
  margin-left: 1.25rem;
  font-size: 0.95rem;
}

.site-header nav a:hover { text-decoration: underline; }

/* Below the guide's mobile threshold the header tightens up so it never wraps
   onto a second row. The logo keeps the guide's own 195px digital minimum —
   shrinking it instead would mean switching to the secondary logo — so the
   width comes from the "TPRAF" suffix and the gutters, and the page label is
   carried by the heading directly below anyway. The "Explore TPRAF" nav item
   is dropped here too: it duplicates the hero button sitting directly beneath
   it. The "Home" item on the diagram page stays, since it's the only route
   back to the landing page. */
@media (max-width: 760px) {
  .site-header { padding: 1rem; }

  .site-header .brand-subtitle { display: none; }

  .site-header .nav-cta { display: none; }

  .site-header nav a { margin-left: 0.75rem; }
}

/* ---------- Site footer ---------- */
/* Carries the funder/partner lockup — the guide's own report covers and
   banners all pair the DARe logo with a "Funded by / Led by" lockup, and
   ships separate colourways for light and dark backgrounds. The full-colour
   lockup is the one built for a light background, so the footer is white. */
.site-footer {
  margin-top: 0;
  padding: 2.25rem 0 2rem;
  background: var(--color-white);
  border-top: 1px solid var(--color-stone);
  text-align: left;
}

.site-footer .container {
  display: grid;
  gap: 1rem;
}

.footer-label {
  margin: 0;
  color: var(--color-water-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer-lockup-link {
  display: block;
  max-width: 1000px;
}

.footer-lockup {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
}

.footer-line {
  margin: 0;
  padding-top: 1.05rem;
  border-top: 1px solid var(--color-stone);
  color: var(--color-water-muted);
  font-size: 0.82rem;
}

.site-footer a {
  color: var(--color-water-muted);
  text-decoration: underline;
}

/* ==========================================================================
   Homepage
   Built to the brand guide's own material grid: a wider left margin than the
   right, so headings line up with the text of the logo (the guide calls this
   out explicitly on its grid page), and generous but consistent gutters.
   Colour is restricted to the guide's four colours plus white — every other
   value below is one of those four at reduced opacity, never a new colour.
   Type follows the guide's rules: Bold/Medium only, -20 tracking on titles,
   and tight leading on display copy. Leading on body paragraphs is opened up
   for screen reading, the one place web needs differ from print.
   ========================================================================== */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: clamp(1.25rem, 6vw, 7.5rem);
  padding-right: clamp(1.25rem, 3.4vw, 4.25rem);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-water);
  color: var(--color-white);
}

/* The supplied "DARe green arrow" artwork, knocked back to white and used as
   texture rather than as an icon — the guide's imagery page sanctions working
   the symbol's arrows into a composition. Kept as a corner bleed (most of the
   mark sits outside the hero, clipped by overflow) so it reads as depth
   behind the copy rather than as a competing graphic, and painted under the
   grid's z-index 1 so it can never sit on top of text. */
.hero::after {
  content: "";
  position: absolute;
  right: -16%;
  bottom: -30%;
  width: min(40vw, 460px);
  aspect-ratio: 900 / 893;
  background: url("../img/dare-arrow-white.png") center / contain no-repeat;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 5vw, 3.25rem);
  align-items: center;
  padding-top: clamp(2.75rem, 7vw, 5.5rem);
  padding-bottom: clamp(2.75rem, 7vw, 5.5rem);
}

@media (min-width: 820px) {
  .hero-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); }
  /* Only capped once the hero graphic sits beside the copy (this
     breakpoint) — below it, the graphic stacks below the copy instead, so
     there's nothing to its right and the tagline can use the full width
     instead of stopping at a comfortable reading measure with empty space
     beside it (mobile report, 23 Sept). */
  .hero .tagline { max-width: 30ch; }
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--color-leaf);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  font-size: clamp(1.9rem, 4.6vw, 3.3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.hero-owner { color: var(--color-leaf); }

.hero .tagline {
  margin: 1.25rem 0 0;
  color: var(--color-stone);
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.22;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.75rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 1;
  display: inline-flex;
  padding: 6px;
  color: rgba(255, 255, 255, 0.7);
  transform: translateX(-50%);
  animation: scroll-cue-bounce 1.8s ease-in-out infinite;
}

.scroll-cue:hover,
.scroll-cue:focus-visible {
  color: var(--color-white);
}

.scroll-cue svg {
  width: 24px;
  height: 24px;
}

@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
}

@media (max-height: 600px) {
  .scroll-cue { display: none; }
}

.hero-graphic img {
  display: block;
  width: clamp(120px, 17vw, 215px);
  height: auto;
  margin-left: auto;
}

/* The mark can't share a row with the copy on a phone, and nowhere in the
   hero is reliably free for it to float — the headline runs nearly the full
   width at these sizes, so a floating mark either collides with it (as soon
   as the copy runs longer than the real text) or has to reserve extra hero
   height to sit in. Reserving that space is what made the hero tall, so the
   mark is dropped at this size instead and comes back at 820px where it has
   its own column. */
@media (max-width: 819px) {
  .hero-graphic { display: none; }
}

/* ---------- Brand colour ribbon ---------- */
.brand-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 10px;
}

.brand-ribbon span { display: block; }
.ribbon-water { background: var(--color-water); }
.ribbon-leaf { background: var(--color-leaf); }
.ribbon-sky { background: var(--color-sky); }
.ribbon-stone { background: var(--color-stone); }

/* ---------- Sections ---------- */
.section { padding: clamp(2.5rem, 6vw, 4.75rem) 0; }

/* Scroll-reveal: a plain fade/rise-in for section heads and cards as they
   enter view, applied by app.js via IntersectionObserver. Elements start
   revealed (no JS/no support = just show everything, see app.js) so this
   only ever adds polish, never hides content. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-group > .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-group > .reveal:nth-child(3) { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.band-stone { background: var(--color-stone); }

/* Section titles sit on the same left edge as the logo's text, with the
   guide's small tracked label and page number to their right — the layout
   its own guideline pages use. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(0, 41, 94, 0.18);
}

.section-head h2 {
  margin: 0;
  font-size: clamp(1.45rem, 2.9vw, 2rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.section-index {
  margin: 0;
  /* 0.72 is the lowest opacity of Water that still clears 4.5:1 for small
     text on both the white and the Stone band — 0.65 missed it on Stone. */
  color: rgba(0, 41, 94, 0.72);
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.prose { max-width: 68ch; }

.prose p { margin: 0 0 1.15rem; line-height: 1.62; }
.prose p:last-child { margin-bottom: 0; }

/* Used where a paragraph is the only thing in its row (no sidebar to share
   the space with, e.g. "About the TPRAF Diagram"), so it isn't left looking
   like a narrow column with dead space beside it — runs the full container
   width rather than stopping at a "readable" line length. */
.prose-wide { max-width: none; }

.definition { font-size: 1.06rem; }

/* ---------- Overview two-column layout (What is TPRAF?) ---------- */
.overview-grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  align-items: start;
}

@media (min-width: 860px) {
  .overview-grid { grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); }
}

.overview-aside {
  margin: 0;
  padding: 1.5rem 1.5rem 1.75rem;
  background: var(--color-stone);
  border-radius: 12px;
}

.overview-aside .audience-lead { max-width: none; }
.overview-aside .audience-list { grid-template-columns: 1fr; }

/* ---------- Acknowledgements card (collapsible, native <details>) ---------- */
.ack-card {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  background: var(--color-white);
  border: 1px solid rgba(0, 41, 94, 0.12);
  border-left: 4px solid var(--color-leaf);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.ack-summary {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
}

.ack-summary::-webkit-details-marker { display: none; }

.ack-icon {
  flex: none;
  width: 34px;
  height: 34px;
  opacity: 0.85;
}

.ack-summary-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ack-summary-label {
  font-weight: 700;
  color: var(--color-water);
  font-size: 0.98rem;
}

.ack-summary-preview {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--color-water-muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.ack-chevron {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--color-water-muted);
  transition: transform 0.15s ease;
}

.ack-card[open] .ack-chevron { transform: rotate(180deg); }
.ack-card[open] .ack-summary-preview { display: none; }

.ack-body {
  padding: 0 1.25rem 1.25rem calc(1.25rem + 34px + 0.9rem);
}

.ack-body p {
  margin: 0;
  color: var(--color-water-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .ack-body { padding-left: 1.25rem; }
}

/* ---------- Who it's for ---------- */
.audience-lead {
  max-width: 62ch;
  margin: 0 0 1.1rem;
  line-height: 1.62;
}

.audience-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.audience-list li {
  padding: 0.7rem 0.9rem;
  background: rgba(0, 41, 94, 0.045);
  border-left: 3px solid var(--color-leaf);
  border-radius: 0 8px 8px 0;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
}

/* ---------- Further reading cards ---------- */
.resource-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0;
  padding: 0;
  list-style: none;
}

/* Bold use of the palette, as the guide asks for on its materials — the
   three cards take three of the four colours in guide order. */
.resource-card {
  position: relative;
  padding: 1.25rem 1.25rem 1.4rem;
  background: var(--color-white);
  border: 1px solid rgba(0, 41, 94, 0.12);
  border-top: 4px solid var(--color-water);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.resource-card:nth-child(2) { border-top-color: var(--color-leaf); }
.resource-card:nth-child(3) { border-top-color: var(--color-sky); }

/* Lift the whole card on hover/focus of its link, so a card with a
   full-cover link (see .resource-card-link below) reads as clickable. */
.resource-card:has(.resource-card-link:hover),
.resource-card:has(.resource-card-link:focus-visible) {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 41, 94, 0.14);
}

/* A card can carry one full-cover link (the "Full TPRAF report" card, and
   the new Further Information cards) without disturbing its visible content
   — the link sits invisible over the whole card rather than wrapping it. */
.resource-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.resource-card-link:hover ~ h3 {
  text-decoration: underline;
}

/* Constrained by height rather than width: the set mixes square badges with
   a tall book shape, and equal heights is what makes them read as one set. */
.resource-icon {
  display: block;
  width: auto;
  height: 50px;
  margin-bottom: 0.9rem;
}

.resource-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-water);
  letter-spacing: -0.01em;
}

.resource-card p {
  margin: 0;
  color: var(--color-water-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* ---------- The simple form on the landing page ---------- */
/* Rendered by the same app.js from the same content data as diagram.html, and
   deliberately unframed: no background, border, radius or shadow, so the
   diagram sits on the page rather than in a panel embedded in it. The wrapper
   is a markup boundary and a selector hook, nothing more. No level tabs here,
   so this instance stays on the simple view. */
.landing-diagram .diagram-title { margin-top: 0; }

.landing-diagram-cta { margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; }

/* ---------- Explore band ---------- */
/* Bold use of Leaf — the guide's other full-bleed banner colour. */
.cta-band {
  background: var(--color-leaf);
  color: var(--color-water);
}

.cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  padding-top: clamp(2.5rem, 5vw, 4.25rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.25rem);
}

.cta-inner > div { flex: 1 1 24rem; }

.cta-band h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.cta-band p {
  max-width: 54ch;
  margin: 0;
  line-height: 1.55;
}

/* ---------- Buttons and links ---------- */
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  background: var(--color-leaf);
  color: var(--color-water);
  font-family: var(--font-brand);
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 41, 94, 0.28);
}

/* On the Leaf band the default Leaf button would disappear, so it inverts. */
.cta-button-inverse { background: var(--color-water); color: var(--color-white); }

.cta-arrow { transition: transform 0.15s ease; }
.cta-button:hover .cta-arrow { transform: translateX(4px); }

.ghost-link {
  color: var(--color-white);
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

/* Secondary in-flow link, used on both pages: the landing page's way through
   to the extended form, and the diagram page's per-view "next" link. */
.inline-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-water);
  font-weight: 700;
  text-decoration: none;
  padding-bottom: 0.15rem;
  border-bottom: 2px solid var(--color-leaf);
}

.inline-link:hover,
.inline-link:focus-visible { border-bottom-color: var(--color-sky); }

/* The diagram page's per-view "go deeper" link, below the diagram. Needs real
   room on both sides: with only a top margin the link's baseline sat directly
   on the footer's top border, reading as if it belonged to the footer. */
.view-next {
  max-width: 900px;
  margin: clamp(2.25rem, 5vw, 3rem) auto clamp(2.75rem, 6vw, 3.5rem);
  text-align: center;
}

.ghost-link:hover,
.ghost-link:focus-visible {
  color: var(--color-leaf);
  border-bottom-color: var(--color-leaf);
}

.cta-button:focus-visible,
.ghost-link:focus-visible {
  outline: 3px solid var(--color-sky);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .cta-button, .cta-arrow { transition: none; }
  .cta-button:hover { transform: none; }
  .cta-button:hover .cta-arrow { transform: none; }
}

/* ---------- Diagram page ---------- */
/* Horizontally scrollable strip rather than a wrapping block: the four level
   tabs stay on one row and are swiped (touch) or dragged (mouse, wired up in
   app.js) instead of dropping onto a second line. The scrollbar is hidden
   because a partially visible pill already signals there's more to the right,
   and a track under the tabs reads as heavy furniture. */
.diagram-toolbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--color-stone);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  cursor: grab;
  scrollbar-width: none;
}

.diagram-toolbar::-webkit-scrollbar { display: none; }

.diagram-toolbar.is-dragging { cursor: grabbing; }

.level-tab {
  flex: 0 0 auto;
  border: none;
  background: var(--color-white);
  color: var(--color-water);
  font-family: var(--font-brand);
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
}

.level-tab[aria-selected="true"] {
  background: var(--color-water);
  color: var(--color-white);
}

.level-tab[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.soon-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--color-stone);
  color: var(--color-water-faint);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

/* ---------- Diagram guide (legend + how-to-explore) ---------- */
.diagram-guide {
  max-width: 900px;
  margin: 0.75rem auto 0;
  border: 1px solid var(--color-sky-tint-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-white);
}

.diagram-guide-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: none;
  background: var(--color-sky-tint-bg);
  color: var(--color-water);
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.7rem 1.1rem;
  text-align: left; /* a plain heading now: the guide is always open */
}

.diagram-guide-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.diagram-guide-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-sky);
}

.diagram-guide-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.diagram-guide-toggle[aria-expanded="false"] .diagram-guide-chevron {
  transform: rotate(-90deg);
}

.diagram-guide-body {
  padding: 1rem 1.1rem 1.1rem;
  display: grid;
  gap: 0.85rem;
}

.diagram-guide[data-collapsed="true"] .diagram-guide-body {
  display: none;
}

.diagram-guide-hint {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-water);
}

.diagram-guide-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.diagram-guide-legend li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-water);
}

.diagram-guide-swatch {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  flex-shrink: 0;
}

.diagram-guide-swatch.swatch-navy { background: var(--color-water); }
.diagram-guide-swatch.swatch-sky { background: var(--color-sky); }
.diagram-guide-swatch.swatch-leaf { background: var(--color-leaf); }
.diagram-guide-swatch.swatch-io { background: var(--color-white); border: 2px solid var(--color-water); }

/* DSP's six process-stage title-bar colours (client feedback, 23 Sept: the
   guide only explained the navy/white box roles, never what the six stage
   colours meant) — same hexes as .diagram-heading.variant-c1..c6. */
.diagram-guide-swatch.swatch-c1 { background: #60c8f0; }
.diagram-guide-swatch.swatch-c2 { background: #f0a860; }
.diagram-guide-swatch.swatch-c3 { background: #f08878; }
.diagram-guide-swatch.swatch-c4 { background: #b0e0a0; }
.diagram-guide-swatch.swatch-c5 { background: #f8e0b0; }
.diagram-guide-swatch.swatch-c6 { background: #88b0c0; }

/* IMP's key is the source slide's own nine-entry key (domain, not process),
   so the legend reproduces those swatch colours rather than the brand four.
   The pale ones carry a hairline outline purely so they stay visible against
   the white guide card — the source's own key swatches do the same.
   Exception: "Tool" is #156082 here, not the source's black — the source's
   own key swatch is black but every actual Tool box (NTEM, Building
   Development Model, etc.), in both the source slide and our build, is this
   navy-teal. Matching our own boxes reads better than reproducing a swatch
   colour nothing on the diagram actually uses (23 Sept, on review). */
.diagram-guide-swatch.swatch-tool { background: #156082; }
.diagram-guide-swatch.swatch-social { background: #f2f2f2; border: 1px solid #c9c9c9; }
.diagram-guide-swatch.swatch-threshold { background: #f2cfee; border: 1px solid #d9a8d4; }
.diagram-guide-swatch.swatch-climate { background: #d9f2d0; border: 1px solid #a8d9a0; }
.diagram-guide-swatch.swatch-demand { background: #dceaf7; border: 1px solid #a8c8e0; }
.diagram-guide-swatch.swatch-supply { background: #fbe3d6; border: 1px solid #e0b8a0; }
.diagram-guide-swatch.swatch-freight { background: #fef3e2; border: 1px solid #e0cfa8; }
.diagram-guide-swatch.swatch-adapt { background: #f0ffff; border: 1px solid #a8dcdc; }
/* Added 23 Sept: the source's key never documented this box at all, even
   though it's the most visually prominent one on the diagram. */
.diagram-guide-swatch.swatch-passenger { background: #c00000; }

.diagram-guide-swatch.swatch-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-sky);
}

.diagram-guide-swatch.swatch-line {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-leaf);
}

.diagram-guide-status {
  margin: 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-stone);
  font-size: 0.8rem;
  color: var(--color-water-muted);
}

/* Scales with the viewport instead of sitting on the browser's fixed 32px h1
   default — long view titles wrapped to three lines on a phone at that size.
   Also makes the diagram page's title and the landing page's embedded copy
   match, since the embedded one is an h3 and would otherwise render at the
   much smaller h3 default. */
.diagram-title {
  text-align: center;
  color: var(--color-leaf);
  font-weight: 700;
  font-size: clamp(1.25rem, 3.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em; /* brand guide: -20 tracking for titles */
  text-wrap: balance;
  margin: 1.25rem 0 0.25rem;
}

.diagram-subtitle {
  text-align: center;
  color: var(--color-water-muted);
  margin: 0 0 1rem;
  font-size: clamp(0.85rem, 1.3vw, 0.95rem);
}

/* Floating zoom widget, docked in the diagram's bottom-right corner — laid
   out horizontally (a short wide pill) rather than stacked vertically, so
   it stays compact. It used to dock top-right, which worked while the
   stage showed the full source-PPTX canvas (empty margin up there), but
   once the stage got cropped to its actual content that corner had real
   boxes in it. Bottom-right stays clear in Simple and Extended (the last
   row of boxes on the right side always ends well above the diagram's
   cropped bottom edge — Outcome Assessment in Simple, Cost benefit/
   Portfolio/Outcome Assessment in Extended) and in DSP, so it floats there
   by default. */
.diagram-viewport {
  position: relative;
}

/* IMP is the exception: its layout is the source slide's own, and the slide
   puts its Hard Adaptation box in exactly the bottom-right corner this
   widget docks to — which covered the end of its label at every width below
   ~1440px. The source leaves its bottom-left corner empty (the hazard block
   stops short of it, and the adaptation loop's return line runs across at
   the top of it), so for this one view the widget docks there instead. The
   viewport carries data-view = the active view's key for this. */
.diagram-viewport[data-view="imp"] .zoom-controls {
  left: 1.5rem;
  right: auto;
}

.zoom-controls {
  position: absolute;
  bottom: 0.9rem;
  right: 1.5rem;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  background: var(--color-white);
  border: 1px solid var(--color-stone);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  padding: 5px;
}

.zoom-controls button {
  border: none;
  background: none;
  color: var(--color-water);
  font-family: var(--font-brand);
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
}

.zoom-controls button:hover:not(:disabled) {
  background: var(--color-stone);
}

.zoom-controls button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.zoom-controls #zoom-in,
.zoom-controls #zoom-out {
  width: 34px;
  height: 34px;
  font-size: 1.15rem;
}

.zoom-controls #zoom-reset {
  padding: 0 0.75rem;
  height: 34px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.zoom-level {
  min-width: 2.6rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-water-muted);
  font-weight: 700;
  user-select: none;
}

.zoom-divider {
  width: 1px;
  height: 20px;
  background: var(--color-stone);
  margin: 0 2px;
}

.diagram-stage-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
  touch-action: pan-x pan-y pinch-zoom; /* let touch scroll/swipe through freely */
  cursor: grab;
  position: relative;
}

.diagram-stage-wrap.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.diagram-stage-wrap.is-dragging .diagram-box,
.diagram-stage-wrap.is-dragging .diagram-label {
  pointer-events: none; /* avoid accidentally opening a popup mid-drag */
}

/* .zoom-sizer's width/height are set by JS to the diagram's actual
   post-zoom visual footprint, in plain (untransformed) pixels. A CSS
   transform doesn't change the space an element takes up in a scrolling
   ancestor's scrollWidth — only this wrapper's real, declared size does —
   so this is what makes the scrollbar/drag area match what you see.
   .diagram-stage's own width is also set by JS (app.js), responsively —
   same 900-1200px range the original static CSS used to give it — so a
   wide desktop screen still gets the bigger, more comfortable view;
   zoom is layered on top of that via transform, not instead of it. */
.zoom-sizer {
  margin: 0 auto;
}

/* Clips the stage down to just its content's own bounding box (computed
   per view in app.js from the actual boxes/labels/headings/containers),
   instead of showing the full source-PPTX slide canvas — most views only
   use the middle ~60-80% of that canvas vertically, so showing the whole
   thing left a large dead margin above/below the diagram. Width isn't
   cropped, only height. This element carries the zoom scale + the visible
   frame; .diagram-stage inside it stays the full, untouched 0-100% slide
   coordinate space every box/arrow/label position is still expressed in. */
.diagram-crop {
  position: relative;
  overflow: hidden;
  transform-origin: top left;
}

.diagram-stage {
  position: absolute;
  left: 0;
  width: 100%;
  /* height & top are set per view by app.js, as percentages of this
     element's own full (uncropped) 0-100 coordinate space — see
     computeContentBounds()/applyCropToStage() in app.js. */
  user-select: none; /* dragging the stage shouldn't select box text */
}

/* Switching level/view fades the new diagram in rather than snapping —
   reads as a deliberate transition instead of a jump-cut. */
.diagram-stage-wrap.is-entering {
  animation: stage-fade-in 0.3s ease;
}

@keyframes stage-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .diagram-stage-wrap.is-entering { animation: none; }
}

.scroll-hint {
  display: none;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-water-muted);
  margin: 0 0 0.5rem;
}

@media (max-width: 760px) {
  .scroll-hint { display: block; }

  /* Below 760px the diagram is too wide for the screen, so visitors have to
     scroll sideways to see all of it. That breaks the bottom-right float
     above: "bottom-right of the screen" stops lining up with "bottom-right
     of the diagram" and the widget can end up sitting on top of real boxes
     instead of the empty corner. Simplest fix — drop it back into normal
     flow just above the diagram, where it can never cover anything. */
  .zoom-controls {
    position: static;
    width: fit-content;
    margin: 0 0 0.6rem auto;
  }
}

.diagram-stage svg.arrows-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.diagram-stage svg.arrows-layer line,
.diagram-stage svg.arrows-layer polyline,
.diagram-stage svg.arrows-layer path {
  transition: stroke 0.15s ease;
}

/* Light-blue cluster background (e.g. behind "Transport Scenarios" or
   "Risk Mitigation"'s grouped boxes) — decorative only, sits behind the
   arrows and boxes it groups. */
.diagram-cluster-bg {
  position: absolute;
  background: var(--color-sky-tint-bg);
  border: 1px solid var(--color-sky-tint-border);
  border-radius: 14px;
  z-index: 0;
  pointer-events: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* DSP's clickable clusters (client feedback 23 Sept) — re-enable pointer
   events just for these (boxes sit above the background as separate
   elements, so this only ever catches a click on otherwise-empty cluster
   space) and add a hover/focus cue so it reads as a control. */
.diagram-cluster-bg.is-clickable {
  pointer-events: auto;
  cursor: pointer;
}

.diagram-cluster-bg.is-clickable:hover,
.diagram-cluster-bg.is-clickable:focus-visible {
  filter: brightness(0.97);
  outline: 2px solid var(--color-water-faint);
  outline-offset: -2px;
}

/* Cluster isn't part of the selected DSP/IMP process — loses its fill
   (matching the source PPTX's own DSP-only/IMP-only slides) rather than
   fading like a box, since it's just a grouping outline, not content. */
.diagram-cluster-bg.muted {
  background: transparent;
  border-color: var(--color-stone);
}

/* Dashed, unfilled sub-grouping — e.g. DSP's Risk Assessment/Asset
   Performance/Resilience Assessment trio, or the outer boundary around
   Detailed Option Assessment + Portfolio Optimisation together. */
.diagram-cluster-bg.style-dashed {
  background: none;
  border-style: dashed;
  border-color: var(--color-water-faint);
}

/* Each Level 2 cluster's body carries its own pale tint (matching its
   title bar), same as the source diagrams, instead of one uniform tint
   for every cluster. */
.diagram-cluster-bg.variant-navy { background: rgba(0, 41, 94, 0.07); border-color: rgba(0, 41, 94, 0.25); }
.diagram-cluster-bg.variant-sky { background: var(--color-sky-tint-bg); border-color: var(--color-sky-tint-border); }
.diagram-cluster-bg.variant-leaf { background: rgba(94, 207, 112, 0.12); border-color: rgba(94, 207, 112, 0.4); }
.diagram-cluster-bg.variant-stone { background: rgba(169, 177, 186, 0.18); border-color: var(--color-stone); }

/* DSP cluster backgrounds/headers — pastel fills taken from the source
   component map (level_2_slide_11.png), so each process stage keeps its
   own colour identity rather than being forced into the 4 brand colours. */
.diagram-cluster-bg.variant-c1 { background: #d8f0f8; border-color: #60c8f0; }
.diagram-cluster-bg.variant-c2 { background: #f8e0c8; border-color: #f0a860; }
.diagram-cluster-bg.variant-c3 { background: #f8d8d0; border-color: #f08878; }
.diagram-cluster-bg.variant-c4 { background: #e0f0e0; border-color: #b0e0a0; }
.diagram-cluster-bg.variant-c5 { background: #f8f0e0; border-color: #f8e0b0; }
.diagram-cluster-bg.variant-c6 { background: #c0d0d8; border-color: #88b0c0; }

/* These clusters are topped by their own coloured title bar, which now
   carries the rounded top corners — so the body underneath squares off at
   the top and only rounds at the bottom, joining the bar seamlessly. */
.diagram-cluster-bg.variant-c1,
.diagram-cluster-bg.variant-c2,
.diagram-cluster-bg.variant-c3,
.diagram-cluster-bg.variant-c4,
.diagram-cluster-bg.variant-c5,
.diagram-cluster-bg.variant-c6 {
  border-radius: calc(var(--fs, 12px) * 0.55);
  border-width: 0.5px;
}

/* IMP cluster backgrounds — the fills from level_2_slide_12.png itself.
   Unlike the DSP clusters these have no outline and no title bar: the slide
   draws a plain tinted block and writes the domain's name straight inside
   it, so the domain name is a transparent heading rather than a colour bar.
   A few of the slide's blocks are L-shaped (the demand spine runs on down
   past the wide block; the climate block widens out below its first box),
   which is why some are split into two overlapping divs — same fill, no
   border, so the join is invisible. */
.diagram-cluster-bg.variant-imp-demand { background: #dceaf7; border: none; }
.diagram-cluster-bg.variant-imp-supply { background: #fbe3d6; border: none; }
.diagram-cluster-bg.variant-imp-freight { background: #fef3e2; border: none; }
.diagram-cluster-bg.variant-imp-climate { background: #d9f2d0; border: none; }
.diagram-cluster-bg.variant-imp-threshold { background: #f2cfee; border: none; }
.diagram-cluster-bg.variant-imp-social { background: #f2f2f2; border: none; }
.diagram-cluster-bg.variant-imp-adapt { background: #f0ffff; border: none; }

/* The adaptation block on the slide is a ring, not a solid block: an inner
   rectangle is left white. Painted after the block above at the same
   stacking level, so it reads as a cut-out. */
.diagram-cluster-bg.variant-imp-cover { background: var(--color-white); border: none; border-radius: 0; }

.diagram-box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.25em 0.6em;
  border-radius: calc(var(--fs, 12px) * 0.8);
  border: 2px solid var(--color-water);
  background: var(--color-white);
  color: var(--color-water);
  font-weight: 400;
  /* --fs is set by app.js on .diagram-crop: one shared text size for every
     diagram (about 1.27% of the diagram's natural width, as in the Figma
     design), so text and boxes grow and shrink together at any screen size. */
  font-size: var(--fs, 0.8rem);
  line-height: 1.3;
  white-space: pre-line; /* honours the \n we set for source-authored manual
                             line breaks (e.g. "Adaptation/\nInterventions"),
                             while still auto-wrapping normal long labels */
  cursor: pointer;
  transform: rotate(var(--box-rotate, 0deg));
  transition: transform 0.12s ease, filter 0.12s ease;
  z-index: 2;
  /* No overflow:hidden here — it clipped the corner dot/ribbon (::before/
     ::after, positioned partly outside the box) into quarter-circles.
     Text containment is handled by the font-size/line-height/box-height
     tuning above instead, verified separately to never overflow. */
}

/* Extended's boxes are smaller and more tightly packed than Simple's, so
   they get a smaller font/padding budget. Applied by app.js to any box
   below a size threshold, not tied to a specific view. */
.diagram-box.compact {
  padding: 0.2em 0.4em;
  font-size: calc(var(--fs, 0.8rem) * 0.88);
  line-height: 1.2;
}

.diagram-box:hover,
.diagram-box:focus-visible {
  filter: brightness(1.12);
  transform: rotate(var(--box-rotate, 0deg)) translateY(-2px);
}

/* "Just clicked" cue — a glow pulse on whichever box a visitor clicks, so the
   diagram shows where they are without suggesting any one box is the fixed
   starting point (client feedback, 22 Sept: the framework should read as
   start-anywhere, not a fixed sequence — this replaces the old single
   pre-marked "Start" ribbon box). */
.diagram-box.is-clicked {
  animation: start-box-glow 1.6s ease-in-out 3;
}

@keyframes start-box-glow {
  0%, 100% { box-shadow: var(--shadow-soft); }
  50% { box-shadow: 0 0 0 6px rgba(94, 207, 112, 0.35), var(--shadow-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .diagram-box.is-clicked { animation: none; }
}

/* Box color groups — matches the source PPTX: navy for the
   scenario/hazard boxes, mid-blue for evaluation steps, green for the
   highlighted Adaptation/Interventions decision box. */
.diagram-box.variant-navy {
  background: var(--color-water);
  border-color: var(--color-water);
  color: var(--color-white);
}

/* Figma look: the three brand-colour boxes are flat fills with no outline. */
.diagram-box.variant-navy,
.diagram-box.variant-sky,
.diagram-box.variant-leaf {
  border-width: 0;
}

.diagram-box.variant-sky {
  background: var(--color-sky);
  border-color: var(--color-sky);
  color: var(--color-white);
}

/* Source diagram's pale-blue scenario input boxes (Transport/Climate
   Scenarios) — lighter than brand sky, matching level_2_slide_11.png. */
.diagram-box.variant-sky-pale {
  background: #b8e0f0;
  border-color: #60c8f0;
  color: var(--color-water);
}

/* Problem Framing's Requirements/Context/Constraints inputs — peach fill
   from the source component map. */
.diagram-box.variant-c2-input {
  background: #f3b08f;
  border-color: #d97f52;
  color: var(--color-water);
}

.diagram-box.variant-leaf {
  background: var(--color-leaf);
  border-color: var(--color-leaf);
  color: var(--color-water);
}

.diagram-box.variant-stone {
  background: var(--color-stone);
  border-color: var(--color-water-faint);
  color: var(--color-water);
}

/* DSP: steps that aren't DSP Modules take their own column's colour (the
   matching .diagram-heading.variant-c1..c6 title-bar hex), so only the white
   module boxes stand out. Navy text on every one, for contrast on the paler
   shades. Client feedback, Nov 2026. */
.diagram-box.variant-col-c1,
.diagram-box.variant-col-c2,
.diagram-box.variant-col-c3,
.diagram-box.variant-col-c4,
.diagram-box.variant-col-c5,
.diagram-box.variant-col-c6,
.diagram-box.variant-leaf-pale {
  border-width: 0;
  color: var(--color-water);
}
.diagram-box.variant-col-c1 { background: #60c8f0; }
.diagram-box.variant-col-c2 { background: #f0a860; }
.diagram-box.variant-col-c3 { background: #f08878; }
.diagram-box.variant-col-c4 { background: #b0e0a0; }
.diagram-box.variant-col-c5 { background: #f8e0b0; }
.diagram-box.variant-col-c6 { background: #88b0c0; }
/* The funding/procurement/governance cases under DSP's cross-cutting (green)
   Risk Assessment box sit outside every column — a pale tint of its green. */
.diagram-box.variant-leaf-pale { background: #d3f3d9; }

/* IMP box colours — the source component map's own per-domain palette
   (level_2_slide_12.png), reproduced exactly rather than re-tinted into
   brand colours, so the diagram reads as the slide does. Plain white (the
   default .diagram-box styling) is the slide's "Input / Output" fill and
   needs no variant. */
.diagram-box.variant-tool { background: #156082; border-color: #0d4159; color: var(--color-white); }
.diagram-box.variant-model-green { background: #196b24; border-color: #0f4717; color: var(--color-white); }
.diagram-box.variant-threshold-magenta { background: #a02b93; border-color: #71206a; color: var(--color-white); }
.diagram-box.variant-passenger-red { background: #c00000; border-color: #8b0000; color: var(--color-white); }
.diagram-box.variant-multi-orange { background: #e97132; border-color: #b5541f; color: var(--color-white); }
.diagram-box.variant-freight-sand { background: #f0ce78; border-color: #c9a445; color: #3d2f08; }
.diagram-box.variant-adapt-teal { background: #007d7a; border-color: #005c5a; color: var(--color-white); }
.diagram-box.variant-grey-box { background: #bfbfbf; border-color: #6f6f6f; color: #333333; }
.diagram-box.variant-cyan-box { background: #cdffff; border-color: #156082; color: var(--color-water); }

/* DSP's "Selection/Screened list" decision point — a diamond in the
   source diagram, via clip-path rather than rotation so the label stays
   upright and readable inside the point. */
.diagram-box.shape-diamond {
  /* A diamond with rounded points, as in the Figma design. */
  clip-path: polygon(35.0% 15.0%, 38.8% 11.7%, 42.5% 9.4%, 46.2% 8.0%, 50.0% 7.5%, 53.8% 8.0%, 57.5% 9.4%, 61.2% 11.7%, 65.0% 15.0%, 85.0% 35.0%, 88.3% 38.8%, 90.6% 42.5%, 92.0% 46.2%, 92.5% 50.0%, 92.0% 53.8%, 90.6% 57.5%, 88.3% 61.2%, 85.0% 65.0%, 65.0% 85.0%, 61.2% 88.3%, 57.5% 90.6%, 53.8% 92.0%, 50.0% 92.5%, 46.2% 92.0%, 42.5% 90.6%, 38.8% 88.3%, 35.0% 85.0%, 15.0% 65.0%, 11.7% 61.2%, 9.4% 57.5%, 8.0% 53.8%, 7.5% 50.0%, 8.0% 46.2%, 9.4% 42.5%, 11.7% 38.8%, 15.0% 35.0%);
  padding: 0.3em 0.7em;
  font-size: calc(var(--fs, 0.8rem) * 0.75);
  line-height: 1.1;
}

/* Detailed Option Assessment's criteria boxes emanate from the "Multi
   Criteria / Cost Benefit Analysis" strip on their left — squared left
   corners so they read as attached to it rather than free-floating. */
.diagram-box.attach-left {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* The strip itself is squared off too, so its right wall is a straight
   edge the criteria boxes butt up against. */
.diagram-box.square-corners {
  border-radius: 0;
}

/* Vertical text strip (the "Multi Criteria / Cost Benefit Analysis" label).
   Rendered as a genuinely upright narrow box with vertical text rather than
   a rotated wide box — rotation would stretch the strip vertically, because
   the stage's x/y unit scales differ (see pctX in app.js). */
.diagram-box.vertical-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 0.2rem;
  letter-spacing: 0.02em;
}
.diagram-box.vertical-text:hover,
.diagram-box.vertical-text:focus-visible {
  transform: rotate(180deg) translateY(-2px);
}

/* "Option Ideation (Long List)" / "Interventions" — the source shows these
   as a stack of overlapping cards, signalling "more than one item" rather
   than a single artefact. Approximated with two offset shadow copies. */
.diagram-box.is-stacked {
  box-shadow: 3px 3px 0 -1px var(--color-white), 3px 3px 0 0 var(--color-water),
    6px 6px 0 -1px var(--color-white), 6px 6px 0 0 var(--color-water), var(--shadow-soft);
}

.diagram-box.missing-content::after {
  content: "";
  position: absolute;
  top: -6px;
  right: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-sky);
  border: 2px solid var(--color-white);
  z-index: 3;
}

/* Soft highlight halo behind a box (e.g. Adaptation/Interventions) */
.diagram-box-halo {
  position: absolute;
  background: rgba(0, 150, 255, 0.15);
  border-radius: calc(var(--box-border-radius) + 8px);
  z-index: 1;
  pointer-events: none;
}

/* Boxes outside the currently-selected DSP/IMP process — faded so the
   relevant chain stands out, but still legible and still clickable. */
.diagram-box.dimmed {
  opacity: 0.3;
}

/* Section titles (e.g. "Transport Scenarios") sitting above a cluster of
   boxes — plain text, not a button, since the PPTX source has no content
   behind these beyond the heading itself. */
.diagram-heading {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-water);
  font-weight: 700;
  font-size: calc(var(--fs, 0.8rem) * 0.95);
  z-index: 2;
  pointer-events: none;
}

/* DSP's clickable cluster titles (client feedback 23 Sept) — a real button,
   so it needs the click re-enabled and its own hover/focus cue, unlike the
   plain non-interactive headings on every other view. */
.diagram-heading.is-clickable {
  pointer-events: auto;
  cursor: pointer;
  border: none;
  padding: 0;
}

.diagram-heading.is-clickable:hover,
.diagram-heading.is-clickable:focus-visible {
  filter: brightness(1.08);
  outline: 2px solid var(--color-white);
  outline-offset: -3px;
}

/* Level 2's process-stage headings render as a solid colour bar (matching
   the source diagrams, where each stage has its own coloured title bar)
   rather than plain text — same 4 brand colours as the box legend. */
.diagram-heading.variant-navy,
.diagram-heading.variant-sky,
.diagram-heading.variant-leaf,
.diagram-heading.variant-stone,
.diagram-heading.variant-c1,
.diagram-heading.variant-c2,
.diagram-heading.variant-c3,
.diagram-heading.variant-c4,
.diagram-heading.variant-c5,
.diagram-heading.variant-c6 {
  border-radius: 8px 8px 0 0;
  /* Title bars are one line tall, so the text must never wrap: em padding and
     a slightly smaller size keep the longest titles ("Problem Framing and
     Scope") inside the bar at every canvas size, phone included. */
  padding: 0.2em 0.4em;
  font-size: calc(var(--fs, 0.8rem) * 0.86);
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
}

.diagram-heading.variant-navy { background: var(--color-water); color: var(--color-white); }
.diagram-heading.variant-sky { background: var(--color-sky); color: var(--color-white); }
.diagram-heading.variant-leaf { background: var(--color-leaf); color: var(--color-water); }
.diagram-heading.variant-stone { background: var(--color-stone); color: var(--color-water); }
.diagram-heading.variant-c1 { background: #60c8f0; color: var(--color-white); }
.diagram-heading.variant-c2 { background: #f0a860; color: var(--color-water); }
.diagram-heading.variant-c3 { background: #f08878; color: var(--color-white); }
.diagram-heading.variant-c4 { background: #b0e0a0; color: var(--color-water); }
.diagram-heading.variant-c5 { background: #f8e0b0; color: var(--color-water); }
.diagram-heading.variant-c6 { background: #88b0c0; color: var(--color-white); }

/* The source slide's KEY panel, drawn on the canvas. It sits in the one
   block the rest of the diagram leaves empty, and it is the same
   non-clickable heading element the cluster titles use — the key is a
   reference, not a step, so it never opens a popup. */
.diagram-heading.variant-key-title {
  font-size: calc(var(--fs, 0.8rem) * 1.6);
  line-height: 1.1;
  letter-spacing: 0.03em;
}

.diagram-heading.variant-key-tool,
.diagram-heading.variant-key-io,
.diagram-heading.variant-key-social,
.diagram-heading.variant-key-threshold,
.diagram-heading.variant-key-climate,
.diagram-heading.variant-key-demand,
.diagram-heading.variant-key-supply,
.diagram-heading.variant-key-freight,
.diagram-heading.variant-key-adapt,
.diagram-heading.variant-key-passenger {
  border-radius: 6px;
  padding: 0.15em 0.3em;
  font-size: calc(var(--fs, 0.8rem) * 0.95);
  line-height: 1.12;
}

/* "Tool" is #156082 here, not the source's black — see the matching note by
   .diagram-guide-swatch.swatch-tool in the legend rules above. */
.diagram-heading.variant-key-tool { background: #156082; color: var(--color-white); }
.diagram-heading.variant-key-io { background: var(--color-white); color: #333333; border: 1px solid #156082; }

/* DSP's on-diagram key: one swatch, drawn like the white DSP Module boxes. */
.diagram-heading.variant-key-dsp-module {
  border-radius: 6px;
  padding: 0.15em 0.3em;
  font-size: calc(var(--fs, 0.8rem) * 0.95);
  font-weight: 600;
  line-height: 1.12;
  background: var(--color-white);
  color: var(--color-water);
  border: 1.5px solid var(--color-water);
}
.diagram-heading.variant-key-social { background: #f2f2f2; }
.diagram-heading.variant-key-threshold { background: #f2cfee; }
.diagram-heading.variant-key-climate { background: #d9f2d0; }
.diagram-heading.variant-key-demand { background: #dceaf7; }
.diagram-heading.variant-key-supply { background: #fbe3d6; }
.diagram-heading.variant-key-freight { background: #fef3e2; }
.diagram-heading.variant-key-adapt { background: #f0ffff; }
/* Added 23 Sept: undocumented in the source's own key, despite being the
   most visually prominent box on the diagram. */
.diagram-heading.variant-key-passenger { background: #c00000; color: var(--color-white); }

/* Plain text labels (Risk Mitigation / Feedback loop) — no pill/background,
   matching the source PPTX's plain bold caption style. */
.diagram-label {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: none;
  border: none;
  color: var(--color-water);
  font-weight: 700;
  font-size: calc(var(--fs, 0.8rem) * 0.95);
  cursor: pointer;
  z-index: 2;
}

.diagram-label:hover,
.diagram-label:focus-visible {
  text-decoration: underline;
}

/* ---------- DSP / IMP process toggle ---------- */
.process-toggle {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem 0 0; /* breathing room from the guide above; stays flush
                        with the diagram below (see process-panel move) */
}

.process-toggle[hidden] { display: none; }

.process-toggle button {
  border: 2px solid var(--color-water);
  background: var(--color-white);
  color: var(--color-water);
  font-family: var(--font-brand);
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
}

.process-toggle button[aria-pressed="true"] {
  background: var(--color-water);
  color: var(--color-white);
}

.process-panel {
  max-width: 700px;
  margin: 1.5rem auto 1.25rem;
  padding: 1rem 1.5rem;
  background: var(--color-sky-tint-bg);
  border: 1px solid var(--color-sky-tint-border);
  border-left: 4px solid var(--color-leaf);
  border-radius: 8px;
}

.process-panel[hidden] { display: none; }

.process-panel h2 {
  margin: 0 0 0.5rem;
  color: var(--color-water);
  font-size: 1.05rem;
}

.process-panel p {
  margin: 0;
  color: var(--color-water);
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-line;
}

.process-panel-explore {
  display: inline-block;
  margin-top: 0.85rem;
  font-weight: 700;
  color: var(--color-sky);
  text-decoration: none;
}

.process-panel-explore:hover { text-decoration: underline; }

.process-panel-explore[hidden] { display: none; }

/* ---------- Walkthrough / "play" ---------- */
/* A control strip, not a loose row of buttons: it takes the same centred 900px
   column as the guide card above it, so the playback controls read as part of
   the page's structure. Tinted like the level toolbar at the top of the page —
   it's diagram furniture, not content. Sits in flow above the diagram so
   starting or stopping it can never move the diagram itself. */
.diagram-tour {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  width: 100%;
  max-width: 900px;
  margin: 1.25rem auto 1rem;
  padding: 0.55rem 0.7rem;
  background: var(--color-stone);
  border-radius: 12px;
}

.diagram-tour[hidden] { display: none; }

.tour-play {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: none;
  background: var(--color-water);
  color: var(--color-white);
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.tour-play:hover { filter: brightness(1.15); }

/* Play triangle, swapping to a pause bar-pair while it's running — a CSS
   shape rather than an icon so it inherits the button's own colour. */
.tour-play-icon {
  width: 0;
  height: 0;
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.tour-play.is-pause .tour-play-icon {
  width: 9px;
  height: 11px;
  border: none;
  background: linear-gradient(to right, currentColor 0 34%, transparent 34% 66%, currentColor 66% 100%);
}

/* The secondary actions keep to their own right-hand group. The caption's
   length changes with every step, so without this they would shuffle sideways
   each time — and on a phone the group stays on the button row while the
   caption drops below it. */
.tour-actions {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-left: auto;
}

/* Styled to match the zoom widget's secondary buttons, so the two sets of
   diagram controls look like the same family. */
.tour-btn {
  flex: 0 0 auto;
  border: none;
  background: none;
  color: var(--color-water);
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  height: 30px;
  padding: 0 0.75rem;
  border-radius: 999px;
  cursor: pointer;
}

.tour-btn:hover { background: var(--color-white); }
.tour-btn[hidden] { display: none; }

.tour-caption {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--color-water-muted);
}

.tour-caption.is-active {
  color: var(--color-water);
  font-weight: 600;
}

@media (max-width: 760px) {
  /* Full-width, one above the other, on every phone — deliberately, not as
     a side-effect of running out of room. The two buttons' natural widths
     (~164px + ~147px + gap) happen to just fit in a 375px-wide standalone
     diagram page, but not once the same bar sits inside the home page's
     narrower, padded column — so without this rule the exact same strip
     read as a tidy row on one page and an accidental, uneven wrap on the
     other. Stacking full-width on both removes that inconsistency and
     gives each button a bigger, centred tap target besides. */
  .tour-play {
    flex: 1 1 100%;
    justify-content: center;
  }

  /* Its own line on a phone — a step name squeezed into a narrow column next
     to the buttons is worse than a second row. Two lines are always reserved
     so a longer step name can't change the strip's height mid-walkthrough and
     nudge the diagram down with it. */
  .tour-caption {
    flex: 1 0 100%;
    order: 3;
    min-height: calc(2 * 1.4em);
  }
}

/* While it runs, the step being described and the ones already covered stay
   at full strength and everything else recedes: the point is to follow the
   route, not to read a wall of boxes at once. */
.diagram-stage.tour-running .diagram-box {
  opacity: 0.3;
  transition: opacity 0.25s ease;
}

.diagram-stage.tour-running .diagram-box.tour-visited {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--color-leaf), var(--shadow-soft);
}

.diagram-stage.tour-running .diagram-box.tour-focus {
  opacity: 1;
  z-index: 5;
  animation: tour-box-glow 1.1s ease-in-out infinite;
}

@keyframes tour-box-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(94, 207, 112, 0.7), 0 0 10px 1px rgba(94, 207, 112, 0.5), var(--shadow-soft); }
  50% { box-shadow: 0 0 0 9px rgba(94, 207, 112, 0), 0 0 24px 7px rgba(94, 207, 112, 0.7), var(--shadow-soft); }
}

/* Arrows start faded and are lit by the leg that walks them, so by the end
   the whole route reads as one glowing line through the diagram. That lit
   state deliberately outlives the run itself (see .tour-flow below), which
   is what makes the finished walkthrough legible as a route. */
.diagram-stage.tour-running .arrows-layer > line,
.diagram-stage.tour-running .arrows-layer > polyline,
.diagram-stage.tour-running .arrows-layer > path {
  opacity: 0.22;
  transition: opacity 0.2s ease, stroke 0.2s ease;
}

.diagram-stage.tour-running .arrows-layer > .tour-flow,
.diagram-stage .arrows-layer > .tour-flow {
  opacity: 1;
  stroke: var(--color-leaf);
  filter: drop-shadow(0 0 2px rgba(94, 207, 112, 0.9));
}

/* The travelling glow. A div rather than an SVG circle on purpose: the SVG
   layer is stretched non-uniformly to fill the stage, which would squash a
   circle into an oval — this keeps its round shape at any zoom. */
.tour-pulse {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px; /* centred on the point it's given */
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #cdf3d4 40%, var(--color-leaf) 75%);
  z-index: 6;
  pointer-events: none;
  animation: tour-pulse-beat 0.7s ease-in-out infinite;
}

.tour-pulse[hidden] { display: none; }

@keyframes tour-pulse-beat {
  0%, 100% { box-shadow: 0 0 0 3px rgba(94, 207, 112, 0.35), 0 0 14px 4px rgba(94, 207, 112, 0.7); }
  50% { box-shadow: 0 0 0 9px rgba(94, 207, 112, 0.12), 0 0 24px 10px rgba(94, 207, 112, 0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .tour-pulse { animation: none; }
  .diagram-stage.tour-running .diagram-box.tour-focus {
    animation: none;
    box-shadow: 0 0 0 3px rgba(94, 207, 112, 0.6), var(--shadow-soft);
  }
}

/* ---------- Popup modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 41, 94, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 50;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.modal-backdrop[hidden] { display: none; }

.modal-backdrop.is-open { opacity: 1; }

.modal-box {
  background: var(--color-white);
  border-radius: 14px;
  max-width: 520px;
  width: 100%;
  padding: 1.75rem;
  position: relative;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.16s ease;
}

.modal-backdrop.is-open .modal-box {
  transform: translateY(0) scale(1);
}

.modal-box h2 {
  color: var(--color-water);
  margin-top: 0;
}

.modal-box p { line-height: 1.55; color: var(--color-water); }

.modal-box .placeholder-note {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.3rem 0.6rem;
  background: var(--color-stone);
  color: var(--color-water);
  border-radius: 6px;
  font-size: 0.8rem;
}

.modal-box .placeholder-note[hidden] { display: none; }

.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  border: none;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-water);
}

.modal-handbook-link {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 600;
}

.modal-handbook-link[hidden] { display: none; }

/* ---------- Guided tour (Level 3) ---------- */
/* A product-style onboarding tour: the page dims, a spotlight is cut out around
   the box being explained, and a card is placed beside that box with an arrow
   pointing at it. Positions are set by app.js. Nothing here exists on a view
   without a tour: the launcher strip, spotlight and card all stay hidden. */

.lesson-launch[hidden] { display: none; }

/* The spotlight: a box the size of the target whose enormous shadow dims the
   rest of the page. Clicks pass straight through it, so the diagram stays
   usable (clicking another box jumps the tour to it). */
.tour-spot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 45;
  border-radius: 12px;
  box-shadow: 0 0 0 3px rgba(94, 207, 112, 0.95), 0 0 0 200vmax rgba(0, 41, 94, 0.62);
  pointer-events: none;
  will-change: transform, width, height;
}

.tour-spot[hidden] { display: none; }

/* No target (the welcome and closing cards): dim everything, no ring. */
.tour-spot.is-empty { box-shadow: 0 0 0 200vmax rgba(0, 41, 94, 0.62); }

/* The card. Fixed and moved with a transform so it can follow the box. */
.lesson-card {
  --arrow-offset: 28px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 46;
  display: flex;
  flex-direction: column;
  width: min(390px, calc(100vw - 1.5rem));
  max-height: calc(100vh - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  padding: 1rem 1.15rem 0;
  border-radius: 16px;
  background: var(--color-white);
  color: var(--color-water);
  box-shadow: 0 18px 50px rgba(0, 41, 94, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  will-change: transform;
}

.lesson-card[hidden] { display: none; }
.lesson-card.is-ready { opacity: 1; pointer-events: auto; }

/* The arrow: a rotated square on the edge facing the box. */
.lesson-card::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--color-white);
  transform: rotate(45deg);
  display: none;
}

.lesson-card[data-placement="right"]::before { display: block; left: -8px; top: calc(var(--arrow-offset) - 8px); }
.lesson-card[data-placement="left"]::before { display: block; right: -8px; top: calc(var(--arrow-offset) - 8px); }
.lesson-card[data-placement="bottom"]::before { display: block; top: -8px; left: calc(var(--arrow-offset) - 8px); }
.lesson-card[data-placement="top"]::before { display: block; bottom: -8px; left: calc(var(--arrow-offset) - 8px); }

/* One segment per step: covered ones green, the current one navy. */
.lesson-progress {
  display: flex;
  gap: 3px;
  margin: 0 2.2rem 0.6rem 0;
}

.lesson-progress-seg {
  flex: 1 1 0;
  height: 14px;
  padding: 5px 0;
  border: none;
  background: var(--color-stone);
  background-clip: content-box;
  border-radius: 4px;
  cursor: pointer;
}

.lesson-progress-seg.is-done { background-color: var(--color-leaf); }
.lesson-progress-seg.is-current { background-color: var(--color-water); }
.lesson-progress-seg:hover { filter: brightness(0.92); }

/* Skip the tour. */
.lesson-close {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-stone);
  cursor: pointer;
}

.lesson-close::before,
.lesson-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.85rem;
  height: 2px;
  margin: -1px 0 0 -0.425rem;
  background: var(--color-water);
  transform: rotate(45deg);
}

.lesson-close::after { transform: rotate(-45deg); }
.lesson-close:hover { background: #d3d3d3; }

/* The text scrolls on its own if a step is taller than the screen; the arrow
   and the Back/Next bar stay put. */
.lesson-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 0.4rem;
}

.lesson-stage {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 0.45rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: var(--color-stone);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.lesson-stage[data-stage="climate"] { background: rgba(94, 207, 112, 0.28); }
.lesson-stage[data-stage="transport"] { background: var(--color-water); color: var(--color-white); }
.lesson-stage[data-stage="impact"] { background: var(--color-stone); }

.lesson-title {
  margin: 0 0 0.7rem;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--color-water);
}

.lesson-figure { margin: 0 0 0.85rem; }
.lesson-figure[hidden] { display: none; }

.lesson-figure-grid { display: grid; gap: 6px; }
.lesson-figure-grid.is-pair { grid-template-columns: 1fr 1fr; }
.lesson-figure-item { margin: 0; }

.lesson-figure-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--color-stone);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-white);
  cursor: zoom-in;
}

.lesson-figure-btn img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 12rem;
  object-fit: contain;
}

.lesson-figure-item figcaption {
  margin-top: 0.25rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-water-muted);
}

.lesson-caption {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-water-muted);
}

.lesson-text {
  margin: 0 0 0.75rem;
  font-size: 0.96rem;
  line-height: 1.55;
}

.lesson-example {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.8rem;
  border-left: 4px solid var(--color-leaf);
  border-radius: 0 8px 8px 0;
  background: rgba(94, 207, 112, 0.14);
  font-size: 0.9rem;
  line-height: 1.5;
}

.lesson-example[hidden],
.lesson-credit[hidden],
.lesson-card .placeholder-note[hidden] { display: none; }

.lesson-credit {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  color: var(--color-water-muted);
}

.lesson-card .placeholder-note {
  align-self: flex-start;
  margin: 0 0 0.75rem;
  padding: 0.3rem 0.6rem;
  background: var(--color-stone);
  border-radius: 6px;
  font-size: 0.8rem;
}

/* Welcome card: the three stages, in the same colours as the step tags. */
.lesson-stage-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
  counter-reset: stage;
}

.lesson-stage-list li {
  counter-increment: stage;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--color-stone);
  font-size: 0.78rem;
  font-weight: 700;
}

.lesson-stage-list li::before { content: counter(stage) ". "; }
.lesson-stage-list li[data-stage="climate"] { background: rgba(94, 207, 112, 0.28); }
.lesson-stage-list li[data-stage="transport"] { background: var(--color-water); color: var(--color-white); }

.lesson-extra { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }

.lesson-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--color-sky);
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}

.lesson-handbook { margin-top: 0.25rem; align-self: flex-start; }

.lesson-nav {
  display: flex;
  gap: 0.6rem;
  margin: 0 -1.15rem;
  padding: 0.7rem 1.15rem 0.9rem;
  border-top: 1px solid var(--color-stone);
  border-radius: 0 0 16px 16px;
  background: var(--color-white);
}

.lesson-btn {
  flex: 0 0 auto;
  border: none;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
}

.lesson-btn[hidden] { display: none; }

.lesson-btn-back {
  background: var(--color-stone);
  color: var(--color-water);
}

.lesson-btn-next {
  flex: 1 1 auto;
  background: var(--color-water);
  color: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.lesson-btn-next.has-arrow::after { content: " \2192"; }
.lesson-btn:hover { filter: brightness(1.12); }
.lesson-btn:focus-visible,
.lesson-close:focus-visible,
.lesson-progress-seg:focus-visible,
.lesson-figure-btn:focus-visible {
  outline: 3px solid var(--color-sky);
  outline-offset: 2px;
}

/* While the tour runs, the boxes it hasn't reached yet are only softened, not
   hidden: the page is already dimmed, so fading them further would make the
   diagram unreadable. Covered boxes keep their green ring. */
.diagram-stage.is-lesson.tour-running .diagram-box { opacity: 0.85; }
.diagram-stage.is-lesson.tour-running .diagram-box.tour-visited,
.diagram-stage.is-lesson.tour-running .diagram-box.tour-focus { opacity: 1; }

/* Full-size picture. */
.lesson-lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 41, 94, 0.82);
}

.lesson-lightbox[hidden] { display: none; }

.lesson-lightbox img {
  max-width: 100%;
  max-height: 100%;
  background: var(--color-white);
  border-radius: 8px;
}

.lesson-lightbox-close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-water);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .lesson-card { transition: none; }
}

/* On a phone the card shares a short screen with the diagram, so pictures are
   kept shorter to leave room for the explanation under them. */
@media (max-width: 760px) {
  .lesson-figure-btn img { max-height: 8.5rem; }
  .lesson-title { font-size: 1.15rem; margin-bottom: 0.5rem; }
}

/* ---------- DSP-only / IMP-only explanation: the peek sheet ---------- */
/* Only the diagram page's panel carries .process-sheet; the home page's copy
   keeps the plain in-flow styling above (it is never shown there). */
.process-panel.process-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  width: min(720px, calc(100vw - 1.5rem));
  max-width: none;
  max-height: 70vh;
  max-height: 70dvh;
  margin: 0 auto;
  padding: 0.95rem 1.2rem 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Opaque, so the diagram doesn't show through: the brand's blue tint laid
     over white. */
  background: linear-gradient(var(--color-sky-tint-bg), var(--color-sky-tint-bg)), var(--color-white);
  border: 1px solid var(--color-sky-tint-border);
  border-top: 4px solid var(--color-leaf);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 41, 94, 0.3);
  animation: sheet-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}

.process-panel.process-sheet[hidden] { display: none; }

/* A colour cue that matches the diagram's legend: DSP steps are the sky-blue
   boxes, IMP steps the navy ones. */
.process-sheet[data-process="dsp"] { border-top-color: var(--color-sky); }
.process-sheet[data-process="imp"] { border-top-color: var(--color-water); }

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

.process-sheet h2 { padding-right: 2.4rem; } /* clear of the close button */

/* Peek: the first sentence or two. Opened: everything. */
.process-sheet:not(.is-expanded) #process-panel-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.process-sheet-more { display: none; }

.process-sheet.is-expanded .process-sheet-more {
  display: block;
  margin-top: 0.65rem;
  color: var(--color-water);
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-line;
}

.process-sheet-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.1rem;
  margin-top: 0.7rem;
}

.process-sheet-actions .process-panel-explore { margin-top: 0; }

.process-sheet-toggle {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--color-water);
  text-decoration: underline;
  cursor: pointer;
}

.process-sheet-toggle[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .process-panel.process-sheet { animation: none; }
}

/* ---------- Guided tour on every diagram ---------- */
/* The interactive tour's button sits beside "Play walkthrough" in the same
   strip. Brand green with navy text, so it reads as the main way in and is not
   mistaken for the hands-off walkthrough next to it. */
.tour-guide {
  background: var(--color-leaf);
  color: var(--color-water);
}

.tour-guide[hidden] { display: none; }

/* A long tour (DSP has 35 steps) shows one smooth progress bar: a segment per
   step would be too small to see or press. */
.lesson-progress.is-continuous {
  display: block;
  height: 6px;
  margin: 0.4rem 2.2rem 1rem 0;
  border-radius: 3px;
  background: var(--color-stone);
  overflow: hidden;
}

.lesson-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-leaf);
  transition: width 0.3s ease;
}

/* Step tags coloured by the process a box belongs to, matching the diagrams'
   legend: DSP steps are the sky-blue boxes, IMP steps the navy ones. */
.lesson-stage[data-stage="dsp"] { background: rgba(0, 150, 255, 0.2); }
.lesson-stage[data-stage="imp"] { background: var(--color-water); color: var(--color-white); }
.lesson-stage[data-stage="both"] { background: rgba(94, 207, 112, 0.35); }

/* ==========================================================================
   Homepage — Figma design (24 Sept mock-up)
   Everything below is scoped to body.home so diagram.html keeps its own
   header, footer and spacing untouched. It sits last in the file so it wins
   over the earlier, pre-design homepage rules without editing them.
   The mock-up's off-white (#f5f5f5, as on dare.ac.uk) is the one colour beyond the brand four.
   ========================================================================== */
:root { --color-mist: #f5f5f5; }

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

.home { background: var(--color-mist); }

/* Same measure as dare.ac.uk's .inner: a 1772px box with 94px gutters. */
.home { --gutter: max(clamp(1.25rem, 6.5vw, 94px), calc((100vw - 1772px) / 2 + 94px)); font-weight: 400; }

.home .container {
  max-width: 1772px;
  padding-left: clamp(1.25rem, 6.5vw, 94px);
  padding-right: clamp(1.25rem, 6.5vw, 94px);
}

.home .section { padding: clamp(3rem, 7vw, 6rem) 0; }
.home .band-mist { background: var(--color-mist); }
.home .band-navy { background: var(--color-water); color: var(--color-white); }
.home .band-leaf { background: var(--color-leaf); color: var(--color-water); }
.home main > .section:not([class*="band-"]) { background: var(--color-white); }

/* Small green label, e.g. "Overview" / "The resource" / "Level 1". */
.pill {
  display: inline-block;
  padding: clamp(0.5rem, 0.83vw, 16px) clamp(0.9rem, 1.1vw, 21px);
  background: var(--color-leaf);
  color: var(--color-water);
  border-radius: clamp(8px, 0.73vw, 14px);
  font-size: clamp(1rem, 1.25vw, 24px);
  font-weight: 400;
  line-height: 1.1197;
  white-space: nowrap;
}

.pill-navy { background: var(--color-water); color: var(--color-white); }

/* ---------- Header ---------- */
.home .site-header {
  --gutter: max(clamp(1.25rem, 5.26vw, 101px), calc((100vw - 1920px) / 2 + 101px));
  --logo-w: clamp(195px, 11.9vw, 228px);
  --header-pad: clamp(1rem, 2.35vw, 45px);
  position: relative;
  padding: var(--header-pad) var(--gutter);
  gap: 1rem 2rem;
}

.home .site-header .logo { width: var(--logo-w); }

/* Menu and search are laid out to match dare.ac.uk's own masthead. */
.header-tools {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: clamp(2rem, 6vw, 116px);
}

.header-search {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.header-search input[type="text"] {
  width: clamp(9rem, 18.3vw, 352px);
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 3px solid var(--color-white);
  border-radius: 0;
  background: transparent;
  color: var(--color-white);
  font-family: var(--font-brand);
  font-size: clamp(1rem, 1.2vw, 23px);
  font-weight: 300;
  appearance: none;
}

.header-search input[type="text"]::placeholder { color: rgba(255, 255, 255, 0.85); opacity: 1; }
.header-search input[type="text"]:focus-visible { outline: none; border-bottom-color: var(--color-leaf); }

.header-search button {
  display: inline-flex;
  padding: 0.2rem;
  border: 0;
  background: none;
  cursor: pointer;
}

/* DARe's own icon: on the dark blue header the magnifier is white and the
   tick Leaf, exactly as dare.ac.uk's .masthead-on-dark-blue colours it. */
.search-icon { display: block; width: auto; height: clamp(2.5rem, 2.6vw, 50px); }
.search-icon .si-m { fill: var(--color-white); }
.search-icon .si-t { fill: var(--color-leaf); }

.header-search button:focus-visible,
.menu-toggle:focus-visible { outline: 2px solid var(--color-leaf); outline-offset: 4px; }

/* Menu button: label + three rounded bars (62 x 9px, as on dare.ac.uk). It is
   absolutely placed so it can stay put, above the panel, while the menu is
   open. */
.menu-toggle {
  position: absolute;
  top: calc(var(--header-pad) + (var(--logo-w) * 0.4255 - 48px) / 2);
  right: var(--gutter);
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-white);
  font-family: var(--font-brand);
  font-size: clamp(1rem, 1.25vw, 24px);
  font-weight: 700;
  cursor: pointer;
}

.menu-toggle .label { transition: color 0.3s; }

.menu-toggle .bars {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: clamp(48px, 3.4vw, 65px);
}

.menu-toggle .bars span {
  position: relative;
  display: block;
  height: clamp(7px, 0.52vw, 10px);
  background: var(--color-white);
  border-radius: 3px;
  transition: transform 0.2s, opacity 0.2s, background 0.2s;
}

.menu-open .menu-toggle { position: fixed; }
.menu-open .menu-toggle .label { color: var(--color-leaf); transition-delay: 0.2s; }
.menu-open .menu-toggle .bars span:nth-child(1) { transform: translateY(calc(0.52vw + 9px)) rotate(45deg); }
.menu-open .menu-toggle .bars span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle .bars span:nth-child(3) { transform: translateY(calc(-0.52vw - 9px)) rotate(-45deg); }
.menu-sub-open .menu-toggle .label { color: var(--color-water); }
.menu-sub-open .menu-toggle .bars span { background: var(--color-water); }

html.menu-open { overflow: hidden; }

/* The slide-in panel. */
.home .site-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  width: max(45vw, 527px);
  max-width: 100vw;
  height: 100%;
  overflow: hidden;
  background: var(--color-water);
  color: var(--color-white);
  box-shadow: -3px 0 24px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s linear 0.5s;
}

.home .site-menu.is-open {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.site-menu .top-level {
  height: 100%;
  margin: 0;
  padding: clamp(6rem, 10vw, 9rem) 0 3rem;
  overflow-y: auto;
  list-style: none;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1.25;
}

.site-menu .top-level > li { padding: 0.15em clamp(1.5rem, 5vw, 5.3rem); }

.home .site-menu a {
  margin: 0;
  color: var(--color-white);
  font-size: inherit;
  text-decoration: none;
}

.home .site-menu .top-level > li > a {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
}

.home .site-menu .top-level > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.25em;
  width: 0;
  height: 3px;
  background: var(--color-leaf);
  transition: width 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

/* The green bar is the hover line; the older `.site-header nav a:hover`
   underline would draw a second one under it, so switch that off here. */
.home .site-menu .top-level > li > a:hover,
.home .site-menu .top-level > li > a:focus-visible { color: var(--color-leaf); text-decoration: none; }
.home .site-menu .top-level > li > a:hover::after,
.home .site-menu .top-level > li > a:focus-visible::after { width: 100%; }

.site-menu .sub-icon {
  display: flex;
  width: 0.8em;
  margin-left: 0.5em;
  color: var(--color-leaf);
  transform: translateY(7%);
}

.site-menu .sub-icon svg { width: 100%; }

/* Second level: a light panel that slides over the first. */
.site-menu .sub-menu-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: clamp(6rem, 10vw, 9rem) clamp(1.5rem, 5vw, 4rem) 2rem;
  overflow-y: auto;
  background: #f5f5f5;
  color: var(--color-water);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s linear 0.5s;
}

.site-menu .has-sub.is-open > .sub-menu-wrap {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.site-menu .sub-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 2rem;
  padding: 0 0 0.5rem;
  border: 0;
  border-bottom: 3px solid var(--color-leaf);
  background: none;
  color: var(--color-water);
  font-family: var(--font-brand);
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
}

.site-menu .sub-nav-back::before { content: "\2190"; }

.site-menu .sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  line-height: 1;
}

.site-menu .sub-menu li { margin-bottom: 1em; }
.home .site-menu .sub-menu a { color: var(--color-water); }
.home .site-menu .sub-menu a:hover,
.home .site-menu .sub-menu a:focus-visible { text-decoration: underline; }

@media (max-width: 640px) {
  /* Logo and Menu share the first row; the search box drops to its own. */
  .header-tools { flex: 1 1 100%; margin-right: 0; }
  .header-search { flex: 1; }
  .header-search input[type="text"] { width: 100%; flex: 1; }
}

/* ---------- Hero ---------- */
.home .hero {
  background: var(--color-leaf);
  color: var(--color-water);
  overflow: visible;
}

.home .hero::after { display: none; }

/* Figma margins for the hero: 101px each side of the 1920 frame. */
.home .hero .container {
  max-width: 1920px;
  padding-left: clamp(1.25rem, 5.26vw, 101px);
  padding-right: clamp(1.25rem, 5.26vw, 101px);
}

.home .hero-grid {
  display: grid;
  gap: 2rem clamp(2rem, 6vw, 116px);
  align-items: center;
  padding-top: clamp(3rem, 8.4vw, 160px);
  padding-bottom: clamp(3rem, 8.4vw, 160px);
}

@media (min-width: 820px) {
  .home .hero-grid { grid-template-columns: minmax(0, 1fr) clamp(280px, 23.85vw, 458px); }
}

.home .hero h1 {
  max-width: 768px;
  font-size: clamp(2rem, 3.96vw, 76px);
  font-weight: 400;
  line-height: 1.1197;
  letter-spacing: 0;
  color: var(--color-water);
}

.home .hero .tagline {
  max-width: none;
  margin: 0 0 clamp(1.25rem, 2.4vw, 46px);
  color: var(--color-water);
  font-size: clamp(1.2rem, 1.67vw, 32px);
  font-weight: 300;
  line-height: 1.3;
}

.home .hero-actions { margin-top: 0; gap: 0.85rem clamp(1rem, 1.6vw, 31px); }

.btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--color-water);
  font-size: clamp(0.95rem, 1.04vw, 20px);
  font-weight: 400;
  line-height: 1.25;
  text-decoration: none;
}

.btn-sm-icon { width: 1.2em; height: 1.2em; flex: none; }

.btn-sm-solid {
  justify-content: space-between;
  gap: 1.3em;
  min-width: clamp(170px, 10.7vw, 206px);
  height: clamp(38px, 2.3vw, 44px);
  padding: 0 0.65em 0 0.75em;
  background: var(--color-water);
  color: var(--color-white);
  font-weight: 300;
  border-radius: 7px;
  transition: transform 0.15s ease;
}

.btn-sm-solid:hover { transform: translateY(-2px); }

.btn-sm-link { padding-bottom: 0.2em; border-bottom: 0.5px solid var(--color-water); }
.btn-sm-link:hover { border-bottom-width: 1.5px; }

.hero-photo {
  height: clamp(260px, 42vw, 860px);
  /* Drop the photograph in as assets/img/hero-road.jpg; until then the
     gradient below stands in for it. */
  background:
    url("../img/hero-road.jpg") center / cover no-repeat,
    linear-gradient(135deg, #4fbf68 0%, #2f8f6a 45%, var(--color-water) 100%);
}

/* Parallax: the background stays pinned to the viewport while the page
   scrolls over it, so the strip appears to move slower than the rest of
   the page. Left off below 820px -- background-attachment: fixed is
   unreliable on mobile browsers (janky repaints on iOS in particular) and
   the strip is too short there for the effect to read anyway. */
@media (min-width: 820px) {
  .hero-photo { background-attachment: fixed; }
}

/* ---------- What is TPRAF? ---------- */
/* Figma frame is 1920px wide; every size below is its px value divided by 19.2
   (so it is exact at 1920 and shrinks with the screen), capped at the Figma px. */
.home #what-is-tpraf {
  padding-top: clamp(3rem, 7.24vw, 139px);
  padding-bottom: clamp(3rem, 7.03vw, 135px);
}

/* Figma margins for this section: 125px each side of the 1920 frame. */
.home #what-is-tpraf .container {
  max-width: 1920px;
  padding-left: clamp(1.25rem, 6.51vw, 125px);
  padding-right: clamp(1.25rem, 6.51vw, 125px);
}

.what-intro {
  display: grid;
  gap: 2rem clamp(2rem, 4.95vw, 95px);
  align-items: center;
}

@media (min-width: 820px) {
  .what-intro { grid-template-columns: minmax(0, 522fr) minmax(0, 1053fr); }
}

.what-figure {
  max-width: 522px;
  padding: 13.2% 14.2%;
  background: var(--color-white);
  border-radius: clamp(20px, 2.45vw, 47px);
}

.what-figure img { display: block; width: 100%; height: auto; }

.what-copy .pill {
  margin-bottom: clamp(0.75rem, 1.04vw, 20px);
  padding: clamp(0.5rem, 0.83vw, 16px) clamp(0.9rem, 1.2vw, 23px);
  border-radius: clamp(8px, 0.73vw, 14px);
  font-size: clamp(1rem, 1.25vw, 24px);
  font-weight: 400;
  line-height: 1.1197;
}

.what-copy h2 {
  margin: 0 0 clamp(1rem, 2.35vw, 45px);
  font-size: clamp(2rem, 3.33vw, 64px);
  font-weight: 700;
  line-height: 1.1197;
  letter-spacing: 0;
}

.what-copy p {
  max-width: 1051px;
  margin: 0 0 clamp(1rem, 1.77vw, 34px);
  font-size: clamp(1.05rem, 1.354vw, 26px);
  font-weight: 400;
  line-height: 1.3;
}

.what-copy .what-lead { max-width: 24em; margin-bottom: 0; font-weight: 700; }

.audience-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3.125vw, 60px) clamp(1rem, 3.49vw, 67px);
  margin: clamp(2rem, 6vw, 116px) 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 900px) { .audience-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .audience-tiles { grid-template-columns: 1fr; } }

.audience-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: clamp(8.5rem, 8.8vw, 169px);
  padding: clamp(1rem, 1.04vw, 20px) clamp(1.1rem, 1.72vw, 33px) clamp(1rem, 1.25vw, 24px);
  background: var(--color-water);
  color: var(--color-white);
  border-radius: clamp(16px, 1.46vw, 28px);
}

.tile-num,
.tile-label {
  font-size: clamp(1.1rem, 1.458vw, 28px);
  font-weight: 400;
  line-height: 1.3;
}

.tile-num { color: rgba(94, 207, 112, 0.52); }

/* Each icon carries its Figma size and position as --w / --top / --right (px in
   the 1920 frame); they scale with the screen and never exceed those px. */
.tile-icon {
  position: absolute;
  top: clamp(calc(var(--top) * 0.5px), calc(var(--top) / 19.2 * 1vw), calc(var(--top) * 1px));
  right: clamp(calc(var(--right) * 0.5px), calc(var(--right) / 19.2 * 1vw), calc(var(--right) * 1px));
  width: clamp(calc(var(--w) * 0.6px), calc(var(--w) / 19.2 * 1vw), calc(var(--w) * 1px));
  height: auto;
}

.tile-label { max-width: 11.4em; }

.what-closing {
  max-width: 1657px;
  margin: clamp(2rem, 5.5vw, 105px) 0 0;
  font-size: clamp(1rem, 1.354vw, 26px);
  font-weight: 400;
  line-height: 1.3;
}

/* ---------- Section heads (no rule, with a pill on the right) ---------- */
.home .section-head {
  align-items: flex-start;
  margin-bottom: clamp(1.25rem, 3.5vw, 67px);
  padding-bottom: 0;
  border-bottom: 0;
}

.home .section-head h2 {
  font-size: clamp(2rem, 3.33vw, 64px);
  font-weight: 700;
  line-height: 1.1197;
  letter-spacing: 0;
}

.home .section-head .pill { margin-top: 2px; }

@media (min-width: 820px) {
  .home .band-navy .section-head h2 { max-width: 9.64em; }
}

.section-text {
  max-width: 1657px;
  margin: 0 0 clamp(1.25rem, 3.1vw, 60px);
  font-size: clamp(1.05rem, 1.354vw, 26px);
  font-weight: 400;
  line-height: 1.3;
}

/* ---------- About the TPRAF Diagram (Figma: navy band, three white cards) ---------- */
.home .band-navy {
  padding-top: clamp(3rem, 4.9vw, 94px);
  padding-bottom: clamp(3rem, 6.6vw, 127px);
}

.home .band-navy .container {
  max-width: 1920px;
  padding-left: clamp(1.25rem, 6.51vw, 125px);
  padding-right: clamp(1.25rem, 6.51vw, 125px);
}

.home .band-navy .section-text:last-child { margin-bottom: 0; }

.home .band-navy .resource-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3.49vw, 67px);
  margin: 0 0 clamp(1.25rem, 3.1vw, 60px);
  padding: 0;
  list-style: none;
}

@media (max-width: 820px) {
  .home .band-navy .resource-cards { grid-template-columns: 1fr; }
}

.home .resource-card {
  position: relative;
  display: block;
  min-height: clamp(9rem, 12.08vw, 232px);
  padding: clamp(1.25rem, 1.67vw, 32px) clamp(1.25rem, 1.875vw, 36px);
  background: var(--color-white);
  border: 0;
  border-radius: clamp(16px, 1.46vw, 28px);
  box-shadow: none;
}

.home .resource-card h3 {
  margin: 0 0 clamp(0.75rem, 1.5vw, 29px);
  color: var(--color-water);
  font-size: clamp(1.25rem, 1.458vw, 28px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.home .resource-card p {
  margin: 0;
  color: var(--color-water);
  font-size: clamp(1rem, 1.25vw, 24px);
  font-weight: 400;
  line-height: 1.3;
}

/* Figma wraps the first and last descriptions at 384px / 318px. */
.home .resource-card:nth-child(1) p { max-width: 16em; }
.home .resource-card:nth-child(3) p { max-width: 13.25em; }
/* Figma's text box for the Handbook card is 555px wide, i.e. it runs a little
   past the card padding so the sentence breaks after "the". */
.home .resource-card:nth-child(2) p { margin-right: -1.5em; }

.home .resource-card:has(.resource-card-link:hover),
.home .resource-card:has(.resource-card-link:focus-visible) {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

/* Same --w / --top / --right scheme as the audience tiles (px in the 1920 frame). */
.card-icon {
  position: absolute;
  top: clamp(calc(var(--top) * 0.5px), calc(var(--top) / 19.2 * 1vw), calc(var(--top) * 1px));
  right: clamp(calc(var(--right) * 0.5px), calc(var(--right) / 19.2 * 1vw), calc(var(--right) * 1px));
  width: clamp(calc(var(--w) * 0.6px), calc(var(--w) / 19.2 * 1vw), calc(var(--w) * 1px));
  height: auto;
  aspect-ratio: calc(var(--w) / var(--h));
  object-fit: fill;
}

/* ---------- The simple form, on Leaf (Figma) ---------- */
.home .band-leaf {
  padding-top: clamp(3rem, 4.58vw, 88px);
  padding-bottom: clamp(3rem, 8.7vw, 167px);
}

/* Figma: the card starts 147px in from the left and stops 123px from the right. */
.home .band-leaf .container {
  max-width: 1920px;
  padding-left: clamp(1.25rem, 7.66vw, 147px);
  padding-right: clamp(1.25rem, 6.3vw, 121px);
}

.home .band-leaf .section-head { margin-bottom: clamp(0.5rem, 1.04vw, 20px); }

/* Figma sets the heading and sub-title 9px left of the card edge. */
.home .band-leaf .section-head h2,
.home .landing-diagram .diagram-title { margin-left: max(-9px, -0.47vw); }

/* Moved down with `top` (not margin) so it does not make the heading row taller. */
.home .band-leaf .section-head .pill { position: relative; top: clamp(0px, 1.67vw, 32px); }
.pill-navy { min-width: clamp(6rem, 7.08vw, 136px); text-align: center; }

.landing-diagram { --box-border-radius: 14px; display: flex; flex-direction: column; }

/* Diagram boxes as drawn in the design: no shadow. The brand-colour boxes have
   no outline either (see .variant-navy/-sky/-leaf); white and tinted boxes keep
   theirs, which is what defines them against the white card. Text size, weight
   and corners come from the shared diagram rules (see --fs). */
.home .landing-diagram .diagram-box {
  box-shadow: none;
}

.home .landing-diagram .diagram-title {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--color-water);
  font-size: clamp(1.4rem, 2.08vw, 40px);
  font-weight: 300;
  line-height: 1.1197;
  text-align: left;
}

/* The "Level 1" line under the title is the pill in the design. */
.home .landing-diagram .diagram-subtitle { display: none; }

.home .landing-diagram .process-toggle { order: 1; }

/* Tour buttons: navy "Take the tour", white "Play walkthrough". */
.home .landing-diagram .diagram-tour {
  order: 2;
  width: auto;
  max-width: none;
  margin: clamp(1.25rem, 2.08vw, 40px) 0 0;
  padding: 0;
  gap: 0.75rem clamp(1rem, 1.3vw, 25px);
  background: none;
}

.home .landing-diagram .tour-play {
  height: clamp(2.75rem, 3.02vw, 58px);
  padding: 0 clamp(1rem, 1.15vw, 22px);
  gap: 0.5em;
  background: var(--color-white);
  color: var(--color-water);
  border-radius: clamp(8px, 0.625vw, 12px);
  box-shadow: none;
  font-size: clamp(1rem, 1.25vw, 24px);
  font-weight: 400;
  line-height: 1.1197;
}

.home .landing-diagram .tour-play.tour-guide { background: var(--color-water); color: var(--color-white); }
.home .landing-diagram .tour-btn { color: var(--color-water); }

/* The caption only shows while a walkthrough runs; idle, it is read by screen
   readers but takes no room (the design has nothing beside the buttons). */
.home .landing-diagram .tour-caption { color: var(--color-water); }
.home .landing-diagram .tour-caption:not(.is-active) {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.home .landing-diagram .scroll-hint { order: 3; color: var(--color-water); text-align: left; }

/* The white card: 25px corners, the diagram inset inside it. */
.home .landing-diagram .diagram-viewport {
  order: 4;
  margin-top: clamp(2rem, 5.3vw, 102px);
  padding: clamp(0.75rem, 4.84vw, 93px) clamp(0.75rem, 5.36vw, 103px) clamp(0.75rem, 5.5vw, 106px);
  background: var(--color-white);
  border-radius: clamp(16px, 1.3vw, 25px);
}

/* "How to explore this diagram" is not in the design; it sits under the card. */
.home .landing-diagram .diagram-guide {
  order: 5;
  max-width: none;
  margin: clamp(1rem, 1.6vw, 30px) 0 0;
}

.home .landing-diagram .process-panel { order: 6; }

/* Round green zoom button (Figma: 74px, bottom-right of the diagram). Clicking
   it opens the −/+/Fit/Reset controls beside it. On phones the controls stay
   in the flow above the diagram as before, so the button is not needed. */
.zoom-toggle { display: none; }

@media (min-width: 761px) {
  .home .landing-diagram .zoom-toggle {
    position: absolute;
    right: clamp(1rem, 4.95vw, 95px);
    bottom: clamp(1rem, 5.47vw, 105px);
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(52px, 3.85vw, 74px);
    height: clamp(52px, 3.85vw, 74px);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-leaf);
    color: var(--color-white);
    cursor: pointer;
  }

  .zoom-toggle img { display: block; width: 50%; height: auto; }
  .zoom-toggle:focus-visible { outline: 3px solid var(--color-water); outline-offset: 3px; }

  .home .landing-diagram .zoom-controls {
    display: none;
    right: calc(clamp(1rem, 4.95vw, 95px) + clamp(52px, 3.85vw, 74px) + 0.75rem);
    bottom: clamp(1.25rem, 6.2vw, 118px);
  }

  .home .landing-diagram .diagram-viewport.zoom-open .zoom-controls { display: flex; }
}

/* ---------- Further Information (Figma) ---------- */
.home .section-further {
  padding-top: clamp(3rem, 6.56vw, 126px);
  padding-bottom: clamp(3rem, 7.19vw, 138px);
}

/* Heading and bars start 138px in; bars stop 123px from the right edge. */
.home .section-further .container {
  max-width: 1920px;
  padding-left: clamp(1.25rem, 7.19vw, 138px);
  padding-right: clamp(1.25rem, 6.4vw, 123px);
}

.home .section-further .section-head { margin-bottom: clamp(1.25rem, 3.28vw, 63px); }

.info-bars {
  display: grid;
  gap: clamp(0.75rem, 1.46vw, 28px);
  margin-bottom: clamp(2rem, 8.2vw, 158px);
}

.info-bar {
  background: var(--color-leaf);
  color: var(--color-water);
  border-radius: clamp(16px, 1.46vw, 28px);
}

.info-bar summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(4.5rem, 5.05vw, 97px);
  padding: 0 clamp(3rem, 4.5vw, 86px) 0 clamp(4.75rem, 5.83vw, 112px);
  list-style: none;
  cursor: pointer;
}

.info-bar summary::-webkit-details-marker { display: none; }
.info-bar summary:focus-visible { outline: 3px solid var(--color-water); outline-offset: -3px; border-radius: inherit; }

/* Icons sit vertically centred at their Figma left offset (--left) and size (--w x --h). */
.info-bar-icon {
  position: absolute;
  left: clamp(calc(var(--left) * 0.5px), calc(var(--left) / 19.2 * 1vw), calc(var(--left) * 1px));
  top: 50%;
  width: clamp(calc(var(--w) * 0.6px), calc(var(--w) / 19.2 * 1vw), calc(var(--w) * 1px));
  height: auto;
  aspect-ratio: calc(var(--w) / var(--h));
  object-fit: fill;
  transform: translateY(-50%);
}

.info-bar-label {
  flex: 1;
  font-size: clamp(1.15rem, 2.08vw, 40px);
  font-weight: 700;
  line-height: 1.3;
}

.bar-chevron {
  position: absolute;
  right: clamp(1rem, 2.19vw, 42px);
  top: 50%;
  width: clamp(20px, 1.51vw, 29px);
  height: clamp(20px, 1.51vw, 29px);
  margin-top: calc(clamp(20px, 1.51vw, 29px) / -2);
  transition: transform 0.15s ease;
}

.info-bar[open] .bar-chevron { transform: rotate(180deg); }

.info-bar-body { padding: 0 clamp(1rem, 2.19vw, 42px) clamp(1rem, 1.5vw, 28px) clamp(4.75rem, 5.83vw, 112px); }
.info-bar-body p { margin: 0 0 0.85rem; font-size: clamp(1rem, 1.25vw, 24px); line-height: 1.3; }
.info-bar .inline-link { border-bottom-color: var(--color-water); font-size: clamp(1rem, 1.25vw, 24px); }

@media (max-width: 560px) { .info-bar-body { padding-left: 1.5rem; } }

/* Quote mark at 306px, text at 514px, text 1100px wide. */
.ack {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.5rem, 3.44vw, 66px);
  padding-left: clamp(0rem, 8.75vw, 168px);
}

/* Research Output Notice sits below Acknowledgements as its own labelled
   block — same text treatment, no icon, but a heading and a top margin so
   it reads as a separate section rather than a continuation of the quote
   above it. .ack's padding-left exists to clear the quote icon and its
   max-width is a deliberate narrow "pull quote" measure — neither applies
   here, so both are reset to match the section's other body text (e.g.
   .section-text) instead of leaving a large empty gap on wide screens. */
.ack-notice {
  margin-top: clamp(2rem, 4.5vw, 86px);
  padding-left: 0;
}

.ack-notice .ack-text { max-width: 1657px; }

.ack-heading {
  margin: 0 0 clamp(0.75rem, 1.25vw, 24px);
  font-size: clamp(1.3rem, 1.875vw, 36px);
  font-weight: 700;
}

.home .ack-icon {
  flex: none;
  width: clamp(56px, 7.4vw, 142px);
  height: auto;
  aspect-ratio: 142 / 104;
  object-fit: fill;
  opacity: 1;
}

.ack-text { max-width: 1100px; }

.ack-text p {
  margin: 0 0 clamp(1rem, 2.08vw, 40px);
  font-size: clamp(1.05rem, 1.615vw, 31px);
  font-weight: 400;
  line-height: 1.3;
}

.ack-text p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .ack { flex-direction: column; padding-left: 0; }
}

/* ---------- Explore band (Figma) ---------- */
.home .cta-band.band-mist { background: var(--color-mist); color: var(--color-water); }

.home .cta-band .container {
  max-width: 1920px;
  padding-left: clamp(1.25rem, 7.66vw, 147px);
  padding-right: clamp(1.25rem, 7.5vw, 144px);
}

.home .cta-inner {
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  padding-top: clamp(2.5rem, 4.375vw, 84px);
  padding-bottom: clamp(2.5rem, 5.52vw, 106px);
}

.home .cta-band h2 {
  margin: 0 0 clamp(0.75rem, 2.13vw, 41px);
  font-size: clamp(2rem, 3.33vw, 64px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.home .cta-band p {
  max-width: 751px;
  margin: 0;
  font-size: clamp(1.05rem, 1.354vw, 26px);
  font-weight: 400;
  line-height: 1.3;
}

.home .cta-band .cta-button {
  justify-content: space-between;
  gap: 1rem;
  min-width: clamp(260px, 22.6vw, 434px);
  height: clamp(4rem, 5.52vw, 106px);
  padding: 0 clamp(1rem, 1.6vw, 31px) 0 clamp(1rem, 1.35vw, 26px);
  border-radius: clamp(14px, 1.15vw, 22px);
  box-shadow: none;
  font-size: clamp(1.25rem, 2.08vw, 40px);
  font-weight: 400;
  line-height: 1.25;
}

/* Figma puts the button 79px below the top of the band's content, not centred. */
.home .cta-band .cta-button { margin-top: clamp(0px, 4.11vw, 79px); }

.cta-circle { width: 1.4455em; height: 1.4455em; flex: none; }

/* ---------- Footer (follows dare.ac.uk's footer) ---------- */
/* Same sizes and breakpoints as dare.ac.uk: 19/22px text (down to 16/19px on
   phones), 72px logo rows (down to 35px), 60px top and bottom padding, the
   logo hanging out past the left margin, contacts on the right. */
.home .site-footer {
  padding: 0;
  overflow-x: clip;
  background: var(--color-water);
  border-top: 0;
  color: var(--color-white);
  font-weight: 500;
  text-align: left;
}

.home .site-footer .footer-main { padding: 60px 0; }

.home .footer-grid {
  --fs-body1: 19px;
  --fs-body2: 22px;
  --logo-h: 72px;
  display: grid;
  grid-template-columns: 25% minmax(0, 1fr);
  gap: 0;
  font-size: var(--fs-body1);
  line-height: 1.3;
}

.footer-logo-link { grid-column: 1; grid-row: 1; display: block; }

.footer-logo {
  display: block;
  width: clamp(200px, 16.9vw, 325px);
  height: auto;
  transform: translateX(calc(-1 * clamp(1.25rem, 6.5vw, 88px)));
}

.footer-contacts {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem 1.5rem;
  padding-top: 70px;
}

.footer-heading {
  margin: 0;
  padding-bottom: 0.25em;
  font-size: var(--fs-body1);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

.footer-col p { margin: 0; font-size: var(--fs-body2); line-height: 1.3; }
.footer-social ul { margin: 0; padding: 0; list-style: none; }
.footer-social li { line-height: 1.25; }

.footer-address { grid-column: 1; grid-row: 2; }
.footer-address p { margin: 0 0 1em; }
.footer-address p:last-child { margin-bottom: 0; }

.footer-logos { grid-column: 2; grid-row: 2; padding-left: 16px; }
.footer-logos .footer-heading { padding-bottom: 1em; }
.footer-logos .footer-heading-partners { padding-top: 50px; }
.footer-logos a { display: block; width: fit-content; max-width: 100%; }

.footer-funders,
.footer-partners { display: block; width: auto; max-width: 100%; height: var(--logo-h); }

.home .site-footer .footer-main a {
  color: var(--color-leaf);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.home .site-footer .footer-main a:hover,
.home .site-footer .footer-main a:focus-visible { text-decoration-thickness: 2px; }

.home .footer-signoff { padding: 0 0 35px; font-size: 16px; }
.home .footer-signoff .footer-copyright { margin: 0 0 0.75em; opacity: 0.85; }
.home .footer-signoff ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.home .footer-signoff li { margin-right: 1em; }
.home .site-footer .footer-signoff a { color: var(--color-white); font-weight: 500; text-decoration: underline; }

@media (max-width: 1700px) {
  .home .footer-grid { --fs-body1: 18px; --fs-body2: 21px; --logo-h: 62px; }
}

@media (max-width: 1450px) {
  .home .site-footer .footer-main { padding: 50px 0; }
  .home .footer-grid { --logo-h: 50px; }
  .footer-contacts { padding-top: 50px; }
}

/* Below 1200px the contacts move under the logo and everything stacks. */
@media (max-width: 1200px) {
  .home .footer-grid { --fs-body1: 17px; grid-template-columns: minmax(0, 1fr); }
  .footer-logo-link,
  .footer-contacts,
  .footer-address,
  .footer-logos { grid-column: 1; }
  .footer-logo-link { grid-row: 1; }
  .footer-contacts { grid-row: 2; justify-content: flex-start; gap: 2rem 4rem; padding: 2rem 0 0; }
  .footer-address { grid-row: 3; padding-top: 2.5rem; }
  .footer-logos { grid-row: 4; padding: 2.5rem 0 0; }
}

@media (max-width: 900px) {
  .footer-contacts { flex-direction: column; gap: 2rem; }
}

@media (max-width: 600px) {
  .home .site-footer .footer-main { padding: 35px 0; }
  .home .footer-grid { --fs-body1: 16px; --fs-body2: 19px; --logo-h: 40px; }
  .home .footer-signoff { font-size: 14px; }
}

@media (max-width: 380px) {
  .home .footer-grid { --fs-body2: 18px; --logo-h: 35px; }
}

/* ==========================================================================
   Diagram page — same design language as the homepage: Leaf title band,
   pill tabs, and the diagram in a white card on the off-white band.
   Only the page furniture lives here; the diagrams themselves are styled
   above.
   ========================================================================== */

/* Slim title band, after dare.ac.uk's inner pages (e.g. /research/): Leaf, the
   breadcrumb bottom-left, and the page label and title in the right-hand
   column that the homepage hero also uses. Kept short so the diagram below
   is on screen as the page opens. */
.diagram-page .diagram-hero .container {
  max-width: 1920px;
  padding-left: clamp(1.25rem, 5.26vw, 101px);
  padding-right: clamp(1.25rem, 5.26vw, 101px);
}

.diagram-hero-inner {
  display: grid;
  gap: 0.75rem clamp(2rem, 6vw, 116px);
  align-items: end;
  padding-top: clamp(0.9rem, 1.4vw, 26px);
  padding-bottom: clamp(0.9rem, 1.4vw, 26px);
}

@media (min-width: 820px) {
  .diagram-hero-inner { grid-template-columns: minmax(0, 1fr) clamp(280px, 23.85vw, 458px); }
}

.breadcrumb {
  color: var(--color-water);
  font-size: clamp(0.8rem, 0.83vw, 16px);
  line-height: 1.3;
}

.breadcrumb a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { text-decoration-thickness: 2px; }
.breadcrumb [aria-current="page"] { font-weight: 700; text-decoration: underline; text-underline-offset: 0.15em; }

.diagram-hero-title { min-width: 0; }

/* The small underlined page label above the title, as on dare.ac.uk. */
.diagram-hero .hero-label {
  display: inline-block;
  max-width: 100%;
  overflow: hidden; /* one line: a long sub-title is cut short (its full text is the tooltip) */
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  margin: 0 0 0.3rem;
  padding-bottom: 0.1em;
  border-bottom: 2px solid var(--color-water);
  color: var(--color-water);
  font-size: clamp(0.8rem, 0.83vw, 16px);
  font-weight: 700;
  line-height: 1.3;
}

.diagram-page .diagram-hero h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(1.25rem, 1.75vw, 34px);
  font-weight: 300;
  line-height: 1.2;
}

/* Fits the diagram card to the same edges as the homepage's simple-form card. */
.diagram-page .diagram-band {
  padding-top: clamp(1rem, 1.5vw, 28px);
  padding-bottom: clamp(2rem, 4vw, 77px);
}

.diagram-page .diagram-band .container {
  max-width: 1920px;
  padding-left: clamp(1.25rem, 5.26vw, 101px);
  padding-right: clamp(1.25rem, 5.26vw, 101px);
}

/* Tabs on the left and the tour buttons on the right share the first row, and
   everything else stacks full width beneath. A grid rather than the homepage's
   column so the diagram card starts as high up the screen as it can. */
.diagram-page .landing-diagram {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(1rem, 1.5vw, 28px);
  align-items: center;
}

.diagram-page .landing-diagram > * { grid-column: 1 / -1; }
.diagram-page .landing-diagram .diagram-toolbar { grid-column: 1; grid-row: 1; order: 0; }
.diagram-page .landing-diagram > .diagram-tour { grid-column: 2; grid-row: 1; margin: 0; justify-self: end; }

@media (max-width: 900px) {
  .diagram-page .landing-diagram .diagram-toolbar { grid-column: 1 / -1; }
  .diagram-page .landing-diagram > .diagram-tour { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; margin-top: 0.75rem; }
}

/* Level tabs as pills, like the homepage's "Overview" / "Level 1" labels: white
   with navy text, the current one navy. Still one swipeable row. */
.diagram-page .diagram-toolbar {
  gap: clamp(0.5rem, 0.75vw, 14px);
  margin: 0;
  padding: 0;
  background: none;
}

.diagram-page .level-tab {
  padding: clamp(0.45rem, 0.6vw, 12px) clamp(0.8rem, 0.9vw, 17px);
  border-radius: clamp(8px, 0.73vw, 14px);
  font-size: clamp(0.9rem, 1vw, 19px);
  font-weight: 400;
  line-height: 1.1197;
  white-space: nowrap;
}

.diagram-page .level-tab:focus-visible { outline: 3px solid var(--color-water); outline-offset: 2px; }

/* The card holds diagrams up to twice its width, so it is padded less than the
   homepage's. */
.diagram-page .landing-diagram .diagram-viewport {
  margin-top: clamp(0.75rem, 1.2vw, 22px);
  padding: clamp(0.75rem, 1.5vw, 28px);
}

.diagram-page .landing-diagram .view-next { order: 7; margin: clamp(1rem, 1.6vw, 30px) 0 0; }
.diagram-page .landing-diagram .diagram-guide { margin-top: clamp(1rem, 1.6vw, 30px); }

@media (max-width: 760px) {
  .diagram-page .landing-diagram .diagram-viewport { padding: 0.5rem; border-radius: 16px; }
}

/* Show all / DSP only / IMP only: one segmented control in the same white-pill
   style as the level tabs (current one navy), lined up with them on the left. */
.diagram-page .landing-diagram .process-toggle {
  justify-self: start;
  gap: 0;
  margin: clamp(0.5rem, 0.8vw, 15px) 0 0;
  padding: clamp(3px, 0.25vw, 5px);
  background: var(--color-white);
  border-radius: clamp(8px, 0.73vw, 14px);
}

.diagram-page .process-toggle button {
  border: 0;
  background: none;
  padding: clamp(0.35rem, 0.45vw, 9px) clamp(0.8rem, 0.9vw, 17px);
  border-radius: clamp(6px, 0.55vw, 11px);
  font-size: clamp(0.85rem, 0.95vw, 18px);
  font-weight: 400;
  line-height: 1.1197;
  white-space: nowrap;
}

.diagram-page .process-toggle button[aria-pressed="true"] { background: var(--color-water); color: var(--color-white); }
.diagram-page .process-toggle button:focus-visible { outline: 3px solid var(--color-water); outline-offset: 2px; }

/* Tour buttons on the tabs' row are a touch smaller than on the homepage. */
.diagram-page .landing-diagram .tour-play {
  height: clamp(2.4rem, 2.4vw, 46px);
  padding: 0 clamp(0.9rem, 1vw, 19px);
  font-size: clamp(0.9rem, 1vw, 19px);
}

/* Phone: a lot less above the diagram, so it starts near the top of the
   screen. The search box moves out of the header (the menu still has every
   link), the title band drops to a breadcrumb and a short title, the two tour
   buttons share one row, and the zoom controls fold behind the round button
   at the corner of the card instead of taking a row of their own. */
@media (max-width: 760px) {
  .diagram-page .site-header .header-tools { display: none; }

  .diagram-hero-inner { gap: 0.25rem; padding-top: 0.6rem; padding-bottom: 0.7rem; }
  .diagram-hero .hero-label { display: none; }
  .breadcrumb { font-size: 0.75rem; }
  .diagram-page .diagram-hero h1 { font-size: 1.2rem; line-height: 1.2; }

  .diagram-page .diagram-band { padding-top: 0.75rem; padding-bottom: 2rem; }
  .diagram-page .landing-diagram > .diagram-tour { margin-top: 0.5rem; padding: 0; gap: 0.5rem; flex-wrap: nowrap; }
  .diagram-page .landing-diagram .tour-play { flex: 1 1 0; height: 2.6rem; padding: 0 0.5rem; font-size: 0.85rem; white-space: nowrap; }
  .diagram-page .landing-diagram .tour-caption:not(.is-active) { display: none; }
  .diagram-page .landing-diagram .tour-caption.is-active { flex: 1 0 100%; }
  .diagram-page .landing-diagram .process-toggle { margin-top: 0.5rem; }
  .diagram-page .landing-diagram .scroll-hint { margin: 0.5rem 0 0.4rem; font-size: 0.8rem; }
  .diagram-page .landing-diagram .diagram-viewport { margin-top: 0; padding: 0.4rem; border-radius: 16px; }

  .diagram-page .zoom-toggle {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-leaf);
    color: var(--color-white);
    cursor: pointer;
  }

  .diagram-page .zoom-toggle img { display: block; width: 50%; height: auto; }

  .diagram-page .landing-diagram .zoom-controls {
    display: none;
    position: absolute;
    right: 3.6rem;
    bottom: 0.6rem;
    margin: 0;
  }

  .diagram-page .landing-diagram .diagram-viewport.zoom-open .zoom-controls { display: flex; }
}

/* Level picker. On a desktop the wrapper disappears and the tabs are the row of
   pills styled above; the dropdown button only exists on phones. */
.level-select { display: contents; }
.level-current { display: none; }

@media (max-width: 760px) {
  /* The breadcrumb repeats the logo and menu link, so a phone drops it. */
  .breadcrumb { display: none; }
  .diagram-hero-inner { padding-top: 0.85rem; padding-bottom: 0.9rem; }
  .diagram-page .diagram-hero h1 { font-size: 1.35rem; }

  .level-select { display: block; position: relative; grid-column: 1 / -1; grid-row: 1; }

  .level-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.9rem;
    padding: 0 1rem;
    border: 0;
    border-radius: 12px;
    background: var(--color-white);
    color: var(--color-water);
    font-family: var(--font-brand);
    font-size: 1rem;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
  }

  .level-current:focus-visible { outline: 3px solid var(--color-water); outline-offset: 2px; }
  .level-current-chevron { width: 1.1rem; height: 1.1rem; flex: none; transition: transform 0.15s ease; }
  .level-select.is-open .level-current-chevron { transform: rotate(180deg); }

  /* The pills become the list under the button. */
  .diagram-page .level-select .diagram-toolbar {
    display: none;
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.35rem;
    overflow: visible;
    border-radius: 12px;
    background: var(--color-white);
    box-shadow: 0 8px 24px rgba(0, 41, 94, 0.18);
    cursor: default;
  }

  .diagram-page .level-select.is-open .diagram-toolbar { display: flex; }

  .diagram-page .level-select .level-tab {
    padding: 0.8rem 0.9rem;
    border-radius: 8px;
    background: none;
    font-size: 1rem;
    text-align: left;
  }

  .diagram-page .level-select .level-tab[aria-selected="true"] { background: var(--color-water); color: var(--color-white); }

  /* Actions: the tour buttons in one row, then the filter as three equal
     segments across the full width. */
  .diagram-page .landing-diagram > .diagram-tour { grid-row: 2; }
  .diagram-page .landing-diagram .process-toggle { justify-self: stretch; width: 100%; margin-top: 0.5rem; }
  .diagram-page .landing-diagram .process-toggle button { flex: 1 1 0; text-align: center; padding-left: 0.4rem; padding-right: 0.4rem; }
}

/* Phone: the guided tour, the walkthrough and the zoom controls become three
   round icon buttons in a slim strip along the top of the diagram card
   (the swipe hint sits at the strip's left), instead of a block of buttons
   above it. They are grid items in the same cell as the card, laid over the
   space its extra top padding reserves, so they follow the card wherever the
   controls above it wrap or disappear. */
@media (max-width: 760px) {
  .diagram-page .landing-diagram .level-select { grid-row: 1; }
  .diagram-page .landing-diagram .process-toggle { grid-row: 2; }
  .diagram-page .landing-diagram .diagram-viewport { grid-row: 3; margin-top: 0.6rem; padding-top: 3.4rem; }
  .diagram-page .landing-diagram > .diagram-tour,
  .diagram-page .landing-diagram .scroll-hint { grid-row: 3; z-index: 12; align-self: start; margin-top: 1.1rem; }
  .diagram-page .landing-diagram .diagram-guide { grid-row: 4; }
  .diagram-page .landing-diagram .view-next { grid-row: 5; }

  .diagram-page .landing-diagram > .diagram-tour {
    grid-column: 1 / -1;
    justify-self: end;
    width: auto;
    margin: 1.1rem 3.5rem 0 0; /* clear of the zoom button at the strip's end */
    gap: 0.4rem;
    flex-wrap: nowrap;
  }

  .diagram-page .landing-diagram .tour-play {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-mist);
    color: var(--color-water);
  }

  .diagram-page .landing-diagram .tour-play.tour-guide,
  .diagram-page .landing-diagram .lesson-launch .tour-play { background: var(--color-water); color: var(--color-white); }

  /* The words stay for screen readers. */
  .diagram-page .landing-diagram .tour-play > span:not(.tour-play-icon) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* A flag for "guided tour", so it reads differently from the play triangle. */
  .diagram-page .landing-diagram .tour-guide .tour-play-icon,
  .diagram-page .landing-diagram .lesson-launch .tour-play-icon {
    width: 20px;
    height: 20px;
    border: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 2.5v15M5.5 3.5h9.5l-2.6 3.6L15 10.7H5.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 2.5v15M5.5 3.5h9.5l-2.6 3.6L15 10.7H5.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .diagram-page .landing-diagram .scroll-hint {
    display: flex;
    align-items: center;
    justify-self: start;
    max-width: calc(100% - 11.5rem);
    min-height: 44px;
    margin: 1.1rem 0 0 0.9rem;
    font-size: 0.8rem;
    line-height: 1.25;
  }

  /* Zoom joins the strip at its right-hand end. */
  .diagram-page .zoom-toggle { top: 0.5rem; right: 0.5rem; bottom: auto; }
  .diagram-page .landing-diagram .zoom-controls { top: 3.6rem; right: 0.5rem; bottom: auto; }

  /* While a walkthrough plays, its step name and Restart/Stop sit in a bar at
     the foot of the screen, so the diagram keeps the whole card. */
  .diagram-page .diagram-tour:has(.tour-caption.is-active) .tour-caption {
    display: block;
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 60;
    min-height: 0;
    padding: 0.75rem 8.5rem 0.75rem 1rem;
    border-radius: 12px;
    background: var(--color-water);
    color: var(--color-white);
    box-shadow: 0 6px 20px rgba(0, 41, 94, 0.3);
  }

  .diagram-page .diagram-tour:has(.tour-caption.is-active) .tour-actions {
    position: fixed;
    right: 1.4rem;
    bottom: 1.05rem;
    z-index: 61;
  }

  .diagram-page .diagram-tour:has(.tour-caption.is-active) .tour-btn { color: var(--color-white); }
}

/* IMP docks its zoom controls bottom-left (see .diagram-viewport[data-view="imp"]
   above), but inside the card the controls open beside the round button at the
   right. Without this both edges were set and the panel stretched across the
   whole card, pushing Fit and Reset out of place. */
.home .landing-diagram .diagram-viewport[data-view="imp"] .zoom-controls { left: auto; }

/* The diagram is sized to its own height, so the frame never needs a vertical
   scrollbar (only the sideways one, for a zoomed-in diagram). */
.diagram-page .diagram-stage-wrap { overflow-y: hidden; }

/* ==========================================================================
   Header (both pages): Home and Explore TPRAF, as in the 26 Sept design.
   ========================================================================== */
.header-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 42px);
}

.site-header .header-nav a {
  margin-left: 0; /* beats the older ".site-header nav a" spacing */
  color: var(--color-white);
  font-size: clamp(0.95rem, 1.04vw, 20px);
  font-weight: 400;
  line-height: 1.25;
}

.site-header .header-nav .header-home { text-decoration: underline; text-underline-offset: 0.2em; }
.site-header .header-nav .header-home:hover,
.site-header .header-nav .header-home:focus-visible { text-decoration-thickness: 2px; }

.site-header .header-nav .header-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  height: clamp(36px, 2.3vw, 44px);
  padding: 0 0.7em 0 0.9em;
  border-radius: 7px;
  background: var(--color-white);
  color: var(--color-water);
  text-decoration: none;
  transition: transform 0.15s ease;
}

.site-header .header-nav .header-cta:hover { transform: translateY(-2px); text-decoration: none; }
.header-nav a:focus-visible { outline: 2px solid var(--color-leaf); outline-offset: 4px; }

@media (max-width: 640px) {
  /* The logo already goes home, so a phone keeps just the button beside it. */
  .site-header .header-nav .header-home { display: none; }
}

/* ==========================================================================
   Homepage simple form, as in the 26 Sept design: the "Explore the extended
   form" button under the title, the guide as a white bar that opens on demand,
   and the card holding the tour buttons at its top and the zoom bar at its
   foot. Scoped away from the diagram page, which keeps its own arrangement.
   ========================================================================== */
.home:not(.diagram-page) .landing-diagram .landing-extend {
  order: 0;
  align-self: flex-start;
  margin-top: clamp(0.9rem, 1.3vw, 25px);
}

.home:not(.diagram-page) .landing-diagram .diagram-guide {
  order: 1;
  margin-top: clamp(1rem, 1.6vw, 30px);
  border: 0;
  border-radius: clamp(6px, 0.5vw, 10px);
}

.home:not(.diagram-page) .landing-diagram .diagram-guide-toggle {
  background: var(--color-white);
  font-size: clamp(0.85rem, 0.95vw, 18px);
  padding: clamp(0.7rem, 0.95vw, 18px) clamp(1rem, 1.3vw, 25px);
}

.home:not(.diagram-page) .landing-diagram .diagram-guide-icon { display: none; }

.home:not(.diagram-page) .landing-diagram .diagram-viewport {
  margin-top: clamp(1rem, 1.6vw, 30px);
  padding-top: clamp(0.75rem, 2.4vw, 46px);
}

/* Tour buttons: "Take a tour" in Leaf, "Play walkthrough" in navy, on a line of
   their own with a hairline under it. */
.home:not(.diagram-page) .landing-diagram .diagram-viewport > .diagram-tour {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: auto;
  max-width: none;
  margin: 0 0 clamp(0.75rem, 1.5vw, 28px);
  padding: 0 0 clamp(0.75rem, 1.5vw, 28px);
  border-bottom: 1px solid #ececec;
  border-radius: 0;
  background: none;
  gap: 0.6rem clamp(0.75rem, 1.1vw, 21px);
}

.home:not(.diagram-page) .landing-diagram .diagram-viewport .tour-play {
  flex-direction: row-reverse;
  height: clamp(2.1rem, 2.1vw, 40px);
  padding: 0 clamp(0.8rem, 0.95vw, 18px);
  border-radius: 7px;
  background: var(--color-water);
  color: var(--color-white);
  font-size: clamp(0.85rem, 0.95vw, 18px);
  font-weight: 400;
}

.home:not(.diagram-page) .landing-diagram .diagram-viewport .tour-play.tour-guide {
  background: var(--color-leaf);
  color: var(--color-water);
}

/* A circled arrow after "Take a tour", in place of the play triangle. */
.home:not(.diagram-page) .landing-diagram .diagram-viewport .tour-guide .tour-play-icon {
  width: 1.15em;
  height: 1.15em;
  border: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath transform='translate%286.04 6.04%29 scale%28.72%29' d='M10.8617 6.86863C10.8049 6.38 10.8118 5.86162 10.8091 5.35811C10.8065 4.86735 10.8665 4.34844 10.9154 3.87096C10.9297 3.72809 10.8479 3.59424 10.713 3.54485L0.684501 0.019231C0.506046 -0.0460975 0.308472 0.0611898 0.269701 0.247615C0.16454 0.754841 0.0758437 1.26791 0.00308098 1.78629C-0.0176325 1.93235 0.0678773 2.0731 0.205967 2.12408L8.64219 5.06546C8.76488 5.11061 8.84614 5.22639 8.8472 5.35705C8.84773 5.48718 8.76806 5.60402 8.64644 5.65023L0.260672 8.70846C0.123113 8.76104 0.0397284 8.90391 0.0625663 9.04944C0.144358 9.56623 0.241552 10.0772 0.35521 10.5828C0.396637 10.7682 0.595274 10.8723 0.772666 10.8043L10.6631 7.19793C10.7969 7.14641 10.8771 7.01098 10.8607 6.86863H10.8617Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath transform='translate%286.04 6.04%29 scale%28.72%29' d='M10.8617 6.86863C10.8049 6.38 10.8118 5.86162 10.8091 5.35811C10.8065 4.86735 10.8665 4.34844 10.9154 3.87096C10.9297 3.72809 10.8479 3.59424 10.713 3.54485L0.684501 0.019231C0.506046 -0.0460975 0.308472 0.0611898 0.269701 0.247615C0.16454 0.754841 0.0758437 1.26791 0.00308098 1.78629C-0.0176325 1.93235 0.0678773 2.0731 0.205967 2.12408L8.64219 5.06546C8.76488 5.11061 8.84614 5.22639 8.8472 5.35705C8.84773 5.48718 8.76806 5.60402 8.64644 5.65023L0.260672 8.70846C0.123113 8.76104 0.0397284 8.90391 0.0625663 9.04944C0.144358 9.56623 0.241552 10.0772 0.35521 10.5828C0.396637 10.7682 0.595274 10.8723 0.772666 10.8043L10.6631 7.19793C10.7969 7.14641 10.8771 7.01098 10.8607 6.86863H10.8617Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home:not(.diagram-page) .landing-diagram .diagram-viewport .tour-caption { color: var(--color-water); }
.home:not(.diagram-page) .landing-diagram .diagram-viewport .tour-btn { color: var(--color-water); }

/* The zoom bar is always showing at the card's bottom-right, quiet and plain
   (the round zoom button is not in this design). */
.home:not(.diagram-page) .landing-diagram .zoom-toggle { display: none; }

.home:not(.diagram-page) .landing-diagram .zoom-controls {
  display: flex;
  right: clamp(1rem, 5.4vw, 103px);
  bottom: clamp(0.75rem, 3.2vw, 60px);
  border: 0;
  background: var(--color-mist);
  box-shadow: none;
  font-size: clamp(0.75rem, 0.8vw, 15px);
}

.home:not(.diagram-page) .landing-diagram .diagram-viewport.zoom-open .zoom-controls { display: flex; }

/* The bar's chevron points down when closed and up when open, as in the design. */
.home:not(.diagram-page) .landing-diagram .diagram-guide-toggle[aria-expanded="false"] .diagram-guide-chevron { transform: none; }
.home:not(.diagram-page) .landing-diagram .diagram-guide-toggle[aria-expanded="true"] .diagram-guide-chevron { transform: rotate(180deg); }

/* Section labels ("Overview", "The resource") are thin outlined pills in the
   design; only the "Level 1" label is a solid navy one. */
.home .pill:not(.pill-navy) {
  padding: clamp(0.3rem, 0.42vw, 8px) clamp(0.7rem, 0.9vw, 17px);
  border: 1px solid var(--color-water);
  background: none;
  color: var(--color-water);
  font-size: clamp(0.8rem, 0.83vw, 16px);
}

.home .band-navy .pill:not(.pill-navy) { border-color: rgba(255, 255, 255, 0.45); color: var(--color-white); }

/* "The resource" sits above the heading, at the left, as in the design. */
.home .band-navy .section-head {
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: flex-end;
  gap: clamp(0.6rem, 1vw, 20px);
}

/* DSP, as drawn in the Figma design: the stage title sits inside its group as
   a rounded bar (not a tab on top of it), no shadow, and the box text is
   semi-bold. */
.diagram-heading.variant-c1,
.diagram-heading.variant-c2,
.diagram-heading.variant-c3,
.diagram-heading.variant-c4,
.diagram-heading.variant-c5,
.diagram-heading.variant-c6 {
  border-radius: calc(var(--fs, 12px) * 0.45);
  box-shadow: none;
}

.diagram-heading.variant-c2,
.diagram-heading.variant-c3 { color: var(--color-white); }

.diagram-viewport[data-view="dsp"] .diagram-box { font-weight: 600; }

/* The criteria boxes now sit beside this strip rather than over its foot,
   so its label is centred along it again. */
.diagram-box[data-box-id="dsp-multi-criteria-cost-benefit"] {
  font-size: calc(var(--fs, 12px) * 0.8);
  white-space: nowrap;
}

/* ==========================================================================
   Homepage refresh, from the 24 Sept Figma export (1920px frame). Sizes are the
   Figma px divided by 19.2 (vw) and capped at the Figma px, so they are exact at
   1920 and shrink with the screen. Wide screens only where the layout changes.
   ========================================================================== */

/* ---- Header: a touch shorter, bigger Home / Explore TPRAF ---- */
@media (min-width: 900px) {
  .home .site-header { --header-pad: clamp(1rem, 2.14vw, 41px); }
  .home .site-header .header-tools { margin-right: clamp(2rem, 12.7vw, 244px); }
  .home .site-header { padding-right: clamp(1.25rem, 5.94vw, 114px); }
  .home .site-header .header-nav { gap: clamp(1rem, 1.82vw, 35px); }
  .home .site-header .header-nav a { font-size: clamp(0.95rem, 1.354vw, 26px); }
  .home .site-header .header-nav .header-cta {
    height: clamp(36px, 2.66vw, 51px);
    padding: 0 0.7em 0 0.9em;
    gap: 0.45em;
    border-radius: clamp(6px, 0.42vw, 8px);
  }
  .home .site-header .header-nav .btn-sm-icon { width: 0.95em; height: 0.95em; }
}

/* ---- Hero: 590px tall, tagline and link a little lower ---- */
@media (min-width: 820px) {
  .home .hero-grid { padding-top: clamp(3rem, 8.72vw, 167px); padding-bottom: clamp(3rem, 8.72vw, 167px); }
  .home .hero-side { align-self: start; margin-top: clamp(0px, 3.7vw, 71px); }
  .home .hero .tagline { margin-bottom: clamp(1.25rem, 2.86vw, 55px); }
}

/* ---- What is TPRAF?: the picture sits straight on the page, no white card ---- */
.home .what-figure { background: none; }
.home .what-copy .what-lead { max-width: none; }
.audience-tile { gap: 0; }

/* Outlined labels ("Overview", "The resource") are as big as the Level 1 label. */
.home .pill:not(.pill-navy) {
  padding: clamp(0.5rem, 0.83vw, 16px) clamp(0.9rem, 1.3vw, 25px);
  border-radius: clamp(8px, 0.63vw, 12px);
  font-size: clamp(1rem, 1.25vw, 24px);
}

.home .band-navy .pill:not(.pill-navy) { border-color: var(--color-leaf); }

/* "About the TPRAF Diagram" is one line. */
@media (min-width: 820px) {
  .home .band-navy .section-head h2 { max-width: none; }
}

/* ---- The simple form ---- */
@media (min-width: 900px) {
  .home .band-leaf .container { padding-left: clamp(1.25rem, 7.19vw, 138px); }
  .home .band-leaf .section-head h2,
  .home .landing-diagram .diagram-title { margin-left: 0; }
  .home .landing-diagram { margin-right: clamp(0px, 0.42vw, 8px); }
  .home .band-leaf { padding-bottom: clamp(3rem, 8.4vw, 161px); }

  .home:not(.diagram-page) .landing-diagram .landing-extend {
    margin-top: clamp(0.9rem, 2.08vw, 40px);
    height: clamp(2.75rem, 3.02vw, 58px);
    min-width: 0;
    padding: 0 clamp(0.8rem, 1vw, 19px) 0 clamp(0.9rem, 1.2vw, 23px);
    gap: clamp(0.5rem, 0.7vw, 13px);
    border-radius: clamp(8px, 0.52vw, 10px);
    font-size: clamp(1rem, 1.25vw, 24px);
    font-weight: 400;
  }
  .home:not(.diagram-page) .landing-diagram .btn-sm-icon,
  .home:not(.diagram-page) .landing-diagram .tour-guide .tour-play-icon { width: 1em; height: 1em; }

  .home:not(.diagram-page) .landing-diagram .diagram-guide { margin-top: clamp(1rem, 2.34vw, 45px); }
  .home:not(.diagram-page) .landing-diagram .diagram-guide-toggle {
    font-size: clamp(1rem, 1.25vw, 24px);
    min-height: clamp(3rem, 3.96vw, 76px);
    padding: 0 clamp(1rem, 2.4vw, 46px) 0 clamp(1rem, 1.04vw, 20px);
    line-height: 1.2;
  }
  .home:not(.diagram-page) .landing-diagram .diagram-guide-chevron { width: clamp(14px, 1.25vw, 24px); height: clamp(14px, 1.25vw, 24px); }
  .home:not(.diagram-page) .landing-diagram .diagram-viewport { margin-top: clamp(1rem, 3.5vw, 67px); }
}

/* The card: 100px inside on every side, a hairline above and below the diagram. */
@media (min-width: 1100px) {
  .home:not(.diagram-page) .landing-diagram .diagram-viewport {
    position: relative;
    padding: clamp(0.75rem, 3.1vw, 60px) clamp(0.75rem, 5.2vw, 100px) clamp(0.75rem, 4.98vw, 96px);
  }

  .home:not(.diagram-page) .landing-diagram .diagram-viewport::after {
    content: "";
    position: absolute;
    left: clamp(0.75rem, 5.2vw, 100px);
    right: clamp(0.75rem, 5.2vw, 100px);
    bottom: clamp(0.75rem, 3.5vw, 67px);
    height: 1px;
    background: #ececec;
  }

  .home:not(.diagram-page) .landing-diagram .diagram-viewport > .diagram-tour {
    margin-bottom: clamp(0.5rem, 1.15vw, 22px);
    padding-bottom: clamp(0.75rem, 2.55vw, 49px);
    gap: clamp(0.75rem, 1.25vw, 24px);
  }

  .home:not(.diagram-page) .landing-diagram .diagram-viewport .tour-play {
    height: clamp(2.75rem, 3.02vw, 58px);
    padding: 0 clamp(0.9rem, 1.2vw, 23px);
    gap: 0.6em;
    border-radius: clamp(8px, 0.52vw, 10px);
    font-size: clamp(1rem, 1.25vw, 24px);
  }
  .home:not(.diagram-page) .landing-diagram .diagram-viewport .tour-play:not(.tour-guide) {
    padding-left: clamp(1rem, 1.6vw, 31px);
    padding-right: clamp(0.9rem, 1.25vw, 24px);
    gap: clamp(0.6rem, 0.85vw, 16px);
  }
  .home:not(.diagram-page) .landing-diagram .diagram-viewport .tour-play:not(.tour-guide) .tour-play-icon {
    border-left-width: 12px;
    border-top-width: 8px;
    border-bottom-width: 8px;
  }

  /* The diagram fills the card's whole inner width: the simple form leaves 4% of
     empty stage each side, so the frame is stretched past the card's padding by
     that much and the empty edges are clipped. */
  .home:not(.diagram-page) .landing-diagram .diagram-stage-wrap {
    width: 108.8%;
    margin-left: -4.4%;
  }

  .home:not(.diagram-page) .landing-diagram .zoom-controls {
    right: clamp(0.75rem, 5.2vw, 100px);
    bottom: clamp(0.75rem, 6.25vw, 120px);
    min-height: clamp(2.5rem, 3.1vw, 60px);
    padding: 0 clamp(0.75rem, 1.1vw, 21px);
    border-radius: clamp(8px, 0.6vw, 12px);
    font-size: clamp(0.8rem, 0.9vw, 17px);
    align-items: center;
  }
}

/* ---- Further Information: no italics in the funding line, less air on top ---- */
.home .ack strong em { font-style: normal; }
@media (min-width: 820px) {
  .home .section-further { padding-top: clamp(3rem, 4.8vw, 92px); }
}

/* ---- Footer: the 1920px design is set about 11% larger than dare.ac.uk's ---- */
@media (min-width: 1701px) {
  .home .footer-grid {
    --fs-body1: 21px;
    --fs-body2: 24.4px;
    --logo-h: 80px;
    grid-template-columns: 21.56vw minmax(0, 1fr);
  }
  .home .footer-grid { max-width: 1920px; padding-left: 117px; padding-right: 117px; }
  .home .footer-logo { width: 361px; transform: translateX(-114px); }
  .home .footer-contacts { padding-top: 78px; padding-left: 16px; }
  .home .footer-funders { height: 86px; }
  .home .footer-signoff .container { max-width: 1920px; padding-left: 117px; }
}

/* ==========================================================================
   Diagram page on a desktop, from the 24 Sept Figma export (1920px frame): a
   centred title band, coloured level tabs, the "How to explore" bar that opens
   on demand, and the diagram in the same white card as the homepage. Phones
   and small tablets (900px and under) keep their own layouts, above.
   ========================================================================== */
@media (max-width: 900px) {
  /* The design has no phone layout: the guide stays open there, as before. */
  .diagram-page .diagram-guide[data-collapsed="true"] .diagram-guide-body { display: grid; }
  .diagram-page .diagram-guide-chevron { display: none; }
  .diagram-page .diagram-guide-toggle { pointer-events: none; cursor: default; }
}

@media (min-width: 901px) {
  /* Title band */
  .diagram-page .diagram-hero .breadcrumb { display: none; }
  .diagram-page .diagram-hero-inner {
    display: block;
    padding-top: clamp(2rem, 6.67vw, 128px);
    padding-bottom: clamp(2rem, 6.8vw, 130px);
    text-align: center;
  }
  .diagram-page .diagram-hero .hero-label {
    min-width: clamp(6rem, 7.08vw, 136px);
    margin: 0 0 clamp(1rem, 1.6vw, 31px);
    padding: clamp(0.5rem, 0.83vw, 16px) clamp(0.9rem, 1.45vw, 28px);
    border: 0;
    border-radius: clamp(8px, 0.63vw, 12px);
    background: var(--color-water);
    color: var(--color-white);
    font-size: clamp(1rem, 1.25vw, 24px);
    font-weight: 400;
    line-height: 1.1197;
    text-align: center;
  }
  .diagram-page .diagram-hero h1 {
    max-width: 44.8vw;
    margin: 0 auto;
    font-size: clamp(2rem, 3.96vw, 76px);
    font-weight: 400;
    line-height: 1.1197;
    color: var(--color-water);
  }

  /* Grey page, the card on the design's 138px margins */
  .diagram-page .diagram-band {
    background: #e9e9e9;
    padding-top: clamp(1.5rem, 5.05vw, 97px);
    padding-bottom: clamp(2rem, 5.26vw, 101px);
  }
  .diagram-page .diagram-band .container {
    padding-left: clamp(1.25rem, 7.19vw, 138px);
    padding-right: clamp(1.25rem, 6.3vw, 121px);
  }
  .diagram-page .landing-diagram {
    --card-pad: clamp(0.75rem, 5.2vw, 100px);
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    align-items: start;
  }
  /* Views other than the simple form keep their tighter card until they have a design. */
  .diagram-page .landing-diagram:has(.diagram-viewport:not([data-view="simple"])) { --card-pad: clamp(0.75rem, 1.5vw, 28px); }

  /* Level tabs: green when current, white otherwise */
  .diagram-page .landing-diagram .diagram-toolbar { grid-column: 1; grid-row: 1; padding: 4px; margin: -4px; gap: clamp(0.75rem, 2.24vw, 43px); }
  .diagram-page .level-tab {
    height: clamp(2.75rem, 3.13vw, 60px);
    padding: 0 clamp(1rem, 1.4vw, 27px);
    border-radius: clamp(8px, 0.52vw, 10px);
    font-size: clamp(1rem, 1.25vw, 24px);
    font-weight: 400;
  }
  .diagram-page .level-tab[aria-selected="true"] { background: var(--color-leaf); color: var(--color-water); }

  /* How to explore: a white bar that opens on demand */
  .diagram-page .landing-diagram .diagram-guide {
    grid-row: 2;
    max-width: none;
    margin: clamp(1rem, 3.28vw, 63px) 0 0;
    border: 0;
    border-radius: clamp(6px, 0.52vw, 10px);
    background: var(--color-white);
  }
  .diagram-page .diagram-guide-toggle {
    min-height: clamp(3rem, 3.96vw, 76px);
    padding: 0 clamp(1rem, 2.4vw, 46px) 0 clamp(1rem, 1.04vw, 20px);
    background: var(--color-white);
    font-size: clamp(1rem, 1.25vw, 24px);
    line-height: 1.2;
    cursor: pointer;
  }
  .diagram-page .diagram-guide-icon { display: none; }
  .diagram-page .diagram-guide-chevron { width: clamp(14px, 1.25vw, 24px); height: clamp(14px, 1.25vw, 24px); }
  .diagram-page .diagram-guide-toggle[aria-expanded="false"] .diagram-guide-chevron { transform: none; }
  .diagram-page .diagram-guide-toggle[aria-expanded="true"] .diagram-guide-chevron { transform: rotate(180deg); }

  .diagram-page .landing-diagram .process-toggle { grid-row: 3; }
  .diagram-page .landing-diagram .view-next { display: none; }

  /* The card: the tour buttons and a hairline at the top, the zoom bar at the foot */
  .diagram-page .landing-diagram .diagram-viewport {
    position: relative;
    grid-row: 4;
    margin-top: clamp(1rem, 4.17vw, 80px);
    padding: clamp(5.5rem, 9.9vw, 190px) var(--card-pad) clamp(0.75rem, 4.98vw, 96px);
    border-radius: clamp(16px, 1.3vw, 25px);
  }
  .diagram-page .landing-diagram .diagram-viewport::before,
  .diagram-page .landing-diagram .diagram-viewport::after {
    content: "";
    position: absolute;
    left: var(--card-pad);
    right: var(--card-pad);
    height: 1px;
    background: #ececec;
    pointer-events: none;
  }
  .diagram-page .landing-diagram .diagram-viewport::before { top: clamp(4rem, 8.7vw, 167px); }
  .diagram-page .landing-diagram .diagram-viewport::after { bottom: clamp(0.75rem, 3.5vw, 67px); }

  .diagram-page .landing-diagram > .diagram-tour {
    grid-row: 4;
    grid-column: 1;
    justify-self: start;
    align-self: start;
    z-index: 12;
    flex-wrap: nowrap;
    width: auto;
    max-width: none;
    margin: calc(clamp(1rem, 4.17vw, 80px) + clamp(0.75rem, 3.1vw, 60px)) 0 0 var(--card-pad);
    padding: 0;
    gap: 0.6rem clamp(0.75rem, 1.25vw, 24px);
    background: none;
  }
  .diagram-page .landing-diagram > .diagram-tour[hidden] { display: none; }
  .diagram-page .landing-diagram .tour-caption,
  .diagram-page .landing-diagram .tour-btn { color: var(--color-water); }

  .diagram-page .landing-diagram .tour-play {
    flex-direction: row-reverse;
    height: clamp(2.75rem, 3.02vw, 58px);
    padding: 0 clamp(0.9rem, 1.2vw, 23px);
    gap: 0.6em;
    border-radius: clamp(8px, 0.52vw, 10px);
    background: var(--color-water);
    color: var(--color-white);
    font-size: clamp(1rem, 1.25vw, 24px);
  }
  .diagram-page .landing-diagram .tour-play:not(.tour-guide):not(#lesson-start) {
    padding-left: clamp(1rem, 1.6vw, 31px);
    padding-right: clamp(0.9rem, 1.25vw, 24px);
    gap: clamp(0.6rem, 0.85vw, 16px);
  }
  .diagram-page .landing-diagram .tour-play:not(.tour-guide):not(#lesson-start) .tour-play-icon {
    border-left-width: 12px;
    border-top-width: 8px;
    border-bottom-width: 8px;
  }
  .diagram-page .landing-diagram .tour-play.tour-guide,
  .diagram-page .landing-diagram .lesson-launch .tour-play { background: var(--color-leaf); color: var(--color-water); }
  .diagram-page .landing-diagram .tour-guide .tour-play-icon,
  .diagram-page .landing-diagram .lesson-launch .tour-play-icon {
    width: 1em;
    height: 1em;
    border: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath transform='translate%286.04 6.04%29 scale%28.72%29' d='M10.8617 6.86863C10.8049 6.38 10.8118 5.86162 10.8091 5.35811C10.8065 4.86735 10.8665 4.34844 10.9154 3.87096C10.9297 3.72809 10.8479 3.59424 10.713 3.54485L0.684501 0.019231C0.506046 -0.0460975 0.308472 0.0611898 0.269701 0.247615C0.16454 0.754841 0.0758437 1.26791 0.00308098 1.78629C-0.0176325 1.93235 0.0678773 2.0731 0.205967 2.12408L8.64219 5.06546C8.76488 5.11061 8.84614 5.22639 8.8472 5.35705C8.84773 5.48718 8.76806 5.60402 8.64644 5.65023L0.260672 8.70846C0.123113 8.76104 0.0397284 8.90391 0.0625663 9.04944C0.144358 9.56623 0.241552 10.0772 0.35521 10.5828C0.396637 10.7682 0.595274 10.8723 0.772666 10.8043L10.6631 7.19793C10.7969 7.14641 10.8771 7.01098 10.8607 6.86863H10.8617Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath transform='translate%286.04 6.04%29 scale%28.72%29' d='M10.8617 6.86863C10.8049 6.38 10.8118 5.86162 10.8091 5.35811C10.8065 4.86735 10.8665 4.34844 10.9154 3.87096C10.9297 3.72809 10.8479 3.59424 10.713 3.54485L0.684501 0.019231C0.506046 -0.0460975 0.308472 0.0611898 0.269701 0.247615C0.16454 0.754841 0.0758437 1.26791 0.00308098 1.78629C-0.0176325 1.93235 0.0678773 2.0731 0.205967 2.12408L8.64219 5.06546C8.76488 5.11061 8.84614 5.22639 8.8472 5.35705C8.84773 5.48718 8.76806 5.60402 8.64644 5.65023L0.260672 8.70846C0.123113 8.76104 0.0397284 8.90391 0.0625663 9.04944C0.144358 9.56623 0.241552 10.0772 0.35521 10.5828C0.396637 10.7682 0.595274 10.8723 0.772666 10.8043L10.6631 7.19793C10.7969 7.14641 10.8771 7.01098 10.8607 6.86863H10.8617Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .diagram-page .landing-diagram .zoom-toggle { display: none; }
  .diagram-page .landing-diagram .zoom-controls {
    display: flex;
    right: var(--card-pad);
    bottom: clamp(0.75rem, 6.25vw, 120px);
    align-items: center;
    min-height: clamp(2.5rem, 3.1vw, 60px);
    padding: 0 clamp(0.75rem, 1.1vw, 21px);
    border: 0;
    border-radius: clamp(8px, 0.6vw, 12px);
    background: var(--color-mist);
    box-shadow: none;
    font-size: clamp(0.8rem, 0.9vw, 17px);
  }
}

/* The simple form fills the card's whole inner width: the frame is stretched past
   the card's padding by the 4% of empty stage it leaves each side. */
@media (min-width: 1100px) {
  .diagram-page .diagram-viewport[data-view="simple"] .diagram-stage-wrap {
    width: 108.8%;
    margin-left: -4.4%;
  }
}

/* ==========================================================================
   The zoom controls never sit on top of the diagram. On a desktop the bar has
   its own band at the foot of the card, between the diagram and the hairline;
   on a tablet the round button does; on a phone the bar, when opened, makes
   room for itself under the strip of icon buttons.
   ========================================================================== */
@media (min-width: 901px) {
  :is(.home:not(.diagram-page), .diagram-page) .landing-diagram .diagram-viewport {
    padding-bottom: clamp(5.75rem, 8.7vw, 167px);
  }
  :is(.home:not(.diagram-page), .diagram-page) .landing-diagram .zoom-controls {
    bottom: clamp(0.75rem, 4.6vw, 88px);
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .home .landing-diagram .diagram-viewport { padding-bottom: 5rem; }
  .home .landing-diagram .zoom-toggle { bottom: 0.75rem; }
  .home .landing-diagram .zoom-controls { bottom: 0.75rem; }
}

@media (max-width: 760px) {
  .diagram-page .landing-diagram .diagram-viewport.zoom-open { padding-top: 6.4rem; }
  .diagram-page .landing-diagram .zoom-controls { top: 3.5rem; }
}

/* Home stays in the phone header on the diagram page (the logo already goes
   home on the homepage itself, so it stays hidden there). */
@media (max-width: 640px) {
  .diagram-page .site-header .header-nav .header-home { display: inline; }
}