/* ==========================================================================
   Autorijschool RVVO, Bodegraven en Woerden
   De kleuren komen uit het logo van RVVO zelf: het azuurblauw en het oranje
   van de vier letterblokken. Het diepe blauw eronder is de rustige drager,
   het oranje is gereserveerd voor alles wat de bezoeker mag aanklikken.
   Groen komt maar op een plek voor: de kaart van het Groene Hart, het
   werkgebied waar deze rijschool omheen is gebouwd.
   De stippellijn onder de koppen is een wegmarkering; de genummerde rail is
   de Rijopleiding in Stappen zelf.
   ========================================================================== */

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/assets/fonts/source-sans-3-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/assets/fonts/source-sans-3-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ------------------------------------------------------ */
:root {
  --ink: #0e1f2b;
  --ink-soft: #4c6272;
  --paper: #f6f9fb;
  --paper-2: #e6eff5;
  --white: #fff;

  --water: #084a6b;          /* rustige drager, donkere secties */
  --water-deep: #06364e;
  --water-darkest: #04222f;
  --water-soft: #d9ecf6;

  --azuur: #0081c5;          /* het blauw uit het logo */
  --azuur-deep: #05658f;     /* leesbaar op wit, voor links */

  --accent: #f29400;         /* het oranje uit het logo, alleen voor acties */
  --accent-deep: #d07e00;
  --accent-ink: #241503;     /* tekst op oranje */
  --accent-soft: #fdeed6;

  --groen: #2f9e5c;          /* uitsluitend de kaart van het Groene Hart */
  --groen-soft: #ddf1e4;

  --line: rgba(14, 31, 43, .14);
  --line-strong: rgba(14, 31, 43, .28);
  --error: #b3261e;

  --radius: 10px;
  --radius-lg: 20px;
  --wrap: 74rem;
  --shadow-sm: 0 1px 2px rgba(6, 54, 78, .08);
  --shadow: 0 1px 2px rgba(6, 54, 78, .06), 0 14px 36px -20px rgba(6, 54, 78, .45);
  --shadow-lg: 0 2px 4px rgba(6, 54, 78, .06), 0 32px 60px -28px rgba(6, 54, 78, .5);

  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.075rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* height:auto hoort er echt bij: zonder die regel winnen de width- en
   height-attributen op <img> van de CSS-breedte en wordt de foto uitgerekt. */
img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.022em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.05rem, 5.6vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.8vw, 2.4rem); }
h3 { font-size: clamp(1.12rem, 2.1vw, 1.35rem); letter-spacing: -.014em; }
h4 { font-size: 1.03rem; letter-spacing: -.012em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--azuur-deep); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--water); }

strong { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 56rem); margin-inline: auto; }
[id] { scroll-margin-top: 5.5rem; }
@media (max-width: 30rem) { .wrap { width: min(100% - 1.75rem, var(--wrap)); } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--white); padding: .7rem 1rem;
}
.skip:focus { left: .6rem; top: .6rem; }

.small { font-size: .92rem; color: var(--ink-soft); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Knoppen ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: -.01em;
  padding: .8rem 1.4rem;
  border: 2px solid transparent; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-ink); }
.btn--ghost { background: transparent; color: var(--water); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--water-soft); color: var(--water-deep); border-color: var(--water); }
.btn--onDark { background: var(--white); color: var(--water-deep); border-color: var(--white); }
.btn--onDark:hover { background: var(--paper-2); color: var(--water-darkest); }
.btn--outlineLight { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--outlineLight:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }
.btn--sm { padding: .5rem 1rem; font-size: .93rem; }
.btn--lg { padding: .95rem 1.7rem; font-size: 1.06rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---------- Koptekst ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.header-top {
  display: flex; align-items: center; gap: 1.2rem;
  min-height: 4.4rem;
}
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand img { width: 122px; }

.header-nav { display: none; gap: .1rem; }
.header-nav a {
  color: var(--ink-soft); text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: .93rem;
  padding: .45rem .55rem; border-radius: 8px;
  white-space: nowrap;
}
.header-nav a:hover { color: var(--water); background: var(--paper-2); }
.header-nav a[aria-current="page"] { color: var(--water); background: var(--water-soft); }
@media (min-width: 62rem) { .header-nav { display: flex; } }

.header-actions { display: flex; align-items: center; gap: .6rem; }
.header-actions .btn { white-space: nowrap; }
/* Op smalle telefoons staan logo, belknop en menuknop op een rij; die past
   alleen als beide iets krimpen. */
@media (max-width: 26rem) {
  .brand img { width: 98px; }
  .header-actions .btn--sm { padding: .5rem .75rem; font-size: .85rem; }
  .nav-toggle { padding: .45rem .65rem; font-size: .85rem; }
}
.nav-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  background: transparent; color: var(--water); border: 2px solid var(--line-strong);
  border-radius: 999px; padding: .45rem .8rem; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
}
.nav-toggle svg { width: 19px; height: 19px; }
@media (min-width: 62rem) { .nav-toggle { display: none; } }

