/* Leer Jezus Kennen — Site Styles
   Ontwerp: gescheurd papier en collage op zand en navy, lijntekeningen op de achtergrond
   Fonts: Roboto Slab (koppen), Lora (lopende tekst)
   Accent: navy #004979 */

/* ── Fonts (self-hosted variabele fonts, latin subset) ── */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/sites/leer-jezus-kennen/assets/fonts/roboto-slab-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/sites/leer-jezus-kennen/assets/fonts/lora-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/sites/leer-jezus-kennen/assets/fonts/lora-italic-var.woff2') format('woff2');
}

/* ── Variabelen ── */
:root {
  --bg-main: #eae1db;
  --bg-dark: #0b2f4a;
  --bg-accent: #004979;
  --bg-accent-hover: #003c6c;
  --bg-noise-1: #eae1db;
  --bg-noise-2: #f4ece3;
  --text: #333333;
  --text-light: #545454;
  --text-white: #ffffff;
  --meta: #888888;
  --font-heading: 'Roboto Slab', 'Rockwell', Georgia, serif;
  --font-body: 'Lora', Georgia, 'Times New Roman', serif;
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.05rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-section: clamp(4.5rem, 9vw, 7.5rem);
  --tear-overlap: 48px; /* hoeveel een gescheurde sectie over de vorige heen valt */

  --focus-ring: 3px solid var(--bg-accent);

  /* Scheurranden (clip-paths): knoppen, papierstukken en sectieranden */
  --tear-btn: polygon(0.0% 0.4%, 11.1% 1.8%, 22.2% 2.1%, 33.3% 1.9%, 44.4% 1.7%, 55.6% 1.3%, 66.7% 1.9%, 77.8% 2.0%, 88.9% 2.7%, 100.0% 0.4%, 98.7% 20.0%, 99.0% 40.0%, 99.4% 60.0%, 99.0% 80.0%, 100.0% 99.6%, 88.9% 97.2%, 77.8% 97.3%, 66.7% 97.3%, 55.6% 97.9%, 44.4% 97.8%, 33.3% 98.1%, 22.2% 98.2%, 11.1% 98.9%, 0.0% 99.6%, 1.5% 80.0%, 1.3% 60.0%, 0.5% 40.0%, 0.4% 20.0%);
  --tear-btn-sm: polygon(0.0% 0.4%, 12.5% 0.6%, 25.0% 0.3%, 37.5% 1.0%, 50.0% 1.6%, 62.5% 2.3%, 75.0% 2.3%, 87.5% 2.2%, 100.0% 0.4%, 98.9% 20.0%, 98.6% 40.0%, 99.3% 60.0%, 99.3% 80.0%, 100.0% 99.6%, 87.5% 98.4%, 75.0% 97.6%, 62.5% 97.8%, 50.0% 97.4%, 37.5% 98.1%, 25.0% 98.3%, 12.5% 99.1%, 0.0% 99.6%, 0.4% 80.0%, 0.6% 60.0%, 0.7% 40.0%, 0.5% 20.0%);
  --tear-play: polygon(0.0% 0.4%, 16.7% 2.3%, 33.3% 1.9%, 50.0% 1.3%, 66.7% 1.9%, 83.3% 1.7%, 100.0% 0.4%, 99.2% 20.0%, 98.9% 40.0%, 98.7% 60.0%, 99.0% 80.0%, 100.0% 99.6%, 83.3% 97.6%, 66.7% 97.1%, 50.0% 98.0%, 33.3% 97.4%, 16.7% 98.0%, 0.0% 99.6%, 2.5% 80.0%, 0.2% 60.0%, 0.6% 40.0%, 1.6% 20.0%);
  --tear-btn-hover: polygon(0.0% 0.2%, 11.1% 0.4%, 22.2% 0.6%, 33.3% 0.8%, 44.4% 0.8%, 55.6% 0.9%, 66.7% 0.9%, 77.8% 0.7%, 88.9% 0.8%, 100.0% 0.2%, 99.8% 20.0%, 99.7% 40.0%, 99.7% 60.0%, 99.7% 80.0%, 100.0% 99.8%, 88.9% 99.5%, 77.8% 99.3%, 66.7% 99.3%, 55.6% 99.5%, 44.4% 99.6%, 33.3% 99.6%, 22.2% 99.5%, 11.1% 99.5%, 0.0% 99.8%, 0.0% 80.0%, 0.5% 60.0%, 0.2% 40.0%, 0.3% 20.0%);
  --tear-btn-sm-hover: polygon(0.0% 0.2%, 12.5% 0.6%, 25.0% 0.8%, 37.5% 0.8%, 50.0% 0.7%, 62.5% 0.7%, 75.0% 0.7%, 87.5% 0.7%, 100.0% 0.2%, 99.6% 20.0%, 99.5% 40.0%, 99.7% 60.0%, 99.6% 80.0%, 100.0% 99.8%, 87.5% 99.3%, 75.0% 99.3%, 62.5% 99.0%, 50.0% 99.1%, 37.5% 99.1%, 25.0% 99.1%, 12.5% 99.3%, 0.0% 99.8%, 0.2% 80.0%, 0.5% 60.0%, 0.1% 40.0%, 0.5% 20.0%);
  --tear-play-hover: polygon(0.0% 0.2%, 16.7% 0.8%, 33.3% 0.9%, 50.0% 1.1%, 66.7% 0.9%, 83.3% 0.8%, 100.0% 0.2%, 99.5% 20.0%, 99.9% 40.0%, 99.5% 60.0%, 99.8% 80.0%, 100.0% 99.8%, 83.3% 99.1%, 66.7% 99.0%, 50.0% 99.3%, 33.3% 99.4%, 16.7% 99.6%, 0.0% 99.8%, 0.1% 80.0%, 0.3% 60.0%, 0.1% 40.0%, 0.1% 20.0%);
  --tear-pill-hover: polygon(0.0% 0.2%, 20.0% 0.8%, 40.0% 0.8%, 60.0% 1.2%, 80.0% 1.1%, 100.0% 0.2%, 99.3% 20.0%, 99.8% 40.0%, 99.5% 60.0%, 99.5% 80.0%, 100.0% 99.8%, 80.0% 99.4%, 60.0% 99.0%, 40.0% 99.0%, 20.0% 98.7%, 0.0% 99.8%, 0.1% 80.0%, 0.1% 60.0%, 0.6% 40.0%, 0.0% 20.0%);
  --tear-pill: polygon(0.0% 0.4%, 20.0% 3.3%, 40.0% 3.2%, 60.0% 3.6%, 80.0% 3.4%, 100.0% 0.4%, 99.5% 20.0%, 99.2% 40.0%, 97.3% 60.0%, 99.7% 80.0%, 100.0% 99.6%, 80.0% 97.2%, 60.0% 97.5%, 40.0% 97.1%, 20.0% 96.1%, 0.0% 99.6%, 1.0% 80.0%, 1.8% 60.0%, 2.4% 40.0%, 2.3% 20.0%);
  --paper-a: polygon(0.0% 0.4%, 6.3% 0.4%, 12.5% 0.4%, 18.8% 0.6%, 25.0% 0.7%, 31.3% 1.0%, 37.5% 0.7%, 43.8% 0.8%, 50.0% 0.7%, 56.3% 0.5%, 62.5% 0.6%, 68.8% 0.6%, 75.0% 0.7%, 81.3% 0.6%, 87.5% 1.0%, 93.8% 1.0%, 100.0% 0.4%, 99.9% 20.0%, 99.4% 40.0%, 99.0% 60.0%, 99.7% 80.0%, 100.0% 99.6%, 93.8% 98.9%, 87.5% 99.2%, 81.3% 99.3%, 75.0% 99.2%, 68.8% 99.1%, 62.5% 99.5%, 56.3% 99.4%, 50.0% 99.3%, 43.8% 99.2%, 37.5% 99.4%, 31.3% 99.2%, 25.0% 99.0%, 18.8% 98.9%, 12.5% 99.1%, 6.3% 99.4%, 0.0% 99.6%, 0.9% 80.0%, 0.0% 60.0%, 0.7% 40.0%, 0.8% 20.0%);
  --paper-b: polygon(0.0% 0.4%, 7.1% 0.9%, 14.3% 0.8%, 21.4% 1.3%, 28.6% 1.7%, 35.7% 1.8%, 42.9% 1.7%, 50.0% 1.5%, 57.1% 1.0%, 64.3% 0.9%, 71.4% 0.6%, 78.6% 1.1%, 85.7% 1.2%, 92.9% 1.4%, 100.0% 0.4%, 100.0% 20.0%, 100.0% 40.0%, 99.3% 60.0%, 99.9% 80.0%, 100.0% 99.6%, 92.9% 99.3%, 85.7% 99.2%, 78.6% 99.0%, 71.4% 98.9%, 64.3% 98.9%, 57.1% 99.0%, 50.0% 99.2%, 42.9% 99.0%, 35.7% 99.2%, 28.6% 99.0%, 21.4% 99.0%, 14.3% 99.2%, 7.1% 99.3%, 0.0% 99.6%, 0.3% 80.0%, 0.5% 60.0%, 0.3% 40.0%, 0.4% 20.0%);
  --paper-c: polygon(0.0% 0.4%, 5.6% 0.3%, 11.1% 0.5%, 16.7% 0.6%, 22.2% 1.0%, 27.8% 0.7%, 33.3% 0.9%, 38.9% 1.0%, 44.4% 1.3%, 50.0% 1.1%, 55.6% 0.8%, 61.1% 0.8%, 66.7% 0.9%, 72.2% 0.9%, 77.8% 0.7%, 83.3% 0.6%, 88.9% 0.5%, 94.4% 0.8%, 100.0% 0.4%, 99.1% 20.0%, 99.5% 40.0%, 100.0% 60.0%, 100.0% 80.0%, 100.0% 99.6%, 94.4% 99.0%, 88.9% 98.6%, 83.3% 98.6%, 77.8% 98.7%, 72.2% 99.2%, 66.7% 99.4%, 61.1% 99.1%, 55.6% 98.6%, 50.0% 98.7%, 44.4% 98.5%, 38.9% 98.9%, 33.3% 98.7%, 27.8% 98.6%, 22.2% 98.7%, 16.7% 99.1%, 11.1% 99.1%, 5.6% 98.8%, 0.0% 99.6%, 0.0% 80.0%, 0.6% 60.0%, 0.3% 40.0%, 0.9% 20.0%);
  --paper-d: polygon(0.0% 0.4%, 6.7% 1.2%, 13.3% 1.3%, 20.0% 1.3%, 26.7% 0.9%, 33.3% 0.9%, 40.0% 0.8%, 46.7% 0.8%, 53.3% 0.6%, 60.0% 0.6%, 66.7% 0.8%, 73.3% 0.9%, 80.0% 0.8%, 86.7% 0.8%, 93.3% 0.8%, 100.0% 0.4%, 99.3% 20.0%, 99.3% 40.0%, 99.4% 60.0%, 99.8% 80.0%, 100.0% 99.6%, 93.3% 99.2%, 86.7% 99.0%, 80.0% 99.1%, 73.3% 99.4%, 66.7% 99.4%, 60.0% 99.4%, 53.3% 99.4%, 46.7% 99.3%, 40.0% 99.3%, 33.3% 99.2%, 26.7% 99.3%, 20.0% 99.0%, 13.3% 99.0%, 6.7% 99.2%, 0.0% 99.6%, 0.2% 80.0%, 0.2% 60.0%, 0.2% 40.0%, 0.7% 20.0%);
  --paper-e: polygon(0.0% 0.4%, 5.0% 0.7%, 10.0% 0.6%, 15.0% 0.6%, 20.0% 0.7%, 25.0% 0.5%, 30.0% 0.7%, 35.0% 0.7%, 40.0% 0.7%, 45.0% 0.7%, 50.0% 0.6%, 55.0% 0.8%, 60.0% 0.5%, 65.0% 0.6%, 70.0% 0.8%, 75.0% 1.2%, 80.0% 0.9%, 85.0% 0.6%, 90.0% 0.3%, 95.0% 0.4%, 100.0% 0.4%, 99.9% 20.0%, 99.6% 40.0%, 99.8% 60.0%, 99.6% 80.0%, 100.0% 99.6%, 95.0% 99.1%, 90.0% 99.3%, 85.0% 99.5%, 80.0% 99.1%, 75.0% 99.0%, 70.0% 98.9%, 65.0% 99.3%, 60.0% 99.3%, 55.0% 99.1%, 50.0% 98.9%, 45.0% 99.2%, 40.0% 99.6%, 35.0% 99.3%, 30.0% 99.0%, 25.0% 98.9%, 20.0% 99.3%, 15.0% 99.4%, 10.0% 99.3%, 5.0% 98.9%, 0.0% 99.6%, 0.6% 80.0%, 0.0% 60.0%, 0.4% 40.0%, 0.6% 20.0%);
  --tear-sec-a: polygon(0.0% 0px, 2.9% 4px, 5.9% 10px, 8.8% 12px, 11.8% 8px, 14.7% 4px, 17.6% 7px, 20.6% 13px, 23.5% 17px, 26.5% 19px, 29.4% 23px, 32.4% 19px, 35.3% 19px, 38.2% 11px, 41.2% 12px, 44.1% 8px, 47.1% 8px, 50.0% 14px, 52.9% 15px, 55.9% 20px, 58.8% 19px, 61.8% 19px, 64.7% 17px, 67.6% 14px, 70.6% 10px, 73.5% 7px, 76.5% 3px, 79.4% 7px, 82.4% 7px, 85.3% 16px, 88.2% 16px, 91.2% 15px, 94.1% 7px, 97.1% 11px, 100.0% 20px, 100% 100%, 0 100%);
  --tear-sec-b: polygon(0.0% 14px, 2.5% 13px, 5.0% 15px, 7.5% 14px, 10.0% 16px, 12.5% 15px, 15.0% 16px, 17.5% 13px, 20.0% 17px, 22.5% 17px, 25.0% 19px, 27.5% 13px, 30.0% 10px, 32.5% 6px, 35.0% 8px, 37.5% 14px, 40.0% 18px, 42.5% 15px, 45.0% 9px, 47.5% 12px, 50.0% 11px, 52.5% 14px, 55.0% 15px, 57.5% 17px, 60.0% 18px, 62.5% 16px, 65.0% 20px, 67.5% 16px, 70.0% 17px, 72.5% 12px, 75.0% 10px, 77.5% 5px, 80.0% 9px, 82.5% 14px, 85.0% 17px, 87.5% 18px, 90.0% 15px, 92.5% 11px, 95.0% 5px, 97.5% 8px, 100.0% 13px, 100% 100%, 0 100%);
  --tear-sec-c: polygon(0.0% 15px, 3.3% 14px, 6.7% 15px, 10.0% 14px, 13.3% 17px, 16.7% 14px, 20.0% 22px, 23.3% 23px, 26.7% 24px, 30.0% 25px, 33.3% 22px, 36.7% 28px, 40.0% 22px, 43.3% 19px, 46.7% 9px, 50.0% 5px, 53.3% 10px, 56.7% 16px, 60.0% 20px, 63.3% 16px, 66.7% 14px, 70.0% 11px, 73.3% 12px, 76.7% 12px, 80.0% 18px, 83.3% 18px, 86.7% 16px, 90.0% 13px, 93.3% 8px, 96.7% 12px, 100.0% 11px, 100% 100%, 0 100%);
}

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background-color: var(--bg-main);
  color: var(--text-light);
  line-height: 1.7;
  font-size: 16px;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.sec--navy :focus-visible,
