/* ═══════════════════════════════════════════════════════════════════
   Millers Juice V4 — modulaire laag boven de V3-basis.
   Alles hieronder is gescoped op .v4 of [data-v4-block], zodat een
   los blok terug kan naar V3 zonder de rest te breken. Zie V4-BLOCK-MAP.md
   ═══════════════════════════════════════════════════════════════════ */
[hidden]{display:none!important}
:root{
  --shadow-float:0 18px 50px rgba(7,18,42,.16);
  --shadow-lift:0 10px 30px rgba(7,18,42,.12);
  --motion-fast:180ms;
  --motion-base:320ms;
  --ease-v4:cubic-bezier(.22,1,.36,1);
  --v4-maxw:var(--maxw,75rem);          /* zelfde kolom als de gewone secties */
  --v4-pad:var(--pad-x,clamp(1.25rem,.6rem + 3.2vi,5.5rem));
  --v4-sec:var(--sec-y,clamp(3.5rem,2rem + 6vi,10rem));
  --v4-gap:clamp(1.5rem,1rem + 2.4vi,4rem);     /* 24 → 64px */
  --v4-cta-dark:#7C0A21;   /* donkerrood boodschapvlak naast Millers rood */
}
.v4-wrap{width:100%;max-width:var(--v4-maxw);margin-inline:auto;padding-inline:var(--v4-pad)}
[data-v4-block]{padding-block:var(--v4-sec)}
[data-v4-block].is-flush{padding-block:0}
.v4-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--v4-gap)}
.v4-eyebrow{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:0.28em;text-transform:uppercase;color:var(--label)}
.v4-num{position:absolute;font-family:var(--display);font-weight:800;line-height:.8;
  -webkit-text-stroke:1.5px currentColor;color:transparent;opacity:.14;pointer-events:none;user-select:none}

/* ── A. Geïntegreerde subpagina-hero ─────────────────────────────── */
.v4-hero{position:relative;background:var(--paper);color:var(--ink);overflow:clip;padding-block:0}
.v4-hero__grid{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--v4-gap);align-items:center;min-height:clamp(30rem,58vw,51.25rem)}
.v4-hero__copy{grid-column:1/6;grid-row:1;position:relative;z-index:3;display:grid;gap:1.1rem;
  padding-block:clamp(3rem,2rem + 4vi,6rem)}
.v4-hero__copy h1{font-size:clamp(2.25rem,1.6rem + 2.6vw,4rem);line-height:1.05;letter-spacing:-.03em;
  max-width:16ch;text-wrap:balance;hyphens:none;overflow-wrap:normal}
.v4-hero__copy .lead{max-width:44ch;font-size:clamp(1rem,.95rem + .3vw,1.125rem);line-height:1.62}
.v4-hero__fig{grid-column:6/13;grid-row:1;position:relative;margin:0;align-self:stretch;
  min-height:clamp(26rem,42vw,42rem);margin-right:calc(var(--v4-pad) * -1)}
.v4-hero__fig img{width:100%;height:100%;object-fit:cover;display:block}
.v4-hero__num{right:42%;bottom:8%;font-size:clamp(7rem,14vw,15rem);color:var(--ink);z-index:1}
.v4-hero__tie{position:absolute;left:0;top:18%;bottom:18%;width:2px;background:var(--red);z-index:3}
/* proof rail schuift over de onderrand van het beeld */
.v4-rail{position:relative;z-index:4;margin-top:-3.25rem;background:#fff;box-shadow:var(--shadow-float);
  display:grid;grid-template-columns:1.15fr 1fr 1fr 1.25fr}
