/* ============================================================
   SIRIUS VISION — DEMO SITE KIT · kit.css (laag 3, componenten)
   Nooit per klant aanpassen. Alles stuurt op tokens.
   Volgorde in <head>: tokens.css → brand.css → kit.css
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* [data-reveal="left"/"right"] staat vóór het invliegen 39px opzij; zonder dit
   geeft dat op smalle schermen even horizontale scroll. clip i.p.v. hidden,
   anders sneuvelt position:sticky in de header en de split. */
html{ overflow-x:clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-body); font-size:var(--step-0); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img,video,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--color-accent); outline-offset:3px; border-radius:2px; }

/* ---------------- Layout ---------------- */
.wrap{ width:min(100% - (var(--gutter)*2), var(--maxw)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - (var(--gutter)*2), 72ch); margin-inline:auto; }
.sec{ background:var(--color-bg); color:var(--color-text); padding-block:var(--section-y); position:relative; }
.sec--flush{ padding-block:0; }
.sec--tight{ padding-block:calc(var(--section-y)*.6); }
.grid{ display:grid; gap:var(--space-4); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)); }
.split{ display:grid; gap:clamp(2rem,5vw,5rem); grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:56rem){ .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .split--sticky > :first-child{ position:sticky; top:calc(var(--space-5) + 3rem); } }

/* ---------------- Typografie ---------------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:var(--weight-display);
  letter-spacing:var(--tracking-display); line-height:1.02; margin:0 0 var(--space-3); text-wrap:balance;
  /* Nederlandse samenstellingen ("transportleidingen") zijn in displaygrootte breder
     dan een telefoonscherm. Afbreken mag; uit de kolom lopen niet. Werkt alleen met
     lang="nl" op het html-element. */
  overflow-wrap:break-word; hyphens:auto; }
h1{ font-size:var(--step-4); } h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-2); line-height:1.1; } h4{ font-size:var(--step-1); line-height:1.2; }
p{ margin:0 0 var(--space-2); max-width:68ch; text-wrap:pretty; }
.lead{ font-size:var(--step-1); line-height:1.45; color:var(--color-text); }
.muted{ color:var(--color-muted); }
.small{ font-size:var(--step--1); }
.mono-num{ font-variant-numeric:tabular-nums; }

/* Genummerde sectiekop — Sirius Vision-signatuur */
.eyebrow{ display:flex; align-items:center; gap:var(--space-2); margin:0 0 var(--space-3);
  font-size:var(--step--1); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--color-muted); }
.eyebrow[data-num]::before{ content:attr(data-num); color:var(--color-accent); font-family:var(--font-display);
  font-weight:var(--weight-display); font-size:var(--step-1); letter-spacing:0; line-height:1; }
.eyebrow--line::after{ content:""; flex:1; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--color-accent) 0%,
    color-mix(in oklab, var(--color-accent) 28%, transparent) 62%, transparent 100%); }
.sec-head{ margin-bottom:clamp(2rem,4vw,3.5rem); max-width:56ch; }
.rule{ height:1px; background:var(--color-hairline); border:0; margin:0; }

/* ---------------- Knoppen ---------------- */
.btn{ --_bg:var(--color-accent); --_fg:var(--color-on-accent);
  display:inline-flex; align-items:center; gap:.55em; min-height:42px;
  padding:.55em 1.3em; border:1px solid transparent; border-radius:var(--radius-pill);
  background:var(--_bg); color:var(--_fg); font:inherit; font-weight:700; line-height:1.15; text-decoration:none;
  cursor:pointer; transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast); }
.btn:hover{ transform:translateY(-2px); }
/* Heeft de klant een eigen hoverkleur op knoppen? Zet --brand-accent-hover in
   brand.css. Zonder dat token blijft de knop zijn accentkleur houden. */
.btn:not(.btn--ghost):hover{ --_bg:var(--color-accent-hover); }
.btn::after{ content:"→"; transition:transform var(--dur-fast) var(--ease-out); }
.btn:hover::after{ transform:translateX(4px); }
.btn--ghost{ --_bg:transparent; --_fg:var(--color-text); border-color:var(--color-border); }
.btn--ghost:hover{ --_bg:var(--color-text); --_fg:var(--color-bg); }
.btn--plain::after{ content:none; }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; margin-top:var(--space-3); }

/* ---------------- Beeld ---------------- */
.media{ position:relative; overflow:hidden; border-radius:var(--radius-md);
  aspect-ratio:var(--img-ratio); background:var(--color-surface); }
.media > img,.media > video{ width:100%; height:100%; object-fit:cover; filter:var(--img-treatment); }
.media--wide{ aspect-ratio:16/9; } .media--square{ aspect-ratio:1; } .media--tall{ aspect-ratio:3/4; }
/* --free = geen bijsnijden: de foto houdt zijn eigen verhouding. Standaard voor
   aangeleverd klantbeeld waar de compositie belangrijk is. */
