/* =====================================================================
   Stijlbesluiten uit het overleg van Tim, Nathalie en Jorick (28-10), doorgevoerd 02-11: de lichte basis,
   de cursieve accentwoorden en de compactere werkwijze. Hieronder eerst de lichte basis.
   Navy alleen nog in de footer en in een enkel blok binnen een lichte sectie (het bord bij
   "zo werkt het", de vergelijkingskaart, de werkverdeling). Laadt op elke pagina na de bundel,
   zodat één set overrides geldt voor de componenten die per bundel gekopieerd zijn.
   body.zl staat altijd aan (functions.php); de .zl-prefix geeft de overrides voorrang.
   Limoen haalt op licht geen contrast als tekstkleur: cursief en accenten worden daar navy.
   Begonnen als proef "zeer licht" op de homepage en /marketing/meta-ads/ (28-10); de regels voor
   de homepage staan in home.css.
   ===================================================================== */

/* ===== Hero van de dienstpagina's (#sp-hero) ===== */
.zl #sp-hero { background: var(--light); color: var(--ink-dark); }
.zl #sp-hero .mark { color: rgba(10,29,41,.035); }
.zl #sp-hero .crumb, .zl #sp-hero .lead, .zl #sp-hero .trust > span { color: var(--soft-dark); }
.zl #sp-hero .crumb a:hover, .zl #sp-hero .lead b, .zl #sp-hero .trust b { color: var(--ink-dark); }
.zl #sp-hero h1 em { color: var(--navy); }
.zl #sp-hero .acts .ghost { border-color: var(--line-light); }
.zl #sp-hero .trust > span { background: #fff; border: 1px solid var(--line-light); }
.zl #sp-hero .frame { box-shadow: 0 calc(40 * var(--u)) calc(100 * var(--u)) rgba(10,29,41,.14); }

