/* ==========================================================================
   BAECC — Benin-Asaba Expressway Concession Company
   Design system: Swiss/minimal · brand palette · light + dark
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --teal-900: #052F30;
  --teal-800: #073F41;
  --teal-700: #095759;   /* Dark Teal — primary */
  --teal-600: #0C6E71;
  --teal-500: #10898D;
  --teal-300: #91B4B5;   /* Light Teal/Gray */
  --teal-100: #DCE8E8;
  --teal-50:  #F1F6F6;

  --gold-700: #A87304;
  --gold-600: #C88C05;
  --gold-500: #E5A007;   /* Gold/Mustard — accent */
  --gold-300: #F2C765;
  --gold-100: #FCEFD2;

  --white: #FFFFFF;
  --ink-900: #0E1A1A;
  --ink-700: #2C3B3B;
  --ink-500: #5A6B6B;

  /* Semantic */
  --bg: var(--white);
  --bg-alt: var(--teal-50);
  --bg-deep: var(--teal-700);
  --surface: var(--white);
  --fg: var(--ink-700);
  --fg-strong: var(--teal-700);
  --fg-muted: var(--ink-500);
  --border: #DDE7E7;
  --border-strong: var(--teal-300);
  --accent: var(--gold-500);
  --accent-ink: #221700;
  --on-deep: var(--white);
  --on-deep-muted: #C6DADB;
  --ring: var(--gold-500);

  /* Type */
  --font-display: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Space & shape */
  --shell: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(9, 87, 89, .08), 0 2px 8px rgba(9, 87, 89, .06);
  --shadow-md: 0 4px 12px rgba(9, 87, 89, .10), 0 12px 32px rgba(9, 87, 89, .08);
  --shadow-lg: 0 12px 28px rgba(9, 87, 89, .14), 0 32px 64px rgba(9, 87, 89, .12);
  --t-fast: 150ms cubic-bezier(.4, 0, .2, 1);
  --t: 220ms cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #071B1C;
    --bg-alt: #0B2526;
    --bg-deep: #041718;
    --surface: #0E2C2D;
    --fg: #D5E3E3;
    --fg-strong: #EAF3F3;
    --fg-muted: #9BB3B4;
    --border: #1B3F40;
    --border-strong: #2A5657;
    --on-deep: #EAF3F3;
    --on-deep-muted: #9BB3B4;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, .5);
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  font-weight: 600;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--teal-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-600); }
ul, ol { padding-left: 1.15rem; }
li { margin-bottom: .4rem; }
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 2px;
}
::selection { background: var(--gold-300); color: var(--ink-900); }

