/* ============================================================================================================
   hero-v4.css — V4 STUDIOCIRKEL, de vaste bron (hero-set, Sean 24-09-2026: "V1 · V3 · V4 · V5 allemaal af").
   Per demo vervang je de merkkleur en het studiobeeld (hero-v4-export.py); de opbouw blijft gelijk.

   OVERLAP (Sean 28-09): regels die letterlijk in een bestand van deze map staan, tellen niet mee in css-overlap.mjs en
   gate 28 (concept-check.ps1). Bewust hergebruik van de goedgekeurde hero-set is geen ongewenste ontwerpkopie. De uitzondering
   geldt alleen voor wat hier staat: wie een hero-regel aanpast, telt weer gewoon mee, en alles buiten de hero ook.
   ============================================================================================================ */
/* ── HERO V4 · studiocirkel (rood) ───────────────────────────────── */
.hz{position:relative;overflow:hidden;background:#000;color:#fff}
.hz-beeld{display:block;margin:0}
.hz-beeld img{display:block}
.hz-tekst{position:relative;z-index:2}
.hz-oog{margin:0;font-size:.78em;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hz h1{margin:calc(.7em * var(--r)) 0 0;max-width:12.5em;font-size:4.5em;line-height:.98;letter-spacing:-.04em;color:#fff;text-wrap:balance;text-shadow:0 4px 40px rgba(0,0,0,.6)}
.hz h1 em{font-style:normal;color:var(--rood-licht)}
.hz-sub{margin:calc(1.1em * var(--r)) 0 0;font-size:1.6em;line-height:1.45;color:rgba(255,255,255,.86)}
.hz-lijn{display:block;width:18em;height:1px;margin-top:calc(2.2em * var(--r));background:rgba(255,255,255,.26)}
.hz-doen{display:flex;flex-wrap:wrap;align-items:center;gap:.75em;margin-top:calc(2.2em * var(--r))}
.hz-kn{display:inline-flex;align-items:center;justify-content:center;gap:.65em;min-height:3.4em;padding:.9em 1.4em;border-radius:.7em;font-size:1.0625em;font-weight:700;text-decoration:none;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.hz-kn svg{width:1.05em;height:auto;flex:none}
.hz-kn-vol{background:var(--rood);color:#fff;box-shadow:0 16px 34px -12px var(--rood-gloed),inset 0 1px 0 rgba(255,255,255,.25)}
.hz-kn-vol:hover{background:var(--rood-diep)}
.hz-kn-rand{border:1.5px solid rgba(255,255,255,.42);color:#fff;font-weight:600;background:rgba(0,0,0,.35)}
.hz-kn:hover{transform:translateY(-2px)}
.hz-kn-rand:hover{border-color:#fff}
.hz-lijst{list-style:none;margin:calc(2.1em * var(--r)) 0 0;padding:0;display:flex;flex-direction:column;gap:.85em}
.hz-lijst li{display:flex;align-items:center;gap:.8em;font-size:1.0625em;color:rgba(255,255,255,.88)}
.hz-lijst svg{width:1.15em;height:auto;flex:none;color:var(--rood-licht)}
@media (min-width:1180px){
  .hz{height:calc(100svh - 110px);min-height:480px}
  .hz-beeld{position:absolute;right:0;bottom:0;width:min(100%,calc((100svh - 110px) * 2.33));height:min(100%,43vw)}
  .hz-beeld img{width:100%;height:100%;object-fit:cover;object-position:100% 60%;transform-origin:62% 62%;animation:hz-drift 26s ease-in-out infinite alternate}
  @keyframes hz-drift{from{transform:scale(1)}to{transform:scale(1.035)}}
  .hz-tekst{width:58%;height:100%;display:flex;flex-direction:column;justify-content:center;padding-left:5vw;font-size:min(16px,1.1111vw,calc((100svh - 110px) / 33))}
  .hz-tekst > *{max-width:40em}
}
@media (prefers-reduced-motion:reduce){.hz-beeld img{animation:none}}
@media (min-width:1180px) and (max-width:1500px){.hz h1{font-size:4.1em}}
@media (min-width:1180px) and (max-height:880px){.hz{--r:.8}}
@media (min-width:1180px) and (max-height:780px){.hz{--r:.62}}
@media (min-width:1180px) and (max-height:700px){.hz{--r:.48}.hz-lijn{display:none}.hz h1{font-size:4em}.hz-sub{font-size:1.4em}}
@media (min-width:1180px) and (max-height:640px){.hz{--r:.4}}
@media (min-width:1180px) and (max-height:630px){.hz{--r:.3}}
@media (max-width:1179px){
  .hz{display:grid;padding-top:clamp(2rem,6vw,3.2rem)}
  .hz-tekst{display:contents}
  .hz-tekst > *{width:var(--kader);margin-inline:auto}
  .hz-oog{order:1;font-size:12px}
  .hz h1{order:2;margin:.55em auto 0;font-size:clamp(34px,9.2vw,66px);max-width:none}
  .hz-sub{order:3;font-size:clamp(18px,4.8vw,24px);margin:.8em auto 0}
  .hz-lijn{display:none}
  .hz-oog,.hz h1,.hz-sub{text-align:center}
  .hz-doen{order:4;justify-content:center;margin:1.5rem auto 0;font-size:16px;position:relative;z-index:3}
  .hz-beeld{order:5;position:relative;margin-top:.4rem;width:100%}
  .hz-beeld img{width:100%;height:auto}
  .hz-beeld::after{content:"";position:absolute;inset:0 0 auto 0;height:34%;pointer-events:none;background:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 100%)}
  .hz-lijst{order:6;margin:0 auto;padding-block:1.3rem 1.8rem;font-size:15.5px}
}
@media (max-width:699px){
  .hz{padding-top:0;grid-template-columns:100%;grid-template-rows:auto auto auto auto minmax(88vw,1fr) auto}
  .hz-tekst > *,.hz-beeld{grid-column:1}
  .hz-oog{grid-row:1;margin-top:clamp(1.6rem,7vw,2.4rem)}
  .hz h1{grid-row:2}
  .hz-sub{grid-row:3}
  .hz-doen{grid-row:4}
  .hz-tekst > *{position:relative;z-index:2}
  .hz-beeld{grid-row:1 / 6;align-self:end;margin-top:0;z-index:0}
  .hz-beeld::after{height:12%}
  .hz-lijst{grid-row:6;padding-top:.6rem}
}
@media (max-width:560px){
  .hz h1{font-size:clamp(32px,9.2vw,52px)}
  .hz-doen{flex-direction:column;align-items:stretch;gap:.6rem}
  .hz-kn{width:100%;min-height:48px;padding:.7em 1.2em;font-size:15px;border-radius:10px}
  .hz-sub br{display:none}
}

/* hero V4 · merkkleur en beeldmaat van MY-Line (rood uit hun logo) */
.hz{--rood:#D40F14;--rood-licht:#FF4D4F;--rood-diep:#A80B10;--rood-gloed:rgba(248,0,0,.5);--r:1}
.hz .hz-kn{border-radius:999px;font-family:var(--f-tekst);font-weight:800}
@media (min-width:1180px) and (max-height:715px){.hz-lijst{display:none}}
@media (min-width:1180px){.hz-sub{max-width:26em}.hz-beeld{width:min(100%,calc((100svh - 110px) * 2.27));height:min(100%,44vw)}.hz-beeld::after{content:"";position:absolute;inset:0 0 auto 0;height:22%;background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 45%,rgba(0,0,0,0) 100%);pointer-events:none}}

/* ============================================================================================================
   Rijschool MY-Line — eigen stijl (na de vaste V4-hero). Huisstijl: signaalrood #F80000 uit het logo, antraciet,
   wit; motief = het ronde verkeersbord (rode ring) voor aantallen en nummers. Koppen Figtree 900, tekst Manrope.
   ============================================================================================================ */
@font-face{font-family:"Figtree";font-style:normal;font-weight:900;font-display:swap;src:url(fonts/figtree-900.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope.woff2) format("woff2")}
:root{
  --kader:min(1220px,calc(100% - 2 * clamp(16px,4.2vw,56px)));
  --f-kop:"Figtree",system-ui,sans-serif;--f-tekst:"Manrope",system-ui,sans-serif;
  --sein:#F80000;--rd:#D40F14;--rd-2:#B80D12;--rd-3:#8E0A0E;--rd-z:#FF6E70;
  --antraciet:#141518;--nacht:#0D0E10;--ink:#1B1C20;--mist:#5C5E66;--papier:#F8F6F3;--zand:#F3EDE6;--wegel:#FFD84A;
  --sp:clamp(76px,8.4vw,124px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:92px}
body{margin:0;font-family:var(--f-tekst);font-size:17.5px;line-height:1.6;color:var(--ink);background:var(--papier);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{margin:0;font-family:var(--f-kop);font-weight:900;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
p{margin:0}
a{color:inherit}
ul,ol{margin:0;padding:0}
button,input{font:inherit}
.breed{width:var(--kader);margin-inline:auto}
.skip{position:absolute;left:-9999px;top:8px;z-index:300;padding:10px 18px;border-radius:999px;background:#fff;color:var(--ink);font-weight:800}
.skip:focus{left:12px}
:focus-visible{outline:3px solid #2F6FEB;outline-offset:3px}
main:focus{outline:none}
.desk{display:revert}
.tel{display:none}

/* knoppen: pillen */
.kn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;padding:0 1.6em;border:0;border-radius:999px;font:800 1rem/1.1 var(--f-tekst);letter-spacing:.005em;text-decoration:none;cursor:pointer;transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .18s ease}
.kn svg{flex:none}
.kn:hover{transform:translateY(-2px)}
.kn-rood{background:var(--rd);color:#fff;box-shadow:0 14px 30px -14px rgba(212,15,20,.75),inset 0 1px 0 rgba(255,255,255,.22)}
.kn-rood:hover{background:var(--rd-3)}
.kn-lijn{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px rgba(27,28,32,.85)}
.kn-lijn:hover{background:var(--ink);color:#fff}
.donker .kn-lijn{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.donker .kn-lijn:hover{background:#fff;color:var(--ink)}
.kn-wit{background:#fff;color:var(--rd-2);box-shadow:0 16px 34px -16px rgba(0,0,0,.55)}
.kn-wit:hover{background:var(--wegel);color:var(--ink)}

/* kicker als pil met seinlicht */
.label{display:inline-flex;align-items:center;gap:.6em;margin:0 0 20px;padding:.5em 1em .5em .8em;border-radius:999px;border:1px solid rgba(184,13,18,.26);background:rgba(212,15,20,.06);color:var(--rd-2);font:800 .76rem/1 var(--f-tekst);letter-spacing:.17em;text-transform:uppercase}
.label::before{content:"";width:.56em;height:.56em;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(212,15,20,.16)}
.donker .label,.werkwijze .label{color:var(--rd-z);border-color:rgba(255,110,112,.34);background:rgba(255,77,79,.08)}
.kopblok{max-width:880px;margin:0 auto clamp(40px,4.6vw,60px);text-align:center}
.kopblok h2,.ww-tekst h2,.vq-kop h2,.am-tekst h2,.vbp h1{font-size:clamp(36px,4.5vw,64px)}
.kopblok h2 em,.ww-tekst h2 em,.am-tekst h2 em,.vbp h1 em{font-style:normal;color:var(--rd)}
.donker h2 em,.werkwijze h2 em{color:var(--rd-z)}
.lead{text-wrap:pretty;margin-top:20px;font-size:1.14rem;line-height:1.62;color:var(--mist)}
.kopblok .lead{max-width:40em;margin-inline:auto}
.donker .lead,.werkwijze .lead{color:rgba(255,255,255,.74)}

/* vinklijst */
.checks{list-style:none;display:grid;gap:10px}
.checks li{position:relative;padding-left:32px;font-size:.98rem;line-height:1.45}
.checks li::before{content:"";position:absolute;left:0;top:.1em;width:21px;height:21px;border-radius:50%;background:rgba(212,15,20,.1);box-shadow:inset 0 0 0 1.5px rgba(212,15,20,.35)}
.checks li::after{content:"";position:absolute;left:7.5px;top:calc(.1em + 5px);width:5px;height:9px;border:solid var(--rd);border-width:0 2.2px 2.2px 0;transform:rotate(45deg)}
.donker .checks li::before{background:rgba(255,110,112,.12);box-shadow:inset 0 0 0 1.5px rgba(255,110,112,.4)}
.donker .checks li::after{border-color:var(--rd-z)}

/* reveal */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}

/* ── topregel + kopbalk (wit, want het logo is wit) ── */
.topregel{height:34px;background:var(--nacht);color:rgba(255,255,255,.8);font-size:13px;font-weight:600}
.topregel .breed{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.topregel span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.topregel b{color:#fff}
.topregel a{color:#fff;text-decoration:none}
.sterren{display:inline-flex;gap:2px;color:#FFC43D}
.balk{position:sticky;top:0;z-index:60;height:76px;background:rgba(255,255,255,.97);border-bottom:1px solid rgba(20,21,24,.07);transition:box-shadow .25s ease}
.balk.gescrold{box-shadow:0 12px 30px -18px rgba(13,14,16,.45)}
.balk-rij{height:100%;display:flex;align-items:center;gap:26px}
.logo{display:block;flex:none}
.logo img{width:170px;height:auto}
.balk-nav{display:flex;gap:28px;margin-left:auto}
.balk-nav a{position:relative;padding:6px 0;font-weight:700;font-size:15.5px;text-decoration:none;color:var(--ink)}
.balk-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--rd);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.balk-nav a:hover::after{transform:scaleX(1)}
.balk-cta{min-height:46px;padding:0 1.3em;font-size:.95rem}
.hamburger{display:none;margin-left:auto;width:48px;height:48px;border:0;border-radius:14px;background:var(--antraciet);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.hamburger i{display:block;width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .25s ease,opacity .2s ease}
.hamburger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] i:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.navmenu{display:none;position:fixed;z-index:55;left:0;right:0;top:var(--menu-top,110px);bottom:0;overflow:auto;padding:22px clamp(16px,5vw,40px) 40px;background:#fff;flex-direction:column;gap:4px}
.navmenu.open{display:flex}
.navmenu > a:not(.kn){padding:14px 2px;border-bottom:1px solid rgba(20,21,24,.08);font:900 1.5rem/1.2 var(--f-kop);letter-spacing:-.02em;text-decoration:none}
.navmenu .kn{margin-top:20px}
.navmenu-voet{margin-top:22px;color:var(--mist);font-size:.95rem;line-height:1.8}

/* ── geslaagdenband (aansluiting op de hero) ── */
.band{position:relative;background:var(--nacht);padding:16px 0 20px;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 140% at 50% 0%,rgba(248,0,0,.3),rgba(248,0,0,0) 70%);pointer-events:none}
.band-baan{position:relative;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-inline:10px;cursor:grab;user-select:none}
.band-baan::-webkit-scrollbar{display:none}
.band-baan.sleep{cursor:grabbing}
.band-foto{flex:none;margin:0;height:200px;border-radius:16px;overflow:hidden;box-shadow:0 12px 26px -16px rgba(0,0,0,.9)}
.band-foto img{height:100%;width:auto;pointer-events:none}

/* ── gronden: licht met rode gloed, antraciet met rode gloed, één rode sectie ── */
.dienst,.werkwijze,.kosten,.tarieven,.stemmen,.kanalen,.vraag,.aanmelden,.vbp{position:relative;isolation:isolate;padding-block:var(--sp)}
.dienst::before,.werkwijze::before,.kosten::before,.tarieven::before,.stemmen::before,.kanalen::before,.aanmelden::before,.vbp::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.dienst{background:var(--papier)}
.dienst::before{background:radial-gradient(52% 58% at 100% 0%,rgba(248,0,0,.13),rgba(248,0,0,0) 72%),radial-gradient(40% 50% at 0% 100%,rgba(248,0,0,.08),rgba(248,0,0,0) 70%)}
.werkwijze{background:var(--antraciet);color:#fff}
.werkwijze::before{background:radial-gradient(48% 70% at 0% 50%,rgba(248,0,0,.34),rgba(248,0,0,0) 70%),radial-gradient(40% 50% at 100% 0%,rgba(248,0,0,.14),rgba(248,0,0,0) 70%)}
.kosten{background:#FFFFFF}
.kosten::before{background:radial-gradient(50% 60% at 50% 100%,rgba(248,0,0,.14),rgba(248,0,0,0) 72%),radial-gradient(34% 44% at 0% 0%,rgba(248,0,0,.07),rgba(248,0,0,0) 70%)}
.donker{background:var(--antraciet);color:#fff}
.tarieven::before{background:radial-gradient(56% 60% at 50% 0%,rgba(248,0,0,.3),rgba(248,0,0,0) 72%)}
.stemmen{background:var(--papier)}
.stemmen::before{background:radial-gradient(46% 60% at 0% 20%,rgba(248,0,0,.12),rgba(248,0,0,0) 70%),radial-gradient(40% 54% at 100% 100%,rgba(248,0,0,.1),rgba(248,0,0,0) 70%)}
.kanalen{background:var(--nacht)}
.kanalen::before{background:radial-gradient(50% 64% at 100% 100%,rgba(248,0,0,.3),rgba(248,0,0,0) 70%),radial-gradient(36% 50% at 0% 0%,rgba(248,0,0,.16),rgba(248,0,0,0) 70%)}
.vraag{overflow:hidden;background:linear-gradient(160deg,#C4121A 0%,#B00F17 55%,#960C12 100%);color:#fff}
.vraag::after{content:"";position:absolute;z-index:-1;right:-150px;top:-150px;width:380px;height:380px;border-radius:50%;border:54px solid rgba(255,255,255,.09);pointer-events:none}
.vraag::before{content:"";position:absolute;inset:clamp(10px,1.6vw,22px);z-index:-1;border-radius:clamp(20px,2.4vw,34px);border:1px solid rgba(255,255,255,.26);background:radial-gradient(60% 70% at 0% 0%,rgba(255,255,255,.12),rgba(255,255,255,0) 70%);pointer-events:none}
.aanmelden{background:var(--zand)}
.aanmelden::before{background:radial-gradient(50% 64% at 100% 50%,rgba(248,0,0,.14),rgba(248,0,0,0) 72%),radial-gradient(36% 44% at 0% 0%,rgba(248,0,0,.08),rgba(248,0,0,0) 70%)}

/* ── aanbod: twee grote fotokaarten ── */
.ds-rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.ds-kaart{display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 1px 0 rgba(20,21,24,.06),0 30px 60px -38px rgba(20,21,24,.42);border:1px solid rgba(20,21,24,.06)}
.ds-foto{margin:0;aspect-ratio:4/3;overflow:hidden}
.ds-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform .7s ease}
.ds-kaart:hover .ds-foto img{transform:scale(1.03)}
.ds-inhoud{flex:1;display:flex;flex-direction:column;padding:28px clamp(22px,2.6vw,36px) 32px}
.ds-soort{display:inline-flex;align-items:center;gap:10px;color:var(--rd-2);font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.ds-soort svg{width:30px;height:30px;padding:6px;border-radius:50%;background:rgba(212,15,20,.09)}
.ds-inhoud h3{margin-top:12px;font-size:clamp(28px,2.4vw,36px)}
.ds-regel{margin-top:10px;color:var(--mist)}
.ds-inhoud .checks{margin-top:20px}
.ds-voet{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:auto;padding-top:24px;border-top:1px solid rgba(20,21,24,.08)}
.ds-inhoud .checks + .ds-voet{margin-top:26px}
.ds-prijs{font:900 clamp(30px,2.6vw,40px)/1 var(--f-kop);letter-spacing:-.03em}
.ds-prijs small{display:block;margin-bottom:6px;font:700 .8rem/1 var(--f-tekst);letter-spacing:.04em;color:var(--mist)}

/* ── werkwijze: foto links met rood tegenvlak, tekst rechts ── */
.ww-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:stretch}
.ww-foto{grid-column:1;grid-row:1;position:relative;margin:0 18px 18px 0;min-height:420px}
.ww-foto::before{content:"";position:absolute;inset:18px -18px -18px 18px;border-radius:30px;background:linear-gradient(150deg,var(--rd) 0%,var(--rd-3) 100%)}
.ww-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 40%;border-radius:30px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.ww-tekst{grid-column:2;grid-row:1;align-self:center;padding-block:10px}
.ww-punten{list-style:none;display:grid;gap:18px;margin-top:32px}
.ww-punten li{display:flex;gap:16px;align-items:flex-start}
.ww-punten svg{flex:none;width:48px;height:48px;padding:12px;border-radius:50%;color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 3px var(--rd)}
.ww-punten span{display:grid;gap:2px;color:rgba(255,255,255,.7);font-size:.98rem}
.ww-punten b{color:#fff;font-size:1.08rem}
.ww-citaat{position:relative;margin:34px 0 0;padding:24px 26px 22px 70px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.ww-citaat::before{content:"\201C";position:absolute;left:22px;top:6px;font:900 64px/1 var(--f-kop);color:var(--rd-z)}
.ww-citaat p{font-size:1.06rem;line-height:1.55;color:rgba(255,255,255,.92)}
.ww-citaat cite{display:block;margin-top:10px;font-style:normal;font-weight:700;font-size:.9rem;color:rgba(255,255,255,.62)}

/* ── rekenhulp: witte kaart met een donker uitkomstpaneel ── */
.ks-blok{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:12px;padding:12px;border-radius:32px;background:#fff;border:1px solid rgba(20,21,24,.07);box-shadow:0 40px 80px -50px rgba(20,21,24,.5)}
.ks-kies{padding:clamp(24px,3vw,44px)}
.ks-soort{margin:0;padding:0;border:0}
.ks-soort legend,.ks-schuif-label{font-weight:800;font-size:1.02rem}
.ks-knoppen{display:inline-flex;gap:6px;margin-top:14px;padding:6px;border-radius:999px;background:var(--papier);border:1px solid rgba(20,21,24,.07)}
.ks-knoppen label{position:relative;cursor:pointer}
.ks-knoppen input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ks-knoppen span{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;font-weight:800;transition:background .2s ease,color .2s ease}
.ks-knoppen input:checked + span{background:var(--rd);color:#fff;box-shadow:0 10px 20px -12px rgba(212,15,20,.9)}
.ks-knoppen input:focus-visible + span{outline:3px solid #2F6FEB;outline-offset:2px}
.ks-schuif-label{display:block;margin-top:34px}
.ks-schuif-label b{display:inline-grid;place-items:center;min-width:2.3em;height:2.3em;margin-left:6px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 4px var(--rd);font:900 1rem/1 var(--f-kop);color:var(--ink)}
.ks-schuif{-webkit-appearance:none;appearance:none;display:block;width:100%;height:10px;margin:22px 0 0;border-radius:99px;background:linear-gradient(90deg,var(--rd) 0 var(--p,33.3%),#E7E3DE var(--p,33.3%) 100%);cursor:pointer}
.ks-schuif::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;border-radius:50%;background:#fff;border:6px solid var(--rd);box-shadow:0 6px 14px -4px rgba(0,0,0,.4)}
.ks-schuif::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:6px solid var(--rd);box-shadow:0 6px 14px -4px rgba(0,0,0,.4)}
.ks-schaal{display:flex;justify-content:space-between;margin-top:10px;color:var(--mist);font-weight:700;font-size:.85rem}
.ks-uitleg{margin-top:26px;color:var(--mist);font-size:.95rem}
.ks-uit{display:flex;flex-direction:column;padding:clamp(26px,3vw,42px);border-radius:24px;background:radial-gradient(90% 70% at 100% 0%,rgba(248,0,0,.32),rgba(248,0,0,0) 70%),var(--antraciet);color:#fff}
.ks-kop{font-weight:700;color:rgba(255,255,255,.72)}
.ks-totaal{margin-top:8px;font:900 clamp(50px,5.4vw,78px)/1 var(--f-kop);letter-spacing:-.04em}
.ks-regels{list-style:none;margin-top:26px;display:grid}
.ks-regels li{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid rgba(255,255,255,.12);font-size:.96rem;color:rgba(255,255,255,.8)}
.ks-regels b{color:#fff;white-space:nowrap}
.ks-uit .kn{margin-top:auto;align-self:stretch}
.ks-regels + .kn{margin-top:28px}

/* ── prijzen: tabs en pakketkaarten met een bordcijfer ── */
.pr-tabs{display:flex;justify-content:center;gap:6px;width:max-content;margin:0 auto 40px;padding:6px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.pr-tab{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 26px;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.8);font-weight:800;cursor:pointer;transition:background .2s ease,color .2s ease}
.pr-tab[aria-selected="true"]{background:#fff;color:var(--ink)}
.pr-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.pr-kaart{position:relative;display:flex;flex-direction:column;padding:30px 28px 28px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.11)}
.pr-les{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.7);font-weight:700;font-size:.92rem}
.pr-les b{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 7px var(--sein);color:var(--ink);font:900 1.45rem/1 var(--f-kop);letter-spacing:-.03em}
.pr-kaart h3{margin-top:20px;font-size:1.5rem}
.pr-prijs{margin-top:8px;font:900 clamp(40px,3.6vw,50px)/1 var(--f-kop);letter-spacing:-.04em}
.pr-tag{margin-top:12px;font-size:.9rem;font-weight:700;color:rgba(255,255,255,.62)}
.pr-kaart .checks{margin:22px 0 26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
.pr-kaart .kn{margin-top:auto}
.pr-uit{background:#fff;color:var(--ink);border-color:#fff;box-shadow:0 34px 70px -40px rgba(248,0,0,.7)}
.pr-uit .pr-les{color:var(--mist)}
.pr-uit .pr-tag{position:absolute;top:26px;right:24px;margin:0;padding:6px 12px;border-radius:999px;background:var(--rd);color:#fff;font-size:.78rem;letter-spacing:.04em}
.pr-uit .checks{border-top-color:rgba(20,21,24,.1)}
.pr-uit .checks li::before{background:rgba(212,15,20,.1);box-shadow:inset 0 0 0 1.5px rgba(212,15,20,.35)}
.pr-uit .checks li::after{border-color:var(--rd)}
.pr-los{max-width:820px;margin:30px auto 0;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.pr-los summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;cursor:pointer;list-style:none}
.pr-los summary::-webkit-details-marker{display:none}
.pr-los summary > span:first-child{display:grid;gap:2px}
.pr-los summary small{color:rgba(255,255,255,.6);font-size:.9rem}
.plus{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);font:700 1.3rem/1 var(--f-tekst);transition:transform .25s ease}
details[open] > summary .plus{transform:rotate(45deg)}
.pr-los ul{list-style:none;padding:0 24px 18px}
.pr-los li{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.85)}
.pr-los li small{color:rgba(255,255,255,.55)}
.pr-los li b{white-space:nowrap}

/* ── reviews: 2×2 kaarten + staande foto ── */
.st-score{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin-top:24px;padding:10px 12px 10px 20px;border-radius:999px;background:#fff;border:1px solid rgba(20,21,24,.07);box-shadow:0 18px 40px -30px rgba(20,21,24,.5);font-size:.95rem}
.st-score .sterren{color:#F5A700}
.st-score > b{font:900 1.35rem/1 var(--f-kop)}
.st-score > span{color:var(--mist);font-weight:600}
.st-score a{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;background:var(--antraciet);color:#fff;font-weight:800;text-decoration:none}
.st-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,.78fr);grid-template-rows:auto auto;gap:20px}
.st-kaart{display:flex;flex-direction:column;padding:28px 28px 24px;border-radius:24px;background:#fff;border:1px solid rgba(20,21,24,.06);box-shadow:0 26px 50px -40px rgba(20,21,24,.5)}
.st-kaart blockquote{position:relative;margin:0;padding-top:34px;font-size:1.02rem;line-height:1.62}
.st-kaart blockquote::before{content:"\201C";position:absolute;left:-2px;top:-8px;font:900 58px/1 var(--f-kop);color:var(--rd)}
.st-kaart mark{background:linear-gradient(180deg,transparent 58%,rgba(248,0,0,.16) 58%);color:inherit;font-weight:700}
.st-wie{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:20px}
.st-kaart blockquote + .st-wie{margin-top:22px}
.st-letter{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--antraciet);color:#fff;font:900 1.05rem/1 var(--f-kop)}
.st-wie > span:nth-child(2){display:grid;line-height:1.3}
.st-wie small{color:var(--mist);font-size:.84rem}
.st-wie .gg{margin-left:auto}
.st-foto{grid-column:3;grid-row:1 / 3;position:relative;margin:0;border-radius:26px;overflow:hidden;min-height:360px}
.st-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:80% 50%}

/* ── volg: drie kanaalkaarten ── */
.kk-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.kn-kaart{display:flex;flex-direction:column;padding:24px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.11)}
.kk-kop{display:flex;align-items:center;gap:14px}
.kk-kop > span:last-child{display:grid;line-height:1.3}
.kk-kop b{font-size:1.14rem}
.kk-kop small{color:rgba(255,255,255,.62);font-size:.88rem}
.kk-ico{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;color:#fff}
.kk-ico.ig{background:linear-gradient(45deg,#F9A62B,#E4405F 45%,#8A3AB9)}
.kk-ico.tt{background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.kk-ico.fb{background:#1877F2}
.kk-regel{margin-top:14px;color:rgba(255,255,255,.76);font-size:.98rem}
.kk-moz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:18px 0 22px;border-radius:16px;overflow:hidden}
.kk-moz img{width:100%;aspect-ratio:1;object-fit:cover}
.kn-kaart .kn{margin-top:auto}

/* ── vragen: rode sectie, kop links, witte kaarten rechts ── */
.vraag .kopblok{margin-bottom:clamp(30px,3.4vw,44px)}
.vraag .kopblok h2{color:#fff}
.vraag .kopblok h2 em{color:var(--wegel)}
.vq-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;max-width:1040px;margin-inline:auto}
.vq{border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 20px 40px -30px rgba(60,0,0,.8)}
.vq summary{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 14px 10px 12px;cursor:pointer;list-style:none}
.vq summary::-webkit-details-marker{display:none}
.vq-nr{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3.5px var(--sein);font:900 .8rem/1 var(--f-kop)}
.vq-tekst{flex:1;font-weight:800;font-size:.98rem;line-height:1.3}
.vq .plus{width:20px;height:20px;background:none;color:var(--rd-2);font-size:1.25rem}
.vq p{padding:0 18px 16px 58px;color:var(--mist);font-size:.96rem;line-height:1.6}

/* ── afsluiter: tekst + contactkaart links, formulier in een witte kaart rechts ── */
.am-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,76px);align-items:stretch}
.am-tekst{align-self:center}
.am-contact{margin-top:30px;padding:22px 24px;border-radius:24px;background:rgba(255,255,255,.72);border:1px solid rgba(20,21,24,.07)}
.am-wie{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid rgba(20,21,24,.08)}
.am-wie img{width:60px;height:60px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--rd)}
.am-wie span{display:grid;line-height:1.3}
.am-wie small{color:var(--mist);font-size:.9rem}
.am-regels{list-style:none;display:grid;gap:14px;margin-top:16px}
.am-regels li{display:flex;align-items:center;gap:14px}
.am-regels svg{flex:none;width:40px;height:40px;padding:10px;border-radius:50%;background:#fff;color:var(--rd);box-shadow:0 6px 14px -8px rgba(20,21,24,.4)}
.am-regels span{display:grid;line-height:1.3}
.am-regels a{font-weight:800;text-decoration:none}
.am-regels a:hover{color:var(--rd-2)}
.am-regels small{color:var(--mist);font-size:.88rem}
.am-kaart{padding:clamp(24px,2.6vw,34px);border-radius:30px;background:#fff;border:1px solid rgba(20,21,24,.06);box-shadow:0 40px 80px -46px rgba(20,21,24,.55)}
.am-kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid rgba(20,21,24,.08)}
.am-kop b{font:900 1.6rem/1.1 var(--f-kop);letter-spacing:-.02em}
.am-kop span{color:var(--mist);font-weight:700;font-size:.92rem}
.am-velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.am-veld{display:grid;gap:7px;font-weight:700;font-size:.92rem}
.am-veld textarea{width:100%;min-height:58px;padding:12px 16px;border-radius:14px;border:1.5px solid rgba(20,21,24,.16);background:var(--papier);color:var(--ink);font:inherit;resize:vertical}
.am-veld textarea:focus{outline:none;border-color:var(--rd);background:#fff}
.am-veld small{color:var(--mist);font-weight:600}
.am-vrij{margin-top:16px}
.am-veld input{width:100%;min-height:54px;padding:0 16px;border-radius:14px;border:1.5px solid rgba(20,21,24,.16);background:var(--papier);color:var(--ink);transition:border-color .2s ease,background .2s ease}
.am-veld input::placeholder,.am-veld textarea::placeholder{color:#76787F}
.am-veld input:focus{outline:none;border-color:var(--rd);background:#fff}
.am-keus{margin:16px 0 0;padding:0;border:0}
.am-keus legend{font-weight:700;font-size:.92rem;margin-bottom:10px}
.am-opties{display:flex;flex-wrap:wrap;gap:8px}
.am-opties label{position:relative;cursor:pointer}
.am-opties input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.am-opties span{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border-radius:999px;border:1.5px solid rgba(20,21,24,.16);font-weight:700;transition:all .2s ease}
.am-opties input:checked + span{border-color:var(--rd);background:rgba(212,15,20,.08);color:var(--rd-2)}
.am-opties input:focus-visible + span{outline:3px solid #2F6FEB;outline-offset:2px}
.web{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pf-form{margin:0}
.pr-paneel{animation:pr-in .35s ease both}
@keyframes pr-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pf-fout{margin-top:16px;padding:12px 16px;border-radius:12px;background:#FDECEC;color:#8E0A0E;font-weight:700;font-size:.94rem}
.am-knop{width:100%;margin-top:22px}
.am-onder{margin-top:14px;text-align:center;color:var(--mist);font-size:.94rem}
.am-onder a{font-weight:800;color:var(--ink)}
.pf-klaar{text-align:center;padding:30px 10px}
.pf-vink{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 6px var(--sein);color:var(--rd)}
.pf-vink svg{width:30px;height:30px}
.pf-klaar h3{margin-top:18px;font-size:2rem}
.pf-klaar p{margin-top:10px;color:var(--mist)}

/* ── voet ── */
.onder{position:relative;background:var(--nacht);color:rgba(255,255,255,.72);padding:64px 0 28px;font-size:.96rem}
.onder-rij{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:36px}
.onder-naam{display:block;margin-bottom:10px;color:#fff;font:900 1.35rem/1.1 var(--f-kop)}
.onder-kop{margin-bottom:12px;color:#fff;font:800 .82rem/1 var(--f-tekst);letter-spacing:.14em;text-transform:uppercase}
.onder ul{list-style:none;display:grid;gap:8px}
.onder a{text-decoration:none}
.onder a:hover{color:#fff}
.onder-slot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:.88rem;color:rgba(255,255,255,.55)}

/* ── bijpagina's ── */
.vbp{background:var(--papier);min-height:calc(100svh - 110px);display:grid;align-items:center}
.vbp::before{background:radial-gradient(50% 60% at 100% 0%,rgba(248,0,0,.13),rgba(248,0,0,0) 72%)}
.vbp-raster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,70px);align-items:stretch}
.vbp-foto{position:relative;margin:0;min-height:380px;border-radius:30px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(20,21,24,.55)}
.vbp-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:35% 40%}
.vbp-lijst{list-style:none;counter-reset:vbp;display:grid;gap:12px;margin-top:26px}
.vbp-lijst li{counter-increment:vbp;display:flex;align-items:center;gap:12px;color:var(--mist)}
.vbp-lijst li::before{content:counter(vbp);flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px var(--sein);color:var(--ink);font:900 .8rem/1 var(--f-kop)}
.vbp-lijst b{color:var(--ink);margin-right:4px}
.vbp-contact{margin-top:22px;color:var(--mist)}
.vbp-contact a{font-weight:800;color:var(--ink)}
.vbp .lead{max-width:36em}
.vbp-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ── tussenmaten ── */
@media (max-width:1180px){
  .balk-nav{gap:20px}
  .balk-nav a{font-size:15px}
}
@media (max-width:1100px){
  .balk-nav,.balk-cta{display:none}
  .hamburger{display:flex}
}
@media (max-width:1024px){
  .st-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-foto{grid-column:1 / -1;grid-row:auto;min-height:0;aspect-ratio:16/9}
  .st-foto img{object-position:50% 30%}
  .pr-rij{gap:14px}
  .pr-kaart{padding:26px 20px 22px}
  .ks-blok{grid-template-columns:1fr}
  .onder-rij{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .ds-rij,.kk-rij{grid-template-columns:1fr}
  .ww-raster,.am-raster,.vbp-raster{grid-template-columns:1fr}
  .ww-tekst{grid-column:1;grid-row:1}
  .ww-foto{grid-column:1;grid-row:2;min-height:0;aspect-ratio:4/3}
  .am-tekst{text-align:center}
  .am-tekst .label{margin-inline:auto}
  .am-contact{text-align:left}
  .kk-rij{max-width:560px;margin-inline:auto}
  .ds-rij{max-width:620px;margin-inline:auto}
  .pr-rij{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
  .pr-rij::-webkit-scrollbar{display:none}
  .pr-kaart{flex:0 0 min(78%,340px);scroll-snap-align:center}
}

/* ── telefoon: eigen compositie ── */
@media (max-width:720px){
  :root{--sp:48px}
  body{font-size:16.5px}
  .desk{display:none}
  .tel{display:revert}
  .topregel .breed{justify-content:center}
  .topregel span:nth-child(n+2){display:none}
  .balk{height:66px}
  .logo img{width:132px}
  .kopblok{margin-bottom:30px}
  .kopblok h2,.ww-tekst h2,.vq-kop h2,.am-tekst h2,.vbp h1{font-size:clamp(30px,9.2vw,38px)}
  .lead{margin-top:14px;font-size:1.02rem}
  .label{margin-bottom:14px}
  .ww-tekst{text-align:center}
  .ww-punten{text-align:left;margin-top:24px}
  .ww-citaat{text-align:left;margin-top:24px;padding:20px 18px 18px 56px}
  .ww-citaat::before{left:16px;font-size:52px}
  .ww-foto{margin:0 12px 12px 0;aspect-ratio:1}
  .ww-foto::before{inset:12px -12px -12px 12px;border-radius:24px}
  .ww-foto img{border-radius:24px}
  .band-foto{height:150px;border-radius:12px}
  .band{padding:12px 0 14px}
  .ds-regel{display:none}
  .ds-inhoud{padding:22px 20px 24px}
  .ds-kaart{border-radius:22px}
  .ks-blok{padding:8px;border-radius:26px}
  .ks-kies{padding:22px 16px 18px}
  .ks-knoppen{display:flex}
  .ks-knoppen label{flex:1}
  .ks-knoppen span{justify-content:center;width:100%;padding:0 12px}
  .ks-uit{border-radius:20px;padding:24px 20px}
  .ks-uitleg{margin-top:18px;font-size:.9rem}
  .pr-tabs{margin-bottom:26px}
  .pr-tab{padding:0 20px}
  .pr-uit .pr-tag{top:22px;right:18px}
  .pr-los summary{padding:16px 18px}
  .pr-los ul{padding:0 18px 14px}
  .st-score{border-radius:22px;padding:12px 16px}
  .st-raster{grid-template-columns:1fr;gap:14px}
  .st-kaart{padding:22px 20px 20px}
  .st-kaart blockquote{padding-top:30px}
  .st-wie{padding-top:0}
  .st-foto{aspect-ratio:4/3}
  .kn-kaart{padding:20px}
  .kk-regel{display:none}
  .kk-moz{margin-top:16px}
  .kk-moz{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;border-radius:12px}
  .vq-raster{grid-template-columns:1fr}
  .vq summary{min-height:56px;padding:10px 12px}
  .vq-tekst{font-size:.98rem}
  .vq p{padding:0 14px 16px 58px}
  .vraag::after{width:220px;height:220px;right:-110px;top:-110px;border-width:34px}
  .am-velden{grid-template-columns:1fr}
  .am-kaart{padding:22px 18px;border-radius:24px}
  .am-contact{padding:18px}
  .am-kop b{font-size:1.35rem}
  .onder{padding-top:48px}
  .onder-rij{grid-template-columns:1fr;gap:26px}
  .vbp-knoppen .kn{width:100%}
  .vbp-raster > div:first-child{text-align:center}
  .vbp-lijst{text-align:left}
  .vbp-foto{min-height:0;aspect-ratio:4/3}
}
@media (max-width:380px){
  .pr-tab{padding:0 14px}
  .ks-knoppen span{padding:0 8px}
}