/* ═══════════════════════════════════════════════════════════════════════════
   DE REIS — de homepage als één doorlopende scroll
   ───────────────────────────────────────────────────────────────────────────
   Gebouwd 26-08-2026, volgens REISPLAN.md. Alle keuzes hierin zijn van Lenny
   en staan in REISPLAN §5 en §7; wat hier staat is de uitvoering, niet de keuze.

     beweging   C · schacht      het blok komt van onderen omhoog, achterover
                                 gekanteld, en staat RECHT EN STIL op het leesmoment
     overgang   6 · Wegzwaaien   het blok zwaait schuin naar links omhoog weg
     aandacht   stapteller · voortgangsspoor · levende details · kop woord voor
                woord.  GEEN eigen cursor (minderheidspatroon, 2 van 15 sites,
                bestaat niet op touch)
     beeld      de augen-behandeling op sterkte ZACHT

   Vaste regels die hierin verwerkt zitten:
     - de tekst en de beelden staan IN de 3D-ruimte, niet plat ervoor
     - alleen `transform` en `opacity` animeren  (jank-regel)
     - géén backdrop-filter, géén mix-blend-mode  (jank-lijst)
     - volledige prefers-reduced-motion-stand: alles onder elkaar, niets beweegt
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── het frame ──────────────────────────────────────────────────────────────
   .rz is alleen hoogte: hij bepaalt hoevéél je scrollt.
   .rz-kleef plakt één scherm lang vast.  .rz-scene draagt de perspectief.
   De blokken liggen op elkaar en worden door de planner verplaatst. */
.rz{position:relative;--rp:0}

/* ══ VIER ACHTERGRONDEN VOOR DE REIS — proef 02-09-2026 ═════════════════════
   Lenny: *"de achtergrond is heel droog en kaal, kun je 4 verschillende versies
   maken waarop we dit kunnen testen."* Wisselen met de balk linksonder of met
   `?bg=raster|papier|licht|donker` in het adres.

   ⛔ Wat er in geen van de vier zit, allebei door hemzelf weggehaald op 26-08:
   de wereld met cirkels en vlakken ("superlelijk") en het voortgangsspoor links
   ("die puntjes kunnen weg"). ⛔ En geen `backdrop-filter` of `mix-blend-mode`:
   onze twee bewezen jank-oorzaken.

   Elke versie geeft een ANDER antwoord op "wat ligt er achter de reis":
     raster  een bouwtekening   · het vak waar we in zitten
     papier  een materiaal      · de leegte wordt een vel in plaats van een gat
     licht   de reis zelf       · één zacht licht dat koel begint en warm eindigt
     donker  de opening van het merk · 82 % donker, precies zoals het voorstel
*/
.rz-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.rz-kleef{z-index:1}

/* ── A · raster ──────────────────────────────────────────────────────────── */
.rz[data-bg="raster"] .rz-bg{
  background-image:
    linear-gradient(to right, rgba(15,16,18,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,16,18,.055) 1px, transparent 1px),
    linear-gradient(to right, rgba(15,16,18,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,16,18,.10) 1px, transparent 1px);
  background-size:88px 88px, 88px 88px, 440px 440px, 440px 440px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 45%, #000 30%, transparent 84%);
          mask-image:radial-gradient(120% 90% at 50% 45%, #000 30%, transparent 84%);
  /* het raster schuift een halve maas op over de hele reis: beweging zonder dat
     er iets nieuws in beeld komt. Alleen background-position, geen layout. */
  background-position:calc(var(--rp) * -88px) calc(var(--rp) * -176px),
                      calc(var(--rp) * -88px) calc(var(--rp) * -176px),
                      calc(var(--rp) * -88px) calc(var(--rp) * -176px),
                      calc(var(--rp) * -88px) calc(var(--rp) * -176px)}
.rz[data-bg="raster"] .rz-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--paper) 0,transparent 14%,
             transparent 86%,var(--paper) 100%)}

/* ── B · papier ──────────────────────────────────────────────────────────── */
.rz[data-bg="papier"] .rz-bg{background:#f4f2ef}
.rz[data-bg="papier"] .rz-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(130% 105% at 50% 42%, rgba(255,255,255,.92) 0%,
             rgba(255,255,255,.34) 46%, rgba(0,0,0,.055) 100%),
             linear-gradient(180deg,var(--paper) 0,transparent 9%,
             transparent 91%,var(--paper) 100%)}

/* ── C · licht ───────────────────────────────────────────────────────────── */
/* Eén zacht licht dat met de reis meereist: linksboven en koel bij etappe 01,
   rechtsonder en warm bij 05. Het accent blijft ver onder de 2 % die de
   huisstijl toestaat — het is een gloed, geen vlak. */
/* ⚠️ Eerste poging was bij etappe 01 niet van "geen" te onderscheiden — gemeten
   55,0 % bijna wit tegen 55,7 % zonder achtergrond. Een gloed die pas halverwege
   op gang komt lost de leegte niet op op het moment dat je ernaar kijkt. De
   ondergrens is opgetrokken en het koele tegenlicht is er van begin af aan. */
