/* ============================================================
   Millers Juice — ontwerpsysteem

   ONTWERPBESLISSINGEN (met reden, zodat niets een default is)

   Typografie
     Display/UI : Archivo. Een grotesk die is getekend voor industrieel
                  drukwerk en bewegwijzering: vierkantere binnenvormen,
                  krappere aperturen, brede gewichtsrange. Past bij een
                  precisieproducent en is nadrukkelijk niet Inter.
     Label      : DM Sans, hoofdletters, ruime spatiering. Draagt de meetbare dingen —
                  labels, normen, doseringen, batchgegevens. Techniek als
                  techniek gezet, niet als decoratie.
     Geen derde font.

   Kleur — afgeleid van het product, niet van een framework
     --ink    #0E1116  de donkere mengkamer uit de productiebeelden
     --paper  #F1F3F6  de overbelichte, koele fabriekshal
     --steel  #78889C  het roestvast staal van de vulkop (neutraal, geen 'merkblauw')
     --red    #C8102E  de enige handelingskleur, uit de merkrichtlijn
     Geen verloop. Nergens. Geen gradient-tekst, geen gradient-vlakken.

   Vorm
     Radius-schaal 0 / 3 / 6 px, per doel toegepast. Beeld en tabellen zijn
     scherp; alleen bedieningselementen krijgen een kleine ronding.

   Beweging
     Alleen waar het iets zegt: de hero eenmalig, en de procesrail waar de
     volgorde betekenis heeft. Geen fade-in op elke sectie, geen lift-hover
     op elke kaart.
   ============================================================ */

:root{
  --ink:#0B1A33; --ink-2:#07122A; --ink-3:#10223F; --ink-4:#172D50;
  --paper:#F3F5F9; --paper-2:#E6EAF1; --paper-3:#D5DCE7;
  --wit:#F7F8F9;
  --steel:#7C90AE; --steel-2:#A3B3CB; --steel-dk:#3F5578;
  --graphite:#26395A;
  --red:#C8102E; --red-dk:#A50D26;
  --label:#9DB8DE; --label-l:#54699B;   /* DM Sans-labels: frisser grijsblauw */

  /* aliassen zodat de filmpagina en shell blijven werken */
  --grijs:#8B95A2; --grijs-licht:#C2C8D0; --staal:var(--steel-2); --rood:var(--red);
  --cyaan:#4fd6e0;

  --ease:cubic-bezier(.2,.7,.3,1);
  --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 */

  --h1:clamp(2.4rem,1.45rem + 3.9vi,4.5rem);
  --h2:clamp(1.85rem,1.35rem + 2.2vi,3rem);
  --h3:clamp(1.15rem,1rem + .7vi,1.5rem);
  --lead:clamp(1.06rem,1rem + .45vi,1.24rem);

  --pad-x:clamp(1.15rem,.4rem + 3.6vi,4.5rem);
  --sec-y:clamp(3.6rem,2.2rem + 5.2vi,7.5rem);
  --maxw:76rem;

  --r0:0; --r1:3px; --r2:6px;
  --hair:rgba(255,255,255,.16); --hair-l:rgba(11,26,51,.14);
  --rule:1px solid var(--hair);
  --rule-l:1px solid var(--hair-l);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--ink);color:var(--wit);font-family:var(--display);
  font-size:17px;font-weight:400;line-height:1.65;letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
img{height:auto}   /* anders wint het height-attribuut als vaste hoogte */
a{color:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--steel-2);outline-offset:3px;border-radius:var(--r1)}

/* ---------------- typografie ---------------- */
h1,h2,h3,h4{text-wrap:balance;font-weight:700;letter-spacing:-.024em;line-height:1.06}
h1{font-size:var(--h1);letter-spacing:-.032em}
h2{font-size:var(--h2);letter-spacing:-.026em}
h3{font-size:var(--h3);letter-spacing:-.014em;line-height:1.25}
h4{font-size:.98rem;letter-spacing:-.01em;line-height:1.3}
p{text-wrap:pretty}
.lead{font-size:var(--lead);color:var(--steel-2);max-width:54ch;line-height:1.6;font-weight:400}
.sec--light .lead,.sec--paper2 .lead{color:var(--steel-dk)}

