/* ==========================================================================
   MAISON JACINTHE — stylesheet
   Kapsalon in Nijmegen-Oost, sinds 1960.

   Inhoud
   01. Tokens (kleuren, typografie, ruimte)
   02. Reset & basis
   03. Typografie
   04. Knoppen & links
   05. Layout-hulpmiddelen
   06. Topbalk (openingstijden + telefoon)
   07. Header & navigatie
   08. Hero
   09. Tijdlijn "Sinds 1960"
   10. Diensten-index (met hover-beeld)
   11. Sfeer & citaat
   12. Voor iedereen (dames / heren / kinderen)
   13. Reviews
   14. Contact & openingstijden
   15. Footer
   16. Mobiele actiebalk
   17. Pagina-onderdelen (pagekop, tarieven, team, formulier)
   18. Animatie (reveal) & reduced motion
   ========================================================================== */

/* == 01. TOKENS ========================================================== */

:root {
  /* Kleuren — beige, gebroken wit, diep blauw, goud */
  --cream:        #FBF8F3;   /* paginabodem, gebroken wit */
  --cream-2:      #F5EFE5;   /* zachte sectiebodem */
  --sand:         #EDE3D4;   /* beige vlak */
  --sand-deep:    #DCCDB5;   /* rand / lijn op beige */
  --line:         #E2D8C8;   /* hairline op crème */

  --navy:         #1D3446;   /* diep blauw — accent */
  --navy-deep:    #142533;   /* donkere secties */
  --navy-soft:    #2B4A62;   /* hover / secundair blauw */

  --gold:         #B08B41;   /* goud, decoratief (lijnen, iconen, cijfers) */
  /* Goud als tekstkleur. Deze tint haalt WCAG AA (4.5:1) op alle drie de
     lichte bodems: crème 5,5:1 - zachte bodem 5,1:1 - beige vlak 4,6:1.
     Maak hem niet lichter: op het beige vlak (.notice, kaartkader) zakt hij
     dan onder de norm. */
  --gold-ink:     #806022;
  --gold-light:   #D9BE85;   /* goud op donkere bodem */

  --ink:          #16212B;   /* primaire tekst */
  --ink-70:       #46545F;   /* secundaire tekst — 7,4:1 op crème */
  --ink-50:       #616D77;   /* labels, meta — 5,0:1 op crème, ook bij 12px AA */
  --on-dark:      #F4EEE4;   /* tekst op donkerblauw */
  --on-dark-70:   #BFC9D1;   /* secundaire tekst op donkerblauw */

  --open:         #2F7D52;   /* "nu open" */
  --closed:       #9A4B3F;   /* "nu gesloten" */
  --danger:       #A33528;

  /* Typografie */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Roboto, Helvetica, Arial, sans-serif;

  /* Schaal — vloeiend tussen 375px en 1440px */
  --fs-xs:   0.75rem;                                   /* 12 — labels */
  --fs-sm:   0.875rem;                                  /* 14 */
  --fs-base: 1rem;                                      /* 16 */
  --fs-md:   clamp(1.0625rem, 0.20vw + 1.02rem, 1.125rem);
  --fs-lg:   clamp(1.25rem, 0.55vw + 1.12rem, 1.5rem);
  --fs-xl:   clamp(1.5rem, 1.1vw + 1.24rem, 2.125rem);
  --fs-2xl:  clamp(2rem, 2.2vw + 1.48rem, 3.25rem);
  --fs-3xl:  clamp(2.5rem, 4.1vw + 1.54rem, 5rem);
  --fs-4xl:  clamp(3rem, 6.6vw + 1.45rem, 7.5rem);

  /* Ruimte — 8pt-ritme, ruim gezet */
  --space-1: 0.5rem;    /* 8  */
  --space-2: 1rem;      /* 16 */
  --space-3: 1.5rem;    /* 24 */
  --space-4: 2.5rem;    /* 40 */
  --space-5: 4rem;      /* 64 */
  --space-6: 6rem;      /* 96 */
  --space-7: 8rem;      /* 128 */

  --section-y: clamp(4rem, 8vw, 8rem);
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --maxw:      78rem;   /* 1248px */
  --maxw-text: 40rem;   /* ±68 tekens */

  /* Vorm & diepte */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 10px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20, 37, 51, .05), 0 2px 8px rgba(20, 37, 51, .04);
  --shadow-md: 0 2px 6px rgba(20, 37, 51, .06), 0 12px 32px rgba(20, 37, 51, .08);
  --shadow-lg: 0 8px 20px rgba(20, 37, 51, .08), 0 32px 64px rgba(20, 37, 51, .12);

  /* Beweging */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 160ms;
  --t: 240ms;
  --t-slow: 420ms;

  /* Lagen */
  --z-base: 1;
  --z-sticky: 40;
  --z-header: 60;
  --z-mobilenav: 80;
  --z-actionbar: 90;
}

