/* ============================================================
   LOGO-PALETTE POSTER
   Every visible colour is sampled directly from the A4D logo.
   No black, no grey: just the 7 logo hues + paper.
     --paper   #F0F0F0   (logo background)
     --ink     #783078   (logo darkest purple · 7.2:1 on paper, AAA large / AA body)
     --red     #CD1626   (logo crimson · 5.5:1 on paper, AA)
     --pink    #E61873   (logo hot pink · 4.6:1 on paper, AA large)
     --purple  #82358C   (logo mid purple · 6.2:1 on paper, AA body)
     --teal    #0092BA   (logo teal · 4.7:1 on paper, AA large)
     --green   #2FAC66   (logo green · 3.2:1 on paper, AA UI-graphic; text uses --ink)
     --lime    #96C11F   (logo lime · 2.1:1 on paper, AA UI-graphic only; text on --ink)
   Focus ring uses --ink over paper, --paper over coloured fills.
   ============================================================ */
:root{
  --paper:#F0F0F0;
  --ink:#783078;
  --red:#CD1626;
  --pink:#E61873;
  --purple:#82358C;
  --teal:#0092BA;
  --green:#2FAC66;
  --lime:#96C11F;
  --focus:#783078;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Archivo', system-ui, -apple-system, sans-serif;
  font-size:17px;line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
::selection{background:var(--lime);color:var(--ink)}

/* focus */
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
.on-colour :focus-visible,
.btn-primary:focus-visible,
.route:focus-visible,
.stat:focus-visible,
.vol-band :focus-visible,
.foot :focus-visible{outline-color:var(--paper)}

/* skip link */
.skip{
  position:absolute;left:12px;top:-80px;z-index:200;
  padding:12px 18px;
  background:var(--ink);color:var(--paper);
  font-family:'Archivo Black', sans-serif;
  font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;
}
.skip:focus{top:12px;outline:3px solid var(--paper);outline-offset:3px}

/* wrap */
.wrap{max-width:1320px;margin:0 auto;padding:0 32px}
@media (max-width:720px){.wrap{padding:0 18px}}

/* ============ TYPE HELPERS ============ */
.blk{font-family:'Archivo Black', sans-serif;letter-spacing:-.02em;line-height:.9}
.upper{text-transform:uppercase;letter-spacing:.1em}
.caps{font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:13px}

/* ============ MAST ============ */
.mast{
  position:sticky;top:0;z-index:40;
  background:var(--paper);
  border-bottom:3px solid var(--ink);
  padding:14px 32px;
  display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;
}
.mast-burger{display:none}

/* planner-user-menu: client-side gerenderd na whoami-fetch, alleen ingelogd.
   Selectors worden expliciet bovenop .mast geprefixt (waar het user-menu in zit) zodat we
   niet vechten met .mast nav a-styling-cascade. */
.mast .planner-user-menu{position:relative;display:inline-flex;align-items:center}
.mast .planner-user-menu-toggle{
  display:inline-flex !important;align-items:center;gap:8px;
  padding:4px 12px 4px 4px;min-height:40px;
  background:transparent;border:2px solid var(--ink);
  border-radius:999px;cursor:pointer;
  font-family:'Archivo', sans-serif;font-weight:600;font-size:13px;
  color:var(--ink);
}
.mast .planner-user-menu-toggle:hover{background:var(--paper);border-color:var(--purple);color:var(--purple)}
.mast .planner-user-avatar{
  display:inline-flex !important;align-items:center;justify-content:center;
  width:32px !important;height:32px !important;
  border-radius:50%;overflow:hidden;background:var(--paper);
  flex:0 0 auto;
}
.mast .planner-user-avatar > *{width:100%;height:100%;display:block}
.mast .planner-user-avatar svg,
.mast .planner-user-avatar img{width:100% !important;height:100% !important;display:block;max-width:none}
.mast .planner-user-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mast .planner-user-arrow{font-size:10px;transition:transform .2s}
.mast .planner-user-menu.open .planner-user-arrow{transform:rotate(180deg)}
.mast .planner-user-dropdown{
  display:none !important;position:absolute;top:calc(100% + 12px);right:0;min-width:220px;
  background:var(--paper);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  z-index:60;
  flex-direction:column;
}
.mast .planner-user-menu.open .planner-user-dropdown{display:flex !important}
.mast .planner-user-item{
  display:flex !important;align-items:center;gap:8px;
  padding:10px 14px !important;min-height:auto !important;
  text-decoration:none !important;
  color:var(--ink) !important;
  font-family:'Archivo', sans-serif;font-weight:600;font-size:14px;
  border:none !important;border-bottom:1px solid rgba(120,48,120,.12) !important;
  letter-spacing:normal;
}
.mast .planner-user-item:last-child{border-bottom:none !important}
.mast .planner-user-item:hover{background:rgba(120,48,120,.08) !important;color:var(--purple) !important}
.mast .planner-user-sep{border-top:2px solid var(--ink) !important}
.mast .planner-user-logout{color:var(--red) !important}
.mast .planner-user-logout:hover{color:var(--red) !important;background:rgba(205,22,38,.08) !important}
@media (max-width:980px){
  /* Mobile: user-menu blijft naast de hamburger zichtbaar; dropdown valt eronder uit */
  .mast{grid-template-columns:1fr auto auto;gap:8px}
  .mast .planner-user-name{display:none}
  .mast .planner-user-dropdown{right:0}
}
.mast .brand{
  display:inline-flex;align-items:center;gap:12px;
  font-family:'Archivo Black', sans-serif;font-size:18px;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink);min-height:44px;
}
.mast .brand img{width:36px;height:36px;object-fit:contain}
.mast nav{display:flex;gap:2px;justify-content:center;flex-wrap:wrap}
.mast nav a{
  padding:10px 12px;min-height:44px;display:inline-flex;align-items:center;
  font-family:'Archivo', sans-serif;font-weight:600;font-size:14px;
  color:var(--ink);letter-spacing:.04em;
  border-bottom:3px solid transparent;
  transition:border-color .2s, color .2s;
}
.mast nav a:hover{border-bottom-color:var(--red);color:var(--red)}
.mast nav a[data-c="p"]:hover{border-bottom-color:var(--pink);color:var(--pink)}
.mast nav a[data-c="t"]:hover{border-bottom-color:var(--teal);color:var(--teal)}
.mast nav a[data-c="g"]:hover{border-bottom-color:var(--green);color:var(--green)}
.mast nav a[data-c="l"]:hover{border-bottom-color:var(--purple);color:var(--purple)}

