/* ============================================================
   Millers Juice — gescrubde sticky film, 5 gesnapte hoofdstukken,
   blur/zoom-overgangen, muis-reactieve 3D-lagen.
   UI exact in de stijl van Devin Enterprise / Lusion (docs/UI-STYLE.md)
   ============================================================ */
:root{
  --ink:#0B1A33; --ink-2:#07122A;
  --wit:#f6f6f6; --grijs:#a7a6a6; --grijs-licht:#c8c7c7; --staal:#A3B3CB;
  --rood:#c8102e; --cyaan:#4fd6e0;
  --accent-grad:linear-gradient(90deg,#446dcd,#4bb6d3,#6ef2cc);
  --ease-out-expo:cubic-bezier(.19,1,.22,1);
  --ease-fast-start:cubic-bezier(.17,.67,.1,.99);
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif;  /* labelschrift */
  --label:#9DB8DE; --label-l:#54699B;
  --h1:clamp(2.4rem,1.7rem + 3.1vi,4rem);
  --h2:clamp(1.65rem,1.35rem + 1.4vi,2.1rem);
  --h3:clamp(1.1rem,1rem + .5vi,1.3rem);
  --lead:clamp(1rem,.95rem + .22vi,1.12rem);
  --pad-x:clamp(1.15rem,.5rem + 3.4vi,3rem);
  --space-m:clamp(1.25rem,1.15rem + .3vi,1.6rem);
  --px:0; --py:0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:auto;   /* ScrollTrigger + eigen goto(); geen CSS-smooth die tegenwerkt */
  scrollbar-width:none;
}
html::-webkit-scrollbar{display:none}
html{overflow-x:clip}
body{background:var(--ink);color:var(--wit);font-family:var(--display);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,canvas{display:block;max-width:100%}
::selection{background:var(--rood);color:#fff}
a{color:inherit}

/* ---------------- de film ---------------- */
.film{position:relative}
.film__snap{height:210vh;scroll-snap-align:start;scroll-snap-stop:normal}
.stage{position:relative;height:100svh;overflow:hidden;background:var(--ink);   /* ScrollTrigger pint de stage zelf */
  z-index:1;--fz:1;--fb:0px}

.stage__poster,.stage__canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:translate3d(calc(var(--px)*-6px + var(--pan,0px)),calc(var(--py)*-6px),0) scale(var(--fz));
  transform-origin:50% 46%;
  will-change:transform;filter:none}
  /* no CSS transition here: transform+filter are frame-driven (rAF) by stage.js;
     a transitioned calc(var()) transform strands at identity in Chromium */
.stage__poster{z-index:0;filter:none}
.stage__canvas{z-index:1;opacity:0}
.stage__canvas.is-ready{opacity:1}

/* muis-reactieve fx-lagen */
.fx{position:absolute;inset:0;z-index:2;pointer-events:none;transform-style:preserve-3d}
@keyframes dust{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(6px,-14px,0)}}
.fx__corner{position:absolute;width:16px;height:16px;border:1px solid rgba(186,215,245,.5)}
.fx__corner--tl{top:0;left:0;border-right:0;border-bottom:0}
.fx__corner--tr{top:0;right:0;border-left:0;border-bottom:0}
.fx__corner--bl{bottom:0;left:0;border-right:0;border-top:0}
.fx__corner--br{bottom:0;right:0;border-left:0;border-top:0}
.fx__tick{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:rgba(186,215,245,.14)}
.fx__tick::after{content:"";position:absolute;left:0;top:0;height:100%;width:var(--w,0%);background:var(--cyaan);transition:width .2s linear}

/* hologram-laag — alleen zichtbaar in hoofdstuk 2 */
.fx__holo{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease-out-expo);mix-blend-mode:screen;
  transform:translate3d(calc(var(--px)*16px),calc(var(--py)*16px),0)}
