/**
 * Het ontwerpsysteem van klubb.nl.
 *
 * Deze stylesheet komt ná tokens.css, dus de vier breekpunten (375, 768, 1024,
 * 1440) en de tikdoelmaat komen daaruit. Wat hier staat is de vormgeving van
 * dit merk: het palet, de typografie, de knoppen en elke sectie.
 *
 * Twee dingen om te weten voordat je iets aanpast.
 *
 * **De maten komen uit het ontwerp en zijn geen smaak.** Het prototype in
 * ontwerp/prototype.dc.html is high-fidelity: kleuren, typografie, spacing en
 * copy zijn definitief goedgekeurd. Wijkt iets af, dan is dat een fout en geen
 * variant.
 *
 * **Geen border-radius en geen schaduwen.** Nergens, op twee uitzonderingen:
 * de ronde avatars in het uitklapmenu en op /lets-work-together, en de
 * schaduw onder een reviewkaart bij hover. Zet er dus niets nieuws bij.
 *
 * Mobile first: de basis is de telefoon, de media queries bouwen op.
 */

/* ------------------------------------------------------------------ letters */

/**
 * PP Neue Montreal is een licentiefont van Pangram Pangram, aangeschaft door
 * Klubb. Zelf gehost in public/fonts, nooit via Google Fonts: dat mag niet
 * onder de licentie en het zou een derde partij een bezoekersverzoek geven.
 */
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/fonts/PPNeueMontreal-Book.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/fonts/PPNeueMontreal-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/fonts/PPNeueMontreal-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/fonts/PPNeueMontreal-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/fonts/PPNeueMontreal-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/fonts/PPNeueMontreal-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------- tokens */

:root {
  /* Het palet is teruggebracht tot elf waarden. Verzin er geen twaalfde bij. */
  --ink: #0c0d0f;
  --muted: #5c6472;
  --surface: #f5f6f8;
  --surface-2: #eaecf0;
  --surface-3: #eff1f4;
  --wit: #ffffff;
  --oranje: #ff6900;
  --blauw: #1b4dff;
  --groen: #22c55e;
  --groen-licht: #4ade80;
  --hover-donker: #333a44;

  /* Lijnen. De sterkte zegt waarvoor: kaart, scheiding, knop. */
  --lijn-kaart: rgba(12, 13, 15, 0.08);
  --lijn-deel: rgba(12, 13, 15, 0.12);
  /* De horizontale strook boven en onder een rij gegevens of cijfers. */
  --lijn-strook: rgba(12, 13, 15, 0.14);
  --lijn-knop: rgba(12, 13, 15, 0.18);
  --lijn-op-donker: rgba(255, 255, 255, 0.3);

  /* Op een donkere sectie. */
  --op-donker-muted: rgba(255, 255, 255, 0.6);
  --op-donker-body: rgba(255, 255, 255, 0.72);
  --op-donker-lijn: rgba(255, 255, 255, 0.16);

  /* De inhoud is breder dan de gedeelde standaard, en de marge groter. */
  --inhoud-max: 1560px;

  /**
   * De marge naast de inhoud en de ruimte tussen twee secties.
   *
   * **Vanaf 1024 pixels zijn dit de maten van het ontwerp**, 56 en 160, en daar
   * blijven ze ook. Daar wordt de site tegen het ontwerp gemeten en elke pixel
   * die hier verschuift verschuift elke sectie mee.
   *
   * **Daaronder schalen ze mee, en dat is geen afwijking maar noodzaak.** Het
   * aangeleverde ontwerp heeft geen enkele media query, dus die 56 pixels
   * gelden daar ook op een telefoon. Op 375 pixels betekent dat 112 pixels
   * marge en 263 pixels inhoud: 31 procent van het scherm is dan lege rand, en
   * elke kop, elke kaart en elke tekstregel valt in die smalle strook. Dat is
   * precies wat je op een telefoon niet wilt.
   *
   * Deze maten stonden hier eerder als schaal, zijn er toen uitgehaald om de
   * meting op 1024 en 1440 kloppend te krijgen, en komen nu terug voor de
   * breedtes waar het ontwerp niets over zegt. Zie CONVENTIES.md hoofdstuk 3:
   * onder 1024 pixels is het ontwerp geen ontwerp.
   */
  --marge: 20px;
  --sectie: 72px;

  --soepel: cubic-bezier(0.16, 1, 0.3, 1);
  --vlot: cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* De twee stappen naar de maten van het ontwerp. Zie de toelichting hierboven. */
@media (min-width: 768px) {
  :root {
    --marge: 32px;
    --sectie: 104px;
  }
}

@media (min-width: 1024px) {
  :root {
    --marge: 56px;
    --sectie: 160px;
  }
}

/**
 * Elk beeld dat zijn vak vult, vult het met behoud van de verhouding.
 *
 * `fill` in next/image zet het beeld op `width: 100%; height: 100%` in een vak
 * met een eigen verhouding, maar geen `object-fit`. De standaard is dan `fill`,
 * en dat rekt het beeld uit. Meestal viel dat niet op omdat de klasse van het
 * vak er zelf `object-fit: cover` op zette — maar het brede beeld in de
 * bovenkant van /about had geen klasse, en stond in een vak van 21 op 9
 * terwijl de foto 3 op 2 is. Dat was zichtbaar uitgerekt.
 *
 * `data-nimg="fill"` zet next/image zelf, dus deze regel dekt ook elk beeld
 * dat er morgen bij komt. Wil je er ergens `contain`, zet dat dan op die ene
 * plek; een klasse of inline stijl wint hiervan.
 */
img[data-nimg='fill'] {
  object-fit: cover;
}

/* --------------------------------------------------------------------- basis */

html {
  background: var(--ink);
  /* Niet hidden: dat breekt position:sticky in de sectiekoppen. clip doet
     hetzelfde voor horizontale overloop en laat sticky heel. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: 'PP Neue Montreal', system-ui, -apple-system, sans-serif;
  /**
   * De basis is die van het ontwerp: 16 pixels en geen regelhoogte.
   *
   * Het stond hier eerst op 17 pixels met regelhoogte 1.62, en dat is de stijl
   * van een tekstblok en niet van de pagina. Alles wat zelf geen maat zet erfde
   * hem dan: knoplabels werden 24 pixels hoog in plaats van 18, en elk element
   * zonder eigen maat werd een pixel groter dan in het ontwerp. Een tekstblok
   * zet zijn eigen maat, zie .body en .intro hieronder.
   */
  font-size: 16px;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a {
  color: var(--ink);
}

a:hover {
  color: var(--muted);
}

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

::selection {
  background: var(--blauw);
  color: var(--wit);
}

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

img {
  max-width: 100%;
}

/* De strook waarbinnen alle inhoud valt. */
.binnen {
  width: 100%;
  max-width: var(--inhoud-max);
  margin: 0 auto;
  padding-left: var(--marge);
  padding-right: var(--marge);
}

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  /* 14 en geen 12: met 12 komt de link op 43,5 pixels uit en de afspraak is 44.
     Hij staat buiten beeld tot hij focus krijgt, dus dit verschuift niets. */
  padding: 14px 20px;
  background: var(--ink);
  color: var(--wit);
  font-weight: 600;
  text-decoration: none;
}

.overslaan:focus {
  left: 0;
}

/* ---------------------------------------------------------------- typografie */

.eyebrow {
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow-dot {
  display: flex;
  align-items: center;
  gap: 14px;
}

.eyebrow-dot::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  background: var(--oranje);
}

.h1 {
  margin: 0;
  /* De maten komen uit het ontwerp en zijn daar op elke breedte gelijk. De
     ondergrens stond hier lager (38 in plaats van 44) als mobiele verzachting;
     dat is niet het ontwerp. */
  font-size: clamp(44px, 6vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.05em;
  font-weight: 500;
  text-wrap: balance;
}

.h1-home {
  font-size: clamp(52px, 7vw, 104px);
  line-height: 0.94;
  max-width: 16ch;
}

.h2 {
  margin: 0;
  /* 24ch, zoals in het ontwerp. Zonder die grens loopt een kop van twee zinnen
     over de volle breedte en breekt hij op een andere plek dan in het ontwerp. */
  max-width: 24ch;
  font-size: clamp(36px, 4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: 500;
  text-wrap: pretty;
}

/* De tweede zin van een kop staat in grijs. Op een donkere sectie in wit met
   opacity, want grijs op zwart leest niet. */
.h2 .zacht,
.h1 .zacht {
  color: var(--muted);
}

.h3 {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.16;
  letter-spacing: -0.03em;
  font-weight: 500;
}

.intro {
  margin: 0;
  /* Twintig pixels op elke breedte. Hier stond een clamp met 17 als
     ondergrens, als verzachting voor een telefoon; dat is niet het ontwerp en
     op 1024 pixels scheelde het al drie pixels per regel. */
  font-size: 20px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 56ch;
  text-wrap: pretty;
}

.body {
  margin: 0;
  font-size: 17px;
  line-height: 1.62;
  color: var(--muted);
  text-wrap: pretty;
}

/* Alinea's binnen een tekstveld met opmaak: 18 pixels ertussen, en niets onder
   de laatste. Zonder deze regel staat er de standaard van de browser. */
.body p {
  margin: 0 0 18px;
}

.body p:last-child {
  margin-bottom: 0;
}

/* Koppen, lijsten en links in een tekstveld met opmaak, zoals de algemene
   voorwaarden: de kop een trap boven de tekst, de lijst met dezelfde marge als
   een alinea. */
.body h2,
.body h3 {
  margin: 40px 0 14px;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink);
}

.body h2:first-child,
.body h3:first-child {
  margin-top: 0;
}

.body ul,
.body ol {
  margin: 0 0 18px;
  padding-left: 24px;
}

.body li {
  margin-bottom: 6px;
}

.body li::marker {
  color: var(--oranje);
}

.body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.klein {
  font-size: 15px;
}

.micro {
  font-size: 13px;
}

/* --------------------------------------------------------------------- knop */

/**
 * Eén knop, drie varianten. Links het label, rechts een cel van 54px met een
 * scheidingslijn en een glyph. De pijl draait 45 graden bij hover en er gaat
 * een glans over de knop.
 *
 * De hoogte is 54px en dat is met opzet ruim boven het tikdoel van 44px.
 */
.knop {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  /* De ruimte tussen label en cel zit in de marge van de cel, 24 pixels, zoals
     in het ontwerp. De gedeelde laag zet er 8 pixels gap op; die telt daar
     bovenop en maakte elke knop 8 pixels breder. */
  gap: 0;
  min-height: 54px;
  padding: 0 0 0 26px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--ink);
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}

.knop-cel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  margin-left: 24px;
  align-self: stretch;
  border-left: 1px solid var(--lijn-knop);
  transition: background 0.2s;
}

.knop-glyph {
  display: block;
  transition: transform 0.3s var(--vlot);
}

.knop:hover {
  background: #e6e8ec;
  color: var(--ink);
}

.knop:hover .knop-cel {
  background: rgba(12, 13, 15, 0.08);
}

/* Alleen de navigatiepijl draait. Een telefoonhoorn of envelop die kantelt
   ziet eruit als een fout. */
.knop:hover .knop-glyph[data-draait='1'] {
  transform: rotate(45deg);
}

.knop-nadruk {
  background: var(--ink);
  color: var(--wit);
}

.knop-nadruk .knop-cel {
  border-left-color: rgba(255, 255, 255, 0.26);
}

.knop-nadruk:hover {
  background: var(--hover-donker);
  color: var(--wit);
}

.knop-nadruk:hover .knop-cel {
  background: rgba(255, 255, 255, 0.16);
}

.knop-lijn {
  background: transparent;
  border: 1px solid var(--lijn-knop);
}

.knop-lijn:hover {
  background: rgba(12, 13, 15, 0.09);
  border-color: var(--muted);
}

/* Hier stond .contactknop: een eigen, compactere knop voor "Bel Daan" en
 * "Mail Daan" op een persoonskaart, zonder de cel met de scheidingslijn. Die
 * cel is precies wat een knop op deze site herkenbaar maakt, en zonder viel hij
 * uit de toon naast de rest. Jos vroeg op 15 september 2026 om de gewone knop,
 * en die staat er nu. Zie .teamkaart-acties voor hoe ze in een smalle kaart
 * vallen.
 */

/* Op een donkere sectie keert de primaire knop om. */
.op-donker .knop-nadruk {
  background: var(--wit);
  color: var(--ink);
}

.op-donker .knop-nadruk .knop-cel {
  border-left-color: var(--lijn-knop);
}

.op-donker .knop-nadruk:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.op-donker .knop-lijn {
  border-color: var(--lijn-op-donker);
  color: var(--wit);
}

.op-donker .knop-lijn .knop-cel {
  border-left-color: var(--lijn-op-donker);
}

.op-donker .knop-lijn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--wit);
  color: var(--wit);
}

.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* De glans die één keer over de knop gaat bij hover. */
@keyframes klubbShine {
  0% {
    transform: translateX(-170%) skewX(-18deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  100% {
    transform: translateX(430%) skewX(-18deg);
    opacity: 0;
  }
}

.knop::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  opacity: 0;
  pointer-events: none;
}

.knop:hover::after {
  animation: klubbShine 0.62s ease both;
}

/* Een tekstlink met een pijl erachter, zoals "Alle cases →". */
.pijllink {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.pijllink:hover {
  color: var(--blauw);
}

/* -------------------------------------------------------------------- secties */

.sectie {
  padding-top: var(--sectie);
  padding-bottom: var(--sectie);
}

.op-wit {
  background: var(--wit);
}

.op-licht {
  background: var(--surface);
}

.op-donker {
  background: var(--ink);
  color: var(--wit);
}

.op-donker .eyebrow,
.op-donker .body,
.op-donker .intro {
  color: var(--op-donker-muted);
}

.op-donker .h1 .zacht,
.op-donker .h2 .zacht {
  color: rgba(255, 255, 255, 0.56);
}

/* De kop van een sectie: kop links, een link of knop rechts. */
/**
 * De kop van een sectie.
 *
 * Het ontwerp kent drie vormen, en welke het is hangt van de sectie af:
 * een blok met alleen de kop (56 eronder), een rij met een link ernaast
 * (uitgelijnd op de onderkant), en een raster van twee kolommen met een
 * alinea in de tweede. De basis hieronder is de eerste vorm; de secties
 * die een van de andere twee gebruiken staan eronder.
 *
 * Er staan geen breekpunten in: het ontwerp heeft ze niet. De rij loopt om
 * met flex-wrap en het raster met auto-fit, precies zoals daar.
 */
.sectiekop {
  margin-bottom: 56px;
}

/* De tweede kolom: de alinea naast de kop. */
.sectiekop-tekst {
  margin: 0;
  max-width: 48ch;
  font-size: 17px;
  line-height: 1.62;
  color: var(--muted);
  text-wrap: pretty;
}

/* ── de rij met een link ernaast */
.sectie-cases .sectiekop,
.sectie-team .sectiekop,
.sectie-werkwijze .sectiekop,
.sectie-reviews .sectiekop,
.sectie-artikelen .sectiekop,
.sectie-werkinbeeld .sectiekop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 64px;
}

/**
 * Bij "Werk in beeld" staat de zin niet onder de kop maar ernaast, tegen de
 * rechterkant, met de onderkanten op één lijn. Zo staat het in het ontwerp, en
 * de maximale breedte verschilt daar per pagina: 36 tekens bij de mockups en
 * 34 bij de video's. Dat bepaalt waar de regel afbreekt, dus het is geen
 * afronding maar de vorm zelf.
 */
.sectie-werkinbeeld .sectiekop {
  gap: 40px;
}

.sectie-werkinbeeld .sectiekop-tekst {
  line-height: 1.6;
}

.sectie-werkinbeeld:has(.mockrooster) .sectiekop-tekst {
  max-width: 36ch;
}

.sectie-werkinbeeld:has(.videorooster) .sectiekop-tekst {
  max-width: 34ch;
}

.sectie-cases .sectiekop,
.sectie-team .sectiekop {
  margin-bottom: 64px;
}

.sectie-werkwijze .sectiekop {
  margin-bottom: 72px;
}

.sectie-reviews .sectiekop {
  gap: 40px;
  margin-bottom: 0;
}

.sectie-artikelen .sectiekop {
  gap: 40px;
  margin-bottom: 56px;
}

/* ── het raster met een alinea in de tweede kolom */
.sectie-diensten .sectiekop,
.sectie-transparantie .sectiekop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  align-items: end;
  gap: 40px 88px;
}

.sectie-diensten .sectiekop {
  margin-bottom: 64px;
}

/* Op een lokale pagina staat de lijst 56 pixels onder de kop. */
.hero[data-template='lokaal'] ~ .sectie-diensten .sectiekop {
  margin-bottom: 56px;
}

.sectie-transparantie .sectiekop {
  align-items: end;
}

/**
 * De vragensectie staat in twee kolommen: de kop links, de lijst rechts, en de
 * kop blijft staan zolang zijn lijst in beeld is. Daarom is de binnenkant van
 * de sectie het raster en niet de kop.
 */
.sectie-vragen .binnen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 56px 88px;
  align-items: start;
}

.sectie-vragen .sectiekop {
  display: block;
  margin-bottom: 0;
}

/* Zie .blijfstaan: onder 1024 staan de vragen onder de kop en zou een
   vastgezette kop erdoorheen worden gescrold. */
@media (min-width: 1024px) {
  .sectie-vragen .sectiekop {
    position: sticky;
    top: 140px;
  }
}

.sectie-transparantie .sectiekop {
  gap: 56px 88px;
  margin-bottom: 56px;
}

/* ── afwijkingen per paginasoort */
/* Op een marktpagina staat er geen link naast de kop. */
.hero[data-template='markt'] ~ .sectie-cases .sectiekop {
  display: block;
  margin-bottom: 56px;
}

.hero[data-template='dienst'] ~ .sectie-cases .sectiekop,
.hero[data-template='dienst'] ~ .sectie-werkinbeeld .sectiekop {
  gap: 40px;
  margin-bottom: 56px;
}

/* Bij de mockups staat de kop 64 pixels boven het rooster, bij de video's 56.
   Zo staat het in het ontwerp; het verschil zit in de hoogte van de eerste rij. */
.hero[data-template='dienst'] ~ .sectie-werkinbeeld:has(.mockrooster) .sectiekop {
  margin-bottom: 64px;
}

.hero[data-template='markt'] ~ .sectie-werkwijze .sectiekop,
.hero[data-template='about'] ~ .sectie-team .sectiekop {
  gap: 40px;
  margin-bottom: 64px;
}

.hero[data-template='diensten-overzicht'] ~ .sectie-cases .sectiekop,
.hero[data-template='seo'] ~ .sectie-cases .sectiekop,
.hero[data-template='lokaal'] ~ .sectie-cases .sectiekop {
  gap: 40px;
  margin-bottom: 56px;
}

.hero[data-template='about'] ~ .sectie-werkwijze .sectiekop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  align-items: start;
  gap: 56px 88px;
  margin-bottom: 0;
}

/**
 * Twee kolommen die met auto-fit omslaan, zoals in het ontwerp. Geen breekpunt:
 * de kolom slaat om zodra hij onder 380 pixels zou komen.
 *
 * De ruimte is 56 pixels tussen de rijen en 88 tussen de kolommen. Dat eerste
 * getal zie je pas als de twee kolommen onder elkaar staan, en daar stond 40:
 * op een tablet zat er dan zestien pixels te weinig tussen.
 */
.tweeluik {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 56px 88px;
  align-items: end;
}

/* --------------------------------------------------------------------- rooster */

.rooster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 24px;
}

/* De grote kaarten staan met z'n tweeën op een rij; ze slaan om zodra een kolom
   onder 420 pixels zou komen. Zo staat het in het ontwerp. */
