/* ============================================================
   SUPER CARAVANS - Variant 1 "Professional"
   Design system, één stylesheet, geen build-stap.

   Art direction, uit de aangeleverde merkkaart
   --------------------------------------------
   Grond      : #0A0F1C, het diepe marineblauw van de huisstijl.
                De hele identiteit is donker: pand, bewegwijzering,
                visitekaartje, kleding. De site volgt dat.
   Accent     : #156BFF. Eén accent, gelockt. Vaste taken: prijzen,
                knoppen, actieve status.
   Grijs      : #6B6F76 voor lijnen en pictogrammen. Als tekstkleur
                haalt het op deze grond geen 4,5:1, dus daarvoor
                staat --muted.
   Tegenhanger: wit paneel (--panel) voor de leesblokken, zoals de
                merkkaart zelf ook een witte helft heeft.
   Fonts      : Space Grotesk (display, uit de merkkaart) +
                IBM Plex Sans (body).
   Radius     : 14px kaarten en beeld, 8px knoppen en velden,
                999px chips en filters. Eén regel, overal gevolgd.
   ============================================================ */

:root {
  /* ---- grond en vlakken ---- */
  --ground: #0a0f1c;
  --ground-2: #0f1626;
  --card: #141d2e;
  --deep: #060a14;
  --deep-2: #0f1728;
  --deep-3: #1b2436;

  /* ---- tekst ---- */
  --ink: #ffffff;
  --ink-soft: #b4bac5;
  --muted: #8e949e;
  --grey: #6b6f76;

  /* ---- lijnen ---- */
  --line: rgba(255, 255, 255, 0.13);
  --line-soft: rgba(255, 255, 255, 0.06);

  /* ---- accent, gelockt ----
     Het merkblauw #156BFF haalt op deze donkere grond 4,2:1. Genoeg voor
     een vlak, te weinig voor lopende tekst. Daarom twee rollen: het
     merkblauw vult knoppen en actieve vlakken, een lichtere tint doet
     de accenttekst (5,9:1). Op het witte paneel is het net andersom en
     is het merkblauw zelf wel leesbaar (4,6:1). */
  --accent: #4c8cff;
  --accent-on-dark: #4c8cff;
  --accent-fill: #156bff;
  --accent-hover: #3d86ff;
  --accent-on-panel: #156bff;
  --accent-deep: #0b52d1;
  --accent-wash: rgba(21, 107, 255, 0.16);

  /* ---- lichte tegenhanger, voor de contrastsecties ---- */
  --panel: #ffffff;
  --panel-2: #eef1f5;
  --ink-on-panel: #0a0f1c;
  --muted-on-panel: #6b6f76;
  --line-on-panel: rgba(10, 15, 28, 0.13);

  /* ---- status ---- */
  --ok: #34c77f;

  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;

  --step-hero: clamp(2.6rem, 5.6vw, 4.6rem);
  --step-1: clamp(1.9rem, 3.6vw, 3rem);
  --step-2: clamp(1.35rem, 2.2vw, 1.85rem);
  --step-3: clamp(1.08rem, 1.4vw, 1.25rem);

  --space-section: clamp(4rem, 8vw, 7.5rem);
  --gutter: clamp(1.15rem, 4vw, 3rem);

  --r-card: 14px;
  --r-btn: 8px;
  --r-chip: 999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.16), 0 10px 30px rgba(0, 0, 0, 0.19);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.19), 0 18px 44px rgba(0, 0, 0, 0.38);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0425rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--deep); color: var(--ground); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.skip-link {
  position: absolute; left: 1rem; top: -120%; z-index: 300;
  background: var(--accent-fill); color: #ffffff;
  padding: 0.7rem 1.1rem; border-radius: var(--r-btn); font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 860px; }
.section { padding-block: var(--space-section); }
.section--band { background: var(--ground-2); }
.section--deep { background: var(--deep); color: #ffffff; }
.section--deep .lead,
.section--deep .body-copy { color: rgba(255, 255, 255, 0.76); }
.section--tight { padding-block: clamp(2.75rem, 5vw, 4.25rem); }

/* ---------- typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.h-hero { font-size: var(--step-hero); line-height: 1.04; }
.h-1 { font-size: var(--step-1); }
.h-2 { font-size: var(--step-2); }
.h-3 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.01em; }
.lead { font-size: clamp(1.06rem, 1.35vw, 1.2rem); color: var(--ink-soft); max-width: 40ch; }
.body-copy { color: var(--ink-soft); max-width: 62ch; }
.eyebrow {
  display: inline-block;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-on-dark);
  margin-bottom: 0.85rem;
}
.section--deep .eyebrow { color: var(--accent-on-dark); }
.stack-sm > * + * { margin-top: 0.7rem; }
.stack-md > * + * { margin-top: 1.1rem; }

/* ---------- knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-weight: 600; font-size: 0.99rem; line-height: 1;
  padding: 0.95rem 1.45rem; border-radius: var(--r-btn);
  white-space: nowrap; text-align: center;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.18s var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { background: var(--accent-fill); color: #ffffff; }
.btn-primary:hover { background: var(--accent-hover); }
.section--deep .btn-primary { background: var(--accent-fill); color: #ffffff; }
.section--deep .btn-primary:hover { background: var(--accent-hover); }
.btn-outline { border: 1px solid var(--line); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--accent); background: rgba(255, 255, 255, 0.04); }
.section--deep .btn-outline { border-color: rgba(255, 255, 255, 0.32); color: #ffffff; }
.section--deep .btn-outline:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.07); }
.btn-lg { padding: 1.1rem 1.75rem; font-size: 1.04rem; }
.btn-full { width: 100%; }
.btn .arrow { transition: transform 0.28s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.link-under {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 600; color: var(--accent);
  border-bottom: 1px solid rgba(21, 107, 255, 0.4); padding-bottom: 2px;
  transition: border-color 0.2s;
}
.link-under:hover { border-color: var(--accent); }
.section--deep .link-under { color: var(--accent-on-dark); border-color: rgba(76, 140, 255, 0.4); }

/* ---------- header ---------- */
.site-header {
  background: rgba(10, 15, 28, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(10, 15, 28, 0.95);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
}
.site-header > .wrap {
  height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.brand-mark { width: 38px; height: 25px; flex: none; color: #ffffff; }
/* Het woordmerk uit de merkkaart staat schuin en in kapitalen. Space
   Grotesk heeft geen echte cursief, dus de schuinstand komt van een
   lichte skew. Vervang dit blok door het originele vectorlogo zodra
   de ontwerper dat aanlevert. */
.brand-name { line-height: 1; }
.brand-name b {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.06rem; line-height: 1; letter-spacing: 0.005em;
  text-transform: uppercase; color: #ffffff;
  transform: skewX(-7deg); transform-origin: 0 100%;
}
.brand-name small {
  display: block; margin-top: 5px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.58rem;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted);
}
.nav-desktop { display: flex; align-items: center; gap: 1.6rem; }
.nav-desktop a { font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); transition: color 0.2s; }
.nav-desktop a:hover, .nav-desktop a[aria-current="page"] { color: var(--ink); }
.nav-desktop .btn { color: #ffffff; }
.nav-phone {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 600; color: var(--ink); font-size: 0.95rem;
}
.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: var(--r-btn);
  border: 1px solid var(--line); align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--deep); transition: transform 0.3s var(--ease), opacity 0.2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ground);
  padding: 96px var(--gutter) 2rem;
  display: flex; flex-direction: column; gap: 0.2rem;
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform 0.42s var(--ease), opacity 0.3s;
  overflow-y: auto;
}
.nav-mobile.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.nav-mobile a:not(.btn) {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 700;
  letter-spacing: -0.02em; padding: 0.62rem 0; border-bottom: 1px solid var(--line-soft);
}
.nav-mobile .btn { margin-top: 1.4rem; }
.nav-mobile-call {
  margin-top: 0.8rem; display: flex; align-items: center; justify-content: center;
  gap: 0.5rem; color: var(--ink-soft); font-weight: 600;
}

