/* ==================================================================
   Stapminder: alle component- en sectiestyling, vierde iteratie.

   Ontwerpprincipe: losse handelingen en systemen komen samen tot één
   gecontroleerde stroom. Wat dat verhaal draagt, mag zichtbaar zijn;
   de rest niet. Daarom is de standaard hier witruimte plus een
   haarlijn, en is een omrand kader de uitzondering: alleen het
   contactformulier zit nog in een kaart.

   Drie regels die deze iteratie sturen:
   1. Geen losse font-sizes. Elke regel kiest uit de zeven groottes in
      tokens.css. Serif staat alleen op h1 en h2.
   2. Koper is schaars. De verticale koperlijn markeert op de homepage
      drie secties (oplossingen, werkwijze, contact) en verder hooguit
      één blok per subpagina; daarbuiten is koper alleen een letterkleur
      of een knooppunt dat iets betekent.
   3. Eén donkerblauw vlak op de pagina: de werkwijze. De footer is
      licht, zodat de pagina niet twee keer dichtklapt.

   Inhoud:
   01 Basis en typografie
   02 Layout en sectieritme
   03 Knooppunten (de stroomtaal)
   04 Knoppen, links en labels
   05 Panelen
   06 Sitekop en navigatie
   07 Hero
   08 Koppelbalk
   09 Herkenning (handwerk)
   10 Het uitgelichte voorbeeld
   11 Cases als kaarten en afbeeldingsvakken
   12 Werkwijze: donkere tijdlijn
   13 Over en FAQ
   14 Contact en formulier
   15 CTA, paginakoppen, WordPress-inhoud, feiten, procesbalk
   16 Footer
   17 Responsief
   18 Beweging: reveals en reduced motion

   Kleur en maat komen uitsluitend uit tokens.css.
   ================================================================== */

/* ------------------------------------------ 01 Basis en typografie */

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

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--font-basis);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--inkt-body);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Fijne papierkorrel: een vooraf gerasterde PNG-tegel (geen SVG-filter,
   die is duur om over een hele pagina te schilderen) op een absolute
   laag die meescrolt. */
body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background-image: url("../img/korrel.png");
}

h1,
h2 {
  margin: 0 0 0.5em;
  font-family: var(--font-kop);
  font-weight: var(--gew-kop);
  color: var(--inkt);
  letter-spacing: -0.015em;
  line-height: var(--lh-kop);
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
}

h2 {
  font-size: var(--t-h2);
}

h1 em {
  font-style: italic;
  color: inherit;
}

/* h3 is sans: de serif blijft voorbehouden aan de twee koptypes die
   het ritme van de pagina bepalen. */
h3 {
  margin: 0 0 0.45em;
  font-family: var(--font-basis);
  font-size: var(--t-h3);
  font-weight: var(--gew-nadruk);
  color: var(--inkt);
  line-height: 1.3;
}

p {
  margin: 0 0 1em;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
}

a {
  color: var(--koper-tekst);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--koper-diep);
}

img,
svg {
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--navy);
  color: var(--kaart);
}

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

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

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100;
  padding: 0.7em 1.2em;
  background: var(--kaart);
  color: var(--inkt);
  border: 1px solid var(--lijn);
  border-radius: 0 0 var(--r-basis) var(--r-basis);
  text-decoration: none;
  font-weight: var(--gew-nadruk);
}

.skip-link:focus-visible {
  top: 0;
}

/* ------------------------------------------ 02 Layout en sectieritme */

.omslag {
  width: min(100% - 3rem, var(--omslag-breed));
  margin-inline: auto;
}

.omslag--smal > * {
  max-width: var(--omslag-smal);
}

main {
  position: relative;
}

/* Drie sectiehoogtes. Ze wisselen elkaar bewust af, zodat de pagina
   niet in één maat doorloopt: ruim waar het verhaal ademt, kort waar
   het een tussenstap is. */
.sectie {
  position: relative;
  z-index: 1;
  padding-block: var(--ruimte-sectie);
}

.sectie--ruim {
  padding-block: var(--ruimte-sectie-ruim);
}

.sectie--compact {
  padding-block: var(--ruimte-sectie-kort);
}

/* Twee sectiepaddings stapelen op tot een gat waarin niets gebeurt.
   Een zachte band brengt zijn eigen scheiding mee via het verloop, dus
   daar mag de bovenruimte korter. */
.sectie--zacht {
  padding-top: var(--ruimte-sectie-kort);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--papier-zacht) 80%, transparent) 14% 86%, transparent);
}

/* Voor een sectie die inhoudelijk doorloopt in de volgende: het
   grootboek eindigt op "precies het werk waar wij iets omheen bouwen",
   en daarna staat meteen wát we bouwen. Die twee horen dicht op elkaar. */
.sectie--onder-kort {
  padding-bottom: var(--ruimte-sectie-kort);
}

.sectie--donker {
  background: var(--navy);
  z-index: 2;
}

.sectie--paginakop {
  padding-block: clamp(5rem, 10vw, 7rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--was-hero);
}

.sectie--boven-strak {
  padding-top: 0;
}

/* Hetzelfde argument als hierboven, maar dan andersom: staat er een
   zachte band ónder, dan draagt die de scheiding al. De sectie erboven
   mag dan strak eindigen in plaats van er nog een halve sectiehoogte
   witruimte tegenaan te zetten. Zo blijft de vraag ("waar zit dat
   handwerk") binnen één blik van het antwoord eronder. */
.sectie--onder-strak {
  padding-bottom: 0;
}

[id] {
  scroll-margin-top: 5.5rem;
}

/* De verticale koperlijn. Hij staat op precies drie plekken: wat we
   bouwen, hoe we werken, en de stap naar contact. Zou hij overal
   staan, dan markeert hij niets meer.

   .merk staat altijd op het blok en de lijn hangt aan de h2 erbinnen.
   Zet je .merk op de h2 zelf, dan springt alleen die kop in en blijven
   het label erboven en de alinea eronder op de oude marge staan. Dat de
   lijn aan de h2 hangt en niet aan het blok, houdt hem overal even lang:
   anders wordt hij bij het contactintro drie keer zo lang als bij een
   losse sectiekop. */
.merk {
  padding-left: var(--merk-inspring, clamp(1rem, 1.8vw, 1.5rem));
}

/* Ook h1: op /contact/ is "Plan je gratis processcan" de paginakop en
   dus een h1, terwijl hetzelfde blok op andere plekken een h2 draagt. */
.merk :is(h1, h2) {
  position: relative;
}

.merk :is(h1, h2)::before {
  content: "";
  position: absolute;
  top: 0.12em;
  bottom: 0.12em;
  left: calc(-1 * var(--merk-inspring, clamp(1rem, 1.8vw, 1.5rem)));
  width: 2px;
  background: var(--koper);
}

