/* De lopende band staat scheef en 3% breder dan het scherm om de driehoekjes
   aan de zijkanten te vullen; dat gaf 6 tot 65px horizontale overloop. `clip`
   knipt dat weg zonder een scrollcontainer te maken — `hidden` zou dat wel doen
   en breekt position:sticky. */
html { overflow-x: clip; }
/* ==========================================================================
   RIJSCHOOL-KIT · design-systeem "ROUTE"
   --------------------------------------------------------------------------
   Uitgangspunt: doelgroep is 17 en zit op de telefoon. Dus mobile-first,
   duimbereik, en een sticky actiebalk die nooit weggaat.
   Beeldtaal: de weg. Wegdek-donker, één signaalkleur, streepjes-belijning
   als scheiding, oversized cijfers (slagingspercentage, prijzen, uren) en
   een route-lijn die zich tekent terwijl je scrolt.
   Eén accentkleur per klant; komt uit site.config.js op --accent.
   ========================================================================== */

:root {
  --ink:       #0B0C0E;
  --ink-2:     #15171B;
  --ink-3:     #2A2D34;
  /* #6E7480 haalde 4,16 op de papierkleur — net onder de 4,5 die gewone tekst
     nodig heeft. Dit grijs haalt 5,19 op papier, 5,86 op wit en 4,66 op
     papier-2, dus op alle drie de ondergronden van de kit. */
  --mute:      #5F6570;
  --mute-d:    #9AA0AB;          /* mute op donker */
  --paper:     #F3F1EC;
  --paper-2:   #E8E5DD;
  --white:     #FFFFFF;
  --line:      rgba(11,12,14,.14);
  --line-d:    rgba(255,255,255,.16);
  --accent:    #D7FF2E;          /* overschreven door config */
  --accent-ink:#0B0C0E;
  /* De eigen kleur van de klant, voor het merk. Los van --accent, want dat is
     de actiekleur van de kit. 28 van de 38 gepeilde rijscholen hebben blauw;
     die kleur overal doorvoeren maakt elke demo blauw en gelijk aan de rest.
     Hun kleur draagt dus het logo, de kitkleur draagt de knop. */
  --brand:     var(--accent);
  --brand-ink: var(--accent-ink);
  --ok:        #17A05A;

  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --w:    1320px;
  --gut:  clamp(18px, 5vw, 64px);
  --sec:  clamp(64px, 9vw, 148px);   /* verticale sectie-ademruimte */
  --r:    18px;
  --r-sm: 10px;
  --ease: cubic-bezier(.16,.84,.24,1);
  --bar:  0px;                        /* hoogte sticky actiebalk, gezet in media query */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  padding-bottom: var(--bar);
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--font-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: .95;
  text-wrap: balance;
}
h1 { font-size: clamp(42px, 10.5vw, 112px); }
h2 { font-size: clamp(32px, 6.4vw, 68px); }
h3 { font-size: clamp(21px, 3.4vw, 28px); letter-spacing: -0.02em; line-height: 1.08; }
h4 { font-size: 17px; letter-spacing: -0.01em; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(17px, 2.2vw, 21px); line-height: 1.5; color: var(--ink-3); max-width: 56ch; }
.on-dark .lead, .sec-dark .lead, .hero .lead, .pghd .lead { color: var(--mute-d); }

.mono {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--mute);
}
.sec-dark .mono, .on-dark .mono, .hero .mono, .pghd .mono { color: var(--mute-d); }
.mono-plain { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; text-transform: none; }

