/* DFES 2026, Northern Powergrid prototype styles */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: light; }
body {
  font-family: var(--font-body);
  color: var(--text-color-1);
  background: var(--background-color);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; }

.holder {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* ------------------------------------------------------------------- */
/* Top utility bar */
.utility-bar {
  background: var(--black-100);
  color: var(--white);
  font-size: 13px;
  /* Reset inherited em-based line-height from style.css so the Power cut
     pill sits in the bar with a small black border (matches graphs.html). */
  line-height: normal;
}
.utility-bar .holder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
}
.utility-bar a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  margin-left: var(--sp-5);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color var(--dur-normal) var(--ease-std);
}
.utility-bar a:first-of-type { margin-left: 0; }
.utility-bar a:hover { color: var(--white); }
.utility-bar .powercut {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red-100);
  color: var(--white);
  padding: 6px 14px 6px 12px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--dur-normal) var(--ease-std);
}
@media (hover: hover) { .utility-bar .powercut:hover { background: var(--black-100); color: var(--white); } }
.utility-bar .powercut svg { width: 14px; height: 14px; }

/* Site header */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--navy-10);
  position: sticky;
  top: 0;
  z-index: 1050; /* above Leaflet controls */
}
.site-header .holder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.brand img { height: 38px; width: auto; }
.brand .breadcrumb {
  color: var(--black-70);
  font-size: 14px;
  border-left: 1px solid var(--navy-10);
  padding-left: 14px;
  font-weight: 500;
}
.brand .breadcrumb strong { color: var(--black-100); font-weight: 600; }
.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-nav a {
  color: var(--black-100);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
}
.site-nav a:hover { color: var(--red-100); }

/* ------------------------------------------------------------------- */
/* Hero band, theme-c (red) */
.hero {
  position: relative;
  background: var(--red-100);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 30%, rgba(255,255,255,0.08), transparent 60%),
              linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.18));
  pointer-events: none;
  z-index: 1;
}
.hero .holder {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--sp-7);
  padding-top: var(--sp-9);
  padding-bottom: var(--sp-9);
  align-items: center;
}
.hero .eyebrow {
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--sp-4);
}
.hero h1 {
  color: var(--white);
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.92;
  margin-bottom: var(--sp-5);
}
.hero h1 .accent {
  display: block;
  color: var(--pink-30);
  font-size: 0.42em;
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin-top: 18px;
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: none;
}
.hero p.lede {
  color: rgba(255,255,255,0.92);
  font-size: 18px;
  line-height: 1.55;
  max-width: 540px;
  margin-bottom: var(--sp-6);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
}
.hero-chip strong { font-weight: 700; }
.hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* Buttons, pill */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background var(--dur-normal) var(--ease-std), color var(--dur-normal) var(--ease-std), border-color var(--dur-normal) var(--ease-std), transform var(--dur-fast);
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--white); color: var(--black-100); }
@media (hover: hover) { .btn--primary:hover { background: var(--black-100); color: var(--white); } }
.btn--ghost-on-red { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); }
@media (hover: hover) { .btn--ghost-on-red:hover { background: var(--white); color: var(--red-100); border-color: var(--white); } }
.btn--dark { background: var(--black-100); color: var(--white); }
@media (hover: hover) { .btn--dark:hover { background: var(--red-100); color: var(--white); } }
.btn--outline { background: transparent; color: var(--black-100); border-color: var(--black-100); }
@media (hover: hover) { .btn--outline:hover { background: var(--black-100); color: var(--white); } }
.btn--sm { padding: 9px 16px; font-size: 13px; gap: 6px; }

/* Hero animated network, design-system reference. The integration
   override section below sets aspect-ratio: 1/1 to better match the
   portrait NPg silhouette. */
.hero-network {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.hero-network svg { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------------- */
/* Stats strip, theme-b */
.stats-strip {
  background: var(--black-100);
  color: var(--white);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.stats-strip .holder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}
.stat .label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink-30);
  font-weight: 700;
  margin-bottom: 8px;
}
.stat .value {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  margin-bottom: 6px;
}
.stat .value .unit { font-size: 0.5em; opacity: 0.7; margin-left: 6px; }
.stat .desc { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.4; }

/* ------------------------------------------------------------------- */
/* Map workspace, theme-a */
.workspace {
  background: var(--white);
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
}
.workspace-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.workspace-head h2 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  margin-bottom: 8px;
}
.workspace-head p {
  font-size: 16px;
  color: var(--black-70);
  max-width: 640px;
}

.workspace-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--sp-6);
}

/* Controls */
.controls {
  background: var(--black-5);
  border: 1px solid var(--navy-10);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  align-self: start;
  position: sticky;
  top: 92px;
}
.control-group h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--black-70);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.control-group h3 .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--black-100);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
}

/* Scenario picker, cards */
.scenario-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.scenario-card {
  position: relative;
  padding: 12px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--navy-10);
  background-color: var(--white) !important;
  background-image: none !important;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .scenario-card:hover { border-color: var(--black-100); } }
.scenario-card.active {
  border-color: var(--black-100);
  background-color: var(--white) !important;
  background-image: none !important;
  outline: 1px solid var(--black-100);
  outline-offset: -1px;
}
.scenario-card .swatch {
  width: 18px; height: 18px; border-radius: 999px;
  margin-bottom: 8px;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--navy-20);
}
.scenario-card .name {
  font-weight: 700; font-size: 13px; line-height: 1.2;
  color: var(--black-100); margin-bottom: 4px;
}
.scenario-card .nz {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.scenario-card .nz.yes { color: var(--teal-90); }
.scenario-card .nz.no  { color: var(--black-70); }

/* Selects */
.select-wrap { position: relative; }
.select-wrap select {
  appearance: none;
  width: 100%;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--navy-20);
  background: var(--white);
  padding: 0 36px 0 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--black-100);
  font-weight: 500;
  cursor: pointer;
}
.select-wrap select:focus {
  outline: 2px solid var(--purple-20);
  outline-offset: 2px;
  border-color: var(--black-100);
}
.select-wrap::after {
  content: "";
  position: absolute;
  right: 14px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--black-70);
  border-bottom: 2px solid var(--black-70);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Segmented */
.segmented {
  display: inline-flex;
  background: var(--white);
  border: 1.5px solid var(--navy-20);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}
.segmented button {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--black-70);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.segmented button.active {
  background: var(--black-100);
  color: var(--white);
}

/* Timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.timeline-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.timeline-year {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 0.9;
  color: var(--black-100);
}
.timeline-year .small {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--black-70);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}
.timeline-controls {
  display: flex;
  gap: 8px;
}
.icon-btn {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--black-100);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast);
}
@media (hover: hover) { .icon-btn:hover { background: var(--red-100); } }
.icon-btn.ghost { background: var(--white); color: var(--black-100); border: 1.5px solid var(--navy-20); }
@media (hover: hover) { .icon-btn.ghost:hover { background: var(--black-5); } }
.icon-btn svg { width: 14px; height: 14px; }

.scrubber {
  position: relative;
  height: 44px;
  user-select: none;
}
.scrubber-track {
  position: absolute;
  left: 0; right: 0; top: 18px;
  height: 6px;
  background: var(--navy-10);
  border-radius: 3px;
  overflow: hidden;
}
.scrubber-fill {
  height: 100%;
  background: var(--red-100);
  border-radius: 3px;
}
.scrubber-thumb {
  position: absolute;
  top: 12px;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--white);
  border: 3px solid var(--red-100);
  transform: translateX(-50%);
  cursor: grab;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform var(--dur-fast);
}
.scrubber-thumb:active { cursor: grabbing; transform: translateX(-50%) scale(1.15); }
.scrubber-ticks {
  position: absolute;
  left: 0; right: 0; top: 30px;
  display: flex;
  justify-content: space-between;
}
.scrubber-tick {
  font-size: 10px;
  color: var(--black-60);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.scrubber-tick.major { color: var(--black-100); }
.scrubber-input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

/* Map area */
.map-stage {
  position: relative;
  background: var(--navy-25);
  border: 1px solid var(--navy-10);
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 640px;
  display: flex;
  flex-direction: column;
}
.map-canvas {
  flex: 1;
  position: relative;
  background: linear-gradient(180deg, #f4f4f7, #ededed);
}
.map-svg {
  width: 100%;
  height: 100%;
  position: absolute; inset: 0;
}
.map-overlay-top {
  position: absolute;
  top: 16px; left: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 5;
}
.map-overlay-top .pill-info {
  background: var(--white);
  border-radius: var(--r-pill);
  padding: 8px 14px 8px 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  border: 1px solid var(--navy-10);
}
.map-overlay-top .pill-info .dot {
  width: 22px; height: 22px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
}

.map-overlay-right {
  position: absolute;
  top: 16px; right: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}
.map-zoom {
  background: var(--white);
  border: 1px solid var(--navy-10);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.map-zoom button {
  width: 36px; height: 36px;
  font-size: 18px;
  font-weight: 600;
  color: var(--black-100);
}
@media (hover: hover) { .map-zoom button:hover { background: var(--black-5); } }
.map-zoom button + button { border-top: 1px solid var(--navy-10); }

.map-search {
  position: relative;
  background: var(--white);
  border: 1px solid var(--navy-10);
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  padding: 0 14px;
  height: 38px;
  width: 220px;
}
.map-search svg { width: 14px; height: 14px; color: var(--black-70); }
.map-search input {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--black-100);
  flex: 1;
  margin-left: 8px;
  outline: none;
}

/* Map legend (below map) */
.map-legend {
  border-top: 1px solid var(--navy-10);
  background: var(--white);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.legend-bar-wrap {
  flex: 1;
  min-width: 320px;
}
.legend-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--black-70);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.legend-title strong { color: var(--black-100); letter-spacing: 0.04em; text-transform: none; font-size: 13px; }
.legend-bar {
  height: 12px;
  border-radius: 6px;
  position: relative;
}
.legend-scale {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--black-70);
  margin-top: 4px;
  font-weight: 600;
}
.legend-export {
  display: flex;
  gap: 8px;
}

/* Substation popup (sparkline) */
.popup {
  position: absolute;
  z-index: 10;
  background: var(--white);
  border-radius: var(--r-md);
  border: 1px solid var(--navy-10);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 14px;
  width: 280px;
  pointer-events: none;
  transform: translate(-50%, -100%);
  margin-top: -16px;
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.popup.show { opacity: 1; }
.popup::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: var(--white);
  border-right: 1px solid var(--navy-10);
  border-bottom: 1px solid var(--navy-10);
}
.popup .pop-eye {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--black-70);
  font-weight: 700;
  margin-bottom: 2px;
}
.popup .pop-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
  color: var(--black-100);
}
.popup .pop-now {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.popup .pop-now .v {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  color: var(--black-100);
}
.popup .pop-now .u { font-size: 12px; color: var(--black-70); }
.popup .pop-delta {
  font-size: 12px;
  font-weight: 600;
  color: var(--teal-90);
  margin-bottom: 10px;
}
.popup .pop-delta.down { color: var(--red-100); }
.popup .spark { width: 100%; height: 56px; display: block; }
.popup .spark-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--black-60);
  margin-top: 2px;
  font-weight: 600;
}

/* ------------------------------------------------------------------- */
/* About, scenario comparison cards (theme-d) */
.about-band {
  background: var(--theme-d-background);
  padding: var(--sp-9) 0;
}
.about-head { margin-bottom: var(--sp-7); max-width: 720px; }
.about-head .eyebrow { color: var(--red-100); margin-bottom: var(--sp-3); }
.about-head h2 {
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1;
  margin-bottom: var(--sp-4);
}
.about-head p {
  font-size: 17px;
  color: var(--black-80);
  line-height: 1.5;
}

.scenario-grid {
  display: grid;
  /* 3 cols while Reference + Falling Behind are hidden; restore repeat(5, 1fr) when they return */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.scen-card {
  background: var(--white);
  border: 1px solid var(--navy-10);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-normal) var(--ease-std), border-color var(--dur-normal) var(--ease-std);
  cursor: pointer;
}
@media (hover: hover) { .scen-card:hover { transform: translateY(-3px); border-color: var(--black-100); } }
.scen-card .topbar {
  height: 6px;
  margin: -24px -24px 0 -24px;
}
.scen-card .scen-eye {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--black-70);
  margin-top: var(--sp-3);
}
.scen-card h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--black-100);
  margin: 0;
}
.scen-card .nz-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  align-self: flex-start;
}
.scen-card .nz-pill.yes { background: var(--teal-20); color: var(--teal-100); }
.scen-card .nz-pill.no  { background: var(--black-10); color: var(--black-90); }
.scen-card p.scen-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--black-80);
  flex: 1;
}
.scen-card .scen-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--navy-10);
  padding-top: var(--sp-3);
}
.scen-card .scen-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
}
.scen-card .scen-stat .k { color: var(--black-70); }
.scen-card .scen-stat .v { font-weight: 700; color: var(--black-100); font-family: var(--font-display); font-size: 18px; }