/* het instrument-stemmetje: alles wat meetbaar of genormeerd is */
.tag{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:0.28em;
  text-transform:uppercase;color:var(--label);display:block}
.sec--light .tag,.sec--paper2 .tag{color:var(--label-l)}
.sec--light{background:var(--paper);color:var(--ink)}
.sec--paper2{background:var(--paper-2);color:var(--ink)}

/* ---------------- layout ---------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.wrap--wide{max-width:88rem}
.sec{padding-block:var(--sec-y);position:relative}
.stack{display:grid;gap:1rem}
.sec__head{display:grid;gap:1rem;max-width:52rem;margin-bottom:clamp(2.2rem,1.4rem + 3vi,4rem)}
.hr{height:1px;background:currentColor;opacity:.14;border:0;margin-block:1.4rem}

/* ---------------- knoppen ---------------- */
.btns{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.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:var(--r2);padding:.8rem 1.4rem;border:1px solid transparent;cursor:pointer;
  white-space:nowrap;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.btn--primary{background:var(--red);color:#fff}
.btn--primary:hover{background:var(--red-dk)}
.btn--ghost{background:transparent;color:var(--wit);border-color:rgba(255,255,255,.28)}
.btn--ghost:hover{border-color:var(--wit);background:rgba(255,255,255,.06)}
.sec--light .btn--ghost,.sec--paper2 .btn--ghost{color:var(--ink);border-color:rgba(14,17,22,.28)}
.sec--light .btn--ghost:hover,.sec--paper2 .btn--ghost:hover{border-color:var(--ink);background:rgba(14,17,22,.05)}
.btn--sm{padding:.55rem 1rem;font-size:.88rem}
.btn:active{transform:translateY(1px)}

/* tekstlink: onderlijn groeit, geen pijl-animatie op alles */
.arrow{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  font-weight:600;font-size:.94rem;color:var(--wit);padding-bottom:.15rem;
  border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .2s var(--ease);min-height:2.75rem;display:inline-flex;align-items:center}
.arrow:hover{border-color:var(--wit)}
.arrow::after{content:"→";font-weight:400}
.sec--light .arrow,.sec--paper2 .arrow{color:var(--ink);border-bottom-color:rgba(14,17,22,.3)}
.sec--light .arrow:hover,.sec--paper2 .arrow:hover{border-bottom-color:var(--ink)}

/* ---------------- hero: asymmetrisch, niet gecentreerd ---------------- */
.hero{position:relative;overflow:hidden;background:var(--ink);
  padding-block:clamp(2.4rem,1.5rem + 4vi,4.6rem) var(--sec-y)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(1.8rem,1rem + 4vi,4rem);align-items:end}
.hero__copy{display:grid;gap:clamp(.9rem,.6rem + 1vi,1.4rem);max-width:34rem;align-content:end}
.hero__fig{position:relative;margin-right:calc(var(--pad-x) * -1)}
.hero__fig img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:68% 50%;border-radius:var(--r0)}
.hero__cap{font-family:var(--mono);font-weight:600;font-size:.66rem;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--label);padding-top:.7rem;border-top:var(--rule);margin-top:.7rem}

/* typografische hero zonder beeld — voor abstracte onderwerpen */

.hero--page{padding-block:clamp(2rem,1.4rem + 3vi,3.6rem) clamp(1.6rem,1rem + 2vi,3rem)}
.hero--page .hero__copy{max-width:46rem}

/* beeldhero op de subpagina's: kop, kruimelpad en foto vormen één vlak
   (verving de losse beeldband die er eerst onder stond) */
.hero--img{padding-block:0;min-height:clamp(21rem,44vh,30rem);display:grid;align-items:end}
.hero--img .hero__bg{position:absolute;inset:0;z-index:0;margin:0}
.hero--img .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero--img::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,26,51,.96) 0%,rgba(11,26,51,.88) 40%,rgba(11,26,51,.55) 72%,rgba(11,26,51,.28) 100%)}
.hero--img .wrap{position:relative;z-index:2;
  padding-block:clamp(2.4rem,1.6rem + 3vi,4rem) clamp(2.4rem,1.6rem + 3vi,4rem)}