.num { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.05em; line-height: .8; }

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 var(--gut); }
.sec  { padding: var(--sec) 0; }
.sec-dark   { background: var(--ink); color: var(--white); }
.sec-paper2 { background: var(--paper-2); }
.hidden { display: none !important; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); }
.skip:focus { left: 10px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.ms {
  font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal;
  font-size: 22px; line-height: 1; display: inline-block; vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  /* Iconen zijn ligaturen in kleine letters: een ouder met text-transform:uppercase
     (.mono) maakte van "verified" het woord VERIFIED (kitfout). */
  text-transform: none; letter-spacing: normal;
}
.ms-fill { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* ---------- wegdek-belijning: onderbroken streep als scheidingslijn ---------- */
.lane {
  height: 6px; border: 0;
  background: repeating-linear-gradient(90deg, var(--ink) 0 34px, transparent 34px 62px);
  opacity: .18;
}
.sec-dark + .lane, .lane.on-dark { background: repeating-linear-gradient(90deg, var(--white) 0 34px, transparent 34px 62px); opacity: .22; }

/* ---------- sectiekop ---------- */
.sec-hd { margin-bottom: clamp(30px, 5vw, 56px); }
.sec-hd .mono { display: block; margin-bottom: 14px; }
.sec-hd .lead { margin-top: 16px; }
@media (min-width: 900px) {
  .sec-hd { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 48px; align-items: end; }
  .sec-hd .lead { margin-top: 0; padding-bottom: 6px; }
  /* align-items:end klopt bij één lead-alinea, maar met een blok van twee
     alinea's werd de kop naar beneden geduwd tot ónder de tekst ernaast.
     Een sec-hd met zo'n blok lijnt vanaf de bovenkant uit. */
  .sec-hd:has(.lead-blok) { align-items: start; }
  .sec-hd:has(.lead-blok) .lead { padding-bottom: 0; }
}

/* ---------- knoppen ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 600 16px/1 var(--font-body); letter-spacing: -0.01em;
  padding: 18px 26px; border-radius: 999px; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--white); cursor: pointer; white-space: nowrap;
  transition: transform .28s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0); }
.btn .ms { font-size: 21px; }
.btn-accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-ghost  { background: transparent; color: var(--ink); }
.btn-ghost.on-dark, .sec-dark .btn-ghost, .hero .btn-ghost, .pghd .btn-ghost { color: var(--white); border-color: var(--line-d); }
.btn-ghost.on-dark:hover, .sec-dark .btn-ghost:hover, .hero .btn-ghost:hover, .pghd .btn-ghost:hover { border-color: var(--white); }
.btn-sm  { padding: 12px 18px; font-size: 14.5px; }
.btn-lg  { padding: 21px 32px; font-size: 17.5px; }
.btn-block { display: flex; width: 100%; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- fotoplaceholder (klant levert eigen beeld) ---------- */
.ph {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 4/3; border-radius: var(--r); background: var(--paper-2);
  border: 1px dashed var(--line); padding: 22px;
}
.ph span { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; letter-spacing: .02em; color: var(--mute); text-align: center; max-width: 34ch; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ph.tall   { aspect-ratio: 3/4; }
.ph.wide   { aspect-ratio: 16/9; }
.ph.square { aspect-ratio: 1/1; }
/* Video in de hero. Vult de beeldplek net als een foto. */
.hero-vid { padding: 0; overflow: hidden; }
/* Een liggende video in een staand kader wordt bijgesneden; waar het onderwerp
   zit verschilt per video. --vpos komt uit hero.videoPositie in de config. */
.hero-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--vpos, 50% 50%); border-radius: inherit; }
/* Wie beweging heeft uitgezet krijgt het posterframe, niet de lopende video. */
@media (prefers-reduced-motion: reduce) {
  .hero-vid video { display: none; }
  .hero-vid { background-size: cover; background-position: center; }
}

/* ==========================================================================
   SOCIALE KANALEN
   Geen nagebouwde feed: alleen hun eigen hashtag, groot gezet, en de kanalen
   die ze echt hebben.
   ========================================================================== */
.soc { display: grid; gap: 26px; justify-items: start; }
.soc-tag {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.045em;
  font-size: clamp(38px, 8vw, 96px); line-height: .92; color: var(--accent);
}
.soc h2 { font-size: clamp(26px, 4vw, 44px); margin-top: 6px; }
.soc-lead { max-width: 54ch; }
.soc-links { display: flex; flex-wrap: wrap; gap: 10px; }
.sec-dark .soc h2 { color: var(--white); }

/* ==========================================================================
   TOPBALK
   Telefoon, mail en taal boven de kopbalk. Die drie vochten in de kop om
   ruimte met een menu dat meegroeit met het aantal diensten.
   ========================================================================== */
.topbar {
  /* Vast bovenaan, met de kopbalk eronder. De kopbalk is `position: fixed` en
     begon op 0, dus die lag over de topbalk heen — het nummer werd afgesneden
     en de taalwisselaar viel over de knop. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 95;
  background: var(--ink-2); color: var(--mute-d);
  border-bottom: 1px solid var(--line-d);
  font-family: var(--font-mono); font-size: 13px;
}
/* Eén regel, altijd. Wrapte de balk, dan klopte --topbar-h niet meer en schoof
   de kopbalk eroverheen — op 390px stond het logo half achter de topbalk. */
.topbar-in { display: flex; align-items: center; gap: 20px; height: calc(var(--topbar-h) - 1px); flex-wrap: nowrap; overflow: hidden; }
/* Alleen de directe links (nummer, mail): deze regel gaf ook de links ín de
   taalschakelaar de volle balkhoogte, waardoor die 46px werd in een balk van
   39px en boven én onder tegen de randen liep. */
.topbar-in > a { display: inline-flex; align-items: center; gap: 7px; height: calc(var(--topbar-h) - 1px); color: inherit; white-space: nowrap; }
.topbar-in > a:hover { color: var(--white); }
.topbar .ms { font-size: 17px; }
.topbar-eind { margin-left: auto; display: inline-flex; align-items: center; }
/* Op een smal scherm is het mailadres te lang naast het nummer. `.topbar a`
   is specifieker dan `.topbar-mail`, dus die selector moet even zwaar zijn. */
@media (max-width: 700px) { .topbar a.topbar-mail { display: none; } }
/* ...maar dan mag er geen lege balk overblijven.
   Zonder telefoonnummer is het mailadres de enige inhoud, en die wordt op smal
   scherm verborgen: er bleef een donkere strook van 39px over met niets erin.
   De schermkeuring meldde dat 42 keer over 134 sites. `:has()` kijkt of er nog
   iets zichtbaars in staat; zo niet, dan gaat de balk zelf ook weg. */
@media (max-width: 700px) {
  .topbar:not(:has(.topbar-in > a:not(.topbar-mail))):not(:has(.topbar-eind > *)) { display: none; }
}
/* De balk verdween, maar --topbar-h bleef 47px: de kopbalk (en alles wat op
   --topbar-h rekent — .mnav, .hero, .pghd) hing dan 47px te laag, met de hero
   erachter zichtbaar in de kier. Gevonden bij Autorijschool Voogt (alleen een
   mailadres, dus juist het geval dat hierboven wordt afgevangen): op mobiel
   geen topbalk, op desktop wel, en op mobiel sloot de kopbalk niet aan op de
   demobalk.
   Rechtstreeks op body, niet op .topbar: ":has()" mag niet genest binnen
   ":has()", dus "body:has(.topbar:not(:has(...)))" is ongeldige CSS (Chrome
   negeert de hele regel stilletjes zonder foutmelding). topbar-in/-eind zijn
   uniek genoeg om zonder de omweg via .topbar te controleren.
   Twee aparte regels, geen media-query voor allebei: een site zonder
   telefoon, zonder mailadres en met één taal krijgt van site.js helemaal geen
   .topbar-element (zie "De topbalk helemaal weglaten als er niets in staat")
   — dat gebeurt op elke breedte, dus die regel geldt altijd. Een site met
   alléén een mailadres verliest zijn topbalk pas onder 700px, dus die blijft
   aan de media query hangen. */
body:not(:has(.topbar-in)) { --topbar-h: 0px; }
@media (max-width: 700px) {
  body:not(:has(.topbar-in > a:not(.topbar-mail))):not(:has(.topbar-eind > *)) {
    --topbar-h: 0px;
  }
}

/* Taalwisselaar: een schuifschakelaar. Het blokje staat achter de actieve
   taal en schuift er bij hover alvast naartoe, zodat je ziet wat er gebeurt
   voordat je klikt. Werkt met elk aantal talen via --n en --i. */
.taalwissel {
  position: relative; display: inline-flex; align-items: center;
  background: rgba(255,255,255,.09); border: 1px solid var(--line-d);
  border-radius: 999px; padding: 2px; margin-right: 2px;
}
.taalwissel-knop {
  position: absolute; top: 2px; bottom: 2px; left: 2px;
  width: calc((100% - 4px) / var(--n, 2));
  transform: translateX(calc(var(--i, 0) * 100%));
  background: var(--accent); border-radius: 999px;
  transition: transform .3s var(--ease);
  pointer-events: none;
}
.taalwissel a, .taalwissel-nu {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; min-width: 36px; padding: 0 10px; border-radius: 999px;
  font: 600 12.5px/1 var(--font-mono); letter-spacing: .08em;
  transition: color .2s var(--ease);
}
.taalwissel-nu { color: var(--accent-ink); }
.taalwissel a { color: var(--mute-d); }
/* Bij hover schuift het blokje naar de taal waar je op staat, en wisselt de
   kleur mee. :has() wordt breed ondersteund; zonder blijft het blokje staan. */
.taalwissel:has(a:hover) .taalwissel-knop { transform: translateX(calc(var(--hi, 1) * 100%)); }
.taalwissel:has(a:hover) .taalwissel-nu { color: var(--mute-d); }
.taalwissel a:hover { color: var(--accent-ink); }
.taalwissel a[data-i="0"]:hover ~ .taalwissel-knop,
.taalwissel:has(a[data-i="0"]:hover) { --hi: 0; }
.taalwissel:has(a[data-i="1"]:hover) { --hi: 1; }
.taalwissel:has(a[data-i="2"]:hover) { --hi: 2; }
.taalwissel:has(a[data-i="3"]:hover) { --hi: 3; }

/* Reviewsectie met alleen een cijfer: geen citaten om te tonen, wel het
   sterkste bewijs dat ze hebben. */
.rev-solo { display: grid; gap: clamp(22px, 4vw, 54px); align-items: center; }
@media (min-width: 800px) { .rev-solo { grid-template-columns: auto 1fr; } }
.rev-score.groot b { font-size: clamp(72px, 13vw, 148px); line-height: .82; letter-spacing: -0.05em; }
.rev-solo h2 { font-size: clamp(26px, 4vw, 46px); }

/* ==========================================================================
   UITKLAPMENU
   Een rijschool met meerdere rijbewijzen heeft die in zijn hoofdmenu staan.
   Op desktop een uitklapper onder het hoofditem, op de telefoon ingesprongen
   subitems — een zwevend menu is daar lastig te raken.
   ========================================================================== */
@media (min-width: 900px) {
  .nav-sub { position: relative; display: inline-flex; }
  .nav-sub > a { display: inline-flex; align-items: center; gap: 3px; }
  .nav-sub > a .ms { font-size: 17px; transition: transform .22s var(--ease); }
  .nav-sub:hover > a .ms, .nav-sub:focus-within > a .ms { transform: rotate(180deg); }
  .nav-pop {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 216px; z-index: 60;
    background: var(--white); border: 1.5px solid var(--ink); border-radius: 14px;
    padding: 7px; display: grid; gap: 2px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    box-shadow: 0 20px 40px -24px rgba(11,12,14,.55);
  }
  /* Een onzichtbare brug over de tussenruimte, anders klapt het menu dicht
     zodra de muis van het hoofditem naar de lijst beweegt. */
  .nav-sub::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
  .nav-sub:hover .nav-pop, .nav-sub:focus-within .nav-pop { opacity: 1; visibility: visible; transform: none; }
  .nav-pop a {
    display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px;
    color: var(--ink); font-size: 15px; font-weight: 500;
  }
  .nav-pop a:hover, .nav-pop a.active { background: var(--paper); }
  .nav-pop a .ms { font-size: 20px; color: var(--mute); flex: none; }
  .nav-pop small { display: block; font: 400 13px/1.35 var(--font-body); color: var(--mute); margin-top: 1px; }
}
@media (max-width: 899px) {
  .nav-sub { display: contents; }
  .nav-sub > a .ms { display: none; }
}
.mnav-sub { display: grid; gap: 2px; padding: 2px 0 8px 34px; }
.mnav-sub a { font-size: 16px; color: var(--mute-d); padding: 7px 0; }
.mnav-sub a.active { color: var(--accent); }
@media (min-width: 900px) { .mnav-sub { display: none; } }

/* ==========================================================================
   DIENSTPAGINA
   Tekst links, beeld rechts. Zonder deze regels stapelde het beeld onder de
   tekst en werd het bijna 800px hoog.
   ========================================================================== */
.dienst-in { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .dienst-in { grid-template-columns: 1fr .84fr; } }
.dienst-in h2 { font-size: clamp(26px, 4vw, 44px); margin-bottom: 14px; }
.dienst-in .lead + .lead { margin-top: 12px; }

/* Een opsomming met vinkjes heeft geen bolletjes nodig: die stonden er allebei. */
.ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 11px; }
.ticks li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.ticks li .ms { color: var(--ok); font-size: 21px; flex: none; margin-top: 1px; }
.sec-dark .ticks li .ms { color: var(--accent); }

/* ==========================================================================
   DIENSTEN
   Een raster van wat de rijschool aanbiedt. Meer dan de helft van de gemeten
   rijscholen heeft twee of meer rijbewijzen; dat is hun hoofdstructuur en die
   hoort hier terug te komen. Eén accentkleur voor alle kaarten: hun eigen site
   geeft vaak elke dienst een eigen kleur, maar dat is hun vormtaal, niet de
   onze.
   ========================================================================== */
.svc-grid {
  display: grid; gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
/* --kol komt uit site.js en is afgestemd op het aantal diensten, zodat de
   laatste rij vol is. Onder 1100px vervalt het en beslist auto-fit weer. */
@media (min-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(var(--kol, 3), 1fr); }
  .svc-grid > .svc { grid-column: span var(--span, 1); }
}
.svc {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r);
  color: inherit; transition: transform .32s var(--ease), box-shadow .32s var(--ease);
}
.svc:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -26px rgba(11,12,14,.5); }
.svc-media { border-bottom: 1.5px solid var(--ink); }
.svc-media .ph { border: 0; border-radius: 0; }
/* Een kaart in een uitgevulde laatste rij is breder, en met een vaste
   beeldverhouding wordt zijn beeld dan ook veel hoger dan dat van de rij
   erboven. Dat leest als twee verschillende secties. Vandaar een plafond. */
