/* ==========================================================================
   Autorijschool Boeve
   Kleuren komen uit het eigen logo: de donkere leiblauwe plaat, de rode ring,
   het groen van de berm en het lichtblauw van de lucht. Het beeldmerk is dat
   ronde wegbadge-motief; de accentstreep onder de koppen is de wegmarkering.
   ========================================================================== */

/* --- lettertypen, zelf gehost (geen externe verzoeken) ------------------- */
@font-face {
  font-family: 'Anybody';
  src: url('/assets/fonts/anybody-latin.woff2') format('woff2');
  font-weight: 100 900;
  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+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Anybody';
  src: url('/assets/fonts/anybody-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  src: url('/assets/fonts/mulish-latin.woff2') format('woff2');
  font-weight: 200 1000;
  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+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Mulish';
  src: url('/assets/fonts/mulish-latin-ext.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- tokens -------------------------------------------------------------- */
:root {
  --ink: #14303a;
  --ink-2: #1e4351;
  --ink-3: #2d5b6b;
  --paper: #ffffff;
  --sand: #f2f6f6;
  --sand-2: #e6eeee;
  --green: #009a44;
  --green-dark: #017436;
  --green-soft: #e4f4ea;
  --red: #d9301f;
  --sky: #4aa8de;
  --sky-soft: #e8f3fb;
  --text: #16303a;
  --muted: #4c6570;
  --line: rgba(20, 48, 58, .14);
  --error: #b3261e;

  --font-display: 'Anybody', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius: 10px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(20, 48, 58, .06), 0 8px 26px rgba(20, 48, 58, .08);
  --shadow-lg: 0 24px 60px rgba(20, 48, 58, .22);
  --accent: var(--green);
}

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

html { -webkit-text-size-adjust: 100%; 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;
  font-family: var(--font-body);
  font-size: clamp(1rem, .97rem + .15vw, 1.075rem);
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 .6em;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.3rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

a { color: var(--green-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

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

strong { font-weight: 800; }
small { font-size: .84em; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .7rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.wrap { width: min(100% - 2.5rem, 1160px); margin-inline: auto; }
/* Een smalle leeskolom, maar met dezelfde linkerkantlijn als een gewone
   sectie. Een gecentreerde smalle wrap zou de koppen van de ene sectie ruim
   150 px verder naar rechts zetten dan die van de volgende, en dat leest als
   een uitlijnfout in plaats van als een keuze. */
.wrap--narrow > * { max-width: 800px; }
.wrap--center { text-align: center; }
.wrap--center > * { max-width: 780px; margin-inline: auto; }
@media (max-width: 32rem) { .wrap { width: calc(100% - 1.9rem); } }

.section { padding: clamp(3rem, 1.6rem + 5vw, 5.5rem) 0; }
.section--tight { padding: clamp(2.2rem, 1.4rem + 3vw, 3.6rem) 0; }
/* De introductie van een detailpagina hoort bij de sectie eronder. Zonder deze
   regel stapelen twee sectiepaddings op elkaar en staat er een gat van ruim
   100 px tussen de inleiding en de eerste inhoud. */
.page-intro { padding-bottom: 0; }
.section--sand { background: var(--sand); }
.section--ink { background: var(--ink); color: #e9f2f4; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
/* Alleen gewone tekstlinks meekleuren. Zonder :not(.btn) wint deze regel van
   .btn--primary en .btn--light (beide één klasse, deze selector klasse plus
   element), en kreeg de knoptekst de mintkleur op een witte of groene knop. */
.section--ink a:not(.btn) { color: #b8ecd0; }
.section--ink a:not(.btn):hover { color: #fff; }

.mt-1 { margin-top: .8rem; }
.mt-2 { margin-top: 1.6rem; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin: 0 0 .7rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 4px;
  background: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 12px);
  border-radius: 2px;
  flex: none;
}
.section--ink .eyebrow { color: #7ddaa4; }

.lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem); color: var(--muted); }
.section--ink .lead { color: #c4d9de; }

/* --- knoppen ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  padding: .85rem 1.35rem;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-dark); color: #fff; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-2); color: #fff; }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--sand-2); color: var(--ink); }
.btn--outline-light { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.btn--outline-light:hover { background: #fff; color: var(--ink); }
.btn--sm { padding: .55rem 1rem; font-size: .92rem; }
.btn--wide { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.btn-row--center { justify-content: center; }

/* --- beeldmerk ----------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; }
.brand__mark { width: 44px; height: 44px; flex: none; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.32rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}
.brand__sub {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .22rem;
}
.site-footer .brand__name { color: #fff; }
.site-footer .brand__sub { color: #9dbcc4; }

/* --- header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 72px;
  padding: .55rem 0;
}
.header-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.header-call { white-space: nowrap; }
/* Op een smal scherm passen merknaam, telefoonnummer en menuknop niet samen op
   één regel (samen 459 px bij een viewport van 390 px). Onder 34rem toont de
   belknop daarom alleen het telefoonicoon; het nummer zelf blijft voor
   schermlezers in het aria-label van de knop staan. */
@media (max-width: 34rem) {
  .header-call__label { display: none; }
  .header-call { padding-inline: .7rem; }
  .brand__mark { width: 38px; height: 38px; }
  .brand__name { font-size: 1.15rem; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .55rem 1rem;
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 3px; }
.nav-toggle__bars span { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }

.nav { display: none; }
.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  padding: .7rem .2rem;
  border-bottom: 1px solid var(--line);
}
.nav__link[aria-current="page"] { color: var(--green-dark); }
.nav.is-open {
  display: block;
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: .4rem 1.25rem 1.25rem;
}
.nav.is-open .nav__cta { margin-top: 1rem; display: inline-flex; }

@media (min-width: 62rem) {
  .nav-toggle { display: none; }
  .nav {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    margin-left: auto;
  }
  .nav__list { display: flex; align-items: center; gap: 1.1rem; }
  .nav__link {
    padding: .3rem 0;
    border-bottom: 2px solid transparent;
    font-size: .96rem;
  }
  .nav__link:hover { border-bottom-color: var(--green); }
  .nav__link[aria-current="page"] { border-bottom-color: var(--green); }
  .header-actions { margin-left: .6rem; }
}

/* --- hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: #e9f2f4;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(20,48,58,.94) 0%, rgba(20,48,58,.82) 46%, rgba(20,48,58,.6) 100%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.4rem);
  padding: clamp(2.6rem, 1.5rem + 5vw, 5rem) 0 clamp(2.6rem, 1.5rem + 4vw, 4.4rem);
}
@media (min-width: 60rem) {
  .hero__inner { grid-template-columns: 1.15fr .85fr; align-items: center; }
}
.hero h1 { color: #fff; margin-bottom: .5em; }
.hero__lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: #cadfe4; max-width: 44ch; }
.hero .eyebrow { color: #7ddaa4; }

.hero__points {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: .5rem;
}
.hero__points li { display: flex; gap: .6rem; align-items: flex-start; margin: 0; color: #dbebee; }
.hero__points svg { width: 1.15em; height: 1.15em; color: #7ddaa4; flex: none; margin-top: .28em; }

.hero__actions { margin-top: 1.8rem; }

/* het formulierkaartje in de hero */
.hero-card {
  background: #fff;
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  box-shadow: var(--shadow-lg);
  border-top: 6px solid var(--green);
}
.hero-card h2 { font-size: 1.35rem; margin-bottom: .35em; }
.hero-card__note { font-size: .92rem; color: var(--muted); margin-bottom: 1.1rem; }

/* --- de leskaart: de visuele signatuur ----------------------------------- */
/* Gerrit werkt met persoonlijke leskaarten; dat kaartje met afvinkregels is
   op de site het terugkerende motief voor stappen en modules. */
.leskaart {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.leskaart__head {
  background: var(--ink);
  color: #fff;
  padding: .9rem 1.2rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .02em;
}
.leskaart__head svg { width: 1.3em; height: 1.3em; color: #7ddaa4; }
.leskaart__body { padding: .4rem 1.2rem 1.1rem; }
.leskaart__row {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: .85rem 0;
  border-bottom: 1px dashed var(--line);
}
.leskaart__row:last-child { border-bottom: 0; }
.leskaart__tick {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--green-soft);
  color: var(--green-dark);
  display: grid;
  place-items: center;
  flex: none;
  margin-top: .1rem;
}
.leskaart__tick svg { width: 15px; height: 15px; }
.leskaart__row h3 { font-size: 1.02rem; margin: 0 0 .15em; }
.leskaart__row p { margin: 0; font-size: .95rem; color: var(--muted); }

/* --- kaarten ------------------------------------------------------------- */
.grid { display: grid; gap: 1.1rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.section--sand .card { box-shadow: var(--shadow); border-color: transparent; }
.card__icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--green-soft);
  color: var(--green-dark);
  margin-bottom: 1rem;
}
.card__icon svg { width: 24px; height: 24px; }
.card--sky .card__icon { background: var(--sky-soft); color: #1c6ea3; }
.card h3 { margin-bottom: .4em; }
.card p { color: var(--muted); margin-bottom: 1rem; }
.card p:last-child { margin-bottom: 0; }
.card__link {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.card__link svg { width: 1.05em; height: 1.05em; transition: transform .15s ease; }
.card__link:hover svg { transform: translateX(3px); }

/* korte voordelen, vier op een rij */
.usp { display: flex; gap: .8rem; align-items: flex-start; }
.usp svg { width: 26px; height: 26px; color: var(--green); flex: none; margin-top: .15rem; }
.usp h3 { font-size: 1.02rem; margin-bottom: .2em; }
.usp p { margin: 0; font-size: .95rem; color: var(--muted); }

/* --- media-blok ---------------------------------------------------------- */
.media {
  display: grid;
  gap: clamp(1.6rem, 1rem + 3vw, 3rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .media { grid-template-columns: 1fr 1fr; }
  .media--flip .media__figure { order: 2; }
}
.media__figure { margin: 0; }
.media__figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.media__figure figcaption {
  font-size: .88rem;
  color: var(--muted);
  margin-top: .6rem;
}

.photo-strip { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.photo-strip figure { margin: 0; }
/* De bronfoto's hebben niet allemaal dezelfde verhouding (4:3 en 3:2). Zonder
   vaste aspect-ratio worden de kaarten in een strip ongelijk hoog. */
.photo-strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.photo-strip figcaption { font-size: .9rem; color: var(--muted); margin-top: .5rem; }

/* --- tarieven ------------------------------------------------------------ */
.prices {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
}
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.price-row:last-child { border-bottom: 0; }
.price-row--head {
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .82rem;
}
.price-name { font-weight: 700; display: flex; flex-direction: column; gap: .2rem; }
.price-name small { font-weight: 400; color: var(--muted); }
.price-row--head .price-name { font-weight: 700; }
.price-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  white-space: nowrap;
  color: var(--ink);
}
.price-row--head .price-amount { font-size: .82rem; color: #fff; }

.pakket {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
}
.pakket--top { border-color: var(--green); box-shadow: var(--shadow); }
.pakket__tag {
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--green-soft);
  color: var(--green-dark);
  padding: .3rem .65rem;
  border-radius: 999px;
  margin-bottom: .9rem;
}
.pakket__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.3rem;
  line-height: 1;
  color: var(--ink);
  margin: .3rem 0 .2rem;
}
.pakket__unit { font-size: .92rem; color: var(--muted); margin-bottom: 1rem; }
.pakket ul { list-style: none; padding: 0; margin: 0 0 1.3rem; }
.pakket li { display: flex; gap: .55rem; font-size: .96rem; }
.pakket li svg { width: 1.05em; height: 1.05em; color: var(--green); flex: none; margin-top: .35em; }
.pakket .btn { margin-top: auto; }

/* --- stappen ------------------------------------------------------------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.step {
  display: flex;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  margin: 0;
}
.step__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
.step__body h3 { font-size: 1.08rem; margin-bottom: .25em; }
.step__body p { margin: 0; color: var(--muted); font-size: .97rem; }

/* --- veelgestelde vragen ------------------------------------------------- */
.faq { display: grid; gap: .6rem; }
.faq__item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 1.15rem;
}
.faq__q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.03rem;
  cursor: pointer;
  padding: 1rem 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  width: 11px; height: 11px;
  border-right: 2.5px solid var(--green);
  border-bottom: 2.5px solid var(--green);
  transform: rotate(45deg);
  flex: none;
  margin-right: .3rem;
  transition: transform .18s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }
.faq__a { padding-bottom: 1.05rem; }
.faq__a p { margin: 0; color: var(--muted); }

/* --- contactblok --------------------------------------------------------- */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.contact-list li { display: flex; gap: .85rem; align-items: flex-start; margin: 0; }
.contact-list svg { width: 22px; height: 22px; color: var(--green); flex: none; margin-top: .25rem; }
.section--ink .contact-list svg { color: #7ddaa4; }
.contact-list strong { display: block; font-family: var(--font-display); font-size: .95rem; }
.contact-list a { text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

.map-link { display: block; text-decoration: none; }
.map-link img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.map-link span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
}
/* Zonder maat wordt het inline pin-icoon zo groot als de regelhoogte toelaat
   en duwt het de tekst uit elkaar. */
.map-link span svg { width: 1.15em; height: 1.15em; flex: none; }
.map-placeholder {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: var(--sand-2);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
  padding: 1rem;
}

.info-box {
  background: var(--sky-soft);
  border-left: 5px solid var(--sky);
  border-radius: var(--radius);
  padding: 1.15rem 1.3rem;
}
.info-box :last-child { margin-bottom: 0; }
.info-box h3 { font-size: 1.05rem; }

/* --- links --------------------------------------------------------------- */
.linklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.linklist li { margin: 0; }
.linklist a {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  text-decoration: none;
  font-weight: 700;
  color: var(--ink);
}
.linklist a:hover { border-color: var(--green); color: var(--green-dark); }
.linklist svg { width: 1.05em; height: 1.05em; color: var(--green); flex: none; }

/* --- kruimelpad ---------------------------------------------------------- */
.breadcrumb { padding: 1rem 0 0; font-size: .88rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.breadcrumb li { margin: 0; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; color: var(--line); }
.breadcrumb a { color: var(--muted); }

/* --- juridische tekst ---------------------------------------------------- */
.legal h2 { font-size: 1.35rem; margin-top: 2.2rem; }
.legal h3 { font-size: 1.08rem; margin-top: 1.5rem; }
.legal ul { padding-left: 1.2em; }
.legal li { color: var(--text); }

/* --- afsluitende oproep -------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band .lead { max-width: 58ch; margin-inline: auto; }

/* --- footer -------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: #c4d9de;
  padding: clamp(2.6rem, 1.6rem + 3vw, 4rem) 0 1.6rem;
}
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.site-footer h2 {
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7ddaa4;
  margin-bottom: 1rem;
}
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-list li { margin: 0; font-size: .95rem; }
.footer-list a { color: #c4d9de; text-decoration: none; }
.footer-list a:hover { color: #fff; text-decoration: underline; }
.social-row { display: flex; gap: .6rem; margin-top: 1.1rem; }
.social-row a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  display: grid;
  place-items: center;
  color: #c4d9de;
}
.social-row a:hover { background: var(--green); border-color: var(--green); color: #fff; }
.social-row svg { width: 20px; height: 20px; }
.footer-bottom {
  margin-top: 2.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.4rem;
  justify-content: space-between;
  font-size: .86rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.1rem; padding: 0; margin: 0; }
.footer-bottom li { margin: 0; }
.footer-bottom a { color: #9dbcc4; text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

/* --- vaste belbalk op de mobiel ------------------------------------------ */
.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: flex;
  gap: .5rem;
  padding: .55rem .8rem calc(.55rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(20,48,58,.1);
}
.callbar .btn { flex: 1; padding: .7rem .6rem; font-size: .95rem; }
@media (min-width: 62rem) { .callbar { display: none; } }
@media (max-width: 61.99rem) { body { padding-bottom: 4.4rem; } }

/* ==========================================================================
   Formulier. Eigen --form-*-tokens, zodat het veld ook in de donkere hero een
   leesbaar lichtvlak blijft.
   ========================================================================== */
.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-weight: 700; font-family: var(--font-display); font-size: .9rem; }
.lead-form__field input,
.lead-form__field select,
.lead-form__field textarea {
  font: inherit;
  padding: .65rem .75rem;
  border: 1px solid var(--form-border, rgba(20,48,58,.28));
  border-radius: var(--radius);
  background: var(--form-surface, #fff);
  color: var(--form-text, #16303a);
  width: 100%;
  color-scheme: var(--form-color-scheme, light);
}
.lead-form__field input::placeholder,
.lead-form__field textarea::placeholder {
  color: var(--form-placeholder, rgba(22,48,58,.6));
  opacity: 1;
}
.lead-form__field select option {
  color: var(--form-text, #16303a);
  background: var(--form-surface, #fff);
}
.lead-form__field :focus-visible {
  outline: 3px solid var(--form-focus-ring, var(--accent));
  outline-offset: 2px;
}

.lead-form__submit { justify-self: start; }
.lead-form__submit:disabled { opacity: .65; cursor: not-allowed; }
.lead-form__note { font-size: .85rem; color: var(--muted); margin: 0; }
.lead-form__status:empty { display: none; }
.lead-form__status {
  font-size: .9rem;
  color: var(--form-error-text, var(--error));
  background: var(--form-surface, #fff);
  padding: .6rem .8rem;
  border-radius: var(--radius);
}
.lead-form__status--done {
  color: var(--form-success-text, var(--form-text, #16303a));
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--green-soft);
}
.lead-form__status--done:focus {
  outline: 3px solid var(--form-focus-ring, var(--accent));
  outline-offset: 2px;
}

/* --- print --------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .callbar, .lead-form, .cta-band { display: none; }
  body { padding-bottom: 0; }
}