.stage.stage--holo .fx__holo{opacity:1}
.stage.stage--holo .stage__canvas{filter:hue-rotate(-10deg) saturate(1.18) contrast(1.04)}
@keyframes scan{to{transform:translateY(4px)}}
.fx__grid{position:absolute;inset:0;opacity:.4;
  background:linear-gradient(rgba(79,214,224,.14) 1px,transparent 1px) 0 0/100% 7vh,
            linear-gradient(90deg,rgba(79,214,224,.14) 1px,transparent 1px) 0 0/7vw 100%;
  -webkit-mask-image:radial-gradient(120% 80% at 62% 50%,#000 28%,transparent 78%);mask-image:radial-gradient(120% 80% at 62% 50%,#000 28%,transparent 78%)}
.stage.stage--holo::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(60% 60% at 63% 50%,rgba(79,214,224,.16),transparent 70%);mix-blend-mode:screen;
  animation:holoFlicker 6s steps(1) infinite}
@keyframes holoFlicker{0%,7%,9%,100%{opacity:1}8%{opacity:.7}52%{opacity:.9}53%{opacity:1}}

.stage__grade{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(140% 100% at 50% 38%,transparent 34%,rgba(6,9,16,.58) 100%),
    linear-gradient(90deg,rgba(6,9,16,.78) 0%,rgba(6,9,16,.32) 40%,transparent 66%),
    linear-gradient(180deg,rgba(10,14,22,.36),transparent 18%,transparent 66%,rgba(10,14,22,.5));
  transition:background .35s var(--ease-out-expo)}
.stage.stage--light .stage__grade{
  background:
    radial-gradient(140% 100% at 50% 42%,transparent 40%,rgba(210,222,236,.34) 100%),
    linear-gradient(90deg,rgba(240,244,250,.86) 0%,rgba(240,244,250,.4) 42%,transparent 66%)}

/* ---------------- hoofdstuk-teksten ---------------- */
.ch{position:absolute;inset:0;z-index:4;display:flex;align-items:center;padding:6.5rem var(--pad-x) 4.5rem;
  visibility:hidden}
.ch.is-live{visibility:visible}
.ch--left{justify-content:flex-start}
.ch--right{justify-content:flex-end}
.ch--split{justify-content:center;gap:clamp(1.5rem,5vw,5.5rem)}
.ch--split .ch__media{flex:0 1 44%;max-width:540px;margin:0;align-self:center;opacity:0;
  transform:translate3d(calc(var(--px)*11px),calc(var(--py)*11px),0)
            translateY(calc(var(--edge,0)*38px)) scale(calc(1 - var(--edge,0)*.04));
  will-change:transform,opacity}
.ch--split .ch__media img{display:block;width:100%;height:auto;border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.04);
  filter:saturate(.9) contrast(1.03) brightness(.92)}
.ch--split .ui{flex:0 1 40%;max-width:34rem}

/* ============================================================
   Vrije-ruimte hoofdstukken — elke scene heeft een eigen opstelling
   die past bij wat er verteld wordt. Kolom-model: .ui is een
   geplaatst tekstblok, de fragmenten stapelen; stage.js schrijft
   --edge (weg-vegen) en --cp (voortgang in de scene).
   ============================================================ */
.ch--free{display:block;padding:0}
.ch--free .ui{position:absolute;width:min(88vw,54rem);display:flex;flex-direction:column;
  gap:clamp(.35rem,1.1vw,.95rem);
  transform:translate3d(calc(var(--px)*8px),calc(var(--py)*8px),0)
            scale(calc(1 - var(--edge)*.03))
            rotateY(calc(var(--px)*1.4deg)) rotateX(calc(var(--py)*-1.4deg));
}
.ch--free .frag{position:relative;margin:0;
  transform:translateY(calc(var(--edge)*var(--em,1)*42px)) scale(calc(1 - var(--edge)*var(--em,1)*.04))}
.ch--free .frag:nth-child(1){--em:1.22}
.ch--free .frag:nth-child(2){--em:1.08}
.ch--free .frag:nth-child(3){--em:.92}
.ch--free .frag:nth-child(4){--em:.8}
.ch--free .frag:nth-child(5){--em:.7}
.ch--free .frag.btn{transform:none;clip-path:none;align-self:flex-start;margin-top:.7rem}

