/* ============================================================
   TOKENS — gespiegeld uit docs/design.md
   ============================================================ */
:root {
  --color-primary:          #005FAA;
  --color-primary-hover:    #004C87;
  --color-on-primary:       #FFFFFF;
  --color-primary-light:    #8AC2EB;
  --color-accent:           #F07C10;
  --color-accent-hover:     #FF8C24;
  --color-on-accent:        #0A2A47;
  --color-surface:          #FFFFFF;
  --color-surface-subtle:   #F4F8FC;
  --color-surface-tint:     #DCEEFA;
  --color-surface-inverse:  #0A2A47;
  --color-on-surface:       #0E1B2A;
  --color-on-surface-muted: #5A6B7D;
  --color-on-inverse:       #FFFFFF;
  --color-on-inverse-muted: #A9C2D8;
  --color-border:           #DCE4EC;
  --color-border-inverse:   #1D4266;
  --color-success:          #1F9D63;
  --color-error:            #B02E24;

  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --rounded-sm: 6px;  --rounded-md: 10px;  --rounded-lg: 14px;  --rounded-full: 999px;

  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;  --space-5: 24px;
  --space-6: 32px; --space-7: 48px;  --space-8: 64px;  --space-9: 96px;  --space-10: 128px;

  --elev-raised: 0 2px 8px rgba(14, 27, 42, 0.06);
  --elev-lifted: 0 12px 32px rgba(14, 27, 42, 0.10);

  --container: 1200px;
  --section-y: var(--space-9);

  color-scheme: light;
}

/* ============================================================
   BASIS + BROWSER-OPPERVLAKKEN
   De onderdelen die de browser zelf tekent horen ook bij het ontwerp.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--color-primary-light) var(--color-surface-subtle); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  caret-color: var(--color-primary);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--color-surface-tint); color: var(--color-on-surface); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--color-surface-subtle); }
::-webkit-scrollbar-thumb { background: var(--color-primary-light); border-radius: var(--rounded-full); border: 3px solid var(--color-surface-subtle); }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--rounded-sm); }
.inverse :focus-visible, .site-footer :focus-visible, .topbar :focus-visible { outline-color: var(--color-primary-light); }

img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; text-wrap: balance; font-weight: 600; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--color-primary); color: var(--color-on-primary);
  padding: var(--space-3) var(--space-5); border-radius: var(--rounded-full);
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--space-4); }

.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.icon { width: 20px; height: 20px; flex: none; }

/* ============================================================
   TYPOGRAFIE-SCHAAL
   ============================================================ */
.t-display {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -0.025em;
}
.t-h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
.t-h3 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
.t-h4 { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.t-lead { font-size: 18px; line-height: 1.6; max-width: 60ch; }
.t-body { font-size: 16px; line-height: 1.65; max-width: 68ch; }
.t-sm { font-size: 14px; line-height: 1.6; }
.t-caption { font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; }
.muted { color: var(--color-on-surface-muted); }
.inverse .muted, .site-footer .muted { color: var(--color-on-inverse-muted); }

/* ============================================================
   KNOPPEN, BADGES
   ============================================================ */
.btn {
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  line-height: 1; letter-spacing: -0.005em;
  min-height: 52px; padding: 0 var(--space-5);
  border: 0; border-radius: var(--rounded-full);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); }
/* V2: oranje knop is een omlijnde knop. Tekst in donkerblauw, want oranje
   tekst op wit haalt maar 2,8:1. Bij aanwijzen vult hij zich. */
.btn--accent { background: var(--color-surface); color: var(--color-on-accent); box-shadow: inset 0 0 0 2px var(--color-accent); }
.btn--accent:hover { background: var(--color-accent); color: var(--color-on-accent); }
.btn--ghost { background: var(--color-surface); color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-border); }
.btn--ghost:hover { background: var(--color-surface-subtle); }
.btn--onDark { background: transparent; color: var(--color-on-inverse); box-shadow: inset 0 0 0 1px var(--color-border-inverse); }
.btn--onDark:hover { background: rgba(255,255,255,.08); }
.btn--sm { min-height: 44px; padding: 0 var(--space-4); font-size: 14px; }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 30px; padding: 0 var(--space-3);
  border-radius: var(--rounded-full);
  background: var(--color-surface-tint); color: var(--color-primary);
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
}
.inverse .badge { background: var(--color-border-inverse); color: var(--color-on-inverse); }