/* == 02. RESET & BASIS =================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 6rem;
}

/* Zonder JavaScript verzorgt de browser het soepel scrollen naar ankers.
   Draait Lenis wel, dan neemt Lenis dat over (zie js/site.js) en moet de
   native variant uit, anders vechten de twee om dezelfde scrollpositie. */
html:not(.lenis) { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 'clip' en niet 'hidden': hidden maakt van body een eigen scrollcontainer,
     waardoor Lenis de pagina niet meer kan aansturen. clip kapt overhangende
     elementen net zo goed af, zonder die bijwerking. */
  overflow-x: clip;
}

body.nav-open { overflow: hidden; }

img, video, svg { display: block; max-width: 100%; height: auto; }
img { background: var(--sand); }

button { font: inherit; color: inherit; }

::selection { background: var(--navy); color: var(--cream); }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.on-dark :focus-visible,
.footer :focus-visible { outline-color: var(--gold-light); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--space-2); top: -4rem;
  z-index: 200; padding: .75rem 1.25rem;
  background: var(--navy); color: var(--on-dark);
  text-decoration: none; border-radius: var(--r-md);
  transition: top var(--t) var(--ease);
}
.skip-link:focus { top: var(--space-2); }

/* == 03. TYPOGRAFIE ====================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); font-variation-settings: 'opsz' 120; }
h2 { font-size: var(--fs-2xl); font-variation-settings: 'opsz' 72; }
h3 { font-size: var(--fs-xl); font-variation-settings: 'opsz' 36; }
h4 { font-size: var(--fs-lg); font-variation-settings: 'opsz' 24; }

h1 em, h2 em, h3 em { font-style: italic; color: var(--gold-ink); }
.on-dark h1 em, .on-dark h2 em, .on-dark h3 em { color: var(--gold-light); }

p { margin: 0 0 var(--space-2); max-width: var(--maxw-text); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--ink-70);
  letter-spacing: -0.005em;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.eyebrow::before {
  content: '';
  width: 2rem; height: 1px;
  background: var(--gold);
  flex: none;
}
.on-dark .eyebrow { color: var(--gold-light); }
.on-dark .eyebrow::before { background: var(--gold-light); }
.eyebrow--center { justify-content: center; }

.script {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 14;
}

/* Sectiebodems */
.on-dark { background: var(--navy-deep); color: var(--on-dark); }
.on-dark p, .on-dark .lead { color: var(--on-dark-70); }
.on-sand { background: var(--cream-2); }

/* == 04. KNOPPEN & LINKS ================================================= */

.btn {
  --btn-bg: var(--navy);
  --btn-fg: var(--cream);
  --btn-bd: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 3rem;
  padding: .8125rem 1.75rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { --btn-bg: var(--navy-soft); --btn-bd: var(--navy-soft); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.125rem; height: 1.125rem; flex: none; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--sand-deep); }
.btn--ghost:hover { --btn-bg: var(--sand); --btn-bd: var(--sand-deep); --btn-fg: var(--ink); }