.hero--img .hero__copy{max-width:44rem}
@media (max-width:900px){
  .hero--img{min-height:0}
  .hero--img::after{background:linear-gradient(180deg,rgba(11,26,51,.66) 0%,rgba(11,26,51,.88) 52%,rgba(11,26,51,.97) 100%)}
  .hero--img .hero__bg img{object-position:58% 42%}
  .hero--img .wrap{padding-block:clamp(6rem,26vw,9rem) 2.2rem}
}

/* ---------------- specstrip ---------------- */
.spec{display:grid;grid-template-columns:repeat(4,1fr);border-block:var(--rule)}
.spec>div{padding:clamp(1rem,.7rem + .9vi,1.5rem) clamp(.7rem,.5rem + .8vi,1.2rem);
  display:grid;gap:.35rem;border-right:var(--rule)}
.spec>div:last-child{border-right:0}
.spec dt{font-family:var(--mono);font-weight:600;font-size:.66rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--label)}
.spec dd{font-size:clamp(.95rem,.88rem + .35vi,1.1rem);font-weight:600;letter-spacing:-.015em;line-height:1.25}

/* ---------------- procesrail: horizontale genummerde volgorde ---------------- */
.rail{display:grid;grid-template-columns:repeat(6,1fr);
  border-top:2px solid currentColor}
.rail>li{list-style:none;padding:1.1rem 1.1rem 1.4rem 0;position:relative}
.rail>li::before{content:attr(data-n);font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:0.26em;
  color:var(--label);display:block;margin-bottom:.5rem}
.rail>li::after{content:"";position:absolute;top:-2px;left:0;height:2px;width:calc(100% - .9rem);background:var(--red);
  }
.rail b{display:block;font-size:.98rem;font-weight:600;letter-spacing:-.014em;margin-bottom:.3rem}
.rail p{font-size:.86rem;line-height:1.5;color:var(--steel-2)}
.sec--light .rail p,.sec--paper2 .rail p{color:var(--steel-dk)}

/* ---------------- index-tabel: scanbaar overzicht i.p.v. kaartjes ---------------- */
.index{width:100%;border-collapse:collapse;text-align:left}
.index th,.index td{padding:1.1rem 1.2rem 1.1rem 0;vertical-align:top;border-bottom:var(--rule-l)}
.index th a{display:inline-flex;align-items:center;min-height:2.75rem}
.index thead th{font-family:var(--mono);font-size:.66rem;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--label-l);font-weight:600;padding-bottom:.7rem;border-bottom:1.5px solid var(--ink)}
.index tbody th{font-size:1.06rem;font-weight:700;letter-spacing:-.02em;width:26%;padding-right:1.5rem}
.index td{font-size:.94rem;line-height:1.55;color:var(--steel-dk)}
.index tbody tr:last-child th,.index tbody tr:last-child td{border-bottom:0}
.index a{font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(14,17,22,.3)}
.index a:hover{border-color:var(--ink)}

/* ---------------- specificatielijst: meetbare feiten ---------------- */
.speclist{display:grid;gap:0;max-width:44rem}
.speclist>div{display:grid;grid-template-columns:11rem 1fr;gap:1.5rem;
  padding:1rem 0;border-bottom:var(--rule)}
.speclist>div:last-child{border-bottom:0}
.speclist dt{font-family:var(--mono);font-weight:600;font-size:.66rem;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--label);padding-top:.15rem}
.speclist dd{font-size:1rem;line-height:1.55}
.speclist dd b{font-weight:600}
.sec--light .speclist>div,.sec--paper2 .speclist>div{border-bottom-color:rgba(14,17,22,.14)}
.sec--light .speclist dt,.sec--paper2 .speclist dt{color:var(--label-l)}

