/* =========================================================================
   Clootcrans — huisstijl (v3, editorial redesign)
   Crème · diepgroen · zwart (hero) · messing — Cormorant Garamond + Jost.
   "Wonder en is gheen wonder."
   ========================================================================= */

:root {
  /* Kleur — exact vier merkkleuren */
  --cream:  #efe9df;
  --green:  #18221d;
  --zwart:  #12100e;   /* uitsluitend het hero-paneel */
  --brass:  #b08d57;
  --brass-700: #96754a; /* hover, iets donkerder messing */
  --brass-100: #f1e6d3; /* zeer lichte messing-wash */

  /* Grijstinten voor tekst (tellen niet mee als merkkleur) */
  --ink:     #2a2622;  /* koppen en hoofdtekst op crème */
  --ink-mut: #5c5348;  /* body-tekst op crème */
  --ink-sub: #8a7f70;  /* labels, bijschriften */
  --rule:    #ddd4c6;  /* scheidingslijnen op crème */

  /* Semantische aliassen (oudere klassenamen in build.mjs blijven werken) */
  --groen:      var(--green);
  --groen-700:  #24352d;
  --groen-900:  var(--green);
  --room:       var(--cream);
  --room-200:   #e6ded0;
  --wit:        #FFFFFF;
  --goud:       var(--brass);
  --goud-700:   var(--brass-700);
  --goud-100:   var(--brass-100);
  --groen-100:  #dce3dd;
  --taupe:      #C7BFAF;
  --espresso:   #4A3E32;
  --ink-700:    var(--ink);
  --grond:      var(--cream);
  --terra:      var(--brass);
  --terra-700:  var(--brass-700);
  --terra-100:  var(--brass-100);
  --tekst:      var(--ink-mut);
  --grijs-500:  var(--ink-sub);
  --grijs-300:  #B7AF9F;
  --lijn:       var(--rule);
  --grijs-100:  var(--rule);
  --lijn-donker: rgba(239,233,223,0.12);

  /* Typografie */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", Helvetica, Arial, sans-serif;

  /* Één schaal voor de hele site. Elke maat in het ontwerp komt hier vandaan;
     losse waarden zoals 0.92rem of 15px horen nergens meer te staan. */
  --fs-micro:  11px;   /* kruimels, tags, bijschriften bij beeld */
  --fs-label:  12px;   /* kickers, knoppen, footerkoppen, uppercase labels */
  --fs-klein:  14px;   /* uppercase blokkoppen, fijndruk, kaart-meta */
  --fs-body:   16px;   /* alle lopende tekst */
  --fs-lead:   clamp(17px, 1.6vw, 19px);
  --fs-h4:     clamp(18px, 1.6vw, 20px);
  --fs-h3:     clamp(21px, 2.2vw, 28px);
  --fs-h2:     clamp(30px, 4vw, 42px);
  --fs-h1:     clamp(35px, 5.5vw, 68px);
  /* Cijferaccenten in Cormorant (stapnummers, kengetallen). */
  --fs-cijfer:      22px;
  --fs-cijfer-xl:   30px;

  /* Ritme */
  --maxw: 1240px;
  --gutter: clamp(24px, 5vw, 72px);
  --radius: 0;
  --shadow: none;
  --shadow-sm: none;
}

/* ---------- Reset / basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  /* overflow-x: clip en niet hidden: hidden maakt van het document een eigen
     scroll-container, waardoor position: sticky niet meer plakt en scroll-
     events niet op window vuren. clip knipt wel af, zonder die bijwerking. */
  max-width: 100%; overflow-x: clip;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink-mut);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  max-width: 100%; overflow-x: clip;
}
/* Flex/grid-items krimpen standaard niet onder hun content (min-width:auto),
   waardoor een lang woord of een <select>-optie de rij kan opdrukken. Op
   mobiel viel daardoor de rand van formuliervelden buiten het scherm. */
input, select, textarea, button { max-width: 100%; }
.field, .form, .form__row, .split, .split > * { min-width: 0; }
.field input, .field select, .field textarea { width: 100%; box-sizing: border-box; }
img { max-width: 100%; display: block; filter: saturate(.85) contrast(1.05) brightness(.95); }
a { color: var(--brass); text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--brass-700); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0 0 0.45em;
  color: var(--ink);
}
h1 { font-size: var(--fs-h1); line-height: 1.08; }
h2 { font-size: var(--fs-h2); line-height: 1.15; }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
/* Kaartkoppen zijn semantisch een h2 (ze volgen direct op de h1), maar krijgen
   het formaat van een h3, zodat de koppenstructuur klopt zonder dat het ontwerp
   verandert. */
.kaart__kop { font-size: var(--fs-h3); line-height: 1.2; }
p  { margin: 0 0 1.1em; }
em { font-style: italic; }
/* Body-tekst is Jost weight 300 (erg licht); browser-default bold (700) voor
   strong/b springt daardoor te hard uit de lopende tekst. Weight 500 (wel geladen
   font-gewicht) geeft nadruk zonder dat het als een ander lettertype oogt. */
strong, b { font-weight: 500; }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--ink-sub);
  margin: 0 0 20px;
  display: block;
}
/* Drie cloten voor het kicker-label, in plaats van het streepje eronder.
   Afgeleid van de clootcrans: gelijke bollen op gelijke afstand. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 34px;   /* 3 cloten van 6px met 8px ertussen */
  height: 6px;
  background-image: radial-gradient(circle 3px at 3px 3px, var(--brass) 100%, transparent 0);
  background-size: 14px 6px;
  background-repeat: repeat-x;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.eyebrow--licht { color: var(--brass); }

/* ---------- Layout helpers ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding: 96px var(--gutter); }
.section--tight { padding: 64px var(--gutter); }
.section--ink { background: var(--green); color: var(--cream); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--cream); }
.section--ink .eyebrow { color: var(--brass); }
/* Lichte kaarten binnen donkere sectie houden donkere koppen */
.section--ink .service h3, .section--ink .review p, .section--ink .review__author, .section--ink .pricecard h3 { color: var(--ink); }
.lead { font-size: var(--fs-lead); color: var(--ink-mut); max-width: 34em; line-height: 1.75; }
.section--ink .lead { color: rgba(239,233,223,.7); }
.center { text-align: center; }
.measure { max-width: 34em; }
/* Juridische pagina's (algemene voorwaarden/privacy): volledige paginabreedte,
   maar leesbare regellengte via kolommen i.p.v. één smalle gecentreerde kolom. */
.legal-text { column-width: 30em; column-gap: 4rem; }
.legal-text h2, .legal-text h3 { break-after: avoid; break-inside: avoid; }
.legal-text p { break-inside: avoid; }
@media (max-width: 780px) { .legal-text { column-width: auto; column-count: 1; } }
@media (max-width: 680px) {
  .section { padding: 64px 24px; }
  .section--tight { padding: 48px 24px; }
}

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 400; font-size: var(--fs-label); letter-spacing: 0.26em;
  /* De letterafstand zet ook rechts van de laatste letter ruimte, waardoor de
     tekst optisch links in het kader hangt. Rechts evenveel minder padding
     zet hem weer in het midden. */
  padding: 16px calc(28px - 0.26em) 16px 28px;
  border: 1px solid var(--brass);
  border-radius: 0;
  background: none; color: var(--brass);
  cursor: pointer; transition: background 0.25s ease, color 0.25s ease;
  text-transform: uppercase;
  min-height: 44px;
  /* In een flex-rij (de navigatie) mag de knop niet meekrimpen: dan zou de
     padding wegvallen en raakt de tekst het kader. */
  flex: none; white-space: nowrap; justify-content: center;
}
.btn--primary { background: none; color: var(--brass); border-color: var(--brass); }
/* Crème op messing leest slecht; het diepgroen houdt de tekst leesbaar zodra
   het vlak vol loopt. */
