/* =========================================================================
   AVENTRA — "Lijnvoering" design system (2026 revamp #2)
   ---------------------------------------------------------------------
   Every previous layout was rebuilt from zero for this pass — not a
   re-skin. The one constraint carried over on purpose: the official
   brand colors (--blue / --amber, tied to the bus livery + brand guide)
   keep their exact values, and the wordmark (.brand / .brand-word) is
   untouched. Everything else — spacing, radius, shadow, card language,
   button shape, section rhythm, the hero itself — is new.

   New signature: a "route line" runs through the site the way a bus
   route runs through a city — a dashed rail with stop-markers, used
   wherever content is genuinely sequential (the live network map, the
   step-by-step timeline, the news feed). Cards that naturally split into
   two zones (a rijgebied, a review, the primary contact card) get a
   perforated "ticket" seam between them — an Aventra is, after all,
   a company you ride, not a SaaS dashboard.
   ========================================================================= */

:root {
  /* ---- brand colors: FIXED, do not change (see assets/README above) ---- */
  --paper: #FAFAFB;
  --surface: #FFFFFF;
  --surface-2: #F1F3F7;
  --surface-3: #EAF2FF;
  --ink: #1B1D24;
  --ink-soft: #5A5D6B;
  --ink-faint: #90929E;
  --line: #E5E7EC;
  --line-2: #D6D9E1;
  --blue: #0B5FE0;
  --blue-2: #2E7CFF;
  --blue-dark: #0A2E6B;
  --blue-ink: #081D46;
  --amber: #FFB92E;
  --amber-2: #E69200;
  --ok: #1F9E5C;
  --warn: #C6862A;
  --danger: #D93A3A;
  --shadow-xs: 0 1px 2px rgba(20,24,38,0.05);
  --shadow-sm: 0 4px 14px rgba(20,24,38,0.07);
  --shadow-md: 0 14px 32px rgba(20,24,38,0.12);
  --shadow-lg: 0 26px 60px rgba(10,14,28,0.22);

  /* ---- new to this revamp: a tighter, more architectural scale ---- */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --rail-blue: repeating-linear-gradient(to bottom, var(--blue) 0 6px, transparent 6px 14px);
  --rail-amber: repeating-linear-gradient(to bottom, var(--amber) 0 6px, transparent 6px 14px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: 'Quicksand', sans-serif; line-height: 1.6; font-weight: 500;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
h1, h2, h3, h4 { font-family: 'Quicksand', sans-serif; font-weight: 800; letter-spacing: -0.02em; }

/* ---------- header: flat rail instead of a floating pill-nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30; background: rgba(250,250,251,0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1.5px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand-word {
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 1.34rem; letter-spacing: -0.01em;
  text-transform: lowercase; color: var(--ink); display: inline-flex; align-items: center;
}
.footer-logo { display: none; }
.footer-brand .brand-word { color: #fff; }

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  text-decoration: none; color: var(--ink-soft); font-weight: 700; font-size: 0.88rem;
  padding: 8px 4px; margin: 0 10px; position: relative; transition: color 0.15s ease;
}
.main-nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--blue);
  transition: right 0.22s cubic-bezier(.16,.84,.44,1);
}
.main-nav a:hover { color: var(--ink); }
.main-nav a:hover::after { right: 0; }
.main-nav a.active { color: var(--blue); }
.main-nav a.active::after { right: 0; background: var(--amber); }

.nav-toggle {
  display: none; background: none; border: none; border-radius: 8px; cursor: pointer; padding: 6px;
  width: 40px; height: 40px; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle-bar { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 1px; transition: transform 0.25s ease, opacity 0.2s ease; }
#mainNav.open ~ .nav-toggle .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#mainNav.open ~ .nav-toggle .nav-toggle-bar:nth-child(2) { opacity: 0; }
#mainNav.open ~ .nav-toggle .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav-toggle-bar { transition: none; } }

.lang-switch {
  display: flex; align-items: center; gap: 2px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); padding: 3px; flex: none; background: var(--surface);
}
.lang-btn {
  background: none; border: none; color: var(--ink-soft); font-family: 'Quicksand', sans-serif;
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.03em; padding: 6px 10px; border-radius: 7px;
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.lang-btn:hover { color: var(--ink); background: var(--surface-2); }
.lang-btn.active { background: var(--blue); color: #fff; }
.lang-btn.active:hover { background: var(--blue); color: #fff; }

/* ---------- eyebrow: a bus-line-shield chip, not a soft pill ---------- */
.section-eyebrow, .hero-eyebrow {
  font-family: 'Quicksand', sans-serif; font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: #fff; margin: 0 0 12px; display: inline-flex; align-items: center; gap: 8px; font-weight: 800;
  background: var(--blue); padding: 6px 13px; border-radius: 7px;
}

/* =========================================================================
   HERO — asymmetric split: copy on the left, the live network card on the
   right. On the old site this was two stacked, centered sections; here
   it's one composition, so the "live" piece reads as part of the pitch
   instead of a separate module underneath it.
   ========================================================================= */
.hero { position: relative; overflow: hidden; padding: 56px 0 84px; background: var(--paper); }
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
}
.hero::before {
  top: -160px; right: -120px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(11,95,224,0.09), transparent 70%);
}
.hero::after {
  bottom: -180px; left: -140px; width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(255,185,46,0.12), transparent 70%);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.hero-copy { max-width: 560px; }
.hero-copy h1 {
  font-weight: 800; font-size: clamp(2.5rem, 5.2vw, 4rem); line-height: 1.03;
  margin: 0 0 20px; letter-spacing: -0.03em; color: var(--ink);
}
.hero-copy > p.hero-lead {
  font-size: 1.1rem; color: var(--ink-soft); margin: 0 0 30px; font-weight: 500;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.hero-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px; background: var(--surface);
  border: 1.5px solid var(--line); color: var(--ink-soft); font-size: 0.8rem;
  font-weight: 700; padding: 7px 14px; border-radius: 999px; box-shadow: var(--shadow-xs);
}

