/* ============================================================
   BY LUMA STORIES
   Basis: zwart-wit, zacht en editorial (zoals de mock-up).
   Kleur per persoon:  Luna = pistache,  Martine = lichtroze,
   samen = lichtgeel (het licht in Luma).
   Lichte tinten zijn vlakken en lijnen; tekst in kleur gebruikt
   altijd de -tekst variant (contrast WCAG AA).
   ============================================================ */

@font-face{ font-family:"Bricolage Grotesque"; src:url("fonts/bricolage-grotesque.woff2") format("woff2"); font-weight:200 800; font-display:swap; }
@font-face{ font-family:"Inter"; src:url("fonts/inter.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face{ font-family:"Instrument Serif"; src:url("fonts/instrument-serif-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }

:root{
  --ink:#161417;
  --ink-2:#221F23;
  --paper:#FBF8F2;
  --paper-2:#F3EEE4;
  --white:#FFFFFF;
  --muted:#6B6660;
  --line:rgba(22,20,23,.12);
  --line-dark:rgba(255,255,255,.14);

  --pistache:#D3E7BC;
  --pistache-diep:#A9CC85;
  --pistache-tekst:#3D6127;

  --roze:#F9D6E0;
  --roze-diep:#F1A8BF;
  --roze-tekst:#A3315A;

  --geel:#FFF0AE;
  --geel-diep:#FFD965;
  --geel-tekst:#765A00;
  --gloed:255,214,102;

  --display:"Bricolage Grotesque", "Arial Black", sans-serif;
  --body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:"Instrument Serif", Georgia, "Times New Roman", serif;

  /* typografische schaal: alle koppen gebruiken deze vier maten */
  --fs-display:clamp(46px,6.4vw,104px);
  --fs-1:clamp(38px,5vw,72px);
  --fs-2:clamp(28px,3.4vw,48px);
  --fs-3:clamp(21px,2vw,28px);

  --wrap:1240px;
  --r:26px;
  --ease:cubic-bezier(.22,.8,.25,1);
  --nav-h:84px;

  /* korrel voor donkere vlakken */
  --korrel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

@view-transition{ navigation:auto; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* decoratieve vlakken achter foto's mogen uitsteken, maar nooit horizontaal laten scrollen */
html, body{ overflow-x:clip; }
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
p{ margin:0 0 1em; }
h1,h2,h3,h4{
  font-family:var(--display); font-weight:700; margin:0 0 .4em;
  letter-spacing:-.025em; line-height:1.02; text-wrap:balance;
}
::selection{ background:var(--geel); color:var(--ink); }
:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; border-radius:6px; }
.donker :focus-visible, .footer :focus-visible{ outline-color:var(--geel-diep); }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 36px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skiplink{ position:absolute; left:16px; top:-60px; z-index:100; background:var(--ink); color:var(--white); padding:10px 18px; border-radius:30px; }
.skiplink:focus{ top:12px; }

/* ---------- typografie ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
  font:600 12.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.eyebrow::before{ content:""; width:26px; height:1.5px; border-radius:2px; background:currentColor; opacity:.6; }
.eyebrow--luna::before{ background:var(--pistache-diep); opacity:1; height:2px; }
.eyebrow--martine::before{ background:var(--roze-diep); opacity:1; height:2px; }
.donker .eyebrow{ color:rgba(255,255,255,.66); }
.donker .eyebrow::before{ background:var(--white); opacity:.45; }

.titel{ font-size:var(--fs-2); }
.titel--xl{ font-size:var(--fs-1); letter-spacing:-.035em; }
.lead{ font-size:clamp(18px,1.6vw,20.5px); line-height:1.55; color:var(--muted); max-width:52ch; }
.donker .lead{ color:rgba(255,255,255,.74); }

/* accent: één woord in sierlijke cursief, en kleine onderschriften */
.accent{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; font-synthesis:none; }
h1 .accent, h2 .accent, .statement .accent{ padding-right:.04em; }
.notitie{ display:inline-flex; align-items:center; gap:10px; font:italic 400 19px/1.2 var(--serif); letter-spacing:0; color:var(--muted); font-synthesis:none; }
.notitie::before{ content:""; width:22px; height:1px; background:currentColor; opacity:.6; }
.donker .notitie{ color:rgba(255,255,255,.66); }

/* markeerstift die zichzelf tekent (zachte tinten, net als het vlak achter de hero-foto) */
.marker{
  background-image:linear-gradient(100deg, transparent 0 2%, var(--geel) 2% 97%, transparent 97%);
  background-repeat:no-repeat; background-size:100% 38%; background-position:0 86%;
  padding:0 .08em; margin:0 -.04em; border-radius:4px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.marker--luna{ background-image:linear-gradient(100deg, transparent 0 2%, var(--pistache) 2% 97%, transparent 97%); }
.marker--martine{ background-image:linear-gradient(100deg, transparent 0 2%, var(--roze) 2% 97%, transparent 97%); }
.js .marker{ background-size:0 38%; transition:background-size 1s var(--ease) .35s; }
.js .is-zichtbaar .marker, .js .marker.is-zichtbaar{ background-size:100% 38%; }

/* ---------- navigatie ---------- */
.nav{
  position:sticky; top:0; z-index:60; height:var(--nav-h);
  border-bottom:1px solid transparent; transition:height .3s var(--ease), border-color .3s;
}
/* de vervaging zit op een laag eronder: op .nav zelf zou ze het vaste mobiele menu opsluiten in de balk */
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  transition:background .3s;
}
.nav.is-gescrold{ --nav-h:66px; border-color:var(--line); }
.nav.is-gescrold::before{ background:rgba(255,255,255,.92); }
.nav .wrap{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }

.merk{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:6px; position:relative; z-index:2; }
.merk__naam{ display:inline-flex; align-items:baseline; gap:.22em; font:700 21px/1 var(--display); letter-spacing:-.025em; white-space:nowrap; }
.merk__onder{ font:500 11.5px/1.3 var(--body); letter-spacing:.01em; color:var(--muted); max-height:2.8em; overflow:hidden; transition:max-height .35s var(--ease), opacity .3s; }
.nav.is-gescrold .merk__onder{ max-height:0; opacity:0; }
@media (max-width:640px){ .merk__onder{ max-width:24ch; font-size:11px; } }
.merk__by{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.08em; color:var(--muted); letter-spacing:0; }
/* logo: "Lu" op pistache (Luna) en "ma" op roze (Martine), "stories" in cursief */
.merk__luma{ display:inline-flex; align-items:baseline; }
.merk__lu, .merk__ma{ display:inline-block; padding:.06em .16em .1em; border-radius:.2em; color:var(--ink); transition:transform .45s var(--ease); }
.merk__lu{ background:var(--pistache); transform:rotate(-3deg); margin-right:-.06em; }
.merk__ma{ background:var(--roze); transform:rotate(3deg) translateY(.04em); }
.merk:hover .merk__lu{ transform:rotate(-6deg) translateY(-.04em); }
.merk:hover .merk__ma{ transform:rotate(6deg) translateY(.08em); }
.merk__stories{ font:italic 400 1.12em/1 var(--serif); letter-spacing:0; font-synthesis:none; }

.nav__links{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); font:500 15px/1 var(--body); }
.nav__links a{ position:relative; padding:8px 2px; white-space:nowrap; }
.nav__links a:not(.btn)::after{
  content:""; position:absolute; left:-3px; right:-3px; bottom:2px; height:9px; z-index:-1; border-radius:3px;
  background:var(--geel); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav__links a[data-kleur="luna"]::after{ background:var(--pistache); }
.nav__links a[data-kleur="martine"]::after{ background:var(--roze); }
.nav__links a:not(.btn):hover::after, .nav__links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav__links .btn{ padding:12px 20px; font-size:14.5px; }
.nav__extra{ display:none; }

.burger{ display:none; position:relative; z-index:2; width:46px; height:46px; border:0; border-radius:50%; background:var(--ink); cursor:pointer; }
.burger span{ position:absolute; left:14px; right:14px; height:2px; border-radius:2px; background:var(--white); transition:transform .35s var(--ease), opacity .2s; }
.burger span:nth-child(1){ top:17px } .burger span:nth-child(2){ top:22px } .burger span:nth-child(3){ top:27px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg) }

/* met zes tabbladen past het menu vanaf 1100 px naast het logo; daaronder klapt het in */
@media (max-width:1100px){
  .burger{ display:block; }
  .nav__links{
    position:fixed; inset:0; z-index:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px;
    padding:96px 28px 40px; background:var(--ink); color:var(--white);
    clip-path:circle(0 at calc(100% - 44px) 42px); visibility:hidden; transition:clip-path .6s var(--ease), visibility 0s .6s;
  }
  .nav__links.is-open{ clip-path:circle(150% at calc(100% - 44px) 42px); visibility:visible; transition:clip-path .6s var(--ease); }
  .nav__links a:not(.btn){ font:700 clamp(34px,9vw,52px)/1.12 var(--display); letter-spacing:-.03em; padding:4px 0; }
  .nav__links a:not(.btn)::after{ display:none; }
  .nav__links a:not(.btn)::before{ content:""; display:inline-block; width:.55em; height:3px; border-radius:2px; margin-right:.35em; vertical-align:.3em; background:rgba(255,255,255,.45); }
  .nav__links a[data-kleur="luna"]::before{ background:var(--pistache-diep); }
  .nav__links a[data-kleur="martine"]::before{ background:var(--roze-diep); }
  .nav__links a[aria-current="page"]{ color:var(--geel-diep); }
  .nav__links .btn{ margin-top:22px; background:var(--white); color:var(--ink); border-color:var(--white); }
  .nav__links .btn[aria-current="page"]{ color:var(--ink); }
  .nav__extra{ display:block; margin-top:28px; color:rgba(255,255,255,.55); font-size:14px; }
  .menu-open .merk{ color:var(--white); }
  .menu-open .merk__onder{ color:rgba(255,255,255,.6); }
  .menu-open .burger{ background:var(--white); }
  .menu-open .burger span{ background:var(--ink); }
  .menu-open{ overflow:hidden; }
}

/* ---------- knoppen ---------- */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; gap:12px;
  padding:16px 26px; border-radius:40px; border:1.5px solid var(--ink);
  background:var(--ink); color:var(--white); font:600 15.5px/1 var(--body); cursor:pointer;
  transition:color .35s var(--ease), border-color .35s var(--ease), transform .2s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--geel-diep); transform:translateX(-101%); transition:transform .45s var(--ease);
}
.btn:hover{ color:var(--ink); border-color:var(--geel-diep); }
.btn:hover::before{ transform:none; }
.btn:active{ transform:scale(.97); }
.btn__pijl{ display:inline-block; transition:transform .35s var(--ease); }
.btn:hover .btn__pijl{ transform:translateX(5px); }


