/* Paalse Snoeiwerken — samengevoegd uit 01-tokens.css, 02-base.css, 03-layout.css, 04-components.css, 05-sections.css */
/* ==========================================================================
   DESIGN TOKENS — Paalse Snoeiwerken
   --------------------------------------------------------------------------
   Eén centrale plek voor kleur, typografie, ruimte, radius en schaduw.
   Alles op de site verwijst hiernaar. Wil je de site van karakter laten
   veranderen, dan gebeurt dat hier en nergens anders.

   Uitgangspunt van het palet: geen felgroene "tuinmanswebsite". In de plaats
   warm papier als grondtoon, diep inktgroen als donkere pool, en signaaloranje
   als accent. Dat oranje komt van echte veiligheidsuitrusting — de rode
   gehoorbescherming en oranje beenbescherming die bij dit werk hoort — en niet
   van een kleurenwiel.
   ========================================================================== */

:root {
  /* ---- Kleur: donkere pool ------------------------------------------- */
  --c-ink: #0e1712;          /* diepste inktgroen — donkere secties, koppen */
  --c-ink-2: #16241b;        /* iets opgelicht, voor gelaagdheid            */
  --c-bark: #1e3025;         /* kaarten binnen donkere secties             */
  --c-bark-2: #263c2e;       /* hover van bovenstaande                     */

  /* ---- Kleur: groen --------------------------------------------------- */
  --c-moss: #2c4f3a;         /* primair merkgroen                          */
  --c-moss-lift: #3a6349;    /* hover                                      */
  --c-sap: #7fb08a;          /* levendig groen, alleen op donkere grond    */

  /* ---- Kleur: lichte pool --------------------------------------------- */
  --c-paper: #f7f4ed;        /* hoofdachtergrond, warm papier              */
  --c-bone: #ede7d9;         /* tweede lichte tint, afwisselende secties   */
  --c-bone-deep: #ded5c2;    /* randen en lijnen op licht                  */

  /* ---- Kleur: accent ---------------------------------------------------
     Twee rollen, bewust gescheiden gehouden:

     --c-signal  is het VLAK van een knop. Altijd #b8431a, ook in donkere
                 secties, want daar staat witte tekst op en dat haalt 5.45:1.
                 Zou dit in donkere secties oplichten naar #dc5a2a, dan zakt
                 wit-op-oranje naar 3.8:1 en valt de knop door de mand.

     --c-accent  is het accent als TEKST of lijn. Die moet juist wél mee met
                 de achtergrond: #b8431a haalt 4.96:1 op papier, #dc5a2a
                 haalt 4.8:1 op inkt. Omgekeerd zou geen van beide halen.
     -------------------------------------------------------------------- */
  --c-signal: #b8431a;
  --c-signal-lift: #a03714;  /* hover van het knopvlak                     */
  --c-signal-dark: #dc5a2a;  /* accenttekst op donkere grond               */
  --c-signal-wash: #f6e3d9;  /* zeer licht vlak                            */

  /* Het tekstaccent is een tint dieper dan het knopvlak. Reden: #b8431a
     haalt op papier 4.96:1, maar op de bone-secties zakt het naar 4.42:1 en
     dan is de ondergrens van 4.5:1 net niet gehaald. #ad3c15 haalt 5.57:1
     op papier en 4.96:1 op bone. Het verschil is met het blote oog niet te
     zien; in de meting wel. */
  --c-accent: #ad3c15;

  /* ---- Kleur: functioneel --------------------------------------------- */
  --c-focus: #b8431a;
  --c-error: #96331a;
  --c-ok: #2c4f3a;

  /* ---- Tekstkleuren ---------------------------------------------------- */
  --t-strong: #0e1712;       /* koppen op licht                            */
  --t-body: #3b4a41;         /* lopende tekst op licht, 9.4:1              */
  --t-muted: #5b6a61;        /* bijschriften op licht, 5.6:1               */
  --t-invert: #f3efe5;       /* tekst op donker, 16:1                      */
  --t-invert-body: #d8dfd6;
  --t-invert-muted: #a8b7ac; /* bijschriften op donker, 8.7:1              */

  /* ---- Oppervlakken ---------------------------------------------------- */
  --surface: var(--c-paper);
  --surface-alt: var(--c-bone);
  --line: var(--c-bone-deep);
  --line-soft: color-mix(in oklab, var(--c-bone-deep) 55%, transparent);
  --line-invert: color-mix(in oklab, var(--c-sap) 26%, transparent);

  /* ---- Typografie ------------------------------------------------------ */
  --f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia,
    "Times New Roman", serif;
  --f-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Vloeiende typografische schaal. Ondergrens = 360px, bovengrens = 1440px. */
  --step--2: clamp(0.75rem, 0.735rem + 0.07vw, 0.79rem);
  --step--1: clamp(0.875rem, 0.845rem + 0.13vw, 0.95rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.1rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.31vw, 1.33rem);
  --step-2: clamp(1.35rem, 1.22rem + 0.58vw, 1.7rem);
  --step-3: clamp(1.6rem, 1.38rem + 0.98vw, 2.2rem);
  --step-4: clamp(1.95rem, 1.58rem + 1.62vw, 2.95rem);
  --step-5: clamp(2.3rem, 1.74rem + 2.48vw, 3.85rem);
  --step-6: clamp(2.7rem, 1.85rem + 3.78vw, 5.1rem);
  --step-7: clamp(3rem, 1.75rem + 5.55vw, 6.4rem);

  --lh-tight: 1.02;
  --lh-snug: 1.14;
  --lh-heading: 1.18;
  --lh-body: 1.62;
  --lh-loose: 1.72;

  --ls-tight: -0.022em;
  --ls-snug: -0.014em;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-caps: 0.14em;

  /* ---- Ruimte — 8px-basis, met vloeiende secties ----------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 3rem);
  --section-y: clamp(3.5rem, 2.2rem + 5.6vw, 7.5rem);
  --section-y-lg: clamp(4.5rem, 2.4rem + 8.4vw, 10rem);

  /* ---- Breedtes --------------------------------------------------------- */
  --w-full: 1560px;
  --w-wide: 1280px;
  --w-mid: 1040px;
  --w-text: 66ch;
  --w-narrow: 34rem;

  /* ---- Radius — bewust klein. Snoeiwerk gaat over rechte lijnen. ------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;

  /* ---- Schaduw — warm getint, nooit blauw of neutraal grijs ------------ */
  --sh-1: 0 1px 2px rgba(14, 23, 18, 0.05), 0 2px 6px rgba(14, 23, 18, 0.04);
  --sh-2: 0 2px 4px rgba(14, 23, 18, 0.05), 0 10px 28px rgba(14, 23, 18, 0.08);
  --sh-3: 0 6px 12px rgba(14, 23, 18, 0.07), 0 28px 64px rgba(14, 23, 18, 0.15);
  --sh-focus: 0 0 0 3px var(--c-paper), 0 0 0 6px var(--c-signal);
  --sh-focus-dark: 0 0 0 3px var(--c-ink), 0 0 0 6px var(--c-signal-dark);

  /* ---- Beweging --------------------------------------------------------- */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 140ms;
  --d-base: 260ms;
  --d-slow: 620ms;

  /* ---- Lagen ------------------------------------------------------------ */
  --z-base: 1;
  --z-sticky: 60;
  --z-header: 80;
  --z-drawer: 90;
  --z-skip: 120;

  /* ---- Papiertextuur ---------------------------------------------------- */
  /* Fijne ruis over lichte vlakken. Geen bestand, geen extra request. */
  --texture-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* Donkere secties zetten de tekstrollen om, zodat componenten binnenin
   niets hoeven te weten over de context waarin ze staan. */
.on-dark {
  --surface: var(--c-ink);
  --surface-alt: var(--c-bark);
  --line: var(--line-invert);
  --line-soft: color-mix(in oklab, var(--c-sap) 14%, transparent);
  --t-strong: var(--t-invert);
  --t-body: var(--t-invert-body);
  --t-muted: var(--t-invert-muted);
  /* Alleen het tekstaccent licht op. Het knopvlak blijft ongewijzigd,
     zodat wit-op-oranje overal AA haalt. */
  --c-accent: var(--c-signal-dark);
  --sh-focus: var(--sh-focus-dark);
}


/* ==========================================================================
   BASE — reset, lettertypes, semantische elementen, focus
   ========================================================================== */

/* ---- Lettertypes ------------------------------------------------------
   Zelf gehost. Geen Google Fonts CDN, dus geen IP-adressen van bezoekers
   die naar een server buiten de EU gaan. Dat scheelt een AVG-discussie en
   het is bovendien sneller: geen extra DNS-lookup en geen derde verbinding.
   Beide zijn variabele fonts: één bestand dekt alle gewichten.
   -------------------------------------------------------------------- */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-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: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-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: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-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: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-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;
}