.rooster-breed {
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

/* ------------------------------------------------------------------- animatie */

@keyframes klubbMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes klubbGlowA {
  0% {
    opacity: 0.3;
    transform: translate3d(-6%, 3%, 0) scale(0.96);
  }
  38% {
    opacity: 1;
    transform: translate3d(4%, -4%, 0) scale(1.16);
  }
  68% {
    opacity: 0.52;
    transform: translate3d(-2%, -6%, 0) scale(1.02);
  }
  100% {
    opacity: 0.3;
    transform: translate3d(-6%, 3%, 0) scale(0.96);
  }
}

@keyframes klubbGlowB {
  0% {
    opacity: 0.34;
    transform: translate3d(5%, -3%, 0) scale(1.1);
  }
  44% {
    opacity: 1;
    transform: translate3d(-4%, 4%, 0) scale(0.97);
  }
  74% {
    opacity: 0.5;
    transform: translate3d(3%, 6%, 0) scale(1.14);
  }
  100% {
    opacity: 0.34;
    transform: translate3d(5%, -3%, 0) scale(1.1);
  }
}

@keyframes klubbMesh {
  0%,
  100% {
    transform: translate3d(-4%, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(4%, -3%, 0) scale(1.12);
  }
}

@keyframes klubbMenuIn {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}

@keyframes klubbMenuRow {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes klubbMenuImg {
  from {
    opacity: 0;
    transform: scale(1.06);
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes klubbMenuFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/**
 * De overgang tussen pagina's: een donker paneel dat van onderen in beeld
 * schuift bij het verlaten van een pagina en aan de bovenkant weer uit beeld
 * bij aankomst. Zo staat het in het ontwerp, met dezelfde tijden en curve.
 *
 * De beginstand en de animatie bij aankomst staan hier en niet in JavaScript.
 * Dat is niet alleen netter: het paneel bedekt het hele scherm, dus zou de
 * animatie van het script moeten komen en dat script niet aankomen, dan kijkt
 * een bezoeker naar een zwart vlak. Nu schuift hij ook zonder JavaScript weg.
 */
@keyframes klubbWipeIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes klubbWipeOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

.paginawipe {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--ink);
  transform: translateY(0);
  pointer-events: none;
  animation: klubbWipeOut 0.46s cubic-bezier(0.4, 0.9, 0.25, 1) forwards;
}

/* Wie geen beweging wil, wil ook geen paneel over het scherm. */
@media (prefers-reduced-motion: reduce) {
  .paginawipe {
    display: none;
  }
}

/**
 * Binnenkomen bij scroll. De beginstand staat in CSS en niet in JavaScript,
 * anders flikkert het element één frame op zijn eindplek voordat het script
 * eraan komt.
 *
 * Zonder JavaScript blijft alles zichtbaar: de klasse .reveal-aan wordt door
 * het script gezet, en zonder script staat .js niet op de html en geldt de
 * beginstand niet.
 */
/* Langer en verder dan de 0,75 seconde en 22 pixels van eerst: met de volgorde
   die Beweging.tsx sinds 15 september 2026 aan een rij tegels geeft, leest een
   wat rustiger beweging als één geheel in plaats van als drie losse sprongen.
   Dezelfde dag nog een stap verder (34 pixels, één seconde), omdat het Daan
   op 26 pixels nog niet opviel. De curve blijft --vlot, dus het blijft zacht. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 1s var(--vlot),
    transform 1s var(--vlot);
}

.js [data-reveal].reveal-aan {
  opacity: 1;
  transform: none;
}

.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.8s var(--vlot),
    transform 0.8s var(--vlot);
}

.js [data-stagger].reveal-aan > * {
  opacity: 1;
  transform: none;
}

/* Negentig milliseconden tussen de kinderen. */
.js [data-stagger].reveal-aan > *:nth-child(1) {
  transition-delay: 0ms;
}
.js [data-stagger].reveal-aan > *:nth-child(2) {
  transition-delay: 90ms;
}
.js [data-stagger].reveal-aan > *:nth-child(3) {
  transition-delay: 180ms;
}
.js [data-stagger].reveal-aan > *:nth-child(4) {
  transition-delay: 270ms;
}
.js [data-stagger].reveal-aan > *:nth-child(5) {
  transition-delay: 360ms;
}
.js [data-stagger].reveal-aan > *:nth-child(6) {
  transition-delay: 450ms;
}

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

  .js [data-reveal],
  .js [data-stagger] > * {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------- soepel scrollen */

/* De regels die Lenis nodig heeft, uit zijn eigen documentatie. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* ----------------------------------------------------------------- kop (header) */

.kop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    backdrop-filter 0.3s ease;
}

/**
 * Op een artikel- of regiopagina is de balk nooit doorzichtig, ook niet
 * bovenaan. Die pagina's zijn lopende tekst met een inhoudsopgave die ernaartoe
 * springt; wie daarna terugscrolt kreeg in sommige browsers de tekst door de
 * balk heen te zien op het moment dat hij weer doorzichtig werd. De kleur is
 * dezelfde als die van de pagina, dus bovenaan zie je geen verschil; alleen de
 * lijn en de blur komen nog steeds pas na 24 pixels scrollen.
 */
body:has(.artikeltekst) .kop,
body:has(.sectie-bodysecties) .kop {
  background: var(--surface);
}

/* Na 24px scroll komt er een achtergrond met blur onder de balk. */
.kop[data-vast='1'] {
  background: rgba(245, 246, 248, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--lijn-kaart);
}

/**
 * Staat het megamenu open, dan is de balk een dekkend licht vlak.
 *
 * Zonder dit bleef de balk boven aan een pagina doorzichtig, en dan schijnt de
 * donkere waas achter het menu er dwars doorheen: de hoofdnavigatie werd
 * donkerder zodra je het menu opende of eroverheen ging. Dat gebeurt in het
 * ontwerp niet — daar zet het de achtergrond van de kop bij een open menu op
 * #F5F6F8, ondoorzichtig en zonder blur, zodat kop en menu samen één vlak zijn.
 *
 * Geen blur hier dus: het menu eronder heeft dezelfde kleur, en een blur over
 * een dekkende laag kost alleen rekenwerk.
 */
.kop[data-menu-open='1'] {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/**
 * De binnenmarge van de kopbalk.
 *
 * Boven staat er meer ruimte dan onder: 22 om 16 op een telefoon en 34 om 24
 * daarboven. Jos vond dat het logo te dicht op de bovenkant van het scherm
 * stond, 15 september 2026, en dat klopte — de marges waren gelijk, terwijl er
 * boven de balk niets staat en eronder de hele pagina. Optisch heeft de
 * bovenkant daardoor meer lucht nodig om even ruim te lijken.
 *
 * Zodra de balk vastklikt en een achtergrond krijgt, gaan ze weer gelijk en
 * naar beneden: dan is het een strook over de pagina en hoort de inhoud
 * gecentreerd te staan, en de extra lucht zou de balk alleen maar dikker
 * maken. De overgang loopt mee met de transition die er al op stond.
 */
.kop-binnen {
  width: 100%;
  max-width: var(--inhoud-max);
  margin: 0 auto;
  padding: 22px var(--marge) 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  transition: padding 0.3s ease;
}

.kop[data-vast='1'] .kop-binnen {
  padding-top: 16px;
}

@media (min-width: 1024px) {
  .kop-binnen {
    padding: 34px var(--marge) 24px;
  }

  .kop[data-vast='1'] .kop-binnen {
    padding-top: 24px;
  }
}

.kop-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.kop-logo img {
  display: block;
  /* Even hoog als het hamburgerblokje ernaast, 44 pixels; met 32 hing het
     logo er kleiner en lager naast. Vanaf 1024 pixels de maat van het ontwerp. */
  height: 44px;
  width: auto;
  transition:
    height 0.3s ease,
    filter 0.3s ease;
}

/**
 * De kopbalk blijft bij scrollen even hoog en het logo even groot.
 *
 * Hier stond een krimpende variant: de binnenmarge van 24 naar 14 pixels en het
 * logo van 44 naar 36. Dat leek een verbetering maar staat niet in het
 * aangeleverde ontwerp — het script daar wijzigt bij scrollen alleen de
 * achtergrond en de kleuren, en laat de maten met opzet staan. Wat je zag was
 * de hele balk die een sprong maakte zodra je begon te scrollen, met het logo
 * dat kleiner werd en alles wat naar boven schoof.
 */
@media (min-width: 1024px) {
  .kop-logo img {
    height: 44px;
  }
}

/**
 * Op een donkere bovenkant staat de balk in wit, tot hij vastklikt.
 *
 * Dit gaat met `:has()` en niet met een attribuut dat de pagina doorgeeft. Een
 * layout in Next weet niet welke pagina eronder hangt, dus zo'n attribuut zou
 * pas na het eerste frame gezet kunnen worden en dan zie je de balk omklappen.
 */
body:has(.hero-donker) .kop:not([data-vast='1']):not([data-menu-open='1']) {
  color: var(--wit);
}

body:has(.hero-donker) .kop:not([data-vast='1']):not([data-menu-open='1']) .kop-logo img {
  filter: brightness(0) invert(1);
}

.kop-nav {
  display: none;
}

@media (min-width: 1024px) {
  .kop-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }
}

.kop-nav a,
.kop-nav button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: none;
  border: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.16s;
}

/**
 * Aanwijzen: de tekstkleur en een lijntje eronder. Actief: alleen de
 * tekstkleur, zie onder.
 *
 * Hier lag een grijs vlak achter het item, `rgba(12, 13, 15, 0.05)`. Jos vond
 * dat niet fraai, 15 september 2026, en dat is dezelfde smaak als bij de twee
 * groeimodellen op de startpagina: liever kleur dan een vorm die erbij komt.
 * Een vlak achter een menu-item maakt de kopbalk ook onrustig, want het is het
 * enige element daar met een eigen achtergrond.
 *
 * Het lijntje staat onder de tekst en niet onder het hele vak: het hoort bij
 * het woord, en met de binnenmarge erbij zou het aan beide kanten veertien
 * pixels doorlopen. Het groeit vanuit het midden, zodat het bij het aanwijzen
 * dezelfde kant op beweegt als de chevron die openklapt.
 */
/* Het lijntje zit op ::before en niet op ::after. Dat laatste is op een
   menu-item al bezet door het onzichtbare tikvlak van 44 pixels uit de
   aanraakvlak-afspraak, onderaan dit bestand; die regel staat later en wint,
   en dan wordt het lijntje een vlak van 44 pixels over het hele item. */
.kop-nav a::before,
.kop-nav button::before {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.18s var(--vlot);
}

.kop-nav a:hover,
.kop-nav button:hover,
.kop-nav a[data-actief='1'] {
  color: var(--ink);
}

.kop-nav a:hover::before,
.kop-nav button:hover::before {
  transform: scaleX(1);
}

/**
 * De pagina waar je op staat krijgt geen lijntje, ook niet bij het aanwijzen:
 * alleen de donkere tekstkleur. Daan besloot dat op 15 september 2026, na een
 * middag met eerst een grijs streepje en daarna een streepje in het verloop
 * van de leesbalk. Het lijntje is de aanwijzing dat er iets te klikken is, en
 * op de pagina waar je al staat is er niets te klikken.
 */
.kop-nav a[data-actief='1']::before {
  display: none;
}

/* Een item met een uitklapmenu heeft de chevron als aanwijzing dat er meer is;
   dan hoeft het lijntje er bij het aanwijzen niet ook nog bij. */
.kop-nav a[aria-haspopup='true']:hover::before {
  transform: scaleX(0);
}

body:has(.hero-donker) .kop:not([data-vast='1']):not([data-menu-open='1']) .kop-nav a,
body:has(.hero-donker) .kop:not([data-vast='1']):not([data-menu-open='1']) .kop-nav button {
  color: rgba(255, 255, 255, 0.72);
}

body:has(.hero-donker) .kop:not([data-vast='1']):not([data-menu-open='1']) .kop-nav a:hover,
body:has(.hero-donker) .kop:not([data-vast='1']):not([data-menu-open='1']) .kop-nav button:hover,
body:has(.hero-donker) .kop:not([data-vast='1']):not([data-menu-open='1']) .kop-nav a[data-actief='1'] {
  color: var(--wit);
}

/* De chevron is een tekening; zie Chevron in src/componenten/Knop.tsx. Hij
   staat een tint lichter dan het label, zodat hij de aanwijzing blijft en niet
   het eerste is wat je ziet. */
.kop-chevron {
  display: block;
  opacity: 0.6;
  transition:
    transform 0.25s var(--vlot),
    opacity 0.16s;
}

.kop-nav a:hover .kop-chevron,
.kop-nav a[aria-expanded='true'] .kop-chevron {
  opacity: 1;
}

.kop-nav [aria-expanded='true'] .kop-chevron {
  transform: rotate(180deg);
}

.kop-acties {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 0 0 auto;
}

/* Op een telefoon past alleen de hamburger naast het logo. */
.kop-tel,
.kop-cta {
  display: none;
}

/* De telefoonknop in de kopbalk staat iets krapper dan de andere knoppen: 22
   pixels voor het label in plaats van 26. Zo staat het in het ontwerp. */
.kop-tel {
  padding-left: 22px;
}

@media (min-width: 768px) {
  .kop-cta {
    display: inline-flex;
  }
}

@media (min-width: 1280px) {
  .kop-tel {
    display: inline-flex;
  }
}

body:has(.hero-donker) .kop:not([data-vast='1']):not([data-menu-open='1']) .kop-tel {
  border-color: var(--lijn-op-donker);
  color: var(--wit);
}

body:has(.hero-donker) .kop:not([data-vast='1']):not([data-menu-open='1']) .kop-tel .knop-cel {
  border-left-color: var(--lijn-op-donker);
}

body:has(.hero-donker) .kop:not([data-vast='1']):not([data-menu-open='1']) .kop-cta {
  background: var(--wit);
  color: var(--ink);
}

body:has(.hero-donker) .kop:not([data-vast='1']):not([data-menu-open='1']) .kop-cta .knop-cel {
  border-left-color: var(--lijn-knop);
}

/* De hamburger. Verdwijnt zodra de balk in beeld past. */
.kop-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tikdoel);
  height: var(--tikdoel);
  padding: 0;
  background: none;
  border: 1px solid var(--lijn-knop);
  color: inherit;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .kop-hamburger {
    display: none;
  }
}

body:has(.hero-donker) .kop:not([data-vast='1']):not([data-menu-open='1']) .kop-hamburger {
  border-color: var(--lijn-op-donker);
}

/* De drie streepjes zijn een tekening geworden.
 *
 * Hier stond een constructie van ::before, ::after en een losse i op een raster
 * van vijftien pixels, met een correctie van een halve pixel om ze op hele
 * pixels te laten vallen. Die correctie klopte niet — gemeten stonden ze op
 * 30,25 — en daardoor waren ze niet even dik. Zie Hamburger in
 * src/componenten/Knop.tsx: de svg laat de browser niet meer tussen twee
 * beeldpunten in tekenen, en dan is er niets meer bij te sturen.
 */

/* De voortgangsbalk onderin de kopbalk. */
.kop-voortgang {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.kop[data-vast='1'] .kop-voortgang {
  opacity: 1;
}

.kop-voortgang span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--blauw) 0%, var(--oranje) 100%);
}

/* --------------------------------------------------------------- uitklapmenu */

.menu-achtergrond {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(12, 13, 15, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: klubbMenuFade 0.4s ease both;
  border: 0;
  padding: 0;
  cursor: default;
}

.megamenu {
  display: none;
}

@media (min-width: 1024px) {
  .megamenu {
    display: block;
    border-top: 1px solid var(--lijn-kaart);
    background: var(--surface);
    box-shadow: 0 24px 60px rgba(12, 13, 15, 0.18);
    animation: klubbMenuIn 0.55s var(--soepel) both;
  }
}

.megamenu-binnen {
  width: 100%;
  max-width: var(--inhoud-max);
  margin: 0 auto;
  /* Iets compacter dan het ontwerp (40/44): met zes diensten viel het menu op
     een MacBook Air onder de rand van het scherm. Zie ook de regels voor lage
     schermen verderop. */
  padding: 32px var(--marge) 36px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 64px;
  align-items: stretch;
}

.megamenu-lijst {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.megamenu-rijen {
  border-top: 1px solid rgba(12, 13, 15, 0.1);
}

.megamenu-rij {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  align-items: baseline;
  gap: 16px;
  padding: 14px 12px;
  border-bottom: 1px solid rgba(12, 13, 15, 0.1);
  text-decoration: none;
  transition: background 0.12s linear;
  animation: klubbMenuRow 0.6s var(--soepel) both;
}

.megamenu-rij:hover {
  background: var(--wit);
}

.megamenu-num {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.megamenu-rij:hover .megamenu-num,
.megamenu-rij:hover .megamenu-pijl {
  color: var(--oranje);
}

.megamenu-titel {
  display: block;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--ink);
}

.megamenu-kern {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.megamenu-pijl {
  font-size: 15px;
  color: var(--muted);
}

.megamenu-voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 22px;
  animation: klubbMenuFade 0.6s var(--soepel) both;
  animation-delay: 340ms;
}

.megamenu-teaser {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px 8px 8px;
  border: 1px solid rgba(12, 13, 15, 0.1);
  text-decoration: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.megamenu-teaser:hover {
  border-color: rgba(12, 13, 15, 0.3);
  background: var(--wit);
}

.megamenu-teaser img {
  width: 52px;
  height: 40px;
  object-fit: cover;
  display: block;
  background: var(--surface-2);
}

.megamenu-beeld {
  position: relative;
  min-width: 0;
  min-height: 380px;
  overflow: hidden;
  background: var(--surface-2);
  animation: klubbMenuImg 0.8s var(--soepel) both;
  animation-delay: 120ms;
}

.megamenu-beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.megamenu-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 26px;
  background: linear-gradient(to top, rgba(12, 13, 15, 0.72), rgba(12, 13, 15, 0));
  color: var(--wit);
}

.megamenu-avatars {
  display: flex;
  padding-left: 10px;
}

.megamenu-avatars img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  /* Twee volle pixels, en niet in een relatieve eenheid: op 0,125rem kwam de
     rand op 1,875 pixels uit en dan staat er een grijze zweem om elk portret. */
  border: 2px solid var(--surface);
  margin-left: -10px;
  background: var(--surface-2);
  display: block;
}

/* De rij onder de menurijen: de portretten met een regel ernaast en het
   telefoonnummer aan de rechterkant. Maten uit het ontwerp. */
.megamenu-team {
  display: flex;
  align-items: center;
  gap: 14px;
}

.megamenu-teamregel {
  font-size: 13px;
  color: var(--muted);
}

.megamenu-tel {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.16s ease;
}

.megamenu-tel:hover {
  color: var(--blauw);
}

/* ------------------------------------------------------------- menu op mobiel */

/**
 * Onder 1024px is het menu een paneel dat van rechts inschuift. Geen megamenu:
 * de beelden en de casekaarten daaruit passen niet op een telefoon en zouden
 * alleen laadtijd kosten.
 */
.mobielmenu {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  justify-content: flex-end;
  background: rgba(12, 13, 15, 0.4);
}

@media (min-width: 1024px) {
  .mobielmenu {
    display: none;
  }
}

.mobielmenu-paneel {
  width: min(420px, 100%);
  height: 100%;
  overflow-y: auto;
  background: var(--surface);
  padding: 20px var(--marge) 40px;
  animation: klubbMenuFade 0.3s ease both;
}

.mobielmenu-balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tikdoel);
  margin-bottom: 20px;
}

.mobielmenu-sluit {
  width: var(--tikdoel);
  height: var(--tikdoel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--lijn-knop);
  /* Donker, zoals het hamburgertje. Zonder eigen kleur erfde het kruisje
     het blauw van de links in het paneel en leek het een kapotte link. */
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
}

.mobielmenu-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--lijn-deel);
}

.mobielmenu-lijst li {
  border-bottom: 1px solid var(--lijn-deel);
}

.mobielmenu-lijst > li > a,
.mobielmenu-groep > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 8px 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.mobielmenu-groep > summary::-webkit-details-marker {
  display: none;
}

.mobielmenu-groep[open] > summary .kop-chevron {
  transform: rotate(180deg);
}

