:root {
  /* Huisstijl jobs2drive */
  --bg-1: #FFFFFF;   /* achtergrond 1 */
  --bg-2: #EDF0F8;   /* achtergrond 2 */
  --banner: #1C44A4; /* banner / hero / accent */
  --accent: #FFD700; /* knoppen & footer */

  /* Afgeleide tinten voor diepte binnen de huisstijl */
  --blue-700: #163a8c; /* hover op blauw */
  --blue-050: #eaf0fb; /* zachte blauwtint */
  --accent-700: #e6c200;

  /* Diepe navy voor de donkere secties (hero + begeleiding) */
  --navy-900: #131d3c;
  --navy-800: #16223d;

  --text: #16223d;
  --text-muted: #55607a;
  --line: #d8deee;
  --on-banner: #FFFFFF;
  --on-accent: #16223d;      /* donkere tekst op geel — nooit wit */
  --on-dark: rgba(255,255,255,.82); /* body-tekst op navy */
  --err: #c0392b;

  /* Verloop (alleen nog de donkere begeleidingssectie) */
  --grad-dark: linear-gradient(165deg, #1e3c82 0%, #16223d 72%);

  --shadow-sm: 0 1px 3px rgba(22, 34, 61, .08);
  --shadow-md: 0 8px 28px rgba(22, 34, 61, .10);
  --shadow-lg: 0 20px 50px rgba(22, 34, 61, .16);

  --font: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maxw: 1280px;
  --radius: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* De header plakt bovenaan; ankerdoelen moeten eronderuit blijven */
section[id] { scroll-margin-top: 116px; }

html, body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg-1);
  /* Prettig leesbaar, maar niet te groot */
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { line-height: 1.2; margin: 0; color: var(--text); }
p { margin: 0; }
a { color: var(--banner); }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--banner);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ----- Knoppen ----- */
.btn {
  text-wrap: balance;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  padding: 15px 30px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { background: var(--accent-700); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--lg { padding: 18px 34px; font-size: 1.15rem; }
.btn--block { width: 100%; }
/* Blauwe variant — o.a. de verzendknop van het formulier */
.btn--blue { background: var(--banner); color: #fff; }
.btn--blue:hover { background: var(--blue-700); }

/* ----- Secties ----- */
.section { padding: 80px 0; }
.section--alt { background: var(--bg-2); }
.section--dark { background: var(--grad-dark); color: #fff; }
.section--dark .section-head h2 { color: #fff; }
.section--dark .section-head p { color: var(--on-dark); }

.section-head { max-width: 700px; margin: 0 auto 44px; text-align: center; }
.section-head h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); }
.section-head p { margin-top: 14px; color: var(--text-muted); font-size: 1.02rem; }


/* ----- Header ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 100px;
}
.brand { flex: 0 0 auto; }
.brand img { height: 48px; width: auto; }
.nav {
  display: flex;
  gap: 8px;
  margin-inline: auto;
}
.nav a {
  text-decoration: none;
  color: var(--banner);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.nav a:hover { background: var(--blue-050); }
.nav a[aria-current] {
  background: var(--banner);
  color: var(--on-banner);
}

.header-contact { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--banner);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.phone svg { width: 18px; height: 18px; }
.icon-btn {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 999px;
  border: 0;
  color: #fff;
  background: var(--banner);
  transition: background .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--blue-700); }

/* Accountmenu: knop met uitklaplijst */
.account { position: relative; }
.account__btn { padding: 0; font: inherit; cursor: pointer; }
.account__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 6px;
  display: grid;
  z-index: 60;
}
.account__menu[hidden] { display: none; }
.account__menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--banner);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.account__menu a:hover { background: var(--blue-050); }
.icon-btn svg { width: 15px; height: 15px; }

/* WhatsApp: het merklogo tekent zelf al een cirkel, dus geen schijf eronder */
.icon-btn--wa { background: none; color: var(--banner); }
.icon-btn--wa:hover { background: none; color: var(--blue-700); }
.icon-btn--wa svg { width: 26px; height: 26px; }

.nav-toggle { display: none; }

/* ----- Hero (blauwe banner) ----- */
.hero {
  /* Eén vlakke huisstijlkleur, geen verloop */
  background: var(--banner);
  color: #fff;
  padding: 84px 0 96px;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 48px;
  align-items: center;
}
.hero h1 {
  color: #fff;
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  margin: 0 0 18px;
  letter-spacing: -.01em;
}
/* Past op één regel binnen de tekstkolom; wrapt vanzelf op smallere schermen */
.hero .lead { font-size: 1.08rem; color: rgba(255,255,255,.82); }

.checklist { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 14px; }
.checklist li { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; }
.check {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--banner);
  display: grid; place-items: center;
  margin-top: 1px;
}
.check svg { width: 15px; height: 15px; color: #fff; }
/* In de hero zijn de vinkjes goudgeel met donkere check */
.hero .check { background: var(--accent); }
.hero .check svg { color: var(--navy-800); }

.hero-cta { margin-top: 8px; }
small { font-size: .95rem; }
.hero-cta small { display: block; margin-top: 12px; color: rgba(255,255,255,.62); font-size: .98rem; }

/* Foto rechts in de hero */
.hero__media { display: flex; position: relative; }
.hero-photo {
  width: 100%;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 3px solid rgba(255,255,255,.14);
  aspect-ratio: 5 / 4;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 85%;
}
/* Tweede foto, half over de rechteronderhoek van de eerste */
.hero-inset {
  position: absolute;
  right: -14px;
  bottom: -30px;
  width: 46%;
  max-width: 210px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
  border: 4px solid #fff;
  box-shadow: var(--shadow-lg);
}

/* ----- Kaarten ----- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.cards--trust { grid-template-columns: repeat(4, 1fr); }
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #c7d2ee; }
/* Feature-kaarten (Wat doet een PensioenChauffeur?) — gouden bovenrand */
.cards--feature .card { border-top: 3px solid var(--accent); }
.card__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--blue-050);
  color: var(--banner);
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.12rem; margin-bottom: 9px; }
.card p { color: var(--text-muted); font-size: .96rem; }

