/* =========================================================
   Resato — Base styles
   Reset, typography, primitives shared across all pages.
   Imports tokens.css.
   ========================================================= */

@import url('./tokens.css');

/* ---------- Webfonts — zelf gehost (2026-08-19) ----------
   Stonden hiervoor op fonts.googleapis.com. Zelf hosten omdat de bundel offline
   moet werken en omdat een externe bron ons kan breken zonder dat wij iets doen —
   precies wat er met lucide@latest gebeurde (R117).

   Twee bestanden voor vijf gewichten: dit zijn VARIABELE fonts, dus Inter dekt
   400/500/600 en Space Grotesk 500/700 uit één file. Samen 72 kB.

   Alleen de latin-subset. Die dekt de vier talen van dit project: Nederlands,
   Engels, Duits (ä ö ü ß) en Frans (é è ê ç à) zitten in U+0000–00FF. latin-ext
   is voor Pools, Hongaars en Roemeens en is hier dus niet nodig. Komt er een taal
   bij die het wél vraagt, dan hoort daar een extra subset bij.

   `font-display: swap` gedraagt zich net als de oude `&display=swap` in de URL. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('./assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('./assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote {
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }
img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
/* R123: dubbeltik-zoom uitzetten op wat je aantikt, niet op de pagina.
   Zonder `touch-action` houdt de browser op elk interactief element de dubbeltik-zoom
   actief en wacht ~300ms of er een tweede tik komt. Een tik die net te snel of net naast
   valt, zoomt dan in plaats van te activeren. Dat is wat "het menu zoomt in bij een
   net-verkeerde tik" is. `manipulation` laat scrollen en knijpzoomen ONGEMOEID — de
   bezoeker kan de pagina dus gewoon nog vergroten, alleen de dubbeltik op een knop of
   link is geen zoomgebaar meer. Nooit `user-scalable=no` gebruiken; dat breekt zoomen
   echt en is een toegankelijkheidsfout. */
a, button, summary, label, [role="button"], .btn { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
:focus-visible {
  outline: 2px solid var(--ignition);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ---------- Document ---------- */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* ANKERSPRONGEN MOETEN ONDER DE FLOATNAV LANDEN, NIET ERACHTER.
     `scroll-behavior: smooth` stond hier al, maar er was geen offset: een sprong naar #x zette het
     doel op viewport-top — precies waar de zwevende header staat. Gemeten 2026-08-28: de kop van
     het doelblok viel deels achter de balk, op alle 168 anker-links in de bundel. Je ziet het
     alleen als je zo'n link volgt, dus het bleef staan sinds de ankers in gebruik kwamen (R12/R43).
     De waarde is AFGELEID van .floatnav (regel 293) en geen los getal: dezelfde `top`-clamp, plus
     58px balkhoogte, plus lucht. Verandert de balk van maat, dan hoort deze regel mee te bewegen —
     vandaar de verwijzing hier én daar. Op `html`, niet per doel: zo geldt hij ook voor
     scrollIntoView en voor elk anker dat later bijkomt. */
  scroll-padding-top: calc(clamp(10px, 1.5vw, 18px) + 58px + 1.5rem);
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  /* --mist, niet --paper: tokens.css noemt mist zelf de default body, en dat is
     wat de site al toont. Tot 2026-08-31 zette elke pagina dat inline recht. */
  background: var(--mist);
  overflow-x: hidden;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Typography primitives ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}
.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--brand);
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ignition);
  display: inline-flex;
  /* flex-start, niet center. Breekt de eyebrow over twee regels — dat gebeurt op smalle
     viewports bij de langere labels — dan centreert `center` het driehoekje tegen het HELE
     blok, waardoor het tussen beide regels in komt te hangen in plaats van naast de eerste. */
  align-items: flex-start;
  gap: var(--space-3);
}
.eyebrow::before {
  content: '';
  width: 14px;
  height: 17px;
  background-color: var(--ignition);
  -webkit-mask: url('./assets/eyebrow.svg') no-repeat center / contain;
          mask: url('./assets/eyebrow.svg') no-repeat center / contain;
  flex: none;
  /* Optisch centreren op de EERSTE regel. De px-waarde is de terugval voor browsers
     zonder `lh`-eenheid; de calc erna schaalt mee met de regelhoogte. */
  margin-top: 2px;
  margin-top: calc((1lh - 17px) / 2);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: color-mix(in oklab, var(--ink) 80%, transparent);
}

.spec-value {
  font-family: var(--font-body);
  font-weight: 500;
  font-feature-settings: 'tnum' 1, 'cv11' 1;
}

/* ---------- Container ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 1.05rem 1.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  will-change: transform;
}
.btn .arrow {
  width: 18px; height: 12px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-mid);
}
.btn:hover .arrow { transform: translateX(4px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--ignition);
  color: #fff;
}
.btn--primary:hover { background: var(--ignition-deep); }

.btn--glass {
  background: var(--glass-20);
  color: #fff;
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--glass:hover {
  background: var(--glass-30);
  border-color: rgba(255, 255, 255, 0.6);
}

.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn--outline:hover {
  background: var(--ignition);
  border-color: var(--ignition);
  color: #fff;
}

/* ---------- Section base ---------- */
.section {
  padding-block: clamp(4rem, 9vw, 8rem);
  position: relative;
}
/* Surface helpers — plaats op een section-root.
   Surface-following blokken (info/process/stats/machine/usp/trust/news/faq/
   split/applications) mogen GEEN eigen `background:` in hun block-CSS hebben,
   anders overrulet die deze helper. Always-dark blokken (hero-card/subhero/
   midcta/cases/contact) krijgen geen helper — die hebben dark als identiteit. */
.section--mist   { background: var(--mist); }
.section--canvas { background: var(--canvas); }
.section--dark {
  background: var(--gradient-hero-reverse);
  color: #fff;
}
.section--dark .h1,
.section--dark .h2,
.section--dark .h3 { color: #fff; }
.section--dark .lead { color: rgba(255, 255, 255, 0.9); }

/* ---------- Reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
.reveal[data-stagger="1"] { transition-delay: 80ms; }
.reveal[data-stagger="2"] { transition-delay: 160ms; }
.reveal[data-stagger="3"] { transition-delay: 240ms; }
.reveal[data-stagger="4"] { transition-delay: 320ms; }
.reveal[data-stagger="5"] { transition-delay: 400ms; }

/* ---------- Contact-band (R4: vaste conversie-afsluiter) ----------
   Site-brede standaard-afsluiter met het HubSpot-contactformulier. Pagina's die
   `.contact` inline overrulen (contact.html: paper voor R1; index.html: native form)
   winnen via hun eigen <style> na deze base.css. Zie output/reference/forms.md. */
.contact { position: relative; overflow: hidden; isolation: isolate; padding: clamp(4rem, 8vw, 7rem) clamp(16px, 1.6vw, 32px); background: var(--canvas); color: var(--ink); }
.contact::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(10,22,40,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(10,22,40,0.045) 1px, transparent 1px); background-size: 80px 80px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 22% 28%, #000, transparent 85%); mask-image: radial-gradient(ellipse 70% 70% at 22% 28%, #000, transparent 85%); pointer-events: none; z-index: 0; }
.contact__inner { position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.contact__copy .eyebrow { color: var(--ignition); }
.contact__copy h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.04; letter-spacing: var(--tracking-heading); color: var(--brand); margin-top: var(--space-4); }
.contact__copy > p { margin-top: var(--space-4); color: color-mix(in oklab, var(--ink) 70%, transparent); font-size: var(--fs-lead); line-height: 1.55; max-width: 46ch; }
.contact__points { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.contact__point { display: flex; align-items: center; gap: var(--space-4); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.contact__point span { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--paper); border: 1px solid var(--steel); display: grid; place-items: center; color: var(--ignition); }
.contact__point [data-lucide] { width: 17px; height: 17px; }
.contact__form { background: var(--paper); border: 1px solid var(--steel); border-radius: clamp(16px, 1.8vw, 24px); box-shadow: var(--shadow-mid); padding: clamp(1.5rem, 3vw, 2.5rem); }
.contact__alt { grid-column: 1 / -1; text-align: center; font-size: 0.85rem; color: color-mix(in oklab, var(--ink) 60%, transparent); margin-top: var(--space-4); }
.contact__alt a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.contact__alt a:hover { color: var(--ignition); }
.contact-form__slot .hs-form-frame:empty::before { content: 'Formulier wordt geladen…'; display: block; padding: 1.1rem 1.25rem; border: 1px dashed var(--steel); border-radius: var(--radius-md); color: color-mix(in oklab, var(--ink) 50%, transparent); font-size: 0.9rem; }
/* R8: het HubSpot-formulier rendert in een CROSS-ORIGIN iframe (js-eu1.hsforms.net).
   De velden zelf zijn daardoor NIET vanaf hier te stylen; zie het Formulier-blok in de
   styleguide. Wat we wel kunnen: het frame normaliseren. Een iframe is standaard
   display:inline en krijgt dan een baseline-kier eronder. */
.contact-form__slot iframe { display: block; width: 100%; border: 0; }
@media (max-width: 900px) { .contact__inner { grid-template-columns: 1fr; } }

/* R22: cookietabel op /cookieverklaring/. CookieYes vult .cky-audit-table-element
   zelf; wij geven alleen ruimte en laten een brede tabel binnen zijn eigen kader
   scrollen in plaats van de pagina. Blijft de tool weg, dan is dit element leeg en
   niet zichtbaar — de verklaring staat op eigen benen. */
.cky-audit-table-element { margin-top: var(--space-6); overflow-x: auto; }
.cky-audit-table-element:not(:empty) { border-top: 1px solid var(--steel); padding-top: var(--space-6); }

/* ---------- Utility ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ===================================================================
   DE CHROME-GRENS — 1320px, één getal voor vier headers
   ===================================================================
   Boven deze grens staat het uitgeschreven menu, eronder de burger + `.mobilemenu`.
   Vier headervarianten (`.nav` op de 4 homepages, `.subhero__nav` op 165,
   `.mhero__nav` op 4, plus de `.floatnav` overal) én het mobiele menu hingen elk aan
   hun eigen media query. Ze stonden op 980/981 behalve de homepage-nav, die na de
   hero-herbouw op 1100 stond — en `.mobilemenu` bleef op 981. Dat gaf een band van
   981-1099px waarin de burger zichtbaar was maar het menu `display: none`: de
   knop deed niets.

   Waarom 1320 en niet 980: gemeten (tools/navfit.py) heeft de nav-rij nodig
   1153px (nl), 1164 (de), 1143 (en) en 1258 (fr) — tegen 1001px rail op 1100px
   viewport. Van 981 tot 1279 viel daardoor "Kennis & referenties" én "Over ons"
   over TWEE regels, op de hele site; in het Frans tot 1439. Het menu paste dus
   340 tot 460 pixels lang niet, precies het "net-passen" dat opviel.
   Vanaf 1320 past nl/de/en met 23-33px marge; fr past daar met de compacte
   band hieronder. 1366-brede laptops houden zo hun volledige menu.

   Wijzig je dit getal, wijzig dan ALLE plekken die naar deze grens verwijzen —
   ze zijn te vinden op "chrome-grens". */
.no-scroll { overflow: hidden; }
/* De scroll-lock hoort bij het mobiele menu, dus hij mag niet blijven hangen als dat
   menu verdwijnt. Zonder deze regel: open het menu op een smal venster, maak het
   venster breder, en `.mobilemenu` wordt `display: none` terwijl `body.no-scroll`
   blijft staan — de pagina staat vast, zonder zichtbare sluitknop, want de X zat in
   het verborgen menu. Opgelost in CSS en niet in JS, want de openMenu/closeMenu-code
   staat inline op alle 173 pagina's; deze regel staat één keer.
   (chrome-grens) */
@media (min-width: 1320px) { .no-scroll { overflow: visible; } }

/* Een menulabel mag NOOIT over twee regels vallen. Zonder dit brak de nav bij elke
   breedte waar hij net niet paste: "Kennis & referenties" en "Over ons" zakten naar
   een tweede regel en de hele headerbalk werd hoger. Een label dat niet past is een
   signaal dat de burger hoort te staan (dat regelt de chrome-grens), geen reden om
   de balk te laten groeien. */
.nav__items a, .subhero__menu a, .mhero__menu a { white-space: nowrap; }

/* De krappe band: van de chrome-grens tot 1440px past het menu er wel in, maar zonder
   ruimte over. Daar staat hij compacter — kleiner corps, kleinere tussenruimtes, een
   krappere cta. Gemeten (tools/navfit.py) is Frans de langste taal: die had op 1320px
   nog 82px tekort, en dat haalt deze band eruit. Vanaf 1440 gaat alles terug naar de
   ruime maat. Eén band voor alle vier de headers, dus geen taal- of paginaspecifieke
   uitzondering. (chrome-grens) */
@media (min-width: 1320px) and (max-width: 1439px) {
  .nav__items, .subhero__menu, .mhero__menu { gap: 0.9rem; font-size: 0.8125rem; }
  .nav__items { margin-right: 1rem; }
  .subhero__nav, .mhero__nav { gap: 1rem; }
  .nav__cta, .subhero__cta, .mhero__nav-cta {
    padding: 0.6rem 0.85rem !important; font-size: 0.8125rem !important;
  }
}

/* LET OP: `top` en de hoogte van dit blok bepalen `scroll-padding-top` op `html` (zie Document).
   Wijzig je de maat, pas die regel dan mee aan — anders landen ankersprongen weer achter de balk. */
/* ===== Floatnav (gedeeld component — verplaatst uit index.html zodat elke pagina de floatnav kan tonen) ===== */
.floatnav { position: fixed; top: clamp(10px, 1.5vw, 18px); left: 50%; z-index: 50; display: flex; align-items: center; flex-wrap: nowrap; gap: clamp(0.55rem, 1.2vw, 1.1rem); padding: 0.45rem 0.45rem 0.45rem 1.1rem; width: max-content; max-width: calc(100vw - 24px); background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(10, 22, 40, 0.08); border-radius: var(--radius-lg); box-shadow: var(--shadow-mid); opacity: 0; transform: translateX(-50%) translateY(-140%); pointer-events: none; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.floatnav.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.floatnav__logo { display: flex; flex: none; margin-right: clamp(0.5rem, 1.4vw, 1.1rem); }
.floatnav__logo img { height: 22px; width: auto; filter: brightness(0) saturate(100%) invert(19%) sepia(42%) saturate(1614%) hue-rotate(178deg) brightness(94%) contrast(94%); }
.floatnav__links { display: flex; flex-wrap: nowrap; gap: clamp(0.5rem, 1vw, 1.05rem); font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small); letter-spacing: var(--tracking-ui); min-width: 0; }
.floatnav__links a { color: rgba(10, 22, 40, 0.7); position: relative; padding-bottom: 3px; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out); }
.floatnav__links a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--ignition); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.floatnav__links a:hover, .floatnav__links a.is-active { color: var(--brand); }
.floatnav__links a:hover::after, .floatnav__links a.is-active::after { transform: scaleX(1); }
.floatnav__cta { padding: 0.6rem 0.95rem; font-size: var(--fs-small); flex: none; white-space: nowrap; }
@media (max-width: 1439px) {
  .floatnav { gap: 0.6rem; padding-left: 0.95rem; }
  .floatnav__links { font-size: 0.78rem; gap: 0.7rem; }
}
@media (max-width: 1319px) {   /* chrome-grens */
  .floatnav__links { display: none; }
  .floatnav { padding-left: 1.1rem; }
  .floatnav__menu { display: inline-flex; }
  /* Besluit Sandrino (2026-09-14): op de SMALSTE schermen heeft de pill twee onderdelen —
     logo en menuknop. De CTA komt terug zodra hij er echt bij past; zie de twee blokken
     hieronder voor waar die grens ligt en hoe hij gemeten is. */
  .floatnav__cta { display: none; }
}
/* GEMETEN DEFECT (2026-09-14) — waarom de CTA hierboven uit de mobiele floatnav is gehaald.
   De pill had drie kinderen die allemaal op `flex: none` en `nowrap` staan, dus bij
   `max-width: 100vw - 24px` krimpt er niets: de inhoud liep over de rand en wat daar het laatst
   staat (de burger) viel buiten beeld. Gemeten op /oplossingen/: logo 169 + CTA 204 + burger 38
   plus gaten en padding = 462px nodig tegen 366px beschikbaar op een 390px-scherm. Het menu was
   daarmee onbereikbaar zodra je scrolde — de enige toegang tot de navigatie, weg.
   De CTA verdwijnt alleen uit de PILL: hij staat op elke pagina in de header en onderaan in het
   contactblok. Zonder CTA is er op 320px 249px nodig tegen 296px beschikbaar. */

/* Waar de CTA terugkomt. Sandrino vroeg hem zo vroeg mogelijk terug; dit is wat er dan moet
   wijken. Er zijn drie dingen die ruimte vragen en het logo is het enige waar iets aan te doen
   valt: op 22px is de wordmark 169px breed, op 16px nog 123px. Dat is 46px winst en de wordmark
   blijft leesbaar (de regel "WATERJET TECHNOLOGY" wordt klein maar niet onleesbaar; visueel
   nagekeken). Onder 640px staat het logo daarom op 16px en is de knop compact, zonder pijl.

   Wat de pill dan nodig heeft, gemeten in de browser op de echte pagina's:

     taal   pill   viewport vanaf   grens hier
     EN     334    358              370
     NL     356    380              390
     DE     372    396              410
     FR     411    435              450

   DE GRENS STAAT PER TAAL, en dat is geen willekeur: het enige verschil tussen die vier regels
   is de lengte van het CTA-label. Eén gedeelde grens zou op het Frans moeten liggen (450) en
   dan mist een Nederlandse bezoeker op een 390px-telefoon zijn CTA zonder dat daar een reden
   voor is. Zakt een taal onder zijn grens, dan valt alleen de CTA weg — logo en menuknop
   blijven, want de burger is de enige ingang naar het menu.

   Meet opnieuw als een CTA-label of het logo verandert; de tabel hierboven is dan ongeldig. */