.mobielmenu-sub {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.mobielmenu-sub a {
  display: flex;
  align-items: center;
  min-height: var(--tikdoel);
  padding: 4px 0 4px 14px;
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
}

.mobielmenu-sub a:hover {
  color: var(--ink);
}

.mobielmenu-acties {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

.mobielmenu-acties .knop {
  justify-content: space-between;
}

/* ---------------------------------------------------------------------- hero */

.hero {
  position: relative;
  background: var(--surface);
  overflow: hidden;
  overflow-x: clip;
}

/**
 * Op een pagina zonder beeld naast de hero staat de tekst in een strook: 1040
 * pixels op de overzichten, 1120 op /about en een casepagina, 920 op een
 * artikel. Die breedte bepaalt waar de kop afbreekt, dus hij hoort erbij.
 */
.hero[data-template='diensten-overzicht'] .hero-tekst,
.hero[data-template='cases-overzicht'] .hero-tekst,
.hero[data-template='insights-overzicht'] .hero-tekst,
.hero[data-template='vacatures-overzicht'] .hero-tekst {
  max-width: 1040px;
}

.hero[data-template='about'] .hero-tekst,
.hero[data-template='case'] .hero-tekst {
  max-width: 1120px;
}

.hero[data-template='artikel'] .hero-tekst {
  max-width: 920px;
}

/**
 * De eyebrow van een hero staat 30 pixels boven de kop, elders 22.
 *
 * Alleen de eyebrow van de hero zelf, dus een direct kind van de tekstkolom.
 * Sinds een paar paginasoorten hun hele inhoud binnen de herosectie tekenen
 * (contact, vacature, artikel) zou een bredere regel ook de labels in die
 * inhoud acht pixels lager zetten.
 */
.hero .hero-tekst > .eyebrow {
  margin-bottom: 30px;
}

.hero-binnen {
  position: relative;
  width: 100%;
  max-width: var(--inhoud-max);
  margin: 0 auto;
  /**
   * De kopbalk staat er bovenop, dus de hero begint eronder.
   *
   * Vanaf 1024 pixels is dat 208, zoals in het ontwerp, en op de startpagina
   * 232; zie de tabel hieronder. Daaronder is het minder: de balk is daar zelf
   * lager (72 in plaats van 102 pixels) en 208 pixels wachten voordat de kop
   * begint kost op een telefoon het halve eerste scherm.
   */
  padding: 128px var(--marge) 56px;
}

/* Vanaf 1024 pixels de maten van het ontwerp: 208 boven en 80 onder. */
@media (min-width: 1024px) {
  .hero-binnen {
    padding-top: 208px;
    padding-bottom: 80px;
  }
}

/**
 * De ruimte onder de hero en boven de eerste sectie, per paginasoort.
 *
 * Deze waarden zijn overgenomen uit het aangeleverde ontwerp, gemeten aan de
 * gerenderde pagina's (zie ontwerp/vergelijken/). Het ontwerp heeft geen media
 * queries: dezelfde maten gelden op elke breedte.
 *
 * Waarom het per paginasoort verschilt: waar het ontwerp de eerste inhoud nog
 * binnen de herosectie zet, staat bij ons een eigen sectie. De som van de twee
 * moet daarom uitkomen op wat het ontwerp in één sectie doet.
 */
.hero[data-template='home'] .hero-binnen {
  padding-bottom: 0;
}

/* Onder 1024 pixels erft de startpagina de 128 uit .hero-binnen; vanaf 1024
   staat hij op de 232 van het ontwerp. Zelfde reden als bij --marge. */
@media (min-width: 1024px) {
  .hero[data-template='home'] .hero-binnen {
    padding-top: 232px;
  }
}

/* De vertrouwensbalk hoort in het ontwerp bij de herosectie: 120 erboven, 56
   eronder. Bij ons is het een eigen sectie, met dezelfde maten — vanaf 1024,
   want daaronder is 120 pixels wachten op een logorij te veel. */
.hero[data-template='home'] + .sectie-logobalk {
  padding-top: 56px;
  padding-bottom: 40px;
}

.hero[data-template='home'] + .sectie-logobalk + .sectie {
  padding-top: 56px;
}

@media (min-width: 1024px) {
  .hero[data-template='home'] + .sectie-logobalk {
    padding-top: 120px;
    padding-bottom: 56px;
  }

  .hero[data-template='home'] + .sectie-logobalk + .sectie {
    padding-top: 104px;
  }
}

.hero[data-template='diensten-overzicht'] .hero-binnen {
  padding-bottom: 96px;
}

.hero[data-template='insights-overzicht'] .hero-binnen {
  padding-bottom: 64px;
}

/**
 * Op /cases staat de filterbalk in het ontwerp binnen de herosectie, met 64
 * pixels erboven en 64 eronder. Bij ons staat hij in de sectie erna, dus houdt
 * de hero geen onderruimte en zet de balk zelf de ruimte.
 */
.hero[data-template='cases-overzicht'] .hero-binnen {
  padding-bottom: 0;
}

.filterbalk {
  margin-bottom: 64px;
}

/* Bij een overzicht staat het raster in het ontwerp direct onder de hero, in
   dezelfde sectie. De ruimte zit dus al in de hero. */
.hero[data-template='diensten-overzicht'] + .sectie,
.hero[data-template='cases-overzicht'] + .sectie,
.hero[data-template='insights-overzicht'] + .sectie {
  padding-top: 0;
}

.hero[data-template='case'] .hero-binnen,
.hero[data-template='about'] .hero-binnen,
.hero[data-template='rekenmodel'] .hero-binnen {
  padding-bottom: 0;
}

.hero[data-template='case'] + .sectie {
  padding-top: 104px;
}

.hero[data-template='rekenmodel'] + .sectie {
  padding-top: 56px;
}

.hero[data-template='werken-met-ons'] .hero-binnen {
  padding-bottom: var(--sectie);
}

/**
 * Op /vacatures staat de lijst in het ontwerp binnen de herosectie. Bij ons is
 * dat een eigen sectie, dus houdt de hero geen onderruimte; de sectie erna zet
 * de ruimte die het ontwerp daar heeft.
 */
.hero[data-template='vacatures-overzicht'] .hero-binnen {
  padding-bottom: 0;
}

/* Een vacaturepagina is één sectie; de hero houdt de onderruimte zelf. */
.hero[data-template='vacature'] .hero-binnen {
  padding-bottom: 160px;
}

/**
 * De contactpagina is in het ontwerp één sectie: de kop, de introtekst en de
 * gegevens links, de portretten en de kaart rechts. De route tekent het blok
 * Contactgegevens daarom binnen de hero; hier staat alleen de maatvoering.
 */
.hero[data-template='contact'] .hero-binnen {
  padding-bottom: 160px;
}

.hero[data-template='contact'] .hero-raster {
  gap: 64px 88px;
  align-items: start;
}

.hero[data-template='contact'] .hero-tekst .knoppen {
  margin-top: 56px;
}

.hero[data-template='vacatures-overzicht'] + .sectie {
  padding-top: 0;
  padding-bottom: 160px;
}

/**
 * De logobalk staat in het ontwerp 120 pixels onder de hero, met 64 eronder;
 * de vragen met de reviews ernaast staan daar direct achter, met een lijn
 * erboven. Twee witte secties tegen elkaar, dus je ziet er geen naad.
 */
.hero[data-template='werken-met-ons'] + .sectie-logobalk {
  padding-top: 120px;
  padding-bottom: 64px;
}

.sectie-logobalk + .sectie-vragen-reviews {
  padding-top: 0;
  padding-bottom: 160px;
}

.hero-glow-a,
.hero-glow-b,
.hero-dek {
  position: absolute;
  pointer-events: none;
}

/**
 * De twee gloeden in de bovenkant van een pagina.
 *
 * De maten zijn percentages van de sectie, en op een telefoon is die sectie
 * smal en hoog: 78 procent breed bij 118 procent hoog wordt daar een verticale
 * streep in plaats van een ronde vlek. Onder 768 pixels staan ze daarom op een
 * maat die met de breedte meegaat, zodat de vorm rond blijft zoals op een
 * groter scherm.
 */
.hero-glow-a {
  top: -10%;
  left: -30%;
  width: 160%;
  height: 90vw;
  background: radial-gradient(
    58% 52% at 42% 40%,
    rgba(27, 77, 255, 0.3) 0%,
    rgba(27, 77, 255, 0.08) 44%,
    rgba(27, 77, 255, 0) 74%
  );
  animation: klubbGlowA 34s ease-in-out infinite;
}

.hero-glow-b {
  top: 24%;
  right: -35%;
  width: 120%;
  height: 70vw;
  background: radial-gradient(
    52% 48% at 54% 50%,
    rgba(255, 105, 0, 0.18) 0%,
    rgba(255, 105, 0, 0.04) 46%,
    rgba(255, 105, 0, 0) 74%
  );
  animation: klubbGlowB 46s ease-in-out infinite;
}

@media (min-width: 768px) {
  .hero-glow-a {
    top: -18%;
    left: -10%;
    width: 78%;
    height: 118%;
  }

  .hero-glow-b {
    top: 22%;
    right: -14%;
    width: 52%;
    height: 86%;
  }
}

.hero-dek {
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(245, 246, 248, 0.92) 0%,
    rgba(245, 246, 248, 0.35) 18%,
    rgba(245, 246, 248, 0) 40%,
    rgba(245, 246, 248, 0) 66%,
    var(--surface) 100%
  );
}

/* Geen breekpunten: het ontwerp laat het raster omslaan met auto-fit, zodra een
   kolom onder 400 pixels zou komen. */
.hero-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 72px;
  align-items: center;
}

.hero-tekst .h1 {
  max-width: 16ch;
}

/**
 * De introtekst in een hero: 32 pixels onder de kop en 52ch breed. Alleen de
 * startpagina heeft 36 en 56ch. De afwijkingen per paginasoort staan eronder;
 * ze komen uit het ontwerp en bepalen waar de regel afbreekt.
 */
.hero-tekst .intro {
  margin-top: 32px;
  max-width: 52ch;
}

.hero[data-template='home'] .intro {
  margin-top: 36px;
  max-width: 56ch;
}

.hero[data-template='about'] .intro,
.hero[data-template='vacature'] .intro {
  max-width: 56ch;
}

.hero[data-template='werken-met-ons'] .intro,
.hero[data-template='contact'] .intro {
  max-width: 48ch;
}

.hero[data-template='rekenmodel'] .intro {
  max-width: 72ch;
}

.hero-tekst .knoppen {
  margin-top: 44px;
}

/* De donkere hero van een marktpagina staat iets krapper. */
.hero[data-template='markt'] .hero-raster,
.hero[data-template='lokaal'] .hero-raster,
.hero[data-template='seo'] .hero-raster {
  gap: 64px;
}

/* Op een lokale en een landingspagina staan de knoppen 40 pixels onder de
   introtekst. */
.hero[data-template='lokaal'] .hero-tekst .knoppen,
.hero[data-template='seo'] .hero-tekst .knoppen {
  margin-top: 40px;
}

/**
 * Het beeld blijft binnen de inhoudsstrook. Op een markt- en dienstpagina
 * loopt het door tot de schermrand; op een lokale pagina staat het in het
 * ontwerp netjes in de rechterkolom van het raster.
 */
.hero[data-template='lokaal'] .hero-beelden {
  margin-right: 0;
}

.hero[data-template='markt'] .hero-tekst .knoppen {
  margin-top: 40px;
}

/* De vertrouwensbalk hoort daar bij de hero, met 96 pixels ertussen. */
.hero .trust {
  margin-top: 96px;
}

/* De twee vierkante beelden naast de hero, verschoven ten opzichte van elkaar.
   Onder 1024px staan ze naast elkaar zonder de verschuiving; die trekt op een
   smal scherm alleen de rij scheef. */
.hero-beelden {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  gap: 12px;
  align-items: start;
}

.hero-beelden {
  gap: 20px;
  /* Loopt tot buiten de inhoudsstrook, tegen de rand van het scherm. */
  margin-right: calc(-1 * max(var(--marge), (100vw - var(--inhoud-max)) / 2 + var(--marge)));
}

.hero-beelden > :first-child {
  margin-top: 56px;
}

/* Eén beeld: dan geen twee vierkanten maar één blok van 4 op 3, zoals op een
   markt-, dienst- of lokale pagina. */
.hero-beelden:has(> :only-child) {
  grid-template-columns: 1fr;
}

.hero-beeld:only-child {
  aspect-ratio: 4 / 3;
  margin-top: 0;
}

.hero-beelden > :last-child:not(:only-child) {
  margin-top: -40px;
}

/**
 * De beelden in de hero komen bij het laden van rechts het beeld in, het
 * tweede net na het eerste. Dat is een eigen animatie naast het omhoog
 * faden van de sectie (data-reveal): die zet de hele rij, dit zet elk beeld
 * apart. Bij een nieuwe pagina wordt de hero opnieuw getekend, dus het loopt
 * elke keer dat iemand op een pagina landt. Wie minder beweging heeft
 * ingesteld ziet het niet: de regel bovenin zet elke animatie op nul.
 */
@keyframes heroBeeldIn {
  from {
    opacity: 0;
    transform: translateX(72px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.js .hero-beelden .hero-beeld {
  animation: heroBeeldIn 1.1s var(--soepel) both;
  animation-delay: 0.15s;
}

.js .hero-beelden .hero-beeld:nth-child(2) {
  animation-delay: 0.32s;
}

.hero-beeld {
  display: block;
  position: relative;
  min-width: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-2);
}

.hero-beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* De donkere hero van een markt-, dienst- of casepagina. */
.hero-donker {
  background: var(--ink);
  color: var(--wit);
}

.hero-donker .hero-dek {
  background: linear-gradient(
    to bottom,
    rgba(12, 13, 15, 0.2) 0%,
    rgba(12, 13, 15, 0) 40%,
    rgba(12, 13, 15, 0.7) 100%
  );
}

.hero-donker .eyebrow {
  color: var(--op-donker-muted);
}

/* De introtekst staat op 0.7, iets lichter dan de eyebrow. Zo staat het in het
   ontwerp, en het verschil is op een donkere achtergrond goed te zien. */
.hero-donker .intro {
  color: rgba(255, 255, 255, 0.7);
}

.hero-donker .h1 .zacht {
  color: rgba(255, 255, 255, 0.56);
}

/* De ruimte onder een donkere hero staat per paginasoort bij de tabel bovenaan;
   hier stond nog een algemene 160 die daar bovenop kwam. */

/**
 * De blauwe gloed in een donkere hero, zoals op leadgeneratie en e-commerce.
 *
 * Dezelfde valkuil als bij .hero-glow-a en .slot-glow: de maten zijn
 * percentages van de hero, en op een telefoon is die hero 375 bij 1350. Zestig
 * procent breed bij 120 procent hoog werd daar een streep van 230 bij 1655
 * pixels, van boven tot onder over het scherm. Onder 768 pixels staat de
 * hoogte in vw en is het één lichtpunt rechtsboven, zoals in de slotoproep.
 * Vanaf 768 de maten van het ontwerp.
 */
.hero-mesh {
  position: absolute;
  top: -20vw;
  right: -40%;
  width: 130%;
  height: 120vw;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(27, 77, 255, 0.35) 0%,
    rgba(27, 77, 255, 0) 70%
  );
  animation: klubbMesh 22s ease-in-out infinite;
  pointer-events: none;
}

@media (min-width: 768px) {
  .hero-mesh {
    top: -30%;
    right: -10%;
    width: 60%;
    height: 120%;
  }
}

/**
 * Het uitklapmenu op een laag scherm. Op een MacBook Air is het venster zo'n
 * 750 pixels hoog en viel het menu onder Services 155 pixels onder de rand.
 * Onder 820 pixels hoog gaan de marges verder omlaag; zelfde opbouw, zelfde
 * onderdelen, alleen dichter op elkaar. En als vangnet mag het menu nooit
 * hoger zijn dan het venster onder de kopbalk: dan scrolt het van binnen.
 */
.megamenu {
  max-height: calc(100vh - 102px);
  overflow-y: auto;
}

@media (max-height: 820px) {
  .megamenu-binnen {
    padding-top: 22px;
    padding-bottom: 26px;
    gap: 48px;
  }

  .megamenu-rij {
    padding: 9px 12px;
    gap: 12px;
  }

  .megamenu-kern {
    font-size: 13px;
    line-height: 1.35;
  }

  .megamenu-voet {
    padding-top: 14px;
    gap: 16px;
  }

  .megamenu-teaser {
    padding: 6px 14px 6px 6px;
  }
}

/* -------------------------------------------------------------- vertrouwensbalk */

.trust {
  /* De ruimte eronder komt van de sectie. Hier stond nog een tweede keer
     dezelfde ruimte, en dat maakte de balk 160 pixels te hoog. */
  padding-bottom: 0;
}

.trust-lijn {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
  /* Op één kolom staat de regel midden boven de logorij. Vanaf 768 pixels
     staan er drie kolommen met een streep links en rechts, en dan lijnt hij
     vanzelf uit. */
  justify-items: center;
}

@media (min-width: 768px) {
  .trust-lijn {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 28px;
    margin-bottom: 44px;
    justify-items: stretch;
  }

  .trust-lijn::before,
  .trust-lijn::after {
    content: '';
    display: block;
    height: 1px;
    background: var(--lijn-deel);
  }
}

.trust-tekst {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Mag omlopen op een telefoon: de regel is daar 382 pixels breed en het
     scherm 375. Dat viel niet op doordat html overflow-x verbergt, dus liep de
     tekst er stilletjes buiten en las je "bedrijven en websho". */
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 768px) {
  .trust-tekst {
    /* Vanaf tablet staat de regel tussen twee lijnen, en dan hoort hij op één
       regel te blijven: anders schuiven de lijnen mee omhoog. */
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

.trust-sterk {
  color: var(--ink);
}

/* --------------------------------------------------------------------- rails */

/**
 * Een rail is een oneindig doorlopende rij. De inhoud staat er twee keer in en
 * schuift precies de helft op, zodat de sprong niet te zien is.
 *
 * De animatie staat stil zodra de rail buiten beeld is (zie klubb.js) en bij
 * hover, zodat je een logo of review kunt lezen.
 */
.rail {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.rail-spoor {
  display: flex;
  /* De reviewkaarten worden even hoog; zie .reviewrails .rail-spoor hieronder. */
  align-items: center;
  width: max-content;
  animation: klubbMarquee var(--rail-duur, 64s) linear infinite;
}

.rail-spoor[data-richting='terug'] {
  animation-direction: reverse;
}

.rail:hover .rail-spoor {
  animation-play-state: paused;
}

.logorails {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* De rail heeft ruimte boven en onder, zodat een logo dat groter is dan de rij
   niet tegen de rand komt. Zo staat het in het ontwerp. */
.logorail {
  padding: 10px 0;
}

/**
 * Op een telefoon staan de logo's op 85 procent van hun maat en dichter op
 * elkaar. De maat zelf komt per logo uit het CMS, als --logo-hoogte.
 */
.logorail img {
  flex: 0 0 auto;
  margin-right: 52px;
  height: calc(var(--logo-hoogte, 28px) * 0.85);
  width: auto;
  opacity: 0.62;
  transition:
    opacity 0.3s ease,
    transform 0.4s var(--vlot);
}



.logorail img:hover {
  opacity: 1;
}

@media (min-width: 768px) {
  .logorail img {
    margin-right: 84px;
    height: var(--logo-hoogte, 28px);
  }
}

/* --------------------------------------------------------- twee groeimodellen */

/* De twee kaarten houden altijd dezelfde breedte.
 *
 * Hier stond een hover waarbij de kaart onder de muis naar 1.08fr ging en de
 * ander naar 0.92fr. Dat leest onrustig: de scheidingslijn springt heen en weer
 * zodra je er met de muis langsgaat, en de tekst in de andere kaart herschikt
 * mee terwijl je er niet eens naar kijkt. Op verzoek van Jos weg, 15 september
 * 2026.
 *
 * Wat de kaart bij hover doet is nu alleen kleur: de donkere vulling schuift
 * omhoog en de tekst wordt wit. Zie .split-vul hieronder. Dat verandert niets
 * aan de indeling, dus er beweegt niets naast de kaart waar je op staat. */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
}

.split-kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Geen gap: de ruimte tussen de bovenkant en de onderkant komt van
     space-between. Met een gap erbij werd de kaart vijf pixels hoger dan in het
     ontwerp en schoof de inhoud mee. */
  justify-content: space-between;
  min-height: 460px;
  padding: 44px 44px 40px;
  background: var(--wit);
  border: 1px solid var(--lijn-kaart);
  text-decoration: none;
  overflow: hidden;
}

.split-vul {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--soepel);
}

.split-kaart:hover .split-vul {
  transform: scaleY(1);
}

.split-boven,
.split-onder {
  position: relative;
}

.split-boven {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.split-pijl {
  width: 54px;
  height: 54px;
  border: 1px solid var(--lijn-knop);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition:
    color 0.4s,
    border-color 0.4s;
}

.split-titel {
  display: block;
  font-size: clamp(32px, 3.2vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.04em;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.4s;
  text-wrap: pretty;
}

.split-body {
  display: block;
  margin-top: 18px;
  max-width: 40ch;
  font-size: 17px;
  line-height: 1.62;
  color: var(--muted);
  transition: color 0.4s;
}

/**
 * Het cijfer met de regel erbij, onderin de kaart. Op een telefoon staat de
 * regel onder het cijfer: naast "3×" bleef er 280 pixels over voor "meer
 * aanvragen voor Wasserij Boumans", en dan hing het tweede deel er half onder.
 * Vanaf 768 naast elkaar op de basislijn, zoals in het ontwerp.
 */
.split-bewijs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--lijn-deel);
  transition: border-color 0.4s;
}

@media (min-width: 768px) {
  .split-bewijs {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
  }
}

.split-num {
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.4s;
}

/* Bij hover wordt de hele kaart donker en de tekst wit. */
.split-kaart:hover .split-titel,
.split-kaart:hover .split-num,
.split-kaart:hover .split-pijl {
  color: var(--wit);
}

.split-kaart:hover .split-eyebrow,
.split-kaart:hover .split-body,
.split-kaart:hover .split-cap {
  color: rgba(255, 255, 255, 0.7);
}

.split-kaart:hover .split-pijl {
  border-color: var(--lijn-op-donker);
}

.split-kaart:hover .split-bewijs {
  border-top-color: var(--lijn-op-donker);
}

/* ---------------------------------------------------------------- casekaarten */

.casekaart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid rgba(12, 13, 15, 0.06);
}

/* Het filter op /cases verbergt een kaart met het attribuut hidden, zodat alle
   zes in de HTML blijven staan voor Google en voor iemand zonder JavaScript.
   Dat werkte niet: de browser zet [hidden] op display:none in zijn eigen
   stylesheet, en de regel hierboven is van ons en wint daar altijd van. Gevolg
   was een filterbalk waarin de knoppen wél omschakelden en de telling wél
   meeliep, maar er geen kaart verdween. Deze regel zet dat recht. */
.casekaart[hidden] {
  display: none;
}

.op-licht .casekaart {
  background: var(--wit);
}

.casekaart-beeld {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-2);
}

.casekaart-beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--vlot);
}

.casekaart:hover .casekaart-beeld img {
  transform: scale(1.05);
}

.casekaart-merk {
  position: absolute;
  left: 20px;
  top: 20px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.casekaart-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 30px 30px 28px;
}

.casekaart-meta {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.casekaart-titel {
  display: block;
  margin-top: 14px;
  font-size: 26px;
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--ink);
  text-wrap: pretty;
}

.casekaart-voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 26px;
}

.pijlvak {
  width: 44px;
  height: 44px;
  border: 1px solid var(--lijn-knop);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--ink);
  flex: 0 0 auto;
  transition:
    background 0.3s,
    border-color 0.3s,
    transform 0.3s;
}

.casekaart:hover .pijlvak,
.dienstrij:hover .pijlvak {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--wit);
}

.pijlvak-groot {
  width: 54px;
  height: 54px;
}

/* ------------------------------------------------------------ dienstenlijst */

.dienstenlijst {
  border-top: 1px solid var(--lijn-deel);
}

.dienstrij {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px 16px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--lijn-deel);
  text-decoration: none;
  transition: transform 0.3s var(--vlot);
}

@media (min-width: 768px) {
  .dienstrij {
    grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1.4fr) 54px;
    gap: 32px;
    align-items: center;
    padding: 36px 0;
  }

  .dienstrij:hover {
    transform: translateY(-4px);
  }
}

/**
 * De korte rij op een lokale pagina: geen tags, een kleinere kop en een
 * smallere rij. Drie kolommen in plaats van vier.
 */
.dienstrij-kort {
  grid-template-columns: 40px minmax(0, 1fr);
  padding: 24px 0;
}

@media (min-width: 768px) {
  .dienstrij-kort {
    grid-template-columns: 64px minmax(0, 1fr) 54px;
    gap: 32px;
    padding: 30px 0;
  }
}

.dienstrij-kort .dienstrij-titel {
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -0.03em;
}

/* In de korte rij staat de zin zonder eigen regelhoogte en zonder nette
   afbreking: zo staat het in het ontwerp, en met 1.5 werd elke rij zes pixels
   hoger en liep de hele pagina eronder mee. */
