/* Alps with Sarah — version « Sarah » : reproduction fidèle des maquettes Claude Design
   (Homepage.dc.html, Header.dc.html, Footer.dc.html, Blog Strip.dc.html), palette Navy & Cream.
   Seules additions : responsive, polices auto-hébergées, accessibilité minimale. */

/* ---------- Polices (auto-hébergées) ---------- */
@font-face { font-family: "Vetrena"; src: url("/assets/fonts/Vetrena-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-latin-wght-italic.woff2") format("woff2-variations"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- Jetons ---------- */
:root {
  --ink: #101a54;
  --ink-rgb: 16, 26, 84;
  --paper: #ffffff;
  --panel: #f6efe2;
  --ink-12: rgba(var(--ink-rgb), 0.12);
  --ink-18: rgba(var(--ink-rgb), 0.18);
  --ink-40: rgba(var(--ink-rgb), 0.4);
  --ink-50: rgba(var(--ink-rgb), 0.5);
  --intro-bg: oklch(0.93 0.015 264);
  --blog-bg: oklch(0.97 0.008 90);
  --font-display: "Vetrena", sans-serif;
  --font-body: "Newsreader", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --pad-x: clamp(20px, 6vw, 56px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Achter de pagina navy (kleur van de footer) : geen wit lijntje onder de footer op GSM (Sarah, 11 sept. 2026) */
html { -webkit-text-size-adjust: 100%; background: var(--ink); scroll-padding-top: 68px; }
body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size-adjust: from-font; }
h1, h2, h3, p { margin: 0; font-weight: inherit; font-size: inherit; }
a { color: var(--ink); text-decoration: none; }
a:hover { opacity: 0.7; }
img, video { display: block; max-width: 100%; }
picture { display: contents; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.link-underline { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid var(--ink-40); padding-bottom: 3px; }
.link-underline:hover { opacity: 0.72; }

.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 15px 30px; border-radius: 999px; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { opacity: 0.85; }

/* ---------- En-tête ---------- */
/* Header blijft staan bij het scrollen, op GSM en pc (Sarah, 11 sept. 2026). Hoogte ±65px : scroll-padding-top op html voor ankers (#formules). */
.site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px var(--pad-x); background: var(--panel); border-bottom: 1px solid var(--ink-18); }
.site-header__logo img { height: 34px; width: 110px; object-fit: contain; }

.nav-desktop { display: flex; gap: 28px; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.nav-desktop > a.is-active, .nav-dropdown > a.is-active { font-weight: 500; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.nav-pill { border: 1px solid var(--ink); border-radius: 999px; padding: 10px 22px; }
.nav-pill:hover, .nav-pill.is-active { background: var(--ink); color: #fff; opacity: 1; }
.nav-desktop > a.nav-pill.is-active { border-bottom: 1px solid var(--ink); padding-bottom: 10px; }

.nav-dropdown { position: relative; display: inline-flex; align-items: center; padding: 14px 0; }
.nav-dropdown__panel { position: absolute; top: 100%; left: 0; z-index: 80; display: none; flex-direction: column; min-width: 190px; padding: 8px 0; background: #fff; border: 1px solid rgba(var(--ink-rgb), 0.15); border-radius: 4px; box-shadow: 0 16px 30px rgba(var(--ink-rgb), 0.16); text-transform: none; letter-spacing: 0.02em; }
.nav-dropdown__panel a { padding: 11px 20px; font-size: 11px; }
.nav-dropdown__panel a:hover { background: rgba(var(--ink-rgb), 0.06); opacity: 1; }
.nav-dropdown:hover .nav-dropdown__panel, .nav-dropdown:focus-within .nav-dropdown__panel { display: flex; }

.menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; cursor: pointer; }
.menu-toggle__bars { position: relative; width: 22px; height: 16px; }
.menu-toggle__bars span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink); transition: transform 0.2s, opacity 0.2s; }
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 7px; }
.menu-toggle__bars span:nth-child(3) { top: 14px; }
.menu-toggle.is-open span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

.nav-mobile { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; padding: 6px var(--pad-x) 26px; background: var(--panel); border-bottom: 1px solid var(--ink-18); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.nav-mobile[hidden] { display: none; }
.nav-mobile a { padding: 16px 0; border-bottom: 1px solid var(--ink-12); }
.nav-mobile a.is-active { font-weight: 500; }
/* « Aanbod » met chevron : klapt open naar Formules / Niet-skiërs (Sarah, 11 sept. 2026) */
.nav-mobile__row { display: flex; align-items: center; border-bottom: 1px solid var(--ink-12); }
.nav-mobile__row > a { flex: 1; border-bottom: 0; }
.nav-mobile__more { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -12px; background: transparent; border: 0; padding: 0; color: var(--ink); cursor: pointer; }
.nav-mobile__more svg { width: 16px; height: 16px; transition: transform 0.2s; }
.nav-mobile__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-mobile__sub { display: flex; flex-direction: column; padding-left: 18px; border-bottom: 1px solid var(--ink-12); }
.nav-mobile__sub[hidden] { display: none; }
.nav-mobile__sub a { padding: 13px 0; font-size: 11px; letter-spacing: 0.12em; border-bottom: 0; opacity: 0.85; }
.nav-mobile__sub a + a { border-top: 1px solid var(--ink-12); }
.nav-mobile__sub a.is-active { opacity: 1; }
/* « Plan mijn trip » : volle knop zoals in de hero */
.nav-mobile__plan { display: flex; justify-content: center; align-self: stretch; margin-top: 22px; padding: 15px 30px; font-size: 11px; letter-spacing: 0.16em; background: var(--ink); color: #fff; border-radius: 999px; border-bottom: 0 !important; text-align: center; }
.nav-mobile__plan:hover { opacity: 0.85; }
.menu-toggle, .nav-mobile__more, .nav-mobile a { -webkit-tap-highlight-color: transparent; }
.menu-toggle:focus-visible, .nav-mobile__more:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }

/* ---------- Tooltips (woordenlijst, Sarah 11 sept. 2026) ----------
   Woord met stippellijn ; uitleg verschijnt bij hover, toetsenbordfocus of tik (klasse is-open via sarah.js). */
.tip { position: relative; display: inline; border-bottom: 1px dotted var(--ink-50); cursor: help; text-indent: 0; }
.tip__text { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; display: none; width: max-content; max-width: min(300px, calc(100vw - 2 * var(--pad-x))); padding: 10px 14px; background: #fff; color: var(--ink); border: 1px solid rgba(var(--ink-rgb), 0.15); border-radius: 4px; box-shadow: 0 12px 26px rgba(var(--ink-rgb), 0.16); font-family: var(--font-body); font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; text-align: left; text-indent: 0; white-space: normal; text-wrap: pretty; }
.tip__text.is-right { left: auto; right: 0; }
.tip:hover .tip__text, .tip:focus-visible .tip__text, .tip.is-open .tip__text { display: block; }
.tip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
@media (hover: none) { .tip:hover:not(.is-open) .tip__text { display: none; } }

@media (max-width: 760px) {
  .nav-desktop { display: none; }
  .menu-toggle { display: flex; }
}

/* ---------- Hero ---------- */
.hero { position: relative; height: 640px; overflow: hidden; background: var(--ink); }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 0 40px; text-align: center; color: #fff; }
.hero__eyebrow { color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; }
.hero__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 9vw, 50px); line-height: 0.98; max-width: 20ch; text-wrap: balance; }
.hero__subtitle { font-family: var(--font-body); font-style: italic; font-weight: 400; font-size: clamp(17px, 5vw, 25px); line-height: 1.35; max-width: 32ch; text-wrap: pretty; }
.btn--hero { background: var(--ink); color: #fff; }
.btn--hero:hover { background: #fff; color: var(--ink); opacity: 1; }

/* ---------- Bandeau défilant (ticker) ---------- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Witte tekst op het navy bandje, geen crème (Sarah, 10 sept. 2026) */
.ticker { background: var(--ink); color: #fff; padding: 22px 0; overflow: hidden; }
.ticker__track { display: flex; width: max-content; padding: 0 12px; color: #fff; animation: marquee 26s linear infinite reverse; }
.ticker__track:hover { animation-play-state: paused; opacity: 1; }
.ticker__group { display: flex; }
.ticker__item { display: flex; align-items: center; gap: 24px; padding-right: 24px; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.ticker__dot { opacity: 0.5; }

/* ---------- Zo ziet een week met Sarah eruit (uit de Claude-versie, in Sarahs typografie) ----------
   Regel van Sarah (10 sept. 2026) : wat uit een andere versie komt, krijgt haar lettertypes en haar
   maten — Vetrena voor titels, mono-labels 10–11 px, lopende tekst 15 px, intro cursief 17 px. */
.week { display: flex; flex-direction: column; gap: 32px; padding: 72px var(--pad-x) 64px; background: var(--panel); }
.week__head { display: flex; flex-direction: column; gap: 14px; }
.week__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.55); }
.week__title { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1.1; }
.week__intro { font-style: italic; font-size: 17px; line-height: 1.5; max-width: 56ch; opacity: 0.75; }
.week__track { list-style: none; margin: 0 calc(-1 * var(--pad-x)); padding: 4px var(--pad-x) 12px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 280px); gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad-x); scrollbar-width: thin; scrollbar-color: var(--ink-18) transparent; }
.day { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 220px; padding: 20px 20px 24px; background: #fff; border: 1px solid var(--ink-18); border-radius: 14px; scroll-snap-align: start; }
.day__meta { display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-50); }
.day__name { font-weight: 500; color: var(--ink); }
.day__title { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1.25; }
.day__text { font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.day__bar { position: absolute; left: 20px; right: 20px; bottom: 18px; height: 6px; border-radius: 3px; background: rgba(var(--ink-rgb), 0.08); overflow: hidden; }
.day__bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--h); background: var(--ink); border-radius: 3px; }

/* ---------- De dorpen, op hoogte (uit de Claude-versie, in Sarahs typografie — pagina Les 3 Vallées) ---------- */
.alts { display: flex; flex-direction: column; gap: 28px; padding: 64px var(--pad-x); background: var(--panel); }
.alts__head { display: flex; flex-direction: column; gap: 12px; max-width: 74ch; }
.alts__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.55); }
.alts__title { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.2; }
.alts__intro { font-style: italic; font-size: 15px; line-height: 1.55; max-width: 56ch; opacity: 0.75; }
.alts__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-width: 1100px; }
.alt-row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 14px; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--ink-18); }
.alt-row__m { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-50); font-variant-numeric: tabular-nums; }
.alt-row__line { position: relative; height: 6px; border-radius: 3px; background: rgba(var(--ink-rgb), 0.08); overflow: hidden; }
.alt-row__line::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--x); background: var(--ink); border-radius: 3px; }
.alt-row__name { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 1.2; }
.alt-row__tag { margin-top: 3px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-50); }
@media (max-width: 560px) { .alt-row { grid-template-columns: 56px 1fr; } .alt-row__name { grid-column: 1 / -1; align-items: flex-start; text-align: left; } }