@media (max-width: 639px) {
  .floatnav { gap: 0.5rem; padding-left: 0.75rem; padding-right: 0.4rem; }
  .floatnav__logo { margin-right: 0.5rem; }
  .floatnav__logo img { height: 16px; }
  .floatnav__cta { padding: 0.5rem 0.7rem; font-size: 0.78rem; }
  .floatnav__cta [data-lucide] { display: none; }
}
@media (min-width: 370px) and (max-width: 1319px) { [lang="en"] .floatnav__cta { display: inline-flex; } }
@media (min-width: 390px) and (max-width: 1319px) { [lang="nl"] .floatnav__cta { display: inline-flex; } }
@media (min-width: 410px) and (max-width: 1319px) { [lang="de"] .floatnav__cta { display: inline-flex; } }
@media (min-width: 450px) and (max-width: 1319px) { [lang="fr"] .floatnav__cta { display: inline-flex; } }
.floatnav__menu { display: inline-flex; flex: none; width: 38px; height: 38px; border-radius: var(--radius-md); background: rgba(10, 22, 40, 0.06); border: 1px solid rgba(10, 22, 40, 0.10); color: var(--brand); align-items: center; justify-content: center; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
@media (min-width: 1320px) {   /* chrome-grens */
  .floatnav__menu { display: none; }
}
.floatnav__menu:hover { background: var(--ignition); border-color: var(--ignition); color: #fff; }
.floatnav__menu [data-lucide] { width: 20px; height: 20px; }
.floatnav__links .mega-trigger { position: relative; padding-bottom: 3px; color: rgba(10, 22, 40, 0.7); white-space: nowrap; transition: color var(--dur-fast) var(--ease-out); }
.floatnav__links .mega-trigger::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: var(--ignition); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.floatnav__links .mega-trigger:hover, .floatnav__links .mega-trigger[aria-expanded="true"] { color: var(--brand); }
.floatnav__links .mega-trigger:hover::after, .floatnav__links .mega-trigger[aria-expanded="true"]::after { transform: scaleX(1); }

/* ===== Header-inzet op mobiel (2026-08-27) =====
   Op ≤760px staat `.topbar` op `display: none`, en die topbar is op desktop het ENIGE wat ruimte
   boven de headerkaart maakt (hij staat erboven in de flow, met eigen padding). Zonder hem raakte de
   kaart de bovenrand van de viewport, terwijl hij links en rechts wél zijn inzet hield: de kaart
   zweefde op drie zijden en zat vast aan de vierde. Gemeten op 414 px: `top: 0`, `margin-inline: 16px`.

   Dezelfde clamp als de zij-inzet, zodat de inzet ÉÉN beslissing is en niet twee die uit elkaar
   kunnen lopen. Breekpunt is bewust 760px — precies waar de oorzaak zit, geen eigen grens.

   Doel is de BUITENwrapper: 157 pagina's gebruiken `.hero-wrap`, 4 (de systeempagina in vier talen)
   `.mhero`; samen alle 161. NIET `.subhero` — die zit ín `.hero-wrap` met marge 0 en zou een gat
   tussen wrapper en kaart maken.

   LET OP, dit kostte de eerste poging. Deze regel deed eerst NIETS op 157 van de 161 pagina's: hun
   inline CSS had `.hero-wrap { margin: 0 clamp(16px,1.6vw,32px) 0; }` — een **shorthand die
   `margin-top` op 0 pint** — en inline laadt ná base.css. Alleen de vier homepages gebruikten
   `margin-inline` en werkten wel. Die 157 zijn daarom genormaliseerd naar `margin-inline`, zodat de
   gedeelde laag over de bovenmarge kan beslissen. Wie hier een top-spacing toevoegt en niets ziet
   gebeuren: zoek eerst een margin-shorthand in de pagina-inline CSS.

   De header-CSS zelf staat nog inline in elke pagina (4 template-varianten × 161). Dat is de
   openstaande schuld; de route is dezelfde als bij de floatnav en de taalswitcher hieronder. */
@media (max-width: 760px) {
  .hero-wrap, .mhero { margin-top: clamp(16px, 1.6vw, 32px); }
}

/* ===== Taalswitcher (gedeeld chrome-component — hoort hier, niet per pagina inline) =====
   Wordt door site-build.js --chrome op élke pagina geïnjecteerd, in twee verschijningsvormen
   uit één bron: in de topbar een globe + taalcode met dropdown (desktop), en als platte rij in
   de voet van het mobiele menu — want < 760px is de topbar verborgen. Een taal die nog niet
   gebouwd is komt mee als <span data-lang-todo>: zichtbaar, niet klikbaar. Zo staat de vorm nu
   vast en licht elke taal automatisch op zodra zijn pagina's bestaan. */
.langswitch { position: relative; display: inline-flex; flex: none; }
.langswitch__trigger { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 500; font-size: 0.86rem; letter-spacing: var(--tracking-ui); color: rgba(10, 22, 40, 0.42); background: none; border: 0; padding: 0; cursor: pointer; transition: color var(--dur-fast) var(--ease-out); }
.langswitch__trigger [data-lucide] { width: 15px; height: 15px; color: rgba(10, 22, 40, 0.52); transition: color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.langswitch__trigger .chev { width: 13px; height: 13px; }
.langswitch__trigger:hover, .langswitch__trigger[aria-expanded="true"] { color: var(--brand); }
.langswitch__trigger:hover [data-lucide], .langswitch__trigger[aria-expanded="true"] [data-lucide] { color: var(--ignition); }
.langswitch__trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.langswitch__code { text-transform: uppercase; }
.langswitch__menu { position: absolute; top: calc(100% + 0.45rem); right: 0; z-index: 60; min-width: 168px; display: flex; flex-direction: column; gap: 1px; padding: 0.35rem; background: #fff; border: 1px solid rgba(10, 22, 40, 0.08); border-radius: var(--radius-md); box-shadow: var(--shadow-mid); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.langswitch.is-open .langswitch__menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.langswitch__opt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 500; font-size: 0.86rem; color: rgba(10, 22, 40, 0.7); white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.langswitch__opt::after { content: attr(data-code); font-size: 0.72rem; letter-spacing: var(--tracking-ui); text-transform: uppercase; color: rgba(10, 22, 40, 0.38); }
.langswitch__opt:hover { background: rgba(10, 22, 40, 0.05); color: var(--brand); }
.langswitch__opt:hover::after { color: var(--ignition); }
.langswitch__opt.is-active { color: var(--brand); background: rgba(10, 22, 40, 0.05); }
.langswitch__opt.is-active::after { color: var(--ignition); }

/* Platte variant — voet van het mobiele menu (donkere ondergrond, geen dropdown: in een
   fullscreen overlay is een uitklap een extra klik zonder winst). */
/* De haarlijn is geen versiering: zonder hem leest de taalrij als een vijfde service-link
   in plaats van als een aparte control. */
.langswitch--flat { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.1rem; width: 100%; padding-top: clamp(0.9rem, 3vw, 1.2rem); border-top: 1px solid rgba(255, 255, 255, 0.16); }
.langswitch--flat .langswitch__opt { padding: 0; border-radius: 0; gap: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: rgba(255, 255, 255, 0.85); border-bottom: 1.5px solid transparent; }
.langswitch--flat .langswitch__opt::after { content: none; }
.langswitch--flat .langswitch__opt:hover, .langswitch--flat .langswitch__opt.is-active { background: none; color: #fff; border-bottom-color: var(--ignition); }

/* ---------- Taalkiezer met vlaggen + compacte mobiele variant (R24, 2026-08-19) ----------
   Vlaggen komen uit `site-structure.yaml` → `langswitch:` (derde veld). Een taal zonder vlag
   krijgt er geen; de engine laat dat veld dan gewoon weg. */
.langswitch__flag { flex: none; width: 20px; height: 14px; border-radius: 2px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(10, 22, 40, 0.12); }

/* Een keuzeregel is `space-between` met de taalcode via ::after rechts. Zodra er een vlag vóór
   het label komt, zijn er drie flex-items en duwt space-between de vlag van het label af. Daarom:
   alles links tegen elkaar, en alléén de code naar rechts. Ziet er zonder vlag identiek uit. */
.langswitch__opt { justify-content: flex-start; gap: 0.5rem; }
.langswitch__opt::after { margin-left: auto; padding-left: 1rem; }
.langswitch--flat .langswitch__opt { gap: 0.45rem; }   /* alleen zichtbaar mét vlag */

/* Compacte variant: `[vlag] NL [chevron]` in de balk van het mobiele menu, naast het logo.
   Donkere achtergrond, dus omgekeerde kleuren t.o.v. de topbar-variant. */
.langswitch--compact { flex: none; }
.langswitch--compact .langswitch__trigger { gap: 0.4rem; padding: 0.35rem 0.5rem; border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm); background: transparent; color: #fff; font-family: var(--font-display);
  font-weight: 700; font-size: 0.9rem; line-height: 1; min-height: 34px; }
.langswitch--compact .langswitch__trigger [data-lucide] { color: rgba(255, 255, 255, 0.7); }
.langswitch--compact .langswitch__trigger:hover, .langswitch--compact .langswitch__trigger[aria-expanded="true"] { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
/* Het paneel hangt aan de BALK, niet aan de knop — daarom `position: static` op de kiezer, zodat
   de balk (die `position: relative` is) het containing block wordt. Reden: de knop verschuift met
   de tekstbreedte van het logo, en een paneel van min. 168px dat aan de knop hangt steekt dan bij
   sommige breedtes buiten de balk. Gemeten op 430px: 17px horizontale overflow — precies de fout
   uit R123. Aan de balk gehangen kan dat niet meer, ongeacht waar de knop staat. */
.langswitch--compact { position: static; }
.langswitch--compact .langswitch__menu { left: 0; right: 0; min-width: 0; }
.langswitch--compact .langswitch__flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); }

/* De menubalk. `.mobilemenu`-prefix is nodig omdat de basisregel voor .mobilemenu__bar inline
   per pagina staat en dus ná base.css komt; met één class erbij wint deze regel op specificiteit
   in plaats van op volgorde. (Dat het mobielmenu inline per pagina leeft is een aparte
   opruimklus — zie `class-not-canonical` in de puntenlijst.)

   GEEN media query, en dat is opzet: de balk mag wrappen, dus de kiezer staat naast het logo
   zolang hij past en schuift eronder zodra dat niet meer kan. Precies het gevraagde gedrag, en
   het werkt op élke schermbreedte zonder een nieuwe breekgrens te verzinnen die niet in de
   tokenset staat. De sluitknop staat daarom absoluut: die moet rechtsboven blijven, ook als de
   kiezer een tweede regel pakt. */
.mobilemenu .mobilemenu__bar { position: relative; flex-wrap: wrap; justify-content: flex-start;
  gap: 0.55rem 0.85rem; padding-right: 56px; }
.mobilemenu .mobilemenu__logo { flex: none; }
.mobilemenu .mobilemenu__close { position: absolute; top: 0; right: 0; }

/* ===== Pagina-wrapper: begint flush, geen top-gap (canoniek — niet per pagina inline overschrijven) ===== */
.page { padding: 0; }

/* ---------- Doelloze links (nav-engine) ----------
   De engine markeert een link zonder bestemming met data-link-todo i.p.v. een stil `href="#"`.
   Hier maken we hem ook echt inert: niet klikbaar, zichtbaar gedempt. Zo liegt de UI niet tegen
   de bezoeker en blijft het item wel op z'n plek staan tot de pagina bestaat. */
[data-link-todo] { pointer-events: none; opacity: .55; cursor: default; }

/* Zelfde houding voor een taal die nog niet gebouwd is: hij staat er, maar liegt niet.
   Iets zwaarder gedempt dan een doelloze link, want dit is een keuze die (nog) niet bestaat. */
[data-lang-todo] { pointer-events: none; opacity: .42; cursor: default; }

/* =====================================================================
   MOBIEL MENU — ÉÉN BRON (geconsolideerd 2026-08-21)
   Stond tot deze datum als inline <style> in ELKE pagina, in vier
   varianten die alle vier uit de eerste importcommit stamden. Gevolg:
   dezelfde component met vier definities, en geen plek om hem te wijzigen.
   Hieronder de variant van de 46 pagina's die de meerderheid vormde; de
   vier homepages hadden een ruimer ritme (marge 2rem i.p.v. 1.7rem,
   stagger tot 0.35s i.p.v. 0.29s) en volgen nu de meerderheid.
   NIET hier: `.mm-headrow` en zijn twee kinderen — die injecteert de
   nav-engine zelf als `/* chrome-CSS (nav-engine) *​/`, want die markup
   introduceert hij ook. Zie eff-nav-skill/build/site-build.js.
   ===================================================================== */

/* mobiel: accordions in het bestaande overlay-menu */
/* ===== Mobiel menu — DRILL-DOWN (2026-08-28) =====
   Actief via `mobile_nav: drilldown` in site-structure.yaml. Een groep vervangt de lijst door een
   paneel; de engine levert de markup en zet inactieve panelen dicht met het native `hidden`.
   Daarom staat hier nergens een `display` die `[hidden]` zou overschrijven — de regel hieronder
   maakt dat expliciet, zodat een latere `display: flex` op `.mm-panel` niet stilletjes alle panelen
   openzet. Zie eff-nav-skill/README.md, "Mobiel menu". */
.mm-panel[hidden], .mm-l1[hidden] { display: none; }

/* Niveau 1: dezelfde typografie als de oude accordeon-koppen, zodat het menu er niet anders uitziet
   — alleen het gedrag verandert. Het zijn <button>s, dus ze erven `.mobilemenu__nav a` niet. */
.mm-l1 { display: flex; flex-direction: column; }
.mm-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(0.6rem, 2.2vw, 0.9rem) 0; border-top: 1px solid rgba(255,255,255,0.12);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 6.5vw, 2.2rem);
  letter-spacing: var(--tracking-heading); color: #fff; text-align: left;
  transition: padding-left var(--dur-base) var(--ease-out); }
.mm-l1 .mm-item:first-child { border-top: 0; }
.mm-item .chev { width: 24px; height: 24px; flex: none; color: rgba(255,255,255,0.6);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.mm-item:hover { padding-left: 0.5rem; }
.mm-item:hover .chev { color: var(--ignition); transform: translateX(4px); }

/* Terug-knop: bewust klein en in de body-font. Hij is een bedieningselement, geen menu-item —
   zou hij even groot zijn als de links, dan leest hij als de eerste keuze in de lijst. */
.mm-back { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0;
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small);
  letter-spacing: var(--tracking-ui); color: rgba(255,255,255,0.7);
  transition: color var(--dur-fast) var(--ease-out), gap var(--dur-base) var(--ease-out); }
.mm-back:hover { color: #fff; gap: 0.75rem; }
.mm-back [data-lucide] { width: 18px; height: 18px; flex: none; }

/* Geen sectietitel: de engine emit hem niet meer, want hij dubbelde altijd de eerste link. */
.mm-panel__links { display: flex; flex-direction: column; margin-top: clamp(0.75rem, 3vw, 1.25rem); }
/* Niveau 2 kleiner dan niveau 1 (2.2rem → 1.5rem aan de bovenkant; gemeten 32,5px tegen 22px).
   Niet om ze secundair te maken — het zijn de hoofdkeuzes op dít niveau — maar omdat het verschil in
   grootte zegt dat je ergens anders bent. Zonder dat verschil leest het paneel als dezelfde lijst met
   andere woorden. Bijkomend: de langste sectie (8 items) past zo zonder scrollen. */
.mobilemenu__nav .mm-panel__links a { font-size: clamp(1.05rem, 4.4vw, 1.5rem); }

/* Paneel-links dragen dezelfde chevron-vorm als niveau 1, ook naar rechts — één pijlvorm in het hele
   mobiele menu. De eyebrow-marker (`.mobilemenu__nav a::after`) wordt hier dus uitgezet.
   Getekend in CSS, niet met een mask: een tweede `url()` naar de assets-map is blokkerend
   (`asset-escape`), want de styleguide leest deze CSS waar hij ligt en niet op een webroot. Een
   vierkant met twee randen, 45° gedraaid, is dezelfde vorm zonder bestand.
   De selector begint met `.mobilemenu__nav` om de specificiteit te verhogen: de generieke
   marker-regel staat LATER in dit bestand en heeft bij gelijke specificiteit dus het laatste woord.
   Zonder dat voorvoegsel bleef de eyebrow-mask gewoon staan — gemeten, niet aangenomen. */
.mobilemenu__nav .mm-panel__links a::after { width: 9px; height: 9px; background-color: transparent;
  -webkit-mask: none; mask: none;
  border-top: 2px solid rgba(255,255,255,0.45); border-right: 2px solid rgba(255,255,255,0.45);
  rotate: 45deg; transition: border-color var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out); }
/* `background-color` MOET hier expliciet terug naar transparant. De generieke hover-regel
   (`.mobilemenu__nav a:hover::after`) zet hem op --ignition, wat bij de eyebrow-mask de vórm kleurt
   maar bij deze chevron het hele 9×9-vierkant vult — een rood blokje in plaats van een pijl. */
.mobilemenu__nav .mm-panel__links a:hover::after { border-color: var(--ignition);
  background-color: transparent; translate: 3px 0; }

/* De accordeon-CSS hieronder blijft staan: hij hoort bij de andere modus (`mobile_nav` leeg) en is
   het vangnet als de vlag ooit terug gaat. Klein genoeg om te houden, te groot om opnieuw te maken. */
.mm-group { border-top: 1px solid rgba(255,255,255,0.12); }
.mm-group:first-child { border-top: 0; }
.mm-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(0.6rem, 2.2vw, 0.9rem) 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 6.5vw, 2.2rem); letter-spacing: var(--tracking-heading); color: #fff; text-align: left; }
.mm-head .chev { width: 24px; height: 24px; flex: none; color: rgba(255,255,255,0.6); transition: transform var(--dur-base) var(--ease-out); }
.mm-head[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--ignition); }
.mm-sub { display: none; padding: 0 0 0.85rem 0.15rem; }
/* De accordeon werd nooit zichtbaar. De nav-engine zet `is-open` op de GROEP
   (`g = h.closest('.mm-group'); g.classList.toggle('is-open', …)` in site-build.js), maar hier stond
   `.mm-sub.is-open` — de class op het KIND. Die twee zochten elkaar mis, dus `aria-expanded` ging
   netjes naar `true` terwijl `.mm-sub` op `display: none` bleef staan: op alle 161 pagina's, in vier
   talen, was het mobiele submenu onbereikbaar. De JS gaf geen fout, want er wás geen fout — alleen
   twee halve afspraken.
   De engine bepaalt hier het contract (hij levert de markup én het gedrag), dus volgt deze regel hém. */
.mm-group.is-open .mm-sub { display: block; }
.mobilemenu__nav .mm-sub a { display: block; padding: 0.45rem 0; border-top: 0; font-family: var(--font-body); font-weight: 500; font-size: 1.1rem; letter-spacing: 0; color: rgba(255,255,255,0.74); opacity: 1; transform: none; }
.mobilemenu__nav .mm-sub a::after { display: none; }
/* Geen eyebrow-marker op een kop die al een chevron-knop naast zich heeft. `.mobilemenu__nav a::after`
   (hieronder) zet de marker achter ELKE link in het menu — een keuze uit de tijd dat dit menu een
   platte lijst was. Sinds de nav-engine gesplitste koprijen levert (`<a class="mm-head--link">` +
   `<button class="mm-head--chev">`) staan er twee tekens naast elkaar: een massief driehoekje én een
   chevron. Twee pijlvormen op één rij die verschillende dingen betekenen, en dat leest als een fout.
   De marker verdwijnt daarom precies dáár waar een chevron zijn plaats inneemt — zelfde redenering
   als de regel hierboven voor de sublinks. */