/* ---------- hero ---------- */
.hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero-copy { max-width: 33ch; }
.hero h1 { margin-bottom: 1.1rem; }
.hero .lead { max-width: 42ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }
.hero-assure {
  margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem;
  color: var(--ink-soft); font-size: 0.92rem;
}
.hero-assure span { display: inline-flex; align-items: center; gap: 0.42rem; }
.hero-assure svg { color: var(--accent); flex: none; }

.hero-media { position: relative; }
.hero-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-card);
}
.hero-badge {
  position: absolute; left: -18px; bottom: -22px;
  background: var(--card); border-radius: var(--r-card);
  padding: 1.05rem 1.3rem; box-shadow: var(--shadow-card);
  border: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 0.9rem;
}
.hero-badge strong {
  font-family: var(--font-display); font-size: 1.85rem; line-height: 1;
  color: var(--ink); display: block;
}
.hero-badge span { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.35; display: block; }
.hero-badge .rule { width: 1px; align-self: stretch; background: var(--line); }

/* ---------- routes (drie paden) ---------- */
.routes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.5rem; }
.route-card {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-card);
  padding: 1.6rem 1.5rem 1.45rem; display: flex; flex-direction: column; gap: 0.55rem;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.25s;
}
.route-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--line); }
.route-icon {
  width: 42px; height: 42px; border-radius: var(--r-chip);
  background: var(--accent-wash); color: var(--accent);
  display: grid; place-items: center; margin-bottom: 0.6rem;
}
.route-card p { color: var(--ink-soft); font-size: 0.96rem; }
.route-go { margin-top: auto; padding-top: 1rem; font-weight: 600; color: var(--accent-on-dark); display: inline-flex; align-items: center; gap: 0.4rem; }
.route-card:hover .route-go .arrow { transform: translateX(3px); }
.route-go .arrow { transition: transform 0.28s var(--ease); }

/* ---------- demo-melding ---------- */

/* ---------- voorraadkaart ---------- */
.stock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.stock-grid--2 { grid-template-columns: repeat(2, 1fr); }

.stock-card {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-card);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.stock-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.stock-photo { position: relative; overflow: hidden; }
.stock-photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.stock-card:hover .stock-photo img { transform: scale(1.035); }
.stock-year {
  position: absolute; top: 0.75rem; left: 0.75rem;
  background: rgba(6, 10, 20, 0.86); color: #ffffff;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.3rem 0.65rem; border-radius: var(--r-chip);
  backdrop-filter: blur(4px);
}
.stock-body { padding: 1.15rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; gap: 0.65rem; }
.stock-title { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.stock-title h3 { font-size: 1.14rem; line-height: 1.2; }
.stock-title h3 span { display: block; font-size: 0.86rem; font-weight: 500; font-family: var(--font-body); color: var(--muted); letter-spacing: 0; margin-top: 3px; }
.stock-price {
  font-family: var(--font-display); font-weight: 700; font-size: 1.24rem;
  color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.8rem; color: var(--ink-soft);
  background: var(--ground); border: 1px solid var(--line-soft);
  border-radius: var(--r-chip); padding: 0.28rem 0.65rem;
  font-variant-numeric: tabular-nums;
}
.chip svg { color: var(--muted); flex: none; }
.stock-cta {
  margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: 0.95rem; color: var(--ink);
}
.stock-cta .arrow { transition: transform 0.28s var(--ease); color: var(--accent); }
.stock-card:hover .stock-cta .arrow { transform: translateX(3px); }

/* ---------- filterbalk (variant 1: eenvoudig) ---------- */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-bottom: 1.8rem;
}
.filter-chip {
  border: 1px solid var(--line); border-radius: var(--r-chip);
  padding: 0.55rem 1.05rem; font-size: 0.93rem; font-weight: 500;
  color: var(--ink-soft); background: transparent;
  transition: background 0.22s, color 0.22s, border-color 0.22s;
}
.filter-chip:hover { border-color: var(--accent); color: var(--ink); }
.filter-chip.is-active { background: var(--accent-fill); border-color: var(--accent); color: #ffffff; }
.filter-count { margin-left: auto; color: var(--muted); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.stock-empty {
  display: none; text-align: center; padding: 3rem 1rem;
  border: 1px dashed var(--line); border-radius: var(--r-card); color: var(--ink-soft);
}
.stock-empty.is-visible { display: block; }
.stock-empty h3 { margin-bottom: 0.5rem; }
.is-hidden { display: none !important; }

/* ---------- split (beeld + tekst) ---------- */
.split {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.split--wide-left { grid-template-columns: 1.15fr 1fr; }
.split-media img { width: 100%; border-radius: var(--r-card); object-fit: cover; aspect-ratio: 4 / 3; }
.split-media--tall img { aspect-ratio: 3 / 4; }
.split--reverse .split-media { order: 2; }

/* ---------- checklist ---------- */
.check-list { display: grid; gap: 0.8rem; margin-top: 1.5rem; }
.check-list li { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--ink-soft); }
.check-list svg { color: var(--accent); flex: none; margin-top: 4px; }
.check-list strong { color: var(--ink); font-weight: 600; }
.section--deep .check-list svg { color: var(--accent-on-dark); }
.section--deep .check-list strong { color: #ffffff; }

/* ---------- stappen ---------- */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 2.5rem; }
.step {
  border-top: 2px solid var(--line); padding-top: 1.1rem;
  transition: border-color 0.3s;
}
.step:hover { border-top-color: var(--accent); }
.step-n {
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 700;
  color: var(--accent); letter-spacing: 0.06em; display: block; margin-bottom: 0.5rem;
}
.step h3 { font-size: 1.06rem; margin-bottom: 0.4rem; }
.step p { color: var(--ink-soft); font-size: 0.95rem; }
.section--deep .step { border-top-color: rgba(255, 255, 255, 0.2); }
.section--deep .step-n { color: var(--accent-on-dark); }

/* ---------- bezwaren ---------- */
.objection-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 2.4rem; }
.objection {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-card);
  padding: 1.5rem 1.5rem 1.6rem;
}
.objection h3 { font-size: 1.08rem; margin-bottom: 0.55rem; }
.objection p { color: var(--ink-soft); font-size: 0.97rem; }
.section--deep .objection { background: var(--deep-2); border-color: rgba(255, 255, 255, 0.14); }
.section--deep .objection p { color: rgba(255, 255, 255, 0.76); }

