/* ==========================================================================
   RIJSCHOOL WEBSITE TEMPLATE - MODERN CSS
   Geen externe libraries, puur CSS met custom properties, clamp() en color-mix()
   ========================================================================== */

/* Reset & Box Sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-family, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  color: var(--color-ink, #0F1B2D);
  background-color: var(--color-bg, #F5F8FC);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* Accessibility: Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--color-ink, #0F1B2D);
  color: #FFFFFF;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm, 8px);
  z-index: 9999;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 1rem;
  outline: 3px solid var(--color-accent, #FFC533);
}

/* Focus styles */
:focus-visible {
  outline: 3px solid var(--color-primary, #123E8C);
  outline-offset: 3px;
}

/* Typografie.
   Geen externe fonts (bewust: performance + AVG). De identiteit komt uit
   gewicht, schaal, letterafstand en leesbreedte, niet uit een webfont. */
h1, h2, h3, h4 {
  color: var(--color-ink, #0F1B2D);
  line-height: 1.2;
  font-weight: 700;
  text-wrap: balance;
  letter-spacing: -0.03em;
}

h1 {
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  letter-spacing: -0.028em;
  line-height: 1.15;
}

h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  letter-spacing: -0.015em;
  line-height: 1.3;
}

p {
  color: var(--color-ink-muted, #3A4759);
  font-size: clamp(1rem, 1.05vw, 1.1rem);
  max-width: 68ch;
  line-height: 1.7;
}

p.lead {
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--color-ink, #0F1B2D);
}

a {
  color: var(--color-primary, #123E8C);
  text-decoration: none;
  transition: color 0.18s ease;
}

a:hover {
  color: var(--color-primary-hover, #0A2454);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Layout Utilities */
.container {
  width: 100%;
  max-width: var(--container-max, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 3.5vw, 2rem);
  padding-right: clamp(1rem, 3.5vw, 2rem);
}

.section {
  /* De goedgekeurde versie houdt een ruime, constante sectieritme aan:
     gemeten is ±104-109px boven en onder op een 1440px-viewport. */
  padding-top: clamp(3.5rem, 7.5vw, 6.75rem);
  padding-bottom: clamp(3.5rem, 7.5vw, 6.75rem);
  position: relative;
}

/*
  Sectieritme.
  De pagina draait op één rustige achtergrond. Secties wisselen van kleur om een
  hoofdstuk te markeren, niet om een patroon te maken:
    (standaard)  licht          = rustige doorloop
    --tint       subtiel getint  = zachte wissel
    --paper      wit            = expliciet vlak (trustbar, reviews, werkgebied)
    --ink        donkerblauw    = het afsluitende anker (CTA-banner)
*/
.section--tint {
  background-color: var(--color-surface-subtle, #EEF3F9);
}
.section--alt {
  background-color: var(--color-card-bg, #FFFFFF);
}
.section--paper {
  background-color: var(--color-card-bg, #FFFFFF);
}
.section--ink {
  background-color: var(--color-primary, #123E8C);
  color: rgba(255, 255, 255, 0.86);
}
.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4 {
  color: #FFFFFF;
}
.section--ink .section-eyebrow {
  color: var(--color-accent, #FFC533);
}
.section--ink .section-eyebrow::before {
  background-color: var(--color-accent, #FFC533);
}

/* Rustiger voor juridische en bedrijfsteksten: leesbaarheid gaat voor
   advertentieritiek. */
.section--document {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Iets dichter sectieritme voor inhoudspagina's met veel blokken (nu /over-ons/).
   Modificator naast .section, dus de basis blijft ongewijzigd. */
.section--compact {
  padding-top: clamp(2.75rem, 6vw, 5.25rem);
  padding-bottom: clamp(2.75rem, 6vw, 5.25rem);
}

.section-header {
  margin-bottom: clamp(2rem, 4.5vw, 3.5rem);
}

.section-header--center {
  text-align: center;
}

.section-header--center p {
  margin-left: auto;
  margin-right: auto;
}

/* Links uitgelijnd kopblok: ritme zonder overal de Centered-default te herhalen. */
.section-header--left {
  display: grid;
  gap: 0.5rem;
  max-width: 42rem;
}
.section-header--left .section-eyebrow {
  margin-bottom: 0.25rem;
}

/* Eyebrow met accentstreep in het merkgeel: één grafisch detail dat de
   pagina herkenbaar maakt zonder overal een pill te plakken. */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary, #123E8C);
  margin-bottom: 0.75rem;
}
.section-eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 3px;
  border-radius: 2px;
  background-color: var(--color-accent, #FFC533);
  flex-shrink: 0;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Grid & Flex Helpers */
.grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.grid--2 {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}

.grid--3 {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.grid--4 {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease,
              border-color 0.2s ease;
  min-height: 48px;
}

.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.26) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
}

.btn:hover {
  transform: translateY(-2px);
}
.btn:hover::after {
  left: 180%;
  transition: left 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

/* Primary CTA: Accent Yellow with dark ink text (Contrast > 11:1) */
.btn--primary {
  background-color: var(--color-accent, #FFC533);
  color: var(--color-ink, #0F1B2D);
  border-color: color-mix(in srgb, var(--color-accent) 80%, #000);
  box-shadow: 0 4px 12px rgba(255, 197, 51, 0.35);
}
.btn--primary:hover {
  background-color: var(--color-accent-hover, #F0B31E);
  color: var(--color-ink, #0F1B2D);
  box-shadow: 0 8px 22px rgba(255, 197, 51, 0.45);
}

/* Secondary Button: Navy Primary */
.btn--secondary {
  background-color: var(--color-primary, #123E8C);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(18, 62, 140, 0.25);
}
.btn--secondary:hover {
  background-color: var(--color-primary-hover, #0A2454);
  color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(18, 62, 140, 0.38);
}

/* BEL-KNOP: de gedeelde variant voor alle echte "Bel"-knoppen.
   De bel-knoppen gebruikten tot nu toe `btn--outline`: transparant vlak met
   een 1px rand. Op de lichtblauwe homepagehero en de lichte mobiele
   lade-kleur liep dat vlak visueel weg tegen de ondergrond: gemeten
   contrast van de knop tegen zijn eigen sectie was 1.00:1, dus de knop
   onderscheidde zich niet.

   Hiervoor is een eigen variant toegevoerd in plaats van `btn--outline`
   of `btn--secondary` te wijzigen: `btn--outline` wordt op veel andere
   plaatsen gebruikt (tarieven, pakketkaarten, 404, city-CTA's) en die
   moeten onveranderd blijven. `btn--secondary` is bovendien gereserveerd
   voor het gemarkeerde pakket.

   De kleur is geen nieuwe kleur maar het bestaande primary-token
   (--color-primary, #123E8C), hetzelfde donkerblauw dat de site al
   gebruikt voor het koppelblok, de kaarticonen en de city-kaarten.
   Wit erop geeft 9.9:1, ruim boven de 4.5:1 die WCAG AA vraagt voor
   knoptekst. Hover/focus gebruiken de bestaande primary-hover-token, net
   als btn--secondary, zodat de bestaande hoverconventie klopt. */
.btn--call {
  background-color: var(--color-primary, #123E8C);
  color: #FFFFFF;
  border-color: var(--color-primary, #123E8C);
  box-shadow: 0 4px 14px rgba(18, 62, 140, 0.25);
}
.btn--call:hover {
  background-color: var(--color-primary-hover, #0A2454);
  color: #FFFFFF;
  border-color: var(--color-primary-hover, #0A2454);
  box-shadow: 0 8px 24px rgba(18, 62, 140, 0.38);
}
.btn--call:focus-visible {
  outline: 3px solid var(--color-primary, #123E8C);
  outline-offset: 3px;
}

/* Secondary: WhatsApp. De donkergroene kleur draagt het onderscheid, niet
   een schaduw. Zo blijft de gele primary de enige "zware" actie op een pagina. */
.btn--whatsapp {
  background-color: var(--color-wa-dark, #075E54);
  color: #FFFFFF;
  box-shadow: none;
}
.btn--whatsapp:hover {
  background-color: #054840;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(7, 94, 84, 0.2);
}

/* Tertiary: outline. Volledig vlak; alleen de lijn geeft hem vorm. */
.btn--outline {
  background-color: transparent;
  color: var(--color-ink, #0F1B2D);
  border-color: var(--color-border, rgba(15, 27, 45, 0.15));
  box-shadow: none;
}
.btn--outline:hover {
  background-color: var(--color-card-bg, #FFFFFF);
  border-color: var(--color-ink, #0F1B2D);
}

.btn--sm {
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  min-height: 40px;
}

/* Demo Mode Top Banner */
.demo-banner {
  background-color: #1E293B;
  color: #F8FAFC;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 1100;
}
.demo-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
}
.demo-banner a {
  color: var(--color-accent, #FFC533);
  text-decoration: underline;
  font-weight: 600;
}
.demo-banner__close {
  background: none;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  padding: 0.25rem;
  font-size: 1.1rem;
  line-height: 1;
}
.demo-banner__close:hover {
  color: #FFFFFF;
}

/* Header & Top Navigation Bar (Strict 3-zone contract) */
/* Sticky header.
   De backdrop-filter is bewust verwijderd: op een sticky element dwingt die
   compositing bij elke scrollframe af (meetbaar nadeel op mobiel) en de
   semi-transparante "glass"-uitstraling is precies het AI-signaal dat we
   hier juist willen kwijtraken. De header is nu volledig dekkend. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color-card-bg, #FFFFFF);
  border-bottom: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
  border-bottom: 1px solid var(--color-border, rgba(15, 27, 45, 0.08));
  height: 76px;
  display: flex;
  align-items: center;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Zone 1: Brand Wordmark */
.site-header__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.site-header__logo {
  height: 42px;
  width: auto;
}

/* Zone 2: Navigation Links */
.site-header__nav {
  display: none;
}
@media (min-width: 960px) {
  .site-header__nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
  }
}
.nav-link {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-ink, #0F1B2D);
  padding: 0.25rem 0;
  position: relative;
  transition: color 0.2s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary, #123E8C);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover, .nav-link.active {
  color: var(--color-primary, #123E8C);
}
.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

/* Zone 3: Primary Actions */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Mobiel bel-icoon in de header. Ook dit is een echte "Bel"-knop (tel:-link),
   dus hij volgt dezelfde gedeelde bel-kleur als .btn--call. Zelfde maat,
   radius, icon en positie; alleen de vlak- en tekstkleur veranderen, zodat
   het icoon zich tegen de witte header onderscheidt. */
.site-header__call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm, 8px);
  background-color: var(--color-primary, #123E8C);
  color: #FFFFFF;
  border: 1px solid var(--color-primary, #123E8C);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.site-header__call-btn:hover {
  background-color: var(--color-primary-hover, #0A2454);
  border-color: var(--color-primary-hover, #0A2454);
  color: #FFFFFF;
}
@media (min-width: 960px) {
  .site-header__call-btn {
    display: none;
  }
}

.site-header__desktop-wa {
  display: none;
}
@media (min-width: 960px) {
  .site-header__desktop-wa {
    display: inline-flex;
  }
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
}
@media (min-width: 960px) {
  .menu-toggle {
    display: none;
  }
}
.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-ink, #0F1B2D);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Mobile Drawer Navigation */
/* Modale scrim achter de mobiele drawer. Zonder blur: dat zou een
   volledig scherm verwerken bij elke scroll, wat op mobiel merkbaar is.
   De dimming alleen is voldoende om de dialoogcontext te markeren. */
.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 27, 45, 0.55);
  z-index: 1050;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mobile-nav-backdrop.is-open {
  display: block;
  opacity: 1;
}

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(85vw, 360px);
  height: 100vh;
  background-color: var(--color-card-bg, #FFFFFF);
  z-index: 1100;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
}
.mobile-nav-drawer.is-open {
  transform: translateX(0);
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.mobile-nav-links a {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-ink, #0F1B2D);
}

.mobile-nav-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
}

/* Hero Section */
/* Hero.
   Structuur blijft (tekst links, foto rechts, badge, H1, lead, 2 CTA's).
   Gewijzigd: de foto is groter en asymmetrisch geplaatst, heeft een gele
   accentbalk en geen "kaart"-behandeling meer. De tekstkolom krijgt een
   begrensde leesbreedte zodat de H1 niet over de hele container uitloopt. */
.hero {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: linear-gradient(180deg, var(--color-bg, #F5F8FC) 0%, rgba(245, 248, 252, 0.5) 100%);
  position: relative;
  overflow: hidden;
}
/* Subtiele warmte vanuit het merkgeel, linksboven: geeft de pagina een
   eigen sfeer zonder gradient-overload of blob-art. */
.hero::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -12%;
  width: 55%;
  height: 130%;
  background: radial-gradient(closest-side, rgba(255, 197, 51, 0.10), transparent 72%);
  pointer-events: none;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  position: relative;
}
@media (min-width: 960px) {
  .hero__grid {
    /* Iets meer gewicht naar de tekst, de foto steekt uit */
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 34rem;
}

/* Hero-introtekst (alleen de homepage). De losse zin "Geen verrassingen,
   wél een hoog slagingspercentage." moet, waar de beschikbare breedte dit
   toelaat, als logisch geheel op één regel blijven en "Geen" mag niet
   eenzaam aan het einde van de vorige regel achterblijven.
   `text-wrap: balance` verdeelt de woorden gelijkmatiger over de regels en
   lost dat op zonder vaste breedtes te forceren. Het is puur een
   regelafbreking-truc: de tekst zelf blijft ongewijzigd, er kan geen
   horizontale overflow ontstaan en op smalle schermen (waar de browser niet
   balanceert) blijft het gedrag identiek aan voorheen. */
main.page-home .hero__content > .lead {
  text-wrap: balance;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary, #123E8C);
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
  border-radius: var(--radius-sm, 6px);
  padding: 0.4rem 0.7rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* De drie CTA's van de HOME-hero op één regel zodra dat fysiek past.

   Meting (vóór): de drie knoppen zijn 169px + 224,58px + 179,56px = 573,14px
   en met twee gaps van 12px is dat 597,14px. De tekstkolom is echter:
     - max 544px, door `max-width: 34rem` op .hero__content;
     - 477,13px op 1024px, door de 1.05fr-track van .hero__grid.
   Op 1024px, 1152px, 1280px, 1440px en 1574px is dat 53 tot 120px te weinig,
   dus de "Bel"-knop breekt naar een tweede regel af.

   Oplossing binnen de bestaande knoppen, zonder de grid of het beeld te
   raken: vanaf 768px krijgen de drie knoppen iets minder horizontale
   padding (1,6rem -> 1rem) en de rij iets minder gap (0,75rem -> 0,5rem).
   Dat levert 3 x 19,2px + 2 x 4px = 65,6px op, precies genoeg om op
   1152px en breder in één regel te passen:
     - 768px:  544,00px beschikbaar, 531,54px nodig -> 1 regel
     - 1152px: 540,95px beschikbaar, 531,54px nodig -> 1 regel
     - 1280px: 544,00px beschikbaar, 531,54px nodig -> 1 regel
     - 1440px: 544,00px beschikbaar, 531,54px nodig -> 1 regel
     - 1574px: 544,00px beschikbaar, 531,54px nodig -> 1 regel
   Op 1024px blijft 477,13px tegenover 531,54px nodig staan: daar past het
   fysiek niet en blijft de bestaande 2+1-overgang staan, in plaats van de
   knoppen te laten overlopen. Onder 768px verandert er niets: de
   knoppen stapelen met hun huidige, ruime padding.

   Alleen de HOME-hero wordt hiermee geraakt; de plaatspagina's
   (`main.page-city`) houden hun eigen, al gelijkgetrokken hero-CTA-rij en
   de bestaande 960-1151px-uitwijkruimte.

   De knoppen zelf veranderen niet van uiterlijk: kleuren, iconen, tekst,
   font-weight, font-size, border-radius, hoogte (48,38px) en hover- en
   focus-states blijven ongewijzigd; alleen de horizontale padding en de
   gap worden kleiner. */
@media (min-width: 768px) {
  main.page-home .hero__actions {
    gap: 0.5rem;
  }
  main.page-home .hero__actions .btn {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Foto: afgerond beeld met schaduw. Geen uitstekende balk; de gele kleur
   hoort bij de knoppen, niet bij de foto. */
.hero__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: transparent;
  border-radius: var(--radius-lg, 24px);
  overflow: hidden;
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(15, 27, 45, 0.12));
}
.hero__visual img {
  border-radius: var(--radius-lg, 24px);
}
@media (min-width: 960px) {
  .hero__visual {
    aspect-ratio: 5 / 4;
  }
}

/* GEDEELDE HERO-BASIS OP DESKTOP.
   De plaatspagina's (/rijles-utrecht/, /rijles-nieuwegein/, /rijles-zeist/,
   /rijles-houten/, /rijles-maarssen/) delen deze hero. De hoogte werd
   bepaald door de langste lokale intro, waardoor /rijles-utrecht/ op 1440px
   580px hoog was en de overige 556px. Vanaf hierboven geven we de lead een
   gedeelde minimumhoogte van vijf regels, zodat alle plaatspagina's dezelfde
   hero-hoogte hebben terwijl de tekst gewoon zichtbaar blijft.

   min-height, geen height, en em relatief aan de eigen font-size van de
   lead: een zesde regel of een langere intro maakt de hero hoger in plaats
   van de tekst af te knippen.

   De HOME gebruikt .hero ook, maar heeft een andere structuur en is
   expliciet uitgezonderd; daarom staat dit onder main.page-city. */
main.page-city .hero {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 960px) {
  main.page-city .hero__content .lead {
    /* Zes regels x 1.55em. Zes is wat de langste bestaande intro
       (Nieuwegein) nodig heeft in de smalste 2-koloms weergave.
       Een zevende regel laat de hero hoger worden, niet afkappen. */
    min-height: 9.3em;
  }
  main.page-city .hero__content h1 {
    /* Drie regels x 1.08em. In de smalle 2-koloms weergave breekt de langste
       stadnaam ("Nieuwegein") de H1 op drie regels terwijl de kortere namen
       er twee gebruiken. Deze gedeelde minimumhoogte haalt dat verschil weg,
       zodat de badge en de H1 op elke plaatspagina dezelfde Y starten.
       min-height, geen height: een vierde regel laat de hero hoger worden. */
    min-height: 3.24em;
  }
}
/* De CTA-rij is een bestaand probleem in de smalle 2-koloms weergave en komt
   NIET uit de hero-consistentie: de langste knop ("Plan je proefles in
   Nieuwegein") is 281px breed en samen met "Chat via WhatsApp" (196px) en de
   12px gap heeft hij 489px nodig, terwijl de kolom op 1024px 477px is. Op 960px
   is de kolom 445px en loopt de knop 33px over. Daardoor breekt de rij op
   sommige pagina's over twee regels en niet op andere: op 1024px was
   /rijles-nieuwegein/ 654px hoog en de rest 594px, een verschil van 60px.
   Los dit op door in deze smalle band altijd ruimte voor twee rijen te
   reserveren, zodat de vijf plaatshero's daar even hoog zijn. Buiten deze
   band passen de knoppen op een regel en geldt dit niet. Geen wijziging aan
   de knoppen zelf: labels, kleuren en het WhatsApp-nummer blijven ongewijzigd. */
@media (min-width: 960px) and (max-width: 1151px) {
  main.page-city .hero__content .hero__actions {
    min-height: 6.8rem;
  }
}
.hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Trust Bar */
/* Trust / Bewijsstroek
   Vier witte kaarten met rand en schaduw op een witte strook. De cijfers
   krijgen de aandacht, niet de container. */
.trust-bar {
  background-color: var(--color-card-bg, #FFFFFF);
  border-top: 1px solid var(--color-border, rgba(15, 27, 45, 0.08));
  border-bottom: 1px solid var(--color-border, rgba(15, 27, 45, 0.08));
  padding: clamp(1.25rem, 2.5vw, 1.6rem) 0;
}
.trust-bar__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
@media (min-width: 640px) {
  .trust-bar__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .trust-bar__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.25rem;
  background-color: var(--color-card-bg, #FFFFFF);
  border: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
  border-radius: var(--radius-md, 16px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 27, 45, 0.08));
  height: 100%;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.trust-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 20px rgba(15, 27, 45, 0.07));
}
.trust-item:hover .trust-item__icon {
  transform: translateY(-2px);
}

.trust-item__icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 8px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.trust-item__icon--gold {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, rgba(217, 119, 6, 0.22) 100%);
  color: #D97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.trust-item__icon--emerald {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(5, 150, 105, 0.22) 100%);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.trust-item__icon--blue {
  background: linear-gradient(135deg, rgba(18, 62, 140, 0.12) 0%, rgba(30, 90, 195, 0.18) 100%);
  color: var(--color-primary, #123E8C);
  border: 1px solid rgba(18, 62, 140, 0.25);
}
.trust-item__icon--indigo {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(79, 70, 229, 0.2) 100%);
  color: #4F46E5;
  border: 1px solid rgba(99, 102, 241, 0.25);
}

.trust-item__content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.trust-item__val {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--color-ink, #0F1B2D);
  line-height: 1.2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.trust-item__label {
  font-size: 0.82rem;
  color: var(--color-ink-muted, #5A6A80);
  line-height: 1.25;
  font-weight: 500;
}

/* "Schakel & Automaat" op één regel zodra de vier blokken naast elkaar staan
   én er fysiek ruimte voor is.

   Oorzaak van de wrap: dit is de langste van de vier titels. Ongebroken is
   hij 177,72px breed. Het contentvlak van de kaart is de kaartbreedte minus
   40px padding, 2px rand, 44px icon en 16px gap, dus:
     - 1440px: kaart 269px  -> 167,00px beschikbaar, tekort 10,72px
     - 1280px: kaart 269,61px -> 167,61px beschikbaar, tekort 10,11px
     - 1200px: kaart 270,50px -> 168,50px beschikbaar, tekort 9,22px
   De andere drie titels passen ruim ("Vaste instructeur" = 151,09px), dus
   alleen deze ene breekt af.

   Vanaf 1200px is er ook écht ruimte: de titel loopt dan hooguit tot
   9,22px in de 20px rechterpadding van de kaart en blijft dus binnen de
   kaart. Onder 1200px is dat niet zo:
     - 1152px: kaart 259,05px -> 157,06px beschikbaar, tekort 20,66px,
       dus 0,66px buiten de kaart (gemeten overflow 1px);
     - 1024px: kaart 228,48px -> 126,48px beschikbaar, tekort 51,24px,
       dus 32px buiten de kaart (gemeten overflow 32px).
   Zelfs met een gap van 0px is 1024px niet haalbaar: 177,72 + 44 + 40 + 2
   = 263,72px tegenover 228,48px beschikbaar. Dat is alleen op te lossen
   door het font, het icon of de padding te verkleinen, en dat zou de
   drie blokken links hun bestaande grootte en stijl costen. Daarom geldt
   de regel pas vanaf 1200px en blijft de normale wrapping daar vrije keuze:
   de bezoeker leest de titel dan over twee regels in plaats van dat de
   kaart overloopt. Precies de afweging die is gevraagd: geen geforceerde
   overflow, en de normale responsive-layout waar de ruimte ontbreekt.

   De correctie komt niet uit verkleinen van kaart, icon, padding of font:
   die blijven ongewijzigd, zodat de drie blokken links exact hun bestaande
   grootte en stijl houden. Alleen de whitespace van deze ene titel wordt
   vastgezet.

   `minmax(0, 1fr)` voorkomt dat de nowrap-titel de laatste kolom verbreedt
   en de drie kaarten links verkleint: zonder die 0 zou `1fr` uitwijken naar
   de min-content van de langste kaart en werden de andere drie 3,6px smaller
   (265,42px in plaats van 269px). Met `minmax(0, 1fr)` blijven alle vier
   exact even breed. */
@media (min-width: 1024px) {
  .trust-bar__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .trust-item--trans .trust-item__val {
    white-space: nowrap;
  }
}
.trust-item__stars {
  color: #F59E0B;
  letter-spacing: 1px;
  font-size: 0.85rem;
  margin-right: 0.25rem;
}

/* Cards & Surfaces */
/* Kaart: wit vlak met rand, radius en een zachte schaduw. Dat is de basis van
   de goedgekeurde layout — kaarten lezen als kaarten, met hover-lift. */
.card {
  background-color: var(--color-card-bg, #FFFFFF);
  border: 1px solid var(--color-border, rgba(15, 27, 45, 0.08));
  border-radius: var(--radius-md, 16px);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  box-shadow: var(--shadow-md, 0 4px 20px rgba(15, 27, 45, 0.07));
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(15, 27, 45, 0.12));
  border-color: rgba(18, 62, 140, 0.2);
}

/* USP Cards */
/* USP-kaarten: vier gelijkwaardige witte kaarten in één rij. De gekleurde balk
   zit bovenaan de kaart en markeert het thema; de kaart zelf draagt de
   rand, radius en schaduw. */
.grid.usp-grid {
  align-items: stretch;
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
}
@media (min-width: 640px) {
  .grid.usp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .grid.usp-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.usp-card {
  position: relative;
  background-color: var(--color-card-bg, #FFFFFF);
  border: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
  border-radius: var(--radius-md, 16px);
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-md, 0 4px 20px rgba(15, 27, 45, 0.07));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.usp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}
.usp-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(15, 27, 45, 0.12));
}

.usp-card--coach::before { background: linear-gradient(90deg, #123E8C, #3B82F6); }
.usp-card--results::before { background: linear-gradient(90deg, #059669, #10B981); }
.usp-card--trial::before { background: linear-gradient(90deg, #D97706, #FFC533); }
.usp-card--cars::before { background: linear-gradient(90deg, #4F46E5, #818CF8); }

.usp-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.usp-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.usp-card:hover .usp-card__icon {
  transform: translateY(-2px);
}

.usp-card--coach .usp-card__icon {
  background: linear-gradient(135deg, rgba(18, 62, 140, 0.12), rgba(30, 90, 195, 0.2));
  color: var(--color-primary, #123E8C);
  border: 1px solid rgba(18, 62, 140, 0.2);
}
.usp-card--results .usp-card__icon {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(5, 150, 105, 0.22));
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.usp-card--trial .usp-card__icon {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.25));
  color: #D97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.usp-card--cars .usp-card__icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(79, 70, 229, 0.22));
  color: #4F46E5;
  border: 1px solid rgba(99, 102, 241, 0.25);
}

/* USP-pill: een gevulde badge die de kleur van het thema herhaalt. */
.usp-pill {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid transparent;
  line-height: 1.3;
  white-space: nowrap;
}
.usp-pill--blue {
  background-color: rgba(18, 62, 140, 0.08);
  color: #123E8C;
  border-color: rgba(18, 62, 140, 0.2);
}
.usp-pill--emerald {
  background-color: rgba(16, 185, 129, 0.1);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.25);
}
.usp-pill--amber {
  background-color: rgba(245, 158, 11, 0.12);
  color: #B45309;
  border-color: rgba(245, 158, 11, 0.3);
}
.usp-pill--indigo {
  background-color: rgba(99, 102, 241, 0.1);
  color: #4338CA;
  border-color: rgba(99, 102, 241, 0.25);
}

.usp-card__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-ink, #0F1B2D);
  margin-bottom: 0.65rem;
  line-height: 1.25;
}
.usp-card__text {
  font-size: 0.95rem;
  color: var(--color-ink-muted, #5A6A80);
  line-height: 1.55;
  margin-bottom: 1.25rem;
  flex-grow: 1;
}

/* Onderste benefitregel op dezelfde kaartbasis.

   Oorzaak van de afwijkende scheidingslijn: de kaart is een flexkolom met
   `flex-grow: 1` op de tekst, dus de footer zakt naar de onderkant. De
   footer BOTTEM zat daardoor al gelijk, maar de lijn erboven niet:
   "Nieuwe VW Golf & ID.3 met ADAS" breekt over twee regels, waardoor die
   footer 56,59px hoog is tegenover 35,59px bij de andere drie. Die 21px
   extra hoogte duwt de lijn omhoog: gemeten 1613,91px tegenover 1634,91px
   op 1440px, precies 21px verschil.

   Oplossing binnen de bestaande flex-architectuur: de scheidingslijn
   wordt een eigen flex-item met `margin-top: auto` en een vaste
   minimale hoogte, en de footer zelf krijgt `flex: 1`. Daardoor:
     - de lijn staat op dezelfde Y in alle kaarten van dezelfde rij;
     - de footer-tekst begint op dezelfde basis, ook als hij twee regels
       nodig heeft;
     - de kaarten blijven even hoog en gelijkwaardig.

   De minimale hoogte is bewust gekoppeld aan de kaartpadding en de
   kaart-eigen font, niet aan een hard aantal pixels: de kaart-padding
   is 1,5rem onderaan en de footer-tekst is 0,82rem. Zo blijft de lijn
   netjes op de kaartbasis en is er geen extra lege zone.

   Onder 1024px staan de kaarten onder elkaar en geldt de regel niet:
   daar is de footer weer natuurlijk hoog en wordt geen ruimte afgedwongen. */
@media (min-width: 1024px) {
  .usp-card__footer {
    /* 0,85rem padding-top + 1px lijn + twee regels x 0,82rem x 1,6 lijnhoogte */
    min-height: calc(0.85rem + 1px + 2 * 1.6 * 0.82rem);
    align-items: flex-start;
  }
}

.usp-card__footer {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary, #123E8C);
}
.usp-card__check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.usp-card--coach .usp-card__check { background: rgba(18, 62, 140, 0.1); color: #123E8C; }
.usp-card--results .usp-card__check { background: rgba(16, 185, 129, 0.12); color: #059669; }
.usp-card--trial .usp-card__check { background: rgba(245, 158, 11, 0.15); color: #D97706; }
.usp-card--cars .usp-card__check { background: rgba(99, 102, 241, 0.12); color: #4F46E5; }

/* Step Route / Steps Process ("De route naar je rijbewijs") */
/* Stappenplan: vier witte kaarten in één rij. Het nummer staat in een
   donkerblauwe cirkel bovenin de kaart; er loopt geen verbindingslijn door
   de kaarten heen. */
.steps-route {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
}
@media (min-width: 640px) {
  .steps-route {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .steps-route {
    grid-template-columns: repeat(4, 1fr);
  }
}
.step-card {
  position: relative;
  background-color: var(--color-card-bg, #FFFFFF);
  border: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
  border-radius: var(--radius-md, 16px);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-md, 0 4px 20px rgba(15, 27, 45, 0.07));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.step-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(15, 27, 45, 0.12));
}
/* Nummer: donkerblauwe cirkel, witte cijfers */
.step-card__num {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  background-color: var(--color-primary, #123E8C);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.15rem;
  flex-shrink: 0;
  transition: background-color 0.25s ease;
}
.step-card:hover .step-card__num {
  background-color: var(--color-accent, #FFC533);
  color: var(--color-ink, #0F1B2D);
}
.step-card__body {
  min-width: 0;
}
.step-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
  line-height: 1.3;
}
.step-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-ink-muted, #55627A);
  margin: 0;
}

/* Packages Grid & Cards */
/* Pakketkaarten: hier IS een kaart functioneel, want de bezoeker moet drie
   aanbiedingen naast elkaar vergelijken. Witte kaart met rand en schaduw. */
.package-card {
  border-radius: var(--radius-md, 16px);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background-color: var(--color-card-bg, #FFFFFF);
  border: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
  box-shadow: var(--shadow-md, 0 4px 20px rgba(15, 27, 45, 0.07));
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease;
}
.package-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(15, 27, 45, 0.12));
  border-color: rgba(18, 62, 140, 0.32);
}
/* Het gemarkeerde pakket mag wél diepte hebben: dat is precies zijn taak. */
.package-card--highlighted {
  border: 2px solid var(--color-primary, #123E8C);
  box-shadow: 0 6px 20px rgba(18, 62, 140, 0.14);
}
.package-card--highlighted:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(18, 62, 140, 0.2);
}
.package-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-accent, #FFC533);
  color: var(--color-ink, #0F1B2D);
  font-weight: 800;
  font-size: 0.8rem;
  padding: 0.35rem 1rem;
  border-radius: var(--radius-full, 9999px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
}
.package-card__header {
  margin-bottom: 1.25rem;
}
.package-card__title {
  font-size: 1.5rem;
  font-weight: 800;
}
.package-card__price-wrap {
  margin: 1rem 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.package-card__price {
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--color-ink, #0F1B2D);
  line-height: 1;
}
.package-card__lessons {
  font-size: 0.9rem;
  color: var(--color-ink-muted, #5A6A80);
}
.package-card__features {
  list-style: none;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-grow: 1;
}
.package-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: var(--color-ink, #0F1B2D);
}
.package-card__features svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-success, #15803D);
}
.package-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: auto;
}
/* De pakket-CTA's mogen breken: een nowrap-label ("Pakket kiezen & proefles
   plannen") maakte de kolom breder dan de grid toelaat en gaf horizontale
   overflow op 320px en 1024px. Op brede schermen blijft de knop één regel. */
.package-card__actions .btn {
  white-space: normal;
}

/* Rates Table */
.rates-table-wrap {
  background-color: var(--color-card-bg, #FFFFFF);
  border: 1px solid var(--color-border, rgba(15, 27, 45, 0.08));
  border-radius: var(--radius-md, 16px);
  overflow: hidden;
}
.rates-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.rates-table th, .rates-table td {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--color-border, rgba(15, 27, 45, 0.06));
}
.rates-table th {
  background-color: var(--color-surface-subtle, #F0F4FA);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-ink, #0F1B2D);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rates-table td {
  font-size: 1rem;
  color: var(--color-ink, #0F1B2D);
}
.rates-table td.rate-price {
  font-weight: 700;
  color: var(--color-primary, #123E8C);
  text-align: right;
  white-space: nowrap;
}
/* Op smalle schermen mag het tarief afbreken: de wrap klipt bij
   overflow: hidden, dus een nowrap-kolom werd afgekapt (o.a. de lange
   CBR- en proeflesteksten). Blijft op 768px+ exact zoals voorheen. */
@media (max-width: 640px) {
  .rates-table th, .rates-table td {
    padding: 0.9rem 1rem;
  }
  .rates-table td.rate-price {
    white-space: normal;
  }
}

/* Reviewlijst: volle containerbreedte op een wit vlak. Elke review is een rij
   met een scheidingslijn erboven — geen kaartlijst, maar een reeks stemmen. */
.review-list {
  display: flex;
  flex-direction: column;
}
.review-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background-color: transparent;
  border: 0;
  border-top: 1px solid var(--color-border, rgba(15, 27, 45, 0.12));
  border-radius: 0;
  padding: 1.4rem 0;
  box-shadow: none;
}
.review-list .review-card:last-child {
  border-bottom: 0;
}
.review-stars {
  display: flex;
  gap: 3px;
  color: #D97706;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}
.review-text {
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-ink, #0F1B2D);
  flex-grow: 1;
}
.review-author {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.85rem;
}
.review-author__name {
  font-weight: 700;
  color: var(--color-ink, #0F1B2D);
}
.review-author__meta {
  color: var(--color-ink-muted, #708096);
}

/* Instructeurs & Lesauto's.
   Witte kaart met rand, radius en schaduw. De foto vult de bovenkant van de
   kaart; de tekst volgt in een eigen tekstblok met padding. Instructeurfoto's
   zijn vierkant (600x600) en blijven vierkant: dat houdt het gezicht heel. */
.person-card, .car-card {
  border-radius: var(--radius-md, 16px);
  overflow: hidden;
  background-color: var(--color-card-bg, #FFFFFF);
  border: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
  box-shadow: var(--shadow-md, 0 4px 20px rgba(15, 27, 45, 0.07));
  display: flex;
  flex-direction: column;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.person-card:hover, .car-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(15, 27, 45, 0.12));
}
.person-card__img, .car-card__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-surface-subtle, #EEF3F9);
  margin-bottom: 0;
}
.person-card__img img, .car-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.person-card:hover .person-card__img img,
.car-card:hover .car-card__img img {
  transform: scale(1.03);
}
.person-card__body, .car-card__body {
  /* Tekst in een eigen blok onder de foto, met de kaartpadding erboven. */
  padding: 1.25rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-grow: 1;
}
.person-card__role {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary, #123E8C);
}
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
}
.tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-ink-muted, #3A4759);
  background-color: var(--color-surface-subtle, #F0F4FA);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-sm, 8px);
}

/* FAQ Accordion */
/* FAQ: losse witte kaarten met tussenruimte, i.p.v. een doorlopende lijst.
   Native <details>/<summary> blijft de enige interactie. */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 860px;
  margin: 0 auto;
}
.faq-item {
  background-color: var(--color-card-bg, #FFFFFF);
  border: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
  border-radius: var(--radius-md, 16px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 27, 45, 0.08));
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.faq-item:hover {
  box-shadow: var(--shadow-md, 0 4px 20px rgba(15, 27, 45, 0.07));
}
.faq-item[open] {
  border-color: rgba(18, 62, 140, 0.3);
  box-shadow: var(--shadow-md, 0 4px 20px rgba(15, 27, 45, 0.07));
}
.faq-summary {
  padding: 1.25rem 1.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-ink, #0F1B2D);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  position: relative;
}
.faq-summary::-webkit-details-marker {
  display: none;
}
.faq-summary svg {
  flex-shrink: 0;
  color: var(--color-ink-muted, #5A6A80);
  transition: transform 0.2s ease;
}
.faq-item[open] .faq-summary svg {
  transform: rotate(180deg);
}
.faq-answer {
  padding: 0 1.75rem 1.5rem;
  color: var(--color-ink-muted, #3A4759);
  font-size: 1rem;
  line-height: 1.7;
}

/* CTA Banner: het donkerblauwe anker, als afgeronde kaart in een lichte
   sectie. De gele bovenbalk loopt over de volle breedte van de kaart. */
.cta-banner {
  background: linear-gradient(135deg, var(--color-primary, #123E8C) 0%, #0A2454 100%);
  color: #FFFFFF;
  border-radius: var(--radius-lg, 24px);
  padding: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(15, 27, 45, 0.12));
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-accent, #FFC533);
}
.cta-banner h2, .cta-banner p {
  color: #FFFFFF;
  margin-left: auto;
  margin-right: auto;
}
.cta-banner h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  margin-bottom: 1rem;
}
.cta-banner p {
  opacity: 0.9;
  font-size: 1.15rem;
  max-width: 55ch;
  margin-bottom: 2rem;
}
.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* Optionele secundaire regel onder de acties (alleen /tarieven/):
   de proefles blijft de primaire CTA, de opfrisles leest als rustige tip. */
.cta-banner__secondary {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  opacity: 0.85;
}
.cta-banner__secondary a {
  color: var(--color-accent, #FFC533);
  font-weight: 700;
  text-decoration: underline;
}
.cta-banner__secondary a:hover {
  color: #FFFFFF;
}

/* Map Click-to-Load Container.
   Een witte kaart met rand en schaduw; de placeholder vult de kaart.
   De click-to-load architectuur zelf blijft ongewijzigd. */
.map-embed-container {
  border-radius: var(--radius-md, 16px);
  overflow: hidden;
  position: relative;
  background-color: var(--color-card-bg, #FFFFFF);
  border: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 27, 45, 0.08));
  aspect-ratio: 16 / 9;
  max-height: 480px;
}
.map-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  gap: 1rem;
}
.map-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  /* De iframe ligt bovenop de placeholder, zodat de container tijdens het
     laden zijn vorm en hoogte houdt en er geen kaart "springt". Zodra de
     kaart geladen is, haalt de JS de placeholder weg en vult de iframe de
     hele container. */
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Laadstatus van de kaart. Geeft aan dat de klik is geregistreerd en dat
   alleen nog de externe Google-resources binnenkomen; voorkomt de
   indruk van een vastgelopen kaart. */
.map-placeholder__status {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-ink-muted, #5A6A80);
  margin: 0;
}
/* Tijdens het laden blijft de knop zichtbaar maar niet meer klikbaar, met
   de bestaande btn--spinner; de bezoeker ziet zo dat er iets bezig is. */
#map-load-btn.is-loading {
  cursor: progress;
  opacity: 0.75;
}

/* Forms & Inputs */
.form-card {
  background-color: var(--color-card-bg, #FFFFFF);
  border: 1px solid var(--color-border, rgba(15, 27, 45, 0.08));
  border-radius: var(--radius-lg, 24px);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 27, 45, 0.06));
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .form-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.form-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-ink, #0F1B2D);
}
.form-label span.req {
  color: #DC2626;
  margin-left: 2px;
}
.form-control {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--color-border, rgba(15, 27, 45, 0.15));
  border-radius: var(--radius-sm, 8px);
  background-color: var(--color-card-bg, #FFFFFF);
  color: var(--color-ink, #0F1B2D);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus {
  border-color: var(--color-primary, #123E8C);
  box-shadow: 0 0 0 3px rgba(18, 62, 140, 0.15);
  outline: none;
}
.form-control.has-error {
  border-color: #DC2626;
  background-color: #FEF2F2;
}
.field-error {
  font-size: 0.85rem;
  color: #DC2626;
  font-weight: 600;
  display: none;
}
.field-error.is-visible {
  display: block;
}

/* Honeypot Spam Prevention */
.honeypot-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0.5rem 0;
}
.checkbox-group input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-primary, #123E8C);
  cursor: pointer;
}
.checkbox-group label {
  font-size: 0.9rem;
  color: var(--color-ink-muted, #3A4759);
  cursor: pointer;
}

/* Form Status Messages */
.form-status {
  padding: 1.25rem;
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 1.5rem;
  display: none;
}
.form-status.is-visible {
  display: block;
}
.form-status--success {
  background-color: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #166534;
}
.form-status--error {
  background-color: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}

/* Floating WhatsApp Button */
.wa-floating-btn {
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom, 24px));
  right: max(24px, env(safe-area-inset-right, 24px));
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--color-wa-green, #25D366);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45), 0 2px 6px rgba(0,0,0,0.15);
  z-index: 900;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.wa-floating-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.55), 0 3px 8px rgba(0,0,0,0.2);
  color: #FFFFFF;
}
.wa-floating-btn:active {
  transform: scale(0.96);
}
.wa-floating-btn svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

/* Subtle one-time pulse animation */
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
  70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.wa-pulse {
  animation: wa-pulse 2s infinite;
}

/* WhatsApp Greeting Bubble */
/* Het native `hidden`-attribuut bepaalt de zichtbaarheid. We zetten de
   weergave daarom expliciet op display:none zolang hidden aan staat, zodat een
   eventuele latere display-regel de toegankelijkheidsstatus niet kan ondermijnen.
   main.js haalt `hidden` weg en zet daarna .is-visible. */
.wa-greeting-bubble[hidden] { display: none !important; }
.wa-greeting-bubble.is-visible { display: block; }

.wa-greeting-bubble {
  position: fixed;
  bottom: calc(max(24px, env(safe-area-inset-bottom, 24px)) + 74px);
  right: max(24px, env(safe-area-inset-right, 24px));
  max-width: 290px;
  background-color: var(--color-card-bg, #FFFFFF);
  border: 1px solid var(--color-border, rgba(15, 27, 45, 0.12));
  border-radius: var(--radius-md, 16px);
  padding: 1rem 1.15rem;
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(15, 27, 45, 0.15));
  z-index: 899;
  display: none;
  animation: fadeInBubble 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.wa-greeting-bubble.is-visible {
  display: block;
}
@keyframes fadeInBubble {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.wa-greeting-bubble__close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  padding: 4px;
  font-size: 1rem;
  line-height: 1;
}
.wa-greeting-bubble__close:hover {
  color: var(--color-ink, #0F1B2D);
}
.wa-greeting-bubble__text {
  font-size: 0.92rem;
  color: var(--color-ink, #0F1B2D);
  line-height: 1.45;
  margin-bottom: 0.5rem;
}
.wa-greeting-bubble__status {
  font-size: 0.75rem;
  color: var(--color-ink-muted, #708096);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.wa-greeting-bubble__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-wa-green, #25D366);
}

/* Package Finder Interactive Quiz */
/* Pakketkiezer: ondersteunend aan de pakketten. Een witte kaart met rand en
   schaduw, zodat hij binnen de pakketten-sectie leest als hulpmiddel.
   De config-driven data-integratie uit FASE B blijft volledig intact. */
.package-finder {
  background-color: var(--color-card-bg, #FFFFFF);
  border: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
  border-radius: var(--radius-lg, 24px);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--shadow-md, 0 4px 20px rgba(15, 27, 45, 0.07));
  max-width: 860px;
  margin: 0 auto;
}
.finder-step {
  display: none;
}
.finder-step.is-active {
  display: block;
}
.finder-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}
@media (min-width: 600px) {
  .finder-options {
    grid-template-columns: repeat(3, 1fr);
  }
}
.finder-btn {
  background-color: var(--color-surface-subtle, #F0F4FA);
  border: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
  border-radius: var(--radius-md, 16px);
  padding: 1.25rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-ink, #0F1B2D);
}
.finder-btn:hover {
  background-color: #FFFFFF;
  border-color: var(--color-primary, #123E8C);
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(18, 62, 140, 0.08));
}
.finder-btn.is-selected {
  background-color: color-mix(in srgb, var(--color-primary) 8%, #FFFFFF);
  border-color: var(--color-primary, #123E8C);
  outline: 2px solid var(--color-primary, #123E8C);
}
.finder-result {
  display: none;
  text-align: center;
  padding: 1.5rem 0;
}
.finder-result.is-visible {
  display: block;
}

/* Footer: compacte onderrand, met een LOKALE uitwijkgruimte voor de
   zwevende WhatsApp-knop.

   Onderzocht (gemeten op /werkgebied/ en /, alle viewports):
   - De knop is `position: fixed`, 60x60px, `bottom: 24px`, `right: 24px`,
     `z-index: 900`. Hij zweeft dus bovenop de pagina en staat NIET in de
     document-flow.
   - Gemeten overlap tussen het knop-rect en alle footer-teksten: 0. Er is
     dus geen enkele tekst of link die hij afdekt.
   - De enige wél reële botsing is horizontaal: het rechteruiteinde van
     de container en het knop-rect overlappen elkaar op smallere schermen.
     Gemeten: container-rechterrand tegenover knop-linkerrand is op 320px
     -52px, 375px -60px, 768px -43px en op >=1024px -60px tot -740px
     (negatief = GEEN overlap, de knop ligt dan buiten de container).
     Dus pas onder ~768px is uitwijken horizontaal nodig; op 1024px en
     breder niet, omdat de footer daar gecentreerd is en de knop er buiten
     valt.

   Daarom is de grote algemene padding-bottom (84-92px, ruim voor de
   volle knophoogte plus marge) vervangen door:
     1. een normale, compacte footer-padding die met de bovenkant
        meebeweegt en dus het ritme van de footer bewaakt;
     2. een uitwijkgruimte die ALLEEN in de onderste balk zit en alleen op
        de schermen waar de knop werkelijk horizontaal in de weg komt
        (tot 1368px, zie de regel hieronder). Daar loopt de knop gewoon
        over het donkere vlak heen, net als een echte floating action
        button, in plaats van dat er een lege strook onder de hele
        footerinhoud blijft staan.

   Er is geen negatieve marge, geen absolute positionering, geen
   verborgen spacer en geen vaste footerhoogte: alleen padding. */
.site-footer {
  background-color: var(--color-ink, #0F1B2D);
  color: #F8FAFC;
  padding-top: clamp(3.5rem, 6vw, 5rem);
  /* Normale rhythmische onderrand; de knop zweeft erover heen. */
  padding-bottom: clamp(2.75rem, 5vw, 4rem);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* LOKALE uitwijkgruimte voor de zwevende WhatsApp-knop.
   De knop is 60px breed en staat op `right: 24px`, dus zijn linkerrand ligt
   op viewportbreedte min 84px. De footercontainer is maximaal 1200px en
   gecentreerd; daardoor is de grens waarbij de knop nog ín de container
   valt: (vw + 1200) / 2 = vw - 84  ->  vw = 1368px. Boven 1368px ligt de
   knop volledig buiten de container en is er geen uitwijkruimte nodig.

   Gemeten overlap (zonder deze regel) was precies daar: 0 op 320/375px,
   maar "Jouw Website Geregeld" werd op 1024px en 1152px met 52px en op
   1280px met 12px horizontaal afgedekt. 76px is de benodigde ruimte op de
   smalste scherm (68px bij 320/375, waar de containerpadding 16px is) plus
   8px marge.

   Dit staat ALLEEN op de onderste balk, niet op de hele footer: de rest
   van de footer houdt de normale, compacte padding-bottom. */
@media (max-width: 1367px) {
  .footer__bottom {
    padding-right: 76px;
  }
}
.site-footer a {
  color: #94A3B8;
}
.site-footer a:hover {
  color: #FFFFFF;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: 3.5rem;
}
@media (min-width: 640px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .footer__grid {
    /* De rechter kolom (Openingstijden & Bereikbaarheid) heeft meer ruimte
       nodig dan de twee linkenlijsten; de totale containerbreedte blijft gelijk. */
    grid-template-columns: 1.5fr 1.05fr 1.05fr 1.8fr;
  }
}
.footer__col h4,
.footer__col-title {
  color: #FFFFFF;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* Footer High-Contrast Opening Hours & Details */
.footer__tagline {
  color: #CBD5E1;
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

/* Uurtjes-kaart: het enige "blok" in de footer. Een afgeronde kaart met een
   lichte rand, zodat hij los staat van de donkere footer. */
.footer-hours-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md, 16px);
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer-hours-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #34D399; /* Bright Emerald: high contrast on dark background */
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hours-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10B981;
  box-shadow: 0 0 10px #10B981;
  animation: pulse-dot 2s infinite ease-in-out;
}

@keyframes pulse-dot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.footer-hours-card__main {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: #FFFFFF;
}

.footer-hours-card__icon {
  color: #FFC533;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.footer-hours-card__times {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  /* Vul de beschikbare breedte van de kaart, zodat de openingstijden niet in
     een onnodig smalle subkolom terechtkomen. */
  flex: 1;
}
.footer-hours-card__label {
  font-size: 0.78rem;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.footer-hours-card__times strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF; /* High contrast: 16:1 against #0F1B2D */
  line-height: 1.25;
}
/* Dagen en tijdsbereik staan elk op hun eigen regel, zodat het bereik
   (bijv. 08:00 – 20:00) nooit middenin afbreekt. */
.footer-hours-card__days,
.footer-hours-card__time {
  display: block;
}
.footer-hours-card__time {
  white-space: nowrap;
}

.footer-hours-card__note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #F1F5F9; /* High-contrast white/slate: > 13:1 contrast ratio */
}
.footer-hours-card__note svg {
  color: #FFC533;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.footer-hours-card__btn {
  margin-top: 0.35rem;
  width: 100%;
  text-align: center;
}

/* Contact Page Hours Card */
.contact-hours-card {
  border-left: 4px solid var(--color-primary, #123E8C);
}
.contact-hours-card__time strong {
  font-size: 1.08rem;
  color: var(--color-ink, #0F1B2D);
}
.contact-hours-card__note {
  font-size: 0.9rem;
  color: var(--color-ink-muted, #5A6A80);
  line-height: 1.5;
  margin-top: 0.4rem;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  color: #94A3B8;
}

/* Helper Utilities for Strict CSP Compliance (No Inline Styles) */
.container--narrow {
  max-width: 860px;
}
.container--reading {
  max-width: 800px;
}
.container--compact {
  max-width: 650px;
}

.text-center { text-align: center; }
.text-right { text-align: right; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.mt-auto { margin-top: auto; }
.w-full { width: 100%; }
.p-lg { padding: 2rem; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }

/* Sterke link binnen lopende tekst */
.link-strong {
  font-weight: 700;
  text-decoration: underline;
}
.link-strong:hover { text-decoration-thickness: 2px; }

/* Sectie verticaal centreren (404) */
.section--centered {
  display: flex;
  align-items: center;
  min-height: 60vh;
}

/* 404-titel */
.hero-404__title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0.5rem 0;
}

/* Beloftenlijst (kwaliteitsgarantie): twee kolommen met scheidingslijnen.
   Vier beloften naast elkaar vergelijken leest als een lijst, niet als
   vier productverpakkingen. */
.promise-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 0;
  border-top: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
}
@media (min-width: 768px) {
  .promise-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  .promise-item:nth-child(odd) {
    padding-right: clamp(1rem, 2vw, 2rem);
    border-right: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
  }
  .promise-item:nth-child(even) {
    padding-left: clamp(1rem, 2vw, 2rem);
  }
}
.promise-item {
  padding: 1.75rem 0 0;
}
.promise-item p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-ink-muted, #55627A);
  max-width: 46ch;
}

/* Feature-item: icoon boven, titel en lopende tekst daaronder.
   Gebruikt op de city pages. Het item is een verticale stack (flex column)
   zodat de beschrijving de VOLLE kolombreedte krijgt. Voorheen stond het
   item als 2-koloms grid (48px | 1fr) met drie children: grid auto-plaatsing
   zette de <p> in de 48px-icoonkolom van rij 2, wat de tekst woord-voor-woord
   liet afbreken. Geen kaart, geen doos. */
.feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 900px) {
  .feature-list {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}
.feature-item {
  display: flex;
  flex-direction: column;
}
.feature-item__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm, 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary, #123E8C);
  flex-shrink: 0;
  margin-bottom: 0.85rem;
}
.feature-item h3 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
  padding-top: 0;
}
.feature-item p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-ink-muted, #55627A);
}

/* Plaatskaart op /werkgebied/: kaartvorm met rand, radius en schaduw. */
.area-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-card-bg, #FFFFFF);
  border: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
  border-radius: var(--radius-md, 16px);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 27, 45, 0.08));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.area-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 20px rgba(15, 27, 45, 0.07));
}
.area-card__title {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-primary, #123E8C);
  margin-bottom: 0.5rem;
}
.area-card__text {
  margin-bottom: 1.5rem;
  flex-grow: 1;
}
.area-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Koppen binnen de juridische kaart */
.legal-card__heading {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-ink, #0F1B2D);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Juridische links in de footer */
.footer__legal-links {
  display: flex;
  gap: 1rem;
}

/* Verhaalbeeld op /over-ons/ */
.about-story__media {
  border-radius: var(--radius-lg, 24px);
  overflow: hidden;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 27, 45, 0.08));
}
.about-story__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Kolom met verhaalbeeld + de drie korte onderscheidende punten eronder. */
.about-story__col {
  display: flex;
  flex-direction: column;
}

/* Drie compacte onderscheidende punten onder het verhaalbeeld.
   Geen kaarten: een accentlijn en korte tekst, in dezelfde taal als de
   beloftenlijst hieronder. Zo staat direct zichtbaar waarom iemand voor
   deze rijschool kiest, zonder een nieuwe sectie toe te voegen. */
.about-usp {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.about-usp__item {
  border-top: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
  padding-top: 0.6rem;
  display: grid;
  gap: 0.1rem;
}
.about-usp__title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-primary, #123E8C);
}
.about-usp__text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-ink-muted, #55627A);
}

/* --- Over ons: gerichte polish, alleen op /over-ons/ ------------------------
   De visuele identiteit blijft ongewijzigd (kleuren, typografie, kaartstijl,
   foto's, CTA). Alleen verticale lucht en scanbaarheid worden bijgesteld, en
   alles is gekoppeld aan .page-about zodat andere pagina's exact gelijk blijven. */

/* Kopblok -> inhoud: iets minder lucht tussen titel en de rij kaarten. */
.page-about .section-header {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

/* Filosofie: de twee alinea's lezen als twee blokken; de cijfers iets dichter. */
.page-about .philosophy-text p + p {
  margin-top: 0.35rem;
}
.page-about .stat-group {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

/* Instructeurkaarten: interne lucht iets kleiner. De foto's (4:3, volle
   kaartbreedte), namen, functies, teksten en tags blijven ongewijzigd. */
.page-about .person-card__body {
  padding: 1rem 1.2rem 1.15rem;
  gap: 0.4rem;
}
.page-about .person-card__desc {
  line-height: 1.6;
}
.page-about .tag-list {
  padding-top: 0.6rem;
}

/* Kwaliteitsgarantie: dezelfde rustige 2x2-lijst met scheidingslijnen, met
   minder lucht erboven, ertussen en tussen titel en uitleg. */
.page-about .promise-list {
  gap: 1.5rem 0;
}
.page-about .promise-item {
  padding-top: 1.3rem;
}
.page-about .promise-item p {
  line-height: 1.55;
}
.page-about .check-item {
  margin-bottom: 0.4rem;
}

/* Checklist-item (kwaliteitsbeloften) */
.check-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.check-item__icon {
  color: var(--color-primary, #123E8C);
  font-weight: 700;
}

/* Contactkanaal-kop op /contact/ */
.contact-channel__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.contact-channel__icon {
  flex-shrink: 0;
}
.contact-channel__icon--whatsapp {
  color: var(--color-wa-dark, #075E54);
}

/* CBR-callout op /tarieven/ */
.callout-card__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.callout-card__icon {
  color: var(--color-primary, #123E8C);
  flex-shrink: 0;
}
.callout-card__text {
  font-weight: 400;
}

/* Hint naast een formulierlabel */
.form-label__hint {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-ink-muted, #708096);
}

/* Statusmeldingen van het proeflesformulier (runtime, via JS) */
.form-status__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.form-status__text {
  font-size: 0.95rem;
  margin: 0;
}
.form-status__note {
  font-size: 0.85rem;
  font-style: italic;
  margin-top: 0.5rem;
}
.form-status__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* Laadindicator op de verzendknop */
.btn__spinner {
  animation: btn-spin 1s linear infinite;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}
.btn.is-loading { cursor: progress; }
.btn.is-hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  .btn__spinner { animation: none; }
}

.badge-service {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary, #123E8C);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.callout-card {
  background-color: var(--color-surface-subtle, #F0F4FA);
  border: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
  border-left: 4px solid var(--color-primary, #123E8C);
  margin-top: 2rem;
}

/* Juridische kaart: witte kaart met rand, radius en schaduw; de blauwe
   linkervlaklijn markeert het juridische karakter. */
.legal-card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background-color: var(--color-card-bg, #FFFFFF);
  border: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
  border-left: 3px solid var(--color-primary, #123E8C);
  border-radius: var(--radius-md, 16px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 27, 45, 0.08));
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.legal-date {
  font-size: 0.95rem;
  color: var(--color-ink-muted, #5A6A80);
}
.legal-list {
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.flex-wrap-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.flex-col-gap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hero-404-number {
  font-size: clamp(3.5rem, 8vw, 5rem);
  font-weight: 800;
  color: var(--color-primary, #123E8C);
  line-height: 1;
  margin-bottom: 1rem;
}

.spin-icon {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ================= GEDEELDE BINNENPAGINA-HERO (sitebreed) ==================
   De lichtblauwe intro-hero (eyebrow + gele streep + H1 + lead) komt op
   /tarieven/, /over-ons/, /werkgebied/, /veelgestelde-vragen/ en
   /contact/ identiek voor. Vroeger stonden hier drie bijna identieke
   paginaspecifieke overrides (.page-about, .page-faq, .page-werkgebied)
   plus de ruimere basiswaarde, waardoor de hero op desktop per pagina
   287 t/m 379px hoog was en het gele streepje 190 of 243px van de top
   stond. Nu is er één gedeelde standaard.

   Referentie is de compacte hero van /over-ons/ en /werkgebied/:
     padding-top     clamp(2.5rem, 5vw, 3.5rem)   -> 56px op 1440
     padding-bottom  clamp(1.25rem, 2.5vw, 1.5rem) -> 24px op 1440

   De totale hero-hoogte hangt daarnaast af van de natuurlijke hoogte van
   de tekst. Die verschilt per pagina omdat titels en leads verschillend
   lang zijn; dat is bewust NIET met een vaste hoogte afgedwongen, want dat
   zou mobiele tekst afkappen. In plaats daarvan krijgt de lead op
   desktop een gedeelde minimumhoogte van twee regels. Daardoor heeft elke
   standaardhero op desktop exact dezelfde hoogte terwijl de tekst op
   alle schermen natuurlijk blijft wrappen. Op mobiel (<768px) vervalt
   die minimumhoogte, zodat een langere titel de hero daar hoger mag maken. */
.section--intro {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 1.5rem);
}

@media (min-width: 768px) {
  /* Twee regels is de gedeelde basis: H1 = 2 x 1.08em, lead = 2 x 1.55em.
     Beide zijn min-height, geen height: een derde regel laat de hero gewoon
     hoger worden in plaats van de tekst af te kappen. Zo hebben alle
     standaardhero's op desktop dezelfde hoogte zolang de tekst erin past. */
  .section--intro h1 {
    min-height: 2.16em;
  }
  .section--intro .lead {
    min-height: 3.1em;
  }
}

.stat-group {
  display: flex;
  gap: 2rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border, rgba(15, 27, 45, 0.1));
}
.stat-number {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-primary, #123E8C);
}
.stat-label {
  font-size: 0.85rem;
  color: var(--color-ink-muted, #5A6A80);
}

.category-title {
  font-size: 1.5rem;
  color: var(--color-primary, #123E8C);
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.contact-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: #CBD5E1;
}

.footer-credits {
  font-size: 0.8rem;
  color: #64748B;
}
.footer-credits a {
  color: #94A3B8;
  text-decoration: underline;
}

.btn--translucent {
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
}

.mobile-close-btn {
  font-size: 1.75rem;
  color: var(--color-ink, #0F1B2D);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

/* Placeholder Pill / Mark */
.placeholder-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: #9A3412;
  background-color: #FFEDD5;
  border: 1px solid #FED7AA;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  text-transform: uppercase;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* Utility and Layout Classes (No inline styles) */
.grid--stretch {
  align-items: stretch;
}
.section-spacer {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.section-footer-cta {
  text-align: center;
  margin-top: 2rem;
}
/* De algemene .btn staat op white-space: nowrap. De langste knopptekst
   ("Lees meer over ons team en de lesauto's ->") is dan 372px breed en liep
   op 320/375px viewports 13-68px buiten beeld (scrollWidth 388 i.p.v. 320).
   Hier mag de tekst breken, zodat de knop inkrimpt tot de containerbreedte.
   Op brede schermen verandert er niets: daar past de tekst toch al op één regel. */
.section-footer-cta .btn {
  white-space: normal;
}
/* Plaatsen: een rij omrande knoppen. Elke plaats blijft een echte link. */
.city-badges-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.city-badges-container .btn {
  justify-content: center;
  border: 1px solid var(--color-border, rgba(15, 27, 45, 0.14));
  border-radius: var(--radius-full, 9999px);
  background-color: var(--color-card-bg, #FFFFFF);
  color: var(--color-primary, #123E8C);
  font-weight: 600;
  padding: 0.75rem 1.35rem;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.city-badges-container .btn:hover {
  background-color: var(--color-surface-subtle, #EEF3F9);
  color: var(--color-ink, #0F1B2D);
  border-color: rgba(18, 62, 140, 0.35);
}
/* Geen schuine "shine"-streek en geen lift: dit zijn navigatielinks,
   geen knoppen. */
.city-badges-container .btn::after {
  display: none;
}
.city-badges-container .btn:hover {
  transform: none;
}
.map-placeholder__icon {
  color: var(--color-primary, #123E8C);
}
.map-placeholder__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.map-placeholder__desc {
  font-size: 0.9rem;
  max-width: 480px;
  margin: 0 auto;
  color: var(--color-ink-muted, #5A6A80);
}
.person-card__title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.person-card__desc {
  font-size: 0.95rem;
  color: var(--color-ink-muted, #5A6A80);
}
.car-card__title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.car-card__desc {
  font-size: 0.95rem;
  color: var(--color-ink-muted, #5A6A80);
}
.pkg-card-desc {
  font-size: 0.9rem;
  color: var(--color-ink-muted, #5A6A80);
}

/* Package Finder specific */
.finder-intro {
  margin-bottom: 1.5rem;
}
.finder-title {
  font-size: 1.5rem;
}
.finder-subtitle {
  font-size: 0.95rem;
}
.finder-question-title {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
  text-align: center;
}
.finder-option-desc {
  font-size: 0.82rem;
  color: var(--color-ink-muted, #64748B);
  display: block;
}
.finder-result-heading {
  font-size: 1.5rem;
  margin: 0.5rem 0;
}
.finder-result-price {
  margin-bottom: 1rem;
  color: var(--color-primary, #123E8C);
  font-size: 2.25rem;
  font-weight: 800;
}
.finder-result-text {
  max-width: 580px;
  margin: 0 auto 1.5rem auto;
  font-size: 0.95rem;
}
.finder-btn-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* --- FAQ + Werkgebied: gerichte polish, alleen op deze twee pagina's ----------
   De goedgekeurde visuele identiteit blijft ongewijzigd (kleuren, fonts,
   kaartstijl, buttons, header, footer, CTA). Alleen verticale lucht en
   scanbaarheid worden bijgesteld. Alles is gekoppeld aan .page-faq en
   .page-werkgebied, zodat alle andere pagina's pixel-identiek blijven. */

/* ============================ FAQ (/veelgestelde-vragen/) ================= */

/* FAQ-sectie: iets minder lucht boven en onder de lijst. */
.page-faq .section--alt {
  padding-top: clamp(2.75rem, 6vw, 4.5rem);
  padding-bottom: clamp(2.75rem, 6vw, 4.5rem);
}

/* Categorietitel -> eerste vraag: iets minder afstand. */
.page-faq .category-title {
  margin-bottom: 1rem;
}

/* Tussen opeenvolgende vragen: iets kleiner, klikvlak blijft heel. */
.page-faq .faq-list {
  gap: 0.7rem;
}

/* Vraagregel: iets minder verticale padding. De regel blijft ruim 44px
   hoog, dus de klik-/taptarget blijft ruim voldoende. */
.page-faq .faq-summary {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Antwoord: iets minder bodemruimte, tekstgrootte ongewijzigd. */
.page-faq .faq-answer {
  padding-bottom: 1.25rem;
}

/* "Staat jouw vraag er niet tussen?": licht compacter via interne padding
   en afstand tot de lijst. Inhoud, CBR-link en WhatsApp-knop blijven
   ongewijzigd. De clamp loopt mee met de bestaande .card-padding, zodat de
   kaart op smalle schermen niet groter wordt dan hij was. */
.page-faq .callout-card {
  margin-top: 1.75rem;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* ======================== WERKGEBIED (/werkgebied/) ======================= */

/* Locatiesectie: iets minder lucht rond de kop en de kaarten. */
.page-werkgebied .section--alt {
  padding-top: clamp(2.75rem, 6vw, 4.5rem);
  padding-bottom: clamp(2.75rem, 6vw, 4.5rem);
}
.page-werkgebied .section-header {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

/* Plaatskaarten: iets minder interne lucht. De vijf kaarten blijven in de
   bestaande 3 + 2 grid; er is geen vaste hoogte toegepast. */
.page-werkgebied .area-card {
  padding: 1.5rem;
}
.page-werkgebied .area-card__text {
  margin-bottom: 1.25rem;
}

/* Ophaalservice: zit nu direct onder de vijf plaatskaarten. De kaartstijl
   blijft hetzelfde; alleen de marge erboven en de interne padding worden
   iets kleiner. */
.page-werkgebied .werkgebied-ophaal {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

/* Regiokaart: deze sectie was veel te hoog voor de hoeveelheid informatie.
   De click-to-load privacywerking blijft exact hetzelfde: de placeholder
   blijft een flex-blok met icoon, titel, toelichting en knop, en de
   geladen iframe vult nog steeds hetzelfde aspect-ratioblok. Alleen de
   hoogte van dat blok wordt kleiner, zodat de kaart na activering
   bruikbaar blijft. */
.page-werkgebied .map-section {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.page-werkgebied .map-section .section-header {
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
}
.page-werkgebied .map-embed-container {
  aspect-ratio: 2 / 1;
  max-height: 360px;
}
/* Op smalle schermen een 2:1-blok te plat; daar iets hoger. */
@media (max-width: 767px) {
  .page-werkgebied .map-embed-container {
    aspect-ratio: 4 / 3;
    max-height: 340px;
  }
}
.page-werkgebied .map-placeholder {
  padding: 1.5rem;
  gap: 0.75rem;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .wa-pulse {
    animation: none !important;
  }
}