/* ---- Reset ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h, 72px) + var(--s-5));
  -moz-tab-size: 2;
  tab-size: 2;
}

body {
  min-height: 100svh;
  background: var(--c-paper);
  color: var(--t-body);
  font-family: var(--f-text);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  overflow-x: clip;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* <picture> is van zichzelf een inline element. Zonder deze regel valt
   height:100% op de <img> erbinnen terug op auto, want een inline ouder
   heeft geen hoogte om tegen te rekenen. Gevolg: beelden die hun kader
   niet vullen. Dat is precies wat er misging in de hero. */
picture {
  width: 100%;
  height: 100%;
}
picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img {
  height: auto;
  border-style: none;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
dd,
dt,
figcaption {
  overflow-wrap: break-word;
  hyphens: none;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

/* ---- Typografie -------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--f-display);
  color: var(--t-strong);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-snug);
  text-wrap: balance;
}

h1 {
  font-size: var(--step-6);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-variation-settings: "opsz" 120;
}

h2 {
  font-size: var(--step-4);
  font-weight: 500;
  line-height: var(--lh-snug);
  font-variation-settings: "opsz" 72;
}

h3 {
  font-size: var(--step-2);
  font-weight: 600;
  font-variation-settings: "opsz" 30;
}

h4 {
  font-size: var(--step-1);
  font-weight: 600;
  font-variation-settings: "opsz" 20;
}

p {
  text-wrap: pretty;
}

strong,
b {
  font-weight: 650;
  color: var(--t-strong);
}

em {
  font-style: italic;
}

small {
  font-size: var(--step--1);
}

a {
  color: inherit;
  text-decoration-color: color-mix(in oklab, currentColor 38%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
  transition: color var(--d-fast) var(--e-out),
    text-decoration-color var(--d-fast) var(--e-out);
}

a:hover {
  color: var(--c-signal);
  text-decoration-color: currentColor;
}

::selection {
  background: var(--c-signal);
  color: #fff;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: var(--s-7);
}

blockquote {
  margin: 0;
}

address {
  font-style: normal;
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* Cijfers in tabellen en feitenblokken netjes uitgelijnd houden. */
.tnum,
table,
dl,
time {
  font-variant-numeric: tabular-nums;
}

/* ---- Focus -------------------------------------------------------------
   Zichtbaar, dik genoeg, en met een contrasterende buitenrand zodat het
   op elke achtergrond leesbaar blijft. Nooit uitzetten.
   -------------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--c-signal);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ---- Skiplink ---------------------------------------------------------- */

.skiplink {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: var(--z-skip);
  padding: var(--s-3) var(--s-5);
  background: var(--c-ink);
  color: var(--t-invert);
  font-weight: 600;
  font-size: var(--step--1);
  border-radius: var(--r-2);
  box-shadow: var(--sh-3);
  transform: translateY(calc(-100% - var(--s-6)));
  transition: transform var(--d-base) var(--e-out);
}

.skiplink:focus {
  transform: translateY(0);
  color: var(--t-invert);
}

/* ---- Toegankelijkheidshulpjes ------------------------------------------ */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Beweging ----------------------------------------------------------
   Wie in zijn systeem heeft aangegeven minder beweging te willen, krijgt
   een site zonder animatie. Alles blijft volledig bruikbaar.
   -------------------------------------------------------------------- */

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

/* ---- Print -------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .mobile-bar,
  .to-top,
  .cta-band {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
  }
}


/* ==========================================================================
   LAYOUT — containers, secties, rasters en de vaste compositiemiddelen
   --------------------------------------------------------------------------
   Het leidende principe is haaggeometrie: strakke horizontale linies,
   asymmetrische kolommen en beelden die tot aan de schermrand doorlopen.
   Geen eindeloze rij van drie gelijke kolommen.
   ========================================================================== */

/* ---- Containers -------------------------------------------------------- */

.wrap {
  width: min(100% - var(--gutter) * 2, var(--w-wide));
  margin-inline: auto;
}
.wrap--full {
  max-width: var(--w-full);
}
.wrap--mid {
  width: min(100% - var(--gutter) * 2, var(--w-mid));
  margin-inline: auto;
}
.wrap--text {
  width: min(100% - var(--gutter) * 2, var(--w-text));
  margin-inline: auto;
}
.wrap--flush {
  width: 100%;
  max-width: none;
  padding-inline: var(--gutter);
}

/* ---- Secties ------------------------------------------------------------ */

.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--surface);
  color: var(--t-body);
}
.section--lg {
  padding-block: var(--section-y-lg);
}
.section--tight {
  padding-block: calc(var(--section-y) * 0.62);
}
.section--flush-top {
  padding-block-start: 0;
}
.section--flush-bottom {
  padding-block-end: 0;
}

/* Toonvarianten. .on-dark keert de tekstrollen om (zie tokens). */
.section--paper {
  background: var(--c-paper);
}
.section--bone {
  background: var(--c-bone);
}
.section--ink {
  background: var(--c-ink);
}
.section--moss {
  background: var(--c-moss);
  --surface: var(--c-moss);
  --surface-alt: var(--c-moss-lift);
}

/* Zeer fijne papierruis over lichte vlakken. Je ziet het niet bewust,
   je merkt alleen dat het scherm minder plat aanvoelt. */
.section--paper::before,
.section--bone::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--texture-paper);
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.section > * {
  position: relative;
  z-index: 1;
}

/* ---- Sectiekop ----------------------------------------------------------
   Een klein genummerd label boven een grote kop. Het nummer in signaalkleur
   is het terugkerende ritme-element van de hele site.
   -------------------------------------------------------------------- */

.sec-head {
  display: grid;
  gap: var(--s-5);
  margin-block-end: clamp(var(--s-7), 5vw, var(--s-9));
}
.sec-head--split {
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .sec-head--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--s-8);
  }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--f-text);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--t-muted);
}
.eyebrow__num {
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
  max-width: 8rem;
}
.eyebrow--center::after,
.eyebrow--center::before {
  max-width: 4rem;
}
.eyebrow--center {
  justify-content: center;
}
.eyebrow--center::before {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.sec-head h2,
.sec-head .h2 {
  max-width: 22ch;
}
.sec-head__aside {
  max-width: 46ch;
  color: var(--t-muted);
  font-size: var(--step-1);
  line-height: var(--lh-loose);
}

/* ---- Verticale sectiemarkering in de kantlijn --------------------------
   Op brede schermen staat er een gedraaid labeltje in de linkermarge.
   Puur redactioneel detail, verdwijnt onder 90rem.
   -------------------------------------------------------------------- */

.rail {
  position: absolute;
  left: max(var(--s-4), calc((100vw - var(--w-wide)) / 2 - 3.25rem));
  top: var(--section-y);
  writing-mode: vertical-rl;
  font-size: var(--step--2);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--t-muted);
  opacity: 0.75;
  display: none;
  z-index: 2;
}
.rail::after {
  content: "";
  display: block;
  width: 1px;
  height: 4rem;
  margin: var(--s-4) auto 0;
  background: linear-gradient(to bottom, var(--line), transparent);
}
@media (min-width: 90rem) {
  .rail {
    display: block;
  }
}