.svc-media .ph { aspect-ratio: auto; height: clamp(150px, 15vw, 210px); width: 100%; }
.svc-media .ph img { height: 100%; width: 100%; object-fit: cover; }
.svc-in { display: flex; flex-direction: column; gap: 9px; padding: clamp(18px, 2.2vw, 24px); flex: 1; }
.svc-icon {
  width: 42px; height: 42px; display: grid; place-items: center; flex: none;
  background: var(--accent); color: var(--accent-ink); border-radius: 12px; transform: rotate(-4deg);
}
.svc-icon .ms { font-size: 24px; font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24; }
.svc h3 { font-size: clamp(20px, 2.4vw, 25px); letter-spacing: -0.03em; }
.svc p { color: var(--mute); font-size: 15px; line-height: 1.5; }
.svc-foot {
  margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px;
}
.svc-foot .ms { transition: transform .3s var(--ease); }
.svc:hover .svc-foot .ms { transform: translateX(5px); }
.sec-dark .svc { background: var(--ink-2); border-color: var(--line-d); }
.sec-dark .svc p { color: var(--mute-d); }
.sec-dark .svc-foot { border-top-color: var(--line-d); }

/* Een pakket zonder bedrag. Geen cijferformaat: dat leest als een storing. */
.pk-priceless {
  font: 500 15px/1.4 var(--font-mono); letter-spacing: .02em;
  color: var(--mute); margin: 14px 0 2px;
}
.sec-dark .pk-priceless, .pk-hi .pk-priceless { color: var(--mute-d); }

.sec-dark .ph, .hero .ph { background: var(--ink-2); border-color: var(--line-d); }
.sec-dark .ph span, .hero .ph span { color: var(--mute-d); }

/* ==========================================================================
   HEADER
   ========================================================================== */
/* Inclusief de 1px onderrand. 47px in plaats van 39px, zodat de
   taalschakelaar 36px kan zijn — de ondergrens voor een aanraakvlak — en er
   nog lucht boven en onder overblijft. Het opgerekte aanraakvlak dat ik eerst
   met een ::after maakte werd door de overflow van de balk weggeknipt. */
