/* ============================================================
   YONAS — merksysteem, Delta Six
   Fraunces voor display, Inter Tight voor alles wat werkt.
   Exact het contrast van zijn eigen merk: espresso, goud, cream.
   Engine: ZW v7 scroll-scrub plus de afspraakflow van Baas.
   ============================================================ */

:root{
  --espresso:#0F0B07;
  --espresso-2:#1A1410;
  --espresso-3:#241C15;
  --goud:#C9A04C;
  --goud-licht:#E4C88A;
  --brons:#8B6508;
  --brons-diep:#5E4405;
  --cream:#F5F1E8;
  --linnen:#E9E3D6;
  --inkt:#0F0B07;
  --grijs:#6E6559;
  --lijn:rgba(15,11,7,.13);
  --lijn-licht:rgba(245,241,232,.16);
  --groen:#3E6B4F;
  --rood:#A6321F;

  --display:'Fraunces','Iowan Old Style',Georgia,serif;
  --body:'Inter Tight','Helvetica Neue',Arial,sans-serif;

  --goot:clamp(1.25rem,5vw,5rem);
  --max:82rem;
  --soep:cubic-bezier(.22,1,.36,1);
  --traag:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* overflow-x MOET clip blijven, nooit hidden. hidden maakt van body een
   eigen scrollcontainer en dan heeft position:sticky niets om aan vast te
   houden: het filmdoek scrolt gewoon mee weg. */
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{
  background:var(--espresso);color:var(--inkt);
  font-family:var(--body);font-size:17px;line-height:1.62;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}
/* overflow-x staat bewust ALLEEN op html. Zet je het ook op body, dan rekent de
   browser overflow-y op body om naar auto, wordt body een eigen scrollcontainer
   en doen Page Down en de pijltjestoetsen niets meer. */
main{background:var(--cream)}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--goud);color:var(--espresso)}

/* ---------------- typografie ---------------- */
h1,h2,h3,.dsp{
  font-family:var(--display);
  font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0;
  font-weight:600;letter-spacing:-.025em;line-height:.98;
}
.t-xl{font-size:clamp(3rem,8.6vw,9rem)}
.t-l {font-size:clamp(2.5rem,6vw,6rem)}
.t-m {font-size:clamp(2rem,4vw,3.8rem);line-height:1}
.t-s {font-size:clamp(1.45rem,2.3vw,2.2rem);line-height:1.08;font-weight:600}
h1 em,h2 em,.dsp em{font-style:italic;font-weight:600;color:var(--brons)}
.op-nacht h1 em,.op-nacht h2 em,.op-nacht .dsp em{color:var(--goud)}

.oog{
  font-family:var(--body);font-size:.68rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--brons);
}
.op-nacht .oog{color:var(--goud)}
.lead{font-size:clamp(1.05rem,1.35vw,1.28rem);color:var(--grijs);max-width:54ch;line-height:1.66}
.op-nacht .lead{color:rgba(245,241,232,.82)}
.klein{font-size:.82rem;color:var(--grijs);line-height:1.6}

/* letterstaarten vrijhouden, altijd */
h1,h2,h3,.dsp,.regel{padding-bottom:.18em;margin-bottom:-.18em}

/* ---------------- raster ---------------- */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--goot);padding-right:var(--goot);width:100%}
.blok{padding:clamp(4.5rem,10vw,9.5rem) 0;position:relative}
.blok--kort{padding:clamp(3rem,6vw,5.5rem) 0}
.midden{text-align:center}
.midden .lead{margin-left:auto;margin-right:auto}
.op-nacht{background:var(--espresso);color:var(--cream)}
.op-warm{background:var(--espresso-2);color:var(--cream)}
.op-linnen{background:var(--linnen)}

/* ---------------- laadscherm ---------------- */
.laad{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:var(--espresso);color:var(--cream);
  transition:transform 1s var(--soep);
}
.laad[data-fase="uit"]{transform:translate3d(0,-101%,0)}
.laad__merk{display:grid;justify-items:center;gap:1.4rem}
/* De schaar zakt haaks op het woordmerk naar beneden, knipt het precies in het
   midden door en de rechterhelft kantelt weg. Dat is het handtekeningmoment
   van dit merk, op elke pagina hetzelfde. Het woord staat er drie keer: een
   onzichtbare maatvoerder die de doos opspant, en twee gekliptekopieen die de
   helften vormen. */
.laad__logo{position:relative;display:inline-block;line-height:1}
.laad__zw{
  font-family:var(--display);font-variation-settings:'opsz' 144;
  font-weight:600;font-size:clamp(3.4rem,11vw,8rem);line-height:1;
  letter-spacing:.16em;padding-left:.16em;color:var(--goud);
  display:block;white-space:nowrap;
}
.laad__zw--maat{visibility:hidden}
.laad__zw--l,.laad__zw--r{position:absolute;left:0;top:0;width:100%}
.laad__zw--l{clip-path:inset(0 50% 0 0)}
.laad__zw--r{
  clip-path:inset(0 0 0 50%);transform-origin:50% 50%;
  animation:helftWeg .78s cubic-bezier(.4,.02,.7,1) .7s forwards;
}
.laad__schaar{
  position:absolute;left:50%;top:50%;width:3.6rem;height:4.4rem;
  margin:-2.2rem 0 0 -1.8rem;opacity:0;
  animation:schaarZak .6s cubic-bezier(.34,0,.2,1) .08s forwards;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.7));
}
.laad__schaar .blad{transform-origin:17px 34px}
.laad__schaar .blad-l{animation:knipL .42s cubic-bezier(.5,0,.3,1) .46s forwards}
.laad__schaar .blad-r{animation:knipR .42s cubic-bezier(.5,0,.3,1) .46s forwards}
.laad__sub{font-size:.64rem;letter-spacing:.4em;text-transform:uppercase;color:rgba(245,241,232,.6)}
@keyframes schaarZak{
  0%{opacity:0;transform:translate3d(0,-240%,0) rotate(180deg)}
  25%{opacity:1}
  100%{opacity:1;transform:translate3d(0,-14%,0) rotate(180deg)}
}
@keyframes knipL{0%{transform:rotate(-14deg)}65%,100%{transform:rotate(1deg)}}
@keyframes knipR{0%{transform:rotate(14deg)}65%,100%{transform:rotate(-1deg)}}
@keyframes helftWeg{
  0%{transform:none;opacity:1}
  16%{transform:translate(2px,4px) rotate(2deg);opacity:1}
  100%{transform:translate(18px,92px) rotate(20deg);opacity:0}
}