.media--free{ aspect-ratio:auto; }
.media--free > img,.media--free > video{ height:auto; object-fit:contain; }
.media__cap{ position:absolute; left:0; bottom:0; padding:.5em .9em; font-size:var(--step--1);
  font-weight:700; background:var(--color-accent); color:var(--color-on-accent); }
.zoom > img{ transition:transform var(--dur-slow) var(--ease-out); }
.zoom:hover > img{ transform:scale(1.05); }

/* ---------------- Header ---------------- */
.site-head{ position:sticky; top:0; z-index:60; background:color-mix(in oklab,var(--color-bg) 88%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--color-hairline); }
.site-head__in{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); min-height:72px; }
/* height (niet max-height): een SVG-logo zonder width/height-attributen krijgt met
   max-height + width:auto in een flexcontainer breedte 0 en verdwijnt. */
.site-head__logo{ flex:0 0 auto; }
.site-head__logo img{ display:block; height:34px; width:auto; max-width:200px; object-fit:contain; }
.site-nav{ display:none; gap:var(--space-3); font-size:var(--step--1); font-weight:600; }
.site-nav a{ text-decoration:none; padding:.4em 0; border-bottom:2px solid transparent; }
.site-nav a:hover{ border-color:var(--color-accent); }
@media (min-width:60rem){ .site-nav{ display:flex; } }

/* ---------------- Hero (full-bleed foto) ---------------- */
.hero{ position:relative; min-height:min(92svh,860px); display:grid; align-items:end;
  /* minmax(0,1fr) i.p.v. een impliciete auto-kolom: anders wordt de kolom op smalle
     schermen zo breed als de langste kop (max-content) en loopt de hero-tekst
     buiten beeld, geklemd door de overflow:hidden hieronder. */
  grid-template-columns:minmax(0,1fr);
  color:#fff; --color-text:#fff; --color-muted:rgba(255,255,255,.72); --color-border:rgba(255,255,255,.28);
  padding-block:clamp(4rem,10vw,7rem); overflow:hidden; isolation:isolate; }
.hero__bg{ position:absolute; inset:0; z-index:-2; }
.hero__bg img,.hero__bg video{ width:100%; height:100%; object-fit:cover; }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,calc(var(--overlay-strength)*.55)) 0%,
    rgba(0,0,0,calc(var(--overlay-strength)*.2)) 38%, rgba(0,0,0,calc(var(--overlay-strength)*1.15)) 100%); }
.hero h1{ max-width:18ch; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:.5rem var(--space-2); list-style:none; padding:0; margin:0 0 var(--space-3); }
.hero__meta li{ display:inline-flex; align-items:center; gap:.5em; padding:.45em 1em;
  border:1px solid var(--color-border); border-radius:var(--radius-pill); font-size:var(--step--1); font-weight:600;
  background:rgba(255,255,255,.08); backdrop-filter:blur(4px); }
.hero__meta li.is-key{ background:var(--color-accent); border-color:transparent; color:var(--color-on-accent); }
.scroll-cue{ position:absolute; left:var(--gutter); bottom:1.25rem; font-size:var(--step--1);
  letter-spacing:.16em; text-transform:uppercase; opacity:.75; }

/* ---------------- Cards & lijsten ---------------- */
.card{ background:var(--color-surface); border:1px solid var(--color-hairline);
  border-radius:var(--radius-md); padding:var(--space-3); height:100%;
  transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.card:hover{ transform:translateY(-4px); border-color:var(--color-accent); }
/* een kaart die zelf een link is (S03, S11) kreeg de standaard onderstreping
   van de browser over kop én tekst — a{color:inherit} dekt dat niet af. */
a.card{ text-decoration:none; }
.card__num{ font-family:var(--font-display); font-weight:var(--weight-display);
  font-size:var(--step-2); color:var(--color-accent); line-height:1; margin-bottom:var(--space-2); }
.card h3{ font-size:var(--step-1); overflow-wrap:break-word; hyphens:auto; }
.card p:last-child{ margin-bottom:0; }
.ticks{ list-style:none; padding:0; margin:0; display:grid; gap:.75rem; }
.ticks li{ display:grid; grid-template-columns:1.4em 1fr; gap:.6em; align-items:start; }
.ticks li::before{ content:"→"; color:var(--color-accent); font-weight:700; }
.numbered{ list-style:none; padding:0; margin:0; counter-reset:n; display:grid; gap:0; }
.numbered > li{ counter-increment:n; display:grid; grid-template-columns:auto 1fr; gap:var(--space-3);
  padding-block:var(--space-3); border-top:1px solid var(--color-hairline); }
.numbered > li::before{ content:counter(n,decimal-leading-zero); font-family:var(--font-display);
  font-weight:var(--weight-display); font-size:var(--step-2); color:var(--color-accent); line-height:1; }
.numbered > li:last-child{ border-bottom:1px solid var(--color-hairline); }

/* ---------------- Cijfers / stats ---------------- */
.stats{ display:grid; gap:var(--space-3); grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr)); }
.stat__val{ font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--step-4);
  line-height:1; letter-spacing:var(--tracking-display); font-variant-numeric:tabular-nums; color:var(--color-accent); }
