/* ===========================================================
   Peperkamp Modelbouw, Visual Identity
   Wit & rood, rechtstreeks uit het logo.
   =========================================================== */
:root {
  --ink:          #1a1a1a;
  --sepia-900:    #1a1a1a;
  --sepia-800:    #2a2a2a;
  --sepia-700:    #4a4a4a;
  --sepia-500:    #7a7a7a;
  --sepia-300:    #c8c8c8;

  /* Helder rood, zoals Rowasp en Interhobby */
  --brick-700:    #a6160f;
  --brick-600:    #d8231b;
  --brick-500:    #e53c33;

  --brass-600:    #d8231b;
  --brass-500:    #e53c33;
  --brass-400:    #fbe0de;

  --paper:        #ffffff;
  --paper-soft:   #f7f7f7;
  --paper-warm:   #f0f0f0;
  --rule:         rgba(0, 0, 0, 0.10);
  --rule-soft:    rgba(0, 0, 0, 0.05);

  --shadow-xs:    0 1px 2px rgba(15, 15, 15, 0.05);
  --shadow-sm:    0 2px 12px rgba(15, 15, 15, 0.06);
  --shadow-md:    0 14px 36px rgba(15, 15, 15, 0.09);
  --shadow-lg:    0 28px 70px rgba(15, 15, 15, 0.14);

  --radius-sm:    6px;
  --radius:       12px;
  --radius-lg:    20px;

  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:          420ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  background: #ffffff;
  overflow-x: clip;
  /* Ankersprongen (submenu-links) stoppen netjes ónder de plakkende header */
  scroll-padding-top: 190px;
}
@media (max-width: 720px) {
  html { scroll-padding-top: 124px; }
}
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--ink);
  background-color: #ffffff;
  line-height: 1.65;
  font-size: 16px;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Typografie: Inter overal (professioneel webshop-gevoel) ---------- */
h1, h2, h3, h4, h5 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--sepia-900);
  line-height: 1.15;
}
h1 {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
h3 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
h4 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sepia-900);
}

/* .script class blijft bestaan maar valt nu gewoon terug op Inter */
.script { font-weight: 500; font-style: italic; }

em .italic {
  font-style: normal;
  color: var(--brick-600);
  font-weight: inherit;
}

p { color: var(--sepia-700); }
a { color: var(--brick-600); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--sepia-900); }

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

.container { max-width: 1220px; margin: 0 auto; padding: 0 1.6rem; }

.eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brick-600);
  margin-bottom: 1.1rem;
  position: relative;
  padding-left: 2.4rem;
}
.eyebrow::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 1.8rem; height: 2px;
  background: var(--brick-600);
}
.eyebrow.center { padding-left: 0; }
.eyebrow.center::before { display: none; }

.rule {
  width: 48px; height: 2px; background: var(--brick-600); border: none; margin: 1rem 0 1.4rem;
}
.rule.center { margin-left: auto; margin-right: auto; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid var(--rule);
  transition: box-shadow var(--dur) var(--ease);
  padding-top: env(safe-area-inset-top);
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: var(--rule);
  box-shadow: var(--shadow-xs);
}
.nav-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 1.1rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.brand img {
  height: 120px;
  width: auto;
  display: block;
}
@media (max-width: 980px) {
  .nav-inner { padding: 0.95rem 1.4rem; }
  .brand img { height: 98px; }
}
@media (max-width: 720px) {
  .nav-inner { padding: 0.8rem 1.1rem; }
  .brand img { height: 70px; }
}
.footer-brand .brand img {
  height: 64px;
  background: #ffffff;
  padding: 10px 14px;
  border-radius: 8px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--sepia-900);
  letter-spacing: -0.01em;
}
.brand-text span {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sepia-500);
  font-weight: 500;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 0.1rem;
  align-items: center;
}
.nav-menu a {
  color: var(--sepia-800);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  position: relative;
  transition: color var(--dur) var(--ease);
}
.nav-menu a::after {
  content: '';
  position: absolute;
  left: 1rem; right: 1rem;
  bottom: 0.35rem;
  height: 1px;
  background: var(--brick-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease);
}
.nav-menu a:hover::after,
.nav-menu a.active::after { transform: scaleX(1); }
.nav-menu a:hover, .nav-menu a.active { color: var(--brick-600); }

/* Autootje dat onder het logo in de header racet, met merklogo's erachter */
.nav-racer {
  position: relative;
  height: 50px;
  overflow: hidden;
  background: var(--paper);
  border-top: 0;
  border-bottom: 2px solid var(--brick-600);
}
.nav-racer::before { content: none; }

/* Rig met merken-ketting + autootje, JS schuift 'm; 2 kopieën = naadloze loop */
.nav-racer-rig {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  width: max-content;
  transform: translate3d(-1000px, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.racer-unit {
  display: flex;
  align-items: center;
  height: 100%;
  padding-right: 2.4rem;
  flex-shrink: 0;
}
/* Merk-bordje aan de ketting */
.merk-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin-right: 20px;          /* ruimte voor de twee touwtjes */
  padding: 0 0.6rem;
  background: #ffffff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.13);
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brick-700);
  white-space: nowrap;
  flex-shrink: 0;
}
/* Twee touwtjes van dit bordje naar het bordje rechts ervan (of naar de auto) */
.merk-card::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  width: 20px;
  height: 9px;
  transform: translateY(-50%);
  border-top: 1.5px solid rgba(43, 29, 20, 0.5);
  border-bottom: 1.5px solid rgba(43, 29, 20, 0.5);
  pointer-events: none;
}

.nav-racer-car {
  width: 120px;
  height: auto;
  flex-shrink: 0;
  align-self: center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.22));
  /* car.png is al schoon (geen letterresten), dus geen clip nodig -> geen randje/fade */
}

/* Lijn tussen nav en racer mag niet zichtbaar zijn */
.nav { border-bottom: none !important; }

@media (max-width: 720px) {
  .nav-racer { height: 42px; }
  .nav-racer-car { width: 78px; }
  .merk-card { height: 19px; font-size: 0.56rem; margin-right: 16px; padding: 0 0.45rem; }
  .merk-card::after { width: 16px; height: 7px; }
}

/* ===== Desktop (>=981px): compacte header, autootje rijdt uit het logo =====
   - geen losse strook meer onder de nav; de racer wordt een smalle "weg"
     onderaan de header, full-bleed.
   - het logo (met witte mask ervoor) dekt alles t/m z'n rechterrand af, dus je
     ziet de auto + merken niet "bij het logo"; ze komen pas rechts van het logo
     tevoorschijn, alsof ze uit het F1-autootje in het logo wegrijden.
   - navigatielinks staan bovenin, ter hoogte van "MODELBOUW ... SPEELGOED EDE". */
@media (min-width: 981px) {
  .nav-inner {
    align-items: flex-start;     /* logo + links naar boven */
    padding-top: 1rem;           /* iets meer lucht onder de topbar */
    padding-bottom: 14px;        /* witruimte onder het logo, los van de "weg" */
    position: relative;
    z-index: 2;                  /* logo + links boven de racer-band */
  }
  .brand img { height: 116px; }  /* iets groter zodat het logo beter past */

  /* Alleen de DESKTOP-HEADER toont het logo ZONDER auto (de auto rijdt eruit).
     Mobiel + footer + de rest houden het logo MET auto (default = logo-trans.png). */
  .nav-inner .brand img { content: url('../images/logo-trans-nocar.png?v=1'); }

  .brand { position: relative; z-index: 3; }

  /* Witte mask van de schermrand tot PRECIES de plek waar het autootje vroeger
     in het logo stond (de nose), zodat de auto daar tevoorschijn komt i.p.v. aan
     de uiterste rechterrand. 385px = nose-offset vanaf de logo-linkerkant bij
     116px hoog logo (auto begon op ~460/650 van de 650px-brede bron). Pas dit
     getal aan als het logo van formaat verandert. Rechts van deze rand is het
     logo (logo-trans.png) transparant, dus de auto/merken rijden er doorheen. */
  .nav-inner::before {
    content: '';
    position: absolute;
    left: calc(-50vw + 50%);
    width: calc(50vw - 50% + 1.6rem + 385px);
    bottom: 2px;
    height: 58px;
    background: #fff;
    z-index: 1;
    pointer-events: none;
  }

  /* Navigatielinks ter hoogte van de bovenkant van de "PEPERKAMP"-letters. */
  .nav-menu { align-self: flex-start; margin-top: 20px; }

  /* Rode "weg"-lijn onderaan de HELE header (de overgang naar de hero-foto),
     los van het rijdende autootje dat op logo-hoogte blijft staan. */
  .nav { border-bottom: 2px solid var(--brick-600) !important; }

  /* Alles in de band onderaan uitlijnen, zodat zowel de merk-bordjes als de
     autootjes op de rode "weg" staan en er nergens een wit streepje tussen de
     inhoud en de lijn overblijft. (De bordjes + auto zitten in .racer-unit.) */
  .nav-racer-rig, .racer-unit { align-items: flex-end; }

  /* Autootje met de wielen exact op de rode "weg": een paar px laten overlappen,
     zodat overflow:hidden het precies op de lijn afsnijdt. */
  .nav-racer-car { align-self: flex-end; position: relative; top: 3px; width: 140px; }

  /* Racer-band: de "weg" ligt op de hoogte van het oude F1-autootje in het logo
     (onderkant logo), met de witruimte (padding-bottom) eronder. Zo komt de auto
     op de juiste hoogte uit het logo. */
  .nav-racer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 21px;
    height: 42px;
    z-index: 1;
    background: transparent;
    border-bottom: none;          /* de rode lijn zit nu op .nav (header-onderkant) */
  }
}

/* Dropdown submenus (zoals oude site) */
.nav { overflow: visible !important; }
.nav-inner { overflow: visible; }
.nav-menu { overflow: visible; }
.nav-menu .has-submenu { position: relative; }
.nav-menu .has-submenu > a .caret {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.7rem;
  transition: transform var(--dur) var(--ease);
}
.nav-menu .has-submenu:hover > a .caret,
.nav-menu .has-submenu:focus-within > a .caret { transform: rotate(180deg); }

.nav-menu .submenu {
  position: absolute;
  top: 100%; left: 0;
  min-width: 240px;
  background: #ffffff;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--brick-600);
  border-radius: 0 0 10px 10px;
  box-shadow: var(--shadow-md);
  list-style: none;
  margin: 0;
  padding: 0.45rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms;
  z-index: 50;
}
.nav-menu .has-submenu:hover > .submenu,
.nav-menu .has-submenu:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-menu .submenu li { width: 100%; }
.nav-menu .submenu a {
  display: block;
  padding: 0.55rem 1rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--sepia-800);
  border-radius: 0;
}
.nav-menu .submenu a::after { display: none; }
.nav-menu .submenu a:hover {
  background: var(--paper-warm);
  color: var(--brick-600);
}
.nav-menu a.nav-cta {
  background: var(--brick-600);
  color: var(--paper) !important;
  padding: 0.6rem 1.2rem;
  margin-left: 0.6rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(216, 35, 27, 0.22);
}
.nav-menu a.nav-cta::after { display: none; }
.nav-menu a.nav-cta:hover { background: var(--brick-700); }

/* ===== Anti-glitch voor de desktop-dropdowns =================================
   1) De submenu-trigger moet zijn volledige hoogte meetellen, anders begint het
      submenu (top:100%) IN de menubalk en valt het over de naastgelegen items
      heen -> wisselen voelt grillig. Met flex telt de padding mee en zakt het
      submenu netjes vlak ónder de knop.
   2) Hover-intent: bij het weghalen van de muis blijft het submenu ~150ms staan
      (transition-delay), zodat van het ene naar het andere menu gaan vloeiend is
      i.p.v. flikkeren over het kleine gaatje tussen de knoppen. Openen = direct. */