.v4-rail>div{padding:1.35rem clamp(1rem,.6rem + 1vi,1.75rem);border-right:1px solid var(--paper-3)}
.v4-rail>div:last-child{border-right:0}
.v4-rail dt{font-family:var(--mono);font-weight:600;font-size:.66rem;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--label-l);margin-bottom:.3rem}
.v4-rail dd{margin:0;font-weight:600;font-size:1rem;letter-spacing:-.012em;color:var(--ink)}
/* varianten binnen dezelfde familie */
.v4-hero--flip .v4-hero__copy{grid-column:8/13;grid-row:1}
.v4-hero--flip .v4-hero__fig{grid-column:1/8;grid-row:1;margin-right:0;margin-left:calc(var(--v4-pad) * -1)}
.v4-hero--flip .v4-hero__copy{padding-left:clamp(1rem,2vw,2.5rem)}
.v4-hero--flip .v4-hero__num{left:42%;right:auto}
.v4-hero--flip .v4-hero__tie{left:auto;right:0}
.v4-hero--dark{background:var(--ink);color:var(--paper)}
.v4-hero--dark .v4-hero__copy h1{color:var(--paper)}
.v4-hero--dark .v4-eyebrow{color:var(--steel-2)}
.v4-hero--dark .lead{color:var(--steel-2)}
.v4-hero--dark .v4-hero__num{color:var(--paper)}
/* anker: compact navy paneel over een dominant beeld */
.v4-hero--anchor .v4-hero__fig{grid-column:1/13;margin-inline:calc(var(--v4-pad) * -1);position:absolute;inset:0}
.v4-hero--anchor .v4-hero__copy{grid-column:1/6;grid-row:1;grid-row:1;background:var(--ink);color:var(--paper);
  padding:clamp(2rem,1.4rem + 2.4vi,3.5rem);align-self:center}
.v4-hero--anchor .v4-hero__copy h1{color:var(--paper)}
.v4-hero--anchor .v4-eyebrow{color:var(--steel-2)}
.v4-hero--anchor .lead{color:var(--steel-2)}
.v4-hero--anchor .v4-hero__num{display:none}
.v4-hero--anchor .v4-hero__tie{display:none}

/* ── B. Processtage ──────────────────────────────────────────────── */
.v4-process{background:var(--paper);color:var(--ink)}
.v4-process__head{display:grid;gap:.9rem;max-width:46rem;margin-bottom:clamp(4rem,2.5rem + 3vi,6rem)}
.v4-process__body{display:grid;grid-template-columns:minmax(0,3.4fr) minmax(0,8.6fr);gap:var(--v4-gap);align-items:start}
.v4-steps{list-style:none;display:grid;gap:0;border-top:1px solid var(--paper-3)}
.v4-steps li{border-bottom:1px solid var(--paper-3)}
.v4-step{width:100%;display:grid;grid-template-columns:2.6rem 1fr auto;align-items:center;gap:.9rem;
  min-height:4.5rem;padding:.5rem .25rem;background:none;border:0;text-align:left;cursor:pointer;
  font:inherit;color:var(--ink);position:relative;transition:color var(--motion-fast) var(--ease-v4)}
.v4-step__n{font-family:var(--mono);font-weight:600;font-size:.66rem;letter-spacing:0.2em;color:var(--label-l);
  transition:color var(--motion-fast) var(--ease-v4)}
.v4-step__t{font-weight:600;font-size:1.0625rem;letter-spacing:-.015em}
.v4-step__a{font-family:var(--mono);font-weight:600;font-size:1rem;color:var(--label-l);
  transition:transform var(--motion-fast) var(--ease-v4),color var(--motion-fast) var(--ease-v4)}
.v4-step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red);
  transform:scaleY(0);transform-origin:50% 50%;transition:transform var(--motion-base) var(--ease-v4)}
.v4-step[aria-selected="true"]::before{transform:scaleY(1)}
.v4-step[aria-selected="true"] .v4-step__n,.v4-step[aria-selected="true"] .v4-step__a{color:var(--red)}
.v4-step:hover .v4-step__a,.v4-step:focus-visible .v4-step__a,
.v4-step[aria-selected="true"] .v4-step__a{transform:translateX(6px)}
.v4-step:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.v4-stage{position:relative;min-height:clamp(22rem,32vw,30rem)}
.v4-stage__num{right:0;top:0;font-size:clamp(7rem,13vw,13rem);color:var(--ink);z-index:0;grid-column:2;grid-row:1}
.v4-stage{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start;
  column-gap:0;padding-top:clamp(2rem,4vw,4rem)}
.v4-panel{position:relative;z-index:2;grid-column:1;grid-row:1;background:var(--ink);color:var(--paper);
  padding:clamp(1.6rem,1.2rem + 1.6vi,2.5rem);margin-top:clamp(5rem,11vw,9rem);
  display:grid;gap:.7rem;align-self:start}
