/* Het Miles College — V3 · mobile-first · tokens uit ONTWERPBRIEF.md §3 */
@font-face{font-family:'MADE Dillan';src:url('../fonts/MADEDillan.woff2?v=88e19260') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Elaine Sans';src:url('../fonts/Elaine-Sans-Black-3b57.woff2?v=0a76c081') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('../fonts/CabinetGrotesk-Regular.woff2?v=db914e6a') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('../fonts/CabinetGrotesk-Bold.woff2?v=4ac1925a') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Metropolis';src:url('../fonts/Metropolis-Medium.woff2?v=4d5e0650') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Metropolis';src:url('../fonts/Metropolis-SemiBold.woff2?v=29047ba4') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Cabinet Grotesk-fallback';src:local('Arial');size-adjust:98%;ascent-override:92%;descent-override:22%}
@font-face{font-family:'Metropolis-fallback';src:local('Arial');size-adjust:100%;ascent-override:90%;descent-override:22%}

:root{
  --aubergine:#59132E;--aubergine-diep:#430E23;--inkt:#24081A;--koraal:#E73935;--terracotta:#CE5C42;--geel:#F9D078;--lichtblauw:#A1D1DF;
  --bot:#DAD6CB;--paper:#F4F1EA;--cream:#EDE9DF;--wit:#FDFCF9;
  --tekst:var(--inkt);--tekst-2:#4B3742;--tekst-omgekeerd:var(--paper);--tekst-omgekeerd-2:rgba(244,241,234,.78);
  --lijn:rgba(36,8,26,.10);--lijn-omgekeerd:rgba(244,241,234,.16);--accent:var(--koraal);--markering:var(--geel);
  --scrim-hero:linear-gradient(90deg,rgba(36,8,26,.72) 0%,rgba(36,8,26,.38) 55%,rgba(36,8,26,.10) 100%),linear-gradient(180deg,rgba(36,8,26,0) 60%,rgba(36,8,26,.45) 100%);
  --scrim-band:rgba(67,14,35,.82);
  --f-display:'Elaine Sans','Arial Black',sans-serif;--f-kop:'MADE Dillan','Cabinet Grotesk-fallback',sans-serif;
  --f-body:'Cabinet Grotesk','Cabinet Grotesk-fallback',Arial,sans-serif;--f-ui:'Metropolis','Metropolis-fallback',Arial,sans-serif;
  --t-kicker:clamp(12px,11.65px + .094vw,13px);--t-klein:clamp(14px,13.65px + .094vw,15px);--t-body:clamp(17px,16.65px + .094vw,18px);
  --t-lead:clamp(18px,16.94px + .282vw,21px);--t-h3:clamp(20px,18.59px + .376vw,24px);--t-quote:clamp(22px,20.24px + .469vw,26px);
  --t-h2:clamp(28px,23.77px + 1.127vw,40px);--t-getal:clamp(28px,23.77px + 1.127vw,40px);--t-h1-sub:clamp(32px,26.37px + 1.502vw,48px);
  --t-h1:clamp(40px,31.55px + 2.254vw,64px);--t-knop:15px;--t-nav:15px;--measure:62ch;--measure-lead:48ch;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --sectie:clamp(56px,41.9px + 3.756vw,96px);--sectie-donker:clamp(64px,47.1px + 4.507vw,112px);--blok:clamp(32px,26.37px + 1.502vw,48px);
  --gap:clamp(16px,13.18px + .751vw,24px);--gutter:clamp(16px,4.73px + 3.005vw,48px);--container:1200px;--prose:620px;
  --r-knop:999px;--r-kaart:8px;--r-video:12px;--r-veld:6px;
  --schaduw-1:0 1px 2px rgba(36,8,26,.06),0 6px 16px rgba(36,8,26,.06);--schaduw-2:0 24px 64px rgba(36,8,26,.45);
  --d-1:150ms;--d-2:200ms;--d-3:320ms;--d-4:400ms;--ease-uit:cubic-bezier(.2,.7,.2,1);--ease-in-uit:cubic-bezier(.45,0,.2,1);--ease-in:cubic-bezier(.4,0,1,1);
  --header:56px;--actiebalk:56px;--hit:44px;
}
@media (min-width:1024px){:root{--header:64px}}
@media (prefers-reduced-motion:reduce){:root{--d-1:0ms;--d-2:0ms;--d-3:0ms;--d-4:0ms}}

