/* ==========================================================================
   Maatkasten Knokke — stylesheet
   --------------------------------------------------------------------------
   Gebouwd op het design system uit de handoff van de klant
   ("Maatkasten Knokke Design System", actief thema "clay"): warm papier,
   klei/brons als enige actiekleur, hairlines in plaats van dozen, display-
   type in Schibsted Grotesk en korte cursieve kwalificaties in Newsreader.

   Twee bewuste afwijkingen van de handoff:
   1. De fonts worden zelf gehost (public/assets/fonts) in plaats van via
      Google Fonts geladen. Anders vertrekt het IP-adres van elke bezoeker
      naar Google en klopt onze cookie- en privacytekst niet meer.
   2. Sfeerbeelden in plaats van eigen projectfoto's (zie FOTOS.md). De
      dienstenkaarten hebben een 4/3-beeld bovenaan, zoals de handoff het
      beschrijft; op een gsm liggen ze, met het beeld links.

   Huisstijl aanpassen? Doe dat in :root. De accent- en achtergrondkleur
   staan ook in site.config.json (huisstijl) en in het SITE-blok van
   api/contact.js; npm test controleert dat ze gelijk zijn.
   ========================================================================== */

/* --- Schibsted Grotesk en Newsreader, zelf gehost -------------------------- */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/schibsted-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/schibsted-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   1. Tokens (thema "clay" uit de handoff)
   ========================================================================== */
:root {
  --paper: #faf7f2;
  --surface: #ffffff;
  --pine: #7a4a2b;
  --pine-deep: #5d3720;
  --pine-tint: #f2e8de;
  --oak: #9a6a1f;
  --sand: #f0e2cc;
  --surface-dark: #332a22;
  --ink: #241d16;
  --ink-soft: #544a3f;
  --ink-muted: #867a6c;
  --greige-100: #f1ece4;
  --greige-200: #e6ded2;
  --greige-300: #cfc4b4;
  --border-hairline: rgba(36, 29, 22, .1);
  --border-strong: rgba(36, 29, 22, .32);
  --focus-ring: rgba(122, 74, 43, .4);
  --error: #8c3226;
  --text-inverse: #faf7f2;

  --font-sans: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-serif-accent: 'Newsreader', Georgia, serif;

  --text-hero: clamp(40px, 4.6vw, 64px);
  --text-display: clamp(32px, 4vw, 48px);
  --text-title: 26px;
  --text-subtitle: 19px;
  --text-base: 15px;
  --text-small: 13px;
  --text-label: 11px;
  --weight-display: 400;
  --tracking-display: -0.015em;
  --tracking-label: 0.14em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --container-max: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(56px, 7vw, 88px);

  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 6px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(25, 24, 19, .05), 0 12px 32px -12px rgba(25, 24, 19, .14);
  --shadow-float: 0 24px 60px -20px rgba(25, 24, 19, .28);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 150ms;
  --dur-med: 320ms;
  --protect-gradient: linear-gradient(to top, rgba(51, 42, 34, .72), rgba(51, 42, 34, .15) 60%);

  /* Aliassen voor de oudere klassenamen en de inline styles in de pagina's. */
  --color-bg: #faf7f2;
  --color-surface: var(--greige-100);
  --color-papier: var(--surface);
  --color-text: var(--ink);
  --color-accent: #7a4a2b;
  --color-accent-2: var(--oak);
  --color-accent-600: var(--pine-deep);
  --color-accent-700: var(--pine);
  --color-accent-800: var(--pine-deep);
  --color-accent-900: var(--ink);
  --color-fout: var(--error);
  --color-divider: var(--border-hairline);
  --color-neutral-300: var(--greige-200);
  --color-neutral-400: var(--greige-300);
  --color-neutral-600: var(--ink-muted);
  --color-neutral-700: var(--ink-muted);
  --color-neutral-800: var(--ink-soft);
  --color-neutral-900: var(--ink);
  --rule: 1px solid var(--border-hairline);
  --maxw: var(--container-max);
}

/* ==========================================================================
   2. Basis
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-wrap: break-word;
  /* Nodig voor de full-bleed secties hieronder: die zijn 100vw breed en
     zouden anders een horizontale scrollbalk veroorzaken. clip houdt de
     pagina scrollbaar, in tegenstelling tot hidden. */
  overflow-x: clip;
}

/* Secties van rand tot rand. Ze staan in de HTML buiten .wrap en hebben hun
   eigen .wrap binnenin; zo is er geen 100vw nodig, die de scrollbalk meetelt
   en de pagina een paar pixels te breed maakt. */
