/* ═══════════════════════════════════════════════════════════
   BROSI INTERIORS — redesign-voorbeeld
   Tokens conform BRAND.md §9 en DESIGN.md — geen hardcoded
   merkkleuren buiten :root; alle interactie-easing via --ease-brand
   (enige uitzondering: de lineaire ambient hero-zoom, zie aldaar).
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Kleuren */
  --sand: #e8e0d5;
  --sand-rgb: 232, 224, 213;
  --sand-light: #f2ede8;
  --brown: #8b5e3c;
  --brown-rgb: 139, 94, 60;
  --brown-hover: #a07848;
  --brown-mid: #6b4226;
  --brown-dark: #3d2b1f;
  --brown-dark-rgb: 61, 43, 31;
  --text: #2c1f14;
  --text-light: #6a5546;
  --white: #faf8f5;
  --white-rgb: 250, 248, 245;
  --border: rgba(var(--brown-rgb), 0.2);
  --gold: #c9a96e;
  --gold-rgb: 201, 169, 110;
  --gold-hero: #d4a87a;
  --error: #e07060;
  --hero-bg: #1a0f08;
  --hero-bg-rgb: 26, 15, 8;

  /* Formulier- en statustokens
     Randen, gouden accentvlakken, schaduwen en de drie terugkoppelkleuren van een
     invulscherm (gelukt / wordt nagekeken / afgekeurd). De statuskleuren staan als
     hexwaarde omdat ze buiten het merkpalet vallen; elke tekstkleur haalt minstens
     4,5:1 op zowel zijn eigen achtergrondtoken als op de lichte kaart. */
  --border-light: rgba(var(--brown-rgb), 0.15);
  --border-medium: rgba(var(--brown-rgb), 0.3);
  --gold-subtle: rgba(var(--gold-rgb), 0.1);
  --gold-soft: rgba(var(--gold-rgb), 0.15);
  --gold-divider: rgba(var(--gold-rgb), 0.2);
  --gold-glow: rgba(var(--gold-rgb), 0.3);
  --gold-subtle-border: rgba(var(--gold-rgb), 0.35);
  --shadow-sm: rgba(var(--brown-dark-rgb), 0.04);
  --shadow-md: rgba(var(--brown-dark-rgb), 0.08);
  --shadow-lg: rgba(var(--brown-dark-rgb), 0.25);
  --status-ok-bg: #e8f5e9;
  --status-ok-text: #2e7d32;
  --status-wacht-bg: #fff8e1;
  --status-wacht-text: #8a5300;
  --status-fout-bg: #fce4ec;
  --status-fout-text: #c62828;

  /* Nav-hoogte als token — sticky elementen rekenen ermee */
  --nav-h: 72px;

  /* Beweging — één merkcurve, nergens anders een cubic-bezier */
  --ease-brand: cubic-bezier(0.16, 1, 0.3, 1);

  /* Radius-regime: kaarten scherp, knoppen/nav 2px, formulier 6px */
  --radius-sharp: 0;
  --radius-nav: 2px;
  --radius-form: 6px;

  /* Ritme */
  --space-section: 104px;
  --space-section-mobiel: 64px;
  --pad-x-min: 60px;
  /* Bovengrens voor de inhoud. Er is geen gedeelde container in de opmaak, dus de
     begrenzing loopt via het bestaande spacingtoken: vanaf 1680px groeit de zijmarge mee
     zodat de inhoud op 1560px blijft staan. Bij 1680 komt dat exact op de huidige 60px
     uit, dus er is geen sprong; onder die breedte verandert er niets. Zonder deze regel
     was de inhoud 1785px op 1920 en 2425px op 2560 en viel de compositie uit elkaar. */
  --maxw-inhoud: 1560px;
  --maxw-hero-tekst: 860px;
  --maxw-hero-beeld: calc(var(--maxw-inhoud) + 2 * var(--pad-x-min));
  --pad-x-mobiel: 20px;
  --pad-x: max(var(--pad-x-min), calc((100vw - var(--maxw-inhoud)) / 2));

  /* Z-schaal */
  --z-nav: 100;
  --z-float: 200;
  --z-modal: 800;
  --z-skip: 900;

  /* Warmteoverlays — twee varianten, nooit meer (waarden uit BRAND.md §9) */
  --overlay-hero: linear-gradient(to top, rgba(15, 7, 2, 0.8) 0%, rgba(15, 7, 2, 0.22) 52%, rgba(15, 7, 2, 0.38) 100%);
  /* De tekstzone van een fotokaart staat op een VASTE afstand van de onderrand (de
     .cat-info-padding), niet op een percentage van de kaarthoogte. Daarom lopen de eerste
     stops in pixels: dan is de dekking op een kaart van 320 px even sterk als op een van
     653 px. Gemeten was het gouden label op de lichtste plek van een foto 2,0:1; met deze
     band haalt het overal minstens 4,5:1. Boven de tekstzone valt de dekking snel terug
     zodat de foto zelf onaangetast blijft. */
  /* Warme onderband in de merk-nachtkleur, alléén achter de tekst — niet zwart, en niet
     over de hele foto. Op deze houtfotografie leest zwart als een filter dat er overheen
     ligt; --brown-dark hoort bij hetzelfde palet en laat de foto erdoorheen zien. De band
     is volledig weg op 168 px, dus alles boven de tekstzone blijft onaangeraakt.
     Bewust in pixels en niet in procenten: de tekst staat op een vaste afstand van de
     onderrand, dus een percentage zou een kaart van 320 px anders behandelen dan een van
     653 px. */
  --overlay-kaart: linear-gradient(
    to top,
    rgba(61, 43, 31, 0.92) 0,
    rgba(61, 43, 31, 0.82) 58px,
    rgba(61, 43, 31, 0.72) 96px,
    rgba(61, 43, 31, 0.28) 140px,
    rgba(61, 43, 31, 0) 196px
  );
  --overlay-kaart-hover: linear-gradient(
    to top,
    rgba(61, 43, 31, 0.94) 0,
    rgba(61, 43, 31, 0.86) 64px,
    rgba(61, 43, 31, 0.76) 104px,
    rgba(61, 43, 31, 0.34) 150px,
    rgba(61, 43, 31, 0) 210px
  );
}

/* ── Mobiele rail — geldt in alle drie de varianten ─────────────────────────
   De niet-actieve kaart werd gedimd en verkleind (opacity 0,55 + scale 0,95).
   Dat leest als een maatfout in plaats van als een aanwijzing. Alle kaarten
   houden nu dezelfde breedte en maat; alleen de peek wijst de weg. */
@media (max-width: 900px) {
  .cat-grid .cat-item,
  .cat-grid .cat-item:first-child,
  .cat-grid .cat-item:not(:first-child):last-child:nth-child(even) {
    flex: 0 0 86vw;
  }
  html.js .cat-grid .cat-item .cat-card,
  html.js .cat-grid .cat-item.snap-actief .cat-card {
    opacity: 1;
    transform: none;
  }
}

/* ── Fallback-fonts met gelijkgetrokken metriek ──
   Tot de webfonts binnen zijn rendert de tekst in deze size-adjusted fallbacks;
   de regelval blijft daardoor (vrijwel) identiek en de font-swap verschuift de
   layout niet meer. Gemeten: Cormorant = 88,1% van Georgia · Jost = 89,5% van Arial. */
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Georgia");
  size-adjust: 88.1%;
}

@font-face {
  font-family: "Jost Fallback";
  src: local("Arial");
  size-adjust: 89.5%;
}

/* ── Webfonts: self-hosted (assets/fonts) — geen Google-keten: één render-blocking
   cross-origin-request minder op first visit én geen IP-lek naar Google (AVG).
   Zelfde family-namen, dus alle bestaande font-stacks blijven ongewijzigd. ── */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-300.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-300italic.woff2") format("woff2");
}

@font-face {
  /* Variabel font: één bestand dekt alle gebruikte gewichten (300/400/600) */
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/jost-variabel.woff2") format("woff2");
}

/* Fontonafhankelijke boxhoogte voor single-line UI-elementen: geen verticale
   verschuiving wanneer de webfonts de fallbacks vervangen */
.hero-label,
.btn-primary,
.btn-secundair,
.btn-sectie,
.nav-cta {
  line-height: 1.5;
}

/* ── Basis ── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 300;
  font-size: 14px;
  background: var(--white);
  color: var(--text);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

main {
  display: block;
}

::selection {
  background: var(--brown);
  color: #ffffff;
}

/* ── Typografische componenten ── */
.section-label {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--brown-mid);
  margin-bottom: 14px;
  display: inline-block;
  position: relative;
}

.op-donker .section-label,
.section-label--goud {
  color: var(--gold);
}

.section-title {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-weight: 300;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.3px;
  color: var(--brown-dark);
}

/* De cursieve helft van een sectiekop draagt het accent, met hetzelfde token als het
   sectielabel erboven: op licht brown-mid, op donker goud. Goud haalt op de lichte
   gronden de leesbaarheidsdrempel niet (2,1:1 op wit-warm), brown-mid wel — 8,1:1 op
   wit-warm, 6,6:1 op zand, 7,4:1 op zand-licht. Bewust niet --brown: dat is in dit
   systeem de interactiekleur, en een statische kop hoort niet aanklikbaar te lijken. */
.section-title em {
  font-style: italic;
  color: var(--brown-mid);
}

.op-donker .section-title {
  color: #ffffff;
}

.op-donker .section-title em {
  color: var(--gold);
}

.section-intro {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-light);
  max-width: 65ch;
}

.op-donker .section-intro {
  color: rgba(255, 255, 255, 0.78);
}

/* Sectie-label krijgt een verdiende hairline zodra hij verschijnt */
.section-header .section-label::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  height: 1px;
  width: 0;
  background: currentColor;
  opacity: 0.5;
  transition: width 0.9s var(--ease-brand) 0.45s;
}

.section-header.visible .section-label::after {
  width: 32px;
}

/* ── Knoppen ── */
.btn-primary,
.btn-secundair {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-nav);
  touch-action: manipulation;
  transition:
    background 0.25s var(--ease-brand),
    border-color 0.25s var(--ease-brand),
    box-shadow 0.25s var(--ease-brand),
    transform 0.2s var(--ease-brand);
}

.btn-primary {
  background: var(--brown);
  color: #ffffff;
  border: 1px solid var(--brown);
}

.btn-primary:hover {
  background: var(--brown-hover);
  border-color: var(--brown-hover);
  box-shadow: 0 6px 24px rgba(var(--brown-rgb), 0.4);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}

/* Outline — uitsluitend op donkere achtergronden */
.btn-secundair {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.btn-secundair:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.btn-secundair:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}

/* Compacte sectieknop */
.btn-sectie {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 26px;
  background: var(--brown);
  color: #ffffff;
  border: 1px solid var(--brown);
  border-radius: var(--radius-nav);
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  align-self: flex-start;
  min-height: 44px;
  touch-action: manipulation;
  transition:
    background 0.25s var(--ease-brand),
    box-shadow 0.25s var(--ease-brand),
    transform 0.2s var(--ease-brand);
}

.btn-sectie:hover {
  background: var(--brown-hover);
  border-color: var(--brown-hover);
  box-shadow: 0 4px 16px rgba(var(--brown-rgb), 0.4);
  transform: translateY(-2px);
}

.btn-sectie:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}

.btn-sectie svg {
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-brand);
}

.btn-sectie:hover svg {
  transform: translateX(4px);
}

/* Stille tekstlink */
.link-stil {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brown-mid);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
  transition:
    color 0.2s var(--ease-brand),
    border-color 0.2s var(--ease-brand);
}

.link-stil:hover {
  color: var(--brown);
  border-color: var(--brown);
}

.op-donker .link-stil,
.link-stil.op-donker {
  color: var(--gold);
  border-color: rgba(var(--gold-rgb), 0.35);
}

.op-donker .link-stil:hover,
.link-stil.op-donker:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
}

/* Kleine zelfstandige tekstlinks ogen compact maar raken ruim (≥44px) */
.link-stil,
.usp-banner-cta,
.showroom-route,
.aanvraag-login {
  position: relative;
}

.link-stil::after,
.usp-banner-cta::after,
.showroom-route::after,
.aanvraag-login::after {
  content: "";
  position: absolute;
  top: -14px;
  bottom: -14px;
  left: -6px;
  right: -6px;
}

/* ── Skip-link ── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--brown);
  color: #ffffff;
  padding: 10px 18px;
  z-index: var(--z-skip);
  font-size: 12px;
  text-decoration: none;
  border-radius: 0 0 var(--radius-nav) 0;
  transition: top 0.2s var(--ease-brand);
}

.skip-link:focus {
  top: 0;
}

/* ── Alleen voor voorleessoftware ──
   Tekst die wél wordt voorgelezen maar niets aan de weergave verandert. Gebruikt voor de melding
   dat een link een nieuw tabblad opent: dat is een contextwissel die je ziet als je kijkt en niet
   merkt als je luistert.

   Dezelfde techniek als `.proj-sr-only`, maar op wortelniveau in plaats van binnen een
   media-query — dit is een utility die overal moet gelden. `clip-path: inset(50%)` in plaats van
   `display: none` of `visibility: hidden`: die twee halen de tekst juist uit de voorleesboom.
   Breedte en hoogte van 1px met `overflow: hidden` houden de regel buiten beeld zonder hem uit de
   opmaakstroom te halen; `white-space: nowrap` voorkomt dat een lange melding de regelhoogte van
   zijn omgeving beïnvloedt. Geen enkele zichtbare verandering, ook niet bij zoomen. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ═══ NAV ═══ */
#mainNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
  height: var(--nav-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background 0.4s var(--ease-brand),
    border-color 0.4s var(--ease-brand);
}

/* De vier woorden krijgen een eigen midden, los van hun buren.
   ────────────────────────────────────────────────────────────
   `space-between` hierboven verdeelt de vrije ruimte gelijk over twee gaten. De
   middenrij zweeft daarmee mee met de breedte van de utilityzone — en die is in
   de winkel breder dan hier: daar staat een zoekicoon in de balk en een chevron
   naast Collectie. Gemeten op 1905px: het woord begint hier op 582 en in de
   winkel op 520, een sprong van 62px die je ziet zodra je van de site naar de
   winkel klikt. Voor een ingelogde dealer wordt het 84px, want de winkelwagen
   verbreedt de zone opnieuw.

   Drie kolommen lossen dat op: de middenkolom is precies zo breed als de rij en
   ligt in het midden van de balk. Wat er links of rechts naast staat, verschuift
   hem niet meer. Site en winkel landen daarmee op dezelfde plek — gemeten 722 op
   beide, vanaf 1600px; daaronder is de balk te krap om te centreren en valt hij
   terug op de verdeling van hiervoor.

   Drie grenzen, elk om iets kapots te voorkomen:
   - `min-width: 901px` — onder die breedte blijft de balk flex. De hamburger
     wordt daar rechts gezet met `margin-left: auto` (zie het mobiele blok), en
     die truc bestaat in een raster niet: hij belandde midden in de balk.
   - `:has(> #desktopNavLinks)` — de winkel kent ook een afreken- en een kale
     balk met maar twee kinderen. Zonder deze voorwaarde schuift het
     telefoonnummer daar naar de middenkolom.
   - `column-gap` — zonder ondergrens raken de woorden en de utilityzone elkaar
     tussen 901 en 1024px. Met 40px houdt de balk daar exact de ruimte die hij
     vandaag ook heeft. */
@media (min-width: 901px) {
  #mainNav:has(> #desktopNavLinks) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 40px;
  }

  #mainNav:has(> #desktopNavLinks) > .nav-logo {
    justify-self: start;
  }

  #mainNav:has(> #desktopNavLinks) > #desktopNavActions {
    justify-self: end;
  }
}

/* Nav-leesbaarheid op de herofoto komt uit --overlay-hero (licht boven) */
#mainNav.nav-solid {
  background: rgba(var(--white-rgb), 0.97);
  border-bottom-color: var(--border);
}

/* Tussenstaat zodra je binnen de hero scrolt: zelfde glas-idioom als de USP-band.
   Voorkomt dat kop en navlinks tekst-door-tekst botsen — leesbaar én parkeerbaar. */
#mainNav.nav-glas {
  background: rgba(var(--hero-bg-rgb), 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(var(--white-rgb), 0.08);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #mainNav.nav-glas {
    background: rgba(var(--hero-bg-rgb), 0.88);
  }
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo img {
  height: 48px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
}

.nav-links a {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: color 0.2s var(--ease-brand);
}

#mainNav.nav-solid .nav-links a {
  color: var(--text);
}

.nav-links a:hover {
  color: var(--gold-hero);
}

#mainNav.nav-solid .nav-links a:hover {
  color: var(--brown);
}

/* Actieve sectie alleen markeren op de gevulde nav (contrast op foto) */
#mainNav.nav-solid .nav-links a.nav-link-active {
  color: var(--brown);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  /* Zo hoog als de balk, zodat wat eronder hangt ook werkelijk onder de balk begint en
     er niet overheen valt. Wat erin staat blijft gecentreerd. */
  align-self: stretch;
}

.nav-login {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--ease-brand);
}

.nav-login:hover {
  color: #ffffff;
}

#mainNav.nav-solid .nav-login {
  color: var(--text-light);
}

#mainNav.nav-solid .nav-login:hover {
  color: var(--brown);
}

/* Twee vormen van hetzelfde woord staan allebei in de pagina; het breekpunt kiest.
   Standaard de volle vorm — de korte staat klaar voor de smalle band. */
.nav-woord-kort {
  display: none;
}

/* ── Taalkiezer ──
   Een knop met de taalcode en daaronder een lijstje met drie echte links. Geen
   modaal venster: er valt niets te bevestigen. De knop draagt zijn naam in de bron,
   niet in de vorm — "NL" alleen zou een schermlezer niets zeggen. */
.nav-taal {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
}

.nav-taal-knop {
  /* Vlag en code naast elkaar: de vlag is de herkenningshulp, de code draagt de
     betekenis. */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  /* Het woord is twee letters; het aanraakvlak hoeft dat niet te zijn. De ruimte
     groeit omhoog en omlaag — in de breedte is het in de smalste balk krap, en daar
     telt elke pixel tussen de laatste link en deze knop. */
  padding: 12px 2px;
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  touch-action: manipulation;
  transition: color 0.2s var(--ease-brand);
}

.nav-taal-knop:hover,
.nav-taal-knop[aria-expanded="true"] {
  color: #ffffff;
}

#mainNav.nav-solid .nav-taal-knop {
  color: var(--text-light);
}

#mainNav.nav-solid .nav-taal-knop:hover,
#mainNav.nav-solid .nav-taal-knop[aria-expanded="true"] {
  color: var(--brown);
}

.nav-taal-paneel {
  position: absolute;
  /* Aan de onderrand van de balk, niet aan de knop: anders dekt het paneel de balk
     gedeeltelijk af en lijkt het eruit te groeien in plaats van eronder te hangen. */
  top: 100%;
  right: 0;
  z-index: 1;
  display: block;
  width: 240px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-nav);
  box-shadow: 0 12px 32px var(--shadow-lg);
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 0.16s var(--ease-brand),
    translate 0.16s var(--ease-brand),
    display 0.16s var(--ease-brand) allow-discrete;
}

/* De dichte staat is een echte staat, geen truc: het element is en blijft verborgen
   voor hulpsoftware. De eigen regel is nodig omdat de basisregel hierboven anders van
   de browser wint en het paneel altijd zichtbaar zou zijn. */
.nav-taal-paneel[hidden] {
  display: none;
  opacity: 0;
  translate: 0 -6px;
  transition-duration: 0.12s;
}

@starting-style {
  .nav-taal-paneel:not([hidden]) {
    opacity: 0;
    translate: 0 -6px;
  }
}

/* Zonder scripts gaat er niets open en dicht, dus laat de kiezer dan weg. Een knop die
   niets doet is erger dan geen knop, en het alternatief — de drie namen uitgeklapt in de
   balk — maakte de utilityzone bijna tweehonderd pixels breder en duwde de hoofdknop
   voorbij de rand. De keuze hangt met opzet aan de browserstand en niet aan een klasse
   die een script pas onderaan de pagina zet: dat laatste zou de balk bij elke koude
   lading eerst verkeerd tekenen en daarna laten verspringen. */
@media (scripting: none) {
  .nav-taal {
    display: none;
  }
}


/* ── De vlag naast taalcode en taalnaam ──
   Een klein beeld met vaste maat, zodat er niets verspringt terwijl het laadt. De dunne
   rand houdt de witte vlagdelen zichtbaar op een licht vlak; op donker valt hij vrijwel
   weg en dat is genoeg — daar draagt de vlag zijn eigen contrast. Geen ronde uitsnede:
   die vervormt het vlagontwerp. Dezelfde vorm op alle drie de plekken: de balk
   (.nav-vlag), het menu (.mm-vlag) en de taalbalk van de aanvraagpagina's (.lang-vlag).
   De vlag staat nooit zonder taalnaam of taalcode ernaast. */
.nav-vlag,
.mm-vlag,
.lang-vlag {
  display: block;
  width: 21px;
  height: 14px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.nav-taal-kop {
  display: block;
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 12px;
}

.nav-taal-lijst {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-taal-lijst a {
  position: relative;
  /* Vlag links, naam (met eventuele uitleg) rechts; de rij haalt het aanraakvlak
     van 44px dat de categorierijen elders in de balk ook dragen. */
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 0 8px 14px;
  text-decoration: none;
  color: var(--text);
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-size: 13px;
  transition: color 0.2s var(--ease-brand);
}

.nav-taal-tekst {
  display: block;
  min-width: 0;
}

.nav-taal-lijst a:hover {
  color: var(--brown);
}

/* De actieve taal krijgt een zetmarkering, geen vlak. Bewust bruin en geen goud:
   goud op wit haalt het leescontrast niet. */
.nav-taal-lijst a[aria-current]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.5px;
  height: 16px;
  margin-top: -8px;
  background: var(--brown-mid);
}

.nav-taal-lijst a[aria-current] {
  font-weight: 600;
}

.nav-taal-naam {
  display: block;
}

/* Eén regel uitleg in de taal van de bestemming, voor het geval die ergens anders
   uitkomt dan de bezoeker verwacht. */
.nav-taal-uitleg {
  display: block;
  font-size: 11px;
  color: var(--text-light);
  margin-top: 1px;
}

/* Tekens staan altijd op currentColor en nemen de grootte uit hun attributen. */
.ico {
  display: block;
  flex-shrink: 0;
}

.nav-cta {
  background: var(--brown);
  color: #ffffff;
  padding: 12px 22px;
  border-radius: var(--radius-nav);
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
  font-size: 10px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  transition:
    background 0.25s var(--ease-brand),
    box-shadow 0.25s var(--ease-brand),
    transform 0.2s var(--ease-brand);
}

.nav-cta:hover {
  background: var(--brown-hover);
  box-shadow: 0 4px 16px rgba(var(--brown-rgb), 0.4);
  transform: translateY(-1px);
}

.nav-cta:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  /* Een aanraakdoel krimpt nooit stil mee met een volle balk. */
  flex-shrink: 0;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #ffffff;
  border-radius: var(--radius-nav);
  transition:
    transform 0.3s var(--ease-brand),
    opacity 0.3s var(--ease-brand),
    background 0.3s var(--ease-brand);
}