.btn--primary:hover { background: var(--brass); color: var(--green); }
/* Op een donker vlak is de open knop te stil: daar staat hij massief in
   messing, zodat de belangrijkste actie op elke pagina meteen opvalt. */
.section--ink .btn--primary,
.ctaband .btn--primary {
  background: var(--brass); color: var(--green); border-color: var(--brass);
}
.section--ink .btn--primary:hover,
.ctaband .btn--primary:hover { background: var(--brass-700); border-color: var(--brass-700); color: var(--cream); }
.btn--ghost { background: none; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn--ghost-licht { background: none; color: var(--cream); border-color: rgba(239,233,223,0.6); }
.btn--ghost-licht:hover { background: var(--cream); color: var(--green); border-color: var(--cream); }
.btn--groen { background: none; color: var(--cream); border-color: var(--cream); }
.btn--groen:hover { background: var(--cream); color: var(--green); }
/* De pijl zit met een harde spatie aan het laatste woord vast en staat als
   inline tekst in de regel. Als inline-block met een marge ervoor mag de
   browser er vóór afbreken, en dan belandde de pijl bij een lange link in zijn
   eentje op de volgende regel. Daarom schuift hij bij hover met padding, wat
   op een inline element wél werkt, in plaats van met transform. */
.arrow::after {
  content: "\00a0\00a0→"; font-weight: 400; letter-spacing: 0;
  transition: padding-left .2s ease;
}
.arrow:hover::after { padding-left: 4px; }
@media (prefers-reduced-motion: reduce) {
  .arrow:hover::after { padding-left: 0; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(239,233,223,0.92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.8rem; color: var(--ink); }
.brand__mark { width: 46px; height: 40px; flex: none; display: block; object-fit: contain; filter: none; }
.brand__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: 24px; letter-spacing: 0.16em; line-height: 1;
  color: var(--ink); text-transform: uppercase;
}
.nav { display: flex; align-items: center; gap: 1.7rem; }
.nav a {
  color: var(--ink); font-weight: 400; font-size: var(--fs-micro);
  letter-spacing: 0.24em; text-transform: uppercase;
  padding: 0.3rem 0; position: relative;
}
.nav a:hover { color: var(--brass-700); }
.nav a[aria-current="page"] { color: var(--brass-700); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--brass);
}
.nav__motto { color: var(--brass) !important; font-style: normal; }
.nav-toggle { display: none; }
/* Ruimer kader dan de gewone knop: in de header staat deze los tussen de
   navigatie, en dan heeft de tekst meer lucht om zich heen nodig. De rechter
   waarde compenseert weer de letterafstand achter de laatste letter. */
/* Alles hieronder is als .nav a geschreven: anders winnen de kleur en de
   padding van .nav a en krijgt de knop geen ruimte en de verkeerde tekstkleur.
   Maat gelijk aan de knop in de hero. */
.nav a.nav__cta {
  margin-left: 0.6rem;
  padding: 16px calc(28px - 0.26em) 16px 28px;
  color: var(--brass); border-color: var(--brass);
}
/* Bij hover keert de knop om: diepgroen vlak met crème tekst (13,5:1). Vol
   lopen met messing en crème tekst haalde maar 2,56:1, waardoor de tekst
   wegviel. Werkt op de crème balk én op de transparante header over de hero. */
.nav a.nav__cta:hover,
.site-header--over-hero .nav a.nav__cta:hover {
  background: var(--green); color: var(--cream); border-color: var(--green);
}
.site-header--over-hero .nav a.nav__cta { color: var(--brass); }

/* ---------- Dropdown "Diensten" ---------- */
.nav-dropdown { position: relative; }
.nav-dropdown__toggle {
  background: none; border: 0; cursor: pointer; font-family: var(--font-body);
  color: var(--ink); font-weight: 400; font-size: var(--fs-micro); letter-spacing: 0.24em; text-transform: uppercase;
  padding: 0.3rem 0; display: inline-flex; align-items: center; gap: 0.4em;
  min-height: 44px;
}
.nav-dropdown__toggle::after { content: "▾"; font-size: 9px; transition: transform 0.2s ease; }
.nav-dropdown:hover .nav-dropdown__toggle::after,
.nav-dropdown.is-open .nav-dropdown__toggle::after { transform: rotate(180deg); }
.nav-dropdown__toggle.is-current { color: var(--brass-700); }
/* top:100% zonder margin-gap, zodat de hover-keten van knop naar panel niet
   onderbreekt; het optisch tussenruimte komt van padding-top op het panel zelf
   (nog steeds hoverable), het zichtbare kader komt van ::before erachter. */
.nav-dropdown__panel {
  display: none; position: absolute; top: 100%; left: 0; min-width: 240px;
  padding: 0.9rem 0 0.5rem; z-index: 60;
}
.nav-dropdown__panel::before {
  content: ""; position: absolute; top: 0.9rem; left: 0; right: 0; bottom: 0;
  background: var(--cream); border: 1px solid var(--rule); z-index: -1;
}
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown.is-open .nav-dropdown__panel { display: block; }
.nav-dropdown__panel a {
  display: block; padding: 0.6rem 1.2rem; font-size: var(--fs-micro); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.nav-dropdown__panel a:hover { color: var(--brass-700); background: var(--room-200); }
.nav-dropdown__panel .nav-dropdown__all { border-top: 1px solid var(--rule); margin-top: 0.4rem; padding-top: 0.75rem; color: var(--brass); }
/* De navigatie klapt samen zodra menu plus offerteknop niet meer naast het
   merk passen. Dat is rond 900px, ruim voor de 680px waar de rest van de
   opmaak omschakelt: anders valt de knop buiten beeld op een tablet. */
@media (max-width: 900px) {
  .nav-dropdown__panel {
    position: static; margin-top: 0.2rem; padding: 0 0 0 1rem; min-width: 0;
  }
  .nav-dropdown__panel::before { display: none; }
  .nav-dropdown:hover .nav-dropdown__panel { display: none; }
  .nav-dropdown.is-open .nav-dropdown__panel { display: block; }
  .nav-dropdown__panel a { padding: 0.55rem 0; }
}

/* ---------- Hero (full-bleed foto met fade, stijlgids-patroon) ---------- */
.hero {
  background: var(--zwart);
  background-size: cover;
  background-position: center;
  color: var(--cream);
  position: relative;
  overflow: hidden;
  min-height: clamp(420px, 78vh, 760px);
  display: flex;
  align-items: center;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(18,16,14,0.94) 0%, rgba(18,16,14,0.78) 34%, rgba(18,16,14,0.28) 62%, rgba(18,16,14,0.05) 82%),
    radial-gradient(120% 80% at 88% 0%, rgba(176,141,87,0.18), transparent 55%),
    linear-gradient(180deg, rgba(18,16,14,0.1) 0%, transparent 40%, transparent 62%, var(--green) 100%);
}

/* ---------- Doorlopende hero (homepage) ----------
   Foto, verlooplaag, header en tekst vormen één compositie: de foto loopt door
   tot achter de navigatie, die er transparant overheen ligt. Vier losse lagen,
   nooit één platte afbeelding met ingebakken tekst. */
.hero--doorlopend { min-height: 100svh; background: var(--green); }
.hero--doorlopend .hero__media { position: absolute; inset: 0; z-index: 0; }
.hero--doorlopend .hero__media img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 62% center;
}
/* De verlooplagen en de tekst moeten bóven de foto blijven. */
.hero--doorlopend::before,
.hero--doorlopend::after { z-index: 1; }
.hero--doorlopend .hero__inner { z-index: 2; }
/* Extra verdonkering bovenin, zodat logo en menu altijd leesbaar blijven. */
.hero--doorlopend::before {
  background:
    linear-gradient(180deg, rgba(18,16,14,0.72) 0%, rgba(18,16,14,0.28) 18%, transparent 38%),
    linear-gradient(100deg, rgba(18,16,14,0.92) 0%, rgba(18,16,14,0.72) 34%, rgba(18,16,14,0.24) 62%, rgba(18,16,14,0.04) 82%),
    radial-gradient(120% 80% at 88% 0%, rgba(176,141,87,0.18), transparent 55%);
}
/* Ruimte onder de absoluut geplaatste header vrijhouden. */
.hero--doorlopend .hero__inner { padding-block: clamp(150px, 22vh, 260px) clamp(80px, 12vh, 150px); }
/* 'Vakkundig uitgevoerd.' blijft op desktop op één regel (feedback punt 15). */
.hero__regel2 { white-space: nowrap; }
@media (max-width: 480px) { .hero__regel2 { white-space: normal; } }
/* Motto staat ónder de kop, niet erboven (feedback punt 11). */
.hero--doorlopend .hero__motto {
  position: static; margin: 22px 0 0;
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.28em;
  font-size: var(--fs-micro); color: var(--brass);
}

