/* Besems & de Leeuw — door de & */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
:root{
  --papier:#f4f3ef; --wit:#fff; --inkt:#141413; --inkt2:#1f1f1d;
  --grijs:#5c5c58; --grijs2:#9a9a94; --lijn:rgba(20,20,19,.12); --lijn2:rgba(20,20,19,.2);
  --oranje:#ff5a1f; --oranje-d:#e04812;
  --f-d:'Syne',system-ui,sans-serif; --f-b:'Inter',system-ui,sans-serif;
  --g:clamp(16px,3.9vw,56px); --max:1360px; --inset:clamp(8px,.9vw,14px);
  --sp:clamp(56px,6vw,88px); --k:clamp(24px,2.4vw,32px);
  --h2:clamp(34px,4.3vw,64px);
  --r:18px; --hdr:76px;
  --ease:cubic-bezier(.19,1,.22,1);
}
@media (max-width:900px){:root{--hdr:64px;--sp:52px;--k:22px;--r:14px}}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--hdr)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
html.stil{overflow:hidden}
body{margin:0;background:var(--papier);color:var(--inkt);font:400 17px/1.6 var(--f-b);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{font-family:var(--f-d);margin:0;font-weight:700;letter-spacing:-.03em;line-height:1}
p{margin:0}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--g)}
.o{color:var(--oranje)}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--inkt);color:#fff;padding:10px 16px;border-radius:999px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--oranje);outline-offset:3px}
svg.ic,.direct svg,.menu-voet svg,.actie svg,.merk-url svg,.lb svg,.feat-play svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- knoppen: de sluiter ---------- */
.btn{--bg:var(--inkt);--fg:var(--papier);--sl:var(--oranje);--slfg:#fff;
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:52px;padding:0 24px;border-radius:999px;background:var(--bg);color:var(--fg);font:600 15px/1 var(--f-b);
  white-space:nowrap;transition:color .45s var(--ease)}
.btn::before,.btn::after{content:'';position:absolute;left:0;right:0;height:51%;background:var(--sl);z-index:-1;transition:transform .55s var(--ease)}
.btn::before{top:0;transform:translateY(-102%)}
.btn::after{bottom:0;transform:translateY(102%)}
.btn:hover,.btn:focus-visible{color:var(--slfg)}
.btn:hover::before,.btn:hover::after,.btn:focus-visible::before,.btn:focus-visible::after{transform:none}
.btn .ic{width:18px;height:18px;flex:none;transition:transform .55s var(--ease)}
.btn:hover .ic{transform:translateX(3px)}
.btn--s{height:42px;padding:0 18px;font-size:14px}
.btn--licht{--bg:var(--papier);--fg:var(--inkt)}
.btn--oranje{--bg:var(--oranje);--fg:#fff;--sl:var(--inkt)}
.btn--rand{--bg:transparent;--fg:var(--papier);box-shadow:inset 0 0 0 1px rgba(244,243,239,.32)}
.lnk{position:relative;display:inline-flex;align-items:center;gap:8px;font:600 15px/1.2 var(--f-b);padding:4px 0 3px;border-bottom:1.5px solid var(--oranje);transition:color .3s,border-color .3s}
.lnk::after{content:'';position:absolute;inset:-10px -6px}
.lnk:hover{color:var(--oranje-d)}
.lnk .ic{width:18px;height:18px}
.lnk--licht{color:var(--papier)}
.lnk--licht:hover{color:var(--oranje)}
.knoppen{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px}

/* ---------- kop ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--hdr);display:flex;align-items:center;gap:28px;padding:0 var(--g);
  color:var(--inkt);transition:background-color .45s,color .45s,box-shadow .45s,opacity .3s}
.hdr.weg{opacity:0;pointer-events:none}
.hdr.vast{background:rgba(244,243,239,.84);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--lijn)}
.hdr.licht{color:var(--papier)}
.hdr.vast.licht{background:rgba(20,20,19,.74);box-shadow:0 1px 0 rgba(244,243,239,.08)}
.logo{display:flex;align-items:baseline;padding:12px 0;font:700 19px/1 var(--f-d);letter-spacing:-.02em;white-space:nowrap}
.logo-amp{color:var(--oranje);margin:0 .26em}
.vouw{display:inline-block;overflow:hidden;max-width:4.6em;vertical-align:bottom;transition:max-width .8s var(--ease),opacity .5s}
.hdr.kort .vouw{max-width:0;opacity:0}
.hdr.kort .logo:hover .vouw,.hdr.kort .logo:focus-visible .vouw{max-width:4.6em;opacity:1}
.nav{margin-left:auto;display:flex;gap:30px;font:500 15px/1 var(--f-b)}
.nav a{position:relative;padding:8px 0}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:var(--oranje);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hdr-r{display:flex;align-items:center;gap:20px}
.hoogte{display:inline-flex;align-items:center;gap:0;font:500 12px/1 var(--f-b);font-variant-numeric:tabular-nums;opacity:.6;min-width:58px;justify-content:flex-end}
.hoogte i{margin-right:6px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:6px solid var(--oranje)}
.hdr.licht .btn--s{--bg:var(--papier);--fg:var(--inkt)}
/* in de hero: kop samengevouwen tot alleen de menuknop */
.hdr .logo,.hdr .nav,.hdr .hdr-r .btn--s{transition:opacity .45s ease,transform .6s var(--ease)}
.hdr.compact .logo,.hdr.compact .nav,.hdr.compact .hdr-r .btn--s{opacity:0;transform:translateY(-10px);pointer-events:none}
.hdr.compact .menu-knop{display:inline-flex;animation:knopIn .6s var(--ease) both}
.hdr.compact .hdr-r{margin-left:auto}
@keyframes knopIn{from{opacity:0;transform:translateY(-8px) scale(.9)}to{opacity:1;transform:none}}
.menu-knop{display:none;align-items:center;gap:10px;height:42px;padding:0 16px 0 14px;border-radius:999px;background:var(--inkt);color:var(--papier);font:600 14px/1 var(--f-b)}
.hdr.licht .menu-knop{background:var(--papier);color:var(--inkt)}
.mk-l{display:grid;gap:5px;width:16px}
.mk-l i{display:block;height:1.6px;background:currentColor;border-radius:2px;transition:transform .45s var(--ease)}
.menu-open .mk-l i:first-child{transform:translateY(3.3px) rotate(45deg)}
.menu-open .mk-l i:last-child{transform:translateY(-3.3px) rotate(-45deg)}
@media (max-width:900px){
  .nav,.hdr-r .btn--s,.hoogte{display:none}
  .hdr-r{margin-left:auto}
  .menu-knop{display:inline-flex}
  .logo{font-size:17px}
}

/* hoogtemeter */
.meter{position:fixed;right:18px;top:50%;z-index:20;height:42vh;transform:translateY(-50%);display:none;flex-direction:column;align-items:flex-end;gap:10px;color:var(--inkt);font:500 10px/1 var(--f-b);letter-spacing:.04em;pointer-events:none;transition:color .45s,opacity .45s}
.meter.licht{color:var(--papier)}
.meter.weg{opacity:0}
.meter-lijn{position:relative;flex:1;width:9px}
.meter-lijn::before{content:'';position:absolute;right:0;top:0;bottom:0;width:1px;background:currentColor;opacity:.3}
.meter-max,.meter-min{display:none}
.meter-pijl{position:absolute;right:12px;bottom:var(--mh,0%);transform:translateY(50%);display:flex;align-items:center;gap:3px;white-space:nowrap;font:600 11px/1 var(--f-b);font-variant-numeric:tabular-nums;color:var(--oranje)}
.meter-pijl::after{content:'';width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid var(--oranje);margin-left:4px}
@media (min-width:1100px) and (hover:hover){.meter{display:flex}}

/* menu (telefoon) */
.menu{position:fixed;inset:0;z-index:45;background:var(--inkt);color:var(--papier);display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  padding:calc(var(--hdr) + 8px) var(--g) calc(20px + env(safe-area-inset-bottom));clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);overflow-y:auto}
.menu.open{clip-path:inset(0)}
.menu-links a{display:flex;align-items:center;gap:16px;padding:11px 0;font:700 clamp(32px,8.6vw,46px)/1.05 var(--f-d);letter-spacing:-.035em;border-bottom:1px solid rgba(244,243,239,.1);
  opacity:0;transform:translateY(18px);transition:opacity .5s,transform .7s var(--ease)}
