/* ==========================================================================
   Stoppelberg — designrichting B "De Machinehal"
   Huisstijl: diep indigo-navy #322D76 (uit logo), grotesk + serif-leenstuk
   ========================================================================== */

:root {
  --navy: #322d76;
  --navy-deep: #262157;
  --navy-ink: #211d4a;
  --lilac: #b9b4ec;        /* accent op donkere vlakken */
  --lilac-soft: #eceafa;   /* zachte tint voor chips/hover op wit */
  --lilac-deep: #8f88e0;   /* onderkant van de gloeiende zijlijn-gradient */
  --navy-deep-rgb: 38, 33, 87;  /* = --navy-deep, als r,g,b voor dekkingvarianten (pil/subnav/CTA-balk) */
  --void: #05040c;         /* bijna-zwart van de cinematische hero */
  --text-on-navy: #cfccef;        /* leesbare bodytekst op navy vlakken */
  --text-on-navy-strong: #d5d2f0; /* iets voller: leads op donkere vlakken */
  --error: #b3261e;        /* formulier-foutkleur */
  --glass-text-shadow: 0 1px 8px rgba(10, 8, 30, 0.6); /* leesbaarheid op de glass-pil */
  --surface: #ffffff;
  --surface-alt: #f5f4fb;
  --line: rgba(50, 45, 118, 0.18);
  --line-strong: rgba(50, 45, 118, 0.35);
  --line-dark: rgba(255, 255, 255, 0.22);
  --text: #211d4a;
  --text-muted: #56517e;
  --font-sans: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --track: 0.14em;
  --maxw: 1200px;
  /* signatuur-easing: één curve voor alle beweging op de site */
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  /* actuele hoogte van de hoofdnav-pil (min. kleine overlapcorrectie); JS houdt
     dit live bij zodat de categorieën-pil er altijd strak onder aansluit (ook
     tijdens het krimpen) */
  --hdr-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

/* het hidden-attribuut moet ALTIJD winnen, ook van elementen met een eigen
   display (flex/grid): de browser-standaardregel voor [hidden] verliest van
   author-CSS, waardoor bijv. .prod-card { display: flex } een "verborgen"
   kaart gewoon bleef tonen — precies de filterbug op de collectiepagina's */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* geen scroll-anchoring: Chrome "corrigeert" anders de scrollpositie met
     micropixels terwijl het navigatiecluster animeert — die driftjes stapelen
     zich op tot voorbij de richtings-deadzone en laten het cluster pendelen
     tussen compact en vol. Er wordt nergens content boven de viewport
     ingeladen, dus anchoring heeft hier toch geen nut. */
  overflow-anchor: none;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--navy); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff; padding: 10px 18px; z-index: 100;
}
.skip-link:focus { left: 0; }

/* --- typografie ------------------------------------------------------- */

h1, h2, h3 { font-family: var(--font-sans); line-height: 1.12; margin: 0 0 0.5em; }

.display {
  font-size: clamp(2.1rem, 5.2vw, 3.9rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.kicker {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--text-muted);
  margin-bottom: 14px;
}
.on-dark .kicker { color: var(--lilac); }

.section-head {
  display: flex; align-items: baseline; gap: 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px; margin-bottom: 36px;
}
.section-num {
  font-family: var(--font-mono);
  font-size: 0.95rem; color: var(--text-muted);
  letter-spacing: 0.08em;
}
.section-head h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin: 0;
}
/* smal scherm: kop-onderdelen onder elkaar i.p.v. naast elkaar. Voorkomt dat
   het bewuste "—"-sectienummer-motief ("— PRODUCTEN") intern afbreekt en het
   streepje als los teken boven het woord belandt, en dat de titel er rechts
   half naast komt te hangen */
@media (max-width: 640px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .section-num { white-space: nowrap; }
}

.serif-statement {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
  color: var(--navy);
  margin: 0;
}

.lead { font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: var(--text-muted); max-width: 62ch; }

/* --- knoppen ----------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 14px 30px;
  font-family: var(--font-sans);
  font-size: 0.85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--track);
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--navy);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.45s var(--ease);
}
.btn-solid { background: var(--navy); color: #fff; }
.btn-solid:hover { background: var(--navy-ink); }
.btn-ghost { background: transparent; color: var(--navy); }
.btn-ghost:hover { background: var(--lilac-soft); }
.on-dark .btn-solid { background: #fff; color: var(--navy); border-color: #fff; }
.on-dark .btn-solid:hover { background: var(--lilac); border-color: var(--lilac); }
.on-dark .btn-ghost { color: #fff; border-color: var(--line-dark); }
.on-dark .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* --- navigatie: vast bovenaan -> zwevende pil bij scrollen ---------------- */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 0;
  transition: padding 0.5s var(--ease);
}
/* binnenste balk draagt de transformatie */
.site-header .nav {
  background: var(--navy);
  border: 1px solid transparent;
  border-bottom-color: rgba(255, 255, 255, 0.12);
  border-radius: 0;
  transition:
    background-color 0.5s var(--ease),
    border-color 0.5s var(--ease),
    border-radius 0.5s var(--ease),
    box-shadow 0.5s var(--ease),
    min-height 0.5s var(--ease),
    max-width 0.5s var(--ease);
}
/* bovenaan de pagina (met JS): transparant, onderdeel van de hero */
html.js .site-header.hdr-top .nav {
  background: transparent;
  border-bottom-color: transparent;
}
/* gescrold: zwevende pil, los van de randen */
.site-header.pill { padding: 10px 16px; }
.site-header.pill .nav {
  max-width: 1080px;
  min-height: 56px;
  /* volle pil = "gevuld": vrijwel dekkende navy, zoals de balk bovenaan.
     De backdrop-blur staat in béide staten aan met dezelfde waarde — alleen
     de dekking van de achtergrondkleur animeert. Zo blijft de glass<->gevuld-
     overgang één vloeiende kleurinterpolatie (backdrop-filter zelf laat zich
     niet overal betrouwbaar animeren). */
  background: rgba(var(--navy-deep-rgb), 0.97);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(10, 8, 30, 0.38);
  padding: 0 10px 0 22px;
  /* min-height/padding hier = de "volle" pil-maat; deze transitie geldt dus
     ook wanneer .compact wordt losgelaten (terugveren) — bewust sneller dan
     het krimpen zelf, zodat terugveren direct/responsief aanvoelt. De stijl-
     eigenschappen (achtergrond/rand/schaduw) veren in hetzelfde snelle tempo
     terug als de maat, zodat glass->gevuld en klein->groot één beweging is. */
  transition:
    background-color 0.22s var(--ease),
    border-color 0.22s var(--ease),
    border-radius 0.5s var(--ease),
    box-shadow 0.22s var(--ease),
    max-width 0.5s var(--ease),
    min-height 0.22s var(--ease),
    padding 0.22s var(--ease);
}
.site-header.pill .brand-mark { width: 36px; height: 36px; transition: width 0.22s var(--ease), height 0.22s var(--ease); }
.site-header.pill .brand-name { transition: font-size 0.22s var(--ease); }
.site-header.pill .brand-sub { transition: opacity 0.22s var(--ease), font-size 0.22s var(--ease), margin-top 0.22s var(--ease); }
.site-header.pill .nav-links a { transition: padding 0.22s var(--ease), font-size 0.22s var(--ease); }

/* --- richtingsgevoelig krimpgedrag: doorscrollen = krimpen + glass, terug-
   scrollen = direct volle grootte + gevuld --- */