/* ---------------- checklist: genummerde eisen ---------------- */
.check{counter-reset:c;display:grid;gap:0;max-width:48rem}
.check li{counter-increment:c;list-style:none;display:grid;grid-template-columns:3rem 1fr;
  column-gap:1rem;row-gap:.2rem;padding:1.4rem 0;border-bottom:var(--rule-l);align-items:start}
.check li>b,.check li>p{grid-column:2}
.check li:last-child{border-bottom:0}
.check li::before{grid-column:1;grid-row:1/span 2;content:counter(c,decimal-leading-zero);font-family:var(--mono);font-weight:600;font-size:.66rem;
  letter-spacing:0.2em;color:var(--red);padding-top:.28rem}
.check b{display:block;font-weight:600;font-size:1rem;letter-spacing:-.012em;margin-bottom:.2rem}
.check p{font-size:.92rem;line-height:1.55;color:var(--steel-dk)}

/* ---------------- flow: horizontale keten met verbindingen ---------------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.flow>div{padding:1.6rem 1.4rem 1.6rem 0;position:relative}
.flow>div:not(:last-child)::after{content:"";position:absolute;right:1rem;top:2.4rem;
  width:.55rem;height:.55rem;border-top:1.5px solid var(--steel);border-right:1.5px solid var(--steel);
  transform:rotate(45deg)}
.flow__ico{width:30px;height:30px;margin-bottom:.9rem;color:var(--red)}
.flow b{display:block;font-weight:600;font-size:1rem;margin-bottom:.3rem;letter-spacing:-.014em}
.flow p{font-size:.88rem;line-height:1.5;color:var(--steel-dk)}

/* ---------------- feitenpaneel: twee kolommen data ---------------- */
.facts{display:grid;grid-template-columns:1fr .62fr 1fr;gap:0 clamp(1.5rem,1rem + 3vi,3.5rem);align-items:start}
.facts section{padding:1.4rem 0;border-top:1.5px solid currentColor}
.facts h3{margin-bottom:.9rem}
.facts dl{display:grid;gap:.6rem}
.facts div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;font-size:.94rem;line-height:1.5}
.facts dt{font-family:var(--mono);font-weight:600;font-size:.66rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--label-l);padding-top:.2rem}