/* active state, zelfde kleur als hover, maar persistent */
.mast nav a[aria-current="page"]{border-bottom-color:var(--red);color:var(--red)}
.mast nav a[aria-current="page"][data-c="p"]{border-bottom-color:var(--pink);color:var(--pink)}
.mast nav a[aria-current="page"][data-c="t"]{border-bottom-color:var(--teal);color:var(--teal)}
.mast nav a[aria-current="page"][data-c="g"]{border-bottom-color:var(--green);color:var(--green)}
.mast nav a[aria-current="page"][data-c="l"]{border-bottom-color:var(--purple);color:var(--purple)}

.mast .cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;min-height:44px;
  background:var(--ink);color:var(--paper);
  font-family:'Archivo Black', sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  border-radius:999px;
}
.mast .cta:hover{background:var(--red)}
@media (max-width:980px){
  .mast{grid-template-columns:1fr auto auto;gap:8px}
  /* Hamburger toggle, alleen zichtbaar onder 980px */
  .mast-burger{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:0;
    background:transparent;color:var(--ink);
    border:2px solid var(--ink);cursor:pointer;border-radius:0;
  }
  .mast-burger .bar{
    display:block;width:22px;height:3px;background:var(--ink);margin:0 auto;
    transition:transform .2s ease, opacity .15s ease;
  }
  .mast-burger:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
  .mast-burger[aria-expanded="true"] .bar:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .mast-burger[aria-expanded="true"] .bar:nth-child(2){opacity:0}
  .mast-burger[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  /* Nav klapt onder de mast */
  .mast nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:3px solid var(--ink);
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px 0;justify-content:flex-start;
    box-shadow:0 8px 0 rgba(120,48,120,.08);
  }
  .mast nav.is-open{display:flex}
  .mast nav a{
    padding:14px 32px;min-height:48px;
    border-bottom:none;border-left:6px solid transparent;
  }
  .mast nav a:hover,
  .mast nav a[aria-current="page"]{
    border-bottom-color:transparent;border-left-color:var(--red);
    background:rgba(205,22,38,.04);
  }
  .mast nav a[data-c="p"]:hover{border-left-color:var(--pink);background:rgba(230,24,115,.04)}
  .mast nav a[data-c="t"]:hover{border-left-color:var(--teal);background:rgba(0,146,186,.04)}
  .mast nav a[data-c="g"]:hover{border-left-color:var(--green);background:rgba(47,172,102,.04)}
  .mast nav a[data-c="l"]:hover{border-left-color:var(--purple);background:rgba(130,53,140,.04)}
}
@media (max-width:540px){.mast .brand{font-size:15px}.mast .brand img{width:30px;height:30px}}

/* ============ HERO ============ */
.hero{
  position:relative;
  padding:96px 0 120px;
  overflow:hidden;
  isolation:isolate;
}
.hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;
  position:relative;z-index:2;
}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;gap:40px}}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:'Archivo Black', sans-serif;
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);
  padding:8px 14px;
  border:2px solid var(--red);
  border-radius:999px;
  margin-bottom:28px;
}
.hero-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:hbeat 1.6s ease-in-out infinite}
@keyframes hbeat{0%,100%{transform:scale(1)}50%{transform:scale(1.5);opacity:.6}}