.site-header.pill.compact .nav {
  min-height: 40px;
  padding: 0 8px 0 16px;
  /* compacte staat = "glass": doorschijnende frosted-glass-look — de blur
     (die altijd al aanstaat) wordt zichtbaar doordat de dekking omlaag gaat,
     plus een lichter randje en een subtiele highlight aan de bovenkant.
     Duidelijk transparant (0.42) zodat content er wazig doorheen schemert;
     de leesbaarheid komt uit de sterkere blur + tekstschaduw, niet uit dekking */
  background: rgba(var(--navy-deep-rgb), 0.42);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 28px rgba(10, 8, 30, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  /* krimpen volgt juist de tragere signatuurcurve — voelt geleidelijk aan */
  transition:
    background-color 0.5s var(--ease),
    border-color 0.5s var(--ease),
    border-radius 0.5s var(--ease),
    box-shadow 0.5s var(--ease),
    max-width 0.5s var(--ease),
    min-height 0.5s var(--ease),
    padding 0.5s var(--ease);
}
.site-header.pill.compact .brand-mark { width: 26px; height: 26px; transition: width 0.5s var(--ease), height 0.5s var(--ease); }
.site-header.pill.compact .brand-name { font-size: 1.02rem; transition: font-size 0.5s var(--ease); }
/* subtekst verdwijnt in compact niet alleen visueel (opacity) maar ook uit de
   ruimte-inname (font-size -> 0): anders blijft er een onzichtbare regel staan
   die de merknaam ~7px boven het midden van de balk duwt */
.site-header.pill.compact .brand-sub { opacity: 0; font-size: 0.01rem; margin-top: 0; transition: opacity 0.5s var(--ease), font-size 0.5s var(--ease), margin-top 0.5s var(--ease); }
.site-header.pill.compact .nav-links a { padding: 7px 12px; font-size: 0.75rem; text-shadow: var(--glass-text-shadow); transition: padding 0.5s var(--ease), font-size 0.5s var(--ease); }
.site-header.pill.compact .nav-zoek button, .site-header.pill.compact .taalknop { padding: 7px 6px; text-shadow: var(--glass-text-shadow); }
.site-header.pill.compact .brand-name { text-shadow: var(--glass-text-shadow); }
/* menu-knop (mobiel) krimpt proportioneel mee — omlijning blijft, maar op
   compacte schaal, zodat hij niet buiten de gekrompen balk uitsteekt */
.site-header.pill .nav-toggle { transition: padding 0.22s var(--ease), font-size 0.22s var(--ease); }
.site-header.pill.compact .nav-toggle { padding: 5px 10px; font-size: 0.68rem; text-shadow: var(--glass-text-shadow); transition: padding 0.5s var(--ease), font-size 0.5s var(--ease); }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 72px; gap: 24px;
}

.brand {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: #fff;
}
.brand-mark { width: 44px; height: 44px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--font-serif); font-size: 1.3rem; color: #fff; }
.brand-sub {
  font-size: 0.56rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.32em; color: var(--lilac);
  margin-top: 4px; /* ademruimte t.o.v. de merknaam erboven (visueel afgestemd: 3px te krap, 5px te los) */
}

.nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block; padding: 10px 16px;
  color: #fff; text-decoration: none;
  font-size: 0.82rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--track);
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--lilac); }
.nav-links a[aria-current="page"] { border-bottom-color: var(--lilac); color: var(--lilac); }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--line-dark);
  color: #fff; padding: 10px 14px; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: var(--track);
}

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--navy-deep);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 8px 12px 16px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .site-header.pill .nav-links {
    left: 0; right: 0; margin-top: 8px;
    border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    background: rgba(var(--navy-deep-rgb), 0.92);
  }
  .site-header.pill .brand-sub { display: none; }
  .site-header.pill .brand-name { font-size: 1.1rem; }
}

/* --- hero (home) -------------------------------------------------------- */

.hero {
  background: linear-gradient(160deg, var(--navy) 55%, var(--navy-deep) 100%);
  color: #fff;
  overflow: hidden;
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px; align-items: center;
  padding: clamp(64px, 10vh, 130px) 0;
}
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero .lead { color: var(--text-on-navy); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.hero-mark { width: min(380px, 70%); margin: 0 auto; }
.hero-mark svg { width: 100%; height: auto; }

.hero-meta {
  display: flex; gap: 0; border-top: 1px solid var(--line-dark);
}
.hero-meta div {
  flex: 1; padding: 18px 20px 22px;
  border-right: 1px solid var(--line-dark);
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-on-navy);
}
.hero-meta div:first-child { border-left: 1px solid var(--line-dark); }
.hero-meta strong { display: block; color: #fff; font-size: 1.05rem; font-family: var(--font-sans); }

@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; padding: 56px 0; }
  .hero-mark { width: min(240px, 60%); order: -1; }
  .hero-meta { flex-direction: column; }
  .hero-meta div { border: 0; border-top: 1px solid var(--line-dark); }
  /* de desktopregel ".hero-meta div:first-child { border-left }" heeft een
     hogere specificiteit dan de reset hierboven en lekte zo de mobiele
     weergave in — waardoor alleen het eerste item omkaderd oogde */
  .hero-meta div:first-child { border-left: 0; }
}

/* --- secties ------------------------------------------------------------ */

