/* ==========================================================================
   Mesa Social Management
   Eén stylesheet, geen frameworks, geen webfonts van buiten.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --blauw:      #0B2F6F;
  --blauw-diep: #061F4C;
  --blauw-op:   #1B5CE8;
  --cyaan:      #3DE1F2;
  --room:       #F3F7FD;
  --room-2:     #E4EDFA;
  --inkt:       #05122C;
  --inkt-zacht: #465A76;

  --op-blauw:   rgba(243, 247, 253, .78);
  --lijn-blauw: rgba(243, 247, 253, .18);
  --lijn-room:  rgba(5, 18, 44, .12);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;

  --wrap: 1280px;
  --marge: clamp(20px, 5vw, 56px);
  --sectie: clamp(72px, 9vw, 132px);
  --bocht: clamp(28px, 4vw, 56px);
  --balk-h: 84px;

  --soepel: cubic-bezier(.22, .61, .36, 1);
  --zwaar:  cubic-bezier(.16, 1, .3, 1);
  --veer:   cubic-bezier(.34, 1.5, .64, 1);

  /* Door JS bijgewerkt tijdens het scrollen. */
  --scheef: 0deg;
}

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

html {
  /* Alleen op html clippen. Op body zou dit position:sticky slopen. */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--blauw);
  color: var(--room);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.58;
  font-weight: 420;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.op-slot { overflow: hidden; }

img, svg, video, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; text-wrap: balance; }

::selection { background: var(--cyaan); color: var(--inkt); }
:focus-visible { outline: 3px solid var(--cyaan); outline-offset: 3px; border-radius: 4px; }

/* De hele pagina helt licht mee met de scrollsnelheid. */
.scheef {
  transform: skewY(var(--scheef));
  transform-origin: 50% 0;
  will-change: transform;
}

/* --- Typografie --------------------------------------------------------- */
.display { font-weight: 800; letter-spacing: -.048em; line-height: .98; }
.d1 { font-size: clamp(2.7rem, 7vw, 6rem); }
.d2 { font-size: clamp(2.1rem, 4.6vw, 3.8rem); line-height: 1; }
.d3 { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.1; letter-spacing: -.038em; }

.label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 17px;
  border-radius: 999px;
  background: rgba(243, 247, 253, .12);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
}
.label::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyaan);
  flex: none;
  animation: pols 2.2s ease-in-out infinite;
}
@keyframes pols {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.45); opacity: .55; }
}
.sectie--room .label, .baan .label { background: rgba(11, 47, 111, .1); color: var(--blauw); }
.sectie--room .label::before, .baan .label::before { background: var(--blauw-op); }
.sectie--cyaan .label { background: rgba(5, 18, 44, .1); color: var(--inkt); }
.sectie--cyaan .label::before { background: var(--blauw); }

.intro { font-size: clamp(1.06rem, 1.5vw, 1.24rem); line-height: 1.58; color: var(--op-blauw); }
.sectie--room .intro, .sectie--cyaan .intro { color: var(--inkt-zacht); }

/* --- Layout ------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--marge); }
.sectie { padding-block: var(--sectie); position: relative; }

.sectie--room  { background: var(--room);  color: var(--inkt); border-radius: var(--bocht) var(--bocht) 0 0; }
.sectie--blauw { background: var(--blauw); border-radius: var(--bocht) var(--bocht) 0 0; }
.sectie--cyaan{ background: var(--cyaan);color: var(--inkt); border-radius: var(--bocht) var(--bocht) 0 0; }
.sectie--vervolg { border-radius: 0; padding-top: 0; }

.kop { max-width: 820px; margin-bottom: clamp(38px, 5vw, 64px); }
.kop .display { margin-top: 20px; }
.kop .intro { margin-top: 22px; max-width: 60ch; }

.overslaan {
  position: absolute;
  left: -9999px; top: 14px;
  z-index: 700;
  background: var(--cyaan);
  color: var(--inkt);
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
}
.overslaan:focus { left: 16px; }

/* --- Letters die opklappen --------------------------------------------- */
.hero__kop { perspective: 900px; }
.rij { display: block; }
.lt { display: inline-block; }
.sp { display: inline-block; }
.js .lt {
  opacity: 0;
  transform: translateY(.42em) rotateX(-72deg);
  transform-origin: 50% 0;
  transition: opacity .5s var(--soepel), transform .8s var(--zwaar);
  transition-delay: calc(var(--i) * 26ms + .12s);
}
.js .aan .lt { opacity: 1; transform: none; }

/* --- Cirkel om een woord ------------------------------------------------ */
.cirkel { position: relative; display: inline-block; white-space: nowrap; }
.cirkel svg {
  position: absolute;
  left: -6%; top: -24%;
  width: 113%; height: 142%;
  overflow: visible;
  pointer-events: none;
}
.cirkel ellipse {
  fill: none;
  stroke: var(--cyaan);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  transform-origin: 50% 50%;
  transform: rotate(-3deg);
}
.js .aan .cirkel ellipse { animation: teken 1.2s var(--soepel) .85s forwards; }
@keyframes teken { to { stroke-dashoffset: 0; } }

/* --- Korrel ------------------------------------------------------------- */
.korrel {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Voortgangsbalk ----------------------------------------------------- */
.voortgang {
  position: fixed;
  top: 0; left: 0;
  height: 4px; width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--cyaan);
  z-index: 250;
  will-change: transform;
}

/* --- Muisaanwijzer met blend-mode -------------------------------------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: var(--cyaan);
  z-index: 500;
  pointer-events: none;
  opacity: 0;
  display: grid;
  place-items: center;
  transition: opacity .3s, width .35s var(--veer), height .35s var(--veer),
              margin .35s var(--veer), background-color .4s var(--soepel);
  will-change: transform;
}

/* Geen mix-blend-mode: difference. Cyaan op diepblauw rekent die om naar
   groen (|11-61|, |47-225|, |111-242| = rgb 50,178,131). De cursor kleurt
   daarom gewoon mee met de sectie waar hij overheen zweeft. */
body[data-thema="room"]  .cursor { background: var(--blauw-op); }
body[data-thema="cyaan"] .cursor { background: var(--blauw); }
body[data-thema="inkt"]  .cursor { background: var(--cyaan); }
body.muis-aan .cursor { opacity: 1; }
body.muis-hover .cursor { width: 86px; height: 86px; margin: -43px 0 0 -43px; }
body.muis-sleep .cursor { width: 116px; height: 116px; margin: -58px 0 0 -58px; }
.cursor__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blauw);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .25s, transform .25s var(--veer);
  white-space: nowrap;
}
body.muis-sleep .cursor__label { opacity: 1; transform: none; }
/* Het woord "Bekijk" verschijnt boven de screenshots, en die staan in de
   lichte sectie. Daar is de cursor blauw, dus moet de tekst licht zijn. */
body[data-thema="room"]  .cursor__label,
body[data-thema="cyaan"] .cursor__label { color: var(--room); }
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor { display: none; } }

/* --- Laadscherm --------------------------------------------------------- */
.laadscherm {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--cyaan);
  color: var(--blauw);
  display: grid;
  place-items: center;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--zwaar);
}
.laadscherm.weg { clip-path: inset(0 0 100% 0); }
.laadscherm__woord {
  display: flex;
  font-size: clamp(3.4rem, 15vw, 9rem);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
}
.laadscherm__woord .lt {
  opacity: 0;
  transform: translateY(60%);
  animation: laad-letter .7s var(--zwaar) forwards;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes laad-letter { to { opacity: 1; transform: none; } }
.laadscherm__teller {
  position: absolute;
  right: var(--marge);
  bottom: calc(var(--marge) + 26px);
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.laadscherm__balk {
  position: absolute;
  left: var(--marge);
  right: var(--marge);
  bottom: var(--marge);
  height: 3px;
  background: rgba(11, 47, 111, .22);
  overflow: hidden;
}
.laadscherm__balk i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--blauw);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s linear;
}

/* --- Balk --------------------------------------------------------------- */
.balk {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: background-color .4s var(--soepel), transform .5s var(--soepel),
              box-shadow .4s, color .4s;
}
.balk.verstopt { transform: translateY(-101%); }
.balk.vast { background: var(--blauw); box-shadow: 0 6px 30px -14px rgba(5, 18, 44, .6); }

/* De balk kleurt mee met de sectie waar hij overheen ligt. */
body[data-thema="room"]   .balk:not(.vast) { color: var(--inkt); }
body[data-thema="cyaan"] .balk:not(.vast) { color: var(--inkt); }
body[data-thema="inkt"]   .balk:not(.vast) { color: var(--room); }
body[data-thema="room"]   .balk:not(.vast) .menu > a,
body[data-thema="cyaan"] .balk:not(.vast) .menu > a { color: rgba(5, 18, 44, .68); }
body[data-thema="room"]   .balk:not(.vast) .menu > a:hover,
body[data-thema="cyaan"] .balk:not(.vast) .menu > a:hover { color: var(--inkt); background: rgba(5, 18, 44, .07); }
body[data-thema="room"]   .balk:not(.vast) .knop,
body[data-thema="cyaan"] .balk:not(.vast) .knop { background: var(--blauw); color: var(--room); }
body[data-thema="room"]   .balk:not(.vast) .knop::before,
body[data-thema="cyaan"] .balk:not(.vast) .knop::before { background: var(--inkt); }

.balk__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--balk-h);
}

.merk { display: inline-flex; align-items: baseline; gap: 10px; }
.merk__naam { font-size: 25px; font-weight: 800; letter-spacing: -.045em; }
.merk__naam::after { content: "."; color: var(--cyaan); }
body[data-thema="room"] .balk:not(.vast) .merk__naam::after,
body[data-thema="cyaan"] .balk:not(.vast) .merk__naam::after { color: var(--blauw-op); }
.merk__staart { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .55; }

.menu { display: flex; align-items: center; gap: 4px; }
.menu > a {
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--op-blauw);
  transition: color .25s, background-color .25s;
}
.menu > a:hover { color: var(--room); background: rgba(243, 247, 253, .12); }

.balk__rechts { display: flex; align-items: center; gap: 12px; }

.hamburger {
  display: none;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--cyaan);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.hamburger i { display: block; width: 19px; height: 2.5px; border-radius: 2px; background: var(--blauw);
  transition: transform .35s var(--zwaar), opacity .22s; }
.hamburger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.paneel {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--blauw-diep);
  color: var(--room);
  padding: 124px var(--marge) 44px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .65s var(--zwaar);
  visibility: hidden;
}
.paneel.open { clip-path: inset(0 0 0 0); visibility: visible; }
.paneel > a {
  font-size: clamp(2rem, 9vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.045em;
  padding-block: 12px;
  border-bottom: 1px solid var(--lijn-blauw);
  opacity: 0;
  transform: translateY(24px);
}
.paneel.open > a { animation: paneel-op .55s var(--zwaar) forwards; }
.paneel.open > a:nth-child(1) { animation-delay: .14s; }
.paneel.open > a:nth-child(2) { animation-delay: .19s; }
.paneel.open > a:nth-child(3) { animation-delay: .24s; }
.paneel.open > a:nth-child(4) { animation-delay: .29s; }
.paneel.open > a:nth-child(5) { animation-delay: .34s; }
.paneel.open > a:nth-child(6) { animation-delay: .39s; }
@keyframes paneel-op { to { opacity: 1; transform: none; } }
.paneel__voet { margin-top: auto; padding-top: 28px; display: grid; gap: 8px; font-size: 15px; color: var(--op-blauw); }

/* --- Knoppen ------------------------------------------------------------ */
.knop {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 15px 28px;
  border-radius: 999px;
  background: var(--cyaan);
  color: var(--inkt);
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s var(--zwaar), color .35s;
  will-change: transform;
}
.knop--groot { padding: 19px 34px; font-size: 16px; }
.knop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--room);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s var(--zwaar);
}
.knop:hover::before { transform: scaleY(1); }
.knop svg { width: 16px; height: 16px; flex: none; transition: transform .35s var(--zwaar); }
.knop:hover svg { transform: translateX(4px); }

.knop--leeg { background: transparent; color: var(--room); box-shadow: inset 0 0 0 2px var(--lijn-blauw); }
.knop--leeg::before { background: var(--room); }
.knop--leeg:hover { color: var(--inkt); }

.sectie--cyaan .knop { background: var(--blauw); color: var(--room); }
.sectie--cyaan .knop::before { background: var(--inkt); }
.knop--vol { width: 100%; }

.tekstlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 3px;
  color: var(--blauw-op);
}
.tekstlink::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: currentColor;
  transform-origin: right;
  transition: transform .4s var(--zwaar);
}
.tekstlink:hover::after { transform: scaleX(0); }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(126px, 15vw, 172px);
  padding-bottom: clamp(54px, 7vw, 84px);
  overflow: hidden;
}
.bal { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }
.bal--1 {
  right: -14vw; top: -10vw;
  width: 60vw; aspect-ratio: 1;
  border: clamp(38px, 6vw, 86px) solid rgba(61, 225, 242, .09);
}
.bal--2 {
  left: -14vw; bottom: -24vw;
  width: 44vw; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(27, 92, 232, .34) 0%, transparent 66%);
}
.bal--3 {
  right: 12vw; bottom: 6vw;
  width: 12vw; aspect-ratio: 1;
  background: var(--cyaan);
  opacity: .16;
}
.hero .wrap { position: relative; z-index: 1; }