.linkpijl{ display:inline-flex; align-items:center; gap:10px; font:600 15.5px/1.2 var(--body); border-bottom:2px solid currentColor; padding-bottom:4px; }
.linkpijl .btn__pijl{ transition:transform .35s var(--ease); }
.linkpijl:hover .btn__pijl, a:hover .linkpijl .btn__pijl{ transform:translateX(5px); }

/* ---------- secties ---------- */
section{ position:relative; padding:clamp(72px,9vw,128px) 0; }
.creme{ background:var(--paper); }
.donker{ background:var(--ink); color:var(--white); }
.donker::after, .footer::after{
  content:""; position:absolute; inset:0; pointer-events:none; background-image:var(--korrel); opacity:.07; mix-blend-mode:overlay;
}
.donker > *, .footer > *{ position:relative; z-index:1; }

/* ---------- foto's ---------- */
.kader{ position:relative; border-radius:var(--r); overflow:hidden; background:var(--paper-2); }
.kader img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
a:hover .kader img, .kader:hover img{ transform:scale(1.035); }

/* ============================================================
   HOME
   ============================================================ */

/* hero */
.hero{ padding:clamp(36px,5vw,64px) 0 clamp(64px,8vw,110px); }
.hero__grid{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(36px,5vw,80px); align-items:center; }
.hero__titel{ font-size:var(--fs-display); font-weight:800; line-height:.92; letter-spacing:-.045em; margin:6px 0 26px; }
/* onderstreping onder "verhaal": tekent zichzelf na de onthulling */
.marker--titel{ background-size:100% 22%; background-position:0 90%; padding:0 .04em; }
.js .marker--titel, .js .marker--titel.is-zichtbaar{ background-size:0 22%; }
.js .is-zichtbaar .marker--titel, .js .is-zichtbaar .marker--titel.is-zichtbaar{ background-size:100% 22%; transition-delay:1s; }
.hero .lead{ margin-top:14px; max-width:42ch; }
.knoppen{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:34px; }

/* titel komt regel voor regel omhoog uit een masker */
.regel{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.regel > span{ display:inline-block; }
.js [data-masker] .regel > span{ transform:translateY(108%); transition:transform 1.1s var(--ease); }
.js [data-masker] .regel + .regel > span{ transition-delay:.12s; }
.js [data-masker].is-zichtbaar .regel > span{ transform:none; }

.hero__beeld{ position:relative; justify-self:end; width:min(100%,470px); }
.hero__beeld::before{
  content:""; position:absolute; inset:9% -7% -5% 12%; z-index:0; border-radius:46% 54% 60% 40% / 44% 42% 58% 56%;
  background:var(--geel); transform:rotate(-3deg);
}
.hero__beeld .kader{ aspect-ratio:600/860; box-shadow:0 40px 80px -36px rgba(22,20,23,.55); }
.hero__beeld .kader img{ object-position:50% 46%; }
.hero__beeld .kader::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.35)); }
.hero__beeld .notitie{ position:absolute; left:0; bottom:-38px; }