/* ---------- Header transparant over de hero ----------
   Ook hier sticky, zodat menu en offerteknop op de homepage meescrollen. Zolang
   de hero in beeld is blijft de balk doorzichtig; zodra je eronder komt zet JS
   de klasse .is-vast en krijgt hij het gewone crème vlak terug. */
.site-header--over-hero {
  position: sticky; top: 0; left: 0; right: 0; z-index: 50;
  background-color: transparent; backdrop-filter: none; border-bottom: 0;
  /* De balk ligt over de hero heen in plaats van erboven. */
  margin-bottom: calc(-1 * var(--headerhoogte, 88px));
  /* Alleen background-color, niet de background-shorthand: die omvat ook
     background-image, en daarop blijft de overgang in Chrome hangen. */
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.site-header--over-hero.is-vast {
  background-color: rgba(239,233,223,0.92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header--over-hero.is-vast .brand,
.site-header--over-hero.is-vast .brand__name { color: var(--ink); }
.site-header--over-hero.is-vast .nav a,
.site-header--over-hero.is-vast .nav-dropdown__toggle { color: var(--ink); }
.site-header--over-hero.is-vast .nav a:hover,
.site-header--over-hero.is-vast .nav-dropdown__toggle:hover { color: var(--brass-700); }
.site-header--over-hero.is-vast .nav-toggle span { background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .site-header--over-hero { transition: none; } }
.site-header--over-hero .brand,
.site-header--over-hero .brand__name { color: var(--cream); }
.site-header--over-hero .nav a,
.site-header--over-hero .nav-dropdown__toggle { color: var(--cream); }
.site-header--over-hero .nav a:hover,
.site-header--over-hero .nav-dropdown__toggle:hover { color: var(--brass); }
.site-header--over-hero .nav-toggle span { background: var(--cream); }
/* Het dropdownpaneel houdt zijn eigen lichte achtergrond, dus daar blijft de
   donkere tekstkleur staan. */
.site-header--over-hero .nav-dropdown__panel a { color: var(--ink); }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(239,233,223,0.04) 1px, transparent 1px);
  background-size: 100% 52px;
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
}
.hero__inner { position: relative; z-index: 1; padding-block: clamp(88px, 15vw, 190px); max-width: 760px; margin-inline: 0; }
.hero h1 { color: var(--cream); max-width: 16ch; margin-bottom: 0; font-size: var(--fs-h1); line-height: 1.08; }
.hero__accent { width: 48px; height: 1px; background: var(--brass); margin: 20px 0; border: 0; }
.hero__lead { font-size: var(--fs-lead); color: rgba(239,233,223,.8); max-width: 48ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }
.hero__motto {
  position: absolute; left: var(--gutter); bottom: clamp(24px, 4vw, 48px); z-index: 1;
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.28em;
  font-size: var(--fs-micro); color: var(--brass);
}
@media (max-width: 680px) {
  .hero { min-height: clamp(520px, 92vh, 760px); background-position: 65% center; }
  /* De verlooplaag is donker op de drie plekken met tekst (menu bovenaan, kop
     en knop in het midden) en laat de foto daartussen en daaronder doorkomen.
     Met een gelijkmatige 60 tot 80 procent dekking over de hele hoogte oogde de
     hero op een telefoon vrijwel zwart, terwijl de foto juist licht is. */
  .hero::before {
    background:
      linear-gradient(180deg,
        rgba(18,16,14,0.70) 0%,
        rgba(18,16,14,0.66) 14%,
        rgba(18,16,14,0.30) 27%,
        rgba(18,16,14,0.64) 40%,
        rgba(18,16,14,0.66) 66%,
        rgba(18,16,14,0.28) 80%,
        rgba(18,16,14,0.55) 94%,
        var(--green) 100%);
  }
  /* De lichtste helft van de foto in beeld houden. */
  .hero--doorlopend .hero__media img { object-position: 56% center; }
  /* Homepage: schermvullend (de 92vh-regel hierboven mag 100svh niet
     overschrijven) en de tekst onderin, op een donker verloop. Bovenin blijven
     raam en bomen vrij zichtbaar, de knop staat niet meer op de lichte vloer. */
  .hero.hero--doorlopend { min-height: 100svh; align-items: flex-end; }
  .hero--doorlopend .hero__inner { padding-block: 120px clamp(40px, 8svh, 72px); }
  .hero--doorlopend::before {
    background:
      linear-gradient(180deg,
        rgba(18,16,14,0.70) 0%,
        rgba(18,16,14,0.22) 16%,
        rgba(18,16,14,0.10) 32%,
        rgba(18,16,14,0.62) 52%,
        rgba(18,16,14,0.86) 72%,
        rgba(18,16,14,0.92) 100%);
  }
}

/* ---------- Statenbalk (kort, cijfers, geen bodytekst) ---------- */
.stats-strip { padding-block: 28px; border-bottom: 1px solid var(--rule); }
.stats-strip .grid--4 { gap: 1.2rem; }
.stats-strip__item { text-align: center; }
.stats-strip__num { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-cijfer); color: var(--ink); }
.stats-strip__label { display: block; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--fs-micro); color: var(--ink-sub); margin-top: 0.25rem; }
@media (max-width: 680px) { .stats-strip .grid--4 { grid-template-columns: 1fr 1fr; row-gap: 1.6rem; } }

/* ---------- Ons verhaal ---------- */
.verhaal { background: var(--cream); }