/* Grid-kinderen rekken standaard op. De pil en de knoppenrij moeten
   op hun eigen breedte blijven. */
.hero__net { display: grid; justify-items: start; }
.hero__net > .hero__zij { justify-self: stretch; width: 100%; }
.hero h1 { margin-top: 24px; }
.hero h1 em { font-style: normal; color: var(--cyaan); }
.hero__onder { margin-top: 28px; max-width: 52ch; }
.hero__acties { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.hero__zij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: clamp(44px, 6vw, 72px);
}
.hero__feit {
  background: var(--room);
  color: var(--inkt);
  border-radius: 22px;
  padding: 24px;
  transition: transform .4s var(--veer), background-color .3s;
}
.hero__feit:nth-child(2) { background: var(--cyaan); }
/* Geen transform bij hover: het uitwijken hieronder zet een inline
   transform en die twee zouden elkaar overschrijven. */
.hero__feit:hover { box-shadow: 0 22px 44px -22px rgba(5, 18, 44, .55); }
.hero__feit b {
  display: block;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero__feit span { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 550; color: var(--inkt-zacht); }

.scroltip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 38px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--op-blauw);
}
.scroltip i { display: block; width: 52px; height: 2px; background: var(--lijn-blauw); position: relative; overflow: hidden; }
.scroltip i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cyaan);
  transform: translateX(-100%);
  animation: veeg 2.4s var(--soepel) infinite;
}
@keyframes veeg {
  0% { transform: translateX(-100%); }
  55% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* --- Regels die omhoog rollen ------------------------------------------ */
.regel { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.js .regel > span { display: block; transform: translateY(105%); transition: transform 1s var(--zwaar); }
.js .aan .regel > span { transform: none; }
.js .regel:nth-child(2) > span { transition-delay: .08s; }
.js .regel:nth-child(3) > span { transition-delay: .16s; }

/* --- Loopband ----------------------------------------------------------- */
.loopband {
  background: var(--cyaan);
  color: var(--inkt);
  padding-block: 22px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.loopband__spoor { display: flex; width: max-content; will-change: transform; }
.loopband__blok { display: flex; align-items: center; flex: none; }
.loopband__item {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding-inline: 26px;
  font-size: clamp(1.15rem, 2.1vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.loopband__item::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--blauw); }

/* --- Wie ---------------------------------------------------------------- */
.over__net {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(34px, 5vw, 78px);
  align-items: start;
}
.over__tekst p + p { margin-top: 20px; }
.over__tekst .groot {
  font-size: clamp(1.3rem, 2.3vw, 1.75rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.028em;
  color: var(--room);
}

.kaart-persoon { background: var(--room); color: var(--inkt); border-radius: 28px; padding: 22px; }
.portret {
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--blauw-op), var(--blauw) 70%);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.portret img { width: 100%; height: 100%; object-fit: cover; }
.portret span { font-size: clamp(2.8rem, 6vw, 3.8rem); font-weight: 800; letter-spacing: -.05em; color: var(--cyaan); }
.kaart-persoon__naam { margin-top: 20px; font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.kaart-persoon__rol { font-size: 13.5px; color: var(--inkt-zacht); margin-top: 2px; }
.kaart-persoon__regels {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--lijn-room);
  display: grid;
  gap: 10px;
  font-size: 13.5px;
  color: var(--inkt-zacht);
}
.kaart-persoon__regels li { display: flex; justify-content: space-between; gap: 14px; }
.kaart-persoon__regels b { color: var(--inkt); font-weight: 700; text-align: right; }

/* --- Werk: standaard onder elkaar, met JS zijwaarts --------------------- */
.baan { position: relative; padding-block: var(--sectie); }
.baan__kop { margin-bottom: clamp(34px, 4vw, 54px); }
.baan__titel { margin-top: 20px; }
.baan__hint { display: none; }
.baan__spoor { display: grid; gap: clamp(22px, 3vw, 34px); max-width: var(--wrap); margin-inline: auto; padding-inline: var(--marge); }

.zaak {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(24px, 3.4vw, 48px);
  align-items: center;
  background: #fff;
  border-radius: 30px;
  padding: clamp(22px, 2.8vw, 34px);
  box-shadow: 0 18px 44px -30px rgba(5, 18, 44, .5);
}

.zaak__nr { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; color: var(--blauw-op); }
.zaak__soort {
  display: inline-block;
  margin-left: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--blauw);
  color: var(--room);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.zaak__naam { margin-top: 14px; }
.zaak__tekst { margin-top: 12px; color: var(--inkt-zacht); font-size: 15.5px; max-width: 48ch; }
.zaak__cijfers { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 22px; }
.zaak__cijfer b {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--blauw);
}
.zaak__cijfer span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--inkt-zacht); }

.merkjes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.merkje {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--inkt-zacht);
  border: 1.5px solid var(--lijn-room);
  border-radius: 999px;
  padding: 5px 13px;
  transition: border-color .3s, color .3s;
}
.zaak:hover .merkje { border-color: rgba(11, 47, 111, .35); color: var(--blauw); }

.zaak__beeld { perspective: 1200px; }
.venster {
  border-radius: 16px;
  overflow: hidden;
  background: var(--room-2);
  box-shadow: 0 22px 50px -26px rgba(5, 18, 44, .65);
  transition: transform .5s var(--soepel);
  will-change: transform;
}
.venster__lijst { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--room-2); }
.venster__stip { width: 9px; height: 9px; border-radius: 50%; background: rgba(5, 18, 44, .16); flex: none; }
.venster__adres {
  margin-left: 10px; flex: 1;
  font-size: 11px; font-weight: 600; color: var(--inkt-zacht);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.venster__vlak { overflow: hidden; background: #fff; }
.venster__vlak img { width: 100%; transition: transform 1.1s var(--soepel); }
.zaak:hover .venster__vlak img { transform: scale(1.04); }

.geen-beeld {
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 12px;
  padding: 30px;
  background: var(--blauw);
  color: var(--room);
  position: relative;
  overflow: hidden;
}
.geen-beeld::before {
  content: "";
  position: absolute;
  right: -18%; top: -30%;
  width: 62%; aspect-ratio: 1;
  border-radius: 50%;
  border: 34px solid rgba(61, 225, 242, .12);
}
.geen-beeld b {
  position: relative;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.045em;
  color: var(--cyaan);
}
.geen-beeld span { position: relative; font-size: 13.5px; color: var(--op-blauw); max-width: 32ch; }

/* Zijwaartse modus, alleen als JS hem aanzet op een breed scherm. */
body.baan-aan .baan { padding-block: 0; }
body.baan-aan .baan__kleef {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--balk-h);
}
body.baan-aan .baan__kop { margin-bottom: clamp(20px, 2.6vw, 34px); }
body.baan-aan .baan__hint {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}
.baan__lijn { display: block; width: 60px; height: 2px; background: rgba(5, 18, 44, .14); position: relative; overflow: hidden; }
.baan__lijn i { position: absolute; inset: 0; background: var(--blauw); transform: scaleX(var(--baanp, 0)); transform-origin: left; }
body.baan-aan .baan__spoor {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(22px, 2.4vw, 34px);
  max-width: none;
  padding-inline: var(--marge);
  will-change: transform;
}
body.baan-aan .zaak {
  flex: none;
  width: min(1000px, 78vw);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}

/* --- Diensten: kaarten die op elkaar stapelen -------------------------- */
.stapel { display: grid; gap: 16px; }
.dienst {
  display: grid;
  grid-template-columns: 66px minmax(0, .8fr) minmax(0, 1.5fr);
  gap: 24px;
  align-items: start;
  background: #fff;
  border-radius: 24px;
  padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 14px 36px -28px rgba(5, 18, 44, .5);
  position: sticky;
  top: calc(var(--balk-h) + 22px + var(--n) * 16px);
  transition: box-shadow .4s;
}
.dienst:hover { box-shadow: 0 22px 50px -28px rgba(5, 18, 44, .6); }
.dienst__nr {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cyaan);
  color: var(--blauw);
  font-size: 14px;
  font-weight: 800;
}
.dienst__naam { font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -.04em; }
.dienst__uitleg { color: var(--inkt-zacht); font-size: 16px; max-width: 56ch; }

/* --- Niet doen ---------------------------------------------------------- */
.nietdoen__net {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}
.nietdoen__lijst { display: grid; gap: 2px; }
.nietdoen__lijst li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-block: 16px;
  border-bottom: 1px solid var(--lijn-blauw);
  color: var(--op-blauw);
}
.nietdoen__lijst li::before {
  content: "";
  width: 20px; height: 3px;
  border-radius: 3px;
  background: var(--cyaan);
  flex: none;
  margin-top: 11px;
}
.nietdoen__slot {
  margin-top: 28px;
  padding: 24px 26px;
  border-radius: 20px;
  background: rgba(243, 247, 253, .08);
  color: var(--room);
  font-size: 16px;
  font-weight: 550;
  max-width: 60ch;
}

/* --- Werkwijze ---------------------------------------------------------- */
.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stap {
  background: rgba(243, 247, 253, .07);
  border-radius: 26px;
  padding: clamp(24px, 3vw, 34px);
  transition: background-color .35s, transform .4s var(--veer);
}
.stap:hover { background: rgba(243, 247, 253, .13); transform: translateY(-7px); }
.stap__nr {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cyaan);
  color: var(--blauw);
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 20px;
}
.stap h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.035em; }
.stap p { margin-top: 12px; color: var(--op-blauw); font-size: 15.5px; }
.stap__tijd {
  display: inline-block;
  margin-top: 18px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(243, 247, 253, .12);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}

/* --- Vragen ------------------------------------------------------------- */
.vragen { max-width: 940px; margin-inline: auto; }
.vraag { background: #fff; border-radius: 20px; margin-bottom: 12px; overflow: hidden; transition: box-shadow .3s; }
.vraag.open { box-shadow: 0 16px 40px -26px rgba(5, 18, 44, .55); }
.vraag__knop {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: clamp(19px, 2.2vw, 25px) clamp(20px, 2.4vw, 28px);
  text-align: left;
  cursor: pointer;
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--inkt);
}
/* De oude regels voor dit teken stonden hier. Die centreerden met
   translate(-50%,-50%), terwijl de nieuwe verderop met marges centreert.
   Samen leverde dat een scheef plusteken op, want de rotatie in de nieuwe
   regel overschreef de translate van de oude. Eén methode, niet twee. */
.vraag__antwoord { overflow: hidden; height: 0; transition: height .5s var(--zwaar); }
.vraag__antwoord p { padding: 0 clamp(20px, 2.4vw, 28px) 26px; color: var(--inkt-zacht); font-size: 16px; max-width: 68ch; }

/* --- Contact ------------------------------------------------------------ */
.contact__net {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}
.contact__direct { margin-top: 32px; display: grid; gap: 12px; }
.contact__direct a {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  font-weight: 750;
  letter-spacing: -.025em;
  transition: color .25s;
}
.contact__direct a:hover { color: var(--blauw); }
.contact__direct svg { width: 18px; height: 18px; flex: none; color: var(--blauw); }

.formulier { background: var(--room); border-radius: 30px; padding: clamp(24px, 3.2vw, 38px); box-shadow: 0 24px 56px -34px rgba(5, 18, 44, .6); }
.veld { margin-bottom: 18px; position: relative; }
.veld label {
  display: block;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  margin-bottom: 8px;
}
.veld input, .veld select, .veld textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 450;
  color: var(--inkt);
  background: #fff;
  border: 2px solid transparent;
  border-radius: 14px;
  appearance: none;
  transition: border-color .3s, box-shadow .3s;
}
.veld textarea { min-height: 118px; resize: vertical; line-height: 1.55; }
.veld select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230B2F6F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  padding-right: 42px;
}
.veld input::placeholder, .veld textarea::placeholder { color: #9AA69F; }
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: none;
  border-color: var(--blauw);
  box-shadow: 0 0 0 4px rgba(11, 47, 111, .13);
}
.veld.fout input, .veld.fout select, .veld.fout textarea {
  border-color: #C0402B;
  box-shadow: 0 0 0 4px rgba(192, 64, 43, .12);
}
.veld__fout { display: none; margin-top: 7px; font-size: 13px; font-weight: 600; color: #A8331F; }
.veld.fout .veld__fout { display: block; }

.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.verstopt-veld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.akkoord {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--inkt-zacht);
  line-height: 1.5;
  margin-bottom: 22px;
  cursor: pointer;
}
.akkoord input { width: 19px; height: 19px; margin-top: 1px; flex: none; accent-color: var(--blauw); }

