/* DRIVE PR website — layout and components.
   Colour, spacing and radius values come from tokens.css (the Drive PR
   Design System). Components reference the semantic names only, plus the
   three impact-area colours defined below. Type is set here: the design
   system left the typeface open, and the site self-hosts two open-licence
   variable fonts, plus Oxanium for the logo tagline and the caps labels (all SIL OFL,
   licences in assets/fonts/). */

@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("../fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("../fonts/source-sans-3-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oxanium"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/oxanium-latin-wght.woff") format("woff");
}

:root {
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-label: "Oxanium", "Archivo", sans-serif;
  --font-serif: "Palatino Linotype", Palatino, "Book Antiqua", "TeX Gyre Pagella", Georgia, serif;
  --lattice-s: 44px; --lattice-h: 76.2px;
  --font-sans: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
  --text-sm: 15px;
  --text-md: 17px;
  --text-lg: 21px;
  --weight-display: 600;
  --measure: 68ch;
  --area-ded: var(--red-900);      /* Data-Driven Engineering Design */
  --area-d3s: var(--accent);       /* Digital Infrastructure & Decision Support */
  --area-dcf: var(--grey-800);     /* Digital & Connected Factory */
  --on-inverse-muted: var(--grey-300);
  --inverse-rule: rgba(255, 255, 255, 0.16);
  --on-brand-soft: rgba(255, 255, 255, 0.86);
  /* Concept diagram: three depths of the brand red */
  --depth-1-bg: var(--accent-tint);        --depth-1-line: var(--red-200);
  --depth-2-bg: var(--accent-tint-strong); --depth-2-line: var(--red-300);
  --depth-3-bg: var(--surface-brand);      --depth-3-text: var(--text-on-brand);
}

/* ── Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--text-link); text-underline-offset: 0.15em; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
h1, h2, h3, h4 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-display);
}
h1 { font-size: clamp(32px, 4.5vw, var(--text-3xl)); font-stretch: 94%; }
h2 { font-size: clamp(24px, 3vw, var(--text-xl)); }
h3 { font-size: var(--text-lg); line-height: var(--leading-snug); }
h4 { font-size: var(--text-md); line-height: var(--leading-snug); }
p, ul, ol, dl { margin: 0 0 var(--space-4); }
ul, ol { padding-left: 1.25em; }
li + li { margin-top: var(--space-1); }
strong { font-weight: var(--weight-bold); }
small { font-size: var(--text-sm); }
hr { border: 0; border-top: var(--border-hairline); margin: var(--space-6) 0; }
table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); margin-bottom: var(--space-4); }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: var(--border-hairline); vertical-align: top; }
th { color: var(--text-secondary); font-weight: var(--weight-medium); }

.container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-4); }
.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--space-6); }
.prose h3 { margin-top: var(--space-5); }
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.lede { font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-secondary); }
.muted { color: var(--text-secondary); }
.small { font-size: var(--text-sm); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link { position: absolute; left: -999px; top: var(--space-2); z-index: 100; }
.skip-link:focus {
  left: var(--space-4); background: var(--surface-card); color: var(--text-body);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
}

/* ── Header ───────────────────────────────────────────────────────── */
.site-header { background: var(--surface-card); border-bottom: var(--border-hairline); position: relative; }
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); min-height: 68px;
}
/* <picture> in the header: the designer's side lockup (logo + Oxanium subtext) where it
   fits, the plain logo below 500 px and from 900 to 1019 px, where it would crowd the
   Menu button or push the full nav onto two lines */
.wordmark { display: block; flex: none; line-height: 0; }
.wordmark img { height: 46px; width: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1); }
.site-nav li + li { margin: 0; }
.site-nav a {
  display: block; padding: var(--space-2) var(--space-3);
  color: var(--text-body); text-decoration: none;
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 500;
  border-radius: var(--radius-md);
}
.site-nav a:hover { background: var(--surface-muted); color: var(--text-body); }
.site-nav a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.nav-toggle {
  display: none; align-items: center; gap: var(--space-2);
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body);
  cursor: pointer;
}
@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }
  .site-nav ul {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--surface-card); border-bottom: var(--border-hairline);
    padding: var(--space-2) var(--space-4) var(--space-4); z-index: 20;
  }
  .site-nav.is-open ul { display: flex; }
  .site-nav a { padding: var(--space-3); }
  .site-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); }
}