/* ---------- basis ---------- */
.gtm-ns{display:none;visibility:hidden}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--f-body);font-size:var(--t-body);line-height:1.6;color:var(--tekst);background:var(--paper);-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:400}
ul,ol{margin:0;padding:0;list-style:none}
blockquote,figure{margin:0}
[id]{scroll-margin-top:calc(var(--header) + var(--s4))}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--geel);color:var(--aubergine)}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:var(--s4);top:-100px;z-index:1000;background:var(--aubergine);color:var(--wit);padding:var(--s3) var(--s4);border-radius:var(--r-veld);font-family:var(--f-ui);font-weight:600;text-decoration:none}
.skip:focus{top:var(--s4)}
.vv{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- typografie ---------- */
.kicker{display:inline-flex;align-items:center;gap:var(--s3);font-family:var(--f-ui);font-weight:600;font-size:var(--t-kicker);letter-spacing:.10em;text-transform:uppercase;line-height:1.3;color:var(--aubergine)}
.kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.donker .kicker,.hero .kicker,.afsluiter .kicker{color:var(--geel)}
.donker .kicker::before,.hero .kicker::before,.afsluiter .kicker::before{background:var(--geel)}
h1,.h1{font-family:var(--f-display);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1;font-size:var(--t-h1);max-width:12ch}
.h1-sub{font-size:var(--t-h1-sub);line-height:1.02;max-width:14ch}
h2,.h2{font-family:var(--f-kop);font-size:var(--t-h2);line-height:1.1;max-width:22ch;color:var(--aubergine)}
.donker h2,.afsluiter h2,.hero h2{color:var(--paper)}
h3,.h3{font-family:var(--f-body);font-weight:700;font-size:var(--t-h3);line-height:1.25}
.lead{font-size:var(--t-lead);line-height:1.5;max-width:var(--measure-lead);color:var(--tekst-2)}
.donker .lead,.hero .lead,.afsluiter .lead{color:var(--tekst-omgekeerd-2)}
.klein{font-size:var(--t-klein);line-height:1.45}
.prose{max-width:var(--prose)}
.prose>*+*{margin-top:var(--s4)}
.prose h2{margin-top:var(--s7)}
.prose h3{margin-top:var(--s6)}
.prose p{color:var(--tekst-2)}
.prose ul{padding-left:1.2em;list-style:disc;color:var(--tekst-2)}
.prose a:not(.knop){color:var(--aubergine);text-decoration-thickness:1px;text-underline-offset:3px}
.kopgroep{margin-bottom:var(--blok)}
.kopgroep h2{margin-top:var(--s3)}
.kopgroep .lead{margin-top:var(--s4)}
.kopgroep .notitie{margin-top:var(--s5);max-width:var(--prose)}
.kopgroep.midden{text-align:center}
.kopgroep.midden .lead,.kopgroep.midden h2{margin-inline:auto}
.bijschrift{font-size:var(--t-klein);line-height:1.45;color:var(--tekst-2);margin-top:var(--s2)}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);min-height:48px;padding:14px var(--s5);border-radius:var(--r-knop);font-family:var(--f-ui);font-weight:600;font-size:var(--t-knop);letter-spacing:.01em;line-height:1.2;text-decoration:none;text-align:center;background:var(--aubergine);color:var(--wit);border:1.5px solid var(--aubergine);transition:background var(--d-1),color var(--d-1),border-color var(--d-1)}
.knop:hover{background:var(--aubergine-diep);border-color:var(--aubergine-diep)}
.knop.sec{background:transparent;color:var(--aubergine)}
.knop.sec:hover{background:rgba(89,19,46,.08)}
.knop.klein{min-height:40px;padding:10px var(--s4);font-size:14px}
.knop.groot{min-height:52px;padding-block:16px;width:100%}
.op-donker .knop,.hero .knop,.afsluiter .knop,.donker .knop{background:var(--paper);color:var(--aubergine);border-color:var(--paper)}
.op-donker .knop:hover,.hero .knop:hover,.afsluiter .knop:hover,.donker .knop:hover{background:var(--wit);border-color:var(--wit)}
.op-donker .knop.sec,.hero .knop.sec,.afsluiter .knop.sec,.donker .knop.sec{background:transparent;color:var(--paper);border-color:rgba(244,241,234,.7)}
.op-donker .knop.sec:hover,.hero .knop.sec:hover,.afsluiter .knop.sec:hover,.donker .knop.sec:hover{background:rgba(244,241,234,.12)}
.schijf{width:28px;height:28px;border-radius:50%;background:var(--accent);display:inline-flex;align-items:center;justify-content:center;flex:none;transition:transform var(--d-1)}
.schijf svg{width:11px;height:11px;fill:var(--wit);margin-left:2px}
.knop:hover .schijf{transform:scale(1.08)}
.knop-icoon{width:var(--hit);height:var(--hit);display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--aubergine)}
.knop-icoon svg{width:22px;height:22px}
.tekstlink{font-family:var(--f-body);font-weight:700;color:var(--aubergine);text-decoration:none;display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--hit)}
.tekstlink::after{content:'→';transition:transform var(--d-1)}
.tekstlink:hover::after{transform:translateX(3px)}
.donker .tekstlink,.afsluiter .tekstlink{color:var(--paper)}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:900;height:var(--header);background:var(--paper);border-bottom:1px solid var(--lijn)}
.header .container{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.logo{display:flex;align-items:center;gap:var(--s3);text-decoration:none;color:var(--aubergine);min-height:var(--hit)}
.logo img{height:32px;width:auto}
.logo b{font-family:var(--f-display);font-weight:900;font-size:11px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
@media (max-width:379.98px){.logo b{display:none}}
.nav-desk{display:none}
.header-acties{display:flex;align-items:center;gap:var(--s2)}
.header-tel{display:none}
.hamburger span{display:block;width:20px;height:2px;background:currentColor;margin:0 auto;position:relative}
.hamburger span::before,.hamburger span::after{content:'';position:absolute;left:0;width:20px;height:2px;background:currentColor}
.hamburger span::before{top:-6px}.hamburger span::after{top:6px}
.menu{position:fixed;top:var(--header);left:0;right:0;bottom:0;z-index:890;background:var(--paper);border-top:1px solid var(--lijn);padding:var(--s4) var(--gutter) var(--s6);display:none;overflow:auto;flex-direction:column}
.menu:target,.menu.open{display:flex}
.menu ul li a{display:flex;align-items:center;min-height:56px;font-weight:700;font-size:20px;text-decoration:none;border-bottom:1px solid var(--lijn)}
.menu ul li a[aria-current=page]{color:var(--aubergine);box-shadow:inset 3px 0 0 var(--accent);padding-left:var(--s3)}
.menu-onder{margin-top:auto;padding-top:var(--s5);display:grid;gap:var(--s3)}
.menu-contact{display:flex;gap:var(--s4);flex-wrap:wrap}
.menu-contact a{min-height:var(--hit);display:inline-flex;align-items:center;font-family:var(--f-ui);font-weight:600;color:var(--aubergine);text-decoration:none}
.menu-sluit{display:none}
.menu:target .menu-sluit{display:flex;align-self:flex-end}
@media (min-width:1024px){
  .logo img{height:36px}.logo b{font-size:12px}
  .nav-desk{display:flex;gap:var(--s6)}
  .nav-desk a{font-family:var(--f-ui);font-weight:600;font-size:var(--t-nav);text-decoration:none;color:var(--tekst);position:relative;padding:var(--s3) 0;min-height:var(--hit);display:inline-flex;align-items:center}
  .nav-desk a::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:2px;background:transparent;transition:background var(--d-1)}
  .nav-desk a:hover::after{background:var(--aubergine)}
  .nav-desk a[aria-current=page]::after{background:var(--accent)}
  .header-tel{display:inline-flex;align-items:center;min-height:var(--hit);font-family:var(--f-ui);font-weight:600;font-size:14px;color:var(--aubergine);text-decoration:none;margin-right:var(--s3)}
  .header-acties .knop-icoon,.hamburger,.menu{display:none}
  .header-acties{gap:var(--s3)}
}
body.menu-open{overflow:hidden}

/* ---------- sticky actiebalk (mobiel) ---------- */
.actiebalk{position:fixed;left:0;right:0;bottom:0;z-index:880;background:var(--paper);border-top:1px solid var(--lijn);padding:var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);transform:translateY(110%);transition:transform 250ms var(--ease-uit)}
.actiebalk.zichtbaar{transform:none}
.actiebalk .knop{min-height:var(--hit);padding:12px var(--s3);font-size:14px}
@media (min-width:1024px),(max-height:479.98px){.actiebalk{display:none}}