/* ---------- Layout ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--alt { background: var(--bg-alt); }
.section--deep { background: var(--bg-deep); color: var(--on-deep); }
.section--deep h1, .section--deep h2, .section--deep h3 { color: var(--on-deep); }
.section--deep p { color: var(--on-deep-muted); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold-500); color: var(--accent-ink);
  padding: .8rem 1.25rem; font-weight: 600; border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

.eyebrow {
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-600); margin: 0 0 .75rem;
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: var(--gold-500); flex: none; }
.section--deep .eyebrow { color: var(--gold-300); }
.section--deep .eyebrow::before { background: var(--gold-300); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--fg-muted); max-width: 62ch; }
.section--deep .lede { color: var(--on-deep-muted); }
.measure { max-width: 68ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .75rem 1.6rem;
  font-family: var(--font-display); font-size: .95rem; font-weight: 600;
  border-radius: var(--r-md); border: 2px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t-fast), box-shadow var(--t);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--gold-500); color: var(--accent-ink); border-color: var(--gold-500); }
.btn--primary:hover { background: var(--gold-600); border-color: var(--gold-600); color: var(--accent-ink); box-shadow: var(--shadow-md); }
.btn--solid { background: var(--teal-700); color: #fff; border-color: var(--teal-700); }
.btn--solid:hover { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }
.btn--ghost { background: transparent; color: var(--fg-strong); border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--gold-500); color: var(--gold-600); background: transparent; }
.section--deep .btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.section--deep .btn--ghost:hover { border-color: var(--gold-500); color: var(--gold-300); }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.75rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 74px; }
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand__logo { height: 40px; width: auto; display: block; }
.site-footer .brand__logo { height: 44px; }
@media (max-width: 420px) { .brand__logo { height: 34px; } }

.nav { display: flex; align-items: center; gap: .15rem; }
.nav a {
  display: flex; align-items: center; min-height: 44px; padding: 0 .9rem;
  font-family: var(--font-display); font-size: .92rem; font-weight: 500;
  color: var(--fg); text-decoration: none; border-radius: var(--r-sm);
  position: relative; transition: color var(--t), background var(--t);
}
.nav a:hover { color: var(--fg-strong); background: var(--bg-alt); }
.nav a[aria-current="page"] { color: var(--fg-strong); font-weight: 600; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: 6px;
  height: 2px; background: var(--gold-500); border-radius: 2px;
}
.nav__cta { margin-left: .6rem; }

.nav-toggle {
  display: none; width: 48px; height: 48px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--fg-strong); cursor: pointer;
}
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 74px 0 auto; flex-direction: column; align-items: stretch;
    gap: 0; padding: .5rem var(--gutter) 1.5rem;
    background: var(--bg); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--t), transform var(--t), visibility var(--t);
  }
  .nav[data-open="true"] { transform: none; opacity: 1; visibility: visible; }
  .nav a { min-height: 52px; padding: 0 .5rem; border-bottom: 1px solid var(--border); border-radius: 0; }
  .nav a[aria-current="page"]::after { left: .5rem; right: auto; width: 1.5rem; bottom: 10px; }
  .nav__cta { margin: 1rem .5rem 0; }
}

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--teal-900); color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
/* Feature hero: the homepage image already carries its own dusk grade, so it
   sits brighter behind a correspondingly lighter scrim. */
