/* ==========================================================================
   Novakse Reizen — design tokens
   ========================================================================== */
:root {
  --ink: #14181a;
  --ink-2: #1d2224;
  --paper: #ffffff;
  --paper-soft: #f2f3f0;
  --ink-soft: #5f635e;
  --warm: #dd9752;        /* accent on dark backgrounds */
  --warm-deep: #7a4620;   /* accent on light backgrounds (WCAG AA on white) */
  --status-green: #1b4332; /* status/success accent */
  --focus-ring: var(--warm-deep); /* light surfaces by default; see dark override */
  --border: #e2e3df;
  --border-dark: rgba(255, 255, 255, 0.18);

  --display: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --wrap: 80rem;
  --pad: 1.5rem;
}

@media (min-width: 48rem) {
  :root { --pad: 3rem; }
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Honeypot: onzichtbaar voor bezoekers en screenreaders, wel invulbaar voor bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* --warm haalt maar 2.4:1 op wit en zakt daarmee onder de 3:1 van WCAG
   2.4.11. Op lichte vlakken gebruikt de ring daarom --warm-deep; op de
   donkere vlakken (witte tekst) is die juist te donker en blijft --warm. */
.opener, .layered, .page-hero, .why, .request, .factbar, .site-footer,
.choice__panel, .trip-card__media, .trip-row__media,
.site-header:not(.site-header--on-light) {
  --focus-ring: var(--warm);
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 200;
  background: var(--paper);
  color: var(--ink);
  padding: 0.7rem 1.1rem;
  font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.75rem; }

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

/* ==========================================================================
   Scroll reveal — only opacity + transform
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Staggered reveal: kinderen komen na elkaar omhoog, gebruikt door .stepbar */
.js .stagger > * {
  opacity: 0;
  transform: translateY(120px);
  transition: opacity 1.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js .stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.js .stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.js .stagger.is-visible > *:nth-child(2) { transition-delay: 0.4s; }
.js .stagger.is-visible > *:nth-child(3) { transition-delay: 0.8s; }
.js .stagger.is-visible > *:nth-child(4) { transition-delay: 1.2s; }
.js .stagger.is-visible > *:nth-child(5) { transition-delay: 1.6s; }
.js .stagger.is-visible > *:nth-child(6) { transition-delay: 2s; }

/* Tijdlijn "Jouw schaatsreis": kop + facts komen heel snel na elkaar, dan een
   adempauze, dan de introtekst, dan weer een pauze voor de stappen. */
.js .facts.stagger.is-visible > *:nth-child(1) { transition-delay: 0.1s; }
.js .facts.stagger.is-visible > *:nth-child(2) { transition-delay: 0.2s; }
.js .facts.stagger.is-visible > *:nth-child(3) { transition-delay: 0.3s; }
.js .stepbar.stagger > * { transition-duration: 0.9s; }
.js .stepbar.stagger.is-visible > *:nth-child(1) { transition-delay: 0.5s; }
.js .stepbar.stagger.is-visible > *:nth-child(2) { transition-delay: 0.7s; }
.js .stepbar.stagger.is-visible > *:nth-child(3) { transition-delay: 0.9s; }
.js .stepbar.stagger.is-visible > *:nth-child(4) { transition-delay: 1.1s; }
.js .stepbar.stagger.is-visible > *:nth-child(5) { transition-delay: 1.3s; }

/* ==========================================================================
   Tekst die meekleurt met het scrollen
   De opacity wordt per woord door JavaScript gezet. Zonder JavaScript blijft
   alles gewoon volledig zichtbaar.
   ========================================================================== */
.rw {
  display: inline-block;
  will-change: opacity;
}

/* ==========================================================================
   Muisvolger
   `difference` keert de kleur om ten opzichte van de ondergrond, zodat de
   ring op zowel wit als donkergroen zichtbaar blijft.
   ========================================================================== */
.cursor-ring,
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  mix-blend-mode: difference;
  transition: opacity 0.25s ease, width 0.2s ease, height 0.2s ease, margin 0.2s ease;
}
.cursor-ring.is-visible,
.cursor-dot.is-visible { opacity: 1; }

.cursor-ring {
  width: 2.2rem;
  height: 2.2rem;
  margin: -1.1rem 0 0 -1.1rem;
  border: 1.5px solid #fff;
}
.cursor-ring.is-active {
  width: 3.2rem;
  height: 3.2rem;
  margin: -1.6rem 0 0 -1.6rem;
}

.cursor-dot {
  width: 0.45rem;
  height: 0.45rem;
  margin: -0.225rem 0 0 -0.225rem;
  background: #fff;
}

@media (hover: none), (pointer: coarse) {
  .cursor-ring, .cursor-dot { display: none; }
}

/* ==========================================================================
   Shared type
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.eyebrow .dot {
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
}
.eyebrow--warm { color: var(--warm); }
.eyebrow--deep { color: var(--warm-deep); }

.h-section {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.8vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin-top: 1rem;
}

.lede-text {
  color: var(--ink-soft);
  max-width: 52ch;
  margin-top: 1rem;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.94rem;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { transform: translateY(-2px); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { transform: translateY(-2px); background: var(--ink-2); }
.btn--warm { background: var(--warm); color: var(--ink); }
.btn--warm:hover { transform: translateY(-2px); }
.btn--outline-light { border: 1.5px solid rgba(255, 255, 255, 0.6); color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--ink); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.88rem;
}
.link-arrow::after { content: "↗"; transition: transform 0.2s ease; }
.link-arrow:hover::after, .link-arrow:focus-visible::after { transform: translate(2px, -2px); }

/* Tekstlink midden in een alinea. Omdat links standaard hun kleur erven,
   heeft een inline link altijd een eigen kleur én een onderstreping nodig:
   kleur alleen is te weinig onderscheid. */
.link-inline {
  color: var(--warm-deep);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.link-inline:hover, .link-inline:focus-visible { text-decoration-thickness: 2px; }

/* ==========================================================================
   Header
   ========================================================================== */
/* Blijft altijd doorzichtig, ook boven het uitgeklapte menu. Tekst en logo
   wisselen van wit naar donker zodra de balk over een lichte sectie komt
   (zie main.js: site-header--on-light). */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  color: #fff;
  padding-block: 1rem;
  background-color: transparent;
  transition: color 0.3s ease;
}
/* Soft scrim zodat witte tekst leesbaar blijft boven de openingsfoto */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 24, 26, 0.45), rgba(20, 24, 26, 0));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.site-header.site-header--over-hero::before { opacity: 1; }
/* Vanaf een paar pixels scrollen krijgt de balk een glazen, vervaagde
   achtergrond zodat de inhoud eronder subtiel doorschemert. Dit zit op een
   los pseudo-element (niet op .site-header zelf), anders zou de
   backdrop-filter van de header een containing block vormen waardoor het
   fixed-positioned uitschuifmenu (.main-nav) niet meer de volle
   schermhoogte zou pakken. */
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background-color: rgba(15, 18, 20, 0.16);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  transition: opacity 0.35s ease, background-color 0.35s ease;
}
.site-header.site-header--scrolled::after { opacity: 1; }
.site-header.site-header--scrolled.site-header--on-light::after {
  background-color: rgba(255, 255, 255, 0.45);
}
/* Subtiele lijn onder de balk zodra die een vaste achtergrond heeft gekregen */
.site-header.site-header--scrolled {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14);
}
.site-header.site-header--scrolled.site-header--on-light {
  box-shadow: 0 1px 0 rgba(20, 24, 26, 0.08);
}
/* Zodra de balk over een lichte sectie komt, kleurt de inhoud donker mee. */
.site-header.site-header--on-light { color: var(--ink); }
.site-header.site-header--on-light .nav-toggle span { background: var(--ink); }

.site-header__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Anchor targets clear the fixed header */
[id] { scroll-margin-top: 5rem; }
/* Logo-lockup: het vrijstaande beeldmerk naast de naam. De naam staat laag
   tegen het beeldmerk aan, op dezelfde plek als in het originele logo. */
.site-header__logo { display: inline-flex; align-items: flex-end; gap: 0.6rem; }
.site-header__logo .logo-word-img { margin-bottom: 0.12rem; }
/* De naam houdt altijd zijn eigen donkerblauw, ook boven een foto. */
.site-header .logo-word-img--light { display: none; }
.site-header .logo-word-img--dark { display: block; }

.logo-mark { height: 2.2rem; width: auto; }