.btn--gold { --btn-bg: var(--gold); --btn-fg: #1B1408; --btn-bd: var(--gold); }
.btn--gold:hover { --btn-bg: var(--gold-light); --btn-bd: var(--gold-light); }

.btn--wa { --btn-bg: #1F7A54; --btn-fg: #fff; --btn-bd: #1F7A54; }
.btn--wa:hover { --btn-bg: #196444; --btn-bd: #196444; }

.on-dark .btn--ghost { --btn-fg: var(--on-dark); --btn-bd: rgba(244,238,228,.32); }
.on-dark .btn--ghost:hover { --btn-bg: rgba(244,238,228,.1); --btn-bd: rgba(244,238,228,.5); }

.btn--sm { min-height: 2.75rem; padding: .5rem 1.25rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) .75rem;
  margin-top: var(--space-3);
}

/* Tekstlink met onderstreping-animatie */
.link {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 2px;
  transition: background-size var(--t) var(--ease), color var(--t) var(--ease);
}
.link:hover { color: var(--gold-ink); background-size: 0% 1px; background-position: 100% 100%; }
.on-dark .link { color: var(--on-dark); background-image: linear-gradient(var(--gold-light), var(--gold-light)); }
.on-dark .link:hover { color: var(--gold-light); }

/* Pijl-link */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-height: 2.75rem;   /* comfortabel tapdoel */
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.arrow-link::after {
  content: '';
  width: 1.5rem; height: 1px;
  background: currentColor;
  transition: width var(--t) var(--ease);
}
.arrow-link:hover { color: var(--gold-ink); }
.arrow-link:hover::after { width: 2.5rem; }
.on-dark .arrow-link { color: var(--on-dark); }
.on-dark .arrow-link:hover { color: var(--gold-light); }

/* == 05. LAYOUT ========================================================== */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: 90rem; }
.container--narrow { max-width: 52rem; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.on-dark .rule { background: rgba(244,238,228,.16); }

.section-head {
  display: grid;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-5);
}
@media (min-width: 62rem) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: end;
  }
}

/* == 06. TOPBALK ========================================================= */

.topbar {
  background: var(--navy-deep);
  color: var(--on-dark-70);
  font-size: var(--fs-xs);
  letter-spacing: .03em;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding-block: .375rem;
}
.topbar__hours { display: flex; align-items: center; gap: .625rem; }
.topbar__sep { color: rgba(244,238,228,.28); }
.topbar a { color: var(--on-dark); text-decoration: none; }
.topbar a:hover { color: var(--gold-light); }
.topbar__links { display: flex; align-items: center; gap: 1.25rem; }

/* Status-stip: kleur én tekst dragen de betekenis */
.status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 500;
  color: var(--on-dark);
}
.status__dot {
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--ink-50);
  flex: none;
}
/* data-state kan op het status-element zelf staan of op de omhullende regel,
   daarom een afstammelings-selector in plaats van .status[data-state]. */
[data-state='open'] .status__dot { background: #4FBF85; box-shadow: 0 0 0 3px rgba(79,191,133,.2); }
[data-state='closed'] .status__dot { background: #D08A7E; }

/* Op smalle schermen alleen de status en het telefoonnummer — anders wordt
   de balk drie regels hoog en duwt hij de hero van het scherm. */
@media (max-width: 47.999rem) {
  .topbar__hours .topbar__times { display: none; }
  .topbar__links .topbar__sep,
  .topbar__links a:last-child { display: none; }
  .topbar__inner { flex-wrap: nowrap; }
  .topbar__links { flex: none; white-space: nowrap; }
  .topbar__links a { padding-block: .5rem; }
  /* Het telefoonnummer blijft altijd heel; de statustekst kapt af op zeer
     smalle schermen in plaats van de balk breder te maken dan het scherm. */
  .topbar__hours { min-width: 0; overflow: hidden; white-space: nowrap; }
  .topbar__hours .status { flex: none; }
  .topbar__hours .status__detail { overflow: hidden; text-overflow: ellipsis; }
}

/* == 07. HEADER ========================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(251, 248, 243, .86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.header[data-stuck='true'] {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(20, 37, 51, .06);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 4.75rem;
}

/* Woordmerk */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding-block: .625rem;   /* vergroot het tapdoel zonder de layout te verschuiven */
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 40;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
.brand em { font-style: italic; color: var(--gold-ink); }
.brand__est {
  font-family: var(--font-body);
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-50);
}
@media (max-width: 30rem) { .brand__est { display: none; } }

.nav { display: none; }
@media (min-width: 62rem) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
  }
  .nav a {
    position: relative;
    padding: .5rem 0;
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--ink-70);
    text-decoration: none;
    transition: color var(--t) var(--ease);
  }
  .nav a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t) var(--ease);
  }
  .nav a:hover { color: var(--ink); }
  .nav a:hover::after { transform: scaleX(1); }
  .nav a[aria-current='page'] { color: var(--ink); }
  .nav a[aria-current='page']::after { transform: scaleX(1); }
}

