@charset "utf-8";
/* ============================================================================
   Ensar Yufka — richting 1: RAIL
   Koud staal, goud als enige warme kleur. De pagina is de transportband.
   Palet en tokens komen uit design/tokens-10demos.md, richting 1.
   Contrast op de grond #0F1417: tekst 15,00:1 / gedempt 7,87:1 / goud 7,66:1 /
   accent 8,14:1. Op deze donkere grond mag #C9A227 ook tekst zijn.
   ========================================================================= */

/* ---------- 1. Lettertypes, zelf gehost, latin + latin-ext in één bestand -- */
@font-face {
  font-family: 'Chivo';
  src: url('/assets/fonts/chivo-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chivo';
  src: url('/assets/fonts/chivo-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/plex-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/plex-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- 2. Tokens ----------------------------------------------------- */
:root {
  --grond:      #0F1417;
  --vlak:       #1A2229;
  --vlak-diep:  #131A20;
  --tekst:      #E2E8EC;
  --gedempt:    #9DABB4;
  --goud:       #C9A227;
  --goud-lijn:  #C9A227;
  --goud-tekst: #C9A227;
  --accent:     #7FB2D4;
  --knop-vlak:  #C9A227;
  --knop-tekst: #0F1417;
  --focus:      #7FB2D4;
  --hairline:   #2C3841;

  --kop: 'Chivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lijf: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius: 2px;
  --balk: 64px;
  --rail-hoogte: clamp(300px, 42vw, 460px);
  --tegel: clamp(260px, 26vw, 380px);
  --veer: cubic-bezier(.16, 1, .3, 1);
  --duur: .35s;
  --perspectief: 1200px;
  --kantel: 16deg;
  --nav-ruimte: 22ch;

  --marge: clamp(1.25rem, 5vw, 4rem);
  --breed: 1400px;
  --smal: 68ch;
}

/* ---------- 3. Basis ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--grond);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
:where(:target) { scroll-margin-top: calc(var(--balk) + 16px); }

body {
  margin: 0;
  background: var(--grond);
  color: var(--tekst);
  font: 400 clamp(1rem, .96rem + .2vw, 1.0625rem)/1.65 var(--lijf);
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
  hyphens: auto;
  -webkit-hyphens: auto;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}

::selection { background: var(--goud); color: var(--grond); }

.overslaan {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--goud); color: var(--grond);
  padding: .75rem 1.25rem; font: 600 1rem var(--lijf);
}
.overslaan:focus { left: .5rem; top: .5rem; }

.verborgen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 4. Typografie ------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--kop);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2rem, 1rem + 3.4vw, 4.5rem); text-transform: uppercase; }
h2 { font-size: clamp(1.6rem, .95rem + 2.3vw, 3rem); text-transform: uppercase; }
/* Kolomkoppen binnen een tweeluik zijn ondergeschikt aan de sectiekop. */
.duo h2, .duo--smal h2 { font-size: clamp(1.35rem, 1rem + 1.3vw, 2rem); }
h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); font-weight: 700; letter-spacing: -.01em; }
h4 { font-size: 1rem; font-weight: 700; letter-spacing: .01em; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.etiket {
  font: 600 .75rem/1.2 var(--lijf);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--goud-tekst);
}
.etiket--koel { color: var(--accent); }
.etiket--stil { color: var(--gedempt); }

.lood { font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); color: var(--gedempt); max-width: 58ch; }
.stil { color: var(--gedempt); }
.smal { max-width: var(--smal); }

/* Het nummer voor een kop: 01 / 02 / 03, machinaal. */
.nummer {
  font: 700 .8125rem/1 var(--kop);
  letter-spacing: .1em;
  color: var(--goud-tekst);
  display: inline-block;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--goud-lijn);
}

/* ---------- 5. Raster en secties ------------------------------------------ */
.omhulsel { width: min(100% - 2 * var(--marge), var(--breed)); margin-inline: auto; }

.blok { padding-block: clamp(3.5rem, 8vw, 7.5rem); position: relative; }
.blok--lijn { border-top: 1px solid var(--hairline); }
.blok--vlak { background: var(--vlak-diep); }