.mobilemenu__nav .mm-headrow a::after { display: none; }
.mobilemenu__nav .mm-sub a:hover { padding-left: 0.35rem; color: #fff; }

/* ---------- MOBIEL MENU-OVERLAY ---------- */
.mobilemenu { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; padding: clamp(1.25rem, 5vw, 2rem) clamp(1.25rem, 5vw, 2rem) clamp(2rem, 7vw, 3rem); background: var(--gradient-hero); color: #fff; overflow-y: auto; isolation: isolate; opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
.mobilemenu.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.mobilemenu::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 90% 60% at 85% 8%, #000, transparent 80%); mask-image: radial-gradient(ellipse 90% 60% at 85% 8%, #000, transparent 80%); }
.mobilemenu > * { position: relative; z-index: 1; }
.mobilemenu__bar { display: flex; align-items: center; justify-content: space-between; }
.mobilemenu__logo img { height: 26px; width: auto; filter: brightness(0) invert(1); }
.mobilemenu__close { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; display: grid; place-items: center; transition: background-color var(--dur-fast) var(--ease-out); }
.mobilemenu__close:hover { background: rgba(255,255,255,0.2); }
.mobilemenu__close [data-lucide] { width: 22px; height: 22px; }
.mobilemenu__nav { display: flex; flex-direction: column; margin-top: clamp(1.75rem, 7vw, 3rem); }
.mobilemenu__nav a { display: flex; align-items: center; justify-content: space-between; padding: clamp(0.6rem, 2.2vw, 0.9rem) 0; border-top: 1px solid rgba(255,255,255,0.12); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 6.5vw, 2.2rem); letter-spacing: var(--tracking-heading); color: #fff; opacity: 0; transform: translateY(8px); transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.mobilemenu__nav a:first-child { border-top: 0; }
.mobilemenu__nav a::after { content: ''; width: 13px; height: 16px; flex: none; background-color: rgba(255,255,255,0.28); -webkit-mask: url('./assets/eyebrow.svg') no-repeat center / contain; mask: url('./assets/eyebrow.svg') no-repeat center / contain; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.mobilemenu__nav a:hover { padding-left: 0.5rem; }
.mobilemenu__nav a:hover::after { background-color: var(--ignition); transform: translateX(4px); }
.mobilemenu.is-open .mobilemenu__nav a { opacity: 1; transform: none; }
.mobilemenu.is-open .mobilemenu__nav a:nth-child(1) { transition-delay: 0.05s; }
.mobilemenu.is-open .mobilemenu__nav a:nth-child(2) { transition-delay: 0.09s; }
.mobilemenu.is-open .mobilemenu__nav a:nth-child(3) { transition-delay: 0.13s; }
.mobilemenu.is-open .mobilemenu__nav a:nth-child(4) { transition-delay: 0.17s; }
.mobilemenu.is-open .mobilemenu__nav a:nth-child(5) { transition-delay: 0.21s; }
.mobilemenu.is-open .mobilemenu__nav a:nth-child(6) { transition-delay: 0.25s; }
.mobilemenu.is-open .mobilemenu__nav a:nth-child(7) { transition-delay: 0.29s; }
.mobilemenu.is-open .mobilemenu__nav a:nth-child(8) { transition-delay: 0.33s; }
.mobilemenu__foot { margin-top: auto; padding-top: clamp(1.5rem, 6vw, 2.5rem); display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.mobilemenu__foot .btn { width: 100%; justify-content: center; }
.mobilemenu__phone { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: rgba(255,255,255,0.85); }
.mobilemenu__phone [data-lucide] { width: 18px; height: 18px; color: var(--ignition); }
@media (min-width: 1320px) { .mobilemenu { display: none; } }   /* chrome-grens */
/* extra links in de voet van het mobiele menu (secundair menu): iets kleiner dan de primaire */
.mobilemenu__foot .mobilemenu__phone { font-size: 0.98rem; }

/* =====================================================================
   Canonieke blokken — verplaatst uit de pagina-<style>-blokken (2026-08-28)
   ---------------------------------------------------------------------
   Deze drie blokken staan als `data-blk` in de styleguide, maar hun CSS
   stond alleen inline in de homepages. Pagina's die dat inline blok niet
   dragen toonden ze kaal: .info op de 12 case-pagina's, .midcta op
   /oplossingen/ (4 talen) en .sec-head op /oplossingen/pompen/ (4 talen).
   Gevonden bij R34 van de contentronde 2026-08-28 — OPENSTAANDE-PUNTEN A8.

   De waarden komen uit de GEBOUWDE pagina's, niet uit de styleguide: die
   twee waren gedrift (.midcta max-width en h2 20ch vs 22ch, .sec-head p
   60ch vs 56ch). De styleguide is hierop gelijkgetrokken, niet andersom.

   Asset-URL's staan relatief aan DIT bestand (./assets/), zodat de bundel
   en output/design/ dezelfde regel kunnen gebruiken.
   ===================================================================== */

/* ===== .info — beeld + tekst in twee kolommen =====
   Canoniek blok: .info › .info__inner. Stond inline op de 4 homepages;
   de 12 case-pagina's droegen de markup zonder enige CSS.
   ------------------------------------------------------------------ */
.info { position: relative; padding: clamp(5rem, 10vw, 9rem) clamp(16px, 1.6vw, 32px) clamp(3rem, 5vw, 5rem); }
.info__inner { position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.info__visual { position: relative; aspect-ratio: 5/4; }
.info__visual__tilt { position: relative; width: 100%; height: 100%; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-high); }
.info__visual__tilt img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.info__visual__tilt::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, transparent 50%, rgba(3,40,72,0.30) 100%); pointer-events: none; }
.info__badge { position: absolute; left: 24px; bottom: 24px; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 14px 18px; border-radius: var(--radius-md); box-shadow: var(--shadow-mid); display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.01em; color: var(--brand); }
.info__badge small { font-family: var(--font-body); font-weight: 500; font-size: 0.78rem; color: rgba(10,22,40,0.6); letter-spacing: 0.04em; text-transform: uppercase; }
.info__copy h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 4.2vw, 3.5rem); line-height: 1.05; letter-spacing: var(--tracking-display); color: var(--brand); margin-top: var(--space-5); }
.info__copy p { margin-top: var(--space-5); max-width: 56ch; color: rgba(10,22,40,0.78); font-size: var(--fs-lead); line-height: 1.55; }
@media (max-width: 980px) {
  .info__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .info__visual { aspect-ratio: 16/10; }
}

/* ===== .midcta — mid-page CTA-band =====
   Canoniek blok: .midcta-wrap › .midcta › .midcta__body + .midcta__actions.
   .midcta__ctas (restant-CSS uit het paginaskelet, 29 juli) kaapte dit blok
   toen het canonieke blok er op 21 augustus (7420fff) op werd gezet. Op
   2026-09-15 zijn de laatste negen dragers omgezet en is die regel
   verwijderd; gecentreerd gaat nu via .midcta--center hieronder.
   ------------------------------------------------------------------ */
.midcta-wrap { padding: clamp(2rem, 4vw, 3.5rem) clamp(16px, 1.6vw, 32px); }
.midcta { position: relative; max-width: calc(var(--container) - 2 * clamp(0.5rem, 2.5vw, 2.5rem)); margin-inline: auto; background: var(--gradient-hero); color: #fff; border-radius: clamp(20px, 2vw, 32px); padding: clamp(2.5rem, 5vw, 4rem) clamp(1.75rem, 4vw, 3.5rem); box-shadow: var(--shadow-high); overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.midcta::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 75% 90% at 80% 30%, #000, transparent 90%); mask-image: radial-gradient(ellipse 75% 90% at 80% 30%, #000, transparent 90%); pointer-events: none; }
.midcta__body { position: relative; z-index: 1; }
.midcta__eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: var(--space-4); }
.midcta__eyebrow::before { content: ''; width: 11px; height: 13px; flex: none; background-color: var(--ignition); -webkit-mask: url('./assets/eyebrow.svg') no-repeat center / contain; mask: url('./assets/eyebrow.svg') no-repeat center / contain; }
.midcta h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.85rem, 3vw, 2.6rem); line-height: 1.07; letter-spacing: var(--tracking-heading); color: #fff; max-width: 20ch; }
.midcta p { margin-top: var(--space-4); max-width: 52ch; color: rgba(255,255,255,0.78); font-size: var(--fs-lead); line-height: 1.55; }
.midcta__actions { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.midcta__actions .btn--glass { background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; }
.midcta__actions .btn--glass:hover { background: rgba(255, 255, 255, 0.18); }
.midcta__note { font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.55); }
.midcta--center { grid-template-columns: 1fr; justify-items: center; }
.midcta--center .midcta__body { display: flex; flex-direction: column; align-items: center; text-align: center; }
.midcta--center .midcta__body h2 { max-width: 22ch; }
.midcta--center .midcta__body p { max-width: 56ch; }
.midcta--center .midcta__actions { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
@media (max-width: 760px) {
  .midcta { grid-template-columns: 1fr; padding-inline: clamp(1.25rem, 5vw, 2rem); }
  .midcta h2 { max-width: none; }
}

/* ===== .sec-head — sectiekop =====
   Canoniek: .sec-head › h2 + p. Ontbrak op /oplossingen/pompen/ (4 talen).
   ------------------------------------------------------------------ */
.sec-head .eyebrow { display: inline-flex; }
.sec-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.07; letter-spacing: var(--tracking-heading); color: var(--brand); margin-top: var(--space-4); }
.sec-head p { margin-top: var(--space-4); color: rgba(10, 22, 40, 0.68); font-size: var(--fs-lead); line-height: 1.55; max-width: 60ch; }


    /* ==========================================================================
       A1 — pagina-CSS gehesen uit de 165 pagina's naar deze gedeelde laag
       ==========================================================================
       Tot 2026-08-31 droeg elke pagina een <style>-blok van ~33 kB: 165 kopieen
       van dezelfde ~750 regels. Drie gemeten bugs in een week kwamen daar
       rechtstreeks uit voort (mobiele header, verspringend logo, en A8: drie
       blokken die kaal renderden). quality-rules.md -> CSS-architectuur verbiedt
       site-CSS in de HTML; dit blok is die achterstand, ingelost.

       Wat hier NIET meer gebeurt: een blok tweemaal definieren. Heeft een
       paginatype een afwijkende variant nodig, dan staat die hieronder als
       modifier-class direct onder de basisregel -- zoals .split--reverse dat al
       deed. Elf varianten kregen zo'n modifier; ze zijn opgesomd in
       output/content/plan-a1-inline-css-2026-08-30.md.

       De volgorde is de volgorde waarin de pagina's de regels zelf droegen, en
       het blok staat achteraan base.css: precies waar het inline-blok stond ten
       opzichte van de rest. De cascade is daarmee ongewijzigd.
       ========================================================================== */
/* ====================================================
     MACHINE HERO. donkere stage met centraal 3D-model
     ==================================================== */
/* wrap: enkel positionering. het blauw zit niet meer op de volle hoogte.
     Eigen marge geeft de hero zijn inset terug; secties eronder lopen full-bleed. */
.mhero { --m-card-h: clamp(460px, 63vh, 660px); --m-stage-h: clamp(360px, 44vh, 560px); --m-stage-overlap: clamp(170px, 26vh, 300px); position: relative; isolation: isolate; margin-inline: clamp(16px, 1.6vw, 32px); }
/* de blauwe header: korte kaart (halve hoogte) die nav + titel draagt */
.mhero__card { position: relative; z-index: 1; height: var(--m-card-h); display: flex; flex-direction: column; border-radius: clamp(20px, 2vw, 32px); background: var(--gradient-hero); color: #fff; overflow: hidden; isolation: isolate; box-shadow: 0 6px 24px rgba(3, 40, 72, 0.10); }
.mhero__card::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(900px 600px at 76% 16%, rgba(255,255,255,0.12), transparent 60%), radial-gradient(1200px 900px at 10% 120%, rgba(3,40,72,0.55), transparent 70%); }
.mhero__card::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 80px 80px; -webkit-mask-image: radial-gradient(ellipse 78% 90% at 55% 38%, #000, transparent 92%); mask-image: radial-gradient(ellipse 78% 90% at 55% 38%, #000, transparent 92%); }
/* titelblok bovenin de blauwe kaart, boven de machine */
.mhero__head { position: relative; z-index: 6; width: 100%; max-width: var(--container); margin-inline: auto; padding: clamp(1rem, 3.5vh, 2.25rem) clamp(1.5rem, 4vw, 3.5rem) 0; text-align: center; }
/* nav + breadcrumb */
.mhero__nav { position: relative; z-index: 6; display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); padding: clamp(1.5rem, 3vh, 2.4rem) clamp(1.5rem, 4vw, 3rem); }
.mhero__logo { height: 26px; width: auto; filter: brightness(0) invert(1); flex: none; }
.mhero__menu { display: flex; gap: clamp(1rem, 2vw, 2rem); margin-left: auto; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small); letter-spacing: var(--tracking-ui); }
.mhero__menu a { position: relative; padding-bottom: 5px; color: rgba(255,255,255,0.94); transition: color var(--dur-fast) var(--ease-out); }
.mhero__menu a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: var(--ignition); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.mhero__menu a:hover, .mhero__menu a.is-active { color: #fff; }
.mhero__menu a:hover::after, .mhero__menu a.is-active::after { transform: scaleX(1); }
.mhero__nav-cta { padding: 0.7rem 1.1rem !important; font-size: var(--fs-small) !important; flex: none; }
.mhero__burger { display: none; flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; align-items: center; justify-content: center; transition: background-color var(--dur-fast) var(--ease-out); }
.mhero__burger:hover { background: rgba(255,255,255,0.2); }
.mhero__burger [data-lucide] { width: 20px; height: 20px; }

@media (max-width: 1319px) {   /* chrome-grens */
  .mhero__menu { display: none; }
  .mhero__nav-cta { display: none; }
  .mhero__burger { display: inline-flex; margin-left: auto; }
}
/* 3D-machine. zakt met negatieve marge ín het blauw en hangt onder de naad op wit */
.mhero__stage { position: relative; z-index: 3; margin-top: calc(-1 * var(--m-stage-overlap)); height: var(--m-stage-h); pointer-events: none; }
.mhero__model { display: block; width: 100% !important; height: 100% !important; background: transparent; --poster-color: transparent; opacity: 0; visibility: hidden; pointer-events: auto; }
.mhero__model::part(default-progress-bar) { display: none; }
/* verberg de zwarte laadbalk */
.mhero__model.is-ready { visibility: visible; animation: mGlideIn 1.2s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes mGlideIn { from { opacity: 0; transform: translateY(3%) scale(.985); } to { opacity: 1; transform: none; } }
.mhero__photo { display: none; }

/* Geen 3D op deze pagina — model-viewer-loader.js zet `no-3d` op <html> als de viewport te smal
   is, WebGL ontbreekt, of de library/het model niet laadt. De mhero valt dan terug op dezelfde
   foto die onder 980px al getoond wordt; identieke declaraties, want het is dezelfde terugval.
   Vóór deze regel had alleen de SMALLE tak een terugval: op een breed scherm zonder WebGL bleef
   het model onzichtbaar (`opacity:0`) en stond er een gat. */
html.no-3d .mhero__stage { display: none; }
html.no-3d .mhero__photo { display: block; max-width: 100%; max-height: 42vh; width: auto; height: auto; margin: clamp(1.5rem, 5vw, 2.5rem) auto 0; filter: drop-shadow(0 26px 44px rgba(3, 40, 72, 0.5)); }
html.no-3d .mhero__card { height: auto; min-height: 0; padding-bottom: clamp(1.5rem, 5vw, 2.5rem); }
/* alleen mobiel (zie responsive). desktop toont het 3D-model */
/* intro onder de machine. op wit, normale flow */
.mhero__copy { position: relative; z-index: 4; width: 100%; max-width: 680px; margin: clamp(0.5rem, 2vh, 1.5rem) auto 0; padding: 0 clamp(1.5rem, 4vw, 3.5rem); text-align: center; }
.mhero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.82); margin-bottom: var(--space-4); }
.mhero__eyebrow::before { content: ''; width: 12px; height: 14px; flex: none; background-color: var(--ignition); -webkit-mask: url('./assets/eyebrow.svg') no-repeat center / contain; mask: url('./assets/eyebrow.svg') no-repeat center / contain; }
.mhero__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: var(--tracking-display); color: #fff; max-width: 24ch; margin-inline: auto; }
.mhero__title em { font-style: normal; color: var(--ignition); }
.mhero__lead { margin: clamp(1rem, 2.4vh, 1.6rem) auto 0; max-width: 54ch; color: rgba(255, 255, 255, 0.82); font-size: var(--fs-lead); line-height: 1.55; }
.mhero__ctas { margin-top: clamp(1.5rem, 3vh, 2.25rem); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.mhero__ctas .btn--glass { background: rgba(10, 22, 40, 0.06); color: var(--brand); border: 1px solid rgba(10, 22, 40, 0.14); }
.mhero__ctas .btn--glass:hover { background: rgba(10, 22, 40, 0.10); }
/* spec-rail op wit. lichte kaart met steel-dividers (consistent met de homepage stats-panel) */
.mhero__rail { position: relative; z-index: 5; max-width: var(--container); margin: clamp(2rem, 4vh, 3.25rem) auto 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--paper); border-radius: clamp(16px, 1.5vw, 22px); box-shadow: var(--shadow-mid); overflow: hidden; }
.mhero__rail > div { padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1rem, 1.8vw, 1.6rem); border-left: 1px solid var(--steel); }
.mhero__rail > div:first-child { border-left: 0; }
.mrail__label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(10, 22, 40, 0.5); }
.mrail__value { margin-top: 0.4rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 1.6vw, 1.5rem); color: var(--brand); font-feature-settings: 'tnum' 1; line-height: 1.1; }
.mrail__value span { color: var(--ignition); font-size: 0.6em; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
/* ====================================================
     INTRO. statement (typografie als visueel element)
     ==================================================== */
.intro { padding: clamp(4.5rem, 9vw, 8rem) clamp(16px, 1.6vw, 32px) clamp(3rem, 5vw, 5rem); }
.intro__inner { max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.intro__statement { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 3.2vw, 2.8rem); line-height: 1.12; letter-spacing: var(--tracking-heading); color: var(--brand); }
.intro__statement em { font-style: normal; color: var(--ignition); }
.intro__body p { color: rgba(10, 22, 40, 0.74); font-size: var(--fs-lead); line-height: 1.62; max-width: 58ch; }
.intro__body p + p { margin-top: var(--space-4); }
/* ====================================================
     SPECSHEET. sticky intro + paper spec-card (canvas)
     ==================================================== */
.specsheet { padding: clamp(4rem, 8vw, 7rem) clamp(16px, 1.6vw, 32px); background: var(--canvas); }
.specsheet__inner { max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.specsheet__intro { position: sticky; top: 2.5rem; }
.specsheet__intro h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.85rem, 3vw, 2.5rem); line-height: 1.07; letter-spacing: var(--tracking-heading); color: var(--brand); margin-top: var(--space-4); }
.specsheet__intro p { margin-top: var(--space-4); color: rgba(10,22,40,0.65); font-size: var(--fs-lead); line-height: 1.55; max-width: 38ch; }
.specsheet__card { background: var(--paper); border-radius: clamp(16px, 1.8vw, 24px); box-shadow: var(--shadow-mid); overflow: hidden; }
.spec-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1rem, 2vw, 1.75rem); padding: clamp(1rem, 1.7vw, 1.35rem) clamp(1.25rem, 2.2vw, 1.75rem); border-top: 1px solid var(--steel); transition: background-color var(--dur-fast) var(--ease-out); }
.spec-row:first-child { border-top: 0; }
.spec-row:hover { background: var(--mist); }
.spec-row dt { font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(10,22,40,0.5); align-self: center; }
.spec-row dd { font-family: var(--font-display); font-weight: 700; font-size: clamp(0.95rem, 1.2vw, 1.1rem); color: var(--brand); font-feature-settings: 'tnum' 1; line-height: 1.3; }
.specsheet__note { padding: clamp(1rem, 1.7vw, 1.35rem) clamp(1.25rem, 2.2vw, 1.75rem); border-top: 1px solid var(--steel); background: var(--mist); font-size: 0.8rem; line-height: 1.55; color: rgba(10,22,40,0.55); }
/* ====================================================
     ANATOMY / OPBOUW. feature-kaart + module-stack (mist)
     ==================================================== */