/* ============================================================
   TOPBAR + NAVIGATIE
   ============================================================ */
.topbar {
  background: var(--color-surface-inverse); color: var(--color-on-inverse-muted);
  font-size: 14px;
}
.topbar .wrap { padding-block: var(--space-3); display: flex; align-items: center; gap: var(--space-2) var(--space-5); flex-wrap: wrap; }
.topbar a { color: var(--color-on-inverse-muted); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.topbar a:hover { color: var(--color-on-inverse); text-decoration: underline; }
.topbar .spacer { margin-left: auto; }
.topbar .icon { width: 16px; height: 16px; color: var(--color-primary-light); }
.topbar-region { display: inline-flex; align-items: center; gap: var(--space-2); }
.topbar .social { margin-left: var(--space-2); }

.site-nav { position: sticky; top: 0; z-index: 40; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.site-nav.is-stuck { box-shadow: var(--elev-raised); }
.site-nav .wrap { min-height: 76px; display: flex; align-items: center; gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; }
.brand svg { width: 160px; height: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: var(--space-1); }
/* :not(.btn) — anders wint deze regel van .btn--accent en krijgt de
   hoofdknop grijze tekst op oranje (2,0:1). */
.nav-links a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-3);
  border-radius: var(--rounded-full); text-decoration: none;
  color: var(--color-on-surface-muted); font-size: 14px; font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.nav-links a:not(.btn):hover { color: var(--color-on-surface); background: var(--color-surface-subtle); }
.nav-links a:not(.btn)[aria-current="page"] { background: var(--color-surface-tint); color: var(--color-primary); }
.nav-cta { margin-left: var(--space-3); }
.nav-toggle { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: var(--space-7) 0 var(--space-8); }
/* 1.3/0.7 — de kop moet "dezelfde mensen." op één regel houden op 88px,
   en het smallere beeld houdt de routelijn binnen het eerste scherm. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: var(--space-8); align-items: center; }
.hero h1 { margin-bottom: var(--space-5); }
.hero .t-lead { margin-bottom: var(--space-7); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero-trust { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }

/* De aanloop van de rondgang. Staat boven de sectiekop en springt even
   ver in als de haltes, zodat de lijn van de stip onafgebroken doorloopt
   tot de laatste halte. Daarom is deze kop ingesprongen en de andere niet:
   deze sectie IS de route. */
.route-lead { position: relative; padding-left: 96px; margin-bottom: var(--space-8); }
#diensten { padding-top: var(--space-7); }
.route-lead::before {
  content: ""; position: absolute; left: 23px; top: 48px;
  bottom: calc(var(--space-8) * -1); width: 2px; background: var(--color-border);
}
.route-lead-dot {
  position: absolute; left: 0; top: 0;
  width: 48px; height: 48px; border-radius: var(--rounded-full);
  background: var(--color-surface); box-shadow: inset 0 0 0 2px var(--color-primary-light);
  display: grid; place-items: center; color: var(--color-primary);
}
.route-lead-intro { min-height: 48px; display: flex; align-items: center; margin-bottom: var(--space-7); }
.route-lead h2 { margin-bottom: var(--space-3); }

/* ============================================================
   BEELDPLAATSHOUDER — bewust als plaatshouder herkenbaar
   ============================================================ */
.photo {
  background: var(--color-surface-tint);
  border-radius: var(--rounded-lg);
  box-shadow: inset 0 0 0 1px var(--color-border);
  display: grid; place-content: center; justify-items: center; gap: var(--space-3);
  padding: var(--space-5); text-align: center;
  color: var(--color-primary);
}
.photo svg { width: 32px; height: 32px; }
.photo span { font-size: 13px; font-weight: 500; line-height: 1.4; max-width: 24ch; }
.photo--portrait { aspect-ratio: 4 / 5; }
.photo--wide { aspect-ratio: 16 / 10; }
.photo--square { aspect-ratio: 1 / 1; }

/* ============================================================
   SECTIES
   ============================================================ */
.section { padding: var(--section-y) 0; }
.section--subtle { background: var(--color-surface-subtle); }
.section--inverse { background: var(--color-surface-inverse); color: var(--color-on-inverse); }
.section-head { max-width: 62ch; margin-bottom: var(--space-8); }
/* Meer lucht bóven een kop dan eronder. */
.section-head .badge { margin-bottom: var(--space-4); }
.section-head h2 { margin-bottom: var(--space-3); }


/* ============================================================
   DE RONDGANG — de signature van deze pagina
   ============================================================ */
.route { position: relative; }
.route-rail { position: absolute; left: 23px; top: 0; bottom: 0; width: 2px; background: var(--color-border); }
/* De vulling volgt de scrollpositie per frame; een transition zou daar
   alleen maar overheen lopen. Geen animatie van layout-eigenschappen. */
.route-rail::after {
  content: ""; position: absolute; inset: 0 0 auto 0; width: 2px;
  height: var(--route-progress, 0%); background: var(--color-primary);
}
.stop { position: relative; padding-left: 96px; padding-bottom: var(--space-9); }
.stop:last-child { padding-bottom: 0; }
.stop-marker {
  position: absolute; left: 0; top: 0; width: 48px; height: 48px;
  border-radius: var(--rounded-full); background: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--color-border);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--color-on-surface-muted);
  transition: box-shadow .25s ease, color .25s ease, background-color .25s ease;
}
.stop.is-active .stop-marker { background: var(--color-primary); box-shadow: inset 0 0 0 2px var(--color-primary); color: var(--color-on-primary); }
.stop-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: var(--space-7); align-items: start; }
.stop h3 { margin-bottom: var(--space-4); }
.stop .t-body { margin-bottom: var(--space-5); }
.tasks { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tasks li {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  background: var(--color-surface-subtle); border-radius: var(--rounded-full);
  font-size: 14px;
}
.tasks .icon { width: 16px; height: 16px; color: var(--color-primary); }

.quote-inline {
  margin-top: var(--space-6); padding: var(--space-6);
  background: var(--color-surface-tint); border-radius: var(--rounded-lg);
}
.quote-inline blockquote { margin: 0 0 var(--space-4); font-size: 18px; line-height: 1.55; }
.quote-inline figcaption { font-size: 14px; color: var(--color-primary); font-weight: 500; }

/* Extra werk buiten de route */
.extra { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.extra li { padding: var(--space-5) 0; border-top: 2px solid var(--color-on-surface); }
.extra b { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--space-2); }

/* ============================================================
   OVER ONS
   ============================================================ */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.facts { margin-top: var(--space-6); border-top: 1px solid var(--color-border); }
.facts div { display: flex; gap: var(--space-5); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-size: 15px; }
.facts dt { color: var(--color-on-surface-muted); min-width: 150px; }
.facts dd { margin: 0; font-weight: 500; }

/* ============================================================
   VEILIGHEID & MILIEU (donker)
   ============================================================ */
.cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
.checks li { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-border-inverse); }
.checks li:first-child { border-top: 0; }
.checks .icon { width: 20px; height: 20px; color: var(--color-primary-light); margin-top: 3px; }