.blok__kop { display: grid; gap: 1.25rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.blok__kop p { max-width: 62ch; }

/* Machinale ondergrond: verticale rollerlijnen, heel zwak. */
.streping {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(90deg,
    rgba(226, 232, 236, .035) 0 1px, transparent 1px 96px);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.blok > .omhulsel { position: relative; z-index: 1; }

/* Meetlat: streepjes zoals op een machine. */
.meetlat {
  height: 18px;
  background-image:
    repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, var(--goud-lijn) 0 1px, transparent 1px 160px);
  background-size: 100% 6px, 100% 12px;
  background-position: 0 0, 0 0;
  background-repeat: repeat-x;
  opacity: .8;
}

/* ---------- 6. Knoppen ---------------------------------------------------- */
.knop {
  display: inline-flex; align-items: center; gap: .7rem;
  min-height: 48px; padding: .8rem 1.4rem;
  font: 600 .9375rem/1.1 var(--lijf);
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid var(--goud-lijn);
  border-radius: var(--radius);
  background: transparent; color: var(--goud-tekst);
  cursor: pointer;
  transition: background-color var(--duur) var(--veer),
              color var(--duur) var(--veer),
              transform var(--duur) var(--veer);
}
.knop:hover { background: rgba(201, 162, 39, .12); transform: translateY(-2px); }
.knop:active { transform: translateY(0); }

.knop--vol { background: var(--knop-vlak); color: var(--knop-tekst); }
.knop--vol:hover { background: #DAB331; }

.knop--stil { border-color: var(--hairline); color: var(--tekst); }
.knop--stil:hover { border-color: var(--accent); background: rgba(127, 178, 212, .1); }

.knop__pijl { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }

.knoprij { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Tekstlink met machinale onderstreping. */
.link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; text-decoration: none;
  color: var(--goud-tekst);
  border-bottom: 1px solid rgba(201, 162, 39, .45);
  padding-bottom: 2px;
  transition: border-color var(--duur) var(--veer), color var(--duur) var(--veer);
}
.link:hover { border-color: var(--goud-lijn); color: #DAB331; }

/* ---------- 7. Kopbalk ---------------------------------------------------- */
.balk {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--balk);
  pointer-events: none;
}
.balk__vlak {
  position: absolute; inset: 0;
  transform-origin: top;
  background: rgba(15, 20, 23, .86);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: transform var(--duur) var(--veer), background-color var(--duur) var(--veer);
}
.balk--klein .balk__vlak { transform: scaleY(.875); background: rgba(15, 20, 23, .96); }

.balk__rij {
  position: relative; z-index: 1; pointer-events: auto;
  height: var(--balk);
  width: min(100% - 2 * var(--marge), var(--breed));
  margin-inline: auto;
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem);
  transition: transform var(--duur) var(--veer);
}
.balk--klein .balk__rij { transform: translateY(-4px); }

.merk { display: flex; align-items: center; flex: none; text-decoration: none; }
.merk img { width: 128px; height: 54px; }

.hoofdnav { display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1.6rem); margin-inline-start: auto; }
.hoofdnav a {
  position: relative;
  max-width: var(--nav-ruimte);
  font: 600 .875rem/1.2 var(--lijf);
  text-decoration: none; color: var(--tekst); white-space: nowrap;
  padding: .5rem 0;
  transition: color var(--duur) var(--veer);
}
.hoofdnav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--goud-lijn);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--duur) var(--veer);
}
.hoofdnav a:hover::after, .hoofdnav a[aria-current="page"]::after { transform: scaleX(1); }
.hoofdnav a[aria-current="page"] { color: var(--goud-tekst); }

/* Zakelijk staat apart: eigen lijn ervoor, gouden rand eromheen. */
.hoofdnav .nav-zakelijk { color: var(--goud-tekst); }
.hoofdnav .nav-zakelijk::after { transform: scaleX(1); background: var(--goud-lijn); }
.hoofdnav .nav-zakelijk:hover { color: #DAB331; }
.nav-scheiding { width: 1px; height: 22px; background: var(--hairline); flex: none; }

/* Spoorkeuze: particulier of zakelijk. */
.spoorkeuze {
  display: flex; align-items: center; flex: none;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--vlak-diep);
  position: relative; overflow: hidden;
}
.spoorkeuze button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: 600 .75rem/1 var(--lijf); letter-spacing: .09em; text-transform: uppercase;
  color: var(--gedempt); padding: .7rem .85rem; min-height: 40px;
  transition: color var(--duur) var(--veer);
  position: relative; z-index: 1; white-space: nowrap;
}
.spoorkeuze button[aria-pressed="true"] { color: var(--knop-tekst); }
.spoorkeuze__loper {
  position: absolute; top: 2px; bottom: 2px; left: 2px;
  background: var(--goud); border-radius: var(--radius);
  transition: transform var(--duur) var(--veer), width var(--duur) var(--veer);
  z-index: 0;
}