.sectie-donker { background: var(--surface-dark); color: var(--text-inverse); }
.sectie-donker h2, .sectie-donker h3 { color: var(--text-inverse); }

h1, h2, h3, h4 {
  margin: 0 0 var(--space-2);
  color: var(--ink);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.12;
  text-wrap: balance;
  overflow-wrap: normal;
}
h1 { font-size: var(--text-hero); line-height: 1.05; }
h2 { font-size: var(--text-display); line-height: 1.08; }
h3 { font-size: var(--text-subtitle); }
h4 { font-size: 17px; }

p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration: none; transition: opacity var(--dur-fast) var(--ease-out); }
a:hover { opacity: .6; }
/* In lopende tekst blijven links wél onderstreept: anders zijn ze niet te zien. */
.body-lg a, .lead a, .faq-body a, .prose a, .sectie-intro a, .tile p a, .staal p a, .factoren a {
  color: var(--pine);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
ul, ol { margin: 0 0 var(--space-3); padding-left: 1.25em; }
li + li { margin-top: var(--space-1); }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; }

.text-muted { color: var(--ink-muted); }
/* Houdt een naam of een korte zin bij elkaar op één regel. */
.nowrap { white-space: nowrap; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
::selection { background: var(--pine); color: var(--text-inverse); }

/* Scheidingslijn: hairline, geen motief. */
.hr {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--border-hairline);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--pine); color: var(--text-inverse);
  padding: 12px 20px;
  font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.skip-link:focus { left: 0; opacity: 1; }

/* ==========================================================================
   3. Componenten
   ========================================================================== */

/* — knoppen — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-1);
  padding: 12px 22px;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { opacity: 1; }
.btn svg { display: block; width: 14px; height: 14px; }
.btn:disabled { opacity: .45; cursor: default; }

.btn-primary { background: var(--pine); color: var(--text-inverse); }
.btn-primary:hover { background: var(--pine-deep); color: var(--text-inverse); }

.btn-secondary { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--ink); color: var(--paper); }

.btn-invert { background: transparent; color: var(--text-inverse); border-color: rgba(244, 243, 239, .5); }
.btn-invert:hover { background: var(--paper); color: var(--ink); }

.btn-lg { font-size: 12px; padding: 15px 28px; }
.btn[data-loading='true'] { opacity: .6; pointer-events: none; }

/* — labels en koppen — */
.eyebrow,
.offerte-label,
.hero-kicker,
.cta-label,
.staal-code,
.tile-num {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--pine);
  margin: 0 0 var(--space-3);
}
.eyebrow { display: block; }

.h-display {
  font-size: var(--text-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
  max-width: 20ch;
}
.h-section {
  font-size: var(--text-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 var(--space-4);
  max-width: 24ch;
}
.h-section--flush { margin-bottom: 0; }

/* Cursieve kwalificatie, het handtekeningdetail van het merk. */
em, .serif {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-weight: 400;
}
.h-display em, .h-section em, .hero-titel em { font-size: 1.04em; }

.lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: var(--space-5) 0 0;
}
.body-lg {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 62ch;
}
ul.body-lg li + li { margin-top: 10px; }
/* De inleiding onder een sectiekop. Breed genoeg om de kolom te vullen, maar
   niet de volle 1240 px: voorbij een regel of honderd tekens vindt het oog de
   volgende regel niet meer terug. Een gecentreerde inleiding blijft smaller
   (zie de inline max-width in sectie-werkwijze). */
.sectie-intro {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 78ch;
  margin: 0 0 var(--space-7);
}

/* — formulier — */
.field > label,
.veld-label {
  display: block;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.input {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  font: inherit;
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-2);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--ink-muted); }
.input:hover { border-color: var(--ink-muted); }
.input:focus-visible {
  border-color: var(--pine);
  box-shadow: 0 0 0 3px rgba(122, 74, 43, .15);
  outline: none;
}
.input[aria-invalid='true'] { border-color: var(--error); }
textarea.input { min-height: 116px; resize: vertical; line-height: 1.55; }

.radio {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--ink-soft);
}
.radio input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio .dot {
  width: 18px; height: 18px; flex: none;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  display: inline-block;
}
.radio:hover .dot { border-color: var(--pine); }
.radio input:checked + .dot {
  border-color: var(--pine);
  background: var(--pine);
  box-shadow: inset 0 0 0 4px var(--surface);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--pine); outline-offset: 2px; }