/* camerazoeker over de hero-foto */
.zoeker{ position:absolute; inset:16px; z-index:2; pointer-events:none; color:var(--white); font:600 11.5px/1 var(--body); letter-spacing:.14em; font-variant-numeric:tabular-nums; text-shadow:0 1px 6px rgba(0,0,0,.45); }
.zoeker__hoek{ position:absolute; width:26px; height:26px; border:0 solid rgba(255,255,255,.92); }
.zoeker__hoek:nth-child(1){ left:0; top:0; border-left-width:2px; border-top-width:2px; border-top-left-radius:6px; }
.zoeker__hoek:nth-child(2){ right:0; top:0; border-right-width:2px; border-top-width:2px; border-top-right-radius:6px; }
.zoeker__hoek:nth-child(3){ left:0; bottom:0; border-left-width:2px; border-bottom-width:2px; border-bottom-left-radius:6px; }
.zoeker__hoek:nth-child(4){ right:0; bottom:0; border-right-width:2px; border-bottom-width:2px; border-bottom-right-radius:6px; }
.zoeker__rec{ position:absolute; left:14px; top:16px; display:flex; align-items:center; gap:8px; }
.zoeker__rec::before{ content:""; width:9px; height:9px; border-radius:50%; background:#FF3B30; box-shadow:0 0 10px rgba(255,59,48,.8); animation:rec 1.2s steps(1) infinite; }
.zoeker__tijd{ position:absolute; left:14px; bottom:16px; }
.zoeker__richt{ position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px; opacity:.55; }
.zoeker__richt::before, .zoeker__richt::after{ content:""; position:absolute; background:var(--white); }
.zoeker__richt::before{ left:10px; top:0; width:2px; height:100%; }
.zoeker__richt::after{ top:10px; left:0; height:2px; width:100%; }
@keyframes rec{ 50%{ opacity:0 } }
.js .zoeker{ opacity:0; transform:scale(1.04); transition:opacity .8s var(--ease) .9s, transform .8s var(--ease) .9s; }
.js .is-zichtbaar .zoeker{ opacity:1; transform:none; }

@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__beeld{ justify-self:center; width:min(88%,420px); margin:20px 0 30px; }
}

/* grote uitspraak */
.statement{ font:600 var(--fs-2)/1.12 var(--display); letter-spacing:-.025em; margin:0; text-wrap:pretty; }

/* pitch: hun eigen woorden uit de video */
.pitch{ padding-block:clamp(96px,12vw,170px); }
.pitch__zin{ font:700 var(--fs-1)/1.02 var(--display); letter-spacing:-.045em; margin:0; max-width:15ch; }
.pitch__zin .accent{ color:var(--ink); font-size:1.08em; }