/* Het woordmerk is het originele logobeeld, niet nagemaakt met een lettertype.
   Er zijn twee versies: donkere letters voor lichte vlakken, witte letters
   voor donkere vlakken. De basis (donker thema) toont altijd de witte versie. */
.logo-word-img { width: auto; height: 1.5rem; display: block; }
.logo-word-img--lg { height: 1.9rem; }
.logo-word-img--dark { display: none; }

/* Twee lijnen van ongelijke lengte, geïnspireerd op de geveegde ijsbaanlijn */
.nav-toggle { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px; padding: 0.5rem; }
.nav-toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; }
.nav-toggle span:nth-child(1) { width: 23px; }
.nav-toggle span:nth-child(2) { width: 15px; }

.main-nav {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2rem);
  /* Geen transition op opacity: de glazen achtergrond (::before) zit als
     kind-element binnen .main-nav, dus elke fade-duur hier op de buitenste
     laag vermenigvuldigt mee door de compositing en vertraagt de blur —
     die moet er in één keer staan, alleen de positie (transform) schuift. */
  /* visibility houdt het gesloten menu uit de tabvolgorde en uit de
     accessibility tree; opacity + pointer-events alleen verbergen het
     visueel. Opacity springt hierboven bewust zonder transition naar 0, dus
     het menu is bij sluiten meteen weg en visibility mag direct mee. */
  visibility: hidden;
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 5rem 1.75rem 2rem;
  z-index: 150;
  color: #fff;
}
/* De glazen achtergrond zit op een los pseudo-element (niet op .main-nav
   zelf), om dezelfde reden als bij .site-header::after hierboven: WebKit
   laat backdrop-filter soms bevriezen (geen blur meer tonen) zodra hij op
   hetzelfde element staat als een lopende transform-transitie.
   Zelfde glaslook als de balk (.site-header::after): blur + saturate, met
   dezelfde donker/licht-kleurwissel. Geen transition op opacity: de blur
   moet er meteen staan zodra het menu opent (samen met de eerste frame
   van .main-nav's eigen transform/opacity-animatie), niet er nog overheen
   invagen. */
.main-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background-color: rgba(15, 18, 20, 0.16);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  transition: background-color 0.35s ease;
}
.main-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; }
.main-nav.is-open::before { opacity: 1; }
.site-header.site-header--on-light .main-nav::before { background-color: rgba(255, 255, 255, 0.45); }
/* Op witte pagina's (geen donkere hero) is de balk meteen "on-light" en
   krijgt het uitgeklapte menu deze lichte glazen achtergrond. Zonder deze
   regel blijft de menutekst hardcoded wit (zie .main-nav hierboven), wat
   nauwelijks leesbaar is op het lichte glas. */
.site-header.site-header--on-light .main-nav { color: var(--ink-soft); }
.site-header.site-header--on-light .main-nav__links a::before { color: rgba(95, 99, 94, 0.5); }
.main-nav__close { position: absolute; top: 0.6rem; right: 0.85rem; padding: 0.5rem; font-size: 1.6rem; line-height: 1; color: inherit; }
.main-nav__links {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 8vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.main-nav__links a { position: relative; display: inline-flex; align-items: baseline; gap: 0.5rem; }
.main-nav__links a::before {
  content: "+";
  font-weight: 400;
  font-size: 0.7em;
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}
.main-nav__links a::after {
  content: "";
  position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1.5px;
  background: var(--warm);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.main-nav__links a:hover::after,
.main-nav__links a:focus-visible::after { transform: scaleX(1); }

/* Breekpunt bewust hoger dan de gangbare 64rem: bij 64rem (bv. een liggende
   tablet) is er te weinig ruimte voor het logo, alle menu-items, de
   "Reis aanvragen"-knop en de taalkiezer naast elkaar, waardoor ze over
   elkaar heen vallen. Tot 72rem blijft daarom het compacte uitklapmenu staan. */
@media (min-width: 72rem) {
  .nav-toggle, .main-nav__close { display: none; }
  .main-nav {
    position: static;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: none;
    flex-direction: row;
    align-items: center;
    padding: 0;
    box-shadow: none;
    color: inherit;
    gap: 2rem;
  }
  .main-nav::before { content: none; }
  .main-nav__links {
    flex-direction: row;
    gap: 2rem;
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.005em;
  }
  .main-nav__links a::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--warm);
    opacity: 0.85;
  }
  .site-header.site-header--on-light .main-nav__links a::after { background: var(--warm-deep); }
}

.header-cta {
  background: var(--warm);
  color: var(--ink);
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  transition: transform 0.18s ease;
  white-space: nowrap;
}
.header-cta:hover { transform: translateY(-2px); }

/* Taalkiezer: toont alleen de actieve taal; de overige talen verschijnen
   pas in een uitklapmenu zodra je op de knop klikt. */
.lang-switch {
  position: relative;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.lang-switch__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  opacity: 0.85;
  padding: 0.3rem 0;
}
.lang-switch__toggle:hover,
.lang-switch__toggle:focus-visible,
.lang-switch.is-open .lang-switch__toggle { opacity: 1; }

.lang-switch__chevron { flex-shrink: 0; transition: transform 0.18s ease; }
.lang-switch.is-open .lang-switch__chevron { transform: rotate(180deg); }

.lang-switch__menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 4rem;
  padding: 0.7rem 0.9rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.lang-switch.is-open .lang-switch__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-switch__menu a { opacity: 0.7; }
.lang-switch__menu a:hover,
.lang-switch__menu a:focus-visible { opacity: 1; }

@media (min-width: 72rem) {
  .lang-switch { padding-left: 0.9rem; border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
}

/* ==========================================================================
   1. Opener — full-bleed photo
   ========================================================================== */
.opener {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: #fff;
  overflow: hidden;
}
/* Diavoorstelling: alle foto's liggen op elkaar; alleen de actieve is zichtbaar.
   Er beweegt niets — er wordt alleen overgevloeid, zodat scrollen soepel blijft. */
.opener__slides { position: absolute; inset: 0; }
.opener__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.opener__bg.is-active { opacity: 1; }
.opener__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; background: #14181a; transition: opacity 0.26s ease; }
.opener__video--loop-fade { opacity: 0; }
.opener::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20,24,26,.15) 0%, rgba(20,24,26,.1) 45%, rgba(20,24,26,.62) 100%);
}
.opener__inner {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 4rem var(--pad) 7rem;
}
/* Alleen het beeldmerk boven de kop. De naam staat al in de balk bovenaan,
   dus hier hoeft hij niet nog een keer te staan. */
.opener__mark {
  height: clamp(5.5rem, 14vw, 10rem);
  width: auto;
  margin-bottom: 1.4rem;
  filter: drop-shadow(0 6px 18px rgba(10, 16, 20, 0.35));
}
.opener__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.opener__lede {
  margin: 1.4rem auto 0;
  font-size: 1.1rem;
  max-width: 36ch;
  color: rgba(255,255,255,.9);
}
.opener__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }

/* --------------------------------------------------------------------------
   Bediening van de diavoorstelling
   De streepjes zijn dezelfde geveegde lijn als elders op de site; het streepje
   van de foto die in beeld is, loopt vol zolang die foto blijft staan.
   -------------------------------------------------------------------------- */
.opener__controls {
  position: absolute;
  left: 0; right: 0; bottom: 1.5rem;
  z-index: 3;
}
html:not(.js) .opener__controls { display: none; }
.opener__controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.opener__dots { display: flex; align-items: center; gap: 0.6rem; }
.opener__dot {
  width: 2.25rem;
  padding: 0.7rem 0;
  cursor: pointer;
}
.opener__dot > span {
  display: block;
  position: relative;
  height: 2px;
  background: rgba(255, 255, 255, 0.45);
  overflow: hidden;
}
.opener__dot > span::after {
  content: "";
  position: absolute; inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}