.section { padding: clamp(56px, 9vh, 110px) 0; }
.section-alt { background: var(--surface-alt); }
.section-dark { background: var(--navy); color: #fff; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: var(--text-on-navy-strong); }
.section-dark .serif-statement { color: #fff; }

.statement-band {
  padding: clamp(48px, 8vh, 90px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

/* usp-grid (home) */
.usp-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line); border-right: 0;
}
.usp {
  padding: 34px 30px 38px;
  border-right: 1px solid var(--line);
}
.usp .num {
  font-family: var(--font-mono); font-size: 0.85rem;
  color: var(--text-muted); letter-spacing: 0.1em;
  display: block; margin-bottom: 18px;
}
.usp h3 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.04em; }
.usp p { color: var(--text-muted); margin: 0; font-size: 0.98rem; }
@media (max-width: 820px) {
  .usp-grid { grid-template-columns: 1fr; border: 1px solid var(--line); }
  .usp { border-right: 0; border-bottom: 1px solid var(--line); }
  .usp:last-child { border-bottom: 0; }
}

/* categorie-teaser (home) */
@media (max-width: 700px) { .cat-grid { grid-template-columns: 1fr; } }

/* --- productenpagina ----------------------------------------------------- */

/* categorieën-balk: tweede, kleinere pil — direct onder de hoofdnav-pil,
   zelfde blur/pil-vormgeving, zelfde signatuur-easing. --hdr-h wordt door
   main.js live bijgehouden zodat dit altijd exact aansluit (ook tijdens het
   krimpen). Structuur volgt die van de header: buitenste element positioneert
   (sticky), binnenste <ul> draagt de zichtbare pil. */
.subnav {
  position: sticky; top: var(--hdr-h); z-index: 40;
  display: flex; justify-content: center;
  padding: 0 16px;
  transition: top 0.4s var(--ease);
  pointer-events: none; /* alleen de pil zelf is interactief, ruimte eromheen niet */
}
.subnav ul {
  display: flex; gap: 2px; list-style: none;
  margin: 0; padding: 6px 8px;
  max-width: 100%;
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; /* laat een sleep-beweging altijd op een hele chip landen i.p.v. halverwege een woord */
  pointer-events: auto;
  /* zelfde gevuld<->glass-mechaniek als de hoofdnav-pil: blur constant aan,
     alleen de dekking animeert */
  background: rgba(var(--navy-deep-rgb), 0.97);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(10, 8, 30, 0.3);
  transition:
    padding 0.22s var(--ease),
    background-color 0.22s var(--ease),
    border-color 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a {
  display: block; padding: 10px 16px; white-space: nowrap;
  font-size: 0.74rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  text-decoration: none; color: rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  scroll-snap-align: start;
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease), padding 0.22s var(--ease), font-size 0.22s var(--ease);
}
.subnav a:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.subnav a.active { color: #fff; background: rgba(255, 255, 255, 0.18); }

/* krimpen: volgt de tragere signatuurcurve (in lijn met de hoofdnav-pil),
   inclusief de glass-uitstraling van het compacte cluster */
.subnav.compact ul {
  padding: 3px 6px;
  background: rgba(var(--navy-deep-rgb), 0.42);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(10, 8, 30, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition:
    padding 0.5s var(--ease),
    background-color 0.5s var(--ease),
    border-color 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
/* in de doorschijnende glass-staat iets voller wit + lichte slagschaduw voor voldoende contrast */
.subnav.compact a { padding: 6px 12px; font-size: 0.68rem; color: #ffffff; text-shadow: var(--glass-text-shadow); transition: color 0.3s var(--ease), background-color 0.3s var(--ease), padding 0.5s var(--ease), font-size 0.5s var(--ease); }

/* smalle telefoons: iets compacter zodat meer categorieën zichtbaar zijn
   vóór de rand — vermindert (maar garandeert niet volledig) dat een chip
   halverwege een woord wordt afgesneden */
@media (max-width: 480px) {
  .subnav a { padding: 9px 13px; font-size: 0.68rem; letter-spacing: 0.05em; }
}

.prod-section {
  /* scroll-margin: categorie-secties landen niet onder de zwevende pillen bij
     anchor-navigatie. Bewust statisch (volle-pil-hoogte + subnav), niet aan
     --hdr-h gekoppeld: die krimpt mee met de compacte staat en zou de
     landingspositie per scroll-toestand laten verschillen. */
  scroll-margin-top: 148px;
  padding: clamp(48px, 7vh, 84px) 0 20px;
}
.prod-section > .wrap > .lead { margin-bottom: 40px; }

.prod-sub {
  font-size: 1rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 44px 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 18px;
}

.prod-card {
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex; flex-direction: column;
}
.prod-card-media {
  height: 170px;
  display: grid; place-items: center;
  padding: 16px 20px 4px;
}
.prod-card-media img {
  max-height: 150px; max-width: 100%;
  width: auto; object-fit: contain;
}
/* placeholder-monogram éénmalig hier gedefinieerd i.p.v. 7× als inline-SVG in
   producten.html — zelfde vector, zelfde maat/dekking, nu als achtergrond */
.prod-card-media.is-placeholder::before {
  content: "";
  width: 84px; height: 84px; opacity: 0.18;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='90' fill='none' stroke='%23322d76' stroke-width='5'/%3E%3Cpath d='M 143 57 C 128 34, 76 30, 64 58 C 54 82, 78 94, 100 101 C 124 109, 146 122, 134 148 C 122 172, 72 172, 57 148' fill='none' stroke='%23322d76' stroke-width='30' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.prod-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding: 18px 20px 0;
}
.prod-card h4 {
  margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.25;
}
.badge {
  flex: none;
  font-family: var(--font-mono); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 4px 9px;
  border: 1px solid var(--line-strong);
  color: var(--navy); background: var(--lilac-soft);
  white-space: nowrap;
}
.prod-card .animals {
  padding: 4px 20px 0;
  font-size: 0.78rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.prod-card p {
  padding: 0 20px; margin: 12px 0 16px;
  font-size: 0.94rem; color: var(--text-muted); flex: 1;
}
.spec-list {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.8rem;
}
.spec-list li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 20px;
  border-bottom: 1px solid rgba(50, 45, 118, 0.08);
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list .k { color: var(--text-muted); }
.spec-list .v { color: var(--text); text-align: right; }

/* zoekveld in de hero: licht, springt eruit tegen het navy */
.zoekveld { margin-top: 34px; max-width: 560px; position: relative; }
.zoekveld input {
  width: 100%; padding: 16px 18px 16px 52px;
  font-family: var(--font-sans); font-size: 1.05rem;
  border: 1px solid #fff; border-radius: 999px;
  background: rgba(255, 255, 255, 0.96); color: var(--navy-ink);
  box-shadow: 0 10px 30px rgba(10, 8, 30, 0.25);
  transition: box-shadow 0.35s var(--ease), background 0.35s var(--ease);
}
.zoekveld input::placeholder { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.04em; }
.zoekveld input:focus { outline: none; background: #fff; box-shadow: 0 10px 34px rgba(10, 8, 30, 0.4); }
.zoekveld svg { position: absolute; left: 20px; top: 26px; width: 18px; height: 18px; stroke: var(--navy); fill: none; stroke-width: 2; }
.zoekres {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30;
  background: #fff; border: 1px solid var(--line-strong);
  box-shadow: 0 18px 44px rgba(10, 8, 30, 0.35);
  max-height: 330px; overflow-y: auto;
}
.zoekres a {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 12px 18px; text-decoration: none; color: var(--text);
  border-bottom: 1px solid var(--line);
}
.zoekres a:last-child { border-bottom: 0; }
.zoekres a:hover, .zoekres a:focus { background: var(--lilac-soft); }
.zoekres .zr-naam { font-weight: 700; }
.zoekres .zr-waar { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; align-self: center; }
.zoekres .zr-leeg { display: block; padding: 14px 18px; color: var(--text-muted); font-size: 0.92rem; }

/* twee ingangen naast elkaar; de gekozen klapt zijn raster uit */
@media (max-width: 640px) { .ingang-keuze-3 { grid-template-columns: 1fr; } }
/* mobiel stapelen de tegels in één kolom: met 9 tegels (fase 2) komt de hoogte
   anders boven de uitklap-limiet en zou de onderkant onzichtbaar afkappen */
@media (max-width: 820px) { .uitklap.open { max-height: 4400px; } }
@media (max-width: 640px) { .ingang { padding: 18px 16px; } .ingang h3 { font-size: 0.98rem; } }

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

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

/* aparte, duidelijke keuze: alle producten */
/* variant bovenaan het keuzescherm: vóór de twee ingangen */

/* --- catalogus: zwevende filter-pil (zoekveld + keuzemenu's + teller) ----------
   Zelfde glas-mechaniek als de hoofdnav-pil: navy met constante backdrop-blur,
   waarbij alléén de dekking animeert. Sticky strak onder de hoofd-pil, en de
   .compact-staat (richtingsgevoelig krimpen bij omlaag scrollen) wordt door
   hetzelfde setCompact() geschakeld als de hoofd-pil — ze bewegen dus samen. */
.cat-balk {
  position: sticky; top: calc(var(--hdr-h) - 4px); z-index: 45;
  display: flex; justify-content: center;
  padding: 0 16px; margin-top: 14px;
  pointer-events: none; /* alleen de pil zelf is interactief, ruimte ernaast niet */
  transition: top 0.4s var(--ease);
}
.cat-pil {
  pointer-events: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px; padding: 5px 10px;
  width: 100%; max-width: 1040px; /* bewust nét smaller dan de hoofd-pil (1080) */
  background: rgba(var(--navy-deep-rgb), 0.97);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(10, 8, 30, 0.3);
  transition:
    padding 0.5s var(--ease),
    background-color 0.5s var(--ease),
    border-color 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}

/* zoekveld-variant ín de pil: rustig doorschijnend wit-op-navy */
.zoekveld-balk { margin-top: 0; flex: 1 1 220px; max-width: 320px; }
.zoekveld-balk input {
  padding: 9px 16px 9px 40px; font-size: 0.82rem; line-height: 1.2;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px;
  /* eigen donkere navy-onderlaag: blijft leesbaar, ook als de pil in de
     glass-staat doorschijnend over een lichte pagina-achtergrond zweeft */
  background: rgba(var(--navy-deep-rgb), 0.55); color: #fff;
  box-shadow: none;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
    padding 0.5s var(--ease), font-size 0.5s var(--ease);
}
.zoekveld-balk input::placeholder { color: rgba(255, 255, 255, 0.68); }
.zoekveld-balk input:focus { outline: none; background: rgba(var(--navy-deep-rgb), 0.72); border-color: rgba(255, 255, 255, 0.45); box-shadow: none; }
.zoekveld-balk svg { left: 15px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; stroke: rgba(255, 255, 255, 0.85); }
.zoekveld-balk .zoekres { border-radius: 14px; }

.kiesmenu { position: relative; }
.kiesknop {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 15px; border: 1px solid transparent; border-radius: 999px;
  background: none; color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer;
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease),
    padding 0.5s var(--ease), font-size 0.5s var(--ease);
}
.kiesknop svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.kiesknop:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.kiesknop[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, 0.14); }
.kiesknop.aan { color: var(--navy-ink); background: #fff; font-weight: 600; }
.kiespaneel {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  z-index: 60; min-width: 210px; padding: 6px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 16px;
  box-shadow: 0 16px 40px rgba(10, 8, 30, 0.28);
  display: flex; flex-direction: column;
}
.kiespaneel button {
  text-align: left; padding: 10px 12px; border: none; border-radius: 10px;
  background: none; font-family: var(--font-sans); font-size: 0.88rem;
  color: var(--text); cursor: pointer;
}
.kiespaneel button:hover:not(:disabled) { background: var(--lilac-soft); color: var(--navy); }
/* optie die binnen de huidige combinatie niets oplevert: gedimd, niet klikbaar */
.kiespaneel button.uit { opacity: 0.35; cursor: default; }

/* de teller + wis-pilletje: ín de pil, achter een dun scheidslijntje */
.filterstand {
  font-family: var(--font-mono); font-size: 0.74rem; color: rgba(255, 255, 255, 0.85);
  margin: 0; padding: 0 4px 0 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  transition: font-size 0.5s var(--ease);
}
.filterpil {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; color: var(--navy-ink); background: #fff;
  border-radius: 999px; padding: 5px 12px;
  font-family: var(--font-sans); font-size: 0.74rem; font-weight: 600; cursor: pointer;
  transition: background 0.2s var(--ease), padding 0.5s var(--ease);
}
.filterpil:hover { background: var(--lilac-soft); }

/* compacte staat: zelfde glass-transformatie als de hoofd-pil en het
   krimpgedrag van de vroegere categorieën-pil — dekking omlaag, lichter
   randje, inset-highlight, alles een maat kleiner */
.cat-balk.compact .cat-pil {
  padding: 3px 8px;
  background: rgba(var(--navy-deep-rgb), 0.42);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(10, 8, 30, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.cat-balk.compact .zoekveld-balk input { padding: 6px 14px 6px 36px; font-size: 0.8rem; }
.cat-balk.compact .kiesknop { padding: 6px 12px; font-size: 0.68rem; color: #fff; text-shadow: var(--glass-text-shadow); }
.cat-balk.compact .kiesknop.aan { color: var(--navy-ink); text-shadow: none; }
.cat-balk.compact .filterstand { font-size: 0.68rem; text-shadow: var(--glass-text-shadow); }
.cat-balk.compact .filterpil { padding: 3px 10px; }

/* anker-sprongen (zoeken) landen onder de vaste header + sticky filterbalk */
.prod-card { scroll-margin-top: calc(var(--hdr-h) + 84px); }

/* korte visuele bevestiging als je via zoeken op een kaart landt */
.prod-card.flits { animation: kaartflits 1.6s var(--ease); }
@keyframes kaartflits {
  0% { box-shadow: 0 0 0 3px var(--navy); }
  100% { box-shadow: 0 0 0 0 rgba(var(--navy-deep-rgb), 0); }
}

/* --- taalwissel: vlag-knop + dropdown (NL / EN / DE) ---------------------------- */
.nav-taal { position: relative; }
.taalwissel { position: relative; }
.taalknop {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer; color: #fff;
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; padding: 10px 6px;
}
.taalknop:hover .taalcode { color: var(--lilac); }
.vlag {
  width: 22px; height: 15px; border-radius: 2px; display: block; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.taalcode { font-weight: 600; }
.taalchevron { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; opacity: 0.7; transition: transform 0.2s var(--ease); }
.taalknop[aria-expanded="true"] .taalchevron { transform: rotate(180deg); }
.taalmenu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
  min-width: 168px; padding: 6px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(10, 8, 30, 0.22);
  display: flex; flex-direction: column; gap: 2px;
}
.taalmenu a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 8px; text-decoration: none;
  color: var(--text); font-family: var(--font-sans); font-size: 0.9rem;
}
.taalmenu a:hover { background: var(--lilac-soft); color: var(--navy); }
.taalmenu .vlag { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }

/* --- site-breed zoeken: loep in het menu + klein zoekpaneel --------------------- */
.nav-zoek button {
  display: flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--track);
  color: #fff; padding: 10px 6px;
}
.nav-zoek button:hover { color: var(--lilac); }
.nav-zoek svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.zoekoverlay {
  position: fixed; top: calc(var(--hdr-h) - 4px); left: 50%; transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px)); z-index: 90;
  /* zelfde glaspil als de catalogus-balk, zodat het witte zoekveld overal klopt */
  padding: 6px 8px;
  background: rgba(var(--navy-deep-rgb), 0.97);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(10, 8, 30, 0.3);
}
.zoekoverlay .zoekveld-balk { max-width: none; }

/* --- homepage: vind uw apparatuur ------------------------------------------------ */
.vind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.keuze-card { border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); padding: 22px; }
.keuze-card h3 {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 14px;
}
.keuze-opties { display: flex; flex-wrap: wrap; gap: 8px; }
.keuze-opties a {
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 8px 16px; font-size: 0.85rem; color: var(--navy);
  text-decoration: none; background: var(--surface);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.keuze-opties a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.alle-balk {
  margin-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: var(--navy); color: #fff; border-radius: 16px; padding: 20px 24px;
  text-decoration: none; transition: background 0.25s var(--ease);
}
.alle-balk:hover { background: var(--navy-deep); }
.alle-titel { font-family: var(--font-sans); font-size: 1.15rem; font-weight: 700; }
.alle-sub { font-family: var(--font-mono); font-size: 0.8rem; opacity: 0.85; text-align: right; }

/* --- homepage: merkenstrook (drie merken, elk met eigen feitje) ------------------ */
.merk-strook { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.merk-item {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line-strong); border-radius: 16px;
  background: var(--surface); padding: 24px 22px;
  text-decoration: none; color: var(--text);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.merk-item:hover { border-color: var(--navy); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(var(--navy-deep-rgb), 0.12); }
.merk-naam { font-family: var(--font-serif); font-size: 1.5rem; color: var(--navy); letter-spacing: 0.02em; }
.merk-feit { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.merk-item p { margin: 2px 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--text); }
.merk-pijl { margin-top: auto; padding-top: 10px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--navy); }
@media (max-width: 760px) { .merk-strook { grid-template-columns: 1fr; } }

@media (max-width: 760px) {
  .vind-grid { grid-template-columns: 1fr; }
  .alle-balk { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cat-pil { border-radius: 26px; padding: 8px; }
  .zoekveld-balk { flex-basis: 100%; max-width: none; }
  .kiespaneel { min-width: 180px; }
  /* op smal scherm wikkelt de teller naar een eigen regel — dan geen scheidslijn */
  .filterstand { border-left: none; padding-left: 4px; flex-basis: 100%; justify-content: center; }
}

.terug { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--lilac); text-decoration: none; display: inline-block; margin-bottom: 16px; }
.terug:hover { color: #fff; }

/* collectie-hero: de terug-link vormt de bovenrand van het tekstblok — zonder
   deze correctie bleef daarboven de volledige hero-ademruimte staan en hing
   het blok te laag / ongebalanceerd in het vlak */

/* zusternavigatie in de hero: direct wisselen tussen categorieën/toepassingen */

/* productkaarten zijn deeplinkbaar (zoekresultaten, straks offertelijst/Make) */
.prod-card[id] { scroll-margin-top: 160px; }
.prod-sub[id] { scroll-margin-top: 148px; }

/* --- over ons ------------------------------------------------------------ */

.two-col {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 80px); align-items: start;
}
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }

.placeholder-media {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(50, 45, 118, 0.04) 14px 28px),
    var(--surface-alt);
  display: grid; place-items: center;
  color: var(--text-muted);
  font-family: var(--font-mono); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  text-align: center; padding: 20px;
}
.placeholder-media svg { width: 72px; height: 72px; opacity: 0.35; margin-bottom: 14px; }

.check-list { list-style: none; margin: 24px 0 0; padding: 0; }
.check-list li {
  position: relative; padding: 12px 0 12px 34px;
  border-bottom: 1px solid var(--line);
}
.check-list li::before {
  content: ""; position: absolute; left: 2px; top: 19px;
  width: 14px; height: 8px;
  border-left: 3px solid var(--navy); border-bottom: 3px solid var(--navy);
  transform: rotate(-45deg);
}

/* --- prozapagina (privacy) -------------------------------------------------- */

.prose { max-width: 72ch; }
.prose h2 {
  font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin: 2.2em 0 0.6em;
}
.prose h2:first-of-type { margin-top: 1.6em; }
.prose p { margin: 0 0 1em; }

/* --- contact -------------------------------------------------------------- */

.contact-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 80px); align-items: start;
}
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-aside {
  border: 1px solid var(--line);
  padding: 30px 28px;
  background: var(--surface-alt);
}
.contact-aside h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; }
.contact-aside address {
  font-style: normal; line-height: 1.9;
}
.contact-aside a { text-decoration: none; font-weight: 500; }
.contact-aside a:hover { text-decoration: underline; }
.contact-aside .mono { font-family: var(--font-mono); font-size: 0.9rem; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field.full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.form-field label {
  display: block;
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.form-field label .req { color: var(--navy); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--font-sans); font-size: 1rem;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--surface);
}
.form-field textarea { min-height: 150px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--navy);
}
.form-field.invalid input, .form-field.invalid select, .form-field.invalid textarea {
  border-color: var(--error);
}
.field-error {
  display: none;
  color: var(--error); font-size: 0.82rem; margin-top: 6px;
}
.form-field.invalid .field-error { display: block; }