/* ---------- Grids ---------- */
.grid { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Split (tekst + beeld, alternerend) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--flip .split__media { order: -1; }
.split__body h2 { margin-bottom: 0.6rem; }

/* Titel gestapeld (eyebrow + h2, geen lopende tekst) links, tekst rechts. Gebruikt
   voor de content-secties op dienstpagina's, i.p.v. een smalle gecentreerde kolom. */
.split--sectie { grid-template-columns: 1fr 1.6fr; align-items: start; }
.split--sectie .split__body h2 { margin-bottom: 0; }
.split--sectie .split__text p { margin-bottom: 1.1em; }
.split--sectie .split__text p:last-child { margin-bottom: 0; }
.split--sectie.split--flip { grid-template-columns: 1.6fr 1fr; }
.split--sectie.split--flip .split__body { order: 2; }
@media (max-width: 940px) {
  .split--sectie, .split--sectie.split--flip { grid-template-columns: 1fr; }
  .split--sectie.split--flip .split__body { order: 0; }
}

/* ---------- Werkwijze-stappen (01–04 rij) ---------- */
.method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.method__item { padding: 0 1.8rem; border-left: 1px solid var(--rule); }
/* Bij meer dan drie stappen begint elke rij opnieuw links, dus vervalt de
   scheidingslijn bij het eerste item van iedere rij. */
.method__item:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.method__num { font-family: var(--font-display); font-size: var(--fs-cijfer-xl); color: var(--brass); display: block; margin-bottom: 1.2rem; }
.method__icon { color: var(--brass); margin-bottom: 1rem; }
.method__icon svg { display: block; }
.method h3 { text-transform: uppercase; font-family: var(--font-body); font-weight: 400; letter-spacing: 0.12em; font-size: var(--fs-klein); color: var(--ink); }
.method p { color: var(--ink-mut); font-size: var(--fs-body); margin: 0; }
/* Op een donkere sectie draaien de tekstkleuren om. Stond eerder hardgecodeerd
   op crème, waardoor de stappen onzichtbaar werden op een licht vlak. */
.section--ink .method__item { border-left-color: rgba(239,233,223,.12); }
.section--ink .method h3 { color: var(--cream); }
.section--ink .method p { color: rgba(239,233,223,.7); }
@media (max-width: 940px) {
  .method { grid-template-columns: 1fr 1fr; gap: 2rem 0; }
  .method__item { border-left: 0; padding-inline: 0; }
  .method__item:nth-child(even) { padding-left: 1.8rem; border-left: 1px solid var(--rule); }
  .section--ink .method__item:nth-child(even) { border-left-color: rgba(239,233,223,.12); }
}
@media (max-width: 680px) {
  .method { grid-template-columns: 1fr; }
  .method__item { border-top: 1px solid rgba(239,233,223,.12); border-left: 0; padding: 1.8rem 0 0; }
  .method__item:first-child { border-top: 0; padding-top: 0; }
  .method__item:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* ---------- Diensten-kaarten ---------- */
.service {
  background: var(--cream); border: 1px solid var(--rule); border-top: 3px solid var(--brass);
  border-radius: 0; padding: 2.3rem 2rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.service:hover { border-color: var(--brass); transform: translateY(-3px); box-shadow: 0 16px 30px rgba(18,16,14,.16); }
.service__icon { color: var(--brass); display: block; }
.service__icon svg { display: block; }
/* Het icoon staat naast de titel, niet erboven: dat scheelt een regel hoogte en
   laat de kaarten in een raster netter uitlijnen. */
.kaart__titel { display: flex; align-items: flex-start; gap: 0.7rem; }
/* Bij een titel over twee regels hoort het icoon bij de eerste regel te staan,
   niet halverwege het blok te zweven. */
.kaart__titel .service__icon { flex: none; margin-top: 0.22em; }
.service__num {
  font-family: var(--font-display); font-size: var(--fs-h4);
  color: var(--brass); letter-spacing: 0.04em;
}
.service h3 { margin: 0.4rem 0 0.3rem; }
.service p { color: var(--ink-mut); font-size: var(--fs-body); margin-bottom: 0.5rem; }
.service__link { font-family: var(--font-body); font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; font-size: var(--fs-label); margin-top: auto; color: var(--brass); }
.service--groen .service__num, .service--groen .service__link { color: var(--brass); }

/* ---------- Media-placeholder ---------- */
.ph {
  position: relative; border-radius: 0; overflow: hidden;
  background: var(--green);
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  color: rgba(239,233,223,.7);
}
.ph::after { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(80% 60% at 70% 20%, rgba(176,141,87,0.18), transparent 60%); }
.ph span {
  position: relative; z-index: 1;
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: var(--fs-micro); color: var(--brass);
  border: 1px solid rgba(176,141,87,0.5); padding: 0.4em 0.9em; border-radius: 0;
}
.ph--wide { aspect-ratio: 16 / 9; }
.ph--tall { aspect-ratio: 3 / 4; }

/* Foto's (vullen een .ph-kader) */
.ph--img { background: var(--green); }
.ph--img::after { display: none; }
.ph--img span { display: none; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero--photo { background-size: cover; background-position: center; }

/* ---------- Voor / na, naast elkaar ----------
   Geen schuifvergelijking: die vraagt twee opnamen vanaf exact hetzelfde
   standpunt. De foto's van Kasper zijn vanuit verschillende hoeken genomen,
   en dan liegt een schuif over wat je ziet. Naast elkaar klopt altijd.
   Op smalle schermen onder elkaar, anders wordt elke helft te klein. */
/* ---------- Voor en na: schuifvergelijking ----------
   De na-foto ligt onderop, de voor-foto eroverheen en wordt met clip-path
   afgeknipt op de stand van --pos. Beide foto's vullen hetzelfde kader, dat
   per paar wordt meegegeven, want een staande badkamer en een liggende
   woonkamer passen niet in één verhouding. */
.schuif {
  position: relative; aspect-ratio: var(--kader, 4 / 3); overflow: hidden;
  border: 1px solid var(--rule); background: var(--green);
  --pos: 50%;
  touch-action: pan-y;
}
.schuif__beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.schuif__voor { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.schuif__tag {
  position: absolute; bottom: 10px; z-index: 2;
  padding: 0.35em 0.8em;
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: 0.2em; font-size: var(--fs-micro);
  background: rgba(18,16,14,0.85); color: var(--cream);
  pointer-events: none;
}
.schuif__tag--voor { left: 10px; }
.schuif__tag--na { right: 10px; background: var(--brass); color: var(--cream); }
/* De lijn en de greep zitten op de stand van de schuif en vangen zelf geen
   muis, zodat de range-input eronder de bediening houdt. */
.schuif__lijn {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; margin-left: -1px; background: var(--cream); z-index: 2;
  pointer-events: none;
}
.schuif__greep {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--rule);
}
.schuif__greep::before, .schuif__greep::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transform: translateY(-50%);
}
.schuif__greep::before { left: 0.55rem; border-right: 6px solid var(--ink); }
.schuif__greep::after { right: 0.55rem; border-left: 6px solid var(--ink); }
/* De range-input is de bediening: onzichtbaar, maar over het hele beeld en
   met een echte focusring, zodat toetsenbordbediening zichtbaar blijft. */
.schuif__regel {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; margin: 0; padding: 0;
  appearance: none; -webkit-appearance: none;
  background: transparent; cursor: ew-resize;
}
.schuif__regel::-webkit-slider-thumb { -webkit-appearance: none; width: 2.6rem; height: 100%; background: transparent; cursor: ew-resize; }
.schuif__regel::-moz-range-thumb { width: 2.6rem; height: 100%; border: 0; background: transparent; cursor: ew-resize; }
.schuif__regel:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* Galerij met losse opleverbeelden. */
.werkgalerij {
  display: grid; gap: clamp(1rem, 2vw, 1.6rem); margin-top: 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.werkgalerij--vier { margin-top: 0; }
/* Zie de opmerking bij .project-grid: ook hier twee naast elkaar op een
   telefoon, anders staan er elf beelden achter elkaar. */
@media (max-width: 680px) {
  .werkgalerij { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
}
.werkgalerij__item {
  margin: 0; aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid var(--rule); background: var(--green);
}
.werkgalerij__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Beeld naast een tekstblok op een dienstpagina: de kop staat boven de volle
   breedte, daaronder tekst links en beeld rechts. */
.split--tekst-beeld { grid-template-columns: 1.4fr 1fr; align-items: start; margin-top: 1.6rem; }
.split--tekst-beeld .split__text p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .split--tekst-beeld { grid-template-columns: 1fr; } }
.sectie-beeld {
  margin: 0; border: 1px solid var(--rule); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--green);
}
.sectie-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Reviews ----------
   Eén review krijgt de volle breedte als uitgelicht citaat; komen er meer bij,
   dan zetten ze zich vanzelf naast elkaar. */
.reviews { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.review {
  background: var(--cream); border: 1px solid var(--rule); border-radius: 0;
  padding: clamp(1.8rem, 3vw, 2.6rem); margin: 0;
}
.stars { color: var(--brass); letter-spacing: 0.18em; font-size: var(--fs-body); margin-bottom: 0.8rem; }
.review blockquote { margin: 0; }
/* Ook als de kaart de volle breedte krijgt, blijft de regellengte leesbaar. */
.review p { font-size: var(--fs-lead); font-family: var(--font-display); font-style: italic; color: var(--ink); line-height: 1.5; max-width: 46em; }
.review p:last-child { margin-bottom: 0; }
.review figcaption { margin-top: 1.4rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.review__author { display: block; font-weight: 400; color: var(--ink); font-size: var(--fs-klein); }
.review__meta { display: block; color: var(--ink-sub); font-size: var(--fs-klein); letter-spacing: 0.04em; }

/* ---------- Projecten ---------- */
.voorna-lijst { display: grid; gap: clamp(3rem, 7vw, 5.5rem); margin-top: 2rem; }
.projecten-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 2rem; }
.projecten-head .eyebrow { margin: 0; }
/* auto-fit in plaats van een vast aantal kolommen: het aantal projecten met een
   eigen foto groeit nog, en bij drie stuks hoort er geen lege kolom te staan. */
/* Ruimere tussenruimte dan de 8px van de oude tegels: nu er een bijschrift
   onder elke foto staat, moet duidelijk zijn bij welk beeld het hoort. */
.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); }
/* Het bijschrift stond eerder over de foto heen. Bij een lichte foto met veel
   detail, en bij een titel die over twee regels loopt, bedekte dat juist het
   deel van het beeld waar het om gaat. Nu staat het eronder. */
.project { border-radius: 0; margin: 0; }
.project .ph { aspect-ratio: 4 / 5; height: auto; }
.project .ph span { display: none; }
.project figcaption { padding: 0.9rem 0 0; }
.project__code { font-family: var(--font-body); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--fs-klein); color: var(--ink); overflow-wrap: break-word; }
/* Op een donkere sectie moet het bijschrift meekleuren, anders staat er
   inktkleurige tekst op een inktkleurige ondergrond. */
.section--ink .project__code { color: var(--cream); }
@media (max-width: 940px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
/* Op een telefoon blijven het er twee. Eén kolom maakte de pagina zo lang dat
   je door vijf schermen beeld moest scrollen voor je bij de volgende tekst was;
   op halve breedte is een staand beeld nog steeds goed te zien. */
@media (max-width: 680px) {
  .project-grid { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
  .project__code { letter-spacing: 0.06em; }
}

/* ---------- Manifest ----------
   De beeldkolom is bewust smaller dan de tekstkolom en het beeld houdt zijn
   eigen staande verhouding. Eerder rekte het beeld mee met de hoogte van de
   tekst, waardoor het het manifest overschreeuwde. */
.manifest { background: var(--cream); }
.manifest .split { grid-template-columns: 0.58fr 1fr; align-items: center; }
.manifest .split__media { align-self: center; }
.manifest .split__media .ph { height: auto; aspect-ratio: 3 / 4; min-height: 0; }
@media (max-width: 860px) {
  .manifest .split { grid-template-columns: 1fr; }
  .manifest .split__media { max-width: 22rem; }
}

/* ---------- Prijzen (component blijft bestaan, niet meer gebruikt) ---------- */
.pricecard { background: var(--cream); border: 1px solid var(--rule); border-radius: 0; padding: 2rem 1.9rem; }
.pricecard__from { color: var(--ink-sub); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.16em; font-family: var(--font-body); font-weight: 400; }
.pricecard__amount { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); color: var(--ink); line-height: 1; margin: 0.3rem 0 0.7rem; }
.pricecard ul { list-style: none; padding: 0; margin: 0.8rem 0 0; }
.pricecard li { padding: 0.5rem 0 0.5rem 1.7rem; position: relative; color: var(--ink-sub); font-size: var(--fs-body); border-top: 1px solid var(--rule); }
.pricecard li::before { content: ""; position: absolute; left: 0; top: 0.95rem; width: 9px; height: 9px; border: 1.5px solid var(--brass); border-radius: 50%; }

/* ---------- Signatuurregel ---------- */
.signature { background: var(--room-200); }
.signature .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; padding-block: clamp(40px,6vw,72px); }
.signature__quote { font-family: var(--font-display); font-style: italic; font-size: var(--fs-h3); color: var(--ink); max-width: 24ch; line-height: 1.25; margin: 0; }
.signature__mark { font-family: var(--font-display); font-style: italic; font-size: var(--fs-cijfer); color: var(--brass); transform: rotate(-4deg); }

/* ---------- CTA-blok ---------- */
.ctaband { background: var(--green); color: var(--cream); position: relative; overflow: hidden; }
.ctaband .container {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: clamp(44px,6vw,80px); position: relative; z-index: 1;
}
.ctaband h2 { color: var(--cream); margin: 0; max-width: 22ch; text-align: left; }
/* Merkteken en knop delen dezelfde as, zodat de crans boven de knop hangt in
   plaats van er los naast te staan. */
/* Merkteken en knop staan onder elkaar en zijn even breed, zodat ze links en
   rechts op dezelfde lijn eindigen. De breedte staat hier expliciet: zonder
   die waarde bepaalt de standaardbreedte van een <svg> (300px) hoe breed de
   knop wordt, en dat is geen bewuste maat. */
.ctaband__actie {
  display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem;
  flex: none; width: 280px;
}
.ctaband__merk { width: 100%; height: auto; color: var(--brass); }
@media (max-width: 680px) {
  .ctaband .container { flex-direction: column; align-items: flex-start; }
  /* Op een smal scherm past 280px niet altijd naast de marges. */
  .ctaband__actie { width: min(280px, 100%); }
}

/* ---------- Formulier ---------- */
.form { display: grid; gap: 1.4rem; }
.form__row { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-weight: 400; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: var(--fs-body); padding: 0.8em 0.95em;
  border: 1px solid var(--grijs-300); border-radius: 0; background: var(--cream); color: var(--ink-mut);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 1px solid var(--brass); outline-offset: 2px; border-color: var(--brass); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: var(--fs-klein); color: var(--ink-sub); }
.form__status { font-size: var(--fs-klein); margin-top: 0.9rem; }
.form__status--ok { color: var(--groen); }
.form__status--fout { color: #a3402c; }
.field input[type="file"] { border: 0; padding: 0.5em 0; background: none; }

/* ---------- FAQ (2 kolommen) ---------- */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; align-content: start; }
@media (max-width: 780px) { .faq { grid-template-columns: 1fr; } }
.faq details { border-top: 1px solid var(--rule); }
.faq details[open] summary { color: var(--brass-700); }
.faq summary { cursor: pointer; font-family: var(--font-display); font-size: var(--fs-h4); color: var(--ink); padding: 1.1rem 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brass); font-size: 1.4rem; font-family: var(--font-body); }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--ink-sub); padding-bottom: 0.8rem; margin: 0; }