@media (min-width: 981px) {
  .nav-menu > li.has-submenu { display: flex; align-items: stretch; }
  .nav-menu > li.has-submenu > a { display: flex; align-items: center; }

  .nav-menu .submenu {
    transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0.16s;
    transition-delay: 0.15s;
  }
  .nav-menu .has-submenu:hover > .submenu,
  .nav-menu .has-submenu:focus-within > .submenu { transition-delay: 0s; }
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 8px;
  width: 44px; height: 44px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--sepia-900);
  margin: 5px auto;
  transition: all var(--dur) var(--ease);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 980px) {
  /* Solide witte achtergrond op mobiel, voorkomt doorschijnen op iOS */
  .nav { background: #ffffff !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav.scrolled { background: #ffffff !important; }
  .nav-toggle { display: block; position: relative; z-index: 1300; }

  /* Donkere scrim achter het mobiele menu */
  .nav-scrim {
    position: fixed; inset: 0;
    background: rgba(28, 16, 10, 0.5);
    opacity: 0; visibility: hidden;
    transition: opacity 280ms var(--ease), visibility 280ms var(--ease);
    z-index: 1100;
  }
  .nav-scrim.open { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
  /* Til de nav (incl. de drawer) bóven de scrim, anders vangt de scrim de
     taps op de menu-links op (drawer zit in .nav met een eigen stacking-context). */
  body.nav-open .nav { z-index: 1200; }

  /* Mobiel menu = drawer die vanaf rechts inschuift */
  .nav-menu {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: auto;
    width: min(86vw, 350px);
    flex-direction: column;
    align-items: stretch;
    background: #ffffff;
    padding: calc(env(safe-area-inset-top) + 94px) 1.1rem calc(env(safe-area-inset-bottom) + 1.6rem);
    gap: 0.1rem;
    box-shadow: -14px 0 44px rgba(40, 24, 16, 0.24);
    transform: translateX(100%);
    transition: transform 320ms var(--ease);
    z-index: 1200;
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-menu.open { transform: translateX(0); }
  .nav-menu li { width: 100%; }
  .nav-menu a {
    display: block;
    padding: 0.92rem 0.9rem;
    font-size: 1.02rem;
    border-radius: 10px;
    color: var(--sepia-900);
  }
  .nav-menu a::after { display: none; }
  .nav-menu a:active { background: var(--paper-warm); }
  .nav-menu a.active { background: var(--paper-warm); color: var(--brick-700); }

  /* Contact-knop in mobiel menu: pill, geen volledige rode balk */
  .nav-menu a.nav-cta {
    background: var(--brick-600);
    color: #ffffff !important;
    margin: 0.7rem 0 0;
    padding: 1rem;
    text-align: center;
    box-shadow: none;
  }
  .nav-menu a.nav-cta:active { background: var(--brick-700); color: #ffffff !important; }

  /* Has-submenu: hele rij met caret, werkt als accordion (tik = open/dicht) */
  .nav-menu .has-submenu > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav-menu .has-submenu > a .caret {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.9rem;
    color: var(--brick-600);
    transition: transform 240ms var(--ease);
  }
  .nav-menu .has-submenu.submenu-open > a .caret { transform: rotate(180deg); }

  /* Submenu standaard ingeklapt; opent vloeiend bij .submenu-open */
  .nav-menu .submenu {
    position: static;
    visibility: visible;
    transform: none;
    border: none;
    border-left: 2px solid var(--rule);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    margin: 0 0 0.2rem 0.6rem;
    padding: 0;
    min-width: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 340ms var(--ease), opacity 240ms var(--ease);
  }
  .nav-menu .has-submenu.submenu-open > .submenu { max-height: 1400px; opacity: 1; }
  .nav-menu .submenu a {
    padding: 0.72rem 0.9rem;
    font-size: 0.96rem;
    color: var(--sepia-700);
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.7rem;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary {
  background: var(--brick-600);
  color: var(--paper);
  box-shadow: 0 4px 14px rgba(216, 35, 27, 0.25);
}
.btn-primary:hover {
  background: var(--brick-700);
  color: var(--paper);
  box-shadow: 0 6px 22px rgba(216, 35, 27, 0.38);
  transform: translateY(-1px);
}
.btn-secondary {
  background: transparent;
  color: var(--sepia-900);
  border: 1.5px solid var(--sepia-900);
}
.btn-secondary:hover {
  background: var(--sepia-900);
  color: var(--paper);
}
/* Klein balkje direct onder de hero-slideshow met alleen een link naar de
   verkoop/inruil-pagina. Subtiel en hetzelfde op desktop, iPad en telefoon. */
.sell-strip {
  background: var(--paper-soft, #f6f1ea);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  text-align: center;
}
.sell-strip a {
  display: inline-block;
  padding: 0.78rem 1rem;
  color: var(--brick-700);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  text-decoration: none;
}
.sell-strip a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .sell-strip a { font-size: 0.92rem; padding: 0.7rem 1rem; }
}
.btn-block { width: 100%; justify-content: center; padding: 1rem 1.7rem; }

/* ---------- Topbar (Rowasp-stijl) ---------- */
.topbar {
  background: var(--brick-700);
  color: #ffffff;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 0.5rem 0;
  position: relative;
  z-index: 101;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.topbar-msg {
  font-weight: 700;
  letter-spacing: 0.12em;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.topbar-right a {
  display: inline-flex;
  align-items: center;
  color: #ffffff;
  opacity: 0.85;
  transition: opacity 200ms;
}
.topbar-right a:hover { opacity: 1; }
.topbar-flag { font-size: 1rem; line-height: 1; }

/* Mededeling/aankondiging in de topbar (beheerd via Instellingen) */
.topbar-announce {
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.22);
  padding: 0.18rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
  animation: topbar-announce-blink 1.15s ease-in-out infinite;
}
.topbar-announce[hidden] { display: none; }
@keyframes topbar-announce-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-announce { animation: none; }
}

@media (max-width: 720px) {
  .topbar { font-size: 0.7rem; padding: 0.4rem 0; }
  .topbar-msg { letter-spacing: 0.06em; }
  /* Op smal scherm geen ruimte voor beide: de mededeling krijgt voorrang. */
  .topbar--has-announce .topbar-msg { display: none; }
  /* Lange mededeling mag op mobiel over max. 2 regels lopen (volledig leesbaar). */
  .topbar-announce {
    max-width: 78%;
    letter-spacing: 0.04em;
    padding: 0.22rem 0.75rem;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

/* ---------- Hero Rowasp-stijl (sfeerfoto + overlay) ---------- */
.hero.hero-rowasp {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  padding: 6rem 0;
  overflow: hidden;
  background: #1a1a1a;
  color: #ffffff;
}
.hero-rowasp-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Eén trage, doorlopende zoom op de HELE achtergrond i.p.v. per foto. Zo staan
     alle foto's altijd op dezelfde schaal en vloeit de diashow zonder haperen over
     (geen schaal-mismatch tijdens de crossfade, geen terugklap). */
  animation: hero-kb 20s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
  will-change: transform;
}
@keyframes hero-kb {
  from { transform: scale(1.01); }
  to   { transform: scale(1.09); }
}
.hero-rowasp-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.82) saturate(1.05);
  opacity: 0;
  transition: opacity 1100ms ease-in-out;
  will-change: opacity;
}
.hero-rowasp-img.active { opacity: 1; }
.hero-rowasp-overlay {
  position: absolute;
  inset: 0;
  /* Donker alleen aan de linkerkant achter de tekst; foto rechts is volledig zichtbaar */
  background:
    linear-gradient(90deg, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.50) 32%, rgba(0,0,0,0.18) 58%, transparent 74%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.12) 100%);
}
/* In een flex-parent krimpt .container naar content; expliciet 100% maken zodat margin:0 auto + max-width:1220px weer netjes werkt */
.hero.hero-rowasp > .container {
  width: 100%;
  flex: 1;
}
.hero-rowasp-inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin-left: 0;
  margin-right: auto;
}
.hero-rowasp-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--brick-600);
  padding: 0.45rem 0.95rem;
  margin-bottom: 1.4rem;
  border-radius: 2px;
}
.hero-rowasp-title {
  font-family: 'Inter', sans-serif;
  margin: 0 0 1.4rem;
  line-height: 1.04;
}
.rowasp-line-1 {
  display: block;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--brick-500);
  margin-bottom: 0.4rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.rowasp-line-2 {
  display: block;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-transform: none;
  text-shadow: 0 4px 20px rgba(0,0,0,0.55);
}
.hero-rowasp-lead {
  font-size: 1.08rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.92);
  margin-bottom: 1.8rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  max-width: 580px;
}
.hero-rowasp-cta {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.hero-rowasp .btn-primary {
  background: var(--brick-600);
  color: #ffffff;
  border-radius: 3px;
  padding: 0.95rem 1.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  clip-path: none;
  border: none;
}
.hero-rowasp .btn-primary:hover {
  background: var(--brick-700);
  transform: translateY(-1px);
}
.hero-rowasp .btn-secondary {
  background: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 3px;
  padding: 0.95rem 1.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  clip-path: none;
}
.hero-rowasp .btn-secondary:hover {
  background: #ffffff;
  color: var(--sepia-900);
}
/* "Site bijgewerkt op ..." — rustige trust-badge onder de knoppen, vult zichzelf */
.hero-rowasp-updated {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.7rem 0 0;
  padding: 0.42rem 0.95rem 0.42rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.hero-rowasp-updated .hru-date { font-weight: 700; color: #ffffff; }
.hero-rowasp-updated .hru-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 0 rgba(61,220,132,0.55);
  animation: hru-pulse 2.6s ease-out infinite;
}
@keyframes hru-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(61,220,132,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(61,220,132,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-rowasp-updated .hru-dot { animation: none; }
}

@media (max-width: 720px) {
  .hero.hero-rowasp { min-height: 420px; padding: 4rem 0; }
  .hero-rowasp-cta .btn { flex: 1; justify-content: center; text-align: center; }
  .hero-rowasp-updated { font-size: 0.76rem; margin-top: 1.4rem; }
}

/* ---------- Productstrook na de hero, knus zonder rommel ---------- */
.product-strip {
  background: var(--paper);
  padding: 3.5rem 0 3rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.product-strip::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--brick-600);
  border-radius: 0 0 4px 4px;
}
/* Product-strip header — eyebrow-style met dik rood streepje voor de tag */
.product-strip-head {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
  position: relative;
}
.ps-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--sepia-900);
  background: none;
  padding: 0;
  border-radius: 0;
}
.ps-tag::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 4px;
  background: var(--brick-600);
  border-radius: 2px;
  flex-shrink: 0;
}
.ps-divider {
  flex: 1;
  height: 1px;
  background: var(--rule);
  min-width: 40px;
  align-self: center;
}
.ps-sub {
  font-size: 0.95rem;
  color: var(--sepia-700);
  margin: 0;
  font-style: italic;
  align-self: center;
}
.product-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem;
  margin-bottom: 3rem;
}
.product-strip-grid:last-child { margin-bottom: 0; }
.product-strip-multi .ps-head-second { margin-top: 1rem; padding-top: 2.2rem; border-top: 1px solid var(--rule-soft); }
@media (max-width: 800px) { .product-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 720px) {
  .ps-tag { font-size: 1.15rem; }
  .ps-tag::before { width: 24px; }
  .ps-sub { font-size: 0.85rem; }
}

/* 360°-kaart: bijzondere positie-indicator + binnenkort badge */
.ps-card-360 .ps-img { position: relative; }
.ps-360-badge {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  background: rgba(0, 0, 0, 0.78);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.32rem 0.62rem;
  border-radius: 999px;
  z-index: 2;
  pointer-events: none;
}
.ps-soon-badge {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  background: var(--brick-600);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  border-radius: 2px;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.ps-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms var(--ease);
}
.ps-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
  border-color: var(--brick-500);
}
.ps-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--paper-warm);
  flex: 0 0 auto;
}
.ps-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 500ms var(--ease);
}
/* Foto-positionering voor optimale crop per onderwerp */
.ps-img img[src*="traxxas-in-actie"]      { object-position: 65% 42%; }
.ps-img img[src*="buggy-sprong"]          { object-position: center 30%; }
.ps-img img[src*="rally-golf"]            { object-position: center 60%; }
.ps-img img[src*="winkel-04-bouwpakketten-wand"] { object-position: center 55%; }
.ps-img img[src*="winkel-08-onderdelen-wand"]    { object-position: center 50%; }
.ps-img img[src*="prod-06-modeltreinen"]         { object-position: center 45%; }
.ps-img img[src*="prod-10-schaalmodel-autos"]    { object-position: center 50%; }
.ps-img img[src*="winkel-11-klant"]              { object-position: center 35%; }
.ps-img img[src*="winkel-12-historisch"]         { object-position: center 50%; }
.ps-img img[src*="winkel-13-gerie"]              { object-position: center 30%; }
.ps-img img[src*="prod-09-artitec"]              { object-position: center 50%; }
.ps-img img[src*="prod-14-rc-crawler"]           { object-position: center 45%; }
.ps-card:hover .ps-img img { transform: scale(1.05); }
.ps-label {
  flex: 1 1 auto;                /* vult de rest van de (uitgerekte) kaart -> geen witte strook */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1rem;
  background: var(--brick-700);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-align: center;
  transition: background 280ms var(--ease);
}
.ps-card:hover .ps-label { background: var(--brick-600); }

/* ---------- Sectie-dividers met klein logo-icoontje (sfeer-accent) ---------- */
.section-head .eyebrow {
  position: relative;
  padding-left: 2.4rem;
}
.section-head .eyebrow::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 1.8rem; height: 2px;
  background: var(--brick-600);
}
.section-head h2 {
  position: relative;
  display: block;
}
.section-head.center h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  background: var(--brick-600);
  margin: 1rem auto 0;
  border-radius: 2px;
}

/* Subtiele tussen-sectie divider met klein logo */
.peper-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.4rem 0;
  background: var(--paper);
}
.peper-divider::before,
.peper-divider::after {
  content: '';
  flex: 1;
  max-width: 220px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule), transparent);
}
.peper-divider img {
  width: 110px;
  height: auto;
  opacity: 0.6;
  filter: grayscale(0.2);
}

/* ---------- Store slider sectie ---------- */
.store-slider-section {
  background: var(--paper);
  padding: 3rem 0 4rem;
}
.store-slider {
  aspect-ratio: 16 / 9;
  max-width: 760px;
  margin: 0 auto;
  border: 3px solid var(--brick-600);
  border-radius: 4px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.15);
}
.store-slider .hero-slide-label {
  background: var(--brick-600);
  color: #ffffff;
}

/* Twee sliders naast elkaar, even groot */
.dual-slider-section > .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  align-items: stretch;
  max-width: 1280px;
}
.dual-slider-section .store-slider {
  max-width: none;
  margin: 0;
  aspect-ratio: 4 / 3;
}
.dual-slider-section .store-slider.products-slider {
  border-color: var(--brick-700);
}
.dual-slider-section .store-slider.products-slider .hero-slide-label {
  background: #ffffff;
  color: var(--brick-700);
  border: 1px solid var(--brick-600);
}