:root { --topbar-h: 47px; }
.hd {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 90;
  background: transparent; color: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s, color .3s, backdrop-filter .3s;
}
.hd .logo small { color: var(--mute-d); }
.hd .burger { border-color: var(--line-d); }
.hd.scrolled {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  color: var(--ink); border-bottom-color: var(--line);
}
.hd.scrolled .logo small { color: var(--mute); }
.hd.scrolled .burger { border-color: var(--line); }
/* Menu open: de kopbalk is effen donker, ook na scrollen. Doorzichtig liet de pagina
   erachter zien, en .hd.scrolled (zwaarder dan html.menu-open .hd) maakte het kruisje
   inktkleurig op het donkere menu, dus onzichtbaar. Daarom elke regel ook met .scrolled. */
html.menu-open .hd, html.menu-open .hd.scrolled { background: var(--ink); backdrop-filter: none; color: var(--white); border-bottom-color: var(--line-d); }
html.menu-open .hd .logo small, html.menu-open .hd.scrolled .logo small { color: var(--mute-d); }
html.menu-open .hd .burger, html.menu-open .hd.scrolled .burger { border-color: var(--line-d); color: var(--white); }
html.menu-open .hd.scrolled .burger:hover { background: rgba(255,255,255,.12); }
.hd-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 66px; }
@media (min-width: 900px) { .hd-in { height: 86px; } }

.logo { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.035em; line-height: 1; }
.logo img { height: var(--logo-h, 38px); width: auto; }
/* Beeldmerk naast de naam: het beeld hoeft dan niet leesbaar te zijn, want de
   naam staat er in letters naast. */
.logo-naast img { height: var(--logo-h, 40px); flex: none; }
/* Lichte plaat voor een donker logo. Alleen waar de kop donker is: zodra de
   header bij het scrollen licht wordt, is de plaat niet meer nodig. */
.hd .logo-plaat img { background: #fff; padding: 6px 10px; border-radius: 9px; box-sizing: content-box; height: 30px; }
.hd.scrolled .logo-plaat img { background: none; padding: 0; height: var(--logo-h, 38px); }
.ft .logo-plaat img { background: #fff; padding: 6px 10px; border-radius: 9px; box-sizing: content-box; height: 30px; }
.logo-mark {
  width: 36px; height: 36px; flex: none; border-radius: 11px; background: var(--brand); color: var(--brand-ink);
  display: grid; place-items: center; transform: rotate(-4deg);
}
.logo-mark .ms { font-size: 22px; font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24; }
/* Stond op 11px. Dat viel pas op bij Rijschool Milan: die heeft geen logo, dus
   tekent de kit een wordmerk met de subline eronder — en 11px is onder de 13px
   die we prospects zelf aanrekenen. Met minder letterafstand past 13px in
   dezelfde breedte. */
.logo small { display: block; margin-top: 5px; font: 500 13px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }

.nav { display: none; }
@media (min-width: 900px) {
  .nav { display: flex; gap: 2px; }
  .nav a {
    position: relative; padding: 10px 12px; border-radius: 999px; font-weight: 500; font-size: 15.5px;
    white-space: nowrap;
    transition: background .2s, color .2s;
  }
  .nav a:hover { background: rgba(255,255,255,.12); }
  .nav a.active { background: rgba(255,255,255,.14); }
  .hd.scrolled .nav a:hover { background: rgba(11,12,14,.06); }
  .hd.scrolled .nav a.active { background: var(--ink); color: var(--white); }
}
.hd-cta { display: flex; align-items: center; gap: 10px; }
.hd-phone { display: none; }
@media (min-width: 1100px) {
  .hd-phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 14px; font-weight: 500; }
  .hd-phone .ms { font-size: 19px; }
}
/* Een vol menu heeft meer breedte nodig voordat het horizontaal past. Onder
   het breekpunt blijft de hamburger staan, samen met de knop — die moet altijd
   zichtbaar zijn, want dat is de hele actie van de pagina. */
@media (max-width: 1219px) {
  .hd-veel .nav { display: none; }
  .hd-veel .burger { display: inline-flex; }
}
@media (min-width: 1220px) {
  .hd-veel .burger { display: none; }
}

/* Het nummer in de kopbalk verdwijnt zodra het menu de ruimte nodig heeft: bij
   acht menu-items brak "Over ons" en het nummer zelf over twee regels. Bellen
   kan nog steeds via de actiebalk onderaan, de contactpagina en de voettekst. */
.hd-phone { display: none; }
@media (min-width: 1400px) { .hd-phone { display: inline-flex; white-space: nowrap; } }
.hd .btn-accent { display: none; }
@media (min-width: 900px) { .hd .btn-accent { display: inline-flex; } }

.burger {
  /* Een <button> erft de tekstkleur niet: het icoon stond zwart op de donkere
     kop en was vrijwel onzichtbaar. En het stond 20px uit het midden, omdat de
     ligature-tekst in de knop als tweede rasteritem meetelde. */
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex: none;
  border: 1.5px solid var(--line-d); border-radius: 12px; background: transparent;
  color: var(--white); cursor: pointer; line-height: 0;
}
.burger .ms { font-size: 24px; line-height: 1; display: block; }
.hd.scrolled .burger { border-color: var(--line); color: var(--ink); }
.burger:hover { background: rgba(255,255,255,.12); }
.hd.scrolled .burger:hover { background: var(--paper-2); }
@media (min-width: 900px) { .burger { display: none; } }

.mnav {
  position: fixed; inset: calc(66px + var(--topbar-h)) 0 auto; z-index: 89;
  background: var(--ink); color: var(--white);
  padding: 12px var(--gut) calc(26px + env(safe-area-inset-bottom));
  display: grid; gap: 2px;
  transform: translateY(-102%); visibility: hidden;
  transition: transform .45s var(--ease), visibility 0s .45s;
  /* Hoogte = scherm min kopbalk én topbalk; zonder de topbalk viel de onderkant van
     het menu 47px buiten beeld. overscroll-behavior: aan het eind niet doorscrollen naar de pagina. */
  min-height: calc(100dvh - 66px - var(--topbar-h)); max-height: calc(100dvh - 66px - var(--topbar-h));
  overflow-y: auto; overscroll-behavior: contain;
}
/* Met veel menu-items blijft de hamburger tot 1180px; vanaf 900px is de kopbalk 86px hoog. */
@media (min-width: 900px) {
  .mnav { top: calc(86px + var(--topbar-h)); min-height: calc(100dvh - 86px - var(--topbar-h)); max-height: calc(100dvh - 86px - var(--topbar-h)); }
}
.mnav.open { transform: translateY(0); visibility: visible; transition: transform .45s var(--ease), visibility 0s 0s; }
.mnav a {
  display: flex; align-items: baseline; gap: 14px; padding: 16px 0;
  border-bottom: 1px solid var(--line-d);
  font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.035em;
}
.mnav a i { font-style: normal; font-family: var(--font-mono); font-size: 13px; color: var(--mute-d); }
.mnav a.active { color: var(--accent); }
.mnav .btn { margin-top: 18px; }
.mnav-foot { margin-top: 20px; display: grid; gap: 2px; }
.mnav-foot a {
  display: block; padding: 6px 0; border-bottom: 0;
  font: 500 15px/1.5 var(--font-mono); letter-spacing: 0; color: var(--mute-d);
}

/* ==========================================================================
   STICKY ACTIEBALK (mobiel) – proefles aanvragen blijft altijd in beeld
   ========================================================================== */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 88;
  display: none; gap: 10px; align-items: center;
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-d);
  transform: translateY(120%); transition: transform .4s var(--ease);
}
.actionbar.up { transform: translateY(0); }
.actionbar .btn { flex: 1; padding: 16px 14px; font-size: 16px; }
.actionbar .btn-icon { flex: none; width: 54px; padding: 16px 0; }
@media (max-width: 899px) {
  .actionbar { display: flex; }
  :root { --bar: 78px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; background: var(--ink); color: var(--white); overflow: hidden;
  /* Onderaan ruimte voor de lopende band die erop volgt: die staat scheef
     (rotate(-1.1deg) scale(1.03)) en steekt daardoor 15px buiten zijn eigen
     doos uit. Met 22px onderruimte liep de bronregel van het grote cijfer er
     precies achter weg — en dat is juist de regel die de claim controleerbaar
     maakt. */
  padding: calc(66px + var(--topbar-h) + clamp(34px, 7vw, 68px)) 0 58px;
}
@media (min-width: 900px) { .hero { padding-top: calc(86px + var(--topbar-h) + clamp(34px, 5vw, 64px)); } }
.hero::after {                                   /* zachte accentgloed achter de cijfers */
  content: ""; position: absolute; right: -18vw; top: -12vw; width: 62vw; height: 62vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 66%);
  pointer-events: none;
}
.hero-in { position: relative; z-index: 1; }
/* align-items:center zette de stip midden naast een kicker van twee regels —
   dus naast de tweede regel in plaats van naast de eerste. Bij Rijschool Milan
   ("Rijschool in Dordrecht en de Drechtsteden") brak hij af op 390px.
   flex-start lijnt hem uit met de eerste regel; de marge zet hem optisch op de
   x-hoogte van die regel. */