.header__actions { display: flex; align-items: center; gap: .625rem; }
.header__actions .btn { display: none; }
@media (min-width: 48rem) { .header__actions .btn { display: inline-flex; } }

/* Hamburger */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem; height: 2.75rem;
  padding: 0 .625rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
}
@media (min-width: 62rem) { .nav-toggle { display: none; } }
.nav-toggle span {
  display: block; height: 1.5px; width: 100%;
  background: var(--ink);
  transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobiel paneel */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobilenav);
  display: flex;
  flex-direction: column;
  padding: 6.5rem var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom));
  background: var(--cream);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow);
  overflow-y: auto;
}
.mobile-nav[data-open='true'] {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--t-slow) var(--ease-out), visibility 0s;
}
@media (min-width: 62rem) { .mobile-nav { display: none; } }

.mobile-nav a.mobile-nav__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 40;
  font-size: var(--fs-xl);
  color: var(--ink);
  text-decoration: none;
}
.mobile-nav a.mobile-nav__link[aria-current='page'] { color: var(--gold-ink); font-style: italic; }
.mobile-nav__num {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--ink-50);
  letter-spacing: .1em;
}
.mobile-nav__foot { margin-top: auto; padding-top: var(--space-4); display: grid; gap: .75rem; }

/* == 08. HERO ============================================================ */

.hero {
  position: relative;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.hero__grid {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6.5rem);
}
@media (min-width: 62rem) {
  .hero__grid {
    /* Het pand is een liggende foto en dus lager dan de tekstkolom. Iets meer
       breedte voor het beeld houdt de twee kolommen in evenwicht. */
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: clamp(2.5rem, 4vw, 4rem);
    min-height: min(72vh, 44rem);
  }
}

.hero__title {
  font-size: var(--fs-4xl);
  line-height: .92;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-3);
}
.hero__title span { display: block; }
.hero__title .is-italic {
  font-style: italic;
  color: var(--gold-ink);
  padding-left: .08em;
}
.hero__sub {
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--ink-70);
  max-width: 26ch;
}

/* Verticale "sinds"-regel naast de titel */
.hero__since {
  display: none;
  position: absolute;
  left: calc(var(--gutter) * -1 + .5rem);
  top: 0;
  writing-mode: vertical-rl;
  font-size: var(--fs-xs);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-50);
}
@media (min-width: 75rem) { .hero__since { display: block; } }
.hero__text { position: relative; }

/* Heldbeeld: het pand op de hoek. Liggend 4:3, de eigen verhouding van de
   foto, zodat er niets van het gebouw wordt weggesneden. */
.stack {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--sand);
  box-shadow: var(--shadow-lg);
}
.stack img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.stack__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-5) var(--space-3) var(--space-2);
  /* Stevig genoeg zodat het bijschrift leesbaar blijft op elke foto. */
  background: linear-gradient(to top, rgba(20,37,51,.88) 0%, rgba(20,37,51,.62) 45%, rgba(20,37,51,0) 100%);
  text-shadow: 0 1px 3px rgba(20,37,51,.5);
  color: var(--on-dark);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Zwevende openingstijden-kaart */