/* ============================================================
   REFERENTIES
   ============================================================ */
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.quote {
  padding: var(--space-6); border-radius: var(--rounded-lg);
  box-shadow: inset 0 0 0 1px var(--color-border);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.quote blockquote { margin: 0; font-size: 18px; line-height: 1.55; }
.quote figcaption { margin-top: auto; }
.quote .who { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.quote-mark { width: 28px; height: 28px; color: var(--color-primary-light); }
/* Klantlogo's.
   Eén vaste hoogte voor alle vier zou er rommelig uitzien: een logo van
   2,78:1 oogt op dezelfde hoogte bijna drie keer zo groot als een vierkant.
   Daarom krijgt elk logo een eigen maximumhoogte, afgestemd op zijn
   verhouding, zodat ze optisch even zwaar wegen. De slot eromheen heeft
   een vaste hoogte, zodat de quotes in alle vier de kaarten op dezelfde
   lijn beginnen.
   Volle kleur, geen grijsfilter: drie van de vier logo's zijn zelf blauw
   en passen daarmee in de pagina. Grijs maken is een logo-wall-conventie
   en hoort niet bij losse referentiekaarten. */
.quote-logo-slot { height: 46px; display: flex; align-items: center; }
.quote-logo { width: auto; height: auto; max-width: 175px; object-fit: contain; }
.quote-logo--wide   { max-height: 27px; }  /* Dent2Dent — 2,78:1 */
.quote-logo--oval   { max-height: 35px; }  /* Tamoil — 1,59:1 */
.quote-logo--square { max-height: 44px; }  /* Franklin Offshore — 1:1 */
.quote-logo--dense  { max-height: 40px; }  /* Broeke — 1:1; 40px is exact de helft van de 80px-bron, dus scherp */

/* ============================================================
   SOCIAL- EN CONTACTKNOPPEN
   Eén component, twee omgevingen: donkere topbalk en donkere footer.
   ============================================================ */
.social { display: flex; align-items: center; gap: var(--space-2); }
.social a {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--rounded-full);
  color: var(--color-on-inverse); background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-border-inverse);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.social a:hover { background: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); color: var(--color-on-primary); }