.stat__lbl{ font-size:var(--step--1); color:var(--color-muted); margin-top:.5em;
  overflow-wrap:break-word; hyphens:auto; }

/* ---------------- Quote / testimonial ---------------- */
.quote{ border-left:3px solid var(--color-accent); padding-left:var(--space-3); }
.quote blockquote{ margin:0 0 var(--space-2); font-family:var(--font-display); font-weight:600;
  font-size:var(--step-1); line-height:1.3; letter-spacing:-.01em; }
.quote figcaption{ font-size:var(--step--1); color:var(--color-muted); }

/* ---------------- FAQ-accordeon ---------------- */
.faq{ border-top:1px solid var(--color-hairline); }
.faq details{ border-bottom:1px solid var(--color-hairline); }
.faq summary{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-3);
  padding:var(--space-3) 0; cursor:pointer; list-style:none; font-family:var(--font-display);
  font-weight:700; font-size:var(--step-1); line-height:1.25; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; flex:none; font-weight:400; font-size:1.6em; line-height:1;
  color:var(--color-accent); transition:transform var(--dur-base) var(--ease-out); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq__body{ padding-bottom:var(--space-3); max-width:72ch; color:var(--color-muted); }
.faq details[open] .faq__body{ animation:kit-fade var(--dur-base) var(--ease-out) both; }
@keyframes kit-fade{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none; } }

/* ---------------- Rail (scroll-snap carrousel) ---------------- */
.rail{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(72vw,1fr);
  gap:var(--space-3); overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  padding-inline:var(--gutter); margin-inline:calc(var(--gutter)*-1);
  padding-bottom:var(--space-2); scrollbar-width:none; -ms-overflow-style:none; }
.rail::-webkit-scrollbar{ display:none; }
.rail{ align-items:start; }
@media (min-width:48rem){ .rail{ grid-auto-columns:minmax(22rem,1fr); } }
.rail > *{ scroll-snap-align:start; }
.rail-nav{ display:flex; gap:.5rem; margin-top:var(--space-2); }
.rail-nav button{ width:44px; height:44px; border-radius:var(--radius-pill); border:1px solid var(--color-border);
  background:transparent; color:var(--color-text); font-size:1.1rem; cursor:pointer; }
.rail-nav button:hover{ background:var(--color-text); color:var(--color-bg); }
.rail-nav button[disabled]{ opacity:.3; cursor:default; }

/* ---------------- Marquee ---------------- */
.marquee{ display:flex; overflow:hidden; border-block:1px solid var(--color-hairline);
  padding-block:var(--space-2); }
.marquee__track{ display:flex; flex:0 0 auto; gap:var(--space-4); padding-right:var(--space-4);
  animation:kit-marquee 32s linear infinite; }
.marquee span{ font-family:var(--font-display); font-weight:var(--weight-display);
  font-size:var(--step-2); letter-spacing:var(--tracking-display); white-space:nowrap; color:var(--color-muted); }
.marquee span em{ font-style:normal; color:var(--color-accent); }
/* --duo: woord om woord de twee huisstijlkleuren. Werkt alleen met een even
   aantal spans in de track — kit.js dupliceert in hele reeksen, dus de
   afwisseling loopt door in de kopie. */
