/* ============================================================
   base-events, huisstijl tokens (Social Road, maart 2026)
   ============================================================ */
:root{
  --ink:#000000;
  --paper:#FFFFFF;
  --base:#3A6E64;        /* primair groen */
  --base-deep:#20423C;   /* alleen als veld/verloop, niet als tekst */
  --sand:#EAE5DB;        /* secundair */
  --line:rgba(255,255,255,.14);
  --line-dark:rgba(0,0,0,.14);

  --f: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* type schaal */
  --t-mega: clamp(3.2rem, 12.5vw, 12rem);
  --t-xl:   clamp(2.4rem, 6.6vw, 6rem);
  --t-l:    clamp(1.8rem, 3.6vw, 3.2rem);
  --t-m:    clamp(1.15rem, 1.7vw, 1.5rem);
  --t-s:    clamp(.95rem, 1.05vw, 1.05rem);
  --t-xs:   .78rem;

  --gut: clamp(20px, 5vw, 90px);
  --seam: 62deg;  /* hoek van de diagonaal in het beeldmerk */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html.lock,body.lock{overflow:hidden}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--f); font-weight:200; font-size:var(--t-m);
  line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--base); outline-offset:4px}

h1,h2,h3{font-weight:900; letter-spacing:-.035em; line-height:.92; margin:0; text-transform:lowercase}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-l)}
p{margin:0 0 1em}
.lede{font-size:clamp(1.1rem,1.6vw,1.4rem); font-weight:200; max-width:62ch}
.muted{color:rgba(255,255,255,.62)}
.dot{color:var(--base)} /* accentpunt uit het huisstijlhandboek, nu niet in gebruik */

section{position:relative}
.wrap:not(.mcb-wrap){max-width:1560px; margin:0 auto; padding-inline:var(--gut)}
.pad{padding-block:clamp(90px,13vh,190px)}

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  padding:1.05em 1.9em; border-radius:999px;
  font-weight:700; font-size:.95rem; letter-spacing:-.01em;
  background:var(--base); color:var(--paper);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background-color .35s;
  will-change:transform;
}
.btn:hover{transform:translateY(-3px); background:#48897c}
.btn--ghost{background:transparent; box-shadow:inset 0 0 0 1px var(--line)}
.btn--ghost:hover{background:rgba(255,255,255,.07)}
.btn--ink{background:var(--ink)}
.btn--ink:hover{background:#1c1c1c}
.btn i{width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.9;flex:none}

/* ---------- header ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px var(--gut);
  transition:background-color .4s, backdrop-filter .4s, padding .4s;
}
.hdr.solid{background:rgba(0,0,0,.82); backdrop-filter:blur(14px); padding-block:12px}
.hdr__logo img{height:clamp(26px,2.4vw,34px); width:auto}
.nav .menu-list{display:flex; align-items:center; gap:clamp(14px,1.8vw,30px); list-style:none; margin:0; padding:0}
.nav li{position:relative}
.nav a{display:block; font-size:.92rem; font-weight:400; opacity:.78; transition:opacity .25s}
.nav a:hover{opacity:1}
.nav .has-sub > a::after{
  content:""; display:inline-block; width:5px; height:5px; margin-left:7px; opacity:.55;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
}
.nav .sub-menu{
  position:absolute; top:calc(100% + 14px); left:-16px; min-width:236px; z-index:5;
  list-style:none; margin:0; padding:10px; background:#0a0a0a;
  box-shadow:inset 0 0 0 1px var(--line), 0 24px 50px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translateY(10px); transition:.28s cubic-bezier(.2,.8,.2,1);
}
.nav li:hover > .sub-menu, .nav li:focus-within > .sub-menu{opacity:1; visibility:visible; transform:none}
.nav .sub-menu a{padding:9px 12px; font-size:.88rem; opacity:.72}
.nav .sub-menu a:hover{background:rgba(255,255,255,.07); opacity:1}
.hdr .btn{padding:.85em 1.5em}
.burger{display:none; width:44px; height:44px; align-items:center; justify-content:center}
.burger span{display:block; width:24px; height:2px; background:var(--paper); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:24px; height:2px; background:var(--paper)}
.burger span::before{top:-7px} .burger span::after{top:7px}

.menu{
  position:fixed; inset:0; z-index:79; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:.15em;
  padding:0 var(--gut); transform:translateY(-101%); transition:transform .6s cubic-bezier(.76,0,.24,1);
}
.menu.open{transform:none}
.menu{overflow-y:auto; padding-block:clamp(90px,14vh,140px)}
.menu .menu-list{list-style:none; margin:0; padding:0}
.menu .menu-list > li{margin-bottom:14px}
.menu .menu-list > li > a{font-size:clamp(1.8rem,7.5vw,2.8rem); font-weight:900; letter-spacing:-.04em; text-transform:lowercase}
.menu .sub-menu{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 20px}
.menu .sub-menu a{font-size:.95rem; font-weight:300; opacity:.6}
.menu .meta{margin-top:30px; font-size:.9rem}

/* ---------- loader ---------- */
.loader{position:fixed; inset:0; z-index:120; background:var(--ink); display:grid; place-items:center}
.loader__mark{position:relative; width:min(150px,26vw); aspect-ratio:388/484}
.loader__mark img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
.loader__word{
  position:absolute; left:0; right:0; bottom:clamp(28px,6vh,60px); text-align:center;
  font-size:.8rem; letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.45);
}

/* ---------- hero ---------- */
.hero{height:100svh; min-height:600px; overflow:hidden; display:flex; align-items:flex-end}
.hero__media{position:absolute; inset:-8% 0; z-index:0; will-change:transform}
.hero__media video,.hero__media img{width:100%; height:100%; object-fit:cover}
/* Bannervideo (16:9): schermvullend, met een donkere laag zodat de tekst leesbaar blijft. */
.hero__bg{
  position:absolute; inset:0;
  background-color:#000; background-position:center; background-size:cover; background-repeat:no-repeat;
  filter:blur(46px) brightness(.42) saturate(.85); transform:scale(1.2);
}
.hero__vid{position:absolute; inset:0; overflow:hidden}
.hero__vid video{width:100%; height:100%; object-fit:cover}
.hero__vid::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(92deg, rgba(0,0,0,.78), rgba(0,0,0,.25) 52%, rgba(0,0,0,0) 78%);
}
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.6) 76%, #000 100%),
    linear-gradient(96deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 48%, rgba(0,0,0,0) 72%);
}
.hero__in{position:relative; z-index:2; width:100%; padding-bottom:clamp(34px,7vh,74px)}
.hero h1{font-size:var(--t-mega); text-transform:lowercase}
.line{display:block; overflow:hidden}
.line > span{display:block; will-change:transform}
.hero__sub{margin-top:clamp(18px,2.4vh,30px); max-width:46ch; font-size:var(--t-m); color:rgba(255,255,255,.8)}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,3.4vh,40px)}
.hero__foot{
  display:flex; flex-wrap:wrap; gap:clamp(18px,4vw,64px); align-items:baseline;
  margin-top:clamp(34px,5vh,64px); padding-top:22px; border-top:1px solid var(--line);
  font-size:.9rem; color:rgba(255,255,255,.66);
}
.hero__foot b{font-weight:700; color:var(--paper)}
.scrollcue{
  position:absolute; right:var(--gut); bottom:clamp(34px,7vh,74px); z-index:3;
  writing-mode:vertical-rl; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.5); display:flex; align-items:center; gap:14px;
}
.scrollcue::after{content:""; width:1px; height:70px; background:linear-gradient(var(--base),transparent)}

/* ---------- manifest ---------- */
.manifest h2{font-size:clamp(2rem,5.4vw,5rem); max-width:19ch; text-transform:none}
.manifest .w{opacity:.16; transition:opacity .2s linear}
.manifest__grid{display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(30px,6vw,110px); align-items:end; margin-top:clamp(40px,7vh,90px)}
.claim{font-size:clamp(1.5rem,3vw,2.6rem); font-weight:900; letter-spacing:-.035em; line-height:1.02}
.claim span{display:block}
.claim span:last-child{color:var(--base)}

/* ---------- marquee ---------- */
.strip{background:var(--base); color:var(--paper); padding-block:clamp(16px,2.4vw,26px); overflow:hidden}
.strip + .strip{background:var(--ink); box-shadow:inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line)}
.track{display:flex; gap:clamp(28px,4vw,64px); white-space:nowrap; will-change:transform}
.track span{font-weight:900; font-size:clamp(1.2rem,2.5vw,2.1rem); letter-spacing:-.02em; text-transform:uppercase}
.track em{font-style:normal; opacity:.42}

/* ---------- pijlers (pinned horizontaal) ---------- */
.rail{position:relative}
.rail__vp{height:100svh; overflow:hidden; display:flex; align-items:center}
.rail__row{display:flex; gap:clamp(16px,2vw,34px); padding-inline:var(--gut); will-change:transform}
.panel{
  position:relative; flex:none; width:min(78vw,760px); height:min(74svh,700px);
  overflow:hidden; background:#0d0d0d;
}
.panel__img{position:absolute; inset:0}
.panel__img img{width:100%; height:100%; object-fit:cover; opacity:.72; transform:scale(1.06); transition:transform 1.2s cubic-bezier(.2,.8,.2,1), opacity .6s}
.panel:hover .panel__img img{transform:scale(1); opacity:.9}
.panel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(0,0,0,.15), rgba(0,0,0,.9));
}
.panel__body{position:absolute; inset:auto 0 0 0; z-index:2; padding:clamp(22px,3vw,44px)}
.panel__kick{font-size:.8rem; letter-spacing:.26em; text-transform:uppercase; color:var(--base); margin-bottom:14px}
.panel p{max-width:46ch; color:rgba(255,255,255,.78); font-size:1rem; margin:14px 0 0}
.rail__head{position:absolute; top:clamp(70px,12vh,120px); left:0; right:0; z-index:5; pointer-events:none}
.rail__head .wrap:not(.mcb-wrap){display:flex; justify-content:space-between; align-items:flex-end; gap:20px}
.rail__head p{margin:0; font-size:.9rem; color:rgba(255,255,255,.55)}

/* ---------- voor wie ---------- */
.who{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-top:clamp(40px,6vh,70px)}
.who > article{background:var(--ink); padding:clamp(26px,3vw,44px); position:relative; overflow:hidden}
.who h3{font-size:clamp(1.5rem,2.3vw,2.1rem); margin-bottom:12px}
.who p{font-size:1rem; color:rgba(255,255,255,.66); margin:0}
.who ul{list-style:none; padding:0; margin:20px 0 0; font-size:.92rem; color:rgba(255,255,255,.55)}
.who li{padding:7px 0; border-top:1px solid var(--line)}
.who__i{position:absolute; right:-12px; top:-12px; width:74px; opacity:.1}

/* ---------- cases ---------- */
.cases{background:var(--sand); color:var(--ink)}
.cases h2,.cases h3{color:var(--ink)}
.cases .muted{color:rgba(0,0,0,.6)}
.case{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,80px); align-items:center; padding-block:clamp(40px,6vh,80px); border-top:1px solid var(--line-dark)}
.case:first-of-type{border-top:0}
.case__shot{position:relative; overflow:hidden; aspect-ratio:4/3}
.case__shot img{width:100%; height:100%; object-fit:cover; will-change:transform}
.case__meta{display:flex; gap:clamp(20px,3vw,44px); margin-top:26px; flex-wrap:wrap}
.case__meta div{border-top:1px solid var(--line-dark); padding-top:10px; min-width:96px}
.case__meta b{display:block; font-weight:900; font-size:1.6rem; letter-spacing:-.03em}
.case__meta span{font-size:.82rem; color:rgba(0,0,0,.55)}
.case:nth-of-type(even) .case__shot{order:2}
.logos{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(18px,3vw,48px); align-items:center; margin-top:clamp(40px,6vh,80px); padding-top:40px; border-top:1px solid var(--line-dark)}
.logos img{width:100%; height:38px; object-fit:contain; filter:grayscale(1) brightness(0); opacity:.5; transition:opacity .3s}
.logos img:hover{opacity:.9}
.logos img.inv{filter:grayscale(1) brightness(0)}

/* ---------- shows ---------- */
.shows__tabs{display:flex; flex-wrap:wrap; gap:8px; margin:clamp(28px,4vh,44px) 0 0}
.tab{padding:.8em 1.5em; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line); font-size:.92rem; font-weight:400; transition:.3s}
.tab[aria-selected="true"]{background:var(--paper); color:var(--ink); font-weight:700; box-shadow:none}
.shows__stage{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,64px); align-items:center; margin-top:clamp(26px,4vh,44px)}
.shows__shot{position:relative; aspect-ratio:16/10; overflow:hidden; background:#0d0d0d}
.shows__shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .7s, transform 1.4s cubic-bezier(.2,.8,.2,1); transform:scale(1.05)}
.shows__shot img.on{opacity:1; transform:scale(1)}
.shows__spec{list-style:none; padding:0; margin:22px 0 0}
.shows__spec li{padding:12px 0; border-top:1px solid var(--line); font-size:1rem; color:rgba(255,255,255,.72); display:flex; gap:14px}
.shows__spec li::before{content:""; width:8px; height:8px; margin-top:.55em; background:var(--base); flex:none}

/* ---------- quotes ---------- */
.quotes{
  display:flex; gap:clamp(16px,2vw,28px); margin-top:clamp(36px,5vh,64px);
  overflow-x:auto; overflow-y:hidden; padding-bottom:18px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; cursor:grab;
  scrollbar-width:thin; scrollbar-color:var(--base) rgba(255,255,255,.1);
}
.quotes::-webkit-scrollbar{height:5px}
.quotes::-webkit-scrollbar-track{background:rgba(255,255,255,.08)}
.quotes::-webkit-scrollbar-thumb{background:var(--base)}
.quotes.is-drag{cursor:grabbing; scroll-snap-type:none}
.quotes.is-drag *{user-select:none}
.quote{border-top:1px solid var(--line); padding-top:22px}
.quote p{font-size:1.05rem; color:rgba(255,255,255,.8)}
.quote footer{font-size:.85rem; color:rgba(255,255,255,.5)}

/* ---------- eind-cta ---------- */
.end{background:var(--base); color:var(--paper); overflow:hidden}
.end h2{font-size:clamp(2.6rem,9vw,8rem)}
.end .btn{background:var(--ink)}
.end .btn:hover{background:#111}
.end__row{display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(26px,4vh,44px)}
.end__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,50px); margin-top:clamp(46px,7vh,90px); padding-top:30px; border-top:1px solid rgba(255,255,255,.25)}
.end__grid h4{margin:0 0 8px; font-weight:700; font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; opacity:.7}
.end__grid p{margin:0; font-size:1rem}

/* ---------- footer ---------- */
.ft{padding-block:clamp(40px,6vh,70px); font-size:.88rem; color:rgba(255,255,255,.5)}
.ft__top{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap}
.ft img{height:30px}
.ft__links{display:flex; gap:22px; flex-wrap:wrap}
.ft__bottom{margin-top:34px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}