/* ── Hero bands ───────────────────────────────────────────────────── */
.hero, .page-hero {
  background: var(--surface-brand); color: var(--text-on-brand);
  position: relative; overflow: hidden;
}
.hero::after, .page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.22) 2.2px, transparent 3px), radial-gradient(circle, rgba(255, 255, 255, 0.22) 2.2px, transparent 3px);
  background-size: var(--lattice-s) var(--lattice-h);
  background-position: 0 0, calc(var(--lattice-s) / 2) calc(var(--lattice-h) / 2);
  -webkit-mask-image: linear-gradient(100deg, transparent 45%, #000 100%);
  mask-image: linear-gradient(100deg, transparent 45%, #000 100%);
}
.hero > .container, .page-hero > .container { position: relative; z-index: 1; }
.hero { padding: var(--space-8) 0 calc(var(--space-8) + var(--space-6)); }
.hero-home::after { display: none; }
.hero-grid { display: grid; grid-template-columns: 6fr 6fr; gap: var(--space-5); align-items: center; }
.hero-figure .conv { width: 100%; height: auto; display: block; }
@media (max-width: 899px) { .hero-grid { grid-template-columns: 1fr; } .hero-figure { display: none; } }
.page-hero { padding: var(--space-7) 0; }
.hero .eyebrow, .page-hero .eyebrow { color: var(--accent-tint-strong); }
.hero h1 { max-width: 22ch; color: inherit; margin-bottom: var(--space-4); }
.page-hero h1 { font-size: clamp(28px, 3.6vw, var(--text-2xl)); color: inherit; max-width: 24ch; }
.hero .lede, .page-hero .lede { color: var(--on-brand-soft); max-width: var(--measure); }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-display); text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-cta { background: var(--cta); color: var(--cta-text); }
.btn-cta:hover { background: var(--cta-hover); color: var(--cta-text); }
.btn-primary { background: var(--accent); color: var(--text-on-brand); }
.btn-primary:hover { background: var(--accent-hover); color: var(--text-on-brand); }
.btn-outline { border-color: currentColor; color: inherit; background: transparent; }
.btn-outline:hover { background: rgba(255, 255, 255, 0.14); color: inherit; }
.btn-secondary { border-color: var(--border-strong); color: var(--text-body); background: var(--surface-card); }
.btn-secondary:hover { background: var(--surface-muted); color: var(--text-body); }

/* ── Sections ─────────────────────────────────────────────────────── */
.section { padding: var(--space-7) 0; }
/* One page colour throughout: sections are not banded, cards supply the contrast. */
.section-alt { background: transparent; }
.section + .section { padding-top: var(--space-4); }
.section-head { max-width: var(--measure); margin-bottom: var(--space-5); }
.section-head p:last-child { margin-bottom: 0; }
.section-foot { margin-top: var(--space-5); }

