/* ============ KLEUREN EN FONTS: alle kleuren lopen via deze variabelen ============ */
:root{
--bruin:#5B4C34;--bruin-donker:#4E4130;--bruin-licht:#f2ede4;
--zwart:#111111;--zwarter:#000000;--wit:#ffffff;--groen:#34D399;
--zwart-zacht:rgba(0,0,0,.72);--zwart-mute:rgba(0,0,0,.5);--wit-mute:rgba(255,255,255,.9);--wit-80:rgba(255,255,255,.8);
--lijn:rgba(0,0,0,.12);--lijn-zacht:rgba(0,0,0,.1);--lijn-sterk:rgba(0,0,0,.15);--lijn-wit:rgba(255,255,255,.9);--lijn-wit-zacht:rgba(255,255,255,.2);--lijn-licht:rgba(242,237,228,.2);
--header-bg:rgba(255,255,255,.86);--overlay:rgba(0,0,0,.7);--media-bg:#1c1a17;
--accent-warm:#88724E;--accent-warm-20:rgba(136,114,78,.2);--accent-warm-35:rgba(136,114,78,.35);--wa-bruin:#4A2F1C;--pro:#7fd9a8;--con:#e08a8a;
--font-display:'Excon',sans-serif;--font-body:'Excon',sans-serif;--font-mono:'IBM Plex Mono',monospace;
--max:1180px;--ox:100%;--oy:0%}
::selection{background:var(--bruin);color:var(--bruin-licht)}
::-moz-selection{background:var(--bruin);color:var(--bruin-licht)}
/* Op een donkere sectie (zwart/zwarter) mag de selectie desgewenst
   net iets lichter, voor voldoende contrast. */
.zwart ::selection,.zwarter ::selection{background:var(--bruin-licht);color:var(--bruin-donker)}
.zwart ::-moz-selection,.zwarter ::-moz-selection{background:var(--bruin-licht);color:var(--bruin-donker)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);color:var(--zwart);background:var(--wit);line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.05;font-weight:600}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
*:focus-visible{outline:2px solid var(--bruin-donker);outline-offset:3px}
.menu-contact-icons{display:flex;flex-direction:column;gap:1.75rem}
/* ---------- scroll lock zolang menu open staat ---------- */
html.no-scroll,body.no-scroll{overflow:hidden;height:100%}
/* ---------- site header (hamburger-trigger) ---------- */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:60;background:var(--header-bg);backdrop-filter:blur(10px);transition:background .3s ease, border-color .3s ease}
.site-header-inner{display:flex;align-items:center;justify-content:space-between;padding-top:clamp(12px, 2.5vh, 24px);padding-bottom:clamp(12px, 2.5vh, 24px)}
.logoo{font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;text-decoration:none;color:var(--zwart);transition:color .3s ease}
.site-header.menu-open{background:transparent;border-color:transparent}
.site-header.menu-open .logoo{color:var(--zwart)}
.taal{font-family:var(--font-display);letter-spacing:-.01em;text-decoration:none;color:var(--zwart);transition:color .3s ease}
.site-header.menu-open .taal{color:var(--zwart)}
/* ---------- hamburger ---------- */
.hamburger{position:relative;width:32px;height:24px;background:transparent;border:none;cursor:pointer;padding:0;z-index:5}
.hamburger-line{position:absolute;left:0;width:100%;height:2px;background:var(--zwart);transition:transform .3s ease,opacity .3s ease,top .3s ease,background .3s ease}
.hamburger-line:nth-child(1){top:0}
.hamburger-line:nth-child(2){top:11px}
.hamburger-line:nth-child(3){top:22px}
.hamburger:focus-visible{outline:2px solid var(--bruin-donker);outline-offset:6px;border-radius:2px}
.hamburger.is-active .hamburger-line{background:var(--bruin)}
.hamburger.is-active .hamburger-line:nth-child(1){top:11px;transform:rotate(45deg)}
.hamburger.is-active .hamburger-line:nth-child(2){opacity:0}
.hamburger.is-active .hamburger-line:nth-child(3){top:11px;transform:rotate(-45deg)}
.site-header.menu-open .hamburger-line{background-color:var(--zwart)}
/* ---------- menu overlay: cirkel-reveal vanuit de hamburger ---------- */
.menu-overlay{position:fixed;inset:0;z-index:55;background:var(--bruin-licht);overflow:hidden;display:flex;align-items:stretch;justify-content:center;clip-path:circle(0% at var(--ox) var(--oy));transition:clip-path .7s cubic-bezier(.16,1,.3,1);pointer-events:none}
.menu-overlay.is-open{clip-path:circle(150% at var(--ox) var(--oy));pointer-events:auto}
@media (prefers-reduced-motion:reduce){
  .menu-overlay{clip-path:none;opacity:0;transition:opacity .25s ease}
  .menu-overlay.is-open{clip-path:none;opacity:1}
  .menu-list li a{transition:none;transform:none}
}
.menu-panel{flex:1 1 50%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.menu-panel-contact{border-left:1px solid var(--lijn-sterk)}
.menu-panel-nav{align-items:flex-start;padding-top:2rem;overflow-y:auto}
.menu-overlay{overflow-y:auto}
.menu-list{position:relative;list-style:none;text-align:left}
/* vaste breedte: het menu verspringt niet meer als een submenu opent of sluit */
.menu-panel-nav nav{width:100%;padding:0 24px}
.menu-list{width:min(100%,30rem);margin:0 auto}
.menu-list li{margin:0.5rem 0;overflow:hidden}
.menu-list li a{display:inline-block;color:var(--zwart);text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,6vw,4.2rem);letter-spacing:-.02em;position:relative;transform:translateY(110%);transition:transform .6s cubic-bezier(.16,1,.3,1),color .2s ease}
.menu-overlay.is-open .menu-list li a{transform:translateY(0)}
.menu-overlay.is-open .menu-list li:nth-child(1) a{transition-delay:.2s}
.menu-overlay.is-open .menu-list li:nth-child(2) a{transition-delay:.26s}
.menu-overlay.is-open .menu-list li:nth-child(3) a{transition-delay:.32s}
.menu-overlay.is-open .menu-list li:nth-child(4) a{transition-delay:.38s}
.menu-list li a:hover{color:var(--bruin)}
.menu-list li a:focus-visible{color:var(--bruin);outline:2px solid var(--bruin);outline-offset:-2px;border-radius:0}
.menu-overlay:focus,.menu-overlay:focus-visible{outline:none}
.menu-contact-inner{display:flex;flex-direction:column;align-items:flex-start;gap:1.75rem;padding:2rem}
.menu-contact-title{font-family:var(--font-mono);color:var(--zwart-zacht);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}
.menu-contact-item{display:flex;align-items:center;gap:.9rem;color:var(--zwart);text-decoration:none;font-size:1.1rem;transition:opacity .2s ease,transform .2s ease}
.menu-contact-item:hover{opacity:.8;transform:translateX(4px)}
.menu-contact-item:focus-visible{outline:2px solid var(--bruin);outline-offset:4px}
.menu-contact-item .contact-icon{width:24px;height:24px;flex-shrink:0}
/* ============ TAAL + VLAGGEN ============ */
.header-right{display:flex;align-items:center;gap:1.75rem}
.lang-switch{display:inline-flex;align-items:center;gap:8px;font-size:0.85rem;font-weight:600;letter-spacing:0.03em}
.lang-link{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none;opacity:0.7;transition:opacity 0.2s ease}
.lang-link:hover,.lang-link:focus-visible{opacity:1}
.vlag{display:inline-block;flex-shrink:0;width:30px;height:30px;border-radius:50%;overflow:hidden}
.vlag svg{display:block;width:100%;height:100%}
main{padding-top:var(--header-h, 88px)}
.hero-case{position:relative;overflow:hidden;aspect-ratio:4 / 3;/* pas aan naar de verhouding van je video */}
.hero-case-img{width:100%;height:100%;object-fit:cover;display:block}
/* ---------- case-afbeeldingen: vullen de kolom op desktop (cover),
   oorspronkelijke verhouding op mobiel, altijd bovenaan op mobiel ---------- */
