/* ================================================================
   Webwaarts.com design system
   Archivo voor alles. De micro-labels stonden eerst in JetBrains Mono, maar dat
   leest als een typemachine en dus als techniek, terwijl Webwaarts juist geen
   techniekverhaal verkoopt. Ze onderscheiden zich nu door kapitalen, extra
   letterafstand en meer gewicht in plaats van door een tweede lettertype.
   Inkt #111111 · Papier #ECECEA · Gebroken wit #F3F1EB · Amber #F5B301 / #C98F00 (op wit)
================================================================ */

:root{
  --ink:        #111111;
  --ink-2:      #1b1b1a;
  --paper:      #ECECEA;
  /* Gebroken wit. De achtergrond van een vel dat licht moet zijn zonder wit te
     worden: het portfolio (.werk-vel op ons-werk.html) staat erop. Stond tot
     11-09-2026 op #F7F6F3 en dat las als zuiver wit; op verzoek van Benjamin is
     het nu echt gebroken. Ligt tussen --white en --paper in en is warm van kant,
     zodat het bij de amberen gloed op dat vel past. Een nieuwe pagina die een
     licht vel wil dat niet de grijzige --paper is, neemt deze. */
  --paper-hi:   #F3F1EB;
  --white:      #FFFFFF;
  --amber:      #F5B301;
  --amber-deep: #C98F00;
  --ink-72:     rgba(17,17,17,.72);
  /* --ink-60 stond op .62 en droeg vrijwel alle lopende tekst. Hij is nu nergens
     meer de kleur van een alinea; wat ervan over is, is de placeholder in het
     contactformulier. Daarom staat hij gelijk aan --ink-72. */
  --ink-60:     rgba(17,17,17,.72);
  --ink-40:     rgba(17,17,17,.38);
  --ink-14:     rgba(17,17,17,.14);
  --paper-70:   rgba(236,236,234,.72);
  --paper-45:   rgba(236,236,234,.46);
  --paper-16:   rgba(236,236,234,.16);

  /* ---- Tekstrollen ----
     Twee rollen in plaats van een losse grijswaarde per plek. Ze worden verderop
     omgezet binnen .on-dark, zodat dezelfde rol op een zwart vel hetzelfde doet
     als op een wit vel. Dat liep eerst uiteen: grijs op wit haalde 5,3:1 en grijs
     op inkt 8,6:1, dus de witte vellen lazen zwakker dan de zwarte terwijl ze op
     dezelfde pagina staan.
     --tekst       inkt of papier, vol. Alles wat je leest om de inhoud te
                   snappen staat hierop, zonder uitzondering en op een maat.
     --tekst-stil  micro-tekst: labels, tags, bedragen, tellingen, bijschriften.
                   Nooit een alinea, nooit een zin die je moet lezen. */
  --tekst:       var(--ink);
  --tekst-stil:  var(--ink-72);

  --radius-xl:  40px;
  --radius-lg:  28px;
  --radius-md:  18px;
  --radius-sm:  10px;

  --ease:       cubic-bezier(0.16,1,0.3,1);
  --ease-soft:  cubic-bezier(0.22,1,0.36,1);

  --wrap: 1240px;

  /* ---- De vaste kopbalk ----
     --balk is de hoogte van de kopbalk. Elke pagina zonder hero begint eronder:
     .zonder-hero rekent ermee, en .doen op werk.html rekent met diezelfde som.
     Twee waarden in de clamp, want onder 1080px vervallen de navigatie en de
     amberknop en wordt de balk lager.
     Hier stonden tot 11-09-2026 ook --hero-wit en --hero-kop-pad, de maten van
     het eerste scherm van de informatiepaginas. Die paginas hebben sinds die dag
     geen hero meer; zie het blok "Paginas zonder hero" onderaan dit bestand. */
  --balk: clamp(87px, 7.4vw, 106px);
  /* De kleur van de matglazen kopbalk in zijn dekkende staat. Hij hoort gelijk te
     zijn aan het lichte vel waar hij op die pagina overheen ligt, anders tekent
     zich een band af over de bovenkant van de pagina. Standaard is dat --paper,
     want daar staat elk .sheet-light en .sheet-white vel op. Een pagina met een
     ander licht vel zet hem onderaan dit bestand om, bij "De kopbalk per pagina".
     De .82 is de doorzichtigheid: met de blur erachter blijft de balk voelbaar
     als balk zodra er iets onderdoor schuift. */
  --balk-glas: rgba(236,236,234,.82);
  --gutter: clamp(24px, 5vw, 72px);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
/* Herladen midden in de vertelling op de homepage: de pagina blijft onzichtbaar tot
   verhaal.js de scrollstand heeft teruggezet (klasse gezet in de head van index.html,
   weggehaald in verhaal.js; vangnet 2,5s). Het papier zelf blijft zichtbaar. */
html.is-herstellend body{ visibility: hidden; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
ul{ list-style: none; margin:0; padding:0; }

::selection{ background: var(--amber); color: var(--ink); }

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- Type scale ---- */
h1, h2, h3, h4{
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
h1{ font-size: clamp(2.34rem, 5.04vw, 4.86rem); }
h2{ font-size: clamp(1.8rem, 3.6vw, 3.24rem); }
h3{ font-size: clamp(1.22rem, 1.98vw, 1.71rem); }

p{ margin:0; }
/* ---- Lopende tekst ----
   Een kleur voor alle lopende tekst: volle inkt op een licht vel, vol papier op
   een zwart vel. Nooit grijs.

   EEN MAAT PER VEL. Sinds 09-09-2026 staat op de vertellende vellen (de
   voorstelsectie van de homepage, over-ons.html en de case op werk.html) alle
   lopende tekst op dezelfde maat: .tekst. Onder een kop eerst een grote alinea
   en daarna kleine alinea's zetten maakte elk vel druk, want dan begint elke
   sectie met hetzelfde trapje. Het verschil dat overblijft is .aanzet: de
   eerste zin vet. Dat is genoeg om in te stappen.
   - .tekst is de gewone alinea, op de leesmaat. Dit is de standaard; kies deze
     tenzij er een reden is om af te wijken.
   - .lede is nog maar een ding: de enkele regel onder de kop van een CTA-band
     (werk.html, over-ons.html, faq.html) en de naregel bij het contactformulier.
     Daar staat maar een alinea, dus er is geen groot-naast-klein. Zet .lede
     nooit als openingsalinea boven een reeks .tekst-alinea's.

   .aanzet is de eerste zin van een alinea, vet. De teksten zijn zo geschreven
   dat de eerste zin de alinea samenvat ("Hij zei ja.", "Dan bouwen we, en dat
   gaat hard."), dus die zin mag naar voren. Wie scant, leest alleen de aanzetten
   en heeft het verhaal; wie leest, krijgt per alinea een haakje. Het is een
   gewone zin in de alinea zelf en geen losse regel erboven, dus het botst niet
   met de regel tegen subkoppen. Alleen de eerste zin, nooit een losse term
   midden in de tekst. */
.lede,
.tekst,
.faq-a-in p{
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.58;
  font-weight: 400;
  color: var(--tekst);
  max-width: 48ch;
}
.lede{
  font-size: clamp(1.2rem, 1.72vw, 1.6rem);
  line-height: 1.42;
  font-weight: 500;
  letter-spacing: -0.012em;
  max-width: 40ch;
}
.aanzet{ font-weight: 700; }
.lede .aanzet{ font-weight: 800; letter-spacing: -0.018em; }

/* ---------- links in lopende tekst ----------
   Globaal staat `a` op color: inherit zonder onderstreping, en dat klopt voor
   deze site: verreweg de meeste links zijn knoppen, navigatie, kaarten of
   panelen, en die dragen hun eigen vorm al. In een alinea werkt dat juist
   averechts, want dan is er niets meer aan te zien dat er een link staat. Op
   het uitlegblok van de homepage viel dat meteen op: vier verwijzingen naar
   andere pagina's die als gewone tekst stonden.

   Amber onderstreping op wat afstand van de basislijn, en iets zwaarder gezet
   dan de zin eromheen, zodat hij opvalt zonder de alinea te breken. Op een
   donker vel wordt het volle amber gebruikt in plaats van het diepe, want dat
   laatste zakt weg tegen de inkt. */
.lede a:not(.btn),
.tekst a:not(.btn),
.uitleg-tekst a:not(.btn),
.faq-a a:not(.btn){
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color .35s var(--ease), text-decoration-color .35s var(--ease);
}
.lede a:not(.btn):hover,
.tekst a:not(.btn):hover,
.uitleg-tekst a:not(.btn):hover,
.faq-a a:not(.btn):hover{
  color: var(--amber-deep);
  text-decoration-color: var(--amber-deep);
}
.on-dark .lede a:not(.btn):hover,
.on-dark .tekst a:not(.btn):hover{ color: var(--amber); text-decoration-color: var(--amber); }
@media (prefers-reduced-motion: reduce){
  .lede a:not(.btn), .tekst a:not(.btn), .uitleg-tekst a:not(.btn){ transition: none; }
}

.mono{
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.eyebrow{
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.on-dark .eyebrow{ color: var(--paper); }
.eyebrow::before{
  content:'';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
  display: inline-block;
}

/* ================= Buttons ================= */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 1em 1.7em;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  border: 1.5px solid transparent;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  white-space: nowrap;
}
.btn-primary{
  background: var(--amber);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(17,17,17,.05), 0 14px 30px -14px rgba(245,179,1,.55);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 1px 0 rgba(17,17,17,.05), 0 20px 36px -14px rgba(245,179,1,.7); }
.btn-ghost{
  background: transparent;
  border-color: var(--ink-14);
  color: var(--ink);
}
.btn-ghost:hover{ border-color: var(--ink); transform: translateY(-2px); }
.on-dark .btn-ghost{ border-color: rgba(236,236,234,.24); color: var(--paper); }
.on-dark .btn-ghost:hover{ border-color: var(--paper); }
/* De pijl staat in rust wat dichter tegen het label aan dan de gap van .btn
   toelaat: hij heeft dan ruimte om naar rechts te schuiven zonder dat de knop
   aan die kant te ruim wordt. */
.btn .arrow{ transition: transform .4s var(--ease); display:inline-block; margin-left: -.22em; }
/* Alleen naar rechts. De pijl wijst naar rechts, dus schuin omhoog schuiven
   klopte niet met waar hij heen wijst. */
.btn:hover .arrow{ transform: translateX(4px); }

/* Het label van een knop. Hier stonden de karakter-kolommen van de oude
   letter-voor-letter hover; die is eruit, de knop beweegt nu alleen als geheel
   (lift, schaduw, pijl). */
.btn-stagger .label{ display: inline-block; }

/* ================= Header ================= */
/* De hoogte van de balk staat hier als variabele omdat de tekstlaag van de
   vertelling eronderdoor moet blijven; zie .punt-tekst. Twee waarden, want
   onder de 1080px vervallen de navigatie en de gele knop en wordt hij lager.
   Gemeten, niet geschat: 89,8px en 70,5px in de gescrolde staat. */
:root{ --hdr-h: 90px; }
#hdr-root{ position: relative; z-index: 60; }
.hdr{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  padding: 22px 0;
  transition: background .5s var(--ease), padding .4s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Doorzichtig zolang de vertelling onder de balk door loopt: daar hoort de
   koptekst op het beeld te liggen en zou een matglazen balk de tekening
   halverwege afsnijden. Vanaf het laatste hoofdstuk (de Blokhuis-hero, met de
   CTA-knop eronder) zet layout.js .is-solid
   en komt het matglas terug, want vanaf daar ligt er gewone tekst onder de balk
   en moeten de links leesbaar en aanklikbaar blijven. Pagina's zonder
   vertelling krijgen .is-solid meteen. De onderlijn blijft weg, die hoort bij
   de lijnen die op 28-08 van de site zijn gehaald. */
.hdr.is-scrolled{
  padding: 14px 0;
}
/* Eén matglas voor de hele site: ook boven een donkere sectie is de balk licht,
   met dezelfde doorzichtigheid als boven papier. De donkere variant
   (rgba(17,17,17,.72)) is eruit. Daarmee moet de inhoud van de balk daar wel
   terug naar inkt: .hdr.on-dark zet letters, hamburger en knoprand op
   papierkleur, en dat is op licht matglas niet te lezen. Alleen in de gescrolde,
   dekkende staat; boven de vertelling en boven aan de pagina blijft de balk
   doorzichtig en houdt hij zijn witte letters op het donkere beeld. */
/* Het matglas hangt aan .is-solid alleen, niet meer aan .is-scrolled erbij. Op
   elke pagina zonder vertelling staat .is-solid er meteen op, dus daar is de balk
   vanaf de eerste pixel dekkend in plaats van pas na twaalf pixels scrollen.
   Alleen over de vertelling op de homepage blijft hij doorzichtig; .is-scrolled
   regelt daar nog wel de hoogte van de balk. */
.hdr.is-solid{
  background: var(--balk-glas);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
/* Het vervaagvel (19-09-2026, weer verwijderd) loste de "foto licht op"-bug
   niet zelf op: dat deed de HDR_MARGE-timingfix in layout.js (de balk wordt
   nu ruim vóór de foto er is al dekkend/wazig). Het vel zelf liet alleen een
   eigen zichtbare rand achter, "voegt niks toe" (Benjamin/Stijn,
   19-09-2026), dus weg. */
.hdr.is-solid.on-dark,
.hdr.is-solid.on-dark .wordmark,
.hdr.is-solid.on-dark .hdr-nav a{ color: var(--ink); }
.hdr.is-solid.on-dark .hdr-menu-btn span{ background: var(--ink); }
.hdr.is-solid.on-dark .btn-ghost{ border-color: var(--ink-14); color: var(--ink); }
.hdr.is-solid.on-dark .btn-ghost:hover{ border-color: var(--ink); }
.hdr.on-dark{ color: var(--paper); }
.hdr.on-dark .wordmark{ color: var(--paper); }
.hdr.on-dark .hdr-nav a{ color: var(--paper); }
.hdr.on-dark .hdr-menu-btn span{ background: var(--paper); }
.hdr.on-dark .btn-ghost{ border-color: rgba(236,236,234,.28); color: var(--paper); }
.hdr.on-dark .btn-ghost:hover{ border-color: var(--paper); }
/* De drie groepen (logo, navigatie, knoppen) mogen elkaar nooit raken. De gap is
   hier de ondergrens: space-between verdeelt wat er overblijft, maar zodra de rij
   vol loopt houdt de gap ze alsnog uit elkaar. Stond er niet, en daardoor plakte
   "Wat wij doen" vanaf vijf navigatie-items tegen het woordmerk aan. */
/* De balk is breder dan de tekstkolom: 120px extra aan elke kant. Zo staan de
   belknop en de gele knop verder naar rechts (en het woordmerk iets verder naar
   links) en heeft de navigatie ertussen ruimte voor "Met wie werken wij" op
   volle grootte. Benjamin (15-09-2026): "zet de plan een afspraak knop en bel knop
   meer naar rechts zodat de header nav namen groter kunnen". */
.hdr-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: clamp(24px, 3vw, 56px);
  max-width: calc(var(--wrap) + 240px); margin:0 auto; padding: 0 var(--gutter);
}
.hdr-logo{ display:flex; align-items:center; }
.hdr-logo img{ height: 22px; width:auto; }
.wordmark{
  font-weight: 900; font-size: 1.3rem; letter-spacing: -0.02em;
  color: var(--ink); display:inline-flex; align-items:baseline;
}
.wordmark .dot, .hdr-nav a .dot, .nav-big a .dot{ color: var(--amber); }
.ftr .wordmark{ color: var(--paper); }
/* De goot krimpt mee, want de navigatie draagt sinds "Veelgestelde vragen" vijf
   items naast een logo, een belknop en een gele knop. Op de volle breedte blijft
   het 40px; daaronder loopt hij terug tot 24px in plaats van dat de rij tegen de
   knoppen aan schuift. */
/* De onderlinge ruimte in de rij is kleiner dan de ruimte om de rij heen. Stond
   andersom (40px tussen de items, 16px tot het logo), waardoor de navigatie niet
   als een groep las maar als losse woorden waar het woordmerk er een van leek. */
.hdr-nav{ display:flex; align-items:center; gap: clamp(20px, 2vw, 30px); }
.hdr-nav a{
  /* Weer 16px sinds de balk 240px breder is dan de tekstkolom (15-09-2026). Nooit
     afbreken: een item op twee regels maakt de balk hoger en de rij onleesbaar. */
  font-size: 1rem; font-weight: 600; color: var(--ink);
  position: relative; white-space: nowrap;
}
.hdr-nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-5px; height:2px;
  background: var(--amber); transition: right .35s var(--ease);
}
.hdr-nav a:hover::after, .hdr-nav a.is-active::after{ right:0; }
.hdr-actions{ display:flex; align-items:center; gap: 12px; }
.hdr-call{ display:inline-flex; align-items:center; gap:8px; padding: .85em 1.2em; }
.hdr-call svg{ flex:none; }
.hdr-menu-btn{
  display:none; background:none; border:none; flex-direction:column; gap:5px; padding:6px;
}
.hdr-menu-btn span{ width:22px; height:2px; background:var(--ink); display:block; }

/* Onder 1320 is de balk te smal voor vijf navigatie-items (met "Met wie werken
   wij") naast twee knoppen met tekst. De belknop valt daar terug op alleen het
   hoorntje; hij houdt zijn aria-label, dus een schermlezer hoort nog steeds wie
   er gebeld wordt. Dat scheelt ruim tachtig pixels. */
@media (max-width: 1320px){
  .hdr-call{ padding: .8em; }
  .hdr-call-label{ display:none; }
}

/* Was 900px. Met vijf navigatie-items past de balk daaronder niet meer fatsoenlijk
   naast de knoppen, dus valt hij eerder terug op het hamburgermenu (de overlay
   toont dezelfde NAV_ITEMS, dus er gaat niets verloren). */
@media (max-width: 1080px){
  :root{ --hdr-h: 71px; }   /* nav en gele knop vervallen hieronder, dus lager */
  .hdr-nav{ display:none; }
  .hdr-menu-btn{ display:flex; }
  .hdr-actions .btn-primary{ display:none; }
  .hdr-call{ padding: .7em; }
  .hdr-call-label{ display:none; }
}

/* ================= Nav overlay ================= */
.nav-overlay{
  position: fixed; inset: 0; z-index: 90;
  background: var(--paper);
  color: var(--ink);
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s;
  display:flex; flex-direction:column;
}
.nav-overlay.is-open{ opacity:1; visibility:visible; }
.nav-overlay .wordmark{ color: var(--ink); }
.nav-overlay-top{ display:flex; align-items:center; justify-content:space-between; padding: 22px var(--gutter); }
.nav-overlay-top img{ height: 20px; }
.nav-close{ background:none; border:none; color:var(--ink); position:relative; width:40px; height:40px; }
.nav-close span{ position:absolute; left:6px; right:6px; top:50%; height:2px; background:var(--ink); }
.nav-close span:first-child{ transform: rotate(45deg); }
.nav-close span:last-child{ transform: rotate(-45deg); }
.nav-overlay-body{ flex:1; display:flex; flex-direction:column; justify-content:center; padding: 0 var(--gutter); }
.nav-big{ display:flex; flex-direction:column; }
.nav-big a{
  /* Alle vijf even groot en elk op een regel (19-09-2026). Met 2.4rem als bodem braken
     "Met wie werken wij" en "Veelgestelde vragen" op een telefoon over twee regels en de
     andere drie niet. De langste is ruim 11 keer de lettergrootte breed, dus 7.2vw past
     tot een breedte van 320px; nowrap houdt hem op een regel, ook op de smalste schermen. */
  font-size: clamp(1.55rem, 7.2vw, 5rem);
  white-space: nowrap;
  font-weight: 900; letter-spacing: -0.03em;
  padding: 10px 0;
  display:flex; align-items:center; justify-content:space-between;
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), color .3s;
}
.nav-overlay.is-open .nav-big a{ opacity:1; transform:none; }
.nav-big a:hover{ color: var(--amber); }
.nav-overlay-foot{
  padding: 26px var(--gutter) 34px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-family:'Archivo', -apple-system, BlinkMacSystemFont, sans-serif; font-weight:600; letter-spacing:.06em; font-size:.92rem; color: var(--ink-72);
}
.nav-overlay-foot a{ color: var(--ink); }

/* ================= Sheet sections (gelaagdheid) ================= */
.sheet{
  position: relative;
  z-index: 2;
}
.sheet-light{
  background: var(--paper);
  color: var(--ink);
}
.sheet-dark{
  background: var(--ink);
  color: var(--paper);
}
/* De tekstrollen omgekeerd. Papier op inkt oogt zwaarder dan inkt op papier, dus
   de zachte rol mag hier verder van de leeskleur af staan dan op een licht vel. */
.on-dark{
  --tekst:       var(--paper);
  --tekst-stil:  var(--paper-70);
}
.sheet-raised{
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  margin-top: -40px;
  box-shadow: 0 -40px 70px -30px rgba(0,0,0,.28);
}
/* Sinds 2026-09-10 geen zuiver wit meer maar de papierkleur, dezelfde als onder de
   hero van de homepage (.gloedbaan draagt daar background-color: var(--paper), de
   hero zelf is doorzichtig). Op verzoek van Benjamin: "vervang alle witte
   achtergrond door de kleur op de homepage hero achtergrond." Daarmee is dit vel
   gelijk aan .sheet-light; de twee klassen blijven los bestaan omdat de pagina's ze
   allebei noemen en het kleurritme erop gebouwd is.
   --white blijft wel bestaan: het browservenster op werk.html moet zuiver wit
   blijven, want dat beeldt een echte site in een browser af. */
.sheet-white{ background: var(--paper); }
/* Kleurwissel binnen een doorlopende stapel. .sheet-raised maakt een nieuw vel dat
   met ronde hoeken over het vorige schuift; dit is het tegenovergestelde: het vel
   loopt door en wisselt alleen van kleur, met een kaarsrechte naad. Op werk.html
   gaat wit zo naar inkt en weer terug zonder dat de pagina in hoofdstukken uiteen
   valt. De ronde naad is daar voorbehouden aan de echte omslag onderaan. */
.sheet-naad{ border-radius: 0; margin-top: 0; box-shadow: none; }
/* Alleen boven en onder. Stond hier als `padding: X 0`, en die shorthand zette
   de zijkanten op nul; omdat .sheet-pad na .wrap in dit bestand staat, won hij en
   verloor elk vel zijn goot. Boven 1240px viel dat niet op, want dan houdt de
   max-width van .wrap zelf al marge over, maar op alles daaronder stond de tekst
   tegen de schermrand. padding-block raakt de zijkanten niet aan. */
.sheet-pad{ padding-block: clamp(65px, 9.9vw, 133px); }

/* ================= Reveal / parallax ================= */
[data-reveal]{
  opacity: 0;
  transform: translateY(var(--reveal-y, 34px)) scale(var(--reveal-scale, 1));
  transition: opacity 1.05s var(--ease), transform 1.05s var(--ease);
}
/* Alleen opacity en transform. Hier stond tot 09-09-2026 ook `max-width: 1078px`,
   per ongeluk via de bewerklaag ingeschreven (het is precies de .wrap-breedte op
   een bepaald scherm, dus een gesleepte waarde). Die regel is 0,2,0 en won
   daarmee van elke leesmaat op een enkele klasse: zodra een alinea met
   data-reveal in beeld kwam, verloor hij zijn max-width en rekte hij op tot de
   volle kolom. Zet hier nooit iets anders dan de entree zelf in. */
[data-reveal].is-visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

.word-wrap{ overflow: hidden; display: inline-block; }
.word{
  display: inline-block;
  transform: translateY(110%);
  transition: transform .9s var(--ease);
}
.is-visible .word{ transform: none; }

[data-parallax]{ will-change: transform; }

/* ================= Layout helpers ================= */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,3vw,48px); }
.grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--ink-14); }
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-4{ grid-template-columns: 1fr; }
}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap: 40px;
  margin-bottom: clamp(36px,5.4vw,68px);
}
@media (max-width: 760px){
  .section-head{ flex-direction:column; align-items:flex-start; gap:18px; }
}

.social-icon{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(245,179,1,.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--amber-deep);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.social-icon:hover{ background: var(--amber); color: var(--ink); transform: translateY(-2px); }
/* ================= Werk / case cards ================= */
.werk-card{ display:block; }
.werk-shot{
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/10;
  background: var(--ink-2);
}
.werk-shot img{
  width:100%; height:100%; object-fit: cover; object-position: top;
  transition: transform 1.1s var(--ease);
}
.werk-card:hover .werk-shot img{ transform: scale(1.045); }
.werk-shot::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.35), transparent 45%);
}
.werk-chrome{
  position:absolute; top:14px; left:16px; display:flex; gap:6px; z-index:2;
}
.werk-chrome span{ width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,.5); }
.werk-shot.is-upcoming img{ filter: grayscale(.5) brightness(.6); }
.werk-upcoming{
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  text-align: center;
  background: linear-gradient(rgba(10,10,9,.15), rgba(10,10,9,.5));
}
.werk-upcoming-text{
  font-weight: 900; letter-spacing: -0.02em; line-height: 1.05;
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  color: var(--paper);
}
.werk-meta{ display:flex; justify-content:space-between; align-items:baseline; margin-top: 20px; }
.werk-meta h3{ font-size: 1.3rem; }
.werk-meta .tag{ font-family:'Archivo', -apple-system, BlinkMacSystemFont, sans-serif; font-weight:600; letter-spacing:.06em; font-size:.9rem; color: var(--tekst-stil); text-align:right; }
.werk-desc{ margin-top: 10px; color: var(--tekst); max-width: 54ch; font-size: .96rem; line-height: 1.6; }

/* ================= Photo placeholders (branded gradient) ================= */
.ph{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(245,179,1,.24), transparent 55%),
    radial-gradient(90% 110% at 100% 100%, rgba(245,179,1,.10), transparent 60%),
    linear-gradient(155deg, #1c1c1a 0%, #111111 62%, #0b0b0a 100%);
}
.ph::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(236,236,234,.05) 0 1px, transparent 1px 26px);
  mix-blend-mode: overlay;
}
.ph-tag{
  position:absolute; left:18px; bottom:16px;
  font-family:'Archivo', -apple-system, BlinkMacSystemFont, sans-serif; font-weight:600; letter-spacing:.08em; font-size:.85rem;
  color: rgba(236,236,234,.78);
  display:flex; align-items:center; gap:8px;
  letter-spacing:.04em;
}
.ph-tag::before{ content:'◎'; color: var(--amber); }

/* ---- Echte teamfoto (vervangt .ph zodra er een foto is) ---- */
.team-photo{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--ink-2);
  color: var(--paper);
}
.team-photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 0;
}
.team-photo::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,.08) 55%, transparent 75%);
  pointer-events: none;
}
.team-photo > div{ position: relative; z-index: 2; }

/* ---- Duo-foto: twee portretten in een kader, ieder op zijn eigen helft ----
   Geschreven voor de contactpagina, daar uiteindelijk niet gebruikt; staat nu
   in de CTA-band van faq.html. De bronbestanden zijn 1000x1250 (4:5) en elke
   helft is precies 4:5, dus object-fit heeft niets weg te snijden. */
.contact-duo{
  position: relative;
  overflow: hidden;
  display: flex;
}
.contact-duo img{
  width: 50%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.contact-duo::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.1) 55%, transparent 75%);
  pointer-events: none;
}
.contact-duo-caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 28px;
}
.contact-duo{ margin: 0; }

/* ---- CTA-band met de twee portretten ernaast (faq.html) ----
   Alleen deze band; .cta-band zelf blijft ongemoeid, want werk.html en
   over-ons.html gebruiken hem zonder beeld. */
.cta-met-beeld{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: clamp(36px, 4.5vw, 72px);
  align-items: center;
}
.cta-met-beeld .contact-duo{
  /* Twee helften van 4:5 naast elkaar: 2 x 0.8 = 1.6, oftewel 8/5. */
  aspect-ratio: 8 / 5;
  border-radius: var(--radius-lg);
}
.cta-met-beeld .contact-duo-caption{
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: .95rem;
  color: var(--paper);
}
/* Onder 860px een kolom. De figure staat al na de tekst in de bron, dus het
   beeld belandt vanzelf onder de knoppen; daar is geen order voor nodig. */
@media (max-width: 860px){
  .cta-met-beeld{ grid-template-columns: minmax(0, 1fr); }
}

/* ================= Zigzag proces-tijdlijn (DOOD, 18-09-2026) =================
   Deze klassen stonden hier zonder dat één pagina ze gebruikte; de bijbehorende
   module in layout.js stond er ook nog. Op 18-09-2026 is de tijdlijn op werk.html
   gebouwd op dezelfde gedachte (gemeten stippen, een gebogen pad dat met de scroll
   volloopt), maar met eigen namen en een eigen meting: zoek op "De tijdlijn"
   verderop in dit bestand. Dit blok mag weg zodra iemand zeker weet dat de kaartvorm
   hieronder niet terugkomt. */
.zigzag-wrap{
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}
.zigzag-svg{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.zigzag-track{
  fill: none;
  stroke: var(--ink-14);
  stroke-width: 2;
}
.on-dark .zigzag-track{ stroke: rgba(236,236,234,.18); }
.zigzag-progress{
  fill: none;
  stroke: var(--amber);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset .1s linear;
}
.zigzag-step{
  position: relative;
  display: flex;
  padding: 30px 0;
}
.zigzag-step + .zigzag-step{ margin-top: 26px; }
.zigzag-step.side-left{ justify-content: flex-start; }
.zigzag-step.side-right{ justify-content: flex-end; }
.zigzag-card{
  position: relative;
  z-index: 2;
  width: min(420px, 84%);
  background: var(--paper-hi);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: 0 24px 44px -30px rgba(0,0,0,.22);
}
.zigzag-card h3{ color: var(--ink); }
.zigzag-dot{
  position: absolute;
  top: 44px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--ink-14);
  z-index: 3;
  transition: background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.on-dark .zigzag-dot{ border-color: rgba(236,236,234,.24); }
.zigzag-dot.is-active{
  background: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 0 6px rgba(245,179,1,.16);
  transform: scale(1.15);
}
.side-left .zigzag-dot{ left: calc(min(420px, 84%) + 4px); }
.side-right .zigzag-dot{ right: calc(min(420px, 84%) + 4px); }

.zigzag-step[data-reveal]{ transform: translateY(24px); }
.zigzag-step.side-left[data-reveal]{ transform: translateX(-36px); }
.zigzag-step.side-right[data-reveal]{ transform: translateX(36px); }
.zigzag-step[data-reveal].is-visible{ transform: none; }

@media (max-width: 720px){
  .zigzag-wrap{ padding-left: 34px; }
  .zigzag-step.side-left, .zigzag-step.side-right{ justify-content: flex-start; }
  .zigzag-card{ width: 100%; }
  .side-left .zigzag-dot, .side-right .zigzag-dot{ left: -34px; right: auto; top: 40px; }
  .zigzag-step.side-left[data-reveal], .zigzag-step.side-right[data-reveal]{ transform: translateY(24px); }
}

/* ================= FAQ ================= */
/* De vragen als losse, grote witte pillen (16-09-2026, eerst getest als
   _faq-test.html). Dicht is het een pil (radius is de halve hoogte) met een zwart
   rondje; open blijft hij wit, met dezelfde ronde hoeken en een amber rondje met
   een min. Elke pil klapt los van de andere uit (layout.js, stap 7).

   Twee per rij, als twee losse kolommen (.faq-kolom: oneven vragen links, even
   rechts). In een gewoon raster laat een pil die openklapt een gat naast zich;
   zo schuift alleen zijn eigen kolom omlaag. Onder 900px één kolom: de kolommen
   lossen op (display: contents) en order zet de vragen terug in hun volgorde.
   Dat gaat uit van zes per kolom; komt er een vraag bij, vul de order-rijen aan.

   De kleur zit op .pil binnen .faq-item en niet op .faq-item zelf: daar staat de
   reveal-vertraging inline op, en die zou dan ook de kleurwissel vertragen. */
/* De pillen lopen zo breed als de kopbalk (.hdr-inner, --wrap + 240px) en niet op
   de gewone .wrap: in die smallere maat bleef links en rechts een lege baan staan
   en oogde de pagina leeg (Benjamin, 16-09-2026). Linkerpil begint onder het logo,
   rechterpil eindigt onder de afspraakknop. */
.faq-wrap{ max-width: calc(var(--wrap) + 240px); }
.faq-list{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 32px); align-items: start;
}
.faq-kolom{ display: flex; flex-direction: column; gap: clamp(20px, 2.2vw, 32px); }
@media (max-width: 900px){
  .faq-list{ display: flex; flex-direction: column; gap: 16px; }
  .faq-kolom{ display: contents; }
  .faq-kolom:first-child > .faq-item:nth-child(1){ order: 1; }
  .faq-kolom:last-child > .faq-item:nth-child(1){ order: 2; }
  .faq-kolom:first-child > .faq-item:nth-child(2){ order: 3; }
  .faq-kolom:last-child > .faq-item:nth-child(2){ order: 4; }
  .faq-kolom:first-child > .faq-item:nth-child(3){ order: 5; }
  .faq-kolom:last-child > .faq-item:nth-child(3){ order: 6; }
  .faq-kolom:first-child > .faq-item:nth-child(4){ order: 7; }
  .faq-kolom:last-child > .faq-item:nth-child(4){ order: 8; }
  .faq-kolom:first-child > .faq-item:nth-child(5){ order: 9; }
  .faq-kolom:last-child > .faq-item:nth-child(5){ order: 10; }
  .faq-kolom:first-child > .faq-item:nth-child(6){ order: 11; }
  .faq-kolom:last-child > .faq-item:nth-child(6){ order: 12; }
}
.pil{
  background: #fff;
  color: var(--ink);
  border-radius: 46px;
  box-shadow: 0 1px 0 rgba(17,17,17,.04), 0 18px 40px -30px rgba(17,17,17,.35);
  transition: box-shadow .45s var(--ease), transform .45s var(--ease);
}
/* Een blok, geen pagina (17-09-2026): de vragen beginnen direct onder de kopbalk in
   plaats van op de lucht van .zonder-hero, en er zit minder wit onder. */
#faq.zonder-hero{ padding-top: calc(var(--balk) + 14px); }
#faq .faq-wrap{ padding-bottom: clamp(44px, 5.5vw, 80px) !important; }
.faq-q{
  width:100%; background:none; border:none; text-align:left; cursor: pointer;
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
  padding: 20px 22px 20px clamp(26px, 3vw, 40px); min-height: 92px; color: inherit;
}
.faq-q h4{ font-size: clamp(1.1rem,1.6vw,1.4rem); font-weight:700; letter-spacing:-0.01em; }
/* HIER GEEN GELE PUNT ONDER HET VRAAGTEKEN (18-09-2026, Benjamin). Elders op de
   website is de punt van een vraagteken amber, zoals de punt in het woordmerk; zie
   .kop-vraag onderaan dit bestand. Op de vragenlijst staan twaalf vragen onder
   elkaar en dan is het geen merkteken meer maar spikkels. Het verloop wordt hier
   dus uitgezet en het hele teken is weer gewoon inkt. Alleen in de lijst: de vraag
   op de donkere uitnodigingsband eronder ("Zit uw vraag er niet bij?") houdt hem. */
.faq-q .kop-vraag{
  background-image: none;
  -webkit-text-fill-color: currentColor;
}
.faq-plus{
  position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  transition: background .45s var(--ease), color .45s var(--ease);
}
.faq-plus::before, .faq-plus::after{
  content:''; position:absolute; background: currentColor;
  transition: transform .45s var(--ease);
}
.faq-plus::before{ left:14px; top:50%; width:16px; height:2px; margin-top:-1px; }
.faq-plus::after{ top:14px; left:50%; height:16px; width:2px; margin-left:-1px; }
.faq-item.is-open .faq-plus{ background: var(--amber); color: var(--ink); }
.faq-item.is-open .faq-plus::after{ transform: rotate(90deg); }
@media (hover: hover){
  .pil:hover{ transform: translateY(-2px); box-shadow: 0 1px 0 rgba(17,17,17,.04), 0 26px 50px -30px rgba(17,17,17,.45); }
  .faq-item:not(.is-open) .pil:hover .faq-plus{ background: var(--amber); color: var(--ink); }
}
/* Invliegen (layout.js, stap 7). .faq-wacht zet layout.js pas, dus zonder script
   staan de vragen gewoon in beeld.
   GEEN SCHUIFBEWEGING MEER (19-09-2026): de transform (translateX/translateY)
   hing af van IntersectionObserver-timing (110ms stagger, zie layout.js) die
   niet betrouwbaar voor elk item op tijd .is-in zette. Bleef een item nog
   even hangen op zijn beginstand (translateY(24px)), dan stond hij zichtbaar
   verschoven tussen de andere, alsof de vragen per twee gegroepeerd waren met
   ongelijke tussenruimte. Alleen de fade blijft, positie staat nu altijd al
   vast, dus dat kan niet meer gebeuren. */
.faq-wacht .faq-item{
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.faq-wacht .faq-item.is-in{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .faq-wacht .faq-item{ opacity: 1; transform: none; transition: none; }
}
.faq-a{
  max-height: 0; overflow: hidden;
  transition: max-height .5s var(--ease);
}
.faq-a-in{ padding: 2px clamp(26px, 3vw, 40px) 34px; }
.faq-a-in p{ line-height: 1.6; max-width: 56ch; color: inherit; opacity: .82; }
@media (max-width: 640px){
  .pil{ border-radius: 34px; }
  .faq-q{ padding: 18px 18px 18px 26px; gap: 16px; min-height: 0; }
  .faq-plus{ width: 40px; height: 40px; }
  .faq-plus::before{ left: 13px; width: 14px; }
  .faq-plus::after{ top: 13px; height: 14px; }
  .faq-a-in{ padding: 2px 26px 30px; }
}
@media (prefers-reduced-motion: reduce){
  .pil, .faq-plus, .faq-plus::after, .faq-a{ transition: none; }
}

/* ================= Slotband =================
   De strook waarmee een pagina sluit. Eén zin, op de grootste maat van de pagina,
   gecentreerd. Geen knop en geen tweede regel, want de vraag is er vlak boven al
   gesteld; dit is de afdruk waarmee de pagina dichtgaat.
   De kleur staat niet in dit component maar per pagina op de sectie, en is overal
   .sheet-light. Dat hoort bij de vaste afsluiting van elke pagina: uitnodiging op
   inkt, slotband op papierkleur, footer op inkt. Zonder die lichte strook lopen de
   twee zwarte vlakken in elkaar over en lijkt de footer nog bij de sectie erboven
   te horen.
   Rechte hoeken, in tegenstelling tot de andere vellen: dit is een strook en geen
   vel dat over het vorige heen schuift. De overlap van .sheet-raised blijft wel
   staan. */
.slotband{
  padding-block: clamp(30px, 3.4vw, 48px);
  border-radius: 0;
  text-align: center;
  overflow: hidden;
}
/* De gele gloed van het visitekaartje, rechtsboven. Zelfde amber (#F5B301) en
   dezelfde gedachte als op de hero (zie "de gele gloed" verderop): geen vlak
   maar licht dat van buiten het kader komt, het felst tegen de rechterrand en
   uitlopend naar links en naar onder tot ongeveer het midden van de strook.
   Hij staat hier op alfa .50 en niet op de .20 van de hero: op de hero staat het
   amberen vlak met Benjamin en Stijn ernaast en zijn twee sterke ambers naast
   elkaar te veel, hier is de strook verder leeg papier en draagt de gloed het
   licht in zijn eentje.
   Het middelpunt ligt boven de bovenrand (-25%) en de verticale straal is een
   veelvoud van de bandhoogte, want de band is breed en laag: zou het middelpunt
   erin liggen, dan wordt het een vlek in plaats van invallend licht. Alles in
   procenten, dus hij schaalt mee met de band op een telefoon.
   Hij is er altijd, ook voordat de zin binnenkomt: het is achtergrondlicht en
   geen entree, dus er hangt geen reveal aan.
   Op een ::before en niet op de achtergrond van .slotband zelf, want die is
   .sheet-light en levert de papierkleur; twee achtergronden op één element zou
   de kleur uit het vel halen. */
.slotband::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(53% 221% at 97% -25%, rgba(245,179,1,.55), rgba(245,179,1,0) 70%);
}
.slotband > .wrap{ position: relative; z-index: 1; }
/* Eén regel, altijd. De maat is daarop teruggerekend: 40 tekens passen met
   3.6vw en een plafond van 2.3rem ook op een telefoon binnen de goot, dus
   nowrap kan zonder dat de zin het scherm uit loopt. */
.slotband__zin{
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.15;
  font-size: clamp(1rem, 3.6vw, 2.3rem);
  white-space: nowrap;
}

/* ================= Werk-pagina: het venster =================
   Eén object draagt de hele pagina. Het begint leeg boven het inktvel, bouwt
   zich op terwijl je "hoe het gaat" leest, en blijkt onderaan de echte site van
   een klant te zijn. Zo loopt er een verhaal door de pagina zonder dat er een
   zin voor nodig is die dat uitlegt, en zonder tussenkopjes om het in stukken
   te hakken.

   Het venster is met opzet wit, ook op het inktvel: een lichte vorm op zwart
   trekt het oog en het is precies wat het voorstelt, een leeg scherm. */
.venster{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--ink-14);
  box-shadow: 0 44px 96px -44px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.06);
}
/* Op het inktvel alleen een zwaardere schaduw. De rand blijft inktkleurig, want
   het venster hangt over de naad heen en staat dus met zijn bovenkant nog op wit;
   een lichte rand zou daar verdwijnen. */
.on-dark .venster{
  box-shadow: 0 60px 120px -50px rgba(0,0,0,.9);
}
/* De balk is geen versiering: de adresbalk draagt het domein van de klant, dus
   je ziet waar de link heen gaat voordat je klikt. */
.venster-balk{
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px;
  background: #f3f3f1;
  border-bottom: 1px solid var(--ink-14);
}
.venster-stip{ display: flex; gap: 6px; flex: none; }
.venster-stip span{ width: 10px; height: 10px; border-radius: 50%; background: rgba(17,17,17,.15); }
.venster-url{
  flex: 1;
  max-width: 340px;
  margin: 0 auto;
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--white);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .015em;
  color: var(--ink-40);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .5s var(--ease);
}
/* Een derde vlak rechts houdt de adresbalk optisch in het midden zonder dat er
   iets in hoeft te staan. */
.venster-balk::after{ content:''; flex: none; width: 46px; }
/* display:block hoort erbij: in de link-variant is dit een <span> binnen de <a>,
   en op een inline element doet aspect-ratio niets. */
.venster-doek{
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--white);
}
.venster-doek img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform 1.4s var(--ease);
}

/* Is het venster zelf de link, dan komt hij bij hover los van de pagina. */
a.venster{ display: block; transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
a.venster:hover{ transform: translateY(-8px); }
a.venster:hover .venster-doek img{ transform: scale(1.035); }
/* Het adres kleurt bij hover naar het merkgeel zelf (--amber) en niet naar het
   diepe amber dat elders op wit wordt gebruikt: hier is het geen leestekst maar
   een signaal dat er een link achter zit, en het merkgeel is wat de rest van de
   site daarvoor gebruikt. Op verzoek gewijzigd, 01-09-2026. */
a.venster:hover .venster-url{ color: var(--amber); }
a.venster:focus-visible{ outline: 3px solid var(--amber); outline-offset: 4px; }

/* ---- De opbouw in het lege venster ----
   Vijf lagen die één voor één verschijnen. layout.js zet `data-stap` op basis
   van welke alinea ernaast in beeld staat, dus de site bouwt zich op in het
   tempo waarin je leest. Alleen vlakken, geen namaaktekst: dit is een site die
   nog gemaakt wordt en niet een echte pagina. */
.venster-skelet{
  position: absolute; inset: 0;
  padding: clamp(14px, 2vw, 26px);
  display: flex; flex-direction: column;
  gap: clamp(9px, 1.3vw, 16px);
}
.sk{
  border-radius: 9px;
  background: rgba(17,17,17,.09);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.sk-balk{ height: clamp(20px, 2.6vw, 32px); display: flex; align-items: center; gap: 8px; background: none; }
.sk-merk{ width: clamp(52px, 7vw, 88px); height: 100%; border-radius: 7px; background: rgba(17,17,17,.16); }
.sk-nav{ margin-left: auto; display: flex; gap: 7px; }
.sk-nav i{ display: block; width: clamp(26px, 3.4vw, 44px); height: 8px; border-radius: 4px; background: rgba(17,17,17,.09); }
.sk-held{ flex: 1.7; border-radius: 12px; background: rgba(17,17,17,.12); }
.sk-regels{ display: flex; flex-direction: column; gap: 7px; background: none; }
.sk-regels i{ display: block; height: 9px; border-radius: 5px; background: rgba(17,17,17,.09); }
.sk-regels i:nth-child(1){ width: 72%; }
.sk-regels i:nth-child(2){ width: 54%; }
.sk-rij{ flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(9px, 1.3vw, 16px); background: none; }
.sk-rij span{ border-radius: 10px; background: rgba(17,17,17,.09); }
/* Laag 5: de voet van de site. Kwam erbij op 2026-09-09 toen de vier stappen
   vijf redenen werden op werk.html. */
/* Er stond hier van 2026-09-09 tot 11-09-2026 nog een zesde laag (.sk-rij-2, een
   tweede smallere rij kaarten) bij de alinea over de prijs. Die alinea is weg,
   dus het skelet telt weer vijf lagen en stap 5 is de volle site. */
.sk-voet{ height: clamp(14px, 1.9vw, 24px); background: rgba(17,17,17,.14); }
/* Elke stap laat alles tot en met dat nummer zien; teruggescrold blijft staan
   wat er al stond, want layout.js telt alleen omhoog. */
.venster[data-stap="1"] .sk[data-laag="1"],
.venster[data-stap="2"] .sk[data-laag="1"], .venster[data-stap="2"] .sk[data-laag="2"],
.venster[data-stap="3"] .sk[data-laag="1"], .venster[data-stap="3"] .sk[data-laag="2"], .venster[data-stap="3"] .sk[data-laag="3"],
.venster[data-stap="4"] .sk[data-laag="1"], .venster[data-stap="4"] .sk[data-laag="2"], .venster[data-stap="4"] .sk[data-laag="3"], .venster[data-stap="4"] .sk[data-laag="4"],
.venster[data-stap="5"] .sk{ opacity: 1; transform: none; }
.venster[data-stap="2"] .sk[data-laag="2"]{ transition-delay: .1s; }
.venster[data-stap="3"] .sk[data-laag="3"]{ transition-delay: .1s; }
.venster[data-stap="4"] .sk[data-laag="4"]{ transition-delay: .1s; }
.venster[data-stap="5"] .sk[data-laag="5"]{ transition-delay: .1s; }

@media (prefers-reduced-motion: reduce){
  .sk{ transition: none; }
  .venster .sk{ opacity: 1; transform: none; }
}

/* ---- De laadbalk in de chroombalk ----
   Loopt mee met de opbouw van het skelet: elke stap die erbij komt vult hem een
   kwart verder. Een browser die een pagina inlaadt doet precies dit, dus het
   vertelt zonder woorden dat de site aan het ontstaan is. Zit onderaan de balk
   en niet in het doek, want daar hoort een laadbalk. */
.venster-laadbalk{
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; overflow: hidden;
}
.venster-laadbalk i{
  display: block; height: 100%; width: 0;
  background: var(--amber);
  transition: width 1.25s var(--ease);
}
.venster[data-stap="1"] .venster-laadbalk i{ width: 20%; }
.venster[data-stap="2"] .venster-laadbalk i{ width: 40%; }
.venster[data-stap="3"] .venster-laadbalk i{ width: 60%; }
.venster[data-stap="4"] .venster-laadbalk i{ width: 80%; }
.venster[data-stap="5"] .venster-laadbalk i{ width: 100%; }

@media (prefers-reduced-motion: reduce){ .venster-laadbalk i{ transition: none; } }

/* ---- Twee details die het lege venster laten leven ----
   Een knipperende cursor achter het adres, alsof het domein net is ingetypt, en
   een glans die over het skelet trekt zoals elke app doet terwijl hij inlaadt.
   Allebei stoppen ze bij de laatste stap: dan staat de site er en is er niets meer aan
   het laden. Dat is het verschil tussen een animatie die iets betekent en een
   animatie die alleen maar beweegt. */
.venster-caret{
  display: inline-block;
  width: 1.5px; height: .95em;
  margin-left: 2px;
  vertical-align: -.12em;
  background: var(--amber-deep);
  animation: caretKnipper 1.15s steps(1, end) infinite;
}
@keyframes caretKnipper{ 0%,49%{ opacity: 1 } 50%,100%{ opacity: 0 } }
.venster[data-stap="5"] .venster-caret{ animation: none; opacity: 0; }

.venster-glans{
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.9) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: glansTrek 2.9s var(--ease-soft) infinite;
  transition: opacity .9s var(--ease);
}
@keyframes glansTrek{ 0%{ transform: translateX(-100%) } 62%,100%{ transform: translateX(100%) } }
.venster[data-stap="5"] .venster-glans{ animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce){
  .venster-caret{ animation: none; }
  .venster-glans{ animation: none; opacity: 0; }
}

/* Een korte haal onder de regel waar een blok op uitkomt: hij trekt zichzelf van
   links naar rechts zodra het blok in beeld komt. Dit is de enige lijn die op deze
   paginas mag staan. Lange lichte lijnen over de volle breedte, als scheiding
   boven of onder een blok, staan er bewust niet: die maken van elke sectie een
   hokje en dat is precies wat deze paginas niet moeten zijn.
   De haal hoort in een element met data-reveal en niet erop: de reveal zet zijn
   eigen transform bij de entree en die overschrijft de scaleX hieronder. */
.haal{
  display: block;
  width: clamp(96px, 11vw, 150px);
  height: 3px;
  border-radius: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease);
  transition-delay: .25s;
}
[data-reveal].is-visible .haal{ transform: scaleX(1); }
@media (prefers-reduced-motion: reduce){ .haal{ transition: none; transform: scaleX(1); } }

/* ---- De cue ----
   Een ronde amberen knop midden op het venster, met de klassieke cursorhand erin
   (wit gevuld, inktomtrek), precies het wijzertje van cursor: pointer. Zonder
   zoiets ziet een venster met een echte site erin eruit als een plaatje en klikt
   niemand; een knop midden op het beeld leest als "hier kun je op drukken".
   Tot 09-09-2026 was dit een pil rechtsonder met "Kijk zelf even rond" erin.
   Het centreren gebeurt met inset:0 plus margin:auto en met opzet niet met een
   transform: de entree van .case-venster zet zelf een transform op dit element
   (translateY naar none), en die twee zouden elkaar overschrijven.
   Hij draagt geen tekst en is aria-hidden; wat er gebeurt als je klikt staat in
   het aria-label van de link eromheen. */
.venster-cue{
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  width: clamp(58px, 6.4vw, 78px);
  height: clamp(58px, 6.4vw, 78px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--amber);
  color: var(--ink);
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.55), 0 0 0 8px rgba(245,179,1,.18);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.venster-cue svg{ width: 50%; height: 50%; display: block; }
/* De ring zet uit bij hover, dus de knop reageert voordat je klikt. */
a.venster:hover .venster-cue{
  transform: scale(1.08);
  box-shadow: 0 22px 50px -16px rgba(0,0,0,.6), 0 0 0 15px rgba(245,179,1,.14);
}
@media (max-width: 620px){
  .venster-cue{ width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce){ .venster-cue{ transition: none; } }

/* ================= Werk-pagina: de case =================
   HOE DIT VEL IN ELKAAR ZIT (herbouwd 09-09-2026). Het stond hiervoor volledig
   gecentreerd: zes blokken onder elkaar op zes verschillende breedtes (gemeten
   1096, 548, 860, 557, 830 en 644 pixels), elk met een eigen linker- en
   rechterrand, met veel lucht ertussen en niets dat iets anders raakte. Dat
   leest als een A4 met een plaatje erin.

   Het is nu een object: een zwarte plaat op het witte vel. De plaat is zelf een
   grid van twee gelijke kolommen die over de volle hoogte doorlopen, dus er
   loopt een verticale naad van boven naar onder door de hele case en die houdt
   de compositie bij elkaar. De kop staat over de volle breedte en daaronder
   liggen drie rijen van twee:
     rij 1  de kop, over de volle plaat
     rij 2  de opening       het venster (klein)
     rij 3  aan tafel        de ik-vorm
     rij 4  het scharnier    de uitkomst
   Links en rechts wegen per rij ongeveer even zwaar, dus er valt geen gat; gaat
   de tekst veranderen, kijk dan of dat nog klopt. Het venster staat met opzet in
   rij 2 en niet onderaan: je ziet meteen om welke site het gaat en daarna doet
   de tekst het werk.
   Tot 09-09-2026 stonden de kolommen op 0.9fr en 1.1fr, want rechts lag toen een
   stapel van drie schermen. Nu er in elke rij links en rechts hetzelfde soort
   blok staat, zijn ze gelijk.

   De amberen gloeden die op dit vel lagen zijn er op 2026-09-10 af; zie de
   opmerking bij .case-vel. */
.case{
  padding-block: clamp(88px, 11vw, 168px) clamp(76px, 9vw, 132px);
  /* Breder dan de tekstkolom eromheen: het vlak draagt de foto van Evert en heeft
     dus ruimte nodig. De plaat breekt er symmetrisch mee uit de .wrap, door de
     resterende ruimte als negatieve marge te nemen, en blijft binnen het scherm
     dankzij de 94vw. De maat staat hier op .case en niet op .case-plaat omdat er
     tot 2026-09-10 een losse balk onder de plaat lag die exact even breed moest
     zijn; hij mag terug naar .case-plaat als er niets meer bij komt. */
  --plaat-breed: min(94vw, 1240px);
}

.case-plaat{
  /* De breedte en de uitbraak uit de .wrap komen van --plaat-breed op .case. */
  width: var(--plaat-breed);
  max-width: none;
  margin-inline: calc((100% - var(--plaat-breed)) / 2);
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-xl);
  /* Effen inkt. De foto van Evert bij zijn bus lag hier tot 2026-09-09 als
     achtergrond onder een donkere sluier; Benjamin wilde de zwarte achtergrond
     terug en Evert als vierkante foto op de plaat. Hij staat nu rechts in
     .case-zij, waar je hem ook echt ziet in plaats van door een sluier heen. */
  background: var(--ink);
  /* .on-dark zet alleen de tekstrollen om (--tekst); de kop en het scharnier
     erven gewoon color, en die staat op inkt. Vandaar hier ook color: dat is
     wat .sheet-dark op een heel vel ook doet. */
  color: var(--paper);
  padding: clamp(30px, 4.4vw, 76px);
  display: grid;
  /* Twee kolommen, maar anders dan de eerste versie van 09-09: daar lag in elke
     rij links en rechts een blok, en dan bepaalt de langste alinea van een rij
     hoe groot het gat eronder wordt. Nu staat alle tekst in een doorlopende
     kolom (.case-tekst) en alle beeld in de andere (.case-zij), dus de
     tussenruimtes zijn overal gelijk en de plaat is een stuk minder hoog dan de
     staande kolom die er tussenin heeft gestaan. */
  /* De rechterkolom stond op .58fr toen er twee vierkanten in stonden. Sinds
     2026-09-09 staat er alleen nog de foto van Evert in en is die kolom breder,
     zodat de foto groter is; de knop naar zijn site ligt als balk onder de plaat.
     Hij ging eerst naar .82fr en daarna terug naar .72fr: op .82 liep de foto aan
     het eind van zijn beweging tot vlak boven de onderrand van de tekst en dan zag
     je geen zwart meer onder hem. */
  grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
  column-gap: clamp(26px, 3.6vw, 60px);
  row-gap: clamp(34px, 4.6vw, 72px);
  align-items: start;
  /* Geen slagschaduw: het vlak ligt plat op het papier en de gloed eromheen doet
     het werk al. */
}
/* Dit vel had twee amberen gloeden: een grote cirkel half buiten beeld in de
   linkerbovenhoek (het recept van het visitekaartje) en een zwakkere echo tegen de
   rechterrand op halve hoogte. Allebei weg op 2026-09-10, op verzoek van Benjamin.
   Daarmee vervielen ook de isolation en de z-index -1 die ze onder de inhoud
   hielden, en de overflow: clip die ze afknipte. Blijft staan: position relative,
   want .case-zij is sticky en heeft een blok nodig om in te schuiven.
   LET OP als je hier ooit weer iets absoluut positioneert dat buiten het vel valt:
   knip het dan af met overflow: clip en niet met hidden. Hidden maakt van dit vel
   een scroll-container en dan doet de sticky van .case-zij niets meer. */
.case-vel{ position: relative; }
/* De kop staat op een eigen rij over de volle plaat: een regel, en daaronder
   beginnen de twee kolommen. Zo hoeft er naast de kop niets te staan om het gat
   te vullen, en dat is precies de hoek waar de gloed ligt. */
.case-kop{ grid-column: 1 / -1; }
/* De tekst op de plaat stond op 2026-09-09 kort gecentreerd over de volle
   breedte. Dat is teruggedraaid: hij staat weer links, zoals overal op de site,
   want gecentreerde lopende tekst leest per regel opnieuw in en een blok van
   vier alinea's is daar te lang voor. De leesmaat mag hier wel ruimer dan de
   48ch van .tekst, want de kolom is smal genoeg. */
.case-plaat p{ max-width: 54ch; }

/* ---- De twee kolommen van de plaat ----
   Links de tekst, in een eigen flow met gelijke tussenruimtes. Rechts de foto van
   Evert. Daar stond tot 2026-09-09 ook de knop naar zijn site onder, allebei
   vierkant; die knop is een balk onder de plaat geworden en de foto heeft de
   vrijgekomen hoogte gekregen. Hij staat dus weer staand op 4:5, zoals elk ander
   portret op de site, in een kolom die van .58fr naar .82fr is gegaan. */
.case-tekst{
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}
.case-zij{
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 26px);
  /* De tekstkolom is een stuk hoger dan de foto (op een plaat van 1240 breed: 942
     om 550), dus onder de foto zou een gat van bijna vierhonderd pixels zwart
     vallen. De foto blijft daarom in beeld terwijl je de tekst ernaast leest en
     zakt zo vanzelf door dat gat heen. De offset houdt de vaste kopbalk vrij.
     Onder 900px is het een kolom en staat hij stil. */
  position: sticky;
  top: clamp(104px, 11vh, 148px);
  /* De marge onderaan hoort bij de sticky: een sticky blok stopt bij de onderrand
     van zijn eigen vak, verminderd met zijn marges. Zonder deze marge eindigt de
     foto precies gelijk met de laatste regel tekst en zie je aan het eind van de
     beweging geen zwart meer onder hem staan.
     De maat is zo gekozen dat er aan het eind van de beweging onder de foto net
     zoveel zwart staat als erboven. Boven hem liggen de bovenmarge van de plaat, de
     kop en de rij-tussenruimte, samen tweehonderd pixels op een plaat van 1240;
     onder hem liggen deze marge en de ondermarge van de plaat. De boven- en
     ondermarge van de plaat zijn gelijk, dus deze marge is de hoogte van de kop plus
     de rij-tussenruimte: ongeveer 63 plus 70 is 133. */
  margin-bottom: clamp(70px, 8.7vw, 136px);
}
/* De foto van Evert is een gewone .portret: ronde hoeken, staand 4:5. Hij was tot
   2026-09-09 vierkant omdat de knop eronder dat ook was, en had een naamplaat; de
   knop is een balk onder de plaat geworden en de naamplaat is eraf, dus er blijft
   hier niets eigens over en staat hij in werk.html zonder extra klasse. */
/* ---- De foto van Evert is de link naar zijn site ----
   Hier stond het blok voor .case-balk: een aparte knop naar blokhuistuinen.nl, die
   in twee dagen tijd een band onderin de plaat is geweest, een vierkant naast de
   foto, een losse balk onder de plaat, een effen groen vlak en ten slotte een dunne
   balk met zijn heldenfoto erin. Op 2026-09-10 is die knop helemaal vervallen: de
   foto van Evert is nu zelf de link, met een amberen hoek linksonder erin.
   assets/werk/blokhuis-hero.jpg is daarmee ongebruikt geworden en is weggehaald;
   het origineel staat in 300_Websites/Blokhuis Tuinen/site/images/hero.jpg.

   DE HOEK IS EEN HOEK EN GEEN PIL. Hij zit vast in de linkeronderhoek van de foto
   en neemt daar de ronding van de foto over (border-bottom-left-radius gelijk aan
   .portret), terwijl de kant die het beeld in steekt afgerond is met de kleinere
   --radius-md. Zo leest hij als een stukje dat uit de foto is gesneden en niet als
   een label dat erop ligt.

   HET WIJZERTJE. In de hoek staat de klassieke muispijl, gevuld in inkt: dat is
   het enige teken dat zonder woorden "hier kun je op drukken" zegt. Het label
   erbij zegt wat er dan gebeurt. Bij hover schuift de pijl een paar pixels weg
   van zijn punt en zoomt de foto iets in, dus het beeld reageert voordat je
   klikt. */
a.portret{ display: block; }
.case-portret img{ transition: transform .9s var(--ease); }
.case-portret:hover img{ transform: scale(1.035); }
.case-portret:focus-visible{ outline: 3px solid var(--amber); outline-offset: 4px; }
.case-hoek{
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: clamp(11px, 1.1vw, 15px) clamp(15px, 1.5vw, 21px);
  background: var(--amber);
  color: var(--ink);
  font-weight: 800;
  font-size: clamp(.94rem, 1.1vw, 1.06rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
  border-bottom-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-md);
}
.case-hoek-wijzer{
  width: clamp(15px, 1.5vw, 18px);
  height: auto;
  display: block;
  fill: var(--ink);
  transition: transform .45s var(--ease);
}
.case-portret:hover .case-hoek-wijzer{ transform: translate(3px, 3px); }
@media (prefers-reduced-motion: reduce){
  .case-portret img, .case-hoek-wijzer{ transition: none; }
  .case-portret:hover img{ transform: none; }
  .case-portret:hover .case-hoek-wijzer{ transform: none; }
}
.case-scharnier{
  align-self: end;
  max-width: 26ch;
  font-size: clamp(1.28rem, 2.05vw, 1.74rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.24;
}


/* ---- Het venster ----
   Een scherm, klein, in kolom 2 van de tweede rij: naast de openingsalinea, dus
   hoog in de plaat en niet onderaan. Het vult zijn kolom en houdt daarmee de
   rechterrand van de plaat vast, net als de alinea eronder; het is ongeveer een
   halve plaatbreedte, dus half zo breed als toen het nog een eigen rij had.
   Het beeld is 1600 bij 1000 en .venster-doek staat op 16/10, dus er wordt op
   geen enkele maat bijgesneden.
   Dit heeft drie vormen gehad op 09-09-2026: een stapel van drie schermen, daarna
   een scherm over de volle plaatbreedte onderin, en nu dit. Benjamin achtereen:
   "alleen het hero scherm van Evert is goed zat" en "maak de hero klein en zet m
   ergens rechts neer niet onderaan".
   assets/werk/blokhuis-tuinen-diensten.webp en -contact.webp staan hierdoor niet
   meer op werk.html. Ze blijven wel in gebruik bij de vertelling op de homepage
   (verhaal.js), dus niet weggooien. */
.case-venster{
  position: relative;
  align-self: start;
  /* Sinds 2026-09-09 staat de plaat in een kolom en loopt het venster mee met de
     tekstbreedte in plaats van over de volle plaat: op volle breedte werd het het
     zwaarste ding op de pagina en dat hoeft niet, het is een voorbeeld en geen
     hoofdrol. De linkerrand valt samen met die van de alinea's, dus het staat
     rustig tussen twee alinea's in. */
  width: 100%;
}
/* De plaat draagt de warmte al, dus de gloed onder het venster gaat hier uit:
   twee ambers binnen een halve meter is er een te veel. */
.case-plaat .case-venster::before{ display: none; }
/* Op de plaat is de screenshot een lange, dunne band over de volle breedte:
   je ziet de bovenkant van blokhuistuinen.nl (object-position staat al op top)
   en het beeld neemt de pagina niet over. */
.case-plaat .venster-doek{ aspect-ratio: 5 / 1; }
/* De band onderaan de plaat is een knop: geen browserbalk, wel een dominante
   regel over de screenshot heen. De sluier houdt hem leesbaar op elke foto en
   trekt bij hover iets op, zodat je ziet dat er een echte site onder zit. */
.case-plaat .venster-balk{ display: none; }
.case-knoptekst{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 16px; text-align: center;
  font-size: clamp(1.45rem, 3vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
  color: var(--paper);
  background: rgba(17,17,17,.52);
  transition: background .45s var(--ease);
}
a.venster:hover .case-knoptekst{ background: rgba(17,17,17,.34); }
/* Geen witte rand om de screenshot. Er zaten twee oorzaken achter elkaar.
   Ten eerste: .venster heeft standaard border: 1px solid var(--ink-14) en een
   witte achtergrond, en background-clip staat op border-box, dus die
   halftransparante inktrand ligt over wit en rendert lichtgrijs. Op een licht vel
   valt dat weg, op deze zwarte plaat is het een lijn om het beeld heen.
   Ten tweede, en dat bleef over toen de rand weg was: .venster en .venster-doek
   hebben een witte achtergrond, en het venster staat op gebroken coordinaten
   (856,42px bij een devicePixelRatio van 1,25). De ronde hoek plus overflow:hidden
   laat Chrome de rand antialiasen, en in die halve pixel schijnt het wit erdoor.
   Border-color op transparent zetten helpt om diezelfde reden niet.
   Dus allebei weg: geen rand, en de achtergrond op inkt zodat de gehalveerde
   randpixel in de plaat valt in plaats van erop. Het gordijn (.venster-gordijn)
   blijft wit, want dat is de entree en die hoort licht te zijn. */
.case-plaat .venster,
.case-plaat .venster-doek{ border: 0; background: var(--ink); }

.case-slot{ margin-top: clamp(48px, 6vw, 88px); }

/* Onder de plaatbreedte wordt het een kolom: kop, opening, verhaal, schermen,
   scharnier, uitkomst, precies de leesvolgorde. De plaat houdt zijn zwart en
   zijn gloed, alleen krapper gezet. De schermen blijven overlappen, want dat
   werkt in een smalle kolom net zo goed. */
@media (max-width: 900px){
  .case-plaat{
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(24px, 5vw, 38px);
    border-radius: var(--radius-lg);
  }
  .case-kop, .case-scharnier, .case-uitkomst{ align-self: start; }
  /* In een kolom is een venster van 84% een postzegel; hier mag hij de volle
     breedte hebben. */
  .case-venster{ width: 100%; margin-left: 0; }
  .case-opening, .case-uitkomst, .case-scharnier{ max-width: none; }
  .case-plaat p{ max-width: none; }
  /* Hier stond een grid van twee vierkanten naast elkaar, voor de foto en de knop.
     In de kolom staat nu alleen de foto en die krijgt de volle breedte. De balk
     eronder wordt lager en krijgt de kleinere hoekstraal van de plaat. */
  .case-zij{ position: static; margin-bottom: 0; }
}

/* ---- Het venster, met warmte eronder ----
   De gloed is dezelfde truc als bij het contactformulier: geen radiaal verloop
   dat in de hoeken al uitgedoofd is, maar de vorm van het venster zelf in amber,
   door een blur gehaald. Die spreidt aan alle kanten even ver uit, langs de
   zijden en om de hoeken heen. */
/* De maat en de plaatsing van .case-venster staan hierboven bij de plaat; hier
   alleen nog de gloed eronder, die op de plaat zelf trouwens uitstaat. */
.case-venster::before{
  content: '';
  position: absolute;
  inset: -5% -4% -9%;
  border-radius: var(--radius-xl);
  background: var(--amber);
  filter: blur(72px);
  opacity: 0;
  transition: opacity 1.4s var(--ease) .45s;
  /* Bewust geen negatieve z-index: de lift bij hover maakt een stapelcontext, en
     dan zou een laag met z-index:-1 juist over het venster heen komen. */
  z-index: 0;
}
.case-venster.is-visible::before{ opacity: .26; }
.case-venster > *{ position: relative; z-index: 1; }

/* ---- De site laadt in zodra je erbij komt ----
   Boven op dit vel bouwt hetzelfde venster zich laag voor laag op terwijl je
   ernaast leest. Hier is het dezelfde beweging in het klein: de laadbalk loopt
   vol, het beeld schuift van boven naar beneden open en pas als de site er staat
   komt de pil erbij. Dat is precies wat een browser doet, dus het zegt zonder
   woorden dat je naar een echte site kijkt en niet naar een plaatje.
   De knop hoort er daarna gewoon te staan (zie .venster-cue): hij verschijnt bij
   de entree en verdwijnt niet meer. Een knop die je pas bij hover moet vinden is
   geen knop.

   Het gordijn is een los vlak in de kleur van het doek en bewust geen clip-path op
   de afbeelding zelf: Chrome laadt een img met loading="lazy" die volledig
   weggeknipt staat niet in, dus dan schuift het gordijn over een leeg vlak weg. */
.venster-gordijn{
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: var(--white);
  transform-origin: bottom center;
  transition: transform 1.15s var(--ease) .3s;
}
.case-venster.is-visible .venster-gordijn{ transform: scaleY(0); }
/* De balk vult zich mee en dooft daarna uit, want een laadbalk die blijft staan
   op een site die er al is, klopt niet. */
.case-venster .venster-laadbalk i{
  transition: width 1.45s var(--ease) .15s, opacity .6s linear 1.6s;
}
.case-venster.is-visible .venster-laadbalk i{ width: 100%; opacity: 0; }
.case-venster .venster-cue{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .75s var(--ease) 1.15s, transform .75s var(--ease) 1.15s,
              box-shadow .55s var(--ease);
}
.case-venster.is-visible .venster-cue{ opacity: 1; transform: none; }
/* De hoverregel op .venster-cue staat op a.venster:hover en weegt zwaarder dan
   de regel hierboven, dus de lift bij hover blijft werken. */
@media (prefers-reduced-motion: reduce){
  .venster-gordijn{ display: none; }
  .case-venster::before{ opacity: .26; transition: none; }
  .case-venster .venster-cue{ opacity: 1; transform: none; transition: none; }
  .case-venster .venster-laadbalk{ display: none; }
}

/* ---- De regel waar een vel op uitkomt ----
   Groter dan .stelling en met meer lucht eromheen: geen tussenkop, maar de zin
   die een blok afsluit. */
.kern{
  font-size: clamp(1.4rem, 2.6vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.22;
  max-width: 24ch;
}
.on-dark .kern{ color: var(--paper); }

/* ================= Werk-pagina: de opzet van de vellen ================= */

/* ---- Wat wij doen, in vier tekens (.doen) ----
   Vel 1 van werk.html legde in een alinea uit wat wij leveren, en dat was de
   zoveelste lap tekst op een pagina die er al veel heeft. Op verzoek van
   Benjamin (09-09-2026) staat het er nu als beeld: vier getekende tekens met
   een label en één regel.

   GEEN KADERS EN GEEN SCHEIDINGSLIJNEN. De items staan vrij op het witte vel;
   een omkadering of een lijn ertussen maakt er hokjes van, en dat is precies wat
   deze pagina's niet moeten zijn (zie de opmerking bij .haal). Wat de rij bij
   elkaar houdt is de gelijke streek van de tekens en de kolommaat.

   TWEE OP TWEE, NIET VIER NAAST ELKAAR. Vier kolommen naast elkaar is 238px per
   kolom, en op de leesmaat (.tekst, tot 20,8px) valt een regel daar in vieren.
   Dan zou de tekst kleiner moeten, en er is op deze site maar één maat lopende
   tekst. Twee kolommen van ongeveer 500px houden de regel op twee regels en de
   maat gelijk aan de rest van de pagina.

   Het teken staat links naast de tekst en niet erboven, zodat de vier labels een
   kolom vormen die je in één blik leest.

   HET VULT HET HELE VEL (10-09-2026, op verzoek: "vergroot de iconen en de teksten
   tot de hele sectie"). Onder de vier tekens stond een kernregel met een haal, en
   die is er tegelijk uit gegaan. Het blok is nu zo hoog als het scherm min de
   marges van het vel, met de twee rijen gelijk verdeeld over die hoogte
   (align-content). Daarmee is dit het tweede scherm van de pagina: de hero, en dan
   deze vier. De maten zijn ongeveer verdubbeld: teken van 44 naar 78, label van
   1,42rem naar 2,2rem.
   De streek van de tekens gaat mee terug van 2 naar 1,7. De SVG's schalen mee, dus
   op 78px zou een streek van 2 optisch 3,5px worden en dat leest als een dikke
   omlijning in plaats van als een tekening. Met 1,7 komt hij op 3,0 uit. De regel
   staat op de svg en overschrijft het stroke-width-attribuut in de HTML; de vormen
   erbinnen erven hem.
   De lopende tekst in dit blok is groter dan de leesmaat van de rest van de site.
   Dat is met opzet en alleen hier: het blok is beeld en geen alinea, en op deze
   maat weegt de regel op tegen het teken ernaast. */
.doen{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(44px, 5.6vw, 96px) clamp(36px, 4.4vw, 76px);
  /* De drie maten in deze som zijn die van het vel eromheen: de bovenpadding komt
     van .zonder-hero (de balk plus lucht) en de onderpadding staat als
     style-attribuut in werk.html. Verandert daar iets, dan moet deze som mee.
     De 72px achteraan is de kier: zonder hem is het eerste vel precies zo hoog als
     het scherm en zie je bij het openen nergens dat er nog iets onder zit. Er is
     sinds 11-09-2026 geen hero meer met een scroll-aanwijzer erin, dus die kier is
     het enige wat nog zegt dat de pagina doorloopt: de bovenrand van het inktvel
     steekt er net onderaan in beeld. */
  min-height: calc(100vh - var(--balk) - clamp(26px, 3.6vw, 58px) - clamp(80px, 10vw, 150px) - 72px);
  min-height: calc(100svh - var(--balk) - clamp(26px, 3.6vw, 58px) - clamp(80px, 10vw, 150px) - 72px);
  align-content: space-evenly;
}
.doen-item{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 2.2vw, 34px);
  align-items: start;
}
/* De optische bovenrand van het teken ligt hoger dan de kaplijn van het label,
   dus een paar pixels naar beneden zet ze op dezelfde lijn. */
.doen-teken{
  display: block;
  color: var(--ink);
  margin-top: 6px;
}
.doen-teken svg{
  display: block;
  width: clamp(52px, 5.4vw, 78px);
  height: auto;
  stroke-width: 1.7;
}
.on-dark .doen-teken{ color: var(--paper); }
.doen-kop{
  font-size: clamp(1.45rem, 2.3vw, 2.2rem);
  letter-spacing: -0.025em;
  margin-bottom: clamp(8px, 1vw, 14px);
}
.doen-item .tekst{
  max-width: 24ch;
  font-size: clamp(1.05rem, 1.45vw, 1.34rem);
}

@media (max-width: 760px){
  /* Een kolom, en geen schermhoogte: vier items onder elkaar zijn daar vanzelf al
     langer dan het scherm. */
  .doen{
    grid-template-columns: 1fr;
    gap: clamp(30px, 6vw, 44px);
    min-height: 0;
  }
  .doen-teken svg{ width: clamp(46px, 12vw, 62px); }
  .doen-item .tekst{ max-width: 40ch; }
}


/* Het bouwvel. Het venster blijft staan terwijl de tekst ernaast doorloopt, dus
   je leest en ziet tegelijk. De negatieve bovenmarge trekt het venster over de
   naad heen het witte vel in: het object hoort bij allebei de vellen en dat is
   precies wat het verhaal doet. */
.bouw{
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(36px, 4.6vw, 84px);
  align-items: start;
}
/* De mockup begint waar hij altijd begon, maar klikt vast op het moment dat de
   onderrand van de vaste balk precies de kaplijn raakt van de H van de kop
   ernaast. Alleen de afstand tot de balk verandert dus, niet de beginpositie.

   Drie waarden:
   - --bouw-start is die beginpositie: hoever de mockup onder de bovenrand van de
     kop begint. Ongewijzigd.
   - --kop-cap is hoever de inkt van de H onder de elementrand van de kop ligt.
     Een kop staat met zijn rand hoger dan zijn letters: halfleading + ascent -
     capheight = -0,034 + 0,878 - 0,6875 = 0,1565 maal de lettergrootte. Opgemeten
     aan Archivo 900 met de line-height van 1.02 die h1 t/m h4 sitebreed hebben.
     Verandert een van die twee, dan moet die 0.1565 opnieuw worden nagerekend.
   - --hdr-h is de echte hoogte van de balk, gemeten door layout.js. De balk
     krimpt bij het scrollen (padding 22px naar 14px), dus een clamp met de hand
     nagerekend klopt daar niet; die staat er alleen als terugval.

   De plakafstand is dan balkhoogte + start - cap. Reken je het na: plakken begint
   bij scrollY = kopTop + start - top, en dat is precies kopTop + cap - balkhoogte,
   oftewel het moment waarop de kaplijn onder de balk verdwijnt. */
.bouw-beeld{
  --bouw-start: clamp(18px, 3vw, 56px);
  --kop-cap: calc(clamp(1.8rem, 3.6vw, 3.24rem) * 0.1565);
  position: sticky;
  top: calc(var(--hdr-h, clamp(87px, 7.4vw, 106px)) + var(--bouw-start) - var(--kop-cap));
  margin-top: var(--bouw-start);
}
/* Ruimte per alinea, zodat elke stap van het venster zijn eigen moment krijgt.
   Wordt dit krapper, dan bouwt het venster zich af voordat je hebt gelezen. */
.bouw-tekst > * + *{ margin-top: clamp(38px, 5.2vw, 86px); }
@media (max-width: 980px){
  .bouw{ grid-template-columns: 1fr; gap: 40px; }
  .bouw-beeld{ position: static; margin-top: 0; }
  .bouw-tekst > * + *{ margin-top: clamp(24px, 4vw, 34px); }
}

/* ---- De vijf stappen naast het venster (werk.html, sinds 11-09-2026) ----
   Het vel "Hoe wij het doen." had vijf alinea's van vier tot vijf regels met een vet
   label ervoor. Op verzoek van Benjamin is dat ingekort tot twee zinnen per onderdeel,
   met een getekend teken ervoor: "kort dit in is wel veel tekst zo, en maak voor elk
   ding een icoontje net zoals erboven staat om het aantrekkelijker te maken zodat je
   geen statische kop hebt per dingetje."

   ZELFDE STREEK ALS .doen, ANDERE MAAT. De tekens komen uit dezelfde familie als de
   vier op het vel erboven (44x44, ronde uiteinden, currentColor, per teken precies een
   amber onderdeel), maar staan hier op ongeveer de helft: dit is een kolom naast het
   venster en geen beeld dat een heel vel draagt. Een teken op .doen-maat zou het
   venster ernaast wegdrukken.

   Het teken staat links naast de tekst, net als bij .doen, zodat de vijf labels een
   kolom vormen die je in een blik leest. Geen kaders en geen lijnen ertussen: wat de
   rij bij elkaar houdt is de gelijke streek en de kolommaat.

   DE HOOGTE IS NIET VRIJ. Het venster ernaast plakt zo lang als deze kolom hoog is, en
   elk blok zet een laag van dat venster aan (data-bouwstap). Wordt de tekst langer of de
   tussenruimte krapper, dan bouwt het venster zich af voordat je hebt gelezen. Houd het
   dus bij twee korte zinnen per onderdeel.
   De tussenruimte hieronder is groter dan die binnen een blok en kleiner dan de
   clamp(38px, 5.2vw, 86px) van .bouw-tekst: die laatste scheidt de kop, de rij en de
   slotregel, deze de onderdelen onderling. */
.stappen{
  display: grid;
  gap: clamp(30px, 3.6vw, 56px);
}
.stap{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 1.9vw, 28px);
  align-items: start;
}
/* De optische bovenrand van het teken ligt hoger dan de kaplijn van het label, dus een
   paar pixels naar beneden zet ze op dezelfde lijn. Zelfde correctie als bij .doen-teken,
   kleiner omdat het teken hier kleiner is. */
.stap-teken{
  display: block;
  color: var(--tekst);
  margin-top: 3px;
}
.stap-teken svg{
  display: block;
  width: clamp(40px, 4.2vw, 56px);
  height: auto;
  stroke-width: 1.9;
}
.stap-kop{
  font-size: clamp(1.12rem, 1.52vw, 1.4rem);
  letter-spacing: -0.022em;
  margin-bottom: clamp(5px, .7vw, 10px);
}
.stap .tekst{ max-width: 42ch; }
@media (max-width: 980px){
  /* Gestapeld onder het venster is er geen kolom meer om te vullen, dus krapper. */
  .stappen{ gap: clamp(24px, 5vw, 36px); }
}




/* ================= Over ons: portret, stapel en verhaal =================
   Waar werk.html één getekend object door de pagina laat lopen, draagt deze
   pagina op de foto's. Het onderwerp zijn twee mensen, dus dat is ook wat je
   ziet: eerst samen, dan ieder apart, en tot slot allebei met de telefoon aan
   het oor. De beweging is overal klein en dient hetzelfde doel, namelijk dat
   twee foto's naast elkaar als twee losse dingen lezen en niet als één plaat. */

/* Een portret met een naamplaat die opkomt zodra de foto er staat. De plaat
   hangt in het verloop onderin, dus de naam blijft leesbaar wat er ook op de
   foto gebeurt. */
.portret{
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-2);
}
.portret img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
.portret figcaption{
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: clamp(18px, 2.2vw, 30px);
  color: var(--paper);
  background: linear-gradient(to top, rgba(0,0,0,.74), rgba(0,0,0,.12) 58%, transparent 80%);
  transform: translateY(16px);
  opacity: 0;
  transition: transform .9s var(--ease) .3s, opacity .9s var(--ease) .3s;
}
[data-reveal].is-visible .portret figcaption{ transform: none; opacity: 1; }
.portret-naam{ font-weight: 800; font-size: clamp(1.02rem, 1.3vw, 1.24rem); letter-spacing: -0.02em; }
.portret-regel{ margin-top: 5px; font-size: .88rem; font-weight: 600; letter-spacing: .06em; color: var(--paper-70); }
/* De naam onder een stuk tekst dat door een van de twee is geschreven. Op de
   twee portretvellen van over-ons.html stelt de een de ander voor, dus daar
   staat "ik" in de tekst en hoort eronder wie dat is. Zelfde maat en letter als
   de regel onder een portretnaam, alleen stiller van kleur en met lucht erboven,
   zodat het als een ondertekening leest en niet als een nieuwe alinea. */
.ondertekening{
  margin-top: clamp(16px, 1.8vw, 24px);
  font-size: .88rem; font-weight: 700; letter-spacing: .06em;
  color: var(--tekst-stil);
}
@media (prefers-reduced-motion: reduce){
  .portret figcaption{ transition: none; transform: none; opacity: 1; }
}

/* Twee foto's over elkaar, als twee afdrukken die op tafel zijn gelegd. De
   kleine krijgt een rand in de kleur van het vel eronder, want dat is wat hem
   los maakt van de grote; een schaduw alleen is niet genoeg als beide foto's
   dezelfde lichte achtergrond hebben. */
.stapel{ position: relative; padding-bottom: 13%; }
.stapel-groot{ width: 88%; }
.stapel-klein{
  position: absolute; right: 0; bottom: 0; width: 48%;
  box-shadow: 0 0 0 clamp(6px, .8vw, 12px) var(--white), 0 36px 72px -36px rgba(0,0,0,.5);
}
.on-dark .stapel-klein{
  box-shadow: 0 0 0 clamp(6px, .8vw, 12px) var(--ink), 0 44px 88px -40px rgba(0,0,0,.95);
}
@media (max-width: 620px){
  .stapel{ padding-bottom: 17%; }
  .stapel-groot{ width: 88%; }
  .stapel-klein{ width: 54%; }
}

/* Tekst naast beeld. Het beeld staat rechts; het vel daaronder zet het beeld
   juist over de volle breedte, zodat de twee vellen niet dezelfde vorm hebben.
   Op smal stapelt het met de tekst eerst. */
.verhaal{
  /* --beeld is de breedte van de beeldkolom ten opzichte van de tekstkolom. De
     standaard past bij een fotostapel; zet hem inline smaller waar er één
     portret staat. Op bijna de volle kolombreedte werd een gezicht ongemakkelijk
     groot: dan kijkt het je aan in plaats van dat het bij de tekst hoort. */
  --beeld: .94fr;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--beeld));
  gap: clamp(40px, 5.4vw, 96px);
  align-items: center;
}
/* Beeld links in plaats van rechts. Op smal staat de tekst alsnog eerst. */
.verhaal-om{ grid-template-columns: minmax(0, var(--beeld)) minmax(0, 1fr); }
.verhaal-tekst > * + *{ margin-top: clamp(22px, 2.8vw, 36px); }
@media (max-width: 940px){
  .verhaal, .verhaal-om{ grid-template-columns: 1fr; gap: 44px; }
  .verhaal-om > *:first-child{ order: 2; }
  /* Eén portret naast tekst wordt op smal snel een lap beeld. Begrenzen, zodat
     het een illustratie blijft en geen omslag. Alleen de losse portretten:
     .portret-solo staat er daarom expliciet op, want de figuren in een .stapel
     ontlenen hun maat aan de stapel en moeten juist wel meeschalen. */
  .portret-solo{ max-width: 340px; }
}


/* ================= Footer ================= */
.ftr{
  background: var(--ink);
  color: var(--paper);
  padding: 88px 0 32px;
}
.ftr-top{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: 64px;
}
@media (max-width: 860px){
  .ftr-top{ grid-template-columns: 1fr 1fr; }
}
.ftr-brand img{ height: 22px; filter: invert(1) brightness(2); margin-bottom: 18px; }
.ftr-brand .ftr-slogan{ color: var(--paper); font-weight: 700; font-size: 1.05rem; line-height: 1.4; margin: 14px 0 0; max-width: 26ch; }
.ftr h5{ font-family:'Archivo', -apple-system, BlinkMacSystemFont, sans-serif; font-weight:700; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase; color: var(--paper); margin-bottom:18px; font-weight:500;}
.ftr ul li{ margin-bottom: 12px; }
.ftr a{ font-size:1.02rem; color: var(--paper-70); transition: color .3s; }
.ftr a:hover{ color: var(--amber); }
.ftr-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top: 28px; font-family:'Archivo', -apple-system, BlinkMacSystemFont, sans-serif; font-weight:500; letter-spacing:.04em; font-size:.88rem; color: var(--paper-70);
}

/* ================= CTA band =================
   ELKE PAGINA SLUIT MET DEZELFDE BAND (09-09-2026, op verzoek: eenheid tussen
   alle CTA's, niet te veel tekst, alles links en niet gecentreerd). De vorm ligt
   hier vast en niet per pagina in een style-attribuut: kop op 16ch, daaronder
   een regel op 46ch, daaronder twee knoppen. Links uitgelijnd, ook op de
   pagina's die eerder hun band centreerden (werk.html). Wie een band toevoegt
   geeft de sectie .cta-band en schrijft de tekst niet langer dan deze maten
   toelaten: een kop van een paar woorden en een regel van hooguit twee korte
   zinnen. De knoppen zijn altijd dezelfde twee: contact in amber, de tweede
   route als spookknop, allebei met pijl. */
.cta-band{ text-align:left; }
/* 17-09-2026: van 16ch naar 26ch. Op 16ch brak "Zit uw vraag er niet bij?" en "Zin in een
   goed gesprek?" af op twee regels, waardoor die banden 53px hoger waren dan die met
   "En nu die van u.". Nu staat elke kop op een regel en is de band overal even hoog. */
.cta-band h2{ max-width: 26ch; }
.cta-band .lede{ max-width: 46ch; }
.cta-actions{ display:flex; gap:18px; margin-top:40px; flex-wrap:wrap; }

/* ================= Misc utility ================= */
.mt-8{ margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;}
.mt-48{ margin-top:48px;} .mt-64{margin-top:64px;}
.text-center{ text-align:center; }

/* ================= Cookiebanner =================
   Balk over de volle breedte onderin, op inkt zoals de footer. Links een
   koekje als icoon (inline SVG), dan de uitleg, rechts de twee knoppen. */
.cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
  background: var(--ink); color: var(--paper);
  padding: 20px var(--gutter);
  box-shadow: 0 -24px 48px -32px rgba(17,17,17,.5);
  transform: translateY(100%);
  transition: transform .5s var(--ease);
}
.cookie-banner.is-visible{ transform: none; }
.cookie-banner-inner{
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; gap: 22px;
}
.cookie-koekje{ width: 44px; height: 44px; flex-shrink: 0; }
/* De balk staat op inkt, dus vol papier: het is een zin die je moet lezen
   voordat je op een knop drukt. Basis 0 op de tekst, anders wil hij zijn volle
   tekstbreedte en springt het koekje op mobiel boven de tekst. */
.cookie-banner p{ flex: 1 1 0; min-width: 0; font-size: .92rem; line-height: 1.55; margin: 0; color: var(--paper); max-width: 84ch; }
.cookie-banner p a{
  text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px;
  text-underline-offset: 3px; transition: text-decoration-color .3s var(--ease);
}
.cookie-banner p a:hover{ text-decoration-color: var(--paper); }
.cookie-banner-btns{ display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner .btn{ font-size: .95rem; padding: .85em 1.4em; }
.cookie-banner .btn-ghost{ border-color: rgba(236,236,234,.24); color: var(--paper); }
.cookie-banner .btn-ghost:hover{ border-color: var(--paper); }
@media (prefers-reduced-motion: reduce){
  .cookie-banner{ transition-duration: .01s; }
}
@media (max-width: 860px){
  .cookie-banner-inner{ flex-wrap: wrap; }
  .cookie-banner-btns{ width: 100%; }
  .cookie-banner-btns .btn{ flex: 1; justify-content: center; }
}
@media (max-width: 640px){
  .cookie-banner{ padding: 18px 16px 16px; }
  .cookie-banner-inner{ gap: 14px; }
  .cookie-koekje{ width: 38px; height: 38px; align-self: flex-start; }
}

/* ================= Terug naar boven =================
   De gele punt achter het woordmerk, maar dan als knop: een ronde amberkleurige
   schijf rechtsonder met een inktpijl omhoog. Komt pas in beeld na ruim een
   schermhoogte scrollen (layout.js zet .is-zichtbaar) en zakt boven aan de
   pagina weer weg. Onder de header (z 60) en het menu-overlay (z 90), boven de
   inhoud. Staat de cookiebalk nog onderin, dan telt de knop --cookiebalk bij
   zijn bottom op, net als de scroll-aanwijzing van de hero. Niet op faq.html
   (Benjamin, 18-09-2026): daar blijft de bezoeker in de vragenlijst. */
.naar-boven{
  position: fixed;
  right: clamp(18px, 2.6vw, 34px);
  bottom: calc(clamp(18px, 2.6vw, 34px) + var(--cookiebalk, 0px));
  z-index: 55;
  width: 52px; height: 52px;
  padding: 0; border: 0;
  border-radius: 999px;
  background: var(--amber);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(17,17,17,.05), 0 14px 30px -14px rgba(245,179,1,.55);
  opacity: 0;
  transform: translateY(16px) scale(.86);
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .55s var(--ease), box-shadow .4s var(--ease), bottom .5s var(--ease);
}
.naar-boven.is-zichtbaar{ opacity: 1; transform: none; pointer-events: auto; }
/* Dezelfde lift als .btn-primary, en de pijl schuift een tikje mee omhoog: hij
   wijst omhoog, dus daarheen. */
.naar-boven.is-zichtbaar:hover{
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(17,17,17,.05), 0 20px 36px -14px rgba(245,179,1,.7);
}
.naar-boven:focus-visible{ outline: 3px solid var(--ink); outline-offset: 4px; }
.naar-boven svg{ width: 20px; height: 20px; display: block; transition: transform .4s var(--ease); }
.naar-boven:hover svg{ transform: translateY(-2px); }
@media (max-width: 640px){
  .naar-boven{ width: 46px; height: 46px; }
  .naar-boven svg{ width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce){
  .naar-boven{ transition: opacity .01s; transform: none; }
  .naar-boven svg{ transition: none; }
  .naar-boven.is-zichtbaar:hover{ transform: none; }
}

/* ================= Sla over (alleen de vertelling) =================
   Een lage pil onderaan in het midden, met twee chevrons vooruit. Verschijnt
   alleen als de bezoeker omlaag duwt terwijl de pagina stilstaat; verhaal.js
   zet .is-zichtbaar, zie het blok "Sla over" daar.

   Rustig van kleur met opzet. De gele .naar-boven staat rechtsonder en die is
   er de hele vertelling; twee amberen knoppen tegelijk in beeld zouden om
   dezelfde aandacht vragen terwijl deze secundair is. Vandaar wit papier met
   inkt en een haarrand: hij is te zien zodra je hem zoekt en verder niet.

   Onderaan in het midden, en niet rechts: daar zit .naar-boven, en de tekst
   van de vertelling staat in de vier hoeken (zie .pt-blok). Het midden onderin
   is de enige plek die in elk hoofdstuk vrij is. */
.sla-over{
  position: fixed;
  left: 50%;
  bottom: calc(clamp(18px, 2.6vw, 34px) + var(--cookiebalk, 0px));
  z-index: 55;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px 11px 20px;
  border: 1px solid var(--ink-14);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(17,17,17,.04), 0 16px 34px -18px rgba(17,17,17,.45);
  opacity: 0;
  transform: translate(-50%, 14px);
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .5s var(--ease), box-shadow .4s var(--ease), bottom .5s var(--ease);
}
.sla-over.is-zichtbaar{ opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.sla-over.is-zichtbaar:hover{
  transform: translate(-50%, -2px);
  box-shadow: 0 1px 0 rgba(17,17,17,.04), 0 22px 40px -18px rgba(17,17,17,.55);
}
.sla-over:focus-visible{ outline: 3px solid var(--ink); outline-offset: 4px; }
/* De chevrons wijzen vooruit, dus daar schuiven ze bij hover ook heen. */
.sla-over svg{ width: 15px; height: 15px; display: block; color: var(--amber-deep); transition: transform .4s var(--ease); }
.sla-over:hover svg{ transform: translateX(2px); }
@media (max-width: 640px){
  .sla-over{ padding: 10px 15px 10px 17px; font-size: 13px; }
  .sla-over svg{ width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce){
  .sla-over{ transition: opacity .01s; }
  .sla-over svg{ transition: none; }
  .sla-over.is-zichtbaar:hover{ transform: translate(-50%, 0); }
}

/* ================= "Alles eromheen"-kaart (homepage) =================
   Vervangt de oude sticky-stack van vier dienstpanelen. Webwaarts verkoopt
   geen vier losse diensten meer maar één ding: wij bouwen de site en regelen
   alles wat daar omheen nodig is. Eén witte kaart op de donkere sheet, met een
   lopende tekst en daaronder een inventarislijst als mono-chips. Bewust geen
   klikbare items: het is geen menu om uit te kiezen, het is wat u sowieso krijgt. */
.alles-kaart{
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 4vw, 56px);
}
.alles-kaart .eyebrow{ color: var(--ink); }
.alles-tekst{
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  line-height: 1.5;
  font-weight: 500;
  max-width: 62ch;
  margin-top: 18px;
}
.alles-tags{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top: clamp(28px,3.5vw,40px);
  padding-top: 26px;
  border-top: 1px solid var(--ink-14);
}
.alles-tags span{
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink);
  border: 1px solid rgba(17,17,17,.22);
  border-radius: 99px;
  padding: 9px 15px;
  white-space: nowrap;
}

/* ================= Hero-kop breekt af =================
   Hier stond tot 03-09-2026 `white-space: nowrap`, want "Wij bouwen websites."
   moest op desktop op één regel staan. Dat kon toen de hero verder leeg was.
   Sinds Benjamin en Stijn in het amberen vlak rechts staan is die breedte er
   niet meer: op één regel liep de kop dwars over hun donkere truien heen en was
   hij daar niet meer te lezen.

   Hij breekt nu op de beschikbare breedte, en die wordt hierboven bij
   .hero-home h1 uitgerekend uit de breedte van het vlak. Geen vaste breuk met
   een <br> en geen nowrap: het is één zin die zich naar de kolom voegt. */


/* ================= Knelpuntenlijst =================
   De vijf knelpunten stonden als lopende alinea op de homepage. Als lijst met
   een amber streepje zijn ze scanbaar: iemand herkent zijn eigen situatie in
   een halve seconde in plaats van na een alinea lezen. Geen nummering, bewust:
   het is geen keuzemenu en er zit geen volgorde in. */
.knel-lijst{
  display:grid; gap: 2px;
  margin-top: 28px;
  border-top: 1px solid var(--ink-14);
}
.knel-lijst li{
  display:flex; align-items:flex-start; gap:16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ink-14);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  font-weight: 600;
  line-height: 1.4;
}
.knel-lijst li::before{
  content:'';
  flex: none;
  width: 20px; height: 3px;
  margin-top: .62em;
  background: var(--amber);
  border-radius: 2px;
}
.on-dark .knel-lijst{ border-top-color: var(--paper-16); }
.on-dark .knel-lijst li{ border-bottom-color: var(--paper-16); }

/* Zware slotstelling onder een sectie. Was overal als inline stijl herhaald. */
/* ---- Stelling die in zijn kolom meebeweegt (over-ons, vel 1) ----
   De kolom rekt mee met de tekst ernaast (grid: align-items stretch). Het
   drift-blok vult die hoogte en zet de stelling in het midden, zodat er boven en
   onder ruimte is om in te bewegen; de uitslag staat op data-drift in de HTML.
   Onder 860px staan de kolommen onder elkaar en is die ruimte er niet: dan
   overschrijft !important de inline transform die layout.js zet. */
.stelling-kolom{ display: flex; }
.stelling-drift{
  display: flex; flex-direction: column; justify-content: center;
  flex: 1 1 auto; will-change: transform;
}
.stelling-drift .stelling{ margin-top: 0; }
@media (max-width: 860px){
  .stelling-drift{ transform: none !important; }
}

.stelling{
  /* De padding-top hoorde bij de lijn die hier stond. Die lijn is weg, dus telde
     hij bovenop de marge en stond de stelling los van de alinea waar hij bij
     hoort. Alles zit nu in de marge, en die is krapper dan eerst. */
  margin-top: clamp(22px,2.6vw,30px);
  font-size: clamp(1.08rem,1.62vw,1.44rem);
  font-weight: 700;
  line-height: 1.35;
  max-width: 40ch;
}


/* ================= Even voorstellen =================
   Het blok direct onder de vertelling: links de twee foto's uit de shoot,
   rechts in vier alinea's wie we zijn en hoe we werken, en daaronder een rij
   pillen naar de andere pagina's.

   Dit verving op 2026-08-28 het component .wegwijzer: vier panelen met een kop,
   een diagonale pijl en een uitlegregel eronder. Die uitlegregels hoorden bij
   een uitlegblok van ruim zeshonderd woorden waarin een bezoeker kwijt kon
   raken. Bij een blok van ongeveer een schermhoogte is de naam van de pagina
   genoeg en zijn de regels eronder ruis.

   Het beeld staat links en de tekst rechts, want de vertelling erboven eindigt
   linksonder: de blik komt daar binnen en loopt dan de tekst in. Er stond eerst een tweede,
   kleinere foto overheen (een laptop in de hand met een klantsite erop); die is er op verzoek
   weer uit, dus .vs-beeld draagt nu alleen de staande opname. */
.voorstel{
  display: grid;
  grid-template-columns: minmax(0,.86fr) minmax(0,1fr);
  gap: clamp(48px, 6vw, 104px);
  align-items: center;
}
.vs-beeld{ position: relative; }
.vs-groot{
  margin: 0;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-2);
}
.vs-groot img{ width: 100%; height: 100%; object-fit: cover; }
/* Naast elkaar is het beeld precies zo lang als de tekstkolom: het raster rekt
   beide kolommen (align-items:stretch) en de figuur vult de zijne, dus de 2/3
   hierboven geldt alleen nog als de kolommen gestapeld staan. Daar heeft de
   kolom geen vaste hoogte en zou height:100% de figuur tot niets laten
   inklappen. Let op: de tekst bepaalt hiermee de bijsnede van de foto, dus het
   tekstblok moet kort blijven; wordt het langer, dan rekt het portret uit. */
@media (min-width: 981px){
  .voorstel{ align-items: stretch; }
  .vs-groot{ aspect-ratio: auto; height: 100%; }
}
/* De kop blijft op één regel: de kicker erboven is eruit, dus de kop draagt de
   sectie alleen en moet als één gebaar lezen, niet als twee halve regels.
   Onder 620px mag hij weer breken, anders loopt hij de kolom uit. */
.vs-tekst h2{ max-width: none; white-space: nowrap; font-size: clamp(1.5rem, 2.7vw, 2.25rem); }
@media (max-width: 620px){ .vs-tekst h2{ white-space: normal; } }

/* Eén pil per pagina, allemaal in amber (op verzoek). Het waren er vijf, sinds
   28-08 vier: "Wat u krijgt" is eruit, die pagina gaat later op in de nieuwe
   Werk-pagina. Ze stonden hier eerst een maat kleiner met een gedimde glow, en dat
   was precies het probleem: kleine amberen lozenges onder een lange lap tekst op
   inkt lezen als één gele veeg waarin geen enkele knop om een klik vraagt. Nu
   andersom:
   - vrijwel de volle knopmaat, zodat ze meetellen met de knoppen elders op de site;
   - een pijl op elke pil, niet alleen op contact, want een pijl leest als "hier ga
     je heen" en dat is precies wat deze rij is: vijf routes, geen vijf labels;
   - de glow van .btn-primary weer op sterkte. Die stond zacht omdat de schaduwen
     in elkaar overliepen, maar met space-between staan de pillen ver genoeg uit
     elkaar dat elke pil zijn eigen schaduw houdt (space-between verdeelt ze over
     de volle breedte, dus bij een pil minder schuiven ze vanzelf op en blijven de
     verhoudingen kloppen);
   - een diepere lift bij hover (-5px) met een duidelijk warmere schaduw, zodat de
     pil waar de muis op staat echt loskomt van de rij.
   De entree is per pil vertraagd (data-reveal-delay in index.html), dus ze komen
   één voor één binnen in plaats van als blok: het oog telt ze, en dan zijn het
   vijf dingen in plaats van één streep. */
.pillen{
  display: flex;
  flex-wrap: wrap;
  /* De pillen staan op een vaste afstand van elkaar, als rij gecentreerd onder
     foto en tekst samen. Tot 15-09-2026 stond hier space-between over de volle
     breedte, en dan stonden vier pillen 131px uit elkaar (op 1528 breed): los
     van elkaar in plaats van een rij. Benjamin: "iets dichter bij elkaar". Die dag
     eerst links bij de foto begonnen (flex-start), daarna "zet de knoppen wat naar
     rechts": gecentreerd. Onder 1180px breken ze en staan ze weer links, zie de
     media query hieronder. */
  justify-content: center;
  /* Max 32px (was 44): met "Plan een afspraak" (16-09-2026) is de laatste pil
     breder en brak de rij anders op 1440 breed. */
  gap: 16px clamp(20px, 2.4vw, 32px);
  /* Een afstand naar de tekst erboven. De padding-top hoorde bij de lijn die hier
     stond; zonder lijn telde die er gewoon bovenop en zakte de rij te ver weg. */
  margin-top: clamp(44px, 5vw, 88px);
}
.pillen .btn{ font-size: 1rem; padding: 1em 1.5em; }
/* Omgedraaid op 16-09-2026 ("draai de 4 knoppen en de plan knop qua opmaak om"):
   de vier pillen naar de pagina's zijn gevuld papier met inktletters, en Plan een
   afspraak (naar contact) is de enige amber pil, met gloed en een amber ring die om
   de paar seconden van hem af loopt. De ring zit op ::after zodat de knop zelf niet
   beweegt; bij hover stopt hij. Daarvoor: vier amber pillen en een papieren
   Kennismaken (daarvoor weer doorzichtig met een lichte rand). */
.pillen .btn-primary{
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(17,17,17,.05), 0 14px 30px -16px rgba(236,236,234,.35);
}
.pillen .btn-primary:hover{
  box-shadow: 0 1px 0 rgba(17,17,17,.05), 0 24px 42px -18px rgba(236,236,234,.55);
}
.btn.pil-kennis{
  background: var(--amber);
  color: var(--ink);
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(17,17,17,.05), 0 14px 30px -14px rgba(245,179,1,.6);
}
.btn.pil-kennis:hover{
  box-shadow: 0 1px 0 rgba(17,17,17,.05), 0 26px 46px -16px rgba(245,179,1,.95);
}
.pil-kennis::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 2.5px solid var(--amber);
  opacity: 0;
  pointer-events: none;
}
.is-visible .pil-kennis::after{ animation: pil-ring 2.6s cubic-bezier(.2,.6,.3,1) 1.2s infinite; }
@keyframes pil-ring{
  0%{ opacity: 1; transform: scale(1); }
  30%{ opacity: .85; transform: scale(1.08, 1.3); }
  65%{ opacity: 0; transform: scale(1.16, 1.55); }
  100%{ opacity: 0; transform: scale(1.16, 1.55); }
}
.pil-kennis:hover::after{ animation: none; }
@media (prefers-reduced-motion: reduce){
  .is-visible .pil-kennis::after{ animation: none; }
}
/* De pijl staat stil tot je erop komt; dan schuift hij een stukje naar rechts. */
.pillen .btn:hover .arrow{ transform: translateX(5px); }

/* De pillen komen één voor één binnen zodra de rij in beeld staat. Dat gebeurt
   met CSS en niet met data-reveal per knop: de reveal-observer zet zijn
   vertraging als inline transition-delay, en die blijft daarna staan, waardoor
   de hover van de laatste pil een derde seconde te laat op gang komt. Vandaar
   de vertraging hier, per nth-child, en op :hover expliciet weer op nul. */
.pillen .btn{ opacity: 0; transform: translateY(16px); }
.pillen.is-visible .btn{
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .4s var(--ease);
}
.pillen.is-visible .btn:nth-child(1){ transition-delay: 80ms; }
.pillen.is-visible .btn:nth-child(2){ transition-delay: 150ms; }
.pillen.is-visible .btn:nth-child(3){ transition-delay: 220ms; }
.pillen.is-visible .btn:nth-child(4){ transition-delay: 290ms; }
.pillen.is-visible .btn:nth-child(5){ transition-delay: 360ms; }
/* De lift staat hier en niet bij .pillen .btn-primary:hover, want de regel die de
   pil na binnenkomst op transform:none zet is even zwaar en staat verderop; dan
   zou de knop bij hover blijven staan. */
.pillen.is-visible .btn:hover{
  transform: translateY(-5px);
  transition-delay: 0s;
  transition-duration: .4s;
}
@media (prefers-reduced-motion: reduce){
  .pillen .btn{ opacity: 1; transform: none; }
  .pillen.is-visible .btn{ transition: none; }
}

/* ---- De wegwijzer onderaan de homepage (18-09-2026) ----
   Benjamin: "doe iets met deze witte knoppen op home, ze zijn lelijk". Hier stond
   .pillen: vier gevulde papieren pillen plus de amberen naar contact, gecentreerd op
   het donkere vel. Twee dingen klopten daar niet aan. Vier witte vlakken naast elkaar
   op zwart zijn even luid als de amberen knop ernaast, dus de rij had geen richting
   meer; en de labels lopen van "Over ons" tot "Veelgestelde vragen", ruim twee keer zo
   breed, waardoor de pillen alle vier een andere maat hadden en de rij hobbelde.

   Nu een register: vier regels onder elkaar met een haarlijn ertussen, kopletter links
   en de pijl helemaal rechts aan de rand van de kolom. Dat leest als een inhoudsopgave,
   en het sluit aan op de alinea erboven die diezelfde vier pagina's opnoemt. De lijnen
   doen het werk dat de vlakken deden: ze bakenen af zonder gewicht toe te voegen.

   OP HET ZWART IS DE LIJN HET ENIGE WAT ER STAAT, dus hij mag niet te hard. paper-16
   (alfa .16) is net zichtbaar op inkt en verdwijnt niet; een lijn op .30 wordt een
   hek, op .08 zie je hem niet meer.

   HOVER GEEFT DRIE SIGNALEN TEGELIJK, alle drie klein: het label schuift een stukje
   naar rechts, de pijl schuift mee en wordt amber, en er komt een amberen waas vanaf de
   linkerrand opzetten. Samen is dat duidelijk zonder dat de regel van kleur verspringt.
   Het label zelf blijft papierkleur: een woord van 40px dat in een keer amber wordt is
   op dit vel te veel.

   De knop naar contact hoort hier niet tussen. Dat is een handeling en geen pagina, dus
   die staat als enige nog als pil, in amber, los onder het register (.wegwijzer-slot). */
.wegwijzer{
  margin-top: clamp(44px, 5vw, 88px);
  border-top: 1px solid var(--paper-16);
}
.wegwijzer-regel{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 2.1vw, 30px) clamp(10px, 1.2vw, 18px);
  border-bottom: 1px solid var(--paper-16);
  color: var(--paper);
  text-decoration: none;
  position: relative;
  transition: border-color .4s var(--ease);
}
/* GEEN GLOED ACHTER DE REGEL (Benjamin, 18-09-2026: "geen gele gloed op het zwarte
   ding"). Hier stond bij hover een amberen waas op een ::before onder de tekst. Het
   donkere vel heeft al een eigen licht, en een tweede geel dat per regel aan- en
   uitgaat maakt het vlak onrustig. De hover doet het nu met beweging en met de lijn:
   het label schuift op, de pijl schuift mee en wordt amber, en de onderlijn kleurt
   mee. Dat is genoeg om te zien waar je staat, zonder vlak. */
.wegwijzer-regel:hover{ border-bottom-color: rgba(245,179,1,.55); }
.wegwijzer-regel .label{
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-size: clamp(1.45rem, 3vw, 2.5rem);
  transition: transform .45s var(--ease);
}
.wegwijzer-regel .arrow{
  display: inline-block;
  flex: none;
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  color: var(--paper-45);
  transition: transform .45s var(--ease), color .35s var(--ease);
}
.wegwijzer-regel:hover .label{ transform: translateX(clamp(6px, .9vw, 14px)); }
.wegwijzer-regel:hover .arrow{ transform: translateX(8px); color: var(--amber); }
.wegwijzer-regel:focus-visible{ outline: 2px solid var(--amber); outline-offset: -4px; }

/* De regels komen een voor een binnen, net als de pillen dat deden: het oog telt ze,
   en dan zijn het vier dingen in plaats van een blok lijnen. Zie de notitie bij .pillen
   waarom die vertraging hier staat en niet als data-reveal per regel. */
.wegwijzer .wegwijzer-regel{ opacity: 0; transform: translateY(14px); }
.wegwijzer.is-visible .wegwijzer-regel{
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .4s var(--ease);
}
.wegwijzer.is-visible .wegwijzer-regel:nth-child(1){ transition-delay: 80ms; }
.wegwijzer.is-visible .wegwijzer-regel:nth-child(2){ transition-delay: 150ms; }
.wegwijzer.is-visible .wegwijzer-regel:nth-child(3){ transition-delay: 220ms; }
.wegwijzer.is-visible .wegwijzer-regel:nth-child(4){ transition-delay: 290ms; }
@media (prefers-reduced-motion: reduce){
  .wegwijzer .wegwijzer-regel{ opacity: 1; transform: none; }
  .wegwijzer.is-visible .wegwijzer-regel{ transition: none; }
  .wegwijzer-regel .label,
  .wegwijzer-regel .arrow{ transition: none; }
}

/* De enige pil die overblijft, los onder het register. */
.wegwijzer-slot{
  margin-top: clamp(30px, 3.4vw, 54px);
  display: flex;
  justify-content: center;
}
.wegwijzer-slot .btn{ font-size: 1rem; padding: 1em 1.5em; }
.wegwijzer-slot .btn:hover{ transform: translateY(-5px); }

/* Onder 560px is er geen ruimte meer voor label en pijl op een regel naast elkaar bij
   "Veelgestelde vragen"; dan mag het label gewoon afbreken en blijft de pijl rechts
   op de eerste regel staan. */
@media (max-width: 560px){
  .wegwijzer-regel{ align-items: flex-start; gap: 16px; }
  .wegwijzer-regel .arrow{ margin-top: .2em; }
}

@media (max-width: 980px){
  .voorstel{ grid-template-columns: 1fr; gap: 56px; }
  .vs-beeld{ max-width: 460px; }
}
/* Vijf pillen op knopmaat met een pijl passen tot ongeveer 1180px op een regel.
   Daaronder breken ze, en dan is uitvullen lelijk: een halve laatste regel wordt
   uit elkaar getrokken. Dus vanaf daar gewoon links uitlijnen. */
@media (max-width: 1180px){
  .pillen{ justify-content: flex-start; }
}
@media (max-width: 560px){
  .vs-beeld{ max-width: none; }
}


/* ================= Staat-van-uw-site kaarten =================
   De vijf, zes situaties waarin een mkb-site meestal verkeert. Bedoeld als
   herkenning: de lezer wijst zichzelf aan voordat wij iets beweren. Hairline-
   raster (gap 1px op een lichte achtergrond) zodat het als één tabel leest en
   niet als losse tegels. */
.staat-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--paper-16);
  border: 1px solid var(--paper-16);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: clamp(28px,4vw,44px);
}
.staat-kaart{
  background: var(--ink);
  padding: clamp(22px,2.4vw,30px);
  display:flex; flex-direction:column; gap:10px;
}
.staat-kaart h3{
  font-size: clamp(1.1rem,1.5vw,1.35rem);
  letter-spacing: -0.02em;
}
.staat-kaart p{
  color: var(--paper-70);
  font-size: clamp(.98rem,1.15vw,1.08rem);
  line-height: 1.5;
}
@media (max-width: 900px){ .staat-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .staat-grid{ grid-template-columns: 1fr; } }

/* ================= Gevolg-tabel =================
   Links wat de ondernemer zelf merkt, rechts wat het hem werkelijk kost. De
   koppeling is het hele punt: de symptomen kent hij, de rekening niet. Het
   amber streepje rechts markeert de omslag van waarneming naar gevolg. */
.gevolg{ margin-top: clamp(24px,3vw,36px); border-top: 1px solid var(--ink-14); }
.gevolg-kop{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,3vw,48px);
  padding: 16px 0 4px;
}
.gevolg-rij{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,3vw,48px);
  padding: 20px 0;
  border-bottom: 1px solid var(--ink-14);
  align-items: start;
}
.gevolg-merkt{
  font-weight: 700;
  font-size: clamp(1rem,1.2vw,1.13rem);
  line-height: 1.45;
}
.gevolg-kost{
  position: relative;
  padding-left: 30px;
  color: var(--tekst);
  font-size: clamp(1rem,1.2vw,1.13rem);
  line-height: 1.45;
}
.gevolg-kost::before{
  content:'';
  position:absolute; left:0; top:.6em;
  width: 18px; height: 3px; border-radius: 2px;
  background: var(--amber);
}
.on-dark .gevolg{ border-top-color: var(--paper-16); }
.on-dark .gevolg-rij{ border-bottom-color: var(--paper-16); }
@media (max-width: 760px){
  .gevolg-kop{ display:none; }
  .gevolg-rij{ grid-template-columns: 1fr; gap: 10px; }
}


/* ================= Blok =================
   Container om een brok informatie fysiek af te bakenen. De pagina bevat veel
   inhoud; zonder omkadering leest dat als één muur tekst. Een blok heeft een
   eigen vlak, een optionele kop met een scheidingslijn, en staat los van de
   tekst eromheen. Op donkere sheets een tint lichter dan de sheet zelf. */
.blok{
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
}
.on-dark .blok{ background: var(--ink-2); }
.blok + .blok{ margin-top: 20px; }
/* Naast elkaar in een grid geldt die stapelmarge niet: daar zorgt de gap al
   voor de tussenruimte en zakt het tweede blok anders 20px omlaag. */
.grid-2 > .blok + .blok,
.grid-3 > .blok + .blok,
.blok-rij > .blok + .blok{ margin-top: 0; }
.blok-kop{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--ink-14);
}
.on-dark .blok-kop{ border-bottom-color: var(--paper-16); }
.blok-kop .telling{
  font-weight: 700; font-size: .95rem; color: var(--tekst-stil); white-space: nowrap;
}

/* Sectiemerk: kort label bovenaan een sectie zodat de bezoeker ziet in welk
   deel van het verhaal hij zit. Geen nummering, alleen de rol van de sectie. */
.sectie-merk{
  display:inline-block;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin-bottom: 18px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--amber);
}
.on-dark .sectie-merk{ color: var(--amber); }

/* Drie blokken naast elkaar, gelijke hoogte */
.blok-rij{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 900px){ .blok-rij{ grid-template-columns: 1fr; } }

/* Binnen een blok mag de knelpuntenlijst geen dubbele bovenlijn hebben */
.blok .knel-lijst{ margin-top: 0; border-top: none; }
.blok .gevolg{ margin-top: 0; border-top: none; }
.blok .alles-tags{ margin-top: 0; padding-top: 0; border-top: none; }

/* ================= Zoekresultaat-scène (sectie "Waar het begint") =================
   De bezoeker kijkt letterlijk mee over de schouder van zijn eigen klant: een
   nagebootste resultatenpagina met drie versies van hetzelfde bedrijf. Bewust
   geen echte zoekmachine nagebouwd (geen logo, geen vreemde kleuren), alleen de
   vorm ervan in onze eigen typografie. De amber annotatielabels staan schuin:
   op een verder strak orthogonaal raster is dat de enige losse hand op de
   pagina, en precies dat maakt ze aanwijzend in plaats van decoratief. */
.zoek{ margin-top: clamp(28px,4vw,44px); max-width: 880px; }
.zoek-balk{
  display:flex; align-items:center; gap:14px;
  background: var(--paper);
  border-radius: 99px;
  padding: 15px clamp(20px,2.4vw,26px);
  box-shadow: 0 20px 44px rgba(0,0,0,.30);
}
.zoek-balk svg{ flex:none; color: var(--ink-40); }
.zoek-query{
  font-size: clamp(1rem,1.3vw,1.14rem); font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden;
}
.zoek-caret{
  display:inline-block; width:2px; height:1.1em;
  background: var(--amber); vertical-align: -.16em; margin-left: 3px;
  animation: zoek-knipper 1.05s steps(1) infinite;
}
@keyframes zoek-knipper{ 0%,49%{ opacity:1 } 50%,100%{ opacity:0 } }
@media (prefers-reduced-motion: reduce){ .zoek-caret{ animation: none; } }

.zoek-intro{
  margin-top: clamp(22px,2.8vw,32px);
  font-weight: 700;
  color: var(--paper-70);
}
.zoek-lijst{ display:grid; gap: 4px; margin-top: 16px; }
.zoek-res{
  position: relative;
  padding: clamp(19px,2.2vw,25px) clamp(20px,2.4vw,28px);
  padding-right: clamp(20px,15vw,210px);
  background: var(--ink-2);
  border: 1px solid var(--paper-16);
  border-radius: var(--radius-md);
}
.zoek-res .url{ font-size: .85rem; font-weight: 600; letter-spacing: .03em; color: var(--paper-45); }
.zoek-res h3{
  margin-top: 6px;
  font-size: clamp(1.1rem,1.45vw,1.3rem); font-weight: 800; letter-spacing: -.01em;
  color: var(--paper);
}
.zoek-res p:last-of-type{ margin-top: 8px; color: var(--paper-70); line-height: 1.5; max-width: 56ch; }
.zoek-note{
  position: absolute; top: 50%; right: clamp(16px,2vw,26px);
  transform: translateY(-50%) rotate(-2.4deg);
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber);
  background: rgba(17,17,17,.55);
  border: 1.5px solid var(--amber);
  border-radius: 6px;
  padding: 7px 12px;
  white-space: nowrap;
}
@media (max-width: 760px){
  .zoek-res{ padding-right: clamp(20px,2.4vw,28px); }
  .zoek-note{ position: static; transform: rotate(-1.8deg); display:inline-block; margin-top: 14px; }
}

/* ================= De rekening (sectie "Wat het u kost") =================
   De sectie zei al "er komt alleen nooit een factuur voor", dus is de sectie
   zelf de factuur geworden. De bedragen staan bewust niet in euro's maar in
   gevolgen, want dat is precies het punt: de post is er wel, de rekening niet.
   Onderrand is gekarteld via een mask (bonnetje). Let op: een mask knipt ook
   de box-shadow weg, daarom zit de schaduw als drop-shadow op de wrapper,
   die de kartels dan netjes meeneemt. */
.rekening-wrap{ max-width: 980px; filter: drop-shadow(0 26px 52px rgba(17,17,17,.16)); }
.rekening{
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: clamp(26px,3.4vw,46px);
  padding-bottom: clamp(40px,4.6vw,58px);
  -webkit-mask-image: linear-gradient(#000 0 0), radial-gradient(circle 9px at 16px 100%, transparent 98%, #000 100%);
  -webkit-mask-size: 100% calc(100% - 9px), 32px 18px;
  -webkit-mask-position: top left, bottom left;
  -webkit-mask-repeat: no-repeat, repeat-x;
  mask-image: linear-gradient(#000 0 0), radial-gradient(circle 9px at 16px 100%, transparent 98%, #000 100%);
  mask-size: 100% calc(100% - 9px), 32px 18px;
  mask-position: top left, bottom left;
  mask-repeat: no-repeat, repeat-x;
}
.rek-kop{
  display:flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ink);
}
.rek-titel{
  font-size: clamp(1.25rem,1.9vw,1.62rem); font-weight: 900;
  letter-spacing: .16em; text-transform: uppercase;
}
.rek-meta{
  font-size: .84rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tekst-stil); white-space: nowrap;
}
.rek-adres{
  display:grid; grid-template-columns: repeat(2,1fr); gap: 8px clamp(16px,3vw,44px);
  padding: 18px 0 20px;
  font-size: .95rem; color: var(--tekst-stil);
}
.rek-adres b{ color: var(--ink); font-weight: 800; }
.rek-regel,
.rek-totaal{
  display:grid; grid-template-columns: 1fr minmax(0,.9fr); gap: clamp(14px,3vw,44px);
  align-items: baseline;
}
.rek-regel{
  padding: 16px 0;
  border-bottom: 1px dotted rgba(17,17,17,.32);
}
.rek-regel:first-of-type{ border-top: 1px dotted rgba(17,17,17,.32); }
.rek-post{ font-weight: 700; font-size: clamp(1rem,1.18vw,1.1rem); line-height: 1.45; }
.rek-bedrag{ color: var(--tekst-stil); font-size: clamp(1rem,1.18vw,1.1rem); line-height: 1.45; }
.rek-totaal{
  margin-top: 4px;
  padding-top: 17px;
  border-top: 3px double var(--ink);
}
.rek-totaal .rek-post{ text-transform: uppercase; letter-spacing: .13em; font-weight: 900; }
.rek-totaal .rek-bedrag{ color: var(--ink); font-weight: 900; text-align: right; }
.rek-stempel-rij{ display:flex; justify-content: flex-end; margin-top: clamp(20px,2.6vw,30px); padding-right: 6px; }
.rek-stempel{
  transform: rotate(-9deg);
  font-size: clamp(.9rem,1.4vw,1.16rem); font-weight: 900;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber-deep);
  border: 3px solid var(--amber-deep);
  border-radius: 8px;
  padding: 8px 15px;
  opacity: .92;
}
@media (max-width: 700px){
  .rek-regel, .rek-totaal{ grid-template-columns: 1fr; gap: 6px; }
  .rek-adres{ grid-template-columns: 1fr; }
  .rek-totaal .rek-bedrag{ text-align: left; }
  .rek-stempel-rij{ justify-content: flex-start; }
}

/* ================= Doorgestreepte knelpuntenlijst =================
   Elk knelpunt wordt voor de ogen van de lezer weggestreept zodra de lijst in
   beeld komt, met een korte vertraging per regel (`--i` staat inline per item).
   De lijst doet daarmee zelf wat de sectie belooft, zonder dat er een zin voor
   nodig is die begint met "wij". Haakt aan op de `is-visible`-klasse die de
   reveal-observer in layout.js zet. */
.streep-lijst{ display:grid; }
.streep-lijst li{
  position: relative;
  padding: 15px 0 15px 34px;
  border-bottom: 1px solid var(--ink-14);
  font-size: clamp(1.02rem,1.25vw,1.16rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  transition: color .55s var(--ease);
  transition-delay: calc(var(--i,0) * 110ms + 280ms);
}
.streep-lijst li::before,
.streep-lijst li::after{
  content:'';
  position: absolute;
  top: calc(15px + .7em);
  margin-top: -1.5px;
  height: 3px;
  border-radius: 2px;
  background: var(--amber);
}
.streep-lijst li::before{ left: 0; width: 20px; }
.streep-lijst li::after{
  left: 34px; right: 0;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .6s var(--ease);
  transition-delay: calc(var(--i,0) * 110ms + 280ms);
}
.streep-lijst.is-visible li{ color: var(--tekst); }
.streep-lijst.is-visible li::after{ transform: scaleX(1); }
.on-dark .streep-lijst li{ color: var(--paper); border-bottom-color: var(--paper-16); }
@media (prefers-reduced-motion: reduce){
  .streep-lijst li,
  .streep-lijst li::after{ transition: none; }
}





/* ================= Homepage: hero en de vier lege schermen =================
   De hero staat weer als gewone sectie op de pagina. Daaronder staan vier
   lege blokken die de ruimte vasthouden voor het verhaal dat in
   documentatie/005_Homepage_Motion.md is vastgelegd. Ze bevatten bewust
   niets: eerst de losse schermen ontwerpen, dan pas wat ertussen gebeurt.
   ========================================================================= */
/* De hero vult het eerste scherm en zet zijn inhoud in het midden, in plaats
   van er een aanloop van bovenaf op te tellen. Met die aanloop klopte het
   maar op één schermhoogte: op een laag venster stond alles te laag en op een
   hoog venster te hoog. Nu bepaalt het scherm de verdeling.

   De aanloop die er nog staat is geen uitlijning maar ruimte voor de vaste
   koptekst, die immers over de bovenkant heen ligt. Doordat boven meer ruimte
   staat dan onder, komt de inhoud net onder het echte midden uit, en dat is
   waar het optisch klopt. */
/* ---------- de gele gloed ----------
   Terug uit het eerste concept (_concept/Volledige-site_v1_concept.html) en
   van het visitekaartje: amber tegen het papier, nooit als vlak maar als licht
   dat van buiten het kader komt. Het amber is #F5B301, hier als rgba omdat een
   kleurvariabele geen alfa meekrijgt.

   HIJ IS TERUG VAN .50 NAAR .20 (03-09-2026), toen het amberen vlak met Benjamin
   en Stijn op de hero kwam. Op .50 stonden er twee amberen dingen op één scherm
   die niets met elkaar te maken hadden: een solide vlak rechtsonder en een even
   sterke waas rechtsboven. Op .20 leest de gloed als het licht dat van dat vlak
   af komt, en dat is precies wat een gloed hoort te doen. Verdwijnt het vlak ooit
   weer, zet hem dan terug op .50, want op een leeg papieren scherm draagt hij het
   licht in zijn eentje.

   Sinds 2026-08-26 ligt de gloed alleen nog op de hero. Hij liep daarvoor met
   zeven vlekken over de hele baan, dus ook achter de vertelling, en daar werkte
   hij tegen het beeld: die scenes zijn plat en hebben geen licht, en een
   amberwaas eronder maakt het canvas troebel. Op de hero doet hij wel wat hij
   moet doen, want daar is het papier verder leeg.

   Twee vlekken, en ze zijn met opzet ongelijk. De eerste is het beeld van het
   visitekaartje (700_Kennisbank/Visitekaartje): een brede amber wassing die het
   hele kwadrant rechtsboven vult, het felst tegen de rechterrand, en die naar
   links en naar onder uitloopt tot ongeveer het midden van het scherm. Zij
   draagt het licht in haar eentje (alfa .50, sinds 03-09-2026 .20 omdat
   Benjamin en Stijn er nu voor staan). De tweede is links niet meer dan
   een aanzet (alfa .08) en is er alleen zodat die kant geen dood papier is.
   Zet je hem hoger, dan worden het twee vlekken naast elkaar en is het geen
   invallend licht meer.

   LET OP MET DE VERTICALE PLAATS. Die rekent vanaf de bovenkant van de laag, en
   de laag begint op -55vh, dus 55vh boven de hero. Een vlek op "20vh" staat dus
   35vh boven de bovenrand van de pagina en is onzichtbaar; daar is hij op
   2026-08-26 een keer op gestrand. Vandaar de calc(): 55vh brengt je op de
   bovenkant van de hero, en wat je erbij optelt is de plek in de hero zelf.

   Ze doven allebei uit boven de onderrand van de hero, en dat is de maat waar
   het op aankomt: het doek van de vertelling begint 40vh voor het einde van de
   hero (.punt-doek heeft margin-top: -40vh), dus alles wat verder reikt dan
   ongeveer 55vh komt achter het canvas te liggen. Vandaar dat de vlekken
   verticaal in vh staan en niet in procenten: procenten rekenen over de hele
   laag, en die is negen schermen hoog, dus dan zakt een vlek de vertelling in
   zodra een hoofdstuk langer of korter wordt.

   De laag zit op een eigen ::before en niet op de hero zelf, zodat hij met
   transform verschoven kan worden zonder de achtergrond opnieuw te laten
   schilderen, en zodat hij boven het kader mag uitsteken. Hoeveel hij schuift
   regelt de gloedbaan-functie in layout.js.

   .gloedbaan omvat nog steeds hero en doek allebei, want hij draagt ook de
   papierkleur voor allebei; hero en doek zijn zelf doorzichtig. */
.gloedbaan{
  position: relative;
  background-color: var(--paper);
}
.gloedbaan::before{
  content: "";
  position: absolute;
  top: -55vh; left: 0; right: 0;
  height: 175vh;                 /* -55vh tot 120vh: de hero plus overmaat */
  z-index: 0;
  pointer-events: none;
  transform: translate3d(0, var(--gloed-y, 0px), 0);
  background-image:
    radial-gradient(62vw 64vh at 92% calc(55vh + 14vh), rgba(245,179,1,.20), rgba(245,179,1,0) 62%),
    radial-gradient(56vw 44vh at 10% calc(55vh + 21vh), rgba(245,179,1,.08), rgba(245,179,1,0) 62%);
}
/* geen beweging als iemand daarom vraagt */
@media (prefers-reduced-motion: reduce){
  .gloedbaan::before{ transform: none; }
}
/* doorzichtig: de baan eronder levert het papier en de gloed */
.gloedbaan > .hero-home{ background: transparent; }

/* --duo staat op de hero zelf en niet op .hero-duo, want de kop hiernaast rekent
   er ook mee: de tekstkolom is wat er overblijft als het vlak met Benjamin en
   Stijn zijn breedte heeft gekregen. Eén getal stuurt dus allebei. */
.hero-home{
  --duo: clamp(280px, 32vw, 480px);
  --kop: clamp(2.7rem, 6.6vw, 6.4rem);       /* lettergrootte van de h1; de twee rekenen ermee */
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  /* De inhoud staat gecentreerd in de schermhoogte, dus deze twee bepalen
     samen hoe ver de kop onder de vaste koptekst hangt: het verschil tussen
     boven en onder schuift het midden. Tot 07-09-2026 stond boven meer dan
     onder (110/13vh/165 tegen 64/8vh/105) en hing de kop net onder het echte
     midden; op verzoek is dat omgedraaid, zodat de kop een slag dichter bij
     het logo komt (ongeveer 25 tot 40px, afhankelijk van de schermhoogte).
     Boven blijft minstens de hoogte van de koptekst plus wat lucht, voor als
     de inhoud ooit hoger wordt dan het scherm. Staand (onder 700px) gelden de
     oude maten, zie de media query verderop. */
  padding-top: clamp(100px, 11vh, 140px);
  padding-bottom: clamp(100px, 13vh, 165px);
}
.hero-home > .wrap{ width: 100%; position: relative; z-index: 2; }

/* ---- Benjamin en Stijn op de hero ----
   Een vrije uitsnede (webp met alfa) rechts in de hero, tegen de onderrand.
   Het amberen vlak dat hier op 03-09-2026 een dag achter stond is weg; wat
   overblijft is de foto zelf plus de gloed van .gloedbaan::before.

   DRIE MATEN, EN ZE HANGEN ALLEMAAL AAN --duo (staat op .hero-home, want de kop
   ernaast rekent er ook mee):
     --duo     de breedte van de twee. Twee mensen naast elkaar zijn bijna
               even breed als hoog, dus dit staat ruimer dan bij één figuur.
     --figuur  de hoogte waarop het hele bestand staat. Het bestand is 1.027
               breed op hoog (1200 bij 1169), dus dit is --duo gedeeld door 1.027.
     --zicht   wat je daarvan ziet. De portretten zijn op heuphoogte gekaderd,
               dus het hele bestand (1,0); lager snijdt door de armen.

   Vervang je de foto, meet dan die 1.027 opnieuw en kies --zicht op het oog.

   ZE HANGEN AAN DE KOP: OGEN EN MOND OP DE HOOGTE VAN "WIJ" (06-09-2026).
   Tot 05-09-2026 stond de doos met de basis net onder de vouw (--voet), zodat
   de streep pas bij het scrollen in beeld kwam. Op verzoek staan de twee nu
   hoger: de ogen en de mond op de hoogte van het woord "Wij", de eerste regel
   van de kop. Daarvoor staat .hero-duo IN de .wrap (index.html), direct na de
   h1, en rekent hij vanaf de bovenkant van de wrap, wat de bovenkant van de
   kop is (h1 heeft margin 0). Twee maten doen het werk:
     --kop      de lettergrootte van de h1 (op .hero-home). Het midden van de
                kapitalen van regel 1 ligt op .465 keer --kop onder de
                bovenkant van de h1 (nagemeten: kapitaaltop .15, basislijn .78).
                Wil je ooit op regel 2 rekenen: de regels liggen 1.2 keer --kop
                uit elkaar en niet 1.02, want data-reveal-words zet elk woord
                in een inline-block (.word-wrap, overflow hidden) en dat rekt
                de regel op.
     --gezicht  hoever het midden tussen ogen en mond onder de bovenkant van
                het beeld ligt. In hero-duo.webp staan de ogen op 19% en de
                mond op 27% van de hoogte, midden 23%.
   top = .465 * --kop - --gezicht zet dat midden op het midden van "Wij".
   Vervang je de foto, meet die 23% dan opnieuw. (Er heeft op 06-09-2026 kort
   een stand tussen "Wij" en "bouwen" gestaan, 1.065 * --kop - 28.1% van het
   beeld; op verzoek teruggedraaid, zie het technisch dossier.)

   Onder de uitsnede ligt de amberen streep (::after op .hero-duo-beeld,
   dezelfde familie als .haal), precies zo lang als de uitsnede op haar
   onderste rij breed is. Die is nu gewoon in het startscherm te zien.

   DE FOTO IS RECHTS UITGELIJND OP DE WRAP: de doos spant de wrap, en de foto
   staat op right: var(--gutter), dus tegen de inhoudsrand van de wrap, in
   dezelfde kolom als de kop ernaast. Op staande schermen (onder 700px) wordt
   de wrap static en valt de doos terug op de hero, met de basis --voet onder
   de vouw, zie de media query verderop. */
.hero-duo{
  --figuur:  calc(var(--duo) / 1.027);
  --zicht:   calc(var(--figuur) * 1.0);
  --gezicht: calc(var(--figuur) * .23);
  --streep:  clamp(5px, .45vw, 7px);          /* dikte van de streep */
  --voet:    clamp(26px, 3.6vh, 42px);        /* staand: hoever de basis onder de vouw zit */
  /* Op verzoek (07-09-2026) staan de twee 2 cm lager dan de stand "ogen en
     mond op Wij" hieronder uitrekent; 2cm is in CSS 75.6px. Zet dit op 0 en
     ze hangen weer precies aan de kop. Staand telt dit niet mee, daar staan
     ze met de basis onder de vouw (top: auto in de media query). */
  --zak:     0px;   /* 19-09-2026: van 2cm terug naar 0, de foto staat hoger zodat de gele streep in beeld blijft */
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--kop) * .465 - var(--gezicht) + var(--zak));
  height: calc(var(--zicht) + var(--streep));
  z-index: 1;
  pointer-events: none;
}
/* De doos is zo breed als de foto en niet breder: hij is absoluut geplaatst
   zonder breedte, dus hij krimpt om zijn inhoud. Daarom staat de foto er als
   gewoon blok in en niet ook absoluut; anders zou de doos nul breed zijn en viel
   er niets te zien. De hoogte is wél gezet, en die is korter dan de foto, dus
   overflow snijdt de onderkant af. */
.hero-duo-beeld{
  position: absolute;
  right: var(--gutter); bottom: 0;
  display: block;
  height: calc(var(--zicht) + var(--streep));
  overflow: hidden;
}
.hero-duo-beeld img{
  display: block;
  height: var(--figuur);
  width: auto; max-width: none;
}
/* De streep waar ze op staan: direct onder de onderrand van de uitsnede,
   precies zo lang als de uitsnede daar breed is (06-09-2026). Gemeten op de
   onderste pixelrij van hero-duo.webp: de dekkende pixels lopen van x=208 tot
   x=1132 op 1200 breed, dus de streep begint op 17.33% en is 77.08% breed.
   De doos is zo breed als de foto, dus procenten op ::after zijn procenten van
   het beeld. Vervang je de foto, meet dit dan opnieuw (sharp, alfa > 8 op de
   onderste rij). */
.hero-duo-beeld::after{
  content: "";
  position: absolute;
  left: 17.33%; bottom: 0;
  width: 77.08%;
  height: var(--streep);
  border-radius: calc(var(--streep) / 2);
  background: var(--amber);
}

/* ---- staand: alles onder elkaar ----
   Naast elkaar houdt het op zodra de tekstkolom te smal wordt. Reken maar na op
   390px: de wrap houdt 342px inhoud over, daar gaat --duo (230, de bodem van de
   clamp) en een goot vanaf, en dan blijft er 88px kolom over. Daar past "bouwen"
   niet eens in, dus de kop liep gewoon uit beeld. Op 700px is er nog 365px en
   past het ruim; daaronder wordt het krap voordat het breekt, dus daar ligt de
   grens.

   Wat er verandert: de hero wordt een kolom in plaats van een rij, de kop staat
   bovenaan en de twee staan onderaan rechts tegen de vouw. */
@media (max-width: 700px){
  .hero-home{
    /* Bijna de volle breedte. Ze staan hier niet naast een tekstkolom maar
       alleen, dus mogen ze groot; en hoe hoger ze komen, hoe minder leeg
       papier er tussen de kop en de onderkant overblijft. */
    --duo: min(94vw, 440px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: clamp(14px, 2.6vh, 26px);
    /* Hier is de kolom niet gecentreerd maar begint hij bovenaan, dus de
       bovenpadding is hier rechtstreeks de afstand tot de koptekst. De
       omgedraaide maten van de brede stand (07-09-2026) gelden hier niet;
       dit zijn de maten zoals ze tot die dag overal stonden. */
    padding-top: clamp(110px, 13vh, 165px);
    padding-bottom: clamp(64px, 8vh, 105px);
  }
  .hero-home h1{ max-width: 14ch; }
  /* De twee terug naar de onderrand van de hero, zoals op 05-09-2026: de wrap
     op static, zodat de doos de hero (position: relative via .sheet) als
     omhulsel neemt, en de basis --voet onder de vouw. Boven een volle kolom
     kop zouden ze anders over de tekst heen vallen. */
  .hero-home > .wrap{ position: static; }
  /* 19-09-2026: de basis stond onder de vouw (--voet) en dus zat de gele streep
     buiten beeld; nu staat hij een stuk boven de onderrand van de hero. */
  .hero-duo{ top: auto; bottom: calc(var(--streep) + clamp(18px, 3vh, 30px)); }
}

/* Ze komen op met de kop mee, een tel later. Geen data-reveal: dat zet een
   transform op het element zelf en dat botst met de translateX waarmee het beeld
   gecentreerd staat. */
.hero-duo{ animation: hero-duo-entree 1.15s var(--ease) .45s both; }
@keyframes hero-duo-entree{
  from{ opacity: 0; transform: translateY(26px); }
  to  { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .hero-duo{ animation: none; }
}
/* De hero heeft het hele eerste scherm, dus de tekst mag groter dan elders op
   de site. Dit zijn hero-eigen maten en ze raken de rest van de pagina niet.
   De kop gaat van 5.04vw naar 6.6vw, de lede van 1.4vw naar 1.75vw en de knop
   een slag mee, zodat de verhouding tussen de drie klopt.

   De lede stond met een inline max-width op none en liep dus over de volle
   1300px van de wrap. Dat is een regellengte waar niemand doorheen komt en het
   maakte het blok bovendien plat. Nu 42ch, dus drie regels, en dat vult ook. */
/* De kop houdt de linkerkolom en breekt naar twee regels. Hij stond op 15ch met
   `white-space: nowrap` en liep dan over de volle breedte in één regel; sinds
   het amberen vlak met Benjamin en Stijn rechts staat is die breedte er niet
   meer.

   DE BREEDTE IS GEEN VAST GETAL MAAR EEN REST. 100% is de inhoudsbreedte van de
   wrap; daar gaat de breedte van het vlak af plus een goot ertussen. Wat
   overblijft is de tekstkolom. Zo schuift de breuk vanzelf mee als --duo
   verandert, en houd je op elk scherm dezelfde lucht tussen de kop en de twee.
   De 15ch eromheen is alleen nog een bovengrens voor heel brede vensters, waar
   de rest groter wordt dan een prettige regellengte.

   text-wrap: balance staat op alle koppen (zie h1, h2, h3, h4) en wil de twee
   regels even lang maken, wat hier "Wij / bouwen websites." oplevert en dus een
   losse eerste regel van twee letters. pretty laat de breuk gewoon de breedte
   volgen en dat geeft "Wij bouwen / websites." */
.hero-home h1{
  max-width: min(15ch, calc(100% - var(--duo) - var(--gutter)));
  font-size: var(--kop);   /* staat op .hero-home, want .hero-duo rekent ermee */
  text-wrap: pretty;
}
/* alleen voor schermlezers: staat overal op de site nodig zodra een
   sectie beeld draagt dat de tekst niet herhaalt */
.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ================= De punt: zes secties, één camera =================
   De 3D-scène zit in verhaal.js; hier staat het toneel eromheen.

   Twee dingen maken dat deze sectie bij de rest van de site hoort en niet
   als los kunstje aanvoelt: het canvas is transparant en de sectie is
   gewoon papier, dus de vormen zweven in het paginavlak zelf. En het
   laatste beeld is een kaart met dezelfde hoekradius en schaduw als de
   kaarten op de werk-pagina.

   DE OPBOUW. `.punt-vast` plakt bovenaan en bevat het canvas plus alle
   tekst, zodat de tekst op één plek blijft staan terwijl het beeld
   eronder doorloopt. `.punt-lagen` schuift er met een negatieve marge
   overheen en bevat zes lege blokken: dat is de scrollruimte per
   hoofdstuk. verhaal.js leest hun `offsetTop` en leidt daar de grenzen
   tussen de scènes uit af, dus je verandert de lengte van een hoofdstuk
   hier en nergens anders.
   =================================================================== */
/* Het woordmerk moet beginnen op het moment dat de hero ophoudt: niet te zien
   zolang je bovenaan staat, en meteen in beeld zodra je scrolt.

   Dat vraagt om een negatieve marge, want het woordmerk staat in het midden
   van .punt-vast en dus zo'n 42vh onder de bovenkant van het doek. Zonder die
   marge scrol je eerst een halve schermhoogte leeg papier door voordat er iets
   komt. Met -40vh valt de bovenkant van de letters net onder de vouw.

   Waarom 40 en niet 42: die 42 hangt af van de tekengrootte van het woordmerk
   (een clamp op vw) ten opzichte van de schermhoogte, en loopt over de
   schermmaten heen van 41 tot 47. Aan de veilige kant gaan zitten kost een
   paar procent scroll voordat het merk verschijnt; de andere kant op zou het
   in de hero laten piepen, en dat is precies wat er niet moet gebeuren.

   Dit dekt niets af: de hero is een .sheet met z-index 2 en .punt-vast staat
   op 1, dus het doek schuift eronder door. .punt-lagen ligt er met z-index 2
   wel overheen, maar heeft pointer-events: none, dus de knop blijft klikbaar.
   Bij het vangnet gaat de marge eraf, want daar plakt er niets. */
/* DE OVERLAP MET DE HERO IS EEN FORMULE EN GEEN GETAL.
   Het doek schuift met een negatieve bovenmarge onder de hero, zodat de
   vertelling al begint terwijl de hero nog wegloopt. Dat stond op -40vh, en
   daar stak op 27-08-2026 de bovenkant van het grote woordmerk bij uit: op een
   laptop van 1366 bij 768 zag je ongeveer 10px van de W en de b boven de
   onderrand van de hero uitkomen, dus voordat je ook maar gescrold had.

   Waarom een vast getal dat niet kan oplossen: het woordmerk staat midden in
   het plakkende blok, dus zijn inkt begint op 150vh min de overlap min 0,398
   keer de lettergrootte. Die lettergrootte hangt aan de breedte en de overlap
   aan de hoogte, dus of hij uitsteekt hangt van de verhouding van het scherm
   af. Met -40vh ging het goed op 1440 bij 900 en fout op alles wat platter is.

   De marge rekent er nu mee: -50vh + 0,4 x de lettergrootte + 10px. Vul dat in
   in de formule hierboven en de inkt komt uit op 100vh + 10px, dus altijd tien
   pixels onder de vouw, ongeacht schermmaat. Op 1440 bij 900 komt het uit op
   -40,3vh, dus op de maat waarop dit ontworpen is verandert er niets.

   De lettergrootte staat daarom als --merk hier en niet bij .pt-merk .wordmark:
   die twee moeten uit één bron komen, anders schuift de een wel en de ander
   niet. Verander je het woordmerk, verander dan --merk.

   ADEMRUIMTE (30-08-2026). Bovenop die formule staat nu --adem. Zonder dat
   getal begon het woordmerk tien pixels onder de vouw en plakte het dus tegen
   de onderkant van de hero aan: je scrolde één tel en het logo stond er al.
   Met --adem erbij loop je eerst een stuk leeg papier door voordat het merk
   opkomt, en dat is precies de pauze die de hero nodig heeft om af te lopen.
   Het is scrollafstand en geen witruimte in de pagina: de hoogte van het doek
   verandert niet, alleen het moment waarop de vertelling begint. */
.punt-doek{
  /* De bovengrens op --merk. "Webwaarts." staat in Archivo 900 met een
     letterafstand van -0,02em en is daarmee 6,18 keer de lettergrootte breed
     (gemeten: 1192,3px op een korps van 192,96px). Deel de beschikbare breedte
     door 6,35 en het past altijd, met een procent of drie speling voor de
     schuifbalk die wel in 100vw zit en niet in de echte breedte.

     Dit is geen sier: zonder deze grens loopt het woordmerk op elk scherm onder
     ruwweg 1400px breder dan zijn lijnbox, en dan is het niet meer te centreren
     (zie de toelichting bij .pt-merk). Op een laptop en groter verandert er
     niets, want daar wint 13.4vw of 12.6rem; pas onder de 550px begint deze
     grens te knijpen, en daar hoort hij dat ook te doen.

     Verander je het woordmerk of het lettertype, meet dan de verhouding opnieuw:
     breedte van .pt-merk .wordmark gedeeld door zijn font-size. */
  --merk-max: calc((100vw - 2 * var(--gutter)) / 6.35);
  --merk: min(13.4vw, 12.6rem, var(--merk-max));
  --adem: clamp(230px, 42vh, 490px);
  --adem: clamp(230px, 42svh, 490px);
  position: relative;
  margin-top: calc(-50vh + var(--merk) * 0.4 + 10px + var(--adem));
  margin-top: calc(-50svh + var(--merk) * 0.4 + 10px + var(--adem));
}
.punt-doek.is-stil{ margin-top: 0; }


.punt-vast{
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  z-index: 1;
}
.punt-canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.punt-doek.is-klaar .punt-canvas{ opacity: 1; }

/* ---------- de leesbaan ----------
   Twee vlakken in de papierkleur, boven het canvas en onder de tekst. Ze
   bestaan om één reden: zonder waas moet de tekst het beeld ontwijken, en
   ontwijken betekent verhuizen. De blokken stonden daarom in vier hoeken en
   sprongen bij elf van de twaalf overgangen naar een andere plek, wat precies
   de klacht opleverde dat je niet weet waar je moet kijken. Met de waas is de
   baan altijd leesbaar en hoeft er niets meer te wijken.

   Ze zijn van --paper gemaakt, dus over leeg papier zie je ze niet: alleen
   waar het beeld eronder komt, komt de waas op. Het verloop heeft meer stops
   dan strikt nodig omdat een rechte ramp van één kleur als een mistbank leest;
   met een geëaste opbouw zie je alleen dat het beeld daar rustiger is.

   Horizontaal worden ze afgesneden met een mask, zodat alleen de kolom waar de
   tekst in staat waas krijgt en het onderwerp (dat midden in beeld staat)
   onaangeraakt blijft. Staand vervalt dat: daar is een blok zo breed als het
   scherm, dus daar loopt de waas ook over de volle breedte. */
/* VIER SCRIMS SINDS 04-09-2026: linksonder, rechtsonder, linksboven en
   rechtsboven. De tekst staat niet meer in één baan maar wisselt per regel van
   hoek (zie .pt-blok), dus elke hoek heeft zijn eigen waas en verhaal.js zet
   per hoek de opacity op de sterkste regel die daar staat. Het masker snijdt de
   waas horizontaal af: links van de linkerrand tot 82 procent, rechts
   gespiegeld. Boven en onder hebben dezelfde hoogte en hetzelfde verloop; de
   kortere waas boven (38vh) reikte niet tot de sub-regels van een blok van vier
   regels en liet het blocnote en de koffiekop door de tekst heen zien. */
.pt-scrim{
  position: absolute;
  left: 0; right: 0;
  opacity: 0;
  pointer-events: none;
}
.pt-scrim-links{
  -webkit-mask-image: linear-gradient(to right,
    #000 0%, #000 50%, rgba(0,0,0,.62) 64%, rgba(0,0,0,.22) 74%, rgba(0,0,0,0) 82%);
          mask-image: linear-gradient(to right,
    #000 0%, #000 50%, rgba(0,0,0,.62) 64%, rgba(0,0,0,.22) 74%, rgba(0,0,0,0) 82%);
}
.pt-scrim-rechts{
  -webkit-mask-image: linear-gradient(to left,
    #000 0%, #000 50%, rgba(0,0,0,.62) 64%, rgba(0,0,0,.22) 74%, rgba(0,0,0,0) 82%);
          mask-image: linear-gradient(to left,
    #000 0%, #000 50%, rgba(0,0,0,.62) 64%, rgba(0,0,0,.22) 74%, rgba(0,0,0,0) 82%);
}
.pt-scrim-onder{
  bottom: 0;
  height: clamp(280px, 46vh, 560px);
  background-image: linear-gradient(to top,
    #ECECEA 0%, rgba(236,236,234,.98) 18%, rgba(236,236,234,.90) 34%,
    rgba(236,236,234,.74) 50%, rgba(236,236,234,.52) 65%,
    rgba(236,236,234,.30) 78%, rgba(236,236,234,.13) 88%,
    rgba(236,236,234,.04) 95%, rgba(236,236,234,0) 100%);
}
/* Boven is hij korter: daar staat alleen hoofdstuk 4 en 5, en hij hoeft niet
   verder te reiken dan de twee regels die er staan.

   EN HIJ STAAT ALLEEN AAN WAAR ER OOK TEKST BOVENIN STAAT (02-09-2026). Hij lag
   eerst altijd, en dan hangt er in scène 2 een lichte waas in de papierkleur over
   de bovenkant van de oude site: die site schuift juist naar boven weg, dus zijn
   bovenrand zit precies de hele scène in deze veertig procent van het scherm en
   verbleekt daar. Er is niets om leesbaar te houden in dat hoofdstuk, want de
   tekst van scène 2 staat linksonder.

   verhaal.js zet de opacity nu gelijk aan de sterkste van de blokken met
   data-plek boven (zie de lus in teken()), dus hij komt op met de eerste regel
   van scène 4 en gaat weg met de laatste van scène 5. Dat loopt vanzelf mee als
   er een hoofdstuk bij komt of een blok verhuist.

   De nul hieronder is de stand vóór de eerste teken(): zonder die regel flitst de
   waas er tussen het schilderen van de pagina en het starten van het script even
   in. Zonder JavaScript of WebGL staat het doek op .is-stil en zijn beide scrims
   display: none, dus daar gaat niets verloren. */
.pt-scrim-boven{
  top: 0;
  height: clamp(280px, 46vh, 560px);
  background-image: linear-gradient(to bottom,
    #ECECEA 0%, rgba(236,236,234,.98) 18%, rgba(236,236,234,.90) 34%,
    rgba(236,236,234,.74) 50%, rgba(236,236,234,.52) 65%,
    rgba(236,236,234,.30) 78%, rgba(236,236,234,.13) 88%,
    rgba(236,236,234,.04) 95%, rgba(236,236,234,0) 100%);
}

.punt-lagen{
  position: relative;
  margin-top: -100vh;
  margin-top: -100svh;
  z-index: 2;
  pointer-events: none;
}
/* De lengte van elk hoofdstuk, en de enige plek waar die staat. verhaal.js
   leest de offsetTop van deze secties en leidt er de grenzen uit af, dus je
   verandert een hoofdstuk hier en nergens anders. Alles in verhaal.js rekent
   in fracties van de scènes zelf en schuift dus mee, de data-van-waarden van
   de tekst in index.html incluis.

   Samen 1370vh, spoor 1270vh (was 1315/1215; op 01-09-2026 ging scène 2 van
   155 naar 120 en scène 3 van 250 naar 340). Van dat totaal gaat 100vh op aan
   het plakken zelf.

   De hoogtes stonden tot 2026-08-27 vrijwel allemaal op één schermhoogte, en
   dat las prettig als regel maar niet als ervaring: een hoofdstuk met 36
   woorden kreeg evenveel scroll als een met 20, dus in het ene hoofdstuk hing
   een regel een halve schermhoogte stil en in het andere flitste hij voorbij.
   De lengte volgt nu de hoeveelheid tekst, zodat elk blok ongeveer evenveel
   scroll per woord krijgt. Zie het worklog-dossier voor de verdeling.

   Twee blijven om hun beweging en niet om hun tekst: scène 5 heeft er
   anderhalf nodig omdat het apparaat een hele slag om zijn as maakt en daarna
   nog even recht moet staan voordat de camera doorrijdt, en scène 6 er twee,
   één om de drie opnamen uiteen te laten waaieren en één om ze samen te
   brengen met de afsluiter erbij. */
/* MEER LEESTIJD (01-09-2026). De hoofdstukken stonden 35 procent korter en een
   regel had daardoor gemiddeld 74vh scroll: op een laptop een stuk of vijf
   muiswiel-klikken, en wie doorflikkert leest de helft niet. Alles behalve het
   woordmerk is maal 1,35 gegaan, dus 1000vh wordt 1315vh en een regel krijgt
   gemiddeld 108vh.

   Dit werkt alleen samen met STIL_DEEL in verhaal.js, en die twee horen bij
   elkaar. Langer maken alleen rekt namelijk ook de camerabewegingen op, en een
   trager rijdende camera voelt niet rustiger maar sloom. STIL_DEEL ging daarom
   tegelijk van 0,45 naar 0,60: de extra scroll komt zo in de stilstand terecht
   en niet in de rit. Per hoofdstuk rijdt de camera nu over vrijwel exact
   dezelfde afstand als voorheen (bijvoorbeeld hoofdstuk 3: 102vh werd 100vh)
   terwijl de stilstand van 83vh naar 150vh gaat.

   Bij opnieuw bijstellen: verander lengte en STIL_DEEL samen, en reken na dat
   `hoogte x (1 - STIL_DEEL)` per hoofdstuk ongeveer gelijk blijft. Loopt dat
   uiteen, dan verandert het tempo van de vertelling zelf en niet alleen de
   leestijd.

   Het woordmerk (s0) is met opzet niet meegegroeid: dat is de aanloop en daar
   staat nog geen tekst, dus daar helpt meer scroll niemand.

   Let op wat het spoor voor het laatste hoofdstuk betekent: de 100vh van het
   plakken zelf gaat van het eind af, dus scène 6 is wel 270vh hoog maar heeft
   maar 170vh spoor. Zijn tekstvensters rekenen in fracties van dat spoor en
   schuiven dus vanzelf mee. Voor de andere hoofdstukken is hoogte gelijk aan
   spoor. */
/* ALLE HOOFDSTUKKEN EVEN LANG (04-09-2026, op verzoek: "elke sectie ongeveer
   evenveel scrolls en niet meer dan nodig"). Scène 1 tot en met 6 hebben elk
   150vh spoor (scène 6 is 250vh hoog omdat de laatste 100vh het plakken zelf
   is); het spoor is daarmee 1000vh, was 1160vh (150/130/220/180/210/170). Dat
   kan omdat de drie klok-animaties (sprong, inkleuren, neerleggen) sinds die
   datum een scrollslot hebben (zie slot in verhaal.js): de scroll hoeft geen
   tijd meer te geven aan iets wat op de klok loopt. De fracties in verhaal.js
   (S2_DRAAI_VAN, S2_DRAAI_TOT, S2_SPRONG, STIL_S3, LEG_DREMPEL, LEG_GATE) en de
   data-van/data-tot in index.html zijn op deze hoogtes herrekend; wat hieronder
   over 130vh, 220vh en 180vh staat is de versie van eerder die dag. */
#pt-s0{ height: 100vh; }   /* het woordmerk, geen tekstblokken, niet meegegroeid */
#pt-s1{ height: 150vh; }   /* 20 woorden */
#pt-s2{ height: 100vh; }   /* 5 woorden; 90 stil, drempel op 90 (S2_SPRONG): draai en sprong op de klok, 10 rest. Was 150 met de draai op de scroll (07-09-2026) */
/* 130VH SINDS 03-09-2026 's AVONDS (proef, was 220vh): 70vh stilstaan, 44vh de
   draai, 10vh stilstaan in de schuine stand, dan de drempel S2_SPRONG
   (verhaal.js) en nog 6vh. De daling van 90vh is eruit: zodra de scroll over de
   drempel gaat speelt de sprong op de klok (circa 0,85 s) en schuift de site
   in één beweging naar boven uit beeld terwijl de tekst van scène 3 van
   onderen binnenkomt. De fracties S2_DRAAI_VAN en S2_DRAAI_TOT in verhaal.js
   zijn op deze hoogte herrekend (0.538 en 0.877); verander je deze hoogte,
   reken die en S2_SPRONG opnieuw uit. Wat hieronder staat over 220vh en de
   daling is de versie van eerder die dag.

   Scène 2 heeft sinds 01-09-2026 nog maar één regel ("En dan vinden ze dit."),
   want de twee zinnen over de buren zijn naar scène 3 verhuisd. Het is een
   beeldgestuurd hoofdstuk: de oude site tekent zichzelf en de burensites
   waaieren ernaast open.

   220VH SINDS 03-09-2026 (was 120vh), en die hoogte is geen leestijd maar de
   som van vier delen (zie S2_DRAAI_VAN en verder in verhaal.js): 70vh stilstaan
   met de regel eronder, 44vh de draai waarin de camera naar een schuine stand
   naast de site zwaait en daar blijft, 15vh stilstaan, en 90vh de daling. In
   die daling zakt de camera lineair, nog steeds schuin, en zo ver dat de site
   vrijwel 1-op-1 met de scroll naar boven uit beeld schuift (14 procent
   overmaat, zie S2_DAAL_REK in verhaal.js, zodat ook de verste buur weg is;
   de tekst eronder krijgt dezelfde overmaat),
   als op een gewone pagina; hij dooft niet meer uit en draait niet meer terug.
   De tekst
   van scène 3 komt in diezelfde 90vh van onderen binnen (data-aanloop op dat
   blok in index.html, data-van -0.28125 want 90 gedeeld door 320) en staat op
   de grens in het midden. Tot die datum was het 120vh met een draai die
   meteen doorliep in een vlucht naar boven terwijl het beeld oploste, en dat
   las als een scherm dat wegvliegt waarna er tekst verschijnt.

   LET OP DE GRENS MET SCÈNE 3. De daling is 41 procent van dit hoofdstuk en de
   tekst van scène 3 rekent daar in vh op: verander je deze hoogte, dan
   verandert de daling in vh mee (verhaal.js meet hem in pixels, dus het beeld
   blijft 1-op-1) maar moet de data-van van het blok van scène 3 opnieuw worden
   uitgerekend, plus DEEL_START en DEEL_SPREIDING in verhaal.js.

   Scène 3 is de rekening: alleen tekst op een verder lege scène, geen 3D-object
   en geen aansturing. De hoogte is niet de lengte van de tekst maar van de
   leestijd. De zinsdelen lichten pas op naarmate je doorscrollt (zie delenOp()
   in verhaal.js), dus de hoogte van dit hoofdstuk ís hoeveel scroll er per
   zinsdeel nodig is: op 320vh met een venster van 253vh en DEEL_SPREIDING 0,755
   is dat 19vh per deel, en de hele golf loopt over 202vh.

   HET STOND OP 440VH EN DAT WAS TE LANG (03-09-2026). Niet vanwege het lezen,
   maar vanwege wat er ná het lezen gebeurde: het laatste zinsdeel was vol zwart
   op 278vh van een venster van 374vh, en daarna stond de hele zin nog 96vh
   lang, bijna een volledig scherm, roerloos in beeld te wachten tot het blok
   mocht uitdoven. Dat is precies de klacht dat het hoofdstuk "lang blijft
   hangen". Nu is dat restant 30vh: lang genoeg om de zin nog een keer als geheel
   te zien staan, kort genoeg om door te schakelen.

   De bovengrens ligt vast. venster() laat het eerste vel van scène 4 opkomen op
   `grenzen[4] - 0.42 * scène 4`, en dat valt binnen dit hoofdstuk: bij 320vh op
   244,4vh, oftewel op fractie 0,764. Alleen dat eerste stuk is echt leeg, en
   daar moet het blok in passen, want het hoort weg te zijn zodra het beeld
   terugkomt. Vandaar data-tot 0.723 daar: plus de uitdoving van 11,8vh is dat
   243,2vh, dus ruim een vh voor het vel komt.

   AAN DE ONDERKANT BEGINT HET BLOK 90VH VÓÓR DIT HOOFDSTUK: dat is de aanloop
   waarin de tekst als gewone paginatekst van onderen binnenkomt terwijl de
   oude site aan de bovenkant uit beeld schuift. Zie de opmerking bij #pt-s2
   hierboven. Het venster is daarmee 321vh, waarvan 231vh na de grens.

   DIT IS NOG STEEDS HET LANGSTE HOOFDSTUK VAN DE ZES, voor de minste woorden, en
   dat is de bedoeling. Het gaat wel ten koste van de vuistregel bij STIL_DEEL in
   verhaal.js (houd `hoogte x (1 - STIL_DEEL)` per hoofdstuk gelijk): de camera
   rijdt hier over 128vh in plaats van 136vh. Dat scheelt sinds de inkorting nog
   maar weinig, en het valt hier toch niet op, want er staat niets in beeld om
   trager of sneller te zien bewegen.

   Het hoofdstuk stond op 250vh toen het nog uit drie tekstblokken en een vel met
   uurtarieven bestond, tussendoor op 240vh met één kortere regel, 02-09-2026 een
   halve dag met drie kleine blokken linksonder, daarna op 340vh met dit blok, en
   op 440vh toen de leestijd eraf bleek te lopen. Verander je deze hoogte, reken
   dan de data-van, data-tot en data-vloei van het blok in index.html opnieuw uit,
   plus DEEL_SPREIDING in verhaal.js en de data-van van het eerste blok van
   scène 4. */
/* 220VH SINDS 03-09-2026 's AVONDS (proef, was 320vh). Het inkleuren loopt niet
   meer op de scroll maar op de klok (KLEUR_DUUR in verhaal.js, 4 s), dus de
   hoogte van dit hoofdstuk is geen leestempo meer. Wat overblijft: 88vh waarin
   de ingekleurde zin blijft staan terwijl je scrolt (STIL_S3 0,40 in camU()),
   daarna 132vh rit naar de tafel, even lang als vóór de sprong (128vh). Het
   blok dooft uit van 116,6vh (data-tot 0.53) tot 138,6vh (data-vloei 0.02 op
   een spoor van 1100vh) en tilt daarbij 3vh op; het eerste vel van scène 4
   komt op 144,4vh (220 min 0,42 keer 180) en de eerste regel van scène 4 op
   155vh.
   Het stond een uur op 160vh (72 stil, 88 rit, uitdoving van 8,7vh) en die
   overgang naar de papieren was te kort en te abrupt. Verander je deze hoogte,
   reken dan data-tot van het blok en data-van van het eerste blok van scène 4
   opnieuw uit. Alles hierboven over 320vh, vensters van 321vh en vh per
   zinsdeel is de versie van eerder die dag. */
#pt-s3{ height: 60vh; }    /* het appgesprek (16-09-2026): de camera staat stil bij de telefoon en het gesprek loopt op de klok. Er is geen scrollslot meer, dus dit is de ruimte waarin doorscrollen het gesprek versnelt (HAAST in verhaal.js) voordat scène 4 het meteen afspeelt. Was 20 met het slot (07-09-2026 avond), daarvoor 40, 70 en 150. */
#pt-s4{ height: 80vh; }    /* 26 woorden in twee blokken die samen met het neerleggen opkomen (klok, met slot) en op 0.42 (33,6vh) uitdoven; camera weg op 0.6 (48vh), gesprek dooft 52,8 tot 78,4vh, laptop komt 62,4 tot 70,4vh. Was 150 met de blokken na elkaar, daarna 120 (07-09-2026). OP 80 SINDS 07-09-2026 AVOND: Benjamin moest vanaf de tafel te ver scrollen voordat er iets gebeurde; met s3 op 40 en s4 op 120 was dat 110vh tot de camera vertrok en 132vh tot de laptop, nu 66vh en 88vh. Alles in verhaal.js rekent in fracties van de scene en schuift dus mee. SINDS 09-09-2026 wordt deze 80vh na de tafel in één tik afgelegd: de rit naar de laptop (VERTREK_DUUR in verhaal.js) scrolt de pagina zelf naar het begin van #pt-s5; de hoogte bepaalt dus alleen nog hoe de uitdoving, de camerarit en het opkomen van de laptop over die 1,8 s verdeeld zijn, en hoe het terugscrollen eruitziet. */
#pt-s5{ height: 150vh; }   /* 24 woorden, plus de slag van het apparaat (63vh) */
#pt-s6{ height: 250vh; }   /* 18 woorden; hiervan is maar 150vh spoor, zie hierboven */

/* ---------- scène 0: het woordmerk ----------
   Driekwart van de paginabreedte. De punt zelf staat er niet in: dat lege
   teken houdt alleen de ruimte vrij waar de bol komt te staan.

   GECENTREERD (02-09-2026). Het merk stond tegen de linkerrand van de wrap, en
   daarmee begon de vertelling scheef terwijl er verder niets in beeld staat om
   dat tegenwicht te geven. Nu staat het midden op het kader: één woord op leeg
   papier hoort in het midden, en het is bovendien de eerste en de laatste scène
   van het verhaal, dus de plek waar de punt vertrekt is ook de plek waar hij
   terugkomt.

   TEXT-ALIGN ALLEEN IS NIET GENOEG, en dat is de valkuil waar dit 02-09-2026 een
   ronde op is blijven staan. .wordmark is display: inline-flex, dus een atomair
   inline-blok. Is zo'n blok breder dan de lijnbox waar het in staat, dan heeft
   text-align niets te verdelen: de browser zet hem tegen het begin van de regel en
   laat hem aan de rechterkant overlopen. Gemeten op 1440 bij 900: de lijnbox van
   de kop was 1096px en het woordmerk 1192px, dus hij liep er 96px uit en stond
   48px te ver naar rechts, met text-align: center en al.

   Vandaar twee dingen. .pt-merk > .wrap laat zijn max-width los, zodat het merk de
   volle breedte van het kader minus de goot krijgt in plaats van de 1240px van de
   wrap. En --merk krijgt een bovengrens die van diezelfde breedte afhangt, zodat
   het merk nooit meer breder kan worden dan de ruimte die er is; zie --merk-max op
   .punt-doek.

   De 3D-punt volgt vanzelf: verhaal.js meet in meet() de plek van #ptDot met
   getBoundingClientRect en zet het vierkantje daar neer, dus er staat nergens
   een coördinaat die hier mee verzet moet worden. */
.pt-merk{
  position: absolute; inset: 0;
  display: flex; align-items: center;
  pointer-events: none;
  will-change: opacity, transform;
}
.pt-merk > .wrap{ width: 100%; max-width: none; }
/* Geen eigen kopstijl: dit is het woordmerk uit de header, alleen groter.
   Alles wat het uiterlijk bepaalt (gewicht, letterafstand, de amber punt)
   komt uit `.wordmark` en `.wordmark .dot`. */
.pt-merk-kop{ margin: 0; white-space: nowrap; text-align: center; }
.pt-merk .wordmark{
  font-size: var(--merk);   /* staat op .punt-doek, zie de marge daar */
  line-height: .92;
}
/* een leeg blokje van niets: zijn bovenrand ligt op de basislijn, en
   daarmee is de precieze plek van de punt te meten */
.pt-basis{ display: inline-block; width: 0; height: 0; }

/* ---------- de tekstlaag ----------
   Altijd links, en per hoofdstuk boven- of onderin. Rust in de tekst maakt de
   beweging in het beeld leesbaar; zie de leesbaan-regel bij .pt-blok. */
/* De tekstlaag beslaat het hele kader in plaats van alleen een strook onderin,
   want een hoofdstuk mag ook bovenin staan. De padding is de veilige marge:
   geen enkel blok komt dichter bij de rand. Onder is die marge groter dan
   boven, omdat daar de meeste beelden staan.

   De bovenmarge is de header plus lucht, en niet een deel van de schermhoogte.
   Dat was hij wel (7vh), en dat ging mis: de balk is 89,8px hoog op desktop en
   70,5px onder de 900px-grens, terwijl 7vh op een scherm van 900 maar 63px is.
   De koppen met data-plek="linksboven" begonnen dus 27px binnen de header, en
   op 1920 bij 1080 zelfs 14px. Met --hdr-h volgt de marge de balk zelf, en de
   clamp erbovenop is de lucht ertussen: circa 32px op een laptop, 39px op een
   groot scherm, 31px op een telefoon. Verandert de header van hoogte, dan is
   --hdr-h in de header-sectie de enige plek waar dat hoeft te worden bijgesteld. */
.punt-tekst{
  position: absolute;
  inset: 0;
  padding: calc(var(--hdr-h) + clamp(26px, 3.6vh, 44px)) 0 clamp(56px, 9vh, 116px);
  pointer-events: none;
}
.punt-tekst > .wrap{ height: 100%; }
.pt-stapel{ position: relative; height: 100%; }

/* ---- waar een blok staat ----
   ÉÉN LEESBAAN (01-09-2026). Elk blok krijgt in index.html een data-plek, maar
   dat is geen vrije keuze meer. De tekst stond in vier hoeken en verhuisde bij
   elf van de twaalf overgangen, want elk blok week uit voor het beeld op dat
   moment. Dat las als druk: het oog moest dertien keer opnieuw zoeken waar de
   zin stond, en dat is wat bezoekers "ik weet niet waar ik moet kijken"
   noemden. Het beeld was nooit het probleem.

   Nu staat alles links en verschuift de baan alleen nog verticaal, en alleen
   op een hoofdstukgrens: hoofdstuk 1, 2, 3 en 6 onderin, 4 en 5 bovenin omdat
   het beeld daar de onderkant vult. Twee wisselingen in plaats van elf, en
   nooit meer van links naar rechts, want dat is de duurste sprong die er is.

   DE REGEL: links blijft links. Moet een hoofdstuk toch de andere hoogte
   hebben, dan geldt dat voor al zijn blokken en nooit voor één ervan. Uitwijken
   voor het beeld hoeft niet meer, daar is .pt-scrim voor.

   De vier overige plekken staan er nog voor het geval een nieuw hoofdstuk ze
   nodig heeft; ze zijn op dit moment niet in gebruik. Zonder data-plek valt een
   blok terug op linksonder. */
.pt-blok{
  position: absolute;
  left: 0; bottom: 0;
  width: min(30rem, 100%);
  opacity: 0;
  will-change: opacity, transform;
}
.pt-blok[data-plek="linksboven"]  { left: 0; top: 0; bottom: auto; }
.pt-blok[data-plek="rechtsonder"] { left: auto; right: 0; bottom: 0; text-align: right; }
.pt-blok[data-plek="rechtsboven"] { left: auto; right: 0; top: 0; bottom: auto; text-align: right; }
/* midden verticaal, voor beelden die boven en onder ruimte laten */
.pt-blok[data-plek="linksmidden"] { left: 0; top: 50%; bottom: auto; transform: translateY(-50%); }
.pt-blok[data-plek="rechtsmidden"]{ left: auto; right: 0; top: 50%; bottom: auto;
                                    transform: translateY(-50%); text-align: right; }

/* midden in het kader. Was de plek van de zin van scène 3; sinds die scène een
   appgesprek op een telefoon is (16-09-2026) staat hier geen blok meer. De
   centrering gaat via flex en niet via translate, want verhaal.js zet bij elke
   frame een inline transform op elk blok. */
.pt-blok[data-plek="midden"]{
  left: 0; right: 0; top: 0; bottom: 0;
  width: auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}

.pt-kop{
  font-size: clamp(1.4rem, 2.4vw, 2.05rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--ink);
  text-wrap: balance;
}
/* De sub was klein en grijs, en dat las als een voetnoot bij de kop terwijl er
   even goed iets in staat. Nu dezelfde inkt als de kop en fors groter dan
   voorheen. Het verschil met de kop zit alleen nog in gewicht en tekengrootte,
   niet in kleur: hiërarchie zonder iets weg te moffelen. */
.pt-sub{
  margin-top: 14px;
  font-size: clamp(1.12rem, 1.8vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: var(--ink);
  text-wrap: balance;
}
/* De punt achter een kop in het merkgeel, net als de punt in het woordmerk. */
.kop-punt{ color: var(--amber); }

/* Bij een vraagteken moet alleen de punt geel worden en de haak zwart blijven.
   Dat is één glief, dus hij wordt met een verloop in twee kleuren gevuld dat
   precies in het lege gat tussen haak en punt omslaat. Waar dat gat ligt
   verschilt per lettertype en per tekengrootte, dus het wordt niet geschat maar
   gemeten uit de werkelijke inkt van het teken: meetVraagteken() in layout.js
   tekent het op een canvas, zoekt de lege regels tussen haak en punt en zet het
   midden daarvan als --knip. Het lege i-tje in de span is het ijkpunt voor de
   basislijn: een inline-block zonder hoogte staat er met zijn onderrand precies
   op, dus de plek van de basislijn hoeft ook niet geschat te worden. De 61%
   hieronder geldt alleen zolang er nog niet gemeten is, en bij een browser
   zonder background-clip blijft het teken gewoon inkt. */
.kop-eind{ white-space: nowrap; }
.kop-vraag{ display: inline-block; }
.kop-basis{ display: inline-block; width: 0; height: 0; overflow: hidden; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kop-vraag{
    background-image: linear-gradient(to bottom,
      currentColor 0%, currentColor var(--knip, 61%),
      var(--amber) var(--knip, 61%), var(--amber) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.pt-blok-cta{ width: min(36rem, 100%); }
.pt-blok-cta .btn{ margin-top: 20px; }

/* ---------- het vangnet ----------
   Geen plakken, geen canvas, geen WebGL: vijf stilstaande beelden met de
   tekst ernaast. Hetzelfde verhaal, compleet. */
.punt-stil{ display: none; }
.punt-doek.is-stil .punt-vast{ position: static; height: auto; overflow: visible; }
.punt-doek.is-stil .punt-canvas,
.punt-doek.is-stil .punt-tekst,
.punt-doek.is-stil .pt-scrim,
.punt-doek.is-stil .pt-merk{ display: none; }
.punt-doek.is-stil .punt-lagen{ display: none; }
.punt-doek.is-stil .punt-stil{ display: block; padding: clamp(64px, 9vh, 120px) 0; }
.ps-rij{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(34px, 6vh, 74px) 0;
}
.ps-beeld{
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  gap: 16px;
}
.ps-beeld img{
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -40px rgba(17,17,17,.4);
}
.ps-punt{ width: 92px; height: 92px; border-radius: 50%; background: var(--amber); }
.ps-tafel{ width: 190px; height: 190px; border-radius: 50%; background: var(--amber); }
.ps-kaart{
  width: 44%; height: 70%;
  border-radius: var(--radius-md);
  background: #D6D3CB;
}
/* Scène 3 in het vangnet: het appgesprek als stilstaand telefoonscherm, zonder
   kop of tekst eromheen (16-09-2026). Dezelfde berichten en kleuren als de
   telefoon in verhaal.js (GESPREK en WA). Was .ps-kost met de zin "Die website
   kost u nu al geld..." gecentreerd. */
.ps-kost{
  padding: clamp(34px, 6vh, 74px) 0;
  display: flex; justify-content: center;
}
.ps-tel{
  width: min(24rem, 100%);
  border-radius: 34px;
  padding: 10px;
  background: #1C1C1E;
  box-shadow: 0 34px 70px -34px rgba(17,17,17,.45);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.ps-tel-kop{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-radius: 26px 26px 0 0;
  background: #F6F6F6; color: #000000;   /* iOS: lichtgrijze balk met haarlijn, zoals de getekende telefoon */
  border-bottom: 1px solid rgba(0,0,0,.2);
}
.ps-tel-kop img{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 38%; }
.ps-tel-kop span{ display: flex; flex-direction: column; line-height: 1.25; }
.ps-tel-kop b{ font-size: 1rem; font-weight: 600; }
.ps-tel-kop small{ font-size: .8rem; color: #8E8E93; }
.ps-chat{
  list-style: none; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 12px 22px;
  border-radius: 0 0 26px 26px;
  background: #EFE7DE;
}
.ps-chat li{
  max-width: 82%;
  padding: 7px 10px 6px;
  border-radius: 14px;
  font-size: .94rem; font-weight: 500; line-height: 1.35; color: #000;
  box-shadow: 0 1px 0 rgba(11,20,26,.13);
}
.ps-chat li small{ float: right; margin: 7px 0 -3px 12px; font-size: .7rem; color: #667781; }
.ps-uit{ align-self: flex-end; background: #D9FDD3; }
.ps-in{ align-self: flex-start; background: #FFFFFF; }
.ps-chat .ps-vervolg{ margin-top: -8px; }

@media (max-width: 760px){
  .ps-rij{ grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- staand ----------
   Hetzelfde verhaal en dezelfde code, alleen korter en met minder ruimte.
   Bewust geen vooraf gerenderde video per scène: dat zijn losse assets
   die bij elke tekstwijziging opnieuw moeten, terwijl de tekst juist DOM
   hoort te blijven. Eén codepad is goedkoper te onderhouden dan twee. */
@media (max-width: 767px){
  .punt-doek{ --merk: min(17vw, 5.6rem, var(--merk-max)); }   /* stuurt ook de overlap met de hero */
  .pt-blok{ width: 100%; }
  .punt-tekst{ bottom: clamp(34px, 6vh, 64px); }
  .pt-stapel{ min-height: 132px; }
  /* Een blok is hier zo breed als het scherm, dus de waas mag niet halverwege
     ophouden: geen mask, volle breedte. */
  .pt-scrim{ -webkit-mask-image: none; mask-image: none; }
}

/* ============ TEST 2026-09-10: de case zonder zwarte plaat ============
   Proef op verzoek van Benjamin: het zwarte vlak eruit, alles wit, tekst zwart.
   Het staat met opzet als een blok helemaal onderaan dit bestand en niet in de
   regels van .case-plaat zelf: terugdraaien is dit blok weghalen, en aan werk.html
   is niets veranderd.
   .case-plaat draagt in de HTML nog .on-dark, en die klasse zet --tekst op papier.
   Die twee tekstrollen worden hier dus teruggezet naar inkt, anders staat er witte
   tekst op een licht vlak. De plaat ligt op een .sheet-white, dus met dezelfde
   achtergrond verdwijnt het vlak als vorm en blijft alleen de indeling over. Die
   kleur is sinds 2026-09-10 de papierkleur en niet meer zuiver wit; deze regel
   loopt daarin mee, anders komt de plaat als een wit blok terug.
   Blijft amber: de hoek linksonder in de foto van Evert. */
.case-plaat{
  background: var(--paper);
  color: var(--ink);
}
.case-plaat.on-dark{
  --tekst:      var(--ink);
  --tekst-stil: var(--ink-72);
}


/* ================= Ons werk: het raster (ons-werk.html) =================
   Twee vierkanten met ronde hoeken naast elkaar. De eerste opzet had de foto
   bovenin de tegel en de tekst in een wit vlak eronder; dat las als een kaartje
   en niet als werk. Het is nu opgebouwd zoals de cases van zekerzichtbaar.nl:
   de foto vult de hele tegel, er ligt een sluier onderin en daarop staan de
   naam van de klant en een kop die zegt wat er gemaakt is, met een pijl ernaast.
   Twee dingen doen wij anders dan zij: de pijl is een amberen schijf in plaats
   van een kadertje, en onder de tegel staat nog een paar zinnen op de papierkleur.
   Die zinnen zijn het bewijs; met één opgeleverde website is een kop alleen te
   weinig.
   Drie soorten tegels, alle drie even groot:
     .werk-tegel                een opgeleverde website, de hele tegel is de link.
     .werk-tegel--aanbouw    een plek die nog vol moet lopen.
     .werk-tegel--plek          de laatste tegel, de uitnodiging.
   Het beeld is de herofoto van de website zelf (niet een schermafdruk met
   browserrand en de teksten van de klant erop, want dan vecht die kop met de
   onze). Bron voor Blokhuis: de hero.jpg uit zijn eigen site, vierkant
   uitgesneden. */
.werk-raster{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
  align-items: start;
}
/* Een opgeleverde website: de tegel plus de zinnen eronder. */
.werk-vak{
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.7vw, 24px);
}
.werk-vak p{
  margin: 0;
  color: var(--tekst);
  font-size: clamp(.95rem, 1.02vw, 1.04rem);
  line-height: 1.6;
}
.werk-tegel{
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-2);
  color: var(--paper);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
a.werk-tegel:hover{ transform: translateY(-6px); }
/* De foto. Een klassenaam en niet .werk-tegel > img, want het logo van de klant
   is sinds 11-09-2026 ook een directe img in de tegel en die moet niet
   schermvullend worden uitgerekt. */
.werk-tegel__foto{
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
a.werk-tegel:hover .werk-tegel__foto{ transform: scale(1.045); }
/* De sluier draagt de tekst. Onderin loopt hij tot iets over de helft, want de
   foto eronder is een tuin in het gouden uur en die is juist onderin licht.
   Bovenin ligt er een tweede, veel lichtere sluier: daar staat het logo van de
   klant en daar is de foto lucht. Precies wat de klant op zijn eigen website ook
   doet om zijn witte logo op de hero leesbaar te houden. */
.werk-tegel__sluier{
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top,
      rgba(0,0,0,.84) 0%,
      rgba(0,0,0,.56) 24%,
      rgba(0,0,0,.14) 55%,
      transparent 76%),
    linear-gradient(to bottom,
      rgba(0,0,0,.42) 0%,
      rgba(0,0,0,.16) 12%,
      transparent 30%);
}
.werk-tegel__inhoud{
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(22px, 2.7vw, 34px);
}
.werk-tegel__woorden{ flex: 1 1 auto; min-width: 0; }
/* Het logo van de klant, linksboven in de tegel. Stond hier eerst als zijn naam in
   kapitalen in onze eigen letter, en daarna als logo boven de kop; nu ligt het
   linksboven, op precies de plek waar het op zijn eigen website ook ligt. Daarmee
   leest de tegel als een stukje van zijn website in plaats van als een kaartje
   over hem. De logos zijn wit met alpha; het schaduwtje komt van zijn eigen
   stylesheet en houdt ze leesbaar boven een licht stuk foto. */
.werk-tegel__merk{
  position: absolute; z-index: 2;
  left: clamp(22px, 2.7vw, 34px);
  top: clamp(20px, 2.4vw, 30px);
  width: auto;
  height: clamp(14px, 1.3vw, 19px);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
.werk-tegel__kop{
  margin: 0;
  font-size: clamp(1.3rem, 1.95vw, 1.95rem);
  font-weight: 900;
  letter-spacing: -0.032em;
  line-height: 1.06;
  color: var(--paper);
}
.werk-tegel__pijl{
  flex: none;
  width: clamp(46px, 3.6vw, 56px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--amber);
  display: grid; place-items: center;
  transition: transform .45s var(--ease);
}
a.werk-tegel:hover .werk-tegel__pijl{ transform: translate(4px, -4px); }
.werk-tegel__pijl svg{
  width: 42%; height: auto; display: block;
  fill: none; stroke: var(--ink);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
/* Een plek die nog vol moet lopen. Arcering in plaats van een kaal vlak: een leeg
   vierkant leest als een fout, een gearceerd vierkant als een plek die nog vol
   moet lopen. De streep staat op 4% inkt, dus je ziet hem pas als je kijkt. */
.werk-tegel--aanbouw{
  /* Dekt af. Stond doorzichtig, en toen de gele gloed op dit vel kwam schemerde
     die er doorheen; dan is het geen plek meer die nog vol moet lopen maar een
     amberen vlak. De gloed hoort achter de tegels te blijven. */
  background-color: var(--paper-hi);
  background-image:
    repeating-linear-gradient(45deg,
      rgba(17,17,17,.04) 0 1px,
      transparent 1px 9px);
  border: 1px solid var(--ink-14);
  display: grid;
  place-items: center;
  color: var(--ink-72);
  font-weight: 700;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  letter-spacing: -0.015em;
}
/* De laatste tegel: inkt, zodat het oneven aantal niet als een gat leest maar
   als het einde van de rij. */
.werk-tegel--plek{
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(24px, 3vw, 40px);
}
.werk-plek-kop{
  display: block;
  font-weight: 900;
  letter-spacing: -0.035em;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1.05;
  margin: 0 0 .6em;
}
.werk-plek-regel{
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700;
  color: var(--paper);
  font-size: clamp(.95rem, 1.05vw, 1.05rem);
}
.werk-plek-regel span{ transition: transform .45s var(--ease); }
a.werk-tegel--plek:hover .werk-plek-regel span{ transform: translateX(5px); }
/* Op een smal scherm past er maar één vierkant naast elkaar. */
@media (max-width: 760px){
  .werk-raster{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .werk-tegel, .werk-tegel__foto, .werk-tegel__pijl, .werk-plek-regel span{ transition: none; }
  a.werk-tegel:hover{ transform: none; }
  a.werk-tegel:hover .werk-tegel__foto{ transform: none; }
  a.werk-tegel:hover .werk-tegel__pijl{ transform: none; }
}

/* ---------- de gele gloed op ons-werk.html ----------
   Zelfde gedachte als op de hero van de homepage (zie "de gele gloed" hierboven):
   amber tegen het papier, nooit als vlak maar als licht dat van buiten het kader
   komt. Twee verschillen met die daar. Hij staat stil, want er schuift hier geen
   vertelling onderdoor en er is dus geen --gloed-y nodig. En hij rekent in
   procenten van het vel en niet in vh, want dit vel groeit mee met het aantal
   tegels; in vh zou de gloed bij een tegel erbij halverwege blijven hangen.
   Twee vlekken, met opzet ongelijk: een brede rechtsboven, naast de eerste tegel,
   en een zwakke linksonder zodat het einde van het raster geen dood papier is.
   Hij ligt onder de tegels. De tegels die nog vol moeten lopen hebben een
   doorzichtige achtergrond, dus de gloed schijnt er doorheen, en dat is precies de
   bedoeling: het maakt die lege plekken warm in plaats van grijs. */
/* Gebroken wit in plaats van de papierkleur. .sheet-white geeft elk vel --paper
   (#ECECEA) en dat is hier te grijs: de gloed heeft licht papier nodig om op te
   vallen, en de tegels die nog vol moeten lopen zijn op --paper-hi (gebroken wit) een
   lege plek in plaats van een grijs vlak. Staat na .sheet-white in dit bestand,
   dus hij wint. */
/* De gloed zelf staat sinds 11-09-2026 in .gloedvel, het gedeelde component dat elk
   licht vel op de subpagina-s draagt; dit vel was de eerste die hem had en gebruikt nu
   dezelfde regels. Wat hier overblijft is de kleur: gebroken wit in plaats van de
   papierkleur, want de gloed heeft licht papier nodig om op te vallen en de tegels die
   nog vol moeten lopen zijn op --paper-hi een lege plek in plaats van een grijs vlak. */
.werk-vel{
  background: var(--paper-hi);
}



/* ---- De gele gloed op een licht vel (.gloedvel, 11-09-2026) ----
   Op verzoek van Benjamin: "ik wil op alle witte vlakken behalve op de homepage op de
   site de gele gloed elementen." Dit is dat component. Het recept komt van het vel met
   het werkraster op ons-werk.html, dat het als eerste had, en dat gebruikt het nu ook.

   DEZELFDE GEDACHTE ALS OP DE HERO EN DE SLOTBAND: amber tegen papier, nooit als vlak
   maar als licht dat van buiten het kader komt. Twee vlekken, met opzet ongelijk: een
   brede sterke in de ene bovenhoek die het licht draagt, en een zwakke in de
   tegenoverliggende onderhoek zodat die kant geen dood papier is. Zet de tweede hoger
   en het worden twee vlekken naast elkaar in plaats van invallend licht.

   DE HOMEPAGE DOET NIET MEE. Daar ligt de gloed op .gloedbaan onder de hero, met een
   eigen maatvoering in vh en een parallax uit layout.js, en achter de vertelling hoort
   hij juist niet te liggen (die scenes zijn plat en worden er troebel van). Zet
   .gloedvel dus nooit op index.html.
   CONTACT DOET OOK NIET MEE: daar ligt de gloed al strak om het formulier heen
   (.cf__vlek), en twee ambers op één scherm die niets met elkaar te maken hebben is
   precies wat we op de hero hebben weggehaald. Hetzelfde geldt voor de slotband, die
   zijn eigen gloed heeft.

   VIER VARIANTEN, zodat het geen stempel wordt dat op elk vel op dezelfde plek staat:
     .gloedvel            sterk rechtsboven, zwak linksonder. De standaard.
     .gloedvel--om        gespiegeld: sterk linksboven, zwak rechtsonder.
     .gloedvel--boven     één vlek, sterk rechtsboven.
     .gloedvel--onder     één vlek, sterk linksonder.
   Die laatste twee zijn voor twee lichte vellen die tegen elkaar staan en samen één
   vlak horen te zijn (op over-ons.html de twee portretvellen van Stijn en Benjamin).
   Zouden die allebei een volledige gloed krijgen, dan komt er op de naad een zwakke
   vlek onder een sterke te liggen en zie je precies de scheiding die er niet mag zijn.
   Met --boven op het eerste en --onder op het tweede loopt er één licht diagonaal over
   allebei heen. Wissel bij opeenvolgende lichte vellen dus altijd af.

   De laag zit op een ::before met z-index -1 binnen een eigen stapelcontext
   (isolation), zodat hij boven de achtergrond van het vel ligt en onder de inhoud. De
   horizontale straal staat in vw en de verticale in procenten van het vel: de vlek moet
   even breed zijn als op elk ander vel, maar wel meeschalen met de hoogte van dit vel.
   border-radius: inherit staat er voor het geval hij ooit op een .sheet-raised komt;
   nu draagt geen van de vellen met een gloed ronde hoeken. */
.gloedvel{
  position: relative;
  isolation: isolate;
}
/* TWEE DINGEN ANDERS DAN OP DE HERO EN DE SLOTBAND, allebei omdat die twee op een
   vast stuk scherm liggen en dit component op vellen van heel uiteenlopende hoogte.
   1. De verticale straal staat in vh en niet in procenten van het vel. Met procenten
      wordt de vlek op een lang vel een hoge, smalle ellips waarvan de linkerrand bijna
      recht naar beneden loopt, en dan zie je een streep over de pagina in plaats van
      licht. In vh is de vlek op elk vel even groot en leest hij als een lamp die
      buiten het kader hangt.
   2. Er zitten tussenstops in het verloop. Een radiaal verloop van vol naar nul in een
      keer dooft lineair uit, en dat geeft op een egaal papieren vlak een zichtbare
      rand precies daar waar de alfa nul wordt. De stops hieronder halveren telkens en
      benaderen zo een zachte uitdoving. Haal je ze weg, dan komt die rand terug. */
.gloedvel::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    radial-gradient(64vw 74vh at 92% 6%, rgba(245,179,1,.26) 0%, rgba(245,179,1,.19) 26%, rgba(245,179,1,.10) 48%, rgba(245,179,1,.035) 68%, rgba(245,179,1,0) 86%),
    radial-gradient(54vw 58vh at 2% 98%, rgba(245,179,1,.13) 0%, rgba(245,179,1,.06) 42%, rgba(245,179,1,0) 80%);
}
.gloedvel--om::before{
  background-image:
    radial-gradient(64vw 74vh at 8% 6%, rgba(245,179,1,.24) 0%, rgba(245,179,1,.17) 26%, rgba(245,179,1,.09) 48%, rgba(245,179,1,.03) 68%, rgba(245,179,1,0) 86%),
    radial-gradient(54vw 58vh at 98% 98%, rgba(245,179,1,.12) 0%, rgba(245,179,1,.055) 42%, rgba(245,179,1,0) 80%);
}
.gloedvel--boven::before{
  background-image:
    radial-gradient(64vw 78vh at 92% 6%, rgba(245,179,1,.26) 0%, rgba(245,179,1,.19) 26%, rgba(245,179,1,.10) 48%, rgba(245,179,1,.035) 68%, rgba(245,179,1,0) 86%);
}
.gloedvel--onder::before{
  background-image:
    radial-gradient(64vw 78vh at 8% 98%, rgba(245,179,1,.24) 0%, rgba(245,179,1,.17) 26%, rgba(245,179,1,.09) 48%, rgba(245,179,1,.03) 68%, rgba(245,179,1,0) 86%);
}

/* ---- VIJFDE VARIANT: .gloedvel--lang, voor een heel hoog vel (18-09-2026) ----
   Benjamin: "zorg dat er verspreid gloed is op de wat wij doen pagina". Het vel
   #theater op werk.html is 6,6 schermhoogtes hoog. De twee vlekken van de standaard
   zitten dan op 6% en 98% van dat vel, en hun verticale straal staat in vh, dus het
   licht reikt ongeveer een halve schermhoogte ver. Boven ongeveer 800px en onder
   4.050px staat er dus iets, en daartussen ligt bijna vijf schermen dood papier. Precies
   het probleem dat .gloedvel op een gewoon vel juist oplost.

   Zeven vlekken, om en om links en rechts, van boven naar beneden. Ze overlappen elkaar
   net (elke vlek dooft op 86% van zijn straal uit, en de afstand tussen twee vlekken is
   kleiner dan dat), zodat je geen losse blobs ziet maar licht dat met je meezakt.

   DE ONDERSTE HELFT IS WARMER DAN DE BOVENSTE (Benjamin, 18-09-2026: "er mag meer gloed
   in de laatste helft van de pagina"). Boven 50% staan de vlekken op .13 tot .26, daaronder
   op .15 tot .25, en ze zijn er ook een breder. Dat loopt bovendien ergens naartoe: onderaan
   dit vel begint de donkere cta-band, en warm papier vlak voor die overgang leest als licht
   dat op de rand valt.

   MET OPZET ONGELIJK, net als bij de standaard. De sterke vlek blijft rechtsboven op
   .26, want dat is het anker dat dit vel met alle andere vellen deelt. Verder heeft elke
   vlek een andere sterkte, breedte en hoogte. Zet ze allemaal even sterk en op regelmatige
   afstand en het wordt een streepjespatroon: je gaat de vlekken tellen in plaats van ze
   te vergeten.

   Alleen voor vellen van meer dan ongeveer drie schermhoogtes. Op een gewoon vel zitten
   zeven vlekken op elkaar en wordt het papier egaal geel. */
.gloedvel--lang::before{
  background-image:
    radial-gradient(64vw 78vh at 92% 3%, rgba(245,179,1,.26) 0%, rgba(245,179,1,.19) 26%, rgba(245,179,1,.10) 48%, rgba(245,179,1,.035) 68%, rgba(245,179,1,0) 86%),
    radial-gradient(58vw 74vh at 4% 19%, rgba(245,179,1,.13) 0%, rgba(245,179,1,.095) 26%, rgba(245,179,1,.051) 48%, rgba(245,179,1,.018) 68%, rgba(245,179,1,0) 86%),
    radial-gradient(62vw 80vh at 88% 37%, rgba(245,179,1,.17) 0%, rgba(245,179,1,.124) 26%, rgba(245,179,1,.066) 48%, rgba(245,179,1,.023) 68%, rgba(245,179,1,0) 86%),
    radial-gradient(62vw 78vh at 8% 55%, rgba(245,179,1,.19) 0%, rgba(245,179,1,.139) 26%, rgba(245,179,1,.074) 48%, rgba(245,179,1,.026) 68%, rgba(245,179,1,0) 86%),
    radial-gradient(68vw 84vh at 96% 71%, rgba(245,179,1,.25) 0%, rgba(245,179,1,.183) 26%, rgba(245,179,1,.098) 48%, rgba(245,179,1,.034) 68%, rgba(245,179,1,0) 86%),
    radial-gradient(64vw 80vh at 10% 88%, rgba(245,179,1,.21) 0%, rgba(245,179,1,.153) 26%, rgba(245,179,1,.082) 48%, rgba(245,179,1,.028) 68%, rgba(245,179,1,0) 86%),
    radial-gradient(58vw 70vh at 88% 97%, rgba(245,179,1,.15) 0%, rgba(245,179,1,.110) 26%, rgba(245,179,1,.059) 48%, rgba(245,179,1,.020) 68%, rgba(245,179,1,0) 86%);
}

/* =================================================================
   PAGINA'S ZONDER HERO (11-09-2026)
   Op verzoek van Benjamin: "de full screen foto heros zijn too much op losse
   pagina's, we doen geen hero meer en geen titel en gebruiken de foto's van de
   hero's in de pagina's."

   Wat er weg is: .hero-vol (de fotohero over het hele scherm van 10-09), .hero-doek
   (de band van 4:1 die daaraan voorafging), .hero-blok, .kop-solo, .kop-scherm en de
   tokens --hero-wit en --hero-kop-pad. Alles staat in de git-geschiedenis; de laatste
   versie met hero's is de staat van 11-09-2026 voor deze wijziging.

   Wat ervoor in de plaats komt:
   - .zonder-hero   de eerste sectie van de pagina klaart zelf de vaste balk.
   - .vh            de h1 blijft bestaan voor schermlezers en zoekmachines, maar
                    staat niet in beeld. Er is geen paginatitel meer: de pagina
                    begint bij de inhoud.
   - .fotoband      de vier shootfoto's (2400x600, precies 4:1) staan nu als band
                    over de volle breedte IN de pagina, op de plek waar ze iets
                    zeggen. Een per pagina, nooit twee.
   - .leeslicht     een grote zin die woord voor woord bijkleurt met de scroll.
                    Dit is de beat die de plek van de weggevallen paginakop inneemt:
                    geen titel, maar een zin die je leest. Script in layout.js.
   ================================================================= */

/* De eerste sectie begint onder de balk. De balk is fixed en op elke pagina zonder
   vertelling meteen dekkend (.is-solid), dus de inhoud mag er niet onder beginnen.
   De lucht erbovenop is bewust krap: het eerste wat je ziet moet inhoud zijn en
   geen leeg vel. .doen op werk.html rekent met exact dezelfde som. */
.zonder-hero{ padding-top: calc(var(--balk) + clamp(26px, 3.6vw, 58px)); }

/* Alleen voor schermlezers en zoekmachines. De pagina heeft nog steeds precies een
   h1; hij staat er niet in beeld. */
.vh{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- De fotoband ----
   Een foto over de volle breedte, zonder tekst erover en zonder kader. Hij hoort in
   de pagina te staan als een adempauze tussen twee stukken tekst, niet bovenaan als
   een tweede hero. Een per pagina.

   De foto's zijn 2400x600 (4:1) en de band houdt zich daar ruwweg aan: op 1440px
   breed is hij 470px hoog, dus je ziet bijna de hele uitsnede. Op een smal scherm
   zakt hij naar 230px en snijdt object-fit wat van de zijkanten; het onderwerp staat
   op alle vier de opnamen in of net naast het midden, dus dat kan.

   DE BAND LIGT STIL EN SNIJDT NIET. Er zat eerst een parallax op (het beeld hoger dan
   de band, met data-drift erop), en die kostte boven en onder een reep van de foto:
   op kop-werk.jpg ging dat door de kruinen van onze twee koppen. Vault-regel:
   aangeleverde fotos worden niet aangepast, past het niet dan past de layout zich aan.
   Vandaar deze maat: 25vw is precies 4:1, dus tot 1760px breed staat de hele uitsnede
   in beeld en snijdt object-fit niets weg. Daaronder loopt de band tegen zijn bodem
   van 200px aan en daarboven tegen zijn plafond van 440px; dan snijdt cover links en
   rechts, en dat kan, want het onderwerp staat op alle vier de opnamen in het midden.
   Wie hier toch beweging wil: doe het met iets dat niet snijdt (een trage helderheid
   of een entree), niet met een verschuiving.

   Wat erop volgt bepaalt de naad. Een .sheet-raised eronder schuift met zijn ronde
   hoeken over de onderrand van de band heen (faq.html, ons-werk.html); een gewoon
   vel sluit er kaarsrecht op aan (werk.html, over-ons.html). Dat verschil is met
   opzet: zo is niet elke band op elke pagina hetzelfde ding. */
.fotoband{
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: clamp(200px, 25vw, 440px);
  background: var(--ink-2);
}
.fotoband__beeld{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ---- Wij twee in zigzag (werk.html, 17-09-2026) ----
   Twee rijen op het canvas van #theater: Stijn links met een tekstblok rechts, dan
   een tekstblok links met Benjamin rechts. Naar het voorbeeld van de dienstenzigzag
   op de Werkman-site (.svczig in werkman.css): grid auto 1fr, de foto op een vaste
   maat, per rij een eigen maat en inspringing zodat het als geheel speels blijft en
   per rij strak. De tekstblokken staan tegen de foto aan (max-width en in de
   omgekeerde rij justify-self end), dus de foto's staan buiten en de teksten
   binnen. Hier stond tot 17-09-2026 de plas (montage in een blobvorm met tekst in
   de taille); die is met markup, CSS en het script _plas-regels.js weggehaald
   (Benjamin: "Deze balk gaat helemaal weg"), kop-werk-breed.jpg staat nog in
   assets/team maar wordt niet meer gebruikt.
   De marge erboven was eerst de afstand die de plas ook had; op 18-09-2026 ruimer
   gezet (Benjamin: "meer ruimte tussen hoe wij het doen en de sectie eronder"), zodat
   de carrousel duidelijk afsluit voor de portretten beginnen. Geen eigen achtergrond:
   alles op het vel met de gloed (Benjamin, 16-09-2026). */
.duo-zig{ margin-top: clamp(140px, 15vw, 240px); position: relative; }
/* ---- De pijl naar Stijn (18-09-2026) ----
   Een getekende kromme pijl van het tekstblok van de laatste halte van de tijdlijn ("En
   daarna blijft u ons gewoon bellen") naar de bovenrand van de foto van Stijn, op 90% van
   haar breedte (Benjamin, 18-09-2026). Dezelfde inktlijn als de tekeningen op deze
   pagina (3px, ronde uiteinden), met een open pijlpunt. De svg hangt in .duo-zig en loopt
   met overflow visible ook boven de sectie uit, want het beginpunt ligt in de tijdlijn
   erboven; layout.js meet beide punten (zie daar "De pijl naar Stijn"). Hij tekent
   zichzelf zodra de foto in beeld komt (stroke-dashoffset, de lengte zet het script). */
.pijl-stijn{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
/* Geel (Benjamin, 18-09-2026): de lijn in amber, iets dikker dan de inktlijnen; de punt is
   een gevulde driehoek in dezelfde kleur, zonder eigen lijn, dus symmetrisch. */
.pijl-lijn{
  fill: none;
  stroke: var(--amber);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pijl-kop{ fill: var(--amber); stroke: none; }
.pijl-lijn{ transition: stroke-dashoffset 1.1s var(--ease); }
.pijl-kop{ opacity: 0; transition: opacity .3s var(--ease) .95s; }
.pijl-stijn.is-aan .pijl-lijn{ stroke-dashoffset: 0 !important; }
.pijl-stijn.is-aan .pijl-kop{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .pijl-lijn, .pijl-kop{ transition: none; }
}
.zig-rij{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
}
.zig-rij--om{ grid-template-columns: 1fr auto; }
.zig-rij--om .zig-foto{ order: 2; }
/* Meer zigzag (Benjamin, 17-09-2026: "de tekst niet recht boven elkaar maar overlappend
   naar de andere kant"): het tekstblok van rij 1 schuift van zijn foto af naar rechts,
   dat van rij 2 naar links, elk met dezelfde marge. Zo staan de twee blokken niet
   boven elkaar maar verspringen ze. Met de liggende foto's (3:2, later die dag) is
   er minder ruimte: de marge is van 160 naar 40px gegaan en de kolomgap naar 44,
   zodat de blokken op 1512 breed nog zo'n 70px kruisen (blok 1 vanaf 742, blok 2
   tot 812). Onder 900px vervalt de marge. */
.zig-tekst{ margin-left: clamp(16px, 2.6vw, 40px); }
.zig-rij--om .zig-tekst{ justify-self: end; margin-left: 0; margin-right: clamp(16px, 2.6vw, 40px); }
.zig-rij + .zig-rij{ margin-top: clamp(28px, 3.6vw, 52px); }
/* Liggend 3:2 (Benjamin, 17-09-2026: eerst "kan je de fotos vierkant maken", daarna "de
   fotos breder, verleng tot ze 1,5 keer zo breed als hoog zijn"): de .portret is 4:5,
   hier 3:2 op dezelfde hoogte als het vierkant van daarvoor (300 en 272px op 1512
   breed). De uitsnede is top center (van .portret): hoofd en schouders, de armen
   vallen eraf. */
.zig-foto{ width: clamp(300px, 36vw, 450px); aspect-ratio: 3 / 2; }
.zig-rij--om .zig-foto{ width: clamp(276px, 33vw, 408px); }   /* de tweede foto iets kleiner */
.zig-tekst{ max-width: 44ch; }
.zig-tekst h3{ font-size: clamp(1.5rem, 2.6vw, 2.3rem); }
.zig-tekst p{
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  font-size: clamp(1.02rem, 1.2vw, 1.22rem);
  line-height: 1.55;
}
@media (max-width: 900px){
  .zig-rij, .zig-rij--om{ grid-template-columns: 1fr; gap: clamp(22px, 4.5vw, 34px); }
  .zig-rij .zig-foto{ order: -1; width: min(86%, 420px); }
  .zig-tekst, .zig-rij--om .zig-tekst{ justify-self: start; margin-left: 0; margin-right: 0; }
}

/* ---- De tijdlijn (werk.html, 18-09-2026) ----
   Vier haltes ver uit elkaar, om en om links en rechts, met een streep die bij het
   scrollen van halte naar halte volloopt (Benjamin, 18-09-2026). Het pad staat niet in de
   HTML: layout.js meet waar de objecten echt terechtkomen en tekent er een S-bocht
   doorheen, dus het klopt bij elke vensterbreedte en bij elke tekstlengte. Zie daar
   "De tijdlijn" voor de meting en de voortgang.

   SPEELS, NIET CHIQUE (Benjamin, 18-09-2026). Dit blok is die dag drie keer omgegooid.
   Eerst een dunne haarlijn met een net rondje per halte op het papier, toen datzelfde op
   een zwart vel ("zet dit op zwart"), en daarna terug naar papier omdat het geheel te
   chique werd voor deze website ("het is een speelse site dus dit moet vervangen worden
   door iets wat erin past"). Wat nu overeind staat, is de taal van het theatertje en de
   carrousel erboven: dikke inktlijnen van 2 tot 3px, gevulde vormen, amber als enige felle
   kleur, en een tekening in plaats van een teken.
     - de lijn is een getekende BUIS: een inktrand eronder, een papieren vulling erin, en
       daaroverheen het amberen deel dat volloopt. Drie paden over hetzelfde pad;
     - de stip is een OBJECT geworden: het notitieblok van het gesprek, het venster waarin
       de schets invult, het lijstje met vinkjes, de twee berichtwolken. Dat zijn de vier
       objecten uit het bouwplan van 16-09-2026, die daar nog elk een eigen vel hadden;
     - elk object staat een paar graden scheef en wipt recht zodra de halte bereikt is,
       waarna er binnenin iets gebeurt: de regels schrijven zich, het vlak vult, de vinkjes
       landen, de amberen wolk komt erbij.

   LEESBAARHEID BOVEN EFFECT. Vier regels waar dit blok zich aan houdt:
   1. de lijn en de objecten zijn decoratie: ze lopen door de lege middenkolom, raken geen
      letter, vangen geen muis (pointer-events none) en staan op aria-hidden;
   2. amber zit alleen in de lijn en in de objecten, nooit in de tekst;
   3. de tekst volgt de bocht niet: hij blijft links uitgelijnd op hoogstens 40ch;
   4. de koppen zijn uniform (vault-regel: geen woord in een accentkleur), alleen de punt
      erachter is geel via .kop-punt.

   DE MATEN. De haltes staan bijna een schermhoogte uit elkaar, zodat er per halte echt
   gescrold moet worden en de bocht de tijd heeft om te buigen. Het object hangt met zijn
   MIDDEN op een vaste afstand van de tekstrand (--obj-uit): `right: -X` zet de rechterrand
   daar en de translateX(50%) schuift hem een halve objectbreedte terug, dus het midden ligt
   precies op X. Zo wisselt de x van de objecten om en om en slingert de lijn vanzelf. De
   kop staat op twee regels zodat de vier blokken ongeveer even hoog blijven en de bochten
   gelijkmatig lopen. */
.tijdlijn{ margin-top: clamp(120px, 13vw, 200px); }
.tijdlijn-baan{ position: relative; }
.tijdlijn-svg{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.tijdlijn-pad{ fill: none; stroke-linecap: round; }
/* De drie lagen van de buis. De rand is de inktlijn van de tekeningen op deze pagina,
   alleen dikker omdat hij een buis omsluit; de vulling is het papier van het vel. */
.tijdlijn-rand{ stroke: var(--ink); stroke-width: 12; }
.tijdlijn-hol{ stroke: var(--paper); stroke-width: 8; }
.tijdlijn-loop{
  stroke: var(--amber);
  stroke-width: 8;
  /* Kort en lineair: de streep moet de scroll volgen en niet achter de muis aan slepen. */
  transition: stroke-dashoffset .12s linear;
}
.tijdlijn-halte{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 7vw, 120px);
}
.tijdlijn-halte + .tijdlijn-halte{ margin-top: clamp(200px, 30vh, 360px); }
.tijdlijn-halte--rechts .tijdlijn-tekst{ grid-column: 2; justify-self: end; }
.tijdlijn-tekst{
  position: relative;
  max-width: 40ch;
  --obj-uit: clamp(64px, 7.6vw, 142px);
}
.tijdlijn-tekst h3{
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  max-width: 17ch;                 /* dwingt de gesproken kop op twee regels */
}
.tijdlijn-tekst p{
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  font-size: clamp(1.02rem, 1.2vw, 1.22rem);
  line-height: 1.55;
}

/* ---- Het object per halte ----
   Staat met zijn midden op --obj-uit van de binnenrand van het tekstblok, op de hoogte van
   de kop. De buis loopt erachter langs en verdwijnt achter de gevulde tekening, dus de lijn
   lijkt er netjes in en uit te lopen. */
.tijdlijn-obj{
  position: absolute;
  top: clamp(-14px, -1vw, -6px);
  right: calc(-1 * var(--obj-uit));
  transform: translateX(50%);
  width: clamp(84px, 9.2vw, 128px);
  aspect-ratio: 1;
  z-index: 2;
}
.tijdlijn-halte--rechts .tijdlijn-obj{
  right: auto;
  left: calc(-1 * var(--obj-uit));
  transform: translateX(-50%);
}
.tijdlijn-obj svg{
  display: block;
  width: 100%; height: 100%;
  overflow: visible;
  /* Scheef en iets kleiner tot de halte bereikt is; de hoek per object staat hieronder.
     De draaiing zit op de svg en niet op de span, want die draagt al de translateX. */
  transform: rotate(var(--scheef, -4deg)) scale(.9);
  transform-origin: 50% 55%;
  transition: transform .62s var(--ease);
}
.tijdlijn-obj.is-aan svg{ transform: rotate(var(--recht, 0deg)) scale(1); }
/* Elk object een eigen hoek, anders staan er vier dezelfde tekeningetjes onder elkaar. */
.tijdlijn-obj--blok{ --scheef: -7deg; --recht: -2.5deg; }
.tijdlijn-obj--venster{ --scheef: 6deg; --recht: 2deg; }
.tijdlijn-obj--lijstje{ --scheef: -6deg; --recht: 3deg; }
.tijdlijn-obj--wolken{ --scheef: 5deg; --recht: -2deg; }

/* Wat er binnenin gebeurt zodra de halte bereikt is. Alles op transform en opacity. */
/* 1. de regels op het blok schrijven zich, van links naar rechts */
.tl-regels path{
  transform: scaleX(0);
  transform-origin: left center;
  transform-box: fill-box;
  transition: transform .5s var(--ease);
}
.is-aan .tl-regels path{ transform: scaleX(1); }
.is-aan .tl-regels path:nth-child(1){ transition-delay: .16s; }
.is-aan .tl-regels path:nth-child(2){ transition-delay: .28s; }
.is-aan .tl-regels path:nth-child(3){ transition-delay: .40s; }
.is-aan .tl-regels path:nth-child(4){ transition-delay: .52s; }
/* 2. het vlak in het venster vult van links naar rechts */
.tl-vlak{
  transform: scaleX(0);
  transform-origin: left center;
  transform-box: fill-box;
  transition: transform .66s var(--ease) .18s;
}
.is-aan .tl-vlak{ transform: scaleX(1); }
/* 3. de vinkjes landen na elkaar */
.tl-vink{
  opacity: 0;
  transform: scale(.4);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity .3s var(--ease), transform .42s var(--ease);
}
.is-aan .tl-vink{ opacity: 1; transform: scale(1); }
.is-aan .tl-vink--1{ transition-delay: .18s; }
.is-aan .tl-vink--2{ transition-delay: .34s; }
.is-aan .tl-vink--3{ transition-delay: .50s; }
/* 4. de wolken landen na elkaar, die van ons als laatste */
.tl-wolk{
  opacity: 0;
  transform: translateY(8px) scale(.92);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity .34s var(--ease), transform .5s var(--ease);
}
.is-aan .tl-wolk{ opacity: 1; transform: none; }
.is-aan .tl-wolk--u{ transition-delay: .14s; }
.is-aan .tl-wolk--wij{ transition-delay: .42s; }

/* Onder 900px vervalt de slinger: de buis staat recht aan de linkerkant en alle tekst
   staat ernaast. Dezelfde module, andere meting. Het object staat dan op de lijn, links
   naast de kop, en is kleiner. */
@media (max-width: 900px){
  .tijdlijn-baan{ padding-left: clamp(52px, 15vw, 76px); }
  .tijdlijn-halte, .tijdlijn-halte--rechts{ grid-template-columns: minmax(0, 1fr); }
  .tijdlijn-halte--rechts .tijdlijn-tekst{ grid-column: 1; justify-self: start; }
  .tijdlijn-tekst{ max-width: none; --obj-uit: clamp(26px, 7.5vw, 38px); }
  .tijdlijn-tekst h3{ max-width: none; }
  .tijdlijn-obj, .tijdlijn-halte--rechts .tijdlijn-obj{
    right: auto;
    left: calc(-1 * var(--obj-uit));
    transform: translateX(-50%);
    width: clamp(52px, 14vw, 68px);
  }
  .tijdlijn-halte + .tijdlijn-halte{ margin-top: clamp(120px, 22vh, 220px); }
  .tijdlijn-rand{ stroke-width: 9; }
  .tijdlijn-hol, .tijdlijn-loop{ stroke-width: 6; }
}
@media (prefers-reduced-motion: reduce){
  .tijdlijn-loop{ transition: none; }
  .tijdlijn-obj svg{ transition: none; transform: rotate(var(--recht, 0deg)); }
  .tl-regels path, .tl-vlak{ transform: scaleX(1); transition: none; }
  .tl-vink, .tl-wolk{ opacity: 1; transform: none; transition: none; }
}

/* ---- Leeslicht ----
   Een grote zin die met de scroll woord voor woord bijkleurt, van linksboven naar
   rechtsonder, zodat het oog de regel volgt. Overgenomen van de Vermeer-inleiding
   (300_Websites/Timmerfabriek Vermeer/_vermeer-familie/).

   Ongelezen woorden staan op 26% inkt: licht genoeg om het verschil te zien, donker
   genoeg om leesbaar te blijven als iemand het blok stilstaand voor zich heeft. Bij
   prefers-reduced-motion staat alles meteen vol.

   De maat is ruimer dan .kern: dit is de zin waar een vel op draait, niet de regel
   waar een blok op uitkomt. Houd hem onder de dertig woorden, anders wordt het een
   alinea in kopletter en dat leest zwaar. */
.leeslicht{
  font-size: clamp(1.5rem, 2.85vw, 2.45rem);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -0.032em;
  max-width: 34ch;
  text-wrap: balance;
  color: var(--tekst);
}
.leeslicht .lw{
  color: rgba(17,17,17,.26);
  transition: color .5s var(--ease);
}
.leeslicht .lw.aan{ color: var(--ink); }
.on-dark .leeslicht .lw{ color: rgba(236,236,234,.28); }
.on-dark .leeslicht .lw.aan{ color: var(--paper); }
@media (prefers-reduced-motion: reduce){
  .leeslicht .lw{ color: var(--tekst) !important; transition: none; }
}

/* ---- Zo begint het (NIET MEER IN GEBRUIK sinds 11-09-2026, avond) ----
   Deze klassen droegen op werk.html het vel "Zo begint het." vlak voor de uitnodiging.
   Dat vel is opgegaan in de eerste halte van het spoor ("U belt, wij komen langs"),
   want het beschreef het eerste gesprek en stond daarmee achter de werkwijze in
   plaats van erin. De zin en de drie vragen staan daar ongewijzigd.
   .gesprek, .gesprek-in, .gesprek-zin en .gesprek-vragen worden sindsdien nergens
   meer gebruikt. Ze blijven staan omdat de vorm goed was en zo terug te halen is;
   wie zeker weet dat hij niet terugkomt, mag dit hele blok weghalen.
   Wat hieronder stond aan toelichting, ongewijzigd:

   NIEUW OP 11-09-2026, op verzoek: "ik wil een nieuwe sectie (wit) voor de cta op
   de wat wij doen."

   De pagina vertelt hierboven wat wij maken en hoe wij werken, en ging daarna
   meteen over in "En nu die van u." Wat ertussen ontbrak is het antwoord op de
   vraag die de lezer op dat moment heeft: wat gebeurt er als ik bel. Dat staat hier,
   in een zin op leeslicht, met de foto van ons tweeen als band erboven: eerst ziet u
   wie er langskomt, dan leest u wat er gebeurt.

   De vorm is met opzet het tegenovergestelde van de rest van de pagina: geen twee
   kolommen lopende tekst, geen tekens, geen object. Een korte kop links, een grote
   zin rechts en verder lucht. Dat is de adempauze vlak voor de knop.
   De kop draagt alleen; er hoort geen regel onder (vault-regel: geen subkoppen). */
.gesprek{ padding-block: clamp(92px, 13vw, 190px); }
.gesprek-in{
  display: grid;
  /* De kopkolom is zo breed dat "Zo begint het." er op een regel in past; wordt de
     kop langer, dan breekt hij hier gewoon af en dat mag. */
  grid-template-columns: minmax(0, .56fr) minmax(0, 1fr);
  gap: clamp(30px, 4.4vw, 80px);
  align-items: start;
}
/* De kop staat hier een maat kleiner dan de h2 elders op de site. Reden: hij deelt
   het vel met een zin op kopformaat ernaast, en twee koppen naast elkaar op dezelfde
   maat vechten. Op deze maat past "Zo begint het." bovendien op een regel binnen de
   kopkolom (gemeten op de .wrap van 1240: kolom 384px, de zin 318px). Wordt de kop
   langer, dan breekt hij gewoon af; meet het na met een canvas op Archivo 900 min de
   letterafstand van 0,035em per teken. */
.gesprek-in h2{ max-width: none; font-size: clamp(1.7rem, 3.2vw, 2.9rem); }
.gesprek-zin .haal{ margin-top: clamp(30px, 3.4vw, 48px); }
/* De drie vragen in dit vel (verhuisd van over-ons.html, 11-09-2026). Ze staan hier
   een maat kleiner dan de .vraag-standaard: de zin erboven is al kopformaat, en twee
   koppen op dezelfde maat onder elkaar vechten. De eigen wikkel is nodig omdat .vraag
   met nth-of-type rekent en de zin erboven ook een <p> is. */
.gesprek-vragen{ margin-top: clamp(26px, 3vw, 42px); }
.gesprek-vragen .vraag{ font-size: clamp(1.24rem, 2.2vw, 1.95rem); }
@media (max-width: 900px){
  .gesprek-in{ grid-template-columns: 1fr; gap: clamp(24px, 5vw, 38px); }
  .gesprek-in h2{ max-width: none; }
}

/* ---- De regiokaart (over-ons.html) ----
   NIEUW OP 11-09-2026. De pagina zei nergens waar wij zitten en waar wij werken, en
   dat is juist het argument van een bedrijf uit Renswoude. Geen ingesloten Google-
   kaart (die zet cookies en de website heeft niet voor niets een toestemmingsbalk),
   maar een eigen tekening: elke plaats een stip, Renswoude in amber, en een draad
   van Renswoude naar elke plaats eromheen.

   DE STIPPEN STAAN OP DE ECHTE PLEK. De coordinaten in de SVG zijn de breedte- en
   lengtegraad van de plaatsen, lineair geprojecteerd:
       x = (lengtegraad - 5.35) * cos(52 graden) * 1000
       y = (52.20 - breedtegraad) * 1000
   Wie er een plaats bij zet, rekent hem met diezelfde twee regels uit; dan klopt de
   onderlinge ligging vanzelf. De viewBox is daarna ruim genomen voor de naamlabels.

   De labels staan per stip aan een andere kant, met de hand gekozen: recht naar
   rechts waar het kan, boven of onder waar twee plaatsen op dezelfde hoogte liggen
   (Woudenberg en Scherpenzeel), en naar links bij Rhenen omdat Wageningen rechts
   ernaast ligt. Verandert de rij plaatsen, loop ze dan opnieuw na.

   De stippen komen een voor een op als het blok in beeld schuift: --i op elke groep
   is de volgorde. De reveal staat op de wikkel, want de vertraging hangt aan
   [data-reveal].is-visible. */
.regio{
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: center;
}
.regiokaart{
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.regiokaart .draad{
  fill: none;
  stroke: var(--paper-16);
  stroke-width: .8;
}
.regiokaart .stip{ fill: var(--paper-45); }
.regiokaart .naam{
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .03em;
  fill: var(--paper-70);
}
.regiokaart .hier .stip{ fill: var(--amber); }
.regiokaart .hier .naam{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  fill: var(--paper);
}
.regiokaart .ring{
  fill: none;
  stroke: var(--amber);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: regio-ring 3.4s var(--ease) infinite;
}
@keyframes regio-ring{
  0%   { transform: scale(.45); opacity: .65; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
.regiokaart .plaats{
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 85ms);
}
.regiokaart .draden{
  opacity: 0;
  transition: opacity 1.4s var(--ease);
  transition-delay: .5s;
}
/* De wikkel draagt data-reveal alleen als haakje: .is-visible zet de stippen aan.
   De wikkel zelf mag niet meefaden, anders zie je de trap van de stippen niet.
   Twee delen in de selector, dus hij wint van de gewone [data-reveal]-regel. */
.regio-kaartkolom[data-reveal]{ opacity: 1; transform: none; transition: none; }
[data-reveal].is-visible .regiokaart .plaats{ opacity: 1; transform: none; }
[data-reveal].is-visible .regiokaart .draden{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .regiokaart .ring{ animation: none; opacity: .45; }
  .regiokaart .plaats, .regiokaart .draden{ opacity: 1; transform: none; transition: none; }
}
@media (max-width: 900px){
  .regio{ grid-template-columns: 1fr; gap: clamp(32px, 6vw, 48px); }
  /* Andersom op een telefoon: eerst de tekst, dan de kaart. */
  .regio-kaartkolom{ order: 2; }
}


/* =================================================================
   OVER ONS, HERBOUWD (11-09-2026)
   De pagina stond in acht vellen die allemaal dezelfde vorm hadden: kop, twee
   kolommen lopende tekst met een vette aanzet, een kern en een haal. Op papier
   is dat netjes, in beeld is het acht keer hetzelfde skelet en dan leest een
   pagina als een formulier. Benjamin: "de huidige over ons opmaak leest als
   2015, ik wil een interessante high end design, creatieve pagina die moeiteloos
   in elke sectie overloopt."

   Wat er nu staat: elk vel heeft een eigen vorm, en die vorm komt uit wat er op
   dat vel staat.
     1. de opening      de zin noemt twee namen, dus staan de twee gezichten in
                        de zin (.gezicht). De grote foto loopt de pagina uit en
                        hangt over de naad naar het vel eronder.
     2. Renswoude       de regiokaart die er al lag, nu naast de zin over korte
                        lijnen. Die kaart IS korte lijnen.
     3. de verbazing    een band met de holle zinnen die op elke sjabloonsite
                        staan, in omtrekletter, langzaam schuivend. Dat is wat
                        de alinea eronder beschrijft, nu te zien.
     4. wie doet wat    twee portretten die verspringen, niet naast elkaar op een
                        rij, met de naam eronder in kopletter.
     5. het slot        een zin op leeslicht naast de foto van ons tweeen.

   .vragen en .verdeling staan sinds 11-09-2026 NIET meer op over-ons.html maar op
   werk.html: het zijn allebei blokken over de werkwijze en niet over wie wij zijn,
   en de pagina was te lang. Van die twee is alleen .verdeling nog in gebruik (op
   werk.html, sinds 12-09-2026 weer op een papieren vel); de drie vragen werden daar
   .spoor-vragen en zijn op 12-09-2026 met het vel "Van gesprek tot live." van de
   website verdwenen, dus .vragen staat hier ongebruikt. De klassen blijven staan.
   Zet je ze ooit terug, zet ze dan op een van de twee pagina's en niet op allebei.

   DE OVERGANGEN. Een vel gaat over in het volgende via iets dat de naad kruist:
   de foto die overhangt (1 naar 2), de band met holle zinnen die bovenin vel 3
   begint, de fotoband voor vel 6, en de ronde naad (.sheet-raised) op de twee
   plekken waar echt een nieuw hoofdstuk begint. Er staat geen enkele lange lichte
   scheidingslijn: dat blijft verboden, zie de notitie bij .haal.

   TEKST. De hele pagina is de tekst van Benjamin van 11-09-2026, omgezet naar
   "u" omdat de rest van de site sitewide "u" is, en met "site" overal voluit als
   "website" (vault-regel). Wat eruit is: "Geen accountmanager, geen tussenlaag."
   Dat is de afwijs-en-vervang-constructie waar de vault-regel over gaat; de zin
   eromheen zegt hetzelfde positief.
   ================================================================= */

body[data-page="over-ons"]{
  /* Hoeveel de openingsfoto over de naad naar het donkere vel hangt. Vel 2 rekent
     met dezelfde waarde in zijn bovenpadding, zodat de tekst daar nooit onder de
     foto kan schuiven. Verander je er een, verander dan allebei. */
  --over: clamp(48px, 7vw, 108px);
  /* De maat van de openingsalinea. Hij ging op 11-09-2026 een stap omlaag, van
     clamp(1.64rem, 3.35vw, 2.92rem), op verzoek: "maak de tekst iets kleiner". */
  --intro-maat:  clamp(1.5rem, 3.05vw, 2.62rem);
  --intro-regel: 1.2;
  /* Hoeveel de foto boven de openingsalinea uit begint. Plafond: het vel begint op
     161px en de vaste kopbalk is er ongeveer 105 van, dus veel meer dan veertig
     schuift de foto onder de balk door. Zie het blok "1. De opening" hieronder. */
  --foto-op: clamp(16px, 2.1vw, 32px);
}

/* ---- 1. De opening ----
   Links de openingsalinea, rechts de foto. De foto loopt naar rechts de pagina uit,
   begint een stukje hoger dan de tekst en hangt onderaan over de naad in het donkere
   vel eronder.

   EEN ELEMENT, GEEN TWEE (11-09-2026). De naamzin heeft een paar versies los gestaan,
   over de volle breedte boven de foto. Benjamin: "maak het weer 1 element links van de
   foto en schuif de foto wat omhoog." Het is dus weer een gewone alinea: "Wij zijn
   [foto]Benjamin en [foto]Stijn." staat er gewoon als eerste zin in. De maat ging er
   tegelijk een stap af ("maak de tekst iets kleiner"), van clamp(1.64rem, 3.35vw,
   2.92rem) naar --intro-maat hieronder.

   TWEE WAARDEN STUREN DE COMPOSITIE, allebei negatieve marges op .intro-beeld:
     --foto-op   hoeveel de foto boven de tekst uit begint. Hier zit een plafond aan:
                 de vaste kopbalk is ongeveer 105px hoog en het vel begint op 161, dus
                 boven de veertig pixels schuift de foto onder de balk door.
     --over      hoeveel hij onderaan over de naad hangt. Die waarde is sinds de eerste
                 versie ongewijzigd (107px gemeten); Benjamin: "hou overlap het liefst
                 evenveel."
   Allebei worden ze uit de rijhoogte gerekend, dus de tekstkolom bepaalt hoe hoog de
   rij is en de foto volgt. Zie de notitie bij .intro-beeld waarom daar geen
   aspect-ratio op mag. */
.intro{
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(36px, 5vw, 88px);
  /* Allebei de kolommen beginnen bovenaan. Op end uitlijnen leek logisch (de foto
     is hoger dan de tekst, dus de onderkanten gelijk) maar dan begint de tekst pas
     driehonderd pixels onder de balk en opent de pagina met een leeg vel. */
  align-items: start;
}
/* De tekstkolom bepaalt hoe hoog de rij is, en daarmee hoe hoog de foto wordt. Hou
   de onderpadding dus krap: elke pixel hier maakt de foto een pixel langer. */
.intro-tekst{ padding-bottom: clamp(40px, 5.4vw, 88px); }

/* De openingsalinea. Groot genoeg om de pagina te openen zonder dat er een kop boven
   staat, smal genoeg om naast de foto te staan. De leesmaat is 24ch en niet minder:
   daaronder wordt het een kolom van drie woorden breed en telt hij tien regels. */
.intro-zin{
  font-size: var(--intro-maat);
  font-weight: 800;
  line-height: var(--intro-regel);
  letter-spacing: -0.034em;
  max-width: 24ch;
  text-wrap: pretty;
}
/* De zin over korte lijnen staat op de gewone leesmaat en niet op een maat tussen de
   twee in: dan zou er een trapje ontstaan en dat is precies wat er van deze pagina
   af moest. */
.intro-na{ margin-top: clamp(22px, 2.6vw, 34px); }

/* Een gezicht in de zin zelf. De zin noemt twee namen en wij hebben van allebei
   een studioportret, dus staan ze er waar ze genoemd worden. De maat hangt aan de
   letter (em), dus hij schaalt vanzelf mee met --intro-maat.
   De object-position per foto is met de hand gezocht: de portretten zijn 4:5 en
   worden hier vierkant bijgesneden, dus de uitsnede moet het gezicht midden in het
   rondje zetten. Benjamin zit iets hoger in het kader dan Stijn. Wie de portretten
   vervangt, loopt die twee waarden opnieuw na.
   De ring in papierkleur zet het rondje los van de letters eromheen; zonder die
   ring loopt donker haar tegen donkere inkt aan. */
/* Een rondje en de naam die erbij hoort horen op dezelfde regel. Een afbeelding is
   voor de regelafbreker een eigen woord, dus zonder deze wikkel breekt de browser er
   gerust tussen af en staat het hoofdje van Stijn aan het eind van de ene regel en
   zijn naam aan het begin van de volgende.
   De klasse heet met opzet niet .naam: dat is al de klasse van de plaatslabels in de
   regiokaart verderop op deze pagina. */
.kopnaam{ white-space: nowrap; }

.gezicht{
  display: inline-block;
  width: .92em; height: .92em;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: -0.155em;
  margin: 0 .06em 0 .02em;
  box-shadow: 0 0 0 2px var(--paper), 0 8px 18px -8px rgba(17,17,17,.5);
}
.gezicht--benjamin{ object-position: 50% 12%; }
.gezicht--stijn{ object-position: 50% 18%; }
.on-dark .gezicht{ box-shadow: 0 0 0 2px var(--ink), 0 8px 18px -8px rgba(0,0,0,.8); }

/* DE HOOGTE VAN DE FOTO IS GEEN VERHOUDING MAAR EEN SOM. Hij rekt met align-self:
   stretch mee met de rij en steekt er aan twee kanten uit: --foto-op bovenaan en
   --over onderaan. Allebei de negatieve marges halen dat uitstek weer uit de
   rijhoogte, dus de tekstkolom bepaalt de rij en de foto volgt.
   Dit ging eerder mis met aspect-ratio plus align-self: end. De foto had toen een
   vaste hoogte en zijn onderkant hing vast aan de onderkant van de rij, dus zodra de
   tekstkolom hoger werd dan de foto zakte zijn bovenrand naar beneden weg en klopte
   de compositie niet meer. Zet er dus geen aspect-ratio op.
   De uitsnede staat op object-position 50% 15%: de bron is 4:5 staand en de koppen
   moeten boven in beeld staan, want dat is wat je in het eerste scherm ziet.

   De negatieve marge rechts is de afstand van de rechterrand van .wrap naar de rand
   van het venster: de goot, plus de helft van wat er boven de 1240 van de wikkel
   overblijft. body draagt overflow-x: hidden, dus het beetje dat de schuifbalk
   scheelt wordt afgeknipt en niet weggeschoven.
   Alleen de linkerhoeken zijn rond, want de rechterkant heeft geen rand meer. */
.intro-beeld{
  position: relative;
  z-index: 3;
  align-self: stretch;
  margin-top: calc(-1 * var(--foto-op));
  margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - 1240px) / 2)));
  margin-bottom: calc(-1 * var(--over));
}
.intro-beeld img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: 0 50px 90px -50px rgba(17,17,17,.6);
}
@media (max-width: 940px){
  /* Op smal staat de foto onder de tekst, dus er is niets om boven uit te steken en
     niets om overheen te hangen. Allebei de uitsteken gaan uit. */
  .intro{ grid-template-columns: 1fr; gap: clamp(30px, 5vw, 44px); }
  .intro-tekst{ padding-bottom: 0; }
  .intro-beeld{
    align-self: auto;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
  }
  .intro-beeld img{ height: auto; aspect-ratio: 5 / 4; border-radius: 0; }
}

/* ---- 2. Renswoude ----
   Tekst links en de kaart rechts, andersom dan .regio zelf staat. Reden: de
   openingsfoto hangt rechtsboven dit vel in, en die mag niet op de tekst vallen.
   De bovenpadding is daarom ook groter dan een gewone .sheet-pad: hij is de
   overhang plus de gewone lucht. */
.regio--tekstlinks{ grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); }
.vel-onder-overhang{
  padding-top: calc(var(--over) + clamp(66px, 9vw, 120px));
  /* Iets krapper dan een gewone .sheet-pad, want het vel eronder begint met een
     band die zelf al lucht meebrengt. */
  padding-bottom: clamp(58px, 7.6vw, 104px);
}
@media (max-width: 940px){
  .vel-onder-overhang{ padding-top: clamp(56px, 9vw, 90px); }
}
@media (max-width: 900px){
  .regio--tekstlinks{ grid-template-columns: 1fr; }
}

/* ---- 3. De holle zinnen ----
   De alinea eronder zegt dat je een hele pagina kunt lezen en daarna nog steeds
   niet weet wat een bedrijf doet. Dit is die pagina, in twee regels: de zinnen die
   op elke sjabloonsite staan, in omtrekletter zonder vulling, langzaam de ene kant
   op en de andere kant terug. Ze zijn met opzet leeg van binnen.

   ZE ZIJN GEEN INHOUD. De band staat op aria-hidden en de zinnen staan er niet om
   gelezen te worden; wie ze wel leest krijgt er niets verkeerds bij, want het zijn
   holle frasen en geen beweringen over Webwaarts.

   De lus draait op translate3d naar -50%, dus de rij moet de lijst precies twee
   keer bevatten. Zet je er een zin bij, zet hem dan in allebei de helften.
   De maskers laten de zinnen aan de randen wegvallen, anders zie je ze aan- en
   afsnijden tegen de rand van het scherm. */
.holle-band{
  position: relative;
  overflow: hidden;
  padding-block: clamp(22px, 2.8vw, 40px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.holle-rij{
  display: flex;
  width: max-content;
  animation: holle-loop 52s linear infinite;
  will-change: transform;
}
.holle-rij + .holle-rij{ margin-top: clamp(4px, .7vw, 12px); }
.holle-rij--terug{ animation-direction: reverse; animation-duration: 67s; }
.holle-rij span{
  flex: none;
  padding-right: clamp(26px, 3.2vw, 58px);
  font-size: clamp(1.85rem, 4.4vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.038em;
  white-space: nowrap;
  color: transparent;
  /* De omtrek pakt zijn kleur van het vel. De band stond eerst alleen op inkt;
     sinds 11-09-2026 draagt het vel eronder papierkleur, en dan moet de omtrek
     inkt zijn. Beide staan er, zodat de band op allebei de vellen werkt. */
  -webkit-text-stroke: 1px rgba(17,17,17,.26);
}
.on-dark .holle-rij span{ -webkit-text-stroke: 1px rgba(236,236,234,.30); }
@keyframes holle-loop{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-50%,0,0); }
}
/* Zonder text-stroke zou er niets staan, want de vulling is doorzichtig. */
@supports not ((-webkit-text-stroke: 1px #000) or (text-stroke: 1px #000)){
  .holle-rij span{ color: var(--ink-14); }
  .on-dark .holle-rij span{ color: var(--paper-16); }
}
@media (prefers-reduced-motion: reduce){
  .holle-rij{ animation: none; }
}

/* De alinea onder de band. Hij staat smaller dan de band breed is en met lucht
   erboven, zodat de band leest als iets waar je naar kijkt en de tekst als iets
   wat erover gaat. */
.verbazing{ margin-top: clamp(44px, 6vw, 86px); }
.verbazing-in{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(34px, 5vw, 88px);
  align-items: start;
}
@media (max-width: 900px){
  .verbazing-in{ grid-template-columns: 1fr; gap: clamp(26px, 5vw, 40px); }
}

/* ---- 4. De drie vragen ----
   De vragen blijven staan terwijl het antwoord ernaast langsschuift. Dat is wat
   een gesprek doet: de vraag ligt op tafel tot er iets uitkomt.
   De trap naar rechts (elke vraag een stukje verder in) maakt er drie zinnen van
   die na elkaar gesteld worden in plaats van een lijstje. Daarom staan er ook geen
   nummers en geen bolletjes voor; vault-regel, en het zou hier bovendien liegen,
   want het is een gesprek en geen formulier.
   Het vraagteken staat in merkgeel, net als de punt achter een kop (.kop-punt).
   Dat mag: het is een los teken achter de zin en geen woord in een andere kleur. */
.vragen{
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(0, 1fr);
  gap: clamp(38px, 5.6vw, 100px);
  align-items: start;
}
.vragen-kolom{
  position: sticky;
  top: calc(var(--balk) + clamp(18px, 3vw, 46px));
}
.vraag{
  font-size: clamp(1.5rem, 3.1vw, 2.7rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.036em;
  text-wrap: balance;
}
.vraag + .vraag{ margin-top: clamp(12px, 1.5vw, 22px); }
.vraag:nth-of-type(2){ margin-left: clamp(12px, 1.7vw, 30px); }
.vraag:nth-of-type(3){ margin-left: clamp(24px, 3.4vw, 60px); }
.vragen-antwoord > * + *{ margin-top: clamp(22px, 2.8vw, 36px); }
@media (max-width: 940px){
  .vragen{ grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
  /* Op smal is er geen kolom om in te blijven staan. */
  .vragen-kolom{ position: static; }
}

/* ---- 5. De verdeling ----
   Wat u doet tegenover wat wij doen, op werk.html. Tot 12-09-2026 stonden hier
   twee even brede kolommen met een alinea erboven die precies uitlegde wat de
   kolommen eronder al lieten zien. Die alinea is weg en de kolommen zijn ongelijk
   geworden: uw kant staat in de brede kolom met veel lucht eromheen, onze kant in
   de smalle ernaast. Dat is met opzet omgedraaid. Hoe smaller de kolom, hoe meer
   regels, dus de kant met het meeste werk wordt vanzelf ruim twee keer zo hoog als
   de kant met het minste. Het verschil in massa is het hele argument en er staat
   geen enkel getal of percentage bij.
   Het rechterblok is lopende tekst met een middot ertussen en geen opsomming met
   bolletjes (vault-regel over lijstjes). */
.verdeling{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .54fr);
  /* Twee rijen aan uw kant: boven uw drie regels, eronder de slotzin. De onze
     staat in een kolom die over allebei de rijen loopt, en die bepaalt dus de
     hoogte van het blok. Daardoor zakt de slotzin vanzelf naar de onderkant van
     onze opsomming en is de lucht ertussen precies het verschil in werk. */
  grid-template-rows: auto 1fr;
  /* Alleen tussen de kolommen. Een rijafstand zou bij de bodemmarge van de
     slotzin opgeteld worden en die zin dan onder onze kolom uit duwen; de lucht
     boven de slotzin hoort op een plek geregeld te worden en dat is daar. */
  column-gap: clamp(38px, 5.4vw, 100px);
  row-gap: 0;
  align-items: start;
  /* De afstand van de goot van dit vel tot de rand van het scherm, in pure
     schermmaten gerekend zodat er geen procenten in zitten: procenten zouden tegen
     de breedte van het element rekenen waar ze gebruikt worden, en dat is bij een
     flexitem een heel andere breedte dan de .wrap. Hiermee loopt de amberen lijn
     achter "Wat wij doen" op elk scherm precies tot de rand door. */
  --uitloop: calc((100vw - min(100vw, var(--wrap))) / 2 + var(--gutter));
}

/* De kant met wat u doet. Geef hem nooit een kader, een vlak of een schaduw; hij
   onderscheidt zich door zijn zetsel (groter, zwaarder, korte regels) en door de
   lucht eromheen. */
/* :not() erbij, anders wint deze regel van .verdeel-label (twee delen tegen een)
   en staat het kapitalenlabel boven de kolom even groot als de regels eronder. */
.verdeel-kort{ grid-column: 1; grid-row: 1; }
.verdeel-kant{ grid-column: 2; grid-row: 1 / span 2; }
/* align-self:end zet hem op de onderkant van de tweede rij, dus gelijk met het
   eind van onze kolom. De margin-top is alleen een bodem: op een scherm waar onze
   kolom kort uitvalt, blijft er lucht tussen uw regels en deze zin staan. */
.verdeel-kern{
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  margin-top: clamp(44px, 5.4vw, 86px);
}
.verdeel-kort p:not(.verdeel-label):not(.verdeel-noot){
  font-size: clamp(1.24rem, 2.04vw, 1.76rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.22;
}
.verdeel-kort p:not(.verdeel-label):not(.verdeel-noot) + p{
  margin-top: clamp(14px, 1.7vw, 26px);
}
/* De stille regel onder uw drie regels. Hier stond vroeger een hele alinea boven
   de kop; wat er echt in stond (meer hebben wij niet nodig, en veel vinden wij zelf
   al) past in een regel en hoort bij uw kant, niet boven het geheel. Houd hem op
   een zin. */
.verdeel-noot{
  margin-top: clamp(26px, 3vw, 44px);
  font-size: clamp(.94rem, 1.06vw, 1.05rem);
  font-weight: 600;
  line-height: 1.5;
  max-width: 34ch;
  color: var(--tekst-stil);
}

/* ---- Het label met de lijn erachter ----
   Allebei de kanten krijgen hetzelfde label met een haarlijn erachter, en juist
   omdat het hetzelfde element is valt het verschil op: de lijn van uw kant is inkt
   en stopt aan het eind van de kolom, de lijn van onze kant is amber, dikker, en
   loopt het scherm uit. Dat is de hele vergelijking, zonder een cijfer.
   Maak ze nooit even lang en haal ze niet weg. */
.verdeel-label{
  display: flex;
  align-items: center;
  gap: clamp(13px, 1.5vw, 24px);
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tekst-stil);
  margin-bottom: clamp(18px, 2.2vw, 30px);
}
.verdeel-label::after{
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--ink-14);
}
/* De lijn zelf steekt buiten het label uit en niet het label als geheel: als de
   lijn een eigen flexitem is, telt zijn negatieve marge gewoon mee in de vrije
   ruimte en groeit hij er precies zoveel bovenop. Body heeft overflow-x:hidden,
   dus er valt niets zijwaarts te scrollen. */
.verdeel-label--veel::after{
  height: 2px;
  background: var(--amber);
  margin-right: calc(-1 * var(--uitloop));
}
.on-dark .verdeel-label::after{ background: var(--paper-16); }
.on-dark .verdeel-label--veel::after{ background: var(--amber); }

/* ---- Wat wij doen ----
   Lopende tekst in de smalle kolom. Groter gezet dan vroeger (1,02 tot 1,3rem),
   want dit blok moet wegen: hoe korter de regels, hoe meer regels, en het aantal
   regels is waar dit blok het van moet hebben. */
.verdeel-veel{
  font-size: clamp(1.06rem, 1.46vw, 1.4rem);
  font-weight: 600;
  line-height: 1.66;
  letter-spacing: -0.012em;
  color: var(--tekst);
}
.verdeel-veel i{
  font-style: normal;
  color: var(--amber-deep);
  font-weight: 900;
  padding: 0 .34em;
}
.on-dark .verdeel-veel i{ color: var(--amber); }

/* ---- Het gebaar van dit vel: de opsomming die blijft komen ----
   De dingen die wij doen landen een voor een in plaats van als blok. Het is het
   enige gebaar op werk.html dat optelt (het venster bouwt zich op, de tijdbalk
   loopt naar rechts, de lijn onder "En daarna." houdt niet op), en het zegt
   hetzelfde als de tekst: dit gaat maar door.
   De volgorde staat als --i in de HTML, zodat je een item kunt verplaatsen zonder
   hier iets te hoeven tellen. Alleen opacity en filter, dus de regelval verspringt
   niet terwijl het loopt.
   Twee delen in de selector, dus hij wint van de gewone [data-reveal]-regel: het
   blok zelf komt niet op, de inhoud doet dat. */
.verdeel-veel[data-reveal]{ opacity: 1; transform: none; transition: none; }
.verdeel-veel span{
  opacity: 0;
  filter: blur(5px);
  transition: opacity .62s var(--ease), filter .62s var(--ease);
  transition-delay: calc(var(--i, 0) * 58ms);
}
.verdeel-veel.is-visible span{ opacity: 1; filter: none; }

@media (max-width: 820px){
  /* Op smal staan de drie blokken onder elkaar in de volgorde waarin ze in de HTML
     staan: uw kant, onze kant, de slotzin. Het hoogteverschil blijft staan, want de
     kolommen zijn dan even breed en de ene kant heeft nu eenmaal meer regels dan de
     andere. De vaste plaatsing moet hier dus los. */
  .verdeling{
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: clamp(30px, 6vw, 46px);
  }
  .verdeel-kort, .verdeel-kant, .verdeel-kern{
    grid-column: auto;
    grid-row: auto;
  }
  .verdeel-kern{ margin-top: clamp(14px, 3vw, 26px); }
}
@media (prefers-reduced-motion: reduce){
  .verdeel-veel span{ opacity: 1; filter: none; transition: none; }
}


/* ---- 6. Wie doet wat ----
   Twee portretten die verspringen. Ze stonden eerst op twee losse vellen onder
   elkaar, ieder met een eigen kop en een eigen ondertekening, en dat waren twee
   hoofdstukken voor een stuk tekst van vier zinnen per man. Nu staan ze naast
   elkaar op een vel, met een hoogteverschil zodat het geen paspoortfoto-rij wordt.
   De naam staat eronder in kopletter en niet als plaat over de foto: het portret
   met naamplaat (.portret) staat elders op de site al en hier zou het de derde
   keer zijn dat dezelfde vorm terugkomt. */
.duo{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 74px);
  align-items: start;
}
.duo > *:nth-child(2){ margin-top: clamp(28px, 6.5vw, 116px); }
.duo-foto{
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-2);
  margin: 0;
}
.duo-foto img{
  width: 100%; height: 100%;
  object-fit: cover;
}
.duo-naam{
  margin-top: clamp(16px, 2.1vw, 28px);
  font-size: clamp(1.26rem, 2.15vw, 1.86rem);
  font-weight: 900;
  letter-spacing: -0.038em;
  line-height: 1.06;
}
.duo-tekst{ margin-top: clamp(10px, 1.2vw, 16px); }
/* De regel waar het vel op uitkomt, onder de twee kolommen door. Hij hoort bij
   allebei, dus hij staat ook onder allebei. */
.duo-slot{ margin-top: clamp(44px, 6vw, 92px); }
@media (max-width: 760px){
  .duo{ grid-template-columns: 1fr; gap: clamp(34px, 7vw, 52px); }
  .duo > *:nth-child(2){ margin-top: 0; }
  .duo-foto{ max-width: 360px; }
}

/* ---- 7. Het slot ----
   De zin op leeslicht links, de foto van ons tweeen rechts. Dit is het laatste
   lichte vel voor de uitnodiging, dus het mag rustig zijn: een zin, een alinea,
   een foto. */
.slot{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(38px, 5.6vw, 94px);
  align-items: center;
}
.slot-foto{
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ink-2);
}
.slot-foto img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.slot-tekst{ margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 900px){
  .slot{ grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
  .slot-foto{ aspect-ratio: 5 / 4; }
}

/* Het openingsvel moet boven het vel eronder liggen, anders verdwijnt de
   overhangende foto achter de zwarte achtergrond van vel 2. Elk .sheet staat op
   z-index 2 en maakt daarmee een eigen stapelcontext, dus een z-index op de foto
   zelf helpt niet: die kan zijn eigen vel niet uit. Het vel krijgt hem. */
body[data-page="over-ons"] .vel-opening{ z-index: 5; }

/* ================= De kopbalk per pagina =================
   De dekkende kopbalk heeft de kleur van het lichte vel waar hij overheen ligt,
   zodat er bovenaan geen band te zien is waar de balk ophoudt. Op bijna elke
   pagina is dat --paper en regelt --balk-glas in :root het al. Het portfolio is
   de uitzondering: .werk-vel staat op het gebroken wit --paper-hi (#F3F1EB), dus
   daar gaat de balk mee. Krijgt een nieuwe pagina een ander licht vel, zet dan
   hier een regel bij met dezelfde kleur en dezelfde .82. */
body[data-page="ons-werk"]{ --balk-glas: rgba(243,241,235,.82); }


/* =================================================================
   WAT WIJ DOEN (werk.html): de nieuwe vellen van 11-09-2026 (avond)

   Benjamin gaf de volgorde op waarin een bezoeker zijn vragen stelt en de pagina
   volgt die nu; de opbouw staat bovenaan werk.html. Vel 1 (de vier tekens) en
   vel 2 (het venster) zijn ongewijzigd gebleven, alles daarna is nieuw. Wat hier
   staat zijn de maten van die nieuwe vellen.

   VIER GEBAREN, VIER RICHTINGEN. Het venster bouwt zich op (vel 2, verderop in dit
   bestand), de opsomming van wat wij doen telt zich op (vel 3), de tijdbalk loopt
   naar rechts (vel 4) en de lijn onder "En daarna." houdt niet op (vel 6). Het waren
   er op 12-09-2026 even drie, toen het spoor dat naar beneden tekende met zijn vel
   van de pagina ging; het optellen op vel 3 is er diezelfde dag voor teruggekomen.
   Elk gebaar is
   amber en elk gebaar gaat een andere kant op; dat is wat de pagina bij elkaar houdt
   zonder dat er kaders of scheidingslijnen aan te pas komen. Wie hier een vel bij
   zet, verzint er een gebaar bij dat er nog niet staat, of laat het vel stil.
   ================================================================= */

/* ---- De openingszin boven de vier tekens ----
   De h1 stond op deze pagina als .vh en was dus onzichtbaar. Sinds vanavond is hij
   de zin die zegt wat wij leveren en voor wie, en staat hij in beeld.

   HIJ STAAT NIET OP KOPFORMAAT. De h1-maat van de site loopt tot 4,86rem en dan
   drukt hij de vier tekens van het scherm; dit is een zin die je leest en geen titel
   die je overslaat. Vandaar de maat van .kern met een ruimere leesmaat eromheen.
   De klasse wint van de h1-regel in de type scale, want een klasse weegt zwaarder
   dan een elementnaam.

   DE HOOGTE. .doen rekende zelf met de hoogte van het scherm om de vier tekens
   precies te vullen. Nu de zin erboven staat, doet de wikkel dat: twee rijen, de
   zin op zijn eigen hoogte en de tekens op de rest (1fr). .doen zet zijn eigen
   min-height op deze pagina dus op nul en houdt alleen zijn space-evenly over. De
   som is ongewijzigd, inclusief de kier van 72px die onderaan laat zien dat de
   pagina doorloopt. */
.doen-wrap{
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(34px, 4.4vw, 78px);
  min-height: calc(100vh - var(--balk) - clamp(26px, 3.6vw, 58px) - clamp(80px, 10vw, 150px) - 72px);
  min-height: calc(100svh - var(--balk) - clamp(26px, 3.6vw, 58px) - clamp(80px, 10vw, 150px) - 72px);
}
body[data-page="werk"] .doen{ min-height: 0; }
.openzin{
  font-size: clamp(1.34rem, 2.5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.26;
  max-width: 30ch;
  text-wrap: balance;
}
@media (max-width: 760px){
  /* Een kolom en geen schermhoogte: de zin plus vier items zijn daar vanzelf al
     langer dan het scherm. Zelfde uitzondering als bij .doen. */
  .doen-wrap{ min-height: 0; gap: clamp(28px, 6vw, 40px); }
  .openzin{ max-width: 26ch; }
}

/* ================= Werk-pagina, hoofdstuk 1, vel 1: het theatertje =================
   Sinds 14-09-2026 (avond) het eerste vel van werk.html: links de h1 met een alinea,
   rechts een getekende telefoon waarop een loop van 31 seconden in zeven taferelen
   laat zien wat een website u oplevert. Emoji-achtige figuren in de eigen streek.
   De eerdere versies van dit vel (de vier tekens, de klantweg, nu en straks, de
   eerste loop met wij en de klant) staan in de git-geschiedenis; .doen hierboven
   is op deze pagina ongebruikt.

   EEN KLOK VAN 31s. Elke animatie duurt 31s, herhaalt oneindig en start op hetzelfde
   moment (zodra layout.js .is-aan zet). Een seconde is 3,226%. De taferelen:
     1 ze hebben het over u        0     tot 12,9   (uit 12,9 tot 14,5; weer in 98,4 tot 100)
     2 gezocht en gevonden         14,5  tot 25,8   (uit 25,8 tot 27,4)
     3 uw website                  27,4  tot 45,2   (uit 45,2 tot 46,8)
     4 zo kijken ze naar u, zij belt 46,8 tot 67,7 (uit 67,7 tot 69,4)
     5 uw telefoon gaat            69,4  tot 77,4   (uit 77,4 tot 79)
     6 uw agenda                   79    tot 83,9   (uit 83,9 tot 85,5)
     7 bedankt, Webwaarts          85,5  tot 98,4   (uit 98,4 tot 100)
   Wie een tafereel langer maakt, schuift alle percentages erna op, ook die van de
   onderdelen binnen de taferelen. Alleen opacity, transform en (typen) clip-path. */
.th-wrap{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(36px, 5vw, 96px);
  align-items: center;
  min-height: calc(100vh - var(--balk) - clamp(26px, 3.6vw, 58px) - clamp(72px, 8.6vw, 128px) - 72px);
  min-height: calc(100svh - var(--balk) - clamp(26px, 3.6vw, 58px) - clamp(72px, 8.6vw, 128px) - 72px);
}
.th-kop{
  font-size: clamp(2.2rem, 4.6vw, 4.3rem);
  max-width: 12ch;
}
.th-alinea{
  margin-top: clamp(22px, 2.6vw, 38px);
  max-width: 40ch;
}
.th{ justify-self: center; width: 100%; display: grid; justify-items: center; }

/* ---- Het toestel ---- */
.th-tel{
  width: 100%;
  max-width: min(300px, 33vh);
  aspect-ratio: 9 / 18.5;
  border: 2px solid var(--ink);
  border-radius: clamp(26px, 3vw, 40px);
  /* geen rand tussen lijn en scherm: de animatie vult het hele toestel (Benjamin, 15-09-2026) */
  padding: 0;
  background: var(--white);
  overflow: hidden;
  container-type: inline-size;
  box-shadow: 0 40px 70px -30px rgba(245,179,1,.62), 0 14px 34px -20px rgba(17,17,17,.25);
}
.th-scherm{
  position: relative;
  height: 100%;
  border-radius: clamp(24px, calc(3vw - 2px), 38px);
  background: var(--white);
  overflow: hidden;
  color: var(--ink);
}
.th-notch{
  position: absolute;
  top: 3.4cqw; left: 50%;
  z-index: 5;
  width: 26cqw; height: 4.2cqw;
  border-radius: 999px;
  background: var(--ink);
  transform: translateX(-50%);
}
/* De voortgangsbalk onder de notch: één lange dunne balk zonder omlijning die in 31s
   amber volloopt, gelijk met de taferelen (beginpunt: tafereel 1). De vulling schaalt vanaf links (alleen
   transform); de afgeronde uiteinden komen van de baan eromheen, zodat ze niet
   meevervormen. De inhoud van tafereel 2, 3 en 6 staat een paar cqw lager dan
   voor de balk er was. */
.th-voortgang{
  position: absolute; left: 7cqw; right: 7cqw; top: 10.8cqw;
  z-index: 6;
  height: 1.1cqw;
  border-radius: 999px;
  background: rgba(17,17,17,.14);
  overflow: hidden;
  pointer-events: none;
}
.th-voortgang b{
  position: absolute; inset: 0;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
/* Het gesprek (tafereel 1) is het beginpunt: daar staat de balk op leeg en begint hij
   te lopen. Aan het eind is hij vol op het moment dat het gesprek weer invloeit
   (98,39%); de vulling vervaagt dan, zodat de balk leeg is als het gesprek terug is. */
@keyframes th-voortgang{
  0%{ transform: scaleX(0); opacity: 1 }
  98.39%{ transform: scaleX(1); opacity: 1 }
  100%{ transform: scaleX(1); opacity: 0 }
}
.th-s{ position: absolute; inset: 0; overflow: hidden; opacity: 0; }
.th-s1{ opacity: 1; }
.th-fig{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; font-family: inherit; }
.th-fig text{ font-family: inherit; }
/* wolken groeien vanuit hun staartje */
.th-wolk{ opacity: 0; transform-box: fill-box; transform: scale(0); }
.th-wolk--zij{ transform-origin: 20% 100%; }
.th-wolk--hij{ transform-origin: 80% 100%; }
.th-wolk--oordeel{ transform-origin: 50% 100%; }
.th-zij{ transform-box: fill-box; transform-origin: 50% 60%; }
/* gezichten die wisselen: de tweede laag is er pas als hij aan de beurt is */
.th-g-wow, .th-g-blij{ opacity: 0; }

/* ---- 2. gezocht en gevonden ---- */
.th-s2{ padding: 16cqw 6cqw 6cqw; display: grid; align-content: start; gap: 6.4cqw; }
.th-zoek{
  display: flex; align-items: center; gap: 3cqw;
  height: 12cqw; padding: 0 4.4cqw;
  border-radius: 999px; border: 1.4px solid rgba(17,17,17,.18);
  font-size: 5cqw; font-weight: 500; color: var(--ink-72); white-space: nowrap;
}
.th-zoek svg{ width: 5.4cqw; height: 5.4cqw; flex: none; color: var(--ink); }
.th-typ{ clip-path: inset(0 100% 0 0); }
.th-sk{ display: block; border-radius: 999px; }
.th-sk-t{ height: 3.8cqw; background: rgba(17,17,17,.26); }
.th-sk-r{ height: 2.7cqw; background: rgba(17,17,17,.12); }
.th-sk-k{ height: 4cqw; background: var(--ink); }
.th-res{ display: grid; gap: 2.6cqw; }
.th-rest{ opacity: 0; }
.th-kaart{
  display: grid; gap: 2cqw; padding: 4.4cqw;
  border: 1.6px solid var(--ink); border-radius: 4.6cqw;
  opacity: 0; transform: translateY(8cqw);
}
.th-naam{ font-size: 5.6cqw; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.th-sterren{ display: flex; align-items: center; gap: 2cqw; font-size: 3.6cqw; font-weight: 800; color: var(--ink); }
.th-sterren svg{ width: 26cqw; height: auto; display: block; }
.th-url{ font-size: 3.9cqw; font-weight: 500; color: var(--ink-72); }
.th-rij{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3cqw; align-items: center; margin-top: 1.6cqw; }
.th-map{ width: 100%; height: auto; display: block; border-radius: 2.4cqw; }
.th-pin{ transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; transform: translateY(-40%); }
.th-bel{
  display: inline-flex; align-items: center; gap: 1.8cqw;
  height: 11cqw; padding: 0 4.2cqw; border-radius: 999px;
  background: var(--amber); color: var(--ink);
  font-size: 4.4cqw; font-weight: 800;
  opacity: 0; transform: scale(.6);
}
.th-bel svg{ width: 4.6cqw; height: 4.6cqw; }

/* ---- 3. uw website ----
   Een echte website, naar het voorbeeld van de conceptsite Vermeer Familie: paper
   #F3F0E7, inkt #141210, geel #FFE500 alleen als vlak of knop. De balk staat los
   van de pagina en blijft bovenaan; de pagina scrolt met --th-web-scroll (gemeten
   door layout.js: paginahoogte min schermhoogte), dus hij eindigt precies op de voet. */
.th-web{
  position: absolute; left: 0; right: 0; top: 0;
  background: #F3F0E7;
  color: #141210;
  opacity: 0;
  transform: translateY(0) scale(.96);
  transform-origin: 50% 20%;
  --th-web-scroll: 0px;
}
.th-web-balk{
  position: absolute; left: 4cqw; right: 4cqw; top: 15cqw;
  z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  height: 12cqw; padding: 0 5cqw;
  border-radius: 999px;
  background: rgba(20,18,16,.62);
  backdrop-filter: blur(6px);
  color: #F3F0E7;
  font-size: 4.2cqw; font-weight: 900; letter-spacing: -0.02em;
}
.th-web-balk i{ width: 5.5cqw; height: 1.2cqw; background: currentColor; border-radius: 999px; box-shadow: 0 2.4cqw 0 currentColor; transform: translateY(-1.2cqw); }
.th-web-hero{ position: relative; height: 168cqw; overflow: hidden; }
.th-web-hero img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 68%; }
.th-web-hero::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,17,10,.72) 0%, rgba(23,17,10,.32) 40%, rgba(23,17,10,.5) 68%, rgba(23,17,10,.86) 100%);
}
.th-web-hero-tekst{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 0 7cqw 11cqw;
  display: grid; justify-items: start; gap: 3.2cqw;
  color: #F3F0E7;
}
.th-web-hero-tekst h4{ font-size: 10.4cqw; font-weight: 900; line-height: .98; letter-spacing: -0.035em; margin: 0 0 1cqw; max-width: 9ch; text-wrap: balance; }
.th-web-knop{
  display: inline-flex; align-items: center;
  height: 10.4cqw; padding: 0 5cqw; border-radius: 999px;
  font-size: 3.7cqw; font-weight: 800; letter-spacing: -0.01em;
}
.th-web-knop--blauw{ background: #1E4F8F; color: #fff; }
.th-web-knop--licht{ background: #F3F0E7; color: #141210; }
.th-web-link{ font-size: 3.6cqw; font-weight: 700; text-decoration: underline; text-underline-offset: .3em; opacity: .9; }
.th-web-inleiding{ padding: 10cqw 7cqw 4cqw; font-size: 4.9cqw; font-weight: 600; line-height: 1.38; letter-spacing: -0.015em; }
.th-web h5{ font-size: 7.2cqw; font-weight: 900; letter-spacing: -0.03em; line-height: 1; margin: 0 0 4cqw; }
.th-web-maken{ padding: 8cqw 7cqw 2cqw; display: grid; gap: 6cqw; }
.th-web-maken figure{ margin: 0; display: grid; gap: 2.6cqw; }
.th-web-maken img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3cqw; display: block; }
.th-web-maken figcaption{ font-size: 3.7cqw; line-height: 1.4; color: #6E6555; }
.th-web-maken figcaption b{ display: block; font-size: 4.6cqw; font-weight: 800; color: #141210; letter-spacing: -0.02em; margin-bottom: .6cqw; }
/* de nepwebsite gebruikt geen geel: dat is de kleur van Webwaarts, en dit is de website
   van een klant. Haar kleur is diep blauw (#1E4F8F) op papier en inkt. */
.th-web-blok{ margin: 8cqw 4cqw 0; padding: 8cqw 6cqw; border-radius: 5cqw; background: #1E4F8F; color: #F3F0E7; display: grid; gap: 3.4cqw; justify-items: start; }
.th-web-blok p{ font-size: 3.9cqw; line-height: 1.45; font-weight: 500; }
.th-web-blok img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3cqw; display: block; margin: 1cqw 0; }
.th-web-recensie{ margin: 8cqw 7cqw 0; display: grid; gap: 3cqw; }
.th-web-recensie svg{ width: 30cqw; height: auto; display: block; --ster: #1E4F8F; }
.th-web-recensie p{ font-size: 5cqw; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; font-style: italic; }
.th-web-recensie span{ font-size: 3.5cqw; font-weight: 600; color: #6E6555; }
.th-web-voet{ margin-top: 10cqw; padding: 10cqw 7cqw 14cqw; background: #1E4F8F; color: rgba(255,255,255,.78); display: grid; gap: 1.6cqw; font-size: 3.5cqw; }
.th-web-voet b{ color: #F3F0E7; font-size: 5.2cqw; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 2cqw; }

/* ---- 4b. zij belt (in hetzelfde tafereel) ---- */
.th-belt-arm{ opacity: 0; }
.th-tel-klein{ opacity: 1; }
.th-wolk--belt{ transform-origin: 46% 100%; }

/* ---- 5. uw telefoon gaat ---- */
.th-oproep{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #F3F1EB, #E4E2DC);
  display: grid; align-content: start; justify-items: center;
  padding-top: 20cqw; gap: 3cqw; text-align: center;
}
.th-oproep-label{ font-size: 3.6cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-72); }
.th-oproep-avatar{
  width: 34cqw; height: 34cqw; border-radius: 50%;
  background: var(--white); border: 2px solid var(--ink);
  display: grid; place-items: center; overflow: hidden; margin-top: 3cqw;
}
.th-oproep-avatar svg{ width: 100%; height: 100%; display: block; }
.th-oproep-naam{ font-size: 6.6cqw; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.th-oproep-knoppen{ position: absolute; left: 0; right: 0; bottom: 14cqw; display: flex; justify-content: center; gap: 20cqw; }
.th-oproep-knop{ position: relative; width: 16cqw; height: 16cqw; border-radius: 50%; display: grid; place-items: center; border: 1.6px solid var(--ink); }
.th-oproep-knop svg{ width: 7.5cqw; height: 7.5cqw; }
.th-oproep-knop--weg{ background: rgba(17,17,17,.12); color: var(--ink); }
.th-oproep-knop--weg svg{ transform: rotate(135deg); }
.th-oproep-knop--aan{ background: var(--amber); color: var(--ink); }
.th-ring{ position: absolute; inset: -1.6px; border-radius: 50%; border: 2px solid var(--amber); opacity: 0; }
.th.is-aan .th-ring{ animation: th-ring 1.3s ease-out infinite; }
@keyframes th-ring{ 0%{ transform: scale(1); opacity: .9 } 100%{ transform: scale(1.9); opacity: 0 } }
.th-opnemen{ position: absolute; inset: 0; background: var(--white); opacity: 0; }
.th-belgolf{ opacity: 0; }

/* ---- 6. uw agenda ---- */
.th-agenda{ position: absolute; inset: 0; background: var(--white); padding: 17cqw 6cqw 0; }
.th-agenda-kop{ font-size: 6cqw; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.th-agenda-dagen{ display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 4cqw; font-size: 3.2cqw; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-72); text-align: center; }
.th-agenda-raster{
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(8, 15cqw);
  gap: 0 1.6cqw; margin-top: 2cqw;
  background-image: repeating-linear-gradient(180deg, rgba(17,17,17,.1) 0 1px, transparent 1px 15cqw);
}
.th-blok{
  display: grid; place-items: center;
  margin: .8cqw 0;
  border-radius: 2.4cqw;
  background: var(--amber);
  border: 1.6px solid var(--ink);
  opacity: 0; transform: translateY(-30%);
}
.th-blok svg{ width: 70%; height: auto; }
.th-agenda-duim{ position: absolute; right: 7cqw; bottom: 8cqw; width: 22cqw; height: 22cqw; opacity: 0; transform: scale(.4) rotate(-15deg); }

/* ---- 7. bedankt, Webwaarts ---- */
.th-dank{ position: absolute; inset: 0; background: var(--white); }
.th-dank-wolk{
  position: absolute; left: 7cqw; right: 7cqw; top: 19cqw;
  padding: 7cqw 4cqw 7cqw; border-radius: 7cqw;
  background: #fff; border: 1.6px solid var(--ink);
  text-align: center; color: var(--ink); line-height: 1.1;
  opacity: 0; transform: scale(0); transform-origin: 50% 100%;
}
/* het staartje: een gedraaid vierkant met alleen de rechter- en onderrand, dat
   met zijn witte vulling de onderrand van de wolk erachter wegpoetst */
.th-dank-wolk::after{
  content: ""; position: absolute; left: 50%; bottom: -4.4cqw;
  width: 7cqw; height: 7cqw; margin-left: -3.5cqw;
  background: #fff; border: 1.6px solid var(--ink); border-top: 0; border-left: 0;
  transform: rotate(45deg);
}
.th-dank-wolk small{ display: block; font-size: 6.6cqw; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 1.4cqw; }
.th-dank-merk{ display: block; font-size: 12.4cqw; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.th-dank-merk i{ font-style: normal; color: var(--amber); }
.th-zwaai{ transform-box: fill-box; transform-origin: 0% 100%; }

/* ---- De klok: alle animaties van 31s ---- */
.th.is-aan .th-s1{ animation: th-s1 31s linear infinite; }
.th.is-aan .th-s2{ animation: th-s2 31s linear infinite; }
.th.is-aan .th-s3{ animation: th-s3 31s linear infinite; }
.th.is-aan .th-s4{ animation: th-s4 31s linear infinite; }
.th.is-aan .th-s5{ animation: th-s5 31s linear infinite; }
.th.is-aan .th-s6{ animation: th-s6 31s linear infinite; }
.th.is-aan .th-s7{ animation: th-s7 31s linear infinite; }
.th.is-aan .th-wolk--zij{ animation: th-wolk-zij 31s infinite; }
.th.is-aan .th-wolk--hij{ animation: th-wolk-hij 31s infinite; }
.th.is-aan .th-zij{ animation: th-knik 31s ease-in-out infinite; }
.th.is-aan .th-typ{ animation: th-typ 31s infinite; }
.th.is-aan .th-kaart{ animation: th-kaart 31s infinite; }
.th.is-aan .th-pin{ animation: th-pin 31s infinite; }
.th.is-aan .th-bel{ animation: th-bel 31s infinite; }
.th.is-aan .th-rest{ animation: th-rest 31s linear infinite; }
.th.is-aan .th-web{ animation: th-web 31s infinite; }
.th.is-aan .th-s4 .th-g-rustig{ animation: th-gezicht-uit 31s linear infinite; }
.th.is-aan .th-s4 .th-g-wow{ animation: th-gezicht-wow 31s linear infinite; }
.th.is-aan .th-s4 .th-g-blij{ animation: th-gezicht-blij4 31s linear infinite; }
.th.is-aan .th-wolk--oordeel{ animation: th-wolk-oordeel 31s infinite; }
.th.is-aan .th-tel-klein{ animation: th-tel-klein 31s linear infinite; }
.th.is-aan .th-belt-arm{ animation: th-belt-arm 31s linear infinite; }
.th.is-aan .th-wolk--belt{ animation: th-wolk-belt 31s infinite; }
.th.is-aan .th-belgolf--zij{ animation: th-belgolf-zij 31s linear infinite; }
.th.is-aan .th-oproep{ animation: th-oproep 31s linear infinite; }
.th.is-aan .th-opnemen{ animation: th-opnemen 31s linear infinite; }
.th.is-aan .th-s5 .th-g-rustig{ animation: th-lach-uit 31s linear infinite; }
.th.is-aan .th-s5 .th-g-blij{ animation: th-lach-aan 31s linear infinite; }
.th.is-aan .th-opnemen .th-belgolf{ animation: th-belgolf 31s linear infinite; }
.th.is-aan .th-blok--1{ animation: th-blok-1 31s infinite; }
.th.is-aan .th-blok--2{ animation: th-blok-2 31s infinite; }
.th.is-aan .th-blok--3{ animation: th-blok-3 31s infinite; }
.th.is-aan .th-blok--4{ animation: th-blok-4 31s infinite; }
.th.is-aan .th-blok--5{ animation: th-blok-5 31s infinite; }
.th.is-aan .th-blok--6{ animation: th-blok-6 31s infinite; }
.th.is-aan .th-blok--7{ animation: th-blok-7 31s infinite; }
.th.is-aan .th-agenda-duim{ animation: th-duim 31s infinite; }
.th.is-aan .th-dank-wolk{ animation: th-dank-wolk 31s infinite; }
.th.is-aan .th-zwaai{ animation: th-zwaai 31s ease-in-out infinite; }
.th.is-aan .th-voortgang b{ animation: th-voortgang 31s linear infinite; }
.th.is-pauze .th-scherm *{ animation-play-state: paused; }

@keyframes th-s1{ 0%{opacity:1} 12.9%{opacity:1} 14.52%{opacity:0} 98.39%{opacity:0} 100%{opacity:1} }
@keyframes th-s2{ 0%{opacity:0} 12.92%{opacity:0} 14.51%{opacity:1} 25.83%{opacity:1} 27.43%{opacity:0} 100%{opacity:0} }
@keyframes th-s3{ 0%{opacity:0} 25.83%{opacity:0} 27.43%{opacity:1} 45.12%{opacity:1} 46.8%{opacity:0} 100%{opacity:0} }
@keyframes th-s4{ 0%{opacity:0} 45.12%{opacity:0} 46.8%{opacity:1} 67.77%{opacity:1} 69.36%{opacity:0} 100%{opacity:0} }
@keyframes th-s5{ 0%{opacity:0} 67.77%{opacity:0} 69.36%{opacity:1} 77.41%{opacity:1} 79.01%{opacity:0} 100%{opacity:0} }
@keyframes th-s6{ 0%{opacity:0} 77.42%{opacity:0} 79.03%{opacity:1} 83.87%{opacity:1} 85.48%{opacity:0} 100%{opacity:0} }
@keyframes th-s7{ 0%{opacity:0} 83.87%{opacity:0} 85.48%{opacity:1} 98.39%{opacity:1} 100%{opacity:0} }

/* 1. haar wolk 0,5 tot 2,1s, zijn wolk 2,3s tot het eind, zij knikt 3 tot 3,6s */
@keyframes th-wolk-zij{
  0%{opacity:0; transform:scale(0)} 1.59%{opacity:0; transform:scale(0)}
  2.94%{opacity:1; transform:scale(1); animation-timing-function:cubic-bezier(.2,1.4,.4,1)}
  6.12%{opacity:1; transform:scale(1)} 6.79%{opacity:0; transform:scale(.85)} 100%{opacity:0; transform:scale(.85)}
}
@keyframes th-wolk-hij{
  0%{opacity:0; transform:scale(0)} 7.38%{opacity:0; transform:scale(0)}
  8.72%{opacity:1; transform:scale(1); animation-timing-function:cubic-bezier(.2,1.4,.4,1)}
  12.92%{opacity:1; transform:scale(1)} 13.84%{opacity:0; transform:scale(.85)} 100%{opacity:0; transform:scale(.85)}
}
@keyframes th-knik{
  0%{transform:rotate(0)} 9.64%{transform:rotate(0)} 10.15%{transform:rotate(3deg)} 10.66%{transform:rotate(0)}
  11.15%{transform:rotate(3deg)} 11.57%{transform:rotate(0)} 100%{transform:rotate(0)}
}
/* 2. typen 4,3 tot 5,3s; kaart 5,5 tot 6; speld 6,1 tot 6,5; knop 6,6 tot 7; rest 7,1 tot 7,5 */
@keyframes th-typ{
  0%{clip-path:inset(0 100% 0 0)} 13.84%{clip-path:inset(0 100% 0 0); animation-timing-function:steps(20,end)}
  17.11%{clip-path:inset(0 0 0 0)} 100%{clip-path:inset(0 0 0 0)}
}
@keyframes th-kaart{
  0%{opacity:0; transform:translateY(8cqw)} 17.78%{opacity:0; transform:translateY(8cqw); animation-timing-function:cubic-bezier(.16,1,.3,1)}
  19.37%{opacity:1; transform:none} 100%{opacity:1; transform:none}
}
@keyframes th-pin{
  0%{opacity:0; transform:translateY(-40%)} 19.71%{opacity:0; transform:translateY(-40%); animation-timing-function:cubic-bezier(.2,1.5,.4,1)}
  20.96%{opacity:1; transform:none} 100%{opacity:1; transform:none}
}
@keyframes th-bel{
  0%{opacity:0; transform:scale(.6)} 21.3%{opacity:0; transform:scale(.6); animation-timing-function:cubic-bezier(.2,1.5,.4,1)}
  22.56%{opacity:1; transform:none} 100%{opacity:1; transform:none}
}
@keyframes th-rest{ 0%{opacity:0} 22.9%{opacity:0} 24.15%{opacity:.7} 100%{opacity:.7} }
/* 3. de website opent (8 tot 8,5s) en scrolt dan tot de voet (8,9 tot 13,6s) */
@keyframes th-web{
  0%{opacity:0; transform:translateY(0) scale(.96)} 25.83%{opacity:0; transform:translateY(0) scale(.96); animation-timing-function:cubic-bezier(.16,1,.3,1)}
  27.43%{opacity:1; transform:translateY(0) scale(1)} 28.68%{opacity:1; transform:translateY(0) scale(1); animation-timing-function:ease-in-out}
  43.86%{opacity:1; transform:translateY(calc(-1 * var(--th-web-scroll))) scale(1)} 100%{opacity:1; transform:translateY(calc(-1 * var(--th-web-scroll))) scale(1)}
}
/* 4. van kijken naar onder de indruk (15,2 tot 15,7s), de wolk met sterren (15,8 tot 18s);
   dan belt zij: de wolk gaat weg, de telefoon tussen hen verdwijnt en komt aan haar oor
   (18,3 tot 18,6s), allebei lachen, de belwolk (18,9 tot 19,3s), de belgolven kloppen */
@keyframes th-gezicht-uit{ 0%{opacity:1} 49.07%{opacity:1} 50.66%{opacity:0} 69.36%{opacity:0} 69.61%{opacity:1} 100%{opacity:1} }
@keyframes th-gezicht-wow{ 0%{opacity:0} 49.07%{opacity:0} 50.66%{opacity:1} 59.05%{opacity:1} 59.96%{opacity:0} 100%{opacity:0} }
@keyframes th-gezicht-blij4{ 0%{opacity:0} 59.05%{opacity:0} 59.96%{opacity:1} 69.36%{opacity:1} 69.61%{opacity:0} 100%{opacity:0} }
@keyframes th-wolk-oordeel{
  0%{opacity:0; transform:scale(0)} 50.99%{opacity:0; transform:scale(0)}
  52.26%{opacity:1; transform:scale(1); animation-timing-function:cubic-bezier(.2,1.4,.4,1)}
  58.04%{opacity:1; transform:scale(1)} 59.05%{opacity:0; transform:scale(.85)} 100%{opacity:0; transform:scale(0)}
}
@keyframes th-tel-klein{ 0%{opacity:1} 59.05%{opacity:1} 59.96%{opacity:0} 69.36%{opacity:0} 69.61%{opacity:1} 100%{opacity:1} }
@keyframes th-belt-arm{ 0%{opacity:0} 59.05%{opacity:0} 59.96%{opacity:1} 69.36%{opacity:1} 69.61%{opacity:0} 100%{opacity:0} }
@keyframes th-wolk-belt{
  0%{opacity:0; transform:scale(0)} 60.97%{opacity:0; transform:scale(0)}
  62.23%{opacity:1; transform:scale(1); animation-timing-function:cubic-bezier(.2,1.4,.4,1)}
  67.77%{opacity:1; transform:scale(1)} 69.36%{opacity:0; transform:scale(1)} 100%{opacity:0; transform:scale(0)}
}
@keyframes th-belgolf-zij{ 0%{opacity:0} 62.23%{opacity:0} 63.24%{opacity:1} 64.49%{opacity:.25} 65.84%{opacity:1} 67.09%{opacity:.25} 68.36%{opacity:1} 69.36%{opacity:0} 100%{opacity:0} }
/* 5. de oproep (21 tot 22,6s), dan neemt hij op (22,6 tot 23) en gaat lachen (23 tot 23,5) */
@keyframes th-oproep{ 0%{opacity:1} 72.88%{opacity:1} 74.22%{opacity:0} 79.01%{opacity:0} 79.25%{opacity:1} 100%{opacity:1} }
@keyframes th-opnemen{ 0%{opacity:0} 72.88%{opacity:0} 74.22%{opacity:1} 79.01%{opacity:1} 79.25%{opacity:0} 100%{opacity:0} }
@keyframes th-lach-uit{ 0%{opacity:1} 74.22%{opacity:1} 75.82%{opacity:0} 79.01%{opacity:0} 79.25%{opacity:1} 100%{opacity:1} }
@keyframes th-lach-aan{ 0%{opacity:0} 74.22%{opacity:0} 75.82%{opacity:1} 79.01%{opacity:1} 79.25%{opacity:0} 100%{opacity:0} }
@keyframes th-belgolf{ 0%{opacity:0} 74.22%{opacity:0} 74.98%{opacity:1} 75.82%{opacity:.25} 76.58%{opacity:1} 77.41%{opacity:.25} 79.01%{opacity:0} 100%{opacity:0} }
/* 6. de blokken landen om de 0,2s vanaf 24,2s (zeven stuks), de duim op 25,5s */
@keyframes th-blok-1{ 0%{opacity:0; transform:translateY(-30%)} 78.08%{opacity:0; transform:translateY(-30%); animation-timing-function:cubic-bezier(.2,1.4,.4,1)} 79.25%{opacity:1; transform:none} 100%{opacity:1; transform:none} }
@keyframes th-blok-2{ 0%{opacity:0; transform:translateY(-30%)} 78.76%{opacity:0; transform:translateY(-30%); animation-timing-function:cubic-bezier(.2,1.4,.4,1)} 79.93%{opacity:1; transform:none} 100%{opacity:1; transform:none} }
@keyframes th-blok-3{ 0%{opacity:0; transform:translateY(-30%)} 79.34%{opacity:0; transform:translateY(-30%); animation-timing-function:cubic-bezier(.2,1.4,.4,1)} 80.52%{opacity:1; transform:none} 100%{opacity:1; transform:none} }
@keyframes th-blok-4{ 0%{opacity:0; transform:translateY(-30%)} 80.01%{opacity:0; transform:translateY(-30%); animation-timing-function:cubic-bezier(.2,1.4,.4,1)} 81.19%{opacity:1; transform:none} 100%{opacity:1; transform:none} }
@keyframes th-blok-5{ 0%{opacity:0; transform:translateY(-30%)} 80.69%{opacity:0; transform:translateY(-30%); animation-timing-function:cubic-bezier(.2,1.4,.4,1)} 81.85%{opacity:1; transform:none} 100%{opacity:1; transform:none} }
@keyframes th-blok-6{ 0%{opacity:0; transform:translateY(-30%)} 81.27%{opacity:0; transform:translateY(-30%); animation-timing-function:cubic-bezier(.2,1.4,.4,1)} 82.44%{opacity:1; transform:none} 100%{opacity:1; transform:none} }
@keyframes th-blok-7{ 0%{opacity:0; transform:translateY(-30%)} 81.94%{opacity:0; transform:translateY(-30%); animation-timing-function:cubic-bezier(.2,1.4,.4,1)} 83.12%{opacity:1; transform:none} 100%{opacity:1; transform:none} }
@keyframes th-duim{ 0%{opacity:0; transform:scale(.4) rotate(-15deg)} 82.19%{opacity:0; transform:scale(.4) rotate(-15deg); animation-timing-function:cubic-bezier(.2,1.5,.4,1)} 83.2%{opacity:1; transform:none} 100%{opacity:1; transform:none} }
/* 7. de wolk springt op 26,9 tot 27,3s, de hand zwaait van 27,2 tot 28,7s en nog eens van 29,4 tot 30,6s */
@keyframes th-dank-wolk{
  0%{opacity:0; transform:scale(0)} 86.77%{opacity:0; transform:scale(0); animation-timing-function:cubic-bezier(.2,1.4,.4,1)}
  88.06%{opacity:1; transform:scale(1)} 100%{opacity:1; transform:scale(1)}
}
@keyframes th-zwaai{
  0%{transform:rotate(0)} 87.74%{transform:rotate(0)} 88.71%{transform:rotate(16deg)} 89.68%{transform:rotate(-10deg)}
  90.65%{transform:rotate(16deg)} 91.61%{transform:rotate(-10deg)} 92.58%{transform:rotate(0)}
  94.84%{transform:rotate(0)} 95.81%{transform:rotate(14deg)} 96.77%{transform:rotate(-8deg)} 97.74%{transform:rotate(12deg)} 98.71%{transform:rotate(0)} 100%{transform:rotate(0)}
}

/* Bewegingsvoorkeur uit (layout.js zet .is-stil): tafereel 3 stil in beeld. */
.th.is-stil .th-s1{ opacity: 0; }
.th.is-stil .th-s3{ opacity: 1; }
.th.is-stil .th-web{ opacity: 1; transform: none; }
.th.is-stil .th-voortgang{ display: none; }

@media (max-height: 800px) and (min-width: 901px){
  .th-tel{ max-width: min(230px, 30vh); }
  .th-kop{ font-size: clamp(1.9rem, 3.4vw, 3rem); }
}
@media (max-width: 900px){
  .th-wrap{ grid-template-columns: 1fr; min-height: 0; gap: clamp(32px, 6vw, 52px); }
  .th-kop{ font-size: clamp(2rem, 8vw, 3rem); max-width: 14ch; }
  .th-tel{ max-width: 250px; border-width: 1.6px; }
}

/* =================================================================
   HOE WIJ HET DOEN: DE CARROUSEL (werk.html, 15-09-2026, versie 2)

   Op het vel van het theatertje (#theater, papier met gloed), als tweede blok:
   links een ring van vijf dikke kaarten met alleen een teken, rechts de kop en
   de uitleg van de kaart die vooraan staat (.uitleg). Benjamin: "links de
   carrousel met alleen een icoon dus dan kan je all out design gaan [...]
   rechts kop en uitlegtekst per kaart die veranderd met welke kaart zichtbaar
   is. Deze transition van tekst moet ultra smooth gaan."

   DE KAART IS DIK. Achter de voorkant staan vier lagen (.kaart-laag) in inkt,
   twee pixels uit elkaar, tot acht pixels diep: draait de kaart, dan zie je een
   zwarte rand van acht pixels, alsof de kaart uit karton gesneden is. De lagen
   zijn brede vlakken, dus de rand oogt dicht; alleen op de hoeken zie je bij
   goed kijken trapjes van twee pixels. De rug staat acht pixels naar achteren
   (rotateY(180deg) translateZ(8px)). Het waren er twaalf, toen acht, nu vier
   (Benjamin, 15-09-2026: "hij loopt te traag en is erg buggy, maak het smooth";
   16-09-2026: "maak hem soepel hij lagt heel erg").

   SOEPEL (16-09-2026). Drie dingen maakten het traag:
   1. border-radius op een laag die in 3D gedraaid is: Chrome kan die ronde hoek
      dan niet als snelle maskerfilter tekenen en geeft elke laag een eigen
      offscreen-pass (render surface). Bij zestig lagen is dat zestig extra
      passes per frame. Daarom staat er nergens meer border-radius op een 3D-
      laag: de ronde vorm is GESCHILDERD, als SVG-achtergrondafbeelding
      (data-URI met een rect rx=22). De laag zelf is een rechthoek met
      doorzichtige hoeken. De kleuren in die URI's zijn dus hardgecodeerd
      (--ink #111111, --paper #ECECEA, --paper-hi #F3F1EB); verandert een token,
      pas hem hier ook aan. Let op: in een data-URI is % een escape-teken, dus
      100% staat er als 100%25 en # als %23.
   2. box-shadow met 50 tot 70px blur op de zijden, terwijl die zijde elk frame
      opnieuw geschilderd werd (zie 3). Weg (Benjamin, 16-09-2026: "er is geen
      schaduw nodig"), net als de vloer-schaduw onder de ring.
   3. de sluier zat IN de zijde en veranderde elk frame van opacity via
      --diepte; een opacity-wissel op een kind dat niet zelf een laag is, laat
      Chrome de hele oudertextuur opnieuw schilderen. De sluier is nu een eigen
      vlak in de 3D-ruimte van de kaart (een pixel voor de zijde, zonder
      kinderen), dus de opacity gaat rechtstreeks naar de compositor.
   4. (18-09-2026) --hoek en --diepte werden elk frame als CUSTOM property gezet.
      Custom properties erven, dus zo'n schrijfactie op .carrousel-ring verklaart de
      stijl van de hele subboom ongeldig: 84 elementen die elk frame opnieuw hun
      stijl moeten laten berekenen, ook al gebruikt alleen de ring zelf --hoek.
      Gemeten in Chrome op deze pagina: 2,4ms per frame alleen voor dat schrijven,
      tegen 0,10ms als je dezelfde waarden rechtstreeks zet. Dat was de hapering die
      na 1 t/m 3 overbleef. layout.js zet nu de transform inline op de ring en de
      opacity inline op de twee sluiers; geen van beide erft, dus alleen dat ene
      element herberekent.
   De ring staat een straal naar achteren (translateZ(-r)), licht van boven
   gezien (rotateX -6deg). De transform van de ring en de opacity van de sluiers
   schrijft layout.js inline (zie 4 hierboven); de regels hieronder zijn de
   beginwaarden voor het eerste frame. .is-voor op de voorste kaart.

   GEEN OPACITY OP IETS DAT IN 3D GESORTEERD WORDT (gemeten 15-09-2026): een
   zijde met opacity onder 1 tekent Chrome als losse groep in DOM-volgorde, niet
   op diepte. De vervaging naar de zijkant is een sluier (.kaart-sluier) bovenop
   de zijde; de entree een schaal op de wikkel. De zijden zijn plat.
   ================================================================= */
.carrousel-blok{ margin-top: clamp(96px, 10vw, 160px); }
.carrousel-rij{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: center;
  /* geen marge onder de kop: de kop staat dicht op de ring (Benjamin, 16-09-2026:
     "hoe wij het doen moet dichter op carrousel") */
  margin-top: 0;
}
/* De kooi loopt links door tot de rand van het scherm: de negatieve marge is de
   ruimte naast de .wrap plus de goot, zodat de ring in een breder vak staat en
   naar links verschuift. De zijkaarten vallen dan niet meer buiten het vak
   (Benjamin, 15-09-2026: "de kooi moet nog breder, draaiende kaarten worden
   afgesneden"); de rechter zijkaart blijft links van de tekstkolom. Het vel
   #theater knipt op de schermrand (overflow-x: clip), dus er komt geen
   horizontale scroll. */
.carrousel-vel{
  min-width: 0;
  overflow: visible;
  margin-left: calc(-1 * (100vw - min(100vw, var(--wrap))) / 2);
}
#theater{ overflow-x: clip; }
/* Een zijwaartse veeg over de carrousel draait de ring; zonder dit leest Chrome
   hem als het terug-gebaar. Staat hier in CSS zodat de wheel-luisteraar in
   layout.js passief kan blijven en de verticale scroll nooit op script wacht. */
html:has(.carrousel){ overscroll-behavior-x: none; }

.carrousel{
  --kaart-b: 430px;
  --kaart-h: 336px;
  --r: 390px;   /* koorde 1,176 x 390 = 459 > 430, dus geen overlap */
  --dikte: 8px;
  position: relative;
  /* de kaart plus 70px: 35px lucht boven en onder de voorste kaart (met haar pop van
     1.06). Het was 200px, ruimte voor de vloer-schaduw die er niet meer is; met de
     kaarten in het midden van het vak stond de kop daardoor 100px te hoog
     (Benjamin, 16-09-2026: "hoe wij het doen moet dichter op carrousel"). */
  height: calc(var(--kaart-h) * 1.08 + 70px);
  perspective: 1200px;
  perspective-origin: 50% 42%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.carrousel.is-sleep{ cursor: grabbing; }
/* toetsenbordfocus: de haarlijn op de voorste kaart wordt dik (een outline zou vierkant zijn, want de laag zelf heeft geen border-radius meer) */
.carrousel:focus-visible .is-voor .kaart-voor::before{ border: 3px solid var(--ink); }
.carrousel-ring{
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(-1 * var(--r))) rotateX(-6deg) rotateY(var(--hoek, 0deg));
  will-change: transform;
}
.carrousel-kaart{
  position: absolute;
  left: 50%; top: 50%;
  width: var(--kaart-b);
  height: var(--kaart-h);
  margin: calc(var(--kaart-h) / -2) 0 0 calc(var(--kaart-b) / -2);
  transform: rotateY(calc(var(--i, 0) * 72deg)) translateZ(var(--r)) scale(var(--es, 1));
  transform-style: preserve-3d;
  transition: transform .8s var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 90ms);
}
/* de entree: de kaarten groeien op hun plek op de ring, gestaffeld */
.carrousel:not(.is-entree) .carrousel-kaart{ --es: .001; }

/* De kaart draagt de pop (naar voren en iets groter). Het meekantelen met de
   muis is eruit: het dwong bij elke muisbeweging een layout-meting af bovenop
   de animatielus en gaf schokjes. */
.kaart{
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(0) scale(1);
  transition: transform .45s var(--ease);
}
.is-voor .kaart{
  transform: translateZ(30px) scale(1.06);
  transition: transform .6s cubic-bezier(.3,1.35,.6,1);
}

/* ---- De dikte ---- */
.kaart-laag{
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'><rect width='100%25' height='100%25' rx='22' fill='%23111111'/></svg>") center / 100% 100% no-repeat;
  transform: translateZ(calc(-1px * var(--d, 1)));
  backface-visibility: visible;
}
/* de achterste laag iets lichter, als de gesneden rand die het licht vangt */
.kaart-laag[style*="--d:8"]{ background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'><rect width='100%25' height='100%25' rx='22' fill='%232a2a28'/></svg>"); }

/* ---- De twee zijden ---- */
/* Twee achtergrondlagen per zijde: onderop een inktvlak met rx=22 (de rand
   van 2px), daarbovenop het papier met rx=20, vier pixels kleiner en
   gecentreerd. Geen border en geen border-radius op het element (zie boven). */
.kaart-voor, .kaart-rug{
  position: absolute; inset: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: calc(100% - 4px) calc(100% - 4px), 100% 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: flat;
}
.kaart-voor{
  display: grid;
  place-items: center;
  overflow: visible;
  /* het materiaal: papier met een lichtval van boven (in de SVG gebakken) */
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23ffffff' stop-opacity='.55'/><stop offset='.44' stop-color='%23ffffff' stop-opacity='0'/><stop offset='1' stop-color='%23111111' stop-opacity='.035'/></linearGradient></defs><rect width='100%25' height='100%25' rx='20' fill='%23F3F1EB'/><rect width='100%25' height='100%25' rx='20' fill='url(%23g)'/></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'><rect width='100%25' height='100%25' rx='22' fill='%23111111'/></svg>");
}
/* de haarlijn 9px binnen de rand (van 2px): het kaartje in een kaartje. Dit is
   geen eigen laag, dus hier mag border-radius gewoon. */
.kaart-voor::before{
  content: "";
  position: absolute; inset: 11px;
  border-radius: 14px;
  border: 1px solid var(--ink-14);
  pointer-events: none;
}
/* het teken: een gesneden vorm, plat op de kaart. Geen drop-shadow-filters meer: drie gestapelde filters op een
   element dat elk frame in 3D meedraait waren de zwaarste post van het blok. */
.kaart-teken{
  --accent: var(--amber);
  display: block;
  width: 52%;
  aspect-ratio: 1;
  color: var(--ink);
  transition: transform .55s cubic-bezier(.3,1.35,.6,1);
}
.kaart-teken svg{ display: block; width: 100%; height: 100%; overflow: visible; }
.is-voor .kaart-teken{ transform: scale(1.06); }

/* ---- De tekens leven even als de kaart naar voren komt ----
   Benjamin (15-09-2026): "Kan je elke kaart een kleine animatie geven. Bijv een
   kompas die bijstelt of een potlood die tekend. dit kan heel lowkey maar geeft
   toch extra touch als de kaart naar voren komt." Elke animatie start met
   .is-voor, speelt een keer (of drie keer, het typen) en eindigt in de
   ruststand; draait de kaart weg, dan staat alles weer stil. Alleen transform
   en opacity, met transform-box fill-box zodat het om het eigen midden draait.
   Een CSS-transform overschrijft het transform-attribuut van een SVG-groep,
   daarom zit het potlood in een groep binnen de gedraaide groep. */
.kaart-teken .ster, .kaart-teken .naald, .kaart-teken .wijzer, .kaart-teken .potlood, .kaart-teken .stip{ transform-box: fill-box; }
.kaart-teken .ster{ transform-origin: center; }
.is-voor .kaart-teken .ster--groot{ animation: tekenSter 1.6s var(--ease-soft) .2s 2 both; }
.is-voor .kaart-teken .ster--amber{ animation: tekenSter 1.3s var(--ease-soft) .55s 2 both; }
.is-voor .kaart-teken .ster--klein{ animation: tekenSter 1.2s var(--ease-soft) .85s 2 both; }
@keyframes tekenSter{ 0%,100%{ transform: scale(1) rotate(0deg); opacity: 1 } 35%{ transform: scale(1.3) rotate(14deg); opacity: .7 } 65%{ transform: scale(.9) rotate(-8deg); opacity: 1 } }
/* het potlood trekt een streek langs de schuine zijde: in zijn eigen, gedraaide
   frame is dat de x-as */
.is-voor .kaart-teken .potlood{ animation: tekenPotlood 2.4s cubic-bezier(.45,0,.2,1) .25s 1 both; }
@keyframes tekenPotlood{ 0%{ transform: translate(0, 0) } 18%{ transform: translate(-26px, 0) } 45%{ transform: translate(18px, 0) } 62%{ transform: translate(-14px, 0) } 85%{ transform: translate(10px, 0) } 100%{ transform: translate(0, 0) } }
/* het kompas stelt bij en komt tot rust */
.kaart-teken .naald{ transform-origin: center; }
.is-voor .kaart-teken .naald{ animation: tekenNaald 2.4s cubic-bezier(.34,1.56,.64,1) .2s 1 both; }
@keyframes tekenNaald{ 0%{ transform: rotate(-70deg) } 38%{ transform: rotate(34deg) } 62%{ transform: rotate(-16deg) } 82%{ transform: rotate(6deg) } 100%{ transform: rotate(0deg) } }
/* de wijzer maakt een rondje, de vaartstrepen lichten op */
.kaart-teken .wijzer{ transform-origin: 50% 100%; }
.is-voor .kaart-teken .wijzer{ animation: tekenWijzer 2.2s cubic-bezier(.4,0,.2,1) .25s 1 both; }
@keyframes tekenWijzer{ from{ transform: rotate(0deg) } to{ transform: rotate(720deg) } }
.is-voor .kaart-teken .vaart{ animation: tekenVaart .45s ease-in-out .25s 5 both; }
@keyframes tekenVaart{ 0%,100%{ opacity: .4; transform: translateX(0) } 50%{ opacity: 1; transform: translateX(-4px) } }
/* de drie stippen typen, drie keer */
.kaart-teken .stip{ transform-origin: center; }
.is-voor .kaart-teken .stip{ animation: tekenStip .8s ease-in-out .25s 5 both; }
.is-voor .kaart-teken .stip--2{ animation-delay: .4s; }
.is-voor .kaart-teken .stip--3{ animation-delay: .55s; }
@keyframes tekenStip{ 0%,100%{ transform: translateY(0) scale(1) } 30%{ transform: translateY(-8px) scale(1.18) } 60%{ transform: translateY(0) scale(1) } }

/* de sluier: papierkleur over de zijde, dichter naarmate de kaart wegdraait.
   Een eigen vlak, een pixel voor de zijde, zonder kinderen: dan is de opacity
   een compositor-eigenschap en hoeft er niets opnieuw geschilderd te worden.
   backface-visibility: hidden, zodat de voorsluier verdwijnt als de rug naar
   voren staat en andersom. */
.kaart-sluier{
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'><rect width='100%25' height='100%25' rx='22' fill='%23ECECEA'/></svg>") center / 100% 100% no-repeat;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* beginwaarde voor het eerste frame; daarna schrijft layout.js de opacity inline
     met dezelfde formule (zie punt 4 in de kop van dit blok) */
  opacity: calc(.5 * (1 - max(0, var(--diepte, 1))));
}
.kaart-sluier--voor{ transform: translateZ(1px); }
.kaart-sluier--rug{ transform: rotateY(180deg) translateZ(calc(var(--dikte, 8px) + 1px)); }
.kaart-rug{
  transform: rotateY(180deg) translateZ(var(--dikte, 8px));
  display: grid;
  place-items: center;
  /* het papier, stippen om de 14px, en naar de rand toe een vlak dat de
     stippen wegneemt (in het midden wel stippen, aan de rand niet) */
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'><defs><pattern id='p' width='14' height='14' patternUnits='userSpaceOnUse'><circle cx='7' cy='7' r='1' fill='%23111111' fill-opacity='.14'/></pattern><radialGradient id='r' cx='.5' cy='.5' r='.5'><stop offset='.35' stop-color='%23F3F1EB' stop-opacity='0'/><stop offset='.61' stop-color='%23F3F1EB'/></radialGradient></defs><rect width='100%25' height='100%25' rx='20' fill='%23F3F1EB'/><rect width='100%25' height='100%25' rx='20' fill='url(%23p)'/><rect width='100%25' height='100%25' rx='20' fill='url(%23r)'/></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'><rect width='100%25' height='100%25' rx='22' fill='%23111111'/></svg>");
}
.kaart-rug img{
  width: 66%;
  height: auto;
  display: block;
  position: relative;
  padding: 10px 12px;
  background: var(--paper-hi);
  border-radius: 12px;
}
.kaart-sluier--rug{ opacity: calc(.18 + .4 * (1 - max(0, calc(-1 * var(--diepte, 1))))); }

/* ---- De voorste kaart blijft wit (Benjamin, 15-09-2026: "hou de kaarten
   trouwens wit dat gele highlight is niks"); ze komt alleen naar voren en het
   teken groeit iets. Geen schaduw en geen glans (Benjamin, 15-09-2026: "stop de
   glans over de voorste kaart"; 16-09-2026: "er is geen schaduw nodig"). De
   vloer-schaduw onder de ring is op 16-09-2026 ook weggehaald. ---- */

/* ---- De uitleg rechts ----
   Twee lagen over elkaar in een vak met vaste hoogte (layout.js meet de
   hoogste van de vijf teksten, zodat er niets verspringt). DE VEEG (Benjamin,
   15-09-2026: "gebruik een standaard transition format, wel een unieke"): de
   nieuwe tekst schuift van links de oude naar rechts weg, met een schuine
   rand van 12 procent. Beide lagen zijn een clip-path-polygoon met vier
   punten; de oude klapt naar de rechterrand dicht, de nieuwe klapt vanaf de
   linkerrand open, in hetzelfde tempo (650ms), zodat de schuine rand van de
   nieuwe precies de schuine rand van de oude volgt. Erbij een verschuiving van
   14px in dezelfde richting. Alleen clip-path en transform. De eerdere
   letter-wissels (morf, golf) staan in de worklog van 15-09-2026. */
.uitleg{
  position: relative;
  min-width: 0;
  min-height: var(--uitleg-h, 220px);
  padding-left: clamp(0px, 3.5vw, 56px);
}
.uitleg-laag{
  position: absolute; inset: 0 0 0 clamp(0px, 3.5vw, 56px);
  visibility: hidden;
  clip-path: polygon(-14% 0, 114% 0, 102% 100%, -26% 100%);
  transition: clip-path .65s cubic-bezier(.7,0,.2,1), transform .65s cubic-bezier(.7,0,.2,1);
  will-change: clip-path, transform;
}
.uitleg-laag.is-aan{ visibility: visible; }
/* de laag die weggaat: klapt naar rechts dicht */
.uitleg-laag.is-weg{
  visibility: visible;
  clip-path: polygon(114% 0, 114% 0, 102% 100%, 102% 100%);
  transform: translateX(14px);
}
/* de laag die komt: begint links dichtgeklapt, zonder overgang */
.uitleg-laag.is-nieuw{
  clip-path: polygon(-14% 0, -14% 0, -26% 100%, -26% 100%);
  transform: translateX(-14px);
  transition: none;
}
.uitleg-kop{
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  letter-spacing: -0.032em;
  line-height: 1.04;
}
.uitleg-kop .kaart-punt, .kaart-punt{ font-style: normal; color: var(--amber); }
.uitleg-tekst{
  margin-top: clamp(14px, 1.6vw, 22px);
  font-size: clamp(1.02rem, 1.2vw, 1.18rem);
  line-height: 1.55;
  max-width: 34ch;
  color: var(--tekst);
}
.uitleg-bron{ display: none; }

/* ---- Smal ---- */
@media (max-width: 980px){
  /* 19-09-2026: gap 12 -> 42px. De voorste kaart poppt en draait, en kwam dan tot 12px
     van de kop eronder (H3.uitleg-kop, gemeten over een hele draai op 390 en 360 breed). */
  .carrousel-rij{ grid-template-columns: 1fr; gap: 42px; }
  .carrousel-vel{ margin-inline: calc(-1 * var(--gutter)); }
  .carrousel{
    --kaart-b: min(72vw, 360px);   /* de voorste kaart met haar pop blijft binnen de kolom */
    --kaart-h: calc(var(--kaart-b) * .8);
    --r: calc(var(--kaart-b) * .96);
    height: calc(var(--kaart-h) * 1.08 + 50px);
  }
  .uitleg{ text-align: center; min-height: var(--uitleg-h, 180px); padding-left: 0; }
  .uitleg-laag{ inset: 0; }
  .uitleg-tekst{ margin-inline: auto; }
}

/* ---- Bewegingsvoorkeur uit ---- */
@media (prefers-reduced-motion: reduce){
  .kaart, .kaart-teken, .carrousel-kaart, .uitleg-laag{ transition: none !important; }
  .uitleg-laag{ clip-path: none; transform: none; }
  .kaart-teken *{ animation: none !important; }
  .carrousel:not(.is-entree) .carrousel-kaart{ --es: 1; }
}

/* ---- Het spoor: van gesprek tot live (ONGEBRUIKT sinds 12-09-2026) ----
   Het vel "Van gesprek tot live." is op 12-09-2026 van werk.html gehaald ("deze
   hele sectie mag weg"). Alle .spoor-klassen hieronder staan sindsdien nergens meer
   in een pagina; ze blijven staan omdat het spoor terug kan komen. Wie hier opruimt,
   haalt .spoor-vel t/m .spoor-vragen in een keer weg.
   LET OP: .terzijde onderaan dit blok is WEL in gebruik. Die stond hier omdat het
   spoor hem als eerste had, en hij is diezelfde dag opgepakt door het vel "En
   daarna." Laat hem dus staan.
   Vier haltes onder elkaar met een amberen draad ertussen die zich naar beneden
   tekent terwijl je leest. Elke halte draagt data-reveal; bij binnenkomst springt
   zijn stip op amber en trekt de draad door naar de halte eronder.

   WAAROM DE DRAAD OP EEN ::before STAAT en niet op een los element: de reveal zet
   bij de entree een transform op de halte zelf, en die zou een transform op datzelfde
   element overschrijven (zelfde valkuil als bij .haal). Een ::before heeft zijn eigen
   transform en blijft dus heel.

   DE DRAAD LOOPT DOOR DE TUSSENRUIMTE HEEN. Hij begint onder de stip en eindigt een
   volle gap lager, dus precies op de stip van de volgende halte. Verandert --spoor-gap,
   dan klopt dat vanzelf nog; verandert de maat van de stip, dan moet --spoor-stip-top
   mee.
   De laatste halte krijgt geen draad: daar is het spoor afgelopen.

   GEEN NUMMERS EN GEEN KADERS. De draad zegt al dat het een volgorde is. Genummerde
   rijtjes met een titel en een regeltje eronder zijn op deze sites verboden. */
/* De kop staat in een vaste kolom links en blijft daar staan terwijl de vier haltes
   erlangs lopen. Twee redenen: zonder die kolom vult het spoor maar zestig procent van
   de breedte en blijft de rechterhelft van het vel leeg, en de kop hoort bij alle vier
   de haltes en niet alleen bij de eerste. Dezelfde vorm als .vragen-kolom op
   over-ons.html; de plakafstand is er letterlijk van overgenomen, dus verandert die
   daar, verander hem hier mee.
   Op smal vervalt het plakken: dan is er geen kolom meer om in te blijven staan. */
.spoor-vel{
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 92px);
  align-items: start;
}
.spoor-kolom{
  position: sticky;
  top: calc(var(--balk) + clamp(18px, 3vw, 46px));
}
@media (max-width: 940px){
  .spoor-vel{ grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
  .spoor-kolom{ position: static; }
}

.spoor{
  /* De ruimte tussen twee haltes. De draad rekent ermee, dus hij staat als
     variabele en niet alleen in de gap. */
  --spoor-gap: clamp(52px, 6.4vw, 104px);
  /* Hoever de stip onder de bovenrand van de halte begint. Gemikt op het midden van
     de kaplijn van .spoor-kop: die ligt 0,1565 maal de lettergrootte onder de
     elementrand (zie de berekening bij .bouw-beeld) en is zelf 0,6875 maal de
     lettergrootte hoog. */
  --spoor-stip-top: clamp(7px, .95vw, 11px);
  --spoor-stip: 16px;
  display: grid;
  gap: var(--spoor-gap);
}
.spoor-halte{
  position: relative;
  display: grid;
  grid-template-columns: var(--spoor-stip) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 52px);
  align-items: start;
}
.spoor-halte::before{
  content: "";
  position: absolute;
  left: calc(var(--spoor-stip) / 2 - 1px);
  top: calc(var(--spoor-stip-top) + var(--spoor-stip) + 10px);
  bottom: calc(-1 * var(--spoor-gap));
  width: 2px;
  background: var(--amber);
  opacity: .5;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.15s var(--ease) .2s;
}
.spoor-halte:last-child::before{ display: none; }
.spoor-halte.is-visible::before{ transform: scaleY(1); }
.spoor-stip{
  display: block;
  width: var(--spoor-stip);
  height: var(--spoor-stip);
  margin-top: var(--spoor-stip-top);
  border-radius: 50%;
  border: 2px solid var(--ink-40);
  background: transparent;
  transition: background .7s var(--ease) .12s, border-color .7s var(--ease) .12s, box-shadow .7s var(--ease) .12s;
}
.on-dark .spoor-stip{ border-color: var(--paper-45); }
.spoor-halte.is-visible .spoor-stip{
  background: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 0 6px rgba(245,179,1,.15);
}
.spoor-kop{
  font-size: clamp(1.5rem, 2.7vw, 2.3rem);
  letter-spacing: -0.032em;
  margin-bottom: clamp(10px, 1.3vw, 18px);
}
.spoor-tekst .tekst{ max-width: 58ch; }
/* De drie vragen in halte 1. Ze staan in een eigen wikkel, want .vraag rekent met
   nth-of-type voor de trap naar rechts en zou anders de alinea erboven meetellen.
   Een maat kleiner dan de .vraag-standaard: ze delen de halte met een kop en met
   lopende tekst, en op volle maat zouden ze die kop overschreeuwen. */
.spoor-vragen{ margin-top: clamp(22px, 2.6vw, 38px); }
.spoor-vragen .vraag{ font-size: clamp(1.16rem, 2vw, 1.72rem); }

/* ---- De terzijde ----
   Een alinea die er wel staat maar niet meepraat: het prototype dat wij soms vooraf
   bouwen. Kleiner, in de zachte tekstrol, met een kort amberen streepje ervoor.
   Bewust een streepje aan de kop en niet een kader of een lijn over de volle breedte:
   dat laatste maakt van elke sectie een hokje en staat op deze pagina's nergens. */
.terzijde{
  margin-top: clamp(20px, 2.4vw, 32px);
  padding-left: clamp(16px, 1.8vw, 24px);
  border-left: 2px solid rgba(245,179,1,.55);
  font-size: .97rem;
  line-height: 1.62;
  color: var(--tekst-stil);
  max-width: 52ch;
}

@media (max-width: 760px){
  .spoor{ --spoor-gap: clamp(38px, 8vw, 56px); --spoor-stip: 13px; }
  .spoor-halte{ gap: 18px; }
  .spoor-tekst .tekst{ max-width: none; }
  /* Het streepje voor de terzijde vervalt hier. De draad van het spoor loopt op deze
     breedte op een centimeter ernaast, en twee amberen streepjes naast elkaar lezen
     als een dubbele lijn in plaats van als een terzijde. Wat overblijft is de kleinere
     letter en de zachte tekstrol, en dat is genoeg onderscheid. */
  .terzijde{ border-left: 0; padding-left: 0; }
}

/* ---- De tijdbalk: hoe lang het duurt (vel 4, op inkt sinds 12-09-2026) ----
   Het enige gebaar op deze pagina dat naar rechts loopt. Hij vult zich in 1,6s zodra
   hij in beeld komt en zet daarna pas de stip aan het eind aan, zodat het aankomen
   het laatste is wat je ziet; de vertraging op die stip is met opzet net langer dan
   de vulling.
   Het geheel hangt aan de data-reveal op .tijdbalk zelf: de vulling en de eindstip
   luisteren naar .is-visible op hun voorouder.

   GEEN TUSSENMARKERINGEN IN DE BALK. Zodra er halverwege iets staat leest hij als
   een planning, en dan gaan mensen hem natellen. De termijn zelf staat in de zin
   erboven en de slagen om de arm staan eronder. */
.tijdbalk{ margin-top: clamp(40px, 5.4vw, 82px); }
.tijdbalk-rail{
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: var(--ink-14);
}
.on-dark .tijdbalk-rail{ background: var(--paper-16); }
.tijdbalk-vul{
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.6s var(--ease) .25s;
}
[data-reveal].is-visible .tijdbalk-vul{ transform: scaleX(1); }
.tijdbalk-punt{
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--amber);
}
.tijdbalk-punt--start{ left: -1px; }
.tijdbalk-punt--eind{
  right: -1px;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .5s var(--ease) 1.55s, transform .5s var(--ease) 1.55s;
}
[data-reveal].is-visible .tijdbalk-punt--eind{ opacity: 1; transform: none; }
.tijdbalk-namen{
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(14px, 1.7vw, 24px);
}
.tijdbalk-namen span{
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tekst-stil);
}
.tijdbalk-namen span:last-child{ text-align: right; }
@media (prefers-reduced-motion: reduce){
  .tijdbalk-vul{ transform: scaleX(1); transition: none; }
  .tijdbalk-punt--eind{ opacity: 1; transform: none; transition: none; }
}

/* De slotalinea van vel 4 staat in de rechterhelft, precies onder het eind van de
   tijdbalk. Wie de balk van links naar rechts leest, komt daar uit; dat is de reden
   voor de kolom en niet de opvulling van het vel. Op smal valt hij terug naar een
   kolom, want dan is er geen linkerhelft om leeg te laten. */
.duur-slot{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
}
.duur-slot > p{ grid-column: 2; }
@media (max-width: 860px){
  .duur-slot{ grid-template-columns: 1fr; }
  .duur-slot > p{ grid-column: 1; }
}

/* ---- En daarna: de lijn die doorloopt (vel 6) ----
   Het vierde gebaar van de pagina en het enige dat niet afloopt: een amberen segment
   dat traag van links naar rechts door een vaste lijn schuift, eindeloos. Dat is
   precies wat dit vel zegt, en het is de reden dat er geen tekst bij hoeft.

   HIJ STAAT BUITEN DE .wrap, dus van schermrand tot schermrand. De animatie loopt
   over een transform en niet over left/width, zodat de browser er niet elke frame
   voor hoeft te herberekenen. Bij prefers-reduced-motion staat het segment stil in
   beeld in plaats van dat de lijn leeg blijft. */
.doorloop{
  position: relative;
  height: 2px;
  width: 100%;
  overflow: hidden;
  background: rgba(245,179,1,.2);
  margin: clamp(34px, 4.6vw, 68px) 0 clamp(40px, 5.2vw, 78px);
}
.doorloop::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 24%;
  background: linear-gradient(90deg, rgba(245,179,1,0), var(--amber) 48%, rgba(245,179,1,0));
  animation: doorloop 9s linear infinite;
}
@keyframes doorloop{
  from{ transform: translateX(-110%); }
  to{ transform: translateX(520%); }
}
@media (prefers-reduced-motion: reduce){
  .doorloop::after{ animation: none; transform: translateX(30%); }
}

/* Wat er na oplevering gebeurt, TWEE KEER HERZIEN OP 12-09-2026. Het stond eerst in
   twee gelijke kolommen met een kop en twee alinea's per kant, daarna in een brede en
   een smalle kolom met een kop boven allebei, en nu in een tekening met een regel
   ernaast. Benjamin over die tweede versie: "dat groot links klein rechts is slim,
   maar er zijn geen 2 koppen 1 boven 1 onder nodig en het is te veel tekst. Gooi de
   hele sectie om en gebruik echt design om iets te maken wat met weinig tekst voor
   zich spreekt."

   DE TEKENING DOET HET WERK. Links een laptop waarvan het scherm licht geeft, met het
   licht dat over de rand heen het zwarte vel in valt; rechts een regel op kopformaat
   en een alinea. Het beeld zegt wat de tekst niet meer hoeft te zeggen: hij staat aan,
   ook als u er niet naar kijkt. Daarom staat er ook geen website op dat scherm, alleen
   licht; een balk of een menu erin maakt er het venster van vel 2 van.
   De verhoudingen: de tekening krijgt iets meer breedte dan de tekst en ze staan op
   hun midden uitgelijnd, zodat het licht naast de regel valt en niet eronder.

   WAT ER NIET MEER IS: de tweede kop, de derde alinea en de slotregel op kernformaat.
   Het eigen systeem is een .terzijde van twee zinnen en de domeinnaam een stille regel
   onder de tekening. Zet hier geen tekst bij; dit hoort het kortste vel van de pagina
   te zijn, en er staat bewust geen "aanbevolen", geen kader, geen bedrag en niet het
   woord abonnement. */
/* Drie gebieden in twee kolommen: de tekening linksboven, de stille regel over de
   domeinnaam eronder, en de tekst rechts over allebei de rijen heen en op zijn
   midden uitgelijnd. Op smal wordt het een kolom in de leesvolgorde beeld, tekst,
   domeinnaam; die regel hoort daar achteraan en niet tussen het beeld en de zin. */
.daarna{
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  grid-template-areas:
    "beeld tekst"
    "noot  tekst";
  gap: clamp(22px, 2.6vw, 34px) clamp(34px, 5.2vw, 92px);
  align-items: start;
}
.daarna-beeld{ grid-area: beeld; }
.daarna-blok{ grid-area: tekst; align-self: center; }
.daarna-noot{ grid-area: noot; }
/* De laptop. Het lijnwerk staat op de halve papierkleur en niet op vol papier: op
   inkt zou een witte omtrek harder aankomen dan het licht dat eruit komt, en dan kijk
   je naar een omlijning in plaats van naar een scherm dat aan staat. */
.daarna-laptop{
  display: block;
  width: 100%;
  max-width: clamp(300px, 40vw, 520px);
  height: auto;
  color: var(--paper-45);
}
.dl-lamp{ fill: var(--amber); }
.daarna-noot{
  max-width: 40ch;
  font-size: .97rem;
  line-height: 1.62;
  color: var(--tekst-stil);
}
/* De regel naast de tekening. Groter dan .kern, want hij is hier de kop van het
   blok en niet de slotregel eronder. */
.daarna-zin{
  font-size: clamp(1.7rem, 3.05vw, 2.72rem);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.1;
  max-width: 13ch;
  margin-bottom: clamp(18px, 2.2vw, 30px);
}
.daarna-blok .tekst{ max-width: 40ch; }
@media (max-width: 860px){
  .daarna{
    grid-template-columns: 1fr;
    grid-template-areas: "beeld" "tekst" "noot";
    gap: clamp(28px, 6vw, 44px);
  }
  .daarna-laptop{ max-width: 100%; }
  .daarna-noot{ max-width: none; }
  .daarna-blok .tekst{ max-width: none; }
}

/* ---- De uitgelichte website (vel 7) ----
   Een case naast de tekst. Dezelfde vierkante uitsnede als de tegel op ons-werk.html,
   met het echte logo van de klant linksboven; de sluier is er alleen om dat logo
   leesbaar te houden, niet om sfeer te maken.
   De plaat is de link naar de website van de klant zelf, de knop ernaast gaat naar
   het portfolio. Dat onderscheid is met opzet: wie het werk wil zien klikt op het
   beeld, wie meer werk wil zien klikt op de knop.
   Komen er meer websites live, vervang dit vel dan niet door een raster; dat staat
   op ons-werk.html. Licht er dan de nieuwste uit. */
.uitgelicht{
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.uitgelicht-plaat{
  position: relative;
  display: block;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--ink-2);
}
.uitgelicht-plaat > img:first-child{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.uitgelicht-plaat:hover > img:first-child{ transform: scale(1.035); }
.uitgelicht-plaat:focus-visible{ outline: 3px solid var(--amber); outline-offset: 4px; }
.uitgelicht-sluier{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.08) 34%, rgba(0,0,0,0) 60%);
  pointer-events: none;
}
/* Het logo van de klant is een liggende wordmark van ongeveer 12 op 1, dus de maat
   gaat over de hoogte en niet over de breedte: op 44px hoog is hij 542px breed en
   loopt hij de tegel uit. Dezelfde hoogte-orde als .werk-tegel__merk op
   ons-werk.html, een tikje groter omdat deze plaat groter is. De max-width is de
   vangrail voor een logo met een andere verhouding. Neem bij een nieuwe klant het
   echte logo over, niet zijn naam in onze letter. */
.uitgelicht-merk{
  position: absolute;
  z-index: 2;
  left: clamp(20px, 2.4vw, 34px);
  top: clamp(18px, 2.2vw, 30px);
  height: clamp(15px, 1.5vw, 21px);
  width: auto;
  max-width: 52%;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
.uitgelicht-tekst .cta-actions{ margin-top: clamp(30px, 3.6vw, 46px); }
@media (max-width: 860px){
  .uitgelicht{ grid-template-columns: 1fr; gap: clamp(28px, 6vw, 40px); }
}
@media (prefers-reduced-motion: reduce){
  .uitgelicht-plaat > img:first-child{ transition: none; }
}


/* =================================================================
   OVER ONS: DE RIT (opnieuw vanaf nul, 12-09-2026)

   De pagina is een rit: een amberen weg die onder de twee koppies begint en
   waar een getekend autootje over rijdt met de scroll. Aansturing in rit.js.
   Hieronder per scene de maten. De oude over-ons-klassen (.intro, .regio,
   .duo, .slot enz.) verderop in dit bestand horen bij de opzet van 11-09-2026
   en worden opgeruimd zodra alle scenes staan.
   ================================================================= */

/* ---- 1. Aankomst ----
   De zin op kopformaat met de twee koppies erin. De koppies zijn stickers: ze
   vallen van boven in beeld zodra de zin zichtbaar wordt, stuiteren een keer en
   blijven scheef liggen. De reveal van de zin zelf (data-reveal) is het haakje;
   de val zit op de koppies, zodat de twee niet op hetzelfde element staan. */
.aankomst{ position: relative; padding-bottom: clamp(30px, 4vw, 60px); }
.aankomst .wrap{ position: relative; z-index: 1; }
.aankomst-vlek{
  position: absolute;
  left: 38%; top: -6%;
  width: clamp(360px, 46vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245,179,1,.28), rgba(245,179,1,.10) 55%, rgba(245,179,1,0) 100%);
  animation: vlek-adem 9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes vlek-adem{
  from{ transform: translate(0,0) scale(1); }
  to  { transform: translate(-4%, 5%) scale(1.08); }
}
.aankomst-zin{
  font-size: clamp(2.4rem, 6.2vw, 5.4rem);
  line-height: 1.0;
  letter-spacing: -0.045em;
  max-width: 13ch;
}
.aankomst-tekst{ margin-top: clamp(24px, 3vw, 42px); max-width: 44ch; }
.aankomst-zin .gezicht{
  width: .82em; height: .82em;
  vertical-align: -0.13em;
  margin: 0 .08em 0 .05em;
  box-shadow: 0 0 0 3px var(--paper), 0 18px 32px -14px rgba(17,17,17,.55);
}
/* De val. Begint boven beeld en doorzichtig, landt met een stuiter en een
   scheve stand; Benjamin naar links, Stijn naar rechts, en Stijn iets later. */
.gezicht--sticker{ opacity: 0; transform: translateY(-1.6em) rotate(-14deg); }
[data-reveal].is-visible .gezicht--benjamin{ animation: sticker-val-links .9s cubic-bezier(.2,1.4,.4,1) .25s forwards; }
[data-reveal].is-visible .gezicht--stijn{ animation: sticker-val-rechts .9s cubic-bezier(.2,1.4,.4,1) .55s forwards; }
@keyframes sticker-val-links{
  from{ opacity: 0; transform: translateY(-1.6em) rotate(-18deg); }
  60% { opacity: 1; transform: translateY(.06em) rotate(-4deg); }
  to  { opacity: 1; transform: translateY(0) rotate(-7deg); }
}
@keyframes sticker-val-rechts{
  from{ opacity: 0; transform: translateY(-1.6em) rotate(18deg); }
  60% { opacity: 1; transform: translateY(.06em) rotate(3deg); }
  to  { opacity: 1; transform: translateY(0) rotate(6deg); }
}
.aankomst-zin .gezicht:hover{ transform: rotate(0) scale(1.08); animation: none; opacity: 1; transition: transform .5s var(--ease); }

/* ---- 2. De rit ----
   De sectie is 320vh hoog; het toneel plakt bovenaan en is een scherm hoog. De
   voortgang door de sectie stuurt de tekening (rit.js zet --p op de sectie).
   GEEN overflow: hidden op .rit of zijn ouders, anders plakt er niets.
   De brede tekening staat op liggende schermen, de smalle op staande. */
.rit{ height: 320vh; }
.rit-toneel{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.rit-svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--ink);
}
.rit-svg--smal{ display: none; }
@media (max-aspect-ratio: 1/1){
  .rit-svg--breed{ display: none; }
  .rit-svg--smal{ display: block; }
}
/* De tekenstreek: inkt, ronde uiteinden, vaste dikte in tekeneenheden. */
.rit-svg path, .rit-svg rect, .rit-svg circle{
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.rit-svg .rit-amber{ fill: var(--amber); stroke: none; }
.rit-svg text{
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  fill: var(--ink);
}
/* De route als stippellijn en de weg die zich uittekent. De weg is amber en
   dikker; rit.js zet dasharray en dashoffset. */
.rit-spoor{
  stroke: var(--ink-14) !important;
  stroke-width: 2 !important;
  stroke-dasharray: 1 12;
}
.rit-weg{
  stroke: var(--amber) !important;
  stroke-width: 6 !important;
}
.rit-bord rect{ fill: var(--paper); }
.rit-boom circle{ fill: var(--paper); }
.rit-boerderij path:first-child, .rit-boerderij rect{ fill: var(--paper); }
.rit-huis path:first-child{ fill: var(--paper); }
/* De deur draait open om zijn linkerkant; de foto erachter komt daarna. */
.rit-deur rect{
  fill: var(--paper);
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform 1.1s var(--ease);
}
.rit-deur.open rect{ transform: scaleX(.14) skewY(-8deg); }
.rit-deur.open circle{ opacity: 0; transition: opacity .3s; }
.rit-foto{
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.86);
  transition: opacity .9s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.rit-foto.aan{ opacity: 1; transform: scale(1); }
/* De auto: carrosserie op papier zodat de weg er niet doorheen schijnt, wielen
   draaien met de voortgang mee. 2400 graden over de hele rit. */
.rit-carrosserie{ fill: var(--paper); }
.rit-wiel circle{ fill: var(--paper); }
.rit-wiel{
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(calc(var(--p, 0) * 2400deg));
}
/* De zinnen langs de weg. Ze gaan aan zodra de auto er is (data-bij in rit.js). */
.rit-zin{
  position: absolute;
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
}
.rit-zin.aan{ opacity: 1; transform: none; }
.rit-zin--vertrek{ left: 7%; top: 34%; font-size: clamp(1.6rem, 3.2vw, 2.9rem); }
.rit-zin--onderweg{ left: 41%; top: 14%; font-size: clamp(1.05rem, 1.55vw, 1.35rem); font-weight: 600; letter-spacing: -0.015em; max-width: 22ch; color: var(--tekst-stil); }
.rit-zin--deur{ left: 57%; top: 80%; font-size: clamp(1.15rem, 1.9vw, 1.7rem); max-width: 24ch; }
@media (max-aspect-ratio: 1/1){
  .rit-zin--vertrek{ left: 40%; top: 15%; font-size: clamp(1.4rem, 6vw, 2.2rem); }
  .rit-zin--onderweg{ left: 46%; top: 44%; max-width: 18ch; }
  /* Links van het huis en erboven, want het huis staat linksonder en de foto rechtsonder. */
  .rit-zin--deur{ left: 6%; top: 66%; max-width: 15ch; font-size: clamp(1.05rem, 4.2vw, 1.4rem); }
  /* Het bord is op een staand scherm anders onleesbaar klein. */
  .rit-svg--smal text{ font-size: 30px; }
}
@media (prefers-reduced-motion: reduce){
  .rit{ height: auto; }
  .rit-toneel{ position: static; height: auto; aspect-ratio: 16 / 9; }
  .rit-zin{ opacity: 1; transform: none; transition: none; }
  .rit-deur rect, .rit-foto, .aankomst-vlek{ transition: none; animation: none; }
  .gezicht--sticker{ opacity: 1; transform: none; animation: none !important; }
}


/* =================================================================
   OVER ONS: DE REIS (12-09-2026)

   Een doek met een vaste verhouding waar een getekende wereld op ligt; de weg
   slingert er verticaal overheen en de auto rijdt op ooghoogte mee met de
   scroll (reis.js). De haltes zijn HTML-blokken op het doek, in procenten.
   Het blok "OVER ONS: DE RIT" hierboven is de eerste opzet van dezelfde avond
   (sticky toneel) en is vervangen; die klassen (.rit*, .aankomst*) worden
   opgeruimd zodra alle haltes staan.
   ================================================================= */

.reis{
  position: relative;
  /* Boven de uitnodiging eronder, zodat de handdruk over die naad kan hangen. Het
     doek heeft daarom geen eigen achtergrond (de body is al papier) en de gloed
     stopt veertig pixels boven de onderrand: anders dekt het doek de ronde
     bovenhoeken van de uitnodiging af. */
  z-index: 3;
  background: transparent;
  /* De verhouding van het doek is die van de tekening; verandert de viewBox van
     .reis-wereld, verander dan deze twee getallen mee. */
  aspect-ratio: 1440 / 3430;
  overflow: visible;
  padding: 0;
  /* De wereldkleuren: vlakke vulling met de inktlijn erover. Zand, groen en
     steen komen uit de studio-achtergrond en het palet van de foto's. */
  --w-blauw:  #0F4C9A;
  --w-asfalt: #CDCBC3;   /* 14-09-2026 donkerder, was #DEDDD8 */
  --w-zandpad: #C9A97C;  /* het paadje naar de voordeur: zandbruin */
  --w-zand:   #E8DFD0;
  --w-groen:  #93AA7E;
  --w-groen-licht: #B8C9A6;
  --w-groen-donker: #6E8A5E;
  --w-gras:   rgba(147,170,126,.18);
  --w-steen:  #C77B5B;
  --w-dak:    #8C4F38;
  --w-glas:   #DCE6EA;
  --w-baksteen: #B4644B;
  --w-lei:    #5C6570;
  --w-water:  #CBD9DF;
}
@media (max-aspect-ratio: 1/1){
  .reis{ aspect-ratio: 430 / 3800; }   /* 19-09-2026: 3600 -> 3800, zie worklog */
}
.reis.gloedvel::before{ bottom: 40px; }
.reis-wereld{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--ink);
  overflow: visible;
}
.reis-wereld--smal{ display: none; }
@media (max-aspect-ratio: 1/1){
  .reis-wereld--breed{ display: none; }
  .reis-wereld--smal{ display: block; }
}
/* De middenstreep in een eigen laag (15-09-2026). De streep verandert bij elk
   scrollbeeld (dashoffset); met will-change krijgt hij een eigen compositorlaag,
   zodat alleen die lijn opnieuw geschilderd wordt en niet de hele tekening eronder
   met de foto, de schaduw en de gloed. Haal will-change hier niet weg: dan hapert
   de pagina weer. */
.reis-streep{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  will-change: transform;
}
.reis-streep--smal{ display: none; }
@media (max-aspect-ratio: 1/1){
  .reis-streep--breed{ display: none; }
  .reis-streep--smal{ display: block; }
}

/* ---- De tekenstreek ----
   Inktlijn met ronde uiteinden op alles, vaste dikte in schermpixels. */
.reis-wereld path, .reis-wereld rect, .reis-wereld ellipse, .reis-wereld circle{
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  fill: none;
}
.reis-wereld text{
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  fill: var(--ink);
}

/* ---- De weg ----
   Een brede grijze baan zonder lijn, en daarop de amberen middenstreep die zich
   tekent tot waar de auto is (dashoffset uit reis.js). Twee keer hetzelfde pad. */
.weg-baan{
  stroke: var(--w-asfalt) !important;
  stroke-width: 64 !important;
  /* Rechte kop: de baan loopt door tot onder de naad en wordt daar recht
     afgesneden (clipPath reis-naad-*), dus geen ronde neus op de uitnodiging. */
  stroke-linecap: butt !important;
  vector-effect: none !important;
}
/* Tot reis.js de weg gemeten heeft blijven streep en auto onzichtbaar: anders
   zie je bij het laden een seconde de hele streep vol en de auto buiten beeld. */
.reis:not(.is-gemeten) .weg-streep,
.reis:not(.is-gemeten) .reis-auto{ opacity: 0; }
.weg-streep, .reis-auto{ transition: opacity .35s var(--ease); }
.weg-streep{
  fill: none;
  stroke: var(--amber) !important;
  stroke-width: 5 !important;
  vector-effect: none !important;
  stroke-linecap: butt !important;
}
.gras ellipse{ fill: var(--w-gras); stroke: none; }

/* ---- Het plaatsnaambord ----
   Verkeersblauw met witte letters en een witte binnenrand, zoals langs de weg. */
.bord-plaats .blauw{ fill: var(--w-blauw); stroke: var(--w-blauw); }
.bord-plaats .rand{ fill: none; stroke: #fff; stroke-width: 2.2; }
.bord-plaats text{ fill: #fff; font-size: 27px; letter-spacing: .01em; }
.reis-wereld--smal .bord-plaats text{ font-size: 16px; }   /* 21px liep uit de rand van het bord */
.bord-plaats .paal{ stroke-width: 3; }

/* ---- Bomen, gras, boerderij ---- */
.boom .stam{ stroke-width: 3; }
.boom .kruin{ fill: var(--w-groen); }
.boom .kruin--licht{ fill: var(--w-groen-licht); stroke: none; }
.boerderij .muur, .klant .muur{ fill: var(--w-zand); }
.boerderij .dak, .klant .dak{ fill: var(--w-dak); }
.boerderij .deur, .klant .deur{ fill: var(--w-steen); }
.boerderij .raam, .klant .raam{ fill: var(--w-glas); }
.klant .naambord{ fill: var(--amber); }
/* Het pand van de klant, verder uitgewerkt (14-09-2026): schoorsteen in baksteen,
   een stoep voor de deur, een paadje vanaf het eind van de weg, en een donkere
   deuropening achter de deur zodat het opengaan diepte heeft. */
.klant .schoorsteen{ fill: var(--w-baksteen); }
.klant .stoep{ fill: var(--w-asfalt); }
.klant .deur-opening{ fill: #2B211B; transition: fill .8s var(--ease) .55s; }
.reis-wereld .pad{
  stroke: var(--w-zandpad) !important;
  stroke-width: 20 !important;
  vector-effect: none !important;
}

/* ---- Het kasteel van Renswoude ----
   Van voren, sterk vereenvoudigd: baksteen, de vierkante middentoren met het
   leien puntdak en de gouden bol (die is amber, dat komt goed uit), twee
   hoektorens die naar voren springen, en de gracht ervoor. Zelfde streek als
   de rest: vlakke vulling met de inktlijn erover. */
.kasteel .muur{ fill: var(--w-baksteen); }
.kasteel .dak{ fill: var(--w-lei); }
.kasteel .raam{ fill: var(--w-glas); }
.kasteel .deur{ fill: var(--w-lei); }
.kasteel .bol{ fill: var(--amber); }
.kasteel .water{ fill: var(--w-water); stroke: none; }

/* ---- Losse foto's langs de weg ----
   Onbewerkt, zonder rand, uitgesneden in een organische vorm; zachte schaduw
   zodat hij op het papier ligt. */
.halte-foto{ filter: drop-shadow(0 18px 22px rgba(17,17,17,.18)); }

/* ---- Het bosje met de kraaien ----
   Dichter op elkaar dan de losse bomen langs de weg, een deel in donkerder groen,
   een donkere grond eronder. De kraaien zijn silhouetten in vol inkt, met een
   papieren oogje. De vliegende kraaien zijn dezelfde vogel van opzij: zelfde romp,
   kop, snavel, staart en oog als de staande, met een geheven vleugel met vingerveren
   in plaats van poten. */
.bos .grond{ fill: rgba(110,138,94,.28); stroke: none; }
.boom--donker .kruin{ fill: var(--w-groen-donker); }
.boom--donker .kruin--licht{ fill: var(--w-groen); }
.kraai path{ fill: var(--ink); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.kraai .poot{ fill: none; stroke-width: 1.8; }
.kraai .oog{ fill: var(--paper); stroke: none; }

/* ---- Het wapen van Renswoude ----
   Naar het officiele wapenbeeld (Pasted image 20260912164209.png in de vault):
   zilvergrijs veld, keel, azuur, goud. Vlak, met de inktlijn alleen om het schild. */
.wapen .zilver{ fill: #D6D6D6; stroke: none; }
.wapen .keel{ fill: #E1131E; stroke: none; }
.wapen .azuur{ fill: #1E5BC6; stroke: none; }
.wapen .omtrek{ fill: none; stroke: var(--ink); stroke-width: 2; }
.wapen .goud{ fill: var(--amber); stroke: #8A6100; stroke-width: 1.4; stroke-linejoin: round; }
.wapen .stalk{ fill: none; stroke: #8A6100; stroke-width: 1.4; }
.wapen .parel{ fill: #E9E9E9; stroke: #8A6100; stroke-width: 1.2; }
.wapen .steen-rood{ fill: #D4222B; stroke: #7A1212; stroke-width: 1; }
.wapen .steen-groen{ fill: #1F9A4B; stroke: #0D5A2C; stroke-width: 1; }

/* ---- De reclameborden (halte 1) ----
   Nette borden op twee palen met een schaduwvlak erachter; de holle zinnen staan
   er in inkt op. Het laatste bord klapt om zodra de auto voorbij is (data-bij):
   het vlak draait om zijn onderrand plat naar achteren. */
.reclame .paal{ stroke-width: 3; }
.reclame .schaduw{ fill: var(--w-zand); stroke: none; }
.reclame .vlak{ fill: var(--paper); }
.reclame text{ font-size: 18px; letter-spacing: -0.01em; }
.reis-wereld--smal .reclame text{ font-size: 14px; }
.reclame .klapvlak{
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 1.1s cubic-bezier(.3,1.3,.5,1);
}
.reclame--klap.aan .klapvlak{ transform: rotateX(84deg) scaleY(.12); }

/* ---- De aankomst: het pand gaat aan, de deur zwaait open, de handdruk erachter ----
   Het pand heeft zijn eigen data-bij, net voor de deur: eerst licht in de ramen
   en rook uit de schoorsteen (er is iemand thuis), dan de deur, dan de foto. */
.klant .raam{ transition: fill .7s var(--ease); }
.klant.aan .raam{ fill: #FFDD7A; }
.klant.aan .deur-opening{ fill: #F6C74A; }
.klant .rook{ fill: rgba(17,17,17,.22); stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.klant.aan .rook{ animation: rook-op 3.6s ease-out infinite; }
.klant.aan .rook--2{ animation-delay: 1.2s; }
.klant.aan .rook--3{ animation-delay: 2.4s; }
@keyframes rook-op{
  0%   { opacity: 0; transform: translateY(10px) scale(.5); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-46px) translateX(8px) scale(1.6); }
}
/* De deur zwaait om zijn scharnierkant open, met een klein doorschieten alsof hij
   tegen de muur komt; de verlichte opening erachter komt vrij. */
.klant .deur{
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.3,1.25,.5,1);
}
.klant .deur.aan{ transform: scaleX(.16) skewY(-12deg); }
.klant-foto{
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.88);
  transition: opacity .9s var(--ease) .2s, transform 1.2s var(--ease) .2s;
}
.klant-foto.aan{ opacity: 1; transform: scale(1); }

/* ---- De auto ----
   Absoluut op het doek; reis.js zet de translate en de draaiing. De maat is in
   schermpixels, dus de auto blijft even groot op elk scherm. */
.reis-auto{
  position: absolute;
  left: 0; top: 0;
  width: 64px;
  height: 104px;
  margin: -52px 0 0 -32px;
  z-index: 3;
  will-change: transform;
  filter: drop-shadow(0 10px 10px rgba(17,17,17,.22));
}
.reis-auto svg{ width: 100%; height: 100%; overflow: visible; }
.reis-auto .carrosserie{ fill: var(--amber); stroke: var(--ink); stroke-width: 2.6; }
.reis-auto .cabine{ fill: var(--w-glas); stroke: var(--ink); stroke-width: 2.2; }
.reis-auto .lijn{ stroke: var(--ink); stroke-width: 2; }
.reis-auto .koplamp{ fill: #fff8dc; stroke: var(--ink); stroke-width: 1.4; }
.reis-auto .koplamp, .reis-auto .achterlicht{ transition: fill .6s var(--ease); }
.reis-auto .achterlicht{ fill: #d64a3a; stroke: var(--ink); stroke-width: 1.4; }
/* Aangekomen bij het huis: motor uit, dus ook de koplampen en achterlichten uit (Benjamin,
   16-09-2026). De lichtbundels gingen al uit (reis.js haalt .licht weg); de lampjes zelf
   bleven wit en rood en lazen nog als aan. */
.reis.is-aangekomen .reis-auto .koplamp{ fill: #bdb8ad; }
.reis.is-aangekomen .reis-auto .achterlicht{ fill: #6e3a33; }
.reis-auto .licht path{ fill: rgba(245,179,1,.14); opacity: 0; transition: opacity .6s var(--ease); }
.reis-auto.licht .licht path{ opacity: 1; }
@media (max-aspect-ratio: 1/1){
  .reis-auto{ width: 44px; height: 72px; margin: -36px 0 0 -22px; }
}

/* ---- De haltes ----
   Op het doek in procenten; gaan aan als de auto ernaast staat. */
.halte{
  position: absolute;
  left: var(--xb);
  top: var(--yb);
  width: var(--wb, 34%);
  z-index: 2;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.halte.aan{ opacity: 1; transform: none; }
@media (max-aspect-ratio: 1/1){
  .halte{ left: var(--xs); top: var(--ys); width: var(--ws, 60%); }
}
.halte-kop{
  font-size: clamp(1.5rem, 3.1vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}
.halte--vertrek .halte-kop{ font-size: clamp(1.9rem, 4.2vw, 4.2rem); }
/* De slotregel bij de aankomst, even groot als de openingszin. */
.halte-kop--groot{ font-size: clamp(1.9rem, 4.2vw, 4.2rem); max-width: 12ch; }
.halte-tekst{
  margin-top: clamp(14px, 1.4vw, 22px);
  font-size: clamp(.98rem, 1.22vw, 1.22rem);
  line-height: 1.55;
  color: var(--tekst);
  max-width: 46ch;
}
.halte-tekst + .halte-tekst{ margin-top: clamp(10px, 1vw, 16px); }
.halte-kern{
  margin-top: clamp(16px, 1.8vw, 28px);
  font-size: clamp(1.2rem, 1.9vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  max-width: 24ch;
  text-wrap: balance;
}
/* De knop onder "Wie doet wat": de gewone amberen knop, met dezelfde lichte draai
   als de pil ervoor, zodat hij nog als sticker langs de weg leest. */
.halte-knop{ margin-top: clamp(16px, 1.8vw, 28px); transform: rotate(-2.5deg); }
.halte-knop:hover{ transform: rotate(0deg); }
.halte-pil{
  display: inline-block;
  margin-top: clamp(16px, 1.8vw, 28px);
  padding: .6em 1.2em;
  border-radius: 999px;
  background: var(--amber);
  font-weight: 800;
  font-size: clamp(.95rem, 1.15vw, 1.15rem);
  letter-spacing: -0.01em;
  transform: rotate(-2.5deg);
}
/* De koppies in de vertrekzin vallen als stickers in zodra de halte aangaat. */
.halte--vertrek .gezicht{
  width: .8em; height: .8em;
  vertical-align: -0.12em;
  margin: 0 .08em 0 .04em;
  box-shadow: 0 0 0 3px var(--paper), 0 16px 28px -12px rgba(17,17,17,.5);
}
.halte--vertrek .gezicht--sticker{ opacity: 0; }
.halte--vertrek.aan .gezicht--benjamin{ animation: sticker-val-links .9s cubic-bezier(.2,1.4,.4,1) .35s forwards; }
.halte--vertrek.aan .gezicht--stijn{ animation: sticker-val-rechts .9s cubic-bezier(.2,1.4,.4,1) .65s forwards; }

@media (prefers-reduced-motion: reduce){
  .halte{ opacity: 1; transform: none; transition: none; }
  .reclame .klapvlak, .klant .deur, .klant-foto, .klant .raam, .klant .deur-opening{ transition: none; }
  .klant.aan .rook{ animation: none; opacity: .6; }
  .halte--vertrek .gezicht--sticker{ opacity: 1; animation: none !important; }
}