/* ---- v3 ronde 2: diensten ---- */
  .diensten { padding:96px 0; border-top:1px solid var(--line); }
  .d-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:40px; }
  .d-head h2 { font-size:clamp(36px, 4.6vw, 58px); }
  .d-head p { margin:0; max-width:380px; color:#4a4a4a; font-size:17px; }
  .dlist { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
  .dl-rows { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
  .dl-row { display:grid; grid-template-columns:56px 1fr; gap:8px; padding:26px 0; border-bottom:1px solid var(--line); cursor:pointer; outline:none; }
  .dl-n { font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:13px; letter-spacing:.06em; color:var(--gold); padding-top:14px; }
  .dl-row h3 { font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif; font-weight:600; font-size:clamp(28px, 3.2vw, 42px); line-height:1.1; margin:0; color:#9a9a9a; transition:color .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
  .dl-row.on h3, .dl-row:hover h3 { color:var(--ink); }
  .dl-row.on h3 { transform:translateX(6px); }
  .dl-more { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease; }
  .dl-more > * { overflow:hidden; }
  .dl-row.on .dl-more { grid-template-rows:1fr; opacity:1; }
  .dl-more p { margin:12px 0 10px; font-size:18px; color:#3a3a3a; max-width:480px; }
  .dl-link { display:inline-block; font-weight:600; font-size:15px; text-decoration:none; border-bottom:1.5px solid var(--gold); padding-bottom:2px; margin-bottom:4px; }
  .dl-link span { display:inline-block; transition:transform .3s ease; } .dl-link:hover span { transform:translateX(4px); }
  .dl-mimg { display:none; }
  .dl-panel { position:sticky; top:110px; aspect-ratio:4/3.2; border-radius:18px; overflow:hidden; background:#111; box-shadow:0 24px 60px rgba(0,0,0,.14); }
  .dl-shot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left top; opacity:0; transform:scale(1.04); transition:opacity .6s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); }
  .dl-shot.on { opacity:1; transform:none; }
  @media (max-width:860px) {
    .dlist { grid-template-columns:1fr; } .dl-panel { display:none; }
    .dl-mimg { display:block; margin-top:14px; border-radius:12px; overflow:hidden; } .dl-mimg img { width:100%; display:block; }
  }
  .dtiles { display:grid; grid-template-columns:7fr 5fr; grid-template-rows:280px 280px; gap:18px; }
  .dt { position:relative; display:block; overflow:hidden; border-radius:18px; color:#fff; text-decoration:none; background:#111; }
  .dt0 { grid-row:1 / span 2; }
  .dt img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left top; transition:transform 1.2s cubic-bezier(.2,.8,.2,1); }
  .dt:hover img { transform:scale(1.04); }
  .dt-shade { position:absolute; inset:0; background:linear-gradient(to top, rgba(10,9,7,.94) 0%, rgba(10,9,7,.82) 38%, rgba(10,9,7,.35) 68%, rgba(10,9,7,.08) 100%); }
  .dt-txt b, .dt-p { text-shadow:0 1px 12px rgba(0,0,0,.5); }
  .dt-txt { position:absolute; left:0; right:0; bottom:0; padding:26px 28px; display:flex; flex-direction:column; gap:6px; }
  .dt-txt b { font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif; font-weight:600; font-size:clamp(26px, 2.8vw, 38px); line-height:1.1; }
  .dt-p { font-size:15.5px; color:#e4dfd4; max-width:460px; }
  .dt-cta { font-weight:600; font-size:14.5px; color:var(--gold-2); margin-top:4px; }
  .dt .dl-n { padding-top:0; color:var(--gold-2); }
  @media (max-width:860px) { .dtiles { grid-template-columns:1fr; grid-template-rows:none; } .dt { height:360px; } .dt0 { grid-row:auto; } }

  /* ---- berg als vervaagde achtergrond ---- */
  .berg-kop, .berg-pagina { background-size:cover; background-position:center 40%; pointer-events:none; opacity:0; transition:opacity .6s ease; }
  .berg-kop { position:absolute; inset:-60px; z-index:0; filter:blur(26px) saturate(1.05); }
  .berg-pagina { position:fixed; inset:-60px; z-index:-1; filter:blur(34px) saturate(1.05); }
  body.bg-kop .berg-kop { opacity:.32; }
  body.bg-pagina .berg-pagina { opacity:.22; }
  body.bg-pagina { background:transparent; }
  html { background:#fff; }
  body.bg-pagina .method, body.bg-pagina .about, body.bg-pagina .diensten, body.bg-pagina .contact, body.bg-pagina .animsec { background:rgba(255,255,255,.55); }

  /* ---- stijl: donker, hele pagina ---- */
  html.st-donker, body.st-donker { background:#0c0b09; }
  body.st-donker { color:#ece7dc; --line:#26231e; --soft:#171511; --muted:#9a9384; }
  body.st-donker .hero3 { background:radial-gradient(ellipse 60% 70% at 72% 40%, rgba(205,176,90,.18), rgba(205,176,90,0) 62%); color:#f4f1ea; }
  body.st-donker h2, body.st-donker h3 { color:#f4f1ea; }
  body.st-donker .hero3 .sub, body.st-donker .prose p, body.st-donker .person p, body.st-donker .contact .lead, body.st-donker .d-head p, body.st-donker .dl-more p { color:#bdb6a7; }
  body.st-donker .kern-under { color:#f4f1ea; }
  body.st-donker .stage .stage-title, body.st-overgang .stage .stage-title { color:#141414; }
  body.st-donker .stage { background:#fbfaf7 !important; }
  body.st-donker .stage { background:#f7f4ee; border-color:transparent; box-shadow:0 30px 80px rgba(0,0,0,.45); }
  body.st-donker .ta { background:#12110e; border-top:1px solid #1f1d19; border-bottom:1px solid #1f1d19; }
  body.st-donker .chip { background:#1e1b16; color:#ddd6c8; } body.st-donker .chip.mens { background:transparent; color:#f4f1ea; }
  body.st-donker .btn:not(.ghost) { background:var(--gold-2); color:#111; }
  body.st-donker .btn.ghost { color:#f4f1ea; }
  body.st-donker a { color:inherit; }
  body.st-donker .photo { background:#171511; color:#6f695d; }
  body.st-donker .form input, body.st-donker .form textarea { border-bottom-color:#3a362f; color:#f4f1ea; }
  body.st-donker .form label, body.st-donker footer { color:#8d8678; }
  body.st-donker .dl-row h3 { color:#5f5a50; } body.st-donker .dl-row.on h3, body.st-donker .dl-row:hover h3 { color:#f4f1ea; }
  body.st-donker .watermark { opacity:.06; --logo-ink:#cdb05a; --logo-gold:#cdb05a; }
  body.st-donker .flogo { --logo-ink:#ece7dc; }
  body.st-donker.bg-pagina .method, body.st-donker.bg-pagina .about, body.st-donker.bg-pagina .diensten, body.st-donker.bg-pagina .contact, body.st-donker.bg-pagina .animsec { background:rgba(12,11,9,.55); }
  body.st-donker.bg-kop .berg-kop { opacity:.28; }
  body.st-donker.bg-pagina .berg-pagina { opacity:.30; }

  /* ---- stijl: donker boven, zacht naar licht ---- */
  body.st-overgang .hero3 { padding-bottom:300px; color:#f4f1ea;
    background:radial-gradient(ellipse 60% 55% at 72% 30%, rgba(205,176,90,.18), rgba(205,176,90,0) 62%), linear-gradient(180deg, #0c0b09 0%, #0c0b09 calc(100% - 380px), #3a342a calc(100% - 200px), #fff 100%); }
  body.st-overgang .hero3 .sub { color:#cfc8b8; }
  body.st-overgang .hero3 .btn:not(.ghost) { background:var(--gold-2); color:#111; }
  body.st-overgang .hero3 .btn.ghost { color:#f4f1ea; }
  body.st-overgang .watermark { opacity:.06; bottom:260px; --logo-ink:#cdb05a; --logo-gold:#cdb05a; }
  body.st-overgang .animsec { margin-top:-220px; position:relative; z-index:2; }
  body.st-overgang .stage { box-shadow:0 30px 80px rgba(0,0,0,.28); }
  /* ---- doorlopend (Jonathan 26 sep: "te los allemaal en jarring door die pieces"):
     geen strepen tussen secties, geen eigen vlakken per sectie, berg loopt zacht uit ---- */
  .method, .about, .contact, .diensten, footer { border-top:0 !important; }
  .berg-kop { inset:-60px -60px 0 -60px; -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 40%, transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 40%, transparent 100%); }
  body.st-donker .ta { background:transparent; border:0; }
  .watermark { -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 30%, transparent 74%); mask-image:linear-gradient(180deg, #000 0%, #000 30%, transparent 74%); }
  body.bg-pagina .method, body.bg-pagina .about, body.bg-pagina .diensten, body.bg-pagina .contact, body.bg-pagina .animsec,
  body.st-donker.bg-pagina .method, body.st-donker.bg-pagina .about, body.st-donker.bg-pagina .diensten, body.st-donker.bg-pagina .contact, body.st-donker.bg-pagina .animsec { background:transparent !important; }
  body.st-donker.bg-pagina .ta { background:transparent; }
  .oo-more { margin:34px 0 0; }
  /* grote TovAra op de achtergrond: dekking instelbaar */
  .watermark { opacity:var(--wm-o, .06) !important; }
  /* ingezoomde BMS-kaart: achtergrond los van blokjes en lijnen (normaal, dekking, liquid glass) */
  .vf.bmsz { background:transparent; position:relative; box-shadow:0 24px 60px rgba(0,0,0,.14); }
  .vf.bmsz svg { width:100%; height:100%; display:block; }
  .vf.bmsz .hz-bg { opacity:var(--hz-o, 1); transition:opacity .3s ease; }
  .vf.bmsz .hz-dots { opacity:var(--hz-o, 1); }
  body.bms-glass .vf.bmsz { background:rgba(24,22,19, calc(var(--hz-o, .5) * .72));
    backdrop-filter:blur(24px) saturate(1.8); -webkit-backdrop-filter:blur(24px) saturate(1.8);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.12), 0 24px 60px rgba(0,0,0,.22); }
  body.bms-glass .vf.bmsz .hz-bg { opacity:0; }
  body.bms-glass .vf.bmsz .hz-dots { opacity:calc(var(--hz-o, .5) * .6); }
  /* de demokaart blijft licht in de donkere stijlen, dus ook de tekst erin donker (ondertekst was licht op licht) */
  body.st-donker .stage, body.st-overgang .stage { color:#141414; }
  /* BMS-demo "Van gesprek naar verbetering" in het zwart, zoals het BMS-beeld rechtsboven (Jonathan 26 sep):
     zelfde ondergrond (#141414 met stippenraster); de animatie tekent met zijn eigen donkere kleuren (S.bg = "donker") */
  body.stage-dark .animsec .stage, body.stage-dark .anim-slot .stage { color:#ece9e2 !important; border-color:rgba(201,168,76,.16) !important;
    background:radial-gradient(circle, #3a3a3a .9px, transparent 1.1px) 0 0 / 14px 14px, #141414 !important; box-shadow:0 30px 80px rgba(0,0,0,.3) !important; }
  body.stage-dark .stage .stage-title { color:#ece9e2 !important; }
  body.stage-dark .stage .stage-title small, body.stage-dark .stage .line-sub small { color:#8d877a; }
  body.stage-dark .stage .line-sub.final { color:#f4f1ea; }
  body.stage-dark .stage .line-sub.bms { color:#c9a84c; }
  /* BMS-demo als donker liquid glass (Jonathan 26 sep: "Dit hele achtergrond mag liquid glass"): zelfde donkere animatie,
     de ondergrond is rookglas over berg en logo, dichtheid via de schuif (--sg-o) */
  body.stage-glass .animsec .stage, body.stage-glass .anim-slot .stage { color:#ece9e2 !important;
    background:radial-gradient(circle, rgba(255,255,255,.07) .9px, transparent 1.1px) 0 0 / 14px 14px, rgba(20,19,17, calc(var(--sg-o, .55) * .9)) !important;
    border-color:transparent !important; backdrop-filter:blur(28px) saturate(1.7); -webkit-backdrop-filter:blur(28px) saturate(1.7);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.09), 0 30px 80px rgba(0,0,0,.3) !important; }
  body.stage-glass .stage .stage-title { color:#ece9e2 !important; }
  body.stage-glass .stage .stage-title small, body.stage-glass .stage .line-sub small { color:#8d877a; }
  body.stage-glass .stage .line-sub.final { color:#f4f1ea; }
  body.stage-glass .stage .line-sub.bms { color:#c9a84c; }
  body.yt-glas.stage-glass .yt-play { background:rgba(255,255,255,.12); }
  body.yt-glas.stage-glass .yt-play:hover { background:rgba(255,255,255,.2); }
  /* optie: vervaagd stilstaand beeld tot er op afspelen wordt gedrukt */
  .stage #svg, .stage .talk { transition:filter .6s ease, opacity .6s ease; }
  body.poster-blur .stage.yt-wait #svg, body.poster-blur .stage.yt-wait .talk { filter:blur(7px); opacity:.75; }
  /* tekst onderin de demo een stuk groter (Jonathan 26 sep); op de telefoon blijft de oude maat */
  .animsec .talk { min-height:clamp(150px, 12vw, 176px); }
  .animsec .line-sub { font-size:clamp(20px, 2.1vw, 30px); line-height:1.25; }
  .animsec .line-sub small { font-size:13px; margin-bottom:8px; }
  .animsec .line-sub.final { font-size:clamp(18px, 1.95vw, 30px); line-height:1.2; text-wrap:balance; }  /* slotzin op één regel (Theo 1 okt) */
  /* afspeelknop in YouTube-vorm op de BMS-demo (Jonathan 26 sep): de demo wacht met de complete kaart als stilstaand beeld */
  /* titelscherm voor het afspelen (Jonathan 26 sep): titel groot in het midden, knop eronder; na de klik schuift de titel terug naar linksboven */
  .yt-cover { position:absolute; inset:0; z-index:3; display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; pointer-events:none; }
  .stage.yt-wait .yt-cover, .stage.yt-go .yt-cover { display:flex; }
  .stage.yt-wait .stage-title, .stage.yt-go .stage-title { visibility:hidden; }
  .yt-h { font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif; font-size:clamp(28px, 3.8vw, 56px); font-weight:600; letter-spacing:-.02em; line-height:1.1; color:inherit;
    transform-origin:0 0; transition:transform .8s cubic-bezier(.65,0,.25,1), font-weight .8s ease; }
  .yt-sub { font-family:"Geist", sans-serif; font-size:clamp(14px, 1.3vw, 18px); color:#8d877a; margin-top:14px; transition:opacity .3s ease; }
  body.st-donker:not(.stage-dark):not(.stage-glass) .yt-sub { color:#8a8478; }
  .yt-cover .yt-play { pointer-events:auto; margin-top:34px; transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease, opacity .3s ease; }
  .yt-bms { font-family:"Geist", sans-serif; font-size:clamp(13px, 1.05vw, 15px); line-height:1.45; color:#8d877a; max-width:560px; margin-top:10px; transition:opacity .3s ease; }
  .stage.yt-go .yt-sub, .stage.yt-go .yt-bms, .stage.yt-go .yt-play { opacity:0; }
  .yt-play { position:relative; z-index:3; width:108px; height:76px; border:0; border-radius:22px; padding:0; flex:none;
    display:grid; place-items:center; cursor:pointer; color:#fff; transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease; }
  .stage.yt-wait { cursor:pointer; }
  .yt-play svg { width:34px; height:34px; margin-left:4px; display:block; }
  .yt-play:hover, .yt-play:focus-visible { transform:scale(1.07); }
  .yt-play:focus-visible { outline:2px solid #c9a84c; outline-offset:4px; }
  body.yt-zwart .yt-play { background:rgba(10,10,10,.9); box-shadow:0 12px 32px rgba(0,0,0,.28); }
  body.yt-zwart .yt-play:hover { background:#000; }
  body.yt-glas .yt-play { background:rgba(28,26,22,.36); backdrop-filter:blur(16px) saturate(1.8); -webkit-backdrop-filter:blur(16px) saturate(1.8);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.26), 0 12px 32px rgba(0,0,0,.16); }
  body.yt-glas.stage-dark .yt-play { background:rgba(255,255,255,.12); }
  body.yt-glas .yt-play:hover { background:rgba(28,26,22,.46); }
  body.yt-glas.stage-dark .yt-play:hover { background:rgba(255,255,255,.2); }
  .vf.ph { display:flex; align-items:center; justify-content:center; text-align:center; padding:32px; background:linear-gradient(160deg, #ecebe7, #dcdad4); color:#8d897f; font-size:15px; }
  body.st-donker .vf.ph, body.st-overgang .vf.ph { background:linear-gradient(160deg, #1c1a16, #12110e); color:#6f695d; }
  .about .photo { aspect-ratio:1/1; }
  #over-ons .people { max-width:720px; gap:32px; }
  /* de paginakleur zit op html, zodat de vaste berglaag zichtbaar blijft */
  html.st-warm { background:#f4efe5; }
  body.bg-pagina, body.st-donker.bg-pagina, body.st-warm.bg-pagina { background:transparent !important; }