.anatomy { padding: clamp(4rem, 8vw, 7rem) clamp(16px, 1.6vw, 32px); }
.anatomy__inner { max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); }
.anatomy__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.anatomy__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.anatomy__feature { position: sticky; top: 2.5rem; background: var(--gradient-hero); color: #fff; border-radius: clamp(16px, 1.8vw, 24px); padding: clamp(1.75rem, 3vw, 2.6rem); box-shadow: var(--shadow-high); overflow: hidden; isolation: isolate; }
.anatomy__feature::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 75% 20%, #000, transparent 85%); mask-image: radial-gradient(ellipse 70% 80% at 75% 20%, #000, transparent 85%); }
.anatomy__feature > * { position: relative; z-index: 1; }
.afeat__tag { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 0.62rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.7); padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.2); }
.afeat__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.08; letter-spacing: var(--tracking-heading); color: #fff; margin-top: var(--space-4); }
.afeat__text { margin-top: var(--space-4); color: rgba(255,255,255,0.78); font-size: 1rem; line-height: 1.6; max-width: 40ch; }
.afeat__specs { margin-top: var(--space-5); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.75rem, 1.5vw, 1.25rem); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,0.16); }
.afeat__specs dt { font-family: var(--font-display); font-weight: 700; font-size: 0.58rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.5); }
.afeat__specs dd { margin-top: 4px; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: #fff; font-feature-settings: 'tnum' 1; line-height: 1.2; }
.anatomy__modules { display: flex; flex-direction: column; }
.amod { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.5rem); align-items: start; padding: clamp(1.25rem, 2.4vw, 1.85rem) 0; border-top: 1px solid var(--steel); transition: background-color var(--dur-base) var(--ease-out); }
.amod:first-child { border-top: 0; }
.amod__icon { width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--steel); display: grid; place-items: center; color: var(--brand); transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.amod__icon [data-lucide] { width: 22px; height: 22px; }
.amod:hover .amod__icon { border-color: var(--ignition); color: var(--ignition); transform: translateY(-2px); }
.amod__num { font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: var(--tracking-eyebrow); color: rgba(10,22,40,0.4); }
.amod h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--brand); letter-spacing: var(--tracking-heading); margin-top: 2px; }
.amod p { margin-top: 0.4rem; color: rgba(10,22,40,0.7); font-size: 0.95rem; line-height: 1.55; max-width: 52ch; }
/* ====================================================
     SECUNDAIR MENU (topbar), regels: zie styleguide
     ==================================================== */
.hero-wrap { margin-inline: clamp(16px, 1.6vw, 32px); }
/* ====================================================
     HERO (homepage, 4 talen) — INHOUDSGESTUURD RASTER
     ====================================================
   Hiervoor stond hier een hoogte-formule: `height: calc(88vh - marges - 44px)`, een kaart van
   58% daarvan, en een titel die met `bottom: calc(100% - kaarthoogte - plaathelft - ...)` van de
   ONDERRAND van die kaart naar BOVEN groeide. Drie gevolgen, alle drie gemeten (2026-09-02):

   1. Te hoog en toch te leeg. De hero was 74-93% van de viewporthoogte, maar de inhoud eindigde
      ver daarboven: op 1920x980 bleef 38px over, op 2560x1300 zelfs 120px pure leegte onder de
      knoppen. De hoogte kwam van de viewport, niet van wat er in stond.
   2. Titel tegen het logo. Omdat de titel naar boven groeide, liep hij op korte-brede vensters
      de nav in (gemeten vóór de noodrem `--hero-title-max: 8vh`: 1512x720 5px overlap,
      1728x780 14px). Die noodrem hielp, maar betaalde met tekengrootte: op 981-1100px was de
      titel 43-48px terwijl dezelfde titel bij 900px breed 72px was — 40% kleiner op een BREDER
      scherm, precies over de 980px-grens heen.
   3. Knoppen buiten de hero. Op elke viewport lager dan ~800px hingen de CTA's onder de hero uit
      (-8 tot -32px), want de inhoud paste niet in de formule-hoogte.

   Nu bepaalt de INHOUD de hoogte: nav-rij + titel + lead + knoppen + ademruimte. Geen `height`,
   geen `min-height`. Het plafond zit in de type- en ruimteschaal (de titel is `min(rem, vh)`), dus
   op een laag venster krimpt de hero mee zonder ooit te klemmen of te clippen.

   Rasterindeling (3 kolommen: goot | rail | goot):
     rij 1  nav          kolom 2      -- logo, menu, cta
     rij 2  titel        kolom 2      -- de vier platen
     rij 3  lead + cta   kolom 2
     kaart  rij 1-2      kolom 1/-1   -- de blauwe kaart, volle breedte
     stage  rij 2-tot-eind, kolom 1/-1 (desktop) of rij 4 (gestapeld)

   Waarom een rail: het logo hing aan de kaartpadding en de copy aan `--container`. Tot 1440px
   scheelde dat weinig, daarboven liepen ze uiteen — op 2560px stond het logo op 64px en de titel
   op 468px. Nu hangen nav, titel, lead en knoppen aan dezelfde kantlijn als alle blokken lager op
   de pagina.

   Waarom de kaart met `margin-bottom: var(--plate-half)` eindigt: een grid-item dat stretcht,
   krimpt met zijn marge. De kaartrand valt daardoor exact door het midden van de laatste
   titelplaat — dezelfde signature-look als eerst, maar nu afgeleid van de titel in plaats van
   van een percentage van een viewporthoogte. */

.hero-wrap--stage {
  /* ---- stap 1: telefoon klein (tot 400px) ---- */
  --hero-title: 2.25rem;
  --nav-logo-h: 24px;
  --hero-pad-x: 1.25rem;
  --hero-pad-top: 1.35rem;
  --hero-gap-nav: 1.75rem;
  --hero-gap-body: 1.5rem;
  --hero-bottom: 3rem;
  --stage-w: 100%;
  --stage-right: 0px;
  --stage-bottom: 0px;
  --stage-top-inset: 0px;
  /* hoeveel het blauw ín de modelrij zakt, zodat het model half over de rand valt.
     Als percentage van de wrapbreedte, want de doos is `aspect-ratio: 16/10` van
     `--stage-w`: kaderhoogte = wrapbreedte x --stage-w x 0.625, dus 0.22 landt op
     ~50% van die hoogte. Geijkt door de kaartrand uit de DOM te vergelijken met de
     alfa-bbox van de modelpixels (tools/split.py). LET OP: deze factor hangt samen met
     de kaderverhouding en met `fill`/`crop` in hero-3d.js -- wie de camera bijstelt,
     controleert deze mee. */
  --card-overlap: calc(0.25 * var(--stage-w));

  /* afgeleid: de plaathoogte volgt de titelgrootte, dus één beslissing per stap */
  --plate-pad-y: clamp(0.15rem, 0.4vw, 0.35rem);
  --plate-gap: clamp(0.35rem, 0.7vw, 0.6rem);
  --plate-half: calc((var(--hero-title) + 2 * var(--plate-pad-y)) / 2);

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns:
    minmax(var(--hero-pad-x), 1fr)
    minmax(0, var(--container))
    minmax(var(--hero-pad-x), 1fr);
  grid-template-rows: auto auto auto auto;   /* nav | titel | lead+cta | kader */
  padding-block: 0 var(--hero-bottom);
  color: #fff;
  /* GEEN radius/overflow/schaduw op de wrap. Die zaten hier eerst, terwijl het blauw
     een rasteritem bínnen de rijen was: de vorm en de schaduw liepen dan door tot
     onderaan de wrap (inclusief `padding-bottom`), maar het blauw stopte bij de
     laatste rij. Vandaar dat je onderaan de vorm mét schaduw zag zonder blauw.
     Nu doet de gestapelde stand hetzelfde als de naast-elkaar-stand: de KAART draagt
     de vorm, en het model mag eroverheen vallen. */
}

/* ---------- NAV ---------- */
.hero-wrap--stage .nav {
  grid-row: 1; grid-column: 2;
  z-index: 5;
  display: flex; align-items: center;
  padding-top: var(--hero-pad-top);
}
.nav__logo { height: var(--nav-logo-h); width: auto; filter: brightness(0) invert(1); flex: none; }
/* mobiel-eerst: het volledige menu staat UIT, de burger AAN. Vanaf de
   naast-elkaar-stand wisselt dat om. (Stond dit niet in de basis, dan liep de
   nav-rij op 390px over: menu 403px + cta 191px in een rij van 318px, en dan
   kromp de logo-link -- het flex-item, niet de img -- naar breedte 0.) */
.nav__items { display: none; gap: clamp(1rem, 2vw, 2rem); margin-left: auto; margin-right: clamp(1rem, 2vw, 2rem); font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small); color: rgba(255,255,255,0.94); letter-spacing: var(--tracking-ui); }
/* de logo-link mag nooit meekrimpen; `flex: none` op de img alleen helpt niet,
   want het flex-item is de <a> eromheen */
.hero-wrap--stage .nav > a:not(.nav__cta) { flex: none; display: flex; align-items: center; }
.nav__item { position: relative; padding-bottom: 5px; color: rgba(255,255,255,0.94); }
.nav__item::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: var(--ignition); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.nav__item:hover::after, .nav__item.is-active::after { transform: scaleX(1); }
.nav__cta { display: none; padding: 0.7rem 1.1rem !important; font-size: var(--fs-small) !important; }
.nav__burger { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; }
.nav__burger [data-lucide] { width: 20px; height: 20px; }

/* ---------- BLAUWE KAART (achtergrondlaag) ---------- */
.hero-card {
  /* rij 1 t/m 3 (nav, titel, lead+cta) plus een stukje ín de modelrij: een
     stretchend rasteritem GROEIT met een negatieve ondermarge. Zo valt de machine
     half op blauw en half op wit, net als op desktop. */
  grid-row: 1 / 4; grid-column: 1 / -1;
  margin-bottom: calc(-1 * var(--card-overlap));
  border-radius: clamp(20px, 4vw, 28px);
  overflow: hidden;
  box-shadow: var(--shadow-high);
  /* position: relative is hier geen detail: de twee gradient-pseudo's staan op
     `inset: 0` en zoeken hun containing block. Zonder deze regel is dat de hero
     (die is relative) en niet de kaart -- dan ligt de gloed als een grijze waas
     over de lead en de knoppen heen, ook al staat de kaart op z-index 0 en de
     tekst op 4. Een absoluut gepositioneerde nazaat wordt namelijk niet geclipt
     door de overflow van een voorouder die zijn containing block niet is. */
  position: relative;
  z-index: 0;
  background: var(--gradient-hero);
  pointer-events: none;
}
.hero-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(900px 600px at 78% 25%, rgba(255,255,255,0.12), transparent 60%), radial-gradient(1200px 800px at 18% 95%, rgba(3,40,72,0.55), transparent 70%); pointer-events: none; }
.hero-card::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 80px 80px; -webkit-mask-image: radial-gradient(ellipse 70% 100% at 55% 60%, #000, transparent 95%); mask-image: radial-gradient(ellipse 70% 100% at 55% 60%, #000, transparent 95%); pointer-events: none; }

/* ---------- TITEL ---------- */
.hero-card__title {
  grid-row: 2; grid-column: 2;
  z-index: 4;
  margin: var(--hero-gap-nav) 0 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--hero-title);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: #fff;
}
.hero-card__title .word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero-card__title .word > span { display: inline-block; transform: translateY(110%); animation: wordRise 1.05s var(--ease-out) forwards; }
.hero-card__title .word:nth-child(2) > span { animation-delay: 120ms; }
.hero-card__title .word:nth-child(3) > span { animation-delay: 240ms; }
.hero-card__title .word:nth-child(4) > span { animation-delay: 360ms; }
@keyframes wordRise { to { transform: translateY(0); } }
/* fadeUp wordt gebruikt door de lead, de knoppen en de scroll-hint (en door
   .hero-usp). Hij hoort bij dit blok: staat hij er niet, dan verwijzen die drie
   naar een niet-bestaande keyframe, loopt de animatie niet en blijft `opacity: 0`
   staan — onzichtbare tekst zonder foutmelding. */