.dienstrij-kort .dienstrij-kern {
  margin-top: 8px;
  line-height: normal;
  text-wrap: wrap;
}

.dienstrij-num {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--oranje);
}

.dienstrij-titel {
  display: block;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 500;
  color: var(--ink);
}

.dienstrij-kern {
  display: block;
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.tag {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  background: rgba(12, 13, 15, 0.06);
  padding: 8px 13px;
  white-space: nowrap;
}

/**
 * Ruimer waar de rij op zichzelf staat: de performance stack, de tools onder
 * een tekst en de tools in het donkere resultaatblok van een case. Krap waar
 * hij naast een titel staat, in de dienstenlijst en op een dienstkaart.
 */
.woordenrij .tag,
.sectie-tekstmetbeeld .tag,
.op-donker .tag {
  padding: 10px 16px;
}

.op-donker .tag {
  color: var(--wit);
  background: rgba(255, 255, 255, 0.12);
}

/* De tags en de pijl passen niet op een telefoon naast de titel. */
.dienstrij .tags,
.dienstrij .pijlvak {
  display: none;
}

@media (min-width: 768px) {
  .dienstrij .tags {
    display: flex;
  }

  .dienstrij .pijlvak {
    display: flex;
  }
}

/* --------------------------------------------------------------------- cijfers */

/**
 * De vier kengetallen. Op een telefoon twee naast elkaar en dichter op elkaar:
 * in één kolom met 40 pixels boven en onder elk getal vulden vier getallen
 * bijna een heel scherm met vooral witruimte. Vanaf 768 vallen ze vanzelf in
 * de rij van het ontwerp.
 */
.cijfers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
  margin-top: 56px;
  border-top: 1px solid var(--op-donker-lijn);
}

.cijfer {
  padding: 22px 0;
  border-bottom: 1px solid var(--op-donker-lijn);
}

@media (min-width: 768px) {
  .cijfers {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 0;
    margin-top: 96px;
  }

  .cijfer {
    padding: 40px 32px 40px 0;
  }
}

.cijfer-getal {
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: clamp(44px, 4.4vw, 72px);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 500;
  color: var(--wit);
}

.cijfer-unit {
  font-size: 22px;
  letter-spacing: 0;
  color: var(--op-donker-muted);
}

.cijfer-label {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
}

.op-licht .cijfer,
.op-wit .cijfer {
  border-bottom-color: var(--lijn-deel);
}

.op-licht .cijfers,
.op-wit .cijfers {
  border-top-color: var(--lijn-deel);
}

.op-licht .cijfer-getal,
.op-wit .cijfer-getal {
  color: var(--ink);
}

.op-licht .cijfer-unit,
.op-wit .cijfer-unit,
.op-licht .cijfer-label,
.op-wit .cijfer-label {
  color: var(--muted);
}

/**
 * De cijferstrook op /about staat in de lichte hero, direct onder het beeld:
 * geen lijn erboven maar eronder, en een maat kleiner dan op de startpagina.
 */
.hero[data-template='about'] .cijfers {
  margin-top: 0;
  border-top: 0;
  border-bottom: 1px solid var(--lijn-strook);
}

.hero[data-template='about'] .cijfer {
  border-bottom: 0;
}

.hero[data-template='about'] .cijfer-getal {
  font-size: clamp(40px, 4vw, 64px);
  color: var(--ink);
}

.hero[data-template='about'] .cijfer-unit {
  font-size: 20px;
  color: var(--muted);
}

.hero[data-template='about'] .cijfer-label {
  color: var(--muted);
}

/* ------------------------------------------------------------------ werkwijze */

/**
 * De werkwijze: vijf stappen met een lijn die meeloopt met het scrollen.
 *
 * **Onder 768 pixels staat die lijn verticaal en op een telefoon is dat de
 * enige vorm die werkt.** Liggend passen vijf stappen niet naast elkaar, dus
 * kwamen ze onder elkaar te staan terwijl de lijn en de bolletjes nog boven de
 * eerste stap hingen: die bolletjes vielen dan door de tekst van de stap
 * eronder. Verticaal loopt de lijn langs de nummers naar beneden en staat elk
 * bolletje voor zijn eigen "01", "02", "03".
 *
 * Vanaf 768 pixels is het weer de liggende vorm van het ontwerp.
 */
.werkwijze {
  position: relative;
  /* Ruimte links voor de lijn en de bolletjes. */
  padding-left: 28px;
}

.werkwijze-rail,
.werkwijze-lijn {
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
}

.werkwijze-rail {
  background: rgba(12, 13, 15, 0.14);
}

.werkwijze-lijn {
  /* Verticaal loopt de voortgang over de hoogte. Beweging.tsx zet alleen
     --werk-deel; welke maat dat is staat hier. */
  height: var(--werk-deel, 0%);
  background: var(--blauw);
  transition: height 0.2s linear;
}

.werkwijze-stappen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.werkwijze-stap {
  position: relative;
  min-width: 0;
}

.werkwijze-dot {
  position: absolute;
  /* Op de hoogte van het nummer, links van de tekst. */
  top: 4px;
  left: -28px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(12, 13, 15, 0.4);
  transition:
    background 0.3s,
    box-shadow 0.3s;
}

@media (min-width: 768px) {
  .werkwijze {
    padding-left: 0;
    padding-top: 40px;
  }

  .werkwijze-rail,
  .werkwijze-lijn {
    top: 0;
    bottom: auto;
    left: 0;
    height: 1px;
    width: auto;
  }

  .werkwijze-rail {
    right: 0;
  }

  .werkwijze-lijn {
    width: var(--werk-deel, 0%);
    height: 1px;
    transition: width 0.2s linear;
  }

  .werkwijze-stappen {
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 32px;
  }

  .werkwijze-dot {
    top: -46px;
    left: 0;
  }
}

.werkwijze-stap[data-bereikt='1'] .werkwijze-dot {
  background: var(--blauw);
  box-shadow: 0 0 0 1px var(--blauw);
}

.werkwijze-num {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  transition: color 0.3s;
}

.werkwijze-stap[data-bereikt='1'] .werkwijze-num {
  color: var(--blauw);
}

/* Vaste 26 pixels, niet de schaal van .h3: zo staat het in het ontwerp. */
.werkwijze-titel {
  margin: 0;
  font-size: 26px;
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--ink);
}

.werkwijze-tijd {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Merkoranje, ook al haalt dat op de lichte achtergrond een contrast van
     2,7 op 1 en rekent Lighthouse 4,5 voor kleine tekst. Een donkerder tint
     stond er kort en Daan wilde het merkoranje terug, hier en bij de nummers
     van de diensten: het is een accent, geen leestekst. */
  color: var(--oranje);
}

.werkwijze-body {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 30ch;
  text-wrap: pretty;
}

/* -------------------------------------------------------------------- reviews */

.reviewkop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.sterren {
  display: flex;
  gap: 3px;
  color: var(--oranje);
  font-size: 18px;
}

/**
 * De reviewrails lopen van rand tot rand, ook buiten de inhoudsbreedte. In het
 * ontwerp staan ze buiten de container van 1560 pixels; hier stappen ze met
 * een negatieve marge uit de marge van .binnen. Zonder dat stopt de rij 56
 * pixels voor de
 * rand en zie je hem "in" de pagina hangen.
 */
.reviewrails {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /**
   * Geen `100vw` en geen `50vw`. Die eenheid rekent de breedte van de
   * schuifbalk mee en de layout niet, dus met een zichtbare schuifbalk was de
   * rij 19 pixels te breed en stond hij 9,5 pixels te ver naar links. Op een
   * Mac valt dat niet op omdat de balk daar over de inhoud zweeft; op Windows
   * staat hij standaard in de layout en dan is het er wel.
   *
   * Het masker aan de randen verbergt het gevolg, dus niemand zou het zien —
   * maar de meting tegen het ontwerp zag het wel, 210 keer op de startpagina,
   * en een meting die iets meldt wat niemand kan zien is net zo lastig als een
   * fout die niemand meldt.
   *
   * Met de marge van .binnen loopt de rij precies tot de rand van de
   * inhoudsstrook. Boven 1560 pixels stopt hij daar en niet tegen het glas;
   * dat is 4 pixels anders dan het ontwerp en valt achter het masker weg.
   */
  width: calc(100% + 2 * var(--marge));
  margin-left: calc(-1 * var(--marge));
  /* Op een telefoon minder ruimte eromheen, om dezelfde reden als bij de kaart. */
  padding: 40px 0 72px;
}

/* De ruimte onder de sectie zit in de rails zelf. */
.sectie-reviews {
  padding-bottom: 0;
}

@media (min-width: 768px) {
  .reviewrails {
    gap: 24px;
    padding: 64px 0 160px;
  }
}

.reviewkaart {
  flex: 0 0 auto;
  /**
   * Op een telefoon smaller dan het scherm, zodat je ziet dat er een rij
   * doorloopt.
   *
   * Een kaart van 452 pixels op een scherm van 375 is breder dan het venster:
   * je ziet er één, hij loopt aan beide kanten buiten beeld en er is niets dat
   * verraadt dat er meer zijn. Met 80 procent van de breedte staat de volgende
   * kaart net in beeld.
   */
  width: min(452px, 84vw);
  margin: 0 16px 0 0;
  background: var(--wit);
  border: 1px solid rgba(12, 13, 15, 0.1);
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}

@media (min-width: 768px) {
  .reviewkaart {
    margin-right: 24px;
    padding: 40px 38px 32px;
  }
}

.reviewkaart:hover {
  border-color: rgba(12, 13, 15, 0.3);
  box-shadow: 0 18px 44px rgba(12, 13, 15, 0.1);
}

/**
 * Op een telefoon is de kaart compacter: kleinere letter, minder marge, een
 * kleiner initialenvak. Twee rijen van deze kaarten staan onder elkaar, en met
 * de maten van het ontwerp was dat samen 1.100 pixels, ruim meer dan een
 * scherm. De tekst blijft heel: een review die halverwege ophoudt leest als
 * een fout. Vanaf 768 de maten van het ontwerp.
 */
.reviewkaart-boven {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.reviewkaart blockquote {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.014em;
  color: var(--ink);
  text-wrap: pretty;
}

.reviewkaart figcaption {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(12, 13, 15, 0.1);
}

@media (min-width: 768px) {
  .reviewkaart-boven {
    margin-bottom: 28px;
  }

  .reviewkaart blockquote {
    margin-bottom: 36px;
    font-size: 17px;
    line-height: 1.62;
  }

  .reviewkaart figcaption {
    gap: 16px;
    padding-top: 26px;
  }

  .initialen {
    width: 44px;
    height: 44px;
  }
}

/* Het vakje links van de naam op een reviewkaart: een foto, of de initialen
   als er nog geen foto is.
 *
 * Rond, op verzoek van Jos, 15 september 2026. Ook het vakje met de initialen,
 * want een rij waarin het ene portret rond is en het andere vierkant leest
 * onrustiger dan één vorm voor allebei. Dit is het enige gebruik van deze
 * klasse; de portretten van het team en de specialistkaart blijven rechthoekig
 * zoals ze in het ontwerp staan. */
.initialen {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  background: var(--surface-2);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* Staat er een foto bij de review, dan vult die dezelfde cirkel. Zelfde maat
   als de initialen, zodat de kaart even hoog blijft of er nu een foto is of
   niet. */
.initialen-foto {
  padding: 0;
}

/* ------------------------------------------------------------- business case */

/**
 * De rekenmodule. Op een telefoon is de binnenmarge het probleem: 56 pixels aan
 * elke kant haalt van een scherm van 375 nog eens 112 pixels weg, en dan blijft
 * er voor de schuifregelaars en de uitkomst 206 pixels over. Daar is niets meer
 * mee te doen. Vanaf 1024 staat het weer op de maat van het ontwerp.
 */
.businesscase {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  background: var(--wit);
  border: 1px solid var(--lijn-kaart);
  padding: 28px 20px;
}

@media (min-width: 768px) {
  .businesscase {
    gap: 40px 56px;
    padding: 44px 36px;
  }
}

@media (min-width: 1024px) {
  .businesscase {
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    gap: 56px 88px;
    padding: 64px 56px;
  }
}

.bc-links {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.bc-tabs {
  display: inline-flex;
  border: 1px solid var(--lijn-knop);
}

.bc-tabs button {
  /* 38 pixels, zoals in het ontwerp. De min-height van 44 uit de gedeelde laag
     moet daarvoor eerst weg; het tikvlak komt uit ::after hieronder. */
  min-height: 0;
  height: 38px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}

.bc-tabs button + button {
  border-left: 1px solid var(--lijn-knop);
}

.bc-tabs button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--wit);
}

.bc-melding {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.07);
}

.bc-melding::before {
  content: '';
  flex: 0 0 auto;
  margin-top: 6px;
  width: 7px;
  height: 7px;
  background: var(--groen);
}

.bc-melding p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

.bc-velden {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 24px;
}

@media (min-width: 768px) {
  .bc-velden {
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  }
}

.bc-veld {
  display: block;
  /* Een cel in een grid krimpt niet onder de breedte van zijn inhoud. Zonder
     dit loopt een getalveld op een telefoon buiten het scherm. */
  min-width: 0;
  max-width: 100%;
}

.bc-veld-breed {
  grid-column: 1 / -1;
}

.bc-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.bc-labelrij {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.bc-waarde {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.bc-veld input[type='range'] {
  width: 100%;
  min-width: 0;
  /**
   * Een lijn van twee pixels, zoals in het ontwerp. De gedeelde laag zet op
   * elk invoerveld een min-height van 44; die moet hier weg, anders staat er
   * een balk van 44 pixels en schuift alles eronder 42 pixels naar beneden.
   *
   * Het aanraakvlak is hier de knop op de lijn, en die tekent de browser zelf.
   * Dat is minder dan 44 pixels; het is de enige plek waar we die maat niet
   * halen, en het staat zo in het aangeleverde ontwerp. Zie CONVENTIES.md.
   */
  min-height: 0;
  height: 2px;
  accent-color: var(--ink);
  cursor: pointer;
}

.bc-grens {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

.bc-invoer {
  position: relative;
  display: block;
  min-width: 0;
}

.bc-invoer input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 56px;
  padding: 0 18px 0 34px;
  border: 1px solid var(--lijn-knop);
  background: var(--surface);
  /**
   * 16px onder 768 pixels, want iOS zoomt de hele pagina in bij een invoerveld
   * dat kleiner is. Daarboven 15px, zoals in het ontwerp. Dit is de enige plek
   * waar we van het ontwerp afwijken en alleen op een telefoon; zie
   * CONVENTIES.md.
   */
  font-size: 16px;
  color: var(--ink);
  outline: none;
}

@media (min-width: 768px) {
  .bc-invoer input,
  .bc-suffix input {
    font-size: 15px;
  }
}

.bc-prefix {
  position: absolute;
  left: 18px;
  top: 0;
  height: 56px;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: var(--muted);
}

.bc-suffix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid var(--lijn-knop);
  background: var(--surface);
}

.bc-suffix input {
  width: 100%;
  min-width: 0;
  height: 54px;
  padding: 0 8px 0 18px;
  border: 0;
  background: transparent;
  font-size: 16px;
  color: var(--ink);
  outline: none;
}

.bc-suffix span {
  padding: 0 18px 0 0;
  font-size: 15px;
  color: var(--muted);
}

.bc-uitkomst {
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--wit);
  padding: 28px 22px;
  min-width: 0;
}

@media (min-width: 768px) {
  .bc-uitkomst {
    padding: 44px 40px;
  }
}

.bc-uitkomst-kop {
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--op-donker-muted);
}

.bc-badge {
  padding: 6px 10px;
  border: 1px solid rgba(34, 197, 94, 0.5);
  color: var(--groen-licht);
  letter-spacing: 0.04em;
}

.bc-brug {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  font-size: 17px;
  line-height: 1.3;
  color: var(--op-donker-body);
}

.bc-brug strong {
  font-weight: 600;
  color: var(--wit);
}

.bc-brug .groen {
  color: var(--groen-licht);
}

.bc-groot {
  margin: 0;
  font-size: clamp(52px, 5.4vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.05em;
  font-weight: 500;
  color: var(--wit);
}

.bc-onder {
  margin: 12px 0 0;
  font-size: 20px;
  line-height: 1.4;
  color: var(--op-donker-body);
}

.bc-onder span {
  color: rgba(255, 255, 255, 0.5);
}

.bc-balken {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

.bc-balk {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.bc-balk-naam {
  font-size: 13px;
  color: var(--op-donker-muted);
}

.bc-balk-spoor {
  position: relative;
  display: block;
  height: 28px;
  background: rgba(255, 255, 255, 0.08);
  min-width: 0;
}

.bc-balk-vul {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(255, 255, 255, 0.22);
  transition: width 0.4s var(--vlot);
}

.bc-balk-vul[data-klubb='1'] {
  background: var(--groen);
}

.bc-balk-getal {
  position: absolute;
  left: 12px;
  top: 0;
  height: 28px;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--wit);
}

.bc-balk-vul[data-klubb='1'] + .bc-balk-getal {
  color: var(--ink);
}

.bc-omzet {
  margin: 28px 0 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 500;
  color: var(--wit);
}

.bc-omzet span {
  font-size: 17px;
  letter-spacing: 0;
  color: var(--op-donker-muted);
}

.bc-uitleg {
  margin: 32px 0 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 15px;
  line-height: 1.6;
  color: var(--op-donker-body);
}

.bc-uitleg strong {
  font-weight: 600;
  color: var(--wit);
}

.bc-disclaimer {
  margin: 24px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--op-donker-muted);
}

/* ----------------------------------------------------------------------- team */

.teamkaart {
  flex: 0 0 auto;
  /* Zelfde reden als bij de reviewkaart: één portret dat het hele scherm vult
     leest niet als een rij die doorloopt. */
  width: min(272px, 62vw);
  margin: 0 16px 0 0;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .teamkaart {
    width: 272px;
    margin-right: 28px;
  }
}

/* Het vaste rooster op /about: kolommen van 210 pixels, geen schuivende rij.
   De kaart heeft daar dus geen vaste breedte en geen marge rechts. */
/* Het rooster op /about.
 *
 * Hier stond `repeat(auto-fit, minmax(min(210px, 100%), 1fr))`. Bij zes
 * teamleden geeft dat op een gewoon scherm vijf kolommen, en dus een volle rij
 * van vijf met één kaart alleen op de tweede rij. Dat leest als een fout, ook
 * al is het er geen. Nu drie kolommen: twee volle rijen van drie, met ruimere
 * kaarten en dus een groter portret. Op verzoek van Jos, 15 september 2026.
 *
 * Komt er een zevende bij, dan staat die alleen op de derde rij. Dat is bij
 * drie kolommen onvermijdelijk en bij vijf net zo goed; met zeven leden is
 * deze keuze opnieuw te bekijken.
 */
.teamrooster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 560px) {
  .teamrooster {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .teamrooster {
    /* Drie kolommen, maar met een grens aan de breedte en de rest van de ruimte
       in de tussenruimte. Zonder die grens werd een kaart 419 pixels breed en
       het portret 559 hoog: anderhalf keer de maat uit het ontwerp, en een
       sectie van ruim 1500 pixels hoog voor zes mensen. Met 340 blijft de kaart
       dicht bij de 272 van de schuivende rij en vult het rooster toch de volle
       kolom. */
    grid-template-columns: repeat(3, minmax(0, 340px));
    justify-content: space-between;
    gap: 36px 28px;
  }
}

.teamrooster .teamkaart {
  flex: initial;
  width: auto;
  margin: 0;
}

@media (min-width: 768px) {
  .teamkaart {
    width: 272px;
    margin-right: 28px;
  }
}

.portret {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface-2);
}

.portret img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transition:
    filter 0.45s ease,
    transform 0.7s var(--vlot);
}

.teamkaart h3 {
  margin: 22px 0 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.teamkaart-rol {
  margin: 7px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.teamkaart-zin {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 30ch;
  text-wrap: pretty;
}

/**
 * De onderregel van een kaart in de teamrij.
 *
 * Onder een portret staat hier niets meer. Er stonden "Bel" en "Mail": eerst
 * als kale tekstlinks, toen als een eigen compacte knop en daarna als de gewone
 * knop van de site. Geen van drieën stond Jos aan onder een portret, en op
 * 15 september 2026 zijn ze eruit gegaan. Een kaart is nu het portret, de naam,
 * de rol en de zin.
 *
 * De klasse blijft: de kaart "Jij hier?" gebruikt hem voor zijn pijllink.
 */
.teamkaart-acties {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.vacaturekaart {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--wit);
  border: 1px solid var(--lijn-deel);
  text-decoration: none;
}

.vacaturekaart-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    72% 58% at 50% 108%,
    rgba(255, 105, 0, 0.2) 0%,
    rgba(255, 105, 0, 0.06) 44%,
    rgba(255, 105, 0, 0) 76%
  );
}

.vacaturekaart .pijlvak {
  position: absolute;
  right: 20px;
  bottom: 20px;
  background: rgba(12, 13, 15, 0.06);
}

/* ------------------------------------------------------------------ artikelen */

.artikelkaart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 34px 32px 30px;
  background: var(--wit);
  border: 1px solid var(--lijn-kaart);
  text-decoration: none;
  transition: border-color 0.3s;
}

.op-wit .artikelkaart {
  background: var(--surface);
}

.artikelkaart:hover {
  border-color: rgba(12, 13, 15, 0.3);
}

.artikelkaart-tag {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oranje);
}

.artikelkaart h2,
.artikelkaart h3 {
  margin: 22px 0 0;
  font-size: 24px;
  line-height: 1.16;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--ink);
  text-wrap: pretty;
}