.section-contact :focus-visible,
.kaart:focus-visible {
  outline-color: #fff;
}

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

/* ── Korrel over de hele pagina ── */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4.0' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.08;
  pointer-events: none;
  z-index: 9999;
}

@media screen and (max-width: 767px) {
  body::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  }
}

::selection {
  background: var(--bg-accent);
  color: #fff;
}

/* ── Knoppen: hoekig met een licht gescheurde rand ── */
.btn-cta,
.hero-cta a,
.btn-submit,
.church-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 34px;
  border: none;
  border-radius: 0;
  clip-path: var(--tear-btn);
  background: var(--bg-accent);
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.35s var(--ease-out), transform 0.35s var(--ease-out), color 0.35s var(--ease-out), clip-path 0.45s var(--ease-out);
}

.btn-cta:hover,
.hero-cta a:hover,
.btn-submit:hover,
.church-card__link:hover {
  background: var(--bg-accent-hover);
  color: #fff;
  transform: translateY(-2px);
  clip-path: var(--tear-btn-hover);
}
.nav-cta .btn-cta:hover { clip-path: var(--tear-btn-sm-hover); }

.btn-cta svg, .hero-cta a svg { transition: transform 0.35s var(--ease-out); }
.btn-cta:hover svg, .hero-cta a:hover svg { transform: translateX(5px); }