/* Taalrail: vijf codes op een gesegmenteerd spoor. */
.taalrail { display: flex; align-items: center; flex: none; }
.taalrail ul {
  display: flex; list-style: none; margin: 0; padding: 2px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--vlak-diep);
}
.taalrail a {
  display: flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 36px; padding: 0 .35rem;
  font: 600 .75rem/1 var(--lijf); letter-spacing: .06em;
  text-decoration: none; color: var(--gedempt);
  border-radius: 1px;
  transition: color var(--duur) var(--veer), background-color var(--duur) var(--veer);
}
.taalrail a:hover { color: var(--tekst); background: rgba(226, 232, 236, .07); }
.taalrail a[aria-current="true"] {
  background: var(--goud); color: var(--knop-tekst);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}

.menuknop {
  display: none; flex: none;
  width: 48px; height: 48px; padding: 12px;
  background: transparent; border: 1px solid var(--hairline);
  border-radius: var(--radius); cursor: pointer;
}
.menuknop span { display: block; height: 1px; background: var(--tekst); margin: 5px 0; transition: transform var(--duur) var(--veer), opacity var(--duur) var(--veer); }
.menuknop[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menuknop[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menuknop[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 8. Uitklapmenu op smalle schermen ----------------------------- */
@media (max-width: 1150px) {
  .menuknop { display: block; margin-inline-start: auto; }
  .balk__rij > .spoorkeuze, .balk__rij > .taalrail, .balk__rij > .nav-scheiding { display: none; }

  .hoofdnav {
    position: fixed; inset: var(--balk) 0 auto 0;
    display: block; margin: 0;
    background: var(--vlak-diep);
    border-bottom: 1px solid var(--hairline);
    padding: 1rem var(--marge) 1.75rem;
    max-height: calc(100dvh - var(--balk));
    overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform var(--duur) var(--veer), opacity var(--duur) var(--veer), visibility var(--duur);
  }
  .hoofdnav[data-open="ja"] { transform: none; opacity: 1; visibility: visible; }
  .hoofdnav a {
    display: block; max-width: none; width: 100%;
    font-size: 1.0625rem; padding: .85rem 0; min-height: 48px;
    border-bottom: 1px solid var(--hairline);
  }
  .hoofdnav a::after { display: none; }
  .hoofdnav .nav-zakelijk { margin: 1rem 0 0; text-align: center; justify-content: center; }
  .hoofdnav .nav-scheiding { display: none; }

  /* Taalwissel bovenaan het uitklapmenu, vijf volledige namen, elk 48 px. */
  .menu-talen { display: block; margin-bottom: .5rem; }
  .menu-talen ul { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 2px; }
  .menu-talen a {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 48px; padding: .5rem .85rem;
    border: 1px solid var(--hairline); border-radius: var(--radius);
    font: 600 .9375rem/1.2 var(--lijf); text-decoration: none; color: var(--tekst);
  }
  .menu-talen a[aria-current="true"] {
    background: var(--goud); color: var(--knop-tekst); border-color: var(--goud-lijn);
    text-decoration: underline; text-underline-offset: 3px;
  }
  .menu-talen .code { font-size: .75rem; letter-spacing: .1em; opacity: .8; }
  .menu-spoor { margin-bottom: 1.25rem; }
  .menu-spoor .spoorkeuze { width: 100%; }
  .menu-spoor .spoorkeuze button { flex: 1; }
}
@media (min-width: 1151px) { .menu-talen, .menu-spoor { display: none; } }

/* ---------- 9. Hero ------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--balk) + clamp(2rem, 6vw, 5rem));
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
}
.hero__rooster {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  min-height: min(74svh, 720px);
}
.hero__tekst { display: grid; gap: clamp(1.25rem, 2.5vw, 1.9rem); align-content: center; }
.hero h1 { color: var(--tekst); }
.hero h1 .goud { color: var(--goud-tekst); display: block; }
.hero h1 .dun { display: block; font-weight: 700; letter-spacing: -.015em; }
.hero__sub { max-width: 52ch; }
.hero__meet {
  height: 14px; max-width: 340px;
  background-image:
    repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, var(--goud-lijn) 0 1px, transparent 1px 70px);
  background-size: 100% 5px, 100% 11px;
  background-repeat: repeat-x;
}

/* Het beeldvenster rechts: staal, foto, en de vellen ervoor. */
.hero__venster {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 620px;
  margin-inline-start: auto;
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--vlak);
  overflow: hidden;
  perspective: var(--perspectief);
}
.hero__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%;
  filter: saturate(.68) contrast(1.12) brightness(1.02);
}
.hero__was {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(15,20,23,.80) 0%, rgba(15,20,23,.18) 45%, rgba(15,20,23,.05) 100%),
    linear-gradient(0deg, rgba(15,20,23,.55) 0%, rgba(15,20,23,0) 42%);
}
/* De band onderin het venster: de modulaire mat uit productielijn.mp4. */
.hero__band {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  background:
    repeating-linear-gradient(90deg, rgba(226,232,236,.09) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, rgba(226,232,236,.06) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, rgba(20,27,33,.35), rgba(15,20,23,.96));
  border-top: 1px solid var(--goud-lijn);
  box-shadow: 0 -18px 40px rgba(15, 20, 23, .55);
}
.hero__vellen { position: absolute; inset: 0; transform-style: preserve-3d; }
.hero__vel {
  position: absolute;
  width: 30%;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .6));
  will-change: transform;
}
.hero__vel--1 { left: 3%;  bottom: 9%;  width: 28%; }
.hero__vel--2 { left: 34%; bottom: 14%; width: 31%; }
.hero__vel--3 { right: 2%; bottom: 7%;  width: 27%; }