.form-footer { grid-column: 1 / -1; }
.privacy-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 14px; }

.form-success {
  display: none;
  border: 1px solid var(--navy);
  background: var(--lilac-soft);
  padding: 26px 28px;
  margin-bottom: 24px;
}
.form-success.visible { display: block; }
.form-success strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }

/* --- footer ---------------------------------------------------------------- */

.site-footer {
  background: var(--navy-deep); color: var(--text-on-navy);
  padding: 56px 0 32px;
  font-size: 0.92rem;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 40px; margin-bottom: 44px;
}
.site-footer h3 {
  color: #fff; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: var(--track);
  margin-bottom: 16px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: var(--text-on-navy); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-brand .brand-name { font-size: 1.5rem; }
.footer-brand p { max-width: 40ch; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-family: var(--font-mono); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

/* --- pagina-hero (subpaginas) ---------------------------------------------- */

.page-hero {
  position: relative;
  background: var(--navy); color: #fff;
  /* extra bovenruimte: de header zweeft nu over de content */
  padding: calc(clamp(48px, 8vh, 90px) + 72px) 0 clamp(48px, 8vh, 90px);
}
.page-hero h1 { color: #fff; margin: 0 0 12px; }
.page-hero .lead { color: var(--text-on-navy); margin: 0; }

/* --- cinematische hero met full-bleed video-achtergrond ----------------------- */

/* pin-afstand afgestemd op de reveal-tijdlijn: animatie klaar = scroll vrij */
.scrolly { position: relative; height: 185vh; }
.scrolly-sticky {
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--void);
}

.hero-cine-media { position: absolute; inset: 0; z-index: 0; }
.hero-cine-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* leesbaarheidslaag: donker links (onder de tekst), open naar rechts */
.hero-cine-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5,4,12,0.92) 0%, rgba(5,4,12,0.62) 34%, rgba(5,4,12,0.12) 62%, rgba(5,4,12,0) 82%),
    linear-gradient(0deg, rgba(5,4,12,0.55) 0%, rgba(5,4,12,0) 30%);
}