/* ---- Flow: verticale ritme zonder marge-collaps-gedoe ------------------- */

.stack > * + * {
  margin-block-start: var(--flow, var(--s-5));
}
.stack--tight {
  --flow: var(--s-3);
}
.stack--loose {
  --flow: var(--s-6);
}
.stack--xl {
  --flow: var(--s-7);
}

/* ---- Prose: lopende tekst met correcte kopafstanden --------------------- */

.prose {
  max-width: var(--w-text);
  font-size: var(--step-1);
  line-height: var(--lh-loose);
  color: var(--t-body);
}
.prose > * + * {
  margin-block-start: 1.1em;
}
.prose h2 {
  margin-block-start: 2em;
  margin-block-end: 0.6em;
}
.prose h3 {
  margin-block-start: 1.8em;
  margin-block-end: 0.5em;
}
.prose > :first-child {
  margin-block-start: 0;
}
.prose ul,
.prose ol {
  padding-inline-start: 1.35em;
}
.prose li + li {
  margin-block-start: 0.5em;
}
.prose a {
  color: var(--c-accent);
  text-decoration: underline;
}

/* Openingsalinea, iets groter en luchtiger dan de rest. */
.lead {
  font-size: var(--step-2);
  line-height: 1.5;
  letter-spacing: var(--ls-snug);
  color: var(--t-strong);
  font-weight: 400;
  max-width: 34ch;
}
.lead--wide {
  max-width: 52ch;
}

/* ---- Asymmetrische splitsing ------------------------------------------- */

.split {
  display: grid;
  gap: var(--gap, clamp(var(--s-6), 4vw, var(--s-9)));
  align-items: center;
}
@media (min-width: 56rem) {
  .split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .split--reverse {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .split--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .split--top {
    align-items: start;
  }
  /* Volgorde omdraaien zonder de leesvolgorde in de HTML te breken. */
  .split--swap > :first-child {
    order: 2;
  }
}

/* ---- Beeld dat tot aan de schermrand doorloopt --------------------------
   Breekt uit de container zonder horizontale scrollbar, omdat body
   overflow-x: clip heeft.
   -------------------------------------------------------------------- */

@media (min-width: 56rem) {
  .bleed-end {
    margin-inline-end: calc((100vw - min(100vw - var(--gutter) * 2, var(--w-wide))) / -2 - var(--gutter));
    width: auto;
  }
  .bleed-start {
    margin-inline-start: calc((100vw - min(100vw - var(--gutter) * 2, var(--w-wide))) / -2 - var(--gutter));
    width: auto;
  }
}

/* ---- Rasters ------------------------------------------------------------ */

.grid {
  display: grid;
  gap: var(--s-5);
}
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.grid--gap-lg {
  gap: clamp(var(--s-5), 3vw, var(--s-7));
}

/* Twaalfkoloms redactioneel raster voor de vrijere composities. */
.ed-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-5) clamp(var(--s-4), 2.4vw, var(--s-6));
}
@media (min-width: 56rem) {
  .ed-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

/* ---- Beeldkader met vaste verhouding ------------------------------------ */

.img-frame {
  position: relative;
  overflow: hidden;
  background: var(--c-bone);
  border-radius: var(--r-2);
  aspect-ratio: var(--ratio, 3 / 2);
}
.img-frame img,
.img-frame picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-frame--portrait {
  --ratio: 4 / 5;
}
.img-frame--square {
  --ratio: 1;
}
.img-frame--wide {
  --ratio: 16 / 9;
}
.img-frame--tall {
  --ratio: 3 / 4;
}

/* ---- Haaglijn: de terugkerende scheiding -------------------------------
   Getekend als een rij smalle verticale streepjes van ongelijke hoogte,
   zoals de bovenrand van een net geschoren haag van dichtbij.
   -------------------------------------------------------------------- */

.hedge-rule {
  height: 10px;
  border: 0;
  margin: 0;
  background-image: repeating-linear-gradient(
    to right,
    var(--line) 0 1px,
    transparent 1px 7px
  );
  -webkit-mask-image: repeating-linear-gradient(
    to right,
    #000 0 1px,
    #000 1px 2px,
    transparent 2px 3px
  );
  opacity: 0.9;
}
.hedge-rule--top {
  height: 14px;
  background-image: repeating-linear-gradient(
    to right,
    var(--c-accent) 0 2px,
    transparent 2px 14px
  );
  opacity: 0.55;
}

/* ---- Diverse hulpjes ---------------------------------------------------- */

.center {
  text-align: center;
}
.measure {
  max-width: var(--w-text);
}
.measure--short {
  max-width: 46ch;
}
.muted {
  color: var(--t-muted);
}
.mt-0 {
  margin-block-start: 0;
}
.relative {
  position: relative;
}
.overflow-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}


/* ==========================================================================
   COMPONENTEN
   ========================================================================== */

/* ==========================================================================
   Knoppen
   Radius 2px. Een snoeibedrijf verkoopt rechte lijnen, geen afgeronde pillen.
   ========================================================================== */

.btn {
  --btn-bg: var(--c-signal);
  --btn-fg: #fff;
  --btn-bd: var(--c-signal);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  min-height: 3rem;
  padding: 0.85em 1.5em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-1);
  font-family: var(--f-text);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: background-color var(--d-base) var(--e-out),
    border-color var(--d-base) var(--e-out),
    color var(--d-base) var(--e-out),
    transform var(--d-fast) var(--e-out),
    box-shadow var(--d-base) var(--e-out);
}

/* Het vlak schuift van onderaf in bij hover. Subtiel, één beweging. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hover, var(--c-signal-lift));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--d-base) var(--e-out);
}
.btn:hover::before,
.btn:focus-visible::before {
  transform: scaleY(1);
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
}
.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn .btn__icon {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  transition: transform var(--d-base) var(--e-out);
}
.btn:hover .btn__icon--arrow {
  transform: translateX(3px);
}

/* Varianten */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--t-strong);
  --btn-bd: var(--line);
  --btn-hover: var(--t-strong);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  --btn-fg: var(--surface);
  --btn-bd: var(--t-strong);
  color: var(--surface);
}

.btn--solid-ink {
  --btn-bg: var(--c-ink);
  --btn-bd: var(--c-ink);
  --btn-hover: var(--c-moss);
}

/* Het groen van WhatsApp zelf (#25D366) haalt met witte tekst erop maar
   1.9:1. Ook een matig verdonkerde variant bleef met 4.30:1 onder de norm.
   Deze tint haalt 5.42:1 en blijft herkenbaar als "de WhatsApp-knop". */
.btn--wa {
  --btn-bg: #0e7a40;
  --btn-bd: #0e7a40;
  --btn-hover: #0a6234;
}