/* ---------- secties ---------- */
.sectie{padding-block:var(--sectie)}
.sectie.donker{background:var(--aubergine-diep);color:var(--paper);padding-block:var(--sectie-donker)}
.sectie.cream{background:var(--cream)}
.sectie.wit{background:var(--wit)}
.sectie.strak{padding-block:var(--s6)}
.grid{display:grid;gap:var(--gap)}
.split{display:grid;gap:var(--blok)}
@media (min-width:900px){.split{grid-template-columns:5fr 7fr;align-items:center}.split.gelijk{grid-template-columns:1fr 1fr}.split.omgekeerd>:first-child{order:2}}
[data-reveal]{opacity:1;transform:none}
html.js [data-reveal]{opacity:0;transform:translateY(8px);transition:opacity var(--d-3) var(--ease-uit),transform var(--d-3) var(--ease-uit)}
html.js [data-reveal].in{opacity:1;transform:none}
html.js [data-reveal-groep]>*{opacity:0;transform:translateY(8px);transition:opacity var(--d-3) var(--ease-uit),transform var(--d-3) var(--ease-uit)}
html.js [data-reveal-groep].in>*{opacity:1;transform:none}
html.js [data-reveal-groep].in>:nth-child(2){transition-delay:60ms}
html.js [data-reveal-groep].in>:nth-child(3){transition-delay:120ms}
@media (min-width:1024px){html.js [data-reveal]{transform:translateY(12px)}}