.big{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.3rem,.6rem + 5.8vw,5.4rem);line-height:.9;letter-spacing:-.022em;text-wrap:balance}
.big--md{font-size:clamp(1.4rem,1rem + 2.2vw,2.7rem);font-weight:800;letter-spacing:-.01em}
.ch:not(.ch--light) .big{text-shadow:0 6px 46px rgba(6,9,16,.5)}
.ch--light .big{color:var(--ink);text-shadow:0 2px 22px rgba(240,244,250,.5)}
.sub{font-weight:600;font-size:clamp(1rem,.85rem + .6vw,1.32rem);line-height:1.34;max-width:34ch;letter-spacing:-.004em}
.ch--light .sub{color:#3f5170}
.sub--mono{font-family:var(--mono);font-weight:600;text-transform:uppercase;
  font-size:clamp(.72rem,.66rem + .2vw,.82rem);letter-spacing:0.16em;max-width:none}
.ch__kicker{font-family:var(--mono);font-weight:600;font-size:.66rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--label)}
.ch--light .ch__kicker{color:#5c6e8a}

/* reusachtig ghost-hoofdstuknummer: eigen ruimtelijk anker per scene */

/* ---------- SCENE 1 · de belofte — editoriale titelpagina, links ---------- */
.ch--hero .ui{left:clamp(1.4rem,5vw,5.5rem);top:15vh;width:min(62vw,44rem);align-items:flex-start}
.ch--hero .big:nth-of-type(1){font-size:clamp(1.7rem,1.1rem + 2.4vw,3rem);font-weight:800;opacity:.92}
.ch--hero .rule{align-self:flex-start;height:2px;width:min(30vw,20rem);background:currentColor;opacity:.7;
  transform-origin:left;transform:scaleX(calc(1 - var(--edge)));margin:.6rem 0 .2rem}
.ch--hero .sub{max-width:38ch;color:var(--grijs-licht)}

/* ---------- SCENE 4 · het vulmoment — lab-instrument, stil & precies ---------- */
.ch--pour .ui{left:clamp(3.2rem,9vw,7.5rem);bottom:19vh;width:min(74vw,44rem);align-items:flex-start;color:var(--ink)}
.ch--pour .big{line-height:.92}
.pour-gauge{position:absolute;left:clamp(1.4rem,4.2vw,3.2rem);top:20vh;bottom:20vh;width:2px;z-index:1;
  background:rgba(20,30,50,.14);
  transform:translateY(calc(var(--edge)*40px));opacity:calc(1 - var(--edge))}
.pour-gauge::before{content:"";position:absolute;left:-3px;right:-3px;top:0;height:1px;background:rgba(20,30,50,.4)}
.pour-gauge__fill{position:absolute;left:-1px;right:-1px;bottom:0;background:var(--ink);
  height:calc(var(--cp,0)*100%);transition:height .1s linear}
.pour-gauge__fill::after{content:"";position:absolute;left:-4px;right:-4px;top:-4px;height:8px;border-radius:50%;
  background:radial-gradient(circle,rgba(16,19,28,.9),transparent 70%)}
.pour-gauge__label{position:absolute;left:14px;bottom:calc(var(--cp,0)*100%);
  font-family:var(--mono);font-weight:600;font-size:0.62rem;letter-spacing:0.26em;text-transform:uppercase;color:#5c6e8a;
  white-space:nowrap;transition:bottom .1s linear}
.pour-gauge__label::before{content:"10 mL — ";opacity:.55}

/* ---------- SCENE 5 · de oplage — vermenigvuldiging, horizontaal, onderin ---------- */
.ch--scale .ui{left:clamp(1.4rem,5vw,5.5rem);bottom:16vh;width:min(82vw,50rem);align-items:flex-start;color:var(--ink)}
.ch--scale .big{line-height:.88}
{content:attr(data-text);position:absolute;left:0;top:0;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(20,30,50,.2);pointer-events:none;z-index:-1}
.tally{position:absolute;left:clamp(1.4rem,5vw,5.5rem);right:clamp(1.4rem,5vw,5.5rem);bottom:10vh;height:24px;z-index:1;
  opacity:calc(1 - var(--edge));transform:translateY(calc(var(--edge)*30px));
  background:repeating-linear-gradient(90deg,rgba(20,30,50,.32) 0 1px,transparent 1px 16px);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--cp,0)*100%),rgba(0,0,0,.12) calc(var(--cp,0)*100%));
          mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--cp,0)*100%),rgba(0,0,0,.12) calc(var(--cp,0)*100%))}