/* Stat callout band, pink-tinted theme-e */
.callout-band {
  background: var(--pink-5);
  padding: var(--sp-9) 0;
}
.callout-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-7);
  align-items: center;
}
.callout-grid h2 {
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1;
  margin-bottom: var(--sp-4);
}
.callout-grid .quote {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.1;
  color: var(--black-100);
  border-left: 4px solid var(--red-100);
  padding-left: var(--sp-4);
}
.callout-numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.callout-num {
  background: var(--white);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  border: 1px solid var(--purple-10);
}
.callout-num .v {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  color: var(--red-100);
  margin-bottom: 6px;
}
.callout-num .l {
  font-size: 13px;
  font-weight: 600;
  color: var(--black-80);
  line-height: 1.35;
}

/* ------------------------------------------------------------------- */
/* Footer, theme-b */
.site-footer {
  background: var(--black-100);
  color: var(--white);
  padding-top: var(--sp-9);
  padding-bottom: var(--sp-6);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-top h4 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  margin-bottom: var(--sp-3);
  color: var(--white);
  text-transform: uppercase;
}
.footer-top p { color: rgba(255,255,255,0.78); font-size: 15px; line-height: 1.55; max-width: 380px; margin-bottom: var(--sp-4); }
.footer-col .col-eye {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink-30);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 14px; font-weight: 500; }
.footer-col a:hover { color: var(--white); text-decoration: underline; }

.partners {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.partners .partner-eye { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink-30); font-weight: 700; }
.partners .partner-row { display: flex; gap: var(--sp-5); align-items: center; }
.partners img.partner-logo { height: 28px; opacity: 0.85; filter: brightness(0) invert(1); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.footer-bottom a { color: rgba(255,255,255,0.85); text-decoration: none; }
.footer-bottom a:hover { color: var(--white); }

/* Section header eyebrow used inside workspace */
.eye-red { color: var(--red-100); }

/* Skeleton helpers */
.muted { color: var(--black-70); }

/* Responsive */
@media (max-width: 1100px) {
  .scenario-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-strip .holder { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .callout-grid { grid-template-columns: 1fr; }
}
@media (max-width: 840px) {
  .hero .holder { grid-template-columns: 1fr; }
  .hero-network { display: none; }
  .workspace-grid { grid-template-columns: 1fr; }
  .controls { position: static; }
  .footer-top { grid-template-columns: 1fr; }
  /* Site header, declutter for small screens */
  .site-header .holder { padding-top: 12px; padding-bottom: 12px; gap: 14px; }
  .brand .breadcrumb { display: none; }
  .site-nav { gap: 16px; }
  .site-nav a { font-size: 14px; }
  .site-nav .btn { padding: 6px 12px !important; font-size: 13px; }
}
@media (max-width: 560px) {
  .site-nav a:not(.btn) { display: none; }
  .site-nav .btn { padding: 6px 10px !important; }
  .utility-bar .holder > .right span { display: none; }
}

/* ===================================================================
   THEME OVERRIDE, Bold/Impact (default) is what's defined above.
   Calm/Editorial mode flips the hero to theme-d (off-white) and
   softens accents. Activated by .mode-calm on <body>.
   =================================================================== */
.mode-calm .hero {
  background: var(--theme-d-background);
  color: var(--black-100);
}
.mode-calm .hero h1 { color: var(--black-100); }
.mode-calm .hero h1 .accent { color: var(--red-100); }
.mode-calm .hero p.lede { color: var(--black-80); }
.mode-calm .hero .eyebrow { color: var(--red-100); }
.mode-calm .hero-chip {
  background: var(--white);
  border-color: var(--navy-10);
  color: var(--black-100);
}
.mode-calm .btn--primary { background: var(--black-100); color: var(--white); }
@media (hover: hover) { .mode-calm .btn--primary:hover { background: var(--red-100); } }
.mode-calm .btn--ghost-on-red { color: var(--black-100); border-color: var(--black-100); }
@media (hover: hover) { .mode-calm .btn--ghost-on-red:hover { background: var(--black-100); color: var(--white); border-color: var(--black-100); } }
.mode-calm .hero::after {
  background: radial-gradient(ellipse at 80% 30%, rgba(206,0,55,0.05), transparent 60%);
}
.mode-calm .stats-strip {
  background: var(--white);
  color: var(--black-100);
  border-top: 1px solid var(--navy-10);
  border-bottom: 1px solid var(--navy-10);
}
.mode-calm .stats-strip .stat .label { color: var(--red-100); }
.mode-calm .stats-strip .stat .value { color: var(--black-100); }
.mode-calm .stats-strip .stat .desc { color: var(--black-70); }
.mode-calm .callout-band { background: var(--white); }
.mode-calm .callout-num { background: var(--pink-5); border-color: var(--pink-20); }


/* =========================================================================
   DFES INDEX PAGE, INTEGRATION OVERRIDES
   -------------------------------------------------------------------------
   Everything below was originally in resources/redesign.css and has been
   folded in here so app.css is the single canonical stylesheet. Both
   index.html and graphs.html load this file.

   These rules wrap the redesign visual language around the existing
   dfes.js / config.js / Leaflet DOM hooks (#scenario, #parameter-holder,
   #scale-holder, .barchart .balloon, .leaflet-control-container .scenario,
   .pip-labels, etc.). They do not appear on graphs.html because that page
   doesn't render any of those elements; the rules are dormant there.

   Some selectors below (e.g. .scrubber, .scrubber-track, .scrubber-thumb,
   .scrubber-ticks) are also defined earlier in this file as part of the
   design-system reference. The rules below override with the actual
   integration-tested values; CSS source order means the later ones win.
   ========================================================================= */

/* DFES 2026 redesign, chrome, buttons, footer.
   This file is loaded AFTER style.css in index.html so its rules win.
   Subsequent redesign steps will append more sections (hero, stats strip,
   workspace, scenario cards, callout, etc.). When the migration is
   complete style.css can be removed. */


/* === Resets & globals === */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: var(--font-body);
	color: var(--text-color-1);
	background: var(--background-color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; }

/* Override the existing 1080px holder to the redesign's 1280px max */
.holder {
	width: 100%;
	max-width: var(--max-content-width);
	margin: 0 auto;
	padding: 0 var(--sp-5);
}


/* === Utility bar (top, black, 36px) === */
.utility-bar {
	background: var(--black-100);
	color: var(--white);
	font-size: 13px;
	/* Reset inherited em-based line-height from style.css so the Power cut
	   pill sits in the bar with a small black border (matches graphs.html). */
	line-height: normal;
}
.utility-bar .holder {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 36px;
}
.utility-bar a {
	color: rgba(255,255,255,0.85);
	text-decoration: none;
	margin-left: var(--sp-5);
	font-weight: 500;
	letter-spacing: 0.02em;
	transition: color var(--dur-normal) var(--ease-std);
}
.utility-bar a:first-of-type { margin-left: 0; }
.utility-bar a:hover { color: var(--white); }
.utility-bar .powercut {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--red-100);
	color: var(--white);
	padding: 6px 14px 6px 12px;
	border-radius: var(--r-pill);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: background var(--dur-normal) var(--ease-std);
	margin-left: 0; /* override .utility-bar a */
}
@media (hover: hover) { .utility-bar .powercut:hover { background: var(--black-100); color: var(--white); } }
.utility-bar .powercut svg { width: 14px; height: 14px; }


/* === Site header (white, sticky, 76px) === */
.site-header {
	background: var(--white);
	border-bottom: 1px solid var(--navy-10);
	position: sticky;
	top: 0;
	z-index: 1050; /* above Leaflet controls */
}
.site-header .holder {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 76px;
}
.brand {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}
/* index.html now uses the proper red+black resources/npg-logo.svg.
   No filter needed; render at native colours. */
.brand img {
	height: 38px;
	width: auto;
}
.brand .breadcrumb {
	color: var(--black-70);
	font-size: 14px;
	border-left: 1px solid var(--navy-10);
	padding-left: 14px;
	font-weight: 500;
}
.brand .breadcrumb strong { color: var(--black-100); font-weight: 600; }
.site-nav {
	display: flex;
	align-items: center;
	gap: 28px;
}
.site-nav a {
	color: var(--black-100);
	text-decoration: none;
	font-weight: 500;
	font-size: 15px;
}
.site-nav a:hover { color: var(--red-100); }


/* === Buttons (pill) ===
   Note: this restyles existing <button> elements globally as well. The
   existing controls' buttons (Play/Pause/Download CSV) get the new pill
   look automatically. Step 5 (controls) will refine these further. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 24px;
	border-radius: var(--r-pill);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	letter-spacing: 0.01em;
	transition: background var(--dur-normal) var(--ease-std),
		color var(--dur-normal) var(--ease-std),
		border-color var(--dur-normal) var(--ease-std),
		transform var(--dur-fast);
	border: 1.5px solid transparent;
	white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--white); color: var(--black-100); }
@media (hover: hover) { .btn--primary:hover { background: var(--black-100); color: var(--white); } }
.btn--ghost-on-red { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); }
@media (hover: hover) { .btn--ghost-on-red:hover { background: var(--white); color: var(--red-100); border-color: var(--white); } }
.btn--dark { background: var(--black-100); color: var(--white); }
@media (hover: hover) { .btn--dark:hover { background: var(--red-100); color: var(--white); } }
.btn--outline { background: transparent; color: var(--black-100); border-color: var(--black-100); }
@media (hover: hover) { .btn--outline:hover { background: var(--black-100); color: var(--white); } }
.btn--sm { padding: 9px 16px; font-size: 13px; gap: 6px; }


/* === Site footer (black, theme-b) === */
.site-footer {
	background: var(--black-100);
	color: var(--white);
	padding-top: var(--sp-9);
	padding-bottom: var(--sp-6);
}
.site-footer h4 {
	font-family: var(--font-display);
	font-size: 32px;
	line-height: 1;
	margin: 0 0 var(--sp-3) 0;
	color: var(--white);
	text-transform: uppercase;
}
.site-footer p {
	color: rgba(255,255,255,0.78);
	font-size: 15px;
	line-height: 1.55;
	max-width: 380px;
	margin: 0 0 var(--sp-4) 0;
}
.site-footer a {
	color: rgba(255,255,255,0.85);
	text-decoration: none;
	font-weight: 500;
}
.site-footer a:hover { color: var(--white); text-decoration: underline; }
/* .site-footer a above has specificity (0,1,1) which beats the
   plain .btn--primary (0,1,0) rule and forced the "Get in touch"
   pill to render white-text-on-white. Restore the pill's contrast
   without touching the link rule. Hover lands on a brand pink
   (warm-maroon) rather than the design-system default black;
   keeps the CTA feeling part of the NPg palette in the dark footer. */
.site-footer .btn--primary { color: var(--black-100); }
@media (hover: hover) {
	.site-footer .btn--primary:hover {
		background: var(--warm-maroon);
		color: var(--white);
		text-decoration: none;
	}
}

.footer-top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--sp-6);
	margin-bottom: var(--sp-7);
	padding-bottom: var(--sp-7);
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-col .col-eye {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pink-30);
	font-weight: 700;
	margin-bottom: var(--sp-3);
}
.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.footer-col a { font-size: 14px; }