/* aanpak: hoe we jouw verhaal vertellen, in vier stories (geel = samen, pistache = Luna, roze = Martine) */
.aanpak{ list-style:none; margin:clamp(48px,6vw,84px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:36px clamp(20px,2.6vw,36px); counter-reset:aanpak; }
.aanpak__stap{ counter-increment:aanpak; }
.aanpak__balk{ display:block; height:4px; border-radius:4px; background:var(--line); overflow:hidden; margin-bottom:22px; }
.aanpak__balk::after{ content:""; display:block; height:100%; background:var(--geel-diep); transform-origin:left; }
.aanpak__stap--luna .aanpak__balk::after{ background:var(--pistache-diep); }
.aanpak__stap--martine .aanpak__balk::after{ background:var(--roze-diep); }
/* de balkjes lopen een voor een vol, zoals stories */
.js .aanpak__balk::after{ transform:scaleX(0); }
.js .aanpak.is-zichtbaar .aanpak__balk::after{ transform:none; transition:transform .9s linear .3s; }
.js .aanpak.is-zichtbaar .aanpak__stap:nth-child(2) .aanpak__balk::after{ transition-delay:1.2s; }
.js .aanpak.is-zichtbaar .aanpak__stap:nth-child(3) .aanpak__balk::after{ transition-delay:2.1s; }
.js .aanpak.is-zichtbaar .aanpak__stap:nth-child(4) .aanpak__balk::after{ transition-delay:3s; }
.aanpak__wie{ display:block; font:600 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; }
.aanpak__wie::before{ content:"0" counter(aanpak); color:var(--muted); margin-right:10px; }
.aanpak h3{ font-size:var(--fs-3); margin:14px 0 8px; }
.aanpak p{ margin:0; color:var(--muted); max-width:30ch; }
.aanpak__voet{ margin:clamp(30px,3.4vw,44px) 0 0; }
@media (max-width:1000px){ .aanpak{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .aanpak{ grid-template-columns:1fr; gap:30px; } }

/* wat we voor je maken: lijst met meebewegend beeld */
.formats{ list-style:none; margin:clamp(36px,5vw,60px) 0 0; padding:0; counter-reset:format; }
.format{ counter-increment:format; border-top:1px solid var(--line); }
.format:last-child{ border-bottom:1px solid var(--line); }
.format a{ position:relative; isolation:isolate; display:grid; grid-template-columns:64px minmax(0,1.1fr) minmax(0,1fr) 40px; gap:20px; align-items:center; padding:clamp(22px,2.6vw,34px) 0; transition:padding .45s var(--ease), color .3s; }
.format a::after{ content:""; position:absolute; inset:0 -22px; z-index:-1; border-radius:18px; background:var(--pistache); opacity:.55; transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.format:nth-child(3n+2) a::after{ background:var(--roze); }
.format:nth-child(3n) a::after{ background:var(--geel); }
.format a:hover::after, .format a:focus-visible::after{ transform:none; }
.format a::before{ content:"0" counter(format); font:600 13px var(--body); letter-spacing:.1em; color:var(--muted); }
.format h3{ margin:0; font-size:clamp(24px,2.6vw,36px); font-weight:600; letter-spacing:-.025em; transition:transform .45s var(--ease); }
.format p{ margin:0; color:var(--muted); max-width:40ch; }
.format a:hover p{ color:var(--ink); }
.format__voorbeeld{ display:block; margin-top:8px; font:600 11.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.format__voorbeeld::after{ content:" →"; }
.format__pijl{ justify-self:end; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line); transition:background .3s, border-color .3s, transform .45s var(--ease); }
.format a:hover h3{ transform:translateX(8px); }
.format a:hover .format__pijl{ background:var(--geel-diep); border-color:var(--geel-diep); transform:rotate(-45deg); }
@media (max-width:760px){
  .format a{ grid-template-columns:1fr 40px; gap:10px 16px; }
  .format a::before{ grid-column:1/-1; }
  .format p{ grid-column:1/-1; }
  .format__pijl{ grid-row:2; grid-column:2; }
}

/* klein "play"-labeltje dat rechtsonder de muis meezweeft (alleen desktop, via JS) */
.play-cursor{
  position:fixed; left:0; top:0; z-index:41; display:inline-flex; align-items:center; gap:7px; margin:18px 0 0 16px;
  padding:7px 13px 7px 9px; border-radius:30px; background:var(--white); color:var(--ink); font:600 13px/1 var(--body); letter-spacing:.02em;
  box-shadow:0 8px 22px -8px rgba(22,20,23,.35); pointer-events:none; opacity:0; transform:rotate(-6deg) scale(.6);
  transition:opacity .2s var(--ease), transform .35s cubic-bezier(.34,1.56,.64,1);
}
.play-cursor__icoon{ width:0; height:0; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent var(--roze-tekst); }
.play-cursor.is-zichtbaar{ opacity:1; transform:rotate(-6deg) scale(1); }

/* lichtknop: idee op de plank */
.idee{ overflow:hidden; transition:background-color .8s var(--ease); }
.idee::before{
  content:""; position:absolute; z-index:0; width:1100px; height:1100px; right:-260px; top:-420px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(var(--gloed),.38), rgba(var(--gloed),.12) 45%, transparent 72%);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.idee__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:center; }
.idee__vragen{ list-style:none; margin:30px 0 0; padding:0; }
.idee__vragen li{ display:grid; grid-template-columns:34px 1fr; gap:14px; padding:20px 0; border-top:1px solid var(--line-dark); font:500 clamp(18px,1.5vw,21px)/1.4 var(--display); letter-spacing:-.01em; }
.idee__vragen li:last-child{ border-bottom:1px solid var(--line-dark); }
.idee__vragen li::before{ content:"?"; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; font:700 15px var(--body); color:var(--ink); background:transparent; color:rgba(255,255,255,.75); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35); }
.idee__antwoord{ margin:34px 0 0; font:700 clamp(28px,3vw,42px)/1.08 var(--display); letter-spacing:-.025em; transition:opacity .8s var(--ease) .5s, transform .8s var(--ease) .5s; }
.idee__antwoord .accent{ color:var(--geel-diep); font-size:1.12em; text-shadow:0 0 28px rgba(var(--gloed),.55); transition:text-shadow 1s var(--ease) .9s, color 1s var(--ease) .9s; }

.idee__visual{ position:relative; min-height:520px; display:grid; place-items:center; }
.lamp{ position:absolute; z-index:2; top:-128px; left:50%; width:120px; margin-left:-60px; }
.lamp svg{ width:100%; overflow:visible; }
.lamp .snoer{ stroke:rgba(255,255,255,.45); stroke-width:2; }
.lamp .fitting{ fill:#3A363C; }
.lamp .peer{ fill:var(--geel-diep); transition:fill .5s var(--ease), filter .5s var(--ease); filter:drop-shadow(0 0 22px rgba(var(--gloed),.95)) drop-shadow(0 0 70px rgba(var(--gloed),.7)); }
.lamp .gloeidraad{ stroke:#B8860B; stroke-width:2; fill:none; transition:stroke .4s; }
.lamp{ transform-origin:50% 0; }
.js .idee.is-aan .lamp{ animation:slinger 2.4s var(--ease); }
@keyframes slinger{ 0%{ transform:rotate(0) } 18%{ transform:rotate(4deg) } 42%{ transform:rotate(-2.6deg) } 66%{ transform:rotate(1.2deg) } 100%{ transform:rotate(0) } }

.idee__foto{ position:relative; z-index:1; margin:0; width:100%; aspect-ratio:1600/1069; border-radius:var(--r); overflow:hidden; box-shadow:0 0 0 8px rgba(var(--gloed),.28), 0 40px 90px -30px rgba(var(--gloed),.45); transition:opacity 1s var(--ease), filter 1s var(--ease), transform 1s var(--ease), box-shadow 1s var(--ease); }
.idee__foto img{ width:100%; height:100%; object-fit:cover; }

.schakelaar{ display:none; }
.js .schakelaar{
  position:absolute; z-index:3; right:-6px; bottom:-26px; display:flex; align-items:center; gap:14px;
  border:0; background:none; padding:0; cursor:pointer; text-align:left;
}
.schakelaar__plaat{ position:relative; width:64px; height:96px; border-radius:16px; background:#F4EFE6; box-shadow:inset 0 -3px 0 rgba(0,0,0,.12), 0 14px 30px -10px rgba(0,0,0,.55); }
.schakelaar__knop{ position:absolute; left:16px; right:16px; top:14px; height:40px; border-radius:9px; background:var(--white); box-shadow:0 5px 0 #D6CFC3, 0 7px 12px rgba(0,0,0,.18); transition:transform .3s var(--ease), box-shadow .3s; }
.schakelaar[aria-checked="true"] .schakelaar__knop{ transform:translateY(28px); box-shadow:0 -5px 0 #D6CFC3, 0 -2px 10px rgba(0,0,0,.12); background:var(--geel); }
.schakelaar__label{ color:var(--white); }
.schakelaar__label .accent{ display:block; color:var(--geel-diep); font-size:30px; line-height:1; }
.schakelaar__label small{ display:block; margin-top:6px; font:500 13px var(--body); color:rgba(255,255,255,.6); }
.schakelaar:hover .schakelaar__plaat{ transform:translateY(-2px); }
.schakelaar__plaat{ transition:transform .25s var(--ease); }

/* uit-stand (alleen met JS; zonder JS staat het licht aan) */
.js .idee:not(.is-aan){ background-color:#0E0D0F; }
.js .idee:not(.is-aan)::before{ opacity:0; transform:scale(.6); }
.js .idee:not(.is-aan) .lamp .peer{ fill:#4A454D; filter:none; }
.js .idee:not(.is-aan) .lamp .gloeidraad{ stroke:#2C292E; }
.js .idee:not(.is-aan) .idee__foto{ opacity:.12; filter:grayscale(1) brightness(.5); transform:scale(.96); box-shadow:none; }
.js .idee:not(.is-aan) .idee__antwoord{ opacity:0; transform:translateY(14px); }
.js .idee:not(.is-aan) .idee__antwoord .accent{ color:#9C8A4F; text-shadow:none; }

@media (max-width:900px){
  .idee__grid{ grid-template-columns:1fr; }
  .idee__visual{ min-height:0; padding:120px 0 90px; }
  .lamp{ top:-6px; width:96px; margin-left:-48px; }
  .js .schakelaar{ right:auto; left:0; bottom:0; }
}


/* het duo */
.duo__kop{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:40px; align-items:end; margin-bottom:clamp(36px,4vw,56px); }
.duo__kop .lead{ margin:0; }
@media (max-width:900px){ .duo__kop{ grid-template-columns:1fr; } }
.duo{ padding-block:clamp(64px,7vw,100px); }
.duo__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,64px); }
.duo__grid > :nth-child(2){ margin-top:0; }
@media (max-width:860px){ .duo__grid{ grid-template-columns:1fr; max-width:560px; } }
/* persoonkaart: foto en tekst naast elkaar */
.persoon{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(20px,2.6vw,36px); align-items:end; }
.persoon__tekst .persoon__rol{ margin-top:0; }
.persoon__tekst p{ margin:10px 0 16px; }
@media (max-width:480px){ .persoon{ grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:16px; } .persoon__tekst p{ font-size:15px; } .persoon__rol{ line-height:1.35; } }

.persoon__beeld{ position:relative; }
/* gekleurd vlak achter de foto; zo gedraaid dat het nooit over de tekst eronder valt (ook niet bij hover) */
.persoon__beeld::before{ content:""; position:absolute; inset:0; border-radius:var(--r); background:var(--pistache); transform:rotate(-2.5deg) translate(-10px,4px); transition:transform .6s var(--ease); }
.persoon--martine .persoon__beeld::before{ background:var(--roze); transform:rotate(2.5deg) translate(10px,4px); }
.persoon:hover .persoon__beeld::before{ transform:rotate(-4deg) translate(-16px,6px); }
.persoon--martine:hover .persoon__beeld::before{ transform:rotate(4deg) translate(16px,6px); }
.persoon .kader{ aspect-ratio:4/5; }
.persoon .kader img{ position:absolute; inset:0; }
.persoon__naam{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:12px; }
.persoon__naam h3{ font-size:var(--fs-2); font-weight:800; letter-spacing:-.045em; margin:0; line-height:.9; }
.persoon__rol{ display:inline-block; margin-top:40px; font:600 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--pistache-tekst); }
.persoon--martine .persoon__rol{ color:var(--roze-tekst); }
.persoon p{ margin:14px 0 18px; color:var(--muted); max-width:42ch; }
.persoon .notitie{ margin-top:18px; }

/* video */
/* showreel: een gewone grote video bovenaan "Ons werk" */
.reel{ position:relative; margin-bottom:clamp(40px,5vw,64px); }
.reel__beeld{ position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; background:#000; box-shadow:0 40px 80px -40px rgba(22,20,23,.45); }
.reel__beeld video{ width:100%; height:100%; object-fit:cover; }
.reel__beeld::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.45)); }
.reel__knop{ position:absolute; z-index:2; left:clamp(16px,2.4vw,28px); bottom:clamp(16px,2.4vw,28px); display:inline-flex; align-items:center; gap:12px; padding:8px 20px 8px 8px; border-radius:50px; background:var(--white); color:var(--ink); font:600 15px/1 var(--body); transition:transform .35s var(--ease); }
.reel__knop:hover{ transform:translateY(-3px); }
.reel__knop span{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--geel-diep); }
.reel__knop svg{ width:15px; fill:var(--ink); margin-left:3px; }
/* onder de video's: voor wie we werkten, en door naar het portfolio */
.werk-home__voet{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:26px 40px; margin:clamp(40px,5vw,64px) 0 0; padding-top:24px; border-top:1px solid var(--line); }
.opdrachtgevers__label{ margin:0 0 18px; font:600 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* afsluiter */
.afsluiter{ text-align:left; }
.afsluiter__titel{ font-size:var(--fs-1); font-weight:800; letter-spacing:-.05em; line-height:.92; max-width:13ch; margin-bottom:24px; }
.afsluiter__lead{ margin:0; }

/* ============================================================
   WERK (portfolio-tegels, Home en Portfolio)
   ============================================================ */
.werk-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,40px); }
.werk-grid > :nth-child(even){ transform:translateY(clamp(0px,4vw,64px)); }
@media (max-width:760px){ .werk-grid{ grid-template-columns:1fr; } .werk-grid > :nth-child(even){ transform:none; } }
.werk-grid--drie{ grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; }
.werk-grid--drie > :nth-child(even){ transform:none; }
@media (max-width:860px){ .werk-grid--drie{ grid-template-columns:1fr; max-width:520px; } }
.werk-home__kop{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:clamp(32px,4vw,52px); }
.werk-home__kop .titel{ margin:0; }
.werk[id]{ scroll-margin-top:calc(var(--nav-h) + 24px); }
/* portfolio: filterknoppen per soort (alleen met JavaScript; zonder zie je alles) */
.werk-grid--portfolio{ align-items:start; }
.filter{ display:none; }
.js .filter{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(32px,4vw,52px); }
.filter button{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:40px; border:1.5px solid var(--line); background:var(--white); color:var(--ink); font:600 14.5px/1 var(--body); cursor:pointer; transition:border-color .2s, background .2s, color .2s; }
.filter button span{ font-weight:500; font-size:12.5px; color:var(--muted); }
.filter button:hover{ border-color:var(--ink); }
.filter button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--white); }
.filter button[aria-pressed="true"] span{ color:rgba(255,255,255,.65); }
.werk.is-verborgen{ display:none; }
.werk.is-gefilterd{ animation:infade .45s var(--ease); }
@keyframes infade{ from{ opacity:0; transform:translateY(10px) } }

.werk{ display:block; }
.werk__media{
  position:relative; display:block; width:100%; aspect-ratio:16/10; border:0; padding:0; cursor:pointer;
  border-radius:var(--r); overflow:hidden; background:var(--ink); color:var(--white);
}
.werk__media img, .werk__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), opacity .5s var(--ease); }
.werk__media video{ opacity:0; }
.werk.speelt-voorproef .werk__media video{ opacity:1; }
.werk__media:hover img, .werk__media:hover video{ transform:scale(1.04); }
.werk__speel{
  position:absolute; left:20px; bottom:20px; z-index:2; display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px 10px 10px; border-radius:40px; background:var(--white); color:var(--ink); font:600 14px/1 var(--body);
  transition:transform .35s var(--ease);
}
.werk__speel::before{ content:""; width:30px; height:30px; border-radius:50%; background:var(--geel-diep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23161417'/%3E%3C/svg%3E") center/16px no-repeat; }
.werk__media:hover .werk__speel{ transform:translateY(-3px); }


.werk__tekst{ padding:22px 4px 0; }
.werk__klant{ font:600 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.werk__tekst h3{ font-size:var(--fs-3); margin:10px 0 8px; }
.werk__tekst p{ color:var(--muted); margin:0; max-width:48ch; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding:0; list-style:none; }
.tags li{ font:500 13px/1 var(--body); padding:8px 13px; border-radius:30px; background:var(--paper-2); }

/* lightbox */
.lichtbak{ width:min(1100px,94vw); max-width:none; padding:0; border:0; border-radius:var(--r); background:#000; overflow:visible; }
.lichtbak::backdrop{ background:rgba(14,13,15,.88); backdrop-filter:blur(6px); }
.lichtbak video{ width:100%; aspect-ratio:16/9; border-radius:var(--r); background:#000; }
.lichtbak__sluit{ position:absolute; right:-6px; top:-54px; width:44px; height:44px; border-radius:50%; border:0; background:var(--white); color:var(--ink); font:600 22px/1 var(--body); cursor:pointer; }
.lichtbak__sluit:hover{ background:var(--geel-diep); }
.lichtbak[open]{ animation:open .45s var(--ease); }
.lichtbak--staand{ width:min(420px,92vw); }
.lichtbak--staand video{ aspect-ratio:9/16; max-height:86vh; object-fit:contain; }
/* staande video's als vierkant: ze springen niet uit de rij; in de lightbox spelen ze gewoon staand */
.werk__media--staand{ aspect-ratio:1; }
@keyframes open{ from{ opacity:0; transform:scale(.96) } }

/* Instagram: een kleine uitnodiging; twee story-balkjes (Luna, Martine) lopen vol als knipoog naar "stories" */
.insta__kaart{ display:flex; flex-direction:column; align-items:center; text-align:center; max-width:480px; margin:0 auto; }
.insta__balkjes{ display:flex; gap:6px; width:min(220px,64%); margin-bottom:clamp(24px,3vw,32px); }
.insta__balkjes span{ flex:1; height:4px; border-radius:4px; background:var(--line); overflow:hidden; }
.insta__balkjes span::after{ content:""; display:block; height:100%; background:var(--pistache-diep); transform-origin:left; }
.insta__balkjes span + span::after{ background:var(--roze-diep); }
.js .insta__balkjes span::after{ transform:scaleX(0); }
.js .is-zichtbaar .insta__balkjes span::after{ transform:none; transition:transform 2.2s linear .4s; }
.js .is-zichtbaar .insta__balkjes span + span::after{ transition-delay:2.6s; }
.insta__avatar{ width:clamp(76px,8vw,96px); aspect-ratio:1; border-radius:50%; overflow:hidden; box-shadow:0 0 0 1px var(--line); margin-bottom:20px; }
.insta__avatar img{ width:100%; height:100%; object-fit:cover; transform:scale(1.9); transform-origin:52% 40%; }
.insta__kaart .eyebrow{ justify-content:center; margin-bottom:10px; }
.insta__naam{ font-size:var(--fs-2); margin:0; line-height:1.05; }
.insta__kaart p{ margin:12px 0 26px; color:var(--muted); }

/* logo's van opdrachtgevers: rustig in grijs, in kleur bij aanwijzen; de hoogtes zijn per logo optisch gelijkgetrokken */
.logos{ display:flex; flex-wrap:wrap; align-items:center; gap:22px clamp(28px,3.6vw,48px); padding:0; margin:0; list-style:none; }
.logos img{ display:block; height:54px; width:auto; max-width:100%; filter:grayscale(1); opacity:.85; transition:filter .3s, opacity .3s; }
.logos img:hover{ filter:none; opacity:1; }
.logos .logo--rond{ height:64px; }
.logos .logo--zwaar{ height:44px; }
.logos .logo--hoog{ height:60px; }
@media (max-width:560px){ .logos img{ height:40px; } .logos .logo--rond{ height:48px; } .logos .logo--zwaar{ height:33px; } .logos .logo--hoog{ height:44px; } }
/* quotes (worden zichtbaar zodra ze er zijn) */
.quote{ font:600 clamp(26px,3.2vw,42px)/1.18 var(--display); letter-spacing:-.02em; max-width:24ch; margin:0; }
.quote::before{ content:"“"; display:block; font-size:2.4em; line-height:.6; color:var(--geel-diep); }
.quote-van{ margin-top:18px; font:600 13px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* ============================================================
   VERVOLGPAGINA'S
   ============================================================ */
.kop{ padding:clamp(44px,6vw,90px) 0 clamp(52px,6vw,90px); }
/* koppen van subpagina's: crème vlak; met beeld twee gekantelde kaders (pistache = Luna-kant, roze = Martine-kant) */
.kop--creme, .kop--beeld{ background:var(--paper); }
.kop--beeld{ overflow:hidden; }
.kaders{ position:relative; justify-self:center; width:min(100%,460px); aspect-ratio:1.05; }
.kaders__kader{ position:absolute; margin:0; width:58%; aspect-ratio:4/5; padding:8px; border-radius:24px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(22,20,23,.4); }
.kaders__kader img, .kaders__kader video{ width:100%; height:100%; object-fit:cover; border-radius:17px; background:var(--paper-2); }
.kaders__kader--luna{ left:0; top:4%; background:var(--pistache); transform:rotate(-6deg); }
.kaders__kader--martine{ right:0; top:14%; background:var(--roze); transform:rotate(6deg); }
.kaders__onder{ position:absolute; left:0; right:0; bottom:-6px; justify-content:center; }
@media (max-width:900px){ .kaders{ width:min(100%,360px); margin-top:10px; } }
.kop__titel{ font-size:var(--fs-1); font-weight:800; letter-spacing:-.05em; line-height:.92; margin:4px 0 24px; max-width:14ch; }
.kop .lead{ max-width:50ch; }
.kop__grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(36px,6vw,90px); align-items:center; }
@media (max-width:900px){ .kop__grid{ grid-template-columns:1fr; } }

.kop__breed{ margin-top:clamp(40px,5vw,64px); aspect-ratio:21/9; }
@media (max-width:640px){ .kop__breed{ aspect-ratio:4/3; } }

/* portretpagina's (Luna, Martine) */
.portret{ position:relative; justify-self:center; width:min(100%,440px); }
.portret::before{ content:""; position:absolute; inset:9% -6% -4% 10%; border-radius:44% 56% 62% 38% / 46% 40% 60% 54%; background:var(--pistache); transform:rotate(3deg); }
.portret--martine::before{ background:var(--roze); transform:rotate(-3deg); }
.portret .kader{ aspect-ratio:3/4; box-shadow:0 40px 80px -36px rgba(22,20,23,.5); }
.portret .notitie{ position:absolute; left:0; bottom:-40px; }

.naam-xl{ font-size:var(--fs-1); font-weight:800; letter-spacing:-.05em; line-height:.9; margin:0 0 12px; }
.naam-xl .stip{ display:inline-block; width:.14em; height:.14em; border-radius:50%; margin-left:.03em; background:var(--pistache-diep); }
.naam-xl--martine .stip{ background:var(--roze-diep); }

.tweekolom{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(30px,6vw,96px); }
@media (max-width:860px){ .tweekolom{ grid-template-columns:1fr; } }
.intro-tekst{ font-size:clamp(19px,1.6vw,21px); line-height:1.6; }
.intro-tekst p{ margin-bottom:1.1em; }
.intro-tekst p + p{ color:var(--muted); }

.labels{ display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 0; padding:0; list-style:none; }
.labels li{ font:600 clamp(17px,1.6vw,21px)/1 var(--display); letter-spacing:-.01em; padding:14px 22px; border-radius:40px; background:var(--white); border:1.5px solid var(--ink); transition:transform .3s var(--ease), background .3s; }
.labels li:hover{ transform:translateY(-3px) rotate(-1.5deg); }
.labels--luna li:hover{ background:var(--pistache); }
.labels--martine li:hover{ background:var(--roze); }
.tint-luna{ background:linear-gradient(180deg, var(--white), #F3F8EC); }
.tint-martine{ background:linear-gradient(180deg, var(--white), #FDF1F5); }

.splits{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,6vw,96px); align-items:start; }
.splits h3{ font-size:var(--fs-3); margin-bottom:12px; }
.splits p{ color:rgba(255,255,255,.72); }
@media (max-width:700px){ .splits{ grid-template-columns:1fr; } }

.door{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:center; padding:clamp(30px,4vw,48px); border-radius:calc(var(--r) + 8px); background:var(--paper); }
.door__titel{ font-size:var(--fs-2); margin:0; max-width:18ch; }
.door__knoppen{ display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; }
@media (max-width:760px){ .door{ grid-template-columns:1fr; } }

/* Luma's Story: naam */
.naam-som{ display:flex; flex-wrap:wrap; align-items:center; gap:.18em; font:800 clamp(56px,9vw,140px)/.9 var(--display); letter-spacing:-.06em; margin:0 0 clamp(30px,4vw,48px); }
.naam-som .deel{ padding:0 .1em .04em; border-radius:.14em; }
.naam-som .lu{ background:var(--pistache); transform:rotate(-2deg); }
.naam-som .ma{ background:var(--roze); transform:rotate(2deg); }
.naam-som .op{ color:var(--muted); font-weight:500; }

/* Luma's Story: stories */
.stories{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(36px,6vw,96px); align-items:center; }
@media (max-width:900px){ .stories{ grid-template-columns:1fr; } }
.stories__index{ list-style:none; margin:30px 0 0; padding:0; counter-reset:stap; }
.stories__index li{ counter-increment:stap; }
.stories__index button, .stories__index span{
  width:100%; display:grid; grid-template-columns:52px 1fr; gap:10px; align-items:center; text-align:left;
  padding:16px 0; border:0; border-top:1px solid var(--line); background:none; cursor:pointer;
  font:600 clamp(18px,1.6vw,22px)/1.2 var(--display); letter-spacing:-.01em; color:var(--muted); transition:color .3s;
}
.stories__index li:last-child > *{ border-bottom:1px solid var(--line); }
.stories__index button::before, .stories__index span::before{ content:"0" counter(stap); font:600 13px var(--body); letter-spacing:.1em; }
.stories__index button:hover, .stories__index button[aria-current="true"]{ color:var(--ink); }
.stories__index button[aria-current="true"]::before{ color:var(--geel-tekst); }
.stories__index span{ cursor:default; color:var(--ink); }
.stories__index button{ display:none; }
.js .stories__index button{ display:grid; }
.js .stories__index span{ display:none; }

/* zonder JS: kaarten naast elkaar om door te vegen */
.telefoon{ position:relative; }
.stories__balken, .stories__tik, .stories__pauze{ display:none; }
.stories__rij{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; }
.story{
  position:relative; flex:0 0 min(78%,330px); aspect-ratio:9/16; scroll-snap-align:start; overflow:hidden;
  border-radius:28px; padding:64px 26px 30px; display:flex; flex-direction:column; justify-content:flex-end; background:var(--ink); color:var(--white);
}
.story h3{ font-size:clamp(28px,3vw,38px); font-weight:800; letter-spacing:-.035em; margin:10px 0 12px; }
.story p{ font-size:16px; margin:0; }
.story__stap{ font:600 12px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; opacity:.7; }
.story--pistache{ background:var(--pistache); color:var(--ink); }
.story--roze{ background:var(--roze); color:var(--ink); }
.story--geel{ background:var(--geel); color:var(--ink); }
.story__groot{ position:absolute; top:56px; left:22px; font:800 150px/.8 var(--display); letter-spacing:-.06em; opacity:.14; }
.story__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.story--foto::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(22,20,23,.15) 30%, rgba(22,20,23,.85)); }
.story--foto > *:not(.story__foto){ position:relative; z-index:2; }
.story .notitie{ margin-top:16px; color:rgba(255,255,255,.8); }
.story--pistache .notitie, .story--roze .notitie, .story--geel .notitie{ color:#3E3A36; }

/* met JS: telefoonformaat met voortgangsbalkjes */
.js .telefoon{ justify-self:center; width:min(100%,380px); aspect-ratio:9/16; border-radius:38px; padding:10px; background:var(--ink); box-shadow:0 40px 80px -30px rgba(22,20,23,.55); }
.js .stories__rij{ position:relative; display:block; width:100%; height:100%; overflow:hidden; padding:0; border-radius:30px; }
.js .story{ position:absolute; inset:0; aspect-ratio:auto; border-radius:0; opacity:0; visibility:hidden; transform:scale(1.02); transition:opacity .45s var(--ease), transform .6s var(--ease), visibility 0s .45s; }
.js .story.is-actief{ opacity:1; visibility:visible; transform:none; transition:opacity .45s var(--ease), transform .6s var(--ease); }
.js .stories__balken{ position:absolute; z-index:5; left:24px; right:24px; top:24px; display:flex; gap:5px; }
.stories__balken span{ flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.4); overflow:hidden; }
.stories__balken span::after{ content:""; display:block; height:100%; width:100%; background:var(--white); transform:scaleX(0); transform-origin:left; }
.stories__balken span.klaar::after{ transform:none; }
.stories__balken span.bezig::after{ animation:vul 6.5s linear forwards; }
.telefoon.is-gepauzeerd .stories__balken span.bezig::after{ animation-play-state:paused; }
@keyframes vul{ to{ transform:none } }
.js .stories__tik{ position:absolute; z-index:4; top:0; bottom:0; display:block; width:40%; border:0; background:none; cursor:pointer; }
.stories__tik--terug{ left:0; } .stories__tik--verder{ right:0; width:60% !important; }
.js .stories__pauze{ position:absolute; z-index:6; right:22px; top:38px; display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:50%; background:rgba(22,20,23,.45); color:var(--white); cursor:pointer; font:700 12px var(--body); }
.stories__pauze:hover{ background:rgba(22,20,23,.75); }
@media (prefers-reduced-motion:reduce){ .stories__balken span.bezig::after{ animation:none; transform:scaleX(.5); } }

/* diensten */
.pakket{ position:relative; overflow:hidden; padding:clamp(34px,5vw,64px); border-radius:calc(var(--r) + 10px); background:var(--geel); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(30px,5vw,72px); align-items:center; }
.pakket__titel{ font-size:var(--fs-2); font-weight:800; letter-spacing:-.04em; margin:0 0 18px; }
.pakket .tags li{ background:var(--white); }
.pakket .kader{ aspect-ratio:1; transform:rotate(2.5deg); }
@media (max-width:860px){ .pakket{ grid-template-columns:1fr; } .pakket .kader{ aspect-ratio:16/10; transform:none; } }

.dienstlijst{ list-style:none; margin:0; padding:0; counter-reset:dienst; }
.dienst{ counter-increment:dienst; position:relative; display:grid; grid-template-columns:72px minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:baseline; padding:clamp(24px,3vw,36px) 0; border-top:1.5px solid var(--ink); transition:padding .4s var(--ease); }
.dienst:last-child{ border-bottom:1.5px solid var(--ink); }
.dienst::before{ content:"0" counter(dienst); font:600 14px var(--body); letter-spacing:.1em; color:var(--muted); }
.dienst::after{ content:""; position:absolute; inset:0 -20px; z-index:-1; background:var(--geel); border-radius:18px; opacity:0; transform:scaleY(.8); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.dienst:hover::after{ opacity:1; transform:none; }
.dienst:nth-child(3n+1):hover::after{ background:var(--pistache); }
.dienst:nth-child(3n+2):hover::after{ background:var(--roze); }
.dienstlijst{ position:relative; z-index:0; }
.dienst h3{ font-size:var(--fs-3); margin:0; }
.dienst p{ margin:0; color:var(--muted); }
.dienst:hover p{ color:var(--ink); }
.dienst__cat{ display:block; font:600 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
@media (max-width:760px){ .dienst{ grid-template-columns:48px 1fr; } .dienst p{ grid-column:2; } }

.pillen{ display:flex; flex-wrap:wrap; gap:12px; padding:0; margin:30px 0 0; list-style:none; }
.pillen li{ padding:12px 20px; border-radius:40px; border:1.5px solid rgba(255,255,255,.28); color:rgba(255,255,255,.88); font:500 16px/1 var(--body); transition:background .3s, color .3s, border-color .3s; }
.pillen li:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5); }

/* werkwijze */
.stappen{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(30px,6vw,96px); align-items:start; }
.stappen__kop{ position:sticky; top:calc(var(--nav-h) + 30px); }
@media (max-width:860px){ .stappen{ grid-template-columns:1fr; } .stappen__kop{ position:static; } }
.stappen ol{ list-style:none; margin:0; padding:0; counter-reset:stap; }
.stap{ counter-increment:stap; display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,36px); padding:clamp(26px,3vw,40px) 0; border-top:1px solid var(--line); }
.stap:last-child{ border-bottom:1px solid var(--line); }
.stap::before{ content:counter(stap); display:grid; place-items:center; width:clamp(56px,6vw,76px); aspect-ratio:1; border-radius:50%; font:800 clamp(24px,2.6vw,32px)/1 var(--display); background:var(--paper-2); transition:background .4s var(--ease), box-shadow .4s var(--ease); }
.stap:nth-child(5)::before{ background:var(--geel-diep); box-shadow:0 0 30px 6px rgba(var(--gloed),.55); }
.stap h3{ font-size:var(--fs-3); margin:6px 0 10px; }
.stap p{ color:var(--muted); margin:0; max-width:52ch; }

/* contact */
.contact{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(36px,6vw,96px); align-items:start; }
@media (max-width:900px){ .contact{ grid-template-columns:1fr; } }

.snel{ display:grid; gap:12px; margin-top:28px; }
.snel a{ display:flex; align-items:center; gap:16px; padding:16px 20px; border-radius:20px; background:var(--white); border:1.5px solid var(--line); transition:border-color .3s, transform .3s var(--ease); }
.snel a:hover{ border-color:var(--ink); transform:translateX(4px); }
.snel__icoon{ flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--paper-2); }
.snel__icoon svg{ width:22px; height:22px; fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.snel strong{ display:block; font:700 17px/1.2 var(--display); }
.snel span span{ font-size:14px; color:var(--muted); }
/* contact: mail eerst (het sterkst), dan WhatsApp, dan bellen */
.contact__intro{ margin:14px 0 0; }
.snel--groot a{ padding:20px 24px; }
.snel--groot strong{ font-size:20px; }
.snel--groot span span{ font-size:15px; }
.snel a.snel__eerst{ background:var(--ink); border-color:var(--ink); color:var(--white); }
.snel a.snel__eerst:hover{ border-color:var(--ink); }
.snel__eerst .snel__icoon{ background:var(--geel-diep); }
.snel__eerst span span{ color:rgba(255,255,255,.75); }
.contact__tip{ margin:22px 0 0; color:var(--muted); max-width:52ch; }
.contact__insta{ margin:10px 0 0; font-size:15px; color:var(--muted); }
.contact__insta a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* lopende tekst: voorwaarden en privacy */
.tekst{ max-width:760px; }
.tekst h2{ font-size:clamp(22px,2.2vw,28px); margin:2.2em 0 .6em; scroll-margin-top:calc(var(--nav-h) + 20px); }
.tekst h2:first-child{ margin-top:0; }
.tekst p, .tekst li{ color:#3B3833; }
.tekst ul{ padding-left:1.2em; }
.tekst li{ margin-bottom:.4em; }
.tekst a{ text-decoration:underline; text-underline-offset:3px; }
.inhoudsopgave{ position:sticky; top:calc(var(--nav-h) + 30px); list-style:none; margin:0; padding:0; font-size:14.5px; }
.inhoudsopgave li{ margin-bottom:8px; }
.inhoudsopgave a{ color:var(--muted); transition:color .2s; }
.inhoudsopgave a:hover{ color:var(--ink); }
.tekst-grid{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:clamp(30px,6vw,90px); }
@media (max-width:860px){ .tekst-grid{ grid-template-columns:1fr; } .inhoudsopgave{ display:none; } }

/* kleine aanvullingen */
.tweekolom + .wrap{ margin-top:clamp(48px,6vw,84px); }
/* Luma's Story: waarom het werkt (gecentreerd) en een los citaatblok */
.werkt__binnen{ max-width:900px; text-align:center; }
.werkt .eyebrow{ justify-content:center; }
.werkt .titel{ max-width:20ch; margin-inline:auto; }
.werkt .lead{ margin:22px auto 0; max-width:60ch; }

.citaat-blok{ position:relative; overflow:hidden; padding-block:clamp(100px,13vw,180px); }
.citaat-blok::before, .citaat-blok::after{
  content:""; position:absolute; z-index:0; width:clamp(220px,28vw,420px); aspect-ratio:1;
  border-radius:44% 56% 62% 38% / 46% 40% 60% 54%; opacity:.55;
}
.citaat-blok::before{ left:-110px; top:10%; background:var(--pistache); transform:rotate(-8deg); }
.citaat-blok::after{ right:-110px; bottom:8%; background:var(--roze); transform:rotate(12deg); }
.citaat{ position:relative; z-index:1; margin:0 auto; max-width:1000px; text-align:center; }
.citaat::before{ content:"“"; display:block; height:.45em; font:400 clamp(110px,13vw,190px)/1 var(--serif); color:var(--geel-diep); }
.citaat blockquote{ margin:0; }
.citaat p{ margin:0; font:italic 400 var(--fs-2)/1.2 var(--serif); letter-spacing:-.01em; text-wrap:balance; font-synthesis:none; }
.citaat .marker{ padding:0 .1em; }
.citaat figcaption{ margin-top:30px; font:600 13px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.donker .quote{ color:var(--white); }
.donker .quote-van{ color:rgba(255,255,255,.55); }
.kop + .pakket-sectie, .kop + .werk-sectie{ padding-top:0; }
.werk-sectie{ padding-bottom:clamp(110px,12vw,170px); }
.stappen__kop .notitie{ margin-top:18px; }
.contact aside .titel{ font-size:clamp(28px,3vw,38px); margin-top:0; }
.contact__gebied{ margin-top:20px; color:var(--muted); font-size:15px; }

/* FAQ */
.vragen{ max-width:860px; }
.vraag{ border-top:1px solid var(--line); }
.vraag:last-child{ border-bottom:1px solid var(--line); }
.vraag summary{
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer;
  padding:24px 0; font:600 clamp(19px,1.8vw,23px)/1.3 var(--display); letter-spacing:-.015em;
}
.vraag summary::-webkit-details-marker{ display:none; }
.vraag summary::after{
  content:""; flex:none; width:36px; height:36px; border-radius:50%; border:1.5px solid var(--line);
  background:linear-gradient(var(--ink),var(--ink)) center/12px 1.5px no-repeat, linear-gradient(var(--ink),var(--ink)) center/1.5px 12px no-repeat;
  transition:transform .35s var(--ease), background-color .3s, border-color .3s;
}
.vraag summary:hover::after{ background-color:var(--geel); border-color:var(--geel); }
.vraag[open] summary::after{ transform:rotate(45deg); background-color:var(--geel-diep); border-color:var(--geel-diep); }
.vraag p{ margin:0 0 24px; color:var(--muted); max-width:62ch; }
.vraag[open] p{ animation:inschuif .45s var(--ease); }
@keyframes inschuif{ from{ opacity:0; transform:translateY(-6px) } }

/* contact: wat gebeurt er na je bericht */
.daarna{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:14px; counter-reset:daarna; }
.daarna li{ counter-increment:daarna; display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:baseline; color:var(--muted); }
.daarna li::before{ content:counter(daarna); display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--white); border:1.5px solid var(--ink); font:700 13px/1 var(--body); color:var(--ink); }
.daarna strong{ color:var(--ink); font-weight:600; }

/* klein: de 404-pagina */
.klein{ min-height:calc(100vh - var(--nav-h)); display:grid; align-items:center; }
.lamp-uit{ width:120px; margin-bottom:24px; }
.lamp-uit .snoer{ stroke:var(--ink); stroke-width:2; }
.lamp-uit .fitting{ fill:var(--ink); }
.lamp-uit .peer{ fill:var(--paper-2); stroke:var(--ink); stroke-width:2; }

/* ---------- footer ---------- */
.footer{ position:relative; background:var(--ink); color:rgba(255,255,255,.7); padding:clamp(64px,8vw,104px) 0 28px; overflow:hidden; }
.footer__boven{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; }
@media (max-width:860px){ .footer__boven{ grid-template-columns:1fr 1fr; } .footer__boven > :first-child{ grid-column:1/-1; } }
.footer__merk .merk{ color:var(--white); }
.footer__merk .merk__by{ color:rgba(255,255,255,.6); }
.footer__merk .merk__naam{ font-size:26px; }
.footer__merk .merk__onder{ color:rgba(255,255,255,.55); max-height:none; }
.footer__regel{ margin:22px 0 0; max-width:30ch; color:rgba(255,255,255,.7); }
.footer h2{ font:600 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); margin:6px 0 18px; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer a:not(.btn){ transition:color .2s; }
.footer a:not(.btn):hover{ color:var(--geel-diep); }
.footer__onder{ margin-top:clamp(48px,6vw,72px); display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; padding-top:22px; border-top:1px solid var(--line-dark); font-size:13.5px; color:rgba(255,255,255,.5); }
.footer__kvk{ white-space:nowrap; }
.footer__onder ul{ display:flex; gap:20px; }


/* ---------- binnenkomen bij scrollen ---------- */
.js [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:calc(var(--d,0) * 110ms); }
.js [data-reveal].is-zichtbaar{ opacity:1; transform:none; }
[data-d="1"]{ --d:1 } [data-d="2"]{ --d:2 } [data-d="3"]{ --d:3 } [data-d="4"]{ --d:4 }

/* ---------- minder beweging ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0s !important; }
  @view-transition{ navigation:none; }
}