/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
--ink:#0f1012; --ink2:#1d1e20; --mut:#6b6d72;
--paper:#ffffff; --paper2:#f2f2f4; --paper3:#e9e9ec;
--line:rgba(15,16,18,.13); --line-d:rgba(255,255,255,.15);
/* Accent wordt door de labbalk gezet; standaard = de huisstijl (HUISSTIJL.md,
01-09-2026). Terracotta is de TEKSTkleur op papier (5,46:1 op wit, 4,51:1 op
--paper3); koraal is op wit maar 2,57:1 en dus uitsluitend een vlak, een balk
of een lijn — én de tekstkleur op een donkere ondergrond (6,92:1 op #16181c). */
--ac:#bd3a42; --ac-lt:#ff7a59;
/* 28-09, Lenny: "die roze of zalm kleur behouden, geen goud, zwart is prima".
Zalm is op wit maar 2,57:1 → zalm is het VLAK (knop, stip, balk, lijn) met
zwarte letters erop (7,4:1); tekst op licht is de diepe roze #bd3a42 (5,3:1 op wit). */
--ac-vlak:#ff7a59; --ac-op:#16181c;
--ink3:#3a3c41; /* zachtere lopende tekst */
/* Switzer, zelf gehost. Besluit 16-08-2026: augen.pro's typografie overnemen.
⚠️ Hun font is PP Neue Montreal en dat is betaald (Pangram Pangram).
Switzer (Indian Type Foundry, gratis voor commercieel gebruik) komt uit
dezelfde neo-grotesk-familie en is in onze eigen referentie al aangewezen
als de eerlijke tegenhanger. Kopen kan later; dan is het deze ene regel.
Gemeten bij augen: gewicht 350, letterafstand −0,02em, regelhoogte 1,2.
350 bestaat niet in Switzer (geen variabele versie op Fontshare), dus
400 voor tekst en 300 voor groot type — dezelfde opbouw als zij. */
/* 21-08: Switzer -> Geist. Lenny wil augens letter, en dat is PP Neue
Montreal Book 350 (Pangram Pangram, vanaf $40). Van vijf gratis
kandidaten naast augens eigen tekst gezet, komt Geist het dichtst: even
smal, rechte afsluitingen, dezelfde compacte B/a/y. Switzer is breder en
ronder. Geist is variabel 100-900 in één bestand van 29 kB.
Terug of naar iets anders: de labbalk heeft alle vijf. */
--sans:'Geist','Switzer',-apple-system,BlinkMacSystemFont,'Helvetica Neue',
system-ui,sans-serif;
--gut:5.13vw;
--maxw:1560px;
/* ── typografische schaal ────────────────────────────────────────────────
Zeven stappen, en verder niets. Er stonden er 19, waarvan zes binnen 4 px
van elkaar — dat leest niet als hiërarchie maar als ruis. Wie een achtste
maat nodig heeft, heeft waarschijnlijk een bestaande rol nodig.
16 px blijft bestaan voor invoervelden: daaronder zoomt iOS bij elke tik. */
--fs-display:clamp(40px,6vw,84px);
--fs-h2:clamp(30px,3.2vw,46px);
--fs-h3:clamp(22px,2vw,26px);
--fs-lead:clamp(18px,1.6vw,20px);
--fs-basis:17px;
--fs-ui:15px;
--fs-micro:12px;
/* ── ritme ───────────────────────────────────────────────────────────────
Drie afstanden in plaats van één. Elke sectie evenveel lucht geven maakt
alles even belangrijk, en dus niets. */
--ruimte-groot:clamp(96px,10vw,148px);
--ruimte-midden:clamp(56px,5.5vw,88px);
--ruimte-klein:clamp(28px,2.6vw,40px);
}
/* Alle vijf de standen hebben een eigen regel, ook de standaard — anders
maakt de knop van de vorige standaard het attribuut leeg en val je terug
op :root in plaats van op die letter. (21-08, na de wissel naar Geist.) */
html[data-font="switzer"]{--sans:'Switzer','Helvetica Neue',Arial,sans-serif}
html[data-font="systeem"]{--sans:-apple-system,BlinkMacSystemFont,'SF Pro Text',
'SF Pro Display',system-ui,sans-serif}
html[data-font="general"]{--sans:'General Sans','Helvetica Neue',Arial,sans-serif}
/* 21-08: kandidaten om Switzer te vervangen. Lenny wil augens letter, en dat
is PP Neue Montreal (Book 350 + Light 300, Pangram Pangram, vanaf $40).
Deze drie zijn gratis en komen uit dezelfde neo-grotesk-hoek. */
html[data-font="geist"]{--sans:'Geist','Helvetica Neue',Arial,sans-serif}
html[data-font="instrument"]{--sans:'Instrument Sans','Helvetica Neue',Arial,sans-serif}
html[data-font="inter"]{--sans:'Inter','Helvetica Neue',Arial,sans-serif}
/* 25-08: Clash Grotesk, aangewezen door Lenny na sensiq.co. Twee teststanden,
want dat zijn twee verschillende vragen:
data-font="clash" = Clash Grotesk OVERAL, ook de lopende tekst
data-kop="clash" = alleen de KOPPEN, tekst blijft staan — dat is hoe sensiq
het doet (Clash Grotesk kop + Inter Display tekst)
Clash Grotesk heeft geen gewicht 350, dus de displaykoppen gaan naar 400/500;
op 350 zou de browser zelf gaan interpoleren en dat oogt slap. */
html[data-font="clash"]{--sans:'Clash Grotesk','Helvetica Neue',Arial,sans-serif}
html[data-kop="clash"]{--disp:'Clash Grotesk','Helvetica Neue',Arial,sans-serif}
html[data-kop="clash"] .display{font-weight:500;letter-spacing:-.025em}
html[data-kop="clash"] .h2{font-weight:500;letter-spacing:-.024em}
html[data-font="clash"] .display,html[data-font="clash"] .h2{font-weight:500}
/* ══ ÉÉN THEMA: WIT ═════════════════════════════════════════════════════════
Hier stond een compleet tweede (donker) thema dat de systeemvoorkeur
volgde. Eruit op 16-08-2026: de site is wit. Op een Mac die op donker
staat kreeg je anders een zwarte site, en dat was precies wat weg moest.
De volledige oude versie staat in _backup-wit-0816/ — daar komt hij
vandaan als het ooit terug moet. Bijkomend voordeel: de token-val van
een omgekeerde band (--ink dat de achtergrond ís) bestaat niet meer. */
/* ── basis ──────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;background:var(--paper);color:var(--ink);
/* −0,02em is augen.pro's waarde, en zij zetten hem op ALLES — ook op lopende
tekst van 16 px, waar wij `normal` hadden staan. Gemeten: 16px→−0,32px,
27px→−0,54px, 12px→−0,24px, alle drie exact −0,02em.
⚠️ Hun regelhoogte van 1,2 is bewust NIET overgenomen. Augen zet er korte
statements en labels in; onze antwoorden zijn alinea's van drie zinnen in
het Nederlands, en 1,2 maakt die slecht leesbaar. Koppen staan wel strak. */
font-family:var(--sans);font-size:var(--fs-basis);font-weight:400;
letter-spacing:-.02em;
line-height:1.55;letter-spacing:-.011em;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
::selection{background:var(--ac-vlak);color:var(--ac-op)}
/* ── layout ─────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.block{padding:var(--ruimte-groot) 0}
/* Het cijferblok mag landen, de afsluiter juist niet: daar wil je een
besluit, geen adempauze. */
.block.ruim{padding:calc(var(--ruimte-groot) * 1.3) 0}
.block.ctaband{padding:var(--ruimte-midden) 0}
section[id]{scroll-margin-top:64px}
.b-paper{background:var(--paper)}
.b-paper2{background:var(--paper2)}
/* ⚠️ `.b-ink` WAS de zwarte band tussen witte blokken. De site is sinds
16-08 helemaal wit, dus hij is nu een gewoon wit vlak met een haarlijn
erboven — anders zie je niet meer waar de ene sectie ophoudt.
De naam blijft staan omdat hij op elf plekken in bouw.py gebruikt wordt;
hernoemen is een aparte ronde. */
.b-ink{background:var(--paper);color:var(--ink);
border-top:1px solid var(--line)}
.b-ink .lbl b{color:var(--ink)}
/* twee kolommen: labelpaar links, inhoud rechts */
.cols{display:grid;grid-template-columns:minmax(150px,1.5fr) 6fr;gap:clamp(24px,4vw,72px)}
.lbl{font-size:var(--fs-ui);line-height:1.25;letter-spacing:-.02em;color:var(--mut);font-weight:400}
.lbl b{display:block;color:var(--ink);font-weight:400}
.rule{height:1px;background:var(--line);border:0;margin:0}
/* ── type ───────────────────────────────────────────────────────────────── */
.display{font-weight:300;letter-spacing:-.028em;line-height:1.08;
font-size:var(--fs-display)}
.h2{font-weight:300;letter-spacing:-.024em;line-height:1.14;
font-size:var(--fs-h2)}
.h3{font-weight:400;letter-spacing:-.018em;line-height:1.22;font-size:var(--fs-h3)}
.lead{font-size:var(--fs-lead);line-height:1.48;letter-spacing:-.012em;max-width:34em}
.mut{color:var(--mut)}
.ac{color:var(--ac)}
.small{font-size:var(--fs-ui);line-height:1.45;letter-spacing:-.01em}
/* ── nav ────────────────────────────────────────────────────────────────── */
/* De pil is 335 px breed en staat midden boven de tekstkolom: bij scrollen
liepen 26 tekstregels eronder door. Hij schuift nu weg zodra je naar
beneden leest en komt terug zodra je omhoog gaat. */
header{transition:transform .28s cubic-bezier(.4,0,.2,1)}
body.nav-weg header{transform:translateY(-140%)}
@media(prefers-reduced-motion:reduce){body.nav-weg header{transform:none}}
header{position:fixed;inset:14px 0 auto 0;z-index:60;display:flex;justify-content:center;
pointer-events:none}
.navbar{pointer-events:auto;display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px)}
/* ⚠️ 02-09-2026: hier zat een zwarte CIRKEL van 44 px om het beeldmerk, met het
logo omgekeerd naar wit erin. Lenny: *"in de hero is er een zwart bolletje om
ons logo, haal dat weg."* De cirkel bestond omdat één bestand twee ondergronden
moet dienen: de hero is donker, de rest van de site wit. Opgelost met de stand
in plaats van met een vorm — `body.op-donker` (site.js zet hem zolang de kopbalk
over de hero staat) keert het logo om. Geen cirkel meer, op geen van beide. */
.mark{flex:none;display:grid;place-items:center;padding:0 2px;
transition:opacity .25s ease}
.mark:hover{opacity:.62}
/* Het beeldmerk gaat vóór de naam (HUISSTIJL.md §3, instructie 01-09-2026).
merk.webp is zwart lijnwerk op transparant; de cirkel is --ink, dus omkeren.
⚠️ width:auto is verplicht — een en staan browser-breed op `bold`. Er staan er 108 in de
pagina's, vooral als sectielabel en als nadruk in de dienstenlijsten.
Nadruk komt hier van de KLEUR, niet van het gewicht — dezelfde keuze die
augen maakt. */
b,strong{font-weight:400;color:var(--ink)}
/* De labels in de linkerkolom zijn geen nadruk maar een kop; die blijven op
het basisgewicht en onderscheiden zich door hun plaats. */
.lbl b{font-weight:350}
/* Knoppen en navigatie: ook 350, anders steken ze alsnog uit. */
.btn,.pill a,.mark,.hr-halte b{font-weight:350}
/* Knopelementen erven het lettertype van de browser, niet van body — dus
`font:inherit` op alles wat een of op de site — ook deze, waar de li geen zin is
maar een rij in een tabelachtige lijst. Gemeten op 2560 px: li 764 px breed
(68ch) binnen een ul van 1297 px, waardoor de regels links uitgelijnd oogden
tegenover een gecentreerde preview erboven. Een kale elementkiezer die je
nergens verwacht; grep bij zo'n uitlijningsklacht op `li{` in styles.css. */
.cl-lijst{list-style:none;margin:0;padding:0}
.cl-lijst li{max-width:none}
/* ⚠️ `width:100%` is hier geen opmaakdetail. Een neemt de breedte van
zijn INHOUD, ook met `display:grid` — de regels liepen daardoor tot 1090 px
terwijl de preview erboven tot 1660 px doorliep, en dan oogt de lijst links
uitgelijnd tegenover een gecentreerde preview. Gemeten op 2560 px, gevonden
door een rand om beide te tekenen: de container stond wél goed (631-1929),
alleen de knoppen erin niet. Zelfde familie als "een button laat blok-kinderen
niet uitrekken" (DCSS, 04-08). */
.cl-lijst button{width:100%;display:grid;grid-template-columns:52px 1fr auto;align-items:baseline;
gap:clamp(16px,2vw,28px);background:none;border:0;position:relative;
border-top:1px solid var(--line);padding:16px 2px;text-align:left;cursor:pointer;
font-family:inherit;color:var(--mut);transition:color .28s}
.cl-lijst li:last-child button{border-bottom:1px solid var(--line)}
/* ⭐ 15-09: de aangewezen regel was ALLEEN een kleurverschil (grijs -> wit).
Technisch werkte de wissel — gemeten: preview volgt, aria-current klopt —
maar Lenny zag het niet: *"als ik eroverheen ga, zie ik niet dat het
aanpast."* Terecht, want de preview staat ver boven je muisaanwijzer en op
de regel zelf gebeurt niets. Nu drie signalen tegelijk, allemaal op de regel
waar de muis staat: een accentstreep die opengroeit, de regel die opschuift,
en het nummer plus het label in de accentkleur.
⛔ Alleen transform, opacity en color — geen enkele layout-eigenschap
(de jank-regel van 16-08). */
.cl-lijst button::before{content:"";position:absolute;left:-14px;top:14px;bottom:14px;
width:2px;background:var(--ac-vlak);transform:scaleY(0);transform-origin:50% 0;
transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.cl-lijst button[aria-current]{color:var(--ink)}
.cl-lijst button[aria-current]::before{transform:scaleY(1)}
.cl-lijst button > *{transition:transform .3s cubic-bezier(.2,.7,.2,1),color .28s}
.cl-lijst button[aria-current] > *{transform:translateX(7px)}
.cl-lijst button[aria-current] .cl-nr,
.cl-lijst button[aria-current] .cl-tp{color:var(--ac)}
@media (prefers-reduced-motion: reduce){
.cl-lijst button::before{transition:none}
.cl-lijst button > *{transition:color .28s}
.cl-lijst button[aria-current] > *{transform:none}
}
.cl-lijst button:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.cl-nr{font-size:var(--fs-micro);letter-spacing:.06em;color:inherit}
.cl-m{font-size:clamp(17px,1.55vw,22px);font-weight:400;letter-spacing:-.012em;color:inherit}
.cl-m i{font-style:normal;color:var(--mut);font-size:.78em}
.cl-tp{font-size:var(--fs-micro);letter-spacing:.06em;text-align:right;color:inherit;white-space:nowrap}
.cl-mob,.cl-mobtxt{display:none}
/* Smal scherm: hover bestaat niet, dus geen inhoud erachter verstoppen.
De preview vervalt en elke regel draagt zijn eigen beeld. */
@media(max-width:820px){
.cl-pvs{display:none}
.cl-lijst button{grid-template-columns:44px 1fr;gap:4px 14px;padding:20px 2px 24px;
color:var(--ink)}
.cl-tp{grid-column:2;text-align:left;color:var(--mut)}
.cl-mob{display:block;grid-column:1/-1;margin-top:16px}
.cl-mob img{display:block;width:100%;height:auto;border-radius:8px;
border:1px solid var(--line)}
.cl-mob .cl-pv-t{width:100%;min-height:0;padding:30px 20px;gap:18px}
.cl-mob .cl-pv-cf b{font-size:var(--fs-h3)}
.cl-mobtxt{display:block;grid-column:1/-1;margin-top:16px}
.cl-mobtxt b{display:block;font-size:var(--fs-basis);font-weight:400;letter-spacing:-.012em;
color:var(--ink)}
.cl-mobtxt span{display:block;margin-top:8px;font-size:var(--fs-ui);line-height:1.55;
color:var(--mut)}
}
@media(prefers-reduced-motion:reduce){.cl-pv{transition:none}}
/* ── Case 02: diavoorstelling (16-09-2026) ────────────────────────────────────
Beelden in één grid-cel, wisselen met opacity. Alleen opacity animeert. */
.cl-slides{display:grid;position:relative}
.cl-slides img{grid-area:1/1;display:block;width:100%;height:auto;border-radius:8px;
border:1px solid var(--line);opacity:0;transition:opacity .9s cubic-bezier(.4,0,.2,1)}
.cl-pv-b .cl-slides img{box-shadow:0 34px 76px -44px rgba(15,16,18,.55)}
.cl-slides img[data-aan]{opacity:1}
.cl-slides-lbl{position:absolute;top:12px;left:12px;z-index:1;padding:5px 10px;border-radius:999px;
font:500 10px/1 var(--mono,var(--sans));letter-spacing:.12em;text-transform:uppercase;
background:rgba(15,16,18,.72);color:#f2f4f6}
.cl-slides-pt{position:absolute;left:0;right:0;bottom:12px;z-index:1;display:flex;gap:6px;justify-content:center}
.cl-slides-pt i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);
transition:transform .3s ease,background-color .3s ease}
.cl-slides-pt i[data-aan]{background:#fff;transform:scale(1.25)}
@media(prefers-reduced-motion:reduce){.cl-slides img{transition:none}}
/* ── Case 03: automatisering als animatie (16-09-2026) ───────────────────────
Drie kolommen: aanvragen → agent → jij keurt goed. Eén lus van 7 s, alleen
transform / opacity / stroke-dashoffset. Tokens, geen hardgecodeerde kleuren:
op elke grond leesbaar. ⚠️ Geen var(--ink) als achtergrond (zesde keer). */
.cl-pv-anim{gap:clamp(14px,1.8vw,22px)}
.ha{display:grid;width:100%;max-width:640px;align-items:center;
grid-template-columns:1.15fr .55fr auto .55fr 1.15fr;grid-template-rows:auto auto;
row-gap:clamp(16px,2vw,26px)}
.ha-lbl{grid-row:1;justify-self:center;font:500 10px/1 var(--mono,var(--sans));
letter-spacing:.14em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.ha-l1{grid-column:1}.ha-l2{grid-column:2/5}.ha-l3{grid-column:5}
.ha-in{grid-row:2;grid-column:1;display:flex;flex-direction:column;gap:8px}
.ha-doc{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:6px;
border:1px solid var(--line);opacity:.5;animation:ha-doc 7s ease-in-out infinite}
.ha-doc:nth-child(2){margin-left:14px;animation-delay:.35s}
.ha-doc:nth-child(3){animation-delay:.7s}
.ha-doc i,.ha-res i{display:block;height:4px;border-radius:2px;background:var(--mut);opacity:.45}
.ha-doc em{font:500 9px/1 var(--mono,var(--sans));font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.ha-doc i:nth-of-type(1){width:80%}.ha-doc i:nth-of-type(2){width:58%}
.ha-lijn{grid-row:2;position:relative;height:2px;
background:repeating-linear-gradient(90deg,var(--line) 0 5px,transparent 5px 10px)}
.ha-a{grid-column:2}.ha-b{grid-column:4}
/* De stip zelf is ::before; `b` is zo breed als de lijn, zodat translateX(100%)
precies de lijnlengte is op elke breedte. */
.ha-lijn b{position:absolute;inset:0;opacity:0}
.ha-lijn b::before{content:"";position:absolute;left:0;top:50%;width:9px;height:9px;
margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--ac-vlak)}
.ha-a b{animation:ha-stip-a 7s cubic-bezier(.45,0,.3,1) infinite}
.ha-b b{animation:ha-stip-b 7s cubic-bezier(.45,0,.3,1) infinite}
.ha-box{grid-row:2;grid-column:3;position:relative;display:grid;place-items:center;
width:clamp(78px,7.6vw,104px);aspect-ratio:1;border-radius:10px;
border:2px solid var(--ac);color:var(--ink);animation:ha-box 7s ease-in-out infinite}
.ha-agent{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.ha-agent b{font:600 clamp(13px,1.15vw,16px)/1 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.ha-agent small{font:500 9px/1.1 var(--mono,var(--sans));letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.ha-status{width:7px;height:7px;border-radius:50%;background:var(--ac-vlak);margin-bottom:3px;
animation:ha-puls 1.6s ease-in-out infinite}
@keyframes ha-puls{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.ha-box::after{content:"";position:absolute;inset:-8px;border-radius:14px;
border:1px solid var(--ac);opacity:0;animation:ha-ring 7s ease-out infinite}
.ha-uit{grid-row:2;grid-column:5;display:flex;justify-content:center}
.ha-res{position:relative;display:flex;flex-direction:column;gap:6px;width:100%;
padding:12px 34px 12px 12px;border-radius:6px;border:1px solid var(--line);
border-left:3px solid var(--ac);opacity:0;animation:ha-res 7s ease-out infinite}
.ha-res i:nth-child(1){width:78%}.ha-res i:nth-child(2){width:52%}
.ha-res svg{position:absolute;right:10px;top:50%;width:18px;height:18px;margin-top:-9px;
fill:none;stroke:var(--ac);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:24;stroke-dashoffset:24;animation:ha-vink 7s ease-out infinite}
@keyframes ha-doc{0%,4%{opacity:.5;transform:none}10%,22%{opacity:1;transform:translateX(4px)}
30%,100%{opacity:.5;transform:none}}
@keyframes ha-stip-a{0%,24%{opacity:0;transform:translateX(0)}27%{opacity:1}
40%{opacity:1;transform:translateX(100%)}43%,100%{opacity:0;transform:translateX(100%)}}
@keyframes ha-stip-b{0%,55%{opacity:0;transform:translateX(0)}58%{opacity:1}
70%{opacity:1;transform:translateX(100%)}73%,100%{opacity:0;transform:translateX(100%)}}
@keyframes ha-box{0%,40%{transform:scale(1)}46%{transform:scale(1.07)}54%,100%{transform:scale(1)}}
@keyframes ha-ring{0%,41%{opacity:0;transform:scale(.92)}47%{opacity:.8}60%,100%{opacity:0;transform:scale(1.15)}}
@keyframes ha-res{0%,70%{opacity:0;transform:translateY(8px)}76%,94%{opacity:1;transform:none}
100%{opacity:0;transform:none}}
@keyframes ha-vink{0%,76%{stroke-dashoffset:24}84%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
/* Niet zichtbaar = niet animeren. */
.cl-pvs .cl-pv:not([data-aan]) .ha *,.cl-pvs .cl-pv:not([data-aan]) .ha *::after{animation-play-state:paused}
@media(max-width:560px){.ha{grid-template-columns:1fr .4fr auto .4fr 1fr}
.ha-lbl{font-size:9px;letter-spacing:.08em;white-space:normal;text-align:center}
.ha-doc,.ha-res{padding:8px}.ha-res{padding-right:26px}}
@media(prefers-reduced-motion:reduce){
.ha *,.ha *::after{animation:none!important}
.ha-doc{opacity:1}.ha-res{opacity:1}.ha-res svg{stroke-dashoffset:0}}
/* Beschikbaarheid onder de knop van de contactband (31-08-2026). Bewust klein en
rustig: het is een feit dat de drempel wegneemt op het moment van klikken, geen
aandachtsgrijper. Zie BESCHIKBAARHEID in bouw.py — blijft uit tot het getal klopt. */
.cta-besch{margin:16px 0 0;font-size:var(--fs-ui);line-height:1.55;color:var(--ink3);max-width:52ch}
.cta-besch b{font-weight:500;color:var(--ink)}
/* ══════════════════════════════════════════════════════════════════════════
Opruimronde 31-08-2026 — zie _review/REVIEW-2026-08-31-design.md
De vijftig losse font-size-waarden en de acht hoekstralen zijn hierboven bij
de bron vervangen. Wat hier staat is wat er niet met een waarde op te lossen
was.
══════════════════════════════════════════════════════════════════════════ */
/* Regellengte. Gemeten 103 tekens op de homepage en 172 op /werk/; leesbaar is
45 tot 90. Dit begrenst alleen lopende tekst — koppen en labels blijven vrij. */
p, li, blockquote{max-width:68ch}
.lead, .aan-lead, .bw-lead{max-width:56ch}
/* Tikdoelen op WCAG 2.5.8 (24×24). De sectie-index stond op 9×14 px en de link
onder het invulveld op 69×17. De streepjes blijven visueel even klein; alleen
het aanraakvlak groeit. */
.sidx a{min-width:24px;min-height:24px;display:flex;align-items:center}
.aan-klein a{display:inline-block;padding:4px 2px}
/* iOS wacht 300 ms op een dubbeltik voordat een knop reageert, tenzij je dit
zegt. Stond nergens in de stylesheet. */
a, button, input, label, summary, .tab{touch-action:manipulation}
/* Het amber van het "Voorbeeld"-merk was een losse waarde op één plek. Een
waarschuwing hóórt af te wijken van het merkaccent, dus de kleur blijft — maar
nu als token, zodat hij op één plek te wijzigen is.
⛔ Het HUD-blauw (#1f5f9e) blijft bewust staan. Op de proef vielen de kaders
van het schema op /diensten/ bijna weg toen ik het naar de merkkleur trok:
blauw haalt 5,89:1 op de grijze kaart, groen 4,80:1. Allebei boven de norm,
maar blauw steekt merkbaar meer af en onderscheidt technische elementen van
merkelementen. Of dat een tweede merkkleur waard is, is een besluit. */
/* was #8a4b00 (amber) — buiten de huisstijl, 02-09 */
:root{--let-op:var(--ac)}
.qb-vb{color:var(--let-op)}
/* ── merkblok onder de hero (31-08-2026) ─────────────────────────────────────
Op verzoek van Lenny, in de plaats van de cijferwand: het beeldmerk, de slogan
en waar we voor staan. Twee kolommen: het teken links groot, de woorden rechts. */
.mb{display:grid;grid-template-columns:minmax(200px,.7fr) 1.3fr;
gap:clamp(30px,5vw,80px);align-items:start}
.mb-teken{display:block;width:clamp(120px,13vw,190px);height:auto}
.mb-slogan{margin:22px 0 0;font-size:var(--fs-lead);font-weight:300;
letter-spacing:-.02em;color:var(--ink);max-width:14ch}
.mb-zin{margin:0 0 clamp(26px,3vw,40px);font-size:clamp(21px,2.2vw,30px);
font-weight:300;letter-spacing:-.025em;line-height:1.28;color:var(--ink);
max-width:26ch;text-wrap:balance}
/* vier items, dus vier kolommen op breed en twee daaronder — met auto-fit op 210px
viel het vierde item alleen op een tweede rij en dat oogt onaf. */
.mb-lijst{display:grid;grid-template-columns:repeat(4,1fr);
gap:0 clamp(22px,3vw,44px)}
.mb-r{border-top:1px solid var(--line);padding:16px 0}
.mb-r b{display:block;font-size:var(--fs-ui);font-weight:500;color:var(--ink)}
.mb-r span{display:block;margin-top:4px;font-size:var(--fs-ui);line-height:1.55;
color:var(--ink3)}
/* het beeldmerk in de voettekst-cirkel */
.fmerk img{width:52px;height:auto;display:block}
/* 13-09: op grond=antraciet is de cirkel rgb(28,31,36) en het merkteken is
bijna zwart (gem. rgb 15,17,18) -> onzichtbaar. Zelfde tegenzet als de
kopbalk op r.168. Gemeten: alleen antraciet heeft hier een donkere grond. */
html[data-grond="antraciet"] .fmerk img{filter:invert(1)}
/* ⚠️ `.mb-teken` (het merkblok onder de hero) stond als enige van de vier
merktekens op `filter:none` en was dus zwart op antraciet. Gemeten 15-09;
Lenny: *"die logo daaronder mag echt wit zijn hoor."* De kopbalk, de reis en
de voettekst hadden de omkering al. */
html[data-grond="antraciet"] .mb-teken{filter:invert(1)}
@media(max-width:860px){
.mb{grid-template-columns:1fr;gap:28px}
.mb-lijst{grid-template-columns:1fr 1fr}
.mb-slogan{max-width:none}
}
/* ── proefbalk voor de achtergrond van de reis (02-09-2026) ─────────────────
Tijdelijk gereedschap, niet de site. Staat boven de bestaande labbalk. */
.bgbalk{position:fixed;left:14px;bottom:64px;z-index:9998;display:flex;
align-items:center;gap:4px;padding:5px 5px 5px 12px;border-radius:999px;
background:rgba(14,16,19,.94);border:1px solid rgba(255,255,255,.18);
font-family:var(--sans)}
.bgbalk .mono{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
text-transform:uppercase;color:#9aa3ad;margin-right:6px}
.bgbalk button{min-height:34px;padding:0 13px;border:1px solid transparent;
border-radius:999px;background:transparent;color:#e7ebef;cursor:pointer;
font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
transition:background-color .15s,color .15s,border-color .15s}
.bgbalk button:hover{border-color:rgba(255,255,255,.34)}
.bgbalk button[aria-pressed="true"]{background:var(--ac-lt);color:#14171a}
@media(max-width:860px){.bgbalk{display:none}}
/* ══ DE GROND VAN DE HELE SITE — proef 02-09-2026 ══════════════════════════
Lenny: *"ik ben geen fan van dit witte achtergrond, kijk wat je daar kan doen
overal op de website."* Dat draait het besluit van 16-08 om ("de site is wit").
Vier antwoorden, allemaal binnen HUISSTIJL.md, te wisselen met de balk
linksonder of met ?grond=… in het adres.
papier warm gebroken wit — de leegte wordt een vel in plaats van een gat
zand een stap verder: duidelijk niet-wit, rustig en warm
antraciet de opening van dit merk: 82 % donker met 1-2 % warm accent
gemengd het ritme van het voorstel zelf — donker openen, papier verder
Hoe het werkt: de site tekent alles met vier tokens (--paper, --paper2,
--paper3, --line) en drie tekstkleuren (--ink, --ink2/3, --mut). Een grond is
dus een SET WAARDEN, geen nieuwe opmaak. `antraciet` leent bovendien de 34
omkeerregels die het nachtthema van 21-08 al had (welke vlakken donker moeten
worden), maar met de huisstijlwaarden erin — dat scheelde de hele inversie
opnieuw uitzoeken. */
/* ── papier ─────────────────────────────────────────────────────────────── */
html[data-grond="papier"]{
--paper:#f4f2ef; --paper2:#eceae6; --paper3:#e3e0da;
--line:rgba(15,16,18,.15);
/* ⚠️ 09-09-2026, gemeten: precies dezelfde fout als hieronder bij `zand`, en die
is op 02-09 alleen daar gerepareerd. Op deze grond zakt --mut (#6b6d72) op
--paper2 naar 4,31:1 terwijl de norm voor 12px 4,5 is — dat raakt élk grijs
micro-label op een vlak: de vragen, de casecijfers, de quotekaarten. #5f6167
haalt 5,15:1 op --paper2 en 4,70:1 op het donkerste vlak --paper3.
Dit is de kern van [[grond-is-een-tokenset]]: een donkerder vel duwt grijs
onder de norm, dus een grond is nooit alleen een achtergrondkleur. */
--mut:#5f6167;
}
html[data-grond="papier"] body{background:var(--paper)}
/* ── zand ───────────────────────────────────────────────────────────────── */
html[data-grond="zand"]{
--paper:#eae5dd; --paper2:#e1dbd1; --paper3:#d6cfc3;
--line:rgba(15,16,18,.18);
/* ⚠️ Gemeten: op deze grond zakt --mut (#6b6d72) naar 3,97-4,13:1 — de norm is
4,5. Een donkerder vel vraagt donkerder bijtekst; dit is de kern van het
verschil tussen een grond wisselen en een achtergrondkleur wisselen. #54565c
haalt 4,7:1 op de grond zelf en 4,5:1 op het donkerste vlak (--paper3). */
--mut:#54565c;
/* --hud staat NIET inline (dat doet alleen --ac via de labbalk), dus dit token
moet hier apart mee omlaag — anders blijft #bd3a42 staan op 3,97-4,36:1. */
--hud:#a63a20; --hud-lijn:rgba(166,58,32,.26);
}
html[data-grond="zand"] body{background:var(--paper)}
/* ── antraciet ──────────────────────────────────────────────────────────────
De structuur komt van het nachtthema; deze waarden zetten dat blok terug op de
huisstijl. Blauwzwart #020a18 en Space Grotesk waren van vóór de wissel van
01-09 en horen er niet meer bij. */
html[data-grond="antraciet"]{
--paper:#16181c; --paper2:#1c1f24; --paper3:#23272d;
--ink:#f2f5f7; --ink2:rgba(242,245,247,.90); --ink3:rgba(242,245,247,.80);
--mut:#9aa3ad;
--line:rgba(255,255,255,.14); --line-d:rgba(255,255,255,.22);
/* terracotta haalt op #16181c maar 3,1:1 — koraal haalt er 6,92:1 */
--ac:#ff7a59; --ac-lt:#ffa88f;
--hud:#ff7a59; --hud-lt:#ff9d84; --hud-lijn:rgba(255,122,89,.30);
/* ⛔ NIET de letter meewisselen: Geist is de huisletter (HUISSTIJL §4). Het
nachtthema zette Space Grotesk, en dat was een keuze van 21-08 die met de
grond niets te maken heeft. */
--sans:'Geist','Switzer',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
--disp:'Geist','Switzer',system-ui,sans-serif;
color-scheme:dark;
}
html[data-grond="antraciet"] body{background:var(--paper);color:var(--ink)}
/* ── gemengd ────────────────────────────────────────────────────────────────
Papier als grond, maar de openende en afsluitende banden op antraciet — dat is
letterlijk het ritme dat het branded-housing-voorstel zelf aanhoudt: 82 %
donker op de omslag en de inhoudsopgave, wit op de inhoudspagina's. */
html[data-grond="gemengd"]{
--paper:#f4f2ef; --paper2:#eceae6; --paper3:#e3e0da;
--line:rgba(15,16,18,.15);
}
html[data-grond="gemengd"] body{background:var(--paper)}
html[data-grond="gemengd"] .rz[data-bg="geen"] .rz-bg{background:#16181c}
.bgbalk.grondbalk{bottom:106px}
/* Op een donkere grond haalt terracotta het niet als tekst (3,25:1 gemeten op de
'Concept'-regel in de voettekst). Koraal is daar de tekstkleur van dezelfde
familie — HUISSTIJL §1. */
/* ⚠️ setAc DRAAIT de twee tinten om op een donkere grond, dus daar is `--ac` de
lichte (koraal) en `--ac-lt` de donkere. Hier dus --ac, niet --ac-lt — met
--ac-lt stond er weer terracotta op antraciet (3,25:1). */
html[data-grond="antraciet"] .todo{color:var(--ac)}
html[data-grond="antraciet"] .stapelidx li b{color:var(--ac)}
/* ══════════════════════════════════════════════════════════════════════════
DRIE PILAREN — 09-09-2026
De regel onder de merknaam, het uitklapmenu met een kop, de dienstkaarten
op een pilaarpagina, en het blok "waar de AI zit".
══════════════════════════════════════════════════════════════════════════ */
/* de agency-regel: staat onder de slogan in de voettekst en in het merkblok */
.fagency{margin-top:8px;font-size:var(--fs-ui);color:var(--mut);letter-spacing:-.01em}
.mb-agency{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;
font-size:var(--fs-micro);color:var(--ac);margin-bottom:14px}
/* de eerste regel van een uitklapmenu wijst naar de pilaar zelf */
.submenu .subkop{border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;
margin-bottom:6px;padding-bottom:11px}
.submenu .subkop b{color:var(--ac)}
/* een processtrook past zich aan het aantal stappen aan; hij stond hard op
vijf kolommen en de flows van de dienstpagina's hebben er vier of vijf */
.flow{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
/* het beeld boven aan een dienstpagina */
.pgbeeld{margin:0;overflow:hidden;border-radius:var(--r);background:var(--paper2)}
.pgbeeld img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}
/* de dienstkaarten op een pilaarpagina */
.dks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:clamp(14px,1.6vw,22px);margin-top:clamp(26px,3vw,40px)}
.dk{position:relative;display:flex;flex-direction:column;gap:10px;
padding:clamp(22px,2.4vw,32px);border-radius:var(--r);background:var(--paper);
box-shadow:var(--schaduw);text-decoration:none;color:inherit;
transition:transform .3s cubic-bezier(.16,.84,.32,1),box-shadow .3s cubic-bezier(.16,.84,.32,1)}
.dk:hover,.dk:focus-visible{transform:translateY(-3px)}
.dk .dk-n{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;
font-size:var(--fs-micro);color:var(--ac)}
.dk .dk-t{font-size:var(--fs-h3);font-weight:400;letter-spacing:-.02em;line-height:1.2}
.dk .dk-d{font-size:var(--fs-basis);color:var(--ink3);line-height:1.5}
.dk .dk-p{margin-top:auto;padding-top:14px;font-size:var(--fs-ui);color:var(--ac)}
.dk .dk-p i{font-style:normal;display:inline-block;transition:transform .3s cubic-bezier(.16,.84,.32,1)}
.dk:hover .dk-p i{transform:translateX(4px)}
/* "waar de AI zit" — twee kolommen: wel en niet */
.ai2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:clamp(16px,2vw,28px);margin-top:clamp(26px,3vw,40px)}
.ai2 h3{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;
font-size:var(--fs-micro);color:var(--ink3);font-weight:400;margin-bottom:16px}
.ai2 ul{display:grid;gap:14px}
.ai2 li{list-style:none}
.ai2 li b{display:block;font-weight:400;letter-spacing:-.015em;margin-bottom:4px}
.ai2 li span{display:block;font-size:var(--fs-basis);color:var(--ink3);line-height:1.55}
.ai2 .ai-wel li b::before{content:"";display:inline-block;width:9px;height:1px;
background:var(--ac-vlak);vertical-align:middle;margin-right:9px}
.ai2 .ai-niet li b{color:var(--mut)}
.ai2 .ai-niet li b::before{content:"";display:inline-block;width:9px;height:1px;
background:var(--line3,var(--line));vertical-align:middle;margin-right:9px}
/* de regel "wat we kunnen laten zien" */
.bewijsregel{margin-top:clamp(22px,2.6vw,32px);padding:clamp(18px,2vw,26px);
border-radius:var(--r);background:var(--paper2)}
.bewijsregel span{display:block;font-family:var(--mono);text-transform:uppercase;
letter-spacing:.14em;font-size:var(--fs-micro);color:var(--ink3);margin-bottom:8px}
.bewijsregel p{font-size:var(--fs-basis);color:var(--ink);line-height:1.55;max-width:44em}
/* verder binnen dezelfde pilaar */
.verder{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2.4vw,30px)}
.verder a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;
border-radius:99px;background:var(--paper2);text-decoration:none;color:var(--ink);
font-size:var(--fs-ui);letter-spacing:-.01em;
transition:background .25s cubic-bezier(.16,.84,.32,1)}
.verder a:hover,.verder a:focus-visible{background:var(--paper3)}
.verder a i{font-style:normal;color:var(--ac)}
@media (max-width:620px){
.ai2{grid-template-columns:1fr}
}
/* ═══ PILAARPAGINA · vorm "Spoor" ═══════════════════════════════════════════
Gekozen door Lenny op 13-09-2026 uit elf vormen (`_lab-pilaar/`). Naar
cerebrium.ai, gemeten diezelfde dag: links een lijst die blijft staan en
meeloopt met de scroll (actieve dienst donker, rest gedimd), rechts per
dienst eerst het paneel, dan de kop, dan de tekst — die volgorde is hun
vondst en hij werkt.
⛔ Alleen voor pilaren MET subdiensten (01 Web & Search, 02 Marketing &
Content). Pilaar 03 is Halo AI en krijgt een eigen vorm.
⚠️ De kaart over het beeld is DEKKEND wit. Op .94 valt hij net onder de
0,95-drempel van elke contrastmeter, die dan doorkijkt naar het donkere
beeld eronder en 1,36 meldt waar het 10,5 is.
Volledige verantwoording: inspiratie/REFERENTIE-cerebrium.md
════════════════════════════════════════════════════════════════════════ */
.pl-sr{padding:clamp(80px,10vw,140px) 0 clamp(60px,8vw,110px)}
.pl-sr-groot{font-size:clamp(34px,6.4vw,92px);font-weight:300;line-height:1.0;
letter-spacing:-.04em;margin:0 0 clamp(48px,6vw,96px);max-width:20ch;color:var(--ink)}
.pl-sr-grid{display:grid;grid-template-columns:minmax(230px,400px) minmax(0,1fr);
gap:clamp(30px,5vw,96px);align-items:start}
.pl-sr-zij{position:sticky;top:clamp(120px,16vh,190px)}
.pl-sr-lbl{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;
color:var(--ac);display:block;margin-bottom:clamp(20px,2.6vw,36px)}
.pl-sr-lijst{display:flex;flex-direction:column;gap:clamp(6px,.8vw,12px)}
.pl-sr-lijst a{font-size:clamp(21px,2.3vw,32px);font-weight:400;letter-spacing:-.02em;
text-decoration:none;line-height:1.18;color:var(--mut);transition:color .35s ease}
.pl-sr-lijst a.aan{color:var(--ink)}
.pl-sr-lijst a:hover{color:var(--ink)}
.pl-sr-b{scroll-margin-top:140px;padding-bottom:clamp(56px,8vw,120px)}
.pl-sr-paneel{position:relative;border-radius:16px;overflow:hidden;background:var(--paper3);
aspect-ratio:16/10}
.pl-sr-im{width:100%;height:100%;object-fit:cover;display:block}
.pl-sr-kaart{position:absolute;left:clamp(14px,2vw,28px);right:clamp(14px,2vw,28px);
bottom:clamp(14px,2vw,28px);background:#fff;border-radius:12px;
padding:clamp(12px,1.5vw,20px)}
.pl-sr-fl{display:flex;flex-wrap:wrap;gap:6px}
.pl-sr-fl div{display:flex;gap:6px;align-items:baseline;font-size:var(--fs-micro);
border:1px solid rgba(15,16,18,.16);border-radius:999px;padding:5px 11px}
.pl-sr-fl span{color:var(--ac);font-variant-numeric:tabular-nums}
.pl-sr-fl em{font-style:normal;color:#3a3c41}
.pl-sr-b h2{font-size:clamp(23px,2.6vw,34px);font-weight:400;letter-spacing:-.02em;
margin:clamp(22px,2.6vw,36px) 0 0;line-height:1.14}
.pl-sr-l{margin:16px 0 0;color:var(--ink3);font-size:var(--fs-lead);line-height:1.6;max-width:58ch}
/* ⚠️ 13-09: stond als PILLEN (flex-wrap + border-radius:999px). Gemeten over
alle 24 punten: mediaan 9 woorden, langste 18 — dat zijn zinnen, geen labels.
Ter vergelijking: de processtappen, die wél pillen zijn, hebben een mediaan
van 1 woord. Een pil is voor twee of drie woorden; daarboven wordt het een
afgeknot tekstblok. Zelfde regel als "mono is voor labels" (21-08). */
.pl-sr-p{list-style:none;padding:0;margin:22px 0 0}
.pl-sr-p li{font-size:var(--fs-ui);color:var(--ink3);padding:9px 0 9px 20px;
position:relative;border-bottom:1px solid var(--line);line-height:1.5}
.pl-sr-p li::before{content:"";position:absolute;left:0;top:17px;width:9px;height:1px;
background:var(--ac-vlak)}
.pl-sr-a{display:inline-block;margin-top:24px;color:var(--ac);font-size:var(--fs-ui);
text-decoration:none}
@media(max-width:980px){
.pl-sr-grid{grid-template-columns:1fr}
.pl-sr-zij{position:static}
.pl-sr-lijst{flex-direction:row;flex-wrap:wrap;gap:10px 18px}
.pl-sr-lijst a{font-size:var(--fs-ui)}
}
/* ═══ BEWIJS PER DIENST ═════════════════════════════════════════════════════
Wat we van deze dienst werkelijk hebben opgeleverd, met de cijfers erbij.
Teksten: D.BEWIJS in diensten.py — zonder klantnamen, want ons werk is
anoniem tot een klant tekent. Gebouwd 13/14-09 omdat de dienstpagina's
dunner waren dan de pilaar erboven (250-333 woorden tegen 478-518).
════════════════════════════════════════════════════════════════════════ */
.bw-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
gap:clamp(14px,1.8vw,26px);margin-top:clamp(26px,3.2vw,44px)}
.bw-i{border-top:1px solid var(--line);padding-top:clamp(16px,1.8vw,24px)}
.bw-i h3{font-size:var(--fs-ui);font-weight:400;margin:0;color:var(--ac);
letter-spacing:.01em}
.bw-i p{margin:10px 0 0;font-size:var(--fs-ui);color:var(--ink3);line-height:1.55}
@media(max-width:640px){.bw-rij{grid-template-columns:1fr;gap:0}
.bw-i{padding-block:16px}}
/* ═══ PILAAR-HERO ═══════════════════════════════════════════════════════════
Richting A · Type, gekozen door Lenny op 13-09-2026 uit zes in
`_lab-pilaarhero/`. Alleen typografie, geen stockfoto — ons eigen onderzoek
van 25-08 (`meet-dienstbeeld.js`, twaalf bedrijven die dit werk verkopen):
nul tonen een foto van mensen, nul tonen een serverruimte.
⭐ Hij dicht ook een inhoudsgat. Bij de omzetting naar de Spoor-vorm (13-09)
viel het blok `midden` van de pilaarpagina en daarmee `p["intro"]` —
41 tot 50 woorden per pilaar die daarna nergens meer stonden. Gemeten
15-09: de intro van pilaar 01 kwam op /web/ niet voor.
⚠️ De NAAM is de h1 (daar zoekt iemand op), de belofte staat eronder als
grote regel. Niet andersom, en niet allebei groot: twee grote koppen
boven elkaar leest als een dubbele kop (les 23-08).
════════════════════════════════════════════════════════════════════════ */
.ph{padding:clamp(96px,12vw,168px) 0 clamp(42px,5vw,74px)}
.ph-lbl{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;
color:var(--ac);display:block}
.ph-naam{font-size:clamp(18px,1.9vw,25px);font-weight:400;letter-spacing:-.008em;
margin:15px 0 0;color:var(--ink3);line-height:1.3}
.ph-belofte{font-size:clamp(37px,6.3vw,90px);font-weight:300;line-height:.99;
letter-spacing:-.042em;margin:12px 0 0;max-width:17ch;color:var(--ink)}
.ph-lead{max-width:56ch;margin:clamp(24px,3vw,38px) 0 0;font-size:var(--fs-lead);
color:var(--ink3);line-height:1.6}
.ph-onder{margin:clamp(32px,4vw,54px) 0 0;padding-top:20px;
border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:9px 28px;
font-size:var(--fs-ui);color:var(--mut)}
.ph-onder a{color:var(--mut);text-decoration:none;transition:color .3s ease}
.ph-onder a:hover,.ph-onder a:focus-visible{color:var(--ink)}
@media(max-width:640px){.ph-onder{flex-direction:column;gap:11px}}
/* Het Spoor volgt direct op de hero; zijn eigen paddingtop van 140 px kwam
bovenop die van de hero en gaf een leeg scherm ertussen (gemeten 15-09). */
/* ⚠️ `html[data-stijl="augen"] .block` heeft specificiteit (0,2,1) en won van
een kale `.ph + .pl-sr` (0,2,0): gemeten 122,4 px waar 37 px hoorde. Beide
scopes staan daarom uitgeschreven — een selectorlijst is geen voorvoegsel. */
.ph + .pl-sr,
html[data-stijl="augen"] .ph + .pl-sr,
/* Pilaar 03 heeft geen Spoor maar een gewone sectie eronder — sinds het
openingsbeeld eraf is (15-09) stond daar 72 + 122 px lucht. */
.ph + .block,
html[data-stijl="augen"] .ph + .block{padding-top:clamp(18px,2.6vw,40px)}
/* ═══ HALO AI — DE OVERDRACHT ═══════════════════════════════════════════════
Pilaar 03 is een endorsed brand: eigen naam, eigen prijsmodel, later een
eigen site, hetzelfde bedrijf (besluit 02-09). Lenny, 13-09: *"iets heel
aparts, dat echt de brand Halo presenteert, als een tak van Thiery &
Pierce."* Gekozen uit vier vormen in `_lab-halo/` (`python3 _lab-halo/lab.py`);
wisselen is de constante HALO_VORM in bouw.py.
De band is de OMKERING van de grond: op een lichte site donker, op antraciet
licht. Dat is wat "je stapt een andere ruimte binnen" doet.
════════════════════════════════════════════════════════════════════════ */
/* ⚠️ `background:var(--ink)` werkt hier NIET: op grond antraciet is `--ink`
bijna wit (rgb 242,245,247) en dan staat er witte tekst op een witte band.
Dat is de token-inversie die al vijf keer eerder toesloeg, en de zesde keer
was deze. Daarom eigen tokens die maar ÉÉN ding betekenen, per grond
expliciet gezet. De band is bewust de omkering van de grond: op een lichte
site donker, op antraciet licht — dat is wat "je stapt een andere ruimte
binnen" doet. */
.hl-ovd{--hl-bg:#16181c;--hl-tx:#f3f5f7;--hl-dim:rgba(255,255,255,.66);
--hl-ln:rgba(255,255,255,.17);--hl-ac:#ff7a59;
background:var(--hl-bg);color:var(--hl-tx);padding:clamp(54px,7vw,104px) 0}
html[data-grond="antraciet"] .hl-ovd{--hl-bg:#f2f2f4;--hl-tx:#14171a;
--hl-dim:#3a3c41;--hl-ln:rgba(15,16,18,.14);--hl-ac:#bd3a42}
/* het merkteken van Halo in de brug, 20-09-2026 */
.hl-o-naar{display:inline-flex;align-items:center;gap:10px}
.hl-merk{flex:none;color:var(--ac)}
/* het deeltjesveld op de hero van /automatisering/ — rechts, achter de tekst */
/* ══ de donkere pilaarhero ════════════════════════════════════════════
21-09, Lenny: de bol moet wit zijn, én *"ik wil zo weinig mogelijk wit
zien"*. Een witte bol op een bijna-witte grond haalde een omtrekcontrast
van 1,26:1 - hij tekende niet af. Deze band is het antwoord op allebei.
⚠️ De tokens worden hier omgekeerd, niet de losse kleuren: anders moet je
elke regel apart nalopen en vergeet je er altijd een. */
.ph-donker{background:#0e1116;color:#eef1f5;
--ac:#ff9a7e;
--ink:#f2f5f8; --ink3:#a8b3c0; --mut:#a8b3c0; --line:rgba(255,255,255,.12);
--paper:#0e1116; --paper2:#161b22; --paper3:#0a0d12;
--hl-mid:#f4f7fa; --hl-lo:#b6c3d2; --hl-gl:190,215,245;
--hl-oog:#161c26; --hl-ringgl:210,230,255; --hl-rand:rgba(255,255,255,.3)}
.ph-donker .ph-lbl{color:var(--ac-lt)}
.ph-donker .ph-naam,.ph-donker .ph-belofte{color:#f2f5f8}
.ph-donker .ph-belofte em,.ph-donker .ph-belofte b{color:var(--ac-lt)}
.ph-donker .ph-lead,.ph-donker .ph-onder{color:#a8b3c0}
.ph-veld{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ph-veld-doek{position:absolute;right:-6%;top:56%;transform:translateY(-50%);
width:min(64%,780px);aspect-ratio:1/1;
-webkit-mask-image:radial-gradient(closest-side,#000 26%,rgba(0,0,0,.62) 60%,transparent 96%);
mask-image:radial-gradient(closest-side,#000 26%,rgba(0,0,0,.62) 60%,transparent 96%)}
/* 21-09, Lenny: *"hij zit zo klein en zielig hier te kijken, maak hem wat
groter."* Van 34 naar 96 px, en iets verder naar het midden zodat hij
niet in de rand van het deeltjesveld hangt. */
.ph-veld-bot{position:absolute;right:24%;top:54%;transform:translateY(-50%)}
/* ⚠️ `overflow:hidden` hoort hier: het deeltjesdoek staat op `right:-6%`
(op mobiel -18%) en steekt dus bewust buiten de band uit. Zonder clip
groeit de PAGINA mee — gemeten 10 px overloop op 390 px. */
.ph{position:relative;overflow:hidden}
.ph .wrap{position:relative;z-index:2}
@media(max-width:900px){
.ph-veld-doek{right:-18%;width:96%;opacity:.55}
.ph-veld-bot{right:8%;opacity:.85}}
/* de bot in de balk van de terminalkaart en in de cases-regel */
.tm-bot{margin-left:auto;display:inline-flex;align-items:center}
.cl-m .hl-bot{vertical-align:-.38em;margin-right:9px}
/* ══ de kleuren van de Halo-bot ═══════════════════════════════════════
Gescheiden van --ac, want de bot is Halo en niet T&P. Per grond gezet,
want een witte bol op een witte grond bestaat niet. */
:root{
--hl-hi:#ffffff; /* het lichtpunt */
--hl-mid:#eef1f5; /* de body van de bol */
--hl-lo:#6b7d92; /* de schaduwkant - dit is wat hem aftekent op licht */
--hl-rand:rgba(74,90,110,.92); /* haarlijn om de omtrek - ondoorzichtig,
want op een lichte grond mengt een doorzichtige rand zich weg */
--hl-gl:120,140,165; /* de gloed eromheen */
--hl-oog:#2b3340; /* de ogen: donker, want de bol is licht */
--hl-ring:#ffffff;
--hl-ringgl:150,175,205;
}
html[data-grond="antraciet"],html[data-thema="nacht"]{
--hl-mid:#f4f7fa; --hl-lo:#b6c3d2; --hl-gl:190,215,245; --hl-rand:rgba(255,255,255,.3);
--hl-oog:#161c26; --hl-ringgl:210,230,255;
}
/* ══ de Halo-bot ═══════════════════════════════════════════════
Lenny, 20-09: *"ik wilde die bol wel, maar dan met een T&P-design"* —
en daarvoor: *"logo van T&P niet echt terug in de bot zelf"*.
Dus de bol houdt zijn vorm en leent de VORMTAAL van het merkteken:
· ogen met 90°-hoeken (het merk heeft nergens een ronding)
· een dunne inline net binnen de rand, zoals de inline in de band
· één kleurfamilie, terracotta; geen tweede merkkleur (huisstijl 01-09)
Alles beweegt met transform en opacity. Traag gehouden: dit is
gereedschap, geen speeltje (design-motion-principles, Kowalski). */
.hl-bot{position:relative;flex:none;display:inline-grid;place-items:center;
width:var(--s);height:calc(var(--s) * 1.52);
margin-inline:calc(var(--s) * .48)}
.hl-bot i,.hl-bot b{display:block}
/* ── de drie bewegingslagen ───────────────────────────────────────────
Lenny, 20-09: *"hij mag wat meer bewegen, hij mag hard schuiven naar links
en gaan schuiven naar rechts."* Twee animaties die allebei `transform`
zetten op één element overschrijven elkaar, dus elke beweging krijgt zijn
eigen laag: baan opzij (9,2 s), op-en-neer (4,6 s), squash (4,6 s). Door
de ongelijke tijden herhaalt de baan zich pas na 18,4 s en voelt het niet
mechanisch. Alles transform en opacity. */
.hl-bot-in{position:relative;display:grid;place-items:center;
width:var(--s);height:calc(var(--s) * 1.28);
animation:hlBaan 9.2s cubic-bezier(.45,0,.55,1) infinite}
.hl-bot-op{position:relative;display:grid;place-items:center;
width:var(--s);height:var(--s);
animation:hlZweef 4.6s cubic-bezier(.42,0,.58,1) infinite}
.hl-bot-gl{position:absolute;width:calc(var(--s) * 2.1);height:calc(var(--s) * 2.1);
border-radius:50%;pointer-events:none;
background:radial-gradient(circle,
rgba(var(--hl-gl),.22) 0%,rgba(var(--hl-gl),0) 64%);
animation:hlAdem 4.6s ease-in-out infinite}
.hl-bot-sch{position:absolute;bottom:0;width:calc(var(--s) * .80);
height:calc(var(--s) * .12);border-radius:50%;
background:radial-gradient(ellipse,rgba(var(--hl-gl),.40) 0%,
rgba(var(--hl-gl),0) 72%);animation:hlSchaduw 4.6s cubic-bezier(.42,0,.58,1) infinite}
/* ⭐ 21-09 (avond), Lenny: *"zorg dat de kwaliteit van het Halo-embleem hoog
is."* Drie dingen maakten hem grof op groot formaat:
1 · één verloop van licht naar donker = een platte bal. Nu VIER stops met
een terugloop aan de onderrand (het licht dat van de ondergrond
terugkaatst) — dat is wat een bol rond maakt.
2 · de omtreklijn was een harde `inset` van bijna 3 % van de maat; op
300 px werd dat een rand van 8 px. Nu schaalt hij mee maar blijft hij
dun, en op donkere gronden valt hij weg ten gunste van de gloed.
3 · geen eigen glanspunt. Nu een kleine zachte specular linksboven, los
van het verloop, zodat hij bij elk formaat op dezelfde plek zit. */
.hl-bot-bol{position:relative;width:var(--s);height:var(--s);border-radius:50%;
background:
radial-gradient(circle at 50% 118%,
rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 42%),
radial-gradient(circle at 34% 27%,
var(--hl-hi) 0%, var(--hl-hi) 10%,
var(--hl-mid) 44%, var(--hl-mid) 62%,
var(--hl-lo) 100%);
box-shadow:inset 0 0 0 max(.75px,calc(var(--s) * .012)) var(--hl-rand),
inset 0 calc(var(--s) * -.05) calc(var(--s) * .12) rgba(0,0,0,.06);
animation:hlSquash 4.6s cubic-bezier(.42,0,.58,1) infinite;transform-origin:50% 100%}
/* het glanspunt: klein, zacht, altijd op dezelfde plek */
.hl-bot-bol::before{content:"";position:absolute;
left:22%;top:15%;width:26%;height:19%;border-radius:50%;
background:radial-gradient(ellipse at 50% 50%,
rgba(255,255,255,.92) 0%,rgba(255,255,255,0) 70%);
transform:rotate(-24deg)}
/* ⛔ 22-09, Lenny: *"die cirkel IN het embleem moet weg."* Dat was de inline
net binnen de rand (de vormtaal van het merkteken). De halo erboven is
diezelfde dag juist teruggezet — zie `.hl-bot-ring`. */
/* ⭐ 22-09 — de HALO hangt weer boven de bol. Op 21-09 ging hij er helemaal
uit ("de ring in het Halo-embleem is lelijk"); vandaag bleek dat over de
inline BINNEN de bol te gaan, niet over de ring erboven.
Een platte ellips in perspectief, geen cirkel: hij ligt boven het hoofd en
kijkt dus schuin. Zweeft mee met de bol (`hlZweef` op de ouder). */
/* ⭐ 29-09-2026 · STATUSRING (ronde 3 · B, keuze Lenny). Vervangt het aureool.
Drie segmenten = A · C · E, plus één lichtpunt. Status = kleur + VORM/BEWEGING
+ (in de UI) een label — nooit alleen kleur. Lab: site/_lab-embleem/ronde3.html */
.hl-rg{position:absolute;left:50%;top:calc(var(--s) * -.21);width:calc(var(--s) * .66);
height:calc(var(--s) * .21);transform:translateX(-50%);overflow:visible;pointer-events:none}
.hl-rg ellipse{fill:none;stroke-linecap:round}
.hl-rg .sg{stroke:var(--hl-ring,#fff);opacity:.8;transition:stroke .4s,opacity .4s;
filter:drop-shadow(0 0 2px rgba(var(--hl-ringgl,210,230,255),.7))}
.hl-rg .pt{stroke:#6b7cff;stroke-dasharray:0 300;opacity:0}
.hl-vink{position:absolute;left:50%;top:60%;width:calc(var(--s) * .26);margin-left:calc(var(--s) * -.13);
overflow:visible;opacity:0;transform:scale(.6);transition:opacity .3s,transform .3s}
.hl-vink path{fill:none;stroke:var(--hl-oog);stroke-width:9;stroke-linecap:square}
.hl-bot .hl-over{display:none;position:absolute;right:calc(var(--s) * -.06);top:calc(var(--s) * -.2);
width:calc(var(--s) * .12);height:calc(var(--s) * .12);border-radius:50%;background:#ff7a59;
box-shadow:0 0 calc(var(--s) * .1) #ff7a59}
/* bezig: segmenten zacht, blauw lichtpunt draait rond */
.hl-bot.st-bezig .sg{opacity:.28}
.hl-bot.st-bezig .pt{opacity:1;stroke-dasharray:14 286;animation:hlRond 1.6s linear infinite;
filter:drop-shadow(0 0 3px #6b7cff)}
@keyframes hlRond{to{stroke-dashoffset:-300}}
/* controle nodig: amber, STIL, deels open; alleen de gloed ademt; hij kijkt opzij */
.hl-bot.st-wacht .sg{stroke:#ffb547;opacity:1;animation:hlGloed 2.4s ease-in-out infinite}
.hl-bot.st-wacht .sg.e{stroke-dasharray:52 248}
@keyframes hlGloed{0%,100%{filter:drop-shadow(0 0 1px #ffb547)}50%{filter:drop-shadow(0 0 5px #ffb547)}}
.hl-bot.st-wacht .hl-bot-o{transform:translate(calc(var(--s) * .12),0)}
/* mens neemt over: ring aan één kant open, koraal punt */
.hl-bot.st-over .sg.e{opacity:0}
.hl-bot.st-over .hl-over{display:block}
/* klaar: segmenten na elkaar groen, ring sluit, dan het vinkje */
.hl-bot.st-klaar .sg{stroke:#3ed598;animation:hlNa .9s ease both;filter:drop-shadow(0 0 3px #3ed598)}
.hl-bot.st-klaar .sg.c{animation-delay:.12s}.hl-bot.st-klaar .sg.e{animation-delay:.24s}
@keyframes hlNa{from{opacity:.2;stroke-dasharray:88 212}to{opacity:1;stroke-dasharray:101 199}}
.hl-bot.st-klaar .hl-bot-o{transform:translate(0,calc(var(--s) * .04)) scaleY(.32)}
.hl-bot.st-klaar .hl-vink{opacity:1;transform:scale(1);transition-delay:.55s}
/* fout: ring gedimd, één segment rood */
.hl-bot.st-fout .sg{opacity:.22}
.hl-bot.st-fout .sg.c{stroke:#ff5d5d;opacity:1;filter:drop-shadow(0 0 3px #ff5d5d)}
.hl-bot.st-fout .hl-bot-o{transform:scaleY(.5)}
/* geen nieuwe taak: bijna stil, ogen half dicht */
.hl-bot.st-rust .sg{opacity:.2;animation:hlAdemRing 5s ease-in-out infinite}
@keyframes hlAdemRing{0%,100%{opacity:.14}50%{opacity:.32}}
.hl-bot.st-rust .hl-bot-o{transform:translate(0,calc(var(--s) * .03)) scaleY(.35)}
/* ogen met 90°-hoeken — dat is het enige wat de bot van het merk overneemt */
.hl-bot-o{position:absolute;top:40%;width:calc(var(--s) * .085);
height:calc(var(--s) * .22);background:var(--hl-oog);border-radius:0;
/* de ogen volgen de muis; de waarden komen uit site.js */
transform:translate(var(--oog-x,0),var(--oog-y,0));
transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.hl-bot-o.l{left:26%}
.hl-bot-o.r{right:26%}
@keyframes hlBaan{
0%,100%{transform:translateX(calc(var(--s) * -.42))}
28%{transform:translateX(calc(var(--s) * .30))}
50%{transform:translateX(calc(var(--s) * .46))}
76%{transform:translateX(calc(var(--s) * -.18))}}
@keyframes hlZweef{
0%,100%{transform:translateY(0)}
16%{transform:translateY(calc(var(--s) * -.19))}
50%{transform:translateY(calc(var(--s) * -.25))}
84%{transform:translateY(calc(var(--s) * -.19))}}
@keyframes hlSquash{
0%,100%{transform:scale(1.05,.95)}
16%{transform:scale(.97,1.03)}
50%{transform:scale(1,1)}
84%{transform:scale(.98,1.02)}}
@keyframes hlSchaduw{0%,100%{transform:scale(1);opacity:.85}
50%{transform:scale(.62);opacity:.3}}
@keyframes hlAdem{0%,100%{opacity:.75;transform:scale(1)}
50%{opacity:1;transform:scale(1.06)}}
@keyframes hlPols{0%,100%{opacity:.82} 50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
.hl-bot-in,.hl-bot-op,.hl-bot-bol,.hl-bot-sch,.hl-bot-gl,
.hl-rg .sg,.hl-rg .pt{animation:none}}
.hl-o-brug{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase}
.hl-o-van{color:var(--hl-dim)}
.hl-o-pijl{color:var(--hl-ac)}
.hl-o-naar{color:var(--hl-tx);border:1px solid var(--hl-ln);border-radius:999px;
padding:6px 14px;letter-spacing:.12em}
.hl-o-h{font-size:clamp(28px,3.6vw,50px);font-weight:300;line-height:1.06;
letter-spacing:-.03em;margin:clamp(22px,2.6vw,36px) 0 0;max-width:18ch;
color:var(--hl-tx)}
.hl-ovd .ac{color:var(--hl-ac)}
.hl-o-zin{margin:20px 0 0;font-size:var(--fs-lead);line-height:1.6;
color:var(--hl-dim);max-width:60ch}
.hl-o-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
gap:clamp(16px,2vw,30px);margin-top:clamp(30px,3.6vw,50px)}
.hl-o-f{display:flex;gap:14px;border-top:1px solid var(--hl-ln);padding-top:16px}
.hl-o-f > span{font-size:var(--fs-micro);color:var(--hl-ac);
font-variant-numeric:tabular-nums;padding-top:3px}
.hl-o-f h3{font-size:var(--fs-ui);font-weight:400;margin:0;color:var(--hl-tx)}
.hl-o-f p{margin:8px 0 0;font-size:var(--fs-ui);color:var(--hl-dim);line-height:1.55}
.hl-o-noot{margin:clamp(28px,3.4vw,46px) 0 0;padding-top:18px;
border-top:1px solid var(--hl-ln);font-size:var(--fs-ui);color:var(--hl-dim);
line-height:1.6;max-width:70ch}
.hl-o-noot b{color:var(--hl-tx)}
/* ═══ CONTACT — stappen en vragen ═══════════════════════════════════════════
15-09: /contact/ was 189 woorden (kop + formulier) tegenover 492-743 op de
dienstpagina's. De inhoud komt uit STAPPEN en VRAGEN, niet uit nieuwe tekst.
════════════════════════════════════════════════════════════════════════ */
.ct-stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
gap:clamp(16px,2vw,30px);margin-top:clamp(26px,3.2vw,44px)}
.ct-s{border-top:1px solid var(--line);padding-top:16px}
.ct-s > span{font-size:var(--fs-micro);color:var(--ac);font-variant-numeric:tabular-nums}
.ct-s h3{font-size:var(--fs-ui);font-weight:400;margin:9px 0 0;color:var(--ink)}
.ct-s p{margin:8px 0 0;font-size:var(--fs-ui);color:var(--ink3);line-height:1.55}
.ct-vragen{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
gap:clamp(18px,2.2vw,34px);margin-top:clamp(26px,3.2vw,44px)}
.ct-v h3{font-size:var(--fs-ui);font-weight:400;margin:0;color:var(--ac)}
.ct-v p{margin:10px 0 0;font-size:var(--fs-ui);color:var(--ink3);line-height:1.6}
@media(max-width:640px){.ct-stappen,.ct-vragen{grid-template-columns:1fr;gap:0}
.ct-s,.ct-v{padding-block:16px}}
/* ?schoon=1 — labgereedschap weg voor een opname. Zie boot.js. */
html[data-schoon] .bgbalk,
html[data-schoon] #lab,
html[data-schoon] .plb,
html[data-schoon] .hlb,
html[data-schoon] .phb{display:none!important}
/* Honeypot in het contactformulier: uit beeld, niet uit de DOM.
Geen display:none — sommige bots vullen juist alleen wat verborgen is via
die eigenschap. Wel aria-hidden en tabindex=-1, zodat een schermlezer en
het toetsenbord hem overslaan. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .ok.fout{color:var(--ac)}
.form .ok.fout a{color:inherit}
.form button[disabled]{opacity:.55;cursor:progress}
/* ══ PILAAR-VORMEN BENTO en STAPEL (16-09-2026) ═══════════════════════════════
Lenny: *"de hele pagina van web & search, marketing & content is te veel op
elkaar gericht — drie verschillende."* Web houdt Spoor; Marketing krijgt Bento,
Automation & Agents Stapel. Beide uit `_lab-pilaar/vormen.py` (13-09), daar
gescoped op #V, hier met eigen klassen `pl-bn-` / `pl-st-` (geen botsing met de
site: nagekeken met grep).
⚠️ Alleen transform, opacity en kleur bewegen. Sticky doet het stapelen, geen JS. */
.pl-bn{padding-top:clamp(10px,2vw,30px)}
.pl-bn-lbl{display:block;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
color:var(--ac);margin-bottom:clamp(18px,2.4vw,30px)}
.pl-bn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.5vw,20px)}
.pl-bn-v{position:relative;background:var(--paper2);border:1px solid var(--line);border-radius:18px;
overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;margin:0;
transition:border-color .3s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
a.pl-bn-v:hover,a.pl-bn-v:focus-visible{border-color:var(--ac);transform:translateY(-4px);outline:none}
.pl-bn-groot{grid-column:span 2;grid-row:span 2}
.pl-bn-breed{grid-column:span 3;flex-direction:row;align-items:stretch}
.pl-bn-im{position:relative;overflow:hidden;flex:1 1 auto;min-height:260px}
.pl-bn-im-r{flex:0 0 44%;display:flex}
.pl-bn-im-r .pl-bn-im{flex:1 1 auto}
/* ── slideshow in een tegel: dia's gestapeld, wisselen = opacity; langzame zoom = transform */
.pl-bn-dia .dia{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
opacity:0;transform:scale(1.08);
transition:opacity 1s ease,transform 7s cubic-bezier(.2,.6,.2,1)}
.pl-bn-dia .dia.aan{opacity:1;transform:scale(1)}
.pl-bn-model{background:radial-gradient(70% 60% at 50% 42%,color-mix(in srgb,var(--ac) 16%,var(--paper2)),var(--paper2) 72%)}
.pl-bn-model .dia{object-fit:contain;padding:28px 28px 76px;transform:translateY(14px) rotate(-4deg)}
/* ⚠️ Geen filter:drop-shadow op een dia die ook transformeert (CORE G6: per beeld
herrekend bij elke frame = stroef). De schaduw is één vaste ellips eronder. */
.pl-bn-model::before{content:"";position:absolute;left:22%;right:22%;bottom:62px;height:26px;
border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);pointer-events:none}
.pl-bn-model .dia.aan{transform:none}
/* bijschrift: verloopband met merknaam en één regel — geen losse labels op de foto */
.pl-bn-bij{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 16px;
background:linear-gradient(to top,rgba(8,10,14,.82),rgba(8,10,14,0));color:#fff;
display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;pointer-events:none}
.pl-bn-bij b{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.pl-bn-bij span{font-size:var(--fs-micro);color:rgba(255,255,255,.82);letter-spacing:.02em}
.pl-bn-bij.wissel b,.pl-bn-bij.wissel span{opacity:0;transform:translateY(4px)}
.pl-bn-bij b,.pl-bn-bij span{transition:opacity .35s ease,transform .35s ease}
.pl-bn-stip{position:absolute;right:16px;top:16px;display:flex;gap:6px}
.pl-bn-stip i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);
transition:transform .35s ease,background-color .35s ease}
.pl-bn-stip i.aan{background:#fff;transform:scale(1.35)}
a.pl-bn-v:hover .pl-bn-dia .dia.aan{transform:scale(1.03)}
.pl-bn-tx{padding:clamp(20px,2.3vw,34px);flex:0 0 auto}
.pl-bn-breed .pl-bn-tx{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.pl-bn-tx>span{font-size:var(--fs-micro);letter-spacing:.14em;color:var(--ac)}
.pl-bn-tx h2{font-size:clamp(22px,2.1vw,31px);font-weight:400;letter-spacing:-.02em;
margin:10px 0 0;color:var(--ink);line-height:1.12}
.pl-bn-tx p{margin:10px 0 0;color:var(--ink3);font-size:var(--fs-ui);line-height:1.55;max-width:52ch}
.pl-bn-p{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.pl-bn-p li{font-size:var(--fs-micro);color:var(--ink3);border:1px solid var(--line);
border-radius:999px;padding:5px 11px;max-width:none}
.pl-bn-pijl{display:inline-block;margin-top:18px;font-style:normal;font-size:var(--fs-ui);color:var(--ac);
transition:transform .3s cubic-bezier(.2,.8,.2,1)}
a.pl-bn-v:hover .pl-bn-pijl{transform:translateX(5px)}
.pl-bn-foto{min-height:300px;display:flex}
.pl-bn-foto .pl-bn-im{flex:1 1 auto}
@media(max-width:900px){
.pl-bn-grid{grid-template-columns:1fr}
.pl-bn-groot,.pl-bn-breed{grid-column:span 1;grid-row:auto}
.pl-bn-breed{flex-direction:column}
.pl-bn-im-r{flex:0 0 auto;order:-1}
}
@media(prefers-reduced-motion:reduce){.pl-bn-v,.pl-bn-dia .dia,.pl-bn-pijl{transition:none}
a.pl-bn-v:hover{transform:none}}
.pl-st{--plak:clamp(92px,11vh,130px);padding-top:clamp(10px,2vw,30px)}
.pl-st-stapel{display:flex;flex-direction:column;gap:clamp(26px,3.2vw,48px)}
.pl-st-k{position:sticky;top:calc(var(--plak) + var(--i) * 18px);display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,3.4vw,56px);align-items:center;
background:var(--paper2);border:1px solid var(--line);border-radius:22px;
padding:clamp(26px,3.4vw,52px);box-shadow:0 -22px 50px -26px rgba(0,0,0,.45)}
.pl-st-n{font-size:var(--fs-micro);letter-spacing:.14em;color:var(--ac);font-variant-numeric:tabular-nums}
.pl-st-k h2{font-size:clamp(26px,2.9vw,40px);font-weight:400;letter-spacing:-.02em;margin:12px 0 0;
line-height:1.08;color:var(--ink)}
.pl-st-tx>p{margin:14px 0 0;color:var(--ink3);font-size:var(--fs-lead);line-height:1.5;max-width:44ch}
.pl-st-p{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.pl-st-p li{position:relative;padding-left:20px;font-size:var(--fs-ui);line-height:1.5;color:var(--ink3);max-width:52ch}
.pl-st-p li::before{content:"";position:absolute;left:0;top:.7em;width:11px;height:1px;background:var(--ac-vlak)}
.pl-st-p li b,.pl-st-p li strong{color:var(--ink);font-weight:500}
.pl-st-a{display:inline-block;margin-top:24px;color:var(--ac);font-size:var(--fs-ui);text-decoration:none;
border-bottom:1px solid currentColor;padding-bottom:3px}
.pl-st-a:focus-visible{outline:2px solid var(--ac);outline-offset:4px}
.pl-st-b img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line)}
.pl-st-opl{margin-top:clamp(56px,7vw,110px)}
.pl-st-orij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.5vw,20px);
margin-top:clamp(22px,2.6vw,36px)}
.pl-st-o{border-top:2px solid var(--ac);padding-top:18px}
.pl-st-o b{display:block;font-size:clamp(20px,1.8vw,26px);font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.pl-st-o p{margin:10px 0 0;font-size:var(--fs-ui);line-height:1.55;color:var(--ink3)}
@media(max-width:1100px){.pl-st-orij{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
.pl-st-k{grid-template-columns:1fr;position:static;gap:20px}
.pl-st-b{order:-1}
.pl-st-orij{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.pl-st-k{position:static}}
/* ══ KAARTEN, STAPPEN EN SCHERM (16-09-2026, avond) ════════════════════════════
Lenny: *"mooie kaarten overal, nu is het superdroog en superlelijk"* en *"maak er
mooie animaties van."* Eén kaartvorm (.kk) voor de uitlegpagina's, en .why krijgt
dezelfde uitstraling zodat het overal klopt.
⚠️ Kaartvlak = inkt 5% door de ondergrond gemengd. `var(--paper)` als kaartvlak was
op een b-paper-sectie letterlijk dezelfde kleur (de kaarten waren onzichtbaar,
zie Lenny's schermafdruk van "Waar het werkt").
Beweging: opkomen = .rv.kaartin (opacity + 18 px), aanwijzen = optillen, lijn
loopt vol, gloed. Alleen transform en opacity. */
:root{--kk-vlak:color-mix(in srgb,var(--ink) 5%,var(--paper));
--kk-vlak-h:color-mix(in srgb,var(--ink) 8%,var(--paper))}
.kk-grid{display:grid;gap:clamp(12px,1.4vw,18px);margin-top:clamp(26px,3.2vw,42px)}
.kk-grid.kk-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kk-grid.kk-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* ── vijf websites, scrollend in één venster ───────────────────────────────
⭐ 22-09, Lenny: *"laat verschillende websites zien, geen bijschriften, en
kun je scrollen in die website terwijl je de slides toont?"*
Het venster heeft een vaste verhouding; de opname is hoger en schuift
omhoog. Alleen `transform`. */
.sw{margin-top:clamp(26px,3.2vw,44px);display:grid;justify-items:center}
/* in een dienstkaart vult het venster de kaart, zonder eigen rand of marge */
.dka-med-site .sw{margin:0}
.dka-med-site .sw-vak{width:100%;border:0;border-radius:0;box-shadow:none;aspect-ratio:16/9}
.sw-vak{position:relative;width:min(100%,1040px);aspect-ratio:16/10;
border-radius:18px;overflow:hidden;border:1px solid var(--line);
background:var(--paper2);box-shadow:0 40px 80px -60px rgba(30,25,15,.55)}
.sw-d{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;
transition:opacity .7s ease,visibility 0s linear .7s}
.sw-d.aan{opacity:1;visibility:visible;transition:opacity .7s ease}
.sw-d img{position:absolute;left:0;top:0;width:100%;height:auto;display:block;
transform:translateY(0)}
/* de looptijd volgt de hoogte: even snel bij elke site */
.sw-d.aan img{animation:swRol calc(var(--h) / 150 * 1s) linear .6s 1 both}
@keyframes swRol{from{transform:translateY(0)}
to{transform:translateY(calc(-1 * (100% - var(--vak,62%))))}}
.sw-stip{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
display:flex;gap:8px;padding:7px 11px;border-radius:999px;z-index:2;
background:rgba(12,12,14,.55)}
.sw-stip button{width:8px;height:8px;padding:0;border-radius:50%;cursor:pointer;
border:0;background:rgba(255,255,255,.42);
transition:background-color .3s ease,transform .3s ease}
.sw-stip button[aria-current="true"]{background:#fff;transform:scale(1.3)}
.sw-stip button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.sw-d.aan img{animation:none}}
/* ── kaartvorm PANEEL (/adverteren/) ───────────────────────────────────────
⭐ 22-09, Lenny: *"de kaarten zijn heel standaard en lijken op elkaar."*
Hier geen zes losse doosjes maar ÉÉN paneel met haarlijnen ertussen, zoals
een dashboard. Zelfde inhoud, andere vorm — en het past bij de campagne-
schermen die eronder staan. */
.kk-st-paneel{gap:1px;border:1px solid var(--line);border-radius:20px;overflow:hidden;
background:var(--line)}
.kk-st-paneel .kk{border:0;border-radius:0;background:var(--kk-vlak);
padding:clamp(22px,2.1vw,30px)}
/* geen optillen binnen een paneel — het vak licht op */
.kk-st-paneel .kk:hover{transform:none}
.kk-st-paneel .kk::after{background:radial-gradient(140% 100% at 50% 0%,
color-mix(in srgb,var(--ac) 11%,transparent),transparent 62%)}
.kk-st-paneel .kk-lijn{left:clamp(22px,2.1vw,30px);right:clamp(22px,2.1vw,30px);bottom:auto;
top:calc(clamp(22px,2.1vw,30px) - 1px)}
@media(max-width:900px){
.kk-st-paneel .kk,.kk-st-paneel .kk:nth-child(3n){box-shadow:inset 0 -1px 0 var(--line)}
.kk-st-paneel .kk:last-child{box-shadow:none}}
.kk{position:relative;overflow:hidden;background:var(--kk-vlak);border:1px solid var(--line);
border-radius:20px;padding:clamp(22px,2.2vw,32px);
transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),
border-color .3s ease}
.kk::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
background:radial-gradient(120% 80% at 0% 0%,color-mix(in srgb,var(--ac) 14%,transparent),transparent 60%);
transition:opacity .45s ease}
.kk-n{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;
font-family:var(--mono);font-size:12px;color:var(--ac);letter-spacing:.04em;
border:1px solid color-mix(in srgb,var(--ac) 38%,transparent);
transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.kk h3{margin:18px 0 0;font-size:clamp(19px,1.6vw,23px);font-weight:400;letter-spacing:-.02em;
line-height:1.2;color:var(--ink)}
.kk p{margin:10px 0 0;font-size:var(--fs-ui);line-height:1.55;color:var(--ink3);max-width:none}
.kk-lijn{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ac-vlak);
transform:scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.kk.rv.in{transform:none}
.kk.in .kk-lijn{transform:scaleX(1)}
.kk-grid .kk:nth-child(1) .kk-lijn{transition-delay:.06s}
.kk-grid .kk:nth-child(2) .kk-lijn{transition-delay:.16s}
.kk-grid .kk:nth-child(3) .kk-lijn{transition-delay:.26s}
.kk-grid .kk:nth-child(4) .kk-lijn{transition-delay:.36s}
.kk-grid .kk:nth-child(5) .kk-lijn{transition-delay:.46s}
.kk-grid .kk:nth-child(6) .kk-lijn{transition-delay:.56s}
/* ══ de kaarten leven uit zichzelf ═══════════════════════════════════
21-09, Lenny: *"kaart animeren nog niet bij de automatisering en agents"*
en *"ik wil wat meer animaties zien, niet alleen in de kaarten"*. Tot nu
deden de kaarten alleen iets bij binnenkomen en bij hover - stond je stil,
dan stond de pagina stil.
Een lichtveeg die door de rij trekt, met 0,9 s tussen de kaarten, zodat het
als een golf leest en niet als zes losse knipperlichten.
⚠️ Alleen `transform` en `opacity`. Een bewegend verloop als ACHTERGROND
herschildert elk frame; een vast verloop dat je verschuift niet. */
.kk::before{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:62%;
pointer-events:none;z-index:0;opacity:0;
background:linear-gradient(102deg,transparent,
color-mix(in srgb,var(--ac) 20%,transparent) 34%,
color-mix(in srgb,var(--ac) 42%,transparent) 50%,
color-mix(in srgb,var(--ac) 20%,transparent) 66%,transparent);
transform:translateX(-120%);
/* ⭐ 22-09: liep op `infinite` (elke 6,4 s opnieuw). Nu één keer, en
pas als de kaart in beeld komt — dan zie je hem ook echt. */
animation:none}
.kk.in::before{animation:kkVeeg 1.9s cubic-bezier(.4,0,.6,1) .25s 1 both}
.kk>*{position:relative;z-index:1}
@keyframes kkVeeg{
0%{transform:translateX(-120%);opacity:0}
6%{opacity:1}
54%{opacity:1}
62%{transform:translateX(260%);opacity:0}
100%{transform:translateX(260%);opacity:0}}
.kk-grid .kk:nth-child(1)::before{animation-delay:0s}
.kk-grid .kk:nth-child(2)::before{animation-delay:.75s}
.kk-grid .kk:nth-child(3)::before{animation-delay:1.5s}
.kk-grid .kk:nth-child(4)::before{animation-delay:2.25s}
.kk-grid .kk:nth-child(5)::before{animation-delay:3s}
.kk-grid .kk:nth-child(6)::before{animation-delay:3.75s}
/* het nummer ademt mee met dezelfde golf */
.kk-n{position:relative}
.kk-n::after{content:"";position:absolute;inset:-1px;border-radius:inherit;
border:1px solid var(--ac);opacity:0;
animation:kkPuls 6.4s cubic-bezier(.45,0,.55,1) infinite}
.kk-grid .kk:nth-child(1) .kk-n::after{animation-delay:0s}
.kk-grid .kk:nth-child(2) .kk-n::after{animation-delay:.75s}
.kk-grid .kk:nth-child(3) .kk-n::after{animation-delay:1.5s}
.kk-grid .kk:nth-child(4) .kk-n::after{animation-delay:2.25s}
.kk-grid .kk:nth-child(5) .kk-n::after{animation-delay:3s}
.kk-grid .kk:nth-child(6) .kk-n::after{animation-delay:3.75s}
@keyframes kkPuls{
0%,10%{opacity:0;transform:scale(1)}
18%{opacity:.85;transform:scale(1.18)}
30%{opacity:0;transform:scale(1.3)}
100%{opacity:0;transform:scale(1.3)}}
@media(prefers-reduced-motion:reduce){
.kk::before,.kk-n::after{animation:none;opacity:0}}
/* dezelfde golf op de stapelkaarten van /automatisering/ — die pagina
gebruikt de stapelvorm, niet .kk. */
/* ⛔ GEEN `position:relative` hier. Deze kaart hoort te PLAKKEN
(`position:sticky` op r.3259) en een tweede position-regel later in de
cascade slaat dat plat — gemeten: alle drie de kaarten stonden op
`relative` en schoven gewoon mee (756 -> 311 -> -135 -> -580), dus er
stapelde niets. Zesde keer dat deze val toeslaat; `overflow:hidden`
was het enige dat hier nodig was, en de ::before ankert al aan de
sticky-kaart zelf. */
/* ⚠️ `overflow:hidden` klipt de lichtveeg hier NIET — gemeten: de veeg
schuift met `translateX(260%)` uit de kaart en duwde de pagina op
390 px **396 px** breder. `clip-path:inset(0)` hielp evenmin;
`contain:paint` wel (0 px). `overflow:hidden` op de STAPEL werkt ook,
maar dat maakt de stapel een scroll-container en sloopt de `sticky`.
⚠️ Alleen zichtbaar als je over de hele animatiecyclus meet: één
momentopname gaf 10 px of zelfs 0. */
.pl-st-k{overflow:hidden;contain:paint}
.pl-st-k::before{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:56%;
pointer-events:none;z-index:0;opacity:0;
background:linear-gradient(102deg,transparent,
color-mix(in srgb,var(--ac) 18%,transparent) 34%,
color-mix(in srgb,var(--ac) 36%,transparent) 50%,
color-mix(in srgb,var(--ac) 18%,transparent) 66%,transparent);
transform:translateX(-120%);
/* ⭐ 22-09: liep op `infinite` (elke 6,4 s opnieuw). Nu één keer, en
pas als de kaart in beeld komt — dan zie je hem ook echt. */
animation:none}
.pl-st-k.in::before{animation:kkVeeg 1.9s cubic-bezier(.4,0,.6,1) .25s 1 both}
.pl-st-k > *{position:relative;z-index:1}
.pl-st-k:nth-child(2)::before{animation-delay:1.1s}
.pl-st-k:nth-child(3)::before{animation-delay:2.2s}
.pl-st-k:nth-child(4)::before{animation-delay:3.3s}
@media(prefers-reduced-motion:reduce){.pl-st-k::before{animation:none;opacity:0}}
@media(prefers-reduced-motion:reduce){.kk .kk-lijn{transform:scaleX(1)}}
@media(hover:hover) and (pointer:fine){
.kk:hover{border-color:color-mix(in srgb,var(--ac) 55%,transparent)}
.kk.rv.in:hover{transform:translateY(-6px)}
.kk:hover::after{opacity:1}
.kk:hover .kk-lijn{transform:scaleX(1)}
.kk:hover .kk-n{transform:rotate(-8deg) scale(1.08)}
}
/* Wat het oplevert: het woord is de kaart */
.kk-opl .kk h3{font-size:clamp(24px,2.2vw,32px);margin-top:14px}
.kk-opl .kk-n{border:0;width:auto;height:auto;justify-content:start}
/* Veilig: slotje in plaats van nummer, en een accentrand links */
.kk-veilig .kk{border-left:2px solid color-mix(in srgb,var(--ac) 70%,transparent)}
/* ── hoe we het opzetten: een lijn die zichzelf tekent, stappen die na elkaar komen */
.hz{list-style:none;margin:clamp(30px,3.6vw,48px) 0 0;padding:0;display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);position:relative}
.hz::before{content:"";position:absolute;left:19px;right:19px;top:19px;height:2px;
background:linear-gradient(to right,var(--ac),color-mix(in srgb,var(--ac) 30%,transparent));
transform:scaleX(0);transform-origin:left center;transition:transform 1.4s cubic-bezier(.4,0,.2,1) .15s}
.hz.in::before{transform:scaleX(1)}
.hz li{position:relative;opacity:0;transform:translateY(14px);
transition:opacity .5s ease calc(.25s + var(--i) * .16s),transform .5s cubic-bezier(.22,1,.36,1) calc(.25s + var(--i) * .16s)}
.hz.in li{opacity:1;transform:none}
.hz-n{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
background:var(--paper);border:2px solid var(--ac);font-family:var(--mono);font-size:12px;color:var(--ink)}
.hz h3{margin:18px 0 0;font-size:clamp(18px,1.5vw,21px);font-weight:400;letter-spacing:-.02em;color:var(--ink)}
/* 17-09: een lang samengesteld woord liep in de volgende kolom ("Zoekwoordonderzoek") */
.hz h3,.kk h3{overflow-wrap:break-word;hyphens:auto}
.hz p{margin:8px 0 0;font-size:var(--fs-ui);line-height:1.55;color:var(--ink3);max-width:none}
.b-paper2 .hz-n{background:var(--paper2)}
/* ── het schermbeeld in een lijst, kantelt recht bij het opkomen */
.as-schermsec{padding-top:0}
.as-scherm{margin:0 auto;max-width:1080px;border-radius:24px;overflow:hidden;
border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
box-shadow:0 50px 90px -40px rgba(0,0,0,.6),0 0 0 8px color-mix(in srgb,var(--ink) 3%,transparent);
transform:perspective(1400px) rotateX(9deg) translateY(24px);transform-origin:50% 100%;
transition:opacity .9s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1)}
.as-scherm.in{transform:none}
.as-scherm img{display:block;width:100%;height:auto}
/* ── .why overal als kaart (zelfde uitstraling als .kk) */
.why{gap:clamp(12px,1.4vw,18px)}
.why > div,.b-paper2 .why > div{background:var(--kk-vlak);border:1px solid var(--line);border-radius:20px;
box-shadow:none;transition:border-color .3s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover) and (pointer:fine){
.why > div:hover{border-color:color-mix(in srgb,var(--ac) 55%,transparent);transform:translateY(-4px)}
}
@media(max-width:1100px){.kk-grid.kk-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.hz{grid-template-columns:repeat(2,minmax(0,1fr))}.hz::before{display:none}}
@media(max-width:900px){.kk-grid.kk-3{grid-template-columns:1fr}}
@media(max-width:620px){.kk-grid.kk-4,.hz{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
.kk,.kk-lijn,.kk-n,.kk::after,.why > div,.hz li,.hz::before,.as-scherm{transition:none}
.hz li{opacity:1;transform:none}.hz::before{transform:scaleX(1)}.as-scherm{transform:none}
}
/* ══ 17-09-2026 · uitgebouwde dienstpagina: snelheid · goed om te weten ═══════
Lenny: "maak duidelijk hoe belangrijk websitesnelheid is, vooral wat die
persoon krijgt." Balken lopen even lang als de laadtijd zelf (--t × .3 s),
dus "Nu" is eerder klaar dan "Eerst". Alleen transform. Klassen met prefix
sn- / gw- (lab-erft-de-sitestylesheet). */
.kk-ook{margin:clamp(18px,2vw,26px) 0 0;font-size:var(--fs-ui);line-height:1.6;color:var(--ink3);
max-width:68ch}
.sn-duo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:start;
}
.sn-meter{margin:0;padding:clamp(22px,2.4vw,32px);border-radius:20px;background:var(--kk-vlak);
border:1px solid var(--line)}
.sn-kop{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink3)}
.sn-kop span:first-child{color:var(--ink)}
.sn-rij{display:grid;grid-template-columns:52px minmax(0,1fr) 64px;align-items:center;gap:14px;
margin-top:22px}
.sn-lbl{font-size:var(--fs-ui);color:var(--ink3)}
.sn-baan{display:block;height:12px;border-radius:99px;overflow:hidden;
background:color-mix(in srgb,var(--ink) 9%,transparent)}
.sn-bal{display:block;height:100%;width:100%;border-radius:99px;
background:color-mix(in srgb,var(--ink) 38%,transparent);
transform:scaleX(0);transform-origin:left center;
transition:transform calc(var(--t) * .3s) linear .25s}
.sn-na .sn-bal{background:var(--ac-vlak)}
.sn-meter.in .sn-bal{transform:scaleX(var(--w))}
.sn-tijd{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--ink);text-align:right;
font-variant-numeric:tabular-nums}
.sn-na .sn-tijd{color:var(--ac)}
.sn-meter figcaption{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
font-size:13.5px;line-height:1.55;color:var(--ink3)}
.sn-sub{margin:clamp(40px,5vw,64px) 0 0;font-size:clamp(19px,1.6vw,23px);font-weight:400;
letter-spacing:-.02em;color:var(--ink)}
.sn-sub + .kk-grid{margin-top:18px}
@media(max-width:900px){.sn-duo{grid-template-columns:1fr}}
.gw{margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--line)}
.gw-i{border-bottom:1px solid var(--line)}
.gw-i summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
gap:18px;padding:20px 0;min-height:44px;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.01em;color:var(--ink)}
.gw-i summary::-webkit-details-marker{display:none}
.gw-i summary i{position:relative;flex:0 0 18px;height:18px}
.gw-i summary i::before,.gw-i summary i::after{content:"";position:absolute;left:0;right:0;top:8px;height:2px;
border-radius:2px;background:var(--ac-vlak);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.gw-i summary i::after{transform:rotate(90deg)}
.gw-i[open] summary i::after{transform:rotate(0)}
.gw-i p{margin:0 0 22px;max-width:68ch;font-size:var(--fs-ui);line-height:1.65;color:var(--ink3)}
@media(hover:hover) and (pointer:fine){.gw-i summary:hover span{color:var(--ac)}}
.gw-i summary:focus-visible{outline:2px solid var(--ac);outline-offset:4px;border-radius:6px}
@media(prefers-reduced-motion:reduce){
.sn-bal{transition:none}.sn-meter .sn-bal{transform:scaleX(var(--w))}
.gw-i summary i::before,.gw-i summary i::after{transition:none}
}
/* Merkteken op kaarten zonder volgorde (17-09): icoon of groeiende streep i.p.v. 01/02/03 */
.kk-ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;color:var(--ac);
background:color-mix(in srgb,var(--ac) 10%,transparent);
border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);
transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.kk-ic svg{width:22px;height:22px}
.kk-m{display:block;width:34px;height:2px;border-radius:2px;background:var(--ac-vlak);
transform:scaleX(0);transform-origin:left center;transition:transform .6s cubic-bezier(.2,.8,.2,1) .15s}
.kk.rv.in .kk-m{transform:scaleX(1)}
.kk-m + h3{margin-top:22px}
@media(hover:hover) and (pointer:fine){.kk:hover .kk-ic{transform:rotate(-6deg) scale(1.06)}}
@media(prefers-reduced-motion:reduce){.kk-ic,.kk-m{transition:none}.kk-m{transform:none}}
/* ══ 17-09-2026 · "Wat we maken": echte beelden i.p.v. het bewijsblok ═══════════ */
.wb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);
margin-top:clamp(26px,3.2vw,42px)}
.wb-i{margin:0}
.wb-vak{position:relative;overflow:hidden;border-radius:18px;aspect-ratio:4/3;
background:color-mix(in srgb,var(--ink) 6%,var(--paper));border:1px solid var(--line)}
.wb-vak img{display:block;width:100%;height:100%;object-fit:cover;
transform:scale(1.001);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.wb-i figcaption{margin-top:12px;font-size:var(--fs-ui);line-height:1.5;color:var(--ink3)}
@media(hover:hover) and (pointer:fine){.wb-i:hover .wb-vak img{transform:scale(1.05)}}
@media(max-width:900px){.wb{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.wb-vak img{transition:none}}
/* ══ 17-09-2026 · coverflow-carrousel + eigen aanwijzer (referenties van Lenny) ═════
Nagebouwd uit coverflow-carousel.tsx en pointer.tsx, zonder Tailwind. Geen
backdrop-filter op de knoppen (jank-lijst). Alleen transform en opacity bewegen. */
.cf{--cf-card:clamp(180px,24vw,310px);margin-top:clamp(28px,3.6vw,48px)}
.cf-wrap{position:relative}
.cf-frame{overflow:hidden;padding:46px 0;outline:none;touch-action:pan-y;cursor:grab;
perspective:calc(var(--cf-card) * 3)}
.cf-frame:active{cursor:grabbing}
.cf-frame:focus-visible{box-shadow:inset 0 0 0 2px var(--ac);border-radius:20px}
.cf-track{position:relative;height:var(--cf-card);transform-style:preserve-3d;user-select:none;-webkit-user-select:none}
.cf-card{position:absolute;left:50%;top:0;width:var(--cf-card);aspect-ratio:1/1;overflow:hidden;
border-radius:20px;background:var(--kk-vlak);transform:translateX(-50%);will-change:transform;
box-shadow:0 34px 60px -30px rgba(0,0,0,.75),0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent)}
.cf-card img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.cf-nav{position:absolute;top:50%;z-index:200;width:46px;height:46px;margin-top:-23px;border-radius:50%;
display:grid;place-items:center;cursor:pointer;color:var(--ink);
background:color-mix(in srgb,var(--paper) 86%,transparent);border:1px solid var(--line);
transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s ease}
.cf-nav svg{width:20px;height:20px}
.cf-prev{left:clamp(4px,2vw,24px)}.cf-next{right:clamp(4px,2vw,24px)}
@media(hover:hover) and (pointer:fine){.cf-nav:hover{border-color:var(--ac);transform:scale(1.06)}}
.cf-nav:active{transform:scale(.96)}
.cf-cap{margin-top:6px;text-align:center;min-height:3.4em}
.cf-titel{margin:0 auto;max-width:none;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.01em;color:var(--ink)}
.cf-sub{margin:4px auto 0;font-size:var(--fs-ui);color:var(--ink3);max-width:none}
.cf-dots{display:flex;justify-content:center;gap:4px;margin-top:10px}
.cf-dots button{width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.cf-dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink);opacity:.3;
transition:opacity .2s ease,transform .2s ease}
.cf-dots button[aria-current="true"]::before{opacity:1;transform:scale(1.25);background:var(--ac-vlak)}
.cf-dots button:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:50%}
/* de aanwijzer: position via `translate` (geen transition), in- en uitfaden via opacity/scale */
.cf-pointer{position:fixed;left:0;top:0;z-index:400;pointer-events:none;translate:-200px -200px}
.cf-pointer span{display:grid;place-items:center;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;
background:var(--ac-vlak);color:#16181c;font:500 13px/1 var(--sans);letter-spacing:.02em;
opacity:0;transform:scale(.3);transition:opacity .22s ease,transform .32s cubic-bezier(.2,.8,.2,1)}
.cf-pointer.aan span{opacity:1;transform:scale(1)}
.cf-pointer.aan.druk span{transform:scale(.86)}
.cf.met-wijzer .cf-frame{cursor:none}
@media(max-width:700px){.cf-nav{width:40px;height:40px;margin-top:-20px}}
@media(prefers-reduced-motion:reduce){.cf-pointer span,.cf-nav,.cf-dots button::before{transition:none}}
/* ══ 17-09-2026 · Adverteren-kaart: advertentie in Instagram- en TikTok-weergave ═══
Lenny: "voor elke kaart moet duidelijk zijn waarvoor het is." De telefoons zijn
code; het beeld is voorbeeldmerk BRIES. Op aanwijzen komen ze iets naar voren. */
.adf{display:flex;align-items:flex-end;justify-content:center;gap:clamp(12px,1.6vw,22px);
width:100%;padding:clamp(18px,2vw,28px) clamp(10px,1.4vw,20px) 0}
.adf-tel{margin:0;flex:0 1 46%;max-width:230px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.adf-tt{flex-basis:40%;max-width:200px;transform:translateY(-14px)}
.adf-lbl{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ac);
margin:0 0 10px 4px}
.adf-scherm{position:relative;overflow:hidden;border-radius:22px;background:#0b0c0e;color:#f4f5f6;
border:5px solid #1c1e22;box-shadow:0 30px 50px -26px rgba(0,0,0,.8)}
.adf-ig .adf-scherm{background:#fff;color:#111}
.adf-kop{display:flex;align-items:center;gap:8px;padding:10px 10px 8px}
.adf-av{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#c8243f;color:#fff;
font:600 11px/1 var(--sans);font-style:normal}
.adf-kop span{display:grid;line-height:1.15}.adf-kop b{font-size:11.5px}.adf-kop em{font-style:normal;font-size:10px;color:#6b6f76}
.adf-beeld{aspect-ratio:4/5;overflow:hidden}
.adf-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.adf-cta{display:flex;justify-content:space-between;padding:8px 10px;font-size:11.5px;font-weight:600;
border-bottom:1px solid #eceef0;color:#111}
.adf-acties{display:flex;gap:10px;padding:8px 10px 2px;color:#111}
.adf-acties svg,.adf-zij svg{width:18px;height:18px}
.adf-rechts{margin-left:auto;display:flex}
.adf-tekst{margin:0;padding:2px 10px 12px;font-size:11px;line-height:1.35;color:#111;max-width:none}
.adf-tt .adf-scherm{aspect-ratio:9/16}
.adf-vol{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.adf-tt .adf-scherm::after{content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 45%)}
.adf-zij{position:absolute;right:8px;bottom:84px;z-index:1;display:grid;justify-items:center;gap:3px;
font-size:9.5px;color:#fff}
.adf-zij b{margin-bottom:6px;font-weight:600}
.adf-onder{position:absolute;left:10px;right:40px;bottom:10px;z-index:1;display:grid;gap:2px;font-size:11px;color:#fff}
.adf-onder em{font-style:normal;font-size:9.5px;opacity:.8}
.adf-onder p{margin:2px 0 6px;font-size:11px;line-height:1.3;max-width:none;color:#fff}
.adf-knop{justify-self:start;background:#fe2c55;color:#fff;border-radius:4px;padding:5px 9px;font-size:10.5px;font-weight:600}
.adf-bij{margin:12px 0 0;text-align:center;font-size:12px;color:var(--ink3);max-width:none;width:100%}
.pl-bn-im-r:has(.adf){flex-direction:column;justify-content:flex-end;padding-bottom:16px}
@media(hover:hover) and (pointer:fine){
.pl-bn-breed:hover .adf-ig{transform:translateY(-8px) rotate(-1.5deg)}
.pl-bn-breed:hover .adf-tt{transform:translateY(-22px) rotate(1.5deg)}
}
@media(prefers-reduced-motion:reduce){.adf-tel{transition:none}}
/* contrast: `b,strong{color:var(--ink)}` maakt vet op antraciet licht — ook binnen het witte
Instagram-scherm (gemeten 1,09:1). Expliciete kleuren; TikTok-knop donkerder (3,68 → >4,5). */
.adf-ig b{color:#111}.adf-tt b{color:#fff}
.adf-knop{background:#c8103e}
.adf-knop{white-space:nowrap}
@media(max-width:700px){.adf-onder p{display:none}.adf-zij{bottom:64px}.adf-onder{right:34px}}
/* ══ 17-09-2026 · Marketing: leadgeneratie als grote kaart met een leadbord in code ══════
Keuze Lenny ("alleen een leadbord in code"). Voorbeeld van een installatiebedrijf,
gelabeld. Kaarten schuiven gestaffeld in bij het opkomen; de "Gesprek"-kaart ademt.
Alleen transform en opacity. */
.pl-bn-hoog{grid-row:span 2}
.pl-bn-im-l{order:-1}
.pl-bn-lead .pl-bn-im-r{flex:0 0 52%}
.ldb{width:100%;margin:clamp(14px,1.6vw,22px);padding:clamp(16px,1.6vw,22px);border-radius:16px;
background:color-mix(in srgb,var(--ink) 5%,var(--paper));border:1px solid var(--line);
display:flex;flex-direction:column;gap:14px}
.ldb-kop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ldb-kop span{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.ldb-kop i{font-style:normal;font-size:11px;color:var(--ac);border:1px solid color-mix(in srgb,var(--ac) 45%,transparent);
border-radius:999px;padding:3px 9px}
.ldb-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ldb-stats div{padding:10px 12px;border-radius:12px;background:var(--paper2);border:1px solid var(--line)}
.ldb-stats b{display:block;font-size:clamp(20px,1.8vw,26px);font-weight:400;letter-spacing:-.02em;color:var(--ink);
font-variant-numeric:tabular-nums}
.ldb-stats span{font-size:11.5px;color:var(--ink3)}
.ldb-kol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:1 1 auto}
.ldb-k .ldb-kk{display:block;margin:0 0 8px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.ldb-k ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ldb-c{max-width:none;padding:9px 10px;border-radius:10px;background:var(--paper2);border:1px solid var(--line);
display:grid;gap:2px;opacity:0;transform:translateY(10px);
transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.ldb-c b{font-size:12.5px;font-weight:500;color:var(--ink)}
.ldb-c span{font-size:11px;color:var(--ink3)}
.ldb-c em{font-style:normal;font-size:11px;color:var(--ac)}
.ldb-c.heet{border-color:color-mix(in srgb,var(--ac) 60%,transparent);position:relative}
.ldb-c.heet::after{content:"";position:absolute;right:9px;top:10px;width:7px;height:7px;border-radius:50%;
background:var(--ac-vlak);animation:ldb-adem 2.4s ease-in-out infinite}
@keyframes ldb-adem{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.pl-bn-lead.in .ldb-c{opacity:1;transform:none}
.pl-bn-lead.in .ldb-k:nth-child(1) li:nth-child(1){transition-delay:.15s}
.pl-bn-lead.in .ldb-k:nth-child(1) li:nth-child(2){transition-delay:.25s}
.pl-bn-lead.in .ldb-k:nth-child(2) li:nth-child(1){transition-delay:.4s}
.pl-bn-lead.in .ldb-k:nth-child(2) li:nth-child(2){transition-delay:.5s}
.pl-bn-lead.in .ldb-k:nth-child(3) li{transition-delay:.7s}
@media(hover:hover) and (pointer:fine){.pl-bn-lead:hover .ldb-gesprek .ldb-c{transform:translateY(-3px)}}
@media(max-width:900px){.pl-bn-hoog{grid-row:auto}.pl-bn-lead .pl-bn-im-r{flex:0 0 auto}.ldb{margin:14px 14px 0}}
@media(max-width:560px){.ldb-kol{grid-template-columns:1fr}.ldb-k li:nth-child(2){display:none}.ldb-kop span{letter-spacing:.02em}}
@media(prefers-reduced-motion:reduce){.ldb-c{opacity:1;transform:none;transition:none}.ldb-c.heet::after{animation:none}}
/* ══ 17-09-2026 · Adverteren: de feed scrollt door naar de volgende BRIES-post ══════════
Verzoek Lenny ("staat een beetje leeg"). Scherm heeft een vaste verhouding (gemeten van
de oude opmaak: 0,53 desktop, 0,45 mobiel), elke post is precies één scherm hoog, en de
feed schuift per post één schermhoogte op. Vier posities: drie posts + kopie van de
eerste, zodat de sprong terug naar het begin onzichtbaar is. Alleen transform. */
.adf-ig .adf-scherm{aspect-ratio:53/100}
.adf-feed{height:100%;animation:adf-scroll 12s cubic-bezier(.3,.7,.15,1) infinite}
.adf-tt .adf-feed{animation-delay:1.5s}
.adf-post{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden}
.adf-ig .adf-post .adf-beeld{flex:1 1 auto;aspect-ratio:auto;min-height:0}
.adf-3d{display:grid;place-items:center}
.adf-ig .adf-3d{position:relative}
.adf-ig .adf-3d img{position:absolute;left:50%;top:50%;width:auto;height:84%;max-width:none;object-fit:contain;transform:translate(-50%,-50%)}
.adf-tel{min-width:0}
.adf-munt{background:radial-gradient(120% 90% at 50% 40%,#dff3e6 0%,#9fd6b4 100%)}
.adf-tt .adf-scherm::after{content:none}
.adf-tt .adf-post::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.62) 100%)}
.adf-tt .adf-post .adf-zij,.adf-tt .adf-post .adf-onder{z-index:2}
.adf-tt .adf-3d .adf-vol{inset:auto;left:50%;top:36%;width:auto;height:54%;max-width:none;transform:translate(-50%,-50%);object-fit:contain}
.adf-framboos{background:radial-gradient(120% 80% at 50% 38%,#f3a3ad 0%,#b8243c 100%)}
.adf-tt .adf-post:nth-child(3) .adf-vol{object-position:50% 50%}
@keyframes adf-scroll{
0%,26.67%{transform:translateY(0)}
33.33%,60%{transform:translateY(-100%)}
66.67%,93.33%{transform:translateY(-200%)}
100%{transform:translateY(-300%)}
}
@media(max-width:700px){.adf-ig .adf-scherm{aspect-ratio:45/100}}
@media(prefers-reduced-motion:reduce){.adf-feed{animation:none}}
/* ══ 17-09-2026 · "Zo ziet het eruit" op /adverteren/ en /leadgeneratie/ ══════════════
Lenny: subpagina's moeten een eigen vorm hebben, en ook dienstverleners tonen. Alles
code, gelabeld als voorbeeld. Kaarten die een platform voorstellen zijn licht (zoals
het echte platform), met expliciete kleuren zodat de grond ze niet kan omdraaien. */
.et-rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);
margin-top:clamp(28px,3.4vw,46px);align-items:start}
.et-rij-breed{grid-template-columns:1fr}
/* ── Facebook-campagne (/adverteren/) ──────────────────────────────────────
⭐ 22-09, Lenny: *"benoem dat we gespecialiseerd zijn in campagnes maken op
Facebook en Google, en laat een Facebook-interface zien, niet alleen Google —
en dan bedoel ik een Facebook-CAMPAGNE."* Er stond alleen een feed-post; dit
is het campagnescherm ernaast. Donker paneel, zodat het naast het witte
Google-resultaat staat in plaats van erop te lijken. */
.et-fb{background:#15171c;color:#e9edf3;border-radius:18px;overflow:hidden;
border:1px solid rgba(255,255,255,.08)}
.et-fb-bar{display:flex;align-items:center;gap:10px;padding:14px 18px;
border-bottom:1px solid rgba(255,255,255,.08);font-size:13px}
.et-fb-bar b{font-weight:500;color:#fff}
.et-fb-bar span{color:#9aa4b2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.et-fb-aan{margin-left:auto;flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
text-transform:uppercase;color:#7fd3a0;border:1px solid rgba(127,211,160,.35);
border-radius:999px;padding:4px 10px;font-style:normal}
.et-fb-doel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 14px;
margin:0;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.et-fb-doel dt{grid-row:1;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
text-transform:uppercase;color:#8b95a3}
.et-fb-doel dd{grid-row:2;margin:0;font-size:14.5px;color:#fff}
.et-fb-sets{list-style:none;margin:0;padding:14px 18px;display:grid;gap:14px}
.et-fb-sets li{display:grid;gap:7px;font-size:13px}
.et-fb-sets b{font-weight:400;color:#e9edf3}
.et-fb-sets em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:#9aa4b2}
.et-fb-bal{display:block;height:6px;border-radius:999px;background:rgba(255,255,255,.09);
position:relative;overflow:hidden}
.et-fb-bal::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0%);
border-radius:999px;background:linear-gradient(90deg,#ff8a63,#ff6a3d)}
.et-fb-sets li.uit b,.et-fb-sets li.uit em{color:#7d8794}
.et-fb-sets li.uit .et-fb-bal::after{background:rgba(255,255,255,.18)}
.et-fb-bij{margin:0;padding:0 18px 16px;font-size:12.5px;line-height:1.5;color:#8b95a3}
@media(max-width:700px){.et-fb-doel{grid-template-columns:repeat(2,minmax(0,1fr))}}
.et-vak{margin:0}
.et-lbl{display:block;margin:0 0 10px;font:500 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ac)}
.et-g,.et-m,.et-mail{background:#fff;color:#1f1f1f;border-radius:18px;padding:clamp(16px,1.6vw,22px);
box-shadow:0 18px 40px -24px rgba(0,0,0,.55)}
.et-zoek{display:flex;align-items:center;gap:10px;border:1px solid #dfe1e5;border-radius:999px;padding:10px 16px;
font-size:14px;color:#202124;overflow:hidden}
.et-zoek svg{width:16px;height:16px;flex:none;color:#5f6368}
.et-typ{position:relative;white-space:nowrap}
.et-typ::after{content:"";position:absolute;inset:-2px -4px;background:#fff;transform-origin:right center;
animation:et-typ 9s steps(34,end) infinite}
.et-adv{margin-top:16px;animation:et-adv 9s ease infinite}
.et-gs{font-size:12px;font-weight:700;color:#202124}
.et-site{display:flex;align-items:center;gap:10px;margin-top:8px}
.et-site i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#e8f0e9;color:#1e6b3a;
font:700 12px/1 var(--sans);font-style:normal}
.et-site span{display:grid;line-height:1.25}.et-site b{font-size:13px;font-weight:500;color:#202124}
.et-site em{font-style:normal;font-size:12px;color:#4d5156}
.et-titel{margin:8px 0 0;font-size:clamp(16px,1.35vw,19px);line-height:1.3;color:#1a0dab;max-width:none}
.et-oms{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:#4d5156;max-width:none}
.et-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px}
.et-links span{font-size:13px;color:#1a0dab}
.et-org{display:grid;gap:9px;margin-top:20px;padding-top:16px;border-top:1px solid #eceff1}
.et-org i{display:block;height:9px;border-radius:5px;background:#eceff1}
.et-org i:nth-child(1){width:46%}.et-org i:nth-child(2){width:88%}.et-org i:nth-child(3){width:72%}
@keyframes et-typ{0%{transform:scaleX(1)}32%,100%{transform:scaleX(0)}}
@keyframes et-adv{0%,34%{opacity:0;transform:translateY(8px)}42%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.et-m-kop{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.et-m-kop span{font:500 12px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#1f1f1f}
.et-m-kop i{font-style:normal;font-size:11px;color:#9a3412;border:1px solid #f0c3ad;border-radius:999px;padding:3px 9px}
.et-m table{width:100%;border-collapse:collapse;font-size:13px}
.et-m th,.et-m td{text-align:left;padding:10px 6px;border-bottom:1px solid #eceff1;font-weight:400;color:#1f1f1f}
.et-m thead th{font-size:11.5px;color:#5f6368;padding-top:0}
.et-m td{font-variant-numeric:tabular-nums;white-space:nowrap}
.et-m td:nth-child(3){position:relative;min-width:92px}
.et-m td b{position:relative;font-weight:600}
.et-bar{position:absolute;left:6px;top:50%;height:18px;width:calc((100% - 12px) * var(--w));margin-top:-9px;border-radius:5px;
background:#fbe1d6;transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.2,.8,.2,1) .3s}
.et-vak.in .et-bar{transform:scaleX(1)}
.et-m td b{padding-left:6px;color:#1f1f1f}
.et-g b,.et-m b,.et-mail b{color:#1f1f1f}
.et-m-bij{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:#4d5156;max-width:none}
.et-merk{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.et-tekst h3{margin:0;font-size:clamp(22px,2vw,30px);font-weight:400;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.et-tekst p{margin:12px 0 0;color:var(--ink3);font-size:var(--fs-ui);line-height:1.6}
.et-telefoons .adf{padding:8px 0}
/* leadgeneratie */
.et-lead-rij{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.et-lead .ldb{margin:0}
.et-lead.in .ldb-c{opacity:1;transform:none}
.et-lead.in .ldb-k:nth-child(1) li:nth-child(1){transition-delay:.15s}
.et-lead.in .ldb-k:nth-child(1) li:nth-child(2){transition-delay:.25s}
.et-lead.in .ldb-k:nth-child(2) li:nth-child(1){transition-delay:.4s}
.et-lead.in .ldb-k:nth-child(2) li:nth-child(2){transition-delay:.5s}
.et-lead.in .ldb-k:nth-child(3) li{transition-delay:.7s}
.et-mail-meta{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid #eceff1;font-size:12.5px}
.et-mail-meta dt{color:#5f6368}.et-mail-meta dd{margin:0;color:#1f1f1f}
.et-mail-tekst p{margin:0 0 9px;font-size:13.5px;line-height:1.55;color:#1f1f1f;max-width:none}
.et-tijd{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px solid #eceff1;display:flex;flex-wrap:wrap;gap:8px}
.et-tijd li{font-size:12px;color:#4d5156;padding:5px 10px;border-radius:999px;background:#f3f4f6;
opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.et-tijd b{font-weight:600;color:#1f1f1f}
.et-tijd li:last-child{background:#fbe1d6}
.et-mailvak.in .et-tijd li{opacity:1;transform:none}
.et-mailvak.in .et-tijd li:nth-child(1){transition-delay:.5s}
.et-mailvak.in .et-tijd li:nth-child(2){transition-delay:1.1s}
.et-mailvak.in .et-tijd li:nth-child(3){transition-delay:1.7s}
@media(max-width:900px){.et-rij,.et-merk,.et-lead-rij{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
.et-typ::after{animation:none;transform:scaleX(0)}.et-adv{animation:none}
.et-bar,.et-tijd li{transition:none}.et-bar{transform:scaleX(1)}.et-tijd li{opacity:1;transform:none}
}
/* ══ 17-09-2026 · "Hoe we het aanpakken" minder droog: een licht loopt over de lijn,
elke stap geeft een tik als het licht erlangs komt. Alleen waar de lijn bestaat. */
@media(min-width:1101px){
/* de lichtlaag schuift zijn eigen breedte op: horizontaal knippen, anders loopt de pagina 300px uit */
.hz{overflow-x:clip;overflow-clip-margin:24px}
.hz::after{content:"";position:absolute;left:8px;right:30px;top:14px;height:12px;pointer-events:none;
background:radial-gradient(circle at 11px 50%,#fff 0 2.5px,var(--ac) 3.5px,color-mix(in srgb,var(--ac) 40%,transparent) 6px,transparent 11px);
opacity:0;animation:hz-loop 7s linear 1.6s infinite}
.hz-n::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--ac);opacity:0;
animation:hz-tik 7s ease-out infinite;animation-delay:calc(1.6s + var(--i) * .91s)}
}
@keyframes hz-loop{0%{transform:translateX(0);opacity:0}4%{opacity:1}62%{transform:translateX(100%);opacity:1}70%,100%{transform:translateX(100%);opacity:0}}
@keyframes hz-tik{0%{opacity:.85;transform:scale(1)}14%,100%{opacity:0;transform:scale(1.9)}}
@media(prefers-reduced-motion:reduce){.hz::after,.hz-n::after{animation:none;display:none}}
/* ══ 17-09-2026 · Kaarten minder droog: het icoon tekent zichzelf bij het opkomen, en de
gloed volgt de muis (--mx/--my uit site.js). Alleen transform en opacity bewegen. */
.kk-ic svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1) .3s}
.kk.rv.in .kk-ic svg *{stroke-dashoffset:0}
.kk::after{inset:auto;left:-170px;top:-170px;width:340px;height:340px;border-radius:50%;
background:radial-gradient(circle,color-mix(in srgb,var(--ac) 22%,transparent) 0%,transparent 65%);
transform:translate(var(--mx,40px),var(--my,40px))}
@media(prefers-reduced-motion:reduce){.kk-ic svg *{transition:none;stroke-dashoffset:0}}
/* ══ 17-09-2026 · PROEF A: alle diensten als kaarten (naar propest.ai) ═════════════════ */
.dkk-rij{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);
margin-top:clamp(16px,2vw,24px)}
.dkk{grid-column:span 2;position:relative;overflow:hidden;display:flex;flex-direction:column;
background:var(--kk-vlak);border:1px solid var(--line);border-radius:20px;text-decoration:none;
transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),border-color .3s ease}
.dkk-breed{grid-column:span 6}
.dkk-bld{aspect-ratio:21/6;overflow:hidden}
.dkk-bld img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.dkk-tx{padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:8px;flex:1 1 auto}
.dkk-lbl{font:500 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ac)}
.dkk h3{margin:2px 0 0;font-size:clamp(20px,1.7vw,26px);font-weight:400;letter-spacing:-.02em;
line-height:1.2;color:var(--ink)}
.dkk p{margin:0;font-size:var(--fs-ui);line-height:1.55;color:var(--ink3);max-width:none}
.dkk-meer{margin-top:auto;padding-top:10px;font-style:normal;font-size:var(--fs-ui);color:var(--ac);
display:inline-flex;gap:8px;align-items:center}
.dkk-meer b{font-weight:400;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover) and (pointer:fine){
.dkk:hover{border-color:color-mix(in srgb,var(--ac) 55%,transparent)}
.dkk.rv.in:hover{transform:translateY(-6px)}
.dkk:hover .dkk-bld .dkk-hoofd{transform:scale(1.04)}
.dkk:hover .dkk-meer b{transform:translateX(5px)}
}
@media(max-width:900px){.dkk-rij{grid-template-columns:1fr}.dkk,.dkk-breed{grid-column:span 1}
.dkk-bld{aspect-ratio:16/7}}
/* ══ PROEF B: de reis houdt zijn blokken, maar toont dienstkaarten ════════════════════ */
.rb-bld-kk{display:flex;flex-direction:column;gap:12px;justify-content:center;aspect-ratio:auto}
.rb-kk{position:relative;display:block;padding:18px 20px;border-radius:16px;text-decoration:none;
background:color-mix(in srgb,var(--ink) 7%,var(--paper));border:1px solid var(--line);
transform:translateZ(calc(var(--kz,0) * 1px));transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s ease}
.rb-kk:nth-child(1){--kz:40}.rb-kk:nth-child(2){--kz:0}.rb-kk:nth-child(3){--kz:-40}
.rb-kk-n{font:500 11px/1 var(--mono);color:var(--ac)}
.rb-kk h3{margin:8px 0 0;font-size:clamp(18px,1.4vw,22px);font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.rb-kk p{margin:6px 0 0;font-size:var(--fs-ui);line-height:1.5;color:var(--ink3);max-width:42ch}
.rb-kk i{display:inline-flex;gap:7px;margin-top:10px;font-style:normal;font-size:var(--fs-ui);color:var(--ac)}
.rb-kk i b{font-weight:400;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover) and (pointer:fine){
.rb-kk:hover{border-color:var(--ac);transform:translateZ(calc(var(--kz,0) * 1px + 60px))}
.rb-kk:hover i b{transform:translateX(5px)}}
/* proef A: rij van drie = breed + twee halve, elk met beeld */
.dkk-half{grid-column:span 3}
.dkk-half .dkk-bld{aspect-ratio:16/8}
.dkk-kop{display:grid;justify-items:center;text-align:center;gap:16px;
width:min(100%,1060px);margin:0 auto clamp(30px,3.6vw,56px)}
.dkk-kop .h2{text-wrap:balance;max-width:none}
.dkk-kop .lbl b{letter-spacing:.14em;text-transform:uppercase;font-size:var(--fs-micro);
color:var(--mut)}
@media(max-width:820px){.dkk-kop{max-width:none;justify-items:start;text-align:left}}
.dkk-sec .dkk-rij + .dkk-rij{margin-top:clamp(12px,1.4vw,20px)}
/* ══ 17-09-2026 · De Systeemscan ══════════════════════════════════════════════ */
.sc-kop{padding-bottom:clamp(10px,1.4vw,18px)}
.sc-kop h1{margin:14px 0 0;font-size:clamp(34px,4.4vw,62px);font-weight:300;letter-spacing:-.035em;
line-height:1.03;color:var(--ink)}
.sc-kop .lead{margin-top:clamp(16px,2vw,24px)}
.sc{max-width:820px;margin:0 auto;position:relative}
.sc-balk{height:3px;border-radius:2px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden}
.sc-balk i{display:block;height:100%;background:var(--ac-vlak);transform:scaleX(0);transform-origin:left center;
transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sc-stap{border:0;margin:0;padding:clamp(26px,3vw,40px) 0 0}
.sc-vraag{display:block;padding:0;font-size:clamp(24px,2.6vw,36px);font-weight:300;letter-spacing:-.025em;
line-height:1.15;color:var(--ink)}
.sc-tel{display:block;margin-bottom:12px;font:500 11px/1 var(--mono);letter-spacing:.08em;
text-transform:uppercase;color:var(--ac)}
.sc-onder{margin:12px 0 0;font-size:var(--fs-ui);color:var(--ink3)}
.sc-opties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(20px,2.4vw,28px)}
.sc-optie{position:relative;display:block;cursor:pointer}
.sc-optie input{position:absolute;opacity:0;width:0;height:0}
.sc-o-tx{display:block;padding:18px 20px;border-radius:16px;border:1px solid var(--line);
background:var(--kk-vlak);transition:border-color .25s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.sc-o-tx b{display:block;font-size:var(--fs-lead);font-weight:400;color:var(--ink)}
.sc-o-tx em{display:block;margin-top:5px;font-style:normal;font-size:var(--fs-ui);color:var(--ink3)}
.sc-optie input:checked + .sc-o-tx{border-color:var(--ac);
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 55%,transparent)}
.sc-optie input:focus-visible + .sc-o-tx{outline:2px solid var(--ac);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.sc-optie:hover .sc-o-tx{border-color:color-mix(in srgb,var(--ac) 50%,transparent);transform:translateY(-3px)}}
.sc-tekst,.sc-velden input{width:100%;margin-top:18px;padding:16px 18px;border-radius:14px;
border:1px solid var(--line);background:var(--kk-vlak);color:var(--ink);font:inherit;font-size:16px}
.sc-velden{display:grid;gap:14px;margin-top:8px}
.sc-velden label{display:grid;gap:0;font-size:var(--fs-ui);color:var(--ink3)}
.sc-klein{margin:14px 0 0;font-size:var(--fs-micro);color:var(--mut)}
.sc-klein a,.sc-uit-mail a{color:var(--ac)}
.sc-knoppen{display:flex;gap:12px;margin-top:clamp(24px,3vw,36px)}
.sc-fout{margin:12px 0 0;font-size:var(--fs-ui);color:var(--ac)}
.sc-uit{max-width:1000px;margin:0 auto}
.sc-uit .lbl{display:block;margin-bottom:10px}
.sc-uit-lead{margin:16px 0 0;color:var(--ink3)}
.sc-kaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(24px,3vw,34px)}
.sc-kaart{display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2vw,28px);border-radius:20px;
border:1px solid var(--line);background:var(--kk-vlak);text-decoration:none;
transition:border-color .3s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.sc-k-lbl{font:500 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ac)}
.sc-kaart h3{margin:2px 0 0;font-size:clamp(19px,1.6vw,24px);font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.sc-k-waarom{margin:0;font-size:var(--fs-ui);line-height:1.55;color:var(--ink3)}
.sc-kaart i{margin-top:auto;padding-top:10px;font-style:normal;font-size:var(--fs-ui);color:var(--ac)}
.sc-kaart i b{font-weight:400}
@media(hover:hover) and (pointer:fine){.sc-kaart:hover{border-color:var(--ac);transform:translateY(-5px)}}
.sc-uit-noot,.sc-uit-mail{margin:clamp(20px,2.4vw,28px) 0 0;font-size:var(--fs-ui);color:var(--ink3)}
.sc-uit-mail{color:var(--ac)}
@media(max-width:760px){.sc-opties{grid-template-columns:1fr}.sc-kaarten{grid-template-columns:1fr}
.sc-knoppen{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.sc-balk i,.sc-o-tx,.sc-kaart{transition:none}}
/* ══ 17-09-2026 · Vier knopvarianten (proef `/_lab-knoppen.html`) ═════════════════════
Lenny: "de buttons moeten enthousiast zijn om op te klikken." Alleen transform en
opacity; niets dat per frame opnieuw getekend wordt. */
.kl{position:relative;overflow:hidden;isolation:isolate}
.kl i{display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
/* A · glans */
[data-knop="glans"]::after{content:"";position:absolute;inset:0 auto 0 -40%;width:40%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
transform:translateX(0);animation:kl-glans 4.5s ease-in-out infinite}
@keyframes kl-glans{0%,55%{transform:translateX(0)}85%,100%{transform:translateX(420%)}}
/* B · magnetisch (de verplaatsing zelf staat in knoplab.js) */
[data-knop="magneet"]{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
[data-knop="magneet"]:hover i{transform:translateX(6px)}
/* C · ademende gloed */
[data-knop="adem"]{overflow:visible}
[data-knop="adem"]::before{content:"";position:absolute;inset:-3px;border-radius:inherit;
border:1px solid var(--ac);opacity:0;animation:kl-adem 3.2s ease-out infinite;z-index:-1}
@keyframes kl-adem{0%{opacity:.75;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.14)}}
/* D · vullen */
[data-knop="vullen"]::after{content:"";position:absolute;inset:0;background:var(--ac-vlak);
transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:-1}
[data-knop="vullen"]:hover::after{transform:scaleX(1)}
[data-knop="vullen"]:hover{color:#fff;border-color:transparent}
[data-knop="vullen"]:hover i{transform:translateX(7px)}
@media(prefers-reduced-motion:reduce){
[data-knop="glans"]::after,[data-knop="adem"]::before{animation:none;opacity:0}
.kl i,[data-knop="vullen"]::after{transition:none}
}
/* ══ 17-09-2026 · Knop A "glans" op de hele site (keuze Lenny) ════════════════════════
Een lichtstreep loopt om de paar seconden over de hoofdknop. Alleen transform. */
.btn-p{position:relative;overflow:hidden;isolation:isolate}
/* ⭐ 22-09, Lenny: *"de glans is één keer leuk, maar niet twee, drie keer."*
Liep op `infinite`, dus om de 4,5 s over élke hoofdknop op het scherm.
Nu: één keer kort na het laden, daarna alleen nog bij aanwijzen. */
.btn-p::after{content:"";position:absolute;inset:0 auto 0 -40%;width:40%;pointer-events:none;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
transform:translateX(0);animation:kl-glans 1.5s ease-in-out .7s 1 both}
@media(hover:hover) and (pointer:fine){
.btn-p:hover::after{animation:kl-glans 1.1s ease-in-out 0s 1 both}}
@media(prefers-reduced-motion:reduce){.btn-p::after{animation:none;opacity:0}}
/* ══ 17-09-2026 · Dienstkaarten: onze eigen beelden waaieren open bij aanwijzen ═══════
Lenny: "ik zie geen animaties terug in de kaarten, alleen de stockfoto's." */
.dkk-bld{position:relative}
.dkk-hoofd{position:relative;z-index:1;transition:transform .6s cubic-bezier(.2,.8,.2,1),
opacity .45s ease}
.dkk-x{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;
opacity:0;z-index:2;transform:translate(0,0) rotate(0) scale(1.04);
transition:opacity .5s ease,transform .65s cubic-bezier(.2,.8,.2,1);box-shadow:0 20px 50px -28px rgba(0,0,0,.8)}
@media(hover:hover) and (pointer:fine){
.dkk:hover .dkk-hoofd{transform:scale(1.06) translateX(-6%);opacity:.55}
.dkk:hover .dkk-x{opacity:1}
.dkk:hover .dkk-x1{transform:translate(-15%,-9%) rotate(-2.4deg) scale(.56);transition-delay:.02s}
.dkk:hover .dkk-x2{transform:translate(4%,8%) rotate(1.8deg) scale(.56);transition-delay:.09s}
.dkk:hover .dkk-x3{transform:translate(21%,-6%) rotate(3.2deg) scale(.52);transition-delay:.16s}
}
@media(prefers-reduced-motion:reduce){.dkk-hoofd,.dkk-x{transition:none}}
/* ══ 17-09-2026 · Designproef op /webdesign/ — zes trucs die echt draaien ═══════════════ */
.dp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);
margin-top:clamp(26px,3.2vw,42px)}
.dp-vak{margin:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--kk-vlak)}
.dp-doek{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;
background:color-mix(in srgb,var(--ink) 6%,var(--paper))}
.dp-vak figcaption{padding:16px 20px 20px;display:grid;gap:4px}
.dp-vak figcaption b{font-size:var(--fs-lead);font-weight:400;color:var(--ink)}
.dp-vak figcaption span{font-size:var(--fs-ui);color:var(--ink3)}
/* 1 kantelkaart */
.dp-kantel{perspective:700px;width:72%}
.dp-k-in{display:grid;gap:6px;padding:22px;border-radius:16px;background:var(--paper);
border:1px solid var(--line);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
transition:transform .25s ease-out;box-shadow:0 24px 50px -30px rgba(0,0,0,.8)}
.dp-k-lbl{font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ac)}
.dp-k-in b{font-size:20px;font-weight:400;color:var(--ink)}
.dp-k-in i{font-style:normal;font-size:12.5px;color:var(--ink3)}
/* 2 licht dat volgt */
.dp-licht{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden}
.dp-licht::after{content:"";position:absolute;left:-120px;top:-120px;width:240px;height:240px;border-radius:50%;
background:radial-gradient(circle,color-mix(in srgb,var(--ac) 45%,transparent),transparent 65%);
transform:translate(var(--lx,50%),var(--ly,50%))}
.dp-licht span{position:relative;z-index:1;font-size:var(--fs-ui);color:var(--ink3)}
/* 3 teller */
.dp-tel{display:grid;justify-items:center;gap:4px}
.dp-tel b{font-size:clamp(38px,4vw,58px);font-weight:300;letter-spacing:-.03em;color:var(--ink);
font-variant-numeric:tabular-nums}
.dp-tel i{font-style:normal;font-size:var(--fs-ui);color:var(--ink3)}
/* 4 voor en na */
.dp-split{position:relative;width:100%;height:100%;overflow:hidden;cursor:ew-resize;touch-action:none}
.dp-s-a,.dp-s-b{position:absolute;inset:0;display:grid;align-items:center;font-size:var(--fs-ui)}
.dp-s-a span{justify-self:start;padding-left:18px}.dp-s-b span{justify-self:end;padding-right:18px}
.dp-s-a{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--ink) 9%,var(--paper)) 0 10px,
color-mix(in srgb,var(--ink) 5%,var(--paper)) 10px 20px);color:var(--ink3)}
.dp-s-b{background:linear-gradient(120deg,color-mix(in srgb,var(--ac) 30%,var(--paper)),var(--paper));
color:var(--ink);clip-path:inset(0 0 0 var(--split,50%))}
.dp-greep{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:var(--ac-vlak)}
.dp-greep::after{content:"";position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
border-radius:50%;background:var(--ac-vlak)}
/* 5 magneet */
.dp-mag{display:grid;place-items:center;width:100%;height:100%}
.dp-m-knop{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
/* 6 band */
.dp-band{width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.dp-b-in{display:flex;width:max-content;animation:dp-band 16s linear infinite}
.dp-b-in span{font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;color:var(--ink);white-space:nowrap;padding-right:8px}
@keyframes dp-band{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:900px){.dp-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.dp-b-in{animation:none}.dp-k-in,.dp-m-knop{transition:none}}
/* ── de vier stappen als één rij (20-09-2026) ───────────────────────────────
Was een tijdlijn van 2630 px met een lege tegenkolom per rij (gemeten door
Fable). Nu vier kaarten naast elkaar, tekst links uitgelijnd, geen beeld. */
.sk-rij{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.sk{position:relative;padding:clamp(18px,1.8vw,26px);border-radius:var(--r,14px);
background:color-mix(in srgb,var(--ink) 5%,transparent);
border:1px solid var(--line);overflow:hidden}
.sk-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
border-radius:12px;background:color-mix(in srgb,var(--ac) 16%,transparent);color:var(--ac)}
.sk-ic svg{width:21px;height:21px}
.sk-nr{display:block;margin-top:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.sk-t{margin:6px 0 0;font-size:clamp(17px,1.35vw,21px);font-weight:400;line-height:1.2}
.sk-p{margin:8px 0 0;font-size:clamp(14px,1vw,16px);line-height:1.5;color:var(--mut)}
.sk-lijn{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--ac-vlak);
transition:width .5s ease}
.sk.in .sk-lijn{width:100%}
@media(hover:hover) and (pointer:fine){.sk:hover{transform:translateY(-3px)}}
.sk{transition:transform .25s ease}
@media (max-width:1100px){.sk-rij{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.sk-rij{grid-template-columns:1fr}}
/* ── grond "apple" (20-09-2026) ─────────────────────────────────────────────
Lenny: *"kun je Apple-stijl doen voor de grond, de kaarten en het lettertype."*
Gemeten op apple.com (dezelfde waarden die zij al jaren gebruiken): de pagina
staat op #f5f5f7, vlakken erop zijn wit, tekst is #1d1d1f, grijs is #6e6e73,
hoeken 18 px en schaduwen in plaats van randen. De letter is de systeemletter
van het apparaat — op een Mac of iPhone is dat SF Pro, elders valt hij terug
op Inter. Dat mag: het is de OS-letter, geen bestand dat wij meeleveren.
⚠️ SF Pro nooit in een logo gebruiken; dat verbiedt Apple's licentie. */
html[data-grond="apple"]{
/* ⭐ 21-09: van bijna-wit naar een warme middentoon. Gemeten aanleiding:
de site zat op 56,9 % bijna-wit (min(r,g,b) > 240), de referentie die
Lenny aandroeg op 8,1 %. De oude waarden stonden op
#f5f5f7 / #ffffff / #ebebed. */
--paper:#eeece8; --paper2:#f4f1ec; --paper3:#e0ddd7;
/* ⚠️ Apple zelf gebruikt #86868b (3,0:1) en #6e6e73. Die laatste haalt 5,07:1 op
wit en 4,66:1 op de grond, maar op --paper3 (#ebebed, de ingezonken vlakken)
zakt hij naar 4,26:1 — 15 teksten stonden daardoor onder de norm, gemeten
20-09 over 34 paginaladingen. Eén stap donker haalt élk van de drie tonen. */
--ink:#1d1d1f; --ink3:#5a5d63; --mut:#5a5d63;
--line:rgba(0,0,0,.09);
--r:18px;
--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Inter,system-ui,sans-serif;
--disp:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Inter,system-ui,sans-serif;
--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
}
html[data-grond="apple"] body{background:var(--paper);font-family:var(--sans);
-webkit-font-smoothing:antialiased}
/* Apple zet koppen strak en halfvet, niet licht: -.022em en 600. */
html[data-grond="apple"] h1,
html[data-grond="apple"] h2,
html[data-grond="apple"] .h2,
html[data-grond="apple"] .hkaart h1{font-family:var(--disp);font-weight:600;letter-spacing:-.022em}
html[data-grond="apple"] .hkaart h1{line-height:1.06}
/* Kaarten: wit, ronde hoeken, een zachte schaduw en géén rand. */
html[data-grond="apple"] .sk,
html[data-grond="apple"] .kk,
html[data-grond="apple"] .why,
html[data-grond="apple"] .qb-k,
html[data-grond="apple"] .bw-k{background:#fff;border-color:transparent;
box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06)}
html[data-grond="apple"] .hk-bak{border-radius:22px}
/* De sectie die direct op de dienstfoto volgt begon met de volle ruimte,
waardoor er 122 px lege lichte band onder elke foto stond — de "witte
balk" die Lenny drie keer noemde. Gemeten op alle zes de dienstpagina's. */
.krijg-na-beeld,
html[data-stijl="augen"] .krijg-na-beeld{padding-top:clamp(26px,3vw,44px)}
/* ── één foto per subpagina (20-09-2026) ────────────────────────────────────
Lenny: *"ik wil per subpagina ook wel een foto zien, iets nuttigs."*
Breed en laag, zodat de foto de tekst onderbreekt maar geen scherm opeet.
Op mobiel 3:2, anders wordt hij een streep van 60 px. */
.bb{margin:clamp(26px,3.4vw,52px) 0 0;padding:0;border-radius:var(--r);overflow:hidden;
position:relative;background:var(--paper3)}
.bb img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:21/9}
.bb-bij{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 12px;
font-size:var(--fs-micro);color:#fff;
background:linear-gradient(to top,rgba(10,11,13,.72),rgba(10,11,13,0))}
@media(max-width:700px){.bb img{aspect-ratio:3/2}}
/* ── minder wit, zonder donker te worden (20-09-2026) ──────────────────────
Lenny: *"ik wil zo min mogelijk witte achtergrond zien"* — en eerder op de
dag: *"wat brighter, niet donker."* Die twee samen betekenen middentonen,
geen zwarte banden.
Gemeten vóór: 16 pagina's, gemiddeld 82,1 % bijna-wit (grijswaarde >= 240)
en maar 7,2 % in de lichte middenband. Oorzaak: --paper (#f5f5f7, waarde 245)
en --paper2 (#fff, 255) tellen allebei als wit, dus de banden wisselden wel
maar je zag het nauwelijks.
Nu krijgt elke tweede band een echt zichtbare toon: #e3e3e8 (waarde 227) valt
in de middenband. Apple doet het zelf net zo, met #e8e8ed en #d2d2d7.
Het grijs #636368 haalt daarop 4,67:1, de tekst 13,16:1 — allebei boven de norm. */
/* ⚠️ Eerst #e3e3e8 (waarde 227). Daar zakt het merkaccent terracotta naar 4,27:1
en dat is onder de norm — gemeten op een kop van 23 px, net te klein om als
"grote tekst" te tellen. Terracotta is van de zes paletten de zwakste; op
#ececf1 haalt hij 4,64:1 en het grijs 5,07:1, terwijl de waarde 237 nog
ruim onder de wit-grens van 240 blijft. */
html[data-grond="apple"]{--band:#ececf1}
html[data-grond="apple"] .b-ink{background:var(--band)}
/* kaarten op die band blijven wit, anders verdwijnt het onderscheid */
html[data-grond="apple"] .b-ink .sk,
html[data-grond="apple"] .b-ink .kk,
html[data-grond="apple"] .b-ink .why,
html[data-grond="apple"] .b-ink .note,
html[data-grond="apple"] .b-ink .job{background:#fff;border-color:transparent;
box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06)}
/* Knoppen in Apple's vorm: volle pil, halfvet, geen rand. */
html[data-grond="apple"] .btn{border-radius:980px;font-weight:500}
html[data-grond="apple"] .hk-onder .btn-s{border-color:transparent;background:var(--paper3);color:var(--ink)}
@media(hover:hover) and (pointer:fine){
html[data-grond="apple"] .hk-onder .btn-s:hover{background:#e3e3e6;color:var(--ink)}}
/* ⚠️ Twee contrastfouten die pas op de Apple-grond zichtbaar werden (gemeten
20-09): de menu-items in de pil haalden 4,19:1 met het grijs van de grond, en
het label op de dia's van de cases stond in bijna-wit omdat het ooit op een
donkere band lag — op mobiel ligt die band nu licht. */
html[data-grond="apple"] .pill a:not(.btn):not([class*="cta"]){color:#4b4b50}
/* ⚠️ :not([class*="cta"]) is hier geen sierregel. Zonder die uitzondering krijgt
de knop "Plan een gesprek" op /contact/ (waar hij aria-current="page" draagt)
color:var(--ink) op een vulling van var(--ink) = 1,00:1. Gemeten 20-09-2026,
op elke kleur. De regel erboven sluit .cta al uit; deze deed dat niet. */
html[data-grond="apple"] .pill a:not([class*="cta"]):hover,
html[data-grond="apple"] .pill a:not([class*="cta"])[aria-current]{color:var(--ink)}
html[data-grond="apple"] .cl-slides-lbl{color:#fff;background:rgba(0,0,0,.62);
padding:4px 10px;border-radius:999px}
/* ── dienstkaarten met animatie (20-09-2026) ────────────────────────────────
Vervangt de gepinde reis. Vier kaarten per rij op 1440, elk met een eigen
tekening die beweegt zodra de kaart in beeld komt. Alleen transform, opacity
en stroke-dashoffset — geen layout-eigenschappen, geen canvas. */
/* bento: zes kolommen, elke rij een andere verdeling (4+2, 2+4, 3+3, 4+2) */
.dka-rij{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
gap:clamp(14px,1.6vw,22px);margin-top:clamp(14px,1.6vw,22px);align-items:start}
.dka-s2{grid-column:span 2} .dka-s3{grid-column:span 3} .dka-s4{grid-column:span 4}
/* de brede kaarten dragen echt werk: drie beelden die elkaar aflossen */
.dka-med{display:block;border-radius:14px;overflow:hidden;position:relative}
.dka-med-an{background:color-mix(in srgb,var(--ink) 92%,transparent);padding:14px 12px}
/* De BRIES-telefoons in de kaart (20-09-2026). Ze staan al op /adverteren/;
hier krimpen ze mee zonder dat de opmaak daar verandert. */
.dka-med-adf{padding:16px 12px 12px;display:flex;justify-content:center;
background:#fbfaf8}
.dka-med-adf .adf-lbl{color:var(--ac-d)}
.dka-med-adf .adf{margin:0;gap:clamp(12px,1.6vw,22px);align-items:flex-start;padding-top:0}
.dka-med-adf .adf-tt{transform:none}
.dka-med-adf .adf-bij{display:none}
.dka-med-adf .adf-tel{width:clamp(108px,12vw,148px)}
.dka-med-adf .adf-lbl{font-size:9.5px;margin-bottom:6px;color:var(--ac-d)}
/* De diavoorstelling van onze sites in de brede kaart (21-09-2026, punt 3d+4e).
Hij draagt zijn eigen bijschrift en stippen, dus geen donker vlak eromheen;
alleen de verhouding en de hoeken komen van de kaart. */
.dka-med-site{background:#101114}
.dka-med-site .pl-bn-dia{margin:0;border-radius:0;aspect-ratio:21/9;min-height:0}
/* een schermafdruk van een site lees je van BOVEN af: kop, menu, hero. Met de
standaard `center` sneed de 21:9-uitsnede juist die strook eraf. */
.dka-med-site .pl-bn-dia .dia{object-position:top center}
/* ⚠️ Een verloopband werkt hier NIET: elke schermafdruk draagt zijn eigen grote
kop, dus die vecht met de onze (zelfde reden als bij de hero-film). Daarom
een dichte balk onderaan — dan is de leesbaarheid een eigenschap van de
opmaak en niet van het toevallige beeld eronder. */
.dka-med-site .pl-bn-bij{padding:9px 14px;background:rgba(6,8,11,.9);
align-items:center;gap:10px;flex-wrap:nowrap}
.dka-med-site .pl-bn-bij b{flex:none;color:var(--ac)}
.dka-med-site .pl-bn-bij span{color:rgba(255,255,255,.9);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* de stippen stonden bovenin dwars door het menu van de site heen */
.dka-med-site .pl-bn-stip{top:auto;bottom:13px;right:14px}
.dka-med-site .pl-bn-stip i{width:5px;height:5px}
@media (max-width:1000px){.dka-med-site .pl-bn-dia{aspect-ratio:16/9}}
.dka-med-beeld{aspect-ratio:16/9;background:#101114}
/* zelfde reden als hierboven: op een brede kaart hoort het beeld breder,
niet hoger. Gemeten 854\u00d7618 naast 416\u00d7443 voordat dit erbij stond. */
.dka-s4 .dka-med-beeld{aspect-ratio:21/9}
.dka-dia{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
animation:dkaDia 10.5s linear infinite;animation-delay:calc(var(--i) * 3.5s)}
@keyframes dkaDia{0%{opacity:0}3%{opacity:1}30%{opacity:1}36%{opacity:0}100%{opacity:0}}
.dka-eigen{position:absolute;left:10px;bottom:10px;z-index:2;font-family:var(--mono,ui-monospace,monospace);
font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
background:rgba(8,10,12,.62);padding:5px 10px;border-radius:999px}
@media(prefers-reduced-motion:reduce){.dka-dia{animation:none} .dka-dia:first-of-type{opacity:1}}
@media (max-width:1000px){.dka-rij{grid-template-columns:repeat(2,minmax(0,1fr))}
.dka-s2,.dka-s3,.dka-s4{grid-column:span 1}
.dka-s4{grid-column:span 2}}
@media (max-width:620px){.dka-rij{grid-template-columns:1fr}
.dka-s2,.dka-s3,.dka-s4{grid-column:span 1}}
/* ── de kaartvorm van de reis (20-09-2026) ─────────────────────────────────
Lenny: *"zet de oude kaarten op de home screen, die zijn mooier — die we
eerst hadden in de reis."* Dat zijn de `.rb-kk`-kaarten uit `_proef-reiskaarten`:
een getint vlak in plaats van wit, een haarlijn eromheen in plaats van een
schaduw, hoeken van 16 px, en ze staan in perspectief zodat ze bij aanwijzen
naar VOREN komen in plaats van omhoog te schuiven.
De inhoud blijft die van gisteren: elke kaart houdt zijn eigen animatie.
⚠️ `translateZ` doet niets zonder `perspective` op de OUDER — en niets met
`will-change:transform` erop, dat slaat de 3D plat (gemeten 16-09). */
.dka-rij{perspective:1200px}
.dka{position:relative;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;
padding:clamp(16px,1.6vw,22px);border-radius:16px;
background:color-mix(in srgb,var(--ink) 4%,var(--paper));
border:1px solid var(--line);box-shadow:none;
transform:translateZ(0);
transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s ease}
@media(hover:hover) and (pointer:fine){
.dka:hover{border-color:var(--ac);transform:translateZ(60px)}}
/* ⚠️ 20-09 gemeten: met een vaste verhouding 3:2 groeit het animatievlak mee met
de kaartbreedte, en dan wordt een brede kaart een toren — 854×714 px naast
416×443 voor de smalle ernaast, dus 270 px gat onder de buurkaart. Een brede
kaart hoort breder te tekenen, niet hoger. Daarom per kaartmaat een eigen
verhouding; de tekening zelf schaalt mee (viewBox + preserveAspectRatio). */
.dka-med-an .an{display:block;width:100%;height:auto;aspect-ratio:3/2}
.dka-s4 .dka-med-an .an{aspect-ratio:16/7}
.dka-s3 .dka-med-an .an{aspect-ratio:3/2}
.dka-lbl{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ac)}
.dka-t{display:block;margin-top:6px;font-size:clamp(17px,1.3vw,20px);line-height:1.2;letter-spacing:-.01em}
.dka-p{display:block;margin-top:6px;font-size:clamp(13.5px,.98vw,15px);line-height:1.45;color:var(--mut)}
.dka-meer{display:inline-block;margin-top:10px;font-size:13.5px;color:var(--ac)}
.dka-meer b{transition:transform .25s ease;display:inline-block}
@media(hover:hover) and (pointer:fine){.dka:hover .dka-meer b{transform:translateX(4px)}}
/* de tekeningen zelf — elke dienst zijn eigen animatie (20-09-2026, ronde 2).
Lenny: laat zien wat er gebeurt, geen diavoorstelling. Alleen transform,
opacity en stroke-dashoffset bewegen. */
/* ── automatisering als MACHINE (20-09-2026) ───────────────────────────────
Keuze Lenny: *"automatisering = machine, agents = collega."* Een lopende
band met drie stations; werk komt links binnen, gaat er langs en komt rechts
afgehandeld uit. Drie pakketjes tegelijk onderweg, zodat het doorloopt in
plaats van één keer af te gaan. Alleen transform en opacity. */
.an-machine .mc-vlak{fill:rgba(242,244,246,.03)}
.an-machine .mc-in,.an-machine .mc-uit{fill:rgba(242,244,246,.34);font-size:8px;
letter-spacing:.08em;text-transform:uppercase}
.an-machine .mc-uit{text-anchor:end}
.an-machine .mc-band{fill:rgba(242,244,246,.10)}
.an-machine .mc-ring{fill:none;stroke:rgba(242,244,246,.30);stroke-width:2.6}
.an-machine .mc-as{fill:rgba(242,244,246,.30)}
.an-machine .mc-tand{fill:none;stroke:rgba(242,244,246,.30);stroke-width:2.6;stroke-linecap:round}
.an-machine .mc-lbl{fill:rgba(242,244,246,.62);font-size:8px;text-anchor:middle}
.an-machine .mc-pak rect{fill:var(--ac-d)}
/* de stations kloppen mee op het moment dat er een pakketje langskomt */
.an-machine .mc-st{transform-box:fill-box;transform-origin:center}
.dka.in .an-machine .s1{animation:mcKlop 6s .55s ease-in-out infinite}
.dka.in .an-machine .s2{animation:mcKlop 6s 1.35s ease-in-out infinite}
.dka.in .an-machine .s3{animation:mcKlop 6s 2.15s ease-in-out infinite}
@keyframes mcKlop{0%,6%{transform:rotate(0)}18%{transform:rotate(45deg)}100%{transform:rotate(45deg)}}
.an-machine .mc-pak{transform:translateX(-24px);opacity:0}
.dka.in .an-machine .p1{animation:mcRijd 6s 0s linear infinite}
.dka.in .an-machine .p2{animation:mcRijd 6s 2s linear infinite}
.dka.in .an-machine .p3{animation:mcRijd 6s 4s linear infinite}
@keyframes mcRijd{
0%{transform:translateX(-24px);opacity:0}
8%{opacity:1}
84%{opacity:1}
92%,100%{transform:translateX(244px);opacity:0}}
@media(prefers-reduced-motion:reduce){
.dka.in .an-machine .s1,.dka.in .an-machine .s2,.dka.in .an-machine .s3,
.dka.in .an-machine .mc-pak{animation:none}
.an-machine .p2{transform:translateX(110px);opacity:1}}
/* ══ het logboek in een terminalvenster (20-09-2026) ═══════════════════════
Naar de Elara-kaart van propest.ai, nagemeten in een echte browser —
alle waarden staan in `inspiratie/REFERENTIE-propest-elara.md`.
Lenny: *"zij hebben een kaart … zoiets wil ik ook doen voor die van mij en
voor die AI-agent."*
Waarom dit de getekende versies vervangt: een logboek heeft géén illustratie
nodig. Het is tekst in een venster, dus het leest als software in plaats van
als schets — en daarmee is de wireframe-look bij de wortel weg in plaats van
met een kleurwissel. */
.tm{display:block;border-radius:16px;overflow:hidden;background:#0a0a0a;
border:1px solid color-mix(in srgb,var(--ac-d) 26%,transparent);
box-shadow:0 20px 52px rgba(0,0,0,.32),
0 0 36px color-mix(in srgb,var(--ac-d) 13%,transparent)}
/* de gloed ademt, zoals bij hen (5,5 s). Alleen box-shadow, geen layout. */
@media(hover:hover){.dka.in .tm{animation:tmGloed 5.5s ease-in-out infinite}}
@keyframes tmGloed{
0%,100%{box-shadow:0 20px 52px rgba(0,0,0,.32),
0 0 30px color-mix(in srgb,var(--ac-d) 9%,transparent)}
50%{box-shadow:0 20px 52px rgba(0,0,0,.32),
0 0 44px color-mix(in srgb,var(--ac-d) 18%,transparent)}}
/* de titelbalk: 44 px, iets lichter dan het lijf, drie stoplichtjes van 10 px
in de echte macOS-kleuren — die zijn universeel, geen merkkleur. */
.tm-bar{display:flex;align-items:center;gap:7px;height:44px;padding:0 16px;
background:#141414}
.tm-bar i{width:10px;height:10px;border-radius:50%;flex:none}
.tm-l1{background:#ff5f57} .tm-l2{background:#febc2e} .tm-l3{background:#28c840}
.tm-t{margin-left:10px;font:400 12px/1 var(--mono);font-style:normal;
color:rgba(255,255,255,.3);letter-spacing:.01em}
/* het lijf: monospace, ruime regelafstand (1,9× zoals bij hen), zodat het
leest als een uitdraai en niet als een alinea. */
.tm-body{display:block;padding:20px 22px;font:400 13px/1.9 var(--mono)}
.tm-r{display:block;color:#fff}
.tm-r + .tm-r{margin-top:1px}
/* De zes regelsoorten. Zonder deze kleurverdeling wordt het een grijze brij;
mét dat systeem zie je in één blik wie wat deed. */
.tm-tijd{color:rgba(255,255,255,.30)}
.tm-jij i{font-style:normal;color:var(--ac-d)} /* hún geel → ons koraal */
.tm-jij b{font-weight:400;color:#fff}
.tm-jij b::before{content:"\2192\00a0";color:rgba(255,255,255,.45)}
/* ⭐ Het groen van de vinkjes is GEEN merkkleur maar betekenis: groen is
"gedaan" in elke terminal. Daarom blijft het staan naast ons koraal. */
.tm-doet{color:#64d8b4}
.tm-doet i{font-style:normal;margin-right:7px;display:inline-block;width:8px}
.tm-zegt{color:rgba(230,236,240,.95)}
.tm-noot{color:rgba(255,255,255,.35)}
.tm-cur{display:inline-block;width:7px;height:13px;vertical-align:-2px;
background:var(--ac-d);animation:tmKnip .9s steps(1) infinite}
@keyframes tmKnip{0%,50%{opacity:1}51%,100%{opacity:0}}
/* de regels komen één voor één binnen, zoals een echte uitdraai */
.dka .tm-r{opacity:0;transform:translateY(4px)}
.dka.in .tm-r{animation:tmRegel .34s ease forwards}
.dka.in .tm-r:nth-child(1){animation-delay:.10s}
.dka.in .tm-r:nth-child(2){animation-delay:.34s}
.dka.in .tm-r:nth-child(3){animation-delay:.58s}
.dka.in .tm-r:nth-child(4){animation-delay:.82s}
.dka.in .tm-r:nth-child(5){animation-delay:1.06s}
.dka.in .tm-r:nth-child(6){animation-delay:1.34s}
.dka.in .tm-r:nth-child(7){animation-delay:1.66s}
.dka.in .tm-r:nth-child(8){animation-delay:1.94s}
.dka.in .tm-r:nth-child(9){animation-delay:2.22s}
@keyframes tmRegel{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
.dka .tm-r{opacity:1;transform:none;animation:none}
.dka.in .tm{animation:none} .tm-cur{animation:none}}
@media(max-width:620px){.tm-body{padding:16px 16px;font-size:12px}
.tm-bar{height:38px;padding:0 13px}}
.an{fill:#f2f4f6;stroke:none}
/* elke path/line/polyline is een LIJN; vlakken zetten dat zelf terug */
.an path,.an line,.an polyline{fill:none;stroke:#f2f4f6;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.an .schild,.an .hart,.an .mail path{fill:#f2f4f6;stroke:none}
/* een cirkel die een RING is (back-up) houdt zijn lijn */
.an .backup circle{fill:none;stroke:#f2f4f6;stroke-width:2}
.an text{fill:#f2f4f6;stroke:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px}
/* webdesign — een vraag aan ChatGPT waarin ons bureau genoemd wordt */
/* ── het accent op een donker vlak ────────────────────────────────────────
--ac is de tekstkleur op de lichte grond; op een donker paneel hoort de
lichte tint van hetzelfde palet. Eén token in plaats van per selector
jagen — dat laat er altijd een paar staan (les van 21-08). */
:root{--ac-d:var(--ac-lt)}
.an-chat .vlak{fill:rgba(242,244,246,.05)}
.an-chat .balk{fill:rgba(242,244,246,.12);stroke:none}
.an-chat .pt{fill:rgba(242,244,246,.5);stroke:none}
.an-chat .vr{fill:rgba(242,244,246,.72);font-size:10px}
.an-chat .a{fill:rgba(242,244,246,.30);stroke:none;transform-origin:22px 0;transform:scaleX(0)}
.dka.in .an-chat .a1{animation:anGroei .45s .5s ease forwards}
.dka.in .an-chat .a2{animation:anGroei .45s .8s ease forwards}
.dka.in .an-chat .a3{animation:anGroei .45s 1.9s ease forwards}
.an-chat .tref{opacity:0;transform:translateY(6px)}
.an-chat .tref rect{fill:var(--ac-d);stroke:none}
.an-chat .tref text{fill:#fff;font-size:10px;letter-spacing:.02em}
.dka.in .an-chat .tref{animation:anOp .6s 1.35s ease forwards}
@keyframes anOp{to{opacity:1;transform:none}}
@keyframes anGroei{to{transform:scaleX(1)}}
/* seo — zoeken in Google, en van onder naar plek 1 */
.an-serp .zoek{fill:rgba(242,244,246,.10)}
.an-serp .loep{stroke:rgba(242,244,246,.72);fill:none;stroke-width:1.4}
.an-serp .q{fill:rgba(242,244,246,.88);font-size:9.5px}
.an-serp .tel{fill:rgba(242,244,246,.42);font-size:7px}
/* Een zoekresultaat zoals Google het toont: webadres boven, titel eronder,
twee regels tekst. Het lichtblauw is Google's eigen donkere-modus-kleur
(#8ab4f8) — dat is wat iemand herkent, dus hier geen merkkleur van ons. */
.an-serp .url{fill:rgba(242,244,246,.52);font-size:7px}
.an-serp .tit{fill:#8ab4f8;font-size:8.6px}
.an-serp .tit-ac{fill:#a9c7fb}
.an-serp .tx{fill:rgba(242,244,246,.20)}
.an-serp .kader{fill:rgba(242,244,246,.06);stroke:var(--ac-d);stroke-width:1.2;opacity:0}
.an-serp .plek rect{fill:var(--ac-d)}
.an-serp .plek text{fill:#16181c;font-size:9px;font-weight:600;text-anchor:middle}
.an-serp .mrk{fill:rgba(242,244,246,.30);font-size:6.5px;text-anchor:end;letter-spacing:.08em}
/* de tabbalk en de sterren, zodat het leest als een echte zoekpagina */
.an-serp .tab{fill:rgba(242,244,246,.42);font-size:7.5px}
.an-serp .tab-aan{fill:rgba(242,244,246,.92)}
.an-serp .tab-lijn{fill:var(--ac-d)}
.an-serp .tab-rand{fill:rgba(242,244,246,.10)}
.an-serp .st-sym{fill:#e8b529;font-size:8px;letter-spacing:.5px}
.an-serp .st-half{fill:rgba(232,181,41,.45);font-size:8px}
.an-serp .st-tx{fill:rgba(242,244,246,.52);font-size:7px}
.an-serp .bron{fill:rgba(242,244,246,.34);font-size:7px;letter-spacing:.10em;
text-transform:uppercase}
/* ── twee scenes die elkaar aflossen: eerst Google, dan het AI-antwoord ──────
20-09, Lenny: *"iets doen van dat je op ChatGPT ook zoekt, of Claude."*
De kaarttekst belooft allebei, dus toont de kaart allebei. 14 s totaal:
7 s Google (genoeg om het resultaat naar 1 te zien klimmen), dan 7 s AI. */
.an-serp .sc{opacity:0}
.an-serp .sc-goog{opacity:1}
.dka.in .an-serp .sc-goog{animation:anScA 14s ease-in-out infinite}
.dka.in .an-serp .sc-ai{animation:anScB 14s ease-in-out infinite}
@keyframes anScA{0%,44%{opacity:1}50%,94%{opacity:0}100%{opacity:1}}
@keyframes anScB{0%,44%{opacity:0}50%,94%{opacity:1}100%{opacity:0}}
/* het AI-antwoord */
.an-serp .ai-v{fill:rgba(242,244,246,.05)}
.an-serp .ai-ster{fill:var(--ac-d);stroke:none}
.an-serp .ai-vr{fill:rgba(242,244,246,.88);font-size:9px}
.an-serp .ai-lijn{fill:rgba(242,244,246,.12)}
.an-serp .ai-a{fill:rgba(242,244,246,.72);font-size:9px}
.an-serp .ai-mrk{fill:color-mix(in srgb,var(--ac-d) 22%,transparent)}
.an-serp .ai-naam{fill:var(--ac-d);font-size:9px}
@media(prefers-reduced-motion:reduce){
.dka.in .an-serp .sc-goog,.dka.in .an-serp .sc-ai{animation:none}
.an-serp .sc-ai{opacity:0}}
/* De lus: het voorbeeldresultaat staat op plek 3, klimt naar 1 en zakt weer
terug, zodat je ziet wát er verandert. 9 s, gelijk aan de Halo-kaart. */
.an-serp .stijg{transform:translateY(52px)}
.an-serp .r1{transform:translateY(0)}
.dka.in .an-serp .stijg{animation:anSerpOp 14s ease-in-out infinite}
.dka.in .an-serp .r1{animation:anSerpZak 14s ease-in-out infinite}
.dka.in .an-serp .kader{animation:anSerpKader 14s ease-in-out infinite}
.dka.in .an-serp .p3{animation:anSerpP3 14s ease-in-out infinite}
.dka.in .an-serp .p2{animation:anSerpP2 14s ease-in-out infinite}
.dka.in .an-serp .p1{animation:anSerpP1 14s ease-in-out infinite}
@keyframes anSerpOp{0%,6%{transform:translateY(52px)}
17%,40%{transform:translateY(0)}46%,100%{transform:translateY(52px)}}
@keyframes anSerpZak{0%,6%{transform:translateY(0)}
17%,40%{transform:translateY(52px)}46%,100%{transform:translateY(0)}}
@keyframes anSerpKader{0%,8%{opacity:0}18%,40%{opacity:1}45%,100%{opacity:0}}
@keyframes anSerpP3{0%,9%{opacity:1}12%,100%{opacity:0}}
@keyframes anSerpP2{0%,10%{opacity:0}13%,15%{opacity:1}17%,100%{opacity:0}}
@keyframes anSerpP1{0%,15%{opacity:0}18%,40%{opacity:1}45%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
.an-serp .stijg,.an-serp .r1,.an-serp .kader,
.an-serp .p3,.an-serp .p2,.an-serp .p1{animation:none}
.an-serp .stijg{transform:translateY(0)} .an-serp .r1{transform:translateY(52px)}
.an-serp .kader{opacity:1} .an-serp .p3,.an-serp .p2{opacity:0} .an-serp .p1{opacity:1}}
/* hosting — slot dat sluit, mail die binnenkomt, back-up die draait */
.an-veilig .schild{fill:rgba(242,244,246,.07)}
.an-veilig .slot rect{fill:rgba(242,244,246,.16);stroke:var(--ac-d)}
.an-veilig .beugel{stroke:var(--ac-d);transform-origin:120px 66px}
.dka.in .an-veilig .beugel{animation:anSluit 3.4s ease-in-out infinite}
@keyframes anSluit{0%,15%{transform:translateY(-6px)}35%,100%{transform:none}}
.an-veilig .mail{opacity:0}
.an-veilig .mail rect{fill:rgba(242,244,246,.10)}
.dka.in .an-veilig .mail{animation:anMail 3.4s 1s ease-in-out infinite}
@keyframes anMail{0%{opacity:0;transform:translate(-14px,10px)}25%,70%{opacity:1;transform:none}100%{opacity:0}}
.an-veilig .backup circle{stroke:rgba(242,244,246,.25)}
.an-veilig .pijl{stroke:var(--ac-d);transform-origin:208px 119px}
.dka.in .an-veilig .pijl{animation:anDraai 3.4s linear infinite}
@keyframes anDraai{to{transform:rotate(360deg)}}
.an-veilig .st{fill:rgba(242,244,246,.6);text-anchor:middle;font-size:8.5px}
/* leadgeneratie — een bericht dat naar twee kanalen gaat en antwoord krijgt */
/* ── leadgeneratie: het moet STROMEN (20-09-2026) ──────────────────────────
Lenny: *"laat het meer flowen."* Er stond één vonk stil op het splitspunt.
Nu vier stipjes die de twee banen aflopen met `offset-path` — dezelfde curve
als de getekende baan, dus ze blijven er altijd op, ook als de baan wijzigt. */
.an-outreach .vonk{fill:var(--ac-d);offset-rotate:0deg;opacity:0}
.an-outreach .v1,.an-outreach .v3{offset-path:path("M72 31h60")}
.an-outreach .v2,.an-outreach .v4{offset-path:path("M72 31c40 0 30 44 60 44")}
.dka.in .an-outreach .v1{animation:owStroom 4.4s 0s linear infinite}
.dka.in .an-outreach .v2{animation:owStroom 4.4s .9s linear infinite}
.dka.in .an-outreach .v3{animation:owStroom 4.4s 2.2s linear infinite}
.dka.in .an-outreach .v4{animation:owStroom 4.4s 3.1s linear infinite}
@keyframes owStroom{
0%{offset-distance:0%;opacity:0}
12%{opacity:1}
80%{opacity:1}
100%{offset-distance:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){
.dka.in .an-outreach .vonk{animation:none}
.an-outreach .v1{opacity:1;offset-distance:50%}}
.an-outreach rect{fill:rgba(242,244,246,.10)}
.an-outreach text{text-anchor:middle;font-size:9px;fill:rgba(242,244,246,.85)}
.an-outreach .baan{stroke:rgba(242,244,246,.28);stroke-dasharray:4 5}
.dka.in .an-outreach .k1{animation:anAanlicht 4s .9s ease-in-out infinite}
.dka.in .an-outreach .k2{animation:anAanlicht 4s 2.6s ease-in-out infinite}
@keyframes anAanlicht{0%,6%{opacity:.55}14%,40%{opacity:1}55%,100%{opacity:.55}}
.an-outreach .reactie{opacity:0}
.an-outreach .reactie rect{fill:var(--ac-d)}
.an-outreach .reactie text{fill:#fff}
.dka.in .an-outreach .reactie{animation:anOp .6s 3.1s ease forwards}
/* adverteren — twee telefoons met onze eigen content */
.an-social .an-tel rect{fill:rgba(242,244,246,.08)}
.an-social .scherm{fill:rgba(8,10,12,.75)}
.an-social .post{fill:rgba(242,244,246,.18);stroke:none}
.dka.in .an-social .p1{animation:anScroll 5s ease-in-out infinite}
.dka.in .an-social .p2{animation:anScroll 5s .2s ease-in-out infinite}
@keyframes anScroll{0%,20%{transform:none}50%,70%{transform:translateY(-46px)}100%{transform:none}}
.dka.in .an-social .p3{animation:anVeeg 5s ease-in-out infinite;transform-origin:center}
@keyframes anVeeg{0%,30%{opacity:1}42%{opacity:.25}55%,100%{opacity:1}}
.an-social .hart{fill:var(--ac-d);stroke:none;transform-origin:196px 102px;transform:scale(0)}
.dka.in .an-social .hart{animation:anHart 5s 1.6s ease-in-out infinite}
@keyframes anHart{0%{transform:scale(0)}12%{transform:scale(1.25)}20%,80%{transform:scale(1)}100%{transform:scale(0)}}
.an-social .mrk{text-anchor:middle;font-size:8.5px;fill:rgba(242,244,246,.6)}
/* content — drie scènes van hetzelfde merk */
.an-con .kd{fill:rgba(242,244,246,.10)}
.dka.in .an-con .k1{animation:anWissel 3.6s 0s ease-in-out infinite}
.dka.in .an-con .k2{animation:anWissel 3.6s 1.2s ease-in-out infinite}
.dka.in .an-con .k3{animation:anWissel 3.6s 2.4s ease-in-out infinite}
@keyframes anWissel{0%,100%{fill:rgba(242,244,246,.10);transform:none}
18%,34%{fill:color-mix(in srgb,var(--ac) 55%,transparent);transform:translateY(-5px)}}
/* automatisering — het scherm van Halo dat zichzelf afwerkt */
.an-halo .venster{fill:rgba(242,244,246,.05)}
.an-halo .kop{fill:rgba(242,244,246,.12);stroke:none}
.an-halo .naam{font-size:11px;letter-spacing:.06em}
/* het merkteken van Halo in de kaart — dezelfde ring als halo_merk() */
.an-halo .hmerk{fill:none;stroke:var(--ac-d);stroke-linecap:round}
.an-halo .klok{text-anchor:end;font-size:9px;fill:var(--ac-d)}
.an-halo .taak rect{fill:rgba(242,244,246,.08);stroke:rgba(242,244,246,.18);stroke-width:1.4}
.an-halo .taak text{fill:rgba(242,244,246,.78)}
.an-halo .v{stroke:var(--ac-d);stroke-width:2.4;stroke-dasharray:22;stroke-dashoffset:22}
/* ⚠️ 20-09: dit was een EENMALIGE animatie (`forwards`). Na 3,3 s stond hij
stil, en precies deze kaart moet zeggen dat het systeem 24 uur per dag
doorwerkt — Lenny: *"het is iets van 24/7 actief en werkend."* Gemeten op
desktop: 6 animaties, 0 lopend, geen enkele pixel veranderde.
Nu een lus van 9 s: drie taken worden afgevinkt, blijven staan, en de rij
begint opnieuw. De drie rijen lopen 0,9 s uit elkaar, zodat het leest als
een wachtrij die doorloopt en niet als één knipperend blok. */
.dka.in .an-halo .z1 .v{animation:anHaloVink 9s 0s ease-in-out infinite}
.dka.in .an-halo .z2 .v{animation:anHaloVink 9s .9s ease-in-out infinite}
.dka.in .an-halo .z3 .v{animation:anHaloVink 9s 1.8s ease-in-out infinite}
.dka.in .an-halo .z1 rect{animation:anHaloRij 9s 0s ease-in-out infinite}
.dka.in .an-halo .z2 rect{animation:anHaloRij 9s .9s ease-in-out infinite}
.dka.in .an-halo .z3 rect{animation:anHaloRij 9s 1.8s ease-in-out infinite}
@keyframes anHaloVink{
0%,6%{stroke-dashoffset:22}
15%,72%{stroke-dashoffset:0}
81%,100%{stroke-dashoffset:22}}
@keyframes anHaloRij{
0%,6%{stroke:rgba(242,244,246,.18)}
15%,72%{stroke:var(--ac-d)}
81%,100%{stroke:rgba(242,244,246,.18)}}
@media(prefers-reduced-motion:reduce){
.dka.in .an-halo .z1 .v,.dka.in .an-halo .z2 .v,.dka.in .an-halo .z3 .v,
.dka.in .an-halo .z1 rect,.dka.in .an-halo .z2 rect,.dka.in .an-halo .z3 rect{
animation:none}
.an-halo .v{stroke-dashoffset:0}}
/* ai-agents — een agent met een naam die \'s nachts doorwerkt */
.an-agent2 .kaart rect{fill:rgba(242,244,246,.07)}
.an-agent2 .bol{fill:rgba(242,244,246,.14);stroke:var(--ac-d)}
.an-agent2 .oog{stroke:var(--ac-d)}
.an-agent2 .an-naam{font-size:11px}
.an-agent2 .an-st{font-size:8.5px;fill:rgba(242,244,246,.6)}
.an-agent2 .puls{fill:var(--ac-d);stroke:none}
.dka.in .an-agent2 .puls{animation:anPuls 2s ease-in-out infinite}
@keyframes anPuls{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.an-agent2 .l{fill:rgba(242,244,246,.14);stroke:none;transform-origin:14px 0;transform:scaleX(0)}
.dka.in .an-agent2 .l1{animation:anGroei .5s 1.1s ease forwards}
.dka.in .an-agent2 .l2{animation:anGroei .5s 2s ease forwards}
.dka.in .an-agent2 .l3{animation:anGroei .5s 2.9s ease forwards}
.an-agent2 .tijd{text-anchor:end;font-size:8px;fill:var(--ac-d);opacity:0}
.dka.in .an-agent2 .t1{animation:anOp .4s 1.4s ease forwards}
.dka.in .an-agent2 .t2{animation:anOp .4s 2.3s ease forwards}
.dka.in .an-agent2 .t3{animation:anOp .4s 3.2s ease forwards}
@media(prefers-reduced-motion:reduce){.an *{animation:none!important}}
/* het merkteken in 3D op een pilaarpagina (20-09-2026) */
.ph-met-merk{position:relative;overflow:clip}
.ph-merk{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.ph-met-merk .wrap{position:relative;z-index:1}
@media (max-width:900px){.ph-merk{display:none}}
/* ══ de waaier ════════════════════════════════════════════════════════
Gemeten op getquoti.ai (21-09, rapport in inspiratie/): vijf kaarten van
20vw met `margin-inline:-5vw`, stappen van 4 graden, verschuiving 3 % en
8 %, z-index 3/4/5/4/3, overlap 84,9 px (29,5 % van de kaartbreedte),
hoekstraal 48, een rand van 1 px in de SECTIEKLEUR in plaats van een
schaduw, en een label met een verloop in plaats van een text-shadow.
⛔ Twee van hun defecten niet overgenomen: hun z-index blijft bij hover
staan (kaart valt 107 px achter de buurman) en hun gecentreerde label
valt half weg onder de volgende kaart. */
.wa-sec{overflow:hidden}
.wa{display:flex;justify-content:center;align-items:center;
margin-top:clamp(26px,3.4vw,46px);perspective:1400px}
.wa-k{position:relative;flex:none;margin:0;width:min(20vw,300px);
margin-inline:min(-5vw,-72px);aspect-ratio:3.86/5.19;
border-radius:clamp(20px,2.6vw,44px);overflow:hidden;
border:1px solid var(--paper3);background:var(--paper2);
transition:transform .78s cubic-bezier(.16,1.02,.3,1),
box-shadow .4s ease,border-color .4s ease;
transform-origin:50% 50%}
.wa-k img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;
transition:transform .78s cubic-bezier(.16,1.02,.3,1)}
.wa-k figcaption{position:absolute;inset:0;display:flex;align-items:flex-end;
/* geen text-shadow: de leesbaarheid komt uit dit verloop, net als bij hen */
background-image:linear-gradient(rgba(0,0,0,0) 34%,rgba(0,0,0,.55) 68%,rgba(0,0,0,.86) 100%);
padding:clamp(12px,1.1vw,18px);
font-family:var(--disp,inherit);font-weight:700;
font-size:clamp(12px,1.05vw,17px);line-height:1;letter-spacing:.06em;
text-transform:uppercase;color:#fff;
/* ⛔ NIET gecentreerd: bij 29,5 % overlap valt de rechterhelft weg onder de
volgende kaart. Links uitlijnen houdt het label in de zichtbare strook. */
justify-content:flex-start;text-align:left;gap:8px}
/* ⚠️ GEEN `flex-direction:row-reverse` hier: dan draait de hoofdas om en wijst
`flex-end` naar LINKS — precies de helft die onder de vorige kaart ligt.
Het embleem gaat achter het label met `order`, de uitlijning blijft rechts. */
.wa-k4 figcaption,.wa-k5 figcaption{justify-content:flex-end;text-align:right}
.wa-k4 .wa-halo,.wa-k5 .wa-halo{order:2}
/* Kaart 4 en 5 liggen ONDER hun linkerbuurman, dus alleen hun rechterhelft is
zichtbaar. Een uitsnede naar linksboven legt daar dus de verborgen kant neer
en laat halve woorden over ("lussen … gedoe."). */
.wa-k4 img,.wa-k5 img{object-position:top right}
/* 4d, Lenny: *"kun je bij Flows het Halo-embleem zetten?"* — het embleem zelf,
niet een tweede logo: dezelfde `halo_merk()` als op /ai-agents/. */
.wa-halo{flex:none;display:flex;align-items:center;line-height:0}
.wa-halo .hl-bot{vertical-align:middle}
.wa-k1{transform:translate(-6%,16%) rotate(-8deg);z-index:3}
.wa-k2{transform:translate(-3%,8%) rotate(-4deg);z-index:4}
.wa-k3{transform:scale(1.05);z-index:5}
.wa-k4{transform:translate(3%,8%) rotate(4deg);z-index:4}
.wa-k5{transform:translate(6%,16%) rotate(8deg);z-index:3}
@media(hover:hover) and (pointer:fine){
/* recht gaan staan én naar voren — en dan óók echt vóór de buurman liggen */
.wa-k:hover{transform:rotate(0deg) scale(1.1) translateY(-2%)!important;
z-index:9;border-color:color-mix(in srgb,var(--ac) 45%,transparent);
box-shadow:0 30px 70px -34px rgba(12,10,8,.55)}
.wa-k:hover img{transform:scale(1.04)}
.wa:hover .wa-k:not(:hover){filter:none;opacity:.82}
}
.wa-k:focus-within{transform:rotate(0deg) scale(1.08);z-index:9}
@media (max-width:900px){
.wa{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
scroll-snap-type:x mandatory;padding:6px 16px 18px;gap:12px;
-webkit-overflow-scrolling:touch}
.wa-k{width:62vw;margin-inline:0;scroll-snap-align:center;
transform:none!important;z-index:auto}
.wa-k figcaption{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.wa-k,.wa-k img{transition:none}}
/* ══ Halo AI als eigen tak ════════════════════════════════════════════
21-09, Lenny: *"stiekem heel vaag die Halo AI, dat mag echt wat groter"* en
*"benoem het als een nieuwe tool, laat het echt een tak zijn van wat we
doen."* Het merkteken ging van 26 naar 92 px en de band is donker - dat is
waar de witte bol thuishoort én het scheidt de tak zichtbaar van de rest. */
/* ⚠️ `overflow:hidden` is hier GEEN cosmetiek. Het embleem schuift zijwaarts
(verzoek Lenny, 21-09) en duwde de pagina op het hoogtepunt van die
beweging tot 396 px breder dan het scherm — alleen zichtbaar als je
over de hele animatiecyclus meet, niet in één momentopname. */
.hl-groot{overflow:hidden;background:#141922;color:#eef1f5;
--ac:#ff9a7e;
--ink:#f2f5f8; --ink3:#a8b3c0; --mut:#a8b3c0; --line:rgba(255,255,255,.13);
--paper:#0e1116; --paper2:#161b22; --paper3:#0a0d12;
--hl-mid:#f4f7fa; --hl-lo:#b6c3d2; --hl-gl:190,215,245;
--hl-oog:#161c26; --hl-ringgl:210,230,255; --hl-rand:rgba(255,255,255,.3);
padding-block:clamp(56px,7vw,104px)}
.hl-kop{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);flex-wrap:wrap}
.hl-teken{flex:none;display:grid;place-items:center}
.hl-kop-tx{display:flex;flex-direction:column;gap:4px}
.hl-groot .hl-onder{font-family:var(--mono,ui-monospace,monospace);
font-size:clamp(10px,.78vw,12px);letter-spacing:.2em;text-transform:uppercase;
color:var(--ac-lt)}
.hl-naam{margin:0;font-size:clamp(34px,3.9vw,58px);font-weight:600;
letter-spacing:-.03em;line-height:.98;color:#fff}
.hl-groot .hl-o-van{font-size:clamp(14px,1.1vw,18px);color:#a8b3c0}
.hl-groot .hl-o-zin{margin:clamp(22px,2.6vw,34px) 0 0;max-width:62ch;
font-size:clamp(16px,1.25vw,21px);line-height:1.5;color:#d7dee6}
.hl-groot .hl-o-rij{margin-top:clamp(28px,3.4vw,46px)}
.hl-groot .hl-o-f h3{color:#f2f5f8}
.hl-groot .hl-o-f p{color:#a8b3c0}
.hl-groot .hl-o-f span{color:var(--ac-lt)}
@media (max-width:700px){
.hl-kop{gap:16px}
.hl-naam{font-size:clamp(34px,10vw,48px)}
}
/* ══ de diavoorstelling van onze sites ════════════════════════════════
21-09, Lenny voor Webdesign & development: *"een slideshow van alle mooie
websites, zodat mensen denken: oh wauw, dat is wat ze doen."*
Eén groot doek in plaats van drie losse beelden naast elkaar. Het wisselen
zelf doet het bestaande blok in site.js (`[data-dia]`). */
.sd{margin-top:clamp(22px,2.8vw,38px)}
.sd .pl-bn-dia{position:relative;width:100%;aspect-ratio:16/9;
border-radius:clamp(14px,1.6vw,22px);overflow:hidden;
background:var(--paper2);border:1px solid var(--line);
box-shadow:0 30px 70px -44px rgba(12,10,8,.45)}
.sd .pl-bn-dia img{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:top center;opacity:0;
transition:opacity .8s ease}
.sd .pl-bn-dia img.aan{opacity:1}
.sd .pl-bn-bij{position:absolute;left:0;right:0;bottom:0;z-index:2;
display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
padding:clamp(16px,2vw,26px);
background:linear-gradient(rgba(0,0,0,0) 0%,rgba(8,10,12,.82) 78%)}
.sd .pl-bn-bij b{color:#fff;font-size:clamp(14px,1.1vw,18px);font-weight:600}
.sd .pl-bn-bij span{color:rgba(255,255,255,.82);font-size:clamp(13px,1vw,16px)}
.sd .pl-bn-stip{position:absolute;right:clamp(16px,2vw,26px);
top:clamp(16px,2vw,26px);z-index:3;display:flex;gap:7px}
.sd .pl-bn-stip i{width:7px;height:7px;border-radius:50%;
background:rgba(255,255,255,.42);transition:background .3s ease,transform .3s ease}
.sd .pl-bn-stip i.aan{background:#fff;transform:scale(1.3)}
/* ══ Halo aan het werk ════════════════════════════════════════════════
21-09, Lenny: *"verschillende punten naar één punt gestroomlijnd."*
Donkere band, want daar hoort de witte bol en het is meteen minder wit. */
.hs-sec{background:#0e1116;color:#eef1f5;
--ink:#f2f5f8; --ink3:#a8b3c0; --mut:#a8b3c0; --ac:#ff9a7e;
--line:rgba(255,255,255,.13);
--hl-mid:#f4f7fa; --hl-lo:#b6c3d2; --hl-gl:190,215,245;
--hl-oog:#161c26; --hl-ringgl:210,230,255; --hl-rand:rgba(255,255,255,.3);
padding-block:clamp(56px,7vw,100px);overflow:hidden}
.hs-sec .lbl{color:var(--ac)}
.hs-sec .h2{color:#f2f5f8}
.hs{position:relative;margin-top:clamp(24px,3vw,40px)}
/* 3e, Lenny: *"maak het één hele grote kaart, zoals onder die vier stappen."*
Zelfde kaartvorm als `.sk`: getint vlak, haarlijn, 14 px hoeken, en een
accentlijn die volloopt zodra hij in beeld komt. */
.hs-kaart{padding:clamp(20px,2.6vw,40px) clamp(16px,2.2vw,34px);
border-radius:var(--r,14px);border:1px solid var(--line);
background:rgba(255,255,255,.035);overflow:hidden}
.hs-kaart::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
background:var(--ac-vlak);transition:width .8s ease}
.hs-kaart.in::after{width:100%}
.hs svg{width:100%;height:auto;display:block;overflow:visible}
@media (max-width:860px){.hs svg{min-width:680px}}
.hs-bron rect,.hs-uitkomst rect{fill:rgba(255,255,255,.05);
stroke:rgba(255,255,255,.16);stroke-width:1}
.hs-t{fill:#f2f5f8;font-size:15px;font-weight:600;
font-family:var(--sans,system-ui)}
.hs-u{fill:#8e9aa8;font-size:12.5px;font-family:var(--sans,system-ui)}
.hs-l{fill:none;stroke:rgba(255,255,255,.17);stroke-width:1.5;
stroke-dasharray:1 0}
.hs-uit{stroke:rgba(255,154,126,.5);stroke-width:2}
.hs-p{fill:var(--ac);opacity:.95}
.hs-p-uit{fill:#fff}
/* het embleem staat midden in de svg, maar is HTML - zo blijft het dezelfde
bot als overal elders op de site in plaats van een tweede tekening */
.hs-in{position:relative;width:100%}
.hs-kern{position:absolute;left:51.3%;top:50%;transform:translate(-50%,-50%);
pointer-events:none}
@media (max-width:860px){
.hs svg{min-width:680px}
.hs{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hs-in{width:680px}
.hs-kern{transform:translate(-50%,-50%) scale(.72)}
}
@media(prefers-reduced-motion:reduce){.hs-p{display:none}}
/* ══ kaartanimatie · de agent pakt zelf taken op ══════════════════════
21-09, Lenny: *"bij de kaart van AI-agents zie je niks. Zorg dat hij
autonoom taken oppakt die hem zijn toegewezen."* Vier taken, de bot reikt
er om de beurt naar, en die taak wordt afgevinkt. */
.an-agent .ag-r{fill:color-mix(in srgb,var(--ink) 6%,transparent);
stroke:color-mix(in srgb,var(--ink) 12%,transparent);stroke-width:1}
.an-agent .ag-t{fill:var(--ink3);font-size:8.5px;font-family:var(--sans,system-ui)}
.an-agent .ag-vink circle{fill:none;stroke:color-mix(in srgb,var(--ink) 18%,transparent);
stroke-width:1.4}
.an-agent .ag-vink path{fill:none;stroke:var(--ac);stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:12;stroke-dashoffset:12}
.an-agent .ag-arm{fill:none;stroke:var(--ac);stroke-width:1.4;opacity:0;
stroke-dasharray:60;stroke-dashoffset:60}
.an-agent .ag-bol{fill:#f2f3f5;stroke:#7d8b9c;stroke-width:1.2}
.an-agent .ag-ring{fill:none;stroke:#fff;stroke-width:2.4}
.an-agent .ag-oog{fill:#2b3340}
.an-agent .ag-bot{animation:agZweef 3.6s ease-in-out infinite}
@keyframes agZweef{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* vier taken × 2,2 s = één ronde van 8,8 s */
.an-agent .ag-a1{animation:agArm 8.8s linear infinite}
.an-agent .ag-a2{animation:agArm 8.8s linear 2.2s infinite}
.an-agent .ag-a3{animation:agArm 8.8s linear 4.4s infinite}
.an-agent .ag-a4{animation:agArm 8.8s linear 6.6s infinite}
.an-agent .ag-v1 path{animation:agVink 8.8s linear infinite}
.an-agent .ag-v2 path{animation:agVink 8.8s linear 2.2s infinite}
.an-agent .ag-v3 path{animation:agVink 8.8s linear 4.4s infinite}
.an-agent .ag-v4 path{animation:agVink 8.8s linear 6.6s infinite}
@keyframes agArm{0%{opacity:0;stroke-dashoffset:60}
4%{opacity:.9}14%{stroke-dashoffset:0;opacity:.9}
22%{opacity:0;stroke-dashoffset:0}100%{opacity:0}}
@keyframes agVink{0%,12%{stroke-dashoffset:12}
20%{stroke-dashoffset:0}92%{stroke-dashoffset:0}
100%{stroke-dashoffset:12}}
/* ══ kaartanimatie · Halo stroomlijnt drie processen ══════════════════
*"Zet Halo in het midden en laat hem drie verschillende processen
stroomlijnen, in een animerende weergave."* */
.an-stroom .st-b{fill:color-mix(in srgb,var(--ink) 6%,transparent);
stroke:color-mix(in srgb,var(--ink) 12%,transparent);stroke-width:1}
.an-stroom .st-t{fill:var(--ink3);font-size:8.5px;font-family:var(--sans,system-ui)}
.an-stroom .st-l{fill:none;stroke:color-mix(in srgb,var(--ink) 16%,transparent);
stroke-width:1.3}
.an-stroom .st-uit{stroke:color-mix(in srgb,var(--ac) 45%,transparent);stroke-width:1.8}
.an-stroom .st-p{fill:var(--ac)}
.an-stroom .st-p-uit{fill:var(--ac)}
.an-stroom .st-bol{fill:#f2f3f5;stroke:#7d8b9c;stroke-width:1.2}
.an-stroom .st-ring{fill:none;stroke:#fff;stroke-width:2.2}
.an-stroom .st-oog{fill:#2b3340}
.an-stroom .st-bot{animation:agZweef 4.2s ease-in-out infinite}
.an-stroom .st-klaar{fill:color-mix(in srgb,var(--ac) 10%,transparent);
stroke:color-mix(in srgb,var(--ac) 40%,transparent);stroke-width:1}
.an-stroom .st-vink{fill:none;stroke:var(--ac);stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:14;stroke-dashoffset:14;
animation:agVink 2.6s linear infinite}
@media(prefers-reduced-motion:reduce){
.an-agent *,.an-stroom *{animation:none!important}
.an-agent .ag-vink path,.an-stroom .st-vink{stroke-dashoffset:0}}
/* ══ LAADSCHERM ════════════════════════════════════════════════════════════
21-09-2026, Lenny (5c): *"hij komt en that's it. Ik wil een loading screen."*
En (6b) voor Halo AI: *"een aparte loading screen waar het embleem rondpopt
en beweegt."*
⛔ Volledig in CSS. Een laadscherm dat op JavaScript wacht is een witte (of
hier: zwarte) pagina zodra er iets misgaat met dat script. Alles eindigt
op `forwards`, dus het ruimt zichzelf op.
⛔ Het ligt ERBOVEN maar vangt niets: na de animatie staat het op
`visibility:hidden`, dus ook het toetsenbord loopt er niet in vast.
⚠️ De inhoud eronder staat er meteen; dit vertraagt niets, het bedekt alleen. */
/* ⭐ 21-09 (avond), Lenny: *"die loadingscreen is te snel, geef 't tijd."*
De hele overgang duurt nu 3,9 s in plaats van 2,2: het merkteken blijft
langer staan, de bol komt rustiger op en de naam krijgt een adempauze
voordat het scherm oplicht. */
.lz{position:fixed;inset:0;z-index:999;display:grid;place-items:center;
pointer-events:none;animation:lzWeg .6s cubic-bezier(.7,0,.3,1) 3.3s forwards}
.lz-in{display:grid;place-items:center;gap:18px;text-align:center}
@keyframes lzWeg{to{opacity:0;visibility:hidden;transform:translateY(-14px)}}
/* ── T&P: donker, het merkteken komt op en een lijn loopt eronder vol ────── */
.lz-tp{background:#0e1116}
.lz-tp .lz-merk{display:block;width:clamp(58px,7vw,86px);
animation:lzMerk 1.1s cubic-bezier(.16,1,.3,1) both}
.lz-tp .lz-merk svg{width:100%;height:auto;display:block}
.lz-tp .lz-merk path{fill:#f2f5f8}
@keyframes lzMerk{from{opacity:0;transform:translateY(12px) scale(.86)}
to{opacity:1;transform:none}}
.lz-lijn{display:block;width:clamp(96px,14vw,168px);height:2px;
background:rgba(255,255,255,.14);position:relative;overflow:hidden}
.lz-lijn::after{content:"";position:absolute;inset:0;background:#ff9a7e;
transform-origin:left;transform:scaleX(0);
animation:lzVol 2.9s cubic-bezier(.4,0,.2,1) .2s forwards}
@keyframes lzVol{to{transform:scaleX(1)}}
/* ── Halo AI: het MERKTEKEN wordt het embleem ─────────────────────────────
Niet twee schermen achter elkaar maar één overgang: T&P krimpt en dooft,
de bol komt er op dezelfde plek uit op, de ring trekt zich, dan de naam.
De hele animatie duurt 1,75 s; daarna lift het scherm weg. */
.lz-halo{background:#0e1116}
/* 27-09-2026: het embleem op DONKER, zoals op /automatisering/ — daar gloeit hij.
Geen morph meer vanuit T&P; T&P staat klein onderin. */
.lz-halo .lz-in{position:relative}
.lz-gloed{position:absolute;left:50%;top:44%;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;
background:radial-gradient(circle,rgba(160,180,215,.22) 0%,rgba(160,180,215,.07) 40%,rgba(160,180,215,0) 70%);
animation:lzGloed 1.6s ease .2s both}
@keyframes lzGloed{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.lz-halo .lz-bol{position:relative;animation:lzPop 1.1s cubic-bezier(.2,.9,.25,1.12) .25s both}
@keyframes lzPop{0%{opacity:0;transform:scale(.3) translateY(10px)}60%{opacity:1}100%{opacity:1;transform:none}}
.lz-halo .lz-t{position:relative;font-family:var(--disp,inherit);font-weight:500;
font-size:clamp(15px,1.6vw,20px);letter-spacing:.04em;color:#e9edf3;
animation:lzTekst .7s ease 1.2s both}
.lz-onder{position:absolute;bottom:32px;left:50%;width:26px;margin-left:-13px;opacity:.5;
animation:lzTekst .7s ease 1.5s both}
.lz-onder svg{width:100%;height:auto;display:block}
.lz-onder path{fill:#e9edf3}
@keyframes lzTekst{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
/* geen flits voor wie beweging uit heeft staan */
@media(prefers-reduced-motion:reduce){
.lz{display:none}}
/* ══ HALO AI · eigen pagina, wit-goud ══════════════════════════════════════
21-09-2026 (6c), Lenny: *"de pagina heeft een heel ander design: wit-goud,
glimmend."* Dit is de enige plek op de site met een tweede kleurfamilie —
bewust, want Halo is een eigen merk onder T&P (endorsed, besluit 02-09).
⚠️ Goud is als TEKST bijna nooit leesbaar op wit. De vlakken zijn goud, de
letters zijn donkerbruin (#3e3012, gemeten 11,6:1 op #fdfaf3). */
html[data-pag="halo-ai"]{
/* ⭐ 21-09 (avond): dit palet is UIT DE FOTO gehaald, niet bedacht.
Gemeten op `_hero-halo/sky1.png`: lucht #ded4d5 (tint 354°, verz 4,5 %),
mist #c9bdbf (350°), wolk #bfb6bc (320°), en één warme gloed #f6e9df
(26°, 9,3 %). Dat is een koele roosgrijze familie met één warm accent —
precies de sfeer die Lenny over de hele pagina wil. Alle tekstkleuren
erna doorgerekend op de drie gronden; de krapste haalt 4,54. */
--paper:#f0eaea; --paper2:#e7dfe0; --paper3:#d9cfd1;
--ink:#241f21; --ink3:#5e5559; --mut:#5e5559;
--line:rgba(70,58,62,.16);
--ac:#bd3a42; --ac-d:#9e2f36; --ac-lt:#ff9a7e;
/* ⛔ GEEN eigen --hl-* hier: het embleem houdt overal zijn eigen kleuren. */}
/* het menu-item: één glans die overloopt, niets dat per frame herschildert */
.halolink span{background:linear-gradient(100deg,
var(--ink3) 0%,var(--ink3) 38%,#ff7a59 50%,var(--ink3) 62%,var(--ink3) 100%);
background-size:280% 100%;-webkit-background-clip:text;background-clip:text;
color:transparent;animation:haloGlans 5.5s linear infinite}
@keyframes haloGlans{from{background-position:180% 0}to{background-position:-80% 0}}
@media(prefers-reduced-motion:reduce){.halolink span{animation:none;
background:none;-webkit-text-fill-color:currentColor;color:var(--ink3)}}
/* ── de hero, naar de SecureMind-referentie ───────────────────────────────
Drie kolommen: tekst links, onderwerp midden, kaarten rechts. In de
referentie is het onderwerp een hoofd; bij ons is het het Halo-embleem.
⚠️ Het embleem is gebouwd om te GLOEIEN, en een gloed bestaat alleen tegen
donker. Op een lichte grond viel hij terug op zijn harde omtreklijn en zag
hij er plat uit (dat was Lenny's vraag: waarom oogt hij op de donkere band
beter?). Daarom ligt er hier een zachte donkere aura achter — dan is er
weer iets om tegen op te lichten, net als het donkere haar van het hoofd in
de referentie tegen hun witte grond. */
.hg-hero{position:relative;isolation:isolate;overflow:hidden;
padding:clamp(96px,11vw,150px) 0 clamp(40px,5vw,70px)}
.hg-scene{position:absolute;inset:0;z-index:-1}
.hg-scene svg{width:100%;height:100%;display:block}
.hg-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;
z-index:-1;background:linear-gradient(transparent,var(--paper))}
.hh{display:grid;grid-template-columns:1fr 1.05fr .92fr;
gap:clamp(16px,2.4vw,40px);align-items:center;
min-height:min(64svh,620px)}
/* links */
.hh-l{display:grid;justify-items:start;gap:clamp(13px,1.5vw,20px);
position:relative;z-index:1}
/* ⭐ 22-09: lichtwas onder de linkerkolom. De tekstkleuren zijn berekend op de
VLAKKE gronden; zodra de skylinefoto eronder kwam zakten lead (4,06:1) en
het kleine label (2,97:1) door de norm. De referentie doet hetzelfde: het
onderwerp blijft zichtbaar, de tekstzijde wordt opgelicht. Geen doos:
een verloop dat naar rechts wegvalt, buiten de kolom getekend. */
.hh-l::before{content:"";position:absolute;z-index:-1;
top:-14vh;bottom:-14vh;left:-14vw;right:-26%;pointer-events:none;
background:linear-gradient(90deg,
rgba(252,249,245,.94) 0%, rgba(252,249,245,.86) 30%,
rgba(252,249,245,.55) 58%, rgba(252,249,245,.18) 80%,
rgba(252,249,245,0) 92%)}
/* ⚠️ Op de telefoon loopt de kolom over de volle breedte, dus een verloop
dat bovenaan al ondoorzichtig is geeft een harde horizontale rand dwars
door de foto. Laat hem daarom IN de eerste 14% opkomen. */
@media(max-width:900px){.hh-l::before{right:-14vw;top:-6vh;
background:linear-gradient(180deg,
rgba(252,249,245,0) 0%, rgba(252,249,245,.55) 8%,
rgba(252,249,245,.88) 18%, rgba(252,249,245,.95) 100%)}
/* ⭐ 22-09: op de telefoon is het herovak 390x1563 — verhouding 0,25. Elke
foto die daar `cover` in staat wordt tot een strookje van 20-40% van zijn
breedte gesneden, en dan zie je mist in plaats van een skyline. Daarom
staat hij hier als BAND in de bovenste 62% (verhouding 0,40) en lost hij
onderin op in de grond. Zichtbaar deel van de uitsnede: 65% in plaats
van 29%. */
.hg-s-sky{inset:0 0 auto 0;height:62%;
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 100%)}
.hg-s-sky img{object-position:50% 58%}}
.hh-kop{margin:0;font-family:var(--disp,inherit);font-weight:500;
font-size:clamp(31px,3.5vw,50px);line-height:1.04;letter-spacing:-.032em;
color:#1b1a17}
.hh-lead{max-width:40ch;margin:0;font-size:clamp(14px,1.05vw,16px);
line-height:1.6;color:#5b5548}
.hh-cta{display:inline-flex;align-items:center;gap:12px;
background:#1b1a17;color:#f7f5f0;border:0;padding:13px 15px 13px 26px;
border-radius:999px;font-size:15px}
.hh-cta i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
background:var(--ac-vlak);color:var(--ac-op);font-style:normal;font-size:14px;
transition:transform .3s cubic-bezier(.16,1,.3,1)}
.hh-cta:hover{background:#312e27}
.hh-cta:hover i{transform:translateX(3px)}
/* ⛔ hier stonden in de referentie vier portretjes en "trusted by 10.000+
security teams". Wij hebben geen klanten voor Halo, dus dit noemt wat er
werkelijk draait — bij onszelf. */
.hh-bewijs{margin-top:4px;display:grid;gap:7px}
.hh-bl{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#5f5849}
.hh-bewijs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.hh-bewijs li{font-size:12.5px;color:#4f4a3f;padding:5px 11px;border-radius:999px;
border:1px solid rgba(90,78,52,.2);background:rgba(255,255,255,.55)}
/* midden: het onderwerp */
.hh-m{position:relative;display:grid;place-items:center;min-height:clamp(260px,34vw,430px)}
.hh-aura{position:absolute;width:min(340px,86%);aspect-ratio:1;border-radius:50%;
/* 27-09: een strakke donkere cirkel (zoals de donkere band op /automatisering/),
geen vage vlek — daartegen gloeit de bol */
background:radial-gradient(circle,#161a22 0%,#0e1116 58%,rgba(14,17,22,.55) 66%,rgba(14,17,22,0) 72%);
box-shadow:0 30px 80px -30px rgba(14,17,22,.5)}
.hh-bol{position:relative;display:block;line-height:0;
animation:hgZweef 7s ease-in-out infinite}
@keyframes hgZweef{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@media(prefers-reduced-motion:reduce){.hh-bol{animation:none}}
/* 29-09: Automate · Check · Execute onder de bol, het actieve woord in de statuskleur
(lichte tinten: tekst op de donkere aura). Wit met 62 % voor de rest. */
.hh-stap{position:absolute;left:50%;bottom:clamp(14px,2.2vw,34px);transform:translateX(-50%);
display:flex;gap:clamp(10px,1.2vw,16px);white-space:nowrap;
font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.hh-stap i{font-style:normal;color:rgba(255,255,255,.62);transition:color .4s}
.hh-stap i.aan:nth-child(1){color:#aab4ff}
.hh-stap i.aan:nth-child(2){color:#ffcf85}
.hh-stap i.aan:nth-child(3){color:#8ae8bf}
/* op de aura is de ondergrond donker: dan hoort de bol te glóéien in plaats
van een omtreklijn te hebben */
.hh-m .hl-bot{--hl-rand:rgba(255,255,255,.34);--hl-gl:200,215,240;
--hl-lo:#b9c6d6;--hl-ringgl:215,232,255}
/* rechts */
.hh-r{display:grid;gap:clamp(10px,1.2vw,16px);align-content:center}
.hh-kaart{border-radius:15px;padding:clamp(13px,1.2vw,18px);
border:1px solid rgba(60,52,34,.14);background:rgba(255,255,255,.82);
box-shadow:0 22px 44px -34px rgba(40,34,20,.45)}
.hh-kk{display:flex;align-items:center;gap:10px;padding-bottom:11px;
border-bottom:1px solid rgba(60,52,34,.1);margin-bottom:10px}
.hh-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;
border-radius:10px;background:#1b1a17;line-height:0}
.hh-ico .hl-bot{--hl-rand:rgba(255,255,255,.3);--hl-gl:200,215,240;--hl-lo:#b9c6d6}
.hh-kk b{display:block;font-size:13px;font-weight:500;color:#211f1b}
.hh-kk span{display:block;font-size:11.5px;color:#6b6356}
.hh-taken{list-style:none;margin:0;padding:0;display:grid;gap:8px;
/* net als in de referentie vervaagt de lijst onderaan: er is meer dan dit */
-webkit-mask-image:linear-gradient(#000 58%,rgba(0,0,0,.15));
mask-image:linear-gradient(#000 58%,rgba(0,0,0,.15))}
.hh-t{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#4f4a3f;
opacity:0;animation:hhIn .45s ease forwards;animation-delay:calc(var(--i) * .14s + .3s)}
@keyframes hhIn{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
.hh-t i{flex:none;width:7px;height:7px;border-radius:50%;background:#c8c2b4}
.hh-klaar i{background:#5f8f6a}
.hh-bezig i{background:var(--ac-vlak);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent);
animation:hgPols 1.8s ease-in-out infinite}
.hh-cijfer{display:grid;gap:2px}
.hh-cl{font-size:11.5px;color:#6b6356}
.hh-cijfer b{font-family:var(--disp,inherit);font-size:clamp(26px,2.4vw,34px);
font-weight:500;letter-spacing:-.03em;color:#211f1b;line-height:1}
.hh-cs{font-size:11.5px;color:#6b6356}
.hh-slot{margin:4px 0 0;font-family:var(--disp,inherit);font-weight:500;
font-size:clamp(19px,1.9vw,27px);line-height:1.12;letter-spacing:-.03em;color:#1b1a17}
/* onderaan: in de referentie een logorij, bij ons de zes werkgebieden */
.hh-onder{margin-top:clamp(26px,3.4vw,52px);display:grid;justify-items:center;gap:13px}
.hh-ol{font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;
letter-spacing:.2em;text-transform:uppercase;color:#5d5344}
.hh-onder ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
justify-content:center;gap:8px 10px}
.hh-onder li{padding:9px 20px;border-radius:12px;font-size:13.5px;color:#3f3a31;
border:1px solid rgba(90,78,52,.16);background:rgba(255,255,255,.72)}
@media (max-width:1080px){
.hh{grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px)}
.hh-m{grid-column:1/-1;order:-1;min-height:220px}
.hh-r{grid-column:1/-1}
.hh-r{grid-template-columns:1fr 1fr;align-items:start}
.hh-slot{grid-column:1/-1}}
@media (max-width:720px){
.hh{grid-template-columns:1fr}
/* ⭐ 22-09: het embleem stond op 300 px en vulde 37% van het eerste scherm;
daaronder begon meteen de tekstwas, zodat er van de skylinefoto alleen
mist overbleef. Kleiner embleem = een echte fotoband ertussen. */
/* 27-09: --s op de BUITENSTE .hl-bot zetten; alleen de binnenste liet de bol
scheef en groter dan zijn eigen doos staan */
.hh-m .hl-bot{--s:120px!important}
.hh-aura{width:220px}
.hh-m{min-height:250px}
.hh-r{grid-template-columns:1fr}
.hh-kop{font-size:clamp(28px,8vw,38px)}}
.hg-blok{background:var(--paper)}
.hg-vlak{background:var(--paper2)}
.hg-rij{list-style:none;margin:clamp(22px,3vw,40px) 0 0;padding:0;display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.hg-st,.hg-d{position:relative;padding:clamp(18px,1.8vw,26px);border-radius:var(--r,14px);
border:1px solid var(--line);background:rgba(255,255,255,.62);overflow:hidden}
.hg-vlak .hg-d{background:rgba(255,255,255,.78)}
.hg-n{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:12px;
letter-spacing:.14em;color:var(--ac)}
.hg-st h3,.hg-d h3{margin:10px 0 0;font-size:clamp(17px,1.35vw,21px);font-weight:400;line-height:1.2}
.hg-st p,.hg-d p{margin:8px 0 0;font-size:clamp(14px,1vw,16px);line-height:1.5;color:var(--mut)}
.hg-st::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
background:linear-gradient(90deg,#ff7a59,#bd3a42);transition:width .6s ease}
.hg-st.in::after{width:100%}
.hg-rij-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* ── drie routes naar een klant (/leadgeneratie/) ─────────────────────────── */
.lk{list-style:none;margin:clamp(26px,3.4vw,46px) 0 0;padding:0;display:grid;
gap:clamp(20px,2.4vw,34px)}
.lk-r{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2vw,32px);
padding-top:clamp(16px,1.8vw,24px);border-top:2px solid var(--ac)}
.lk-n{font-size:var(--fs-micro);letter-spacing:.14em;color:var(--ac);padding-top:6px}
.lk-t h3{margin:0;font-family:var(--disp,inherit);font-weight:500;
font-size:clamp(19px,1.7vw,26px);line-height:1.15;letter-spacing:-.02em}
.lk-t p{margin:10px 0 0;max-width:62ch;font-size:clamp(14px,1vw,16px);
line-height:1.6;color:var(--mut)}
.lk-ch{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.lk-ch span{display:inline-flex;align-items:center;gap:7px;
font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;
letter-spacing:.06em;padding:6px 12px;border-radius:999px;color:var(--ink3);
border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 4%,transparent)}
.lk-ch span.met{padding-left:7px}
.lk-ch svg{flex:none;border-radius:4px}
@media(max-width:700px){.lk-r{grid-template-columns:1fr;gap:6px}}
.hg-feiten{list-style:none;margin:clamp(30px,4vw,60px) 0 0;padding:0;display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,54px)}
.hg-feit{display:grid;gap:10px;padding-top:18px;border-top:2px solid var(--ac)}
.hg-feit b{font-family:var(--disp,inherit);font-weight:500;
font-size:clamp(22px,2vw,30px);line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
.hg-feit span{font-size:clamp(14px,1vw,16px);line-height:1.55;color:var(--mut)}
@media(max-width:820px){.hg-feiten{grid-template-columns:1fr;gap:26px}}
/* de kop draagt een streepje: dit is wat het NIET doet */
.hg-niet-k h3{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px;
align-items:baseline;font-size:clamp(16px,1.2vw,19px);line-height:1.25}
.hg-niet-k h3::before{content:"\2014";color:var(--ac);font-weight:400}
.hg-niet-k p{margin:10px 0 0}
@media(max-width:900px){.hg-rij-3{grid-template-columns:1fr}}
@media (max-width:1100px){.hg-rij{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.hg-rij{grid-template-columns:1fr}}
/* ══ De levende voorbeeldkaart (5e) ════════════════════════════════════════
Was een schermafdruk; nu in code, met het Halo-embleem in het midden en
punten die over de lijnen lopen. Alleen transform/opacity, en `animateMotion`
in de SVG — geen JavaScript, geen filter per frame. */
.ax{margin:0;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1);
background:#0e1116;color:#eef1f5;box-shadow:0 28px 60px -40px rgba(8,10,14,.6);
--ac:#ff9a7e;
--hl-mid:#f4f7fa; --hl-lo:#b6c3d2; --hl-gl:190,215,245;
--hl-oog:#161c26; --hl-ringgl:210,230,255; --hl-rand:rgba(255,255,255,.3)}
.ax-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;
border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.ax-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.ax-bar span{margin-left:8px;font-size:12.5px;color:#a8b3c0}
.ax-bar b{margin-left:auto;font-family:var(--mono,ui-monospace,monospace);
font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7f8b99;font-weight:400}
/* ⚠️ ÉÉN bron voor de tussenruimte: de verbindingslijnen tekenen precies
die afstand. Twee losse clamp-waarden lopen uit elkaar en dan hangt de
lijn in de lucht (gemeten: gap 30, lijn 34 -> geen aansluiting). */
.ax-veld{--gap:clamp(18px,2.4vw,38px);
position:relative;display:grid;gap:var(--gap);
grid-template-columns:1fr 1.15fr 1fr;align-items:center;
padding:clamp(18px,2.6vw,34px) clamp(14px,2vw,26px)}
.ax-bron,.ax-agent,.ax-a{border-radius:12px;padding:14px 15px;
border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04)}
.ax-agent{border-color:rgba(255,154,126,.45);background:rgba(255,154,126,.07);
position:relative;text-align:left}
.ax-bol{position:absolute;right:12px;top:10px;line-height:0}
.ax-lbl{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:9.5px;
letter-spacing:.18em;text-transform:uppercase;color:#7f8b99}
.ax-agent .ax-lbl{color:var(--ac)}
/* ⚠️ GEEN : dit is een voorbeeldpaneel, geen documentstructuur. Met een
h4 sprong de pagina van h1 naar h4 (CORE B19). */
.ax-t{display:block;margin:6px 0 0;font-size:clamp(14px,1.1vw,17px);font-weight:500;
line-height:1.2;color:#f2f5f8}
.ax-agent .ax-t{color:var(--ac)}
.ax p{margin:4px 0 0;font-size:clamp(11.5px,.88vw,13px);line-height:1.45;color:#8e9aa8}
.ax-st{display:block;margin-top:10px;padding:5px 9px;border-radius:7px;
font-family:var(--mono,ui-monospace,monospace);font-size:11px;
background:rgba(255,255,255,.05);color:#a8b3c0}
.ax-st1{color:#8fd4a8}
.ax-st2{color:#e0b464}
/* ── de vier inrichtingslagen (22-09, /halo-ai/) ───────────────────────────
⭐ Lenny: *"benoem dat Halo ook op maat wordt toegepast."* Eigen vorm: de
lagen schuiven bij het onthullen op elkaar, want het zijn letterlijk
lagen die op elkaar liggen. Geen kaartenraster — dat staat al twee keer
op deze pagina. */
.ml{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ml-l{max-width:none;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.05fr);
gap:clamp(14px,2vw,30px);align-items:start;
padding:clamp(17px,1.7vw,24px) clamp(18px,2vw,28px);
border:1px solid var(--line);border-radius:14px;background:var(--kk-vlak);
transform:translateY(16px);opacity:0;
transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .45s ease,
border-color .3s ease;
transition-delay:calc(var(--i) * 110ms)}
.ml.in .ml-l{transform:none;opacity:1}
.ml-l:hover{border-color:var(--ink3)}
.ml-n{font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.14em;
color:var(--ink3);padding-top:3px}
.ml-t b{display:block;font-size:clamp(15px,1.15vw,17.5px);font-weight:500;color:var(--ink)}
.ml-t p{margin:6px 0 0;max-width:42ch;font-size:clamp(12.5px,.92vw,13.5px);line-height:1.5;
color:var(--ink3)}
.ml-v{display:grid;gap:7px;justify-self:stretch}
.ml-r{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:9px;align-items:baseline}
.ml-r code{font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;
padding:3px 8px;border-radius:6px;background:var(--kk-vlak);
border:1px solid var(--line);color:var(--ink);white-space:nowrap}
.ml-r i{font-style:normal;color:var(--ac);font-size:12px}
.ml-r em{font-style:normal;font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;
color:var(--ink3);line-height:1.5}
.ml-slot{margin:clamp(20px,2.2vw,30px) 0 0;max-width:62ch;
font-size:clamp(13px,.95vw,14.5px);line-height:1.55}
@media (max-width:860px){
.ml-l{grid-template-columns:auto minmax(0,1fr);row-gap:12px}
.ml-v{grid-column:1/-1}
.ml-r{grid-template-columns:auto auto minmax(0,1fr)}
.ml-t p{max-width:none}
}
@media (prefers-reduced-motion:reduce){
.ml-l{transform:none;opacity:1;transition:none}
}
/* ── vier praktijkgevallen in dezelfde animatie (22-09) ────────────────────
⭐ Lenny: *"die animatie op de automatiseringspagina is de standaard; laat
daarmee zien wat hij in de praktijk doet, voor een vakman, een
dienstverlener, een MKB'er."* */
.pk{display:grid;gap:18px}
.pk-vel{display:none}
.pk-vel.aan{display:block}
/* stippen, geen knoppenrij: Lenny vroeg om een diavoorstelling */
.pk-stip{display:flex;justify-content:center;gap:9px}
.pk-stip button{width:34px;height:4px;border-radius:999px;border:0;padding:0;cursor:pointer;
background:var(--line);transition:background-color .3s ease,transform .3s ease}
.pk-stip button:hover{background:var(--ink3)}
.pk-stip button[aria-current="true"]{background:var(--ac-vlak);transform:scaleY(1.6)}
/* ── het paneel: vier verschillende weergaven, één jas ───────────────────── */
.pv{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1);
background:#0e1116;color:#eef1f5;--ac:#ff9a7e;
box-shadow:0 28px 60px -40px rgba(8,10,14,.6);
--hl-mid:#f4f7fa; --hl-lo:#b6c3d2; --hl-gl:190,215,245;
--hl-oog:#161c26; --hl-ringgl:210,230,255; --hl-rand:rgba(255,255,255,.3)}
.pv-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;
border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.pv-bar > i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);flex:none}
.pv-bar > span{margin-left:8px;font-size:12.5px;color:#a8b3c0}
.pv-bar > b{margin-left:auto;font-family:var(--mono,ui-monospace,monospace);
font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7f8b99;font-weight:400;
white-space:nowrap}
.pv-duur{color:var(--ac)!important}
.pv b{color:#eef1f5}
.pv-body{padding:clamp(20px,2.4vw,34px)}
.pv-voet{margin:24px 0 0;max-width:none;font-size:clamp(11.5px,.88vw,13px);
line-height:1.5;color:#8e9aa8}
/* 1 · TIJDLIJN — het gaat hier om de doorlooptijd */
.pv-t-veld{position:relative;height:210px;--tw:min(215px,19%)}
.pv-t-as{position:absolute;left:0;right:0;top:50%;height:1.5px;
background:rgba(255,255,255,.12);border-radius:2px}
.pv-t-as i{position:absolute;inset:0;border-radius:2px;background:var(--ac-vlak);
transform-origin:left;transform:scaleX(0);animation:pvAs 8s ease-in-out infinite}
.pv-t-loop{position:absolute;top:50%;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
border-radius:50%;background:var(--ac-vlak);box-shadow:0 0 0 7px rgba(255,154,126,.14);
animation:pvLoop 8s ease-in-out infinite}
.pv-t-lijst{list-style:none;margin:0;padding:0}
.pv-t-p{position:absolute;left:var(--x);width:var(--tw);max-width:none;
opacity:0;animation:pvPunt .55s ease-out forwards;
animation-delay:calc(.9s + var(--i) * 1.3s)}
.pv-t-p::before{content:"";position:absolute;left:-4.5px;width:9px;height:9px;
border-radius:50%;background:#0e1116;border:1.5px solid var(--ac)}
.pv-t-p::after{content:"";position:absolute;left:0;width:1.5px;height:22px;
background:rgba(255,255,255,.14)}
.pv-t-p:nth-child(odd){bottom:calc(50% + 28px)}
.pv-t-p:nth-child(odd)::before{bottom:-32.5px}
.pv-t-p:nth-child(odd)::after{bottom:-24px}
.pv-t-p:nth-child(even){top:calc(50% + 28px)}
.pv-t-p:nth-child(even)::before{top:-32.5px}
.pv-t-p:nth-child(even)::after{top:-24px}
.pv-t-z{margin-left:calc(0px - var(--tw));text-align:right}
.pv-t-z::before{left:auto;right:-4.5px}
.pv-t-z::after{left:auto;right:0}
.pv-t-p b{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:11px;
letter-spacing:.1em;color:var(--ac);font-weight:400}
.pv-t-k{display:block;margin-top:5px;font-size:14px;font-weight:500;color:#eef1f5}
.pv-t-u{display:block;margin-top:3px;font-size:11.5px;line-height:1.4;color:#8e9aa8}
/* 2 · UITLEZEN — het gaat hier om wat er uit een tekening komt */
.pv-u-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
gap:clamp(18px,3vw,44px);align-items:center}
.pv-u-tek{margin:0;padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:12px;
background:rgba(255,255,255,.02)}
.pv-u-tek svg{display:block;width:100%;height:auto}
.pv-u-tek figcaption{margin-top:10px;font-family:var(--mono,ui-monospace,monospace);
font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#7f8b99}
.pv-u-hot circle{fill:var(--ac);opacity:0;
animation:pvHot 8s ease-in-out infinite;animation-delay:calc(.8s + var(--i) * 1.25s)}
.pv-u-lijst{list-style:none;margin:0;padding:0;display:grid;gap:1px;overflow:hidden;
border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.09)}
.pv-u-r{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
max-width:none;padding:14px 16px;background:#0e1116;opacity:0;
animation:pvRij .5s ease-out forwards;animation-delay:calc(1.05s + var(--i) * 1.25s)}
.pv-u-r span{font-size:12.5px;color:#8e9aa8}
.pv-u-r b{font-size:14px;font-weight:500;white-space:nowrap}
.pv-u-r.let{background:rgba(224,180,100,.07)}
.pv-u-r.let b{color:#e0b464}
/* 3 · SAMENVOEGEN — veel briefjes worden één post */
.pv-s-body{display:grid;grid-template-columns:auto auto minmax(0,1fr);
gap:clamp(16px,3vw,40px);align-items:center}
.pv-s-in{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;width:clamp(120px,14vw,172px)}
.pv-s-in i{display:block;height:30px;border-radius:4px;
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.04)
linear-gradient(rgba(255,255,255,.22) 1px,transparent 0) 6px 8px/calc(100% - 12px) 6px repeat-y;
animation:pvBrief 8s ease-in-out infinite;animation-delay:calc(var(--i) * .13s)}
.pv-s-kern{position:relative;display:grid;place-items:center;width:86px;height:86px}
.pv-s-ring{position:absolute;inset:0;border-radius:50%;
border:1px solid rgba(255,154,126,.45);animation:pvRing 2.8s ease-out infinite}
.pv-s-uit{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pv-s-uit li{max-width:none;padding:13px 16px;border-radius:11px;
border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.02);opacity:0;
animation:pvRij .5s ease-out forwards;animation-delay:calc(2.4s + var(--i) * .45s)}
.pv-s-uit b{display:block;font-size:14.5px;font-weight:500}
.pv-s-uit span{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:#8e9aa8}
.pv-s-uit li.let{border-color:rgba(224,180,100,.4);background:rgba(224,180,100,.07)}
.pv-s-uit li.let b{color:#e0b464}
/* 4 · WACHTRIJ — een stapel die wordt weggewerkt */
.pv-teller i{font-style:normal;color:var(--ac);font-size:12px}
.pv-w-lijst{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pv-w-r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;
max-width:none;padding:14px 17px;border-radius:11px;
border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.02);
animation:pvWacht 8s ease-in-out infinite;animation-delay:calc(var(--i) * .85s)}
.pv-w-r b{font-family:var(--mono,ui-monospace,monospace);font-size:12.5px;font-weight:400;
letter-spacing:.06em;color:#b6c3d2}
.pv-w-r span{font-size:12.5px;color:#8e9aa8}
.pv-w-r em{font-style:normal;font-family:var(--mono,ui-monospace,monospace);font-size:10px;
letter-spacing:.14em;text-transform:uppercase;color:#8fd4a8;white-space:nowrap;
opacity:0;animation:pvVink .4s ease-out forwards;animation-delay:calc(.75s + var(--i) * .85s)}
.pv-w-r.let{border-color:rgba(224,180,100,.4);background:rgba(224,180,100,.06)}
.pv-w-r.let em{color:#e0b464}
@keyframes pvAs{0%,6%{transform:scaleX(0)}72%,100%{transform:scaleX(1)}}
@keyframes pvLoop{0%,6%{left:0}72%,100%{left:100%}}
@keyframes pvPunt{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes pvRij{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes pvVink{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:none}}
@keyframes pvHot{0%,8%{opacity:0;r:3.5}14%{opacity:1;r:5.5}26%,100%{opacity:.8;r:3.5}}
@keyframes pvBrief{0%,4%{opacity:1;transform:none}
22%{opacity:0;transform:translateX(34px) scale(.7)}
23%,100%{opacity:1;transform:none}}
@keyframes pvRing{0%{transform:scale(.78);opacity:.85}100%{transform:scale(1.25);opacity:0}}
@keyframes pvWacht{0%,4%{opacity:.35;border-color:rgba(255,255,255,.09)}
9%{opacity:1;border-color:rgba(255,154,126,.5)}
16%,100%{opacity:1;border-color:rgba(255,255,255,.09)}}
@media (max-width:860px){
.pv-u-body,.pv-s-body{grid-template-columns:1fr}
.pv-s-in{width:100%;grid-template-columns:repeat(6,1fr)}
.pv-s-kern{justify-self:center}
.pv-t-veld{height:auto}
.pv-t-as,.pv-t-loop{display:none}
.pv-t-lijst{display:grid;gap:16px}
.pv-t-p{position:relative;left:0;top:auto;bottom:auto;width:auto;padding-left:22px}
.pv-t-p:nth-child(odd),.pv-t-p:nth-child(even){top:auto;bottom:auto}
/* het laatste punt staat op de brede weergave rechts; verticaal hoort het
gewoon in de rij mee te lopen */
.pv-t-z{margin-left:0;text-align:left}
.pv-t-p::before,.pv-t-p:nth-child(odd)::before,.pv-t-p:nth-child(even)::before,
.pv-t-z::before{left:0;right:auto;top:4px;bottom:auto}
.pv-t-p::after{display:none}
.pv-w-r{grid-template-columns:auto minmax(0,1fr);row-gap:6px}
.pv-w-r em{grid-column:2}
}
@media (prefers-reduced-motion:reduce){
.pv-t-as i,.pv-t-loop,.pv-u-hot circle,.pv-s-in i,.pv-s-ring,.pv-w-r,.pv-w-r em,
.pv-t-p,.pv-u-r,.pv-s-uit li{animation:none!important;opacity:1!important;transform:none!important}
}
.ax-balk{display:block;margin-top:10px;height:8px;border-radius:7px;
background:rgba(255,255,255,.06);overflow:hidden}
.ax-balk i{display:block;height:100%;width:40%;border-radius:7px;background:var(--ac-vlak);
transform-origin:left;animation:axBezig 2.6s ease-in-out infinite}
@keyframes axBezig{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
/* ⚠️ Eerst gebogen SVG-paden met `preserveAspectRatio="none"` (rekte mee, liep
dwars door de agent), daarna een bus op PERCENTAGES van het hele vak — en die
percentages kloppen niet, want de kolommen zijn 1fr / 1,15fr / 1fr mét gaps.
Nu laat ik het RASTER de posities bepalen: de bus is zelf een rastercel in
dezelfde kolom als de acties, dus hij kan niet meer misstaan bij een andere
breedte. Alles horizontaal en verticaal, dus vervormen kan niet. */
/* ⚠️ Alle VIJF de kinderen expliciet plaatsen. Zet je alleen de twee
verbindingslagen in een kolom, dan schuift de automatische plaatsing de
agent en de acties naar een tweede rij — gemeten: de drie actiekaarten
stonden opeens onder elkaar in kolom 1. De lagen liggen in DEZELFDE cel als
wat ze verbinden, en tekenen naar links het gat in. */
.ax-bron{grid-column:1;grid-row:1}
.ax-agent{grid-column:2;grid-row:1}
.ax-acties{grid-column:3;grid-row:1}
.ax-kabel,.ax-bus{position:relative;align-self:stretch;pointer-events:none;
grid-row:1;z-index:0;height:100%}
.ax-kabel{grid-column:2}
.ax-bus{grid-column:3}
.ax-kabel i,.ax-bus i{position:absolute;background:rgba(255,255,255,.18)}
/* aanvoer: van de bronkaart de agent in */
.ax-kabel::before{content:"";position:absolute;left:calc(var(--gap) * -1);
width:var(--gap);top:50%;height:1.5px;margin-top:-.75px;
background:rgba(255,154,126,.55)}
/* afvoer: van de agent naar de verdeler, dan drie stubs naar de kaarten */
.ax-bus::before{content:"";position:absolute;left:calc(var(--gap) * -1);
width:calc(var(--gap) / 2);top:50%;height:1.5px;margin-top:-.75px;
background:rgba(255,154,126,.55)}
.ax-spil{left:calc(var(--gap) / -2);width:1.5px;top:17%;bottom:17%}
.ax-tak{left:calc(var(--gap) / -2);width:calc(var(--gap) / 2);height:1.5px}
.ax-tak1{top:17%} .ax-tak2{top:50%;margin-top:-.75px} .ax-tak3{top:83%}
.ax-in{display:none}
/* één punt legt de route af van de bron naar de agent */
.ax-p{position:absolute;left:calc(var(--gap) * -1);top:50%;width:7px;height:7px;
margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--ac-vlak);
animation:axLoop 2.8s cubic-bezier(.5,0,.5,1) infinite}
@keyframes axLoop{0%{transform:translateX(0);opacity:0} 15%{opacity:1}
70%{transform:translateX(var(--gap));opacity:1}
80%{transform:translateX(var(--gap));opacity:0} 100%{opacity:0}}
/* ⭐ 22-09 — het paneel SPEELT de stroom af in plaats van hem te tekenen.
Eén cyclus van 7 s: bron licht op, punt loopt naar de agent, de agent
pulseert, daarna lopen drie punten naar de acties en verschijnen die één
voor één. Alleen transform en opacity. */
.ax-q{position:absolute;left:calc(var(--gap) / -2);width:6px;height:6px;
margin:-3px 0 0 -3px;border-radius:50%;background:var(--ac-vlak);opacity:0;
animation:axTak 7s cubic-bezier(.5,0,.5,1) infinite}
.ax-q1{top:17%;animation-delay:2.5s}
.ax-q2{top:50%;animation-delay:2.9s}
.ax-q3{top:83%;animation-delay:3.3s}
@keyframes axTak{
0%{transform:translateX(0);opacity:0}
4%{opacity:1}
16%{transform:translateX(calc(var(--gap) / 2));opacity:1}
22%{transform:translateX(calc(var(--gap) / 2));opacity:0}
100%{opacity:0}}
/* de bron en de agent lichten op in dezelfde maat */
.ax-bron{animation:axBron 7s ease-in-out infinite}
@keyframes axBron{0%,4%{box-shadow:0 0 0 0 transparent}
10%{box-shadow:0 0 0 1px var(--ac)}
30%,100%{box-shadow:0 0 0 0 transparent}}
.ax-agent{animation:axAgent 7s ease-in-out infinite}
@keyframes axAgent{0%,22%{box-shadow:0 0 0 0 transparent}
30%{box-shadow:0 0 0 1px var(--ac)}
52%,100%{box-shadow:0 0 0 0 transparent}}
/* elke actie komt op als zijn punt is aangekomen */
.ax-a{opacity:.5;animation:axActie 7s ease-in-out infinite}
.ax-a:nth-child(1){animation-delay:.1s}
.ax-a:nth-child(2){animation-delay:.5s}
.ax-a:nth-child(3){animation-delay:.9s}
@keyframes axActie{0%,38%{opacity:.5;transform:translateX(0)}
46%{opacity:1;transform:translateX(3px)}
56%,92%{opacity:1;transform:translateX(0)}
100%{opacity:.5;transform:translateX(0)}}
.ax-bron,.ax-agent,.ax-acties{position:relative;z-index:1}
.ax-acties{list-style:none;margin:0;padding:0;display:grid;gap:clamp(8px,1vw,12px)}
.ax-a{padding:11px 13px}
@media(prefers-reduced-motion:reduce){
.ax-balk i,.ax-l,.ax-bron,.ax-agent,.ax-a{animation:none}
.ax-a{opacity:1}
.ax-p,.ax-q{display:none}}
@media (max-width:820px){
.ax-veld{grid-template-columns:1fr;gap:14px}
/* ⚠️ De expliciete kolomnummers van de desktop blijven anders gewoon gelden:
met één kolom in het sjabloon maakt de browser er stilletjes twee extra
bij en loopt de kaart 385 px buiten beeld (gemeten op 390 px). Dus hier
alles terug naar één kolom, op eigen rij. */
.ax-bron,.ax-agent,.ax-acties{grid-column:1;grid-row:auto}
.ax-kabel,.ax-bus{display:none}
/* zonder de lijnen moet de volgorde zelf de stroom vertellen */
.ax-agent{border-left:3px solid var(--ac)}}
/* ══ Halo AI · logboek, back-story en de pil ═══════════════════════════════
21-09-2026. Gemeten bij de referenties die Lenny aanwees: wat "clean" maakt
is niet de hoeveelheid wit (die loopt van 0,4 % bij EOSAI tot 81 % bij
Metafore) maar **bijna geen kleur** — 1,3 tot 1,4 % verzadiging. Dus hier
geen goud-verlopen meer; goud alleen als haarlijn en als klein label. */
.hg-pil{display:inline-flex;align-items:center;gap:8px;padding:7px 15px 7px 11px;
border-radius:999px;font-size:12.5px;letter-spacing:.01em;color:#4a4235;
border:1px solid rgba(90,78,52,.22);background:rgba(255,253,248,.7)}
.hg-pil i{width:7px;height:7px;border-radius:50%;background:#5f8f6a;
box-shadow:0 0 0 3px rgba(95,143,106,.18);animation:hgPols 2.6s ease-in-out infinite}
@keyframes hgPols{0%,100%{opacity:1}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.hg-pil i{animation:none}}
/* ── vier logboeken in plaats van één (22-09) ──────────────────────────────
⭐ Lenny: *"er staat alleen een kaart van één ochtend; ik wil verschillende
manieren zien waarop Halo ingezet kan worden."* Knoppen erboven, één venster
eronder. Wisselt vanzelf door en je kunt zelf kiezen. */
.lb{display:grid;gap:14px}
.lb-kies{display:flex;flex-wrap:wrap;gap:8px}
.lb-kies button{font:400 13px/1 var(--sans);padding:9px 15px;border-radius:999px;
cursor:pointer;color:var(--ink3);border:1px solid var(--line);
background:transparent;transition:color .25s ease,border-color .25s ease,
background-color .25s ease}
.lb-kies button:hover{color:var(--ink);border-color:var(--ink3)}
.lb-kies button[aria-current="true"]{color:var(--ac-op);background:var(--ac-vlak);border-color:var(--ac-vlak)}
.lb-vel{display:none}
.lb-vel.aan{display:block}
/* de regels komen opnieuw op zodra je wisselt */
.lb-vel.aan .hv-r{animation:hvIn .5s ease forwards}
/* het logboek — het idee komt van Elara (een venster met afvinkregels in plaats
van een belofte); de inhoud en de vorm zijn van ons */
.hv{margin:clamp(24px,3vw,44px) 0 0;border-radius:16px;overflow:hidden;
border:1px solid rgba(60,52,34,.16);background:#fbf9f4;
box-shadow:0 30px 60px -44px rgba(40,34,20,.4)}
.hv-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;
border-bottom:1px solid rgba(60,52,34,.12);background:rgba(255,255,255,.7)}
.hv-bar i{width:9px;height:9px;border-radius:50%;background:rgba(60,52,34,.16)}
.hv-bar span{margin-left:8px;font-size:12.5px;color:#6b6152}
.hv-bar b{margin-left:auto;font-family:var(--mono,ui-monospace,monospace);font-size:10px;
letter-spacing:.18em;text-transform:uppercase;color:#48714f;font-weight:400}
/* ⚠️ TWEE dingen houden deze rijen kort, en ze zijn allebei nodig.
1. `grid-template-columns:1fr` op de lijst: zonder die regel krijgt de
impliciete kolom max-content (gemeten 713 px in een venster van 1290).
2. ⭐ 22-09: `li{max-width:68ch}` op regel ~2600 raakt ÓÓK deze rijen — een
kale elementkiezer voor leesbaarheid, bedoeld voor lopende tekst. De rij
bleef daardoor op exact 615 px staan in een paneel van 1290. Zelfde val
als de gecentreerde lijst op 15-09. Een paneelrij is geen leesregel. */
.hv-lijst{list-style:none;margin:0;padding:clamp(14px,1.8vw,24px);display:grid;
grid-template-columns:1fr;gap:2px}
.hv-lijst li{max-width:none}
.hv-r{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;
gap:14px;padding:11px 12px;border-radius:9px;
font-size:clamp(13px,1vw,15px);line-height:1.4;
opacity:0;animation:hvIn .5s ease forwards;animation-delay:calc(var(--i) * .16s + .2s)}
@keyframes hvIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hv-r:nth-child(odd){background:rgba(60,52,34,.035)}
/* gemeten op paneel, oneven rij, wachtrij en balk: 5,78 / 5,49 / 5,17 / 5,92 */
.hv-t{font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;color:#6a6155}
.hv-k{font-weight:500;color:#241c07}
.hv-u{color:#6b6152}
.hv-ok .hv-k::before{content:"\2713\00a0\00a0";color:#5f8f6a;font-weight:600}
.hv-in .hv-k::before{content:"\2193\00a0\00a0";color:#8a8070;font-weight:600}
.hv-wacht .hv-k::before{content:"\25cf\00a0\00a0";color:#b08a2e;font-weight:600}
.hv-wacht{background:rgba(176,138,46,.09)!important;
box-shadow:inset 0 0 0 1px rgba(176,138,46,.22)}
@media(prefers-reduced-motion:reduce){.hv-r{opacity:1;animation:none}}
@media(max-width:700px){.hv-r{grid-template-columns:auto 1fr;gap:6px 12px}
.hv-u{grid-column:2}}
/* de back-story: vier blokken onder elkaar, nummer in de kantlijn */
/* ⭐ 22-09: stond op één kolom met `max-width:78ch` (833 px) in een vak van
1292 — de rechterhelft van de sectie was leeg. Vier blokken passen als
2×2; de leesbreedte per blok blijft ruim onder 70 tekens. */
.hv-verhaal{list-style:none;margin:clamp(26px,3.4vw,48px) 0 0;padding:0;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(18px,2.2vw,30px) clamp(28px,4vw,72px);max-width:none}
/* de onderste rij draagt geen scheidingslijn */
.hv-verhaal .hv-v:nth-last-child(-n+2){border-bottom:0;padding-bottom:0}
@media(max-width:860px){.hv-verhaal{grid-template-columns:1fr}
.hv-verhaal .hv-v:nth-last-child(2){border-bottom:1px solid rgba(90,78,52,.14);
padding-bottom:clamp(18px,2.2vw,30px)}}
/* ⚠️ Drie kinderen in een raster van twee kolommen plaatst de browser zelf:
nummer in kolom 1, kop in kolom 2, en de ALINEA weer in kolom 1 op een
nieuwe rij — waardoor de kop tot één woord per regel werd geperst. Alle drie
dus expliciet plaatsen. Tweede keer vandaag dezelfde val. */
.hv-v{display:grid;grid-template-columns:auto minmax(0,1fr);
gap:4px clamp(16px,2vw,30px);align-items:start;
padding-bottom:clamp(18px,2.2vw,30px);
border-bottom:1px solid rgba(90,78,52,.14)}
.hv-v .hv-n{grid-column:1;grid-row:1/3}
.hv-v h3{grid-column:2;grid-row:1}
.hv-v p{grid-column:2;grid-row:2;max-width:64ch}
.hv-v:last-child{border-bottom:0;padding-bottom:0}
/* #5d5344 haalde 3,15 op deze grond; #5d5344 haalt 6,02 (zelfde tint als het
label 'Nuttig bij', dat eerder om dezelfde reden omging). */
.hv-n{font-family:var(--mono,ui-monospace,monospace);font-size:12px;
letter-spacing:.14em;color:#5d5344;padding-top:.35em}
.hv-v h3{margin:0;font-size:clamp(19px,1.7vw,26px);font-weight:400;
letter-spacing:-.02em;line-height:1.2;color:#241c07}
.hv-v p{margin:9px 0 0;font-size:clamp(14.5px,1.05vw,16.5px);line-height:1.6;color:#5b5243}
@media(max-width:620px){.hv-v{grid-template-columns:1fr;gap:6px}
.hv-v .hv-n,.hv-v h3,.hv-v p{grid-column:1;grid-row:auto}}
/* ══ Het Halo-embleem komt van rechts binnen ═══════════════════════════════
21-09-2026, Lenny: *"op het einde wil ik dat het embleem weer tevoorschijn
komt aan de zijkant van de website, bij de volgende stap"* en *"hij moet via
rechts tevoorschijn komen."*
⛔ Niet `position:fixed`: dan hangt hij over de hele pagina mee. Hij hoort bij
één moment, dus hij zit in de stroom en schuift binnen zodra dat moment
in beeld komt. `.rv` -> `.in` doet de bestaande waarnemer al. */
/* ⚠️ `overflow-x:clip` hoort hier: hij komt van BUITEN het scherm binnen, en
zonder clip groeit de pagina mee — gemeten 250 px op desktop, 101 px op
mobiel. `clip` en niet `hidden`, want `hidden` maakt er een scrollvak van. */
.hzk{position:relative;height:0;overflow-x:clip;pointer-events:none;z-index:3}
.hzk-in{position:absolute;right:clamp(8px,3vw,48px);top:calc(var(--s, 84px) * -.55);
display:block;line-height:0;
transform:translateX(220px);opacity:0;
transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity .6s ease}
.hzk.in .hzk-in{transform:translateX(0);opacity:1}
@media (max-width:860px){.hzk-in{transform:translateX(150px)}}
@media(prefers-reduced-motion:reduce){
.hzk-in{transition:none;transform:none;opacity:1}}
/* ── proef: drie hero-scènes naast elkaar (21-09-2026) ────────────────────── */
.hg-scene picture{position:absolute;inset:0;display:block}
.hg-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* ⭐ 22-09: de STANDAARD is de Higgsfield-skylinefoto. Stond tot nu toe op de
getekende SVG, waardoor de foto die Lenny met credits liet maken nergens
in beeld kwam. De getekende blijft als `data-hh="0"` in de proefbalk. */
.hg-scene{display:none}
.hg-s-sky{display:block}
html[data-hh="0"] .hg-s-svg,
html[data-hh="a"] .hg-s-a,
html[data-hh="b"] .hg-s-b,
html[data-hh="sky"] .hg-s-sky{display:block}
html[data-hh="0"] .hg-s-sky,
html[data-hh="a"] .hg-s-sky,
html[data-hh="b"] .hg-s-sky{display:none}
/* ⚠️ Stond rechtsonder — precies onder de chatknop. Gemeten: alle drie de
knoppen onbereikbaar (`elementFromPoint` gaf de chatknop en een ander vlak).
Tweede keer dat labgereedschap de site in de weg zit; daarom nu LINKSonder
en met een z-index bóven de chat. */
.hg-kies{position:fixed;left:16px;top:86px;z-index:200;display:flex;align-items:center;
gap:6px;padding:7px 9px;border-radius:999px;background:rgba(18,18,20,.9);
font-family:var(--mono,ui-monospace,monospace);font-size:11px}
.hg-kies b{color:#8c8c93;font-weight:400;letter-spacing:.12em;text-transform:uppercase;padding:0 4px}
.hg-kies button{border:0;border-radius:999px;padding:6px 12px;cursor:pointer;
background:rgba(255,255,255,.1);color:#e8e8ea;font:inherit}
.hg-kies button[aria-pressed="true"]{background:#fff;color:#16181c}
html[data-schoon] .hg-kies{display:none}
/* ══ De zes voorbeelden ════════════════════════════════════════════════════
21-09-2026, Lenny: *"ik wil voorbeelden zien van hoe het bij mailbox,
offerte, CRM, facturen, planning en dossiers nuttig kan zijn. Mensen moeten
het zien."* Per kaart: de situatie, drie dingen die Halo doet, en wat je
eraan overhoudt. De uitkomst staat apart, want dat is waar het om gaat. */
.vb-rij{list-style:none;margin:clamp(26px,3.4vw,48px) 0 0;padding:0;display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.vb{position:relative;display:grid;gap:9px;align-content:start;
padding:clamp(18px,1.7vw,26px);border-radius:15px;
border:1px solid rgba(90,78,52,.15);background:rgba(255,255,255,.68);
transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s ease}
@media(hover:hover) and (pointer:fine){
.vb:hover{transform:translateY(-3px);box-shadow:0 24px 44px -34px rgba(40,34,20,.42)}}
.vb-n{font-family:var(--mono,ui-monospace,monospace);font-size:11px;
letter-spacing:.14em;color:#5d5344}
.vb h3{margin:0;font-size:clamp(17px,1.35vw,21px);font-weight:500;
letter-spacing:-.02em;color:#211f1b}
.vb-s{margin:0;font-size:13.5px;line-height:1.5;color:#6b6152;font-style:italic}
.vb-d{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px}
.vb-d li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.5;color:#4f4a3f}
/* ⭐ 22-09 — de kaart SPEELT zijn stappen af zodra hij in beeld komt, in plaats
van ze als lijst neer te zetten. Lenny vroeg twee keer om animerende
voorbeelden van de manier waarop hij automatiseert.
Eén keer per bezoek, geen lus: het streepje wordt een vinkje, de regel komt
op, en daarna verschijnt de uitkomst. Alleen opacity/transform/color. */
.vb-d li::before{content:"";position:absolute;left:0;top:.52em;width:11px;height:11px;
border-radius:50%;border:1.5px solid var(--ac);opacity:.35;
transition:opacity .3s ease,background-color .3s ease}
.vb-d li::after{content:"";position:absolute;left:3.4px;top:.78em;width:4px;height:2px;
border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;
transform:rotate(-45deg) scale(.4);transform-origin:50% 50%;opacity:0;
transition:opacity .25s ease,transform .25s cubic-bezier(.2,1.5,.4,1)}
.vb-d li{opacity:.42;transform:translateY(4px);
transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1)}
.vb.in .vb-d li{opacity:1;transform:none;
transition-delay:calc(.45s + var(--i) * .5s)}
.vb.in .vb-d li::before{opacity:1;background:var(--ac-vlak);
transition-delay:calc(.45s + var(--i) * .5s)}
.vb.in .vb-d li::after{opacity:1;transform:rotate(-45deg) scale(1);
transition-delay:calc(.58s + var(--i) * .5s)}
/* de voortgangslijn bovenlangs: loopt terwijl de stappen aangaan */
.vb-loop{position:absolute;left:0;right:0;top:0;height:2px;border-radius:15px 15px 0 0;
overflow:hidden;background:rgba(90,78,52,.1)}
.vb-loop::after{content:"";position:absolute;inset:0 auto 0 0;width:0;
background:linear-gradient(90deg,var(--ac-lt,#ff9a7e),var(--ac));
transition:width 1.9s cubic-bezier(.4,0,.2,1) .35s}
.vb.in .vb-loop::after{width:100%}
.vb-r{margin:6px 0 0;padding-top:11px;border-top:1px solid rgba(90,78,52,.14);
display:flex;gap:8px;font-size:13.5px;line-height:1.45;color:#211f1b;
opacity:0;transform:translateY(5px);
transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.vb.in .vb-r{opacity:1;transform:none;transition-delay:2.1s}
@media(prefers-reduced-motion:reduce){
.vb-d li,.vb-d li::before,.vb-d li::after,.vb-r{opacity:1;transform:none;transition:none}
.vb-d li::before{background:var(--ac-vlak)}
.vb-loop::after{width:100%;transition:none}}
.vb-r i{flex:none;color:var(--ac);font-style:normal}
@media (max-width:1050px){.vb-rij{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:660px){.vb-rij{grid-template-columns:1fr}}
/* ══ Eén bericht, overal in de juiste vorm ═════════════════════════════════
Naar de crossposting-plaat van ferryman.io. ⚠️ Eerste versie afgekeurd:
geen logo's, en de bron was tekst in plaats van een platform. Nu echte
logo's, een bron die je kunt wisselen, en een VASTE verhouding op het veld
zodat de tekening niet uitrekt (dat maakte de punten eerder ovaal). */
/* ── één opname, drie platforms, met de interface van elk (/content/) ──────
⭐ 22-09, derde poging. Lenny: *"het moet een VIDEO zijn en de interface van
de betreffende platforms, en zichtbaar veel likes en reposts."*
Eén clip van 299 kB, drie keer afgespeeld met andere chrome eromheen. */
.cp{display:grid;justify-items:center;gap:clamp(18px,2.2vw,30px);
margin:clamp(24px,3vw,40px) 0 clamp(30px,3.6vw,52px)}
.cp-pil{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;
font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.12em;
text-transform:uppercase;color:#c9f6d8;border:1px solid rgba(127,211,160,.4);
background:rgba(127,211,160,.08)}
.cp-pil i{width:7px;height:7px;border-radius:50%;background:#7fd3a0;
box-shadow:0 0 0 3px rgba(127,211,160,.18)}
.cp-rij{display:flex;justify-content:center;align-items:flex-start;
gap:clamp(12px,1.8vw,28px);flex-wrap:wrap}
.cp-tel{position:relative;margin:0;width:clamp(168px,20vw,248px);aspect-ratio:9/16;
border-radius:22px;overflow:hidden;background:#000;color:#fff;
border:5px solid #17181c;box-shadow:0 34px 60px -40px rgba(0,0,0,.9);
transform:translateY(calc(var(--i) * 10px)) rotate(calc((var(--i) - 1) * 1.2deg));
opacity:0;animation:cpIn .7s cubic-bezier(.16,1,.3,1) forwards;
animation-delay:calc(var(--i) * .16s + .2s)}
@keyframes cpIn{to{opacity:1}}
.cp-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cp-tel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
z-index:1;pointer-events:none;
background:linear-gradient(180deg,transparent,rgba(6,6,8,.82))}
/* merknaam bovenin */
.cp-merk{position:absolute;left:11px;top:11px;z-index:3;font-size:12px;font-weight:600;
letter-spacing:.01em;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.cp-yt .cp-merk{color:#fff}
.cp-yt .cp-merk::after{content:"";display:inline-block;width:5px;height:5px;margin-left:5px;
border-radius:50%;background:#f00;vertical-align:middle}
/* de rechterrail */
.cp-rail{position:absolute;right:7px;bottom:78px;z-index:3;display:grid;justify-items:center;
gap:13px}
.cp-knop{display:grid;justify-items:center;gap:3px;text-shadow:0 1px 6px rgba(0,0,0,.75)}
.cp-knop svg{width:23px;height:23px}
.cp-knop b{font-size:10.5px;font-weight:500}
.cp-av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
background:#fff;color:#111;font:700 13px/1 var(--sans);border:2px solid #fff}
.cp-av-ig{margin-top:2px}
.cp-onder .cp-av,.cp-av-yt{color:#111}
.cp-av-yt{width:19px;height:19px;font-size:10px;border-width:0;margin-right:5px;
display:inline-grid;vertical-align:middle}
.cp-plaat{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
background:rgba(255,255,255,.16);animation:cpDraai 5s linear infinite}
.cp-plaat svg{width:17px;height:17px}
@keyframes cpDraai{to{transform:rotate(360deg)}}
/* onderaan: naam, bijschrift, audio */
.cp-onder{position:absolute;left:11px;right:56px;bottom:11px;z-index:3;display:grid;gap:5px;
text-shadow:0 1px 6px rgba(0,0,0,.75)}
.cp-onder b{font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cp-onder i{font-style:normal;font-size:10px;font-weight:600;padding:3px 8px;border-radius:5px}
.cp-ig .cp-onder i{border:1px solid rgba(255,255,255,.7)}
.cp-yt .cp-onder i{background:#fff;color:#0f0f0f;border-radius:999px;padding:3px 10px}
.cp-onder span{font-size:11px;line-height:1.4;color:rgba(255,255,255,.93)}
.cp-muz{display:flex;align-items:center;gap:6px;font-size:10px;color:rgba(255,255,255,.85)}
.cp-muz svg{width:12px;height:12px;flex:none}
.cp-noot{margin:0;max-width:62ch;text-align:center;font-size:12.5px;line-height:1.5;
color:#8b95a3}
@media(prefers-reduced-motion:reduce){.cp-tel{opacity:1;animation:none}
.cp-plaat{animation:none}}
@media(max-width:700px){.cp-tel{width:44vw}.cp-yt{display:none}}
.wu-sec{background:#0b0d11;color:#eef1f5;
--ink:#f2f5f8; --ink3:#a8b3c0; --mut:#a8b3c0; --ac:#ff9a7e;
--line:rgba(255,255,255,.13)}
.wu-sec .lbl{color:var(--ac)} .wu-sec .h2{color:#f2f5f8}
.wu{margin:clamp(26px,3.2vw,46px) 0 0;border-radius:20px;overflow:hidden;
border:1px solid rgba(255,255,255,.09);background:#08090c}
.wu-bar,.wu-voet{display:flex;align-items:center;gap:12px;padding:13px 18px;
font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;
letter-spacing:.16em;text-transform:uppercase;color:#8b95a3}
.wu-bar{border-bottom:1px solid rgba(255,255,255,.07)}
.wu-bar b[data-wu-naam]{color:#e6ebf2;font-weight:400}
.wu-pil{margin-left:auto;padding:6px 13px;border-radius:999px;font-weight:400;
color:#a8b3c0;border:1px solid rgba(255,255,255,.14)}
/* ⚠️ vaste verhouding: de SVG ligt eroverheen en schaalt gelijkmatig mee */
.wu-veld{position:relative;aspect-ratio:160/90;min-height:380px}
.wu-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0}
/* ⚠️ GEEN `vector-effect:non-scaling-stroke` hier. Dat maakt stroke-dasharray
een SCHERMmaat, waardoor `pathLength="1"` genegeerd wordt — gemeten:
`dash: 0.05px, 0.95px` op een pad van 685 schermpixels, dus ruim honderd
streepjes per lijn in plaats van één. Zonder dat effect rekent alles in
viewBox-eenheden en klopt zowel de streep als de dikte. */
.wu-l{fill:none;stroke:rgba(255,255,255,.3);stroke-width:.16;
stroke-dasharray:1;stroke-dashoffset:1;
animation:wuTrek .9s cubic-bezier(.4,0,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes wuTrek{to{stroke-dashoffset:0}}
.wu-puls{fill:none;stroke:var(--ac);stroke-width:.34;stroke-linecap:round;
stroke-dasharray:.05 .95;stroke-dashoffset:1;
animation:wuPuls 3s linear infinite;animation-delay:var(--d,0s)}
@keyframes wuPuls{to{stroke-dashoffset:0}}
/* de bron: drie platforms, het middelste actief — zoals bij hen */
/* de bron staat op dezelfde x als het beginpunt van de lijn */
.wu-bronnen{position:absolute;left:var(--xb,8%);top:50%;
transform:translate(-50%,-50%);z-index:2;display:grid;gap:22px;justify-items:center}
.wu-b{position:relative;display:grid;place-items:center;
width:52px;height:52px;border-radius:15px;cursor:pointer;
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
opacity:.34;transform:scale(.8);padding:0;
transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1),
border-color .4s ease,box-shadow .4s ease}
.wu-b em{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);
font-style:normal;font-size:11px;letter-spacing:0;text-transform:none;
color:#a8b3c0;white-space:nowrap;opacity:0;transition:opacity .4s ease}
.wu-b .wu-v{opacity:0;transform:scale(.4)}
.wu-b.aan{opacity:1;transform:scale(1.2);
border-color:rgba(120,170,255,.5);
box-shadow:0 0 0 5px rgba(120,170,255,.08),0 0 32px -6px rgba(120,170,255,.5)}
.wu-b.aan em{opacity:1}
.wu-b.aan .wu-v{opacity:1;transform:scale(1)}
.wu-b:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
@media(hover:hover){.wu-b:not(.aan):hover{opacity:.6}}
/* waar het landt */
/* elke tegel staat op de y waar zijn lijn aankomt — zelfde getallen */
.wu-rij{position:absolute;inset:0;z-index:2;list-style:none;margin:0;padding:0}
.wu-t{position:absolute;left:var(--xd,80%);top:var(--y,50%);
transform:translateY(-50%) translateX(12px);
display:flex;align-items:center;gap:10px;
padding:6px 30px 6px 7px;border-radius:12px;min-width:172px;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
opacity:0;
animation:wuIn .5s cubic-bezier(.16,1,.3,1) forwards;
animation-delay:calc(var(--i) * .075s + .45s)}
@keyframes wuIn{to{opacity:1;transform:translateY(-50%) translateX(0)}}
.wu-ic{display:block;line-height:0;flex:none}
.wu-t span{font-size:12.5px;color:#d3dae3;white-space:nowrap}
.wu-v{position:absolute;right:8px;top:50%;width:15px;height:15px;margin-top:-7.5px;
border-radius:50%;background:#36b06b;opacity:0;transform:scale(.4);
animation:wuVink .4s cubic-bezier(.34,1.5,.5,1) forwards;
animation-delay:calc(var(--i) * .075s + .95s)}
.wu-v::after{content:"";position:absolute;left:4.6px;top:3.2px;width:3.6px;height:6.6px;
border:solid #fff;border-width:0 1.7px 1.7px 0;transform:rotate(42deg)}
@keyframes wuVink{to{opacity:1;transform:scale(1)}}
/* het vinkje op de bronknop hangt niet aan --i */
.wu-b .wu-v{top:-5px;right:-5px;margin:0;animation:none}
.wu-voet{border-top:1px solid rgba(255,255,255,.07);flex-wrap:wrap}
.wu-voet ul{list-style:none;margin:0;padding:6px 12px;display:flex;flex-wrap:wrap;
gap:9px;border-radius:999px;background:rgba(255,255,255,.04)}
.wu-voet li{line-height:0}
/* opnieuw afspelen als je van bron wisselt */
.wu.opnieuw .wu-l,.wu.opnieuw .wu-t,.wu.opnieuw .wu-v{animation:none;
opacity:0;stroke-dashoffset:1}
@media(prefers-reduced-motion:reduce){
.wu-l{animation:none;stroke-dashoffset:0}
.wu-puls{display:none}
.wu-t,.wu-v{animation:none;opacity:1;transform:none}}
@media (max-width:900px){
.wu-veld{aspect-ratio:auto;min-height:0;display:grid;gap:20px;
grid-template-columns:1fr;padding:20px 16px}
.wu-svg{display:none}
.wu-bronnen,.wu-rij{position:static;transform:none}
.wu-bronnen{grid-auto-flow:column;justify-content:start;gap:26px;
padding-bottom:22px}
.wu-b.aan{transform:scale(1.14)}
.wu-rij{grid-template-columns:1fr 1fr}
.wu-t{min-width:0}}
/* ══ 25-09-2026 · verwerkingsronde (VERWERKING-2026-09-25.md) ══════════════════
Alleen transform en opacity in beweging; hover achter (hover:hover) and
(pointer:fine); ease-out cubic-bezier(.23,1,.32,1) (emil-design-eng). */
:root{--eo:cubic-bezier(.23,1,.32,1)}
.kk-grid.kk-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){.kk-grid.kk-2{grid-template-columns:1fr}}
/* de hoofdknop en de belofte eronder */
.hk-micro{margin:12px 0 0;font-size:var(--fs-ui);line-height:1.45;max-width:34em}
.hkaart-in .hk-micro{color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.55)}
.hkn{margin-top:clamp(26px,3vw,40px)}
.hkn-k{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hkn-micro{margin:12px 0 0;font-size:var(--fs-ui);line-height:1.45;color:var(--ink3);max-width:36em}
.hkn-los{padding-block:clamp(8px,1.2vw,16px) clamp(30px,4vw,56px)}
.cta-micro{margin:16px 0 0;font-size:var(--fs-ui);line-height:1.5;color:var(--ink3);max-width:40em}
.cta-micro a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.btn:active{transform:scale(.97)}
/* drie uitkomsten */
.uk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);
margin-top:clamp(26px,3.2vw,42px)}
.uk{position:relative;display:block;background:var(--kk-vlak);border:1px solid var(--line);
border-radius:20px;padding:clamp(22px,2.2vw,32px) clamp(22px,2.2vw,32px) clamp(54px,4vw,62px);
color:var(--ink);text-decoration:none;
transition:opacity .5s var(--eo),transform .5s var(--eo),border-color .3s ease}
.uk-lbl{display:block;margin-top:18px;font-size:12px;letter-spacing:.02em;color:var(--ink3)}
.uk h3{margin:6px 0 0;font-size:clamp(21px,1.8vw,26px);font-weight:400;letter-spacing:-.02em;line-height:1.15}
.uk p{margin:10px 0 0;font-size:var(--fs-ui);line-height:1.55;color:var(--ink3);max-width:none}
.uk-pijl{position:absolute;left:clamp(22px,2.2vw,32px);bottom:clamp(20px,2vw,26px);font-style:normal;
color:var(--ac);transition:transform .3s var(--eo)}
.uk.rv.in{transform:none}
@media(hover:hover) and (pointer:fine){
.uk:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ac) 40%,var(--line))}
.uk:hover .uk-pijl{transform:translateX(6px)}}
.uk:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
@media(max-width:900px){.uk-grid{grid-template-columns:1fr}}
/* voor wie: de schakelaar */
.dg{margin-top:clamp(22px,2.6vw,34px)}
.dg-rail{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;
background:var(--kk-vlak);border:1px solid var(--line)}
.dg-t{border:0;background:transparent;color:var(--ink3);font:inherit;font-size:var(--fs-ui);
padding:10px 18px;border-radius:999px;cursor:pointer;min-height:44px;
transition:background-color .2s ease,color .2s ease}
.dg-t[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.dg-t:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.dg-p{margin-top:clamp(22px,2.4vw,30px)}
.dg-p h3{margin:0;font-size:clamp(22px,2vw,30px);font-weight:350;letter-spacing:-.02em;line-height:1.15}
.dg-p>p{margin:12px 0 0;font-size:var(--fs-lead);line-height:1.5;color:var(--ink3);max-width:36em}
.dg-doelen{list-style:none;margin:20px 0 0;padding:0;display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dg-doelen a{display:flex;justify-content:space-between;align-items:center;gap:12px;
padding:14px 18px;min-height:48px;border-radius:14px;border:1px solid var(--line);
background:var(--paper);color:var(--ink);text-decoration:none;
transition:border-color .2s ease}
.dg-doelen i{font-style:normal;color:var(--ac);transition:transform .25s var(--eo)}
@media(hover:hover) and (pointer:fine){.dg-doelen a:hover{border-color:var(--ac)}
.dg-doelen a:hover i{transform:translateX(4px)}}
.dg-meer{display:inline-block;margin-top:18px;color:var(--ink);font-size:var(--fs-ui);
text-decoration:underline;text-underline-offset:3px}
.dg-branches{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;
margin-top:clamp(26px,3vw,40px);padding-top:18px;border-top:1px solid var(--line);font-size:var(--fs-ui)}
.dg-branches span{color:var(--ink3)}
.dg-branches a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media(max-width:620px){.dg-doelen{grid-template-columns:1fr}}
/* de Aanvraagketen */
.keten-voet{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 30px;
align-items:baseline;margin-top:clamp(26px,3vw,40px);padding-top:20px;border-top:1px solid var(--line)}
.keten-voet p{margin:0;max-width:40em;color:var(--ink3)}
.keten-voet b{color:var(--ink);font-weight:500}
.keten-link{color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
/* de hoofdknop vast onderaan op een telefoon (punt 19) */
.mscan{display:none}
@media(max-width:860px){
.mscan{display:flex;justify-content:center;align-items:center;gap:8px;position:fixed;
left:12px;right:80px;bottom:16px;z-index:70;min-height:54px;padding:0 18px;
border-radius:999px;background:var(--ink);color:var(--paper);text-decoration:none;
font-size:15px;box-shadow:0 12px 30px -12px rgba(0,0,0,.45);
transition:transform .25s var(--eo)}
.mscan i{font-style:normal}
body{padding-bottom:84px}
body.chat-open .mscan{transform:translateY(120px)}}
/* rekenhulp (punt 13) */
.rk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;
margin-top:clamp(22px,2.6vw,34px);padding:clamp(20px,2.4vw,32px);border-radius:20px;
background:var(--paper);border:1px solid var(--line)}
.rk-v label{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-ui);color:var(--ink)}
.rk-v output{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500}
.rk-v input[type=range]{width:100%;margin-top:10px;accent-color:var(--ac);min-height:32px}
.rk-v input[type=number]{width:100%;margin-top:8px;padding:12px 14px;border-radius:12px;
border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:16px}
.rk-tag{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ac);
border:1px solid color-mix(in srgb,var(--ac) 40%,transparent);border-radius:999px;padding:2px 8px}
.rk-uit{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 28px}
.rk-uit p{margin:0;font-size:var(--fs-ui);color:var(--ink3)}
.rk-uit b{display:block;font-size:clamp(26px,2.6vw,36px);font-weight:350;color:var(--ink);
letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rk-uit .rk-weg{grid-column:1/-1;margin-top:6px}
.rk-uit .rk-weg b{display:inline;font-size:inherit;font-weight:600}
@media(max-width:700px){.rk,.rk-uit{grid-template-columns:1fr}}
/* voorbeeld-maandoverzicht, voorbeeldscan en voorbeeldformulier */
.mr,.vs,.vbf{margin:clamp(22px,2.6vw,34px) 0 0;padding:clamp(20px,2.4vw,30px);border-radius:20px;
background:var(--paper);border:1px solid var(--line);max-width:760px}
.mr-kop,.vbf-kop{display:flex;justify-content:space-between;align-items:center;gap:12px;
padding-bottom:14px;border-bottom:1px solid var(--line)}
.mr-tag{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
background:var(--paper3);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.mr-t{width:100%;border-collapse:collapse;margin-top:8px;font-size:var(--fs-ui)}
.mr-t th,.mr-t td{text-align:left;padding:12px 0;border-bottom:1px solid var(--line);font-weight:400}
.mr-t thead th{color:var(--ink3);font-size:12px}
.mr-t td{font-variant-numeric:tabular-nums;color:var(--ink)}
.mr-t tbody th{color:var(--ink)}
.mr-volgende{margin-top:16px}
.mr-volgende b{font-weight:500;color:var(--ink)}
.mr-volgende p,.mr-volgende ol{margin:6px 0 0;color:var(--ink3);font-size:var(--fs-ui);line-height:1.55}
.mr-volgende ol{padding-left:20px}
.mr figcaption,.vs figcaption{margin-top:14px;font-size:12px;color:var(--ink3)}
.vs-lijst{list-style:none;margin:6px 0 0;padding:0}
.vs-lijst li{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:12px 0;
border-bottom:1px solid var(--line);font-size:var(--fs-ui)}
.vs-lijst b{font-weight:500;color:var(--ink)}
.vs-lijst em{grid-column:1/-1;font-style:normal;color:var(--ink3)}
.vs-s{font-size:12px;border-radius:999px;padding:2px 10px;border:1px solid var(--line);color:var(--ink)}
.vs-goed{background:color-mix(in srgb,#1f7a4a 12%,var(--paper))}
.vs-mid{background:color-mix(in srgb,#ff7a59 14%,var(--paper))}
.vs-laag{background:color-mix(in srgb,var(--ac) 12%,var(--paper))}
.vbf{display:grid;gap:12px;max-width:520px}
.vbf label{display:grid;gap:6px;font-size:var(--fs-ui);color:var(--ink)}
.vbf input,.vbf select{padding:12px 14px;border-radius:12px;border:1px solid var(--line);
background:var(--paper2);color:var(--ink);font:inherit;font-size:16px}
.vbf-foto span{padding:12px 14px;border-radius:12px;border:1px dashed var(--line);color:var(--ink3)}
.vbf .btn[disabled]{opacity:.7;cursor:not-allowed}
.vbf-noot{margin:0;font-size:12px;color:var(--ink3)}
/* startklaar-check (punt 24) */
.stc{margin-top:clamp(22px,2.6vw,34px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stc-v{margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper);
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.stc-v legend{float:left;width:100%;font-size:var(--fs-ui);color:var(--ink);margin-bottom:8px}
.stc-v label{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;
border-radius:999px;border:1px solid var(--line);cursor:pointer;font-size:var(--fs-ui);color:var(--ink)}
.stc-v input{accent-color:var(--ac)}
.stc-uit{grid-column:1/-1;margin-top:10px;padding:clamp(20px,2.4vw,30px);border-radius:20px;
background:var(--paper);border:1px solid var(--line)}
.stc-score{margin:0;color:var(--ink3)}
.stc-score b{font-size:clamp(30px,3vw,42px);font-weight:350;color:var(--ink);font-variant-numeric:tabular-nums}
.stc-uit h3{margin:14px 0 0;font-size:clamp(19px,1.6vw,23px);font-weight:400}
.stc-uit ol{margin:10px 0 20px;padding-left:20px;color:var(--ink3);line-height:1.55}
@media(max-width:760px){.stc{grid-template-columns:1fr}}
/* aanvragen verdelen (punt 16) */
.vd{display:grid;grid-template-columns:1fr auto 1.2fr auto 1fr;align-items:center;gap:14px;
margin-top:clamp(24px,2.8vw,36px)}
.vd>div:not(.vd-pijl){padding:18px;border-radius:18px;border:1px solid var(--line);background:var(--paper)}
.vd b{display:block;font-weight:500;color:var(--ink)}
.vd span,.vd em{display:block;font-size:var(--fs-ui);color:var(--ink3);font-style:normal;margin-top:4px}
.vd-mid{border-color:color-mix(in srgb,var(--ac) 45%,var(--line))!important}
.vd-mid em{color:var(--ac)}
.vd-uit{display:grid;gap:8px}
.vd-uit span{margin:0;padding:8px 12px;border-radius:10px;background:var(--paper2);color:var(--ink)}
.vd-pijl{width:28px;height:2px;background:var(--ac-vlak);position:relative}
.vd-pijl::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;
border-left-color:var(--ac);border-right:0}
@media(max-width:800px){.vd{grid-template-columns:1fr}.vd-pijl{width:2px;height:22px;justify-self:center}
.vd-pijl::after{right:-4px;top:auto;bottom:-1px;border:5px solid transparent;border-top-color:var(--ac);border-bottom:0}}
/* kennis */
.kn-lijst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.kn-k{position:relative;display:block;padding:clamp(22px,2.2vw,30px) clamp(22px,2.2vw,30px) 56px;
border-radius:20px;border:1px solid var(--line);background:var(--kk-vlak);color:var(--ink);
text-decoration:none;transition:opacity .5s var(--eo),transform .5s var(--eo),border-color .3s ease}
.kn-k h2{margin:0;font-size:clamp(19px,1.6vw,23px);font-weight:400;letter-spacing:-.02em;line-height:1.2}
.kn-k p{margin:10px 0 0;font-size:var(--fs-ui);color:var(--ink3);line-height:1.55}
.kn-k i{position:absolute;left:clamp(22px,2.2vw,30px);bottom:22px;font-style:normal;color:var(--ac);
transition:transform .3s var(--eo)}
.kn-k.rv.in{transform:none}
@media(hover:hover) and (pointer:fine){.kn-k:hover{transform:translateY(-4px);border-color:var(--ac)}
.kn-k:hover i{transform:translateX(6px)}}
.kn-tekst p{font-size:var(--fs-lead);line-height:1.6;color:var(--ink);max-width:36em;margin:0 0 1.1em}
.lbl a{color:inherit}
@media(max-width:900px){.kn-lijst{grid-template-columns:1fr}}
/* wat er na de scan gebeurt (punt 10) */
.sc-daarna{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.sc-daarna li{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px 0;
border-bottom:1px solid var(--line)}
.sc-daarna b{font-weight:500}
@media(max-width:560px){.sc-daarna li{grid-template-columns:1fr;gap:2px}}
@media(prefers-reduced-motion:reduce){.uk,.kn-k,.mscan,.uk-pijl,.dg-doelen i{transition:none}}
.keten-links{display:flex;flex-wrap:wrap;gap:8px 24px}
.lead a,.small a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* mobiel: de schakelaar als lijst, en de vaste scanknop pas als de hero-knop weg is */
@media(max-width:620px){.dg-rail{display:grid;grid-template-columns:1fr;border-radius:18px;width:100%}
.dg-t{text-align:left}}
@media(max-width:860px){.mscan{transform:translateY(120px)}
body.mscan-aan .mscan{transform:none}}
/* ⚠️ de sitebrede regel p,li{max-width:68ch} raakt ook deze lijsten (bekende val) */
.vs-lijst li,.dg-doelen li,.sc-daarna li,.stc-uit li,.mr-volgende li{max-width:none}
/* 25-09 (ronde 2), Lenny: "ik wil het midden, niet zo links in de hoek." */
.uk-sec .hkn{text-align:center}
.uk-sec .hkn-k{justify-content:center}
.uk-sec .hkn-micro{margin-inline:auto}
/* ══ 25-09 (ronde 2) · keuzes van Lenny uit _lab-knopkaart: K4 · U5 · W3 · D3 · B3 ══ */
/* K4 — de hoofdknop: antraciet met een koraal offset-schaduw.
Uit onze bibliotheek: design-toolkit/ui-components/yellow-shadow-button.css
(Uiverse, felipesntr), in de huisstijl. Vervangt de glans (18-09) op elke .btn-p. */
.btn-p{background:#16181c;color:#fff;border:2px solid #ff7a59;border-radius:14px;overflow:visible;
box-shadow:-5px 5px 0 0 #ff7a59;
transition:transform .35s cubic-bezier(.68,-.55,.265,1.55),box-shadow .35s ease}
.btn-p::after{content:none;animation:none}
/* 29-09: color erbij — r.226 zet bij hover color:var(--ac-op)=#16181c, en met deze achtergrond
werd de tekst zwart op zwart op ELKE .btn-p (gevonden via een screenshot van Lenny). */
.btn-p:hover{background:#16181c;color:#fff}
@media(hover:hover) and (pointer:fine){
.btn-p:hover{transform:translate(4px,-4px);box-shadow:-9px 9px 0 0 #ff7a59}}
.btn-p:active{transform:translate(0,0) scale(.97);box-shadow:-3px 3px 0 0 #ff7a59}
.mscan{border:2px solid #ff7a59;border-radius:14px;box-shadow:-4px 4px 0 0 #ff7a59;background:#16181c;color:#fff}
@media(prefers-reduced-motion:reduce){.btn-p{transition:none}}
/* U5 — uitkomsten zonder doos: groot woord, lijn erboven */
.ukt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);
margin-top:clamp(28px,3.4vw,48px)}
.ukt{display:block;padding-top:22px;border-top:2px solid var(--ink);color:var(--ink);text-decoration:none}
.ukt-lbl{display:block;font-size:12px;color:var(--ink3);letter-spacing:.02em}
.ukt h3{margin:8px 0 0;font-size:clamp(28px,2.8vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.ukt p{margin:12px 0 0;color:var(--ink3);font-size:var(--fs-ui);line-height:1.55;max-width:none}
.ukt-l{display:inline-flex;gap:8px;align-items:center;margin-top:16px;color:var(--ac);font-size:var(--fs-ui)}
.ukt-l svg{transition:transform .3s var(--eo)}
@media(hover:hover) and (pointer:fine){.ukt:hover .ukt-l svg{transform:translateX(6px)}}
.ukt:focus-visible{outline:2px solid var(--ac);outline-offset:4px}
@media(max-width:900px){.ukt-grid{grid-template-columns:1fr}}
/* W3 — links kiezen, rechts het antwoord */
.dgw{display:grid;grid-template-columns:minmax(230px,.8fr) 1.7fr;gap:18px;margin-top:clamp(22px,2.6vw,34px)}
.dgw-rail{display:grid;gap:10px;align-content:start}
.dgw .dg-t{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;border:1px solid var(--line);
background:transparent;font-size:17px;color:var(--ink3);text-align:left;min-height:68px;
transition:background-color .2s ease,color .2s ease}
.dgw .dg-t b{flex:1;font-weight:450}
.dgw .dg-t i{opacity:0;transform:translateX(-6px);color:var(--ac);font-style:normal;
transition:opacity .2s ease,transform .25s var(--eo)}
.dgw .dg-t[aria-selected="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper);
box-shadow:0 14px 30px -24px rgba(0,0,0,.45)}
.dgw .dg-t[aria-selected="true"] i{opacity:1;transform:none}
.dg-ic{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;flex:none;color:var(--ac);
background:color-mix(in srgb,var(--ac) 9%,var(--paper))}
.dgw-vlak{border-radius:24px;background:var(--paper);border:1px solid var(--line);padding:clamp(22px,2.8vw,38px)}
.dgw .dg-p{margin:0}
.dgw .dg-p h3{font-size:clamp(22px,2.2vw,30px);font-weight:450;line-height:1.15}
@media(hover:hover) and (pointer:fine){.dgw .dg-t:hover{color:var(--ink)}}
@media(max-width:900px){.dgw{grid-template-columns:1fr}}
/* D3 — de doelen als tegels met een ronde pijl */
.dgd{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dgd li{max-width:none}
.dgd a{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;min-height:108px;padding:18px;
border-radius:18px;background:var(--paper2);color:var(--ink);text-decoration:none;font-size:18px;
letter-spacing:-.015em;transition:transform .3s var(--eo)}
.dgd b{font-weight:450;max-width:14ch}
.dgd span{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:#16181c;color:#fff;
transition:transform .3s var(--eo),background-color .2s ease}
@media(hover:hover) and (pointer:fine){.dgd a:hover{transform:translateY(-3px)}
.dgd a:hover span{transform:rotate(-45deg);background:var(--ac-vlak)}}
.dgd a:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
@media(max-width:560px){.dgd{grid-template-columns:1fr}.dgd a{min-height:72px;align-items:center}}
/* B3 — kaarten op de voor-wie-pagina's als rustige lijst */
.lijstk{list-style:none;margin:clamp(22px,2.6vw,34px) 0 0;padding:0;display:grid;
grid-template-columns:1fr 1fr;column-gap:clamp(28px,3.4vw,52px)}
.lijstk li{display:flex;gap:18px;padding:22px 0;border-top:1px solid var(--line);max-width:none}
.lijstk-ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;color:var(--ac);
background:color-mix(in srgb,var(--ac) 8%,var(--paper))}
.lijstk h3{margin:4px 0 0;font-size:20px;font-weight:450;letter-spacing:-.015em}
.lijstk p{margin:6px 0 0;color:var(--ink3);font-size:var(--fs-ui);line-height:1.55;max-width:none}
@media(max-width:800px){.lijstk{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ukt-l svg,.dgd a,.dgd span,.dgw .dg-t i{transition:none}}
/* ══ 25-09 (ronde 3) · voor-wie-pagina's in drie pijlers ═══════════════════════ */
.lijstk-1{grid-template-columns:1fr;margin-top:0}
.lijstk-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.lijstk-3{grid-template-columns:1fr}}
.lijstk h3 a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
transition:background-size .3s var(--eo)}
@media(hover:hover) and (pointer:fine){.lijstk h3 a:hover{background-size:100% 1px}}
.pb-tag{display:inline-block;font-size:12px;color:var(--ac);letter-spacing:.02em;margin-bottom:2px}
.pbs{display:grid;gap:clamp(12px,1.4vw,18px);margin-top:clamp(24px,3vw,40px)}
.pb{display:grid;grid-template-columns:minmax(220px,.75fr) 1.6fr;gap:clamp(20px,3vw,48px);
padding:clamp(22px,2.6vw,34px);border-radius:24px;background:var(--paper);border:1px solid var(--line)}
.pb-n{font-family:var(--mono);font-size:13px;color:var(--ac)}
.pb-kop h3{margin:8px 0 0;font-size:clamp(22px,2vw,28px);font-weight:450;letter-spacing:-.02em;line-height:1.15}
.pb-kop p{margin:10px 0 0;color:var(--ink3);font-size:var(--fs-ui);line-height:1.55;max-width:none}
.pb-meer{display:inline-block;margin-top:16px;color:var(--ink);font-size:var(--fs-ui);
text-decoration:underline;text-underline-offset:3px}
.pb .lijstk li:first-child{border-top:0;padding-top:4px}
@media(max-width:900px){.pb{grid-template-columns:1fr}}
/* ══ 25-09 (ronde 4) · /content/ en /marketing/ ═════════════════════════════════ */
/* één gesprek → acht stukken */
.een{display:grid;grid-template-columns:minmax(200px,.6fr) 2fr;gap:18px;margin-top:clamp(24px,3vw,38px);align-items:stretch}
.een-bron{display:flex;flex-direction:column;justify-content:center;padding:28px;border-radius:24px;background:#16181c;color:#fff}
.een-n{font-size:clamp(64px,7vw,104px);line-height:.9;font-weight:500;letter-spacing:-.04em;color:#ff7a59}
.een-bron b{font-size:clamp(22px,2vw,28px);font-weight:450;margin-top:6px}
.een-bron p{margin:8px 0 0;color:#aeb4bc;font-size:var(--fs-ui);max-width:none}
.een-uit{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.een-uit li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;padding:14px 16px;
border-radius:16px;background:var(--paper);border:1px solid var(--line);max-width:none}
.een-uit .kk-ic{grid-row:span 2;width:40px;height:40px;border-radius:12px}
.een-uit b{font-weight:450}
.een-uit em{font-style:normal;color:var(--ink3);font-size:14px}
.een-kop{margin:clamp(34px,4vw,54px) 0 0;font-size:clamp(19px,1.6vw,23px);font-weight:450}
@media(max-width:900px){.een{grid-template-columns:1fr}}
@media(max-width:560px){.een-uit{grid-template-columns:1fr}}
/* wat we meten */
.mt{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(20px,3vw,48px);margin-top:clamp(22px,2.6vw,34px)}
.mt h3{margin:0 0 12px;font-size:20px;font-weight:450}
.mt ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mt li{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--paper);max-width:none}
.mt-wel li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--ac-vlak)}
.mt-niet li{background:transparent;border:1px dashed var(--line);color:var(--ink3)}
.mt-niet li::before{content:"–";color:var(--ink3)}
.mt .small{margin-top:14px}
@media(max-width:800px){.mt{grid-template-columns:1fr}}
/* contentscan */
.cs{display:grid;gap:14px;margin-top:clamp(22px,2.6vw,34px);padding:clamp(22px,2.6vw,34px);border-radius:24px;
background:var(--paper);border:1px solid var(--line);max-width:860px}
.cs-velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cs label{display:grid;gap:6px;font-size:var(--fs-ui);color:var(--ink)}
.cs input[type=text],.cs input[type=email]{padding:12px 14px;border-radius:12px;border:1px solid var(--line);
background:var(--paper2);color:var(--ink);font:inherit;font-size:16px;min-height:46px}
.cs-kan{margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:8px}
.cs-kan legend{font-size:var(--fs-ui);margin-bottom:8px;color:var(--ink)}
.cs-kan label{display:inline-flex;grid-auto-flow:column;align-items:center;gap:8px;min-height:40px;padding:0 14px;
border-radius:999px;border:1px solid var(--line);cursor:pointer}
.cs-kan input{accent-color:var(--ac)}
.cs .btn{justify-self:start;margin-top:6px}
.cs-klein{margin:0;font-size:12px;color:var(--ink3)}
.cs-klein a{color:inherit}
.cs-uit{margin:0;font-size:var(--fs-ui);color:var(--ink)}
@media(max-width:640px){.cs-velden{grid-template-columns:1fr}}
/* ⚠️ een op een donker paneel pakt de sitebrede --ink (1,06:1 gemeten) — expliciet zetten */
.een-bron b,.een-bron strong,.een-bron a{color:#fff}
/* ── achtergrond A2 · wit en koel (26-09-2026) ──────────────────────────────
Keuze Lenny uit de proef `_lab-grondletter` (A2, letter zoals hij is).
Staat onderaan zodat hij de apple-grond van 20/21-09 overschrijft;
dezelfde tokens als in de proef. */
html[data-grond="apple"]{
--paper:#ffffff; --paper2:#f5f6f8; --paper3:#eceef1; --band:#f5f6f8;
--kk-vlak:#f5f6f8; --line:rgba(15,20,30,.09); --ink3:#555a62; --mut:#555a62;
}
html[data-grond="apple"] body{background:var(--paper)}
/* ── zoekproef /seo/ (26-09-2026) ────────────────────────────────────────────
⚠️ De HTML (`_zoekproef()`, 22-09) stond live zónder één regel opmaak: het
vergrootglas-icoon vulde de hele breedte (Lenny: "een hele grote Google search
logo, wat is dat?"). Hieronder de opmaak die er toen al had moeten staan. */
.zp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:start}
.zp-vak{margin:0;display:grid;gap:10px}
.zp-lbl{font-size:var(--fs-micro,12px);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.zp-g,.zp-c{background:#fff;border-radius:18px;padding:clamp(18px,2vw,26px);
box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.07);min-height:300px}
.zp svg{width:18px;height:18px;flex:none;color:#5f6368}
.zp-balk{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:999px;
border:1px solid #dfe1e5;font-size:15px;color:#202124;margin-bottom:20px}
.zp-res{display:grid;gap:4px}
.zp-site{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.zp-site i{width:28px;height:28px;border-radius:50%;background:#e8f0fe;color:#1a0dab;display:grid;
place-items:center;font-style:normal;font-weight:600;font-size:13px;flex:none}
.zp-site span{display:grid;line-height:1.25}
.zp-site b{font-size:14px;font-weight:500;color:#202124}
.zp-site em{font-style:normal;font-size:12px;color:#4d5156}
.zp-titel{margin:0;font-size:19px;line-height:1.3;color:#1a0dab;max-width:none}
.zp-oms{margin:0;font-size:14px;line-height:1.5;color:#4d5156;max-width:none}
.zp-ster{display:flex;align-items:center;gap:6px;font-size:13px;color:#4d5156;margin-top:2px}
.zp-ster i{font-style:normal;color:#e37400;letter-spacing:1px}
.zp-grijs{display:grid;gap:10px;margin-top:22px}
.zp-grijs i{display:block;height:10px;border-radius:6px;background:#eef0f2}
.zp-grijs i:nth-child(2){width:82%}.zp-grijs i:nth-child(3){width:64%}
.zp-c-bar{display:flex;align-items:center;gap:10px;font-size:14px;color:#202124;margin-bottom:18px}
.zp-c-av{width:28px;height:28px;border-radius:50%;background:#1d1d1f;color:#fff;display:grid;
place-items:center;font-size:13px;font-weight:600}
.zp-c-vraag{display:flex;justify-content:flex-end;margin-bottom:16px}
.zp-c-vraag span{background:#f2f2f4;border-radius:18px;padding:10px 16px;font-size:15px;color:#202124}
.zp-c-ant{display:grid;gap:10px;font-size:15px;line-height:1.55;color:#202124}
.zp-c-ant p{margin:0;max-width:none}
.zp-c-lijst{margin:0;padding-left:20px;display:grid;gap:4px}
.zp-c-lijst li{max-width:none}
.zp-c-bron{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--ink3)}
.zp-c-bron i{font-style:normal;padding:4px 10px;border-radius:999px;background:#f2f2f4;color:#3c4043}
.zp-noot{margin:clamp(20px,2.4vw,32px) 0 0;max-width:68ch;color:var(--ink3)}
@media(max-width:820px){.zp{grid-template-columns:1fr}}
.zp-c-lijst{list-style:disc}
/* ── rijen "Beveiliging" + "Overstappen" op /hosting/ (26-09-2026) ───────────
⚠️ `_beveiliging()` (22-09) stond zonder opmaak: de browser zette er zijn
eigen nummers vóór onze nummers ("1. 01"). Zelfde gat als de zoekproef. */
.bv{list-style:none;margin:clamp(22px,2.6vw,34px) 0 0;padding:0;display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,3vw,44px)}
.bv-r{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:18px 0;
border-top:1px solid var(--line);max-width:none}
.bv-n{font-size:12px;color:var(--ac);padding-top:4px}
.bv-r h3{margin:0 0 6px;font-size:17px;font-weight:600;line-height:1.3}
.bv-r p{margin:0;font-size:15px;line-height:1.55;color:var(--ink3);max-width:none}
@media(max-width:760px){.bv{grid-template-columns:1fr}}
/* ── automatisering: agents · regel of agent · Lead Engine (26-09-2026) ──── */
.ag-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(22px,2.6vw,34px)}
.ag{background:var(--kk-vlak,var(--paper2));border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px;
transition:transform .25s ease}
html[data-grond="apple"] .ag{background:#fff;border-color:transparent;
box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06)}
@media(hover:hover) and (pointer:fine){.ag:hover{transform:translateY(-3px)}}
.ag .kk-ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;
background:var(--paper3);color:var(--ac)}
.ag .kk-ic svg{width:21px;height:21px}
.ag h3{margin:16px 0 4px;font-size:18px;font-weight:600;letter-spacing:-.01em}
.ag-r{margin:0 0 12px;color:var(--ac);font-size:var(--fs-ui);max-width:none}
.ag ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ag li{position:relative;padding-left:16px;font-size:14.5px;line-height:1.5;color:var(--ink3);max-width:none}
.ag li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--ac-vlak)}
@media(max-width:1000px){.ag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.ag-grid{grid-template-columns:1fr}}
@media(min-width:1001px){.hz.hz-6{grid-template-columns:repeat(6,minmax(0,1fr))}}
.ra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(22px,2.6vw,34px)}
.ra-k{border-radius:18px;padding:22px 24px;border:1px solid var(--line);background:var(--paper)}
.ra-agent{background:var(--ink);border-color:var(--ink)}
.ra-agent h3,.ra-agent li{color:#fff}
.ra-k h3{margin:0 0 14px;font-size:17px;font-weight:600}
.ra-k ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ra-k li{position:relative;padding-left:22px;font-size:15px;line-height:1.5;color:var(--ink3);max-width:none}
.ra-k li::before{content:"–";position:absolute;left:0;color:var(--ac)}
.ra-agent li::before{content:"✓";color:#ff9a7a}
@media(max-width:760px){.ra{grid-template-columns:1fr}}
.le-sec{padding-top:clamp(28px,3vw,44px);padding-bottom:clamp(28px,3vw,44px)}
.le{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;
padding:22px 26px;border-radius:18px;border:1px solid var(--line);background:var(--paper2)}
.le-l{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ac)}
.le-t{margin:6px 0 0;font-size:17px;line-height:1.5;max-width:62ch}
.le-t .mut{display:block;font-size:15px;color:var(--ink3)}
.le-a{font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.ra-k.ra-agent li{color:rgba(255,255,255,.86)}.ra-k.ra-agent h3{color:#fff}
/* ── /halo-ai/: blokken uit het HALO-onderzoek (26-09-2026) ──────────────── */
.hx-mag{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.hx-mag>div{padding:18px 22px;border-radius:18px;background:var(--paper2);border:1px solid var(--line)}
.hx-l{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ac)}
.hx-mag ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hx-mag li{padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14px;max-width:none}
@media(min-width:1001px){.hz.hx-start{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hx-scan{margin:clamp(24px,3vw,36px) 0 0}
@media(max-width:760px){.hx-mag{grid-template-columns:1fr}}
/* ── /ace-ai/: hero-knoppen + demo (26-09-2026, punt 7/16/17) ─────────────── */
.hh-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.hh-cta2{font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.ad{margin-top:clamp(24px,3vw,40px);background:#fff;border:1px solid var(--line);border-radius:22px;
padding:clamp(16px,2vw,26px);box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.06)}
.ad-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.ad-tab{font:inherit;font-size:15px;padding:10px 18px;min-height:44px;border-radius:999px;cursor:pointer;
border:1px solid var(--line);background:var(--paper2);color:var(--ink);transition:background .2s,color .2s}
.ad-tab[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.ad-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.ad-kpi div{padding:14px 16px;border-radius:14px;background:var(--paper2)}
.ad-kpi b{display:block;font-size:26px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ad-kpi span{font-size:13px;color:var(--ink3)}
.ad-g{display:grid;grid-template-columns:1fr 1.2fr;gap:14px}
.ad-vak{border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.ad-l{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ac)}
.ad-stap{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.ad-stap li{position:relative;padding-left:28px;opacity:0;transform:translateY(6px);
transition:opacity .35s ease,transform .35s ease;transition-delay:calc(var(--i)*140ms)}
.ad-stap li::before{content:"✓";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;
background:var(--ac-vlak);color:var(--ac-op);font-size:11px;display:grid;place-items:center}
.ad-stap b{display:block;font-size:15px;font-weight:600}
.ad-stap span{font-size:13.5px;color:var(--ink3)}
.ad.speel .ad-stap li{opacity:1;transform:none}
.ad-log{width:100%;border-collapse:collapse;margin-top:10px;font-size:13.5px}
.ad-log th{text-align:left;font-weight:500;color:var(--ink3);font-size:12px;padding:6px 8px;border-bottom:1px solid var(--line)}
.ad-log td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.ad-log td.mono{white-space:nowrap;color:var(--ink3)}
.ad-log tr:last-child td{border-bottom:0}
.ad-log tr:last-child td:last-child{color:var(--ac);font-weight:500}
.ad-cta{margin:18px 0 0}
.ad-sjab{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--ink3)}
.ad-sjab a{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.ad-stap li{opacity:1;transform:none;transition:none}}
@media(max-width:820px){.ad-g{grid-template-columns:1fr}.ad-kpi{grid-template-columns:1fr 1fr 1fr}.ad-kpi b{font-size:20px}}
@media(max-width:480px){.ad-kpi{grid-template-columns:1fr}}
.ad-sjab{max-width:none}
.hh-kop.hh-kop-lang{font-size:clamp(34px,3.3vw,50px);line-height:1.05;hyphens:none}
/* ── audit 26-09 (punt 8, 12, 13): routes · case-regels · concrete stroom ── */
.uk-route{display:flex;flex-direction:column;gap:0}
.uk-route .ukt-lbl{color:var(--ink3);text-decoration:none}
.uk-dn{list-style:none;margin:16px 0 18px;padding:0;display:grid;gap:2px}
.uk-dn a{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);
color:var(--ink);text-decoration:none;font-size:15.5px}
.uk-dn a span{color:var(--ac);transition:transform .2s ease}
@media(hover:hover) and (pointer:fine){.uk-dn a:hover span{transform:translateX(3px)}}
.uk-knop{margin-top:auto;font-weight:500;color:var(--ac);text-decoration:underline;text-underline-offset:4px}
.cl-pam{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;margin-top:14px;
padding:16px 18px;border-radius:14px;background:var(--paper2);text-align:left}
.cl-pam-r{display:grid;gap:3px}
.cl-pam-r b{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ac);font-weight:500}
.cl-pam-r span{font-size:14.5px;line-height:1.5;color:var(--ink)}
.cl-mob .cl-pam{grid-template-columns:1fr}
@media(max-width:620px){.cl-pam{grid-template-columns:1fr}}
.hs-flow{list-style:none;margin:clamp(20px,2.4vw,30px) 0 0;padding:0;display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;counter-reset:hf}
.hs-flow li{position:relative;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.16);
counter-increment:hf;display:grid;gap:4px}
.hs-flow li::before{content:counter(hf,decimal-leading-zero);font:12px/1 var(--mono);color:#ff9a7a}
.hs-flow b{color:#fff;font-size:15.5px;font-weight:600}
.hs-flow span{color:rgba(255,255,255,.78);font-size:13.5px;line-height:1.45}
@media(max-width:900px){.hs-flow{grid-template-columns:1fr}}
.cl-pv .cl-pam,.cl-mob .cl-pam{text-align:left}
.cl-pv .cl-pam-r b,.cl-mob .cl-pam-r b{display:block;font-size:12px;line-height:1.3;letter-spacing:.05em;
text-transform:uppercase;color:var(--ac);font-weight:500;margin:0}
.cl-pv .cl-pam-r span,.cl-mob .cl-pam-r span{display:block;font-size:14.5px;line-height:1.5;color:var(--ink);text-align:left}
/* 27-09-2026: het spamveld van de contentscan (.aan-hp) had GEEN opmaak en stond dus
zichtbaar als leeg veld zonder label. Wie het invulde, werd door de worker stil als
spam weggegooid (success:true, geen mail) = een verloren aanvraag. */
.aan-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}
/* 27-09-2026: zes stappen braken af als 5+1. Op brede schermen zes op één rij. */
@media(min-width:1100px){.hz.hz-6{grid-template-columns:repeat(6,minmax(0,1fr))}}
.cs-krijg{list-style:disc;margin:0 0 clamp(22px,2.4vw,30px);padding:0 0 0 1.1em;color:var(--ink2);line-height:1.7}
.cs-krijg li::marker{color:var(--ac)}
/* 27-09-2026: dashboard na de scan. Statisch wazig (filter, geen animatie). */
.sd{margin:clamp(22px,2.6vw,34px) 0;border:1px solid var(--line);border-radius:18px;background:var(--paper);color:var(--ink);overflow:hidden}
.sd-kop{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding:20px 22px;border-bottom:1px solid var(--line)}
.sd-lbl{display:block;font-size:12px;color:var(--ink3)}
.sd-kop>div>b{font-size:18px;font-weight:500}
.sd-tel{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:var(--fs-ui);color:var(--ink3);align-items:center}
.sd-tel b{color:var(--ink);font-weight:600}
.sd-tel .sd-z,.sd-tel .sd-m{padding:6px 12px;border-radius:99px;font-size:13px}
.sd-tel .sd-z{background:#f7e3df;color:#8a2a18}.sd-tel .sd-m{background:#f6ecd6;color:#6f4e0c}
.sd-tel .sd-z b,.sd-tel .sd-m b{color:inherit}
.sd-rij{list-style:none;margin:0;padding:0 22px}
.sd-r{display:grid;grid-template-columns:130px 1fr auto;gap:4px 16px;padding:13px 0;border-bottom:1px solid var(--line);align-items:center;max-width:none}
.sd-g{font-size:12px;color:var(--ink3)}
.sd-r b{font-weight:500;font-size:15px}
.sd-s{font-size:12px;padding:3px 9px;border-radius:99px;white-space:nowrap}
.sd-zwak .sd-s{background:#f7e3df;color:#8a2a18}
.sd-mid .sd-s{background:#f6ecd6;color:#6f4e0c}
.sd-open .sd-s{background:#eceef1;color:#44474d}
.sd-r em{grid-column:2/-1;font-style:normal;font-size:14px;color:var(--ink3);filter:blur(5px);user-select:none;-webkit-user-select:none}
.sd-slot{padding:22px;background:color-mix(in srgb,var(--ac) 7%,var(--paper))}
.sd-slot p{margin:0 0 14px;max-width:none;color:var(--ink2)}
.sd-slot b{color:var(--ink)}
.sd-s{justify-self:end;width:max-content}
@media(max-width:620px){.sd-rij{padding:0 16px}.sd-kop{padding:18px 16px}
.sd-r{grid-template-columns:minmax(0,1fr) max-content}
.sd-g{grid-column:1/-1;grid-row:1}.sd-r b{grid-column:1;grid-row:2}.sd-s{grid-column:2;grid-row:2}
.sd-r em{grid-column:1/-1}}
/* 27-09-2026: Blueprint-voorbeeld als rapport (score, onderdelen, impact, plan). */
.bp{margin:clamp(24px,2.8vw,36px) 0 0;border:1px solid var(--line);border-radius:20px;background:var(--paper);overflow:hidden}
.bp-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 24px;border-bottom:1px solid var(--line)}
.bp-lbl{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#bd3a42;font-weight:500}
.bp-kop b{display:block;font-size:19px;font-weight:500;color:var(--ink);margin-top:2px}
.bp-sub{display:block;font-size:13px;color:var(--ink3);margin-top:4px}
.bp-score{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;padding:20px 24px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--ink) 3%,var(--paper))}
.bp-tot{display:flex;align-items:baseline;gap:6px}
.bp-tot b{font-size:clamp(40px,4.4vw,56px);font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.bp-tot span{font-size:14px;color:var(--ink3)}
.bp-tel{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.bp-tel li{font-size:13px;padding:6px 12px;border-radius:99px;max-width:none}
.bp-tel b{font-weight:600}
.bp-tel .bp-zwak{background:#f7e3df;color:#8a2a18}.bp-tel .bp-mid{background:#f6ecd6;color:#6f4e0c}.bp-tel .bp-goed{background:#e1efe7;color:#1e5b3a}
.bp-groepen{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:900px){.bp-groepen{grid-template-columns:1fr 1fr}.bp-g:nth-child(odd){border-right:1px solid var(--line)}}
.bp-g{padding:20px 24px;border-bottom:1px solid var(--line)}
.bp-gk{display:flex;justify-content:space-between;align-items:baseline}
.bp-gk h3{margin:0;font-size:16px;font-weight:500;color:var(--ink)}
.bp-gs{font-size:14px;color:var(--ink3);font-variant-numeric:tabular-nums}
.bp-bar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--ink) 8%,var(--paper));margin:10px 0 6px;overflow:hidden}
.bp-bar i{display:block;height:100%;border-radius:inherit;background:var(--ac-vlak)}
.bp-g ul{list-style:none;margin:0;padding:0}
.bp-p{padding:12px 0 0;max-width:none}
.bp-pk{display:flex;justify-content:space-between;align-items:center;gap:12px}
.bp-pk b{font-size:14.5px;font-weight:500;color:var(--ink)}
.bp-p p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ink3);max-width:none}
.bp-imp{display:inline-block;margin-top:6px;font-size:12px;color:var(--ink2)}
.bp-zwak .sd-s{background:#f7e3df;color:#8a2a18}.bp-mid .sd-s{background:#f6ecd6;color:#6f4e0c}.bp-goed .sd-s{background:#e1efe7;color:#1e5b3a}
.bp-plan{padding:22px 24px;background:color-mix(in srgb,var(--ac) 6%,var(--paper))}
.bp-plan h3{margin:0 0 12px;font-size:17px;font-weight:500;color:var(--ink)}
.bp-plan ol{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bp-plan li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;max-width:none}
.bp-pn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-size:13px;font-weight:600}
.bp-plan b{display:block;font-weight:500;font-size:15px;color:var(--ink)}
.bp-meta{display:block;font-size:13px;color:var(--ink3);margin-top:3px}
.bp figcaption{padding:14px 24px 18px;font-size:12.5px;color:var(--ink3)}
.sd-leesbaar em{filter:none;user-select:auto;-webkit-user-select:auto;color:var(--ink2)}
/* 27-09: score in de eerste uitslag */
.sd-rechts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.sd-score{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;max-width:230px}
.sd-score b{font-size:clamp(34px,3.4vw,44px);font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.sd-score span{font-size:13px;color:var(--ink3)}
.sd-score em{flex-basis:100%;font-style:normal;font-size:11.5px;color:var(--ink3);margin-top:4px}
.sc-kopl{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:var(--fs-ui)}
.sc-kopl a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* ══ A.C.E Scan als gesprek — 27-09-2026 (2e ontwerp) ═══════════════════════
Lenny: "lijkt qua design teveel op de andere scan". Chatvenster + logboek.
Alleen transform/opacity geanimeerd; geen backdrop-filter (jank-regel). */
.acs-kop-in{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,64px);align-items:center}
.acs-kop-merk svg{height:clamp(96px,10vw,140px);width:auto;animation:acsZweef 6s ease-in-out infinite}
@keyframes acsZweef{50%{transform:translateY(-8px)}}
.acs{max-width:760px;margin:0 auto;background:#fbf8f7;border:1px solid var(--line);border-radius:26px;
box-shadow:0 40px 90px -50px rgba(60,40,30,.45);overflow:hidden}
.acs-bar{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);background:#fff}
.acs-av svg{height:30px;width:auto;display:block}
.acs-bar b{display:block;font-weight:600;font-size:15px;color:var(--ink);line-height:1.2}
.acs-status{font-size:12px;color:var(--ink3)}
.acs-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2f7d4f;margin-right:6px;vertical-align:1px}
.acs-tel{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--ink3)}
.acs-draad{padding:22px 20px 26px;display:flex;flex-direction:column;gap:12px;min-height:360px}
.acs-m{max-width:78%;padding:12px 16px;border-radius:18px;font-size:15.5px;line-height:1.45;animation:acsIn .32s ease both}
@keyframes acsIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.acs-ace{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px}
.acs-ace p{margin:0;color:var(--ink);font-weight:500;max-width:none}
.acs-ace small{display:block;margin-top:3px;color:var(--ink3);font-size:13px}
.acs-jij{align-self:flex-end;background:var(--ink);color:#fbf8f7;border-bottom-right-radius:6px}
.acs-dots{display:inline-block;width:34px;height:10px;background:
radial-gradient(circle,var(--ink3) 3px,transparent 3.5px) 0 50%/11px 10px repeat-x;animation:acsTik 1s steps(3) infinite;opacity:.7}
@keyframes acsTik{from{clip-path:inset(0 66% 0 0)}to{clip-path:inset(0 0 0 0)}}
.acs-keus{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-end;justify-content:flex-end;max-width:94%;animation:acsIn .32s ease both}
.acs-chip{padding:10px 16px;border-radius:99px;border:1px solid color-mix(in srgb,var(--ac) 38%,transparent);
background:#fff;color:var(--ink);font:inherit;font-size:14.5px;cursor:pointer;transition:border-color .2s,background-color .2s,color .2s,transform .15s}
.acs-chip:hover{border-color:var(--ac)}
.acs-chip:active{transform:scale(.97)}
.acs-chip:focus-visible,.acs-verder:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.acs-chip[aria-pressed="true"]{background:var(--ac-vlak);border-color:var(--ac-vlak);color:var(--ac-op)}
.acs-verder{padding:10px 18px;border-radius:99px;border:0;background:var(--ink);color:#fbf8f7;font:inherit;font-size:14.5px;cursor:pointer}
.acs-verder:disabled{opacity:.35;cursor:default}
.acs-form{align-self:stretch;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px;border:1px solid var(--line);
border-radius:18px;background:#fff;animation:acsIn .32s ease both}
.acs-form label{display:grid;gap:6px;font-size:13px;color:var(--ink3)}
.acs-form label:nth-of-type(3){grid-column:1/-1}
.acs-form input:not(.aan-hp){font:inherit;font-size:16px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fbf8f7;color:var(--ink)}
.acs-form .btn{grid-column:1/-1;justify-self:start}
.acs-fout{grid-column:1/-1;margin:0;color:#8a2a18;font-size:14px}
.acs-klein{grid-column:1/-1;margin:0;font-size:12.5px;color:var(--ink3)}
.acs-klein a{color:inherit}
.acs-nojs{padding:20px}
/* het logboek */
.acs-uit{max-width:760px;margin:0 auto}
.acs-log{background:#16120f;color:#efe6dd;border-radius:22px;overflow:hidden;box-shadow:0 40px 90px -50px rgba(20,12,6,.6)}
.acs-log-bar{display:flex;align-items:center;gap:6px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#b3a595}
.acs-log-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.acs-log-bar span{margin-left:8px}
.acs-log-bar b{margin-left:auto;color:#e6c98b;font-weight:500}
.acs-log-r{list-style:none;margin:0;padding:20px 22px 24px;display:grid;gap:11px;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}
.acs-l{display:grid;grid-template-columns:16px 1fr;column-gap:10px;row-gap:2px;max-width:none;
opacity:0;animation:acsIn .4s ease forwards;animation-delay:calc(var(--i) * .26s)}
.acs-l::before{content:"\203A";color:#8f8275;grid-row:1/span 2}
.acs-l-k,.acs-l-u{grid-column:2}
.acs-ok::before{content:"\2713";color:#e6c98b}
.acs-info::before{content:"\2022";color:#8f8275}
.acs-wacht::before{content:"\2026";color:#e6c98b}
.acs-l-k{color:#f5eee6}
.acs-l-u{color:#b3a595}
.acs-sub{font-size:13px}
.acs-sub::before{content:none}
.acs-sub .acs-l-k{color:#cdbfb0}
.acs-waas .acs-l-k{filter:blur(5px);user-select:none;-webkit-user-select:none}
.acs-cta{margin-top:18px;padding:22px 24px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.acs-cta p{max-width:none;margin:0 0 14px;color:var(--ink3)}
.acs-cta p b{color:var(--ink)}
.acs-mail{margin:14px 0 0!important;font-size:13px}
@media(max-width:760px){
.acs-kop-in{grid-template-columns:1fr}.acs-kop-merk{display:none}
.acs-m{max-width:88%}.acs-form{grid-template-columns:1fr}.acs-draad{padding:18px 14px 22px}}
@media(prefers-reduced-motion:reduce){
.acs-kop-merk svg,.acs-m,.acs-keus,.acs-form,.acs-dots{animation:none}
.acs-l{animation:none;opacity:1}}
.lz.lz-halo{animation-delay:2.6s}
/* 27-09: in de hero geen zijwaartse baan — de bol hoort midden in zijn donkere cirkel */
.hh-m .hl-bot-in{animation:none!important}
/* 27-09: de bol zweeft boven het midden van zijn doos (ring erboven, schaduw eronder) — cirkel mee omhoog */
.hh-aura{transform:translateY(-44px)}
@media (max-width:720px){.hh-aura{transform:translateY(-34px)}}
/* ══ A.C.E DONKER — 27-09-2026, Lenny: "maak die hele ACE AI pagina en scan donker"
Geldt op /ace-ai/ en /ace-ai/scan/ (beide data-pag="halo-ai"). Eerst de tokens,
daarna de onderdelen die hun lichte kleur hardgecodeerd hadden. Het embleem
gloeit nu overal zoals op /automatisering/. */
html[data-pag="halo-ai"]{
--paper:#0b0d11; --paper2:#11141a; --paper3:#181c24;
--ink:#eef1f5; --ink2:#d3d9e1; --ink3:#a3acb9; --mut:#a3acb9;
--line:rgba(255,255,255,.12);
--ac:#ff7a59; --ac-d:#ff9a7e; --ac-lt:#ffc2b0; --band:#11141a;
color-scheme:dark}
html[data-pag="halo-ai"] body{background:#0b0d11;color:var(--ink)}
/* hero: de lichte skylinefoto wordt een nachtbeeld */
html[data-pag="halo-ai"] .hg-scene::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(8,10,14,.80),rgba(8,10,14,.70) 45%,rgba(11,13,17,.95))}
html[data-pag="halo-ai"] .hh-kop,html[data-pag="halo-ai"] .hh-slot,
html[data-pag="halo-ai"] .hh-cijfer b,html[data-pag="halo-ai"] .hh-kk b{color:#eef1f5}
html[data-pag="halo-ai"] .hh-lead{color:#c3cad4}
html[data-pag="halo-ai"] .hh-bl,html[data-pag="halo-ai"] .hh-ol,html[data-pag="halo-ai"] .hh-kk span,
html[data-pag="halo-ai"] .hh-cl,html[data-pag="halo-ai"] .hh-cs{color:#9ea8b5}
html[data-pag="halo-ai"] .hh-cta{background:#eef1f5;color:#0b0d11}
html[data-pag="halo-ai"] .hh-cta:hover{background:#fff}
html[data-pag="halo-ai"] .hh-cta i{color:#0b0d11}
html[data-pag="halo-ai"] .hh-cta2{color:#eef1f5}
html[data-pag="halo-ai"] .hh-bewijs li,html[data-pag="halo-ai"] .hh-onder li{color:#d3d9e1;
border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
html[data-pag="halo-ai"] .hh-kaart{background:rgba(17,20,26,.86);border-color:rgba(255,255,255,.12)}
html[data-pag="halo-ai"] .hh-t{color:#c3cad4}
html[data-pag="halo-ai"] .hh-t i{background:#46505e}
html[data-pag="halo-ai"] .hh-klaar i{background:#6fbf8a}
html[data-pag="halo-ai"] .hh-aura{background:radial-gradient(circle,rgba(160,180,215,.16) 0%,rgba(160,180,215,.05) 45%,rgba(160,180,215,0) 70%);box-shadow:none}
html[data-pag="halo-ai"] .hg-st,html[data-pag="halo-ai"] .hg-d{background:rgba(255,255,255,.04)}
html[data-pag="halo-ai"] .hg-vlak .hg-d{background:rgba(255,255,255,.06)}
/* A.C.E Scan: chatvenster en kop */
html[data-pag="halo-ai"] .acs{background:#12151b;border-color:rgba(255,255,255,.1);box-shadow:0 40px 90px -50px rgba(0,0,0,.8)}
html[data-pag="halo-ai"] .acs-bar{background:#161a21;border-color:rgba(255,255,255,.08)}
html[data-pag="halo-ai"] .acs-ace{background:#1b2029;border-color:rgba(255,255,255,.08)}
html[data-pag="halo-ai"] .acs-jij{background:#ff7a59;color:#15120b}
html[data-pag="halo-ai"] .acs-chip{background:transparent;color:#e7ebf1;border-color:rgba(255,122,89,.45)}
html[data-pag="halo-ai"] .acs-chip:hover{border-color:#ff7a59}
html[data-pag="halo-ai"] .acs-chip[aria-pressed="true"]{background:#ff7a59;border-color:#ff7a59;color:#15120b}
html[data-pag="halo-ai"] .acs-verder{background:#eef1f5;color:#0b0d11}
html[data-pag="halo-ai"] .acs-form{background:#161a21;border-color:rgba(255,255,255,.1)}
html[data-pag="halo-ai"] .acs-form input:not(.aan-hp){background:#0f1217;border-color:rgba(255,255,255,.14);color:#eef1f5}
html[data-pag="halo-ai"] .acs-fout{color:#f0a492}
html[data-pag="halo-ai"] .acs-cta{background:#12151b;border-color:rgba(255,255,255,.1)}
html[data-pag="halo-ai"] .acs-log{border:1px solid rgba(255,255,255,.08)}
html[data-pag="halo-ai"] .acs-dots{background:radial-gradient(circle,#a3acb9 3px,transparent 3.5px) 0 50%/11px 10px repeat-x}
/* knoppen op donker */
html[data-pag="halo-ai"] .btn-p{background:#eef1f5;color:#0b0d11}
html[data-pag="halo-ai"] .btn-s{color:#eef1f5;border-color:rgba(255,255,255,.22);background:transparent}
/* donker vervolg: onderdelen die --ink als ACHTERGROND gebruikten (token-inversie)
en onderdelen met een vaste witte achtergrond */
html[data-pag="halo-ai"] nav.pill{background:rgba(20,23,29,.92);border-color:rgba(255,255,255,.1)}
html[data-pag="halo-ai"] nav.pill > a:not(.cta),html[data-pag="halo-ai"] nav.pill .menuknop{color:#d3d9e1}
html[data-pag="halo-ai"] nav.pill .cta{background:#eef1f5;color:#0b0d11}
html[data-pag="halo-ai"] .halolink span{background-image:linear-gradient(100deg,#c3cad4 0%,#c3cad4 38%,#ffa88f 50%,#c3cad4 62%,#c3cad4 100%)}
html[data-pag="halo-ai"] .hg-pil{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#d3d9e1}
html[data-pag="halo-ai"] .ra-agent{background:#1b2029;border-color:rgba(255,122,89,.35)}
html[data-pag="halo-ai"] .ra-k li{background:transparent}
html[data-pag="halo-ai"] .ra-agent li::before{color:#ff7a59}
html[data-pag="halo-ai"] .ad{background:#12151b;border-color:rgba(255,255,255,.1)}
html[data-pag="halo-ai"] .ad *:not(.btn):not(.ad-tab){background-color:transparent}
html[data-pag="halo-ai"] .ad-tab{color:#d3d9e1;border-color:rgba(255,255,255,.18)}
html[data-pag="halo-ai"] .ad-tab[aria-selected="true"]{background:#ff7a59!important;color:#15120b;border-color:#ff7a59}
html[data-pag="halo-ai"] .vb{background:rgba(255,255,255,.04)}
html[data-pag="halo-ai"] .hv{background:#12151b;border-color:rgba(255,255,255,.1)}
html[data-pag="halo-ai"] .hv-bar{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
html[data-pag="halo-ai"] .hv-bar i{background:rgba(255,255,255,.16)}
html[data-pag="halo-ai"] .hv-bar span{color:#a3acb9}
html[data-pag="halo-ai"] .ml-l{background:#12151b;border-color:rgba(255,255,255,.1)}
html[data-pag="halo-ai"] .ml-r code{background:rgba(255,255,255,.07);color:#eef1f5}
html[data-pag="halo-ai"] .lb-kies button{color:#d3d9e1;border-color:rgba(255,255,255,.18);background:transparent}
html[data-pag="halo-ai"] .lb-kies button[aria-current="true"]{color:#15120b;background:#ff7a59;border-color:#ff7a59}
html[data-pag="halo-ai"] nav.pill span,html[data-pag="halo-ai"] nav.pill a{color:#d3d9e1}
html[data-pag="halo-ai"] nav.pill .cta,html[data-pag="halo-ai"] nav.pill .cta span{color:#0b0d11}
html[data-pag="halo-ai"] .hx-mag li{background:rgba(255,255,255,.05);color:#d3d9e1;border-color:rgba(255,255,255,.12)}
html[data-pag="halo-ai"] .vb-n{color:#9ea8b5}
html[data-pag="halo-ai"] .vb h3,html[data-pag="halo-ai"] .vb-r{color:#eef1f5}
html[data-pag="halo-ai"] .vb-s{color:#a3acb9}
html[data-pag="halo-ai"] .vb-d li{color:#c3cad4}
html[data-pag="halo-ai"] .hv-t,html[data-pag="halo-ai"] .hv-u{color:#9ea8b5}
html[data-pag="halo-ai"] .hv-k{color:#eef1f5}
html[data-pag="halo-ai"] .hv-bar b{color:#6fbf8a}
/* de lichte waas links in de hero was er voor de lichte foto; op donker weg */
html[data-pag="halo-ai"] .hh-l::before{display:none}
html[data-pag="halo-ai"] .fmerk img{filter:invert(1)}
/* de glans werkt via background-clip:text; mijn "nav.pill span{color}" maakte de
tekst weer gekleurd en zo werd het verloop een licht blok */
html[data-pag="halo-ai"] nav.pill .halolink span{color:transparent;-webkit-background-clip:text;background-clip:text}
html[data-pag="halo-ai"] .mark img{filter:invert(1)}
/* bestond al: bij "minder beweging" bleef de takenlijst op opacity 0 staan */
@media(prefers-reduced-motion:reduce){.hh-t{opacity:1;animation:none}}
html[data-pag="halo-ai"] .burger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
html[data-pag="halo-ai"] .burger span{background:#eef1f5}
/* ══ A.C.E ACCENT-PROEF — 27-09-2026, Lenny: "doe een nieuwe accent dat echt een modern
look zou overbrengen". Alleen actief met data-ace-accent op ; dat zet ALLEEN de
proefpagina /_proef-ace-zes/, de echte /ace-ai/ blijft goud + koraal.
Eén accent in plaats van twee (goud in koppen + koraal op knoppen), naar 60-30-10.
⚠️ Het blauw uit het onderzoek (#4C5EF7) haalt als tekst maar 3,94:1 op #0b0d11 →
#6B7CFF (5,51:1). Op een vlak van accent staat DONKERE tekst: wit haalt 3,53:1. */
html[data-pag="halo-ai"][data-ace-accent="blauw"]{--acc:#6B7CFF;--acc-h:#8E9BFF;--acc-rgb:107,124,255}
html[data-pag="halo-ai"][data-ace-accent="lime"]{--acc:#C6F432;--acc-h:#D6FA6A;--acc-rgb:198,244,50}
html[data-pag="halo-ai"][data-ace-accent]{--ac:var(--acc);--ac-d:var(--acc-h);--ac-lt:var(--acc-h)}
html[data-pag="halo-ai"][data-ace-accent] .btn-p,
html[data-pag="halo-ai"][data-ace-accent] nav.pill .cta{background:var(--acc);color:#0b0d11;
border:0;border-radius:999px;box-shadow:0 0 0 1px rgba(var(--acc-rgb),.35),0 10px 30px -12px rgba(var(--acc-rgb),.6);
transition:transform .2s ease,background-color .2s ease}
html[data-pag="halo-ai"][data-ace-accent] nav.pill .cta span{color:#0b0d11}
@media(hover:hover) and (pointer:fine){
html[data-pag="halo-ai"][data-ace-accent] .btn-p:hover,
html[data-pag="halo-ai"][data-ace-accent] nav.pill .cta:hover{background:var(--acc-h);transform:translateY(-1px);
box-shadow:0 0 0 1px rgba(var(--acc-rgb),.35),0 10px 30px -12px rgba(var(--acc-rgb),.6)}}
html[data-pag="halo-ai"][data-ace-accent] .btn-p:active{transform:scale(.97)}
html[data-pag="halo-ai"][data-ace-accent] .hh-cta{background:var(--acc);color:#0b0d11}
html[data-pag="halo-ai"][data-ace-accent] .hh-cta:hover{background:var(--acc-h)}
html[data-pag="halo-ai"][data-ace-accent] .acs-jij,
html[data-pag="halo-ai"][data-ace-accent] .acs-chip[aria-pressed="true"],
html[data-pag="halo-ai"][data-ace-accent] .lb-kies button[aria-current="true"]{background:var(--acc);border-color:var(--acc);color:#0b0d11}
html[data-pag="halo-ai"][data-ace-accent] .ad-tab[aria-selected="true"]{background:var(--acc)!important;border-color:var(--acc);color:#0b0d11}
html[data-pag="halo-ai"][data-ace-accent] .acs-chip{border-color:rgba(var(--acc-rgb),.45)}
html[data-pag="halo-ai"][data-ace-accent] .acs-chip:hover{border-color:var(--acc)}
html[data-pag="halo-ai"][data-ace-accent] .ra-agent{border-color:rgba(var(--acc-rgb),.4)}
html[data-pag="halo-ai"][data-ace-accent] .ra-agent li::before{color:var(--acc)}
html[data-pag="halo-ai"][data-ace-accent] .halolink span{background-image:linear-gradient(100deg,#c3cad4 0%,#c3cad4 38%,var(--acc-h) 50%,#c3cad4 62%,#c3cad4 100%)}
/* ══ A.C.E SCROLLFILM (proef, 27-09-2026) — alleen met data-acf op .
De hero staat sticky in 240svh; de film volgt de scroll (script in de proefpagina). */
.acf-wrap{position:relative;height:240svh}
html[data-acf] .acf-wrap .hg-hero{position:sticky;top:0;min-height:100svh}
html[data-acf] .hg-scene{display:none}
html[data-acf] .hg-scene.acf-film{display:block;background:#0b0d11}
.acf-film video,.acf-film .acf-stil{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.acf-film .acf-stil{display:none}
.acf-rm .acf-film video{display:none}
.acf-rm .acf-film .acf-stil{display:block}
.acf-rm{height:auto}
html[data-acf] .acf-film::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(11,13,17,.92) 0%,rgba(11,13,17,.6) 38%,rgba(11,13,17,0) 62%)}
/* het glazen blok staat rechts: embleem en kaarten wijken in deze stand */
html[data-acf] .hh-m,html[data-acf] .hh-r{visibility:hidden}
@media(max-width:700px){
html[data-acf] .acf-film::after{background:linear-gradient(180deg,rgba(11,13,17,.9) 0%,rgba(11,13,17,.7) 55%,rgba(11,13,17,.3) 100%)}
html[data-acf] .hh-m,html[data-acf] .hh-r{display:none}}
/* telefoon: het blok staat rechts in de film → uitsnede naar rechts schuiven */
@media(max-width:700px){html[data-acf] .acf-film video,html[data-acf] .acf-film .acf-stil{object-position:72% 50%}}
/* de onderbalk op mobiel droeg nog de koraal rand van de T&P-knop */
html[data-pag="halo-ai"][data-ace-accent] .mscan{background:var(--acc);color:#0b0d11;border:0;
border-radius:999px;box-shadow:0 10px 30px -12px rgba(var(--acc-rgb),.6)}
html[data-pag="halo-ai"][data-ace-accent] .mscan *{color:#0b0d11}
/* film 2: het vinkje (eindpunt) staat tegen de rechterrand → uitsnede rechts laten aansluiten */
html[data-acf] .acf-film video,html[data-acf] .acf-film .acf-stil{object-position:100% 50%}
@media(max-width:700px){html[data-acf] .acf-film video,html[data-acf] .acf-film .acf-stil{object-position:88% 50%}}
/* ══ 28-09 · zalm in de koppen ═══════════════════════════════════════════════
Lenny: "die roze of zalm kleur behouden, geen goud". Kleine tekst op licht blijft
de diepe roze --ac (5,3:1), maar een accentwoord in een KOP is grote tekst en
heeft 3:1 nodig. #e85a3c haalt 3,52:1 op wit en 3,24:1 op #f5f5f7 — zalm, geen rood. */
:root{--ac-kop:#e85a3c}
h1 .ac{color:var(--ac-kop)}
/* h2/h3 zijn op mobiel kleiner dan 24 px = gewone tekst (4,5:1) → daar blijft de diepe roze */
@media(min-width:1200px){h2 .ac,h3 .ac{color:var(--ac-kop)}}
/* op donkere pagina's mag het lichte zalm zelf (6,6:1 op #1d1d1f) */
html[data-pag="halo-ai"],html[data-thema="nacht"],html[data-grond="antraciet"]{--ac-kop:#ff7a59}
/* de hero staat op donker beeld en zet zijn eigen lichte zalm (#ffab93) — die houden */
.hk-bak h1,.hkaart-in h1{--ac-kop:var(--ac)}
/* ══ 28-09 · DEEP SCAN: meteen inplannen + optionele velden ═══════════════
Onderzoek punt 1: direct een gesprek kunnen boeken na het formulier. Kaart
met een zalm streep links (vlak, geen tekstkleur), knop rechts; op een
telefoon onder elkaar. Alleen transform/opacity in de beweging. */
.sc-boek{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:center;
margin:clamp(20px,2.4vw,28px) 0;padding:clamp(20px,2.4vw,28px);border-radius:18px;
background:var(--paper);border:1px solid var(--line);position:relative;overflow:hidden}
.sc-boek::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ac-vlak)}
.sc-boek-lbl{display:block;font-size:var(--fs-mini,12px);letter-spacing:.08em;text-transform:uppercase;color:var(--ac);font-weight:600}
.sc-boek h3{margin:6px 0 8px;font-size:clamp(22px,2.2vw,28px);line-height:1.15;color:var(--ink)}
.sc-boek p{margin:0;max-width:52ch;color:var(--ink2)}
.sc-boek-knop{display:grid;gap:10px;justify-items:center}
.sc-boek-bel{font-size:var(--fs-ui);color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
.sc-boek-proef{grid-column:1/-1;margin:0;font-size:12px;color:var(--ink3);border-top:1px dashed var(--line);padding-top:12px}
@media(max-width:760px){.sc-boek{grid-template-columns:1fr}.sc-boek-knop{justify-items:start}}
.sc-velden .sc-opt{font-style:normal;font-size:12px;color:var(--ink3);margin-left:6px}
/* ══ /werk/ als verhaal per case (30-09-2026) — prefix wc- ══════════════════════
Per case: kopregel · uitkomst als kop · cijfers · beeld · tags · context/uitdaging/aanpak/resultaat
· "waarom dit voor jou telt" + knop. Alleen transform/opacity op hover. */
.wc-samen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px}
.wc-samen div{padding:14px 16px;border-radius:14px;background:var(--paper2);border:1px solid var(--line)}
.wc-samen b{display:block;font-family:var(--disp,inherit);font-size:clamp(22px,2.2vw,30px);font-weight:500;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.wc-samen span{display:block;margin-top:4px;font-size:13px;line-height:1.35;color:var(--ink3)}
.wc-index{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.wc-idx{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--line);
color:var(--ink);text-decoration:none;font-size:14px;background:var(--paper);transition:transform .2s ease,border-color .2s ease}
.wc-idx b{font-family:var(--mono,ui-monospace,monospace);font-size:11px;font-weight:500;color:var(--ac)}
@media(hover:hover) and (pointer:fine){.wc-idx:hover{transform:translateY(-2px);border-color:var(--ink3)}}
.wc-sec .wrap{display:grid;gap:clamp(22px,3vw,40px)}
.wc-case{scroll-margin-top:100px;background:var(--paper);border:1px solid var(--line);border-radius:24px;
padding:clamp(20px,3.2vw,48px);box-shadow:0 30px 60px -48px rgba(20,20,30,.35)}
.wc-kopregel{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;font-size:14px;color:var(--ink3)}
.wc-nr{font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:var(--ac)}
.wc-soort{color:var(--ink)}
.wc-stand{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;border:1px solid var(--line);font-size:12.5px}
.wc-stand::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink3)}
.wc-stand.wc-live::before{background:#2f9d62}
.wc-uitkomst{margin:16px 0 0;font-family:var(--disp,inherit);font-weight:500;font-size:clamp(28px,3.4vw,48px);line-height:1.08;letter-spacing:-.03em;max-width:22ch;text-wrap:balance}
.wc-cijfers{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);margin:22px 0 26px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wc-c b{display:block;font-family:var(--disp,inherit);font-weight:500;font-size:clamp(26px,2.8vw,40px);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.wc-c span{display:block;margin-top:6px;font-size:13px;color:var(--ink3)}
.wc-beeld{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;background:var(--paper2)}
.wc-beeld img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.wc-extra{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.wc-extra figure{margin:0}
.wc-extra img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:12px;border:1px solid var(--line)}
.wc-extra figcaption{margin-top:6px;font-size:12.5px;color:var(--ink3)}
.wc-tags{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.wc-tags li{padding:5px 11px;border-radius:999px;background:var(--paper2);font-size:12.5px;color:var(--ink2,var(--ink))}
.wc-verhaal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:24px}
.wc-verhaal section{padding:18px;border-radius:16px;background:var(--paper2);border:1px solid var(--line)}
.wc-verhaal h3{margin:0 0 8px;font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.wc-verhaal p{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.wc-verhaal ul{margin:0;padding:0 0 0 16px;display:grid;gap:6px;font-size:14.5px;line-height:1.45}
.wc-res{background:var(--paper)!important;border-color:color-mix(in srgb,var(--ac-vlak,#ff7a59) 55%,transparent)!important;
box-shadow:0 18px 36px -28px color-mix(in srgb,var(--ac-vlak,#ff7a59) 70%,transparent)}
.wc-res h3{color:var(--ac)!important}
.wc-meet{margin-top:10px!important;font-size:13px!important;color:var(--ink3)!important}
.wc-meet b{display:block;font-weight:500;color:var(--ink)}
.wc-voorjou{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.wc-voorjou p{margin:0;max-width:60ch;font-size:15.5px;line-height:1.5;color:var(--ink3)}
.wc-voorjou p b{color:var(--ink);font-weight:500}
.wc-knoppen{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:1100px){.wc-verhaal{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.wc-samen{grid-template-columns:1fr 1fr}.wc-stand{margin-left:0}}
@media(max-width:600px){.wc-verhaal{grid-template-columns:1fr}.wc-extra{grid-template-columns:1fr 1fr}.wc-knoppen .btn{flex:1 1 100%;text-align:center}}
/* 30-09 (2): kop en beeld naast elkaar — het beeld over de volle breedte vulde een heel scherm */
.wc-boven{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(20px,3vw,48px);align-items:start;margin-top:14px}
.wc-boven .wc-uitkomst{margin-top:0}
.wc-boven .wc-cijfers{margin:22px 0 0}
.wc-boven .wc-tags{margin-top:18px}
/* de schermafdrukken dragen zelf een smalle rand rechts → 4 % bijsnijden */
.wc-beeld img{width:104%;max-width:none}
.wc-extra img{width:100%}
.wc-verhaal ul{list-style:none;padding:0}
.wc-verhaal li{position:relative;padding-left:16px}
.wc-verhaal li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;background:var(--ac)}
@media(max-width:900px){.wc-boven{grid-template-columns:1fr}}
/* 30-09 (3): drie soorten cases, elk een eigen vorm (web · marketing · automation) */
.wc-groep{margin-top:clamp(20px,3vw,40px);padding-top:clamp(10px,1.5vw,20px)}
.wc-groep:first-child{margin-top:0}
.wc-gkop{margin:0;font-family:var(--disp,inherit);font-weight:500;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em}
.wc-groep p{margin:6px 0 0;color:var(--ink3);max-width:62ch}
.wc-groep{scroll-margin-top:100px}
.wc-breed{max-width:28ch}
/* marketing: KPI-kaarten + trechter */
.wc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:24px}
.wc-kpi{padding:18px;border-radius:16px;background:var(--paper2);border:1px solid var(--line)}
.wc-kpi b{display:block;font-family:var(--disp,inherit);font-weight:500;font-size:clamp(30px,3vw,44px);letter-spacing:-.03em;line-height:1}
.wc-kpi span{display:block;margin-top:8px;font-size:13.5px;line-height:1.4;color:var(--ink3)}
.wc-trechter{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}
.wc-trechter li{--w:calc(100% - var(--i) * 9%);width:var(--w);margin-inline:auto;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
padding:14px 20px;border-radius:14px;background:color-mix(in srgb,var(--ac-vlak,#ff7a59) calc(10% + var(--i) * 7%),var(--paper));
border:1px solid color-mix(in srgb,var(--ac-vlak,#ff7a59) 30%,transparent)}
.wc-trechter b{font-weight:500;color:var(--ink);min-width:12ch}
.wc-trechter span{font-size:14px;color:var(--ink3)}
.wc-beeld-m{margin-top:20px;aspect-ratio:21/9}
.wc-stappen{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;counter-reset:st}
.wc-stappen li{counter-increment:st;padding:12px 14px;border-radius:12px;border:1px solid var(--line);font-size:14px;background:var(--paper2)}
.wc-stappen li::before{content:"0" counter(st);display:block;font-family:var(--mono,ui-monospace,monospace);font-size:11px;color:var(--ac);margin-bottom:4px}
.wc-drie{grid-template-columns:repeat(3,minmax(0,1fr))}
/* automation: badges, voor/na, stroom, mens + logboek */
.wc-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.wc-badge{display:flex;align-items:baseline;gap:8px;padding:9px 16px;border-radius:999px;background:var(--ink);color:var(--paper)}
.wc-badge b{font-family:var(--disp,inherit);font-weight:500;font-size:18px}
.wc-badge span{font-size:13px;opacity:.8}
.wc-voorna{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin-top:22px}
.wc-voorna section{padding:18px 20px;border-radius:16px;border:1px solid var(--line)}
.wc-voor{background:var(--paper2)}
.wc-na{background:var(--paper);border-color:color-mix(in srgb,#2f9d62 45%,transparent)!important}
.wc-voorna h3,.wc-auto-onder h3{margin:0 0 10px;font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.wc-na h3{color:#237a4b}
.wc-voorna ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px;line-height:1.45}
.wc-voorna li{position:relative;padding-left:22px}
.wc-voor li::before{content:"✕";position:absolute;left:0;font-size:12px;color:var(--ink3);top:.15em}
.wc-na li::before{content:"✓";position:absolute;left:0;font-size:13px;color:#237a4b;top:.1em}
.wc-pijl{align-self:center;font-size:24px;color:var(--ac)}
.wc-stroom{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative}
.wc-stroom li{position:relative;padding:16px 16px 16px 0;border-top:2px solid var(--line)}
.wc-stroom li::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--ac-vlak,#ff7a59);
box-shadow:0 0 0 4px var(--paper)}
.wc-stroom li::after{content:"";position:absolute;top:-2px;left:0;height:2px;width:100%;background:var(--ac-vlak,#ff7a59);transform-origin:left;transform:scaleX(0)}
.wc-case.in .wc-stroom li::after,.wc-stroom.in li::after{transform:scaleX(1);transition:transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * .25s)}
.wc-stroom small{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ac);margin:10px 0 4px}
.wc-stroom b{font-weight:500;font-size:15px;line-height:1.4}
.wc-auto-onder{display:grid;grid-template-columns:1fr 1.2fr;gap:14px;margin-top:22px}
.wc-mens,.wc-log{padding:18px 20px;border-radius:16px;border:1px solid var(--line);background:var(--paper2)}
.wc-mens p{margin:0;font-size:15px;line-height:1.5}
.wc-log h3 em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--ink3)}
.wc-log table{width:100%;border-collapse:collapse;font-size:14px}
.wc-log td{padding:7px 0;border-top:1px solid var(--line)}
.wc-log td:first-child{width:62px;font-family:var(--mono,ui-monospace,monospace);font-size:12.5px;color:var(--ink3)}
@media(max-width:900px){.wc-drie{grid-template-columns:1fr}.wc-voorna{grid-template-columns:1fr}.wc-pijl{transform:rotate(90deg);justify-self:center}
.wc-stroom{grid-template-columns:1fr 1fr;row-gap:6px}.wc-auto-onder{grid-template-columns:1fr}.wc-stappen{grid-template-columns:1fr 1fr}
.wc-trechter li{--w:100%}}
@media(prefers-reduced-motion:reduce){.wc-stroom li::after{transform:scaleX(1)!important;transition:none!important}}
/* ⚠️ de kopregel was eerst een : de sitebrede regel header{position:fixed} (menubalk) trok hem vast bovenin → nu een div */
.wc-badge b{color:var(--paper)!important}
.wc-badge span{color:var(--paper)}
.wc-beeld-m{max-height:380px}
.wc-beeld-m{aspect-ratio:auto;height:clamp(220px,28vw,380px);max-height:none}
/* ══ /werk/ op de drie pilaren (30-09-2026, ronde 2) ══════════════════════════ */
.wc-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center}
.wc-hero .lbl{margin-bottom:14px}
.wc-venn{width:100%;height:auto;display:block;overflow:visible}
.wc-vc{fill-opacity:.10;stroke-width:1.5}
.wc-vc1{fill:#ff7a59;stroke:#ff7a59}
.wc-vc2{fill:#bd3a42;stroke:#bd3a42}
.wc-vc3{fill:#16181c;stroke:#16181c;fill-opacity:.07}
.wc-vl{font:500 15px/1 var(--sans,system-ui);fill:var(--ink)}
.wc-vp circle{fill:var(--ink);transition:transform .25s cubic-bezier(.2,.8,.2,1);transform-box:fill-box;transform-origin:center}
.wc-vp text{font:600 13px/1 var(--sans,system-ui);fill:var(--paper)}
@media(hover:hover) and (pointer:fine){.wc-vp:hover circle{transform:scale(1.18);fill:#bd3a42}}
.wc-vc{transform-box:fill-box;transform-origin:center;animation:wcAdem 7s ease-in-out infinite}
.wc-vc2{animation-delay:-2.3s}.wc-vc3{animation-delay:-4.6s}
@keyframes wcAdem{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.wc-legenda{display:grid;gap:8px;margin-top:26px}
.wc-leg{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--paper);
color:var(--ink);text-decoration:none;transition:transform .2s ease,border-color .2s ease}
.wc-leg b{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:13px;font-weight:600}
.wc-leg span{display:flex;flex-direction:column;font-weight:500}
.wc-leg small{font-weight:400;font-size:13px;color:var(--ink3)}
@media(hover:hover) and (pointer:fine){.wc-leg:hover{transform:translateX(4px);border-color:var(--ink3)}}
/* per klant */
.wc-naam{font-family:var(--disp,inherit);font-weight:500;font-size:17px;color:var(--ink);text-decoration:none}
a.wc-naam:hover{text-decoration:underline;text-underline-offset:3px}
.wc-pijlers{display:flex;align-items:center;gap:14px;margin-top:18px}
.wc-venn-k{flex:none;width:64px;height:auto}
.wc-venn-k circle{fill:transparent;stroke:var(--ink3);stroke-width:2;stroke-opacity:.5}
.wc-venn-k circle.wc-v-aan{fill:#ff7a59;fill-opacity:.35;stroke:#bd3a42;stroke-opacity:1}
.wc-venn-k circle.wc-v-plan{stroke-dasharray:5 5;stroke:#bd3a42;stroke-opacity:.9}
.wc-pijlers ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.wc-pc{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:13px;background:var(--ink);color:var(--paper)}
.wc-pc b{font-family:var(--mono,ui-monospace,monospace);font-size:11px;font-weight:500;color:#ffab93}
.wc-pc-plan{background:transparent;color:var(--ink);border:1px dashed var(--ink3)}
.wc-pc-plan b{color:#bd3a42}.wc-pc em{font-style:normal;color:var(--ink3)}
.wc-zonder{grid-template-columns:1fr}
/* browserframe met scroll-opname */
.wc-browser{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;
box-shadow:0 30px 60px -36px rgba(20,20,40,.45)}
.wc-balk{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--paper2);border-bottom:1px solid var(--line)}
.wc-balk i{width:9px;height:9px;border-radius:50%;background:rgba(0,0,0,.14)}
.wc-balk span{margin-left:10px;padding:3px 12px;border-radius:999px;background:var(--paper);font-size:12px;color:var(--ink3)}
.wc-video{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--paper2)}
/* hoofdstuk per pilaar */
.wc-hs{display:grid;grid-template-columns:180px minmax(0,1fr);gap:clamp(16px,2.4vw,36px);margin-top:clamp(26px,3vw,42px);
padding-top:clamp(22px,2.6vw,34px);border-top:1px solid var(--line)}
.wc-hs-rail{position:sticky;top:110px;align-self:start;display:grid;gap:4px}
.wc-hs-rail span{font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:#bd3a42}
.wc-hs-rail b{font-weight:500;font-size:15px;line-height:1.3}
.wc-hs-kop{margin:0;font-family:var(--disp,inherit);font-weight:500;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em}
.wc-hkop{margin:6px 0 0;color:var(--ink3);font-size:15px}
.wc-hs .wc-verhaal{margin-top:16px}
.wc-hs .wc-kpis,.wc-hs .wc-badges{margin-top:16px}
/* slideshow */
.wc-dtekst{margin:8px 0 0;max-width:62ch;color:var(--ink3);font-size:15.5px;line-height:1.55}
.wc-slides{position:relative;margin-top:18px;border-radius:18px;overflow:hidden;background:var(--paper2);border:1px solid var(--line);outline:none}
.wc-slides:focus-visible{box-shadow:0 0 0 3px #bd3a42}
.wc-dias{position:relative;aspect-ratio:16/10}
.wc-dia{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.03);transition:opacity .7s ease,transform 5s ease}
.wc-dia.aan{opacity:1;transform:scale(1)}
.wc-dia img{width:100%;height:100%;object-fit:cover;display:block}
.wc-dia figcaption{position:absolute;left:16px;bottom:16px;max-width:calc(100% - 140px);padding:8px 14px;border-radius:999px;
background:rgba(255,255,255,.92);color:#16181c;font-size:13.5px}
.wc-sv{position:absolute;top:50%;margin-top:-22px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);
color:#16181c;font-size:18px;cursor:pointer;transition:transform .2s ease}
.wc-sv-l{left:12px}.wc-sv-r{right:12px}
@media(hover:hover) and (pointer:fine){.wc-sv:hover{transform:scale(1.08)}}
.wc-stippen{position:absolute;right:16px;bottom:22px;display:flex;gap:6px}
.wc-stippen button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.6);cursor:pointer;transition:width .3s ease,background .3s ease}
.wc-stippen button[aria-current="true"]{width:22px;background:#fff}
@media(max-width:1000px){.wc-hero-in{grid-template-columns:1fr}.wc-venn-wrap{max-width:520px}}
@media(max-width:760px){.wc-hs{grid-template-columns:1fr}.wc-hs-rail{position:static;display:flex;gap:8px;align-items:baseline}
.wc-dia figcaption{max-width:calc(100% - 32px);bottom:44px}.wc-stippen{bottom:16px}}
@media(prefers-reduced-motion:reduce){.wc-vc{animation:none}.wc-dia{transition:opacity .01s}}
/* ══ /werk/ als klantreis (30-09-2026, ronde 3) — prefix wr- ═════════════════ */
.wr-hero .display{max-width:18ch}
.wr-hero .lead{max-width:64ch}
.wr-reis{margin-top:clamp(28px,3.4vw,48px);padding:clamp(18px,2.4vw,30px);border-radius:22px;background:var(--paper2);border:1px solid var(--line)}
.wr-stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;position:relative}
.wr-stappen::before{content:"";position:absolute;left:10%;right:10%;top:17px;height:2px;background:var(--line)}
.wr-stappen li{position:relative;display:grid;justify-items:center;text-align:center;gap:6px}
.wr-bol{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--paper);font-weight:600;font-size:14px}
.wr-stappen li:nth-child(3) .wr-bol{background:#bd3a42;box-shadow:0 0 0 6px color-mix(in srgb,#ff7a59 30%,transparent)}
.wr-stappen b{font-weight:500;font-size:15.5px;margin-top:4px}
.wr-stappen small{font-size:13px;line-height:1.4;color:var(--ink3);max-width:22ch}
.wr-banden{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px 12px;margin-top:20px}
.wr-band{grid-column:calc(var(--van) + 1)/calc(var(--tot) + 2);height:34px;border-radius:999px;display:flex;align-items:center;padding:0 16px;
font-size:13px;font-weight:500;transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in .wr-band,.wr-reis .wr-band{transform:scaleX(1)}
.wr-b-web{background:color-mix(in srgb,#ff7a59 26%,var(--paper));color:#7a2a1a}
.wr-b-marketing{background:color-mix(in srgb,#bd3a42 20%,var(--paper));color:#7a1f28;transition-delay:.15s}
.wr-b-auto{background:var(--ink);color:var(--paper);transition-delay:.3s}
.wr-knoop{grid-column:3/4;grid-row:1/4;justify-self:center;align-self:stretch;width:2px;background:repeating-linear-gradient(#bd3a42 0 5px,transparent 5px 10px);position:relative;pointer-events:none}
.wr-knoop span{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:8px;white-space:nowrap;font-size:12.5px;color:#bd3a42;font-weight:500}
.wr-banden{padding-bottom:30px}
.wr-hknop{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
/* case */
.wr-sub{margin:14px 0 0;max-width:56ch;font-size:16px;line-height:1.55;color:var(--ink3)}
.wr-balk{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.wr-balk li{padding:16px 18px;border-radius:16px;background:var(--paper2);border:1px solid var(--line)}
.wr-balk b{display:block;font-family:var(--disp,inherit);font-weight:500;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.wr-balk span{display:block;margin-top:6px;font-size:13.5px;line-height:1.35;color:var(--ink3)}
.wr-balk li.wr-v b{color:#237a4b}
.wr-mini{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.wr-mini li{display:grid;gap:7px}
.wr-mini span{display:block;height:6px;border-radius:999px;background:var(--line)}
.wr-mini li.aan span{background:#ff7a59}
.wr-mini em{font-style:normal;font-size:12.5px;color:var(--ink3)}
.wr-mini li.aan em{color:var(--ink)}
.wr-midden{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;margin-top:22px;align-items:start}
.wr-midden:has(> :only-child){grid-template-columns:1fr}
.wr-vn{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:15px}
.wr-vn th{text-align:left;padding:12px 16px;font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);background:var(--paper2)}
.wr-vn th:last-child{color:#237a4b}
.wr-vn td{padding:11px 16px;border-top:1px solid var(--line);line-height:1.4}
.wr-vn td:first-child{color:var(--ink3)}
.wr-vn td:nth-child(2){width:24px;padding:0;color:#bd3a42;text-align:center}
.wr-vn td:last-child{font-weight:500}
.wr-log{padding:18px 20px;border-radius:16px;background:var(--ink);color:var(--paper)}
.wr-log ol{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px}
.wr-log li{display:flex;gap:12px}
.wr-log time{font-family:var(--mono,ui-monospace,monospace);font-size:12.5px;color:#ffab93;flex:none}
.wr-log p{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);font-size:14.5px;line-height:1.5;color:var(--paper)}
.wr-lagen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:14px}
.wr-laag{padding:18px 20px;border-radius:16px;border:1px solid var(--line);background:var(--paper)}
.wr-laag small{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#bd3a42}
.wr-laag h3{margin:8px 0 10px;font-family:var(--disp,inherit);font-weight:500;font-size:18px;letter-spacing:-.01em;line-height:1.25}
.wr-laag ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14.5px;line-height:1.45}
.wr-laag li{position:relative;padding-left:16px}
.wr-laag li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;background:#ff7a59}
.wr-l-web{border-top:3px solid #ff7a59}.wr-l-marketing{border-top:3px solid #bd3a42}.wr-l-auto{border-top:3px solid var(--ink)}
.wr-setfotos{margin-top:18px}
.wr-setfotos h3{margin:0 0 10px;font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.wr-setfotos .wc-dias{aspect-ratio:21/9}
@media(max-width:900px){
.wr-stappen{grid-template-columns:1fr;gap:14px}.wr-stappen::before{left:17px;right:auto;top:10px;bottom:10px;width:2px;height:auto}
.wr-stappen li{grid-template-columns:36px 1fr;justify-items:start;text-align:left;column-gap:12px;align-items:center}
.wr-stappen li b{margin:0}.wr-stappen li small{grid-column:2;max-width:none}
.wr-banden{grid-template-columns:1fr;padding-bottom:0}.wr-band{grid-column:1/-1}.wr-knoop{display:none}
.wr-band span::after{content:attr(data-x)}
.wr-midden{grid-template-columns:1fr}.wr-mini em{font-size:11px}.wr-setfotos .wc-dias{aspect-ratio:16/10}}
/* ronde 3b: aanvraagroute als kaarten, hoofdstukken met bewijs, knooplabel eigen rij */
.wr-knoop{z-index:2;grid-row:1/4}
.wr-knoop span{display:none}
.wr-knooptekst{grid-column:2/5;grid-row:4;margin:6px 0 0;text-align:center;font-size:13px;font-weight:500;color:#bd3a42}
.wr-banden{padding-bottom:0}
.wr-kopje{margin:30px 0 12px;font-family:var(--mono,ui-monospace,monospace);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.wr-kaarten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;counter-reset:ar}
.wr-kaarten li{position:relative;padding:16px;border-radius:16px;background:var(--paper2);border:1px solid var(--line);display:grid;align-content:start;gap:6px}
.wr-kaarten li:not(:last-child)::after{content:"→";position:absolute;right:-11px;top:24px;z-index:1;width:18px;height:18px;display:grid;place-items:center;
font-size:12px;color:#bd3a42;background:var(--paper);border-radius:50%}
.wr-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--paper);border:1px solid var(--line);color:#bd3a42}
.wr-ic svg{width:20px;height:20px}
.wr-kaarten b{font-weight:500;font-size:15px;margin-top:4px}
.wr-kaarten p{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink3)}
.wr-kaarten em{font-style:normal;margin-top:4px;font-size:12.5px;font-weight:500;color:#237a4b}
.wr-kaarten em::before{content:"✓ "}
.wr-case .wr-lagen{margin-top:0}
.wr-hsnr{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:#bd3a42}
.wr-laag h3{margin:4px 0 0;font-size:21px}
.wr-laag small{margin-top:4px;font-family:inherit;text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink3)}
.wr-laag p{margin:10px 0 0;font-size:14.5px;line-height:1.5}
.wr-bewijs{display:block;margin:12px 0 6px;font-family:var(--mono,ui-monospace,monospace);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.wr-case .wr-midden{margin-top:18px}
@media(max-width:900px){.wr-kaarten{grid-template-columns:1fr 1fr}.wr-kaarten li::after{display:none}.wr-knooptekst{grid-column:1/-1}}
.wr-b-web{grid-row:1}.wr-b-marketing{grid-row:2}.wr-b-auto{grid-row:3}
.wr-knoop{grid-column:3/4;grid-row:1/4;margin:-12px 0;width:3px;background:repeating-linear-gradient(#bd3a42 0 6px,transparent 6px 11px)}
@media(max-width:900px){.wr-b-web,.wr-b-marketing,.wr-b-auto{grid-row:auto}.wr-knooptekst{grid-row:auto}}
.wr-knooptekst{grid-column:3/4;justify-self:center;white-space:nowrap}@media(max-width:900px){.wr-knooptekst{grid-column:1/-1;white-space:normal}}
/* ══ /werk/ ronde 4 (30-09): kort overzicht per case, details uitklapbaar ══ */
.wr-stappen,.wr-banden{grid-template-columns:repeat(4,minmax(0,1fr))}
.wr-stappen li:nth-child(3) .wr-bol{background:var(--ink);box-shadow:none}
.wr-stappen li:nth-child(2) .wr-bol{background:#bd3a42;box-shadow:0 0 0 6px color-mix(in srgb,#ff7a59 30%,transparent)}
.wr-knoop{grid-column:2/3}
.wr-knooptekst{grid-column:2/3}
.wr-link{align-self:center;font-size:15px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.wr-vier{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:v}
.wr-vier li{position:relative;padding:16px 18px 0 0;border-top:2px solid color-mix(in srgb,#ff7a59 55%,var(--line))}
.wr-vier span{position:absolute;top:-13px;left:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:12px;font-weight:600}
.wr-vier b{display:block;font-weight:500;font-size:16px;margin-top:4px}
.wr-vier p{margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--ink3)}
.wr-kaartjes{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.wr-k{padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--paper2)}
.wr-k small{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#bd3a42}
.wr-k b{display:block;margin-top:6px;font-weight:500;font-size:17px;line-height:1.3}
.wr-k span{display:block;margin-top:6px;font-size:13.5px;color:var(--ink3)}
.wr-k.wr-l-web{border-top:3px solid #ff7a59}.wr-k.wr-l-marketing{border-top:3px solid #bd3a42}.wr-k.wr-l-auto{border-top:3px solid var(--ink)}
.wr-vnk{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:6px}
.wr-vnk li{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);align-items:baseline;gap:8px;font-size:15px;padding:8px 0;border-bottom:1px solid var(--line)}
.wr-vnk s{text-decoration:none;color:var(--ink3)}
.wr-vnk i{font-style:normal;color:#bd3a42;text-align:center}
.wr-vnk b{font-weight:500}
.wr-meer{margin-top:18px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.wr-meer summary{cursor:pointer;list-style:none;padding:14px 18px;font-size:14.5px;font-weight:500;display:flex;justify-content:space-between;gap:12px}
.wr-meer summary::-webkit-details-marker{display:none}
.wr-meer summary::after{content:"+";font-size:18px;line-height:1;color:#bd3a42;transition:transform .25s ease}
.wr-meer[open] summary::after{transform:rotate(45deg)}
.wr-meer-in{padding:0 18px 18px}
.wr-meer-in .wr-kopje:first-child{margin-top:4px}
@media(max-width:900px){.wr-vier{grid-template-columns:1fr 1fr;row-gap:22px}.wr-vnk li{grid-template-columns:1fr;gap:2px}.wr-vnk i{display:none}.wr-vnk s::after{content:" →";color:#bd3a42}}
@media(max-width:900px){.wr-knoop,.wr-knooptekst{grid-column:1/-1}}
.wr-vier{margin-top:38px}.wr-kort .wr-setfotos .wc-dias{aspect-ratio:auto;height:clamp(240px,26vw,380px)}
@media(max-width:600px){.wr-balk{grid-template-columns:1fr 1fr;gap:8px}.wr-balk li{padding:12px 14px}.wr-balk b{font-size:24px}.wr-balk span{font-size:12.5px}.wr-balk li:last-child:nth-child(odd){grid-column:1/-1}}
/* ══ /werk/ ronde 5 (30-09-2026): zeven probleem-cases, anoniem — prefix c7- ═══ */
.c7-hero .display{max-width:22ch}
.c7-hero .lead{max-width:62ch}
.c7-lijn{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px}
.c7-lijn span{padding:8px 16px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:14px}
.c7-lijn i{font-style:normal;color:#bd3a42}
.c7-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.c7-klein{grid-template-columns:repeat(3,minmax(0,1fr))}
.c7-kaart{position:relative;display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2.4vw,32px);border-radius:22px;background:var(--paper);
border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease}
@media(hover:hover) and (pointer:fine){.c7-kaart:hover{transform:translateY(-4px);border-color:color-mix(in srgb,#ff7a59 55%,transparent);
box-shadow:0 26px 50px -34px color-mix(in srgb,#ff7a59 80%,transparent)}}
.c7-kaart small{font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#bd3a42}
.c7-kaart h3{margin:2px 0 0;font-family:var(--disp,inherit);font-weight:500;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em;line-height:1.1}
.c7-klein .c7-kaart h3{font-size:21px}
.c7-k-kort{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
.c7-k-aanpak{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink3)}
.c7-k-aanpak b{color:var(--ink);font-weight:500}
.c7-kaart ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.c7-kaart li{padding:6px 12px;border-radius:999px;background:var(--paper2);font-size:13px}
.c7-lees{margin-top:auto;padding-top:14px;font-size:14.5px;font-weight:500;color:#bd3a42}
.c7-sub{margin:clamp(40px,4.4vw,64px) 0 16px;font-family:var(--disp,inherit);font-weight:500;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em}
.c7-tabel{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper);font-size:15px}
.c7-tabel th{text-align:left;padding:14px 18px;background:var(--paper2);font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.c7-tabel td{padding:14px 18px;border-top:1px solid var(--line)}
.c7-tabel td a{color:var(--ink);font-weight:500;text-underline-offset:3px}
.c7-tabel td:last-child{color:var(--ink3)}
/* detailpagina */
.c7-kruim{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);font-size:13px}
.c7-kruim a{color:var(--ink3);text-decoration:none}.c7-kruim a:hover{color:var(--ink)}
.c7-kruim i{font-style:normal;color:var(--ink3)}.c7-kruim span{color:#bd3a42;font-weight:500}
.c7-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:22px 0 0;font-size:14px;color:var(--ink3)}
.c7-meta b{font-weight:500;color:#bd3a42;letter-spacing:.04em}
.c7-meta i{font-style:normal;opacity:.5}
.c7-titel{max-width:20ch;margin-top:14px}
.c7-tags{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.c7-tags li{padding:8px 16px;border-radius:999px;border:1px solid color-mix(in srgb,#ff7a59 55%,transparent);font-size:14px}
.c7-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(28px,3vw,44px)}
.c7-stats div{padding:20px;border-radius:18px;background:var(--paper2);border:1px solid var(--line)}
.c7-stats b{display:block;font-family:var(--disp,inherit);font-weight:500;font-size:clamp(30px,3.2vw,46px);letter-spacing:-.03em;line-height:1;color:#bd3a42;font-variant-numeric:tabular-nums}
.c7-stats span{display:block;margin-top:8px;font-size:14px;color:var(--ink3)}
.c7-oog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.c7-oog div{padding:18px;border-radius:16px;background:var(--paper);border:1px solid var(--line)}
.c7-oog dt{font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.c7-oog dd{margin:8px 0 0;font-size:15.5px;line-height:1.4;font-weight:500}
.c7-drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.c7-dk{padding:clamp(20px,2.4vw,30px);border-radius:20px;background:var(--paper);border:1px solid var(--line)}
.c7-dk-res{border-color:color-mix(in srgb,#ff7a59 55%,transparent);box-shadow:0 22px 44px -34px color-mix(in srgb,#ff7a59 80%,transparent)}
.c7-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,#ff7a59 16%,var(--paper));color:#bd3a42}
.c7-ic svg{width:22px;height:22px}
.c7-dk h3{margin:18px 0 10px;font-family:var(--disp,inherit);font-weight:500;font-size:22px}
.c7-dk p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink3)}
.c7-dk ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.c7-dk li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.45}
.c7-dk li::before{content:"✓";position:absolute;left:0;top:0;color:#237a4b;font-weight:600}
.c7-nu{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,48px);align-items:center;margin-top:clamp(40px,4.4vw,64px)}
.c7-nu p{margin:0;font-size:17px;line-height:1.6;color:var(--ink3);max-width:46ch}
.c7-betekent{margin-top:clamp(40px,4.4vw,64px);padding:clamp(22px,3vw,40px);border-radius:24px;background:var(--ink);color:var(--paper)}
.c7-betekent .c7-sub{color:var(--paper)}
.c7-betekent p{margin:0;max-width:62ch;font-size:17px;line-height:1.6;color:rgba(255,255,255,.82)}
.c7-knoppen{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.c7-betekent .btn-p{background:#fff!important;color:#15141a!important}
.c7-link{color:#fff;text-decoration:underline;text-underline-offset:3px;font-size:15px}
.c7-anderen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.c7-ander{display:grid;gap:4px;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--paper);color:var(--ink);text-decoration:none;transition:transform .2s ease,border-color .2s ease}
.c7-ander small{font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#bd3a42}
.c7-ander b{font-weight:500;font-size:15.5px}
@media(hover:hover) and (pointer:fine){.c7-ander:hover{transform:translateY(-3px);border-color:var(--ink3)}}
/* schermweergaven in code */
.c7-mock{padding:20px;border-radius:20px;background:var(--paper);border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(20,20,40,.45);font-size:14px}
.c7-mkop{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-weight:500}
.c7-mkop i{width:8px;height:8px;border-radius:50%;background:#2f9d62}
.c7-mkop em{margin-left:auto;font-style:normal;font-size:12.5px;color:#237a4b;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,#2f9d62 14%,var(--paper))}
.c7-zbalk{padding:12px 18px;border-radius:999px;border:1px solid var(--line);background:var(--paper2);margin-bottom:14px}
.c7-zbalk::before{content:"⌕ ";color:var(--ink3)}
.c7-zr{padding:12px 14px;border-radius:12px;display:grid;gap:3px;opacity:.55}
.c7-zr small{font-size:12px;color:#237a4b}.c7-zr b{font-weight:500;color:#1a4fb4}.c7-zr span{font-size:13px;color:var(--ink3)}
.c7-zr-aan{opacity:1;background:color-mix(in srgb,#ff7a59 10%,var(--paper));border:1px solid color-mix(in srgb,#ff7a59 45%,transparent)}
.c7-contact{display:grid;gap:10px}
.c7-kn{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:14px;background:var(--paper2);border:1px solid var(--line)}
.c7-kn b{font-weight:500}.c7-kn em{font-style:normal;font-size:12.5px;color:#237a4b}
.c7-laad{display:flex;align-items:baseline;gap:12px;padding:6px 4px 0}.c7-laad span{color:var(--ink3)}.c7-laad s{color:var(--ink3)}.c7-laad b{font-size:22px;font-weight:500;color:#bd3a42}
.c7-log ol,.c7-mail ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.c7-log li{display:flex;gap:12px;padding:10px 12px;border-radius:10px;background:var(--paper2)}
.c7-log time{font-family:var(--mono,ui-monospace,monospace);font-size:12.5px;color:#bd3a42}
.c7-log .c7-mens{background:var(--ink);color:var(--paper)}.c7-log .c7-mens time{color:#ffab93}
.c7-mail li{display:grid;gap:3px;padding:12px 14px;border-radius:12px;background:var(--paper2)}
.c7-mail li b{font-weight:500}.c7-mail li span{font-size:13px;color:var(--ink3)}
.c7-knop{margin-top:14px;text-align:center;padding:12px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:500}
.c7-route ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.c7-route li{display:grid;justify-items:center;text-align:center;gap:6px;padding:14px 8px;border-radius:14px;background:var(--paper2)}
.c7-route li span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:13px;font-weight:600}
.c7-route li:nth-child(2) span{background:#bd3a42}
.c7-route li b{font-weight:500;font-size:14px}.c7-route li em{font-style:normal;font-size:12px;color:#237a4b}
.c7-richt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.c7-r{aspect-ratio:3/4;border-radius:14px;background:var(--t);display:flex;flex-direction:column;justify-content:flex-end;padding:12px;border:2px solid transparent}
.c7-r b{font-size:20px;font-weight:600;color:#fff;mix-blend-mode:difference}
.c7-r span{font-size:12px;color:#fff;mix-blend-mode:difference}
.c7-gekozen{border-color:#bd3a42;box-shadow:0 0 0 4px color-mix(in srgb,#ff7a59 35%,transparent)}
.c7-richt p{grid-column:1/-1;margin:6px 0 0;font-size:13px;color:#bd3a42;font-weight:500}
.c7-markt{display:grid;gap:12px;justify-items:center}
.c7-bron{padding:10px 20px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:500}
.c7-dom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
.c7-dom div{display:grid;gap:4px;text-align:center;padding:16px 8px;border-radius:14px;background:var(--paper2);border:1px solid var(--line)}
.c7-dom b{font-family:var(--disp,inherit);font-weight:500;font-size:22px;color:#bd3a42}.c7-dom span{font-size:13px;color:var(--ink3)}
.c7-mailsrv{background:color-mix(in srgb,#ff7a59 18%,var(--paper));color:var(--ink)}
@media(max-width:1000px){.c7-klein,.c7-anderen{grid-template-columns:1fr 1fr}.c7-oog,.c7-stats{grid-template-columns:1fr 1fr}.c7-drie{grid-template-columns:1fr}.c7-nu{grid-template-columns:1fr}}
@media(max-width:640px){.c7-raster,.c7-klein,.c7-anderen{grid-template-columns:1fr}.c7-tabel{font-size:13.5px}.c7-tabel th,.c7-tabel td{padding:10px 12px}
.c7-route ol{grid-template-columns:1fr 1fr}.c7-richt{grid-template-columns:1fr 1fr}.c7-tabel td:last-child,.c7-tabel th:last-child{display:none}}
/* ronde 5b (30-09): casekaarten naar Flatline — beeld groot, badge, korte titel, kernzin */
.c7-cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.c7-case{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:var(--paper);border:1px solid var(--line);color:var(--ink);text-decoration:none;
transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.c7-beeld{position:relative;height:clamp(260px,24vw,340px);overflow:hidden;
background:radial-gradient(120% 90% at 20% 0%,color-mix(in srgb,#ff7a59 22%,var(--paper2)),var(--paper2) 60%)}
.c7-case:nth-child(2n) .c7-beeld{background:radial-gradient(120% 90% at 80% 0%,color-mix(in srgb,#bd3a42 16%,var(--paper2)),var(--paper2) 60%)}
.c7-schaal{position:absolute;left:50%;top:28px;width:520px;transform:translateX(-50%) scale(.86);transform-origin:top center;pointer-events:none;
transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.c7-beeld::after{content:"";position:absolute;inset:auto 0 0 0;height:70px;background:linear-gradient(transparent,var(--paper2))}
.c7-tekst{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.4vw,30px)}
.c7-tekst small{font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;letter-spacing:.14em;color:#bd3a42}
.c7-tekst h3{margin:0;font-family:var(--disp,inherit);font-weight:500;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.025em;line-height:1.05}
.c7-tekst p{margin:0;font-size:16px;line-height:1.5;color:var(--ink3);max-width:44ch}
.c7-tekst ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.c7-tekst li{padding:6px 12px;border-radius:999px;border:1px solid var(--line);font-size:13px}
.c7-tekst .c7-lees{margin-top:6px;padding-top:0}
@media(hover:hover) and (pointer:fine){.c7-case:hover{transform:translateY(-5px);box-shadow:0 34px 60px -40px rgba(40,30,60,.45)}
.c7-case:hover .c7-schaal{transform:translateX(-50%) scale(.9) translateY(-8px)}}
.c7-drie-dingen{margin-top:clamp(40px,4.4vw,64px);padding:clamp(22px,3vw,40px);border-radius:24px;background:var(--ink);color:var(--paper)}
.c7-drie-dingen h2{margin:0 0 18px;font-family:var(--disp,inherit);font-weight:500;font-size:clamp(22px,2.2vw,30px);color:var(--paper)}
.c7-drie-dingen ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:d}
.c7-drie-dingen li{counter-increment:d;display:grid;gap:6px;padding-top:14px;border-top:1px solid rgba(255,255,255,.2)}
.c7-drie-dingen li::before{content:"0" counter(d);font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:#ffab93}
.c7-drie-dingen b{font-weight:500;font-size:20px}.c7-drie-dingen span{color:rgba(255,255,255,.75);font-size:15px}
@media(max-width:900px){.c7-cases{grid-template-columns:1fr}.c7-drie-dingen ol{grid-template-columns:1fr}}
@media(max-width:600px){.c7-schaal{width:460px;transform:translateX(-50%) scale(.72)}}
.c7-drie-dingen b{color:var(--paper)!important}
/* ══ /werk/ ronde 7 (30-09-2026): Flatline-opbouw in T&P-uitvoering — prefix c9- (c8- = gedrag) ══
Feedback Lenny 30-09: letters en grond blijven die van de site (Geist, wit), geen Instrument Serif
en geen #f3f0e9; een eigen variant i.p.v. een kopie; een hero. Uit Flatline blijft alleen de
STRUCTUUR: selectie, grote fototegels, naam + één zin, filter. Accent alleen als woord of stip. */
.c8-dfoto{margin:clamp(28px,3vw,44px) 0 0;height:clamp(320px,52vw,640px);overflow:hidden;border-radius:18px}
.c8-dfoto img{width:100%;height:100%;object-fit:cover;display:block;object-position:50% 38%}
.c9-h1{max-width:14ch;font-size:clamp(44px,5.4vw,80px)}
.c9-hero .ph-lbl{margin-bottom:clamp(14px,1.6vw,22px)}
.c9-hgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:center}
/* hero 1 · waaier: drie eigen foto's die openwaaieren */
.c9-waaier{position:relative;height:clamp(340px,36vw,500px)}
.c9-w{position:absolute;top:50%;left:50%;width:52%;aspect-ratio:4/5;border-radius:18px;overflow:hidden;color:#fff;text-decoration:none;
box-shadow:0 30px 60px -30px rgba(15,20,30,.45);transition:transform .7s cubic-bezier(.23,1,.32,1)}
.c9-w img{width:100%;height:100%;object-fit:cover;display:block}
.c9-w span{position:absolute;left:14px;bottom:12px;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
padding:6px 10px;border-radius:999px;background:rgba(15,16,18,.72)}
.c9-w1{transform:translate(-92%,-50%) rotate(-7deg)}
.c9-w2{transform:translate(-8%,-50%) rotate(6deg)}
.c9-w3{transform:translate(-50%,-54%);z-index:2}
@media(hover:hover) and (pointer:fine){
.c9-waaier:hover .c9-w1{transform:translate(-112%,-52%) rotate(-10deg)}
.c9-waaier:hover .c9-w2{transform:translate(12%,-52%) rotate(9deg)}
.c9-waaier:hover .c9-w3{transform:translate(-50%,-58%) scale(1.03)}}
/* hero 2 · filmstrook in een afgeronde bak */
.c9-bak{margin:clamp(34px,4vw,56px) clamp(16px,2.5vw,36px) 0;border-radius:22px;overflow:hidden;background:var(--paper2);padding:18px 0}
.c9-strook{display:flex;gap:14px;width:max-content;animation:c9-loop 60s linear infinite}
.c9-kopie{display:contents}
.c9-bak:hover .c9-strook{animation-play-state:paused}
@keyframes c9-loop{to{transform:translateX(calc(-50% - 7px))}}
.c9-bk{position:relative;flex:none;width:clamp(220px,20vw,300px);aspect-ratio:3/4;border-radius:14px;overflow:hidden;color:#fff;text-decoration:none}
.c9-bk img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.23,1,.32,1)}
.c9-bk::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,12,16,.72))}
.c9-bk>span{position:absolute;left:16px;right:16px;bottom:14px;z-index:1}
.c9-bk small{display:block;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.c9-bk b{display:block;color:#fff;margin-top:6px;font-weight:400;font-size:18px;line-height:1.2;letter-spacing:-.01em}
@media(hover:hover) and (pointer:fine){.c9-bk:hover img{transform:scale(1.05)}}
/* hero 3 · cijfers + uitgelichte case */
.c9-cijf{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.c9-cijf>div{padding:22px 0 20px;border-bottom:1px solid var(--line)}
.c9-cijf>div:nth-child(odd){padding-right:20px;border-right:1px solid var(--line)}
.c9-cijf>div:nth-child(even){padding-left:24px}
.c9-cijf b{display:block;font-weight:300;font-size:clamp(34px,3.6vw,54px);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.c9-cijf span{display:block;margin-top:8px;font-size:var(--fs-ui);color:var(--mut)}
.c9-uit{position:relative;display:block;margin-top:clamp(34px,4vw,56px);height:clamp(300px,34vw,480px);border-radius:22px;overflow:hidden;color:#fff;text-decoration:none}
.c9-uit img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;transition:transform 1s cubic-bezier(.23,1,.32,1)}
.c9-uit::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,12,16,.7),transparent 60%)}
.c9-uit-tk{position:absolute;left:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,36px);z-index:1}
.c9-uit-tk small{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.c9-uit-tk b{display:block;color:#fff;margin-top:8px;font-weight:300;font-size:clamp(26px,3vw,42px);letter-spacing:-.025em}
@media(hover:hover) and (pointer:fine){.c9-uit:hover img{transform:scale(1.03)}}
/* filter: pillen in de huisstijl */
.c9-werk{padding-bottom:clamp(60px,6vw,110px)}
.c9-filter{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);padding-top:clamp(20px,3vw,40px);padding-bottom:clamp(28px,3vw,44px)}
.c9-filter ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.c9-filter button{border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:var(--fs-ui);
padding:9px 16px;border-radius:999px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s ease}
.c9-filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media(hover:hover) and (pointer:fine){.c9-filter button:hover{border-color:var(--ink)}}
.c9-filter button:active{transform:scale(.97)}
.c9-filter button:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
/* gedeelde tegelopbouw: tekst ONDER de foto, in onze letter */
.c9-raster .c8-tegel{display:block;position:relative;color:var(--ink);text-decoration:none}
.c9-raster .c8-tegel[hidden]{display:none}
.c9-foto{position:relative;display:block;overflow:hidden;border-radius:18px;background:var(--paper2)}
.c9-foto img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.23,1,.32,1)}
.c9-onder{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-top:16px}
.c9-t{display:block;min-width:0}
.c9-thema{display:block;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.c9-t b{display:block;margin-top:8px;font-weight:400;font-size:clamp(19px,1.6vw,23px);line-height:1.2;letter-spacing:-.015em}
.c9-t em{display:block;margin-top:6px;font-style:normal;font-size:var(--fs-ui);line-height:1.45;color:var(--mut);max-width:38ch}
.c9-pijl{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
transition:background .3s ease,border-color .3s ease,transform .3s cubic-bezier(.23,1,.32,1)}
.c9-pijl svg{width:17px;height:17px}
@media(hover:hover) and (pointer:fine){
.c9-raster .c8-tegel:hover .c9-foto img{transform:scale(1.045)}
.c9-raster .c8-tegel:hover .c9-pijl{background:var(--ac-vlak);border-color:var(--ac-vlak);color:var(--ac-op);transform:translateX(3px)}}
.c9-raster .c8-tegel:focus-visible{outline:2px solid var(--ac);outline-offset:6px;border-radius:18px}
/* raster A · kolommen (de Flatline-structuur): middelste kolom lager en met parallax */
.c9-r-kolommen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,28px);align-items:start}
.c9-r-kolommen .c8-kol{display:grid;gap:clamp(40px,4vw,60px)}
.c9-r-kolommen .c8-kol2{margin-top:clamp(60px,7vw,110px);transform:translate3d(0,var(--c8y,0px),0)}
.c9-r-kolommen .c9-foto{aspect-ratio:4/5}
.c9-r-kolommen .c8-kol2 .c9-foto{aspect-ratio:4/5.4}
/* raster B · afwisselend groot en klein, thema als stip op de foto */
.c9-r-afwisselend{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(40px,4vw,64px) clamp(18px,2vw,28px)}
.c9-ab{grid-column:span 7}.c9-as{grid-column:span 5}
.c9-ab .c9-foto{aspect-ratio:16/11}.c9-as .c9-foto{aspect-ratio:4/5}
.c9-as{align-self:end}
.c9-over{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border-radius:999px;
background:rgba(255,255,255,.94);color:var(--ink);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase}
.c9-stip{width:8px;height:8px;border-radius:50%;background:var(--ac-vlak)}
.c9-r-afwisselend .c9-thema{display:none}
.c9-lbls{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.c9-lbls small{font-size:13px;padding:5px 10px;border-radius:999px;background:var(--paper2);color:var(--ink)}
/* raster C · met uitkomst: het getal van de case tussen foto en naam */
.c9-r-uitkomst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,4vw,56px) clamp(18px,2vw,28px)}
.c9-r-uitkomst .c9-foto{aspect-ratio:4/3}
.c9-r-uitkomst .c9-u:first-child{grid-column:span 2}.c9-r-uitkomst .c9-u:first-child .c9-foto{aspect-ratio:2.75/1}.c9-r-uitkomst .c9-u:first-child img{object-position:50% 30%}
.c9-getal{display:flex;align-items:baseline;gap:12px;padding:18px 0 14px;border-bottom:1px solid var(--line)}
.c9-getal b{font-weight:300;font-size:clamp(34px,3.2vw,46px);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.c9-getal span{font-size:var(--fs-ui);color:var(--mut)}
/* zwevende filterknop, in de huisstijl */
.c8-zweef{position:fixed;left:clamp(16px,5.3vw,76px);bottom:24px;z-index:40;display:flex;align-items:center;gap:22px;padding:6px 6px 6px 20px;border-radius:999px;
border:1px solid var(--line);background:var(--paper);box-shadow:0 12px 30px -14px rgba(15,20,30,.35);color:var(--ink);text-decoration:none;font-size:var(--fs-ui);
opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.c8-zweef.aan{opacity:1;transform:none;pointer-events:auto}
.c8-zweef i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--paper)}
.c8-zweef svg{width:17px;height:17px}
/* lab-schakelaar (_werk-lab) */
.c9-labbalk{position:fixed;left:50%;top:78px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:5px;padding:6px;border-radius:999px;
background:#16181c;color:#fff;font-size:12.5px;box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
.c9-labbalk b{color:#fff;font-weight:400;opacity:.65;padding:0 4px 0 8px}
.c9-labbalk button{font:inherit;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:none;color:#fff;cursor:pointer}
.c9-labbalk button[aria-pressed="true"]{background:#fff;color:#16181c}
[data-werkhero][hidden],[data-werkraster][hidden]{display:none!important}
@media(max-width:1000px){
.c9-hgrid{grid-template-columns:1fr}
.c9-waaier{height:clamp(300px,70vw,420px)}
.c9-r-kolommen{grid-template-columns:1fr 1fr}.c9-r-kolommen .c8-kol2{margin-top:0;transform:none}
.c9-r-kolommen .c8-kol3{grid-column:1/-1;grid-template-columns:1fr 1fr}
.c9-r-uitkomst{grid-template-columns:1fr 1fr}.c9-r-uitkomst .c9-u:first-child .c9-foto{aspect-ratio:2/1}
.c9-filter{grid-template-columns:1fr}}
@media(max-width:760px){
.c9-r-kolommen,.c9-r-kolommen .c8-kol3,.c9-r-uitkomst{grid-template-columns:1fr}.c9-r-uitkomst .c9-u:first-child{grid-column:auto}.c9-r-uitkomst .c9-u:first-child .c9-foto{aspect-ratio:4/3}
.c9-ab,.c9-as{grid-column:1/-1}.c9-as .c9-foto{aspect-ratio:16/11}
.c9-cijf>div:nth-child(odd){padding-right:12px}.c9-cijf>div:nth-child(even){padding-left:14px}
.c9-uit{height:clamp(260px,80vw,380px)}
.c9-labbalk{top:auto;bottom:88px;flex-wrap:wrap;justify-content:center;width:calc(100% - 32px);border-radius:16px}}
@media(prefers-reduced-motion:reduce){.c9-strook{animation:none}.c9-w,.c9-foto img,.c9-bk img,.c9-uit img{transition:none}.c9-r-kolommen .c8-kol2{transform:none}}
/* ══ /werk/ Flatline-opbouw (30-09-2026 avond) — prefix cf- (gedrag via c8-) ═══════════════════════
Keuze Lenny: "weer de versie van Flatline". Opbouw gemeten op flatlineagency.com/nl/cases:
kolommen 467 px, 20 px tussenruimte, geen hoekstraal, tegels 467x551 / middenkolom 467x623 met parallax,
naam in kapitalen + één zin + rond pijlknopje op de foto. Letters en grond = de site (Geist, wit). */
.cf-kop{padding:clamp(150px,17vw,240px) clamp(16px,5.3vw,76px) clamp(44px,5vw,72px)}
.cf-kop-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:40px;align-items:start}
.cf-titel{margin:0;font-weight:300;font-size:clamp(56px,7vw,112px);line-height:.92;letter-spacing:-.04em;text-transform:uppercase;color:var(--ink)}
.cf-intro{margin:10px 0 0;font-size:var(--fs-ui);line-height:1.5;color:var(--ink)}
.cf-filter{display:grid;grid-template-columns:190px minmax(0,1fr);gap:20px;margin-top:clamp(40px,4vw,60px)}
.cf-filter>span{padding-top:4px;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.cf-filter ul{list-style:none;margin:0;padding:0;columns:2;column-gap:40px;max-width:720px}
.cf-filter li{break-inside:avoid}
.cf-filter button{position:relative;display:inline-flex;align-items:center;border:0;background:none;padding:4px 0 4px 24px;
font:inherit;font-size:var(--fs-ui);color:var(--mut);cursor:pointer;transition:color .2s ease}
.cf-filter button::before{content:"";position:absolute;left:0;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;
background:var(--ac-vlak);transform:scale(0);transition:transform .25s cubic-bezier(.23,1,.32,1)}
.cf-filter button[aria-pressed="true"]{color:var(--ink)}
.cf-filter button[aria-pressed="true"]::before{transform:scale(1)}
@media(hover:hover) and (pointer:fine){.cf-filter button:hover{color:var(--ink)}}
.cf-filter button:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.cf-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start;padding-bottom:clamp(60px,6vw,110px)}
.cf-raster .c8-kol{display:grid;gap:20px}
.cf-raster .c8-kol2{transform:translate3d(0,var(--c8y,0px),0)}
.cf-tegel{position:relative;display:block;overflow:hidden;aspect-ratio:467/551;color:#fff;text-decoration:none;background:#16181c}
.cf-raster .c8-kol2 .cf-tegel{aspect-ratio:467/623}
.cf-tegel[hidden]{display:none}
.cf-tegel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.23,1,.32,1)}
.cf-tegel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.62) 100%)}
.cf-onder{position:absolute;left:24px;right:24px;bottom:24px;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.cf-onder b{display:block;color:#fff;font-size:14.5px;font-weight:500;letter-spacing:.02em}
.cf-onder em{display:block;margin-top:10px;font-style:normal;font-size:var(--fs-ui);line-height:1.35;color:rgba(255,255,255,.92);max-width:34ch}
.cf-onder i{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.55);color:#fff;
transition:background .3s ease,color .3s ease,border-color .3s ease}
.cf-onder svg{width:18px;height:18px}
@media(hover:hover) and (pointer:fine){.cf-tegel:hover img{transform:scale(1.05)}.cf-tegel:hover .cf-onder i{background:#fff;color:#16181c;border-color:#fff}}
.cf-tegel:focus-visible{outline:3px solid var(--ac);outline-offset:3px}
@media(max-width:1000px){.cf-kop-in{grid-template-columns:1fr}.cf-raster{grid-template-columns:1fr 1fr}.cf-raster .c8-kol2{transform:none}
.cf-raster .c8-kol3{grid-column:1/-1;grid-template-columns:1fr 1fr}.cf-raster .c8-kol2 .cf-tegel{aspect-ratio:467/551}}
@media(max-width:760px){.cf-filter{grid-template-columns:1fr}.cf-filter ul{columns:1}.cf-raster{grid-template-columns:1fr;gap:12px}
.cf-raster .c8-kol{gap:12px}.cf-raster .c8-kol3{grid-template-columns:1fr}.cf-onder{left:18px;right:18px;bottom:18px}
.cf-tegel::after{background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.72) 100%)}}
@media(prefers-reduced-motion:reduce){.cf-raster .c8-kol2{transform:none}.cf-tegel img{transition:none}}
html body .cf-titel{font-weight:300}
.cf-tegel::after{background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.74) 100%)}
/* ronde 10 (30-09 laat): 3D-merkteken rechtsboven i.p.v. de tekst (Lenny), sector + pijler als label op elke tegel */
.cf-kop{position:relative}
.cf-kop-in{grid-template-columns:minmax(0,1fr)}
.cf-sub{margin:18px 0 0;font-size:var(--fs-lead);color:var(--mut);max-width:30ch;line-height:1.35}
.cf-merk{position:absolute;right:clamp(16px,4vw,60px);top:clamp(90px,8vw,120px);width:46%;height:clamp(300px,30vw,440px);pointer-events:none;z-index:0}
.cf-kop>*:not(.cf-merk){position:relative;z-index:1}
@media(max-width:900px){.cf-merk{display:none}}
.cf-lbl{position:absolute;left:24px;right:24px;top:22px;z-index:1;display:flex;flex-wrap:wrap;gap:8px}
.cf-lbl span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#16181c;background:rgba(255,255,255,.92);padding:7px 12px;border-radius:999px}
.cf-lbl span+span{background:rgba(22,24,28,.78);color:#fff}
.cf-tegel::before{content:"";position:absolute;inset:0 0 auto 0;height:30%;z-index:0;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent)}
@media(max-width:760px){.cf-lbl{left:18px;right:18px;top:16px}}
.cf-merk{width:52%;height:clamp(360px,38vw,560px);top:clamp(70px,6vw,100px)}
.cf-lbl span+span{background:rgba(22,24,28,.78);color:#fff}
/* ronde 11 (30-09 laat, Perplexity-review): diensttags rustiger, bewijs op de kaart, aantallen bij het filter */
.cf-lbl{gap:6px;align-items:center}
.cf-lbl span+span{background:none;color:rgba(255,255,255,.9);padding:0 2px;font-size:11px;letter-spacing:.06em;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.cf-lbl span+span::before{content:"·";margin-right:6px;opacity:.7}
.cf-bewijs{display:block;margin-top:12px;font-size:12.5px;letter-spacing:.02em;color:#fff;opacity:.85}
.cf-bewijs::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ac-vlak);margin-right:8px;vertical-align:1px}
.cf-filter button small{font-size:.8em;color:var(--mut);margin-left:2px}
.cf-lbl span+span{background:rgba(22,24,28,.58);color:#fff;padding:5px 9px;font-size:10.5px;letter-spacing:.07em;text-shadow:none}
.cf-lbl span+span::before{content:none}
.cf-sub{max-width:34ch}
.cf-sub strong{font-weight:500;color:var(--ink)}
/* stelling (30-09 laat): slotregel en link */
.stel-slot{display:block;margin-top:14px;font-weight:500;color:var(--ink)}
.stel-link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ac-vlak);text-underline-offset:4px;text-decoration-thickness:2px}
/* ══ Pilaar als WISSEL (01-10-2026, keuze Lenny: variant B uit site/_web/) — prefix pw- ══════════════
Foto en tekst om en om over de volle breedte, groot nummer, "je krijgt" als witte kaart over de foto.
⛔ Geen eigen achtergrond: de sectie houdt de gewone grond (de warme lab-grond vond Lenny niets). */
.pw .wrap{display:grid;gap:clamp(70px,8vw,120px)}
.pw-b{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.pw-b.om .pw-foto{order:2}
.pw-foto{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/3.2;background:var(--paper2)}
.pw-foto img{width:100%;height:100%;object-fit:cover;display:block}
.pw-over{position:absolute;left:22px;right:22px;bottom:22px;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;padding:16px 18px;
border-radius:18px;background:rgba(255,255,255,.95);color:#16181c;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.pw-over small{grid-column:1/-1;font:11px/1 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#bd3a42}
.pw-over span{display:flex;gap:8px;align-items:center;font-size:14px;line-height:1.3}.pw-over svg{flex:none;color:#bd3a42}
.pw-nr{display:block;font-size:clamp(70px,8vw,120px);font-weight:200;letter-spacing:-.06em;line-height:.8;color:#e0694c}
.pw-lbl{display:block;margin-top:10px;font:12px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.pw-t h2{margin:14px 0;font-size:clamp(28px,2.8vw,44px);letter-spacing:-.03em;font-weight:500;line-height:1.1}
.pw-t p{color:var(--mut);font-size:17px;line-height:1.55;max-width:52ch}
.pw-bew{border-left:3px solid var(--ac-vlak);padding-left:14px;font-size:15px!important}
.pw-a{font-size:15px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--ac-vlak);text-decoration-thickness:2px;text-underline-offset:4px}
.ph.ph-met-merk .ph-merk{left:auto;right:0;width:34%}
@media(max-width:900px){.pw-b{grid-template-columns:1fr}.pw-b.om .pw-foto{order:0}.pw-over{grid-template-columns:1fr}}
/* 01-10-2026, Lenny (n.a.v. Codex-review + collega): de vervaging van de inkleurzin eruit — verkooptekst moet meteen leesbaar zijn.
De woorden kleuren nog wel mee met de scroll (grijs → zwart), maar zonder blur, verschuiving of doorzichtigheid. */
.inkleur w{filter:none!important;transform:none!important;opacity:1!important}