.melding { display: none; padding: 15px 18px; border-radius: 14px; font-size: 15px; font-weight: 550; margin-bottom: 22px; line-height: 1.5; }
.melding.zichtbaar { display: block; }
.melding--ok  { background: var(--blauw); color: var(--room); }
.melding--nok { background: #F7DDD6; color: #A8331F; }

.knop[data-bezig="true"] { pointer-events: none; opacity: .65; }
.tol { display: none; width: 16px; height: 16px; }
.knop[data-bezig="true"] .tol { display: block; animation: draai .7s linear infinite; }
.knop[data-bezig="true"] .pijl { display: none; }
@keyframes draai { to { transform: rotate(360deg); } }

.klein { margin-top: 16px; font-size: 12.5px; color: var(--inkt-zacht); text-align: center; }

/* --- Voet --------------------------------------------------------------- */
.voet {
  background: var(--inkt);
  color: var(--op-blauw);
  border-radius: var(--bocht) var(--bocht) 0 0;
  padding-bottom: 28px;
  overflow: hidden;
}
.voet__kinetisch { overflow: hidden; padding-block: clamp(28px, 4vw, 50px); border-bottom: 1px solid var(--lijn-blauw); }
.voet__spoor {
  display: flex;
  width: max-content;
  font-size: clamp(2.4rem, 8vw, 6rem);
  font-weight: 800;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(243, 247, 253, .3);
  white-space: nowrap;
  will-change: transform;
}
.voet__spoor b { color: var(--cyaan); -webkit-text-stroke: 0; font-weight: 800; }
.voet__net {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: 36px;
  padding-block: clamp(40px, 5vw, 60px) 38px;
}
.voet .merk { color: var(--room); }
.voet__over { margin-top: 18px; font-size: 14.5px; max-width: 38ch; }
.voet h4 { font-size: 11.5px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; color: var(--cyaan); margin-bottom: 16px; }
.voet__links { display: grid; gap: 10px; font-size: 14.5px; }
.voet__links a { transition: color .25s; }
.voet__links a:hover { color: var(--cyaan); }
.voet__onder {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--lijn-blauw);
  font-size: 12.5px;
  opacity: .7;
}

/* --- Inzweven ----------------------------------------------------------- */
.js .op { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--zwaar), transform .8s var(--zwaar); }
.js .op.aan { opacity: 1; transform: none; }
.js .veeg-op { clip-path: inset(0 0 100% 0); transition: clip-path 1.05s var(--zwaar); }
.js .veeg-op.aan { clip-path: inset(0 0 0 0); }
.js [data-traag] { transition-delay: var(--traag, 0s); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scheef { transform: none !important; }
  .js .op, .js .veeg-op, .js .regel > span, .js .lt {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .js .cirkel ellipse { stroke-dashoffset: 0; animation: none; }
  .scroltip i::after, .label::before { animation: none !important; }
  .laadscherm { display: none; }
}

/* --- Responsief --------------------------------------------------------- */
@media (max-width: 1040px) {
  .over__net, .nietdoen__net, .contact__net { grid-template-columns: 1fr; }
  .kaart-persoon { max-width: 400px; }
  .zaak { grid-template-columns: 1fr; }
  .dienst { grid-template-columns: 46px 1fr; }
  .dienst__uitleg { grid-column: 2; }
  .stappen { grid-template-columns: 1fr; }
  .hero__zij { grid-template-columns: repeat(2, 1fr); }
  .voet__net { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .menu { display: none; }
  .hamburger { display: flex; }
  .balk__rechts .knop { display: none; }
  .hero { padding-top: 118px; }
  .bal--1 { right: -32vw; width: 92vw; }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .veld-rij { grid-template-columns: 1fr; gap: 0; }
  .hero__zij { grid-template-columns: 1fr; }
  .voet__net { grid-template-columns: 1fr; gap: 28px; }
  .dienst { grid-template-columns: 1fr; gap: 10px; }
  .zaak__cijfers { gap: 20px; }
  .scroltip { display: none; }
  .zaak__soort { margin-left: 0; margin-top: 8px; }
}

@media print {
  .balk, .paneel, .korrel, .cursor, .laadscherm, .voortgang, .formulier, .scroltip { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   Extra lagen: deeltjesveld, rollende cijfers, cijfersectie, case-verdieping
   ========================================================================== */

/* --- Deeltjesveld in de hero ------------------------------------------- */
.doek {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--soepel) .3s;
}
.hero.aan .doek { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .doek { display: none; } }

/* --- Cijfers die als een rolteller omhoog draaien ---------------------- */
.rol {
  display: inline-flex;
  overflow: hidden;
  vertical-align: baseline;
  line-height: 1;
}
.rol__kolom {
  display: block;
  overflow: hidden;
  height: 1em;
}
.rol__band {
  display: block;
  transition: transform 1.5s var(--zwaar);
  transform: translateY(0);
  will-change: transform;
}
.rol__band span { display: block; height: 1em; }

/* --- Vastgepinde cijfersectie ------------------------------------------ */
.cijferbaan { position: relative; background: var(--blauw-diep); }
.cijferbaan__kleef {
  position: sticky;
  top: 0;
  min-height: min(100svh, 640px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(60px, 8vw, 100px);
  overflow: hidden;
}
.cijferbaan__gloed {
  position: absolute;
  left: 50%; top: 50%;
  width: 80vw; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(61, 225, 242, .12) 0%, transparent 62%);
  pointer-events: none;
}
.cijferbaan .wrap { position: relative; z-index: 1; }

.cijferlijst { display: grid; gap: clamp(18px, 2.4vw, 34px); margin-top: clamp(34px, 4vw, 54px); }
.cijferrij {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: baseline;
  padding-bottom: clamp(16px, 2vw, 26px);
  border-bottom: 1px solid var(--lijn-blauw);
}
.cijferrij__getal {
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .9;
  color: var(--cyaan);
  font-variant-numeric: tabular-nums;
}
.cijferrij__tekst { font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--op-blauw); font-weight: 550; }
.cijferbaan__voetnoot { margin-top: 26px; font-size: 13px; color: rgba(243, 247, 253, .45); }

/* --- Glans die één keer over een kop veegt ----------------------------- */
.glans { position: relative; overflow: hidden; }
.js .glans::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(61, 225, 242, .5) 50%, transparent 62%);
  transform: translateX(-110%);
  pointer-events: none;
}
.js .glans.aan::after { animation: veeg-glans 1.5s var(--soepel) .5s; }
@keyframes veeg-glans { to { transform: translateX(110%); } }

/* --- Case-verdieping --------------------------------------------------- */
.zaak__blokken {
  display: grid;
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--lijn-room);
}
.zaak__blok { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: baseline; }
.zaak__blok dt {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blauw-op);
}
.zaak__blok dd { margin: 0; font-size: 15px; color: var(--inkt-zacht); }
.zaak__blok:last-child dd { color: var(--inkt); font-weight: 600; }

/* --- Netwerkcase zonder beeld ------------------------------------------ */
.netwerk {
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  background: var(--blauw-diep);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.netwerk svg { width: 100%; height: 100%; }
.netwerk__punt { fill: var(--cyaan); opacity: .85; }
.netwerk__lijn { stroke: rgba(61, 225, 242, .3); stroke-width: 1; fill: none; }
.js .netwerk__lijn { stroke-dasharray: 300; stroke-dashoffset: 300; }
.js .aan .netwerk__lijn { animation: teken 1.6s var(--soepel) forwards; }
.js .netwerk__punt { opacity: 0; transform-box: fill-box; transform-origin: center; }
.js .aan .netwerk__punt { animation: punt-op .5s var(--veer) forwards; }
@keyframes punt-op { from { opacity: 0; transform: scale(0); } to { opacity: .85; transform: none; } }
.netwerk__tekst {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px 24px;
  background: linear-gradient(0deg, rgba(6, 31, 76, .95), transparent);
  text-align: center;
}
.netwerk__tekst b { display: block; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.045em; color: var(--cyaan); }
.netwerk__tekst span { font-size: 13px; color: var(--op-blauw); }

@media (max-width: 620px) {
  .cijferrij { grid-template-columns: 1fr; gap: 6px; }
  .zaak__blok { grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================================
   Gemeten resultaten
   ========================================================================== */
.meting { display: grid; gap: 12px; }
.meting__rij {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 28px);
  align-items: center;
  background: rgba(243, 247, 253, .06);
  border-radius: 18px;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px);
  transition: background-color .3s, transform .35s var(--veer);
}
.meting__rij:hover { background: rgba(243, 247, 253, .1); transform: translateX(6px); }
.meting__kop {
  background: none;
  padding-block: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(243, 247, 253, .45);
}
.meting__kop:hover { background: none; transform: none; }
.meting__naam { font-weight: 750; font-size: clamp(15px, 1.7vw, 17px); letter-spacing: -.02em; }
.meting__naam small { display: block; font-weight: 450; font-size: 12.5px; color: rgba(243, 247, 253, .5); }
.meting__waarde {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.meting__waarde i {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--cyaan);
  align-self: center;
}
.meting__waarde.let i { background: #FFB020; }
.meting__waarde small { font-size: 12px; font-weight: 500; color: rgba(243, 247, 253, .5); letter-spacing: 0; }
.meting__uitleg {
  margin-top: 26px;
  display: grid;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(243, 247, 253, .55);
  max-width: 74ch;
}
.meting__uitleg b { color: var(--room); font-weight: 650; }

/* Wat een dienst oplevert */
.dienst__oplevert {
  grid-column: 3;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--blauw-op);
}
.dienst__oplevert::before {
  content: "";
  width: 16px; height: 2px;
  border-radius: 2px;
  background: var(--blauw-op);
  flex: none;
}

@media (max-width: 900px) {
  .meting__rij { grid-template-columns: 1fr 1fr; gap: 14px; }
  .meting__rij .meting__naam { grid-column: 1 / -1; }
  .meting__kop { display: none; }
  .meting__waarde small { display: block; }
}
@media (max-width: 1040px) {
  .dienst__oplevert { grid-column: 2; }
}
@media (max-width: 620px) {
  .dienst__oplevert { grid-column: 1; }
}

/* ==========================================================================
   Projectraster en popup
   ========================================================================== */

/* --- Kaart die je kunt aanklikken -------------------------------------- */
.zaak { cursor: pointer; }
.zaak__meer {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  font-size: 14.5px;
  font-weight: 750;
  color: var(--blauw-op);
}
.zaak__meer svg { width: 15px; height: 15px; transition: transform .35s var(--zwaar); }
.zaak:hover .zaak__meer svg { transform: translateX(4px); }
.zaak__kort { margin-top: 12px; color: var(--inkt-zacht); font-size: 15.5px; max-width: 46ch; }

/* --- Raster met de rest van het werk ----------------------------------- */
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.kaartje {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  width: 100%;
  box-shadow: 0 12px 30px -26px rgba(5, 18, 44, .55);
  transition: transform .4s var(--zwaar), box-shadow .4s var(--zwaar);
}
.kaartje:hover { transform: translateY(-7px); box-shadow: 0 26px 54px -28px rgba(5, 18, 44, .6); }
.kaartje__beeld {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--room-2);
  position: relative;
}
.kaartje__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform 1s var(--soepel); }
.kaartje:hover .kaartje__beeld img { transform: scale(1.06); }
.kaartje__leeg {
  width: 100%; height: 100%;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  padding: 20px;
  background: var(--blauw);
  color: var(--room);
}
.kaartje__leeg b { font-size: 1.35rem; font-weight: 800; letter-spacing: -.04em; color: var(--cyaan); }
.kaartje__leeg span { font-size: 12px; color: var(--op-blauw); max-width: 28ch; }
.kaartje__tekst { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.kaartje__soort {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blauw-op);
}
.kaartje__naam { margin-top: 8px; font-size: 1.18rem; font-weight: 800; letter-spacing: -.035em; color: var(--inkt); }
.kaartje__kort { margin-top: 8px; font-size: 14.5px; color: var(--inkt-zacht); flex: 1; }
.kaartje__voet {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--lijn-room);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--blauw-op);
}
.kaartje__voet span:last-child { transition: transform .3s var(--zwaar); }
.kaartje:hover .kaartje__voet span:last-child { transform: translateX(4px); }

/* --- Popup -------------------------------------------------------------- */
.modaal {
  width: min(1040px, calc(100vw - 2 * var(--marge)));
  max-height: min(88svh, 920px);
  padding: 0;
  border: 0;
  border-radius: 26px;
  background: var(--room);
  color: var(--inkt);
  overflow: hidden;
}
.modaal::backdrop {
  background: rgba(5, 18, 44, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modaal[open] { animation: modaal-op .45s var(--zwaar); }
.modaal[open]::backdrop { animation: waas-op .45s var(--soepel); }
@keyframes modaal-op {
  from { opacity: 0; transform: translateY(26px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes waas-op { from { opacity: 0; } to { opacity: 1; } }

.modaal__binnen { overflow-y: auto; max-height: inherit; overscroll-behavior: contain; }
.modaal__dicht {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 3;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(5, 18, 44, .55);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background-color .25s, transform .3s var(--veer);
}
.modaal__dicht:hover { background: var(--blauw); transform: rotate(90deg); }
.modaal__dicht svg { width: 18px; height: 18px; }

.modaal__beeld { background: var(--blauw-diep); position: relative; }
.modaal__beeld img { width: 100%; display: block; }
.modaal__beeld .netwerk, .modaal__beeld .geen-beeld { border-radius: 0; aspect-ratio: 21 / 8; }

.modaal__kop { padding: clamp(24px, 3vw, 36px) clamp(24px, 3.4vw, 44px) 0; }
.modaal__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blauw-op);
}
.modaal__meta span + span::before { content: "/"; margin-right: 10px; opacity: .45; }
.modaal__titel {
  margin-top: 12px;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.02;
}

.modaal__lijf {
  padding: clamp(20px, 2.6vw, 30px) clamp(24px, 3.4vw, 44px) clamp(28px, 3.4vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(24px, 3.4vw, 50px);
  align-items: start;
}
.modaal__verhaal p { font-size: 16.5px; line-height: 1.62; color: var(--inkt-zacht); }
.modaal__verhaal p + p { margin-top: 16px; }

.modaal__zij { display: grid; gap: 24px; }
.modaal__kader {
  background: #fff;
  border-radius: 18px;
  padding: 20px 22px;
}
.modaal__kader h4 {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blauw-op);
  margin-bottom: 14px;
}
.modaal__kader dl { display: grid; gap: 14px; margin: 0; }
.modaal__kader dt {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}
.modaal__kader dd { margin: 4px 0 0; font-size: 14.5px; color: var(--inkt); }
.modaal__kader ul { display: grid; gap: 11px; }
.modaal__kader li { display: flex; gap: 11px; font-size: 14.5px; color: var(--inkt-zacht); }
.modaal__kader li::before {
  content: "";
  width: 14px; height: 2px;
  border-radius: 2px;
  background: var(--blauw-op);
  flex: none;
  margin-top: 10px;
}
.modaal__cijfers { display: flex; flex-wrap: wrap; gap: 22px; }
.modaal__cijfer b {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--blauw);
}
.modaal__cijfer span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--inkt-zacht); }
.modaal__voet {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--lijn-room);
}