/**
 * Drie kaarten in een smallere kolom dan een overzicht: 300 in plaats van 340.
 * Zo staat het in het ontwerp, onderaan een artikel en op de startpagina.
 */
.rooster-krap {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/* De korte kaart onderaan een artikel: onderwerp, titel, leestijd. */
.artikelkaart-kort {
  padding: 30px 30px 26px;
}

.artikelkaart-kort h2,
.artikelkaart-kort h3 {
  margin-top: 16px;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.artikelkaart-kort .artikelkaart-tijd {
  display: block;
  margin-top: auto;
  padding-top: 22px;
}

.artikelkaart-boven {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.artikelkaart-tijd {
  font-size: 13px;
  color: var(--muted);
}

/* Twee regels met een vervaging naar onderen, zoals de situatie op een
   casekaart: genoeg om te willen doorlezen, niet genoeg om het al gelezen te
   hebben. */
.artikelkaart-intro {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, 0.15) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, 0.15) 100%);
}

.artikelkaart-meta {
  display: block;
  margin-top: auto;
  padding-top: 26px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------------------------------------------------------------------- vragen */

.vragen {
  border-top: 1px solid var(--lijn-deel);
}

.vraag {
  border-bottom: 1px solid var(--lijn-deel);
}

.vraag > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

/* De vraag zelf is een h3 en het label boven de lijst een h2 (zie Vragen en
   Sectiekop). De tag geeft betekenis, de klasse het uiterlijk: daarom gaan de
   browsermaten van die koppen hier uit, anders springt de vraag naar 18 pixels
   vet met een marge eromheen. */
.vraag-titel {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

h2.eyebrow,
h3.eyebrow {
  line-height: inherit;
}

.vraag > summary::-webkit-details-marker {
  display: none;
}

.vraag-plus {
  flex: 0 0 auto;
  /* Het plusteken erft de vetheid van de vraag niet: in het ontwerp staat het
     in de gewone snit. */
  font-weight: 400;
  letter-spacing: normal;
  width: 36px;
  height: 36px;
  border: 1px solid var(--lijn-knop);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

/**
 * Bij hover over de vraag keert het vierkantje om, precies zoals het pijlvak op
 * een casekaart en op de disciplineblokken bij "Wat we doen".
 *
 * In het ontwerp is dat één en hetzelfde gedrag: het plusje heeft daar het
 * attribuut `data-case-arrow`, hetzelfde als die pijlvakken, en het script zet
 * bij hover op de hele rij de achtergrond op #0C0D0F en de tekst op wit. Hier
 * stond alleen de open-stand, dus het vierkantje deed bij hover niets en de
 * vraag voelde niet aan als iets waarop je kunt klikken.
 *
 * Op `:hover` van de summary en niet van het vierkantje zelf: je beweegt over
 * de vraag, niet over het plusje. `:focus-visible` staat erbij zodat het met
 * een toetsenbord hetzelfde doet.
 */
.vraag > summary:hover .vraag-plus,
.vraag > summary:focus-visible .vraag-plus,
.vraag[open] .vraag-plus {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--wit);
}

.vraag-antwoord {
  padding: 0 60px 28px 0;
  font-size: 17px;
  line-height: 1.62;
  color: var(--muted);
}

.vraag-antwoord p {
  margin: 0 0 14px;
  text-wrap: pretty;
}

.vraag-antwoord p:last-child {
  margin-bottom: 0;
}

.op-donker .vraag,
.op-donker .vragen {
  border-color: var(--op-donker-lijn);
}

.op-donker .vraag > summary {
  color: var(--wit);
}

.op-donker .vraag-plus {
  border-color: var(--lijn-op-donker);
  color: var(--wit);
}

.op-donker .vraag > summary:hover .vraag-plus,
.op-donker .vraag > summary:focus-visible .vraag-plus,
.op-donker .vraag[open] .vraag-plus {
  background: var(--wit);
  border-color: var(--wit);
  color: var(--ink);
}

/* ---------------------------------------------------------------- slot-oproep */

.slot {
  position: relative;
  background: var(--ink);
  color: var(--wit);
  overflow: hidden;
}

/**
 * De blauwe gloed achter de slotoproep.
 *
 * Dezelfde valkuil als bij .hero-glow-a: de maten zijn percentages van de
 * sectie, en op een telefoon is die sectie smal en hoog. Zestig procent breed
 * bij 150 procent hoog werd daar een verticale streep van 250 bij 965 pixels.
 * Onder 768 pixels staat de hoogte daarom in vw, zodat de vlek rond blijft
 * zoals op een groot scherm. Vanaf 768 de maten van het ontwerp.
 */
.slot-glow {
  position: absolute;
  top: -10%;
  left: -20%;
  width: 140%;
  height: 130vw;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(27, 77, 255, 0.32) 0%,
    rgba(27, 77, 255, 0) 70%
  );
  animation: klubbMesh 26s ease-in-out infinite;
  pointer-events: none;
}

@media (min-width: 768px) {
  .slot-glow {
    top: -40%;
    left: 10%;
    width: 60%;
    height: 150%;
  }
}

.slot-binnen {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 56px 88px;
  align-items: end;
  /* Onder 1024 pixels dezelfde reden als bij --marge: 176 pixels boven en
     onder is op een telefoon bijna een leeg scherm voordat de oproep begint.
     Vanaf 1024 staat het weer op de maat van het ontwerp. */
  padding-top: 88px;
  padding-bottom: 88px;
}

@media (min-width: 768px) {
  .slot-binnen {
    padding-top: 128px;
    padding-bottom: 128px;
  }
}

@media (min-width: 1024px) {
  .slot-binnen {
    padding-top: 176px;
    padding-bottom: 176px;
  }
}

.slot-kop {
  /* De negatieve ondermarge haalt de onderruimte van de regel weg, zodat de
     kop op dezelfde lijn eindigt als de tekst ernaast. Zo staat het in het
     ontwerp. */
  margin: 0 0 -0.14em;
  max-width: 16ch;
  font-size: clamp(44px, 5.4vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.05em;
  font-weight: 500;
  text-wrap: balance;
}

.slot-body {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  color: var(--op-donker-body);
  max-width: 44ch;
  text-wrap: pretty;
}

.slot .knoppen {
  margin-top: 40px;
  gap: 12px;
}

/* De knoppen van de oproep zijn 56 pixels hoog, twee meer dan elders. */
.slot .knop {
  min-height: 56px;
}

/* ---------------------------------------------------------------- deliverables */

/**
 * Wat je krijgt: een raster met lijnen ertussen, zoals in het ontwerp. De
 * randen staan op de cellen (rechts en onder) plus een lijn boven en links op
 * het raster zelf; zo staat er nooit een dubbele lijn.
 */
.deliverables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 0;
  border-top: 1px solid var(--lijn-deel);
  border-left: 1px solid var(--lijn-deel);
}

.deliverable {
  padding: 34px 32px 36px;
  border-right: 1px solid var(--lijn-deel);
  border-bottom: 1px solid var(--lijn-deel);
}

.deliverable::before {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  margin-bottom: 22px;
  background: var(--oranje);
}

.deliverable strong {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--ink);
}

.deliverable p {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--muted);
  text-wrap: pretty;
}

/* ------------------------------------------------------------------- kpi's */

/**
 * De drie cijfers halverwege een casepagina. Ze staan op de lichte sectie, met
 * een lijn erboven en onder elke cel. Alleen de vier bedrijfscijfers (`.cijfers`)
 * tellen op vanaf nul; deze staan stil.
 */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 0;
  border-top: 1px solid var(--lijn-strook);
}

.kpi {
  padding: 28px 0;
  border-bottom: 1px solid var(--lijn-strook);
}

@media (min-width: 768px) {
  .kpi {
    padding: 40px 32px 40px 0;
  }
}

.kpi-getal {
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: clamp(44px, 4.4vw, 72px);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 500;
  color: var(--ink);
}

.kpi-unit {
  font-size: 22px;
  letter-spacing: 0;
  color: var(--muted);
}

.kpi-label {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

/**
 * De werkwijze als lijst, op /about: het nummer links, de stap in het midden en
 * de doorlooptijd rechts, alle drie op één basislijn.
 */
.werklijst {
  border-top: 1px solid var(--lijn-deel);
}

.werkrij {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: baseline;
  padding: 30px 0;
  border-bottom: 1px solid var(--lijn-deel);
}

@media (max-width: 767px) {
  .werkrij {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .werkrij-tijd {
    grid-column: 2;
  }
}

.werkrij-num {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--oranje);
}

.werkrij-tekst {
  display: block;
  min-width: 0;
}

.werkrij-titel {
  display: block;
  font-size: 26px;
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--ink);
}

.werkrij-body {
  display: block;
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

.werkrij-tijd {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ── de kaarten "Waar we voor staan" */
.waardekaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
}

.waardekaart {
  padding: 40px 36px;
  background: var(--wit);
  border: 1px solid var(--lijn-kaart);
}

.op-wit .waardekaart {
  background: var(--surface);
}

.waardekaart-punt {
  display: block;
  width: 9px;
  height: 9px;
  margin-bottom: 26px;
}

.waardekaart-kop {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--ink);
}

.waardekaart-tekst {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.62;
  color: var(--muted);
  text-wrap: pretty;
}

/* ── de strook met de open vacature */
.vacaturestrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 34px 40px;
  background: var(--surface);
  border: 1px solid var(--lijn-kaart);
  text-decoration: none;
  transition: transform 0.3s var(--vlot);
}

/* Twee open vacatures geven twee stroken onder elkaar. */
.vacaturestrip + .vacaturestrip {
  margin-top: 12px;
}

.vacaturestrip:hover {
  transform: translateY(-4px);
}

.op-licht .vacaturestrip {
  background: var(--wit);
}

.vacaturestrip-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.vacaturestrip-punt {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  background: var(--groen);
}

.vacaturestrip-titel {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.vacaturestrip-details {
  font-size: 15px;
  color: var(--muted);
}

.vacaturestrip-knop {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/**
 * De strook staat in het ontwerp 96 pixels onder de sectie erboven, binnen
 * dezelfde witruimte. Bij ons is het een eigen sectie, dus de sectie ervoor
 * houdt geen onderruimte en deze zet de 96.
 */
.sectie-vacaturestrip {
  padding-top: 96px;
}

.sectie:has(+ .sectie-vacaturestrip) {
  padding-bottom: 0;
}

/* ------------------------------------------------------------- transparantie */

.tegels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 20px;
}

.tegel {
  padding: 34px 32px;
  background: var(--wit);
  border: 1px solid var(--lijn-kaart);
}

.op-wit .tegel {
  background: var(--surface);
}

.op-donker .tegel {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--op-donker-lijn);
}

/**
 * De tekst in een tegel heeft een eigen klasse en niet `.tegel p`.
 *
 * Zo'n regel op de tag is sterker dan een klasse op het element zelf, dus
 * .tegel-waarde en .eyebrow kwamen er niet doorheen: de kop van een tegel werd
 * 15 pixels in plaats van 13 en het cijfer 15 in plaats van 32.
 */
.tegel-tekst {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.op-donker .tegel-tekst {
  color: var(--op-donker-body);
}

/* De match/geen-match lijsten. */
.matchlijst {
  list-style: none;
  margin: 0;
  padding: 0;
}

.matchlijst li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--lijn-deel);
  font-size: 17px;
  line-height: 1.55;
}

.matchlijst li::before {
  content: '';
  flex: 0 0 auto;
  margin-top: 9px;
  width: 7px;
  height: 7px;
  background: var(--groen);
}

.matchlijst[data-geen='1'] li::before {
  background: var(--muted);
}

.op-donker .matchlijst li {
  border-bottom-color: var(--op-donker-lijn);
}

/**
 * De puntlijst: een vierkant blokje voor elke regel, een lijn boven de lijst en
 * onder elke regel.
 *
 * Het blokje staat in een eigen kolom van 32 (of 24) pixels en niet als
 * `::before` in een flexrij. Dat is nodig omdat het ontwerp de tekst op een
 * vaste kolom laat beginnen: met een flexrij hangt die plek af van de breedte
 * van het blokje, en dan schuift de tekst een paar pixels op.
 */
.puntlijst {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--lijn-deel);
}

/**
 * Op een telefoon springt de tekst 32 pixels in en niet 48. Met 48 bleef er
 * op 375 pixels 278 over voor de zin, en dan viel bijna elke regel op anderhalf
 * tot twee regels met een los woord onderaan. Vanaf 768 de maat van het
 * ontwerp.
 */
.puntlijst li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--lijn-deel);
}

@media (min-width: 768px) {
  .puntlijst li {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 16px;
    padding: 22px 0;
  }
}

.puntlijst[data-maat='kort'] li {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
}

.puntlijst-punt {
  width: 9px;
  height: 9px;
  margin-top: 9px;
  background: var(--oranje);
}

.puntlijst[data-maat='kort'] .puntlijst-punt {
  width: 7px;
  height: 7px;
}

/**
 * Drie kleuren, en op een vacaturepagina staan ze alle drie op één pagina:
 * oranje bij "Wat je doet", blauw bij "Wat je meebrengt", groen bij "Wat je
 * krijgt". Zo staat het in het ontwerp, en het is daar het enige plek waar de
 * kleur iets zegt over de lijst en niet over de sectie.
 */
.puntlijst[data-punt='blauw'] .puntlijst-punt {
  background: var(--blauw);
}

.puntlijst[data-punt='groen'] .puntlijst-punt {
  background: var(--groen);
}

.puntlijst p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .puntlijst p {
    font-size: 17px;
    line-height: 1.55;
  }
}

/* In de lijsten op een vacaturepagina breekt de tekst gewoon af. Zo staat het
   in het ontwerp: daar staat de tekst los in de regel, zonder `text-wrap`. */
.puntlijst[data-wrap='strak'] p {
  text-wrap: wrap;
}

/* Staat er een kop voor de zin, dan is de kop donker en de zin grijs. */
.puntlijst p:has(strong) {
  color: var(--muted);
}

.puntlijst strong {
  font-weight: 500;
  color: var(--ink);
}

.op-donker .puntlijst {
  border-top-color: var(--op-donker-lijn);
}

.op-donker .puntlijst li {
  border-bottom-color: var(--op-donker-lijn);
}

.op-donker .puntlijst p {
  color: rgba(255, 255, 255, 0.85);
}

/* De puntlijst in het donkere resultaatblok staat 36 pixels onder de alinea. */
.caseresultaat-tekst + .puntlijst {
  margin-top: 36px;
}

/**
 * Een label met een link ernaast, boven een rij binnen een sectie. De ruimte
 * eronder is 22 pixels; boven een hele sectie is dat 56 en dan is het een
 * `.sectiekop`.
 */
.kopregel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 22px;
}

.kopregel .eyebrow {
  margin: 0;
}

/**
 * Een kolom die blijft staan zolang de kolom ernaast in beeld is.
 *
 * **Alleen vanaf 1024 pixels, en dat is de hele reden dat deze klasse bestaat.**
 * Onder die breedte staan de twee kolommen onder elkaar, en dan doet `sticky`
 * precies het verkeerde: de kop blijft hangen terwijl de inhoud die erbij hoort
 * eronder doorschuift, dwars over die kop heen. Het stond eerder als inline
 * stijl op twee plekken en gold dus op elke breedte.
 */
.blijfstaan {
  position: static;
}

@media (min-width: 1024px) {
  .blijfstaan {
    position: sticky;
    top: 140px;
  }
}

/* ---------------------------------------------------------------- systeemlagen */

.lagen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--op-donker-lijn);
  border: 1px solid var(--op-donker-lijn);
}

@media (min-width: 768px) {
  .lagen {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  }
}

.laag {
  padding: 28px 26px;
  background: var(--ink);
}

.laag-num {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--oranje);
}

.laag h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--wit);
}

.laag p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--op-donker-body);
}

/* -------------------------------------------------------------- specialist-cta */

/**
 * De persoonskaart: portret links, naam en twee links ernaast.
 *
 * Het portret is 96 bij 120 en staat vast, ook op een telefoon: de kaart is
 * dan smaller maar blijft één rij. Dat is het ontwerp, en met het portret
 * eronder valt de kaart uit elkaar.
 */
/**
 * Op een telefoon iets krapper: naast een portret van 96 pixels bleef er in
 * de kaart 159 pixels over voor de tekst, en dan brak "Vragen over deze
 * case?" af na "deze". Met 20 pixels marge en 18 ertussen is dat 181, en met
 * het label een maat kleiner past de vraag op één regel. Vanaf 768 de maten
 * van het ontwerp.
 */
.specialist {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
  background: var(--wit);
  border: 1px solid var(--lijn-kaart);
}

@media (min-width: 768px) {
  .specialist {
    gap: 24px;
    padding: 28px;
  }
}

/* Onder een artikel is de kaart een maat kleiner. */
.specialist-klein {
  gap: 24px;
}

.specialist-klein .specialist-portret {
  width: 80px;
  height: 100px;
}

/* Daar staat maar één link, en die staat tien pixels onder de naam. */
.specialist-klein .specialist-label + .specialist-naam + .specialist-links {
  margin-top: 10px;
}

/* Op een dienstpagina staat de kaart in een lichte tint, met het label erboven
   en een grens aan de breedte. Op een casepagina staat hij wit en over de volle
   kolombreedte. */
.specialistvak .specialist {
  /* 520, zoals in het ontwerp. Het stond een middag op 560 toen de twee links
     knoppen waren en anders onder elkaar vielen; met tekstlinks past het weer. */
  max-width: 520px;
  background: var(--surface);
}

.specialist-portret {
  flex: 0 0 auto;
  position: relative;
  width: 96px;
  height: 120px;
  overflow: hidden;
  background: var(--surface-2);
}

.specialist-portret img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Het portret is op ooghoogte uitgesneden, niet op het midden. */
  object-fit: cover;
  object-position: center 18%;
}

.specialist-tekst {
  display: block;
  min-width: 0;
}

.specialist-naam {
  display: block;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.specialist-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 768px) {
  .specialist-label {
    font-size: 13px;
    letter-spacing: 0.06em;
  }
}

/* Op een dienstpagina staat de rol onder de naam, op een casepagina de vraag
   erboven. De afstand hangt dus af van de volgorde. */
.specialist-naam + .specialist-label {
  margin-top: 4px;
}

.specialist-label + .specialist-naam {
  margin-top: 8px;
}

.specialist-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 16px;
}

/* De tekstkolom pakt de ruimte die het portret overlaat. Zonder dit krimpt hij
   naar zijn eigen inhoud en vallen het nummer en het adres onder elkaar,
   terwijl er rechts in de kaart nog ruimte over is. */
.specialistvak .specialist-tekst {
  flex: 1 1 auto;
}

.specialist-label + .specialist-naam + .specialist-links {
  margin-top: 12px;
}

.specialist-links a {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

/* Op een landingspagina staat onder "Bel Jos" en "Mail Jos" ook nog de weg naar
   de dienst zelf. Die krijgt een eigen regel: naast de twee knoppen brak hij
   midden in de dienstnaam af, "Over Design & / Development →". */
.specialist-seo .specialist-links a.specialist-link-zacht {
  flex-basis: 100%;
  margin-top: 2px;
}

/* Met de klasse erbij, want `.specialist-links a` is even specifiek als een
   losse klasse en zou anders winnen. */
.specialist-links a.specialist-link-zacht {
  color: var(--muted);
}

.specialist-links a:hover,
.specialist-links a.specialist-link-zacht:hover {
  color: var(--blauw);
}

/* ---------------------------------------------------------------- werk in beeld
 *
 * Twee roosters op een dienstpagina: mockups van opgeleverd werk bij Design &
 * Development, video's bij Content.
 *
 * **Het mockuprooster verspringt met opzet.** Het ontwerp geeft elk vak een
 * eigen basisbreedte en de tweede en de vijfde een marge aan de bovenkant, zodat
 * de rij niet als een strak raster leest. Die zes maten staan hier als een
 * patroon op `data-mock`, dat de component per index meegeeft en na zes items
 * herhaalt. In het CMS staat dus alleen wat er te zien is, niet hoe breed het
 * moet; anders zou de redactie de opmaak beheren.
 */

.mockrooster {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 24px;
}

.mockvak {
  margin: 0;
  min-width: 0;
}

/* De zes maten uit het ontwerp, in volgorde. */
.mockvak[data-mock='0'] {
  flex: 1 1 min(620px, 100%);
}

.mockvak[data-mock='1'] {
  flex: 1 1 min(420px, 100%);
  padding-top: 72px;
}

.mockvak[data-mock='2'],
.mockvak[data-mock='3'] {
  flex: 1 1 min(560px, 100%);
}

.mockvak[data-mock='4'] {
  flex: 1 1 min(520px, 100%);
  padding-top: 64px;
}

.mockvak[data-mock='5'] {
  flex: 1 1 min(600px, 100%);
}

/* Op een telefoon staat alles onder elkaar en heeft een marge aan de bovenkant
   geen betekenis meer: het zou een gat tussen twee vakken worden. */
@media (max-width: 767px) {
  .mockvak {
    padding-top: 0 !important;
  }
}

.mockbeeld {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface-2);
}

/* Het beeld staat 6% hoger en is 112% hoog: zo houdt het ontwerp ruimte over
   voor de parallax zonder dat er een rand onderaan zichtbaar wordt. */
.mockbeeld img {
  position: absolute;
  left: 0;
  top: -6%;
  width: 100%;
  height: 112%;
  object-fit: cover;
}