.sectiekop {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 1.5rem 4rem;
  align-items: end;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

/* Eén kolom: gebruikt waar de kop alleen staat, zodat niet elke
   sectie dezelfde tweedeling herhaalt. */
.sectiekop--enkel {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.sectiekop h2 {
  margin-bottom: 0;
  max-width: 22ch;
}

.sectiekop__naast {
  margin: 0 0 0.35rem;
  color: var(--inkt-gedempt);
  font-size: var(--t-klein);
  max-width: 28rem;
  justify-self: end;
}

.sectiekop--enkel .sectiekop__naast {
  justify-self: start;
  max-width: var(--kolom-lees);
}

.tekstblok {
  max-width: var(--kolom-lees);
}

.tekstblok--gedempt {
  color: var(--inkt-gedempt);
  font-size: var(--t-klein);
}

/* -------------------------- 03 Knooppunten (de stroomtaal) */

/* Ruit = controle/beslismoment, cirkel = mens, vierkant = processtap.
   Deze drie vormen staan nog maar op twee plekken op de homepage:
   in de stroomlijn en bij de vinkjes. Daardoor betekenen ze weer iets. */
.node {
  display: inline-block;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  background: var(--kaart);
  border: 1.5px solid var(--koper);
}

.node--ruit {
  transform: rotate(45deg);
}

.node--mens {
  border-radius: 50%;
}

.node--vol {
  background: var(--koper);
}

.node--salie {
  border-color: var(--salie-tekst);
}

.node--vol.node--salie {
  background: var(--salie-tekst);
}

/* ------------------------------------- 04 Knoppen, links en labels */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  min-height: 3rem;
  padding: 0.4em 1.4em;
  border-radius: var(--r-klein);
  font-weight: var(--gew-nadruk);
  font-size: var(--t-klein);
  line-height: 1.3;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--duur-kort) var(--ease),
              border-color var(--duur-kort) var(--ease),
              color var(--duur-kort) var(--ease);
}

.knop--groot {
  min-height: 3.25rem;
  padding-inline: 1.6em;
  font-size: var(--t-body);
}

.knop--primair {
  background: var(--navy);
  color: var(--kaart);
}

.knop--primair:hover {
  background: var(--navy-2);
  color: var(--kaart);
}

.knop--secundair {
  background: transparent;
  color: var(--inkt);
  border-color: color-mix(in srgb, var(--navy) 28%, transparent);
}

.knop--secundair:hover {
  color: var(--inkt);
  border-color: var(--navy);
  background: color-mix(in srgb, var(--kaart) 60%, transparent);
}

.knop__pijl {
  transition: transform var(--duur-kort) var(--ease);
}

.knop:hover .knop__pijl {
  transform: translateX(3px);
}

/* De hoofdactie wenkt. Per scherm staat er precies één grote primaire
   knop; die krijgt een pijl die om de paar seconden een stap naar voren
   doet en terugkomt. Dezelfde betekenis als de rest van de beweging op
   de site: iets gaat vooruit. Geen bounce, geen glow, en ruim twee
   seconden stilte tussen twee wenken, zodat hij wijst en niet zeurt.

   Bewust alleen op .knop--wenkt en niet op elke primaire knop: staan de
   kopknop en de heroknop tegelijk te bewegen, dan wijst er niets meer.

   Achter html.anim en no-preference, net als alle andere beweging. Bij
   hover en focus gaat de animatie uit, anders vechten die en de
   verschuiving hierboven om dezelfde transform. */
@keyframes knop-pijl-wenk {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}

@media (prefers-reduced-motion: no-preference) {
  html.anim .knop--wenkt .knop__pijl {
    animation: knop-pijl-wenk 2.6s ease-in-out infinite;
  }

  html.anim .knop--wenkt:hover .knop__pijl,
  html.anim .knop--wenkt:focus-visible .knop__pijl {
    animation: none;
  }
}

/* Het kapitale label met streepje staat hoogstens één keer per
   pagina, boven de belangrijkste kop. */
.label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.5rem;
  font-size: var(--t-label);
  font-weight: var(--gew-label);
  letter-spacing: var(--sperring);
  text-transform: uppercase;
  color: var(--koper-tekst);
}

.label::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--koper);
}

.pijl-link {
  display: inline-block;
  font-weight: var(--gew-nadruk);
  font-size: var(--t-klein);
  text-decoration: none;
  color: var(--koper-tekst);
}

.pijl-link span {
  display: inline-block;
  transition: transform var(--duur-kort) var(--ease);
}

.pijl-link:hover span {
  transform: translateX(4px);
}

.pijl-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.28em;
}

.pijl-link--donker {
  color: var(--inkt-op-donker);
}

.pijl-link--donker:hover {
  color: var(--inkt-op-donker);
}

/* --------------------------------------------------- 05 Panelen */

/* Eén kader op de hele site: het contactformulier. Verder doet een
   haarlijn het werk. Hoekmarkeringen en zweefschaduwen zijn eruit;
   die maakten van elk blok een object dat aandacht vroeg. */
.paneel {
  position: relative;
  border: 1px solid var(--lijn);
  border-radius: var(--r-paneel);
  background: var(--kaart);
}

/* ------------------------------------- 06 Sitekop en navigatie */

.site-kop {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duur-basis) var(--ease);
}

.site-kop.is-gescrold {
  border-bottom-color: var(--lijn-zacht);
}

.site-kop__balk {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 4.5rem;
}

.logo {
  font-family: var(--font-kop);
  font-size: 1.5rem;
  font-weight: var(--gew-kop);
  letter-spacing: -0.03em;
  color: var(--inkt);
  text-decoration: none;
  line-height: 1;
}

/* Het woordmerk is de domeinnaam; de extensie draagt het koper. Dat zat
   eerder op een losse punt achter de naam. */
.logo__tld {
  color: var(--koper);
}

.site-kop__nav {
  margin-inline: auto;
}

.site-kop__nav ul {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.site-kop__nav a {
  position: relative;
  color: var(--inkt);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-klein);
}

.site-kop__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -0.45rem;
  height: 1px;
  background: var(--koper);
  transition: right var(--duur-kort) var(--ease);
}

.site-kop__nav a:hover::after,
.site-kop__nav a[aria-current="page"]::after {
  right: 0;
}

.site-kop__cta {
  min-height: 2.6rem;
}

.menu-knop {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--lijn);
  border-radius: var(--r-klein);
  cursor: pointer;
}

.menu-knop__lijn {
  display: block;
  height: 2px;
  background: var(--inkt);
  transition: transform var(--duur-kort) var(--ease),
              opacity var(--duur-kort) var(--ease);
}

.menu-knop[aria-expanded="true"] .menu-knop__lijn:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-knop[aria-expanded="true"] .menu-knop__lijn:nth-child(2) {
  opacity: 0;
}

.menu-knop[aria-expanded="true"] .menu-knop__lijn:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.mobiel-menu {
  padding: 0.5rem 1.5rem 1.5rem;
  background: var(--papier);
  border-bottom: 1px solid var(--lijn-zacht);
}

.mobiel-menu ul {
  list-style: none;
  margin: 0 0 1rem;
}

.mobiel-menu li + li {
  border-top: 1px solid var(--lijn-zacht);
}