.btn--lg {
  min-height: 3.5rem;
  padding: 1em 1.9em;
  font-size: var(--step-1);
}
.btn--sm {
  min-height: 2.5rem;
  padding: 0.55em 1.05em;
  font-size: var(--step--1);
}
.btn--block {
  display: flex;
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
@media (max-width: 26rem) {
  .btn-row .btn {
    width: 100%;
  }
}

/* Tekstlink met pijl — voor secundaire acties binnen kaarten. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  color: var(--c-accent);
  text-decoration: none;
}
.link-arrow svg {
  width: 1em;
  height: 1em;
  transition: transform var(--d-base) var(--e-out);
}
.link-arrow:hover svg {
  transform: translateX(4px);
}
.link-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  --header-h: 4.5rem;
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in oklab, var(--c-paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  border-block-end: 1px solid transparent;
  transition: background-color var(--d-base) var(--e-out),
    border-color var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header {
    background: var(--c-paper);
  }
}
.site-header[data-scrolled="true"] {
  border-block-end-color: var(--line);
  box-shadow: 0 1px 20px rgba(14, 23, 18, 0.05);
}

/* Boven een donkere hero start de header transparant en in inverse kleuren. */
.site-header--over {
  position: fixed;
  inset-inline: 0;
  background: transparent;
  backdrop-filter: none;
  color: var(--t-invert);
}
.site-header--over .nav__link,
.site-header--over .header__phone,
.site-header--over .brand {
  color: var(--t-invert);
}
.site-header--over .btn--ghost {
  --btn-fg: var(--t-invert);
  --btn-bd: color-mix(in oklab, #fff 42%, transparent);
  --btn-hover: #fff;
}
.site-header--over .btn--ghost:hover {
  --btn-fg: var(--c-ink);
  color: var(--c-ink);
}
.site-header--over .burger__bar {
  background: var(--t-invert);
}
/* Het telefoonicoontje moet op een donkere foto de lichtere oranje tint
   krijgen, anders verdwijnt het in de achtergrond. */
.site-header--over:not([data-scrolled="true"]) .header__phone svg {
  color: var(--c-signal-dark);
}
.site-header--over[data-scrolled="true"] {
  position: sticky;
  background: color-mix(in oklab, var(--c-paper) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  color: var(--t-body);
}
.site-header--over[data-scrolled="true"] .nav__link,
.site-header--over[data-scrolled="true"] .header__phone,
.site-header--over[data-scrolled="true"] .brand {
  color: var(--t-strong);
}
.site-header--over[data-scrolled="true"] .btn--ghost {
  --btn-fg: var(--t-strong);
  --btn-bd: var(--line);
  --btn-hover: var(--t-strong);
}
.site-header--over[data-scrolled="true"] .burger__bar {
  background: var(--t-strong);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--header-h);
}

/* ---- Merk --------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--t-strong);
  margin-inline-end: auto;
}
.brand__mark {
  flex: none;
  width: 2.15rem;
  height: 2.15rem;
  color: var(--c-accent);
  transition: transform var(--d-slow) var(--e-out);
}
.brand:hover .brand__mark {
  transform: rotate(-6deg);
}
.brand__name {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.05;
  letter-spacing: var(--ls-snug);
  font-variation-settings: "opsz" 14;
}
.brand__sub {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--t-muted);
  margin-block-start: 0.2rem;
}
.site-header--over:not([data-scrolled="true"]) .brand__sub {
  color: var(--t-invert-muted);
}

/* ---- Navigatie ---------------------------------------------------------- */

.nav {
  display: none;
}
@media (min-width: 64rem) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(var(--s-4), 1.6vw, var(--s-6));
  }
}
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-4), 1.6vw, var(--s-6));
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  position: relative;
  display: block;
  padding-block: 0.6rem;
  font-size: var(--step--1);
  font-weight: 550;
  color: var(--t-strong);
  text-decoration: none;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15rem;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--d-base) var(--e-out);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after,
.nav__item--open > .nav__link::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav__link[aria-current="page"] {
  color: var(--c-accent);
}

.header__phone {
  display: none;
  align-items: center;
  gap: 0.45rem;
  font-weight: 650;
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--t-strong);
  font-variant-numeric: tabular-nums;
}
.header__phone svg {
  width: 1em;
  height: 1em;
  color: var(--c-accent);
}
@media (min-width: 78rem) {
  .header__phone {
    display: inline-flex;
  }
}
.header__cta {
  display: none;
}
@media (min-width: 64rem) {
  .header__cta {
    display: inline-flex;
  }
}

/* ---- Dropdown diensten -------------------------------------------------- */

.nav__item {
  position: relative;
}
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.nav__chev {
  width: 0.7em;
  height: 0.7em;
  transition: transform var(--d-base) var(--e-out);
}
.nav__item--open .nav__chev {
  transform: rotate(180deg);
}
.nav__panel {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: -1rem;
  min-width: 21rem;
  padding: var(--s-3);
  background: var(--c-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--sh-3);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out),
    visibility 0s linear var(--d-base);
}
.nav__item--open .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out), visibility 0s;
}
.nav__panel a {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-2);
  font-size: var(--step--1);
  font-weight: 550;
  color: var(--t-strong);
  text-decoration: none;
  transition: background-color var(--d-fast) var(--e-out);
}
.nav__panel a:hover,
.nav__panel a:focus-visible {
  background: var(--c-bone);
  color: var(--t-strong);
}
.nav__panel .num {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}

/* ---- Hamburger ---------------------------------------------------------- */

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.7rem;
  margin-inline-end: -0.5rem;
  border-radius: var(--r-2);
}
@media (min-width: 64rem) {
  .burger {
    display: none;
  }
}
.burger__bar {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--t-strong);
  transition: transform var(--d-base) var(--e-out),
    opacity var(--d-fast) var(--e-out);
}
.burger[aria-expanded="true"] .burger__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger__bar:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] .burger__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ---- Mobiel menu -------------------------------------------------------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  background: var(--c-ink);
  color: var(--t-invert);
  padding: var(--s-4) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-1.5%);
  /* visibility krijgt bewust géén looptijd maar een vertraging: bij het
     sluiten verdwijnt het paneel pas nadat de fade klaar is, bij het openen
     staat het meteen op visible. Zou visibility mee interpoleren, dan is het
     paneel op het moment van openen technisch nog verborgen en weigert de
     browser er focus aan te geven — en dan kan een toetsenbordgebruiker
     het menu niet in. */
  transition: opacity var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out),
    visibility 0s linear var(--d-base);
}
.drawer[data-open="true"] {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out), visibility 0s;
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
  margin-block-end: var(--s-5);
}
.drawer__close {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-invert);
  border-radius: var(--r-2);
  color: var(--t-invert);
}
.drawer__close svg {
  width: 1.1rem;
  height: 1.1rem;
}
.drawer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--line-invert);
}
.drawer__nav > li {
  border-block-end: 1px solid var(--line-invert);
}
.drawer__nav a {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-4);
  min-height: 3.25rem;
  font-family: var(--f-display);
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1.15;
  color: var(--t-invert);
  text-decoration: none;
  font-variation-settings: "opsz" 40;
}
.drawer__nav a:hover,
.drawer__nav a:focus-visible {
  color: var(--c-signal-dark);
}
.drawer__nav .num {
  font-family: var(--f-text);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--c-sap);
  font-variant-numeric: tabular-nums;
}
.drawer__sub {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0 0 0 var(--s-6);
}
.drawer__sub a {
  font-family: var(--f-text);
  font-size: var(--step-0);
  font-weight: 500;
  padding-block: var(--s-3);
  min-height: 2.75rem;
  color: var(--t-invert-body);
}
.drawer__foot {
  margin-block-start: auto;
  padding-block-start: var(--s-7);
  display: grid;
  gap: var(--s-3);
}

/* ---- Vaste balk onderaan op mobiel --------------------------------------
   Twee grote raakvlakken: bellen en WhatsApp. Dat zijn de twee acties
   waar dit bedrijf zijn opdrachten uit haalt.
   -------------------------------------------------------------------- */

.mobile-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-invert);
  border-block-start: 1px solid rgba(0, 0, 0, 0.15);
  padding-block-end: env(safe-area-inset-bottom);
  transform: translateY(105%);
  transition: transform var(--d-base) var(--e-out);
}
.mobile-bar[data-show="true"] {
  transform: none;
}
@media (min-width: 64rem) {
  .mobile-bar {
    display: none;
  }
}
.mobile-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 3.5rem;
  padding: 0.75rem;
  background: var(--c-ink);
  color: var(--t-invert);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
}
.mobile-bar a svg {
  width: 1.15em;
  height: 1.15em;
}
.mobile-bar a:first-child {
  color: var(--t-invert);
}
.mobile-bar a:last-child {
  background: #0e7a40;
  color: #fff;
}
body:has(.mobile-bar[data-show="true"]) .site-footer {
  padding-block-end: calc(var(--s-8) + 3.5rem);
}