.hero h1{
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(56px, 9vw, 148px);
  line-height:.88;letter-spacing:-.03em;
  margin:0 0 28px;
  color:var(--ink);
}
.hero h1 span{display:block;overflow:hidden}
.hero h1 em{display:inline-block;font-style:normal;transform:translateY(100%);animation:up 1.1s cubic-bezier(.2,.9,.3,1) forwards}
.hero h1 span:nth-child(1) em{animation-delay:.1s;color:var(--red)}
.hero h1 span:nth-child(2) em{animation-delay:.26s;color:var(--teal)}
.hero h1 span:nth-child(3) em{animation-delay:.42s;color:var(--green)}
.hero h1 span:nth-child(4) em{animation-delay:.58s;color:var(--ink)}
@keyframes up{to{transform:translateY(0)}}

.hero-meta{
  font-size:19px;max-width:52ch;margin:0 0 32px;color:var(--ink);
  opacity:0;animation:fadeIn 1s ease .75s forwards;
}
.hero-meta strong{font-family:'Archivo Black', sans-serif;font-weight:400;color:var(--purple)}
@keyframes fadeIn{to{opacity:1}}

.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;opacity:0;animation:fadeIn 1s ease .9s forwards}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:18px 28px;min-height:48px;
  font-family:'Archivo Black', sans-serif;font-size:15px;letter-spacing:.08em;text-transform:uppercase;
  border:3px solid var(--ink);
  transition:transform .15s, box-shadow .15s, background .2s;
  border-radius:0;
  cursor:pointer;
}
.btn-primary{background:var(--ink);color:var(--paper);box-shadow:6px 6px 0 var(--lime)}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--lime);background:var(--red);border-color:var(--ink)}
.btn-primary:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--lime)}
.btn-secondary{background:var(--paper);color:var(--ink);box-shadow:6px 6px 0 var(--teal)}
.btn-secondary:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--teal)}
.btn-secondary:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--teal)}

/* hero logo block */
.hero-logo{
  position:relative;
  min-height:480px;
  display:grid;place-items:center;
}
.hero-logo img{
  position:relative;z-index:4;
  width:min(92%, 380px);
  filter:drop-shadow(6px 6px 0 var(--ink));
}

/* framing shapes around logo: decorative, never on top of image */
.shape{position:absolute;pointer-events:none;z-index:1}
.shape.a{top:-20px;right:4%;width:220px;height:220px;background:var(--lime);border-radius:50%;animation:floaty 9s ease-in-out infinite}
.shape.b{bottom:6%;left:-6%;width:200px;height:200px;background:var(--teal);border-radius:50% 50% 0 50%;transform:rotate(14deg);animation:floaty 11s ease-in-out infinite reverse}
.shape.c{top:45%;right:-5%;width:140px;height:260px;background:var(--pink);border-radius:80px;transform:rotate(-10deg);animation:floaty 10s ease-in-out infinite 1s}
.shape.d{top:10%;left:4%;width:64px;height:64px;background:var(--red);border-radius:50%;z-index:2}
.shape.e{bottom:26%;right:24%;width:42px;height:42px;background:var(--green);border-radius:50%;z-index:2}

@keyframes floaty{0%,100%{transform:translate(0,0) rotate(var(--r,0deg))}50%{transform:translate(0,-18px) rotate(var(--r,0deg))}}
.shape.b{--r:14deg}.shape.c{--r:-10deg}

/* hero background blobs */
.bg-blob{position:absolute;z-index:0;pointer-events:none;opacity:.9}
.bg-blob.one{top:-200px;left:-220px;width:620px;height:620px;background:var(--purple);border-radius:50%;opacity:.18}
.bg-blob.two{bottom:-260px;right:-180px;width:520px;height:680px;background:var(--red);border-radius:260px 60px 260px 60px;transform:rotate(14deg);opacity:.12}

/* ============ SECTION HEAD ============ */
.section-head{
  display:inline-block;
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(36px, 5vw, 64px);
  line-height:.9;letter-spacing:-.02em;text-transform:lowercase;
  margin:0 0 48px;
  padding:10px 22px 14px;
  color:var(--paper);
  border-radius:16px;
  transform:rotate(-1deg);
}
.section-head.red{background:var(--red)}
.section-head.teal{background:var(--teal)}
.section-head.green{background:var(--green)}
.section-head.purple{background:var(--purple)}
.section-head.pink{background:var(--pink)}
.section-head.lime{background:var(--lime);color:var(--ink)}

section{padding:112px 0;position:relative}

/* ============ STATS ============ */
.stats{background:var(--paper);padding-top:120px;padding-bottom:120px}
.stats-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:28px;align-items:center;
}
.stat{
  position:relative;
  aspect-ratio:1;
  display:grid;place-items:center;
  text-align:center;
  padding:20px;
}
.stat-shape{position:absolute;inset:0;z-index:0;transition:transform .4s cubic-bezier(.2,.9,.3,1)}
.stat:hover .stat-shape{transform:scale(1.06) rotate(var(--rr,3deg))}
.stat-text{position:relative;z-index:2;color:var(--paper)}
.stat-num{
  display:block;
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(40px, 5vw, 72px);line-height:.95;letter-spacing:-.03em;
}
.stat-label{
  display:block;margin-top:8px;
  font-family:'Archivo', sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;
}
.stat.s1 .stat-shape{background:var(--red);border-radius:50%;--rr:6deg}
.stat.s2 .stat-shape{background:var(--teal);border-radius:180px 28px 180px 28px;transform:rotate(-4deg);--rr:-8deg}
.stat.s3 .stat-shape{background:var(--lime);border-radius:28px}
.stat.s3 .stat-text{color:var(--ink)}
.stat.s4 .stat-shape{background:var(--green);border-radius:50% 50% 0 50%;transform:rotate(8deg);--rr:2deg}
.stat.s5 .stat-shape{background:var(--pink);border-radius:50%;--rr:-6deg}