/* ── Stats strip ──────────────────────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3); margin-top: calc(-1 * var(--space-6)); position: relative; z-index: 2;
  list-style: none; padding: 0;
}
.stats li { margin: 0; }
.stat {
  background: var(--surface-card); border: var(--border-hairline);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); height: 100%;
}
.stat strong {
  display: block; font-family: var(--font-display); font-weight: 700; font-stretch: 112%; font-size: clamp(28px, 3vw, var(--text-2xl));
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--accent);
}
.stat span { font-size: var(--text-sm); color: var(--text-secondary); }

/* ── Cards ────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.card {
  background: var(--surface-card); border: var(--border-hairline);
  border-radius: var(--radius-lg); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.card h3 { margin: 0; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--accent); text-decoration: underline; }
.card p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.card ul { margin: 0; padding-left: 1.1em; font-size: var(--text-sm); color: var(--text-secondary); }
.card .kicker {
  font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  font-weight: var(--weight-medium); color: var(--accent);
}
.card .card-link { margin-top: auto; padding-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.card-muted { background: var(--surface-muted); border-color: var(--surface-muted); }
.area-ded .kicker { color: var(--area-ded); }
.area-d3s .kicker { color: var(--area-d3s); }
.area-dcf .kicker { color: var(--area-dcf); }

/* ── Callouts and quotes ──────────────────────────────────────────── */
.quote {
  background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6); margin: 0 0 var(--space-5);
  font-size: var(--text-lg); line-height: var(--leading-snug); font-weight: var(--weight-medium);
}
.quote p { margin: 0; }
.quote cite { display: block; margin-top: var(--space-3); font-size: var(--text-sm); font-style: normal; font-weight: var(--weight-regular); color: var(--text-secondary); }
.callout {
  background: var(--accent-tint); border: 1px solid var(--accent-tint-strong);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5);
}
.callout p:last-child { margin-bottom: 0; }
.notice { background: var(--warning-tint); border: 1px solid var(--warning); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }

/* ── Facts list ───────────────────────────────────────────────────── */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-4); }
.facts dt { color: var(--text-secondary); }
.facts dd { margin: 0; }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; gap: 0 } .facts dd { margin-bottom: var(--space-3); } }

/* ── Two-column layouts ───────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); align-items: start; }

/* ── Partner wall ─────────────────────────────────────────────────── */
.logo-groups { display: grid; gap: var(--space-5); }
.logo-group > h3 {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--text-secondary); font-weight: var(--weight-medium); margin-bottom: var(--space-3);
}
.logo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.logo-wall li { margin: 0; }
.logo-tile {
  background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-md);
  min-height: 64px; display: flex; align-items: center; justify-content: center;
  padding: var(--space-3); text-align: center; font-weight: var(--weight-medium); font-size: var(--text-sm);
  height: 100%;
}
.logo-tile img { width: auto; max-width: 100%; height: 44px; object-fit: contain; }
a.logo-tile { text-decoration: none; color: var(--text-body); flex-direction: column; gap: var(--space-1); transition: border-color var(--dur-fast) var(--ease-out); }
a.logo-tile:hover { border-color: var(--border-strong); color: var(--text-body); }
.logo-tile small { font-family: var(--font-display); font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); }
.logo-tile .logo-text { font-family: var(--font-display); font-weight: 500; }
.card .card-logo { height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-2); }
.card .card-logo img { width: auto; max-width: 100%; object-fit: contain; }
/* Partner cards: the logo identifies the partner. Only the RISE card carries a
   label under its logo (to say AstaZero); a card without a logo keeps its name as
   a normal heading. */
.logo-group .card .card-logo + h3 { font-size: var(--text-sm); text-align: center; color: var(--text-secondary); font-weight: 500; letter-spacing: 0; text-transform: none; margin-top: calc(-1 * var(--space-1)); }

/* ── Impact-area track grid (Research overview) ───────────────────── */
.track-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.track-col { background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-lg); overflow: hidden; }
.track-col header { padding: var(--space-3) var(--space-4); color: var(--text-on-brand); }
.track-col header h3 { margin: 0; font-size: var(--text-md); color: inherit; }
.track-col header a { color: inherit; }
.track-col.area-ded header { background: var(--area-ded); }
.track-col.area-d3s header { background: var(--area-d3s); }
.track-col.area-dcf header { background: var(--area-dcf); }
.track-col ol { list-style: none; margin: 0; padding: var(--space-3); }
.track-col li {
  margin: 0 0 var(--space-2); padding: var(--space-3);
  border: var(--border-hairline); border-radius: var(--radius-md);
  background: var(--surface-page); font-size: var(--text-sm);
}
.track-col li:last-child { margin-bottom: 0; }
.track-col li a { color: inherit; text-decoration: none; font-weight: var(--weight-medium); }
.track-col li a:hover { text-decoration: underline; color: var(--accent); }
.common-track {
  margin-top: var(--space-4); background: var(--surface-inverse); color: var(--text-inverse);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap;
}
.common-track p { margin: 0; }
.common-track a { color: var(--text-inverse); }