#mainNav.nav-solid .hamburger span {
  background: var(--brown-dark);
}

/* ═══ MOBIEL MENU — native <dialog> op donker glas ═══
   De markup staat statisch in elke pagina die hem draagt; het script raakt hem niet aan.
   showModal() = top-layer + inert + Escape + focus-herstel gratis; enter/exit is pure
   CSS (@starting-style + allow-discrete, degradeert naar direct tonen). */

/* Scroll-lock: puur CSS — geen inline-styles, geen layout-shift (gutter blijft staan) */
html {
  scrollbar-gutter: stable;
}

body:has(dialog.mm[open]) {
  overflow: hidden;
}

dialog.mm {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--white);
  /* top layer regelt het echte stapelen; dit is de fallback voor oude browsers */
  z-index: var(--z-modal);
  overscroll-behavior: contain;
  opacity: 0;
  translate: 24px 0;
  /* exit: één snelle beweging terug langs hetzelfde pad (in van rechts, uit naar rechts) */
  transition:
    opacity 0.24s var(--ease-brand),
    translate 0.24s var(--ease-brand),
    display 0.24s var(--ease-brand) allow-discrete,
    overlay 0.24s var(--ease-brand) allow-discrete;
}

/* Oeroude browsers zonder dialog-UA-stijl: gesloten = echt weg */
dialog.mm:not([open]) {
  display: none;
}

dialog.mm[open] {
  display: block;
  opacity: 1;
  translate: 0 0;
  transition-duration: 0.36s;
}

@starting-style {
  dialog.mm[open] {
    opacity: 0;
    translate: 24px 0;
  }
}

/* Swipe-to-close: tijdens de sleep geen transitie (1:1 met de vinger); bij de
   afronding een near-instant display-flip zodat de inline-animatie het werk doet */
dialog.mm.mm-sleep {
  transition: none;
}

dialog.mm.mm-direct {
  transition-duration: 0.01ms;
}

/* De glaslaag draagt de vaste blur; alleen opacity animeert (Safari-snel) */
.mm-glas {
  position: absolute;
  inset: 0;
  background: rgba(var(--hero-bg-rgb), 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mm-glas {
    background: rgba(var(--hero-bg-rgb), 0.97);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .mm-glas {
    background: rgba(var(--hero-bg-rgb), 0.97);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

dialog.mm::backdrop {
  background: transparent;
  /* maakt de backdrop een scroll-container: scroll-chaining stopt (Chrome 144+) */
  overflow: hidden;
  overscroll-behavior: contain;
}

.mm-vlak {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--pad-x-mobiel) calc(24px + env(safe-area-inset-bottom));
  /* verticaal scrollen native; horizontaal is voor de sluit-veeg */
  touch-action: pan-y;
}

.mm-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  flex-shrink: 0;
}

.mm-kop img {
  height: 44px;
  width: auto;
}

.mm-close {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  font-size: 22px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  touch-action: manipulation;
  transition: color 0.2s var(--ease-brand);
}

.mm-close:active {
  color: var(--gold-hero);
}

/* ── De vier links als poster: Cormorant op display-schaal, gouden index ── */
.mm-nav {
  /* neutraliseer de globale nav-elementstijl (position:fixed flex-balk van de hoofdnav) */
  position: static;
  display: block;
  height: auto;
  z-index: auto;
  background: transparent;
  border-bottom: none;
  transition: none;
  padding: 14px 0 4px;
}

.mm-item {
  display: block;
  text-decoration: none;
  padding: 7px 0;
  border: none;
  touch-action: manipulation;
}

.mm-nr {
  display: block;
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--gold-hero);
  margin-bottom: 2px;
}

/* Regelmask: de link komt regel-voor-regel omhoog */
.mm-woord {
  display: block;
  overflow: hidden;
}

.mm-woord span {
  display: block;
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-weight: 300;
  font-size: clamp(34px, 9vw, 44px);
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.96);
  transform: translateY(110%);
  transition:
    transform 0.42s var(--ease-brand),
    color 0.2s var(--ease-brand);
}

dialog.mm[open] .mm-woord span {
  transform: translateY(0);
}

dialog.mm[open] .mm-item:nth-child(1) .mm-woord span { transition-delay: 0.1s; }
dialog.mm[open] .mm-item:nth-child(2) .mm-woord span { transition-delay: 0.15s; }
dialog.mm[open] .mm-item:nth-child(3) .mm-woord span { transition-delay: 0.2s; }
dialog.mm[open] .mm-item:nth-child(4) .mm-woord span { transition-delay: 0.25s; }

@starting-style {
  dialog.mm[open] .mm-woord span {
    transform: translateY(110%);
  }
}

.mm-item:active .mm-woord span,
.mm-item[aria-current] .mm-woord span {
  color: var(--gold-hero);
}

/* ── Fade-up-groepen (utility, taal): bestaand materialiseer-idioom ── */
.mm-instap {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition:
    opacity 0.42s var(--ease-brand),
    transform 0.42s var(--ease-brand),
    filter 0.42s var(--ease-brand);
}

dialog.mm[open] .mm-instap {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

dialog.mm[open] .mm-instap-1 { transition-delay: 0.3s; }
dialog.mm[open] .mm-instap-2 { transition-delay: 0.36s; }

@starting-style {
  dialog.mm[open] .mm-instap {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }
}

.mm-label {
  display: block;
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-hero);
  margin: 20px 0 10px;
}

/* ── Utilityblok: wat je hier dóét, in plaats van waar je heen gaat.
   Teken en woord staan samen — zo leert de lade de tekens aan die in de balk
   alleen staan. ── */
.mm-utility {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0 0;
  margin-top: auto;
}

.mm-rij {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-nav);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.86);
  touch-action: manipulation;
  transition:
    color 0.2s var(--ease-brand),
    transform 0.08s var(--ease-brand);
}

.mm-rij:active {
  transform: scale(0.97);
}

.mm-rij:hover {
  color: var(--white);
}

.mm-rij-woord {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.mm-contact {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-nav);
  text-decoration: none;
  touch-action: manipulation;
  transition: transform 0.08s var(--ease-brand);
}

.mm-contact:active {
  transform: scale(0.97);
}

.mm-contact-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-hero);
  flex-shrink: 0;
}

.mm-contact-meta {
  display: block;
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2px;
}

.mm-contact-value {
  display: block;
  font-size: 14px;
  color: var(--white);
}

.mm-cta {
  display: block;
  background: var(--brown);
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  padding: 16px;
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  border-radius: var(--radius-nav);
  margin-top: 4px;
  touch-action: manipulation;
  transition:
    transform 0.08s var(--ease-brand),
    background 0.2s var(--ease-brand);
}

.mm-cta:active {
  transform: scale(0.97);
}

.mm-cta:hover {
  background: var(--brown-hover);
  color: #ffffff;
}

/* ── Taal, onderin: drie echte links, elk met een vlag als herkenningshulp naast de
   naam. De naam blijft de drager van de betekenis. ── */
.mm-taal {
  padding: 4px 0 0;
}

.mm-taal-lijst {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mm-taal-lijst a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 12px 0 12px 14px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.82);
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-size: 14px;
  touch-action: manipulation;
  transition: color 0.2s var(--ease-brand);
}

.mm-taal-tekst {
  display: block;
  min-width: 0;
}

.mm-taal-lijst a:active {
  color: var(--gold-hero);
}

.mm-taal-lijst a[aria-current] {
  font-weight: 600;
  color: var(--white);
}

.mm-taal-lijst a[aria-current]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.5px;
  height: 16px;
  margin-top: -8px;
  background: var(--gold-hero);
}

.mm-taal-naam {
  display: block;
}

.mm-taal-uitleg {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 1px;
}

/* ═══ HERO ═══ */
.hero {
  height: 100vh;
  height: 100svh; /* browser-ui-veilig; oudere browsers vallen terug op 100vh */
  min-height: 600px;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--hero-bg);
}

.hero-beeld {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Op liggende schermen valt boven en onder een deel weg; bij 55% komt de voorpoot van
     de tafel boven de band uit. Staand toont het beeld zijn volle hoogte en doet deze
     waarde niets. */
  object-position: center 55%;
  display: block;
  /* Bewust linear: bij een ambient-beweging van 9s zou --ease-brand
     vrijwel alle beweging in de eerste seconde proppen */
  animation: heroRust 9s linear 1 forwards;
  transform-origin: center center;
}

/* Het beeld komt tot rust in plaats van te groeien */
@keyframes heroRust {
  from {
    transform: scale(1.045);
  }
  to {
    transform: scale(1);
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--overlay-hero);
}

@media (min-width: 1681px) {
  .hero {
    --hero-veerrand: clamp(0px, calc(var(--pad-x) - var(--pad-x-min)), 140px);
  }

  .hero-beeld,
  .hero-overlay {
    left: 50%;
    right: auto;
    width: min(100%, var(--maxw-hero-beeld));
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--hero-veerrand), #000 calc(100% - var(--hero-veerrand)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--hero-veerrand), #000 calc(100% - var(--hero-veerrand)), transparent 100%);
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 var(--pad-x) 96px;
  max-width: calc(var(--maxw-hero-tekst) + 2 * var(--pad-x));
}

.hero-label {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-label::before {
  content: "";
  width: 32px;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
}

.hero h1 {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: clamp(46px, 6.4vw, 88px);
  font-weight: 300;
  color: #ffffff;
  line-height: 1.04;
  letter-spacing: -1px;
  margin-bottom: 26px;
  /* Leesbaarheid op lichte beeldpartijen (portret-crops leggen de kop op het tafelblad):
     schaduw-idioom van de swipe-cue; tilt het gouden em-woord van 1,5:1 naar >=3:1 */
  text-shadow:
    0 1px 2px rgba(15, 7, 2, 0.45),
    0 2px 24px rgba(15, 7, 2, 0.55);
}

.hero h1 em {
  font-style: italic;
  color: var(--gold-hero);
}

/* Regelgewijs materialiseren — twee ademende groepen */
.hero-regel {
  display: block;
}

.hero-sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 520px;
  line-height: 1.8;
  margin-bottom: 40px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* "Sinds 1997" in het label + dealer-knop: alleen waar ze nodig zijn — op desktop
   dragen de band-kopregel resp. de nav-CTA die rol al */
.hero-label-1997 {
  display: none;
}

.hero-cta-dealer {
  display: none;
}

@media (max-width: 900px), (min-width: 901px) and (max-height: 780px) {
  .hero-label-1997 {
    display: inline;
  }
}

@media (max-width: 900px) {
  .hero-cta-dealer {
    display: inline-flex;
  }
}

/* Materialiseren: opacity + beweging + lichte blur */
.hero-anim {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(5px);
  animation: materialiseer 0.85s var(--ease-brand) forwards;
}

.hero-label.hero-anim {
  animation-delay: 0.25s;
}

.hero-regel-1 {
  animation-delay: 0.45s;
}

.hero-regel-2 {
  animation-delay: 0.6s;
}

.hero-sub.hero-anim {
  animation-delay: 0.8s;
}

.hero-actions.hero-anim {
  animation-delay: 0.95s;
}

@keyframes materialiseer {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Zodra de bezoeker scrolt (html.entree-af via site.js): choreografie zacht afronden —
   de transition laat lopende elementen in 0,35s naar eindstaat glijden (geen harde knal) */
.entree-af .hero-anim,
.entree-af .hero-scroll {
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 0.35s var(--ease-brand),
    transform 0.35s var(--ease-brand),
    filter 0.35s var(--ease-brand);
}

.hero-scroll {
  position: absolute;
  right: calc(var(--pad-x) - 12px);
  bottom: 88px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: materialiseer 0.85s var(--ease-brand) 1.6s forwards;
}

.hero-scroll span {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  writing-mode: vertical-rl;
}

.scroll-line {
  width: 1px;
  height: 50px;
  background: rgba(255, 255, 255, 0.55);
  position: relative;
  overflow: hidden;
}

.scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-hero);
  /* Ambient-uitzondering (net als de lineaire heroRust-zoom): --ease-brand is een
     interactiecurve die 90% van de sweep in 0,7s propt en in een oneindige loop als
     flits + stilstand leest. Linear: sweep ~1,4s + ~1,2s bewuste rust. */
  animation: scrollCue 2.6s linear infinite;
}

@keyframes scrollCue {
  0% {
    transform: translateY(-100%);
  }
  55% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(100%);
  }
}

/* ═══ USP-BALK ═══ */
.usp-balk-wrap {
  background: var(--sand-light);
  position: relative;
}

.usp-balk {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
  list-style: none;
}

.usp-item {
  padding: 40px 32px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.usp-item:last-child {
  border-right: none;
}

.usp-icon {
  color: var(--gold);
  width: 52px;
  height: 52px;
  background: rgba(var(--brown-rgb), 0.07);
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.usp-label {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brown-mid);
}

.usp-desc {
  font-size: 13px;
  color: var(--text);
  line-height: 1.65;
}

/* ═══ SECTIE-HEADERS (gedeeld patroon) ═══ */
.section-header {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 56px;
}

.section-header-rechts {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

/* ═══ COLLECTIE ═══ */
.collectie {
  padding: var(--space-section) var(--pad-x);
  background: var(--white);
}

.cat-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  list-style: none;
}

.cat-card {
  position: relative;
  overflow: hidden;
  background: var(--sand);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sharp);
  display: block;
  text-decoration: none;
  touch-action: manipulation;
}

.cat-item:first-child .cat-card {
  height: 100%;
  aspect-ratio: auto;
}

.cat-item:first-child {
  grid-column: 1;
  grid-row: span 2;
}

/* Weeskaart breed uitrekken */
.cat-item:not(:first-child):last-child:nth-child(even) {
  grid-column: 2 / span 2;
}

.cat-item:not(:first-child):last-child:nth-child(even) .cat-card {
  aspect-ratio: auto;
  height: 100%;
}

.cat-bg {
  position: absolute;
  inset: 0;
}

.cat-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.6s var(--ease-brand);
}

.cat-card:hover .cat-bg img {
  transform: scale(1.05);
}

.cat-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-kaart);
  transition: background 0.4s var(--ease-brand);
}

.cat-card:hover .cat-overlay {
  background: var(--overlay-kaart-hover);
}

.cat-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  transition: transform 0.35s var(--ease-brand);
}

.cat-card:hover .cat-info {
  transform: translateY(-4px);
}

.cat-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cat-subtitle {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  /* Het goud is klein en staat op een foto die bewust licht blijft. Een fijne halo in de
     merk-nachtkleur maakt de letters overal leesbaar zonder ook maar één pixel van de foto
     te dempen — het alternatief was de hele onderband verzwaren, en dat kostte juist de
     fotografie. Systeemregel op de klasse, geen ingreep per kaart. */
  text-shadow:
    0 1px 2px rgba(15, 7, 2, 0.95),
    0 0 8px rgba(15, 7, 2, 0.72);
}

.cat-name {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  /* Volgt de kaart tot aan de desktopmaat; daarboven blijft de letter gelijk. */
  font-size: clamp(22px, 1.1vw + 12px, 30.48px);
  font-weight: 300;
  color: #ffffff;
  letter-spacing: 0.5px;
}

/* De affordance van de kaart: een dunne verticale zetmarkering links van het tekstblok,
   die uitgroeit langs bijschrift en titel — het merkteken dat een zetter of een galerie bij
   een onderschrift plaatst. Dezelfde markering staat op de projectkaarten en op de
   projecttegels, zodat alle kaarten dezelfde taal spreken.

   Niet één egale haarlijn: een masker met onregelmatige stops laat de dichtheid over de
   lengte variëren en draagt tegelijk het uitvloeien aan het uiteinde, zodat de regel gezet
   oogt in plaats van getrokken. 1,5 px, want bij één pixel valt die variatie weg tegen het
   pixelraster en leest hij als een streepjeslijn.

   Statisch aanwezig als korte aanzet, zodat een aanraakscherm hem óók heeft — daar bestaat
   geen hover. Bij hover én focus groeit hij naar zijn volle hoogte en schuift het tekstblok
   6 px mee, hetzelfde 4-6 px-idioom dat de pijlen elders op de site gebruiken.

   De markering past binnen de 28 px binnenmarge die alle drie de tekstblokken al hebben, en
   raakt daarom positie noch padding aan: er verschuift niets aan de kaart zelf. Alleen
   .cat-text mist een positioneringscontext; de andere twee zijn al absoluut gepositioneerd.

   Groeit met transform in plaats van met breedte of hoogte: dat blijft op de compositor en
   dwingt geen herberekening van de opmaak per frame af. Gemeten over vijf hovers met tien
   kaarten in beeld: 31 layoutberekeningen tegen 219 voor een lijn die width animeert.

   Dit verving eerst de ronde tekstpijl (een Arial-glyph, geen merkvorm, die niet op
   toetsenbordfocus reageerde — zie docs/WEBSITE-HUB-MOBILE-DESKTOP-UX-AUDIT-2026-07.md
   par. 8) en daarna de liggende haarlijn onder de titel. */
.cat-text {
  position: relative;
}

.cat-text,
.project-kaart-content,
.proj-tegel-tekst {
  transform: translateX(0);
  transition: transform 0.34s var(--ease-brand);
}

.cat-text::before,
.project-kaart-content::before,
.proj-tegel-tekst::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 1.5px;
  background: var(--gold);
  /* Dezelfde donkere halo die de gouden bijschriften dragen: goud op een lichte
     plek in de foto haalt anders geen 3:1 tegen zijn omgeving. */
  box-shadow: 0 0 5px rgba(15, 7, 2, 0.85);
  opacity: 0.62;
  transform: scaleY(0.28);
  transition:
    transform 0.34s var(--ease-brand),
    opacity 0.34s var(--ease-brand);
}

/* Waar de aanzet in rust blijft staan bepaalt waar de markering naar wijst, en het masker
   volgt diezelfde richting. In .cat-text staat de titel onderaan (bijschrift erboven), dus
   daar groeit hij vanaf de onderkant en is hij onderaan het dichtst. In de tekstblokken van
   de projectkaarten staat de titel bovenaan, dus daar andersom. */
.cat-text::before {
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.66) 8%,
    rgba(0, 0, 0, 0.98) 17%,
    rgba(0, 0, 0, 0.72) 27%,
    rgba(0, 0, 0, 0.94) 36%,
    rgba(0, 0, 0, 0.58) 47%,
    rgba(0, 0, 0, 0.9) 58%,
    rgba(0, 0, 0, 0.7) 69%,
    rgba(0, 0, 0, 0.86) 79%,
    rgba(0, 0, 0, 0.44) 89%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.66) 8%,
    rgba(0, 0, 0, 0.98) 17%,
    rgba(0, 0, 0, 0.72) 27%,
    rgba(0, 0, 0, 0.94) 36%,
    rgba(0, 0, 0, 0.58) 47%,
    rgba(0, 0, 0, 0.9) 58%,
    rgba(0, 0, 0, 0.7) 69%,
    rgba(0, 0, 0, 0.86) 79%,
    rgba(0, 0, 0, 0.44) 89%,
    rgba(0, 0, 0, 0) 100%
  );
}

.project-kaart-content::before,
.proj-tegel-tekst::before {
  transform-origin: top center;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.66) 8%,
    rgba(0, 0, 0, 0.98) 17%,
    rgba(0, 0, 0, 0.72) 27%,
    rgba(0, 0, 0, 0.94) 36%,
    rgba(0, 0, 0, 0.58) 47%,
    rgba(0, 0, 0, 0.9) 58%,
    rgba(0, 0, 0, 0.7) 69%,
    rgba(0, 0, 0, 0.86) 79%,
    rgba(0, 0, 0, 0.44) 89%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.66) 8%,
    rgba(0, 0, 0, 0.98) 17%,
    rgba(0, 0, 0, 0.72) 27%,
    rgba(0, 0, 0, 0.94) 36%,
    rgba(0, 0, 0, 0.58) 47%,
    rgba(0, 0, 0, 0.9) 58%,
    rgba(0, 0, 0, 0.7) 69%,
    rgba(0, 0, 0, 0.86) 79%,
    rgba(0, 0, 0, 0.44) 89%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* De markering staat halverwege de binnenmarge: 14 px van de kaartrand, 14 px van de tekst.
   .cat-text en .proj-tegel-tekst beginnen zelf op 28 px en tellen dus terug;
   .project-kaart-content loopt van rand tot rand en telt vooruit. */
.cat-text::before,
.proj-tegel-tekst::before {
  left: -14px;
}

.project-kaart-content::before {
  left: 14px;
}

/* De projecttegels springen op smalle schermen in van 28 naar 20 px; zonder deze regel zou
   de markering daar tegen de fotorand komen te liggen. */
@media (max-width: 640px) {
  .proj-tegel-tekst::before {
    left: -10px;
  }
}

/* Focus haalt dezelfde eindstand als hover — anders krijgt het toetsenbord minder
   terugkoppeling dan de muis. */
.cat-card:focus-visible .cat-text,
.project-kaart:focus-within .project-kaart-content,
.proj-tegel:focus-visible .proj-tegel-tekst {
  transform: translateX(6px);
}

.cat-card:focus-visible .cat-text::before,
.project-kaart:focus-within .project-kaart-content::before,
.proj-tegel:focus-visible .proj-tegel-tekst::before {
  transform: scaleY(1);
  opacity: 1;
}

/* Aanraakscherm: daar bestaat geen hover, dus is de ruststand de énige stand. Een korte,
   halfdoorzichtige aanzet valt tegen een lichte foto weg en dan heeft de kaart geen zichtbare
   uitnodiging meer. Daarom staat de markering daar permanent op volle hoogte — dezelfde
   behandeling die de uitnodiging op de projectkaarten al krijgt. */
@media (hover: none) {
  .cat-text::before,
  .project-kaart-content::before,
  .proj-tegel-tekst::before {
    transform: scaleY(1);
    /* Vol: er is hier geen hoverstand om zich van te onderscheiden, en de
       markering moet leesbaar blijven boven een lichte foto. */
    opacity: 1;
  }
}