/* ---------- Breadcrumb ---------- */
.crumb { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-sub); padding-block: 1rem 0; }
.section--ink .crumb, .section--ink .crumb a { color: rgba(239,233,223,.6); }
.crumb a { color: var(--ink-sub); }
.crumb a:hover { color: var(--brass); }

/* ---------- Footer ---------- */
.site-footer { background: var(--green); color: rgba(239,233,223,.7); padding-block: clamp(52px,7vw,88px) 2rem; border-top: 1px solid rgba(239,233,223,.12); }
.site-footer .footer__kop { color: var(--brass); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.24em; margin-bottom: 1.1rem; font-family: var(--font-body); font-weight: 400; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.4rem; }
.site-footer a { color: rgba(239,233,223,.7); }
.site-footer a:hover { color: var(--brass); }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; font-size: var(--fs-body); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  border-top: 1px solid rgba(239,233,223,.12); margin-top: 3rem; padding-top: 1.6rem; font-size: var(--fs-klein); color: rgba(239,233,223,.5); }
.footer-bottom .footer-regios { display: block; width: 100%; margin-bottom: 0.6rem; font-size: var(--fs-klein); }
.footer-bottom .footer-regios a { color: rgba(239,233,223,.55); margin-right: 0.9rem; }
.footer-motto { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.24em; font-size: var(--fs-micro); color: var(--brass); margin-top: 1.2rem; }
.footer-brand__name { font-family: var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream); font-size: 24px; font-weight: 400; }