.btn-light,
.section-contact--sand .btn-submit {
  background: var(--bg-main);
  color: var(--bg-accent);
}
.btn-light:hover,
.section-contact--sand .btn-submit:hover {
  background: #fff;
  color: var(--bg-accent);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 4px;
  border-bottom: 1px solid rgba(0, 73, 121, 0.35);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bg-accent);
  transition: border-color 0.3s var(--ease-out);
}
.link-arrow:hover { border-bottom-color: var(--bg-accent); }

.eyebrow {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bg-accent);
}

/* ── Navigatie ── */
.nav-primary {
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: var(--bg-main);
  padding: 0 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  transition: box-shadow 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}

.nav-primary.scrolled {
  background-color: rgba(234, 225, 219, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.07), 0 4px 24px rgba(0,0,0,0.06);
}

.nav-logo { flex-shrink: 0; }
.nav-logo img {
  height: 40px;
  width: auto;
  transition: opacity 0.25s var(--ease-out);
}
.nav-logo img:hover { opacity: 0.75; }

.nav-menu {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-menu a {
  color: var(--text-light);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 25px 18px;
  position: relative;
  transition: color 0.25s var(--ease-out);
  white-space: nowrap;
}

.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  height: 1px;
  background: var(--bg-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease-out);
}

.nav-menu a:hover { color: var(--bg-accent); }
.nav-menu a:hover::after { transform: scaleX(1); }
.nav-menu a.active { color: var(--bg-accent); }
.nav-menu a.active::after { transform: scaleX(1); }

.nav-menu .dropdown { position: relative; }

.nav-menu .dropdown-toggle::after {
  content: '\2039';
  display: inline-block;
  margin-left: 5px;
  transform: rotate(-90deg);
  font-size: 16px;
  transition: transform 0.3s var(--ease-out);
}

.nav-menu .dropdown:hover .dropdown-toggle::after,
.nav-menu .dropdown.open .dropdown-toggle::after { transform: rotate(90deg); }

.nav-menu .dropdown > a::after { display: none; }

.nav-menu .drop-menu {
  position: absolute;
  top: 100%; left: 0;
  background: rgba(244, 236, 227, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-width: 300px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12), 0 1px 0 rgba(0,0,0,0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0.3s;
  overflow: hidden;
  z-index: 300;
}

.nav-menu .dropdown:hover .drop-menu,
.nav-menu .dropdown.open .drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu .drop-menu a {
  display: block;
  padding: 13px 22px;
  font-size: var(--text-xs);
  color: #333;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), padding-left 0.25s var(--ease-out);
}
.nav-menu .drop-menu a::after { display: none; }
.nav-menu .drop-menu a:last-child { border-bottom: none; }
.nav-menu .drop-menu a:hover {
  background: rgba(0, 73, 121, 0.06);
  color: var(--bg-accent);
  padding-left: 28px;
}

.nav-cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-cta .btn-cta {
  min-height: 42px;
  padding: 0 22px;
  font-weight: 500;
  letter-spacing: 0.05em;
  clip-path: var(--tear-btn-sm);
}

.nav-cta .social-icon {
  color: var(--text-light);
  font-size: 16px;
  transition: color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  display: flex;
  align-items: center;
}

.nav-cta .social-icon:hover {
  color: var(--bg-accent);
  transform: translateY(-2px);
}

/* Taalwissel: hoekig label met dunne rand en scheurrandje */
.nav-cta .lang-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  font-family: var(--font-heading);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-light);
  background: rgba(0,0,0,0.28);
  clip-path: var(--tear-pill);
  transition: color 0.25s var(--ease-out), background 0.25s var(--ease-out), clip-path 0.45s var(--ease-out);
  white-space: nowrap;
}
.nav-cta .lang-pill::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg-main);
  clip-path: var(--tear-pill);
  z-index: -1;
  transition: background 0.25s var(--ease-out), clip-path 0.45s var(--ease-out);
}
.nav-cta .lang-pill:hover {
  color: var(--bg-accent);
  background: var(--bg-accent);
  clip-path: var(--tear-pill-hover);
}
.nav-cta .lang-pill:hover::before { background: var(--bg-noise-2); clip-path: var(--tear-pill-hover); }

.mobile-nav-links .lang-link { justify-content: flex-start; gap: 8px; }