/* Hover alleen waar hover bestaat: op een aanraakscherm zou :hover blijven hangen na een tik,
   en dan staat de markering permanent op vol zonder dat er iets gebeurd is. */
@media (hover: hover) and (pointer: fine) {
  .cat-card:hover .cat-text,
  .project-kaart:hover .project-kaart-content,
  .proj-tegel:hover .proj-tegel-tekst {
    transform: translateX(6px);
  }

  .cat-card:hover .cat-text::before,
  .project-kaart:hover .project-kaart-content::before,
  .proj-tegel:hover .proj-tegel-tekst::before {
    transform: scaleY(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cat-text,
  .cat-text::before,
  .project-kaart-content,
  .project-kaart-content::before,
  .proj-tegel-tekst,
  .proj-tegel-tekst::before {
    transition: none;
  }
}

/* Swipe-affordances en deck-knoppen: uitsluitend mobiel zichtbaar */
.swipe-dots,
.swipe-hint,
.deck-next {
  display: none;
}

/* ═══ ROUTE-BAND — Van bron tot showroom (scroll-gevulde lijn) ═══ */
.route-band {
  padding: var(--space-section) var(--pad-x);
  background: var(--brown-dark);
  position: relative;
  overflow: hidden;
}

.route-band .section-header {
  margin-bottom: 72px;
}

.route-stops-wrap {
  position: relative;
}

.route-stops {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  list-style: none;
}

/* De lijn: vult zich met goud naarmate de bezoeker scrolt */
.route-lijn {
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.route-lijn-vul {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: left center;
}

/* De vul-animatie draait op scroll-JS; zonder JS toont de lijn vol goud */
.js .route-lijn-vul {
  transform: scaleX(var(--route-vul, 0));
}

html:not(.js) .route-stop::before {
  background: var(--gold);
  border-color: var(--gold);
}

.route-stop {
  position: relative;
  padding-top: 36px;
}

.route-stop::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(var(--gold-rgb), 0.5);
  background: var(--brown-dark);
  transition:
    background 0.4s var(--ease-brand),
    border-color 0.4s var(--ease-brand);
}

.route-stop.bereikt::before {
  background: var(--gold);
  border-color: var(--gold);
}

.route-stop-label {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.route-stop-titel {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 12px;
}

.route-stop-tekst {
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.72);
  max-width: 36ch;
}

.route-band-voet {
  margin-top: 64px;
  display: flex;
  justify-content: center;
}

/* ═══ SELECTIE ═══ */
.selectie {
  background: var(--sand);
  padding: var(--space-section) var(--pad-x);
}

.sel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
}

.sel-kaart {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sel-link {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}

.sel-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: var(--radius-sharp);
}

.sel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s var(--ease-brand);
}

.sel-kaart:hover .sel-img img {
  transform: scale(1.03);
}

/* Touch/klik: minieme druk-feedback bij indrukken (zelfde 80ms-idioom als de knoppen) */
.sel-link:active .sel-img img {
  transform: scale(0.99);
  transition-duration: 0.08s;
}

.cat-card:active .cat-bg img {
  transform: scale(0.99);
  transition-duration: 0.08s;
}

/* Hover-affordance: warme scrim + "Bekijk product" schuift omhoog */
.sel-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 26px;
  background: var(--overlay-kaart);
  opacity: 0;
  transition: opacity 0.45s var(--ease-brand);
  pointer-events: none;
}

.sel-hover-tekst {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #ffffff;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.55);
  transform: translateY(14px);
  transition: transform 0.5s var(--ease-brand);
}

.sel-hover-pijl {
  transition: transform 0.5s var(--ease-brand);
}

.sel-kaart:hover .sel-hover,
.sel-link:focus-visible .sel-hover {
  opacity: 1;
}

.sel-kaart:hover .sel-hover-tekst,
.sel-link:focus-visible .sel-hover-tekst {
  transform: translateY(0);
}

.sel-kaart:hover .sel-hover-pijl {
  transform: translateX(4px);
}

/* Touch: geen hover — toon de affordance blijvend maar rustig */
@media (hover: none) {
  .sel-hover {
    opacity: 1;
    background: linear-gradient(to top, rgba(15, 7, 2, 0.55) 0%, transparent 45%);
  }

  .sel-hover-tekst {
    transform: none;
    font-size: 10px;
  }
}

.sel-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-nav);
  margin-bottom: 8px;
}

.badge-nieuw {
  background: var(--brown);
  color: #ffffff;
}

.badge-uitgelicht {
  border: 1px solid var(--brown);
  color: var(--brown-mid);
}

.badge-unica {
  border: 1px solid var(--gold);
  color: var(--brown-mid);
}

/* Label voor een artikel dat per stuk geprijsd wordt */
.badge-op-aanvraag {
  background: var(--sand-light);
  color: var(--text-light);
}

.sel-naam {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 21px;
  font-weight: 300;
  color: var(--text);
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.sel-meta {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text-light);
  text-transform: uppercase;
}

/* ═══ VOOR WIE — drie B2B-segmenten ═══ */
.voorwie {
  background: var(--white);
  /* Sectie-lokaal iets compacter dan --space-section (104px) zodat kop + 3 kaarten +
     copy als één blok op een laptopscherm passen; mobiel valt onder de @media-override. */
  padding: 88px var(--pad-x);
}

.voorwie-kop {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}

.voorwie-kop .section-intro {
  margin: 0 auto;
}

.voorwie-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
}

/* ═══ VOOR WIE — editorial kaart: titel op het beeld + diagonale veeg-onthulling ═══
   Beeld 1 (rust) ligt met een diagonale mask bóven beeld 2;
   op hover/focus veegt beeld 1 weg en onthult beeld 2 eronder. Liggend 3/2-formaat
   zodat de drie kaarten als één horizontale band lezen (niet als torens). */
.segment-kaart {
  background: var(--sand-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sharp);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Beeldvenster: twee gestapelde foto's — liggend 3/2 desktop, 4/3 op mobiel */
.segment-beeld {
  position: relative;
  width: 100%;
  aspect-ratio: var(--seg-ratio, 3 / 2);
  overflow: hidden;
  flex-shrink: 0;
  /* Het HELE beeld is het swipe-/tikvlak (touch). pan-y houdt verticaal scrollen native;
     horizontaal is voor de swipe. Geen iOS-callout/selectie die het gebaar kaapt. */
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.seg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Beelden vangen geen touches: elke aanraking gaat naar .segment-beeld, zodat je op het
     hele beeld kunt swipen (i.p.v. dat de <img> het gebaar op delen opslokt op iOS). */
  pointer-events: none;
  -webkit-user-drag: none;
  transition:
    transform 0.7s var(--ease-brand),
    opacity 0.6s var(--ease-brand);
}

/* Beeld 2 = onderlaag, altijd zichtbaar onder de mask van beeld 1 */
.seg-img-2 {
  opacity: 1;
}

/* Beeld 1 ligt bovenop met een diagonale mask; in rust volledig gevuld, hover veegt weg */
.seg-img-1 {
  z-index: 1; /* boven beeld 2 zodat de veeg beeld 2 eronder onthult */
  -webkit-mask-image: linear-gradient(105deg, #000 0%, #000 42%, transparent 66%);
  mask-image: linear-gradient(105deg, #000 0%, #000 42%, transparent 66%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-position: 0% 0;
  mask-position: 0% 0;
  transition:
    transform 0.7s var(--ease-brand),
    opacity 0.6s var(--ease-brand),
    -webkit-mask-position var(--veeg-duur, 0.85s) var(--ease-brand),
    mask-position var(--veeg-duur, 0.85s) var(--ease-brand);
}

/* Handmatige wissel (tik/swipe) reageert sneller dan de cinematische auto-veeg:
   0,45s zit binnen het respons-budget voor een gebaar, de auto blijft filmisch */
.segment-kaart.is-handmatig {
  --veeg-duur: 0.45s;
}

/* Desktop-veeg alleen op échte hover-apparaten: op touch zet een tik anders een
   "sticky :hover" die het beeld op de eindstaat vastpint en de tik/swipe-toggle
   overrulet — anders reageert het vegen niet. */
@media (hover: hover) {
  .segment-kaart:hover .seg-img-1,
  .segment-kaart:focus-within .seg-img-1 {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }

  .segment-kaart:hover .seg-img,
  .segment-kaart:focus-within .seg-img {
    transform: scale(1.03);
  }
}

/* Fallback zonder mask-support: gewone opacity-crossfade */
@supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
  .seg-img-2 {
    opacity: 0;
  }

  @media (hover: hover) {
    .segment-kaart:hover .seg-img-1,
    .segment-kaart:focus-within .seg-img-1 {
      opacity: 0;
    }
    .segment-kaart:hover .seg-img-2,
    .segment-kaart:focus-within .seg-img-2 {
      opacity: 1;
    }
  }
}

/* Donkere gradient-voet op het beeld, draagt de titel */
.segment-beeld-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--overlay-kaart);
  opacity: 1;
  transition: background 0.4s var(--ease-brand);
  pointer-events: none;
}

@media (hover: hover) {
  .segment-kaart:hover .segment-beeld-overlay,
  .segment-kaart:focus-within .segment-beeld-overlay {
    background: var(--overlay-kaart-hover);
  }
}

/* Titel op het beeld (decoratief; toegankelijke kop = de visueel-verborgen h3 in de voet) */
.segment-op-beeld {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 26px 28px;
  transition: transform 0.5s var(--ease-brand);
  pointer-events: none;
}

@media (hover: hover) {
  .segment-kaart:hover .segment-op-beeld,
  .segment-kaart:focus-within .segment-op-beeld {
    transform: translateY(-4px);
  }
}

.segment-op-nr {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  line-height: 1;
  color: var(--gold-hero);
}

.segment-op-titel {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.1;
  color: #ffffff;
}

/* Voet op zand: korte beschrijving + link (titel staat op het beeld) */
.segment-voet {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 28px 22px;
}

/* De zichtbare titel staat op het beeld (aria-hidden). Deze h3 blijft als toegankelijke
   kop per kaart bestaan, maar visueel verborgen (sr-only). */
.segment-titel {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Decoratief voet-nummer/label niet gebruikt in deze opzet */
.segment-index,
.segment-index-label {
  display: none;
}

.segment-tekst {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-light);
  margin-bottom: 20px;
  flex: 1;
}

/* Actieregel: een haarlijn sluit de tekst af, daaronder het woord links en de pijl rechts */
.segment-actie {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 16px;
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--brown-mid);
  text-decoration: none;
}

.segment-actie-lijn {
  grid-column: 1 / -1;
  position: relative;
  height: 1px;
  margin-bottom: 16px;
  background: var(--border);
}

/* De lijn tekent zich van links naar rechts, in de richting van de beeldveeg erboven */
.segment-actie-lijn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brown);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--ease-brand);
}

.segment-actie .ico {
  transition: transform 0.35s var(--ease-brand);
}

/* Muis: de hele kaart is het klikvlak, beeld inbegrepen (gestrekte link) */
@media (hover: hover) and (pointer: fine) {
  .segment-kaart {
    position: relative;
  }

  .segment-actie::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
  }

  .segment-kaart:hover .segment-actie-lijn::after,
  .segment-kaart:focus-within .segment-actie-lijn::after {
    transform: scaleX(1);
  }

  .segment-kaart:hover .segment-actie .ico,
  .segment-kaart:focus-within .segment-actie .ico {
    transform: translateX(4px);
  }

  /* Focusring om de hele kaart in plaats van alleen om de regel */
  .segment-kaart:has(.segment-actie:focus-visible) {
    outline: 2px solid var(--brown);
    outline-offset: 3px;
  }

  .segment-kaart:has(.segment-actie:focus-visible) .segment-actie {
    outline: none;
  }
}

/* Touch: geen hover, dus de ruststand draagt de uitnodiging. De lijn staat getekend en de
   hele tekstvoet is het tikvlak; het beeld blijft vrij voor tikken en vegen. */
@media not all and (hover: hover) and (pointer: fine) {
  .segment-voet {
    position: relative;
  }

  .segment-actie::before {
    content: "";
    position: absolute;
    inset: 0;
  }

  .segment-actie-lijn::after {
    transform: none;
  }
}

.segment-kaart .segment-actie:active .ico {
  transform: translateX(7px);
  transition-duration: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
  .segment-actie-lijn::after,
  .segment-actie .ico {
    transition: none;
  }
}

/* Voortgangs-indicator (2 haarlijn-segmenten): standaard verborgen; alleen op touch getoond */
.segment-voortgang {
  display: none;
}

/* ── Touch (telefoon + tablet): er is geen hover, dus de scroll onthult. site.js voegt
   .is-onthuld toe zodra de kaart centraal in beeld komt → dezelfde diagonale veeg speelt
   één keer af met de bestaande 0.85s var(--ease-brand). De klant kan ook swipen (links =
   onthul, rechts = terug) of tikken; het balkje toont op welk beeld je zit. Desktop blijft
   puur op :hover en toont het balkje niet. ── */
@media (hover: none) {
  .segment-kaart.is-onthuld .seg-img-1 {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }

  .segment-kaart.is-onthuld .seg-img {
    transform: scale(1.03);
  }

  .segment-kaart.is-onthuld .segment-beeld-overlay {
    background: var(--overlay-kaart-hover);
  }

  .segment-kaart.is-onthuld .segment-op-beeld {
    transform: translateY(-4px);
  }

  @supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
    .segment-kaart.is-onthuld .seg-img-1 {
      opacity: 0;
    }
    .segment-kaart.is-onthuld .seg-img-2 {
      opacity: 1;
    }
  }

  /* Indicator: 2 gouden haarlijn-segmenten (hero-usp-voortgang-idioom, op de donkere
     beeldvoet). Segment 1 blijft gevuld; segment 2 vult mee met de veeg — cumulatief,
     rijmt met de gouden route-vullijn. Beweegt vanzelf mee met auto, swipe én tik. */
  .segment-voortgang {
    display: flex;
    gap: 6px;
    position: absolute;
    right: 28px;
    bottom: 24px;
    z-index: 3;
    pointer-events: none;
  }

  .segment-voortgang i {
    position: relative;
    width: 18px;
    height: 2px;
    background: rgba(255, 255, 255, 0.28);
    overflow: hidden;
  }

  .segment-voortgang i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gold);
    transform: scaleX(var(--vul, 0));
    transform-origin: left;
    transition: transform var(--veeg-duur, 0.85s) var(--ease-brand);
  }

  .segment-voortgang i:first-child {
    --vul: 1;
  }

  .segment-kaart.is-onthuld .segment-voortgang i:last-child {
    --vul: 1;
  }
}

/* ═══ PROJECTEN ═══ */
.projecten {
  background: var(--brown-dark);
  padding: var(--space-section) var(--pad-x);
}

.project-kaarten {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  height: 500px;
  list-style: none;
}

.project-kaart-groot {
  grid-row: 1 / span 2;
}

.project-kaart {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sharp);
}

.project-kaart-img {
  position: absolute;
  inset: 0;
}

.project-kaart-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-brand);
}

.project-kaart:hover .project-kaart-img img {
  transform: scale(1.02);
}

.project-kaart-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-kaart);
  transition: background 0.4s var(--ease-brand);
}

.project-kaart:hover .project-kaart-overlay {
  background: var(--overlay-kaart-hover);
}

.project-kaart-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 28px 28px;
  z-index: 2;
}

.project-land {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

.project-naam {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 24px;
  font-weight: 300;
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: 4px;
}

.project-kaart-groot .project-naam {
  font-size: 40px;
  margin-bottom: 6px;
}

.project-type {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.5px;
}

/* Klikbare kaart: gestrekte link boven de lagen, onder de deck-knop (mobiel) */
.project-kaart-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}
/* Focusring binnen de kaart tekenen — overflow:hidden knipt 'm anders weg */
.project-kaart-link:focus-visible {
  outline-offset: -3px;
}
.project-kaart:focus-within .project-kaart-img img {
  transform: scale(1.02);
}
.project-kaart:focus-within .project-kaart-overlay {
  background: var(--overlay-kaart-hover);
}
/* Micro-uitnodiging — zelfde idioom als .sel-hover-tekst (Selectie) */
.project-kaart-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #ffffff;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.55);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.45s var(--ease-brand),
    transform 0.5s var(--ease-brand);
}
.project-kaart-cta-pijl {
  transition: transform 0.5s var(--ease-brand);
}
.project-kaart:hover .project-kaart-cta,
.project-kaart:focus-within .project-kaart-cta {
  opacity: 1;
  transform: translateY(0);
}
.project-kaart:hover .project-kaart-cta-pijl,
.project-kaart:focus-within .project-kaart-cta-pijl {
  transform: translateX(4px);
}
/* Touch: geen hover — uitnodiging blijvend zichtbaar (zelfde als Selectie) */
@media (hover: none) {
  .project-kaart-cta {
    opacity: 1;
    transform: none;
  }
}

/* ═══ SHOWROOMS — lichte sectie, foto's als donker accent ═══ */
.showroom {
  background: var(--sand-light);
  padding: var(--space-section) var(--pad-x);
  position: relative;
}

/* ═══ VESTIGINGEN — nachtkaart (gestippeld, donker) + reveal + stille kolom ═══
   Zelfde stip-idioom als de wereldkaart op ons-verhaal. Kaart pre-gegenereerd
   (vestigingen-nachtkaart-gen.mjs), interactie in site.js. */
.nacht {
  position: relative;
  /* Begrenst blend-/filterberekeningen tot de band zelf; visueel identiek
     (eigen dekkende achtergrond), scheelt compositing-werk bij scrollen. */
  isolation: isolate;
  margin: 64px calc(-1 * var(--pad-x)) 0;
  padding: 64px var(--pad-x);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--sand-rgb), 0.045), transparent 60%),
    radial-gradient(50% 60% at 32% 52%, rgba(var(--gold-rgb), 0.05), transparent 70%),
    radial-gradient(140% 120% at 50% 50%, transparent 58%, rgba(10, 6, 2, 0.3) 100%),
    var(--hero-bg);
}
.nacht::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  /* Grain zonder blend-modus: een blend leest elke frame de achtergrond terug en
     maakt scrollen door de band meetbaar traag op Safari-engines; op dit donkere
     vlak is normaal op 0.03 tot op één kanaalwaarde gelijk aan soft-light op 0.05. */
  opacity: 0.03;
  pointer-events: none;
}
.nacht-rij { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 480px) 1fr; gap: 72px; align-items: center; }

.vk-wrap { position: relative; width: 100%; }
.vk-wrap > svg { display: block; width: 100%; height: auto; }
/* Vooraf gebakken stippenveld (incl. randvervaging). Op aanraakschermen vervangt
   dit beeld de live getekende stippen: één gecachete afbeelding scrollt zonder
   reken­werk mee, waar het levende veld elke beeldwissel opnieuw gerasterd werd.
   Labels, merktekens en de openingsstatus blijven de losse laag erboven. */