/* ===== "Wat we doen" met tegels (#wat-we-doen) ===== */
.zl #wat-we-doen { background: var(--light); color: var(--ink-dark); border-top: 1px solid var(--line-light); }
.zl #wat-we-doen .h em { color: var(--navy); }
.zl #wat-we-doen .intro { color: var(--soft-dark); }
.zl #wat-we-doen .lbl { color: var(--soft-dark); }
.zl .tegel { background: #fff; border-color: var(--line-light); color: var(--ink-dark); }
.zl .tegel .vlak { background: linear-gradient(180deg, #e9edef, #fff 80%); }
.zl .tegel .vlak::after { background: linear-gradient(rgba(255,255,255,0), #fff); }
.zl .tegel .wg { box-shadow: 0 calc(-6 * var(--u)) calc(30 * var(--u)) rgba(10,29,41,.1); }
.zl .tegel .tekst { border-top-color: var(--line-light); }
.zl .tegel .tekst .n { display: inline-block; padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--lime); color: var(--navy); }
.zl .tegel .tekst p { color: var(--soft-dark); }
.zl #wat-we-doen [data-tips] p a, .zl [data-tips] .tegel p a { color: var(--ink-dark); text-decoration-color: rgba(10,29,41,.35); }

/* ===== Cases op de subpagina's (#cases.sp; de homepage heeft een eigen #cases) ===== */
.zl #cases.sp { background: var(--light); color: var(--ink-dark); border-top: 1px solid var(--line-light); }
.zl #cases.sp .h em { color: var(--navy); }
.zl #cases.sp .card { color: var(--ink); }
.zl #cases.sp .voice { background: #fff; border: 1px solid var(--line-light); color: var(--ink-dark); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.zl #cases.sp .voice .who { color: var(--soft-dark); }
.zl #cases.sp .voice .who b { color: var(--ink-dark); }
.zl #cases.sp .voice blockquote em { color: var(--navy); }
/* Review: dezelfde opbouw als op de pijlerpagina's (#ap-cases in aanpak.css): het citaat links, foto, naam en
   functie samen rechts. De score (4,9 · 33 Google-reviews) is eruit (Tim 03-11, A6). Overschrijft de
   driekolomsopbouw met score die per bundel gekopieerd is. */
.zl #cases.sp .voice { grid-template-columns: 1fr auto; gap: calc(40 * var(--u)); padding: calc(30 * var(--u)) calc(34 * var(--u)); }
.zl #cases.sp .voice .who { display: flex; align-items: center; gap: calc(16 * var(--u)); padding-left: calc(36 * var(--u)); border-left: 1px solid var(--line-light); text-align: left; white-space: nowrap; }
.zl #cases.sp .voice .av { width: calc(64 * var(--u)); height: calc(64 * var(--u)); flex: none; border-radius: 50%; background: #d9d4cc center / cover no-repeat; }
@media (max-width: 860px) {
  .zl #cases.sp .voice { grid-template-columns: 1fr; gap: calc(20 * var(--u)); }
  .zl #cases.sp .voice .who { padding-left: 0; border-left: 0; white-space: normal; }
}

/* ===== Vergelijking (#sp-vs): de navy kaart blijft, de hoofddoelen worden limoen ===== */
.zl #sp-vs .goal.key { background: var(--lime); color: var(--navy); }
.zl #sp-vs .goal.key .n, .zl #sp-vs .goal.key p { color: rgba(10,29,41,.66); }
.zl #sp-vs .goal.key b::after { color: var(--navy); }

/* ===== Afweging en werkwijze: lijnen in plaats van vlakken (overleg Tim en Nathalie 22-10) ===== */
.zl #afweging .build { background: #fff; color: var(--ink-dark); border: 1px solid var(--line-light); box-shadow: none; padding: 0 calc(30 * var(--u)); gap: 0; }
.zl #afweging .build .part { background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--line-light); padding: calc(28 * var(--u)) 0; }
.zl #afweging .build .part:last-child { border-bottom: 0; }
.zl #afweging .build .part p { color: var(--soft-dark); }
/* Een actieve stap krijgt een navy lijn in plaats van een navy vlak */
.zl #werkwijze .step.on { background: #fff; color: var(--ink-dark); border-color: var(--navy); }
.zl #werkwijze .step.on .n, .zl #werkwijze .step.on p { color: var(--soft-dark); }

/* ===== SEO-tekstsecties (parts/seo-generiek.php): afwisselend wit en lichtgrijs ===== */
.zl .sp-tekst.wit { background: #fff; }
.zl .sp-tekst.wit .tile { background: var(--light); }

/* ===== Afsluiters (#sp-door, #ap-door): limoen kaart op licht, net als de gedeelde afsluiter (#aanvragen) ===== */
.zl #sp-door, .zl #ap-door { background: var(--light); color: var(--ink-dark); border: 0; padding: calc(150 * var(--u)) calc(var(--rand) + 64 * var(--u)); }
.zl #sp-door::before, .zl #ap-door::before { content: ""; position: absolute; z-index: 0; top: calc(40 * var(--u)); bottom: calc(40 * var(--u)); left: var(--rand); right: var(--rand); background: var(--lime); border-radius: calc(var(--r) * 1.6); }
.zl #sp-door .mark, .zl #ap-door > .mark { display: none; }
.zl #sp-door .h em, .zl #ap-door .h em { color: var(--navy); }
.zl #sp-door p, .zl #ap-door p { color: rgba(10,29,41,.74); }
.zl #sp-door .lbl, .zl #ap-door .lbl { color: rgba(10,29,41,.66); }
.zl #sp-door .lbl i, .zl #ap-door .lbl i { background: var(--navy); }
.zl #sp-door .pill, .zl #ap-door .pill { background: var(--navy); color: #fff; }
.zl #sp-door .pill .arr, .zl #ap-door .pill .arr { background: var(--lime); color: var(--navy); }
.zl #sp-door .acts .ghost, .zl #ap-door .acts .ghost { border-bottom-color: rgba(10,29,41,.3); }
@media (max-width: 960px) { .zl #sp-door, .zl #ap-door { padding: calc(110 * var(--u)) calc(var(--rand) + 24 * var(--u)); } }
/* Onder de kaart evenveel lucht als bij de gedeelde afsluiter, anders zit hij tegen de footer aan (Tim, 03-11-2026) */
@media (min-width: 961px) { .zl #sp-door, .zl #ap-door { padding-bottom: calc(230 * var(--u)); } .zl #sp-door::before, .zl #ap-door::before { bottom: calc(120 * var(--u)); } }

/* ===== Labels: op licht de donkere tint (de navy kaarten binnen een sectie hebben hun eigen kleur) ===== */
.zl .sp .lbl { color: var(--soft-dark); }

/* =====================================================================
   Tokens omdraaien. Veel componenten kleuren hun tekst en lijnen met --ink, --soft en --line
   (licht op navy). In een sectie die licht is geworden zetten we die tokens op de donkere tint;
   in de beelden en navy kaarten daarbinnen zetten we ze terug.
   ===================================================================== */
.zl :is(#ap-intro, #ap-hero, #pijlers, #ap-wat, #ap-cycle, #ap-cases) {
  --ink: #0a1d29; --soft: rgba(10,29,41,.64); --line: rgba(10,29,41,.12);
  background: var(--light); color: var(--ink-dark);
}
.zl :is(#ap-hero .vis, #ap-intro .bal, #ap-cases .card) {
  --ink: #f4f2ee; --soft: rgba(244,242,238,.66); --line: rgba(244,242,238,.2);
  color: var(--ink);
}
/* Opeenvolgende lichte secties: een dunne lijn ertussen */
.zl :is(#pijlers, #ap-wat, #ap-cycle, #ap-cases) { border-top: 1px solid var(--line-light); }
.zl :is(#ap-intro, #ap-hero) > .mark { color: rgba(10,29,41,.035); }

/* Aanpak: de balans als navy kaart (het incidentele donkere blok) */
.zl #ap-intro .bal { background: var(--navy); border-color: transparent; box-shadow: 0 calc(40 * var(--u)) calc(100 * var(--u)) rgba(10,29,41,.18); }

/* Drie pijlers: witte kaarten */
.zl #pijlers .pc { background: #fff; border: 1px solid var(--line-light); }
.zl #pijlers .pc:hover { background: #fff; border-color: rgba(10,29,41,.3); box-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(10,29,41,.08); }
.zl #pijlers .pc .sg small { color: var(--ink-dark); }

/* Pijlerpagina's: expertiserijen */
.zl #ap-wat .row:hover h3 { color: var(--ink-dark); }
.zl #ap-wat .row::before { background: linear-gradient(90deg, rgba(200,245,96,.28), rgba(200,245,96,0) 70%); }

/* Groeicyclus */
.zl #ap-cycle .add { background: #fff; border: 1px solid var(--line-light); backdrop-filter: none; -webkit-backdrop-filter: none; }
.zl #ap-cycle .add li { background: var(--light); }
.zl #ap-cycle .ring > .pt, .zl #ap-cycle .node .d { background: var(--light); }
.zl #ap-cycle .core { background: radial-gradient(circle, rgba(200,245,96,.35), transparent 70%); }

/* Cases op de pijlerpagina's: de reviewkaart wit */
.zl #ap-cases .voice { background: #fff; border: 1px solid var(--line-light); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.zl #ap-cases .voice blockquote em { color: var(--navy); }
.zl #ap-cases .voice .who { border-left-color: var(--line-light); }

/* ===== Overige secties die navy waren: dezelfde omdraaiing van de tokens ===== */
.zl :is(#sp-hero, #nf-hero, #cd-nums, #cd-aanpak, #cd-stem, #ct-hero, #wat-we-bekijken, #groeiscan-aanvragen, #ins-hero, #art-news, #ab-hero, #ab-prin, #sp-krijgt, #open-sollicitatie, #sp-eigen, #sp-meten, #sp-dag, #solliciteren) {
  --ink: #0a1d29; --soft: rgba(10,29,41,.64); --line: rgba(10,29,41,.12);
  background-color: var(--light); color: var(--ink-dark);
}
/* Beelden en zwevende kaartjes op een foto houden de lichte tekst */
.zl :is(#sp-hero, #ab-hero, #ct-hero, #ins-hero) :is(.vis, .frame, .fc) {
  --ink: #f4f2ee; --soft: rgba(244,242,238,.66); --line: rgba(244,242,238,.2);
}
.zl :is(#cd-nums, #cd-aanpak, #cd-stem, #wat-we-bekijken, #ab-prin, #sp-krijgt, #sp-eigen, #sp-meten, #sp-dag) { border-top: 1px solid var(--line-light); }
.zl :is(#nf-hero, #ct-hero, #ins-hero, #ab-hero) h1 em,
.zl :is(#cd-aanpak, #wat-we-bekijken, #groeiscan-aanvragen, #art-news, #ab-prin, #sp-krijgt, #open-sollicitatie, #sp-eigen, #sp-meten, #sp-dag, #solliciteren) .h em,
.zl #sp-hero .sub em, .zl #cd-stem blockquote em, .zl #sp-meten .quote em, .zl #ab-prin .r h3 em, .zl #cases.sp .h em { color: var(--navy); }
.zl :is(#nf-hero, #ct-hero, #ins-hero, #ab-hero, #groeiscan-aanvragen, #open-sollicitatie, #solliciteren) > .mark { color: rgba(10,29,41,.035); }
/* De casehero blijft een foto of video over de volle breedte met lichte tekst: dat is beeld, geen navy vlak */
.zl #cd-nums .n small { color: var(--soft-dark); }
/* Limoen als tekstkleur haalt op licht geen contrast: navy */
.zl #wat-we-bekijken .p .q { color: var(--navy); }
.zl :is(#groeiscan-aanvragen, #open-sollicitatie, #solliciteren, #ct-hero) .flow b { color: var(--navy); }
.zl :is(#groeiscan-aanvragen, #open-sollicitatie, #solliciteren) .drop i { color: var(--navy); }

/* Vacatures: wat je krijgt als witte tegels; fototegels houden lichte tekst */
.zl #sp-krijgt .b { background-color: #fff; border-color: var(--line-light); }
.zl #sp-krijgt .b:hover { background-color: #fff; box-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(10,29,41,.08); }
.zl #sp-krijgt .b.money { background-color: var(--lime); }
.zl #sp-krijgt :is(.b.photo, .b.pic) { --ink: #f4f2ee; --soft: rgba(244,242,238,.66); --line: rgba(244,242,238,.2); background-color: #0d2230; color: var(--ink); }
.zl #sp-krijgt .b .gear li { background: var(--light); }
.zl #sp-krijgt .b.ai .big em { color: var(--navy); }
/* Vacature: een ochtend in de rol */
.zl #sp-dag .mo .t { background: #fff; }
.zl #sp-dag .mo .who.you { color: var(--navy); }
/* Insights: zoekveld als wit veld */
.zl #ins-hero .find { background: #fff; border: 1px solid var(--line-light); backdrop-filter: none; -webkit-backdrop-filter: none; }
.zl #ins-hero .find:focus-within { border-color: var(--navy); }
/* AI automatisering: wat we zelf draaien. Witte kaarten, het log als navy terminal */
.zl #sp-eigen .card, .zl #sp-eigen .card:hover { background: #fff; border-color: var(--line-light); }
.zl #sp-eigen .card .when { color: var(--soft-dark); }
.zl #sp-eigen .log { --ink: #f4f2ee; --soft: rgba(244,242,238,.66); background: var(--navy); color: var(--soft); }
/* Lead nurturing: meten. Onze kolom als limoen kaart, de quote als witte kaart */
.zl #sp-meten .col { background: #fff; border-color: var(--line-light); }
.zl #sp-meten .col.ons { --line: rgba(10,29,41,.16); background: var(--lime); border-color: transparent; }
.zl #sp-meten .col.ons small { color: rgba(10,29,41,.66); }
.zl #sp-meten .col.ons li span { color: rgba(10,29,41,.7); }
.zl #sp-meten .quote { background: #fff; border: 1px solid var(--line-light); backdrop-filter: none; -webkit-backdrop-filter: none; }
.zl #sp-krijgt .b.ai { background: var(--lime); border-color: transparent; }
.zl #sp-krijgt .b.ai :is(.k, p:not(.big)) { color: rgba(10,29,41,.7); }
.zl #sp-krijgt .b.ai .big { color: var(--navy); }
/* 404: de tweede helft van het beeldmerk was wit; op licht navy */
.zl #nf-hero .half.b { color: var(--navy); }
.zl #nf-hero .play.ok .half { color: var(--lime); }

/* =====================================================================
   Cursieve accentwoorden (besluit overleg 28-10: middenweg tussen overal en schaars; doorgevoerd 02-11)
   Per pagina twee of drie keer: de kop in de hero, één sectie halverwege (klasse .accent in het template)
   en de afsluiter. Elders wordt het schreefwoord gewoon de koptekst: geen cursief, geen eigen kleur.
   Bij cases, reviews en quotes dus ook niet. Het footerstatement ("waar je groei op draait") blijft wel cursief (Tim 02-11). Lopende tekst valt erbuiten: alleen koppen en quote-elementen.
   ===================================================================== */
.zl :is(h1, h2, h3, blockquote, .q, .sub, .ft, .big, .pull, .quote, p.t) em:not(:is(#hero, #sp-hero, #ap-hero, #ap-intro, #ab-hero, #ct-hero, #ins-hero, #cd-hero, #nf-hero) h1 em):not(:is(#sp-door, #ap-door, #aanvragen, #groeiscan-aanvragen, #open-sollicitatie, #solliciteren, #art-news, #art-more) h2 em):not(.accent :is(h2, .msg) em) {
  font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; color: inherit;
}

/* =====================================================================
   Werkwijze met zes stappen compacter (overleg 28-10: het overzicht moet op desktop in één keer in beeld).
   Was ca. 810 px inhoud (kop, 64 px marge, twee rijen kaarten van min. 250 px); nu ca. 670 px, zodat kop en
   alle zes stappen samen onder de navigatie passen op een scherm van 900 px hoog.
   ===================================================================== */
@media (min-width: 601px) {
  .zl :is(#werkwijze, #ap-aanpak, #ap-onboarding) .sec-top { margin-bottom: calc(44 * var(--u)); }
  .zl :is(#werkwijze, #ap-aanpak, #ap-onboarding) .step { min-height: calc(190 * var(--u)); padding: calc(24 * var(--u)); }
  .zl :is(#werkwijze, #ap-aanpak, #ap-onboarding) .step h3 { margin-top: calc(36 * var(--u)); }
}

/* =====================================================================
   "Wat we doen": de zes tegels compacter (overleg 28-10: niet meer in één overzicht; Tim koos 02-11 deze variant).
   Mockup 270 → 165 px (iets verkleind), tekst strakker. Sectie van ca. 1140 naar ca. 860 px inhoud: op een groot
   scherm alle zes in beeld, op een laptop valt de onderste rij deels eronder.
   03-11 (feedback Tim): op 165 px viel bij veel tegels juist het belangrijke deel buiten beeld (bij ChatGPT Ads de
   advertentie zelf). Beeldvlak naar 225 px, mockup iets kleiner (.82) en de witte uitloop korter (30 px): op alle
   13 dienstpagina's staat de kern van elke mockup nu in beeld. Finetunen per mockup kan later.
   ===================================================================== */
@media (min-width: 1101px) {
  .zl #wat-we-doen .sec-top { margin-bottom: calc(40 * var(--u)); }
  .zl #wat-we-doen .tegels { gap: calc(14 * var(--u)); }
  .zl #wat-we-doen .tegel .vlak { height: calc(225 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)) 0; }
  .zl #wat-we-doen .tegel .vlak::after { height: calc(30 * var(--u)); }
  .zl #wat-we-doen .tegel .vlak > .wg { transform: scale(.82); transform-origin: 50% 0; }
  /* Belscript (leadopvolging): drie stappen passen niet; de openingszin valt weg, zodat de afspraak in beeld staat */
  .zl #wat-we-doen .wg-bel + .wg-stap.klaar { display: none; }
  .zl #wat-we-doen .tegel .tekst { padding: calc(16 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u)); }
  .zl #wat-we-doen .tegel .tekst h3 { font-size: calc(21 * var(--u)); }
  .zl #wat-we-doen .tegel .tekst p { margin-top: calc(6 * var(--u)); font-size: calc(14.5 * var(--u)); line-height: 1.45; }
}

/* =====================================================================
   Contrastfouten uit de licht-omzetting (meting 02-11, desktop en mobiel). Tokens die voor navy
   bedoeld waren (--soft, --line, limoen) stonden hier nog op een licht of wit vlak, of een donkere
   tint kwam in een navy blok terecht.
   ===================================================================== */
/* Intro bij de cases (SEO- en lokale pagina's, ai-gespreksanalyse, business/tracking) */
.zl #cases.sp .intro { color: var(--soft-dark); }
/* Prijskaart in #afweging is wit: opties, pillen en het tijdlabel in de donkere tint */
.zl #afweging .build .plus { color: var(--soft-dark); }
/* Opmerking onder de kaart (Tim 03-11): ruimte tot de onderrand, en een omlijnd grijs icoon zodat hij niet op de limoen vinkjes lijkt */
.zl #afweging .build .plus { align-items: flex-start; gap: calc(14 * var(--u)); padding: calc(22 * var(--u)) 0 calc(30 * var(--u)); line-height: 1.5; }
.zl #afweging .build .plus i { width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-top: calc(1 * var(--u)); background: none; color: var(--soft-dark); box-shadow: inset 0 0 0 1.5px currentColor; font-size: calc(12 * var(--u)); font-weight: 600; }
.zl #afweging .build .part li { background: var(--light); color: var(--soft-dark); }
.zl #afweging .build .part .when { color: var(--navy); }
/* Labels in een navy blok houden de lichte tint (de balans op /aanpak/, de delen van de privacyverklaring) */
@media screen { .zl :is(#ap-intro .bal, .prose .part) .lbl { color: var(--soft); } }
/* Case-tijdlijn: de nummers waren navy op navy tot de stap actief werd */
.zl #cd-aanpak ol > li:not(.on) .dot { background: #fff; border-color: var(--line-light); color: var(--soft-dark); }
.zl #cd-aanpak ol > li ul li { background: #fff; }
/* "Wat we doen" als rijen (online-marketing-bureau-den-haag): de rijen hadden nog de lichte tekst */
.zl #wat-we-doen .rows { --ink: #0a1d29; --soft: rgba(10,29,41,.64); --line: rgba(10,29,41,.12); }
.zl #wat-we-doen .row:hover h3 { color: var(--ink-dark); }
.zl #wat-we-doen .row::before { background: linear-gradient(90deg, rgba(200,245,96,.28), rgba(200,245,96,0) 70%); }
/* Inhoudsopgave van de juridische pagina's: de nummers haalden met de extra transparantie geen 3:1 */
.zl .lg-body .toc a .n { opacity: 1; }
/* Groeicyclus op /aanpak/: de kleine ritmelabels ("wekelijks") hadden nog de extra transparantie van navy */
.zl #ap-cycle .node small { opacity: 1; }

/* =====================================================================
   Mobiel (meting op 390 en 360 px, 02-11). Alleen onder 760 px of smaller; desktop blijft gelijk.
   De sectiepadding zelf staat in base.css (--sy-t en --sy-b).
   ===================================================================== */
@media (max-width: 760px) {
  /* Geen horizontale overflow: rasters van één kolom niet laten oprekken door een lang woord of een nowrap-label */
  .zl :is(#afweging, .sp-tekst, #sp-faq, #ap-faq, #sp-why) { grid-template-columns: minmax(0, 1fr); }
  .zl .sec-top > div, .zl :is(#afweging, .sp-tekst) > * { min-width: 0; }
  .zl .sp-tekst .tile { grid-template-columns: calc(52 * var(--u)) minmax(0, 1fr); }
  .zl #afweging .part .top { flex-wrap: wrap; }
  .zl #afweging .part .when { white-space: normal; }
  /* Lange samengestelde woorden in koppen ("Afstudeeropdrachten", "Zoekwoordenonderzoeken"): afbreken met
     een koppelteken waar de browser Nederlands kent (html lang="nl-NL"), anders breken waar het moet */
  .zl :is(h1, h2, h3, .h) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 14 6 6; overflow-wrap: break-word; }

  /* Formuliervelden minstens 16 px, anders zoomt iOS in bij het aantikken. De paginastijlen zetten de velden
     met een id-selector (#aanvragen .field, #ct-hero .field, #footer .pill input), vandaar !important. */
  .zl :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"], [type="file"]), textarea, select) { font-size: 16px !important; }
  .zl .dsg-form .gfield_label, .zl .dsg-form legend.gfield_label { font-size: calc(15 * var(--u)); }
  .zl .dsg-form .gfield_description { font-size: calc(14.5 * var(--u)); }

  /* Afsluiters: minder lucht rond de limoen kaart */
  .zl #aanvragen { padding-top: calc(96 * var(--u)); padding-bottom: calc(120 * var(--u)); }
  .zl #aanvragen::before { top: calc(40 * var(--u)); bottom: calc(64 * var(--u)); }
  .zl :is(#sp-door, #ap-door) { padding-top: calc(88 * var(--u)); padding-bottom: calc(88 * var(--u)); }
  .zl :is(#sp-door, #ap-door)::before { top: calc(32 * var(--u)); bottom: calc(32 * var(--u)); }
  /* SEO-tekstsecties: vlakken met een eigen achtergrond, dus boven en onder gelijk */
  .zl .sp-tekst { padding-top: calc(56 * var(--u)); padding-bottom: calc(52 * var(--u)); gap: calc(28 * var(--u)); }

  /* Stap- en bentokaarten compacter: geen lege ruimte tussen nummer en titel */
  .zl :is(#werkwijze, #ap-aanpak, #ap-onboarding) .step { min-height: 0; padding: calc(22 * var(--u)); }
  .zl :is(#werkwijze, #ap-aanpak, #ap-onboarding) .step h3 { margin-top: calc(18 * var(--u)); }
  .zl :is(#werkwijze, #ap-aanpak, #ap-onboarding) .sec-top { margin-bottom: calc(40 * var(--u)); }
  .zl #sp-krijgt .bento { grid-auto-rows: auto; }
  .zl #sp-krijgt .b { justify-content: flex-start; }
  .zl #sp-krijgt :is(.b.photo, .b.pic) { min-height: calc(240 * var(--u)); justify-content: flex-end; }

  /* Klikdoelen minstens 40 px hoog. Een onzichtbaar vlak (::before) rond de link, zodat tekst, onderlijn
     en afstanden precies blijven zoals ze zijn. */
  .zl :is(#footer .ul a, #footer .bottom a, .crumb a, .acts a.ghost, .sp a.ghost, .sec-top > a.link, #inzichten a.all, #art-more .top > a, #cd-next .top > a) { position: relative; }
  .zl :is(#footer .ul a, #footer .bottom a, .crumb a, .acts a.ghost, .sp a.ghost, .sec-top > a.link, #inzichten a.all, #art-more .top > a, #cd-next .top > a)::before { content: ""; position: absolute; left: calc(-6 * var(--u)); right: calc(-6 * var(--u)); top: 50%; height: 44px; transform: translateY(-50%); }
  /* Footermenu: de links staan 32 px uit elkaar; iets meer lucht zodat elk raakvlak 40 px haalt */
  .zl #footer .ul { gap: calc(22 * var(--u)); }
  #site .mob details .all { padding: calc(12 * var(--u)) 0; margin: calc(-6 * var(--u)) 0 calc(4 * var(--u)); }

  /* Kleine tekst: captions en labels minstens 12,5 px, kaartteksten 15 px */
  .zl .cmp .cap, .zl .sp-tekst .stick .lbl { font-size: calc(12.5 * var(--u)); }
  .zl :is(#sp-vs .goal p, #zo-werkt-het .node p, #werkverdeling .mode p, #werkverdeling .cell, #sp-krijgt .b p:not(.big), #werken-met-ai .st p, #team .p p, #sp-cases .chg p, #afweging .build .plus) { font-size: calc(15 * var(--u)); }

  /* Uitgelichte insight: "Lees verder →" op één regel */
  .zl #ins-list .feat .ft .read { flex: none; white-space: nowrap; }

  /* Lange koppen iets kleiner: de insightkop (met vaste regeleinden) en de vragen in de FAQ */
  .zl #art-head h1 { font-size: calc(36 * var(--u)); }
  .zl #art-head h1 br { display: none; }
  .zl :is(#sp-faq, #ap-faq) .qa button { font-size: calc(17 * var(--u)); line-height: 1.3; gap: calc(14 * var(--u)); }
}
/* Mobiel menu open: de pagina eronder scrolt niet mee (base.js zet html.menu-open) */
@media (max-width: 760px) { html.menu-open, html.menu-open body { overflow: hidden; } }
/* Label boven een sectiekop: overal dezelfde afstand, 18u, zoals bij .sec-h (Tim, 03-11-2026). Bij de FAQ
 * stond de kop er direct tegenaan, en de afsluiter, contact, insights en de vacatures weken een paar pixels af.
 * Het :is() met de id's geeft deze regel genoeg gewicht boven de regels per sectie (#aanvragen .h e.d.).
 * Kaartlabels met een h3 eronder (sp-vs) vallen er bewust buiten. */
:is(#aanvragen, #groeiscan-aanvragen, #ct-else, section, div) .lbl + :is(h1, h2) { margin-top: calc(18 * var(--u)); }

/* =====================================================================
   Sectieritme (feedback Tim 03-11 op /marketing/seo/, sitebreed doorgevoerd). Alle secties hebben dezelfde lichte
   achtergrond, dus de ruimte tussen twee secties is de onderpadding van de ene plus de bovenpadding van de volgende.
   Dat liep uiteen van 140 tot 265 px, met een lijn bij de ene grens en niet bij de andere. Het ritme nu:
   - tussen twee inhoudssecties altijd 130 boven en 130 onder (samen 260), met in het midden een dunne lijn;
   - grenst een sectie aan een witte (.sp-tekst.wit), dan is de kleurwissel de scheiding en komt er geen lijn bij;
   - de hero, de klantenstrook, het regioblok onder de FAQ (#sp-regio: een aanhangsel met een eigen lijn), de afsluiters
     (#aanvragen, #sp-door, #ap-door) en de homepage houden hun eigen maat.
   Alleen desktop en tablet liggend (vanaf 961 px); mobiel heeft zijn eigen, kleinere ritme (--sy-t, --sy-b).
   Daarnaast: main kreeg geen eigen achtergrond, dus waar een sectie op een halve pixel eindigde, scheen de navy body
   als een donker lijntje door (o.a. boven "Afweging" en boven de afsluiter). Main is nu licht; de afsluiter
   (#aanvragen, buiten main) dekt de naad erboven af.
   ===================================================================== */
.zl #inhoud { background: var(--light); }
.zl #inhoud + #aanvragen { box-shadow: 0 calc(-2 * var(--u)) 0 var(--light); } /* de afsluiter staat buiten main: zelfde naad */
@media (min-width: 961px) {
  .zl :is(#sp-why, #sp-herken, #signalen, #wat-we-doen, #sp-vs, #zo-werkt-het, #werkverdeling, #werkwijze, #cases.sp, #sp-meten, #sp-eigen, #afweging, #sp-faq, .sp-tekst, #sp-krijg, #wat-we-bekijken, #open-vacatures, #sp-krijgt, #sp-dag, #ap-balans, #pijlers, #ap-onboarding, #ap-cycle, #ap-niet, #ap-faq, #ap-wat, #ap-aanpak, #ap-cases, #ap-verder, #ab-story, #ab-prin, #werken-met-ai, #team, #cd-start, #cd-aanpak, #cd-vn, #cd-stem, #cd-next, #groeiscan-aanvragen, #open-sollicitatie)
  + :is(#sp-why, #sp-herken, #signalen, #wat-we-doen, #sp-vs, #zo-werkt-het, #werkverdeling, #werkwijze, #cases.sp, #sp-meten, #sp-eigen, #afweging, #sp-faq, .sp-tekst, #sp-krijg, #wat-we-bekijken, #open-vacatures, #sp-krijgt, #sp-dag, #ap-balans, #pijlers, #ap-onboarding, #ap-cycle, #ap-niet, #ap-faq, #ap-wat, #ap-aanpak, #ap-cases, #ap-verder, #ab-story, #ab-prin, #werken-met-ai, #team, #cd-start, #cd-aanpak, #cd-vn, #cd-stem, #cd-next, #groeiscan-aanvragen, #open-sollicitatie) {
    padding-top: calc(130 * var(--u));
  }
  .zl :is(#sp-why, #sp-herken, #signalen, #wat-we-doen, #sp-vs, #zo-werkt-het, #werkverdeling, #werkwijze, #cases.sp, #sp-meten, #sp-eigen, #afweging, #sp-faq, .sp-tekst, #sp-krijg, #wat-we-bekijken, #open-vacatures, #sp-krijgt, #sp-dag, #ap-balans, #pijlers, #ap-onboarding, #ap-cycle, #ap-niet, #ap-faq, #ap-wat, #ap-aanpak, #ap-cases, #ap-verder, #ab-story, #ab-prin, #werken-met-ai, #team, #cd-start, #cd-aanpak, #cd-vn, #cd-stem, #cd-next):has(+ :is(#sp-why, #sp-herken, #signalen, #wat-we-doen, #sp-vs, #zo-werkt-het, #werkverdeling, #werkwijze, #cases.sp, #sp-meten, #sp-eigen, #afweging, #sp-faq, .sp-tekst, #sp-krijg, #wat-we-bekijken, #open-vacatures, #sp-krijgt, #sp-dag, #ap-balans, #pijlers, #ap-onboarding, #ap-cycle, #ap-niet, #ap-faq, #ap-wat, #ap-aanpak, #ap-cases, #ap-verder, #ab-story, #ab-prin, #werken-met-ai, #team, #cd-start, #cd-aanpak, #cd-vn, #cd-stem, #cd-next, #groeiscan-aanvragen, #open-sollicitatie)) {
    padding-bottom: calc(130 * var(--u));
  }
  .zl :is(#sp-why, #sp-herken, #signalen, #wat-we-doen, #sp-vs, #zo-werkt-het, #werkverdeling, #werkwijze, #cases.sp, #sp-meten, #sp-eigen, #afweging, #sp-faq, .sp-tekst, #sp-krijg, #wat-we-bekijken, #open-vacatures, #sp-krijgt, #sp-dag, #ap-balans, #pijlers, #ap-onboarding, #ap-cycle, #ap-niet, #ap-faq, #ap-wat, #ap-aanpak, #ap-cases, #ap-verder, #ab-story, #ab-prin, #werken-met-ai, #team, #cd-start, #cd-aanpak, #cd-vn, #cd-stem, #cd-next):not(.wit)
  + :is(#sp-why, #sp-herken, #signalen, #wat-we-doen, #sp-vs, #zo-werkt-het, #werkverdeling, #werkwijze, #cases.sp, #sp-meten, #sp-eigen, #afweging, #sp-faq, .sp-tekst, #sp-krijg, #wat-we-bekijken, #open-vacatures, #sp-krijgt, #sp-dag, #ap-balans, #pijlers, #ap-onboarding, #ap-cycle, #ap-niet, #ap-faq, #ap-wat, #ap-aanpak, #ap-cases, #ap-verder, #ab-story, #ab-prin, #werken-met-ai, #team, #cd-start, #cd-aanpak, #cd-vn, #cd-stem, #cd-next, #groeiscan-aanvragen, #open-sollicitatie):not(.wit) {
    border-top: 1px solid var(--line-light);
  }
}

/* =====================================================================
   Beeldmerk in de hero (feedback Tim 03-11 op /sales/ai-gespreksanalyse/, sitebreed doorgevoerd). Het draaiende
   merk werd door overflow:hidden van de hero onderaan recht afgesneden. Nu loopt het door onder de volgende sectie:
   de hero knipt alleen nog horizontaal (geen horizontale scroll), en de sectie eronder ligt een laag hoger met een
   doorzichtige achtergrond (main is even licht), zodat het merk achter de tekst en de kaarten van die sectie
   verdwijnt in plaats van ervoor. Alleen de hero's met hetzelfde merk op dezelfde lichte achtergrond.
   ===================================================================== */
.zl :is(#sp-hero, #ap-hero, #ins-hero, #ct-hero):has(> .mark) { overflow-x: clip; overflow-y: visible; }
.zl :is(#sp-hero, #ap-hero, #ins-hero, #ct-hero):has(> .mark) + :not(.wit) { position: relative; z-index: 1; background: transparent; }

/* Groeiscan-hero, "Hier knelt het" (Tim 03-11): limoen tekst op de lichte limoen kaart was onleesbaar. Tekst navy, stip blijft limoen met een donkerder rand. */
#sp-hero .scan .pl.knel .st { color: var(--navy); }
#sp-hero .scan .pl.knel .st i { background: var(--lime); box-shadow: 0 0 0 calc(4 * var(--u)) rgba(10,29,41,.08), inset 0 0 0 1px rgba(10,29,41,.25); }
#sp-hero .scan .pl.knel::before { background: rgba(200,245,96,.18); border-color: rgba(150,190,40,.45); }
/* Zelfde scan: de balken van Marketing en Business waren wit op licht en vielen weg. */
#sp-hero .scan .pl .bar { background: rgba(10,29,41,.07); }
#sp-hero .scan .pl:not(.knel) .bar i { background: rgba(10,29,41,.28); }

/* Contrastronde 03-11 (hele site, desktop): de laatste restjes van de navy basis.
 * Vacature (en groeiscan): de iconen in de feitenpillen (plaats, uren, niveau, start) waren limoen op licht. Navy, zoals de tekst ernaast. */
.zl #sp-hero .facts svg { color: var(--navy); }
/* 404: het stipje voor "Even uit elkaar gevallen" was wit (35%) op licht en viel weg. Grijs; als het merk weer heel is blijft het limoen. */
.zl #nf-hero .play .cap i { background: rgba(10,29,41,.28); }
.zl #nf-hero .play.ok .cap i { background: var(--lime); box-shadow: inset 0 0 0 1px rgba(10,29,41,.25); }

/* 03-11 (Tim): het kaartje rechtsboven in de dienst-hero steekt net buiten de foto, zoals het kaartje links. Alleen desktop, alleen waar het rechts verankerd is. */
@media (min-width: 961px) { #sp-hero .vis .fc.d { margin-right: calc(-32 * var(--u)); } }