@keyframes fadeUp { to { opacity: 1; transform: none; } }
.hero-card__title--plate { display: flex; flex-direction: column; align-items: flex-start; gap: var(--plate-gap); }
.hero-card__title--plate .word { background: var(--paper); color: var(--brand); padding: var(--plate-pad-y) clamp(0.6rem, 1.1vw, 1rem); border-radius: clamp(4px, 0.4vw, 8px); box-shadow: 0 12px 32px rgba(3, 40, 72, 0.18); line-height: 1; }
.hero-card__title--plate .word:last-child { background: var(--ignition); color: #fff; box-shadow: 0 16px 36px rgba(231, 52, 45, 0.35); }

/* ---------- LEAD + KNOPPEN ---------- */
.hero-card__body { grid-row: 3; grid-column: 2; z-index: 4; margin-top: var(--hero-gap-body); }
.hero-card__lead { margin: 0; max-width: 52ch; color: rgba(255,255,255,0.82); font-size: var(--fs-lead); line-height: 1.55; }
.hero-card__ctas { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hero-card__ctas .btn--glass { background: var(--glass-20); color: #fff; border: 1px solid var(--glass-border); }
.hero-card__ctas .btn--glass:hover { background: var(--glass-30); }

/* ---------- 3D-KADER ----------
   Het kader IS de maat van het model. Hiervoor was het canvas de volle
   viewportbreedte, met een fixe `--stage-top: 380px` en een `translateX(15.5vw)`
   eromheen; gemeten vulde het model daardoor maar 29-46% van de breedte en 38% van
   de hoogte van zijn eigen canvas, en hing 298px van dat canvas buiten het scherm.
   Positie en formaat waren zo het product van zes gekoppelde variabelen (kaarthoogte,
   stage-top, stage-bottom, paginamarge, vw-shift, camera-radius). Nu zet CSS één doos
   en leest hero-3d.js die doos uit om de camera te kaderen: het model vult altijd
   hetzelfde deel van zijn kader, op elke resolutie. */
.hero-stage {
  grid-row: 4; grid-column: 1 / -1;
  position: relative;
  z-index: 2;
  width: var(--stage-w);
  justify-self: end;
  margin: var(--stage-top-inset) var(--stage-right) var(--stage-bottom) 0;
  /* 2/1 en niet 16/10: de machine projecteert onder deze hoek op ongeveer 2:1, dus een
     kader van 16/10 gaf ~50px lucht boven en onder de machine -- zichtbaar als een leeg
     stuk blauw tussen de knoppen en de machine. Met 2/1 vult hij zijn kader en is de
     hele hero even zoveel korter. */
  aspect-ratio: 2 / 1;
  pointer-events: none;
}
.hero-stage__model { display: block; position: absolute; inset: 0; width: 100% !important; height: 100% !important; background: transparent; --poster-color: transparent; opacity: 0; visibility: hidden; pointer-events: none; }
.hero-stage__model.is-ready { visibility: visible; animation: machineGlideIn 1.2s cubic-bezier(.22,.61,.36,1) forwards; }
.hero-stage__poster { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; opacity: 0; visibility: hidden; pointer-events: none; }
.hero-stage__poster.is-ready { visibility: visible; animation: machineGlideIn 1.2s cubic-bezier(.22,.61,.36,1) forwards; }
.hero-stage__poster[hidden] { display: none; }
/* de entree schuift binnen het KADER (%), niet meer over de viewport (vw) */
@keyframes machineGlideIn { 0% { opacity: 0; transform: translateX(10%); } 100% { opacity: 1; transform: none; } }

/* ---------- SCROLL-HINT ---------- */
.hero-card__scroll { display: none; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 4; flex-direction: column; align-items: center; gap: 6px; color: rgba(10, 22, 40, 0.55); font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; opacity: 0; animation: fadeUp .9s var(--ease-out) 1.4s forwards; }
.hero-card__scroll [data-lucide] { width: 18px; height: 18px; animation: bobDown 2.2s var(--ease-in-out) infinite; }
@keyframes bobDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------- KERNVOORDELEN onder de hero ---------- */
.hero-usps { display: grid; grid-template-columns: 1fr; gap: 0; max-width: var(--container); margin: clamp(1.75rem, 6vw, 2.75rem) auto 0; padding-inline: clamp(20px, 5vw, 32px); }
.hero-usp { position: relative; display: flex; flex-direction: column; gap: 0.55rem; padding: clamp(1.3rem, 5vw, 1.7rem) 0; border-top: 1px solid var(--steel); }
.hero-usp:first-child { border-top: 0; padding-top: 0; }
.hero-usp:hover .hero-usp__title { color: var(--ignition); }
.hero-usp__rule { width: 28px; height: 2px; background: var(--steel); transition: background-color var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out); }
.hero-usp:hover .hero-usp__rule { background: var(--ignition); width: 40px; }
.hero-usp__icon { color: var(--brand); transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.hero-usp:hover .hero-usp__icon { color: var(--ignition); transform: translateY(-2px); }
.hero-usp__icon [data-lucide] { width: 26px; height: 26px; }
.hero-usp__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.15vw, 1.2rem); color: var(--brand); line-height: 1.15; }
.hero-usp__text { font-size: 0.85rem; line-height: 1.5; color: rgba(10, 22, 40, 0.6); max-width: 46ch; }

/* ====================================================
     DE TIEN MATEN — één ladder, tien stappen
     ====================================================
   Stap 1-5 stapelen (model onder de tekst), 6-10 zetten het model naast de tekst.
   De omslag ligt op 1100px en niet meer op 980px: precies in dat gat (981-1099) was de
   oude desktop-layout op zijn slechtst — titel 43-48px, terwijl dezelfde titel op
   900px breed 72px was.

   Uitzondering op die 1100px: een LIGGEND venster van 900px of breder krijgt ook de
   naast-elkaar-stand. Gemeten op 1024x700 (iPad liggend) werd de gestapelde hero
   1233px hoog — 176% van de viewport — omdat een kader van 86% breed op 16:10 dan
   550px hoog wordt en ónder de tekst komt. Breedte alleen is voor deze knoop dus niet
   genoeg; het gaat om de vraag of er ruimte NAAST de tekst is, en dat is een kwestie
   van verhouding.

   Per stap staan alleen de knoppen die veranderen. De camera-knoppen (hoek, vulling,
   verschuiving in het kader) staan NIET hier maar in hero-3d.js: model-viewer-attributen
   kunnen niet uit een media query komen. Het formaat en de plek van de DOOS staan hier,
   en dat is wat de camera uitleest. */

/* stap 2 — telefoon groot */
@media (min-width: 401px) {
  .hero-wrap--stage { --hero-title: 2.7rem; --hero-pad-x: 1.5rem; }
}
/* stap 3 — phablet / klein tablet */
@media (min-width: 521px) {
  .hero-wrap--stage { --hero-title: 3.3rem; --nav-logo-h: 26px; --hero-pad-x: 1.75rem; --hero-pad-top: 1.6rem; --hero-bottom: 3.5rem; }
}
/* stap 4 — tablet portret */
@media (min-width: 768px) {
  .hero-wrap--stage { --hero-title: 4.1rem; --hero-pad-x: 2rem; --hero-gap-nav: 2.25rem; --hero-bottom: 3.5rem; --stage-w: 92%; }
  .hero-card__lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
}
/* stap 5 — tablet landschap / klein laptop, nog gestapeld */
@media (min-width: 900px) {
  .hero-wrap--stage { --hero-title: min(4.5rem, 12vh); --nav-logo-h: 28px; --hero-pad-x: 2.25rem; --stage-w: 86%; }
}

/* ---- vanaf hier: model NAAST de tekst (1100px, of 900px in liggend formaat) ---- */
@media (min-width: 1100px), (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .hero-wrap--stage {
    /* stap 6 — 1100-1279 */
    --hero-title: min(4.2rem, 9vh);
    --nav-logo-h: 26px;
    --hero-pad-x: 2rem;
    --hero-pad-top: clamp(1.1rem, 2.2vh, 1.9rem);
    --hero-gap-nav: clamp(1.25rem, 3.6vh, 2.75rem);
    --hero-gap-body: clamp(1.5rem, 3.4vh, 2.5rem);
    --hero-bottom: clamp(1.25rem, 3.4vh, 2.75rem);
    --plate-gap: clamp(0.3rem, 0.9vh, 0.6rem);
    --stage-w: 50%;
    --stage-right: 0%;
    --stage-bottom: 2%;
    --stage-top-inset: 0px;
    /* drie rijen: het kader overlapt rij 2 t/m het einde in plaats van eronder te staan */
    grid-template-rows: auto auto auto;
    color: inherit;
  }
  .hero-card {
    /* naast elkaar: de kaart stopt halverwege de laatste titelplaat. Een stretchend
       rasteritem KRIMPT met een positieve ondermarge -- het spiegelbeeld van de
       negatieve marge in de gestapelde stand hierboven. */
    grid-row: 1 / 3;
    margin-bottom: var(--plate-half);
    border-radius: clamp(20px, 2vw, 32px);
    isolation: isolate;
  }
  .hero-card__lead { color: rgba(10, 22, 40, 0.78); opacity: 0; transform: translateY(20px); animation: fadeUp .9s var(--ease-out) .55s forwards; }
  .hero-card__ctas { margin-top: clamp(1.1rem, 3vh, 2rem); opacity: 0; transform: translateY(20px); animation: fadeUp .9s var(--ease-out) .75s forwards; }
  .hero-card__ctas .btn--glass { background: rgba(10, 22, 40, 0.06); color: var(--brand); border: 1px solid rgba(10, 22, 40, 0.14); }
  .hero-card__ctas .btn--glass:hover { background: rgba(10, 22, 40, 0.10); }
  /* 58ch en niet 52ch: de tekstkolom is naast het kader ~620px breed, terwijl 52ch op
     ~480px wrapt. Die 140px onbenut kostte de Duitse en Franse lead een extra regel, en
     omdat de hoogte de inhoud volgt werd de hero daar 99% van de viewport in plaats van 90%. */
  .hero-card__body, .hero-card__lead { max-width: 58ch; }
  /* het kader hangt rechts en loopt van de titelrij tot onder de knoppen */
  .hero-stage { grid-row: 2 / -1; aspect-ratio: auto; }
  .hero-usps { display: none; }
}
/* Het volledige menu en de scroll-hint hangen NIET aan de layout-omslag: dat zijn
   drie verschillende vragen. De layout gaat over ruimte NAAST de tekst (1100px, of
   900px liggend), het menu over de breedte die de labels nodig hebben (de chrome-grens,
   1320px — zie de toelichting daar) en de scroll-hint over de vraag of hij de knoppen
   niet kruist (1280px). */
@media (min-width: 1320px) {   /* chrome-grens */
  .hero-wrap--stage .nav__items { display: flex; }
  .hero-wrap--stage .nav__cta { display: inline-flex; }
  .hero-wrap--stage .nav__burger { display: none; }
}
@media (min-width: 1280px) {
  .hero-card__scroll { display: flex; }
}
/* stap 7 — 1280-1439 */
@media (min-width: 1280px) {
  .hero-wrap--stage { --hero-title: min(4.6rem, 9vh); --nav-logo-h: 28px; --hero-pad-x: 2.5rem; --stage-w: 52%; }
}
/* stap 8 — 1440-1679 */
@media (min-width: 1440px) {
  .hero-wrap--stage { --hero-title: min(5.1rem, 9.4vh); --stage-w: 54%; }
}
/* stap 9 — 1680-2099 */
@media (min-width: 1680px) {
  .hero-wrap--stage { --hero-title: min(5.6rem, 9.8vh); --nav-logo-h: 30px; --stage-w: 55%; }
}
/* stap 10 — QHD/4K, 2100+ */
@media (min-width: 2100px) {
  .hero-wrap--stage { --hero-title: min(6.6rem, 11vh); --nav-logo-h: 34px; --stage-w: 56%; }
  .hero-card__lead { font-size: clamp(1.15rem, 1.05vw, 1.4rem); max-width: 56ch; }
}
/* ---------- STATS ---------- */
.stats { padding: clamp(2.5rem, 5vw, 4rem) clamp(16px, 1.6vw, 32px) 0; }
.stats__inner { max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); }
.stats__panel { background: var(--paper); border-radius: clamp(16px, 1.5vw, 22px); box-shadow: var(--shadow-mid); display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; }
.stat { position: relative; padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2.25rem); border-left: 1px solid var(--steel); display: flex; flex-direction: column; gap: 0.55rem; transition: background-color var(--dur-base) var(--ease-out); }
.stat:first-child { border-left: 0; }
.stat::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ignition); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.stat:hover { background: var(--mist); }
.stat:hover::after { transform: scaleX(1); }
.stat__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 3.4vw, 3.25rem); line-height: 1; color: var(--brand); font-feature-settings: 'tnum' 1; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 0.3rem; }
.stat__unit { font-size: 0.34em; font-weight: 700; color: var(--ignition); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.stat__label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(10, 22, 40, 0.5); }
/* ---------- PROCESS ---------- */
.process { padding: clamp(4rem, 8vw, 7rem) clamp(16px, 1.6vw, 32px); }
.process__inner { max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); }
.process__steps { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 2rem); position: relative; }
.process__steps::before { content: ''; position: absolute; top: 27px; left: 9%; right: 9%; height: 2px; background: var(--steel); z-index: 0; }
.step { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.step__index { width: 54px; height: 54px; border-radius: 50%; background: var(--paper); border: 2px solid var(--steel); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--brand); transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.step:hover .step__index { border-color: var(--ignition); background: var(--ignition); color: #fff; transform: translateY(-3px); }
.step__icon { color: var(--brand); }
.step__icon [data-lucide] { width: 26px; height: 26px; }
.step h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--brand); letter-spacing: var(--tracking-heading); }
.step p { color: rgba(10, 22, 40, 0.65); font-size: 0.95rem; line-height: 1.55; }
/* ---------- MACHINE ---------- */
.machine { padding: clamp(2rem, 4vw, 4rem) clamp(16px, 1.6vw, 32px) clamp(4rem, 8vw, 7rem); }
.machine__inner { max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); }
.machine__card { background: var(--paper); border-radius: clamp(18px, 2vw, 28px); box-shadow: var(--shadow-high); overflow: hidden; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: stretch; }
.machine__visual { position: relative; background: radial-gradient(120% 90% at 30% 12%, rgba(34,102,161,0.35), transparent 60%), var(--gradient-hero); display: grid; place-items: center; padding: clamp(2rem, 4vw, 3.5rem); overflow: hidden; }
.machine__visual::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 38%, #000, transparent 82%); mask-image: radial-gradient(ellipse 70% 70% at 50% 38%, #000, transparent 82%); pointer-events: none; }
.machine__visual img { position: relative; z-index: 1; max-height: 470px; width: auto; filter: drop-shadow(0 30px 48px rgba(3, 40, 72, 0.55)); }
.machine__tag { position: absolute; z-index: 2; left: clamp(1.25rem, 2.5vw, 2rem); top: clamp(1.25rem, 2.5vw, 2rem); display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: rgba(3, 40, 72, 0.42); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: #fff; }
.machine__tag::before { content: ''; width: 9px; height: 11px; background-color: var(--ignition); -webkit-mask: url('./assets/triangle.svg') no-repeat center / contain; mask: url('./assets/triangle.svg') no-repeat center / contain; flex: none; }
.machine__body { padding: clamp(2rem, 4vw, 3.5rem); display: flex; flex-direction: column; gap: var(--space-5); }
.machine__body h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.6rem); color: var(--brand); letter-spacing: var(--tracking-heading); line-height: 1.04; }
.machine__lead { color: rgba(10, 22, 40, 0.7); font-size: var(--fs-lead); line-height: 1.55; max-width: 46ch; }
.machine__specs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--steel); border: 1px solid var(--steel); border-radius: var(--radius-lg); overflow: hidden; }
.machine__specs > div { background: var(--paper); padding: clamp(0.9rem, 1.6vw, 1.15rem) clamp(1rem, 1.8vw, 1.25rem); display: flex; flex-direction: column; gap: 5px; }
.machine__specs dt { font-family: var(--font-display); font-weight: 700; font-size: 0.64rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(10, 22, 40, 0.5); }
.machine__specs dd { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--brand); font-feature-settings: 'tnum' 1; line-height: 1.1; }
.machine__cta { margin-top: auto; display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.machine__link { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand); display: inline-flex; align-items: center; gap: 0.5rem; }
.machine__link [data-lucide] { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.machine__link:hover [data-lucide] { transform: translateY(2px); }
/* ---------- USP numbered rows ---------- */
.usp { padding: clamp(3rem, 5vw, 5rem) clamp(16px, 1.6vw, 32px) clamp(5rem, 9vw, 8rem); }
.usp--canvas { background: var(--canvas); }
.usp__inner { max-width: calc(var(--container) - 2 * clamp(0.5rem, 2.5vw, 2.5rem)); margin-inline: auto; background: var(--paper); border-radius: clamp(16px, 1.5vw, 24px); padding-block: clamp(2rem, 4vw, 3.5rem); padding-inline: clamp(1.5rem, 4vw, 3rem); box-shadow: var(--shadow-low); }
.usp__head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-7); }
/* Optionele lead onder de usp-titel. Toegevoegd 2026-09-04 voor het Academy-blok op /services/:
   het blok had alleen eyebrow + H2, en een <p> daaronder viel terug op de body-stijl en oogde
   daardoor als losse tekst in plaats van als lead. Spiegelt bewust `.pillars__head p`. */
.usp__head p { max-width: 62ch; color: rgba(10, 22, 40, 0.68); font-size: var(--fs-lead); line-height: 1.55; }
.usp__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.07; color: var(--brand); letter-spacing: var(--tracking-heading); max-width: 24ch; }
.usp__row { display: grid; grid-template-columns: clamp(72px, 9vw, 116px) minmax(0, 1fr) minmax(200px, 260px); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; padding: clamp(1.75rem, 3.4vw, 2.6rem) 0; border-top: 1px solid var(--steel); transition: background-color var(--dur-base) var(--ease-out); position: relative; }
.usp__row:last-child { border-bottom: 1px solid var(--steel); }
.usp__row:hover { background-color: color-mix(in oklab, var(--mist) 60%, transparent); }
.usp__row:hover .usp__num { color: var(--ignition); transform: translateY(-3px); }
.usp__row:hover .usp__proof { border-left-color: var(--ignition); }
.usp__row::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ignition); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out); }
.usp__row:hover::after { transform: scaleX(1); }
.usp__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 4vw, 3.6rem); line-height: 0.9; color: var(--steel); letter-spacing: -0.02em; transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.usp__body h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.5rem); color: var(--brand); margin-bottom: var(--space-2); letter-spacing: var(--tracking-heading); }
.usp__body p { color: rgba(10,22,40,0.7); font-size: 1rem; max-width: 56ch; }
.usp__proof { display: flex; flex-direction: column; gap: var(--space-4); padding-left: clamp(1rem, 2vw, 1.5rem); border-left: 1px solid var(--steel); transition: border-left-color var(--dur-base) var(--ease-out); }
.usp__proof-item { display: flex; flex-direction: column; gap: 4px; }
.usp__proof-label { font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(10, 22, 40, 0.5); }
.usp__proof-value { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--brand); line-height: 1.25; }

@media (max-width: 900px) {
  .usp__row { grid-template-columns: clamp(60px, 8vw, 92px) minmax(0, 1fr); row-gap: var(--space-5); }
  .usp__proof { grid-column: 2 / -1; flex-direction: row; flex-wrap: wrap; gap: var(--space-5); padding-left: 0; padding-top: var(--space-4); border-left: 0; border-top: 1px solid var(--steel); }
  .usp__proof-item { min-width: 140px; }
}
/* ====================================================
     CONFIG. opties in 2×2 paper-cards (mist)
     ==================================================== */
.config { padding: clamp(4rem, 8vw, 7rem) clamp(16px, 1.6vw, 32px); }
.config__inner { max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); }
.config__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.config__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }

@media (max-width: 760px) {
  .config__grid { grid-template-columns: 1fr; }
}
.copt { background: var(--paper); border-radius: var(--radius-xl); box-shadow: var(--shadow-low); padding: clamp(1.5rem, 2.6vw, 2.1rem); display: flex; flex-direction: column; gap: var(--space-4); }
.copt__head { display: flex; align-items: center; gap: var(--space-4); }
.copt__icon { width: 44px; height: 44px; flex: none; border-radius: var(--radius-md); background: var(--mist); border: 1px solid var(--steel); display: grid; place-items: center; color: var(--brand); }
.copt__icon [data-lucide] { width: 21px; height: 21px; }
.copt h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--brand); letter-spacing: var(--tracking-heading); }
.copt__list { display: flex; flex-direction: column; gap: 0.7rem; }
.copt__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: start; font-size: 0.95rem; line-height: 1.5; color: rgba(10,22,40,0.78); }
.copt__list li::before { content: ''; width: 9px; height: 11px; margin-top: 0.42em; flex: none; background-color: var(--ignition); -webkit-mask: url('./assets/triangle.svg') no-repeat center / contain; mask: url('./assets/triangle.svg') no-repeat center / contain; }
.copt__list strong { font-weight: 600; color: var(--ink); }
.copt > p { font-size: 0.95rem; line-height: 1.55; color: rgba(10,22,40,0.7); }
/* ---------- TRUST / LOGO-WALL (marquee) ---------- */
.trust { padding: clamp(3rem, 6vw, 5rem) 0; overflow: hidden; }
.trust__label { max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 5vw, 80px); text-align: center; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(10, 22, 40, 0.45); }
.trust__marquee { margin-top: clamp(1.75rem, 3vw, 2.75rem); position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.trust__track { display: flex; width: max-content; gap: clamp(2.5rem, 6vw, 5rem); animation: trustScroll 42s linear infinite; }
.trust:hover .trust__track { animation-play-state: paused; }
@keyframes trustScroll { to { transform: translateX(-50%); } }
.trust__logo { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.45rem); letter-spacing: 0.04em; color: rgba(10, 22, 40, 0.3); white-space: nowrap; display: inline-flex; align-items: center; gap: 0.55rem; transition: color var(--dur-base) var(--ease-out); }
.trust__logo::before { content: ''; width: 10px; height: 12px; flex: none; background-color: currentColor; -webkit-mask: url('./assets/triangle.svg') no-repeat center / contain; mask: url('./assets/triangle.svg') no-repeat center / contain; }
.trust__logo:hover { color: var(--brand); }
/* ---------- APPLICATIONS / INDUSTRIEËN (card-grid) ---------- */
/* R1: eerste blok ná de hero = body-achtergrond (--mist), naadloos doorlopend uit de header, geen lijn. */
.applications { padding: clamp(4rem, 8vw, 7rem) clamp(16px, 1.6vw, 32px); background: var(--mist); }
.applications--canvas { background: var(--canvas); }
.applications__inner { max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); }
.applications__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3rem); }
.applications__head--tight { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.applications__link { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); letter-spacing: var(--tracking-ui); text-transform: uppercase; color: var(--brand); display: inline-flex; align-items: center; gap: 0.5rem; flex: none; }
.applications__link [data-lucide] { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.applications__link:hover [data-lucide] { transform: translateX(4px); }
.matchips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.matchip { font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: var(--tracking-ui); text-transform: uppercase; color: var(--brand); background: var(--paper); border: 1px solid var(--steel); border-radius: 999px; padding: 0.5rem 0.9rem; }
.applications__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }

@media (max-width: 1100px) {
  .applications__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .applications__grid { grid-template-columns: 1fr; }
  .machine__specs { grid-template-columns: minmax(0, 1fr); }
  .applications__head { flex-direction: column; align-items: flex-start; }
}
.app-card { position: relative; display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-low); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); color: inherit; }
.app-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-high); }
.app-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.app-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.app-card:hover .app-card__media img { transform: scale(1.06); }
.app-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(3,40,72,0.35) 100%); }
.app-card__body { padding: clamp(1.1rem, 1.8vw, 1.4rem) clamp(1.1rem, 1.8vw, 1.4rem) clamp(1.3rem, 2vw, 1.6rem); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.app-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; line-height: 1.2; color: var(--brand); letter-spacing: var(--tracking-heading); }
.app-card p { font-size: 0.92rem; line-height: 1.5; color: rgba(10, 22, 40, 0.65); }
.app-card__more { margin-top: auto; padding-top: 0.6rem; display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ignition); }
.app-card__more [data-lucide] { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-out); }
.app-card:hover .app-card__more [data-lucide] { transform: translateX(3px); }
/* ---------- CASES (dark editorial) ---------- */
.cases-wrap { padding: clamp(2rem, 4vw, 3.5rem) clamp(16px, 1.6vw, 32px); }
.cases { position: relative; max-width: calc(var(--container) - 2 * clamp(0.5rem, 2.5vw, 2.5rem)); margin-inline: auto; background: var(--gradient-hero-reverse); color: #fff; border-radius: clamp(20px, 2vw, 32px); padding: clamp(4rem, 7vw, 6rem) clamp(1.75rem, 4vw, 3.5rem); overflow: hidden; box-shadow: var(--shadow-high); isolation: isolate; }
.cases::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 80px 80px; -webkit-mask-image: radial-gradient(ellipse 65% 70% at 80% 25%, #000, transparent 90%); mask-image: radial-gradient(ellipse 65% 70% at 80% 25%, #000, transparent 90%); pointer-events: none; z-index: 0; }
.cases__inner { position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); }
.cases--flush .cases__inner { padding-inline: 0; }
.cases__eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: var(--space-4); }
.cases__eyebrow::before { content: ''; width: 12px; height: 14px; background-color: var(--ignition); -webkit-mask: url('./assets/eyebrow.svg') no-repeat center / contain; mask: url('./assets/eyebrow.svg') no-repeat center / contain; flex: none; }
.cases__title { margin: 0 0 clamp(2rem, 4vw, 3rem); font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: var(--tracking-heading); color: #fff; max-width: 22ch; }
.cases--flush .cases__title { max-width: 24ch; }
.cases__layout { display: grid; grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: stretch; }
.cases__main { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.25rem); }
.cases__quote { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.22; letter-spacing: -0.01em; color: #fff; position: relative; }
.cases__quote::before { content: '\201C'; position: absolute; left: -0.4em; top: -0.5em; font-size: 3.4em; line-height: 1; color: rgba(231, 52, 45, 0.55); font-weight: 700; pointer-events: none; }
.cases__body { color: rgba(255,255,255,0.9); font-size: 1rem; line-height: 1.62; max-width: 52ch; margin: 0; }
.cases--flush .cases__body { color: rgba(255,255,255,0.74); }
.cases__specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.5rem); margin: 0; padding: var(--space-5) 0; border-top: 1px solid rgba(255,255,255,0.14); border-bottom: 1px solid rgba(255,255,255,0.14); }
.cases__specs > div { display: flex; flex-direction: column; gap: 6px; }
.cases__specs dt { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.5); }
.cases__specs dd { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; color: #fff; line-height: 1.3; }
.cases__attr { display: flex; align-items: center; gap: var(--space-4); margin-top: auto; }
.cases__attr-who { display: flex; flex-direction: column; gap: 2px; }
.cases__client-name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: #fff; }
.cases__client-role { font-family: var(--font-display); font-weight: 700; font-size: 0.68rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.5); }
.cases__photo { position: relative; margin: 0; border-radius: clamp(14px, 1.4vw, 22px); overflow: hidden; min-height: clamp(340px, 30vw, 480px); box-shadow: 0 24px 48px rgba(3, 40, 72, 0.35); }
.cases__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; transform: scale(1.04); transition: transform 1.2s var(--ease-out); }
.cases__photo:hover img { transform: scale(1.08); }
.cases__cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.cases__cta .btn--glass { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.28); color: #fff; }
.cases__cta .btn--glass:hover { background: rgba(255,255,255,0.18); }

@media (max-width: 600px) {
  /* Stapelen onder 600px is de regel, niet de uitzondering. Tot 2026-08-31 stond dit
     als .cases__specs--stack op alleen de 4 homepages; de 40 andere pagina's met dit
     blok toonden op 390px drie kolommen van ±105px, waarin een label als
     "Akoestiek ACM &" over drie regels brak. */
  .cases__specs { grid-template-columns: 1fr; gap: var(--space-4); }
}

@media (max-width: 900px) {
  .cases__layout { grid-template-columns: 1fr; }
  .cases__photo { min-height: 280px; }
}
/* ---------- NEWS ---------- */
.news { padding: clamp(4rem, 8vw, 7rem) clamp(16px, 1.6vw, 32px); }
.news__inner { max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); }
.news__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3rem); }
.news__link { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); letter-spacing: var(--tracking-ui); text-transform: uppercase; color: var(--brand); display: inline-flex; align-items: center; gap: 0.5rem; flex: none; }
.news__link [data-lucide] { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.news__link:hover [data-lucide] { transform: translateX(4px); }
.news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
.article { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-low); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); color: inherit; }
.article:hover { transform: translateY(-6px); box-shadow: var(--shadow-high); }
.article__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.article__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.article:hover .article__media img { transform: scale(1.06); }
.article__cat { position: absolute; left: 14px; top: 14px; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--font-display); font-weight: 700; font-size: 0.6rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand); }
.article__body { padding: clamp(1.25rem, 2vw, 1.6rem); display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.article__meta { font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(10, 22, 40, 0.45); }
.article h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.3; color: var(--brand); letter-spacing: var(--tracking-heading); }
.article__more { margin-top: auto; padding-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ignition); }
.article__more [data-lucide] { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-out); }
.article:hover .article__more [data-lucide] { transform: translateX(3px); }
/* ---------- FAQ ---------- */
.faq { padding: clamp(4rem, 8vw, 7rem) clamp(16px, 1.6vw, 32px); }
.faq__inner { max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.faq__intro { position: sticky; top: 2.5rem; }
.faq__intro h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.85rem, 3vw, 2.5rem); line-height: 1.07; letter-spacing: var(--tracking-heading); color: var(--brand); margin-top: var(--space-3); }
.faq__intro p { margin-top: var(--space-4); color: rgba(10,22,40,0.65); font-size: var(--fs-lead); line-height: 1.55; max-width: 36ch; }
.faq__intro .btn { margin-top: var(--space-6); }
.faq__list { display: flex; flex-direction: column; }
.faq__item { border-top: 1px solid var(--steel); }
.faq__item:last-child { border-bottom: 1px solid var(--steel); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: clamp(1.1rem, 2vw, 1.5rem) 0; text-align: left; list-style: none; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--brand); letter-spacing: var(--tracking-heading); transition: color var(--dur-fast) var(--ease-out); cursor: pointer; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--ignition); }
.faq__icon { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--steel); display: grid; place-items: center; position: relative; transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; background: var(--brand); transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); }
.faq__icon::before { width: 12px; height: 2px; }
.faq__icon::after { width: 2px; height: 12px; }
.faq__item[open] .faq__icon { background: var(--ignition); border-color: var(--ignition); }
.faq__item[open] .faq__icon::before, .faq__item[open] .faq__icon::after { background: #fff; }
.faq__item[open] .faq__icon::after { transform: scaleY(0); }
.faq__a { overflow: hidden; color: rgba(10,22,40,0.7); font-size: 1rem; line-height: 1.6; }
.faq__item[open] .faq__a { animation: faqReveal var(--dur-base) var(--ease-out); }
@keyframes faqReveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.faq__a p { padding-bottom: clamp(1.1rem, 2vw, 1.5rem); max-width: 64ch; }

@media (max-width: 980px) {
  .faq__inner { grid-template-columns: 1fr; }
  .faq__intro { position: static; }
}
/* ---------- CONTACT (light), uit index.html ---------- */
/* R1: eerste blok ná de hero = body-achtergrond (--mist), naadloos doorlopend uit de header, geen lijn. */
.contact { position: relative; overflow: hidden; isolation: isolate; padding: clamp(4rem, 8vw, 7rem) clamp(16px, 1.6vw, 32px); background: var(--canvas); color: var(--ink); }
.contact--mist { background: var(--mist); }
.contact__form { background: var(--paper); border: 1px solid var(--steel); border-radius: clamp(16px, 1.8vw, 24px); box-shadow: var(--shadow-mid); padding: clamp(1.5rem, 3vw, 2.5rem); }
.contact__form--grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-display); font-weight: 700; font-size: 0.64rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(10,22,40,0.55); }
.field input, .field select, .field textarea { font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); background: var(--mist); border: 1.5px solid var(--steel); border-radius: var(--radius-md); padding: 0.78rem 0.85rem; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ignition); background: var(--paper); }
.contact__form .btn { grid-column: 1 / -1; justify-content: center; }
.contact__success { display: none; grid-column: 1 / -1; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; padding: clamp(1.5rem, 3vw, 2.5rem) 1rem; }
.contact__success [data-lucide] { width: 40px; height: 40px; color: var(--ignition); }
.contact__success h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--brand); }
.contact__success p { font-size: 0.95rem; color: rgba(10,22,40,0.7); max-width: 40ch; }
.contact__form.is-sent .field, .contact__form.is-sent .btn, .contact__form.is-sent .contact__alt { display: none; }
.contact__form.is-sent .contact__success { display: flex; }

@media (max-width: 900px) {
  .contact__form--grid { grid-template-columns: 1fr; }
}
/* ====================================================
     FOOTER (structuur volgens Menu.md — zie styleguide)
     ==================================================== */
.site-footer { background: var(--deep); color: rgba(255,255,255,0.7); padding: clamp(3.5rem, 6vw, 5.5rem) clamp(16px, 1.6vw, 32px) clamp(1.75rem, 3vw, 2.5rem); }
.footer__inner { max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(2.5rem, 4vw, 3.5rem); border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer__brand img { height: 26px; filter: brightness(0) invert(1); }
.footer__brand p { margin-top: var(--space-4); font-size: 0.9rem; line-height: 1.6; max-width: 34ch; color: rgba(255,255,255,0.55); }
.footer__col h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: #fff; margin-bottom: var(--space-4); }
.footer__col a, .footer__col address { display: block; font-size: 0.9rem; line-height: 1.5; color: rgba(255,255,255,0.58); font-style: normal; margin-bottom: 0.6rem; transition: color var(--dur-fast) var(--ease-out); }
.footer__col a:hover { color: var(--ignition); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding-top: clamp(1.5rem, 3vw, 2rem); }
.footer__legal { font-size: 0.78rem; color: rgba(255,255,255,0.45); display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: center; }
/* De enige footerlinks die geen hover hadden. Bewust lichter wit en niet --ignition
   zoals .footer__col a:hover: de legal-rij is een gedempte, secundaire regel en de
   styleguide legde die waarde al vast. */
.footer__legal a:hover { color: rgba(255,255,255,0.85); }
/* De cookie-instellingen zijn een <button> en geen link: dat element navigeert niet maar opent
   de CMP-dialoog. De AVG-eis erachter is dat intrekken net zo makkelijk moet zijn als geven, en
   de cookieverklaring verwijst er twee keer naar. Visueel hoort hij niet op te vallen tussen de
   legal-links, dus hij erft alles en draait alleen de UA-stijl van een button terug.
   De selector noemt de CMP-class en niet `button`, zoals `.hs-form-frame` hierboven: zo kent
   het designsysteem de class en blijft `class-not-canonical` op 0. */
.footer__legal .cky-banner-element { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.footer__legal .cky-banner-element:hover { color: rgba(255,255,255,0.85); }
.footer__legal .cky-banner-element:focus-visible { outline: 2px solid var(--ignition); outline-offset: 2px; }
.footer__social { display: flex; gap: var(--space-3); }
.footer__social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); display: grid; place-items: center; color: rgba(255,255,255,0.7); transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.footer__social a i[data-lucide="linkedin"]:empty { display: block; width: 17px; height: 17px; background-color: currentColor; -webkit-mask: url('./assets/icon-linkedin.svg') center / contain no-repeat; mask: url('./assets/icon-linkedin.svg') center / contain no-repeat; }

@media (hover: hover) {
  .footer__social a:hover { background: var(--ignition); border-color: var(--ignition); color: #fff; }
}
.footer__social [data-lucide] { width: 17px; height: 17px; }

@media (max-width: 980px) {
  /* ---------- RESPONSIVE (paginabreed) ---------- */
  .mhero__card { height: auto; min-height: 0; padding-bottom: clamp(1.5rem, 5vw, 2.5rem); }
  .mhero__stage { display: none; }
  .mhero__photo { display: block; max-width: 100%; max-height: 42vh; width: auto; height: auto; margin: clamp(1.5rem, 5vw, 2.5rem) auto 0; filter: drop-shadow(0 26px 44px rgba(3, 40, 72, 0.5)); }
  .mhero__copy { margin-top: clamp(1.75rem, 6vw, 2.75rem); }
  .mhero__rail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mhero__rail > div:nth-child(odd) { border-left: 0; }
  .mhero__rail > div:nth-child(n+3) { border-top: 1px solid var(--steel); }
  .intro__inner { grid-template-columns: 1fr; gap: var(--space-5); }
  .specsheet__inner { grid-template-columns: 1fr; }
  .specsheet__intro { position: static; }
  .anatomy__layout { grid-template-columns: 1fr; }
  .anatomy__feature { position: static; }
  .machine__card { grid-template-columns: minmax(0, 1fr); }
  .process__steps { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .process__steps::before { display: none; }
  /* ---------- Blok-responsive (stack < 980px) ---------- */
  .stats__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid var(--steel); }
  .news__grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .mhero__rail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mhero__title { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .afeat__specs { grid-template-columns: 1fr 1fr; }
  .stats__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stats__panel--single { grid-template-columns: 1fr; }
  .stats__panel--single .stat { border-left: 0 !important; }
  .stats__panel--single .stat:not(:first-child) { border-top: 1px solid var(--steel); }
  .process__steps { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .mhero__model { animation: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; }
}


@media (prefers-reduced-motion: reduce) {
  .hero-card__title .word > span, .hero-card__lead, .hero-card__ctas, .hero-stage__model, .hero-stage__poster, .hero-card__scroll, .hero-usp { animation: none !important; opacity: 1 !important; transform: none !important; }
  .trust__track { animation: none; }
  .faq__item[open] .faq__a { animation: none; }
}
.btn [data-lucide] { width: 18px; height: 18px; }
/* triggers reuse de bestaande nav-link-look + een chevron */
.navgroup { position: relative; display: inline-flex; align-items: center; }
.mega-trigger { display: inline-flex; align-items: center; gap: 0.35rem; font: inherit; letter-spacing: inherit; cursor: pointer; }
.mega-trigger .chev { width: 14px; height: 14px; opacity: 0.8; transition: transform var(--dur-base) var(--ease-out); }
.mega-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* in de blauwe hero-nav (witte tekst) */
.mhero__menu .mega-trigger { position: relative; padding-bottom: 5px; color: rgba(255,255,255,0.94); transition: color var(--dur-fast) var(--ease-out); }
.mhero__menu .mega-trigger::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: var(--ignition); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.mhero__menu .mega-trigger:hover, .mhero__menu .mega-trigger[aria-expanded="true"] { color: #fff; }
.mhero__menu .mega-trigger:hover::after, .mhero__menu .mega-trigger[aria-expanded="true"]::after { transform: scaleX(1); }
/* in de blauwe header-nav (witte tekst) */
.nav__items .mega-trigger { position: relative; padding-bottom: 5px; color: rgba(255,255,255,0.94); transition: color var(--dur-fast) var(--ease-out); }
.nav__items .mega-trigger::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: var(--ignition); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.nav__items .mega-trigger:hover, .nav__items .mega-trigger[aria-expanded="true"] { color: #fff; }
.nav__items .mega-trigger:hover::after, .nav__items .mega-trigger[aria-expanded="true"]::after { transform: scaleX(1); }
/* gedeelde panel-laag, fixed onder de balk, nooit geclipt */
/* top wordt per trigger in JS gezet (net onder de aangewezen nav); deze waarde is alleen fallback */
/* geen centrering: het paneel wordt in JS horizontaal onder de actieve trigger gezet */
.megawrap { position: fixed; top: 96px; left: 0; right: 0; z-index: 120; display: flex; justify-content: flex-start; padding-inline: var(--gutter); pointer-events: none; }
/* Zachte, gelijkmatige dim over het hele scherm, geen blur, geen harde rand,
     vangt nooit de muis af (anders wordt de hover finicky). */
.megascrim { position: fixed; inset: 0; z-index: 110; background: rgba(3, 40, 72, 0.22); opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }
.megascrim.is-active { opacity: 1; }
.megapanel { width: min(1080px, 100%); flex: none; background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-high); overflow: hidden; display: none; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); opacity: 0; transform: translateY(-10px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.megapanel.is-open { display: grid; pointer-events: auto; }
.megapanel.is-shown { opacity: 1; transform: none; }
.megapanel--narrow { width: min(760px, 100%); }
.megapanel__lists { padding: clamp(1.6rem, 2.6vw, 2.5rem); display: grid; gap: 0.4rem clamp(1.5rem, 3vw, 2.75rem); align-content: start; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.megapanel__eyebrow { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(10, 22, 40, 0.45); }
.megapanel__eyebrow::before { content: ''; width: 11px; height: 13px; flex: none; background-color: var(--ignition); -webkit-mask: url('./assets/eyebrow.svg') no-repeat center / contain; mask: url('./assets/eyebrow.svg') no-repeat center / contain; }
.megalink { display: flex; align-items: center; gap: 0.85rem; padding: 0.65rem 0.75rem; border-radius: var(--radius-md); color: var(--brand); transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.megalink:hover { background: var(--mist); transform: translateX(2px); }
.megalink__icon { width: 38px; height: 38px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--canvas); color: var(--brand); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.megalink__icon [data-lucide] { width: 19px; height: 19px; }
.megalink:hover .megalink__icon { background: var(--ignition); color: #fff; }
.megalink__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.megalink__title { font-family: var(--font-display); font-weight: 700; font-size: 0.96rem; line-height: 1.15; letter-spacing: var(--tracking-heading); }
.megalink__sub { font-size: 0.78rem; line-height: 1.3; color: rgba(10, 22, 40, 0.55); }
.megafeature { position: relative; padding: clamp(1.6rem, 2.6vw, 2.5rem); background: var(--deep); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-4); isolation: isolate; overflow: hidden; min-height: 250px; }
/* foto vult de kolom; drukvat-blauwe gradient eroverheen houdt de tekst leesbaar */
.megafeature::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(3,40,72,0.25) 0%, rgba(3,40,72,0.55) 48%, rgba(3,40,72,0.88) 100%); pointer-events: none; }
.megafeature > * { position: relative; z-index: 2; }
.megafeature__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.megafeature__eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.7); }
.megafeature h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.35rem, 1.9vw, 1.8rem); line-height: 1.1; letter-spacing: var(--tracking-heading); color: #fff; max-width: 18ch; }
.megafeature p { color: rgba(255,255,255,0.78); font-size: 0.9rem; line-height: 1.5; max-width: 34ch; }
.megafeature__link { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: #fff; padding-bottom: 3px; border-bottom: 1.5px solid var(--ignition); transition: gap var(--dur-fast) var(--ease-out); }
.megafeature__link [data-lucide] { width: 15px; height: 15px; }
.megafeature__link:hover { gap: 0.8rem; }

@media (max-width: 760px) {
  .megapanel { grid-template-columns: 1fr; }
  .megafeature { display: none; }
}
/* rechts uitgelijnd op de CTA in de header: zelfde rechter-inzet als .subhero__nav */
.topbar { display: flex; justify-content: flex-end; align-items: center; gap: clamp(1.6rem, 3.2vw, 2.75rem); padding: 0.55rem clamp(1.5rem, 4vw, 3rem) 0.65rem; }
.topbar__link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 500; font-size: 0.86rem; letter-spacing: var(--tracking-ui); color: rgba(10, 22, 40, 0.42); transition: color var(--dur-fast) var(--ease-out); }
.topbar__link [data-lucide] { width: 15px; height: 15px; color: rgba(10, 22, 40, 0.52); transition: color var(--dur-fast) var(--ease-out); }
.topbar__link:hover { color: var(--brand); }
.topbar__link:hover [data-lucide] { color: var(--ignition); }

@media (max-width: 760px) {
  .topbar { display: none; }
}
/* ====================================================
     VERVOLG-HEADER (.subhero)
     Lage(re) blauwe kaart met nav + eyebrow + titel + lead.
     Hoger dan een kale balk, lager dan de home-hero.
     Breadcrumbs staan ALTIJD ónder de header (.crumbbar).
     ==================================================== */
.subhero { position: relative; border-radius: clamp(20px, 2vw, 32px); background: var(--gradient-hero); color: #fff; overflow: hidden; isolation: isolate; box-shadow: 0 6px 24px rgba(3, 40, 72, 0.10); }
.subhero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(760px 460px at 82% 0%, rgba(255,255,255,0.13), transparent 60%), radial-gradient(1000px 760px at 6% 140%, rgba(3,40,72,0.55), transparent 70%); }
.subhero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 80px 80px; -webkit-mask-image: radial-gradient(ellipse 85% 130% at 65% 0%, #000, transparent 92%); mask-image: radial-gradient(ellipse 85% 130% at 65% 0%, #000, transparent 92%); }
.subhero > * { position: relative; z-index: 2; }
.subhero__nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); padding: clamp(1.25rem, 2.6vh, 2rem) clamp(1.5rem, 4vw, 3rem) 0; }
.subhero__logo { height: 26px; width: auto; filter: brightness(0) invert(1); flex: none; }
.subhero__menu { display: flex; gap: clamp(1rem, 2vw, 2rem); margin-left: auto; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small); letter-spacing: var(--tracking-ui); }
.subhero__menu a { position: relative; padding-bottom: 5px; color: rgba(255,255,255,0.94); transition: color var(--dur-fast) var(--ease-out); }
.subhero__menu a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: var(--ignition); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.subhero__menu a:hover, .subhero__menu a.is-active { color: #fff; }
.subhero__menu a:hover::after, .subhero__menu a.is-active::after { transform: scaleX(1); }
.subhero__cta { padding: 0.7rem 1.1rem !important; font-size: var(--fs-small) !important; flex: none; }

@media (max-width: 1319px) {   /* chrome-grens */
  .subhero__menu { display: none; }
}
/* titelblok: eyebrow + grote titel + lead, links uitgelijnd op de container */
.subhero__body { max-width: var(--container); width: 100%; margin-inline: auto; padding: clamp(3rem, 8vh, 5.5rem) clamp(1.5rem, 4vw, 3rem) clamp(3.25rem, 8vh, 5.75rem); }
.subhero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.9); margin-bottom: var(--space-4); }
.subhero__eyebrow::before { content: ''; width: 12px; height: 14px; flex: none; background-color: var(--ignition); -webkit-mask: url('./assets/eyebrow.svg') no-repeat center / contain; mask: url('./assets/eyebrow.svg') no-repeat center / contain; }
.subhero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: var(--tracking-display); color: #fff; max-width: 18ch; }
.subhero__title em { font-style: normal; color: var(--ignition); }
.subhero__lead { margin-top: clamp(1rem, 2.4vh, 1.5rem); max-width: 52ch; color: rgba(255,255,255,0.9); font-size: var(--fs-lead); line-height: 1.55; }
/* gecentreerde variant, voor overzichtspagina's */
.subhero--center .subhero__body { display: flex; flex-direction: column; align-items: center; text-align: center; }
.subhero--center .subhero__title { max-width: 24ch; }
.subhero--center .subhero__lead { margin-inline: auto; }
/* breadcrumbs, ALTIJD onder de header, op de mist */
.crumbbar { max-width: var(--container); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; padding: clamp(0.9rem, 1.8vh, 1.25rem) clamp(1.5rem, 4vw, 3rem) 0; font-family: var(--font-display); font-weight: 700; font-size: 0.68rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(10,22,40,0.45); }
.crumbbar a { color: rgba(10,22,40,0.45); transition: color var(--dur-fast) var(--ease-out); }
.crumbbar a:hover { color: var(--brand); }
.crumbbar [data-lucide] { width: 12px; height: 12px; color: var(--ignition); flex: none; }
.crumbbar span[aria-current] { color: var(--brand); }
/* in de blauwe subhero-nav (witte tekst) */
.subhero__menu .mega-trigger { position: relative; padding-bottom: 5px; color: rgba(255,255,255,0.94); transition: color var(--dur-fast) var(--ease-out); }
.subhero__menu .mega-trigger::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: var(--ignition); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.subhero__menu .mega-trigger:hover, .subhero__menu .mega-trigger[aria-expanded="true"], .subhero__menu .mega-trigger.is-active { color: #fff; }
.subhero__menu .mega-trigger:hover::after, .subhero__menu .mega-trigger[aria-expanded="true"]::after, .subhero__menu .mega-trigger.is-active::after { transform: scaleX(1); }
/* burger (mobiel) in de subhero-nav */
.subhero__burger { display: none; flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; align-items: center; justify-content: center; transition: background-color var(--dur-fast) var(--ease-out); }
.subhero__burger:hover { background: rgba(255,255,255,0.2); }
.subhero__burger [data-lucide] { width: 20px; height: 20px; }

@media (max-width: 1319px) {   /* chrome-grens */
  .subhero__cta { display: none; }
  .subhero__burger { display: inline-flex; margin-left: auto; }
}
/* HubSpot-embed slot (form_id contact_general), vervangt de placeholder-velden */
.contact-form__slot { grid-column: 1 / -1; }

@media (max-width: 600px) {
  .stat:nth-child(3) { border-left: 0; }
}
/* ====================================================
     OVERZICHT, intro, filter-pills en producttegels
     ==================================================== */
.overview { padding: clamp(2rem, 4vw, 3rem) clamp(16px, 1.6vw, 32px) clamp(3.5rem, 6vw, 5.5rem); }
.overview__inner { max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); }
.overview__head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.07; letter-spacing: var(--tracking-heading); color: var(--brand); margin-top: var(--space-4); }
.overview__head p { margin-top: var(--space-4); color: rgba(10, 22, 40, 0.68); font-size: var(--fs-lead); line-height: 1.55; max-width: 56ch; }
/* filter: label + pills; actieve pill = ignition */
.filter { margin-top: clamp(1.5rem, 3vw, 2rem); display: flex; align-items: center; gap: clamp(0.85rem, 2vw, 1.5rem); flex-wrap: wrap; }
.filter__label { font-family: var(--font-display); font-weight: 700; font-size: 0.68rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(10,22,40,0.5); }
.filter__pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.filter__pill { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: var(--tracking-ui); padding: 0.55rem 1.05rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--steel); color: var(--brand); transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.filter__pill:hover { border-color: var(--brand); }
.filter__pill.is-active { background: var(--ignition); border-color: var(--ignition); color: #fff; }
/* grote producttegels */
.tiles { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }

@media (max-width: 980px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .tiles { grid-template-columns: 1fr; }
}
.tile { position: relative; display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius-xl); box-shadow: var(--shadow-low); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); color: inherit; }
.tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-high); }
.tile.is-hidden { display: none; }
/* Tegel-media: het grid-spoor MOET expliciet minmax(0,1fr) zijn en de img min-width/min-height 0.
   Zonder dat wint `min-height: auto` (de automatische minimumhoogte van een grid-item = de
   intrinsieke hoogte van het beeld) van `max-height: 100%`, groeit het spoor mee met het beeld en
   is de `aspect-ratio` krachteloos — die stelt alleen een VOORKEURSmaat in, hij klemt niet af.
   Gemeten op /oplossingen/pompen/ (viewport 1896, demo-beeld 642x1024 staand):
     vóór : media 437x659 (ratio 0.66), tegel 1004px hoog
     na   : media 437x328 (ratio 1.33), tegel  673px hoog
   Een staand beeld in een liggende tegel blies de tegel dus op tot anderhalf keer de hoogte. */