@media (max-width:1080px){.stats-grid{grid-template-columns:repeat(5,1fr);gap:14px}.stat-num{font-size:clamp(28px,4vw,56px)}}
@media (max-width:780px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:20px}.stat.s5{grid-column:span 2;max-width:60%;margin:0 auto}}

/* ============ ROUTES ============ */
.routes{background:var(--paper)}
.routes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.route{
  position:relative;
  padding:26px;
  border:3px solid var(--ink);
  background:var(--paper);
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  transition:transform .25s, box-shadow .25s;
  box-shadow:5px 5px 0 var(--ink);
}
.route:hover, .route:focus-within{transform:translate(-2px,-2px) rotate(-.4deg);box-shadow:8px 8px 0 var(--ink)}
/* Klikbare blokken (route, school, faq-item--link) als <a>: geen onderlijning, kleur erven */
a.route, a.school, a.faq-item--link{text-decoration:none;color:inherit}
a.route:focus-visible, a.school:focus-visible, a.faq-item--link:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
a.school{cursor:pointer;transition:transform .2s, box-shadow .2s}
a.school:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
a.faq-item--link{cursor:pointer}
.route::before{
  content:"";position:absolute;pointer-events:none;
  top:62px;left:8px;width:118px;height:0;
  border-top:3px dashed var(--ink);
  opacity:.32;z-index:0;
}
.route.r7::before{border-top-color:var(--lime);opacity:.55}
.route-num{
  position:relative;z-index:2;
  width:72px;height:72px;
  display:grid;place-items:center;
  font-family:'Archivo Black', sans-serif;font-size:30px;line-height:1;letter-spacing:-.02em;
  color:var(--paper);
  border:3px solid var(--ink);
  border-radius:50%;
  transition:transform .35s cubic-bezier(.2,.9,.3,1);
}
.route-body{position:relative;z-index:1}
.route.r1 .route-num{background:var(--red)}
.route.r2 .route-num{background:var(--teal);border-radius:18px;transform:rotate(-4deg)}
.route.r3 .route-num{background:var(--green);border-radius:50% 50% 0 50%;transform:rotate(8deg)}
.route.r4 .route-num{background:var(--pink);border-radius:50% 50% 0 0;transform:rotate(-6deg)}
.route.r5 .route-num{background:var(--lime);color:var(--ink);border-radius:50% / 28%;transform:rotate(4deg)}
.route.r6 .route-num{background:var(--purple);border-radius:6px 38px 6px 38px;transform:rotate(-3deg)}
.route.r7 .route-num{background:var(--ink);color:var(--lime)}
.route:hover .route-num,.route:focus-within .route-num{transform:rotate(0) scale(1.06)}

.route-body{min-width:0}
.route-name{
  font-family:'Archivo Black', sans-serif;
  font-size:22px;line-height:1.05;letter-spacing:-.01em;
  margin:0 0 12px;color:var(--ink);
}
.route-meta{
  display:grid;grid-template-columns:auto 1fr;gap:6px 10px;margin:0;
  font-size:14px;
}
.route-meta dt{color:var(--purple);display:inline-flex;align-items:center}
.route-meta dt svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.route-meta dd{margin:0;color:var(--ink);font-weight:600}

.route.r7{
  background:var(--ink);color:var(--paper);
}
.route.r7 .route-name{color:var(--paper)}
.route.r7 .route-meta dt{color:var(--lime)}
.route.r7 .route-meta dd{color:var(--paper)}
.route.r7 .route-num{background:var(--lime);color:var(--ink);border-color:var(--lime)}

@media (max-width:1080px){.routes-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.routes-grid{grid-template-columns:1fr}}

/* ============ SCHOLEN ============ */
.scholen{background:var(--paper)}
.scholen-row{
  display:grid;grid-template-columns:repeat(5,1fr);gap:20px;
}
.school{
  padding:28px 20px;
  text-align:center;
  border:3px solid var(--ink);
  background:var(--paper);
  font-family:'Archivo Black', sans-serif;
  font-size:17px;line-height:1.15;letter-spacing:-.005em;
  color:var(--ink);
  position:relative;
  transition:transform .2s, background .2s, color .2s, box-shadow .2s;
  border-radius:14px;
  box-shadow:4px 4px 0 var(--ink);
}
.school::before{
  content:"";display:block;width:26px;height:26px;margin:0 auto 14px;
  border-radius:50%;
  background:currentColor;
}
.school.c1{color:var(--red)}
.school.c2{color:var(--teal)}
.school.c3{color:var(--green)}
.school.c4{color:var(--pink)}
.school.c5{color:var(--purple)}
.school:hover{transform:translate(-2px,-2px) rotate(-1.5deg);box-shadow:7px 7px 0 var(--ink)}
.school .name{color:var(--ink);display:block;margin-top:2px}
@media (max-width:960px){.scholen-row{grid-template-columns:repeat(3,1fr)}.school:nth-child(4){grid-column:1 / 3}.school:nth-child(5){grid-column:3 / 4}}
@media (max-width:560px){.scholen-row{grid-template-columns:1fr 1fr}.school:nth-child(5){grid-column:1 / 3;max-width:60%;margin:0 auto}.school:nth-child(4){grid-column:auto}}

