/* Layout: lange scroll-track met een sticky podium; links het verhaal, rechts een browser met de oude site die door een gouden lijn wordt vervangen door de nieuwe. */
.vn{
  --vn-navy-900:#0A1E2F; --vn-navy-800:#113450; --vn-navy-700:#1B4667; --vn-navy-400:#5B87A8;
  --vn-gold-500:#CF941C; --vn-gold-400:#E0AC48; --vn-gold-300:#EFC97F;
  --vn-cream:#F8F4F1; --vn-cream-72:rgba(248,244,241,.72); --vn-cream-50:rgba(248,244,241,.5); --vn-cream-18:rgba(248,244,241,.18);
  --vn-red:#E0685E; --vn-green:#5FBF8F;
  --vn-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --vn-body:"Figtree","Helvetica Neue",Arial,sans-serif;
  --vn-mono:"JetBrains Mono",ui-monospace,monospace;
  --vn-ease:cubic-bezier(.16,1,.3,1);
  --vn-chamfer:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  position:relative; background:var(--vn-navy-900); color:var(--vn-cream); font-family:var(--vn-body);
  color-scheme:dark;
}
.vn *,.vn *::before,.vn *::after{box-sizing:border-box}
.vn-track{position:relative; height:460vh}
.vn-stage{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,11fr); gap:clamp(24px,4vw,64px);
  align-items:center; max-width:1360px; margin:0 auto; padding:calc(var(--header-h, 72px) + 24px) clamp(16px,4vw,48px) 40px;
}
.vn-stage::before{ /* zacht blauw licht achter de browser */
  content:""; position:absolute; inset:auto -10% -30% 30%; height:80%;
  background:radial-gradient(closest-side,rgba(42,92,130,.45),transparent); pointer-events:none;
}

/* ---------- verhaal ---------- */
.vn-copy{position:relative; display:flex; flex-direction:column; gap:22px; min-width:0}
.vn-eyebrow{font:400 12px/1.4 var(--vn-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--vn-gold-400); margin:0}
.vn-title{font:700 clamp(30px,3.4vw,50px)/1.06 var(--vn-display); letter-spacing:-.02em; margin:0; text-wrap:balance; color:var(--vn-cream)}
.vn-title em{font-style:normal; color:var(--vn-gold-400); position:relative; white-space:nowrap}
.vn-title em::after{content:""; position:absolute; left:0; right:0; bottom:-.04em; height:.08em; background:var(--vn-gold-500); transform-origin:left; transform:scaleX(var(--vn-underline,0)); transition:transform .6s var(--vn-ease)}
.vn-steps{display:grid; margin:0; padding:0; list-style:none}
.vn-step{grid-area:1/1; display:flex; flex-direction:column; gap:8px; opacity:0; transform:translateY(10px); transition:opacity .45s var(--vn-ease),transform .45s var(--vn-ease); pointer-events:none}
.vn-step.is-on{opacity:1; transform:none}
.vn-step-label{font:400 12px/1 var(--vn-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--vn-cream-50)}
.vn-step p{margin:0; font-size:17px; line-height:1.6; color:var(--vn-cream-72); max-width:38ch}
.vn-rail{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:4px}
.vn-rail span{position:relative; height:3px; background:var(--vn-cream-18); overflow:hidden}
.vn-rail span i{position:absolute; inset:0; background:var(--vn-gold-500); transform-origin:left; transform:scaleX(0)}
.vn-rail-labels{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; font:400 11px/1 var(--vn-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--vn-cream-50)}
.vn-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px}
.vn-btn{display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 22px; font:600 16px/1 var(--vn-display); text-decoration:none; transition:background-color .14s,color .14s,transform .14s}
.vn-btn--gold{background:var(--vn-gold-500); color:var(--vn-navy-900); clip-path:var(--vn-chamfer)}
.vn-btn--gold:hover{background:var(--vn-gold-400)}
.vn-btn--ghost{color:var(--vn-cream); box-shadow:inset 0 0 0 1px var(--vn-cream-18)}
.vn-btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--vn-gold-400); color:var(--vn-gold-300)}
.vn-btn:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(207,148,28,.55)}