.check {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--ink-soft);
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.check .box {
  width: 18px; height: 18px; flex: none;
  margin-top: 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-1);
  background: var(--surface);
}
.check:hover .box { border-color: var(--pine); }
.check input:checked + .box {
  border-color: var(--pine);
  background: var(--pine)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%23faf7f2' stroke-width='1.8'/%3E%3C/svg%3E")
    center / 11px no-repeat;
}
.check input:focus-visible + .box { outline: 2px solid var(--pine); outline-offset: 2px; }
.check input[aria-invalid='true'] + .box { border-color: var(--error); }
.check a { color: var(--pine); text-decoration: underline; text-underline-offset: 3px; }

.field .error,
.error {
  display: block;
  font-size: 12px;
  color: var(--error);
  margin-top: 6px;
}
.error:empty { margin: 0; }
.field .hint {
  display: inline;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--ink-muted);
}

.form-status { font-size: var(--text-small); margin: 0; display: none; }
.form-status.is-error { display: block; color: var(--error); margin-top: var(--space-4); }
.form-status.is-success { display: block; color: var(--pine); margin-top: var(--space-4); }

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

/* Bijlagen. */
.upload-input {
  width: 100%;
  font: inherit;
  font-size: var(--text-small);
  color: var(--ink-muted);
  padding: 12px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-2);
  cursor: pointer;
}
.upload-input:hover { border-color: var(--pine); }
.upload-input:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.upload-input[aria-invalid='true'] { border-color: var(--error); border-style: solid; }
.upload-input::file-selector-button {
  font: inherit;
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-right: 14px;
  padding: 9px 14px;
  border: 0;
  border-radius: var(--radius-1);
  background: var(--pine);
  color: var(--text-inverse);
  cursor: pointer;
}
.upload-lijst {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--ink-muted);
}
.upload-lijst li {
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-hairline);
  overflow-wrap: anywhere;
}

/* ==========================================================================
   4. Lay-out
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--flush-top { padding-top: 0; }

/* Witte sectie met hairlines erboven en eronder, zoals "Werkwijze". */
.sectie-wit {
  background: var(--surface);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
.sectie-midden { text-align: center; }
.sectie-midden .h-section,
.sectie-midden .sectie-intro,
.sectie-midden .body-lg { margin-inline: auto; }
.sectie-midden .eyebrow { margin-bottom: var(--space-3); }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.split--narrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
}
.kop-link {
  font-size: var(--text-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-1);
  padding: 12px 22px;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.kop-link:hover { background: var(--ink); color: var(--paper); opacity: 1; }

/* ==========================================================================
   5. Header
   ========================================================================== */
.site-band { display: none; }

.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--space-5);
  height: 72px;
  padding-inline: max(var(--gutter), calc((100% - var(--container-max)) / 2 + var(--gutter)));
  background: rgba(250, 247, 242, .85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-hairline);
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 12px;
  margin-right: auto;
  color: var(--ink);
}
.nav-brand svg { width: 36px; height: 36px; flex: none; color: var(--pine); }

/* Het woordmerk: de naam in kapitalen met veel spatiëring, de plaats in de
   cursieve letter die ook in de koppen de accenten zet. Twee regels, strak op
   elkaar, zodat het blok even hoog is als het kastje ernaast. */
.merk-tekst { display: flex; flex-direction: column; gap: 2px; }
.merk-kop {
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-soft);
}
.merk-plaats {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 21px;
  line-height: .92;
  /* De nav zet al haar links in kapitalen; het merk hoort daar niet bij. */
  text-transform: none;
  letter-spacing: -.005em;
  color: var(--pine);
}
/* De grepen in messing: het enige gekleurde detail in het merk. */
.merk-greep { stroke: var(--oak); }
.nav-links { display: contents; }
.nav a {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
}
.nav a[aria-current='page'] { color: var(--pine); }
.nav .btn-primary { color: var(--text-inverse); letter-spacing: .1em; padding: 11px 18px; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-1);
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded='true'] .icon-close { display: block; }
.nav-toggle[aria-expanded='true'] .icon-open { display: none; }

@media (max-width: 900px) {
  .nav { flex-wrap: wrap; height: auto; padding-block: var(--space-4); }
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: var(--space-3);
    border-top: 1px solid var(--border-hairline);
  }
  .nav-links.is-open { display: flex; }
  .nav-links > a {
    padding: 15px 0;
    font-size: 12px;
    border-bottom: 1px solid var(--border-hairline);
  }
  .nav-links > a.btn {
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    border-bottom: 0;
    padding: 14px 18px;
  }
}

/* ==========================================================================
   6. Hero met het offerteformulier
   ========================================================================== */