/* ---------- scroll reveal (fallback = zichtbaar) ---------- */
.rv{opacity:0; transform:translateY(26px)}
html.no-anim .rv{opacity:1; transform:none}
html.no-anim .line > span{transform:none !important}
html.no-anim .manifest .w{opacity:1}
html.no-anim .loader{display:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero__vid::after{background:linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.2) 40%, rgba(0,0,0,.9))}
}
@media (max-width:1000px){
  .manifest__grid,.shows__stage,.case,.who,.quotes,.end__grid{grid-template-columns:1fr}
  .case:nth-of-type(even) .case__shot{order:0}
  .logos{grid-template-columns:repeat(3,1fr)}
  .nav{display:none}
  .burger{display:flex}
  .hdr .btn{display:none}
  .panel{width:86vw; height:64svh}
  .who > article{padding:24px 0}
  .who{background:none; gap:0}
  .who > article + article{border-top:1px solid var(--line)}
}
@media (max-width:700px){
  .rail__head{position:static; padding-top:clamp(90px,14vh,130px)}
  .rail__head .wrap:not(.mcb-wrap){flex-direction:column; align-items:flex-start; gap:10px}
  .rail__vp{height:auto; overflow-x:auto; overflow-y:hidden; padding-block:28px clamp(70px,10vh,110px);
            scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .rail__vp::-webkit-scrollbar{display:none}
  .panel{scroll-snap-align:center}
}
@media (max-width:640px){
  .hero{align-items:flex-end}
  .hero__foot{gap:14px 26px}
  .scrollcue{display:none}
  .case__meta b{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none}
  .loader{display:none}
}


/* ---------- doorklikken naar de onderliggende pagina's ---------- */
.lnk{
  display:inline-flex; align-items:center; gap:.5em; margin-top:18px;
  font-size:.92rem; font-weight:700; color:#63A596; letter-spacing:-.01em;
  transition:gap .25s cubic-bezier(.2,.8,.2,1);
}
.lnk::after{content:"→"; font-weight:400}
.lnk:hover{gap:.85em}
.lnk--ink{color:var(--base)}
.panel .lnk{margin-top:14px}

/* ---------- klanten ---------- */
.clients{margin-top:clamp(40px,6vh,80px); padding-top:40px; border-top:1px solid var(--line-dark)}
.clients__t{margin:0 0 26px; font-weight:900; font-size:1rem; letter-spacing:-.02em}
.clients .logos{margin-top:0; padding-top:0; border-top:0}
.clients__n{margin:30px 0 0; font-weight:900; font-size:clamp(1.1rem,2.2vw,1.7rem); letter-spacing:-.03em}

/* ---------- social links ---------- */
.socials a{display:inline-block; margin-right:16px; text-decoration:underline; text-underline-offset:3px}

/* ---------- footer ---------- */
.ft__tag{margin:12px 0 0; font-weight:900; color:var(--paper); font-size:.95rem; letter-spacing:-.02em}
.ft__links .menu-list{display:flex; flex-wrap:wrap; gap:12px 24px; list-style:none; margin:0; padding:0}
.ft__links .sub-menu{display:none}
.ft__bottom a{text-decoration:underline; text-underline-offset:3px}

/* ---------- losse pagina's (Events, Shows, Contact, ...) ---------- */
.pagehead{padding:clamp(150px,20vh,250px) 0 clamp(30px,5vh,60px); border-bottom:1px solid var(--line)}
.pagehead h1{font-size:var(--t-xl); text-transform:lowercase}
.pagehead p{margin:16px 0 0; color:rgba(255,255,255,.6); font-size:.95rem}
.entry{padding-block:clamp(40px,7vh,80px); max-width:78ch}
.entry h2,.entry h3{text-transform:none; margin:1.6em 0 .5em}
.entry a{color:#63A596; text-decoration:underline; text-underline-offset:3px}
.entry img{margin:1.5em 0}
.entry ul,.entry ol{padding-left:1.2em}
.entry li{margin:.4em 0}


/* ---------- terugval als de browser autoplay blokkeert ---------- */
@keyframes be-kenburns{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to{transform:scale(1.16) translate3d(-1.5%,-1%,0)}
}
.vid-stil .hero__vid video{animation:be-kenburns 20s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){ .vid-stil .hero__vid video{animation:none} }


/* ---------- reviews ---------- */
.quotes{align-items:stretch}
.review{
  margin:0; padding:clamp(22px,2.4vw,30px);
  background:rgba(255,255,255,.045); box-shadow:inset 0 0 0 1px var(--line);
  display:flex; flex-direction:column; gap:14px;
  transition:background-color .35s, transform .35s cubic-bezier(.2,.8,.2,1);
}
.review:hover{background:rgba(255,255,255,.075); transform:translateY(-4px)}
.review__top{display:flex; align-items:center; gap:14px}
.review__av{
  width:46px; height:46px; flex:none; border-radius:50%; background:var(--base);
  display:grid; place-items:center; font-weight:900; font-size:.95rem; letter-spacing:.02em;
}
.review__who{display:flex; flex-direction:column; line-height:1.3}
.review__who b{font-weight:700; font-size:1rem; letter-spacing:-.01em}
.review__who span{font-size:.82rem; color:rgba(255,255,255,.5)}
.review__stars{color:#F5B400; font-size:1.05rem; letter-spacing:3px; line-height:1}
.review__stars .star{opacity:.22}
.review__stars .star.on{opacity:1}
.review p{margin:0; font-size:1rem; line-height:1.6; color:rgba(255,255,255,.8)}

/* ---------- social media ---------- */
.socials{display:flex; gap:10px; margin-top:12px}
.socials a{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); color:var(--paper);
  transition:background-color .3s, color .3s, transform .3s cubic-bezier(.2,.8,.2,1);
}
.socials a:hover{background:var(--paper); color:var(--base); transform:translateY(-3px)}
.socials svg{width:20px; height:20px}


/* ---------- lettertype afdwingen op de doorklikpagina's ----------
   Pagina's die met een pagebuilder zijn gemaakt (Elementor, WPBakery) zetten
   hun eigen lettertype in de opmaak. Hieronder wordt het handboek-lettertype
   teruggezet: Nunito Sans Black voor koppen, Extra Light voor lopende tekst.
   Icoonelementen (<i>, svg) blijven ongemoeid, anders verdwijnen de icoontjes. */
.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6,
.entry p, .entry li, .entry td, .entry th, .entry blockquote,
.entry a, .entry span:not([class*="icon"]):not([class*="fa"]),
.entry label, .entry input, .entry textarea, .entry select, .entry button{
  font-family:var(--f) !important;
}
.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6{
  font-weight:900 !important; letter-spacing:-.03em; line-height:1.05;
}
.entry p, .entry li, .entry td, .entry blockquote{font-weight:200 !important}
.entry strong, .entry b{font-weight:700 !important}

.review{flex:0 0 min(84vw,400px); scroll-snap-align:start}
@media (max-width:640px){ .review{flex-basis:min(88vw,360px)} }

/* ============================================================
   Onderliggende pagina's: aanvullende componenten
   ============================================================ */
.menu{visibility:hidden; transition:transform .6s cubic-bezier(.76,0,.24,1), visibility 0s linear .6s}
.menu.open{visibility:visible; transition:transform .6s cubic-bezier(.76,0,.24,1)}
.phero .line,.hero .line{padding-bottom:.1em; margin-bottom:-.1em}
.hdr.solid-now{background:rgba(0,0,0,.82); backdrop-filter:blur(14px); padding-block:12px}
.nav a.is-current{opacity:1; font-weight:700}

/* ---------- paginahero ---------- */
.phero{position:relative; min-height:min(86svh,860px); display:flex; align-items:flex-end; overflow:hidden}
.phero__media{position:absolute; inset:-7% 0; z-index:0; will-change:transform}
.phero__media img{width:100%; height:100%; object-fit:cover}
.phero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 32%, rgba(0,0,0,.62) 74%, #000 100%),
    linear-gradient(96deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.3) 50%, rgba(0,0,0,0) 74%);
}
.phero__in{position:relative; z-index:2; width:100%; padding-top:170px; padding-bottom:clamp(34px,7vh,74px)}
.phero h1{font-size:clamp(3rem,10.5vw,10rem)}
.phero--flat{min-height:0; border-bottom:1px solid var(--line)}
.phero--flat::after{display:none}
.phero--flat .phero__in{padding-top:clamp(150px,20vh,230px)}
.phero__sub{margin-top:clamp(18px,2.4vh,30px); max-width:52ch; font-size:var(--t-m); color:rgba(255,255,255,.82)}
.crumbs{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 26px; padding:0; list-style:none; font-size:.85rem; color:rgba(255,255,255,.55)}
.crumbs li + li::before{content:"/"; margin-right:10px; opacity:.5}
.crumbs a:hover{color:var(--paper)}

/* ---------- basisblokken ---------- */
.intro{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(30px,6vw,110px); align-items:start}
.intro h2{font-size:clamp(2rem,4.6vw,4.2rem)}
.intro .lede + .lede{margin-top:1em}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap}
.sec-head .lede{margin:0; max-width:48ch}

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,80px); align-items:center; padding-block:clamp(40px,6vh,80px); border-top:1px solid var(--line)}
.split:first-of-type{border-top:0}
.split--flip .split__shot{order:2}
.split__shot{position:relative; overflow:hidden; aspect-ratio:4/3; background:#0d0d0d}
.split__shot img{width:100%; height:100%; object-fit:cover; will-change:transform}
.split h3{margin-bottom:14px}
.split .muted{max-width:56ch}

.spec{list-style:none; padding:0; margin:22px 0 0}
.spec li{padding:12px 0; border-top:1px solid var(--line); font-size:1rem; color:rgba(255,255,255,.76); display:flex; gap:14px}
.spec li::before{content:""; width:8px; height:8px; margin-top:.55em; background:var(--base); flex:none}

.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; padding:0; list-style:none}
.tags li{padding:.55em 1.15em; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line); font-size:.88rem; font-weight:400}

.bigquote{font-weight:900; font-size:clamp(1.8rem,4.2vw,3.8rem); letter-spacing:-.035em; line-height:1.02; max-width:22ch; margin:0}
.bigquote + p{margin-top:22px; font-size:.95rem; color:rgba(255,255,255,.6)}

/* ---------- zand-secties ---------- */
.sand{background:var(--sand); color:var(--ink)}
.sand h2,.sand h3{color:var(--ink)}
.sand .muted{color:rgba(0,0,0,.62)}
.sand .lnk{color:var(--base)}
.sand .split,.sand .steps li,.sand .faq details,.sand .spec li{border-color:var(--line-dark)}
.sand .spec li{color:rgba(0,0,0,.72)}
.sand .tags li{box-shadow:inset 0 0 0 1px var(--line-dark)}
.sand .bigquote + p{color:rgba(0,0,0,.55)}

/* ---------- stappen en tijdlijn (echte volgordes) ---------- */
.steps{list-style:none; margin:clamp(36px,5vh,60px) 0 0; padding:0}
.steps li{display:grid; grid-template-columns:clamp(80px,12vw,190px) 1fr; gap:clamp(16px,3vw,50px); padding-block:clamp(22px,3.4vh,36px); border-top:1px solid var(--line)}
.steps__n{font-weight:900; font-size:clamp(2.2rem,4.4vw,4rem); color:var(--base); letter-spacing:-.05em; line-height:.9}
.steps h3{font-size:clamp(1.35rem,2.4vw,2.1rem); margin-bottom:10px}
.steps p{margin:0; max-width:62ch; font-size:1rem; color:rgba(255,255,255,.7)}
.sand .steps p{color:rgba(0,0,0,.66)}

/* ---------- veelgestelde vragen ---------- */
.faq{margin-top:clamp(30px,5vh,56px); max-width:980px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:22px 0; font-weight:700; font-size:clamp(1.05rem,1.5vw,1.3rem); letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-weight:200; font-size:1.8em; line-height:.6; transition:transform .3s cubic-bezier(.2,.8,.2,1); flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0; padding:0 0 24px; max-width:70ch; font-size:1rem; color:rgba(255,255,255,.68)}
.sand .faq p{color:rgba(0,0,0,.66)}

/* ---------- vergelijking shows ---------- */
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:clamp(30px,5vh,56px)}
.compare{width:100%; min-width:760px; border-collapse:collapse; table-layout:fixed}
.compare col.lab{width:150px}
.compare th,.compare td{padding:16px 18px 16px 0; text-align:left; vertical-align:top; border-top:1px solid var(--line); font-size:.95rem; font-weight:300; color:rgba(255,255,255,.78)}
.compare thead th{border-top:0; font-weight:900; font-size:clamp(1.2rem,1.8vw,1.6rem); letter-spacing:-.03em; text-transform:lowercase; color:var(--paper)}
.compare thead th a:hover{color:#63A596}
.compare tbody th{font-weight:700; font-size:.85rem; color:rgba(255,255,255,.5); width:170px}

/* ---------- raster met kaarten (portfolio, artiesten) ---------- */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(28px,4vh,44px)}
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(34px,4vw,56px) clamp(16px,2vw,28px); margin-top:clamp(30px,5vh,56px)}
.pcard{display:block}
.pcard__img{position:relative; aspect-ratio:4/5; overflow:hidden; background:#0d0d0d}
.pcard__img img{width:100%; height:100%; object-fit:cover; opacity:.86; transform:scale(1.04); transition:transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .5s}
.pcard:hover .pcard__img img,.pcard:focus-visible .pcard__img img{transform:scale(1); opacity:1}
.pcard__meta{display:flex; justify-content:space-between; gap:12px; margin-top:16px; font-size:.84rem; color:rgba(255,255,255,.52)}
.pcard h3{font-size:clamp(1.4rem,2.1vw,2rem); margin-top:8px}
.pcard p{margin:10px 0 0; font-size:.95rem; color:rgba(255,255,255,.62)}
.pcard--wide{grid-column:span 2}
.pcard--wide .pcard__img{aspect-ratio:16/10}
.pcard[hidden]{display:none}
.empty{margin-top:30px; font-size:1rem; color:rgba(255,255,255,.6)}

/* ---------- cijfers ---------- */
.facts{display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,64px); margin-top:clamp(30px,5vh,56px)}
.facts div{border-top:1px solid var(--line); padding-top:12px; min-width:130px}
.facts b{display:block; font-weight:900; font-size:clamp(1.8rem,3.2vw,2.8rem); letter-spacing:-.04em; line-height:1}
.facts span{font-size:.85rem; color:rgba(255,255,255,.58)}
.sand .facts div{border-color:var(--line-dark)}
.sand .facts span{color:rgba(0,0,0,.55)}