/* ---------- hero ---------- */
.hero{position:relative;color:var(--paper);background:var(--aubergine-diep);display:flex;align-items:center;min-height:min(calc(100svh - var(--header)),640px);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero-media video{opacity:0;transition:opacity var(--d-4) var(--ease-uit)}
.hero-media.speelt video{opacity:1}
.hero-scrim{position:absolute;inset:0;background:var(--scrim-hero)}
.hero .container{position:relative;width:100%;padding-block:var(--s6) var(--s7)}
.hero-inhoud{max-width:640px;display:grid;gap:var(--s4)}
.hero h1{margin-top:var(--s2)}
.hero .lead{max-width:46ch;color:var(--tekst-omgekeerd-2)}
.hero-acties{display:grid;gap:var(--s3);margin-top:var(--s2)}
.hero-trust{font-family:var(--f-ui);font-weight:500;font-size:var(--t-klein);color:var(--tekst-omgekeerd-2);letter-spacing:.02em}
.pauze{position:absolute;right:var(--s4);bottom:var(--s4);width:40px;height:40px;border-radius:50%;background:rgba(36,8,26,.55);color:var(--paper);display:none;align-items:center;justify-content:center;z-index:2}
.pauze svg{width:16px;height:16px;fill:currentColor}
.speelt~.pauze,.hero-media.speelt+.hero-scrim+.container+.pauze{display:inline-flex}
.pauze.zichtbaar{display:inline-flex}
@media (min-width:600px){.hero-acties{grid-template-columns:auto auto;justify-content:start}}
@media (min-width:1024px){.hero{min-height:clamp(560px,82vh,720px)}.hero .container{padding-block:var(--s8)}}

/* sub-hero (subpagina's) */
.subhero{position:relative;background:var(--aubergine-diep);color:var(--paper);display:flex;align-items:flex-end;min-height:260px;overflow:hidden}
.subhero.licht{background:var(--cream);color:var(--tekst);min-height:0}
.subhero .hero-media{display:none}
@media (min-width:600px){.subhero .hero-media{display:block}}
.subhero .hero-media img{object-position:50% 35%}
.subhero.rechts .hero-media img{object-position:100% 40%}
@media (min-width:1024px){.subhero.rechts .subhero-inhoud{margin-inline-start:auto}.subhero.rechts .hero-scrim{background:linear-gradient(270deg,rgba(36,8,26,.72) 0%,rgba(36,8,26,.38) 55%,rgba(36,8,26,.10) 100%),linear-gradient(180deg,rgba(36,8,26,0) 60%,rgba(36,8,26,.45) 100%)}}
.subhero .container{position:relative;width:100%;padding-block:var(--s6)}
.subhero-inhoud{display:grid;gap:var(--s3);max-width:560px}
.subhero .lead{max-width:40ch}
.subhero h1{font-size:var(--t-h1-sub);line-height:1.02;max-width:14ch}
.subhero.licht h1{color:var(--aubergine)}
.subhero.licht .kicker{color:var(--aubergine)}
.subhero.licht .kicker::before{background:var(--accent)}
.subhero.licht .lead{color:var(--tekst-2)}
.subhero.licht .knop{background:var(--aubergine);color:var(--wit);border-color:var(--aubergine)}
.subhero .knop{justify-self:start;margin-top:var(--s2)}
.subhero .kicker{color:var(--geel)}
.subhero .kicker::before{background:var(--geel)}
.subhero .lead{color:var(--tekst-omgekeerd-2)}
.subhero .knop{background:var(--paper);color:var(--aubergine);border-color:var(--paper)}
.subhero .knop:hover{background:var(--wit);border-color:var(--wit)}
.subhero.licht .kicker{color:var(--aubergine)}
.subhero.licht .kicker::before{background:var(--accent)}
.subhero.licht .lead{color:var(--tekst-2)}
.subhero.licht .knop{background:var(--aubergine);color:var(--wit);border-color:var(--aubergine)}
.subhero.licht .knop:hover{background:var(--aubergine-diep);border-color:var(--aubergine-diep)}
@media (min-width:1024px){.subhero{min-height:clamp(320px,40vh,420px)}.subhero .container{padding-block:var(--s7)}.subhero.licht .container{padding-block:var(--s8) var(--s7)}}

/* ---------- kernfeiten ---------- */
.feiten{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.feit{border-left:3px solid var(--accent);padding:var(--s2) 0 var(--s2) var(--s4)}
.feit b{display:block;font-weight:700;font-size:var(--t-h3);line-height:1.25;color:var(--aubergine)}
.feit span{display:block;font-size:var(--t-klein);line-height:1.45;color:var(--tekst-2);margin-top:var(--s1)}
@media (min-width:600px){.feiten{grid-template-columns:repeat(4,1fr)}}

/* in het kort */
.kort{display:grid;gap:var(--s3)}
.kort li{display:flex;gap:var(--s3);align-items:flex-start}
.kort li::before{content:'';flex:none;width:24px;height:24px;border-radius:50%;background:var(--geel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2359132E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;margin-top:2px}
@media (min-width:600px){.kort{grid-template-columns:1fr 1fr;gap:var(--s3) var(--s6)}}

/* ---------- video-kaarten ---------- */
.videokaart{position:relative;margin:0;cursor:pointer}
.videokaart .kader{position:relative;aspect-ratio:9/16;border-radius:var(--r-video);overflow:hidden;background:var(--aubergine-diep);box-shadow:var(--schaduw-1)}
.videokaart .kader img,.videokaart .kader video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.videokaart .kader video{opacity:0;transition:opacity var(--d-4)}
.videokaart .kader video.speelt{opacity:1}
.videokaart .kader::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,8,26,0) 55%,rgba(36,8,26,.35) 100%);pointer-events:none}
.speel{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 8px 24px rgba(36,8,26,.35);transition:transform var(--d-1)}
.speel svg{width:22px;height:22px;fill:var(--wit);margin-left:3px}
.videokaart:hover .speel,.filmkaart:hover .speel{transform:scale(1.08)}
.speel.klein{width:48px;height:48px;margin:0;left:var(--s3);bottom:var(--s3);top:auto}
.speel.klein svg{width:18px;height:18px}
.duur{position:absolute;right:var(--s3);bottom:var(--s3);z-index:2;font-family:var(--f-ui);font-weight:600;font-size:12px;letter-spacing:.04em;color:var(--paper);background:rgba(36,8,26,.6);padding:4px 8px;border-radius:var(--r-veld)}
.badge{position:absolute;left:var(--s3);top:var(--s3);z-index:2;font-family:var(--f-ui);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--aubergine);background:var(--geel);padding:4px 8px;border-radius:var(--r-knop)}
.videokaart figcaption{margin-top:var(--s3)}
.videokaart figcaption b{display:block;font-weight:700;font-size:16px;line-height:1.3}
.videokaart figcaption span{display:block;font-size:var(--t-klein);color:var(--tekst-2)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:start}
.videokaart.solo{max-width:240px}
.duo.solo{grid-template-columns:min(62vw,240px)}
.hint{margin-top:var(--s5);font-size:var(--t-klein);color:var(--tekst-2);display:flex;gap:var(--s2);align-items:center}
.hint svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--aubergine);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:900px){.duo{grid-template-columns:repeat(2,minmax(0,260px));justify-content:end;gap:var(--gap)}}