.mobile-nav { display: none; padding-bottom: 1rem; }
.mobile-nav[data-open] { display: grid; gap: .1rem; }
.mobile-nav a {
  color: var(--ink); text-decoration: none; padding: .6rem .2rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 600;
}
.mobile-nav a[aria-current="page"] { color: var(--azuur-deep); }
@media (min-width: 62rem) { .mobile-nav, .mobile-nav[data-open] { display: none; } }

/* ---------- Wegmarkering ------------------------------------------------ */
.roadline {
  height: 6px; border: 0; margin: 0;
  background: repeating-linear-gradient(90deg,
    var(--accent) 0 34px, var(--water-soft) 34px 62px);
}

/* ---------- Hero -------------------------------------------------------- */
.hero {
  position: relative;
  background:
    radial-gradient(80rem 40rem at 10% -25%, rgba(0,129,197,.5), transparent 62%),
    linear-gradient(178deg, var(--water) 0%, var(--water-deep) 58%, var(--water-darkest) 100%);
  color: #fff;
  overflow: hidden;
}
/* Polderlijnen: de sloten van het Groene Hart, heel licht over de hero. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(94deg,
    rgba(255,255,255,.06) 0 1px, transparent 1px 46px);
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid; gap: 2.4rem;
  padding: 3rem 0 3.4rem;
}
@media (min-width: 62rem) {
  .hero-inner { grid-template-columns: 1.08fr .92fr; gap: 3.4rem; align-items: start; padding: 4rem 0 4.4rem; }
}
.hero h1 { color: #fff; margin-bottom: .4em; }
.hero h1 em { font-style: normal; color: #ffb547; }
.hero-lead { font-size: 1.14rem; color: rgba(255,255,255,.9); max-width: 34rem; }

.eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--azuur-deep); margin: 0 0 .7rem;
}
.eyebrow--light { color: #ffc57a; }

.hero-badges {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.hero-badges li {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: .34rem .82rem;
  font-size: .9rem; font-weight: 600;
}

.hero-contact { margin-top: 1.7rem; display: grid; gap: .6rem; }
.hero-phone {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.3rem, 3.4vw, 1.7rem); letter-spacing: -.025em;
  color: var(--accent-ink); text-decoration: none;
  background: var(--accent); border: 2px solid var(--accent);
  border-radius: 999px; padding: .55rem 1.3rem .55rem 1.1rem;
  justify-self: start;
}
.hero-phone:hover { background: #ffab2e; border-color: #ffab2e; color: var(--accent-ink); }
.hero-contact p { color: rgba(255,255,255,.84); font-size: .97rem; margin: 0; }
.hero-contact p a { color: #ffc57a; }

.hero-card {
  background: var(--white); color: var(--ink);
  border-radius: var(--radius-lg); padding: 1.6rem;
  box-shadow: var(--shadow-lg);
}
.hero-card h2 { font-size: 1.42rem; margin-bottom: .35em; }
.hero-card > p { color: var(--ink-soft); font-size: .98rem; }
@media (min-width: 36rem) { .hero-card { padding: 1.9rem; } }

/* ---------- Secties ----------------------------------------------------- */
.section { padding: 3.6rem 0; }
.section--tight { padding: 2.4rem 0; }
.section--alt { background: var(--paper-2); }
.section--dark { background: var(--water-deep); color: rgba(255,255,255,.88); }
.section--dark h2, .section--dark h3 { color: #fff; }
/* :not(.btn) is nodig: ".section--dark a" is specifieker dan ".btn--onDark",
   dus zonder deze uitzondering kreeg een witte knop in een donkere sectie
   lichtoranje tekst op wit. */
.section--dark a:not(.btn) { color: #ffc57a; }

.section-head { max-width: 46rem; margin-bottom: 2rem; }
.section-head p { color: var(--ink-soft); }
.section--dark .section-head p { color: rgba(255,255,255,.82); }
.section-head h2 { position: relative; padding-bottom: .2rem; }
.section-head h2::after {
  content: ""; display: block; margin-top: .7rem;
  width: 92px; height: 5px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 18px, transparent 18px 30px);
}

/* ---------- Pagina-kop -------------------------------------------------- */
.pagehead {
  background:
    radial-gradient(60rem 30rem at 6% -45%, rgba(0,129,197,.45), transparent 60%),
    linear-gradient(178deg, var(--water) 0%, var(--water-deep) 100%);
  color: #fff; padding: 2.2rem 0 2.6rem;
}
.pagehead h1 { color: #fff; margin-bottom: .35em; }
.pagehead > .wrap > p { color: rgba(255,255,255,.88); max-width: 46rem; font-size: 1.08rem; }

.crumbs { margin-bottom: 1rem; font-size: .88rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; color: rgba(255,255,255,.68); }
.crumbs li + li::before { content: "/"; margin-right: .45rem; opacity: .6; }
.crumbs a { color: rgba(255,255,255,.86); }

/* ---------- Rasters en kaarten ------------------------------------------ */
.grid { display: grid; gap: 1.1rem; }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.4rem;
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.card--flat { background: transparent; box-shadow: none; }
.section--alt .card--flat { background: var(--white); }
.card--link {
  display: grid; align-content: start; text-decoration: none; color: inherit;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); color: inherit; }
.card__more {
  margin-top: .9rem; font-family: var(--font-display); font-weight: 700;
  color: var(--azuur-deep); font-size: .95rem;
}
.card__more::after { content: " \2192"; }
.section--dark .card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.88); }