.vk-basis { display: none; position: absolute; inset: 0; width: 100%; height: auto; pointer-events: none; }
@media (hover: none) {
  .vk-basis { display: block; }
  .vk-svg > g[mask] { display: none; }
  /* Alleen de kaart-svg boven het beeld tillen; de lantaarn is óók een svg in
     dezelfde wrap en moet absoluut blijven, anders duwt hij als onzichtbaar
     blok van kaarthoogte de kolom omlaag. Op aanraakschermen kan hij helemaal
     uit (het is een muislicht). */
  svg.vk-svg { position: relative; }
  /* Sterker dan .vk-wrap > svg (die zet display: block met 0,1,1). */
  .vk-wrap > .lantaarn { display: none; }
}
.lantaarn {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s var(--ease-brand);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(190px circle at var(--lx, -500px) var(--ly, -500px), #000 18%, rgba(0, 0, 0, 0.55) 46%, transparent 72%);
  mask-image: radial-gradient(190px circle at var(--lx, -500px) var(--ly, -500px), #000 18%, rgba(0, 0, 0, 0.55) 46%, transparent 72%);
}
.vk-wrap.heeft-licht .lantaarn { opacity: 1; }

.vk-svg text { font-family: "Jost", Arial, sans-serif; text-transform: uppercase; paint-order: stroke; stroke: var(--hero-bg); stroke-width: 5px; stroke-linejoin: round; }
.vk-landlabel { font-size: 16px; letter-spacing: 5.5px; fill: rgba(var(--sand-rgb), 0.5); }
/* Landnamen faden per stuk in, 90 ms na elkaar; de opacity staat op de losse
   tekens, niet op de groep. */
.vk-landgroep text { opacity: 0; transition: opacity 0.55s var(--ease-brand); }
.vk-landgroep text:nth-of-type(1) { transition-delay: 0.28s; }
.vk-landgroep text:nth-of-type(2) { transition-delay: 0.37s; }
.vk-landgroep text:nth-of-type(3) { transition-delay: 0.46s; }
.is-af .vk-landgroep text { opacity: 1; }
html.geen-js .vk-landgroep text { opacity: 1; }
.vk-gradlabel { font-size: 9px; letter-spacing: 2px; fill: rgba(var(--sand-rgb), 0.26); }
/* Kaart-pin: cartografisch label (Jost caps), bewust ónder de Cormorant-displaynamen
   in rang — kleiner, lichter, een tint warmer dan de fotokaart-koppen */
.vk-vestnaam { font-size: 15px; font-weight: 500; letter-spacing: 2.5px; fill: var(--sand); }
.vk-veststatus { font-size: 12px; font-weight: 400; letter-spacing: 1.8px; fill: rgba(var(--sand-rgb), 0.66); }
.vk-veststatus.is-open { fill: var(--gold-hero); }
.vk-veststatus .stipje { fill: rgba(var(--sand-rgb), 0.35); }
.vk-veststatus.is-open .stipje { fill: var(--gold-hero); }
.vk-grad { stroke: var(--sand); opacity: 0.05; stroke-width: 0.5; stroke-dasharray: 1 6; }
.vk-kust1 { fill: none; stroke: var(--gold); stroke-width: 3; opacity: 0.05; stroke-linejoin: round; }
.vk-kust2 { fill: none; stroke: var(--gold); stroke-width: 0.9; opacity: 0.15; stroke-dasharray: 2 3; stroke-linejoin: round; }
/* Landsgrens: leesbaar goud streepwerk — de drie landen scheiden zich duidelijk */
.vk-grens { fill: none; stroke: var(--gold); stroke-width: 0.9; opacity: 0.3; stroke-dasharray: 3 4; stroke-linecap: round; }
.vk-stip { fill: none; stroke-linecap: round; }

.vk-vest { cursor: pointer; }
.vk-vest .hof { transition: opacity 0.4s var(--ease-brand), transform 0.4s var(--ease-brand); transform-box: fill-box; transform-origin: center; opacity: 0.85; }
/* De zetel: een gezette gouden ring om de luwte — het merk zit, het smeert niet */
.vk-vest .zetel { fill: none; stroke: var(--gold); stroke-width: 0.7; opacity: 0.4; transition: opacity 0.4s var(--ease-brand); }
/* Het beeldmerk als vestigingspunt — zelfde merk-chip als op de route-band */
.vk-vest .merk { transform-box: fill-box; transform-origin: center; transition: transform 0.45s var(--ease-brand); filter: drop-shadow(0 0 5px rgba(var(--gold-rgb), 0.55)) drop-shadow(0 0 10px rgba(var(--gold-rgb), 0.25)); }
/* Delay als lijst: alleen de opacity wacht op de onthulling; de transform
   (hover-verschuiving) reageert direct. */
.vk-vest .vk-vestlabel { transform-box: fill-box; transform-origin: center; transition: opacity 0.55s var(--ease-brand) 0.66s, transform 0.4s var(--ease-brand); }
.vk-vest[data-vest="venlo"] .vk-vestlabel { transition-delay: 0.78s, 0s; }
/* Hover: alleen het licht reageert — hof bloeit, zetel licht op; het merk blijft stil
   (geen geometrie-boop = terughoudend). De aura + sweep + reveal doen het theater. */
.vk-vest.is-actief .hof, .vk-vest:hover .hof, .vk-vest:focus-visible .hof { opacity: 1; transform: scale(1.14); }
.vk-vest.is-actief .zetel, .vk-vest:hover .zetel, .vk-vest:focus-visible .zetel { opacity: 0.7; }

/* ═══ Premium hover-laag (HTML boven de SVG, op de zetel gepositioneerd) ═══ */
@property --onthul { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.vk-punt { position: absolute; width: 0; height: 0; z-index: 3; pointer-events: none; }
@media (hover: none) { .vk-punt { display: none; } }
/* Ademende aura: zachte gouden gloed die op hover opkomt en ademt — geen harde ring */
.vk-aura { position: absolute; left: 0; top: 0; width: 66px; height: 66px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(var(--gold-rgb), 0.42), transparent 66%); filter: blur(6px); opacity: 0; transition: opacity 0.5s var(--ease-brand); }
.vk-punt.is-actief .vk-aura { opacity: 0.9; animation: vkAdem 2.6s ease-in-out infinite alternate; }
@keyframes vkAdem { from { transform: translate(-50%, -50%) scale(0.92); } to { transform: translate(-50%, -50%) scale(1.08); } }
/* Conic light-sweep: één gouden boog die om de zetel graast — licht langs messing */
.vk-sweep { position: absolute; left: 0; top: 0; width: 48px; height: 48px; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; transition: opacity 0.5s var(--ease-brand);
  background: conic-gradient(from var(--sweep), transparent 0deg, rgba(var(--gold-rgb), 0) 14deg, var(--gold-hero) 42deg, rgba(var(--gold-rgb), 0) 70deg, transparent 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 61%, #000 72%, transparent 75%);
  mask: radial-gradient(closest-side, transparent 58%, #000 61%, #000 72%, transparent 75%); }
.vk-punt.is-actief .vk-sweep { opacity: 0.95; animation: vkSweep 4.6s linear infinite; }
@keyframes vkSweep { to { --sweep: 360deg; } }
/* De reveal: een staand pandpaneel dat uit de zetel omhoog ontwikkelt (mist-fade) */
.vk-tether { position: absolute; left: 0; bottom: 0; width: 1px; height: 15px; transform: translateX(-50%); background: linear-gradient(to top, rgba(var(--gold-rgb), 0.75), rgba(var(--gold-rgb), 0)); opacity: 0; transition: opacity 0.35s var(--ease-brand); }
.vk-punt.is-actief .vk-tether { opacity: 1; }
.vk-paneel { position: absolute; left: 0; bottom: 15px; width: 150px; height: 186px; transform: translateX(-50%) translateY(9px); border-radius: var(--radius-nav); background: var(--hero-bg); overflow: hidden; opacity: 0; box-shadow: 0 26px 50px -16px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(var(--gold-rgb), 0.09), 0 4px 14px rgba(var(--gold-rgb), 0.07); transition: opacity 0.28s var(--ease-brand), transform 0.6s var(--ease-brand); }
/* De foto ontwikkelt van bijna-monochroom-donker naar een warm-gegrade film-still —
   nooit de rauwe daglichtfoto: sepia neutraliseert de blauwe lucht, alles op één warme as */
.vk-paneel .foto { position: absolute; inset: 0; z-index: 1; background-size: cover; --onthul: 0%;
  filter: brightness(0.36) contrast(1.02) saturate(0.18) sepia(0.55) hue-rotate(-10deg);
  -webkit-mask-image: radial-gradient(135% 130% at 50% 100%, #000 38%, transparent 74%);
  mask-image: radial-gradient(135% 130% at 50% 100%, #000 38%, transparent 74%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center bottom; mask-position: center bottom;
  -webkit-mask-size: var(--onthul) var(--onthul); mask-size: var(--onthul) var(--onthul);
  transition: --onthul 0.62s var(--ease-brand) 0.06s, filter 0.62s var(--ease-brand) 0.06s; }
/* Warme gouden bloei op de lucht-regio (soft-light) */
.vk-paneel .warm { position: absolute; inset: 0; z-index: 2; background: radial-gradient(115% 72% at 50% 0%, rgba(var(--gold-rgb), 0.30), transparent 60%); mix-blend-mode: soft-light; opacity: 0; transition: opacity 0.6s var(--ease-brand) 0.1s; }
/* Bruine schaduw-duotone (multiply) — trouwt de darks aan het bandvlak */
.vk-paneel .grade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.12) 0%, transparent 34%, rgba(var(--brown-rgb), 0.34) 100%); mix-blend-mode: multiply; opacity: 0; transition: opacity 0.6s var(--ease-brand) 0.1s; }
.vk-paneel::after { content: ""; position: absolute; inset: 0; z-index: 3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; opacity: 0.05; mix-blend-mode: soft-light; pointer-events: none; }
/* Passe-partout-hairline + inner-vignet + bottom-scrim — de randen smelten in het paneel */
.vk-paneel::before { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  background: linear-gradient(to top, rgba(9, 5, 2, 0.94) 0%, rgba(9, 5, 2, 0.38) 20%, transparent 44%);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.16), inset 0 0 22px 8px rgba(8, 5, 2, 0.62); }
/* Verlichte messing-onderbalk die aan de uiteinden uittapert */
.vk-paneel .rand { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.85) 20%, var(--gold-hero) 50%, rgba(var(--gold-rgb), 0.85) 80%, transparent); box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.45); }
/* Coördinaat-plaatje: gallery/film-plate onderin (callback naar het 52° N-label) */
.vk-bijschrift { position: absolute; left: 0; right: 0; bottom: 7px; z-index: 6; text-align: center; font-family: "Jost", "Jost Fallback", sans-serif; font-size: 8px; font-weight: 500; letter-spacing: 2.3px; text-transform: uppercase; color: var(--gold-hero); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); opacity: 0; transition: opacity 0.5s var(--ease-brand) 0.18s; pointer-events: none; }
.vk-punt.is-actief .vk-paneel { opacity: 1; transform: translateX(-50%) translateY(0); }
.vk-punt.is-actief .vk-paneel .foto { --onthul: 190%; filter: brightness(0.74) contrast(1.06) saturate(0.42) sepia(0.32) hue-rotate(-10deg); }
.vk-punt.is-actief .vk-paneel .warm { opacity: 1; }
.vk-punt.is-actief .vk-paneel .grade { opacity: 0.9; }
.vk-punt.is-actief .vk-bijschrift { opacity: 0.9; }
.vk-vest.is-actief .vk-vestnaam, .vk-vest:hover .vk-vestnaam, .vk-vest:focus-visible .vk-vestnaam { fill: var(--sand-light); }
.vk-vest.is-actief .vk-vestlabel, .vk-vest:hover .vk-vestlabel, .vk-vest:focus-visible .vk-vestlabel { transform: translateY(-2px); }
.vk-vest:focus-visible { outline: none; }
/* De ring eindigt (fill-mode forwards) onzichtbaar op 3,2× schaal; pointer-events
   uit houdt dat vlak buiten de hit-test van het vestigingspunt. */
.vk-puls { fill: none; stroke: var(--gold-hero); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
/* Eén ping per vestiging, vlak vóór het bijbehorende naamlabel; daarna staat de
   kaart stil. */
.is-af .vk-puls { animation: vkPuls 1.6s ease-out 1 forwards; }
.is-af .vk-puls.p1 { animation-delay: 0.6s; }
.is-af .vk-puls.p2 { animation-delay: 0.72s; }
@keyframes vkPuls { 0% { opacity: 0.5; transform: scale(0.4); } 100% { opacity: 0; transform: scale(3.2); } }

/* Basislaag van het onthul-masker: de stippenkaart ligt gedimd in de nacht
   (maskerluminantie, geen merkkleur) zodat het vlak vóór de bloei nooit leeg is;
   de cirkels brengen het volle licht. De randen blijven oplossen via het
   omliggende rand-masker. */
#onthul > rect { fill: #3f3f3f; }
/* Doelstraal dekt de verste hoek van het 500×510-tekenvlak (≈476 vanaf beide
   kernen); wordt het tekenvlak groter, dan groeit deze waarde mee. */
.vk-onthul circle { r: 0; transition: r 1.2s var(--ease-brand) 0.12s; }
.is-af .vk-onthul circle { r: 560px; }
.is-af .vk-onthul circle.c2 { transition-delay: 0.28s; }
/* Na de bloei staat het masker volledig open en doet het visueel niets meer;
   loskoppelen scheelt maskerwerk bij elke scrollstap. */
.nacht.is-klaar .vk-svg g[mask*="onthul"] { mask: none; }
.vk-vestlabel { opacity: 0; }
.is-af .vk-vestlabel { opacity: 1; }

/* ── De stille kolom: spreuk, som, twee poortregels ──
   De kolom volgt het site-brede reveal-systeem (klasse "reveal" in de HTML):
   elk element materialiseert wanneer het zélf in beeld komt, met de vaste
   stagger — hetzelfde binnenkomen als elke andere sectie. */
.geul-spreuk { font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif; font-weight: 300; font-style: italic; font-size: clamp(26px, 3vw, 34px); line-height: 1.25; color: var(--sand-light); max-width: 17ch; margin-bottom: 18px; }
.geul-som { display: flex; align-items: center; gap: 12px; font-size: 10.5px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: rgba(var(--sand-rgb), 0.6); margin-bottom: 44px; }
.som-lijn { width: 32px; height: 1px; background: var(--gold); flex-shrink: 0; }
/* De somlijn trekt uit zodra de somregel verschijnt — zelfde maat (32px), duur en
   vertraging als de hairline onder de sectielabels. Zonder JS staat hij vol. */
.js .geul-som .som-lijn { width: 0; transition: width 0.9s var(--ease-brand) 0.45s; }
.js .geul-som.visible .som-lijn { width: 32px; }
.poorten { display: grid; gap: 30px; max-width: 46ch; }
.poort { border-left: 1px solid rgba(var(--gold-rgb), 0.45); padding-left: 22px; cursor: pointer; transition: border-color 0.35s var(--ease-brand); }
/* Reveal-transition en hover-rand gecombineerd: de randkleur reageert direct,
   ook tijdens of na het materialiseren (de stagger-delay geldt hem niet). */
.js .poort.reveal { transition: opacity 0.65s var(--ease-brand), transform 0.65s var(--ease-brand), filter 0.65s var(--ease-brand), border-color 0.35s var(--ease-brand); }
.js .poort.reveal.visible { transition-delay: calc(var(--stagger-i, 0) * 70ms), calc(var(--stagger-i, 0) * 70ms), calc(var(--stagger-i, 0) * 70ms), 0s; }
.poort:hover, .poort.is-actief { border-color: var(--gold); }
.poort-over { font-size: 10px; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; color: rgba(var(--gold-rgb), 0.9); margin-bottom: 6px; }
.poort-naam { font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif; font-weight: 300; font-size: 29px; line-height: 1.05; color: var(--sand-light); margin-bottom: 8px; }
.poort-tekst { font-size: 13.5px; line-height: 1.7; color: rgba(var(--sand-rgb), 0.62); }

html.geen-js .vk-onthul circle { r: 700px; }
html.geen-js .vk-vestlabel { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .vk-onthul circle { r: 700px !important; transition: none !important; }
  .vk-landgroep text { opacity: 1 !important; transition: none !important; }
  .vk-vestlabel { opacity: 1 !important; transition: none !important; }
  .som-lijn { width: 32px !important; transition: none !important; }
  .vk-puls { animation: none !important; opacity: 0 !important; }
  .lantaarn { display: none !important; }
  .showroom-card-bg img { transition: none !important; }
  /* Reveal-laag: geen beweging, wel de volwaardige GEGRADE eindstaat op hover/focus */
  .vk-aura, .vk-sweep { animation: none !important; }
  .vk-paneel, .vk-paneel .foto, .vk-paneel .warm, .vk-paneel .grade, .vk-bijschrift, .vk-aura, .vk-sweep, .vk-tether { transition: opacity 0.12s linear !important; }
  .vk-punt.is-actief .vk-paneel { transform: translateX(-50%) !important; }
  .vk-punt.is-actief .vk-paneel .foto { --onthul: 190% !important; filter: brightness(0.74) contrast(1.06) saturate(0.42) sepia(0.32) hue-rotate(-10deg) !important; }
}

@media (max-width: 900px) {
  .nacht { margin-top: 44px; padding-block: 44px; }
  .nacht-rij { grid-template-columns: 1fr; gap: 36px; }
  .vk-wrap { max-width: 420px; margin: 0 auto; }
  .vk-wrap .vk-vestnaam { font-size: 18px; }
  .vk-wrap .vk-veststatus { font-size: 14px; }
  .vk-wrap .vk-landlabel { font-size: 17px; }
  .vk-wrap .vk-gradlabel { display: none; }
  .geul-spreuk { max-width: none; }
  .poorten { max-width: none; }
  .poort-naam { font-size: 25px; }
}


.showroom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 64px;
  list-style: none;
}

.showroom-card {
  position: relative;
  overflow: hidden;
  height: 420px;
  border-radius: var(--radius-sharp);
  display: block;
  transition: box-shadow 0.5s var(--ease-brand);
}

/* Gouden lift wanneer het bijbehorende kaartpunt/de poortregel wordt aangewezen */
.showroom-card.is-gelinkt {
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.75), 0 18px 44px rgba(15, 7, 2, 0.16);
}

.showroom-card-bg {
  position: absolute;
  inset: 0;
}

.showroom-card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.65s var(--ease-brand);
  display: block;
}

.showroom-card:hover .showroom-card-bg img {
  transform: scale(1.03);
}

.showroom-card-overlay {
  position: absolute;
  inset: 0;
  /* Vestigingskaarten dragen een volledig infoblok (rollen, adres, uren, status) tot hoog
     in het beeld — tweelaagse sluier: van onder voor het urenblok, van links voor de
     tekstkolom. Zo blijft de tekst leesbaar onafhankelijk van hoe licht de foto op die
     plek is, en houdt de rechterhelft van de foto haar lucht. */
  background:
    linear-gradient(
      to right,
      rgba(15, 7, 2, 0.5) 0%,
      rgba(15, 7, 2, 0.24) 46%,
      transparent 76%
    ),
    linear-gradient(
      to top,
      rgba(15, 7, 2, 0.88) 0%,
      rgba(15, 7, 2, 0.46) 44%,
      rgba(15, 7, 2, 0.14) 76%,
      transparent 96%
    );
}

.showroom-top-badge {
  position: absolute;
  top: 24px;
  left: 28px;
  z-index: 3;
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(var(--brown-rgb), 0.85);
  padding: 7px 16px;
  border-radius: var(--radius-nav);
  backdrop-filter: blur(4px);
}

.showroom-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 36px;
  z-index: 2;
  /* Gelijke blokhoogte zodat de koppen van beide kaarten (Oldenzaal/Venlo) op dezelfde
     hoogte beginnen, ook al heeft Venlo een openingstijden-regel meer. De maat dekt het
     hoogste blok (Venlo); de speling van het kortere blok valt via de flex-kolom boven
     de urendeler — koppen én onderkanten lijnen uit. */
  display: flex;
  flex-direction: column;
  min-height: 372px;
}

.showroom-nr {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-style: italic;
  font-size: 60px;
  font-weight: 300;
  color: rgba(var(--sand-rgb), 0.16);
  position: absolute;
  top: -64px;
  right: 28px;
  line-height: 1;
}

.showroom-name {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 36px;
  font-weight: 300;
  color: #ffffff;
  margin-bottom: 4px;
}

.showroom-rollen {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.showroom-m2 {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  /* Kleine tekst op zand: goud haalt de leesbaarheidsdrempel niet. */
  color: var(--brown-mid);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Levende openingsstatus onder de tijden — feit, geen effect */
.showroom-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.showroom-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--sand-rgb), 0.35);
  flex-shrink: 0;
}

.showroom-status.is-open {
  color: var(--gold-hero);
}

.showroom-status.is-open::before {
  background: var(--gold-hero);
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.55);
}

.showroom-status:empty {
  display: none;
}

.showroom-address {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.8;
  margin-bottom: 14px;
}

/* Telefoonnummer onder de plaats — tikbaar (belt direct, houdt de klant op de site) */
.showroom-tel {
  display: inline-block;
  margin-top: 4px;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: color 0.3s var(--ease-brand);
}

.showroom-tel:hover {
  color: var(--gold);
}

.showroom-hours {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 12px;
  /* Vangt de hoogte-speling van het infoblok op — houdt de onderkanten gelijk */
  margin-top: auto;
  margin-bottom: 18px;
}

.hours-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.3px;
  margin-bottom: 6px;
  max-width: 300px;
}

.hours-row span:first-child {
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 2px;
}

.showroom-route {
  display: inline-block;
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.35);
  padding-bottom: 2px;
  transition:
    color 0.2s var(--ease-brand),
    border-color 0.2s var(--ease-brand);
}

.showroom-route:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
}

/* ═══ DEALER — conversiesectie ═══ */
.dealer-section {
  background: var(--brown-dark);
  padding: var(--space-section) var(--pad-x);
  position: relative;
  overflow: hidden;
}

.dealer-kolommen {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: start;
}

.dealer-content > p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.9;
  margin: 24px 0 36px;
  max-width: 65ch;
}

.dealer-perks {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 36px;
  list-style: none;
}

.dealer-perk {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.4px;
}

.perk-dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}

.dealer-prijsbeleid {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 26px;
  max-width: 56ch;
}

.dealer-prijsbeleid-kop {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: #ffffff;
  margin-bottom: 10px;
}

.dealer-prijsbeleid p {
  font-size: 13px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.72);
}

/* Aanvraag-kaart */
.aanvraag-kaart {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-nav);
  padding: 44px 40px;
}

.aanvraag-titel {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-weight: 300;
  font-size: 28px;
  color: #ffffff;
  margin-bottom: 8px;
}

.aanvraag-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 30px;
  line-height: 1.7;
}

.aanvraag-stappen {
  list-style: none;
  margin-bottom: 34px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.aanvraag-stap {
  display: flex;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.aanvraag-stap:last-child {
  border-bottom: none;
}

.stap-nr {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: var(--gold);
  flex-shrink: 0;
  width: 26px;
  line-height: 1.3;
}

.stap-titel {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 3px;
}

.stap-tekst {
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.66);
}

.aanvraag-kaart .btn-primary {
  width: 100%;
  justify-content: center;
}

.aanvraag-criterium {
  margin-top: 18px;
  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}

.aanvraag-login {
  display: block;
  margin-top: 16px;
  text-align: center;
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s var(--ease-brand);
}

.aanvraag-login:hover {
  color: #ffffff;
}

/* ── Veelgestelde vragen — native details/summary ── */
.dealer-faq {
  margin-top: 88px;
  max-width: 760px;
}

.dealer-faq .section-label {
  margin-bottom: 28px;
}

.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.faq-item summary {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-weight: 300;
  font-size: 21px;
  color: #ffffff;
  padding: 20px 36px 20px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  touch-action: manipulation;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 300;
  font-size: 22px;
  color: var(--gold);
  transition: transform 0.3s var(--ease-brand);
}

.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

/* Zachte uitklap (progressive enhancement): waar de browser het ondersteunt
   animeert de hoogte, elders klapt het antwoord direct open. De globale
   reduced-motion-regel bereikt ::details-content niet (de wildcard dekt alleen
   elementen, ::before en ::after); daarvoor staat hieronder een eigen regel.
   Die blijft los: in de globale selectorlijst zou een browser zonder
   ::details-content de hele globale regel laten vallen. */
:root {
  interpolate-size: allow-keywords;
}

.faq-item::details-content {
  height: 0;
  overflow: clip;
  transition:
    height 0.3s var(--ease-brand),
    content-visibility 0.3s allow-discrete;
}

.faq-item[open]::details-content {
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content {
    transition: none;
  }
}

.faq-item p {
  font-size: 13.5px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.75);
  padding: 0 0 24px;
  max-width: 62ch;
}

/* ── Partnerbewijs ── */
.partner-blok {
  margin-top: 88px;
}

.partner-intro {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.partner-intro p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.75;
  max-width: 52ch;
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  list-style: none;
}

.partner-slide {
  border-radius: var(--radius-sharp);
  overflow: hidden;
  position: relative;
  aspect-ratio: 1 / 1;
  touch-action: manipulation;
}

.partner-img {
  position: absolute;
  inset: 0;
}

.partner-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-brand);
}

.partner-slide:hover .partner-img img {
  transform: scale(1.01);
}

.partner-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-kaart);
  transition: background 0.4s var(--ease-brand);
}

.partner-slide:hover .partner-overlay {
  background: var(--overlay-kaart-hover);
}

.partner-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  z-index: 2;
}

.partner-type {
  display: inline-block;
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(var(--gold-rgb), 0.5);
  border-radius: var(--radius-nav);
  padding: 4px 12px;
  margin-bottom: 10px;
}