.hero-kicker { display: inline-flex; align-items: flex-start; gap: 9px; margin-bottom: 22px; }
.hero-kicker::before { margin-top: .42em; }
.hero-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.hero h1 { max-width: 18ch; }
@media (min-width: 900px)  { .hero h1 { font-size: clamp(46px, 4.6vw, 68px); line-height: 1.0; letter-spacing: -0.03em; max-width: 15ch; } }
@media (min-width: 1240px) { .hero h1 { font-size: clamp(58px, 4.4vw, 76px); } }
.hero h1 mark { background: none; color: var(--accent); }
.hero .lead { margin: 22px 0 30px; }
.hero-ctas { display: grid; gap: 12px; }
@media (min-width: 560px) { .hero-ctas { display: flex; flex-wrap: wrap; } }
/* De beoordelingsregel en de badges eronder kregen allebei margin-top:20px en
   liepen daardoor als één blok in elkaar. Het cijfer moet los staan. */
.hero-rev { margin-top: 26px; }
.hero-rev + .hero-note { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.11); }
.hero-rev a, .hero-rev > .stars { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.hero-rev a { color: inherit; border-bottom: 1px solid transparent; }
.hero-rev a:hover { border-bottom-color: currentColor; }
.hero-rev .stars { color: #ffb400; font-size: 16px; letter-spacing: 1.5px; }
.hero-rev b { font-size: 21px; font-weight: 750; color: var(--ink-d); letter-spacing: -.01em; }
.hero-rev span { font-size: 14px; color: var(--mute-d); }
.hero-rev .ms { font-size: 15px; color: var(--mute-d); }

.hero-note { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.hero-note span { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--mute-d); }
.hero-note .ms { font-size: 18px; color: var(--accent); }

/* het grote slagingspercentage */
.score { position: relative; margin-top: clamp(44px, 7vw, 72px); padding-bottom: clamp(30px, 5vw, 52px); }
.score-num {
  display: flex; align-items: flex-start; color: var(--accent);
  font-size: clamp(112px, 33vw, 300px);
}
/* margin-left stond op .04em. Dat werkt voor "%" maar niet voor een woord:
   bij "26 jaar" raakte de j de 6, en bij "30 jaar" de 0. Het achtervoegsel is
   sinds Rijschool Fetri vaker een woord dan een procentteken. */
.score-num sup { font-size: .3em; line-height: 1; margin-top: .34em; margin-left: .1em; letter-spacing: -0.02em; }
.score-meta { margin-top: 6px; display: grid; gap: 4px; }
.score-meta b { font-family: var(--font-display); font-size: clamp(19px, 2.6vw, 26px); font-weight: 700; letter-spacing: -0.03em; }
.score-src { display: inline-flex; align-items: center; gap: 7px; }
.hero-media .ph { aspect-ratio: 4/5; border-radius: var(--r); }
/* Het voorvoegsel van een heldencijfer (een euroteken) staat kleiner en hoger,
   net als het achtervoegsel. Niet cursief, ondanks de <i>. */
/* Meer dan één alinea in de rechterhelft van een sec-hd. */
.lead-blok .lead + .lead { margin-top: 14px; }

.score-pre { font-style: normal; font-size: .48em; vertical-align: .42em; margin-right: .06em; letter-spacing: -0.02em; }
@media (min-width: 900px) {
  .hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(32px,4vw,72px); align-items: end; }
  .score { margin-top: clamp(28px, 3.4vw, 48px); padding-bottom: 0; }
  .score-num { font-size: clamp(150px, 15vw, 260px); }
  .hero-media { align-self: stretch; position: relative; min-height: 520px; }
  /* Zonder beeldkolom loopt de tekstkolom niet door tot 1440px breed: dat leest
     niet. De hero krijgt dan twee kolommen van tekst — de kop links, het cijfer
     rechts — zodat de breedte gevuld blijft zonder een gat. */
  .hero-grid.hero-solo { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; }
  .hero-grid.hero-solo .hero-score-kolom { align-self: end; padding-bottom: 6px; }
  .hero-media .ph { position: absolute; inset: 0; aspect-ratio: auto; }
}
@media (max-width: 899px) { .hero-media { margin-top: 32px; } .hero-media .ph { aspect-ratio: 5/4; } }

/* ==========================================================================
   MARQUEE – lopende band met plaatsen / kreten
   ========================================================================== */
/* De band staat schuin en wordt 3% opgeschaald, zodat de gedraaide hoeken niet
   als witte driehoekjes in beeld komen. Die opschaling maakt hem breder dan het
   venster: op 1440px werd de pagina 1462px en kon je horizontaal scrollen. De
   `overflow: hidden` hieronder knipt alleen de inhoud van de band, niet zijn
   eigen gedraaide doos.
   
   Geknipt wordt daarom op #main. Niet op body: qa-browser.mjs meet juist apart
   of elementen buiten hun kolom vallen, omdat overflow op body een te brede
   kopbalk maskeert. `clip` in plaats van `hidden` houdt position: sticky heel.
   Gemeld op 45 van de 134 gekeurde sites. */
#main { overflow-x: clip; }

.marquee {
  background: var(--accent); color: var(--accent-ink);
  padding: 14px 0; overflow: hidden; white-space: nowrap;
  transform: rotate(-1.1deg) scale(1.03);
  border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
}
.marquee-track { display: inline-flex; align-items: center; gap: 34px; animation: slide 34s linear infinite; will-change: transform; }
.marquee span { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 3vw, 26px); letter-spacing: -0.03em; display: inline-flex; align-items: center; gap: 34px; }
.marquee span::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-ink); display: inline-block; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ==========================================================================
   CIJFERS
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px clamp(20px,3vw,44px); }
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { border-top: 2px solid var(--ink); padding-top: 16px; }
.sec-dark .stat { border-top-color: var(--accent); }
.stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 6.2vw, 68px); letter-spacing: -0.05em; line-height: .86; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 12px; font-size: 14.5px; color: var(--mute); line-height: 1.35; max-width: 22ch; }
.sec-dark .stat span { color: var(--mute-d); }