/* ---------- reviews (demo) ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.2rem; }
.quote {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-card);
  padding: 1.5rem; display: flex; flex-direction: column; gap: 0.9rem;
}
.quote p { color: var(--ink); font-size: 1rem; line-height: 1.55; }
.quote footer { margin-top: auto; color: var(--muted); font-size: 0.88rem; }
.quote footer strong { display: block; color: var(--ink); font-weight: 600; font-size: 0.94rem; }
.quote-stars { display: flex; gap: 2px; color: var(--accent); }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin-top: 2.2rem; }
.faq details {
  border-bottom: 1px solid var(--line); padding: 1.15rem 0;
}
.faq details[open] summary { color: var(--ink); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  cursor: pointer; list-style: none; font-weight: 600; font-size: 1.05rem;
  font-family: var(--font-display); letter-spacing: -0.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: none; color: var(--accent); transition: transform 0.3s var(--ease); }
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq details p { color: var(--ink-soft); margin-top: 0.7rem; max-width: 64ch; }

/* ---------- formulier ---------- */
.form-card {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-card);
  padding: clamp(1.5rem, 3.4vw, 2.4rem); box-shadow: var(--shadow-card);
}
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.05rem; }
.field label { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.field .hint { font-size: 0.84rem; color: var(--muted); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--ground); border: 1px solid var(--line);
  border-radius: var(--r-btn); padding: 0.82rem 0.95rem; width: 100%;
  transition: border-color 0.2s, background 0.2s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8e949e; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); background: var(--card);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.26);
}
.field .error-text { display: none; font-size: 0.86rem; color: #0b52d1; font-weight: 500; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #0b52d1; background: rgba(21, 107, 255, 0.04); }
.field.has-error .error-text { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-trust {
  display: flex; gap: 0.6rem; align-items: flex-start;
  margin-top: 1rem; color: var(--ink-soft); font-size: 0.88rem;
}
.form-trust svg { color: var(--accent); flex: none; margin-top: 2px; }
.form-done {
  display: none; text-align: left;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 1.6rem;
}
.form-done.is-visible { display: block; }
.form-done h3 { margin-bottom: 0.5rem; }
.form-done p { color: var(--ink-soft); }
.form-done .done-mark {
  width: 44px; height: 44px; border-radius: var(--r-chip);
  background: var(--deep); color: #ffffff; display: grid; place-items: center; margin-bottom: 1rem;
}

/* ---------- contactblok ---------- */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-lines { display: grid; gap: 1.2rem; margin-top: 1.8rem; }
.contact-line { display: flex; gap: 0.85rem; align-items: flex-start; }
.contact-line svg { color: var(--accent); flex: none; margin-top: 3px; }
.contact-line span { display: block; font-size: 0.86rem; color: var(--muted); }
.contact-line strong { font-weight: 600; font-size: 1.02rem; }
.section--deep .contact-line svg { color: var(--accent-on-dark); }

/* ---------- detailpagina ---------- */
.detail-head { padding-block: clamp(1.6rem, 3vw, 2.4rem) 0; }
.crumb { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.9rem; }
.crumb:hover { color: var(--ink); }
.detail-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; margin-top: 1.6rem; }
/* Zonder deze regel rekt de miniatuurrail de kolom op: een
   rasteronderdeel is standaard net zo breed als zijn inhoud. */
.detail-grid > * { min-width: 0; }
.detail-photo img { width: 100%; border-radius: var(--r-card); aspect-ratio: 4 / 3; object-fit: cover; }
.detail-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-top: 0.7rem; }
.detail-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-btn); }
.detail-price {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--accent);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.detail-aside { position: sticky; top: 122px; }
.spec-table { margin-top: 1.4rem; }
.spec-table dl { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 1.5rem; }
.spec-table dt { color: var(--muted); font-size: 0.94rem; }
.spec-table dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.option-list { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.2rem; }
.detail-notfound { display: none; padding-block: 5rem; text-align: center; }
.detail-notfound.is-visible { display: block; }

/* Tekst binnen de groene secties: de lichte varianten van de
   grijstinten, anders wordt donker op donker gezet. */