/* ---------- live network hub card — now the hero's right column ----------
   .hub-panel-hit is a plain, never-transformed wrapper: it's what the
   cursor-tilt listens on and measures against, so its hit box stays a
   stable flat rectangle. .hub-panel-card (the actual visual card, inside
   it) is what receives the 3D rotation. Keeping them separate means the
   tilt can never rotate the plane out from under its own hit-test near
   the edges — with a single element doing both, hovering toward a corner
   could tilt the card's hit box away from the cursor mid-move, firing a
   spurious mouseleave that snapped the tilt back to flat. */
.hub-panel-hit { display: block; }
.hub-panel-card {
  background:
    radial-gradient(circle at 85% 8%, rgba(255,185,46,0.16), transparent 55%),
    linear-gradient(155deg, #0E2C63 0%, var(--blue-ink) 60%, #050F26 100%);
  border-radius: var(--radius-lg); padding: 30px 26px 34px; color: #fff; position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg); will-change: transform;
}
.hub-panel-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.hub-live-tag {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1);
  color: #fff; font-family: 'Quicksand', sans-serif; align-self: flex-start;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 13px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.2);
}
.hub-panel-head h2 { margin: 0; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em; }
.hub-panel-head > p { margin: 0; color: rgba(255,255,255,0.68); font-size: 0.92rem; }
.hub-stats { display: flex; gap: 26px; flex-wrap: wrap; }
.hub-stats:empty { display: none; margin: 0; }
.hub-stat { display: flex; flex-direction: column; gap: 2px; }
.hub-stat-num {
  font-family: 'Quicksand', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.hub-stat-label {
  font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.55);
}