.menu.open .menu-links a{opacity:1;transform:none}
.menu.open .menu-links a:nth-child(2){transition-delay:.05s}.menu.open .menu-links a:nth-child(3){transition-delay:.1s}
.menu.open .menu-links a:nth-child(4){transition-delay:.15s}.menu.open .menu-links a:nth-child(5){transition-delay:.2s}
.menu-links img{width:62px;height:44px;border-radius:10px;object-fit:cover;flex:none}
.menu-links a:last-child span{color:var(--oranje)}
.menu-reel{position:relative;flex:1 1 auto;min-height:120px;max-height:260px;width:100%;border-radius:16px;overflow:hidden;background:#262624;margin-top:auto}
.menu-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.menu-reel span{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border-radius:999px;background:var(--papier);color:var(--inkt);font:600 14px/1 var(--f-b)}
.menu-reel .ic{width:16px;height:16px}
.menu-voet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (min-width:901px){
  .menu{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr) auto;gap:28px clamp(40px,6vw,96px);padding:calc(var(--hdr) + 28px) var(--g) 36px}
  .menu-links{align-self:center}
  .menu-links a{font-size:clamp(44px,4.6vw,72px);padding:12px 0;gap:22px}
  .menu-links img{width:92px;height:62px;border-radius:12px}
  .menu-reel{grid-column:2;grid-row:1;max-height:none;height:100%;margin:0;border-radius:24px}
  .menu-reel span{left:20px;bottom:20px}
  .menu-voet{grid-column:1;max-width:520px}
}
.menu-voet a{height:52px;border-radius:999px;background:rgba(244,243,239,.08);display:flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--f-b)}
.menu-voet svg{width:18px;height:18px}

