/* ═══════════════════════════════════════════════════════════
     TOKENS
  ═══════════════════════════════════════════════════════════ */
  :root {
    --creme:      #EEE4DA;  /* lichte crème – kaarten, lichte secties */
    --sand:       #D8C4AC;  /* sand – borders, subtiele achtergronden */
    --dusty:      #C8A49F;  /* dusty pink – accenten */
    --burg:       #4D0E13;  /* burgundy – hoofdaccent */
    --burg-dk:    #380A0D;  /* donker burgundy – hover states */
    --white:      #FFFFFF;
    --off:        #FFFFFF;  /* wit – gebruiker wil frisse witte achtergrond */
    --border:     #E2D8CF;
    --text:       #1C1816;
    --muted:      #6B6360;
    --subtle:     #9A9390;
    /* backwards compat aliases */
    --cream:      #EEE4DA;
    --cream-d:    #D8C4AC;
    --bord:       #4D0E13;
    --bord-dk:    #380A0D;
    --blush-pale: #EEE4DA;
    --font-h: 'Cormorant Garamond', Georgia, serif;
    --font-b: 'Inter', -apple-system, sans-serif;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* ═══════════════════════════════════════════════════════════
     RESET & BASE
  ═══════════════════════════════════════════════════════════ */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; font-size: 16px; }
  body { font-family: var(--font-b); background: var(--white); color: var(--text);
         line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  html { overflow-x: hidden; }  /* dubbele bescherming tegen horizontale scroll */
  a { text-decoration: none; color: inherit; }
  img { display: block; max-width: 100%; }
  button { font-family: inherit; cursor: pointer; }

  /* ═══════════════════════════════════════════════════════════
     TYPOGRAPHY
  ═══════════════════════════════════════════════════════════ */
  h1, h2, h3, h4 { font-family: var(--font-h); font-weight: 400; line-height: 1.15; color: var(--text); }
  h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); letter-spacing: -.01em; }
  h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); }
  h4 { font-size: 1.1rem; }
  p  { font-size: 0.97rem; color: var(--muted); line-height: 1.9; }
  em { font-style: italic; }

  .eyebrow {
    display: inline-block; font-family: var(--font-b);
    font-size: 0.6rem; font-weight: 500; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--subtle); margin-bottom: 14px;
  }
  .eyebrow-bord { color: rgba(255,255,255,.5); }

  /* ═══════════════════════════════════════════════════════════
     LAYOUT
  ═══════════════════════════════════════════════════════════ */
  .wrap    { max-width: 1100px; margin: 0 auto; padding: 0 48px; }
  .wrap-sm { max-width: 800px;  margin: 0 auto; padding: 0 48px; }
  .wrap-xs { max-width: 560px;  margin: 0 auto; padding: 0 40px; }

  section { scroll-margin-top: 90px; }

  /* ═══════════════════════════════════════════════════════════
     FADE-UP ANIMATION
  ═══════════════════════════════════════════════════════════ */
  .fu { opacity: 0; transform: translateY(24px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
  .fu.vis { opacity: 1; transform: none; }
  .d1 { transition-delay: .12s; }
  .d2 { transition-delay: .24s; }
  .d3 { transition-delay: .36s; }

  /* ═══════════════════════════════════════════════════════════
     BUTTONS
  ═══════════════════════════════════════════════════════════ */
  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-b); font-size: 0.68rem; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase;
    padding: 15px 34px; border-radius: 0;
    transition: all .3s var(--ease); border: none; cursor: pointer;
  }
  .btn-bord   { background: var(--bord);  color: var(--white); }
  .btn-bord:hover  { background: var(--bord-dk); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(107,45,62,.22); }
  .btn-out    { background: transparent; color: var(--text); border: 1px solid var(--text); }
  .btn-out:hover   { background: var(--text); color: var(--white); }
  .btn-out-w  { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.5); }
  .btn-out-w:hover { border-color: var(--white); background: rgba(255,255,255,.08); }
  .btn-ghost-bord  { background: transparent; color: var(--bord); border: 1px solid var(--bord); }
  .btn-ghost-bord:hover { background: var(--bord); color: var(--white); }
  .btn-hero-creme  { background: var(--creme); color: var(--bord); border: none; border-radius: 4px;
    font-size: 0.62rem; letter-spacing: 0.18em; }
  .btn-hero-creme:hover { background: var(--white); transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0,0,0,.18); }

  /* ═══════════════════════════════════════════════════════════
     STICKY NAVIGATION — slim & airy, Youneited-stijl
  ═══════════════════════════════════════════════════════════ */
  #nav {
    position: sticky; top: 0; z-index: 200;
    height: 80px; background: rgba(255,255,255,.98);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(216,196,172,.35);
    display: flex; align-items: center;
  }
  .nav-inner {
    max-width: 1200px; margin: 0 auto; width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 52px;
  }
  .nav-brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; flex-shrink: 0;
  }
  .nav-brand-name {
    font-family: var(--font-h); font-size: 1.15rem; color: var(--muted);
    letter-spacing: 0.08em; font-weight: 400;
  }
  .nav-links {
    display: flex; align-items: center; gap: 30px; list-style: none;
  }
  .nav-links a {
    font-family: var(--font-b); font-size: 0.64rem; font-weight: 400;
    letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--muted); transition: color .22s;
    white-space: nowrap;
  }
  .nav-links a:hover,
  .nav-links a.active { color: var(--bord); }

  /* Hamburger (mobile only) */
  .nav-ham {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: none; padding: 4px; cursor: pointer;
  }
  .nav-ham span { display: block; width: 24px; height: 1px; background: var(--text); transition: .3s; }

  /* Mobile menu overlay */
  .mob-menu {
    display: none; position: fixed; inset: 0; z-index: 300;
    background: var(--white); flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
  }
  .mob-menu.open { display: flex; }
  .mob-menu-top {
    position: absolute; top: 0; left: 0; right: 0; height: 80px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 32px;
  }
  .mob-menu-brand { font-family: var(--font-h); font-size: 1.2rem; letter-spacing: .06em; }
  .mob-close { background: none; border: none; font-size: 1.3rem; color: var(--text); cursor: pointer; line-height: 1; }
  .mob-link {
    font-family: var(--font-h); font-size: 1.9rem; font-weight: 300;
    color: var(--text); text-decoration: none; padding: 7px 0;
    transition: color .2s; letter-spacing: 0.02em;
  }
  .mob-link:hover { color: var(--bord); }
  .mob-cta { margin-top: 32px; }

  /* ═══════════════════════════════════════════════════════════
     FLOATING CTA BUTTON
  ═══════════════════════════════════════════════════════════ */
  .float-cta {
    position: fixed;
    bottom: 36px;
    right: 36px;
    z-index: 150;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--bord);
    color: var(--white);
    font-family: var(--font-b);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    padding: 15px 28px;
    border-radius: 40px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(77,14,19,.22);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity .45s var(--ease), transform .45s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  }
  .float-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .float-cta:hover {
    background: var(--bord-dk);
    box-shadow: 0 8px 32px rgba(77,14,19,.30);
    transform: translateY(-2px);
  }
  .float-cta.is-visible:hover { transform: translateY(-2px); }
  .float-cta:focus-visible {
    outline: 2px solid var(--dusty);
    outline-offset: 3px;
  }
  .float-cta-arrow {
    display: inline-block;
    font-size: 0.75rem;
    line-height: 1;
    transition: transform .25s var(--ease);
  }
  .float-cta:hover .float-cta-arrow { transform: translateX(3px); }
  @media (max-width: 900px) {
    .float-cta {
      bottom: 24px;
      right: 20px;
      font-size: 0.58rem;
      padding: 13px 22px;
    }
  }

  /* ═══════════════════════════════════════════════════════════
     HERO — GECENTREERD MERKINTRODUCTIE
  ═══════════════════════════════════════════════════════════ */
  #hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 75vh;
    min-height: 480px;
    max-height: 760px;
    background: var(--bord);
    background-image: none;
    text-align: center;
    padding: 60px 40px;
  }

  .hero-brand {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0;
    background: none;
    padding: 0;
  }
  .hero-brand-logo-mark { margin-bottom: 32px; }
  .hero-brand-name {
    font-family: var(--font-h);
    font-size: clamp(3rem, 6vw, 6.5rem);
    color: var(--white); letter-spacing: 0.06em; font-weight: 400;
    line-height: 1.0; margin-bottom: 20px;
  }
  .hero-brand-rule {
    width: 36px; height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.5) 30%, rgba(255,255,255,.5) 70%, transparent);
    margin: 0 auto 20px;
  }
  .hero-brand-sub {
    font-family: var(--font-b); font-size: 0.6rem; font-weight: 400;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: rgba(255,255,255,.85); white-space: nowrap;
    margin-bottom: 44px;
  }

  /* Crème CTA knop */
  .btn-hero-creme {
    background: #EEE4DA; color: #4C0F16;
    border: none; border-radius: 40px;
    font-family: var(--font-b); font-size: 0.62rem;
    font-weight: 500; letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 16px 36px;
    display: inline-flex; align-items: center; gap: 12px;
    transition: background .28s, transform .28s, box-shadow .28s;
    cursor: pointer; text-decoration: none;
  }
  .btn-hero-creme:hover {
    background: #F8F2EC;
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(0,0,0,.22);
  }

  /* Rechterhelft niet meer nodig */
  .hero-photo { display: none; }
  .hero-btns { display: flex; justify-content: center; }

  /* ═══════════════════════════════════════════════════════════
     SFEERSTROKEN (visual breaks — JS parallax)
  ═══════════════════════════════════════════════════════════ */
  .sfeer {
    height: 220px; width: 100%;
    position: relative;
    overflow: hidden;
  }

  /* Achtergrond via pseudo-element zodat JS translateY werkt */
  .sfeer::before {
    content: '';
    position: absolute;
    top: -30%; left: 0; right: 0;
    height: 160%;
    background-size: cover;
    background-position: center;
    will-change: transform;
    transform: translateY(var(--sfeer-y, 0px));
  }

  /* Subtle dark vignette voor diepte en leesbaarheid */
  .sfeer::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(28,24,22,.08) 0%,
      rgba(28,24,22,.04) 50%,
      rgba(28,24,22,.08) 100%
    );
    pointer-events: none;
    z-index: 1;
  }

  /* Afbeeldingen — luxe editorial/botanisch, geen mensen */
  .sfeer-1::before {
    background-image: url('https://images.unsplash.com/photo-1597900121060-a0f1f8e882c8?w=1800&q=85');
    background-position: center 45%;
  }
  .sfeer-2::before {
    background-image: url('https://images.unsplash.com/photo-1462275646964-a0e3386b89fa?w=1800&q=85');
    background-position: center 50%;
  }
  .sfeer-3::before {
    background-image: url('/assets/images/sfeer-3.jpg');
    background-position: center 35%;
  }

  /* ─── Mobiel: kleinere hoogte ─── */

  /* ═══════════════════════════════════════════════════════════
     EDITORIAL PARALLAX — grote quote-sectie (Youneited-stijl)
  ═══════════════════════════════════════════════════════════ */
  .editorial-parallax {
    position: relative;
    height: 57vh;         /* 30% kleiner dan origineel 81vh */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #b8a8c0; /* dominante fotokleur als fallback */
  }

  /* Het achtergrondvlak — groter dan container zodat het kan bewegen */
  .ep-bg {
    position: absolute;
    top: -40%;
    left: 0; right: 0;
    height: 180%;
    background: url('https://images.unsplash.com/photo-1465146344425-f00d5f5c8f07?w=2000&q=88')
                center 65% / cover no-repeat;
    will-change: transform;
    transform: translateY(0);
  }

  /* Zachte donkere overlay voor leesbaarheid */
  .ep-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(28,24,22,.32) 0%,
      rgba(28,24,22,.62) 50%,
      rgba(28,24,22,.32) 100%
    );
    pointer-events: none;
  }

  /* Quoteblok — veel ademruimte */
  .ep-content {
    position: relative; z-index: 2;
    text-align: center;
    padding: 0 clamp(32px, 10vw, 160px);
    max-width: 960px;
  }
  .ep-rule {
    display: block;
    width: 40px; height: 1px;
    background: rgba(255,255,255,.45);
    margin: 0 auto 44px;
  }
  .ep-quote {
    font-family: var(--font-h);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.85rem, 3.4vw, 4rem);
    color: var(--white);
    line-height: 1.5;
    letter-spacing: -0.01em;
    quotes: none;
  }
  .ep-rule-b {
    display: block;
    width: 40px; height: 1px;
    background: rgba(255,255,255,.45);
    margin: 44px auto 0;
  }

  @media (max-width: 900px) {
    .editorial-parallax { height: 49vh; }
    .ep-bg { top: -40%; height: 180%; }
    .ep-content { padding: 0 32px; }
  }

  /* ═══════════════════════════════════════════════════════════
     SECTIE 1: WAT IS NEI
  ═══════════════════════════════════════════════════════════ */
  #wat-is-nei {
    padding: 120px 0; background: var(--white); text-align: center;
  }
  #wat-is-nei h2 { margin-bottom: 36px; }
  #wat-is-nei p  { max-width: 780px; margin: 0 auto 20px; text-align: left; }
  #wat-is-nei p:last-child { margin-bottom: 0; }

  /* ═══════════════════════════════════════════════════════════
     SECTIE 2: HOE WERKT NEI
  ═══════════════════════════════════════════════════════════ */
  #hoe-werkt-nei { padding: 120px 0; background: var(--creme); }
  .hw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .hw-text h2 { margin-bottom: 32px; }
  .hw-text p  { margin-bottom: 18px; }
  .hw-text p:last-child { margin-bottom: 0; }
  .hw-image {
    overflow: hidden; height: 640px;
    border-radius: 260px 260px 20px 20px;
    background: var(--creme); /* fallback */
  }
  .hw-image img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    display: block;
    transform: scaleX(-1); /* spiegelen zodat dame naar tekst kijkt */
  }

  /* ═══════════════════════════════════════════════════════════
     SECTIE 3: WAAROM NEI — 3 voordeel cards
  ═══════════════════════════════════════════════════════════ */
  #voordelen { padding: 120px 0; background: var(--white); text-align: center; }
  #voordelen h2 { margin-bottom: 16px; }
  #voordelen > .wrap > p { max-width: 680px; margin: 0 auto 72px; }
  .benefit-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
  .benefit-card {
    padding: 52px 36px; background: var(--creme);
    text-align: center; transition: box-shadow .3s;
  }
  .benefit-card:hover { box-shadow: 0 8px 32px rgba(107,45,62,.1); }
  .benefit-icon { margin: 0 auto 28px; }
  .benefit-card h3 { margin-bottom: 14px; font-size: 1.4rem; }
  .benefit-card p  { font-size: 0.9rem; }

  /* ═══════════════════════════════════════════════════════════
     SECTIE 4: VOOR WIE — zigzag editorial layout
  ═══════════════════════════════════════════════════════════ */

  /* Sectie 1: introductie — wit */
  #voor-wie-intro {
    padding: 120px 0 80px;
    background: var(--white);
  }
  .vw-intro-inner { max-width: 640px; }
  .vw-intro-inner h2 { margin-bottom: 24px; }
  .vw-intro-inner p {
    font-size: 0.97rem; line-height: 1.9; color: var(--muted); margin-bottom: 14px;
  }

  /* Sectie 2: volwassenen — crème, tekst links + beeld rechts */
  #voor-wie-volwassenen {
    padding: 100px 0;
    background: var(--creme);
  }

  /* Sectie 3: kinderen — wit, beeld links + tekst rechts */
  #voor-wie-kinderen {
    padding: 100px 0;
    background: var(--white);
  }

  /* Generiek split grid */
  .vw-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }

  /* Groot boogvorm beeld — exact zelfde vorm als hoe-werkt-nei */
  .vw-arch-sm {
    overflow: hidden;
    height: 640px;
    border-radius: 260px 260px 20px 20px;
    background: var(--sand);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .vw-arch-sm img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    display: block;
  }

  .vw-block-text h3 {
    font-family: var(--font-h);
    font-size: clamp(1.6rem, 2.4vw, 2.4rem);
    font-weight: 400; color: var(--text);
    margin-bottom: 20px; line-height: 1.2;
  }
  .vw-block-text h3 em { font-style: italic; }
  .vw-block-text > p {
    font-size: 0.95rem; color: var(--muted);
    line-height: 1.9; margin-bottom: 20px;
  }

  /* Bulletlijst */
  .vw-list { list-style: none; }
  .vw-list li {
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 0.9rem; color: var(--muted);
    padding: 5px 0; line-height: 1.6;
  }
  .vw-check {
    color: var(--dusty); flex-shrink: 0;
    font-size: 0.72rem; margin-top: 4px; line-height: 1;
  }

  /* Noot onderaan kinderen */
  .vw-note {
    margin-top: 28px;
    padding-left: 16px;
    border-left: 2px solid var(--border);
    font-size: 0.88rem; color: var(--subtle);
    line-height: 1.8; font-style: italic;
  }

  /* Placeholder styling */
  .vw-placeholder { text-align: center; padding: 40px 32px; }
  .vw-placeholder-label {
    font-family: var(--font-b); font-size: 0.58rem; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--subtle); display: block; margin-bottom: 12px;
  }
  .vw-placeholder-desc {
    font-family: var(--font-h); font-style: italic; font-size: 0.95rem;
    color: var(--sand); line-height: 1.7;
  }
  .vw-placeholder-rule {
    width: 32px; height: 1px; background: var(--sand); margin: 14px auto 0;
  }

  /* ═══════════════════════════════════════════════════════════
     SECTIE 5: AANBOD — verfijnd herontwerp
  ═══════════════════════════════════════════════════════════ */
  #tarieven { padding: 120px 0; background: var(--white); }

  /* ═══════════════════════════════════════════════════════════
     SECTIE 5: TARIEVEN — referentie stijl
  ═══════════════════════════════════════════════════════════ */
  #tarieven { padding: 120px 0; background: var(--white); }

  .ab-head { text-align: center; margin-bottom: 64px; }
  .ab-eyebrow {
    font-family: var(--font-b); font-size: 0.58rem; font-weight: 500;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--dusty); display: block; margin-bottom: 14px;
  }
  .ab-head h2 { margin-bottom: 8px; font-size: clamp(2rem, 4vw, 3.2rem); }
  .ab-head > p { max-width: 520px; margin: 0 auto; font-size: 0.97rem; line-height: 1.9; color: var(--muted); }

  /* Twee kaarten naast elkaar */
  .ab-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
  }

  .ab-card {
    display: flex; flex-direction: column;
    padding: 44px 44px 40px;
    background: var(--creme);
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none; color: inherit;
    transition: box-shadow .3s var(--ease);
  }
  .ab-card:hover {
    box-shadow: 0 8px 32px rgba(77,14,19,.08);
  }

  /* Botanisch icoon bovenaan */
  .ab-icon-wrap { margin-bottom: 28px; }

  .ab-card h3 {
    font-family: var(--font-h); font-size: clamp(1.4rem, 1.8vw, 1.9rem);
    font-weight: 400; color: var(--text);
    margin-bottom: 18px; line-height: 1.2;
  }

  .ab-desc {
    font-size: 0.88rem; color: var(--muted);
    line-height: 1.85; flex: 1;
  }
  .ab-desc p + p { margin-top: 14px; }

  /* Meta-regel met computer icoon */
  .ab-meta-row {
    display: flex; align-items: center; gap: 10px;
    margin-top: 28px; padding-top: 24px;
    border-top: 1px solid var(--border);
    font-family: var(--font-b); font-size: 0.7rem;
    color: var(--muted); letter-spacing: 0.04em;
  }
  .ab-meta-row svg { flex-shrink: 0; opacity: 0.5; }

  /* Prijs — kleiner en subtieler dan voorheen */
  .ab-price-block { margin-top: 24px; }
  .ab-price {
    font-family: var(--font-h); font-size: 1.55rem;
    color: var(--muted); font-weight: 400; line-height: 1;
    margin-bottom: 10px;
  }

  /* Tekstlink CTA */
  .ab-cta-link {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-b); font-size: 0.72rem; font-weight: 400;
    letter-spacing: 0.08em; color: var(--burg);
    text-decoration: none;
    transition: gap .2s var(--ease);
  }
  .ab-cta-link:hover { gap: 11px; }

  /* Twijfel sectie */
  .ab-twijfel {
    margin-top: 80px; text-align: center;
  }
  .ab-twijfel-inner { max-width: 540px; margin: 0 auto; }
  .ab-twijfel-divider {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 40px;
  }
  .ab-twijfel-divider-line {
    flex: 1; height: 1px; background: var(--border);
  }
  .ab-twijfel h3 {
    font-family: var(--font-h); font-style: italic; font-weight: 400;
    font-size: clamp(1.2rem, 1.8vw, 1.55rem); margin-bottom: 14px;
    color: var(--text); line-height: 1.3;
  }
  .ab-twijfel p {
    font-size: 0.9rem; color: var(--muted); line-height: 1.85;
  }

  /* ═══════════════════════════════════════════════════════════
     SECTIE 6: OVER MIJ
  ═══════════════════════════════════════════════════════════ */
  #over-mij { padding: 120px 0 130px; background: var(--creme); }
  /* Editorial layout: gecentreerde kop met kleine foto, tekst als focus */
  .over-editorial { max-width: 920px; margin: 0 auto; }
  .over-head { text-align: center; margin-bottom: 56px; }
  .over-portrait {
    width: 180px; height: 240px;
    border-radius: 90px 90px 0 0;
    overflow: hidden; margin: 0 auto 32px;
    background: var(--sand);
  }
  .over-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  .over-head h2 { margin-bottom: 0; }
  /* Openingsalinea als rustige intro */
  .over-lead p {
    font-family: var(--font-h); font-style: italic; font-weight: 300;
    font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.95;
    color: var(--text); max-width: 640px; margin: 0 auto; text-align: center;
  }
  /* Doorlopend verhaal over twee kolommen */
  .over-story {
    column-count: 2; column-gap: 80px;
    margin-top: 72px;
  }
  .over-story p { margin-bottom: 22px; }
  .over-story p:last-child { margin-bottom: 0; }

  /* ═══════════════════════════════════════════════════════════
     SECTIE 7: FAQ
  ═══════════════════════════════════════════════════════════ */
  #faq { padding: 100px 0 80px; background: var(--white); }
  .faq-head { text-align: center; margin-bottom: 72px; }
  .faq-head h2 { margin-bottom: 14px; }

  .faq-list { /* alle vragen doorlopend zonder koppen */ }

  .faq-item { border-bottom: 1px solid var(--border); }
  .faq-q {
    width: 100%; background: none; border: none;
    padding: 20px 0; display: flex; justify-content: space-between;
    align-items: center; gap: 16px;
    font-family: var(--font-h); font-size: 1.05rem; font-weight: 400;
    color: var(--text); cursor: pointer; text-align: left;
    transition: color .25s;
  }
  .faq-q:hover { color: var(--bord); }
  .faq-icon { font-size: 0.72rem; color: var(--bord); transition: transform .3s; flex-shrink: 0; }
  .faq-item.open .faq-icon { transform: rotate(180deg); }
  .faq-item.open .faq-q { color: var(--bord); }
  .faq-a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
  .faq-item.open .faq-a { max-height: 400px; }
  .faq-a-in { padding: 4px 0 22px; font-size: 0.93rem; color: var(--muted); line-height: 1.85; max-width: 680px; }

  /* ═══════════════════════════════════════════════════════════
     SECTIE 8: CONTACT — 50/50 compact split
  ═══════════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════════
     SECTIE 8: CONTACT — DESKTOP (> 900px)
     Vaste hoogte op de wrapper zodat de afbeelding zich aanpast
     aan de content, niet andersom.
  ══════════════════════════════════════════════════════════ */
  #contact { padding: 0; background: transparent; }

  .cr-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Vaste hoogte bepaalt het kader; afbeelding vult absoluut */
    height: 480px;
  }

  /* LEFT: afbeelding vult grid-cel via absolute positionering */
  .cr-left {
    position: relative;
    overflow: hidden;
  }
  .cr-left img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .cr-left::after { display: none; }

  /* RIGHT: content verticaal gecentreerd, ruime maar compacte padding */
  .cr-right {
    background: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 72px;
    overflow: hidden;
  }
  .cr-right .eyebrow { margin-bottom: 10px; }
  .cr-right h2 { font-size: clamp(1.6rem, 2.2vw, 2.2rem); margin-bottom: 18px; }
  .cr-right > p { font-size: 0.92rem; color: var(--muted); max-width: 400px; margin-bottom: 28px; line-height: 1.8; }
  .cr-details { margin-bottom: 28px; }
  .cr-detail { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; }
  .cr-label { font-size: 0.58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bord); min-width: 76px; flex-shrink: 0; }
  .cr-val { font-size: 0.92rem; color: var(--text); text-decoration: none; transition: color .2s; }
  .cr-val:hover { color: var(--bord); }

  /* ═══════════════════════════════════════════════════════════
     FOOTER — DRIEKOLOMS HORIZONTALE BAR
  ═══════════════════════════════════════════════════════════ */
  #footer {
    background: var(--bord-dk);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 18px 0;
    margin-top: 0;
  }
  .footer-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 64px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .footer-top {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
  }
  .footer-brand-top {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  }
  .footer-logo-name {
    font-family: var(--font-h); font-size: 0.95rem; color: var(--white);
    letter-spacing: 0.08em;
  }
  .footer-divider-v {
    width: 1px; height: 14px;
    background: rgba(255,255,255,.2);
    flex-shrink: 0;
  }
  .footer-nav {
    display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap;
    flex-shrink: 0;
  }
  .footer-nav a {
    font-size: 0.58rem; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.65); text-decoration: none;
    transition: color .2s; white-space: nowrap;
  }
  .footer-nav a:hover { color: var(--white); }
  .footer-copy {
    font-size: 0.55rem; letter-spacing: .05em;
    color: rgba(255,255,255,.30);
    text-align: left;
    padding-top: 4px;
  }
  /* Sub-elementen die niet meer gebruikt worden */
  .footer-brand, .footer-sub { display: none; }

  /* CTA-knop in footer */
  .footer-cta {
    display: inline-flex; align-items: center; justify-content: flex-end;
    background: var(--burg); color: var(--white);
    font-family: var(--font-b); font-size: 0.58rem; font-weight: 500;
    letter-spacing: 0.15em; text-transform: uppercase;
    padding: 13px 26px; border-radius: 40px;
    text-decoration: none; white-space: nowrap;
    transition: background .3s;
    flex-shrink: 0;
    margin-left: auto;
  }
  .footer-cta:hover { background: var(--burg-dk); }

  /* ═══════════════════════════════════════════════════════════
     SUCCESS STATE
  ═══════════════════════════════════════════════════════════ */
  #contactSuccess {
    display: none; text-align: center; padding: 60px 24px;
  }

  /* ═══════════════════════════════════════════════════════════
     RESPONSIVE
  ═══════════════════════════════════════════════════════════ */
  @media (max-width: 900px) {
    .nav-links { display: none; }
    .nav-ham { display: flex !important; }
    .mob-menu-top { padding: 0 24px; }
    .wrap, .wrap-sm, .wrap-xs { padding: 0 24px; }
    .nav-inner { padding: 0 24px; }

    /* Logo verkleind op mobiel */
    .nav-brand img { height: 20px; }
    .nav-brand-name { font-size: 0.9rem; }

    #hero { height: auto; min-height: 70vh; padding: 60px 32px; }
    .hero-brand-name { font-size: 3rem; }
    .hero-brand-sub { white-space: normal; letter-spacing: 0.2em; }

    .hw-grid    { grid-template-columns: 1fr; }
    /* Hoe werkt NEI afbeelding — originele grootte hersteld */
    .hw-image   { height: 420px; border-radius: 200px 200px 12px 12px; display: block; }
    .benefit-grid  { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
    .vw-grid    { grid-template-columns: 1fr; }
    .aanbod-grid{ grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
    #over-mij { padding: 90px 0 100px; }
    .over-head { margin-bottom: 44px; }
    .over-portrait { width: 150px; height: 200px; border-radius: 75px 75px 0 0; margin-bottom: 26px; }
    .over-story { column-count: 1; margin-top: 52px; }

    /* ── CONTACT MOBIEL — eigen layout, losgekoppeld van desktop ── */
    .cr-wrap    { grid-template-columns: 1fr; height: auto; }
    /* Afbeelding: vaste hoogte, static flow (niet absoluut op mobiel) */
    .cr-left    { position: static; height: 220px; }
    .cr-left img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
    /* Content: meer ademruimte dan desktop padding in pixels */
    .cr-right   { padding: 44px 28px 48px; }
    .cr-right .eyebrow { margin-bottom: 10px; }
    .cr-right h2 { margin-bottom: 16px; }
    .cr-right > p { margin-bottom: 24px; }
    .cr-details  { margin-bottom: 28px; }
    .cr-detail   { margin-bottom: 14px; }

    .sfeer { height: 160px; }
    .footer-inner { padding: 0 24px; gap: 10px; }
    .footer-top { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
    .footer-brand-top { flex-shrink: 0; }
    .footer-divider-v { display: block; width: 1px; height: 14px; background: rgba(255,255,255,.2); flex-shrink: 0; }
    .footer-nav { display: flex; gap: 16px; }
    .footer-cta { margin-left: auto; }
    .footer-copy { text-align: left; width: 100%; }

    .vw-split { grid-template-columns: 1fr; gap: 48px; }
    /* Beide arch-beelden exact gelijke hoogte en vorm als hw-image */
    .vw-arch-sm { height: 420px; border-radius: 200px 200px 12px 12px; }
    /* Kinderen: tekst eerst, beeld daarna op mobiel */
    #voor-wie-kinderen .vw-split { display: flex; flex-direction: column; }
    #voor-wie-kinderen .vw-block-text { order: 1; }
    #voor-wie-kinderen .vw-split-img  { order: 2; width: 100%; }
    .vw-quote-bar { padding: 44px 32px; flex-direction: column; gap: 24px; }
    .vw-quote-bar-leaf { display: none; }
    .ab-grid { grid-template-columns: 1fr; gap: 20px; }
    .ab-price-row { flex-direction: column; align-items: flex-start; gap: 16px; }

    /* Pricing cards — balanced, self-contained layout on mobile */
    #tarieven { padding: 90px 0 150px; }
    .ab-card { padding: 36px 28px 32px; }
    .ab-price-block { margin-top: 26px; }
    .ab-cta-link {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 22px;
      padding: 15px 20px;
      background: var(--bord);
      color: var(--white);
      border-radius: 40px;
      font-size: 0.68rem;
      letter-spacing: 0.1em;
      transition: background .25s var(--ease), gap .2s var(--ease);
    }
    .ab-cta-link:hover { gap: 9px; background: var(--bord-dk); }

    section { scroll-margin-top: 80px; }
  }

  @media (min-width: 901px) {
    .nav-ham { display: none !important; }
  }

  /* LANGUAGE SWITCHER */
  .lang-switch { display: flex; align-items: center; gap: 6px; margin-left: 24px; flex-shrink: 0; }
  .lang-switch a {
    font-family: var(--font-b); font-size: 0.64rem; font-weight: 400;
    letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--muted); transition: color .22s;
  }
  .lang-switch a:hover { color: var(--bord); }
  .lang-switch a.lang-active { color: var(--bord); font-weight: 600; }
  .lang-switch .lang-sep { color: var(--muted); font-size: 0.64rem; opacity: .5; }
  @media (max-width: 700px) {
    .lang-switch { margin-left: 12px; }
  }