/* ---------- Portrait + intro ---------- */
.intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: stretch; background: var(--intro-bg); }
/* Portret op volledige hoogte, niet bijgesneden (Sarah, 10 sept. 2026) */
.intro__media { position: relative; min-width: 0; }
.intro__media img { display: block; width: 100%; height: 100%; min-height: 560px; aspect-ratio: 4024 / 6048; object-fit: cover; }
/* Tekst zo laag mogelijk in het vak (Sarah, 10 sept. 2026) */
.intro__text { display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; min-width: 0; padding: 48px clamp(20px, 6vw, 64px) 64px; }
.intro__text p { font-size: 13px; line-height: 1.45; max-width: 42ch; text-wrap: pretty; }
.intro__link { align-self: flex-start; margin-top: 8px; }

/* ---------- Hoe ga ik te werk ---------- */
.process { display: flex; flex-direction: column; gap: 32px; padding: 72px var(--pad-x); background: var(--paper); }
.process__title { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1.1; text-align: center; }
.process__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.process__step { display: flex; flex-direction: column; gap: 10px; }
.process__num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; color: var(--ink-50); }
.process__step-title { font-style: italic; font-weight: 700; font-size: 20px; }
.process__step-text { font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.process__cta { align-self: flex-start; }
.process--cream { background: var(--panel); }
.process__matrix { display: flex; flex-direction: column; gap: 16px; width: 100%; align-self: stretch; }

/* ---------- Témoignages défilants ---------- */
.testimonials { background: var(--ink); color: #fff; padding: 22px 0; overflow: hidden; } /* wit, zoals alle bandjes (Sarah) */
.testimonials__track { display: flex; width: max-content; animation: marquee 85s linear infinite; }
.testimonials__track:hover { animation-play-state: paused; }
.testimonials__group { display: flex; }
.testimonial { display: flex; align-items: baseline; gap: 16px; padding: 0 48px; white-space: nowrap; }
.testimonial__text { font-style: italic; font-size: 20px; }
.testimonial__meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65; }

@media (prefers-reduced-motion: reduce) {
  .ticker__track, .testimonials__track { animation: none; flex-wrap: wrap; width: auto; }
  .ticker__group[aria-hidden], .testimonials__group[aria-hidden] { display: none; }
  .ticker__group, .testimonials__group { flex-wrap: wrap; row-gap: 8px; }
  .testimonial { white-space: normal; flex-direction: column; gap: 6px; padding: 8px 24px; }
}

/* ---------- Bandeau blog ---------- */
.blog-strip { display: flex; flex-direction: column; gap: 24px; padding: 40px var(--pad-x); background: var(--blog-bg); color: var(--ink); }
.blog-strip__head { display: flex; justify-content: space-between; align-items: baseline; gap: 32px; flex-wrap: wrap; }
.blog-strip__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
.blog-tile { display: flex; flex-direction: column; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 20px; color: var(--ink); }
.blog-tile:hover { opacity: 0.85; }
.blog-tile--1 { background: #f6efe2; }
.blog-tile--2 { background: oklch(0.93 0.015 264); }
.blog-tile--3 { background: oklch(0.91 0.02 90); }
.blog-tile__title { height: 116px; padding: 18px 18px 12px; font-size: 18px; line-height: 1.26; }
.blog-tile__media { position: relative; flex: 1; min-height: 0; }
.blog-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-tile__arrow { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; font-size: 14px; color: var(--ink); }

/* ---------- Pied de page ---------- */
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; padding: 44px var(--pad-x); background: var(--ink); color: var(--panel); }
.site-footer__brand { display: flex; align-items: center; gap: 4px; }
.site-footer__mark { height: 64px; width: 64px; object-fit: contain; border-radius: 50%; background: #fff; }
.site-footer__wordmark { height: clamp(20px, 6vw, 56px); width: auto; object-fit: contain; }
.site-footer__contact { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }
.site-footer__contact a { color: var(--panel); }
.site-footer__legal { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }
.site-footer__legal a { color: var(--panel); }
/* GSM : alles onder elkaar, onder het logo (Sarah, 11 sept. 2026) */
@media (max-width: 760px) {
  .site-footer { flex-direction: column; align-items: flex-start; gap: 26px; padding: 36px var(--pad-x) calc(40px + env(safe-area-inset-bottom, 0px)); }
  .site-footer__brand { gap: 6px; }
  .site-footer__contact, .site-footer__legal { gap: 10px; font-size: 10px; }
  .site-footer__legal { padding-top: 6px; }
}

/* ---------- Pages légales ---------- */
.legal { display: flex; flex-direction: column; gap: 18px; max-width: 68ch; padding: 72px var(--pad-x) 96px; font-size: 16px; line-height: 1.6; }
.legal__title { font-family: var(--font-display); font-weight: 800; font-size: 42px; line-height: 1.12; }
.legal__updated { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.55); }
.legal__h2 { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.2; margin-top: 16px; }
.legal p, .legal ul { margin: 0; text-wrap: pretty; }
.legal ul { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.legal a { text-decoration: underline; }

/* ---------- Utilitaires communs aux pages intérieures ---------- */
.label--wide { letter-spacing: 0.28em; }
.label--soft { color: rgba(var(--ink-rgb), 0.55); }
.label--dim { opacity: 0.6; }
.label--cream { color: rgba(246, 239, 226, 0.6); }
.num-sys { font-family: system-ui, sans-serif; font-weight: 900; }
.alt-row__name .num-sys { font-weight: 800; font-size: 0.95em; }
.btn--outline { border: 1px solid var(--ink); color: var(--ink); padding: 13px 26px; white-space: nowrap; }
.btn--outline:hover { background: var(--ink); color: #fff; opacity: 1; }
.btn--cream { margin-top: 8px; background: var(--panel); border: 1px solid var(--panel); color: var(--ink); }
.btn--cream:hover { opacity: 0.85; }
.btn--prose { margin-top: 12px; align-self: flex-start; }
.btn--prose:hover { background: var(--panel); color: var(--ink); opacity: 1; }
.subtle-scroll { scrollbar-width: thin; scrollbar-color: var(--ink-18) transparent; }
.subtle-scroll::-webkit-scrollbar { height: 4px; }
.subtle-scroll::-webkit-scrollbar-track { background: transparent; }
.subtle-scroll::-webkit-scrollbar-thumb { background: var(--ink-18); border-radius: 4px; }

/* Texte courant des articles et pages éditoriales */
.prose { display: flex; flex-direction: column; gap: 22px; max-width: 68ch; padding: 8px var(--pad-x) 40px; font-size: 16px; line-height: 1.6; }
.prose p { text-wrap: pretty; }
.prose h2 { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.2; }
.prose h3 { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.25; margin-top: 10px; }
.prose ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.prose a:not(.btn) { text-decoration: underline; }

/* ---------- Over Sarah ---------- */
.page-hero--over { width: 100%; height: 480px; overflow: hidden; }
.page-hero--over img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.story { display: flex; flex-direction: column; gap: 26px; max-width: 1200px; margin: 0 auto; padding: 72px var(--pad-x) 96px; }
.story__columns { column-width: 320px; column-gap: clamp(24px, 6vw, 56px); text-align: justify; }
.story__columns p { margin: 0 0 14px; font-size: 13px; line-height: 1.45; text-wrap: pretty; }
.story__columns p:last-child { margin-bottom: 0; }
.values { display: flex; justify-content: center; padding: 96px var(--pad-x); background: oklch(0.91 0.02 90); }
.values__card { display: flex; flex-direction: column; gap: 40px; max-width: 74ch; padding: clamp(28px, 8vw, 64px); background: #fff; border-radius: 4px; }
.values__title { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1.1; }
.values__item { display: flex; flex-direction: column; gap: 12px; }
.values__item-title { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.values__text { font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.values__text a { text-decoration: underline; }

/* ---------- Tarieven — opbouw uit de Claude-versie, in Sarahs typografie (10 sept. 2026) ---------- */
/* Crème, net als de tabelsectie verderop : de witte tegels komen erop los (Sarah, 10 sept. 2026) */
.formules { display: flex; flex-direction: column; gap: 36px; padding: 48px var(--pad-x) 56px; background: var(--panel); }
.formules__head { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.formules__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 3.5vw, 28px); line-height: 1.2; max-width: 40ch; }
.formules__intro { font-style: italic; font-size: 15px; line-height: 1.5; max-width: 60ch; opacity: 0.75; }
.formules__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
/* Tegel = rasterrijen gedeeld met de buren (subgrid) : n°, titel, ondertitel, « plus », opsomming, knop. */
.formule { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 10px; padding: 26px; background: #fff; border: 1px solid rgba(var(--ink-rgb), 0.16); border-radius: 14px; color: var(--ink); }
.formule--3 { background: var(--ink); color: #fff; border-color: var(--ink); } /* witte tekst, geen crème (Sarah) */
.formule__n { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; }
.formule__title { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.2; }
.formule__tagline { font-style: italic; font-size: 15px; line-height: 1.5; opacity: 0.8; }
.formule__plus { font-size: 14px; line-height: 1.4; opacity: 0.6; min-height: 1.4em; }
.formule__list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; list-style: "— "; }
.formule__btn { align-self: end; justify-self: start; margin-top: 10px; background: var(--ink); color: #fff; }
.formule__btn:hover { opacity: 0.85; }
.formule--3 .formule__btn { background: var(--panel); color: var(--ink); }
@supports not (grid-template-rows: subgrid) {
  .formule { display: flex; flex-direction: column; gap: 10px; }
  .formule__title { min-height: 2.4em; }
  .formule__tagline { min-height: 4.5em; }
  .formule__btn { margin-top: auto; }
}
.formules__disclaimer { font-style: italic; font-size: 15px; line-height: 1.6; text-wrap: pretty; opacity: 0.6; max-width: 80ch; }

/* ---------- Vergelijkingstabel (uit de Claude-versie), in Sarahs typografie ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Crème (het paneel uit het designsystem) : contrasteert met het lichtblauw erboven en het wit eronder */
.matrix { display: flex; flex-direction: column; gap: 24px; padding: 64px var(--pad-x); background: var(--panel); }
.matrix__head { display: flex; flex-direction: column; gap: 12px; }
.matrix__title { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.2; max-width: 30ch; }
.matrix__scroll { overflow-x: auto; background: #fff; border: 1px solid rgba(var(--ink-rgb), 0.16); border-radius: 14px; }
.matrix__table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.matrix__table th, .matrix__table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(var(--ink-rgb), 0.16); }
.matrix__table thead th { font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 1.3; background: var(--intro-bg); }
.matrix__table thead th:not(:first-child) { width: 20%; }
.matrix__n { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-50); }
.matrix__table tbody th { font-weight: 400; }
.matrix__table td { text-align: center; }
.matrix__yes { color: var(--ink); font-size: 1rem; }
.matrix__no { color: rgba(var(--ink-rgb), 0.3); }
.matrix__table tr:last-child th, .matrix__table tr:last-child td { border-bottom: 0; }
.matrix__legend { display: none; }
/* GSM : tabel past in de breedte ; koppen 01/02/03, namen in de legende erboven (Sarah, 11 sept. 2026) */
@media (max-width: 760px) {
  .matrix__legend { display: flex; flex-direction: column; gap: 6px; margin: 0 0 4px; padding: 0; list-style: none; font-size: 14px; line-height: 1.3; }
  .matrix__legend li { display: flex; align-items: baseline; gap: 10px; }
  .matrix__legend .matrix__n { display: inline; margin: 0; font-size: 11px; color: var(--ink); }
  .matrix__table { min-width: 0; font-size: 14px; }
  .matrix__table th, .matrix__table td { padding: 12px 6px; }
  .matrix__table th:first-child, .matrix__table td:first-child { padding-left: 14px; }
  .matrix__table thead th:not(:first-child) { width: 44px; text-align: center; vertical-align: middle; }
  .matrix__table thead .matrix__n { margin: 0; font-size: 12px; color: var(--ink); }
  .matrix__colname { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .matrix__table td:last-child { padding-right: 10px; }
}
.matrix__note { font-style: italic; font-size: 15px; line-height: 1.6; opacity: 0.6; max-width: 70ch; }

.gallery-strip { display: flex; flex-direction: column; gap: 20px; padding: 0 var(--pad-x) 40px; color: var(--ink); }
.gallery-strip--tarieven { background: var(--intro-bg); }
.gallery-strip--niet { gap: 32px; padding-bottom: 24px; background: var(--paper); }
.gallery-strip__scroller { display: flex; gap: 2px; overflow-x: auto; padding: 0 var(--pad-x) 4px; margin: 0 calc(-1 * var(--pad-x)); }
.gallery-strip--niet .gallery-strip__scroller { gap: 16px; }
/* GSM : fotostrook Niet-skiërs tegen de linkerrand, geen witte marge naast de eerste foto (Sarah, 11 sept. 2026) */
@media (max-width: 760px) { .gallery-strip--niet .gallery-strip__scroller { padding-left: 0; } }
.gallery-strip__item { flex: 0 0 260px; aspect-ratio: 4 / 5; }
.gallery-strip__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-strip__cta { display: flex; justify-content: flex-end; }
.regelen { display: flex; justify-content: center; padding: 96px var(--pad-x) 48px; background: var(--paper); }
.regelen__inner { display: flex; flex-direction: column; gap: 48px; width: 100%; }
.regelen__title { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1.1; text-align: center; }
.regelen__list { margin: 0; padding: 0; list-style: none; column-width: 200px; column-gap: 40px; font-size: 15px; line-height: 1.4; color: rgba(var(--ink-rgb), 0.85); }
.regelen__list li { margin-bottom: 11px; padding-left: 18px; text-indent: -18px; break-inside: avoid; }
.regelen__list li::before { content: "—"; display: inline-block; width: 18px; text-indent: 0; color: var(--ink-40); }
.ask { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 96px var(--pad-x); background: var(--ink); color: #fff; }
@media (min-width: 900px) { .ask { grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; } }
.ask__text { display: flex; flex-direction: column; gap: 20px; }
.ask__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 4vw, 34px); line-height: 1.2; max-width: 24ch; }
.ask__lead { font-size: 17px; line-height: 1.6; text-wrap: pretty; max-width: 56ch; color: rgba(246, 239, 226, 0.88); }
.btn--cream { background: var(--panel); border: 1px solid var(--panel); color: var(--ink); cursor: pointer; }
.btn--cream:hover { opacity: 0.85; }
.form { display: flex; flex-direction: column; gap: 20px; padding: clamp(22px, 3vw, 34px); background: rgba(246, 239, 226, 0.06); border: 1px solid rgba(246, 239, 226, 0.22); border-radius: 14px; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; }
.form__honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.field--dark label { color: rgba(246, 239, 226, 0.75); }
.field--dark input, .field--dark textarea { min-height: 44px; padding: 10px 12px; border: 1px solid rgba(246, 239, 226, 0.25); border-radius: 8px; background: rgba(246, 239, 226, 0.06); color: var(--panel); font-size: 15px; }
.field--dark textarea { resize: vertical; min-height: 110px; }
.field--dark input:focus-visible, .field--dark textarea:focus-visible { outline: 2px solid var(--panel); outline-offset: 0; border-color: var(--panel); }
.field--dark input:user-invalid, .field--dark textarea:user-invalid { border-color: #ff9b9b; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.form__privacy { flex: 1 1 240px; font-size: 12px; line-height: 1.5; color: rgba(246, 239, 226, 0.7); }
.form__privacy a { color: inherit; text-decoration: underline; }
.reviews { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 96px var(--pad-x); background: var(--panel); color: var(--ink); overflow-x: clip; }
.reviews__stack { display: grid; width: 100%; max-width: 620px; }
.reviews__measure { grid-area: 1 / 1; display: grid; padding: 58px 40px 32px; visibility: hidden; pointer-events: none; }
.reviews__measure .review { grid-area: 1 / 1; display: flex; }
.reviews__wrap { grid-area: 1 / 1; position: relative; align-self: center; width: 100%; }
/* Elke review heeft haar eigen kaartje : iets breder of smaller, iets schuin naar links of rechts ;
   de blaadjes eronder verschuiven mee, zodat het een stapel lijkt waarvan je het volgende kaartje ziet. */
/* Geen overgang : bij een klik ligt het volgende kaartje er meteen, als een foto (Sarah) */
.reviews__card { transition: none; }
.reviews__wrap[data-index="0"] .reviews__card { width: 100%; transform: rotate(-1.5deg); }
.reviews__wrap[data-index="1"] .reviews__card { width: 92%; margin-inline: auto; transform: rotate(2deg); }
.reviews__wrap[data-index="2"] .reviews__card { width: 96%; margin-left: 4%; transform: rotate(-0.8deg); }
.reviews__wrap[data-index="1"] .reviews__ghost--1 { transform: translateX(14px) rotate(4deg); }
.reviews__wrap[data-index="1"] .reviews__ghost--2 { transform: translateX(-20px) rotate(-2deg); }
.reviews__wrap[data-index="2"] .reviews__ghost--1 { transform: translateX(-26px) rotate(-3deg); }
.reviews__wrap[data-index="2"] .reviews__ghost--2 { transform: translateX(10px) rotate(5deg); }
.reviews__ghost { position: absolute; background: #fff; border: 1px solid rgba(var(--ink-rgb), 0.1); border-radius: 2px; }
.reviews__ghost--1 { inset: 18px 0 0 0; transform: translateX(-18px) rotate(-4deg); }
.reviews__ghost--2 { inset: 10px 0 8px 0; transform: translateX(16px) rotate(3deg); }
.reviews__card { position: relative; display: block; width: 100%; transform-origin: 50% 50%; padding: 40px 40px 32px; background: #fff; border: 1px solid rgba(var(--ink-rgb), 0.12); border-radius: 2px; box-shadow: 0 18px 34px rgba(var(--ink-rgb), 0.16); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.reviews__clip { position: absolute; z-index: 2; border: 4px solid var(--ink); transform: rotate(-18deg); }
.reviews__clip--outer { top: -14px; left: 22px; width: 20px; height: 52px; border-radius: 10px; }
.reviews__clip--inner { top: -8px; left: 26px; width: 12px; height: 32px; border-radius: 6px; background: #fff; }
.review { display: none; flex-direction: column; gap: 22px; }
.review.is-current { display: flex; }
.review__quote { font-style: italic; font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.review__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65; }
.review__counter { opacity: 0.6; white-space: nowrap; }
.reviews__hint { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.5; }

/* ---------- Niet-skiërs ---------- */
.niet__title { font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1.1; max-width: 28ch; margin-bottom: -18px; }
.prose--niet { padding: 8px var(--pad-x) 40px; }
.prose--outro { padding: 0 var(--pad-x) 64px; }
.niet-panel-wrap { display: flex; justify-content: center; padding: 0 var(--pad-x) 24px; background: var(--paper); }
.niet-panel { gap: 12px; width: 100%; max-width: 68ch; padding: 40px var(--pad-x); background: oklch(0.91 0.02 90); }
.niet-panel__note { font-size: 13px; font-style: italic; opacity: 0.65; }

/* ---------- Les 3 Vallées ---------- */
.l3v-hero { position: relative; aspect-ratio: 16 / 6; overflow: hidden; }
.l3v-hero img { width: 100%; height: 100%; object-fit: cover; }
.l3v-hero__credit { position: absolute; right: 14px; bottom: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); pointer-events: none; }
.l3v-head { display: flex; flex-direction: column; gap: 26px; max-width: 74ch; padding: 64px var(--pad-x); }
.l3v-title { font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 1.1; max-width: 18ch; }
.l3v-section { display: flex; flex-direction: column; gap: 20px; max-width: 74ch; padding: 0 var(--pad-x) 64px; }
.l3v-section--valleys { gap: 32px; padding-bottom: 24px; }
.l3v-villages--valleys { padding-top: 0; padding-bottom: 40px; }
.l3v-section--outro { padding-top: 64px; padding-bottom: 96px; }
.l3v-h2 { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.2; }
.l3v-h3 { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.3; }
.l3v-valley { display: flex; flex-direction: column; gap: 12px; }
.l3v-p { font-size: 14px; line-height: 1.55; text-wrap: pretty; }
/* Dorpen naast elkaar (uit de Claude-versie), maar in Sarahs tegelvorm : foto boven, tekst ín de tegel (Sarah, 10 sept. 2026) */
.l3v-villages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; max-width: 1200px; padding: 40px var(--pad-x) 96px; }
.village { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; color: var(--ink); }
.village--1, .village--4, .village--7 { background: var(--panel); }
.village--2, .village--5 { background: var(--intro-bg); }
.village--3, .village--6 { background: oklch(0.91 0.02 90); }
.village__media { position: relative; width: 100%; aspect-ratio: 16 / 10; }
.village__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.village__text { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px 24px; }
.village__name { font-size: 17px; line-height: 1.3; }
.village__desc { font-size: 13px; line-height: 1.5; color: rgba(var(--ink-rgb), 0.7); }

/* ---------- Plan mijn trip + Bedankt ---------- */
.plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center; padding: 96px var(--pad-x); }
.plan__text { display: flex; flex-direction: column; gap: 24px; }
.plan__title { font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 1.1; max-width: 16ch; }
.plan__lead { font-size: 16px; line-height: 1.6; max-width: 46ch; text-wrap: pretty; }
.plan__also { font-size: 13px; line-height: 1.5; opacity: 0.7; }
.plan__contact { font-style: italic; font-size: 17px; line-height: 1.5; }
.plan--thanks .btn { align-self: flex-start; }
.plan__form { display: flex; flex-direction: column; gap: 22px; padding: 36px 34px 38px; border: 1px solid rgba(24, 40, 129, 0.25); }
.plan__honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; }
.field input, .field textarea { border: 0; border-bottom: 1px solid rgba(24, 40, 129, 0.4); background: transparent; font-family: var(--font-body); font-size: 15px; color: var(--ink); padding: 8px 0; outline: none; border-radius: 0; }
.field textarea { resize: none; }
.field input:focus-visible, .field textarea:focus-visible { border-bottom: 2px solid var(--ink); outline: none; }
.field input:user-invalid, .field textarea:user-invalid { border-bottom-color: #9C1111; }
.plan__submit { align-self: flex-start; background: var(--ink); color: #fff; border: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 16px 24px; cursor: pointer; }
.plan__submit:hover { background: #9C1111; }
.plan__privacy { font-size: 12px; line-height: 1.5; opacity: 0.7; }
.plan__privacy a { text-decoration: underline; }

/* ---------- Blog ---------- */
.blog-head { display: flex; flex-direction: column; gap: 8px; padding: 72px var(--pad-x) 30px; }
.blog-head__title { font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 1.1; }
.blog-index { padding: 0 var(--pad-x) 96px; }
.post-head { display: flex; flex-direction: column; gap: 14px; max-width: 68ch; padding: 72px var(--pad-x) 40px; }
.post-head__back { align-self: flex-start; margin-bottom: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.55); }
.post-head__title { font-family: var(--font-display); font-weight: 800; font-size: 42px; line-height: 1.12; text-wrap: pretty; }
.post-hero { height: 420px; }
.post-hero img { width: 100%; height: 100%; object-fit: cover; }
.prose--post { padding: var(--pad-x) var(--pad-x) 96px; }
.prose--post h2 { margin-top: 20px; }

/* =====================================================================================
   RUST & CONSISTENTIE — één typografische schaal en één ritme voor alle pagina's
   (Sarah, 10 sept. 2026). Dit blok staat expres onderaan en overschrijft de losse
   regels hierboven : één commit, dus in één keer terug te draaien.
   ---------------------------------------------------------------------------------
   Schaal : paginatitel 36 px · sectietitel 28 px · tussentitel 20 px · kaarttitel 18 px
   (allemaal Vetrena 800) · lopende tekst 15 px/1.6 · intro cursief 17 px op 75 % ·
   labels mono 11 px met 0.28em · meta mono 10 px. Sectie : 72 px boven en onder,
   koptekst links uitgelijnd (label · titel · intro), 32 px tot de inhoud. Hoeken 14 px.
   ===================================================================================== */
:root {
  --t-page: 36px; --t-section: 28px; --t-sub: 20px; --t-card: 18px;
  --t-body: 15px; --t-lead: 17px; --t-label: 11px; --t-meta: 10px;
  --sec-y: 72px; --head-gap: 12px; --head-mb: 32px; --radius: 14px;
}
/* Titels : één lettertype, één gewicht, vier maten */
.hero__title { font-size: clamp(30px, 7vw, 44px); }
.formules__title, .plan__title, .l3v-title, .blog-head__title, .post-head__title, .legal__title, .niet__title { font-size: var(--t-page); line-height: 1.12; }
.process__title, .week__title, .values__title, .regelen__title, .ask__title, .alts__title, .matrix__title, .l3v-h2, .prose h2, .legal__h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--t-section); line-height: 1.15; text-align: left; }
.l3v-h3, .prose h3, .values__item-title, .process__step-title, .day__title, .formule__title, .village__name { font-family: var(--font-display); font-weight: 800; font-style: normal; font-size: var(--t-card); line-height: 1.25; }
.l3v-h3, .prose h3 { font-size: var(--t-sub); }
.intro__title { font-size: clamp(28px, 4vw, 36px); }
/* Labels en meta : één stijl */
.label, .week__eyebrow, .alts__eyebrow, .formule__n, .hero__eyebrow, .post-head__back, .legal__updated { font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.55); opacity: 1; }
.label--cream { color: rgba(246, 239, 226, 0.7); }
.hero__eyebrow { color: #fff; }
.formule--3 .formule__n { color: rgba(255, 255, 255, 0.7); }
.day__meta, .review__meta, .reviews__hint, .alt-row__m, .alt-row__tag, .matrix__n, .process__num { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-50); opacity: 1; }
/* Lopende tekst en intro's */
.intro__text p, .process__step-text, .day__text, .values__text, .formule__list, .regelen__list, .matrix__table, .l3v-p, .village__desc, .prose, .legal, .plan__lead { font-size: var(--t-body); line-height: 1.6; }
.village__desc, .l3v-p { color: var(--ink); }
.week__intro, .alts__intro, .formules__intro, .formule__tagline, .matrix__note, .formules__disclaimer, .ask__lead, .hero__subtitle { font-family: var(--font-body); font-style: italic; font-size: var(--t-lead); line-height: 1.5; opacity: 0.75; }
.hero__subtitle { font-size: clamp(17px, 4vw, 22px); opacity: 1; }
.ask__lead { color: rgba(246, 239, 226, 0.88); opacity: 1; font-style: normal; }
/* Koptekst van elke sectie : links, zelfde afstanden */
.week__head, .alts__head, .formules__head, .matrix__head, .process__title, .regelen__title, .ask__text { gap: var(--head-gap); margin-bottom: 0; }
.process { gap: var(--head-mb); }
.process__title, .regelen__title { text-align: left; }
.regelen__inner { gap: var(--head-mb); }
.week, .alts, .formules, .matrix, .regelen, .process, .values, .story, .l3v-head, .plan, .blog-head, .post-head, .legal, .reviews { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.l3v-section, .l3v-villages, .prose--niet, .prose--outro, .prose--post, .blog-index, .gallery-strip { padding-bottom: 48px; }
.l3v-section--outro { padding-top: var(--sec-y); padding-bottom: var(--sec-y); } /* ruimte na de hoogtegrafiek (Sarah) */
.l3v-head { padding-bottom: 24px; }
.gallery-strip--niet .niet__title { margin-bottom: 0; }
/* Hoeken en kaarten : één radius */
.day, .formule, .matrix__scroll, .village, .blog-tile, .values__card, .plan__form, .form, .nav-dropdown__panel { border-radius: var(--radius); }
.blog-tile__arrow { border-radius: 50%; }
/* Knoppen en links : één maat */
.btn, .plan__submit, .link-underline, .formule__cta { font-size: var(--t-label); letter-spacing: 0.16em; }