.opener__dot.is-active > span::after { transform: scaleX(1); }
.opener__dot:hover > span { background: rgba(255, 255, 255, 0.75); }
.opener__dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Loopt alleen mee met de tijd zolang de voorstelling echt speelt. */
.opener__dots.is-playing .opener__dot.is-active > span::after {
  animation: opener-progress var(--opener-ms, 5000ms) linear forwards;
}
.opener__dots.is-paused .opener__dot.is-active > span::after {
  animation-play-state: paused;
}
@keyframes opener-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.opener__nav { display: flex; align-items: center; gap: 0.5rem; }
.opener__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  color: #fff;
  background: rgba(20, 24, 26, 0.28);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.opener__btn:hover { background: rgba(20, 24, 26, 0.55); border-color: #fff; }
.opener__btn:active { transform: scale(0.93); }
.opener__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.opener__btn svg {
  width: 1.05rem; height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.opener__btn .icon-play { display: none; fill: currentColor; stroke: none; }
.opener__btn.is-paused .icon-pause { display: none; }
.opener__btn.is-paused .icon-play { display: block; }

/* ==========================================================================
   2. Gelaagd — photo + facts + stepbar
   ========================================================================== */
.layered {
  position: relative;
  color: #fff;
  overflow: hidden;
  min-height: 78svh;
}
.layered__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.layered::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,24,26,.55) 0%, rgba(20,24,26,.15) 35%, rgba(20,24,26,.88) 100%);
}
.layered__inner { position: relative; z-index: 2; padding-block: 3.5rem 0; }
.layered__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.02;
}
.facts { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.facts li {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.4rem;
  color: rgba(255,255,255,.6);
}
.facts b { font-weight: 700; color: #fff; }
.facts .plus { color: var(--warm); font-weight: 700; }

.stepbar {
  position: relative; z-index: 2;
  margin-top: 2.5rem;
  border-top: 1px solid var(--border-dark);
  display: grid;
  grid-template-columns: 1fr;
}
.stepbar__item { padding: 1.5rem 1.5rem 2rem; border-top: 1px solid var(--border-dark); }
.stepbar__item:first-child { border-top: none; }
.stepbar__num { font-family: var(--display); font-weight: 700; font-size: 2.4rem; color: var(--warm); }
.stepbar__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,.6); margin-top: 0.2rem; }
.stepbar__title { margin-top: 0.6rem; font-weight: 600; font-size: 1.02rem; }
.stepbar__intro { font-size: 1rem; line-height: 1.5; color: rgba(255,255,255,.75); max-width: 22ch; }

@media (min-width: 56rem) {
  .stepbar { grid-template-columns: 1.1fr repeat(4, 1fr); margin-top: 7rem; }
  .stepbar__item {
    display: flex;
    flex-direction: column;
    min-height: 22rem;
    padding-bottom: 2.5rem;
    border-top: none;
    border-left: 1px solid var(--border-dark);
  }
  .stepbar__item:first-child { border-left: none; }
  .stepbar__title { margin-top: auto; padding-top: 5rem; }
}

/* ==========================================================================
   Signature: geveegde baanlijn (used sparingly, twice on the page)
   ========================================================================== */
.baanlijn { position: relative; line-height: 0; }
.baanlijn svg { display: block; width: 100%; height: clamp(2.5rem, 6vw, 4rem); }
.baanlijn--on-dark { background: var(--ink); }
.baanlijn--on-light { background: var(--paper); }

/* ==========================================================================
   3. Reizen — horizontal scroll with rotated label
   ========================================================================== */
.trips { background: var(--paper-soft); padding-block: 4rem 4.5rem; overflow: hidden; }
.trips__layout { display: flex; gap: 1.5rem; align-items: stretch; }
/* Vaste breedte in plaats van auto: sommige browsers berekenen de
   intrinsieke breedte van verticale tekst net iets anders, waardoor het
   label zichtbaar naar rechts opschoof. */