/* ---------- Prose ------------------------------------------------------- */
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 1.9em; }
.prose h3 { margin-top: 1.5em; }
.lede { font-size: 1.16rem; color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 1.1em; }
.prose li { margin-bottom: .45em; }

.note {
  background: var(--accent-soft); border-left: 5px solid var(--accent);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.6rem 0;
}
.note--water { background: var(--water-soft); border-left-color: var(--azuur); }
.note p:last-child { margin-bottom: 0; }

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.ticks li { position: relative; padding-left: 1.65rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .46em;
  width: 1.05rem; height: .55rem;
  border-left: 3px solid var(--azuur); border-bottom: 3px solid var(--azuur);
  transform: rotate(-45deg);
}
.section--dark .ticks li::before { border-color: #6fc3ec; }

/* ---------- Media / figuur ---------------------------------------------- */
.media { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 58rem) { .media { grid-template-columns: 1.05fr .95fr; gap: 3rem; } }
.figure { margin: 0; }
.figure img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; }
.figure--plain img { box-shadow: none; border: 1px solid var(--line); background: #fff; }
/* De foto van de geslaagde leerling is 200 bij 200 pixels. Zonder deze grens
   werd hij over de hele kolom uitgerekt en daardoor korrelig. */
.figure--portrait img { max-width: 260px; width: 100%; }
.figure--portrait { display: grid; justify-items: center; }
.figure--portrait figcaption { text-align: center; }
.figure figcaption { margin-top: .6rem; font-size: .9rem; color: var(--ink-soft); }
.section--dark .figure figcaption { color: rgba(255,255,255,.72); }

/* ---------- Stappen (Rijopleiding in Stappen) --------------------------- */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps li {
  counter-increment: step;
  position: relative; padding: 0 0 1.7rem 3.6rem;
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--water); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
}
.steps li::after {
  content: ""; position: absolute; left: 1.25rem; top: 2.9rem; bottom: .3rem;
  width: 0; border-left: 3px dashed var(--accent);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps h3 { margin-bottom: .3em; }
.steps p { margin-bottom: 0; color: var(--ink-soft); }
.section--dark .steps li::before { background: var(--accent); color: var(--accent-ink); }
.section--dark .steps p { color: rgba(255,255,255,.82); }

/* ---------- Prijzen ----------------------------------------------------- */
.price-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 44rem) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .price-grid { grid-template-columns: repeat(4, 1fr); } }
.price-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 44rem) { .price-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 70rem) { .price-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.price {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.4rem;
  display: grid; align-content: start; gap: .25rem;
  box-shadow: var(--shadow-sm);
}
.price__flag {
  justify-self: start; background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 800; font-size: .74rem;
  letter-spacing: .09em; text-transform: uppercase;
  border-radius: 999px; padding: .2rem .7rem; margin-bottom: .35rem;
}
.price__name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.price__amount {
  font-family: var(--font-display); font-weight: 800;
  font-size: 2.6rem; line-height: 1.05; letter-spacing: -.04em; color: var(--water);
}
.price__amount::before { content: "\20AC\A0"; font-size: 1.1rem; vertical-align: .6em; font-weight: 700; }
.price__unit { font-size: .92rem; color: var(--ink-soft); margin-bottom: .7rem; }
.price .ticks { margin-bottom: 1rem; font-size: .95rem; }
.price .btn { justify-self: stretch; }
.price--featured { border-color: var(--accent); border-width: 2px; box-shadow: var(--shadow); }

/* ---------- Tabellen ---------------------------------------------------- */
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; }
table.data caption { text-align: left; padding-bottom: .5rem; font-size: .92rem; color: var(--ink-soft); }
table.data th, table.data td { text-align: left; padding: .72rem .9rem; border-bottom: 1px solid var(--line); }
table.data thead th { background: var(--water); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .93rem; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:nth-child(even) { background: rgba(8,74,107,.04); }
table.data td:last-child, table.data th:last-child { white-space: nowrap; }

/* ---------- Citaten ----------------------------------------------------- */
.quote {
  background: var(--white); border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-lg); padding: 1.3rem; margin: 0;
  box-shadow: var(--shadow-sm);
  display: grid; align-content: start;
}
.quote p { font-size: 1rem; }
.quote .stars { color: var(--accent); letter-spacing: .12em; font-size: 1rem; margin-bottom: .6rem; }
.quote footer { margin-top: .9rem; }
.quote cite { font-style: normal; font-family: var(--font-display); font-weight: 700; color: var(--water); }

