.wow-home{--story-progress:0}
.story-wrap{position:relative;height:430vh;background:#050b13}.story-stage{position:sticky;top:0;height:100svh;display:grid;align-items:center;overflow:hidden;isolation:isolate}.story-stage:before{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(circle at 72% 50%,rgba(216,174,87,.16),transparent 27%),linear-gradient(140deg,#050b13,#0a1421 56%,#050b13)}.story-stage:after{content:"";position:absolute;inset:0;z-index:-2;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(90deg,transparent,#000 35%,#000)}.story-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}.story-copy{position:relative;min-height:390px}.story-intro{margin-bottom:26px}.story-intro h2{font-family:"Cormorant Garamond",serif;font-size:clamp(43px,5vw,72px);line-height:.9;margin:0}.story-step{position:absolute;inset:165px 0 auto;opacity:0;transform:translateY(28px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}.story-step.active{opacity:1;transform:none;pointer-events:auto}.story-step small{color:#d8ae57;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.story-step h3{font-family:"Cormorant Garamond",serif;font-size:clamp(35px,4vw,57px);line-height:.95;margin:13px 0}.story-step p{max-width:500px;color:#bac3ce;font-size:17px}.story-dots{position:absolute;bottom:0;display:flex;gap:9px}.story-dots i{width:34px;height:3px;background:rgba(255,255,255,.15);transition:.35s ease}.story-dots i.active{width:74px;background:#d8ae57}
.story-machine{position:relative;min-height:630px;display:grid;place-items:center;perspective:1400px}.machine-ring{position:absolute;border:1px solid rgba(216,174,87,.22);border-radius:50%;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s}.machine-ring.r1{width:590px;height:590px;transform:rotate(calc(var(--story-progress)*120deg))}.machine-ring.r2{width:460px;height:460px;border-color:rgba(142,212,207,.2);transform:rotate(calc(var(--story-progress)*-170deg))}.machine-ring.r3{width:325px;height:325px;transform:rotate(calc(var(--story-progress)*230deg))}.machine-ring:before,.machine-ring:after{content:"";position:absolute;width:11px;height:11px;border-radius:50%;background:#d8ae57;box-shadow:0 0 20px rgba(216,174,87,.9)}.machine-ring:before{top:12%;left:15%}.machine-ring:after{bottom:9%;right:18%;background:#8ed4cf}.machine-core{position:relative;z-index:2;width:230px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;padding:30px;border:1px solid rgba(216,174,87,.55);background:radial-gradient(circle,rgba(216,174,87,.22),rgba(7,17,31,.96) 68%);box-shadow:0 0 100px rgba(216,174,87,.18);transform:scale(calc(.88 + var(--story-progress)*.1))}.machine-core strong{font-family:"Cormorant Garamond",serif;font-size:31px;line-height:1}.machine-core span{display:block;color:#d8ae57;font-size:10px;font-weight:900;letter-spacing:.15em;margin-bottom:8px}.machine-node{position:absolute;z-index:3;width:190px;padding:15px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(11,21,34,.82);backdrop-filter:blur(14px);box-shadow:0 20px 55px rgba(0,0,0,.34);opacity:.22;filter:grayscale(1);transition:.5s ease}.machine-node.active{opacity:1;filter:none;border-color:rgba(216,174,87,.5);transform:translateY(-6px)}.machine-node b{display:block;color:#f5e9d0}.machine-node span{color:#9faab7;font-size:11px}.machine-node.n1{top:40px;left:2%}.machine-node.n2{top:72px;right:0}.machine-node.n3{bottom:80px;right:1%}.machine-node.n4{bottom:38px;left:5%}
.choice-experience{padding:120px 0;background:linear-gradient(180deg,#050b13,#091523)}.choice-head{text-align:center;max-width:850px;margin:0 auto 50px}.choice-head h2{font-family:"Cormorant Garamond",serif;font-size:clamp(48px,6vw,82px);line-height:.9}.choice-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.choice-tab{padding:18px;border:1px solid rgba(255,255,255,.13);border-radius:7px;background:rgba(255,255,255,.04);color:#bac3ce;font-weight:900;cursor:pointer;transition:.25s}.choice-tab:hover,.choice-tab.active{color:#07111f;background:#e8c878;border-color:#e8c878;transform:translateY(-3px)}.choice-panels{position:relative;min-height:420px}.choice-panel{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding:48px;border:1px solid rgba(216,174,87,.3);border-radius:12px;background:radial-gradient(circle at 80% 30%,rgba(216,174,87,.14),transparent 32%),rgba(255,255,255,.04);opacity:0;visibility:hidden;transform:translateY(18px);transition:.4s}.choice-panel.active{opacity:1;visibility:visible;transform:none}.choice-panel h3{font-family:"Cormorant Garamond",serif;font-size:clamp(40px,5vw,67px);line-height:.93;margin:0 0 16px}.choice-panel p{color:#bac3ce}.choice-visual{position:relative;min-height:270px;display:grid;place-items:center}.choice-visual:before,.choice-visual:after{content:"";position:absolute;border:1px solid rgba(216,174,87,.28);inset:10%;transform:rotate(8deg)}.choice-visual:after{inset:20%;transform:rotate(-13deg);border-color:rgba(142,212,207,.25)}.choice-symbol{position:relative;z-index:2;font-family:"Cormorant Garamond",serif;font-size:92px;color:#e8c878;text-shadow:0 0 45px rgba(216,174,87,.35)}
.case-cinema{padding:110px 0;overflow:hidden;background:#050b13}.case-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:42px}.case-heading h2{max-width:820px;font-family:"Cormorant Garamond",serif;font-size:clamp(47px,6vw,82px);line-height:.9;margin:0}.case-rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(72vw,760px);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(20px,calc((100vw - 1180px)/2)) 28px;scrollbar-color:#d8ae57 rgba(255,255,255,.08)}.case-scene{position:relative;min-height:480px;padding:44px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden;scroll-snap-align:center;background:#0b1522}.case-scene:before{content:"";position:absolute;inset:0;background:var(--case-bg);opacity:.76;transition:transform .6s ease,opacity .6s}.case-scene:hover:before{transform:scale(1.04);opacity:.92}.case-scene>*{position:relative;z-index:2}.case-scene small{color:#e8c878;text-transform:uppercase;letter-spacing:.15em;font-weight:900}.case-scene h3{font-family:"Cormorant Garamond",serif;font-size:clamp(42px,5vw,67px);line-height:.9;margin:12px 0}.case-scene p{max-width:590px;color:#d3d9df}.case-scene.c1{--case-bg:linear-gradient(135deg,rgba(216,174,87,.25),transparent 60%),url('hero-magazine-concept.webp') center/cover}.case-scene.c2{--case-bg:linear-gradient(135deg,rgba(5,11,19,.15),#07111f 85%),url('website-hero-mockup.png') center/cover}.case-scene.c3{--case-bg:linear-gradient(135deg,rgba(5,11,19,.15),#07111f 88%),url('crm-dashboard-mockup.png') center/cover}
.finale-wow{position:relative;min-height:88svh;display:grid;place-items:center;text-align:center;overflow:hidden;background:#050b13}.finale-wow:before{content:"";position:absolute;width:min(72vw,900px);aspect-ratio:1;border:1px solid rgba(216,174,87,.25);border-radius:50%;box-shadow:0 0 0 80px rgba(216,174,87,.025),0 0 0 160px rgba(142,212,207,.018);animation:finale-pulse 5s ease-in-out infinite}.finale-content{position:relative;z-index:2;max-width:960px}.finale-content h2{font-family:"Cormorant Garamond",serif;font-size:clamp(64px,9vw,128px);line-height:.78;margin:0 0 32px}.finale-content h2 em{display:block;color:#e8c878}.finale-content p{max-width:650px;margin:0 auto 30px;color:#bac3ce;font-size:18px}.finale-content .btn{min-height:60px;padding:17px 30px}
@keyframes finale-pulse{50%{transform:scale(1.06);opacity:.72}}
@media(max-width:960px){.story-layout{grid-template-columns:1fr;gap:20px}.story-copy{min-height:330px}.story-machine{min-height:440px}.machine-ring.r1{width:430px;height:430px}.machine-ring.r2{width:340px;height:340px}.machine-ring.r3{width:250px;height:250px}.machine-node{width:160px}.choice-panel{grid-template-columns:1fr}.choice-visual{display:none}}
@media(max-width:700px){.story-wrap{height:auto}.story-stage{position:relative;height:auto;padding:90px 0}.story-layout{display:block}.story-copy{min-height:auto}.story-step{position:relative;inset:auto;opacity:1;transform:none;margin-top:35px;padding:24px;border-left:1px solid rgba(216,174,87,.45);background:rgba(255,255,255,.025)}.story-dots,.story-machine{display:none}.choice-experience{padding:80px 0}.choice-tabs{grid-template-columns:1fr}.choice-panels{min-height:540px}.choice-panel{padding:28px;display:block}.case-heading{display:block}.case-rail{grid-auto-columns:88vw}.case-scene{min-height:430px;padding:28px}.finale-wow{min-height:78svh}.finale-content h2{font-size:clamp(60px,20vw,86px)}}

/* Readability and compact-header corrections */
.story-copy{min-height:550px!important}.story-intro{max-width:520px}.story-intro h2{font-size:clamp(42px,4.6vw,67px);line-height:.92}.story-step{inset:185px 0 auto!important;max-width:520px;visibility:hidden;transition:opacity .28s ease,transform .38s ease}.story-step.active{visibility:visible}.story-step h3{font-size:clamp(34px,3.6vw,52px);line-height:.97;text-wrap:balance}.story-step p{max-width:480px;font-size:16px}
.wow-home .site-header-v3 .nav{height:72px!important}.wow-home .site-header-v3 .brand{min-width:66px!important}.wow-home .site-header-v3 .brand img{width:62px!important;height:62px!important;max-width:62px!important;max-height:62px!important}.wow-home .wow-ribbon span{padding-top:5px;padding-bottom:5px}.wow-home .site-header-v3 .nav-cta{min-height:44px;padding:11px 18px}
@media(max-width:1040px){.wow-home .site-header-v3 .nav{height:68px!important}.wow-home .site-header-v3 .brand img{width:58px!important;height:58px!important;max-width:58px!important;max-height:58px!important}}
@media(max-width:700px){.wow-home .site-header-v3 .nav{height:64px!important}.wow-home .site-header-v3 .brand{min-width:54px!important}.wow-home .site-header-v3 .brand img{width:52px!important;height:52px!important;max-width:52px!important;max-height:52px!important}.story-step{visibility:visible}}
.story-copy{min-height:650px!important}.story-step{inset:auto 0 48px!important}
@media(max-width:700px){.story-copy{min-height:auto!important}.story-step{inset:auto!important}}
.wow-home .site-header-v3 .brand{min-width:150px!important}.wow-home .site-header-v3 .brand img{width:146px!important;height:60px!important;max-width:146px!important;max-height:60px!important}
@media(max-width:700px){.wow-home .site-header-v3 .brand{min-width:110px!important}.wow-home .site-header-v3 .brand img{width:108px!important;height:48px!important;max-width:108px!important;max-height:48px!important}}

/* Mobile scrollytelling */
@media(max-width:700px){
  .story-wrap{height:400vh}
  .story-stage{position:sticky;top:0;height:100svh;padding:58px 0 42px}
  .story-layout{display:block}
  .story-copy{min-height:calc(100svh - 100px)!important}
  .story-intro{max-width:100%;margin-bottom:0}
  .story-intro h2{font-size:clamp(38px,11vw,52px)}
  .story-step{position:absolute;inset:auto 0 72px!important;margin:0;padding:20px;opacity:0;visibility:hidden;transform:translateY(22px);transition:opacity .35s ease,transform .45s ease}
  .story-step.active{opacity:1;visibility:visible;transform:none}
  .story-step h3{font-size:clamp(32px,9vw,44px)}
  .story-step p{font-size:15px}
  .story-dots{display:flex;bottom:42px}
  .story-machine{display:none}
}

/* ============================================================
   KEUZE-SECTIE — premium redesign 2026 (SVG glass visuals).
   Eén consistente component; identieke wrapper/schaal voor alle 3 tabs.
   ============================================================ */
/* Tabs: gelijke hoogte, verfijnde states, zichtbare toetsenbordfocus. */
.choice-tabs{align-items:stretch}
.choice-tab{display:flex;align-items:center;justify-content:center;text-align:center;min-height:66px;line-height:1.25;letter-spacing:.01em}
.choice-tab:hover{transform:translateY(-3px)}
.choice-tab:focus-visible{outline:2px solid #e8c878;outline-offset:3px}
/* Panelen: identieke buitenmaten, geen layout-shift, subtiele fade + lift bij tabwissel. */
.choice-panels{min-height:482px}
.choice-panel{grid-template-columns:minmax(0,1.33fr) minmax(0,1fr);gap:46px;align-items:center;padding:48px 56px;overflow:visible;border:1px solid rgba(216,174,87,.26);border-radius:16px;background:radial-gradient(130% 120% at 84% 42%,rgba(216,174,87,.12),transparent 48%),radial-gradient(120% 130% at 6% 94%,rgba(58,107,176,.14),transparent 52%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016));box-shadow:0 30px 70px -42px rgba(0,0,0,.72);transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.choice-panel.active{transform:none}
/* Tekstkolom: nette leesbreedte, duidelijke hiërarchie, ruimte tussen onderdelen. */
.choice-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}
.choice-copy .eyebrow{margin-bottom:14px}
.choice-copy h3{margin:0 0 18px}
.choice-copy p{margin:0 0 30px;max-width:46ch;line-height:1.55;color:#c2cbd6}
/* CTA: natuurlijke contentbreedte, links uitgelijnd. */
.choice-cta{align-self:flex-start;width:auto;max-width:max-content}
/* Visual-wrapper: identiek voor alle 3, gecentreerd, met ademruimte, geen crop. */
.choice-visual{position:relative;display:flex;align-items:center;justify-content:center;height:100%;min-height:300px;padding:0;overflow:visible}
.choice-visual::before,.choice-visual::after{display:none!important}
.choice-art{display:block;width:100%;max-width:434px;height:auto;max-height:352px;filter:drop-shadow(0 22px 46px rgba(0,0,0,.42));will-change:transform;animation:choiceFloat 7s ease-in-out infinite alternate}
@keyframes choiceFloat{from{transform:translateY(-5px)}to{transform:translateY(5px)}}
/* Ruime desktop: visual zweeft subtiel ~20px buiten de rechterrand (geen paginascroll). */
@media(min-width:1260px){.choice-visual{justify-content:flex-end}.choice-art{margin-right:-78px}}
/* Tablet: side-by-side, kleiner, geen overlap. */
@media(max-width:1180px){.choice-art{margin-right:0}}
@media(max-width:1024px){.choice-panel{gap:34px;padding:44px}.choice-art{max-width:352px;max-height:320px}}
/* Compact/mobiel: visual onder de tekst, gecentreerd; kaart groeit mee met de inhoud. */
@media(max-width:860px){
  .choice-panels{min-height:0}
  .choice-panel{display:grid;grid-template-columns:1fr;gap:0;padding:36px 32px}
  .choice-panel.active{position:relative}
  .choice-panel .choice-copy p{max-width:58ch}
  .choice-panel .choice-visual{display:flex;justify-content:center;align-items:center;height:auto;min-height:0;margin-top:30px;overflow:visible}
  .choice-panel .choice-art{width:auto;max-width:78%;max-height:300px;margin-right:0}
}
@media(max-width:560px){
  .choice-panel{padding:30px 26px}
  .choice-panel .choice-art{max-width:88%;max-height:260px}
}
/* Rustige beweging respecteert de gebruikersvoorkeur. */
@media(prefers-reduced-motion:reduce){.choice-art{animation:none}.choice-panel{transition:opacity .2s ease}}

/* Homepage · echte magazinecase in ‘Drie werelden’. */
.case-scene.c1{
  --case-bg:
    linear-gradient(90deg,rgba(5,11,19,.96) 0%,rgba(5,11,19,.84) 43%,rgba(5,11,19,.18) 72%,rgba(5,11,19,.48) 100%),
    radial-gradient(circle at 78% 42%,rgba(216,174,87,.2),transparent 44%),
    linear-gradient(145deg,#071727,#050b13);
}
.case-scene.c1::after{
  content:"";
  position:absolute;
  z-index:1;
  top:5%;
  right:8%;
  height:90%;
  aspect-ratio:2115 / 2990;
  border:1px solid rgba(240,208,137,.4);
  border-radius:3px;
  background:url("covers/bert-blankestijn-cover.jpg") center / contain no-repeat;
  box-shadow:0 35px 70px -25px rgba(0,0,0,.9),0 0 48px rgba(216,174,87,.12);
  transform:rotate(2.5deg);
  transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s ease;
}
.case-scene.c1:hover::after{
  transform:translateY(-5px) rotate(1deg);
  box-shadow:0 42px 78px -24px rgba(0,0,0,.94),0 0 58px rgba(216,174,87,.18);
}
@media(max-width:700px){
  .case-scene.c1::after{right:5%;height:76%;opacity:.78}
}
@media(prefers-reduced-motion:reduce){
  .case-scene.c1::after{transition:none}
}

/* Compacte homepage: één duidelijke verhaallijn zonder dubbele tussenhoofdstukken. */
.home-compact .story-wrap{height:250vh}
.home-compact .case-cinema{padding:86px 0}
.home-compact .case-heading{margin-bottom:30px}
.home-compact .case-rail{padding-bottom:18px}

@media(max-width:700px){
  .home-compact .story-wrap{height:auto}
  .home-compact .story-stage{padding:64px 0}
  .home-compact .story-intro{margin-bottom:18px}
  .home-compact .story-step{margin-top:22px;padding:20px}
  .home-compact .story-step:nth-of-type(n+3){display:none}
  .home-compact .case-cinema{padding:68px 0}
  .home-compact .case-scene{min-height:390px}
}

/* Vloeiende, compacte horizontale showcase. */
.home-compact .case-rail.smooth-case-rail{
  scroll-snap-type:x proximity;
  scroll-behavior:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  cursor:grab;
}
.home-compact .case-rail.smooth-case-rail::-webkit-scrollbar{display:none}
.home-compact .case-rail.smooth-case-rail.is-dragging{
  cursor:grabbing;
  user-select:none;
}
.home-compact .case-rail.smooth-case-rail .case-scene{scroll-snap-align:start}
@media(prefers-reduced-motion:reduce){
  .home-compact .case-rail.smooth-case-rail{scroll-behavior:auto}
}

/* Drie werelden als compacte, vaste presentatie zonder horizontale scroll. */
.home-compact .case-cinema.case-grid-static{padding:72px 0 82px}
.home-compact .case-cinema.case-grid-static .case-heading{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto 28px;
}
.home-compact .case-cinema.case-grid-static .case-heading h2{max-width:900px;font-size:clamp(43px,5vw,68px)}
.home-compact .case-cinema.case-grid-static .case-rail{
  width:min(1180px,calc(100% - 40px));
  margin-inline:auto;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-flow:row;
  grid-auto-columns:auto;
  gap:18px;
  overflow:visible;
  scroll-snap-type:none;
  cursor:default;
}
.home-compact .case-cinema.case-grid-static .case-scene{
  min-width:0;
  min-height:365px;
  padding:30px;
  scroll-snap-align:none;
}
.home-compact .case-cinema.case-grid-static .case-scene h3{
  margin:10px 0;
  font-size:clamp(34px,3vw,46px);
  line-height:.94;
}
.home-compact .case-cinema.case-grid-static .case-scene p{font-size:14px;line-height:1.55}
.home-compact .case-cinema.case-grid-static .case-scene.c1::after{right:4%;height:72%;opacity:.72}

@media(max-width:900px){
  .home-compact .case-cinema.case-grid-static .case-rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .home-compact .case-cinema.case-grid-static .case-scene{min-height:330px;padding:22px}
  .home-compact .case-cinema.case-grid-static .case-scene h3{font-size:clamp(28px,4vw,38px)}
}
@media(max-width:700px){
  .home-compact .case-cinema.case-grid-static{padding:58px 0 64px}
  .home-compact .case-cinema.case-grid-static .case-heading,
  .home-compact .case-cinema.case-grid-static .case-rail{width:min(100% - 28px,1180px)}
  .home-compact .case-cinema.case-grid-static .case-rail{grid-template-columns:1fr;gap:14px}
  .home-compact .case-cinema.case-grid-static .case-scene{min-height:310px;padding:26px}
  .home-compact .case-cinema.case-grid-static .case-scene h3{font-size:40px}
}