.partners {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	margin-bottom: var(--sp-5);
	flex-wrap: wrap;
}
.partners .partner-eye {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pink-30);
	font-weight: 700;
}
.partners .partner-row {
	display: flex;
	gap: var(--sp-5);
	align-items: center;
	flex-wrap: wrap;
}
.partners img {
	height: 28px;
	width: auto;
	opacity: 0.85;
}
/* Recolour the white-fill OI/ERM SVGs so they sit on the dark footer.
   They were already white, so leave them as-is. */

/* The credits paragraph on the left has ~5x more text than the
   utility links on the right. Flex space-between split the row
   roughly 50/50, which left the credits cramped into a narrow
   column wrapping over 6+ lines. Grid lets the left grow and the
   right shrink to its content. */
.footer-bottom {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: var(--sp-5);
	font-size: 12px;
	color: rgba(255,255,255,0.6);
}
.footer-bottom > div:last-child { white-space: nowrap; }
.footer-bottom a { color: rgba(255,255,255,0.85); text-decoration: none; }
.footer-bottom a:hover { color: var(--white); }
@media (max-width: 700px) {
	.footer-bottom { grid-template-columns: 1fr; }
	.footer-bottom > div:last-child { white-space: normal; }
}


/* === Responsive, chrome only === */
@media (max-width: 840px) {
	/* Site header, declutter for small screens */
	.site-header .holder { padding-top: 12px; padding-bottom: 12px; gap: 14px; }
	.brand .breadcrumb { display: none; }
	.site-nav { gap: 16px; }
	.site-nav a { font-size: 14px; }
	.site-nav .btn { padding: 6px 12px; font-size: 13px; }
	/* Footer collapses to single column */
	.footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.site-nav a:not(.btn) { display: none; }
	.site-nav .btn { padding: 6px 10px; }
	.utility-bar a:not(.powercut) { display: none; }
	.footer-top { grid-template-columns: 1fr; }
}