/* ---------- FAQ --------------------------------------------------------- */
.faq { display: grid; gap: .7rem; max-width: 52rem; }
.faq details {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.faq summary {
  cursor: pointer; list-style: none; padding: .85rem 2.6rem .85rem 1rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.03rem;
  position: relative; border-radius: var(--radius);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.1rem; top: 1.3rem;
  width: .6rem; height: .6rem;
  border-right: 3px solid var(--accent); border-bottom: 3px solid var(--accent);
  transform: rotate(45deg); transition: transform .15s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.55rem; }
.faq details > div { padding: 0 1rem 1rem; color: var(--ink-soft); }

/* ---------- Kaart van het werkgebied ------------------------------------ */
.map-region { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 58rem) { .map-region { grid-template-columns: .95fr 1.05fr; gap: 3rem; } }
.region-map { width: 100%; max-width: 27rem; margin-inline: auto; }
.region-map .polder { fill: var(--groen-soft); stroke: var(--groen); stroke-width: 2.5; stroke-dasharray: 10 8; }
.region-map .spoke { stroke: var(--azuur); stroke-width: 2; stroke-dasharray: 5 6; opacity: .55; }
.region-map .dot { fill: var(--water); }
.region-map .dot--home { fill: var(--accent); }
.region-map .ring { fill: none; stroke: var(--accent); stroke-width: 3; }
.region-map text {
  font-family: var(--font-display); font-weight: 700; font-size: 19px; fill: var(--ink);
}
.region-map .label--home { fill: var(--accent-deep); font-size: 21px; }

.place-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
@media (min-width: 34rem) { .place-list { grid-template-columns: repeat(2, 1fr); } }
.place-list a {
  display: block; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .7rem .95rem;
  text-decoration: none; color: var(--ink);
  font-family: var(--font-display); font-weight: 700;
  transition: border-color .12s ease, transform .12s ease;
}
.place-list a:hover { border-color: var(--accent); transform: translateX(3px); color: var(--water); }
.place-list a span { display: block; font-family: var(--font-body); font-weight: 400; font-size: .88rem; color: var(--ink-soft); }

/* ---------- CTA-blok ---------------------------------------------------- */
.cta {
  background:
    radial-gradient(40rem 22rem at 100% 0%, rgba(0,129,197,.55), transparent 62%),
    linear-gradient(120deg, var(--water) 0%, var(--water-deep) 100%);
  color: #fff; border-radius: var(--radius-lg);
  padding: 2rem; display: grid; gap: 1.4rem; align-items: center;
}
@media (min-width: 54rem) { .cta { grid-template-columns: 1.2fr auto; padding: 2.4rem 2.8rem; } }
.cta h2 { color: #fff; margin-bottom: .35em; }
.cta p { color: rgba(255,255,255,.88); margin: 0; }

/* ---------- Contact ----------------------------------------------------- */
.contact-grid { display: grid; gap: 2rem; }
@media (min-width: 58rem) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } }
.nap { font-style: normal; display: grid; gap: .1rem; margin: 1.2rem 0; }
.nap strong { font-family: var(--font-display); font-size: 1.05rem; }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.contact-list a { font-weight: 600; }

