@charset "utf-8";
/* ==========================================================================
   Autorijschool Hartkamp, Barneveld
   Eén stylesheet. Kleuren en typografie komen uit het merk van de rijschool
   zelf: het met de hand geschilderde rode hart uit het logo en het schoolbord
   waarop de rijschool haar prijzen en groeten al jaren schrijft.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latinext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-stretch: 100%;
  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: 'Archivo';
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-stretch: 100%;
  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: 'Karla';
  src: url('/assets/fonts/karla-latin.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --ink-900: #151b1d;
  --ink-800: #1d2528;
  --ink-700: #2a3538;
  --ink-600: #3c4a4e;
  --ink-400: #667579;
  --muted: #5c6a6e;

  --hart: #c8382b;
  --hart-600: #a72b20;
  --hart-050: #fbeceb;

  --chalk: #f7f3ec;
  --chalk-2: #efe9df;
  --paper: #ffffff;
  --line: #e3dcd1;
  --line-strong: #cfc5b6;

  --accent-mint: #4f9d7d;
  --accent-sun: #e8a92c;
  --accent-sky: #4a86b8;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(21, 27, 29, .06), 0 3px 10px rgba(21, 27, 29, .05);
  --shadow-md: 0 4px 12px rgba(21, 27, 29, .08), 0 18px 40px rgba(21, 27, 29, .09);
  --shadow-lg: 0 10px 30px rgba(21, 27, 29, .13), 0 30px 70px rgba(21, 27, 29, .14);

  --wrap: 1180px;
  --wrap-narrow: 780px;

  --font-head: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Karla', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* leadformulier houdt zijn eigen kleuren, ook in de donkere hero */
  --form-surface: #ffffff;
  --form-text: #1d2528;
  --form-placeholder: #7d8a8d;
  --form-border: #cfc5b6;
  --form-focus-ring: var(--hart);
  --form-color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink-800);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--hart-600); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--hart); }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink-900);
  margin: 0 0 .55em;
  text-wrap: balance;
  /* lange samenstellingen mogen afbreken, maar alleen waar in de tekst zelf
     een zacht afbreekstreepje (­) staat. Automatisch afbreken hakte ook
     de merknaam doormidden ("Autorij-school"), en dat mag nooit. */
  overflow-wrap: break-word;
  hyphens: manual;
}
h1 { font-size: clamp(2.1rem, 1.35rem + 3.1vw, 3.75rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.85vw, 2.5rem); }
h3 { font-size: clamp(1.16rem, 1.03rem + .5vw, 1.4rem); letter-spacing: -.01em; }
h4 { font-size: 1.05rem; letter-spacing: -.005em; }
p, ul, ol, table { margin: 0 0 1.05em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.25em; }
li + li { margin-top: .35em; }
strong { font-weight: 700; }
small { font-size: .875rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
:focus-visible {
  outline: 3px solid var(--hart);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--hart); color: #fff; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink-900); color: #fff; padding: .8rem 1.2rem;
  border-radius: 0 0 10px 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.2rem); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: clamp(3.2rem, 2rem + 5vw, 5.6rem); }