.tally::after{content:attr(data-count);position:absolute;right:0;top:-1.4rem;
  font-family:var(--mono);font-weight:600;font-size:.66rem;letter-spacing:0.2em;color:#5c6e8a}

/* zwaardere, verticale spine-kop voor blok 2 (de fabriek) */
.ch--split{position:relative}
.ch--split .ch__spine{position:absolute;left:clamp(.6rem,2.5vw,2rem);top:50%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;font-family:var(--mono);font-weight:600;font-size:.66rem;letter-spacing:0.28em;text-transform:uppercase;
  color:rgba(255,255,255,.45);pointer-events:none}
.h-heavy{font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(1.7rem,1.1rem + 2vw,2.7rem)}
.ch--split .ch__media{position:relative}
.ch--split .ch__media figcaption,.ch--split .ch__media .cap{position:absolute;left:0;right:0;bottom:0;
  padding:.7rem .9rem;font-family:var(--mono);font-weight:600;font-size:.66rem;letter-spacing:0.22em;text-transform:uppercase;
  color:#dfe7f2;background:linear-gradient(0deg,rgba(6,9,16,.7),transparent);border-radius:0 0 16px 16px}

/* twee routes als divergerend schema */
.routes{position:relative}
.routes::before{content:"";position:absolute;left:50%;top:-1.1rem;width:1px;height:1.1rem;background:rgba(79,214,224,.5)}
.route{position:relative}
.route:first-child::before,.route:last-child::before{content:"";position:absolute;top:-1.1rem;width:38%;height:1px;background:rgba(79,214,224,.4)}
.route:first-child::before{right:0}
.route:last-child::before{left:0}
.route__tag b{color:#dff7fa;font-weight:600}

/* ---------- hoofdstuk-rail ---------- */
.chapter-rail{position:fixed;right:clamp(.9rem,2.4vw,2.2rem);top:50%;translate:0 -50%;z-index:55;
  display:flex;flex-direction:column;gap:.85rem;transition:opacity .3s ease}
.chapter-rail.is-off{opacity:0;pointer-events:none}
.chapter-rail a{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-family:var(--mono);font-weight:600;
  color:var(--wit);opacity:.4;transition:opacity .35s var(--ease-out-expo),color .4s}
.chapter-rail.on-light a{color:var(--ink)}
.chapter-rail b{font-size:.7rem;letter-spacing:.05em}
.chapter-rail i{font-size:.66rem;font-style:normal;letter-spacing:.07em;text-transform:uppercase;
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .5s var(--ease-out-expo),opacity .4s}
.chapter-rail a::after{content:"";width:12px;height:1px;background:currentColor;transition:width .4s var(--ease-out-expo)}
.chapter-rail a:hover,.chapter-rail a.is-active{opacity:1}
.chapter-rail a.is-active::after{width:26px}
.chapter-rail a.is-active i,.chapter-rail a:hover i{max-width:12rem;opacity:1}
@media (max-width:820px){.chapter-rail{display:none}}

.ui{--edge:1;width:100%;max-width:37rem;display:grid;gap:var(--space-m);
  opacity:0;
  transform:translateY(calc(var(--edge)*40px)) scale(calc(1 - var(--edge)*.045))
            rotateY(calc(var(--px)*3deg)) rotateX(calc(var(--py)*-3deg));
  /* no transition on .ui: stage.js writes opacity + --edge every rAF frame
     as a pure function of scroll position, so the text can never be caught
     half-faded mid-transition, and a transitioned calc(var()) (which strands
     at its start value in Chromium) is avoided entirely */
  will-change:transform,opacity}
.ch.is-live .ui{opacity:1}   /* pre-JS / no-JS fallback; JS overrides inline */
.ch--light .ui{color:var(--ink)}
.ch--light h2{color:var(--ink)}
.tilt{transform-style:preserve-3d}

/* glass */
.glass{padding:clamp(1.4rem,1rem + 2vi,2.2rem);border-radius:18px;
  background:rgba(12,16,24,.42);border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 60px -30px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);
  position:relative;overflow:hidden}
.glass::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.09) 50%,transparent 60%);
  background-size:250% 250%;background-position:calc(50% + var(--px)*60%) calc(50% + var(--py)*60%)}
.glass--light{background:rgba(244,247,251,.5);border-color:rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 24px 60px -34px rgba(40,60,90,.35)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(10,13,20,.88)}.glass--light{background:rgba(244,247,251,.94)}
}