.trips__label { flex: 0 0 auto; width: clamp(2.4rem, 4vw, 3.1rem); display: flex; align-items: flex-end; }
.trips__label span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.trips__scroll {
  flex: 1; min-width: 0;
  display: flex; gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.trips__scroll::-webkit-scrollbar { display: none; }

.trip-card { flex: 0 0 auto; width: 16rem; scroll-snap-align: start; scroll-snap-stop: always; }
@media (min-width: 56rem) { .trip-card { width: 19rem; } }

.trip-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 1.5rem;
  overflow: hidden;
  background: var(--border);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Zodra JS de gesnapte kaart kan bepalen (zie main.js), krijgt de
   actieve kaart volle grootte/opacity en de rest een subtiele demping —
   zonder JS blijft alles gewoon op volle sterkte (geen layout shift). */
.trips__scroll.is-tracking .trip-card:not(.is-current) .trip-card__media {
  opacity: 0.72;
  transform: scale(0.96);
}
.trips__scroll.is-tracking .trip-card.is-current .trip-card__media {
  opacity: 1;
  transform: scale(1);
}
.trip-card__media[data-gallery] { cursor: pointer; }
.trip-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.trip-card__media img.is-active { opacity: 1; }
.trip-card:hover .trip-card__media img.is-active { transform: scale(1.045); }

.trip-card__dots {
  position: absolute; left: 0; right: 0; bottom: 0.85rem;
  z-index: 1;
  display: flex; justify-content: center; gap: 0.35rem;
}
.trip-card__dots span {
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.trip-card__dots span.is-active { background: #fff; transform: scale(1.3); }

.trip-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
}
.trip-card__title { font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.trip-card__meta { font-weight: 600; font-size: 0.95rem; color: var(--warm-deep); white-space: nowrap; }
.trip-card__desc {
  margin-top: 0.4rem;
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trip-card__link { margin-top: 0.6rem; color: var(--warm-deep); }

.trips__progress {
  margin-top: 1.75rem;
  height: 3px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  max-width: 16rem;
}
.trips__progress-bar {
  height: 100%;
  width: 33%;
  background: var(--warm-deep);
  border-radius: 999px;
  transition: width 0.1s linear;
}

/* ==========================================================================
   4. Waarom Novakse — dark, split with bleeding photo
   ========================================================================== */
.why { background: var(--ink); color: #fff; padding-block: 4.5rem 0; overflow: hidden; }
.why__split { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.why__body { max-width: 34rem; }
.why__title { font-family: var(--display); font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin-top: 1rem; }
.why__text { margin-top: 1.2rem; color: rgba(255,255,255,.72); max-width: 46ch; }
.why__media { position: relative; }
.why__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.25rem; }

@media (min-width: 60rem) {
  .why__split { grid-template-columns: 1fr 1fr; gap: 4rem; }
  /* photo bleeds off the right edge of the viewport */
  .why__media { margin-right: calc(var(--pad) * -1); }
  .why__media img { aspect-ratio: 3 / 4; border-radius: 1.25rem 0 0 1.25rem; }
}

.why__reasons {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border-dark);
}
.why__reason { padding-block: 1.6rem 2rem; border-bottom: 1px solid var(--border-dark); }
.why__reason h3 { font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.why__reason p { margin-top: 0.4rem; font-size: 0.9rem; color: rgba(255,255,255,.65); max-width: 34ch; }
/* Subkop en verwijzing in de clinicsectie. De kleur wordt geërfd van de
   sectie, die in het thema van wit naar groen kleurt. */
.why__sub { margin-top: 1.2rem; font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.why__link { margin-top: 0.8rem; color: var(--warm); }

@media (min-width: 56rem) {
  .why__reasons { grid-template-columns: repeat(3, 1fr); gap: 0 2.5rem; }
  .why__reason { border-bottom: none; }
}

/* ==========================================================================
   5. Keuze — twee volledige fotopanelen
   ========================================================================== */
.choice { display: grid; grid-template-columns: 1fr; }
@media (min-width: 56rem) { .choice { grid-template-columns: 1fr 1fr; } }

.choice__panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 26rem;
  color: #fff;
  overflow: hidden;
  text-align: left;
  width: 100%;
}
.choice__panel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.choice__panel:hover img { transform: scale(1.04); }
.choice__panel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,24,26,.1) 40%, rgba(20,24,26,.85) 100%);
}
.choice__body { position: relative; z-index: 1; padding: 2rem 1.75rem 2.25rem; }
.choice__tag { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--warm); }
.choice__title { display: block; font-family: var(--display); font-weight: 600; font-size: 1.5rem; margin-top: 0.5rem; }
.choice__text { display: block; margin-top: 0.6rem; max-width: 32ch; font-size: 0.92rem; color: rgba(255,255,255,.85); }
.choice__link { margin-top: 1rem; color: var(--warm); }

/* ==========================================================================
   6. Persoonlijk verhaal — redactioneel, verspringende compositie
   ========================================================================== */
.story { background: var(--paper); padding-block: 5rem; }
.story__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
/* Collage: een grote foto met daaronder twee kleinere, allemaal met afgeronde
   hoeken. Tijdens het scrollen schuift elke foto een klein stukje mee in een
   eigen tempo; daardoor blijft het beeld in beweging zonder dat het scrollen
   zwaar wordt (alleen transform, en de waarde komt uit main.js). */
.story__collage {
  margin: 0;
}
.collage__frame {
  position: relative;
  /* De ruimte tussen de grote en de twee kleine foto's is bewust royaal, zodat
     ze elkaar niet raken wanneer ze tijdens het scrollen uit elkaar lopen. */
  aspect-ratio: 4 / 5.1;
}
.collage__item {
  position: absolute;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 16px 36px rgba(20, 24, 26, 0.16);
  transform: translate3d(0, var(--collage-shift, 0px), 0);
  will-change: transform;
}
.collage__item img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.collage__item--main { left: 20%; top: 0; width: 76%; aspect-ratio: 5 / 4; }
.collage__item--left { left: 0; bottom: 0; width: 46%; aspect-ratio: 5 / 4; z-index: 2; }
.collage__item--right { right: 0; bottom: 3%; width: 46%; aspect-ratio: 5 / 4; z-index: 2; }

/* De kampvuurfoto staat rechtop; in een liggend kader valt Joey's hoofd bij een
   uitsnede vanuit het midden weg. De uitsnede hangt daarom aan de foto zelf en
   niet aan de plek in de collage: op de homepage staat hij rechts, op
   over-novakse links. De taalversies gebruiken ../images/, vandaar *=. */
.collage__item img[src*="joey-kampvuur"] { object-position: center top; }

/* Homepage-sectie "Het verhaal achter Novakse": foto's staan dichter bij
   elkaar in rust, en schuiven daardoor tijdens het scrollen zichtbaarder
   uit elkaar (data-speed hoger gezet in index.html). */
.story__collage--home .collage__frame { aspect-ratio: 4 / 4.3; }

.story__caption {
  margin-top: 1.1rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.story__quote {
  margin-top: 1.25rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.story__text { margin-top: 1.5rem; color: var(--ink-soft); max-width: 50ch; }
.story__sign { margin-top: 1.5rem; font-weight: 600; }
.story__role { font-size: 0.88rem; color: var(--ink-soft); }

@media (min-width: 60rem) {
  .story__grid { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; }
  .story__body { padding-top: 3.5rem; }
}

/* ==========================================================================
   7. Ervaringen — compacte, warme band
   ========================================================================== */
.reviews { background: var(--paper-soft); padding-block: 3.5rem; text-align: center; }
.reviews__intro { max-width: 40rem; margin-inline: auto; }
.reviews__title { font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 3vw, 1.9rem); margin-top: 0.8rem; line-height: 1.2; }
.reviews__text { margin-top: 0.8rem; color: var(--ink-soft); }
.reviews__widget { margin-top: 2.2rem; min-height: 14rem; }
.reviews__link { display: inline-block; margin-top: 1.6rem; color: var(--warm-deep); }

@media (min-width: 56rem) {
  .reviews { padding-block: 5rem; }
}

/* ==========================================================================
   8. FAQ — smalle kolom, minimaal
   ========================================================================== */
.faq { background: var(--paper); padding-block: 4.5rem; }
.faq__inner { max-width: 46rem; }
.faq__list { margin-top: 2rem; }
/* Link from a destination page to the matching blog article. */
.faq__more { margin-top: 1.6rem; }
.faq__more .link-arrow { color: var(--warm-deep); }
.faq__item { border-top: 1px solid var(--border); }
.faq__item:last-child { border-bottom: 1px solid var(--border); }
.faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.15rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 1.4rem;
  color: var(--warm-deep);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding-bottom: 1.3rem; color: var(--ink-soft); max-width: 58ch; }

/* ==========================================================================
   9. Reisaanvraag — donker, formulier
   ========================================================================== */
.request { background: var(--ink); color: #fff; padding-block: 4.5rem; }
.request__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 62rem) { .request__grid { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; } }

.request__title { font-family: var(--display); font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.15; margin-top: 1rem; }
.request__text { margin-top: 1rem; color: rgba(255,255,255,.72); max-width: 40ch; }
.request__points { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.7rem; }
.request__points li { position: relative; padding-left: 1.4rem; color: rgba(255,255,255,.72); font-size: 0.93rem; }
.request__points li::before { content: "—"; position: absolute; left: 0; color: var(--warm); }

.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 32rem) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-field--full { grid-column: 1 / -1; }
}
.form-field label,
.form-field > span { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: rgba(255,255,255,.06);
  border: 1.5px solid var(--border-dark);
  border-radius: 4px;
  color: #fff;
}
.form-field textarea { min-height: 7rem; resize: vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color: rgba(255,255,255,.4); }
.form-field select option { background: var(--ink); color: #fff; }
.form-note { margin-top: 1rem; font-size: 0.8rem; color: rgba(255,255,255,.55); }
.form-submit { margin-top: 1.25rem; }
.form-status { margin-top: 1rem; font-size: 0.88rem; font-weight: 600; }
.form-status--error { color: #ff8a80; }
.form-status--success { color: var(--warm); }

/* ==========================================================================
   10. Ondersteunende diensten — bewust compact
   ========================================================================== */
.services { background: var(--paper); padding-block: 3.5rem 4rem; }
.services__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 48rem) { .services__grid { grid-template-columns: 1fr 1fr; } }

.service {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1.25rem;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}
.service__media { aspect-ratio: 1; overflow: hidden; border-radius: 0.75rem; }
.service__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.service:hover .service__media img { transform: scale(1.06); }
.service--calm:hover .service__media img { transform: scale(1.02); }
.service__tag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--warm-deep); }
.service--calm .service__tag { color: var(--ink-soft); }
.service__title { font-family: var(--display); font-weight: 600; font-size: 1.05rem; margin-top: 0.25rem; }
.service__text { margin-top: 0.3rem; font-size: 0.86rem; color: var(--ink-soft); }
.service__highlight { font-size: 1.2em; font-weight: 700; color: var(--warm-deep); }
.service__links { display: flex; flex-direction: column; gap: 0.3rem; }
.service__link { margin-top: 0.5rem; color: var(--warm-deep); }
.service--calm .service__link { color: var(--ink-soft); }

/* ==========================================================================
   11. Footer
   ========================================================================== */
.site-footer { background: var(--ink); color: rgba(255,255,255,.8); padding-block: 3.5rem 2rem; }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; }
  .footer__grid > div:first-child { grid-column: 1 / -1; }
}
@media (min-width: 56rem) {
  .footer__grid { grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr; }
  .footer__grid > div:first-child { grid-column: auto; }
}

.footer__logo { display: inline-flex; align-items: center; gap: 0.8rem; }
.logo-mark--lg { height: 3.1rem; }
.footer__tagline { margin-top: 1rem; font-size: 0.9rem; color: rgba(255,255,255,.6); max-width: 30ch; }
.footer__heading { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; margin-bottom: 0.9rem; }
.footer__links { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.92rem; }
.footer__links a { color: rgba(255,255,255,.78); }
.footer__links a:hover { color: #fff; text-decoration: underline; }

.footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-dark);
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.78rem;
  color: rgba(255,255,255,.5);
}

/* ==========================================================================
   Onderdelen voor de losse pagina's (Reizen, reispagina's, informatie)
   ========================================================================== */

/* Paginakop: lager dan de openingsfoto op de homepage, zodat de homepage
   herkenbaar de enige volledige beeldvullende opening blijft. */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(62svh, 34rem);
  padding-block: 8rem 3rem;
  color: #fff;
  overflow: hidden;
}
.page-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,24,26,.5) 0%, rgba(20,24,26,.2) 40%, rgba(20,24,26,.72) 100%);
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.1rem, 6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin-top: 0.8rem;
  text-wrap: balance;
}
.page-hero__lede {
  margin-top: 1rem;
  font-size: 1.05rem;
  max-width: 46ch;
  color: rgba(255,255,255,.9);
}
.eyebrow--light { color: #fff; }

/* Inleiding: brede lopende tekst naast een smalle kolom, bewust ongelijk. */
.intro { background: var(--paper); padding-block: 4.5rem 3rem; }
.intro__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.intro__lead {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.8vw, 1.95rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.intro__aside { color: var(--ink-soft); font-size: 0.95rem; }
.intro__aside .link-arrow { margin-top: 0.9rem; color: var(--warm-deep); }

@media (min-width: 60rem) {
  .intro__grid { grid-template-columns: 1.55fr 1fr; gap: 4rem; align-items: start; }
  .intro__aside { padding-top: 0.5rem; }
}

/* De reizen onder elkaar, om en om gespiegeld. */
.trip-rows {
  background: var(--paper);
  padding-block: 2rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
}
.trip-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  width: 100%;
}
.trip-row__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 1.5rem;
  overflow: hidden;
  background: var(--border);
}
.trip-row__media[data-gallery] { cursor: pointer; }
.trip-row__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.trip-row__media img.is-active { opacity: 1; }
.trip-row:hover .trip-row__media img.is-active { transform: scale(1.035); }
.trip-row__media:focus-visible { outline: 2px solid var(--warm-deep); outline-offset: 3px; }

