/* ===================================================================
   HansumDigital — stijlblad
   Eén lettertype, één accentkleur, alles in tokens. De kleur op deze
   site komt van het werk zelf; de pagina is de lijst eromheen.
   =================================================================== */

/* --- Letter: Plus Jakarta Sans, zelf gehost. Eén familie, drie gewichten.
       Drie lettertypes door elkaar was precies wat de vorige site rommelig maakte. */
@font-face {
  font-family: 'Jakarta';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-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: 'Jakarta';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-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;
}

:root {
  /* Alles wit. Secties worden niet gescheiden door grijze banden maar door haarlijnen;
     contrast komt uit de twee donkere blokken (de scan en de slotoproep). */
  --papier: #FFFFFF;
  --vlak: #FFFFFF;
  --wit: #FFFFFF;
  --inkt: #0a0a0f;
  --inkt-zacht: #555555;
  --lijn: #E4E8F0;
  --lijn-sterk: #C9D2E2;

  /* De merkkleuren van HansumDigital, één op één overgenomen. Blauw blijft het
     accent: labels, links, focus en de pijl in knoppen. Op de donkere blokken is
     --accent-licht nodig, want het merkblauw haalt op bijna-zwart net geen 4,5:1. */
  --accent: #1E6FFF;
  --accent-diep: #1559D6;
  --accent-licht: #6EA8FF;

  --maxw: 78rem;
  --maxw-smal: 52rem;
  --leesbreedte: 68ch;

  --ruimte-xs: 0.5rem;
  --ruimte-s: 1rem;
  --ruimte-m: 1.5rem;
  --ruimte-l: 3rem;
  --ruimte-xl: 6rem;
  --ruimte-xxl: 9rem;

  --rand: 1px solid var(--lijn);
  --soepel: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Tot 1920px breed staat alles op de gewone maat. Daarboven groeit de pagina
   rustig mee, tot hooguit 1,3 keer. Verder niet: een ultrawide van 3440 is breder
   maar niet hoger dan een gewoon scherm, dus bij sterker opschalen past er
   verticaal steeds minder in beeld. Ondergrens in rem, zodat de browserinstelling
   van de bezoeker leidend blijft. */
html {
  font-size: clamp(1rem, 0.25rem + 0.625vw, 1.3rem);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

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

body {
  margin: 0;
  font-family: 'Jakarta', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--inkt);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--accent); color: var(--papier); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Elke pagina komt rustig binnen. */
body { animation: pagina-in 0.4s ease-out both; }
@keyframes pagina-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* === Typografie ===
   Koppen zijn strak getrackt en zwaar; dat geeft de site zijn gezicht zonder dat er
   een tweede lettertype of een effect aan te pas komt. */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); letter-spacing: -0.025em; }
h4 { font-size: 1.0625rem; letter-spacing: -0.015em; }
p { margin: 0 0 1.1em; max-width: var(--leesbreedte); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  line-height: 1.6;
  color: var(--inkt-zacht);
}

/* Het kleine label boven een kop: het enige dat standaard de accentkleur draagt. */
.label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

.inhoud { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 2rem; }
.inhoud--smal { max-width: var(--maxw-smal); }
/* Alleen voor schermlezers: de kop is er wel, maar niet in beeld. */
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

section { padding-block: var(--ruimte-xxl); }
/* Geen grijze band maar een haarlijn: de pagina blijft wit en de secties blijven
   toch van elkaar te onderscheiden. */
.vlak { border-top: var(--rand); }
.diep { background: var(--inkt); color: var(--papier); }
.diep .lead, .diep p { color: rgba(247, 245, 240, 0.72); }
.diep .label { color: var(--accent-licht); }
/* De afsluitende oproep staat als los eiland op wit, zodat hij niet
   samensmelt met de donkere voettekst eronder. */
main > section.diep:last-child {
  background: #F4F5F7 url('../images/achtergronden/wit-linnen.webp') center / cover no-repeat;
  border-top: 0;
  padding-block: var(--ruimte-xxl);
  padding-inline: clamp(1rem, 3vw, 2rem);
}
main > section.diep:last-child > .inhoud {
  max-width: calc(var(--maxw) - 4rem);
  padding: clamp(3rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4.5rem);
  background: var(--inkt);
  border-radius: 1.5rem;
  text-align: center;
}
/* Citaat boven het eiland, op het linnen. De sectie zelf zet tekst wit (voor het eiland),
   dus hier expliciet donker. */