.mockregel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.mocktitel {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.mocksoort {
  font-size: 14px;
  color: var(--muted);
}

/**
 * De video's: één liggend van 16 op 9 naast een kolom met staande van 9 op 16.
 * Die staande verspringen onderling met 0, 30 en 14 pixels, zoals in het
 * ontwerp; ook dat is een patroon in de code en geen veld in het CMS.
 */
.videorooster {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
}

.videobreed {
  margin: 0;
  flex: 1 1 min(560px, 100%);
  max-width: 720px;
}

.videobreed .videovak {
  aspect-ratio: 16 / 9;
}

.videostaand {
  flex: 1 1 min(360px, 100%);
  min-width: min(360px, 100%);
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.videostaand figure {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
}

.videostaand figure[data-staand='1'] {
  margin-top: 30px;
}

.videostaand figure[data-staand='2'] {
  margin-top: 14px;
}

.videostaand .videovak {
  aspect-ratio: 9 / 16;
}

.videovak {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--ink);
}

.videovak iframe,
.videovak video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}

/**
 * Werk in beeld onderaan een case. De loops staan onder de beelden en zijn
 * staand; zonder een grens zou één loop de halve kolom vullen, dus elk vak
 * blijft onder de 300 pixels en de rij vult zich van links.
 */
/* Twee beelden naast elkaar, nooit een op volle breedte: dat is zonde van de
   ruimte. De rechterkolom staat iets lager, zoals de mockups op de dienstpagina.
   Op een telefoon onder elkaar, zonder die verschuiving. */
.casewerk-rooster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px 24px;
}

@media (min-width: 768px) {
  .casewerk-rooster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .casewerk-vak:nth-child(2n) {
    padding-top: 56px;
  }
}

.casewerkinbeeld .videorooster {
  margin-top: 36px;
}

.casewerkinbeeld .videostaand {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.casewerkinbeeld .videostaand figure {
  flex: 0 1 300px;
  max-width: 300px;
}

/* Een liggende loop naast de staande: 16:9, en hij groeit tot de rechterrand
   van de inhoud, zodat de rij niet met een gat eindigt. Op één regel met twee
   staande van 300 pixels komt hij daarmee op ruim 500 pixels uit; zakt hij
   naar een eigen regel, dan vult hij die helemaal. */
.videostaand figure[data-liggend='1'] .videovak {
  aspect-ratio: 16 / 9;
}

.casewerkinbeeld .videostaand figure[data-liggend='1'] {
  flex: 1 1 400px;
  max-width: none;
}

/* Het vlak dat de muis opvangt bij een YouTube-terugval. Zie Divers.tsx. */
.videovak-dekje {
  position: absolute;
  inset: 0;
  display: block;
  background: transparent;
}

/* ---------------------------------------------------------------- artikel */

/**
 * Een artikel is in het ontwerp één sectie: de kop met de auteursregel, dan de
 * inhoudsopgave naast de tekst, en onderaan drie andere artikelen. De hero
 * tekent het geheel, dus de maten staan hier.
 */
.hero[data-template='artikel'] .hero-binnen {
  padding-bottom: 160px;
}

.hero[data-template='artikel'] .h1 {
  font-size: clamp(38px, 4.8vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

/* De introtekst van een artikel loopt over de volle 920 pixels van de kolom. */
.hero[data-template='artikel'] .hero-tekst .intro {
  margin-top: 28px;
  max-width: none;
}

/* De regel met de auteur, de datum en de leestijd. */
.artikelregel {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--lijn-deel);
}

.artikelregel-portret {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
}

.artikelregel-portret img {
  object-fit: cover;
  object-position: center 18%;
}

.artikelregel-tekst {
  font-size: 15px;
  color: var(--muted);
}

.artikelregel-tekst strong {
  font-weight: 600;
  color: var(--ink);
}

/* De inhoudsopgave naast de tekst, in de verhouding 1 op 2. */
.artikelraster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  /* Op een telefoon staat de inhoudsopgave boven de tekst; 96 pixels
     ertussen en 96 erboven was daar bijna een leeg scherm. */
  gap: 32px 88px;
  margin-top: 48px;
  align-items: start;
}

@media (min-width: 768px) {
  .artikelraster {
    gap: 64px 88px;
    margin-top: 96px;
  }
}

/* Onder 560 pixels past een inhoudsopgave van een derde niet meer naast de
   tekst; het ontwerp houdt de twee kolommen tot beneden aan toe vast. */
@media (max-width: 559px) {
  .artikelraster {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  .artikelinhoud {
    position: sticky;
    top: 140px;
  }
}

.artikelinhoud .eyebrow {
  margin-bottom: 18px;
}

/**
 * De inhoudsopgave: een compacte, genummerde lijst waarin elke regel een link
 * naar zijn sectie is (zie src/lib/anker.ts). Regels van 36 pixels met een
 * lijn ertussen, het nummer in grijs ervoor en een pijl erachter die bij hover
 * meekleurt. Eerder stond elke regel op 44 pixels met 12 ertussen: acht regels
 * waren dan 490 pixels hoog, en dat leest als een tweede artikel in plaats
 * van als iets om snel mee te navigeren.
 */
.artikelinhoud ol,
.bodyinhoud ol {
  list-style: none;
  margin: 0;
  padding: 6px 0 0;
  border-top: 1px solid var(--lijn-deel);
  counter-reset: inhoud;
}

.artikelinhoud li,
.bodyinhoud li {
  counter-increment: inhoud;
  border-bottom: 1px solid var(--lijn-deel);
}

.artikelinhoud a,
.bodyinhoud a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 0;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
}

.artikelinhoud a::before,
.bodyinhoud a::before {
  content: counter(inhoud, decimal-leading-zero);
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.artikelinhoud a::after,
.bodyinhoud a::after {
  content: '→';
  margin-left: auto;
  padding-left: 10px;
  color: var(--lijn-knop);
  transition:
    color 0.2s,
    transform 0.2s var(--vlot);
}

.artikelinhoud a:hover,
.artikelinhoud a:focus-visible,
.bodyinhoud a:hover,
.bodyinhoud a:focus-visible {
  color: var(--blauw);
}

.artikelinhoud a:hover::after,
.artikelinhoud a:focus-visible::after,
.bodyinhoud a:hover::after,
.bodyinhoud a:focus-visible::after {
  color: var(--blauw);
  transform: translateX(3px);
}

/**
 * Ruimte boven een sectie waar een anker naartoe springt, zodat de kop niet
 * onder de vaste kopbalk verdwijnt. Het zachte scrollen zelf doet Lenis, zie
 * src/componenten/Soepel.tsx; een css-regel scroll-behavior zou daar doorheen
 * lopen en staat hier dus met opzet niet.
 */
.bodysectie {
  scroll-margin-top: 104px;
}

@media (min-width: 1024px) {
  .bodysectie {
    scroll-margin-top: 132px;
  }
}

/* Onder de tekst staan drie andere artikelen, met een lijn erboven. */
.artikelverder {
  margin-top: 120px;
  padding-top: 56px;
  border-top: 1px solid var(--lijn-deel);
}

.artikelverder .eyebrow {
  margin-bottom: 30px;
}

/* ------------------------------------------------------------------ bodytekst */

/**
 * Lopende tekst in stukken met een tussenkop. In het ontwerp staat dit in de
 * rechterkolom van een sectie, met de kop en de inhoudsopgave links ernaast.
 * Het is dus een gewone stapel en geen twee kolommen.
 */
.bodysecties {
  max-width: 68ch;
}

.bodysectie {
  margin-bottom: 56px;
}

/* Een artikel gebruikt H2 en is een maat groter; een landingspagina H3, want
   daar staat de sectiekop er al boven. */
.bodysecties[data-niveau='2'] h2 {
  margin: 0 0 18px;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.16;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--ink);
}

.bodysecties[data-niveau='3'] h3 {
  margin: 0 0 16px;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.028em;
  font-weight: 500;
  color: var(--ink);
}

.bodysectie p {
  margin: 0 0 18px;
  font-size: 19px;
  line-height: 1.66;
  color: var(--muted);
  text-wrap: pretty;
}

.bodysectie p:last-child,
.bodysectie-tekst > :last-child {
  margin-bottom: 0;
}

/**
 * Op een artikelpagina staat de tekst een maat kleiner dan op een
 * landingspagina: 17 pixels in plaats van 19, en 16 op een telefoon. Een
 * kennisartikel van 1.800 woorden op 19 pixels was op een telefoon een heel
 * lange lap; kleiner leest sneller en er past meer op een scherm. De
 * landingspagina's houden hun eigen maat, daar staat maar een paar alinea's.
 */
.artikeltekst .bodysectie {
  margin-bottom: 44px;
}

.artikeltekst .bodysecties[data-niveau='2'] h2 {
  margin-bottom: 14px;
  font-size: clamp(22px, 2vw, 28px);
}

.artikeltekst .bodysectie p,
.artikeltekst .bodysectie-tekst ul,
.artikeltekst .bodysectie-tekst ol {
  font-size: 16px;
  line-height: 1.6;
}

.artikeltekst .bodysectie p {
  margin-bottom: 14px;
}

.artikeltekst .bodysectie-tekst blockquote p {
  font-size: 16px;
}

.artikeltekst .bodysectie-tekst h3,
.artikeltekst .bodysectie-tekst h4 {
  margin-top: 28px;
  font-size: clamp(18px, 1.4vw, 20px);
}

@media (min-width: 768px) {
  .artikeltekst .bodysectie p,
  .artikeltekst .bodysectie-tekst ul,
  .artikeltekst .bodysectie-tekst ol {
    font-size: 17px;
  }

  .artikeltekst .bodysectie-tekst blockquote p {
    font-size: 17px;
  }
}

/**
 * De opmaak die een sectie sinds september 2026 kan bevatten, zie
 * src/lib/opmaak.ts. Alles in de maat en kleur van de alinea, met de kopjes
 * een trap onder de sectiekop.
 */
.bodysectie-tekst h3,
.bodysectie-tekst h4 {
  margin: 36px 0 14px;
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink);
}

/**
 * Lijsten in dezelfde stijl als de rest van de site: een opsomming krijgt het
 * oranje vierkantje van de puntlijst, een genummerde lijst het nummer als
 * "01", "02" in de stijl van de werkwijze. Geen rondjes en geen gewone cijfers;
 * die stonden hier even en vielen meteen uit de toon.
 */
.bodysectie-tekst ul,
.bodysectie-tekst ol {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  font-size: 19px;
  line-height: 1.66;
  color: var(--muted);
}

.bodysectie-tekst ol {
  counter-reset: stap;
}

.bodysectie-tekst li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 24px;
}

.bodysectie-tekst ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 9px;
  height: 9px;
  background: var(--oranje);
}

.bodysectie-tekst ol li {
  counter-increment: stap;
  padding-left: 36px;
}

.bodysectie-tekst ol li::before {
  content: counter(stap, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.25em;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--blauw);
  font-variant-numeric: tabular-nums;
}

/**
 * Een bronvermelding is een voetnoot, geen alinea: een paar pixels kleiner dan
 * de tekst, met een kleinere kop. De sectie is herkenbaar aan het anker dat
 * uit de tussenkop komt: "Technische bronnen", "Bronnen", "Bronvermelding".
 */
.bodysectie[id*='bron'] h2,
.bodysectie[id*='bron'] h3 {
  font-size: 15px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 10px !important;
}

.bodysectie[id*='bron'] .bodysectie-tekst p,
.bodysectie[id*='bron'] .bodysectie-tekst ul,
.bodysectie[id*='bron'] .bodysectie-tekst ol {
  font-size: 13px !important;
  line-height: 1.55;
}

.bodysectie[id*='bron'] .bodysectie-tekst li {
  margin-bottom: 4px;
  padding-left: 18px;
}

.bodysectie[id*='bron'] .bodysectie-tekst ul li::before {
  width: 7px;
  height: 7px;
  top: 0.55em;
}

.bodysectie[id*='bron'] .bodysectie-tekst a {
  color: var(--muted);
  text-decoration-color: rgba(12, 13, 15, 0.2);
}

.bodysectie-tekst a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(12, 13, 15, 0.3);
}

.bodysectie-tekst a:hover {
  text-decoration-color: var(--ink);
}

.bodysectie-tekst strong {
  font-weight: 600;
  color: var(--ink);
}

/* Een citaat is de korte samenvatting bovenaan of een waarschuwing halverwege:
   een lichte kaart met een oranje streep, in de kleur van de tekst. */
.bodysectie-tekst blockquote {
  margin: 0 0 24px;
  padding: 20px 24px;
  border-left: 3px solid var(--oranje);
  background: var(--wit);
}

.bodysectie-tekst blockquote p {
  color: var(--ink);
  font-size: 18px;
}

/* Code is een voorbeeld of een formule, geen programma: dezelfde grijze kaart,
   met een monospace letter en horizontaal scrollen op een telefoon. */
/**
 * Op een telefoon loopt code om binnen het vak. Het zijn formules en
 * voorbeelden, geen programma's; een regel die halverwege omloopt leest daar
 * beter dan een vak waar de helft van de regel buiten valt. Op 375 pixels
 * viel bij alle codeblokken het einde van de regel weg, ook al kon je
 * scrollen: niemand ziet dat aan een wit vak. Vanaf 768 staan de regels weer
 * op één regel en scrolt het vak zelf als het moet.
 */
.bodysectie-tekst pre {
  margin: 0 0 24px;
  padding: 14px 16px;
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--wit);
  border: 1px solid var(--lijn-kaart);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
}

@media (min-width: 768px) {
  .bodysectie-tekst pre {
    padding: 18px 22px;
    white-space: pre;
    font-size: 15px;
  }
}

.bodysectie-tekst code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
}

.bodysectie-tekst p code,
.bodysectie-tekst li code {
  padding: 1px 6px;
  background: var(--wit);
  border: 1px solid var(--lijn-kaart);
  color: var(--ink);
}

/* Een tabel loopt op een telefoon buiten de kolom; dan scrollt hij binnen zijn
   eigen vak, nooit de pagina. */
.bodysectie-tekst table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 24px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.bodysectie-tekst th,
.bodysectie-tekst td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--lijn-deel);
}

@media (min-width: 768px) {
  .bodysectie-tekst th,
  .bodysectie-tekst td {
    padding: 12px 16px;
  }
}

.bodysectie-tekst th {
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}

@media (min-width: 768px) {
  .bodysectie-tekst table {
    display: table;
    width: 100%;
    font-size: 16px;
  }
}

/**
 * Op een landingspagina staat de kop met de inhoudsopgave links en de tekst
 * rechts, in de verhouding 1 op 2.
 */
.hero[data-template='seo'] ~ .sectie-bodysecties .binnen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 64px 88px;
  align-items: start;
}

@media (max-width: 559px) {
  .hero[data-template='seo'] ~ .sectie-bodysecties .binnen {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  .bodykop {
    position: sticky;
    top: 140px;
  }
}

.bodykop .h2 {
  max-width: 14ch;
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

/* De inhoudsopgave: alleen de tussenkoppen, in leesvolgorde. */
.bodyinhoud {
  margin-top: 34px;
}

/* De regels zelf staan bij .artikelinhoud: dezelfde compacte, genummerde
   lijst met links, op een artikel en op een regiopagina. */

/* --------------------------------------------------------------------- contact */

.contactregels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 32px;
  margin: 64px 0 0;
}

/* De lijn staat boven de regel en niet eronder, en de maten zijn vast: 20
   pixels voor het antwoord, 13 voor het kopje. Zo staat het in het ontwerp. */
.contactregel {
  display: flex;
  flex-direction: column;
  padding: 22px 0 0;
  border-top: 1px solid var(--lijn-deel);
}

.contactregel dt {
  margin-bottom: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.contactregel dd {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.018em;
  font-weight: 500;
  color: var(--ink);
}

/* Het adres staat op twee regels; daar hoort een regelhoogte bij. */
.contactregel dd.contactregel-adres {
  line-height: 1.3;
}

/* De regel onder een antwoord: de bereikbaarheid onder het adres, en de
   nummers onder Zakelijk. Met de dd erbij, want een regel op de tag is sterker
   dan een losse klasse. */
.contactregel dd.contactregel-klein {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--muted);
}

/* De nummers onder Zakelijk staan ruimer dan de regel onder het adres. Zo
   staat het in het ontwerp: daar heeft alleen dit vak een regelhoogte. */
.contactregel dd.contactregel-zakelijk {
  margin-top: 0;
  line-height: 1.6;
}

.contactregel dd a {
  text-decoration: none;
}

/* ── de rechterkolom: twee portretten met de kaart eronder */
.contactnaast {
  display: grid;
  gap: 20px;
  min-width: 0;
}

/**
 * Twee portretten naast elkaar, ook op een telefoon. Ze zijn dan smal, maar
 * onder elkaar duwen ze de kaart voorbij de onderkant van het scherm en dat is
 * niet het ontwerp.
 */
.contactpersonen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.contactpersoon {
  display: block;
  min-width: 0;
}

.contactpersoon-portret {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-2);
}

.contactpersoon-portret img {
  object-fit: cover;
  /* Op ooghoogte uitgesneden, niet op het midden. */
  object-position: center 18%;
}