.hub-map-wrap {
  position: relative; aspect-ratio: 1 / 1; max-width: 420px; margin: 0 auto;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius);
  padding: 8px; overflow: visible;
}
.hub-map { position: relative; width: 100%; height: 100%; display: block; border-radius: 10px; overflow: hidden; }
.hub-line {
  fill: none; stroke: rgba(255,185,46,0.55); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 14;
}
.hub-stations { position: absolute; inset: 8px; }
.hub-station {
  position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center;
  gap: 6px; background: none; border: none; cursor: pointer; padding: 6px; color: #fff; font-family: 'Quicksand', sans-serif;
}
.hub-station-dot {
  width: 18px; height: 18px; border-radius: 50%; background: var(--blue-ink); border: 2px solid var(--amber);
  display: flex; align-items: center; justify-content: center; transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hub-station:hover .hub-station-dot, .hub-station:focus-visible .hub-station-dot, .hub-station.active .hub-station-dot {
  transform: scale(1.25); box-shadow: 0 0 0 7px rgba(255,185,46,0.2);
}
.hub-station-label {
  font-size: 0.62rem; font-weight: 800; white-space: nowrap; max-width: 88px; overflow: hidden; text-overflow: ellipsis;
  background: rgba(8,29,70,0.85); padding: 2px 8px; border-radius: 6px; letter-spacing: 0.01em;
}
.hub-empty-note {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 30px; color: rgba(255,255,255,0.6); font-size: 0.9rem;
}
.hub-empty-note[hidden] { display: none; }

/* ---------- full-page network map (lijnen.html) — same station/line/
   tooltip renderer as the compact hero map above, just laid out wide and
   without the hero's stats row or live-tag header. ---------- */
.hub-panel-card.wide { padding: 26px; max-width: 900px; margin: 0 auto; }
.hub-panel-card.wide .hub-live-tag { margin-bottom: 18px; }
.hub-map-wrap.wide { max-width: 100%; aspect-ratio: 1000 / 440; }
/* the compact hero map keeps station names short (88px) to fit a small
   square card, but this full-page map has plenty of room — let names
   like "Stadsnet Centrum" show in full instead of clipping to "…Ce…". */
.hub-map-wrap.wide .hub-station-label { max-width: 170px; font-size: 0.7rem; }
@media (max-width: 720px) { .hub-map-wrap.wide .hub-station-label { max-width: 110px; font-size: 0.62rem; } }

.hub-tooltip {
  position: absolute; z-index: 4; transform: translate(-50%, calc(-100% - 14px)); background: var(--surface);
  color: var(--ink); border-radius: var(--radius-sm); padding: 14px 16px; min-width: 190px;
  box-shadow: var(--shadow-md); pointer-events: none;
}
.hub-tooltip::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px;
  background: var(--surface); border-radius: 0 0 3px 0;
}
.hub-tooltip-name { font-weight: 800; font-size: 0.9rem; margin-bottom: 8px; }
.hub-tooltip-row { display: flex; justify-content: space-between; gap: 14px; font-size: 0.8rem; color: var(--ink-soft); padding: 2px 0; }
.hub-tooltip-row b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- buttons: structured rect, not a floating pill ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: 'Quicksand', sans-serif; font-weight: 800;
  font-size: 0.92rem; text-decoration: none; padding: 13px 24px; border-radius: var(--radius-sm); border: none;
  cursor: pointer; transition: transform 0.22s cubic-bezier(.34,1.56,.64,1), box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); position: relative; -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-3px) scale(1.015); box-shadow: var(--shadow-sm); border-color: var(--line-2); }
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 3px 0 0 var(--blue-dark); }
.btn-primary:hover { background: var(--blue-2); border-color: var(--blue-2); box-shadow: 0 3px 0 0 var(--blue-dark); transform: translateY(-3px) scale(1.015); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 2px 0 0 var(--blue-dark); }
.btn-ghost { background: rgba(255,255,255,0.08); color: #fff; box-shadow: none; border: 1.5px solid rgba(255,255,255,0.35); }
.btn-ghost:hover { background: rgba(255,255,255,0.16); box-shadow: none; }
.btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-dark:hover { background: #000; border-color: #000; }
.btn-coral { background: var(--amber-2); color: #fff; border-color: var(--amber-2); }
.btn-coral:hover { background: #C97F00; border-color: #C97F00; }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .btn { transition: box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .btn:hover, .btn-primary:hover { transform: none; } .btn:active { transform: none; } }

.stat-num { font-family: 'Quicksand', sans-serif; font-weight: 800; font-size: 1.8rem; color: var(--blue); font-variant-numeric: tabular-nums; }
.stat-label { font-family: 'Quicksand', sans-serif; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }
.stat-card {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
  box-shadow: var(--shadow-xs);
}
.stat-card.lg {
  background: var(--ink); color: #fff; border-color: var(--ink);
  display: flex; flex-direction: column; justify-content: center;
}
.stat-card.lg .stat-num { color: var(--amber); font-size: 2.2rem; }
.stat-card.lg .stat-label { color: rgba(255,255,255,0.6); }

/* ---------- generic page hero (inner pages) — left-aligned, structural,
   with a solid line-number-style eyebrow instead of a radial-glow blob ---------- */
.page-hero { padding: 64px 0 52px; border-bottom: 1.5px solid var(--line); background: var(--surface-2); }
.page-hero .wrap { max-width: 760px; }
.page-hero h1 { font-weight: 800; font-size: clamp(2rem, 4.2vw, 3rem); margin: 0 0 12px; letter-spacing: -0.03em; color: var(--ink); }
.page-hero p { color: var(--ink-soft); max-width: 580px; margin: 0; font-size: 1.05rem; }

/* ---------- sections ---------- */
section.block { padding: 72px 0; }
section.block.tight { padding: 44px 0; }
section.block.alt { background: var(--surface-2); }
section.block.lime { background: var(--surface-3); }
.section-head { max-width: 640px; margin: 0 0 36px; }
.section-head h2 { font-weight: 800; font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin: 0 0 10px; letter-spacing: -0.02em; }
.section-head p { color: var(--ink-soft); margin: 0; font-size: 1.01rem; }
/* the eyebrow chip is also a <p>, so it needs to win over the rule above */
.section-head .section-eyebrow, .section-head .hero-eyebrow {
  color: #fff; font-size: 0.7rem; margin: 0 0 12px;
}

/* ---------- card system: structured surface + colored top rail, no
   uniform soft-shadow-everywhere ---------- */
.feature-card, .why-card, .step-card, .timeline-step-body, .contact-card, .review-card {
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px 24px;
  box-shadow: var(--shadow-xs); position: relative;
  border-top: 4px solid var(--blue);
  transition: transform 0.2s cubic-bezier(.16,.84,.44,1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.why-card { border-top-color: var(--amber); }
.timeline-step-body, .contact-card { border-top-color: var(--ink); }
.feature-card:hover, .why-card:hover, .step-card:hover, .review-card:hover, .contact-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-md);
}
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.feature-icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex: none;
}
.feature-card h3 { font-weight: 800; font-size: 1.05rem; margin: 0; }
.feature-card p { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }
.feature-card { display: flex; flex-direction: column; gap: 10px; }

/* ---------- concession / folder cards — reworked as a boarding pass:
   info zone, a perforated seam, then the fare/CTA stub ---------- */
.folder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.folder-card {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-xs); display: flex; flex-direction: column;
  position: relative; overflow: visible; transition: transform 0.2s cubic-bezier(.16,.84,.44,1), box-shadow 0.2s ease;
}
.folder-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.folder-card.top { border-color: var(--amber-2); }
.folder-card::before {
  content: ''; position: absolute; left: 22px; right: 22px; top: 128px; border-top: 2px dashed var(--line-2);
}
.folder-card::after {
  content: ''; position: absolute; left: -8px; right: -8px; top: 128px; height: 16px; pointer-events: none;
  background:
    radial-gradient(circle 8px at 0 0, var(--paper) 0 7px, var(--line) 7px 7.6px, transparent 7.6px) top left / 16px 16px no-repeat,
    radial-gradient(circle 8px at 100% 0, var(--paper) 0 7px, var(--line) 7px 7.6px, transparent 7.6px) top right / 16px 16px no-repeat;
}
section.block .folder-card::after, section.block.tight .folder-card::after {
  background:
    radial-gradient(circle 8px at 0 0, var(--paper) 0 7px, var(--line) 7px 7.6px, transparent 7.6px) top left / 16px 16px no-repeat,
    radial-gradient(circle 8px at 100% 0, var(--paper) 0 7px, var(--line) 7px 7.6px, transparent 7.6px) top right / 16px 16px no-repeat;
}
section.block.alt .folder-card::after, section.block.lime .folder-card::after {
  background:
    radial-gradient(circle 8px at 0 0, var(--surface-2) 0 7px, var(--line) 7px 7.6px, transparent 7.6px) top left / 16px 16px no-repeat,
    radial-gradient(circle 8px at 100% 0, var(--surface-2) 0 7px, var(--line) 7px 7.6px, transparent 7.6px) top right / 16px 16px no-repeat;
}
.folder-card > * { position: relative; z-index: 1; }
.folder-badge {
  position: absolute; top: 18px; right: 18px; background: var(--amber); color: var(--ink);
  font-family: 'Quicksand', sans-serif; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 6px; z-index: 2;
}
.folder-name { font-family: 'Quicksand', sans-serif; font-weight: 800; font-size: 1.06rem; padding: 20px 22px 18px; }
.folder-card.top .folder-name { padding-right: 92px; }
.folder-metric { display: flex; align-items: center; gap: 14px; padding: 0 22px 22px; }
.folder-metric-num { font-family: 'Quicksand', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--blue); flex: none; min-width: 62px; }
.folder-bar { flex: 1; height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.folder-bar-fill { height: 100%; background: var(--blue); border-radius: 999px; transition: width 1.1s cubic-bezier(.16,.84,.44,1); }
@media (prefers-reduced-motion: reduce) { .folder-bar-fill { transition: none; } }
.folder-row { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--ink-soft); padding: 0 22px; margin-top: 14px; }
.folder-row b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.folder-cta {
  margin: 16px 22px 20px; font-weight: 800; font-size: 0.86rem; color: var(--blue); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.folder-cta:hover { text-decoration: underline; }
.empty-note { color: var(--ink-soft); font-size: 0.9rem; }

/* ---------- announcements: a route timeline, dashed rail + stop-dots ---------- */
.announce-list:has(.announce-item) { position: relative; display: flex; flex-direction: column; gap: 20px; padding-left: 32px; }
.announce-list:has(.announce-item)::before {
  content: ''; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--line-2) 0 5px, transparent 5px 11px);
}
.announce-item {
  position: relative; background: var(--surface); border: 1.5px solid var(--line); border-left: 3px solid var(--ok); border-radius: var(--radius-sm);
  padding: 16px 20px; box-shadow: var(--shadow-xs);
}
.announce-item:has(.announce-severity-verstoord) { border-left-color: var(--warn); }
.announce-item:has(.announce-severity-ernstig) { border-left-color: var(--danger); }
.announce-item::before {
  content: ''; position: absolute; left: -32px; top: 19px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--amber); border: 3px solid var(--paper); z-index: 1;
}
.announce-item-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 6px; }
.announce-date {
  font-family: 'Quicksand', sans-serif; font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0;
}
.announce-title { margin: 0 0 4px; font-weight: 800; font-size: 1.02rem; }
.announce-message { margin: 0; font-size: 0.96rem; }
.announce-severity-tag {
  font-family: 'Quicksand', sans-serif; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em;
  border-radius: 6px; padding: 3px 10px; white-space: nowrap; color: #fff;
}
.announce-severity-normaal { background: var(--ok); }
.announce-severity-verstoord { background: var(--warn); }
.announce-severity-ernstig { background: var(--danger); }
.teaser-announce {
  background: var(--surface); border: 1.5px solid var(--line); border-left: 4px solid var(--amber); border-radius: var(--radius); padding: 24px 26px;
  display: flex; align-items: flex-start; gap: 18px; box-shadow: var(--shadow-xs);
}
.teaser-announce .feature-icon { background: rgba(255,185,46,0.16); color: var(--amber-2); }
.teaser-announce-body h3 { margin: 0 0 4px; font-size: 1.02rem; }
.teaser-announce-body p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; }