.map-link { display: block; text-decoration: none; color: var(--azuur-deep); }
.map-link img { border-radius: var(--radius-lg); border: 1px solid var(--line); width: 100%; }
.map-link span { display: inline-block; margin-top: .6rem; font-family: var(--font-display); font-weight: 700; }
.map-link span::after { content: " \2192"; }

/* ---------- Voettekst --------------------------------------------------- */
.site-footer {
  background: var(--water-darkest); color: rgba(255,255,255,.78);
  padding: 3rem 0 1.8rem;
}
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 44rem) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.4rem; } }
.site-footer h2 { font-size: 1rem; color: #fff; margin-bottom: .8rem; letter-spacing: -.01em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.site-footer a { color: rgba(255,255,255,.8); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .nap { color: rgba(255,255,255,.8); }
.site-footer .nap strong { color: #fff; }
.footer-logo {
  display: inline-block; background: #fff; padding: .55rem .7rem;
  border-radius: 12px; margin-bottom: 1rem;
}
.footer-logo img { width: 132px; }
.footer-legal {
  margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .88rem; color: rgba(255,255,255,.62);
}

/* ---------- Formulier --------------------------------------------------- */
.lead-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form { display: grid; gap: .75rem; }
.lead-form [hidden] { display: none; }
.lead-form__row { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 32rem) { .lead-form__row { grid-template-columns: 1fr; } }
.lead-form__field { display: grid; gap: .25rem; font-size: .95rem; }
.lead-form__field > span { font-family: var(--font-display); font-weight: 600; }
.lead-form__field input,
.lead-form__field select,
.lead-form__field textarea {
  font: inherit;
  padding: .62rem .72rem;
  border: 1px solid var(--form-border, rgba(14,31,43,.3));
  border-radius: var(--radius);
  background: var(--form-surface, #fff);
  color: var(--form-text, #0e1f2b);
  width: 100%;
  color-scheme: var(--form-color-scheme, light);
}
.lead-form__field input::placeholder,
.lead-form__field textarea::placeholder { color: var(--form-placeholder, rgba(14,31,43,.55)); opacity: 1; }
.lead-form__field select option { color: var(--form-text, #0e1f2b); background: var(--form-surface, #fff); }
.lead-form__field :focus-visible { outline: 3px solid var(--form-focus-ring, var(--accent-deep)); outline-offset: 2px; }
.lead-form__submit { justify-self: stretch; }
.lead-form__submit:disabled { opacity: .65; cursor: not-allowed; }
.lead-form__note { font-size: .85rem; color: var(--ink-soft); margin: 0; }
.lead-form__status:empty { display: none; }
.lead-form__status {
  font-size: .92rem;
  color: var(--form-error-text, var(--error));
  background: var(--form-surface, #fff);
  border: 1px solid var(--line);
  padding: .6rem .8rem; border-radius: var(--radius);
}
.lead-form__status--done {
  color: var(--form-success-text, var(--ink));
  border-color: var(--accent); background: var(--accent-soft);
  padding: 1rem;
}
.lead-form__status--done:focus { outline: 3px solid var(--accent-deep); outline-offset: 2px; }

/* ---------- Overzichtspagina -------------------------------------------- */
.sitemap-cols { display: grid; gap: 1.8rem; }
@media (min-width: 44rem) { .sitemap-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .sitemap-cols { grid-template-columns: repeat(3, 1fr); } }
.sitemap-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.sitemap-cols li a { font-weight: 600; }