.trip-row__region {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--warm-deep);
}
.trip-row__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-top: 0.5rem;
}
.trip-row__text { margin-top: 0.9rem; color: var(--ink-soft); max-width: 44ch; }

.trip-row__facts {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.1rem;
  border-top: 1px solid var(--border);
}
.trip-row__facts > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.65rem;
  border-bottom: 1px solid var(--border);
}
.trip-row__facts dt { font-weight: 600; font-size: 0.9rem; }
.trip-row__facts dd { margin: 0; font-size: 0.9rem; color: var(--ink-soft); text-align: right; }

.trip-row__actions {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}
.trip-row__actions .link-arrow { color: var(--warm-deep); }

@media (min-width: 60rem) {
  .trip-row { grid-template-columns: 1.05fr 1fr; gap: 3.5rem; }
  .trip-row--flip .trip-row__media { order: 2; }
}

/* Afsluitend blok */
.closing { background: var(--paper-soft); padding-block: 4.5rem; }
.closing__inner { max-width: 44rem; }
.closing__text { margin-top: 1rem; color: var(--ink-soft); }
.closing__actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }

.btn--outline-dark { border: 1.5px solid var(--ink); color: var(--ink); }
.btn--outline-dark:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }

/* De pagina waar je nu bent, blijft in het menu onderstreept. */
.main-nav__links a[aria-current="page"]::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   Reispagina: kruimelpad, feitenbalk, gesplitst fotoblok en "volgt nog"-blok
   -------------------------------------------------------------------------- */
.page-hero--tall { min-height: min(76svh, 42rem); }

.crumbs {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 1.2rem;
}
.crumbs a { border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
.crumbs a:hover { border-bottom-color: #fff; color: #fff; }
.crumbs span[aria-hidden] { padding-inline: 0.35rem; }

/* Kerngegevens als doorlopende band onder de kop, niet als losse kaartjes. */
.factbar { background: var(--ink); color: #fff; }
.factbar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.factbar__item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.15rem 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.factbar__item + .factbar__item { border-left: 1px solid rgba(255, 255, 255, 0.14); padding-left: 1.25rem; }
.factbar__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.6);
}
.factbar__value { font-weight: 600; font-size: 0.95rem; }
.factbar__item--open .factbar__value { color: var(--warm); }

@media (min-width: 48rem) {
  .factbar__grid { grid-template-columns: repeat(5, 1fr); }
  .factbar__item { border-bottom: none; padding-block: 1.5rem; }
}

/* Fotoblok dat tot de rand doorloopt, tegenover een tekstkolom. */
.split-photo {
  background: var(--paper);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2rem;
  padding-block: 4rem;
}
.split-photo__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0 1.5rem 1.5rem 0;
}
.split-photo__body {
  padding-inline: var(--pad);
  max-width: 34rem;
}
.split-photo__note {
  margin-top: 1.2rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding-left: 0.9rem;
  border-left: 2px solid var(--warm);
}

@media (min-width: 60rem) {
  .split-photo { grid-template-columns: 1.1fr 1fr; gap: 4rem; padding-block: 5.5rem; }
  .split-photo__media img { aspect-ratio: 5 / 4; }
  .split-photo__body { padding-inline: 0 var(--pad); }
}

/* Blok voor informatie die er nog niet is — bewust open en eerlijk. */
.pending { background: var(--paper); padding-block: 4rem 5rem; }
.pending__inner {
  max-width: 46rem;
  padding: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: var(--paper-soft);
}
.pending__text { margin-top: 1rem; color: var(--ink-soft); }
.pending__actions {
  margin-top: 1.7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}
.pending__actions .link-arrow { color: var(--warm-deep); }

/* --------------------------------------------------------------------------
   Prijzenoverzicht per periode
   Op een breed scherm een gewone tabel; op een telefoon wordt elke rij een
   blokje met de kolomnaam ervoor, zodat er niets zijwaarts hoeft te schuiven.
   -------------------------------------------------------------------------- */
.prices { background: var(--paper); padding-block: 4.5rem; }
.prices__head { max-width: 42rem; }
.prices__intro { margin-top: 1rem; color: var(--ink-soft); }

.prices__table-wrap { margin-top: 2.5rem; }
.prices__table { width: 100%; border-collapse: collapse; }
.prices__table thead { display: none; }
.prices__table tr {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--border);
}
.prices__table tr:first-child { border-top: 1px solid var(--border); }
.prices__table td { padding: 0; }
.prices__table td[data-label]::before {
  content: attr(data-label);
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 0.15rem;
}
.prices__table td:last-child { grid-column: 1 / -1; margin-top: 0.4rem; }
.prices__table .link-arrow { color: var(--warm-deep); }

.status { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.9rem; }
.status::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}
.status.is-open { color: var(--status-green); }
.status.is-limited { color: var(--warm-deep); }
.status.is-full { color: var(--ink-soft); }

@media (min-width: 48rem) {
  .prices__table thead { display: table-header-group; }
  .prices__table tr { display: table-row; }
  .prices__table th,
  .prices__table td {
    padding: 1.1rem 1rem 1.1rem 0;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
  }
  .prices__table th {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    padding-bottom: 0.7rem;
  }
  .prices__table td[data-label]::before { display: none; }
  .prices__table td:last-child { text-align: right; padding-right: 0; margin-top: 0; }
  .prices__table tr:first-child { border-top: none; }
}