.hero {
  position: relative;
  background: linear-gradient(120deg, #6f6154, #a4937f 55%, #7d6e5e);
  isolation: isolate;
  /* De foto zoomt bij het laden een zweempje uit; zonder dit steekt ze tijdens
     die beweging een paar pixels buiten de pagina en verschijnt er onderaan
     een horizontale schuifbalk. */
  overflow: hidden;
}
/* Het sfeerbeeld staat als <img> in de HTML (niet als CSS-achtergrond): zo kan
   de browser het als grootste element vroeg laden en de juiste maat kiezen. */
.hero-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  z-index: -2;
}
/* Twee lagen over het beeld: van onderen (protection gradient, uit de handoff)
   en van links, zodat de kop en de pluspunten altijd genoeg contrast hebben. */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(51, 42, 34, .62) 0%, rgba(51, 42, 34, .38) 42%, rgba(51, 42, 34, .06) 74%),
    var(--protect-gradient);
  z-index: -1;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(320px, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
  padding-block: clamp(56px, 7vw, 96px) clamp(52px, 6.5vw, 88px);
}
/* De tekstkolom begint op dezelfde hoogte als de tekst in het formulierpaneel.
   De extra ruimte bovenaan is de binnenmarge van dat paneel: zo staan het
   kicker-label en "Offerte op maat" op één lijn, niet alleen de twee randen. */
@media (min-width: 901px) {
  .hero-kolom { padding-top: clamp(26px, 3vw, 34px); }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.hero-grid > * { min-width: 0; }
.hero-kolom { color: var(--text-inverse); }

.hero-kicker {
  color: rgba(250, 247, 242, .85);
  letter-spacing: .16em;
  margin-bottom: var(--space-4);
}
.hero-titel {
  color: var(--text-inverse);
  font-size: var(--text-hero);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
  margin: 0 0 var(--space-5);
  max-width: 16ch;
}
.hero-titel span { display: inline; color: inherit; }
.hero-sub {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(250, 247, 242, .9);
  max-width: 46ch;
  margin: 0;
}
.hero-acties {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-4) var(--space-5);
  margin: clamp(26px, 3vw, 36px) 0 0;
}
.hero-acties .btn-secondary { color: var(--text-inverse); border-color: rgba(250, 247, 242, .5); }
.hero-acties .btn-secondary:hover { background: var(--paper); color: var(--ink); }

/* De drie pluspunten onder de herotekst: cijfer + sublabel. */
.hero-checks {
  list-style: none;
  display: flex; flex-wrap: wrap;
  gap: var(--space-6) clamp(24px, 3vw, 40px);
  margin: var(--space-7) 0 0;
  padding: 0;
}
/* Korte hero: dezelfde foto-met-overlay als de homepage, maar zonder het
   formulier ernaast. Voor overzichtspagina's, waar de titel het werk doet. */
.hero--kort .wrap { padding-block: clamp(60px, 8vw, 108px); }
.hero--kort .hero-titel { font-size: clamp(34px, 3.8vw, 52px); max-width: 18ch; }
.hero--kort .hero-sub { max-width: 58ch; margin-bottom: 0; }
/* Knoppen naast elkaar in een gewone sectie. Niet hero-acties gebruiken: die
   maakt knoppen licht voor een donkere foto, en op papierkleur zie je ze dan
   niet meer staan. */
.knoppen {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-5) 0 0;
}

/* Een link in de herotekst krijgt de zandkleur: het bruin van de rest van de
   site valt weg tegen een donkere foto. */