/* ── Workflow (Data-Driven Product Realisation Concept) ───────────── */
.workflow { display: grid; grid-template-columns: 1.15fr repeat(6, 1fr) 1.4fr; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-2); counter-reset: step; }
.workflow li {
  flex: 1 1 140px; margin: 0; background: var(--surface-card); border: var(--border-hairline);
  border-radius: var(--radius-md); padding: var(--space-3); font-size: var(--text-sm); counter-increment: step;
}
.workflow li::before {
  content: counter(step); display: block; font-size: var(--text-xs); font-weight: var(--weight-bold);
  color: var(--accent); margin-bottom: var(--space-1); font-family: var(--font-mono);
}
.workflow li.endpoint { background: var(--depth-1-bg); border-color: var(--depth-1-line); counter-increment: none; }
.workflow li.endpoint::before { content: ""; }
.layers { display: grid; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.layers li { margin: 0; }
.layer { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.layer strong { font-weight: var(--weight-medium); }
.layer-comm { background: var(--depth-1-bg); border: 1px solid var(--depth-1-line); }
.layer-comp { background: var(--depth-2-bg); border: 1px solid var(--depth-2-line); }
.layer-data { background: var(--depth-3-bg); border: 1px solid var(--depth-3-bg); color: var(--depth-3-text); }
.layer-core { background: var(--depth-3-bg); color: var(--depth-3-text); }

/* ── Infrastructure figure ────────────────────────────────────────── */
.infra { display: grid; gap: var(--space-2); }
.infra-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-2); }
.infra-cell { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-card); border: var(--border-hairline); font-size: var(--text-sm); }
.infra-cell strong { display: block; margin-bottom: 2px; }
.infra-cell.head { color: var(--text-on-brand); }
.infra-cell.head-prod { background: var(--area-dcf); }
.infra-cell.head-eng { background: var(--area-ded); }
.infra-cell.head-field { background: var(--area-d3s); }

/* ── Timeline ─────────────────────────────────────────────────────── */
.timeline { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.timeline li { margin: 0; background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }
.timeline time { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--accent); font-weight: var(--weight-medium); margin-bottom: var(--space-1); }
.phases { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.phases li { margin: 0; background: var(--surface-muted); border-radius: var(--radius-md); padding: var(--space-3); font-size: var(--text-sm); }
.phases strong { display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); margin-bottom: var(--space-1); }

/* ── Work packages, organisation ──────────────────────────────────── */
.wp-list { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: var(--space-3); }
.wp-list li { margin: 0; background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-4); display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); }
.wp-num { font-family: var(--font-mono); font-weight: var(--weight-bold); color: var(--accent); font-size: var(--text-sm); padding-top: 2px; }
.wp-list h3 { margin-bottom: var(--space-1); font-size: var(--text-md); }
.wp-list p { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.wp-list .lead { color: var(--text-body); }
.org { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.org li { margin: 0; background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }
.org strong { display: block; }
.org span { color: var(--text-secondary); }

/* ── Tracks on impact-area pages ──────────────────────────────────── */
.toc ul { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.toc li { margin: 0; }
.toc a {
  display: inline-block; padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-card); color: var(--text-body); text-decoration: none; font-size: var(--text-sm);
}
.toc a:hover { border-color: var(--accent); color: var(--accent); }
.track { background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-4); scroll-margin-top: var(--space-5); }
.track h3 { margin-top: 0; }
.track p:last-child { margin-bottom: 0; }
.track .partners { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-3); }
.track .partners strong { color: var(--text-body); font-weight: var(--weight-medium); }