.hero__card {
  display: none;
  position: absolute;
  left: calc(var(--gutter) * -1);
  bottom: var(--space-4);
  width: 15.5rem;
  padding: var(--space-2) var(--space-3);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
@media (min-width: 62rem) { .hero__card { display: block; } }
.hero__card dl { display: grid; grid-template-columns: 1fr auto; gap: .3rem .75rem; margin: .75rem 0 0; font-size: var(--fs-sm); }
.hero__card dt { color: var(--ink-70); }
.hero__card dd { margin: 0; font-variant-numeric: tabular-nums; }
.hero__card .status { color: var(--ink); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; }
/* Op een lichte bodem heeft de stip een donkerder variant nodig voor contrast. */
.on-light-status[data-state='open'] .status__dot,
.hero__card [data-state='open'] .status__dot { background: var(--open); box-shadow: 0 0 0 3px rgba(47,125,82,.16); }
.on-light-status[data-state='closed'] .status__dot,
.hero__card [data-state='closed'] .status__dot { background: var(--closed); }

.hero__media { position: relative; }

/* Lopende band met diensten */
.marquee {
  border-block: 1px solid var(--line);
  background: var(--cream-2);
  overflow: hidden;
  padding-block: .875rem;
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  animation: marquee 42s linear infinite;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 20;
  font-size: var(--fs-base);
  letter-spacing: .05em;
  color: var(--ink-70);
  white-space: nowrap;
}
.marquee__track span.dot { color: var(--gold); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* == 09. TIJDLIJN "SINDS 1960" =========================================== */

.timeline { position: relative; }
.timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  counter-reset: tl;
}
@media (min-width: 48rem) {
  .timeline__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}
@media (min-width: 62rem) {
  .timeline__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
}
.timeline__item {
  position: relative;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.timeline__item::before {
  content: '';
  position: absolute;
  top: -3.5px; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.timeline__year {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 48;
  font-size: var(--fs-xl);
  color: var(--gold-ink);
  letter-spacing: -0.01em;
  margin-bottom: .375rem;
}
.timeline__item h3 { font-size: var(--fs-md); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; margin-bottom: .375rem; }
.timeline__item p { font-size: var(--fs-sm); color: var(--ink-70); line-height: 1.6; }

/* == 10. DIENSTEN-INDEX ================================================== */

.index { position: relative; }
.index__list { border-top: 1px solid var(--line); }

.index__row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: color var(--t) var(--ease);
}
.index__row:hover { color: var(--gold-ink); }

.index__num {
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  color: var(--ink-50);
  font-variant-numeric: tabular-nums;
  transition: color var(--t) var(--ease);
}
.index__row:hover .index__num { color: var(--gold); }

.index__name {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 48;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.index__desc {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink-70);
  letter-spacing: 0;
  margin-top: .25rem;
  max-width: 44ch;
}
.index__price {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-70);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.index__price span { color: var(--ink-50); font-weight: 400; }

/* == 11. SFEER & CITAAT ================================================== */

.split {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 6vw, 6rem); }
  .split--reverse .split__media { order: 2; }
}

.split__media { position: relative; }
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
}
.split__media--wide img { aspect-ratio: 4 / 3; }

/* Bijschrift onder een foto, bijvoorbeeld bij het archiefportret. */
.split__caption {
  margin-top: .875rem;
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.on-dark .split__caption { color: var(--on-dark-70); }

/* Klein overlappend tweede beeld */
.split__inset {
  position: absolute;
  right: -1.5rem; bottom: -2rem;
  width: 42%;
  border: 6px solid var(--cream);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.split__inset img { aspect-ratio: 1 / 1; border-radius: 0; }
@media (max-width: 47.999rem) { .split__inset { display: none; } }

/* Google-badge op beeld */
.badge {
  position: absolute;
  left: -1.25rem; top: 1.75rem;
  padding: .875rem 1.125rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
  min-width: 8.5rem;
}
.badge__score {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 48;
  font-size: 2rem;
  line-height: 1;
  color: var(--ink);
}
.badge__stars { display: flex; justify-content: center; gap: 2px; margin: .375rem 0 .25rem; }
.badge__stars svg { width: .875rem; height: .875rem; fill: var(--gold); }
.badge__label { font-size: .6875rem; letter-spacing: .06em; color: var(--ink-70); text-transform: uppercase; }
/* Op smalle schermen zou de badge precies tegen de schermrand vallen. */
@media (max-width: 47.999rem) { .badge { left: .75rem; top: .75rem; } }

.pullquote {
  margin: 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--gold);
}
.pullquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 48;
  font-size: var(--fs-xl);
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pullquote footer {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* == 12. VOOR IEDEREEN =================================================== */

.trio {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 48rem) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.trio__item {
  padding: var(--space-3);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.on-dark .trio__item { background: rgba(244,238,228,.05); border-color: rgba(244,238,228,.14); }
.trio__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.on-dark .trio__item:hover { box-shadow: none; background: rgba(244,238,228,.09); }
.trio__icon {
  width: 2.5rem; height: 2.5rem;
  margin-bottom: var(--space-2);
  color: var(--gold-ink);
}
.on-dark .trio__icon { color: var(--gold-light); }
.trio__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.25; }
.trio__item h3 { font-size: var(--fs-lg); margin-bottom: .5rem; }
.trio__item p { font-size: var(--fs-sm); color: var(--ink-70); }
.on-dark .trio__item p { color: var(--on-dark-70); }

/* == 13. REVIEWS ========================================================= */

.reviews__grid {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 48rem) { .reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .reviews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.review {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.on-sand .review { background: var(--cream); }
.review__stars { display: flex; gap: 2px; }
.review__stars svg { width: 1rem; height: 1rem; fill: var(--gold); }
.review blockquote { margin: 0; }
.review blockquote p {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 24;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--ink);
  max-width: none;
}
.review__meta {
  margin-top: auto;
  padding-top: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--ink-50);
  letter-spacing: .04em;
}
/* De naam is een <h3>, zodat elke reviewkaart een kop heeft waar een
   schermlezer naartoe kan springen. Wel de koptypografie terugzetten naar
   die van gewone tekst — visueel mag er niets veranderen. */
.review__name {
  display: block;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variation-settings: normal;
  letter-spacing: 0;
  line-height: 1.4;
}

/* == 14. CONTACT & OPENINGSTIJDEN ======================================== */

.contact__grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 62rem) {
  .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 5vw, 5rem); }
}