.partner-naam {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 26px;
  font-weight: 300;
  color: #ffffff;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.partner-stad {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

/* CTA-slide — vaste §7-copy · "ignite" hover-moment (BRAND §9: drama waar het de merkbeleving draagt) */
.partner-slide-cta {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  transition:
    border-color 0.5s var(--ease-brand),
    box-shadow 0.6s var(--ease-brand),
    transform 0.5s var(--ease-brand);
}

.partner-slide-cta:hover {
  border-color: rgba(var(--gold-rgb), 0.7);
  box-shadow:
    0 0 0 1px rgba(var(--gold-rgb), 0.2),
    0 26px 60px -26px rgba(var(--gold-rgb), 0.4);
}

.partner-slide-cta:active {
  transform: scale(0.985);
}

/* Warme lichtvlek die de cursor volgt (--mx/--my uit site.js) */
.cta-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--gold-rgb), 0.18),
    transparent 68%
  );
  transition: opacity 0.5s var(--ease-brand);
}

.partner-slide-cta:hover .cta-glow {
  opacity: 1;
}

/* Eénmalige lichtstreek die bij hover diagonaal over de kaart veegt */
.partner-slide-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 34%,
    rgba(var(--gold-rgb), 0.14) 46%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(var(--gold-rgb), 0.14) 54%,
    transparent 66%
  );
  transform: translateX(-115%);
  opacity: 0;
}

.partner-slide-cta:hover::after {
  opacity: 1;
  transform: translateX(115%);
  transition:
    transform 0.9s var(--ease-brand),
    opacity 0.3s var(--ease-brand);
}

/* Gouden sintels — dezelfde merk-signatuur als de route-band, hier subtiel */
.cta-embers {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease-brand);
}

.partner-slide-cta:hover .cta-embers {
  opacity: 1;
}

.cta-embers i {
  position: absolute;
  bottom: -6px;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--gold-hero);
  box-shadow:
    0 0 7px rgba(var(--gold-rgb), 0.9),
    0 0 14px rgba(var(--gold-rgb), 0.4);
  opacity: 0;
}

.partner-slide-cta:hover .cta-embers i {
  animation: ctaEmber var(--dur, 5s) linear var(--delay, 0s) infinite;
}

/* bottom (i.p.v. translateY) omdat translateY-% relatief aan de sintel zelf is, niet de kaart */
@keyframes ctaEmber {
  0% {
    bottom: -2%;
    transform: translateX(0);
    opacity: 0;
  }
  14% {
    opacity: 0.9;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    bottom: 104%;
    transform: translateX(7px);
    opacity: 0;
  }
}

.partner-cta-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 32px;
}

.partner-cta-label {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.partner-cta-titel {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-weight: 300;
  font-size: clamp(24px, 2vw, 30px);
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 14px;
}

.partner-cta-titel em {
  font-style: italic;
}

.partner-cta-tekst {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.8;
  margin-bottom: 24px;
}

.partner-cta-link {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 3px;
  align-self: flex-start;
  transition:
    color 0.2s var(--ease-brand),
    border-color 0.2s var(--ease-brand);
}

.partner-cta-link:hover {
  color: var(--gold);
  border-color: rgba(var(--gold-rgb), 0.7);
}

/* ═══ FOOTER ═══ */
footer {
  background: var(--brown-dark);
  color: #ffffff;
  padding: 80px var(--pad-x) 44px;
  border-top: 1px solid rgba(var(--gold-rgb), 0.25);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 48px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-logo {
  height: 52px;
  width: auto;
  display: block;
  margin-bottom: 20px;
}

.footer-tagline {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin-bottom: 10px;
  max-width: 34ch;
}

.footer-label {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 22px;
}

.footer-cert {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.8;
  max-width: 40ch;
}

.footer-kop {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.footer-vestiging {
  font-style: normal;
  font-size: 13px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 22px;
}

.footer-vestiging strong {
  display: block;
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-weight: 300;
  font-size: 19px;
  color: #ffffff;
  margin-bottom: 2px;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-style: normal;
  margin-bottom: 28px;
}

.footer-contact a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: color 0.2s var(--ease-brand);
}

.footer-contact a:hover {
  color: #ffffff;
}

.footer-cta-blok {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px var(--pad-x) 0;
}

.footer-copy {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.5px;
  text-align: center;
}

.footer-copy a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s var(--ease-brand);
}

.footer-copy a:hover {
  color: var(--gold-hero);
}

/* ═══ WHATSAPP FLOAT — merkkleur, geen goudvlak ═══ */
.whatsapp-float {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 56px;
  height: 56px;
  background: var(--brown-dark);
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-float);
  text-decoration: none;
  touch-action: manipulation;
  transition:
    background 0.25s var(--ease-brand),
    box-shadow 0.25s var(--ease-brand),
    transform 0.2s var(--ease-brand);
}

.whatsapp-float:hover {
  background: var(--brown);
  box-shadow: 0 6px 24px rgba(var(--brown-rgb), 0.4);
  transform: translateY(-2px);
}

.whatsapp-float:active {
  transform: scale(0.97);
}

/* ═══ OVER ONS — hero ═══ */
.oo-hero {
  background: var(--hero-bg);
  min-height: 64vh;
  display: flex;
  align-items: flex-end;
  padding: 140px var(--pad-x) 88px;
  position: relative;
  overflow: hidden;
}

.oo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 68% 28%, rgba(var(--brown-rgb), 0.15) 0%, transparent 62%);
  pointer-events: none;
}

.oo-hero-content {
  max-width: 860px;
  position: relative;
  z-index: 1;
}

.oo-hero-label {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}

.oo-hero h1 {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-weight: 300;
  font-size: clamp(46px, 7vw, 88px);
  line-height: 1.06;
  color: #ffffff;
  margin: 0 0 28px;
  letter-spacing: -1px;
}

.oo-hero h1 em {
  font-style: italic;
  color: var(--gold-hero);
}

.oo-hero-sub {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.72);
  max-width: 560px;
}

.oo-hero .hero-anim:nth-child(1) {
  animation-delay: 0.25s;
}

.oo-hero .hero-anim:nth-child(2) {
  animation-delay: 0.45s;
}

.oo-hero .hero-anim:nth-child(3) {
  animation-delay: 0.65s;
}

/* Hero-route: stille kaart van de reis in de lege rechterhelft (inline SVG).
   Lijn en stations in wit op lage alpha; goud is exclusief voor de reiziger
   en het eindpunt (goud-economie). De zes stippen sorteren voor op de zes
   rail-nodes verderop. Mobiel: verborgen. */
.oo-hero-route {
  position: absolute;
  top: 96px;
  right: var(--pad-x);
  bottom: 72px;
  width: min(44vw, 620px);
  pointer-events: none;
  z-index: 0;
}

.oo-hero-route svg {
  width: 100%;
  height: 100%;
}

/* Stille scroll-uitnodiging onderin de hero — zelfde idioom als .hero-scroll
   op index, compact horizontaal zodat hij onder de subtekst past */
.oo-hero-scroll {
  position: absolute;
  left: var(--pad-x);
  bottom: 22px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: materialiseer 0.85s var(--ease-brand) 0.95s forwards;
}

.oo-hero-scroll span:not(.oo-scroll-lijn) {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.oo-scroll-lijn {
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
}

.oo-scroll-lijn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-hero);
  animation: scrollCue 2.4s var(--ease-brand) infinite;
}

/* ═══ SCROLL REVEAL — materialiseren ═══
   Verbergende startstaat alleen wanneer JS draait (html.js):
   zonder JavaScript is alle content direct zichtbaar. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(4px);
  transition:
    opacity 0.65s var(--ease-brand),
    transform 0.65s var(--ease-brand),
    filter 0.65s var(--ease-brand);
}

/* Stagger via --stagger-i; geldt alleen voor de overgang naar zichtbaar */
.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
  /* none i.p.v. blur(0): een blur(0)-filter houdt per element een filterpas in
     leven op elke frame; none laat de laag volledig los zodra de entree klaar is.
     De overgang blur(4px) -> none interpoleert gewoon. */
  filter: none;
  transition-delay: calc(var(--stagger-i, 0) * 70ms);
}

/* Toetsenbordfocus mag nooit op onzichtbare content landen */
.js .reveal:focus-within {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ═══ FOCUS ═══ */
:focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 3px;
}

.op-donker :focus-visible,
.dealer-section :focus-visible,
.projecten :focus-visible,
.route-band :focus-visible,
footer :focus-visible {
  outline-color: var(--gold);
}

.hero :focus-visible {
  outline-color: rgba(255, 255, 255, 0.8);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1100px) {
  .sel-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .route-stops {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 40px;
  }

  .route-lijn {
    display: none;
  }

  .route-stop {
    padding-top: 0;
  }

  .route-stop::before {
    display: none;
  }
}

/* ── De smalle balk: 901 tot 1240 ────────────────────────────────────────────
   Tussen de ruime balk en de mobiele balk zit een band waarin alles nog naast
   elkaar staat maar niets meer ruim is. Hier staat de maatvoering voor die band.

   Wat er verandert is ruimte, niet vorm. De letterafstand blijft 2,5px — die
   knijpen zou de balk smaller maken door hem lelijker te maken. Het langste woord
   krijgt in plaats daarvan zijn korte vorm. */
@media (min-width: 901px) and (max-width: 1240px) {
  :root {
    /* Uitgesproken in plaats van geërfd: dit is de hoogte waarop de band rekent. */
    --nav-h: 72px;
  }

  #mainNav {
    padding-inline: 32px;
  }

  .nav-links {
    gap: 24px;
  }

  .nav-links a {
    letter-spacing: 2.5px;
  }

  .nav-cta {
    padding: 10px 18px;
  }

  .nav-login .nav-woord-lang {
    display: none;
  }

  .nav-login .nav-woord-kort {
    display: inline;
  }
}

@media (max-width: 900px) {
  :root {
    --pad-x-min: var(--pad-x-mobiel);
  }

  html {
    scroll-padding-top: 70px;
  }

  :root {
    --nav-h: 60px;
  }

  #mainNav {
    padding: 0 16px;
    height: var(--nav-h);
  }

  .nav-logo img {
    height: 42px;
  }

  #desktopNavLinks {
    display: none;
  }

  /* Taal en login staan mobiel direct in de balk: de utilityzone blijft zichtbaar,
     alleen de CTA verhuist naar het menu. Het is dezelfde ene kiezer-instantie als op
     desktop; er bestaat geen tweede paneel met dubbele id's. Het menu houdt taal en
     login daarnaast als tweede ingang. */
  #desktopNavActions {
    display: flex;
    gap: 2px;
    margin-left: auto;
  }

  #desktopNavActions .nav-cta {
    display: none;
  }

  /* Leesvolgorde: eerst de vlag met de code, dan het loginwoord. De tab-volgorde
     blijft de documentvolgorde (login vóór taal) — twee buren, geen doolhof. */
  .nav-taal {
    order: -1;
    /* Statisch, zodat het paneel zich aan de balk hecht in plaats van aan de knop:
       rechts van de knop staan nog twee doelen, en een paneel dat dáár rechts
       uitlijnt loopt op een smal scherm links het beeld uit. */
    position: static;
  }

  .nav-taal-knop {
    min-height: 44px;
    padding: 0 8px;
  }

  .nav-login {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
  }

  .nav-login .nav-woord-lang {
    display: none;
  }

  .nav-login .nav-woord-kort {
    display: inline;
  }

  .nav-taal-paneel {
    right: 12px;
    width: min(260px, calc(100vw - 24px));
  }

  .hamburger {
    display: flex;
    margin-left: 0;
  }

  /* Hero: gemeten viewport-px uit site.js (--hero-vh) — betrouwbaarder dan svh op iOS;
     zonder JS valt hij terug op 100svh */
  .hero {
    height: 100svh;
    height: var(--hero-vh, 100svh);
    min-height: 560px;
  }

  .hero-content {
    padding: 0 var(--pad-x-mobiel) 72px;
  }

  .hero h1 {
    font-size: clamp(34px, 9.5vw, 46px);
  }

  .hero-sub {
    font-size: 13px;
    margin-bottom: 32px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .hero-scroll {
    display: none;
  }

  /* USP-balk: horizontale snap met statische fade-affordance */
  .usp-balk {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .usp-balk::-webkit-scrollbar {
    display: none;
  }

  .usp-item {
    flex: 0 0 62vw;
    scroll-snap-align: start;
    padding: 26px 20px;
    border-bottom: none;
  }

  .usp-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 8px;
  }

  .usp-icon svg {
    width: 18px;
    height: 18px;
  }

  .usp-balk-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 100%;
    background: linear-gradient(to right, transparent 0%, var(--sand-light) 80%);
    pointer-events: none;
  }

  /* Secties */
  .collectie,
  .selectie,
  .voorwie,
  .projecten,
  .showroom,
  .dealer-section,
  .route-band {
    padding: var(--space-section-mobiel) var(--pad-x-mobiel);
  }

  .section-header {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 36px;
  }

  /* Collectie: snap-carrousel — actieve kaart komt naar voren */
  .cat-grid {
    display: flex;
    overflow-x: auto;
    /* Vergrendel de verticale as: de vierkante kaarten maken deze rij hoog, waardoor iOS
       er anders een verticale momentum-scroll van maakt (de rij "schuift" mee omhoog/omlaag
       tijdens het swipen). overflow-y:hidden houdt 'm — net als de overige carrousels — puur
       horizontaal; verticaal blijft gewoon de pagina scrollen. */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: 12px;
    padding: 8px 8vw 4px;
    margin: 0 calc(-1 * var(--pad-x-mobiel));
  }

  .cat-grid::-webkit-scrollbar {
    display: none;
  }

  .cat-item,
  .cat-item:not(:first-child):last-child:nth-child(even) {
    grid-column: auto;
    grid-row: auto;
    /* Smaller dan voorheen (76vw): twee kaarten tegelijk in beeld leest sneller en geeft
       de hoofdkaart hieronder de ruimte om er echt uit te springen. */
    flex: 0 0 50vw;
    scroll-snap-align: center;
  }

  /* De hoofdcategorie houdt ook op een telefoon voorrang. Alle vijf kaarten even groot
     maken (wat hiervoor gebeurde, verhouding 1,05x) haalt de commerciele hierarchie er
     op mobiel volledig uit, terwijl juist daar het meeste verkeer vandaan komt. */
  .cat-item:first-child {
    grid-column: auto;
    grid-row: auto;
    flex: 0 0 82vw;
    scroll-snap-align: center;
  }

  .cat-card,
  .cat-item:first-child .cat-card,
  .cat-item:not(:first-child):last-child:nth-child(even) .cat-card {
    aspect-ratio: 1 / 1;
    height: auto;
  }

  /* Dimmen van niet-actieve kaarten alleen mét JS (die zet snap-actief) */
  .js .cat-item .cat-card {
    opacity: 0.55;
    transform: scale(0.95);
    transition:
      opacity 0.25s var(--ease-brand),
      transform 0.25s var(--ease-brand);
  }

  .js .cat-item.snap-actief .cat-card {
    opacity: 1;
    transform: scale(1);
  }

  .cat-name {
    font-size: 19px;
  }

  /* Route-band */
  .route-stops {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-left: 26px;
    position: relative;
  }

  /* Verticale lijn die meevult op mobiel */
  .route-lijn {
    display: block;
    top: 6px;
    bottom: 6px;
    left: 5px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .route-lijn-vul {
    transform-origin: top center;
  }

  .js .route-lijn-vul {
    transform: scaleY(var(--route-vul, 0));
  }

  .route-stop {
    padding-top: 0;
  }

  .route-stop::before {
    display: block;
    top: 4px;
    left: -26px;
  }

  /* Gloeiende vultip: reist de rail af op jouw leeshoogte (site.js zet --route-tip).
     De mobiele evenknie van het reizende logo op desktop. */
  .js .route-lijn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: var(--route-tip, 0px);
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: var(--gold-hero);
    box-shadow:
      0 0 10px rgba(var(--gold-rgb), 0.9),
      0 0 22px rgba(var(--gold-rgb), 0.45);
  }

  /* Stations wachten gedimd en ontsteken zodra de tip ze bereikt.
     0.65 (was 0.5): vooruitlezen blijft comfortabel, het ontsteek-contrast blijft. */
  .js .route-band .route-stop.visible {
    opacity: 0.65;
    transition: opacity 0.5s var(--ease-brand);
  }

  .js .route-band .route-stop.visible.bereikt {
    opacity: 1;
  }

  .route-stop-nr {
    font-size: 36px;
  }

  /* Selectie */
  .sel-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .sel-naam {
    font-size: 17px;
  }

  /* Voor wie */
  .voorwie-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Minder hoog beeld op mobiel zodat gestapelde kaarten niet eindeloos scrollen */
  .segment-beeld {
    --seg-ratio: 4 / 3;
  }

  /* Projecten */
  .project-kaarten {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
    gap: 10px;
  }

  .project-kaart {
    height: 220px;
  }

  .project-kaart-groot {
    grid-row: auto;
    height: 280px;
  }

  .project-kaart-groot .project-naam {
    font-size: 28px;
  }

  .showroom-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 44px;
  }

  .showroom-card {
    /* Venlo draagt een regel méér (zondag) — 420px houdt de kop vrij van de badge */
    height: 420px;
  }

  .showroom-name {
    font-size: 28px;
  }

  .showroom-info {
    padding: 24px;
    /* Mobiel stapelen de kaarten los onder elkaar; geen uitlijning nodig, blok hugt zijn inhoud */
    min-height: 0;
  }

  /* Dealer */
  .dealer-kolommen {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .aanvraag-kaart {
    padding: 32px 24px;
  }

  .dealer-faq {
    margin-top: 64px;
  }

  .faq-item summary {
    font-size: 18px;
  }

  /* Partners: horizontale snap */
  .partner-blok {
    margin-top: 64px;
  }

  .partner-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: 12px;
    padding-bottom: 8px;
  }

  .partner-grid::-webkit-scrollbar {
    display: none;
  }

  .partner-grid > li {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }

  .partner-slide {
    aspect-ratio: 1 / 1;
  }

  /* Footer */
  footer {
    padding: 56px var(--pad-x-mobiel) 36px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 36px;
    padding-bottom: 32px;
  }

  /* Over ons */
  .oo-hero {
    padding: 116px var(--pad-x-mobiel) 64px;
    min-height: 54vh;
  }

  .oo-hero-route,
  .oo-hero-scroll {
    display: none;
  }

  .whatsapp-float {
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 31px;
  }

  .section-title {
    font-size: 28px;
  }

  .sel-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .project-kaart {
    height: 190px;
  }

  .project-kaart-groot {
    height: 240px;
  }
}

/* ═══ TABLET-LANDSCHAP — collectie ═══
   Hier stond een eigen tussenmaat die de hoofdkaart over de volle breedte legde met
   aspect-ratio 21/10. Gemeten leverde dat een liggende reep op waarin het onderwerp
   wegviel (bij 1100px bleef van de showroomfoto een strook tafelblad over), en zakte de
   hiërarchie van 4,1x naar 1,95x. Bovendien werd de hoofdkaart bij 1100 -> 1200 kleiner
   terwijl het scherm breder werd. Het gewone raster (2fr 1fr 1fr, hoofdkaart over twee
   rijen) houdt de verhouding vanaf 901px gelijk en verdraagt de smallere maat prima. */

/* ═══ MOBIELE BELEVING — dots, swipe-wenk en projecten-deck ═══ */
@media (max-width: 900px) {
  .swipe-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 18px: de 25px-brede aanraakvlakken (::after) sluiten dan precies aan
       zonder overlap — elke dot een eenduidige tikzone (was 7px, 11px overlap) */
    gap: 18px;
    margin-top: 18px;
  }

  .swipe-dot {
    width: 7px;
    height: 7px;
    border-radius: 4px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: rgba(var(--gold-rgb), 0.35);
    position: relative;
    transition:
      width 0.3s var(--ease-brand),
      background 0.3s var(--ease-brand);
  }

  /* Ruim aanraakvlak rond elke dot */
  .swipe-dot::after {
    content: "";
    position: absolute;
    inset: -15px -9px;
  }

  .swipe-dot.actief {
    width: 26px;
    background: var(--gold);
  }

  /* Wenkt een paar keer en verdwijnt bij de eerste swipe */
  .swipe-hint {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-family: "Jost", "Jost Fallback", sans-serif;
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brown-mid);
    animation: swipeWenk 2s var(--ease-brand) 4;
    transition:
      opacity 0.4s var(--ease-brand),
      visibility 0.4s var(--ease-brand);
  }

  .op-donker .swipe-hint {
    color: rgba(255, 255, 255, 0.65);
  }

  .swipe-hint.weg {
    opacity: 0;
    visibility: hidden;
  }

  @keyframes swipeWenk {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(6px);
    }
  }

  /* Partners: actieve slide komt naar voren (alleen mét JS) */
  .js .partner-slide {
    opacity: 0.55;
    transform: scale(0.96);
    transition:
      opacity 0.3s var(--ease-brand),
      transform 0.3s var(--ease-brand);
  }

  .js .partner-grid > li.snap-actief .partner-slide {
    opacity: 1;
    transform: scale(1);
  }

  /* Ignite op touch: de Word partner-kaart ontsteekt zodra hij centreert in de
     carrousel — hover bestaat hier niet (zelfde in-beeld-principe als de route-fx);
     reduced-motion dooft de sintels via de globale kill, de gloed blijft statisch */
  .js .partner-grid > li.snap-actief .partner-slide-cta {
    border-color: rgba(var(--gold-rgb), 0.7);
    box-shadow:
      0 0 0 1px rgba(var(--gold-rgb), 0.2),
      0 26px 60px -26px rgba(var(--gold-rgb), 0.4);
  }

  .js .partner-grid > li.snap-actief .cta-glow {
    opacity: 1;
  }

  .js .partner-grid > li.snap-actief .cta-embers {
    opacity: 1;
  }

  .js .partner-grid > li.snap-actief .cta-embers i {
    animation: ctaEmber var(--dur, 5s) linear var(--delay, 0s) infinite;
  }

  /* Zonder JS is het deck een gewone stapel — dan geen swipe-wenk daar */
  html:not(.js) #deckHint {
    display: none;
  }

  /* Projecten als gestapeld deck — alleen mét JS (anders blijft de stapel-layout) */
  .js .project-kaarten {
    display: block;
    position: relative;
    height: 348px;
  }

  .js .project-kaart,
  .js .project-kaart-groot {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 280px;
    transform-origin: center bottom;
    will-change: transform, opacity;
    transition:
      transform 0.42s var(--ease-brand),
      opacity 0.42s var(--ease-brand),
      box-shadow 0.42s var(--ease-brand);
  }

  .js .project-kaart[data-pos="0"] {
    z-index: 3;
    opacity: 1;
    transform: none;
    box-shadow: 0 16px 48px rgba(15, 7, 2, 0.45);
  }

  .js .project-kaart[data-pos="1"] {
    z-index: 2;
    opacity: 0.72;
    transform: scale(0.94) translateY(22px);
  }

  .js .project-kaart[data-pos="2"] {
    z-index: 1;
    opacity: 0.48;
    transform: scale(0.88) translateY(42px);
  }

  .js .project-kaart.deck-exit {
    z-index: 4;
    opacity: 0;
    transform: scale(0.86) translateY(-48px);
    pointer-events: none;
  }

  .js .project-kaart .project-kaart-content {
    right: 72px;
  }

  .js .deck-next {
    display: flex;
    position: absolute;
    bottom: 18px;
    right: 18px;
    z-index: 4; /* boven de gestrekte .project-kaart-link (z 3) */
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    background: rgba(15, 7, 2, 0.25);
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
    touch-action: manipulation;
    transition:
      background 0.25s var(--ease-brand),
      border-color 0.25s var(--ease-brand);
  }

  .js .deck-next:active {
    background: var(--brown);
    border-color: var(--brown);
  }

  .js .project-kaart:not([data-pos="0"]) .deck-next {
    opacity: 0;
    pointer-events: none;
  }
}