/* ============ FAQ ============ */
.faq{background:var(--paper)}
.faq-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  counter-reset:faq;
}
.faq-item{
  counter-increment:faq;
  padding:28px 28px 28px 92px;
  background:var(--paper);
  border:3px solid var(--ink);
  position:relative;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .2s, box-shadow .2s;
}
.faq-item:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.faq-item::before{
  content:counter(faq, decimal-leading-zero);
  position:absolute;top:22px;left:22px;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  font-family:'Archivo Black', sans-serif;font-size:19px;color:var(--paper);
}
.faq-item.q1::before{background:var(--red)}
.faq-item.q2::before{background:var(--teal)}
.faq-item.q3::before{background:var(--green)}
.faq-item.q4::before{background:var(--pink)}
.faq-item.q5::before{background:var(--purple)}
.faq-item.q6::before{background:var(--lime);color:var(--ink)}
.faq-item h3{
  font-family:'Archivo Black', sans-serif;font-size:21px;line-height:1.1;letter-spacing:-.01em;
  margin:0 0 10px;color:var(--ink);
}
.faq-item p{margin:0;font-size:15px;line-height:1.55}
@media (max-width:760px){.faq-list{grid-template-columns:1fr}}

/* ============ VOLUNTEER ============ */
.vol-band{
  position:relative;
  background:var(--purple);color:var(--paper);
  padding:96px 0;
  overflow:hidden;
}
.vol-band::before, .vol-band::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
}
.vol-band::before{width:320px;height:320px;background:var(--pink);top:-80px;left:-100px;opacity:.55}
.vol-band::after{width:260px;height:260px;background:var(--lime);bottom:-120px;right:-80px;border-radius:60% 60% 0 60%;transform:rotate(24deg);opacity:.55}
.vol-inner{
  max-width:1080px;margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:center;
  position:relative;z-index:2;
}
.vol-inner h2{
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(48px, 7vw, 108px);line-height:.9;letter-spacing:-.03em;
  margin:0 0 20px;
}
.vol-inner h2 em{font-style:normal;color:var(--lime);display:inline-block}
.vol-inner p{font-size:19px;max-width:50ch;margin:0 0 28px}
.vol-band .btn-primary{background:var(--lime);color:var(--ink);border-color:var(--ink);box-shadow:6px 6px 0 var(--ink)}
.vol-band .btn-primary:hover{background:var(--paper);box-shadow:8px 8px 0 var(--ink)}
.vol-stats{
  background:var(--paper);color:var(--ink);
  border:3px solid var(--ink);padding:26px;
  box-shadow:8px 8px 0 var(--ink);
  display:grid;gap:18px;
}
.vs-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;padding-bottom:14px;border-bottom:2px dotted var(--ink)}
.vs-row:last-child{border-bottom:0;padding-bottom:0}
.vs-row .l{font-family:'Archivo', sans-serif;font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--purple)}
.vs-row .v{font-family:'Archivo Black', sans-serif;font-size:34px;line-height:.9;color:var(--ink)}
@media (max-width:820px){.vol-inner{grid-template-columns:1fr}}

/* ============ FOOTER ============ */
.foot{
  background:var(--ink);color:var(--paper);
  padding:88px 0 32px;
  position:relative;
}
.foot-inner{max-width:1320px;margin:0 auto;padding:0 32px}
.signoff{
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(56px, 9vw, 164px);
  line-height:.88;letter-spacing:-.03em;
  margin:0 0 48px;
  color:var(--paper);
}
.signoff em{font-style:normal;color:var(--lime)}
.signoff .red{color:var(--red)}
.signoff .teal{color:var(--teal)}
.signoff .pink{color:var(--pink)}

.foot-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;
  padding-top:40px;border-top:3px solid var(--lime);
}
.foot h4{
  font-family:'Archivo Black', sans-serif;
  font-size:14px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lime);margin:0 0 14px;
}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{padding:4px 0;font-size:15px}
.foot a:hover{color:var(--lime)}
.foot-brand{
  font-family:'Archivo Black', sans-serif;font-size:22px;line-height:1.05;letter-spacing:-.01em;color:var(--paper);
  margin:0 0 10px;
}
.foot-meta{
  margin-top:36px;padding-top:20px;
  border-top:1px solid rgba(240,240,240,.22);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-family:'Archivo', sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper);opacity:.8;
}
.foot-meta em{font-style:normal;color:var(--lime);letter-spacing:.12em}
.foot-credit{display:inline-flex;align-items:center;gap:5px;text-decoration:none;color:inherit;opacity:.7;transition:opacity .2s}
.foot-credit:hover{opacity:1;color:inherit}
.foot-credit img{display:block;border-radius:3px}