/* === Hero band, theme-c (red) === */
.hero {
	position: relative;
	background: var(--red-100);
	color: var(--white);
	overflow: hidden;
	isolation: isolate;
}
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 80% 30%, rgba(255,255,255,0.08), transparent 60%),
		linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.18));
	pointer-events: none;
	z-index: 1;
}
.hero .holder {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: var(--sp-7);
	padding-top: var(--sp-9);
	padding-bottom: var(--sp-9);
	align-items: center;
}
.hero .eyebrow {
	color: rgba(255,255,255,0.85);
	margin: 0 0 var(--sp-4) 0;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--tr-eyebrow);
	text-transform: uppercase;
}
.hero h1 {
	color: var(--white);
	font-size: clamp(48px, 6vw, 88px);
	line-height: 0.92;
	margin: 0 0 var(--sp-5) 0;
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	text-transform: uppercase;
	letter-spacing: var(--tr-display);
}
.hero h1 .accent {
	display: block;
	color: var(--pink-30);
	font-size: 0.42em;
	line-height: 1.15;
	letter-spacing: 0.02em;
	margin-top: 18px;
	font-family: var(--font-body);
	font-weight: 400;
	text-transform: none;
}
.hero p.lede {
	color: rgba(255,255,255,0.92);
	font-size: 18px;
	line-height: 1.55;
	max-width: 540px;
	margin: 0 0 var(--sp-6) 0;
}
.hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-bottom: var(--sp-6);
}
.hero-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: var(--r-pill);
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.22);
	font-size: 13px;
	font-weight: 500;
	color: var(--white);
}
.hero-chip svg { width: 14px; height: 14px; }
.hero-chip strong { font-weight: 700; }
.hero-cta {
	display: flex;
	gap: var(--sp-3);
	flex-wrap: wrap;
}
.hero-cta .btn svg { width: 14px; height: 14px; }

/* Hero animated network. Container is square (1/1 aspect), closer
   to the data's natural portrait silhouette than 4/3 was, so the
   geographic projection fills more of the box while still preserving
   shape. Hero overall height is still driven by the left column
   content (h1 + lede + chips + CTAs ~700px tall), and a square
   container at the right column's width comes in at roughly that
   height, so the hero band doesn't grow. */
.hero-network {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
}
.hero-network svg {
	width: 100%;
	height: 100%;
	display: block;
}
@media (prefers-reduced-motion: reduce) {
	.hero-network svg :is(circle.pulse, circle.halo) { animation: none; }
}

/* Hero background-animation pause control. Compact icon button, kept
   subtle so it doesn't fight the hero; it strengthens on hover and on
   keyboard focus so mouse, keyboard and touch users can all reach it. */
.hero-motion-toggle {
	position: absolute;
	right: var(--sp-3);
	bottom: var(--sp-9);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: var(--r-pill);
	background: transparent;
	border: 1px solid rgba(255,255,255,0.55);
	color: var(--white);
	cursor: pointer;
	opacity: 0.5;
	transition: opacity var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.hero-motion-toggle[hidden] { display: none; }
.hero-motion-toggle .hmt-icon { width: 13px; height: 13px; display: block; }
.hero-motion-toggle .hmt-play { display: none; }
.hero-motion-toggle[aria-pressed="true"] .hmt-pause { display: none; }
.hero-motion-toggle[aria-pressed="true"] .hmt-play { display: block; }
.hero-network:hover ~ .hero-motion-toggle,
.hero-motion-toggle:hover,
.hero-motion-toggle:focus-visible {
	opacity: 1;
	border-color: var(--white);
}
.hero-motion-toggle:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 2px;
}

/* Hero responsive */
@media (max-width: 840px) {
	.hero .holder { grid-template-columns: 1fr; gap: var(--sp-5); }
	.hero-network { display: none; }
	.hero-motion-toggle { display: none; }
}

/* Skip to content link, off-screen until it receives keyboard focus */
.skip-to-content {
	position: absolute;
	left: 8px;
	top: -56px;
	z-index: 2000;
	padding: 10px 16px;
	background: var(--black-100);
	color: var(--white);
	border-radius: var(--r-sm);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
}
.skip-to-content:focus {
	top: 8px;
}

/* Skip map link, in flow only when focused so keyboard users can step
   past the focusable map areas. */
.skip-map {
	position: absolute;
	left: -9999px;
}
.skip-map:focus {
	position: static;
	display: inline-block;
	margin-bottom: var(--sp-3);
	padding: 8px 14px;
	background: var(--black-100);
	color: var(--white);
	border-radius: var(--r-sm);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
}


/* === Stats strip, theme-b (black), region overview === */
.stats-strip {
	background: var(--black-100);
	color: var(--white);
	border-top: 1px solid rgba(255,255,255,0.06);
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.stats-strip .holder {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-6);
	padding-top: var(--sp-6);
	padding-bottom: var(--sp-6);
}
.stats-strip .stat .label {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pink-30);
	font-weight: 700;
	margin-bottom: 8px;
}
.stats-strip .stat .value {
	font-family: var(--font-display);
	font-size: 44px;
	line-height: 1;
	margin-bottom: 6px;
	color: var(--white);
}
.stats-strip .stat .value .unit {
	font-size: 0.5em;
	opacity: 0.7;
	margin-left: 6px;
}
.stats-strip .stat .desc {
	font-size: 13px;
	color: rgba(255,255,255,0.7);
	line-height: 1.4;
}
@media (max-width: 1100px) {
	.stats-strip .holder { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.stats-strip .holder { grid-template-columns: 1fr; }
}
.stats-strip .stat-scenario .value { line-height: 1.1; }
.stats-strip .scenario-pill {
	display: inline-block;
	max-width: 100%;
	padding: 4px 14px;
	border-radius: var(--r-sm);
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	font-size: 30px;
}


/* === Workspace (map area), theme-a === */
/* The existing markup is .columns > .left + .right; redesign treats
   them as .workspace-grid > .controls + map. We keep .left/.right
   selectors targeted via parents so the existing JS that finds them
   still works, but apply the redesigned grid. */
#scenario .columns {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: var(--sp-5);
	padding: var(--sp-7) 0;
	max-width: 100%;
	margin: 0 auto;
	align-items: stretch; /* let the right column match the left's height */
}
#scenario .columns > .left {
	background: var(--black-5);
	border: 1px solid var(--navy-10);
	border-radius: var(--r-md);
	padding: var(--sp-4);
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	align-self: start;
	position: sticky;
	top: 124px;
}
#scenario .columns > .right {
	display: flex;
	flex-direction: column;
	min-height: 0;
}
/* Kill the old <h2><label>...</label></h2> control headers; replaced by .control-group h3 */
#scenario .columns > .left > h2 { display: none; }

.control-group h3 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--black-70);
	margin: 0 0 6px 0;
	display: flex;
	align-items: center;
	gap: 6px;
}
.control-group h3 .num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: var(--black-100);
	color: var(--white);
	font-size: 10px;
	font-weight: 700;
}