/* ==========================================================================
   Kaarten
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(var(--s-5), 2.4vw, var(--s-7));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  transition: border-color var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out);
}
.card--link:hover {
  border-color: color-mix(in oklab, var(--c-signal) 45%, var(--line));
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.card--flat {
  border: 0;
  padding: 0;
}
.card__title {
  font-size: var(--step-2);
}
.card__body {
  color: var(--t-muted);
  font-size: var(--step-0);
  line-height: var(--lh-loose);
}

/* ---- Dienstkaart --------------------------------------------------------
   Genummerd, met botanisch lijnwerk in de hoek. Bij hover schuift een
   dunne signaallijn over de bovenrand — één beweging, geen feestje.
   -------------------------------------------------------------------- */

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(var(--s-5), 2.6vw, var(--s-7));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  transition: border-color var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out),
    background-color var(--d-base) var(--e-out);
}
.svc::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--e-out);
}
.svc:hover,
.svc:focus-within {
  border-color: color-mix(in oklab, var(--c-signal) 35%, var(--line));
  box-shadow: var(--sh-2);
  transform: translateY(-3px);
}
.svc:hover::before,
.svc:focus-within::before {
  transform: scaleX(1);
}
.svc__num {
  font-family: var(--f-display);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-wide);
}
.svc__art {
  position: absolute;
  inset-block-start: clamp(var(--s-4), 2vw, var(--s-6));
  inset-inline-end: clamp(var(--s-4), 2vw, var(--s-6));
  width: clamp(3rem, 5vw, 4.25rem);
  height: auto;
  color: var(--c-moss);
  opacity: 0.16;
  transition: opacity var(--d-slow) var(--e-out),
    transform var(--d-slow) var(--e-out);
  pointer-events: none;
}
.svc:hover .svc__art {
  opacity: 0.3;
  transform: translateY(-3px) rotate(-4deg);
}
.on-dark .svc__art {
  color: var(--c-sap);
  opacity: 0.24;
}
.svc__title {
  font-size: var(--step-2);
  padding-inline-end: 4rem;
}
.svc__title a {
  text-decoration: none;
  color: inherit;
}
.svc__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.svc__text {
  color: var(--t-muted);
  font-size: var(--step-0);
  line-height: var(--lh-loose);
  margin-block-end: auto;
}
.svc__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--c-accent);
}
.svc__more svg {
  width: 1em;
  height: 1em;
  transition: transform var(--d-base) var(--e-out);
}
.svc:hover .svc__more svg {
  transform: translateX(4px);
}

/* Uitgelichte variant: donker vlak binnen een lichte sectie. */
.svc--feature {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--t-invert-body);
}
.svc--feature .svc__title {
  color: var(--t-invert);
}
.svc--feature .svc__text {
  color: var(--t-invert-muted);
}
.svc--feature .svc__num,
.svc--feature .svc__more {
  color: var(--c-signal-dark);
}
.svc--feature .svc__art {
  color: var(--c-sap);
  opacity: 0.22;
}
@media (min-width: 56rem) {
  .svc--span2 {
    grid-column: span 2;
  }
}

/* ==========================================================================
   Feitenblok — WHO / WHAT / WHERE, ook voor machines leesbaar
   ========================================================================== */

.facts {
  display: grid;
  gap: 0;
  margin: 0;
  border-block-start: 1px solid var(--line);
}
.facts__row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.4fr) 1fr;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--line);
  align-items: baseline;
}
.facts dt {
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--t-muted);
}
.facts dd {
  margin: 0;
  color: var(--t-strong);
  font-size: var(--step-0);
  line-height: 1.5;
}

/* ==========================================================================
   Reviews
   ========================================================================== */

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: clamp(var(--s-5), 2.6vw, var(--s-7));
  background: var(--surface-alt);
  border-radius: var(--r-3);
  border-inline-start: 3px solid var(--c-accent);
}
.quote__stars {
  display: flex;
  gap: 2px;
  color: var(--c-accent);
}
.quote__stars svg {
  width: 0.95rem;
  height: 0.95rem;
}
.quote blockquote {
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--ls-snug);
  color: var(--t-strong);
  font-variation-settings: "opsz" 40;
}
.quote figcaption {
  font-size: var(--step--1);
  color: var(--t-muted);
  margin-block-start: auto;
}
.quote figcaption b {
  color: var(--t-strong);
  font-weight: 650;
}

/* ==========================================================================
   FAQ — native <details>, geen JavaScript nodig
   ========================================================================== */

.faq {
  border-block-start: 1px solid var(--line);
}
.faq__item {
  border-block-end: 1px solid var(--line);
}
.faq__item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-5);
  min-height: 3.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.3;
  color: var(--t-strong);
  letter-spacing: var(--ls-snug);
  font-variation-settings: "opsz" 32;
  transition: color var(--d-fast) var(--e-out);
}
.faq__item > summary::-webkit-details-marker {
  display: none;
}
.faq__item > summary:hover {
  color: var(--c-accent);
}
.faq__sign {
  position: relative;
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin-block-start: 0.28em;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  transition: border-color var(--d-base) var(--e-out),
    background-color var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out);
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  inset: 50% 25%;
  height: 1.5px;
  translate: 0 -50%;
  background: currentColor;
  transition: transform var(--d-base) var(--e-out),
    background-color var(--d-base) var(--e-out);
}
.faq__sign::after {
  transform: rotate(90deg);
}
.faq__item[open] .faq__sign {
  border-color: var(--c-accent);
  background: var(--c-signal);
  transform: rotate(180deg);
}
.faq__item[open] .faq__sign::before,
.faq__item[open] .faq__sign::after {
  background: #fff;
}
.faq__item[open] .faq__sign::after {
  transform: rotate(0deg);
}
.faq__answer {
  padding-block-end: var(--s-6);
  padding-inline-end: clamp(0rem, 6vw, 4rem);
  max-width: 68ch;
  color: var(--t-body);
  line-height: var(--lh-loose);
}
.faq__answer > * + * {
  margin-block-start: 0.9em;
}
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--d-base) var(--e-out),
      content-visibility var(--d-base) allow-discrete;
  }
  .faq__item[open]::details-content {
    block-size: auto;
  }
}

/* ==========================================================================
   Formulieren
   ========================================================================== */

.field {
  display: grid;
  gap: var(--s-2);
}
.field__label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--t-strong);
}
.field__hint {
  font-size: var(--step--2);
  color: var(--t-muted);
  line-height: 1.5;
}
.field__req {
  color: var(--c-accent);
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.9rem;
  background: var(--c-paper);
  color: var(--t-strong);
  border: 1.5px solid var(--line);
  border-radius: var(--r-2);
  font-size: var(--step-0);
  line-height: 1.4;
  transition: border-color var(--d-fast) var(--e-out),
    box-shadow var(--d-fast) var(--e-out),
    background-color var(--d-fast) var(--e-out);
  /* 16px op mobiel voorkomt dat iOS bij focus inzoomt. */
}
@media (max-width: 47.9375rem) {
  .input,
  .textarea,
  .select {
    font-size: 16px;
  }
}
.textarea {
  min-height: 8.5rem;
  resize: vertical;
}
.input:hover,
.textarea:hover,
.select:hover {
  border-color: color-mix(in oklab, var(--t-muted) 55%, var(--line));
}
.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-signal) 20%, transparent);
}
.input::placeholder,
.textarea::placeholder {
  color: color-mix(in oklab, var(--t-muted) 75%, transparent);
}
.input[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--c-error);
}
.field__error {
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--c-error);
}
.field__error:empty {
  display: none;
}

