/* =========================================================
   The Sitekick - designlaag
   Alleen de onderdelen die pagina's nodig hebben. Geen globale
   schaduwen of getinte secties: de basisstijl uit style.css
   blijft leidend.
   ========================================================= */

:root{
  --ink-900:#0f0b1c;
  --schaduw-zacht:0 8px 24px -16px rgba(36,18,90,.4);
  --schaduw-diep:0 18px 50px -24px rgba(36,18,90,.35);
}

main > section{position:relative}

/* een donkere ademsectie: geef een section class="sec-ink" */
.sec-ink{background:
  radial-gradient(64% 110% at 88% 0%, rgba(102,51,255,.30) 0%, transparent 58%),
  radial-gradient(52% 90% at 6% 96%, rgba(255,102,204,.16) 0%, transparent 58%),
  var(--ink-900);
  color:#fff}
.sec-ink h1,.sec-ink h2,.sec-ink h3,.sec-ink h4,.sec-ink b{color:#fff}
.sec-ink p,.sec-ink li{color:#e4dff2}
.sec-ink .kicker{color:#99ff66}

/* ===== redactionele opmaak: minder blokken, meer tekstritme ===== */
.dialoog{margin-top:34px;border-top:1px solid var(--line)}
.dl-vraag{display:flex;gap:20px;align-items:baseline;padding:22px 0 8px}
.dl-vraag span{font-family:'Fraunces',serif;font-weight:600;font-size:15px;color:var(--accent,#6633ff);flex:none;padding-top:6px}
.dl-vraag p{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.025em;
  font-size:clamp(22px,3vw,30px);line-height:1.2;color:var(--ink);max-width:22ch}
.dl-antw{padding:0 0 22px 47px;border-bottom:1px solid var(--line);color:var(--grey);font-size:16.5px;line-height:1.65;max-width:68ch}
@media(max-width:640px){.dl-antw{padding-left:0}}

.statement{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(26px,3.8vw,40px);line-height:1.14;color:#fff;max-width:24ch}
.statement-bij{margin-top:16px;color:#b6aed0;font-size:14.5px;letter-spacing:.04em}

.lijst-groot{list-style:none;margin-top:24px;counter-reset:g}
.lijst-groot li{position:relative;padding:20px 0 20px 88px;border-top:1px solid var(--line)}
.lijst-groot li:last-child{border-bottom:1px solid var(--line)}
.lg-num{position:absolute;left:0;top:24px;font-family:'Fraunces',serif;font-weight:600;font-size:40px;
  line-height:1;color:transparent;-webkit-text-stroke:1.4px var(--accent,#6633ff);opacity:.85}
.lijst-groot b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:20px;
  letter-spacing:-.02em;margin-bottom:6px}
.lijst-groot p{color:var(--grey);font-size:16px;line-height:1.65;max-width:64ch}
@media(max-width:640px){.lijst-groot li{padding-left:64px}.lg-num{font-size:30px;top:26px}}

.hang{margin-top:20px;display:flex;flex-direction:column;gap:15px}
.hang p{padding-left:20px;border-left:2px solid var(--accent,#6633ff);color:var(--grey);font-size:16px;line-height:1.6;max-width:72ch}
.hang b{color:var(--ink)}

.bewijs-link{display:grid;grid-template-columns:auto 1fr;gap:6px 26px;align-items:center;margin-top:18px;
  padding:22px 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.bewijs-link b{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(46px,8vw,84px);line-height:.9;
  color:var(--accent,#6633ff);grid-row:span 2}
.bewijs-link span{color:var(--grey);font-size:17px;line-height:1.6;max-width:52ch}
.bewijs-link em{font-style:normal;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:15px;color:var(--accent,#6633ff)}
.bewijs-link:hover em{text-decoration:underline}
@media(max-width:640px){.bewijs-link{grid-template-columns:1fr}.bewijs-link b{grid-row:auto}}

/* =========================================================
   componenten voor de eigen opbouw per pagina
   Zelfde stijl als de rest: paars, wit, paarse randen.
   ========================================================= */

/* sectiehoogtes: ademruimte of juist strak */
.sec-lucht{padding:clamp(48px,5.5vw,76px) 0}
.sec-kort{padding:clamp(20px,2.5vw,30px) 0}

/* zijwaartse onthulling */
.reveal-l,.reveal-r{opacity:0}
.reveal-l{transform:translateX(-28px)}
.reveal-r{transform:translateX(28px)}
.reveal-l.in,.reveal-r.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal-l,.reveal-r{opacity:1;transform:none}}

/* links in lopende tekst */
.hang a,.dl-antw a,.lijst-groot p a{color:var(--purple);font-weight:700;
  border-bottom:1px solid color-mix(in srgb, var(--purple) 35%, transparent)}
.hang a:hover,.dl-antw a:hover,.lijst-groot p a:hover{border-bottom-color:currentColor}

/* cijferbalk als paars merkvlak */
.feitenrij{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:clamp(20px,4vw,56px);border-radius:var(--radius);
  padding:clamp(24px,3vw,32px) clamp(24px,3.5vw,40px);
  background:var(--purple);
  box-shadow:0 14px 34px -22px rgba(102,51,255,.6);position:relative;overflow:hidden}
.feitenrij div{display:flex;align-items:baseline;gap:12px;padding:6px 0;position:relative;z-index:1}
.feitenrij b{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(30px,3.6vw,40px);color:#fff;line-height:1}
.feitenrij span{font-size:15.5px;color:#e7deff;max-width:22ch}

/* beeld dat aan een kant het raster uitloopt */
.uitloop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,68px);align-items:center}
.uitloop .beeld{position:relative;border-radius:0 var(--radius) var(--radius) 0;overflow:hidden;
  box-shadow:var(--schaduw-diep);margin-left:calc((100vw - min(100vw, 1140px)) / -2 - 24px)}
.uitloop .beeld img{width:100%;display:block;aspect-ratio:5/4;object-fit:cover}
.uitloop.rechts .beeld{border-radius:var(--radius) 0 0 var(--radius);order:2;
  margin-left:0;margin-right:calc((100vw - min(100vw, 1140px)) / -2 - 24px)}
.uitloop.rechts .tekst{order:1}
.uitloop .lijst-groot li{padding-left:70px}
.uitloop .lg-num{font-size:32px;top:28px}
@media(max-width:820px){
  .uitloop{grid-template-columns:1fr}
  .uitloop .beeld,.uitloop.rechts .beeld{margin:0 -24px;border-radius:0;order:0}
  .uitloop.rechts .tekst{order:0}
}

/* maandritme: tijdlijn met gekleurde punten */
.ritme{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin-top:32px}
.ritme li{position:relative;padding:26px 24px 4px 0;border-top:1px solid var(--ink)}
.ritme li::before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--purple);box-shadow:0 0 0 5px #fff}
.ritme li:nth-child(2)::before{background:var(--pink)}
.ritme li:nth-child(3)::before{background:var(--green)}
.ritme li:nth-child(4)::before{background:var(--ink)}
.rt-w{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:14px;color:var(--muted);margin-bottom:10px}
.ritme b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:20px;
  letter-spacing:-.02em;margin-bottom:8px}
.ritme p{color:var(--grey);font-size:15.5px;line-height:1.6}
@media(max-width:820px){.ritme{grid-template-columns:1fr 1fr}.ritme li{padding-right:18px}}
@media(max-width:520px){.ritme{grid-template-columns:1fr}}

/* register: een inhoudsopgave in plaats van kaartjes */
.register{list-style:none;margin-top:clamp(22px,3vw,32px);border-top:2px solid var(--ink)}
.register a{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.35fr) auto;
  gap:0 clamp(18px,3.5vw,48px);align-items:center;padding:clamp(18px,2.2vw,24px) clamp(8px,1.5vw,18px);
  border-bottom:1px solid var(--line);transition:background .35s ease,padding-left .35s ease}
.register a:hover{padding-left:clamp(18px,3vw,34px);
  background:linear-gradient(90deg, color-mix(in srgb, var(--purple) 9%, transparent) 0%, transparent 72%)}
.rg-num{font-family:'Fraunces',serif;font-weight:600;font-size:15px;color:var(--muted)}
.rg-t{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.025em;
  font-size:clamp(21px,2.5vw,30px);line-height:1.15;color:var(--ink)}
.rg-p{color:var(--grey);font-size:16px;line-height:1.6}
.rg-ar{font-size:22px;color:var(--purple);transition:transform .35s ease}
.register a:hover .rg-ar{transform:translateX(6px)}
@media(max-width:860px){
  .register a{grid-template-columns:auto 1fr;row-gap:10px;padding:24px 6px}
  .rg-p{grid-column:1 / -1}.rg-ar{grid-row:1;grid-column:2;justify-self:end}.rg-t{grid-column:2}
}

/* ruggegraat: verticale lijn met momenten */
.spine{list-style:none;margin-top:clamp(22px,3vw,32px)}
.spine li{position:relative;padding:0 0 clamp(20px,2.4vw,28px) clamp(28px,3vw,44px);
  border-left:2px solid var(--line);margin-left:7px}
.spine li:last-child{border-left-color:transparent;padding-bottom:0}
.spine li::before{content:"";position:absolute;left:-9px;top:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:inset 0 0 0 3.5px var(--purple)}
.spine li:nth-child(even)::before{box-shadow:inset 0 0 0 3.5px var(--pink)}
.sp-w{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:14px;color:var(--muted)}
.spine b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(18px,2vw,21px);letter-spacing:-.02em;margin:5px 0}
.spine p{color:var(--grey);font-size:15.5px;line-height:1.55;max-width:62ch}
.sec-ink .spine li{border-left-color:rgba(255,255,255,.18)}
.sec-ink .spine li::before{background:var(--ink-900)}
.sec-ink .sp-w{color:#a79bc7}

/* verval: wat er in de tijd stukgaat */
.verval{margin-top:clamp(30px,4vw,46px)}
.verval .balk{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--green) 0%,var(--lilac) 48%,var(--pink) 100%)}
.verval ol{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(20px,4vw,52px)}
.verval li{padding:20px clamp(10px,2vw,24px) 0 0}
.verval .vv-t{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:14px;color:var(--muted);margin-bottom:10px}
.verval b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px;
  letter-spacing:-.02em;margin-bottom:8px}
.verval p{color:var(--grey);font-size:15.5px;line-height:1.6}
@media(max-width:760px){.verval ol{grid-template-columns:1fr}.verval li{padding-right:0;padding-top:20px}}

/* tweeluik: past wel, past niet */
.tweeluik{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);margin-top:clamp(28px,4vw,42px)}
.tweeluik > div{border-top:2px solid var(--ink);padding-top:22px}
.tweeluik h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px;
  letter-spacing:-.02em;margin-bottom:20px}
.tweeluik ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.tweeluik li{position:relative;padding-left:26px;color:var(--grey);font-size:16px;line-height:1.55}
.tweeluik li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cpolygon%20points%3D%2726%2C18%2080%2C50%2026%2C82%27%20fill%3D%27%236633ff%27%20stroke%3D%27%236633ff%27%20stroke-width%3D%2716%27%20stroke-linejoin%3D%27round%27%20paint-order%3D%27stroke%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.tweeluik .nee{border-top-color:var(--line)}
.tweeluik .nee h3,.tweeluik .nee li{color:var(--muted)}
.tweeluik .nee li::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cpolygon%20points%3D%2726%2C18%2080%2C50%2026%2C82%27%20fill%3D%27%23cdc5dd%27%20stroke%3D%27%23cdc5dd%27%20stroke-width%3D%2716%27%20stroke-linejoin%3D%27round%27%20paint-order%3D%27stroke%27%2F%3E%3C%2Fsvg%3E")}
@media(max-width:760px){.tweeluik{grid-template-columns:1fr;gap:34px}}

/* sticky conversiebalk, wordt door motion.js aangemaakt */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;transform:translateY(110%);
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
  background:rgba(15,11,28,.94);backdrop-filter:blur(10px);color:#fff;
  padding:12px 20px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.cta-bar.aan{transform:translateY(0)}
.cta-bar p{font-size:14.5px;color:#d9d4ec;margin:0}
.cta-bar .btn{padding:11px 20px;font-size:15px}
.cta-bar .sluit{position:absolute;right:12px;top:8px;background:none;border:0;color:#8d85a8;font-size:18px;cursor:pointer;line-height:1}
@media(max-width:620px){.cta-bar p{display:none}}

/* =========================================================
   VERPLICHT: alles wat op een donker vlak staat, is licht.
   Onderdelen zetten hun eigen tekstkleur, dus die moet hier
   worden teruggezet. Zie merk/opmaakrichtlijnen.md, punt 2.
   ========================================================= */
.sec-ink.sec-ink :is(p,li,span,b,em,h2,h3,h4,a){color:#e4dff2}
.sec-ink.sec-ink :is(h2,h3,h4,b,strong,.rg-t,.statement){color:#fff}
.sec-ink.sec-ink :is(.sp-w,.rt-w,.vv-t,.rg-num,.statement-bij,.dl-vraag span){color:#b6aed0}
.sec-ink.sec-ink .kicker{color:#99ff66}
.sec-ink.sec-ink :is(.hang p,.dl-antw,.lijst-groot p,.rg-p,.spine p,.ritme p,.verval p,.tweeluik li,.bewijs-link span,.pd-stop p,.pd-stop h3){color:#e4dff2}
.sec-ink.sec-ink :is(.lijst-groot li,.ritme li,.dialoog,.dl-antw,.register a,.tweeluik > div,.bewijs-link){border-color:rgba(255,255,255,.22)}
.sec-ink.sec-ink :is(.hang p){border-left-color:#99ff66}
.sec-ink.sec-ink .lg-num{-webkit-text-stroke-color:#99ff66}
.sec-ink.sec-ink :is(.rg-ar,.bewijs-link b,.bewijs-link em,.feitenrij b){color:#99ff66}
.sec-ink.sec-ink .register a:hover{background:rgba(255,255,255,.06)}
.sec-ink.sec-ink .tweeluik li::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cpolygon%20points%3D%2726%2C18%2080%2C50%2026%2C82%27%20fill%3D%27%2399ff66%27%20stroke%3D%27%2399ff66%27%20stroke-width%3D%2716%27%20stroke-linejoin%3D%27round%27%20paint-order%3D%27stroke%27%2F%3E%3C%2Fsvg%3E")}
.sec-ink.sec-ink .tweeluik .nee li::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cpolygon%20points%3D%2726%2C18%2080%2C50%2026%2C82%27%20fill%3D%27%238f88a8%27%20stroke%3D%27%238f88a8%27%20stroke-width%3D%2716%27%20stroke-linejoin%3D%27round%27%20paint-order%3D%27stroke%27%2F%3E%3C%2Fsvg%3E")}
.sec-ink.sec-ink .ritme li::before{box-shadow:0 0 0 5px var(--ink-900)}

/* =========================================================
   Naleving huisstijlhandboek (merk/huisstijlhandboek-the-sitekick.html)
   Deze drie punten weken af van het handboek en zijn hier rechtgezet.
   ========================================================= */

/* radius: 12 px voor kaarten en beeld, 15 px voor grote vlakken. Niet ronder. */
:root{--radius:12px;--r-sm:12px;--r-lg:15px}
.uitloop .beeld{border-radius:0 15px 15px 0}
.uitloop.rechts .beeld{border-radius:15px 0 0 15px}
@media(max-width:820px){.uitloop .beeld,.uitloop.rechts .beeld{border-radius:0}}
.btn,.chip,.pill,.tag,.proof{border-radius:999px}

/* kicker volgens handboek: Bricolage 600, 12,5 px, .12em */
.kicker{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.12em}

/* geen verloop over een vlak met tekst erop: paars is vlak, het cijfer krijgt het verloop */
.feitenrij b{background:linear-gradient(120deg,#fff 0%,#ffd6f2 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* terugkoppeling van het contactformulier */
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-melding{margin-top:16px;padding:14px 16px;border-radius:12px;font-size:15px;line-height:1.55}
.form-melding.goed{background:var(--mint-soft);color:#2f6b12;border:1px solid #cbe9b8}
.form-melding.fout{background:#fdeef6;color:#9c1f66;border:1px solid #f4cfe4}
.form-melding a{font-weight:700;color:inherit;text-decoration:underline}

/* uitslag van de marketingscan, gegroepeerd per kanaal */
.scan-winst{margin-top:18px;padding:12px 16px;border-radius:12px;background:var(--lilac-soft);
  font-size:15px;color:var(--grey)}
.scan-winst b{color:var(--purple)}
.scan-groepen{margin-top:18px;border-top:1px solid var(--line)}
.scan-groep{border-bottom:1px solid var(--line)}
.scan-groep summary{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0 12px;
  padding:15px 4px;cursor:pointer;list-style:none}
.scan-groep summary::-webkit-details-marker{display:none}
.sg-bal{width:10px;height:10px;border-radius:50%;grid-row:span 2}
.scan-groep summary b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;
  letter-spacing:-.02em}
.sg-uitleg{grid-column:2;font-size:14px;color:var(--muted);line-height:1.45}
.sg-score{grid-row:span 2;font-family:'Fraunces',serif;font-weight:600;font-size:17px;color:var(--purple)}
.scan-groep[open] summary b{color:var(--purple)}
.scan-groep .scan-find{padding:0 4px 14px}
.sg-niet{padding:0 4px 16px;font-size:13.5px;color:var(--muted);font-style:italic}
@media(max-width:520px){
  .scan-groep summary{grid-template-columns:auto 1fr}
  .sg-score{grid-row:1;justify-self:end}
}

/* cookiebanner als eigen bevinding in de scan */
.scan-toestemming{margin-top:16px;padding:16px 18px;border-radius:12px;border:1px solid var(--line);
  border-left:3px solid var(--pink)}
.scan-toestemming b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px}
.scan-toestemming p{margin-top:6px;color:var(--grey);font-size:15px;line-height:1.6}

/* register zonder link: zelfde opmaak, geen pijl en geen hover */
.register > li > .rg-rij{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.35fr);
  gap:0 clamp(18px,3.5vw,48px);align-items:center;
  padding:clamp(18px,2.2vw,24px) clamp(8px,1.5vw,18px);border-bottom:1px solid var(--line)}
@media(max-width:860px){
  .register > li > .rg-rij{grid-template-columns:auto 1fr;row-gap:10px;padding:24px 6px}
  .register > li > .rg-rij .rg-p{grid-column:1 / -1}
  .register > li > .rg-rij .rg-t{grid-column:2}
}

/* meetopstelling in de scan: een opsomming, geen oordeel */
.scan-opstelling{margin-top:22px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius)}
.scan-opstelling > b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:15px;margin-bottom:12px}
.so-rij{display:grid;grid-template-columns:120px 1fr;gap:10px 18px;padding:7px 0;border-top:1px solid var(--line);font-size:15px}
.so-k{color:var(--muted);font-size:13.5px;letter-spacing:.02em;padding-top:2px}
.so-t{color:var(--ink);line-height:1.6}
.so-t i{font-style:normal;color:var(--muted);font-size:13.5px}
.scan-signalen{margin-top:16px;display:flex;flex-direction:column;gap:8px}
@media(max-width:560px){.so-rij{grid-template-columns:1fr;gap:2px}}

/* slotoordeel van de scan: het inzicht waar de bezoeker op afkomt */
.scan-slot{margin-top:26px;padding:24px 26px;border-radius:var(--r-lg);background:var(--purple);color:#fff}
.scan-slot .kicker{color:#99ff66}
.scan-slot h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.025em;
  font-size:clamp(21px,2.6vw,27px);line-height:1.15;color:#fff;margin:10px 0 10px}
.scan-slot > p{color:#e7deff;font-size:16px;line-height:1.65;max-width:60ch}
.sl-buiten{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.22)}
.sl-buiten b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:14px;
  color:#fff;margin-bottom:10px}
.sl-buiten ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.sl-buiten li{position:relative;padding-left:20px;color:#e7deff;font-size:15px;line-height:1.5}
.sl-buiten li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cpolygon%20points%3D%2726%2C18%2080%2C50%2026%2C82%27%20fill%3D%27%2399ff66%27%20stroke%3D%27%2399ff66%27%20stroke-width%3D%2716%27%20stroke-linejoin%3D%27round%27%20paint-order%3D%27stroke%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
@media(max-width:640px){.sl-buiten ul{grid-template-columns:1fr}}

/* oproepblok zonder tussenzin: de ruimte die de alinea gaf, moet terugkomen */
.cta > h2 + *{margin-top:clamp(22px,2.6vw,30px)}
.cta > h2{max-width:20ch;margin-left:auto;margin-right:auto;line-height:1.1}
.cta{padding:clamp(44px,5vw,60px) clamp(24px,4vw,40px)}

/* =========================================================
   Het pad: drie kaarten tegelijk in beeld, zijwaarts te volgen.
   Op een smal scherm twee, op een telefoon een.
   ========================================================= */
.pad{position:relative;margin-top:clamp(26px,3.5vw,36px);--kolommen:3;--kier:clamp(16px,2vw,24px)}
.pd-lijn{height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.pd-lijn i{display:block;height:100%;width:0;background:var(--purple);transition:width .25s ease}
.pd-spoor{list-style:none;display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--kolommen) - 1) * var(--kier)) / var(--kolommen));
  gap:var(--kier);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:clamp(22px,2.6vw,30px) 2px 6px;margin:0 -2px;
  scrollbar-width:none;-ms-overflow-style:none}
.pd-spoor::-webkit-scrollbar{display:none}
.pd-spoor:focus-visible{outline:2px solid var(--purple);outline-offset:6px;border-radius:12px}
.pd-stop{scroll-snap-align:start;border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column}
.pd-stop.pd-op{border-color:color-mix(in srgb, var(--purple) 38%, transparent);background:var(--lilac-soft)}
.pd-fase{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:12.5px;
  letter-spacing:.12em;color:var(--muted)}
.pd-stop.pd-op .pd-fase{color:var(--purple)}
.pd-num{font-family:'Fraunces',serif;font-weight:600;font-size:34px;line-height:1;color:transparent;
  -webkit-text-stroke:1.4px var(--purple);margin:14px 0 12px}
.pd-stop.pd-op .pd-num{-webkit-text-stroke-color:var(--pink)}
.pd-stop h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.025em;
  font-size:19px;line-height:1.2;color:var(--ink);margin-bottom:10px}
.pd-stop p{color:var(--grey);font-size:15.5px;line-height:1.6}
.pd-stuur{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.pd-knop{width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:#fff;
  color:var(--purple);font-size:17px;cursor:pointer;transition:background .25s ease,border-color .25s ease}
.pd-knop:hover:not(:disabled){background:var(--lilac-soft);border-color:var(--purple)}
.pd-knop:disabled{color:#c9c2d8;cursor:default}
@media(max-width:900px){.pad{--kolommen:2}}
@media(max-width:600px){.pad{--kolommen:1}.pd-stuur{justify-content:center}}
@media(prefers-reduced-motion:reduce){.pd-spoor{scroll-behavior:auto}}
/* =========================================================
   Merkpatroon: driehoeken uit het logo, alleen de buitenlijn en met
   afgeronde punten zoals het handboek voorschrijft. Het verschijnt
   langzaam zodra een sectie in beeld komt, en blijft daarna staan.
   ========================================================= */
:root{
  --patroon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2764.0%27%20height%3D%27110.851%27%20viewBox%3D%270%200%2064.0%20110.851%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%236633ff%27%20stroke-opacity%3D%270.035%27%20stroke-width%3D%271.1%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%2049.36%20Q0%2055.43%207.0%2055.43%20L57.0%2055.43%20Q64.0%2055.43%2060.5%2049.36%20L35.5%206.06%20Q32.0%200%2028.5%206.06%20Z%27%2F%3E%3Cpath%20d%3D%27M-28.5%206.06%20Q-32.0%200%20-25.0%200.0%20L25.0%200.0%20Q32.0%200%2028.5%206.06%20L3.5%2049.36%20Q0.0%2055.43%20-3.5%2049.36%20Z%27%2F%3E%3Cpath%20d%3D%27M35.5%206.06%20Q32.0%200%2039.0%200.0%20L89.0%200.0%20Q96.0%200%2092.5%206.06%20L67.5%2049.36%20Q64.0%2055.43%2060.5%2049.36%20Z%27%2F%3E%3Cpath%20d%3D%27M-28.5%20104.79%20Q-32.0%20110.85%20-25.0%20110.85%20L25.0%20110.85%20Q32.0%20110.85%2028.5%20104.79%20L3.5%2061.49%20Q0.0%2055.43%20-3.5%2061.49%20Z%27%2F%3E%3Cpath%20d%3D%27M35.5%20104.79%20Q32.0%20110.85%2039.0%20110.85%20L89.0%20110.85%20Q96.0%20110.85%2092.5%20104.79%20L67.5%2061.49%20Q64.0%2055.43%2060.5%2061.49%20Z%27%2F%3E%3Cpath%20d%3D%27M3.5%2061.49%20Q0%2055.43%207.0%2055.43%20L57.0%2055.43%20Q64.0%2055.43%2060.5%2061.49%20L35.5%20104.79%20Q32.0%20110.85%2028.5%20104.79%20Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --patroon-licht:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2764.0%27%20height%3D%27110.851%27%20viewBox%3D%270%200%2064.0%20110.851%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%270.032%27%20stroke-width%3D%271.1%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%2049.36%20Q0%2055.43%207.0%2055.43%20L57.0%2055.43%20Q64.0%2055.43%2060.5%2049.36%20L35.5%206.06%20Q32.0%200%2028.5%206.06%20Z%27%2F%3E%3Cpath%20d%3D%27M-28.5%206.06%20Q-32.0%200%20-25.0%200.0%20L25.0%200.0%20Q32.0%200%2028.5%206.06%20L3.5%2049.36%20Q0.0%2055.43%20-3.5%2049.36%20Z%27%2F%3E%3Cpath%20d%3D%27M35.5%206.06%20Q32.0%200%2039.0%200.0%20L89.0%200.0%20Q96.0%200%2092.5%206.06%20L67.5%2049.36%20Q64.0%2055.43%2060.5%2049.36%20Z%27%2F%3E%3Cpath%20d%3D%27M-28.5%20104.79%20Q-32.0%20110.85%20-25.0%20110.85%20L25.0%20110.85%20Q32.0%20110.85%2028.5%20104.79%20L3.5%2061.49%20Q0.0%2055.43%20-3.5%2061.49%20Z%27%2F%3E%3Cpath%20d%3D%27M35.5%20104.79%20Q32.0%20110.85%2039.0%20110.85%20L89.0%20110.85%20Q96.0%20110.85%2092.5%20104.79%20L67.5%2061.49%20Q64.0%2055.43%2060.5%2061.49%20Z%27%2F%3E%3Cpath%20d%3D%27M3.5%2061.49%20Q0%2055.43%207.0%2055.43%20L57.0%2055.43%20Q64.0%2055.43%2060.5%2061.49%20L35.5%20104.79%20Q32.0%20110.85%2028.5%20104.79%20Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.sec-lucht,.sec-tint,.sec-ink,.page-hero{position:relative}
.sec-lucht::after,.sec-tint::after,.sec-ink::after,.page-hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--patroon);background-size:64.0px 110.851px;background-position:center top;
  opacity:0;transform:scale(1.06);
  transition:opacity 1.6s cubic-bezier(.2,.7,.3,1),transform 2.2s cubic-bezier(.2,.7,.3,1)}
.sec-lucht.patroon-in::after,.sec-tint.patroon-in::after,
.sec-ink.patroon-in::after,.page-hero.patroon-in::after{opacity:1;transform:none}
.sec-lucht > *,.sec-tint > *,.sec-ink > *,.page-hero > *{position:relative;z-index:1}

/* op donkere vlakken dezelfde driehoeken, maar in het licht */
.sec-ink::after{background-image:var(--patroon-licht)}

/* in de hero dooft het patroon naar onderen weg, zodat het het verloop niet doorsnijdt */
.page-hero::after{-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 92%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 92%)}

@media(prefers-reduced-motion:reduce){
  .sec-lucht::after,.sec-tint::after,.sec-ink::after,.page-hero::after{
    opacity:1;transform:none;transition:none}
}
@media print{.sec-lucht::after,.sec-tint::after,.sec-ink::after,.page-hero::after{display:none}}

/* klantverhalen: de plek van de foto staat vast voordat hij geladen is,
   anders springt de pagina bij het laden. Radius volgens handboek. */
.cslide .ph{border-radius:15px;overflow:hidden;background:rgba(102,51,255,.06)}
.cslide .ph img{width:100%;display:block;aspect-ratio:3 / 2;object-fit:cover}

/* klantverhalen: elke slide even hoog, anders springt het blok bij wisselen */
.carousel-track{align-items:stretch}
.cslide{display:flex}
.cslide > .band{width:100%;display:flex;flex-direction:column;justify-content:center}
.carousel-viewport:focus-visible,.carousel:focus-visible{outline:2px solid var(--purple);outline-offset:4px}

/* stemmen: klantcitaten als redactionele uitspraken, niet als kaartjes.
   Staat op een donker vlak, zodat de pagina ademt tussen de witte secties. */
.stemmen{display:grid;gap:clamp(22px,3vw,34px);margin-top:clamp(26px,3.5vw,36px)}
.stemmen blockquote{position:relative;margin:0;padding-left:clamp(34px,4vw,54px)}
.stemmen blockquote::before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cpolygon%20points%3D%2726%2C18%2080%2C50%2026%2C82%27%20fill%3D%27%2399ff66%27%20stroke%3D%27%2399ff66%27%20stroke-width%3D%2716%27%20stroke-linejoin%3D%27round%27%20paint-order%3D%27stroke%27/%3E%3C/svg%3E") center/contain no-repeat}
.stemmen p{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;letter-spacing:-.015em;
  font-size:clamp(17px,2vw,21px);line-height:1.45;max-width:58ch}
.stemmen cite{display:block;margin-top:10px;font-style:normal;font-size:14.5px;letter-spacing:.02em}
@media(min-width:900px){.stemmen{grid-template-columns:1fr 1fr}.stemmen blockquote:first-child{grid-column:1 / -1}}
.sec-ink.sec-ink .stemmen p{color:#fff}
.sec-ink.sec-ink .stemmen cite{color:#b6aed0}

/* cookiebanner: onderaan, wit vlak, twee knoppen. Blokkeert de site niet. */
.toestemming{position:fixed;left:0;right:0;bottom:0;z-index:80;
  transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.3,1);
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -10px 30px -20px rgba(36,18,90,.45)}
.toestemming.aan{transform:translateY(0)}
.ts-in{max-width:1140px;margin:0 auto;padding:18px 24px;display:flex;gap:clamp(16px,3vw,40px);
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.ts-tekst b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:16px;letter-spacing:-.02em;margin-bottom:4px}
.ts-tekst p{color:var(--grey);font-size:14.5px;line-height:1.55;max-width:74ch;margin:0}
.ts-tekst a{color:var(--purple);font-weight:700;border-bottom:1px solid color-mix(in srgb, var(--purple) 35%, transparent)}
.ts-knoppen{display:flex;gap:10px;flex:none}
.ts-knoppen .btn{padding:11px 22px;font-size:15px}
@media(max-width:620px){.ts-in{padding:16px}.ts-knoppen{width:100%}.ts-knoppen .btn{flex:1;text-align:center}}
@media(prefers-reduced-motion:reduce){.toestemming{transition:none}}

/* Waarom twee patroonsecties op elkaar botsten: elke sectie begon zijn eigen
   tegelraster bovenaan zichzelf, dus bij de naad liepen de driehoeken niet door.
   Met een vaste achtergrond hangt het raster aan het scherm in plaats van aan de
   sectie, en loopt het naadloos door. Op mobiel kan dat niet, daar krijgt alleen
   de eerste sectie van een reeks het patroon. */
@media(max-width:820px){
  :is(.sec-lucht,.sec-tint,.sec-ink,.page-hero) + :is(.sec-lucht,.sec-tint,.sec-ink)::after{display:none}
}

/* Het patroon staat stil terwijl de pagina eroverheen schuift. Dat geeft diepte.
   Op telefoons niet: daar is een vaste achtergrond schokkerig en duur. */
@media(min-width:821px) and (hover:hover){
  .sec-lucht::after,.sec-tint::after,.sec-ink::after{background-attachment:fixed}
}

/* ===== minder blokken, meer lucht =====
   Het handboek is hier expliciet. Bij vormtaal staat onder 'niet': overal
   dezelfde blokjes met ronde hoeken en slagschaduw. Onder 'wel': veel wit,
   asymmetrie, en niet alles in een net rijtje van drie. De site was de kant
   van de blokjes op gegroeid. Hieronder gaat dat terug: geen vlak, geen rand
   rondom en geen slagschaduw, maar een streep bovenaan die het blok begint
   en verder ruimte. */
.card,.step,.phase,.rescard{
  background:transparent;border:0;border-radius:0;box-shadow:none;
  border-top:2px solid var(--lilac-soft);
  padding:20px 0 0}
.q-card:hover,.rescard:hover{transform:none;border-top-color:var(--purple)}
.phase{padding-top:20px}
.phase .pic{margin-top:2px}

/* Artikelkaarten houden hun kader, dat werkt daar wel. */

/* De verderlezen-kaarten worden regels met een streep eronder. */
.nx-card{background:transparent;border:0;border-radius:0;
  border-bottom:1.5px solid var(--line);padding:18px 46px 18px 0}
.nx-card:hover{transform:none;border-bottom-color:var(--purple)}

/* De horizontale tijdlijn houdt een vlak nodig om te kunnen schuiven,
   maar zonder schaduw en met een streep aan de kant. */
.tl-h .tl-item{box-shadow:none;border:0;border-left:2px solid var(--lilac);
  border-radius:0;background:transparent;padding:6px 22px 6px 20px}

/* Asymmetrie: een rij van drie staat niet meer kaarsrecht. */
@media(min-width:901px){
  .grid.g3>*:nth-child(3n+2){transform:translateY(26px)}
  .grid.g3>*:nth-child(3n+3){transform:translateY(12px)}
}

/* Op donkere vlakken kan een lichtgrijze streep niet, die valt weg. */
.sec-ink :is(.card,.step,.phase,.rescard){border-top-color:rgba(153,255,102,.45)}
.sec-ink .nx-card{border-bottom-color:rgba(255,255,255,.18)}
.sec-ink .tl-h .tl-item{border-left-color:rgba(153,255,102,.5)}

/* ===== groot beeldvlak =====
   Een sectie waarin de foto de hele breedte pakt en het tekstpaneel er
   overheen valt. Bedoeld als afwisseling tussen de tekstsecties, zodat een
   pagina niet uit louter opsommingen bestaat. */
.beeldvlak{position:relative;padding:0;overflow:hidden}
.beeldvlak::after{display:none}
.beeldvlak .bv-beeld{position:absolute;inset:0}
.beeldvlak .bv-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.beeldvlak .bv-beeld::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(22,19,31,.86) 0%,rgba(22,19,31,.72) 42%,rgba(22,19,31,.15) 100%)}
.beeldvlak .wrap{position:relative;z-index:1;padding-top:clamp(64px,9vw,120px);
  padding-bottom:clamp(64px,9vw,120px)}
.beeldvlak .bv-paneel{max-width:560px;color:#fff}
.beeldvlak .bv-paneel h2{color:#fff}
.beeldvlak .bv-paneel .kicker{color:var(--green)}
.beeldvlak .bv-lijst{list-style:none;margin-top:26px;display:grid;gap:15px}
.beeldvlak .bv-lijst li{position:relative;padding-left:34px;color:#efeafe;font-size:16.5px;line-height:1.6}
.beeldvlak .bv-lijst li::before{content:"";position:absolute;left:0;top:5px;width:17px;height:15px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cpolygon%20points%3D%2726%2C18%2080%2C50%2026%2C82%27%20fill%3D%27%2399ff66%27%20stroke%3D%27%2399ff66%27%20stroke-width%3D%2716%27%20stroke-linejoin%3D%27round%27%20paint-order%3D%27stroke%27%2F%3E%3C%2Fsvg%3E");
  background-size:contain;background-repeat:no-repeat}
@media(max-width:700px){
  .beeldvlak .bv-beeld::after{background:linear-gradient(180deg,rgba(22,19,31,.72),rgba(22,19,31,.9))}
  .beeldvlak .bv-paneel{max-width:none}
}

/* ===== uitklapper =====
   Voor rijen waar de uitleg langer is dan de kop. Dicht is het een lijst,
   open is het het hele verhaal. Geen kader, alleen een streep tussen de rijen. */
.vouw{margin-top:34px;border-top:1.5px solid var(--line)}
.vouw details{border-bottom:1.5px solid var(--line)}
.vouw summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:18px;
  padding:20px 0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(17px,2vw,20px);color:var(--ink);transition:color .15s ease}
.vouw summary::-webkit-details-marker{display:none}
.vouw summary:hover{color:var(--purple)}
.vouw .vw-num{font-family:'Fraunces',serif;font-style:italic;font-weight:600;
  font-size:16px;color:var(--purple);flex:0 0 34px}
.vouw .vw-kop{flex:1}
.vouw .vw-bij{display:block;font-family:'Raleway',sans-serif;font-weight:500;
  font-size:15px;color:var(--grey);margin-top:4px}
.vouw summary::after{content:"";flex:0 0 15px;width:15px;height:15px;margin-top:6px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cpolygon%20points%3D%2718%2C30%2082%2C30%2050%2C78%27%20fill%3D%27%236633ff%27%20stroke%3D%27%236633ff%27%20stroke-width%3D%2716%27%20stroke-linejoin%3D%27round%27%20paint-order%3D%27stroke%27%2F%3E%3C%2Fsvg%3E");
  background-size:contain;background-repeat:no-repeat;transition:transform .2s ease}
.vouw details[open] summary::after{transform:rotate(180deg)}
.vouw details[open] summary{color:var(--purple)}
.vouw details p{margin:0 0 22px 52px;max-width:64ch;color:var(--muted);line-height:1.7}
@media(max-width:600px){.vouw details p{margin-left:0}}
.sec-ink .vouw,.sec-ink .vouw details{border-color:rgba(255,255,255,.16)}
.sec-ink .vouw summary{color:#fff}
.sec-ink .vouw details p{color:#d9d2ea}

/* ===== klikbare kaarten (x-card en q-card) =====
   Zonder binnenruimte plakte de tekst bij hover tegen de rand van het vlak
   en sprong een kaart uit de rij omhoog. Nu heeft de kaart altijd ruimte
   rondom, blijft hij in rust open, en krijgt hij bij hover alleen een wit
   vlak met een zachte schaduw. Hij verspringt niet meer. */
.card.x-card,.card.q-card{padding:26px 26px 24px;border-top:0;border-radius:var(--r-sm);
  transition:opacity .6s ease,transform .6s ease,background-color .2s ease,box-shadow .2s ease}
.card.x-card::after,.card.q-card::after{top:18px;right:18px}
.card.x-card:hover,.card.q-card:hover{background:#fff;box-shadow:0 18px 40px -26px rgba(74,31,214,.35);border-color:transparent}
/* lage specificiteit, zodat de schuine rij blijft staan */
.x-card:hover,.q-card:hover{transform:none}
.sec-ink .card.x-card:hover,.sec-ink .card.q-card:hover{background:rgba(255,255,255,.06);box-shadow:none}

/* ===== in het kort (over ons) =====
   Drie feiten in een rij onder de cijfers, op dezelfde breedte en
   gecentreerd, zodat het blok rustig leest in plaats van half links. */
.kort-drie{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px;padding-top:32px;border-top:1.5px solid var(--line);text-align:center}
.kort-drie h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.kort-drie p{font-size:16px;line-height:1.7;color:var(--grey);margin:0}
.kort-drie a{color:var(--ink);text-decoration:none;font-weight:600}
.kort-drie a:hover{color:var(--purple)}
@media(max-width:760px){.kort-drie{grid-template-columns:1fr;gap:22px}}
.sec-ink .kort-drie{border-top-color:rgba(255,255,255,.16)}
.sec-ink .kort-drie h3{color:#bfb6d6}
.sec-ink .kort-drie p,.sec-ink .kort-drie a{color:#fff}