.hero-sub a {
  color: var(--sand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.hero-sub a:hover { color: var(--text-inverse); opacity: 1; }
/* Op een smal scherm loopt de tekst over de volle breedte van de foto, dus
   moet het donker ook rechts doorlopen. Op de homepage dekt het formulier die
   kant af en is dat niet nodig. */
@media (max-width: 700px) {
  .hero--kort::after {
    background:
      linear-gradient(90deg, rgba(51, 42, 34, .68) 0%, rgba(51, 42, 34, .54) 55%, rgba(51, 42, 34, .46) 100%),
      var(--protect-gradient);
  }
}

.hero-checks li { margin: 0; display: flex; align-items: flex-start; gap: 11px; }
.check-icoon {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 4px;
  fill: none;
  stroke: var(--sand);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-checks strong {
  display: block;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text-inverse);
}
.hero-checks span {
  display: block;
  font-size: var(--text-small);
  color: rgba(250, 247, 242, .8);
  margin-top: 2px;
}

/* Het formulierpaneel. */
.offerte-card {
  background: var(--surface);
  border-radius: var(--radius-1);
  box-shadow: var(--shadow-float);
  padding: clamp(26px, 3vw, 34px) clamp(22px, 3vw, 36px);
  display: flex; flex-direction: column;
  gap: 0;
  max-width: 640px;
  margin-inline: auto;
  min-width: 0;
}
.hero-grid .offerte-card { margin: 0; max-width: none; }
.offerte-card h2 {
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 var(--space-2);
  letter-spacing: -.01em;
}
.offerte-card .intro {
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0 0 var(--space-5);
}
.form-rows { display: flex; flex-direction: column; gap: var(--space-4); }

.veld-rij { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }
.veld-rij > * { grid-column: 1 / -1; }
@media (min-width: 380px) {
  .veld-rij > .veld-breed { grid-column: span 4; }
  .veld-rij > .veld-smal { grid-column: span 2; }
}
@media (min-width: 560px) {
  .veld-rij > .field { grid-column: span 3; }
  .veld-rij > .veld-breed { grid-column: span 4; }
  .veld-rij > .veld-smal { grid-column: span 2; }
  .veld-rij > .veld-vol { grid-column: 1 / -1; }
}

/* ==========================================================================
   7. Meerstapsformulier
   ========================================================================== */
.wiz-progress {
  display: none;
  height: 2px;
  background: var(--greige-200);
  margin-bottom: var(--space-5);
}
.wiz-progress > span {
  display: block; height: 100%; width: 0;
  background: var(--pine);
  transition: width var(--dur-med) var(--ease-out);
}
.js .wiz-progress { display: block; }

.wiz-step { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.wiz-step + .wiz-step { margin-top: var(--space-6); }
.js .wiz-step + .wiz-step { margin-top: 0; }
.wiz-step legend {
  padding: 0;
  font-size: var(--text-subtitle);
  color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: var(--space-1);
}
.wiz-hint {
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0 0 var(--space-4);
}
.wiz-nav {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-hairline);
}
.wiz-nav [data-next], .wiz-nav [data-submit] { margin-left: auto; }
.wiz-foot {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  margin: var(--space-3) 0 0;
  font-size: 12px;
  color: var(--ink-muted);
}
.wiz-foot svg { width: 12px; height: 12px; color: var(--pine); flex: none; }

.opt-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 380px) { .opt-grid { grid-template-columns: 1fr 1fr; } }
.opt {
  position: relative;
  display: inline-flex; align-items: center;
  min-width: 0;
  padding: 11px 13px;
  font-size: var(--text-small);
  line-height: 1.3;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.opt:hover { border-color: var(--border-strong); }
.opt:has(input:checked) { border-color: var(--pine); background: var(--pine-tint); color: var(--ink); }
.opt:has(input:focus-visible) { outline: 2px solid var(--pine); outline-offset: 2px; }

.radio-list { display: flex; flex-direction: column; gap: var(--space-3); }
.radio-list .radio { align-items: flex-start; }

/* ==========================================================================
   8. Secties en kaarten
   ========================================================================== */

/* De diensten: witte fotokaarten. Bovenaan een beeld in 4/3, daaronder het
   cursieve nummer, de naam en een regel uitleg. Het beeld van een kaart is
   hetzelfde als dat bovenaan de dienstpagina, zodat de klik klopt. */
.dienstenlijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-5);
  counter-reset: dienst;
}
.dienstenlijst li { margin: 0; counter-increment: dienst; }
.dienstenlijst a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border-radius: var(--radius-1);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.dienstenlijst a:hover { opacity: 1; box-shadow: var(--shadow-float); transform: translateY(-2px); }
.dienst-foto {
  overflow: hidden;
  background: var(--greige-100);
}
.dienst-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.dienstenlijst a:hover .dienst-foto img { transform: scale(1.035); }
.dienst-tekst { padding: 18px 24px 24px; }
.dienst-tekst::before {
  content: counter(dienst, decimal-leading-zero);
  display: block;
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-size: 24px;
  line-height: 1;
  color: var(--oak);
  margin-bottom: var(--space-3);
}
/* Op een gsm liggen de kaarten: foto links, tekst rechts. Staand onder elkaar
   werden twaalf kaarten ruim 5000 px scrollen voor men bij de rest komt. */