/* ----- Ritkaarten (Wat doet een PensioenChauffeur?) ----- */
.ritkaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ritkaart {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ritkaart:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #c7d2ee; }
.ritkaart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.ritkaart__kicker {
  font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted);
}
.ritkaart__time {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue-050); color: var(--banner);
  font-weight: 700; font-size: .76rem;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.ritkaart__time svg { width: 14px; height: 14px; }
.ritkaart__route {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px; padding-bottom: 18px;
  border-bottom: 1px dashed var(--line);
}
.ritkaart__from, .ritkaart__to {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: .84rem; color: var(--text); white-space: nowrap;
}
.ritkaart__dot {
  width: 11px; height: 11px; border-radius: 999px;
  background: var(--banner); box-shadow: 0 0 0 3px var(--blue-050);
}
.ritkaart__to svg { width: 17px; height: 17px; color: var(--banner); }
.ritkaart__track { position: relative; flex: 1; border-top: 2px dashed #bcc9ea; }
.ritkaart__track::after {
  content: "";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 24px; height: 24px; border-radius: 6px;
  background: #fff no-repeat center/17px 17px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C44A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17h14M6 17l1.4-5.2A2 2 0 0 1 9.3 10h5.4a2 2 0 0 1 1.9 1.4L18 17M7 17v1.6M17 17v1.6'/%3E%3C/svg%3E");
}
.ritkaart h3 { font-size: 1.12rem; margin-bottom: 9px; }
.ritkaart p { color: var(--text-muted); font-size: .96rem; }

/* Kaarten op de donkere begeleidingssectie */
.section--dark .card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
  text-align: center;
}
.section--dark .card:hover { transform: translateY(-4px); background: rgba(255,255,255,.09); box-shadow: none; border-color: rgba(255,255,255,.24); }
.section--dark .card__icon {
  background: rgba(255,255,255,.1);
  color: var(--accent);
  margin-inline: auto;
}
.section--dark .card h3 { color: #fff; }
.section--dark .card p { color: var(--on-dark); }

/* ----- Zelf-check (Past dit bij u?) ----- */
.selfcheck {
  list-style: none; padding: 0; margin: 0 auto; max-width: 760px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.selfcheck__item {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-2);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  cursor: pointer; user-select: none;
  font-weight: 600; font-size: 1.02rem;
  transition: border-color .15s ease, background .15s ease;
}
.selfcheck__item:hover { border-color: var(--banner); }
.selfcheck__box { position: absolute; opacity: 0; width: 1px; height: 1px; }
.selfcheck__mark {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px;
  border: 2px solid #c2cbe0; background: #fff; color: #fff;
  display: grid; place-items: center;
  transition: background .15s ease, border-color .15s ease;
}
.selfcheck__mark svg { width: 15px; height: 15px; opacity: 0; transition: opacity .15s ease; }
.selfcheck__item:has(.selfcheck__box:checked) { border-color: var(--banner); background: #fff; }
.selfcheck__item:has(.selfcheck__box:checked) .selfcheck__mark { background: var(--banner); border-color: var(--banner); }
.selfcheck__item:has(.selfcheck__box:checked) .selfcheck__mark svg { opacity: 1; }
.selfcheck__item:has(.selfcheck__box:focus-visible) { outline: 3px solid var(--banner); outline-offset: 2px; }

.selfcheck__foot { max-width: 760px; margin: 26px auto 0; display: grid; gap: 16px; justify-items: center; text-align: center; }
.selfcheck__result { font-weight: 700; font-size: 1.1rem; color: var(--text); min-height: 1.6em; }
.selfcheck__cta[hidden] { display: none; }

/* ----- Route (Hoe werkt het?) ----- */
.route { list-style: none; max-width: 640px; margin: 0 auto; padding: 0; }
.route__stop, .route__finish {
  position: relative;
  display: grid; grid-template-columns: 48px 1fr; gap: 22px;
  padding-bottom: 32px;
}
.route__finish { padding-bottom: 0; align-items: center; }
.route__stop::before {
  content: "";
  position: absolute; left: 23px; top: 52px; bottom: -4px;
  width: 0; border-left: 2px dashed #bcc9ea;
}
.route__pin {
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--navy-800); color: #fff;
  font-weight: 800; font-size: 1.25rem;
  display: grid; place-items: center;
  position: relative; z-index: 1;
}
.route__flag {
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--accent); color: var(--navy-800);
  display: grid; place-items: center;
  position: relative; z-index: 1;
}
.route__flag svg { width: 24px; height: 24px; }
.route__body { padding-top: 8px; }
.route__finish .route__body { padding-top: 0; }
.route__line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.route__line h3 { font-size: 1.15rem; }
.route__time {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue-050); color: var(--banner);
  font-weight: 700; font-size: .88rem;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.route__time svg { width: 13px; height: 13px; }