/* ---------------- hero met de montage ---------------- */
/* De homepage opent met een edit van alle clips achter elkaar. Die speelt
   vanzelf en loopt rond, zodat de bezoeker de hele zaak binnen dertien
   seconden ziet zonder te scrollen. */
.heroedit{
  position:relative;min-height:100svh;display:flex;align-items:center;
  overflow:hidden;background:var(--espresso);color:var(--cream);
  padding:clamp(5.5rem,9vh,7rem) 0 clamp(2.5rem,6vh,4.5rem);
}
.heroedit__doek{position:absolute;inset:0;z-index:0}
.heroedit__doek img,.heroedit__doek video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%;
}
.heroedit__doek video{z-index:1;opacity:0;transition:opacity 1.1s ease}
.heroedit__doek video.geverfd{opacity:1}
.heroedit__inhoud{position:relative;z-index:4;width:100%}
.heroedit .hoofdstuk__binnen{gap:1rem}
.heroedit .hoofdstuk__binnen h1{text-shadow:0 2px 26px rgba(8,5,2,.6)}
/* De kop schaalt mee met de hoogte van het scherm, zodat de hele hero op een
   laag venster binnen een schermhoogte blijft en de bewijsbalk zichtbaar is. */
.heroedit .t-xl{font-size:clamp(2.6rem,min(7.6vw,10.5vh),7rem)}
@media (max-width:640px){.heroedit{padding-top:6rem}.heroedit .t-xl{font-size:clamp(2.6rem,10vw,4rem)}}

/* ---------------- eigen muisaanwijzer, de schaar uit zijn logo ------- */
.schaar{
  position:fixed;left:0;top:0;z-index:250;width:34px;height:42px;
  margin:-4px 0 0 -17px;pointer-events:none;
  transform:translate3d(-200px,-200px,0);transform-origin:50% 84%;
  opacity:0;transition:opacity .28s ease;
  filter:drop-shadow(0 5px 10px rgba(8,5,2,.6));
}
.schaar.aan{opacity:1}
.schaar svg{width:100%;height:100%;display:block;overflow:visible;transition:transform .45s var(--soep)}
.schaar.link svg{transform:scale(1.18) rotate(-7deg)}
.schaar .blad{transform-origin:17px 34px;transition:transform .32s var(--soep)}
.schaar.klik .blad-l{transform:rotate(11deg)}
.schaar.klik .blad-r{transform:rotate(-11deg)}
.schaar__lok{opacity:0;transform-origin:17px 8px}
.schaar.klik .schaar__lok{opacity:1;animation:lok .6s ease-out}
@keyframes lok{
  from{opacity:1;transform:rotate(0) translate(0,0) scale(.4)}
  to{opacity:0;transform:rotate(38deg) translate(14px,20px) scale(1)}
}
html.heeft-schaar,html.heeft-schaar a,html.heeft-schaar button,
html.heeft-schaar summary,html.heeft-schaar label{cursor:none}
html.heeft-schaar input,html.heeft-schaar textarea{cursor:text}
@media (hover:none),(pointer:coarse){.schaar{display:none}}

/* ---------------- knoppen met diepte ---------------- */
.knop{
  position:relative;display:inline-flex;align-items:center;gap:.85rem;
  min-height:3.1rem;padding:.9rem 1.7rem;border-radius:999px;border:0;
  font-family:var(--body);font-size:.82rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;cursor:pointer;overflow:hidden;isolation:isolate;
  transform-style:preserve-3d;will-change:transform;text-align:center;
  transition:transform .35s var(--soep),background .3s,color .3s,box-shadow .35s var(--soep);
}
.knop::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;
  background:radial-gradient(130px 64px at var(--gx,50%) -20%,rgba(255,255,255,.38),transparent 70%);
  transition:opacity .35s;
}
.knop:hover::before{opacity:1}
.knop::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%);
  transform:translateX(-135%);transition:transform .9s var(--soep);
}
.knop:hover::after{transform:translateX(135%)}
.knop i{font-style:normal;display:inline-block;transition:transform .4s var(--soep)}
.knop:hover i{transform:translate3d(6px,0,0)}
.knop:active{transform:translateY(3px) scale(.98) !important;box-shadow:0 1px 0 rgba(0,0,0,.34) !important}

.knop--goud{background:var(--goud);color:#1A1204;
  box-shadow:0 2px 0 var(--brons),0 5px 0 var(--brons-diep),0 16px 30px -12px rgba(30,18,4,.65)}
.knop--goud:hover{background:var(--goud-licht);
  box-shadow:0 3px 0 var(--brons),0 7px 0 var(--brons-diep),0 30px 48px -16px rgba(30,18,4,.78)}
.knop--donker{background:var(--espresso-2);color:var(--cream);
  box-shadow:0 2px 0 #060402,0 5px 0 #000,0 16px 30px -12px rgba(0,0,0,.6)}
.knop--donker:hover{background:var(--espresso-3);
  box-shadow:0 3px 0 #060402,0 7px 0 #000,0 30px 48px -16px rgba(0,0,0,.72)}
.knop--licht{background:var(--cream);color:var(--espresso);
  box-shadow:0 2px 0 #d8d1c2,0 5px 0 #b6ae9c,0 16px 30px -12px rgba(10,7,4,.55)}
.knop--licht:hover{background:#fff;
  box-shadow:0 3px 0 #d8d1c2,0 7px 0 #b6ae9c,0 30px 48px -16px rgba(10,7,4,.7)}
.knop--lijn{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px var(--lijn-licht)}
.knop--lijn:hover{box-shadow:inset 0 0 0 1px var(--goud);color:var(--goud-licht)}
.knop--lijn::after{display:none}
.knop--lijn.op-licht{color:var(--espresso);box-shadow:inset 0 0 0 1px var(--lijn)}
.knop--lijn.op-licht:hover{color:var(--brons);box-shadow:inset 0 0 0 1px var(--brons)}

a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--goud);outline-offset:3px
}

/* ---------------- kop ---------------- */
.kopbalk{
  position:fixed;inset:0 0 auto 0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:.8rem var(--goot);color:var(--cream);max-height:80px;
  transition:transform .5s var(--soep),background .4s,backdrop-filter .4s,box-shadow .4s,color .4s;
}
.kopbalk.vast{
  background:rgba(15,11,7,.92);backdrop-filter:blur(16px) saturate(140%);
  color:var(--cream);box-shadow:0 1px 0 rgba(245,241,232,.1);
}
.kopbalk.weg{transform:translateY(-115%)}
.merk{display:flex;align-items:center;gap:.7rem}
.merk__mark{width:42px;height:42px;flex:none;border-radius:5px;overflow:hidden;background:var(--espresso)}
.merk__mark img{width:100%;height:100%;object-fit:cover}
.merk__naam{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.2rem;letter-spacing:.1em;line-height:1;color:var(--cream)}
.merk__sub{display:block;font-family:var(--body);font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:var(--goud);margin-top:.25rem}
.nav{display:flex;gap:1.6rem;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.nav a{position:relative;padding:.4rem 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--soep)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current]{color:var(--goud)}
.kopbalk .knop{min-height:2.6rem;padding:.6rem 1.15rem;font-size:.68rem}
@media (max-width:1000px){.nav{display:none}}

/* ---------------- film met scroll-scrub ---------------- */
.film{position:relative}
.film__toneel{position:sticky;top:0;z-index:0;height:100svh;overflow:hidden;background:var(--espresso)}
.film__laag{position:absolute;inset:0;opacity:0;transition:opacity .25s linear}
/* Beide MOETEN absoluut staan. Zonder position:absolute stapelt de video als
   tweede blok onder de foto, precies een schermhoogte lager, en valt hij
   buiten de overflow:hidden van het doek. Meet altijd getBoundingClientRect. */
.film__laag video,.film__laag img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center)}
.film__laag video{z-index:1;opacity:0;transition:opacity .6s ease}
.film__laag video.geverfd{opacity:1}
.film__sluier{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,5,2,.55) 0%,rgba(8,5,2,.06) 26%,rgba(8,5,2,.12) 58%,rgba(8,5,2,.78) 100%),
    linear-gradient(90deg,rgba(8,5,2,.88) 0%,rgba(8,5,2,.56) 32%,rgba(8,5,2,.10) 60%,transparent 80%);
}
.film__korrel{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/voorbeeld/kapper-yonas/></filter><rect width='140' height='140' filter='url(%23n)'/voorbeeld/kapper-yonas/></svg>");
}
.film__verhaal{position:relative;z-index:4;margin-top:-100svh;pointer-events:none}
.film__verhaal a,.film__verhaal button{pointer-events:auto}
.hoofdstuk{position:relative}
.hoofdstuk__pin{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;padding:clamp(6rem,10vw,9rem) var(--goot)}
.film__kopijlaag{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.film__kopijlaag a,.film__kopijlaag button{pointer-events:auto}
.film__kopijlaag .hoofdstuk__binnen{max-width:min(46rem,52vw) !important}
/* width:100% uit de basisregel wint van right, waardoor de kopij precies een
   goot te ver naar rechts liep en knoppen op mobiel buiten beeld vielen. */
.film__kopijlaag .hoofdstuk__kopij{
  position:absolute;left:var(--goot);right:var(--goot);top:50%;width:auto;
  transform:translate3d(0,calc(-50% + 26px),0);opacity:0;
  transition:opacity .2s linear,transform .8s var(--soep);
}
.film__kopijlaag .hoofdstuk__kopij.aan{transform:translate3d(0,-50%,0)}
@media (max-width:640px){
  .film__kopijlaag .hoofdstuk__kopij{top:auto;bottom:5.4rem;transform:translate3d(0,26px,0)}
  .film__kopijlaag .hoofdstuk__kopij.aan{transform:none}
}
.hoofdstuk__kopij{position:relative;max-width:min(var(--max),100%);margin:0 auto;width:100%}
.hoofdstuk__kopij::before{
  content:"";position:absolute;inset:-3rem -4rem;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 34% 50%,rgba(8,5,2,.76) 0%,rgba(8,5,2,.44) 48%,transparent 74%);
}
.hoofdstuk__binnen{display:grid;gap:1.4rem;max-width:34ch;color:var(--cream)}
.hoofdstuk__binnen .lead{color:rgba(245,241,232,.86)}
.hoofdstuk__binnen h1,.hoofdstuk__binnen h2{text-shadow:0 2px 26px rgba(8,5,2,.6)}

.film__route{
  position:absolute;left:var(--goot);right:var(--goot);bottom:1.6rem;z-index:6;
  display:flex;gap:1.6rem;flex-wrap:wrap;align-items:center;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,241,232,.5);
  pointer-events:auto;
}
.film__route button{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:.3rem 0;transition:color .3s}
.film__route button .nr{color:var(--goud);margin-right:.5rem}
.film__route button.actief{color:var(--cream)}
.film__voortgang{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(245,241,232,.14);z-index:6}
.film__voortgang span{display:block;height:100%;background:var(--goud);transform-origin:left;transform:scaleX(var(--p,0))}

/* ---------------- hero-acties en bewijsbalk ---------------- */
.hero__acties{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.7rem}
.hero__strip{
  display:flex;flex-wrap:wrap;gap:.7rem 2rem;margin-top:1.9rem;
  font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,241,232,.7);
}
.hero__strip span{display:flex;align-items:center;gap:.55rem}
.hero__strip span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--goud);flex:none}
.hero__strip .sterren{color:var(--goud);letter-spacing:.1em}

/* ---------------- tekst per regel uit een masker ---------------- */
.regels .regel{display:block;overflow:hidden}
.regels .regel>span{display:block;transform:translate3d(0,112%,0);transition:transform 1.05s var(--soep)}
.regels.in .regel>span{transform:none}
.regels .regel:nth-child(2)>span{transition-delay:.08s}
.regels .regel:nth-child(3)>span{transition-delay:.16s}

.onthul{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1s var(--soep),transform 1s var(--soep)}
.onthul.in{opacity:1;transform:none}
.masker{overflow:hidden;position:relative}
.masker img,.masker video{transform:scale(1.14);transition:transform 1.7s var(--soep)}
.masker.in img,.masker.in video{transform:scale(1)}
.masker::after{content:"";position:absolute;inset:0;background:var(--linnen);transform-origin:top;transition:transform 1.1s var(--soep);z-index:3}
.masker.in::after{transform:scaleY(0)}
.op-nacht .masker::after,.op-warm .masker::after{background:var(--espresso)}

/* ---------------- reviewband ---------------- */
.reviewkop{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap}
.reviewkop .score{
  font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:clamp(2.6rem,5vw,4.2rem);line-height:1;color:var(--goud);
  font-variant-numeric:tabular-nums;padding-bottom:.06em;
}
.reviewkop .sterren{color:var(--goud);font-size:1.1rem;letter-spacing:.18em}
.reviewkop .telling{font-size:.95rem;color:rgba(245,241,232,.74)}
.rvband{
  overflow:hidden;margin-top:2.4rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5% 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5% 95%,transparent);
}
.rvspoor{display:flex;gap:1rem;width:max-content;animation:rvloop 62s linear infinite}
.rvband:hover .rvspoor{animation-play-state:paused}
@keyframes rvloop{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.rv{
  width:16rem;flex:none;padding:1.3rem 1.3rem 1.2rem;border-radius:6px;
  background:var(--espresso-2);border:1px solid rgba(245,241,232,.1);
  display:grid;gap:.6rem;align-content:start;
}
.rv .st{color:var(--goud);font-size:.78rem;letter-spacing:.14em}
.rv p{font-size:.94rem;line-height:1.5;color:rgba(245,241,232,.9);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rv b{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,241,232,.52)}

/* ---------------- lopende band ---------------- */
.band{overflow:hidden;border-top:1px solid var(--lijn-licht);border-bottom:1px solid var(--lijn-licht);padding:1.4rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6% 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6% 94%,transparent)}
.band__spoor{display:flex;gap:3rem;width:max-content;animation:band 48s linear infinite}
.band:hover .band__spoor{animation-play-state:paused}
.band__spoor span{
  font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:clamp(1.5rem,2.8vw,2.6rem);white-space:nowrap;opacity:.84;display:flex;align-items:center;gap:3rem;
}
.band__spoor span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--goud);flex:none}
@keyframes band{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------------- tellers ---------------- */
.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2.2rem;margin-top:3.2rem}
.cijfer b{
  display:block;font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:clamp(2.6rem,5vw,4.2rem);line-height:1;color:var(--goud);
  font-variant-numeric:tabular-nums;padding-bottom:.08em;
}
/* Een woord in plaats van een getal vraagt om een kleinere maat, anders breekt
   het over drie regels en valt het uit het raster. */
.cijfer--woord b{font-size:clamp(1.7rem,2.9vw,2.5rem);line-height:1.04}
.cijfer span{display:block;font-size:.92rem;color:rgba(245,241,232,.74);margin-top:.5rem;max-width:26ch}

/* ---------------- kaarten en galerij ---------------- */
.galerij{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.kaart{position:relative;overflow:hidden;border-radius:6px;background:var(--espresso-2);display:block}
.kaart img,.kaart video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--soep)}
.kaart video{opacity:0;transition:opacity .8s ease,transform 1.3s var(--soep)}
.kaart video.geverfd{opacity:1}
.kaart:hover img,.kaart:hover video{transform:scale(1.045)}
.kaart__etiket{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:1.6rem 1.4rem 1.25rem;
  background:linear-gradient(180deg,transparent,rgba(8,5,2,.92));color:var(--cream);
}
.kaart__etiket b{display:block;font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.28rem;padding-bottom:.08em}
.kaart__etiket span{font-size:.86rem;color:rgba(245,241,232,.8)}
.kaart__prijs{
  position:absolute;right:.9rem;top:.9rem;z-index:3;padding:.34rem .7rem;border-radius:999px;
  background:var(--goud);color:#1A1204;font-size:.74rem;font-weight:600;letter-spacing:.06em;
}
.k6{grid-column:span 6;aspect-ratio:16/11}
.k4{grid-column:span 4;aspect-ratio:1/1}
.k8{grid-column:span 8;aspect-ratio:16/9}
.k12{grid-column:span 12;aspect-ratio:21/9}

/* ---------------- duo ---------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.duo__beeld{position:relative;overflow:hidden;border-radius:6px;background:var(--espresso-2);aspect-ratio:4/3}
.duo__beeld img,.duo__beeld video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.duo__beeld video{opacity:0;transition:opacity .8s ease}
.duo__beeld video.geverfd{opacity:1}
.duo__beeld--portret{aspect-ratio:4/5;max-width:22rem}
.duo__tekst{display:grid;gap:1.3rem;align-content:start}
.duo--om .duo__beeld{order:2}

.punten{display:grid;gap:1.3rem;margin-top:.4rem}
.punt{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.punt .nr{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.05rem;color:var(--goud);line-height:1.5;min-width:1.6rem}
.punt strong{display:block;font-weight:600;font-size:1.02rem;margin-bottom:.2rem}
.punt p{color:var(--grijs);font-size:.98rem}
.op-nacht .punt p,.op-warm .punt p{color:rgba(245,241,232,.76)}

/* ---------------- stappen ---------------- */
.stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin-top:3rem}
.stap{
  position:relative;padding:1.9rem 1.5rem 2rem;border:1px solid var(--lijn);border-radius:6px;
  background:var(--cream);overflow:hidden;transition:transform .5s var(--soep),box-shadow .5s var(--soep);
}
.stap:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(10,7,4,.5)}
.stap .nr{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:2.4rem;line-height:1;color:var(--goud);display:block;margin-bottom:.8rem}
.stap b{display:block;font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.26rem;padding-bottom:.08em;margin-bottom:.4rem}
.stap p{font-size:.96rem;color:var(--grijs)}

/* ---------------- tarieven ---------------- */
.tarieven{display:grid;gap:.55rem;margin-top:2.6rem;max-width:44rem}
.tarief{
  display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;
  padding:1.05rem 1.3rem;border:1px solid var(--lijn);border-radius:6px;background:var(--cream);
  transition:transform .35s var(--soep),border-color .3s,box-shadow .35s var(--soep);
}
.op-nacht .tarief,.op-warm .tarief{background:var(--espresso-2);border-color:rgba(245,241,232,.12)}
.tarief:hover{transform:translateY(-2px);border-color:var(--goud);box-shadow:0 18px 34px -24px rgba(30,18,4,.6)}
.tarief b{display:block;font-size:1.02rem;font-weight:600}
.tarief span{display:block;font-size:.87rem;color:var(--grijs);margin-top:.15rem}
.op-nacht .tarief span,.op-warm .tarief span{color:rgba(245,241,232,.66)}
.tarief .bedrag{
  font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:1.6rem;color:var(--brons);font-variant-numeric:tabular-nums;padding-bottom:.06em;white-space:nowrap;
}
.op-nacht .tarief .bedrag,.op-warm .tarief .bedrag{color:var(--goud)}

/* ---------------- werkgebied ---------------- */
.plaatsen{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.plaats{
  padding:.6rem 1.1rem;border-radius:999px;border:1px solid var(--lijn-licht);
  font-size:.82rem;font-weight:600;letter-spacing:.06em;color:var(--cream);
  transition:border-color .3s,background .3s,color .3s;
}
/* De chips staan standaard op een donkere sectie. Op linnen of cream stond
   cream op cream en was er niets te lezen; daar krijgen ze inkt en een
   zichtbare rand. */
.op-linnen .plaats,
main .blok:not(.op-nacht):not(.op-warm) .plaats{
  border-color:rgba(15,11,7,.26);background:rgba(255,255,255,.55);color:var(--inkt);
}
.plaats:hover,
.op-linnen .plaats:hover,
main .blok:not(.op-nacht):not(.op-warm) .plaats:hover{
  border-color:var(--goud);background:var(--goud);color:#1A1204;
}

/* ---------------- agenda ---------------- */
.agenda{
  position:relative;z-index:2;max-width:56rem;margin:0 auto;overflow:hidden;
  background:var(--cream);color:var(--inkt);border-radius:8px;
  box-shadow:0 60px 110px -46px rgba(0,0,0,.85),0 0 0 1px rgba(245,241,232,.07);
}
.agenda__hoofd{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.05rem clamp(1.2rem,3.4vw,2.4rem);background:var(--linnen);border-bottom:1px solid var(--lijn);
}
.agenda__hoofd .titel{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.1rem;padding-bottom:.06em}
.agenda__hoofd .klok{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brons)}
.agenda__body{padding:clamp(1.3rem,3.4vw,2.4rem)}
.weekrij{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.weekrij b{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.22rem;padding-bottom:.06em}
.weekrij .pijlen{display:flex;gap:.5rem}
.weekrij button{
  width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--lijn);background:var(--cream);
  cursor:pointer;font-size:1rem;color:var(--inkt);transition:border-color .3s,background .3s,transform .3s}
.weekrij button:hover:not(:disabled){border-color:var(--goud);background:var(--goud);transform:translateY(-2px)}
.weekrij button:disabled{opacity:.3;cursor:not-allowed}
.dagen{display:grid;grid-template-columns:repeat(7,1fr);gap:.45rem}
.dag{
  display:grid;gap:.15rem;justify-items:center;padding:.75rem .2rem .8rem;border-radius:6px;
  border:1px solid var(--lijn);background:#fff;cursor:pointer;font:inherit;color:inherit;
  transition:transform .3s var(--soep),border-color .25s,background .25s,box-shadow .3s;
}
.dag em{font-style:normal;font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grijs)}
.dag b{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.32rem;line-height:1;padding-bottom:.06em}
.dag i{font-style:normal;font-size:.6rem;color:var(--groen);font-weight:600}
.dag:hover:not(:disabled){transform:translateY(-3px);border-color:var(--goud);box-shadow:0 3px 0 var(--brons)}
.dag[aria-pressed="true"]{background:var(--espresso);border-color:var(--espresso);box-shadow:0 3px 0 var(--brons)}
.dag[aria-pressed="true"] em{color:var(--goud)}
.dag[aria-pressed="true"] b{color:var(--cream)}
.dag[aria-pressed="true"] i{color:var(--goud-licht)}
.dag:disabled{opacity:.34;cursor:not-allowed;background:var(--linnen)}
.dag:disabled i{color:var(--grijs)}
.sloten{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.2rem,1fr));gap:.5rem;margin-top:1.4rem}
.slot{
  padding:.8rem .5rem;border-radius:6px;border:1px solid var(--lijn);background:#fff;
  font:inherit;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;
  transition:transform .3s var(--soep),border-color .25s,background .25s,color .25s,box-shadow .3s;
}
.slot:hover:not(:disabled){transform:translateY(-3px);border-color:var(--goud);box-shadow:0 3px 0 var(--brons)}
.slot[aria-pressed="true"]{background:var(--goud);border-color:var(--goud);color:#1A1204;box-shadow:0 3px 0 var(--brons)}
.slot:disabled{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.agenda__slot{
  display:grid;gap:1rem;padding:clamp(1.3rem,3.4vw,2.4rem);
  background:var(--linnen);border-top:1px solid var(--lijn);
}
.gekozen{font-size:1.02rem;font-weight:600}
.gekozen span{color:var(--brons)}

/* ---------------- slotbanner ---------------- */
.slotband{position:relative;overflow:hidden;background:var(--espresso-2);color:var(--cream)}
.slotband .wrap{position:relative;z-index:2;display:grid;gap:1.5rem;justify-items:start;padding-top:clamp(4.5rem,9vw,8rem);padding-bottom:clamp(4.5rem,9vw,8rem)}
.slotband::after{content:"";position:absolute;right:-12%;top:-30%;width:60%;height:160%;z-index:1;
  background:radial-gradient(circle at 50% 50%,rgba(201,160,76,.2),transparent 62%)}
.knoprij{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---------------- voet ---------------- */
.voet{background:var(--espresso);color:rgba(245,241,232,.78);padding:4.5rem 0 2.4rem}
.voet a{border-bottom:1px solid rgba(245,241,232,.26)}
.voet a:hover{border-bottom-color:var(--goud);color:var(--goud-licht)}
.voet__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.4rem}
.voet h5{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.12rem;color:var(--cream);margin-bottom:.9rem}
.voet ul{list-style:none;display:grid;gap:.55rem;font-size:.95rem}
.voet__rand{margin-top:3.2rem;padding-top:1.4rem;border-top:1px solid rgba(245,241,232,.13);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.78rem;color:rgba(245,241,232,.5)}

/* ---------------- plakker ---------------- */
.plakker{
  position:fixed;left:50%;bottom:1.4rem;z-index:130;
  transform:translateX(-50%) translateY(160%);transition:transform .55s var(--soep);
  background:rgba(15,11,7,.94);backdrop-filter:blur(14px);
  border-radius:999px;padding:.55rem .55rem .55rem 1.5rem;
  display:flex;align-items:center;gap:1.1rem;max-width:calc(100vw - 2rem);
  box-shadow:0 20px 54px rgba(0,0,0,.46);
}
.plakker.aan{transform:translateX(-50%) translateY(0)}
.plakker p{color:var(--cream);font-size:.82rem;letter-spacing:.04em;white-space:nowrap}
.plakker .knop{min-height:2.5rem;padding:.6rem 1.1rem;font-size:.66rem}

/* ============================================================
   BINNENPAGINA'S
   ============================================================ */
.paginakop{
  position:relative;min-height:clamp(26rem,56svh,38rem);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--espresso);color:var(--cream);
}
.paginakop__media{position:absolute;inset:0;z-index:0}
.paginakop__media img,.paginakop__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center)}
.paginakop__media video{z-index:1;opacity:0;transition:opacity 1.2s ease}
.paginakop__media video.geverfd{opacity:1}
.paginakop::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,5,2,.78) 0%,rgba(8,5,2,.2) 34%,rgba(8,5,2,.94) 100%),
    linear-gradient(90deg,rgba(8,5,2,.7) 0%,rgba(8,5,2,.06) 62%,transparent 100%);
}
.paginakop__inhoud{position:relative;z-index:2;width:100%;padding:8rem 0 clamp(2.8rem,6vw,4.6rem)}
.paginakop__inhoud .wrap{display:grid;gap:1.2rem}
.kruimel{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,241,232,.55)}
.kruimel a{border-bottom:1px solid rgba(245,241,232,.28)}
.kruimel a:hover{color:var(--goud);border-bottom-color:var(--goud)}

/* ---------------- gereedschap: funnel en agenda ---------------- */
.tool--direct{padding:6.2rem 0 clamp(3.2rem,6vw,5.5rem)}
.tool__kop{position:relative;z-index:2;max-width:56rem;margin:0 auto 1.6rem;display:grid;gap:.6rem}
.tool__kop h1{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;
  letter-spacing:-.024em;line-height:1;color:var(--cream);padding-bottom:.08em}
.tool__kop h1 em{font-style:italic;color:var(--goud)}
.tool__kop .lead{color:rgba(245,241,232,.8);max-width:54ch}
.tool__gerust{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:.5rem;
  font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,241,232,.62)}
.tool__gerust span{display:flex;align-items:center;gap:.5rem}
.tool__gerust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--goud)}
@media (max-width:640px){
  .tool--direct{padding-top:5.2rem}
  .tool__gerust{gap:.35rem 1rem;font-size:.6rem}
}
.tool{position:relative;overflow:hidden;background:var(--espresso);color:var(--cream)}
.tool::before{
  content:"";position:absolute;left:50%;top:-14%;width:86rem;max-width:160%;height:74%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(201,160,76,.17),transparent 66%);
}
.kaartje{
  position:relative;z-index:2;max-width:56rem;margin:0 auto;overflow:hidden;
  background:var(--cream);color:var(--inkt);border-radius:8px;
  box-shadow:0 60px 110px -46px rgba(0,0,0,.85),0 0 0 1px rgba(245,241,232,.07);
}
.kaartje__balk{height:3px;background:rgba(15,11,7,.1)}
.kaartje__balk i{display:block;height:100%;width:0;background:var(--goud);transition:width .7s var(--soep)}
.kaartje__hoofd{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem clamp(1.3rem,3.6vw,2.6rem);background:var(--linnen);border-bottom:1px solid var(--lijn);
}
.kaartje__hoofd .titel{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.08rem;padding-bottom:.06em}
.kaartje__hoofd .teller{font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brons);opacity:0;transition:opacity .4s}
.kaartje__hoofd .teller.aan{opacity:1}

.stapblad{padding:clamp(1.5rem,3.8vw,2.8rem)}
.scherm{display:none}
.scherm.aan{display:block;animation:schuifIn .6s var(--soep) both}
@keyframes schuifIn{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:none}}
.scherm h3{
  font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:clamp(1.6rem,3.2vw,2.4rem);letter-spacing:-.022em;line-height:1.04;padding-bottom:.1em;
}
.scherm h3 em{font-style:italic;color:var(--brons)}
.scherm .hint{margin-top:.7rem;max-width:52ch;font-size:.97rem;color:var(--grijs)}

.keuzes{display:grid;gap:.7rem;margin-top:1.7rem}
.keuzes.twee{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.keuze{
  display:flex;align-items:flex-start;gap:1rem;width:100%;text-align:left;
  padding:1.05rem 1.15rem;background:#fff;border:1px solid var(--lijn);border-radius:6px;
  font:inherit;color:inherit;cursor:pointer;
  transition:transform .35s var(--soep),box-shadow .35s var(--soep),border-color .3s;
}
.keuze .icoon{
  flex:none;width:2.3rem;height:2.3rem;border-radius:5px;display:grid;place-items:center;
  background:var(--linnen);color:var(--brons);
  font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:.95rem;
  transition:background .3s,color .3s;
}
.keuze b{display:block;font-weight:600;font-size:1rem;line-height:1.3}
.keuze>span>span{display:block;margin-top:.15rem;font-size:.87rem;color:var(--grijs);line-height:1.45}
.keuze:hover{transform:translateY(-3px);border-color:var(--goud);
  box-shadow:0 3px 0 var(--brons),0 20px 36px -22px rgba(30,18,4,.55)}
.keuze:hover .icoon{background:var(--goud);color:#1A1204}
.keuze:active{transform:translateY(1px);box-shadow:0 1px 0 var(--brons)}

.veld{margin-top:1.8rem;max-width:26rem}
.veld label{display:block;margin-bottom:.55rem;font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brons)}
.veld input{
  width:100%;font:inherit;font-size:1.1rem;padding:.95rem 1.05rem;
  background:#fff;color:var(--inkt);border:1px solid var(--lijn);border-radius:6px;
  transition:border-color .3s,box-shadow .3s;
}
.veld input:focus{outline:0;border-color:var(--goud);box-shadow:0 0 0 3px rgba(201,160,76,.26)}
.fout{display:none;margin-top:.55rem;font-size:.85rem;color:var(--rood)}
.fout.aan{display:block}
.gerust{display:flex;align-items:center;gap:.55rem;margin-top:.95rem;font-size:.82rem;color:var(--grijs)}
.gerust::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--goud);flex:none}
.slot-rij{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.terug{background:none;border:0;padding:.5rem 0;font:inherit;font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--grijs);cursor:pointer;transition:color .3s}
.terug:hover{color:var(--brons)}

.uitkomst{display:none}
.uitkomst.aan{display:block;animation:schuifIn .75s var(--soep) both}
.uit-hoofd{position:relative;overflow:hidden;background:var(--espresso);color:var(--cream);
  padding:clamp(2rem,5vw,3.2rem) clamp(1.3rem,3.6vw,2.6rem)}
.uit-hoofd::after{content:"";position:absolute;right:-12%;top:-70%;width:64%;height:240%;
  background:radial-gradient(circle at 50% 50%,rgba(201,160,76,.3),transparent 62%)}
.uit-hoofd .oog{position:relative;z-index:2;color:var(--goud)}
.uit-hoofd .bedrag{
  position:relative;z-index:2;margin-top:.7rem;
  font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.04;letter-spacing:-.022em;padding-bottom:.08em;
}
.uit-hoofd .bedrag em{font-style:normal;color:var(--goud-licht)}
.uit-hoofd .onderschrift{position:relative;z-index:2;margin-top:.85rem;max-width:52ch;font-size:.97rem;color:rgba(245,241,232,.82)}
.uit-body{padding:clamp(1.5rem,3.8vw,2.6rem)}
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.75rem}
.tegel{padding:1.15rem 1.05rem;background:#fff;border:1px solid var(--lijn);border-radius:6px}
.tegel .t-oog{display:block;font-size:.58rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brons)}
.tegel b{display:block;margin:.5rem 0 .3rem;font-family:var(--display);font-variation-settings:'opsz' 144;
  font-weight:600;font-size:1.85rem;line-height:1.1;color:var(--espresso);padding-bottom:.06em}
.tegel>span:last-child{display:block;font-size:.83rem;color:var(--grijs);line-height:1.5}
.staafkop{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin:2.4rem 0 1rem;padding-bottom:.65rem;border-bottom:1px solid var(--lijn)}
.staafkop h4{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.22rem;padding-bottom:.06em}
.staafkop small{font-size:.76rem;color:var(--grijs)}
.staven{display:grid;gap:.7rem}
.staaf,.vgl{display:grid;grid-template-columns:minmax(8rem,12rem) 1fr auto;gap:1rem;align-items:center;font-size:.92rem}
.staaf .spoor,.vgl .spoor{display:block;height:10px;border-radius:5px;background:var(--linnen);overflow:hidden}
.staaf .spoor i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--brons),var(--goud));transition:width 1.2s var(--soep)}
.bedragje{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.vergelijk{display:grid;gap:.9rem}
.vgl .spoor{height:16px;border-radius:4px}
.vgl .spoor i{display:block;height:100%;width:0;border-radius:4px;transition:width 1.3s var(--soep)}
.vgl.markt .spoor i{background:var(--grijs)}
.vgl.eigen .spoor i{background:linear-gradient(90deg,var(--brons),var(--goud))}
.vgl b{font-weight:600}
.tijdlijn{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.75rem}
.tl{position:relative;padding:1.15rem 1rem 1.05rem;background:#fff;border:1px solid var(--lijn);border-radius:6px}
.tl::before{content:"";position:absolute;left:1rem;top:0;width:26px;height:3px;background:var(--lijn)}
.tl.klaar::before{background:var(--goud)}
.tl b{display:block;font-size:.95rem;font-weight:600}
.tl span{display:block;margin-top:.2rem;font-size:.82rem;color:var(--grijs)}
/* de zin die je tegen je kapper zegt, de kern van de uitkomst */
.zeg{
  position:relative;margin-top:.2rem;padding:1.5rem 1.6rem 1.5rem 3.2rem;border-radius:8px;
  background:var(--espresso);color:var(--cream);
  font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:clamp(1.12rem,2vw,1.5rem);line-height:1.32;letter-spacing:-.012em;
  box-shadow:0 3px 0 var(--brons),0 24px 44px -26px rgba(10,7,4,.7);
}
.zeg::before{
  content:"";position:absolute;left:1.4rem;top:1.55rem;width:3px;height:calc(100% - 3.1rem);
  border-radius:3px;background:linear-gradient(180deg,var(--goud),var(--brons));
}
@media (max-width:640px){.zeg{padding:1.2rem 1.1rem 1.2rem 2.2rem}.zeg::before{left:.9rem}}

.uit-slot{display:grid;gap:1rem;justify-items:start;padding:clamp(1.5rem,3.8vw,2.6rem);
  background:var(--linnen);border-top:1px solid var(--lijn)}
.kleine-letters{font-size:.76rem;color:var(--grijs);line-height:1.62;max-width:72ch}

/* ---------------- steunblokken ---------------- */
.drie{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:clamp(1.6rem,4vw,3rem);margin-top:3rem}
.drie h4{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.26rem;padding-bottom:.06em;margin-bottom:.5rem}
.drie p{font-size:.96rem;color:var(--grijs)}
.op-nacht .drie p,.op-warm .drie p{color:rgba(245,241,232,.76)}
.drie .nr{display:block;font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:2.2rem;line-height:1;color:var(--goud);margin-bottom:.6rem}

.vraag{border-bottom:1px solid var(--lijn)}
.vraag summary{list-style:none;cursor:pointer;padding:1.3rem 2.5rem 1.3rem 0;position:relative;
  font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.14rem}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"";position:absolute;right:.4rem;top:50%;width:13px;height:13px;margin-top:-7px;
  border-right:1.6px solid var(--brons);border-bottom:1.6px solid var(--brons);
  transform:rotate(45deg);transition:transform .4s var(--soep)}
.vraag[open] summary::after{transform:rotate(-135deg)}
.vraag p{padding:0 2.5rem 1.5rem 0;color:var(--grijs);font-size:.97rem;max-width:64ch}

/* ---------------- mobiel ---------------- */
@media (max-width:900px){
  .duo{grid-template-columns:1fr}
  .duo--om .duo__beeld{order:0}
  .duo__beeld--portret{max-width:100%}
  .k6,.k4,.k8,.k12{grid-column:span 12}
  .k6,.k8{aspect-ratio:4/3}
  .k12{aspect-ratio:3/2}
  .voet__grid{grid-template-columns:1fr}
  .hoofdstuk__binnen{max-width:100%}
  .hoofdstuk__kopij::before{inset:-2rem -1.5rem}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero__strip{gap:.6rem 1.2rem;font-size:.62rem}
  .hero__acties .knop{width:100%;justify-content:center}
  .plakker p{display:none}
  .film__route{gap:.55rem .9rem;font-size:.58rem;bottom:1.1rem}
  .staaf,.vgl{grid-template-columns:1fr auto;row-gap:.3rem}
  .staaf .spoor,.vgl .spoor{grid-column:1 / -1;order:3}
  .paginakop__inhoud{padding-top:6.6rem}
  .uit-slot .knoprij .knop,.agenda__slot .knop{width:100%;justify-content:center}
  .merk__sub{display:none}
  .merk__naam{font-size:1.02rem}
  .merk__mark{width:34px;height:34px}
  .kopbalk{gap:.7rem;padding:.65rem var(--goot)}
  .kopbalk .knop{min-height:2.3rem;padding:.5rem .85rem;font-size:.58rem;letter-spacing:.05em}
  .film__kopijlaag .hoofdstuk__binnen{max-width:none !important;width:100%}
  .film__kopijlaag .knop{width:100%;justify-content:center;font-size:.66rem;letter-spacing:.05em}
  .dagen{gap:.3rem}
  .dag{padding:.6rem .1rem .65rem}
  .dag b{font-size:1.1rem}
  .dag em{font-size:.55rem}
  .dag i{font-size:.52rem}
  .rv{width:14rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .regels .regel>span,.onthul{transform:none;opacity:1}
  .masker::after{transform:scaleY(0)}
  .film__laag video{display:none}
  .laad,.schaar{display:none}
  .scherm.aan,.uitkomst.aan{animation:none}
}