@media (max-width: 559px) {
  .dienstenlijst { gap: var(--space-3); }
  .dienstenlijst a { flex-direction: row; }
  .dienst-foto { position: relative; flex: 0 0 38%; min-height: 124px; }
  .dienst-foto img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .dienst-tekst { align-self: center; padding: 14px 16px; }
  .dienst-tekst::before { font-size: 20px; margin-bottom: 6px; }
  .dienstenlijst strong { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .dienst-foto img { transition: none; }
  .dienstenlijst a:hover .dienst-foto img { transform: none; }
}
.dienstenlijst strong {
  display: block;
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.01em;
}
.dienstenlijst span {
  display: block;
  font-size: var(--text-small);
  color: var(--ink-muted);
  margin-top: var(--space-1);
}

/* De bloglijst: dezelfde fotokaart als bij de diensten, maar met een datum in
   plaats van een nummer. Drie op de homepage, alle op /blog/. */
/* Vaste kolommen in plaats van auto-fit: met twee artikels zouden de kaarten
   anders de volle breedte innemen en veel groter ogen dan met drie. */
.bloglijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 660px) {
  .bloglijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .bloglijst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bloglijst li { margin: 0; }
.bloglijst a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border-radius: var(--radius-1);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.bloglijst a:hover { opacity: 1; box-shadow: var(--shadow-float); transform: translateY(-2px); }
.blog-foto { overflow: hidden; background: var(--greige-100); }
.blog-foto img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.bloglijst a:hover .blog-foto img { transform: scale(1.035); }
.blog-tekst { padding: 18px 24px 24px; }
.blog-datum {
  margin: 0 0 var(--space-2);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* Het label "concept" staat in de datumregel, niet als kop: display en maat
   moeten terug, want de regel voor de titel hieronder pakt elke strong. */
.bloglijst .blog-datum strong {
  display: inline;
  font-size: inherit;
  letter-spacing: inherit;
  color: var(--oak);
  font-weight: 500;
}
.bloglijst strong {
  display: block;
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.01em;
}
.bloglijst span {
  display: block;
  font-size: var(--text-small);
  color: var(--ink-muted);
  margin-top: var(--space-1);
  line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
  .blog-foto img { transition: none; }
  .bloglijst a:hover .blog-foto img { transform: none; }
}

/* Werkwijze: vier kolommen met hairline bovenaan en een cursief nummer. */
.tijdlijn {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-6);
  counter-reset: stap;
}
.tijdlijn li {
  margin: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-hairline);
  counter-increment: stap;
}
.tijdlijn li::before {
  content: counter(stap, decimal-leading-zero);
  display: block;
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-size: 30px;
  color: var(--oak);
  line-height: 1;
}
.tijdlijn h3 {
  font-size: 17px;
  color: var(--ink);
  margin: var(--space-2) 0 6px;
}
.tijdlijn p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* Sfeerbeelden. Bewust geen bijschrift met plaats of jaartal: dit zijn geen
   eigen realisaties. Vervang ze door projectfoto's zodra die er zijn. */
.beeldband,
.beeld-portret {
  margin: 0;
  border-radius: var(--radius-1);
  overflow: hidden;
  background: var(--greige-100);
}
.beeldband img,
.beeld-portret img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform var(--dur-med) var(--ease-out);
}
.beeldband img { aspect-ratio: 21 / 9; }
/* Voor foto's die staander zijn aangeleverd: een 21/9-uitsnede haalt daar te
   veel uit weg, dus houden ze meer hoogte. */
.beeldband--hoog img { aspect-ratio: 16 / 9; }
.beeld-portret img { aspect-ratio: 3 / 4; }

/* Materiaalstalen. */
/* Materialen. Geen nagemaakte staaltjes in CSS: die ogen nep naast een echte
   foto. Alleen typografie, met hetzelfde cursieve nummer als bij de diensten. */
.stalen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-5);
  counter-reset: staal;
}
.staal {
  background: var(--surface);
  border-radius: var(--radius-1);
  box-shadow: var(--shadow-card);
  padding: 24px 26px 26px;
  counter-increment: staal;
}
.staal::before {
  content: counter(staal, decimal-leading-zero);
  display: block;
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-size: 26px;
  line-height: 1;
  color: var(--oak);
  margin-bottom: var(--space-3);
}
.staal h3 { font-size: 18px; font-weight: 400; color: var(--ink); margin: 0 0 6px; }
.staal p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* Genummerde punten (prijsfactoren, wonen aan zee). */
.factoren {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: factor;
  border-top: 1px solid var(--border-hairline);
}
.factoren--2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  column-gap: clamp(24px, 4vw, 56px);
}
.factoren li {
  position: relative;
  margin: 0;
  padding: 20px 0 20px 46px;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  counter-increment: factor;
}
.factoren li::before {
  content: counter(factor, decimal-leading-zero);
  position: absolute; left: 0; top: 20px;
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-size: 19px;
  color: var(--oak);
}
.factoren strong { font-weight: 500; color: var(--ink); }