/* filmkaart */
.filmkaart{position:relative;margin:0 auto;max-width:840px;cursor:pointer}
.filmkaart .kader{position:relative;aspect-ratio:16/9;border-radius:var(--r-video);overflow:hidden;background:var(--inkt);box-shadow:var(--schaduw-1)}
.filmkaart .kader img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.filmkaart .kader::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,8,26,.05),rgba(36,8,26,.35))}
.filmkaart .speel{width:56px;height:56px;margin:-28px 0 0 -28px}
.filmkaart .speel svg{width:22px;height:22px}
@media (min-width:600px){.filmkaart .speel{width:72px;height:72px;margin:-36px 0 0 -36px}.filmkaart .speel svg{width:28px;height:28px}}
.quote{font-family:var(--f-kop);font-size:var(--t-quote);line-height:1.4;color:var(--aubergine);max-width:40ch}
.donker .quote,.afsluiter .quote{color:var(--paper)}
.quote-bron{display:block;margin-top:var(--s3);font-family:var(--f-ui);font-weight:500;font-size:var(--t-klein);color:var(--tekst-2)}
.donker .quote-bron{color:var(--geel)}
.film-quote{max-width:840px;margin:var(--s6) auto 0;text-align:center}
.film-quote .quote{margin-inline:auto}

/* rail */
.rail-wrap{position:relative}
.rail{display:flex;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:var(--s1) var(--gutter) var(--s4);margin-inline:calc(-1 * var(--gutter));scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{flex:0 0 min(62vw,240px);scroll-snap-align:start}
.rail-pijlen{display:none}
@media (min-width:1024px){
  .rail{margin-inline:0;padding-inline:0;overflow:hidden}
  .rail>*{flex-basis:200px}
  .rail-pijlen{display:flex;gap:var(--s2);position:absolute;right:0;top:calc(-1 * var(--blok) - 8px)}
  .rail-pijlen button{width:var(--hit);height:var(--hit);border-radius:50%;border:1.5px solid var(--aubergine);color:var(--aubergine);display:inline-flex;align-items:center;justify-content:center}
  .rail-pijlen button:disabled{opacity:.35;cursor:default}
  .rail-pijlen svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
}
@media (min-width:1200px){.rail>*{flex-basis:216px}.rail{overflow-x:auto}}

/* ---------- stappen ---------- */
.stappen{display:grid}
.stappen li{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);padding:var(--s4) 0;border-top:1px solid var(--lijn)}
@media (min-width:900px){.stappen li{padding:var(--s5) 0}}
.stappen li:last-child{border-bottom:1px solid var(--lijn)}
.stappen .nr{font-family:var(--f-display);font-weight:900;font-size:var(--t-getal);line-height:1;color:var(--aubergine);font-variant-numeric:tabular-nums;min-width:2.2ch}
.stappen h3{margin-bottom:var(--s1)}
.stappen p{color:var(--tekst-2)}
.foto{margin:0}
.foto img{width:100%;border-radius:var(--r-kaart);aspect-ratio:4/3;object-fit:cover}
.foto.p34 img{aspect-ratio:16/10}
@media (min-width:900px){.foto.p34 img{aspect-ratio:3/4}}
.foto.p32 img{aspect-ratio:3/2}
.foto.p169 img{aspect-ratio:16/9}