/* ── News ─────────────────────────────────────────────────────────── */
.news-list { display: grid; gap: var(--space-4); }
.news-item { background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-columns: 1fr; }
@media (min-width: 720px) { .news-item.has-image { grid-template-columns: 300px 1fr; } }
.news-item img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
@media (min-width: 720px) { .news-item.has-image img { height: 100%; aspect-ratio: auto; } }
.news-body { padding: var(--space-4) var(--space-5); }
.news-body time { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-secondary); margin-bottom: var(--space-1); }
.news-body h3 { margin-bottom: var(--space-2); }
.news-body p:last-child { margin-bottom: 0; }
.news-body .news-links { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.page-hero .eyebrow a { color: inherit; }
.article { max-width: var(--measure); }
.article figure { margin: var(--space-5) 0; }
.article figcaption { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-2); }
.event-list { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: var(--space-2); }
.event-list li { margin: 0; background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: var(--space-4); font-size: var(--text-sm); }
.event-list time { color: var(--accent); font-weight: var(--weight-medium); }
.event-list .past time { color: var(--text-secondary); }
@media (max-width: 480px) { .event-list li { grid-template-columns: 1fr; gap: var(--space-1); } }

/* ── Footer: the hero band mirrored, dot field fading in from the left ── */
.site-footer {
  background: var(--surface-brand); color: var(--text-on-brand);
  position: relative; overflow: hidden;
  padding: var(--space-7) 0 var(--space-5); margin-top: var(--space-8); font-size: var(--text-sm);
}
.site-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.22) 2.2px, transparent 3px), radial-gradient(circle, rgba(255, 255, 255, 0.22) 2.2px, transparent 3px);
  background-size: var(--lattice-s) var(--lattice-h);
  background-position: 0 0, calc(var(--lattice-s) / 2) calc(var(--lattice-h) / 2);
  -webkit-mask-image: linear-gradient(260deg, transparent 45%, #000 100%);
  mask-image: linear-gradient(260deg, transparent 45%, #000 100%);
}
.site-footer > .container { position: relative; z-index: 1; }
.site-footer a { color: var(--text-on-brand); text-underline-offset: 0.2em; }
.site-footer a:hover { color: var(--accent-tint-strong); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); flex-wrap: wrap; }
.footer-wordmark img { height: clamp(56px, 6.5vw, 72px); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.footer-nav li + li { margin: 0; }
.footer-nav a { font-family: var(--font-display); font-weight: 500; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-meta { max-width: var(--measure); margin-top: var(--space-6); color: var(--on-brand-soft); }
.footer-meta p { margin-bottom: var(--space-2); }
/* Funder and lead logos: a narrow white strip directly above the red footer band, since
   they are full-colour marks that need a light ground. Each group has its label top left.
   vinnova.se/en/m/newsroom/logos asks for the Vinnova logo at least 46 px high, unchanged. */
.funders { margin-top: var(--space-8); background: var(--surface-card); border-top: var(--border-hairline); }
.funders + .site-footer { margin-top: 0; }
.funders-row {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  gap: var(--space-5) var(--space-8); padding-block: var(--space-5);
}
.funder-group { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.funder-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) 40px; min-height: 46px; }
.funder { display: block; line-height: 0; }
.funder img { width: auto; }
.funder-vinnova img { height: 46px; }
.funder-ad img, .funder-wingquist img { height: 40px; }
.funder-label { margin: 0; font-family: var(--font-label); font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.22); margin-top: var(--space-5); padding-top: var(--space-4); font-size: var(--text-xs); color: var(--accent-tint-strong); }

/* ── Print ────────────────────────────────────────────────────────── */
@media print {
  .site-nav, .nav-toggle, .hero-actions, .skip-link { display: none; }
  .hero, .page-hero { background: none; color: var(--text-body); }
  .hero::after, .page-hero::after { display: none; }
}

/* ── Utilities ────────────────────────────────────────────────────── */
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.toc .eyebrow { margin-bottom: var(--space-2); }
.toc + .card { margin-top: var(--space-4); }
.partners { font-size: var(--text-sm); color: var(--text-secondary); }
.partners strong { color: var(--text-body); font-weight: var(--weight-medium); }