.v4-panel .v4-eyebrow{color:var(--steel-2)}
.v4-panel h3{color:var(--paper);font-size:clamp(1.35rem,1.15rem + .8vw,1.9rem);letter-spacing:-.02em}
.v4-panel p{color:var(--steel-2);font-size:1rem;line-height:1.6;max-width:34ch}
.v4-panel .arrow{color:var(--paper)}
.v4-stage__img{position:relative;grid-column:2;grid-row:1;width:calc(100% + 3rem);margin-left:-3rem;
  z-index:3;box-shadow:var(--shadow-float);transition:transform var(--motion-base) var(--ease-v4)}
.v4-stage__img img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.v4-stage:hover .v4-stage__img,.v4-stage:focus-within .v4-stage__img{transform:translateY(-6px) scale(1.012)}
.v4-bottle{position:absolute;right:-1.25rem;bottom:-1.25rem;width:clamp(3rem,5vw,4.5rem);z-index:4;margin:0;
  box-shadow:var(--shadow-lift)}
.v4-bottle img{width:100%;height:auto;display:block}
.v4-fade{animation:v4fade var(--motion-base) var(--ease-v4)}
@keyframes v4fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── C. Expertise-index: hover-lijst met meelopende beeldkaart ───── */
.v4-hoverlist{position:relative;margin-top:clamp(2.5rem,1.5rem + 2vi,4rem)}
.v4-hoverlist__rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair,rgba(255,255,255,.16))}
.v4-hrow{border-bottom:1px solid var(--hair,rgba(255,255,255,.16))}
.sec--light .v4-hoverlist__rows,.sec--paper2 .v4-hoverlist__rows{border-top-color:var(--hair-l)}
.sec--light .v4-hrow,.sec--paper2 .v4-hrow{border-bottom-color:var(--hair-l)}
.v4-hrow__link{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,50fr) auto;
  gap:clamp(1rem,.5rem + 2vi,3rem);align-items:center;text-decoration:none;color:inherit;
  padding:clamp(1.3rem,.9rem + 1.4vi,2.3rem) 0;position:relative;isolation:isolate}
.v4-hrow__link::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red);
  transform:scaleY(0);transform-origin:50% 50%;transition:transform var(--motion-base) var(--ease-v4)}
.v4-hrow__t{font-weight:600;font-size:clamp(1.2rem,1rem + .8vw,1.8rem);letter-spacing:-.025em;line-height:1.15}
.v4-hrow__d{color:rgba(255,255,255,.72);line-height:1.6;max-width:46ch;font-size:.98rem}
.sec--light .v4-hrow__d,.sec--paper2 .v4-hrow__d{color:var(--steel-dk)}
.v4-hrow__a{font-family:var(--mono);font-weight:600;color:var(--label);justify-self:end;
  transition:transform var(--motion-fast) var(--ease-v4),color var(--motion-fast) var(--ease-v4)}
.sec--light .v4-hrow__a,.sec--paper2 .v4-hrow__a{color:var(--label-l)}
.v4-hrow__link:hover .v4-hrow__a,.v4-hrow__link:focus-visible .v4-hrow__a{color:var(--red);transform:translateX(6px)}
.v4-hrow__link:hover::before,.v4-hrow__link:focus-visible::before{transform:scaleY(1)}
.v4-hrow__link:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.v4-hrow__fig{margin:.2rem 0 1.4rem;display:block}
.v4-hrow__fig img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}

/* met JavaScript en een echte muisaanwijzer wordt de foto een zwevende kaart */
@media (hover:hover) and (pointer:fine){
  .js .v4-hoverlist{--v4-card:clamp(15rem,24vw,23rem)}
  .js .v4-hrow__fig{position:absolute;top:0;left:0;z-index:3;width:var(--v4-card);margin:0;
    pointer-events:none;will-change:transform;
    transform:translate3d(var(--fx,50%),var(--fy,50%),0) translate(-50%,-50%)}
  .js .v4-hrow__fig img{opacity:0;transform:scale(.97);box-shadow:var(--shadow-float);
    transition:opacity var(--motion-fast) var(--ease-v4),transform var(--motion-base) var(--ease-v4)}
  .js .v4-hrow.is-on .v4-hrow__fig img{opacity:1;transform:scale(1)}
}