@media (max-width: 820px) {
  .dual-slider-section > .container {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}

/* ---------- Hero met vintage banner als ACHTERGROND ---------- */
.hero.hero-vintage-bg {
  background:
    url('../images/logo.gif') center top / cover no-repeat,
    #2a1a0d;
  color: #ffffff;
  border-bottom: 4px solid var(--brick-600);
  box-shadow: 0 4px 18px rgba(216, 35, 27, 0.35);
}
.hero.hero-vintage-bg .hero-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 10, 4, 0.45) 0%, rgba(20, 10, 4, 0.65) 100%),
    radial-gradient(ellipse at 30% 50%, transparent 40%, rgba(20, 10, 4, 0.65) 100%);
  z-index: 0;
  pointer-events: none;
}
.hero.hero-vintage-bg .container { position: relative; z-index: 1; }

/* Tekst leesbaar maken op de donkere banner */
.hero.hero-vintage-bg h1 {
  color: #ffffff;
  text-shadow: 0 3px 18px rgba(0,0,0,0.7);
}
.hero.hero-vintage-bg h1 .accent {
  color: #ffe9d6;
  font-style: italic;
}
.hero.hero-vintage-bg .hero-greeting {
  color: #ffd9a8;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.hero.hero-vintage-bg .hero-meta { color: rgba(255,255,255,0.88); }
.hero.hero-vintage-bg .hero-meta .dot {
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
}
.hero.hero-vintage-bg .hero-since {
  color: #ffffff;
  background: var(--brick-700);
  border: 1px solid rgba(255,255,255,0.35);
}
.hero.hero-vintage-bg .hero-lead {
  color: #f6e8d5;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.hero.hero-vintage-bg .rule { background: #ffffff; opacity: 0.55; }
.hero.hero-vintage-bg .hero-foot { border-top-color: rgba(255,255,255,0.25); }
.hero.hero-vintage-bg .hero-foot strong { color: #ffffff; text-shadow: 0 2px 10px rgba(0,0,0,0.55); }
.hero.hero-vintage-bg .hero-foot span { color: rgba(255,255,255,0.82); }

/* Knoppen op donkere achtergrond */
.hero.hero-vintage-bg .btn-primary {
  background: var(--brick-600);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.25);
}
.hero.hero-vintage-bg .btn-primary:hover {
  background: var(--brick-500);
  color: #ffffff;
}
.hero.hero-vintage-bg .btn-secondary {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border-color: #ffffff;
}
.hero.hero-vintage-bg .btn-secondary:hover {
  background: #ffffff;
  color: var(--sepia-900);
}

/* Slider rand wit-warm voor contrast */
.hero.hero-vintage-bg .photo-slider {
  border: 4px solid #f4e4c8;
  box-shadow: 0 22px 50px rgba(0,0,0,0.55), 0 0 0 1px var(--brick-600);
}
.hero.hero-vintage-bg .photo-slider .hero-slide-label {
  background: #ffffff;
  color: var(--brick-700);
}

/* ---------- Hero (knus, sfeer-watermark — nu volgend op banner) ---------- */
.hero {
  position: relative;
  padding: 150px 0 90px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 75% 25%, rgba(192, 139, 44, 0.10), transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(139, 32, 24, 0.05), transparent 65%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 100%);
  color: var(--ink);
}
/* Versie net na de vintage banner: minder ruimte boven */
.hero.hero-after-banner {
  padding-top: 60px;
}

/* Peperkamp-logo als groot grijs sfeerwatermark op de achtergrond */
.hero-logo-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-3deg);
  width: 78%;
  max-width: 1100px;
  height: auto;
  opacity: 0.07;
  filter: grayscale(1) brightness(0.5) contrast(1.1);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
@media (max-width: 900px) {
  .hero-logo-watermark { width: 130%; max-width: none; opacity: 0.05; }
}

/* Hero-grid en alles wat in de hero zit erbovenop */
.hero .container { position: relative; z-index: 1; }

/* Tekst weer donker op crème achtergrond */
.hero h1 {
  color: var(--sepia-900);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 0.95;
}
.hero h1 .accent {
  font-style: italic;
  color: var(--brick-700);
  font-weight: 500;
  display: inline-block;
}
.hero-greeting {
  font-size: 1.6rem;
  color: var(--brick-700);
  margin-bottom: -0.4rem;
  letter-spacing: 0.005em;
  transform: rotate(-1.5deg);
  display: inline-block;
}
.hero .hero-lead {
  color: var(--sepia-700);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.55;
  font-weight: 400;
}
.hero .hero-meta { color: var(--sepia-700); }
.hero .hero-meta .dot {
  background: #2f8a4f;
  box-shadow: 0 0 0 3px rgba(47, 138, 79, 0.18);
}
.hero-since {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  margin-left: 0.65rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--brick-600);
  border-radius: 999px;
}

/* (oude parallelogram-knop CSS verwijderd, .hero-rowasp definieert nu de knoppen) */

/* Sliders met rode rand op witte hero */
.hero .photo-slider {
  border: 4px solid var(--brick-600);
  box-shadow:
    0 22px 50px rgba(124, 28, 24, 0.28),
    0 10px 22px rgba(0,0,0,0.12);
}
.hero .photo-slider .hero-slide-label {
  background: var(--brick-600);
  color: #ffffff;
}

/* Diepere schaduwen + warme glow op cards */
.cat-photo:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 28px 60px rgba(216, 35, 27, 0.32),
    0 12px 24px rgba(0,0,0,0.18);
}
.photo-slider:hover {
  box-shadow: 0 22px 50px rgba(216, 35, 27, 0.25), 0 18px 42px rgba(0,0,0,0.35) !important;
}

/* Sub-tiel "puls" effect op de groene dot in hero-meta */
.hero .hero-meta .dot {
  animation: dot-pulse 2.2s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,255,255,0.22); }
  50%      { box-shadow: 0 0 0 6px rgba(255,255,255,0.05); }
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 5rem;
  align-items: center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 3.5rem; } .hero { padding: 130px 0 70px; } }

.hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--sepia-700);
  margin-bottom: 1.6rem;
  letter-spacing: 0.06em;
}
.hero-meta .dot {
  width: 7px; height: 7px;
  background: #2f8a4f;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(47, 138, 79, 0.18);
}

.hero h1 .accent {
  font-style: italic;
  color: #ffffff;
  font-weight: 500;
}
.hero-lead {
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--sepia-700);
  margin: 1.6rem 0 2.2rem;
  max-width: 540px;
}

.hero-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; }

.hero-foot {
  margin-top: 3.2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.hero-foot > div { min-width: 0; }
.hero-foot strong {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--sepia-900);
  margin-bottom: 0.25rem;
}
.hero-foot span {
  font-size: 0.85rem;
  color: var(--sepia-500);
}

/* Hero imagery, twee dia-presentaties gestapeld */
.hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Hero slider */
.hero-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--paper-warm);
}
.photo-slider-products {
  border: 3px solid var(--brick-600);
  box-shadow: 0 14px 36px rgba(216, 35, 27, 0.18), var(--shadow-md);
}

/* Label badge boven elke slider */
.hero-slide-label {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 4;
  background: rgba(255, 255, 255, 0.95);
  color: var(--brick-600);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}
.photo-slider-products .hero-slide-label {
  background: var(--brick-600);
  color: #ffffff;
}
.hero-slides {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms var(--ease);
  margin: 0;
}
.hero-slide.active { opacity: 1; z-index: 1; }
.hero-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-dots {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.45rem;
  z-index: 3;
  padding: 0.5rem 0.85rem;
  background: rgba(15,15,15,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
}
.hero-dots button {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.hero-dots button.active {
  background: #ffffff;
  width: 22px;
  border-radius: 4px;
}
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.88);
  border: 0;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 0.9;
  color: var(--sepia-900);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
  z-index: 3;
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  padding-bottom: 3px;
}
.hero-slider:hover .hero-arrow { opacity: 1; }
.hero-arrow:hover { background: #ffffff; }
.hero-arrow.prev { left: 0.7rem; }
.hero-arrow.next { right: 0.7rem; }
.hero-mark {
  position: absolute;
  bottom: 4%;
  left: -6%;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  padding: 1rem 1.3rem;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: 220px;
  z-index: 5;
}
.hero-mark .seal {
  width: 46px; height: 46px;
  background: var(--brick-600);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(216, 35, 27, 0.35);
}
.hero-mark small {
  display: block;
  font-size: 0.72rem;
  color: var(--sepia-500);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-mark strong {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  color: var(--sepia-900);
  font-size: 0.95rem;
}

/* ---------- Sections ---------- */
section { padding: 6.5rem 0; position: relative; }
.section-head {
  max-width: 720px;
  margin-bottom: 4rem;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p {
  font-size: 1.12rem;
  color: var(--sepia-700);
  margin-top: 1rem;
  max-width: 620px;
}
.section-head.center p { margin-left: auto; margin-right: auto; }

/* ---------- Announcement bar (nieuws) ---------- */
.announce {
  background: var(--brick-600);
  border-top: none;
  border-bottom: none;
  padding: 0.9rem 0;
  font-size: 0.92rem;
  color: #ffffff;
}
.announce a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.announce a:hover { color: #ffffff; opacity: 0.85; }
.announce .tag {
  color: #ffffff !important;
  border-right-color: rgba(255, 255, 255, 0.35) !important;
}
.announce .container {
  display: flex;
  gap: 1.4rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.announce .tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brick-600);
  padding-right: 0.8rem;
  border-right: 1px solid var(--rule);
}

/* ---------- Racing banner (rood, met F1-autootje) ---------- */
.racing-banner {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0;
  background:
    linear-gradient(120deg, var(--brick-700) 0%, var(--brick-600) 50%, #b81a13 100%);
  color: #ffffff;
  isolation: isolate;
}
.racing-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255,255,255,0.10), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(0,0,0,0.22), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
/* Racetrack-lijnen die over de banner heen schuiven */
.racing-track {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}
.racing-line {
  position: absolute;
  left: -30%;
  height: 2px;
  width: 60%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.85) 50%, transparent 100%);
  animation: race-slide 4.2s linear infinite;
  border-radius: 2px;
}
.racing-line.line-1 { top: 22%; animation-duration: 3.6s; animation-delay: -0.4s; }
.racing-line.line-2 { top: 52%; animation-duration: 4.8s; height: 1px; opacity: 0.7; }
.racing-line.line-3 { top: 78%; animation-duration: 3.2s; animation-delay: -1.8s; height: 3px; }
@keyframes race-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(220%); }
}
.racing-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
}
.racing-text { max-width: 640px; }
.racing-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 0.9rem;
  padding: 0.35rem 0.9rem;
  border: 1.5px solid rgba(255,255,255,0.65);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}
.racing-text h2 {
  color: #ffffff;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 0.9rem;
}
.racing-text h2 em {
  font-style: italic;
  color: #ffffff;
  text-shadow: 0 0 22px rgba(255, 220, 220, 0.55);
  position: relative;
}
.racing-text h2 em::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 3px;
  background: #ffffff;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  animation: race-underline 1.4s 0.6s var(--ease) forwards;
}
@keyframes race-underline {
  to { transform: scaleX(1); }
}
.racing-text p {
  color: rgba(255,255,255,0.92);
  font-size: 1.08rem;
  letter-spacing: 0.02em;
  margin: 0;
}
.racing-car {
  width: 320px;
  height: auto;
  max-width: 38vw;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,0.35));
  animation: racing-bob 2.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes racing-bob {
  0%, 100% { transform: translateY(0) rotate(-0.5deg); }
  50%      { transform: translateY(-6px) rotate(0.5deg); }
}
@media (max-width: 900px) {
  .racing-banner { padding: 3rem 0 2.5rem; }
  .racing-inner { grid-template-columns: 1fr; gap: 1.4rem; text-align: center; }
  .racing-car { width: 220px; max-width: 60vw; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .racing-line .racing-car { animation: none !important; }
  .racing-text h2 em::after { transform: scaleX(1); animation: none; }
}

/* ---------- Category foto-cards (Nils Ester stijl: vierkant + rode band) ---------- */
.cat-grid-photo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
@media (max-width: 980px) { .cat-grid-photo { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cat-grid-photo { grid-template-columns: 1fr; } }
.cat-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
  text-decoration: none;
}
.cat-photo > img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 900ms var(--ease), filter 320ms var(--ease);
  filter: saturate(1.05) contrast(1.03);
}
/* Speciale crop voor foto's waar het onderwerp niet exact in het midden zit */
.cat-photo > img[src*="traxxas-in-actie"] { object-position: 65% 42%; }
.cat-photo > img[src*="buggy-sprong"]     { object-position: center 30%; }
.cat-photo > img[src*="rally-golf"]       { object-position: center 60%; }
.cat-photo::after { display: none; }
.cat-photo::before { display: none; }
.cat-photo:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(124, 28, 24, 0.28), 0 8px 18px rgba(0,0,0,0.12);
}
.cat-photo:hover > img { transform: scale(1.08); filter: saturate(1.15) contrast(1.06); }