.contactpersoon-naam {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.contactpersoon-rol {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.contactpersoon-zin {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.contactpersoon-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 15px;
}

.contactpersoon-links a {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.contactpersoon-links a.contactpersoon-zacht {
  color: var(--muted);
}

.contactpersoon-links a:hover,
.contactpersoon-links a.contactpersoon-zacht:hover {
  color: var(--blauw);
}

/* ── de kaart met de speld op de vestiging */
.kaartbeeld {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface);
  overflow: hidden;
  border: 1px solid var(--lijn-deel);
}

.kaartbeeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/**
 * De plek van de speld hoort bij het aangeleverde kaartbeeld en staat daarom
 * hier en niet als getal in het CMS. Wordt de kaart vervangen, dan moeten deze
 * twee percentages mee.
 */
.kaartspeld {
  position: absolute;
  left: 64.8%;
  top: 63.7%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.kaartspeld-stip {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--blauw);
  box-shadow: 0 0 0 8px rgba(27, 77, 255, 0.18);
}

.kaartspeld-label {
  white-space: nowrap;
  padding: 8px 12px;
  background: var(--wit);
  border: 1px solid rgba(12, 13, 15, 0.1);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(12, 13, 15, 0.1);
}

.kaartbeeld-label {
  position: absolute;
  left: 20px;
  bottom: 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------- een call plannen */

/**
 * De pagina waar iemand een call plant is in het ontwerp één sectie: links de
 * kop met de drie punten, rechts de agenda met het terugbelformulier eronder.
 * De route tekent het agendablok daarom binnen de hero.
 */
.hero[data-template='werken-met-ons'] .hero-raster {
  gap: 64px 88px;
  align-items: start;
}

.agendapunten {
  margin-top: 56px;
}

/* De punten staan hier iets krapper dan op een casepagina: 24 in plaats van 22
   pixels boven en onder, en het blokje twee pixels hoger. */
.agendapunten .puntlijst li {
  padding: 24px 0;
}

.agendapunten .puntlijst-punt {
  margin-top: 10px;
}

/* De regel met de drie portretten eronder. */
/**
 * De portretten met de regel ernaast. Op een telefoon staan ze erboven: naast
 * drie koppen van 44 pixels blijft er anders 200 pixels over voor twee regels
 * tekst, en dan breekt elke regel middenin een woord.
 */
.agendaregel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 32px;
}

@media (min-width: 768px) {
  .agendaregel {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
  }
}

.agendaregel-portretten {
  display: flex;
  flex: 0 0 auto;
}

.agendaregel-portretten img {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  object-position: center 18%;
  border: 2px solid var(--surface);
  background: var(--surface-2);
  display: block;
}

/* De portretten overlappen elkaar, zoals in het ontwerp. */
.agendaregel-portretten img + img {
  margin-left: -14px;
}

.agendaregel p {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
}

/* ── de agenda zelf */
.agendakaart {
  background: var(--wit);
  border: 1px solid var(--lijn-kaart);
}

/* Geen flex-wrap: de twee teksten krimpen naast elkaar en breken zelf af, zoals
   in het ontwerp. Met wrap zouden ze onder elkaar komen en de kaart hoger maken. */
/**
 * De kop van de agendakaart: het label en de regel met de details. Naast elkaar
 * vanaf 768 pixels; daaronder onder elkaar, want "30 minuten · Google Meet of
 * telefoon · direct in de agenda van Daan of Jos" naast een label van 120
 * pixels wordt een kolom van vier woorden hoog.
 */
.agendakaart-kop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px;
  border-bottom: 1px solid var(--lijn-kaart);
}

@media (min-width: 768px) {
  .agendakaart-kop {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 36px;
  }
}

.agendakaart-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.agendakaart-regel {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

/**
 * De Calendly-agenda. De hoogte is die van de agenda zelf; het ontwerp laat
 * hier een voorbeeldrooster van dagen en tijden zien met de regel "Calendly-
 * embed in de bouw" eronder, en dit is die embed.
 */
/**
 * De hoogte van de agenda beweegt mee met de inhoud, en deze maat is alleen de
 * terugval.
 *
 * Calendly meldt in de inline-weergave zijn eigen hoogte met een
 * `postMessage`, en die neemt ../../src/componenten/Agendaframe.tsx over. Per
 * stap scheelt dat flink: de maandkalender is 602 pixels, de stap waarin
 * iemand zijn gegevens invult 971, en komen er meer tijden bij dan groeit hij
 * mee. Vandaar dat het blok niet op één maat staat.
 *
 * Deze hoogte geldt zolang die melding er niet is: het script komt niet aan, of
 * er zit een blokkeerder tussen. Het is de hoogte van de maandkalender, dus de
 * eerste stap staat er meteen goed in en er is geen sprong te zien zodra de
 * meting binnenkomt. Ruimer maken lijkt veiliger maar is het niet: dan klapt
 * het blok bij elke lading zichtbaar in.
 *
 * Dat de latere stappen hoger zijn is opgevangen aan de andere kant: zolang er
 * geen meting is blijft de schuifbalk in het kader staan. Zonder JavaScript is
 * de knop "Afspraak plannen" dus te bereiken, en dat is de enige fout die hier
 * echt telt.
 *
 * De ondergrens van 320 pixels breedte komt uit de embedcode van Calendly zelf:
 * smaller kan hun kalender niet.
 */
/**
 * Het vak om de agenda. Volgt de hoogte die Calendly doorgeeft, zodat de kaart
 * eronder meebeweegt zonder sprong.
 */
.agendakaart-agendavak {
  display: block;
  position: relative;
  overflow: hidden;
  /* Zolang er geen gemeten hoogte is, de maat uit de stylesheet. */
  height: var(--agenda-hoogte, 780px);
  /* De overgang tussen twee stappen is een sprong in hoogte. Zonder deze regel
     klapt de kaart eronder er hard omheen. */
  transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/**
 * Nooit breder dan 600 pixels, en dat is de hele truc.
 *
 * Calendly tekent zijn kalender vanaf ongeveer 650 pixels breed in een eigen
 * kaart: een dunne rand met schaduw, 66 pixels van de bovenkant. Binnen ons
 * witte vlak is dat een kader in een kader. Eerder stond de agenda daarom zes
 * procent groter dan zijn vak en 18 pixels omhoog, zodat die rand net buiten
 * beeld viel. Dat werkte op 1440, maar op een scherm van 27 inch is de kolom
 * 1226 pixels breed en staat de kaart met ruime marges in het midden: dan is
 * er niets meer weg te knippen en zag je de rand boven en onder gewoon staan.
 *
 * Onder 600 pixels tekent Calendly geen kaart, in geen van de stappen. Dus
 * houden we de agenda daaronder en zetten we hem in het midden. De ondergrens
 * van 320 komt uit de embedcode van Calendly zelf.
 */
.agendakaart-agenda {
  display: block;
  width: 100%;
  max-width: 600px;
  min-width: 320px;
  margin: 0 auto;
  height: 780px;
  border: 0;
  transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  .agendakaart-agenda {
    height: 660px;
  }
}

@media (min-width: 1024px) {
  .agendakaart-agenda {
    height: 620px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agendakaart-agenda {
    transition: none;
  }
}

.agendakaart-formulier {
  padding: 28px 36px 36px;
  border-top: 1px solid var(--lijn-kaart);
}

.agendakaart-formulier .eyebrow {
  margin-bottom: 18px;
}

/* ── de reviews naast de vragenlijst */
.sectie-vragen-reviews .binnen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 56px 88px;
  align-items: start;
  padding-top: 64px;
  border-top: 1px solid var(--lijn-deel);
}

.sectie-vragen-reviews .sectiekop {
  margin-bottom: 22px;
}

/* Naast de reviews staat de lijst iets krapper: 24 en 26 in plaats van 26 en
   28 pixels. Zo staat het in het ontwerp op deze pagina. */
.sectie-vragen-reviews .vraag > summary {
  padding: 24px 0;
}

.sectie-vragen-reviews .vraag-antwoord {
  padding-bottom: 26px;
}

.reviewstapel {
  display: grid;
  gap: 24px;
}

.reviewvak {
  margin: 0;
  padding: 34px 34px 28px;
  background: var(--surface);
  border: 1px solid var(--lijn-kaart);
}

.op-licht .reviewvak {
  background: var(--wit);
}

.reviewvak blockquote {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  text-wrap: pretty;
}

.reviewvak figcaption {
  font-size: 15px;
  color: var(--muted);
}

.reviewvak figcaption strong {
  font-weight: 600;
  color: var(--ink);
}

/* ----------------------------------------------------------------- formulieren */

/**
 * Het formulier. De vorm komt uit het ontwerp: twee kolommen, velden van 54
 * pixels hoog op een lichte ondergrond, en de open vraag en de knop over de
 * volle breedte.
 *
 * Het label boven een veld staat er wel, terwijl het ontwerp alleen een
 * placeholder toont. Een placeholder verdwijnt zodra iemand begint te typen en
 * is daarmee geen label; dat is een afspraak uit de gedeelde laag en geen
 * ontwerpkeuze. Zie CONVENTIES.md.
 */
.formulier {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 560px) {
  .formulier {
    grid-template-columns: 1fr 1fr;
  }
}

/* De melding, de open vraag en de knop lopen over beide kolommen. */
.formulier > .melding,
.formulier > button,
.formulier .veld:has(textarea),
.formulier .veld:has(select) {
  grid-column: 1 / -1;
}

.formulier .veld {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.formulier label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.formulier .verplicht {
  color: var(--oranje);
}

.formulier input,
.formulier textarea,
.formulier select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 54px;
  padding: 0 18px;
  border: 1px solid var(--lijn-knop);
  background: var(--surface);
  /* 16 pixels vanaf hier, want onder die maat zoomt iOS in bij focus. */
  font-size: 16px;
  color: var(--ink);
  outline: none;
}

.op-licht .formulier input,
.op-licht .formulier textarea,
.op-licht .formulier select,
.agendakaart .formulier input,
.agendakaart .formulier textarea,
.agendakaart .formulier select {
  background: var(--surface);
}

.formulier textarea {
  height: auto;
  min-height: 96px;
  padding: 16px 18px;
  resize: vertical;
}

.formulier input:focus,
.formulier textarea:focus,
.formulier select:focus {
  border-color: var(--ink);
}

/**
 * De verstuurknop is de gewone knop van de site. Alleen de hoogte wijkt af: 56
 * pixels in plaats van 54, want zo staat hij in het ontwerp onder een
 * formulier.
 *
 * **Hier stond een `::after` met een pijl erin**, als vervanging voor het vak
 * rechts op de knop. Dat werkte zolang de knop geen echt vak had. Sinds hij dat
 * wel heeft stonden er twee, en erger: de glans die bij hover over elke knop
 * gaat hangt óók aan `::after`. Bij deze knop was dat dus de pijl, en die vloog
 * bij hover door de knop heen. Vandaar dat het vak nu uit de component komt en
 * hier niets meer wordt getekend.
 */
.formulier button[type='submit'] {
  min-height: 56px;
  justify-content: space-between;
}

.formulier button[type='submit']:disabled {
  cursor: progress;
  opacity: 0.7;
}

.formulier .melding {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

.formulier .melding:empty {
  display: none;
}

.formulier .melding.fout {
  color: var(--oranje);
}

/* Een datumveld is op iOS breder dan op de desktop, want Safari tekent er zijn
   eigen bediening in. Zonder appearance:none loopt het buiten het scherm. */
@media (max-width: 767px) {
  .formulier input[type='date'],
  .formulier input[type='datetime-local'] {
    appearance: none;
    -webkit-appearance: none;
  }
}

.formulier-bedankt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.08);
  font-size: 17px;
}

.formulier-fout {
  margin: 0;
  font-size: 15px;
  color: #b42318;
}

/* --------------------------------------------------------------------- filter */

/**
 * De filterbalk boven de cases: knoppen van 44 pixels hoog met de telling
 * rechts. Hij hangt onder de hero, met een lijn erboven; de maten komen uit
 * het ontwerp.
 */
.filterbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--lijn-deel);
}

.filterbalk-telling {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

/* -------------------------------------------------------------------- kruimels */

.kruimels {
  padding-top: 96px;
  background: var(--surface);
  font-size: 13px;
  color: var(--muted);
}

.kruimels .binnen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.kruimels a {
  color: var(--muted);
  text-decoration: none;
}

.kruimels a:hover {
  color: var(--ink);
}

.kruimels a::after {
  content: '/';
  margin-left: 8px;
  color: var(--lijn-knop);
}

/* ----------------------------------------------------------------------- voet */

/**
 * De voet is licht, niet donker: achtergrond #EAECF0 met grijze tekst. Zo staat
 * het in het ontwerp. Hij stond hier eerst in het donker, en dat is precies het
 * soort verschil dat je op een screenshot meteen ziet.
 *
 * Vijf kolommen: het merk met de tagline, dan Markten, Services, Klubb en
 * Contact. Alle maten komen uit het ontwerp en gelden op elke breedte; het
 * omlopen doet auto-fit.
 */
.voet {
  background: var(--surface-2);
}

.voet > .binnen {
  padding-top: 88px;
  padding-bottom: 48px;
}

.voet-kolommen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 56px;
  padding-bottom: 80px;
}

.voet-merk {
  min-width: 0;
}

.voet-merk img {
  display: block;
  margin-bottom: 26px;
}

.voet-tagline {
  margin: 0;
  max-width: 26ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.voet-kolom {
  min-width: 0;
}

.voet-kolom h2 {
  margin: 0 0 26px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.voet-kolom ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/**
 * De kolom met de gegevens staat op 15 pixels, de kolommen met links niet: daar
 * staat de maat op de link zelf. Dat lijkt een detail, maar het scheelt twee
 * pixels per regel in de hoogte van de rij, en dat loopt op.
 */
.voet-kolom-contact ul {
  font-size: 15px;
  color: var(--muted);
}

.voet-kolom a {
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.18s;
}

.voet-kolom a:hover {
  color: var(--ink);
}

/* Telefoon en e-mail staan in de tekstkleur, de rest in grijs. */
.voet-kolom a.voet-nadruk {
  color: var(--ink);
}

.voet-kolom a.voet-nadruk:hover {
  color: var(--muted);
}

.voet-regio {
  border-top: 1px solid rgba(12, 13, 15, 0.09);
}

.voet-regio > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.voet-regio > summary::-webkit-details-marker {
  display: none;
}

.voet-regio-kop {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
}

.voet-regio-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.voet-regio-sub {
  font-size: 13px;
  color: var(--muted);
}

.voet-regio-teken {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--lijn-knop);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--ink);
  transition:
    background 0.3s,
    color 0.3s,
    border-color 0.3s;
}

.voet-regio[open] .voet-regio-teken::after {
  content: '−';
}

.voet-regio[open] .voet-regio-teken {
  font-size: 0;
}

.voet-regio[open] .voet-regio-teken::after {
  font-size: 18px;
}

.voet-regio-groepen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 28px 32px;
  padding: 8px 0 44px;
}

.voet-regio-groep {
  min-width: 0;
}

.voet-regio-groep p {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.voet-regio-groep ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.voet-regio-groep a {
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.18s;
}

.voet-regio-groep a:hover {
  color: var(--ink);
}

.voet-onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 36px;
  border-top: 1px solid rgba(12, 13, 15, 0.09);
}

.voet-onder-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.voet-onder-links a {
  color: var(--muted);
  text-decoration: none;
}

.voet-onder-links a:hover {
  color: var(--ink);
}

.voet-socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
}

.voet-socials a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 13, 15, 0.06);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s;
}

.voet-socials a:hover {
  background: rgba(12, 13, 15, 0.16);
}

/* ------------------------------------------------------------------- 404 en co */

.leeg {
  padding-top: 208px;
  padding-bottom: var(--sectie);
  text-align: left;
}

/* ------------------------------------------------- lagen van het systeem */

/**
 * De vier lagen op een marktpagina: een oranje vierkantje, dan de kop vet en de
 * zin erachter in grijs, in één doorlopende regel. Dat is anders dan de
 * deliverables van een dienst, waar kop en zin onder elkaar staan.
 */
.featurelijst {
  border-top: 1px solid var(--lijn-deel);
}

.featurerij {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 20px;
  padding: 34px 0;
  border-bottom: 1px solid var(--lijn-deel);
}

.featurerij::before {
  content: '';
  width: 9px;
  height: 9px;
  margin-top: 12px;
  background: var(--oranje);
}

.featurerij p {
  margin: 0;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.024em;
  color: var(--muted);
  text-wrap: pretty;
}

.featurerij strong {
  font-weight: 500;
  color: var(--ink);
}

.op-donker .featurelijst,
.op-donker .featurerij {
  border-color: var(--op-donker-lijn);
}

.op-donker .featurerij p {
  color: var(--op-donker-body);
}

.op-donker .featurerij strong {
  color: var(--wit);
}

/* --------------------------------------------------------- match / geen match */

.matchkaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  margin-top: 20px;
}

.matchkaart {
  padding: 40px 36px;
  background: var(--wit);
  border: 1px solid var(--lijn-kaart);
}

.matchkaart > p {
  margin: 0 0 26px;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.matchkaart[data-geen='1'] > p {
  color: var(--muted);
}

.matchkaart ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.matchkaart li {
  display: flex;
  gap: 14px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}

/* Het vinkje en het streepje staan als tekst in de opmaak en niet als
   ::before: zo staat het in het ontwerp, en een schermlezer hoort het niet
   (aria-hidden). */
.matchkaart-teken {
  flex: 0 0 auto;
  color: var(--groen);
}

.matchkaart[data-geen='1'] li {
  color: var(--muted);
}

.matchkaart[data-geen='1'] .matchkaart-teken {
  color: inherit;
}

/* --------------------------------------------- logo's op een donkere sectie */

/**
 * Op zwart moeten de logo's omgekeerd: ze zijn allemaal in donkere inkt
 * aangeleverd. `invert` maakt er wit van, en de extra helderheid haalt het grijs
 * eruit dat je anders bij een zwart-wit logo overhoudt.
 */
.op-donker .logorail img,
.hero-donker .logorail img {
  opacity: 0.7;
  filter: invert(1) brightness(1.4);
}

.op-donker .trust-lijn::before,
.op-donker .trust-lijn::after,
.hero-donker .trust-lijn::before,
.hero-donker .trust-lijn::after {
  background: rgba(255, 255, 255, 0.14);
}

.op-donker .trust-tekst,
.hero-donker .trust-tekst {
  color: var(--op-donker-muted);
}

.op-donker .trust-sterk,
.hero-donker .trust-sterk {
  color: var(--wit);
}

/* --------------------------------------------------------- case-detailpagina */

/* De laatste stap van een kruimelpad is de pagina zelf: geen link, en donker. */
.kruimelkop-hier {
  color: var(--ink);
}

/**
 * De strook met vier gegevens onder de kop: klant, markt, services, sinds.
 *
 * Vijf kolommen die met auto-fit inklappen, waarvan Services er twee beslaat.
 * De lege sporen die auto-fit overhoudt worden nul breed, dus met vier gevulde
 * cellen staat er precies wat het ontwerp toont.
 */
.casemeta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 20px 16px;
  margin: 40px 0 0;
  padding: 24px 0;
  border-top: 1px solid var(--lijn-strook);
  border-bottom: 1px solid var(--lijn-strook);
}

.casemeta-breed {
  grid-column: span 2;
}

.casemeta dt {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.casemeta dd {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}

/**
 * Het hoofdbeeld, met de mockup rechtsonder half erover.
 *
 * **Onder 768 pixels staan ze onder elkaar.** De mockup is minimaal 280 pixels
 * breed, en in een beeld van 335 bij 160 bedekte hij de foto vrijwel helemaal:
 * je zag een laptop met een reepje foto ernaast. Op een telefoon krijgt elk
 * zijn eigen vak, de foto op 16 bij 10 en de mockup eronder. Vanaf 768 de
 * overlap uit het ontwerp.
 */
.casebeeld {
  display: grid;
  gap: 12px;
  /* Gepositioneerd, zodat een gevuld beeld erin nooit uitwijkt naar de sectie. */
  position: relative;
  margin-top: 40px;
}

.casebeeld-hoofd {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2);
}

.casebeeld-hoofd img,
.casebeeld-mockup {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--wit);
  outline: 1px solid rgba(12, 13, 15, 0.1);
}

@media (min-width: 768px) {
  .casebeeld {
    display: block;
    position: relative;
    margin-top: 64px;
    overflow: hidden;
  }

  .casebeeld-hoofd {
    aspect-ratio: 21 / 10;
  }

  /**
   * De mockup steekt één pixel onder het beeld uit. Dat is geen slordigheid
   * maar staat zo in het ontwerp: zo valt de onderrand van het vlak samen met
   * de onderrand van het beeld en blijft er geen haarlijn tussen staan.
   */
  .casebeeld-mockup {
    position: absolute;
    right: 56px;
    bottom: -1px;
    width: 38%;
    min-width: 280px;
    box-shadow: 0 34px 74px rgba(12, 13, 15, 0.22);
  }
}

.casebeeld-mockup img {
  object-fit: cover;
}

/**
 * Het verhaal loopt in blokken van 120 pixels afstand. Het eerste tweeluik
 * heeft 104 eronder, want daaronder staat de cijferstrook en die begint met een
 * lijn in plaats van met tekst.
 */
.sectie-case-verhaal .tweeluik {
  gap: 40px;
  align-items: start;
}

/**
 * Op een telefoon staan de blokken op 72 pixels in plaats van 120. Alles
 * staat daar in één kolom onder elkaar, en met 120 pixels tussen elk blok was
 * een casepagina meer wit dan tekst: de verhaalsectie werd 6.200 pixels hoog.
 */
.sectie-case-verhaal > .binnen > .tweeluik:first-child {
  margin-bottom: 64px;
}

.case-stap {
  margin-top: 72px;
}

@media (min-width: 768px) {
  .sectie-case-verhaal .tweeluik {
    gap: 56px 88px;
  }

  .sectie-case-verhaal > .binnen > .tweeluik:first-child {
    margin-bottom: 104px;
  }

  .case-stap {
    margin-top: 120px;
  }
}

/* De grote alinea naast een label: het uitgangspunt en de samenwerking. */
.groot {
  margin: 0;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.36;
  letter-spacing: -0.024em;
  font-weight: 400;
  color: var(--ink);
  text-wrap: pretty;
}

/* ── wat we deden: kaarten van kop en één alinea */
.casewerk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
}

.casewerk-kaart {
  padding: 24px 20px;
  background: var(--wit);
  border: 1px solid var(--lijn-kaart);
}

@media (min-width: 768px) {
  .casewerk-kaart {
    padding: 36px 32px;
  }
}

.casewerk-kop {
  margin: 0 0 14px;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.024em;
  font-weight: 500;
  color: var(--ink);
}

.casewerk-tekst {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* ── het donkere resultaatblok */
.caseresultaat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 40px;
  align-items: start;
  padding: 40px var(--marge);
}

@media (min-width: 768px) {
  .caseresultaat {
    gap: 56px 88px;
    padding: 64px var(--marge);
  }
}

.caseresultaat-tekst {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.16;
  letter-spacing: -0.035em;
  font-weight: 500;
  text-wrap: pretty;
}

/* Het label boven de tools staat 16 pixels boven de rij, niet 22. */
.caseresultaat-tools .eyebrow {
  margin-bottom: 16px;
}

/* ── het citaat, gecentreerd onder het verhaal */
.caseciteer {
  margin: 72px auto 0;
  max-width: 980px;
  text-align: center;
}

@media (min-width: 768px) {
  .caseciteer {
    margin-top: 120px;
  }
}

.caseciteer-teken {
  display: block;
  margin-bottom: 20px;
  font-size: 64px;
  line-height: 0.5;
  color: rgba(12, 13, 15, 0.2);
}

.caseciteer p {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.28;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}

.caseciteer footer {
  margin-top: 32px;
  font-size: 15px;
  color: var(--muted);
}

.caseciteer footer strong {
  font-weight: 600;
  color: var(--ink);
}

/* ── de contactkaart met daaronder drie andere cases */
.caseslot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 24px;
  align-items: start;
}

.caseslot-meer {
  grid-column: 1 / -1;
  margin-top: 24px;
}

/* -------------------------------------------------------- vacaturedetail */

/**
 * De vacaturepagina is in het ontwerp één sectie met twee kolommen: links de
 * kop, de gegevens en de sollicitatieknop, rechts de drie lijsten en de rij
 * portretten. De linkerkolom blijft staan terwijl je de lijsten leest.
 */
.hero[data-template='vacature'] .hero-raster {
  gap: 64px 88px;
  align-items: start;
}

@media (min-width: 1024px) {
  .hero[data-template='vacature'] .hero-tekst {
    position: sticky;
    top: 140px;
  }
}

.hero[data-template='vacature'] .hero-tekst .knoppen {
  margin-top: 40px;
}

/* De drie gegevens in een vaste rij van drie: salaris, uren, plek. Ze zijn kort
   en horen naast elkaar te blijven staan. */
.vacaturemeta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 40px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--lijn-deel);
}