/* Progressieve blur onder het menu: inhoud vervaagt in stappen zodra je scrolt */
.pblur {
  position: fixed;
  top: 70px; left: 0;
  width: 100%;
  height: 150px;
  pointer-events: none;
  z-index: 150;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
body.scrolled .pblur { opacity: 1; }
.pblur div { position: absolute; inset: 0; }
.pblur .b1 { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); -webkit-mask: linear-gradient(to bottom, #000 55%, transparent 100%); mask: linear-gradient(to bottom, #000 55%, transparent 100%); }
.pblur .b2 { backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); -webkit-mask: linear-gradient(to bottom, #000 30%, transparent 75%); mask: linear-gradient(to bottom, #000 30%, transparent 75%); }
.pblur .b3 { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -webkit-mask: linear-gradient(to bottom, #000 0%, transparent 45%); mask: linear-gradient(to bottom, #000 0%, transparent 45%); }

/* ── Mobiel menu ── */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  z-index: 250;
  background: none;
  border: none;
}

.mobile-menu-btn span {
  display: block;
  width: 24px; height: 2px;
  background: var(--text-light);
  transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out), width 0.35s var(--ease-out);
  transform-origin: center;
}

.mobile-menu-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-menu-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(20, 22, 24, 0.55);
  z-index: 400;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-panel {
  position: fixed;
  top: 0; right: 0;
  width: min(340px, 88vw);
  height: 100%;
  background: var(--bg-main);
  z-index: 410;
  transform: translateX(100%);
  transition: transform 0.45s var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 30px 28px 40px;
  box-shadow: -8px 0 40px rgba(0,0,0,0.15);
}

.mobile-menu-panel.active { transform: translateX(0); }

.mobile-menu-close {
  align-self: flex-end;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  padding: 8px;
  margin-bottom: 20px;
  transition: color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.mobile-menu-close:hover {
  color: var(--bg-accent);
  transform: rotate(90deg);
}

.mobile-menu-close svg { width: 22px; height: 22px; }

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-nav-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--text-light);
  padding: 14px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: color 0.25s var(--ease-out), padding-left 0.25s var(--ease-out);
}

.mobile-nav-links a:hover {
  color: var(--bg-accent);
  padding-left: 14px;
}

.mobile-nav-links .mobile-sub {
  padding-left: 24px;
  font-size: var(--text-xs);
  color: var(--meta);
}

.mobile-nav-cta { margin-top: 28px; }
.mobile-nav-cta .btn-cta { width: 100%; }

@media (max-width: 960px) {
  .nav-menu { display: none; }
  .nav-cta .btn-cta { display: none; }
  .mobile-menu-btn { display: flex; }
}

/* ── Secties, papier en motieven ── */
.wrap {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 25px;
}

.sec {
  position: relative;
  overflow: hidden;
  padding: var(--space-section) 0;
  background: var(--bg-main);
}

.sec--navy {
  background: var(--bg-accent);
  color: #fff;
}

/* Een gescheurde bovenrand: de sectie valt over de vorige heen, motieven verdwijnen erachter */
.tear-top {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--tear-overlap));
  padding-top: calc(var(--space-section) + var(--tear-overlap));
  clip-path: var(--tear-sec-a);
}
.tear-top--b { clip-path: var(--tear-sec-b); }
.tear-top--c { clip-path: var(--tear-sec-c); }

/* Achtergrondlaag met lijntekeningen */
.bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.mo {
  position: absolute;
  left: var(--x, 0);
  top: var(--y, auto);
  bottom: var(--yb, auto);
  width: var(--w, 140px);
  height: auto;
  opacity: var(--o, 0.85);
  filter: blur(var(--b, 0px));
  will-change: transform;
}

/* Papierstukken */
.paper {
  position: relative;
  transform: rotate(var(--r, 0deg));
}
.paper::before {
  content: "";
  position: absolute;
  inset: 8px 5px 6px;
  z-index: -1;
  box-shadow: 0 18px 28px rgba(11, 47, 74, 0.22), 0 2px 4px rgba(11, 47, 74, 0.12);
  pointer-events: none;
}

.paper-in {
  position: relative;
  overflow: hidden;
  background: var(--bg-noise-2);
  clip-path: var(--paper-a);
}
.paper-in--b { clip-path: var(--paper-b); }
.paper-in--c { clip-path: var(--paper-c); }
.paper-in--d { clip-path: var(--paper-d); }
.paper-in--e { clip-path: var(--paper-e); }

.paper-in--navy {
  background: rgba(0, 73, 121, 0.9);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.paper-in--glass {
  background: rgba(244, 236, 227, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Onthulling ── */
.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.95s var(--ease-out), transform 0.95s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.rv.visible { opacity: 1; transform: translateY(0); }

.paper.rv {
  transform: rotate(calc(var(--r, 0deg) + 5deg)) translateY(36px) scale(0.97);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.paper.rv.visible { transform: rotate(var(--r, 0deg)) translateY(0) scale(1); }

:is(.kaart, .collage-photo, .page-hero-photo, .video-paper).paper.rv.visible:hover {
  transform: rotate(var(--r, 0deg)) translateY(-8px) scale(1);
  transition-duration: 0.5s;
  transition-delay: 0s;
}

/* Titels woord voor woord: elk woord schuift uit een masker omhoog */
html.js .wd:not(.split) { opacity: 0; }
html.js-late .wd:not(.split) { opacity: 1; } /* vangnet als het script niet laadt */
.wd .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.04em 0.05em 0.1em 0;
  margin: -0.04em 0 -0.1em 0;
}
.wd .w i {
  display: inline-block;
  font-style: normal;
  transform: translateY(112%);
  transition: transform 1.05s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 0.1s + var(--d, 0s));
}
.wd.visible .w i { transform: translateY(0); }

/* ── Hero (homepage) ── */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-main);
  padding: clamp(3rem, 6vw, 6rem) 0 clamp(2rem, 4vw, 3.5rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto auto auto auto;
  column-gap: 40px;
  row-gap: 0;
  align-items: start;
}
.hero-grid > .eyebrow, .hero-grid > h1, .hero-grid > .hero-text, .hero-grid > .hero-actions { grid-column: 1; }
.hero-grid > .collage { grid-column: 2; grid-row: 1 / 5; }

.hero h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(3rem, 6.4vw, 5.75rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--bg-accent);
  margin-top: 18px;
}

.hero-text {
  max-width: 560px;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 1.05rem;
  line-height: 1.85;
}

.hero-text .dropcap {
  float: left;
  font-family: var(--font-body);
  font-size: 3.4em;
  line-height: 1;
  padding-right: 0.1em;
  font-weight: 700;
  color: var(--text);
}

.hero-text strong, .hero-text .bold-text { font-weight: 700; color: var(--text); }

.hero-actions {
  margin-top: 34px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}

.collage {
  position: relative;
  min-height: 640px;
  margin-top: 30px;
}

.collage-photo {
  position: absolute;
  left: 8%;
  top: 60px;
  width: 92%;
  max-width: 520px;
}
.collage-photo .paper-in { padding: 12px; }
.collage-photo img {
  width: 100%;
  aspect-ratio: 13 / 9;
  object-fit: cover;
}

.collage-quote {
  position: absolute;
  left: 0;
  top: 400px;
  width: 330px;
}
.collage-quote .paper-in { padding: 26px 30px 28px; }
.collage-quote p {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
}