/* ---------- over ons: story + timeline + pullquote ---------- */
.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.story-block { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px; align-items: start; }
.story-block p { color: var(--ink-soft); margin: 0 0 14px; }
.pullquote {
  font-weight: 800; font-size: 1.3rem; line-height: 1.35; color: var(--ink);
  border-left: 4px solid var(--amber); padding-left: 20px; margin: 24px 0;
}
.story-figure {
  background: var(--blue-ink);
  color: #fff; border-radius: var(--radius-lg); padding: 30px 26px;
  display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-md);
}
.story-figure .stat-num { color: var(--amber); }
.story-figure .stat-label { color: rgba(255,255,255,0.65); }
.story-figure .stat-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); box-shadow: none; }
.story-figure .stat-card .stat-num { color: #fff; }
.story-figure .stat-card .stat-label { color: rgba(255,255,255,0.6); }

/* ---------- history timeline (merged over-ons + documenten) ---------- */
.history-rail { position: relative; display: flex; flex-direction: column; gap: 34px; padding-left: 38px; margin: 8px 0 0; }
.history-rail::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--line-2) 0 6px, transparent 6px 14px);
}
.history-year {
  position: relative; display: flex; flex-direction: column; gap: 6px;
}
.history-year::before {
  content: ''; position: absolute; left: -38px; top: 3px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--blue); border: 3px solid var(--paper); z-index: 1;
}
.history-year.is-pivot::before { background: var(--amber); }
.history-year-tag {
  font-family: 'Quicksand', sans-serif; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--blue);
}
.history-year.is-pivot .history-year-tag { color: var(--amber-2); }
.history-year h3 { margin: 0; font-size: 1.08rem; font-weight: 800; }
.history-year p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; max-width: 640px; }

.clipping-card {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 28px 26px;
  box-shadow: var(--shadow-sm);
}
.clipping-kicker {
  font-family: 'Quicksand', sans-serif; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line-2);
  padding-bottom: 10px; margin-bottom: 14px;
}
.clipping-card h3 {
  font-weight: 800; font-size: 1.2rem; line-height: 1.3; margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.clipping-card p { color: var(--ink); font-size: 0.9rem; margin: 0 0 10px; }
.clipping-quote { font-style: italic; color: var(--ink-soft); border-left: 3px solid var(--blue); padding-left: 12px; margin: 14px 0; }
.clipping-byline { font-family: 'Quicksand', sans-serif; font-size: 0.68rem; color: var(--ink-faint); margin-top: 16px; }

.doc-note {
  background: var(--surface-3); border-radius: var(--radius); padding: 18px 20px;
  font-size: 0.85rem; color: var(--ink-soft); line-height: 1.55; border-left: 4px solid var(--blue);
}
.doc-note strong { color: var(--ink); }

/* ---------- contact: structured grid, primary card gets a torn stub ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.contact-card { display: flex; flex-direction: column; gap: 10px; }
.contact-card h3 { margin: 0; font-size: 1.02rem; font-weight: 800; }
.contact-card a, .contact-card p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; text-decoration: none; }
.contact-card a { font-weight: 800; color: var(--blue); }
.contact-card a:hover { text-decoration: underline; }
.contact-card.primary {
  grid-column: span 2; padding: 30px 32px; border-top: none;
  background: var(--blue); color: #fff; box-shadow: var(--shadow-md); border: none;
}
.contact-card.primary h3 { font-size: 1.15rem; }
.contact-card.primary p { color: rgba(255,255,255,0.82); }
.contact-card.primary a { color: #fff; font-size: 1rem; }

/* ---------- status pill ---------- */
.status-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(31,158,92,0.12); color: var(--ok); font-weight: 800; font-size: 0.8rem; padding: 7px 14px; border-radius: 999px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.status-pill.status-pill-alert { background: rgba(198,134,42,0.14); color: var(--warn); }
.status-pill.status-pill-alert .status-dot { background: var(--warn); }
.hero-badge.status-pill { background: var(--surface); border: 1.5px solid var(--line); color: var(--ok); }
.hero-badge.status-pill.status-pill-alert { color: var(--warn); }

/* ---------- steps: compact grid (homepage) ---------- */
.step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.step-card { display: flex; flex-direction: column; gap: 10px; }
.step-num {
  width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--blue); color: #fff; font-family: 'Quicksand', sans-serif;
  font-weight: 800; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; flex: none;
}
.step-card h3 { font-weight: 800; font-size: 1.02rem; margin: 0; }
.step-card p { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }
.step-card .btn { align-self: flex-start; margin-top: 4px; padding: 9px 16px; font-size: 0.82rem; }