.hero__ruis {
  position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--goud-lijn) 20%, var(--goud-lijn) 80%, transparent);
  opacity: .55;
}

/* ---------- 10. Cijferstrip ---------------------------------------------- */
.cijfers { border-block: 1px solid var(--hairline); background: var(--vlak-diep); }
.cijfers__rij {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cijfers__cel { padding: clamp(1.5rem, 3vw, 2.5rem) clamp(.75rem, 2vw, 1.5rem); border-inline-start: 1px solid var(--hairline); }
.cijfers__cel:first-child { border-inline-start: 0; }
.cijfers__getal {
  font: 900 clamp(1.75rem, 1rem + 2.6vw, 3.25rem)/1 var(--kop);
  color: var(--goud-tekst); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.cijfers__uit { margin-top: .6rem; font-size: .875rem; color: var(--gedempt); line-height: 1.4; }

@media (max-width: 760px) {
  .cijfers__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cijfers__cel:nth-child(3) { border-inline-start: 0; }
  .cijfers__cel:nth-child(n+3) { border-top: 1px solid var(--hairline); }
}

/* ---------- 11. De rail: het handelsmerk van deze richting ---------------- */
.rail-baan { position: relative; height: 340vh; }

.rail {
  position: sticky; top: var(--balk);
  height: calc(100vh - var(--balk));
  min-height: 560px;
  display: grid; grid-template-rows: auto 1fr auto;
  gap: clamp(1rem, 2vw, 2rem);
  padding-block: clamp(1.25rem, 3vw, 2.5rem);
  overflow: hidden;
  perspective: var(--perspectief);
  /* Zonder deze regel groeit de kolom mee met de overlopende rij en
     schuift alles wat erin staat naar rechts. Gemeten: kop op x=352. */
  grid-template-columns: minmax(0, 1fr);
}
.rail__kop {
  width: min(100% - 2 * var(--marge), var(--breed));
  margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem;
}
.rail__kop h2 .goud { color: var(--goud-tekst); }
.rail__voortgang {
  display: flex; align-items: center; gap: .75rem;
  font: 600 .75rem/1 var(--lijf); letter-spacing: .12em; text-transform: uppercase; color: var(--gedempt);
}
.rail__staaf { width: clamp(80px, 14vw, 180px); height: 2px; background: var(--hairline); position: relative; overflow: hidden; }
.rail__staaf i { position: absolute; inset: 0; background: var(--goud); transform-origin: left; transform: scaleX(0); }

.rail__sporen {
  position: relative;
  display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(.75rem, 1.6vw, 1.5rem);
  transform-style: preserve-3d;
  min-height: 0; min-width: 0;
}

.spoor {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 600ms var(--veer), opacity 600ms var(--veer), filter 600ms var(--veer);
  min-height: 0; min-width: 0;
  display: grid; grid-template-rows: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
}
.spoor::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 9px;
  border-top: 1px solid var(--hairline);
  background: repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px 22px);
  pointer-events: none;
}
.spoor--b2b::after { border-top-color: rgba(201, 162, 39, .55); }
.spoor__hoofd {
  width: min(100% - 2 * var(--marge), var(--breed));
  margin-inline: auto;
  display: flex; align-items: baseline; gap: .85rem; flex-wrap: wrap;
}
.spoor__naam {
  font: 700 .8125rem/1 var(--kop); letter-spacing: .18em; text-transform: uppercase;
  padding: .4rem .6rem; border: 1px solid currentColor; border-radius: var(--radius);
}
.spoor--b2c .spoor__naam { color: var(--accent); }
.spoor--b2b .spoor__naam { color: var(--goud-tekst); }
.spoor__uit { font-size: .875rem; color: var(--gedempt); }