/* Scenario picker, cards */
.scenario-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.scenario-card {
	position: relative;
	padding: 8px 10px;
	border-radius: var(--r-sm);
	border: 1.5px solid var(--navy-10);
	background-color: var(--white) !important;
	background-image: none !important;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--dur-fast), background var(--dur-fast);
	font-family: var(--font-body);
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .scenario-card:hover { border-color: var(--black-100); } }
.scenario-card.active {
	border-color: var(--black-100);
	background-color: var(--white) !important;
	background-image: none !important;
	outline: 1px solid var(--black-100);
	outline-offset: -1px;
}
.scenario-card .swatch {
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 999px;
	margin-bottom: 4px;
	border: 2px solid var(--white);
	box-shadow: 0 0 0 1px var(--navy-20);
}
.scenario-card .name {
	font-weight: 700;
	font-size: 12px;
	line-height: 1.2;
	color: var(--black-100);
	margin-bottom: 3px;
}
.scenario-card .nz {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 3px;
}
.scenario-card .nz.yes { color: var(--teal-90); }
.scenario-card .nz.no  { color: var(--black-70); }

/* Selects (parameter dropdown) */
#scenario .select-wrap { position: relative; }
#scenario .select-wrap select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	height: 36px;
	border-radius: var(--r-sm);
	border: 1.5px solid var(--navy-20);
	background: var(--white);
	padding: 0 32px 0 12px;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--black-100);
	font-weight: 500;
	cursor: pointer;
	line-height: normal;
}
/* Live-updated parameter description, restyled from the legacy
   coloured-banner '.about' div to a subtle help-text caption that
   mirrors the scale-mode help. dfes.js writes the description via
   document.querySelector('#parameter-holder .about').innerHTML. */
#parameter-holder .about {
	display: block;
	margin-top: 6px;
	padding: 0;
	background: transparent !important;
	color: var(--black-70);
	font-size: 11px;
	line-height: 1.4;
	font-weight: 400;
}
#parameter-holder .about:empty { display: none; }
/* The scenario-holder is hidden, but its .about child sometimes leaks. */
#scenario-holder .about { display: none !important; }
#scenario .select-wrap select:focus {
	outline: 2px solid var(--purple-20);
	outline-offset: 2px;
	border-color: var(--black-100);
}
/* Dropdown chevron, anchored to the top of the wrapper (where the
   <select> lives) rather than 50% of the wrapper, because the <select>
   is followed by the live ".about" description and 50% of the combined
   wrapper height puts the chevron below the select. The select height
   is 36px so the chevron centres at 18px. */
#scenario .select-wrap::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 18px;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--black-70);
	border-bottom: 2px solid var(--black-70);
	transform: translate(0, -50%) rotate(45deg);
	pointer-events: none;
}

/* Segmented control */
.segmented {
	display: inline-flex;
	background: var(--white);
	border: 1.5px solid var(--navy-20);
	border-radius: var(--r-pill);
	padding: 2px;
	gap: 2px;
	width: 100%;
}
.segmented button {
	padding: 4px 10px;
	border-radius: var(--r-pill);
	font-size: 12px;
	font-weight: 600;
	color: var(--black-70);
	background: none;
	border: 0;
	cursor: pointer;
	transition: background var(--dur-fast), color var(--dur-fast);
	flex: 1;
	font-family: var(--font-body);
	line-height: 1.4;
	min-height: 26px;
}
.segmented button.active {
	background: var(--black-100);
	color: var(--white);
}

/* Timeline, year display + play/pause + scrubber */
.timeline {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.timeline-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
.timeline-year {
	font-family: var(--font-display);
	font-size: 40px;
	line-height: 0.9;
	color: var(--black-100);
}
.timeline-year .small {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	color: var(--black-70);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 2px;
}
.timeline-controls {
	display: flex;
	gap: 8px;
	margin-top: 8px; /* breathing room below the scrubber tick labels */
}
.icon-btn {
	width: auto; /* the design-reference block earlier fixes width at 36px; these are pills now */
	height: 30px;
	border-radius: 999px;
	background: var(--black-100);
	color: var(--white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: background var(--dur-fast);
	border: 0;
	cursor: pointer;
	padding: 0 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}
@media (hover: hover) { .icon-btn:hover:not(:disabled) { background: var(--red-100); } }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.icon-btn.ghost {
	background: var(--white);
	color: var(--black-100);
	border: 1.5px solid var(--navy-20);
}
@media (hover: hover) { .icon-btn.ghost:hover:not(:disabled) { background: var(--black-5); } }
.icon-btn svg { width: 14px; height: 14px; display: block; flex: none; }

/* Scrubber, custom track/fill/thumb on top of the existing <input range> */
.scrubber {
	position: relative;
	height: 42px;
	user-select: none;
}
.scrubber-track {
	position: absolute;
	/* Inset by half the 26px thumb so the thumb's travel (set with a
	   matching calc() in controls.js) stays inside the control; at the
	   ends the thumb edge lines up with the first and last tick labels. */
	left: 13px;
	right: 13px;
	top: 14px;
	height: 6px;
	background: var(--navy-10);
	border-radius: 3px;
	overflow: hidden;
	pointer-events: none;
}
.scrubber-fill {
	height: 100%;
	background: var(--red-100);
	border-radius: 3px;
	width: 0;
}
.scrubber-thumb {
	position: absolute;
	top: 4px;
	left: 13px; /* start-of-track centre; controls.js takes over from here */
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--white);
	border: 4px solid var(--red-100);
	transform: translateX(-50%);
	cursor: grab;
	box-shadow: 0 1px 4px rgba(0,0,0,0.15);
	transition: transform var(--dur-fast);
	pointer-events: none;
}
.scrubber-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	margin: 0;
	z-index: 2;
	-webkit-appearance: none;
	background: transparent;
}
.scrubber-input:focus + .scrubber-thumb,
.scrubber-input:active + .scrubber-thumb {
	transform: translateX(-50%) scale(1.15);
}
/* Hide the legacy .pip-labels element dfes.js auto-creates next to
   the slider, its tick-mark hashes were rendering on top of (and
   competing with) the new .scrubber-ticks row. */
.pip-labels { display: none !important; }
/* And kill any native browser slider tickmarks that might leak through
   (Firefox renders ticks for inputs with step). */
.scrubber-input::-webkit-slider-runnable-track { background: transparent !important; }
.scrubber-input::-moz-range-track { background: transparent !important; }
.scrubber-ticks {
	position: absolute;
	left: 0;
	right: 0;
	top: 30px;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}