.case-img{position:relative;overflow:hidden;min-height:420px}
.case-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ruimte{padding:0 5% 0 5%;box-sizing:border-box}
.lijntje{display:inline-flex;align-items:center;gap:10px}
.lijntje::before{content:"";display:inline-block;width:12px;height:2px;background:currentColor;flex-shrink:0}
.section-divider{width:100%;line-height:0;background:var(--divider-top, var(--wit))}
.section-divider svg path{fill:var(--divider-bottom, var(--bruin-licht))}
.section-divider svg{width:100%;height:60px;display:block}
.cms-trio{border:1px solid var(--lijn-wit);border-radius:8px;padding:24px;margin-top:32px}
/* ---------- toggle-knop ---------- */
.cms-trio__toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;padding:8px 4px;font-family:var(--font-mono);font-size:.9rem;color:var(--bruin-licht);text-align:left}
.cms-trio__toggle:hover,.cms-trio__toggle:focus-visible{color:var(--wit)}
.cms-trio__toggle-icon{position:relative;width:18px;height:18px;flex-shrink:0}
.cms-trio__toggle-icon::before,.cms-trio__toggle-icon::after{content:"";position:absolute;top:50%;left:50%;background:currentColor;border-radius:1px;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.cms-trio__toggle-icon::before{width:100%;height:2px;transform:translate(-50%,-50%)}
.cms-trio__toggle-icon::after{width:2px;height:100%;transform:translate(-50%,-50%) scaleY(1)}
.cms-trio__toggle[aria-expanded="true"] .cms-trio__toggle-icon::after{transform:translate(-50%,-50%) scaleY(0)}
/* ---------- soepel uitklappende inhoud, zonder JS-hoogteberekening ---------- */
.cms-trio__collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.cms-trio__toggle[aria-expanded="true"] + .cms-trio__collapse{grid-template-rows:1fr}
.cms-trio__collapse-inner{overflow:hidden;min-height:0}
.cms-trio__title{font-family:var(--font-mono);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--bruin-licht);margin:0 0 20px}
.cms-trio__grid{display:grid;gap:16px;padding-top:20px}
@media(min-width:760px){
  .cms-trio__grid{grid-template-columns:repeat(3,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .cms-trio__collapse{transition:none}
  .cms-trio__toggle-icon::before,.cms-trio__toggle-icon::after{transition:none}
}
.cms-trio__card{border:1px solid var(--lijn-wit);border-radius:8px;padding:20px;display:flex;flex-direction:column;gap:10px}
.cms-trio__name{font-family:var(--font-display);font-weight:900;font-size:1.1rem;color:var(--wit);margin:0}
.cms-trio__point{display:flex;gap:8px;font-size:.88rem;line-height:1.45;color:var(--lijn-wit)}
.cms-trio__point .mark{font-family:var(--font-mono);flex-shrink:0}
.cms-trio__point--pro .mark{color:var(--pro)}
.cms-trio__point--con .mark{color:var(--con)}
.cms-trio__link{margin-top:auto;padding-top:6px;font-family:var(--font-mono);font-size:.82rem;color:var(--bruin-licht);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease, border-color .2s ease}
.cms-trio__link:hover,.cms-trio__link:focus-visible{color:var(--wit);border-color:var(--wit)}
.r-side figure{margin:0}
.a-price .a-lijn{border-top-color:var(--lijn-licht)}
@media(min-width:900px){
  .section-divider svg{height:170px}
}
.divider-top-wit,.top-wit{--divider-top:var(--wit)}
.divider-top-bruin-licht,.top-bruin-licht{--divider-top:var(--bruin-licht)}
.divider-top-bruin,.top-bruin{--divider-top:var(--bruin-donker)}
.divider-top-zwart,.top-zwart{--divider-top:var(--zwart)}
.top-zwarter{--divider-top:var(--zwarter)}
.divider-bottom-wit,.bottom-wit{--divider-bottom:var(--wit)}
.divider-bottom-bruin-licht,.bottom-bruin-licht{--divider-bottom:var(--bruin-licht)}
.divider-bottom-bruin,.bottom-bruin{--divider-bottom:var(--bruin-donker)}
.divider-bottom-zwart,.bottom-zwart{--divider-bottom:var(--zwart)}
.divider-bottom-zwarter,.bottom-zwarter{--divider-bottom:var(--zwarter)}
/* ---------- vorm spiegelen, los van de kleuren ---------- */
.section-divider--flip-v svg{transform:scaleY(-1)}
.section-divider--flip-h svg{transform:scaleX(-1)}
.section-divider--flip-both svg{transform:scale(-1,-1)}
@media screen and (max-width:899px){
  .menu-overlay{flex-direction:column;justify-content:flex-start;padding-top:76px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .menu-panel-nav{flex:0 0 auto;padding:12px 24px 24px}
  .menu-panel-nav nav{padding:0}
  .menu-list{width:100%}
  .menu-panel-contact{flex:0 0 auto;border-left:none;border-top:none}
  .menu-contact-inner{align-items:center}
  .menu-list li a{font-size:clamp(1.7rem,9vw,2.6rem)}
  .menu-contact-icons{flex-direction:row;gap:1.75rem}
  .menu-contact-text{display:none}
  .menu-contact-item{padding:10px}
  .vlag{width:20px;height:20px}
  .case-img{order:-1;position:static;overflow:visible;min-height:0}
  .case-img img{position:static;width:100%;height:auto;object-fit:initial}
}
/* ============================================================
   Hieronder: voormalige inhoud van vas.css
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
body,p,h1,h2{font-family:'Excon', sans-serif;font-weight:400;font-style:normal}
.link{text-decoration:none;text-decoration-color:currentColor;text-underline-offset:3px;text-decoration-thickness:1px;transition:opacity .2s ease, text-decoration-thickness .2s ease}
.link:visited{color:inherit}
.link:hover,.link:focus-visible{text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px;opacity:.9;text-decoration-thickness:2px}
.container,.container-1400desk{width:100%;margin:0 auto}
.container-1400{max-width:1400px;width:90%;margin:0 auto}
.container-50{max-width:1400px;width:90%;margin:0 auto}
.ruim{margin:0 0 0 5%}
.thin{font-family:'Excon', sans-serif;font-weight:100}
.dun{font-family:'Excon', sans-serif;font-weight:200}
.bold{font-family:'Excon', sans-serif;font-weight:900}
@font-face{font-family:'Excon';src:url("https://dykz.nl/font/Excon-Thin.woff2") format("woff2");font-style:normal;font-weight:100;font-display:swap}
@font-face{font-family:'Excon';src:url("https://dykz.nl/font/Excon-Regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Excon';src:url("https://dykz.nl/font/Excon-Black.woff2") format("woff2");font-style:normal;font-weight:900;font-display:swap}
@font-face{font-family:'Excon';src:url("https://dykz.nl/font/Excon.woff2") format("woff2");font-style:normal;font-weight:900;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url("https://dykz.nl/font/Mono.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
.line02{line-height:0.2}
.line04{line-height:0.4}
.line06{line-height:0.6}
.line08{line-height:0.8}
.line10{line-height:1.0}
.line12{line-height:1.2}
.line14{line-height:1.4}
.line16{line-height:1.6}
.line18{line-height:1.8}
.scroll-indicator2{display:inline-flex;align-items:center;gap:0.6rem;flex:0 0 auto}
.scroll-indicator-arrow2{display:block;width:20px;height:20px;transform:rotate(45deg);animation:scroll-arrow-sway 1.8s ease-in-out infinite}
.scroll-indicator-arrow2 svg{display:block;width:100%;height:100%}
@keyframes scroll-arrow-sway{0%, 100%{transform:rotate(35deg)}50%{transform:rotate(55deg)}}
.slide-in-wrapper{position:relative;height:70vh}
.slide-in-container{position:relative;overflow:hidden}
.slide-in-container.is-stuck{position:sticky;top:8rem;overflow:visible}
.slide-in-text{white-space:nowrap;display:block}
.caps{text-transform:uppercase}
.zwart{background:var(--zwart)}
.zwarter{background:var(--zwarter)}
.wit{background:var(--wit)}
.t-bruin{color:var(--bruin)}
.t-zwart{color:var(--zwart)}
.t-wit{color:var(--wit)}
.scroll-color-text .word{color:var(--color-off)}
.variant-white-to-black{--color-off:#ffffff;--color-on:#000000}
.variant-white-to-brown{--color-off:#ffffff;--color-on:#88724E}
.stars{font-size:1.1rem;letter-spacing:.15em;color:var(--bruin-donker);margin-bottom:20px}
.bruin-donker{background:var(--bruin-donker)}
.bruin-licht{background:var(--bruin-licht)}
.t-bruin-licht{color:var(--bruin-licht)}
.mono{font-family:var(--font-mono);letter-spacing:.01em}
.tagt{font-family:var(--font-mono);color:var(--bruin-donker);letter-spacing:.01em}
.tagt::before{content:"<";color:currentColor;opacity:.85}
.tagt::after{content:">";color:currentColor;opacity:.85}
.cta{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap}
.btn{font-family:var(--font-mono);padding:15px 26px;border-radius:2px;text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:background .2s,color .2s,border-color .2s}
.btn-primary{background:var(--bruin-donker);color:var(--wit)}
.btn-primary:hover{background:var(--bruin);color:var(--zwart)}
.btn-ghost{border:1px solid var(--zwart);color:var(--zwart)}
.btn-ghost:hover{background:var(--zwart);color:var(--wit)}
.btn-zwart{border:1px solid var(--zwart);background:var(--zwart);color:var(--wit)}
.btn-zwart:hover{border:1px solid var(--wit);background:var(--bruin-donker);color:var(--wit)}
.btn-wit{border:1px solid var(--wit);background:var(--wit);color:var(--zwart)}
.btn-wit:hover{background:var(--bruin-donker);color:var(--wit)}
.cta__contact{margin-top:52px;display:flex;gap:34px;flex-wrap:wrap;justify-content:left;font-family:var(--font-mono);font-size:.88rem}
.cta__contact a{text-decoration:none;color:var(--wit-mute);border-bottom:1px solid var(--lijn-wit);padding-bottom:2px}
.cta__contact a:hover{color:var(--wit);border-color:var(--wit)}
/* ---------- techniek vs cms ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
/* ---------- WhatsApp chatknop (wa-chat) ---------- */
.wa-chat{position:fixed;right:18px;bottom:18px;z-index:9999;isolation:isolate;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.wa-chat__laag{display:none}
.wa-chat__kaart,.wa-chat__knop{position:relative}
.wa-chat__kaart{width:min(360px,calc(100vw - 36px));background:var(--wit);box-shadow:0 20px 50px rgba(0,0,0,.22)}
.wa-chat__kaart[hidden]{display:none}
.wa-chat__kaart:focus{outline:none}
.wa-chat__kop{display:flex;align-items:center;gap:14px;background:var(--bruin);color:var(--bruin-licht);padding:16px 18px}
.wa-chat__kop div{flex:1}
.wa-chat__kop b{display:block;line-height:1.2}
.wa-chat__foto{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--bruin-licht)}
.wa-chat__sluit{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;background:transparent;border:0;color:inherit;cursor:pointer}
.wa-chat__sluit:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
.wa-chat__bericht{background:var(--bruin-licht);padding:24px 18px 20px}
.wa-chat__bericht p{display:inline-block;max-width:270px;margin:0;padding:14px 16px;background:var(--wit);color:var(--zwart)}
.wa-chat__actie{padding:18px}
.wa-chat__veld{display:block;width:100%;box-sizing:border-box;min-height:96px;margin:0 0 14px;padding:14px;background:var(--bruin-licht);color:var(--zwart);border:0;border-radius:0;box-shadow:none;outline:none;font-family:inherit;font-size:1rem;line-height:1.5;resize:none;-webkit-appearance:none;appearance:none}
.wa-chat__veld::placeholder{color:var(--zwart-mute);opacity:1}
.wa-chat__veld:focus,.wa-chat__veld:focus-visible{outline:none;box-shadow:none}
.wa-chat__start{width:100%;justify-content:center;gap:10px;padding:0 16px;white-space:nowrap}
.wa-chat__knop{display:flex;align-items:center;gap:14px;min-height:60px;padding:6px 26px 6px 6px;background:var(--wit);color:var(--zwart);border:1px solid var(--lijn-sterk);box-shadow:0 10px 30px rgba(0,0,0,.18);font-family:inherit;font-size:1.0625rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wa-chat__knop:focus-visible{outline:2px solid var(--bruin);outline-offset:3px}
@media (min-width:769px){.wa-chat{right:32px;bottom:32px}}
@media (max-width:768px){
  .wa-chat.is-open .wa-chat__laag{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5)}
  html.wa-chat-open{overflow:hidden}
}
.footer-links-list{list-style:none;margin:0;padding:0}
.footer-social{display:flex;justify-content:center;gap:28px;padding:32px 0 20px}
.footer-social__item{color:var(--wit);display:flex;align-items:center;justify-content:center;transition:opacity .2s ease}
.footer-social__item svg{width:22px;height:22px}
.footer-social__item:hover,.footer-social__item:focus-visible{opacity:.75}
.footer-copyright{font-family:var(--font-mono);font-size:.75rem;color:var(--wit-mute);text-align:center;padding-bottom:28px}
.footer-legal{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 20px;font-family:var(--font-mono);font-size:.78rem;padding-bottom:16px}
.footer-legal a{color:var(--wit-mute);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease, border-color .2s ease}
.footer-legal a:hover,.footer-legal a:focus-visible{color:var(--wit);border-color:var(--wit)}
@media (max-width:560px){
  .vs{grid-template-columns:1fr}
}
.vs__card{border:1px solid var(--lijn-wit);border-radius:8px;padding:26px 24px}
.vs__card h3{font-family:var(--font-mono);font-size:.85rem;font-weight:500;color:var(--bruin-licht);margin-bottom:16px;text-transform:uppercase;letter-spacing:.06em}
.vs__card--dykz{border-color:var(--groen);background:var(--accent-warm-20)}
.vs__card--dykz h3{color:var(--wit)}
.vs li{display:flex;gap:10px;font-size:.94rem;padding:7px 0;color:var(--wit-mute)}
.vs__card--dykz li{color:var(--wit)}
.vs li .mark{font-family:var(--font-mono);flex-shrink:0;color:var(--wit-mute)}
.vs__card--dykz li .mark{color:var(--groen)}
.megaxl{font-size:2.75rem;font-size:clamp(2.75rem, 1.79rem + 4.81vw, 6rem)}
.mega{font-size:3.2rem;font-size:clamp(3.1rem, 2.53rem + 3.56vw, 5.5rem)}
h1,.groot{font-size:2.1rem;font-size:clamp(2.0rem, 1.64rem + 1.78vw, 3.2rem)}
h2,.medium{font-size:1.5rem;font-size:clamp(1.4rem, 1.25rem + 0.74vw, 1.9rem)}
p,.normaal{font-size:1.3rem;font-size:clamp(1.2rem, 1.11rem + 0.44vw, 1.5rem)}
.klein{font-size:1.0rem;font-size:clamp(0.9rem, 0.81rem + 0.44vw, 1.2rem)}
.meerlogo{font-size:clamp(7.5rem, 5.273rem + 4.69vw, 9.375rem)}
/* 120px → 150px  */
@media(max-width:760px){
  .megaxl{font-size:clamp(2.0625rem, 1.517rem + 2.73vw, 2.8125rem)}
  /* 33px → 45px */
  .mega{font-size:clamp(1.875rem, 1.42rem + 2.27vw, 2.5rem)}
  /* 30px → 40px */
  h1,.groot{font-size:clamp(1.4375rem, 1.165rem + 1.36vw, 1.8125rem)}
  /* 23px → 29px */
  h2,.medium{font-size:clamp(1.25rem, 1.114rem + 0.68vw, 1.4375rem)}
  /* 20px → 23px */
  p,.normaal{font-size:clamp(1.025rem, 0.9068rem + 0.59vw, 1.1875rem)}
  /* 16,4px → 19px */
  .klein{font-size:clamp(0.9625rem, 0.8898rem + 0.36vw, 1.0625rem)}
  /* 15,4px → 17px */
  .meerlogo{font-size:clamp(5.625rem, 4.602rem + 5.11vw, 7.03125rem)}
}
.spacer-md{height:1.5rem;height:clamp(1.5rem, 1rem + 3vw, 2.5rem)}
.spacer-lg{height:5rem;height:clamp(2.5rem, 1.5rem + 3vw, 7.5rem)}
.h-mob{display:none}
.h-desk{display:block}
.rowvol{display:flex;flex-direction:column}
.row{display:flex;gap:5%;flex-direction:column}
.col-25,.col-30,.col-33,.col-40,.col-50,.col-60,.col-70{width:100%}
.sticky-content{position:sticky;top:calc(var(--header-h, 50px) + 0.5rem)}
.vert-links{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.center{text-align:center}
.rechts{text-align:right}
.moblinks{text-align:left}
/* ============ IMPACT: mega tekst die "eruit knalt" ============ */
.impact{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--zwarter);color:var(--wit);padding:4rem 1.5rem;text-align:center}
/* Zachte ambient gloed achter de tekst, blijft na binnenkomst rustig
   ademen — zelfde soort effect als de gloed in het hamburgermenu. */
.impact-glow{position:absolute;width:50vmax;height:50vmax;border-radius:50%;background:radial-gradient(circle, var(--accent-warm-35), transparent 70%);top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none;filter:blur(30px);opacity:0;transition:opacity 1.2s ease}
.impact.is-in-view .impact-glow{opacity:1;animation:impact-glow-breathe 6s ease-in-out 1.2s infinite}
@keyframes impact-glow-breathe{0%, 100%{opacity:.7;transform:translate(-50%, -50%) scale(1)}50%{opacity:1;transform:translate(-50%, -50%) scale(1.08)}}
.impact-text{position:relative;z-index:1;margin:0;max-width:1400px;font-family:'Excon', sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-0.02em;line-height:0.95;font-size:2.75rem;font-size:clamp(2.75rem, 1.79rem + 4.81vw, 6rem)}
.impact-word{display:inline-block;opacity:0;filter:blur(22px);transform:scale(0.4);will-change:transform, filter, opacity}
.impact.is-in-view .impact-word{animation:impact-word-in 0.9s cubic-bezier(.16, 1.4, .4, 1) forwards}
@keyframes impact-word-in{0%{opacity:0;filter:blur(22px);transform:scale(0.4)}60%{opacity:1;filter:blur(0);transform:scale(1.08)}100%{opacity:1;filter:blur(0);transform:scale(1)}}
/* stagger: elk woord iets later, zodat de zin "opgebouwd" wordt i.p.v.
   in één keer te verschijnen */
.impact.is-in-view .impact-word:nth-child(1){animation-delay:.05s}
.impact.is-in-view .impact-word:nth-child(2){animation-delay:.16s}
.impact.is-in-view .impact-word:nth-child(3){animation-delay:.27s}
.impact.is-in-view .impact-word:nth-child(4){animation-delay:.38s}
.impact.is-in-view .impact-word:nth-child(5){animation-delay:.49s}
.impact.is-in-view .impact-word:nth-child(6){animation-delay:.64s}
.impact-word--accent{color:var(--accent-warm)}
.seal{width:50%;aspect-ratio:1/1;border-radius:50%;border:2px dashed var(--bruin-donker);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-display);flex-shrink:0;background:var(--wit);margin:0 auto}
.seal b{font-size:2.6rem;font-weight:700;line-height:1}
.seal span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;margin-top:6px;color:var(--zwart-zacht);text-align:center;text-transform:uppercase}
.avatar{width:50%;height:50%;border-radius:50%;background:var(--bruin);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;margin:0 auto}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.a-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--groen);margin-right:10px;vertical-align:middle}
.a-link{display:inline-block;color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding:4px 0}
.a-link:hover{color:var(--bruin)}
.zwart .a-link:hover,.zwarter .a-link:hover{color:var(--bruin-licht)}
.a-lijn{border-top:1px solid var(--lijn-sterk);padding-top:28px}
.zwart .a-lijn,.zwarter .a-lijn{border-top-color:var(--lijn-wit-zacht)}
.a-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px}
.a-inline{display:flex;flex-wrap:wrap;align-items:center;gap:14px 36px;list-style:none;padding:0;margin:0}
/* --- Toegankelijkheid: zichtbare focus voor toetsenbordgebruikers (WCAG 2.4.7 / 2.4.11) --- */
main a:focus-visible,main button:focus-visible,main summary:focus-visible{outline:2px solid var(--bruin);outline-offset:4px}
.zwart a:focus-visible,.zwarter a:focus-visible,.zwarter button:focus-visible{outline-color:var(--bruin-licht)}
.a-card:focus-visible{outline-offset:8px}
/* --- Pauzeknop voor de case-video's (WCAG 2.2.2) --- */
.a-vidknop{background:none;border:0;border-bottom:1px solid currentColor;padding:4px 0;cursor:pointer}
.a-vidknop:hover{color:var(--wit)}
.wit .a-vidknop:hover,.bruin-licht .a-vidknop:hover{color:var(--bruin)}
/* --- Knoppen: font via .mono, hoofdletters via .caps, rechte hoeken --- */
.a-btns{display:flex;flex-wrap:wrap;gap:12px}
.a-btn{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 28px;font-weight:400;letter-spacing:.06em;line-height:1.3;text-decoration:none;border:1px solid transparent;box-sizing:border-box;transition:background .2s,color .2s,border-color .2s}
.a-btn--primary{background:var(--bruin);color:var(--wit)}
.a-btn--primary:hover{background:var(--zwart);color:var(--wit)}
.zwart .a-btn--primary:hover,.zwarter .a-btn--primary:hover{background:var(--bruin-licht);color:var(--zwart)}
.a-btn--ghost{border-color:var(--zwart);color:var(--zwart)}
.a-btn--ghost:hover{background:var(--zwart);color:var(--wit)}
.a-btn--licht{background:var(--bruin-licht);color:var(--zwart)}
.a-btn--licht:hover{background:var(--wit)}
/* --- Feiten onder de hero (4 kolommen) --- */
.a-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0;margin:0;background:var(--wit)}
.a-facts li{padding:36px 28px;border-right:1px solid var(--lijn-sterk);display:flex;flex-direction:column;gap:8px}
.a-facts li:last-child{border-right:0}
.a-facts b{line-height:1.05;letter-spacing:-.02em}
/* --- Uitgelichte case: video met cijfers --- */
.a-feat{position:relative;aspect-ratio:16/8;overflow:hidden;background:var(--media-bg)}
.a-feat video,.a-feat img,.a-card__media video,.a-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.a-feat__stats{position:absolute;left:0;bottom:0;display:flex;background:var(--bruin-licht);color:var(--zwart)}
.a-feat__stats div{padding:24px 32px;display:flex;flex-direction:column;gap:6px}
.a-feat__stats div+div{border-left:1px solid var(--lijn-sterk)}
.a-feat__stats b{line-height:1;letter-spacing:-.02em}
/* --- Case-kaarten (3 kolommen) + kleine foto bij "Meer werk" --- */
.a-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.a-card{display:flex;flex-direction:column;gap:16px;color:inherit;text-decoration:none}
.a-card__media{aspect-ratio:16/10;overflow:hidden;background:var(--media-bg)}
.a-card:hover h3{text-decoration:underline;text-underline-offset:6px}
.a-thumb{width:56px;height:56px;object-fit:cover;display:inline-block;vertical-align:middle;margin-right:12px;filter:grayscale(1);transition:filter .3s}
li:hover > .a-thumb{filter:none}
/* --- Genummerde lijst met lijnen (A/B/C) --- */
.a-list{list-style:none;padding:0;margin:0}
.a-list li{display:flex;gap:20px;padding:20px 0;border-top:1px solid var(--zwart)}
.a-list li:last-child{border-bottom:1px solid var(--zwart)}
/* --- PageSpeed-scores (5 kolommen, wit vlak) --- */
.a-scores{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;padding:0;margin:0;background:var(--wit)}
.a-scores li{padding:36px 28px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--lijn-zacht)}
.a-scores li:last-child{border-right:0}
.a-scores b{line-height:1;letter-spacing:-.04em;font-weight:900}
/* --- Werkwijze: 3 stappen --- */
.a-steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:0}
.a-steps li{background:var(--wit);padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:16px}
.a-stapnr{line-height:1;font-weight:300;color:var(--bruin)}
.zwart .a-stapnr,.zwarter .a-stapnr{color:var(--bruin-licht)}
/* --- Prijskaart + lijst met lijnen --- */
.a-price{background:var(--zwart);color:var(--bruin-licht);padding:clamp(32px,4vw,56px);display:flex;flex-direction:column;gap:24px;height:100%;box-sizing:border-box}
.a-incl{list-style:none;padding:0;margin:0}
.a-incl li{padding:16px 0;border-top:1px solid var(--lijn-sterk)}
.a-incl li:last-child{border-bottom:1px solid var(--lijn-sterk)}
.zwart .a-incl li,.zwarter .a-incl li,.zwarter .a-list li{border-color:var(--lijn-wit-zacht)}
/* --- Vergelijkingstabel --- */
.a-table-wrap{overflow-x:auto}
.a-table{width:100%;border-collapse:collapse;min-width:520px}
.a-table th,.a-table td{text-align:left;padding:20px 16px 20px 0;vertical-align:top;border-top:1px solid var(--lijn-sterk)}
.a-table thead th{font-weight:400;padding-top:0;border-top:0}
.a-table tbody th{font-weight:300}
.a-table tbody tr:first-child > *{border-top-color:var(--zwart)}
.a-table tbody tr:last-child > *{border-bottom:1px solid var(--zwart)}
.a-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* --- Garantiezegel --- */
.a-seal{display:flex;align-items:center;gap:28px;padding-top:28px;border-top:1px solid var(--zwart)}
.a-seal b{font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--bruin)}
/* --- Responsive (row/col regelt new.php zelf) --- */
@media (max-width:1000px){
  .a-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .a-facts li{padding-left:12px!important;border-right:1px solid var(--lijn-sterk);border-bottom:1px solid var(--lijn-sterk)}
  .a-facts li:nth-child(2n){border-right:0}
  .a-scores{grid-template-columns:repeat(3,minmax(0,1fr))}
  .a-scores li{border-bottom:1px solid var(--lijn-zacht)}
  .a-cards{grid-template-columns:1fr 1fr}
  .a-steps{grid-template-columns:1fr}
}
@media (max-width:760px){
  .a-scores{grid-template-columns:1fr 1fr}
  .a-cards{grid-template-columns:1fr}
  .a-feat{aspect-ratio:auto}
  .a-feat video,.a-feat img{aspect-ratio:16/8;height:auto}
  .a-feat__stats{position:static}
  .a-feat__stats div{flex:1 1 0;padding:20px}
  .a-btn{width:100%;justify-content:center;text-align:center;padding:14px 20px}
}
/* --- Contact: lijst met vinkjes --- */
.b-contact__list{list-style:none;padding:0}
.b-contact__list li{color:var(--wit-80)}
.b-contact__list li::before{content:"✓";color:var(--groen)}
/* --- Techniek: kaarten (3 naast elkaar, op tablet 2, op mobiel 1) --- */
.a-techgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;list-style:none;padding:0;margin:0}
.a-tech{display:flex;flex-direction:column;gap:8px;width:100%;height:100%;box-sizing:border-box;text-align:left;padding:clamp(20px,2vw,28px);background:var(--wit);border:1px solid transparent;color:var(--zwart);font-family:inherit;line-height:inherit;cursor:pointer;transition:border-color .2s,transform .2s}
.a-tech > span{display:block}
.a-tech:hover{border-color:var(--bruin);transform:translateY(-2px)}
.a-tech:hover .a-tech__more{text-decoration:underline;text-underline-offset:4px}
.a-tech > .a-tech__top{display:flex;justify-content:space-between;align-items:center}
.a-tech__icon{display:block;width:28px;height:28px;color:var(--bruin)}
.a-tech__icon svg,.a-modal__close svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.a-tech__more{margin-top:auto;padding-top:8px}
/* --- Techniek: pop-up (desktop 90% breed en gecentreerd, mobiel schermvullend; kruis blijft staan bij scrollen) --- */
.a-modal{position:fixed;inset:0;margin:auto!important;width:90%;max-width:none;height:fit-content;max-height:calc(100% - 4px);padding:0;border:0;background:var(--bruin-licht);color:var(--zwart);overflow:hidden;box-sizing:border-box}
.a-modal[open]{display:flex;flex-direction:column;animation:a-modal-in .25s ease-out}
.a-modal::backdrop{background:var(--overlay)}
@keyframes a-modal-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html:has(.a-modal[open]){overflow:hidden}
.a-modal__in{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 0 clamp(28px,5vw,56px);display:flex;flex-direction:column;gap:20px}
.a-modal__in h3,.a-modal__in p,.a-modal__in ul{margin:0}
.a-modal__close{position:absolute;top:12px;right:12px;z-index:2;width:48px;height:48px;padding:12px;box-sizing:border-box;border:0;border-radius:50%;background:var(--bruin-licht);color:var(--zwart);cursor:pointer}
.a-modal__close:hover{background:var(--wit);color:var(--bruin)}
/* titel krijgt bij openen de focus (voor schermlezers), zonder focusrand: het is geen knop */
.a-modal [tabindex="-1"]:focus,.a-modal [tabindex="-1"]:focus-visible{outline:none}
/* Mobiel: pop-up schermvullend */
@media (max-width:760px){
  .a-modal{width:100%;height:100%;height:100dvh;max-height:none}
}
/* --- Reviews --- */
.r-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,3vw,48px)}
.r-hero{background:var(--bruin);color:var(--bruin-licht);padding:clamp(32px,4vw,64px);margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.r-hero blockquote,.r-side blockquote{margin:0}
.r-side{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;justify-content:space-between}
.r-side li{border-top:1px solid var(--zwart);padding:28px 0}
.r-side li:last-child{border-bottom:1px solid var(--zwart)}
.r-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 36px;border-top:1px solid var(--lijn-sterk);padding-top:24px}
@media (max-width:760px){
  .r-grid{grid-template-columns:1fr}
}
/* --- Effecten bij in beeld komen (alleen met JS en zonder "minder beweging"; zonder JS staat alles gewoon) --- */
.a-steps::before{content:"";position:absolute;left:0;right:0;top:-28px;height:1px;background:var(--bruin);transform-origin:left}
.a-anim .a-in{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--vertraging,0ms)}
.a-anim .a-in.is-in{opacity:1;transform:none}
.a-anim .a-steps::before{transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.a-anim .a-steps.is-in::before{transform:none}
/* --- Scroll naar resultaten: zacht scrollen, daarna schuift de kop in beeld (alleen zonder "minder beweging") --- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  #resultaten:target #cases-title{animation:a-land .9s .35s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes a-land{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .a-btn,.a-thumb,.a-tech{transition:none}
  .a-tech:hover{transform:none}
  .a-modal[open]{animation:none}
}
@media screen and (min-width: 900px){
  .ruim{margin:0 0 0 20%}
  .scroll-indicator-arrow2{width:40px;height:40px}
  .container-1400desk{max-width:1400px;width:90%;margin:0 auto}
  .container-50{max-width:1400px;width:50%;margin:0 auto}
  .h-mob{display:block}
  .h-desk{display:none}
  .rowvol{flex-direction:row}
  .row{flex-direction:row}
  .col-25{width:25%}
  .col-30{width:30%}
  .col-40{width:40%}
  .col-50{width:50%}
  .col-60{width:60%}
  .col-70{width:70%}
  .col-33{width:33.3333%}
  .moblinks{text-align:inherit}
}
@media screen and (min-width:900px) and (max-width:1199px){
  .col-25{width:15%}
  .col-70{width:80%}
}
/* ============ FAQ ============ */
.faq{max-width:100%;margin:0 auto}
.faq-item{border-bottom:1px solid var(--lijn)}
.faq-item:first-child{border-top:1px solid var(--lijn)}
/* de <summary> is de klikbare vraagregel — verberg de browser-eigen
     pijltjes/driehoekjes zodat alleen ons eigen plus/min-icoon overblijft */
.faq-q{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 4px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.faq-q::-webkit-details-marker{display:none}
.faq-q::marker{content:""}
.faq-item:hover .faq-q-text{color:var(--bruin)}
/* plus/min-icoon: twee balkjes over elkaar. bij [open] schaalt de
     verticale balk naar 0 — een "+" morft zo zonder tekstwissel naar "–" */
.faq-icon{position:relative;width:18px;height:18px;flex-shrink:0;color:var(--bruin)}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;top:50%;left:50%;background:currentColor;border-radius:1px;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.faq-icon::before{/* horizontale balk, altijd zichtbaar */ width:100%;height:2px;transform:translate(-50%, -50%)}
.faq-icon::after{/* verticale balk, verdwijnt bij open */ width:2px;height:100%;transform:translate(-50%, -50%) scaleY(1)}
.faq-item[open] .faq-icon::after{transform:translate(-50%, -50%) scaleY(0)}
.faq-item[open] .faq-icon{color:var(--zwart)}
.faq-a{padding:0 4px 24px}
.faq-q:focus-visible{outline:2px solid var(--bruin);outline-offset:4px;border-radius:2px}
@media (prefers-reduced-motion: reduce){
  .faq-icon::before,.faq-icon::after{transition:none}
}
@media (max-width: 560px){
  .faq-q{padding:18px 2px;gap:16px}
  .faq-a{padding:0 2px 20px}
}

/* ============ DAG & NACHT ============
   Standaard: dag (bovenstaande kleuren). Nacht via <html data-thema="nacht">, alleen met de knop.
   Lichte vlakken worden donker; zwarte secties, het menu en de impact-sectie blijven zoals ze zijn.
   Alle tekstkleuren halen WCAG AAA (minimaal 7:1). */
html[data-thema="nacht"]{color-scheme:dark;
--wit:#14120F;--bruin-licht:#201C17;--zwart:#F2EDE4;--bruin:#C8B592;--bruin-donker:#D2C2A3;
--zwart-zacht:rgba(242,237,228,.8);--zwart-mute:rgba(242,237,228,.6);
--lijn:rgba(242,237,228,.14);--lijn-zacht:rgba(242,237,228,.12);--lijn-sterk:rgba(242,237,228,.18);
--header-bg:rgba(20,18,15,.86)}
html[data-thema="nacht"] .zwart,html[data-thema="nacht"] .zwarter,html[data-thema="nacht"] .impact,html[data-thema="nacht"] .menu-overlay,html[data-thema="nacht"] .site-header.menu-open{
--wit:#ffffff;--bruin-licht:#f2ede4;--zwart:#111111;--bruin:#5B4C34;--bruin-donker:#4E4130;
--zwart-zacht:rgba(0,0,0,.72);--zwart-mute:rgba(0,0,0,.5);
--lijn:rgba(0,0,0,.12);--lijn-zacht:rgba(0,0,0,.1);--lijn-sterk:rgba(0,0,0,.15)}
/* zachte overgang bij wisselen, niet bij "minder beweging" (dat regelt het script) */
html.thema-overgang,html.thema-overgang *{transition:background-color .3s ease,color .3s ease,border-color .3s ease!important}

/* --- Knop dag/nacht in de header --- */
.thema-knop{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;background:none;border:0;border-radius:50%;color:var(--zwart);cursor:pointer}
.thema-knop svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.thema-knop .icoon-zon{display:none}
html[data-thema="nacht"] .thema-knop .icoon-maan{display:none}
html[data-thema="nacht"] .thema-knop .icoon-zon{display:block}
.site-header.menu-open .thema-knop{color:var(--zwart)}

/* --- Over-pagina --- */
.o-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;list-style:none;padding:0;margin:0}
.o-kaart{background:var(--wit);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:14px}
.o-kaart--licht{background:var(--bruin-licht)}
.o-kaart .a-link{margin-top:auto;align-self:flex-start}
.o-quote{background:var(--zwart);color:var(--wit);padding:clamp(32px,5vw,72px);margin:0}
.o-quote blockquote{margin:0}

/* --- Kruimelpad onder de navigatie (alleen op diepere pagina's) --- */
.kruimelpad{padding-top:calc(var(--header-h,88px) + 16px);padding-bottom:clamp(24px,4vw,48px)}
.kruimelpad + main{padding-top:0}
.kruimelpad ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;list-style:none;margin:0;padding:0;color:var(--bruin)}
.kruimelpad a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.kruimelpad a:hover,.kruimelpad a:focus-visible{border-bottom-color:currentColor}
.kruimelpad [aria-current="page"]{color:var(--zwart)}
.kruimelpad-sep{margin:0 10px}