.hero--feature .hero__media img { opacity: .72; }
.hero--feature .hero__scrim {
  background:
    linear-gradient(100deg, rgba(5,47,48,.92) 0%, rgba(5,47,48,.74) 38%, rgba(5,47,48,.30) 78%, rgba(5,47,48,.12) 100%),
    linear-gradient(to top, rgba(4,23,24,.85), transparent 60%);
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(5,47,48,.95) 0%, rgba(5,47,48,.82) 42%, rgba(5,47,48,.45) 100%),
    linear-gradient(to top, rgba(4,23,24,.9), transparent 55%);
}
.hero__inner { position: relative; padding-block: clamp(4rem, 11vw, 8.5rem); }
.hero h1 { color: #fff; max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--gold-500); }
.hero__lede { font-size: clamp(1.05rem, 1.9vw, 1.3rem); color: #CFE0E0; max-width: 58ch; }
.hero__eyebrow { color: var(--gold-300); }
.hero__eyebrow::before { background: var(--gold-500); }
.hero--page .hero__inner { padding-block: clamp(3rem, 7vw, 5rem); }
.hero--page h1 { max-width: 22ch; }

.hero__stats {
  position: relative; display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  background: rgba(255,255,255,.14);
  border-top: 1px solid rgba(255,255,255,.14);
}
.hero__stat { background: var(--teal-900); padding: 1.6rem var(--gutter); }
.hero__stat dt { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: #9EBDBE; margin-bottom: .3rem; }
.hero__stat dd { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: #fff; }
.hero__stat dd span { font-size: .95rem; font-weight: 500; color: var(--gold-300); display: block; letter-spacing: .01em; }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 1.5rem; }
/* Grid/flex children default to min-width:auto, which lets wide tables and the
   corridor SVG push the page wider than the viewport. Pin them to zero. */
.grid > *, .split > *, .corridor > *, .corridor > * > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.75rem;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.card--hover:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card__icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: var(--teal-100); color: var(--teal-700);
}
.card__icon--gold { background: var(--gold-100); color: var(--gold-700); }
.card h3 { margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }
.card__num {
  font-family: var(--font-display); font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; color: var(--gold-600); margin-bottom: .6rem;
}

/* Cards sitting on a dark-teal section keep their own light surface, so the
   section's inverted text colours must not leak into them. */
.section--deep .card h2,
.section--deep .card h3,
.section--deep .card h4 { color: var(--fg-strong); }
.section--deep .card p { color: var(--fg); }
.section--deep .card .card__num { color: var(--gold-600); }

/* Emphasised card copy — used for the benefit and capability lists so the
   content reads as a statement, in brand teal rather than muted grey. */
.card--bold h3 { color: var(--fg-strong); }
.card--bold p { font-weight: 600; color: var(--fg-strong); }
.card--bold .card__num { color: var(--gold-700); font-weight: 700; }
.section--deep .card--bold p { color: var(--fg-strong); }

/* ---------- Split ---------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-left { grid-template-columns: 1.25fr 1fr; } }

/* ---------- Interactive corridor map ---------- */
.corridor { display: grid; gap: 1.75rem; }
@media (min-width: 1000px) { .corridor { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); align-items: start; } }

.corridor__stage {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.25rem 1rem .75rem; overflow-x: auto;
}
.corridor__svg { width: 100%; min-width: 560px; height: auto; touch-action: manipulation; }

.node { cursor: pointer; }
.node__hit { fill: transparent; }
.node__dot { fill: var(--white); stroke: var(--teal-700); stroke-width: 3; transition: fill var(--t), stroke var(--t); }
.node__label { font-family: var(--font-display); font-size: 11.5px; font-weight: 600; fill: var(--fg-strong); }
.node__sub  { font-family: var(--font-body); font-size: 10px; fill: var(--fg-muted); }
.node:hover .node__dot, .node:focus-visible .node__dot { fill: var(--gold-500); stroke: var(--gold-700); }
.node[aria-pressed="true"] .node__dot { fill: var(--gold-500); stroke: var(--gold-700); }
.node[aria-pressed="true"] .node__label { fill: var(--gold-700); }
.node:focus-visible { outline: none; }
.node:focus-visible .node__ring { opacity: 1; }
.node[aria-pressed="true"] .node__ring { opacity: 1; stroke: var(--gold-500); }
.node__ring { fill: none; stroke: var(--gold-500); stroke-width: 2.5; opacity: 0; transition: opacity var(--t); }

.map-legend { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: .5rem; padding: 0 .5rem; font-size: .82rem; color: var(--fg-muted); }
.map-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.map-legend i { width: 22px; height: 4px; border-radius: 2px; display: inline-block; }

.corridor__panel {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--gold-500);
  border-radius: var(--r-lg); padding: 1.6rem;
}
@media (min-width: 1000px) { .corridor__panel { position: sticky; top: 96px; } }
.corridor__panel h3 { margin-bottom: .15rem; }
.corridor__chain { font-family: var(--font-display); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-600); margin-bottom: .9rem; }
.corridor__facts { list-style: none; margin: 1.1rem 0 0; padding: 0; border-top: 1px solid var(--border); }
.corridor__facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; margin: 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.corridor__facts .k { color: var(--fg-muted); }
.corridor__facts .v { font-weight: 600; color: var(--fg-strong); text-align: right; }
.corridor__hint { font-size: .82rem; color: var(--fg-muted); margin-top: 1rem; }

/* Mobile corridor list — replaces the strip map below 760px, where the SVG
   renders 7px labels behind a horizontal scroll. Built by main.js from the
   same node data, so there is no duplicated markup to keep in sync. */
.corridor__list { display: none; list-style: none; margin: 0; padding: 0; gap: .5rem; }
.corridor__list li { margin: 0; }
.corridor__pin {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  width: 100%; min-height: 52px; padding: .7rem 1rem; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-left: 4px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--t), background var(--t);
}
.corridor__pin-name { font-family: var(--font-display); font-weight: 600; color: var(--fg-strong); font-size: .95rem; }
.corridor__pin-chain { font-size: .78rem; color: var(--fg-muted); white-space: nowrap; }
.corridor__pin[aria-pressed="true"] {
  border-left-color: var(--gold-500);
  background: var(--bg-alt);
}
.corridor__pin[aria-pressed="true"] .corridor__pin-name { color: var(--gold-700); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .corridor__pin[aria-pressed="true"] .corridor__pin-name { color: var(--gold-300); }
}