/* ==========================================================================
   PAKKETTEN
   ========================================================================== */
.pk-grid { display: grid; gap: 16px; }
@media (min-width: 980px) { .pk-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; } }

.pk {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r);
  padding: clamp(22px, 3.4vw, 34px);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease);
}
.pk:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -26px rgba(11,12,14,.5); }
.pk-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.pk h3 { font-size: clamp(24px, 3.6vw, 32px); }
.pk-tag {
  flex: none; font: 600 13px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-ink); padding: 8px 11px; border-radius: 999px;
}
.pk-hours { margin-top: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--mute); }
.pk-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 22px 0 4px; }
.pk-price b { white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-size: clamp(46px, 8vw, 68px); letter-spacing: -0.05em; line-height: .82; font-variant-numeric: tabular-nums; }
.pk-price i { font-style: normal; font-size: 15px; color: var(--mute); }
.pk-note { font-size: 14px; color: var(--mute); margin: 0 0 20px; }
.pk ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; border-top: 1px solid var(--line); padding-top: 20px; }
.pk li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 15.5px; line-height: 1.4; }
.pk li .ms { font-size: 20px; color: var(--ok); }
.pk li.off { color: var(--mute); }
.pk li.off .ms { color: var(--mute); }
/* Op de uitgelichte (donkere) kaart is het lichte-modus grijs te donker:
   contrast 3,3. Daar hoort het grijs voor donkere vlakken. */
.pk-hi li.off, .pk-hi li.off .ms, .sec-dark .pk li.off, .sec-dark .pk li.off .ms { color: var(--mute-d); }
.pk .btn { margin-top: auto; }

.pk-hi { background: var(--ink); color: var(--white); border-color: var(--ink); }
.pk-hi .pk-hours, .pk-hi .pk-note, .pk-hi .pk-price i { color: var(--mute-d); }
.pk-hi ul { border-top-color: var(--line-d); }
.pk-hi li .ms { color: var(--accent); }
.pk-hi .pk-price b { color: var(--accent); }
@media (min-width: 980px) { .pk-hi { transform: translateY(-16px); } .pk-hi:hover { transform: translateY(-24px); } }

/* losse tarieven */
.rates { border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--white); }
.rate { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 18px clamp(18px,2.6vw,28px); border-bottom: 1px solid var(--line); }
.rate:last-child { border-bottom: 0; }
.rate b { font-weight: 600; font-size: 16.5px; }
.rate small { display: block; font-weight: 400; font-size: 14px; color: var(--mute); margin-top: 3px; }
.rate span { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================================
   ROUTE – stappen naar je rijbewijs, lijn tekent zich tijdens scroll
   ========================================================================== */
.route { position: relative; padding-left: 44px; }
@media (min-width: 900px) { .route { padding-left: 0; } }
.route-line { position: absolute; left: 13px; top: 10px; bottom: 10px; width: 3px; }
.route-line::before {
  content: ""; position: absolute; inset: 0; opacity: .22;
  background: repeating-linear-gradient(180deg, currentColor 0 14px, transparent 14px 26px);
}
.route-line::after {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  transform: scaleY(var(--p, 0)); transform-origin: top; transition: transform .18s linear;
}
.route-step { position: relative; padding: 0 0 34px; }
.route-step:last-child { padding-bottom: 0; }
.route-dot {
  position: absolute; left: -44px; top: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink-2); border: 1.5px solid var(--line-d); color: var(--white);
  display: grid; place-items: center; font: 700 13px/1 var(--font-mono); font-variant-numeric: tabular-nums;
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.route-step.in .route-dot { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); transform: scale(1.06); }
.route-step h3 { margin-bottom: 8px; }
.route-step p { color: var(--mute-d); max-width: 46ch; }
.sec:not(.sec-dark) .route-step p { color: var(--ink-3); }
@media (min-width: 900px) {
  .route { display: grid; grid-template-columns: repeat(var(--route-n, 4), 1fr); gap: 26px; padding-top: 52px; }
  .route-line { left: 0; right: 0; top: 15px; bottom: auto; width: auto; height: 3px; }
  .route-line::before { background: repeating-linear-gradient(90deg, currentColor 0 16px, transparent 16px 30px); }
  .route-line::after { transform: scaleX(var(--p, 0)); transform-origin: left; }
  .route-step { padding: 0; }
  .route-dot { left: 0; top: -52px; }
}

/* Vijf stappen naast elkaar worden op 900px kolommen van 165px: dan breekt elk
   kopje af. Bij meer dan vier stappen blijft de verticale tijdlijn dus staan
   tot er echt ruimte is. */
@media (min-width: 900px) and (max-width: 1179px) {
  .route.route-veel { display: block; padding-left: 44px; padding-top: 0; }
  .route.route-veel .route-line { left: 13px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  .route.route-veel .route-line::before { background: repeating-linear-gradient(180deg, currentColor 0 16px, transparent 16px 30px); }
  .route.route-veel .route-line::after { transform: scaleY(var(--p, 0)); transform-origin: top; }
  .route.route-veel .route-step { padding: 0 0 34px; }
  .route.route-veel .route-step:last-child { padding-bottom: 0; }
  .route.route-veel .route-dot { left: -44px; top: 0; }
}

/* ==========================================================================
   INSTRUCTEURS – kaart in de vorm van een rijbewijspas
   ========================================================================== */
.instr-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .instr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .instr-grid { grid-template-columns: repeat(3, 1fr); } }