@media (max-width: 860px) {
  .modaal__lijf { grid-template-columns: 1fr; }
  .modaal { max-height: 92svh; border-radius: 20px; }
}

/* --- Blokken die leefden als steen -------------------------------------
   De transition van deze regels staat verderop, bij de doorhaling, want
   die moet text-decoration-color meenemen. Hier alleen de hover zelf. */
.nietdoen__lijst li:hover { color: var(--room); transform: translateX(10px); border-color: var(--cyaan); }
.nietdoen__lijst li::before { transition: width .35s var(--zwaar), background-color .3s; }
.nietdoen__lijst li:hover::before { width: 30px; }

.stap { position: relative; overflow: hidden; }
.stap::after {
  content: "";
  position: absolute;
  right: -30%; top: -60%;
  width: 70%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 225, 242, .16), transparent 68%);
  opacity: 0;
  transition: opacity .45s var(--soepel);
  pointer-events: none;
}
.stap:hover::after { opacity: 1; }
.stap__nr { transition: transform .4s var(--veer); }
.stap:hover .stap__nr { transform: scale(1.14) rotate(-8deg); }

/* Zonder popup-ondersteuning staan de dialogen als gewone blokken onderaan.
   Zodra JS ze kan openen, halen we ze uit de stroom. */
dialog.modaal:not([open]) { display: none; }
html:not(.heeft-popups) dialog.modaal {
  display: block;
  position: static;
  max-width: var(--wrap);
  margin: 0 auto clamp(20px, 3vw, 34px);
  max-height: none;
}
html:not(.heeft-popups) .modaal__dicht,
html:not(.heeft-popups) .zaak__meer { display: none; }
html:not(.heeft-popups) .zaak, html:not(.heeft-popups) .kaartje { cursor: default; }

/* ==========================================================================
   Boven de vouw: wel bewegen, niet vervagen
   --------------------------------------------------------------------------
   Elementen met opacity 0 tellen niet mee voor Largest Contentful Paint.
   De hero-paragraaf startte op nul en werd pas na het laadscherm zichtbaar,
   waardoor LCP op 2,6 sec uitkwam terwijl de pagina zelf in 116 ms staat.
   Boven de vouw schuiven de blokken daarom alleen, zonder te vervagen.
   ========================================================================== */
.js .hero .op {
  opacity: 1;
  transform: translateY(26px);
}
.js .hero .op.aan { transform: none; }

/* --- WebGL-laag onder het deeltjesveld --------------------------------- */
.vloed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s var(--soepel) .2s;
}
.hero.aan .vloed { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .vloed { display: none; } }

/* ==========================================================================
   Uitspraak die zich woord voor woord vult tijdens het scrollen
   ========================================================================== */
.uitspraak {
  position: relative;
  background: var(--blauw-diep);
}
.uitspraak__kleef {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(80px, 12vw, 140px);
  overflow: hidden;
}
.uitspraak__gloed {
  position: absolute;
  left: 12%; top: 50%;
  width: 70vw; aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(27, 92, 232, .20) 0%, transparent 62%);
  pointer-events: none;
}
.uitspraak .wrap { position: relative; z-index: 1; }
.uitspraak__tekst {
  font-size: clamp(1.7rem, 4.4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.18;
  max-width: 22ch;
  text-wrap: balance;
}
.woord {
  display: inline-block;
  color: rgba(243, 247, 253, .18);
  transition: color .45s var(--soepel), transform .45s var(--zwaar);
}
.woord--klem { color: rgba(61, 225, 242, .22); }
.js .woord.aan { color: var(--room); }
.js .woord--klem.aan { color: var(--cyaan); }
.uitspraak__slot {
  margin-top: clamp(26px, 3vw, 40px);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--op-blauw);
  max-width: 44ch;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--zwaar), transform .7s var(--zwaar);
}
.js .uitspraak.vol .uitspraak__slot { opacity: 1; transform: none; }

/* Zonder JS en bij beweging beperken staat alles gewoon leesbaar. */
html:not(.js) .woord,
html:not(.js) .uitspraak__slot { color: var(--room); opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .uitspraak__kleef { position: static; min-height: 0; }
  .woord { color: var(--room) !important; }
  .woord--klem { color: var(--cyaan) !important; }
  .uitspraak__slot { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Wat ik niet doe: de regels worden doorgestreept
   ========================================================================== */
/* Een echte doorhaling in plaats van een getekende streep. Een absolute
   lijn op 50% valt bij een regel die omloopt precies in het gat ertussen;
   text-decoration pakt elke regel wel goed. */
.nietdoen__lijst li {
  position: relative;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: transparent;
  transition: color .3s, transform .35s var(--zwaar), border-color .3s,
              text-decoration-color .5s var(--soepel);
}
.js .nietdoen__lijst li.aan {
  text-decoration-color: rgba(61, 225, 242, .85);
  transition-delay: 0s, 0s, 0s, calc(var(--r, 0) * 140ms + .25s);
}
.nietdoen__lijst li:hover { text-decoration-color: rgba(61, 225, 242, .4); }

/* ==========================================================================
   Secties wijken terug zodra ze het scherm uit lopen
   --------------------------------------------------------------------------
   Puur CSS via een scroll-tijdlijn. Waar de browser dat niet kent gebeurt er
   simpelweg niets, dus er is geen terugval nodig. Niet op de vastgeplakte
   blokken, want een transform daarop sloopt position: sticky.
   ========================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sectie > .wrap,
    .raster,
    .voet__net {
      animation: wijk-terug linear both;
      animation-timeline: view();
      animation-range: exit 10% exit 90%;
      will-change: transform, opacity;
    }
    @keyframes wijk-terug {
      to { transform: scale(.955) translateY(-26px); opacity: .3; }
    }
  }
}

/* ==========================================================================
   Hoofdstukkenlijst links, met de voortgang erin
   ========================================================================== */
.strip {
  position: fixed;
  left: clamp(14px, 2vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 150;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 10px 6px;
  opacity: 0;
  transition: opacity .5s var(--soepel);
}
.strip.zichtbaar { opacity: 1; }
.strip__stap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 6px;
  border-radius: 8px;
  cursor: pointer;
  color: inherit;
}
.strip__lijn {
  display: block;
  width: 22px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .28;
  transition: width .4s var(--zwaar), opacity .3s;
}
.strip__naam {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s var(--soepel), transform .3s var(--zwaar);
  white-space: nowrap;
}
.strip__stap:hover .strip__lijn { opacity: .6; width: 30px; }
.strip__stap:hover .strip__naam { opacity: .7; transform: none; }
.strip__stap.nu .strip__lijn { width: 38px; opacity: 1; background: var(--cyaan); }
.strip__stap.nu .strip__naam { opacity: 1; transform: none; }
body[data-thema="room"] .strip, body[data-thema="cyaan"] .strip { color: var(--inkt); }
body[data-thema="room"] .strip__stap.nu .strip__lijn,
body[data-thema="cyaan"] .strip__stap.nu .strip__lijn { background: var(--blauw-op); }

@media (min-width: 1400px) { .strip { display: flex; } }
@media (prefers-reduced-motion: reduce) { .strip__naam { opacity: .7; transform: none; } }

.baan__teller { display: none; }

/* ==========================================================================
   MOBIEL
   --------------------------------------------------------------------------
   Op een telefoon werd de werkbaan acht kaarten onder elkaar, samen goed
   voor ruim acht schermen scrollen. Hier wordt het een carrousel die je
   opzij veegt, met de details in de popup.
   ========================================================================== */
@media (max-width: 1039px) {
  body:not(.baan-aan) .baan__spoor {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: var(--marge);
    padding-bottom: 8px;
    max-width: none;
    /* Randen laten uitvloeien zodat je ziet dat er meer is. */
    mask-image: linear-gradient(90deg, transparent 0, #000 18px,
                #000 calc(100% - 18px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px,
                #000 calc(100% - 18px), transparent 100%);
  }
  body:not(.baan-aan) .baan__spoor::-webkit-scrollbar { display: none; }

  body:not(.baan-aan) .baan__spoor > .zaak {
    flex: 0 0 auto;
    width: min(340px, 82vw);
    scroll-snap-align: center;
    grid-template-columns: 1fr;
  }
  /* De drie blokken staan in de popup, op de kaart zelf zou het te veel zijn. */
  .baan__spoor > .zaak .zaak__blokken { display: none; }
  .baan__spoor > .zaak .zaak__beeld { order: -1; }

  .baan__teller {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding-inline: var(--marge);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--inkt-zacht);
  }
  .baan__teller i {
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: rgba(5, 18, 44, .12);
    position: relative;
    overflow: hidden;
  }
  .baan__teller i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--blauw-op);
    border-radius: 3px;
    transform: scaleX(var(--kp, .12));
    transform-origin: left;
    transition: transform .25s var(--soepel);
  }

  /* Aanraakdoelen op maat. Alles waar je met een duim op moet kunnen. */
  .voet__links a,
  .menu > a,
  .contact__direct a,
  .tekstlink { min-height: 44px; display: flex; align-items: center; }
  .voet__links { gap: 2px; }
  .akkoord input { width: 26px; height: 26px; }
  .akkoord { padding-block: 6px; }

  /* De uitspraak hoeft op een telefoon geen heel scherm leeg te laten. */
  .uitspraak__kleef { min-height: 88svh; padding-block: clamp(50px, 12vw, 90px); }
}

@media (max-width: 620px) {
  .baan__teller { font-size: 11px; }
  .zaak__cijfers { gap: 18px; }
}

/* ==========================================================================
   MOBIEL, deel 2: de kaarten draaien mee en er komt een duimbalk
   ========================================================================== */
@media (max-width: 1039px) {
  /* Kaarten schalen en kantelen naar hun plek in de carrousel. Dit is een
     scroll-tijdlijn op de horizontale as, dus het loopt op de compositor
     en kost geen JavaScript. Kent de browser het niet, dan staan de
     kaarten gewoon recht. */
  @supports (animation-timeline: view(x)) {
    @media (prefers-reduced-motion: no-preference) {
      body:not(.baan-aan) .baan__spoor > .zaak {
        animation: kaart-zwenk linear both;
        animation-timeline: view(x);
        animation-range: entry 0% exit 100%;
        transform-origin: center;
        will-change: transform, opacity;
      }
      @keyframes kaart-zwenk {
        0%   { transform: scale(.84) rotate(-3.5deg) translateY(14px); opacity: .45; }
        50%  { transform: none; opacity: 1; }
        100% { transform: scale(.84) rotate(3.5deg) translateY(14px); opacity: .45; }
      }
    }
  }

  /* Even indrukken geeft een reactie, zoals in een app. */
  .zaak:active, .kaartje:active { transform: scale(.975); }
  .zaak, .kaartje { -webkit-tap-highlight-color: transparent; }
}

/* --- Duimbalk onderin, binnen bereik van je duim ------------------------ */
.duimbalk {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 180;
  display: none;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(6, 31, 76, .82);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 14px 40px -14px rgba(5, 18, 44, .8),
              inset 0 1px 0 rgba(243, 247, 253, .12);
  transform: translateY(140%);
  transition: transform .55s var(--zwaar);
}
/* Niet .op gebruiken: die klasse betekent elders "verborgen tot je
   scrollt" en zet opacity op 0. */
.duimbalk.zichtbaar { transform: none; }
.duimbalk a {
  flex: 1;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 750;
  color: var(--room);
  -webkit-tap-highlight-color: transparent;
}
.duimbalk a svg { width: 17px; height: 17px; flex: none; }
.duimbalk a:active { background: rgba(243, 247, 253, .1); }
.duimbalk a.hoofd { background: var(--cyaan); color: var(--inkt); flex: 1.4; }
.duimbalk a.hoofd:active { background: var(--room); }