/* Naam-band onder de foto (de Nils Ester touch) */
.cat-photo-overlay {
  position: static;
  background: var(--brick-700);
  color: #ffffff;
  padding: 0.9rem 1.1rem 0.95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  transition: background 320ms var(--ease);
}
.cat-photo:hover .cat-photo-overlay { background: var(--brick-600); }
.cat-photo-overlay h3 {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
  text-shadow: none;
}
.cat-photo-link {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  opacity: 0.65;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.cat-photo:hover .cat-photo-link {
  opacity: 1;
  transform: translateX(3px);
}

/* ---------- Categories (oude SVG-variant, behouden voor andere paginas) ---------- */
.cats { background: var(--paper-soft); }
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.cat-card {
  padding: 2.3rem 1.8rem;
  background: var(--paper-soft);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: background var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
  min-height: 240px;
}
.cat-card:hover { background: var(--paper); }
.cat-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  color: var(--brick-600);
  background: rgba(216, 35, 27, 0.08);
  border-radius: 50%;
  margin-bottom: 1.4rem;
  transition: all var(--dur) var(--ease);
}
.cat-card:hover .cat-icon {
  background: var(--brick-600);
  color: #ffffff;
  transform: rotate(-5deg) scale(1.05);
}
.cat-icon svg { width: 32px; height: 32px; stroke-width: 1.2; }
.cat-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.55rem;
}
.cat-card p {
  font-size: 0.96rem;
  color: var(--sepia-700);
  flex: 1;
}
.cat-card .cat-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.2rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--brick-600);
  letter-spacing: 0.02em;
}
.cat-card .cat-link svg {
  width: 14px; height: 14px;
  transition: transform var(--dur) var(--ease);
}
.cat-card:hover .cat-link svg { transform: translateX(4px); }

/* ---------- Story simple (sober 2-koloms, Rowasp/Interhobby-stijl) ---------- */
.story-simple {
  background: var(--paper);
  padding: 5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.story-simple-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 900px) { .story-simple-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.story-simple-text h2 {
  margin: 0.8rem 0 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.story-simple-text p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sepia-700);
  margin-bottom: 1rem;
}
.story-simple-text p.lead {
  font-size: 1.15rem;
  color: var(--sepia-900);
  font-weight: 500;
}
.story-simple-text p strong { color: var(--sepia-900); font-weight: 600; }
.story-simple-text p em { color: var(--brick-600); font-style: normal; font-weight: 500; }

.advantages-simple {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 1.8rem;
}
.advantages-simple li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.7rem;
  font-size: 0.98rem;
  color: var(--sepia-800);
  border-bottom: 1px dashed var(--rule);
}
.advantages-simple li:last-child { border-bottom: none; }
.advantages-simple li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.5rem;
  color: var(--brick-600);
  font-weight: 700;
}

.story-simple-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.18);
}

/* ---------- Story warm (oud, blijft voor referentie maar niet gebruikt) ---------- */
.story-warm {
  background: var(--paper-soft);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}
.story-warm::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -160px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241, 217, 154, 0.35), transparent 70%);
  pointer-events: none;
}
.story-warm::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(179, 45, 34, 0.10), transparent 70%);
  pointer-events: none;
}
.story-warm-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .story-warm-grid { grid-template-columns: 1fr; gap: 3rem; }
  .story-warm { padding: 4.5rem 0; }
}

.story-pretitle {
  font-size: 1.6rem;
  color: var(--brick-700);
  margin-bottom: 0.4rem;
  transform: rotate(-1.5deg);
  display: inline-block;
}
.story-warm-text h2 {
  margin-bottom: 1.6rem;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: 1.05;
}
.story-warm-text h2 em {
  font-style: italic;
  color: var(--brick-700);
  font-weight: 500;
  position: relative;
}
.story-warm-text h2 em::after {
  content: '';
  position: absolute;
  left: -2px; right: -2px;
  bottom: 6px;
  height: 14px;
  background: rgba(217, 167, 64, 0.35);
  z-index: -1;
  border-radius: 4px;
  transform: rotate(-1deg);
}
.story-warm-text p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.18rem;
  line-height: 1.7;
  color: var(--sepia-800);
  margin-bottom: 1rem;
}
.story-warm-text p.lead {
  font-size: 1.32rem;
  color: var(--sepia-900);
  font-style: italic;
}
.story-warm-text p strong {
  font-weight: 600;
  color: var(--sepia-900);
}

.signature-block {
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  position: relative;
}
.signature-block::before {
  content: '';
  position: absolute;
  top: -0.85rem;
  left: 0;
  background: var(--paper-soft);
  padding-right: 0.5rem;
  color: var(--brass-600);
  font-size: 1.2rem;
}
.signature.script {
  font-size: 2.6rem;
  color: var(--brick-700);
  line-height: 1;
  margin: 0.4rem 0 0.5rem;
  transform: rotate(-2deg);
  display: inline-block;
}
.signature-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  font-style: normal !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--sepia-500) !important;
  margin: 0 !important;
}

/* Polaroid-stack rechts */
.story-warm-visual {
  position: relative;
  aspect-ratio: 1 / 1.05;
  min-height: 420px;
}
.polaroid {
  position: absolute;
  background: #ffffff;
  padding: 14px 14px 56px;
  box-shadow:
    0 20px 40px rgba(80, 50, 30, 0.18),
    0 10px 20px rgba(80, 50, 30, 0.10);
  transition: transform 480ms var(--ease), box-shadow 480ms var(--ease), z-index 0s 240ms;
  border-radius: 3px;
}
.polaroid img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.02) sepia(0.06);
}
.polaroid-cap {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  text-align: center;
  font-size: 1.25rem;
  color: var(--sepia-800);
  margin: 0;
  line-height: 1.1;
}
.polaroid-1 {
  width: 75%;
  top: 4%;
  left: 0;
  transform: rotate(-4deg);
  z-index: 2;
}
.polaroid-2 {
  width: 62%;
  bottom: 0;
  right: 3%;
  transform: rotate(5deg);
  z-index: 1;
}
.polaroid:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.03);
  z-index: 5;
  box-shadow: 0 30px 60px rgba(80, 50, 30, 0.28);
}

.story-pin {
  position: absolute;
  top: 8%;
  right: 6%;
  background: var(--brick-700);
  color: #ffffff;
  padding: 0.6rem 1rem 0.7rem;
  border-radius: 8px;
  font-size: 1.35rem;
  line-height: 1;
  transform: rotate(8deg);
  box-shadow: 0 8px 18px rgba(139, 32, 24, 0.32);
  z-index: 3;
}
.story-pin::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brass-600);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ---------- Story, Nils Ester stijl (oude, vervangen) ---------- */
.story-nilsester {
  background: var(--paper);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}
.story-ns-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 900px) { .story-ns-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

.story-ns-text h2 {
  margin: 1rem 0 1.2rem;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--sepia-900);
}
.story-ns-text h2 em {
  font-style: italic;
  color: var(--brick-600);
  font-weight: 500;
}
.story-ns-text p.lead {
  font-size: 1.2rem;
  color: var(--sepia-800);
  margin-bottom: 1rem;
}
.story-ns-text p { font-size: 1rem; line-height: 1.7; color: var(--sepia-700); margin-bottom: 1rem; }

.advantages-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sepia-900);
  margin: 1.6rem 0 0.8rem;
}
.advantages {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
}
.advantages li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.4rem 0;
  font-size: 0.98rem;
  color: var(--sepia-800);
}
.advantages li svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: #2f8a4f;
  margin-top: 2px;
}

.dealer-note {
  background: rgba(232, 169, 36, 0.14);
  border-left: 3px solid #e8a924;
  padding: 0.7rem 1rem;
  margin: 1.2rem 0 1.8rem;
  font-size: 0.96rem;
  color: var(--sepia-900);
  border-radius: 0 6px 6px 0;
}
.dealer-note strong { color: var(--brick-700); }

/* btn-skew valt nu terug op gewoon rechthoekig (geen parallelogram) */
.btn-skew {
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Foto + racing-strepen (de Nils Ester sfeer) */
.story-ns-visual {
  position: relative;
  aspect-ratio: 4/3;
}
.story-ns-photo {
  position: relative;
  width: 88%;
  height: 88%;
  margin: 6% auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(0,0,0,0.18), 0 10px 22px rgba(0,0,0,0.12);
  z-index: 2;
}
.story-ns-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}
.story-ns-photo:hover img { transform: scale(1.04); }

/* Schuine streep-decoraties */
.racing-stripe {
  position: absolute;
  width: 28%;
  height: 10px;
  border-radius: 5px;
  transform: rotate(-35deg);
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}
.racing-stripe.rs-1 {
  top: -2%; left: -6%;
  width: 38%;
  background: linear-gradient(90deg, #e8a924, #d8a020);
  transform: rotate(-35deg);
}
.racing-stripe.rs-2 {
  top: 6%; right: -8%;
  width: 32%;
  background: linear-gradient(90deg, var(--brick-700), var(--brick-500));
  transform: rotate(-35deg);
}
.racing-stripe.rs-3 {
  bottom: 10%; left: -8%;
  width: 30%;
  height: 8px;
  background: linear-gradient(90deg, var(--brick-600), #c98620);
  transform: rotate(-35deg);
}
.racing-stripe.rs-4 {
  bottom: -3%; right: -4%;
  width: 36%;
  height: 7px;
  background: linear-gradient(90deg, #e8a924 0%, #ffffff 50%, var(--brick-600) 100%);
  transform: rotate(-35deg);
  opacity: 0.6;
}

/* ---------- Story, vol-bleed sfeerfoto (oude, behouden voor evt subpaginas) ---------- */
.story-bleed {
  position: relative;
  background: #0a0a0a;
  color: #ffffff;
  overflow: hidden;
  padding: 8rem 0;
  isolation: isolate;
}
.story-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(1.1) contrast(1.05) brightness(0.6);
  transform: scale(1.05);
  animation: story-zoom 24s ease-in-out infinite alternate;
}
@keyframes story-zoom {
  from { transform: scale(1.05) translate(0, 0); }
  to   { transform: scale(1.18) translate(-2%, -2%); }
}
.story-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(216,35,27,0.32), transparent 55%),
    linear-gradient(115deg, rgba(15,15,15,0.85) 0%, rgba(15,15,15,0.55) 50%, rgba(168,22,15,0.7) 100%);
  z-index: 1;
}
.story-car {
  position: absolute;
  right: -4%;
  bottom: 8%;
  width: 44%;
  max-width: 620px;
  z-index: 2;
  filter: drop-shadow(0 26px 40px rgba(0,0,0,0.6));
  animation: story-car-bob 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes story-car-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-10px) rotate(1deg); }
}
.story-bleed-inner {
  position: relative;
  z-index: 3;
  max-width: 760px;
}
.story-bleed .eyebrow {
  color: #ffffff;
  background: var(--brick-600);
  padding: 0.3rem 0.8rem 0.35rem 0.8rem;
  border-radius: 999px;
}
.story-bleed .eyebrow::before { display: none; }
.story-bleed h2 {
  color: #ffffff;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
  margin: 1.4rem 0 1.6rem;
  text-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.story-bleed h2 em {
  font-style: italic;
  color: #ffffff;
  font-weight: 500;
  border-bottom: 4px solid var(--brick-600);
  padding-bottom: 6px;
}
.story-bleed p {
  color: rgba(255,255,255,0.92);
  font-size: 1.08rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.story-bleed p.lead {
  font-size: 1.3rem;
  color: #ffffff;
  margin-bottom: 1rem;
}
.story-bleed p strong { color: #ffffff; }
.story-bleed p em { color: #ffd5d3; font-style: normal; font-weight: 600; }
.story-bleed .marks {
  border-top-color: rgba(255,255,255,0.25);
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
}
.story-bleed .mark-item svg {
  color: #ffffff;
  background: rgba(255,255,255,0.12);
  padding: 4px;
  border-radius: 50%;
  width: 30px; height: 30px;
}
.story-bleed .mark-item h4 { color: #ffffff; }
.story-bleed .mark-item p { color: rgba(255,255,255,0.78); }
@media (max-width: 900px) {
  .story-bleed { padding: 5rem 0; }
  .story-car { width: 70%; right: -10%; bottom: -4%; opacity: 0.45; }
}

/* Originele story sectie (overige paginas) */
.story { background: var(--paper); }
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 5rem;
  align-items: center;
}
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; gap: 3rem; } }

.story-img-stack {
  position: relative;
  aspect-ratio: 4/5;
}
.story-img-stack .f1 .story-img-stack .f2 {
  position: absolute;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.story-img-stack .f1 {
  inset: 0 25% 25% 0;
}
.story-img-stack .f2 {
  inset: 30% 0 0 35%;
  border: 5px solid var(--paper);
}
.story-img-stack img { width: 100%; height: 100%; object-fit: cover; }
.story-img-stack .f1,
.story-img-stack .f2 { position: absolute; }
.story-img-stack .f-caption {
  position: absolute;
  bottom: 0.8rem;
  left: 0.9rem;
  right: 0.9rem;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: -0.005em;
  padding: 0.4rem 0.7rem;
  background: rgba(15, 15, 15, 0.72);
  border-radius: 6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

.story-text h2 { margin-bottom: 1.4rem; }
.story-text p { font-size: 1.05rem; margin-bottom: 1.1rem; line-height: 1.75; }
.story-text p.lead { font-size: 1.18rem; color: var(--sepia-800); }

.marks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
}
.mark-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.mark-item svg {
  width: 22px; height: 22px;
  color: var(--brass-600);
  flex-shrink: 0;
  margin-top: 4px;
}
.mark-item h4 { font-size: 0.98rem; margin-bottom: 0.2rem; }
.mark-item p { font-size: 0.9rem; margin: 0; color: var(--sepia-700); }

/* ---------- Visit / Info ---------- */
.visit {
  background: #0f0f0f;
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
/* Lichte variant, gebruikt bovenaan de homepage zoals op de oude site */
.visit.visit-light {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.visit.visit-light::before { display: none; }
.visit.visit-light h2 { color: var(--sepia-900); }
.visit.visit-light .eyebrow { color: var(--brick-600); }
.visit.visit-light .section-head p { color: var(--sepia-700); }
.visit.visit-light .visit-grid {
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.visit.visit-light .visit-card {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-soft);
}
.visit.visit-light .visit-card svg { color: var(--brick-600); }
.visit.visit-light .visit-card h4 { color: var(--sepia-900); }
.visit.visit-light .visit-card p,
.visit.visit-light .visit-card li { color: var(--sepia-700); }
.visit.visit-light .visit-card a { color: var(--brick-600); }
.visit.visit-light .visit-card a:hover { color: var(--brick-700); }
.visit.visit-light .hours-row span:first-child { color: var(--sepia-900); font-weight: 500; }
.visit.visit-light .hours-row span:last-child { color: var(--sepia-700); }

/* ---------- Foto-mozaiek sectie ---------- */
.mosaic-section {
  background: var(--paper);
  padding: 5rem 0 0;
  position: relative;
  overflow: hidden;
}
/* Subtiele papieren textuur op de achtergrond */
.mosaic-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(192, 139, 44, 0.05), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(139, 32, 24, 0.04), transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.mosaic-section .container { position: relative; z-index: 1; }

.mosaic-strip {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 180px;
  gap: 0.6rem;
  padding: 0 0.6rem;
}
.m {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sepia-800);
  box-shadow: var(--shadow-md);
  transition: transform 480ms var(--ease), box-shadow 480ms var(--ease), z-index 0s 220ms;
  cursor: pointer;
}
.m img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1100ms var(--ease), filter 480ms var(--ease);
  filter: saturate(1.05) contrast(1.04);
}
.m::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,15,15,0.85), rgba(15,15,15,0.15) 55%, transparent);
  transition: background 480ms var(--ease);
  pointer-events: none;
}
.m::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brick-700), var(--brick-500), var(--brick-700));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms var(--ease);
  z-index: 3;
}
.m:hover {
  transform: translateY(-6px) scale(1.02);
  z-index: 5;
  box-shadow: 0 28px 60px rgba(216, 35, 27, 0.28), 0 14px 30px rgba(0,0,0,0.35);
}
.m:hover img { transform: scale(1.1); filter: saturate(1.18) contrast(1.06); }
.m:hover::after {
  background: linear-gradient(to top, rgba(168,22,15,0.78), rgba(15,15,15,0.25) 55%, transparent);
}
.m:hover::before { transform: scaleX(1); }
.m-cap {
  position: absolute;
  bottom: 0.9rem; left: 1rem;
  color: #ffffff;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-style: italic;
  font-size: 1.25rem;
  letter-spacing: 0.005em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
  z-index: 2;
}