/* ── D. Inline verhaal ───────────────────────────────────────────── */
.v4-story{background:var(--paper);color:var(--ink);position:relative}
.v4-story__line{font-size:clamp(1.75rem,1.2rem + 2.6vw,3.5rem);line-height:1.14;letter-spacing:-.028em;
  max-width:22ch;font-weight:700}
.v4-story__inline{display:inline-block;vertical-align:middle;width:clamp(3.5rem,7vw,6rem);margin:0 .35rem;
  transform:translateY(-.12em)}
.v4-story__inline img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.v4-story__label{margin-top:2.25rem;font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:0.28em;
  text-transform:uppercase;color:var(--label-l)}
.v4-follow{position:fixed;top:0;left:0;width:3rem;z-index:5;pointer-events:none;opacity:0;
  transition:opacity var(--motion-base) var(--ease-v4);will-change:transform}
.v4-follow.is-on{opacity:1}
.v4-follow img{width:100%;height:auto;display:block;box-shadow:var(--shadow-lift)}

/* ── E. Bewijscompositie ─────────────────────────────────────────── */
.v4-proof{position:relative}
.v4-proof__fig{margin:0;position:relative}
.v4-proof__fig img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;display:block}
.v4-proof__panels{display:grid;grid-template-columns:repeat(2,minmax(0,17rem));gap:1.25rem;
  margin-top:-3.5rem;margin-left:clamp(1rem,4vw,4rem);position:relative;z-index:2}
.v4-proof__panels>div{background:#fff;color:var(--ink);padding:1.4rem 1.5rem;box-shadow:var(--shadow-float);
  transition:transform var(--motion-base) var(--ease-v4)}
.v4-proof__panels>div:hover{transform:translateY(-6px)}
.v4-proof__panels dt{font-family:var(--mono);font-weight:600;font-size:.66rem;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--label-l);margin-bottom:.35rem}
.v4-proof__panels dd{margin:0;font-weight:600;font-size:1.0625rem;letter-spacing:-.015em}