/* holo-panel */
.holo-panel{padding:clamp(1.4rem,1rem + 2vi,2.2rem);border-radius:4px;position:relative;
  background:linear-gradient(180deg,rgba(8,18,22,.62),rgba(8,16,20,.5));
  border:1px solid rgba(79,214,224,.35);
  box-shadow:0 0 0 1px rgba(79,214,224,.12),0 0 40px -12px rgba(79,214,224,.4),inset 0 1px 0 rgba(79,214,224,.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
.holo-panel::before,.holo-panel::after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--cyaan)}
.holo-panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.holo-panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.eyebrow--holo{color:var(--cyaan);letter-spacing:.14em}
.eyebrow--holo::before{background:var(--cyaan)}
.ch--holo h2{text-shadow:0 0 24px rgba(79,214,224,.35)}
.ch--holo .lead{color:#cfeef2}

/* ---------------- typografie (Devin: gewicht 400) ---------------- */
.eyebrow{font-family:var(--mono);font-weight:600;font-size:.66rem;color:var(--label);display:inline-flex;align-items:center;gap:.55rem}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:currentColor;opacity:.55}
.ch--light .eyebrow{color:#5c6e8a}
h1{font-weight:400;font-size:var(--h1);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
h2{font-weight:400;font-size:var(--h2);line-height:1.14;letter-spacing:-.008em;text-wrap:balance}
h3{font-weight:500;font-size:var(--h3);line-height:1.25}
.grad{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:var(--lead);color:var(--staal);max-width:46ch}
.ch--light .lead{color:#5c6e8a}
.ch:not(.ch--light) h1,.ch:not(.ch--light) h2{text-shadow:0 2px 30px rgba(6,9,16,.5)}

.btns{display:flex;gap:clamp(.7rem,1.4vw,1.3rem);flex-wrap:wrap}
.btn{text-decoration:none;font-size:1rem;font-weight:400;border-radius:10px;padding:.82rem 1.55rem;cursor:pointer;border:0;font-family:var(--display);
  transition:transform .25s var(--ease-fast-start),filter .3s var(--ease-fast-start),background .3s}
.btn:active{filter:brightness(.96)}
.btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.btn--primary{background:var(--rood);color:#fff}
.btn--primary:hover{filter:brightness(1.08)}
.btn--ghost{background:transparent;color:var(--staal);border:1px solid rgba(186,215,245,.4)}
.ch--light .btn--ghost{color:#3f6b9c;border-color:rgba(63,107,156,.4)}
.btn--ghost:hover{background:rgba(186,215,245,.08)}

.routes{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.route{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.9rem 1rem;display:grid;gap:.3rem;
  transition:transform .35s var(--ease-out-expo),border-color .35s}
.route:hover{transform:translateY(-3px);border-color:rgba(79,214,224,.4)}
.route__tag{font-family:var(--mono);font-weight:600;font-size:.66rem;color:var(--cyaan)}
.route p:last-child{font-size:.88rem;color:var(--grijs)}

.steps{list-style:none;display:grid;gap:.45rem}
.steps li{display:flex;gap:.9rem;align-items:baseline;font-size:1rem}
.steps__n{font-family:var(--mono);font-weight:600;font-size:.66rem;color:#3f6b9c}
.batchline{font-family:var(--mono);font-weight:600;font-size:.66rem;color:#5c6e8a;border-top:1px solid rgba(11,20,33,.16);padding-top:.8rem;margin-top:.2rem}

.scroll-cue{position:absolute;left:50%;bottom:3.4vh;transform:translateX(-50%);z-index:6;color:var(--wit);opacity:.7;transition:opacity .45s var(--ease-out-expo)}
.scroll-cue.is-gone{opacity:0}
.scroll-cue__mouse{display:block;width:24px;height:38px;border:2px solid currentColor;border-radius:13px;position:relative}
.scroll-cue__mouse>span{position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:currentColor;animation:scrollcue 1.7s var(--ease-out-expo) infinite}
@keyframes scrollcue{0%{opacity:0;transform:translateY(0)}25%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* ---------------- entrance ---------------- */
.stagger>*{opacity:0;transform:translateY(16px);filter:blur(3px)}
.ch.is-live .stagger>*{opacity:1;transform:none;filter:none;transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo),filter .8s}
.ch.is-live .stagger>*:nth-child(2){transition-delay:.1s}
.ch.is-live .stagger>*:nth-child(3){transition-delay:.22s}
.ch.is-live .stagger>*:nth-child(4){transition-delay:.34s}

@media (pointer:coarse){
  .stage__poster,.stage__canvas{transform:scale(var(--fz))!important}
  .fx__holo{transform:none!important}
  .ui{transform:translateY(calc(var(--edge)*40px)) scale(calc(1 - var(--edge)*.045))!important}
  .ch--free .ui{transform:scale(calc(1 - var(--edge)*.04))!important}
}
@media (max-width:820px){
  .site-header{gap:1rem}
  .site-header__nav{display:none}
  .site-header__cta{font-size:.85rem;padding:.6rem 1rem}
  .ch{align-items:flex-end;padding:5.5rem 1.15rem 4rem}
  .ch--right{justify-content:flex-start}
  .ch--split{flex-direction:column;gap:1.1rem;align-items:stretch;justify-content:center}
  .ch--split .ch__media{flex:none;max-width:none;order:-1}
  .ch--split .ui{flex:none}
  .ch--free{display:flex;align-items:center}
  .ch--free .ui{position:static;inset:auto;display:flex;flex-direction:column;gap:.85rem;width:100%;transform:none;filter:none}
  .ch--free .frag{position:static;transform:none!important;text-align:left!important;max-width:none;inset:auto}
  .big{font-size:clamp(2rem,1.1rem + 6vw,3rem);line-height:.98}
  .sub{font-size:1rem}
  .pour-gauge,.tally,.ch--hero .rule{display:none}
  .ch--pour .ui,.ch--scale .ui,.ch--hero .ui{justify-content:flex-end;padding-bottom:9vh}
  .ui{max-width:none;transform:translateY(calc(var(--edge)*40px)) scale(calc(1 - var(--edge)*.045))}
  .stage__grade{background:linear-gradient(180deg,rgba(10,14,22,.25),rgba(10,14,22,.95))!important}
  .stage.stage--light .stage__grade{background:linear-gradient(180deg,rgba(240,244,250,.2),rgba(240,244,250,.97))!important}
  .routes{grid-template-columns:1fr}
  }
@media (prefers-reduced-motion:reduce){
  .stage__poster,.stage__canvas{transform:none!important;filter:none!important}
  .stage__canvas{display:none}.stage.stage--holo::after{animation:none!important}
  .ch{position:relative;min-height:100svh;visibility:visible}
  .ui{opacity:1!important;transform:none!important;filter:none!important}
  .ch__media{opacity:1!important;transform:none!important;filter:none!important}
  .ch--free .ui{position:relative!important;display:flex;flex-direction:column;gap:1rem;height:auto;filter:none!important;transform:none!important}
  .ch--free .frag{position:static!important;transform:none!important;clip-path:none!important}
  .pour-gauge,.tally,.ch--hero .rule{display:none!important}
  .chapter-rail{display:none}
  .scroll-cue__mouse>span{animation:none!important}
  .stagger>*{opacity:1!important;transform:none!important;filter:none!important}
  *,*::before,*::after{transition-duration:.01ms!important}
}

/* ---------------- gedeelde eind-CTA (v4.css) op de filmpagina ----------------
   De filmpagina laadt site.css niet; deze tokens en basisstijlen maken het
   gedeelde .v4-cta-blok identiek aan dat op de overige pagina's. */
:root{
  --paper:#F3F5F9; --paper-3:#D5DCE7;
  --steel:#7C90AE; --steel-2:#A3B3CB; --steel-dk:#3F5578;
  --red:#C8102E; --red-dk:#A50D26;
}
.v4-cta .btn{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-family:var(--display);font-size:.95rem;font-weight:600;letter-spacing:-.008em;
  border-radius:4px;padding:.8rem 1.4rem;border:1px solid transparent;white-space:nowrap;
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.v4-cta .btn--primary:hover{filter:none}
.v4-cta .textlink{font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.55);
  padding-bottom:2px;display:inline-flex;align-items:center;transition:border-color .2s ease}

/* tablet-band: koppen iets rustiger zodat meerregelige fragmenten niet gaan botsen */
@media (min-width:821px) and (max-width:1180px){
  .big{font-size:clamp(2.6rem,.4rem + 5vw,4.4rem);line-height:.94}
  .ch--pour .ui,.ch--scale .ui{width:min(86vw,44rem)}
}