/* Actief spoor komt naar voren, het andere zakt naar achteren.
   Beide blijven in beeld: er ligt niets ondoorzichtigs voor. */
[data-spoor="b2c"] .spoor--b2c,
[data-spoor="b2b"] .spoor--b2b { transform: translateZ(40px); opacity: 1; }
[data-spoor="b2c"] .spoor--b2b,
[data-spoor="b2b"] .spoor--b2c { transform: translateZ(-90px); opacity: .42; filter: saturate(.35); }

.rail__rij {
  display: flex; gap: clamp(1rem, 1.8vw, 2rem);
  padding-inline: var(--marge);
  will-change: transform;
  min-height: 0; min-width: 0;
}

.tegel {
  flex: 0 0 var(--tegel);
  position: relative;
  display: grid; grid-template-rows: 1fr auto;
  background: var(--vlak);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform var(--duur) var(--veer), border-color var(--duur) var(--veer);
  text-decoration: none; color: inherit;
  min-height: 0;
}
.tegel:hover { border-color: rgba(201, 162, 39, .55); }
.tegel__beeld { position: relative; overflow: hidden; background: var(--vlak-diep); min-height: 0; }
.tegel__beeld img, .tegel__beeld video {
  width: 100%; height: 100%; object-fit: cover;
}
.tegel__lijf { padding: 1rem 1.1rem 1.15rem; display: grid; gap: .45rem; align-content: start; }
.tegel__lijf h3 { font-size: 1.125rem; }
.tegel__lijf p { font-size: .875rem; color: var(--gedempt); line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tegel__prijs {
  font: 700 1.05rem/1 var(--kop); color: var(--goud-tekst);
  font-variant-numeric: tabular-nums;
}
.tegel__merk {
  position: absolute; top: .65rem; left: .65rem; z-index: 2;
  font: 600 .6875rem/1 var(--lijf); letter-spacing: .12em; text-transform: uppercase;
  background: rgba(15, 20, 23, .82); color: var(--tekst);
  padding: .38rem .5rem; border: 1px solid var(--hairline); border-radius: var(--radius);
}
/* Glans die met de kanteling meeschuift. */
.tegel__glans {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(226, 232, 236, .10) 46%, transparent 62%);
  will-change: transform;
}
.tegel--vlak { grid-template-rows: 1fr; }
.tegel--vlak .tegel__lijf { align-content: center; padding: clamp(1.25rem, 2.5vw, 1.9rem); gap: .75rem; }

.rail__hint {
  width: min(100% - 2 * var(--marge), var(--breed)); margin-inline: auto;
  font: 600 .75rem/1 var(--lijf); letter-spacing: .12em; text-transform: uppercase; color: var(--gedempt);
  display: none;
}

/* Op smalle schermen: gewoon een veegbare rij, geen scrollkoppeling. */
@media (max-width: 900px) {
  .rail-baan { height: auto; }
  .rail {
    position: static; height: auto; min-height: 0;
    overflow: visible; perspective: none;
    gap: 1.5rem;
  }
  .rail__sporen { transform-style: flat; gap: 2rem; }
  .spoor { transform: none !important; opacity: 1 !important; filter: none !important; }
  .rail__rij {
    transform: none !important;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block: .25rem;
  }
  .rail__rij::-webkit-scrollbar { display: none; }
  .tegel { scroll-snap-align: start; flex-basis: min(78vw, 320px); height: 380px; transform: none !important; }
  .tegel__glans { display: none; }
  .rail__hint { display: block; }
  .rail__voortgang { display: none; }
}