.select {
  appearance: none;
  padding-inline-end: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235b6a61' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.75rem;
}

/* Keuzeknoppen als grote raakvlakken in plaats van radiorondjes. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  border: 0;
  padding: 0;
  margin: 0;
}
.chips legend {
  padding: 0;
  margin-block-end: var(--s-3);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--t-strong);
}
.chip {
  position: relative;
}
.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  background: var(--c-paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-2);
  font-size: var(--step--1);
  font-weight: 550;
  cursor: pointer;
  transition: all var(--d-fast) var(--e-out);
}
.chip input:hover + span {
  border-color: var(--t-muted);
}
.chip input:checked + span {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--t-invert);
}
.chip input:focus-visible + span {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
}

/* Fotoveld — de belangrijkste invoer op de hele site. */
.dropzone {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--s-3);
  padding: clamp(var(--s-6), 4vw, var(--s-8)) var(--s-5);
  text-align: center;
  background: var(--c-bone);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-3);
  cursor: pointer;
  transition: border-color var(--d-base) var(--e-out),
    background-color var(--d-base) var(--e-out);
}
.dropzone:hover,
.dropzone[data-drag="true"] {
  border-color: var(--c-accent);
  background: var(--c-signal-wash);
}
.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.dropzone__icon {
  width: 2.2rem;
  height: 2.2rem;
  color: var(--c-moss);
}
.dropzone__title {
  font-weight: 650;
  color: var(--t-strong);
}
.dropzone__hint {
  font-size: var(--step--1);
  color: var(--t-muted);
  max-width: 34ch;
}
.dropzone__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dropzone__list:empty {
  display: none;
}
.dropzone__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3rem 0.65rem;
  background: var(--c-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  font-size: var(--step--2);
  font-weight: 550;
}

/* Honeypot: onzichtbaar voor mensen, zichtbaar voor domme bots. */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  font-size: var(--step--2);
  line-height: 1.6;
  color: var(--t-muted);
}
.form-status {
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-2);
  border: 1.5px solid var(--line);
  font-size: var(--step--1);
}
.form-status[data-state="ok"] {
  border-color: var(--c-ok);
  background: color-mix(in oklab, var(--c-moss) 8%, var(--c-paper));
}
.form-status[data-state="error"] {
  border-color: var(--c-error);
  background: var(--c-signal-wash);
}
.form-status:not([data-state]) {
  display: none;
}

/* ==========================================================================
   Kruimelpad
   ========================================================================== */

.crumbs {
  font-size: var(--step--2);
  color: var(--t-muted);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.crumbs li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
}
.crumbs a {
  text-decoration: none;
  color: inherit;
}
.crumbs a:hover {
  color: var(--c-accent);
  text-decoration: underline;
}
.crumbs [aria-current="page"] {
  color: var(--t-strong);
  font-weight: 600;
}

/* ==========================================================================
   Badge en labels
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--t-muted);
  background: var(--surface);
}
.badge--signal {
  border-color: color-mix(in oklab, var(--c-signal) 40%, transparent);
  color: var(--c-accent);
  background: color-mix(in oklab, var(--c-signal) 8%, transparent);
}
.badge svg {
  width: 0.85em;
  height: 0.85em;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--c-ink);
  color: var(--t-invert-body);
  padding-block: var(--s-9) var(--s-6);
}
.footer__top {
  display: grid;
  gap: var(--s-8);
  padding-block-end: var(--s-8);
  border-block-end: 1px solid var(--line-invert);
}
@media (min-width: 60rem) {
  .footer__top {
    grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
    gap: var(--s-7);
  }
}
.footer__brand .brand__name {
  font-size: var(--step-2);
  color: var(--t-invert);
}
.footer__brand .brand__sub {
  color: var(--c-sap);
}
.footer__nap {
  display: grid;
  gap: var(--s-2);
  font-size: var(--step--1);
  line-height: 1.6;
}
.footer__nap a {
  color: var(--t-invert);
  text-decoration: none;
  font-weight: 600;
}
.footer__nap a:hover {
  color: var(--c-signal-dark);
  text-decoration: underline;
}
.footer__col h3 {
  font-family: var(--f-text);
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-sap);
  margin-block-end: var(--s-4);
}
.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-1);
}
.footer__col a {
  display: inline-block;
  padding-block: 0.4rem;
  font-size: var(--step--1);
  color: var(--t-invert-body);
  text-decoration: none;
}
.footer__col a:hover {
  color: var(--c-signal-dark);
  text-decoration: underline;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block-start: var(--s-6);
  font-size: var(--step--2);
  color: var(--t-invert-muted);
}
.footer__bottom a {
  color: inherit;
}
.footer__social {
  display: flex;
  gap: var(--s-2);
}
.footer__social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line-invert);
  border-radius: var(--r-2);
  color: var(--t-invert-body);
  transition: all var(--d-fast) var(--e-out);
}
.footer__social a:hover {
  border-color: var(--c-sap);
  color: var(--c-sap);
}
.footer__social svg {
  width: 1.1rem;
  height: 1.1rem;
}


/* ==========================================================================
   SECTIES — de grote composities
   ========================================================================== */

/* ==========================================================================
   Hero
   Beeld over de volle breedte, met een verloop van links naar rechts zodat
   de tekst leesbaar blijft zonder dat de foto in een grijze waas verdwijnt.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: max(34rem, 84svh);
  padding-block: clamp(6.5rem, 5rem + 8vw, 10rem) var(--s-8);
  background: var(--c-ink);
  color: var(--t-invert);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 64rem) {
  .hero {
    min-height: min(50rem, 92svh);
  }
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 42%;
}

/* Twee lagen scrim: één horizontaal voor de tekst, één verticaal voor de
   header en de onderrand. Samen geven ze diepte in plaats van dof grijs. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      100deg,
      rgba(9, 16, 12, 0.94) 0%,
      rgba(9, 16, 12, 0.82) 26%,
      rgba(9, 16, 12, 0.42) 56%,
      rgba(9, 16, 12, 0.18) 78%,
      rgba(9, 16, 12, 0.34) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(9, 16, 12, 0.6) 0%,
      transparent 22%,
      transparent 62%,
      rgba(9, 16, 12, 0.72) 100%
    );
}

.hero__content {
  max-width: 46rem;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-sap);
  margin-block-end: var(--s-5);
}
.hero__eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--c-signal-dark);
}

.hero h1 {
  color: #fff;
  font-size: var(--step-7);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.028em;
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
  max-width: 15ch;
}
/* Het accentwoord in de kop. Onderstreept met één signaallijn die
   meegroeit met de tekst — geen highlighter-effect. */
.hero h1 .accent {
  position: relative;
  font-style: italic;
  font-variation-settings: "opsz" 144;
  white-space: nowrap;
}
.hero h1 .accent::after {
  content: "";
  position: absolute;
  left: 0.04em;
  right: 0.04em;
  bottom: 0.02em;
  height: 0.055em;
  background: var(--c-signal-dark);
  transform-origin: left;
  border-radius: 1px;
}

.hero__sub {
  margin-block-start: var(--s-5);
  max-width: 44ch;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--t-invert-body);
}
.hero__actions {
  margin-block-start: var(--s-7);
}

/* Vertrouwenssignalen onderaan de hero. Geen verzonnen cijfers — enkel
   wat het bedrijf zelf op zijn website claimde. */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid rgba(255, 255, 255, 0.18);
  list-style: none;
  padding-inline: 0;
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--step--1);
  font-weight: 550;
  color: var(--t-invert-body);
}
.hero__trust svg {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  color: var(--c-sap);
}

/* Op een telefoon is verticale ruimte het schaarse goed. De hero mag
   indrukwekkend zijn, maar de eerste inhoudelijke sectie moet binnen één
   veeg bereikbaar blijven. */