.scrubber-tick {
	font-size: 10px;
	color: var(--black-60);
	font-weight: 600;
	letter-spacing: 0.04em;
}
.scrubber-tick.major { color: var(--black-100); }

/* Scale-mode help text + hide legacy info-bubbles inside #scenario */
.scale-help {
	font-size: 11px;
	color: var(--black-70);
	margin: 6px 0 0 0;
	line-height: 1.4;
}
#scenario .info-bubble.warning { display: none; }

/* Download button restyle (existing #download-csv inside #download) */
#scenario #download {
	margin-top: 0;
	text-align: center;
}
#scenario #download button {
	width: 100%;
	margin: 0;
	background: var(--black-100);
	color: var(--white);
	border: 0;
	border-radius: var(--r-pill);
	padding: 9px 14px;
	font-size: 13px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	transition: background var(--dur-fast);
	font-family: var(--font-body);
}
@media (hover: hover) { #scenario #download button:hover { background: var(--red-100); } }
#scenario #download button svg { width: 14px; height: 14px; }

/* Workspace responsive */
@media (max-width: 1000px) {
	#scenario .columns {
		grid-template-columns: 1fr;
		padding: var(--sp-5) var(--sp-3);
	}
	#scenario .columns > .left {
		position: static;
	}
}


/* === Map presentation, theme-a === */
/* Stretch the right column to match the left controls' height (set by
   align-items: stretch on .columns above), then make #screenshot a flex
   column whose <map> takes the remaining space. Leaflet needs a concrete
   height; min-height keeps it usable when the left column is short. */
#scenario #screenshot {
	position: relative;
	border: 1px solid var(--navy-10);
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--navy-25);
	display: flex;
	flex-direction: column;
	flex: 1; /* fill the .right column height */
	min-height: 480px;
}
#scenario #map {
	flex: 1;
	height: auto !important; /* override style.css 650px so flex can size it */
	min-height: 360px;
	background: linear-gradient(180deg, #f4f4f7, #ededed);
}

/* The #scale-holder is a hidden state-wrapper around the #scale-mode
   checkbox that dfes.js reads. style.css ships an unconditional
   `#scale-holder { display: inline-block; }` rule (specificity 1,0,0)
   that overrides the `hidden` HTML attribute. Force it back. */
[hidden]#scale-holder, #scale-holder[hidden] { display: none !important; }

/* Map legend; the existing #scale gets a card-like wrapper feel
   and a pill-button "Save PNG" button via #issues. */
#scenario #scale {
	border-top: 1px solid var(--navy-10);
	background: var(--white);
	padding: 14px 18px 6px 18px;
}
#scenario #scale .bar {
	height: 12px;
	border-radius: 6px;
	overflow: hidden;
	margin-top: 4px;
}
#scenario #scale .bar-inner {
	height: 100%;
	border-width: 0 !important;
}
#scenario #scale .range {
	display: block;
	position: relative;
	height: 1.5em;
	margin-top: 4px;
}
#scenario #scale .lvl {
	font-size: 11px;
	color: var(--black-70);
	font-weight: 600;
	position: absolute;
	transform: translateX(-50%);
}
#scenario #scale .min {
	left: 0 !important;
	transform: none !important;
	white-space: nowrap;
	border-left: 0 !important;
	padding-left: 0 !important;
}
/* dfes.js writes inline `style="left: 100%"` on .max. Original style.css
   used `transform: translate3d(-100%, 0, 0)` to pull the element back so
   its right edge aligns with the legend bar's right edge. The redesign
   needs the same. (My earlier `translateX(0)` left it sitting off-canvas
   to the right and the number got clipped.) */
#scenario #scale .max {
	transform: translateX(-100%) !important;
	border-right: 0 !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
	white-space: nowrap;
	text-align: right;
}

/* Action row (Save PNG / Graphs / Data / Issues); pill buttons under
   the whole workspace, hoisted out of .right so the map can fill the
   column. Snug to the workspace above. */
#scenario > .holder > #issues {
	margin-top: 0;
	padding: 6px 0 var(--sp-3) 0;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
}
.issue-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: var(--r-pill);
	border: 1.5px solid var(--navy-20);
	background: var(--white);
	color: var(--black-100);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
	font-family: var(--font-body);
}
.issue-pill svg { width: 14px; height: 14px; flex-shrink: 0; }
.issue-pill:hover {
	background: var(--black-100);
	color: var(--white);
	border-color: var(--black-100);
}
.issue-pill--cta {
	background: var(--red-100);
	border-color: var(--red-100);
	color: var(--white);
}
.issue-pill--cta:hover {
	background: var(--warm-maroon);
	border-color: var(--warm-maroon);
	color: var(--white);
}
@media (max-width: 560px) {
	#scenario > .holder > #issues { justify-content: stretch; }
	.issue-pill { flex: 1 1 auto; justify-content: center; }
}

/* Leaflet zoom + attribution restyled */
.leaflet-control-zoom {
	border-radius: var(--r-sm) !important;
	overflow: hidden;
	border: 1px solid var(--navy-10) !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.leaflet-control-zoom a {
	background: var(--white) !important;
	color: var(--black-100) !important;
	border-color: var(--navy-10) !important;
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	transition: background var(--dur-fast);
}
.leaflet-control-zoom a:hover {
	background: var(--black-5) !important;
	color: var(--red-100) !important;
}
.leaflet-control-attribution {
	background: rgba(255,255,255,0.85) !important;
	font-size: 11px !important;
	padding: 3px 8px !important;
	color: var(--black-70) !important;
	border-radius: var(--r-sm) 0 0 0;
}
.leaflet-control-attribution a {
	color: var(--black-100) !important;
	text-decoration: none;
}

/* Year tag (top-right of map, set by dfes.js info control)
   The wrapping <div class="scenario"> picks up the JS-injected
   scenario background colour (red-ish), which leaks around the white
   pill. Force the wrapper transparent and let the inner .year carry
   the entire pill styling. */
.leaflet-control-container .scenario {
	background: transparent !important;
	color: var(--black-100) !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
}
.leaflet-control-container .scenario .year {
	font-family: var(--font-display);
	font-size: 22px;
	letter-spacing: 0.02em;
	background: var(--white) !important;
	color: var(--black-100) !important;
	padding: 6px 14px !important;
	border-radius: var(--r-pill);
	border: 1px solid var(--navy-10);
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	display: inline-block;
	line-height: 1;
}

/* Leaflet popups, match the redesign card aesthetic */
.leaflet-popup-content-wrapper {
	border-radius: var(--r-md) !important;
	border: 1px solid var(--navy-10);
	box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
	background: var(--white) !important;
}
.leaflet-popup-tip {
	background: var(--white) !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.leaflet-popup-content {
	margin: 14px !important;
	font-family: var(--font-body) !important;
	font-size: 13px;
	line-height: 1.45;
	color: var(--black-100);
}
.leaflet-popup-content h3 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 15px;
	color: var(--black-100);
	margin: 0 0 6px 0;
	letter-spacing: 0;
	text-transform: none;
}
.leaflet-popup-content h4 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	margin: 8px 0 2px 0;
	color: var(--black-100);
}
.leaflet-popup-content p { margin: 0 0 6px 0; }
.leaflet-popup-content strong { font-weight: 700; }
.leaflet-popup-close-button {
	color: var(--black-70) !important;
	font-size: 18px !important;
	padding: 6px 8px !important;
}

