/* ============================================================
   SPIJS! — huisstijl
   ============================================================ */
:root{
  --geel:#FFC800; --geel-d:#F0B400; --geel-l:#FFD84A;
  --rood:#BC1522; --creme:#FFF6E2; --zwart:#141210;
  --disp:'Recursive',system-ui,-apple-system,sans-serif;
  --body:'Recursive',system-ui,-apple-system,sans-serif;
  --max:1280px; --rond:clamp(26px,3.6vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--geel);color:var(--zwart);overflow-x:hidden;line-height:1.55;-webkit-font-smoothing:antialiased;
  font-variation-settings:"MONO" 0,"CASL" 0,"slnt" 0,"CRSV" 0.5}
h1,h2,h3,.big-type,.mond-kop,.foot-big,.hero h1,.pagekop h1,.band-quote,.step h3,.vk h3,.menu h3,.truck b,.stat b,.slot b,
.steps-nav button b,.partners,.info p,.hero-meta{font-variation-settings:"MONO" 0,"CASL" 0.42,"slnt" 0,"CRSV" 1}
.eyebrow,.slot-h,.info h4,.foot-cols h5,.truck i,.stat span,.mond-sub,.scroll-cue,.shot .ph span,.hero-kick,.snelnav a,
.menu .kop,.menu .rij span,.slot time,.tab,.navlinks a,.foot-btm,.btn{font-variation-settings:"MONO" 0.85,"CASL" 0,"slnt" 0,"CRSV" 0}
::selection{background:var(--rood);color:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.grain{position:fixed;inset:0;pointer-events:none;z-index:900;opacity:.17;mix-blend-mode:multiply}
.wrap{width:min(100% - 40px,var(--max));margin-inline:auto}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;display:inline-flex;align-items:center;gap:12px;opacity:.65}
.eyebrow::before{content:"";width:30px;height:3px;border-radius:3px;background:var(--rood)}
h1,h2,h3{font-family:var(--disp);font-weight:850;line-height:.94;letter-spacing:-.028em}

/* speelse blokken: alles is een afgeronde kaart op geel */
.blok{padding:clamp(78px,10vw,150px) 0;position:relative;overflow:visible}
.blok--creme{background:var(--creme)}
.blok--rood{background:var(--rood);color:var(--creme)}
.blok--zwart{background:var(--zwart);color:var(--creme)}
.blok--geel{background:var(--geel-l)}
.blok .wrap{width:min(100% - 40px,var(--max))}
/* speelse gebogen scheidingen, licht elastisch bij het scrollen */
.golf{position:absolute;left:0;right:0;top:0;height:clamp(112px,17vw,240px);transform:translateY(-99.6%);pointer-events:none;z-index:2;overflow:visible}
.golf svg{width:100%;height:100%;display:block;overflow:visible}