.hours { width: 100%; border-collapse: collapse; max-width: 26rem; }
.hours th, .hours td {
  padding: .625rem 0;
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: 400;
  border-bottom: 1px solid var(--line);
}
.on-dark .hours th, .on-dark .hours td { border-bottom-color: rgba(244,238,228,.16); }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr[data-today='true'] th,
.hours tr[data-today='true'] td { color: var(--gold-light); font-weight: 600; }
.hours .is-closed { color: var(--on-dark-70); }

.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.info-list li { display: flex; gap: .875rem; align-items: flex-start; }
.info-list svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .2rem; stroke: var(--gold-light); fill: none; stroke-width: 1.4; }
.on-sand .info-list svg, .section:not(.on-dark) .info-list svg { stroke: var(--gold-ink); }
.info-list a { display: inline-block; padding-block: .1875rem; color: inherit; text-decoration: none; border-bottom: 1px solid rgba(176,139,65,.5); }
.info-list a:hover { border-bottom-color: currentColor; }
.info-list__label { display: block; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50); margin-bottom: .125rem; }
.on-dark .info-list__label { color: var(--on-dark-70); }

.map {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--sand);
}
.on-dark .map { border-color: rgba(244,238,228,.16); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.25) contrast(1.03); }

/* Lenis zet standaard alle iframes op pointer-events:none, zodat het scrollwiel
   nooit in een iframe verdwijnt. Voor de kaart willen we dat alleen tijdens het
   scrollen: in rust mag de bezoeker gewoon slepen, zoomen en doorklikken. */
html.lenis.lenis-smooth .map iframe { pointer-events: auto; }
html.lenis.lenis-scrolling .map iframe { pointer-events: none; }

/* Kaart-toestemming (AVG): pas laden na klik */
.map__consent {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  text-align: center;
  background: var(--cream-2);
  color: var(--ink);
}
.map__consent p { font-size: var(--fs-sm); color: var(--ink-70); max-width: 30ch; margin-inline: auto; }

/* == 15. FOOTER ========================================================== */

.footer {
  background: var(--navy-deep);
  color: var(--on-dark-70);
  padding-block: var(--space-5) var(--space-3);
  font-size: var(--fs-sm);
}
.footer__grid {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
}
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-4); } }
@media (min-width: 62rem) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.footer .brand { color: var(--on-dark); font-size: 1.5rem; }
.footer .brand em { color: var(--gold-light); }
.footer .brand__est { color: var(--on-dark-70); }
.footer h2 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: var(--space-2);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.footer li { padding-block: .25rem; }
/* Links in de footer krijgen genoeg hoogte om comfortabel aan te tikken. */
.footer ul a { display: inline-block; padding-block: .25rem; }
.footer a { color: var(--on-dark-70); text-decoration: none; transition: color var(--t) var(--ease); }
.footer a:hover { color: var(--on-dark); }
/* Links midden in een lopende zin moeten aan meer dan kleur herkenbaar zijn,
   anders ziet iemand met kleurenblindheid niet dat er een link staat. De
   lijstjes hierboven zijn hele links en hebben dat niet nodig. */