/* Asymmetrisch grid */
.m1  { grid-column: span 6; grid-row: span 2; }
.m2  { grid-column: span 3; grid-row: span 1; }
.m3  { grid-column: span 3; grid-row: span 1; }
.m4  { grid-column: span 3; grid-row: span 2; }
.m5  { grid-column: span 3; grid-row: span 1; }
.m6  { grid-column: span 4; grid-row: span 2; }
.m7  { grid-column: span 4; grid-row: span 1; }
.m8  { grid-column: span 4; grid-row: span 1; }
.m9  { grid-column: span 5; grid-row: span 2; }
.m10 { grid-column: span 4; grid-row: span 1; }
.m11 { grid-column: span 3; grid-row: span 1; }
.m12 { grid-column: span 7; grid-row: span 2; }

@media (max-width: 900px) {
  .mosaic-strip { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 140px; }
  .m1 .m4 .m6 .m9 .m12 { grid-column: span 6; grid-row: span 1; }
  .m2 .m3 .m5 .m7 .m8 .m10 .m11 { grid-column: span 3; grid-row: span 1; }
}

/* ---------- Producten-slider sectie (vol-breed) ---------- */
.products-slider-section {
  background: var(--paper);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
.products-slider-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(192, 139, 44, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.products-slider-section .container { position: relative; z-index: 1; }
.products-slider {
  aspect-ratio: 21 / 9;
  max-width: 1100px;
  margin: 0 auto;
  border: 4px solid var(--brick-600);
  box-shadow:
    0 30px 70px rgba(216, 35, 27, 0.32),
    0 14px 30px rgba(0,0,0,0.18);
}
.products-slider .hero-slide-label {
  background: var(--brick-600);
  color: #ffffff;
}
@media (max-width: 760px) {
  .products-slider { aspect-ratio: 4 / 3; border-width: 3px; }
  .products-slider-section { padding: 3rem 0; }
}

/* ---------- Zachte merkenregel (vervangt de luide marquee) ---------- */
.brands-soft {
  background: var(--paper-soft);
  padding: 2.6rem 0;
  text-align: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.brands-intro {
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  color: var(--brick-700);
  margin-bottom: 0.4rem;
}
.brands-list {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--sepia-700);
  letter-spacing: 0.01em;
  max-width: 880px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---------- Merken-showcase (onderaan Over ons) ---------- */
.brand-showcase {
  padding: 5rem 0 5.5rem;
  background: var(--paper-soft);
  border-top: 1px solid var(--rule);
}
.brand-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  max-width: 1000px;
  margin: 0 auto 3.4rem;
}
.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.3rem 1.2rem;
  min-height: 92px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.brand-logo:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}
.brand-logo img {
  max-height: 42px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter .25s ease, opacity .25s ease;
}
.brand-logo:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.brand-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.4rem;
  max-width: 1080px;
  margin: 0 auto;
}
.brand-cat {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.7rem;
}
.brand-cat h3 {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0 0 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--brick-600);
  display: inline-block;
}
.brand-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.brand-chips li {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--sepia-800);
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.34rem 0.78rem;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
.brand-chips li:hover {
  color: var(--brick-700);
  border-color: var(--brick-500);
}

/* ---------- Merken: alfabetische lijst (A-Z) ---------- */
.brand-az {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.8rem 2.2rem;
  max-width: 1080px;
  margin: 0 auto;
  align-items: start;
}
.brand-az-group {
  break-inside: avoid;
}
.brand-az-letter {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--brick-600);
  letter-spacing: 0.02em;
  padding-bottom: 0.45rem;
  margin-bottom: 0.55rem;
  border-bottom: 2px solid var(--brick-600);
}
.brand-az-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.brand-az-item {
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--sepia-800);
  padding: 0.32rem 0;
  border-bottom: 1px solid var(--rule);
}
.brand-az-item:last-child {
  border-bottom: none;
}
.brand-az-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--sepia-700);
  padding: 1.5rem 0;
}

@media (max-width: 640px) {
  .brand-showcase { padding: 3.5rem 0 4rem; }
  .brand-logos { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; margin-bottom: 2.4rem; }
  .brand-logo { min-height: 74px; padding: 0.95rem; }
  .brand-logo img { max-height: 32px; }
  .brand-az { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1.4rem; }
}

/* ---------- Merken-marquee (oude, blijft staan voor evt herstel) ---------- */
.marquee {
  background: var(--brick-600);
  color: #ffffff;
  padding: 1.2rem 0;
  overflow: hidden;
  position: relative;
  border-top: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  box-shadow:
    0 -6px 14px rgba(216, 35, 27, 0.2),
    0 6px 14px rgba(216, 35, 27, 0.2);
}
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(to right, var(--brick-600), transparent); }
.marquee::after  { right: 0; background: linear-gradient(to left,  var(--brick-600), transparent); }
.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  gap: 1.6rem;
  align-items: center;
  animation: marquee-scroll 38s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.m-item {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.18em;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.22);
}
.m-dot {
  color: rgba(255,255,255,0.55);
  font-size: 0.7rem;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}
@media (max-width: 640px) {
  .m-item { font-size: 1.05rem; }
  .marquee { padding: 0.9rem 0; }
}

/* ---------- Google Tour embed ---------- */
.tour {
  background: var(--paper-soft);
  padding: 5rem 0;
}
.tour-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #0f0f0f;
  border: 3px solid var(--brick-600);
}
.tour-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.tour-fallback {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--sepia-700);
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  font-size: 0.85rem;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.tour-frame iframe[src=""] + .tour-fallback,
.tour-frame:hover .tour-fallback { opacity: 1; pointer-events: auto; }
.tour-fallback a { color: var(--brick-600); font-weight: 600; pointer-events: auto; }
@media (max-width: 640px) {
  .tour { padding: 3rem 0; }
  .tour-frame { aspect-ratio: 4 / 3; }
}
.visit::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(216, 35, 27, 0.22), transparent 50%),
    radial-gradient(ellipse at 10% 100%, rgba(216, 35, 27, 0.12), transparent 55%);
  pointer-events: none;
}
.visit h2 { color: var(--paper); }
.visit .eyebrow { color: var(--brass-400); }
.visit .section-head p { color: rgba(255, 255, 255, 0.72); }

.visit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  z-index: 1;
}
.visit-card {
  padding: 2.2rem 1.8rem;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.visit-card svg {
  width: 26px; height: 26px;
  color: var(--brass-400);
  stroke-width: 1.4;
  margin-bottom: 1.1rem;
}
.visit-card h4 {
  color: var(--paper);
  margin-bottom: 0.7rem;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}
.visit-card p,
.visit-card li {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.98rem;
  line-height: 1.75;
}
.visit-card ul { list-style: none; }
.visit-card a { color: var(--brass-400); }
.visit-card a:hover { color: var(--paper); }
.hours-row {
  display: flex;
  justify-content: space-between;
  padding: 0.18rem 0;
}
.hours-row span:first-child { color: var(--paper); font-weight: 500; }
/* Op de lichte contact-kaart de dagen wél donker/leesbaar maken */
.info-card .hours-row span:first-child { color: var(--sepia-900); }

/* ---------- Contact / Forms ---------- */
.contact-section { background: var(--paper-soft); }
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3.5rem;
  align-items: flex-start;
}
@media (max-width: 980px) { .contact-grid { grid-template-columns: 1fr; } }

.info-card {
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  padding: 2.4rem;
  border-radius: var(--radius);
}
.info-card h3 { margin-bottom: 1.6rem; font-size: 1.35rem; }
.info-row {
  display: flex;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: flex-start;
}
.info-row:last-child { border-bottom: none; padding-bottom: 0; }
.info-row svg {
  flex-shrink: 0;
  width: 20px; height: 20px;
  color: var(--brass-600);
  margin-top: 4px;
  stroke-width: 1.4;
}
.info-row-body strong {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sepia-500);
  margin-bottom: 4px;
  font-weight: 600;
}
.info-row-body a .info-row-body span { color: var(--sepia-900); font-weight: 500; }

form {
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  padding: 2.6rem;
  border-radius: var(--radius);
}
form h3 { margin-bottom: 0.4rem; font-size: 1.35rem; }
form > p.form-intro { color: var(--sepia-700); margin-bottom: 1.8rem; font-size: 0.98rem; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.form-group { margin-bottom: 1.1rem; }
.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sepia-900);
  margin-bottom: 0.45rem;
  letter-spacing: 0.02em;
}
.form-group label .req { color: var(--brick-600); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.98rem;
  background: var(--paper-warm);
  color: var(--ink);
  transition: all var(--dur) var(--ease);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--brass-600);
  background: var(--paper-soft);
  box-shadow: 0 0 0 3px rgba(216, 35, 27, 0.14);
}
.form-group textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--sepia-700);
  margin: 0.5rem 0 1.4rem;
  line-height: 1.55;
}
.form-check input { margin-top: 4px; accent-color: var(--brick-600); }

.form-success {
  display: none;
  background: #eaf3ec;
  color: #24603a;
  padding: 1rem 1.2rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  border-left: 3px solid #2f8a4f;
  font-size: 0.95rem;
}
.form-success.show { display: block; }

/* ---------- Inner hero (non-home pages) ---------- */
/* ---------- Legal / content-blok (Koningsdag, Privacy, ondersteunende paginas) ---------- */
.legal {
  padding: 4rem 0 5rem;
  background: var(--paper);
}
.legal .container { max-width: 820px; }
.legal h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--sepia-900);
  margin: 2.2rem 0 0.8rem;
  padding-left: 0.9rem;
  border-left: 4px solid var(--brick-600);
}
.legal h2:first-child { margin-top: 0; }
.legal p,
.legal li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sepia-800);
}
.legal p { margin-bottom: 1rem; }
.legal ul {
  padding-left: 0;
  margin: 0.8rem 0 1.4rem;
  list-style: none;
}
.legal ul li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.6rem;
  border-bottom: 1px dashed var(--rule);
}
.legal ul li:last-child { border-bottom: none; }
.legal ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.4rem;
  color: var(--brick-600);
  font-weight: 700;
}
.legal a {
  color: var(--brick-600);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal a:hover { color: var(--brick-700); }

.legal .lede {
  background: var(--paper-soft);
  border-left: 3px solid var(--brass-500);
  padding: 1.2rem 1.4rem;
  margin: 1.6rem 0;
  font-size: 1.05rem;
  color: var(--sepia-900);
  font-weight: 500;
  border-radius: 0 6px 6px 0;
}

/* ---------- Inner hero (subpaginas, Rowasp-stijl met sfeerfoto) ---------- */
.inner-hero {
  position: relative;
  padding: 6rem 0 5rem;
  min-height: 360px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #1a1a1a;
  color: #ffffff;
  border-bottom: 4px solid var(--brick-600);
}
/* Sfeerfoto-achtergrond per pagina via class op .inner-hero (zie below) */
.inner-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-image: var(--ih-bg, url('../images/winkel/nieuw/04-interieur-gang.jpg'));
  filter: brightness(0.55) saturate(1.1);
  z-index: 0;
}
.inner-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 60%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.45) 100%);
  z-index: 0;
}
.inner-hero .container {
  position: relative;
  z-index: 1;
  max-width: 1100px;
}
.inner-hero .breadcrumb {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.78);
  margin-bottom: 1.4rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.inner-hero .breadcrumb a { color: rgba(255,255,255,0.9); }