/* Kader met een opmerking. */
.kader {
  background: var(--pine-tint);
  border-radius: var(--radius-1);
  padding: clamp(24px, 3vw, 32px);
}
.kader > strong:first-child {
  display: block;
  font-size: var(--text-subtitle);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.kader p { margin: 0 0 var(--space-3); font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
.kader p:last-child { margin-bottom: 0; }
.kader-bron { font-size: 12px !important; color: var(--ink-muted) !important; }

/* Tegels (waarom via ons, wat wij doen). */
.grid-bordered {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-5);
}
/* De gemeenten zijn tags, geen raster: een kolommenraster laat bij tien namen
   een halve rij leeg staan en zet de eerste chip anders dan de rest. */
/* De gemeenten: een raster met even brede vakjes, zodat tien namen op twee
   rechte rijen staan in plaats van te wikkelen tot een halve rij. */
.grid-bordered--chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border: 0;
}
@media (min-width: 760px) {
  .grid-bordered--chips { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.sectie-midden .grid-bordered--chips { justify-content: center; }
.grid-bordered--stack { grid-template-columns: 1fr; align-self: start; }
.tile {
  background: var(--surface);
  border-radius: var(--radius-1);
  box-shadow: var(--shadow-card);
  padding: 26px 28px 28px;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.tile-num { margin: 0 0 var(--space-1); color: var(--oak); font-family: var(--font-serif-accent); font-style: italic; font-size: 22px; letter-spacing: 0; text-transform: none; }
.tile h3 { font-size: 18px; font-weight: 400; color: var(--ink); margin: 0; }
.tile p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.tile dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font-size: 14px; }
.tile dt {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 2px;
}
.tile dd { margin: 0; color: var(--ink-soft); }

/* Gemeenten als tags. Pill-vorm: in het design system is dat de enige plaats
   waar een ronde hoek mag. */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
}
.chip-link {
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.chip-link::after {
  content: '\2192';
  color: var(--oak);
  transition: transform var(--dur-fast) var(--ease-out);
}
.chip-link:hover,
.chip-link:focus-visible { color: var(--pine); border-color: var(--pine); opacity: 1; }
.chip-link:hover::after { transform: translateX(3px); }

/* FAQ: hairlines, geen dozen. */
.faq {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border-hairline);
  max-width: 760px;
}
.faq details { border-bottom: 1px solid var(--border-hairline); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: 22px 0;
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--font-serif-accent);
  font-size: 20px;
  color: var(--oak);
  flex: none;
}
.faq details[open] summary::after { content: '\2013'; }
.faq summary:hover { color: var(--pine); }
.faq .faq-body {
  margin: 0;
  padding: 0 40px 22px 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 66ch;
}

/* Donkere secties: CTA en footer. */
.cta-band {
  background: var(--surface-dark);
  color: var(--text-inverse);
  padding-block: clamp(64px, 8vw, 96px);
  text-align: center;
}
.cta-band .wrap { display: block; }
.cta-band-tekst { max-width: 640px; margin-inline: auto; }
.cta-label { color: rgba(250, 247, 242, .7); }
.cta-band h2 {
  font-size: var(--text-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-inverse);
  margin: 0;
  max-width: 20ch;
  margin-inline: auto;
}
.cta-band p:not(.cta-label) {
  margin: var(--space-4) auto 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(250, 247, 242, .8);
  max-width: 52ch;
}
.cta-band .btn { margin-top: var(--space-6); }

/* ==========================================================================
   9. Footer
   ========================================================================== */
.site-footer {
  background: var(--surface-dark);
  color: var(--text-inverse);
  border-top: 1px solid rgba(244, 243, 239, .15);
}
.site-footer::before { content: none; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: var(--space-7);
  padding-block: clamp(48px, 6vw, 64px) var(--space-7);
  font-size: 14px;
  line-height: 1.8;
  color: rgba(250, 247, 242, .75);
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
}
.footer-merk { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-4); }
.footer-merk svg { width: 36px; height: 36px; color: rgba(250, 247, 242, .8); }
.footer-merk .merk-kop { color: rgba(250, 247, 242, .6); }
.footer-merk .merk-plaats { color: var(--sand); }
/* Op het donker is messing te dof; daar krijgt de greep de zandtint. */
.footer-merk .merk-greep { stroke: var(--sand); }
.footer-grid strong {
  display: block;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(250, 247, 242, .6);
  margin-bottom: var(--space-4);
}
.footer-grid p { margin: 0 0 var(--space-3); font-size: 13px; line-height: 1.7; }
.footer-lijst { list-style: none; margin: 0; padding: 0; }
.footer-lijst li { margin: 0 0 6px; }
.site-footer a { color: var(--text-inverse); }
.site-footer a:hover { opacity: .6; }
.footer-onder {
  border-top: 1px solid rgba(244, 243, 239, .15);
  padding-block: var(--space-4) var(--space-5);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  justify-content: space-between;
  font-size: 12px;
  color: rgba(250, 247, 242, .5);
}
.footer-onder a { color: rgba(250, 247, 242, .75); }