/* Eén instructeur in een raster voor drie ziet er verloren uit: een smal
   kaartje links met tweederde witruimte ernaast. Bij een eenmanszaak — en dat
   is de meeste rijscholen — krijgt de kaart daarom meer breedte en een grotere
   fotokolom, zodat het portret ook echt een portret is. */
/* Ook het raster zelf terug naar één kolom. Alleen een max-width zetten hielp
   niet: het raster bleef driekoloms, de kaart kreeg een kolom van 186px, en de
   fotokolom van 210px duwde het hele tekstblok naar nul breedte. Er stond een
   pasfoto zonder naam, rol of lesauto. */
.instr-grid:has(> .instr:only-child) { max-width: 560px; grid-template-columns: 1fr; }
.instr-grid > .instr:only-child { grid-template-columns: 210px 1fr; }
.instr-grid > .instr:only-child .instr-body { padding: 24px 24px 24px 26px; justify-content: center; }
/* En hoogte, anders knijpt de kaart het staande portret tot een reepje. Bij één
   instructeur is de kaartinhoud kort (naam, rol, lesauto) en zakte de hoogte
   naar negentig pixels: je zag een kin en een T-shirt. */
.instr-grid > .instr:only-child { min-height: 260px; }
/* Op een telefoon past 210px foto + tekst niet: op 360px was de kaart 324px breed en
   viel de tekst (rol, lesauto, talen) er rechts af. Daar stapelen: foto boven, tekst eronder. */
@media (max-width: 559px) {
  .instr-grid > .instr:only-child { grid-template-columns: 1fr; min-height: 0; }
  .instr-grid > .instr:only-child .instr-photo .ph { height: auto; aspect-ratio: 4/3; }
  .instr-grid > .instr:only-child .instr-photo .ph img { object-position: center 25%; }
  .instr-grid > .instr:only-child .instr-body { padding: 20px; }
}