/* ---------------- redactionele rij (beeld + tekst) ---------------- */
.ed{display:grid;gap:clamp(1.4rem,.9rem + 2.6vi,3.4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.ed--flip>figure{order:-1}
.ed__copy{display:grid;gap:.9rem;max-width:33rem;align-content:center}
.ed figure{position:relative;align-self:center}
.ed figure picture{display:block}
.ed figure img{width:100%;height:auto;aspect-ratio:3/2;max-height:22rem;
  object-fit:cover;border-radius:var(--r0)}
.ed figcaption{font-family:var(--mono);font-weight:600;font-size:.66rem;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--label);padding-top:.6rem;border-top:var(--rule);margin-top:.6rem}
.sec--light .ed figcaption,.sec--paper2 .ed figcaption{color:var(--label-l);border-top-color:rgba(14,17,22,.14)}
.ed + .ed{margin-top:clamp(1.8rem,1.2rem + 2.6vi,3.2rem)}

/* volledig doorlopend beeld */
@media (max-width:640px){.bleed img{aspect-ratio:2/1}}  /* eigen 2:1-uitsnede, geen bijsnijverlies */

/* technische lijst als visueel blok (waar geen foto past) */
.plate{background:var(--ink-3);border:var(--rule);padding:clamp(1.3rem,1rem + 1.4vi,2.2rem);
  border-radius:var(--r2)}
.sec--light .plate,.sec--paper2 .plate{background:#fff;border:var(--rule-l)}
.plate ul{display:grid;gap:0;list-style:none}
.plate li{display:grid;grid-template-columns:4.2rem 1fr;gap:1rem;padding:.75rem 0;
  border-bottom:var(--rule);font-size:.92rem;line-height:1.45}
.sec--light .plate li,.sec--paper2 .plate li{border-bottom-color:rgba(14,17,22,.12)}
.plate li:last-child{border-bottom:0}
.plate b{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;font-weight:600;letter-spacing:0.26em;color:var(--label);font-weight:600}

/* ---------------- kleine lijsten ---------------- */
.feats{list-style:none;display:grid;gap:.7rem;max-width:50rem}
.feats li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;
  font-size:.98rem;line-height:1.55}
.feats li::before{content:"";width:6px;height:6px;background:var(--red);margin-top:.62rem;flex:none}

/* let-op-blok voor eerlijke afbakening */
.note{border-left:2px solid var(--red);padding:.2rem 0 .2rem 1.1rem;max-width:46rem}
.note p{font-size:.94rem;line-height:1.6;color:var(--steel-2)}
.sec--light .note p,.sec--paper2 .note p{color:var(--steel-dk)}

/* ---------------- CTA ---------------- */
.cta{background:var(--ink-2);border-top:var(--rule)}
.cta__in{display:grid;gap:1.1rem;max-width:42rem}

/* ---------------- kruimelpad ---------------- */

/* ---------------- formulier ---------------- */
.form{display:grid;gap:.9rem;grid-template-columns:1fr 1fr;max-width:42rem}
.form label{display:block;font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:0.26em;
  text-transform:uppercase;color:var(--label)}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{font-family:var(--display);font-size:1rem;min-height:3rem;font-weight:400;
  color:var(--wit);background:var(--ink-3);border:1px solid rgba(255,255,255,.16);border-radius:var(--r1);
  padding:.7rem .8rem;resize:vertical;text-transform:none;letter-spacing:0;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.form input:hover,.form select:hover,.form textarea:hover{border-color:rgba(255,255,255,.32)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--steel-2);outline-offset:1px}
.form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239AA7B7' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:10px;padding-right:2.1rem}
.form option{background:var(--ink-3);color:var(--wit)}
.form .consent{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;
  font-family:var(--display);font-size:.88rem;letter-spacing:0;text-transform:none;
  color:var(--grijs-licht);line-height:1.5}
.form .consent input{display:inline-block;width:17px;height:17px;margin:.18rem 0 0;accent-color:var(--red)}
.form .btn{grid-column:1/-1;justify-self:start}
.form__note{grid-column:1/-1;font-size:.86rem;line-height:1.6;color:var(--steel-2);
  border-left:2px solid var(--red);padding-left:.9rem;font-family:var(--display);
  letter-spacing:0;text-transform:none}
.form__status{grid-column:1/-1;font-size:.92rem;color:var(--steel-2);min-height:1.2em;
  font-family:var(--display);letter-spacing:0;text-transform:none}
.req{color:var(--steel-2)}

.contact-grid{display:grid;gap:clamp(1.8rem,1.2rem + 3vi,4rem);
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:start}
.contact-card{display:grid;gap:0;border-top:1.5px solid rgba(255,255,255,.2)}
.contact-card > div{padding:1rem 0;border-bottom:var(--rule)}
.contact-card > div:last-child{border-bottom:0}
.contact-card dt{font-family:var(--mono);font-weight:600;font-size:.66rem;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--label);margin-bottom:.35rem}
.contact-card dd{font-size:.97rem;line-height:1.55}
.contact-card a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.contact-card a:hover{border-color:var(--wit)}

/* ---------------- FAQ ---------------- */
.faq{display:grid;max-width:52rem;border-top:1.5px solid currentColor}
.faq__item{border-bottom:var(--rule-l)}
.faq__item summary{cursor:pointer;list-style:none;padding:1.05rem 2.2rem 1.05rem 0;font-weight:600;font-size:1rem;position:relative;
  line-height:1.4;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  letter-spacing:-.012em}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"";position:absolute;right:0;top:50%;width:12px;height:1.5px;background:currentColor;transform:translateY(-50%)}
.faq__item summary::before{content:"";position:absolute;right:5.25px;top:50%;width:1.5px;height:12px;background:currentColor;
  transform:translateY(-50%);transition:transform .25s var(--ease-out-expo)}