/* ── Questions in the track grid, track labels on area pages ─────── */
.track-col header p { margin: 2px 0 0; font-size: var(--text-xs); opacity: 0.85; }
.track-col li a { display: block; }
.track-col .q { display: block; font-weight: var(--weight-medium); }
.track-col .t { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); font-weight: 500; }
.track-col li a:hover .q { text-decoration: underline; color: var(--accent); }
.track .eyebrow { margin-bottom: var(--space-2); }
.track h3 { font-size: var(--text-lg); max-width: 40ch; }

/* ── Eyebrows retired: the two lines that replaced them ────────────── */
.track-name { font-size: var(--text-sm); color: var(--text-secondary); margin: calc(-1 * var(--space-2)) 0 var(--space-3); }
.toc .small { margin-bottom: var(--space-2); }

/* ── The dots: a triangular lattice; the arrow is a subset of it ───────── */
.trail { display: block; }
.section-head h2::after {
  content: ""; display: block; width: 76px; height: 6px; margin-top: var(--space-3);
  background: url("../img/trail.svg") no-repeat left center / contain;
}
.stat .trail-stat { height: 5px; width: auto; margin: 8px 0 10px; }
.dot-timeline { display: block; margin-bottom: var(--space-3); }
.card .kicker { display: flex; align-items: center; gap: var(--space-2); }
.card .kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.prose ul, .card ul, .grid-2 ul:not(.event-list):not(.timeline):not(.org):not(.dots-off) { list-style: none; padding-left: 0; }
.prose ul > li, .card ul > li, .grid-2 ul:not(.event-list):not(.timeline):not(.org) > li { position: relative; padding-left: 20px; }
.prose ul > li::before, .card ul > li::before, .grid-2 ul:not(.event-list):not(.timeline):not(.org) > li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ── Flat surfaces: no hairlines, the beige gives the contrast ─────────── */
.card, .stat, .track, .news-item, .logo-tile, .event-list li, .org li, .wp-list li, .timeline li, .infra-cell, .workflow li, .track-col, .callout { border: 0; }
.toc a { border: 0; }
a.logo-tile:hover { outline: 1px solid var(--border-strong); outline-offset: 0; }
.workflow li.endpoint { background: var(--depth-1-bg); }

/* ── Quotes in the serif voice ─────────────────────────────────────────── */
.quote { background: none; border: 0; border-radius: 0; padding: 0 0 0 28px; position: relative; font-family: var(--font-serif); font-style: italic; font-weight: var(--weight-regular); font-size: 24px; line-height: 1.3; max-width: 34ch; }
.quote::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.quote cite { font-family: var(--font-sans); }


/* ══════════════════════════════════════════════════════════════════════
   Layout v3: one 12-column grid for every hero, section and list.
   Column spans are fixed per pattern so headings and paragraphs wrap at
   the same widths on every page. Lists are rows and columns on the grid,
   not boxes. Later rules here override the component boxes above.
   ══════════════════════════════════════════════════════════════════════ */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-5); align-items: start; }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-12 { grid-column: span 12; }
.col-6.start-7 { grid-column: 7 / span 6; } .col-5.start-8 { grid-column: 8 / span 5; } .col-4.start-9 { grid-column: 9 / span 4; }
h1, h2, h3 { text-wrap: balance; } p, li, dd { text-wrap: pretty; }
.prose { max-width: 62ch; } .prose h3 { margin-top: 0; }
.prose ul, .contrast ul, .items ul, .article ul { list-style: none; padding-left: 0; }
.prose ul > li, .contrast ul > li, .items ul > li, .article ul > li { position: relative; padding-left: 20px; }
.prose ul > li::before, .contrast ul > li::before, .items ul > li::before, .article ul > li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* Sections: even rhythm, no bands */
.section { padding: 56px 0; }
.section + .section { padding-top: 56px; }
.hero + .section, .page-hero + .section { padding-top: 64px; }
.section-head { margin-bottom: var(--space-2); }
.section-head h2 { margin-bottom: 0; }
.section-head h2::after, h2.dotted::after { content: ""; display: block; width: 184px; height: 8px; margin: 14px 0 0; background: url("../img/trail.svg") no-repeat left center / contain; }
h2.dotted { margin-bottom: var(--space-4); }
.section-head p { max-width: 60ch; margin: var(--space-4) 0 0; }
.section-foot { margin: 0; }
.kicker { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: 600; color: var(--accent); margin: 0 0 var(--space-2); }
.kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.kicker.muted { color: var(--text-secondary); }
.area-ded .kicker { color: var(--area-ded); } .area-d3s .kicker { color: var(--area-d3s); } .area-dcf .kicker { color: var(--area-dcf); }
.date { font-family: var(--font-display); font-size: 12px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); margin: 0 0 var(--space-1); }
.group-title { font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); font-weight: 500; margin: var(--space-3) 0 calc(-1 * var(--space-3)); }
.figure-label { font-family: var(--font-display); font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); margin: var(--space-3) 0 var(--space-2); }