.mobiel-menu a:not(.knop) {
  display: block;
  padding: 0.85em 0;
  color: var(--inkt);
  font-weight: var(--gew-nadruk);
  text-decoration: none;
}

html:not(.js) .menu-knop {
  display: none !important;
}

/* ---------------------------------------------------- 07 Hero */

/* De werkfoto is het podium; de tekst staat links op een papieren
   waas en houdt zich aan één kolom van 520 px. De hero eindigt na de
   bewijsregel: er hangt niets meer overheen, zodat het eerste scherm
   één boodschap heeft in plaats van twee. */
/* De hero vult het eerste scherm op een strook na: 90vh min de sitekop,
   zodat de koppelbalk er nog net onderuit piept. Dat randje is het enige
   dat zegt dat er verder gescrold kan worden. Het is een min-height, dus
   past de tekst er niet in (korte vensters, grote lettergrootte), dan
   groeit de hero gewoon mee. */
.hero {
  --hero-foto-anker: 82% 30%;
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  min-height: calc(90vh - 4.5rem);
  overflow: hidden;
  background: var(--was-hero);
  border-bottom: 1px solid var(--lijn-zacht);
}

/* De foto hangt rechts en is zo breed als het beeld nodig heeft, niet zo
   breed als het venster. Over de volle breedte moest hij zo ver
   opgeschaald worden dat er van de 1800 px alleen een uitsnede overbleef:
   op een breed scherm zag je nog de helft van de foto. Smaller past er
   meer van dezelfde foto in dezelfde hoogte. De linkerrand blijft op elke
   maat achter het dekkende deel van de waas (die loopt tot 42%). */
.hero__foto {
  position: absolute;
  inset: 0 0 0 auto;
  width: 64%;
  z-index: 0;
}

.hero__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-foto-anker);
}

/* De waas houdt papier tot voorbij de tekstkolom en laat de foto
   daarna opkomen. De percentages volgen de kolombreedte: die eindigt
   op elke schermmaat rond 45% van het venster. */
.hero__waas {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      var(--papier) 0 42%,
      color-mix(in srgb, var(--papier) 92%, transparent) 50%,
      color-mix(in srgb, var(--papier) 62%, transparent) 60%,
      color-mix(in srgb, var(--papier) 24%, transparent) 72%,
      transparent 86%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--papier) 80%, transparent) 0 3rem,
      transparent 9rem);
}

.hero__binnen {
  position: relative;
  z-index: 2;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.hero__tekst {
  max-width: var(--kolom-hero);
}

/* De hero komt binnen in leesvolgorde: label, kop, belofte, de drie
   punten, de knop, de bewijsregel. Dezelfde beweging als de reveals
   verderop, namelijk alleen opklaren, zodat het eerste scherm de toon
   zet voor de rest van de pagina in plaats van er los van te staan.

   Bewust een animatie en geen reveal: dit hoeft niet op scroll te
   wachten en mag niet afhangen van beweging.js. De klasse html.anim
   staat er al voordat de pagina tekent, en valt hij weg, dan staat de
   hero er gewoon.

   De foto doet niet mee. Dat is het LCP-element; die hoort er meteen
   te staan, niet op te komen. */
@keyframes hero-binnen {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  html.anim .hero__tekst > * {
    animation: hero-binnen var(--duur-reveal) var(--ease) backwards;
    animation-delay: calc(var(--hero-stap, 0) * var(--stagger));
  }

  html.anim .hero__tekst > :nth-child(2) { --hero-stap: 1; }
  html.anim .hero__tekst > :nth-child(3) { --hero-stap: 2; }
  html.anim .hero__tekst > :nth-child(4) { --hero-stap: 3; }
  html.anim .hero__tekst > :nth-child(5) { --hero-stap: 4; }
  html.anim .hero__tekst > :nth-child(6) { --hero-stap: 5; }
}

.hero__tekst h1 {
  margin-bottom: 0;
}

.hero__sub {
  max-width: 30rem;
  margin: 1.6rem 0 0;
  font-size: var(--t-lead);
  line-height: 1.65;
  color: var(--inkt-body);
}

/* Drie redenen onder de tekst. Ze staan in de knooppunttaal van de
   site: een gevuld vierkant is een vaste stap. */
.hero__usp {
  list-style: none;
  display: grid;
  gap: 0.7rem;
  margin-top: 1.6rem;
}

.hero__usp li {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  color: var(--inkt);
  font-size: var(--t-klein);
  font-weight: 600;
}

.hero__usp .node {
  position: relative;
  top: -1px;
}

/* Eén knop die eruit springt. "Bekijk de cases" is een tekstlink:
   twee even zware knoppen laten de bezoeker kiezen in plaats van
   doorlopen. */
.hero__acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.9rem;
  margin-top: 2.25rem;
}

.hero__trust {
  margin-top: 1.75rem;
  color: var(--inkt-gedempt);
  font-size: var(--t-klein);
}

/* ------------------------------- 08 Koppelbalk en beheerscherm */

/* Twee rijen merktekens die rustig langsschuiven, direct onder de hero.
   Ze staan er om herkenning te geven: iemand die Gmail en WooCommerce
   ziet staan, ziet zijn eigen bureaublad. Monochroom in --inkt op lage
   dekking, want kleurlogo's slaan een gat in het palet. */
.koppelvlak {
  position: relative;
  z-index: 1;
  padding-block: clamp(1.35rem, 2.4vw, 1.85rem);
  border-bottom: 1px solid var(--lijn-zacht);
}

.koppelvlak .label {
  margin-bottom: 0.9rem;
}

/* De randen faden weg, zodat de rij niet lijkt af te knappen tegen het
   venster maar er onderdoor loopt. */
.koppelrij {
  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);
}

.koppelrij + .koppelrij {
  margin-top: 0.85rem;
}

/* De rij staat twee keer in het spoor; -50% is dus precies één set en
   het herhaalt naadloos. Daarom marge per teken en geen gap: met gap
   is de tweede helft één tussenruimte smaller en springt hij. */
.koppelrij__spoor {
  display: flex;
  align-items: center;
  width: max-content;
}

.koppelmerk {
  display: block;
  margin-right: clamp(2.5rem, 6.5vw, 6rem);
}

.koppelmerk svg {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  fill: var(--inkt);
  opacity: 0.38;
}

/* Een enkel merk heeft een breed, dun beeldmerk in plaats van een
   vierkant teken. Op dezelfde maat als de rest wordt dat een veeg, dus
   dat krijgt een grotere doos; het glyph schaalt mee binnen zijn eigen
   vierkante viewBox. */
.koppelmerk--breed svg {
  width: 2.9rem;
  height: 2.9rem;
}

html.anim .koppelrij__spoor {
  animation: stapminder-schuif 64s linear infinite;
}

html.anim .koppelrij--terug .koppelrij__spoor {
  animation-direction: reverse;
}

/* Wie wil lezen welke merken er staan, houdt de rij stil. */
.koppelrij:hover .koppelrij__spoor {
  animation-play-state: paused;
}