.section--tight { padding-block: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); }
.section--paper { background: var(--paper); }
.section--chalk2 { background: var(--chalk-2); }
.section--ink { background: var(--ink-900); color: #e9e5dd; }
.section--ink h2, .section--ink h3 { color: #fff; }
/* alleen links in lopende tekst lichter maken. Zonder deze afbakening won
   deze regel het van .btn--light en kreeg een witte knop lichtroze tekst. */
.section--ink :is(p, li, td, dd, figcaption) a { color: #ffd9d4; }
.mt-1 { margin-top: .8rem; } .mt-2 { margin-top: 1.6rem; } .mt-3 { margin-top: 2.4rem; }
.mb-3 { margin-bottom: 2.4rem; }
/* het geschilderde hartje naast de tekst, en onder de tekst op een telefoon */
.float-right { border-radius: 14px; margin-inline: auto; max-width: 190px; }
@media (min-width: 700px) { .float-right { float: right; margin: 0 0 1.2rem 1.8rem; } }

.eyebrow {
  font-family: var(--font-head);
  font-size: .8rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--hart); margin: 0 0 .8rem;
}
.section--ink .eyebrow { color: #f0938a; }
.lead { font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem); color: var(--ink-600); }
.section--ink .lead { color: #cdc8be; }
.section-head { max-width: 62ch; margin-bottom: clamp(1.8rem, 1rem + 2vw, 2.8rem); }
.section-head--center { margin-inline: auto; text-align: center; }
/* staat de kop alleen in zijn sectie, dan hoeft er onder de tekst geen
   ruimte meer te komen voor iets wat er niet is */
.section-head:last-child { margin-bottom: 0; }

/* ---------- Het hart: het beeldmerk van de rijschool ---------- */
.hart { display: block; width: 1em; height: 1em; flex: none; }
.hart path { fill: currentColor; }

/* handgeschilderd, dus expres een tikje scheef */
.brand {
  display: inline-flex; align-items: center; gap: .68rem;
  text-decoration: none; color: inherit; font-family: var(--font-head);
}
.brand__mark {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: var(--hart); border-radius: 12px; color: #fff;
  transform: rotate(-3deg);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
}
.brand__mark .hart { width: 22px; height: 22px; }
.brand__name { display: flex; flex-direction: column; line-height: 1.02; }
.brand__name b { font-weight: 700; font-size: 1.12rem; letter-spacing: -.025em; }
.brand__sub {
  font-family: var(--font-body); font-size: .715rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.site-footer .brand__sub { color: #9aa5a8; }
.site-footer .brand { color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 243, 236, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 72px; }
.header-spacer { flex: 1; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 600 .95rem/1 var(--font-body); color: var(--ink-800);
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: .62rem .85rem; cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 3.5px; width: 17px; }
.nav-toggle__bars span { display: block; height: 2px; background: currentColor; border-radius: 2px; }
.nav { display: none; }
.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block; text-decoration: none; color: var(--ink-700);
  font-weight: 600; font-size: 1rem; padding: .65rem .1rem;
  border-bottom: 1px solid var(--line);
}
.nav__link[aria-current="page"] { color: var(--hart); }
.nav.is-open {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md); padding: .6rem clamp(1.1rem, 4vw, 2.2rem) 1.4rem;
  max-height: calc(100vh - 72px); overflow-y: auto;
}
.nav.is-open .nav__cta { margin-top: 1rem; width: 100%; }
.header-call { white-space: nowrap; }
.header-call svg { width: 18px; height: 18px; }

/* De horizontale balk verschijnt pas als merknaam, telefoonknop, zeven
   menu-items en de proefles-knop er allemaal naast elkaar in passen. Daaronder
   blijft het uitklapmenu staan, dat is beter dan een omvallende koptekst. */
@media (min-width: 1160px) {
  .nav-toggle { display: none; }
  .nav { display: flex; align-items: center; gap: .5rem; }
  .nav__list { display: flex; align-items: center; gap: .1rem; }
  .nav__link { border: 0; padding: .5rem .52rem; border-radius: 9px; font-size: .93rem; white-space: nowrap; }
  .nav__link:hover { background: var(--chalk-2); }
  .nav__link[aria-current="page"] { background: var(--hart-050); }
  .nav__cta { margin-left: .2rem; white-space: nowrap; font-size: .9rem; padding: .55rem .85rem; }
  .header-inner { gap: .9rem; }
  .brand { flex: none; }
  .brand__name b { white-space: nowrap; }
  .header-call { flex: none; }
}
/* Tussen 1160 en 1380 past de kop alleen zonder ondertitel en met een
   bel-icoon in plaats van het nummer. */
@media (min-width: 1160px) and (max-width: 1379px) {
  .site-header .brand__sub { display: none; }
  .header-call__label { display: none; }
}
/* Vanaf 1380 mag de kopbalk zelf iets breder zijn dan de tekstkolom (1280 in
   plaats van 1180). Dat is precies de ruimte die de ondertitel en het volledige
   telefoonnummer nodig hebben; zonder die extra breedte liep de proefles-knop
   over de rand van de inhoud heen. */
@media (min-width: 1380px) {
  .site-header .wrap { max-width: 1280px; }
}
@media (max-width: 620px) {
  .header-call__label { display: none; }
  .site-header .brand__sub { display: none; }
  .site-header .brand__name b { font-size: .98rem; }
  .site-header .brand__mark { width: 34px; height: 34px; border-radius: 10px; }
  .site-header .brand__mark .hart { width: 19px; height: 19px; }
  .header-inner { min-height: 62px; gap: .6rem; }
}

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1.02rem;
  line-height: 1.15; letter-spacing: -.005em;
  padding: .92rem 1.4rem; border-radius: 11px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--hart); color: #fff; box-shadow: 0 2px 0 var(--hart-600), var(--shadow-sm); }
.btn--primary:hover { background: var(--hart-600); color: #fff; }
.btn--dark { background: var(--ink-900); color: #fff; box-shadow: 0 2px 0 #000, var(--shadow-sm); }
.btn--dark:hover { background: var(--ink-700); color: #fff; }
.btn--outline { background: transparent; color: var(--ink-800); border-color: var(--line-strong); }
.btn--outline:hover { background: var(--paper); color: var(--ink-900); border-color: var(--ink-400); }
.btn--light { background: #fff; color: var(--ink-900); }
.btn--light:hover { background: #f2ece2; color: var(--ink-900); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .42); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: #fff; }
.btn--sm { font-size: .93rem; padding: .6rem 1rem; border-radius: 9px; }
.btn--wide { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.btn-row--center { justify-content: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(900px 460px at 82% 8%, rgba(200, 56, 43, .22), transparent 62%),
    radial-gradient(700px 500px at 8% 92%, rgba(74, 134, 184, .14), transparent 60%),
    linear-gradient(168deg, #202a2d 0%, #151b1d 58%, #101517 100%);
  color: #e9e5dd;
  overflow: hidden;
}
/* de krijtstreep van het schoolbord */
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 5px;
  background: repeating-linear-gradient(90deg, var(--hart) 0 46px, transparent 46px 84px);
  opacity: .8;
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; gap: clamp(2rem, 1rem + 4vw, 3.4rem);
  padding-block: clamp(2.6rem, 1.6rem + 4.5vw, 5rem) clamp(3rem, 2rem + 4.5vw, 5.4rem);
}
@media (min-width: 940px) { .hero__grid { grid-template-columns: 1.06fr .94fr; align-items: start; } }
.hero h1 { color: #fff; }
.hero .eyebrow { color: #f0938a; }
.hero__lead { font-size: clamp(1.06rem, .98rem + .4vw, 1.24rem); color: #cdc8be; max-width: 46ch; }
.hero__cta { margin-top: 1.7rem; }
.hero__note { margin-top: 1rem; font-size: .95rem; color: #a9b1b3; }
.hero__note a { color: #fff; }

.trust-row {
  list-style: none; margin: 1.9rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem .55rem;
}
.trust-row li {
  margin: 0; display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255, 255, 255, .085); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px; padding: .42rem .82rem;
  font-size: .875rem; font-weight: 600; color: #ded9d1;
}
.trust-row svg { width: 15px; height: 15px; color: #f0938a; flex: none; }

.hero__card {
  background: var(--paper); color: var(--ink-800);
  border-radius: var(--radius-lg); padding: clamp(1.3rem, 1rem + 1.2vw, 1.9rem);
  box-shadow: var(--shadow-lg);
}
.hero__card h2 { font-size: 1.32rem; margin-bottom: .3rem; }
.hero__card > p { font-size: .96rem; color: var(--muted); margin-bottom: 1.15rem; }

/* ---------- Feitenband onder de hero ---------- */
.facts { background: var(--paper); border-bottom: 1px solid var(--line); }
.facts__grid { display: grid; gap: clamp(1.6rem, 1rem + 2vw, 2.6rem); align-items: center; }
@media (min-width: 900px) { .facts__grid { grid-template-columns: 1.05fr 1fr; } }
.facts__photo { position: relative; }
.facts__photo img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.facts__badge {
  position: absolute; right: -.6rem; bottom: -1.1rem;
  background: var(--hart); color: #fff; border-radius: 14px;
  padding: .75rem 1rem; box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  line-height: 1.15; max-width: 15rem; transform: rotate(-2deg);
}
.facts__badge .hart { width: 22px; height: 22px; }
.numbers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.numbers li { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .1rem 1.05rem; align-items: baseline; }
.numbers b {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.85rem, 1.3rem + 1.7vw, 2.6rem); letter-spacing: -.03em;
  color: var(--hart); line-height: 1; grid-row: span 2; align-self: center;
  min-width: 3.2ch;
}
.numbers strong { display: block; font-size: 1.02rem; color: var(--ink-900); }
.numbers span { font-size: .93rem; color: var(--muted); }

/* ---------- Kaarten ---------- */
.cards { display: grid; gap: 1.1rem; }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: .45rem; }
.card p { font-size: .985rem; color: var(--ink-600); }
.card__icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--hart-050); color: var(--hart); margin-bottom: 1rem;
}
.card__icon svg { width: 23px; height: 23px; }
.card__link {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem;
  font-family: var(--font-head); font-weight: 700; font-size: .96rem;
  text-decoration: none; color: var(--hart-600);
}
.card__link svg { width: 17px; height: 17px; transition: transform .15s ease; }
.card__link:hover svg { transform: translateX(3px); }
a.card { text-decoration: none; color: inherit; display: block; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
a.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--line-strong); }

/* checklist met hartjes als opsommingsteken */
.hart-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.hart-list li { margin: 0; display: grid; grid-template-columns: 20px 1fr; gap: .7rem; align-items: start; }
.hart-list .hart { width: 15px; height: 15px; color: var(--hart); margin-top: .32em; }
.section--ink .hart-list .hart { color: #f0938a; }

/* ---------- Tarieven ---------- */
.pakketten { display: grid; gap: 1.05rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pakket {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.35rem; box-shadow: var(--shadow-sm);
  border-top: 5px solid var(--bar, var(--hart));
  display: flex; flex-direction: column;
}
.pakket__uren { font-family: var(--font-head); font-weight: 700; font-size: 1.22rem; color: var(--ink-900); }
.pakket__wat { font-size: .93rem; color: var(--muted); margin: .18rem 0 1rem; }
.pakket__prijs {
  font-family: var(--font-head); font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(1.9rem, 1.5rem + 1.1vw, 2.35rem); color: var(--hart); line-height: 1;
  margin-top: auto;
}
.pakket__per { display: block; font-family: var(--font-body); font-size: .85rem; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: .4rem; }
.pakket--uitgelicht { border-color: var(--hart); box-shadow: var(--shadow-md); }
.pakket__tag {
  display: inline-block; background: var(--hart-050); color: var(--hart-600);
  font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .07em;
  text-transform: uppercase; border-radius: 999px; padding: .22rem .6rem; margin-bottom: .7rem;
}

.price-table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.price-table th, .price-table td { text-align: left; padding: .95rem 1.1rem; border-bottom: 1px solid var(--line); }
.price-table thead th { background: var(--chalk-2); font-family: var(--font-head); font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-600); }
.price-table tr:last-child td { border-bottom: 0; }
.price-table td:last-child, .price-table th:last-child { text-align: right; white-space: nowrap; font-family: var(--font-head); font-weight: 700; color: var(--ink-900); }
.price-table small { display: block; font-family: var(--font-body); font-weight: 400; color: var(--muted); margin-top: .1rem; }
.table-scroll { overflow-x: auto; }

/* ---------- Stappen ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.05rem; counter-reset: s; }
.steps li { margin: 0; display: grid; grid-template-columns: 46px 1fr; gap: 1.05rem; align-items: start; }
.step__num {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink-900); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.06rem;
}
.section--ink .step__num { background: var(--hart); }
.step__body h3 { margin-bottom: .3rem; font-size: 1.1rem; }
.step__body p { font-size: .985rem; color: var(--ink-600); margin: 0; }
.section--ink .step__body p { color: #c4bfb6; }

/* ---------- Media-blok ---------- */
.media { display: grid; gap: clamp(1.7rem, 1rem + 2.5vw, 3rem); align-items: center; }
@media (min-width: 880px) {
  .media { grid-template-columns: 1fr 1fr; }
  .media--flip .media__figure { order: 2; }
}
.media__figure { margin: 0; }
/* width:auto in plaats van 100%: de breedte uit het width-attribuut is de
   echte breedte van het bestand, dus zo wordt een kleine foto nooit
   opgerekt en een grote foto nog steeds netjes kleiner gemaakt */
.media__figure img { width: auto; max-width: 100%; margin-inline: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.media__figure figcaption { font-size: .875rem; color: var(--muted); margin-top: .65rem; }

/* ---------- Fotogalerij (historie) ---------- */
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.gallery figure { margin: 0; }
.gallery img { width: 100%; max-width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.gallery figcaption { font-size: .85rem; color: var(--muted); margin-top: .5rem; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .6rem; }
.faq__item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq__q {
  cursor: pointer; list-style: none; padding: 1.1rem 3rem 1.1rem 1.25rem; position: relative;
  font-family: var(--font-head); font-weight: 700; font-size: 1.04rem; color: var(--ink-900);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; position: absolute; right: 1.25rem; top: 1.45rem;
  width: 11px; height: 11px; border-right: 2.4px solid var(--hart); border-bottom: 2.4px solid var(--hart);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); top: 1.6rem; }
.faq__item[open] .faq__q { color: var(--hart-600); }
.faq__a { padding: 0 1.25rem 1.25rem; color: var(--ink-600); }
.faq__a p { font-size: .995rem; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: clamp(1.8rem, 1rem + 3vw, 3rem); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.05fr; align-items: start; } }
.nap { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.05rem; }
.nap li { margin: 0; display: grid; grid-template-columns: 40px 1fr; gap: .9rem; align-items: start; }
.nap__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--hart-050); color: var(--hart); }
.nap__ic svg { width: 20px; height: 20px; }
.nap b { display: block; font-family: var(--font-head); font-size: .96rem; color: var(--ink-900); }
.nap span, .nap a { font-size: 1rem; }
.nap a { color: var(--ink-700); }
.nap a:hover { color: var(--hart); }

.map-link { display: block; text-decoration: none; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-sm); }
.map-link img { width: 100%; }
.map-link > span {
  display: flex; align-items: center; gap: .45rem; padding: .85rem 1.1rem;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--hart-600);
}
.map-link:hover > span { color: var(--hart); }
.map-placeholder { display: grid; place-items: center; min-height: 220px; background: var(--chalk-2); color: var(--muted); font-size: .95rem; padding: 1rem; text-align: center; }

/* ---------- Kruimelpad ---------- */
.breadcrumb { margin-bottom: 1.4rem; font-size: .88rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; color: var(--muted); }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .35rem; color: var(--line-strong); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--hart); text-decoration: underline; }

/* ---------- Notitie / waarschuwing ---------- */
.note {
  background: var(--paper); border: 1px solid var(--line); border-left: 5px solid var(--accent-sun);
  border-radius: var(--radius); padding: 1.15rem 1.3rem; font-size: .99rem;
}
.note--hart { border-left-color: var(--hart); }
.note--mint { border-left-color: var(--accent-mint); }
.note h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.note p { color: var(--ink-600); }

/* nieuwsitems */
.nieuws { display: grid; gap: 1.1rem; }
.nieuws article { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.nieuws h3 { margin-bottom: .3rem; }
.nieuws time { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--hart); margin-bottom: .5rem; }

/* plaatsenlijst */
.plaatsen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.plaatsen li { margin: 0; }
.plaatsen span, .plaatsen a {
  display: inline-block; background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: .48rem .95rem; font-size: .93rem; font-weight: 600;
  color: var(--ink-700); text-decoration: none;
}
.section--ink .plaatsen span { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .17); color: #ded9d1; }

/* ---------- CTA-band ---------- */
.cta-band { text-align: center; position: relative; overflow: hidden; }
.cta-band .hart-big {
  position: absolute; right: -3rem; top: -3rem; width: 16rem; height: 16rem;
  color: rgba(200, 56, 43, .16); pointer-events: none;
}
.cta-band .wrap { position: relative; z-index: 1; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-900); color: #b6bdbf; padding-block: clamp(2.8rem, 2rem + 3vw, 4rem) 2rem; }
.footer-grid { display: grid; gap: 2.2rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.site-footer h2 { font-size: .85rem; letter-spacing: .13em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .95rem; }
.footer-list li { margin: 0; }
.footer-list a { color: #b6bdbf; text-decoration: none; }
.footer-list a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .13);
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; justify-content: space-between;
  font-size: .87rem; color: #8f9799;
}
.footer-bottom ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.1rem; }
.footer-bottom li { margin: 0; }
.footer-bottom a { color: #8f9799; text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

/* ---------- Mobiele belbalk ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-strong); border-top: 1px solid var(--line-strong);
  box-shadow: 0 -6px 20px rgba(21, 27, 29, .12);
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem .6rem; text-decoration: none;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
}
.callbar a:first-child { background: var(--hart); color: #fff; }
.callbar a:last-child { background: var(--paper); color: var(--ink-900); }
.callbar svg { width: 19px; height: 19px; }
@media (min-width: 760px) { .callbar { display: none; } }
@media (max-width: 759px) { body { padding-bottom: 60px; } }

/* ---------- Bewegingsvoorkeur ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .btn:hover, a.card:hover { transform: none; }
}

/* ==========================================================================
   Leadformulier
   Eigen kleurtokens, zodat het formulier ook op de donkere hero leesbaar is.
   ========================================================================== */
.lead-form { display: grid; gap: .85rem; }
.lead-form__row { display: grid; gap: .85rem; }
@media (min-width: 480px) { .lead-form__row { grid-template-columns: 1fr 1fr; } }
.lead-form__field { display: grid; gap: .32rem; }
.lead-form__field > span {
  font-family: var(--font-head); font-weight: 700; font-size: .875rem; color: var(--form-text);
}
.lead-form input[type="text"],
.lead-form input[type="tel"],
.lead-form input[type="email"],
.lead-form select,
.lead-form textarea {
  width: 100%; font: 400 1rem/1.4 var(--font-body);
  color: var(--form-text); background: var(--form-surface);
  border: 1.5px solid var(--form-border); border-radius: 10px;
  padding: .72rem .85rem; color-scheme: var(--form-color-scheme);
}
.lead-form textarea { resize: vertical; min-height: 7.5rem; }
.lead-form input::placeholder, .lead-form textarea::placeholder { color: var(--form-placeholder); }
.lead-form input:focus-visible, .lead-form select:focus-visible, .lead-form textarea:focus-visible {
  outline: 3px solid var(--form-focus-ring); outline-offset: 1px; border-color: var(--form-focus-ring);
}
.lead-form__submit { margin-top: .3rem; width: 100%; }
.lead-form__note { font-size: .85rem; color: var(--muted); margin: 0; }
.hero__card .lead-form__note { color: var(--muted); }
.lead-form__status { margin: 0; font-size: .95rem; color: var(--form-text); }
.lead-form__status--done {
  background: #eef7f1; border: 1px solid #b9dcc8; border-radius: 10px;
  padding: 1rem 1.1rem; color: #1f5b3f;
}
.lead-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }