/* ══════════════════════════════════════════════════════════════
   tattoos van elle — stijlblad
   Palet, schaal en beweging komen uit BOUWSPEC.md.
   Vier kleuren, acht tekstmaten, twee curves. Meer niet.
   ══════════════════════════════════════════════════════════════ */

/* ── lettertypes ─────────────────────────────────────────────── */
@font-face{font-family:Satoshi;src:url(lettertype/satoshi-300.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(lettertype/satoshi-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(lettertype/satoshi-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Switzer;src:url(lettertype/switzer-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Switzer;src:url(lettertype/switzer-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ── tokens ──────────────────────────────────────────────────── */
:root{
  /* de vier kleuren */
  --papier:#E3E0D9;
  --inkt:#0B0A12;
  --indigo:#191061;
  --peri:#B0C0FE;

  /* afgeleiden: alleen alpha, nooit een vijfde kleur */
  --inkt-62:rgba(11,10,18,.62);
  --inkt-55:rgba(11,10,18,.55);
  --inkt-42:rgba(11,10,18,.42);
  --inkt-16:rgba(11,10,18,.16);
  --inkt-08:rgba(11,10,18,.08);
  --peri-zacht:#C9D3FE;
  --papier-diep:#D6D2C8;
  --print:#FBFAF7;          /* de rand van een afdruk, geen puur wit */

  /* ruimte, alles maal 8 */
  --r1:8px; --r2:16px; --r3:24px; --r4:40px; --r5:64px; --r6:104px; --r7:160px;

  /* radii */
  --rond:2px; --pil:999px;

  /* beweging */
  --ease:cubic-bezier(.625,.05,0,1);
  --ease-soft:cubic-bezier(.22,1,.36,1);
  --d-kleur:.25s; --d-klein:.35s; --d-kaart:.4s; --d-beeld:.6s;
  --d-groot:.8s;  --d-reveal:.9s; --stap:90ms;

  /* door script gezet */
  --muis-x:0; --muis-y:0; --scroll:0;
}

/* op de telefoon schuift de hele ruimteladder een stap terug */
@media (max-width:719px){
  :root{--r4:24px; --r5:48px; --r6:72px; --r7:96px}
}

/* ── grondslag ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  -webkit-tap-highlight-color:rgba(0,0,0,0)}
section[id]{scroll-margin-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--papier);
  color:var(--inkt);
  font-family:Switzer,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; font-weight:400; line-height:1.6;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
::selection{background:var(--peri);color:var(--indigo)}

/* ── typografische schaal, acht maten ────────────────────────── */
.reus,.d1,.d2,.d3{font-family:Satoshi,ui-sans-serif,system-ui,sans-serif;margin:0}
.reus{font-size:clamp(96px,20vw,340px);font-weight:700;line-height:.78;letter-spacing:-.03em}
.d1{font-size:clamp(56px,9vw,140px);font-weight:500;line-height:.86;letter-spacing:-.02em}
.d2{font-size:clamp(34px,5vw,68px);font-weight:500;line-height:.95;letter-spacing:-.015em}
.d3{font-size:28px;font-weight:500;line-height:1.15;letter-spacing:-.01em;margin:0}
.lead{font-size:21px;line-height:1.5;max-width:46ch;margin:0}
.body{font-size:17px;line-height:1.6;max-width:62ch;margin:0}
.klein{font-size:14px;line-height:1.5;max-width:52ch;margin:0;color:var(--inkt-62)}
.chip{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;line-height:1}

p{margin:0 0 var(--r2);max-width:70ch}
p:last-child{margin-bottom:0}

/* ── de gespiegelde e, haar handtekening ─────────────────────── */
.spiegel{display:inline-block;transform:scaleX(-1);font-style:normal}

/* ══ vaste lagen ══════════════════════════════════════════════ */

/* korrel — de goedkoopste manier om digitaal-schoon weg te halen */
.korrel{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* haarlijnkader met één inkeping waar het label uitsteekt */
.kader{
  position:fixed;inset:14px;z-index:80;pointer-events:none;
  border:1px solid var(--inkt-16);border-bottom:0;
}
/* de onderlijn heeft een echt gat, geen dekvlakje eroverheen */
.kader::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,
    var(--inkt-16) 0 calc(50% - 118px),
    transparent calc(50% - 118px) calc(50% + 118px),
    var(--inkt-16) calc(50% + 118px) 100%);
}
.kader__label{
  position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);
  font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;
  color:var(--inkt-55);white-space:nowrap;
}
@media (max-width:719px){.kader{inset:8px}.kader__label{font-size:11px;letter-spacing:.14em}}

.overslaan{
  position:fixed;top:8px;left:8px;z-index:200;
  background:var(--indigo);color:var(--peri);padding:var(--r1) var(--r2);
  border-radius:var(--pil);font-size:14px;text-decoration:none;
  transform:translateY(-200%);transition:transform var(--d-klein) var(--ease-soft);
}
.overslaan:focus-visible{transform:translateY(0)}

/* ── navigatie ───────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:70;
  display:flex;align-items:center;gap:var(--r3);
  padding:var(--r3) var(--r4);
  mix-blend-mode:normal;
}
.nav__merk{
  display:flex;flex-direction:column;line-height:.9;text-decoration:none;
  font-family:Satoshi,sans-serif;
}
.nav__merk span{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-62)}
.nav__merk b{font-size:21px;font-weight:700;letter-spacing:-.03em}
.nav__links{display:flex;gap:var(--r3);margin-left:auto}
.nav__links a{
  position:relative;text-decoration:none;font-size:14px;font-weight:500;
  padding-bottom:2px;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--inkt);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-klein) var(--ease-soft);
}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1)}
.nav__knop{font-size:14px;padding:8px 16px}
/* De balk moet ook boven het indigo vlak van de agenda leesbaar blijven.
   Daarom een papieren balk, niet een doorzichtige. */
.nav--los{
  background:rgba(227,224,217,.86);
  backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);
  border-bottom:1px solid var(--inkt-08);
  padding-top:var(--r2);padding-bottom:var(--r2);
  transition:background var(--d-kleur) var(--ease-soft),padding var(--d-klein) var(--ease-soft);
}
@media (max-width:900px){
  .nav{flex-wrap:wrap;row-gap:6px;padding:var(--r2) var(--r3)}
  .nav__merk{margin-right:auto}
  .nav__links{order:3;width:100%;margin-left:0;gap:var(--r2)}
  .nav__links a{font-size:12px;padding:6px 0}
}

/* ── knoppen ─────────────────────────────────────────────────── */
.knop{
  --lift:0px;
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:16px 24px;border-radius:var(--pil);
  border:1px solid var(--inkt);
  font-family:Satoshi,sans-serif;font-size:14px;font-weight:500;
  letter-spacing:.04em;text-decoration:none;white-space:nowrap;
  transition:background var(--d-kleur) var(--ease-soft),
             color var(--d-kleur) var(--ease-soft),
             border-color var(--d-kleur) var(--ease-soft);
}
.knop__stip{
  width:8px;height:8px;border-radius:var(--pil);background:currentColor;
  transition:transform var(--d-klein) var(--ease-soft);
}
.knop:hover .knop__stip,.knop:focus-visible .knop__stip{transform:scale(1.9)}
.knop--vol{background:var(--indigo);border-color:var(--indigo);color:var(--peri)}
.knop--vol:hover,.knop--vol:focus-visible{background:var(--inkt);border-color:var(--inkt)}
.knop:not(.knop--vol):hover,.knop:not(.knop--vol):focus-visible{background:var(--inkt);color:var(--papier)}
.knop--groot{padding:16px 32px;font-size:17px}
.knop:active{transition-timing-function:var(--ease-soft)}

.link{color:inherit;text-decoration:none;border-bottom:1px solid var(--inkt-42);
  transition:border-color var(--d-kleur) var(--ease-soft),color var(--d-kleur) var(--ease-soft)}
.link:hover,.link:focus-visible{border-color:var(--indigo);color:var(--indigo)}

:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:var(--rond)}

/* ══ 1 · held ═════════════════════════════════════════════════ */
/* Haar logo-bericht is zwart op periwinkle. Dat vlak is het merk,
   dus de held is dat vlak, op schermformaat.                       */
.held{
  position:relative;min-height:100svh;
  padding:var(--r7) var(--r4) var(--r4);
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  background:var(--peri);
}
.held::before{ /* licht over het vlak, één hue, nooit twee */
  content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 44% at 66% 26%, rgba(255,255,255,.62), rgba(255,255,255,0) 68%),
    radial-gradient(46% 40% at 12% 88%, rgba(25,16,97,.16), rgba(25,16,97,0) 70%);
}

.held__kicker{
  position:relative;z-index:3;display:flex;align-items:center;gap:12px;
  margin:0 0 var(--r4);font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;color:rgba(11,10,18,.66);
}
.stip{width:4px;height:4px;border-radius:var(--pil);background:var(--indigo);
  animation:pols 1.6s var(--ease) infinite}
@keyframes pols{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* het logo op schermformaat */
.held__woord{position:relative;z-index:3;margin:0;pointer-events:none}
.held__klein{
  display:block;font-family:Satoshi,sans-serif;font-weight:700;
  font-size:clamp(28px,4.6vw,64px);line-height:.88;letter-spacing:-.03em;
}
.held__reus{
  display:block;font-family:Satoshi,sans-serif;font-weight:700;
  font-size:clamp(110px,26vw,420px);line-height:.74;letter-spacing:-.045em;
  margin-left:-.04em;
}
.rol{display:block;overflow:hidden}
.rol>span{display:block;transform:translateY(102%);
  transition:transform 1.2s var(--ease)}
.held.aan .rol>span{transform:translateY(0)}
.held__klein .rol:nth-child(2)>span{transition-delay:.12s}
.held__reus .rol>span{transition-delay:.24s}

/* het glazen object */
.glas{position:relative;pointer-events:none}
.glas--held{
  position:absolute;z-index:2;
  right:clamp(-60px,3vw,60px);top:44%;
  width:clamp(320px,50vw,820px);aspect-ratio:1/1.1;
  transform:translate3d(calc(var(--muis-x)*-16px),calc(-50% + var(--muis-y)*-14px + var(--drijf,0px)),0);
  transition:transform .9s var(--ease-soft);
  filter:drop-shadow(0 46px 70px rgba(25,16,97,.28));
}
.glas__poster,.glas__doek{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;
}
.glas__poster{transition:opacity var(--d-groot) var(--ease),transform 1.2s var(--ease)}
.glas--held .glas__poster{opacity:0;transform:scale(.94) translateY(30px)}
.held.aan .glas__poster{opacity:1;transform:none}
.glas__doek{opacity:0;transition:opacity .6s var(--ease)}
.glas.leeft .glas__doek{opacity:1}
.glas.leeft .glas__poster{opacity:0}
.glas.zweef{animation:zweef 6s var(--ease) infinite alternate}
@keyframes zweef{from{translate:0 0;rotate:-.8deg}to{translate:0 -8px;rotate:.7deg}}

/* haar eigen tekeningen zweven op de achtergrond */
.held__achter{position:absolute;inset:0;z-index:1;pointer-events:none}
.held__zweef{
  position:absolute;opacity:.22;
  transform:translate3d(calc(var(--muis-x)*var(--k,8px)),calc(var(--muis-y)*var(--k,8px)),0);
  transition:transform 1.1s var(--ease-soft);
}
.held__zweef--1{top:9%;left:4%;width:58px;--k:26px}
.held__zweef--2{top:64%;left:16%;width:48px;--k:-18px}
.held__zweef--3{top:26%;right:34%;width:96px;--k:14px}
.held__zweef--4{bottom:16%;right:12%;width:38px;--k:-24px}
.held__zweef--5{top:8%;right:16%;width:44px;--k:20px}

.held__voet{
  position:relative;z-index:3;
  margin-top:var(--r5);display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--r4);
}
.held__voet .lead{max-width:34ch}
.held__voet>*{opacity:0;transform:translateY(20px);
  transition:opacity var(--d-reveal) var(--ease) .5s,transform var(--d-reveal) var(--ease) .5s}
.held__voet>*:nth-child(2){transition-delay:.62s}
.held.aan .held__voet>*{opacity:1;transform:none}

.held__scroll{
  position:absolute;left:50%;bottom:var(--r4);z-index:3;
  width:1px;height:56px;background:rgba(11,10,18,.2);overflow:hidden;
}
.held__scrollbalk{position:absolute;inset:0;background:var(--indigo);
  animation:zak 2.4s var(--ease) infinite}
@keyframes zak{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

@media (max-width:900px){
  .held{padding:calc(var(--r7) + var(--r2)) var(--r3) var(--r5);justify-content:flex-end}
  .glas--held{position:relative;right:auto;top:auto;transform:none;
    width:min(78vw,420px);margin:0 auto var(--r3);order:-1}
  .held.aan .glas--held{transform:none}
  .held__voet{margin-top:var(--r4);gap:var(--r3)}
  .held__scroll{display:none}
}

/* ══ 2 · de zin ═══════════════════════════════════════════════ */
.zin{
  position:relative;overflow:hidden;
  min-height:88svh;
  padding:var(--r7) var(--r4);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--r4);
  text-align:center;
}
/* het geest-woord: toon op toon, net zichtbaar, drijft mee met de scroll */
.zin__ghost{
  position:absolute;left:50%;top:42%;z-index:0;
  transform:translate(-50%,calc(-50% + var(--drijf,0px)));
  font-family:Satoshi,sans-serif;font-weight:700;
  font-size:clamp(110px,19vw,330px);line-height:1;letter-spacing:-.045em;
  color:rgba(176,192,254,.42);white-space:nowrap;pointer-events:none;
}
.zin .zin__tekst,.zin .chips{position:relative;z-index:2}
/* het tweede glasobject: haar takje, links van de zin */
.glas--zin:not(.leeft) .glas__poster{opacity:.8}
.glas--zin .glas__poster{transition:opacity .25s var(--ease-soft)}
.glas--zin .glas__doek{transition-duration:.25s}
.glas--zin{
  position:absolute;z-index:1;
  left:clamp(-20px,7vw,170px);top:14%;
  width:clamp(170px,20vw,330px);aspect-ratio:1;
  transform:rotate(-9deg) translateY(var(--drijf,0px));
  filter:drop-shadow(0 30px 50px rgba(25,16,97,.25));
}
/* de strook met haar tekeningen, traag en oneindig */
.lint{
  position:relative;z-index:2;margin-top:var(--r5);
  width:min(100%,1240px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}
.lint__baan{display:flex;width:max-content;animation:lint 26s linear infinite}
.lint__set{display:flex;align-items:center;gap:var(--r5);padding-right:var(--r5)}
.lint__set img{height:48px;width:auto;opacity:.55}
@keyframes lint{to{transform:translateX(-50%)}}
@media (max-width:719px){
  .zin{padding:var(--r6) var(--r3);min-height:72svh}
  .zin__ghost{font-size:34vw}
  .glas--zin{left:auto;right:-8vw;top:6%;width:38vw;opacity:.9}
  .lint__set{gap:var(--r3);padding-right:var(--r3)}
  .lint__set img{height:34px}
}
.zin__tekst{
  font-family:Satoshi,sans-serif;font-weight:300;
  font-size:clamp(28px,5.2vw,76px);line-height:1.06;letter-spacing:-.02em;
  max-width:min(16ch,100%);margin:0;text-wrap:balance;
  clip-path:inset(0 100% 0 0);
  transition:clip-path var(--d-reveal) var(--ease);
}
.zin__tekst.in{clip-path:inset(0 0 0 0)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--r1);
  list-style:none;margin:0;padding:0;width:100%}
.chips .chip{
  flex:0 0 auto;white-space:nowrap;
  padding:8px 16px;border-radius:var(--pil);
  background:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--indigo);
  opacity:0;transform:translateY(14px);
  transition:opacity var(--d-reveal) var(--ease),transform var(--d-reveal) var(--ease);
  transition-delay:calc(var(--stap) * var(--i,0));
}
.chips.in .chip{opacity:1;transform:none}
@media (max-width:719px){
  .chips .chip{padding:8px 12px;font-size:11px;letter-spacing:.1em}
}

/* ── sectiekop ───────────────────────────────────────────────── */
.sectiekop{padding:0 var(--r4);margin-bottom:var(--r5);display:grid;gap:var(--r3)}
.sectiekop--midden{text-align:left;justify-items:start}
@media (max-width:719px){.sectiekop{padding:0 var(--r3);margin-bottom:var(--r4)}}

/* ── reveal ──────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity var(--d-reveal) var(--ease),transform var(--d-reveal) var(--ease);
  transition-delay:calc(var(--stap) * var(--i,0))}
.reveal.in{opacity:1;transform:none}

/* ══ 3 · werk ═════════════════════════════════════════════════ */
.werk{padding:var(--r6) 0 var(--r7)}
/* Een plakboek loopt vol, met kolommen in plaats van een raster.
   Een raster laat gaten vallen zodra de kaarten niet even hoog zijn. */
.plakboek{
  columns:3;column-gap:var(--r4);
  padding:0 var(--r4);
}
.kaart{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  display:inline-block;width:100%;margin:0 0 var(--r5);
  transform:rotate(var(--kant));
}
.kaart--staand{width:88%}
.kaart--breed{width:100%}
.kaart.reveal{opacity:0;transform:rotate(var(--kant)) translateY(30px)}
.kaart.reveal.in{opacity:1;transform:rotate(var(--kant))}
.kaart:nth-child(4n+3){margin-left:auto;margin-right:0}
.kaart:nth-child(3n+2){padding-left:var(--r3)}

.kaart__knop{
  display:block;width:100%;overflow:hidden;background:var(--papier-diep);
  border:8px solid var(--print);
  box-shadow:0 2px 0 rgba(11,10,18,.05), 0 18px 34px -22px rgba(25,16,97,.4);
  transition:transform var(--d-kaart) var(--ease-soft),box-shadow var(--d-kaart) var(--ease-soft);
  transform:translate3d(0,0,0) rotate(var(--tilt,0deg));
}
.kaart__knop img{
  width:100%;transition:transform var(--d-beeld) var(--ease);
}
.kaart__knop:hover{box-shadow:0 2px 0 rgba(11,10,18,.05), 0 34px 54px -26px rgba(25,16,97,.5)}
.kaart__knop:hover img{transform:scale(1.045)}

.kaart figcaption{
  display:flex;justify-content:space-between;gap:var(--r2);
  margin-top:12px;font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;color:var(--inkt-62);
}
.kaart figcaption span:first-child{color:var(--inkt)}

.werk__meer{padding:var(--r5) var(--r4) 0;margin:0}

@media (max-width:1023px){
  .plakboek{columns:2;column-gap:var(--r3)}
  .kaart--staand{width:100%}
  .kaart:nth-child(3n+2){padding-left:0}
}
@media (max-width:719px){
  .plakboek{columns:1;padding:0 var(--r3)}
  .kaart{margin-bottom:var(--r4)}
  .werk__meer{padding:var(--r4) var(--r3) 0}
}

/* ══ 4 · flash ════════════════════════════════════════════════ */
.flash{padding:var(--r5) var(--r4) var(--r7)}
.flash__vel{
  position:relative;padding:var(--r6) var(--r4) var(--r5);
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    var(--papier-diep);
  border-radius:var(--rond);
  box-shadow:0 40px 80px -50px rgba(25,16,97,.45);
}
.flash__vel::before{ /* kreukels, één hue */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.014' numOctaves='4'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='1.6'%3E%3CfeDistantLight azimuth='128' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23k)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.flash__vel>*{position:relative}

.flash__net{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:var(--r3);align-items:center;
}
.flash__net li{width:100%}
.flash__item{
  display:grid;place-items:center;width:100%;aspect-ratio:1;padding:var(--r2);
  transition:transform var(--d-klein) var(--ease-soft);
}
.flash__item img{max-height:100%;width:auto;transition:opacity var(--d-kleur) var(--ease-soft)}
.flash__item:hover{transform:scale(1.12) rotate(-2deg)}
.flash__item--woord img{max-width:100%;height:auto}
.flash__item[aria-pressed="true"]{
  background:rgba(176,192,254,.5);border-radius:var(--pil);transform:scale(1.06)
}
.flash__gekozen{
  margin:var(--r4) 0 0;font-size:14px;color:var(--indigo);font-weight:500;
}

.actie{
  margin-top:var(--r5);padding:var(--r4) 0 0;
  border-top:1px solid var(--inkt-16);
  display:grid;gap:var(--r1);
}
.actie__kop{
  font-family:Satoshi,sans-serif;font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:.18em;color:var(--indigo);margin:0;
}
.actie__tekst{max-width:52ch;margin:0;font-size:17px}

@media (max-width:719px){
  .flash{padding:var(--r4) var(--r3) var(--r6)}
  .flash__vel{padding:var(--r5) var(--r3)}
  .flash__net{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:var(--r2)}
  .flash__item{padding:8px}
}

/* ══ 5 · stappen ══════════════════════════════════════════════ */
.stappen{padding:var(--r6) 0 var(--r7)}
.stappen__lijst{list-style:none;margin:0;padding:0 var(--r4)}
/* Geen rijtje van vier naast elkaar. Vier regels onder elkaar, met het
   nummer groot in de kantlijn. Dat leest als een boek, niet als een dienst. */
.stap{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5fr) minmax(0,5fr);
  gap:var(--r3) var(--r4);align-items:baseline;
  padding:var(--r4) 0;border-top:1px solid var(--inkt-16);
}
.stap:last-child{border-bottom:1px solid var(--inkt-16)}
.stap__nr{
  font-family:Satoshi,sans-serif;font-size:clamp(34px,5vw,68px);font-weight:300;
  line-height:.95;letter-spacing:-.015em;color:var(--inkt-42);
}
.stap .body{max-width:46ch}
@media (max-width:1023px){
  .stap{grid-template-columns:minmax(0,1fr) minmax(0,6fr);gap:var(--r2) var(--r3)}
  .stap .body{grid-column:2}
}
@media (max-width:719px){
  .stappen{padding:var(--r5) 0 var(--r6)}
  .stappen__lijst{padding:0 var(--r3)}
  .stap{grid-template-columns:1fr;gap:var(--r1);padding:var(--r3) 0}
  .stap .body{grid-column:auto}
  .stap__nr{font-size:28px}
}

/* ══ 6 · agenda ═══════════════════════════════════════════════ */
.agenda{
  position:relative;margin:0 var(--r4);padding:var(--r7) var(--r5);
  background:var(--indigo);color:var(--peri);overflow:hidden;border-radius:var(--rond);
}
.agenda__reus{
  position:absolute;left:-.04em;bottom:-.22em;
  transform:translateY(var(--drijf,0px));
  font-family:Satoshi,sans-serif;font-weight:700;
  font-size:clamp(120px,22vw,330px);line-height:.74;letter-spacing:-.045em;
  color:rgba(176,192,254,.13);white-space:nowrap;pointer-events:none;
}
.agenda__binnen{
  position:relative;display:grid;gap:var(--r4) var(--r5);
  grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:center;
}
.agenda__tekst{display:grid;gap:var(--r3);max-width:52ch}
.agenda__object{justify-self:center;width:min(100%,320px);aspect-ratio:1;
  filter:drop-shadow(0 30px 50px rgba(11,10,18,.5));
  animation:zweef 7s var(--ease) infinite alternate}
.agenda .d2{color:var(--peri)}
.agenda .lead{color:rgba(176,192,254,.86)}
.agenda__noot{color:rgba(176,192,254,.62)}

.dagen{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:var(--r2) 0;padding:0}
.dag{
  min-width:52px;padding:12px 8px;text-align:center;
  border:1px solid rgba(176,192,254,.34);border-radius:var(--pil);
  font-family:Satoshi,sans-serif;font-weight:500;font-size:17px;
  transition:background var(--d-kleur) var(--ease-soft),color var(--d-kleur) var(--ease-soft);
}
.dag:not(.dag--vol):hover{background:var(--peri);color:var(--indigo)}
.dag--vol{color:rgba(176,192,254,.52);border-color:rgba(176,192,254,.2);
  text-decoration:line-through;text-decoration-thickness:1px}
.dag.reveal{transition:opacity var(--d-reveal) var(--ease),transform var(--d-reveal) var(--ease),
    background var(--d-kleur) var(--ease-soft),color var(--d-kleur) var(--ease-soft);
  transition-delay:calc(var(--stap) * var(--i,0)),calc(var(--stap) * var(--i,0)),0s,0s}

@media (max-width:719px){
  .agenda{margin:0 var(--r3);padding:var(--r6) var(--r3) var(--r5)}
  .agenda__binnen{grid-template-columns:1fr;gap:var(--r4)}
  .agenda__object{position:absolute;right:-30px;top:-30px;width:150px;opacity:.95}
  .dag{min-width:44px;padding:10px 6px;font-size:15px}
}

/* ══ 7 · over ═════════════════════════════════════════════════ */
.over{
  padding:var(--r7) var(--r4);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--r6);align-items:center;
}
.over__beeld{position:relative}
.over__beeld img:first-child{
  width:100%;border:10px solid var(--print);
  box-shadow:0 30px 60px -40px rgba(25,16,97,.6);
  transform:rotate(-2deg);
}
.over__krabbel{
  position:absolute;right:-6%;bottom:-8%;width:38%;opacity:.85;
  transform:rotate(-7deg);
}
.over__tekst{display:grid;gap:var(--r3);justify-items:start}
@media (max-width:1023px){
  .over{grid-template-columns:1fr;gap:var(--r4);padding:var(--r6) var(--r3)}
  .over__beeld{max-width:420px}
}

/* ══ 8 · nazorg ═══════════════════════════════════════════════ */
.nazorg{padding:var(--r6) 0 var(--r7)}
.nazorg__lijst{
  list-style:none;margin:0;padding:0 var(--r4);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 var(--r6);
}
.nazorg__lijst li{
  padding:var(--r3) 0;border-bottom:1px solid var(--inkt-16);
  font-size:17px;line-height:1.6;
}
.nazorg__lijst b{font-family:Satoshi,sans-serif;font-weight:500}
@media (max-width:719px){
  .nazorg{padding:var(--r5) 0 var(--r6)}
  .nazorg__lijst{grid-template-columns:1fr;padding:0 var(--r3)}
}

/* ══ 9 · vragen ═══════════════════════════════════════════════ */
.vragen{padding:0 0 var(--r7)}
.vragen__lijst{padding:0 var(--r4);max-width:900px}
.vraag{border-bottom:1px solid var(--inkt-16)}
.vraag summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--r3);
  padding:var(--r3) 0;cursor:pointer;list-style:none;
  font-family:Satoshi,sans-serif;font-size:21px;font-weight:500;letter-spacing:-.01em;
  transition:color var(--d-kleur) var(--ease-soft);
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary:hover{color:var(--indigo)}
.plus{position:relative;flex:0 0 auto;width:16px;height:16px;
  transition:transform var(--d-klein) var(--ease-soft)}
.plus::before,.plus::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;
  transform:translate(-50%,-50%);
}
.plus::before{width:16px;height:1px}
.plus::after{width:1px;height:16px}
.vraag[open] .plus{transform:rotate(45deg)}
.vraag__antwoord{overflow:hidden;padding-bottom:var(--r3)}
.vraag__antwoord .body{max-width:64ch}
@media (max-width:719px){
  .vragen__lijst{padding:0 var(--r3)}
  .vraag summary{font-size:18px}
}

/* ══ 10 · boeken ══════════════════════════════════════════════ */
.boeken{padding:var(--r7) var(--r4);background:var(--papier-diep);position:relative;overflow:hidden}
/* het tweede grote glasmoment: haar vlinder, naast het formulier */
.boeken__object{
  position:absolute;right:calc(var(--r4) * -1);top:52%;z-index:0;
  width:clamp(280px,32vw,520px);
  transform:translate3d(calc(var(--muis-x)*-18px),calc(-50% + var(--muis-y)*-14px),0);
  transition:transform 1s var(--ease-soft);
  filter:drop-shadow(0 40px 60px rgba(25,16,97,.22));
  animation:zweef 8s var(--ease) infinite alternate;
  pointer-events:none;
}
.boeken__kop,.form{position:relative;z-index:1}
@media (max-width:1023px){
  .boeken__object{width:min(46vw,300px);top:auto;bottom:var(--r4);right:calc(var(--r3) * -1);
    transform:none;opacity:.5}
}
@media (max-width:719px){.boeken__object{display:none}}
.boeken__kop{display:grid;gap:var(--r3);margin-bottom:var(--r5)}
.form{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--r3) var(--r4);max-width:960px;
}
.veld{display:grid;gap:10px}
.veld--vol{grid-column:1/-1}
.veld label,.vink span{
  font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;
  color:var(--inkt-62);
}
.veld input,.veld select,.veld textarea{
  width:100%;padding:12px 0;border:0;border-bottom:1px solid var(--inkt-16);
  background:transparent;color:var(--inkt);
  font-family:Switzer,sans-serif;font-size:17px;border-radius:0;
  transition:border-color var(--d-kleur) var(--ease-soft);
}
.veld textarea{resize:vertical;line-height:1.5}
.veld input::placeholder,.veld textarea::placeholder{color:var(--inkt-62)}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  outline:none;border-color:var(--indigo)
}
.veld input:focus-visible,.veld select:focus-visible,.veld textarea:focus-visible{outline:none}
.veld input[readonly]{color:var(--indigo)}
.veld select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B0A12' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center}

.vink{display:flex;align-items:center;gap:12px;cursor:pointer;padding-top:var(--r1)}
.vink input{
  appearance:none;width:20px;height:20px;flex:0 0 auto;
  border:1px solid var(--inkt-42);border-radius:var(--rond);cursor:pointer;
  transition:background var(--d-kleur) var(--ease-soft),border-color var(--d-kleur) var(--ease-soft);
}
.vink input:checked{background:var(--indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23B0C0FE' stroke-width='1.8'/%3E%3C/svg%3E") center no-repeat;
  border-color:var(--indigo)}
.vink span{color:var(--inkt);text-transform:none;letter-spacing:0;font-size:17px}

.form__voet{display:flex;flex-wrap:wrap;align-items:center;gap:var(--r3);margin-top:var(--r3)}
.form__melding{
  grid-column:1/-1;margin:0;padding:var(--r3);border-radius:var(--rond);
  background:var(--indigo);color:var(--peri);font-size:17px;
}
@media (max-width:719px){
  .boeken{padding:var(--r6) var(--r3)}
  .form{grid-template-columns:1fr;gap:var(--r3)}
}

/* ══ 11 · voet ════════════════════════════════════════════════ */
.voet{background:var(--inkt);color:var(--papier);padding:var(--r6) 0 0;overflow:hidden}
.voet__binnen{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--r4);
  padding:0 var(--r4) var(--r6);
}
.voet__label{
  font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;
  color:rgba(227,224,217,.66);margin:0 0 var(--r2);
}
.voet .body{max-width:30ch}
.voet .link{border-color:rgba(227,224,217,.4)}
.voet .link:hover{color:var(--peri);border-color:var(--peri)}

.voet__reus{
  font-family:Satoshi,sans-serif;font-weight:700;
  font-size:clamp(150px,44vw,640px);line-height:.72;letter-spacing:-.055em;
  color:var(--peri);white-space:nowrap;
  margin:0;padding-left:.02em;
  height:.5em;overflow:hidden;          /* de onderste helft valt buiten beeld */
}
.voet__reus>span{display:block;transform:translateY(60px);opacity:0;
  transition:transform 1.2s var(--ease),opacity 1.2s var(--ease)}
.voet__reus.in>span{transform:none;opacity:1}

.voet__fijn{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--r2);
  padding:var(--r3) var(--r4);margin:0 0 var(--r3);
  border-top:1px solid rgba(227,224,217,.14);
  font-size:14px;color:rgba(227,224,217,.66);
}
@media (max-width:719px){
  .voet__binnen{grid-template-columns:1fr;gap:var(--r4);padding:0 var(--r3) var(--r5)}
  .voet__fijn{padding:var(--r3)}
}

/* ══ lightbox ═════════════════════════════════════════════════ */
.licht{
  border:0;padding:0;max-width:min(92vw,900px);max-height:92vh;
  background:transparent;color:var(--papier);overflow:visible;
}
.licht::backdrop{background:rgba(11,10,18,.9);
  animation:vervaag .45s var(--ease-soft)}
@keyframes vervaag{from{opacity:0}to{opacity:1}}
.licht__beeld{width:100%;max-height:82vh;object-fit:contain;border-radius:var(--rond)}
.licht__bij{margin:var(--r2) 0 0;font-size:14px;text-align:center;color:rgba(227,224,217,.7)}
.licht__sluit{
  position:absolute;top:-52px;right:0;width:44px;height:44px;
}
.licht__sluit::before,.licht__sluit::after{
  content:"";position:absolute;left:50%;top:50%;width:22px;height:1px;
  background:var(--papier);transform-origin:center;
}
.licht__sluit::before{transform:translate(-50%,-50%) rotate(45deg)}
.licht__sluit::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* ══ zonder JavaScript, of als het script strandt ═════════════ */
/* Alles wat normaal wacht op een script staat dan meteen in beeld.
   De site is dan stil, maar nooit leeg. */
.no-js .rol>span,.no-js .held__voet>*,.no-js .reveal,
.no-js .chips .chip,.no-js .voet__reus>span{opacity:1 !important;transform:none !important}
.no-js .kaart.reveal{opacity:1 !important;transform:rotate(var(--kant)) !important}
.no-js .zin__tekst{clip-path:none !important}
.no-js .glas__poster{opacity:1 !important;transform:none !important}
.no-js .glas__doek{display:none}

/* ══ rustige beweging ═════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rol>span,.held__voet>*,.reveal,.chips .chip,.voet__reus>span{
    opacity:1 !important;transform:none !important
  }
  .zin__tekst{clip-path:none !important}
  .glas__poster{opacity:1 !important;transform:none !important}
  .glas__doek{display:none}
  .glas,.held__zweef{transform:none !important}
}