/* ---------- apparaat ---------- */
.vn-device{position:relative; justify-self:center; width:min(100%, calc((100svh - 190px) * 1.6)); min-width:0}
.vn-browser{position:relative; background:#14293B; border-radius:12px; box-shadow:0 0 0 1px var(--vn-cream-18),0 40px 80px -30px rgba(0,0,0,.7); transition:box-shadow .4s}
.vn-browser.is-wiping{box-shadow:0 0 0 1px rgba(207,148,28,.6),0 0 60px -10px rgba(207,148,28,.35),0 40px 80px -30px rgba(0,0,0,.7)}
.vn-bar{display:flex; align-items:center; gap:12px; height:38px; padding:0 14px; border-bottom:1px solid rgba(0,0,0,.35)}
.vn-dots{display:flex; gap:6px}
.vn-dots i{width:10px; height:10px; border-radius:50%; background:var(--vn-cream-18)}
.vn-url{flex:1; min-width:0; display:flex; align-items:center; gap:8px; height:24px; padding:0 10px; border-radius:6px; background:rgba(0,0,0,.28); font:400 12px/1 var(--vn-mono); color:var(--vn-cream-72); white-space:nowrap; overflow:hidden}
.vn-url svg{flex:none; opacity:.6}
.vn-pill{flex:none; font:600 11px/1 var(--vn-mono); letter-spacing:.08em; text-transform:uppercase; padding:6px 9px; border-radius:999px; background:rgba(224,104,94,.16); color:var(--vn-red); transition:background-color .3s,color .3s}
.vn-pill.is-new{background:rgba(207,148,28,.18); color:var(--vn-gold-300)}
.vn-view{position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:0 0 12px 12px; background:#fff}
.vn-layer{position:absolute; inset:0; overflow:hidden}
.vn-layer img{display:block; width:100%; height:auto; max-width:none; will-change:transform}
.vn-layer--new{clip-path:inset(0 100% 0 0)}

/* gouden wipe-lijn */
.vn-wipe{position:absolute; top:0; bottom:0; left:0; width:2px; margin-left:-1px; background:var(--vn-gold-500); box-shadow:0 0 24px 4px rgba(207,148,28,.55); opacity:0; transition:opacity .25s; pointer-events:none}
.vn-wipe.is-on{opacity:1}
.vn-wipe b{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:0; font:600 11px/1 var(--vn-mono); letter-spacing:.1em; white-space:nowrap}
.vn-wipe b span{padding:7px 9px; background:var(--vn-gold-500); color:var(--vn-navy-900)}
.vn-wipe b span + span{background:var(--vn-navy-900); color:var(--vn-cream)}

/* aantekeningen op de oude site */
.vn-note{position:absolute; display:flex; align-items:center; gap:8px; padding:7px 11px 7px 8px; background:var(--vn-navy-900); color:var(--vn-cream); font:500 13px/1.2 var(--vn-body); border-radius:6px; box-shadow:0 10px 30px -8px rgba(0,0,0,.6); opacity:0; transform:translateY(8px) scale(.96); transition:opacity .35s var(--vn-ease),transform .45s var(--vn-ease); pointer-events:none; max-width:min(260px,70%)}
.vn-note.is-on{opacity:1; transform:none}
.vn-note--1{left:4%; top:12%} .vn-note--2{right:4%; top:26%} .vn-note--3{left:12%; top:58%}
.vn-note::before{content:"×"; flex:none; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--vn-red); color:var(--vn-navy-900); font:700 13px/1 var(--vn-body)}

/* telefoon met de nieuwe mobiele site */
.vn-phone{position:absolute; right:-4%; bottom:-7%; width:21%; aspect-ratio:390/844; padding:6px; border-radius:26px; background:var(--vn-navy-900); box-shadow:0 0 0 1px var(--vn-cream-18),0 30px 60px -20px rgba(0,0,0,.8); opacity:0; transform:translateY(40px); pointer-events:none}
.vn-phone .vn-layer{inset:6px; border-radius:20px; background:#fff}

/* pluspunten van de nieuwe site */
.vn-chips{position:absolute; left:-3%; bottom:-6%; display:flex; flex-direction:column; align-items:flex-start; gap:8px; pointer-events:none}
.vn-chip{display:flex; align-items:center; gap:8px; padding:8px 13px 8px 9px; background:var(--vn-cream); color:var(--vn-navy-900); font:600 14px/1.2 var(--vn-display); border-radius:6px; box-shadow:0 12px 30px -10px rgba(0,0,0,.6); opacity:0; transform:translateX(-14px); transition:opacity .4s var(--vn-ease),transform .5s var(--vn-ease)}
.vn-chip.is-on{opacity:1; transform:none}
.vn-chip::before{content:""; flex:none; width:18px; height:18px; border-radius:50%; background:var(--vn-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%230A1E2F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}

.vn-after{display:none}

/* ---------- telefoon / tablet ---------- */
@media (max-width:899px){
  .vn-track{height:400vh}
  .vn-stage{grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); align-items:start; gap:18px; padding:calc(var(--header-h, 72px) + 8px) 16px 20px}
  .vn-copy{gap:12px}
  .vn-title{font-size:clamp(26px,7vw,34px)}
  .vn-step p{font-size:15px; line-height:1.5}
  .vn-copy .vn-cta{display:none}
  .vn-device{width:auto; height:100%; aspect-ratio:390/882; max-width:100%; align-self:center}
  .vn-browser{height:100%; display:flex; flex-direction:column; border-radius:28px; padding:0 6px 6px}
  .vn-bar{height:34px; padding:0 8px}
  .vn-dots{display:none}
  .vn-view{aspect-ratio:auto; flex:1; border-radius:0 0 22px 22px}
  .vn-phone{display:none}
  .vn-url{display:none}
  .vn-bar{justify-content:center}
  .vn-note{font-size:12px; max-width:80%}
  .vn-note--1{left:5%; top:8%} .vn-note--2{left:auto; right:5%; top:36%} .vn-note--3{left:5%; top:66%}
  .vn-chips{left:-10px; bottom:14px; gap:6px}
  .vn-chip{font-size:12px; padding:6px 10px 6px 7px}
  .vn-after{display:flex; justify-content:center; padding:8px 16px 72px}
}

/* ---------- minder beweging: geen scroll-film, wel een schuifregelaar ---------- */
.vn-range{display:none}
@media (prefers-reduced-motion:reduce){
  .vn-track{height:auto}
  .vn-stage{position:relative; height:auto; min-height:0; padding-block:calc(var(--header-h, 72px) + 24px) 72px}
  .vn-step,.vn-note,.vn-chip,.vn-title em::after{transition:none}
  .vn-device{width:100%}
  .vn-range{display:block; width:100%; margin-top:16px; accent-color:var(--vn-gold-500)}
  .vn-wipe{opacity:1}
}
@media (prefers-reduced-motion:reduce) and (max-width:899px){
  .vn-device{height:72svh; width:auto}
}

/* De zwevende aanvraagknop zou de scroll-film overlappen */
body.vn-active .fab, body.mt-active .fab { opacity: 0 !important; pointer-events: none !important; }

/* ---------- Motus Brabant: lichte tegenhanger van de Atelier-film, zelfde opbouw en beweging ---------- */
.mt{
  --mt-navy-900:#0A1E2F; --mt-navy-800:#113450; --mt-gold-600:#A8741A; --mt-gold-500:#CF941C; --mt-gold-400:#E0AC48;
  --mt-ink:#33454F; --mt-muted:#5C6B75; --mt-line:rgba(17,52,80,.14); --mt-line-soft:rgba(17,52,80,.12);
  --mt-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif; --mt-body:"Figtree","Helvetica Neue",Arial,sans-serif; --mt-mono:"JetBrains Mono",ui-monospace,monospace;
  --mt-ease:cubic-bezier(.16,1,.3,1); --mt-chamfer:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  position:relative; background:#fff; color:var(--mt-ink); font-family:var(--mt-body); color-scheme:light;
}
.mt *,.mt *::before,.mt *::after{box-sizing:border-box}
.mt-track{position:relative; height:420vh}
.mt-stage{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,11fr); gap:clamp(24px,4vw,64px);
  align-items:center; max-width:1360px; margin:0 auto; padding:calc(var(--header-h, 72px) + 24px) clamp(16px,4vw,48px) 40px;
}
.mt-stage::before{content:""; position:absolute; inset:auto -10% -30% 30%; height:80%; background:radial-gradient(closest-side,rgba(207,148,28,.10),transparent); pointer-events:none}
.mt-copy{position:relative; display:flex; flex-direction:column; gap:22px; min-width:0}
.mt-eyebrow{font:400 12px/1.4 var(--mt-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mt-gold-600); margin:0}
.mt-title{font:700 clamp(30px,3.4vw,50px)/1.06 var(--mt-display); letter-spacing:-.02em; margin:0; text-wrap:balance; color:var(--mt-navy-800)}
.mt-title em{font-style:normal; color:var(--mt-gold-600); position:relative; white-space:nowrap}
.mt-title em::after{content:""; position:absolute; left:0; right:0; bottom:-.04em; height:.08em; background:var(--mt-gold-500); transform-origin:left; transform:scaleX(var(--mt-underline,0)); transition:transform .6s var(--mt-ease)}
.mt-steps{display:grid; margin:0; padding:0; list-style:none}
.mt-step{grid-area:1/1; display:flex; flex-direction:column; gap:8px; opacity:0; transform:translateY(10px); transition:opacity .45s var(--mt-ease),transform .45s var(--mt-ease); pointer-events:none}
.mt-step.is-on{opacity:1; transform:none}
.mt-step-label{font:400 12px/1 var(--mt-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mt-muted)}
.mt-step p{margin:0; font-size:17px; line-height:1.6; color:var(--mt-ink); max-width:38ch}
.mt-rail{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:4px}
.mt-rail span{position:relative; height:3px; background:var(--mt-line-soft); overflow:hidden}
.mt-rail span i{position:absolute; inset:0; background:var(--mt-gold-500); transform-origin:left; transform:scaleX(0)}
.mt-rail-labels{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; font:400 11px/1 var(--mt-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--mt-muted)}
.mt-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px}
.mt-btn{display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 22px; font:600 16px/1 var(--mt-display); text-decoration:none; border-bottom:none; background:var(--mt-gold-500); color:var(--mt-navy-900); clip-path:var(--mt-chamfer); transition:background-color .14s}
.mt-btn:hover{background:var(--mt-gold-400); color:var(--mt-navy-900)}
.mt-btn:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(207,148,28,.55)}