@keyframes stapminder-schuif {
  to { transform: translateX(-50%); }
}

/* ------------------------------------ 09 Herkenning (handwerk)

   Bewust stil: vier zinnen onder elkaar die je in een oogopslag
   uitleest. Rechts de tekening van de ronde die elke week terugkomt.

   Die tekening staat er omdat de rechterhelft anders leeg was. Als
   adempauze werkte dat niet: een halve sectie zonder iets erin leest als
   een gat, niet als rust. De tekening vult die helft zonder tekst te
   herhalen; ze laat zien wat de kop zegt. */

.handwerk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.handwerk__tekst {
  max-width: 36rem;
}

.handwerk h2 {
  margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem);
}

.handwerk__lijst {
  list-style: none;
  border-top: 1px solid var(--lijn);
}

/* Icoon plus zin op één regel. Het icoon staat in een eigen kolom, zodat
   een zin die op smalle schermen omslaat netjes onder zichzelf uitlijnt
   en niet onder de tekening door loopt. */
.handwerk__lijst li {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: 0 1.15rem;
  align-items: center;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--lijn);
  color: var(--inkt);
  font-size: var(--t-lead);
  line-height: 1.5;
}

/* Zelfde vormtaal als de lus hiernaast: haarlijnen uit de kleurtokens,
   vlakken in papier zodat kruisende lijnen elkaar netjes afdekken, en
   koper op precies het onderdeel dat met de hand gaat. */
.icoon {
  width: 2.1rem;
  height: 2.1rem;
}

.icoon__lijn,
.icoon__vlak,
.icoon__accent {
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icoon__lijn {
  fill: none;
  stroke: var(--inkt);
}

.icoon__vlak {
  fill: var(--papier);
  stroke: var(--inkt);
}

.icoon__accent {
  fill: none;
  stroke: var(--koper);
}

.handwerk__beeld {
  margin: 0;
}

/* De lus. Inline SVG, dus lijnkleur en accent komen letterlijk uit de
   tokens en hij blijft scherp op elk scherm. De twee lichte lussen zijn
   de weken die er al waren; de koperen pijl is het punt waarop het weer
   bij een mens begint. Zelfde vormtaal als de rest: vierkant is een
   processtap, ruit een controle, cirkel een mens. */
/* De uitlegvideo. Hij staat op de plek van de lus-tekening die hier
   eerder stond, en krijgt dezelfde behandeling als een foto: hele breedte
   van zijn kolom, zachte rand, geen schaduw. De achtergrond is steen,
   zodat er tijdens het laden geen zwart vlak staat waar straks papier
   hoort. Geen autoplay, dus geen bewegend beeld dat om aandacht vraagt
   naast de tekst ernaast. */
.uitlegvideo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-basis);
  border: 1px solid var(--lijn);
  background: var(--steen);
}

.handwerk__beeld figcaption {
  margin-top: 1rem;
  text-align: center;
  color: var(--inkt-gedempt);
  font-size: var(--t-mini);
}

/* ------------------------- 10 Het uitgelichte voorbeeld

   Eén case groot uitgevoerd, direct na de herkenning: beeld links,
   tekst rechts. Links, omdat de hero zijn beeld rechts heeft; twee keer
   dezelfde kant maakt van de pagina een kolom in plaats van een
   compositie. Dit is het enige blok op de pagina waar een afbeelding en
   een kop even zwaar wegen, en dat is precies de bedoeling: hier staat
   het bewijs. */

.uitgelicht {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.uitgelicht__beeld {
  margin: 0;
}

/* Staand beeld (4:5) naast de tekst. Op de halve breedte die de gewone
   variant geeft wordt een portretfoto zo hoog dat de tekst ernaast in
   het niets valt, dus krijgt de kolom hier minder ruimte. */
.uitgelicht--staand {
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
}

.uitgelicht .afbeelding-vak {
  --verhouding: 16 / 10;
}

.uitgelicht__beeld img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-basis);
  border: 1px solid var(--lijn);
}

.uitgelicht__beeld figcaption {
  margin-top: 0.8rem;
  max-width: 30rem;
  color: var(--inkt-gedempt);
  font-size: var(--t-mini);
}

.uitgelicht__tekst h2 {
  max-width: 24ch;
}

.uitgelicht__lead {
  max-width: 34rem;
  font-size: var(--t-lead);
  line-height: 1.7;
  color: var(--inkt);
}

.uitgelicht__tekst p {
  max-width: 34rem;
}

.uitgelicht__tekst .uitgelicht__lead + p {
  font-size: var(--t-klein);
}

/* Dit is de verkoopplek van de pagina, dus hier staat de tweede
   primaire knop. Verder omhoog scrollen om iets aan te vragen hoeft
   niemand. */
.uitgelicht__actie {
  margin-top: 1.9rem;
}

/* -------------------- 11 Cases als kaarten en afbeeldingsvakken */

/* De cases stonden als zes brede rijen onder elkaar: soort, verhaal,
   uitkomst. Dat las als zes losse artikelen, en maar één ervan ging
   ergens heen. Nu is elke case een kaart die in zijn geheel een link is
   naar zijn eigen pagina, waar de diepte en de foto's staan.

   Deze kaarten zijn de uitzondering op de regel dat kaders hier de
   uitzondering zijn: ze zijn klikbaar, en dan moet het klikvlak te zien
   zijn. De rand is de zachte lijn, niet de volle. */
.case-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.35rem);
}

.case-kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: clamp(1.2rem, 1.9vw, 1.5rem);
  border: 1px solid var(--lijn);
  border-radius: var(--r-basis);
  background: var(--kaart);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duur-basis) var(--ease),
              transform var(--duur-basis) var(--ease-uit);
}

.case-kaart:hover,
.case-kaart:focus-visible {
  border-color: var(--koper);
}

@media (prefers-reduced-motion: no-preference) {
  .case-kaart:hover {
    transform: translateY(-2px);
  }
}

/* De illustratie staat uit de tekstkolom, rechtsboven in de hoek. Boven
   de tekst kostte hij een hele regelhoogte plus marge; hier is hij een
   herkenningspunt zonder ruimte in te nemen. De koptekst houdt rechts
   ruimte vrij zodat een lange titel er niet onder doorloopt. */
.case-kaart .illu {
  position: absolute;
  top: clamp(1rem, 1.6vw, 1.25rem);
  right: clamp(1rem, 1.6vw, 1.25rem);
  width: 2.15rem;
  height: 2.15rem;
  opacity: 0.8;
}

.case-kaart__soort {
  margin: 0 0 0.3rem;
  padding-right: 3rem;
  font-size: var(--t-label);
  font-weight: var(--gew-label);
  letter-spacing: var(--sperring);
  text-transform: uppercase;
  color: var(--koper-tekst);
}

.case-kaart__titel {
  margin: 0 0 0.5rem;
  padding-right: 2.75rem;
}

.case-kaart__kort {
  margin: 0 0 1rem;
  color: var(--inkt-body);
  font-size: var(--t-klein);
}