/* ==========================================================================
   10. Juridische pagina's, tabellen, resterende hulpklassen
   ========================================================================== */
.prose { max-width: 46rem; }
.prose h2 { font-size: var(--text-title); margin-top: 2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--text-subtitle); margin-top: 1.6em; }
.prose p, .prose li { font-size: 14.5px; line-height: 1.75; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left;
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--border-strong);
}
.table td {
  padding: 14px var(--space-2);
  border-bottom: 1px solid var(--border-hairline);
  vertical-align: top;
  color: var(--ink-soft);
}
.tabel-scroll { overflow-x: auto; margin: var(--space-4) 0; }

.numbered {
  display: flex; flex-direction: column;
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-hairline);
  max-width: 560px;
  counter-reset: nummer;
}
.numbered li {
  display: flex; gap: var(--space-4); align-items: baseline;
  padding: 16px 0;
  margin: 0;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 14.5px;
}
.numbered li::before {
  content: counter(nummer, decimal-leading-zero);
  counter-increment: nummer;
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-size: 18px;
  min-width: 30px;
  color: var(--oak);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-5); }

/* ==========================================================================
   11. Cookiebalk
   ========================================================================== */
.cookiebalk {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: var(--surface);
  border-top: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-float);
}
.cookiebalk-inner { display: grid; gap: var(--space-4); padding-block: var(--space-5); align-items: center; }
@media (min-width: 860px) {
  .cookiebalk-inner { grid-template-columns: 1fr auto; gap: var(--space-6); }
}
.cookiebalk strong {
  display: block;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--pine);
  margin-bottom: 6px;
}
.cookiebalk p { margin: 0; font-size: var(--text-small); line-height: 1.6; color: var(--ink-soft); max-width: 74ch; }
.cookiebalk-knoppen { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 520px) { .cookiebalk-knoppen .btn { flex: 1; } }
body:has(.cookiebalk:not([hidden])) { padding-bottom: 160px; }
@media (min-width: 860px) { body:has(.cookiebalk:not([hidden])) { padding-bottom: 110px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   11. In beeld komen
   --------------------------------------------------------------------------
   Eén beweging voor heel de site: inhoud schuift 14 px omhoog en verschijnt,
   traag en zonder terugveren. Elementen naast elkaar volgen elkaar met 70 ms,
   die vertraging zet site.js per element. Meer variatie zou drukker ogen, niet
   duurder.

   De lijst staat er twee keer: de eerste regel legt de beweging vast en blijft
   gelden, de tweede verbergt alleen wat nog niet aan de beurt is geweest
   (site.js hangt er 'is-in' aan). Zonder 'anim' op <html> geldt niets hiervan,
   dus zonder JavaScript of met beweging afgezet staat alles gewoon te lezen.
   De hero doet niet mee: die moet meteen staan, ook voor de meting van Google.
   ========================================================================== */
.anim .section > .eyebrow,
.anim .section > .h-section,
.anim .section > .section-head,
.anim .section > .sectie-intro,
.anim .section > .body-lg,
.anim .split > *,
.anim .dienstenlijst > li,
.anim .tijdlijn > li,
.anim .grid-bordered > *,
.anim .stalen > .staal,
.anim .beeldband,
.anim .beeld-portret,
.anim .faq {
  transition: opacity 640ms var(--ease-out), transform 760ms var(--ease-out);
}
.anim .section > .eyebrow:not(.is-in),
.anim .section > .h-section:not(.is-in),
.anim .section > .section-head:not(.is-in),
.anim .section > .sectie-intro:not(.is-in),
.anim .section > .body-lg:not(.is-in),
.anim .split > *:not(.is-in),
.anim .dienstenlijst > li:not(.is-in),
.anim .tijdlijn > li:not(.is-in),
.anim .grid-bordered > *:not(.is-in),
.anim .stalen > .staal:not(.is-in),
.anim .beeldband:not(.is-in),
.anim .beeld-portret:not(.is-in),
.anim .faq:not(.is-in) {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

/* De hero-foto komt tot rust in plaats van stil te staan: een zweem van een
   uitzoom. Een transform kost de browser geen hertekening van de tekst, dus
   het beïnvloedt de laadmeting niet. */
.anim .hero-foto { animation: hero-tot-rust 1800ms var(--ease-out) both; }
@keyframes hero-tot-rust {
  from { transform: scale(1.035); }
  to { transform: none; }
}

@media print {
  .nav, .cta-band, .cookiebalk { display: none !important; }
  body { background: #fff; color: #000; }
  /* Op papier bestaat er geen 'in beeld komen'. */
  *, *::before, *::after {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}