.social a svg { width: 17px; height: 17px; }
.social--lg a { width: 48px; height: 48px; }
.social--lg a svg { width: 22px; height: 22px; }
/* Op een lichte ondergrond (wit paneel) zijn de standaard witte iconen
   onzichtbaar; deze variant zet ze in merkblauw met een grijze rand. */
.social--light a { color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-border); }
.social--light a:hover { background: var(--color-primary); color: var(--color-on-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.social--light a[aria-disabled="true"] { opacity: .45; }

/* Nog geen URL bekend: zichtbaar, maar niet klikbaar en niet in de tabvolgorde. */
.social a[aria-disabled="true"] { opacity: .38; pointer-events: none; }

/* De laatste halte van de rondgang — hier eindigt de route én de pagina. */
.stop--end .stop-marker { background: var(--color-primary); box-shadow: inset 0 0 0 2px var(--color-primary); color: var(--color-on-primary); }
.stop--end .stop-marker svg { width: 22px; height: 22px; }
.route-end {
  background: var(--color-surface-tint); border-radius: var(--rounded-lg);
  padding: var(--space-7);
}
.route-end h3 { margin-bottom: var(--space-4); }
.route-end .t-body { margin-bottom: var(--space-6); }
.route-end-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--color-surface-inverse); color: var(--color-on-inverse-muted); padding: var(--space-9) 0 var(--space-7); font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-7); }
.site-footer h3 { font-family: var(--font-display); color: var(--color-on-inverse); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--space-4); }
.site-footer a { color: var(--color-on-inverse-muted); text-decoration: none; }
.site-footer a:hover { color: var(--color-on-inverse); text-decoration: underline; }
.site-footer li { padding: var(--space-1) 0; }
.site-footer .brand svg { width: 150px; }
.footer-bottom { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--color-border-inverse); display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer-bottom .spacer { margin-left: auto; }

/* Kaart op de contactpagina: zelfde vorm en radius als een beeldvlak,
   met daaronder een knop die het adres in Google Maps zelf opent. */
.map { display: flex; flex-direction: column; gap: var(--space-4); }
.map iframe {
  width: 100%; aspect-ratio: 1 / 1; border: 0; display: block;
  border-radius: var(--rounded-lg); box-shadow: inset 0 0 0 1px var(--color-border);
  background: var(--color-surface-tint);
}
.map-open { align-self: flex-start; }

/* ============================================================
   SUBPAGINA'S
   ============================================================ */
/* Kop van een subpagina: dezelfde taal als de hero, compacter en zonder
   beeld, zodat de inhoud meteen begint. */
.pagehead { padding: var(--space-8) 0; background: var(--color-surface-subtle); border-bottom: 1px solid var(--color-border); }
.pagehead h1 { margin-bottom: var(--space-4); max-width: 20ch; }
.pagehead .t-lead { margin-bottom: 0; }
.pagehead .t-lead + .hero-actions { margin-top: var(--space-6); }

.crumbs { font-size: 14px; color: var(--color-on-surface-muted); margin-bottom: var(--space-5); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { padding: 0 var(--space-2); }

/* Gestapelde inhoudsblokken met een streep erboven. Geen kaartjes:
   die maken van elk onderwerp een even groot doosje. */
.blocks > * { padding: var(--space-7) 0; border-top: 1px solid var(--color-border); }
.blocks > *:first-child { border-top: 0; padding-top: 0; }
.blocks > *:last-child { padding-bottom: 0; }
.blocks h2, .blocks h3 { margin-bottom: var(--space-4); }
.blocks p + .tasks, .blocks p + ul { margin-top: var(--space-5); }
.block-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: var(--space-7); align-items: start; }
.block-more { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); font-weight: 600; text-decoration: none; }
.block-more:hover { text-decoration: underline; }
.block-more svg { width: 18px; height: 18px; }