/* De uitkomst en de leeslink staan onderaan uitgelijnd, zodat de kaarten
   naast elkaar één lijn houden ook als de tekst verschilt in lengte. */
.case-kaart__slot {
  margin: auto 0 0.7rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--lijn-zacht);
  color: var(--inkt);
  font-size: var(--t-klein);
  font-weight: var(--gew-nadruk);
}

.case-kaart__meer {
  color: var(--koper-tekst);
  font-size: var(--t-mini);
  font-weight: var(--gew-nadruk);
}

.case-kaart:hover .case-kaart__meer span,
.case-kaart:focus-visible .case-kaart__meer span {
  display: inline-block;
  transform: translateX(3px);
  transition: transform var(--duur-kort) var(--ease);
}

/* De vier illustraties. Inline SVG, dus de lijn is letterlijk --inkt en
   het accent letterlijk --koper; zie template-parts/illustratie.php.
   Eén maat, één lijndikte, en per illustratie precies één koperen
   element. Ze staan bovenaan de kaart als herkenningspunt voor de vorm
   van de oplossing. Decoratief, dus aria-hidden. */
.illu {
  display: block;
  flex: 0 0 auto;
  width: 3.1rem;
  height: 3.1rem;
}

.illu__lijn {
  fill: none;
  stroke: var(--inkt);
  stroke-width: 1.5;
}

.illu__accent {
  fill: var(--koper);
}

.illu__accent-lijn {
  fill: none;
  stroke: var(--koper);
  stroke-width: 1.5;
}

/* Afbeeldingsvak: gereserveerde plek voor een echte foto.
   Vervangen: <img> erin zetten, zie README "Afbeeldingen plaatsen". */
.afbeelding-vak {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: var(--verhouding, 3 / 2);
  border-radius: var(--r-basis);
  border: 1px solid var(--lijn);
  background:
    radial-gradient(color-mix(in srgb, var(--navy) 9%, transparent) 0.6px, transparent 0.6px),
    linear-gradient(165deg, var(--steen), color-mix(in srgb, var(--steen) 45%, var(--kaart)));
  background-size: 12px 12px, cover;
  overflow: hidden;
}

.afbeelding-vak__binnen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1rem;
}

.afbeelding-vak__binnen svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--inkt-gedempt);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.afbeelding-vak__binnen span {
  font-size: var(--t-label);
  font-weight: var(--gew-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--inkt-gedempt);
}

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

/* ------------------------------- 12 Werkwijze: donkere tijdlijn */

/* Het enige donkerblauwe vlak van de pagina. Daarom mag het zwaar
   zijn: vier stappen aan één lijn, en de afsluitende regel eronder. */
.sectie--donker h2,
.sectie--donker h3 {
  color: var(--inkt-op-donker);
}

.sectie--donker p,
.sectie--donker li {
  color: var(--inkt-op-donker-body);
}

.tijdlijn {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  list-style: none;
}

/* De lijn waar de vier stappen aan hangen. */
.tijdlijn::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 18%;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--lijn-op-donker) 0 2px, transparent 2px 9px);
}

/* De lijn tekent zich van links naar rechts en de knooppunten klikken
   er één voor één op. clip-path en niet scaleX: de lijn is een
   stippelpatroon en dat zou uitrekken. */
html.anim .tijdlijn::before {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.7s var(--ease-lijn) 0.15s;
}

html.anim .tijdlijn.is-zichtbaar::before {
  clip-path: inset(0);
}

.tijdlijn__stap {
  position: relative;
  padding-top: 1.4rem;
}

.tijdlijn__stap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--navy);
  border: 1.5px solid var(--koper);
  transform: rotate(45deg);
}

/* De ruit houdt zijn rotatie; de losse scale-eigenschap stapelt daarop. */
html.anim .tijdlijn .tijdlijn__stap::before {
  scale: 0;
  transition: scale var(--duur-basis) var(--ease-uit)
              calc(var(--reveal-stap, 0) * var(--stagger) + 0.25s);
}

html.anim .tijdlijn.is-zichtbaar .tijdlijn__stap::before {
  scale: 1;
}

.tijdlijn__nummer {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--t-mini);
  font-weight: var(--gew-label);
  letter-spacing: var(--sperring);
  color: var(--inkt-op-donker-body);
  font-variant-numeric: tabular-nums;
}

.tijdlijn__stap p {
  font-size: var(--t-klein);
  line-height: 1.6;
}

/* Lichte variant van de tijdlijn, voor de casepagina. */
.tijdlijn--licht::before {
  background: repeating-linear-gradient(90deg, var(--lijn) 0 2px, transparent 2px 9px);
}

.tijdlijn--licht .tijdlijn__stap::before {
  background: var(--papier);
}

.tijdlijn--licht .tijdlijn__nummer {
  color: var(--koper-tekst);
}

/* De afsluitende belofte hangt aan een haarlijn in plaats van in een
   eigen kadertje: minder objecten op een vlak dat al zwaar is. */
.statregel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2.5rem;
  margin-top: clamp(2.5rem, 4.5vw, 3.75rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--lijn-op-donker);
  color: var(--inkt-op-donker-body);
  font-size: var(--t-klein);
}

.statregel p {
  margin: 0;
  max-width: 46rem;
}

.statregel .pijl-link--donker {
  white-space: nowrap;
}

/* ------------- 12 Grip: foto, waarborgen en de stroomlijn */

/* Hier komt het procesverhaal uit de hero terug, maar rustig: geen
   kader, geen reizende stip, geen statuschips. Vier stappen aan een
   haarlijn, met de mens als enige gemarkeerde halte. Dat is precies
   waar deze sectie over gaat: automatiseren zonder de controle te
   verliezen. */
/* ------------------------------------------------ 13 Over en FAQ */

.over {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2.5rem, 5.5vw, 6rem);
  align-items: center;
}

.over__tekst h2 {
  max-width: 26rem;
}

.over__tekst .tekstblok {
  max-width: var(--kolom-lees);
}

.over .afbeelding-vak {
  --verhouding: 4 / 5;
}

.over__onderschrift {
  margin-top: 0.75rem;
  font-size: var(--t-mini);
  color: var(--inkt-gedempt);
}

/* Drie afspraken als haarlijnrijen. De knooppunten ervoor zijn eruit:
   het zijn geen processtappen maar zinnen. */
/* De kop staat hier náást de vragen in plaats van erboven: dat is de
   enige sectie op de pagina met die opbouw, en het houdt de lijst
   smal genoeg om te lezen zonder een halve pagina leeg te laten. */
.faq-blok {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
}

.faq-blok__kop h2 {
  max-width: 14ch;
}

.faq-blok__kop p {
  max-width: 22rem;
  margin: 0;
  color: var(--inkt-gedempt);
  font-size: var(--t-klein);
}

/* Eén lijst aan haarlijnen. Twee kolommen kaartjes maakten er een
   raster van in plaats van een lijst om te lezen. */