/* ---------- steps: connected route (beginnen.html) — the dashed rail +
   stop-dot pattern, same DNA as the hero's hub-line ---------- */
.timeline-steps { display: flex; flex-direction: column; }
.timeline-step { display: flex; gap: 22px; position: relative; padding-bottom: 34px; }
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step::before {
  content: ''; position: absolute; left: 16px; top: 42px; bottom: 0; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--line-2) 0 6px, transparent 6px 14px);
}
.timeline-step:last-child::before { display: none; }
.timeline-step .step-num {
  width: 34px; height: 34px; font-size: 0.98rem; flex: none; z-index: 1;
}
.timeline-step-body { flex: 1; padding: 20px 22px; }
.timeline-step-body h3 { margin: 0 0 8px; font-weight: 800; font-size: 1.08rem; }
.timeline-step-body p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }
.timeline-step-body .btn { margin-top: 14px; padding: 10px 18px; font-size: 0.84rem; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 4px 20px; box-shadow: none; transition: border-color 0.2s ease; }
.faq-item[open] { border-color: var(--blue); }
.faq-item summary { cursor: pointer; font-weight: 800; padding: 17px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 1.1rem; color: #fff; flex: none; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; background: var(--blue); border-radius: 7px;
}
.faq-item[open] summary::after { content: '\2013'; background: var(--amber-2); }
.faq-item summary.icon-pop::after { animation: faqIconPop 0.35s ease; }
@keyframes faqIconPop { 0% { transform: scale(1) rotate(0deg); } 45% { transform: scale(0.55) rotate(90deg); } 100% { transform: scale(1) rotate(0deg); } }
.faq-item p { margin: 0 0 18px; color: var(--ink-soft); font-size: 0.92rem; }
.faq-item[open] p { animation: faqBodyIn 0.3s ease; }
@keyframes faqBodyIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .faq-item { transition: none; }
  .faq-item summary.icon-pop::after, .faq-item[open] p { animation: none; }
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--ink);
  color: #fff; border-radius: var(--radius-lg); padding: 42px 40px; border: none;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: repeating-linear-gradient(to right, var(--amber) 0 22px, transparent 22px 40px);
}
.cta-band h2 { margin: 0 0 6px; font-size: 1.45rem; font-weight: 800; }
.cta-band p { margin: 0; color: rgba(255,255,255,0.78); max-width: 420px; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,0.72); padding: 56px 0 26px; margin-top: 40px; position: relative; }
.site-footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: repeating-linear-gradient(to right, var(--blue-2) 0 18px, var(--amber) 18px 20px, transparent 20px 38px);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.88rem; max-width: 260px; margin-top: 12px; }
.footer-col h4 {
  font-family: 'Quicksand', sans-serif; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--amber); margin: 0 0 14px; font-weight: 800;
}
.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.72); text-decoration: none; font-size: 0.9rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.footer-disclaimer { margin: 22px 0 0; font-size: 0.76rem; line-height: 1.5; color: rgba(255,255,255,0.4); max-width: 720px; }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s cubic-bezier(.16,.84,.44,1), transform 0.6s cubic-bezier(.16,.84,.44,1); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- split-flap / departure-board numbers ---------- */
.flap {
  position: relative; display: inline-flex; align-items: baseline; gap: 2px;
  font-family: 'Quicksand', sans-serif; font-weight: 800; font-variant-numeric: tabular-nums;
  color: inherit;
}
.flap.flap-pop { animation: flapPop 0.5s cubic-bezier(.34,1.56,.64,1); }
@keyframes flapPop {
  0% { transform: scaleY(1); }
  40% { transform: scaleY(0.86); }
  100% { transform: scaleY(1); }
}

/* ---------- live/pulse badge ---------- */
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; display: inline-block;
  box-shadow: 0 0 0 0 rgba(255,185,46,0.6); animation: mockpulse 2s infinite;
}
@keyframes mockpulse {
  0% { box-shadow: 0 0 0 0 rgba(255,185,46,0.5); }
  70% { box-shadow: 0 0 0 10px rgba(255,185,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,185,46,0); }
}

/* ---------- why / value-prop strip ---------- */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.why-card { display: flex; flex-direction: column; gap: 10px; }
.why-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm); background: rgba(255,185,46,0.15); color: var(--amber-2);
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex: none;
}
.why-card h3 { font-weight: 800; font-size: 0.98rem; margin: 0; }
.why-card p { color: var(--ink-soft); font-size: 0.87rem; margin: 0; }