/* --- Case-pagina's: screenshots (desktop met mobiel erover, en een brede + kleine naast elkaar) --- */
.c-media{overflow:hidden;background:var(--media-bg)}
.c-media img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.c-stack figure,.c-duo figure{margin:0}
.c-stack{position:relative;padding:0 14% 10% 0}
.c-stack__desk .c-media{aspect-ratio:16/10}
.c-stack__mob{position:absolute;right:0;bottom:0;width:26%;border:clamp(4px,.6vw,8px) solid var(--zwarter)}
.c-stack__mob .c-media{aspect-ratio:9/19.5}
.c-duo{display:grid;grid-template-columns:1fr;gap:24px}
.c-duo figure{display:flex;flex-direction:column;gap:10px}
.c-duo__breed .c-media{aspect-ratio:16/9}
.c-duo__klein .c-media{aspect-ratio:4/3}
@media(min-width:900px){
  .c-duo{grid-template-columns:2fr 1fr;align-items:end}
  .c-duo__klein{margin-bottom:12%}
}
/* --- Case-pagina's: resultaattegels voor en na --- */
.c-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;list-style:none;margin:0;padding:0}
.c-tegels li{background:var(--bruin-licht);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:10px}
.c-tegels__was{margin-top:auto;padding-top:14px;border-top:1px solid var(--lijn-sterk)}