.hero-scroll {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  color: var(--text-light);
}
.hero-scroll svg {
  width: 28px; height: 28px;
  animation: bounce 2s infinite 3s;
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 0; }
  .hero-grid > .eyebrow, .hero-grid > h1, .hero-grid > .hero-text, .hero-grid > .hero-actions, .hero-grid > .collage { grid-column: 1; grid-row: auto; }
  .hero h1 { font-size: clamp(2.8rem, 12vw, 4.2rem); }
  .collage { min-height: 0; height: 340px; margin: 22px 0 6px; order: 2; }
  .hero-grid .eyebrow { order: 0; }
  .hero-grid h1 { order: 1; }
  .hero-grid .hero-text { order: 3; }
  .hero-grid .hero-actions { order: 4; }
  .collage-photo { left: 2%; top: 26px; width: 84%; }
  .collage-photo .paper-in { padding: 9px; }
  .collage-photo img { aspect-ratio: 3 / 2; }
  .collage-quote { left: auto; right: 0; top: 214px; width: 236px; }
  .collage-quote .paper-in { padding: 18px 22px 20px; }
  .collage-quote p { font-size: 1rem; }
  .hero-text { margin-top: 26px; font-size: 1rem; }
  .hero-scroll { display: none; }
}

/* ── Sectiekoppen ── */
.sec-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
}
.sec--navy .sec-title { color: #fff; }

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.sec-lead {
  margin-top: 18px;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 460px;
}
.sec--navy .sec-lead { color: rgba(255,255,255,0.8); }

/* ── Kaartenrij: artikelen uit het CMS, horizontaal scrollend ── */
.row-nav { display: flex; gap: 10px; padding-bottom: 8px; }

.arrow {
  position: relative;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255,255,255,0.6);
  clip-path: var(--tear-pill);
  transition: clip-path 0.45s var(--ease-out);
}
.arrow::before { content: ""; position: absolute; inset: 1px; background: var(--bg-accent); clip-path: var(--tear-pill); z-index: -1; transition: background 0.3s var(--ease-out), clip-path 0.45s var(--ease-out); }
.arrow svg { position: relative; }
.arrow:hover { color: #fff; clip-path: var(--tear-pill-hover); }
.arrow:hover::before { background: var(--bg-accent-hover); clip-path: var(--tear-pill-hover); }
.sec:not(.sec--navy) .arrow { color: var(--bg-accent); background: rgba(0,73,121,0.5); }
.sec:not(.sec--navy) .arrow::before { background: var(--bg-main); }
.sec:not(.sec--navy) .arrow:hover::before { background: var(--bg-noise-2); }

.row {
  display: flex;
  gap: 36px;
  align-items: flex-start;
  margin: 56px -25px 0;
  padding: 24px 25px 56px;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.row::-webkit-scrollbar { display: none; }
/* Rand van de rij: de kaarten vervagen naar de achtergrond. Masker op de wrapper, zodat alleen de
   kaarten vervagen; de lijntekeningen van het blok staan buiten de kaartenzone (zie ljk-motieven-navy). */
.row-wrap { position: relative; margin: 56px -25px 0; --fade-links: 0px; --fade-rechts: 170px; }
.row-wrap .row { margin: 0; }
.row-wrap {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-links), #000 calc(100% - var(--fade-rechts)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-links), #000 calc(100% - var(--fade-rechts)), transparent 100%);
}
.row-wrap.is-scrolled { --fade-links: 140px; }
.row-wrap.is-end { --fade-rechts: 0px; }
/* Op aanraakschermen schuift de rij met de vinger; met muis en toetsenbord via de pijlen
   (en een zijwaartse veeg op het trackpad, zie ljk.js). Zo blijft het verticale muiswiel vrij. */
@media (hover: none) and (pointer: coarse) {
  .row { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

.kaart {
  flex: 0 0 300px;
  display: block;
  color: var(--bg-accent);
}
.kaart:nth-child(4n+1) { --r: -2.5deg; }
.kaart:nth-child(4n+2) { --r: 1.5deg; margin-top: 44px; }
.kaart:nth-child(4n+3) { --r: -1deg; margin-top: 12px; }
.kaart:nth-child(4n+4) { --r: 2.5deg; margin-top: 56px; }
.kaart:nth-child(4n+2) .paper-in { clip-path: var(--paper-d); }
.kaart:nth-child(4n+3) .paper-in { clip-path: var(--paper-e); }
.kaart:nth-child(4n+4) .paper-in { clip-path: var(--paper-b); }

.kaart .paper-in { padding: 12px 12px 18px; }
.kaart img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.kaart h3 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  margin: 16px 6px 0;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bg-accent);
}
.kaart h3 svg { flex-shrink: 0; margin-bottom: 3px; }

@media (max-width: 768px) {
  .row { gap: 22px; padding: 16px 25px 40px; }
  .row-wrap { margin-top: 36px; }
  .row-wrap { --fade-rechts: 90px; }
  .row-wrap.is-scrolled { --fade-links: 70px; }
  .row-wrap.is-end { --fade-rechts: 0px; }
  .kaart { flex-basis: 230px; }
  .kaart:nth-child(4n+2) { margin-top: 22px; }
  .kaart:nth-child(4n+3) { margin-top: 6px; }
  .kaart:nth-child(4n+4) { margin-top: 28px; }
  .kaart .paper-in { padding: 8px 8px 12px; }
  .kaart h3 { font-size: 0.95rem; margin: 12px 4px 0; }
  .sec-head { align-items: flex-start; flex-direction: column; gap: 18px; }
}

/* ── Video's ── */
.video-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 70px;
  align-items: start;
}

.video-paper { --r: -1.5deg; grid-column: 1; grid-row: 1 / 3; }
.video-copy, .video-list-wrap { grid-column: 2; }
.video-paper .paper-in { padding: 12px; }

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-dark);
  overflow: hidden;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--bg-dark);
  color: #fff;
  text-align: left;
  overflow: hidden;
}
.video-facade img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.9;
  transition: transform 0.6s var(--ease-out);
}
.video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,73,121,0.55) 0%, rgba(11,47,74,0.85) 100%);
  mix-blend-mode: multiply;
}
.video-facade:hover img { transform: scale(1.04); }

.video-facade-nr {
  position: absolute;
  left: 32px; top: 28px;
  z-index: 2;
  color: rgba(255,255,255,0.65);
}
.video-facade-title {
  position: absolute;
  left: 32px; right: 32px; bottom: 30px;
  z-index: 2;
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

.video-facade .play-btn {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 2;
  width: 68px; height: 48px;
  margin: -24px 0 0 -34px;
  background: rgba(0, 73, 121, 0.92);
  clip-path: var(--tear-play);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  pointer-events: none;
}
.video-facade:hover .play-btn { background: var(--bg-accent-hover); transform: scale(1.08); clip-path: var(--tear-play-hover); }
.video-facade .play-btn { transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out), clip-path 0.45s var(--ease-out); }
.video-facade .play-btn svg { width: 22px; height: 22px; fill: #fff; margin-left: 2px; }

.video-list {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  border-top: 1px solid rgba(0,73,121,0.25);
}

.video-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,73,121,0.25);
  color: var(--text-light);
  transition: color 0.25s var(--ease-out);
}
.video-item .nr {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--meta);
}
.video-item .ttl {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
}
.video-item svg { fill: none; stroke: currentColor; stroke-width: 2; }
.video-item:hover { color: var(--bg-accent); }
.video-item.active { color: var(--bg-accent); }
.video-item.active .nr { color: var(--bg-accent); }
.video-item.active .ttl { font-weight: 600; }
.video-item.active svg { fill: currentColor; }

.video-more { margin-top: 22px; }