.hero-cine-inner { position: relative; z-index: 2; width: 100%; }
.hero-cine .hero-copy { max-width: 640px; }
.hero-cine .hero-copy h1 { color: #fff; margin-bottom: 20px; }
.hero-cine .hero-copy .lead { color: var(--text-on-navy-strong); }
.hero-cine .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* --- tekst-wipe: regel voor regel, links -> rechts, licht -> vol ------------- */
.rl {
  --fill: 100%;
  background-image: linear-gradient(90deg,
    var(--rl-on, #ffffff) var(--fill),
    var(--rl-off, rgba(255, 255, 255, 0.16)) var(--fill));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
#hero-title .rl { display: inline; }
#hero-lead { --rl-on: var(--text-on-navy-strong); --rl-off: rgba(213, 210, 240, 0.14); }
/* kicker en CTA's faden apart, JS-gestuurd tijdens de pin */
html.js.scrolly-pin #hero-kicker,
html.js.scrolly-pin #hero-cta { opacity: 0; transform: translateY(18px); will-change: opacity, transform; }
html.js.scrolly-pin .rl { --fill: 0%; }

/* --- lichtgevende voortgangslijnen aan beide zijkanten ------------------------ */
.edge-line {
  position: absolute; top: 14vh; bottom: 14vh; width: 2px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 2; pointer-events: none;
}
.edge-left { left: clamp(14px, 2.5vw, 40px); }
.edge-right { right: clamp(14px, 2.5vw, 40px); }
.edge-line i {
  position: absolute; inset: 0; display: block;
  background: linear-gradient(180deg, var(--lilac), var(--lilac-deep));
  box-shadow: 0 0 12px 1px rgba(185, 180, 236, 0.75);
  transform: scaleY(0); transform-origin: top;
}
html.scrolly-static .edge-line { display: none; }
@media (max-width: 820px) { .edge-line { display: none; } }

.scroll-hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--lilac);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.scroll-hint-arrow {
  width: 10px; height: 10px;
  border-right: 2px solid var(--lilac); border-bottom: 2px solid var(--lilac);
  transform: rotate(45deg);
  animation: hint-bob 1.6s ease-in-out infinite;
}
@keyframes hint-bob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50% { transform: rotate(45deg) translate(4px, 4px); }
}

.hero-meta-band { padding: 0; }

/* statische fallback: geen pin (mobiel / reduced motion) */
html.scrolly-static .scrolly { height: auto; }
html.scrolly-static .scrolly-sticky { position: relative; height: 88vh; }
html.scrolly-static .hero-copy { opacity: 1 !important; transform: none !important; }
html.scrolly-static .scroll-hint { display: none; }

/* op mobiel/touch vervalt de video-hero volledig — .mhero hieronder neemt het over */
@media (max-width: 820px), (pointer: coarse) {
  .scrolly { display: none; }
}

/* --- mobiele hero: één doorlopend, stilstaand beeld -------------------------------
   Eén portret-foto in een sticky laag die blijft staan terwijl de twee tekst-
   stappen eroverheen scrollen (zelfde principe als de desktop-video die onder
   de tekst doorloopt). position: sticky i.p.v. background-attachment: fixed,
   want dat laatste is op iOS onbetrouwbaar. Scrim en zijlijnen zitten in de
   stilstaande laag zelf: één continue leesbaarheidslaag, geen naad, geen los
   zwevende lijnen per paneel meer. Alleen zichtbaar op mobiel/touch. */
.mhero { display: none; }
@media (max-width: 820px), (pointer: coarse) {
  .mhero { display: block; position: relative; background: var(--void); }
}
/* De sticky beeldlaag zit in een absolute wrapper die exact de hele hero
   beslaat. Zo is de sticky-beweging hard begrensd tot de hero zelf. (De eerdere
   variant met een negatieve margin-bottom liet de laag een volledige viewport
   voorbij de hero "uithangen" — sticky begrenst op de márgebox, en die was
   door de negatieve marge kleiner dan het element — waardoor de foto over de
   eerstvolgende sectie heen bleef schilderen en daar koppen afsneed.) */
.mhero-bgwrap { position: absolute; inset: 0; }
.mhero-bg {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
}
@supports (height: 100svh) {
  .mhero-bg { height: 100svh; }
}
.mhero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.mhero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(5,4,12,0.82) 0%, rgba(5,4,12,0.38) 48%, rgba(5,4,12,0.5) 100%);
}
.mhero-step {
  position: relative; z-index: 2;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
}
@supports (height: 100svh) {
  .mhero-step { min-height: 100svh; }
}
/* de tweede stap (lead + CTA's) is bewust lager dan een volledige viewport:
   dat haalt de grootste lege ruimte tussen titel en vervolgtekst weg zonder
   het "tekst schuift over stilstaand beeld"-ritme te verliezen */