.tile__media { position: relative; aspect-ratio: 4 / 3; background: var(--mist); display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); overflow: hidden; }
/* Beeld vult de tegel volledig. Lever de bron op 4:3 aan (zie de derivaten in assets/), dan
   snijdt `cover` niets weg. De padding en `mix-blend-mode: multiply` zijn eruit: die hoorden
   bij vrijstaande renders op mist en lieten rondom een grijze rand staan. */
.tile__media img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.tile:hover .tile__media img { transform: scale(1.05); }
.tile__chip { position: absolute; top: 0.9rem; left: 0.9rem; font-family: var(--font-display); font-weight: 700; font-size: 0.62rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand); background: var(--paper); border-radius: 999px; padding: 0.4rem 0.7rem; box-shadow: var(--shadow-low); }
.tile__badge { position: absolute; top: 0.9rem; right: 0.9rem; font-family: var(--font-display); font-weight: 700; font-size: 0.62rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.9); background: rgba(10, 22, 40, 0.55); border-radius: 999px; padding: 0.4rem 0.7rem; }
.tile__body { display: flex; flex-direction: column; gap: var(--space-3); padding: clamp(1.25rem, 2.2vw, 1.75rem); flex: 1; }
.tile__body h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: var(--tracking-heading); color: var(--brand); }
.tile__body > p { font-size: 0.95rem; line-height: 1.55; color: rgba(10,22,40,0.68); }
.tile__specs { margin-top: var(--space-2); display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem clamp(0.75rem, 1.5vw, 1.25rem); padding-top: var(--space-4); border-top: 1px solid var(--steel); }
.tile__specs dt { font-family: var(--font-display); font-weight: 700; font-size: 0.6rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(10,22,40,0.5); }
.tile__specs dd { margin: 2px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; color: var(--brand); font-feature-settings: 'tnum' 1; }
.tile__more { margin-top: auto; padding-top: var(--space-4); display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ignition); }
.tile__more [data-lucide] { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-out); }
.tile:hover .tile__more [data-lucide] { transform: translateX(3px); }
/* variantenband onder het grid */
.variants { margin-top: clamp(1.5rem, 3vw, 2rem); display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 1.75rem); flex-wrap: wrap; background: var(--paper); border-radius: var(--radius-xl); box-shadow: var(--shadow-low); padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 2rem); }
.variants__icon { width: 46px; height: 46px; flex: none; border-radius: var(--radius-md); background: var(--mist); border: 1px solid var(--steel); display: grid; place-items: center; color: var(--brand); }
.variants__icon [data-lucide] { width: 21px; height: 21px; }
.variants p { font-size: 0.95rem; line-height: 1.55; color: rgba(10,22,40,0.7); max-width: 72ch; }
.variants strong { color: var(--brand); font-weight: 600; }
/* ====================================================
     SPEC-VERGELIJK (blok-gat #1) — PJ-pompen naast elkaar
     Donkere variant (R3) als mid-page accent.
     ==================================================== */
.spec { padding: clamp(3rem, 6vw, 5rem) clamp(16px, 1.6vw, 32px); }
.spec__inner { max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); }
.spec__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); max-width: 60ch; }
.spec__head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.06; letter-spacing: var(--tracking-heading); color: var(--brand); margin-top: var(--space-3); }
.spec__head p { margin-top: var(--space-3); color: rgba(10, 22, 40, 0.66); font-size: var(--fs-lead); line-height: 1.55; }
.spec__table { display: grid; grid-template-columns: minmax(130px, 0.8fr) repeat(var(--cols, 3), minmax(0, 1fr)); grid-template-rows: auto repeat(var(--rows, 5), auto); }
.spec__col { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; position: relative; }
.spec__name { display: flex; flex-direction: column; gap: 3px; justify-content: flex-end; padding: clamp(1.1rem, 2vw, 1.6rem) clamp(0.85rem, 1.4vw, 1.15rem) clamp(0.8rem, 1.4vw, 1.1rem); }
.spec__model { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.08; letter-spacing: var(--tracking-heading); color: var(--brand); }
.spec__sub { font-family: var(--font-body); font-weight: 500; font-size: 0.78rem; color: rgba(10, 22, 40, 0.55); }
.spec__cell { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: clamp(0.7rem, 1.3vw, 0.95rem) clamp(0.85rem, 1.4vw, 1.15rem); border-top: 1px solid var(--steel); min-height: 3.1rem; }
.spec__k { font-family: var(--font-display); font-weight: 700; font-size: 0.64rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(10, 22, 40, 0.5); }
.spec__v { font-family: var(--font-display); font-weight: 700; font-size: clamp(0.95rem, 1.4vw, 1.08rem); line-height: 1.15; color: var(--brand); font-feature-settings: 'tnum' 1; }
.spec__v--diff { color: var(--ignition); }
.spec__v--muted { color: rgba(10, 22, 40, 0.38); font-weight: 500; }
.spec__col--labels .spec__name { visibility: hidden; }
.spec__col--labels .spec__k { color: rgba(10, 22, 40, 0.62); }
.spec__col:not(.spec__col--labels) .spec__k { display: none; }
.spec__note { margin-top: var(--space-4); font-size: 0.82rem; line-height: 1.5; color: rgba(10, 22, 40, 0.5); max-width: 62ch; }
.spec--dark { background: var(--deep); }
.spec--dark .spec__head h2 { color: #fff; }
.spec--dark .spec__head p { color: rgba(255, 255, 255, 0.72); }
.spec--dark .spec__model { color: #fff; }
.spec--dark .spec__sub { color: rgba(255, 255, 255, 0.55); }
.spec--dark .spec__cell { border-top-color: rgba(255, 255, 255, 0.14); }
.spec--dark .spec__k, .spec--dark .spec__col--labels .spec__k { color: rgba(255, 255, 255, 0.55); }
.spec--dark .spec__v { color: #fff; }
.spec--dark .spec__v--muted { color: rgba(255, 255, 255, 0.4); }
.spec--dark .spec__note { color: rgba(255, 255, 255, 0.5); }

@media (max-width: 760px) {
  .spec__table { display: block; }
  .spec__col { display: block; background: var(--paper); border: 1px solid var(--steel); border-radius: var(--radius-lg); padding: 0.35rem clamp(1rem, 3vw, 1.4rem) 0.6rem; margin-bottom: 1.15rem; box-shadow: var(--shadow-low); }
  .spec__table .spec__col--labels { display: none; }
  .spec--dark .spec__col { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); }
  .spec__name { padding-left: 0; padding-right: 0; border-top: 0; }
  .spec__col:not(.spec__col--labels) .spec__k { display: block; }
  .spec__cell { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 1rem; padding-left: 0; padding-right: 0; min-height: 0; }
  .spec__cell .spec__v { text-align: right; }
}
/* methode-chip op de materiaal-tegel: zelfde pill-taal als .split__chip */
.methode-chip { position: absolute; z-index: 2; left: clamp(0.75rem, 1.5vw, 1rem); top: clamp(0.75rem, 1.5vw, 1rem); display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--font-display); font-weight: 700; font-size: 0.62rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand); }
.methode-chip::before { content: ''; width: 9px; height: 11px; flex: none; background-color: var(--ignition); -webkit-mask: url('./assets/triangle.svg') no-repeat center / contain; mask: url('./assets/triangle.svg') no-repeat center / contain; }
/* lijstje 'wat we onder deze groep snijden' in de tegel — een echte bulletlist.
   Géén margin-top:auto meer: de lijst hoort bij de body-tekst erboven, niet onderaan
   de kaart. Dat is wat hem op kaarten zonder knop op de knop-positie zette. */
.app-card__items { margin: 0; padding: 0 0 0 1.05em; list-style: disc; font-size: 0.8rem; line-height: 1.5; color: rgba(10, 22, 40, 0.55); }
.app-card__items li { margin-top: 0.12rem; }
.app-card__items li::marker { color: var(--ignition); }
/* .app-card__btn: een ECHTE knop, voor de kaart die zelf geen link is (.app-card--static)
   en één eigen bestemming heeft. Anders dan .app-card__more, dat een eyebrow-label is
   binnen een volledig klikbare kaart — daar is het een affordance, hier een knop. */
.app-card__btn { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.6rem 1rem; border: 1.5px solid rgba(3, 40, 72, 0.22); border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; line-height: 1.2; color: var(--brand); transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.app-card__btn [data-lucide] { width: 15px; height: 15px; flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.app-card__btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.app-card__btn:hover [data-lucide] { transform: translateX(3px); }
.app-card__btn:focus-visible { outline: 2px solid var(--ignition); outline-offset: 2px; }
/* .app-card--static: kaart zonder bestemming — geen hover-lift, geen pijl (styleguide) */
.app-card--static { cursor: default; }
.app-card--static:hover { transform: none; box-shadow: var(--shadow-low); }
.app-card--static:hover .app-card__media img { transform: none; }
.app-card--static .app-card__more { color: rgba(10, 22, 40, 0.55); }
.app-card--static .app-card__more [data-lucide] { display: none; }
/* ============================================================
     PILLARS — card/tile-grid (5 pijlers)
     Enige toevoeging t.o.v. de donor; volledig in de designtaal
     (tokens.css). Kaarten met icoon + titel + korte omschrijving.
     ============================================================ */
.pillars { padding: clamp(3rem, 6vw, 5rem) clamp(16px, 1.6vw, 32px) clamp(1rem, 2vw, 1.5rem); }
.pillars__inner { max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); }
.pillars__head { max-width: 60ch; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.pillars__head .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; }
.pillars__head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.07; letter-spacing: var(--tracking-heading); color: var(--brand); margin-top: var(--space-4); }
.pillars__head p { margin-top: var(--space-4); color: rgba(10, 22, 40, 0.68); font-size: var(--fs-lead); line-height: 1.55; }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.5rem); }
.pcard { position: relative; display: flex; flex-direction: column; gap: var(--space-3); background: var(--paper); border-radius: var(--radius-xl); box-shadow: var(--shadow-low); padding: clamp(1.5rem, 2.4vw, 2.1rem); overflow: hidden; transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.pcard::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ignition); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.pcard:hover { box-shadow: var(--shadow-mid); transform: translateY(-3px); }
.pcard:hover::after { transform: scaleX(1); }
.pcard__icon { width: 46px; height: 46px; flex: none; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--mist); color: var(--brand); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.pcard__icon [data-lucide] { width: 22px; height: 22px; }
.pcard:hover .pcard__icon { background: var(--ignition); color: #fff; }
.pcard h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.15; letter-spacing: var(--tracking-heading); color: var(--brand); }
.pcard p { color: rgba(10, 22, 40, 0.7); font-size: 0.95rem; line-height: 1.55; }
.pcard__link { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand); padding-bottom: 3px; border-bottom: 1.5px solid var(--ignition); transition: gap var(--dur-fast) var(--ease-out); }
.pcard__link [data-lucide] { width: 14px; height: 14px; }
.pcard__link:hover { gap: 0.8rem; }