@media (max-width: 960px) {
  .video-grid { grid-template-columns: 1fr; gap: 36px; }
  .video-paper, .video-copy, .video-list-wrap { grid-column: 1; grid-row: auto; }
  .video-paper { order: 1; }
  .video-copy { order: 0; }
  .video-list-wrap { order: 2; }
  .video-facade-nr { left: 18px; top: 16px; font-size: 0.7rem; }
  .video-facade-title { left: 18px; right: 18px; bottom: 16px; }
  .video-facade .play-btn { width: 60px; height: 42px; margin: -21px 0 0 -30px; }
}

/* ── Contact ── */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 90px;
  align-items: start;
}

.contact-copy { padding-top: 30px; }
.contact-copy .sec-title { font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 1.02; }
.contact-copy .lead {
  margin-top: 26px;
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 440px;
}
.sec--navy .contact-copy .lead { color: rgba(255,255,255,0.8); }
.contact-copy .phone-label { margin-top: 26px; font-size: var(--text-sm); opacity: 0.7; }
.contact-copy .phone {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: inherit;
}
.section-contact--sand .contact-copy .phone { color: var(--bg-accent); }

.form-paper { --r: 1.2deg; }
.form-paper .paper-in { padding: 44px 48px 48px; }

.form-row-inline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 20px;
}
.form-row-inline--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.contact-form { display: flex; flex-direction: column; }

.contact-form input,
.contact-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(0,73,121,0.3);
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color 0.3s var(--ease-out);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(51,51,51,0.45); }
.contact-form input:focus,
.contact-form textarea:focus { border-bottom-color: var(--bg-accent); }
.contact-form textarea { min-height: 96px; resize: vertical; line-height: 1.6; }

.form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}
.char-counter { text-align: right; font-size: 0.8rem; color: var(--meta); margin-top: 4px; }

.form-feedback { margin-top: 16px; font-size: 0.95rem; line-height: 1.6; display: none; }
.form-feedback.ok { color: var(--bg-accent); }
.form-feedback.err { color: #a8323e; }

/* Zandvariant (subpagina's): navy papier met witte velden */
.section-contact--sand .form-paper .paper-in { background: rgba(0, 73, 121, 0.92); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.section-contact--sand .contact-form input,
.section-contact--sand .contact-form textarea { color: #fff; border-bottom-color: rgba(255,255,255,0.35); }
.section-contact--sand .contact-form input::placeholder,
.section-contact--sand .contact-form textarea::placeholder { color: rgba(255,255,255,0.5); }
.section-contact--sand .contact-form input:focus,
.section-contact--sand .contact-form textarea:focus { border-bottom-color: rgba(255,255,255,0.9); }
.section-contact--sand .char-counter { color: rgba(255,255,255,0.55); }
.section-contact--sand .form-feedback.ok { color: #fff; }
.section-contact--sand .form-feedback.err { color: #ffb3b8; }
.section-contact--sand :focus-visible { outline-color: #fff; }

@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; gap: 34px; }
  .contact-copy { padding-top: 0; }
  .form-paper .paper-in { padding: 30px 26px 32px; }
  .form-row-inline { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
  .form-foot { margin-top: 22px; }
}

/* ── Subpagina's: kop met papierstuk ── */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-main);
  padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px;
  align-items: center;
}
.page-hero-grid--single { grid-template-columns: 1fr; }

.page-hero h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--bg-accent);
  margin-top: 14px;
}

.page-hero-photo {
  --r: 2deg;
  width: 90%;
  max-width: 460px;
  margin-left: auto;
}
.page-hero-photo .paper-in { padding: 12px; }
.page-hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Kop zonder foto: de eerste alinea als navy papierstrook naast de titel */
.hero-lead { --r: 1.5deg; width: 90%; max-width: 440px; margin-left: auto; align-self: center; }
.hero-lead .paper-in { padding: 30px 34px 32px; }
.hero-lead p { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 500; line-height: 1.5; color: #fff; }
.article-content--kort { padding-bottom: 24px; }
.article-content--kort > p:first-of-type::first-letter { float: none; font-size: inherit; line-height: inherit; padding: 0; font-weight: inherit; color: inherit; }
.section-churches { padding-top: 16px; }
.notfound { padding-top: 8px; }

@media (max-width: 960px) {
  .page-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .page-hero h1 { font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .page-hero-photo { width: 78%; margin: 6px auto 0 0; }
  .hero-lead { width: 88%; margin: 10px 0 0; }
  .hero-lead .paper-in { padding: 22px 24px 24px; }
  .hero-lead p { font-size: 1.05rem; }
}

/* ── Artikeltekst ── */
.article-content {
  max-width: 72ch;
  margin: 0 auto;
  padding: 24px 25px 56px;
  position: relative;
}

.article-content h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  color: var(--text);
  margin: 2.2em 0 0.8em;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.article-content h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  color: var(--text);
  margin: 2em 0 0.7em;
  line-height: 1.3;
}

.article-content p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.9;
  margin-bottom: 1.3em;
}
.article-content > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-body);
  font-size: 3.4em;
  line-height: 1;
  padding: 0.05em 0.1em 0 0;
  font-weight: 700;
  color: var(--text);
}

.article-content a {
  color: var(--bg-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease-out);
}
.article-content a:hover { color: var(--bg-accent-hover); }

/* Citaten als navy papierstrook, net als de quote in de hero */
.article-content blockquote {
  position: relative;
  margin: 2em -12px;
  padding: 26px 30px 28px;
  background: var(--bg-accent);
  color: #fff;
  clip-path: var(--paper-c);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.55;
  font-style: normal;
  transform: rotate(-0.6deg);
}
.article-content blockquote p { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
.article-content blockquote + blockquote { transform: rotate(0.5deg); }

.article-content .bible-ref {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--bg-accent);
}

.article-content ul,
.article-content ol { margin: 0 0 1.3em 1.5rem; padding: 0; }
.article-content li { margin-bottom: 0.5em; line-height: 1.85; }
.article-content hr { border: none; border-top: 1px solid rgba(0,0,0,0.1); margin: 2.5em 0; }

@media (max-width: 768px) {
  .article-content { max-width: 100%; padding-bottom: 70px; }
  .article-content blockquote { margin: 1.8em 0; padding: 20px 22px 22px; font-size: 1rem; }
}

/* ── Kerken (leer met anderen) ── */
.churches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 34px 30px;
  margin-top: 8px;
}

.church-card { display: flex; flex-direction: column; }
.church-card:nth-child(4n+1) { --r: -1.5deg; }
.church-card:nth-child(4n+2) { --r: 1deg; }
.church-card:nth-child(4n+3) { --r: -0.6deg; }
.church-card:nth-child(4n+4) { --r: 1.6deg; }
.church-card:nth-child(4n+2) .paper-in { clip-path: var(--paper-b); }
.church-card:nth-child(4n+3) .paper-in { clip-path: var(--paper-d); }
.church-card:nth-child(4n+4) .paper-in { clip-path: var(--paper-e); }

.church-card .paper-in { padding: 28px 28px 26px; display: flex; flex-direction: column; height: 100%; }
.church-card__body { flex: 1; }

.church-card__name {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--bg-accent);
  margin: 0 0 4px;
  line-height: 1.3;
}

.church-card__city {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta);
  margin: 0 0 14px;
}