.faq {
  border-top: 1px solid var(--lijn);
}

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

/* Uitklappen met hoogte-overgang. interpolate-size staat bewust op het
   item en niet op :root, want die eigenschap erft door naar alles.
   Kent de browser ::details-content niet, dan klapt het gewoon open. */
@supports selector(::details-content) {
  .faq__item {
    interpolate-size: allow-keywords;
  }

  html.anim .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--duur-basis) var(--ease),
                content-visibility var(--duur-basis) allow-discrete;
  }

  html.anim .faq__item[open]::details-content {
    block-size: auto;
  }
}

.faq__vraag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  font-size: var(--t-body);
  color: var(--inkt);
  font-weight: var(--gew-nadruk);
  cursor: pointer;
  list-style: none;
  transition: color var(--duur-kort) var(--ease);
}

.faq__vraag:hover {
  color: var(--koper-tekst);
}

.faq__vraag::-webkit-details-marker {
  display: none;
}

.faq__teken {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.faq__teken::before,
.faq__teken::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 11px;
  height: 1.5px;
  background: var(--koper);
  transition: rotate var(--duur-kort) var(--ease);
}

.faq__teken::after {
  rotate: 90deg;
}

.faq__item[open] .faq__teken::after {
  rotate: 0deg;
}

.faq__antwoord {
  padding: 0 0 1.3rem;
  max-width: 42rem;
}

.faq__antwoord p {
  font-size: var(--t-klein);
}

/* --------------------------------------- 14 Contact en formulier */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.contact__sub {
  max-width: 30rem;
}

.vinkjes {
  list-style: none;
  display: grid;
  gap: 0.9rem;
  margin-top: 1.6rem;
}

.vinkjes li {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  color: var(--inkt-body);
  font-weight: 600;
  font-size: var(--t-klein);
}

.vinkjes .node {
  position: relative;
  top: -1px;
}

.vinkjes--ruim {
  margin-top: 1.6rem;
  margin-bottom: 1.4rem;
  max-width: 42rem;
}

.contact__trust {
  margin-top: 1.8rem;
  color: var(--inkt-gedempt);
  font-size: var(--t-mini);
}

/* Op /contact/ is dit de enige sectie op de pagina. Wie liever mailt dan
   een formulier invult, moet dat niet in de footer hoeven zoeken. */
.contact__mail {
  margin-top: 0.5rem;
  color: var(--inkt-gedempt);
  font-size: var(--t-mini);
}

.contact__paneel {
  padding: 0;
}

.formulier {
  display: grid;
  gap: 1.05rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
}

.veld {
  display: grid;
  gap: 0.35rem;
}

.veld label {
  font-size: var(--t-klein);
  font-weight: var(--gew-nadruk);
  color: var(--inkt);
}

.veld__optioneel {
  color: var(--inkt-gedempt);
  font-weight: 500;
}

/* Hulpzin onder een label. Staat er omdat de site "geen voorbereiding
   nodig" belooft: de uitleg hoort naast het veld te blijven staan en niet
   in een placeholder die verdwijnt zodra je begint te typen. */
.veld__hulp {
  margin: -0.1rem 0 0;
  font-size: var(--t-mini);
  color: var(--inkt-gedempt);
}

.veld input,
.veld textarea {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.6em 0.85em;
  font: inherit;
  font-size: var(--t-klein);
  color: var(--inkt);
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--r-klein);
  transition: border-color var(--duur-kort) var(--ease),
              box-shadow var(--duur-kort) var(--ease);
}

.veld textarea {
  resize: vertical;
  min-height: 7rem;
}

.veld input::placeholder,
.veld textarea::placeholder {
  color: var(--inkt-gedempt);
  opacity: 0.7;
}

.veld input:focus-visible,
.veld textarea:focus-visible {
  outline: none;
  border-color: var(--koper-tekst);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--koper) 15%, transparent);
}

.veld--website {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.formulier__verstuur {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.formulier__verstuur[disabled] {
  opacity: 0.65;
  cursor: wait;
}

/* Tijdens het versturen loopt er een lijn onder de knop door: een
   procesindicator in de taal van de site, geen ronddraaiend wieltje. */
.formulier__verstuur[disabled]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--koper);
  transform: scaleX(0);
  transform-origin: left;
}

html.anim .formulier__verstuur[disabled]::after {
  animation: stapminder-verzendlijn 1.1s var(--ease-lijn) infinite;
}

@keyframes stapminder-verzendlijn {
  0%   { transform: scaleX(0); transform-origin: left; }
  50%  { transform: scaleX(1); transform-origin: left; }
  51%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

.formulier__privacy {
  font-size: var(--t-mini);
  color: var(--inkt-gedempt);
}

.formulier-status {
  padding: 1.05rem 1.25rem;
  border-radius: var(--r-basis);
  margin: 1.25rem 1.5rem 0;
}

.contact__paneel > .formulier-status:first-child {
  margin-top: 1.5rem;
}

.formulier-status--gelukt {
  margin: 1.5rem;
  background: var(--salie-vlak);
  border: 1px solid color-mix(in srgb, var(--salie-tekst) 30%, transparent);
}

/* De aanvraag is de stroom door: het knooppunt sluit hem af.
   Alleen de kaart die main.js zelf invoegt krijgt komt-binnen; de
   server-variant (na een gewone POST) staat er meteen, want die mag
   nooit afhangen van een klasse die JavaScript nog moet zetten. */
.formulier-status__knoop {
  display: block;
  margin-bottom: 0.7rem;
}

html.anim .formulier-status--gelukt.komt-binnen {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--duur-basis) var(--ease-uit),
              transform var(--duur-basis) var(--ease-uit);
}

html.anim .formulier-status--gelukt.komt-binnen .formulier-status__knoop {
  scale: 0.4;
  transition: scale var(--duur-basis) var(--ease-uit) 0.2s;
}

html.anim .formulier-status--gelukt.komt-binnen.is-zichtbaar {
  opacity: 1;
  transform: none;
}

html.anim .formulier-status--gelukt.komt-binnen.is-zichtbaar .formulier-status__knoop {
  scale: 1;
}

.formulier-status--gelukt h3 {
  margin-bottom: 0.3em;
  color: var(--salie-tekst);
}

.formulier-status--gelukt p {
  color: var(--salie-tekst);
  font-size: var(--t-klein);
}

.formulier-status--fout {
  background: var(--steen);
  border: 1px solid var(--lijn);
}

.formulier-status--fout p {
  color: var(--inkt);
  font-size: var(--t-klein);
}

/* ------ 15 CTA, paginakoppen, WordPress-inhoud, feiten, procesbalk */

/* De afsluitende CTA op de subpagina's hangt aan een haarlijn in
   plaats van in een kaart met hoekjes. */
.cta-band {
  padding-top: clamp(2.25rem, 4.5vw, 3.25rem);
  border-top: 1px solid var(--lijn);
}

.cta-band > * {
  max-width: 40rem;
}

.cta-band h2 {
  margin-bottom: 0.4em;
}