.prices__notes {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.prices__note h3 { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.prices__note p { margin-top: 0.35rem; font-size: 0.92rem; color: var(--ink-soft); }

@media (min-width: 48rem) {
  .prices__notes { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

/* Collage met twee foto's in plaats van drie. */
.story__collage--duo .collage__frame { aspect-ratio: 4 / 3.6; }
.story__collage--duo .collage__item--main { left: 22%; top: 0; width: 78%; }
.story__collage--duo .collage__item--left { left: 0; bottom: 0; width: 52%; }

/* Tekstblok in het groene vlak zonder foto ernaast. */
.why__body--wide { max-width: 46rem; }

/* --------------------------------------------------------------------------
   Wat zit er wel en niet bij een reis in
   -------------------------------------------------------------------------- */
.included { background: var(--paper); padding-block: 4rem; }
.included__grid { display: grid; grid-template-columns: 1fr; gap: 5rem; }
.included__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.included__list { margin-top: 1.1rem; display: grid; gap: 0.7rem; }
.included__list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.95rem;
}
.included__list li::before {
  position: absolute;
  left: 0; top: 0;
  font-weight: 700;
}
.included__list--yes li::before { content: "+"; color: var(--status-green); }
.included__list--no li { color: var(--ink-soft); }
.included__list--no li::before { content: "–"; color: var(--ink-soft); }
.included__note {
  margin-top: 1.4rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding-left: 0.9rem;
  border-left: 2px solid var(--warm);
}
/* Kop boven de twee kolommen, voor de "past deze reis bij jou"-blokken op de
   zelfstandige reizen. De grid eronder blijft ongewijzigd. */
.included__intro { max-width: 42rem; margin-bottom: 2.5rem; }
.included__lede { margin-top: 1rem; color: var(--ink-soft); }
.included__cta {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2rem;
}
.included__cta .link-arrow { color: var(--warm-deep); }

@media (min-width: 48rem) {
  .included__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* --------------------------------------------------------------------------
   Drie tempo's op de reisinformatiepagina
   Bewust geen gelijke kaartjes: het aantal uren staat groot voorop en de
   blokken zijn alleen door een lijn van elkaar gescheiden.
   -------------------------------------------------------------------------- */
.levels { background: var(--paper-soft); padding-block: 4.5rem; }
.levels__head { max-width: 40rem; }
.levels__grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.level {
  padding-block: 1.6rem;
  border-top: 1px solid var(--border);
}
.level:last-child { border-bottom: 1px solid var(--border); }
.level__hours {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--warm-deep);
}
.level__name {
  margin-top: 0.6rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
}
.level__text { margin-top: 0.35rem; font-size: 0.93rem; color: var(--ink-soft); max-width: 32ch; }

@media (min-width: 48rem) {
  .levels__grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .level { border-bottom: 1px solid var(--border); }
  .level:last-child { border-bottom: 1px solid var(--border); }
}

/* --------------------------------------------------------------------------
   Reiskalender
   De maanden staan naast elkaar; per maand een raster van zeven kolommen.
   Vertrekdagen zijn gemarkeerd en aanklikbaar. Onder de kalender staan
   dezelfde data nog een keer als lijst, zodat het ook zonder de kalender
   leesbaar blijft.
   -------------------------------------------------------------------------- */
.calendar { margin-top: 2.5rem; }
.calendar__fallback { color: var(--ink-soft); }

.calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.calendar__legend-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.calendar__chip {
  width: 0.75rem; height: 0.75rem;
  border-radius: 3px;
  background: var(--border);
}
.calendar__chip.is-vrij { background: var(--status-green); }
.calendar__chip.is-bijna-vol { background: var(--warm); }
.calendar__chip.is-vol { background: #c9ccc6; }

.calendar__months {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.calendar__month-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: capitalize;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
}
.calendar__grid {
  margin-top: 0.6rem;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.calendar__dayname {
  text-align: center;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding-bottom: 0.3rem;
}
.calendar__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-radius: 6px;
}
.calendar__cell.is-empty { visibility: hidden; }

/* Vertrekdagen springen eruit */
.calendar__cell.is-start {
  font-weight: 700;
  color: #fff;
  background: var(--status-green);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.calendar__cell.is-bijna-vol { background: var(--warm); color: var(--ink); }
.calendar__cell.is-vol {
  background: #dfe2dd;
  color: var(--ink-soft);
  text-decoration: line-through;
}
a.calendar__cell.is-start:hover { transform: scale(1.08); background: var(--ink); color: #fff; }
a.calendar__cell.is-start:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
a.calendar__cell.is-start:active { transform: scale(0.96); }

@media (min-width: 40rem) {
  .calendar__months { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
}
@media (min-width: 64rem) {
  .calendar__months { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}

/* Dezelfde reizen nog een keer als lijst */
.calendar__list {
  margin-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.calendar__list-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1rem;
  align-items: center;
  padding-block: 1rem;
  border-bottom: 1px solid var(--border);
}
.calendar__list-date { font-weight: 600; font-size: 0.95rem; }
.calendar__list-price { font-size: 0.95rem; color: var(--ink-soft); }
.calendar__list-link.is-muted { font-size: 0.88rem; color: var(--ink-soft); }
.calendar__list-item .link-arrow { color: var(--warm-deep); }

@media (min-width: 48rem) {
  .calendar__list-item {
    grid-template-columns: 1.4fr 1fr 0.8fr auto;
    gap: 1.5rem;
  }
  .calendar__list-price { text-align: right; }
}

.prices__voorbeeld {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--warm-deep);
  padding-left: 0.9rem;
  border-left: 2px solid var(--warm);
}

/* --------------------------------------------------------------------------
   Kalender waarin je zelf een periode kiest
   -------------------------------------------------------------------------- */
.calendar__chip.is-bezet { background: #c9ccc6; }
.calendar__chip.is-gekozen { background: var(--ink); }

button.calendar__cell {
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px solid transparent;
  color: var(--ink);
  background: #eef1ec;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
button.calendar__cell:hover { background: #d7ded6; }
button.calendar__cell:active { transform: scale(0.94); }
button.calendar__cell:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.calendar__cell.is-bezet {
  background: repeating-linear-gradient(135deg, #e4e6e1 0 4px, #d5d8d2 4px 8px);
  color: #9aa096;
  text-decoration: line-through;
  cursor: not-allowed;
}
.calendar__cell.is-buiten { color: #c2c6bf; }

button.calendar__cell.is-tussen { background: #cfe0d5; }
button.calendar__cell.is-gekozen {
  background: var(--ink);
  color: #fff;
  font-weight: 700;
}
button.calendar__cell.is-start { border-radius: 6px 2px 2px 6px; }
button.calendar__cell.is-eind { border-radius: 2px 6px 6px 2px; }

/* Balk onder de kalender met de gekozen periode */
.calendar__bar {
  margin-top: 2rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--paper-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.calendar__bar.is-warn { border-color: var(--warm); }
.calendar__bar.is-done { border-color: var(--ink); background: var(--paper); }
.calendar__hint { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
.calendar__chosen { display: flex; flex-direction: column; gap: 0.15rem; }
.calendar__chosen-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft);
}
.calendar__chosen-dates { font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.calendar__chosen-nights { font-size: 0.85rem; color: var(--ink-soft); }
.calendar__chosen-price {
  margin-top: 0.2rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}
.calendar__bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.calendar__reset {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: underline;
  padding: 0.3rem 0;
}
.calendar__reset:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Aanvraagpagina
   -------------------------------------------------------------------------- */
.booking-page { padding-block: 7rem 4rem; background: var(--paper); }
.crumbs--dark { color: var(--ink-soft); }
.crumbs--dark a { border-bottom-color: var(--border); }
.crumbs--dark a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.booking__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.booking__intro { margin-top: 1rem; color: var(--ink-soft); max-width: 52ch; }
.booking__voorbeeld {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--warm-deep);
  padding-left: 0.9rem;
  border-left: 2px solid var(--warm);
}

.booking__grid { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.booking__block { border: none; padding: 0; margin: 0 0 2.5rem; }
.booking__legend {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  padding: 0;
  margin-bottom: 1rem;
}
.booking__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 0.85rem;
}
.booking__note { margin-top: 0.7rem; font-size: 0.86rem; color: var(--ink-soft); }
.booking__change { margin-top: 0.9rem; color: var(--warm-deep); }

.booking__period {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: var(--paper-soft);
}
.booking__period-dates { font-family: var(--display); font-weight: 600; font-size: 1.15rem; }
.booking__period-nights { margin-top: 0.2rem; font-size: 0.88rem; color: var(--ink-soft); }
.booking__period-empty { color: var(--ink-soft); font-size: 0.95rem; }

.booking__persons { display: flex; align-items: center; gap: 0.6rem; }
.booking__step-btn {
  width: 2.6rem; height: 2.6rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.booking__step-btn:hover { background: var(--paper-soft); border-color: var(--ink); }
.booking__step-btn:active { transform: scale(0.93); }
.booking__persons input {
  width: 4.5rem;
  padding: 0.6rem;
  text-align: center;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--paper);
}

.booking__extras { margin-top: 1rem; display: grid; gap: 0.6rem; }
.extra {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.extra:hover { border-color: var(--ink); }
.extra:has(.extra__check:checked) { border-color: var(--ink); background: var(--paper-soft); }
.extra__check { width: 1.1rem; height: 1.1rem; accent-color: var(--ink); }
.extra__name { font-weight: 500; }
.extra__price { font-size: 0.9rem; color: var(--ink-soft); white-space: nowrap; }

.booking__summary {
  align-self: start;
  padding: 1.75rem;
  border: 1px solid var(--ink);
  border-radius: 1.25rem;
  background: var(--paper-soft);
}
.booking__summary-title { font-family: var(--display); font-weight: 600; font-size: 1.15rem; }
.booking__lines {
  margin: 1.25rem 0 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.55rem 1rem;
  font-size: 0.9rem;
}
.booking__lines dt { color: var(--ink-soft); }
.booking__lines dd { margin: 0; text-align: right; }
.booking__empty { grid-column: 1 / -1; color: var(--ink-soft); font-size: 0.9rem; }
.booking__total {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.booking__total strong { font-family: var(--display); font-size: 1.35rem; }
.booking__total--standalone { margin-top: 0; padding-top: 0; border-top: none; }
.booking__payment { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.booking__payment-title { font-size: 0.95rem; font-weight: 600; }
.booking__payment .booking__note { margin-top: 0.4rem; }
.booking__actions { margin-top: 1.5rem; display: grid; gap: 0.7rem; }
.booking__actions .btn { justify-content: center; }
.booking__error { margin-top: 0.9rem; font-size: 0.88rem; color: #9a2f2f; font-weight: 500; }

@media (min-width: 62rem) {
  .booking__grid { grid-template-columns: 1.5fr 1fr; gap: 4rem; }
  .booking__summary { position: sticky; top: 6.5rem; }
}

.booking__trip {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--warm-deep);
  margin-bottom: 0.6rem;
}
.extra__name { display: flex; flex-direction: column; gap: 0.15rem; }
.extra__hint { font-size: 0.8rem; font-weight: 400; color: var(--ink-soft); }
.extra__price { font-weight: 600; }

/* Keuzevragen in de aanvraag: kleiner dan de hoofdstappen, zonder nummer. */
.booking__block--vraag { margin-bottom: 2rem; }
.booking__legend--klein {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
}
.booking__block--vraag .booking__extras { margin-top: 0; }

/* --------------------------------------------------------------------------
   Dag voor dag
   Een doorlopende lijn met een stip per dag — dezelfde geveegde lijn als
   elders op de site, maar dan verticaal.
   -------------------------------------------------------------------------- */
.days { background: var(--paper-soft); padding-block: 4.5rem; }
.days__head { max-width: 42rem; }
.days__intro { margin-top: 1rem; color: var(--ink-soft); }

.days__list {
  margin-top: 2.5rem;
  position: relative;
  padding-left: 1.6rem;
  list-style: none;
}
/* De doorlopende lijn */
.days__list::before {
  content: "";
  position: absolute;
  left: 0.32rem; top: 0.6rem; bottom: 0.6rem;
  width: 2px;
  background: linear-gradient(180deg, var(--warm) 0%, var(--border) 100%);
}

.day { position: relative; padding-bottom: 2.25rem; }
.day:last-child { padding-bottom: 0; }
/* De stip op de lijn */
.day::before {
  content: "";
  position: absolute;
  left: -1.6rem; top: 0.55rem;
  width: 0.75rem; height: 0.75rem;
  border-radius: 50%;
  background: var(--paper-soft);
  border: 2px solid var(--warm-deep);
}
.day__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--warm-deep);
}
.day__title {
  margin-top: 0.3rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
}
.day__text { margin-top: 0.45rem; color: var(--ink-soft); max-width: 56ch; }

.days__note {
  margin-top: 2.5rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding-left: 0.9rem;
  border-left: 2px solid var(--warm);
}

@media (min-width: 48rem) {
  .days__list { padding-left: 2.2rem; }
  .days__list::before { left: 0.42rem; }
  .day::before { left: -2.2rem; width: 0.9rem; height: 0.9rem; }
  .day { padding-bottom: 2.75rem; }
}

/* WhatsApp-knop: het icoon maakt vooraf duidelijk waar je terechtkomt. */
.btn--whatsapp .btn__icon {
  width: 1.1rem; height: 1.1rem;
  flex: 0 0 auto;
}

/* Verhaalblok zonder foto ernaast. */
.story__solo { max-width: 46rem; }

/* --------------------------------------------------------------------------
   Dienstenpagina's: aanbod, tarieven en stappen
   -------------------------------------------------------------------------- */
.offer { background: var(--paper); padding-block: 4.5rem; }
.offer__head { max-width: 40rem; }
.offer__grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.offer__item { padding-block: 1.5rem; border-top: 1px solid var(--border); }
.offer__item:last-child { border-bottom: 1px solid var(--border); }
.offer__title { font-family: var(--display); font-weight: 600; font-size: 1.15rem; }
.offer__text { margin-top: 0.35rem; color: var(--ink-soft); max-width: 46ch; }
.offer__note {
  margin-top: 0.7rem; font-size: 0.85rem; color: var(--warm-deep);
  padding-left: 0.8rem; border-left: 2px solid var(--warm);
}
.offer__item--accent .offer__title { color: var(--warm-deep); }

@media (min-width: 52rem) {
  .offer__grid { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .offer__item { border-bottom: 1px solid var(--border); }
}

.rates { background: var(--paper-soft); padding-block: 4.5rem; }
.rates__head { max-width: 42rem; }
.rates__intro { margin-top: 1rem; color: var(--ink-soft); }
.rates__grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
.rates__title { font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.rates__list { margin-top: 1rem; border-top: 1px solid var(--border); }
.rates__list > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--border);
}
.rates__list dt { font-size: 0.95rem; }
.rates__list dd { margin: 0; font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.rates__list--compact dt,
.rates__list--compact dd { font-size: 0.88rem; }
.rates__note { margin-top: 0.9rem; font-size: 0.86rem; color: var(--ink-soft); }
.rates__aside { margin-top: 3rem; max-width: 34rem; }

@media (min-width: 52rem) {
  .rates__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .rates__block--full { grid-column: 1 / -1; }
}

/* Knoppen in een paginakop. Alleen gebruikt waar de kop ook een keuze biedt,
   zodat de overige paginakoppen rustig blijven. */
.page-hero__actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Inleiding met een eigen kop boven de grote openingszin. */
.intro__head .h-section { margin-top: 0; }
.intro__head .intro__lead { margin-top: 1.1rem; }
.intro__aside--stacked p + p { margin-top: 0.9rem; }

/* Rustige tekstband: een kop met korte uitleg, zonder beeld. */
.textband { background: var(--paper-soft); padding-block: 4.5rem; }
.textband__inner { max-width: 46rem; }
.textband .h-section { margin-top: 0; }
.textband__text { margin-top: 1.1rem; color: var(--ink-soft); }
.textband .link-arrow { margin-top: 1.4rem; color: var(--warm-deep); }
.textband .subhead { margin-top: 2.4rem; }
.textband__cta { margin-top: 1.8rem; }

/* Tussenkop binnen een tekstsectie: kleiner dan .h-section, wel dezelfde stem. */
.subhead {
  margin-top: 2.4rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.2;
}

/* Plaatsnamen naast elkaar, zonder opsommingstekens. */
.place-list {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Verwijzing per dienst, onder de omschrijving. */
.offer__item .link-arrow { margin-top: 0.8rem; color: var(--warm-deep); }
.offer__item--accent .link-arrow { margin-top: 1rem; }

/* Afsluiting onder de tarieven en het losse blok over de entree. */
.rates__cta { margin-top: 1.2rem; }
.rates__entree { margin-top: 3.5rem; max-width: 46rem; }
.rates__entree .h-section { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.rates__entree .rates__intro { margin-bottom: 1.8rem; }
.rates__extern .rates__list { margin-bottom: 1.3rem; }

.steps { background: var(--paper); padding-block: 4.5rem; }
.steps__head { max-width: 42rem; }
.steps__intro { margin-top: 1rem; color: var(--ink-soft); }
.steps__list {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
}
.step { display: flex; gap: 1rem; align-items: flex-start; }
.step__nr {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 1.5px solid var(--warm-deep);
  color: var(--warm-deep);
  font-weight: 700;
  font-size: 0.85rem;
}
.step__title { font-family: var(--display); font-weight: 600; font-size: 1rem; }
.step__text { margin-top: 0.2rem; font-size: 0.92rem; color: var(--ink-soft); }
.steps__rates { margin-top: 3.5rem; }

@media (min-width: 52rem) {
  .steps__list { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
  .step { flex-direction: column; gap: 0.7rem; }
}

/* --------------------------------------------------------------------------
   Contactpagina
   -------------------------------------------------------------------------- */
.contact { background: var(--paper); padding-block: 4.5rem; }
.contact__grid { display: grid; grid-template-columns: 1fr; gap: 3.5rem; }
.contact__list { margin-top: 1.5rem; border-top: 1px solid var(--border); }
.contact__list li {
  display: grid;
  gap: 0.15rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--border);
}
.contact__label {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-soft);
}
.contact__value { font-size: 1.05rem; font-weight: 500; }
a.contact__value { border-bottom: 1px solid var(--border); width: fit-content; }
a.contact__value:hover { border-bottom-color: var(--ink); }
.contact__hint { font-size: 0.85rem; color: var(--ink-soft); }
.contact__list--compact .contact__value { font-size: 0.95rem; font-weight: 400; }
.contact__sub { margin-top: 3rem; }
.contact__fields { margin-top: 1.5rem; }
.contact__form .form-note,
.onderhoud-form .form-note { color: var(--ink-soft); }
.contact__form .form-status--error,
.onderhoud-form .form-status--error { color: #b3261e; }
.contact__form .form-status--success,
.onderhoud-form .form-status--success { color: var(--warm-deep); }

@media (min-width: 56rem) {
  .contact__grid { grid-template-columns: 1fr 1fr; gap: 5rem; }
}

/* Alleen het dagnummer in de cel; de prijs komt pas in de balk eronder. */
button.calendar__cell {
  flex-direction: column;
  gap: 0.05rem;
  line-height: 1.1;
}
.calendar__daynr { font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   Dagprogramma als brede slideshow
   Zijwaarts scrollen met vastklikkende kaarten; op een telefoon veeg je,
   op een computer sleep je of gebruik je het scrollwiel.
   -------------------------------------------------------------------------- */
.days__head-wrap { margin-bottom: 2.5rem; }
.days__scroll {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--pad);
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.days__scroll::-webkit-scrollbar { display: none; }

.day-card {
  flex: 0 0 78%;
  max-width: 22rem;
  scroll-snap-align: start;
}
.day-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--border);
}
.day-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.day-card:hover .day-card__media img { transform: scale(1.04); }
.day-card__media--leeg {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, #e7eae5 0 6px, #dfe3dd 6px 12px);
  color: var(--ink-soft);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.day-card__label {
  display: block;
  margin-top: 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--warm-deep);
}
.day-card__title {
  margin-top: 0.3rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
}
.day-card__text { margin-top: 0.4rem; font-size: 0.93rem; color: var(--ink-soft); }

.days__progress {
  max-width: var(--wrap);
  margin: 1.75rem auto 0;
  padding-inline: var(--pad);
}
.days__progress-bar {
  height: 2px;
  background: var(--warm-deep);
  width: 20%;
  transition: width 0.15s ease;
}

@media (min-width: 48rem) {
  .day-card { flex: 0 0 34%; }
}
@media (min-width: 72rem) {
  .days__scroll { padding-inline: max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad))); }
  .day-card { flex: 0 0 25%; }
}

/* ==========================================================================
   Blog — overzicht (blog.html)
   Bewust geen identieke kaarten: het eerste artikel krijgt een groter,
   uitgelicht kaartformaat; de rest varieert licht in beeldverhouding.
   ========================================================================== */
.blog-grid { margin-top: 2.5rem; display: grid; gap: 1.5rem; }

.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: 1.25rem;
  border: 1px solid var(--border);
  background: var(--paper);
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.blog-card:hover, .blog-card:focus-within { transform: translateY(-3px); border-color: var(--warm-deep); }
.blog-card__media { display: block; }
.blog-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.blog-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.blog-card__cat { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--warm-deep); }
.blog-card__title { margin-top: 0.55rem; font-family: var(--display); font-weight: 600; font-size: 1.15rem; line-height: 1.28; }
.blog-card__title a::after { content: ""; position: absolute; inset: 0; }
.blog-card__excerpt { margin-top: 0.6rem; font-size: 0.92rem; color: var(--ink-soft); flex: 1; }
.blog-card__meta { margin-top: 1.1rem; font-size: 0.8rem; color: var(--ink-soft); }
.blog-card { position: relative; }

.blog-card--featured .blog-card__media img { aspect-ratio: 16 / 9; }
.blog-card--featured .blog-card__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); }

@media (min-width: 40rem) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-card--featured { grid-column: 1 / -1; }
  .blog-card--featured { flex-direction: row; }
  .blog-card--featured .blog-card__media { flex: 0 0 52%; }
  .blog-card--featured .blog-card__media img { height: 100%; aspect-ratio: auto; }
  .blog-card--featured .blog-card__body { flex: 1; justify-content: center; padding: 2rem 2.4rem; }
  .blog-grid > .blog-card:nth-child(4n+3) .blog-card__media img { aspect-ratio: 3 / 4; }
}
@media (min-width: 64rem) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
  .blog-grid > .blog-card:nth-child(4n+3) { grid-row: span 2; }
  .blog-grid > .blog-card:nth-child(4n+3) .blog-card__media { flex: 1; }
  .blog-grid > .blog-card:nth-child(4n+3) .blog-card__media img { height: 100%; }
}

/* ==========================================================================
   Blog — artikelpagina
   ========================================================================== */
.article-head { background: var(--paper); padding-block: 3rem 0; }
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--warm-deep);
}
.article-back::before { content: "←"; }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.6rem;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.article-meta__dot { width: 0.3rem; height: 0.3rem; border-radius: 50%; background: var(--border); flex-shrink: 0; }

.article-hero__title {
  margin-top: 0.9rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.5rem + 2.2vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 44rem;
  text-wrap: balance;
}
.article-hero__lede {
  margin-top: 1.1rem;
  font-size: 1.08rem;
  color: var(--ink-soft);
  max-width: 46rem;
  text-wrap: pretty;
}

.article-hero__media { margin-top: 2.25rem; }
.article-hero__media img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 1.25rem; }

@media (min-width: 60rem) {
  .article-hero__media img { aspect-ratio: 21 / 8; }
}

.article { background: var(--paper); padding-block: 3.5rem 5.5rem; }
.article__wrap { max-width: 42rem; margin-inline: auto; padding-inline: var(--pad); }

.article-body .lead {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 62ch;
}

.article-body h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-top: 3rem;
}
.article-body > h2:first-child { margin-top: 0; }
.article-body h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.28rem);
  line-height: 1.3;
  margin-top: 2.1rem;
}
.article-body p { margin-top: 1.1rem; color: var(--ink-2); max-width: 64ch; }
.article-body ul, .article-body ol { margin-top: 1.1rem; display: grid; gap: 0.55rem; max-width: 60ch; }
.article-body ul li, .article-body ol li { position: relative; padding-left: 1.4rem; color: var(--ink-2); }
.article-body ul li::before {
  content: "";
  position: absolute;
  left: 0.1rem; top: 0.65em;
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: var(--warm-deep);
}
.article-body ol { counter-reset: article-ol; }
.article-body ol li { counter-increment: article-ol; padding-left: 1.6rem; }
.article-body ol li::before {
  content: counter(article-ol) ".";
  position: absolute;
  left: 0;
  font-weight: 600;
  color: var(--warm-deep);
}
.article-body strong { font-weight: 600; color: var(--ink); }

.article-callout {
  margin-top: 1.75rem;
  padding: 1.3rem 1.5rem;
  border-radius: 1rem;
  background: var(--paper-soft);
  border-left: 3px solid var(--warm-deep);
}
.article-callout p:first-child { margin-top: 0; }
.article-callout__label {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--warm-deep);
  margin-bottom: 0.4rem;
}

.checklist { margin-top: 1.1rem; display: grid; gap: 0.6rem; max-width: 60ch; }
.checklist li { position: relative; padding-left: 1.9rem; color: var(--ink-2); }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.1em;
  width: 1.05rem; height: 1.05rem;
  border: 1.5px solid var(--warm-deep);
  border-radius: 0.3rem;
}