.footer__bottom a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(244,238,228,.14);
  font-size: var(--fs-xs);
  color: rgba(191,201,209,.75);
}

/* == 16. MOBIELE ACTIEBALK =============================================== */

.actionbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-actionbar);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 24px rgba(20, 37, 51, .08);
  transform: translateY(110%);
  transition: transform var(--t-slow) var(--ease-out);
}
.actionbar[data-visible='true'] { transform: translateY(0); }
@media (min-width: 62rem) { .actionbar { display: none; } }

.actionbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-height: 3.75rem;
  padding: .5rem;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.actionbar a + a { border-left: 1px solid var(--line); }
.actionbar a:active { background: var(--sand); }
.actionbar svg { width: 1.25rem; height: 1.25rem; stroke: var(--gold-ink); fill: none; stroke-width: 1.5; }

/* Ruimte onder de pagina zodat de balk niets afdekt */
@media (max-width: 61.999rem) {
  body { padding-bottom: 4.25rem; }
}

/* == 17. PAGINA-ONDERDELEN =============================================== */

/* Pagina-kop */
.pagehead {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
  background: var(--cream-2);
}
.pagehead h1 { font-size: var(--fs-3xl); margin-bottom: var(--space-2); }
.pagehead .lead { max-width: 44ch; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--ink-50);
}
.crumbs a { color: var(--ink-70); text-decoration: none; }
.crumbs a:hover { color: var(--gold-ink); }
.crumbs li + li::before { content: '/'; margin-right: .5rem; color: var(--sand-deep); }

/* Tarieven */
.pricing { display: grid; gap: var(--space-5); }
@media (min-width: 62rem) { .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) clamp(3rem, 6vw, 5rem); } }

.pricegroup h2 {
  font-size: var(--fs-xl);
  padding-bottom: var(--space-2);
  margin-bottom: 0;
  border-bottom: 1px solid var(--gold);
}
.pricegroup__note { font-size: var(--fs-sm); color: var(--ink-70); margin: var(--space-2) 0 0; }
.pricelist { list-style: none; margin: 0; padding: 0; }
.pricelist li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .75rem;
  padding-block: .875rem;
  border-bottom: 1px solid var(--line);
}
.pricelist .name { font-size: var(--fs-base); }
.pricelist .name small { display: block; font-size: var(--fs-sm); color: var(--ink-70); }
.pricelist .price {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pricelist .price em { font-style: normal; font-weight: 400; font-size: var(--fs-xs); color: var(--ink-50); letter-spacing: .06em; text-transform: uppercase; margin-right: .35rem; }
.pricelist .price--ask { font-weight: 400; font-size: var(--fs-sm); color: var(--ink-50); }

.notice {
  padding: var(--space-3);
  background: var(--sand);
  border: 1px solid var(--sand-deep);
  border-radius: var(--r-lg);
}
.notice h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-base); letter-spacing: 0; margin-bottom: .5rem; }
.notice p { font-size: var(--fs-sm); color: var(--ink-70); }

/* Team */
.team { display: grid; gap: var(--space-4); }
@media (min-width: 48rem) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } }
.member img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-lg); margin-bottom: var(--space-2); }
.member h3 { font-size: var(--fs-lg); margin-bottom: .125rem; }
.member__role { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: .625rem; }
.member p { font-size: var(--fs-sm); color: var(--ink-70); }

/* Formulier */
.form { display: grid; gap: var(--space-2); max-width: 34rem; }