.cta-band p {
  margin: 0 0 1.5em;
  max-width: 32rem;
  color: var(--inkt-body);
}

.cta-band__trust {
  margin: 1.1rem 0 0;
  color: var(--inkt-gedempt);
  font-size: var(--t-mini);
}

.paginakop__intro {
  max-width: var(--kolom-lees);
  font-size: var(--t-lead);
  color: var(--inkt-body);
}

/* De uitkomst van een case, direct onder de samenvatting in de
   paginakop. Dezelfde tekst als op de kaart in het overzicht, zodat wie
   doorklikt meteen ziet dat hij goed zit. */
.paginakop__slot {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--lijn);
  max-width: var(--kolom-lees);
  color: var(--inkt);
  font-size: var(--t-klein);
  font-weight: var(--gew-nadruk);
}

.terug-link {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* -------- De inhoud die uit de WordPress-editor komt

   Alleen op de casepagina's (page.php). De kop van die pagina staat vast
   in de code; alles hieronder wordt in WordPress getypt, dus hier krijgt
   de blokeditor-uitvoer dezelfde typografie als de rest van de site.
   Zonder dit blok zou een casepagina er anders uitzien dan de pagina
   waar hij vandaan komt. */

.wp-inhoud {
  max-width: var(--kolom-lees);
}

.wp-inhoud > * + * {
  margin-top: 1.1em;
}

.wp-inhoud h2 {
  margin-top: 2.25em;
  font-size: var(--t-h2);
}

.wp-inhoud h3 {
  margin-top: 2em;
  font-size: var(--t-h3);
  font-family: var(--font-basis);
  font-weight: var(--gew-nadruk);
}

.wp-inhoud :is(h2, h3):first-child {
  margin-top: 0;
}

.wp-inhoud :is(ul, ol) {
  padding-left: 1.25rem;
}

.wp-inhoud li + li {
  margin-top: 0.5em;
}

.wp-inhoud :is(img, video) {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-basis);
}

/* Brede afbeeldingen mogen buiten de leeskolom komen; smaller dan de
   tekst worden ze nooit, dat leest als een fout. */
.wp-inhoud :is(figure, .wp-block-image) {
  margin-block: 2rem;
}

.wp-inhoud .alignwide,
.wp-inhoud .alignfull {
  width: min(var(--omslag-breed), 100vw - 3rem);
  max-width: none;
  margin-inline: calc(50% - min(var(--omslag-breed), 100vw - 3rem) / 2);
}

.wp-inhoud figcaption {
  margin-top: 0.7rem;
  color: var(--inkt-gedempt);
  font-size: var(--t-mini);
}

.wp-inhoud blockquote {
  margin-block: 2rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--koper);
  font-size: var(--t-lead);
  color: var(--inkt);
}

.pagina-404 .hero__acties {
  margin-top: 1.6rem;
}

.juridisch h2 {
  font-size: var(--t-h3);
  font-family: var(--font-basis);
  font-weight: var(--gew-nadruk);
  margin-top: 2rem;
}

.juridisch h2:first-child {
  margin-top: 0;
}

.feiten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0;
  margin: 0;
  border-block: 1px solid var(--lijn);
}

.feiten__feit {
  padding: 1.15rem 1.5rem 1.15rem 0;
}

.feiten__feit + .feiten__feit {
  padding-left: 1.5rem;
  border-left: 1px solid var(--lijn-zacht);
}

.feiten__feit dt {
  font-size: var(--t-label);
  font-weight: var(--gew-label);
  letter-spacing: var(--sperring);
  text-transform: uppercase;
  color: var(--koper-tekst);
  margin-bottom: 0.3rem;
}

.feiten__feit dd {
  margin: 0;
  color: var(--inkt);
  font-weight: var(--gew-nadruk);
  font-size: var(--t-klein);
}

/* De procesbalk op de casepagina: vier fasen aan streepjes, zonder
   omranding per fase. */
.procesbalk {
  margin-top: 2.25rem;
}

.procesbalk__rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  color: var(--inkt);
  font-size: var(--t-klein);
  font-weight: var(--gew-nadruk);
}

.procesbalk__fase {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.procesbalk__pijl {
  width: 1.5rem;
  border-top: 1px solid var(--lijn);
}

/* De verbinding tussen twee fasen groeit mee met de fase erna, zodat
   de balk zich van links naar rechts aan elkaar rijgt. */
html.anim .procesbalk__rij .procesbalk__pijl {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duur-kort) var(--ease-lijn)
              calc(var(--reveal-stap, 0) * var(--stagger));
}

html.anim .procesbalk__rij.is-zichtbaar .procesbalk__pijl {
  transform: scaleX(1);
}

.procesbalk__tak {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 1rem 0 0 0.2rem;
  color: var(--inkt-gedempt);
  font-size: var(--t-klein);
}