@media (max-width: 900px) {
  .pgrid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .pgrid { grid-template-columns: 1fr; }
}
/* ---------- MEDIA SPLIT (foto links/rechts + tekst), uit styleguide ---------- */
.split { padding: clamp(3rem, 6vw, 5rem) clamp(16px, 1.6vw, 32px); }
.split--roomy { padding: clamp(4rem, 8vw, 7rem) clamp(16px, 1.6vw, 32px); }
.split__inner { max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--reverse .split__inner > .split__visual { order: 2; }
.split--reverse .split__inner > .split__copy { order: 1; }
.split__visual { position: relative; aspect-ratio: 5/4; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-high); }
.split__visual img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease-out); }
.split__visual:hover img { transform: scale(1.08); }
/* Kaart-variant (Leaflet + CartoDB Positron, licht Resato-getint) */
.split__visual--map { background: var(--mist); }
.split__map { position: absolute; inset: 0; isolation: isolate; }
.split__map { width: 100%; height: 100%; object-fit: cover; background: var(--mist); }
.split__visual--map::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--brand); opacity: 0.08; mix-blend-mode: soft-light; }
.split__maplink { position: absolute; z-index: 3; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 0.5rem 0.8rem; border-radius: var(--radius-sm); background: var(--paper); color: var(--brand); font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: var(--tracking-ui); text-transform: uppercase; box-shadow: var(--shadow-low); transition: color var(--dur-fast) var(--ease-out); }
.split__maplink:hover { color: var(--ignition); }
.split__maplink [data-lucide] { width: 14px; height: 14px; }
/* R5: informatie-dragend beeld niet bijsnijden, passend tonen op wit, blokhoogte gelijk. */
.split__visual--contain { background: var(--paper); }
.split__visual--contain img { object-fit: contain; transform: none; padding: clamp(0.75rem, 2.5vw, 1.75rem); }
.split__visual--contain:hover img { transform: none; }
.split__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(155deg, transparent 55%, rgba(3,40,72,0.25) 100%); pointer-events: none; }
.split__chip { position: absolute; z-index: 2; left: clamp(1rem, 2vw, 1.5rem); top: clamp(1rem, 2vw, 1.5rem); display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand); }
.split__chip--above { z-index: 4; }
.split__chip::before { content: ''; width: 9px; height: 11px; flex: none; background-color: var(--ignition); -webkit-mask: url('./assets/triangle.svg') no-repeat center / contain; mask: url('./assets/triangle.svg') no-repeat center / contain; }
.split__copy .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ignition); }
.split__copy h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.4vw, 2.85rem); line-height: 1.05; letter-spacing: var(--tracking-heading); color: var(--brand); margin-top: var(--space-4); }
.split__copy p { margin-top: var(--space-5); max-width: 54ch; color: rgba(10, 22, 40, 0.72); font-size: var(--fs-lead); line-height: 1.55; }
.split__points { margin: var(--space-6) 0 var(--space-6); padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.split__points li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.95rem; color: rgba(10, 22, 40, 0.78); line-height: 1.5; }
.split__points [data-lucide] { width: 18px; height: 18px; color: var(--ignition); flex: none; margin-top: 2px; }
.split__cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); }

@media (max-width: 900px) {
  .split__inner { grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 2.5rem); }
  .split--reverse .split__inner > .split__visual { order: 1; }
  .split--reverse .split__inner > .split__copy { order: 2; }
}

@media (min-width: 1101px) {
  /* 3 referentie-kaarten op desktop (i.p.v. de 4-koloms home-grid) */
  .applications__grid--refs { grid-template-columns: repeat(3, 1fr); }
}
/* ---------- SCENE, tekst + mini-USP (derivaat van .usp), uit styleguide ---------- */
.scene { padding: clamp(3rem, 6vw, 5.5rem) clamp(16px, 1.6vw, 32px); }
.scene__inner { max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.scene--reverse .scene__inner > .scene__copy { order: 2; }
.scene--reverse .scene__inner > .miniusp { order: 1; }
.scene__copy .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; }
.scene__copy h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.4vw, 2.85rem); line-height: 1.05; letter-spacing: var(--tracking-heading); color: var(--brand); margin-top: var(--space-4); }
.scene__copy p { margin-top: var(--space-5); max-width: 52ch; color: rgba(10,22,40,0.72); font-size: var(--fs-lead); line-height: 1.6; }
.scene__copy p + p { margin-top: var(--space-4); }
.scene__cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }
.miniusp { background: var(--paper); border-radius: var(--radius-xl); box-shadow: var(--shadow-low); padding: clamp(1.5rem, 2.4vw, 2rem); }
.miniusp__label { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 0.68rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(10,22,40,0.5); margin-bottom: var(--space-5); }
.miniusp__label::before { content: ''; width: 11px; height: 13px; flex: none; background-color: var(--ignition); -webkit-mask: url('./assets/eyebrow.svg') no-repeat center / contain; mask: url('./assets/eyebrow.svg') no-repeat center / contain; }
.miniusp__row { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 0.1rem 0.9rem; padding: var(--space-4) 0; border-top: 1px solid var(--steel); align-items: baseline; }
.miniusp__row:first-of-type { border-top: 0; padding-top: 0; }
.miniusp__row:last-of-type { padding-bottom: 0; }
.miniusp__num { grid-row: span 2; align-self: start; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 0.9; color: var(--steel); font-feature-settings: 'tnum' 1; transition: color var(--dur-base) var(--ease-out); }
.miniusp__row:hover .miniusp__num { color: var(--ignition); }
.miniusp__title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--brand); letter-spacing: var(--tracking-heading); }
.miniusp__desc { font-size: 0.88rem; line-height: 1.45; color: rgba(10,22,40,0.62); margin-top: 2px; }

@media (max-width: 900px) {
  .scene__inner { grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 2.5rem); }
  .scene--reverse .scene__inner > .scene__copy { order: 1; }
  .scene--reverse .scene__inner > .miniusp { order: 2; }
}

@media (min-width: 1101px) {
  /* 6 categorie-tiles in 3 kolommen op desktop (i.p.v. de 4-koloms home-grid) */
  .applications__grid--three { grid-template-columns: repeat(3, 1fr); }
}
/* R3: lichte ("positieve") variant van het cases-blok, zelfde structuur, licht oppervlak, lichte tekst→donker. */
.cases--light { background: var(--canvas); color: var(--ink); border: 1px solid var(--steel); box-shadow: var(--shadow-mid); }
.cases--light::before { background-image: linear-gradient(rgba(10,22,40,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(10,22,40,0.045) 1px, transparent 1px); }
.cases--light .cases__title { color: var(--brand); }
.cases--light .cases__eyebrow { color: var(--ignition); }
.cases--light .cases__quote { color: var(--brand); }
.cases--light .cases__quote::before { color: rgba(231, 52, 45, 0.30); }
.cases--light .cases__body { color: rgba(10,22,40,0.72); }
.cases--light .cases__specs { border-color: rgba(10,22,40,0.12); }
.cases--light .cases__specs dt { color: rgba(10,22,40,0.5); }
.cases--light .cases__specs dd { color: var(--ink); }
.cases--light .cases__client-name { color: var(--brand); }
.cases--light .cases__client-role { color: rgba(10,22,40,0.5); }

/* Cases-quote BUITEN het donkere cases-blok (2026-09-01).
   `.cases__quote`, `.cases__client-name` en `.cases__client-role` zijn wit, want ze horen bij het
   donkere `.cases`-blok. Op /referenties/afw/ staan ze in een `.split` op `--mist` (#F4F6F9): witte
   tekst op bijna-wit, contrast ~1,05:1 — onleesbaar. Gemeten op 8 plekken: 2 quotes plus hun
   attributie, in alle vier de talen. Zelfde waarden als `.cases--light` hierboven, zodat er ÉÉN
   waarheid is voor "quote op een lichte ondergrond" in plaats van twee die uit elkaar lopen.
   Gemeld door de klant: quote "We kunnen Resato op elk moment bellen…". */
.split .cases__quote { color: var(--brand); }
.split .cases__quote::before { color: rgba(231, 52, 45, 0.30); }
.split .cases__client-name { color: var(--brand); }
.split .cases__client-role { color: rgba(10,22,40,0.5); }
/* R5: teamfoto-slot, placeholder tot een echte mensen-/teamfoto beschikbaar is (geen machinefoto). */
.cases__photo--placeholder { background: var(--mist); border: 1px dashed var(--steel); display: grid; place-items: center; }
.cases__photo--placeholder .ph { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: rgba(10,22,40,0.45); font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; text-align: center; padding: 1rem; }
.cases__photo--placeholder .ph [data-lucide] { width: 34px; height: 34px; }
/* ====================================================
     PROSE / LEGAL-TEXT (blok-gat #2) — lange lopende tekst,
     kop-hierarchie, optionele sticky anker-TOC. Voor A9-legal.
     ==================================================== */
.prose { padding: clamp(2.5rem, 5vw, 4.5rem) clamp(16px, 1.6vw, 32px); }
.prose__inner { max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.prose--no-toc .prose__inner { grid-template-columns: minmax(0, 1fr); max-width: 78ch; }
.prose__toc { position: sticky; top: 2rem; display: flex; flex-direction: column; }
.prose__toc-label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(10,22,40,0.45); margin-bottom: var(--space-4); }
.prose__toc a { display: block; padding: 0.4rem 0 0.4rem 0.9rem; border-left: 2px solid var(--steel); font-family: var(--font-body); font-weight: 500; font-size: 0.9rem; line-height: 1.4; color: rgba(10,22,40,0.6); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.prose__toc a:hover, .prose__toc a.is-active { color: var(--brand); border-left-color: var(--ignition); }
.prose__body { min-width: 0; }
.prose__body > * + * { margin-top: var(--space-5); }
.prose__meta { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); letter-spacing: var(--tracking-ui); color: rgba(10,22,40,0.45); }
.prose__body h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.12; letter-spacing: var(--tracking-heading); color: var(--brand); scroll-margin-top: 2rem; margin-top: clamp(2rem, 4vw, 3rem); }
.prose__body h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.2; letter-spacing: var(--tracking-heading); color: var(--brand); scroll-margin-top: 2rem; margin-top: clamp(1.5rem, 3vw, 2rem); }
.prose__body h2 + *, .prose__body h3 + * { margin-top: var(--space-4); }
.prose__body > h2:first-child, .prose__body > *:first-child { margin-top: 0; }
.prose__body p { font-size: 1.02rem; line-height: 1.7; color: rgba(10,22,40,0.72); max-width: 70ch; }
.prose__lead { font-size: var(--fs-lead); line-height: 1.6; color: rgba(10,22,40,0.78) !important; max-width: 70ch; }
.prose__body a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--steel); transition: text-decoration-color var(--dur-fast) var(--ease-out); }
.prose__body a:hover { text-decoration-color: var(--ignition); }
.prose__body strong { color: var(--brand); font-weight: 600; }
.prose__body ul, .prose__body ol { max-width: 70ch; display: flex; flex-direction: column; gap: 0.55rem; padding-left: 0.25rem; }
.prose__body em { font-style: italic; }
.prose__body ul { list-style: none; }
.prose__body ul li { position: relative; padding-left: 1.5rem; font-size: 1.02rem; line-height: 1.6; color: rgba(10,22,40,0.72); }
.prose__body ul li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 8px; height: 10px; flex: none; background-color: var(--ignition); -webkit-mask: url('./assets/eyebrow.svg') no-repeat center / contain; mask: url('./assets/eyebrow.svg') no-repeat center / contain; }
.prose__body ol { list-style: none; counter-reset: prose; }
.prose__body ol li { position: relative; padding-left: 2rem; font-size: 1.02rem; line-height: 1.6; color: rgba(10,22,40,0.72); counter-increment: prose; }
.prose__body ol li::before { content: counter(prose); position: absolute; left: 0; top: 0; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--ignition); }
.prose__body blockquote { margin: 0; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 3px solid var(--ignition); color: var(--brand); font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.4; max-width: 60ch; }
/* placeholder-notice: zichtbaar dat de definitieve juridische tekst nog van legal/DPO moet komen */
.prose__notice { margin: 0 0 var(--space-5); padding: 1rem 1.15rem; border-radius: var(--radius-md); background: rgba(230, 126, 34, 0.09); border: 1px solid rgba(230, 126, 34, 0.28); border-left: 3px solid var(--ignition); font-family: var(--font-body); font-size: 0.9rem; line-height: 1.55; color: rgba(10,22,40,0.7); max-width: 70ch; }
.prose__notice strong { color: var(--brand); }

@media (max-width: 900px) {
  .prose__inner { grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.25rem); }
  .prose__toc { position: static; padding: clamp(1rem, 3vw, 1.4rem) clamp(1.1rem, 3vw, 1.5rem); background: var(--mist); border-radius: var(--radius-lg); }
  .prose__toc a { border-left: 0; padding-left: 0; padding-block: 0.35rem; }
  .prose__toc a:hover, .prose__toc a.is-active { border-left-color: transparent; }
}
.topbar--inset { margin-inline: clamp(16px, 1.6vw, 32px); }


/* ====================================================================
   MACHINE-EXPLORER (.explore) + FEITENRIJ (.fact) — verplaatst uit de
   inline <style>-blokken van /oplossingen/ (4 talen) en /oplossingen/pompen/
   op 2026-09-04, als vervolg op A1.

   Waarom dit veilig kon: de classes .explore*, .hotspot* en .fact*
   bestaan in de hele bundel ALLEEN op die vijf pagina's,
   dus deze regels kunnen op geen enkele andere pagina iets veranderen.
   Dat is precies de toets die het A1-verslag voorschrijft: meet op welke
   pagina's de selector MATCHT, niet op welke hij staat.

   Het explorer-blok staat in de styleguide en is dus kanoniek; zijn CSS
   hoorde daarmee sowieso in deze gedeelde laag en niet in de pagina.
   ==================================================================== */
.explore { padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(16px, 1.6vw, 32px) clamp(1.75rem, 3.5vw, 2.75rem); }
.explore__inner { max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); }
.explore__head { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.explore__head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.07; letter-spacing: var(--tracking-heading); color: var(--brand); margin-top: var(--space-4); }
.explore__head p { margin-top: var(--space-4); color: rgba(10, 22, 40, 0.68); font-size: var(--fs-lead); line-height: 1.55; max-width: 56ch; }
.explore__layout { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .explore__layout { grid-template-columns: 1fr; } }
.explore__nav { display: flex; flex-direction: column; }
.explore__item { display: flex; align-items: center; gap: 0.9rem; padding: clamp(0.85rem, 1.6vw, 1.1rem) 0.25rem; border-top: 1px solid var(--steel); transition: transform var(--dur-base) var(--ease-out); }
.explore__item:first-child { border-top: 0; }
.explore__item:last-child { border-bottom: 1px solid var(--steel); }
.explore__item-icon { width: 40px; height: 40px; flex: none; border-radius: var(--radius-md); background: var(--paper); border: 1px solid var(--steel); display: grid; place-items: center; color: var(--brand); transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.explore__item-icon [data-lucide] { width: 19px; height: 19px; }
.explore__item-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: var(--tracking-heading); color: var(--brand); }
.explore__item-arrow { margin-left: auto; flex: none; color: var(--steel); transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.explore__item-arrow [data-lucide] { width: 17px; height: 17px; }
.explore__stage { position: relative; margin: 0; }
.explore__stage img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }
.hotspot { position: absolute; display: block; transform: translate(-50%, -50%); width: 22px; height: 22px; z-index: 3; }
.hotspot__dot { position: relative; display: block; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--ignition); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(10,22,40,0.10), 0 6px 14px rgba(231, 52, 45, 0.45); transition: transform var(--dur-base) var(--ease-out); }
.hotspot__dot::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgba(231, 52, 45, 0.55); animation: hotspotPulse 2.4s var(--ease-out) infinite; }
@keyframes hotspotPulse {
    0%   { transform: scale(1); opacity: 0.9; }
    70%  { transform: scale(2.1); opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
  }
.hotspot__label { padding: 0.45rem 0.75rem; background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-high); white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; letter-spacing: var(--tracking-heading); color: var(--brand); position: absolute; top: 50%; left: calc(100% + 0.7rem); opacity: 0; transform: translate(-6px, -50%); pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.hotspot--left .hotspot__label { left: auto; right: calc(100% + 0.7rem); transform: translate(6px, -50%); }
@media (max-width: 700px) { .hotspot { width: 18px; height: 18px; } .hotspot__dot { width: 18px; height: 18px; border-width: 2.5px; } }
@media (prefers-reduced-motion: reduce) {
    .hotspot__dot::before { animation: none; opacity: 0; }
    .hotspot__label, .explore__item { transition: none; }
  }
.facts { padding: clamp(3rem, 6vw, 5rem) clamp(16px, 1.6vw, 32px); background: var(--canvas); }
.facts__inner { max-width: var(--container); margin-inline: auto; padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 760px) { .facts__inner { grid-template-columns: 1fr; } }
.fact { display: flex; flex-direction: column; gap: 0.6rem; padding-top: var(--space-4); border-top: 2px solid var(--steel); transition: border-color var(--dur-base) var(--ease-out); }
.fact:hover { border-top-color: var(--ignition); }
.fact__icon { color: var(--brand); }
.fact__icon [data-lucide] { width: 24px; height: 24px; }
.fact h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: var(--tracking-heading); color: var(--brand); }
.fact p { font-size: 0.95rem; line-height: 1.55; color: rgba(10,22,40,0.65); max-width: 34ch; }

/* hover/focus-toestanden van dezelfde twee blokken */
.explore__item:hover, .explore__item.is-hot { transform: translateX(4px); }
.explore__item:hover .explore__item-icon, .explore__item.is-hot .explore__item-icon { background: var(--ignition); border-color: var(--ignition); color: #fff; }
.explore__item:hover .explore__item-arrow, .explore__item.is-hot .explore__item-arrow { color: var(--ignition); transform: translateX(3px); }
.hotspot:hover .hotspot__dot, .hotspot:focus-visible .hotspot__dot, .hotspot.is-hot .hotspot__dot { transform: scale(1.18); }
.hotspot:hover .hotspot__label, .hotspot:focus-visible .hotspot__label, .hotspot.is-hot .hotspot__label { opacity: 1; transform: translate(0, -50%); }
.hotspot--left:hover .hotspot__label, .hotspot--left:focus-visible .hotspot__label, .hotspot--left.is-hot .hotspot__label { transform: translate(0, -50%); }