/* ==================================================================
   de kleine letters — designsysteem
   Volgt de huisstijl van de bestaande site: Playfair Display voor
   koppen, Source Sans voor tekst, warm beige accent (#e1ccbe),
   donkere fotohero met diagonale snede, zwarte banden als ritme.
   Vanilla CSS, geen build-stap, geen externe requests (AVG).
   ================================================================== */

/* ---- 1. Design tokens ------------------------------------------- */
:root {
  /* Kleuren — overgenomen van de huidige site */
  --bg:        #ffffff;
  --bg-soft:   #fafafa;   /* rustige sectie */
  --surface:   #ffffff;
  --surface-2: #f6f2ee;   /* warme kaart */
  --black:     #000000;   /* zwarte banden */
  --black-2:   #111111;

  --ink:       #2a2a2a;   /* hoofdtekst */
  --ink-soft:  #5b5b5b;   /* subtekst */
  --ink-dim:   #8a8a8a;   /* zeer subtiel */
  --line:      rgba(42,42,42,.12);
  --line-2:    rgba(42,42,42,.22);

  --accent:      #e1ccbe;  /* beige — knoppen, accenten op donker */
  --accent-hi:   #ecdcd1;  /* lichte hover */
  --accent-deep: #c9a38a;  /* dieper beige */
  /* Donkere variant van hetzelfde beige, voor tekst op wit.
     Het originele #e1ccbe haalt op wit maar 1,5:1 — onleesbaar.
     Deze haalt 5,4:1 en blijft in dezelfde kleurfamilie. */
  --accent-ink:  #8a6a52;
  --on-accent:   #2a2a2a;  /* tekst op beige */

  /* Typografie */
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Vorm & ritme */
  --radius:    6px;
  --radius-lg: 10px;
  --radius-sm: 4px;
  --pill:      30px;
  --shadow-sm: 0 1px 2px rgba(42,42,42,.05), 0 2px 10px rgba(42,42,42,.05);
  --shadow-md: 0 10px 34px rgba(42,42,42,.09);
  --shadow-lg: 0 26px 64px rgba(42,42,42,.14);
  --ring:      0 0 0 3px rgba(201,163,138,.55);

  --wrap:        1200px;   /* zelfde contentbreedte als de huidige site */
  --wrap-narrow: 780px;
  --gap:       clamp(1rem, 3vw, 2rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --shape-h:   clamp(60px, 9vw, 150px);   /* hoogte diagonale snede */
  --header-h:  84px;
}

/* ---- 2. Reset / basis ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(1rem, .97rem + .2vw, 1.0625rem);
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 .55em;
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.25rem); line-height: 1.2; }
h2 { font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + .6vw, 1.5rem); }
h4 { font-size: 1.0625rem; font-family: var(--font); font-weight: 600; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
strong { font-weight: 600; }
img, svg, video { max-width: 100%; display: block; height: auto; }
ul, ol { margin: 0 0 1rem; padding-left: 1.2em; }
li + li { margin-top: .35em; }
/* Bovenstaande marge is bedoeld voor opsommingen in lopende tekst. In
   componentlijsten — flex- of grid-rijen met hun eigen gap — zou hij elk
   item ná het eerste een paar pixels omlaag duwen. Daar dus terugzetten. */
.nav__menu li + li,
.crumbs li + li,
.footer__list li + li,
.contact-list li + li,
.facts li + li,
.choices li + li,
.carousel__slide + .carousel__slide { margin-top: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
small { font-size: .875rem; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* ---- 3. Layout --------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--soft { background: var(--bg-soft); }
.section--warm { background: var(--surface-2); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Zwarte band — het ritme van de huidige site */
.section--dark { background: var(--black); color: #f2efec; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p, .section--dark .lede { color: #c4bfba; }
.section--dark a { color: var(--accent); }
.section--dark a:hover { color: #fff; }

.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.hp { position: absolute; left: -9999px; top: 0; z-index: 100; }
.hp:focus { left: 1rem; top: 1rem; }

/* Sectiekop — het "eyebrow" boven de titel, zoals op de huidige site:
   Playfair, hoofdletters, ruime letterafstand. */
.eyebrow {
  display: block;
  font-family: var(--display);
  font-size: .95rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 .9rem;
}
.section--dark .eyebrow, .hero .eyebrow, .page-hero .eyebrow, .cta-band .eyebrow { color: var(--accent); }

.lede {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.175rem);
  line-height: 1.65; color: var(--ink-soft); max-width: 64ch;
}
.center .lede { margin-inline: auto; }
.section__head { margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.section__head.center { text-align: center; }

/* ---- 4. Knoppen — pill, hoofdletters, beige --------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 1.05rem 2.15rem;
  font-family: var(--font); font-size: .95rem; font-weight: 600; line-height: 1;
  text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid transparent; border-radius: var(--pill);
  cursor: pointer; text-decoration: none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease,
              transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hi); color: var(--on-accent); box-shadow: var(--shadow-md); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; box-shadow: var(--shadow-md); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--accent-deep); color: var(--ink); }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #fff; color: var(--ink); box-shadow: var(--shadow-md); }

.btn--lg { padding: 1.15rem 2.5rem; font-size: 1rem; }
.btn--sm { padding: .8rem 1.5rem; font-size: .85rem; }
.btn--block { width: 100%; }

/* Knoppen die naast elkaar staan krijgen dezelfde breedte: inline-grid met
   1fr-kolommen maakt elke kolom even breed als de breedste knop, terwijl de
   rij zelf om de inhoud heen blijft (en dus meecentreert). */
.btn-row {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: .85rem; vertical-align: top;
}
.btn-row .btn { width: 100%; }
@media (max-width: 560px) {
  /* Onder elkaar op smalle schermen — naast elkaar wordt daar te krap. */
  .btn-row { grid-auto-flow: row; width: 100%; }
}

/* Tekstlink met pijl */
.arrow-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink);
}
.arrow-link::after { content: "→"; transition: transform .18s ease; }
.arrow-link:hover { text-decoration: none; color: var(--ink); }
.arrow-link:hover::after { transform: translateX(4px); }
.section--dark .arrow-link { color: var(--accent); }
.section--dark .arrow-link:hover { color: #fff; }

/* ---- 5. Header / navigatie --------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  /* Scheidingslijn als inset-schaduw in plaats van border: een border telt mee
     in de hoogte, waardoor de header 85px werd terwijl de hero maar 84px
     omhoog wordt getrokken — dat gaf een witte streep van 1px bovenaan. */
  box-shadow: inset 0 -1px 0 var(--line);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.nav { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.brand { display: flex; align-items: center; flex: none; position: relative; }
/* Horizontale lockup, verhouding ±7,4:1 — bij 28px is hij ±207px breed,
   genoeg voor het woordmerk zonder de navigatie te overheersen. */
.brand__logo { width: auto; height: 28px; transition: opacity .25s ease; }
@media (max-width: 420px) { .brand__logo { height: 24px; } }
.brand__logo--light { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
.nav__spacer { flex: 1; }

.nav__menu { list-style: none; display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; }
.nav__link {
  display: block; padding: .55rem .8rem; white-space: nowrap;
  font-size: .975rem; font-weight: 400; color: var(--ink);
  border-radius: var(--radius-sm);
  transition: color .2s ease, background-color .2s ease;
}
.nav__link:hover { color: var(--accent-ink); background: var(--surface-2); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--accent-ink); font-weight: 600; }

.nav__actions { display: flex; align-items: center; gap: .75rem; flex: none; margin-left: .75rem; }
.nav__mail {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .93rem; color: var(--ink); padding: .5rem .3rem;
}
.nav__mail:hover { color: var(--accent-ink); text-decoration: none; }
.nav__mail svg { width: 17px; height: 17px; color: var(--accent-deep); }

/* --- Transparante variant: alleen op de homepage, over de fotohero --- */
.site-header--overlay {
  background: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-header--overlay .nav__link,
.site-header--overlay .nav__mail { color: #fff; }
.site-header--overlay .nav__link:hover { color: #fff; background: rgba(255,255,255,.14); }
.site-header--overlay .nav__link[aria-current="page"] { color: #fff; font-weight: 600; }
.site-header--overlay .nav__mail svg { color: var(--accent); }
.site-header--overlay .brand__logo--dark { opacity: 0; }
.site-header--overlay .brand__logo--light { opacity: 1; }
.site-header--overlay .nav__toggle span,
.site-header--overlay .nav__toggle::before,
.site-header--overlay .nav__toggle::after { background: #fff; }
.site-header--overlay .nav__toggle { border-color: rgba(255,255,255,.45); }
/* Zodra je scrollt wordt hij alsnog vast en licht — anders wordt de
   navigatie onleesbaar zodra de witte sectie eronder schuift. */
.site-header--overlay.is-scrolled {
  background: rgba(255,255,255,.94); box-shadow: inset 0 -1px 0 var(--line);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.site-header--overlay.is-scrolled .nav__link,
.site-header--overlay.is-scrolled .nav__mail { color: var(--ink); }
.site-header--overlay.is-scrolled .nav__link:hover { color: var(--accent-ink); background: var(--surface-2); }
.site-header--overlay.is-scrolled .nav__link[aria-current="page"] { color: var(--accent-ink); }
.site-header--overlay.is-scrolled .nav__mail svg { color: var(--accent-deep); }
.site-header--overlay.is-scrolled .brand__logo--dark { opacity: 1; }
.site-header--overlay.is-scrolled .brand__logo--light { opacity: 0; }
.site-header--overlay.is-scrolled .nav__toggle span,
.site-header--overlay.is-scrolled .nav__toggle::before,
.site-header--overlay.is-scrolled .nav__toggle::after { background: var(--ink); }
.site-header--overlay.is-scrolled .nav__toggle { border-color: var(--line-2); }

.nav__toggle {
  display: none; position: relative;
  width: 46px; height: 46px; padding: 0; margin-left: auto;
  background: transparent; border: 1px solid var(--line-2); border-radius: 50%;
  cursor: pointer;
}
.nav__toggle span, .nav__toggle::before, .nav__toggle::after {
  content: ""; position: absolute; left: 13px; width: 20px; height: 1.5px;
  background: var(--ink); transition: transform .22s ease, opacity .22s ease, background-color .25s ease;
}
.nav__toggle span    { top: 22px; }
.nav__toggle::before { top: 16px; }
.nav__toggle::after  { top: 28px; }
.nav__toggle[aria-expanded="true"] span { opacity: 0; }
.nav__toggle[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"]::after  { transform: translateY(-6px) rotate(-45deg); }

.nav__mobile-cta { display: none; }

@media (max-width: 1000px) {
  .nav__actions { display: none; }
  .nav__toggle { display: block; }
  .nav__spacer { display: none; }
  .nav__menu {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: .75rem 1.25rem 1.75rem;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform .22s ease, opacity .22s ease, visibility .22s;
    box-shadow: var(--shadow-md);
  }
  .nav__menu.is-open { transform: none; opacity: 1; visibility: visible; }
  /* In het uitgeklapte menu altijd donkere tekst, ook op de homepage */
  .site-header--overlay .nav__menu .nav__link { color: var(--ink); }
  .site-header--overlay .nav__menu .nav__link:hover { color: var(--accent-ink); background: var(--surface-2); }
  .nav__link { padding: .85rem .25rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav__mobile-cta { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.25rem; }
}

/* ---- 6. Hero — fotoachtergrond, donkere overlay, diagonale snede -- */
.hero {
  position: relative;
  /* Eén pixel extra dan de headerhoogte: de header kan door afronding van
     regelhoogtes op een fractie uitkomen (84,09px), en dan zou de witte body
     er bovenaan als haarlijn doorheen schijnen. De hero ligt achter de
     header, dus die overlap zie je niet. */
  margin-top: calc(var(--header-h) * -1 - 1px);
  padding-top: calc(var(--header-h) + 1px);
  min-height: clamp(540px, 76vh, 760px);
  display: grid; place-items: center;
  background-color: #1b1b1b;
  background-image: url('/assets/img/hero-achtergrond.webp');
  background-size: cover; background-position: 50% 50%;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {                       /* dezelfde donkere waas als de huidige site */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #030303; opacity: .5;
}
.hero__inner {
  position: relative;
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto; text-align: center;
  padding-block: clamp(4rem, 10vw, 7.5rem) calc(var(--shape-h) + clamp(1.5rem, 4vw, 3rem));
}
.hero__title {
  color: #fff; margin-bottom: .55em;
  font-size: clamp(2.25rem, 1.4rem + 3.9vw, 3.5rem);
  line-height: 1.25;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.hero__lede {
  color: rgba(255,255,255,.9); margin-inline: auto; max-width: 58ch;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.2rem);
}
.hero .btn-row { margin-top: 2.25rem; justify-content: center; }

/* De diagonale snede onderaan — dezelfde vorm als op de huidige site */
.hero__shape {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: var(--shape-h); line-height: 0; pointer-events: none;
}
.hero__shape svg { width: 100%; height: 100%; display: block; }

/* Variant voor subpagina's: geen foto, wel dezelfde snede */
.page-hero {
  /* Subtielere snede dan op de homepage: een paginakop is veel lager,
     dus dezelfde 150px zou het blok een zware zwarte punt geven. */
  --shape-h: clamp(45px, 5vw, 80px);
  position: relative; background: var(--black); color: #fff;
  margin-top: calc(var(--header-h) * -1 - 1px);
  padding-top: calc(var(--header-h) + 1px);
  overflow: hidden;
}
.page-hero__inner {
  position: relative;
  width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto;
  padding-block: clamp(3rem, 7vw, 5rem) calc(var(--shape-h) + clamp(1rem, 3vw, 2rem));
}
/* De diagonaal laat onderaan al veel wit vallen; zonder deze correctie
   krijgt de eerste sectie een onnodig grote lege band. */
.page-hero + .section { padding-top: clamp(1.75rem, 3.5vw, 3rem); }
.page-hero h1 { color: #fff; }
.page-hero .lede { color: #c4bfba; }
.page-hero .crumbs { padding-top: 0; margin-bottom: 1.5rem; }
.page-hero .crumbs a, .page-hero .crumbs [aria-current="page"] { color: rgba(255,255,255,.65); }
.page-hero .crumbs a:hover { color: #fff; }
.page-hero .crumbs li + li::before { color: rgba(255,255,255,.35); }

/* ---- 7. Kaarten -------------------------------------------------- */
.grid { display: grid; gap: clamp(1.1rem, 2.2vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.6rem, 2.6vw, 2.1rem);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.card--link:hover { border-color: var(--accent-deep); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card__icon {
  width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 1.25rem;
  background: var(--surface-2); border-radius: 50%; color: var(--accent-ink);
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--ink-soft); font-size: .975rem; }
.card__foot { margin-top: auto; padding-top: 1.35rem; }

.section--dark .card {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14);
}
.section--dark .card p { color: #c4bfba; }
.section--dark .card__icon { background: rgba(255,255,255,.09); color: var(--accent); }

/* Situatie-routing */
.routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
@media (max-width: 900px) { .routes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .routes { grid-template-columns: 1fr; } }
.route {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1.1rem 1.35rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .975rem; color: var(--ink);
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.route:hover {
  border-color: var(--accent-deep); background: var(--surface-2);
  color: var(--ink); text-decoration: none; transform: translateY(-2px);
}
.route::after { content: "→"; color: var(--accent-ink); flex: none; }

/* ---- 8. Prijzen / pakketten -------------------------------------- */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: start; }
@media (max-width: 960px) { .prices { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; } }

.price {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.75rem, 2.8vw, 2.35rem);
}
.price--featured { border-color: var(--accent-deep); box-shadow: var(--shadow-md); }
.price__tag {
  position: absolute; top: -.75rem; left: clamp(1.75rem, 2.8vw, 2.35rem);
  background: var(--accent); color: var(--on-accent);
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .85rem; border-radius: var(--pill);
}
.price h3 { margin-bottom: .35rem; }
.price__for { font-size: .92rem; color: var(--ink-dim); margin-bottom: 1.25rem; }
.price__amount {
  font-family: var(--display); font-size: 2rem; font-weight: 500; line-height: 1;
  color: var(--ink); display: flex; align-items: baseline; gap: .4rem;
}
.price__amount small { font-family: var(--font); font-size: .85rem; font-weight: 400; color: var(--ink-dim); }
.price__amount--tbd { color: var(--accent-ink); font-size: 1.5rem; }
.price__note { font-size: .85rem; color: var(--ink-dim); margin: .55rem 0 1.5rem; }
.price__list { list-style: none; padding: 0; margin: 0 0 1.75rem; font-size: .96rem; }
.price__list li { position: relative; padding-left: 1.7rem; margin-top: .55rem; color: var(--ink-soft); }
.price__list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 9px; height: 5px; border-left: 1.8px solid var(--accent-deep); border-bottom: 1.8px solid var(--accent-deep);
  transform: rotate(-45deg);
}
.price .btn { margin-top: auto; }

/* Tarieftabel */
.rate-table { width: 100%; border-collapse: collapse; font-size: .975rem; }
.rate-table th, .rate-table td { text-align: left; padding: .95rem 1rem; border-bottom: 1px solid var(--line); }
.rate-table th { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; }
.rate-table td:last-child, .rate-table th:last-child { text-align: right; white-space: nowrap; }
.rate-table tbody tr:hover { background: var(--surface-2); }
.rate-table .price-tbd { color: var(--accent-ink); font-weight: 600; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- 9. Stappen -------------------------------------------------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; counter-increment: step; padding-top: 4rem; }
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--display); font-size: 1.45rem; font-weight: 500; color: var(--accent-ink);
  width: 54px; height: 54px; display: grid; place-items: center;
  background: var(--surface-2); border-radius: 50%;
}
.step h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.step p { font-size: .96rem; color: var(--ink-soft); }
.section--dark .step::before { background: rgba(255,255,255,.09); color: var(--accent); }
.section--dark .step p { color: #c4bfba; }

/* ---- 10. Reviews ------------------------------------------------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 2.2vw, 1.75rem); align-items: start; }
@media (max-width: 1000px) { .reviews { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px)  { .reviews { grid-template-columns: 1fr; } }

.review {
  position: relative;
  display: flex; flex-direction: column; height: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.75rem, 2.8vw, 2.15rem);
}
.review::before {                     /* decoratief aanhalingsteken */
  content: "\201C";
  position: absolute; top: .1em; right: .35em;
  font-family: var(--display); font-size: 5rem; line-height: 1;
  color: var(--accent); opacity: .5; pointer-events: none;
}
.review__stars { display: flex; gap: 3px; margin-bottom: 1rem; color: var(--accent-deep); }
.review__stars svg { width: 15px; height: 15px; }
.review blockquote { margin: 0 0 1.25rem; font-size: .975rem; color: var(--ink-soft); }
.review blockquote p + p { margin-top: .8rem; }

/* Alle citaten afgekapt op hetzelfde aantal regels, zodat elke kaart even
   hoog wordt. Wat niet past krijgt een uitklapknop (zie main.js). */
.review__quote {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--review-lines, 4);
  overflow: hidden;
}
.review.is-open .review__quote { -webkit-line-clamp: unset; overflow: visible; }

.review__more {
  align-self: center; margin: -.35rem 0 1.25rem;
  background: none; border: 0; padding: .25rem .1rem; cursor: pointer;
  font-family: var(--body); font-size: .88rem; font-weight: 600;
  color: var(--accent-ink); letter-spacing: .02em;
}
.review__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.review__more::after { content: " ↓"; }
.review.is-open .review__more::after { content: " ↑"; }
.section--dark .review__more { color: var(--accent); }

/* Naam onderaan, zodat die bij gelijke hoogte netjes uitlijnt */
.review__who { margin-top: auto; display: flex; flex-direction: column; gap: .1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.review__who strong { font-size: .95rem; font-weight: 600; }
.review__who span { font-size: .85rem; color: var(--ink-dim); }
.section--dark .review { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.section--dark .review blockquote { color: #c4bfba; }
.section--dark .review__who { border-top-color: rgba(255,255,255,.14); }

/* ---- 10b. Carrousel ---------------------------------------------- */
/* Gebouwd op scroll-snap: zonder JavaScript blijft het een gewone
   horizontale scroller die je kunt vegen. JS voegt pijlen en bolletjes toe. */
.carousel { position: relative; }
.carousel__viewport {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  margin-inline: calc(var(--gap) * -.5); padding-inline: calc(var(--gap) * .5);
}
.carousel__viewport::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .carousel__viewport { scroll-behavior: auto; } }

.carousel__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--gap)) / 3);
  gap: var(--gap); align-items: stretch;
  list-style: none; margin: 0; padding: .25rem 0 .5rem;
}
@media (max-width: 1000px) { .carousel__track { grid-auto-columns: calc((100% - var(--gap)) / 2); } }
@media (max-width: 660px)  { .carousel__track { grid-auto-columns: 100%; } }
.carousel__slide { scroll-snap-align: start; display: flex; }
.carousel__slide > * { width: 100%; }

.carousel__controls {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  margin-top: 1.75rem;
}
.carousel__controls[hidden] { display: none; }
.carousel__btn {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, opacity .2s ease;
}
.carousel__btn svg { width: 18px; height: 18px; }
.carousel__btn:hover:not(:disabled) { border-color: var(--accent-deep); background: var(--surface-2); }
.carousel__btn:disabled { opacity: .3; cursor: default; }
.section--dark .carousel__btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: #fff; }

.carousel__dots { display: flex; align-items: center; gap: .45rem; }
.carousel__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: var(--line-2); cursor: pointer;
  transition: width .2s ease, background-color .2s ease;
}
.carousel__dot[aria-current="true"] { width: 24px; background: var(--accent-deep); }
.section--dark .carousel__dot { background: rgba(255,255,255,.28); }
.section--dark .carousel__dot[aria-current="true"] { background: var(--accent); }

/* ---- 11. Split (tekst + beeld) ----------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--reverse .split__media { order: -1; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .split--reverse .split__media { order: 0; }
  .split__media { max-width: 420px; margin-inline: auto; }
}
.split__media img { border-radius: var(--radius); box-shadow: var(--shadow-md); width: 100%; }

.facts { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; display: grid; gap: .7rem; }
.facts:last-child { margin-bottom: 0; }
.facts li { position: relative; padding-left: 1.75rem; font-size: .975rem; color: var(--ink-soft); }
.facts li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 10px; height: 6px; border-left: 2px solid var(--accent-deep); border-bottom: 2px solid var(--accent-deep);
  transform: rotate(-45deg);
}
.section--dark .facts li { color: #c4bfba; }
.section--dark .facts li::before { border-color: var(--accent); }

.pullquote {
  margin: 2rem 0 0; padding: .25rem 0 .25rem 1.75rem;
  border-left: 3px solid var(--accent);
  font-family: var(--display); font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  line-height: 1.45; color: var(--ink);
}
.section--dark .pullquote { color: #fff; }

/* ---- 12. FAQ ----------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem;
  padding: 1.35rem .25rem; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem); font-weight: 500;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px; margin-top: .5em;
  border-right: 2px solid var(--accent-deep); border-bottom: 2px solid var(--accent-deep);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--accent-ink); }
.faq__answer { padding: 0 .25rem 1.5rem; color: var(--ink-soft); max-width: 72ch; }
.faq__answer p:first-child { margin-top: 0; }

/* ---- 13. CTA-band (zwart, met diagonale snede) ------------------- */
.cta-band {
  position: relative; background: var(--black); color: #f2efec;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center; overflow: hidden;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #c4bfba; max-width: 58ch; margin-inline: auto; }
.cta-band .eyebrow { color: var(--accent); }
.cta-band .btn-row { margin-top: 2rem; justify-content: center; }
.cta-band__note { margin-top: 1.25rem; font-size: .88rem; color: #948f8a; }

/* ---- 14. Formulier ----------------------------------------------- */
.form-shell { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .form-shell { grid-template-columns: 1fr; } }

.form-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 1.25rem; }
.field > label, .fieldset > legend {
  display: block; margin-bottom: .45rem;
  font-size: .9rem; font-weight: 600; color: var(--ink);
}
.field .hint { display: block; font-weight: 400; font-size: .85rem; color: var(--ink-dim); margin-top: .2rem; }
.req { color: var(--accent-ink); }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; padding: .85rem 1rem;
  font-family: var(--font); font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  transition: border-color .18s ease, box-shadow .18s ease;
}
textarea { min-height: 150px; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b5b5b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 18px;
  padding-right: 2.75rem;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent-deep); box-shadow: var(--ring);
}
input::placeholder, textarea::placeholder { color: var(--ink-dim); }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: #b4534b; }

.fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
.choices { display: grid; gap: .55rem; }
.choices--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .choices--2 { grid-template-columns: 1fr; } }

.choice {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .85rem 1rem; background: var(--bg);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  cursor: pointer; font-size: .95rem;
  transition: border-color .16s ease, background-color .16s ease;
}
.choice:hover { border-color: var(--accent-deep); }
.choice input { margin: .3rem 0 0; accent-color: var(--accent-deep); flex: none; }
.choice:has(input:checked) { border-color: var(--accent-deep); background: var(--surface-2); }
.choice span { line-height: 1.45; }
.choice small { display: block; color: var(--ink-dim); font-size: .85rem; }

.field-error { display: none; margin-top: .4rem; font-size: .86rem; color: #a8443c; }
.field-error.is-visible { display: block; }
.form-note { font-size: .87rem; color: var(--ink-dim); margin-top: 1.1rem; }

.form-status { display: none; margin-bottom: 1.35rem; padding: .95rem 1.15rem; border-radius: var(--radius-sm); font-size: .95rem; }
.form-status.is-error { display: block; background: #fbeeec; border: 1px solid #e4bdb8; color: #8c332c; }
.form-status.is-busy  { display: block; background: var(--surface-2); border: 1px solid var(--accent-deep); color: var(--accent-ink); }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aside-card {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.6rem, 2.6vw, 2rem);
}
.aside-card + .aside-card { margin-top: 1.1rem; }
.aside-card h3 { font-size: 1.2rem; }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.contact-list li { display: flex; gap: .8rem; align-items: flex-start; font-size: .96rem; }
.contact-list svg { width: 18px; height: 18px; color: var(--accent-ink); flex: none; margin-top: 4px; }
.contact-list strong {
  display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-dim); font-weight: 600;
}

/* ---- 15. Kruimelpad & tekstpagina's ------------------------------ */
.crumbs { padding-top: 1.5rem; font-size: .86rem; color: var(--ink-dim); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--line-2); }
.crumbs a { color: var(--ink-dim); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current="page"] { color: var(--ink-soft); }

.page-head { padding-block: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--line); }
.page-head h1 { margin-bottom: .85rem; }
.page-head .lede { max-width: 66ch; }

.prose { max-width: 74ch; }
.prose h2 { margin-top: 2.75rem; font-size: clamp(1.4rem, 1.15rem + .85vw, 1.85rem); }
.prose h3 { margin-top: 2rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { color: var(--ink-soft); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.35rem 0; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .75rem .9rem; border: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--bg-soft); font-weight: 600; }

/* ---- 16. Footer -------------------------------------------------- */
.site-footer { background: var(--black); color: #a8a29c; padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: clamp(1.75rem, 3.5vw, 3.5rem); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__logo { height: 34px; width: auto; max-width: 100%; margin-bottom: 1.25rem; }
.footer__about { font-size: .94rem; line-height: 1.7; max-width: 34ch; }
.footer h4 {
  color: #fff; font-family: var(--display); font-weight: 500;
  font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.1rem;
}
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; font-size: .94rem; }
.footer__list a { color: #a8a29c; }
.footer__list a:hover { color: var(--accent); text-decoration: none; }
.footer__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  margin-top: clamp(2.25rem, 4vw, 3.25rem); padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.12); font-size: .86rem; color: #7c7772;
}
.footer__meta a { color: #7c7772; }
.footer__meta a:hover { color: var(--accent); }

/* ---- 17. Sticky mobiele CTA -------------------------------------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: none; gap: .6rem; padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
}
.mobile-cta .btn { flex: 1; padding: .9rem 1rem; font-size: .82rem; }
@media (max-width: 720px) {
  .mobile-cta { display: flex; }
  body { padding-bottom: 78px; }
}

/* ---- 18. Scroll-reveal (subtiel) --------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---- 19. Hulpklassen --------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; }
.muted { color: var(--ink-dim); }
.nowrap { white-space: nowrap; }

/* ==================================================================
   20. Gecentreerde uitlijning
   De hele site is gecentreerd, zoals op de huidige site. Alles wat
   daarvan afwijkt staat hieronder bij elkaar — makkelijk terug te
   draaien door dit blok te verwijderen.
   ================================================================== */
main, .site-footer { text-align: center; }

/* Blokken met een maximale breedte moeten zelf ook centreren */
.lede, .prose, .footer__about, .faq__answer, .form-note { margin-inline: auto; }

/* Afbeeldingen staan op display:block, dus text-align centreert ze niet —
   die hebben een eigen auto-marge nodig. */
.footer__logo { margin-inline: auto; }

/* Kruimelpad en losse rijen */
.crumbs ol { justify-content: center; }
.footer__meta { justify-content: center; text-align: center; }

/* Icoon boven een kaart hoort dan ook in het midden */
.card__icon { margin-inline: auto; }

/* Genummerde stappen: cijfer gecentreerd boven de tekst */
.step::before { left: 50%; transform: translateX(-50%); }

/* Label op een uitgelicht pakket */
.price__tag { left: 50%; transform: translateX(-50%); }

/* Lijsten met een vinkje ervoor: het lijstitem zelf centreren, zodat het
   vinkje netjes vóór de tekst blijft staan in plaats van tegen de rand. */
.facts, .price__list, .contact-list { justify-items: center; }
.facts li, .price__list li { text-align: left; }
.contact-list li { text-align: left; max-width: 32ch; }

/* Citaat: streep boven in plaats van links, past beter bij gecentreerd */
.pullquote {
  padding: 1.5rem 0 0; border-left: 0; border-top: 0; position: relative;
  max-width: 40ch; margin-inline: auto;
}
.pullquote::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 56px; height: 2px; background: var(--accent);
}

/* Wat bewust links blijft ------------------------------------------ */

/* Formulieren: gecentreerde labels boven schermbrede velden lezen slecht
   en zien er stuk uit. */
.form-card { text-align: left; }

/* Lange juridische documenten: 24 artikelen gecentreerd zijn niet te
   lezen. Deze twee pagina's houden een normale leesregel. */
.prose--doc { text-align: left; }
.prose--doc .facts, .prose--doc .price__list { justify-items: start; }

/* Tabellen houden hun kolomuitlijning */
.rate-table th, .rate-table td { text-align: left; }
.rate-table th:last-child, .rate-table td:last-child { text-align: right; }
.prose th, .prose td { text-align: left; }

/* Accordeon: de titelregel is een flex-rij met een pijl rechts */
.faq summary { text-align: left; }

@media print {
  .site-header, .mobile-cta, .cta-band, .site-footer, .hero__shape { display: none !important; }
  body { background: #fff; padding-bottom: 0; }
  .hero, .page-hero { margin-top: 0; padding-top: 0; background: none; color: #000; }
}