[data-rev]{opacity:0;transform:translateY(30px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
[data-rev].in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
.stagger.in>*{opacity:1;transform:none}

/* ============================ NAV ============================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:600;padding:14px 0;transition:.45s}
.nav.stuck{padding:8px 0}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:rgba(255,246,226,0);border-radius:100px;padding:6px 6px 6px 6px;transition:background .45s,box-shadow .45s,padding .45s}
.nav.stuck .wrap{background:var(--creme);box-shadow:0 10px 30px rgba(20,18,16,.14);padding:6px 8px 6px 10px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:clamp(56px,5.6vw,78px);opacity:0;transform:scale(.72) rotate(-12deg);
  transition:opacity .4s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.nav.stuck .brand img{opacity:1;transform:none}
.nav.stuck .brand:hover img{transform:rotate(-10deg) scale(1.07)}
.navlinks{display:flex;gap:6px;align-items:center}
.navlinks a{font-size:13.5px;font-weight:700;padding:10px 16px;border-radius:100px;transition:.3s}
.navlinks a:hover{background:rgba(20,18,16,.09)}
.navlinks a.on{background:var(--zwart);color:var(--geel)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:100px;font-weight:700;font-size:13.5px;
  background:var(--rood);color:#fff;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;will-change:transform}
.btn:hover{box-shadow:0 12px 30px rgba(188,21,34,.32)}
.btn--zw{background:var(--zwart);color:var(--geel)}
.btn--out{background:transparent;color:currentColor;border:2px solid currentColor}
.btn--out:hover{background:var(--zwart);color:var(--geel);border-color:var(--zwart)}
.blok--rood .btn,.blok--zwart .btn{background:var(--geel);color:var(--zwart)}
.burger{display:none;width:46px;height:46px;background:var(--zwart);color:var(--geel);border-radius:50%;align-items:center;justify-content:center}
.burger b{display:block;width:16px;height:2px;background:currentColor;position:relative}
.burger b::before,.burger b::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor}
.burger b::before{top:-5px}.burger b::after{top:5px}
.mob{position:fixed;inset:0;background:var(--geel);z-index:700;display:none;flex-direction:column;justify-content:center;gap:6px;padding:40px}
.mob.on{display:flex}
.mob a{font-family:var(--disp);font-weight:800;font-size:clamp(30px,8vw,52px);letter-spacing:-.03em;padding:8px 0}
.mob a.on{color:var(--rood)}
.mob .sluit{position:absolute;top:24px;right:24px;width:46px;height:46px;border-radius:50%;background:var(--zwart);color:var(--geel);display:grid;place-items:center}

/* ============================ PAGINA'S ============================ */
.page{display:none}
.page.on{display:block;animation:pagein .55s cubic-bezier(.16,1,.3,1)}
@keyframes pagein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ============================ HERO ============================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:130px 0 80px;
  background:radial-gradient(125% 95% at 76% 14%, #FFE68F 0%, var(--geel-l) 24%, var(--geel) 58%, var(--geel-d) 100%)}
.hero .wrap{position:relative;z-index:3;display:grid;grid-template-columns:.9fr 1.16fr;gap:16px;align-items:center}
.hero-logo{width:clamp(190px,21vw,330px);margin-bottom:24px;animation:tilt 9s ease-in-out infinite;filter:drop-shadow(0 16px 26px rgba(120,80,0,.28))}
@keyframes tilt{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.hero-kick{display:inline-flex;align-items:center;gap:9px;background:var(--rood);color:#fff;border-radius:100px;padding:8px 17px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.hero-kick i{width:7px;height:7px;border-radius:50%;background:var(--geel);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,200,0,.8)}70%{box-shadow:0 0 0 10px rgba(255,200,0,0)}100%{box-shadow:0 0 0 0 rgba(255,200,0,0)}}
.hero h1{font-size:clamp(54px,7.4vw,104px);line-height:.86;margin:18px 0 10px;letter-spacing:-.04em}
.hero h1 em{font-style:normal;color:var(--rood)}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:20px 0 18px;
  font-family:var(--disp);font-weight:600;font-size:clamp(15px,1.5vw,20px);letter-spacing:-.015em}
.hero-meta b{font-weight:800}
.hero-meta b.rood{color:var(--rood)}
.hero-meta i{font-style:normal;width:7px;height:7px;border-radius:50%;background:var(--zwart);opacity:.35;display:inline-block}
.hero-lead{max-width:50ch;font-size:clamp(15px,1.3vw,17px);opacity:.82}
.editie{display:flex;gap:11px;align-items:flex-start;background:var(--creme);border-radius:16px;
  padding:13px 17px;margin-top:20px;max-width:56ch;font-size:13.5px;line-height:1.5}
.editie::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--rood);margin-top:6px}
.editie:empty,.editie.leeg{display:none}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-art{position:relative;justify-self:end;will-change:transform}
.hero-mais{width:min(74vw,900px);max-width:none;filter:drop-shadow(0 44px 50px rgba(120,80,0,.3));animation:bob 7s ease-in-out infinite;will-change:transform}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.6deg)}50%{transform:translateY(-24px) rotate(1.6deg)}}
.scroll-cue{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;opacity:.55}
.scroll-cue i{width:2px;height:38px;background:linear-gradient(var(--rood),transparent);animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.35);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ============================ DE BOOG ============================ */
.boog{position:relative;pointer-events:none}
.boog svg{width:100%;height:auto;display:block;overflow:visible}
.boog circle{fill:var(--zwart);opacity:0;transform:scale(.2);transform-origin:center;transform-box:fill-box;
  transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
.boog.in circle{opacity:1;transform:none}
.boog .boogtruck{opacity:0;transition:opacity .5s ease .4s}
.boog.in .boogtruck{opacity:1}
.boog-strook{padding:clamp(20px,3.5vw,44px) 0 0}
@media(max-width:760px){.boog-strook{padding:clamp(26px,6vw,44px) 0 0}}
.boog--rij .boogtruck{opacity:1;transition:none}
.boog--rij circle{transition:opacity .3s ease,transform .3s ease}

/* ============================ PAGEKOP ============================ */
.pagekop{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(470px,54vh,720px);
  padding:136px 0 clamp(14px,2vw,30px);
  background:radial-gradient(118% 100% at 80% 8%, #FFE68F 0%, var(--geel-l) 26%, var(--geel) 62%, var(--geel-d) 100%)}
.pagekop .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);align-items:center}
.pagekop .kop-tekst{max-width:none}
.pagekop h1{font-size:clamp(44px,8.4vw,116px);letter-spacing:-.045em;line-height:.88;margin-top:16px}
.pagekop h1 em{font-style:normal;color:var(--rood)}
.pagekop p{max-width:50ch;margin-top:20px;font-size:clamp(15px,1.4vw,18.5px);opacity:.84}
.pagekop img.mini{position:relative;z-index:2;justify-self:end;align-self:end;width:auto;
  height:clamp(300px,40vw,600px);max-width:100%;object-fit:contain;object-position:bottom;pointer-events:none;
  filter:drop-shadow(0 26px 30px rgba(140,95,0,.22));animation:bob 8s ease-in-out infinite}

/* ============================ INTRO ============================ */
.intro-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,6vw,80px);align-items:start}
.big-type{font-size:clamp(32px,5vw,68px);line-height:1;letter-spacing:-.035em}
.big-type em{font-style:normal;color:var(--rood)}
.blok--rood .big-type em,.blok--zwart .big-type em{color:var(--geel)}
.lead{font-size:clamp(15.5px,1.4vw,18.5px);opacity:.82;max-width:60ch}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
.stat{background:var(--geel);border-radius:22px;padding:22px 20px;transform:rotate(-1.2deg)}
.stat:nth-child(2){transform:rotate(1.4deg);background:var(--rood);color:#fff}
.stat:nth-child(3){transform:rotate(-.6deg)}
.stat b{display:block;font-family:var(--disp);font-weight:880;font-size:clamp(34px,4.4vw,56px);letter-spacing:-.045em;line-height:1}
.stat span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;font-weight:700}