.rz[data-bg="licht"] .rz-bg{
  background:
    radial-gradient(62% 56% at calc(16% + var(--rp) * 66%) calc(22% + var(--rp) * 54%),
      rgba(255,122,89,calc(.13 + var(--rp) * .17)) 0%,
      rgba(255,122,89,calc(.05 + var(--rp) * .07)) 44%,
      rgba(255,122,89,0) 74%),
    radial-gradient(76% 66% at calc(78% - var(--rp) * 56%) calc(80% - var(--rp) * 60%),
      rgba(15,16,18,.10) 0%, rgba(15,16,18,.03) 42%, rgba(15,16,18,0) 70%),
    var(--paper)}

/* ── D · donker ──────────────────────────────────────────────────────────── */
/* De opening van dit merk is 82 % donker (HUISSTIJL §6). De reis is een eigen
   band, dus dat kan hier zonder de rest van de site om te gooien. Bijkomend: de
   lichte dienstbeelden komen hier juist los van de grond in plaats van erin te
   verdwijnen. */
.rz[data-bg="donker"] .rz-bg{background:#16181c;
  background-image:radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,.055) 0%,
                   rgba(255,255,255,0) 62%)}
.rz[data-bg="donker"] .rb-txt h2,
.rz[data-bg="donker"] .rb-txt h2 w{color:#f4f6f8}
.rz[data-bg="donker"] .rb-txt p{color:#c3cad1}
.rz[data-bg="donker"] .rb-nr{color:#8f979f}
.rz[data-bg="donker"] .rb-pt li{color:#c3cad1}
.rz[data-bg="donker"] .rb-pt strong{color:#fff}
.rz[data-bg="donker"] .rb-pt li::before{background:var(--ac-lt)}
.rz[data-bg="donker"] .rb-im:hover{border-color:var(--ac-lt)}
.rz[data-bg="donker"] .rb-cs,.rz[data-bg="donker"] .rb-q figcaption{color:#aab2ba}

/* ══ DE REIS OP EEN DONKERE GROND — reparatie 02-09-2026 ═══════════════════
   Lenny keek naar dienst 01 op `?grond=antraciet&bg=geen` en zei: *"ik vind dit
   best kaal."* Dat was voor een deel geen smaak maar een defect: dit bestand had
   0 regels voor `html[data-grond]` terwijl `bron/styles.css` er 45 heeft. De
   gronden zijn van 02-09, de reis van 26-08, en niemand heeft ze aan elkaar
   geknoopt. Drie dingen stonden daardoor uit, alle drie gemeten met
   getComputedStyle op de echte pagina, grond `rgb(22,24,28)`:

     .rb-groot   rgba(15,16,18,.043)  het reuzencijfer van 380 px dat juist de
                                      lege bovenhoek moest vullen — onzichtbaar
     .rb-im      border rgba(15,16,18,.20) + zwarte schaduw — geen rand, geen
                                      diepte: de foto's liggen als kale
                                      rechthoeken op elkaar in plaats van als
                                      kaarten in de ruimte
     .rz-merk    merk.webp (gemiddeld rgb 15,17,18) met filter:none — het
                                      beeldmerk in de teller was zwart op zwart

   De juiste waarden bestónden al, in het `[data-bg="donker"]`-blok hierboven,
   maar dat gaat over de achtergrond van de REIS en niet over de grond van de
   SITE. Ze staan nu als drie eigenschappen op `.rz` zelf, zodat elke donkere
   situatie ze in één regel omzet in plaats van de hele selectorlijst te
   herhalen — een selectorlijst is geen voorvoegsel, en dat is hier al een keer
   misgegaan (STATUS 02-09).                                                    */
.rz{--rb-cijfer:rgba(15,16,18,.045);
    --rb-rand:rgba(15,16,18,.20);
    --rb-schaduw:0 18px 40px -26px rgba(12,12,14,.42),
                 0 34px 70px -40px rgba(12,12,14,.5);
    --rb-schaduw-h:0 46px 90px -38px rgba(12,12,14,.62)}

/* De drie donkere gevallen. Elk zet dezelfde drie eigenschappen om. */
.rz[data-bg="donker"]{--rb-cijfer:rgba(255,255,255,.055);
    --rb-rand:rgba(255,255,255,.16);
    --rb-schaduw:0 22px 50px -26px rgba(0,0,0,.7), 0 40px 90px -44px rgba(0,0,0,.8);
    --rb-schaduw-h:0 46px 96px -34px rgba(0,0,0,.85)}
html[data-grond="antraciet"] .rz{--rb-cijfer:rgba(255,255,255,.055);
    --rb-rand:rgba(255,255,255,.16);
    --rb-schaduw:0 22px 50px -26px rgba(0,0,0,.7), 0 40px 90px -44px rgba(0,0,0,.8);
    --rb-schaduw-h:0 46px 96px -34px rgba(0,0,0,.85)}
/* Op `gemengd` staat de site op papier maar krijgt de reisband zelf een
   antracieten grond (styles.css r.2526) — dus daar geldt hetzelfde. */
html[data-grond="gemengd"] .rz[data-bg="geen"]{--rb-cijfer:rgba(255,255,255,.055);
    --rb-rand:rgba(255,255,255,.16);
    --rb-schaduw:0 22px 50px -26px rgba(0,0,0,.7), 0 40px 90px -44px rgba(0,0,0,.8);
    --rb-schaduw-h:0 46px 96px -34px rgba(0,0,0,.85)}

/* Het beeldmerk in de teller. Er is een witte versie (`merk-wit.webp`), maar de
   teller wordt door bouw.py gevuld met `merk.webp`; inverteren doet hetzelfde en
   raakt de generator niet. Zelfde ingreep als de kopbalk op antraciet
   (styles.css r.168). */
html[data-grond="antraciet"] .rz-merk img{filter:invert(1)}
html[data-grond="antraciet"] .rz-merk b{color:var(--ink)}
/* De teller met het merk staat `fixed` en valt dus buiten `.rz`; hij hangt aan
   een stand op <body> die dezelfde schakelaar zet. Zonder dit stond er zwart
   lijnwerk op een antracieten grond — hetzelfde probleem als het logo in de
   kopbalk, zie [[logo-op-twee-ondergronden]]. */
body[data-reisbg="donker"] .tel{color:#8f979f}
body[data-reisbg="donker"] .tel .nu{color:#fff}
body[data-reisbg="donker"] .rz-merk img{filter:invert(1)}
body[data-reisbg="donker"] .rz-merk b{color:#fff}

.rz-kleef{position:sticky;top:0;height:100svh;overflow:hidden}
.rz-scene{position:absolute;inset:0;perspective:1250px;perspective-origin:50% 46%;
          transform-style:preserve-3d}

/* Ankers op hun eigen scrollhoogte, zodat het voortgangsspoor links een echte
   link kan zijn in plaats van een stip die alleen kijkt. Nul afmeting, geen
   invloed op de layout. */
.rz-anker{position:absolute;left:0;width:1px;height:1px;overflow:hidden}

/* ⚠️ Hier stond een eigen raster. Eruit gehaald op 26-08 na de eerste opnames:
   de site heeft al een wereld — het canvas van `reis3d.js`, een vaste laag achter
   de héle pagina. Twee werelden over elkaar leest als ruis, en dat is precies de
   fout die op 23-08 al een ronde kostte (twee metaforen die om dezelfde ruimte
   vechten). REISPLAN §1 zegt het ook: het canvas BLIJFT de wereld waar je
   doorheen reist.
   Wat er wel gebeurt: de bestaande wereld DUNT UIT zodra de dienstbeelden komen
   en komt terug bij de stappen (besluit 25-08, vraag 1). De planner schrijft
   --wdim; de wereld zelf blijft van reis3d.js. */
.wereld{opacity:var(--wdim,1);transition:opacity .25s linear}

/* ── een blok ───────────────────────────────────────────────────────────── */
.rb{position:absolute;inset:0;display:grid;place-items:center;
    transform-style:preserve-3d;backface-visibility:hidden;
    will-change:transform,opacity;opacity:0}
/* ⚠️ 02-09-2026, Lenny: *"de achtergrond hiervan is heel droog en kaal."* Gemeten
   op één reisscherm: **72,4 % bijna wit**, de bovenste 20 % en de band op 80-90 %
   voor 100 % leeg. De oorzaak is niet de achtergrond maar het BLOK — 1180 px in
   een venster van 1440, verticaal gecentreerd, met een beeldgroep die maar de
   halve rechterkolom gebruikt. Er is dus niets om te vullen; het blok is te klein
   voor het scherm.
   ⛔ Wat hier NIET terugkomt: de wereld met de cirkels en vlakken (Lenny 26-08:
   "superlelijk") en het voortgangsspoor links (idem: "die puntjes kunnen weg").
   De leegte wordt opgelost met de inhoud die er al is, groter en beter verdeeld. */
.rb-in{width:min(1460px,92vw);display:grid;grid-template-columns:.78fr 1.22fr;
       gap:clamp(34px,4.4vw,80px);align-items:center;transform-style:preserve-3d}
.rb-tekst .rb-in,.rb-breed .rb-in{grid-template-columns:1fr}
.rb-tekst .rb-in{max-width:820px}

.rb-nr{display:block;color:var(--mut);margin-bottom:16px}
/* Het etappenummer groot achter de tekst. Dit is structuur en geen versiering:
   het zegt waar je in de reis bent, en het is dezelfde taal als de rest van de
   site — typografie, geen vormen. Zo licht dat het nooit met de tekst vecht;
   `aria-hidden` want het nummer staat al leesbaar in `.rb-nr`. */
.rb-txt{position:relative}
.rb-groot{position:absolute;left:-.06em;top:50%;transform:translateY(-56%);
  z-index:-1;pointer-events:none;font-family:var(--disp);font-weight:300;
  font-size:clamp(180px,26vw,380px);line-height:.8;letter-spacing:-.05em;
  color:var(--rb-cijfer);font-variant-numeric:tabular-nums}
.rb-txt h2{font-family:var(--disp);font-size:clamp(30px,3.6vw,52px);font-weight:300;
           letter-spacing:-.03em;line-height:1.06;margin:0 0 16px;text-wrap:balance}
.rb-txt p{font-size:var(--fs-lead);line-height:1.5;color:var(--ink3);margin:0;max-width:34ch}
.rb-tekst .rb-txt p,.rb-breed .rb-txt p{max-width:62ch}
.rb-ruim .rb-txt h2{font-size:clamp(34px,4.2vw,60px)}

/* de drie kleinere diensten samen in één blok (besluit 25-08, vraag 3) */
.rb-trio{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.rb-trio li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;
            padding-top:14px;border-top:1px solid var(--line)}
.rb-trio .mono{color:var(--mut);padding-top:4px}
.rb-trio b{font-size:var(--fs-lead);font-weight:500;letter-spacing:-.01em}
.rb-trio i{grid-column:2;font-style:normal;font-size:var(--fs-ui);line-height:1.5;color:var(--ink3);
           margin-top:8px}

/* ── beeld ──────────────────────────────────────────────────────────────────
   De beelden hangen op hun eigen diepte: ze reizen mee, maar niet als één plat
   vlak.  height:auto is hier GEEN opsmuk — een <img> met een height-attribuut
   houdt die hoogte als presentatie-hint zodra je in CSS alleen width zet.
   (gemeten: 833 px waar 213 hoorde) */
.rb-bld{position:relative;transform-style:preserve-3d;aspect-ratio:4/3;
        width:100%;max-height:76svh}
.rb-im,.rb-vlak{position:absolute;height:auto;border-radius:8px;display:block;
                transform:translateZ(var(--z)) rotateY(var(--rot))}

/* Beeld: scherp, met een haarlijn en een diepe schaduw. Exact zoals de proefpagina
   van 25-08 het deed — dáár kwam de rijkdom van die reis vandaan.

   ⚠️ Hier stond de augen-behandeling op sterkte zacht, want §7 zegt "op élke foto,
   ook op onze schermafdrukken". Op een schermafdruk werkt dat niet: het masker
   vreet de onderste 32% weg, en daar staat juist de inhoud. Het beeld-lab
   waarschuwt daar zelf voor (`_lab-beeld/lab.py` r.155: *"zacht of uit op de
   schermafdrukken — die moeten leesbaar blijven"*). Gemeten 26-08: de vijf
   dienstblokken werden er vaal en half-afgesneden van.
   Zodra de definitieve dienstbeelden er zijn — foto's van het vák, geen
   schermafdrukken — kan `.rb-im.zacht` er weer overheen. De regel staat klaar. */
/* ⚠️ Gemeten 02-09: tien van de vijftien dienstbeelden hebben een helderheid van
   190-246 en zes bestaan voor 69-100% uit bijna-witte pixels. Op een witte pagina
   verdwijnt zo'n kaart in de achtergrond — dát is waar "bland" vandaan komt, niet
   uit een gebrek aan beweging. De rand is daarom van .13 naar .20 en de schaduw
   iets dichter bij de kaart. */
.rb-im{border:1px solid var(--rb-rand);
       box-shadow:var(--rb-schaduw);
       object-fit:cover;background:var(--paper)}
.rb-im.zacht{filter:grayscale(.35) contrast(1.06) brightness(1.02);
       -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 68%,transparent 100%),
                          linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
       mask-image:linear-gradient(to bottom,#000 0%,#000 68%,transparent 100%),
                  linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
       -webkit-mask-composite:source-in;mask-composite:intersect}

/* Tijdelijke plek voor het definitieve dienstbeeld. Bewust een leeg vlak en géén
   willekeurige foto: dan beoordeel je de bewéging, en niet per ongeluk een beeld
   dat er toch niet komt. (les 15-08: zeven zelfgekozen dienstfoto's afgekeurd) */
.rb-vlak{background:var(--paper3);border:1px dashed var(--line);
         display:grid;place-items:center}
.rb-vlak span{font:500 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
              color:var(--mut);padding:0 10px;text-align:center}

/* Twee concrete punten onder de zin. Klein, met een terracotta streepje ervoor
   — dat is de rol van het accent in deze huisstijl: een streep, geen vlak. */
.rb-pt{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px;max-width:34ch}
.rb-pt li{position:relative;padding-left:20px;font-size:var(--fs-ui);line-height:1.5;
  color:var(--ink3)}
.rb-pt li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:1px;
  background:var(--ac)}
.rb-pt strong{font-weight:500;color:var(--ink)}

/* ── de kaarten reageren op de muis (wens Lenny, 02-09) ────────────────────
   ⚠️ De transform MOET de bestaande diepte meenemen: `.rb-im` staat al op
   `translateZ(var(--z)) rotateY(var(--rot))`. Vervangen laat de kaart uit de
   scène springen; daarom `calc()` op de z — hij komt naar je toe in dezelfde
   ruimte. Alleen transform, schaduw en randkleur: geen layout, geen filter.
   ⭐ Gemeten waarom dit nodig was: tien van de vijftien dienstbeelden hebben een
   helderheid van 190-246 en zes bestaan voor 69-100% uit bijna-witte pixels. Op
   een witte pagina staat er dan bijna niets. Een steviger rand en een diepere
   schaduw doen daar meer voor dan welke animatie ook. */
.rb-im{transition:transform .42s cubic-bezier(.2,.7,.2,1),
                  box-shadow .42s cubic-bezier(.2,.7,.2,1),
                  border-color .3s ease}
@media(hover:hover) and (pointer:fine){
  .rb-bld:hover .rb-im{box-shadow:0 20px 44px -30px rgba(12,12,14,.34)}
  .rb-im:hover{transform:translateZ(calc(var(--z) + 46px)) rotateY(var(--rot));
    box-shadow:var(--rb-schaduw-h);border-color:var(--ac);z-index:4}
}
@media(prefers-reduced-motion:reduce){.rb-im{transition:none}}

/* Het merk linksboven in de reis (wens Lenny, 02-09). Zit in dezelfde vaste laag
   als de teller en verschijnt en verdwijnt daarmee. */
.rz-merk{display:flex;align-items:center;gap:9px}
.rz-merk img{height:22px;width:auto;display:block}
.rz-merk b{font-weight:500;font-size:13px;letter-spacing:-.01em;color:var(--ink)}

.rb-bld3 .rb-im,.rb-bld3 .rb-vlak{}
/* De groep is uitgespreid: de bovenste kaart loopt tot voorbij de rechterrand, de
   onderste begint links van de kolom. Daarmee vult het beeld de hoogte én raakt het
   de rand van het scherm — dat is wat de leegte wegneemt. */
.rb-bld3 .rb-b0{width:78%;top:-4%;right:-7%;aspect-ratio:16/10}
.rb-bld3 .rb-b1{width:60%;bottom:-2%;left:-9%;aspect-ratio:16/10}
.rb-bld3 .rb-b2{width:44%;bottom:22%;right:11%;aspect-ratio:4/3}
.rb-bld2 .rb-b0{width:80%;top:-2%;right:-7%;aspect-ratio:16/10}
.rb-bld2 .rb-b1{width:58%;bottom:-2%;left:-9%;aspect-ratio:16/10}
.rb-bld1 .rb-b0{width:100%;top:4%;right:-7%;aspect-ratio:16/10}

/* ── cases · het lucerra-model ──────────────────────────────────────────────
   Bij lucerra is de middelste kolom de KLANTNAAM en die draagt het geheel.
   Ons werk is anoniem, dus daar staat het SOORT BEDRIJF (besluit 25-08 §7). */
.rb-case .rb-in{grid-template-columns:1fr 1.05fr}
.rb-cs{display:grid;grid-template-columns:auto 1fr auto;gap:0 18px;align-items:baseline;
       padding-top:14px;border-top:1px solid var(--line);margin-top:16px}
.rb-cs .mono{color:var(--mut)}
.rb-cs b{font-size:var(--fs-ui);font-weight:500;letter-spacing:-.01em}
.rb-cs em{font-style:normal;font-size:var(--fs-micro);color:var(--mut);white-space:nowrap}
.rb-cf{display:flex;flex-wrap:wrap;gap:22px 34px;margin-top:24px}
.rb-cf div{display:grid;gap:3px}
.rb-cf b{font-family:var(--disp);font-size:clamp(24px,2.6vw,34px);font-weight:300;
         letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.rb-cf span{font:500 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
            color:var(--mut)}

/* ── waarom bij ons · de cijferwand ─────────────────────────────────────── */
.rb-rdn{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 34px;margin:0;padding:0;
        list-style:none}
.rb-rdn li{display:grid;gap:6px;padding-top:14px;border-top:1px solid var(--line)}
.rb-rdn b{font-family:var(--disp);font-size:clamp(26px,3vw,40px);font-weight:300;
          letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.rb-rdn i{font-style:normal;font-size:var(--fs-micro);color:var(--mut)}
.rb-rdn p{font-size:var(--fs-ui);line-height:1.55;color:var(--ink3);margin:8px 0 0;max-width:38ch}

/* ── klanten ────────────────────────────────────────────────────────────────
   ⛔ Zolang QUOTES_ECHT False is draagt élke kaart een zichtbaar merkteken.
   Een ongelabelde voorbeeldreview op een live site is EU-zwartelijst-materiaal,
   en dat halen we bij klanten juist weg. */
.rb-q{display:grid;gap:18px}
.rb-q blockquote{margin:0;font-family:var(--disp);font-size:clamp(21px,2.4vw,31px);
                 font-weight:300;line-height:1.28;letter-spacing:-.02em;text-wrap:balance}
.rb-q figcaption{font-size:var(--fs-ui);color:var(--mut)}
.rb-merk{display:inline-block;font:500 10px/1 var(--sans);letter-spacing:.14em;
         text-transform:uppercase;color:var(--ink2);border:1px solid var(--line);
         border-radius:999px;padding:6px 10px;background:var(--paper2)}

/* ── vragen ─────────────────────────────────────────────────────────────── */
.rb-vr{display:grid;gap:0;margin:0;padding:0;list-style:none}
.rb-vr li{padding:13px 0;border-top:1px solid var(--line);display:grid;gap:5px}
.rb-vr b{font-size:var(--fs-ui);font-weight:500;letter-spacing:-.01em}
.rb-vr span{font-size:var(--fs-micro);line-height:1.55;color:var(--ink3)}

/* ═══ aandacht ═════════════════════════════════════════════════════════════
   Alle drie de vaste elementen bestaan alleen zolang de reis in beeld is; de
   planner zet data-reis op <html>. Anders staan ze over de hero en over de
   landing heen, en dat is precies de bedekte-knoppen-fout van 19-08. */
.tel,.cue{opacity:0;visibility:hidden;transition:opacity .3s}
html[data-reis="1"] .tel,html[data-reis="1"] .cue{opacity:1;visibility:visible}

/* stapteller — rechtsonder, telt de blokken */
/* ⚠️ 02-09: de teller stond rechtsONDER. Lenny wil het beeldmerk LINKSBOVEN in
   de reis; die twee horen bij elkaar (waar ben ik, en van wie is dit), dus het is
   één laag geworden in plaats van twee. Boven de kopbalk uit kan niet — die staat
   gecentreerd en `.tel` staat links, dus ze raken elkaar niet tot 1180 px, en
   onder 900 px staat `.tel` toch al uit. */
.tel{position:fixed;left:clamp(14px,2vw,26px);top:clamp(16px,2vw,24px);z-index:70;
     display:flex;align-items:center;gap:14px;pointer-events:none;
     font:500 13px/1 var(--sans);color:var(--mut);letter-spacing:.06em}
.tel .nu,.tel .tot,.tel > span{align-self:baseline}
.tel .nu{display:inline-block;min-width:1.6em;text-align:right;color:var(--ink);
         font-family:var(--disp);font-size:var(--fs-h3);font-weight:300;letter-spacing:-.02em;
         font-variant-numeric:tabular-nums}
.tel .nu span{display:block;animation:teltik .34s cubic-bezier(.2,.7,.2,1)}
@keyframes teltik{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:none}}

/* levende details — de scrollwenk onderaan, en een ademende streep bij het nummer */
.cue{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:69;
     display:grid;justify-items:center;gap:7px;pointer-events:none;
     font:500 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.cue u{display:block;width:1px;height:26px;background:var(--line);position:relative;
       text-decoration:none;overflow:hidden}
.cue u::after{content:"";position:absolute;inset:0;background:var(--ac);
              transform:translateY(-100%);animation:cueval 2.1s ease-in-out infinite}
@keyframes cueval{0%{transform:translateY(-100%)}55%{transform:translateY(100%)}
                  100%{transform:translateY(100%)}}
.rb-nr::after{content:"";display:inline-block;width:22px;height:1px;background:var(--ac);
              margin-left:10px;vertical-align:middle;transform-origin:left;
              animation:adem 3.4s ease-in-out infinite}
@keyframes adem{0%,100%{transform:scaleX(.35);opacity:.5}50%{transform:scaleX(1);opacity:1}}

/* kop woord voor woord — trekt de blik naar de tekst op het moment dat het
   blok stil komt te staan */
.rb-txt h2 w{display:inline-block;will-change:transform,opacity}
.rz .rb-txt h2 w{opacity:0;transform:translateY(.42em)}
.rz .rb.komt .rb-txt h2 w{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i) * 55ms)}

/* ── Waarom bij ons + Vragen in één vak ─────────────────────────────────────
   Stonden als twee losse reisblokken; samengevoegd op 26-08. Links de vier
   cijfers, rechts de vragen — twee antwoorden op dezelfde vraag, naast elkaar
   in plaats van twee schermen na elkaar. */
/* Zonder de vragenkolom krijgt de cijferwand de volle breedte; de vier
   redenen gaan dan naast elkaar in plaats van 2×2. */
.wv-alleen{grid-template-columns:1fr!important}
.wv-alleen .wv-rdn{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.wv-in{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,4vw,64px);
       align-items:start}
.wv-rdn{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 28px;margin:0;padding:0;
        list-style:none}
.wv-rdn li{display:grid;gap:5px;padding-top:14px;border-top:1px solid var(--line)}
.wv-rdn b{font-family:var(--disp);font-size:clamp(26px,3vw,40px);font-weight:300;
          letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.wv-rdn i{font-style:normal;font-size:var(--fs-micro);color:var(--mut)}
.wv-rdn p{font-size:var(--fs-ui);line-height:1.55;color:var(--ink3);margin:8px 0 0}
.wv-kop{margin:0 0 8px;font-size:var(--fs-ui);font-weight:500;letter-spacing:-.01em}
.wv-vr .rb-vr li{padding:12px 0}
@media(max-width:900px){
  .wv-in{grid-template-columns:1fr;gap:30px}
  .wv-rdn{grid-template-columns:1fr;gap:14px}
}

/* ── de landing ─────────────────────────────────────────────────────────────
   De reis eindigt hier en gaat over in gewone pagina: plat, scanbaar, zonder
   beweging. Bewust GEEN herhaling van de reis — dit is de pagina waar je iets
   kúnt, en de platte tekst die Google en de AI-tools daadwerkelijk lezen. */
.land-d{display:grid;gap:0;margin:0;padding:0;list-style:none}
.land-d li{border-top:1px solid var(--line)}
.land-d a{display:grid;grid-template-columns:auto 1fr auto;gap:0 18px;align-items:baseline;
          padding:16px 0;text-decoration:none;color:inherit}
/* ⚠️ Dit was `transition:padding-left` — een LAYOUT-eigenschap, dus per frame
   een herberekening, en dat is precies de regel van 16-08 (grep op
   transition:(width|height|padding|margin) hoort 0 op te leveren). De regel
   sliep zolang de samenvatting eruit stond; terugzetten maakte hem actief.
   Hetzelfde effect met transform, dat de layout niet raakt. */
.land-d a > *{transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.land-d a:hover > *,.land-d a:focus-visible > *{transform:translateX(10px)}
.land-d .mono{color:var(--mut)}
.land-d b{font-size:clamp(17px,1.5vw,20px);font-weight:500;letter-spacing:-.01em}
.land-d i{grid-column:2;font-style:normal;font-size:var(--fs-ui);line-height:1.5;color:var(--ink3)}
.land-d u{text-decoration:none;color:var(--mut);font-size:var(--fs-lead);line-height:1;
          transition:transform .2s,color .2s;display:inline-block}
.land-d a:hover u{transform:translateX(4px);color:var(--ac)}
.land-s{display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:ls}
.land-s li{display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:baseline;
           padding:13px 0;border-top:1px solid var(--line)}
.land-s .mono{color:var(--mut)}
.land-s b{font-size:var(--fs-ui);font-weight:500}
.land-s span{grid-column:2;font-size:var(--fs-ui);line-height:1.55;color:var(--ink3);margin-top:8px}

/* ── smal scherm ────────────────────────────────────────────────────────────
   Eén kolom, en het beeld onder de tekst in plaats van ernaast. De blokken
   blijven bewegen, maar er is minder zijwaartse ruimte om weg te gaan. */
@media(max-width:900px){
  .rb-in{grid-template-columns:1fr!important;gap:24px;width:88vw}
  .rb-bld{aspect-ratio:16/11}
  .rb-txt h2,.rb-ruim .rb-txt h2{font-size:clamp(26px,7vw,34px)}
  .rb-rdn{grid-template-columns:1fr;gap:16px}
  .rb-cf{gap:16px 26px}
  .rb-vr li{padding:10px 0}
  .rb-vr span{font-size:var(--fs-micro)}
  .tel{bottom:16px}
  .cue{display:none}          /* op touch scrollt iedereen al; wenk is ruis */
}

/* ── beweging uit ───────────────────────────────────────────────────────────
   Volledige stand: geen pinning, geen perspectief, alles gewoon onder elkaar.
   Dit is niet "de animatie uit" maar een leesbare pagina. */
@media (prefers-reduced-motion: reduce){
  .rz{height:auto!important}
  .rz-kleef{position:static;height:auto;overflow:visible}
  .rz-scene{position:static;perspective:none}
  .cue,.tel{display:none}
  .rb{position:static;opacity:1!important;transform:none!important;
      padding:52px 0;border-top:1px solid var(--line)}
  .rb-bld{aspect-ratio:auto;display:grid;gap:10px}
  .rb-im,.rb-vlak{position:static;width:100%!important;transform:none!important;
                  aspect-ratio:16/10}
  .rz .rb-txt h2 w{opacity:1!important;transform:none!important}
  .rb-nr::after{animation:none;transform:scaleX(1)}
}

/* ⚠️ De oplos-behandeling (`.zacht`) stond eerst op deze beelden. Fout: dat
   masker is gemaakt voor een DONKER onderwerp dat in het wit oplost, en dit is
   een witte serie op wit — het resultaat was bijna onzichtbaar. Zelfde fout als
   met de eerste hero-foto (helderheid 244, vrijwel leeg). Geen masker dus, wel
   een lichte rand zodat het vlak van het papier te onderscheiden is, en iets
   meer contrast zodat de vormen leesbaar worden. */
/* ⚠️ 02-09: deze regel overschreef de schaduw van `.rb-im` en droeg dus een
   tweede hardgecodeerde lichte-grond-waarde — op antraciet een zwarte schaduw op
   een zwarte grond. Nu dezelfde eigenschappen als `.rb-im`, zodat één omzetting
   telt. De `filter` blijft: die hoort bij de witte dienstserie zelf. */
.rb-im.dienstbeeld{
  border-radius:8px;
  box-shadow:var(--rb-schaduw);
  filter:grayscale(.18) contrast(1.12) brightness(.99)}

/* ── de aankomst: varianten "grens" en "gesprek" (31-08-2026) ────────────────
   Gedeelde lijstvorm voor beide: een kop met een regel eronder. Zelfde ritme
   als .land-s, zodat een wissel van variant geen ander ritme geeft.
   Bewust géén rood/groen bij Wel en Niet: het is een grens, geen oordeel — en
   rood zit niet in het palet. Het onderscheid zit in het label en de volgorde. */
.land-p{display:grid;gap:0;margin:0;padding:0;list-style:none}
.land-p li{padding:14px 0;border-top:1px solid var(--line)}
.land-p b{display:block;font-size:var(--fs-ui);font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.land-p span{display:block;margin-top:8px;font-size:var(--fs-ui);line-height:1.55;color:var(--ink3)}
.land-p-groot li{padding:18px 0}
.land-p-groot b{font-size:clamp(17px,1.5vw,20px)}
.land-p-groot span{font-size:var(--fs-ui);max-width:62ch}

.land-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px)}
.land-g-l{display:block;color:var(--mut);margin-bottom:8px}
.land-g-n .land-p b{color:var(--ink3)}

@media(max-width:900px){
  .land-g{grid-template-columns:1fr;gap:30px}
}

/* ── de aankomst: de drie attentievarianten (31-08-2026) ─────────────────────
   Onderzoek: inspiratie/RESEARCH-2026-08-31-aandacht-en-actie.md
   Von Restorff: ÉÉN afwijkend blok werkt, twee heffen elkaar op. De hele site is
   sinds 16-08 wit en heeft geen enkele donkere sectie meer — dit blok is dus
   maximaal afwijkend, en dat mag daarom precies één keer op de hele pagina.

   ⚠️ Alle kleuren hier staan EXPLICIET, geen enkele via een token dat elders
   omdraait. `b,strong{color:var(--ink)}` (styles.css r.1849) is op een donkere
   grond onzichtbaar; dat ging vandaag al een keer mis in het lab. En het groene
   accent haalt op bijna-zwart maar 3,7:1 — daar hoort de lichte tint. */
.aan-donker{background:#0f1012;color:#fff;padding:clamp(78px,10vw,148px) 0}
.aan-mid{text-align:center;max-width:820px}
.aan-groot{margin:0;font-size:clamp(38px,6.4vw,86px);line-height:1.02;font-weight:300;
  letter-spacing:-.03em;color:#fff}
.aan-groot span{color:#ff7a59}
.aan-lead{margin:clamp(16px,2.4vw,24px) auto 0;max-width:56ch;
  font-size:clamp(16px,1.5vw,20px);line-height:1.5;color:rgba(255,255,255,.78)}
.aan-klein{margin:16px 0 0;font-size:var(--fs-micro);color:rgba(255,255,255,.62)}

.aan-knop{display:inline-block;margin-top:clamp(24px,3vw,40px);background:#fff;color:#0f1012;
  text-decoration:none;border-radius:999px;padding:15px 30px;
  font:500 15px/1 var(--sans);letter-spacing:-.01em;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),background .2s}
.aan-knop:hover,.aan-knop:focus-visible{transform:translateY(-2px);background:#ff7a59}

/* het invulveld van de spiegel */
.aan-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin-top:clamp(24px,3vw,40px)}
.aan-form input{flex:1 1 340px;max-width:420px;background:#1d1e20;color:#fff;
  border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:15px 22px;
  font:400 16px/1 var(--sans)}
.aan-form input::placeholder{color:rgba(255,255,255,.55)}
.aan-form input:focus-visible{outline:2px solid #ff7a59;outline-offset:2px;
  border-color:transparent}
.aan-form button{background:#fff;color:#0f1012;border:0;border-radius:999px;
  padding:15px 26px;font:500 15px/1 var(--sans);cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),background .2s}
.aan-form button:hover{transform:translateY(-2px);background:#ff7a59}

.aan-uitslag{margin-top:clamp(24px,3vw,40px);text-align:left}
.aan-bezig{margin:0;text-align:center;color:rgba(255,255,255,.78);font-size:var(--fs-ui)}
.aan-bezig b{color:#fff}
.aan-merk{margin:0 0 16px;text-align:center;font:500 11px/1.4 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:#ff7a59}
.aan-rijen{display:grid;gap:0}
.aan-rijen > div{display:grid;grid-template-columns:1fr auto;gap:2px 18px;
  padding:14px 2px;border-top:1px solid rgba(255,255,255,.16)}
.aan-rijen span{font-size:var(--fs-ui);color:#fff}
.aan-rijen b{font-size:var(--fs-lead);font-weight:400;color:#ff7a59;text-align:right}
.aan-rijen i{grid-column:1/-1;font-style:normal;font-size:var(--fs-micro);
  color:rgba(255,255,255,.66)}
.aan-uitslag .aan-knop{display:block;width:fit-content;margin-inline:auto}

/* het beperkte aantal projecten — bewust een lichte, rustige mededeling */
.aan-getal{margin:0;font-size:clamp(19px,2vw,26px);font-weight:300;letter-spacing:-.02em}
.aan-getal b{font-weight:400;color:var(--ac)}
.aan-getal span{color:var(--ink3);font-size:clamp(15px,1.4vw,18px)}
.aan-invul{margin-top:16px;max-width:62ch}

@media(max-width:640px){
  .aan-form{flex-direction:column}
  .aan-form input,.aan-form button{width:100%;max-width:none}
  .aan-rijen b{text-align:left}
}
@media (prefers-reduced-motion: reduce){
  .aan-knop,.aan-form button{transition:none}
  .aan-knop:hover,.aan-form button:hover{transform:none}
}