/* ---------- galerij ---------- */
.gallery{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(10px,1.4vw,20px); margin-top:clamp(30px,5vh,56px)}
.gallery figure{margin:0; overflow:hidden; background:#0d0d0d; aspect-ratio:4/3}
.gallery figure:nth-child(3n+1){grid-column:span 7; aspect-ratio:16/11}
.gallery figure:nth-child(3n+2){grid-column:span 5; aspect-ratio:4/5}
.gallery figure:nth-child(3n){grid-column:span 12; aspect-ratio:21/9}
.gallery img{width:100%; height:100%; object-fit:cover}

/* ---------- aanvraagroutes ---------- */
.routes{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,22px); margin-top:clamp(34px,5vh,60px)}
.route{
  position:relative; display:flex; flex-direction:column; min-height:330px; padding:clamp(24px,2.8vw,40px);
  background:#0a0a0a; box-shadow:inset 0 0 0 1px var(--line); text-align:left;
  transition:background-color .35s, box-shadow .35s;
}
.route:hover,.route:focus-visible{background:#0f1a18; box-shadow:inset 0 0 0 1px var(--base)}
.route h3{font-size:clamp(1.7rem,2.6vw,2.4rem)}
.route p{margin:14px 0 0; font-size:1rem; color:rgba(255,255,255,.66)}
.route__meta{margin-top:auto; padding-top:28px; display:flex; justify-content:space-between; align-items:center; gap:14px; font-size:.85rem; color:rgba(255,255,255,.5)}
.route__meta .lnk{margin:0}
.end .route{background:rgba(0,0,0,.2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.end .route:hover{background:rgba(0,0,0,.34); box-shadow:inset 0 0 0 1px var(--paper)}
.end .route p,.end .route__meta{color:rgba(255,255,255,.8)}
.end .route .lnk{color:var(--paper)}
.routes + .end__row{margin-top:26px}

/* ---------- contactgegevens ---------- */
.cgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin-top:clamp(34px,5vh,60px)}
.cgrid > div{background:var(--ink); padding:clamp(22px,2.6vw,36px)}
.cgrid h3{font-size:1rem; font-weight:700; letter-spacing:-.01em; text-transform:none; margin-bottom:10px; color:rgba(255,255,255,.55)}
.cgrid p{margin:0; font-size:1.1rem}
.cgrid a{text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(255,255,255,.3)}
.cgrid a:hover{text-decoration-color:var(--base)}

/* ---------- belmoment kiezen ---------- */
.slots{margin-top:clamp(26px,4vh,44px); max-width:980px}
.slots__days{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none}
.slots__days::-webkit-scrollbar{display:none}
.day{flex:none; min-width:84px; padding:12px 14px; text-align:left; box-shadow:inset 0 0 0 1px var(--line); transition:.25s}
.day b{display:block; font-weight:900; font-size:1.35rem; letter-spacing:-.03em; line-height:1.05}
.day span{font-size:.8rem; opacity:.65}
.day[aria-pressed="true"]{background:var(--paper); color:var(--ink); box-shadow:none}
.slots__times{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin-top:16px}
.time{padding:12px 0; box-shadow:inset 0 0 0 1px var(--line); font-size:.95rem; font-weight:400; transition:.25s}
.time:hover{box-shadow:inset 0 0 0 1px var(--base)}
.time[aria-pressed="true"]{background:var(--base); box-shadow:none; font-weight:700}
.time:disabled{opacity:.28; text-decoration:line-through; cursor:not-allowed}
.slots__form{display:grid; grid-template-columns:1fr 1fr auto; gap:20px; align-items:end; margin-top:26px}
.slots__done{margin-top:26px; padding:22px 24px; background:rgba(58,110,100,.2); box-shadow:inset 0 0 0 1px var(--base)}
.slots__done b{font-weight:900}
.note{font-size:.82rem; color:rgba(255,255,255,.45); margin-top:14px}

/* ---------- formuliervelden ---------- */
.fld{margin:0 0 30px; border:0; padding:0; min-width:0}
.fld > label,.fld > legend{display:block; font-weight:700; font-size:1rem; letter-spacing:-.01em; margin-bottom:10px; padding:0}
.fld .req{color:#63A596; font-weight:400}
.hint{display:block; margin-top:8px; font-size:.84rem; color:rgba(255,255,255,.5)}
.inp{
  width:100%; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.3); border-radius:0;
  color:var(--paper); font:inherit; font-size:1.12rem; font-weight:300; padding:10px 0; color-scheme:dark;
  transition:border-color .25s;
}
.inp::placeholder{color:rgba(255,255,255,.3)}
.inp:focus{outline:none; border-bottom-color:var(--base); box-shadow:0 1px 0 0 var(--base)}
textarea.inp{min-height:110px; resize:vertical; line-height:1.5}
select.inp{appearance:none; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size:5px 5px; background-repeat:no-repeat; padding-right:30px; cursor:pointer}
select.inp option{background:#111; color:#fff}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:0 28px}
.row3{display:grid; grid-template-columns:repeat(3,1fr); gap:0 28px}
.opts{display:flex; flex-wrap:wrap; gap:8px}
.opt{position:relative}
.opt input{position:absolute; opacity:0; pointer-events:none}
.opt span{display:inline-block; padding:.72em 1.3em; border-radius:999px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.24); font-size:.93rem; font-weight:400; cursor:pointer; transition:.2s}
.opt span:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.opt input:checked + span{background:var(--paper); color:var(--ink); font-weight:700; box-shadow:none}
.opt input:focus-visible + span{outline:2px solid var(--base); outline-offset:3px}
.copts{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}
.copt{position:relative; display:block}
.copt input{position:absolute; opacity:0; pointer-events:none}
.copt > span{display:block; height:100%; padding:18px 20px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); cursor:pointer; transition:.2s}
.copt b{display:block; font-weight:900; font-size:1.2rem; letter-spacing:-.02em; text-transform:lowercase}
.copt small{display:block; margin-top:6px; font-size:.85rem; line-height:1.45; color:rgba(255,255,255,.6)}
.copt > span:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.copt input:checked + span{background:rgba(58,110,100,.24); box-shadow:inset 0 0 0 2px var(--base)}
.copt input:focus-visible + span{outline:2px solid var(--base); outline-offset:3px}
.rng{width:100%; accent-color:var(--base)}
.rng-l{display:flex; justify-content:space-between; font-size:.84rem; color:rgba(255,255,255,.55); margin-top:6px}
.fld.is-err .inp{border-bottom-color:#FF8A7A}
.fld.is-err .opt span,.fld.is-err .copt > span{box-shadow:inset 0 0 0 1px #FF8A7A}
.errmsg{display:block; margin-top:8px; font-size:.86rem; color:#FF8A7A}

/* ---------- aanvraagwizard ---------- */
.wz{display:grid; grid-template-columns:minmax(220px,300px) 1fr; gap:clamp(30px,6vw,110px); align-items:start}
.wz__side{position:sticky; top:110px}
.wz__route{font-weight:900; font-size:clamp(1.6rem,2.4vw,2.2rem); letter-spacing:-.035em; line-height:.95; text-transform:lowercase}
.wz__switch{margin-top:10px; font-size:.88rem; color:rgba(255,255,255,.55); text-decoration:underline; text-underline-offset:3px}
.wz__switch:hover{color:var(--paper)}
.wz__steps{list-style:none; margin:30px 0 0; padding:0; counter-reset:s}
.wz__steps li{counter-increment:s; display:flex; gap:14px; align-items:baseline; padding:10px 0; border-top:1px solid var(--line); font-size:.95rem; color:rgba(255,255,255,.42)}
.wz__steps li::before{content:counter(s); font-weight:900; width:1.4em; flex:none}
.wz__steps li.is-done{color:rgba(255,255,255,.72)}
.wz__steps li.is-done::before{color:var(--base)}
.wz__steps li.is-now{color:var(--paper); font-weight:700}
.wz__steps li.is-now::before{color:var(--base)}
.wz__save{margin-top:18px; font-size:.82rem; color:rgba(255,255,255,.42)}
.wz__bar{display:none; height:3px; background:rgba(255,255,255,.12); margin-bottom:26px}
.wz__bar i{display:block; height:100%; background:var(--base); transition:width .5s cubic-bezier(.2,.8,.2,1)}
.wz__main h2{font-size:clamp(2rem,4.4vw,3.8rem)}
.wz__lead{margin:14px 0 clamp(30px,5vh,48px); max-width:56ch; font-size:1.05rem; color:rgba(255,255,255,.66)}
.wz__nav{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-top:10px; padding-top:28px; border-top:1px solid var(--line)}
.wz__count{font-size:.85rem; color:rgba(255,255,255,.5)}
.wz__panel{animation:wzIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes wzIn{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .wz__panel{animation:none} }

.review-list{margin:0}
.review-list section{padding:20px 0; border-top:1px solid var(--line)}
.review-list header{display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:10px}
.review-list h3{font-size:1.25rem; text-transform:none; letter-spacing:-.02em}
.review-list button{font-size:.88rem; color:#63A596; font-weight:700}
.review-list dl{display:grid; grid-template-columns:minmax(140px,240px) 1fr; gap:6px 24px; margin:0; font-size:.98rem}
.review-list dt{color:rgba(255,255,255,.5)}
.review-list dd{margin:0; color:rgba(255,255,255,.88); white-space:pre-line}

.mail{background:var(--paper); color:var(--ink); margin-top:22px; font-size:.95rem; font-weight:400; box-shadow:0 30px 60px rgba(0,0,0,.45)}
.mail__head{padding:18px 24px; border-bottom:1px solid var(--line-dark); display:grid; gap:4px; font-size:.86rem; color:rgba(0,0,0,.6)}
.mail__head b{color:var(--ink); font-weight:700}
.mail__subj{font-weight:900; font-size:1.15rem; letter-spacing:-.02em; color:var(--ink); margin-top:4px}
.mail__body{padding:22px 24px; max-height:460px; overflow:auto}
.mail__body h4{margin:18px 0 6px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--base)}
.mail__body h4:first-child{margin-top:0}
.mail__body dl{display:grid; grid-template-columns:170px 1fr; gap:3px 16px; margin:0}
.mail__body dt{color:rgba(0,0,0,.55)}
.mail__body dd{margin:0; white-space:pre-line}
.done-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:start}

/* ---------- conceptoverzicht ---------- */
.map{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-top:clamp(34px,5vh,60px)}
.map > div{background:var(--ink); padding:clamp(22px,2.6vw,34px)}
.map h3{font-size:clamp(1.3rem,1.8vw,1.7rem); margin-bottom:12px}
.map ul{list-style:none; margin:0; padding:0}
.map li{padding:8px 0; border-top:1px solid var(--line); font-size:.95rem; display:flex; justify-content:space-between; gap:12px}
.map li a{text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.3)}
.map li a:hover{text-decoration-color:var(--base)}
.map li small{color:rgba(255,255,255,.45); font-size:.8rem; text-align:right}

/* ---------- raster in vier en op zand ---------- */
.who--4{grid-template-columns:repeat(4,1fr)}
.who > article[hidden]{display:none}
.sand .who{background:var(--line-dark)}
.sand .who > article{background:var(--sand)}
.sand .who p{color:rgba(0,0,0,.64)}
.who ul li:first-child{border-top-color:var(--line)}

/* ---------- responsive aanvullingen ---------- */
@media (max-width:1000px){
  .intro,.split,.done-grid,.wz{grid-template-columns:1fr}
  .split--flip .split__shot{order:0}
  .pgrid,.routes,.map{grid-template-columns:1fr 1fr}
  .pcard--wide{grid-column:span 2}
  .cgrid{grid-template-columns:1fr 1fr}
  .wz__side{position:static}
  .wz__steps{display:none}
  .wz__bar{display:block}
  .who--4{grid-template-columns:1fr 1fr; background:var(--line); gap:1px}
  .who--4 > article{padding:24px}
  .sand .who--4{background:var(--line-dark)}
  .who--4 > article + article{border-top:0}
}
@media (max-width:640px){
  .pgrid,.routes,.map,.cgrid{grid-template-columns:1fr}
  .pcard--wide{grid-column:auto}
  .pcard--wide .pcard__img{aspect-ratio:4/5}
  .row2,.row3,.slots__form{grid-template-columns:1fr}
  .steps li{grid-template-columns:1fr; gap:8px}
  .gallery figure{grid-column:span 12 !important; aspect-ratio:4/3 !important}
  .review-list dl,.mail__body dl{grid-template-columns:1fr; gap:0}
  .review-list dd,.mail__body dd{margin-bottom:10px}
  .route{min-height:0}
  .who--4{grid-template-columns:1fr}
}

/* ============================================================
   Versie 2: één ritme op alle pagina's, kleinere koppen
   ============================================================ */
:root{
  --t-mega: clamp(2.8rem, 8vw, 7.4rem);
  --t-xl:   clamp(1.9rem, 4.2vw, 3.8rem);
  --t-l:    clamp(1.4rem, 2.3vw, 2.1rem);
}
.manifest h2{font-size:clamp(1.55rem,3.4vw,3.2rem); max-width:22ch}
.claim{font-size:clamp(1.25rem,2.3vw,2rem)}
.end h2{font-size:clamp(2.2rem,5.6vw,5.2rem)}
.intro h2{font-size:clamp(1.8rem,3.2vw,3rem)}
.wz__main h2{font-size:clamp(1.8rem,3.2vw,3rem)}
.wz__route{font-size:clamp(1.4rem,2vw,1.9rem)}
.bigquote{font-size:clamp(1.5rem,3vw,2.8rem)}
.who h3{font-size:clamp(1.3rem,1.9vw,1.75rem)}
.pcard h3{font-size:clamp(1.25rem,1.8vw,1.7rem)}
.track span{font-size:clamp(1.05rem,2vw,1.7rem)}
.menu .menu-list > li > a{font-size:clamp(1.6rem,6vw,2.3rem)}

/* hero met beeld: zelfde opbouw als de homepage */
.hero__vid img{width:100%; height:100%; object-fit:cover; animation:be-kenburns 22s ease-in-out infinite alternate}
.hero--mid{height:auto; min-height:min(70svh,700px)}
.hero--mid .hero__in{padding-top:170px}
.hero .crumbs{margin-bottom:22px}
@media (prefers-reduced-motion:reduce){ .hero__vid img{animation:none} }

/* cases op zand: lijsten en labels donker */
.cases .spec li{border-color:var(--line-dark); color:rgba(0,0,0,.72)}
.cases .tags li{box-shadow:inset 0 0 0 1px var(--line-dark)}
.cases .case h3{max-width:22ch}
.cases .case__meta{margin-top:22px}

/* rail: kop blijft leesbaar boven de panelen */
.rail__head h2{font-size:var(--t-xl)}
.panel h3{font-size:clamp(1.6rem,2.8vw,2.6rem)}

/* paginaovergang */
.curtain{position:fixed; inset:0; z-index:115; background:var(--ink); display:grid; place-items:center; visibility:hidden; pointer-events:none}
.curtain::before{content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--base)}
.curtain__mark{position:relative; width:min(80px,16vw); aspect-ratio:388/484}
.curtain__mark img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}

/* ---------- logo slider ---------- */
.logos-sl{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.logos-sl__track{display:flex; width:max-content; animation:be-slide 45s linear infinite}
.logos-sl:hover .logos-sl__track{animation-play-state:paused}
.logos-sl__set{display:flex; align-items:center; gap:clamp(56px,6vw,104px); padding-right:clamp(56px,6vw,104px)}
.logos-sl img{--h:clamp(26px,2.6vw,36px); height:calc(var(--h) * var(--s,1)); width:auto; max-width:190px; object-fit:contain; flex:none;
  filter:grayscale(1) brightness(0); opacity:.5; transition:opacity .3s}
.logos-sl img:hover{opacity:.9}
@keyframes be-slide{to{transform:translateX(-50%)}}

/* ---------- footer met beeld ---------- */
.ft2{position:relative; background:var(--ink); color:rgba(255,255,255,.62); font-size:.95rem; overflow:hidden}
.ft2__photos{position:relative; padding-top:clamp(50px,8vh,90px)}
.ft2__row{display:flex; width:max-content; animation:be-slide 70s linear infinite}
.ft2__photos:hover .ft2__row{animation-play-state:paused}
.ft2__set{display:flex; gap:12px; padding-right:12px}
.ft2__set figure{margin:0; flex:none; width:clamp(190px,19vw,290px); aspect-ratio:4/5; overflow:hidden; background:#0d0d0d}
.ft2__set img{width:100%; height:100%; object-fit:cover; filter:saturate(.85) brightness(.82); transition:transform 1s cubic-bezier(.2,.8,.2,1), filter .5s}
.ft2__set figure:hover img{transform:scale(1.06); filter:none}
.ft2__insta{position:absolute; left:50%; top:calc(50% + clamp(25px,4vh,45px)); transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:18px 30px; background:var(--base); color:var(--paper); border-radius:999px; box-shadow:0 20px 50px rgba(0,0,0,.45); transition:transform .35s cubic-bezier(.2,.8,.2,1), background-color .3s; white-space:nowrap}
.ft2__insta b{font-weight:900; font-size:1.15rem; letter-spacing:-.02em}
.ft2__insta span{font-size:.82rem; opacity:.85}
.ft2__insta:hover{transform:translate(-50%,-50%) scale(1.05); background:#2f5b53}
.ft2__main{position:relative; padding:clamp(70px,11vh,130px) 0 34px}
.ft2__bg{position:absolute; inset:0; z-index:0}
.ft2__bg img{width:100%; height:100%; object-fit:cover; opacity:.3}
.ft2__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.85) 100%)}
.ft2__main .wrap:not(.mcb-wrap){position:relative; z-index:1}
.ft2__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(30px,4vw,70px)}
.ft2__logo{height:34px; width:auto}
.ft2__claim{margin:26px 0 0; font-weight:900; font-size:clamp(1.8rem,3.4vw,3.2rem); letter-spacing:-.04em; line-height:.98; color:var(--paper); text-transform:lowercase}
.ft2__claim span{color:#63A596}
.ft2__cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.ft2 h4{margin:6px 0 16px; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--paper); font-weight:700}
.ft2 ul{list-style:none; margin:0; padding:0}
.ft2 li{padding:6px 0; line-height:1.45}
.ft2 li a{transition:color .25s}
.ft2 li a:hover{color:var(--paper)}
.ft2 .socials{margin-top:18px}
.ft2__bottom{margin-top:clamp(50px,8vh,90px); padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; font-size:.8rem; color:rgba(255,255,255,.45)}
.ft2__bottom a{text-decoration:underline; text-underline-offset:3px}
@media (max-width:1000px){ .ft2__grid{grid-template-columns:1fr 1fr} .ft2__lead{grid-column:1/-1} }
@media (max-width:560px){ .ft2__grid{grid-template-columns:1fr} .ft2__insta{padding:14px 22px} }
@media (prefers-reduced-motion:reduce){
  .logos-sl__track,.ft2__row{animation:none}
  .logos-sl__set[aria-hidden],.ft2__set[aria-hidden]{display:none}
  .logos-sl__set{flex-wrap:wrap; justify-content:center; row-gap:28px}
  .ft2__photos{overflow-x:auto}
}