.inner-hero .breadcrumb a:hover { color: var(--brick-500); }

.inner-hero .eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--brick-600);
  padding: 0.4rem 0.95rem;
  margin-bottom: 1.2rem;
  border-radius: 2px;
  padding-left: 0.95rem;
}
.inner-hero .eyebrow::before { display: none; }

.inner-hero h1 {
  color: #ffffff;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  text-shadow: 0 4px 18px rgba(0,0,0,0.55);
  line-height: 1.1;
  text-transform: none;
}
.inner-hero h1 em {
  font-style: italic;
  color: var(--brick-500);
  font-weight: 800;
}
.inner-hero p {
  font-size: 1.08rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.92);
  max-width: 680px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

/* Achtergrond per pagina */
.theme-overons      { --ih-bg: url('../images/winkel/nieuw/01-gevel-peperkamp.jpg'); }
.theme-assortiment  { --ih-bg: url('../images/winkel/nieuw/02-gang-luchtvaart.jpg'); }
.theme-voorraad     { --ih-bg: url('../images/winkel/nieuw/07-onderdelen-organizer.jpg'); }
.theme-occasions    { --ih-bg: url('../images/winkel/nieuw/15-modeltreinen-rij.jpg'); }
.theme-contact      { --ih-bg: url('../images/winkel/nieuw/04-interieur-gang.jpg'); }
.theme-koningsdag   { --ih-bg: url('../images/winkel/nieuw/05-accessoires-rood.jpg'); }
.theme-privacy      { --ih-bg: url('../images/winkel/nieuw/04-interieur-gang.jpg'); }
.theme-merken       { --ih-bg: url('../images/winkel/nieuw2/winkel-04-bouwpakketten-wand.jpg'); }
.theme-nieuws       { --ih-bg: url('../images/winkel/news-5-etalage-autos.jpg'); }
.theme-tour360      { --ih-bg: url('../images/winkel/nieuw2/winkel-05-vol-met-producten.jpg'); }

/* ---------- Gallery ---------- */
.gallery { background: var(--paper-soft); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 180px;
  gap: 1rem;
}
.gallery-item {
  overflow: hidden;
  border-radius: var(--radius);
  position: relative;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}
.gallery-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15, 15, 15, 0.78) 0%, rgba(15, 15, 15, 0.35) 40%, transparent 70%);
  opacity: 1;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item:hover::after {
  background: linear-gradient(to top, rgba(15, 15, 15, 0.85) 0%, rgba(15, 15, 15, 0.45) 40%, transparent 70%);
}
.gallery-item .caption {
  position: absolute;
  bottom: 1.2rem; left: 1.4rem; right: 1.4rem;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.gallery-item .caption::after {
  content: '↗';
  font-size: 0.9rem;
  opacity: 0.7;
  transition: transform var(--dur) var(--ease);
}
.gallery-item:hover .caption::after { transform: translate(2px, -2px); opacity: 1; }

.gallery-item.g1 { grid-column: span 7; grid-row: span 2; }
.gallery-item.g2 { grid-column: span 5; grid-row: span 1; }
.gallery-item.g3 { grid-column: span 5; grid-row: span 1; }
.gallery-item.g4 { grid-column: span 12; grid-row: span 1; }
@media (max-width: 760px) {
  .gallery-grid { grid-auto-rows: 160px; }
  .gallery-item.g1, .gallery-item.g2, .gallery-item.g3, .gallery-item.g4 { grid-column: span 12; grid-row: span 1; }
}

/* ---------- Quote, knus en warm ---------- */
.quote-band {
  background: var(--paper-warm);
  padding: 7rem 0;
  text-align: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.quote-band::before {
  content: '\201C';
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: 14rem;
  line-height: 1;
  color: rgba(192, 139, 44, 0.16);
  pointer-events: none;
}
.quote-band blockquote {
  max-width: 820px;
  margin: 0 auto;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.35;
  color: var(--sepia-900);
  font-style: italic;
  position: relative;
  z-index: 1;
}
.quote-band blockquote::before {
  content: '';
  display: block;
  width: 60px; height: 2px;
  background: var(--brass-600);
  margin: 0 auto 1.8rem;
}
.quote-band cite {
  display: block;
  margin-top: 1.6rem;
  font-style: normal;
  font-family: 'Caveat', cursive;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  color: var(--brick-700);
  font-weight: 500;
}

/* ---------- Gezellige groet-band vlak voor footer ---------- */
.goodbye-band {
  background: var(--paper-soft);
  color: var(--sepia-900);
  padding: 3.5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 4px solid var(--brick-600);
}
.goodbye-band .container {
  position: relative;
  z-index: 1;
}
.gb-logo {
  width: 200px;
  height: auto;
  margin: 0 auto 1.2rem;
  display: block;
}
.goodbye-band h3 {
  color: var(--sepia-900);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: 0.005em;
}
.goodbye-band p {
  color: var(--sepia-700);
  font-size: 0.95rem;
  margin: 0;
  letter-spacing: 0.04em;
}
@media (prefers-reduced-motion: reduce) {
  .gb-car { animation: none; }
}

/* ---------- Footer ---------- */
footer {
  background: #0f0f0f;
  color: rgba(255, 255, 255, 0.70);
  padding: 5rem 0 2rem;
  position: relative;
}
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brick-600), var(--brick-500), var(--brick-600));
  z-index: 2;
}
/* Mobiele footer-trein: alleen op telefoon, treinfoto die fade't naar het donker */
.footer-train { display: none; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr 1.1fr 1.3fr;
  gap: 3rem;
  margin-bottom: 3rem;
  align-items: start;
}
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 3rem; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

footer h5 {
  color: var(--paper);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
}
footer ul { list-style: none; }
footer li { margin-bottom: 0.5rem; line-height: 1.55; font-size: 0.94rem; color: rgba(255,255,255,0.72); }
footer a { color: rgba(255, 255, 255, 0.72); font-size: 0.94rem; transition: color 180ms ease; }
footer a:hover { color: var(--brass-400); }

.footer-contact li { color: rgba(255,255,255,0.72); }
.footer-contact .gap { height: 0.4rem; margin: 0; }

.footer-hours { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.85);
}
.footer-hours li span:first-child {
  color: rgba(255,255,255,0.95);
  font-weight: 500;
}
.footer-hours li span:last-child {
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.footer-hours li.closed { opacity: 0.55; }
.footer-hours .park-note {
  display: block;
  margin-top: 0.6rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(255,255,255,0.10);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}

.footer-brand .brand-text strong { color: var(--paper); }
.footer-brand .brand-text span { color: var(--brass-400); }
.footer-brand p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  margin-top: 1rem;
  max-width: 320px;
  line-height: 1.7;
}

.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.4rem;
}
.footer-social a {
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur) var(--ease);
}
.footer-social a svg { width: 16px; height: 16px; }
.footer-social a:hover {
  background: var(--brass-500);
  border-color: var(--brass-500);
  color: var(--sepia-900);
  transform: translateY(-2px);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.8rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- Reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.reveal-stagger.visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 450ms; }
.reveal-stagger.visible > *:nth-child(7) { transition-delay: 540ms; }
.reveal-stagger.visible > *:nth-child(8) { transition-delay: 630ms; }
.reveal-stagger.visible > *:nth-child(9) { transition-delay: 720ms; }

/* Slide in vanuit links */
.reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  will-change: opacity, transform;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

/* Slide in vanuit rechts */
.reveal-right {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  will-change: opacity, transform;
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Schaal omhoog */
.reveal-zoom {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  will-change: opacity, transform;
}
.reveal-zoom.visible { opacity: 1; transform: scale(1); }

/* Fade zonder beweging */
.reveal-fade {
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.reveal-fade.visible { opacity: 1; }

/* Blur in, soft entrance */
.reveal-blur {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(18px);
  transition: opacity 1100ms var(--ease), filter 1100ms var(--ease), transform 1100ms var(--ease);
  will-change: opacity, filter, transform;
}
.reveal-blur.visible { opacity: 1; filter: blur(0); transform: translateY(0); }

/* Pop in, springy schaal */
.reveal-pop {
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 700ms var(--ease), transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: opacity, transform;
}
.reveal-pop.visible { opacity: 1; transform: scale(1); }

/* Rotate in, voor accenten/badges */
.reveal-rotate {
  opacity: 0;
  transform: rotate(-8deg) translateY(20px);
  transition: opacity 900ms var(--ease), transform 900ms cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: opacity, transform;
}
.reveal-rotate.visible { opacity: 1; transform: rotate(0) translateY(0); }

/* Flip in, voor cards */
.reveal-flip {
  opacity: 0;
  transform: perspective(900px) rotateX(28deg) translateY(20px);
  transform-origin: center bottom;
  transition: opacity 950ms var(--ease), transform 950ms var(--ease);
  will-change: opacity, transform;
}
.reveal-flip.visible { opacity: 1; transform: perspective(900px) rotateX(0) translateY(0); }

/* Tilt in, subtiele scheve binnenkomst */
.reveal-tilt {
  opacity: 0;
  transform: rotate(2deg) translateY(28px) scale(0.97);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  will-change: opacity, transform;
}
.reveal-tilt.visible { opacity: 1; transform: rotate(0) translateY(0) scale(1); }

/* Mask reveal: cliphij vanaf onderaf */
.reveal-mask {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(8px);
  transition: opacity 800ms var(--ease), clip-path 1100ms cubic-bezier(0.65, 0, 0.35, 1), transform 1100ms var(--ease);
  will-change: opacity, clip-path, transform;
}
.reveal-mask.visible { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }

/* Stagger met grotere offset & lagere snelheid */
.reveal-stagger-soft > * {
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  transition: opacity 850ms var(--ease), transform 850ms var(--ease);
}
.reveal-stagger-soft.visible > * { opacity: 1; transform: translateY(0) scale(1); }
.reveal-stagger-soft.visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger-soft.visible > *:nth-child(2) { transition-delay: 120ms; }
.reveal-stagger-soft.visible > *:nth-child(3) { transition-delay: 240ms; }
.reveal-stagger-soft.visible > *:nth-child(4) { transition-delay: 360ms; }
.reveal-stagger-soft.visible > *:nth-child(5) { transition-delay: 480ms; }
.reveal-stagger-soft.visible > *:nth-child(6) { transition-delay: 600ms; }
.reveal-stagger-soft.visible > *:nth-child(7) { transition-delay: 720ms; }
.reveal-stagger-soft.visible > *:nth-child(8) { transition-delay: 840ms; }
.reveal-stagger-soft.visible > *:nth-child(9) { transition-delay: 960ms; }
.reveal-stagger-soft.visible > *:nth-child(10) { transition-delay: 1080ms; }

/* Foto-zoom op reveal, foto schaalt traag van 1.08 → 1 */
.reveal-ken-burns img {
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 1200ms var(--ease), transform 2200ms var(--ease);
  will-change: opacity, transform;
}
.reveal-ken-burns.visible img { opacity: 1; transform: scale(1); }

/* Range-media foto's: subtiele ken-burns naast de reveal-left/right van de container */
.range-media.visible img {
  animation: range-ken-burns 9s ease-out forwards;
}
@keyframes range-ken-burns {
  0% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Sectie-headers krijgen automatisch een onderstreping die intekent */
.section-head.reveal h2::after,
.section-head.reveal-blur h2::after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: var(--brick-600);
  margin-top: 0.8rem;
  transition: width 1100ms cubic-bezier(0.65, 0, 0.35, 1) 250ms;
}
.section-head.reveal.visible h2::after,
.section-head.reveal-blur.visible h2::after {
  width: 64px;
}

/* Subtiel zwevende decoratieve elementen */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.float-soft { animation: float-soft 5s ease-in-out infinite; }

@keyframes float-tilt {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
}
.float-tilt { animation: float-tilt 7s ease-in-out infinite; }

/* Pulserende glow voor CTAs/badges */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216, 35, 27, 0.45); }
  50% { box-shadow: 0 0 0 12px rgba(216, 35, 27, 0); }
}
.pulse-glow { animation: pulse-glow 2.4s ease-out infinite; }