@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.9,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ============ PAGE (subpagina layout) ============ */
.page{padding:80px 0 96px}
.page-head{margin:0 0 40px}
.page-head .eyebrow{
  display:inline-block;font-family:'Archivo Black', sans-serif;
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--purple);margin-bottom:14px;
}
.page-head h1{
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(48px, 7vw, 96px);line-height:.9;letter-spacing:-.03em;
  margin:0;color:var(--ink);
}
.page-body{max-width:72ch;font-size:17px;line-height:1.65}
.page-body h2{
  font-family:'Archivo Black', sans-serif;font-size:28px;line-height:1.1;
  margin:48px 0 14px;color:var(--ink);
}
.page-body h3{
  font-family:'Archivo Black', sans-serif;font-size:20px;line-height:1.15;
  margin:32px 0 10px;color:var(--purple);
}
.page-body p{margin:0 0 16px}
.page-body ul, .page-body ol{margin:0 0 16px;padding-left:24px}
.page-body li{margin:0 0 6px}
.page-body a{color:var(--red);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.page-body a:hover{color:var(--ink);background:var(--lime)}
/* Buttons binnen page-body mogen NIET de tekst-link styling erven (rood + underline). */
.page-body a.btn{text-decoration:none}
.page-body a.btn:hover{background:initial}
.page-body a.btn-primary{color:var(--paper)}
.page-body a.btn-primary:hover{color:var(--paper);background:var(--red)}
.page-body a.btn-secondary{color:var(--ink)}
.page-body a.btn-secondary:hover{color:var(--ink);background:var(--paper)}

/* Mast-actions: container voor lang-toggle + planner-user-menu, rechtsboven in de mast.
   Toggle staat default. Bij ingelogde planner-user verbergt JS 'm en pakt de
   user-menu z'n plek (incl. eigen language-item in de dropdown). */
.mast-actions{display:inline-flex;align-items:center;gap:12px}
.mast .lang-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;padding:5px 10px;
  font-family:'Archivo Black', sans-serif;
  font-size:12px;letter-spacing:.08em;
  color:var(--ink);
  background:var(--paper);
  border:2px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);
  text-decoration:none;
  transition:transform .12s, box-shadow .12s, background .2s;
}
.mast .lang-toggle:hover{
  background:var(--lime);
  transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 var(--ink);
}
.mast .lang-toggle:active{
  transform:translate(1px,1px);
  box-shadow:1px 1px 0 var(--ink);
}
.mast .lang-toggle:focus-visible{outline:3px solid var(--purple);outline-offset:2px}
/* Specificity-fix: zonder dit overschrijft display:inline-flex hierboven het [hidden]-attribuut.
   JS zet langToggle.hidden = true bij ingelogde planner-user — die regel moet 't winnen. */
.mast .lang-toggle[hidden]{display:none}

/* Keuze-gate op /vrijwilligers/: "Wat kom je doen?" — voorkomt dat bezoekers per
   ongeluk het vrijwilligers-inlogveld invullen i.p.v. hun kind in te schrijven. */
.intent-gate{margin:0 0 32px}
.intent-gate-title{
  font-family:'Archivo Black', sans-serif;
  font-size:22px;line-height:1.1;margin:0 0 16px;color:var(--ink);
}
.intent-gate-options{
  display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:18px;
}
@media (max-width:600px){
  .intent-gate-options{grid-template-columns:1fr}
}
.page-body a.intent-card,
.intent-card{
  display:flex;flex-direction:column;gap:6px;
  padding:22px 24px;
  border:3px solid var(--ink);
  background:var(--paper);
  text-decoration:none;text-align:left;
  cursor:pointer;font:inherit;
  transition:transform .15s, box-shadow .15s, background .2s;
}
.intent-card--register{box-shadow:6px 6px 0 var(--purple)}
.intent-card--volunteer{box-shadow:6px 6px 0 var(--teal)}
.page-body a.intent-card--register:hover,
.intent-card--register:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--purple);background:var(--lime)}
.intent-card--volunteer:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--teal);background:var(--lime)}
.intent-card:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.intent-card:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.intent-card-label{
  font-family:'Archivo Black', sans-serif;font-size:19px;line-height:1.1;color:var(--ink);
}
/* Engelstalige secundaire regel op de NL-pagina, zodat niet-Nederlandstalige
   bezoekers de keuze óók snappen (bewuste uitzondering op NL-only). */
.intent-card-label-en{
  font-family:'Archivo', sans-serif;font-size:14px;font-weight:700;line-height:1.15;
  color:var(--ink);opacity:.65;
}
.intent-gate-title-en{
  font-family:'Archivo', sans-serif;font-size:16px;font-weight:600;opacity:.6;
}
.intent-card-desc{font-size:14px;line-height:1.4;color:var(--ink);opacity:.8}