@media (max-width: 820px) {
  .duimbalk { display: flex; }
  /* Ruimte onderaan zodat de voet niet onder de balk verdwijnt. */
  .voet { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .duimbalk { transition: none; }
}

/* ==========================================================================
   Het beeld vliegt van de kaart naar de popup
   --------------------------------------------------------------------------
   Tijdens de overgang mag de eigen openingsanimatie van de dialoog niet
   draaien: dan wordt de momentopname midden in die animatie genomen en
   landt het beeld naast zijn plek.
   ========================================================================== */
.modaal.geen-op[open],
.modaal.geen-op[open]::backdrop { animation: none; }

::view-transition-group(zaakbeeld) {
  animation-duration: .42s;
  animation-timing-function: var(--zwaar);
}
::view-transition-old(zaakbeeld),
::view-transition-new(zaakbeeld) { animation-duration: .42s; }

/* ==========================================================================
   Meetbalken: hoeveel van de norm er op is
   ========================================================================== */
.meting__waarde { position: relative; padding-bottom: 13px; }
.meting__waarde::before,
.meting__waarde::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 3px;
}
.meting__waarde::before { background: rgba(243, 247, 253, .14); }   /* de norm */
.meting__waarde::after {                                            /* wat ervan op is */
  background: var(--cyaan);
  transform: scaleX(var(--deel, 1));
  transform-origin: left;
  transition: transform 1.1s var(--zwaar);
}
.meting__waarde.let::after { background: #FFB020; }
/* De kopregel heeft geen waarden, dus daar hoort geen balkje. */
.meting__kop .meting__waarde::before,
.meting__kop .meting__waarde::after { display: none; }

/* Standaard verborgen. De mediaquery hieronder zet hem aan op een telefoon.
   Deze regel MOET voor de mediaquery staan, anders wint hij altijd. */
.modaal__kopbalk { display: none; }

/* ==========================================================================
   MOBIEL: de popup wordt een blad dat van onder omhoog komt
   --------------------------------------------------------------------------
   Een gecentreerde dialoog met marge rondom voelt op een telefoon als een
   website. Een blad dat vanaf de onderrand omhoog schuift en dat je met je
   duim weer weg kunt vegen voelt als een app.
   ========================================================================== */
@media (max-width: 820px) {
  .modaal {
    width: 100%;
    max-width: 100%;
    max-height: 93svh;
    margin: 0;
    margin-top: auto;                 /* tegen de onderrand */
    border-radius: 26px 26px 0 0;
    overscroll-behavior: contain;
    touch-action: none;               /* wij regelen het slepen zelf */
  }
  .modaal[open] { animation: blad-op .42s var(--zwaar); }
  @keyframes blad-op {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }
  .modaal.sleept { transition: none; }
  .modaal.sluit { transform: translateY(100%); transition: transform .3s var(--soepel); }

  /* Kopbalk met handvat. Blijft bovenaan plakken zodat de sluitknop
     altijd binnen bereik van je duim blijft, ook als je doorscrollt. */
  .modaal__kopbalk {
    display: block;
    position: sticky;
    top: 0;
    z-index: 4;
    padding: 12px 0 10px;
    /* Dekkend, plus een schaduw in dezelfde kleur zodat de tekst eronder
       netjes wegvaagt in plaats van door de knop heen te schijnen. */
    background: var(--room);
    box-shadow: 0 14px 18px -8px var(--room);
    cursor: grab;
  }
  .modaal__greep {
    display: block;
    width: 42px; height: 5px;
    margin: 0 auto;
    border-radius: 5px;
    background: rgba(5, 18, 44, .22);
  }
  .modaal__binnen { max-height: 93svh; touch-action: pan-y; }

  /* De sluitknop plakt mee met de kopbalk in plaats van weg te scrollen.
     Dekkende achtergrond, anders lees je de tekst er dwars doorheen. */
  .modaal__dicht {
    position: sticky;
    top: 6px;
    z-index: 5;
    float: right;
    margin: -38px 12px -44px 0;
    width: 42px; height: 42px;
    background: var(--blauw);
  }
  .modaal__lijf { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   MOBIEL: dichter raster en stapelende dienstkaarten
   ========================================================================== */
@media (max-width: 1039px) {
  /* Twee kolommen scheelt de helft aan scrollen zonder dat het krap wordt. */
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kaartje__tekst { padding: 15px 16px 17px; }
  .kaartje__naam { font-size: 1.02rem; }
  .kaartje__kort { font-size: 13px; }
  .kaartje__soort { font-size: 9.5px; letter-spacing: .1em; }
  .kaartje__voet { font-size: 12px; margin-top: 12px; padding-top: 11px; }

  /* Ook op een telefoon stapelen de dienstkaarten, dat leest als één geheel. */
  .dienst {
    position: sticky;
    top: calc(64px + var(--n) * 12px);
  }
}
@media (max-width: 460px) {
  .raster { grid-template-columns: 1fr; }
  .kaartje__naam { font-size: 1.14rem; }
  .kaartje__kort { font-size: 14px; }
}

/* De vaste balk respecteert de inkeping van het toestel. */
@supports (padding: max(0px)) {
  .balk__binnen { padding-left: max(var(--marge), env(safe-area-inset-left));
                  padding-right: max(var(--marge), env(safe-area-inset-right)); }
}

/* ==========================================================================
   Vastgeplakte werkbaan op de telefoon
   --------------------------------------------------------------------------
   De sectie blijft staan en je scrollt de kaarten er zijwaarts doorheen.
   Je kunt er niet langs zonder ze gezien te hebben. Zodra de laatste kaart
   voorbij is laat de sectie weer los en gaat de pagina gewoon verder.
   ========================================================================== */
@media (max-width: 1039px) {
  body.baan-aan .zaak {
    width: min(340px, 84vw);
    grid-template-columns: 1fr;
  }
  /* De balk is 84px hoog, dus daar moet de kop onderuit blijven. */
  body.baan-aan .baan__kleef { padding-top: 104px; }
  body.baan-aan .baan__kop { margin-bottom: 18px; }
  body.baan-aan .baan__spoor { gap: 14px; }
  /* De teller hoort bij de veegversie; in de vastgeplakte versie staat de
     voortgang al onder de kop. */
  body.baan-aan .baan__teller { display: none; }
  body.baan-aan .baan__hint {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--inkt-zacht);
  }
}

/* Kaarten schalen en kantelen naar hun plek in de baan. De waarden komen
   uit JS, want in de vastgeplakte versie is er geen scroller om een
   scroll-tijdlijn aan te hangen. */
body.baan-aan .zaak { will-change: transform; }

/* De binnenmarge van de baan is precies zo breed dat de eerste en de laatste
   kaart midden in beeld staan. Anders begint en eindigt de reeks scheef. */
body.baan-aan .baan__spoor {
  padding-inline: max(var(--marge), calc((100vw - min(1000px, 78vw)) / 2));
}
@media (max-width: 1039px) {
  body.baan-aan .baan__spoor {
    padding-inline: calc((100vw - min(340px, 84vw)) / 2);
  }
}

/* ==========================================================================
   Mobiele rem: minder lagen, geen scheefstand
   --------------------------------------------------------------------------
   De scheefstand transformeert de hele pagina, dus alles zit in één grote
   laag die bij elke verandering opnieuw getekend moet worden. Op een trage
   telefoon kost dat meer dan het oplevert. En acht kaarten tegelijk in een
   eigen laag zetten kost tientallen megabytes aan textuur.
   ========================================================================== */
@media (max-width: 1039px) {
  .scheef { transform: none !important; will-change: auto; }
  body.baan-aan .zaak { will-change: auto; }
}
/* Alleen de kaarten die in de buurt zijn krijgen een eigen laag. */
body.baan-aan .zaak.nabij { will-change: transform; }

/* ==========================================================================
   De kaart moet boven de duimbalk passen
   --------------------------------------------------------------------------
   De duimbalk ligt over de onderkant van het scherm. Gemeten viel er 56 px
   (Pro Max) tot 156 px (SE) van de kaart achter. De vastgeplakte baan houdt
   die ruimte nu vrij, en de kaart is op een telefoon compacter: de trefwoorden
   staan toch al in de popup.
   ========================================================================== */
@media (max-width: 1039px) {
  body.baan-aan .baan__kleef {
    /* 66 px balk + 12 px onderrand + lucht, plus de home-indicator. */
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  }
  body.baan-aan .zaak {
    padding: 16px;
    align-content: start;
  }
  body.baan-aan .zaak .merkjes { display: none; }
  body.baan-aan .zaak__kort { font-size: 14.5px; margin-top: 10px; }
  body.baan-aan .zaak__naam { margin-top: 10px; }
  body.baan-aan .zaak__cijfers { margin-top: 16px; gap: 20px; }
  body.baan-aan .zaak__meer { margin-top: 14px; font-size: 13.5px; }
}

/* Op een laag scherm wordt het beeld bijgesneden in plaats van geschaald,
   zodat de tekst eronder niet in de knel komt. */
@media (max-width: 1039px) and (max-height: 780px) {
  body.baan-aan .venster__vlak {
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  body.baan-aan .baan__spoor .venster__vlak img {
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
  body.baan-aan .geen-beeld, body.baan-aan .netwerk { aspect-ratio: 16 / 9; }
}

/* Heel korte schermen (iPhone SE en kleiner): de kop krimpt en de cijfers
   vallen weg. Die staan in de popup, en een kaart die half achter de
   duimbalk verdwijnt is erger dan een kaart zonder cijfers. */
@media (max-width: 1039px) and (max-height: 700px) {
  body.baan-aan .baan__kleef { padding-top: 88px; }
  body.baan-aan .baan__kop { margin-bottom: 10px; }
  body.baan-aan .baan__titel { font-size: 1.6rem; }
  body.baan-aan .baan__hint { margin-top: 8px; }
  body.baan-aan .zaak__cijfers { display: none; }
  body.baan-aan .zaak__kort { -webkit-line-clamp: 3; }
  body.baan-aan .venster__vlak { aspect-ratio: 2 / 1; }
  body.baan-aan .geen-beeld, body.baan-aan .netwerk { aspect-ratio: 2 / 1; }
}

/* ==========================================================================
   REPARATIES uit de mobiele audit
   ========================================================================== */

/* 1. Zonder JavaScript bleef het laadscherm voor altijd staan: een cyaan vlak
      met MESA en 0 procent, en de hele pagina eronder onzichtbaar. Alleen
      tonen als JS de klasse js heeft gezet, want alleen JS haalt hem weg. */
html:not(.js) .laadscherm { display: none !important; }

/* 2. Het scrollslot werkte niet. Met overflow-x: clip op html geeft body zijn
      overflow niet meer door aan het venster, dus de pagina schoof gewoon door
      achter het open menu langs. Het slot hoort op html. */
html.op-slot { overflow: hidden; }

/* 3. Zijwaartse scroll op 320 en 360 px. Onder 620 px wordt .dienst een enkele
      kolom, maar de uitleg en de opbrengstregel stonden nog op kolom 2 en 3.
      Die bestaan daar niet, dus groeide de kaart buiten het scherm. */
@media (max-width: 620px) {
  .dienst__uitleg,
  .dienst__oplevert { grid-column: 1; }
}

/* Portretfoto vult het vak netjes, ook als hij niet vierkant is. */
.portret img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;   /* gezichten zitten meestal in de bovenhelft */
  display: block;
}

/* ==========================================================================
   MOBIELE AFWERKING
   --------------------------------------------------------------------------
   Drie dingen uit de meting op 390 px: tekst onder de 11 px, aanraakdoelen
   onder de 44 px, en een vinkvakje van 26 px. Alles hieronder lost dat op
   zonder de opmaak op desktop aan te raken.
   ========================================================================== */
@media (max-width: 820px) {

  /* --- Leesbaarheid. Onder 11 px wordt het turen, en 9,5 px is gewoon te
         klein voor een label dat er toe doet. --- */
  .kaartje__soort { font-size: 11px; letter-spacing: .1em; }
  .zaak__soort    { font-size: 11.5px; }
  .venster__adres { font-size: 11.5px; }
  .merk__staart   { font-size: 11px; }
  .baan__teller-nu, .baan__teller-al { font-size: 12px; }

  /* --- Aanraakdoelen. Apple en Google houden allebei 44 px aan als
         ondergrens, en dat is precies de reden dat je soms drie keer moet
         tikken op andermans site. --- */
  .merk {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .menu a, .paneel a, .voet__links a, .tekstlink, .strip__stap {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .voet__links li { display: flex; }

  /* Het vinkvakje zelf blijft netjes klein, maar het hele label vangt de tik. */
  .akkoord {
    position: relative;
    min-height: 44px;
    padding: 10px 0 10px 38px;
    align-items: center;
  }
  .akkoord input {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    margin: 0;
  }
  /* Onzichtbaar vlak eromheen dat de tik opvangt, zonder dat je iets ziet. */
  .akkoord input::after {
    content: "";
    position: absolute;
    inset: -10px;
  }

  /* --- Invoervelden. 16 px is geen smaakkwestie: is het kleiner, dan zoomt
         Safari op iOS bij het aantikken in en staat je opmaak scheef. --- */
  .veld input, .veld select, .veld textarea {
    font-size: 16px;
    min-height: 52px;
    padding: 14px 16px;
  }
  .veld textarea { min-height: 128px; }
  .veld label { font-size: 13px; }

  /* --- De kaart in de vastgeplakte baan mag breder, er was te veel lucht. --- */
  body.baan-aan .zaak { width: min(356px, 88vw); }

  /* --- Onder de duimbalk moet ruimte blijven, anders valt de laatste regel
         van een kaart eronder weg. --- */
  .baan__kleef { padding-bottom: 96px; }
  .sectie:last-of-type { padding-bottom: calc(var(--sectie) + 40px); }
}

/* Grotere tikvlakken op alles wat met een vinger bediend wordt, ook op tablet. */
@media (pointer: coarse) {
  .vraag__knop { min-height: 56px; }
  .modaal__dicht { width: 48px; height: 48px; }
  .duimbalk a { min-height: 52px; }
}

/* Footerlinks vangen de tik over de hele regel. Een link als "SEO" is
   anders maar 29 px breed en dan moet je precies mikken. */
@media (max-width: 820px) {
  .voet__links a { width: 100%; }
}

/* ==========================================================================
   Portret met echte foto
   --------------------------------------------------------------------------
   De foto is 400 bij 400. Zou ik hem over de volle kaartbreedte van ongeveer
   340 px uitrekken, dan is hij op een retinascherm zichtbaar zacht. Kleiner
   tonen is scherper en het oogt bovendien rustiger: een portret naast de
   gegevens in plaats van een reuzenvlak.
   ========================================================================== */
.portret--foto {
  aspect-ratio: 1 / 1;
  width: min(240px, 68%);
  margin-inline: auto;
  border-radius: 50%;
  border: 3px solid var(--cyaan);
  box-shadow: 0 14px 40px -14px rgba(5, 18, 44, .45);
  position: relative;
}
.portret--foto img { border-radius: 50%; object-position: center 18%; }

/* Zachte gloed achter de foto, zelfde gebaar als de ring in de hero. */
.portret--foto::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(61, 225, 242, .3);
  pointer-events: none;
}
.js .portret--foto { transition: transform .5s var(--zwaar); }
.kaart-persoon:hover .portret--foto { transform: scale(1.03) rotate(-1.5deg); }

@media (prefers-reduced-motion: reduce) {
  .kaart-persoon:hover .portret--foto { transform: none; }
}

/* ==========================================================================
   WERKSECTIE, HERBOUWD
   --------------------------------------------------------------------------
   Wat er mis was: de kaart was hoger dan het venster, dus je kreeg nooit een
   hele case te zien. Rechts stond een halve lege kaart en de aandacht lag
   nergens. Nu past elke kaart precies, is het screenshot de hoofdrol, en
   staan de buren gedempt zodat je oog naar het midden gaat.
   ========================================================================== */
@media (min-width: 1040px) {
  body.baan-aan .baan__kleef { padding-top: calc(var(--balk-h) + 6px); }
  body.baan-aan .baan__kop { margin-bottom: 20px; }

  body.baan-aan .zaak {
    /* Precies passend: venster min de balk, de kop en de rail. Nooit hoger,
       dus je ziet altijd een complete case. */
    width: min(1080px, 80vw);
    height: min(620px, calc(100svh - var(--balk-h) - 220px));
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    gap: 0;
    position: relative;
  }

  /* Het screenshot vult zijn hele kolom, van boven naar onder. */
  body.baan-aan .baan__spoor .zaak__beeld {
    height: 100%;
    perspective: none;
    padding: 18px 0 18px 18px;
  }
  body.baan-aan .baan__spoor .venster {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
  }
  body.baan-aan .baan__spoor .venster__vlak {
    flex: 1;
    min-height: 0;
    position: relative;
  }
  body.baan-aan .baan__spoor .venster__vlak img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  /* De tekstkolom scrollt intern als een case veel te vertellen heeft,
     zodat de kaart zelf nooit uitzet. */
  /* Geen scrollvak binnen de kaart. Een scrollgebied in een sectie die zelf
     al zijwaarts scrollt is verwarrend: je weet niet meer wat er beweegt als
     je aan je muiswiel draait. De inhoud past, en wie meer wil klikt door
     naar de case. Zie de regels verderop die op een laag venster de merkjes
     weglaten, zodat het ook daar past. */
  body.baan-aan .zaak__inhoud {
    padding: clamp(22px, 2.4vw, 32px);
    overflow: hidden;
  }

  /* Buren dempen. --afw komt uit JS: 0 in het midden, 1 aan de rand. */
  body.baan-aan .zaak {
    /* Doorzichtigheid doet het zware werk, want dat kost de compositor bijna
       niets. Blur is duur op een kaart van 1080 px, dus die blijft laag. */
    opacity: calc(1 - var(--afw, 0) * 0.82);
    filter: blur(calc(var(--afw, 0) * 1.6px)) saturate(calc(1 - var(--afw, 0) * 0.55));
    transition: opacity .3s linear, filter .3s linear;
  }
  body.baan-aan .zaak__beeld,
  body.baan-aan .zaak__inhoud { pointer-events: none; }
  body.baan-aan .zaak.midden .zaak__beeld,
  body.baan-aan .zaak.midden .zaak__inhoud { pointer-events: auto; }
}

/* --- Accentkleur per case ------------------------------------------------ */
.zaak { --kleur: #1B5CE8; }
.zaak__soort { background: var(--kleur); }
.zaak__nr { color: var(--kleur); }
.zaak__cijfer b { color: var(--kleur); }
.zaak__meer { color: var(--kleur); }
.zaak__blok dt { color: var(--kleur); }
.zaak:hover .merkje { border-color: color-mix(in srgb, var(--kleur) 45%, transparent); color: var(--kleur); }

/* Dun streepje in de eigen kleur langs de bovenrand van de kaart. */
.zaak::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--kleur);
  border-radius: 30px 30px 0 0;
  opacity: 0;
  transition: opacity .4s var(--soepel);
}
.zaak { position: relative; }
body.baan-aan .zaak.midden::before { opacity: 1; }

/* --- De naamrail --------------------------------------------------------- */
.rail {
  display: none;
  gap: 4px;
  margin-top: 18px;
  flex-wrap: wrap;
}
@media (min-width: 1040px) { body.baan-aan .rail { display: flex; } }

.rail__knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--lijn-room);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--inkt-zacht);
  transition: border-color .3s, color .3s, background-color .3s;
}
.rail__nr { font-size: 10.5px; opacity: .65; letter-spacing: .06em; }
.rail__knop:hover { border-color: color-mix(in srgb, var(--kleur) 50%, transparent); color: var(--kleur); }
.rail__knop.nu {
  background: var(--kleur);
  border-color: var(--kleur);
  color: #fff;
}
.rail__knop.nu .rail__nr { opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  body.baan-aan .zaak { opacity: 1 !important; filter: none !important; }
}