/* ---------- Progress bars ---------- */
.progress-list { display: grid; gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.progress { margin: 0; }
.progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .45rem; }
.progress__name { font-family: var(--font-display); font-weight: 600; color: var(--fg-strong); }
.progress__pct { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--gold-600); font-variant-numeric: tabular-nums; }
.progress__track { height: 12px; border-radius: 999px; background: var(--teal-100); overflow: hidden; }
.progress__fill { height: 100%; border-radius: 999px; background: var(--teal-700); width: 0; transition: width 900ms cubic-bezier(.4,0,.2,1); }
.progress__fill--gold { background: var(--gold-500); }
.progress__note { font-size: .85rem; color: var(--fg-muted); margin: .4rem 0 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .progress__track { background: #143D3E; } }

/* ---------- Gallery / slideshow ---------- */
/* Centred section intro — used where a block leads a full-width showcase */
.measure--center { margin-inline: auto; text-align: center; }
.measure--center .eyebrow { justify-content: center; }
.measure--center .lede { margin-inline: auto; }

.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.gallery--center { max-width: 1040px; margin-inline: auto; }
.gallery__item {
  position: relative; margin: 0; padding: 0; border: 0; background: var(--teal-100);
  border-radius: var(--r-md); overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; display: block; width: 100%;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(.4,0,.2,1); }
.gallery__item:hover img, .gallery__item:focus-visible img { transform: scale(1.045); }
.gallery__cap {
  position: absolute; inset: auto 0 0; padding: 2.5rem .9rem .8rem; text-align: left;
  background: linear-gradient(to top, rgba(5,47,48,.92), transparent);
  color: #fff; font-size: .85rem; font-family: var(--font-display); font-weight: 500;
}
.gallery__cap small { display: block; font-family: var(--font-body); font-weight: 400; color: #B9D2D3; font-size: .76rem; }

.lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1120px); width: 100%; }
.lightbox::backdrop { background: rgba(4, 23, 24, .92); }
.lightbox__frame { position: relative; background: var(--teal-900); border-radius: var(--r-lg); overflow: hidden; }
.lightbox__img { width: 100%; max-height: 74vh; object-fit: contain; background: #041718; }
.lightbox__bar { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; color: #fff; }
.lightbox__cap { flex: 1; font-size: .9rem; }
.lightbox__cap small { display: block; color: #9EBDBE; font-size: .78rem; }
.lightbox__count { font-variant-numeric: tabular-nums; font-size: .82rem; color: #9EBDBE; }
.icon-btn {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--r-md); cursor: pointer; transition: background var(--t), border-color var(--t), color var(--t);
}
.icon-btn:hover { background: var(--gold-500); color: var(--accent-ink); border-color: var(--gold-500); }
.lightbox__close { position: absolute; top: .75rem; right: .75rem; z-index: 2; }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--border-strong); }
.timeline li { position: relative; padding: 0 0 1.6rem 2.4rem; margin: 0; }
.timeline li::before {
  content: ""; position: absolute; left: 3px; top: 6px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--bg); border: 3px solid var(--teal-300);
}
.timeline li[data-state="done"]::before { background: var(--teal-700); border-color: var(--teal-700); }
.timeline li[data-state="active"]::before { background: var(--gold-500); border-color: var(--gold-500); box-shadow: 0 0 0 4px var(--gold-100); }
.timeline__date { font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-600); display: block; }
.timeline__title { font-family: var(--font-display); font-weight: 600; color: var(--fg-strong); }
.timeline p { margin: .2rem 0 0; font-size: .92rem; color: var(--fg-muted); }