/* ---------- driver reviews — a torn ticket stub ---------- */
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.review-card { display: flex; flex-direction: column; gap: 0; border-top-color: var(--amber-2); padding: 0; overflow: visible; }
.review-stars { display: flex; gap: 2px; padding: 22px 22px 12px; }
.review-star { color: var(--line-2); font-size: 1.02rem; line-height: 1; }
.review-star.filled { color: var(--amber-2); }
.review-text { margin: 0; color: var(--ink); font-size: 0.95rem; line-height: 1.55; padding: 0 22px 20px; }
.review-person {
  display: flex; align-items: center; gap: 10px; padding: 16px 22px; position: relative;
  border-top: 2px dashed var(--line-2);
}
.review-person::before, .review-person::after {
  content: ''; position: absolute; top: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper); box-shadow: 0 0 0 1px var(--line);
}
section.block.alt .review-person::before, section.block.alt .review-person::after,
section.block.lime .review-person::before, section.block.lime .review-person::after {
  background: var(--surface-2);
}
.review-person::before { left: -8px; }
.review-person::after { right: -8px; }
.review-avatar {
  width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--blue);
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.84rem; flex: none;
  font-family: 'Quicksand', sans-serif;
}
.review-name { font-weight: 800; font-size: 0.87rem; color: var(--ink); }
.review-role { font-size: 0.79rem; color: var(--ink-soft); }
.review-empty {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  background: var(--surface); border: 1.5px dashed var(--line-2); border-radius: var(--radius); padding: 30px;
}
.review-empty h3 { margin: 0; font-size: 1.06rem; font-weight: 800; }
.review-empty p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; max-width: 480px; }

/* ---------- LED bestemmingsbord — a real bus front sign, staff-editable
   from Kompas (netlify/functions/led-bord-public.js); see initLedBoard()
   in app.js. Falls back to a friendly default message client-side. ---------- */
@keyframes led-marquee { 0% { transform: translateX(8%); } 100% { transform: translateX(-108%); } }
.led-section { background: #12141A; }
.led-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.led-caption { flex: none; display: flex; flex-direction: column; gap: 6px; max-width: 260px; }
.led-caption .section-eyebrow { margin: 0; align-self: flex-start; }
.led-caption p { margin: 0; color: rgba(255,255,255,0.55); font-size: 0.86rem; font-weight: 600; line-height: 1.5; }
.led-board {
  flex: 1; min-width: 280px; display: flex; gap: 10px; background: #0B0C10; border-radius: var(--radius);
  padding: 16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), var(--shadow-lg);
}
.led-route {
  flex: none; width: 74px; background: #1B1D24; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 1.5rem; color: var(--amber);
  text-shadow: 0 0 10px rgba(255,185,46,0.55); font-variant-numeric: tabular-nums;
}
.led-panel {
  flex: 1; background: #1B1D24; border-radius: 8px; overflow: hidden; position: relative;
  display: flex; align-items: center; min-height: 56px; padding: 0 6px;
}
.led-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: radial-gradient(rgba(0,0,0,0.55) 1px, transparent 1.4px); background-size: 4px 4px;
}
.led-text {
  /* Sits still by default — a real destination sign only scrolls once the
     route name is too long for the box. app.js's updateLedMotion() measures
     the rendered text against the panel and only then adds .scrolling. */
  white-space: nowrap; font-weight: 800; font-size: 1.28rem; letter-spacing: 0.05em; color: var(--amber);
  text-shadow: 0 0 8px rgba(255,185,46,0.6);
}
.led-text.scrolling { animation: led-marquee 14s linear infinite; }
/* text that's too long to fit AND motion is reduced: wrap it instead of
   either clipping it or moving it */
.led-text.wrap-fallback { white-space: normal; }
.led-text:empty::before { content: '\00a0'; }
@media (prefers-reduced-motion: reduce) {
  .led-text.scrolling { animation: none; white-space: normal; }
}
@media (max-width: 720px) {
  .led-wrap { flex-direction: column; align-items: stretch; }
  .led-caption { max-width: none; }
  .led-route { width: 58px; font-size: 1.2rem; }
  .led-text { font-size: 1.05rem; }
}

/* ---------- Discord CTA ---------- */
.discord-band {
  background: #5865F2; border-radius: var(--radius-lg); padding: 42px 40px; border: none;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; color: #fff;
  position: relative; overflow: hidden;
}
.discord-band-icon { width: 48px; height: 48px; flex: none; }
.discord-band h2 { font-weight: 800; margin: 10px 0 6px; font-size: 1.45rem; }
.discord-band p { margin: 0; color: rgba(255,255,255,0.85); max-width: 460px; }
.btn-discord {
  background: #fff; color: #5865F2; display: inline-flex; align-items: center; gap: 8px; border-color: #fff;
}
.btn-discord[aria-disabled="true"] {
  background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.75); cursor: default; pointer-events: none; box-shadow: none; border-color: transparent;
}
.discord-soon-badge {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.16); color: #fff;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 11px;
  border-radius: 6px; margin-bottom: 14px; font-family: 'Quicksand', sans-serif;
}

/* ---------- button ripple + press feedback ---------- */
.btn-ripple-wrap { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.btn-ripple {
  position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 50%;
  background: rgba(255,255,255,0.5); opacity: 0.8; pointer-events: none;
  animation: btnRippleAnim 0.6s ease-out forwards;
}
@keyframes btnRippleAnim {
  from { width: 0; height: 0; margin-top: 0; margin-left: 0; opacity: 0.7; }
  to {
    width: var(--ripple-size, 260px); height: var(--ripple-size, 260px);
    margin-top: calc(var(--ripple-size, 260px) / -2); margin-left: calc(var(--ripple-size, 260px) / -2);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) { .btn-ripple { display: none; } }

/* ---------- ambient hub line marker (hero) ---------- */
.hub-line-marker-glow { fill: rgba(255,185,46,0.3); }
.hub-line-marker-dot { fill: var(--amber); }

/* ---------- hub map cursor tilt ---------- */
.hub-panel-card.tilt-reset { transition: transform 0.4s cubic-bezier(.16,.84,.44,1), box-shadow 0.4s ease; }

/* ---------- toast ---------- */
.toast-host {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px); z-index: 70;
  background: var(--ink); color: #fff; font-family: 'Quicksand', sans-serif; font-weight: 800; font-size: 0.85rem;
  padding: 12px 22px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: calc(100vw - 32px); text-align: center;
}
.toast-host.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .toast-host { transition: opacity 0.15s ease; transform: translateX(-50%) !important; } }