.faq__item[open] summary::before{transform:translateY(-50%) scaleY(0)}
.faq__item p{padding:0 0 1.15rem;font-size:.94rem;line-height:1.62;color:var(--steel-dk);max-width:58ch}
.sec:not(.sec--light):not(.sec--paper2) .faq__item{border-bottom-color:rgba(255,255,255,.11)}
.sec:not(.sec--light):not(.sec--paper2) .faq__item p{color:var(--steel-2)}

/* ---------------- beweging: alleen waar het iets zegt (de procesrail) ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------------- responsive ---------------- */
@media (max-width:1100px){
  .spec{grid-template-columns:repeat(4,1fr)}
  .spec>div:nth-child(3){border-right:0}
  .flow{grid-template-columns:1fr 1fr}
  .flow>div:nth-child(2)::after{display:none}
}
@media (max-width:900px){
  .rail{grid-template-columns:repeat(3,1fr)}
  .hero__grid,.ed,.facts,.contact-grid{grid-template-columns:1fr}
  .hero__fig{margin-right:0}
  .ed--flip>figure{order:0}
  .form{grid-template-columns:1fr}
  .facts section+section{border-top:1.5px solid currentColor}
  .index tbody th{width:auto}
  .index,.index thead,.index tbody,.index tr,.index th,.index td{display:block;width:100%}
  .index thead{display:none}
  .index tbody tr{padding-block:1.1rem;border-bottom:var(--rule-l)}
  .index tbody th{padding:0 0 .5rem;border:0}
  .index tbody td{padding:0 0 .5rem;border:0}
  .index tbody td:last-child{padding-bottom:0}
}
@media (max-width:640px){
  .rail{grid-template-columns:1fr 1fr}
  .rail>li{padding-right:.6rem}
  .spec{grid-template-columns:1fr 1fr}
  .spec dd{overflow-wrap:anywhere}
  .spec>div{border-right:var(--rule)}
  .spec>div:nth-child(2n){border-right:0}
  .flow{grid-template-columns:1fr}
  .flow>div::after{display:none!important}
  .flow>div{border-bottom:var(--rule-l);padding-bottom:1.2rem}
  .speclist>div{grid-template-columns:1fr;gap:.3rem}
  .facts div{grid-template-columns:1fr;gap:.15rem}
  .btns .btn{width:100%;justify-content:center}
}
@media (max-width:360px){:root{--pad-x:1rem}}

/* placeholder voor beeld in productie (PLACEHOLDERS.md) */
.ph{position:relative;width:100%;margin:0;background:var(--ink-3);color:var(--steel-2);overflow:hidden;
  display:grid;place-content:center;gap:.35rem;text-align:center;padding:1.5rem;
  background-image:repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,255,255,.035) 22px 23px)}
.ph__id{font-family:var(--mono);font-weight:600;font-size:.66rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--paper)}
.ph__ratio{font-family:var(--mono);font-weight:600;font-size:.66rem;text-transform:uppercase;letter-spacing:0.26em;color:var(--label)}
.ph__sub{font-size:.85rem;max-width:32ch;line-height:1.4}

.form label>input,.form label>select,.form label>textarea{display:block;width:100%;margin-top:.45rem}

/* 404: dezelfde speclist, maar de term is de link naar de bestemming */
.speclist--nav dt{font-family:var(--display);font-size:1.02rem;letter-spacing:-.015em;
  text-transform:none;color:var(--ink)}
.speclist--nav dt a{color:inherit;text-decoration:none;border-bottom:1.5px solid var(--red);padding-bottom:1px}
.speclist--nav dt a:hover,.speclist--nav dt a:focus-visible{color:var(--red)}

/* losse figuren binnen een sectie */
.fig{margin:1.6rem 0 0}
.fig img{display:block;width:100%;height:auto;border-radius:var(--r0)}
.fig figcaption{margin-top:.6rem;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;font-weight:600;letter-spacing:0.26em;
  text-transform:uppercase;color:var(--label-l)}
.fig--wide{max-width:36rem}
.fig--full{max-width:46rem}
.fig--half{max-width:24rem}
.fig--tall{max-width:none;margin:1.4rem 0 0}
.facts .fig--tall figcaption{margin-top:.5rem}
@media (max-width:820px){.fig--tall{max-width:none;margin:1.5rem 0 0}}