/* Image-figuur in sticker-stijl, voor inhoudelijke beelden binnen pagina-body */
.figure-sticker{
  margin:18px 0 28px;
  max-width:760px;
  border:3px solid var(--ink);
  background:var(--paper);
  box-shadow:6px 6px 0 var(--ink);
}
.figure-sticker img{display:block;width:100%;height:auto;border-bottom:3px solid var(--ink)}
.figure-sticker figcaption{
  padding:10px 16px 12px;
  font-size:14px;color:var(--ink);font-style:italic;line-height:1.35;
}

/* Route-kaarten op de routes-pagina, Komoot-map als hero + meta eronder */
.route-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;margin:14px 0 36px;
  max-width:1000px;
}
@media (max-width:720px){
  .route-cards{grid-template-columns:1fr;max-width:none}
}
.route-card{
  display:flex;flex-direction:column;
  background:var(--paper);
  border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  overflow:hidden;
  transition:transform .15s, box-shadow .15s;
}
.route-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.route-card-map-wrap{
  display:block;position:relative;
  aspect-ratio:4/3;width:100%;
  border-bottom:3px solid var(--ink);
  background:#efece4;
  overflow:hidden;
}
.page-body a.route-card-map-wrap{text-decoration:none}
.page-body a.route-card-map-wrap:hover{background:initial}
.route-card-map{
  display:block;width:100%;height:100%;
  object-fit:cover;border:0;
  transition:transform .35s ease;
}
.route-card:hover .route-card-map{transform:scale(1.04)}
.route-card-badge{
  position:absolute;top:14px;left:18px;z-index:3;
  font-family:'Archivo Black', sans-serif;
  font-size:22px;letter-spacing:.04em;line-height:1;
  padding:9px 16px;
  border:3px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  pointer-events:none;
}
.route-card--km5 .route-card-badge{background:var(--lime);color:var(--ink)}
.route-card--km10 .route-card-badge{background:var(--red);color:var(--paper)}
.route-card-body{position:relative;padding:66px 18px 18px;display:flex;flex-direction:column;gap:4px}
.route-card-name{
  margin:0;
  font-family:'Archivo Black', sans-serif;font-size:18px;color:var(--ink);
  line-height:1.2;
}
.route-card-time{font-size:13px;color:var(--purple);font-weight:600;margin-top:2px}
.page-body a.route-card-link{
  margin-top:6px;align-self:flex-start;
  font-family:'Archivo Black', sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--red);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
}
.page-body a.route-card-link:hover{color:var(--ink);background:var(--lime)}

/* App-store download buttons, sticker-met-schaduw in lijn met andere buttons */
.app-buttons{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 24px}
.page-body a.btn-app{
  display:inline-flex;align-items:center;gap:12px;
  padding:10px 18px;min-height:56px;
  background:var(--ink);color:var(--paper);
  border:3px solid var(--ink);
  text-decoration:none;
  transition:transform .15s, box-shadow .15s, background .2s;
}
.btn-app--ios{box-shadow:5px 5px 0 var(--teal)}
.btn-app--ios:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--teal)}
.btn-app--ios:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--teal)}
.btn-app--android{box-shadow:5px 5px 0 var(--lime)}
.btn-app--android:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--lime)}
.btn-app--android:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--lime)}
.page-body a.btn-app:hover{background:var(--ink);color:var(--paper)}
.btn-app svg{flex:0 0 auto;width:22px;height:26px;fill:currentColor}
.btn-app .label{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.btn-app .label small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.85;font-weight:600}
.btn-app .label strong{font-family:'Archivo Black', sans-serif;font-size:15px;letter-spacing:.02em}

/* planner-login-embed: inline login-card op /vrijwilligers/ */
.planner-login-embed{
  border:3px solid var(--ink);
  background:var(--paper);
  box-shadow:6px 6px 0 var(--ink);
  margin:0 0 32px;
  padding:20px 24px 24px;
}
.planner-login-embed-title{
  font-family:'Archivo Black', sans-serif;
  font-size:18px;color:var(--purple);
  margin:0 0 12px;
}
.planner-login-form p,
.planner-login-success p{margin:0 0 12px}
.planner-login-form label{
  display:block;font-weight:600;font-size:14px;margin:0 0 6px;color:var(--ink);
}
.planner-login-row{display:flex;gap:20px;flex-wrap:wrap;align-items:stretch;margin-top:6px}
.planner-login-row input[type="email"]{
  flex:1 1 280px;min-width:0;
  padding:18px 20px;font-size:17px;line-height:1.2;
  min-height:60px;
  border:2px solid var(--ink);background:var(--paper);color:var(--ink);
  font-family:inherit;
}
.planner-login-row input[type="email"]:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;
}
.planner-login-row .btn{flex:0 0 auto;min-height:60px;padding:0 28px}
.planner-login-error{
  margin:10px 0 0;color:var(--red);font-weight:600;
}
.planner-login-success h3{
  font-family:'Archivo Black', sans-serif;
  font-size:18px;color:var(--purple);margin:0 0 10px;
}
.planner-login-dev{
  border:2px dashed var(--ink);background:var(--lime);color:var(--ink);
  padding:10px 14px;border-radius:0;font-size:14px;
}
.planner-login-dev a{word-break:break-all}