/* ============ NAVIGATIE H: band + balk met dropdowns ============
   Plak onder het bestaande header-blok in je CSS (of laad als apart bestand).
   Gebruikt je bestaande variabelen; nacht werkt automatisch mee via html[data-thema="nacht"].
   Desktop-nav vanaf 1200px; daaronder blijft het hamburgermenu. */

/* --- donkere utility-band (blijft donker in dag én nacht) --- */
.nv-band{display:none;background:#111111;color:#F2EDE4;font-family:var(--font-mono);font-size:.8125rem;letter-spacing:.03em}
html[data-thema="nacht"] .nv-band{background:#2A2521}
.nv-band-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px}
.nv-taal{color:inherit;text-decoration:none}
.nv-instel{display:flex;align-items:center;gap:14px}
.nv-band a:focus-visible,.nv-band button:focus-visible{outline:2px solid #F2EDE4;outline-offset:4px}
.nv-menu-instel a:focus-visible,.nv-menu-instel button:focus-visible{outline:2px solid var(--bruin);outline-offset:4px}

/* groen bolletje (van de afspraak-pagina), pulseert subtiel; staat stil bij "minder beweging" */
.status-badge{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.status-badge:hover .nv-band-tekst{text-decoration:underline;text-underline-offset:4px}
.appointment-section__status{display:inline-block;flex-shrink:0;width:10px;height:10px;border-radius:50%;background:#4caf50;animation:appointment-status-pulse 1.8s infinite}
@keyframes appointment-status-pulse{0%{box-shadow:0 0 0 0 rgba(76,175,80,.8)}70%{box-shadow:0 0 0 10px rgba(76,175,80,0)}100%{box-shadow:0 0 0 0 rgba(76,175,80,0)}}
@media (prefers-reduced-motion:reduce){.appointment-section__status{animation:none}}

/* tekst in de zwarte band: status en taalknop hebben dezelfde maat */
.nv-band-tekst{font-family:var(--font-mono);font-size:.8125rem;letter-spacing:.06em;line-height:1.5}

/* taalknop: alleen de andere taal, zonder rand */
.nv-taal{display:inline-flex;align-items:center;gap:8px;min-height:24px;padding:2px 0;color:inherit}
.nv-taal svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.nv-taal:hover{text-decoration:underline;text-underline-offset:4px}

/* dag/nacht: herkenbare schakelaar (role="switch"), zon links, maan rechts */
.nv-schakel{position:relative;display:inline-block;width:52px;height:28px;padding:0;border:1px solid #F2EDE4;border-radius:999px;background:transparent;cursor:pointer;flex-shrink:0}
.nv-schakel-knop{position:absolute;top:3px;left:3px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#F2EDE4;color:#111111;transition:transform .2s ease}
.nv-schakel-knop svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nv-schakel .nv-i-maan{display:none}
.nv-schakel[aria-checked="true"] .nv-schakel-knop{transform:translateX(24px)}
.nv-schakel[aria-checked="true"] .nv-i-zon{display:none}
.nv-schakel[aria-checked="true"] .nv-i-maan{display:block}

/* --- balk --- */
.nv-nav{display:none}
.nv-cta{display:none}
.nv-lijst{display:flex;align-items:center;gap:clamp(8px,1.1vw,18px);list-style:none;margin:0;padding:0}
.nv-lijst>li{position:relative}
.nv-lijst a,.nv-sub-knop{color:var(--zwart);text-decoration:none;transition:color .2s ease}
.nv-heeft-sub{display:flex;align-items:center;gap:0}
.nv-sub-knop{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:none;border:0;padding:0;cursor:pointer}
.nv-sub-knop svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s ease}
.nv-sub-knop[aria-expanded="true"] svg{transform:rotate(180deg)}
.nv-lijst>li>a:hover,.nv-sub-knop:hover,.nv-sub-knop[aria-expanded="true"],.nv-heeft-sub:hover>.nv-sub-link,.nv-heeft-sub:focus-within>.nv-sub-link{color:var(--bruin)}
.nv-lijst>li>a[aria-current="page"],.nv-heeft-sub.is-actief>.nv-sub-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}
.nv-cta{white-space:nowrap}

/* --- mega menu: volle breedte onder de balk --- */
.nv-balk .container-1400{position:relative}
.nv-lijst>li.nv-heeft-sub{position:static}
.nv-sub{position:absolute;top:100%;left:0;right:0;background:var(--bruin-licht);color:var(--zwart);border:1px solid var(--lijn-sterk);box-shadow:0 24px 40px rgba(0,0,0,.14);z-index:70}
/* onzichtbare brug: muis kan rustig van het menu-item naar het uitgeklapte menu zonder dat het sluit */
.nv-sub::before{content:"";position:absolute;left:0;right:0;top:-40px;height:40px}
.nv-sub[hidden]{display:none}
.nv-mega{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;align-items:stretch}
.nv-mega a{display:flex;flex-direction:column;gap:10px;height:100%;box-sizing:border-box;padding:clamp(24px,3vw,40px);color:inherit;text-decoration:none;transition:background .15s ease,color .15s ease}
.nv-mega-pijl{margin-top:auto;padding-top:16px;opacity:1!important}
.nv-lijst .nv-mega a.nv-mega-intro{background:#111111;color:#F2EDE4}
html[data-thema="nacht"] .nv-lijst .nv-mega a.nv-mega-intro{background:#2A2521}
.nv-lijst .nv-mega a.nv-mega-intro:hover{background:var(--bruin-donker);color:var(--wit)}
.nv-mega-kaarten{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;margin:0;padding:0}
.nv-mega-kaarten li+li{border-left:1px solid var(--lijn)}
.nv-mega-kaarten a:hover,.nv-mega-kaarten a:focus-visible{background:var(--accent-warm-20)}
.nv-mega a[aria-current="page"] b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* --- vanaf 1200px: nav in plaats van hamburger --- */
@media (min-width:1200px){
  .nv-band{display:block}
  .nv-balk-inner{gap:1.5rem}
  .nv-nav{display:block;flex:1}
  .nv-lijst{justify-content:center}
  .nv-cta{display:inline-flex}
  .nv-balk .hamburger{display:none}
  .nv-balk .header-right{gap:0}
}

/* --- mobiele overlay: submenu's + taal/thema onderin --- */
.menu-sublist{list-style:none;padding:0;margin:.25rem 0 .75rem 0;display:flex;flex-direction:column;gap:.5rem}
.menu-sublist[hidden]{display:none}
.menu-sublist svg{display:inline-block;width:14px;height:14px;margin-left:.4em;vertical-align:-1px}
/* lijntje tussen de hoofdonderwerpen */
.menu-list>li{margin:0;padding:.35rem 0;border-bottom:1px solid var(--lijn-sterk)}
/* items zonder pijlknop even hoog als die met knop (48px) */
.menu-list>li>a{display:flex;align-items:center;min-height:48px}
.menu-sublist li{margin:0;overflow:hidden}
/* link + pijlknop naast elkaar; de knop klapt het submenu open (maximaal één tegelijk, zie navi.php) */
.menu-rij{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.menu-sub-toggle{flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;background:transparent;border:1px solid var(--lijn-sterk);border-radius:0;color:var(--zwart);cursor:pointer;transition:color .2s ease,border-color .2s ease}
.menu-sub-toggle:hover{color:var(--bruin);border-color:var(--bruin)}
.menu-sub-toggle:focus-visible{outline:2px solid var(--bruin);outline-offset:-5px}
.menu-sub-toggle svg{width:18px;height:18px;transition:transform .2s ease}
.menu-sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
/* tekstgrootte en gewicht komen uit de classes op de span (normaal bold / klein thin) */
.menu-list li a{font-size:1rem;line-height:1.3}
.menu-overlay.is-open .menu-list li:nth-child(5) a{transition-delay:.44s}
.menu-list a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.nv-menu-instel{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:.5rem}
.nv-menu-instel .nv-taal{color:var(--zwart)}
.nv-menu-instel .nv-schakel{border-color:var(--zwart)}
.nv-menu-instel .nv-schakel-knop{background:var(--zwart);color:var(--bruin-licht)}
@media screen and (max-width:899px){
  .nv-menu-instel{justify-content:center}
  .nv-menu-instel .nv-schakel{width:56px;height:32px}
  .nv-menu-instel .nv-schakel-knop{top:3px;left:3px;width:24px;height:24px}
  .nv-menu-instel .nv-schakel[aria-checked="true"] .nv-schakel-knop{transform:translateX(24px)}
}
@media (prefers-reduced-motion:reduce){
  .nv-sub-knop svg,.nv-lijst a,.nv-cta,.nv-schakel-knop,.menu-sub-toggle,.menu-sub-toggle svg{transition:none}
}

/* --- mobiel menu: knoppen "check je website" en "maak een afspraak" --- */
.nv-menu-cta{margin-bottom:.5rem}
.menu-overlay .a-btn--primary:hover{background:var(--zwart);color:var(--wit)}
@media screen and (max-width:899px){
  .nv-menu-cta{align-self:stretch;justify-content:center}
}
.menu-overlay.is-open .menu-list li:nth-child(6) a{transition-delay:.5s}
/* vaste WhatsApp-knop (elders in de pagina) verbergen zolang het menu open staat */
html:has(.menu-overlay.is-open) .wa-chat{display:none}
/* menu begint onder de header, ook als die hoger is dan gedacht */
.menu-overlay{padding-top:var(--header-h,76px)}
@media screen and (max-width:899px){
  .menu-overlay{padding-top:calc(var(--header-h,76px) + 24px)}
}
/* --- Footer (ft-) --- */
.ft-top{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:32px}
.ft-cta{gap:16px}
/* Footer-logo als SVG (DY/KZ. in cirkel). Kleuren via de themavariabelen, dus nacht werkt vanzelf mee */
.ft-logo{display:inline-block;width:clamp(200px, 9rem + 12vw, 320px);line-height:0;border-radius:50%;color:var(--zwart);--logo-cirkel:var(--wit);--logo-punt:var(--bruin);text-decoration:none}
.ft-logo img,.ft-logo svg{display:block;width:100%;height:auto}
.ft-logo:focus-visible{outline:3px solid var(--bruin);outline-offset:4px}
.ft-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:56px;border-top:1px solid var(--lijn-sterk)}
.ft-info{grid-column:1 / span 4}
.ft-nav{grid-column:5 / span 8;display:grid;grid-template-columns:1fr 1fr auto;column-gap:40px}
.ft-nav h2{margin:0;padding-bottom:16px;border-bottom:2px solid var(--zwart)}
.ft-nav ul{list-style:none;margin:0;padding:0}
.ft-nav li{border-bottom:1px solid var(--lijn-sterk)}
.ft-nav a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;color:inherit;text-decoration:none}
.ft-nav a svg{flex:none;display:inline-block}
@media (min-width:1201px){.ft-nav a span{white-space:nowrap}}
.ft-nav a:focus-visible{outline:2px solid var(--bruin);outline-offset:-2px}
@media (max-width:1200px){
  .ft-info,.ft-nav{grid-column:1 / -1}
  .ft-nav{margin-top:48px}
}
@media (max-width:640px){
  .ft-nav{grid-template-columns:1fr 1fr;row-gap:40px}
  .ft-nav > div:last-child{grid-column:1 / -1}
  .ft-cta{width:100%}
  .ft-cta .a-btn{width:100%;justify-content:center}
}
/* --- Reviews (rv-) --- */
.rv-uitgelicht{margin:0;max-width:1100px}
.rv-uitgelicht p{margin:0}
.rv-rij{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:40px 0;border-top:1px solid var(--lijn-sterk)}
.rv-rij:last-of-type{border-bottom:1px solid var(--lijn-sterk)}
.rv-naam{grid-column:1 / span 3}
.rv-naam h3{margin:0}
.rv-sterren{margin:.5rem 0 0;letter-spacing:.1em}
.rv-tekst{grid-column:4 / span 6}
.rv-tekst p{margin:0}
.rv-links{grid-column:10 / span 3;list-style:none;margin:0;padding:0;text-align:right}
.rv-links li{margin:0 0 .6rem}
.rv-links a{text-decoration:none}
.rv-links a:hover,.rv-links a:focus-visible{text-decoration:underline;text-underline-offset:.25em}
@media (max-width:900px){
  .rv-naam,.rv-tekst,.rv-links{grid-column:1 / -1}
  .rv-tekst{margin-top:1rem}
  .rv-links{margin-top:1.25rem;text-align:left}
}

/* ============ Footer-logo: motion "De punt" ============
   Cirkel veert op, DY en KZ schuiven in, de punt valt en stuitert na.
   Start via .is-in (basis.js), staat stil bij prefers-reduced-motion. */
.dykz-logo{display:block;width:100%;height:auto;overflow:visible;color:var(--zwart,#111)}
.dykz-logo .cirkel{fill:var(--logo-cirkel,#fff)}
.dykz-logo .l{fill:currentColor}
.dykz-logo .punt{fill:var(--logo-punt,#5B4C34)}
.dykz-logo .cirkel,.dykz-logo .rij1,.dykz-logo .rij2,.dykz-logo .punt,.dykz-logo .punt-hop,.dykz-logo .l{transform-box:fill-box;transform-origin:center}

@media (prefers-reduced-motion:no-preference){
.js-motion .motion-punt .cirkel{transform:scale(.6);opacity:0}
.js-motion .motion-punt .rij1{transform:translateY(-28px);opacity:0}
.js-motion .motion-punt .rij2{transform:translateX(-34px);opacity:0}
.js-motion .motion-punt .punt{transform:translateY(-150px);opacity:0}
.is-in .motion-punt .cirkel{animation:a-cirkel .55s cubic-bezier(.2,1.4,.4,1) forwards}
.is-in .motion-punt .rij1{animation:a-in .5s cubic-bezier(.2,.8,.2,1) .3s forwards}
.is-in .motion-punt .rij2{animation:a-in .5s cubic-bezier(.2,.8,.2,1) .48s forwards}
.is-in .motion-punt .punt{animation:a-val .9s cubic-bezier(.3,0,.3,1) .95s forwards}
.motion-punt:hover .punt-hop{animation:a-hop .6s cubic-bezier(.3,0,.3,1)}
@keyframes a-cirkel{to{transform:scale(1);opacity:1}}
@keyframes a-in{to{transform:none;opacity:1}}
@keyframes a-val{0%{transform:translateY(-150px);opacity:1}45%{transform:translateY(0) scale(1.15,.8)}62%{transform:translateY(-22px) scale(.95,1.05)}78%{transform:translateY(0) scale(1.06,.94)}88%{transform:translateY(-5px)}100%{transform:none;opacity:1}}
@keyframes a-hop{0%,100%{transform:none}35%{transform:translateY(-18px)}55%{transform:translateY(0) scale(1.12,.88)}75%{transform:translateY(-4px)}}
}

/* ============ Header-logo: versie B (hangend embleem, krimpt bij scrollen) ============
   Bovenaan de pagina hangt het ronde logo over de onderrand van de balk.
   Na scrollen (.is-solid, gezet door basis.js) krimpt het naar balkformaat;
   de witte cirkel valt dan weg tegen de header en het DY/KZ.-merk blijft over.
   De link zelf houdt altijd de kleine maat, zodat de navigatie niet verschuift.
   Maten zonder eenheid (px): --lg = groot, --lk = klein. */
.nv-logo{--lg:96;--lk:44;position:relative;z-index:1;flex:none;display:block;width:calc(var(--lk) * 1px);height:calc(var(--lk) * 1px);border-radius:50%;color:var(--zwart);--logo-cirkel:var(--wit);--logo-punt:var(--bruin);text-decoration:none}
.nv-logo .dykz-logo{position:absolute;top:0;left:0;width:calc(var(--lg) * 1px);height:calc(var(--lg) * 1px);max-width:none;filter:drop-shadow(0 12px 24px rgba(0,0,0,.12));transition:width .8s cubic-bezier(.45,0,.2,1),height .8s cubic-bezier(.45,0,.2,1),top .8s cubic-bezier(.45,0,.2,1),filter .6s ease}
/* na scrollen: het logo neemt de helft van de ruimte boven en onder (--hp = padding van de balk) in, zodat het groter oogt zonder dat de header hoger wordt */
.nv-logo{--hp:clamp(12px, 2.5vh, 24px)}
.site-header.is-solid .nv-logo .dykz-logo,.site-header.menu-open .nv-logo .dykz-logo{width:calc(var(--lk) * 1px + var(--hp));height:calc(var(--lk) * 1px + var(--hp));top:calc(var(--hp) / -2);filter:drop-shadow(0 0 0 rgba(0,0,0,0))}
.nv-logo:focus-visible{outline:3px solid var(--bruin);outline-offset:4px}
html[data-thema="nacht"] .nv-logo .dykz-logo{filter:drop-shadow(0 12px 24px rgba(0,0,0,.45))}
html[data-thema="nacht"] .site-header.is-solid .nv-logo .dykz-logo,html[data-thema="nacht"] .site-header.menu-open .nv-logo .dykz-logo{filter:drop-shadow(0 0 0 rgba(0,0,0,0))}
@media (min-width:768px){.nv-logo{--lg:120;--lk:52}}
@media (min-width:1200px){.nv-logo{--lg:150;--lk:64}}
/* ruimte voor het hangende embleem boven de eerste inhoud */
main{padding-top:calc(var(--header-h, 88px) + var(--logo-overhang-pagina, 48px))}
.kruimelpad{padding-top:calc(var(--header-h,88px) + 16px + var(--logo-overhang-pagina, 48px))}
.kruimelpad + main{padding-top:0}
@media (min-width:768px){:root{--logo-overhang-pagina:60px}}
@media (min-width:1200px){:root{--logo-overhang-pagina:72px}}
/* minder beweging: geen overgang, direct de juiste maat */
@media (prefers-reduced-motion:reduce){.nv-logo .dykz-logo{transition:none}}
/* logo boven het uitgeklapte megamenu (.nv-sub heeft z-index 70) */
.nv-balk .nv-logo{z-index:80}
/* bovenaan de pagina hangt het logo in het megamenu: extra ruimte boven de tekst zodat het logo er niet over valt.
   Overhang = 150 - 64 px logo min de balkpadding, plus 16 px lucht. Na scrollen is het logo klein en vervalt dit. */
@media (min-width:1200px){
  .site-header:not(.is-solid) .nv-mega a{padding-top:calc(clamp(24px,3vw,40px) + 86px - clamp(12px, 2.5vh, 24px) + 16px)}
}

/* ============ Mobiele balk (tot 1200px): afspraak links, logo midden, hamburger rechts ============
   Grid met drie kolommen zodat het logo exact in het midden staat.
   De kolomafstand houdt de tekst links vrij van het hangende embleem (half het verschil tussen groot en klein logo + lucht). */
.nv-mob-afspraak{display:none}
@media (max-width:1199px){
  .nv-balk-inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:26px}
  .nv-balk-inner .nv-logo{justify-self:center}
  .nv-balk-inner .header-right{justify-self:end}
  .nv-logo .dykz-logo{left:50%;transform:translateX(-50%)}
  .nv-mob-afspraak{display:inline-flex;align-items:center;gap:8px;justify-self:start;min-height:44px;padding:4px 0;color:var(--zwart);text-decoration:none;font-size:.875rem;line-height:1.25}
  .nv-mob-afspraak .appointment-section__status{flex:none}
  .nv-mob-afspraak-pijl{flex:none;width:12px;height:12px;margin-left:-2px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:square}
  .nv-mob-afspraak-tekst{white-space:nowrap}
  .nv-mob-afspraak:hover .nv-mob-afspraak-tekst{text-decoration:underline;text-underline-offset:4px}
  .nv-mob-afspraak:focus-visible{outline:2px solid var(--bruin);outline-offset:4px}
}
@media (max-width:767px){.nv-logo{--lg:84}}
@media (min-width:768px) and (max-width:1199px){.nv-balk-inner{column-gap:42px}.nv-mob-afspraak{font-size:.875rem}}
/* heel smalle schermen (320px, ook bij 400% zoom): iets kleiner embleem, zodat de tekst past */
@media (max-width:359px){
  .nv-logo{--lg:72}
  .nv-balk-inner{column-gap:20px}
  .nv-mob-afspraak{font-size:.75rem;gap:6px}
}
/* Mobiele balk, versie 2: lagere balk, logo tegen de bovenrand, groene bol boven de tekst.
   Na scrollen mag het logo iets onder de balk uitsteken. */
@media (max-width:1199px){
  .nv-balk-inner{padding-top:8px;padding-bottom:8px}
  .nv-logo{--hp:8px}
  .nv-logo .dykz-logo{top:calc(var(--hp) * -1 + 4px)}
  .site-header.is-solid .nv-logo .dykz-logo,.site-header.menu-open .nv-logo .dykz-logo{width:calc(var(--lk) * 1px + 20px);height:calc(var(--lk) * 1px + 20px);top:calc(var(--hp) * -1 + 4px)}
  .nv-mob-afspraak{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
  :root{--logo-overhang-pagina:36px}
  .nv-mob-afspraak-regel{display:inline-flex;align-items:center;gap:6px}
  .nv-mob-afspraak{font-size:.8125rem}
}