/* ==========================================================================
   Werkbaan: de kaart pakt precies de ruimte die overblijft
   --------------------------------------------------------------------------
   Eerst stond hier een hoogte met vaste aftrekposten (venster min balk min
   220 px). Dat klopt nooit, want de kop en de rail groeien mee met het
   lettertype en de rail kan omvallen. Nu is de kleefsectie een kolom: de kop
   neemt wat hij nodig heeft, het spoor krijgt de rest, en de kaart vult dat.
   ========================================================================== */
@media (min-width: 1040px) {
  body.baan-aan .baan__kleef {
    justify-content: flex-start;
    padding-bottom: clamp(20px, 3vh, 40px);
    gap: 0;
  }
  body.baan-aan .baan__kop { flex: none; margin-bottom: 14px; }
  /* Kleiner in de baan dan elders: de kaart is hier de hoofdrol. */
  body.baan-aan .baan__titel { font-size: clamp(1.9rem, 3.1vw, 2.7rem); }
  body.baan-aan .baan__hint { margin-top: 10px; }

  body.baan-aan .baan__spoor {
    flex: 1 1 auto;
    min-height: 0;          /* zonder dit negeert flex de overloop */
    align-items: stretch;
  }
  body.baan-aan .zaak {
    height: auto;           /* de vaste hoogte is niet meer nodig */
    max-height: none;
  }

  /* De rail blijft op één regel en schuift zelf mee als hij niet past. */
  body.baan-aan .rail {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }
  body.baan-aan .rail::-webkit-scrollbar { display: none; }
  .rail__knop { flex: none; scroll-snap-align: center; }
}

/* De hoofdstukkenrail links botst met de kaarten in de werkbaan, die tot
   tegen de schermrand doorlopen. In de baan heb je hem ook niet nodig, daar
   is de naamrail de navigatie. */
body.in-baan .strip { opacity: 0; pointer-events: none; }

/* "Bekijk de hele case" blijft onderaan de tekstkolom staan, ook als de tekst
   erboven moet scrollen. Anders valt de belangrijkste klik onder de rand. */
@media (min-width: 1040px) {
  body.baan-aan .zaak__inhoud {
    display: flex;
    flex-direction: column;
  }
  body.baan-aan .zaak__meer {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-top: 14px;
    background: linear-gradient(0deg, #fff 62%, transparent);
  }
}

/* De vastgezette caselink moet de tekst eronder echt bedekken. Een verloop
   dat maar tot 62 procent dekt laat de cijfers erdoorheen schemeren. */
@media (min-width: 1040px) {
  body.baan-aan .zaak__inhoud {
    /* Ruimte onderaan zodat de laatste regel vrij van de link kan scrollen. */
    padding-bottom: 0;
  }
  body.baan-aan .zaak__meer {
    background: #fff;
    border-top: 1px solid var(--lijn-room);
    margin-top: auto;
    padding: 14px 0 clamp(18px, 2vw, 26px);
    /* Iets breder dan de kolom, zodat er aan de zijkanten niets doorheen piept. */
    margin-inline: calc(clamp(22px, 2.4vw, 32px) * -1);
    padding-inline: clamp(22px, 2.4vw, 32px);
  }
  body.baan-aan .merkjes { margin-bottom: 4px; }
}

/* ==========================================================================
   De kaart is een teaser, de popup is de diepte
   --------------------------------------------------------------------------
   Situatie, aanpak en resultaat stonden op de kaart en in de popup. Daardoor
   paste de kaart niet en werden de cijfers afgekapt. Op de kaart nu alleen
   de naam, één regel en de harde cijfers; het hele verhaal zit een klik weg.
   ========================================================================== */
@media (min-width: 1040px) {
  body.baan-aan .zaak__blokken { display: none; }

  /* De cijfers zijn het bewijs, dus die mogen groter. */
  body.baan-aan .zaak__kort { font-size: 16.5px; margin-top: 14px; }
  body.baan-aan .zaak__cijfers {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--lijn-room);
    gap: 30px;
  }
  body.baan-aan .zaak__cijfer b { font-size: 2.25rem; }
  body.baan-aan .zaak__cijfer span { font-size: 13px; }
  body.baan-aan .merkjes { margin-top: 24px; }
}

/* ==========================================================================
   Bewijs uit het werk
   --------------------------------------------------------------------------
   De sectie "Wat er nu draait" had maar twee cijfers, want drie waarden staan
   nog op null. Hieronder staan cijfers die rechtstreeks uit de cases komen,
   met de case erbij als bron. Klikken opent die case.
   ========================================================================== */
.bewijs { margin-top: clamp(40px, 5vw, 64px); }
.bewijs__kop {
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(243, 247, 253, .5);
  margin-bottom: 18px;
}
.bewijs__net {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.bewijs__vak {
  position: relative;
  overflow: hidden;
  text-align: left;
  padding: 20px 20px 18px;
  border-radius: 18px;
  cursor: pointer;
  background: rgba(243, 247, 253, .05);
  border: 1px solid rgba(243, 247, 253, .1);
  transition: background-color .35s var(--soepel), border-color .35s var(--soepel),
              transform .35s var(--zwaar);
}
/* Streepje in de kleur van de case waar het cijfer vandaan komt. */
.bewijs__vak::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--kleur, var(--cyaan));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s var(--zwaar);
}
.bewijs__vak:hover {
  background: rgba(243, 247, 253, .09);
  border-color: rgba(243, 247, 253, .22);
  transform: translateY(-3px);
}
.bewijs__vak:hover::before { transform: scaleY(1); }

.bewijs__getal {
  display: block;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--room);
  font-variant-numeric: tabular-nums;
}
.bewijs__label {
  display: block;
  margin-top: 9px;
  font-size: 14px;
  color: rgba(243, 247, 253, .72);
  line-height: 1.35;
}
.bewijs__bron {
  display: block;
  margin-top: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--cyaan);
}
.bewijs__bron::before { content: "uit "; color: rgba(243, 247, 253, .4); font-weight: 500; }

@media (max-width: 620px) {
  .bewijs__net { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bewijs__vak { padding: 16px 14px; }
  .bewijs__label { font-size: 13px; }
}

/* Drie kolommen op een breed scherm: 2 rijen van 3 leest als een blok,
   auto-fit gaf 5 plus een eenzame zesde. */
@media (min-width: 900px) {
  .bewijs__net { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .bewijs__vak { padding: 24px 24px 20px; }
}

/* ==========================================================================
   Werkwijze: een lijn die zichzelf trekt
   --------------------------------------------------------------------------
   Drie losse kaartjes lezen als drie losse dingen. Met een lijn erdoorheen
   die meeloopt met je scroll wordt het een route, en dat is precies wat de
   sectie vertelt. --stapp komt uit JS en loopt van 0 naar 1.
   ========================================================================== */
.stappen { position: relative; }
.stappen__lijn {
  display: none;
  position: absolute;
  top: 46px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: rgba(243, 247, 253, .12);
  border-radius: 2px;
  overflow: hidden;
  z-index: 0;
}
.stappen__lijn i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--cyaan), var(--blauw-op));
  transform: scaleX(var(--stapp, 0));
  transform-origin: left;
}
.stap { position: relative; z-index: 1; }