/* ---------- Utilities ---------- */
.tag { display: inline-block; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.2em;
  font-size: var(--fs-micro); font-weight: 400; color: var(--brass); background: none; border: 1px solid var(--brass); padding: 0.5em 0.9em; border-radius: 0; }
.tag--groen { color: var(--cream); background: none; border-color: var(--cream); }
.section--ink .tag--groen { color: var(--brass); border-color: var(--brass); }
.divider { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .nav.is-open {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0.4rem;
    background: var(--cream); border-bottom: 1px solid var(--rule);
    padding: 1.1rem var(--gutter) 1.5rem;
  }
  .nav a.nav__cta { margin: 0.6rem 0 0; }
  .nav.is-open .nav__motto { display: none; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px;
    min-width: 44px; min-height: 44px; flex-shrink: 0; align-items: center; justify-content: center;
  }
  .nav-toggle span { width: 26px; height: 2px; background: var(--ink); display: block; }
  .site-header__inner { position: relative; }
}
@media (max-width: 360px) {
  .site-header__inner { gap: 0.75rem; }
  .site-header .brand { gap: 0.5rem; min-width: 0; }
  .site-header .brand__name { font-size: clamp(var(--fs-body), 6vw, var(--fs-cijfer)); }
}
@media (max-width: 680px) {
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  /* Lange veldlabels (bv. "Korte omschrijving van de werkzaamheden") braken
     lelijk af door de brede letter-spacing op smalle schermen. */
  .field label { letter-spacing: 0.1em; font-size: var(--fs-micro); }
  .form { gap: 1.1rem; }
  .pricecard { padding: 1.6rem 1.5rem; }
}

/* ------------------------------------------------------------------ cookiemelding */
/* Verschijnt alleen als er een GA4-meetcode is ingesteld. Blijft onderaan staan en
   duwt de pagina niet weg, zodat de bezoeker gewoon kan doorlezen. */
.cookiemelding {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--green);
  color: var(--cream);
  border-top: 1px solid rgba(176, 141, 87, .45);
  box-shadow: 0 -10px 30px rgba(18, 16, 14, .18);
}
.cookiemelding[hidden] { display: none; }

.cookiemelding__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.15rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.cookiemelding__tekst p { margin: 0; }
.cookiemelding__tekst p + p {
  margin-top: .3rem;
  font-size: var(--fs-klein);
  color: rgba(239, 233, 223, .82);
  line-height: 1.55;
}
.cookiemelding__tekst a {
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: .18em;
}
.cookiemelding__tekst a:hover { color: var(--brass-100); }

.cookiemelding__knoppen {
  display: flex;
  gap: .7rem;
  flex-shrink: 0;
}
/* De ghost-knop staat hier op een donkere ondergrond en heeft dus een lichte rand nodig. */
.cookiemelding .btn--ghost {
  border-color: rgba(239, 233, 223, .5);
  color: var(--cream);
}
.cookiemelding .btn--ghost:hover {
  border-color: var(--cream);
  background: rgba(239, 233, 223, .1);
}

@media (max-width: 720px) {
  .cookiemelding__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
  }
  .cookiemelding__knoppen { flex-wrap: wrap; }
  .cookiemelding__knoppen > .btn { flex: 1 1 140px; }
}

/* ---------- Merkmerk in het 'Ons verhaal'-blok (feedback §1.2) ---------- */
.merkmerk { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; color: var(--ink); }
.merkmerk__crans { width: clamp(150px, 22vw, 250px); height: auto; display: block; margin-bottom: 10px; }
.merkmerk__naam {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-h2); letter-spacing: 0.2em; line-height: 1;
  text-transform: uppercase; color: var(--ink);
}
.merkmerk__tagline {
  font-family: var(--font-body); font-size: var(--fs-micro); letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--ink-sub);
}

/* ---------- Onderdelenlijst op een dienstenpagina ---------- */
.onderdeel { border-top: 1px solid var(--rule); padding-top: 1rem; }
.section--ink .onderdeel { border-color: rgba(239,233,223,0.18); }
.onderdeel h3 { font-size: var(--fs-h4); margin-bottom: 0.6rem; }


/* Op de homepage is de header transparant met lichte tekst. Zodra het mobiele
   menu opengaat krijgt het een crème vlak, dus moet de tekst daar weer donker
   worden; anders staat crème op crème. */
@media (max-width: 900px) {
  .site-header--over-hero .nav.is-open a,
  .site-header--over-hero .nav.is-open .nav-dropdown__toggle { color: var(--ink); }
  .site-header--over-hero .nav.is-open .nav__cta { color: var(--brass); }
  .site-header--over-hero .nav.is-open .nav-dropdown__groepkop { color: var(--ink-sub); }
}
.onderdeel__link { display: inline-block; margin-top: 0.7rem; font-size: var(--fs-micro); }
/* De dienstenintro op de homepage mag breder dan de standaard leesbreedte,
   zodat hij op twee regels past in plaats van drie. */
.lead--breed { max-width: 62em; }
/* De eerste alinea van een dienstenpagina is de kernzin, geen kop. Hij staat
   groter dan de lopende tekst; de groene kleur maakt zichtbaar dat het om een
   aparte laag gaat en niet om een tweede lettergrootte in dezelfde alinea. */
.lead--kernzin { color: var(--green); font-weight: 400; }
.section--ink .lead--kernzin { color: var(--cream); }
.ctaband__body { max-width: 52ch; }
.ctaband__tekst { margin: 0.9rem 0 0; color: rgba(239,233,223,.75); }

/* Onderdelen van een dienst klappen open, zodat een pagina met veel detail
   overzichtelijk blijft (aanwijzing van Kasper bij de dienstenboom). */
details.onderdeel > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline;
  gap: 0.6rem; padding-bottom: 0.2rem;
}
details.onderdeel > summary::-webkit-details-marker { display: none; }
details.onderdeel > summary h3 { margin: 0; }
details.onderdeel > summary::after {
  content: "+"; margin-left: auto; color: var(--brass);
  font-family: var(--font-body); font-size: 1.1rem; line-height: 1; transition: transform .2s ease;
}
details.onderdeel[open] > summary::after { content: "\2013"; }
details.onderdeel > summary:hover h3 { color: var(--brass-700); }
.section--ink details.onderdeel > summary:hover h3 { color: var(--brass); }


/* De geëtste crans is aangeleverd op een papierkleurig vlak. Met multiply
   verdwijnt dat vlak in de crème achtergrond en blijft alleen de tekening over. */
.merkmerk__crans { filter: none; }

/* ---------- Terug naar boven ---------- */
.naar-boven {
  position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px);
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--brass); background: var(--green); color: var(--cream);
  cursor: pointer; z-index: 80; padding: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.naar-boven.is-zichtbaar { opacity: 1; visibility: visible; transform: none; }
.naar-boven:hover { background: var(--brass); color: var(--green); }
.naar-boven:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .naar-boven { transition: none; } }

.merkmerk__wapen { width: 100%; height: auto; display: block; filter: none; }
/* Het wapen bij "De naam Clootcrans" krijgt de ruimere kolom, zodat het beeld
   groter staat dan de tekst ernaast. */
.split--beeld-groot { grid-template-columns: 1fr 1.45fr; }
/* Gespiegeld staat het beeld links, dus verhuist de ruime kolom mee. */
.split--beeld-groot.split--flip { grid-template-columns: 1.45fr 1fr; }
@media (max-width: 940px) {
  .split--beeld-groot, .split--beeld-groot.split--flip { grid-template-columns: 1fr; }
  /* Op één kolom staat de tekst weer boven het beeld. */
  .split--beeld-groot.split--flip .split__media { order: 0; }
}

/* ---------- Zes principes: titel zichtbaar, toelichting uitklapbaar ---------- */
.principes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 3rem; margin-top: 2rem; }
.principe { border-top: 1px solid rgba(239,233,223,.14); padding: 1.1rem 0; }
.principe > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 1rem;
}
.principe > summary::-webkit-details-marker { display: none; }
.principe > summary h3 {
  margin: 0; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-klein);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream);
}
.principe__num { font-family: var(--font-display); font-size: var(--fs-cijfer); color: var(--brass); flex: none; }
.principe > summary::after {
  content: "+"; margin-left: auto; color: var(--brass); font-size: 1.1rem; line-height: 1;
}
.principe[open] > summary::after { content: "\2013"; }
.principe > p { margin: 0.8rem 0 0 2.6rem; color: rgba(239,233,223,.7); font-size: var(--fs-body); }
@media (max-width: 780px) { .principes { grid-template-columns: 1fr; gap: 0; } }

/* ---------- Fasen als tijdlijn van boven naar onder ---------- */
.tijdlijn { list-style: none; margin: 2rem 0 0; padding: 0; position: relative; }
.tijdlijn::before {
  content: ""; position: absolute; left: 19px; top: 10px; bottom: 10px;
  width: 1px; background: var(--rule);
}
.section--ink .tijdlijn::before { background: rgba(239,233,223,.18); }
.tijdlijn__stap { position: relative; display: flex; gap: 1.4rem; padding-bottom: 1.4rem; }
.tijdlijn__num {
  flex: none; width: 39px; height: 39px; display: grid; place-items: center;
  border: 1px solid var(--brass); border-radius: 50%; background: var(--cream);
  font-family: var(--font-display); font-size: var(--fs-klein); color: var(--brass); position: relative; z-index: 1;
}
.section--ink .tijdlijn__num { background: var(--green); }
.tijdlijn__inhoud { flex: 1 1 auto; padding-top: 0.5rem; }
.tijdlijn__inhoud > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 0.8rem;
}
.tijdlijn__inhoud > summary::-webkit-details-marker { display: none; }
.tijdlijn__inhoud > summary h3 {
  margin: 0; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-klein);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.section--ink .tijdlijn__inhoud > summary h3 { color: var(--cream); }
.tijdlijn__inhoud > summary::after {
  content: "+"; margin-left: auto; color: var(--brass); font-size: 1.1rem; line-height: 1;
}
.tijdlijn__inhoud[open] > summary::after { content: "\2013"; }
.tijdlijn__inhoud > p { margin: 0.7rem 0 0; max-width: 62ch; }


/* Vier kaarten in een driekoloms raster laten er één alleen op de tweede rij
   achter. Twee bij twee oogt rustiger en geeft de kaarten meer breedte. */
.grid--3:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 780px) {
  .grid--3:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; }
}

/* =======================================================================
   Merkdetails: de cloot als opsommingsteken en de ketting als scheiding
   ===================================================================== */

/* De cloot als bullet. Massief in inktkleur; de accentkleur blijft
   voorbehouden aan links en de primaire knop. */
ul.cloten {
  list-style: none;
  padding-left: 0;
  margin: 1.2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
ul.cloten > li {
  position: relative;
  padding-left: 1.35em;   /* hangende inspring: regel twee lijnt op de tekst */
  line-height: 1.5;
}
ul.cloten > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;            /* optisch op de eerste regel, niet op de blokrand */
  width: 0.6em;
  height: 0.6em;
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  background: var(--ink);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
/* Open cloot: alleen voor stappen en nog-te-doen-lijsten, nooit gemengd. */
ul.cloten--open > li::before {
  background: transparent;
  border: 1.5px solid var(--ink);
  box-sizing: border-box;
}
/* Op een groen vlak staat de cloot in messing: op crème blijft hij inkt, zodat
   het accent daar voorbehouden blijft aan links en knoppen. */
.section--ink ul.cloten > li::before,
.ctaband ul.cloten > li::before { background: var(--brass); }
.section--ink ul.cloten--open > li::before,
.ctaband ul.cloten--open > li::before { background: transparent; border-color: var(--brass); }

/* De ketting als scheidingslijn: één achtergrond, geen extra elementen.
   Loopt door tot de containerrand en wordt daar afgekapt, zodat het leest
   als een doorlopende ketting in plaats van een afgeteld aantal bollen. */
/* Een sectie die met de ketting afsluit heeft er zelf geen onderruimte meer
   bij nodig: de marge van de ketting plus de bovenruimte van de volgende
   sectie is al genoeg. Anders staat er een gat van ruim 240px. */
.section--sluit-af { padding-bottom: 0; }
.section--sluit-af .crans-divider { margin-bottom: 0; }

.crans-divider {
  border: none;
  height: 7px;
  margin: 3.5rem 0;
  overflow: hidden;
  background-image: radial-gradient(circle 3.5px at 3.5px 3.5px, var(--rule) 100%, transparent 0);
  background-size: 16px 7px;   /* 7px cloot + 9px tussenruimte */
  background-repeat: repeat-x;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.section--ink .crans-divider { background-image: radial-gradient(circle 3.5px at 3.5px 3.5px, rgba(239,233,223,.28) 100%, transparent 0); }

/* Binnen een opengeklapt onderdeel iets meer lucht boven de lijst. */
details.onderdeel ul.cloten { margin-top: 0.7rem; }

/* Footerkoppen krijgen dezelfde drie cloten, maar in de lijnkleur. */
.site-footer .footer__kop { display: flex; align-items: center; gap: 14px; }
.site-footer .footer__kop::before {
  content: "";
  flex: none; width: 34px; height: 6px;
  background-image: radial-gradient(circle 3px at 3px 3px, var(--brass) 100%, transparent 0);
  background-size: 14px 6px;
  background-repeat: repeat-x;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* =======================================================================
   Het traject van een dienst: alle fases open, op één doorlopende lijn
   ===================================================================== */
.traject { list-style: none; margin: 2.8rem 0 0; padding: 0; }
.traject__fase {
  display: grid; grid-template-columns: 60px 1fr; gap: 0 2.2rem;
  position: relative; padding-bottom: 3.4rem;
}
/* display:grid wint van de standaardregel voor [hidden]; zonder deze regel
   blijven verborgen fases in railmodus ruimte innemen. */
.traject__fase[hidden] { display: none; }
.traject__fase:last-child { padding-bottom: 0; }
/* De lijn loopt van de ene fase naar de volgende, dus niet onder de laatste. */
.traject__fase::before {
  content: ""; position: absolute; left: 29px; top: 60px; bottom: 0;
  width: 1px; background: var(--rule);
}
.section--ink .traject__fase::before { background: rgba(239,233,223,.22); }
.traject__fase:last-child::before { display: none; }

/* Het fasenummer in een cloot, zodat de stappen als een ketting op de lijn
   liggen in plaats van als losse kopjes. */
.traject__merk {
  width: 60px; height: 60px; border-radius: 50%;
  border: 1px solid var(--brass); background: var(--cream);
  display: grid; place-items: center; position: relative; z-index: 1;
}
.section--ink .traject__merk { background: var(--green); }
.traject__nr {
  font-family: var(--font-display); font-size: var(--fs-cijfer); color: var(--brass);
  line-height: 1;
}

.traject__kop { margin: 0.6rem 0 0.5rem; font-size: var(--fs-h3); }
.traject__intro { color: var(--ink-mut); max-width: 58ch; margin-bottom: 1.2rem; }
.section--ink .traject__intro { color: rgba(239,233,223,.75); }
/* De werkzaamheden staan in kolommen, zodat een fase met veel regels niet
   uitgroeit tot een lange smalle lijst. Een kolombreedte in plaats van een
   vast aantal: zo vult een brede kolom zich met drie kolommen en een smalle
   met één, zonder extra breekpunten. */
.traject__werk.cloten {
  display: block; columns: 17rem; column-gap: 2.4rem; margin: 0;
}
.traject__werk.cloten > li { break-inside: avoid; margin-bottom: 0.5rem; }
.traject__blok + .traject__blok { margin-top: 1.6rem; }
.traject__blokkop {
  font-family: var(--font-body); font-weight: 400; font-size: var(--fs-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-sub);
  margin: 0 0 0.6rem;
}
.section--ink .traject__blokkop { color: rgba(239,233,223,.6); }
.traject__link { display: inline-block; margin-top: 0.9rem; font-size: var(--fs-micro); }

@media (max-width: 780px) {
  /* Op een smal scherm staat het nummer boven de tekst en vervalt de lijn:
     de fases staan dan al onder elkaar. */
  .traject__fase { grid-template-columns: 1fr; gap: 0; padding-bottom: 2.6rem; }
  .traject__fase::before { display: none; }
  .traject__merk { width: 46px; height: 46px; }
  .traject__kop { margin-top: 0.9rem; }
  .traject__werk.cloten { columns: 1; }
}

/* ----------------------------------------------------------------------
   Twee weergaven boven op de open lijst hierboven. Vanaf 1024px een rail met
   de fasetitels links en de gekozen fase rechts; daaronder een harmonica
   waarin elke fase apart open- en dichtklapt. Beide worden door JS opgezet;
   zonder JS blijft de open weergave staan.
   -------------------------------------------------------------------- */
.traject__rail[hidden] { display: none; }

/* ---- Railmodus (vanaf 1024px) ---- */
.traject__wrap--rail {
  display: grid; grid-template-columns: 320px 1fr;
  border: 1px solid var(--rule); margin-top: 2.4rem;
}
.section--ink .traject__wrap--rail { border-color: rgba(239,233,223,.2); }
.traject__rail { display: flex; flex-direction: column; border-right: 1px solid var(--rule); }
.section--ink .traject__rail { border-right-color: rgba(239,233,223,.2); }
.traject--rail { margin: 0; min-height: 380px; }
.traject--rail .traject__fase {
  grid-template-columns: 1fr; padding: 2rem 2.2rem; gap: 0;
}
.traject--rail .traject__fase::before,
.traject--rail .traject__merk { display: none; }
.traject--rail .traject__kop { margin-top: 0; }

/* ---- De knop: in de rail een regel, in de harmonica de fasekop ---- */
.traject__knop {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0.9rem;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--font-body); color: var(--ink-mut);
}
.traject__rail .traject__knop {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--rule); border-left: 3px solid transparent;
}
.section--ink .traject__rail .traject__knop {
  border-bottom-color: rgba(239,233,223,.2); color: rgba(239,233,223,.72);
}
.traject__rail > .traject__knop:last-child { border-bottom: 0; }
.traject__knop:hover { color: var(--ink); }
.section--ink .traject__knop:hover { color: var(--cream); }
.traject__rail .traject__knop.is-actief {
  border-left-color: var(--brass); background: var(--room-200); color: var(--ink);
}
.section--ink .traject__rail .traject__knop.is-actief {
  background: rgba(239,233,223,.07); color: var(--cream);
}
.traject__knop:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.traject__knop-nr {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: var(--fs-label); color: var(--brass);
}
.traject__knop-titel { font-size: var(--fs-klein); letter-spacing: 0.02em; }

/* ---- Harmonica (tot 1024px) ---- */
.traject--harmonica { margin-top: 2rem; }
.traject--harmonica .traject__fase {
  grid-template-columns: 1fr; gap: 0; padding: 0;
  border-top: 1px solid var(--rule);
}
.section--ink .traject--harmonica .traject__fase { border-top-color: rgba(239,233,223,.2); }
.traject--harmonica .traject__fase:last-child { border-bottom: 1px solid var(--rule); }
.section--ink .traject--harmonica .traject__fase:last-child { border-bottom-color: rgba(239,233,223,.2); }
.traject--harmonica .traject__fase::before,
.traject--harmonica .traject__merk { display: none; }
.traject--harmonica .traject__kop { margin: 0; }
/* De hele regel is de knop, met het teken rechts. */
.traject--harmonica .traject__knop {
  width: 100%; grid-template-columns: auto 1fr auto; gap: 0.9rem;
  align-items: center; padding: 1.1rem 0; min-height: 56px;
}
.traject--harmonica .traject__knop-titel {
  font-family: var(--font-display); font-size: var(--fs-h4); color: var(--ink);
}
.section--ink .traject--harmonica .traject__knop-titel { color: var(--cream); }
.traject--harmonica .traject__knop::after {
  content: "+"; color: var(--brass); font-family: var(--font-body);
  font-size: 1.2rem; line-height: 1;
}
.traject--harmonica .traject__knop.is-open::after { content: "\2013"; }
.traject--harmonica .traject__inhoud { padding-bottom: 1.6rem; }
.traject--harmonica .traject__intro { margin-bottom: 1rem; }