/* Heroes: text in columns 1–8 (Home: 1–6, figure 7–12) */
.hero, .page-hero { padding: 56px 0; }
.hero .container.grid, .page-hero .container.grid { align-items: center; }
.hero h1, .page-hero h1, .hero .lede, .page-hero .lede { max-width: none; }
.hero-figure .conv { width: 100%; height: auto; display: block; }

/* Stats: four columns, a rule above each */
.stats { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.stats li { grid-column: span 3; margin: 0; border-top: 1px solid var(--border-default); padding-top: var(--space-3); }
.stats strong { display: block; font-family: var(--font-label); font-weight: 600; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; color: var(--accent); }
.stats span { font-size: var(--text-sm); color: var(--text-secondary); }
.stats .trail-stat { height: 6px; width: auto; margin: 10px 0 12px; }

/* Items: a list laid out in columns, each item under a rule */
.items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); }
.items > li { margin: 0; border-top: 1px solid var(--border-default); padding-top: var(--space-3); }
.items.cols-2 > li { grid-column: span 6; } .items.cols-3 > li { grid-column: span 4; } .items.cols-4 > li { grid-column: span 3; }
.items h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.items p { margin-bottom: var(--space-2); }
.items > li > a { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.items h3 a { color: inherit; text-decoration: none; } .items h3 a:hover { color: var(--accent); text-decoration: underline; }

/* Ledger: rows with a label column and a content column */
.ledger { margin: 0; padding: 0; }
.ledger > div { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); border-top: 1px solid var(--border-default); padding: var(--space-4) 0; }
.ledger dt { grid-column: span 3; font-family: var(--font-display); font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); padding-top: 3px; }
.ledger dd { grid-column: span 9; margin: 0; max-width: 62ch; }
.ledger dd h3 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.ledger dd h3 a { color: inherit; text-decoration: none; } .ledger dd h3 a:hover { color: var(--accent); text-decoration: underline; }
.ledger dd p { margin-bottom: var(--space-2); } .ledger dd p:last-child { margin-bottom: 0; }
.events-ledger > div { grid-template-columns: 1fr; padding: var(--space-3) 0; }
.events-ledger dt, .events-ledger dd { grid-column: auto; }
.events-ledger dt { margin-bottom: 2px; color: var(--accent); }
.events-ledger.past dt { color: var(--text-secondary); }
.news-links { font-size: var(--text-sm); font-weight: var(--weight-medium); }