/* Ken-burns zit nu op .hero-rowasp-bg (de hele achtergrond zoomt traag en
   doorlopend), niet meer per foto — dat gaf een schaal-mismatch/haperen. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-stagger > *, .reveal-stagger-soft > *,
  .reveal-left, .reveal-right, .reveal-zoom, .reveal-fade,
  .reveal-blur, .reveal-pop, .reveal-rotate, .reveal-flip,
  .reveal-tilt, .reveal-mask, .reveal-ken-burns img {
    opacity: 1; transform: none; filter: none; clip-path: none;
  }
  .float-soft, .float-tilt, .pulse-glow { animation: none; }
}

/* ---------- Historie tijdlijn ---------- */
.timeline {
  background: var(--paper-soft);
  padding: 6rem 0;
}
.timeline-intro {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 900px;
  margin: 0 auto 5rem;
}
@media (max-width: 700px) {
  .timeline-intro { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .timeline-portrait { max-width: 240px; margin: 0 auto; }
}
.timeline-portrait {
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.timeline-portrait img { width: 100%; height: 100%; object-fit: cover; }
.timeline-intro h2 { margin-bottom: 0.8rem; }
.timeline-intro p { font-size: 1.05rem; line-height: 1.75; }

.timeline-steps {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
}
.timeline-steps::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 20px; bottom: 20px;
  width: 2px;
  background: var(--rule);
  transform: translateX(-50%);
}
@media (max-width: 760px) {
  .timeline-steps::before { left: 24px; }
}

.timeline-step {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
  align-items: center;
}
.timeline-step:last-child { margin-bottom: 0; }

/* default direction: media left, dot middle, text right */
.timeline-step .timeline-media { grid-column: 1; grid-row: 1; }
.timeline-step .timeline-dot   { grid-column: 2; grid-row: 1; }
.timeline-step .timeline-text  { grid-column: 3; grid-row: 1; }

/* reverse direction: text left, dot middle, media right */
.timeline-step.reverse .timeline-media { grid-column: 3; }
.timeline-step.reverse .timeline-dot   { grid-column: 2; }
.timeline-step.reverse .timeline-text  { grid-column: 1; text-align: right; }

.timeline-dot {
  width: 16px; height: 16px;
  background: var(--brick-600);
  border-radius: 50%;
  justify-self: center;
  box-shadow: 0 0 0 6px var(--paper-soft), 0 0 0 7px var(--rule);
  position: relative;
  z-index: 1;
}
.timeline-media {
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  /* Archief-foto look: warme crème lijst rondom */
  background: #f3ece2;
  padding: 10px;
  position: relative;
}
.timeline-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 3px;
  transition: transform 700ms var(--ease);
  /* Zachte archief-warmte zodat oude foto's bewust vintage ogen */
  filter: saturate(1.04) contrast(1.03);
}
.timeline-media:hover img { transform: scale(1.03); }
.timeline-text .step-meta {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brick-600);
  margin-bottom: 0.6rem;
  display: block;
}
.timeline-text h3 {
  font-size: 1.6rem;
  margin-bottom: 0.8rem;
  letter-spacing: -0.02em;
}
.timeline-text p {
  font-size: 1rem;
  line-height: 1.7;
}

@media (max-width: 760px) {
  .timeline-step,
  .timeline-step.reverse {
    grid-template-columns: 48px 1fr;
    gap: 1.2rem;
    margin-bottom: 2.2rem;
  }
  .timeline-step .timeline-dot,
  .timeline-step.reverse .timeline-dot {
    grid-column: 1; grid-row: 1 / span 2;
    justify-self: center; align-self: start;
    margin-top: 10px;
  }
  .timeline-step .timeline-media,
  .timeline-step.reverse .timeline-media {
    grid-column: 2; grid-row: 1;
    margin-bottom: 0.4rem;
  }
  .timeline-step .timeline-text,
  .timeline-step.reverse .timeline-text {
    grid-column: 2; grid-row: 2;
    text-align: left;
  }
}

/* ---------- Lightbox voor galerij ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(15, 15, 15, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms var(--ease);
  cursor: zoom-out;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-inner {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  transform: scale(0.96);
  transition: transform 320ms var(--ease);
}
.lightbox.open .lightbox-inner { transform: scale(1); }
.lightbox img {
  width: auto;
  max-width: min(94vw, 1100px);
  height: auto;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 100%;     /* krimpt zodat het bijschrift (titel + prijs) eronder past */
  border-radius: 6px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
  object-fit: contain;
  background: #1a1a1a;
}
.lightbox-caption {
  flex: 0 0 auto;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  text-align: center;
  letter-spacing: 0.02em;
}
.lightbox-caption .lb-title,
.lightbox-caption .lb-desc,
.lightbox-caption .lb-price { display: block; }
.lightbox-caption .lb-title { font-weight: 700; font-size: 1.08rem; }
.lightbox-caption .lb-desc {
  font-weight: 400; font-size: 0.92rem; color: rgba(255, 255, 255, 0.78);
  margin: 0.35rem auto 0; max-width: 560px; line-height: 1.5;
}
.lightbox-caption .lb-price { font-weight: 600; font-size: 1.45rem; color: #ff7a66; margin-top: 0.55rem; }
.lightbox-caption .lb-counter { display: block; color: rgba(255, 255, 255, 0.5); font-size: 0.8rem; letter-spacing: 0.05em; margin-top: 0.5rem; }
.lightbox-caption .lb-actions { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.1rem; }
.lightbox-caption .lb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.72rem 1.45rem; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.96rem;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background 180ms var(--ease), border-color 180ms var(--ease), transform 120ms var(--ease);
}
.lightbox-caption .lb-btn:active { transform: translateY(1px); }
.lightbox-caption .lb-btn-reserve { background: var(--brick-600); color: #fff; }
.lightbox-caption .lb-btn-reserve:hover { background: var(--brick-700); }

/* Reserveer-popup: keuze tussen bellen of mailen */
.reserve-pop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(15, 15, 15, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms var(--ease);
}
.reserve-pop.open { opacity: 1; visibility: visible; }
.reserve-pop-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 18px;
  padding: 1.9rem 1.6rem 1.7rem;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.96);
  transition: transform 220ms var(--ease);
}
.reserve-pop.open .reserve-pop-card { transform: scale(1); }
.reserve-pop-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  color: var(--ink, #1a1a1a);
}
.reserve-pop-product {
  font-weight: 600;
  color: var(--brick-700);
  margin: 0 0 0.9rem;
  line-height: 1.35;
}
.reserve-pop-help {
  color: #555;
  font-size: 0.95rem;
  margin: 0 0 1.3rem;
}
.reserve-pop-actions {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
}
.reserve-pop-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 0.6rem;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid var(--brick-600);
  transition: background 180ms var(--ease), color 180ms var(--ease), transform 120ms var(--ease);
}
.reserve-pop-btn:active { transform: translateY(1px); }
.reserve-pop-call { background: #fff; color: var(--brick-700); }
.reserve-pop-call:hover { background: #fdecea; }
.reserve-pop-mail { background: var(--brick-600); color: #fff; }
.reserve-pop-mail:hover { background: var(--brick-700); }
.reserve-pop-close {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #999;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.reserve-pop-close:hover { background: #f0f0f0; color: #333; }
.lightbox-close {
  position: absolute;
  top: 1.4rem; right: 1.4rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #ffffff;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--ease);
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.25); }
/* Vorige/volgende knoppen om door de foto's te bladeren */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: none;
  color: #ffffff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--ease);
  z-index: 2;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.28); }
.lightbox-prev { left: 1.4rem; }
.lightbox-next { right: 1.4rem; }
.lightbox img { cursor: pointer; }
@media (max-width: 720px) {
  .lightbox-nav { width: 42px; height: 42px; font-size: 1.6rem; }
  .lightbox-prev { left: 0.6rem; }
  .lightbox-next { right: 0.6rem; }
}

.gallery-item { cursor: zoom-in; }

/* ---------- Photo notice (for client) ---------- */
.photo-note {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(43, 29, 20, 0.88);
  color: var(--paper);
  font-size: 0.68rem;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  letter-spacing: 0.06em;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur);
  z-index: 2;
}
[data-placeholder]:hover .photo-note { opacity: 0.92; }

/* ===========================================================
   MOBIELE OPTIMALISATIE, telefoon (≤ 640px) en klein (≤ 420px)
   =========================================================== */