.vacaturemeta dt {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.vacaturemeta dd {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}

/* Een open vacature staat in het groen in het kruimelpad. */
.kruimelkop-open {
  color: var(--groen);
}

.vacature-lijst {
  margin-bottom: 56px;
}

/* De lopende tekst op een vacaturepagina: de inleiding boven een lijst, het
   stuk over werken bij Klubb en de afsluiting. Elke regel in het veld is een
   alinea, dezelfde maat als de lijsten ernaast. */
.vacature-alineas {
  margin: 0;
}

.vacature-alineas p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.vacature-alineas p:last-child {
  margin-bottom: 0;
}

/* Tussen de inleiding en de lijst eronder. */
.vacature-lijst .vacature-alineas {
  margin-bottom: 20px;
}

/* De afsluiting herhaalt de sollicitatieknop: op een telefoon staat die in de
   linkerkolom een heel scherm hoger, en na het lezen wil je niet terugscrollen. */
.vacature-slot .knoppen {
  margin-top: 24px;
}

/* Een tweede alinea in de introtekst van een vacature. De hero tekent er één;
   de rest komt als vervolg eronder, met minder ruimte dan onder de kop. */
.hero[data-template='vacature'] .intro-vervolg {
  margin-top: 16px;
}

/* ── de smalle rij portretten onderaan een vacaturepagina */
.portretrail {
  margin-top: 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.portretrail .rail-spoor {
  align-items: flex-start;
}

.portretrail-lid {
  flex: 0 0 auto;
  display: block;
  width: 120px;
  margin-right: 16px;
}

.portretrail-portret {
  display: block;
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface-2);
}

.portretrail-portret img {
  object-fit: cover;
  object-position: center 18%;
}

.portretrail-naam {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.portretrail-rol {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

/* De filterbalk werkt met knoppen en niet met links, omdat het filter in de
   clientcomponent zit en niet in de URL. Zie componenten/CasesFilter.tsx. */
.filterbalk button {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  background: none;
  border: 1px solid var(--lijn-knop);
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}

.filterbalk button:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* De ingedrukte knop. `aria-pressed` en niet `aria-current`: het is een
   schakelaar in de pagina en geen verwijzing naar waar je bent. */
.filterbalk button[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--wit);
}

/* ============================================================================
 * De maximale breedte van elke kop, per paginasoort en per sectie.
 *
 * In het ontwerp staat op elke kop een eigen `max-width` in ch: die bepaalt
 * waar de regel afbreekt, en dus hoe hoog de kop wordt en waar alles eronder
 * begint. Zonder deze tabel loopt elke kop over de volle breedte en verschuift
 * de hele pagina. De waarden zijn overgenomen uit ontwerp/prototype.dc.html.
 *
 * Dezelfde sectie kan per paginasoort een andere grens hebben: de teamkop is
 * 26ch op de startpagina en 20ch op /about. Daarom hangt de regel aan
 * data-template van de hero, die vóór alle secties staat.
 * ========================================================================= */

.sectie-groeimodellen .h2,
.sectie-cases .h2 {
  max-width: 24ch;
}

.sectie-diensten .h2 {
  max-width: 20ch;
}

.sectie-manifest .h2 {
  max-width: none;
}

.sectie-werkwijze .h2,
.sectie-reviews .h2,
.sectie-artikelen .h2 {
  max-width: 22ch;
}

.sectie-team .h2 {
  max-width: 26ch;
}

.sectie-vragen .h2 {
  max-width: 14ch;
}

/* Op /about staan drie koppen krapper dan op de startpagina. */
.hero[data-template='about'] ~ .sectie-team .h2 {
  max-width: 20ch;
}

.hero[data-template='about'] ~ .sectie-werkwijze .h2 {
  max-width: 16ch;
}

/* Op een marktpagina: de cases 22ch, de vier lagen 16ch, de afspraken 18ch. */
.hero[data-template='markt'] ~ .sectie-systeem .h2 {
  max-width: 16ch;
}

.hero[data-template='markt'] ~ .sectie-transparantie .h2 {
  max-width: 18ch;
}

.hero[data-template='markt'] ~ .sectie-cases .h2 {
  max-width: 22ch;
}

/* Op een dienst- of overzichtspagina staan de cases op 20ch. */
.hero[data-template='dienst'] ~ .sectie-cases .h2,
.hero[data-template='diensten-overzicht'] ~ .sectie-cases .h2,
.hero[data-template='lokaal'] ~ .sectie-cases .h2,
.hero[data-template='seo'] ~ .sectie-cases .h2 {
  max-width: 20ch;
}

/* De kop naast het beeld op /about breekt op 18 tekens. */
.sectie-tekstmetbeeld .h2 {
  max-width: 18ch;
}

/* De koppen van een lokale pagina. */
.hero[data-template='lokaal'] ~ .sectie-diensten .h2 {
  max-width: 22ch;
}

.hero[data-template='seo'] ~ .sectie-werkwijze .h2 {
  max-width: 16ch;
}

/* De specialist blijft staan zolang de vragenlijst ernaast in beeld is. */
.sectie-dienst-slot .tweeluik {
  align-items: start;
}

@media (min-width: 1024px) {
  .sectie-dienst-slot .tweeluik > :first-child {
    position: sticky;
    top: 140px;
  }
}

/**
 * Op een lokale landingspagina staat de kop van de werkwijze links en de lijst
 * rechts, met de kop die blijft staan zolang de lijst in beeld is.
 */
.hero[data-template='seo'] ~ .sectie-werkwijze .binnen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 56px 88px;
  align-items: start;
}

.hero[data-template='seo'] ~ .sectie-werkwijze .sectiekop {
  display: block;
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .hero[data-template='seo'] ~ .sectie-werkwijze .sectiekop {
    position: sticky;
    top: 140px;
  }
}

/* De regel onder de kop staat 26 pixels eronder en is 44 tekens breed. */
.hero[data-template='seo'] ~ .sectie-werkwijze .sectiekop-tekst {
  margin-top: 26px;
  max-width: 44ch;
}


/* ---------------------------------------------------------------- de koppen h1 */

.hero[data-template='markt'] .h1,
.hero[data-template='dienst'] .h1,
.hero[data-template='lokaal'] .h1,
.hero[data-template='seo'] .h1 {
  max-width: 14ch;
}

.hero[data-template='werken-met-ons'] .h1,
.hero[data-template='contact'] .h1 {
  max-width: 12ch;
}

.hero[data-template='rekenmodel'] .h1 {
  max-width: 26ch;
}

.hero[data-template='case'] .h1 {
  font-size: clamp(40px, 5.4vw, 84px);
  line-height: 0.98;
}

.hero[data-template='artikel'] .h1 {
  font-size: clamp(38px, 4.8vw, 72px);
  line-height: 1.02;
}

/* ── de teamrij loopt van rand tot rand, zoals de reviewrails. Zelfde reden om
   hier geen vw te gebruiken; zie de toelichting bij .reviewrails. */
.teamrail {
  width: calc(100% + 2 * var(--marge));
  margin-left: calc(-1 * var(--marge));
}

/* De maskering verschilt per rij: de logo's vervagen op 7 procent, de reviews
   en de portretten op 4. Zo staat het in het ontwerp. */
.reviewrails .rail,
.teamrail {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

/* ── de knop in het donkere resultaatpaneel is wit met donkere tekst */
.bc-uitkomst .knoppen {
  margin-top: 36px;
  gap: 12px;
}

.bc-uitkomst .knop-nadruk {
  background: var(--wit);
  color: var(--ink);
}

.bc-uitkomst .knop-nadruk .knop-cel {
  border-left-color: var(--lijn-knop);
}

.bc-uitkomst .knop-nadruk:hover {
  background: var(--surface-2);
  color: var(--ink);
}

/* ── de kop van de rekenmodule is kleiner dan een gewone sectiekop */
.bc-kop,
.sectie-businesscase .h2,
.sectie-magneet .h2 {
  max-width: none;
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

/* ── knoppen op een donkere sectie: omgekeerd, zoals in het ontwerp */
.op-donker .knop-nadruk,
.hero-donker .knop-nadruk {
  background: var(--wit);
  color: var(--ink);
}

.op-donker .knop-nadruk .knop-cel,
.hero-donker .knop-nadruk .knop-cel {
  border-left-color: rgba(12, 13, 15, 0.22);
}

.op-donker .knop-nadruk:hover,
.hero-donker .knop-nadruk:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.op-donker .knop-lijn,
.hero-donker .knop-lijn {
  border: 1px solid var(--lijn-op-donker);
  color: var(--wit);
}

.op-donker .knop-lijn .knop-cel,
.hero-donker .knop-lijn .knop-cel {
  border-left-color: var(--lijn-op-donker);
}

.op-donker .knop-lijn:hover,
.hero-donker .knop-lijn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--wit);
  color: var(--wit);
}

/* Kaarten in dezelfde rij zijn even hoog: het spoor rekt ze uit in plaats van
   ze te centreren. Zo staat het in het ontwerp. De logorij centreert wél. */
.reviewrails .rail-spoor,
.teamrail .rail-spoor {
  align-items: stretch;
}

/* ============================================================================
 * Aanraakvlakken zonder de opmaak te verschuiven.
 *
 * De gedeelde afspraak is 44 bij 44 pixels voor alles wat je aantikt. Het
 * aangeleverde ontwerp heeft op een paar plekken kleinere tekstlinks: de Bel-
 * en Mail-link onder een teamportret zijn 16 pixels hoog, een menu-item 35.
 * Een min-height erop zetten maakt ze even hoog als het tikdoel, maar
 * verschuift dan alles eronder — en dat is precies het verschil met het
 * ontwerp dat we niet willen.
 *
 * Daarom een onzichtbaar vlak eroverheen: het element blijft even groot, het
 * gebied waarop je tikt wordt 44 pixels hoog. Beide afspraken blijven staan.
 * ========================================================================= */
/* .teamkaart-acties a stond hier, voor de Bel- en Mail-links onder een portret.
   Die zijn op 15 september 2026 weggehaald; wat er nog staat is de pijllink op
   de kaart "Jij hier?", en die heeft .pijllink hieronder al. */
.kop-logo,
.kop-nav a,
.kop-nav button,
.bc-tabs button,
.pijllink,
.kruimelkop a,
.specialist-links a,
.contactpersoon-links a,
.contactregel dd a,
.voet-kolom a,
.voet-onder-links a,
.voet-regio-groep a {
  position: relative;
  /* De gedeelde laag zet hier een min-height van 44 op; die zou de opmaak
     verschuiven. Het tikvlak komt uit ::after hieronder. */
  min-height: 0;
}

.kop-logo::after,
.kop-nav a::after,
.bc-tabs button::after,
.pijllink::after,
.kruimelkop a::after,
.specialist-links a::after,
.contactpersoon-links a::after,
.contactregel dd a::after,
.voet-kolom a::after,
.voet-onder-links a::after,
.voet-regio-groep a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
  min-width: 44px;
}

/**
 * De rijkaart: het beeld links, de klantnaam en het resultaat ernaast. Drie
 * naast elkaar onderaan een casepagina, waar geen ruimte is voor een beeld van
 * volle breedte met een voetregel eronder.
 */
.casekaart-rij {
  flex-direction: row;
  align-items: center;
  gap: 24px;
  padding: 20px;
}

.casekaart-rij .casekaart-beeld {
  flex: 0 0 auto;
  width: 128px;
}

.casekaart-rij .casekaart-body {
  display: block;
  padding: 0;
}

.casekaart-rij .casekaart-meta {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.casekaart-rij .casekaart-titel {
  margin-top: 6px;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/**
 * Onder 768 pixels is de rijkaart geen rij meer.
 *
 * Het beeld is 128 pixels breed en de kolom is er 263. Na de marges blijft er
 * 71 pixels over voor de kop, en het langste woord van "Nieuw
 * e-commerceplatform, +38% conversie" is er 163. Een flexitem krimpt niet
 * onder zijn min-content, dus de kop liep 73 pixels buiten de kaart, waar
 * `overflow-x: clip` op html hem afkapte. Geen schuifbalk, wel weggevallen
 * tekst — precies het soort fout dat je niet ziet in de meting van de
 * paginabreedte.
 *
 * Onder elkaar heeft de kop de volle breedte en ziet de kaart eruit als de
 * gewone casekaart. Het ontwerp zegt hier niets over; dat is onder 1024 pixels
 * niet gemaakt.
 */
@media (max-width: 767px) {
  .casekaart-rij {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }

  .casekaart-rij .casekaart-beeld {
    width: auto;
  }

  .casekaart-rij .casekaart-body {
    padding: 20px;
  }
}

/* ── de casekaart op een lokale pagina: alleen de markt, en een kleinere kop */
.casekaart-lokaal .casekaart-titel {
  font-size: 24px;
  line-height: 1.16;
}

/**
 * De strook portretten onderaan een lokale pagina. Zes gezichten, met de
 * voornaam en de rol eronder en niets meer.
 */
.teamstrook {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 20px;
  margin-top: 96px;
  padding-top: 56px;
  border-top: 1px solid var(--lijn-deel);
}

.teamstrook-lid {
  display: block;
  min-width: 0;
}

.teamstrook-portret {
  display: block;
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface-2);
}

.teamstrook-portret img {
  object-fit: cover;
  /* Op ooghoogte uitgesneden, niet op het midden. */
  object-position: center 18%;
}

.teamstrook-naam {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.teamstrook-rol {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

/* ── de grote casekaart, twee naast elkaar op een marktpagina */
.casekaart-groot .casekaart-beeld {
  aspect-ratio: 16 / 10;
}

.casekaart-groot .casekaart-body {
  padding: 34px 34px 30px;
}

.casekaart-groot .casekaart-titel {
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

/* ── de tegels met de afspraken */
.tegel-waarde {
  margin: 0;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 500;
  color: var(--ink);
}

.tegel-uitleg {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--muted);
}

/* ── de performance stack onder de reviews op een marktpagina */
.woordenrij {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.woordenrij .eyebrow {
  margin: 0;
}

.toolsrij {
  padding-top: 34px;
  border-top: 1px solid var(--lijn-deel);
}

/* Staat de stack eronder, dan houdt de rail 80 pixels onderruimte in plaats van
   160: de rest komt van de rij met de stack. Zo staat het in het ontwerp. */
.sectie-reviews:has(.toolsrij) .reviewrails {
  padding-bottom: 80px;
}

.sectie-reviews:has(.toolsrij) {
  padding-bottom: 160px;
}

/* ============================================================================
 * De zes diensten als kaarten, op /services.
 *
 * Op de startpagina staan ze als rijen onder elkaar (zie .dienstenlijst); hier
 * als kaarten met beeld, met achteraan een donkere tegel over waar Klubb zich
 * op richt. Alle maten komen uit het ontwerp.
 * ========================================================================= */
.dienstkaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 24px;
}

.dienstkaart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  background: var(--wit);
  border: 1px solid var(--lijn-kaart);
}

.dienstkaart-beeld {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-2);
}

.dienstkaart-beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Het vak is 16:9, twee van de zes foto's zijn staand (Google Ads en
     Content). Gecentreerd viel het gezicht van Daan er aan de bovenkant af;
     Daan zag dat op 16 september 2026. Op een kwart van boven staan beide
     gezichten met ruimte erboven, en de liggende foto's verschuiven amper
     omdat daar toch bijna de hele hoogte in beeld is. Geen 18% zoals bij de
     portretten elders: dan zit de laptop van Daan er niet meer op. */
  object-position: center 25%;
  transition: transform 0.9s var(--vlot);
}

.dienstkaart:hover .dienstkaart-beeld img {
  transform: scale(1.05);
}

.dienstkaart-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 34px 34px 30px;
}

.dienstkaart-num {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--oranje);
}

.dienstkaart-titel {
  display: block;
  margin-top: 14px;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 500;
  color: var(--ink);
}

.dienstkaart-kern {
  display: block;
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

.dienstkaart-body .tags {
  margin-top: 22px;
}

.dienstkaart-voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 30px;
}

.dienstfocus {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  padding: 34px;
  background: var(--ink);
  color: var(--wit);
}

.dienstfocus .eyebrow {
  margin: 0 0 18px;
  color: var(--op-donker-muted);
}

.dienstfocus-tekst {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.16;
  letter-spacing: -0.03em;
  font-weight: 500;
  text-wrap: pretty;
}

.dienstfocus-tekst .zacht {
  color: var(--op-donker-muted);
}

/* ── de compacte casekaart, onderaan /services en op een dienstpagina */
.rooster-smal {
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

.casekaart-compact {
  background: var(--surface);
  border-color: var(--lijn-kaart);
}

.op-licht .casekaart-compact {
  background: var(--wit);
}

.casekaart-compact .casekaart-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 28px 30px;
}

.casekaart-compact .casekaart-meta {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.casekaart-compact .casekaart-titel {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.024em;
}

.casekaart-link {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* ── het kruimelpad in de hero van een dienstpagina: Services / 01 */
.kruimelkop {
  display: flex;
  align-items: center;
  gap: 14px;
}

.kruimelkop a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.18s;
}

.kruimelkop a:hover {
  color: var(--ink);
}

.kruimelkop-num {
  color: var(--oranje);
}

/* De vette zin onder de kop in de hero van een dienstpagina. */
.hero-kern {
  margin: 28px 0 0;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.024em;
  font-weight: 500;
  color: var(--ink);
  max-width: 30ch;
  text-wrap: pretty;
}

/* Staat er een kern, dan komt de introtekst daar 22 pixels onder en is hij
   kleiner dan een gewone hero-intro. */
.hero-kern + .intro {
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.62;
  max-width: 52ch;
}

/* Op een dienstpagina en een landingspagina loopt het beeld niet buiten de
   inhoudsstrook. */
.hero[data-template='dienst'] .hero-beelden,
.hero[data-template='seo'] .hero-beelden {
  margin-right: 0;
}

.hero[data-template='dienst'] .hero-raster {
  gap: 64px;
}

.hero[data-template='dienst'] .hero-tekst .knoppen {
  margin-top: 40px;
}

/* Op deze paginasoorten heeft de kop geen maximumbreedte in het ontwerp. */
.hero[data-template='diensten-overzicht'] .h1,
.hero[data-template='cases-overzicht'] .h1,
.hero[data-template='insights-overzicht'] .h1,
.hero[data-template='vacatures-overzicht'] .h1,
.hero[data-template='vacature'] .h1,
.hero[data-template='about'] .h1,
.hero[data-template='case'] .h1,
.hero[data-template='artikel'] .h1 {
  max-width: none;
}

/* ── de lijst met open vacatures op /vacatures */
.vacaturelijst {
  margin-top: 80px;
  border-top: 1px solid var(--lijn-deel);
}

.vacaturerij {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) 54px;
  gap: 24px;
  align-items: center;
  padding: 34px 0;
  border-bottom: 1px solid var(--lijn-deel);
  text-decoration: none;
}

.vacaturerij-titel {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--ink);
}

.vacaturerij-stip {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  background: var(--groen);
}

.vacaturerij-cel {
  font-size: 15px;
  color: var(--muted);
}

/* De drie gegevens zitten in één omhulling, zodat ze op een telefoon samen op
   één regel kunnen. Op een breed scherm doet die omhulling niets: de cellen
   staan als losse kolommen in het raster van de rij. */
.vacaturerij-gegevens {
  display: contents;
}

/**
 * Onder 768 pixels passen vijf kolommen niet naast elkaar. De titelkolom hield
 * op 375 pixels nog geen 60 pixels over, brak per woord af en de rij werd vijf
 * regels hoog met de gegevens er los naast. Daar staat de titel nu over de
 * volle breedte, met salaris, uren en plek als één regel eronder en de pijl
 * rechts over beide rijen.
 */
@media (max-width: 767px) {
  .vacaturerij {
    grid-template-columns: minmax(0, 1fr) 54px;
    gap: 12px 20px;
    padding: 24px 0;
  }

  .vacaturerij-titel {
    grid-column: 1;
    grid-row: 1;
  }

  /**
   * Salaris en uren naast elkaar, de plek eronder. Een vast raster en geen
   * lijst die zelf afbreekt: met een punt tussen de gegevens begon de tweede
   * regel met "· Boxtel", en zo'n losse punt vooraan leest als een fout. De
   * ruimte van 24 pixels doet hier het werk van die punt.
   */
  .vacaturerij-gegevens {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: 24px;
    row-gap: 2px;
    grid-column: 1;
    grid-row: 2;
  }

  .vacaturerij-cel:nth-child(3) {
    grid-column: 1 / -1;
  }

  .vacaturerij .pijlvak-groot {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

/* ── de drie vakken onder de vacaturelijst */
.perkkaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  margin-top: 64px;
}

.perkkaart {
  padding: 34px 32px;
  background: var(--wit);
  border: 1px solid var(--lijn-kaart);
}

.perkkaart-kop {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.perkkaart-tekst {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* ── de insightkaart op het overzicht is iets groter dan op de startpagina */
.hero[data-template='insights-overzicht'] ~ .sectie-artikelen .rooster {
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

/* Op de startpagina staan er drie in een smallere kolom dan op het overzicht:
   300 in plaats van 340. Zo staat het in het ontwerp. */
.hero[data-template='home'] ~ .sectie-artikelen .rooster {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.hero[data-template='insights-overzicht'] ~ .sectie-artikelen .artikelkaart {
  min-height: 340px;
}

.hero[data-template='insights-overzicht'] ~ .sectie-artikelen .artikelkaart h2,
.hero[data-template='insights-overzicht'] ~ .sectie-artikelen .artikelkaart h3 {
  font-size: 26px;
  line-height: 1.14;
}

/* ── de casekaart op het overzicht: vlaggetje, uitgangspunt van twee regels */
.casekaart-overzicht .casekaart-body {
  padding: 30px 30px 28px;
}

.casekaart-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.casekaart-chip {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(12, 13, 15, 0.06);
  padding: 6px 10px;
}

.casekaart-diensten {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 4px;
}

.casekaart-overzicht .casekaart-titel {
  margin-top: 16px;
}

/* Twee regels, met een vervaging naar onderen: zo staat het in het ontwerp. */
.casekaart-situatie {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, 0.15) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, 0.15) 100%);
}

/* De lijst landingspagina's op de marketingbureau-pagina's: elf kaarten in
   dezelfde vorm als de dienstkaarten, zonder beeld. Vanaf hier komt een
   bezoeker bij /webdesign-boxtel en de tien andere; de voet linkt er niet meer
   rechtstreeks naar. */
.onderwerprooster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
}

.onderwerpkaart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 28px 30px 26px;
  background: var(--wit);
  border: 1px solid var(--lijn-kaart);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.onderwerpkaart:hover,
.onderwerpkaart:focus-visible {
  border-color: var(--ink);
}

.onderwerpkaart strong {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.onderwerpkaart span {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

/* De links naar de tien andere onderwerpen en de hub, onder de tekst van een
   landingspagina. Eén regel die omloopt; geen kaarten, want elf keer een
   subtekst zou de pagina's weer op elkaar laten lijken. */
.verwant {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--lijn-deel);
}

.verwant ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.verwant a {
  color: var(--ink);
  font-size: 16px;
  text-decoration: underline;
  text-decoration-color: var(--lijn-deel);
  text-underline-offset: 4px;
}

.verwant a:hover,
.verwant a:focus-visible {
  text-decoration-color: var(--oranje);
}