/* ============================ MOND ============================ */
.mond-sec{text-align:center;overflow:hidden;position:relative;padding:clamp(30px,5vw,60px) 0 clamp(50px,7vw,90px)}
.mond-kop{font-family:var(--disp);font-weight:880;font-size:clamp(38px,8.4vw,128px);line-height:.85;letter-spacing:-.05em;margin-bottom:clamp(26px,5vw,64px);position:relative;z-index:2}
.mond-kop em{font-style:normal;color:var(--rood)}
.mond-wrap{width:min(94%,940px);margin:0 auto;will-change:transform;filter:drop-shadow(0 24px 30px rgba(120,80,0,.22))}
.mond-svg{width:100%;height:auto;display:block}
.tong{transform-box:view-box;transform-origin:720px 250px;will-change:transform}
.mond-sub{margin-top:22px;font-size:14px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.6}

/* ============================ STAPPEN ============================ */
.steps{background:var(--rood);color:var(--creme);position:relative}
.steps-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.steps-inner{width:min(100% - 40px,var(--max));margin-inline:auto;display:grid;grid-template-columns:.6fr 1fr;gap:clamp(28px,5vw,70px);align-items:center}
.step-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,246,226,.22)}
.step-prog i{display:block;height:100%;background:var(--geel);width:0}
.steps-nav{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.steps-nav button{display:flex;align-items:center;gap:14px;text-align:left;opacity:.45;transition:opacity .4s;padding:5px 0}
.steps-nav button.on{opacity:1}
.num{width:34px;height:34px;flex:none;display:grid;place-items:center;border:2px solid currentColor;border-radius:50%;font-size:11px;font-weight:700;transition:.4s}
.steps-nav button.on .num{background:var(--geel);border-color:var(--geel);color:var(--zwart)}
.steps-nav button b{font-family:var(--disp);font-weight:600;font-size:clamp(17px,1.7vw,22px);letter-spacing:-.02em}
.step-panel{position:relative;min-height:280px}
.step{position:absolute;inset:0;opacity:0;transform:translateY(24px);pointer-events:none;transition:.55s cubic-bezier(.16,1,.3,1)}
.step.on{opacity:1;transform:none;pointer-events:auto}
.step h3{font-size:clamp(28px,4vw,52px);margin:10px 0 8px}
.step .sub{font-family:var(--disp);font-weight:600;color:var(--geel);font-size:clamp(16px,1.5vw,20px)}
.step p{margin-top:14px;opacity:.86;max-width:54ch;font-size:15.5px}

/* ============================ BAND ============================ */
.band{position:relative;overflow:hidden;min-height:clamp(360px,58vh,620px);display:flex;align-items:center;color:var(--zwart);
  background:radial-gradient(125% 135% at 76% 18%, #F3C548 0%, #E7B633 48%, #D6A429 100%)}
.band-mais{position:absolute;right:1%;bottom:0;height:106%;width:auto;max-width:52%;
  object-fit:contain;object-position:bottom right;pointer-events:none;z-index:1}
.band .wrap{position:relative;z-index:2}
.band-quote{max-width:17ch;font-family:var(--disp);font-weight:860;font-size:clamp(30px,5vw,66px);line-height:.96;letter-spacing:-.035em}
.band-quote small{display:block;font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px;color:var(--rood)}

/* ============================ KAARTEN / TRUCKS ============================ */
.head-row{display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap;margin-bottom:clamp(32px,4.5vw,56px)}
.trucks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:14px}
.trucks .truck{background:var(--creme);border-radius:24px;padding:24px 22px 28px;position:relative;overflow:hidden;transition:color .4s,transform .45s cubic-bezier(.16,1,.3,1)}
.blok--creme .truck{background:var(--geel)}
.trucks .truck:nth-child(3n){transform:rotate(-1deg)}
.trucks .truck:nth-child(3n+2){transform:rotate(.9deg)}
.trucks .truck::before{content:"";position:absolute;inset:0;background:var(--rood);transform:translateY(101%);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.trucks .truck:hover{color:#fff;transform:translateY(-6px) rotate(0)}
.trucks .truck:hover::before{transform:translateY(0)}
.trucks .truck>*{position:relative;z-index:2}
.trucks .truck i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.18em;opacity:.5}
.trucks .truck b{display:block;font-family:var(--disp);font-weight:850;font-size:clamp(20px,2vw,26px);letter-spacing:-.03em;margin:10px 0 6px}
.trucks .truck p{font-size:14px;opacity:.8}

/* verwijs-kaarten */
.verwijs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.vk{border-radius:26px;padding:30px 26px 34px;background:var(--creme);position:relative;overflow:hidden;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.vk:nth-child(2){background:var(--rood);color:#fff}
.vk:nth-child(3){background:var(--zwart);color:var(--creme)}
.vk:hover{transform:translateY(-8px) rotate(-1deg)}
.vk h3{font-size:clamp(24px,2.6vw,34px);margin-bottom:8px}
.vk p{font-size:14.5px;opacity:.82;margin-bottom:20px}
.vk span.pijl{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px}

/* ============================ PROGRAMMA ============================ */
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{padding:11px 22px;border-radius:100px;font-size:13px;font-weight:700;background:var(--geel);transition:.3s}
.blok--creme .tab{background:var(--geel)}
.tab.on{background:var(--rood);color:#fff}
.sched{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,54px);align-items:start}
.slot-h{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--rood);margin-bottom:12px}
.slot{display:grid;grid-template-columns:80px 1fr;gap:14px;padding:13px 16px;border-radius:16px;align-items:baseline;transition:.35s cubic-bezier(.16,1,.3,1)}
.slot:nth-child(even){background:rgba(20,18,16,.045)}
.slot:hover{background:var(--geel);transform:translateX(5px)}
.slot time{font-weight:700;font-size:13px;opacity:.55}
.slot b{font-family:var(--disp);font-weight:600;font-size:clamp(16px,1.7vw,22px);letter-spacing:-.02em}
.panel{display:none}.panel.on{display:block}

/* ============================ MENUKAART ============================ */
.snelnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.snelnav a{font-size:12.5px;font-weight:700;background:var(--creme);border-radius:100px;padding:9px 16px;transition:.3s}
.snelnav a:hover{background:var(--rood);color:#fff}
.cta-blok{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap}
.cta-blok .big-type{max-width:16ch}
.menus{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:16px}
.menu{background:var(--creme);border-radius:26px;padding:26px 24px 30px}
.menu:nth-child(even){background:#fff}
.menu h3{font-size:clamp(21px,2.2vw,28px);color:var(--rood);margin-bottom:14px}
.menu .rij{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:8px 0;border-bottom:1px dashed rgba(20,18,16,.22);font-size:14.5px}
.menu .rij:last-child{border:0}
.menu .rij b{font-weight:600}
.menu .rij span{font-weight:700;white-space:nowrap;font-size:13px;opacity:.75}
.menu .kop{font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin:16px 0 4px}

/* ============================ GALERIJ ============================ */
.gal{background:var(--zwart);color:var(--creme);position:relative;padding-top:clamp(70px,9vw,120px);overflow:visible}
.gal-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.gal-head{width:min(100% - 40px,var(--max));margin:0 auto 30px}
.gal-head .eyebrow::before{background:var(--geel)}
.gal-bed{display:none}
.gal-track{scrollbar-width:none;-ms-overflow-style:none}
.gal-track::-webkit-scrollbar{display:none}
.gal-track{display:flex;gap:22px;padding-inline:max(20px,calc((100vw - var(--max))/2));will-change:transform}
.shot{flex:none;width:clamp(230px,26vw,360px);aspect-ratio:4/5;border-radius:26px;overflow:hidden;position:relative;background:#221f1b;scroll-snap-align:center}
.shot:nth-child(even){aspect-ratio:3/4;transform:translateY(20px) rotate(1.2deg)}
.shot:nth-child(odd){transform:rotate(-1deg)}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.shot:hover img{transform:scale(1.06)}
.shot .ph{position:absolute;inset:0;display:grid;place-content:center;gap:8px;text-align:center;
  background:repeating-linear-gradient(45deg,rgba(255,200,0,.08) 0 10px,transparent 10px 20px)}
.shot .ph b{font-family:var(--disp);font-weight:800;font-size:44px;color:rgba(255,200,0,.32)}
.shot .ph span{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;opacity:.45}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:32px 16px 14px;font-size:12.5px;font-weight:600;background:linear-gradient(transparent,rgba(20,18,16,.92))}

/* ============================ RELATIES ============================ */
.logos{display:grid;gap:14px}
.logos--hoofd{grid-template-columns:repeat(4,1fr)}
.logos--tweede{grid-template-columns:repeat(5,1fr);margin-top:14px}
.logo{background:#fff;border-radius:22px;aspect-ratio:1/1;display:grid;grid-template-rows:1fr auto;
  align-items:center;justify-items:center;padding:0 0 12px;transition:.4s;border:2px solid rgba(20,18,16,.12);
  position:relative;cursor:pointer;text-align:center;width:100%;font:inherit;color:inherit}
.logo:hover{transform:translateY(-6px);box-shadow:0 16px 28px rgba(20,18,16,.16);border-color:var(--zwart)}
.logo img{object-fit:contain;transition:.45s}
/* hoofdsponsoren: logo vult 90% van het vak */
.logos--hoofd .logo{border-width:3px;border-color:var(--zwart);box-shadow:0 10px 0 rgba(20,18,16,.1)}
.logos--hoofd .logo img{width:90%;height:90%}
/* tweede rang: 70% van het vak, grijs tot je erover gaat */
.logos--tweede .logo img{width:70%;height:70%;filter:grayscale(1);opacity:.72}
.logos--tweede .logo:hover img{filter:none;opacity:1}
.logo .web{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--rood);opacity:.9;margin-top:12px;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap;font-variation-settings:"MONO" .85,"CASL" 0}
.logo .web:empty{display:none}
.logo .lees{position:absolute;top:14px;right:14px;font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;opacity:0;transition:.3s;color:var(--rood);font-variation-settings:"MONO" .85,"CASL" 0}
.logo:hover .lees{opacity:1}

/* sponsorvenster */
.spons-laag{position:fixed;inset:0;z-index:800;background:rgba(20,18,16,.62);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:24px}
.spons-laag.on{display:flex;animation:vervaag .3s ease}
@keyframes vervaag{from{opacity:0}to{opacity:1}}
.spons-kaart{background:var(--creme);border-radius:28px;max-width:640px;width:100%;padding:34px 32px 36px;position:relative;
  animation:opkomst .45s cubic-bezier(.16,1,.3,1);max-height:86vh;overflow:auto}
@keyframes opkomst{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
.spons-kaart .dicht{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  background:var(--zwart);color:var(--geel);display:grid;place-items:center;font-size:15px}
.spons-kaart .dicht:hover{background:var(--rood);color:#fff}
.spons-kaart .beeld{background:#fff;border-radius:20px;padding:34px 28px;display:grid;place-items:center;margin-bottom:24px;min-height:280px}
.spons-kaart .beeld img{max-height:min(290px,36vh);max-width:100%;width:auto;object-fit:contain}
.spons-kaart h3{font-size:clamp(24px,3vw,34px);margin-bottom:10px}
.spons-kaart .rol{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rood);margin-bottom:12px;
  font-variation-settings:"MONO" .85,"CASL" 0}
.spons-kaart .spons-web{display:inline-block;margin-bottom:14px;font-size:14px;font-weight:600;color:var(--rood);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;
  font-variation-settings:"MONO" .85,"CASL" 0}
.spons-kaart .spons-web:hover{color:var(--zwart)}
.spons-kaart p{font-size:15.5px;opacity:.85;white-space:pre-line}
.spons-kaart .btn{margin-top:22px}
.partners{margin-top:clamp(38px,5vw,58px);font-family:var(--disp);font-weight:600;font-size:clamp(17px,2.1vw,28px);line-height:1.35;letter-spacing:-.02em}
.partners span{color:var(--rood);margin-inline:10px}
.foodies{margin-top:clamp(24px,3vw,34px);font-size:clamp(15px,1.5vw,19px);line-height:1.9;max-width:70ch}
.foodies b{font-weight:600;transition:color .25s}
.foodies b:hover{color:var(--rood)}
.foodies em{font-style:normal;color:var(--rood);margin-inline:9px}

/* ============================ INFO / CONTACT ============================ */
.weten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:clamp(20px,3vw,44px) clamp(26px,4vw,60px)}
.weten>div{padding-top:16px;border-top:2px solid rgba(255,246,226,.3)}
.weten h4{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--geel);margin-bottom:8px;
  font-variation-settings:"MONO" .85,"CASL" 0}
.weten p{font-size:clamp(15px,1.35vw,17px);line-height:1.6;opacity:.92;max-width:42ch}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.info>div{background:var(--creme);border-radius:24px;padding:24px 22px 28px}
.info>div:nth-child(2n){background:var(--rood);color:#fff;transform:rotate(1deg)}
.info>div:nth-child(3n){transform:rotate(-1deg)}
.info h4{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.65;margin-bottom:10px}
.info p{font-family:var(--disp);font-weight:600;font-size:clamp(18px,1.9vw,25px);letter-spacing:-.025em;line-height:1.18}
.map{margin:36px auto 0;border:2px solid var(--zwart);border-radius:14px;overflow:hidden;background:var(--creme);
  max-width:min(100%,780px);position:relative;isolation:isolate}
.map img{width:100%;display:block}
.map--leeg{min-height:200px;border-style:dashed;display:grid;place-items:center;background:transparent}
.map--leeg .ph{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.45;
  font-variation-settings:"MONO" .85,"CASL" 0}
/* alleen als je vergroten aanzet */
.map--zoom{cursor:zoom-in}
.map--zoom img{transition:transform .5s cubic-bezier(.16,1,.3,1);transform-origin:center;will-change:transform}
.map--zoom:hover img,.map--zoom.zoom img{transform:scale(2.4);transition-duration:.35s}
.map--zoom::after{content:"Beweeg eroverheen om te vergroten";position:absolute;left:12px;bottom:12px;z-index:2;
  background:var(--zwart);color:var(--geel);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 10px;border-radius:100px;pointer-events:none;transition:opacity .3s;
  font-variation-settings:"MONO" .85,"CASL" 0}
.map--zoom:hover::after,.map--zoom.zoom::after{opacity:0}
.form{display:grid;gap:18px;max-width:620px}
.form-rij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.72;display:block;margin-bottom:8px;
  font-variation-settings:"MONO" .85,"CASL" 0}
.form label b{color:var(--rood)}
.form input,.form textarea,.form select{width:100%;border:2px solid rgba(20,18,16,.16);border-radius:16px;padding:14px 16px;
  font:inherit;background:#fff;color:var(--zwart);transition:border-color .25s,box-shadow .25s}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--zwart) 50%),linear-gradient(135deg,var(--zwart) 50%,transparent 50%);
  background-position:calc(100% - 22px) 21px,calc(100% - 16px) 21px;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.form input::placeholder,.form textarea::placeholder{color:rgba(20,18,16,.38)}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--zwart);box-shadow:0 0 0 4px rgba(255,200,0,.5)}
.form .fout{border-color:var(--rood)!important;box-shadow:0 0 0 4px rgba(188,21,34,.16)}
.form .hulp{display:block;margin-top:7px;font-size:12.5px;opacity:.6}
.form .akkoord{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;text-transform:none;letter-spacing:0;
  opacity:1;font-weight:400;margin:0;font-variation-settings:normal}
.form .akkoord input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--rood);border-radius:6px;padding:0}
.form .melding{border-radius:16px;padding:16px 18px;font-size:14px;line-height:1.6;border:2px solid var(--zwart);background:var(--geel)}
.form .melding.mis{background:#fff;border-color:var(--rood);color:var(--rood)}
.form .melding b{display:block;margin-bottom:4px}
.contact-grid{display:grid;grid-template-columns:1fr .8fr;gap:clamp(28px,5vw,70px);align-items:start}

/* ============================ FOOTER ============================ */
.foot{background:var(--rood);color:var(--creme);position:relative;
  padding:clamp(52px,7vw,96px) 0 30px;position:relative;overflow:hidden}
.foot-top{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between}
.foot-top img{width:clamp(130px,14vw,200px)}
.foot-big{font-family:var(--disp);font-weight:900;font-size:clamp(52px,14vw,196px);line-height:.8;letter-spacing:-.055em;margin:24px 0 32px}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px}
.foot-cols h5{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--geel);margin-bottom:10px;font-weight:700}
.foot-cols p,.foot-cols a{font-size:14.5px;line-height:1.75}
.foot-cols a:hover{text-decoration:underline}
.foot-btm{margin-top:44px;padding-top:18px;border-top:2px solid rgba(255,246,226,.3);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;opacity:.8}

/* ============================ RESPONSIVE ============================ */
@media(max-width:1000px){
  /* alles net wat groter leesbaar op een telefoon */
  body{font-size:16px}
  .lead{font-size:17px}
  .step p{font-size:16.5px}
  .trucks .truck p{font-size:15.5px}
  .trucks .truck b{font-size:22px}
  .menu .rij{font-size:15.5px}
  .weten p{font-size:16.5px}
  .info p{font-size:20px}
  .slot b{font-size:18px}
  .slot time{font-size:14px}
  .pagekop p{font-size:17px}
  .hero-lead{font-size:16.5px}
  .foodies{font-size:16.5px}
  .partners{font-size:21px}
  .eyebrow{font-size:11.5px}
  .snelnav a{font-size:13.5px}
  .spons-kaart p{font-size:16px}
  .wrap,.blok .wrap{width:min(100% - 48px,var(--max))}
  .gal-track{padding-inline:24px}
  .spons-laag{padding:20px}
  .spons-kaart{padding:30px 24px 30px;border-radius:24px}
  .menu,.info>div,.trucks .truck,.vk{padding-left:22px;padding-right:22px}
  .mob{padding:40px 30px}
  :root{--rond:22px}
  .menus,.trucks,.verwijs,.info{grid-template-columns:1fr}
  .logos--hoofd{grid-template-columns:repeat(2,1fr)}
  .logos--tweede{grid-template-columns:repeat(3,1fr)}
  .pagekop{min-height:auto;padding:104px 0 10px}
  .pagekop .wrap{grid-template-columns:1fr;gap:4px}
  .pagekop .kop-tekst{max-width:100%}
  .pagekop img.mini{height:clamp(250px,66vw,400px);justify-self:center;margin-top:16px;filter:none}
  .blok{padding:clamp(52px,11vw,80px) 0}
  .hero{padding:104px 0 60px;min-height:auto}
  .hero-meta{font-size:15px;gap:6px 12px}
  .mond-kop{font-size:clamp(30px,10vw,54px)}
  .foot-big{font-size:clamp(44px,17vw,90px)}
  .scroll-cue{display:none}
  .slot{grid-template-columns:66px 1fr;padding:11px 12px}
  .menu{padding:20px 18px 24px}
  .stat{transform:none!important}
  .form-rij{grid-template-columns:1fr}
  .trucks .truck,.logo,.info>div,.shot{transform:none!important}
  .spons-kaart .beeld{min-height:180px;padding:24px 20px}
  .spons-kaart .beeld img{max-height:190px}
  /* mobiel: tekst links, mais ernaast rechts */
  .map{max-width:100%}
  .map--zoom{cursor:pointer}
  .map--zoom::after{content:"Tik om te vergroten"}
  .map--zoom:hover img{transform:none}
  .map--zoom.zoom img{transform:scale(2.2)}
  .band{min-height:clamp(300px,66vw,440px);align-items:center;padding:clamp(26px,6vw,40px) 0}
  .band .wrap{text-align:left}
  .band-mais{right:0;height:100%;max-width:46%;object-position:bottom right}
  .golf{height:clamp(72px,19vw,130px)}
  .band-quote{max-width:52%;margin:0;font-size:clamp(19px,5vw,32px);line-height:1.08;letter-spacing:-.025em}
  .band-quote small{font-size:10px;letter-spacing:.2em;margin-bottom:10px}
  .hero .wrap{grid-template-columns:1fr}
  .hero-art{order:-1;justify-self:center;position:relative;z-index:1}
  .hero-mais{width:min(94vw,520px)}
  .hero-logo{position:relative;z-index:3;display:block;margin:clamp(-92px,-17vw,-56px) auto clamp(14px,3vw,22px);
    width:min(80vw,420px)}
  .intro-grid,.steps-inner,.sched,.contact-grid{grid-template-columns:1fr}
  .navlinks,.nav .btn{display:none}
  .burger{display:flex}
  .steps-sticky{position:static;height:auto;padding:60px 0}
  .step{position:static;opacity:1;transform:none;display:none}
  .step.on{display:block}
  .step-panel{min-height:0}
  .gal-sticky{position:static;height:auto}
  .gal-track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .gal-bed.on{display:flex;align-items:center;gap:16px;width:min(100% - 48px,var(--max));margin:22px auto 0}
  .gal-pijl{flex:none;width:54px;height:54px;border-radius:50%;background:var(--geel);color:var(--zwart);
    display:grid;place-items:center;transition:.3s;box-shadow:0 6px 0 rgba(0,0,0,.35)}
  .gal-pijl svg{width:22px;height:22px;display:block}
  .gal-pijl:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
  .gal-pijl[disabled]{opacity:.3;box-shadow:none}
  .gal-bar{flex:1;height:6px;border-radius:6px;background:rgba(255,246,226,.22);overflow:hidden}
  .gal-bar i{display:block;height:100%;width:20%;border-radius:6px;background:var(--rood);
    transition:width .25s ease,transform .25s ease}
  .shot{scroll-snap-align:center;width:76vw}
  .shot:nth-child(even){transform:none}
  .stats{grid-template-columns:1fr}
}
@media(max-width:520px){
  .wrap,.blok .wrap{width:min(100% - 44px,var(--max))}
  .hero h1{font-size:clamp(38px,11.5vw,52px)}
  .big-type{font-size:clamp(29px,9vw,40px)}
  .pagekop h1{font-size:clamp(35px,11vw,50px)}
  .shot{width:82vw}
  .foodies{font-size:15px}
  .logos--hoofd{grid-template-columns:1fr}
  .logos--tweede{grid-template-columns:repeat(2,1fr)}
  .mob a{font-size:clamp(26px,9vw,40px)}
}
/* Staat 'verminder beweging' aan in het systeem, dan zorgen we er alleen
   voor dat alle tekst gewoon zichtbaar is. De rest blijft bewegen. */
@media(prefers-reduced-motion:reduce){
  [data-rev],.stagger>*{opacity:1!important;transform:none!important;transition:none!important}
}

/* ============================================================
   MOOKE MONOCHROOM — beveiligde editor
   ============================================================ */
#mm,#mm *{box-sizing:border-box;font-variation-settings:normal}
#mm{--mm-lijn:#e6e6e6;--mm-lijn2:#efefef;--mm-g5:#6b6b6b;--mm-g3:#9a9a9a;--mm-vlak:#fafafa;--mm-hover:#f4f4f4;--mm-fout:#b00020;
  position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:#fff;color:#2b2b2b;
  font-family:'Inter',system-ui,sans-serif;font-size:14px;line-height:1.5;border-left:1px solid var(--mm-lijn);
  z-index:1000;display:flex;flex-direction:column;transform:translateX(101%);
  transition:transform .5s cubic-bezier(.16,1,.3,1);box-shadow:-30px 0 60px rgba(0,0,0,.18)}