.mhero-step-lead { min-height: 56vh; justify-content: flex-start; padding-bottom: 10vh; }
@supports (height: 100svh) {
  .mhero-step-lead { min-height: 56svh; }
}
.mhero-copy { position: relative; z-index: 2; }
.mhero-copy .display { color: #fff; margin: 0; }
.mhero-copy .lead { color: var(--text-on-navy-strong); margin: 0 0 28px; }
.mhero-copy .hero-cta { margin-top: 0; }
.mhero-step-title .mhero-copy { margin-top: 56px; } /* ademruimte t.o.v. de zwevende pil */

/* zelfde lichtgevende zijlijnen als desktop — in de stilstaande laag, dus
   continu over de hele hero in plaats van los per paneel */
.mhero-edge {
  position: absolute; top: 14vh; bottom: 14vh; width: 2px;
  z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, var(--lilac), var(--lilac-deep));
  box-shadow: 0 0 12px 1px rgba(185, 180, 236, 0.6);
  opacity: 0.85;
}
.mhero-edge-left { left: 14px; }
.mhero-edge-right { right: 14px; }

/* --- mobiele duim-CTA-balk ------------------------------------------------------- */
.mobile-cta-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(var(--navy-deep-rgb), 0.94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  transform: translateY(100%);
  transition: transform 0.4s var(--ease);
}
.mobile-cta-bar.show { transform: translateY(0); }
.mobile-cta-bar .btn { flex: 1; text-align: center; padding: 13px 14px; font-size: 0.78rem; }
.mobile-cta-bar .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
@media (max-width: 820px), (pointer: coarse) {
  .mobile-cta-bar { display: flex; }
}

/* --- donkere CTA-band (index + producten): gecentreerd, smaller dan .wrap ------
   vervangt de eerder 2× herhaalde inline styles op beide pagina's */
.cta-band-inner { text-align: center; max-width: 760px; }
.cta-band-inner h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.cta-band-inner .lead { margin-inline: auto; }
.cta-band-inner .hero-cta { justify-content: center; }

/* --- korrel + vignet op donkere secties: zwart met diepte ---------------------- */

.section-dark, .site-footer, .hero-meta-band { position: relative; }
.scrolly-sticky::after,
.mhero-bg::after,
.section-dark::after,
.page-hero::after,
.hero-meta-band::after,
.site-footer::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(120% 100% at 50% 38%, rgba(0, 0, 0, 0) 55%, rgba(5, 4, 12, 0.42) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: cover, 140px 140px;
  opacity: 0.55;
  mix-blend-mode: overlay;
}
.scrolly-sticky > .wrap, .scrolly-sticky .scroll-hint, .scrolly-sticky .edge-line { z-index: 2; }
.page-hero > .wrap, .section-dark > .wrap, .site-footer > .wrap, .hero-meta-band > .wrap { position: relative; z-index: 2; }

/* --- scroll-reveal (signatuur-easing) ------------------------------------------ */

html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal-item { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: var(--stagger, 0s); }
html.js .reveal-item.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal-item { opacity: 1 !important; transform: none !important; } }

/* --- magnetische knoppen --------------------------------------------------------- */
.btn { will-change: transform; }
.btn.mag-reset { transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.45s var(--ease); }

/* ==========================================================================
   FASE 3 — offertelijst, gated-PDF, terugbelverzoek
   Alle interactie in js/main.js; verzending via de gedeelde Make-envelop.
   ========================================================================== */

/* --- rechtercluster in de nav (links + offerte-teller + menuknop) -------------
   Door main.js aangemaakt: .nav-links, de offerte-teller en .nav-toggle worden
   erin gehangen. De mobiele nav-links-dropdown blijft absoluut t.o.v. de
   (fixed) .site-header, dus deze statische wrapper verandert daar niets aan. */
.nav-right { display: flex; align-items: center; gap: 14px; }

.offerte-knop {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px; background: transparent; color: #fff;
  border: 1px solid var(--line-dark); border-radius: 999px; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.offerte-knop:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.4); }
.offerte-knop-ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.offerte-knop .telbadge {
  display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px;
  background: var(--lilac); color: var(--navy-ink); border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
}
/* meelopen met het krimpende/glass navigatiecluster */
.site-header.pill.compact .offerte-knop { text-shadow: var(--glass-text-shadow); padding: 6px 12px; transition: padding 0.5s var(--ease); }
@media (max-width: 820px) { .offerte-knop-tekst { display: none; } }