.mt-device{position:relative; justify-self:center; width:min(100%, calc((100svh - 190px) * 1.6)); min-width:0}
.mt-browser{position:relative; background:#fff; border-radius:12px; box-shadow:0 0 0 1px var(--mt-line),0 40px 80px -30px rgba(17,52,80,.4)}
.mt-bar{display:flex; align-items:center; gap:12px; height:38px; padding:0 14px; background:#F3EDE7; border-bottom:1px solid var(--mt-line); border-radius:12px 12px 0 0}
.mt-dots{display:flex; gap:6px}
.mt-dots i{width:10px; height:10px; border-radius:50%; background:#DDD3C8}
.mt-url{flex:1; min-width:0; display:flex; align-items:center; gap:8px; height:24px; padding:0 10px; border-radius:6px; background:rgba(255,255,255,.85); font:400 12px/1 var(--mt-mono); color:var(--mt-muted); white-space:nowrap; overflow:hidden}
.mt-url svg{flex:none; opacity:.6}
.mt-pill{flex:none; font:600 11px/1 var(--mt-mono); letter-spacing:.08em; text-transform:uppercase; padding:6px 9px; border-radius:999px; background:rgba(46,158,107,.14); color:#237A52}
.mt-view{position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:0 0 12px 12px; background:#fff}
.mt-layer{position:absolute; inset:0; overflow:hidden}
.mt-scene img{position:absolute; left:0; top:0; max-width:none; height:auto; display:block; will-change:transform; user-select:none; -webkit-user-drag:none; pointer-events:none}
.mt-scene img[data-src]:not([src]){visibility:hidden}
.mt-phone{position:absolute; right:-4%; bottom:-7%; width:21%; aspect-ratio:390/844; padding:6px; border-radius:26px; background:var(--mt-navy-900); box-shadow:0 0 0 1px rgba(255,255,255,.18),0 30px 60px -20px rgba(17,52,80,.6); opacity:0; transform:translateY(40px); pointer-events:none}
.mt-phone .mt-layer{inset:6px; border-radius:20px; background:#fff}
.mt-chips{position:absolute; left:-3%; bottom:-6%; display:flex; flex-direction:column; align-items:flex-start; gap:8px; pointer-events:none}
.mt-chip{display:flex; align-items:center; gap:8px; padding:8px 13px 8px 9px; background:var(--mt-navy-800); color:#F8F4F1; font:600 14px/1.2 var(--mt-display); border-radius:6px; box-shadow:0 12px 30px -10px rgba(17,52,80,.5); opacity:0; transform:translateX(-14px); transition:opacity .4s var(--mt-ease),transform .5s var(--mt-ease)}
.mt-chip.is-on{opacity:1; transform:none}
.mt-chip::before{content:""; flex:none; width:18px; height:18px; border-radius:50%; background:#5FBF8F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%230A1E2F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.mt-after{display:none}

@media (max-width:899px){
  .mt-track{height:380vh}
  .mt-stage{grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); align-items:start; gap:18px; padding:calc(var(--header-h, 72px) + 8px) 16px 20px}
  .mt-copy{gap:12px}
  .mt-title{font-size:clamp(26px,7vw,34px)}
  .mt-step p{font-size:15px; line-height:1.5}
  .mt-copy .mt-cta{display:none}
  .mt-device{width:auto; height:100%; aspect-ratio:390/882; max-width:100%; align-self:center}
  .mt-browser{height:100%; display:flex; flex-direction:column; border-radius:28px; padding:0 6px 6px; background:#fff}
  .mt-bar{height:34px; padding:0 8px; justify-content:center; border-radius:22px 22px 0 0}
  .mt-dots,.mt-url,.mt-phone{display:none}
  .mt-view{aspect-ratio:auto; flex:1; border-radius:0 0 22px 22px}
  .mt-chips{left:-10px; bottom:14px; gap:6px}
  .mt-chip{font-size:12px; padding:6px 10px 6px 7px}
  .mt-after{display:flex; justify-content:center; padding:8px 16px 72px}
}
@media (prefers-reduced-motion:reduce){
  .mt-track{height:auto}
  .mt-stage{position:relative; height:auto; min-height:0; padding-block:calc(var(--header-h, 72px) + 24px) 72px}
  .mt-step,.mt-chip,.mt-title em::after{transition:none}
  .mt-device{width:100%}
}
@media (prefers-reduced-motion:reduce) and (max-width:899px){
  .mt-device{height:72svh; width:auto}
}

/* Loopanalyse-video van Motus: speelt op normaal tempo, los van de scroll, precies over de scrollende opname heen */
.mt-loop{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.mt-loop-box{position:absolute; left:0; top:0; width:0; height:0; overflow:hidden; background:#0A1E2F; display:none; --s:1}
.mt-loop-box video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.mt-loop-rec{position:absolute; left:calc(24px * var(--s)); top:calc(20px * var(--s)); display:inline-flex; align-items:center; gap:calc(8px * var(--s)); font:500 calc(11px * var(--s))/1 var(--mt-body); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.85)}
.mt-loop-rec::before{content:""; width:calc(8px * var(--s)); height:calc(8px * var(--s)); border-radius:50%; background:#ff4d57; animation:mt-rec 1.6s ease-in-out infinite}
@keyframes mt-rec{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){ .mt-loop{display:none} }

/* Ruimte tussen de film en een volgende sectie met platte bovenkant (bijv. Prijzen) */
.vn + .section--flush-top { padding-top: var(--section-y); }