.instr {
  position: relative; overflow: hidden; border-radius: var(--r);
  background: var(--white); border: 1.5px solid var(--ink);
  display: grid; grid-template-columns: 128px 1fr; gap: 0;
}
@media (min-width: 380px) { .instr { grid-template-columns: 150px 1fr; } }
.instr-photo { position: relative; }
.instr-photo .ph { height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; background: var(--paper-2); }
.instr-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: var(--accent); }
.instr-body { padding: 18px 18px 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.instr-body .mono { font-size: 13px; letter-spacing: .06em; }
.instr-body h3 { font-size: 22px; margin: 2px 0 6px; }
.instr-rows { display: grid; gap: 5px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.instr-row { display: flex; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--mute); }
.instr-row b { color: var(--ink); font-weight: 500; min-width: 62px; }
.instr-quote { margin-top: 10px; font-size: 15px; line-height: 1.4; }
.instr-quote::before { content: "\201C"; }
.instr-quote::after  { content: "\201D"; }

/* ==========================================================================
   REVIEWS (Google)
   ========================================================================== */
.rev-hd { display: grid; gap: 20px; align-items: end; margin-bottom: clamp(26px,4vw,42px); }
@media (min-width: 860px) { .rev-hd { grid-template-columns: minmax(0,1fr) auto; } }
.rev-score { display: flex; align-items: center; gap: 16px; }
.rev-score b { font-family: var(--font-display); font-weight: 800; font-size: clamp(46px,7vw,72px); letter-spacing: -0.05em; line-height: .82; font-variant-numeric: tabular-nums; }
.stars { color: var(--accent); letter-spacing: .06em; font-size: 17px; white-space: nowrap; }
/* #E8A400 haalde maar 1,91 op de papierkleur; een grafisch element heeft 3,0
   nodig. Dit goud haalt 3,60 op papier en 4,07 op wit. */
.sec:not(.sec-dark) .stars { color: #A87400; }
.rev-score span { display: block; font-size: 14px; color: var(--mute); margin-top: 6px; }

.rev-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(266px, 84vw);
  gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 14px; margin: 0 calc(var(--gut) * -1); padding-left: var(--gut); padding-right: var(--gut);
  scrollbar-width: none;
}
.rev-rail::-webkit-scrollbar { display: none; }
@media (min-width: 760px)  { .rev-rail { grid-auto-columns: 360px; cursor: grab; } }
.rev {
  scroll-snap-align: start; background: var(--white); border: 1.5px solid var(--line);
  border-radius: var(--r); padding: clamp(20px,2.6vw,28px); display: flex; flex-direction: column; gap: 12px;
}
.sec-dark .rev { background: var(--ink-2); border-color: var(--line-d); }
.rev p { font-size: 16px; line-height: 1.5; }
.rev-who { margin-top: auto; display: flex; align-items: center; gap: 11px; padding-top: 6px; }
.rev-av { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font: 700 15px/1 var(--font-display); }
.rev-who b { display: block; font-size: 15px; font-weight: 600; }
.rev-who span { display: block; font-family: var(--font-mono); font-size: 13px; color: var(--mute); margin-top: 2px; }
/* De initialen staan ook in een <span>; .rev-who span won van .rev-av en zette ze
   naast het rondje (kitfout, onzichtbaar zolang er nooit reviews waren). */
.rev-who .rev-av { display: grid; font: 700 15px/1 var(--font-display); color: var(--accent-ink); margin-top: 0; }
.rev-src { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 14px; color: var(--mute); }
.g-mark { font: 700 15px/1 var(--font-display); letter-spacing: -0.04em; }
.g-mark i { font-style: normal; }
.g-mark i:nth-child(1){color:#4285F4} .g-mark i:nth-child(2){color:#EA4335} .g-mark i:nth-child(3){color:#FBBC05}
.g-mark i:nth-child(4){color:#4285F4} .g-mark i:nth-child(5){color:#34A853} .g-mark i:nth-child(6){color:#EA4335}

/* ==========================================================================
   CTA-BAND
   ========================================================================== */
.cta { background: var(--accent); color: var(--accent-ink); padding: clamp(52px, 8vw, 110px) 0; }
.cta h2 { max-width: 18ch; }
.cta p { max-width: 52ch; margin: 18px 0 30px; font-size: clamp(16px,2vw,19px); }
.cta .btn { border-color: var(--accent-ink); }
.cta .btn-ghost { color: var(--accent-ink); }
.cta-in { display: grid; gap: 26px; }
@media (min-width: 900px) { .cta-in { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); align-items: center; } .cta .btns { justify-content: flex-end; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { border-top: 1px solid var(--line); max-width: 900px; }
.sec-dark .faq { border-color: var(--line-d); }
.faq-item { border-bottom: 1px solid var(--line); }
.sec-dark .faq-item { border-color: var(--line-d); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: none; border: 0; padding: 22px 0; cursor: pointer; text-align: left; color: inherit;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(18px,2.4vw,23px); letter-spacing: -0.025em; line-height: 1.15;
}
.faq-q .ms { flex: none; transition: transform .3s var(--ease); }
.faq-item.open .faq-q .ms { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 0 24px; max-width: 62ch; color: var(--ink-3); }
.sec-dark .faq-a p { color: var(--mute-d); }

/* ==========================================================================
   FORMULIER
   ========================================================================== */
.form { display: grid; gap: 16px; }
.form label { display: grid; gap: 7px; font-size: 14px; font-weight: 500; }
.form input, .form select, .form textarea {
  font: 400 16.5px/1.4 var(--font-body); color: var(--ink);
  padding: 15px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white);
  width: 100%; transition: border-color .2s;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--ink); }
.form .err { border-color: #D63B2F; background: #FFF6F5; }
.form-row { display: grid; gap: 16px; }
@media (min-width: 620px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-msg { font-size: 13.5px; color: var(--mute); margin: 0; }
.form-ok { background: var(--accent); color: var(--accent-ink); border-radius: var(--r); padding: 26px; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; }
.choice { display: grid; gap: 10px; }
@media (min-width: 620px) { .choice { grid-template-columns: repeat(3, 1fr); } }
.choice label {
  border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer;
  display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 500; background: var(--white);
  transition: border-color .2s, background .2s;
}
.choice input { width: auto; accent-color: var(--ink); }
.choice label:has(input:checked) { border-color: var(--ink); background: var(--accent); }

/* ==========================================================================
   PAGINAKOP (subpagina's)
   ========================================================================== */
.pghd { background: var(--ink); color: var(--white); padding: calc(66px + var(--topbar-h) + clamp(34px,6vw,60px)) 0 clamp(44px,7vw,86px); }
@media (min-width: 900px) { .pghd { padding-top: calc(86px + var(--topbar-h) + clamp(34px,5vw,60px)); } }
.pghd .mono { display: block; margin-bottom: 16px; }
.pghd h1 { max-width: 15ch; font-size: clamp(42px, 8vw, 92px); }
.pghd .lead { margin-top: 20px; }
.pghd .btns { margin-top: 30px; }

/* twee kolommen: tekst + zijblok */
.split { display: grid; gap: clamp(28px,4vw,56px); }
@media (min-width: 940px) { .split { grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); align-items: start; } }
.side-box { background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r); padding: clamp(22px,3vw,30px); display: grid; gap: 14px; position: sticky; top: 100px; }
.side-box h3 { font-size: 22px; }
.side-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.side-box li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15.5px; }
.side-box li .ms { font-size: 20px; color: var(--ok); }

.c-blocks { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
@media (min-width: 640px) { .c-blocks { grid-template-columns: 1fr 1fr; } }
.c-block { background: var(--paper); padding: 22px clamp(18px,2.4vw,26px); display: grid; gap: 6px; }
.c-block .mono { font-size: 13px; letter-spacing: .06em; }
/* Het nummer en het mailadres in de contactblokken zijn links; die moeten met
   een duim te raken zijn. */
.c-block a { display: inline-flex; align-items: center; min-height: 36px; }
.c-block a, .c-block span { font-size: 17px; font-weight: 500; line-height: 1.4; }
.map { border-radius: var(--r); overflow: hidden; border: 1.5px solid var(--ink); aspect-ratio: 16/10; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(1.06); }

.prose { max-width: 66ch; }
.prose p { font-size: 17.5px; line-height: 1.62; color: var(--ink-3); }
.prose h3 { margin: 36px 0 12px; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips li { border: 1px solid var(--line); border-radius: 999px; padding: 9px 15px; font-size: 14.5px; }
.chips li.base { background: var(--ink); color: var(--white); border-color: var(--ink); }
.sec-dark .chips li { border-color: var(--line-d); }

.values { display: grid; gap: 16px; }
@media (min-width: 760px) { .values { grid-template-columns: repeat(3, 1fr); } }
.value { border-top: 3px solid var(--ink); padding-top: 16px; }
.value b { display: block; font-family: var(--font-display); font-size: 20px; letter-spacing: -0.03em; margin-bottom: 8px; }
.value p { font-size: 15.5px; color: var(--ink-3); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ft { background: var(--ink); color: var(--white); padding: clamp(48px,6vw,84px) 0 30px; }
.ft .logo { color: var(--white); }
.ft .logo small { color: var(--mute-d); }
.ft-in { display: grid; gap: 34px; }
@media (min-width: 860px) { .ft-in { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; } }
/* Menulinks in de voettekst waren 20px hoog: te klein om met een duim te
   raken. 36px is de ondergrens die we bij prospects ook meten. Geldt ook voor
   de privacy- en voorwaardenlinks onderaan en het menu op de telefoon. */
.ft-col a, .mnav-foot a { display: inline-flex; align-items: center; min-height: 36px; }
.ft .ft-kop { margin: 0 0 14px; line-height: 1.4; font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute-d); }
.ft a { display: block; padding: 5px 0; font-size: 15.5px; color: var(--mute-d); transition: color .2s; }
.ft a:hover { color: var(--accent); }
.ft-tagline { margin-top: 16px; max-width: 34ch; color: var(--mute-d); font-size: 15.5px; }
.ft-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line-d); display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 13px; color: var(--mute-d); }
/* Deze regel stond na de aanraakvlakregel hierboven en won daarvan, waardoor
   Privacy en Algemene voorwaarden 20px hoog bleven. */
.ft-bottom a { display: inline-flex; align-items: center; min-height: 36px; padding: 0; font: inherit; letter-spacing: inherit; }
/* De credit staat in de lopende tekst naast KvK en btw: gewone regelhoogte, geen aanraakvlak van 36px. */
.ft-bottom a.ft-credit { display: inline; min-height: 0; text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   SCROLL-REVEAL
   ========================================================================== */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.js .hero-in .rv { transform: translateY(30px); }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .btn:hover, .pk:hover { transform: none; }
}

/* ==========================================================================
   COOKIEBANNER (inc/cookies.php): onderaan, boven de mobiele actiebalk
   ========================================================================== */
.cc-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 95; max-width: 540px; margin: 0 auto; background: var(--ink-2); color: var(--white); border: 1px solid var(--line-d); border-radius: 16px; padding: 18px 20px; box-shadow: 0 14px 44px rgba(0,0,0,.35); transform: translateY(160%); transition: transform .4s var(--ease, ease); }
.cc-banner.is-on { transform: translateY(0); }
.cc-banner p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--mute-d); }
.cc-banner p a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.cc-banner__rij { display: flex; flex-wrap: wrap; gap: 10px; }
.cc-banner__rij .btn { flex: 1 1 auto; justify-content: center; }
@media (max-width: 899px) { .cc-banner { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .cc-banner { transition: none; } }