/* --- knoppen onderaan de productkaart ---------------------------------------- */
.prod-card-actions { display: flex; gap: 9px; padding: 15px 20px 18px; border-top: 1px solid var(--line); }
.btn-offerte {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px; font-family: var(--font-sans); font-size: 0.76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer;
  border: 1px solid var(--navy); background: var(--surface); color: var(--navy);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.btn-offerte:hover { background: var(--lilac-soft); }
.btn-offerte .plus { font-size: 1.15rem; line-height: 0; margin-top: -1px; }
.prod-card.in-lijst .btn-offerte { background: var(--navy); color: #fff; }
.btn-specblad {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 15px; font-family: var(--font-mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); background: transparent; border: 1px solid var(--line-strong);
  cursor: pointer; transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.btn-specblad:hover { border-color: var(--navy); color: var(--navy); }
.btn-specblad svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- uitschuivend offertepaneel (pop-up bij klik op de offerte-teller) --------- */
.offerte-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(5, 4, 12, 0.5);
  opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.offerte-overlay.open { opacity: 1; visibility: visible; }
.offerte-paneel {
  position: fixed; top: 0; right: 0; z-index: 61; height: 100%; width: min(440px, 100%);
  background: var(--surface); box-shadow: -20px 0 60px rgba(5, 4, 12, 0.4);
  transform: translateX(100%); transition: transform 0.4s var(--ease);
  display: flex; flex-direction: column;
}
.offerte-paneel.open { transform: translateX(0); }
.offerte-paneel-kop {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px; border-bottom: 1px solid var(--line); flex: none;
}
.offerte-paneel-kop h2 { margin: 0; font-size: 1.12rem; text-transform: uppercase; letter-spacing: 0.04em; }
.offerte-sluit { border: 0; background: transparent; font-size: 1.7rem; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 4px; }
.offerte-sluit:hover { color: var(--navy); }
.offerte-body { flex: 1; overflow-y: auto; padding: 6px 24px 24px; }
.offerte-leeg { color: var(--text-muted); text-align: center; padding: 48px 12px; font-size: 0.96rem; }
.offerte-lijst { margin: 0 0 26px; }
.offerte-rij {
  display: grid; grid-template-columns: 52px 1fr auto auto; gap: 12px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.offerte-rij:first-child { border-top: 1px solid var(--line); }
.offerte-rij .thumb { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); }
.offerte-rij .thumb img { max-height: 42px; max-width: 88%; object-fit: contain; }
.offerte-rij .thumb.is-placeholder::before {
  content: ""; width: 34px; height: 34px; opacity: 0.18;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='90' fill='none' stroke='%23322d76' stroke-width='5'/%3E%3Cpath d='M 143 57 C 128 34, 76 30, 64 58 C 54 82, 78 94, 100 101 C 124 109, 146 122, 134 148 C 122 172, 72 172, 57 148' fill='none' stroke='%23322d76' stroke-width='30' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.offerte-rij .naam { font-weight: 700; font-size: 0.98rem; line-height: 1.2; }
.offerte-rij .merk { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 3px; }
.offerte-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); }
.offerte-stepper button { width: 32px; height: 32px; border: 0; background: var(--surface); cursor: pointer; font-size: 1.1rem; color: var(--navy); line-height: 1; }
.offerte-stepper button:hover { background: var(--lilac-soft); }
.offerte-stepper .aantal { min-width: 32px; text-align: center; font-family: var(--font-mono); font-size: 0.86rem; }
.offerte-verwijder { border: 0; background: transparent; cursor: pointer; color: var(--text-muted); font-size: 1.35rem; line-height: 1; padding: 2px 4px; }
.offerte-verwijder:hover { color: var(--error); }

.offerte-form { margin-top: 4px; }
.offerte-form .form-grid { grid-template-columns: 1fr; gap: 14px; }
.offerte-form .form-footer { margin-top: 6px; }
.offerte-form .btn { width: 100%; text-align: center; }

/* --- gated-PDF-venster -------------------------------------------------------- */
.pdf-overlay {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px;
  background: rgba(5, 4, 12, 0.55);
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.pdf-overlay.open { opacity: 1; visibility: visible; }
.pdf-modal {
  background: #fff; border: 1px solid var(--line-strong); box-shadow: 0 26px 64px rgba(10, 8, 30, 0.34);
  max-width: 430px; width: 100%; padding: 30px 30px 24px; position: relative;
  transform: translateY(10px); transition: transform 0.3s var(--ease);
}
.pdf-overlay.open .pdf-modal { transform: none; }
.pdf-modal .sluit { position: absolute; top: 14px; right: 16px; border: 0; background: transparent; font-size: 1.4rem; line-height: 1; color: var(--text-muted); cursor: pointer; }
.pdf-modal .sluit:hover { color: var(--navy); }
.pdf-modal h3 { margin: 0 0 10px; font-size: 1.12rem; text-transform: uppercase; letter-spacing: 0.03em; }
.pdf-modal p { color: var(--text-muted); font-size: 0.94rem; margin: 0 0 16px; }
.pdf-modal input { width: 100%; padding: 13px 16px; border: 1px solid var(--line-strong); font-family: var(--font-sans); font-size: 1rem; margin-bottom: 6px; }
.pdf-modal .veldfout { display: none; color: var(--error); font-size: 0.82rem; margin: 0 0 12px; }
.pdf-modal.fout .veldfout { display: block; }
.pdf-modal.fout input { border-color: var(--error); }
.pdf-modal .btn { width: 100%; text-align: center; margin-top: 10px; }
.pdf-ok { text-align: center; padding: 10px 0 6px; }
.pdf-ok strong { display: block; font-size: 1.05rem; margin-bottom: 6px; }
.pdf-ok p { color: var(--text-muted); font-size: 0.94rem; margin: 0; }

/* --- losse bevestiging na een offerteaanvraag (gecentreerd in beeld) ---------- */
.bevestig-overlay {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px;
  background: rgba(5, 4, 12, 0.55);
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.bevestig-overlay.open { opacity: 1; visibility: visible; }
.bevestig-kaart {
  background: #fff; border: 1px solid var(--line-strong); box-shadow: 0 26px 64px rgba(10, 8, 30, 0.34);
  max-width: 400px; width: 100%; padding: 34px 32px 28px; position: relative; text-align: center; outline: none;
  transform: translateY(10px); transition: transform 0.3s var(--ease);
}
.bevestig-overlay.open .bevestig-kaart { transform: none; }
.bevestig-vink {
  display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--navy); color: #fff;
}
.bevestig-vink svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bevestig-kaart strong { display: block; font-size: 1.14rem; margin-bottom: 8px; }
.bevestig-kaart p { color: var(--text-muted); font-size: 0.96rem; margin: 0 0 20px; line-height: 1.5; }
.bevestig-ok { min-width: 150px; text-align: center; }

/* --- terugbelverzoek (naast het contactformulier) ----------------------------- */
.terugbel { border: 1px solid var(--line-strong); background: var(--surface-alt); padding: 28px 30px; margin-top: 30px; }
.terugbel h3 { margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.12rem; }
.terugbel > p { color: var(--text-muted); margin: 0 0 20px; font-size: 0.95rem; }
.terugbel .form-success { margin: 0; }

/* --- hero-carrousel: EFA-productwissel met filmische dip-door-donker ----------
   Gedeeld door de desktop-hero (.hero-cine-media, met videoclips) en de mobiele
   hero (.mhero-bg, alleen stills). Alleen de productnaam is zichtbaar — bewust
   geen soortlabel en geen stippen-indicator. */
.carrousel { position: absolute; inset: 0; overflow: hidden; background: var(--void); }
.c-slide { position: absolute; inset: 0; opacity: 0; }
.c-slide.on { opacity: 1; }
.c-slide img, .c-slide video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1.045); transition: transform 6s ease-out;
}
.c-slide.on img, .c-slide.on video { transform: scale(1); }
.c-veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--void); opacity: 0; transition: opacity 0.65s var(--ease);
}
.c-veil.on { opacity: 1; }
.prodnaam {
  position: absolute; right: 6vw; bottom: 12vh; z-index: 5;
  font-family: var(--font-sans); font-weight: 600; color: #fff;
  font-size: clamp(1.05rem, 1.9vw, 1.5rem); letter-spacing: 0.05em;
  text-shadow: 0 2px 16px rgba(5, 4, 12, 0.65);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.prodnaam.on { opacity: 1; transform: none; }
.prodnaam-m { right: 20px; bottom: 16px; font-size: 0.9rem; }
/* de tekst drijft tijdens het pinnen omhoog door het beeld (zie main.js) */
html.scrolly-pin #hero-copy { will-change: transform; }

/* --- EFA 63 — scroll-gestuurde productreis ------------------------------------
   Sticky beeld, video volgt de scrollpositie, tekstblokken scrollen erdoorheen
   en lichten op. Intro-/outro-overlays in de paginakleuren laten de sectie
   soepel uit de witte USP-sectie opkomen en in de lichte sectie eronder
   verdwijnen — geen hard donker blok. */
.reis-track { position: relative; height: 340vh; }
.reis-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--void); }
@supports (height: 100svh) { .reis-sticky { height: 100svh; } }
.reis-sticky video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reis-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(5, 4, 12, 0.55) 100%);
}
.reis-intro, .reis-outro { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.reis-intro { background: var(--surface); }
.reis-outro { background: var(--surface-alt); opacity: 0; }
.reis-cap {
  position: absolute; left: 6vw; bottom: 14vh; max-width: 560px; z-index: 6;
  opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.reis-cap .kicker { color: var(--lilac); }
.reis-cap h2 { color: #fff; margin: 10px 0 0; font-size: clamp(1.7rem, 3.4vw, 2.7rem); }
.reis-cap p { margin: 12px 0 0; color: var(--text-on-navy-strong); font-size: 1.02rem; line-height: 1.6; max-width: 30rem; }
.reis-cap .btn { margin-top: 22px; }
.reis-hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 6;
  color: var(--text-muted); font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  animation: reishint 2.2s ease-in-out infinite;
}
@keyframes reishint {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
  50% { opacity: 0.9; transform: translateX(-50%) translateY(6px); }
}
/* touch/reduced motion: geen scrub — video als rustige loop met de tekstblokken
   als gewone, volledig zichtbare blokken die eroverheen scrollen */
.reis-statisch .reis-track { height: auto; }
.reis-statisch .reis-sticky { position: relative; height: auto; padding: 18vh 0 10vh; }
.reis-statisch .reis-cap {
  position: relative; left: auto; bottom: auto; z-index: 6;
  opacity: 1 !important; transform: none !important; pointer-events: auto;
  margin: 0 6vw 22vh; max-width: min(560px, calc(100vw - 12vw));
  text-shadow: 0 2px 16px rgba(5, 4, 12, 0.75);
}
.reis-statisch .reis-cap:last-child { margin-bottom: 4vh; }
.reis-statisch .reis-intro, .reis-statisch .reis-outro, .reis-statisch .reis-hint { display: none; }

/* --- vlieg-naar-offertelijst: miniatuur vliegt naar de nav-knop, die daar
   elastisch opveert (vergroten -> krimpen -> terugveren naar echte grootte) */
.vlieger {
  position: fixed; z-index: 95; width: 34px; height: 34px; border-radius: 50%;
  background: var(--lilac) center/cover no-repeat; color: var(--navy-ink);
  font-weight: 700; font-size: 1.15rem; line-height: 1;
  display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(10, 8, 30, 0.4), inset 0 0 0 2px rgba(255, 255, 255, 0.55);
  pointer-events: none;
  transition: transform 0.62s cubic-bezier(0.5, -0.05, 0.25, 1), opacity 0.62s var(--ease);
}
@keyframes mand-elastiek {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.38); }
  55%  { transform: scale(0.86); }
  75%  { transform: scale(1.14); }
  90%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
.offerte-knop.pop { animation: mand-elastiek 0.6s var(--ease); }

/* --- voorraad-/actiestatus op de productkaart (dashboard-bedienbaar) ---------- */
.badge-voorraad { margin-left: 6px; background: #f6e9e7; color: #8c2f24; }
.badge-actie { margin-left: 6px; background: var(--lilac-deep); color: #fff; }

/* --- klikbare productkaarten + eigen productpagina's (stap 2) ----------------- */
.badge-voorraad-ok { margin-left: 6px; background: #e6f3ec; color: #1d7a4f; }
/* De hele kaart is één klikvlak. .kaart-link ligt als onzichtbare laag over de
   kaart; de knopbalk krijgt een hogere z-index en blijft dus los bedienbaar. */
.prod-card { position: relative; cursor: pointer; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease); }
.prod-card:hover { border-color: var(--lilac-deep); box-shadow: 0 14px 34px rgba(50, 45, 118, 0.13); transform: translateY(-3px); }
.kaart-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.prod-card:focus-within { border-color: var(--lilac-deep); }
.prod-card .prod-card-actions { position: relative; z-index: 2; }
.prod-link { color: inherit; text-decoration: none; }
.prod-card:hover .prod-link, .prod-link:focus-visible { color: var(--lilac-deep); text-decoration: underline; }
.prod-media-link { display: block; color: inherit; text-decoration: none; overflow: hidden; }
.prod-media-link img { transition: transform 0.4s var(--ease); }
.prod-card:hover .prod-media-link img { transform: scale(1.045); }
/* zichtbare uitnodiging om door te klikken — ook op mobiel, waar hover ontbreekt */
.kaart-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 20px 0;
  font-family: var(--font-mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--lilac-deep); font-weight: 700;
}
.kaart-pijl { transition: transform 0.3s var(--ease); font-size: 0.95rem; }
.prod-card:hover .kaart-pijl { transform: translateX(5px); }
@media (hover: none) { .kaart-cta { text-decoration: underline; text-underline-offset: 3px; } }
.kruimel { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; margin-bottom: 18px; color: var(--text-on-navy); }
.kruimel a { color: var(--lilac); text-decoration: none; }
.kruimel a:hover { text-decoration: underline; }
.kruimel span { color: #fff; }
.product-hero .display { font-size: clamp(1.9rem, 4.4vw, 3.2rem); }
.product-detail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 44px; align-items: start; }
@media (max-width: 860px) { .product-detail { grid-template-columns: 1fr; } }
.product-media { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; }
.product-media img { width: 100%; height: auto; display: block; }
.product-media-placeholder { aspect-ratio: 4 / 3; background: var(--surface-alt); border-radius: 10px; }
.product-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.product-info .animals { margin: 0 0 8px; }
.product-info .prod-sub { margin-top: 30px; }
.gerelateerd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 18px; }
.mini-kaart {
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.mini-kaart:hover { border-color: var(--lilac-deep); transform: translateY(-3px); }
.mini-kaart img { width: 100%; height: 110px; object-fit: contain; }
.mini-placeholder { display: block; height: 110px; background: var(--surface-alt); border-radius: 8px; }
.mini-kaart span { font-weight: 600; font-size: 0.9rem; }