/* Het cijfer vult zich zodra de lijn erlangs is. */
.stap__nr {
  transition: background-color .45s var(--soepel), color .45s var(--soepel),
              transform .45s var(--veer), box-shadow .45s var(--soepel);
}
.stap.bereikt .stap__nr {
  background: var(--cyaan);
  color: var(--inkt);
  transform: scale(1.12);
  box-shadow: 0 0 0 6px rgba(61, 225, 242, .16);
}

@media (min-width: 860px) {
  .js .stappen__lijn { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .stappen__lijn i { transform: scaleX(1); }
  .stap.bereikt .stap__nr { transform: none; }
}

/* ==========================================================================
   Groeigrafiek van het netwerk
   --------------------------------------------------------------------------
   Twee lijnen uit de echte cijfers: bezoekers en kliks naar de affiliate,
   per week. De lijnen tekenen zichzelf zodra ze in beeld komen. Geen
   screenshot, dus scherp op elk scherm en er lekken geen domeinnamen.
   ========================================================================== */
.grafiek {
  margin: 0;
  padding: 22px 20px 18px;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--blauw) 0%, var(--blauw-diep) 100%);
  position: relative;
  overflow: hidden;
}
.grafiek::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(243, 247, 253, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 247, 253, .05) 1px, transparent 1px);
  background-size: 40px 34px;
  mask-image: linear-gradient(180deg, #000 40%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
}
.grafiek svg {
  display: block;
  width: 100%;
  height: clamp(150px, 24vh, 210px);
  position: relative;
  overflow: visible;
}

.grafiek__lijn {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.grafiek__lijn--bezoekers { stroke: var(--cyaan); }
.grafiek__lijn--kliks     { stroke: rgba(243, 247, 253, .55); stroke-width: 1.8; }
/* Vlakke vulling in plaats van een verloop: een verloop vraagt een defs-blok
   in de svg, en dat is het niet waard voor een strook van 18 procent. */
.grafiek__vlak { fill: var(--cyaan); opacity: .18; }

/* De lijnen tekenen zichzelf. pathLength maakt de lengte voorspelbaar,
   zodat één waarde voor elke lijn werkt. */
.js .grafiek__lijn {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}
.js .aan .grafiek__lijn,
.js .grafiek.aan .grafiek__lijn {
  animation: lijn-trekken 1.9s var(--soepel) forwards;
}
.js .aan .grafiek__lijn--kliks { animation-delay: .25s; }
@keyframes lijn-trekken { to { stroke-dashoffset: 0; } }

.js .grafiek__vlak { opacity: 0; transition: opacity 1.1s var(--soepel) .7s; }
.js .aan .grafiek__vlak { opacity: .18; }

.grafiek__uitleg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 14px;
  font-size: 12px;
  color: rgba(243, 247, 253, .68);
  position: relative;
}
.grafiek__uitleg span { display: inline-flex; align-items: center; gap: 7px; }
.grafiek__stip { width: 9px; height: 3px; border-radius: 3px; display: block; }
.grafiek__stip--bezoekers { background: var(--cyaan); }
.grafiek__stip--kliks { background: rgba(243, 247, 253, .55); }

.grafiek__periode {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(243, 247, 253, .4);
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .js .grafiek__lijn { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .js .grafiek__vlak { opacity: .18; }
}

/* ==========================================================================
   Werkbaan: de kop veegt weg zodra je erin zit
   --------------------------------------------------------------------------
   De kop, de hint en de rail vochten met de kaart om dezelfde hoogte. Dat
   oogde druk en de kaart kwam er bekaaid vanaf. Nu zie je bij binnenkomst de
   kop, en zodra je verder scrollt schuift die weg en krijgt de kaart alles.
   De navigatie staat onderaan, uit de weg maar bereikbaar.
   ========================================================================== */
@media (min-width: 1040px) {
  body.baan-aan .baan__kop {
    transition: opacity .45s var(--soepel), transform .55s var(--zwaar),
                max-height .55s var(--zwaar), margin-bottom .55s var(--zwaar);
    max-height: 220px;
    overflow: hidden;
    will-change: max-height, opacity;
  }
  /* baan-diep komt uit JS zodra je voorbij de eerste kaart bent. */
  body.baan-diep .baan__kop {
    opacity: 0;
    transform: translateY(-22px);
    max-height: 0;
    margin-bottom: 0;
    pointer-events: none;
  }

  /* De rail schuift mee omhoog en wordt de enige tekst op het scherm. */
  body.baan-aan .rail {
    display: flex;
    flex: none;
    margin-top: 18px;
    margin-bottom: 0;
    justify-content: center;
    transition: opacity .45s var(--soepel);
  }
  body.baan-aan .baan__kleef { padding-bottom: clamp(16px, 2.4vh, 28px); }
}

/* Bij beweging beperken blijft de kop gewoon staan. */
@media (prefers-reduced-motion: reduce) {
  body.baan-diep .baan__kop {
    opacity: 1; transform: none; max-height: none;
  }
}

/* Nu de kop wegveegt is de kaart hoger en zweefde de tekst bovenaan met een
   gat eronder. Verticaal centreren vult dat op. "safe" zorgt dat bij een
   korte viewport de bovenkant niet wegvalt, want dan is centreren in een
   scrollend vak juist verkeerd. */
@media (min-width: 1040px) {
  body.baan-aan .zaak__inhoud { justify-content: safe center; }
  /* De caselink hoort nu gewoon bij het blok en hoeft niet meer vastgeplakt. */
  body.baan-aan .zaak__meer {
    position: static;
    margin-top: 24px;
    padding: 16px 0 0;
    background: none;
    border-top: 1px solid var(--lijn-room);
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* ==========================================================================
   Werkbaan op de telefoon: kaarten centreren en de kop ook daar wegvegen
   --------------------------------------------------------------------------
   De baan schoof van "linkerrand in beeld" naar "rechterrand in beeld". Op een
   breed scherm valt dat niet op omdat de kaart 80vw is, maar op een telefoon
   landde elke kaart scheef en liep hij rechts van het scherm af. Met een
   binnenmarge van precies de helft van de restruimte komt elke kaart midden
   in beeld.
   ========================================================================== */
@media (max-width: 1039px) {
  body.baan-aan .baan__spoor {
    padding-inline: calc((100vw - min(356px, 88vw)) / 2);
  }
}

/* De kop veegt op elk scherm weg, niet alleen op desktop. Op een telefoon is
   de ruimte juist krapper, dus daar heb je het het hardst nodig. */
body.baan-aan .baan__kop {
  transition: opacity .45s var(--soepel), transform .55s var(--zwaar),
              max-height .55s var(--zwaar), margin-bottom .55s var(--zwaar);
  max-height: 260px;
  overflow: hidden;
}
body.baan-diep .baan__kop {
  opacity: 0;
  transform: translateY(-18px);
  max-height: 0;
  margin-bottom: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body.baan-diep .baan__kop { opacity: 1; transform: none; max-height: none; }
}

/* Op de telefoon hoeft de kaart niet de volle hoogte te vullen. Hij hugt zijn
   inhoud en staat verticaal gecentreerd, anders houd je een leeg wit vlak
   onder de tekst over. */
@media (max-width: 1039px) {
  body.baan-aan .baan__spoor { align-items: center; }
  body.baan-aan .zaak { height: auto; align-self: center; }
}

/* ==========================================================================
   De kop veegt weg zonder de hele baan opnieuw te laten berekenen
   --------------------------------------------------------------------------
   Een overgang op max-height dwingt 550 ms lang elke frame een layout af, en
   omdat het spoor daaronder flex:1 is worden alle acht kaarten meegerekend.
   Dat kostte 34 van de 356 frames boven de 33 ms. Nu klapt de hoogte in één
   keer in (één herberekening) en animeren alleen opacity en transform, die
   op de compositor draaien en dus gratis zijn.
   ========================================================================== */
body.baan-aan .baan__kop {
  transition: opacity .38s var(--soepel), transform .42s var(--zwaar);
  transition-property: opacity, transform;
}
body.baan-diep .baan__kop {
  max-height: 0;
  margin-bottom: 0;
  transition: opacity .28s var(--soepel), transform .32s var(--zwaar);
}

/* ==========================================================================
   SECTIEOVERGANGEN: elke sectie dokt aan
   --------------------------------------------------------------------------
   Elke naad was dezelfde harde lijn met een kleine ronding. Nu schuift een
   nieuwe sectie als een kaart over de vorige heen: hij komt binnen met flink
   ronde bovenhoeken en een schaduw eronder, en vlakt af zodra hij op zijn
   plek staat.

   Dit loopt op een scroll-tijdlijn, dus zonder JavaScript en zonder werk op
   de hoofddraad. Kent de browser animation-timeline niet, dan gebeurt er
   niets bijzonders en blijft de vaste ronding staan.
   ========================================================================== */
.baan,
.cijferbaan,
.sectie--room:not(.sectie--vervolg),
.sectie--blauw:not(.sectie--vervolg),
.sectie--cyaan:not(.sectie--vervolg) {
  position: relative;
  z-index: 1;
  /* Schaduw langs de bovenrand, zodat de sectie echt op de vorige lijkt te liggen. */
  box-shadow: 0 -22px 44px -26px rgba(5, 18, 44, .55);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .baan,
    .cijferbaan,
    .sectie--room:not(.sectie--vervolg),
    .sectie--blauw:not(.sectie--vervolg),
    .sectie--cyaan:not(.sectie--vervolg) {
      animation: sectie-dokken linear both;
      animation-timeline: view();
      /* Alleen tijdens het binnenkomen, niet meer als hij eenmaal staat. */
      animation-range: entry 0% entry 90%;
    }
    @keyframes sectie-dokken {
      from {
        border-top-left-radius: clamp(40px, 7vw, 90px);
        border-top-right-radius: clamp(40px, 7vw, 90px);
      }
      to {
        border-top-left-radius: var(--bocht);
        border-top-right-radius: var(--bocht);
      }
    }

    /* De voet komt op dezelfde manier binnen, die sluit de pagina af. */
    .voet {
      animation: sectie-dokken linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
  }
}

/* De screenshots zijn nu staand (verhouding ongeveer 8:9), want zo past het
   in het kader op een breed scherm. Op een telefoon staat het beeld boven de
   tekst en zou zo'n staande opname het halve scherm vullen. Daar begrenzen we
   hem tot een liggende uitsnede. */
@media (max-width: 1039px) {
  .venster__vlak {
    aspect-ratio: 16 / 11;
    position: relative;
    overflow: hidden;
  }
  .venster__vlak img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
}

/* In de popup is het screenshot een voorbeeldstrook, geen schermvuller. Op
   ware verhouding werd hij 1040 bij 1170 en moest je er eerst helemaal
   langs scrollen voordat je een woord las. Nu zie je de bovenkant van de
   site en begint het verhaal er direct onder. */
.modaal .venster__vlak {
  position: relative;
  aspect-ratio: auto;
  height: min(400px, 42svh);
  overflow: hidden;
}
.modaal .venster__vlak img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
@media (max-width: 820px) {
  .modaal .venster__vlak { height: min(240px, 30svh); }
}

/* ==========================================================================
   VRAGEN, opnieuw
   --------------------------------------------------------------------------
   Zeven identieke witte pillen onder elkaar, zonder hiërarchie en zonder
   beweging. Nu: een nummer dat meekleurt, een rail die zich langs de open
   vraag trekt, en een antwoord dat inschuift in plaats van klapt.
   ========================================================================== */
.vragen { display: grid; gap: 10px; }

.vraag {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  border: 1px solid transparent;
  transition: border-color .35s var(--soepel), box-shadow .4s var(--soepel),
              transform .4s var(--zwaar);
}
.vraag:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -22px rgba(5, 18, 44, .6); }
.vraag.open {
  border-color: rgba(27, 92, 232, .22);
  box-shadow: 0 20px 44px -26px rgba(5, 18, 44, .5);
}

/* Rail links die zich uittrekt zodra de vraag opengaat. */
.vraag::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cyaan), var(--blauw-op));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s var(--zwaar);
}
.vraag.open::before { transform: scaleY(1); }

.vraag__knop {
  width: 100%;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  padding: 20px 22px;
  text-align: left;
  cursor: pointer;
}
.vraag__nr {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--inkt-zacht);
  transition: color .35s var(--soepel);
}
.vraag.open .vraag__nr { color: var(--blauw-op); }
.vraag__tekst {
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--inkt);
}