/* doorgang naar de scrollpagina: beeld over de volle breedte,
   tekst en knop in een donkerblauw glasvlak eroverheen */
.doorway{position:relative;background:var(--ink-2);display:grid}
.doorway__fig{grid-area:1/1;margin:0;position:relative;overflow:hidden}
.doorway__fig img{width:100%;height:100%;object-fit:cover;object-position:38% 50%;display:block}
.doorway__fig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,18,42,.3) 0%,rgba(7,18,42,.08) 36%,rgba(7,18,42,.45) 100%)}
.doorway>.wrap{grid-area:1/1;position:relative;display:grid;align-items:center;justify-items:end;
  padding-block:clamp(2.2rem,1.4rem + 3vi,4rem)}
.doorway__panel{background:rgba(7,18,42,.78);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--r2);
  padding:clamp(1.6rem,1.1rem + 2vi,2.6rem);max-width:32rem;
  display:grid;gap:.85rem;justify-items:start;color:var(--paper)}
.doorway__panel h2{color:var(--paper);max-width:17ch}
.doorway__panel .lead{color:var(--steel-2);max-width:40ch}
.doorway__panel .btn{margin-top:.4rem}

@media (min-width:901px){
  .doorway{min-height:clamp(24rem,42vw,32rem)}
}
@media (max-width:900px){
  .doorway{display:block}
  .doorway__fig{position:relative}
  .doorway__fig img{aspect-ratio:4/3;object-position:34% 50%}
  .doorway::after{display:none}
  .doorway>.wrap{display:block;padding-block:0 clamp(1.8rem,1rem + 3vi,2.6rem)}
  .doorway__panel{max-width:none;margin-top:-3.5rem;position:relative}
}

/* ── split: tekstkolom links, beeld rechts dat meeloopt ── */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.6rem,1rem + 3vi,4rem);align-items:center}
.split>figure{margin:0}
.split>figure img{width:100%;height:auto;border-radius:var(--r0)}
.split figcaption{margin-top:.6rem;font-family:var(--mono);font-weight:600;font-size:.66rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--label-l)}
.sec:not(.sec--light):not(.sec--paper2) .split figcaption{color:var(--label)}
@media (max-width:900px){.split{grid-template-columns:1fr}.split>figure{position:static;order:-1}}

/* ── volledige beeldhero (home) ── */
.hero--full{padding:0;min-height:clamp(32rem,72vh,44rem);display:grid;align-items:center;background:var(--ink)}
.hero--full .hero__bg{position:absolute;inset:0;z-index:0;margin:0}
.hero--full .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero--full::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,26,51,.97) 0%,rgba(11,26,51,.9) 34%,rgba(11,26,51,.45) 62%,rgba(11,26,51,.12) 100%)}
.hero--full .wrap{position:relative;z-index:2;padding-block:clamp(3rem,2rem + 5vi,5.5rem)}
.hero--full .hero__copy{max-width:39rem;display:grid;gap:1.1rem}
.hero--full .btns{align-items:center;gap:1.4rem}
.textlink{color:var(--paper);font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.35);padding-bottom:2px;min-height:2.75rem;display:inline-flex;align-items:center}
.textlink:hover,.textlink:focus-visible{border-color:var(--red)}
@media (max-width:900px){
  .hero--full{min-height:0}
  .hero--full::after{background:linear-gradient(180deg,rgba(11,26,51,.72) 0%,rgba(11,26,51,.9) 55%,rgba(11,26,51,.97) 100%)}
  .hero--full .hero__bg img{object-position:60% 40%}
  .hero--full .wrap{padding-block:clamp(9rem,40vw,14rem) 2.6rem}
  .hero--full .btns{flex-direction:column;align-items:flex-start;gap:.9rem}
}