/* ---------- 12. Productkaarten ------------------------------------------- */
.kaarten { display: grid; gap: clamp(1rem, 2vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.kaart {
  display: grid; grid-template-rows: auto 1fr;
  background: var(--vlak); border: 1px solid var(--hairline); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color var(--duur) var(--veer), transform var(--duur) var(--veer);
}
.kaart:hover { border-color: rgba(201, 162, 39, .55); transform: translateY(-3px); }
.kaart__beeld { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--vlak-diep); }
.kaart__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--veer); }
.kaart:hover .kaart__beeld img { transform: scale(1.04); }
.kaart__lijf { padding: clamp(1.1rem, 2vw, 1.6rem); display: grid; gap: .6rem; align-content: start; }
.kaart__lijf h3 { margin: 0; }
.kaart__lijf p { font-size: .9375rem; color: var(--gedempt); margin: 0; }
.kaart__voet { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .4rem; padding-top: .85rem; border-top: 1px solid var(--hairline); }
.kaart__prijs { font: 700 1.25rem/1 var(--kop); color: var(--goud-tekst); font-variant-numeric: tabular-nums; }
.kaart__prijs small { display: block; font: 400 .75rem/1.3 var(--lijf); color: var(--gedempt); margin-top: .3rem; letter-spacing: 0; }

/* ---------- 13. Specificatieblok ------------------------------------------ */
.spec { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--vlak); overflow: hidden; }
.spec__kop { padding: clamp(1rem, 2vw, 1.5rem); border-bottom: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.spec__waarschuwing {
  padding: clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--hairline);
  border-left: 2px solid var(--goud-lijn);
  background: rgba(201, 162, 39, .06);
}
.spec__waarschuwing h4 { color: var(--goud-tekst); margin-bottom: .5rem; }
.spec__waarschuwing p { font-size: .9375rem; color: var(--gedempt); margin: 0; }

.spec table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.spec caption {
  text-align: left; padding: clamp(.9rem, 1.8vw, 1.25rem) clamp(1rem, 2vw, 1.5rem) .4rem;
  font: 700 .8125rem/1 var(--kop); letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.spec th, .spec td { text-align: left; padding: .7rem clamp(1rem, 2vw, 1.5rem); border-top: 1px solid var(--hairline); vertical-align: top; }
.spec th { font-weight: 400; color: var(--gedempt); width: 45%; }
.spec td { font-weight: 600; }
.spec tr:first-child th, .spec tr:first-child td { border-top: 1px solid var(--hairline); }

.open-waarde {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 600 .75rem/1 var(--lijf); letter-spacing: .08em; text-transform: uppercase;
  color: var(--goud-tekst);
  border: 1px dashed var(--goud-lijn); border-radius: var(--radius);
  padding: .35rem .55rem;
}
.open-waarde::before { content: ""; width: 6px; height: 6px; background: var(--goud); flex: none; }
.spec__voet { padding: clamp(.9rem, 1.8vw, 1.25rem) clamp(1rem, 2vw, 1.5rem); border-top: 1px solid var(--hairline); font-size: .8125rem; color: var(--gedempt); }

/* Lijst met open punten, zelfde taal als het specblok. */
.openlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--vlak); }
.openlijst li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem clamp(1rem, 2vw, 1.4rem); border-top: 1px solid var(--hairline); }
.openlijst li:first-child { border-top: 0; }
.openlijst span { font-size: .9375rem; }

.feitenlijst { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--vlak); }
.feitenlijst li { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; padding: .9rem clamp(1rem, 2vw, 1.4rem); border-top: 1px solid var(--hairline); }
.feitenlijst li:first-child { border-top: 0; }
.feitenlijst dt, .feitenlijst .sleutel { color: var(--gedempt); font-size: .9375rem; }
.feitenlijst .waarde { font-weight: 600; color: var(--tekst); text-align: right; }

/* ---------- 14. Video ----------------------------------------------------- */
.videokader {
  position: relative; border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--vlak-diep); overflow: hidden;
  max-width: 460px;
}
.videokader video { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--vlak-diep); }
.videokader__knop {
  position: absolute; right: .6rem; bottom: .6rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 40px; padding: .5rem .8rem;
  font: 600 .75rem/1 var(--lijf); letter-spacing: .08em; text-transform: uppercase;
  background: rgba(15, 20, 23, .86); color: var(--tekst);
  border: 1px solid var(--hairline); border-radius: var(--radius); cursor: pointer;
}
.videokader__knop:hover { border-color: var(--accent); }
.videobijschrift { margin-top: .75rem; font-size: .8125rem; color: var(--gedempt); max-width: 460px; }