/* planner-capacity-slot: ingelezen capaciteits-HTML uit de planner */
.planner-capacity-slot{margin:8px 0 24px}
.planner-capacity-loading{color:var(--ink);opacity:.7;font-style:italic}

/* planner-loggedin-cta: vervangt het login-blok als de bezoeker al ingelogd is */
.planner-loggedin-cta{
  border:3px solid var(--ink);
  background:var(--paper);
  box-shadow:6px 6px 0 var(--green);
  margin:0 0 32px;
  padding:20px 24px 24px;
}
.planner-loggedin-title{
  font-family:'Archivo Black', sans-serif;
  font-size:20px;color:var(--purple);
  margin:0 0 12px;
}
.planner-loggedin-cta p{margin:0 0 14px}
.planner-loggedin-cta p:last-child{margin-bottom:0}
.planner-loggedin-cta .btn{margin:0 8px 8px 0}

/* visually-hidden: tekst voor screen-readers, weg uit visuele flow */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ig-feed: Behold.so Instagram-widget op /nieuws/.
   Behold heeft veel interne padding in z'n closed shadow DOM die niet via parent te stylen is.
   Wrappers + negatieve margins knippen 'm zo dicht dat de gaps matchen met h2-naar-p (~10px)
   resp. p-naar-h2 (~32px) elders in de page-body. */
.ig-feed{margin:0;overflow:hidden;padding-bottom:48px}
.ig-feed behold-widget{display:block;margin:-116px 0 -120px}
.page-body .ig-more{margin:14px 0 -16px}

/* wa-block: WhatsApp-infogroep met QR op /nieuws/ */
.wa-block{
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
  border:3px solid var(--ink);background:var(--paper);
  box-shadow:6px 6px 0 var(--green);
  padding:20px 24px;margin:8px 0 0;
}
.wa-text p{margin:0 0 8px}
.wa-text p:last-child{margin-bottom:0}
.wa-hint{font-size:14px;opacity:.85}
.wa-qr{
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.wa-qr #wa-qr-canvas{
  background:var(--paper);padding:8px;border:2px solid var(--ink);
  width:196px;height:196px;display:flex;align-items:center;justify-content:center;
}
.wa-qr #wa-qr-canvas img,
.wa-qr #wa-qr-canvas canvas{display:block}
.wa-qr-label{
  font-family:'Archivo', sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
@media (max-width:640px){
  .wa-block{grid-template-columns:1fr;gap:18px}
  .wa-qr{align-items:flex-start}
}

/* notice-band: gele waarschuwing/info-balk binnen page-body */
.notice{
  border:3px solid var(--ink);background:var(--lime);color:var(--ink);
  padding:18px 22px;margin:0 0 28px;
  box-shadow:5px 5px 0 var(--ink);
  font-weight:600;
}
.notice strong{font-family:'Archivo Black', sans-serif;font-weight:400}
/* notice-link: notice die als a-tag werkt — visueel identiek, maar klikbaar met hover */
a.notice,a.notice-link{
  display:block;text-decoration:none;color:var(--ink);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
a.notice:hover,a.notice-link:hover{
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 var(--ink);
}
a.notice:active,a.notice-link:active{
  transform:translate(2px,2px);
  box-shadow:3px 3px 0 var(--ink);
}

/* tbd: inline-markering voor punten die de Stichting nog moet aanvullen.
   Gebruikt in de privacyverklaring (conceptversie). */
.tbd{
  display:inline;
  background:var(--lime);color:var(--ink);
  border:2px solid var(--ink);
  padding:1px 6px;
  font-weight:600;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .hero h1 em{transform:none;opacity:1}
}

/* ============ Cookie consent banner ============
   Sticker-style match (border + harde shadow); reduced-motion override is generiek. */
.cookie-consent{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:1200;
  background:var(--paper); color:var(--ink);
  border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink);
  border-radius:6px;
}
.cookie-consent-inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;
  padding:14px 18px; max-width:1100px; margin:0 auto;
}
.cookie-consent-text{ flex:1 1 320px; margin:0; font-size:14px; line-height:1.45 }
.cookie-consent-text a{ color:var(--purple); text-decoration:underline }
.cookie-consent-actions{ display:flex; gap:10px; flex-wrap:wrap }
.cookie-consent .btn{ font-size:14px; padding:8px 16px }
.cookie-consent .btn-ghost{
  background:transparent; color:var(--ink);
  border:2px solid var(--ink);
}
.cookie-consent .btn-ghost:hover{ background:var(--ink); color:var(--paper) }
@media (max-width:540px){
  .cookie-consent{ left:8px; right:8px; bottom:8px }
  .cookie-consent-inner{ padding:12px }
}