/* Het plusje wordt een minnetje, met een cirkel die meekleurt. */
.vraag__teken {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--room-2);
  justify-self: end;
  transition: background-color .35s var(--soepel), transform .45s var(--veer);
}
.vraag__teken::before,
.vraag__teken::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 2px;
  margin: -1px 0 0 -6.5px;
  border-radius: 2px;
  background: var(--blauw);
  transition: transform .4s var(--zwaar), background-color .35s;
}
.vraag__teken::after { transform: rotate(90deg); }
.vraag.open .vraag__teken { background: var(--blauw-op); transform: rotate(180deg); }
.vraag.open .vraag__teken::before,
.vraag.open .vraag__teken::after { background: #fff; }
.vraag.open .vraag__teken::after { transform: rotate(0deg); }

.vraag__antwoord {
  overflow: hidden;
  height: 0;
  transition: height .48s var(--zwaar);
}
.vraag__antwoord p {
  padding: 0 22px 22px 68px;
  color: var(--inkt-zacht);
  font-size: 15.5px;
  max-width: 68ch;
  /* Schuift mee in plaats van er ineens te staan. */
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .4s var(--soepel) .08s, transform .45s var(--zwaar) .08s;
}
.vraag.open .vraag__antwoord p { opacity: 1; transform: none; }

@media (max-width: 620px) {
  .vraag__knop { grid-template-columns: 34px minmax(0, 1fr) 30px; padding: 16px 16px; gap: 6px; }
  .vraag__antwoord p { padding: 0 16px 18px 50px; }
  .vraag__teken { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .vraag:hover { transform: none; }
  .vraag__antwoord p { opacity: 1; transform: none; }
}

/* ==========================================================================
   Contact: wat er daarna gebeurt
   --------------------------------------------------------------------------
   De linkerkolom stond half leeg onder het e-mailadres. Daar staat nu wat er
   na het versturen gebeurt, want dat is precies de twijfel bij een formulier:
   waar komt dit terecht en wanneer hoor ik iets.
   ========================================================================== */
.daarna {
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid rgba(5, 18, 44, .14);
  display: grid;
  gap: 4px;
  counter-reset: daarna;
  position: relative;
}
.daarna__stap {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 12px 0;
  position: relative;
}
/* Verticale lijn tussen de bollen, zodat het één route wordt. */
.daarna__stap:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 16px; top: 42px; bottom: -6px;
  width: 2px;
  background: rgba(5, 18, 44, .16);
  border-radius: 2px;
}
.daarna__bol {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blauw);
  color: var(--room);
  font-size: 13px;
  font-weight: 800;
  flex: none;
  position: relative;
  z-index: 1;
  transition: transform .45s var(--veer), box-shadow .45s var(--soepel);
}
.daarna__stap:hover .daarna__bol {
  transform: scale(1.12);
  box-shadow: 0 0 0 6px rgba(5, 18, 44, .1);
}
.daarna__tekst b {
  display: block;
  font-size: 15.5px;
  font-weight: 750;
  color: var(--inkt);
  letter-spacing: -.015em;
}
.daarna__tekst span {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: rgba(5, 18, 44, .66);
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .daarna__stap:hover .daarna__bol { transform: none; }
}

/* ==========================================================================
   RASTERKAARTEN: van vlak naar levend
   --------------------------------------------------------------------------
   Negen identieke kaarten die alleen omhoog kwamen bij hover. Nu komen ze
   binnen met een veeg over het beeld, krijgen ze de accentkleur van hun eigen
   case, en kantelt de kaart licht mee met je muis.
   ========================================================================== */
.kaartje { --kleur: #1B5CE8; position: relative; }

/* Streep in de eigen kleur die zich uittrekt bij hover. */
.kaartje::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--kleur);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--zwaar);
  z-index: 2;
}
.kaartje:hover::after,
.kaartje:focus-visible::after { transform: scaleX(1); }

/* Het beeld wordt bij binnenkomst weggeveegd in plaats van te vervagen. */
.kaartje__beeld { position: relative; overflow: hidden; }
.js .kaartje__beeld::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--room);
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform .75s var(--zwaar);
  transition-delay: calc(var(--traag, 0s) + .1s);
}
.js .kaartje.aan .kaartje__beeld::before { transform: scaleY(0); }

/* De soortaanduiding pakt de kleur van de case. */
.kaartje__soort { color: var(--kleur); transition: color .3s; }
.kaartje__voet { color: var(--kleur); }

/* Kantelt licht mee met de muis. De waarden komen uit JS. */
.kaartje {
  transform: perspective(900px)
             rotateX(calc(var(--ky, 0) * -3deg))
             rotateY(calc(var(--kx, 0) * 3deg))
             translateY(var(--klift, 0px));
  transition: transform .45s var(--zwaar), box-shadow .45s var(--soepel);
}
.kaartje:hover { --klift: -7px; }

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .kaartje { transform: translateY(var(--klift, 0px)); }
  .js .kaartje__beeld::before { display: none; }
}

/* ==========================================================================
   DIENSTEN: de kaart klikt vast in de stapel
   --------------------------------------------------------------------------
   De kaarten stapelden al wel, maar er gebeurde verder niets. Nu tekent er
   een lijn over de bovenrand zodra een kaart zijn plek pakt, kleurt het
   nummer op, en zakt de kaart eronder een fractie weg. Dat laat zien dat er
   iets vastklikt in plaats van dat er iets overheen schuift.

   Dit loopt op een scroll-tijdlijn, dus zonder JavaScript.
   ========================================================================== */
/* NIET position: relative zetten: de kaarten stapelen met position: sticky
   (regel 781) en relative overschrijft dat, waardoor de hele stapel uit
   elkaar viel. Sticky maakt zelf al een positioneringscontext, dus het
   pseudo-element hieronder werkt gewoon. */
.dienst { overflow: hidden; }

.dienst::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyaan), var(--blauw-op));
  transform: scaleX(0);
  transform-origin: left;
  z-index: 2;
}

.dienst__nr {
  transition: color .4s var(--soepel), transform .5s var(--veer);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* De lijn trekt zich terwijl de kaart naar zijn plek schuift. */
    .dienst::before {
      animation: dienst-vast linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 42%;
    }
    @keyframes dienst-vast { to { transform: scaleX(1); } }

    /* Het nummer kleurt mee en komt iets naar voren. */
    .dienst__nr {
      animation: nr-op linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 42%;
    }
    @keyframes nr-op {
      from { color: var(--inkt-zacht); transform: none; }
      to   { color: var(--blauw-op); transform: translateX(4px) scale(1.06); }
    }
  }
}

/* Zonder scroll-tijdlijn valt hij terug op hover, dan gebeurt er tenminste iets. */
@supports not (animation-timeline: view()) {
  .dienst:hover::before { transform: scaleX(1); transition: transform .6s var(--zwaar); }
  .dienst:hover .dienst__nr { color: var(--blauw-op); }
}

/* ==========================================================================
   BEVESTIGING NA HET VERSTUREN
   --------------------------------------------------------------------------
   Er stond eerst een klein balkje boven een leeg formulier. Dat is precies
   het moment waarop iemand denkt: is dit nou verstuurd of niet? Nu verdwijnt
   het formulier en komt hier een echte bevestiging voor in de plaats.
   ========================================================================== */
.gelukt[hidden] { display: none; }
.gelukt {
  display: grid;
  justify-items: start;
  padding: clamp(8px, 1.5vw, 18px) 0 clamp(4px, 1vw, 10px);
}
.formulier--klaar #aanvraag,
.formulier--klaar .klein { display: none; }

.gelukt__vink {
  width: 62px; height: 62px;
  color: var(--blauw-op);
  margin-bottom: 22px;
}
.gelukt__vink svg { width: 100%; height: 100%; display: block; }

/* De ring en het vinkje tekenen zichzelf. pathLength zetten we niet, dus we
   nemen een dasharray die ruim genoeg is voor allebei. */
.js .gelukt__ring, .js .gelukt__haak {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
}
.js .gelukt.aan .gelukt__ring { animation: vink-teken .7s var(--soepel) forwards; }
.js .gelukt.aan .gelukt__haak { animation: vink-teken .45s var(--soepel) .5s forwards; }
@keyframes vink-teken { to { stroke-dashoffset: 0; } }

.gelukt__kop {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--inkt);
}
.gelukt__tekst {
  margin-top: 12px;
  color: var(--inkt-zacht);
  font-size: 16px;
  max-width: 44ch;
}
.gelukt__acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 26px;
}
.gelukt__acties .knop--leeg { color: var(--inkt); border-color: rgba(5, 18, 44, .2); }
.gelukt__acties .knop--leeg::before { background: var(--blauw); }
.gelukt__acties .knop--leeg:hover { color: var(--room); }

@media (prefers-reduced-motion: reduce) {
  .js .gelukt__ring, .js .gelukt__haak { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
}

/* ==========================================================================
   PORTFOLIO MET FILTER
   --------------------------------------------------------------------------
   Het raster heette "En dit staat er nog meer" en toonde negen kaarten, alsof
   het restjes waren. Nu staan alle zeventien projecten er, te filteren op wat
   een bezoeker zoekt: hij denkt "ik wil een webshop", niet "ik wil een
   vergelijkingsplatform".
   ========================================================================== */
.zeef {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(22px, 3vw, 32px);
}
.zeef__knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--lijn-room);
  background: transparent;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--inkt-zacht);
  transition: border-color .3s var(--soepel), color .3s var(--soepel),
              background-color .3s var(--soepel), transform .3s var(--zwaar);
}
.zeef__knop:hover { border-color: rgba(11, 47, 111, .4); color: var(--blauw); transform: translateY(-2px); }
.zeef__knop.nu {
  background: var(--blauw);
  border-color: var(--blauw);
  color: var(--room);
}
.zeef__aantal {
  font-size: 12px;
  font-weight: 800;
  opacity: .55;
  font-variant-numeric: tabular-nums;
}
.zeef__knop.nu .zeef__aantal { opacity: .8; }

.zeef__leeg {
  padding: 40px 0;
  color: var(--inkt-zacht);
  font-size: 16px;
}
.zeef__leeg[hidden] { display: none; }

/* Uitgefilterde kaarten verdwijnen met een kleine krimp in plaats van te
   knipperen. display:none komt pas na de overgang, anders springt het raster. */
.kaartje.weg {
  opacity: 0;
  transform: scale(.94);
  pointer-events: none;
}
.kaartje.verborgen { display: none; }
.js .kaartje {
  transition: transform .45s var(--zwaar), box-shadow .45s var(--soepel),
              opacity .3s var(--soepel);
}

/* Een kaart die na het filteren terugkomt, komt opnieuw binnen. */
@keyframes kaart-terug {
  from { opacity: 0; transform: scale(.94) translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.js .kaartje.terug { animation: kaart-terug .45s var(--zwaar) backwards; }

@media (prefers-reduced-motion: reduce) {
  .js .kaartje.terug { animation: none; }
  .zeef__knop:hover { transform: none; }
}

/* ==========================================================================
   Werkkaart: passend houden op een laag venster
   --------------------------------------------------------------------------
   Gemeten op 1440 bij 620: de netwerkkaart liep er 102 px overheen, want die
   heeft drie cijfers en vijf merkjes. Nu het scrollvak weg is moet de inhoud
   dus krimpen in plaats van weg te scrollen. De merkjes gaan als eerste, want
   die staan ook in de popup en zeggen het minst tegen een bezoeker.
   ========================================================================== */
@media (min-width: 1040px) {
  /* Nooit meer dan vier merkjes op de kaart zelf. */
  body.baan-aan .zaak .merkje:nth-child(n+5) { display: none; }

  @media (max-height: 800px) {
    body.baan-aan .zaak .merkjes { display: none; }
    body.baan-aan .zaak__cijfers { margin-top: 20px; padding-top: 18px; }
  }
  @media (max-height: 680px) {
    body.baan-aan .zaak__kort { font-size: 15.5px; }
    body.baan-aan .zaak__cijfer b { font-size: 1.8rem; }
    body.baan-aan .zaak__cijfers { gap: 22px; margin-top: 16px; padding-top: 14px; }
    body.baan-aan .zaak__meer { margin-top: 16px; padding-top: 12px; }
  }
}

/* ==========================================================================
   De caselink blijft altijd staan
   --------------------------------------------------------------------------
   Aan het begin van de baan neemt de kop nog ruimte in, dus is de kaart daar
   lager dan verderop. Nu het scrollvak weg is viel "Bekijk de hele case" er
   dan onderuit, precies de link waar het om draait. Hij plakt daarom aan de
   onderkant van de tekstkolom, met een dekkende achtergrond zodat er niets
   doorheen schemert.
   ========================================================================== */
@media (min-width: 1040px) {
  body.baan-aan .zaak__inhoud {
    display: flex;
    flex-direction: column;
    justify-content: safe center;
  }
  body.baan-aan .zaak__meer {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    flex: none;
    background: #fff;
    border-top: 1px solid var(--lijn-room);
    padding: 14px 0 0;
    /* Iets breder dan de kolom, anders piept er inhoud langs de zijkanten. */
    margin-inline: calc(clamp(22px, 2.4vw, 32px) * -1);
    padding-inline: clamp(22px, 2.4vw, 32px);
    padding-bottom: clamp(18px, 2vw, 26px);
  }
}

/* Op een laag venster ook het derde cijfer weglaten. Anders viel hij half
   buiten de kaart, en dat leest als een fout in plaats van als een keuze.
   In de popup staan ze alle drie. */
@media (min-width: 1040px) and (max-height: 800px) {
  body.baan-aan .zaak__cijfer:nth-child(n+3) { display: none; }
}