.church-card__address { font-size: 0.9rem; color: var(--text); margin: 0 0 10px; line-height: 1.5; }

.church-card__meta {
  font-size: 0.875rem;
  color: var(--text);
  margin: 0 0 6px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.church-card__meta--time::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  min-width: 14px;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23004979'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.church-card__description { font-size: 0.875rem; color: var(--meta); margin: 10px 0 0; line-height: 1.55; }

.church-card__link { margin-top: 22px; align-self: flex-start; min-height: 44px; padding: 0 24px; font-size: var(--text-2xs); }

/* Oudere inline lijst (blijft werken voor bestaande inhoud) */
.church-listing { margin: 2em 0; }
.church-item { padding: 24px 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.church-item:last-child { border-bottom: none; }
.church-item h3 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; color: var(--text-light); margin: 0 0 6px; }
.church-item p { margin: 0 0 4px; font-size: 0.95rem; }
.church-item a { color: var(--bg-accent); text-decoration: underline; text-underline-offset: 3px; font-size: 0.95rem; }

@media (max-width: 640px) {
  .churches-grid { grid-template-columns: 1fr; gap: 24px; }
  .church-card .paper-in { padding: 22px 22px 22px; }
}

/* ── Actiepagina en materiaal ── */
.collage-quote-ref { margin-top: 10px; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.sec-head--stack { flex-direction: column; align-items: flex-start; gap: 0; }
.video-single { max-width: 960px; margin: 0 auto; }
.video-single .video-paper { margin-top: 40px; --r: -1.2deg; }
.article-content--sec { padding: 0; max-width: 72ch; }
.article-content--sec .sec-title { margin-bottom: 0.6em; }

.personen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  justify-content: start;
  gap: 40px 34px;
  margin-top: 50px;
}
.persoon:nth-child(3n+1) { --r: -2deg; }
.persoon:nth-child(3n+2) { --r: 1.5deg; margin-top: 26px; }
.persoon:nth-child(3n+3) { --r: -1deg; margin-top: 8px; }
.persoon:nth-child(3n+2) .paper-in { clip-path: var(--paper-b); }
.persoon:nth-child(3n+3) .paper-in { clip-path: var(--paper-e); }
.persoon .paper-in { padding: 24px 22px 26px; text-align: center; color: var(--text); }
.persoon-foto {
  width: 150px; height: 150px;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 50%;
  filter: grayscale(1) contrast(1.05) sepia(0.15);
}
.persoon-foto--leeg {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-accent);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 3.2rem;
  font-weight: 700;
  filter: none;
}
.persoon h3 { margin-top: 18px; font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--bg-accent); }
.persoon-regio { margin-top: 4px; font-size: var(--text-sm); color: var(--meta); }
.persoon .btn-cta { margin-top: 18px; min-height: 44px; padding: 0 20px; font-size: var(--text-2xs); white-space: normal; text-align: center; }

.downloads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
  gap: 44px 34px;
  margin-top: 50px;
  align-items: start;
}
.download:nth-child(3n+1) { --r: -1.5deg; }
.download:nth-child(3n+2) { --r: 1.2deg; margin-top: 28px; }
.download:nth-child(3n+3) { --r: -0.8deg; margin-top: 10px; }
.download:nth-child(3n+2) .paper-in { clip-path: var(--paper-d); }
.download:nth-child(3n+3) .paper-in { clip-path: var(--paper-b); }
.download .paper-in { padding: 12px 12px 22px; color: var(--text); }
.download-preview { display: block; overflow: hidden; background: var(--bg-main); }
.download-preview img { width: 100%; height: auto; transition: transform 0.6s var(--ease-out); }
.download-preview:hover img { transform: scale(1.03); }
.download h3 { margin: 16px 8px 0; font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: var(--bg-accent); }
.download p { margin: 8px 8px 0; font-size: var(--text-sm); line-height: 1.6; }
.download-meta { font-family: var(--font-heading); font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); }
.download .btn-cta { margin: 16px 8px 0; min-height: 44px; padding: 0 22px; font-size: var(--text-2xs); }

.field-label { display: block; font-family: var(--font-heading); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); margin-top: 6px; }
.contact-form select {
  width: 100%;
  min-height: 48px;
  padding: 12px 28px 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(0,73,121,0.3);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23004979' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right center;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.contact-form select:focus { border-bottom-color: var(--bg-accent); }

.footer-links { margin-bottom: 14px; font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.04em; }
.footer-links a { color: var(--text-light); border-bottom: 1px solid rgba(0,0,0,0.18); transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out); }
.footer-links a:hover { color: var(--bg-accent); border-color: var(--bg-accent); }

@media (max-width: 768px) {
  .personen, .downloads { grid-template-columns: 1fr; gap: 26px; margin-top: 36px; }
  .persoon:nth-child(n), .download:nth-child(n) { margin-top: 0; }
}

/* ── Audiospeler bij artikelen ── */
.audio-paper { --r: -0.8deg; max-width: 72ch; margin: 8px auto 34px; }
.audio-paper .paper-in { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 10px; }
.audio-paper .audio-label { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bg-accent); }
.audio-paper audio { display: none; }
.audio-ui { display: flex; align-items: center; gap: 16px; }
.audio-play {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; cursor: pointer;
  background: var(--bg-accent); color: #fff;
  clip-path: var(--tear-pill);
  transition: background 0.3s var(--ease-out), clip-path 0.45s var(--ease-out);
}
.audio-play:hover { background: var(--bg-accent-hover); clip-path: var(--tear-pill-hover); }
.audio-play .ico-play { margin-left: 2px; }
.audio-play .ico-pause { display: none; }
.audio.is-playing .audio-play .ico-play { display: none; }
.audio.is-playing .audio-play .ico-pause { display: block; }
.audio-track { position: relative; flex: 1; height: 24px; cursor: pointer; outline: none; }
.audio-track::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; background: rgba(0,73,121,0.18); }
.audio-fill { position: absolute; left: 0; top: 10px; height: 4px; width: 0; background: var(--bg-accent); }
.audio-knob { position: absolute; top: 5px; left: 0; width: 14px; height: 14px; margin-left: -7px; background: var(--bg-accent); clip-path: var(--tear-pill); transition: transform 0.2s var(--ease-out); }
.audio-track:hover .audio-knob, .audio-track:focus-visible .audio-knob { transform: scale(1.3); }
.audio-track:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
.audio-time { flex-shrink: 0; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.04em; color: var(--text-light); font-variant-numeric: tabular-nums; }
.audio-sep { margin: 0 5px; opacity: 0.5; }
.audio-speed { flex-shrink: 0; min-width: 44px; height: 28px; padding: 0 8px; border: 0; cursor: pointer; background: rgba(0,73,121,0.14); color: var(--bg-accent); font-family: var(--font-heading); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.06em; clip-path: var(--tear-pill); transition: background 0.3s var(--ease-out); }
.audio-speed:hover { background: rgba(0,73,121,0.24); }
@media (max-width: 600px) {
  .audio-ui { flex-wrap: wrap; gap: 12px; }
  .audio-track { flex-basis: 100%; order: 3; }
}