.route__body p { color: var(--text-muted); font-size: 1rem; }
.route__finish .route__body h3 { color: var(--banner); }

/* ----- Stappen (verticaal, met verbindingslijn) ----- */
.steps { max-width: 660px; margin: 0 auto; display: grid; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 22px;
  padding-bottom: 34px;
}
.step:last-child { padding-bottom: 0; }
.step::before {
  content: "";
  position: absolute;
  left: 23px; top: 52px; bottom: -4px;
  width: 2px; background: var(--line);
}
.step:last-child::before { display: none; }
.step__num {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--navy-800);
  color: #fff;
  font-weight: 800; font-size: 1.25rem;
  display: grid; place-items: center;
  position: relative; z-index: 1;
}
.step__body h3 { font-size: 1.15rem; margin-bottom: 6px; padding-top: 9px; }
.step__body p { color: var(--text-muted); font-size: 1rem; }

/* ----- FAQ ----- */
.faq { max-width: 800px; margin-inline: auto; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 24px;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-size: 1.6rem; font-weight: 400; color: var(--banner);
  line-height: 1;
  transition: transform .2s ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding: 0 24px 22px; color: var(--text-muted); }

/* ----- Formulier ----- */
.form-intro { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.form-intro h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); }
.form-intro p { margin-top: 14px; color: var(--text-muted); font-size: 1.02rem; }

.form-card {
  max-width: 660px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 40px;
  box-shadow: var(--shadow-md);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: .98rem; }
