:root{
    --indigo:#17135C;
    --violet:#7C5FCF;
    --orchid:#E08FC4;
    --coral:#F3703F;
    --cream:#FBF6EE;
    --ink:#181632;
    --ink-soft:#4A4768;
    --line:rgba(24,22,50,0.12);
    --radius:18px;
    --wrap:1180px;
    /* FOTO'S
       Deze drie komen van de server van Blue Beetle en worden van daaraf geladen.
       Vraag Blue Beetle om toestemming, download ze, zet ze in images/ en vervang
       de drie regels door url('images/bos.jpg') etc. voordat de site live gaat. */
    --hero-photo:url('https://images.squarespace-cdn.com/content/v1/64940101d969fa461af82f4a/a0799182-f440-40a8-8426-2f8abdae1286/Screenshot+2023-06-22+at+10.20.57.png?format=1500w');
    --fire-photo:url('https://images.squarespace-cdn.com/content/v1/64940101d969fa461af82f4a/3e5c6fd5-8879-4e37-bec9-6f7607adce77/Even+naar+Eva+-+Stilte+Retraite+2021-13.jpg?format=1500w');
    --ev-verdieping:url('https://images.squarespace-cdn.com/content/v1/64940101d969fa461af82f4a/66f9b214-f4c1-4b21-861a-d9b15071a722/Elke-Smit-395.jpg?format=900w');
    /* Tijdelijke stockfoto van Unsplash (gratis licentie). Vervang door een
       eigen foto van een kennismakingsavond zodra die er is. */
    --ev-avond:url('https://images.unsplash.com/photo-1486679679458-629f321a617c?w=900&q=72');
    /* Eigen foto's, staan in images/ naast dit bestand. */
    --ev-insideout:url('images/insideout.jpg');
    --ev-spark:url('images/spark.jpg');
    --gradient-mesh:
      radial-gradient(120% 140% at 8% 8%, #14104F 0%, rgba(20,16,79,0) 55%),
      radial-gradient(90% 110% at 85% 0%, #C98BD0 0%, rgba(201,139,208,0) 60%),
      radial-gradient(100% 120% at 90% 90%, var(--coral) 0%, rgba(243,112,63,0) 60%),
      radial-gradient(120% 140% at 10% 100%, #2C4FD6 0%, rgba(44,79,214,0) 55%),
      linear-gradient(135deg, #14104F 0%, #4A3A9E 30%, #9463C4 55%, #D883B8 75%, var(--coral) 100%);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Inter', sans-serif;
    background:var(--cream);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:700;
    letter-spacing:-0.01em;
    margin:0;
  }
  p{margin:0;line-height:1.6;}
  a{color:inherit;}
  .wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px;}
  img,svg{display:block;max-width:100%;}
  button{font-family:inherit;cursor:pointer;}

  /* ---------- Nav ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    padding:18px 0;
    transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
  }
  header.scrolled{
    background:rgba(251,246,238,0.92);
    backdrop-filter:blur(10px);
    box-shadow:0 1px 0 var(--line);
    padding:12px 0;
  }
  .nav-inner{display:flex; align-items:center; justify-content:space-between;}
  .brand{display:flex; align-items:center; gap:11px; font-size:1.15rem; font-weight:700; text-decoration:none; color:var(--cream);}
  /* Merkteken: erft de kleur van de tekst ernaast, dus het kleurt mee met de header */
  .brand .mark{height:21px; width:auto; flex:none;}
  .footer-brand .mark{height:19px; width:auto; flex:none;}
  @media (max-width:420px){
    .brand .mark{height:19px;}
  }
  header.scrolled .brand{color:var(--ink);}
  nav.links{display:flex; align-items:center; gap:34px;}
  nav.links a{
    text-decoration:none; font-size:0.98rem; font-weight:500;
    color:rgba(251,246,238,0.88);
    transition:color .25s ease;
  }
  header.scrolled nav.links a{color:var(--ink-soft);}
  nav.links a:hover{color:var(--cream);}
  header.scrolled nav.links a:hover{color:var(--ink);}
  .nav-cta{
    padding:10px 20px; border-radius:100px; border:none;
    background:var(--coral); color:#fff;
    font-size:0.92rem; font-weight:600;
    transition:background .2s ease;
  }
  .nav-cta:hover{background:#e05f2e;}
  .menu-toggle{display:none;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    padding:140px 0 90px;
    background:#14104F var(--hero-photo) center/cover no-repeat;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background:var(--gradient-mesh);
    opacity:0.28;
    pointer-events:none;
  }
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(90deg, rgba(20,16,79,0.78) 0%, rgba(20,16,79,0.22) 58%, rgba(20,16,79,0.08) 100%),
      linear-gradient(180deg, rgba(20,16,79,0) 55%, rgba(20,16,79,0.38) 100%);
    pointer-events:none;
  }
  .hero-inner{position:relative; z-index:2; max-width:760px;}
  .hero-eyebrow{color:rgba(255,255,255,0.85); margin-bottom:14px;}
  .hero-sub{
    margin-top:22px; font-size:clamp(1.15rem, 2.2vw, 1.5rem);
    color:rgba(255,255,255,0.92); font-weight:500;
  }
  .hero h1{
    font-size:clamp(2.6rem, 6vw, 5rem);
    line-height:1.03;
    color:#FFFFFF;
  }
  .hero-ctas{display:flex; flex-wrap:wrap; gap:16px; margin-top:42px;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:15px 30px; border-radius:100px;
    font-weight:600; font-size:1rem; text-decoration:none;
    border:1.5px solid transparent;
    transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  }
  .btn:active{transform:scale(0.97);}
  .btn-solid{background:var(--coral); color:#fff;}
  .btn-solid:hover{background:#e05f2e;}
  .btn-ghost{border-color:rgba(255,255,255,0.65); color:#fff;}
  .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,0.1);}
  .btn-dark{background:var(--ink); color:var(--cream);}
  .btn-dark:hover{background:#2b2856;}

  /* ---------- section basics ---------- */
  section{padding:110px 0;}
  .eyebrow{font-size:0.98rem; color:var(--ink-soft); font-weight:500;}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-head h2{font-size:clamp(1.9rem, 3.6vw, 2.7rem); margin-top:10px;}

  /* ---------- Herkenning ---------- */
  .herkenning{background:var(--ink); color:var(--cream);}
  .herkenning .eyebrow{color:rgba(251,246,238,0.6);}
  .lines{display:flex; flex-direction:column; gap:22px; max-width:680px;}
  .lines p{
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:500;
    font-size:clamp(1.25rem, 2.6vw, 1.7rem);
    line-height:1.35;
    color:rgba(251,246,238,0.96);
  }
  .lines p.closing{
    margin-top:14px;
    font-weight:600;
    background:linear-gradient(90deg, #E08FC4, var(--coral));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  /* ---------- Over / wat is young tribe ---------- */
  .over{background:var(--cream);}
  .over-intro{max-width:720px;}
  .over-intro h2{font-size:clamp(1.9rem, 3.6vw, 2.7rem); margin-top:10px;}
  .over-lead{font-size:1.15rem; color:var(--ink-soft); margin-top:18px; line-height:1.6;}
  .quote-band{
    background:var(--gradient-mesh);
    border-radius:var(--radius);
    padding:48px 44px;
    margin:52px 0;
    text-align:center;
  }
  .quote-band p{
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:700;
    font-size:clamp(1.6rem, 3.4vw, 2.4rem);
    color:#fff;
    line-height:1.25;
  }
  .over-cols{display:grid; grid-template-columns:repeat(3, 1fr); gap:38px;}
  .over-col h3{font-size:1.15rem; margin-bottom:10px;}
  .over-col p{color:var(--ink-soft); font-size:1rem; line-height:1.6;}

  /* ---------- Programma / journey ---------- */
  .programma{background:var(--cream); border-top:1px solid var(--line);}
  .journey{position:relative;}
  .journey-line{
    position:absolute; left:27px; top:14px; bottom:14px; width:2px;
    background:linear-gradient(180deg, var(--violet), var(--orchid), var(--coral));
  }
  .step{
    position:relative;
    display:grid; grid-template-columns:56px 1fr; gap:26px;
    padding:26px 0;
  }
  .step + .step{border-top:1px solid var(--line);}
  .step-num{
    width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:1.15rem;
    color:#fff; background:var(--gradient-mesh);
    z-index:1;
  }
  .step h3{font-size:1.25rem; margin-bottom:8px;}
  .step p{color:var(--ink-soft); max-width:520px;}

  .block-gap{margin-top:76px;}
  .events-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
  .event-tile{
    text-align:left; border:none; border-radius:var(--radius);
    padding:0; overflow:hidden; background:none;
    display:flex; flex-direction:column; width:100%;
    color:#fff; position:relative;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  /* Fotovlak: overal even hoog, zodat de vier tegels een rij vormen */
  .tile-media{
    display:block; position:relative;
    height:180px; width:100%; flex:0 0 180px;
    background-color:#1d1a44;
    background-size:cover; background-position:center;
    background-repeat:no-repeat;
  }
  .tile-media::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(23,19,92,0) 45%, rgba(23,19,92,0.4) 100%);
  }
  .tile-1 .tile-media{background-image:var(--ev-avond);}
  .tile-2 .tile-media{background-image:var(--ev-insideout); background-position:center 42%;}
  .tile-3 .tile-media{background-image:var(--ev-verdieping); background-position:center 62%;}
  .tile-4 .tile-media{background-image:var(--ev-spark);}

  /* Tekstvlak onder de foto, op de huisstijlgradient */
  .tile-body{
    display:flex; flex-direction:column; gap:14px; flex:1;
    padding:24px 26px 28px;
  }
  .tile-1 .tile-body{background:linear-gradient(135deg, var(--indigo), var(--violet));}
  .tile-2 .tile-body{background:linear-gradient(135deg, var(--violet), var(--orchid));}
  .tile-3 .tile-body{background:linear-gradient(135deg, var(--orchid), var(--coral));}
  .tile-4 .tile-body{background:linear-gradient(135deg, var(--coral), var(--violet));}

  .event-tile:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(23,19,92,0.28);}
  .event-tile:focus-visible{outline:2px solid var(--indigo); outline-offset:3px;}
  .event-tile .tag{
    align-self:flex-start; font-size:0.8rem; font-weight:600; padding:6px 13px; border-radius:100px;
    background:rgba(255,255,255,0.22); color:#fff;
  }
  .event-tile h3{font-size:1.35rem; color:#fff; line-height:1.2;}
  .event-tile p{color:rgba(255,255,255,0.9); font-size:0.98rem; flex:1;}
  .tile-cta{
    align-self:flex-start; font-weight:600; font-size:0.92rem; color:var(--indigo);
    background:#fff; padding:11px 22px; border-radius:100px;
  }
  a.event-tile{text-decoration:none;}

  .cities-line{
    margin:-32px 0 32px; font-size:1.02rem; color:var(--ink-soft); max-width:680px;
  }
  .cities-line strong{color:var(--ink); font-weight:600;}

  /* ---------- WhatsApp: lage drempel om even iets te vragen ---------- */
  .wa{
    display:inline-flex; align-items:center; gap:9px;
    padding:11px 20px; border-radius:100px;
    font-size:0.96rem; font-weight:600; text-decoration:none;
    color:var(--ink); background:rgba(255,255,255,0.72);
    border:1.5px solid rgba(24,22,50,0.16);
    transition:border-color .2s ease, color .2s ease, background .2s ease;
  }
  .wa svg{width:17px; height:17px; flex:none;}
  .wa:hover{border-color:var(--coral); color:var(--coral); background:#fff;}
  .wa:focus-visible{outline:2px solid var(--coral); outline-offset:2px;}
  /* variant voor donkere vlakken */
  .wa-light{
    color:var(--cream); background:rgba(251,246,238,0.07);
    border-color:rgba(251,246,238,0.28);
  }
  .wa-light:hover{color:#fff; background:rgba(243,112,63,0.2); border-color:var(--coral);}

  .wa-row{
    display:flex; flex-wrap:wrap; align-items:center; gap:14px;
    margin-top:30px;
  }
  .wa-row span{color:var(--ink-soft); font-size:1.02rem;}
  .talk-card .wa{margin-top:24px;}
  .footer-wa{padding-bottom:30px;}

  /* ---------- Veerkracht / benefits ---------- */
  .veerkracht{background:var(--ink); color:var(--cream); border-top:1px solid var(--line);}
  .veerkracht .eyebrow{color:rgba(251,246,238,0.6);}
  .veerkracht-body{display:flex; flex-direction:column; gap:22px; max-width:720px;}
  .veerkracht-body p{font-size:1.1rem; line-height:1.65; color:rgba(251,246,238,0.9);}
  .veerkracht-body p:first-child{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:600; font-size:1.35rem; color:#fff;
  }

  /* ---------- Over ons / begeleiders ---------- */
  .over-ons{background:var(--cream); border-top:1px solid var(--line);}
  .over-ons .section-head{max-width:720px;}
  .over-ons .section-head p{margin-top:18px; color:var(--ink-soft); font-size:1.05rem;}
  .team-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; margin-top:44px;}
  .person-card{
    display:flex; flex-direction:column;
    padding:16px 16px 20px; border-radius:var(--radius);
    background:#fff; border:1px solid var(--line);
  }
  /* Fotoplek: vervang door een <img> zodra de portretten er zijn */
  .person-photo{
    aspect-ratio:1/1; border-radius:12px; margin-bottom:14px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(145deg, rgba(124,95,207,0.2), rgba(224,143,196,0.16));
    border:1px solid rgba(24,22,50,0.06);
  }
  .person-photo span{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:700;
    font-size:2.3rem; color:rgba(23,19,92,0.32); line-height:1;
  }
  .person-card:nth-child(4n+2) .person-photo{background:linear-gradient(145deg, rgba(224,143,196,0.22), rgba(243,112,63,0.15));}
  .person-card:nth-child(4n+3) .person-photo{background:linear-gradient(145deg, rgba(243,112,63,0.18), rgba(124,95,207,0.16));}
  .person-card:nth-child(4n+4) .person-photo{background:linear-gradient(145deg, rgba(23,19,92,0.16), rgba(124,95,207,0.2));}
  .person-card h3{font-size:1.08rem; padding:0 4px;}
  .person-role{color:var(--ink-soft); font-size:0.9rem; margin-top:4px; padding:0 4px;}

  /* ---------- Ervaringen / doorlopende marquee ---------- */
  .ervaringen{background:var(--cream); border-top:1px solid var(--line); padding:72px 0;}
  .ervaringen .section-head{margin-bottom:32px;}
  .marquee{
    position:relative; overflow:hidden; width:100%;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .marquee-track{
    display:flex; gap:20px; width:max-content;
    animation:marquee-scroll 70s linear infinite;
  }
  .marquee:hover .marquee-track{animation-play-state:paused;}
  @keyframes marquee-scroll{
    from{transform:translateX(0);}
    to{transform:translateX(calc(-50% - 10px));}
  }
  .testimonial-card{
    flex:0 0 330px; box-sizing:border-box;
    background:#fff; border:1px solid var(--line); border-top:4px solid var(--violet);
    border-radius:var(--radius); padding:26px 28px; display:flex; flex-direction:column; gap:10px;
    min-height:190px;
    opacity:0.62;
    transition:opacity .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  .testimonial-card:hover{
    opacity:1; transform:translateY(-4px);
    box-shadow:0 16px 34px rgba(23,19,92,0.14);
  }
  .testimonial-card.card-2{border-top-color:var(--orchid);}
  .testimonial-card.card-3{border-top-color:var(--coral);}
  .quote-mark{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:1.9rem;
    line-height:1; color:var(--violet); margin:0;
  }
  .testimonial-card.card-2 .quote-mark{color:var(--orchid);}
  .testimonial-card.card-3 .quote-mark{color:var(--coral);}
  .testimonial-text{color:var(--ink); font-size:1.02rem; line-height:1.55; flex:1;}
  .testimonial-name{color:var(--ink-soft); font-size:0.9rem; font-weight:600;}
  @media (hover:none){
    .testimonial-card{opacity:1;}
  }
  @media (prefers-reduced-motion:reduce){
    .marquee-track{animation:none;}
    .marquee{overflow-x:auto;}
  }

  /* ---------- Aanmelden ---------- */
  /* Kampvuurfoto als achtergrond, met een donkere gradient eroverheen voor leesbaarheid */
  .aanmelden{
    position:relative; overflow:hidden;
    color:var(--cream);
    background:#0d0b1f var(--fire-photo) center/cover no-repeat;
  }
  .aanmelden::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(85% 75% at 82% 12%, rgba(243,112,63,0.24) 0%, rgba(243,112,63,0) 62%),
      linear-gradient(180deg, rgba(13,11,31,0.88) 0%, rgba(22,18,66,0.68) 38%, rgba(13,11,31,0.9) 100%);
    pointer-events:none;
  }
  .aanmelden > .wrap{position:relative; z-index:2;}
  .aanmelden .section-head p{color:rgba(251,246,238,0.78); margin-top:14px; font-size:1.05rem;}
  .aanmelden .section-head p a{color:var(--coral); text-decoration:underline; text-underline-offset:3px;}
  .aanmelden-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:start;}

  .talk-card{
    background:linear-gradient(150deg, rgba(20,16,60,0.58), rgba(13,11,31,0.44));
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(251,246,238,0.2);
    border-radius:var(--radius);
    padding:32px 28px;
  }
  .talk-card h3{font-size:1.3rem; margin-bottom:12px;}
  .talk-card p{color:rgba(251,246,238,0.72); margin-bottom:22px;}
  .trust-list{list-style:none; margin:28px 0 0; padding:20px 0 0; border-top:1px solid rgba(251,246,238,0.14); display:flex; flex-direction:column; gap:12px;}
  .trust-list li{position:relative; padding-left:22px; font-size:0.94rem; color:rgba(251,246,238,0.75);}
  .trust-list li::before{content:""; position:absolute; left:0; top:6px; width:9px; height:9px; border-radius:50%; background:linear-gradient(135deg, var(--orchid), var(--coral));}

  form{
    background:rgba(13,11,31,0.58);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(251,246,238,0.2);
    border-radius:var(--radius); padding:34px;
  }
  .field-group{margin-bottom:22px;}
  .field-group label{display:block; font-size:0.92rem; font-weight:600; margin-bottom:8px; color:rgba(251,246,238,0.85);}
  .field-group input,.field-group textarea{
    width:100%; padding:13px 15px; border-radius:10px;
    border:1px solid rgba(251,246,238,0.24);
    background:rgba(8,7,22,0.45);
    color:var(--cream); font-family:inherit; font-size:1rem;
  }
  .field-group input::placeholder,.field-group textarea::placeholder{color:rgba(251,246,238,0.4);}
  .field-group input:focus,.field-group textarea:focus,.event-card:focus-visible,.btn:focus-visible{
    outline:2px solid var(--orchid); outline-offset:2px;
  }
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}

  .event-options{display:grid; gap:12px; margin-bottom:26px;}
  .event-card{
    display:flex; align-items:center; gap:12px;
    padding:14px 16px; border-radius:12px;
    border:1.5px solid rgba(251,246,238,0.2);
    background:rgba(8,7,22,0.4);
    transition:border-color .2s ease, background .2s ease;
  }
  .event-card input{accent-color:var(--coral); width:17px; height:17px;}
  .event-card label{font-weight:500; cursor:pointer;}
  .event-card.selected{border-color:var(--coral); background:rgba(243,112,63,0.12);}

  .submit-row{display:flex; align-items:center; gap:18px; margin-top:8px;}
  .success-msg{
    display:none; margin-top:18px; padding:14px 16px; border-radius:10px;
    background:rgba(224,143,196,0.16); border:1px solid rgba(224,143,196,0.4);
    font-size:0.95rem;
  }
  .success-msg.show{display:block;}

  /* ---------- Footer ---------- */
  footer{background:var(--cream); padding:70px 0 40px; border-top:1px solid var(--line);}
  .footer-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px; padding-bottom:40px;}
  .footer-brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.1rem;}
  .footer-links{display:flex; gap:28px; flex-wrap:wrap;}
  .footer-links a{text-decoration:none; color:var(--ink-soft); font-size:0.95rem;}
  .footer-links a:hover{color:var(--ink);}
  .footer-sub{padding-top:28px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.85rem; color:var(--ink-soft);}

  @media (max-width:900px){
    .aanmelden-grid{grid-template-columns:1fr; gap:40px;}
    .field-row{grid-template-columns:1fr;}
    .events-grid,.over-cols{grid-template-columns:1fr 1fr;}
    .team-grid{grid-template-columns:repeat(3, 1fr);}
    .cities-line{margin-top:-20px;}
  }
  @media (max-width:640px){
    .events-grid,.over-cols{grid-template-columns:1fr;}
    .team-grid{grid-template-columns:1fr 1fr;}
    .quote-band{padding:36px 26px; margin:40px 0;}
    .tile-media{height:210px; flex-basis:210px;}
  }
  @media (max-width:720px){
    nav.links{
      position:fixed; top:52px; left:0; right:0;
      height:calc(100vh - 52px);
      height:calc(100dvh - 52px);
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      background:var(--cream);
      flex-direction:column; align-items:flex-start; gap:0;
      padding:10px 28px 40px;
      transform:translateY(-110%);
      transition:transform .3s ease;
    }
    nav.links.open{transform:translateY(0);}
    nav.links a{color:var(--ink); width:100%; padding:16px 0; border-bottom:1px solid var(--line);}
    nav.links a.nav-cta{color:#fff; border-bottom:none;}
    .nav-cta{margin-top:18px; text-align:center;}
    .menu-toggle{
      display:flex; flex-direction:column; gap:5px; background:none; border:none; padding:6px;
    }
    .menu-toggle span{width:24px; height:2px; background:var(--cream); border-radius:2px; transition:background .3s;}
    header.scrolled .menu-toggle span{background:var(--ink);}
    header.nav-open .menu-toggle span{background:var(--ink);}
    header.nav-open{
      background:rgba(251,246,238,0.98);
      box-shadow:0 1px 0 var(--line);
      padding:12px 0;
    }
    header.nav-open .brand{color:var(--ink);}
    body.menu-lock{overflow:hidden; height:100%;}
    section{padding:76px 0;}
    .hero{padding-top:120px;}
    .hero::after{
      background:linear-gradient(180deg, rgba(20,16,79,0.5) 0%, rgba(20,16,79,0.62) 55%, rgba(20,16,79,0.8) 100%);
    }
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *{transition:none !important;}
  }

  /* ---------- Standalone page header (e.g. Over ons) ---------- */
  .page-header{background:var(--gradient-mesh); padding:170px 0 80px; position:relative;}
  .page-header .wrap{position:relative; z-index:2;}
  .page-header h1{color:#fff; font-size:clamp(2.2rem, 5vw, 3.2rem);}
  .page-header p{color:rgba(255,255,255,0.9); margin-top:18px; max-width:560px; font-size:1.1rem; line-height:1.55;}
  @media (max-width:720px){
    .page-header{padding-top:120px;}
  }