.eiland-citaat {
  max-width: 52rem;
  margin: 0 auto var(--ruimte-xxl);
  padding-inline: 1rem;
  text-align: center;
  color: var(--inkt);
}
.eiland-citaat blockquote {
  margin: 0 0 1.75rem;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.eiland-citaat-sterren { margin-bottom: 1.25rem; font-size: 1.75rem; line-height: 1; letter-spacing: 0.2em; color: #1E6FFF; }
.eiland-citaat figcaption { font-size: 0.95rem; font-weight: 600; color: var(--inkt-zacht); }

/* Het eiland is effen blauw; label, tekst en knoppen passen zich daarop aan. */
main > section.diep:last-child > .inhoud { background: var(--accent-diep); }
main > section.diep:last-child .label { color: #FFFFFF; }
main > section.diep:last-child .lead,
main > section.diep:last-child p { color: rgba(255, 255, 255, 0.9); }
main > section.diep:last-child .knop--wit:hover { background: var(--inkt); border-color: var(--inkt); color: #FFFFFF; }
main > section.diep:last-child .knop--licht { border-color: rgba(255, 255, 255, 0.7); }
main > section.diep:last-child > .inhoud > div { margin-inline: auto; }
main > section.diep:last-child .knoppen { justify-content: center; }

/* === Navigatie ===
   Blijft plakken, krijgt pas een achtergrond zodra je scrolt. */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-m);
  padding: 1rem 2rem;
  transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
.nav--vast {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(0.6rem);
  box-shadow: 0 1px 0 var(--lijn);
  padding-block: 0.6rem;
}
.merk {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.04em;
  text-decoration: none;
}
.merk span { color: var(--accent); }
.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Elke link is een eigen vlak met ruime hoogte: makkelijk te raken en duidelijk
   te onderscheiden. Hover geeft een licht blok, de huidige pagina een blauw blok. */
.nav-menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 1.1rem;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.nav-menu a:not(.knop):hover { background: #EEF3FC; color: var(--accent-diep); }
.nav-menu a:not(.knop)[aria-current="page"] { background: var(--accent); color: #fff; }
.nav-menu .knop { min-height: 3rem; margin-left: 0.75rem; padding: 0 1.5rem; font-size: 1.02rem; }

/* --- Uitklapmenu onder Diensten ---
   Opent bij hover en bij een klik of Enter op "Diensten" (site.js zet .nav-sub--open).
   De klik zelf gaat nergens heen; "Alle diensten" staat bovenaan in het lijstje. */
.nav-sub { position: relative; }
.nav-sub-pijl {
  width: 0.45rem;
  height: 0.45rem;
  margin: -0.2rem 0 0 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.nav-sub--actief > a { background: var(--accent); color: #fff; }
.nav-sub--actief > a:hover { background: var(--accent-diep) !important; color: #fff !important; }
.nav-submenu { margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) {
  .nav-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 17.5rem;
    padding: 0.5rem;
    background: #FFFFFF;
    border: 1px solid #E4E8F0;
    box-shadow: 0 1.25rem 2.5rem rgba(10, 10, 15, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  }
  .nav-sub:hover .nav-submenu,
  .nav-sub--open .nav-submenu { opacity: 1; visibility: visible; transform: none; }
  .nav-sub:hover .nav-sub-pijl,
  .nav-sub--open .nav-sub-pijl { transform: rotate(225deg) translate(-0.15rem, -0.15rem); }
  .nav-submenu a { display: flex; width: 100%; min-height: 2.75rem; padding: 0 0.9rem; font-size: 0.98rem; font-weight: 600; color: #0a0a0f; white-space: nowrap; }
  /* De eerste regel, "Alle diensten", staat iets los van de rest. */
  .nav-submenu li:first-child { margin-bottom: 0.4rem; padding-bottom: 0.4rem; border-bottom: 1px solid #E4E8F0; }
  .nav-submenu li:first-child a { font-weight: 700; }
}

/* Tussen tablet en breed scherm past alles net niet op volle maat. */
@media (min-width: 900px) and (max-width: 1199px) {
  .nav-menu a { padding: 0 0.7rem; font-size: 0.95rem; }
  .nav-menu .knop { margin-left: 0.4rem; padding: 0 1rem; font-size: 0.95rem; gap: 0.75rem; }
}
/* Net boven het omslagpunt naar het uitklapmenu: zeven items op één regel houden. */
@media (min-width: 900px) and (max-width: 1023px) {
  .nav-menu { gap: 0; }
  .nav-menu a { padding: 0 0.45rem; font-size: 0.9rem; }
  .nav-menu .knop { margin-left: 0.3rem; padding: 0 0.8rem; font-size: 0.9rem; gap: 0.5rem; }
}

.nav-knop {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.6rem;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-knop span {
  display: block;
  height: 2px;
  background: var(--inkt);
  transition: transform 0.3s var(--soepel), opacity 0.2s ease;
}
.nav-knop span + span { margin-top: 0.4rem; }
.nav--open .nav-knop span:nth-child(1) { transform: translateY(0.4rem) rotate(45deg); }
.nav--open .nav-knop span:nth-child(2) { opacity: 0; }
.nav--open .nav-knop span:nth-child(3) { transform: translateY(-0.4rem) rotate(-45deg); }

/* === Knoppen === */
.knop {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.6rem;
  border: 1px solid var(--inkt);
  background: transparent;
  color: var(--inkt);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.knop-pijl { transition: transform 0.3s var(--soepel); }
.knop:hover { background: var(--inkt); color: var(--papier); }
.knop:hover .knop-pijl { transform: translateX(0.35rem); }
.knop--vol { background: var(--inkt); border-color: var(--inkt); color: var(--papier); }
.knop--vol:hover { background: var(--accent); border-color: var(--accent); color: var(--papier); }
.knop--licht { border-color: rgba(247, 245, 240, 0.4); color: var(--papier); }
.knop--licht:hover { background: var(--papier); border-color: var(--papier); color: var(--inkt); }
.knop--wit { background: var(--papier); border-color: var(--papier); color: var(--inkt); }
.knop--wit:hover { background: var(--accent); border-color: var(--accent); color: var(--papier); }
.knoppen { display: flex; flex-wrap: wrap; gap: 0.875rem; }

/* === Hero ===
   Tekst links, beeld rechts dat van boven tot onder doorloopt. Geen achtergrondeffect:
   het beeld is de achtergrond. */
/* De hero vult precies één scherm. Twee dingen zorgen daarvoor:
   - padding-block 0: de hero is een <section> en kreeg anders de algemene
     sectiemarge boven én onder erbij, bovenop zijn eigen ruimte.
   - alle verticale maten zijn begrensd op de vensterhoogte (dvh). Breedte schaalt
     mee met het scherm, maar een ultrawide is niet hoger dan een gewoon scherm:
     zonder die grens groeide de kop door tot de helft buiten beeld viel. */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: 100dvh;
  padding-block: 0;
  align-items: stretch;
}
.hero-tekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 9rem 2rem 5rem;
  padding-left: max(2rem, (100vw - var(--maxw)) / 2 + 2rem);
}
.hero h1 { max-width: 15ch; margin-bottom: 1.5rem; }
.hero .lead { margin-bottom: 2.5rem; max-width: 42ch; }
@media (min-width: 900px) {
  .hero { height: 100dvh; min-height: 34rem; }
  /* Bovenruimte: minstens de hoogte van de navigatiebalk. */
  .hero-tekst { padding-top: max(6.5rem, min(9rem, 13dvh)); padding-bottom: min(5rem, 5dvh); }
  .hero h1 { font-size: clamp(2.6rem, min(6.2vw, 9dvh), 5rem); margin-bottom: min(1.5rem, 2.5dvh); }
  .hero .lead { font-size: min(clamp(1.1rem, 1.35vw, 1.3rem), 2.6dvh); margin-bottom: min(2.5rem, 3.5dvh); }
  /* De foto is een eigen blok naast de tekst, geen halve pagina meer. Hij begint
     onder de navigatiebalk en zijn hoogte volgt het venster, zodat hij altijd past. */
  /* Tekst en foto delen samen de breedte van de rest van de pagina, in plaats van
     elk een helft van het hele scherm. Zo staat de foto altijd tegen de rechterrand
     van de inhoud en houdt hij zijn verhouding. */
  .hero {
    grid-template-columns: 1.2fr 0.8fr;
    column-gap: 3rem;
    padding-inline: max(2rem, (100vw - var(--maxw)) / 2 + 2rem);
  }
  .hero .hero-tekst { padding-left: 0; padding-right: 0; }
  /* .hero ervoor: de basisregels van .hero-beeld staan verderop in het bestand en
     zouden deze anders overschrijven. */
  .hero .hero-beeld {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: visible;
    background: none;
    padding-top: max(6.5rem, min(9rem, 13dvh));
    padding-bottom: min(5rem, 5dvh);
  }
  .hero .hero-beeld img {
    position: static;
    width: auto;
    max-width: 100%;
    height: min(32rem, 100%);
    aspect-ratio: 4 / 5;
  }
}
.hero-beeld { position: relative; overflow: hidden; background: var(--vlak); }
.hero-beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}

/* Bewijsregel onder de hero: cijfers in plaats van beloftes. */
.cijfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 2.5rem;
  padding-block: 3.5rem;
  border-block: var(--rand);
}
.cijfer-getal {
  display: block;
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.cijfer-tekst { font-size: 0.95rem; color: var(--inkt-zacht); margin: 0; }

/* === Werk: elk project een eigen band ===
   Groot beeld, korte tekst. Dit is waar de kleur op de site vandaan komt. */
.werkband { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.werkband + .werkband { margin-top: var(--ruimte-xxl); }
.werkband:nth-child(even) .werkband-beeld { order: 2; }
.werkband-beeld {
  position: relative;
  overflow: hidden;
  background: var(--vlak);
  border: var(--rand);
}
/* De schermafdruk staat er in zijn eigen verhouding, dus altijd helemaal in beeld.
   De breedte- en hoogte-attributen in de HTML houden de ruimte vast tijdens het laden. */
.werkband-beeld img {
  width: 100%;
  height: auto;
  transition: transform 0.6s var(--soepel);
}
/* De vertraging zit alleen op het ingaan: wie er met de muis langs strijkt, zet
   niets in beweging, en bij weggaan komt het beeld meteen terug. */
a.werkband-beeld:hover img, .werkband:hover .werkband-beeld img { transform: scale(1.03); transition-delay: 0.3s; }
.werkband-cat {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}
.werkband h3 { margin: 0.75rem 0 0.9rem; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.werkband p { color: var(--inkt-zacht); margin-bottom: 1.5rem; }
.werk-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--accent);
}
.werk-link span { transition: transform 0.3s var(--soepel); }
.werk-link:hover span { transform: translateX(0.3rem); }
.werk-merk { font-size: 0.85rem; color: var(--inkt-zacht); font-weight: 600; }

/* === Raster met kaarten (diensten, werk-overzicht) === */
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 1.5rem;
}
.raster--twee { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); }
.kaart {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: var(--wit);
  border: var(--rand);
  text-decoration: none;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.kaart:hover { transform: translateY(-4px); border-color: var(--lijn-sterk); }
.kaart-nr {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.kaart h3 { margin-bottom: 0.6rem; }
.kaart p { color: var(--inkt-zacht); font-size: 0.98rem; margin-bottom: 0; }
.kaart-lijst { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.kaart-lijst li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.95rem;
  color: var(--inkt-zacht);
}
.kaart-lijst li + li { margin-top: 0.5rem; }
.kaart-lijst li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 1px;
  background: var(--accent);
}

/* Werkkaart: beeld boven, tekst onder */
.werkkaart { padding: 0; overflow: hidden; }
.werkkaart-media { overflow: hidden; background: var(--vlak); }
.werkkaart-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 0;
  transition: transform 0.6s var(--soepel);
}
.werkkaart:hover .werkkaart-media img { transform: scale(1.03); }
.werkkaart-body { padding: 1.75rem; }

/* === Aanpak: genummerde stappen === */
.stappen { counter-reset: stap; display: grid; gap: 0; }
.stap {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 2rem;
  padding-block: 2.25rem;
  border-top: var(--rand);
}
.stap:last-child { border-bottom: var(--rand); }
.stap::before {
  counter-increment: stap;
  content: counter(stap, decimal-leading-zero);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.06em;
}
.stap h3 { margin-bottom: 0.5rem; }
.stap p { color: var(--inkt-zacht); margin-bottom: 0; }

/* === Sprenkels: losse iconen op de achtergrond van een sectie ===
   Bewust onregelmatig geplaatst en gedraaid. Ze liggen achter de inhoud en vangen geen klikken. */
.sprenkel-sectie { position: relative; overflow: hidden; }
.sprenkel-sectie > .inhoud { position: relative; z-index: 1; }
.sprenkels { position: absolute; inset: 0; pointer-events: none; }
.sprenkels img { position: absolute; height: auto; opacity: 0.09; }
.sprenkels img:nth-child(1)  { left: 4%;   top: 4%;  width: 7rem; transform: rotate(-12deg); }
.sprenkels img:nth-child(2)  { right: 6%;  top: 9%;  width: 9rem; transform: rotate(14deg); }
.sprenkels img:nth-child(3)  { left: 9%;   top: 29%; width: 6rem; transform: rotate(21deg); }
.sprenkels img:nth-child(4)  { right: 3%;  top: 37%; width: 8rem; transform: rotate(-18deg); }
.sprenkels img:nth-child(5)  { left: 2%;   top: 54%; width: 9rem; transform: rotate(10deg); }
.sprenkels img:nth-child(6)  { right: 10%; top: 61%; width: 6rem; transform: rotate(16deg); }
.sprenkels img:nth-child(7) { left: 6%;   top: 79%; width: 7rem; transform: rotate(-6deg); }
.sprenkels img:nth-child(8) { right: 4%;  top: 86%; width: 8rem; transform: rotate(12deg); }
@media (max-width: 899px) {
  /* Op een smal scherm de helft, en kleiner: anders staat er achter elke alinea een icoon. */
  .sprenkels img { width: 4.5rem !important; }
  .sprenkels img:nth-child(even) { display: none; }
}

/* Hero: dezelfde iconen, maar grijs. Het filter maakt de blauwe bestanden zwart;
   de lage dekking maakt daar grijs van. */
.hero { position: relative; overflow: hidden; }
.hero > :not(.sprenkels) { position: relative; z-index: 1; }
/* inset in de volgorde boven, rechts, onder, links: zo erft geen icoon een plek van de algemene regels. */
.sprenkels--hero img { filter: brightness(0); opacity: 0.07; }
.sprenkels--hero img:nth-child(1) { inset: 17% auto auto 3%;  width: 6rem; transform: rotate(-12deg); }
.sprenkels--hero img:nth-child(2) { inset: 13% auto auto 45%; width: 5rem; transform: rotate(10deg); }
.sprenkels--hero img:nth-child(3) { inset: auto auto 5% 31%;  width: 7rem; transform: rotate(14deg); }
.sprenkels--hero img:nth-child(4) { inset: auto auto 11% 1%;  width: 5rem; transform: rotate(-8deg); }
.sprenkels--hero img:nth-child(5) { inset: auto 44% 9% auto;  width: 5rem; transform: rotate(18deg); }
.sprenkels--hero img:nth-child(6) { inset: 15% 2% auto auto;  width: 6rem; transform: rotate(12deg); }
.sprenkels--hero img:nth-child(7) { inset: auto 4% 5% auto;   width: 6rem; transform: rotate(-14deg); }

/* === Route: stappen met beeld, om en om links en rechts, met een pijl naar de volgende === */
.route { counter-reset: route; }
.route-stap { display: grid; gap: 1.5rem; align-items: center; }
.route-tekst::before {
  counter-increment: route;
  content: "Stap " counter(route);
  display: block;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.route-tekst h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 0.75rem; }
.route-tekst p { max-width: 46ch; margin-bottom: 0; color: var(--inkt-zacht); }
.route-beeld {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: #F4F7FC;
  border: 1px dashed var(--lijn-sterk);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}
.route-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Met een echte foto vervallen rand en vlak van de plaatshouder; anders schemert
   het vlak als een streepje onder de foto door. */
.route-beeld:has(img) { display: block; border: 0; background: none; overflow: hidden; }
.route-pijl { display: flex; justify-content: center; padding-block: 1.25rem; color: var(--accent); }
.route-pijl svg {
  width: 4rem;
  height: 3.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (min-width: 900px) {
  .route-stap { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .route-stap:nth-of-type(even) .route-beeld { order: -1; }
  .route-pijl { padding-block: 0.5rem; }
  .route-pijl svg { width: 7rem; height: 5.6rem; }
  /* De pijl wijst van de tekst van deze stap naar de tekst van de volgende. */
  .route-pijl--terug svg { transform: scaleX(-1); }
}

/* === Logostrook klanten === */
.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3.5rem;
  padding-block: 1rem;
}
.logos img { height: 2.5rem; width: auto; max-width: 10rem; object-fit: contain; }

/* === Quote === */
.quote { max-width: 46rem; margin-inline: auto; text-align: center; }
.quote blockquote {
  margin: 0 0 1.5rem;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.quote figcaption { font-size: 0.95rem; color: var(--inkt-zacht); }

/* === Veelgestelde vragen === */
.vraag { border-top: var(--rand); }
.vraag:last-of-type { border-bottom: var(--rand); }
.vraag summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: '';
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-0.15rem, -0.15rem);
  transition: transform 0.3s var(--soepel);
}
.vraag[open] summary::after { transform: rotate(-135deg) translate(-0.15rem, -0.15rem); }
.vraag-antwoord { padding-bottom: 1.75rem; color: var(--inkt-zacht); }

/* === Formulier === */
.formulier { display: grid; gap: 1.25rem; }
.veld { display: grid; gap: 0.5rem; }
.veld label { font-size: 0.9rem; font-weight: 700; }
.veld input, .veld textarea, .veld select {
  padding: 0.9rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--inkt);
  background: var(--wit);
  border: 1px solid var(--lijn-sterk);
  border-radius: 0;
  transition: border-color 0.3s ease;
}
.veld input:focus, .veld textarea:focus, .veld select:focus {
  border-color: var(--accent);
  outline: none;
}
.veld textarea { min-height: 9rem; resize: vertical; }
.veld-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.honeypot { position: absolute; left: -9999px; }
.form-melding { margin-top: 1rem; font-weight: 700; color: var(--accent); }

/* === Contactregels === */
.contactlijst { margin: 0; padding: 0; list-style: none; }
.contactlijst li { padding-block: 1rem; border-bottom: var(--rand); }
.contactlijst li:first-child { border-top: var(--rand); }
.contactlijst dt, .contactlijst .ct-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  margin-bottom: 0.2rem;
}
.contactlijst a { font-weight: 700; text-decoration: none; }
.contactlijst a:hover { color: var(--accent); }

/* === Voettekst === */
.voet { padding-block: var(--ruimte-l) var(--ruimte-m); background: var(--inkt); color: var(--papier); }
.voet-boven { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 3rem; }
.voet h4 {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.5);
  margin-bottom: 1rem;
}
.voet ul { margin: 0; padding: 0; list-style: none; }
.voet a { text-decoration: none; font-size: 0.98rem; color: rgba(247, 245, 240, 0.82); transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; }
.voet a:hover { color: var(--papier); }
/* Pagina's in twee kolommen; ruimte onder elk item in plaats van erboven,
   anders begint de tweede kolom een regel lager. */
.voet-paginas { columns: 2; column-gap: 2.5rem; }
.voet-paginas li { padding-bottom: 0.5rem; break-inside: avoid; }
.voet-iconen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.voet-iconen a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(247, 245, 240, 0.22);
}
.voet-iconen a:hover { background: rgba(247, 245, 240, 0.1); border-color: var(--papier); }
.voet-iconen svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Merklogo's zijn gevulde vormen, geen lijntekeningen. */
.voet-iconen .merkicoon { fill: currentColor; stroke: none; }
/* Merkkleuren van de platforms zelf. Het LinkedIn-logo is een vlak met uitgespaarde
   letters; de witte ondergrond maakt die letters wit in plaats van doorzichtig. */
/* Bellen groen, e-mail geel: lijniconen, dus de kleur zit in de lijn. */
.voet-iconen a[href^="tel:"] svg { stroke: #34C759; }
.voet-iconen a[href^="mailto:"] svg { stroke: #FFC83D; }
.voet-iconen .merkicoon--whatsapp { fill: #25D366; }
.voet-iconen .merkicoon--linkedin { fill: #0A66C2; background: #fff; border-radius: 3px; }
.voet-iconen .merkicoon--instagram { fill: url(#ig-verloop); }
.voet-merk { font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.04em; margin-bottom: 0.75rem; }
.voet-merk span { color: var(--accent-licht); }
.voet-over { max-width: 34ch; font-size: 0.98rem; color: rgba(247, 245, 240, 0.6); }
.voet-onder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(247, 245, 240, 0.14);
  font-size: 0.85rem;
  color: rgba(247, 245, 240, 0.5);
}

/* === Paginakop voor subpagina's === */
.paginakop { padding-block: 11rem var(--ruimte-xl); border-bottom: var(--rand); }
.paginakop h1 { max-width: 18ch; margin-bottom: 1.25rem; }
/* === Donkere paginakop voor subpagina's ===
   Zwart vlak met schuine banen die allemaal dezelfde kant op hellen, als de schuine
   streep in code. Rechts een beeld met dezelfde schuine rand, onderaan ronde hoeken
   zoals de eilanden op home. De kleurtokens draaien om, dus tekst en knoppen volgen. */
.kop-donker {
  --inkt: #FFFFFF;
  --inkt-zacht: rgba(255, 255, 255, 0.78);
  --accent: #6EA8FF;
  --kop-rond: clamp(2rem, 5vw, 4.5rem);
  position: relative;
  overflow: hidden;
  padding-block: 8.25rem calc(4rem + var(--kop-rond));
  border-bottom: 0;
  background: #0a0a0f;
  color: var(--inkt);
}
.kop-donker > .inhoud { position: relative; z-index: 2; }
/* Geen haarlijn boven de sectie eronder; die zou door de ronde hoeken heen lopen. */
.kop-donker + section { border-top: 0; }
.kop-donker h1 { max-width: 16ch; font-size: clamp(2.2rem, 4vw, 3.4rem); }
.kop-donker .lead { max-width: 38ch; margin-bottom: 1.75rem; font-size: clamp(1.05rem, 1.2vw, 1.2rem); }
.kop-donker .kruimels a { color: var(--inkt); }
/* De knoppen hebben vaste kleuren nodig: de omgedraaide tokens zouden wit op wit geven. */
.kop-donker .knop--wit { background: #FFFFFF; border-color: #FFFFFF; color: #0a0a0f; }
.kop-donker .knop--wit:hover { background: #1E6FFF; border-color: #1E6FFF; color: #FFFFFF; }
.kop-donker .knop--licht { border-color: rgba(255, 255, 255, 0.5); color: #FFFFFF; }
.kop-donker .knop--licht:hover { background: #FFFFFF; border-color: #FFFFFF; color: #0a0a0f; }
/* Boven een donkere kop staat de navigatie altijd op wit, ook vóór het scrollen. */
body:has(.kop-donker) .nav { background: rgba(255, 255, 255, 0.97); }
.kop-vormen { position: absolute; inset: 0; width: 100%; height: 100%; }
.kop-vormen { z-index: 1; }
/* Vlakken in wisselende richting: de grote baan helt naar rechts, de driehoeken eromheen
   naar links en naar rechts. Twee ervan liggen over het beeld heen. */
.kop-vlak--a { fill: #13131a; }
.kop-vlak--b { fill: #1b1b25; }
.kop-vlak--c { fill: #20202c; }
.kop-vlak--d { fill: rgba(10, 10, 15, 0.62); }
.kop-vlak--e { fill: rgba(32, 32, 44, 0.9); }
/* De lijnen houden hun dikte, ook al wordt de tekening opgerekt. */
.kop-lijn { stroke: #6EA8FF; stroke-width: 3; vector-effect: non-scaling-stroke; }
/* Logostrook onder de kop: een witte sectie die met ronde bovenhoeken over de kop heen
   schuift, zodat het zwart in de hoeken zichtbaar blijft. */
.kop-logos {
  --kop-rond: clamp(2rem, 5vw, 4.5rem);
  position: relative;
  z-index: 3;
  margin-top: calc(var(--kop-rond) * -1);
  padding-block: 4rem;
  border-radius: var(--kop-rond) var(--kop-rond) 0 0;
  background: var(--wit);
}
/* Eén groep is minstens zo breed als het scherm en de logo's verdelen zich daarover.
   Zo staat hetzelfde logo nooit twee keer tegelijk in beeld. De halve tussenruimte aan
   beide kanten houdt de afstand op de naad gelijk aan die tussen de logo's. */
.kop-logos .logolint--loopt .logolint-groep {
  min-width: 100vw;
  justify-content: space-around;
  gap: 2rem 6.5rem;
  padding-inline: 3.25rem;
}
/* De strook loopt over de volle schermbreedte; alleen de uiterste randen vervagen. */
.kop-logos .logolint {
  max-width: none;
  margin-bottom: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.kop-logos + section { border-top: 0; }
.kop-beeld { display: none; }
@media (min-width: 900px) {
  /* Het beeld begint op 52% van de breedte; de schuine rand loopt van 62% boven naar 52% onder,
     gelijk aan de blauwe lijn in de tekening. */
  .kop-beeld {
    display: block;
    position: absolute;
    inset: 0 0 0 52%;
    clip-path: polygon(20.83% 0, 100% 0, 100% 100%, 0 100%);
  }
  .kop-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
  /* Een portret: het gezicht in beeld houden in plaats van de linkerbovenhoek. */
  .kop-beeld--portret img { object-position: center 20%; }
  .kop-beeld::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10, 10, 15, 0.6), rgba(10, 10, 15, 0.12) 60%); }
  .kop-donker > .inhoud > * { max-width: min(100%, 36rem); }
}
@media (max-width: 899px) {
  .kop-donker { padding-block: 7.5rem calc(3.5rem + var(--kop-rond)); }
  /* Op een smal scherm zouden deze twee lijnen dwars door de tekst lopen. */
  .kop-lijn--breed { display: none; }
}

.kruimels { font-size: 0.85rem; color: var(--inkt-zacht); margin-bottom: 1.5rem; }
.kruimels a { text-decoration: none; }
.kruimels a:hover { color: var(--accent); }

/* === Drie pijlers ===
   Niet elke dienst los opsommen maar drie routes, benoemd vanuit wat de bezoeker
   wil bereiken. De losse diensten staan eronder, als bewijs dat de route klopt. */
/* === Dienstraster: alles wat wij doen, elk met een icoon === */
.dienstraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dienstraster li { display: flex; }
/* Zes (of drie) kaarten: op een breed scherm altijd drie naast elkaar, dus twee nette rijen. */
@media (min-width: 900px) {
  .dienstraster--drie { grid-template-columns: repeat(3, 1fr); }
}
.dienst {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.75rem 1.5rem;
  border: var(--rand);
  background: var(--wit);
  text-decoration: none;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.dienst:hover { transform: translateY(-4px); border-color: var(--lijn-sterk); box-shadow: 0 1rem 2rem rgba(10, 10, 15, 0.07); }
/* Als kaart zonder link (op de dienstpagina's) beweegt hij niet mee. */
div.dienst:hover { transform: none; border-color: var(--lijn); box-shadow: none; }
/* Tekstblok en prijsvakken op de dienstpagina's. */
.dienstblok { text-align: center; }
.dienstblok h2 { margin-bottom: 1.25rem; }
.dienstblok p { margin-inline: auto; color: var(--inkt-zacht); }
.dienstblok .knop { margin-top: 1rem; }
.dienstblok .kaart-lijst { display: inline-block; margin-top: 0.5rem; text-align: left; }
.prijsrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1rem; margin: 2rem 0; text-align: left; }
.prijsvak { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.75rem; border: 2px solid var(--inkt); background: var(--wit); }
.prijsvak span { font-weight: 700; }
.prijsvak strong { font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.prijsvak small { font-size: 0.9rem; color: var(--inkt-zacht); }
.dienst img { width: 2.5rem; height: 2.5rem; margin-bottom: 1.1rem; }
.dienst h3 { margin-bottom: 0.4rem; font-size: 1.1rem; }
.dienst p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--inkt-zacht); }
@media (max-width: 599px) {
  /* Op een telefoon een compacte rij: icoon links, tekst rechts. */
  .dienstraster { gap: 0.6rem; }
  .dienst { display: grid; grid-template-columns: 2.25rem 1fr; column-gap: 1rem; padding: 1.1rem; }
  .dienst img { grid-row: span 2; width: 2.25rem; height: 2.25rem; margin: 0.15rem 0 0; }
}

.pijlers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: var(--rand); }
.pijler {
  display: flex;
  flex-direction: column;
  padding: 2.5rem 2rem 2.25rem;
  border-bottom: var(--rand);
  border-right: var(--rand);
  text-decoration: none;
  transition: background 0.3s ease;
}
.pijler:first-child { border-left: var(--rand); }
.pijler:hover { background: #F7F9FC; }
.pijler-nr {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.pijler h3 { margin-bottom: 0.6rem; }
.pijler > p { color: var(--inkt-zacht); font-size: 0.98rem; }
.pijler-wat {
  margin: 1.5rem 0 1.75rem;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  color: var(--inkt-zacht);
}
.pijler-wat li { padding-block: 0.4rem; border-top: var(--rand); }
.pijler-meer {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--accent);
}
.pijler-meer span { transition: transform 0.3s var(--soepel); }
.pijler:hover .pijler-meer span { transform: translateX(0.3rem); }

/* === Het scanblok: de voordeur ===
   Donker, zodat het midden op de pagina het zwaarste blok is. Dit is waar de meeste
   bezoekers binnenkomen, niet bij het offerteformulier. */
.scanblok { background: var(--inkt); color: var(--papier); }
.scanblok-binnen {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 4rem;
  align-items: center;
}
.scanblok h2 { margin-bottom: 1.25rem; }
.scanblok p { color: rgba(255, 255, 255, 0.72); }
.scanblok .label { color: var(--accent-licht); }
.scan-lijst { margin: 1.75rem 0 0; padding: 0; list-style: none; }
.scan-lijst li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.6rem;
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.82);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.scan-lijst li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 0.6rem;
  height: 1px;
  background: var(--accent-licht);
}
.scan-formulier {
  padding: 2.25rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.scan-formulier .veld label { color: var(--papier); }
.scan-formulier .veld input {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--papier);
}
.scan-formulier .veld input::placeholder { color: rgba(255, 255, 255, 0.4); }
.scan-formulier .veld input:focus { border-color: var(--accent-licht); }
.scan-klein { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); }

/* === Pakketten ===
   Elke kaart heeft zes onderdelen: naam, prijs, voor wie, lijst, noot en knop. Met
   subgrid delen de kaarten dezelfde rijen, dus elk onderdeel begint in beide
   kaarten op exact dezelfde hoogte, hoe lang de tekst ernaast ook is. */
.pakketten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 1.5rem; }
.pakket {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
  row-gap: 0;
  padding: 2.25rem 2rem;
  /* Beide kaarten dezelfde randdikte: scheelt anders één pixel in de uitlijning. */
  border: 2px solid var(--lijn);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.pakket:hover { transform: translateY(-4px); border-color: var(--lijn-sterk); }
/* Eén pakket krijgt nadruk; zonder aanbeveling kiest bijna niemand het middelste. */
.pakket--uitgelicht, .pakket--uitgelicht:hover { border-color: var(--inkt); }
/* Het label hangt rechtsboven in de hoek en doet niet mee in de rijen. */
.pakket-merk {
  position: absolute;
  top: -2px;
  right: -2px;
  padding: 0.4rem 0.85rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pakket h3 { margin-bottom: 0.5rem; }
.pakket-voor { color: var(--inkt-zacht); font-size: 0.98rem; margin-bottom: 1.5rem; }
.pakket-lijst { margin: 0 0 2rem; padding: 0; list-style: none; }
.pakket-lijst li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-size: 0.95rem;
  border-top: var(--rand);
}
.pakket-lijst li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 0.55rem;
  height: 1px;
  background: var(--accent);
}
.pakket .knop { align-self: end; justify-content: space-between; }

/* === Reviews naast elkaar === */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 1.5rem; }
.review { padding: 2rem; border: var(--rand); }
.review-sterren { color: var(--accent); letter-spacing: 0.1em; margin-bottom: 1rem; }
.review blockquote { margin: 0 0 1.25rem; font-size: 1.02rem; line-height: 1.6; }
.review figcaption { font-size: 0.9rem; color: var(--inkt-zacht); font-weight: 600; }

/* === Scrollanimatie ===
   Eén beweging voor alles wat in beeld komt: 30px omhoog, 0.6s. Groepen krijgen
   stapsgewijs vertraging via data-stap. */
/* Alleen verbergen als het script draait: zonder JavaScript hoort de pagina gewoon
   leesbaar te zijn, niet leeg. De .js-klasse wordt bovenin site.js gezet. */
.js .toon {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.toon.in-beeld { opacity: 1; transform: none; }
.toon[data-stap="1"] { transition-delay: 0.1s; }
.toon[data-stap="2"] { transition-delay: 0.2s; }
.toon[data-stap="3"] { transition-delay: 0.3s; }
.toon[data-stap="4"] { transition-delay: 0.4s; }
.toon[data-stap="5"] { transition-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
  .toon { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === Smaller dan tablet === */
@media (max-width: 899px) {
  :root { --ruimte-xxl: 5rem; --ruimte-xl: 3.5rem; }
  .inhoud { padding-inline: 1.5rem; }
  section { padding-block: var(--ruimte-xxl); }

  .nav { padding: 1rem 1.5rem; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(0.6rem); }
  .nav-knop { display: block; }
  .nav-menu {
    position: fixed;
    inset: 4.25rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem 1.5rem 2rem;
    background: var(--papier);
    border-bottom: var(--rand);
    transform: translateY(-120%);
    transition: transform 0.4s var(--soepel);
  }
  .nav--open .nav-menu { transform: none; }
  .nav-menu li { border-top: var(--rand); }
  .nav-menu a { display: flex; min-height: 3.25rem; padding: 0 0.75rem; font-size: 1.05rem; }
  .nav-menu .knop { justify-content: space-between; margin: 1rem 0 0; padding: 0 1.25rem; }
  /* Het paneel is met de diensten erbij langer dan een telefoonscherm: laat het scrollen. */
  .nav-menu { max-height: calc(100dvh - 4.25rem); overflow-y: auto; }
  .nav-sub-pijl { display: none; }
  .nav-submenu { padding-left: 1rem; }
  .nav-submenu a { min-height: 2.75rem; font-size: 0.98rem; font-weight: 600; }

  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-tekst { padding: 7.5rem 1.5rem 3rem; }
  .hero-beeld { min-height: 60vw; }

  .werkband { grid-template-columns: 1fr; gap: 1.75rem; }
  .werkband:nth-child(even) .werkband-beeld { order: 0; }
  .werkband + .werkband { margin-top: var(--ruimte-xl); }

  .pijlers { grid-template-columns: 1fr; }
  .pijler { border-left: var(--rand); }
  .scanblok-binnen { grid-template-columns: 1fr; gap: 2.5rem; }
  .scan-formulier { padding: 1.5rem; }
  .pakketten { grid-template-columns: 1fr; }
  .stap { grid-template-columns: 1fr; gap: 0.5rem; }
  .voet-boven { grid-template-columns: 1fr; gap: 2rem; }
  .veld-twee { grid-template-columns: 1fr; }
  .logos { gap: 2rem; }
  .logos img { height: 2rem; }
  .paginakop { padding-block: 8rem var(--ruimte-l); }
}

/* === Prijs in een pakket === */
.pakket-prijs { margin: 0 0 1.25rem; font-size: 0.95rem; color: var(--inkt-zacht); }
.pakket-prijs strong {
  display: block;
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--inkt);
}

/* === Aanbieding: smalle band direct onder de hero ===
   Blauw vlak, want dit is het enige op de pagina met een echte limiet. */
.aanbod { background: var(--accent); color: #fff; padding-block: 1.75rem; }
.aanbod-binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
}
.aanbod-merk {
  display: inline-block;
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.aanbod p { margin: 0; max-width: 46rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; }
.aanbod .aanbod-klein { margin-top: 0.4rem; font-size: 0.92rem; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, 0.88); }
.aanbod .knop { border-color: #fff; background: #fff; color: var(--inkt); flex: none; }
.aanbod .knop:hover { background: var(--inkt); border-color: var(--inkt); color: #fff; }

/* === Voor wie niet / voor wie wel === */
/* === Secties op gekleurd linnen ===
   De sectie draait de kleurtokens om, zodat koppen, tekst, labels en omlijnde knoppen
   vanzelf licht worden. Kaarten en voorbeelden zetten ze weer terug. */
.op-kleur {
  --inkt: #FFFFFF;
  --inkt-zacht: rgba(255, 255, 255, 0.84);
  --papier: #0a0a0f;
  border-top: 0;
  color: var(--inkt);
}
.op-kleur--blauw {
  --accent: #FFFFFF;
  background:
    linear-gradient(rgba(10, 20, 60, 0.22), rgba(10, 20, 60, 0.22)),
    #1E6FFF url('../images/achtergronden/blauw-linnen.webp') center / cover no-repeat;
}
.op-kleur--zwart {
  --accent: #6EA8FF;
  background: #0a0a0f url('../images/achtergronden/zwart-linnen.webp') center / cover no-repeat;
}
/* Bleed: het zwart schuift met ronde hoeken over het blauw heen, zodat het blauw
   in de hoeken doorloopt in plaats van recht af te breken. */
/* Bleed: de sectie schuift met ronde bovenhoeken over de vorige heen, over de volle
   breedte. De vorige kleur blijft in de twee hoeken zichtbaar. */
.bleed-links, .bleed-rechts {
  --bleed: clamp(2rem, 5vw, 4.5rem);
  position: relative;
  margin-top: calc(var(--bleed) * -1);
  border-radius: var(--bleed) var(--bleed) 0 0;
}
.voet.bleed-links { padding-top: calc(var(--ruimte-l) + var(--bleed) / 2); }
/* Ook onderaan rond: de sectie ligt dan als een los vlak over de volgende heen. */
.bleed-rond-onder {
  z-index: 2;
  margin-bottom: calc(var(--bleed) * -1);
  border-radius: var(--bleed);
}
.bleed-rond-onder + section { padding-top: calc(var(--ruimte-xxl) + clamp(2rem, 5vw, 4.5rem)); }
/* De sectie eronder schuift eroverheen; de inhoud hierboven houdt zijn ruimte. */
section:has(+ .bleed-links), section:has(+ .bleed-rechts) { padding-bottom: calc(var(--ruimte-xxl) + clamp(2rem, 5vw, 4.5rem)); }
main:has(+ .voet.bleed-links) > :last-child { padding-bottom: calc(var(--ruimte-xxl) + clamp(2rem, 5vw, 4.5rem)); }
/* Onder het blauwe eiland extra lucht voor de voettekst begint. */
main:has(+ .voet.bleed-links) > section.diep:last-child { padding-bottom: calc(var(--ruimte-xxl) * 1.5 + clamp(2rem, 5vw, 4.5rem)); }
.op-kleur .pakket,
.op-kleur .mini {
  --inkt: #0a0a0f;
  --inkt-zacht: #555555;
  --papier: #FFFFFF;
  --accent: #1E6FFF;
  background: #FFFFFF;
  color: var(--inkt);
}
/* Dit label heeft de inktkleur als vlak; op een donkere sectie is dat wit, dus de letters donker. */
.op-kleur .voorbeeld-label:not(.voorbeeld-label--accent) { color: #0a0a0f; }

/* Scanblok als eiland met smalle stroken links en rechts. Achter het eiland wisselt
   de ondergrond halverwege: boven het wit van de sectie erboven, onder het witte linnen
   van de sectie eronder. Het linnen staat vast aan het venster, zodat het zonder naad
   doorloopt in die volgende sectie. */
.scanblok--eiland {
  position: relative;
  padding-block: 0;
  padding-inline: clamp(1.25rem, 7.2vw, 6.3rem);
  background: none;
}
/* Boven het linnen van de dienstensectie, vanaf de helft dat van "Gebouwd voor". */
.scanblok--eiland::before, .scanblok--eiland::after { content: ''; position: absolute; left: 0; right: 0; }
.scanblok--eiland::before { top: 0; bottom: 50%; background: #F4F5F7 url('../images/achtergronden/wit-linnen-2.webp') center / cover no-repeat fixed; }
.scanblok--eiland::after { top: 50%; bottom: 0; background: linear-gradient(rgba(10, 10, 15, 0.12), rgba(10, 10, 15, 0.12)), #A4A7AC url('../images/achtergronden/grijs-linnen.webp') center / cover no-repeat fixed; }
/* Dienstensectie op de tweede variant van het witte linnen. */
.linnen-wit-2 { border-top: 0; background: #F4F5F7 url('../images/achtergronden/wit-linnen-2.webp') center / cover no-repeat fixed; }
.scanblok--eiland > .inhoud {
  position: relative;
  z-index: 1;
  max-width: none;
  padding-block: var(--ruimte-xxl);
  padding-inline: max(2rem, (100% - var(--maxw)) / 2 + 2rem);
  border-radius: clamp(2rem, 5vw, 4.5rem);
  background: var(--inkt);
}

/* Recent werk als blauw eiland. Achter het eiland: boven het witte linnen van de sectie
   erboven, vanaf de helft het zwarte linnen van de sectie eronder. Beide staan vast aan
   het venster en lopen daardoor zonder naad door in hun buren. */
.op-kleur--blauw.eiland-blauw {
  position: relative;
  padding-block: 0;
  padding-inline: clamp(1.25rem, 7.2vw, 6.3rem);
  background: none;
}
.eiland-blauw::before, .eiland-blauw::after { content: ''; position: absolute; left: 0; right: 0; }
.eiland-blauw::before { top: 0; bottom: 50%; background: linear-gradient(rgba(10, 10, 15, 0.12), rgba(10, 10, 15, 0.12)), #A4A7AC url('../images/achtergronden/grijs-linnen.webp') center / cover no-repeat fixed; }
.eiland-blauw::after { top: 50%; bottom: 0; background: #0a0a0f url('../images/achtergronden/zwart-linnen.webp') center / cover no-repeat fixed; }
.eiland-blauw > .inhoud {
  position: relative;
  z-index: 1;
  max-width: none;
  padding-block: var(--ruimte-xxl);
  padding-inline: max(2rem, (100% - var(--maxw)) / 2 + 2rem);
  border-radius: clamp(2rem, 5vw, 4.5rem);
  background: var(--accent-diep);
}
.eiland-blauw + .op-kleur--zwart { background-attachment: fixed; }

/* "Voor wie niet" als grijs eiland. Achter het eiland: boven het zwarte linnen van de
   pakketten, vanaf de helft het wit van de stappensectie eronder. */
.linnen-sectie.eiland-grijs {
  position: relative;
  padding-block: 0;
  padding-inline: clamp(1.25rem, 7.2vw, 6.3rem);
  background: none;
}
/* De haarlijn boven de volgende sectie zou dwars door de onderhoeken van het eiland lopen. */
.eiland-grijs + section { border-top: 0; }
.eiland-grijs::before, .eiland-grijs::after { content: ''; position: absolute; left: 0; right: 0; }
.eiland-grijs::before { top: 0; bottom: 50%; background: #0a0a0f url('../images/achtergronden/zwart-linnen.webp') center / cover no-repeat fixed; }
.eiland-grijs::after { top: 50%; bottom: 0; background: var(--wit); }
.eiland-grijs > .inhoud {
  position: relative;
  z-index: 1;
  max-width: none;
  padding-block: var(--ruimte-xl);
  padding-inline: max(2rem, (100% - var(--maxw)) / 2 + 2rem);
  border-radius: clamp(2rem, 5vw, 4.5rem);
  background: #C9CDD4;
}

/* "Gebouwd voor" op grijs linnen, met een donkere gloed eroverheen en vast aan het
   venster, zodat het doorloopt in de stroken naast de eilanden erboven en eronder. */
.linnen-wit {
  border-top: 0;
  background: linear-gradient(rgba(10, 10, 15, 0.12), rgba(10, 10, 15, 0.12)), #A4A7AC url('../images/achtergronden/grijs-linnen.webp') center / cover no-repeat fixed;
}
.linnen-wit .label { color: var(--accent-diep); }
.linnen-wit .review:not(.review--wacht) { background: var(--wit); }
/* Op het donkerdere grijs: de onderweg-kaarten en de regel eronder in de inktkleur. */
.linnen-wit .review--wacht { border-color: rgba(10, 10, 15, 0.45); color: var(--inkt); }
.linnen-wit .review--wacht p, .linnen-wit .inhoud > p { color: var(--inkt) !important; }

/* Eiland met de veelgestelde vragen, op wit linnen. Het linnen staat vast aan het venster, net als bij het zwarte
   eiland eronder; zo lopen de twee secties zonder naad in elkaar over. */
.eiland-wit {
  border-top: 0;
  padding-bottom: 0;
  padding-inline: clamp(1rem, 3vw, 2rem);
  background: #F4F5F7 url('../images/achtergronden/wit-linnen.webp') center / cover no-repeat fixed;
}
/* Even breed als het zwarte eiland eronder; de vragen zelf blijven op leesbreedte. */
.eiland-wit > .inhoud > * { max-width: 48rem; margin-inline: auto; }
.eiland-wit > .inhoud {
  max-width: calc(var(--maxw) - 4rem);
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 5vw, 4rem);
  --inkt: #FFFFFF;
  --inkt-zacht: rgba(255, 255, 255, 0.8);
  --accent: #6EA8FF;
  background: #0a0a0f;
  border-radius: 1.5rem;
  color: var(--inkt);
}
/* Zwart eiland: de haarlijnen tussen de vragen licht in plaats van grijs. */
.eiland-wit .vraag, .eiland-wit .vraag:last-of-type { border-color: rgba(255, 255, 255, 0.18); }
.eiland-wit + section.diep:last-child { background-attachment: fixed; }

/* Grijs linnen als achtergrond, met een lichte waas zodat koppen en labels leesbaar blijven. */
.linnen-sectie {
  border-top: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),
    #B4B7BC url('../images/achtergronden/grijs-linnen.webp') center / cover no-repeat;
}
.linnen-sectie .label { color: var(--accent-diep); }
.linnen-sectie .keuze-kaart:not(.keuze-kaart--wel) { background: var(--wit); border-color: var(--wit); }
.keuze { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.keuze-kaart { display: flex; flex-direction: column; padding: 2rem; border: var(--rand); }
.keuze-kaart h3 { margin-bottom: 0.75rem; }
.keuze-kaart p { color: var(--inkt-zacht); font-size: 0.98rem; }
.keuze-soort {
  margin-bottom: 1.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}
.keuze-kaart--wel { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.keuze-kaart--wel p { color: rgba(255, 255, 255, 0.78); }
.keuze-kaart--wel .keuze-soort { color: var(--accent-licht); }
.keuze-kaart--wel .knop { margin-top: auto; align-self: flex-start; }

/* === Ook mogelijk: extra's die niet met de drie routes concurreren === */
.ook { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 0; border-top: var(--rand); }
.ook-item { padding: 1.5rem 1.5rem 1.5rem 0; border-bottom: var(--rand); }
.ook-item h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.ook-item p { font-size: 0.95rem; color: var(--inkt-zacht); }

/* === Review die nog moet komen === */
.review--wacht {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-style: dashed;
  color: var(--inkt-zacht);
}
.review--wacht strong { display: block; margin-bottom: 0.4rem; color: var(--inkt); font-size: 1.05rem; letter-spacing: -0.02em; }
.review--wacht p { font-size: 0.95rem; }

/* === Meetrapport === */
.wissel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
  padding-block: 2rem;
  border-block: var(--rand);
}
.wissel-partij span { display: block; }
.wissel-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--inkt-zacht); }
.wissel-naam { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em; }
.wissel-tech { font-size: 0.92rem; color: var(--inkt-zacht); }
.wissel-pijl { font-size: 1.75rem; color: var(--accent); }

.balken { display: grid; gap: 0.9rem; margin-block: 1.75rem; }
.balk-rij { display: grid; grid-template-columns: 7rem 1fr 5.5rem; align-items: center; gap: 1rem; font-size: 0.95rem; }
.balk { height: 0.85rem; background: var(--lijn); }
.balk span { display: block; height: 100%; background: var(--inkt-zacht); }
.balk--nieuw span { background: var(--accent); }
.balk-waarde { font-weight: 700; text-align: right; }

.rapport { border-top: var(--rand); }
.rapport:last-of-type { border-bottom: var(--rand); }
.rapport summary {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.75rem;
  cursor: pointer;
  list-style: none;
}
.rapport summary::-webkit-details-marker { display: none; }
.rapport summary h2 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }
.rapport-label { display: block; margin-bottom: 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.rapport-teaser { font-weight: 700; font-size: 0.95rem; color: var(--inkt-zacht); white-space: nowrap; }
.rapport summary::after {
  content: '';
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-0.15rem, -0.15rem);
  transition: transform 0.3s var(--soepel);
}
.rapport[open] summary::after { transform: rotate(-135deg) translate(-0.15rem, -0.15rem); }
.rapport-inhoud { padding-bottom: 2.25rem; }
.rapport-inhoud > p { color: var(--inkt-zacht); }
.rapport-slot { margin-top: 1.5rem; font-size: 1.05rem; color: var(--inkt); }

.tabel-wikkel { overflow-x: auto; margin-block: 1.5rem; }
.meettabel { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: 0.95rem; }
.meettabel th, .meettabel td { padding: 0.8rem 1rem 0.8rem 0; text-align: left; border-bottom: var(--rand); }
.meettabel thead th { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--inkt-zacht); }
.meettabel tbody th { font-weight: 600; }
.meettabel .winst { font-weight: 700; color: var(--accent); white-space: nowrap; }
.meettabel .uitschieter th, .meettabel .uitschieter td { background: #F3F7FF; }
.meettabel tfoot th, .meettabel tfoot td { font-weight: 800; border-bottom: 0; border-top: 2px solid var(--inkt); }
.rij-noot { font-weight: 400; color: var(--inkt-zacht); }

.eerlijk { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.eerlijk h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.eerlijk p { font-size: 0.95rem; color: var(--inkt-zacht); }
.methode { margin: 0; padding: 0; list-style: none; }
.methode li { position: relative; padding: 0.6rem 0 0.6rem 1.5rem; border-top: var(--rand); color: var(--inkt-zacht); }
.methode li::before { content: ''; position: absolute; left: 0; top: 1.2em; width: 0.55rem; height: 1px; background: var(--accent); }

@media (max-width: 899px) {
  .keuze { grid-template-columns: 1fr; }
  .rapport summary { grid-template-columns: 1fr auto; }
  .rapport-teaser { grid-column: 1; grid-row: 2; }
  .balk-rij { grid-template-columns: 5.5rem 1fr 4.5rem; gap: 0.6rem; }
}

/* === Lopend logolint ===
   Smaller dan de pagina en aan beide kanten uitvloeiend. Het lint loopt alleen als
   site.js de kopieën heeft neergezet (.logolint--loopt); anders staan de logo's
   gewoon naast elkaar en breken ze netjes af. */
.logolint {
  overflow: hidden;
  max-width: 62rem;
  margin: 0 auto 4rem;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.logolint-spoor { display: flex; }
.logolint-groep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem 4rem;
}
.logolint img { height: 2.75rem; width: auto; max-width: 10rem; object-fit: contain; pointer-events: none; }
.logolint--loopt .logolint-spoor { width: max-content; animation: logolint 80s linear infinite; }   /* lint: bewust linear */
.logolint--loopt .logolint-groep { flex: none; flex-wrap: nowrap; padding-right: 4rem; }
@keyframes logolint { to { transform: translateX(-50%); } }

/* === Noot en infoknop onder een pakket === */
/* Tekst en knop staan los van elkaar: stond de knop in de alinea, dan duwde hij de
   laatste tekstregel verder van de rest af. De knop staat rechts uitgelijnd. */
.pakket-noot { display: flex; flex-direction: column; gap: 0.9rem; margin: 0 0 1.75rem; }
.pakket-noot p { margin: 0; max-width: none; font-size: 0.9rem; line-height: 1.6; color: var(--inkt-zacht); }
.info-knop {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem 0.45rem 0.5rem;
  border: 1px solid var(--lijn-sterk);
  background: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--inkt);
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.info-knop:hover { border-color: var(--accent); background: #EEF3FC; color: var(--accent-diep); }
.info-knop-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  font-style: italic;
}

/* === Dialoog === */
.dialoog {
  width: min(46rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 2.5rem;
  border: 0;
  background: var(--wit);
  color: var(--inkt);
  overflow-y: auto;
}
.dialoog::backdrop { background: rgba(10, 10, 15, 0.6); }
.dialoog[open] { animation: dialoog-in 0.3s ease-out both; }
@keyframes dialoog-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.dialoog h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1.75rem; padding-right: 2.5rem; }
.dialoog h3 { font-size: 1.05rem; }
.dialoog-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.dialoog-slot { margin-top: 1.75rem; padding-top: 1.25rem; border-top: var(--rand); font-size: 0.95rem; color: var(--inkt-zacht); max-width: none; }
.dialoog-sluit {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--lijn-sterk);
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--inkt);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.dialoog-sluit:hover { background: var(--inkt); border-color: var(--inkt); color: #fff; }
@media (max-width: 599px) {
  .dialoog { padding: 1.75rem 1.25rem; }
  .dialoog-kolommen { grid-template-columns: 1fr; gap: 1.5rem; }
}
.dialoog-maand { margin-top: 1.75rem; padding-top: 1.25rem; border-top: var(--rand); }

/* === Levend voorbeeld bovenin een pakketkaart ===
   De echte klantsite in een iframe, op desktopbreedte gerenderd en teruggeschaald
   naar de kaartbreedte. Schaalfactor en hoogte komen uit site.js. */
.voorbeelden { margin-top: var(--ruimte-xl); }
.voorbeelden-kop { font-size: clamp(1.5rem, 2.4vw, 2rem); }
/* De voorbeelden zitten achter een knop; open klapt de pijl om. */
.voorbeelden[hidden] { display: none; }
.uitklap-knop { margin-top: 2rem; text-align: center; }
.uitklap-knop .knop-pijl { transition: transform 0.3s var(--soepel); }
.uitklap-knop .knop:hover .knop-pijl { transform: translateY(0.2rem); }
.uitklap-knop [aria-expanded="true"] .knop-pijl,
.uitklap-knop [aria-expanded="true"]:hover .knop-pijl { transform: rotate(180deg); }
/* Zelfde kolommen als de pakketkaarten erboven, zodat elk voorbeeld onder zijn pakket staat. */
.voorbeelden-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 2.5rem 1.5rem; }
.voorbeeld { margin: 0; }
.voorbeeld-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; margin: 0 0 0.9rem; font-weight: 700; }
.voorbeeld-label {
  padding: 0.35rem 0.75rem;
  background: var(--inkt);
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.voorbeeld-label--accent { background: var(--accent-diep); }
.voorbeeld figcaption { margin-top: 0.75rem; font-size: 0.92rem; color: var(--inkt-zacht); text-align: center; text-wrap: balance; }
.mini { position: relative; overflow: hidden; background: var(--wit); border: var(--rand); }
.mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mini-doek { position: relative; width: 100%; }
.mini-frame { position: absolute; top: 0; left: 0; border: 0; transform-origin: top left; }
/* Jasper: de doos scrolt, de iframe is één lange pagina. Geen overscroll-behavior:
   aan het eind van het voorbeeld moet de pagina gewoon doorlopen. */
.mini--jasper { aspect-ratio: 4 / 3; overflow-y: auto; }
.mini--jasper .mini-frame { pointer-events: none; }
.mini--jasper::-webkit-scrollbar { width: 11px; }
.mini--jasper::-webkit-scrollbar-track { background: transparent; }
.mini--jasper::-webkit-scrollbar-thumb { background: var(--lijn-sterk); border: 3px solid transparent; background-clip: content-box; }
/* Marilyn: de iframe scrolt zichzelf, deze doos klemt hem alleen af op 4:3. */
.mini--marilyn { aspect-ratio: 4 / 3; }
/* Op een touchscreen zou scrollen in zo'n klein venster de paginascroll kapen. */
@media (max-width: 768px) {
  .mini--jasper { overflow-y: hidden; }
  .mini--marilyn .mini-frame { pointer-events: none; }
  .scrolhint { display: none; }   /* daar scrolt het voorbeeld niet, dus niet beloven */
}

/* === Eilanden op de dienstpagina's ===
   Zelfde opzet als de eilanden op home: een vlak met ronde hoeken en stroken opzij.
   Achter het eiland wisselt de ondergrond halverwege, van de sectie erboven (--van-…)
   naar de sectie eronder (--naar-…). Een andere kleur kiezen is een andere klasse. */
.eiland-sectie {
  position: relative;
  padding-block: 0;
  padding-inline: clamp(1.25rem, 7.2vw, 6.3rem);
  border-top: 0;
}
.eiland-sectie::before, .eiland-sectie::after { content: ''; position: absolute; left: 0; right: 0; }
.eiland-sectie::before { top: 0; bottom: 50%; }
.eiland-sectie::after { top: 50%; bottom: 0; }
.eiland-sectie--van-linnen::before { background: #F4F5F7 url('../images/achtergronden/wit-linnen-2.webp') center / cover no-repeat fixed; }
.eiland-sectie--naar-grijs::after,
.eiland-sectie--van-grijs::before { background: #E3E6EB; }
.eiland-sectie--naar-linnen-wit::after { background: #F4F5F7 url('../images/achtergronden/wit-linnen.webp') center / cover no-repeat fixed; }
.eiland-sectie + section { border-top: 0; }
.eiland-sectie + section.diep:last-child { background-attachment: fixed; }
/* Ruimte boven het eiland, zodat de kleur erachter als band zichtbaar blijft. */
.eiland-sectie--los { padding-top: var(--ruimte-xl); }
.eiland-sectie > .inhoud {
  position: relative;
  z-index: 1;
  max-width: none;
  padding-block: var(--ruimte-xxl);
  padding-inline: max(2rem, (100% - var(--maxw-smal)) / 2 + 2rem);
  border-radius: clamp(2rem, 5vw, 4.5rem);
  background: var(--accent-diep);
  color: #FFFFFF;
}
.eiland-sectie .label { color: #FFFFFF; }
.eiland-sectie .dienstblok p { color: rgba(255, 255, 255, 0.9); }
.eiland-sectie .prijsvak { border-color: #FFFFFF; color: #0a0a0f; }
.eiland-sectie .kaart-lijst li { color: #FFFFFF; }
.eiland-sectie .knop--wit:hover { background: var(--inkt); border-color: var(--inkt); color: #FFFFFF; }
/* Zwarte variant, met de volle inhoudsbreedte voor het kaartenraster. */
.eiland-sectie--zwart > .inhoud { padding-inline: max(2rem, (100% - var(--maxw)) / 2 + 2rem); background: #0a0a0f; }
.eiland-sectie--zwart .label { color: var(--accent-licht); }
/* Kaarten in een eiland blijven wit met donkere tekst. */
.eiland-sectie .dienst { color: #0a0a0f; }

/* Gevouwen papier, wit. Vast aan het venster, zodat het zonder naad doorloopt in de
   strook naast het eiland eronder. */
.papier-vouw-wit { border-top: 0; background: #F4F5F7 url('../images/achtergronden/wit-vouw.webp') center / cover no-repeat fixed; }
.eiland-sectie--van-vouw::before { background: #F4F5F7 url('../images/achtergronden/wit-vouw.webp') center / cover no-repeat fixed; }

/* De logostrook is rondom rond: onderaan schuift hij op dezelfde manier over de
   volgende sectie heen als bovenaan over de kop. */
.kop-logos { margin-bottom: calc(var(--kop-rond) * -1); border-radius: var(--kop-rond); }
.kop-logos + section { padding-top: calc(var(--ruimte-xxl) + clamp(2rem, 5vw, 4.5rem)); }

/* Gevouwen papier in grijs (eerste sectie) en in wit (de band tussen de twee eilanden). */
.papier-vouw-grijs { border-top: 0; background: #C2C5CA url('../images/achtergronden/grijs-vouw.webp') center / cover no-repeat fixed; }
.papier-vouw-grijs .label { color: var(--accent-diep); }
.eiland-sectie--van-vouw-grijs::before { background: #C2C5CA url('../images/achtergronden/grijs-vouw.webp') center / cover no-repeat fixed; }
.eiland-sectie--naar-vouw-wit::after,
.eiland-sectie--van-vouw-wit::before { background: #F4F5F7 url('../images/achtergronden/wit-vouw.webp') center / cover no-repeat fixed; }
/* Het grijze papier loopt door achter het eerste eiland, tot halverwege het tweede. */
.eiland-sectie--naar-vouw-grijs::after { background: #C2C5CA url('../images/achtergronden/grijs-vouw.webp') center / cover no-repeat fixed; }

/* Het blauwe eiland op de dienstpagina's is even breed als het eiland "Aan de slag". */
.eiland-sectie:not(.eiland-sectie--zwart) > .inhoud {
  max-width: calc(var(--maxw) - 4rem);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 4.5rem);
}
.eiland-sectie .dienstblok { max-width: 48rem; margin-inline: auto; }

/* Het afsluitende eiland heeft dezelfde ronding als de andere eilanden. */
main > section.diep:last-child > .inhoud { border-radius: clamp(2rem, 5vw, 4.5rem); }

/* Zwart eiland na een witte sectie: boven wit in plaats van papier. */
.eiland-sectie--van-wit::before { background: var(--wit); }
/* Een sectie die met ronde hoeken over de vorige schuift heeft geen haarlijn bovenaan. */
.bleed-links, .bleed-rechts { border-top: 0; }

/* === Stappenrij: vier genummerde kaarten in een trap van boven naar beneden.
   Kaart 1 links, kaart 2 rechts en beginnend op het onderste derde van kaart 1, en zo
   verder. Het raster heeft negen gelijke rijen; elke kaart beslaat er drie en begint
   twee rijen na de vorige. De pijlen staan in de vrije hoeken. === */
.stappenrij { display: grid; gap: 0.5rem; max-width: 60rem; margin: 0 auto; padding: 1.5rem 0 0; list-style: none; }
.stap-kort { position: relative; padding: 3rem 2rem 1.75rem; border: 2px solid var(--inkt); background: var(--wit); }
/* Het nummer hangt als blauw blok half over de bovenrand. */
.stap-kort-nr {
  position: absolute;
  top: -1.5rem;
  left: 1.75rem;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  background: var(--accent);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 1.3rem;
}
.stap-kort h3 { margin-bottom: 0.6rem; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.stap-kort p { margin: 0; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.55; color: var(--inkt-zacht); }
.stappenrij-pijl { display: grid; place-items: center; padding-block: 0.5rem 1.75rem; color: var(--accent); }
.stappenrij-pijl svg {
  width: 3rem;
  height: 2.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (min-width: 900px) {
  .stappenrij { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(9, 1fr); gap: 0 7.5rem; }
  .stappenrij > :nth-child(1) { grid-area: 1 / 1 / span 3 / auto; }
  .stappenrij > :nth-child(3) { grid-area: 3 / 2 / span 3 / auto; }
  .stappenrij > :nth-child(5) { grid-area: 5 / 1 / span 3 / auto; }
  .stappenrij > :nth-child(7) { grid-area: 7 / 2 / span 3 / auto; }
  /* Elke pijl staat in de tussenruimte, op de rij waar twee opeenvolgende kaarten naast
     elkaar liggen: hij vertrekt bij de ene kaart en wijst naar de volgende. */
  .stappenrij > :nth-child(2) { grid-area: 3 / 1 / span 1 / span 2; }
  .stappenrij > :nth-child(4) { grid-area: 5 / 1 / span 1 / span 2; }
  .stappenrij > :nth-child(6) { grid-area: 7 / 1 / span 1 / span 2; }
  .stappenrij-pijl { padding: 0; place-self: center; pointer-events: none; }
  /* De eerste en derde pijl bollen omhoog, de middelste omlaag: zo wisselt de boog af. */
  .stappenrij-pijl svg { width: 5.5rem; height: 4.4rem; transform: scaleY(-1); }
  .stappenrij-pijl--terug svg { transform: scaleX(-1); }
}

/* Een witte sectie die over de vorige schuift heeft een eigen wit vlak nodig; zonder
   achtergrond schijnt de sectie eronder door de ronde hoeken heen. */
section.vlak.bleed-links { background-color: var(--wit); }

/* Afsluitende sectie op wit gevouwen papier in plaats van linnen. */
main > section.diep.diep--vouw:last-child { background: #F4F5F7 url('../images/achtergronden/wit-vouw.webp') center / cover no-repeat fixed; }

/* Bij het zwarte eiland ligt de wissel van ondergrond hoger: op ruim een derde in plaats van halverwege. */
.eiland-sectie--zwart::before { bottom: 64%; }
.eiland-sectie--zwart::after { top: 36%; }

/* Veertien iconen in plaats van acht. Op een gewoon scherm blijven het de acht aan de
   randen; vanaf een breed scherm verdelen alle veertien zich over de hele breedte.
   Wat achter de inhoud valt is daar onzichtbaar. inset: boven, rechts, onder, links. */
.sprenkels img:nth-child(n + 9) { display: none; }
@media (min-width: 1500px) {
  .sprenkels--breed img:nth-child(n + 9) { display: block; }
  .sprenkels--breed img:nth-child(1)  { inset: 6% auto auto 3%;   width: 7rem; transform: rotate(-12deg); }
  .sprenkels--breed img:nth-child(2)  { inset: 60% auto auto 6%;  width: 8rem; transform: rotate(10deg); }
  .sprenkels--breed img:nth-child(3)  { inset: 28% auto auto 13%; width: 6rem; transform: rotate(21deg); }
  .sprenkels--breed img:nth-child(4)  { inset: 82% auto auto 16%; width: 7rem; transform: rotate(-6deg); }
  .sprenkels--breed img:nth-child(5)  { inset: 9% auto auto 23%;  width: 5rem; transform: rotate(9deg); }
  .sprenkels--breed img:nth-child(6)  { inset: 52% auto auto 25%; width: 6rem; transform: rotate(-11deg); }
  .sprenkels--breed img:nth-child(7)  { inset: 88% auto auto 36%; width: 5rem; transform: rotate(13deg); }
  .sprenkels--breed img:nth-child(8)  { inset: 3% auto auto 45%;  width: 5rem; transform: rotate(-9deg); }
  .sprenkels--breed img:nth-child(9)  { inset: 90% 40% auto auto; width: 5rem; transform: rotate(-14deg); }
  .sprenkels--breed img:nth-child(10) { inset: 12% 25% auto auto; width: 6rem; transform: rotate(-14deg); }
  .sprenkels--breed img:nth-child(11) { inset: 62% 23% auto auto; width: 5rem; transform: rotate(17deg); }
  .sprenkels--breed img:nth-child(12) { inset: 32% 13% auto auto; width: 7rem; transform: rotate(-18deg); }
  .sprenkels--breed img:nth-child(13) { inset: 84% 12% auto auto; width: 6rem; transform: rotate(12deg); }
  .sprenkels--breed img:nth-child(14) { inset: 8% 3% auto auto;   width: 8rem; transform: rotate(14deg); }
}

/* Mat glas, grijs: voor de afsluitende sectie en de strook naast het eiland erboven. */
main > section.diep.diep--matglas-grijs:last-child,
.eiland-sectie--naar-matglas-grijs::after { background: #C2C5CA url('../images/achtergronden/grijs-matglas.webp') center / cover no-repeat fixed; }

/* Mat glas, wit. */
main > section.diep.diep--matglas-wit:last-child,
.eiland-sectie--naar-matglas-wit::after { background: #F4F6FA url('../images/achtergronden/wit-matglas.webp') center / cover no-repeat fixed; }

/* Gekreukt papier, grijs. */
main > section.diep.diep--kreukel-grijs:last-child,
.eiland-sectie--naar-kreukel-grijs::after { background: #C2C5CA url('../images/achtergronden/grijs-kreukel.webp') center / cover no-repeat fixed; }

/* De wissel van ondergrond precies halverwege het eiland zelf (de ruimte boven het
   eiland telt niet mee). */
.eiland-sectie--wissel-midden::before { bottom: calc((100% - var(--ruimte-xl)) / 2); }
.eiland-sectie--wissel-midden::after { top: calc(var(--ruimte-xl) + (100% - var(--ruimte-xl)) / 2); }

/* Mat glas, zwart: een donkere sectie met witte kop; de kaarten erin blijven wit. */
.matglas-zwart,
.eiland-sectie--van-matglas-zwart::before { background: #0a0a0f url('../images/achtergronden/zwart-matglas.webp') center / cover no-repeat fixed; }
.matglas-zwart { border-top: 0; color: #FFFFFF; }
.matglas-zwart .label { color: var(--accent-licht); }
.matglas-zwart .dienst { color: #0a0a0f; }

/* Wit linnen ook boven een eiland, zodat het als één vlak doorloopt. */
.eiland-sectie--van-linnen-wit::before { background: #F4F5F7 url('../images/achtergronden/wit-linnen.webp') center / cover no-repeat fixed; }

/* De wissel achter het eiland is rond in plaats van recht: de onderste ondergrond schuift
   met ronde bovenhoeken over de bovenste heen, zoals de logostrook over de kop. */
.eiland-sectie--wissel-rond { --wissel-rond: clamp(2rem, 5vw, 4.5rem); }
.eiland-sectie--wissel-rond::before { bottom: calc(50% - var(--wissel-rond)); }
.eiland-sectie--wissel-rond::after { border-radius: var(--wissel-rond) var(--wissel-rond) 0 0; }

/* Meer ruimte boven een eiland dan de gewone tussenruimte. */
.eiland-sectie--los-ruim { padding-top: calc(var(--ruimte-xxl) * 1.5); }

/* Kraftpapier, grijs. */
main > section.diep.diep--kraft-grijs:last-child,
.eiland-sectie--naar-kraft-grijs::after { background: #BFC2C7 url('../images/achtergronden/grijs-kraft.webp') center / cover no-repeat fixed; }
/* De wissel op twee derde van het eiland zelf; de ruime tussenruimte erboven telt niet mee. */
.eiland-sectie--wissel-tweederde { --boven: calc(var(--ruimte-xxl) * 1.5); }
.eiland-sectie--wissel-tweederde::before { bottom: calc((100% - var(--boven)) / 3); }
.eiland-sectie--wissel-tweederde::after { top: calc(var(--boven) + (100% - var(--boven)) * 2 / 3); }
.eiland-sectie--van-kraft-grijs::before { background: #BFC2C7 url('../images/achtergronden/grijs-kraft.webp') center / cover no-repeat fixed; }

/* Grijs kraftpapier als gewone sectie-achtergrond. */
.kraft-grijs { border-top: 0; background: #BFC2C7 url('../images/achtergronden/grijs-kraft.webp') center / cover no-repeat fixed; }

/* Wit gekreukt papier onder het zwarte eiland en in de slotsectie. */
main > section.diep.diep--kreukel-wit:last-child,
.eiland-sectie--naar-kreukel-wit::after { background: #F4F5F7 url('../images/achtergronden/wit-kreukel.webp') center / cover no-repeat fixed; }

/* Zwart leer als sectie-achtergrond. */
.leer-zwart { border-top: 0; background: #0a0a0f url('../images/achtergronden/zwart-leer.webp') center / cover no-repeat fixed; }

/* === Scanpagina: zwart leer loopt door tot de helft van de stappen, daarna gaat het in een rechte lijn
   over in blauw leer, dat doorloopt achter de veelgestelde vragen. === */
.scan-stappen { position: relative; border-top: 0; background: #0a0a0f url('../images/achtergronden/zwart-leer.webp') center / cover no-repeat fixed; }
.scan-stappen::after {
  content: '';
  position: absolute;
  inset: 50% 0 0;
  background: #1559D6 url('../images/achtergronden/blauw-leer.webp') center / cover no-repeat fixed;
}
/* De stappen staan op een wit paneel; links en rechts ervan blijft het leer zichtbaar. */
.scan-stappen { padding-inline: clamp(1.25rem, 7.2vw, 6.3rem); padding-bottom: var(--ruimte-l); }
.scan-stappen > .inhoud {
  position: relative;
  z-index: 1;
  overflow: hidden;
  max-width: none;
  padding-block: var(--ruimte-xl);
  border-radius: clamp(2rem, 5vw, 4.5rem);
  background: var(--wit);
}
.scan-stappen > .inhoud > :not(.sprenkels) { position: relative; z-index: 1; }
/* Grijze iconen om de vier stappen heen: acht langs de randen, twee in de vrije hoeken van de trap. */
.scan-stappen .sprenkels img { filter: brightness(0); opacity: 0.1; }
.scan-stappen .sprenkels img:nth-child(2)  { inset: 20% 3% auto auto; width: 6rem; }
.scan-stappen .sprenkels img:nth-child(9)  { display: block; inset: 27% 24% auto auto; width: 5rem; transform: rotate(-10deg); }
.scan-stappen .sprenkels img:nth-child(10) { display: block; inset: auto auto 7% 24%;  width: 5rem; transform: rotate(15deg); }
.leer-blauw {
  --inkt: #FFFFFF;
  --inkt-zacht: rgba(255, 255, 255, 0.88);
  border-top: 0;
  background: #1559D6 url('../images/achtergronden/blauw-leer.webp') center / cover no-repeat fixed;
  color: #FFFFFF;
}
.leer-blauw .label { color: #FFFFFF; }
.leer-blauw .vraag, .leer-blauw .vraag:last-of-type { border-color: rgba(255, 255, 255, 0.3); }
.leer-blauw .vraag summary::after { border-color: #FFFFFF; }

/* Wit leer in de slotsectie. */
main > section.diep.diep--leer-wit:last-child { background: #F4F5F7 url('../images/achtergronden/wit-leer.webp') center / cover no-repeat fixed; }
/* De witte slotsectie schuift met ronde hoeken over het blauwe leer heen. De klasse heet nog
   naar de eerdere variant; de vragen staan er ook dichter op het witte paneel. */
.leer-blauw--rond-onder { padding-top: var(--ruimte-l); padding-bottom: calc(var(--ruimte-xxl) + clamp(2rem, 5vw, 4.5rem)); }
main > .leer-blauw--rond-onder + section.diep:last-child {
  position: relative;
  margin-top: calc(-1 * clamp(2rem, 5vw, 4.5rem));
  border-radius: clamp(2rem, 5vw, 4.5rem) clamp(2rem, 5vw, 4.5rem) 0 0;
}
/* Het slotblok in zwart in plaats van blauw. */
main > section.diep.diep--eiland-zwart:last-child > .inhoud { background: #0a0a0f; }
main > section.diep.diep--eiland-zwart:last-child .label { color: var(--accent-licht); }
main > section.diep.diep--eiland-zwart:last-child .knop--wit:hover { background: var(--accent); border-color: var(--accent); }
/* Op het leer is het formulier bijna dicht, zodat de structuur er niet doorheen loopt. */
.leer-zwart .scan-formulier { background: rgba(10, 10, 15, 0.88); }

/* === Portfolio: kleinere kaarten, drie naast elkaar, met een liggend beeld van elke site. === */
.raster--werk { grid-template-columns: 1fr; }
.raster--werk .werkkaart-media img { display: block; height: auto; aspect-ratio: 16 / 10; }
.raster--werk .werkkaart-body { padding: 1.5rem; }
.raster--werk .werkkaart-body h3 { font-size: 1.35rem; }
@media (min-width: 700px) { .raster--werk { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .raster--werk { grid-template-columns: repeat(3, 1fr); } }

/* Elke groep van een lopend lint is minstens zo breed als de strook zelf en de logo's
   verdelen zich daarover: alles past op één scherm en niets staat dubbel in beeld.
   De halve tussenruimte aan beide kanten houdt de naad gelijk aan de rest. */
.logolint--loopt .logolint-groep { min-width: var(--lint-breed, 100%); justify-content: space-around; padding-inline: 2rem; }
/* Het laatste vak van het portfolio vult de rij als er twee kaarten op staan. */
@media (min-width: 1100px) { .raster--werk > :last-child:nth-child(3n + 2) { grid-column: span 2; } }
/* De vaste tussenruimte is klein; de echte ruimte komt uit het verdelen over de strook.
   Zo past de hele rij ook op een gewoon laptopscherm in beeld. */
.logolint { max-width: 76rem; }
.logolint--loopt .logolint-groep,
.kop-logos .logolint--loopt .logolint-groep { gap: 2rem 2.5rem; padding-inline: 1.25rem; }
/* De link staat altijd onderaan de kaart, hoe lang de tekst erboven ook is. */
.raster--werk .werkkaart { display: flex; flex-direction: column; }
.raster--werk .werkkaart-body { display: flex; flex: 1; flex-direction: column; }
.raster--werk .werkkaart-link { margin-top: auto; padding-top: 1.25rem; }

/* Grijs aquarelpapier als sectie-achtergrond. */
.aquarel-grijs { border-top: 0; background: #B5B6BA url('../images/achtergronden/grijs-aquarel.webp') center / cover no-repeat fixed; }

/* Portfolio: grijs leer in de slotsectie, dat met ronde hoeken over het zwarte leer schuift. */
main > section.diep.diep--leer-grijs:last-child {
  position: relative;
  margin-top: calc(-1 * clamp(2rem, 5vw, 4.5rem));
  border-radius: clamp(2rem, 5vw, 4.5rem) clamp(2rem, 5vw, 4.5rem) 0 0;
  background: #B0B2B5 url('../images/achtergronden/grijs-leer.webp') center / cover no-repeat fixed;
}
.leer-zwart:has(+ .diep--leer-grijs) { padding-bottom: calc(var(--ruimte-xxl) + clamp(2rem, 5vw, 4.5rem)); }

/* Portfolio zonder hero: de logostrook staat direct onder de vaste kopbalk en de
   paginatitel staat op het leer boven de kaarten. */
.kop-logos--los { margin-top: 5rem; border-radius: 0 0 var(--kop-rond) var(--kop-rond); }
.werk-kop { margin-bottom: 3rem; text-align: center; }
.werk-kop h1 { color: #FFFFFF; font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.werk-kop .label { color: var(--accent-licht); }
/* Onderhoud: de kop even hoog als die op portfolio was, zodat het beeld dezelfde maat houdt. */
.kop-donker--hoog { min-height: 38.5rem; }
/* Begint de pagina met het leer, dan houdt de sectie zelf ruimte voor de vaste kopbalk. */
main > .leer-zwart:first-child { padding-top: calc(5rem + var(--ruimte-xl)); }
/* Kaart zonder schermafbeelding: een rustig vlak met de naam, even groot als een beeld. */
.raster--werk .werkkaart-media--leeg {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: 1.5rem;
  background: #0a0a0f;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  text-align: center;
}

/* Grijs leer als sectie-achtergrond. Losse tekst erop is donkerder, voor het contrast;
   in de witte kaarten blijft de gewone grijstint. */
.leer-grijs {
  --inkt-zacht: #26262c;
  border-top: 0;
  background: #B0B2B5 url('../images/achtergronden/grijs-leer.webp') center / cover no-repeat fixed;
}
.leer-grijs .kaart { --inkt-zacht: #555; }

/* Vier kaarten als twee rijen van twee in plaats van drie plus één. */
.raster--tweemaaltwee { grid-template-columns: 1fr; }
@media (min-width: 700px) { .raster--tweemaaltwee { grid-template-columns: repeat(2, 1fr); } }
/* Over ons: een lager deel van de foto in beeld, zodat het gezicht in het kader valt. */
@media (min-width: 900px) { .kop-beeld--lager img { object-position: center 40%; } }
/* Zwarte iconen in plaats van blauwe. */
.sprenkels--zwart img { filter: brightness(0); opacity: 0.08; }
@media (min-width: 1500px) { .sprenkels--zwart img:nth-child(11) { display: none; } }

/* Een witte sectie die onderaan rond eindigt en over de volgende sectie heen ligt. */
.rond-onder {
  --rond: clamp(2rem, 5vw, 4.5rem);
  position: relative;
  z-index: 1;
  border-radius: 0 0 var(--rond) var(--rond);
  background-color: var(--wit);
}
.rond-onder + section {
  margin-top: calc(-1 * clamp(2rem, 5vw, 4.5rem));
  padding-top: calc(var(--ruimte-xxl) + clamp(2rem, 5vw, 4.5rem));
}
/* Zwart leer in de slotsectie. */
main > section.diep.diep--leer-zwart:last-child { background: #0a0a0f url('../images/achtergronden/zwart-leer.webp') center / cover no-repeat fixed; }
/* Het slotblok staat een stuk lager in zijn sectie. */
main > section.diep.diep--eiland-lager:last-child { padding-top: calc(var(--ruimte-xxl) * 1.75); }
/* Het kraft houdt zijn eigen ondergrond als het rond over de slotsectie valt. */
.kraft-grijs.rond-onder { background-color: #BFC2C7; }
main > .rond-onder + section.diep.diep--eiland-lager:last-child { padding-top: calc(var(--ruimte-xxl) * 1.75 + clamp(2rem, 5vw, 4.5rem)); }

/* Contact op blauw leer: tekst wit, invulvelden blijven wit met donkere letters. */
.contact-leer .veld input, .contact-leer .veld textarea, .contact-leer .veld select { color: #0a0a0f; border-color: transparent; }
.contact-leer .knop--vol { background: #0a0a0f; border-color: #0a0a0f; color: #FFFFFF; }
.contact-leer .knop--vol:hover { background: #FFFFFF; border-color: #FFFFFF; color: #0a0a0f; }
.contact-leer .form-melding { color: #FFFFFF; }
.contact-leer .contactlijst li, .contact-leer .contactlijst li:first-child { border-color: rgba(255, 255, 255, 0.3); }
.contact-leer .contactlijst a:hover { color: #FFFFFF; text-decoration: underline; }
.contact-leer .contact-vak { --inkt: #0a0a0f; --inkt-zacht: #555555; color: #0a0a0f; }

/* === Alle diensten: elke sectie een eigen ondergrond, met ronde overgangen. === */
.kreukel-wit { border-top: 0; background: #F4F5F7 url('../images/achtergronden/wit-kreukel.webp') center / cover no-repeat fixed; }
/* Op een donkere ondergrond draait de tekst om; in de witte kaarten blijft hij donker. */
.diensten-donker { --inkt: #FFFFFF; --inkt-zacht: rgba(255, 255, 255, 0.85); color: #FFFFFF; }
.diensten-donker .label { color: var(--accent-licht); }
.diensten-donker .kaart { --inkt: #0a0a0f; --inkt-zacht: #555555; color: #0a0a0f; }
.diensten-midden .knoppen { justify-content: center; }
.diensten-midden .lead { color: rgba(255, 255, 255, 0.9); }
.leer-grijs .vraag, .leer-grijs .vraag:last-of-type { border-color: rgba(10, 10, 15, 0.25); }
/* De slotsectie schuift met ronde hoeken over de sectie erboven. */
main > section.diep.diep--bleed:last-child {
  position: relative;
  margin-top: calc(-1 * clamp(2rem, 5vw, 4.5rem));
  border-radius: clamp(2rem, 5vw, 4.5rem) clamp(2rem, 5vw, 4.5rem) 0 0;
}
section:has(+ .diep--bleed) { padding-bottom: calc(var(--ruimte-xxl) + clamp(2rem, 5vw, 4.5rem)); }
.diensten-midden .knop--wit { color: #0a0a0f; }
.diensten-midden .knop--wit:hover { background: #0a0a0f; border-color: #0a0a0f; color: #FFFFFF; }

/* === Home: de blauwe aanbodbalk als eiland onder de hero. Naast het eiland loopt het wit
   van de hero door tot de helft; daarna neemt grijs aluminium het over. Dat aluminium ligt
   ook achter "Onze diensten" en loopt door tot de helft van het scanblok. === */
.aluminium-grijs { border-top: 0; background: #8E8E8E url('../images/achtergronden/grijs-marmer.webp') center / cover no-repeat fixed; }
.aanbod--eiland {
  position: relative;
  padding-block: 0;
  padding-inline: clamp(1.25rem, 7.2vw, 6.3rem);
  background: none;
}
.aanbod--eiland::after {
  content: '';
  position: absolute;
  inset: 50% 0 0;
  background: #8E8E8E url('../images/achtergronden/grijs-marmer.webp') center / cover no-repeat fixed;
}
.aanbod--eiland > .inhoud {
  position: relative;
  z-index: 1;
  max-width: none;
  padding-block: 1.75rem;
  padding-inline: max(2rem, (100% - var(--maxw)) / 2 + 2rem);
  border-radius: 2rem;
  background: var(--accent);
}
.scanblok--eiland::before { background: #8E8E8E url('../images/achtergronden/grijs-marmer.webp') center / cover no-repeat fixed; }

/* Home: "Zij gingen je voor" op wit gevouwen papier. De stroken van het scanblok erboven
   en het blauwe eiland eronder nemen dat over, zodat het één doorlopend vel is. */
.linnen-wit.linnen-wit--vouw,
.scanblok--eiland::after,
.eiland-blauw::before { background: #F2F2F2 url('../images/achtergronden/wit-marmer.webp') center / cover no-repeat fixed; }

/* Home: de pakketten op zwart leer. De stroken van het blauwe eiland erboven en het grijze
   eiland eronder nemen dat over. */
.eiland-blauw + .op-kleur--zwart,
.eiland-blauw::after,
.eiland-grijs::before { background: #0a0a0f url('../images/achtergronden/zwart-marmer.webp') center / cover no-repeat fixed; }

/* Home: grijs marmer in de slotsectie. */
main > section.diep.diep--marmer-grijs:last-child { background: #8E8E8E url('../images/achtergronden/grijs-marmer.webp') center / cover no-repeat fixed; }
.diep--marmer-grijs .eiland-citaat figcaption { color: #0a0a0f; }
.diep--marmer-grijs .eiland-citaat-sterren { color: #FFFFFF; }

/* Home: het blauwe eiland "Recent werk" een stuk smaller, met bredere stroken ernaast. */
.eiland-blauw { padding-inline: clamp(1.25rem, 10vw, 11rem); }
.eiland-blauw > .inhoud { max-width: 87rem; margin-inline: auto; padding-block: calc(var(--ruimte-xxl) / 2); padding-inline: clamp(1.5rem, 4vw, 3.5rem); }
.eiland-blauw .werkband + .werkband { margin-top: calc(var(--ruimte-xxl) / 2); }

/* Wit marmer als sectie-achtergrond. */
.marmer-wit { border-top: 0; background: #F2F2F2 url('../images/achtergronden/wit-marmer.webp') center / cover no-repeat fixed; }
/* Zwarte kaarten met witte tekst, voor op een lichte ondergrond. */
.kaarten-zwart .kaart {
  --inkt: #FFFFFF;
  --inkt-zacht: rgba(255, 255, 255, 0.82);
  --accent: #6EA8FF;
  border-color: #0a0a0f;
  background: #0a0a0f;
  color: #FFFFFF;
}

/* Grijs marmer onder een donker waas, zodat het bijna dezelfde tint heeft als de donkere kop
   erboven en alleen de aders nog licht doorschemeren. */
.marmer-donker {
  border-top: 0;
  background:
    linear-gradient(rgba(10, 10, 15, 0.86), rgba(10, 10, 15, 0.86)),
    #0a0a0f url('../images/achtergronden/grijs-marmer.webp') center / cover no-repeat fixed;
}

/* Het donkere marmer als eerste sectie op de dienstpagina's: kop en inleiding wit, de
   witte kaarten houden hun donkere tekst. De strook boven het eiland eronder loopt mee. */
.marmer-kop { color: #FFFFFF; }
.marmer-kop .label { color: var(--accent-licht); }
.marmer-kop .lead { color: rgba(255, 255, 255, 0.85); }
.marmer-kop .dienst { color: #0a0a0f; }
.eiland-sectie--van-marmer-donker::before,
.scan-stappen.scan-stappen--marmer {
  background:
    linear-gradient(rgba(10, 10, 15, 0.86), rgba(10, 10, 15, 0.86)),
    #0a0a0f url('../images/achtergronden/grijs-marmer.webp') center / cover no-repeat fixed;
}
.marmer-donker .scan-formulier { background: rgba(10, 10, 15, 0.88); }

/* === Alle diensten: Route 02 als eiland. In de zijstroken loopt bovenaan het donkere marmer
   van de sectie erboven door, en vanaf de helft het wit van de sectie eronder. === */
.dienst-eiland {
  position: relative;
  padding-block: 0;
  padding-inline: clamp(1.25rem, 7.2vw, 6.3rem);
  border-top: 0;
  background: none;
}
.dienst-eiland::before, .dienst-eiland::after { content: ''; position: absolute; left: 0; right: 0; }
.dienst-eiland::before {
  top: 0;
  bottom: 50%;
  background:
    linear-gradient(rgba(10, 10, 15, 0.86), rgba(10, 10, 15, 0.86)),
    #0a0a0f url('../images/achtergronden/grijs-marmer.webp') center / cover no-repeat fixed;
}
.dienst-eiland::after { top: 50%; bottom: 0; background: var(--wit); }
.dienst-eiland > .inhoud {
  position: relative;
  z-index: 1;
  max-width: none;
  padding-block: var(--ruimte-xxl);
  padding-inline: max(2rem, (100% - var(--maxw)) / 2 + 2rem);
  border-radius: clamp(2rem, 5vw, 4.5rem);
  background: #C9CDD4;
}

/* Dienstpagina's: de logostrook egaal grijs in plaats van wit, zodat hij minder fel afsteekt
   tegen de donkere kop en het donkere marmer. */
.kop-logos--grijs { background: #C4C6C9; }

/* Alle diensten: Route 03 en "Ook mogelijk" op wit met verspreide iconen, als één doorlopend vlak. */
.diensten-wit { border-top: 0; background: var(--wit); }

/* === Alle diensten: "Ook mogelijk" als egaal grijs eiland. In de zijstroken loopt bovenaan
   het wit van Route 03 door, en vanaf de helft het blauwe leer van de sectie eronder. === */
.ook-eiland {
  position: relative;
  padding-block: 0;
  padding-inline: clamp(1.25rem, 7.2vw, 6.3rem);
  border-top: 0;
  background: var(--wit);
}
.ook-eiland::after {
  content: '';
  position: absolute;
  inset: 50% 0 0;
  background: #1559D6 url('../images/achtergronden/blauw-leer.webp') center / cover no-repeat fixed;
}
.ook-eiland > .inhoud {
  position: relative;
  z-index: 1;
  max-width: 90rem;
  margin-inline: auto;
  padding-block: calc(var(--ruimte-xl) * 1.25);
  padding-inline: clamp(1.5rem, 4vw, 4rem);
  border-radius: clamp(2rem, 5vw, 4.5rem);
  background: #C9CDD4;
}
.ook-eiland .ook, .ook-eiland .ook-item { border-color: rgba(10, 10, 15, 0.2); }
.ook-eiland .ook-item p { color: #2a2a30; }
@media (min-width: 700px) { .ook-eiland h2 { white-space: nowrap; } }

/* Alle diensten, Route 01: wit marmer in de kaarten en in de witte tekst zelf. Het marmer
   vult de letters (background-clip), het ligt dus niet als vlak achter de tekst. */
#bouwen .kaart { border-color: transparent; background: #F2F2F2 url('../images/achtergronden/wit-marmer.webp') center / cover no-repeat; }
#bouwen h2,
#bouwen .lead {
  background: #F2F2F2 url('../images/achtergronden/wit-marmer.webp') center / 60rem auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #FFFFFF;
}
/* Het marmer vult alleen het tekstvak; wat ruimte eronder houdt de staart van de g heel. */
#bouwen h2 { padding-bottom: 0.14em; margin-bottom: -0.14em; }

/* Alle diensten, Route 03: wit marmer als ondergrond, met kaarten in het verdonkerde grijze
   marmer van de sectie onder de hero. De stroken van de eilanden erboven en eronder volgen. */
.dienst-eiland::after,
.ook-eiland { background: #F2F2F2 url('../images/achtergronden/wit-marmer.webp') center / cover no-repeat fixed; }
#analyse .kaart {
  --inkt: #FFFFFF;
  --inkt-zacht: rgba(255, 255, 255, 0.85);
  --accent: #6EA8FF;
  border-color: transparent;
  background:
    linear-gradient(rgba(10, 10, 15, 0.86), rgba(10, 10, 15, 0.86)),
    #1C1C20 url('../images/achtergronden/grijs-marmer.webp') center / cover no-repeat;
  color: #FFFFFF;
}

/* Route 03: de kop en inleiding gevuld met het verdonkerde grijze marmer, net zoals het witte
   marmer de tekst van Route 01 vult. */
#analyse h2,
#analyse .lead {
  background:
    linear-gradient(rgba(10, 10, 15, 0.78), rgba(10, 10, 15, 0.78)),
    #1C1C20 url('../images/achtergronden/grijs-marmer.webp') center / 60rem auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #1C1C20;
}
#analyse h2 { padding-bottom: 0.14em; margin-bottom: -0.14em; }

/* Alle diensten: het eiland van Route 02 in egaal zwart. */
#groei.dienst-eiland > .inhoud { background: #0a0a0f; }
#groei .label { color: #FFFFFF; }
/* Het eiland van Route 02 een klein beetje smaller en lager dan de standaardmaat. */
#groei.dienst-eiland { padding-inline: clamp(1.25rem, 10vw, 9rem); }
#groei.dienst-eiland > .inhoud { padding-block: calc(var(--ruimte-xxl) * 0.72); }

/* Route 02: de kaarten en de kop met inleiding in het grijze marmer zelf, zonder waas. De
   tekst in de kaarten is donkerder gezet, anders valt hij weg tegen het grijs. */
#groei .kaart {
  --inkt-zacht: #16161a;
  border-color: transparent;
  background: #8E8E8E url('../images/achtergronden/grijs-marmer.webp') center / cover no-repeat;
}
#groei h2,
#groei .lead {
  background: #8E8E8E url('../images/achtergronden/grijs-marmer.webp') center / 60rem auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#groei h2 { padding-bottom: 0.14em; margin-bottom: -0.14em; }
/* Het grijze marmer van Route 02 een stuk lichter: een witte waas van 55 procent eroverheen. */
#groei .kaart {
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
    #8E8E8E url('../images/achtergronden/grijs-marmer.webp') center / cover no-repeat;
}
#groei h2,
#groei .lead {
  background:
    linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
    #8E8E8E url('../images/achtergronden/grijs-marmer.webp') center / 60rem auto;
  -webkit-background-clip: text;
  background-clip: text;
}

/* "Ook mogelijk" in dezelfde opmaak als het eiland van Route 02: blauw marmer, de kop in
   licht grijs marmer en de drie extra's als tegels in datzelfde lichte marmer. */
.ook-eiland > .inhoud { background: #1559D6 url('../images/achtergronden/blauw-marmer.webp') center / cover no-repeat; }
.ook-eiland .label { color: #FFFFFF; }
.ook-eiland h2 {
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  background:
    linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
    #8E8E8E url('../images/achtergronden/grijs-marmer.webp') center / 60rem auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ook-eiland .ook { gap: 1.5rem; max-width: 60rem; margin-inline: auto; border-top: 0; }
.ook-eiland .ook-item {
  padding: 2rem;
  border: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
    #8E8E8E url('../images/achtergronden/grijs-marmer.webp') center / cover no-repeat;
}
.ook-eiland .ook-item p { color: #16161a; }

/* Alle diensten: "Begin hier" op zwart suède; de strook onder het eiland erboven volgt. */
.suede-zwart,
.ook-eiland::after { background: #0a0a0f url('../images/achtergronden/zwart-suede.webp') center / cover no-repeat fixed; }
.suede-zwart { border-top: 0; }

/* === Alle diensten: "Afspraken" als eiland. In de zijstroken loopt bovenaan het zwarte suède
   van "Begin hier" door, en vanaf de helft het grijze leer van de slotsectie. === */
.afspraken-eiland {
  position: relative;
  padding-block: 0;
  padding-inline: clamp(1.25rem, 7.2vw, 6.3rem);
  border-top: 0;
  background: none;
}
.afspraken-eiland::before, .afspraken-eiland::after { content: ''; position: absolute; left: 0; right: 0; }
.afspraken-eiland::before { top: 0; bottom: 50%; background: #0a0a0f url('../images/achtergronden/zwart-suede.webp') center / cover no-repeat fixed; }
.afspraken-eiland::after { top: 50%; bottom: 0; background: #B0B2B5 url('../images/achtergronden/grijs-leer.webp') center / cover no-repeat fixed; }
.afspraken-eiland > .inhoud {
  position: relative;
  z-index: 1;
  max-width: 64rem;
  margin-inline: auto;
  padding-block: var(--ruimte-xl);
  padding-inline: clamp(1.5rem, 6vw, 6rem);
  border-radius: clamp(2rem, 5vw, 4.5rem);
  background: #F2F2F2 url('../images/achtergronden/wit-marmer.webp') center / cover no-repeat;
}
/* De slotsectie op grijs leer, zonder ronde overgang: het leer begint al naast het eiland. */
main > section.diep.diep--leer-grijs-vlak:last-child { background: #B0B2B5 url('../images/achtergronden/grijs-leer.webp') center / cover no-repeat fixed; }

/* Route 02, definitief: zwart eiland met witte kaarten en witte tekst. Dit heft de eerdere
   proeven met grijs marmer in de kaarten en in de letters op. */
#groei .kaart { --inkt-zacht: #555555; border: var(--rand); background: var(--wit); }
#groei h2,
#groei .lead {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}
#groei h2 { color: #FFFFFF; }
#groei .lead { color: rgba(255, 255, 255, 0.85); }

/* === Donkere kaart: een tint lichter dan zwart, dun licht randje, ronde hoeken, een icoon
   bovenin en een link onderaan. Bij aanwijzen komt hij na 0,2 seconde omhoog en kleurt de
   rand blauw. De selector is zwaar genoeg om de eerdere proeven op Route 02 te overstemmen. === */
#groei .kaart.kaart--donker,
.kaart.kaart--donker {
  --inkt: #FFFFFF;
  --inkt-zacht: rgba(255, 255, 255, 0.78);
  --accent: #6EA8FF;
  padding: 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 1.25rem;
  background: #17171D;
  color: #FFFFFF;
  transition: transform 0.3s ease 0.2s, border-color 0.3s ease 0.2s, box-shadow 0.3s ease 0.2s;
}
.kaart.kaart--donker:hover {
  transform: translateY(-4px);
  border-color: #6EA8FF;
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.45);
}
.kaart--donker .kaart-icoon { width: 2.75rem; height: 2.75rem; margin-bottom: 1.5rem; }
.kaart--donker h3 { font-size: 1.45rem; margin-bottom: 0.6rem; }
.kaart--donker > p { font-size: 1.05rem; line-height: 1.55; }
.kaart--donker .kaart-lijst li { font-size: 1rem; }
/* De link staat altijd onderaan, ook als de kaarten ongelijk van lengte zijn. */
.kaart--donker .kaart-link { margin-top: auto; padding-top: 1.75rem; }

/* Route 01: de donkere kaart als een laag matglas op het marmer. De ondergrond is hier zelf
   al donker, dus de kaart is iets lichter en half doorzichtig in plaats van een dicht vlak. */
#bouwen .kaart.kaart--glas {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
}
#bouwen .kaart.kaart--glas:hover { border-color: #6EA8FF; }

/* Alle diensten: dezelfde blauwachtige rand om de kaarten van alle drie de routes. */
#bouwen .kaart.kaart--donker,
#groei .kaart.kaart--donker,
#analyse .kaart.kaart--donker { border: 1px solid rgba(110, 168, 255, 0.45); }
#bouwen .kaart.kaart--donker:hover,
#groei .kaart.kaart--donker:hover,
#analyse .kaart.kaart--donker:hover { border-color: #6EA8FF; }

/* "Ook mogelijk": effen blauw eiland met dezelfde donkere kaarten als de routes. */
.ook-eiland > .inhoud { background: var(--accent-diep); }
.ook-eiland .ook-kaarten { grid-template-columns: 1fr; max-width: 68rem; margin-inline: auto; }
@media (min-width: 800px) { .ook-eiland .ook-kaarten { grid-template-columns: repeat(3, 1fr); } }
.ook-eiland .kaart.kaart--donker { border: 1px solid rgba(110, 168, 255, 0.45); }
.ook-eiland .kaart.kaart--donker:hover { border-color: #FFFFFF; }

/* Alle diensten: het witte marmer van Route 03 loopt door achter "Begin hier", en dus ook in
   de stroken onder het eiland erboven en boven het eiland eronder. */
.ook-eiland::after,
.afspraken-eiland::before { background: #F2F2F2 url('../images/achtergronden/wit-marmer.webp') center / cover no-repeat fixed; }
.begin-hier .knoppen { justify-content: center; }
/* Het eiland eronder was zelf wit marmer; op wit marmer krijgt het een effen grijs vlak. */
.afspraken-eiland > .inhoud { background: #C9CDD4; }
.afspraken-eiland .vraag, .afspraken-eiland .vraag:last-of-type { border-color: rgba(10, 10, 15, 0.22); }
.afspraken-eiland .vraag-antwoord { color: #26262c; }

/* "Ook mogelijk", definitief: de volledige opmaak van het eiland van Route 02. Zwart eiland,
   witte kop, donkere kaarten met de blauwe rand. */
.ook-eiland > .inhoud { background: #0a0a0f; }
.ook-eiland h2 {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: #FFFFFF;
}
.ook-eiland .kaart.kaart--donker:hover { border-color: #6EA8FF; }

/* Alle diensten: het witte marmer loopt door tot aan de voettekst, dus ook onder het eiland
   "Afspraken" en achter het slotblok. */
.afspraken-eiland::after,
main > section.diep.diep--leer-grijs-vlak:last-child { background: #F2F2F2 url('../images/achtergronden/wit-marmer.webp') center / cover no-repeat fixed; }

/* Alle diensten: het eiland "Afspraken" in zwart, met witte tekst en lichte lijnen. */
.afspraken-eiland > .inhoud {
  --inkt: #FFFFFF;
  --inkt-zacht: rgba(255, 255, 255, 0.82);
  --accent: #6EA8FF;
  background: #0a0a0f;
  color: #FFFFFF;
}
.afspraken-eiland .label { color: #FFFFFF; }
.afspraken-eiland .vraag, .afspraken-eiland .vraag:last-of-type { border-color: rgba(255, 255, 255, 0.2); }
.afspraken-eiland .vraag-antwoord { color: rgba(255, 255, 255, 0.82); }
/* Iets meer lucht tussen het eiland "Afspraken" en het slotblok. */
.afspraken-eiland { padding-bottom: var(--ruimte-l); }

/* Alle diensten: "Begin hier" als onderbrekende balk over de volle breedte. Grijs marmer met
   een licht donker waas; boven en onder de balk blijft het witte marmer zichtbaar. */
.begin-hier { padding-inline: 0; padding-block: calc(var(--ruimte-xl) * 1.4); }
.begin-hier > .inhoud {
  --inkt: #FFFFFF;
  --inkt-zacht: rgba(255, 255, 255, 0.88);
  max-width: none;
  padding-block: calc(var(--ruimte-xl) * 0.75);
  background:
    linear-gradient(rgba(10, 10, 15, 0.55), rgba(10, 10, 15, 0.55)),
    #4A4A4D url('../images/achtergronden/grijs-marmer.webp') center / cover no-repeat fixed;
  color: #FFFFFF;
}
.begin-hier .label { color: #FFFFFF; }
.begin-hier .knop--vol { background: #FFFFFF; border-color: #FFFFFF; color: #0a0a0f; }
.begin-hier .knop--vol:hover { background: #0a0a0f; border-color: #0a0a0f; color: #FFFFFF; }
.begin-hier .knop:not(.knop--vol) { border-color: rgba(255, 255, 255, 0.7); color: #FFFFFF; }
.begin-hier .knop:not(.knop--vol):hover { background: #FFFFFF; border-color: #FFFFFF; color: #0a0a0f; }

/* Alle diensten: het slotblok als dezelfde grijze marmeren balk als "Begin hier", over de
   volle breedte, in plaats van een blauw eiland. */
main > section.diep.diep--balk:last-child { padding-inline: 0; }
main > section.diep.diep--balk:last-child > .inhoud {
  max-width: none;
  padding-block: calc(var(--ruimte-xl) * 0.75);
  border-radius: 0;
  background:
    linear-gradient(rgba(10, 10, 15, 0.55), rgba(10, 10, 15, 0.55)),
    #4A4A4D url('../images/achtergronden/grijs-marmer.webp') center / cover no-repeat fixed;
}
main > section.diep.diep--balk:last-child .knop--wit:hover { background: #0a0a0f; border-color: #0a0a0f; color: #FFFFFF; }
/* De kop van de slotbalk op één regel waar dat past; de tekst eronder houdt zijn leesbreedte. */
main > section.diep.diep--balk:last-child .lead { max-width: 44rem; margin-inline: auto; }
@media (min-width: 800px) { main > section.diep.diep--balk:last-child h2 { white-space: nowrap; } }
/* Onder de slotbalk de helft van de gebruikelijke ruimte tot de voettekst. */
main:has(+ .voet.bleed-links) > section.diep.diep--balk:last-child { padding-bottom: calc(var(--ruimte-xxl) * 0.75 + clamp(2rem, 5vw, 4.5rem)); }
/* De strook tussen de slotbalk en de voettekst in hetzelfde marmer als de balk zelf, zodat
   het één doorlopend vlak is tot aan de voettekst. */
main > section.diep.diep--balk:last-child { position: relative; }
main > section.diep.diep--balk:last-child::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: calc(var(--ruimte-xxl) * 0.75 + clamp(2rem, 5vw, 4.5rem));
  background:
    linear-gradient(rgba(10, 10, 15, 0.55), rgba(10, 10, 15, 0.55)),
    #4A4A4D url('../images/achtergronden/grijs-marmer.webp') center / cover no-repeat fixed;
}

/* Scanpagina: grijs stucwerk achter de veelgestelde vragen, en in de strook achter het witte
   stappenpaneel erboven. Tekst donker, lijnen iets steviger dan op wit. */
.stucwerk-grijs,
.scan-stappen::after { background: #9A9A9A url('../images/achtergronden/grijs-stucwerk.webp') center / cover no-repeat fixed; }
.stucwerk-grijs { --inkt-zacht: #1c1c21; border-top: 0; }
.stucwerk-grijs .label { color: #0a0a0f; }
.stucwerk-grijs .vraag, .stucwerk-grijs .vraag:last-of-type { border-color: rgba(10, 10, 15, 0.3); }
.stucwerk-grijs .vraag summary::after { border-color: #0a0a0f; }
/* Scanpagina: het stucwerk loopt door achter het slotblok, tot aan de voettekst. */
main > section.diep.diep--stucwerk-grijs:last-child { background: #9A9A9A url('../images/achtergronden/grijs-stucwerk.webp') center / cover no-repeat fixed; }

/* Grijs gekreukt papier in de strook boven een eiland. */
.eiland-sectie--van-kreukel-grijs::before { background: #C2C5CA url('../images/achtergronden/grijs-kreukel.webp') center / cover no-repeat fixed; }

/* Portfolio: wit leer over de hele pagina, van onder de menubalk tot aan de voettekst. */
.leer-wit { border-top: 0; background: #F4F5F7 url('../images/achtergronden/wit-leer.webp') center / cover no-repeat fixed; }
main > .leer-wit:first-child { padding-top: calc(5rem + var(--ruimte-xl)); }
.leer-wit .werk-kop h1 { color: var(--inkt); }
.leer-wit .werk-kop .label { color: var(--accent-diep); }
.leer-wit .werkkaart { border-color: var(--lijn-sterk); }

/* Een sectie die direct over de donkere kop schuift, ligt boven de vormen en het beeld van
   die kop; anders steken die door de ronde hoeken heen. */
.kop-donker + .bleed-links { z-index: 4; }
/* Schuift de sectie over de kop én ligt hij onderaan over de volgende, dan zijn alle vier de
   hoeken rond. */
.bleed-links.rond-onder { border-radius: var(--bleed); }

/* Grijs marmer als sectie-achtergrond; losse tekst erop is donkerder voor het contrast. */
.marmer-grijs {
  --inkt-zacht: #1c1c21;
  border-top: 0;
  background: #8E8E8E url('../images/achtergronden/grijs-marmer.webp') center / cover no-repeat fixed;
}
.marmer-grijs .label { color: #0a0a0f; }
.marmer-grijs .kaart { --inkt-zacht: #555555; }
.marmer-grijs.rond-onder { background-color: #8E8E8E; }
/* Zwart marmer in de slotsectie. */
main > section.diep.diep--marmer-zwart:last-child { background: #0a0a0f url('../images/achtergronden/zwart-marmer.webp') center / cover no-repeat fixed; }
.marmer-grijs .quote figcaption { color: #0a0a0f; font-weight: 600; }
/* De voettekst ligt altijd boven de sectie ervoor, ook als die zelf over de kop is geschoven. */
.voet.bleed-links { z-index: 5; }

/* === Contact: de manieren om ons te bereiken als compacte tegels met een icoon. Bellen staat
   over de volle breedte bovenaan, de andere vier in twee kolommen eronder. === */
.contacttegels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.contacttegels .contacttegel--breed { grid-column: 1 / -1; }
.contacttegel {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1rem 1.15rem;
  border: 1px solid var(--lijn-sterk);
  border-radius: 1rem;
  background: var(--wit);
  color: var(--inkt);
  text-decoration: none;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.contacttegel:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 0.75rem 1.75rem rgba(10, 10, 15, 0.12); }
.contacttegel-icoon { display: grid; flex: none; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; background: #0a0a0f; }
.contacttegel-icoon svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: #FFFFFF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contacttegel-icoon .merkicoon { fill: currentColor; stroke: none; }
.contacttegel[href^="tel:"] svg { stroke: #34C759; }
.contacttegel[href^="mailto:"] svg { stroke: #FFC83D; }
.contacttegel-icoon .merkicoon--whatsapp { fill: #25D366; }
.contacttegel-icoon .merkicoon--linkedin { fill: #0A66C2; background: #FFFFFF; border-radius: 3px; }
.contacttegel-icoon .merkicoon--instagram { fill: url(#ig-verloop); }
.contacttegel-tekst { display: grid; min-width: 0; }
.contacttegel-tekst .ct-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--inkt-zacht); }
.contacttegel-tekst strong { font-size: 1rem; overflow-wrap: anywhere; }
.contacttegel--breed .contacttegel-tekst strong { font-size: 1.3rem; letter-spacing: -0.02em; }
.contact-regel { margin: 1.25rem 0 0; font-size: 0.92rem; color: var(--inkt-zacht); }
@media (max-width: 480px) { .contacttegels { grid-template-columns: 1fr; } }
.contact-vak { border-radius: 1rem; }
/* Een regeleinde dat alleen op een groter scherm geldt. */
.alleen-breed { display: none; }
@media (min-width: 900px) { .alleen-breed { display: inline; } }

/* Iconen over de hele pagina in plaats van één sectie: ze liggen achter alle onderdelen van
   main, en de slotsectie laat ze door in plaats van er een eigen ondergrond overheen te leggen. */
main.sprenkel-pagina { position: relative; overflow: hidden; }
main.sprenkel-pagina > :not(.sprenkels) { position: relative; z-index: 1; }
main.sprenkel-pagina > section.diep:last-child { background: none; }
/* Op een pagina met doorlopende iconen geen scheidslijn onder de kop. */
main.sprenkel-pagina > .paginakop { border-bottom: 0; }
main.sprenkel-pagina > .paginakop + section { border-top: 0; }
/* Veelgestelde vragen: de lijst staat dichter op de kop en op het slotblok. */
main.sprenkel-pagina--faq > .paginakop { padding-bottom: var(--ruimte-l); }
main.sprenkel-pagina--faq > .paginakop + section { padding-block: var(--ruimte-l) var(--ruimte-xl); }
main.sprenkel-pagina--faq > section.diep:last-child { padding-top: var(--ruimte-xl); }
/* Privacyverklaring: de tekst begint iets dichter onder de kop. */
main.sprenkel-pagina--privacy > .paginakop { padding-bottom: 0; }
main.sprenkel-pagina--privacy > .paginakop + section { padding-top: var(--ruimte-l); }

/* === Telefoon en tablet === */
@media (max-width: 899px) {
  /* Het menu zelf is een vast paneel; als flex-kind van de balk duwde het de menuknop naar
     het midden. Uit de rij gehaald staat de knop netjes rechtsboven. */
  .nav > nav { position: absolute; }

  /* Home: de foto loopt door achter de bovenste helft van het blauwe eiland, in plaats van
     recht af te breken. Foto en strook tonen hetzelfde beeld op dezelfde schaal (de volle
     schermbreedte); de strook begint waar de foto ophoudt. */
  .hero-beeld {
    min-height: 0;
    height: 60vw;
    background: var(--vlak) url('../images/tjerk.webp') no-repeat center -20vw / 100vw auto;
  }
  .hero-beeld img { opacity: 0; }
  .aanbod--eiland::before {
    content: '';
    position: absolute;
    inset: 0 0 50%;
    background: var(--vlak) url('../images/tjerk.webp') no-repeat center -80vw / 100vw auto;
  }

  /* Home: alle zeven iconen in de hero, verdeeld over het tekstdeel. De algemene regel
     verbergt op een telefoon de even iconen en de onderste vielen achter de foto. */
  .sprenkels--hero img:nth-child(n) { display: block; width: 3.5rem !important; }
  .sprenkels--hero img:nth-child(1) { inset: 9% auto auto 4%; }
  .sprenkels--hero img:nth-child(2) { inset: 12% 6% auto auto; }
  .sprenkels--hero img:nth-child(3) { inset: 34% 3% auto auto; }
  .sprenkels--hero img:nth-child(4) { inset: 46% auto auto 2%; }
  .sprenkels--hero img:nth-child(5) { inset: 57% 5% auto auto; }
  .sprenkels--hero img:nth-child(6) { inset: 68% auto auto 7%; }
  .sprenkels--hero img:nth-child(7) { inset: 24% auto auto 56%; }
}

/* Telefoon: op de dienstpagina's geen logostrook onder de kop. De sectie eronder houdt dan
   haar gewone bovenruimte en de kop zijn gewone onderruimte. */
@media (max-width: 699px) {
  .kop-logos--grijs { display: none; }
  .kop-logos--grijs + section { padding-top: var(--ruimte-xxl); }
  .kop-donker:has(+ .kop-logos--grijs) { padding-bottom: 3.5rem; }
}

/* Telefoon: de stappen staan onder elkaar, dus de pijl wijst recht omlaag naar de volgende
   kaart in plaats van met een bocht opzij. De getekende pijl maakt plaats voor een rechte. */
@media (max-width: 899px) {
  .stappenrij-pijl { position: relative; height: 3.25rem; padding-block: 0; }
  .stappenrij-pijl svg { display: none; }
  .stappenrij-pijl::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    bottom: 0.9rem;
    left: 50%;
    width: 3px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: currentColor;
  }
  .stappenrij-pijl::after {
    content: '';
    position: absolute;
    bottom: 0.9rem;
    left: 50%;
    width: 0.8rem;
    height: 0.8rem;
    margin-left: -0.4rem;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    border-radius: 1px;
    transform: rotate(45deg);
  }
}

/* === Reviews: vijf sterren in het midden, het korte citaat, de naam en daaronder een blauwe
   link die de hele review openklapt. Staat hij open, dan maakt het korte citaat plaats voor
   de volledige tekst; de link blijft onder de naam staan. === */
.review { display: flex; flex-direction: column; }
.review-sterren { text-align: center; }
.review figcaption { order: 2; margin-top: auto; padding-top: 1.25rem; }
.review-knop {
  order: 3;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}
.review-knop::after { content: '\2192'; transition: transform 0.3s ease; }
.review-knop:hover::after { transform: translateX(0.3rem); }
.review-knop[aria-expanded="true"]::after { content: '\2191'; }
.review-knop[aria-expanded="true"]:hover::after { transform: translateY(-0.2rem); }
.review-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 0.25rem; }
.review-volledig p { margin: 0 0 0.9rem; font-size: 1.02rem; line-height: 1.6; color: var(--inkt); }
.review-volledig p:last-child { margin-bottom: 0; }
.review:has(.review-volledig:not([hidden])) > blockquote { display: none; }
/* Een opengeklapte review rekt de andere twee niet mee uit. */
.reviews:has(.review-volledig:not([hidden])) { align-items: start; }
/* Het logo van de klant bovenaan in het midden van de reviewkaart. */
.review-logo { align-self: center; width: auto; max-width: 9rem; height: 2.25rem; margin-bottom: 1.25rem; object-fit: contain; object-position: center; }
/* Meetrapport: twee punten houden de breedte van de oude indeling met drie kolommen. */
@media (min-width: 900px) { .eerlijk { grid-template-columns: repeat(3, 1fr); } }

/* Casepagina: geen scheidslijn onder de kop, en de inhoud begint dichter onder de kop. */
main.case-pagina > .paginakop { padding-bottom: var(--ruimte-l); border-bottom: 0; }
main.case-pagina > .paginakop + section { padding-top: var(--ruimte-l); border-top: 0; }
/* Casepagina: wit marmer over de hele pagina, van de kop tot aan de voettekst. */
main.case-pagina { background: #F2F2F2 url('../images/achtergronden/wit-marmer.webp') center / cover no-repeat fixed; }
main.case-pagina > section.diep:last-child { background: none; }
/* Onder de cijfers geen eigen lijn: de lijn boven het eerste rapportonderdeel volstaat. */
main.case-pagina .cijfers { border-bottom: 0; }
/* Casepagina: de helft van de ruimte tussen de quote en het slotblok. */
main.case-pagina > .paginakop + section { padding-bottom: calc(var(--ruimte-xxl) / 2); }
main.case-pagina > section.diep:last-child { padding-top: calc(var(--ruimte-xxl) / 2); }

/* Het kruimelpad blijft in de pagina staan voor schermlezers en zoekmachines, maar is op het
   scherm niet zichtbaar en neemt geen ruimte in. */
.kruimels {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Een figure heeft van zichzelf zijmarge; zonder vult de reviewkaart zijn hele kolom. */
.review { margin: 0; }