/* Timeline on About: four columns under the dotted line */
.timeline { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.timeline li { grid-column: span 3; margin: 0; background: none; border: 0; border-top: 1px solid var(--border-default); border-radius: 0; padding: var(--space-3) 0 0; font-size: var(--text-md); }
.dot-timeline { margin: 0; }

/* Tracks on the impact-area pages: question left, answer right */
.track { grid-column: span 12; background: none; border: 0; border-top: 1px solid var(--border-default); border-radius: 0; padding: var(--space-5) 0 0; margin: 0; row-gap: var(--space-3); }
.track h3 { font-size: var(--text-lg); max-width: none; margin-bottom: var(--space-2); }
.track-name { margin: 0; }
.toc p { margin-bottom: var(--space-1); }
.toc a { display: inline; padding: 0; border: 0; background: none; color: var(--text-link); font-size: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.toc a:hover { color: var(--accent-hover); }

/* The question grid on the research overview: three columns, coloured rules */
.track-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); }
.track-col { grid-column: span 4; background: none; border-radius: 0; overflow: visible; }
.track-col header, .track-col.area-ded header, .track-col.area-d3s header, .track-col.area-dcf header { background: none; color: var(--text-body); padding: var(--space-3) 0 var(--space-2); border-top: 3px solid var(--accent); }
.track-col.area-ded header { border-color: var(--area-ded); } .track-col.area-d3s header { border-color: var(--area-d3s); } .track-col.area-dcf header { border-color: var(--area-dcf); }
.track-col header h3 { font-size: var(--text-lg); }
.track-col header a { color: var(--text-body); text-decoration: none; } .track-col header a:hover { text-decoration: underline; }
.track-col header p { color: var(--text-secondary); opacity: 1; font-size: var(--text-sm); margin: 2px 0 0; }
.track-col ol { padding: 0; }
.track-col li { margin: 0; background: none; border: 0; border-top: 1px solid var(--border-default); border-radius: 0; padding: var(--space-3) 0; font-size: var(--text-md); }
.common-track { background: none; color: var(--text-body); border-radius: 0; border-top: 3px solid var(--accent); padding: var(--space-3) 0 0; }
.common-track a { color: var(--text-link); }

/* Partners: logos on the beige, no tiles */
.partner-items .card-logo { height: 76px; display: flex; align-items: center; justify-content: center; margin: var(--space-2) 0 var(--space-3); }
.logo-label { font-family: var(--font-display); font-size: var(--text-sm); color: var(--text-secondary); margin: calc(-1 * var(--space-2)) 0 var(--space-2); text-align: center; }
.logo-wall { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); }
.logo-wall li { grid-column: span 2; }
.logo-tile, a.logo-tile { background: none; padding: var(--space-2) 0; min-height: 64px; justify-content: center; align-items: center; border: 0; }
a.logo-tile:hover { outline: none; opacity: 0.75; }

/* Home news teasers */
.news-teasers article { border-top: 1px solid var(--border-default); padding-top: var(--space-3); margin-bottom: var(--space-4); }
.news-teasers h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.news-teasers h3 a { color: inherit; text-decoration: none; } .news-teasers h3 a:hover { color: var(--accent); text-decoration: underline; }
.news-teasers p:last-child { margin-bottom: 0; }

/* Figures keep their boxes; give them the same rhythm */
.infra .layer-core { margin-top: var(--space-3); }
/* News articles: text, figures and tables share one width, columns 1–8 */
.article, .article blockquote { max-width: none; }
.article h2 { margin-top: var(--space-6); }
.article h3 { margin-top: var(--space-5); }
.programme th[scope="row"] { width: 8.5em; white-space: nowrap; }

@media (max-width: 899px) {
  .grid > [class*="col-"] { grid-column: 1 / -1; }
  .stats li, .items.cols-2 > li, .items.cols-3 > li, .items.cols-4 > li, .timeline li { grid-column: span 6; }
  .track-col { grid-column: span 12; }
  .logo-wall li { grid-column: span 4; }
  .ledger dt, .ledger dd { grid-column: span 12; } .ledger dt { margin-bottom: 4px; }
}
@media (max-width: 599px) {
  .stats li, .items > li, .items.cols-2 > li, .items.cols-3 > li, .items.cols-4 > li, .timeline li { grid-column: span 12; }
  .logo-wall li { grid-column: span 6; }
}

/* Workflow: one row on desktop, the two endpoints at either end */
@media (max-width: 899px) { .workflow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599px) { .workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }

/* Small caps labels share the logo tagline's typeface */
.eyebrow, .kicker, .date, .group-title, .figure-label, .logo-group > h3, .logo-tile small,
.timeline time, .news-body time, .track-col .t { font-family: var(--font-label); }