#mm.open{transform:none}
#mm ::selection{background:#111;color:#fff}
.mm-kop{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--mm-lijn);flex:none}
.mm-merk{background:#111;color:#fff;font-size:10px;font-weight:700;letter-spacing:.14em;padding:6px 9px;border-radius:4px}
.mm-kop h6{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mm-g5);flex:1}
.mm-x{width:30px;height:30px;border:1px solid var(--mm-lijn);border-radius:6px;display:grid;place-items:center;color:#111}
.mm-x:hover{background:var(--mm-hover)}
.mm-body{flex:1;overflow-y:auto;padding:4px 0 20px}
.mm-groep{border-bottom:1px solid var(--mm-lijn2)}
.mm-groep>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:15px 20px}
.mm-groep>summary::-webkit-details-marker{display:none}
.mm-groep>summary:hover{background:var(--mm-vlak)}
.mm-num{width:26px;height:26px;flex:none;background:#111;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:600;border-radius:2px}
.mm-groep>summary b{font-size:13px;font-weight:600;color:#111;flex:1}
.mm-groep>summary i{font-style:normal;color:var(--mm-g3);font-size:11px;transition:transform .3s}
.mm-groep[open]>summary i{transform:rotate(90deg)}
.mm-velden{padding:4px 20px 22px}
.mm-veld{margin-bottom:16px}
.mm-label{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mm-g5);margin-bottom:7px}
.mm-input{width:100%;background:#fff;border:1px solid var(--mm-lijn);border-radius:6px;padding:10px 12px;font:inherit;color:#2b2b2b;resize:vertical}
.mm-input:focus{border-color:#111;outline:none}
.mm-hint{font-size:11px;color:var(--mm-g3);margin-top:6px}
.mm-voet{flex:none;border-top:1px solid var(--mm-lijn);padding:14px 20px;display:flex;gap:8px;flex-wrap:wrap;background:var(--mm-vlak)}
.mm-btn{background:#111;color:#fff;border-radius:6px;padding:11px 16px;font-size:12px;font-weight:600}
.mm-btn:hover{opacity:.85}
.mm-btn-ghost{background:#fff;color:#111;border:1px solid var(--mm-lijn)}
.mm-btn-ghost:hover{background:var(--mm-hover)}
.mm-login{flex:1;overflow-y:auto;padding:36px 28px;display:flex;flex-direction:column;justify-content:center}
.mm-login .mm-num{margin-bottom:22px}
.mm-login h4{font-size:22px;font-weight:700;color:#111;margin-bottom:8px}
.mm-login p.uitleg{color:var(--mm-g5);font-size:13px;margin-bottom:26px}
.mm-stap{display:none}.mm-stap.on{display:block}
.mm-code input{text-align:center;font-size:20px;font-weight:600;letter-spacing:.3em;padding:14px 10px}
.mm-fout{color:var(--mm-fout);font-size:12px;margin-top:10px;min-height:18px}
.mm-mail{border:1px solid var(--mm-lijn);border-radius:6px;padding:10px 12px;font-size:13px;color:#111;background:var(--mm-vlak);margin-bottom:16px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.mm-mail button{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mm-g5);text-decoration:underline}

/* lijst-editor */
.mm-lijst{display:flex;flex-direction:column;gap:6px}
.mm-rij{display:grid;grid-template-columns:16px 1fr auto;gap:8px;align-items:start;
  border:1px solid var(--mm-lijn);border-radius:6px;padding:8px;background:#fff;transition:border-color .2s,opacity .2s}
.mm-rij.sleep{opacity:.35;border-color:#111}
.mm-rij.over{border-color:#111;box-shadow:0 -2px 0 #111 inset}
.mm-greep{cursor:grab;color:var(--mm-g3);font-size:13px;user-select:none;padding-top:8px;text-align:center}
.mm-rij .vld{display:flex;flex-direction:column;gap:6px}
.mm-rij .vld input,.mm-rij .vld textarea{width:100%;border:1px solid var(--mm-lijn);border-radius:4px;padding:7px 9px;font:inherit;font-size:13px;color:#2b2b2b}
.mm-rij .vld input:focus,.mm-rij .vld textarea:focus{border-color:#111;outline:none}
.mm-knoppen{display:flex;flex-direction:column;gap:4px}
.mm-mini{width:24px;height:22px;border:1px solid var(--mm-lijn);border-radius:4px;font-size:11px;color:#111;display:grid;place-items:center}
.mm-mini:hover{background:var(--mm-hover)}
.mm-mini.weg:hover{background:#b00020;color:#fff;border-color:#b00020}
.mm-plus{margin-top:8px;width:100%;border:1px dashed var(--mm-g3);border-radius:6px;padding:10px;font-size:12px;font-weight:600;color:#111}
.mm-plus:hover{border-color:#111;background:var(--mm-vlak)}
.mm-demo{margin-top:26px;border-top:1px solid var(--mm-lijn2);padding-top:14px;font-size:11px;color:var(--mm-g3);line-height:1.6}

/* opmaak in teksten */
.blok p em,.blok li em,.pagekop p em,.hero-lead em,.band-quote em{font-style:normal;color:var(--rood)}
.blok--rood p em,.blok--zwart p em,.blok--rood .lead em{color:var(--geel)}
.blok u,.pagekop u{text-underline-offset:3px}
.blok a:not(.btn):not(.vk):not(.logo),.pagekop a:not(.btn){text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:2px;text-decoration-color:var(--rood)}
.blok a:not(.btn):not(.vk):not(.logo):hover{color:var(--rood)}