.marquee--duo span{ color:var(--color-accent); }
.marquee--duo span:nth-child(even){ color:var(--color-accent-2); }
.marquee--duo span em{ color:currentColor; opacity:.4; }
@keyframes kit-marquee{ to{ transform:translateX(-100%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* ---------------- Sticky CTA-balk (mobiel) ---------------- */
.applybar{ position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
  padding:.75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  background:var(--brand-ink); color:#fff; border-top:1px solid rgba(255,255,255,.14);
  transform:translateY(110%); transition:transform var(--dur-base) var(--ease-out); }
.applybar.is-on{ transform:none; }
.applybar__txt{ font-size:var(--step--1); line-height:1.25; }
.applybar__txt strong{ display:block; font-family:var(--font-display); font-weight:800; font-size:var(--step-0); }
@media (min-width:60rem){ .applybar{ display:none; } }

/* ---------------- Voortgangsbalk ---------------- */
.progress{ position:fixed; top:0; left:0; height:3px; width:100%; transform-origin:0 50%;
  transform:scaleX(0); background:var(--color-accent); z-index:90; }

/* ---------------- Footer ---------------- */
.site-foot{ background:var(--brand-ink); color:#fff; --color-text:#fff;
  --color-muted:rgba(255,255,255,.6); --color-hairline:rgba(255,255,255,.14); padding-block:var(--space-5); }
.site-foot a{ text-decoration:none; color:var(--color-muted); }
.site-foot a:hover{ color:#fff; }

/* ---------------- Scroll-reveal ---------------- */
[data-reveal]{ opacity:1; }
.js [data-reveal]{ opacity:0; transform:translateY(var(--reveal-y)); }
.js [data-reveal].is-in{ opacity:1; transform:none;
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  transition-delay:var(--reveal-delay,0ms); }
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; }
}

/* ---------------- Utilities ---------------- */
.u-center{ text-align:center; margin-inline:auto; }
.u-center p{ margin-inline:auto; }
.u-accent{ color:var(--color-accent); }
.u-mt{ margin-top:var(--space-4); }
.u-pad-b{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
@media (min-width:60rem){ .u-pad-b{ padding-bottom:0; } }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------------- Beeldplaceholders (zolang er geen foto's zijn) ----------------
   Zet class="ph" op .media of .hero__bg. Netter dan een slechte stockfoto.
   Verwijderen zodra de echte foto's er staan. */
.ph{ position:relative; background:
   linear-gradient(135deg, color-mix(in oklab,var(--brand-accent) 22%, var(--brand-ink)) 0%,
   var(--brand-ink) 55%, color-mix(in oklab,var(--brand-ink) 80%, #000) 100%); }
.ph::after{ content:""; position:absolute; inset:0; opacity:.16; mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 9px); }
.hero__bg.ph{ z-index:-2; }

/* ============================================================
   COMPACTE, DYNAMISCHE BLOKKEN
   ============================================================ */

/* ---------------- Stats compact ---------------- */
.stats--compact{ gap:var(--space-2); grid-template-columns:repeat(auto-fit,minmax(min(50%,9rem),1fr));
  border-block:1px solid var(--color-hairline); padding-block:var(--space-3); }
.stats--compact .stat__val{ font-size:var(--step-2); }
.stats--compact .stat__lbl{ margin-top:.15em; }

/* ---------------- Perks: compacte arbeidsvoorwaarden ----------------
   Twee kolommen, dunne scheidingslijn, één regel per punt.
   Vervangt de zware .numbered-lijst waar het alleen om opsomming gaat. */
.perks{ list-style:none; margin:0; padding:0; display:grid; gap:0;
  grid-template-columns:1fr; }
@media (min-width:52rem){ .perks{ grid-template-columns:1fr 1fr; column-gap:clamp(2rem,4vw,4rem); } }
.perks > li{ display:grid; grid-template-columns:auto 1fr; gap:var(--space-2);
  align-items:baseline; padding-block:.9rem; border-top:1px solid var(--color-hairline); }
.perks > li::before{ content:""; width:.55rem; height:.55rem; border-radius:var(--radius-pill);
  background:var(--color-accent); transform:translateY(-.15em); }
.perks b{ font-family:var(--font-display); font-weight:700; letter-spacing:-.01em;
  overflow-wrap:break-word; hyphens:auto; }
.perks span{ color:var(--color-muted); }
@media (min-width:52rem){ .perks > li:nth-child(-n+2){ border-top:0; } }

/* ---------------- Timeline: compacte procedure met voortgangslijn ---------------- */
.timeline{ position:relative; list-style:none; margin:0; padding:0 0 0 3.6rem; counter-reset:tl; }
.timeline::before{ content:""; position:absolute; left:1.25rem; top:1.4rem; bottom:1.4rem;
  width:3px; border-radius:3px; background:var(--color-hairline); z-index:0; }
.timeline__fill{ position:absolute; left:1.25rem; top:1.4rem; width:3px; border-radius:3px; height:0; z-index:0;
  background:linear-gradient(180deg, var(--color-accent), color-mix(in oklab,var(--color-accent) 55%,transparent));
  transition:height var(--dur-slow) var(--ease-out); }
.timeline > li{ counter-increment:tl; position:relative; z-index:1; margin-bottom:.6rem;
  padding:1rem 1.15rem; border-radius:var(--radius-md);
  background:transparent; border:1px solid transparent;
  opacity:.58; transform:translateX(10px);
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
             background var(--dur-base), border-color var(--dur-base); }
.timeline > li.is-in{ opacity:1; transform:none;
  background:var(--color-surface); border-color:var(--color-hairline); }
.timeline > li::before{ content:counter(tl);
  position:absolute; left:-3.4rem; top:.85rem; width:2.5rem; height:2.5rem; border-radius:var(--radius-pill);
  display:grid; place-items:center; font-family:var(--font-display);
  font-size:1.05rem; font-weight:800; font-variant-numeric:tabular-nums; line-height:1;
  background:var(--color-bg); color:var(--color-muted); border:3px solid var(--color-hairline);
  transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast),
             transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.timeline > li.is-in::before{ background:var(--color-accent); color:var(--color-on-accent);
  border-color:var(--color-accent); transform:scale(1.06);
  box-shadow:0 0 0 6px color-mix(in oklab, var(--color-accent) 14%, transparent); }
.timeline h3{ font-size:var(--step-1); margin:0 0 .2em; display:flex; flex-wrap:wrap;
  align-items:center; gap:.5em .7em; }
.timeline p{ margin:0; color:var(--color-muted); font-size:var(--step--1); max-width:52ch; }
.timeline .when{ font-family:var(--font-body); font-weight:700; font-size:.6rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent);
  padding:.32em .7em; border-radius:var(--radius-pill);
  background:color-mix(in oklab, var(--color-accent) 12%, transparent);
  border:1px solid color-mix(in oklab, var(--color-accent) 26%, transparent); }
@media (prefers-reduced-motion: reduce){
  .timeline > li{ opacity:1; transform:none; }
}

/* ---------------- Quote groot, netjes afgebroken ---------------- */
.quote-xl{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:var(--step-2); line-height:1.15; margin:0 0 var(--space-2);
  text-wrap:balance; overflow-wrap:break-word; hyphens:auto; }
.quote-card blockquote{ font-family:var(--font-display); font-weight:600; font-size:var(--step-1);
  line-height:1.25; letter-spacing:-.015em; margin:0 0 var(--space-2);
  text-wrap:pretty; overflow-wrap:break-word; hyphens:auto; }
.quote-card{ display:flex; flex-direction:column; gap:0; padding:0; overflow:hidden; }
.quote-card .media{ margin:0; border-radius:var(--radius-md) var(--radius-md) 0 0; }
.quote-card__body{ padding:var(--space-3); }
.quote-card figcaption{ font-size:var(--step--1); color:var(--color-muted); }

/* ---------------- Reveal-varianten ---------------- */
.js [data-reveal="left"]{ transform:translateX(calc(var(--reveal-y)*-1.4)); }
.js [data-reveal="right"]{ transform:translateX(calc(var(--reveal-y)*1.4)); }
.js [data-reveal="scale"]{ transform:scale(.94); }
.js [data-reveal="rise"]{ transform:translateY(calc(var(--reveal-y)*1.8)); }
.js [data-reveal].is-in{ transform:none; }

/* ---------------- Split-varianten voor beeldverhouding ----------------
   Standaard is 50/50. Met een staande foto wordt die kolom te hoog en
   ontstaat er loze ruimte naast de tekst: maak de beeldkolom dan smaller. */
@media (min-width:56rem){
  .split--media-sm{ grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr); }
  .split--media-lg{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); }
  .split--flip > :first-child{ order:2; }
}

/* ---------------- CTA-band: ruimte onder de knoppen ---------------- */
.hero--cta{ min-height:auto; padding-block:clamp(4.5rem,11vw,8rem); }
.hero--cta .btn-row{ margin-bottom:var(--space-2); }

/* ============================================================
   MOBIEL EN TABLET
   ============================================================ */

/* --- Tablet: vier kolommen worden twee --- */
@media (min-width:48rem) and (max-width:63.99rem){
  .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats--compact{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .rail{ grid-auto-columns:minmax(20rem,1fr); }
}

/* --- Mobiel --- */
@media (max-width:47.99rem){
  :root{ --section-y:clamp(3rem,9vw,4.5rem); --space-5:3rem; --space-6:4rem; }

  .hero{ min-height:min(86svh,700px); padding-block:clamp(3.5rem,12vw,5.5rem); }
  .hero h1{ max-width:none; }
  .hero__meta{ gap:.4rem; }
  .hero__meta li{ padding:.35em .8em; }
  .hero--cta{ padding-block:clamp(3.5rem,12vw,5rem); }

  .site-head__in{ min-height:60px; }
  /* het logo moet mee kunnen krimpen, anders duwt het de CTA-knop naar een
     derde regel op smalle telefoons */
  .site-head__logo{ min-width:0; }
  .site-head__logo img{ height:28px; max-width:min(150px, 38vw); }
  .sec-head{ margin-bottom:clamp(1.5rem,6vw,2.25rem); }

  /* stats: twee per rij blijft leesbaar, vier wordt te smal */
  .stats,.stats--compact{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2) var(--space-2); }
  .stats--compact .stat__val{ font-size:var(--step-1); }

  .grid{ gap:var(--space-3); }
  .card{ padding:var(--space-2) var(--space-3); }

  /* timeline: smallere inspringing, kleiner rondje */
  .timeline{ padding-left:2.9rem; }
  .timeline::before,.timeline__fill{ left:1rem; }
  .timeline > li{ padding:.8rem .85rem; }
  .timeline > li::before{ left:-2.9rem; width:2.05rem; height:2.05rem; font-size:.9rem; top:.8rem; }
  .timeline h3{ font-size:var(--step-0); }

  .quote-xl{ font-size:var(--step-1); }
  .quote-card blockquote{ font-size:var(--step-0); }

  .faq summary{ font-size:var(--step-0); padding:var(--space-2) 0; }

  .rail{ grid-auto-columns:minmax(78vw,1fr); }
  .marquee span{ font-size:var(--step-1); }

  /* knoppen op volle breedte lezen rustiger op een smal scherm */
  .btn-row{ gap:.6rem; }
  .hero .btn-row .btn,.hero--cta .btn-row .btn{ flex:1 1 100%; justify-content:center; }
}

/* --- Heel smal (360px en kleiner) --- */
@media (max-width:23.5rem){
  .stats,.stats--compact{ grid-template-columns:1fr; }
  .applybar__txt{ font-size:.75rem; }
  /* logo + CTA moeten ook op 320px op één regel passen */
  .site-head__in{ gap:var(--space-2); }
  .site-head__logo img{ max-width:32vw; }
}

/* ---------------- Ankerlinks vrij houden van de sticky header ---------------- */
:is(section,div,footer)[id]{ scroll-margin-top:5.5rem; }

/* ---------------- Menu op mobiel en tablet ----------------
   Geen hamburger: het menu zakt naar een tweede regel die horizontaal
   scrollt. Minder klikken, geen JavaScript, en de CTA blijft altijd zichtbaar. */
@media (max-width:59.99rem){
  .site-head__in{ flex-wrap:wrap; row-gap:0; padding-bottom:.35rem; }
  .site-head__logo,.site-head__in > a:first-child{ flex:1 1 auto; }
  .site-head__in > .btn{ flex:0 0 auto; }
  .site-nav{ display:flex; order:3; flex:1 0 100%;
    gap:1.15rem; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
    padding-bottom:.15rem; margin-inline:calc(var(--gutter)*-1); padding-inline:var(--gutter);
    -webkit-overflow-scrolling:touch; }
  .site-nav::-webkit-scrollbar{ display:none; }
  .site-nav a{ white-space:nowrap; padding:.3em 0; }
}

/* ============================================================
   CORPORATE — blokken voor een bedrijfshomepage
   ============================================================ */

/* ---------------- Logobalk ----------------
   Klantlogo's als eerste bewijs. Een grid houdt de rij netjes ook bij zes of
   zeven logo's van verschillende breedte; flex-wrap geeft een rafelige tweede rij.
   Grijstinten zodat ze de huisstijl niet vervuilen, kleur bij hover. */
.logobar{ display:grid; gap:clamp(1.25rem,3vw,2.5rem) clamp(1.5rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(clamp(112px,15vw,150px),1fr));
  align-items:center; justify-items:center; padding-block:var(--space-2); }
.logobar img{ max-height:clamp(26px,3.4vw,38px); width:auto; max-width:100%; opacity:.5;
  filter:grayscale(1) contrast(.85);
  transition:opacity var(--dur-base), filter var(--dur-base), transform var(--dur-base) var(--ease-out); }
.logobar img:hover{ opacity:1; filter:none; transform:translateY(-2px); }
.sec--dark .logobar img{ filter:grayscale(1) brightness(0) invert(1); opacity:.55; }
.sec--dark .logobar img:hover{ opacity:1; }
.logobar__claim{ margin:0 auto var(--space-3); max-width:none; text-align:center;
  font-size:var(--step--1); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-muted); }
.logobar__claim b{ color:var(--color-accent); letter-spacing:.06em; }

/* ---------------- Diensten: genummerde rijen met pijl ----------------
   Leest sneller dan kaartjes en houdt de belofte per dienst op één regel. */
.services{ list-style:none; margin:0; padding:0; border-top:1px solid var(--color-hairline); }
.services > li{ border-bottom:1px solid var(--color-hairline); }
.services a{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--space-3);
  padding:clamp(1.1rem,2.4vw,1.8rem) 0; text-decoration:none;
  transition:padding-inline var(--dur-base) var(--ease-out), color var(--dur-base); }
.services a:hover{ padding-inline:var(--space-2) var(--space-1); color:var(--color-accent); }
.services h3{ margin:0 0 .2em; font-size:var(--step-2); }
.services p{ margin:0; color:var(--color-muted); font-size:var(--step--1); max-width:60ch; }
.services .arrow{ font-size:var(--step-2); color:var(--color-accent); line-height:1;
  transition:transform var(--dur-base) var(--ease-out); }
.services a:hover .arrow{ transform:translateX(6px); }

/* ---------------- Casekaart met resultaat ----------------
   Het cijfer staat op de kaart, niet pas achter een klik. */
.case{ display:flex; flex-direction:column; text-decoration:none; height:100%;
  border-radius:var(--radius-md); overflow:hidden; background:var(--color-surface);
  border:1px solid var(--color-hairline);
  transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.case:hover{ transform:translateY(-4px); border-color:var(--color-accent); }
.case .media{ border-radius:0; }
.case__body{ padding:var(--space-3); display:flex; flex-direction:column; gap:.6rem; flex:1; }
.case__client{ font-size:var(--step--1); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--color-muted); }
.case h3{ margin:0; font-size:var(--step-1); }
.case__result{ display:flex; align-items:baseline; gap:.5em; margin-top:auto;
  padding-top:var(--space-2); border-top:1px solid var(--color-hairline); }
.case__result b{ font-family:var(--font-display); font-weight:var(--weight-display);
  font-size:var(--step-2); line-height:1; color:var(--color-accent);
  font-variant-numeric:tabular-nums; letter-spacing:var(--tracking-display); }
.case__result span{ font-size:var(--step--1); color:var(--color-muted); }

/* ---------------- Labels ---------------- */
.tags{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:0; padding:0; }
.tags li{ font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.3em .7em; border-radius:var(--radius-pill);
  border:1px solid var(--color-border); color:var(--color-muted); }

/* ---------------- Contactblok met persoon ----------------
   Een naam en een gezicht bij de CTA verlaagt de drempel meetbaar. */
.person{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.person__photo{ width:clamp(64px,9vw,96px); aspect-ratio:1; border-radius:var(--radius-pill);
  overflow:hidden; flex:none; background:var(--color-surface); }
.person__photo img{ width:100%; height:100%; object-fit:cover; }
.person__name{ font-family:var(--font-display); font-weight:700; margin:0; }
.person__role{ font-size:var(--step--1); color:var(--color-muted); margin:0; }

/* ---------------- Statement: één zin, groot ----------------
   De agency-adem in een verder zakelijke pagina. Eén stelling, vollédig scherm
   breed, in de accentkleur. Maximaal één per pagina — anders is het geen statement. */
.statement{ background:var(--color-accent); color:var(--color-on-accent);
  --color-text:var(--color-on-accent); --color-muted:color-mix(in oklab,var(--color-on-accent) 72%,transparent);
  --color-border:color-mix(in oklab,var(--color-on-accent) 35%,transparent);
  padding-block:clamp(4rem,10vw,8rem); overflow:hidden; }
.statement p{ font-family:var(--font-display); font-weight:var(--weight-display);
  letter-spacing:var(--tracking-display); line-height:1.02;
  font-size:clamp(2rem, 1rem + 5.2vw, 4.6rem);
  max-width:20ch; margin:0; text-wrap:balance; }
.statement p.statement__by{ margin:var(--space-3) 0 0; max-width:none; line-height:1.4; font-family:var(--font-body); font-weight:600;
  font-size:var(--step--1); letter-spacing:.1em; text-transform:uppercase; opacity:.75; }

/* ---------------- Cijferband ----------------
   Cijfers op een donkere band in plaats van tussen de tekst. Leest als een
   feitenblok en breekt het ritme van de pagina. */
.statband{ background:var(--brand-ink); color:#fff;
  --color-text:#fff; --color-muted:rgba(255,255,255,.62); --color-hairline:rgba(255,255,255,.16);
  padding-block:clamp(2.5rem,6vw,4.5rem); }
.statband .stats{ gap:var(--space-3); }
.statband .stat__val{ font-size:clamp(2.2rem,1.2rem + 3.2vw,3.6rem); }
.statband .stat{ padding-left:var(--space-3); border-left:2px solid var(--color-accent); }

/* ---------------- Diensten met beeldvoorbeeld bij hover ----------------
   Desktop-only. Het beeld volgt de cursor over de dienstenrijen. Puur sfeer:
   de pagina werkt volledig zonder. */
.hovermedia{ position:fixed; top:0; left:0; z-index:40; pointer-events:none;
  width:clamp(220px,22vw,340px); aspect-ratio:4/3; border-radius:var(--radius-md);
  overflow:hidden; opacity:0; transform:translate(-50%,-50%) scale(.92);
  transition:opacity var(--dur-fast), transform var(--dur-base) var(--ease-out); }
.hovermedia img{ width:100%; height:100%; object-fit:cover; }
.hovermedia.is-on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
@media (max-width:63.99rem), (prefers-reduced-motion: reduce){ .hovermedia{ display:none; } }

/* ============================================================
   VIDEO — filmhero en verticaal drieluik
   Toegevoegd voor demo's met echt filmmateriaal. Video's spelen
   gedempt, alleen wanneer ze in beeld staan, en geluid is altijd
   een bewuste klik. Zonder JavaScript blijft de poster staan.
   ============================================================ */

.hero__bg video{ display:block; }
.hero__sound{ position:absolute; right:var(--gutter); bottom:1.25rem; z-index:3; }

/* Ronde mediaknop op beeld (geluid aan/uit) */
.mediabtn{ display:inline-flex; align-items:center; gap:.5em; min-height:44px;
  padding:.5em .95em; border-radius:var(--radius-pill); cursor:pointer;
  font:inherit; font-size:var(--step--1); font-weight:700; line-height:1; white-space:nowrap;
  color:#fff; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.mediabtn:hover{ background:rgba(0,0,0,.65); transform:translateY(-2px); }
.mediabtn svg{ width:1.05em; height:1.05em; flex:none; fill:currentColor; }
/* Drie toestanden, gestuurd door data-state op de knop (kit.js zet 'm).
   Voor JS geladen is staat de knop op hidden, dus er flitst niets. */
.mediabtn [data-when]{ display:none; align-items:center; gap:.5em; }
.mediabtn[data-state="paused"] [data-when="play"]{ display:inline-flex; }
.mediabtn[data-state="muted"]  [data-when="off"]{ display:inline-flex; }
.mediabtn[data-state="sound"]  [data-when="on"]{ display:inline-flex; }

/* Drieluik met staande video's (9:16) */
.videowall{ display:grid; gap:var(--space-3); grid-template-columns:repeat(3,minmax(0,1fr)); }
.vframe{ margin:0; display:flex; flex-direction:column; gap:.8rem; }
.vframe__box{ position:relative; aspect-ratio:9/16; overflow:hidden;
  border-radius:var(--radius-md); background:var(--color-surface); isolation:isolate; }
.vframe__box video,.vframe__box img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:var(--img-treatment); }
.vframe__box .mediabtn{ position:absolute; right:.7rem; bottom:.7rem; z-index:2; }
.vframe__lbl{ position:absolute; left:0; top:0; z-index:2; padding:.45em .9em;
  background:var(--color-accent); color:var(--color-on-accent);
  font-size:var(--step--1); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.vframe figcaption{ font-size:var(--step--1); color:var(--color-muted); }
.vframe figcaption b{ display:block; margin-bottom:.15em; font-family:var(--font-display);
  font-weight:700; font-size:var(--step-0); letter-spacing:-.01em; color:var(--color-text); }

/* Onder 52rem worden drie staande video's te smal: dan een snap-rail. */
@media (max-width:52rem){
  .videowall{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(68vw,1fr);
    overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    padding-inline:var(--gutter); margin-inline:calc(var(--gutter)*-1);
    padding-bottom:var(--space-2); scrollbar-width:none; -ms-overflow-style:none; }
  .videowall::-webkit-scrollbar{ display:none; }
  .videowall > *{ scroll-snap-align:start; }
}

/* ---------------- Mozaïek ----------------
   Beeldblok dat een lange tekstsectie openbreekt: zes vlakken van verschillende
   maat in één raster. Dit is de enige plek in de kit waar bijsnijden bewust
   gebeurt (`object-fit:cover`), dus kies beelden met het onderwerp in het midden
   — of stuur bij met data-pos. */
.mosaic{ display:grid; gap:clamp(.5rem,1.1vw,1rem);
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:clamp(58px,7vw,104px); }
.mosaic > figure{ margin:0; position:relative; overflow:hidden;
  border-radius:var(--radius-md); background:var(--color-surface); }
.mosaic img{ width:100%; height:100%; object-fit:cover; filter:var(--img-treatment);
  transition:transform var(--dur-slow) var(--ease-out); }
.mosaic > figure:hover img{ transform:scale(1.045); }
.mosaic figure[data-pos="left"] img{ object-position:22% center; }
.mosaic figure[data-pos="right"] img{ object-position:78% center; }
.mosaic figure[data-pos="top"] img{ object-position:center 22%; }
.mosaic figure[data-pos="bottom"] img{ object-position:center 78%; }

.mosaic > figure:nth-child(1){ grid-column:1/8;  grid-row:1/4; }
.mosaic > figure:nth-child(2){ grid-column:8/13; grid-row:1/3; }
.mosaic > figure:nth-child(3){ grid-column:8/13; grid-row:3/5; }
.mosaic > figure:nth-child(4){ grid-column:1/5;  grid-row:4/7; }
.mosaic > figure:nth-child(5){ grid-column:5/8;  grid-row:4/7; }
.mosaic > figure:nth-child(6){ grid-column:8/13; grid-row:5/7; }

@media (max-width:63.99rem){
  .mosaic{ grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:clamp(64px,9.5vw,112px); }
  .mosaic > figure:nth-child(1){ grid-column:1/7; grid-row:1/4; }
  .mosaic > figure:nth-child(2){ grid-column:1/4; grid-row:4/6; }
  .mosaic > figure:nth-child(3){ grid-column:4/7; grid-row:4/6; }
  .mosaic > figure:nth-child(4){ grid-column:1/4; grid-row:6/8; }
  .mosaic > figure:nth-child(5){ grid-column:4/7; grid-row:6/8; }
  .mosaic > figure:nth-child(6){ grid-column:1/7; grid-row:8/10; }
}
@media (max-width:33rem){
  .mosaic{ grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:clamp(56px,15vw,96px); }
  .mosaic > figure:nth-child(1){ grid-column:1/5; grid-row:1/4; }
  .mosaic > figure:nth-child(2){ grid-column:1/3; grid-row:4/6; }
  .mosaic > figure:nth-child(3){ grid-column:3/5; grid-row:4/6; }
  .mosaic > figure:nth-child(4){ grid-column:1/3; grid-row:6/8; }
  .mosaic > figure:nth-child(5){ grid-column:3/5; grid-row:6/8; }
  .mosaic > figure:nth-child(6){ grid-column:1/5; grid-row:8/10; }
}