/* ═══ HERO-USP-BAND — warme glasband in de hero ═══ */

.hero {
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
}

/* Alleen desktop: extra minimumhoogte voor content + band (mobiel houdt 560px uit het media-blok) */
@media (min-width: 901px) {
  .hero {
    min-height: 680px;
  }
}

.hero .hero-content {
  padding: 0 var(--pad-x) 40px;
}

.hero .hero-scroll {
  bottom: 170px;
}

.hero-usp {
  position: relative;
  z-index: 2;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(15, 7, 2, 0.42);
  /* Blur werkt straks identiek boven een <video> in .hero-beeld */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-usp {
    background: rgba(15, 7, 2, 0.62);
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.hero-usp-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  /* extra ruimte rechts: de vaste WhatsApp-knop zweeft in deze hoek */
  padding: 16px calc(var(--pad-x) + max(0px, 76px - (var(--pad-x) - var(--pad-x-min)))) 0 var(--pad-x);
}

.hero-usp-zin {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.9);
}

.hero-usp-lijst {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 0;
  padding: 14px var(--pad-x) 22px;
}

.hero-usp-item {
  padding-right: 24px;
}

.hero-usp-item + .hero-usp-item {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: 24px;
}

.hero-usp-label {
  display: block;
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  /* Expliciete regelhoogte: boxhoogte fontonafhankelijk (stabiel bij font-swap) */
  line-height: 1.5;
  margin-bottom: 6px;
}

.hero-usp-desc {
  display: block;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

/* Claimkeuze: alleen mobiel zichtbaar. */
.hero-usp-keuze {
  display: none;
}

/* Entrance: verlengde materialiseer-reeks ná .hero-actions (0.95s) */
.hero-usp-kop.hero-anim {
  animation-delay: 1.1s;
}

.hero-usp-item.hero-anim:nth-child(1) {
  animation-delay: 1.2s;
}

.hero-usp-item.hero-anim:nth-child(2) {
  animation-delay: 1.3s;
}

.hero-usp-item.hero-anim:nth-child(3) {
  animation-delay: 1.4s;
}

/* ═══ STOP-BEWIJS — certificaat-chips die boven de actieve stop materialiseren ═══
   Gedreven door data-actieve-stop op .route-band (site.js). Mobiel en zonder JS: statisch
   zichtbaar per stop; reduced motion: alle chips direct zichtbaar. */
.stop-bewijs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.stop-bewijs img {
  display: block;
  height: 26px;
  width: auto;
  align-self: flex-start;
  /* Assets zijn de native witte logoversies (BRAND §9) — geen filter nodig */
  opacity: 0.92;
}

.stop-bewijs img.brosi-mark {
  height: 30px;
  border-radius: 7px;
  filter: none;
  opacity: 1;
}

/* Certificaatzegel (SVLK): groter voor leesbaarheid van het merk */
.stop-bewijs img.stop-bewijs-cert {
  height: 38px;
}

.stop-bewijs-tekst {
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 901px) {
  /* Ademruimte boven de lijn zodat de chips de sectiekop niet raken */
  .route-band .section-header {
    margin-bottom: 132px;
  }

  /* Desktop: chip zweeft boven de stop, in de lege zone boven de lijn */
  .stop-bewijs {
    position: absolute;
    left: 0;
    right: 24px;
    bottom: calc(100% + 22px);
    margin-top: 0;
    transition:
      opacity 0.5s var(--ease-brand),
      transform 0.5s var(--ease-brand),
      filter 0.5s var(--ease-brand);
  }

  /* Zodra de reis loopt: alleen de chip van de laatst bereikte stop */
  .route-band[data-actieve-stop] .stop-bewijs {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(3px);
    pointer-events: none;
  }

  /* Rust (nog geen stop bereikt): zachte hint bij stop 1 */
  .route-band[data-actieve-stop="0"] .route-stop:nth-child(1) .stop-bewijs {
    opacity: 0.5;
    transform: none;
    filter: none;
  }

  .route-band[data-actieve-stop="1"] .route-stop:nth-child(1) .stop-bewijs,
  .route-band[data-actieve-stop="2"] .route-stop:nth-child(2) .stop-bewijs,
  .route-band[data-actieve-stop="3"] .route-stop:nth-child(3) .stop-bewijs,
  .route-band[data-actieve-stop="4"] .route-stop:nth-child(4) .stop-bewijs {
    opacity: 1;
    transform: none;
    filter: none;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Zichtbare fallback: alle bewijs-chips staan er gewoon */
  .route-band[data-actieve-stop] .stop-bewijs {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* — Lage laptops (bv. 1280×720): hero-inhoud compacter zodat niets verdringt — */
@media (min-width: 901px) and (max-height: 780px) {
  .hero .hero-label {
    margin-bottom: 14px;
  }

  .hero h1 {
    font-size: clamp(40px, 5.6vw, 68px);
    margin-bottom: 16px;
  }

  .hero .hero-sub {
    margin-bottom: 22px;
  }

  /* Kopregel (italic zin) vervalt op lage laptops om verticale ruimte te sparen */
  .hero-usp-kop {
    display: none;
  }

  .hero-usp-lijst {
    padding-top: 10px;
    padding-bottom: 14px;
  }

  .hero .hero-content {
    padding-bottom: 24px;
  }

  /* De band is hier lager (kopregel weg): scroll-cue mee omlaag, anders zweeft hij los */
  .hero .hero-scroll {
    bottom: 120px;
  }
}

/* — Mobiel: één lage swipe-rij (zelfde patroon als de site-carrousels) + safe-area.
     De gestapelde variant nam 28% van de hero in; deze rij houdt de foto vrij. — */
@media (max-width: 900px) {
  /* Compacte hero-marges — vast op mobiel (géén max-height-query: de viewporthoogte
     verandert tijdens scrollen door de adresbalk en liet de inhoud springen) */
  .hero .hero-label {
    margin-bottom: 14px;
  }

  .hero h1 {
    margin-bottom: 14px;
  }

  .hero .hero-sub {
    margin-bottom: 20px;
  }

  /* Kopregel vervalt op mobiel: de glasband start direct met de swipe-claims,
     zo blijft er meer van de hero-foto zichtbaar */
  .hero-usp-kop {
    display: none;
  }

  /* Eén statement per view (pagineren door de claims), randen lossen op in de mask */
  .hero-usp-lijst {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    gap: 18px;
    padding: 10px var(--pad-x-mobiel) 8px;
    scroll-padding-left: var(--pad-x-mobiel);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }

  .hero-usp-lijst::-webkit-scrollbar {
    display: none;
  }

  .hero-usp-item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* tekst vrijhouden van de zwevende WhatsApp-knop */
    padding-right: 56px;
  }

  .hero-usp-item + .hero-usp-item {
    border-left: none;
    padding-left: 0;
  }

  /* De claim is het kroonjuweel: display-serif in zinskapitaal (merkstem) */
  .hero-usp-label {
    font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
    font-weight: 300;
    font-size: clamp(20px, 5.5vw, 23px);
    line-height: 1.15;
    letter-spacing: 0.2px;
    text-transform: none;
    color: var(--white);
    margin-bottom: 5px;
  }

  /* De onderregel wordt de stille dataregel */
  .hero-usp-desc {
    font-size: 12px;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.68);
  }

  .hero-usp-keuze {
    display: grid;
    visibility: hidden;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 0 calc(var(--pad-x-mobiel) + 68px) 14px var(--pad-x-mobiel);
    animation: uspCueIn 0.6s var(--ease-brand) 0.9s backwards;
  }

  .hero-usp-keuze:not([hidden]) {
    visibility: visible;
  }

  .hero-usp-keuze button {
    position: relative;
    min-width: 0;
    min-height: 44px;
    padding: 12px 0 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: rgba(255, 255, 255, 0.82);
    font: 600 10px/1.4 "Jost", "Jost Fallback", sans-serif;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.25s var(--ease-brand);
  }

  .hero-usp-keuze button::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 32px;
    height: 3px;
    background: currentColor;
    opacity: 0.5;
    transform: scaleX(0.375) scaleY(0.6667);
    transform-origin: left center;
    transition: transform 0.25s var(--ease-brand), opacity 0.25s var(--ease-brand);
  }

  .hero-usp-keuze button[aria-pressed="true"] {
    color: var(--gold-hero);
  }

  .hero-usp-keuze button[aria-pressed="true"]::before {
    opacity: 1;
    transform: scale(1);
  }

  .hero-usp-keuze button:focus-visible,
  .hero-usp-lijst:focus-visible {
    outline: 2px solid var(--gold-hero);
    outline-offset: -2px;
  }

  .hero-usp-desc {
    display: block;
    overflow: visible;
  }

  /* Mobiel: entrance sneller (klaar vóór iemand realistisch scrolt) */
  .hero-anim {
    animation-duration: 0.6s;
  }

  .hero-label.hero-anim {
    animation-delay: 0.1s;
  }

  .hero-regel-1 {
    animation-delay: 0.2s;
  }

  .hero-regel-2 {
    animation-delay: 0.3s;
  }

  .hero-sub.hero-anim {
    animation-delay: 0.4s;
  }

  .hero-actions.hero-anim {
    animation-delay: 0.5s;
  }

  .hero-usp-kop.hero-anim {
    animation-delay: 0.58s;
  }

  .hero-usp-item.hero-anim:nth-child(1) {
    animation-delay: 0.66s;
  }

  .hero-usp-item.hero-anim:nth-child(2) {
    animation-delay: 0.74s;
  }

  .hero-usp-item.hero-anim:nth-child(3) {
    animation-delay: 0.82s;
  }

  /* Hero-tekst uit de onderste-derde omhoog: content vult de ruimte boven de band en
     zet de tekst in het onderste-derde mét lucht naar de glasband (was: tegen de band
     geplakt op 54-64%). De grote fotozone verdeelt zich zo boven én onder de tekst. */
  .hero {
    height: auto;
    min-height: max(560px, var(--hero-vh, 100svh));
  }

  .hero .hero-content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* viewport-relatief: hoge schermen (tablet) tillen de tekst wat meer omhoog */
    padding: 96px var(--pad-x-mobiel) clamp(64px, 9vh, 104px);
  }

}

@media (hover: hover) and (pointer: fine) {
  .hero-usp-keuze button:hover {
    color: var(--gold-hero);
  }
}

@media (max-width: 360px) {
  .hero-usp-keuze {
    grid-template-columns: repeat(3, max-content);
    justify-content: space-between;
    gap: 8px;
  }

  .hero-usp-keuze button {
    letter-spacing: 0.65px;
  }
}
@keyframes uspCueIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}



/* ═══ MOBIELE LEESBAARHEID — leestekst >=13-14px (richtlijn: body 16 / secundair 14 /
   labels 12); korte uppercase-merklabels blijven bewust 10px met ruime tracking ═══ */
@media (max-width: 900px) {
  /* Leeszinnen */
  .hero-sub {
    font-size: 14px;
  }

  .hero-usp-desc {
    font-size: 13px;
  }

  .stop-bewijs-tekst {
    font-size: 13px;
  }

  .route-stop-tekst {
    font-size: 14px;
  }

  .segment-tekst {
    font-size: 14px;
  }

  .dealer-perk {
    font-size: 14px;
  }

  .stap-tekst {
    font-size: 13.5px;
  }

  .aanvraag-sub {
    font-size: 14px;
  }

  .aanvraag-criterium {
    font-size: 12.5px;
  }

  .partner-cta-tekst {
    font-size: 13.5px;
  }

  .showroom-address {
    font-size: 14px;
  }

  .footer-vestiging {
    font-size: 14px;
  }

  footer a {
    font-size: 14px;
  }

  .footer-cert {
    font-size: 13px;
  }

  .footer-copy {
    font-size: 12px;
  }

  /* Knoppen: iets meer aanwezig op touch */
  .btn-primary,
  .btn-secundair,
  .btn-sectie,
  .nav-cta {
    font-size: 11px;
  }

  .footer-kop {
    font-size: 11px;
  }

  /* Kleinste labels: 9px -> 10px */
  .sel-badge,
  .cat-subtitle,
  .partner-type,
  .showroom-top-badge,
  .swipe-hint {
    font-size: 10px;
  }

  .project-type {
    font-size: 12px;
  }
}

/* ═══ REDUCED MOTION — zichtbare fallback, geen beweging ═══ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }

  .hero-anim,
  .hero-scroll {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .hero-beeld img {
    animation: none !important;
    transform: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .route-lijn-vul {
    transform: none !important;
  }

  .route-lijn::after {
    display: none;
  }

  /* Voor-wie-kaarten: geen veeg-animatie, maar toon direct de EINDSTAAT — beeld 2 (de
     afgewerkte ruimte, de "beloning") statisch zichtbaar. Zo ziet ook een reduced-motion-
     bezoeker beide-verhaal-helft, alleen zonder beweging (zichtbare fallback). */
  .seg-img {
    transition: none !important;
    transform: none !important;
  }

  /* :not(.is-handmatig): in rust blijft de eindstaat gepind (zichtbare fallback),
     maar na een bewuste tik/swipe wint de is-onthuld-toggle — het beeld wisselt dan
     instant mee met het gouden balkje (interactie die niets doet voelt kapot) */
  .segment-kaart:not(.is-handmatig) .seg-img-1 {
    -webkit-mask-position: 100% 0 !important;
    mask-position: 100% 0 !important;
  }

  @supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
    .segment-kaart:not(.is-handmatig) .seg-img-1 {
      opacity: 0 !important;
    }
  }

  /* Indicator: eindstaat statisch (segment 2 gevuld via .is-onthuld), geen scaleX-animatie */
  .segment-voortgang i::after {
    transition: none !important;
  }

  .route-stop::before {
    background: var(--gold);
    border-color: var(--gold);
  }

  .oo-hero-scroll {
    animation: none;
    opacity: 1;
  }

  .oo-scroll-lijn::after {
    animation: none;
    transform: none;
    opacity: 0.5;
  }

}

/* ═══════════════════════════════════════════════════════════
   PROJECTEN — projecten.html · "De Filmische Wand"
   Alle selectors met prefix .proj- / .pt- / dialog.proj-dossier —
   botsingsvrij t.o.v. de gedeelde site. Tokens uit :root hierboven.
   Reveal-startstaten alleen onder html.js (matcht site.js). No-JS:
   dossiers worden gewone leesbare secties.
   ═══════════════════════════════════════════════════════════ */

html.proj-dossier-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}
html:has(dialog.proj-dossier[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

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

/* Op donker draagt goud de accentregel. */
.proj-hero em,
.proj-afsluitband em {
  font-style: italic;
  color: var(--gold);
}
/* Op zand haalt goud de leesbaarheidsdrempel niet; daar geldt hetzelfde
   accenttoken als bij de sectielabels op lichte vlakken. */
.proj-partner em,
.proj-oplocatie em {
  font-style: italic;
  color: var(--brown-mid);
}

.proj-sectielabel {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--brown-mid);
}
.proj-sectielabel::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
  margin-top: 12px;
}

/* ── HERO ── */
.proj-hero {
  position: relative;
  height: 62vh;
  min-height: 430px;
  background: var(--hero-bg);
  overflow: hidden;
}
/* Een <picture> is van zichzelf inline en heeft geen bepaalde hoogte. Zonder deze regel
   valt de `height: 100%` van het beeld eronder terug op `auto` en zakt de hero in. */
.proj-hero picture,
.proj-tegel picture {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 2px;
  overflow: hidden;
}
.proj-hero picture {
  border-radius: 0;
}
.proj-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Zelfde tot-rust-komende beweging als het homepage-herobeeld (bewust linear) */
  animation: heroRust 9s linear 1 forwards;
  transform-origin: center center;
}
.proj-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-hero);
}
.proj-hero-inhoud {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 0 var(--pad-x) 38px;
  color: #ffffff;
}
.proj-hero-inhoud .proj-overline {
  font-size: 10px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 14px;
}
.proj-hero-inhoud h1 {
  font-family: "Cormorant Garamond", "Cormorant Fallback", serif;
  font-weight: 300;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.07;
  max-width: 16em;
}
.proj-hero-cue {
  display: inline-block;
  position: relative;
  margin-top: 20px;
  font-size: 10.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
}
/* Onzichtbare hitarea-uitbreiding: tekstlink blijft visueel identiek, tap-doel ≥44px */
.proj-hero-cue::before {
  content: "";
  position: absolute;
  inset: -14px -10px;
}
.proj-hero-cue:hover,
.proj-hero-cue:focus-visible {
  color: var(--gold);
}
/* Hero-entrance — zelfde materialiseer-choreografie als home en over-ons
   (hergebruikt .hero-anim + @keyframes materialiseer; reduced-motion, no-JS
   en de entree-af-afronding zijn daar al generiek geregeld) */
.proj-hero-inhoud .hero-anim:nth-child(1) {
  animation-delay: 0.25s;
}
.proj-hero-inhoud .hero-anim:nth-child(2) {
  animation-delay: 0.45s;
}
.proj-hero-inhoud .hero-anim:nth-child(3) {
  animation-delay: 0.65s;
}

/* ── PARTNER ── */
.proj-partner {
  background: var(--sand-light);
  padding: 88px var(--pad-x);
}
.proj-partner-grid {
  max-width: 1220px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 64px;
}
.proj-feitenrail {
  border-right: 1px solid var(--border);
  padding-right: 40px;
  list-style: none;
}
.proj-feitenrail li {
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brown-mid);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.proj-feitenrail li:first-child {
  padding-top: 4px;
}
.proj-feitenrail li:last-child {
  border-bottom: none;
}
.proj-partner h2 {
  font-family: "Cormorant Garamond", "Cormorant Fallback", serif;
  font-weight: 300;
  font-size: clamp(30px, 3.2vw, 42px);
  margin: 16px 0 24px;
  line-height: 1.1;
}
.proj-kolommen {
  columns: 2;
  column-gap: 52px;
}
.proj-kolommen p {
  break-inside: avoid;
  margin-bottom: 1.1em;
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 38ch;
}

/* ── ZAAL (fade wit → donker) ── */
.proj-zaal {
  background-color: var(--white);
  transition: background-color 0.9s var(--ease-brand);
}
.proj-zaal.is-donker {
  background-color: var(--brown-dark);
}
html:not(.js) .proj-zaal {
  background-color: var(--brown-dark);
}

.proj-oplocatie {
  padding: 84px var(--pad-x) 20px;
  text-align: center;
}
.proj-oplocatie-binnen {
  max-width: 68ch;
  margin: 0 auto;
}
.proj-oplocatie .proj-sectielabel {
  display: inline-block;
}
.proj-oplocatie .proj-sectielabel::after {
  margin-inline: auto;
}
.proj-oplocatie h2 {
  font-family: "Cormorant Garamond", "Cormorant Fallback", serif;
  font-weight: 300;
  font-size: clamp(30px, 3.4vw, 44px);
  margin: 18px 0 20px;
  transition: color 0.9s var(--ease-brand);
}
.proj-oplocatie p {
  color: var(--text-light);
  font-size: 16px;
  line-height: 1.7;
  transition: color 0.9s var(--ease-brand);
}
.proj-sectorregel {
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brown-mid);
}
.proj-zaal.is-donker .proj-oplocatie h2 {
  color: #ffffff;
}

/* De cursief heeft een eigen kleurregel en erft dus niet mee met de kop hierboven.
   Zonder deze regel blijft hij brown-mid staan zodra de zaal donker wordt — 1,6:1, en
   zonder JavaScript is de zaal dat vanaf de eerste render. */
.proj-zaal.is-donker .proj-oplocatie em {
  color: var(--gold);
}
.proj-zaal.is-donker .proj-oplocatie p {
  color: rgba(var(--sand-rgb), 0.78);
}
.proj-zaal.is-donker .proj-sectielabel {
  color: var(--gold);
}
.proj-zaal.is-donker .proj-sectorregel {
  color: var(--gold);
}
html:not(.js) .proj-oplocatie h2 {
  color: #ffffff;
}
/* Zelfde reden als bij .is-donker hierboven: de cursief erft niet mee. Zonder JavaScript
   is de zaal meteen donker, dus hier is de fout vanaf de eerste render zichtbaar. */
html:not(.js) .proj-oplocatie em {
  color: var(--gold);
}
html:not(.js) .proj-oplocatie p {
  color: rgba(var(--sand-rgb), 0.78);
}
html:not(.js) .proj-zaal .proj-sectielabel {
  color: var(--gold);
}