/* ---------- back to top ---------- */
.back-to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--blue); border: 1.5px solid var(--line); cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(14px) scale(0.9); pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.15s ease;
}
.back-to-top.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-to-top:hover { transform: translateY(-3px) scale(1); box-shadow: var(--shadow-lg); }
.back-to-top:active { transform: translateY(0) scale(0.94); }
.back-to-top svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity 0.15s ease; } }
@media (max-width: 720px) { .back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; } }

/* ---------- privacy notice: a small transparency bar shown once per
   device — not a consent gate, since this site sets no tracking cookies
   to begin with (see juridisch.html for the full explanation). ---------- */
.privacy-notice {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--blue-ink); color: #fff; font-family: 'Quicksand', sans-serif;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px;
  padding: 16px 22px; box-shadow: 0 -6px 20px rgba(0,0,0,0.18);
  transform: translateY(100%); opacity: 0; transition: transform 0.35s cubic-bezier(.16,.84,.44,1), opacity 0.35s ease;
}
.privacy-notice.show { transform: translateY(0); opacity: 1; }
.privacy-notice-text { margin: 0; font-size: 0.82rem; color: rgba(255,255,255,0.85); max-width: 640px; flex: 1 1 320px; }
.privacy-notice-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.privacy-notice-link { color: var(--amber); font-weight: 800; font-size: 0.82rem; text-decoration: underline; text-underline-offset: 2px; }
.privacy-notice-dismiss {
  background: #fff; color: var(--blue-ink); font-family: 'Quicksand', sans-serif; font-weight: 800; font-size: 0.8rem;
  border: none; border-radius: var(--radius-sm); padding: 9px 16px; cursor: pointer; white-space: nowrap;
}
.privacy-notice-dismiss:hover { background: var(--amber); }
@media (prefers-reduced-motion: reduce) { .privacy-notice { transition: opacity 0.15s ease; transform: translateY(0) !important; } }
@media (max-width: 720px) {
  .privacy-notice { justify-content: flex-start; padding: 14px 16px; }
  .privacy-notice-actions { width: 100%; justify-content: space-between; }
}
body.privacy-notice-open .toast-host { bottom: 96px; }
body.privacy-notice-open .back-to-top { bottom: 96px; }

/* ---------- copy-to-clipboard button (contact page) ---------- */
.contact-email-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.copy-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none;
  border-radius: var(--radius-sm); background: var(--surface-2); color: var(--blue); border: none;
  cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.copy-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-xs); }
.copy-btn:active { transform: translateY(0); }
.copy-btn svg { width: 15px; height: 15px; }
.copy-btn.done { background: var(--amber); color: var(--ink); animation: copyPulse 0.4s ease; }
@keyframes copyPulse { 0% { transform: scale(1); } 45% { transform: scale(1.2); } 100% { transform: scale(1); } }
.contact-card.primary .copy-btn { background: rgba(255,255,255,0.16); color: #fff; }
.contact-card.primary .copy-btn:hover { background: rgba(255,255,255,0.26); }
@media (prefers-reduced-motion: reduce) { .copy-btn.done { animation: none; } }

/* ---------- brand guide (juridisch.html) ---------- */
.brand-logo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.brand-logo-card {
  border-radius: var(--radius); padding: 46px 32px; display: flex; align-items: center; justify-content: center;
}
.brand-logo-card.light { background: var(--surface); border: 1.5px solid var(--line); }
.brand-logo-card.dark { background: var(--blue-ink); }
.brand-logo-card .brand-word { font-size: 2.1rem; }
.brand-logo-card.dark .brand-word { color: #fff; }

.brand-dos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 44px; }
.brand-do-card, .brand-dont-card {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
  border-top: 4px solid var(--ok);
}
.brand-dont-card { border-top-color: var(--danger); }
.brand-do-card h4, .brand-dont-card h4 { margin: 0 0 6px; font-size: 0.94rem; display: flex; align-items: center; gap: 8px; font-weight: 800; }
.brand-do-card h4::before { content: '\2713'; color: var(--ok); font-weight: 800; }
.brand-dont-card h4::before { content: '\2715'; color: var(--danger); font-weight: 800; }
.brand-do-card p, .brand-dont-card p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin-bottom: 44px; }
.swatch-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-xs); }
.swatch-color { height: 78px; }
.swatch-meta { padding: 14px 16px; }
.swatch-name { font-weight: 800; font-size: 0.9rem; margin: 0 0 2px; }
.swatch-hex { font-size: 0.8rem; color: var(--ink-faint); margin: 0; font-variant-numeric: tabular-nums; }

.type-specimen { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow-xs); margin-bottom: 44px; }
.type-specimen-row { padding: 18px 0; border-bottom: 1px dashed var(--line-2); }
.type-specimen-row:first-child { padding-top: 0; }
.type-specimen-row:last-child { border-bottom: none; padding-bottom: 0; }
.type-specimen-label { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 8px; }
.type-specimen-sample.heading { font-weight: 800; font-size: 2rem; margin: 0; letter-spacing: -0.03em; }
.type-specimen-sample.body { font-weight: 500; font-size: 1.03rem; margin: 0; color: var(--ink-soft); max-width: 640px; }

.voice-card {
  background: var(--surface-3); border-radius: var(--radius); padding: 28px 30px; box-shadow: none; border-left: 4px solid var(--blue);
}
.voice-card p { margin: 0; color: var(--ink-soft); font-size: 1.01rem; max-width: 680px; }

/* ---------- responsive ---------- */

/* ---------- desktop nav: a route rail instead of a top bar ----------
   The header becomes a fixed vertical line down the left edge of the
   screen — every page a "stop" on it, exactly like the dashed rail used
   elsewhere on the site (the hub map, the history timeline). Below this
   width the header stays the original sticky top bar with its hamburger
   drawer, unchanged. Same #mainNav / .main-nav a / .lang-switch markup on
   every page — app.js's toggleNav()/highlightActiveNav() need no changes. */