/* ── F. Compacte CTA ─────────────────────────────────────────────── */
.v4-cta{background:var(--v4-cta-dark);color:#fff;padding-block:0;position:relative;overflow:clip}
.v4-cta::before{content:"";position:absolute;top:0;bottom:0;right:calc(100% - 1px);width:calc(50vw + 1px);
  background:var(--v4-cta-dark);pointer-events:none}
.v4-cta__in{display:grid;grid-template-columns:minmax(0,65fr) minmax(0,35fr);align-items:stretch}
.v4-cta__msg{padding:clamp(2.5rem,1.8rem + 3vi,4.5rem) 0;display:grid;gap:.9rem;align-content:center;
  padding-right:clamp(1.5rem,3vw,3.5rem)}
.v4-cta__msg h2{color:#fff;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.6rem);letter-spacing:-.025em;max-width:20ch}
.v4-cta__msg p{color:rgba(255,255,255,.84);max-width:48ch;line-height:1.6}
.v4-cta .v4-eyebrow{color:rgba(255,255,255,.78)}
.v4-cta__act{background:var(--red);color:#fff;padding:clamp(2rem,1.5rem + 2vi,3rem);
  display:grid;gap:1rem;align-content:center;justify-items:start;position:relative}
/* het lichte rood loopt door tot de vensterrand, ook buiten de contentbreedte */
.v4-cta__act::after{content:"";position:absolute;top:0;bottom:0;left:calc(100% - 1px);width:calc(50vw + 1px);
  background:var(--red);pointer-events:none}
.v4-cta__act .btn--primary{background:#fff;color:var(--red);border-color:#fff;min-height:3rem}
.v4-cta__act .btn--primary:hover,.v4-cta__act .btn--primary:focus-visible{background:var(--paper);color:var(--red)}
.v4-cta__act .textlink{color:#fff;border-color:rgba(255,255,255,.55);min-height:2.75rem}
.v4-cta__act .textlink:hover,.v4-cta__act .textlink:focus-visible{border-color:#fff}

/* ── responsive: één logisch systeem, 3 drempels ─────────────────── */
@media (max-width:1100px){
  .v4-hero__copy{grid-column:1/7}
  .v4-hero__fig{grid-column:7/13}
  .v4-hero--flip .v4-hero__copy{grid-column:7/13}
  .v4-hero--flip .v4-hero__fig{grid-column:1/7}
  .v4-process__body{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .v4-stage__img{width:72%}
}
@media (max-width:900px){
  .v4-hero__grid{grid-template-columns:1fr;min-height:0;gap:0}
  .v4-hero__copy,.v4-hero--flip .v4-hero__copy,.v4-hero--anchor .v4-hero__copy{grid-column:1/-1;grid-row:auto;
    padding-block:clamp(1.75rem,1.2rem + 2vi,2.75rem) 1.5rem;background:none;color:inherit;padding-inline:0}
  /* donkere varianten houden op mobiel hun eigen navy vlak, anders wit-op-wit */
  .v4-hero--dark .v4-hero__copy,.v4-hero--anchor .v4-hero__copy{color:var(--paper);background:var(--ink);
    margin-inline:calc(var(--v4-pad) * -1);padding-inline:var(--v4-pad);
    padding-block:clamp(1.75rem,1.2rem + 2vi,2.5rem)}
  .v4-hero--dark .v4-hero__copy h1,.v4-hero--anchor .v4-hero__copy h1{color:var(--paper)}
  .v4-hero__copy h1{font-size:clamp(2.35rem,1.7rem + 3.2vw,2.875rem);max-width:none}
  .v4-hero__fig,.v4-hero--flip .v4-hero__fig,.v4-hero--anchor .v4-hero__fig{grid-column:1/-1;grid-row:auto;min-height:0;position:relative;
    inset:auto;margin-inline:calc(var(--v4-pad) * -1)}
  .v4-hero__fig img{aspect-ratio:4/3;height:auto}
  .v4-hero__num,.v4-hero__tie{display:none}
  .v4-rail{grid-template-columns:1fr 1fr;margin-top:-1rem;margin-inline:0}
  .v4-rail>div{border-right:0;border-bottom:1px solid var(--paper-3)}
  .v4-rail>div:nth-child(2n){border-right:0}
  .v4-rail>div:nth-last-child(-n+2){border-bottom:0}
  .v4-process__body{grid-template-columns:1fr;gap:1.5rem}
  .v4-stage{min-height:0;grid-template-columns:1fr;padding-top:0;row-gap:0}
  .v4-stage__img{width:100%;margin-left:0}
  .v4-panel{grid-column:1;grid-row:2;margin:0}
  .v4-stage__img{grid-column:1;grid-row:1}
  .v4-stage__num,.v4-bottle,.v4-follow{display:none}
  .v4-stage__img{position:relative;width:100%;box-shadow:none}
  .v4-panel{margin-top:0;max-width:none}
  .v4-steps{border-top:0}
  .v4-acc__body{overflow:hidden}
  .v4-proof__panels{grid-template-columns:1fr;margin:1.25rem 0 0;gap:1rem}
  .v4-proof__panels>div{box-shadow:none;border:1px solid var(--paper-3)}
  .v4-proof__fig img{aspect-ratio:4/3}
  .v4-cta__in{grid-template-columns:1fr}
  .v4-cta__act{margin-inline:calc(var(--v4-pad) * -1)}
  .v4-cta__act::after{display:none}
  .v4-story__line{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .v4-step,.v4-step__a,.v4-hrow__link::before,.v4-hrow__a,.v4-stage__img,.v4-proof__panels>div,.v4-follow{transition:none!important}
  .v4-hrow__fig img{transition:opacity .01ms!important}
  .v4-fade{animation:none!important}
  .v4-follow{display:none!important}
}
/* zonder JavaScript: alle panelen zichtbaar, niets verborgen */
.no-js .v4-stage__panelwrap>*{display:block!important}

/* expertisevergelijking behoudt haar labels zodra de tabel stapelt */
@media (max-width:900px){
  .index td[data-label]::before{content:attr(data-label);display:block;font-family:var(--mono);font-weight:600;
    font-size:.66rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--label-l);margin-bottom:.2rem}
  .index td{padding-block:.55rem}
}
/* resterende kleine tapdoelen op de norm */
@media (max-width:900px){
  .site-footer address a,.brand{min-height:2.75rem;display:inline-flex;align-items:center}
}