/* ---------- 15. Twee kolommen -------------------------------------------- */
.duo { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.duo--smal { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 860px) { .duo, .duo--smal { grid-template-columns: minmax(0, 1fr); } }

.strook { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.paneel { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--vlak); padding: clamp(1.1rem, 2.2vw, 1.75rem); display: grid; gap: .6rem; align-content: start; }
.paneel h3 { margin: 0; }
.paneel p { margin: 0; font-size: .9375rem; color: var(--gedempt); }

/* ---------- 16. Tijdlijn (over ons): de rail als verhaal ------------------ */
.tijdlijn { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.tijdlijn::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px; background: var(--hairline); }
.tijdlijn li { position: relative; padding: 0 0 clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem); }
.tijdlijn li:last-child { padding-bottom: 0; }
.tijdlijn li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 15px; height: 15px;
  border: 1px solid var(--goud-lijn); background: var(--grond); border-radius: 50%;
}
.tijdlijn li::after { content: ""; position: absolute; left: 5px; top: 13px; width: 5px; height: 5px; background: var(--goud); border-radius: 50%; }
.tijdlijn .jaar { display: block; font: 700 .8125rem/1 var(--kop); letter-spacing: .14em; text-transform: uppercase; color: var(--goud-tekst); margin-bottom: .5rem; }
.tijdlijn p { margin: 0; color: var(--gedempt); }

blockquote.citaat {
  margin: 0; padding: clamp(1.25rem, 3vw, 2rem);
  border-left: 2px solid var(--goud-lijn); background: var(--vlak);
  border-radius: var(--radius);
}
blockquote.citaat p { font: 700 clamp(1.15rem, 1rem + .8vw, 1.6rem)/1.35 var(--kop); letter-spacing: -.01em; color: var(--tekst); }
blockquote.citaat footer { margin-top: .9rem; font-size: .8125rem; color: var(--gedempt); }

/* ---------- 17. Formulieren ---------------------------------------------- */
.formulier { display: grid; gap: 1.1rem; }
.veld { display: grid; gap: .4rem; }
.veld label { font: 600 .8125rem/1.2 var(--lijf); letter-spacing: .04em; text-transform: uppercase; color: var(--gedempt); }
.veld input, .veld select, .veld textarea {
  width: 100%; min-height: 48px; padding: .7rem .85rem;
  font: 400 1rem/1.4 var(--lijf); color: var(--tekst);
  background: var(--vlak-diep); border: 1px solid var(--hairline); border-radius: var(--radius);
  transition: border-color var(--duur) var(--veer);
}
.veld textarea { min-height: 130px; resize: vertical; }
.veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--accent); }
.veld input[aria-invalid="true"], .veld select[aria-invalid="true"], .veld textarea[aria-invalid="true"] { border-color: #E8A0A0; }
.veld .hint { font-size: .8125rem; color: var(--gedempt); }
.veld .fout { font-size: .8125rem; color: #F0B4B4; min-height: 1.2em; }
.veld .fout:empty { min-height: 0; }

.aanvink { display: flex; gap: .75rem; align-items: start; }
.aanvink input { width: 22px; height: 22px; min-height: 0; flex: none; margin-top: 2px; accent-color: var(--goud); }
.aanvink label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .9375rem; color: var(--tekst); line-height: 1.5; }

.melding { padding: .9rem 1rem; border: 1px solid var(--hairline); border-left: 2px solid var(--accent); border-radius: var(--radius); background: rgba(127, 178, 212, .08); font-size: .9375rem; }
.melding--gelukt { border-left-color: var(--goud-lijn); background: rgba(201, 162, 39, .08); }
.melding[hidden] { display: none; }

.demo-noot { font-size: .8125rem; color: var(--gedempt); border-top: 1px solid var(--hairline); padding-top: .9rem; }

/* ---------- 18. Kruimelpad ------------------------------------------------ */
.kruimel { padding-top: calc(var(--balk) + 1.75rem); }
.kruimel ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; font-size: .8125rem; color: var(--gedempt); }
.kruimel a { text-decoration: none; color: var(--gedempt); border-bottom: 1px solid transparent; }
.kruimel a:hover { color: var(--tekst); border-color: var(--hairline); }
.kruimel li + li::before { content: "/"; margin-inline-end: .5rem; color: var(--hairline); }