.section--deep .check-list li,
.section--deep .step p,
.section--deep .expect p,
.section--deep .objection p,
.section--deep .quote p,
.section--deep .faq details p,
.section--deep .funnel-count { color: rgba(255, 255, 255, 0.78); }
.section--deep .contact-line span,
.section--deep .quote footer { color: rgba(255, 255, 255, 0.6); }
.section--deep .contact-line strong,
.section--deep h1, .section--deep h2, .section--deep h3,
.section--deep .quote footer strong { color: #ffffff; }
.section--deep .contact-line strong a:hover { color: #ffffff; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-inview {
  opacity: 1; transform: none;
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* ---------- sticky mobiele CTA ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; gap: 0.6rem; padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(10, 15, 28, 0.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform 0.4s var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn { flex: 1; padding: 0.9rem 1rem; font-size: 0.95rem; }
.btn-wa { background: #1c7a4a; color: #fff; }
.btn-wa:hover { background: #24915a; }

/* ---------- footer ---------- */
.site-footer { background: var(--deep); color: rgba(255, 255, 255, 0.72); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; }
.site-footer .brand-name b { color: #ffffff; }
.site-footer .brand-name small { color: var(--muted); }
.site-footer h4 { color: #ffffff; font-size: 0.8rem; letter-spacing: 0.13em; text-transform: uppercase; font-family: var(--font-body); font-weight: 600; margin-bottom: 0.9rem; }
.site-footer a:hover { color: #ffffff; }
.footer-links { display: grid; gap: 0.5rem; font-size: 0.96rem; }
.footer-bottom {
  margin-top: 2.8rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between;
  font-size: 0.86rem; color: rgba(255, 255, 255, 0.55);
}
.footer-intro { max-width: 34ch; margin-top: 1rem; font-size: 0.96rem; }

/* ============================================================
   Responsive. Mobiel is een eigen opbouw, geen verkleinde desktop.
   ============================================================ */
@media (max-width: 1080px) {
  .stock-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .quote-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-aside { position: static; }
}

@media (max-width: 900px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: flex; }
  .site-header > .wrap { height: 66px; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .hero-copy { max-width: none; }
  .hero-badge { position: static; margin-top: 1rem; }
  .routes-grid { grid-template-columns: 1fr; }
  .split, .split--wide-left { grid-template-columns: 1fr; gap: 2rem; }
  .split--reverse .split-media { order: 0; }
  .objection-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .sticky-cta { display: flex; }
  body.has-sticky-cta { padding-bottom: 74px; }
}

@media (max-width: 640px) {
  .stock-grid, .stock-grid--2 { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .filter-count { width: 100%; margin-left: 0; }
  .detail-gallery { grid-template-columns: repeat(2, 1fr); }
  .hero-media img { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   CINEMATISCHE LAAG
   Full-bleed hero met langzame camerabeweging, zoekbalk over het
   beeld, statusbadges op de kaarten en een merkenrij. Dit is de
   laag die de site het gevoel van een echte dealer geeft in
   plaats van een brochure.
   ============================================================ */

/* ---------- topbalk met USP's ---------- */
.topbar {
  background: #05080f; color: rgba(255, 255, 255, 0.74);
  font-size: 0.82rem; position: relative; z-index: 101;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 38px; }
.topbar-usp { display: flex; gap: 1.7rem; }
.topbar-usp span { display: inline-flex; align-items: center; gap: 0.42rem; white-space: nowrap; }
.topbar-usp svg { color: var(--accent-on-dark); flex: none; }
.topbar a { display: inline-flex; align-items: center; gap: 0.42rem; font-weight: 600; color: #ffffff; white-space: nowrap; }
.topbar a:hover { color: var(--accent-on-dark); }
@media (max-width: 980px) { .topbar { display: none; } }

/* ---------- cinematische hero ---------- */
.cine {
  position: relative; min-height: 100dvh; display: flex; flex-direction: column;
  justify-content: flex-end; overflow: hidden; isolation: isolate; background: #05080f;
}
.cine-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.cine-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
  animation: kenburns 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.17) translate3d(-1.5%, -1.8%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cine-media img { animation: none; transform: scale(1.02); }
}

/* meerlaagse scrim: zwaar onderaan voor de tekst, licht bovenaan voor de header */
.cine-scrim {
  position: absolute; inset: 0; z-index: -1;
  /* De hero-foto is zelf al avondlicht. Een lichtere scrim laat de
     gloed van de caravan door en houdt de tekst ruim boven AA. */
  background:
    linear-gradient(to top, rgba(3, 6, 13, 0.84) 0%, rgba(3, 6, 13, 0.6) 28%, rgba(3, 6, 13, 0.1) 62%, rgba(3, 6, 13, 0.34) 100%),
    linear-gradient(to right, rgba(3, 6, 13, 0.52) 0%, rgba(3, 6, 13, 0.1) 56%, rgba(3, 6, 13, 0) 100%);
}

.cine-inner { position: relative; padding-block: clamp(6.5rem, 13vh, 8rem) clamp(2rem, 4vh, 3rem); }
.cine-copy { max-width: 64rem; }

.cine-eyebrow {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74); margin-bottom: 1.1rem;
  opacity: 0; animation: zachtOp 0.8s ease forwards 0.08s;
}
.cine-eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--accent-on-dark); }

/* kinetische kop: regels komen achter een masker vandaan */
.cine h1 {
  color: #fff; font-size: clamp(2.5rem, 6.4vw, 5.6rem); line-height: 0.96;
  letter-spacing: -0.035em; font-weight: 800; max-width: 13ch;
}
.cine h1 .r { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.cine h1 .r > span {
  display: block; transform: translateY(106%);
  animation: regelOp 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(0.16s + var(--i, 0) * 0.11s);
}
@keyframes regelOp { to { transform: translateY(0); } }
.cine h1 em { font-style: normal; color: var(--accent-on-dark); }

.cine-sub {
  color: rgba(255, 255, 255, 0.85); font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  max-width: 40ch; margin-top: 1.35rem;
  opacity: 0; animation: zachtOp 0.9s ease forwards 0.6s;
}
@keyframes zachtOp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cine h1 .r > span { transform: none; animation: none; }
  .cine-eyebrow, .cine-sub, .cine-search, .cine-usp { opacity: 1; animation: none; }
}

/* ---------- zoekbalk over het beeld ---------- */
.cine-search {
  margin-top: clamp(1.8rem, 4vh, 2.8rem); max-width: 1010px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-card);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 24px 60px rgba(4, 8, 16, 0.44);
  padding: 1.15rem 1.2rem 1.2rem;
  opacity: 0; animation: zachtOp 0.9s ease forwards 0.76s;
}
@media (prefers-reduced-transparency: reduce) {
  .cine-search { background: rgba(4, 8, 16, 0.94); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.cine-search-kop {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7); margin-bottom: 0.85rem;
}
.cine-search-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 0.7rem; align-items: end; }
.cine-veld { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.cine-veld label { font-size: 0.78rem; font-weight: 600; color: rgba(255, 255, 255, 0.8); }
.cine-veld select {
  font: inherit; font-size: 0.97rem; font-weight: 500; color: #fff;
  background-color: rgba(4, 8, 16, 0.6); border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-btn); padding: 0.78rem 2.2rem 0.78rem 0.85rem; width: 100%;
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.6rem center;
}
.cine-veld select:focus { outline: none; border-color: var(--accent-on-dark); box-shadow: 0 0 0 3px rgba(76, 140, 255, 0.28); }
.cine-veld select option { background: #060a14; color: #fff; }
.cine-search .btn { background: var(--accent-fill); color: #fff; padding: 0.85rem 1.6rem; height: 47px; }
.cine-search .btn:hover { background: #3d86ff; }
.cine-treffer {
  margin-top: 0.85rem; font-size: 0.88rem; color: rgba(255, 255, 255, 0.72);
  display: flex; align-items: center; gap: 0.45rem;
}
.cine-treffer strong { color: #fff; font-weight: 600; }
.cine-treffer svg { color: var(--accent-on-dark); flex: none; }

/* USP-strip onder in de hero */
.cine-usp {
  display: flex; flex-wrap: wrap; gap: 0.8rem 2.4rem; margin-top: clamp(1.5rem, 3vh, 2.2rem);
  padding-top: 1.35rem; border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.8); font-size: 0.92rem;
  opacity: 0; animation: zachtOp 0.9s ease forwards 0.9s;
}
.cine-usp span { display: inline-flex; align-items: center; gap: 0.5rem; }
.cine-usp svg { color: var(--accent-on-dark); flex: none; }

@media (max-width: 940px) {
  .cine { min-height: 94dvh; }
  .cine-copy { max-width: none; }
  .cine-search-rij { grid-template-columns: 1fr 1fr; }
  .cine-search .btn { grid-column: 1 / -1; width: 100%; }
  .cine-usp { gap: 0.55rem 1.4rem; font-size: 0.86rem; }
}
@media (max-width: 560px) {
  /* drie rijen in plaats van vier, anders valt de zoekknop onder de vouw */
  .cine-search-rij { grid-template-columns: 1fr 1fr; }
  .cine-search-rij .cine-veld:nth-child(3) { grid-column: 1 / -1; }
  /* Op de kleinste telefoons telt elke pixel: het kopje boven de
     zoekbalk vervalt, de labels bij de keuzelijsten zeggen genoeg. */
  .cine-search { padding: 0.85rem; }
  .cine-search-kop { display: none; }
  .cine-search-rij { gap: 0.55rem; }
  .cine-treffer { margin-top: 0.7rem; }
  .cine-inner { padding-block: 5rem 1.4rem; }
  .cine h1 { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .cine-sub { margin-top: 1rem; }
  .cine-usp { margin-top: 1.2rem; padding-top: 1rem; gap: 0.5rem 1.2rem; }
  .cine-usp span:nth-child(n+3) { display: none; }
}

/* Korte telefoonschermen (ongeveer 360 bij 640) en liggende telefoons:
   daar past de volledige heroblok niet. De kop en de zoekbalk hebben
   voorrang; het labeltje en de introzin staan verderop toch nog een
   keer op de pagina. */
/* Liggende telefoon: een schermvullende hero kan een kop plus zoekbalk
   niet dragen op 390 pixels hoogte. De hero krijgt daar zijn natuurlijke
   hoogte, zodat de pagina gewoon scrolt zoals je in liggende stand
   verwacht. */
@media (max-height: 560px) {
  .cine { min-height: auto; }
  .cine-eyebrow, .cine-sub { display: none; }
  .cine-inner { padding-block: 5rem 1.6rem; }
  .cine h1 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); }
}

@media (max-width: 620px) and (max-height: 700px) {
  .cine-eyebrow, .cine-sub { display: none; }
  .cine-inner { padding-block: 4.5rem 1.2rem; }
  .cine h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .cine-usp { margin-top: 1rem; padding-top: 0.9rem; }
}

/* ---------- statusbadges op de voorraadkaart ---------- */
.stock-flags { position: absolute; top: 0.75rem; left: 0.75rem; display: flex; gap: 0.4rem; flex-wrap: wrap; z-index: 2; }
.flag {
  font-size: 0.73rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.32rem 0.7rem; border-radius: var(--r-chip); color: #fff;
}
.flag--jaar { background: rgba(6, 10, 20, 0.88); letter-spacing: 0.02em; }
.flag--nieuw { background: var(--accent-fill); }
.flag--verkocht { background: rgba(20, 29, 46, 0.94); }
.flag--gereserveerd { background: rgba(20, 29, 46, 0.94); }
.stock-card.is-verkocht .stock-photo img { filter: grayscale(0.62) brightness(0.95); }
.stock-card.is-verkocht .stock-price { color: var(--muted); }

/* ---------- merkenrij ---------- */
.merken { border-block: 1px solid var(--line); background: var(--card); overflow: hidden; }
.merken-kop {
  text-align: center; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); padding-top: 2.2rem;
}
.merken-rij { padding-block: 1.5rem 2.2rem; overflow: hidden; }
.merken-spoor { display: flex; width: max-content; animation: schuif 46s linear infinite; }
.merken-rij:hover .merken-spoor { animation-play-state: paused; }
@keyframes schuif { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .merken-spoor { animation: none; } }
.merken-spoor span {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 1.9vw, 1.55rem);
  letter-spacing: -0.01em; color: var(--ink); opacity: 0.4;
  padding-inline: clamp(1.3rem, 2.8vw, 2.4rem); white-space: nowrap; transition: opacity 0.3s;
}
.merken-spoor span:hover { opacity: 1; }

/* ---------- cijferblok ---------- */
.cijfers {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden;
}
.cijfer { background: var(--card); padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.1rem, 2vw, 1.6rem); }
.cijfer strong {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
}
.cijfer span { display: block; color: var(--ink-soft); font-size: 0.93rem; margin-top: 0.5rem; }
.section--deep .cijfers { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.16); }
.section--deep .cijfer { background: var(--deep-2); }
.section--deep .cijfer strong { color: #fff; }
.section--deep .cijfer span { color: rgba(255, 255, 255, 0.76); }
@media (max-width: 860px) { .cijfers { grid-template-columns: 1fr 1fr; } }

/* ---------- editorial split met overlappend detailbeeld ---------- */
.editorial { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2.5vw, 2.5rem); align-items: center; }
.editorial-beeld { grid-column: 1 / span 7; position: relative; }
.editorial-beeld > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-card); }
.editorial-klein {
  position: absolute; right: -13%; bottom: -13%; width: 40%;
  border-radius: var(--r-card); overflow: hidden;
  box-shadow: 0 24px 60px rgba(3, 6, 13, 0.3); border: 6px solid var(--ground);
  line-height: 0;
}
.section--band .editorial-klein { border-color: var(--ground-2); }
.editorial-klein img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.editorial-tekst { grid-column: 9 / span 4; }
@media (max-width: 1040px) {
  .editorial { grid-template-columns: 1fr; }
  .editorial-beeld, .editorial-tekst { grid-column: 1 / -1; }
  .editorial-klein { display: none; }
}

/* ---------- sectiekop ---------- */
.sectie-kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.sectie-kop > div { max-width: 46ch; }

/* ---------- kop die over het herobeeld zweeft ---------- */
.site-top { position: sticky; top: 0; z-index: 100; }

.cine-page .site-top {
  position: fixed; inset-inline: 0; top: 0;
  /* donker glas: leesbaar over elk herobeeld, ook als de klant later
     een lichtere foto plaatst */
  background: rgba(3, 6, 13, 0.85);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
@media (prefers-reduced-transparency: reduce) {
  .cine-page .site-top { background: #05080f; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.cine-page .site-top .topbar {
  background: transparent; color: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.cine-page .site-top .topbar a { color: #fff; }
.cine-page .site-top .site-header {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent; box-shadow: none;
}
.cine-page .site-top .brand-name b,
.cine-page .site-top .nav-desktop a:not(.btn),
.cine-page .site-top .nav-phone { color: #fff; }
.cine-page .site-top .brand-name small { color: rgba(255, 255, 255, 0.62); }
.cine-page .site-top .brand-mark { color: #fff; }
.cine-page .site-top .nav-toggle { border-color: rgba(255, 255, 255, 0.36); }
.cine-page .site-top .nav-toggle span { background: #fff; }

/* zodra er gescrold is wordt de balk massief */
.cine-page .site-top.is-scrolled {
  background: var(--deep);
  box-shadow: 0 10px 34px rgba(3, 6, 13, 0.24);
}
.cine-page .site-top.is-scrolled .topbar {
  background: #05080f; border-bottom-color: transparent;
}

/* variant 1 heeft een lichte kop, die keert terug zodra je scrolt */
.cine-page.licht .site-top.is-scrolled {
  background: rgba(10, 15, 28, 0.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.26);
}
.cine-page.licht .site-top.is-scrolled .topbar { background: #05080f; }
.cine-page.licht .site-top.is-scrolled .brand-name b { color: #ffffff; }
.cine-page.licht .site-top.is-scrolled .brand-name small { color: var(--muted); }
.cine-page.licht .site-top.is-scrolled .brand-mark { color: #ffffff; }
.cine-page.licht .site-top.is-scrolled .nav-desktop a:not(.btn) { color: var(--ink-soft); }
.cine-page.licht .site-top.is-scrolled .nav-desktop a:not(.btn):hover,
.cine-page.licht .site-top.is-scrolled .nav-desktop a[aria-current="page"] { color: var(--ink); }
.cine-page.licht .site-top.is-scrolled .nav-phone { color: var(--ink); }
.cine-page.licht .site-top.is-scrolled .nav-toggle { border-color: var(--line); }
.cine-page.licht .site-top.is-scrolled .nav-toggle span { background: var(--deep); }

/* het mobiele menu opent onder de zwevende balk */
.cine-page .nav-mobile { padding-top: 104px; }

/* ---------- snelkeuze onder de hero van variant 1 ---------- */
.snelkeuze {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  margin-top: clamp(1.6rem, 3vh, 2.2rem);
  opacity: 0; animation: zachtOp 0.9s ease forwards 0.76s;
}
.snelkeuze-label {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66); margin-right: 0.4rem;
}
.snelkeuze a {
  border: 1px solid rgba(255, 255, 255, 0.34); border-radius: var(--r-chip);
  padding: 0.55rem 1.05rem; font-size: 0.93rem; font-weight: 500; color: #fff;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease);
}
.snelkeuze a:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .snelkeuze { opacity: 1; animation: none; } }
@media (max-width: 560px) { .snelkeuze-label { width: 100%; margin-bottom: 0.2rem; } }

/* ---------- verkochte caravan op de detailpagina ---------- */
.verkocht-blok {
  background: var(--ground-2); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 1.4rem 1.5rem; margin-bottom: 1.4rem;
}
.verkocht-blok h3 { font-size: 1.08rem; margin-bottom: 0.4rem; }
.verkocht-blok p { color: var(--ink-soft); font-size: 0.96rem; }

/* ============================================================
   BELEVINGSLAAG
   Twee dingen tillen de site boven een net kaartenraster uit:
   1. "De rij": een vastgezette sectie waar je met scrollen
      horizontaal langs de caravans loopt, zoals op het terrein.
   2. Beeld en type die uit het stramien breken, met diepte die
      met de scroll meebeweegt.
   Alle beweging draait op scroll-gedreven animaties, dus zonder
   scroll-listener, en valt stil onder prefers-reduced-motion.
   ============================================================ */

/* ---------- de hero krijgt diepte ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cine { view-timeline-name: --hero; view-timeline-axis: block; }
    /* het beeld zakt trager weg dan de tekst: parallax zonder listener */
    .cine-media img {
      animation: kenburns 28s ease-in-out infinite alternate,
                 heroZak linear both;
      animation-timeline: auto, --hero;
      animation-range: normal, exit 0% exit 100%;
    }
    .cine-inner {
      animation: heroLos linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 90%;
    }
  }
}
@keyframes heroZak { to { transform: translate3d(0, 14%, 0) scale(1.12); } }
@keyframes heroLos { to { transform: translate3d(0, -14%, 0); opacity: 0.25; } }

/* de kop mag buiten de kolom vallen, dat maakt hem editorial */
.cine h1 { margin-left: -0.055em; }

/* ---------- de rij: horizontaal langs de caravans ---------- */
.rij { position: relative; background: var(--deep); color: #ffffff; }
.rij-plak { position: relative; overflow: hidden; }
.rij-spoor {
  display: flex; gap: clamp(0.8rem, 1.6vw, 1.4rem);
  padding-inline: var(--gutter);
  align-items: stretch;
  /* zonder max-content is het spoor zo breed als de viewport en
     verschuift de pan bijna niets */
  width: max-content;
}

/* Standaard, en op telefoon altijd: een veegbare strook. Dat is op
   touch prettiger dan een vastgezette sectie. */
.rij-plak {
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-block: clamp(2rem, 4vw, 3rem);
}
.rij-plak::-webkit-scrollbar { display: none; }
.rij-paneel { scroll-snap-align: center; }

.rij-paneel {
  position: relative; flex: none;
  width: clamp(268px, 76vw, 420px); aspect-ratio: 3 / 4;
  border-radius: var(--r-card); overflow: hidden;
  color: #fff; isolation: isolate;
  transition: transform 0.5s var(--ease);
}
.rij-paneel img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  transition: transform 0.9s var(--ease);
}
.rij-paneel:hover img { transform: scale(1.05); }
.rij-paneel::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(4, 8, 16, 0.92) 0%, rgba(4, 8, 16, 0.58) 32%,
    rgba(4, 8, 16, 0.08) 62%, rgba(4, 8, 16, 0.3) 100%);
}
.rij-info {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(1.1rem, 2.2vw, 1.7rem);
  display: flex; flex-direction: column; gap: 0.55rem;
}
.rij-merk {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent-on-dark);
}
.rij-model {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.02;
  letter-spacing: -0.03em; color: #fff;
}
.rij-meta {
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.85rem;
  font-size: 0.86rem; color: rgba(255, 255, 255, 0.82);
  font-variant-numeric: tabular-nums;
}
.rij-onder {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-top: 0.45rem; padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}
.rij-prijs {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem); color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.rij-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.9rem; font-weight: 600; color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
}
.rij-paneel:hover .rij-cta { color: #fff; }
.rij-vlag {
  position: absolute; top: 0.9rem; left: 0.9rem; z-index: 1;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.3rem 0.65rem;
  border-radius: var(--r-chip); background: var(--accent-fill); color: #fff;
}
.rij-paneel.is-verkocht img { filter: grayscale(0.7) brightness(0.86); }
.rij-paneel.is-verkocht .rij-vlag { background: rgba(20, 29, 46, 0.94); }

/* kop en voortgang over de strook heen */
.rij-kop {
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) 0;
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1rem 2rem;
}
.rij-kop h2 { color: #fff; max-width: 18ch; }
.rij-kop p { color: rgba(255, 255, 255, 0.74); max-width: 40ch; margin-top: 0.7rem; }
.rij-balk {
  margin: clamp(1.2rem, 2.5vw, 1.8rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  height: 2px; background: rgba(255, 255, 255, 0.2); border-radius: 2px;
  position: relative; overflow: hidden;
}
.rij-balk span {
  position: absolute; inset: 0 auto 0 0; width: 22%;
  background: var(--accent-on-dark); border-radius: 2px;
}

/* ---------- vanaf tablet: vastgezet en scrollgestuurd ---------- */
/* De vastgezette variant hoort bij de pan. Zonder beweging zou je in
   een sectie met verborgen overloop opgesloten zitten, dus dan blijft
   de veegbare strook staan. */
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rij {
      /* de scrollafstand bepaalt hoe lang de wandeling duurt */
      height: 330vh;
      view-timeline-name: --rij; view-timeline-axis: block;
    }
    .rij-plak {
      position: sticky; top: 0; height: 100dvh;
      overflow: hidden; scroll-snap-type: none;
      display: flex; flex-direction: column; justify-content: center;
      padding-block: 0;
    }
    .rij-spoor { align-items: center; }
    .rij-paneel {
      width: clamp(340px, 34vw, 520px); aspect-ratio: 4 / 5;
      scroll-snap-align: none;
    }
    .rij-kop {
      position: absolute; inset: 0 0 auto 0; z-index: 2;
      padding-top: clamp(6rem, 12vh, 8rem); pointer-events: none;
    }
    .rij-kop a { pointer-events: auto; }
    .rij-balk {
      position: absolute; inset: auto var(--gutter) clamp(2.4rem, 5vh, 3.4rem) var(--gutter);
      margin: 0; z-index: 2;
    }

    .rij-spoor {
      animation: rijPan linear both;
      animation-timeline: --rij;
      animation-range: contain 0% contain 86%;
      will-change: transform;
    }
    .rij-balk span {
      animation: rijBalk linear both;
      animation-timeline: --rij;
      animation-range: contain 0% contain 86%;
    }
  }
}
@keyframes rijPan { to { transform: translate3d(var(--pan-eind, 0px), 0, 0); } }
@keyframes rijBalk { from { width: 8%; } to { width: 100%; } }

/* De rij en de volle-breedte uitsnede zijn donker, net als .section--deep.
   Het accent en de onderstreepte link moeten daar de lichte variant zijn,
   anders staat donker op donker. */
.rij .eyebrow, .uitsnede .eyebrow { color: var(--accent-on-dark); }
.rij .link-under, .uitsnede .link-under {
  color: var(--accent-on-dark); border-color: rgba(76, 140, 255, 0.45);
}
.rij .link-under:hover, .uitsnede .link-under:hover { border-color: var(--accent-on-dark); }

/* ---------- volle breedte doorbreken ---------- */
.vol { width: 100%; max-width: none; padding-inline: 0; }
.uitsnede {
  position: relative; min-height: clamp(360px, 62vh, 620px);
  display: flex; align-items: flex-end; overflow: hidden;
}
.uitsnede img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.uitsnede::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(4, 8, 16, 0.88), rgba(4, 8, 16, 0.15) 62%);
}
.uitsnede-tekst { padding: clamp(2rem, 5vw, 4rem) var(--gutter); color: #fff; max-width: 46ch; }
.uitsnede-tekst h2 { color: #fff; }
.uitsnede-tekst p { color: rgba(255, 255, 255, 0.84); margin-top: 0.8rem; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .uitsnede { view-timeline-name: --snee; view-timeline-axis: block; }
    .uitsnede img {
      animation: sneeSchuif linear both;
      animation-timeline: --snee;
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes sneeSchuif { from { transform: translate3d(0, -8%, 0) scale(1.16); } to { transform: translate3d(0, 8%, 0) scale(1.16); } }

/* ---------- overgang tussen pagina's ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ==========================================================
   Galerij op de detailpagina
   Alle foto's uit de advertentie, met een miniatuurrail en een
   lichtbak. De lichtbak is een <dialog>, dus Escape en de
   focusval doet de browser zelf.
   ========================================================== */
.galerij { position: relative; }

.galerij-hoofd {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--deep);
  aspect-ratio: 3 / 2;
}
/* De foto's uit de advertenties zijn niet allemaal even breed: liggend,
   staand en soms bijgesneden. Ze passen daarom in het kader in plaats
   van dat ze bijgesneden worden, met een vervaagde kopie erachter zodat
   er geen kale balken overblijven. */
.galerij-hoofd > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.galerij-waas {
  object-fit: cover;
  filter: blur(26px) saturate(1.15) brightness(0.75);
  scale: 1.16;
}
.galerij-beeld { object-fit: contain; }
.galerij-open {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; background: none; padding: 0;
  cursor: zoom-in;
}
.galerij-open:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.galerij-knop {
  position: absolute; top: 50%;
  translate: 0 -50%;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.18s var(--ease), scale 0.18s var(--ease);
}
.galerij-knop:hover { background: #fff; scale: 1.06; }
.galerij-knop:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.galerij-knop[hidden] { display: none; }
.galerij-vorige { left: 0.85rem; }
.galerij-volgende { right: 0.85rem; }

.galerij-teller {
  position: absolute; right: 0.9rem; bottom: 0.9rem;
  padding: 0.3rem 0.66rem;
  border-radius: 999px;
  background: rgba(4, 8, 16, 0.78);
  color: #fff;
  font-size: 0.82rem; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.galerij-rail {
  display: flex; gap: 0.5rem;
  margin-top: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.galerij-rail > button {
  flex: 0 0 auto;
  width: 94px; aspect-ratio: 4 / 3;
  padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--r-btn);
  background: var(--ground-2);
  opacity: 0.58;
  scroll-snap-align: start;
  transition: opacity 0.16s var(--ease), border-color 0.16s var(--ease);
}
.galerij-rail > button > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerij-rail > button:hover { opacity: 0.85; }
.galerij-rail > button[aria-current="true"] { opacity: 1; border-color: var(--accent); }
.galerij-rail > button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- lichtbak ---------- */
.lichtbak {
  width: 100vw; max-width: 100vw;
  height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0; background: transparent;
  overflow: hidden;
}
.lichtbak::backdrop { background: rgba(3, 6, 13, 0.94); }
.lichtbak-vel {
  display: grid; grid-template-rows: auto 1fr auto;
  height: 100%;
  background: rgba(3, 6, 13, 0.96);
}
.lichtbak-balk {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.9rem clamp(1rem, 4vw, 2rem);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
}
.lichtbak-titel { font-weight: 600; color: #fff; }
.lichtbak-sluit {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: none; color: #fff;
  padding: 0.45rem 0.85rem; border-radius: 999px;
  font: inherit; font-size: 0.88rem; cursor: pointer;
  transition: background 0.16s var(--ease);
}
.lichtbak-sluit:hover { background: rgba(255, 255, 255, 0.14); }
.lichtbak-beeld {
  position: relative;
  display: grid; place-items: center;
  min-height: 0; padding: 0 clamp(0.5rem, 4vw, 2rem);
}
.lichtbak-beeld > img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 6px;
}
.lichtbak-beeld .galerij-knop { background: rgba(255, 255, 255, 0.16); color: #fff; }
.lichtbak-beeld .galerij-knop:hover { background: rgba(255, 255, 255, 0.3); }
.lichtbak-rail { padding: 0.7rem clamp(1rem, 4vw, 2rem) 1.1rem; }
.lichtbak-rail .galerij-rail { margin-top: 0; }
.lichtbak-rail .galerij-rail > button { background: rgba(255, 255, 255, 0.1); }

@media (max-width: 640px) {
  .galerij-rail > button { width: 74px; }
  .galerij-knop { width: 40px; height: 40px; }
  .lichtbak-rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .galerij-knop, .galerij-rail > button, .lichtbak-sluit { transition: none; }
  .galerij-knop:hover { scale: 1; }
}

/* ---------- statuslabel bij gereserveerde caravans ---------- */
.status-vlag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.72rem; border-radius: 999px;
  font-size: 0.83rem; font-weight: 600; letter-spacing: 0.01em;
  background: rgba(21, 107, 255, 0.12);
  color: var(--accent);
  border: 1px solid rgba(21, 107, 255, 0.26);
}
.status-vlag::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: currentColor;
}

/* ---------- uitrusting en specificaties op de detailpagina ---------- */
.kenmerk-lijst {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.55rem 1.6rem; margin-top: 1.1rem;
}
.kenmerk-lijst li {
  display: flex; align-items: flex-start; gap: 0.55rem;
  font-size: 0.97rem; line-height: 1.45;
}
.kenmerk-lijst svg { flex: 0 0 auto; margin-top: 0.22rem; color: var(--accent); }

.spec-blok { margin-top: 1.2rem; }
.spec-blok dl {
  display: grid; grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 0; margin: 0;
}
.spec-blok dt, .spec-blok dd {
  padding: 0.62rem 0; border-top: 1px solid var(--line-soft); margin: 0;
}
.spec-blok dt { color: var(--muted); font-size: 0.94rem; }
.spec-blok dd { font-weight: 600; text-align: right; }
.spec-blok dl > dt:first-of-type, .spec-blok dl > dt:first-of-type + dd { border-top: 0; }

.adv-tekst { margin-top: 1rem; }
.adv-tekst p { margin-top: 0.6rem; }
.adv-tekst p:first-child { margin-top: 0; }

.bron-noot {
  margin-top: 1rem; font-size: 0.89rem; color: var(--muted);
  padding-left: 0.9rem; border-left: 2px solid var(--line);
}

.detail-sectie {
  margin-top: 2.4rem; padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}

.stock-fotos {
  margin-left: auto; margin-right: 0.5rem;
  font-size: 0.82rem; font-weight: 500; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* De payoff uit de merkkaart. Staat boven de footertekst, in het accent. */
.footer-payoff {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.95rem; line-height: 1.35; color: var(--accent-on-dark);
  margin-top: 1rem;
}
.footer-payoff + .footer-intro { margin-top: 0.5rem; }

/* ---------- lichte tegenhanger ----------
   De merkkaart zelf zet het donkere merk naast een witte helft. Die
   verhouding komt hier terug: één wit paneel als leesblok, de rest
   van de site blijft donker. */
.section--panel { background: var(--panel); color: var(--ink-on-panel); }
.section--panel .eyebrow { color: var(--accent-on-panel); }
.section--panel .h-1, .section--panel .h-2, .section--panel strong { color: var(--ink-on-panel); }
.section--panel .body-copy, .section--panel .lead { color: var(--muted-on-panel); }

.belofte { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.belofte-tekst {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.3rem, 2.3vw, 1.85rem); line-height: 1.32;
  letter-spacing: -0.015em; margin-top: 1rem; color: var(--ink-on-panel);
}
.belofte-payoff {
  margin-top: 1.4rem; font-family: var(--font-display); font-weight: 700;
  font-size: 1rem; color: var(--accent-on-panel); letter-spacing: 0.01em;
}
.diensten { list-style: none; display: grid; gap: 0; }
.diensten li {
  display: grid; gap: 0.3rem; padding: 1.05rem 0;
  border-top: 1px solid var(--line-on-panel);
}
.diensten li:first-child { border-top: 0; padding-top: 0; }
.diensten strong {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.diensten span { color: var(--muted-on-panel); font-size: 0.96rem; line-height: 1.5; }

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