/* Progressive enhancement: all story cards share one viewport until the story ends. */
.story-flow.story-deck{--deck-view:100svh;height:calc(100svh + var(--deck-travel));background:#f5f0e6;isolation:isolate;overflow:visible}
@supports(height:100dvh){.story-flow.story-deck{--deck-view:100dvh}}
.story-deck .story-stage{position:sticky;top:0;height:var(--deck-view);padding:106px clamp(20px,3vw,56px) 88px;overflow:visible;box-sizing:border-box}
.story-deck .chapters{position:relative;width:100%;height:100%;max-width:1600px;margin:auto;border-radius:30px;overflow:hidden;isolation:isolate;box-shadow:0 16px 55px #172c231c;background:#f5f1e2}
.story-flow.story-deck .chapter{position:absolute;inset:0;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;height:100%;min-height:0!important;padding:36px clamp(28px,4vw,70px);border:1px solid #fff9;border-radius:30px;opacity:1;overflow:hidden;will-change:transform;scroll-margin:0;background:#f5f1e2}
.story-deck .chapter:not(.deck-current){pointer-events:none}
.story-deck .chapter-film,.story-deck #onrust .chapter-film{height:100%;border-radius:0}
.story-deck .chapter-film picture{display:block;height:100%}
.story-deck #onrust .chapter-film:before{display:none}
.story-deck .card-stack,.story-deck #onrust .card-stack{width:36%;max-width:450px;margin:0;padding:0;align-self:center}
.story-deck .story-card{max-height:100%;overflow:visible}
.story-deck .story-card h2,.story-deck #onrust .story-card h2,.story-deck #twijfel .story-card h2{font-size:clamp(32px,3.1vw,48px);line-height:1.08}
.story-deck .story-card p,.story-deck #onrust .story-card p{font-size:clamp(15px,1.2vw,17px);line-height:1.6}
.story-deck .story-playback-toggle{left:24px;bottom:24px;top:auto}
.chapter-dock-ready .story-deck .chapter-nav{bottom:calc(14px + env(safe-area-inset-bottom))}
.story-deck .story-card .media-fallback{max-width:100%;position:static}
@media(max-width:900px){
 .story-deck .story-stage{padding:94px 18px 78px}
 .story-deck .chapters,.story-flow.story-deck .chapter{border-radius:24px}
 .story-flow.story-deck .chapter{padding:24px;align-items:flex-end}
 .story-deck .card-stack,.story-deck #onrust .card-stack{width:100%;max-width:none;align-self:flex-end}
 .story-deck .chapter-film{background:#f5f1e2}
 .story-deck .chapter-film picture,.story-deck .chapter-film video,.story-deck #leveren .chapter-film picture,.story-deck #leveren .chapter-film video{position:absolute;inset:0;height:59%;width:100%}
 .story-deck .chapter-film picture img,.story-deck .chapter-film video,.story-deck #onrust .chapter-film img,.story-deck #onrust .chapter-film video,.story-deck #overzicht .chapter-film img,.story-deck #overzicht .chapter-film video,.story-deck #leveren .chapter-film img,.story-deck #leveren .chapter-film video{object-fit:cover;object-position:center 30%}
 .story-deck .chapter-film:after,.story-deck #leveren .chapter-film:after{background:linear-gradient(0deg,#f5f1e2 37%,#f5f1e2ed 42%,transparent 64%)}
 .story-deck .story-card h2,.story-deck #onrust .story-card h2,.story-deck #twijfel .story-card h2{font-size:clamp(29px,4.2vw,42px)}
 .story-deck .story-card p,.story-deck #onrust .story-card p{font-size:15px;line-height:1.5;margin-top:14px;max-width:560px}
 .story-deck .card-index{font-size:9px;margin-bottom:15px}
 .story-deck .card-rule{margin-block:17px 10px}
 .story-deck .card-aside{font-size:11px}
 .story-deck .story-playback-toggle{left:16px;bottom:auto;top:calc(var(--header) + 14px);font-size:10px;padding:9px 14px}
 .story-deck .story-card .media-fallback{font-size:11px;padding:9px;margin-top:12px}
}
@media(min-width:901px) and (max-height:760px){
 .story-deck .story-stage{padding-top:96px;padding-bottom:78px}
 .story-deck .story-card h2,.story-deck #onrust .story-card h2,.story-deck #twijfel .story-card h2{font-size:34px}
 .story-deck .card-index{margin-bottom:18px}.story-deck .story-card p{margin-top:15px}.story-deck .card-rule{margin-block:18px 12px}
}

/* Desktop keeps the full meeting. Mobile shares the first card's cinematic layout. */
@media(min-width:901px){
.story-flow .chapter.chapter-meeting{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(240px,1fr);gap:clamp(24px,3vw,52px);padding-inline:clamp(24px,3vw,52px)}
.story-flow .chapter-meeting .chapter-film{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1928/1072;min-width:0;border-radius:20px;overflow:hidden;background:#e9dec9}
.story-flow .chapter-meeting .chapter-film picture,.story-flow .chapter-meeting .chapter-film img,.story-flow .chapter-meeting .chapter-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.story-flow .chapter-meeting .chapter-film:after{display:none}
.story-flow .chapter-meeting .card-stack{width:100%;max-width:none;align-self:center}
.story-flow .chapter-meeting .story-playback-toggle{top:auto;bottom:14px;left:14px}
.story-flow .chapter-meeting .media-fallback{position:static;max-width:100%;margin-top:16px}
}

/* Text labels have real room on desktop. */
.story-flow .chapter-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:8px;width:min(920px,calc(100vw - 40px));max-width:calc(100vw - 40px)}
.chapter-dock-ready .story-flow .chapter-nav{width:min(920px,calc(100vw - 40px));max-width:calc(100vw - 40px)}
.story-flow .chapter-nav a{width:auto;min-width:0;min-height:52px;padding:10px 12px;justify-content:center;border-radius:99px}
.story-flow .chapter-nav a .chapter-label{display:block;font-size:14px;line-height:1.25;font-weight:600;white-space:nowrap;text-align:center}
.story-flow .chapter-nav a .chapter-number{display:none}
.story-deck .story-stage{padding-bottom:102px}
@media(max-width:900px){
 /* Keep the same source; presentation now matches De drukte, also in normal flow. */
 .story-flow:not(.story-deck) #leveren .chapter-film picture,.story-flow:not(.story-deck) #leveren .chapter-film video{height:100%}
 .story-flow:not(.story-deck) #leveren .chapter-film img,.story-flow:not(.story-deck) #leveren .chapter-film video{object-fit:cover;object-position:center 15%}
 .story-flow:not(.story-deck) #leveren .chapter-film:after{background:linear-gradient(0deg,#f5f1e2 2%,#f5f1e2f5 25%,#f5f1e2b3 48%,transparent 68%)}
}
@media(max-width:900px){
 .intro-copy,.motion-ready .intro-copy,.hero-motion .intro-copy{bottom:clamp(90px,11svh,120px)}
 .intro-bottom>a{display:inline-flex;align-items:center;justify-content:flex-end;min-height:44px;text-align:right}
}
@media(max-width:760px){
 .story-flow .chapter-nav,.chapter-dock-ready .story-flow .chapter-nav{display:flex;align-items:center;justify-content:flex-start;width:calc(100vw - 28px);max-width:560px;border-radius:99px;gap:4px;padding:5px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:5px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .story-flow .chapter-nav::-webkit-scrollbar{display:none}
 .story-flow .chapter-nav a{flex:0 0 auto;width:auto;min-width:0;min-height:44px;padding:8px 16px;scroll-snap-align:center}
 .story-flow .chapter-nav a .chapter-label{font-size:13px;white-space:nowrap}
 .story-deck .story-stage{padding-bottom:126px}
 .chapter-dock-ready .story-flow:not(.story-deck) .chapter{padding-bottom:120px}
 .chapter-dock-ready .story-flow:not(.story-deck) .story-playback-toggle{top:calc(var(--header) + 14px);bottom:auto;left:16px;font-size:10px;padding:9px 14px}
}
/* v20: films schermvullend op elk scherm, zoals Camilles eerste ontwerp. Het kaartvak vult de hele viewport. */
.story-deck .story-stage{padding:0!important}
.story-deck .chapters{max-width:none;border-radius:0!important;box-shadow:none}
.story-flow.story-deck .chapter{border-radius:0!important;border:0!important;padding-top:110px;padding-bottom:110px}
.story-flow .chapter.chapter-meeting.is-cinema{display:flex;justify-content:flex-end;align-items:center}
.story-flow:not(.story-deck) .chapter.chapter-meeting.is-cinema{position:relative}
.story-flow .chapter.chapter-meeting .chapter-film.film{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.story-flow .chapter.chapter-meeting .chapter-film.film img,.story-flow .chapter.chapter-meeting .chapter-film.film video{object-fit:cover;object-position:40% center}
.story-flow .chapter.chapter-meeting .card-stack{position:relative;z-index:2;width:min(460px,42%)}
.story-flow .chapter.chapter-meeting .chapter-film.film:after{display:block}
@media (max-width:900px){
  .story-flow.story-deck .chapter{padding:110px 22px calc(112px + env(safe-area-inset-bottom));align-items:flex-end}
  .story-deck .chapter-film picture,.story-deck .chapter-film video,.story-deck #leveren .chapter-film picture,.story-deck #leveren .chapter-film video{height:100%!important}
  .story-deck .chapter-film:after,.story-deck #leveren .chapter-film:after,.story-flow .chapter.chapter-meeting .chapter-film.film:after{background:linear-gradient(0deg,#f5f1e2 28%,#f5f1e2e8 42%,transparent 66%)}
  .story-flow .chapter.chapter-meeting.is-cinema{align-items:flex-end}
  .story-flow .chapter.chapter-meeting .card-stack{width:100%}
}