.field .req { color: var(--err); }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 1.02rem;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--banner);
  box-shadow: 0 0 0 3px var(--blue-050);
  outline: none;
}
.field textarea { resize: vertical; min-height: 100px; }
.hint { color: var(--text-muted); font-size: .9rem; font-weight: 400; }

/* ----- Custom dropdown (progressive enhancement) ----- */
.js-select.is-enhanced { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.select { position: relative; }
.select__button {
  width: 100%;
  font: inherit;
  font-size: 1.02rem;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.select__button:hover { border-color: var(--banner); }
.select.is-open .select__button,
.select__button:focus-visible {
  border-color: var(--banner);
  box-shadow: 0 0 0 3px var(--blue-050);
  outline: none;
}
.select__button.is-placeholder { color: var(--text-muted); }
.select__chevron { flex: 0 0 auto; width: 20px; height: 20px; color: var(--banner); transition: transform .2s ease; }
.select.is-open .select__chevron { transform: rotate(180deg); }

.select__menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0; right: 0;
  margin: 0; padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  max-height: 280px;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.select.is-open .select__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.select__option {
  padding: 11px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  color: var(--text);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.select__option:hover,
.select__option.is-active { background: var(--blue-050); }
.select__option[aria-selected="true"] { color: var(--banner); font-weight: 700; }
.select__option[aria-selected="true"]::after {
  content: "";
  width: 16px; height: 16px; flex: 0 0 auto;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C44A4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.field.is-invalid .select__button { border-color: var(--err); box-shadow: 0 0 0 3px rgba(192,57,43,.12); }
@media (prefers-reduced-motion: reduce) { .select__menu { transition: visibility .16s; } }

/* Validatie */
.error-msg {
  display: none;
  color: var(--err);
  font-size: .9rem;
  font-weight: 600;
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--err); box-shadow: 0 0 0 3px rgba(192,57,43,.12); }
/* Zodra er een keer met fouten verzonden is, houden we de plek van elke
   foutmelding vrij. Anders springt het formulier omhoog op het moment dat een
   fout verdwijnt, en landt een klik op de knop eronder naast het doel. */
.form-card.is-validated .error-msg { display: block; visibility: hidden; }
.field.is-invalid .error-msg,
.fieldset-field.is-invalid .error-msg,
.consent.is-invalid .error-msg { display: block; visibility: visible; }
.fieldset-field.is-invalid .radio-chip { border-color: var(--err); }

fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
fieldset legend { font-weight: 700; font-size: .98rem; padding: 0; margin-bottom: 4px; }
.radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.radio-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: 10px 18px; cursor: pointer; font-weight: 600; font-size: .98rem;
  transition: border-color .15s ease, background .15s ease;
}
.radio-chip:hover { border-color: var(--banner); }
.radio-chip input { accent-color: var(--banner); width: 18px; height: 18px; }
.radio-chip:has(input:checked) { border-color: var(--banner); background: var(--blue-050); }

.consent { display: flex; align-items: flex-start; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.consent input { accent-color: var(--banner); width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto; }
.consent label { font-size: .98rem; font-weight: 600; flex: 1; min-width: 220px; }
.consent .error-msg { flex-basis: 100%; }

.form-foot { margin-top: 24px; }
.form-foot small { display: block; text-align: center; margin-top: 14px; color: var(--banner); font-weight: 600; }

/* ----- Bedankpagina ----- */
.bedankt__card {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 48px 40px;
}
.bedankt__icon {
  width: 72px; height: 72px;
  margin: 0 auto 24px;
  border-radius: 999px;
  background: var(--blue-050);
  display: grid; place-items: center;
}
.bedankt__icon svg { width: 36px; height: 36px; color: var(--banner); }
.bedankt__card h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 12px; }
.bedankt__lead { color: var(--text-muted); font-size: 1.08rem; }
.bedankt__lijst {
  list-style: none; padding: 0;
  margin: 28px auto;
  max-width: 460px;
  display: grid; gap: 12px;
  text-align: left;
}
.bedankt__lijst li {
  position: relative;
  padding-left: 30px;
  font-weight: 600;
}
/* Gouden bolletje als opsommingsteken, in lijn met de rest van de pagina */
.bedankt__lijst li::before {
  content: "";
  position: absolute; left: 8px; top: .62em;
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--accent);
}
.bedankt__hulp { color: var(--text-muted); margin-bottom: 28px; }
.bedankt__hulp a { font-weight: 700; white-space: nowrap; }

/* ----- CTA-strook met foto ----- */
.cta-band {
  position: relative;
  background:
    linear-gradient(rgba(19,29,60,.82), rgba(19,29,60,.9)),
    url("public/achtergrond.jpg") center 30%/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 76px 0;
}
.cta-band__inner { max-width: 680px; margin-inline: auto; }
.cta-band h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 14px; }
.cta-band p { color: var(--on-dark); margin-bottom: 28px; font-size: 1.05rem; }