.casebanner {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.casebanner .afbeelding-vak {
  --verhouding: 21 / 9;
}

/* ------------------------------------------------------ 16 Footer */

/* Licht, want het donkerblauwe vlak is al vergeven aan de werkwijze.
   Twee zware vlakken maken van de pagina een sandwich. */
.site-voet {
  position: relative;
  z-index: 2;
  background: var(--papier-zacht);
  border-top: 1px solid var(--lijn);
  padding: clamp(2.75rem, 5vw, 4rem) 0 0;
}

.site-voet__kolommen {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}

.logo--voet {
  margin: 0 0 0.8rem;
  color: var(--inkt);
  font-family: var(--font-kop);
  font-size: 1.4rem;
  font-weight: var(--gew-kop);
  letter-spacing: -0.03em;
}


.site-voet__merkzin {
  max-width: 22rem;
  color: var(--inkt-gedempt);
  font-size: var(--t-klein);
}

/* Verklaart het fotoshoot.nl-adres in de contactkolom voordat de bezoeker
   erover struikelt. Stond eerder in de onderregel, dus pas erna. Kan weg
   zodra er een eigen domein en e-mailadres zijn. */
.site-voet__herkomst {
  max-width: 22rem;
  margin: 0.5rem 0 0;
  color: var(--inkt-gedempt);
  font-size: var(--t-mini);
}

.site-voet__kop {
  margin: 0 0 1rem;
  font-size: var(--t-label);
  font-weight: var(--gew-label);
  letter-spacing: var(--sperring);
  text-transform: uppercase;
  color: var(--inkt);
}

.site-voet ul {
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.site-voet a {
  color: var(--inkt-body);
  text-decoration: none;
  font-size: var(--t-klein);
}

.site-voet a:hover {
  color: var(--inkt);
  text-decoration: underline;
  text-underline-offset: 0.28em;
}

.site-voet__onder {
  padding-block: 1.3rem;
  border-top: 1px solid var(--lijn-zacht);
}

.site-voet__onder p {
  margin: 0;
  color: var(--inkt-gedempt);
  font-size: var(--t-mini);
}

/* -------------------------------------------------- 17 Responsief */

@media (max-width: 1080px) {
  .sectiekop {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.75rem;
  }

  .sectiekop__naast {
    justify-self: start;
  }

  .uitgelicht {
    grid-template-columns: 1fr;
  }

  .case-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* De video naast de handwerklijst wordt te smal om nog iets te zeggen;
     hij gaat eronder staan en houdt zijn eigen maat. */
  .handwerk {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 3rem);
  }

  .handwerk__beeld {
    justify-self: start;
    width: 100%;
    max-width: 34rem;
  }

  .handwerk__beeld figcaption {
    text-align: left;
  }

  .tijdlijn {
    grid-template-columns: repeat(2, 1fr);
  }

  .tijdlijn::before {
    right: 55%;
  }

  .over {
    grid-template-columns: 1fr;
  }

  .over .afbeelding-vak {
    max-width: 22rem;
  }

  .faq-blok {
    grid-template-columns: 1fr;
  }

  .faq-blok__kop p {
    max-width: var(--kolom-lees);
  }
}

@media (max-width: 880px) {
  .site-kop__nav,
  .site-kop__cta {
    display: none;
  }

  .menu-knop {
    display: flex;
  }

  html:not(.js) .site-kop__nav {
    display: block;
    width: 100%;
  }

  html:not(.js) .site-kop__balk {
    flex-wrap: wrap;
    padding-block: 0.9rem;
  }

  html:not(.js) .site-kop__nav ul {
    flex-wrap: wrap;
    gap: 0.9rem 1.25rem;
  }

  .contact {
    grid-template-columns: 1fr;
  }

  /* Smal scherm: de foto wordt een banner boven de tekst en de waas
     is dan niet meer nodig. */
  .hero__foto {
    position: relative;
    width: 100%;
    height: clamp(13rem, 52vw, 20rem);
  }

  .hero__waas {
    display: none;
  }

  .hero__binnen {
    padding-block: clamp(2.25rem, 5vw, 3rem) clamp(2.75rem, 6vw, 3.5rem);
  }
}

@media (max-width: 760px) {
  .feiten {
    grid-template-columns: 1fr;
  }

  .feiten__feit + .feiten__feit {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--lijn-zacht);
  }

  .site-voet__kolommen {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .tijdlijn {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .tijdlijn::before {
    display: none;
  }

  .hero__acties {
    gap: 1.1rem 1.5rem;
  }

  .hero__acties .knop {
    width: 100%;
  }

  .sectie {
    padding-block: clamp(3rem, 10vw, 4rem);
  }

  .sectie--ruim {
    padding-block: clamp(3.5rem, 11vw, 5rem);
  }

  .statregel {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* Telefoonbreedte: de kaarten blijven naast elkaar, maar worden een
   tegel. Twee kolommen laten van zes cases in één blik zien dat het werk
   verschilt; onder elkaar was dat zes keer scrollen naar hetzelfde.

   Drie ingrepen maken die smalle kolom leesbaar. De illustratie komt uit
   de rechterbovenhoek en gaat boven de tekst staan, zodat soort en titel
   de volle breedte krijgen in plaats van de helft: de 3rem die ze rechts
   vrijhielden is hier een derde van de kaart. De samenvatting vervalt,
   want die werd een kolom van vijftien tekens breed; wat de case was
   blijkt uit soort, titel en uitkomst, en het verhaal staat één tik
   verderop achter dezelfde link. En de titel mag afbreken, want
   "studioplanning" en "Boekingsstroom" passen hier net niet op een regel.

   De typografische schaal blijft ongemoeid: nergens op de site verspringt
   een tekstgrootte met het scherm, en dat blijft zo. */
@media (max-width: 560px) {
  .case-raster {
    gap: 0.75rem;
  }

  .case-kaart {
    padding: 0.9rem;
    overflow-wrap: break-word;
  }

  .case-kaart .illu {
    position: static;
    margin-bottom: 0.55rem;
  }

  .case-kaart__soort,
  .case-kaart__titel {
    padding-right: 0;
  }

  /* "Systemen verbinden" en "Programma op maat" lopen hier over twee
     regels en "Rapportage" over één. Zonder ondergrens begint de titel
     van de ene kaart dan hoger dan die van zijn buurman. Twee regels van
     dit lettertje, uit de tokens gerekend, zodat de koppen in een rij op
     dezelfde hoogte starten. De onderkant deed dat al: de uitkomst hangt
     aan een auto-marge. */
  .case-kaart__soort {
    min-height: calc(2em * var(--lh-body));
  }

  /* Afbreken is hier nodig: "studioplanning" en "Boekingsstroom" passen
     niet op één regel. Maar de automaat hakt te graag, en dan staat er
     "Ads-rap-port" of "Herinnerin-gen". Dus: alleen woorden vanaf tien
     tekens, minstens vijf ervoor en vier erna. Strenger kan niet: op vijf
     erna blijft er voor "studioplanning" geen breekpunt over en valt hij
     terug op overflow-wrap, die er zonder koppelteken doorheen hakt. */
  .case-kaart__titel {
    hyphens: auto;
    hyphenate-limit-chars: 10 5 4;
  }

  .case-kaart__kort {
    display: none;
  }

  .case-kaart__slot {
    margin-bottom: 0.5rem;
  }
}

/* ------------------------ 18 Beweging: reveals en reduced motion
   Alle beweging zit achter html.anim. Die klasse zet header.php alleen
   zonder reduced-motion-voorkeur, en de noodrem haalt hem weer weg als
   beweging.js zich niet meldt. Verbergen gebeurt daarom uitsluitend
   hier: zonder JavaScript staat de hele pagina gewoon op het scherm.

   Sectiegebonden beweging staat bij de sectie zelf: 08 koppelbalk,
   12 tijdlijn, 15 formulier, 16 procesbalk. */

html.anim [data-reveal]:not([data-reveal="groep"]) {
  opacity: 0;
  transition: opacity var(--duur-reveal) var(--ease);
  transition-delay: calc(var(--reveal-stap, 0) * var(--stagger));
}

html.anim [data-reveal]:not([data-reveal="groep"]).is-zichtbaar {
  opacity: 1;
}

/* Bij een groep blijft de ouder staan en komen de kinderen in
   leesvolgorde binnen. beweging.js nummert ze met --reveal-stap. */
html.anim [data-reveal="groep"] > * {
  opacity: 0;
  transition: opacity var(--duur-reveal) var(--ease);
  transition-delay: calc(var(--reveal-stap, 0) * var(--stagger));
}

html.anim [data-reveal="groep"].is-zichtbaar > * {
  opacity: 1;
}

/* Vangnet: gaat de voorkeur halverwege de sessie aan, of komt er een
   gecachete pagina met html.anim erin binnen, dan staat alles er. */
@media (prefers-reduced-motion: reduce) {
  html.anim [data-reveal]:not([data-reveal="groep"]),
  html.anim [data-reveal="groep"] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Op papier hoort niets verborgen te zijn. */
@media print {
  html.anim [data-reveal]:not([data-reveal="groep"]),
  html.anim [data-reveal="groep"] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}