/* Spamval: wel in de DOM en focusbaar voor bots, maar buiten beeld en uit de
   voorleesvolgorde. Bewust geen display:none — sommige bots slaan verborgen
   velden juist over. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.field { display: grid; gap: .375rem; }
.field label { font-size: var(--fs-sm); font-weight: 500; }
.field label .req { color: var(--danger); }
.field .help { font-size: var(--fs-xs); color: var(--ink-70); }
.field input, .field textarea, .field select {
  width: 100%;
  min-height: 3rem;
  padding: .75rem 1rem;
  font: inherit;
  font-size: var(--fs-base);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--sand-deep);
  border-radius: var(--r-md);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(29, 52, 70, .14);
}
.field[data-invalid='true'] input,
.field[data-invalid='true'] textarea { border-color: var(--danger); }
.field .error {
  display: none;
  align-items: center;
  gap: .375rem;
  font-size: var(--fs-sm);
  color: var(--danger);
}
.field .error::before { content: '!'; display: grid; place-content: center; width: 1rem; height: 1rem; border-radius: 50%; background: var(--danger); color: #fff; font-size: .6875rem; font-weight: 700; flex: none; }
.field[data-invalid='true'] .error { display: flex; }

.form__status {
  display: none;
  gap: .625rem;
  padding: var(--space-2);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.form__status[data-state='ok'] { display: flex; background: rgba(47,125,82,.1); border: 1px solid rgba(47,125,82,.35); color: #1E5637; }
.form__status[data-state='error'] { display: flex; background: rgba(163,53,40,.08); border: 1px solid rgba(163,53,40,.3); color: var(--danger); }

/* FAQ */
.faq { border-top: 1px solid var(--line); max-width: 48rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-2);
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 24;
  font-size: var(--fs-lg);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  width: .75rem; height: .75rem; flex: none;
  border-right: 1.5px solid var(--gold-ink);
  border-bottom: 1.5px solid var(--gold-ink);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq details p { padding-bottom: var(--space-2); font-size: var(--fs-base); color: var(--ink-70); }

/* Slot-CTA */
.cta-band { text-align: center; }
.cta-band h2 { font-size: var(--fs-2xl); margin-inline: auto; max-width: 18ch; }
.cta-band p { margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: var(--space-3); }

/* == 18. ANIMATIE ======================================================== */

/* --- Boven de vouw: puur CSS, wacht niet op JavaScript --------------------
   Alles wat direct zichtbaar is bij het openen van de pagina animeert met een
   gewone CSS-animatie. Zou dit via .reveal lopen, dan stond de hero op
   opacity 0 totdat site.js was opgehaald en uitgevoerd — en dan telt de
   browser de Largest Contentful Paint pas vanaf dat moment. Dat is precies
   het soort vertraging waar Google op meet.                                */

/* `backwards` en niet `both`: het element houdt tijdens de vertraging de
   begintoestand aan, maar valt daarna terug op zijn eigen stijl. Draait de
   animatie helemaal niet — bij printen, of in een tabblad dat op de
   achtergrond wordt geopend — dan blijft de tekst gewoon zichtbaar. Met
   `both` zou hij dan op opacity 0 blijven staan. */
.intro { opacity: 1; animation: intro-fade 700ms var(--ease-out) backwards; }
.intro--2 { animation-delay: 70ms; }
.intro--3 { animation-delay: 140ms; }
.intro--4 { animation-delay: 210ms; }

/* Het herobeeld is meestal het grootste element op het scherm en dus wat de
   LCP meet. Dat mag daarom nooit op opacity 0 beginnen: alleen een subtiele
   beweging, zodat het meteen als geschilderd telt. */
.intro--beeld { animation: intro-schaal 1100ms var(--ease-out) backwards; }

@keyframes intro-fade {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes intro-schaal {
  from { transform: scale(1.015); }
  to   { transform: none; }
}

/* --- Onder de vouw: verschijnt bij het scrollen --------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
/* Als JS uitstaat, alles gewoon tonen */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .intro, .intro--beeld { animation: none; opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  .stack__img { transition: opacity 300ms linear; transform: none; }
}

/* Printen — schone, bruikbare versie (bijv. tarieven) */
@media print {
  .topbar, .header, .actionbar, .mobile-nav, .marquee, .map, .cta-band, .btn-row { display: none !important; }
  /* Alles zichtbaar op papier. Zonder deze regel zou een tarievenlijst die
     nog niet in beeld is geweest blanco uit de printer komen, omdat .reveal
     pas zichtbaar wordt gemaakt door JavaScript. */
  .reveal, .intro, .intro--beeld {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  body { background: #fff; color: #000; padding: 0; }
  .section { padding-block: 1.5rem; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .75em; color: #555; }
}