/* ---------- eindblok: sfeer en beeld ---------- */
.end{position:relative; isolation:isolate}
.end__bg{position:absolute; inset:0; z-index:-1}
.end__bg img{width:100%; height:100%; object-fit:cover; opacity:.22; mix-blend-mode:luminosity}
.end__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, var(--base) 0%, rgba(58,110,100,.78) 40%, rgba(58,110,100,.92) 100%)}
.end .btn--ghost{background:rgba(0,0,0,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.end .btn--ghost:hover{background:var(--paper); color:var(--ink); box-shadow:none}
.end__grid{display:none}

/* ---------- routekaarten met foto ---------- */
.route--img{padding:0; min-height:0; overflow:hidden}
.route__img{position:relative; aspect-ratio:16/10; overflow:hidden; background:#0d0d0d}
.route__img img{width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.route__img::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.78) 100%)}
.route__img h3{position:absolute; left:clamp(20px,2.4vw,32px); bottom:clamp(16px,2vw,26px); z-index:1; margin:0; color:var(--paper); font-size:clamp(1.6rem,2.4vw,2.2rem)}
.route--img:hover .route__img img,.route--img:focus-visible .route__img img{transform:scale(1)}
.route__body{display:flex; flex-direction:column; flex:1; padding:clamp(20px,2.4vw,32px)}
.route__body p{margin:0}
.end .route--img{background:rgba(0,0,0,.28)}
.end .route--img:hover{background:rgba(0,0,0,.42)}

/* ---------- beeldkaarten (vervangt de tekstkolommen) ---------- */
.vcards{display:grid; gap:clamp(12px,1.6vw,22px); margin-top:clamp(30px,5vh,56px)}
.vcards--3{grid-template-columns:repeat(3,1fr)}
.vcards--4{grid-template-columns:repeat(4,1fr)}
.vcard{display:flex; flex-direction:column; background:#0a0a0a; box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; transition:box-shadow .35s, background-color .35s}
.vcard:hover{background:#0f1a18; box-shadow:inset 0 0 0 1px var(--base)}
.vcard[hidden]{display:none}
.vcard__img{position:relative; aspect-ratio:4/3; overflow:hidden; background:#0d0d0d}
.vcards--4 .vcard__img{aspect-ratio:1/1}
.vcard__img img{width:100%; height:100%; object-fit:cover; transition:filter .6s; filter:saturate(.9) brightness(.85)}
.vcard:hover .vcard__img img{filter:none}
.vcard__img::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 45%,rgba(0,0,0,.85) 100%)}
.vcard__n{position:absolute; z-index:1; top:16px; left:clamp(18px,2vw,26px); font-size:.78rem; font-weight:700; letter-spacing:.16em; color:rgba(255,255,255,.8)}
.vcard__img h3{position:absolute; z-index:1; left:clamp(18px,2vw,26px); right:clamp(18px,2vw,26px); bottom:clamp(14px,1.8vw,22px); margin:0; color:var(--paper); font-size:clamp(1.4rem,2.2vw,2rem)}
.vcards--4 .vcard__img h3{font-size:clamp(1.2rem,1.7vw,1.55rem)}
.vcard__body{display:flex; flex-direction:column; flex:1; padding:clamp(18px,2vw,26px)}
.vcard__body p{margin:0; font-size:1rem; color:rgba(255,255,255,.68)}
.vcard__tags{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:18px 0 0; padding:0}
.vcard__tags li{padding:.45em .95em; border-radius:999px; background:rgba(255,255,255,.07); font-size:.84rem; color:rgba(255,255,255,.86)}
.vcard__body .lnk{margin-top:auto; padding-top:22px}
.sand .vcard{background:var(--paper); box-shadow:none}
.sand .vcard:hover{box-shadow:inset 0 0 0 1px var(--base)}
.sand .vcard__body p{color:rgba(0,0,0,.66)}
.sand .vcard__tags li{background:rgba(0,0,0,.06); color:rgba(0,0,0,.78)}
@media (max-width:1000px){ .vcards--3,.vcards--4{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .vcards--3,.vcards--4{grid-template-columns:1fr} .vcards--4 .vcard__img{aspect-ratio:4/3} }

/* ---------- v6: vier routes, portalen ---------- */
.routes{grid-template-columns:repeat(4,1fr)}
.routes .route__img h3{font-size:clamp(1.3rem,1.8vw,1.7rem)}
@media (max-width:1100px){ .routes{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .routes{grid-template-columns:1fr} }

.ft2__grid{grid-template-columns:1.4fr repeat(4,1fr)}
@media (max-width:1100px){ .ft2__grid{grid-template-columns:1fr 1fr} }
.ft2__sr{display:inline-flex; align-items:center; gap:6px; color:rgba(255,255,255,.62)}
.ft2__sr:hover{color:var(--paper)}

.concept{position:relative; z-index:2; background:var(--paper); color:var(--ink); font-size:.88rem; padding:12px 0}
.concept b{font-weight:900}
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-top:clamp(30px,5vh,56px)}
.pillars > a{background:var(--ink); padding:clamp(22px,2.6vw,36px); display:block; transition:background-color .3s}
.pillars > a:hover{background:#0f1a18}
.pillars small{display:block; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:#63A596; font-weight:700}
.pillars b{display:block; margin-top:10px; font-weight:900; font-size:clamp(1.5rem,2.4vw,2.2rem); letter-spacing:-.035em; line-height:1; text-transform:lowercase}
.pillars span{display:block; margin-top:10px; color:rgba(255,255,255,.62); font-size:.98rem}
@media (max-width:800px){ .pillars{grid-template-columns:1fr} }

.done-grid > div{min-width:0}
.done-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.done-box{margin-top:clamp(26px,4vh,40px); padding:clamp(20px,2.4vw,30px); background:#0a0a0a; box-shadow:inset 0 0 0 1px var(--line)}
.done-box h3{font-size:clamp(1.3rem,2vw,1.8rem)}
.done-box p{margin:10px 0 0; color:rgba(255,255,255,.66); font-size:1rem}

/* bruiloftsportaal */
.psteps{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line); list-style:none; margin:clamp(26px,4vh,40px) 0 0; padding:0}
.psteps li{background:var(--ink); padding:18px 16px; font-size:.9rem; color:rgba(255,255,255,.45)}
.psteps li b{display:block; font-weight:900; font-size:1rem; letter-spacing:-.01em; margin-top:6px; color:inherit}
.psteps li.is-done{color:rgba(255,255,255,.75)} .psteps li.is-done span{color:#63A596}
.psteps li.is-now{background:#0f1a18; color:var(--paper); box-shadow:inset 0 -3px 0 var(--base)}
.portal{display:grid; grid-template-columns:1fr minmax(260px,320px); gap:clamp(24px,4vw,60px); align-items:start}
.portal__side{position:sticky; top:100px; background:#0a0a0a; box-shadow:inset 0 0 0 1px var(--line); padding:24px}
.portal__side h3{font-size:1.4rem}
.portal__side ul{list-style:none; margin:14px 0 0; padding:0}
.portal__side li{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:.95rem}
.portal__side li button{color:rgba(255,255,255,.45); font-size:.8rem}
.portal__side .empty{margin:14px 0 0; font-size:.92rem}
.portal__side .btn{margin-top:20px; width:100%; justify-content:center}
.ucards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,18px); margin-top:22px}
.ucards--4{grid-template-columns:repeat(4,1fr)}
.ucard{position:relative; display:flex; flex-direction:column; background:#0a0a0a; box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; text-align:left; transition:box-shadow .3s, background-color .3s}
.ucard__img{position:relative; aspect-ratio:4/3; overflow:hidden}
.ucard__img img{width:100%; height:100%; object-fit:cover; filter:brightness(.8) saturate(.9); transition:filter .5s, transform 1s cubic-bezier(.2,.8,.2,1)}
.ucard:hover .ucard__img img{filter:none; transform:scale(1.04)}
.ucard__body{padding:16px 18px 18px; display:flex; flex-direction:column; flex:1}
.ucard b{font-weight:900; font-size:1.2rem; letter-spacing:-.02em; text-transform:lowercase}
.ucard p{margin:6px 0 0; font-size:.88rem; color:rgba(255,255,255,.62); line-height:1.45}
.ucard__btn{margin-top:auto; padding-top:14px; font-size:.88rem; font-weight:700; color:#63A596}
.ucard[aria-pressed="true"]{background:rgba(58,110,100,.22); box-shadow:inset 0 0 0 2px var(--base)}
.ucard[aria-pressed="true"] .ucard__btn{color:var(--paper)}
.ucard__tick{position:absolute; top:12px; right:12px; z-index:2; width:30px; height:30px; border-radius:50%; background:var(--base); display:none; place-items:center; font-weight:900}
.ucard[aria-pressed="true"] .ucard__tick{display:grid}
.ptabs{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.ppanel{margin-top:26px; max-width:760px}
.toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,140%); z-index:120; background:var(--base); color:var(--paper); padding:14px 22px; border-radius:999px; font-weight:700; font-size:.95rem; box-shadow:0 20px 50px rgba(0,0,0,.5); transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.toast.show{transform:translate(-50%,0)}
@media (max-width:1000px){ .portal{grid-template-columns:1fr} .portal__side{position:static} .psteps{grid-template-columns:repeat(3,1fr)} .ucards,.ucards--4{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .ucards,.ucards--4{grid-template-columns:1fr} .psteps{grid-template-columns:1fr 1fr} }

/* uitvraag dj's */
.ux{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(24px,4vw,60px); align-items:start}
.ux__card{background:#0a0a0a; box-shadow:inset 0 0 0 1px var(--line); padding:clamp(20px,2.4vw,30px)}
.ux__card h3{font-size:1.5rem}
.ux__req{display:grid; grid-template-columns:130px 1fr; gap:6px 16px; margin:16px 0 0; font-size:.95rem}
.ux__req dt{color:rgba(255,255,255,.5)} .ux__req dd{margin:0}
.ux__list{list-style:none; margin:18px 0 0; padding:0}
.ux__list li{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--line)}
.ux__list label{display:flex; align-items:center; gap:12px; cursor:pointer}
.ux__list input{accent-color:var(--base); width:18px; height:18px}
.ux__st{font-size:.8rem; font-weight:700; padding:.35em .9em; border-radius:999px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.6); white-space:nowrap}
.ux__st.wait{background:rgba(255,200,80,.15); color:#FFD27A}
.ux__st.yes{background:rgba(99,165,150,.25); color:#8FD3C2}
.ux__st.no{background:rgba(255,138,122,.15); color:#FF8A7A}
@media (max-width:1000px){ .ux{grid-template-columns:1fr} }

/* ---------- dj's ---------- */
.djgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.4vw,20px); margin-top:clamp(30px,5vh,56px)}
.djcard{display:flex; flex-direction:column; background:#0a0a0a; box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .3s, background-color .3s}
.djcard:hover{box-shadow:inset 0 0 0 1px var(--base); background:#0f1a18}
.djcard__img{position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:#eceae6}
.djcard__img img{width:100%; height:100%; object-fit:cover; object-position:50% 20%; transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.djcard:hover .djcard__img img{transform:scale(1.05)}
.djcard__role{position:absolute; left:12px; bottom:12px; padding:.45em .9em; border-radius:999px; background:rgba(0,0,0,.78); color:var(--paper); font-size:.76rem; font-weight:700}
.djcard__body{display:flex; flex-direction:column; flex:1; padding:18px}
.djcard h3{font-size:clamp(1.3rem,1.7vw,1.6rem)}
.djcard p{margin:8px 0 0; font-size:.92rem; color:rgba(255,255,255,.64)}
.djcard__cta{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:18px}
.djcard__cta .lnk{margin:0}
.djcard__cta .btn{padding:.7em 1.1em; font-size:.85rem}
@media (max-width:1200px){ .djgrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .djgrid{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .djgrid{grid-template-columns:1fr} }

.djhero__card{width:clamp(160px,18vw,240px); aspect-ratio:4/5; overflow:hidden; margin-bottom:26px; box-shadow:0 30px 60px rgba(0,0,0,.5); background:#eceae6}
.djhero__card img{width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.cases .djlinks{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.cases .djlinks a{padding:.55em 1.1em; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line-dark); font-size:.88rem; font-weight:700}
.cases .djlinks a:hover{background:var(--ink); color:var(--paper)}
.cases .case__shot.is-portrait{aspect-ratio:4/5; background:#eceae6; max-width:460px}

/* dj kiezen in de aanvraag */
.copt__img{display:block; aspect-ratio:1/1; margin:-18px -20px 14px; overflow:hidden; background:#eceae6}
.copt__img img{width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.copts--dj{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.copts--dj .copt small{font-size:.8rem}

/* ---------- artiestenportaal ---------- */
.ap__bar{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; padding-bottom:24px; border-bottom:1px solid var(--line)}
.ap__who{display:flex; flex-direction:column; gap:6px; font-size:.85rem; color:rgba(255,255,255,.55); min-width:240px}
.ap__who select{font-size:1.3rem; font-weight:900; letter-spacing:-.02em}
.ap__list{margin-top:26px}
.ap__sub{font-size:1.3rem; margin:40px 0 4px}
.ap__card{display:grid; grid-template-columns:90px 1fr; gap:clamp(16px,2.4vw,32px); padding:clamp(18px,2.2vw,28px); margin-top:14px; background:#0a0a0a; box-shadow:inset 0 0 0 1px var(--line)}
.ap__card.is-open{box-shadow:inset 0 0 0 1px var(--base); background:#0c1513}
.ap__card.is-declined{opacity:.6}
.ap__date{text-align:center; padding-top:4px}
.ap__date b{display:block; font-weight:900; font-size:2.6rem; letter-spacing:-.05em; line-height:.9}
.ap__date span{font-size:.85rem; text-transform:uppercase; letter-spacing:.14em; color:#63A596; font-weight:700}
.ap__top{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap}
.ap__top h3{font-size:clamp(1.3rem,2vw,1.8rem)}
.ap__dl{display:grid; grid-template-columns:130px 1fr; gap:6px 18px; margin:16px 0 0; font-size:.95rem}
.ap__dl dt{color:rgba(255,255,255,.5)} .ap__dl dd{margin:0}
.ap__acts{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:22px}
.ap__q{font-size:.88rem; font-weight:700; color:#63A596; text-decoration:underline; text-underline-offset:3px}
.ap__msg{margin:20px 0 0; font-size:.95rem; color:rgba(255,255,255,.7)}
.ap__cal{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; max-width:520px; margin-top:12px}
.ap__dh{font-size:.75rem; text-align:center; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:.1em}
.ap__d{aspect-ratio:1/1; box-shadow:inset 0 0 0 1px var(--line); font-size:.92rem; transition:.2s}
.ap__d:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--paper)}
.ap__d:disabled{opacity:.3; cursor:default}
.ap__d.is-off{background:rgba(255,138,122,.18); color:#FF8A7A; text-decoration:line-through}
.ap__d.is-booked{background:var(--base); opacity:1; color:#fff; font-weight:900}
.ux__row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end}
@media (max-width:640px){ .ap__card{grid-template-columns:1fr} .ap__date{text-align:left; display:flex; gap:10px; align-items:baseline} .ap__dl{grid-template-columns:1fr; gap:0} .ap__dl dd{margin-bottom:8px} }

.djgrid--3{grid-template-columns:repeat(3,1fr)}
.djgrid--3 .djcard__img{aspect-ratio:1/1}
.djgrid--3 .djcard__img img{object-position:50% 40%}
@media (max-width:900px){ .djgrid--3{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .djgrid--3{grid-template-columns:1fr} }
.extra-acts{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:28px; font-size:.95rem; color:rgba(255,255,255,.62)}
/* ---------- base-effect: beeldmerk dat zichzelf in elkaar zet ---------- */
.manifest,.end{position:relative}
.bmark{position:absolute; z-index:0; pointer-events:none; width:clamp(120px,15vw,230px); aspect-ratio:388/484; right:clamp(20px,5vw,90px); top:clamp(40px,8vh,110px); opacity:.16}
.bmark img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
.end .bmark{opacity:.22; top:auto; bottom:clamp(40px,8vh,100px)}
.manifest > *:not(.bmark),.end .wrap:not(.mcb-wrap){position:relative; z-index:1}
.no-anim .bmark{display:none}
@media (max-width:700px){ .bmark{width:110px; right:16px; top:24px; opacity:.1} }
html:not(.no-anim){scroll-behavior:auto !important}

/* ============================================================
   v3: verhuur, keuzekaarten, team, dashboards
   ============================================================ */
.vcards--5{grid-template-columns:repeat(5,1fr)}
.vcards--5 .vcard__img{aspect-ratio:4/5}
.vcards--5 .vcard__img h3{font-size:clamp(1.15rem,1.5vw,1.45rem)}
@media (max-width:1200px){ .vcards--5{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .vcards--5{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .vcards--5{grid-template-columns:1fr} }
.ucards--5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){ .ucards--5{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .ucards--5{grid-template-columns:1fr 1fr} }

/* keuze: volledige productie of per onderdeel */
.choice{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,22px)}
.choice__card{position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:clamp(320px,42vh,460px); overflow:hidden; background:#0a0a0a; isolation:isolate}
.choice__card > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.choice__card::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.85) 75%)}
.choice__card:hover > img{transform:scale(1.05)}
.choice__card > div{padding:clamp(22px,2.8vw,40px)}
.choice__card small{font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:#63A596; font-weight:700}
.choice__card h3{margin-top:8px; font-size:clamp(1.7rem,2.8vw,2.6rem)}
.choice__card p{margin:10px 0 0; max-width:44ch; color:rgba(255,255,255,.75); font-size:1rem}
@media (max-width:760px){ .choice{grid-template-columns:1fr} }

/* verhuur */
.shop{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,18px); margin-top:clamp(26px,4vh,40px)}
.shop__card{display:flex; flex-direction:column; background:#0a0a0a; box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .3s, background-color .3s}
.shop__card[hidden]{display:none}
.shop__card.is-on{box-shadow:inset 0 0 0 2px var(--base); background:#0f1a18}
.shop__img{aspect-ratio:4/3; overflow:hidden}
.shop__img img{width:100%; height:100%; object-fit:cover; filter:brightness(.82)}
.shop__body{display:flex; flex-direction:column; flex:1; padding:16px 18px 18px}
.shop__body small{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:#63A596; font-weight:700}
.shop__body h3{margin-top:6px; font-size:1.25rem; letter-spacing:-.02em; text-transform:none; font-weight:900}
.shop__body p{margin:6px 0 0; font-size:.9rem; color:rgba(255,255,255,.6)}
.shop__add{margin-top:auto; padding:.7em 1em; margin-top:16px; border-radius:999px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); font-size:.85rem; font-weight:700; transition:.25s; align-self:flex-start}
.shop__add:hover{box-shadow:inset 0 0 0 1px var(--paper)}
.is-on .shop__add{background:var(--base); box-shadow:none}
.shopbar{position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(10,10,10,.94); backdrop-filter:blur(12px); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.shopbar.show{transform:none}
.shopbar__in{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:14px; flex-wrap:wrap}
.shopbar__in b{display:block; font-weight:900; font-size:1.1rem}
.shopbar__in span{font-size:.85rem; color:rgba(255,255,255,.6)}
.shopbar__btns{display:flex; align-items:center; gap:16px}
@media (max-width:1100px){ .shop{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .shop{grid-template-columns:1fr 1fr} }
@media (max-width:440px){ .shop{grid-template-columns:1fr} }

/* verhuurportaal */
.vp__bar{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; padding-bottom:20px; border-bottom:1px solid var(--line)}
.vp{width:100%; min-width:760px; border-collapse:collapse; margin-top:20px}
.vp th,.vp td{padding:12px 14px 12px 0; text-align:left; border-top:1px solid var(--line); font-size:.95rem; vertical-align:middle}
.vp thead th{border-top:0; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5)}
.vp tbody th{font-weight:700}
.vp tbody th small{display:block; font-weight:400; font-size:.78rem; color:rgba(255,255,255,.45); text-transform:capitalize}

/* team */
.team{display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(20px,3vw,50px); align-items:end; margin-top:clamp(26px,4vh,44px)}
.team__big{margin:0; overflow:hidden; aspect-ratio:3/2}
.team__big img{width:100%; height:100%; object-fit:cover}
.team__list article{padding:16px 0; border-top:1px solid var(--line)}
.team__list b{display:block; font-weight:900; font-size:1.4rem; letter-spacing:-.02em}
.team__list span{color:rgba(255,255,255,.6); font-size:.95rem}
@media (max-width:900px){ .team{grid-template-columns:1fr} }

/* voortgang bruiloften */
.pprog{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap}
.pprog .lede{margin:10px 0 0}
.pprog__bar{flex:1; min-width:200px; max-width:480px; height:10px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden}
.pprog__bar i{display:block; height:100%; width:0; background:var(--base); border-radius:999px; transition:width .6s cubic-bezier(.2,.8,.2,1)}
.dash{list-style:none; margin:0; padding:0}
.dash li{display:grid; grid-template-columns:minmax(200px,1.2fr) 2fr 60px minmax(110px,auto); align-items:center; gap:20px; padding:20px 0; border-top:1px solid var(--line)}
.dash li b{font-weight:900; font-size:1.2rem}
.dash li > div:first-child span{display:block; font-size:.88rem; color:rgba(255,255,255,.55)}
.dash .pprog__bar{max-width:none}
@media (max-width:760px){ .dash li{grid-template-columns:1fr; gap:8px} }

@media print{ .hdr,.ft2,.loader,.toast,.menu,.end,.shopbar{display:none !important} body{background:#fff; color:#000} }
.portal .ucards--5{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.gallery figure:nth-child(3n) img{object-position:50% 40%}

/* rail: twee links per paneel */
.panel__links{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-top:18px}
.panel__links .lnk{margin:0}
.panel__more{font-size:.9rem; color:rgba(255,255,255,.7); text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(255,255,255,.3)}
.panel__more:hover{color:var(--paper)}

/* uitgelichte cases: dynamische showcase */
.cshow{display:grid; grid-template-columns:minmax(0,1.75fr) minmax(260px,1fr); gap:clamp(14px,2vw,28px); margin-top:clamp(28px,4vh,48px); align-items:stretch}
.cshow__stage{position:relative; aspect-ratio:16/10; overflow:hidden; background:#0a0a0a}
.cshow__slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .9s cubic-bezier(.2,.8,.2,1), visibility 0s linear .9s}
.cshow__slide.is-on{opacity:1; visibility:visible; transition:opacity .9s cubic-bezier(.2,.8,.2,1)}
.cshow__slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.12); transition:transform 7s linear}
.cshow__slide.is-on img{transform:scale(1)}
.cshow__slide::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.85) 100%)}
.cshow__cap{position:absolute; left:0; right:0; bottom:0; z-index:1; padding:clamp(20px,3vw,44px)}
.cshow__cap small{font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:#63A596; font-weight:700}
.cshow__cap h3{margin-top:8px; font-size:clamp(1.8rem,3.6vw,3.4rem); max-width:16ch}
.cshow__cap p{margin:10px 0 0; max-width:48ch; color:rgba(255,255,255,.8); font-size:1rem}
.cshow__cap > *{opacity:0; transform:translateY(18px); transition:opacity .6s, transform .8s cubic-bezier(.2,.8,.2,1)}
.cshow__slide.is-on .cshow__cap > *{opacity:1; transform:none}
.cshow__slide.is-on .cshow__cap > *:nth-child(2){transition-delay:.08s}
.cshow__slide.is-on .cshow__cap > *:nth-child(3){transition-delay:.16s}
.cshow__slide.is-on .cshow__cap > *:nth-child(4){transition-delay:.24s}
.cshow__nav{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.cshow__nav li{flex:1}
.cshow__btn{position:relative; display:grid; grid-template-columns:34px 1fr 64px; align-items:center; gap:14px; width:100%; height:100%; min-height:62px; padding:10px 12px 12px 14px; text-align:left; background:#0a0a0a; box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; transition:background-color .3s, box-shadow .3s}
.cshow__btn:hover{background:#101010}
.cshow__btn.is-on{background:#0f1a18; box-shadow:inset 0 0 0 1px var(--base)}
.cshow__n{font-weight:900; font-size:.85rem; color:rgba(255,255,255,.4)}
.cshow__btn.is-on .cshow__n{color:#63A596}
.cshow__t b{display:block; font-weight:900; font-size:1.02rem; letter-spacing:-.01em; text-transform:lowercase; line-height:1.15}
.cshow__t small{font-size:.78rem; color:rgba(255,255,255,.5)}
.cshow__btn img{width:64px; height:44px; object-fit:cover; opacity:.55; filter:grayscale(.6); transition:opacity .3s, filter .3s}
.cshow__btn.is-on img,.cshow__btn:hover img{opacity:1; filter:none}
.cshow__bar{position:absolute; left:0; right:0; bottom:0; height:3px; background:transparent}
.cshow__bar i{display:block; height:100%; width:0; background:var(--base)}
.cshow__btn.is-on .cshow__bar i{animation:cshowbar var(--cshow-t,6s) linear forwards}
.cshow.is-paused .cshow__btn.is-on .cshow__bar i{animation-play-state:paused}
@keyframes cshowbar{to{width:100%}}
@media (max-width:1000px){
  .cshow{grid-template-columns:1fr}
  .cshow__stage{aspect-ratio:4/5}
  .cshow__nav{flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none}
  .cshow__nav::-webkit-scrollbar{display:none}
  .cshow__nav li{flex:0 0 72%; scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){ .cshow__slide img{transition:none; transform:none} .cshow__btn.is-on .cshow__bar i{animation:none; width:100%} }

/* ============================================================
   Portalen v2 (naar de demo van Sem)
   ============================================================ */
.concept a{text-decoration:underline; text-underline-offset:3px}
.pt,.pa{max-width:1080px}
.pt-welcome{max-width:720px; padding:clamp(20px,4vh,40px) 0}
.pt-welcome small,.pt-head small,.pa-login small{font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:#63A596; font-weight:700}
.pt-welcome h2{margin-top:10px; font-size:clamp(2rem,4vw,3.4rem)}
.pt-welcome .lede{margin:16px 0 0}
.pt-welcome .btn{margin-top:28px}
.pt-note{margin:20px 0 0; padding:12px 16px; background:rgba(58,110,100,.18); box-shadow:inset 0 0 0 1px var(--base); font-size:.95rem}
.pt--ent .pt-note{background:rgba(122,90,170,.16); box-shadow:inset 0 0 0 1px #7a5aaa}
.pt-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; padding-bottom:24px; border-bottom:1px solid var(--line)}
.pt-head h2{margin-top:8px; font-size:clamp(1.8rem,3.4vw,2.8rem)}
.pt-head .muted{margin:6px 0 0}
.pt-ring{min-width:220px}
.pt-ring b{font-weight:900; font-size:2.2rem; letter-spacing:-.04em}
.pt-ring span{margin-left:8px; color:rgba(255,255,255,.55); font-size:.9rem}
.pt-ring .pprog__bar{margin-top:8px; max-width:none}
.pt-steps{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:8px}
.pt-steps button{display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:16px; width:100%; padding:16px 18px; text-align:left; background:#0a0a0a; box-shadow:inset 0 0 0 1px var(--line); transition:.25s}
.pt-steps button:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.pt-steps b{display:block; font-weight:900; font-size:1.05rem}
.pt-steps small{color:rgba(255,255,255,.55); font-size:.88rem}
.pt-steps em{font-style:normal; font-size:.82rem; color:rgba(255,255,255,.45)}
.pt-n{width:36px; height:36px; display:grid; place-items:center; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); font-weight:900; font-size:.9rem}
.is-done .pt-n{background:var(--base); box-shadow:none}
.pt--ent .is-done .pt-n{background:#5a3a8a}
.is-done em{color:#8FD3C2}
.pt-stepbar{display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-size:.9rem; color:rgba(255,255,255,.55)}
.pt-stepbar .pprog__bar{flex:1}
.pt--ent .pprog__bar i{background:#7a5aaa}
.pt-title{margin-top:18px; font-size:clamp(1.8rem,3.2vw,2.8rem)}
.pt-sub{margin:8px 0 26px; font-size:1rem}
.pt-saved{color:#8FD3C2; margin-left:10px; font-size:.88rem}
.pt-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 28px}
.pt-grid .fld{grid-column:1 / -1}
.pt-grid .fld--half{grid-column:auto}
.pt-h3{font-size:1.35rem; margin:34px 0 0}
.pt-tl{margin-top:10px; padding:18px 20px; background:#0a0a0a; box-shadow:inset 0 0 0 1px var(--line)}
.pt-tl small{display:block; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:#63A596; font-weight:700; margin-bottom:10px}
.pt-tl div{display:flex; align-items:center; gap:12px; padding:5px 0; font-size:.95rem}
.pt-tl code{min-width:46px; color:#8FD3C2; font-weight:700}
.pt-tl i{width:7px; height:7px; border-radius:50%; background:var(--base)}
.pt-shows{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.pt-show{display:grid; grid-template-columns:120px 1fr; text-align:left; background:#0a0a0a; box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; transition:.25s}
.pt-show:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.pt-show.is-on{box-shadow:inset 0 0 0 2px var(--base); background:#0f1a18}
.pt-show__img{background-size:cover; background-position:center; min-height:130px}
.pt-show__b{padding:14px 16px}
.pt-show b{display:block; font-weight:900; font-size:1.15rem; text-transform:lowercase}
.pt-show em{display:block; font-style:normal; color:#63A596; font-size:.82rem; font-weight:700; margin-top:2px}
.pt-show small{display:block; margin-top:6px; font-size:.86rem; color:rgba(255,255,255,.62)}
.pt-feat{display:block; margin-top:8px; font-size:.78rem; color:rgba(255,255,255,.45)}
.pt-show--advice{grid-column:1 / -1; grid-template-columns:1fr}
.pt-ups{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; margin-bottom:24px}
.pt-up{display:block; padding:14px 16px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); border-radius:2px; cursor:pointer; background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(255,255,255,.02) 8px 16px)}
.pt-up b{display:block; font-size:.95rem}
.pt-up small{color:rgba(255,255,255,.5); font-size:.82rem}
.pt-up.is-on{box-shadow:inset 0 0 0 1px var(--base)}
.pt-up.is-on small{color:#8FD3C2}
.pt-act{padding:18px 20px 6px; margin-bottom:12px; background:#0a0a0a; box-shadow:inset 0 0 0 1px rgba(122,90,170,.45)}
.pt-act__h{display:flex; justify-content:space-between; margin-bottom:14px}
.pt-act .opts{margin-bottom:14px}
.pt-empty-s{color:rgba(255,255,255,.5)}
.pt-check{display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--line)}
.pt-check span{width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:rgba(255,138,122,.18); color:#FF8A7A; font-weight:900}
.pt-check.is-done span{background:var(--base); color:#fff}
.pt-check small{display:block; color:rgba(255,255,255,.5); font-size:.85rem}
.pt-empty{padding:60px 0}
.pa-login{max-width:420px; padding:30px 0}
.pa-login h2{margin:8px 0 22px; font-size:2.4rem}
.pa-kpi{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line)}
.pa-kpi div{background:var(--ink); padding:20px 22px}
.pa-kpi b{display:block; font-weight:900; font-size:2.2rem; letter-spacing:-.04em}
.pa-kpi span{font-size:.85rem; color:rgba(255,255,255,.55)}
.pa-bar{display:flex; flex-wrap:wrap; gap:14px; align-items:end; margin:26px 0 8px}
.pa-bar .inp{width:auto; min-width:180px; font-size:.95rem}
.pa-table tbody tr{cursor:pointer}
.pa-table tbody tr:hover{background:#0c0c0c}
.pa-table td b{display:block}
.pa-table td small{color:rgba(255,255,255,.45); font-size:.8rem}
.pa-prog{display:flex; align-items:center; gap:10px; min-width:140px}
.pa-prog span{font-size:.85rem; color:rgba(255,255,255,.6)}
.pa-type{display:inline-block; padding:.3em .8em; border-radius:999px; font-size:.75rem; font-weight:700; background:rgba(58,110,100,.25); color:#8FD3C2}
.pa-type--e{background:rgba(122,90,170,.25); color:#c2a8ec}
.pa-types{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px}
.pa-types .copt > span{display:block}
.pa-types .copt.is-on > span,.pa-types button.is-on{box-shadow:inset 0 0 0 2px var(--base); background:rgba(58,110,100,.2)}
.pa-types button{text-align:left; padding:0}
.pa-types button > span{display:block; padding:18px 20px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.pa-types b{display:block; font-weight:900; font-size:1.3rem}
.pa-types small{color:rgba(255,255,255,.6); font-size:.9rem}
.pa-link{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:18px 0; padding:12px 16px; background:#0a0a0a; box-shadow:inset 0 0 0 1px var(--line)}
.pa-link small{color:rgba(255,255,255,.5); font-size:.82rem}
.pa-link code{color:#8FD3C2; font-size:.9rem; word-break:break-all}
.pa-dhead{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-top:18px}
.pa-dhead .pt-title{margin-top:12px}
.pa-dbtns{display:flex; gap:10px; flex-wrap:wrap}
.pa-steps{list-style:none; margin:10px 0 24px; padding:0; display:grid; grid-template-columns:repeat(8,1fr); gap:6px}
.pa-steps li{padding:10px 8px; font-size:.78rem; color:rgba(255,255,255,.5); box-shadow:inset 0 0 0 1px var(--line); line-height:1.3}
.pa-steps span{display:block; font-weight:900; font-size:.95rem; margin-bottom:4px}
.pa-steps li.is-done{color:#fff; box-shadow:inset 0 0 0 1px var(--base); background:rgba(58,110,100,.15)}
.pa-steps li.is-done span{color:#8FD3C2}
.pa-tab{margin-top:20px}
.pa-two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,50px)}
.pa-two .pt-h3{margin-top:0}
.pa-status{display:grid; gap:5px; margin-top:14px}
.pa-status button{text-align:left; padding:9px 12px; font-size:.92rem; box-shadow:inset 0 0 0 1px var(--line); color:rgba(255,255,255,.6)}
.pa-status button.is-on{box-shadow:inset 0 0 0 1px var(--base); background:rgba(58,110,100,.2); color:#fff}
.pa-sec{padding:6px 0 18px; border-bottom:1px solid var(--line)}
.pa-sec .pt-h3{font-size:1.15rem; margin-top:18px}
.pa-note{padding:12px 16px; margin-top:8px; background:#0a0a0a; box-shadow:inset 0 0 0 1px var(--line); font-size:.95rem}
.pa-doc{padding:22px; background:#0a0a0a; box-shadow:inset 0 0 0 1px var(--line)}
.pa-doc .btn{margin-top:16px}
.pa-modal{position:fixed; inset:0; z-index:130; background:rgba(0,0,0,.85); overflow-y:auto; padding:40px 20px}
.pa-modal[hidden]{display:none}
.pa-pdf{max-width:720px; margin:0 auto; background:#fff; color:#111; padding:32px}
.pa-pdf header{border-bottom:3px solid var(--base); padding-bottom:12px; margin-bottom:18px}
.pa-pdf header small{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#666}
.pa-pdf h3{margin:6px 0 4px; font-size:1.6rem; color:#111}
.pa-pdf header p{margin:0; color:#555; font-size:.92rem}
.pa-pdf__grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.pa-pdf section{background:#f5f3ef; padding:12px 14px}
.pa-pdf h4{margin:0 0 8px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--base)}
.pa-pdf section div{display:flex; justify-content:space-between; gap:12px; padding:4px 0; border-bottom:1px solid #e6e2da; font-size:.86rem}
.pa-pdf section div span{color:#666}
.pa-pdf em{color:#aaa; font-weight:400}
.pa-pdf__btns{display:flex; gap:10px; margin-top:20px}
.pa-pdf__btns .btn--ghost{color:#111; box-shadow:inset 0 0 0 1px #ccc}
@media (max-width:900px){ .pa-kpi{grid-template-columns:1fr 1fr} .pa-steps{grid-template-columns:repeat(4,1fr)} .pa-two,.pt-shows,.pa-types,.pa-pdf__grid{grid-template-columns:1fr} }
@media (max-width:560px){ .pt-grid{grid-template-columns:1fr} .pt-show{grid-template-columns:90px 1fr} }
@media print{ body.print-pdf *{visibility:hidden} body.print-pdf .pa-modal,body.print-pdf .pa-modal *{visibility:visible} body.print-pdf .pa-modal{position:absolute; inset:0; background:#fff; padding:0} body.print-pdf .pa-pdf__btns{display:none} }

/* ---------- logo's zichtbaar op donker ---------- */
.logos-sl img{filter:brightness(0) invert(1); opacity:.6}
.cases .logos-sl img,.sand .logos-sl img{filter:grayscale(1) brightness(0); opacity:.55}
.clients{border-top-color:var(--line)}
.cases .clients{border-top-color:var(--line-dark)}

/* ---------- reviews: rustige carrousel ---------- */
.quotes{display:flex !important; gap:clamp(12px,1.6vw,22px); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; cursor:grab; padding-bottom:4px}
.quotes::-webkit-scrollbar{display:none}
.quotes .review{flex:0 0 clamp(290px,31vw,440px); scroll-snap-align:start}
.qctl{display:flex; align-items:center; gap:18px; margin-top:24px}
.qctl button{width:48px; height:48px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); display:grid; place-items:center; font-size:1.2rem; transition:.25s}
.qctl button:hover:not(:disabled){background:var(--paper); color:var(--ink)}
.qctl button:disabled{opacity:.3; cursor:default}
.qctl__bar{flex:1; max-width:320px; height:2px; background:rgba(255,255,255,.15)}
.qctl__bar i{display:block; height:100%; width:0; background:var(--base); transition:width .3s}
.sand .qctl button{box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}

/* ---------- cases-overzicht ---------- */
.clist{display:grid; gap:clamp(50px,9vh,110px); margin-top:clamp(30px,5vh,50px)}
.clist [hidden],.ctiles [hidden]{display:none !important}
.cbig{position:relative; display:block; min-height:clamp(420px,72vh,760px); overflow:hidden; isolation:isolate; color:var(--paper)}
.cbig img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.cbig::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(0,0,0,.05) 35%,rgba(0,0,0,.82) 100%)}
.cbig:hover img{transform:scale(1.04)}
.cbig__in{position:absolute; left:0; right:0; bottom:0; padding:clamp(24px,4vw,56px)}
.cbig small,.crow small,.ctile small{font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:#63A596; font-weight:700}
.cbig h3{margin-top:10px; font-size:clamp(2.4rem,6vw,5.4rem); line-height:.95; max-width:14ch}
.cbig p{margin:14px 0 0; max-width:50ch; font-size:1.1rem; color:rgba(255,255,255,.82)}
.cbig .lnk,.crow .lnk{margin-top:18px}
.crow{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:center}
.crow:nth-child(odd){grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
.crow:nth-child(odd) .crow__img{order:2}
.crow__img{overflow:hidden; aspect-ratio:16/11; background:#0d0d0d}
.crow__img img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.crow:hover .crow__img img{transform:scale(1.04)}
.crow h3{margin-top:10px; font-size:clamp(2rem,3.6vw,3.4rem); line-height:1}
.crow p{margin:14px 0 0; color:rgba(255,255,255,.72); font-size:1.05rem; max-width:44ch}
.crow .crow__did{font-size:.9rem; color:rgba(255,255,255,.45)}
.ctiles{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,18px); margin-top:clamp(24px,4vh,40px)}
.ctile{position:relative; aspect-ratio:3/4; overflow:hidden; isolation:isolate; background:#0d0d0d}
.ctile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.ctile::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.85))}
.ctile:hover img{transform:scale(1.05)}
.ctile span{position:absolute; left:0; right:0; bottom:0; padding:18px}
.ctile b{display:block; margin-top:6px; font-weight:900; font-size:1.3rem; line-height:1.05; text-transform:lowercase}
@media (max-width:900px){ .crow,.crow:nth-child(odd){grid-template-columns:1fr} .crow:nth-child(odd) .crow__img{order:0} .ctiles{grid-template-columns:1fr 1fr} }

/* ============================================================
   Opschoonronde: rustiger, meer foto, minder UI-kit
   ============================================================ */
.hero__vid img{animation:none}
.intro-plain{padding-bottom:clamp(20px,4vh,50px)}
.intro-plain .intro h2{font-size:clamp(1.6rem,3vw,2.7rem); max-width:20ch}

.vcard,.vcard:hover,.sand .vcard,.sand .vcard:hover{background:none; box-shadow:none}
.vcard__body{padding:16px 0 0}
.vcard__img img{filter:none}
.vcard__img::after{background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.7) 100%)}
.vcard:hover .vcard__img img{transform:scale(1.03); transition:transform 1s cubic-bezier(.2,.8,.2,1)}

.story{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(26px,4vh,48px) clamp(14px,2vw,28px); margin-top:clamp(30px,5vh,56px)}
.story figure{margin:0}
.story figure:nth-child(4n+1){grid-column:1 / span 7}
.story figure:nth-child(4n+2){grid-column:8 / span 5; margin-top:clamp(40px,10vh,120px)}
.story figure:nth-child(4n+3){grid-column:2 / span 5}
.story figure:nth-child(4n){grid-column:7 / span 6; margin-top:clamp(30px,8vh,90px)}
.story__img{overflow:hidden; aspect-ratio:4/3; background:#0d0d0d}
.story figure:nth-child(4n+2) .story__img,.story figure:nth-child(4n+3) .story__img{aspect-ratio:4/5}
.story__img img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.story figure:hover .story__img img{transform:scale(1.03)}
.story figcaption{margin-top:14px; max-width:46ch}
.story figcaption h3{font-size:clamp(1.25rem,1.8vw,1.6rem)}
.story figcaption p{margin:6px 0 0; font-size:.98rem; color:rgba(255,255,255,.66)}
.story figcaption .lnk{margin-top:10px}
.sand .story figcaption p{color:rgba(0,0,0,.66)}
@media (max-width:760px){ .story figure{grid-column:1 / -1 !important; margin-top:0 !important} .story__img{aspect-ratio:4/3 !important} }

.semnote{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,80px); align-items:center}
.semnote__img{margin:0; overflow:hidden; aspect-ratio:4/3}
.semnote__img img{width:100%; height:100%; object-fit:cover}
.semnote__q{margin:0; font-weight:900; font-size:clamp(1.5rem,2.8vw,2.5rem); letter-spacing:-.03em; line-height:1.08}
.semnote__txt .muted{margin:22px 0 0; font-size:1.05rem; max-width:52ch}
.semnote__sig{margin:22px 0 0}
.semnote__sig b{display:block; font-weight:900}
.semnote__sig span{font-size:.9rem; color:rgba(255,255,255,.55)}
@media (max-width:900px){ .semnote{grid-template-columns:1fr} }

.pillars small{letter-spacing:.14em}
.route__meta span:empty{display:none}
.cshow__btn{grid-template-columns:1fr 64px}
/* ============================================================
   Homepage v4: minimalistisch, veel beeld, weinig woorden
   ============================================================ */
#h3{--r:28px; --soft:rgba(255,255,255,.62); overflow:hidden}
.h3eye{display:inline-flex; align-items:center; gap:10px; margin:0; font-size:.8rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.7)}
.h3eye i{width:7px; height:7px; border-radius:50%; background:#8FD3C2; box-shadow:0 0 12px #8FD3C2}
.h3eye--ink{color:rgba(0,0,0,.6)} .h3eye--ink i{background:var(--base); box-shadow:none}
.h3small{margin:0; text-align:center; font-size:.85rem; color:rgba(255,255,255,.45); letter-spacing:.02em}

.h3hero{min-height:100svh; display:grid; place-items:center; text-align:center; padding:140px var(--pad,24px) 60px}
.h3hero__in{display:flex; flex-direction:column; align-items:center}
.h3title,.mcb-column.h3title .title{margin:22px 0 0; font-weight:900; text-transform:lowercase; font-size:clamp(4.2rem,14.5vw,14rem); line-height:.84; letter-spacing:-.06em}
.h3l{display:block; overflow:hidden; padding:0 .04em .06em}
.h3l > span{display:inline-block}
.h3lead,.mcb-column.h3lead .column_attr{margin:30px auto 0; max-width:40ch; font-size:clamp(1.05rem,1.35vw,1.3rem); line-height:1.5; color:var(--soft)}
.h3cta{display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; margin-top:38px}
.h3btn,.mcb-column.h3btn .button{display:inline-flex; align-items:center; padding:1.05em 1.9em; border-radius:999px; background:var(--paper); color:var(--ink); font-weight:800; font-size:1.05rem; transition:transform .35s cubic-bezier(.2,.8,.2,1), background-color .3s}
.h3btn:hover,.mcb-column.h3btn .button:hover{transform:translateY(-2px) scale(1.02); background:#EAE5DB}
.h3who{display:inline-flex; align-items:center; gap:14px; font-weight:700; font-size:1rem}
.h3who__av{position:relative; width:56px; height:56px; border-radius:50%; overflow:hidden; box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.h3who__av img{width:100%; height:100%; object-fit:cover; object-position:60% 30%}
.h3who__av i{position:absolute; inset:0; margin:auto; width:0; height:0; border-left:11px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent; transform:translateX(2px); filter:drop-shadow(0 1px 4px rgba(0,0,0,.6))}
.h3who:hover span:last-child{text-decoration:underline; text-underline-offset:4px}

.h3media{padding:0 clamp(12px,3vw,40px)}
.h3media__in{position:relative; max-width:1600px; margin:0 auto; aspect-ratio:16/9; max-height:88vh; border-radius:var(--r); overflow:hidden; background:#0d0d0d; transform-origin:50% 0}
.h3media video{width:100%; height:100%; object-fit:cover; display:block}
.h3pill{display:inline-flex; align-items:center; padding:.75em 1.35em; border-radius:999px; font-size:clamp(.95rem,1.1vw,1.1rem); font-weight:700; color:#fff; background:rgba(20,20,20,.38); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.h3pill--abs{position:absolute; left:clamp(16px,2.4vw,34px); bottom:clamp(16px,2.4vw,34px)}

.h3logos{padding:clamp(70px,12vh,130px) clamp(16px,4vw,60px) 0}
.h3logos__vp{margin-top:34px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.h3logos__track{display:flex; width:max-content; animation:h3slide 42s linear infinite}
.h3logos__vp:hover .h3logos__track{animation-play-state:paused}
.h3logos__set{display:flex; align-items:center; gap:clamp(48px,6vw,96px); padding-right:clamp(48px,6vw,96px)}
.h3logos__set img{height:calc(clamp(26px,2.6vw,38px) * var(--s,1)); width:auto; max-width:180px; object-fit:contain; flex:none; filter:brightness(0) invert(1); opacity:.6; transition:opacity .3s}
.h3logos__set img:hover{opacity:1}
.lgtxt{flex:none; font-weight:900; font-size:clamp(1.05rem,1.5vw,1.4rem); letter-spacing:-.02em; color:rgba(255,255,255,.55); white-space:nowrap}
.cases .lgtxt,.sand .lgtxt{color:rgba(0,0,0,.5)}
@keyframes h3slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .h3logos__track{animation:none; flex-wrap:wrap; justify-content:center; width:auto} .h3logos__set[aria-hidden]{display:none} }
.h3why{padding:clamp(120px,20vh,220px) clamp(20px,4vw,60px) 0; text-align:center}
.h3big,.mcb-column.h3big .title{margin:22px auto 0; max-width:16ch; font-weight:900; text-transform:lowercase; font-size:clamp(2.6rem,6.6vw,6.4rem); line-height:.92; letter-spacing:-.05em}
.h3big--ink,.mcb-column.h3big--ink .title{color:var(--ink)}
.h3big .w,.mcb-column.h3big .title .w{opacity:.16}
.h3text,.mcb-column.h3text .column_attr{margin:30px auto 0; max-width:46ch; font-size:clamp(1.05rem,1.3vw,1.25rem); line-height:1.55; color:var(--soft)}
.h3fan{position:relative; height:clamp(320px,40vw,520px); margin:clamp(50px,9vh,100px) auto clamp(60px,10vh,120px); max-width:1500px}
.h3fan__c{--w:clamp(140px,15.5vw,250px); position:absolute; left:50%; bottom:0; width:var(--w); aspect-ratio:3/4.3; margin:0 0 0 calc(var(--w) / -2); border-radius:22px; overflow:hidden; background:#111; box-shadow:0 30px 60px rgba(0,0,0,.55);
  transform:translateX(calc(var(--i) * var(--w) * .82)) translateY(calc(var(--i) * var(--i) * 9px)) rotate(calc(var(--i) * 7deg)); transform-origin:50% 120%; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.h3fan__c img{width:100%; height:100%; object-fit:cover}
.h3fan__c:hover{z-index:5}

.h3stats{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; max-width:1300px; margin:0 auto; padding:clamp(110px,18vh,200px) clamp(20px,4vw,60px) 0; text-align:center}
.h3stats b{display:block; font-weight:900; font-size:clamp(3.2rem,8vw,7.4rem); letter-spacing:-.06em; line-height:.9; color:#EAE5DB}
.h3stats span{display:block; margin-top:14px; font-size:.98rem; color:rgba(255,255,255,.5)}

.h3how{padding:clamp(130px,22vh,240px) clamp(20px,4vw,60px) clamp(110px,18vh,200px); text-align:center}
.h3steps{list-style:none; margin:30px 0 0; padding:0}
.h3steps li{padding:clamp(14px,2.6vh,26px) 0}
.h3steps b{display:block; font-weight:900; font-size:clamp(2.6rem,6.2vw,5.8rem); line-height:1; letter-spacing:-.05em; opacity:.14; transition:opacity .5s}
.h3steps span{display:block; margin-top:12px; font-size:clamp(.95rem,1.2vw,1.15rem); color:var(--soft); opacity:0; transform:translateY(8px); transition:opacity .5s, transform .5s}
.h3steps li.is-on b{opacity:1}
.h3steps li.is-on span{opacity:1; transform:none}
.h3link{display:inline-flex; align-items:center; gap:10px; margin-top:40px; font-weight:700; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:4px; transition:border-color .3s}
.h3link::after{content:"\2192"; transition:transform .3s}
.h3link:hover{border-color:#fff} .h3link:hover::after{transform:translateX(4px)}

.h3what{background:#EAE5DB; color:var(--ink); padding:clamp(100px,16vh,180px) clamp(14px,3vw,40px)}
.h3what__head{text-align:center; margin-bottom:clamp(50px,8vh,90px)}
.h3tiles{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,24px); max-width:1500px; margin:0 auto}
.h3tile{position:relative; display:block; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; background:#cfc9bd; isolation:isolate}
.h3tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; transform:scale(1.04); transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.h3tile:hover img{transform:scale(1.1)}
.h3tile .h3pill{position:absolute; left:clamp(16px,2.4vw,34px); bottom:clamp(16px,2.4vw,34px); transition:background-color .3s}
.h3tile:hover .h3pill{background:rgba(255,255,255,.92); color:var(--ink)}

.h3work{padding:clamp(110px,18vh,200px) clamp(14px,3vw,40px) 0}
.h3work__head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; max-width:1500px; margin:0 auto clamp(40px,6vh,60px)}
.h3work__head .h3big,.h3work__head .mcb-column.h3big .title{margin-left:0; text-align:left}
.h3work__head .h3link{margin:0}
.h3cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,24px); max-width:1500px; margin:0 auto}
.h3card{position:relative; aspect-ratio:3/4.2; border-radius:var(--r); overflow:hidden; isolation:isolate; background:#111}
.h3card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.h3card::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55))}
.h3card:hover img{transform:scale(1.06)}
.h3card .h3pill{position:absolute; left:18px; right:auto; bottom:18px; max-width:calc(100% - 36px)}
.h3card__meta{position:absolute; left:20px; top:18px; font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.85); text-shadow:0 1px 8px rgba(0,0,0,.5)}

.h3rev{padding:clamp(130px,22vh,240px) clamp(20px,4vw,60px) 0; text-align:center}
.h3rev__stage{position:relative; max-width:980px; margin:34px auto 0; min-height:clamp(260px,30vw,330px)}
.h3rev__q{position:absolute; inset:0; margin:0; opacity:0; transform:translateY(16px); transition:opacity .8s, transform .9s cubic-bezier(.2,.8,.2,1); pointer-events:none}
.h3rev__q.is-on{opacity:1; transform:none; pointer-events:auto}
.h3rev__q blockquote{margin:0; font-weight:800; font-size:clamp(1.35rem,2.6vw,2.3rem); line-height:1.22; letter-spacing:-.025em}
.h3rev__q figcaption{margin-top:26px; font-size:.95rem; color:rgba(255,255,255,.5)}
.h3rev__q figcaption b{color:#fff; margin-right:10px}
.h3rev__dots{display:flex; justify-content:center; gap:10px; margin-top:24px}
.h3rev__dots button{width:34px; height:4px; border-radius:4px; background:rgba(255,255,255,.18); transition:background-color .3s, width .3s}
.h3rev__dots button.is-on{background:#8FD3C2; width:54px}

.h3end{padding:clamp(140px,24vh,260px) clamp(20px,4vw,60px) clamp(120px,20vh,200px); text-align:center}
.h3title--end,.mcb-column.h3title--end .title{font-size:clamp(3.8rem,12vw,11.5rem)}
.h3contact{display:flex; justify-content:center; flex-wrap:wrap; gap:12px 30px; margin:34px 0 0; font-size:.95rem; color:rgba(255,255,255,.55)}
.h3contact a:hover{color:#fff}

@media (max-width:760px){
  .h3tiles,.h3cards{grid-template-columns:1fr}
  .h3cards{grid-auto-flow:column; grid-auto-columns:78%; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none}
  .h3card{scroll-snap-align:start}
  .h3stats{grid-template-columns:1fr; gap:50px}
  .h3media__in{aspect-ratio:4/5}
  .h3fan__c{--w:clamp(120px,30vw,180px)}
}

/* ---------- zwevende knoppen (alle pagina's) ---------- */
.fcta{position:fixed; left:50%; bottom:22px; z-index:90; white-space:nowrap; transform:translate(-50%,140%); padding:1em 1.9em; border-radius:999px; font-weight:800; font-size:1rem; color:#fff;
  background:rgba(22,22,22,.55); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 12px 40px rgba(0,0,0,.45); transition:transform .5s cubic-bezier(.2,.8,.2,1), background-color .3s}
.fcta.show{transform:translate(-50%,0)}
.fcta:hover{background:rgba(58,110,100,.85)}
.fwa{position:fixed; right:22px; bottom:22px; z-index:90; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; color:#fff; background:#25D366; box-shadow:0 10px 30px rgba(37,211,102,.35); transition:transform .3s}
.fwa:hover{transform:scale(1.07)}
.fwa svg{width:30px; height:30px}
.no-float .fcta,.no-float .fwa{display:none}
@media (max-width:560px){ .fcta{bottom:16px; font-size:.95rem} .fwa{right:14px; bottom:14px; width:52px; height:52px} }

/* ---------- ronde hoeken op beeld, door de hele site ---------- */
.vcard__img,.story__img,.crow__img,.cbig,.gallery figure,.choice__card,.cshow__stage,.ctile,.team__big,.semnote__img,.case__shot,.split__shot,.pcard__img,.shop__card,.djcard,.route--img,.panel__img,.end__bg ~ .wrap:not(.mcb-wrap) .route{border-radius:22px; overflow:hidden}
.hero--mid .hero__media{border-radius:0}

/* ---------- lopende tekst en woord-maskers ---------- */
.h3marq{padding:clamp(110px,18vh,200px) 0 0; overflow:hidden; white-space:nowrap}
.h3marq__row{display:inline-block; font-weight:900; text-transform:lowercase; font-size:clamp(4rem,11vw,11rem); line-height:1; letter-spacing:-.05em; color:#EAE5DB; padding-left:4vw}
.h3marq__row--o{display:block; color:transparent; -webkit-text-stroke:1.5px rgba(234,229,219,.45); margin-top:.05em}
.mw{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em; margin-bottom:-.06em}
.mw > span{display:inline-block}
.h3link{font-size:1rem}
/* mobiel: lopende tekst rustig via CSS, geen scroll-koppeling */
.is-mob .h3marq__row{animation:h3slide 40s linear infinite}
.is-mob .h3marq__row--o{animation-direction:reverse}
.is-mob .h3fan{height:clamp(260px,72vw,340px)}
/* ============================================================
   Subpagina's in de stijl van de homepage
   ============================================================ */
.h3hero--sub{min-height:auto; padding:clamp(150px,22vh,220px) clamp(20px,4vw,60px) clamp(60px,9vh,100px)}
.h3title--sub,.mcb-column.h3title--sub .title{font-size:clamp(3.2rem,10.5vw,10rem)}
.h3hero--mid{padding-bottom:clamp(30px,5vh,50px)}
.h3hero--mid .h3title--sub,.h3hero--mid .mcb-column.h3title--sub .title{font-size:clamp(2.8rem,8vw,7.4rem)}
.h3portrait{width:clamp(160px,16vw,220px); aspect-ratio:3/4; margin:0 auto 30px; border-radius:24px; overflow:hidden; transform:rotate(-4deg); background:#151515; box-shadow:0 30px 60px rgba(0,0,0,.5)}
.h3portrait img{width:100%; height:100%; object-fit:cover}
.h3media__in--img img{width:100%; height:100%; object-fit:cover; display:block}
.h3sub .h3media__in{aspect-ratio:16/8}
.h3why--sub{padding:clamp(100px,16vh,180px) clamp(20px,4vw,60px) clamp(30px,5vh,60px)}
.h3why--sub .h3big,.h3why--sub .mcb-column.h3big .title{font-size:clamp(2.1rem,4.8vw,4.6rem); max-width:22ch}
.h3why--sub .h3link{margin-top:30px}
.h3end--sub{padding-top:clamp(120px,20vh,220px)}

/* koppen gecentreerd, ruimer, groter */
.h3sub .pad{padding-top:clamp(90px,14vh,160px); padding-bottom:clamp(40px,6vh,70px)}
.h3sub .sand.pad,.h3sub .cases.pad{padding-bottom:clamp(90px,14vh,160px)}
.h3sub .sec-head{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px}
.h3sub .sec-head .lede{margin:0 auto; max-width:46ch}
.h3sub .pad > .wrap:not(.mcb-wrap) > h2.rv,.h3sub .pad.wrap:not(.mcb-wrap) > h2.rv,.h3sub .sec-head h2,.h3sub .cases h2.rv{text-align:center; font-size:clamp(2.3rem,5.4vw,5rem); line-height:.94; letter-spacing:-.05em}
.h3sub .pad > .wrap:not(.mcb-wrap) > .lede,.h3sub .pad.wrap:not(.mcb-wrap) > .lede,.h3sub .cases .lede{text-align:center; margin-left:auto; margin-right:auto; max-width:46ch}
.h3sub .filters{justify-content:center}

/* beeldkaarten als tegels met glazen label */
.h3sub .vcard__img{border-radius:28px; aspect-ratio:4/3}
.h3sub .vcard__img::after{display:none}
.h3sub .vcard__img h3{position:absolute; left:16px; bottom:16px; right:auto; top:auto; margin:0; padding:.7em 1.3em; border-radius:999px; font-size:clamp(.95rem,1.1vw,1.08rem); font-weight:700; letter-spacing:0; color:#fff;
  background:rgba(20,20,20,.38); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.h3sub .vcard:hover .vcard__img h3{background:rgba(255,255,255,.92); color:var(--ink)}
.h3sub .vcard__body{padding:16px 6px 0}
.h3sub .vcard__body p{font-size:.98rem; color:rgba(255,255,255,.6)}
.h3sub .sand .vcard__body p{color:rgba(0,0,0,.6)}
.h3sub .vcards--5 .vcard__img{aspect-ratio:3/4}
.h3sub .vcards{gap:clamp(14px,1.8vw,26px)}

/* stappen als grote woorden die oplichten */
.h3sub .steps{display:block; max-width:980px; margin:clamp(30px,5vh,50px) auto 0; text-align:center; border:0}
.h3sub .steps li{display:block; padding:clamp(14px,2.6vh,26px) 0; border:0}
.h3sub .steps__n{display:block; font-size:.8rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--base); margin-bottom:8px}
.h3sub .steps h3{font-size:clamp(2rem,5.6vw,4.8rem); line-height:.92; letter-spacing:-.05em; opacity:.16; transition:opacity .5s}
.h3sub .steps p{max-width:46ch; margin:12px auto 0; opacity:0; transform:translateY(8px); transition:opacity .5s, transform .5s}
.h3sub .steps li.is-on h3{opacity:1}
.h3sub .steps li.is-on p{opacity:1; transform:none}
.h3sub .steps + .btn,.h3sub .steps ~ .btn{display:flex; width:max-content; margin:34px auto 0}

/* overige blokken rustiger */
.h3sub .faq{max-width:900px; margin-left:auto; margin-right:auto}
.h3sub .faq + *,.h3sub .pad > .wrap:not(.mcb-wrap) > .faq{margin-top:30px}
.h3sub .choice__card{border-radius:28px; min-height:clamp(360px,50vh,520px)}
.h3sub .story__img,.h3sub .crow__img,.h3sub .cbig,.h3sub .ctile,.h3sub .gallery figure,.h3sub .case__shot{border-radius:28px}
.h3sub .case{border-top:0}
.h3sub .intro{gap:clamp(20px,4vw,60px)}
.h3sub .quotes + .qctl{justify-content:center}
.h3sub .concept + .h3hero--sub{padding-top:clamp(70px,10vh,110px)}
@media (max-width:760px){ .h3sub .h3media__in{aspect-ratio:4/5} }
.h3cta .h3link{margin-top:0; font-size:1rem}

/* ---------- verhuurlijst ---------- */
.shop--full{grid-template-columns:repeat(4,1fr)}
.shop__img--prod{background:#fff; aspect-ratio:1/1; display:grid; place-items:center}
.shop__img--prod img{width:100%; height:100%; object-fit:contain; filter:none}
.shop__card{border-radius:22px; overflow:hidden}
.shop__model{margin:2px 0 0 !important; font-size:.82rem !important; color:rgba(255,255,255,.45) !important}
.shop__foot{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:auto; padding-top:16px}
.shop__foot .shop__add{margin-top:0}
.shop__price{font-weight:900; font-size:1.15rem; letter-spacing:-.02em}
.shop__price em{font-style:normal; font-weight:400; font-size:.72rem; color:rgba(255,255,255,.45); margin-left:4px}
.rentcats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-bottom:clamp(40px,6vh,60px); border-radius:22px; overflow:hidden}
.rentcats article{background:#0a0a0a; padding:22px 24px}
.rentcats b{display:block; font-weight:900; font-size:1.15rem}
.rentcats p{margin:6px 0 0; font-size:.92rem; color:rgba(255,255,255,.55)}
.shop--strip{grid-template-columns:repeat(3,1fr); max-width:1100px; margin-left:auto; margin-right:auto}
.shopmini{text-align:center; margin:26px 0 0; color:rgba(255,255,255,.7)}
@media (max-width:1100px){ .shop--full{grid-template-columns:repeat(3,1fr)} .shop--strip{grid-template-columns:repeat(3,1fr)} .rentcats{grid-template-columns:1fr 1fr} }
@media (max-width:700px){ .shop--full,.shop--strip{grid-template-columns:1fr 1fr} .rentcats{grid-template-columns:1fr} .shop__foot{flex-direction:column; align-items:flex-start} }

/* ---------- team ---------- */
.people{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(16px,3vw,40px); margin-top:clamp(36px,6vh,60px); text-align:center}
.person{margin:0}
.person__img{width:min(100%,190px); aspect-ratio:1; margin:0 auto; border-radius:50%; overflow:hidden; background:#fff; transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.person:hover .person__img{transform:scale(1.05) rotate(-2deg)}
.person__img img{width:100%; height:100%; object-fit:cover}
.person figcaption{margin-top:16px}
.person b{display:block; font-weight:900; font-size:1.1rem}
.person span{font-size:.92rem; color:rgba(255,255,255,.55)}
@media (max-width:900px){ .people{grid-template-columns:repeat(3,1fr); row-gap:36px} }
@media (max-width:520px){ .people{grid-template-columns:1fr 1fr} }

/* ---------- slogan onderaan ---------- */
.slogan{overflow:hidden; background:var(--base); color:#fff; padding:clamp(14px,2.2vh,22px) 0; white-space:nowrap}
.slogan__track{display:inline-flex; animation:h3slide 30s linear infinite}
.slogan__track span{font-weight:900; font-size:clamp(1.3rem,2.6vw,2.4rem); letter-spacing:-.02em; padding-right:clamp(30px,4vw,60px)}
.slogan__track span::after{content:"\25C6"; font-size:.5em; margin-left:clamp(30px,4vw,60px); vertical-align:middle; opacity:.6}
html.is-scan .slogan{display:none}
@media (prefers-reduced-motion:reduce){ .slogan__track{animation:none} }
.case__shot--sem{background:#fff; aspect-ratio:4/5 !important; max-height:78vh}
.case__shot--sem img{object-fit:cover; object-position:50% 15%}

/* ---------- uitgelichte reeksen als rustige slider met gelijke kaarten ---------- */
.story--slider{display:flex !important; gap:clamp(14px,1.6vw,22px); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; cursor:grab; padding-bottom:6px; margin-top:clamp(30px,5vh,50px)}
.story--slider::-webkit-scrollbar{display:none}
.story--slider.is-drag{cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto}
.story--slider figure{flex:0 0 clamp(250px,24vw,340px); grid-column:auto !important; margin:0 !important; scroll-snap-align:start; user-select:none}
.story--slider .story__img,.story--slider figure:nth-child(n) .story__img{aspect-ratio:4/5 !important; border-radius:24px}
.story--slider .story__img--prod,.story--slider figure:nth-child(n) .story__img--prod{aspect-ratio:1/1 !important; background:#fff}
.story__img--prod img{object-fit:contain}
.story--slider img{pointer-events:none}
.story--slider figcaption{max-width:none; padding:0 4px}
.story--slider figcaption h3{font-size:1.25rem}
.story--slider + .qctl{justify-content:center}
.inhuis__more{text-align:center; margin:-10px 0 0}
.choice--3{grid-template-columns:repeat(3,1fr)}
.choice--3 .choice__card{min-height:clamp(380px,58vh,560px)}
@media (max-width:900px){ .choice--3{grid-template-columns:1fr} }

/* ---------- strak mobiel menu ---------- */
.menu{display:flex; flex-direction:column; padding:clamp(86px,12vh,110px) clamp(20px,6vw,32px) 28px}
.menu .menu-list{display:block; border-top:1px solid rgba(255,255,255,.12)}
.menu .menu-list > li{margin:0; border-bottom:1px solid rgba(255,255,255,.12)}
.menu .menu-list > li > a{display:flex; justify-content:space-between; align-items:center; padding:18px 2px; font-size:clamp(1.5rem,6.4vw,2rem); font-weight:900; letter-spacing:-.035em; text-transform:lowercase; line-height:1}
.menu .menu-list > li.has-sub > a::after{content:""; width:12px; height:12px; border-right:2px solid rgba(255,255,255,.7); border-bottom:2px solid rgba(255,255,255,.7); transform:rotate(45deg) translate(-3px,-3px); transition:transform .3s}
.menu .menu-list > li.is-open > a::after{transform:rotate(-135deg) translate(-3px,-3px)}
.menu .menu-list > li > a[aria-current],.menu .menu-list > li > a.is-current{color:#8FD3C2}
.menu .sub-menu{display:grid; grid-template-rows:0fr; margin:0; padding:0; gap:0; transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1)}
.menu .sub-menu > *{min-height:0}
.menu .sub-menu{display:block; max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.2,.8,.2,1)}
.menu li.is-open > .sub-menu{max-height:420px}
.menu .sub-menu li{border-top:1px solid rgba(255,255,255,.06)}
.menu .sub-menu li:first-child{border-top:0}
.menu .sub-menu a{display:flex; justify-content:space-between; padding:13px 2px 13px 16px; font-size:1.02rem; font-weight:500; opacity:.75}
.menu .sub-menu a::after{content:"\2192"; opacity:.4}
.menu .sub-menu li:last-child a{padding-bottom:18px}
.menu__foot{margin-top:auto; padding-top:28px; display:grid; gap:10px}
.menu__cta{justify-content:center; width:100%}
.menu__wa{display:flex; justify-content:center; align-items:center; padding:1em; border-radius:999px; background:#25D366; color:#fff; font-weight:800}
.menu__meta{display:flex; justify-content:center; gap:18px; margin:8px 0 0; font-size:.9rem; color:rgba(255,255,255,.55)}
.burger span{transition:background-color .2s}
.burger span::before,.burger span::after{transition:transform .35s cubic-bezier(.2,.8,.2,1), top .35s}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}
html:has(.menu.open) .fcta,html:has(.menu.open) .fwa{display:none}
html:has(.menu.open) .hdr{background:#000 !important; backdrop-filter:none}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,24px); margin-top:clamp(40px,7vh,80px)}
.duo figure{margin:0; aspect-ratio:3/2; border-radius:24px; overflow:hidden; background:#0d0d0d}
.duo img{width:100%; height:100%; object-fit:cover}
@media (max-width:700px){ .duo{grid-template-columns:1fr} }
.gallery figure:only-child{grid-column:1 / -1 !important; aspect-ratio:16/10 !important}

/* ---------- tijdlijn over ons ---------- */
.tl__track{position:relative; max-width:1100px; margin:clamp(40px,7vh,80px) auto 0}
.tl__line{position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px; background:rgba(255,255,255,.12); border-radius:2px}
.tl__line i{position:absolute; inset:0; background:#8FD3C2; transform-origin:top; transform:scaleY(0)}
.tl__item{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,8vw,120px); align-items:center; padding:clamp(30px,6vh,60px) 0}
.tl__item:nth-child(odd) .tl__txt{order:2}
.tl__item:nth-child(odd) .tl__img{order:1}
.tl__item:nth-child(even) .tl__txt{text-align:right}
.tl__dot{position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:#000; box-shadow:inset 0 0 0 2px rgba(255,255,255,.3); transition:background-color .4s, box-shadow .4s, transform .4s; z-index:1}
.tl__item.is-on .tl__dot{background:#8FD3C2; box-shadow:0 0 0 6px rgba(143,211,194,.18); transform:scale(1.1)}
.tl__year{display:block; font-weight:900; font-size:clamp(2.2rem,4.6vw,4rem); letter-spacing:-.05em; line-height:1; color:rgba(255,255,255,.18); transition:color .5s}
.tl__item.is-on .tl__year{color:#8FD3C2}
.tl__txt h3{margin-top:10px; font-size:clamp(1.3rem,2vw,1.8rem)}
.tl__txt p{margin:10px 0 0; color:rgba(255,255,255,.62); font-size:1rem; line-height:1.55; max-width:42ch; display:inline-block}
.tl__img{margin:0; aspect-ratio:4/3; border-radius:24px; overflow:hidden; background:#0d0d0d}
.tl__img img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.tl__txt,.tl__img{opacity:0; transform:translateY(24px); transition:opacity .7s, transform .8s cubic-bezier(.2,.8,.2,1)}
.tl__item.is-on .tl__txt,.tl__item.is-on .tl__img{opacity:1; transform:none}
.tl__item.is-on .tl__img img{transform:none}
@media (max-width:760px){
  .tl__line{left:9px}
  .tl__dot{left:9px; top:42px}
  .tl__item{grid-template-columns:1fr; gap:16px; padding:22px 0 22px 40px}
  .tl__item:nth-child(n) .tl__txt{order:1; text-align:left}
  .tl__item:nth-child(n) .tl__img{order:2}
}
@media (prefers-reduced-motion:reduce){ .tl__txt,.tl__img{opacity:1; transform:none} }

/* ---------- stappenplannen als tijdlijn ---------- */
.tl__track--steps{max-width:980px}
.tl__track--steps .tl__item{padding:clamp(18px,3.2vh,34px) 0; align-items:start}
.tl__track--steps .tl__dot{top:clamp(30px,4vh,44px)}
.tl__track--steps .tl__item:nth-child(even) .tl__txt{grid-column:2; order:0; text-align:left}
.tl__track--steps .tl__item:nth-child(odd) .tl__txt{grid-column:1; order:0; text-align:right}
.tl__track--steps .tl__year{font-size:clamp(1.6rem,3vw,2.6rem)}
.tl__track--steps .tl__txt h3{font-size:clamp(1.25rem,1.9vw,1.7rem)}
.sand .tl__line{background:rgba(0,0,0,.12)}
.sand .tl__line i{background:var(--base)}
.sand .tl__dot{background:var(--sand); box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.sand .tl__item.is-on .tl__dot{background:var(--base); box-shadow:0 0 0 6px rgba(58,110,100,.18)}
.sand .tl__year{color:rgba(0,0,0,.15)}
.sand .tl__item.is-on .tl__year{color:var(--base)}
.sand .tl__txt p{color:rgba(0,0,0,.62)}
@media (max-width:760px){
  .tl__track--steps .tl__item:nth-child(n) .tl__txt{grid-column:1; text-align:left}
  .tl__track--steps .tl__dot{top:30px}
}
@media (max-width:760px){ .tl__track--steps .tl__item{padding-left:40px} }
.tl__track--steps + .btn,.tl__track--steps ~ .btn{display:flex; width:max-content; margin:40px auto 0}
.contact2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px); align-items:center; padding-top:clamp(30px,5vh,60px) !important}
.contact2__img{margin:0; aspect-ratio:4/5; border-radius:28px; overflow:hidden; background:#0d0d0d}
.contact2__img img{width:100%; height:100%; object-fit:cover}
.contact2__row{display:block; padding:22px 0; border-bottom:1px solid var(--line); transition:color .25s}
.contact2__row:first-child{border-top:1px solid var(--line)}
.contact2__row small{display:block; font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#63A596}
.contact2__row b{display:block; margin-top:6px; font-weight:900; font-size:clamp(1.4rem,2.6vw,2.2rem); letter-spacing:-.03em; line-height:1.15}
.contact2__row:hover b{color:#8FD3C2}
@media (max-width:860px){ .contact2{grid-template-columns:1fr} .contact2__img{aspect-ratio:4/3} }
.people{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); max-width:1000px; margin-left:auto; margin-right:auto}
@media (max-width:520px){ .people{grid-template-columns:1fr 1fr} }
/* ============================================================
   Aanvraag als rustige scan (naar voorbeeld MR BOOST)
   ============================================================ */
html.is-scan .hdr,html.is-scan .ft2,html.is-scan footer{display:none !important}
.scan{position:relative; min-height:100svh; overflow:hidden}
.scanbg{position:fixed; left:-2vw; bottom:-8vw; z-index:0; font-weight:900; font-size:46vw; line-height:.8; letter-spacing:-.07em; color:rgba(255,255,255,.028); pointer-events:none; user-select:none}
.scanbar{position:fixed; top:0; left:0; right:0; z-index:50; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:22px clamp(18px,3vw,44px); background:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,0))}
.scanback{font-weight:600; font-size:1rem; color:rgba(255,255,255,.85); display:inline-flex; gap:10px; align-items:center}
.scanback:hover{color:#fff}
.scanlogo img{height:clamp(22px,2vw,28px); width:auto; display:block}
.scanwrap{position:relative; z-index:1; max-width:900px; margin:0 auto; padding:clamp(110px,16vh,150px) clamp(20px,4vw,40px) clamp(80px,12vh,120px)}
.wz--scan{display:block}
.wz--scan .wz__main{max-width:none}
.wz__top{display:flex; justify-content:space-between; font-size:.85rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#fff}
.wz__top span:last-child{color:rgba(255,255,255,.55)}
.wz__segs{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px; margin:16px 0 clamp(40px,7vh,70px)}
.wz__segs i{height:3px; border-radius:3px; background:rgba(255,255,255,.14); transition:background-color .5s}
.wz__segs i.on{background:#fff}
.scanwrap .h3eye{color:rgba(255,255,255,.65)}
.wz__q{margin:18px 0 0; font-weight:900; text-transform:lowercase; font-size:clamp(2.8rem,7vw,5.8rem); line-height:.9; letter-spacing:-.055em}
.wz__lead{margin:22px 0 0; max-width:52ch; font-size:clamp(1.02rem,1.25vw,1.2rem); line-height:1.5; color:rgba(255,255,255,.6)}
.wz__alt{margin:28px 0 0; color:rgba(255,255,255,.55)}
.wz__alt a{color:#fff; border-bottom:1px solid rgba(255,255,255,.4)}
.scanwrap .routes{grid-template-columns:1fr 1fr; margin-top:clamp(30px,5vh,46px)}
.scanwrap .route--img{border-radius:22px}

/* formulier */
.wz--scan .wz__panel{margin-top:clamp(30px,5vh,46px); padding:0; background:none; box-shadow:none; border:0}
.wz--scan .fld{margin-bottom:26px}
.wz--scan .fld > label,.wz--scan .fld legend{display:block; margin-bottom:12px; font-size:.78rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.62)}
.wz--scan .req{color:#8FD3C2}
.wz__multi{display:block; margin:-4px 0 14px; font-size:.88rem; color:rgba(255,255,255,.5)}
.wz__multi::before{content:"\2713\2713  "; letter-spacing:-.2em; margin-right:6px; color:rgba(255,255,255,.5)}
.wz--scan .inp{width:100%; background:#111; border:0; border-radius:18px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); padding:19px 20px; font-size:1.1rem; color:#fff; transition:box-shadow .25s}
.wz--scan .inp:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.wz--scan .inp:focus{outline:none; box-shadow:inset 0 0 0 2px var(--base)}
.wz--scan textarea.inp{min-height:130px}
.wz--scan .row2{gap:16px}

/* opties als genummerde kaarten met vinkje */
.wz--scan .opts{display:grid; grid-template-columns:1fr 1fr; gap:14px; counter-reset:o}
.wz--scan .opt{counter-increment:o; display:block}
.wz--scan .opt span{display:flex; align-items:center; gap:16px; width:100%; min-height:78px; padding:16px 20px; border-radius:20px; background:#0f0f0f; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); font-size:1.12rem; font-weight:600; color:#fff; transition:background-color .25s, box-shadow .25s}
.wz--scan .opt span::before{content:counter(o, decimal-leading-zero); flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:11px; background:#1a1a1a; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); font-size:.78rem; font-weight:800; color:rgba(255,255,255,.6)}
.wz--scan .opt span::after{content:""; flex:none; margin-left:auto; width:26px; height:26px; border-radius:8px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.28); background-position:center; background-repeat:no-repeat; transition:.2s}
.wz--scan .opt input[type=radio] + span::after{border-radius:50%}
.wz--scan .opt span:hover{background:#151515; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.wz--scan .opt input:checked + span{background:#0f1a18; color:#fff; font-weight:700; box-shadow:inset 0 0 0 1.5px var(--base)}
.wz--scan .opt input:checked + span::before{background:var(--base); color:#fff}
.wz--scan .opt input:checked + span::after{background-color:#8FD3C2; box-shadow:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:16px}
.wz--scan .fld.is-err .opt span{box-shadow:inset 0 0 0 1px #FF8A7A}
.wz--scan .copt > span{border-radius:20px}

/* navigatie */
.wz--scan .wz__nav{display:flex; justify-content:space-between; align-items:center; margin-top:clamp(30px,5vh,50px); padding-top:0; border:0}
.wz__prev{font-weight:600; color:rgba(255,255,255,.65); font-size:1rem}
.wz__prev:hover{color:#fff}
.wz__next{display:inline-flex; align-items:center; gap:12px; padding:1.15em 2.2em; border-radius:999px; background:#EAE5DB; color:var(--ink); font-weight:900; font-size:1rem; letter-spacing:.1em; text-transform:uppercase; transition:transform .3s cubic-bezier(.2,.8,.2,1), background-color .3s}
.wz__next:hover{background:#fff; transform:translateX(3px)}
.wz--scan .review-list section{border-radius:20px; background:#0f0f0f; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); padding:20px 22px; margin-bottom:12px; border:0}
.scanwrap .done-grid{grid-template-columns:1fr; gap:40px}
.scanwrap .done-grid .wz__q{font-size:clamp(2.6rem,6vw,4.8rem)}
@media (max-width:640px){ .wz--scan .opts,.scanwrap .routes{grid-template-columns:1fr} .scanback{font-size:.9rem} .wz__next{padding:1em 1.6em} }