@media (max-width: 47.9375rem) {
  .hero__sub {
    font-size: var(--step-0);
    margin-block-start: var(--s-4);
  }
  .hero__actions {
    margin-block-start: var(--s-6);
  }
  .hero__trust {
    margin-block-start: var(--s-6);
    gap: var(--s-3) var(--s-5);
  }
}

/* Muisaanwijzing om te scrollen. Verdwijnt zodra er gescrold is. */
.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-7);
  display: none;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step--2);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--t-invert-muted);
  writing-mode: vertical-rl;
  text-decoration: none;
}
@media (min-width: 64rem) {
  .hero__scroll {
    display: flex;
  }
}
/* De aanwijzing verdwijnt zodra er gescrold is: hij heeft dan zijn werk
   gedaan. De animatie loopt bewust een beperkt aantal keer in plaats van
   eindeloos — een oneindige animatie houdt de compositor van de browser
   permanent bezig en dat kost batterij zonder dat iemand er iets aan heeft. */
.hero__scroll {
  transition: opacity var(--d-base) var(--e-out),
    visibility var(--d-base);
}
body[data-scrolled="true"] .hero__scroll {
  opacity: 0;
  visibility: hidden;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 3.5rem;
  background: linear-gradient(to bottom, var(--c-sap), transparent);
  animation: scroll-hint 2.4s var(--e-in-out) 5;
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll::after {
    animation: none;
    opacity: 0.8;
  }
}
@keyframes scroll-hint {
  0%,
  100% {
    transform: scaleY(0.35);
    transform-origin: top;
    opacity: 0.4;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }
}

/* ==========================================================================
   Paginakop voor binnenpagina's
   ========================================================================== */

.page-hero {
  position: relative;
  padding-block: calc(var(--s-8) + 1rem) var(--section-y);
  background: var(--c-ink);
  color: var(--t-invert);
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 40%;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.22));
  pointer-events: none;
}
.page-hero__grid {
  display: grid;
  gap: var(--s-6);
  align-items: end;
}
@media (min-width: 60rem) {
  .page-hero__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--s-9);
  }
}
.page-hero h1 {
  color: #fff;
  font-size: var(--step-5);
  max-width: 18ch;
  margin-block-start: var(--s-5);
}
.page-hero__lead {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--t-invert-body);
  max-width: 46ch;
}
.page-hero .crumbs {
  color: var(--t-invert-muted);
}
.page-hero .crumbs [aria-current="page"] {
  color: var(--t-invert);
}

/* Bladmotief rechtsboven in de paginakop. Subtiel, nooit als decoratie
   die iets belangrijks overlapt. */
.page-hero__art {
  position: absolute;
  top: -3rem;
  right: -4rem;
  width: min(34rem, 52vw);
  color: var(--c-sap);
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   Pijlers — de "waarom" sectie
   Asymmetrisch: een grote claim links, een lijst met bewijs rechts.
   ========================================================================== */

.pillars {
  display: grid;
  gap: var(--s-7);
}
@media (min-width: 60rem) {
  .pillars {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(var(--s-7), 6vw, var(--s-10));
    align-items: start;
  }
  .pillars__aside {
    position: sticky;
    top: calc(var(--header-h, 4.5rem) + var(--s-6));
  }
}
.pillar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--line);
}
.pillar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4) var(--s-5);
  padding-block: clamp(var(--s-5), 3vw, var(--s-7));
  border-block-end: 1px solid var(--line);
}
.pillar__icon {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--c-moss);
  grid-row: span 2;
}
.on-dark .pillar__icon {
  color: var(--c-sap);
}
.pillar__title {
  font-size: var(--step-2);
  margin: 0;
  align-self: center;
}
.pillar__body {
  grid-column: 2;
  color: var(--t-muted);
  line-height: var(--lh-loose);
  max-width: 52ch;
}

/* ==========================================================================
   Werkwijze — genummerde stappen op een doorlopende lijn
   ========================================================================== */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: step;
}
@media (min-width: 60rem) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-6);
  }
}
.step {
  position: relative;
  padding-block: var(--s-6);
  padding-inline-start: 3.5rem;
  border-block-start: 1px solid var(--line);
}
@media (min-width: 60rem) {
  .step {
    padding-inline-start: 0;
    padding-block: var(--s-6) 0;
    padding-inline-end: var(--s-5);
  }
}
/* De bol op de lijn. Op mobiel links, op desktop bovenaan. */
.step::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--s-6) + 0.15rem);
  inset-inline-start: 0;
  width: 0.65rem;
  height: 0.65rem;
  background: var(--c-accent);
  border-radius: 50%;
}
@media (min-width: 60rem) {
  .step::before {
    inset-block-start: -0.32rem;
  }
}
.step__num {
  display: block;
  font-family: var(--f-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
  margin-block-end: var(--s-3);
}
@media (min-width: 60rem) {
  .step__num {
    margin-block-start: var(--s-2);
  }
}
.step__title {
  font-size: var(--step-2);
  margin-block-end: var(--s-3);
}
.step__body {
  color: var(--t-muted);
  line-height: var(--lh-loose);
  font-size: var(--step-0);
}

/* ==========================================================================
   Realisaties — redactioneel raster, geen saaie fotogalerij
   ========================================================================== */

.projects {
  display: grid;
  gap: clamp(var(--s-5), 2.6vw, var(--s-7));
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project--wide {
    grid-column: span 2;
  }
}
@media (min-width: 68rem) {
  .projects {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .project {
    grid-column: span 2;
  }
  .project--wide {
    grid-column: span 4;
  }
  .project--tall {
    grid-column: span 2;
    grid-row: span 2;
  }
}

.project {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  transition: border-color var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out);
}
.project:hover {
  border-color: color-mix(in oklab, var(--c-signal) 35%, var(--line));
  box-shadow: var(--sh-2);
  transform: translateY(-3px);
}
.project__media {
  position: relative;
  overflow: hidden;
  background: var(--c-bone);
}
.project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--e-out);
}
.project:hover .project__media img {
  transform: scale(1.035);
}
.project--tall .project__media {
  aspect-ratio: 3 / 4;
}
.project--wide .project__media {
  aspect-ratio: 16 / 9;
}
.project__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(var(--s-5), 2.4vw, var(--s-6));
  flex: 1;
}
.project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--t-muted);
}
.project__meta .sep {
  color: var(--c-accent);
}
.project__title {
  font-size: var(--step-2);
}
.project__spec {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.6;
}
.project__spec dt {
  font-weight: 650;
  color: var(--c-accent);
  font-size: var(--step--2);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.project__spec dd {
  margin: 0 0 var(--s-3);
  color: var(--t-muted);
}
.project__spec dd:last-child {
  margin-block-end: 0;
}
.project blockquote {
  padding-inline-start: var(--s-4);
  border-inline-start: 2px solid var(--c-accent);
  font-family: var(--f-display);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--t-strong);
  font-variation-settings: "opsz" 28;
}
.project blockquote footer {
  margin-block-start: var(--s-3);
  font-family: var(--f-text);
  font-size: var(--step--2);
  color: var(--t-muted);
}

/* Nog te fotograferen: een eerlijke, verzorgde lege plek in plaats van
   een stockfoto die doet alsof. */
.project--todo {
  border-style: dashed;
  background: transparent;
}
.project--todo:hover {
  transform: none;
  box-shadow: none;
}
.project__placeholder {
  display: grid;
  place-items: center;
  gap: var(--s-3);
  padding: var(--s-8) var(--s-5);
  aspect-ratio: 3 / 2;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 10px,
      color-mix(in oklab, var(--line) 40%, transparent) 10px 11px
    );
  color: var(--t-muted);
  text-align: center;
}
.project__placeholder svg {
  width: 2rem;
  height: 2rem;
  opacity: 0.6;
}