/* ---------- routekaarten ---------- */
.routes{display:grid;gap:var(--s3)}
.routekaart{display:grid;grid-template-columns:96px 1fr;gap:var(--s4);align-items:center;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-kaart);text-decoration:none;padding:var(--s3);min-height:112px;position:relative;transition:border-color var(--d-1)}
.routekaart:hover{border-color:rgba(89,19,46,.4)}
.routekaart img{width:96px;height:96px;aspect-ratio:1;object-fit:cover;border-radius:var(--r-veld)}
.rk-tekst{min-width:0}
.routekaart h3{font-size:var(--t-body);margin-bottom:var(--s1)}
.routekaart p{font-size:var(--t-klein);color:var(--tekst-2)}
.routekaart .pijl{display:none}
.routekaart.blauw{background:color-mix(in srgb,var(--lichtblauw) 12%,var(--wit))}
@media (min-width:600px){
  .routes{grid-template-columns:repeat(3,1fr);gap:var(--gap)}
  .routekaart{grid-template-columns:1fr;align-items:start;padding:0 0 var(--s5);min-height:0}
  .routekaart img{width:100%;height:auto;aspect-ratio:4/3;border-radius:var(--r-kaart) var(--r-kaart) 0 0}
  .rk-tekst{padding-inline:var(--s4)}
  .routekaart h3{font-size:var(--t-h3);margin-top:var(--s4)}
  .routekaart p{font-size:var(--t-body);padding-right:var(--s8)}
  .routekaart .pijl{display:block;position:absolute;right:var(--s4);bottom:var(--s4);width:24px;height:24px;color:var(--aubergine)}
}

/* ---------- quotes + feitenrij ---------- */
.ouders{display:grid;gap:var(--blok)}
.quotes{display:grid;gap:var(--s5)}
.quotekaart{padding:var(--s4) 0;border-top:1px solid var(--lijn)}
.quotekaart .quote{font-size:clamp(22px,20.59px + .376vw,24px);line-height:1.35}
@media (min-width:900px){.quotekaart{padding:var(--s5) 0}}
.quotekaart:last-child{border-bottom:1px solid var(--lijn)}
.quotekaart.lang .quote{font-size:clamp(17px,16.2px + .25vw,19px);line-height:1.5;max-width:60ch;font-weight:500}
.quotekaart.uitgelicht{margin-top:var(--s6);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.quotekaart.uitgelicht .quote{max-width:72ch}
.feitenrij{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) var(--gap);margin-top:var(--blok)}
.feitenrij b{display:block;font-family:var(--f-display);font-weight:900;font-size:var(--t-getal);line-height:1;color:var(--aubergine);font-variant-numeric:tabular-nums}
.feitenrij span{display:block;font-size:var(--t-klein);color:var(--tekst-2);margin-top:var(--s2)}
.voetnoot{font-size:var(--t-klein);color:var(--tekst-2);margin-top:var(--s4)}
@media (min-width:600px){.feitenrij{grid-template-columns:repeat(4,1fr)}}
@media (min-width:900px){.ouders{grid-template-columns:5fr 7fr;align-items:start}}