/* ── drie disciplines als kaarten (expertise) ── */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,.8rem + 1.6vi,2rem)}
.card{display:grid;gap:.75rem;align-content:start;text-decoration:none;color:inherit;border-top:1.5px solid currentColor;padding-top:1.1rem}
.card img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r0);margin-bottom:.4rem}
.card .tag{color:var(--red)}
.card h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.55rem);letter-spacing:-.02em}
.card p{color:var(--steel-dk);font-size:.98rem;line-height:1.55}
.sec:not(.sec--light):not(.sec--paper2) .card p{color:var(--steel-2)}
.card .arrow{margin-top:.2rem}
@media (max-width:900px){.cards{grid-template-columns:1fr;gap:2rem}}

/* ── contact: donkere context links, licht formulier rechts ── */
.contact-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:70vh}
.contact-split__ctx{position:relative;background:var(--ink);color:var(--paper);
  padding:clamp(2.6rem,1.6rem + 4vi,5rem) var(--pad-x);display:grid;align-content:center;gap:1.6rem}
.contact-split__ctx .hero__bg{position:absolute;inset:0;z-index:0;margin:0}
.contact-split__ctx .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.contact-split__ctx::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(11,26,51,.88),rgba(11,26,51,.95))}
.contact-split__ctx>*:not(.hero__bg){position:relative;z-index:2}
.contact-split__ctx h1{max-width:12ch}
.contact-split__ctx .lead{max-width:40ch}
.contact-split__ctx .spec{border-block:0;grid-template-columns:1fr;gap:0}
.contact-split__ctx .spec>div{border-right:0;border-top:1px solid rgba(255,255,255,.12);padding-inline:0}
.contact-split__ctx address{font-style:normal;display:grid;gap:.25rem;font-size:.98rem}
.contact-split__ctx address a{color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);min-height:2.75rem;display:inline-flex;align-items:center;width:max-content}
.contact-split__form{background:var(--paper);color:var(--ink);padding:clamp(2.6rem,1.6rem + 4vi,5rem) var(--pad-x);display:grid;align-content:center}
.contact-split__form h2{margin-bottom:.4rem}
.contact-split__form .form{max-width:36rem}
.contact-split__form .form label{color:var(--label-l)}
.contact-split__form .form input,.contact-split__form .form select,.contact-split__form .form textarea{background:#fff;color:var(--ink);border-color:var(--paper-3)}
.contact-split__form .form .consent{color:var(--steel-dk)}
@media (max-width:900px){.contact-split{grid-template-columns:1fr}.contact-split__ctx{min-height:0}}

/* ── footer-noot ── */
.site-footer__note{opacity:.75}

/* ── slotblok: rood, gecentreerd, wit ── */
.sec.cta{background:var(--red);color:#fff;text-align:center}
.cta__in{max-width:44rem;margin-inline:auto;display:grid;gap:1rem;justify-items:center}
.cta__in .tag{color:rgba(255,255,255,.75)}
.cta__in h2{color:#fff;max-width:26ch;text-wrap:balance}
.cta__in .lead{color:rgba(255,255,255,.88);max-width:52ch}
.cta__in .btns{justify-content:center;align-items:center;gap:1.4rem;margin-top:.4rem}
.cta .btn--primary{background:#fff;color:var(--red);border-color:#fff}
.cta .btn--primary:hover,.cta .btn--primary:focus-visible{background:var(--paper);color:var(--red)}
.cta .textlink{color:#fff;border-color:rgba(255,255,255,.55)}
.cta .textlink:hover,.cta .textlink:focus-visible{border-color:#fff}
@media (max-width:900px){.cta__in .btns{flex-direction:column;gap:.9rem}}

/* sectiekop met kop links en intro rechts */
.sec__head--split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.2rem,1rem + 2vi,3rem);align-items:end}
.sec__head--split .lead{margin:0 0 .35rem}
@media (max-width:900px){.sec__head--split{grid-template-columns:1fr;align-items:start}}

/* belknop in het contactblok, naast e-mail en het vaste nummer */
.contact-bel{display:inline-flex;align-items:center;gap:.5rem;min-height:2.5rem;
  font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--red);
  padding-bottom:2px;width:fit-content;margin-top:.2rem}
.contact-bel:hover,.contact-bel:focus-visible{color:var(--red)}
.contact-bel svg{flex:none}