/* ── Actiepagina: donker bovenin, geleidelijk licht naar beneden ── */
.thema-donker .hero { background: #071b2c; color: rgba(255,255,255,0.84); }
.thema-donker .hero .eyebrow { color: rgba(255,255,255,0.65); }
.thema-donker .hero h1 { color: #ffffff; }
.thema-donker .hero-text { color: rgba(255,255,255,0.84); }
.thema-donker .hero-text strong, .thema-donker .hero-text .dropcap { color: #ffffff; }
.thema-donker .hero .btn-cta { background: var(--bg-main); color: var(--bg-accent); }
.thema-donker .hero .btn-cta:hover { background: #ffffff; color: var(--bg-accent); }
.thema-donker .hero .link-arrow { color: var(--bg-main); border-bottom-color: rgba(255,255,255,0.4); }
.thema-donker .hero .link-arrow:hover { border-bottom-color: #ffffff; }
.thema-donker .hero .mo { opacity: calc(var(--o, 0.85) * 0.45); }
.thema-donker .hero .collage-quote .paper-in { background: rgba(244,236,227,0.94); color: var(--bg-accent); }
.thema-donker .hero .collage-quote p { color: var(--bg-accent); }
.thema-donker .hero .collage-quote-ref { color: rgba(0,73,121,0.7); }
.thema-donker .hero-scroll { color: rgba(255,255,255,0.6); }
.thema-donker .scroll-top-btn { background: var(--bg-main); color: var(--bg-accent); }
.sec--diep { background: var(--bg-dark); }
.sec--diep .mo { opacity: calc(var(--o, 0.85) * 0.55); }
.sec--dageraad { background: var(--bg-accent); }
.sec--dageraad .article-content { color: rgba(255,255,255,0.86); }
.sec--dageraad .article-content h2, .sec--dageraad .article-content h3, .sec--dageraad .article-content strong { color: #ffffff; }
.sec--dageraad .article-content a { color: var(--bg-main); }
.sec--dageraad .article-content a:hover { color: #ffffff; }
.sec--dageraad .article-content blockquote { background: var(--bg-noise-2); color: var(--bg-accent); }
.sec--dageraad .article-content > p:first-of-type::first-letter { color: #ffffff; }
.sec--ochtend { background: #2f6688; }
.sec--schemer { background: #cfd7dc; }
.sec--schemer .mo { opacity: calc(var(--o, 0.85) * 0.9); }
.pagina-donker .site-footer { background: var(--bg-noise-2); }

/* Donker menu op de actiepagina */
.pagina-donker .nav-primary { background-color: #071b2c; }
.pagina-donker .nav-primary.scrolled { background-color: rgba(7,27,44,0.88); box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 4px 24px rgba(0,0,0,0.3); }
.pagina-donker .nav-logo img { filter: brightness(0) invert(1); opacity: 0.92; }
.pagina-donker .nav-menu a { color: rgba(255,255,255,0.78); }
.pagina-donker .nav-menu a:hover, .pagina-donker .nav-menu a.active { color: #ffffff; }
.pagina-donker .nav-menu a::after { background: var(--bg-main); }
.pagina-donker .nav-menu .drop-menu { background: rgba(11,47,74,0.98); }
.pagina-donker .nav-menu .drop-menu a { color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.08); }
.pagina-donker .nav-menu .drop-menu a:hover { background: rgba(255,255,255,0.08); color: #ffffff; }
.pagina-donker .nav-cta .btn-cta { background: var(--bg-main); color: var(--bg-accent); }
.pagina-donker .nav-cta .btn-cta:hover { background: #ffffff; color: var(--bg-accent); }
.pagina-donker .nav-cta .lang-pill { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.45); }
.pagina-donker .nav-cta .lang-pill::before { background: #071b2c; }
.pagina-donker .nav-cta .lang-pill:hover { color: #ffffff; background: #ffffff; }
.pagina-donker .nav-cta .lang-pill:hover::before { background: #0b2f4a; }
.pagina-donker .nav-cta .social-icon { color: rgba(255,255,255,0.8); }
.pagina-donker .nav-cta .social-icon:hover { color: #ffffff; }
.pagina-donker .mobile-menu-btn span { background: #ffffff; }
.pagina-donker .mobile-menu-panel { background: #0b2f4a; }
.pagina-donker .mobile-menu-close { color: rgba(255,255,255,0.85); }
.pagina-donker .mobile-nav-links a { color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.08); }
.pagina-donker .mobile-nav-links a:hover { color: #ffffff; }
.pagina-donker .mobile-nav-links .mobile-sub { color: rgba(255,255,255,0.6); }
.pagina-donker .mobile-nav-cta .btn-cta { background: var(--bg-main); color: var(--bg-accent); }
.pagina-donker .pblur { display: none; }

/* ── 404 ── */
.notfound { text-align: center; padding: 0 25px 60px; }
.notfound p { font-size: 1.05rem; margin-bottom: 1.5em; }

/* ── Footer ── */
.site-footer {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-main);
  padding: 80px 25px 32px;
  text-align: center;
}

.footer-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }

.footer-logo { margin-bottom: 22px; }
.footer-logo img { height: 50px; width: auto; opacity: 0.65; margin: 0 auto; transition: opacity 0.25s var(--ease-out); }
.footer-logo img:hover { opacity: 1; }

.footer-text {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-light);
  opacity: 0.55;
  letter-spacing: 0.01em;
}
.footer-text a { color: var(--text-light); text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.25s var(--ease-out); }
.footer-text a:hover { opacity: 1; }

/* ── Naar boven ── */
.scroll-top-btn {
  position: fixed;
  bottom: 30px; right: 30px;
  width: 44px; height: 44px;
  background: var(--bg-accent);
  border: none;
  clip-path: var(--tear-pill);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 500;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), background 0.3s var(--ease-out);
}
.scroll-top-btn.visible { opacity: 1; transform: translateY(0); }
.scroll-top-btn:hover { background: var(--bg-accent-hover); transform: translateY(-3px); }
.scroll-top-btn svg { width: 18px; height: 18px; }

/* ── Animaties ── */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(8px); }
  60% { transform: translateY(4px); }
}

.anim-fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.anim-fade-up.visible { opacity: 1; transform: translateY(0); }

.anim-fade-down {
  opacity: 0;
  transform: translateY(-28px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.anim-fade-down.visible { opacity: 1; transform: translateY(0); }

.anim-fade { opacity: 0; transition: opacity 0.9s var(--ease-out); }
.anim-fade.visible { opacity: 1; }

.anim-zoom {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.anim-zoom.visible { opacity: 1; transform: scale(1); }

.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }
.delay-4 { transition-delay: 0.32s; }
.delay-5 { transition-delay: 0.40s; }

[data-parallax] { will-change: transform; }

/* Op kleine schermen minder motieven per blok */
@media (max-width: 768px) {
  .bg .mo:nth-child(n+5) { display: none; }
  .mo { width: calc(var(--w, 140px) * 0.7); }
}

/* ── Skip link ── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--bg-accent);
  color: #fff;
  padding: 8px 16px;
  z-index: 10000;
  font-size: 14px;
}
.skip-link:focus { top: 0; }

/* ── Toegankelijkheid ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rv, .paper.rv, .wd .w i, .anim-fade-up, .anim-fade-down, .anim-fade, .anim-zoom, html.js .wd:not(.split) {
    opacity: 1;
    transform: none;
  }
  .paper.rv { transform: rotate(var(--r, 0deg)); }
  .pblur { display: none; }
}