.article-figure { margin-top: 2.25rem; }
.article-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 1.25rem; }
.article-figure figcaption { margin-top: 0.7rem; font-size: 0.85rem; color: var(--ink-soft); }

/* Uitlegdiagrammen (schema's met tekst): niet croppen, natuurlijke verhouding
   met rustige kader eromheen zodat labels leesbaar blijven. */
.article-figure--diagram img {
  aspect-ratio: auto;
  object-fit: contain;
  background: var(--paper-soft);
  border: 1px solid var(--border);
  padding: 0.75rem;
}

.article-divider { margin-block: 3rem; border: none; border-top: 1px solid var(--border); }

.article-share {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.article-share__text { font-size: 0.9rem; color: var(--ink-soft); }

/* Gerelateerde artikelen */
.related { background: var(--paper-soft); padding-block: 4.5rem; }
.related__head { max-width: 42rem; }
.related__grid { margin-top: 2.25rem; display: grid; gap: 1.25rem; }
.related-card {
  position: relative;
  display: block;
  padding: 1.5rem;
  border-radius: 1.25rem;
  border: 1px solid var(--border);
  background: var(--paper);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.related-card:hover { transform: translateY(-3px); border-color: var(--warm-deep); }
.related-card__eyebrow { font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--warm-deep); }
.related-card__title { margin-top: 0.5rem; font-family: var(--display); font-weight: 600; font-size: 1.05rem; line-height: 1.32; }
.related-card__title a::after { content: ""; position: absolute; inset: 0; }

@media (min-width: 48rem) {
  .related__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 60rem) {
  .article__wrap { max-width: 44rem; }
  .article-body p, .article-body ul, .article-body ol { max-width: 68ch; }
}