/* Map spinner restyle, keep it visible against the new bg */
.spinner .sk-cube { background: var(--red-100) !important; }

/* Bar-chart hover tooltip; the legacy .balloon and OI.Tooltips inner
   either showed black-on-grey or inherited the scenario red. Force a
   readable white card with dark text matching the rest of the redesign. */
#scenario .barchart .balloon,
#scenario .barchart .balloon *,
.tooltip-tip,
.tooltip-tip .inner,
.oi-tooltip,
.oi-tooltip .inner {
	background: var(--white) !important;
	color: var(--black-100) !important;
	font-family: var(--font-body) !important;
}
.tooltip-tip .inner,
.oi-tooltip .inner,
#scenario .barchart .balloon {
	border: 1px solid var(--navy-10) !important;
	border-radius: var(--r-sm) !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
	padding: 8px 12px !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
}
.tooltip-tip .arrow,
.oi-tooltip .arrow {
	border-top-color: var(--white) !important;
}
#scenario .barchart .balloon::after,
#scenario .barchart .bar-right .balloon::after {
	border-left-color: var(--white) !important;
	border-right-color: var(--white) !important;
}


/* === About, scenario cards (theme-d, off-white) === */
/* The existing #about section is repurposed to host the cards grid.
   We override the existing .b5-bg + .holder.tallpadded that wraps it. */
#about.b5-bg {
	background: var(--theme-d-background);
	padding: var(--sp-9) 0;
}
#about .holder.tallpadded { padding: 0 var(--sp-5); }

/* Reset the legacy h2/h3/h4/dl styling inside #about */
#about h2 {
	font-size: clamp(36px, 4.5vw, 56px);
	line-height: 1;
	margin: 0 0 var(--sp-4) 0;
	color: var(--black-100);
}
#about > .holder > h2 + p,
#about > .holder > h2 + ol {
	display: none; /* old prose hidden by markup replacement; this is a safety net */
}

.about-head {
	margin-bottom: var(--sp-7);
	max-width: 720px;
}
.about-head .eyebrow {
	color: var(--red-100);
	margin-bottom: var(--sp-3);
}
.about-head h2 {
	font-size: clamp(36px, 4.5vw, 56px);
	line-height: 1;
	margin-bottom: var(--sp-4);
	color: var(--black-100);
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	text-transform: uppercase;
	letter-spacing: var(--tr-display);
}
.about-head p {
	font-size: 17px;
	color: var(--black-80);
	line-height: 1.5;
	margin: 0;
}

.scenario-grid {
	display: grid;
	/* 3 cols while Reference + Falling Behind are hidden; restore repeat(5, 1fr) when they return */
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-3);
}
.scen-card {
	background: var(--white);
	border: 1px solid var(--navy-10);
	border-radius: var(--r-md);
	padding: var(--sp-5);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	position: relative;
	overflow: hidden;
	transition: transform var(--dur-normal) var(--ease-std), border-color var(--dur-normal) var(--ease-std);
}
@media (hover: hover) {
	.scen-card:hover {
		transform: translateY(-3px);
		border-color: var(--black-100);
	}
}
.scen-card .topbar {
	height: 6px;
	margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) 0;
}
.scen-card .scen-eye {
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--black-70);
	margin-top: var(--sp-3);
}
.scen-card h3 {
	font-family: var(--font-body);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--black-100);
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
}
.scen-card .nz-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: var(--r-pill);
	align-self: flex-start;
}
.scen-card .nz-pill.yes { background: var(--teal-20); color: var(--teal-100); }
.scen-card .nz-pill.no  { background: var(--black-10); color: var(--black-90); }
.scen-card .nz-pill svg { width: 12px; height: 12px; }
.scen-card p.scen-desc {
	font-size: 14px;
	line-height: 1.5;
	color: var(--black-80);
	flex: 1;
	margin: 0;
}
.scen-card .scen-stats {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-top: 1px solid var(--navy-10);
	padding-top: var(--sp-3);
}
.scen-card .scen-stat {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	font-size: 12px;
}
.scen-card .scen-stat .k { color: var(--black-70); }
.scen-card .scen-stat .v {
	font-weight: 700;
	color: var(--black-100);
	font-family: var(--font-display);
	font-size: 18px;
}

/* Responsive collapses */
@media (max-width: 1100px) {
	.scenario-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.scenario-grid { grid-template-columns: 1fr; }
}


/* === Callout band, theme-e (pink-tinted) === */
.callout-band {
	background: var(--pink-5);
	padding: var(--sp-9) 0;
}
.callout-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--sp-7);
	align-items: center;
}
.callout-grid h2 {
	font-size: clamp(36px, 4.5vw, 56px);
	line-height: 1;
	margin: 0 0 var(--sp-4) 0;
	color: var(--black-100);
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	text-transform: uppercase;
	letter-spacing: var(--tr-display);
}
.callout-grid .eyebrow {
	color: var(--red-100);
	margin-bottom: var(--sp-3);
}
.callout-grid .quote {
	font-family: var(--font-display);
	font-size: 28px;
	line-height: 1.1;
	color: var(--black-100);
	border-left: 4px solid var(--red-100);
	padding-left: var(--sp-4);
	margin: 0;
	letter-spacing: 0.01em;
}
.callout-numbers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-4);
}
.callout-num {
	background: var(--white);
	border-radius: var(--r-md);
	padding: var(--sp-5);
	border: 1px solid var(--purple-10);
}
.callout-num .v {
	font-family: var(--font-display);
	font-size: 56px;
	line-height: 1;
	color: var(--red-100);
	margin-bottom: 6px;
}
.callout-num .l {
	font-size: 13px;
	font-weight: 600;
	color: var(--black-80);
	line-height: 1.35;
}
@media (max-width: 1100px) {
	.callout-grid { grid-template-columns: 1fr; }
}
@media (hover: hover) { .scenario-card:not(.active):hover .name, .scenario-card:not(.active):hover .nz.yes, .scenario-card:not(.active):hover .nz.no { color: var(--white); } }