@media (min-width: 901px) {
  body { padding-left: 108px; }
  .site-header {
    position: fixed; top: 0; left: 0; bottom: 0; width: 108px; height: 100vh;
    border-bottom: none; border-right: 1.5px solid var(--line);
    display: flex; z-index: 40;
    /* lifts the rail a little off the page, like a raised physical panel
       rather than a flat strip of CSS */
    box-shadow: 10px 0 28px -20px rgba(15,23,42,0.35);
  }
  .site-header .wrap {
    flex-direction: column; align-items: center; justify-content: flex-start;
    width: 100%; max-width: none; height: 100%; padding: 26px 10px 20px; gap: 0;
  }
  .site-header .brand { margin-bottom: 30px; }
  .site-header .brand-word { font-size: 1.05rem; }
  .main-nav {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: space-evenly; position: relative; width: 100%; padding: 10px 0; gap: 0;
  }
  .main-nav::before {
    content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 0;
    border-left: 2px dashed var(--line-2); transform: translateX(-50%); z-index: 0;
    /* a thin bright hairline right next to the dashes reads as a carved
       groove rather than a flat drawn line */
    box-shadow: 1px 0 0 rgba(255,255,255,0.7);
  }
  .main-nav a {
    position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
    gap: 7px; width: 100%; padding: 6px 4px; margin: 0; text-align: center;
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.25;
  }
  .main-nav a::before {
    content: ''; width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box;
    background: radial-gradient(circle at 34% 28%, #fff, var(--surface) 65%);
    border: 2.5px solid var(--blue-2);
    box-shadow: 0 1px 2px rgba(15,23,42,0.18), inset 0 1px 1px rgba(255,255,255,0.9);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s cubic-bezier(.34,1.56,.64,1);
  }
  .main-nav a::after { display: none; }
  .main-nav a:hover::before { border-color: var(--blue); transform: scale(1.16); }
  .main-nav a.active { color: var(--blue); }
  .main-nav a.active::before {
    background: radial-gradient(circle at 34% 28%, #FFE3A3, var(--amber) 70%);
    border-color: var(--amber-2);
    box-shadow: 0 2px 5px rgba(196,130,0,0.35), 0 0 0 4px rgba(255,185,46,0.22), inset 0 1px 1px rgba(255,255,255,0.85);
  }
  .lang-switch { flex-direction: column; margin-top: 20px; gap: 3px; padding: 4px; }
  .lang-btn { padding: 6px 9px; }
  .toast-host { left: calc(50% + 54px); }

  /* ---------- rail puck — the "bus" riding the line between stops ----------
     A real DOM element (not a pseudo-element, since it has to move between
     sibling nav links) that app.js's initRailPuck() slides up and down via
     its inline `top`. It rests exactly on the active stop's dot; on load it
     rides in from whichever stop you were on before you clicked (remembered
     across the page reload via sessionStorage), so navigating the rail
     reads as "traveling from halte to halte" rather than an instant jump. */
  .rail-puck {
    position: absolute; left: 50%; top: 0; width: 19px; height: 19px; border-radius: 50%;
    transform: translate(-50%, -50%); z-index: 2; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at 32% 26%, #fff6e0, var(--amber) 55%, var(--amber-2) 100%);
    box-shadow: 0 3px 10px rgba(196,130,0,0.45), 0 0 0 5px rgba(255,185,46,0.16), inset 0 1px 2px rgba(255,255,255,0.85);
    transition: top 0.7s cubic-bezier(.16,.84,.44,1), opacity 0.3s ease, transform 0.3s cubic-bezier(.34,1.56,.64,1);
  }
  .rail-puck.ready { opacity: 1; }
  .rail-puck.riding { transform: translate(-50%, -50%) scale(1.22); box-shadow: 0 5px 16px rgba(196,130,0,0.55), 0 0 0 7px rgba(255,185,46,0.24), inset 0 1px 2px rgba(255,255,255,0.85); }
  @media (prefers-reduced-motion: reduce) {
    .rail-puck { transition: opacity 0.2s ease; }
  }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-copy { max-width: none; }
  .hub-map-wrap { max-width: 420px; }
}
@media (max-width: 900px) {
  .story-block { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .step-grid { grid-template-columns: 1fr; }
  .brand-logo-grid { grid-template-columns: 1fr; }
  .brand-dos-grid { grid-template-columns: 1fr; }
}
/* the hamburger drawer covers everything below the rail-nav breakpoint
   (901px) so there's no gap in between where the top bar has to cram six
   nav links + the lang switch into one row (that used to wrap "Aan de
   slag" onto three lines and clip "FR" off the edge around 720-900px). */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); flex-direction: column;
    align-items: stretch; padding: 10px 16px 18px; gap: 2px; box-shadow: var(--shadow-md); border-bottom: 1.5px solid var(--line);
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 12px 14px; margin: 0; }
  .main-nav a::after { display: none; }
  .lang-btn { padding: 5px 7px; font-size: 0.66rem; }
}
@media (max-width: 720px) {
  .discord-band { padding: 32px 24px; flex-direction: column; align-items: flex-start; text-align: left; }
  .hero { padding: 44px 0 50px; }
  .hub-panel-card { padding: 26px 20px 30px; }
  .hub-stats { gap: 22px; }
  .hub-map-wrap { max-width: 320px; }
  .hub-map-wrap.wide { max-width: 100%; aspect-ratio: 4 / 3; }
  .hub-station-label { max-width: 64px; font-size: 0.6rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .cta-band { flex-direction: column; align-items: flex-start; text-align: left; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-card.primary { grid-column: span 1; }
  .timeline-step { gap: 14px; }
  .timeline-step-body { padding: 16px 18px; }
  .history-rail { padding-left: 30px; }
  .history-year::before { left: -30px; }
  .announce-list:has(.announce-item) { padding-left: 26px; }
  .announce-item::before { left: -26px; }
}