/* ============================================================
   RESPONSIEF
   ============================================================ */
@media (max-width: 1100px) {
  .nav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-surface); border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-5) var(--space-5);
    box-shadow: var(--elev-lifted);
  }
  .nav-links[hidden] { display: none; }
  /* :not(.btn) — anders wordt de oranje knop hier een rechthoek van 10px. */
  .nav-links a:not(.btn) { min-height: 48px; border-radius: var(--rounded-md); }
  .nav-links a.btn { margin-left: 0; margin-top: var(--space-3); width: 100%; }
  .site-nav .wrap { position: relative; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 44px; padding: 0 var(--space-4);
    background: var(--color-surface); color: var(--color-on-surface);
    border: 1px solid var(--color-border); border-radius: var(--rounded-full);
    font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer;
  }
}
@media (max-width: 900px) {
  :root { --section-y: var(--space-8); }
  .hero-grid, .split, .stop-grid, .cols-2, .block-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero { padding-top: var(--space-7); }
  .quotes, .extra { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-grid .photo--portrait { aspect-ratio: 16 / 11; }
}
@media (max-width: 620px) {
  :root { --section-y: var(--space-7); }
  .stop, .route-lead { padding-left: 64px; }
  .route-rail, .route-lead::before { left: 17px; }
  .route-lead::before { top: 36px; }
  .stop-marker { width: 36px; height: 36px; font-size: 13px; }
  .route-lead-dot { width: 36px; height: 36px; }
  .route-lead-dot svg { width: 18px; height: 18px; }
  .route-lead-intro { min-height: 36px; margin-bottom: var(--space-6); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero-actions .btn, .route-end-actions .btn { width: 100%; }
  .route-end { padding: var(--space-5); }
  .topbar .spacer { margin-left: 0; }
}

/* ============================================================
   V2 - ONDERDELEN UIT DE BLUEPRINT VAN WILVER
   ============================================================ */
/* Hero-banner: volle breedte, donker, korte krachtige boodschap. */
.hero-banner { background: var(--color-surface-inverse); color: var(--color-on-inverse); padding: var(--space-9) 0; }
.hero-banner .t-display { color: var(--color-on-inverse); }
.hero-banner .t-lead { color: var(--color-on-inverse-muted); }
.hero-banner .btn--ghost { background: transparent; color: var(--color-on-inverse); box-shadow: inset 0 0 0 1px var(--color-border-inverse); }
.hero-banner .btn--ghost:hover { background: rgba(255,255,255,.08); }
.hero-banner .photo { background: var(--color-border-inverse); box-shadow: none; color: var(--color-on-inverse-muted); }

.inverse .photo { background: var(--color-border-inverse); box-shadow: none; color: var(--color-on-inverse-muted); }
.hero--light { padding: var(--space-9) 0; }

/* Icoonkaarten (USP's, waarden): drie naast elkaar, zoals in de blueprint. */
.icards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.icard { background: var(--color-surface); border-radius: var(--rounded-lg); box-shadow: inset 0 0 0 1px var(--color-border); padding: var(--space-6); }
.icard-ico { width: 56px; height: 56px; border-radius: var(--rounded-full); background: var(--color-surface-tint); color: var(--color-primary); display: grid; place-items: center; margin-bottom: var(--space-5); }
.icard-ico svg { width: 26px; height: 26px; }
.icard h3 { margin-bottom: var(--space-3); }
.inverse .icard { background: transparent; box-shadow: inset 0 0 0 1px var(--color-border-inverse); }
.inverse .icard-ico { background: var(--color-border-inverse); color: var(--color-primary-light); }

/* Dienstenrij: icoon links, tekst rechts, gescheiden door strepen. */
.service { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-6); padding: var(--space-7) 0; border-top: 1px solid var(--color-border); align-items: start; }
.service:first-child { border-top: 0; padding-top: 0; }
.service-ico { width: 96px; height: 96px; border-radius: var(--rounded-full); background: var(--color-surface-tint); color: var(--color-primary); display: grid; place-items: center; }
.service-ico svg { width: 40px; height: 40px; }
.service h2 { margin-bottom: var(--space-3); }
.service .t-body { margin-bottom: var(--space-4); }

/* Projecten: de referenties als raster van twee bij twee. */
.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.project { border-radius: var(--rounded-lg); box-shadow: inset 0 0 0 1px var(--color-border); overflow: hidden; background: var(--color-surface); display: flex; flex-direction: column; }
.project .photo { border-radius: 0; box-shadow: none; aspect-ratio: 16 / 9; }
.project-body { padding: var(--space-5) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.project-body blockquote { margin: 0; color: var(--color-on-surface-muted); }
.project-body .who { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }

/* Team: vier kaarten. Een kaart zonder naam is zichtbaar een plaatshouder. */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.member { text-align: center; background: var(--color-surface); border-radius: var(--rounded-lg); box-shadow: inset 0 0 0 1px var(--color-border); padding: var(--space-6) var(--space-5); }
.member .avatar { width: 96px; height: 96px; border-radius: var(--rounded-full); background: var(--color-surface-tint); color: var(--color-primary); display: grid; place-items: center; margin: 0 auto var(--space-4); }
.member .avatar svg { width: 40px; height: 40px; }
.member b { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.member span { display: block; font-size: 14px; color: var(--color-on-surface-muted); margin-top: var(--space-1); }
.member--todo { box-shadow: inset 0 0 0 1px var(--color-primary-light); background: var(--color-surface-subtle); }
.member--todo b, .member--todo span { color: var(--color-primary); }

/* Werkwijze: vier genummerde stappen met een verbindingslijn. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); position: relative; }
.steps::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 24px; height: 2px; background: var(--color-border); }
.step { position: relative; text-align: center; }
.step .num { position: relative; width: 48px; height: 48px; border-radius: var(--rounded-full); background: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-display); font-weight: 600; display: grid; place-items: center; margin: 0 auto var(--space-4); }
.step b { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--space-2); }
.step p { font-size: 14px; color: var(--color-on-surface-muted); }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.steps--3::before { left: 16.6%; right: 16.6%; }

/* CTA-band: icoon, tekst, knop, in een omkaderd blok zoals de blueprint. */
.cta-box { display: flex; align-items: center; gap: var(--space-6); background: var(--color-surface-tint); border-radius: var(--rounded-lg); padding: var(--space-6) var(--space-7); }
.cta-box .cta-ico { width: 64px; height: 64px; flex: none; border-radius: var(--rounded-full); background: var(--color-surface); color: var(--color-primary); display: grid; place-items: center; }
.cta-box .cta-ico svg { width: 28px; height: 28px; }
.cta-box h2 { margin-bottom: var(--space-1); }
.cta-box p { color: var(--color-on-surface-muted); }
.cta-box .btn { margin-left: auto; flex: none; }

/* Contactgegevens-paneel. */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); align-items: start; }
.cpanel { background: var(--color-surface); border-radius: var(--rounded-lg); box-shadow: inset 0 0 0 1px var(--color-border); padding: var(--space-6); }
.cpanel h2 { margin-bottom: var(--space-5); }
.cline { display: flex; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.cline:first-of-type { border-top: 0; padding-top: 0; }
.cline .icon { width: 22px; height: 22px; color: var(--color-primary); margin-top: 3px; }
.cline a { font-weight: 600; text-decoration: none; }
.cline a:hover { text-decoration: underline; }
.cline small { display: block; font-size: 14px; color: var(--color-on-surface-muted); }
.stack-btns { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-btns .btn { justify-content: flex-start; }

/* Vacaturekaarten. */
.vacs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.vac { background: var(--color-surface); border-radius: var(--rounded-lg); box-shadow: inset 0 0 0 1px var(--color-border); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.vac h2 { margin: 0; }
.vac .btn { align-self: flex-start; margin-top: auto; }

@media (max-width: 900px) {
  .icards, .projects, .contact-grid, .vacs { grid-template-columns: 1fr; }
  .team, .steps, .steps--3 { grid-template-columns: repeat(2, 1fr); }
  .steps::before { display: none; }
  .cta-box { flex-direction: column; align-items: flex-start; }
  .cta-box .btn { margin-left: 0; }
  .service { grid-template-columns: 1fr; }
  .service-ico { width: 64px; height: 64px; }
  .service-ico svg { width: 28px; height: 28px; }
}
@media (max-width: 560px) {
  .team, .steps, .steps--3 { grid-template-columns: 1fr; }
}