@media (max-width: 640px) {
  /* Algemene padding & spacing */
  body { font-size: 16px; }
  .container { padding: 0 1.1rem; }
  section { padding: 3.5rem 0; }
  .section-head { margin-bottom: 2.2rem; }
  .section-head p { font-size: 1rem; }

  /* Headings kleiner */
  h1 { font-size: clamp(2rem, 8vw, 2.6rem) !important; line-height: 1.15; }
  h2 { font-size: clamp(1.6rem, 6vw, 2rem); line-height: 1.2; }
  h3 { font-size: 1.18rem; }

  /* Buttons, breder voor vingers */
  .btn { padding: 0.85rem 1.3rem; font-size: 0.95rem; }
  .hero-cta { width: 100%; }
  .hero-cta .btn { flex: 1; justify-content: center; }

  /* Nav (mobile fijn-afstelling) */
  .nav-inner { padding: 0.7rem 1rem; }
  .brand img { height: 65px; }

  /* Hero */
  .hero { padding: 100px 0 50px; }
  .hero-grid { gap: 2.5rem; }
  .hero-lead { font-size: 1.02rem; margin: 1.2rem 0 1.6rem; }
  .hero-meta { font-size: 0.78rem; margin-bottom: 1.2rem; }
  .hero-foot {
    margin-top: 2.2rem;
    padding-top: 1.5rem;
    gap: 1.2rem 1.8rem;
  }
  .hero-foot strong { font-size: 0.98rem; }
  .hero-foot span { font-size: 0.8rem; }
  .hero-visual { aspect-ratio: 5/4; max-width: 92%; margin: 0 auto; }
  .hero-frame.primary { inset: 0 12% 22% 0; }
  .hero-frame.secondary { inset: 30% 0 0 30%; border-width: 4px; }
  .hero-mark {
    left: 0;
    bottom: 2%;
    padding: 0.7rem 0.95rem;
    max-width: 200px;
    gap: 0.6rem;
  }
  .hero-mark .seal { width: 38px; height: 38px; font-size: 0.85rem; }
  .hero-mark small { font-size: 0.66rem; }
  .hero-mark strong { font-size: 0.85rem; }

  /* Announce bar */
  .announce { padding: 0.7rem 0; font-size: 0.84rem; }
  .announce .container { gap: 0.5rem 0.9rem; padding: 0 1.1rem; text-align: center; }
  .announce .tag {
    border-right: none;
    padding-right: 0;
    font-size: 0.62rem;
    width: 100%;
  }

  /* Cats */
  .cat-grid { grid-template-columns: 1fr; }
  .cat-card { padding: 1.8rem 1.4rem; min-height: auto; }
  .cat-card h3 { font-size: 1.15rem; }
  .cat-card p { font-size: 0.92rem; }
  .cat-icon { width: 44px; height: 44px; margin-bottom: 1rem; }
  .cat-icon svg { width: 26px; height: 26px; }

  /* Story */
  .story-grid { gap: 2rem; }
  .story-img-stack { aspect-ratio: 4/4; max-width: 92%; margin: 0 auto; }
  .story-img-stack .f-caption { font-size: 0.76rem; bottom: 0.5rem; left: 0.6rem; right: 0.6rem; }
  .story-text p { font-size: 0.98rem; }
  .story-text p.lead { font-size: 1.05rem; }
  .marks { grid-template-columns: 1fr; gap: 1.2rem; margin-top: 2rem; padding-top: 2rem; }
  .mark-item h4 { font-size: 0.96rem; }
  .mark-item p { font-size: 0.88rem; }

  /* Visit cards (donker) */
  .visit-grid { grid-template-columns: 1fr; }
  .visit-card { padding: 1.6rem 1.4rem; }
  .visit-card p, .visit-card li { font-size: 0.94rem; }
  .hours-row { font-size: 0.92rem; }

  /* Quote */
  .quote-band blockquote { font-size: 1.15rem !important; }

  /* Inner hero (subpaginas) */
  .inner-hero { padding: 110px 0 2.5rem !important; }
  .inner-hero .breadcrumb { font-size: 0.8rem; margin-bottom: 1rem; }
  .inner-hero p { font-size: 1rem; }

  /* Contact */
  .contact-grid { gap: 2rem; }
  .info-card { padding: 1.6rem 1.3rem; }
  .info-row { padding: 0.9rem 0; gap: 0.8rem; }
  .info-row svg { width: 22px; height: 22px; }
  .info-row strong { font-size: 0.95rem; }
  form#contactForm { padding: 1.6rem 1.3rem; }
  form#contactForm h3 { font-size: 1.2rem; }
  .form-group input,
  .form-group textarea,
  .form-group select {
    font-size: 16px;  /* voorkom iOS zoom bij focus */
    padding: 0.8rem 0.9rem;
  }

  /* Voorraad */
  .stock-tab { padding: 0.85rem 1rem; font-size: 0.88rem; }
  .stock-grid { grid-template-columns: 1fr; }
  .stock-item { padding: 1.3rem; }

  /* Assortiment */
  .range { padding: 2.8rem 0; gap: 1.6rem; }
  .range-text h2 { font-size: 1.6rem; }
  .range-text p { font-size: 0.96rem; }
  .range-text li { font-size: 0.92rem; }
  .range-toggle { padding: 0.75rem 1.1rem; font-size: 0.9rem; }
  .range-details-inner { padding: 1.4rem 1.4rem; }

  /* Occasions */
  /* .occ-tabs / .occ-tab worden inline in occasions.html gestyled (2x2 grid) */
  .occ-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .occ-panel-head { flex-direction: column; align-items: flex-start; gap: 0.4rem; padding-bottom: 1rem; margin-bottom: 1.5rem; }
  .occ-panel-head h2 { font-size: 1.5rem; }
  .occ-sub-title { font-size: 0.72rem; gap: 0.6rem; }
  .occ-sub-title::before { width: 1.2rem; }
  .occ-sub { margin-bottom: 2.5rem; }

  /* Privacy/legal */
  .legal { padding: 2rem 0 4rem; }
  .legal h2 { font-size: 1.2rem; margin: 2rem 0 0.6rem; }
  .legal p .legal ul .legal li { font-size: 0.97rem; }
  .legal .lede { font-size: 1rem; padding: 1.1rem 1.2rem; }

  /* Footer */
  footer { padding: 0 0 1.5rem; }
  .footer-train {
    display: block;
    height: 150px;
    margin-bottom: 2.5rem;
    background:
      linear-gradient(to bottom, rgba(15,15,15,0) 0%, rgba(15,15,15,0.45) 60%, #0f0f0f 100%),
      url("../images/winkel/nieuw2/prod-07-ns-treinen-1314-1601.jpg");
    background-size: cover, cover;
    background-position: center 40%, center 40%;
    background-repeat: no-repeat, no-repeat;
  }
  .footer-grid { gap: 2rem; margin-bottom: 2.2rem; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem;
  }
  .footer-brand p { font-size: 0.92rem; }
  footer h5 { font-size: 0.72rem; margin-bottom: 1rem; }
  footer li, footer a { font-size: 0.92rem; }

  /* Hero foto-notitie (placeholder) */
  .photo-note { font-size: 0.62rem; padding: 0.22rem 0.5rem; }
}

@media (max-width: 420px) {
  .container { padding: 0 0.9rem; }
  section { padding: 2.8rem 0; }
  h1 { font-size: 1.8rem !important; }
  h2 { font-size: 1.45rem !important; }

  .hero { padding: 95px 0 40px; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .hero-foot { gap: 0.9rem 1.2rem; }
  .hero-foot > div { flex: 1 1 calc(50% - 0.6rem); }
  .hero-foot strong { font-size: 0.92rem; }
  .hero-foot span { font-size: 0.76rem; }

  .hero-mark { max-width: 170px; padding: 0.6rem 0.8rem; }
  .hero-mark .seal { width: 32px; height: 32px; font-size: 0.78rem; }

  .visit-card { padding: 1.4rem 1.2rem; }
  .info-card { padding: 1.3rem 1.1rem; }

  .occ-tab { padding: 0.85rem 0.85rem; font-size: 0.84rem; }

  .range-details-inner { padding: 1.2rem 1.1rem; }

  /* Iframes (Google Maps etc) */
  iframe { height: 320px !important; }
}


/* ============================================================
   MOBILE OPTIMALISATIE (≤ 720px) — alle puntjes op de i
   ============================================================ */
@media (max-width: 720px) {
  /* Topbar: compacter, lettertype kleiner */
  .topbar { font-size: 0.62rem; padding: 0.45rem 0; }
  .topbar-msg { letter-spacing: 0.04em; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right { gap: 0.5rem; flex-shrink: 0; }
  .topbar-flag { font-size: 0.9rem; }
}

@media (max-width: 720px) {
  /* Hero: pad kleiner, inner is volledige container-breedte */
  .hero.hero-rowasp { padding: 3rem 0 3.5rem; min-height: auto; }
  .hero-rowasp-inner { max-width: none; }
  .hero-rowasp-eyebrow { font-size: 0.66rem; padding: 0.35rem 0.7rem; margin-bottom: 1rem; }
  .rowasp-line-1 { font-size: 1rem; margin-bottom: 0.3rem; }
  .rowasp-line-2 { font-size: 1.9rem; }
  .hero-rowasp-lead { font-size: 0.96rem; margin-bottom: 1.3rem; }
  .hero-rowasp-cta { flex-direction: column; gap: 0.6rem; }
  .hero-rowasp-cta .btn { width: 100%; text-align: center; justify-content: center; padding: 0.9rem 1.2rem; font-size: 0.95rem; }

  /* Producten-strook: meer ademruimte */
  .product-strip { padding: 2.5rem 0 2rem; }
  .product-strip-grid { gap: 0.8rem; }
  .ps-label { font-size: 0.85rem; padding: 0.6rem 0.7rem; }
  .ps-sub { font-size: 0.85rem; }
  /* Smalle tegels: "Binnenkort"-badge naar onderin de foto, zodat 'ie niet
     botst met de hoek-badge (360° / datum) en niet over de rand valt. */
  .ps-soon-badge {
    top: auto;
    bottom: 0.55rem;
    right: 0.55rem;
    font-size: 0.55rem;
    padding: 0.26rem 0.48rem;
    letter-spacing: 0.07em;
  }
  .ps-360-badge { font-size: 0.74rem; padding: 0.26rem 0.55rem; }
  .ps-kd-badge { font-size: 0.78rem; padding: 0.3rem 0.58rem 0.3rem 0.46rem; }

  /* Dual-slider: 1 kolom, kleiner */
  .store-slider-section { padding: 2rem 0 2.5rem; }
  .dual-slider-section > .container { gap: 1rem; }

  /* Mozaiek: minder hoog op mobiel + iets smallere captions */
  .mosaic-section { padding: 3rem 0 0; }
  .mosaic-strip { grid-auto-rows: 110px; gap: 0.5rem; padding: 0 0.5rem; }
  .m-cap { font-size: 0.95rem; bottom: 0.7rem; left: 0.7rem; }

  /* Brands-strook */
  .brands-soft { padding: 1.8rem 0; }
  .brands-intro { font-size: 1.05rem; }
  .brands-list { font-size: 0.95rem; }

  /* Categorie-foto cards: één kolom, label iets compacter */
  .cat-photo-overlay { padding: 0.7rem 0.9rem 0.75rem; }
  .cat-photo-overlay h3 { font-size: 0.95rem; }

  /* Story-simple: minder padding, foto onder tekst */
  .story-simple { padding: 3rem 0; }
  .story-simple-text h2 { font-size: 1.4rem; }
  .story-simple-text p.lead { font-size: 1.02rem; }

  /* Visit / openingstijden: 1 kolom */
  .visit-grid { grid-template-columns: 1fr; }
  .visit-card { padding: 1.4rem 1.2rem; }

  /* Google Map: korter */
  .tour { padding: 3rem 0; }
  .tour-frame { aspect-ratio: 4/3; }

  /* Announce-bar tekst inkorten via ellipsis */
  .announce { padding: 0.75rem 0; }
  .announce .container { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
  .announce .tag { font-size: 0.65rem; }
  #announce-text { font-size: 0.85rem; line-height: 1.4; }
  #announce-link { font-size: 0.8rem; }

  /* Goodbye-band: logo compacter */
  .gb-logo { width: 150px; margin-bottom: 0.8rem; }
  .goodbye-band { padding: 2.5rem 0; }
  .goodbye-band h3 { font-size: 1.3rem; }
  .goodbye-band p { font-size: 0.88rem; letter-spacing: 0.02em; }

  /* Peper-divider: kleinere logo */
  .peper-divider img { width: 80px; }
  .peper-divider { padding: 1rem 0; }
  .peper-divider::before, .peper-divider::after { max-width: 100px; }

  /* Quote: minder padding */
  .quote-band { padding: 4rem 0; }
  .quote-band::before { font-size: 8rem; }

  /* Tabs op occasions: zie inline grid-styling in occasions.html */

  /* Container padding iets smaller op telefoon */
  .container { padding: 0 1.1rem; }
}

/* Extra kleine schermen (≤ 380px) — iPhone SE-achtig */
@media (max-width: 380px) {
  .rowasp-line-2 { font-size: 1.7rem; }
  .topbar-msg { font-size: 0.58rem; }
  .ps-tag { font-size: 0.65rem; letter-spacing: 0.12em; }
  .brand img { height: 58px; }
}

/* ============================================================
   THEMATISCHE SILHOUETTEN OP CATEGORIE-SECTIES
   Lichtgrijze SVG silhouet als zachte achtergrond per onderwerp
   ============================================================ */
/* Schone secties, geen rommelige foto-watermarks meer */
.range, .legal, .visit-light, .stock-panel, .occ-panel {
  position: relative;
}

/* ============================================================
   SFEERSTROOK (3-foto strip onderaan subpaginas)
   ============================================================ */
/* Koningsdag 2022, video + galerij */
.kd2022 { padding: 1rem 0 5rem; }
.kd-video {
  position: relative;
  max-width: 900px;
  margin: 0 auto 2.8rem;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(0,0,0,0.20);
  background: #000;
}
.kd-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Twee 2022 drone-video's naast elkaar */
.kd-videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  max-width: 980px;
  margin: 0 auto 1.6rem;
}
.kd-video2022 {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,0.18);
  background: #000;
  display: block;
}
/* Aparte knop naar de 2015-aftermovie op YouTube (onder de foto's) */
.kd-video-extra { text-align: center; margin-top: 2.6rem; }
.kd-yt-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.kd-yt-btn svg { flex-shrink: 0; }
@media (max-width: 720px) {
  .kd-videos { grid-template-columns: 1fr; gap: 0.9rem; }
}

.kd2022-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.8rem;
}
.kd2022-item {
  display: block;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  text-decoration: none;
}
.kd2022-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease);
}
.kd2022-item:hover img { transform: scale(1.05); }
.kd2022-item .caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.2rem 0.7rem 0.6rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 240ms var(--ease);
}
.kd2022-item:hover .caption { opacity: 1; }
@media (max-width: 720px) {
  .kd2022 { padding: 0.5rem 0 3.5rem; }
  .kd2022-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .kd-video { margin-bottom: 2rem; }
}

/* Koningsdag-foto's */
.kd-fotos { padding: 1rem 0 4.5rem; }
.kd-fotos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem;
  max-width: 1000px;
  margin: 0 auto;
}
.kd-foto {
  display: block;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,0.13);
  cursor: zoom-in;
  text-decoration: none;
}
.kd-foto img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease);
}
.kd-foto:hover img { transform: scale(1.04); }
.kd-foto .caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1rem 0.8rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
@media (max-width: 720px) {
  .kd-fotos-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .kd-fotos { padding: 0.5rem 0 3rem; }
}

.sfeer-strip {
  background: linear-gradient(180deg, transparent, var(--paper-soft));
  padding: 3rem 0 1rem;
}
.sfeer-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  max-width: 1100px;
  margin: 0 auto;
}
.sfeer-strip-grid img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
  filter: saturate(1.05);
  transition: transform 480ms var(--ease);
}
.sfeer-strip-grid img:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 28px rgba(216, 35, 27, 0.18);
}
@media (max-width: 720px) {
  .sfeer-strip-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .sfeer-strip-grid img:last-child { grid-column: span 2; }
  .sfeer-strip { padding: 2rem 0 0.5rem; }
}

/* Koningsdag, foto's binnenkort, oranje placeholder-kaarten */
.kd-photos-soon {
  padding: 1rem 0 4rem;
}
.kd-soon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
}
.kd-soon-card {
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  text-align: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #ff8200 0%, #e84c00 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  padding: 1rem;
  box-shadow: 0 8px 20px rgba(232, 76, 0, 0.22);
}
.kd-soon-card svg { width: 38px; height: 38px; opacity: 0.92; }
@media (max-width: 720px) {
  .kd-soon-grid { grid-template-columns: 1fr; gap: 0.7rem; }
  .kd-soon-card { aspect-ratio: 16/7; flex-direction: row; gap: 0.8rem; font-size: 0.95rem; }
  .kd-soon-card svg { width: 28px; height: 28px; }
  .kd-soon-card br { display: none; }
}

/* ============================================================
   STOCK-ITEM met foto-blok bovenaan (voorraad-cards)
   ============================================================ */
.stock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.4rem;
}
.stock-item {
  background: #ffffff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
.stock-item:hover {
  transform: translateY(-4px);
  border-color: var(--brick-500);
  box-shadow: 0 14px 32px rgba(216, 35, 27, 0.15);
}
.stock-item-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--paper-warm);
  position: relative;
}
.stock-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease);
}
.stock-item:hover .stock-item-img img { transform: scale(1.06); }
.stock-item > h4,
.stock-item > p,
.stock-item > .price {
  padding-left: 1.3rem;
  padding-right: 1.3rem;
}
.stock-item > .tag {
  display: inline-block;
  align-self: flex-start;
  margin: 1.1rem 0 0 1.3rem;
  padding: 0.35rem 0.8rem;
  background: var(--brick-600);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 3px;
  line-height: 1.3;
}
.stock-item > h4 {
  margin: 0.9rem 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sepia-900);
}
.stock-item > p {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--sepia-700);
  flex: 1;
  margin: 0 0 0.8rem;
}
.stock-item > .price {
  border-top: 1px solid var(--rule-soft);
  padding-top: 0.8rem;
  padding-bottom: 1rem;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--brick-600);
}
@media (max-width: 720px) {
  .stock-grid { gap: 1rem; }
  .stock-item > h4 { font-size: 1.02rem; }
}

/* Globale object-position fixes voor foto's die niet exact in het midden centraal zijn */
.stock-item-img img[src*="traxxas-in-actie"],
.sfeer-strip-grid img[src*="traxxas-in-actie"] { object-position: 65% 42%; }

.stock-item-img img[src*="buggy-sprong"],
.sfeer-strip-grid img[src*="buggy-sprong"] { object-position: center 30%; }

.stock-item-img img[src*="rally-golf"],
.sfeer-strip-grid img[src*="rally-golf"] { object-position: center 55%; }