.paginakop { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem); }
.paginakop h1 { font-size: clamp(1.9rem, 1rem + 3vw, 4rem); }
.paginakop .lood { margin-top: 1.25rem; }

/* ---------- 19. Voettekst ------------------------------------------------- */
.voet { border-top: 1px solid var(--hairline); background: var(--vlak-diep); padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; }
.voet__rooster { display: grid; gap: clamp(1.75rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.voet h2 { font: 700 .8125rem/1 var(--kop); letter-spacing: .16em; text-transform: uppercase; color: var(--gedempt); margin-bottom: 1rem; }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.voet a { text-decoration: none; color: var(--tekst); font-size: .9375rem; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.voet a:hover { border-color: var(--goud-lijn); color: var(--goud-tekst); }
.voet address { font-style: normal; font-size: .9375rem; color: var(--gedempt); line-height: 1.7; }
.voet__merk img { width: 128px; height: 54px; margin-bottom: 1rem; }
.voet__slot { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; font-size: .8125rem; color: var(--gedempt); }
.voet__slot a { font-size: .8125rem; color: var(--gedempt); }
.sociaal { display: flex; gap: .5rem; }
.sociaal a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--hairline); border-radius: var(--radius); }
.sociaal a:hover { border-color: var(--goud-lijn); }
.sociaal svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ---------- 20. Cookiebalk ------------------------------------------------ */
.cookiebalk {
  /* Rechts onderaan, niet links: de hero-knoppen staan linksonder en werden
     door deze balk volledig afgedekt. De belangrijkste actie van de pagina was
     daardoor onbereikbaar tot de bezoeker de melding wegklikte. */
  position: fixed; left: auto; right: var(--marge); bottom: var(--marge); z-index: 95;
  width: min(360px, calc(100% - 2 * var(--marge)));
  background: var(--vlak); border: 1px solid var(--hairline); border-left: 2px solid var(--goud-lijn);
  border-radius: var(--radius); padding: .9rem 1rem;
  display: grid; gap: .55rem;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .6);
}
.cookiebalk h2 { font: 700 .9375rem/1.3 var(--kop); margin: 0; }
.cookiebalk p { font-size: .8125rem; color: var(--gedempt); margin: 0; }
@media (max-width: 560px) {
  .cookiebalk { left: var(--marge); right: var(--marge); width: auto; }
  /* Op een klein scherm mag de melding de eerste knop niet afdekken. */
  .cookiebalk p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
.cookiebalk[hidden] { display: none; }

/* ---------- 21. Onthulling bij het scrollen ------------------------------ */
[data-rv] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 700ms var(--veer), transform 700ms var(--veer);
  transition-delay: var(--rv-wacht, 0ms);
}
[data-rv].in { opacity: 1; transform: none; }

/* ---------- 22. Beperkte beweging ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
.rm [data-rv] { opacity: 1 !important; transform: none !important; }
.rm .rail-baan { height: auto; }
.rm .rail { position: static; height: auto; min-height: 0; overflow: visible; perspective: none; }
.rm .rail__sporen { transform-style: flat; gap: 2rem; }
.rm .spoor { transform: none !important; opacity: 1 !important; filter: none !important; }
.rm .rail__rij { transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; }
.rm .tegel { transform: none !important; scroll-snap-align: start; height: 380px; }
.rm .tegel__glans { display: none; }
.rm .hero__vel { transform: none !important; }
.rm .rail__voortgang { display: none; }
.rm .rail__hint { display: block; }
.rm .balk--klein .balk__vlak { transform: none; }
.rm .balk--klein .balk__rij { transform: none; }

/* ---------- 23. Kleine schermen ------------------------------------------ */
@media (max-width: 980px) {
  .hero__rooster { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .hero__venster { max-height: 420px; aspect-ratio: 5 / 4; margin-inline: 0; }
}
@media (max-width: 520px) {
  .hero__venster { aspect-ratio: 4 / 3; }
  .knoprij .knop { width: 100%; justify-content: center; }
  .voet__slot { flex-direction: column; }
}

@media print {
  .balk, .cookiebalk, .rail__voortgang { display: none; }
  body { background: #fff; color: #000; }
}