/* ── WAND + gouden rail (links, route-idioom) ── */
.proj-wand-wrap {
  position: relative;
  padding: 64px var(--pad-x) 84px;
}
.proj-wand {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 56px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.proj-voortgang {
  position: absolute;
  top: -8px;
  bottom: 30px;
  left: 0;
  width: 1px;
  background: rgba(var(--gold-rgb), 0.22);
  z-index: 0;
}
.proj-voortgang i {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: top;
  transform: scaleY(0);
}
html:not(.js) .proj-voortgang i {
  transform: scaleY(1);
}

/* Reizend Brosi-logo op de vul-kop — desktop-evenknie van de gloeiende tip,
   conform het route-band-idioom van de homepage (logo-brosi-mark, drop-shadow).
   JS zet de translateY; verborgen op mobiel, bij reduced-motion en zonder JS. */
.proj-rail-logo {
  display: none;
  position: absolute;
  top: 0;
  left: 0.5px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  box-shadow:
    0 0 14px rgba(var(--gold-rgb), 0.55),
    0 0 34px rgba(var(--gold-rgb), 0.25);
  will-change: transform;
  z-index: 2;
}
@media (min-width: 901px) {
  html.js .proj-rail-logo {
    display: block;
  }
}

/* Geen overflow:hidden op de tegel — de rail-rondjes (.proj-knoop) steken erbuiten;
   de 2px-afronding zit daarom op de vullende lagen zelf. min-width: 0 is verplicht:
   zonder overflow-clip krijgen aspect-ratio-tegels een "transferred" automatic
   minimum die de grid-tracks opblaast (rijgenoot-hoogte × eigen ratio). */
.proj-wand > * {
  min-width: 0;
}
.proj-tegel {
  position: relative;
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-radius: 2px;
  z-index: 1;
  cursor: pointer;
  background: var(--hero-bg);
}
.proj-tegel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  border-radius: 2px;
}
.proj-scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay-kaart);
  border-radius: 2px;
  transition: background 0.35s var(--ease-brand);
}
.proj-doeklicht {
  position: absolute;
  inset: 0;
  background: rgba(15, 7, 2, 0.5);
  border-radius: 2px;
  transition: background 0.9s var(--ease-brand);
}
.proj-tegel.is-belicht .proj-doeklicht {
  background: rgba(15, 7, 2, 0);
}
html:not(.js) .proj-tegel .proj-doeklicht {
  background: transparent;
}
.proj-tegel:hover .proj-scrim,
.proj-tegel:focus-visible .proj-scrim {
  background: var(--overlay-kaart-hover);
}
.proj-tegel:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(15, 7, 2, 0.55);
}
.proj-tegel-tekst {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 22px;
  z-index: 2;
}
.proj-tegel-label {
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  font-weight: 600;
  color: #ffffff;
  display: block;
  margin-bottom: 5px;
  text-shadow:
    0 1px 2px rgba(15, 7, 2, 0.95),
    0 0 8px rgba(15, 7, 2, 0.72);
}
.proj-tegel-label .proj-land {
  color: var(--gold);
}
.proj-tegel-naam {
  font-family: "Cormorant Garamond", "Cormorant Fallback", serif;
  font-weight: 300;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.08;
}
.proj-tegel-scope {
  display: block;
  margin-top: 7px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}
.proj-tegel-quote {
  display: block;
  margin-top: 9px;
  font-family: "Cormorant Garamond", "Cormorant Fallback", serif;
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  color: var(--sand-light);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease-brand), transform 0.35s var(--ease-brand);
}
.proj-tegel:hover .proj-tegel-quote,
.proj-tegel:focus-visible .proj-tegel-quote {
  opacity: 1;
  transform: none;
}
/* Open-uitnodiging — zelfde cue-idioom als .proj-hero-cue en "Bekijk product"
   op de homepage: Jost-uppercase op een gouden haarlijn. Altijd zichtbaar
   (de klant moet de mogelijkheid zíén, ook vóór hover), maar gedempt in rust
   zodat de wand kalm blijft; op hover/focus kleurt hij goud en schuift de
   pijl aan. Statisch zichtbaar = eigen fallback bij reduced-motion/no-hover. */
.proj-tegel-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.45);
  transition:
    color 0.35s var(--ease-brand),
    border-color 0.35s var(--ease-brand);
}
.proj-tegel-cue-pijl {
  transition: transform 0.5s var(--ease-brand);
}
.proj-tegel:hover .proj-tegel-cue,
.proj-tegel:focus-visible .proj-tegel-cue {
  color: var(--gold);
  border-color: var(--gold);
}
.proj-tegel:hover .proj-tegel-cue-pijl,
.proj-tegel:focus-visible .proj-tegel-cue-pijl {
  transform: translateX(4px);
}
/* Rail-rondjes — exact het route-stop-idioom van de homepage: open cirkel
   (gouden rand, gat in zaalkleur) die goud vult zodra de vul-kop hem passeert.
   Het gat kleurt in zaal-tempo (0.9s) mee van wit naar donker; het ontsteken
   zelf gaat op route-tempo (0.4s) via de transition op de doelstaat. */
.proj-knoop {
  position: absolute;
  top: 23px;
  left: -61.5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(var(--gold-rgb), 0.5);
  background: var(--white);
  transition:
    background-color 0.9s var(--ease-brand),
    border-color 0.4s var(--ease-brand);
  z-index: 2;
}
.proj-zaal.is-donker .proj-knoop:not(.is-bereikt) {
  background: var(--brown-dark);
}
.proj-knoop.is-bereikt {
  background: var(--gold);
  border-color: var(--gold);
  transition:
    background-color 0.4s var(--ease-brand),
    border-color 0.4s var(--ease-brand);
}
.proj-knoop.volg {
  display: none;
}
html:not(.js) .proj-knoop {
  background: var(--gold);
  border-color: var(--gold);
}

/* filmische plaatsing — volgorde 01-10: coral · horizon · lefer · zeeuws ·
   siebers · westerhof · lalau · fritten · dejacque · donaladn (blauwe luchten
   zigzaggen, elke rij één warm + één blauw beeld) */
.pt-coral {
  grid-column: 1 / 13;
  aspect-ratio: 21/9;
}
/* horizon-6 is een brede kustpanorama → past in het brede linkerslot 1/8 */
.pt-horizon {
  grid-column: 1 / 8;
  aspect-ratio: 16/10;
}
.pt-lefer {
  grid-column: 8 / 13;
  aspect-ratio: 4/5;
}
/* zeeuws-1-bron is 892px breed: nooit breder plaatsen dan 6 kolommen (upscale-grens) */
.pt-zeeuws {
  grid-column: 1 / 7;
  aspect-ratio: 10/7;
}
.pt-siebers {
  grid-column: 7 / 13;
  aspect-ratio: 4/4.4;
}
.pt-westerhof {
  grid-column: 1 / 7;
  aspect-ratio: 4/3;
}
/* lalau-4 is 4:3 → geen crop, en gelijke hoogte als westerhof in rij C */
.pt-lalau {
  grid-column: 7 / 13;
  aspect-ratio: 4/3;
}
.pt-fritten {
  grid-column: 1 / 13;
  aspect-ratio: 21/9;
}
/* Sluitrij: de twee jongste projecten, beide met uitsluitend staande opnames en bronnen
   die geen band dragen. Zelfde verhouding links en rechts, dus de rij sluit vlak boven
   de afsluitband. */
.pt-dejacque {
  grid-column: 1 / 7;
  aspect-ratio: 4/5;
}
/* donaladn-bronnen zijn ~1200 px breed: nooit breder plaatsen dan 6 kolommen (upscale-grens) */
.pt-donaladn {
  grid-column: 7 / 13;
  aspect-ratio: 4/5;
}

/* afsluitband Nº 11 */
.proj-afsluitband {
  grid-column: 1 / 13;
  position: relative;
  border: 1px solid rgba(var(--gold-rgb), 0.55);
  border-radius: 2px;
  padding: 50px 54px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 44px;
  align-items: center;
  margin-top: 14px;
}
.proj-afsluitband .proj-knoop {
  top: 49px;
}
.proj-nr-regel {
  font-size: 10px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(var(--sand-rgb), 0.6);
}
.proj-afsluitband h2 {
  font-family: "Cormorant Garamond", "Cormorant Fallback", serif;
  font-weight: 300;
  font-size: clamp(28px, 3vw, 40px);
  color: #ffffff;
  margin: 10px 0 12px;
}
.proj-band-sub {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(var(--sand-rgb), 0.78);
  max-width: 44ch;
}
.proj-band-acties {
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: flex-start;
}
.proj-band-knoppen {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.proj-band-stil {
  font-size: 12px;
  color: rgba(var(--sand-rgb), 0.55);
}
.proj-band-stil a {
  color: rgba(var(--sand-rgb), 0.85);
}
/* De lichte staat van de band bestaat alleen zolang JavaScript de zaal kan laten
   omslaan. Zonder script staat de zaal meteen op donker (zie html:not(.js) hierboven),
   maar krijgt hij nooit .is-donker — dan zou :not(.is-donker) hier donkere tekst op een
   donkere grond zetten (gemeten 1,2:1). Vandaar de html.js-voorwaarde. */
html.js .proj-zaal:not(.is-donker) .proj-afsluitband {
  border-color: var(--border);
}
html.js .proj-zaal:not(.is-donker) .proj-afsluitband h2 {
  color: var(--text);
}
html.js .proj-zaal:not(.is-donker) .proj-nr-regel,
html.js .proj-zaal:not(.is-donker) .proj-band-sub,
html.js .proj-zaal:not(.is-donker) .proj-band-stil {
  color: var(--text-light);
}

/* Band-gloed — de "ignite"-signatuur van de homepage-partnerkaart, hier ambient
   zodra de band in beeld is (touch kent geen hover; site.js zet .is-gloeiend /
   .is-ontstoken, pointer-devices sturen --mx/--my). De fx-laag clipt zichzelf:
   de band zelf mag geen overflow:hidden — de rail-knoop steekt erbuiten. */
.proj-afsluitband {
  --mx: 72%;
  --my: 46%;
}
.proj-band-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.9s var(--ease-brand);
}
/* Inhoud boven de fx-laag; de knoop (z-index 2) staat er sowieso buiten */
.proj-afsluitband > :not(.proj-band-fx):not(.proj-knoop) {
  position: relative;
  z-index: 1;
}
/* Warme lichtvlek — cursor-volgend op pointer-devices, op touch een rustige
   vaste haard bij de acties; radial geschaald naar de bandbreedte */
.proj-band-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    clamp(300px, 34vw, 480px) circle at var(--mx) var(--my),
    rgba(var(--gold-rgb), 0.13),
    transparent 70%
  );
  transition: opacity 1.2s var(--ease-brand);
}
.proj-afsluitband.is-gloeiend .proj-band-glow {
  opacity: 1;
}
/* Eénmalige lichtstreek bij het ontsteken (klasse-tegenhanger van de hover-streek) */
.proj-band-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 41%,
    rgba(var(--gold-rgb), 0.1) 47%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(var(--gold-rgb), 0.1) 53%,
    transparent 59%
  );
  transform: translateX(-115%);
  opacity: 0;
}
.proj-afsluitband.is-ontstoken .proj-band-fx::after {
  animation: projBandStreek 1.4s var(--ease-brand) 0.3s 1 both;
}
@keyframes projBandStreek {
  0% {
    transform: translateX(-115%);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    transform: translateX(115%);
    opacity: 0;
  }
}
/* Sintels — zelfde signatuur als .cta-embers, maar compositor-only: elke <i> is
   een onzichtbare kolom over de volle bandhoogte met de gloeiende punt onderaan
   (::after); translateY(-101%) laat de punt bodem→top reizen zonder layout-werk
   (ctaEmber animeert `bottom` — voor een ambient band vermijden we dat) */
.proj-band-embers {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease-brand);
}
.proj-band-embers i {
  position: absolute;
  top: 0;
  bottom: -6px;
  width: 3.5px;
  opacity: 0;
}
.proj-band-embers i::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--gold-hero);
  box-shadow:
    0 0 7px rgba(var(--gold-rgb), 0.9),
    0 0 14px rgba(var(--gold-rgb), 0.4);
}
.proj-afsluitband.is-gloeiend .proj-band-embers {
  opacity: 1;
}
.proj-afsluitband.is-gloeiend .proj-band-embers i {
  animation: projBandEmber var(--dur, 5.5s) linear var(--delay, 0s) infinite;
}
@keyframes projBandEmber {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  14% {
    opacity: 0.9;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-101%) translateX(7px);
    opacity: 0;
  }
}
/* Lichte zaal: goud-op-wit oogt vals — geen fx zolang de zaal niet donker is.
   Dekt ook no-JS af: zonder JS wordt de zaal nooit .is-donker en blijft de
   band gewoon volwaardig zónder effect. */
.proj-zaal:not(.is-donker) .proj-band-fx {
  opacity: 0;
}

/* knoppen + chatregel */
.proj-knop {
  background: var(--brown);
  color: #ffffff;
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-size: 10.5px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.5;
  padding: 14px 26px;
  border-radius: 2px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  transition: background 0.3s var(--ease-brand);
}
.proj-knop:hover {
  background: var(--brown-hover);
}
.proj-knop-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.proj-knop-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: transparent;
}
.proj-chatregel {
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brown);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  padding: 0 0 4px;
  text-decoration: none;
  display: inline-block;
}
.proj-chatregel::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-brand);
}
.proj-chatregel:hover::after,
.proj-chatregel:focus-visible::after {
  transform: scaleX(1);
}

/* hoofdstuk-cue */
.proj-cue {
  position: fixed;
  left: calc(var(--pad-x) - 38px);
  top: 96px;
  z-index: var(--z-float);
  background: rgba(var(--hero-bg-rgb), 0.88);
  color: var(--sand-light);
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 2px;
  border-left: 1px solid var(--gold);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s var(--ease-brand), transform 0.3s var(--ease-brand);
  pointer-events: none;
  max-width: 250px;
}
.proj-cue.is-aan {
  opacity: 1;
  transform: none;
}

/* ── DOSSIER (dialog) ── */
dialog.proj-dossier {
  border: none;
  padding: 0;
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  background: var(--white);
  color: var(--text);
  border-radius: 2px;
  margin: auto;
  overscroll-behavior: contain;
}
dialog.proj-dossier::backdrop {
  background: rgba(var(--hero-bg-rgb), 0.78);
}
.proj-dos-kop {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--brown-dark);
  color: #ffffff;
  padding: 14px 26px;
}
.proj-dos-kop .proj-folio {
  font-size: 10px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
}
.proj-dos-kop h2 {
  font-family: "Cormorant Garamond", "Cormorant Fallback", serif;
  font-weight: 300;
  font-size: 24px;
  color: #ffffff;
  outline: none;
}
.proj-dos-sluit {
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(var(--sand-rgb), 0.35);
  background: none;
  cursor: pointer;
  font-size: 20px;
  color: #ffffff;
  border-radius: 2px;
  flex: 0 0 auto;
}
.proj-dos-sluit:hover,
.proj-dos-sluit:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}

.proj-strip-zone {
  --strip-h: min(520px, 56vh); /* één bron voor strip-hoogte; de swipe-wenk rekent hierop */
  background: var(--hero-bg);
  position: relative;
}
.proj-strip {
  display: flex;
  overflow-x: auto;
  /* Vergrendel de blok-as: overflow-x:auto zonder expliciete overflow-y berekent
     overflow-y tot 'auto' (CSS-spec), waardoor iOS Safari er een verticale momentum-
     scroll van maakt bij een (sub-pixel/diagonale) veeg. overflow-y:hidden = puur
     horizontaal — universeel vangnet, óók op iOS <16 zonder overscroll-behavior;
     zelfde patroon en reden als .cat-grid. */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* Een swipe die óp de strip begint is van de strip: pan-x vergrendelt het
     gebaar op de x-as (geen diagonale dialog-wiebel op iOS/Android; pinch-zoom
     blijft toegestaan voor foto-inzoomen), overscroll-behavior-x stopt scroll-
     chaining naar dialog/pagina aan de uiteinden. Verticaal scrollen van het
     dossier búíten de strip blijft onaangeraakt. */
  touch-action: pan-x pinch-zoom;
  overscroll-behavior-x: contain;
  gap: 2px;
  height: var(--strip-h);
  scrollbar-width: none;
}
.proj-strip::-webkit-scrollbar {
  display: none;
}
.proj-strip figure {
  flex: 0 0 auto;
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always; /* 1 swipe = 1 foto: teller en segmenten tikken voorspelbaar mee */
  position: relative;
  margin: 0;
}
/* Elke foto op volle striphoogte met de EIGEN verhouding — niets bijgesneden
   (geen object-fit, geen breedte-cap). Alle slides zijn daardoor even HOOG (=
   --strip-h) maar verschillend breed; dat hoogte-gelijk-zijn houdt de strip
   verticaal stabiel bij het swipen. Bewust GEEN max-width op de <img>: dat
   triggert op iOS Safari de CSS2 §10.4 replaced-herberekening die de hoogte
   proportioneel meekrimpt (landschap wordt kort → verticale sprong). Portretten
   worden smal en volledig getoond (met natuurlijke peek van de buren); brede
   landschappen vullen beeldvullend de hoogte. De swipe-affordance komt van de
   eenmalige wenk hieronder. VALKUIL: nooit max-width op deze <img> zetten. */
.proj-strip img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block; /* geen inline-baseline-descender = geen dun donker randje onderaan */
}
/* Eenmalige swipe-wenk (JS-gebouwd in initStrip, alleen touch): zelfde idioom
   als #deckHint/#partnerHint elders op de site, hier als pill op de foto omdat
   de strip over wisselende fotografie ligt. pointer-events: none — blokkeert
   het gebaar nooit. Wit op donkere scrim = leescontrast-uitzondering. */
.proj-strip-wenk {
  position: absolute;
  left: 50%;
  top: calc(var(--strip-h) - 54px);
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 2px;
  background: rgba(var(--hero-bg-rgb), 0.72); /* zelfde scrim-familie als .proj-strip-pijl */
  border: 1px solid rgba(var(--sand-rgb), 0.25);
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.9);
  pointer-events: none;
  transition:
    opacity 0.4s var(--ease-brand),
    visibility 0.4s var(--ease-brand);
}
.proj-strip-wenk .wenk-pijl {
  display: inline-block; /* transform werkt niet op inline */
  color: var(--gold);
  font-size: 13px;
  line-height: 1;
  animation: projStripWenk 2s var(--ease-brand) 4;
}
.proj-strip-wenk.weg {
  opacity: 0;
  visibility: hidden;
}
@keyframes projStripWenk {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}
.proj-strip-pijl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  background: rgba(var(--hero-bg-rgb), 0.7);
  border: 1px solid rgba(var(--sand-rgb), 0.35);
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
  border-radius: 2px;
  display: none;
}
.proj-strip-pijl:hover,
.proj-strip-pijl:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}
.proj-strip-pijl.links {
  left: 14px;
}
.proj-strip-pijl.rechts {
  right: 14px;
}
@media (hover: hover) {
  .proj-strip-pijl {
    display: block;
  }
}
.proj-strip-onder {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 26px 14px;
  background: var(--hero-bg);
}
.proj-strip-voortgang {
  display: flex;
  gap: 6px;
}
.proj-strip-voortgang button {
  width: 28px;
  height: 14px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 0;
}
.proj-strip-voortgang button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
  background: rgba(var(--gold-rgb), 0.25);
  transition: background 0.35s var(--ease-brand);
}
.proj-strip-voortgang button.is-actief::after {
  background: var(--gold);
}
.proj-strip-voortgang button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.proj-strip-teller {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 2.2px;
  font-weight: 600;
  color: rgba(var(--sand-rgb), 0.7);
  font-variant-numeric: tabular-nums;
}

.proj-dos-body {
  padding: 34px 40px 0;
}
.proj-dos-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 40px;
}
.proj-verhaal p {
  font-size: 16px;
  line-height: 1.7;
  max-width: 60ch;
  margin-bottom: 1em;
}
.proj-dos-leverde-kop {
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brown-mid);
  margin-bottom: 8px;
}
.proj-dos-leverde-kop::after {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--gold);
  margin-top: 8px;
}
.proj-dos-leverde ul {
  list-style: none;
}
.proj-dos-leverde li {
  font-size: 10.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brown-mid);
  padding: 9px 0 9px 18px;
  position: relative;
  border-bottom: 1px solid var(--border);
}
.proj-dos-leverde li:last-child {
  border-bottom: none;
}
.proj-dos-leverde li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 1px;
  background: var(--gold);
}
.proj-dos-brug {
  margin: 22px 0 16px;
}

.proj-dos-cta {
  position: sticky;
  bottom: 0;
  z-index: 4;
  background: rgba(var(--white-rgb), 0.96);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--border);
  margin: 0 -40px;
  padding: 15px 40px calc(15px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.proj-stilletjes {
  font-size: 11.5px;
  color: var(--text-light);
}
.proj-stilletjes a {
  color: var(--brown-mid);
}
.proj-dos-cta .proj-sitelink {
  margin-left: auto;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-light);
  text-decoration: none;
}
.proj-dos-cta .proj-sitelink:hover {
  color: var(--brown);
}

.proj-dos-volgend {
  display: flex;
  margin: 0 -40px;
  border-top: 1px solid var(--border);
}
.proj-dos-volgend button {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--sand-light);
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  padding: 14px 40px;
  min-height: 64px;
  text-align: left;
}
.proj-dos-volgend button + button {
  border-left: 1px solid var(--border);
  justify-content: flex-end;
  text-align: right;
}
.proj-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.proj-vlabel {
  display: block;
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brown-mid);
}
.proj-vnaam {
  font-family: "Cormorant Garamond", "Cormorant Fallback", serif;
  font-size: 20px;
  line-height: 1.1;
}
.proj-dos-volgend button:hover .proj-vnaam,
.proj-dos-volgend button:focus-visible .proj-vnaam {
  color: var(--brown);
}