/* ---------- hero: door de & ---------- */
.hero{position:relative;height:100svh;background:var(--papier)}
.js .hero{height:calc(100svh + 130vh)}
.rm .hero,.shot .hero{height:100svh}
.hero-pin{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--inkt)}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--vs,1.16));transform-origin:50% 46%}
.hero-waas{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,12,11,.66),rgba(12,12,11,.12) 46%,rgba(12,12,11,0) 70%),linear-gradient(to bottom,rgba(12,12,11,.35),rgba(12,12,11,0) 22%);opacity:var(--eo,0)}
.hero-masker{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-papier{fill:var(--papier)}
.lock{position:absolute;inset:0;margin:0;pointer-events:none;font:800 clamp(48px,8.4vw,140px)/.86 var(--f-d);letter-spacing:-.04em;color:var(--inkt)}
.lock > span{position:absolute;white-space:nowrap;will-change:transform}
.lw{display:block;clip-path:inset(-30% -4% -2% -4%)}
.lw > span{display:block;transition:transform 1.15s var(--ease)}
.lock-2 .lw > span{transition-delay:.12s}
.intro .lw > span{transform:translateY(108%)}
.intro .hero-intro,.intro .hero-onder{opacity:0!important}
.hero-intro,.hero-onder{transition:opacity .8s ease .2s}
html.intro-kop .hdr,html.intro-kop .meter{opacity:0}
html.intro-wacht #ampPad{visibility:hidden}
.lock-1{left:var(--g);top:calc(var(--hdr) + 2.2vh);transform:translateX(var(--l1,0px));opacity:var(--lo,1)}
.lock-2{right:var(--g);bottom:9vh;transform:translateX(var(--l2,0px));opacity:var(--lo,1)}
.hero-intro{position:absolute;right:var(--g);top:calc(var(--hdr) + 3.4vh);max-width:300px;font-size:15px;line-height:1.5;color:var(--grijs);opacity:var(--io,1)}
.hero-intro strong{color:var(--inkt);font-weight:600}
.hero-intro .geluid{margin-top:16px}
.hero-onder .geluid--m{display:none}
@media (max-aspect-ratio:1/1){.hero-onder .geluid--m{display:inline-flex}}
/* Ralf en Jasper ploppen op naast hun naam */
.lock-1{padding-left:1.32em}
.lock-2{padding-right:1.32em}
.pop{position:absolute;width:1.16em;height:1.45em;border-radius:.16em;pointer-events:auto;
  transform:rotate(var(--rot,-4deg));transition:transform .9s cubic-bezier(.34,1.56,.64,1) .75s}
.pop-r{left:0;top:.06em;transform-origin:50% 50%}
.pop-j{right:0;bottom:.03em;transform-origin:50% 50%;--rot:4deg;--brot:-6deg;transition-delay:.9s}
.pop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;background:#d9d8d2;box-shadow:0 18px 36px -18px rgba(20,20,19,.45)}
.pop b{position:absolute;right:0;top:0;transform:translate(34%,-42%) rotate(var(--brot,6deg)) scale(0);transform-origin:0 100%;
  font:700 15px/1 var(--f-b);letter-spacing:0;color:#fff;background:var(--oranje);padding:9px 14px;border-radius:999px;white-space:nowrap;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.pop-j b{right:auto;left:0;transform:translate(-30%,-42%) rotate(var(--brot)) scale(0);transform-origin:100% 100%}
.pop:hover{transform:rotate(0) scale(1.05);transition-delay:0s}
.pop:hover b,.intro-duo .pop b{transform:translate(34%,-42%) rotate(var(--brot,6deg)) scale(1)}
.pop-j:hover b,.intro-duo .pop-j b{transform:translate(-30%,-42%) rotate(var(--brot)) scale(1)}
.intro-duo .pop b{transition:transform .6s cubic-bezier(.34,1.56,.64,1) .75s}
.intro-duo .pop-j b{transition-delay:1.1s}
.intro-amp{position:absolute;left:50%;top:50%;z-index:2;font:800 120px/1 var(--f-d);color:var(--oranje);pointer-events:none;
  transform:translate(-50%,-56%) scale(0) rotate(-20deg);transition:transform .5s var(--ease)}
.intro-duo .intro-amp{transform:translate(-50%,-56%) scale(1) rotate(0);transition:transform .8s cubic-bezier(.34,1.56,.64,1) .45s}
.intro .pop{transform:scale(0) rotate(-24deg)}

.hero-onder{position:absolute;left:var(--g);bottom:calc(9vh + 2px);display:flex;align-items:center;gap:22px;opacity:var(--io,1)}
.hero-scroll{display:flex;align-items:center;gap:12px;font:500 13px/1 var(--f-b);color:var(--grijs)}
.geluid{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--lijn2);font:600 13px/1 var(--f-b);color:var(--inkt);transition:background-color .3s,color .3s,box-shadow .3s}
.geluid:hover{box-shadow:inset 0 0 0 1px var(--inkt)}
.geluid--licht{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.geluid--licht:hover{box-shadow:inset 0 0 0 1px #fff}
.geluid[aria-pressed="true"]{background:var(--oranje);color:#fff;box-shadow:none}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.eq i{width:2.5px;height:30%;background:currentColor;border-radius:2px;transition:height .3s}
.geluid[aria-pressed="true"] .eq i{animation:eq .9s ease-in-out infinite alternate}
.geluid[aria-pressed="true"] .eq i:nth-child(2){animation-delay:-.3s;animation-duration:.7s}
.geluid[aria-pressed="true"] .eq i:nth-child(3){animation-delay:-.6s;animation-duration:1.1s}
.geluid[aria-pressed="true"] .eq i:nth-child(4){animation-delay:-.15s;animation-duration:.8s}
@keyframes eq{0%{height:20%}100%{height:100%}}
.hero-scroll i{position:relative;width:1.5px;height:42px;background:var(--lijn2);overflow:hidden}
.hero-scroll i::after{content:'';position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--oranje);animation:val 2.2s var(--ease) infinite}
@keyframes val{to{top:100%}}
.hero-eind{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;
  padding:0 var(--g) clamp(34px,7vh,72px);color:#fff;opacity:var(--eo,0);transform:translateY(calc((1 - var(--eo,0)) * 46px));pointer-events:none}
.hero.eind .hero-eind{pointer-events:auto}
.hero-eind h1{font:800 clamp(44px,8.4vw,136px)/.9 var(--f-d);letter-spacing:-.045em}
.hero-eind h1 span{display:block}
.hero-eind .r1{transform:translateY(calc((1 - var(--eo,0)) * 26px))}
.hero-eind .r2{transform:translateY(calc((1 - var(--eo,0)) * 64px))}
.hero-eind .r2{color:var(--oranje)}
.hero-eind-r{display:grid;gap:18px;justify-items:start;padding-bottom:.6vw}
.hero-eind-r p{font:500 14px/1 var(--f-b);letter-spacing:.02em;color:rgba(255,255,255,.78)}
/* geen js: hero als poster met de & */
html:not(.js) .hero-eind{display:none}
@media (max-aspect-ratio:1/1){
  .lock{font-size:10.2vw;line-height:.9}
  .lock-1{padding-left:0}
  .lock-2{padding-right:0}
  .pop{width:clamp(56px,1.6em,88px);height:auto;aspect-ratio:4/5;border-radius:14px}
  .pop-r{left:calc(100% + .3em);top:auto;bottom:.02em}
  .pop-j{right:auto;left:0;bottom:auto;top:calc(100% + .4em)}
  .pop b{font-size:12px;padding:7px 10px}
  .hero-intro{display:none}
  .lock-1{top:auto;bottom:calc(100% - var(--amp-top,36svh) + 1.6vw)}
  .lock-2{bottom:auto;top:calc(var(--amp-bot,58svh) + 2.2vw)}
  .hero-intro{left:var(--g);right:var(--g);top:auto;bottom:calc(84px + env(safe-area-inset-bottom));max-width:none;font-size:15px}
  .hero-onder{bottom:calc(26px + env(safe-area-inset-bottom));gap:16px}
  .hero-eind-r .geluid{display:none}
  .hero-eind{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
  .hero-eind h1{font-size:clamp(38px,10.4vw,96px)}
}

/* ---------- verhaal ---------- */
.verhaal{position:relative;z-index:2;background:var(--papier);padding:var(--sp) 0}
.js .verhaal{margin-top:-24vh;border-radius:28px 28px 0 0;box-shadow:0 -24px 60px rgba(0,0,0,.22)}
.rm .verhaal,.shot .verhaal{margin-top:0}
.verhaal-kop{font-size:clamp(38px,5.6vw,88px);letter-spacing:-.04em;max-width:16ch;margin-bottom:clamp(30px,3.6vw,56px)}
.verhaal-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5.4vw,96px);align-items:start}
.verhaal-foto{position:relative;margin:0;aspect-ratio:4/5;max-height:min(640px,78vh);width:100%;border-radius:var(--r);overflow:hidden;background:#ddd}
.verhaal-foto img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;object-position:46% 50%;transform:translateY(var(--py,0%));will-change:transform}
.verhaal-foto figcaption{position:absolute;left:14px;bottom:12px;font:500 12px/1 var(--f-b);color:#fff;background:rgba(20,20,19,.5);padding:7px 10px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.verhaal-r{padding-top:.2vw}
.zin{font:600 clamp(23px,2.45vw,38px)/1.24 var(--f-d);letter-spacing:-.022em;color:var(--inkt)}
.anim .zin .w{opacity:.18;transition:opacity .4s}
.anim .zin .w.on{opacity:1}
.pil{display:inline-block;width:2.05em;height:1.02em;border-radius:999px;overflow:hidden;vertical-align:-.17em;margin:0 .04em;background:#d9d8d2;transition:transform .7s var(--ease)}
.anim .pil{transform:scale(.55)}
.anim .pil.on{transform:none}
.pil video{width:100%;height:100%;object-fit:cover}
.verhaal-voet{display:grid;gap:22px;margin-top:clamp(32px,3.6vw,52px)}
.verhaal-voet p{max-width:48ch;color:var(--grijs)}
@media (max-width:900px){
  .verhaal-in{grid-template-columns:minmax(0,1fr);gap:28px}
  .verhaal-r{order:-1}
  .verhaal-foto{aspect-ratio:4/3.4;max-height:none}
}

/* ---------- werk ---------- */
.werk{padding:0 var(--inset)}
.werk-paneel{background:var(--inkt);color:var(--papier);border-radius:28px;padding:var(--sp) 0 calc(var(--sp) - 8px);overflow:hidden}
.werk-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:22px 48px;flex-wrap:wrap;margin-bottom:var(--k)}
.werk-kop h2{font-size:var(--h2);max-width:11.5ch}
.filters{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.chip{height:38px;padding:0 15px;border-radius:999px;border:1px solid rgba(244,243,239,.2);font:500 14px/1 var(--f-b);color:rgba(244,243,239,.72);transition:background-color .3s,color .3s,border-color .3s}
.chip:hover{border-color:rgba(244,243,239,.55);color:var(--papier)}
.chip.on{background:var(--papier);border-color:var(--papier);color:var(--inkt)}
.feat{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(22px,3vw,48px);align-items:end;margin-bottom:clamp(40px,4.4vw,60px);cursor:pointer}
.feat-media{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#222;clip-path:inset(var(--fi,0%) round var(--r))}
.feat-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1 + var(--fi,0) * .02));transition:transform 1.2s var(--ease)}
.feat:hover .feat-media video{transform:scale(1.03)}
.feat-play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--oranje);color:#fff;display:grid;place-items:center;transition:transform .6s var(--ease)}
.feat-play svg{width:28px;height:28px;margin-left:3px}
.feat:hover .feat-play{transform:scale(1.1)}
.feat-tekst{display:grid;gap:12px;justify-items:start;padding-bottom:4px}
.meta{font:500 13px/1.3 var(--f-b);color:rgba(244,243,239,.55)}
.feat-tekst h3{font-size:clamp(28px,3vw,44px);letter-spacing:-.03em}
.feat-tekst p:not(.meta){color:rgba(244,243,239,.72);max-width:34ch}
.feat-tekst .lnk{margin-top:6px}
.raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:30px clamp(14px,1.5vw,22px);transition:opacity .25s}
.raster.wissel{opacity:0}
.tegel{grid-column:span var(--s,4);margin:0;min-width:0;cursor:pointer}
.tegel.weg{display:none}
.t-media{position:relative;aspect-ratio:var(--ar,1.333);border-radius:14px;overflow:hidden;background:#262624}
.t-media video,.t-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tegel:hover .t-media video,.tegel:hover .t-media img{transform:scale(1.045)}
.tegel[data-yt] .t-media::after,.tegel[data-foto] .t-media::after{content:'';position:absolute;right:12px;top:12px;width:30px;height:30px;border-radius:50%;background:rgba(20,20,19,.55) center/14px no-repeat;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tegel[data-yt] .t-media::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='%23fff'/%3E%3C/svg%3E")}
.tegel[data-foto] .t-media::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Ccircle cx='12' cy='12.5' r='3.5'/%3E%3C/svg%3E")}
.tegel figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap;padding-top:13px}
.tegel b{font:600 17px/1.2 var(--f-d);letter-spacing:-.01em}
.tegel figcaption span{font-size:13px;color:rgba(244,243,239,.52)}
.werk-voet{display:flex;align-items:center;justify-content:space-between;gap:18px 32px;flex-wrap:wrap;margin-top:clamp(40px,4.4vw,60px)}
.werk-voet p{color:rgba(244,243,239,.72);display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
@media (max-width:1000px){
  .tegel{grid-column:span 6}
  .t-media{aspect-ratio:16/10}
}
@media (max-width:900px){
  .feat{grid-template-columns:minmax(0,1fr);gap:18px}
  .werk-kop{flex-direction:column;align-items:flex-start}
  .filters{justify-content:flex-start}
}
@media (max-width:600px){
  .tegel{grid-column:span 12}
  .raster{row-gap:24px}
  .feat-play{width:64px;height:64px;margin:-32px 0 0 -32px}
  .chip{height:36px;padding:0 13px;font-size:13px}
}

/* ---------- opdrachtgevers ---------- */
.klanten{padding:clamp(48px,5.4vw,80px) 0 0}
.bewijs{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,3.4vw,56px);align-items:center;margin-bottom:clamp(30px,3.4vw,48px)}
.bewijs-getal{display:flex;align-items:flex-start;font:800 clamp(72px,9vw,150px)/.82 var(--f-d);letter-spacing:-.05em}
.bewijs-getal b{font-weight:800;font-variant-numeric:tabular-nums}
.bewijs-getal span{color:var(--oranje);font-size:.6em;margin-left:.04em}
.bewijs-tekst{font:600 clamp(18px,1.6vw,23px)/1.3 var(--f-d);letter-spacing:-.015em;max-width:24ch}
.quote{margin:0;padding-left:clamp(20px,2.4vw,36px);border-left:2px solid var(--oranje)}
.quote blockquote{margin:0;font:500 clamp(17px,1.45vw,21px)/1.45 var(--f-b);color:var(--inkt)}
.quote figcaption{margin-top:10px;font:500 13px/1 var(--f-b);color:var(--grijs)}
@media (max-width:900px){.bewijs{grid-template-columns:auto minmax(0,1fr)}.quote{grid-column:1/-1}}
@media (max-width:640px){.bewijs{grid-template-columns:minmax(0,1fr);gap:14px}.bewijs-getal{font-size:clamp(84px,26vw,120px)}.bewijs-tekst{max-width:none}.quote{margin-top:10px}}
.klanten-rij{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.klanten-band{display:flex;align-items:center;gap:clamp(36px,4.6vw,64px);width:max-content;animation:band 70s linear infinite}
.klanten-rij:hover .klanten-band{animation-play-state:paused}
.klanten-band img{height:44px;width:auto;max-width:170px;object-fit:contain;filter:grayscale(1);opacity:.62;mix-blend-mode:multiply;transition:opacity .3s,filter .3s}
.klanten-band img:hover{opacity:1;filter:none}
.klanten-band img[src*="fcstraat"]{filter:grayscale(1) brightness(0)}
@keyframes band{to{transform:translateX(-50%)}}
@media (max-width:700px){
  .klanten-rij{-webkit-mask-image:none;mask-image:none;padding-inline:var(--g)}
  .klanten-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 22px;width:auto;animation:none;justify-items:center}
  .klanten-band img{height:30px;max-width:100%}
  .klanten-band img:nth-child(n+10){display:none}
}

/* ---------- diensten ---------- */
.diensten{position:relative;padding:var(--sp) 0}
.diensten-in{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);gap:clamp(28px,4vw,72px);align-items:start}
.dienst-kolom{position:sticky;top:calc(var(--hdr) + 24px)}
.dienst-scherm{position:relative;aspect-ratio:4/5;max-height:calc(100vh - var(--hdr) - 64px);width:100%;border-radius:24px;overflow:hidden;background:var(--inkt)}
.dienst-scherm .ds-poster,.dienst-scherm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s,transform 1.2s var(--ease)}
.dienst-scherm video{opacity:0}
.dienst-scherm.speelt video{opacity:1}
.dienst-scherm.site{background:radial-gradient(120% 80% at 50% 30%,#2a2a27,var(--inkt))}
.dienst-scherm.site .ds-poster{inset:21% 8% auto;width:84%;height:auto;aspect-ratio:1200/750;object-fit:cover;object-position:top;border-radius:10px;box-shadow:0 24px 48px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.dienst-scherm.wissel .ds-poster,.dienst-scherm.wissel video{opacity:0;transform:scale(1.05)}
.dienst-scherm::after{content:'';position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(to top,rgba(12,12,11,.6),rgba(12,12,11,0));pointer-events:none}
.ds-label{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;display:grid;gap:6px;color:#fff}
.ds-nr{font:500 12px/1 var(--f-b);letter-spacing:.06em;opacity:.75;font-variant-numeric:tabular-nums}
.ds-naam{font:700 clamp(24px,2.3vw,34px)/1 var(--f-d);letter-spacing:-.03em}
.ds-t{font:500 13px/1.2 var(--f-b);opacity:.75}
.diensten-intro{font:500 15px/1.4 var(--f-b);color:var(--grijs);margin-bottom:clamp(14px,1.6vw,22px)}
.ampzin{font:700 clamp(32px,4.2vw,66px)/1.05 var(--f-d);letter-spacing:-.04em;color:var(--inkt)}
.ampzin a{transition:opacity .35s,color .35s}
.ampzin i{font-style:normal;font-weight:600;color:var(--oranje);transition:opacity .35s}
.anim .ampzin .w{opacity:.16}
.anim .ampzin .w.on{opacity:1}
.ampzin a.act{color:var(--oranje-d)}
.diensten-voet{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px 32px;margin-top:clamp(36px,4vw,56px)}
.diensten-voet p{color:var(--grijs);max-width:52ch}
.diensten-voet i{font-style:normal;color:var(--oranje);font-weight:600}
@media (max-width:900px){
  .diensten{padding-top:28px}
  .diensten-in{grid-template-columns:minmax(0,1fr);gap:22px}
  .dienst-kolom{top:calc(var(--hdr) + 8px);z-index:3}
  .dienst-scherm{aspect-ratio:16/9.4;border-radius:18px;max-height:none;box-shadow:0 18px 30px -18px rgba(20,20,19,.5)}
  .ds-label{left:14px;bottom:12px;gap:4px}
  .ds-naam{font-size:22px}
}

/* ---------- merken ---------- */
.merken{padding:var(--sp) 0;background:var(--wit)}
.merken-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,84px);align-items:center}
.merken-l h2{font-size:var(--h2);max-width:9ch}
.sub{margin-top:14px;color:var(--grijs);max-width:42ch}
.merk-lijst{list-style:none;margin:var(--k) 0 0;padding:0;border-top:1px solid var(--lijn)}
.merk{position:relative;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--lijn)}
.merk button{flex:1;min-width:0;display:flex;align-items:center;gap:16px;padding:12px 0;text-align:left}
.merk-logo{flex:none;width:52px;height:52px;border-radius:13px;background:#fff;border:1px solid var(--lijn);display:grid;place-items:center;overflow:hidden}
.merk-logo img{max-width:74%;max-height:62%;object-fit:contain}
.merk-logo--donker{background:var(--inkt);border-color:var(--inkt)}
.merk-logo--zwart{background:#1b1b1b;border-color:#1b1b1b}
.merk-t{min-width:0}
.merk-t b{display:block;font:700 clamp(20px,1.85vw,27px)/1.1 var(--f-d);letter-spacing:-.025em;color:var(--grijs2);transition:color .35s}
.merk-t > span{display:block;max-height:0;overflow:hidden;font-size:14px;line-height:1.45;color:var(--grijs);opacity:0;transition:max-height .6s var(--ease),opacity .4s,margin .6s var(--ease)}
.merk.on .merk-t b,.merk button:hover .merk-t b{color:var(--inkt)}
.merk.on .merk-t > span{max-height:4.4em;opacity:1;margin-top:5px}
.merk-url{flex:none;display:inline-flex;align-items:center;gap:4px;font:500 13px/1 var(--f-b);color:var(--grijs);padding:8px 0}
.merk-url svg{width:14px;height:14px}
.merk-url:hover{color:var(--oranje-d)}
.merk-balk{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--oranje);transform:scaleX(0);transform-origin:left}
.merk.on .merk-balk{animation:balk var(--dur,6s) linear forwards}
.merken.pauze .merk.on .merk-balk{animation-play-state:paused}
@keyframes balk{to{transform:scaleX(1)}}
.merk-scherm{position:relative;aspect-ratio:16/10.4;border-radius:24px;overflow:hidden;background:var(--inkt)}
.merk-scherm video,.merk-scherm .merk-site{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s,transform 1.2s var(--ease)}
.merk-scherm .merk-site{object-fit:cover;object-position:top;opacity:0}
.merk-scherm.site .merk-site{opacity:1}
.merk-scherm.site video{opacity:0}
.merk-scherm.wissel video,.merk-scherm.wissel .merk-site{opacity:0;transform:scale(1.04)}
.merk-scherm-naam{position:absolute;left:18px;bottom:16px;font:700 15px/1 var(--f-d);color:#fff;background:rgba(20,20,19,.55);padding:10px 14px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (max-width:900px){
  .merken-in{grid-template-columns:minmax(0,1fr);gap:22px}
  .merken-r{order:-1}
  .merken-l{display:contents}
  .merken-l h2{order:-3}
  .merken-l .sub{order:-2;margin-top:-6px}
  .merk-lijst{margin-top:0}
  .merk-scherm{aspect-ratio:16/10;border-radius:18px}
  .merk-url{display:none}
  .merk-logo{width:44px;height:44px}
}

/* ---------- de maten ---------- */
.maten{padding:var(--sp) 0;overflow:hidden}
.maten-kop{font-size:var(--h2);text-align:center;margin-bottom:var(--k)}
.duo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(8px,2.4vw,40px);max-width:820px;margin:0 auto}
.maat{margin:0;will-change:transform}
.maat--l{transform:translateX(calc(var(--d,0) * -12vw)) rotate(calc(var(--d,0) * -5deg))}
.maat--r{transform:translateX(calc(var(--d,0) * 12vw)) rotate(calc(var(--d,0) * 5deg))}
.maat-foto{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:#ddd}
.maat-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.maat figcaption{display:grid;gap:4px;padding-top:16px}
.maat figcaption b{font:700 clamp(18px,1.8vw,24px)/1.1 var(--f-d);letter-spacing:-.02em}
.maat .rol{font:600 12px/1.2 var(--f-b);letter-spacing:.04em;text-transform:uppercase;color:var(--oranje-d)}
.maat figcaption span:last-child{font-size:15px;line-height:1.5;color:var(--grijs);max-width:34ch}
.duo-amp{font:800 clamp(64px,13vw,210px)/1 var(--f-d);color:var(--oranje);transform:scale(calc(1 - var(--d,0) * .5));opacity:calc(1 - var(--d,0) * .7);margin-top:-12%}
.maten-voet{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:clamp(32px,3.6vw,48px);text-align:center}
.citaat{font:600 clamp(20px,2vw,28px)/1.3 var(--f-d);letter-spacing:-.02em;max-width:28ch}
@media (max-width:640px){
  .maat figcaption span:last-child{display:none}
  .maat-foto{border-radius:16px}
  .duo-amp{font-size:15vw}
  .maat figcaption b{font-size:16px}
  .maat .rol{font-size:11px}
}

/* ---------- contact ---------- */
.contact{background:var(--inkt);color:var(--papier);padding:var(--sp) 0;border-radius:28px 28px 0 0;margin-top:8px}
.contact-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,100px);align-items:start}
.contact-kop{display:grid;gap:6px}
.ck-1{font:700 clamp(20px,2vw,30px)/1 var(--f-d);letter-spacing:-.025em;color:rgba(244,243,239,.62)}
.ck-2{display:flex;align-items:center;gap:.2em;font:700 clamp(64px,8.4vw,136px)/.9 var(--f-d);letter-spacing:-.01em}
.ampv{flex:none;display:block;height:.8em;aspect-ratio:1165/675;background:var(--oranje);-webkit-mask:url(/img/amp.svg) center/contain no-repeat;mask:url(/img/amp.svg) center/contain no-repeat;transform-origin:20% 70%}
.ampv video{width:100%;height:100%;object-fit:cover}
.anim .ampv{transform:scale(.4) rotate(-8deg);opacity:0;transition:transform 1.3s var(--ease) .15s,opacity .6s .15s}
.anim .contact-kop.in .ampv{transform:none;opacity:1}
.contact-lead{margin-top:clamp(18px,2vw,26px);font:700 clamp(24px,2.4vw,36px)/1.15 var(--f-d);letter-spacing:-.03em}
.contact .sub{margin-top:10px}
.contact .sub{color:rgba(244,243,239,.7)}
.direct{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;border-top:1px solid rgba(244,243,239,.12)}
.direct a{display:flex;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid rgba(244,243,239,.12);font:600 17px/1.2 var(--f-b);transition:color .3s}
.direct a:hover{color:var(--oranje)}
.direct svg{width:22px;height:22px;color:var(--oranje);flex:none}
.direct small{display:block;font:500 12px/1 var(--f-b);color:rgba(244,243,239,.5);margin-bottom:5px}
.formulier{background:var(--papier);color:var(--inkt);border-radius:24px;padding:clamp(22px,3vw,38px)}
.keuzes{border:0;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.keuzes legend{float:left;width:100%;font:600 15px/1 var(--f-b);margin-bottom:14px;padding:0}
.keuzes label{position:relative}
.keuzes input{position:absolute;opacity:0;pointer-events:none}
.keuzes span{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--lijn2);font:500 14px/1 var(--f-b);cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.keuzes span:hover{border-color:var(--inkt)}
.keuzes input:checked+span{background:var(--inkt);border-color:var(--inkt);color:var(--papier)}
.keuzes input:focus-visible+span{outline:2px solid var(--oranje);outline-offset:2px}
.velden{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 14px}
.veld{display:block;margin-bottom:14px}
.veld > span{display:block;font:500 13px/1 var(--f-b);color:var(--grijs);margin-bottom:8px}
.veld input,.veld textarea{width:100%;font:400 16px/1.4 var(--f-b);color:var(--inkt);padding:13px 14px;border:1px solid var(--lijn2);border-radius:12px;background:#fff;transition:border-color .25s}
.veld textarea{resize:vertical;min-height:96px}
.veld input:focus,.veld textarea:focus{outline:none;border-color:var(--inkt)}
.veld.fout input{border-color:var(--oranje-d)}
.form-voet{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;margin-top:6px}
.form-melding{font-size:14px;color:var(--grijs);flex:1;min-width:200px}
@media (max-width:900px){.contact-in{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.velden{grid-template-columns:minmax(0,1fr)}.form-voet .btn{width:100%}}

/* ---------- voet ---------- */
.voet{background:var(--inkt);color:var(--papier);padding:clamp(24px,4vw,56px) 0 calc(28px + env(safe-area-inset-bottom))}
.voet-merk{display:flex;align-items:center;justify-content:space-between;gap:.18em;font:800 clamp(24px,5.85vw,96px)/.9 var(--f-d);letter-spacing:-.045em;white-space:nowrap;margin:0 0 clamp(36px,4.4vw,60px);padding-top:clamp(24px,3vw,40px);border-top:1px solid rgba(244,243,239,.1)}
.voet-amp{flex:none;display:block;height:.74em;aspect-ratio:1165/675;background:var(--oranje);-webkit-mask:url(/img/amp.svg) center/contain no-repeat;mask:url(/img/amp.svg) center/contain no-repeat}
.voet-amp video{width:100%;height:100%;object-fit:cover}
.voet-kol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:820px}
.voet-kol h3{font:600 12px/1 var(--f-b);letter-spacing:.08em;text-transform:uppercase;color:rgba(244,243,239,.45);margin-bottom:14px}
.voet-kol a{display:block;padding:5px 0;font-size:15px;color:rgba(244,243,239,.82);transition:color .25s}
.voet-kol a:hover{color:var(--oranje)}
.voet-onder{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;margin-top:clamp(36px,4vw,56px);padding-top:20px;border-top:1px solid rgba(244,243,239,.1);font-size:13px;color:rgba(244,243,239,.45)}
.voet-hoogte::before{content:'';display:inline-block;margin-right:8px;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:6px solid var(--oranje);vertical-align:1px}
@media (max-width:700px){
  .voet-merk{flex-direction:column;align-items:flex-start;gap:4px;font-size:12.6vw;white-space:normal}
  .voet-amp{height:.86em}
  .voet-kol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .voet-kol div:last-child{display:none}
  .voet{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* ---------- actiebalk telefoon ---------- */
.actie{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;display:none;grid-template-columns:1fr 1fr 1.25fr;gap:6px;padding:6px;
  border-radius:999px;background:rgba(20,20,19,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transform:translateY(150%);transition:transform .6s var(--ease)}
.actie.on{transform:none}
.actie a{height:46px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;color:var(--papier);font:600 14px/1 var(--f-b)}
.actie svg{width:17px;height:17px}
.actie .actie-hoofd{background:var(--oranje);color:#fff}
@media (max-width:900px){.actie{display:grid}}
@media (max-width:360px){.logo{font-size:15px}.menu-knop{padding:0 13px 0 12px}}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:100;background:rgba(12,12,11,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:clamp(56px,6vw,80px) clamp(12px,4vw,64px);opacity:0;transition:opacity .35s}
.lb.open{opacity:1}
.lb-stage{position:relative;width:min(100%,calc((100svh - 170px) * 16 / 9));aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;transform:scale(.96);transition:transform .6s var(--ease)}
.lb.open .lb-stage{transform:none}
.lb-stage video,.lb-stage iframe,.lb-stage img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000}
.lb-t{color:rgba(244,243,239,.8);font:600 15px/1.3 var(--f-d);text-align:center}
.lb-x{position:absolute;top:14px;right:14px;width:48px;height:48px;border-radius:50%;background:rgba(244,243,239,.1);color:#fff;display:grid;place-items:center;transition:background-color .3s}
.lb-x:hover{background:var(--oranje)}
.lb-x svg{width:22px;height:22px}
.lb-nav{position:absolute;top:50%;width:48px;height:48px;margin-top:-24px;border-radius:50%;background:rgba(244,243,239,.1);color:#fff;display:grid;place-items:center}
.lb-nav svg{width:22px;height:22px}
.lb-vorige{left:14px}.lb-vorige svg{transform:rotate(180deg)}
.lb-volgende{right:14px}
.lb-nav:hover{background:var(--oranje)}

/* ---------- cursor ---------- */
.cur{position:fixed;left:0;top:0;z-index:60;pointer-events:none;width:0;height:0;display:none}
.cur span{position:absolute;left:-44px;top:-44px;width:88px;height:88px;border-radius:50%;background:var(--oranje);color:#fff;display:grid;place-items:center;font:600 13px/1 var(--f-b);transform:scale(0);transition:transform .45s var(--ease)}
.cur.on span{transform:scale(1)}
@media (hover:hover) and (pointer:fine){.cur{display:block}.feat,.tegel{cursor:none}}

/* ---------- onthullen ---------- */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .02em .22em;margin:-.12em -.02em -.22em}
.wi{display:inline-block}
.anim [data-woorden] .wi{transform:translateY(112%);transition:transform 1s var(--ease);transition-delay:calc(var(--i,0) * 55ms)}
.anim [data-woorden].in .wi{transform:none}
.anim [data-rv]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .9s var(--ease)}
.anim [data-rv].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .maat--l,.maat--r{transform:none}
}

/* ---------- zwevende drones en camera's ---------- */
main,.voet{overflow-x:clip}
.verhaal,.klanten,.contact,.voet,.merken-r,.duo,.maten,.contact-l{position:relative}
.zweef{position:absolute;z-index:1;pointer-events:none;will-change:transform;
  --zb:#141413;--zd:#2f2f2c;--zl:#6b6b66;--zg:#2c4157;--za:#ff5a1f;--zp:rgba(20,20,19,.1);--zs:rgba(20,20,19,.18)}
.zweef.licht{--zb:#f4f3ef;--zd:#cfcdc5;--zl:#ffffff;--zg:#9fb6c9;--zp:rgba(244,243,239,.13);--zs:rgba(0,0,0,.45)}
.zweef svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 24px 20px var(--zs));
  animation:z-bob var(--zt,6.5s) ease-in-out var(--zv,0s) infinite alternate}
@keyframes z-bob{from{transform:translateY(-9px) rotate(-3deg)}to{transform:translateY(11px) rotate(2.5deg)}}
.z-blad{transform-box:fill-box;transform-origin:center;animation:z-spin .24s linear infinite}
.z-blad.r{animation-direction:reverse}
@keyframes z-spin{to{transform:rotate(360deg)}}
.z-prop{transform-box:fill-box;transform-origin:center;animation:z-flap .09s linear infinite alternate}
@keyframes z-flap{from{transform:scaleX(1)}to{transform:scaleX(.22)}}
.z-rec{animation:z-rec 1.3s steps(2,jump-none) infinite}
@keyframes z-rec{0%{opacity:1}100%{opacity:.15}}
.z-verhaal{top:calc(var(--sp) + 4px);right:8%;width:clamp(150px,15vw,230px);--zt:7s}
.z-dienst{top:-58px;right:-44px;width:clamp(84px,8vw,124px);z-index:4;--zt:5s;--zv:-1s}
.z-merken{top:-150px;right:3%;width:clamp(130px,12vw,190px);--zt:8s;--zv:-3s}
.z-merken svg{transform-origin:center}
.z-maten{top:-4%;left:50%;width:clamp(90px,9vw,140px);margin-left:calc(clamp(90px,9vw,140px) / -2);--zt:4.6s}
.z-maten2{top:calc(var(--sp) - 10px);left:10%;width:clamp(70px,6.4vw,96px);--zt:5.6s;--zv:-2s}
.z-contact{top:clamp(40px,4vw,70px);right:0;width:clamp(120px,11vw,170px);--zt:6s;--zv:-2.5s}
.z-voet{top:clamp(14px,2vw,26px);right:9%;width:clamp(56px,5vw,80px);--zt:5s;--zv:-1.5s}
@media (max-width:900px){
  .z-merken,.z-voet,.z-maten2{display:none}
  .z-verhaal{top:6px;right:5%;width:92px}
  .z-dienst{top:-12px;right:10px;width:60px}
  .z-maten{top:-12%;width:76px;margin-left:-38px}
  .z-contact{top:50px;right:0;width:96px}
}
@media (prefers-reduced-motion:reduce){.zweef svg,.z-blad,.z-prop,.z-rec{animation:none}}

/* drones in de hero: vliegen binnen na de opening, weg bij het inzoomen */
.zweef[data-hero]{z-index:2}
.z-h1{left:3%;top:43%;width:clamp(150px,15vw,225px);--zt:6s}
.z-h2{right:6.5%;top:31%;width:clamp(110px,11vw,170px);--zt:5.2s;--zv:-1.6s}
.z-h3{left:8.5%;bottom:20%;width:clamp(70px,6.6vw,100px);--zt:4.8s;--zv:-.8s}
.z-in{animation:z-invlieg 1.7s cubic-bezier(.16,.84,.24,1) var(--zi,2.9s) both}
.z-h1 .z-in{--zx:-55vw;--zr:-12deg;--zi:2.9s}
.z-h2 .z-in{--zx:45vw;--zr:14deg;--zi:3.15s}
.z-h3 .z-in{--zx:-40vw;--zr:-8deg;--zi:3.4s}
html:not(.intro-duo-gezien) .z-in{}
@keyframes z-invlieg{from{transform:translate(var(--zx,-50vw),-14vh) rotate(var(--zr,-10deg));opacity:0}
  35%{opacity:1}to{transform:none;opacity:1}}
.rm .z-in,.shot .z-in{animation:none}
@media (max-aspect-ratio:1/1){
  .z-h1{left:5%;top:11%;width:132px}
  .z-h2{right:6%;top:auto;bottom:19%;width:92px}
  .z-h3{display:none}
}