/* ---------- Team ---------- */
.person { display: flex; flex-direction: column; height: 100%; }
.person__avatar {
  width: 60px; height: 60px; border-radius: 50%; flex: none; margin-bottom: 1rem;
  display: grid; place-items: center; background: var(--teal-700); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: .02em;
}
.person__role { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-600); font-weight: 600; margin-bottom: .75rem; }
.person__bio { font-size: .92rem; color: var(--fg-muted); margin: 0; }
.person__bio[data-clamp="true"] { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.person__more {
  align-self: flex-start; margin-top: .9rem; min-height: 44px; padding: 0 .1rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: .88rem; color: var(--teal-600);
  border-bottom: 2px solid transparent; transition: color var(--t), border-color var(--t);
}
.person__more:hover { color: var(--gold-600); border-color: var(--gold-500); }

/* ---------- Partner cards ---------- */
.partner__role {
  display: inline-block; font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--teal-700);
  background: var(--teal-100); border-radius: 999px; padding: .3rem .8rem; margin-bottom: .9rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .partner__role { background: #143D3E; color: var(--teal-300); }
  :root:not([data-theme="light"]) .card__icon { background: #143D3E; color: var(--teal-300); }
  :root:not([data-theme="light"]) .card__icon--gold { background: #3A2C08; color: var(--gold-300); }
  :root:not([data-theme="light"]) .contact-tile__icon { background: #3A2C08; color: var(--gold-300); }
  :root:not([data-theme="light"]) .timeline li[data-state="active"]::before { box-shadow: 0 0 0 4px #3A2C08; }
}

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 520px; }
caption { text-align: left; padding: 1rem 1.1rem; color: var(--fg-muted); font-size: .88rem; }
th, td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--border); }
thead th { background: var(--teal-700); color: #fff; font-family: var(--font-display); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--bg-alt); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Forms ---------- */
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--fg-strong); margin-bottom: .4rem; }
.field .hint { font-size: .82rem; color: var(--fg-muted); font-weight: 400; display: block; margin-top: .15rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .7rem .9rem;
  font-family: var(--font-body); font-size: 1rem; color: var(--fg);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  transition: border-color var(--t), box-shadow var(--t);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px var(--gold-100);
}
.field .error { color: #B4231C; font-size: .85rem; margin-top: .35rem; display: none; font-weight: 600; }
.field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-color: #B4231C; }
.field[data-invalid="true"] .error { display: block; }
.form-note { font-size: .85rem; color: var(--fg-muted); }
.form-status {
  display: none; margin-bottom: 1.25rem; padding: 1rem 1.1rem; border-radius: var(--r-md);
  background: var(--teal-100); border-left: 4px solid var(--teal-700); color: var(--teal-700); font-size: .93rem;
}
.form-status[data-shown="true"] { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .form-status { background: #143D3E; color: var(--teal-300); } }

/* ---------- Contact tiles ---------- */
.contact-tile { display: flex; gap: 1rem; align-items: flex-start; }
.contact-tile__icon { width: 42px; height: 42px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; background: var(--gold-100); color: var(--gold-700); }
.contact-tile h3 { font-size: 1.02rem; margin-bottom: .2rem; }
.contact-tile p { margin: 0; font-size: .93rem; color: var(--fg-muted); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--teal-700); color: #fff; border-radius: var(--r-lg); padding: clamp(2rem, 5vw, 3.5rem); }
.cta-band h2 { color: #fff; }
.cta-band p { color: #C6DADB; max-width: 56ch; }
.cta-band .btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.cta-band .btn--ghost:hover { border-color: var(--gold-500); color: var(--gold-300); }

/* ---------- Footer ---------- */
.site-footer { background: var(--teal-900); color: #B9D2D3; padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.site-footer h4 { color: #fff; font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a { color: #B9D2D3; text-decoration: none; }
.site-footer a:hover { color: var(--gold-300); text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer li a { display: inline-flex; min-height: 32px; align-items: center; }
.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer__brand p { font-size: .92rem; max-width: 34ch; margin-top: 1rem; }
.footer__brand .brand { margin-right: 0; }
.footer__bottom {
  margin-top: 3rem; padding-block: 1.5rem; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
  font-size: .84rem; color: #8FAEAF;
}
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__sub { color: #8FAEAF; }

/* ---------- Utility ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack > * + * { margin-top: 1rem; }
.mt-0 { margin-top: 0; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms cubic-bezier(.4,0,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   MOBILE PASS
   A dedicated small-screen layer. Three jobs: hide what cannot work at this
   width, tighten spacing that was tuned for desktop, and resize the few
   components that break. Everything here is additive — the desktop layout
   above is untouched.
   ========================================================================== */

/* ---- HIDE ------------------------------------------------------------
   The corridor strip map carries 11.5px labels inside a 900-unit viewBox, so
   its effective type size falls with the container. Below roughly 875px of
   viewport the labels drop under 10px — 8.4px at tablet width, 7.2px at
   375px, where it is also a 560px SVG behind a horizontal scrollbar with
   10px tap targets. Swap it for the tappable list from that point down; the
   chainage ruler and colour legend go with it, since both only describe the
   drawing. The threshold matches the navigation's own breakpoint, so below
   900px the whole site is consistently in compact mode. */
@media (max-width: 900px) {
  .corridor__stage { display: none; }
  .corridor__list { display: grid; }
  .corridor__hint { display: none; }
}

/* Gallery captions are overlaid on the tiles. They hold up at half of a
   760px viewport; by 520px the tiles are too narrow to read them, and the
   lightbox carries the same caption and location anyway. */
@media (max-width: 520px) {
  .gallery__cap { display: none; }
}

@media (max-width: 760px) {

  /* ---- TIGHTEN ---------------------------------------------------------
     Desktop rhythm costs roughly three extra screens of scrolling here. */
  .section { padding-block: 2.75rem; }
  .card { padding: 1.25rem; }
  .grid { gap: 1rem; }
  .corridor { gap: 1rem; }
  .corridor__panel { padding: 1.25rem; }
  .hero__inner { padding-block: 3rem; }
  .hero--page .hero__inner { padding-block: 2.5rem; }
  .measure[style*="margin-bottom:3rem"],
  .measure[style*="margin-bottom:2.5rem"] { margin-bottom: 1.75rem !important; }

  .footer__grid { gap: 1.75rem; }
  .site-footer { padding-block: 2.5rem 0; }
  .footer__bottom { margin-top: 2rem; }

  /* ---- RESIZE ----------------------------------------------------------
     Full-width buttons: easier to hit, and they stop wrapping into ragged
     two-up rows. */
  .btn-row { gap: .65rem; }
  .btn-row .btn { flex: 1 1 100%; }

  /* Two-up gallery. Thirteen single-column 4:3 tiles ran 3,458px tall. */
  .gallery { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .gallery__item { aspect-ratio: 1 / 1; }

  /* Lightbox: shorter image so the control bar always fits, and the bar
     stacks — caption on its own line, controls beneath it. */
  .lightbox { max-width: 100vw; }
  .lightbox__frame { border-radius: 0; }
  .lightbox__img { max-height: 56vh; }
  .lightbox__bar { flex-wrap: wrap; gap: .6rem; padding: .75rem .8rem 1rem; }
  .lightbox__cap { order: -1; flex: 1 0 100%; font-size: .85rem; }
  .lightbox__count { order: 1; flex: 1; text-align: center; }

  /* Tables stay scrollable but carry less dead width. */
  table { min-width: 440px; font-size: .86rem; }
  th, td { padding: .65rem .75rem; }
  caption { padding: .85rem .75rem; }

  /* Footer links were 32px tall — under the 44px minimum. */
  .site-footer li a { min-height: 44px; }
  .site-footer li { margin-bottom: .15rem; }
  .brand { padding-block: .35rem; }
}

/* Narrow phones: one more notch of tightening. */
@media (max-width: 400px) {
  .section { padding-block: 2.25rem; }
  .card { padding: 1.1rem; }
  .gallery { gap: .4rem; }
  .corridor__pin { padding: .65rem .85rem; }
  .corridor__pin-chain { display: none; }
}

/* Landscape phones: the hero should not eat the whole screen. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .hero__inner { padding-block: 2rem; }
  .lightbox__img { max-height: 62vh; }
}

/* Scroll affordance for wide tables — only meaningful where they overflow. */
.scroll-hint { display: none; }
@media (max-width: 760px) {
  .scroll-hint {
    display: flex; align-items: center; gap: .45rem;
    font-size: .82rem; color: var(--fg-muted); margin: 0 0 .5rem;
  }
}