/* ── motion ── */
html.js .proj-reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(4px); /* materialiseren = opacity + beweging + lichte blur (BRAND §9) */
  transition:
    opacity 0.9s var(--ease-brand),
    transform 0.9s var(--ease-brand),
    filter 0.9s var(--ease-brand);
  transition-delay: var(--proj-d, 0s);
}
html.js .proj-reveal.is-zichtbaar {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.pt-lefer,
.pt-siebers,
.pt-lalau,
.pt-donaladn {
  --proj-d: 0.08s;
}
/* Feitenrail materialiseert een tel vóór de partnertekst */
.proj-partner-grid > div.proj-reveal {
  --proj-d: 0.08s;
}
dialog.proj-dossier[open] {
  animation: projDosIn 0.28s var(--ease-brand);
}
dialog.proj-dossier[open]::backdrop {
  animation: projBdIn 0.3s var(--ease-brand);
}
@keyframes projDosIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes projBdIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Exit langs hetzelfde pad (site.js zet .is-sluitend; reduced-motion slaat dit over) */
dialog.proj-dossier.is-sluitend {
  animation: projDosUit 0.22s var(--ease-brand) both;
}
dialog.proj-dossier.is-sluitend::backdrop {
  animation: projBdUit 0.22s linear both;
}
@keyframes projDosUit {
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}
@keyframes projBdUit {
  to {
    opacity: 0;
  }
}
/* Cue-tekst: zachte 140ms-wissel (JS-gestuurd; projecten profiteert mee) */
.proj-cue-tekst {
  display: block;
  transition: opacity 0.14s var(--ease-brand);
}
.proj-cue-tekst.wisselt {
  opacity: 0;
}

/* ── no-JS: dossiers als leesbare secties ── */
html:not(.js) dialog.proj-dossier {
  display: block;
  position: static;
  width: auto;
  max-width: 1120px;
  max-height: none;
  margin: 44px auto;
  border: 1px solid var(--border);
}
html:not(.js) .proj-dos-sluit,
html:not(.js) .proj-dos-volgend,
html:not(.js) .proj-strip-pijl,
html:not(.js) .proj-strip-onder,
html:not(.js) .proj-cue,
/* strip-beelden laden via data-src (JS): zonder JS is de zone een lege donkere band */
html:not(.js) .proj-strip-zone {
  display: none;
}
html:not(.js) .proj-reveal {
  opacity: 1;
}
html:not(.js) .proj-tegel-quote {
  opacity: 1;
  transform: none;
}
/* zonder JS opent het dossier niet als dialog — beloof dan ook geen klik-ervaring */
html:not(.js) .proj-tegel-cue {
  display: none;
}
html:not(.js) .proj-strip-wenk {
  display: none;
}

@media (hover: none) {
  .proj-tegel-quote {
    opacity: 1;
    transform: none;
  }
  /* Op touch zijn de segmenten de enige precieze fotonavigatie (pijlen zijn
     hover-only): vul de beschikbare breedte en maak ze 44px hoog. Het 2px-
     lijntje blijft visueel identiek, alleen de hitarea groeit. */
  .proj-strip-voortgang {
    flex: 1 1 auto;
    min-width: 0;
  }
  .proj-strip-voortgang button {
    flex: 1 1 28px;
    min-width: 0;
    max-width: 48px;
    height: 44px;
  }
  .proj-strip-voortgang button::after {
    top: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .proj-reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .proj-hero img {
    animation: none !important;
    transform: none !important;
  }
  .proj-zaal {
    transition: none;
  }
  .proj-tegel .proj-doeklicht {
    transition: none;
    background: rgba(15, 7, 2, 0) !important;
  }
  .proj-voortgang i {
    transform: scaleY(1) !important;
  }
  .proj-knoop {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    transition: none;
  }
  .proj-rail-logo,
  .proj-voortgang::after {
    display: none !important;
  }
  dialog.proj-dossier[open],
  dialog.proj-dossier[open]::backdrop {
    animation: projFadeIn 0.12s linear;
  }
  @keyframes projFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .proj-strip {
    scroll-behavior: auto;
  }
  .proj-tegel-quote,
  .proj-tegel-cue,
  .proj-tegel-cue-pijl,
  .proj-strip-wenk,
  .proj-chatregel::after,
  .proj-cue {
    transition: none;
  }
  .proj-strip-wenk .wenk-pijl {
    animation: none; /* de wenk-pill zelf blijft statisch zichtbaar = de fallback */
  }
}

/* ── tablet (641–900): tweekoloms wand ── */
@media (max-width: 900px) {
  .proj-hero {
    height: 52vh;
  }
  .proj-hero-inhoud {
    padding: 0 var(--pad-x-mobiel) 34px;
  }
  .proj-partner {
    padding: 64px var(--pad-x-mobiel);
  }
  .proj-partner-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  /* feitenrail ≤900px — "Zwitsers hairline-raster": de 1px grid-gaps ZIJN de
     hairlines (rail = randkleur, cellen = sectiekleur), dus de verticale divider
     én de rijlijnen komen uit één bron en lijnen per constructie perfect uit —
     ze kunnen niet uiteenlopen zoals losse per-cel-borders. minmax(0,1fr) borgt
     nul overflow tot 320px; clamp() schaalt type/ruimte vloeiend zonder sprong;
     het laatste feit spant vol breed en staat sereen gecentreerd als afsluiter. */
  .proj-feitenrail {
    border-right: none;
    padding: 0;
    margin: 0;
    --cel-py: clamp(11px, 3vw, 15px);
    --cel-px: clamp(13px, 3.8vw, 22px);
    --ls: clamp(1.4px, 0.5vw, 2px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background-color: var(--border);
    border-block-start: 1px solid var(--border);
  }
  .proj-feitenrail li {
    margin: 0;
    border: 0;
    padding-block: var(--cel-py);
    padding-inline: var(--cel-px);
    background-color: var(--sand-light);
    display: flex;
    align-items: center;
    min-height: clamp(42px, 11vw, 48px);
    font-size: clamp(9.5px, 2.6vw, 10.5px);
    letter-spacing: var(--ls);
    line-height: 1.35;
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: none;
  }
  .proj-feitenrail li:first-child {
    padding-block: var(--cel-py);
  }
  .proj-feitenrail li:last-child {
    grid-column: 1 / -1;
    justify-content: center;
    text-align: center;
    text-indent: calc(var(--ls) / 2);
  }
  .proj-kolommen {
    columns: 1;
  }
  .proj-kolommen p {
    max-width: 68ch;
  }
  .proj-oplocatie {
    padding: 64px var(--pad-x-mobiel) 16px;
  }
  .proj-wand-wrap {
    padding: 48px var(--pad-x-mobiel) 72px;
  }
  .proj-wand {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding-left: 44px;
  }
  .pt-coral,
  .pt-fritten,
  .proj-afsluitband {
    grid-column: 1 / -1;
  }
  .pt-coral,
  .pt-fritten {
    aspect-ratio: 16/9;
  }
  .pt-horizon,
  .pt-zeeuws,
  .pt-westerhof,
  .pt-dejacque {
    grid-column: 1 / 2;
  }
  .pt-lefer,
  .pt-siebers,
  .pt-lalau,
  .pt-donaladn {
    grid-column: 2 / 3;
  }
  .proj-knoop {
    left: -49.5px;
  }
  /* Gloeiende vultip — mobiele/tablet-evenknie van het reizende logo,
     conform het route-band-idioom (JS zet --proj-tip in px) */
  html.js .proj-voortgang::after {
    content: "";
    position: absolute;
    left: 50%;
    top: var(--proj-tip, 0px);
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow:
      0 0 10px rgba(var(--gold-rgb), 0.9),
      0 0 22px rgba(var(--gold-rgb), 0.45);
  }
  /* De verticale reis begint met een gevuld rondje bovenaan */
  .proj-knoop.is-eerste {
    background: var(--gold);
    border-color: var(--gold);
  }
  .proj-cue {
    left: 0;
    right: 0;
    top: 64px;
    /* Onder de nav (z 100): de chip schuift eronder vandaan i.p.v. eroverheen */
    z-index: calc(var(--z-nav) - 1);
    border-radius: 0;
    border-left: none;
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.4);
    text-align: center;
    transform: translateY(-100%);
    max-width: none;
  }
  .proj-cue.is-aan {
    transform: none;
  }
  .proj-strip-zone {
    --strip-h: 48vh; /* strip-hoogte én wenk-positie volgen automatisch */
  }
  @supports (height: 1svh) {
    .proj-strip-zone {
      --strip-h: 48svh; /* iOS: klein-viewport, geen meegroei met de URL-balk */
    }
  }
  .proj-dos-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .proj-chatregel {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Zelfde 44px-behandeling als .proj-chatregel hierboven */
  .proj-stilletjes a,
  .proj-dos-cta .proj-sitelink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .proj-afsluitband {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 38px 34px;
    /* gestapelde band: rusthaard van de gloed centreren, iets boven het midden */
    --mx: 50%;
    --my: 40%;
  }
}

/* ── mobiel (≤640): één kolom, knoop per tegel ── */
@media (max-width: 640px) {
  .proj-wand {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-left: 26px;
  }
  .proj-wand > .proj-tegel,
  .proj-afsluitband {
    grid-column: 1 / -1;
  }
  .pt-coral,
  .pt-fritten,
  .pt-horizon {
    aspect-ratio: 16/11;
  }
  .pt-lefer,
  .pt-siebers,
  .pt-dejacque,
  .pt-donaladn {
    aspect-ratio: 4/5;
  }
  .pt-zeeuws {
    aspect-ratio: 10/7;
  }
  .pt-westerhof,
  .pt-lalau {
    aspect-ratio: 4/3;
  }
  .proj-knoop {
    left: -31.5px;
    top: 17px;
  }
  .proj-knoop.volg {
    display: block;
  }
  .proj-tegel-tekst {
    left: 20px;
    right: 20px;
    bottom: 16px;
  }
  .proj-tegel-cue {
    margin-top: 10px;
    font-size: 9.5px;
    letter-spacing: 2px;
  }
  dialog.proj-dossier {
    width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  .proj-strip-zone {
    --strip-h: 44vh;
  }
  @supports (height: 1svh) {
    .proj-strip-zone {
      --strip-h: 44svh;
    }
  }
  .proj-dos-body {
    padding: 24px 22px 0;
  }
  .proj-dos-cta {
    margin: 0 -22px;
    padding: 12px 22px calc(12px + env(safe-area-inset-bottom));
    gap: 14px;
  }
  .proj-dos-cta .proj-sitelink {
    margin-left: 0;
  }
  /* Boekspread: vorige|volgende als twee gelijke helften naast elkaar (zelfde
     ruimtelijke model als desktop én als de swipe-richting van de strip erboven);
     namen geklemd op 2 regels, aria-labels dragen altijd de volledige naam */
  .proj-dos-volgend {
    margin: 0 -22px;
  }
  .proj-dos-volgend button {
    gap: 10px;
    padding: 14px 14px 14px 22px;
    min-height: 72px;
  }
  .proj-dos-volgend button + button {
    padding: 14px 22px 14px 14px;
  }
  .proj-dos-volgend button > span {
    min-width: 0; /* verplicht: anders krimpt het flex-kind niet en werkt de clamp niet */
  }
  .proj-dos-volgend .proj-thumb {
    width: 40px;
    height: 40px;
  }
  .proj-dos-volgend .proj-vlabel {
    font-size: 9px;
    letter-spacing: 1.8px;
    margin-bottom: 2px;
  }
  .proj-dos-volgend .proj-vnaam {
    font-size: 16px;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.35em;
  }
  .proj-dos-volgend button:active {
    background:
      linear-gradient(rgba(var(--gold-rgb), 0.08), rgba(var(--gold-rgb), 0.08))
      var(--sand-light);
  }
  .proj-dos-volgend button:active .proj-vnaam {
    color: var(--brown);
  }
  .proj-afsluitband {
    padding: 30px 22px;
  }
  .proj-afsluitband .proj-knoop {
    top: 33px;
  }
}

/* ═══ VOETNAVIGATIE — echte links in de footer (SEO + het no-JS-pad van de hamburger) ═══ */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 18px var(--pad-x) 0;
}

.footer-nav a {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s var(--ease-brand);
}

.footer-nav a:hover {
  color: var(--gold-hero);
}

@media (max-width: 900px) {
  .footer-nav {
    padding: 18px var(--pad-x-mobiel) 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   JURIDISCHE PAGINA'S — privacy.html · cookies.html · disclaimer.html
   Sobere leespagina's; leunen volledig op de merktokens en fonts hierboven.
   ═══════════════════════════════════════════════════════════════════════════ */

.legal-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px var(--pad-x-mobiel) 96px;
}

.legal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 56px;
}

.legal-top img {
  height: 44px;
  width: auto;
}

.legal-terug {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brown-mid);
  text-decoration: none;
}

.legal-terug:hover {
  color: var(--brown);
}

.legal-wrap h1 {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-weight: 300;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 10px;
}

.legal-datum {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 40px;
}

.legal-wrap h2 {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-weight: 300;
  font-size: 26px;
  color: var(--text);
  margin: 40px 0 12px;
}

.legal-wrap h3 {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--brown-mid);
  margin: 26px 0 8px;
}

.legal-wrap p,
.legal-wrap li {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text);
  max-width: 65ch;
}

.legal-wrap p + p {
  margin-top: 12px;
}

.legal-wrap ul {
  padding-left: 20px;
  margin: 10px 0;
}

.legal-wrap a {
  color: var(--brown-mid);
}

/* Cookietabel — scrollt binnen zichzelf, de pagina zelf nooit horizontaal */
.legal-tabelwrap {
  overflow-x: auto;
  margin: 16px 0 8px;
  border: 1px solid var(--border);
  border-radius: 2px;
}

.legal-tabel {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
  font-size: 13px;
}

.legal-tabel th,
.legal-tabel td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.6;
}

.legal-tabel th {
  font-family: "Jost", "Jost Fallback", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--brown-mid);
  background: var(--sand-light);
  white-space: nowrap;
}

.legal-tabel tr:last-child td {
  border-bottom: 0;
}

.legal-tabel code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--brown);
  white-space: nowrap;
}

/* Vooruitblik-blok: wat er verandert zodra de webshop/advertenties live gaan */
.legal-straks {
  margin: 20px 0;
  padding: 18px 20px;
  background: var(--sand-light);
  border-left: 1px solid var(--gold);
  border-radius: 2px;
}

.legal-straks p {
  font-size: 13.5px;
}

.legal-voet {
  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-light);
}

/* Onderlinge navigatie tussen de juridische pagina's */
.legal-zusters {
  margin-top: 12px;
  font-size: 12px;
}

.legal-zusters a {
  color: var(--text-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-zusters a:hover {
  color: var(--brown-mid);
}

/* Footer: juridische linkregel onder de bedrijfsgegevens */
.footer-legal {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.5px;
  text-align: center;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s var(--ease-brand);
}

.footer-legal a:hover {
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   Toestemming — voorkeuren voor niet-noodzakelijke technieken
   ══════════════════════════════════════════════════════════════════════════

   Onderin, ingetogen, en met een eigen breedte zodat de hero en de primaire
   oproep zichtbaar blijven. Vastgezet, dus hier hoort de veilige onderruimte
   van het toestel juist wél in — de regel die hem verbiedt geldt voor
   elementen in de documentstroom.

   De drie knoppen zijn met opzet identiek in formaat, gewicht en contrast.
   Er is hier geen primaire knop: het moment dat weigeren zwaarder oogt dan
   accepteren, is de keuze niet meer vrij. */

.toestemming {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1200;
  display: flex;
  justify-content: center;
  padding: 0 var(--pad-x-mobiel)
    calc(var(--pad-x-mobiel) + env(safe-area-inset-bottom));
}

.toestemming[hidden] {
  display: none;
}

.toestemming-paneel {
  width: 100%;
  max-width: 720px;
  background: var(--white);
  border: 1px solid var(--gold-divider);
  padding: 22px;
}

.toestemming-kop {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 6px;
}

.toestemming-tekst {
  font-family: "Jost", sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-light);
  margin: 0 0 16px;
  max-width: 56ch;
}

/* Drie gelijke kolommen op desktop; onder elkaar op een smal scherm, waar
   naast elkaar te weinig raakvlak per knop overhoudt. */
.toestemming-knoppen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.toestemming-knop {
  font-family: "Jost", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  color: var(--brown-dark);
  background: transparent;
  border: 1px solid var(--brown);
  border-radius: 2px;
  padding: 11px 8px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.2s var(--ease-brand),
    border-color 0.2s var(--ease-brand);
}

.toestemming-knop:hover {
  background: var(--sand-light);
  border-color: var(--brown-hover);
}

.toestemming-knop:active {
  transform: scale(0.97);
}

.toestemming-links {
  font-family: "Jost", sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: var(--text-light);
  margin: 12px 0 0;
}

.toestemming-link {
  color: var(--text-light);
  text-decoration: underline;
}

.toestemming-link:hover {
  color: var(--brown-mid);
}

/* Instellingen */

.toestemming-rij {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--gold-divider);
}

.toestemming-rij:last-of-type {
  border-bottom: 1px solid var(--gold-divider);
  margin-bottom: 16px;
}

.toestemming-vink {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--brown);
}

.toestemming-vink:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.toestemming-rij-naam {
  display: block;
  font-family: "Jost", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

.toestemming-vink:disabled + div .toestemming-rij-naam {
  cursor: default;
}

.toestemming-vast {
  font-weight: 300;
  color: var(--text-light);
}

.toestemming-rij-uitleg,
.toestemming-rij-diensten {
  font-family: "Jost", sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-light);
  margin: 2px 0 0;
}

.toestemming-rij-diensten {
  margin-top: 6px;
}

/* De focusring van de site geldt hier onverkort; hij staat niet uit en wordt
   niet vervangen. Deze regel maakt hem alleen zichtbaar op de rand van het
   paneel, waar de knop anders tegen de omlijsting aan valt. */
.toestemming :focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .toestemming-knoppen {
    grid-template-columns: 1fr;
  }

  .toestemming-paneel {
    padding: 18px;
  }
}

/* De partnerbeelden en de merkvoet delen één doorlopende grond. */
.dealer-section {
  padding-bottom: 48px;
  background-image: linear-gradient(to bottom, var(--brown-dark) calc(100% - 360px), var(--text));
}

.footer-afsluiting {
  margin-top: -1px;
  background: var(--text);
  border-top: 0;
  padding: 48px var(--pad-x) 32px;
}

.footer-afsluiting .footer-main {
  grid-template-columns: 1.3fr 1fr 0.85fr;
  gap: clamp(32px, 4vw, 72px);
  margin-bottom: 0;
  padding-bottom: 56px;
  border-bottom: 0;
}

.footer-afsluiting .footer-logo {
  height: 60px;
  margin-bottom: 28px;
}

.footer-afsluiting .footer-tagline {
  max-width: 21ch;
  font-size: clamp(32px, 2.7vw, 44px);
  font-style: normal;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 24px;
  text-wrap: balance;
}

.footer-tagline em { display: block; font-weight: 300; }
.footer-tagline-punt { font-size: 0; }

.footer-afsluiting .footer-label {
  color: var(--gold);
  margin-bottom: 16px;
}

.footer-afsluiting .footer-cert {
  max-width: 43ch;
  color: rgba(var(--white-rgb), 0.7);
}

.footer-afsluiting .footer-main > div:not(:first-child) { padding-top: 8px; }
.footer-afsluiting .footer-kop { margin-bottom: 28px; }
.footer-afsluiting .footer-vestiging { margin-bottom: 28px; }
.footer-afsluiting .footer-vestiging strong { font-size: 24px; line-height: 1.2; margin-bottom: 8px; }
.footer-afsluiting .footer-contact { gap: 16px; }
.footer-afsluiting .footer-contact a { line-height: 1.6; }

/* Vestigingen en contact: op breed scherm altijd open, op een smal scherm inklapbaar. */
.footer-groep > summary { display: block; list-style: none; }
.footer-groep > summary::-webkit-details-marker { display: none; }

@media (min-width: 641px) {
  .footer-groep > summary { pointer-events: none; }
}

.footer-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nav signature" "legal signature";
  column-gap: 40px;
  row-gap: 16px;
  align-items: center;
  padding-top: 28px;
}

.footer-slot .footer-nav {
  grid-area: nav;
  justify-content: flex-start;
  gap: 16px 28px;
  padding: 0;
  margin: 0;
}

.footer-slot .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-slot .footer-bottom { grid-area: legal; align-items: flex-start; padding: 0; gap: 8px; }
.footer-slot .footer-copy { text-align: left; }
.footer-slot .footer-legal { text-align: left; line-height: 2; }
.footer-slot .footer-legal a:not([hidden]) { display: inline-block; padding-block: 3px; }

.footer-signatuur {
  grid-area: signature;
  align-self: end;
  justify-self: end;
  display: block;
  width: 84px;
  margin-right: 64px;
  padding-block: 4px;
  text-decoration: none;
  touch-action: manipulation;
}
.footer-signatuur img { display: block; width: 100%; height: auto; opacity: 0.6; transition: opacity 200ms var(--ease-brand); }
.footer-signatuur:hover img, .footer-signatuur:focus-visible img { opacity: 0.9; }
.footer-signatuur:active { transform: scale(0.97); }

@media (max-width: 1100px) {
  .footer-afsluiting .footer-main { grid-template-columns: 1.1fr 1fr; gap: 40px; }
  .footer-afsluiting .footer-main > div:first-child { grid-row: span 2; }
  .footer-afsluiting .footer-main > div:not(:first-child) { padding-top: 0; }
  .footer-afsluiting .footer-vestiging:last-child { margin-bottom: 0; }
}

@media (max-width: 640px) {
  .footer-afsluiting { padding: 40px var(--pad-x-mobiel) 28px; }
  .footer-afsluiting .footer-main { grid-template-columns: 1fr; gap: 0; padding-bottom: 32px; }
  .footer-afsluiting .footer-main > div:first-child { grid-row: auto; margin-bottom: 32px; }
  .footer-afsluiting .footer-logo { height: 36px; margin-bottom: 20px; }
  .footer-afsluiting .footer-tagline { font-size: clamp(24px, 6.6vw, 28px); max-width: none; margin-bottom: 16px; }
  .footer-afsluiting .footer-label { margin-bottom: 12px; }
  .footer-groep { border-top: 1px solid rgba(var(--white-rgb), 0.12); }
  .footer-afsluiting .footer-groep > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    margin-bottom: 0;
    cursor: pointer;
    touch-action: manipulation;
  }
  .footer-groep > summary::after {
    content: "+";
    font-family: "Jost", "Jost Fallback", sans-serif;
    font-weight: 300;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--gold);
  }
  .footer-groep[open] > summary::after { transform: rotate(45deg); }
  .footer-groep::details-content { height: 0; overflow: clip; }
  .footer-groep[open]::details-content { height: auto; }
  /* Alleen een klik van de bezoeker beweegt; het dichtzetten bij het laden niet. */
  .footer-groep[data-bediend] > summary::after { transition: transform 0.3s var(--ease-brand); }
  .footer-groep[data-bediend]::details-content {
    transition:
      height 0.3s var(--ease-brand),
      content-visibility 0.3s allow-discrete;
  }
  .footer-afsluiting .footer-vestiging { margin-bottom: 20px; }
  .footer-afsluiting .footer-groep .footer-vestiging:last-child { margin-bottom: 24px; }
  .footer-afsluiting .footer-vestiging strong { font-size: 20px; margin-bottom: 4px; }
  .footer-afsluiting .footer-contact { gap: 0; margin-bottom: 16px; }
  .footer-afsluiting .footer-contact a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-afsluiting .footer-cta-blok { padding-top: 28px; border-top: 1px solid rgba(var(--white-rgb), 0.12); }
  .footer-slot { grid-template-columns: 1fr; grid-template-areas: "nav" "legal" "signature"; gap: 16px; padding-top: 0; }
  .footer-slot .footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .footer-slot .footer-legal a { padding-block: 8px; }
  .footer-signatuur { justify-self: start; width: 72px; margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) { .footer-signatuur img { transition: none; } .footer-signatuur:active { transform: none; } }
@media (prefers-reduced-motion: reduce) { .footer-groep[data-bediend] > summary::after { transition: none; } }
@media (prefers-reduced-motion: reduce) { .footer-groep[data-bediend]::details-content { transition: none; } }