/* ----- Footer (compacte gele balk) ----- */
.site-footer { background: var(--accent); color: var(--on-accent); padding: 22px 0; }
.site-footer__bar {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 40px; gap: 16px;
}
.site-footer__legal { text-align: center; font-size: .9rem; font-weight: 600; }
.site-footer__legal a { color: var(--on-accent); text-decoration: none; }
.site-footer__legal a:hover { text-decoration: underline; }
.site-footer__sep { opacity: .45; margin: 0 10px; }
.site-footer__social {
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 16px;
}
.site-footer__social a { color: var(--on-accent); display: grid; place-items: center; transition: opacity .15s ease; }
.site-footer__social a:hover { opacity: .65; }
.site-footer__social svg { width: 20px; height: 20px; }

/* Terug-naar-boven knop */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 44px; height: 44px; border-radius: 999px;
  border: 0; cursor: pointer;
  background: var(--accent-700); color: var(--on-accent);
  box-shadow: var(--shadow-md);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent); }
.to-top svg { width: 22px; height: 22px; }

/* ----- Responsive ----- */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__media { justify-content: flex-start; }
  .cards { grid-template-columns: 1fr 1fr; }
  .cards--trust { grid-template-columns: 1fr 1fr; }
  .ritkaarten { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }

  .hero-inset { width: 38%; max-width: 160px; right: 0; bottom: -22px; }

  .header-contact .phone { display: none; }
  .nav { display: none; }
  .nav.is-open {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff;
    padding: 12px 24px 16px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
  }
  /* Ruimere regels: prettiger aan te tikken en beter leesbaar */
  .nav.is-open a { padding: 13px 14px; font-size: 16px; }
  .header-contact { margin-inline-start: auto; }
  .nav-toggle {
    display: grid; place-items: center; margin-inline-start: 0;
    width: 46px; height: 46px; border-radius: 10px;
    border: 1.5px solid var(--banner); background: #fff; color: var(--banner); cursor: pointer;
  }
  .nav-toggle svg { width: 24px; height: 24px; }

  /* Een balk van 100px vreet 15% van een telefoonscherm */
  .site-header__inner { gap: 12px; min-height: 68px; }
  .brand { display: flex; align-items: center; min-height: 44px; }
  .brand img { height: 36px; }
  section[id] { scroll-margin-top: 84px; }

  /* Iconen blijven optisch even groot, maar krijgen een tikvlak van 44px */
  .icon-btn, .site-footer__social a { position: relative; }
  .icon-btn::after, .site-footer__social a::after {
    content: "";
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
  }
  .header-contact { gap: 20px; }
  /* Meegroeien vult de rij; links uitlijnen houdt het bolletje op zijn plek
     als de tekst over twee regels loopt */
  .radio-chip { flex: 1 1 auto; justify-content: flex-start; padding: 12px 14px; }
  .site-footer__social { gap: 22px; }
}

@media (max-width: 620px) {
  .section { padding: 56px 0; }
  .hero { padding: 52px 0 64px; }
  .cards, .cards--trust { grid-template-columns: 1fr; }
  .selfcheck { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 26px; }
  .site-footer { padding: 26px 0; }
  .site-footer__bar { flex-direction: column; gap: 14px; }
  .site-footer__social { position: static; transform: none; }
  .site-footer__legal { line-height: 2; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}