/* ==========================================================================
   Werkgebied
   ========================================================================== */

.zone + .zone {
  margin-block-start: var(--s-8);
}
.zone__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3) var(--s-5);
  padding-block-end: var(--s-4);
  border-block-end: 2px solid var(--c-ink);
}
.on-dark .zone__head {
  border-block-end-color: var(--c-sap);
}
.zone__title {
  font-size: var(--step-3);
}
.zone__note {
  color: var(--t-muted);
  font-size: var(--step--1);
  max-width: 52ch;
}
.places {
  list-style: none;
  margin: 0;
  padding: 0;
}
.place {
  display: grid;
  gap: var(--s-2) var(--s-6);
  padding-block: var(--s-6);
  border-block-end: 1px solid var(--line);
  scroll-margin-top: 6rem;
}
@media (min-width: 56rem) {
  .place {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
    align-items: start;
  }
}
.place__name {
  font-size: var(--step-2);
  margin: 0;
}
.place__pc {
  display: block;
  margin-block-start: var(--s-2);
  font-family: var(--f-text);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  color: var(--t-muted);
  font-variant-numeric: tabular-nums;
}
.place__note {
  color: var(--t-muted);
  line-height: var(--lh-loose);
  max-width: 60ch;
}
.place__deel {
  margin-block-start: var(--s-3);
  font-size: var(--step--1);
  color: var(--t-muted);
}
.place__deel b {
  color: var(--t-strong);
  font-weight: 600;
}

/* ==========================================================================
   CTA-band
   ========================================================================== */

.cta-band {
  position: relative;
  padding-block: var(--section-y-lg);
  background: var(--c-ink);
  color: var(--t-invert);
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      120% 90% at 12% 0%,
      color-mix(in oklab, var(--c-moss) 62%, transparent) 0%,
      transparent 62%
    ),
    radial-gradient(
      90% 70% at 92% 100%,
      color-mix(in oklab, var(--c-signal) 20%, transparent) 0%,
      transparent 60%
    );
}
.cta-band__grid {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}
@media (min-width: 60rem) {
  .cta-band__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(var(--s-7), 6vw, var(--s-10));
  }
}
.cta-band h2 {
  color: #fff;
  font-size: var(--step-5);
  max-width: 16ch;
}
.cta-band p {
  color: var(--t-invert-body);
  font-size: var(--step-1);
  line-height: 1.6;
  max-width: 46ch;
}
.cta-band__panel {
  padding: clamp(var(--s-5), 3vw, var(--s-7));
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-invert);
  border-radius: var(--r-3);
  backdrop-filter: blur(6px);
}
.cta-band__steps {
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
  display: grid;
  gap: var(--s-4);
  counter-reset: c;
}
.cta-band__steps li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: var(--s-4);
  align-items: baseline;
  font-size: var(--step-0);
  color: var(--t-invert-body);
}
.cta-band__steps li::before {
  counter-increment: c;
  content: counter(c, decimal-leading-zero);
  font-family: var(--f-display);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--c-signal-dark);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Overige blokken
   ========================================================================== */

/* Uitgelicht citaat / grote uitspraak midden op de pagina. */
.pull {
  max-width: 26ch;
  font-family: var(--f-display);
  font-size: var(--step-4);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: var(--ls-tight);
  color: var(--t-strong);
  font-variation-settings: "opsz" 90;
}
.pull--center {
  margin-inline: auto;
  text-align: center;
  max-width: 22ch;
}

/* Specificatielijst voor de dienstpagina's: per soort een eigen alinea. */
.spec {
  display: grid;
  margin: 0;
  border-block-start: 1px solid var(--line);
}
.spec > div {
  display: grid;
  gap: var(--s-2) var(--s-6);
  padding-block: var(--s-5);
  border-block-end: 1px solid var(--line);
}
@media (min-width: 52rem) {
  .spec > div {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.8fr);
  }
}
.spec dt {
  font-family: var(--f-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--t-strong);
  font-variation-settings: "opsz" 24;
}
.spec dd {
  margin: 0;
  color: var(--t-muted);
  line-height: var(--lh-loose);
}

/* Waarschuwingsblok — gebruikt op de knaagtakkenpagina. Het is daar geen
   opsmuk maar informatie waar een dier van afhangt. */
.warn {
  padding: clamp(var(--s-5), 3vw, var(--s-6));
  background: var(--c-signal-wash);
  border: 1px solid color-mix(in oklab, var(--c-signal) 35%, transparent);
  border-inline-start: 4px solid var(--c-accent);
  border-radius: var(--r-2);
}
.on-dark .warn {
  background: color-mix(in oklab, var(--c-signal) 16%, transparent);
}
.warn__title {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--t-strong);
  margin-block-end: var(--s-3);
}
.warn__title svg {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  color: var(--c-accent);
}

/* Blok voor ontbrekende bedrijfsinformatie. Zichtbaar in de bouwfase,
   te verwijderen zodra de gegevens er zijn. */
.info-needed {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1.5px dashed color-mix(in oklab, var(--c-signal) 50%, transparent);
  border-radius: var(--r-2);
  background: color-mix(in oklab, var(--c-signal) 6%, transparent);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--t-body);
}
.info-needed svg {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--c-accent);
}
.info-needed b {
  display: block;
  font-size: var(--step--2);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-block-end: var(--s-2);
}

/* Portret met kaderlijn ernaast — gebruikt op Over Glenn. */
.portrait {
  position: relative;
}
.portrait::before {
  content: "";
  position: absolute;
  inset: var(--s-5) auto auto var(--s-5);
  width: 100%;
  height: 100%;
  border: 1px solid var(--c-accent);
  border-radius: var(--r-3);
  z-index: -1;
}

/* Uitgelicht getal / korte feitenreeks. */
.metrics {
  display: grid;
  gap: var(--s-5);
  list-style: none;
  padding: 0;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.metric {
  padding-block-start: var(--s-4);
  border-block-start: 2px solid var(--c-accent);
}
.metric__value {
  display: block;
  font-family: var(--f-display);
  font-size: var(--step-4);
  font-weight: 500;
  line-height: 1;
  color: var(--t-strong);
  font-variation-settings: "opsz" 72;
}
.metric__label {
  display: block;
  margin-block-start: var(--s-3);
  font-size: var(--step--1);
  color: var(--t-muted);
  line-height: 1.5;
}

/* Sectie met beeld dat tot de rand doorloopt en overlappende tekstkaart. */
.overlap {
  position: relative;
}
@media (min-width: 64rem) {
  .overlap__card {
    position: absolute;
    inset-block-end: clamp(-3rem, -4vw, -2rem);
    inset-inline-start: 0;
    width: min(30rem, 42%);
    padding: var(--s-7);
    background: var(--c-paper);
    border-radius: var(--r-3);
    box-shadow: var(--sh-3);
  }
}

/* ==========================================================================
   Scroll-reveal
   Alleen actief wanneer JavaScript draait én de bezoeker geen
   voorkeur voor minder beweging heeft opgegeven.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(1.15rem);
  transition: opacity 700ms var(--e-out), transform 700ms var(--e-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}
.js .reveal--img {
  clip-path: inset(0 0 100% 0);
  opacity: 1;
  transform: none;
  transition: clip-path 1000ms var(--e-out);
}
.js .reveal--img.is-in {
  clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal--img {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}

/* Terug-naar-boven */
.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  background: var(--c-ink);
  color: var(--t-invert);
  border: 1px solid var(--line-invert);
  border-radius: var(--r-2);
  box-shadow: var(--sh-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: all var(--d-base) var(--e-out);
}
.to-top[data-show="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.to-top svg {
  width: 1.1rem;
  height: 1.1rem;
}
@media (max-width: 63.9375rem) {
  .to-top {
    display: none;
  }
}