/* ---------- afsluiter ---------- */
.afsluiter{position:relative;background:var(--aubergine);color:var(--paper);overflow:hidden;padding-block:var(--sectie-donker)}
.afsluiter .hero-media{display:none}
.afsluiter .container{position:relative}
.afsluiter-kop{max-width:720px}
.afsluiter-kop .lead{margin-top:var(--s4)}
.processtappen{display:grid;gap:var(--s4);margin-top:var(--blok)}
.processtappen li{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:baseline}
.processtappen .nr{font-family:var(--f-display);font-weight:900;font-size:var(--t-getal);line-height:1;color:var(--geel)}
.processtappen b{display:block;font-weight:700}
.processtappen span{display:block;font-size:var(--t-klein);color:var(--tekst-omgekeerd-2)}
.afsluiter-acties{margin-top:var(--blok);display:grid;gap:var(--s4)}
.contactrij{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.contactrij a{min-height:var(--hit);display:inline-flex;align-items:center;font-family:var(--f-ui);font-weight:600;color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(244,241,234,.4)}
.adressen{display:grid;gap:var(--s4);margin-top:var(--blok);padding-top:var(--s5);border-top:1px solid var(--lijn-omgekeerd);font-size:var(--t-klein);color:var(--tekst-omgekeerd-2)}
.adressen b{display:block;color:var(--paper);font-size:var(--t-body);margin-bottom:var(--s1)}
.adressen a{color:var(--paper);text-decoration:none}
@media (min-width:600px){.processtappen{grid-template-columns:repeat(3,1fr)}.adressen{grid-template-columns:1fr 1fr 1fr}}
@media (min-width:1024px){
  .afsluiter .hero-media{display:block}
  .afsluiter .hero-media img,.afsluiter .hero-media video{opacity:.0}
  .afsluiter .hero-media.speelt video{opacity:1}
  .afsluiter .hero-media img{opacity:1}
  .afsluiter .hero-scrim{background:var(--scrim-band)}
  .afsluiter-acties{grid-template-columns:auto 1fr;align-items:center;gap:var(--s6)}
}

/* ---------- footer ---------- */
.footer{background:var(--inkt);color:var(--tekst-omgekeerd-2);padding:var(--s8) 0 calc(var(--s6) + var(--actiebalk))}
.footer-boven{display:grid;gap:var(--s4);max-width:560px;margin-bottom:var(--s7)}
.footer-boven img{height:40px;width:auto}
.footer-boven p{color:var(--tekst-omgekeerd-2)}
.footer-kolommen{display:grid;gap:var(--s6)}
.footer h3{font-family:var(--f-ui);font-weight:600;font-size:var(--t-kicker);letter-spacing:.10em;text-transform:uppercase;color:var(--geel);margin-bottom:var(--s3)}
.footer li a{display:inline-flex;align-items:center;min-height:44px;color:var(--paper);text-decoration:none}
.footer li a:hover{text-decoration:underline;text-underline-offset:3px}
.footer-onder{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--lijn-omgekeerd);display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s5);font-size:var(--t-klein)}
.footer-onder a{color:var(--tekst-omgekeerd-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.nieuwsbrief{margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--lijn-omgekeerd);display:grid;gap:var(--s4)}
.nieuwsbrief p{color:var(--tekst-omgekeerd-2)}
.nb-velden{display:grid;gap:var(--s3)}
.nb-velden input{width:100%;min-height:48px;padding:var(--s3) var(--s4);font:inherit;font-size:17px;color:var(--tekst);background:var(--wit);border:1.5px solid transparent;border-radius:var(--r-veld)}
.nb-velden input:focus{outline:2px solid var(--geel);outline-offset:1px}
.nieuwsbrief .knop{background:var(--paper);color:var(--aubergine);border-color:var(--paper)}
.nieuwsbrief .knop:hover{background:var(--wit);border-color:var(--wit)}
.nieuwsbrief .form-succes{background:transparent;padding:0;color:var(--paper)}
.nieuwsbrief .form-fout{background:rgba(231,57,53,.16);color:var(--paper)}
.nieuwsbrief .form-fout a{color:var(--geel)}
.nieuwsbrief.klaar .nb-velden{display:none}
@media (min-width:600px){.footer-kolommen{grid-template-columns:repeat(3,1fr)}}
@media (min-width:768px){.nieuwsbrief{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:end}.nb-velden{grid-template-columns:1fr 1.4fr auto}}
@media (min-width:1024px){.footer{padding-bottom:var(--s6)}}

/* ---------- lightbox ---------- */
.lichtbak{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100svh;margin:0}
.lichtbak::backdrop{background:rgba(36,8,26,.94)}
.lichtbak[open]{display:flex;align-items:center;justify-content:center}
.lichtbak-inhoud{position:relative;width:min(92vw,960px);aspect-ratio:16/9;max-height:calc(100svh - 96px);background:#000;border-radius:var(--r-video);overflow:hidden;box-shadow:var(--schaduw-2)}
.lichtbak-inhoud.staand{width:min(92vw,440px);aspect-ratio:9/16}
.lichtbak-inhoud video,.lichtbak-inhoud iframe{width:100%;height:100%;border:0;display:block;background:#000}
.lichtbak-sluit{position:fixed;top:calc(var(--s3) + env(safe-area-inset-top));right:var(--s3);width:var(--hit);height:var(--hit);border-radius:50%;background:rgba(244,241,234,.14);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;z-index:2}
.lichtbak-sluit svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.lichtbak-noot{position:fixed;left:0;right:0;bottom:calc(var(--s4) + env(safe-area-inset-bottom));text-align:center;font-size:var(--t-klein);color:var(--tekst-omgekeerd-2);padding-inline:var(--gutter)}
@media (max-height:600px){.lichtbak-inhoud.staand{height:calc(100svh - 96px);width:auto}}

/* ---------- formulieren ---------- */
.veld{display:grid;gap:var(--s2)}
.veld label,.veldgroep>legend{font-family:var(--f-ui);font-weight:500;font-size:var(--t-klein);color:var(--tekst)}
.veld input,.veld select,.veld textarea{width:100%;min-height:52px;padding:var(--s3) var(--s4);font:inherit;font-size:17px;color:var(--tekst);background:var(--wit);border:1.5px solid rgba(36,8,26,.28);border-radius:var(--r-veld)}
.veld textarea{min-height:140px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:2px solid var(--aubergine);outline-offset:0;border-color:var(--aubergine)}
.veld .hintje{font-size:var(--t-klein);color:var(--tekst-2)}
.formulier{display:grid;gap:var(--s5)}
.veldgroep{border:0;padding:0;margin:0;display:grid;gap:var(--s2)}
.radios{display:grid;gap:var(--s2)}
.radios label{display:flex;align-items:center;gap:var(--s3);min-height:48px;padding:0 var(--s4);border:1.5px solid rgba(36,8,26,.28);border-radius:var(--r-veld);background:var(--wit);cursor:pointer;font-size:var(--t-body)}
.radios label:has(:checked){border-color:var(--aubergine);border-width:2px}
.radios input{width:20px;height:20px;accent-color:var(--aubergine);margin:0}
.checkveld{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--t-klein);color:var(--tekst-2)}
.checkveld input{width:20px;height:20px;accent-color:var(--aubergine);margin:2px 0 0;flex:none}
.notitie{background:var(--cream);border-left:3px solid var(--aubergine);padding:var(--s3) var(--s4);font-size:var(--t-klein);color:var(--tekst-2);border-radius:0 var(--r-veld) var(--r-veld) 0}
.form-succes{display:none;background:var(--cream);border-radius:var(--r-kaart);padding:var(--s5)}
.form-succes.zichtbaar{display:block}
@media (min-width:600px){.radios{grid-template-columns:1fr 1fr}.formulier .rij{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.form-fout{background:#FBEDEC;border-left:3px solid var(--koraal);padding:var(--s3) var(--s4);border-radius:0 var(--r-veld) var(--r-veld) 0;font-size:var(--t-klein);color:var(--tekst)}
.form-fout a{color:var(--aubergine)}
.knop[aria-busy=true]{opacity:.7;cursor:progress}

/* ---------- accordeon / faq ---------- */
.faq details{border-top:1px solid var(--lijn)}
.faq details:last-child{border-bottom:1px solid var(--lijn)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:56px;padding:var(--s3) 0;font-weight:700;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--f-ui);font-size:24px;color:var(--aubergine);flex:none;width:32px;text-align:center}
.faq details[open] summary::after{content:'−'}
.faq details>div{padding:0 0 var(--s5);color:var(--tekst-2);max-width:var(--prose)}
.faq details>div>*+*{margin-top:var(--s3)}

/* ---------- locatiekaarten / kaarten ---------- */
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-kaart);padding:var(--s5)}
.kaart h3{margin-bottom:var(--s3)}
.kaart p,.kaart li{color:var(--tekst-2)}
.kaart .meta{font-family:var(--f-ui);font-weight:500;font-size:var(--t-klein);color:var(--aubergine);margin-bottom:var(--s2)}
.kaart-acties{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4)}
.kaarten-2 .kaart:has(.kaart-acties){display:flex;flex-direction:column}
.kaarten-2 .kaart .kaart-acties{margin-top:auto;padding-top:var(--s4)}
.kaarten-2{display:grid;gap:var(--gap)}
.kaarten-4{display:grid;gap:var(--gap)}
@media (min-width:600px){.kaarten-2,.kaarten-4{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.kaarten-4{grid-template-columns:repeat(4,1fr)}}
.kaart address{font-style:normal;color:var(--tekst-2)}
.kaart address a{color:var(--aubergine);text-decoration:none;font-weight:700}
.tinten{background:color-mix(in srgb,var(--lichtblauw) 12%,var(--cream))}
dl.def{display:grid;gap:var(--s3)}
dl.def dt{font-weight:700}
dl.def dd{margin:0;color:var(--tekst-2)}
@media (min-width:600px){dl.def{grid-template-columns:auto 1fr;gap:var(--s3) var(--s5)}}
.kaart dl.def{grid-template-columns:1fr}
.kaart p b{font-family:var(--f-ui);font-weight:600;font-size:var(--t-klein);color:var(--aubergine)}

/* ---------- hulpjes ---------- */
.rij-acties{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.mt-blok{margin-top:var(--blok)}
.mt-s5{margin-top:var(--s5)}
.mt-s6{margin-top:var(--s6)}
.mt-s7{margin-top:var(--s7)}
.midden{text-align:center}
.midden .lead{margin-inline:auto}
.desk-alleen{display:none}
@media (min-width:1024px){.desk-alleen{display:block}}
.ruimte-onder{height:calc(var(--actiebalk) + env(safe-area-inset-bottom))}
@media (min-width:1024px){.ruimte-onder{display:none}}

/* inline links: tikdoel ≥ 44 px zonder de regelval te veranderen */
.adressen a,.kaart address a,main p a:not(.knop),main dd a,.kort a,.faq a,.checkveld a,.notitie a{display:inline-block;padding:13px 0;margin:-13px 0}

/* ---------- vergelijkingslijst (Extra Care) ---------- */
.vergelijk{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-kaart);padding:0 var(--s5)}
.vergelijk-kop{display:none}
.vergelijk-rij{display:grid;gap:var(--s3);padding:var(--s5) 0;border-top:1px solid var(--lijn)}
.vergelijk-rij:first-of-type{border-top:0}
.vergelijk-rij h3{font-size:var(--t-h3);color:var(--aubergine);overflow-wrap:anywhere;hyphens:auto}
.vergelijk-rij p{color:var(--tekst-2);font-size:var(--t-klein);line-height:1.5}
.vergelijk .lbl{display:block;font-family:var(--f-ui);font-weight:600;font-size:var(--t-kicker);letter-spacing:.06em;text-transform:uppercase;color:var(--aubergine);margin-bottom:2px}
@media (min-width:900px){
  .vergelijk{padding:0 var(--s6)}
  .vergelijk-kop{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr) minmax(0,1.6fr) minmax(0,1.4fr);gap:var(--gap);padding:var(--s4) 0 var(--s3);font-family:var(--f-ui);font-weight:600;font-size:var(--t-kicker);letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-2)}
  .vergelijk-rij{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr) minmax(0,1.6fr) minmax(0,1.4fr);gap:var(--gap);align-items:start;padding:var(--s5) 0}
  .vergelijk-rij:first-of-type{border-top:1px solid var(--lijn)}
  .vergelijk-rij p{font-size:var(--t-body);line-height:1.55}
  .vergelijk .lbl{display:none}
}