/* ============ 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);border-bottom:1px solid var(--lijn);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(--wit)}
.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(--wit)}
/* ---------- 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(--wit)}
/* ---------- menu overlay: cirkel-reveal vanuit de hamburger ---------- */
.menu-overlay{position:fixed;inset:0;z-index:55;background:var(--zwart);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-wit)}
.menu-list{position:relative;list-style:none;text-align:left}
.menu-list li{margin:0.5rem 0;overflow:hidden}
.menu-list li a{display:inline-block;color:var(--bruin-licht);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(--wit)}
.menu-list li a:focus-visible{color:var(--wit);outline:2px solid var(--bruin-licht);outline-offset:8px;border-radius:6px}
.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(--wit-mute);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}
.menu-contact-item{display:flex;align-items:center;gap:.9rem;color:var(--wit);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;padding-top:76px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .menu-panel-nav{flex:0 0 auto;padding:56px 24px 40px}
  .menu-panel-contact{flex:0 0 auto;border-left:none;border-top:1px solid var(--lijn-wit)}
  .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}
.wa-float-wrapper{display:none;/* standaard verborgen, alleen tonen op mobiel via media query */}
@media (max-width: 768px){
  .wa-float-wrapper{display:block;position:fixed;right:18px;bottom:18px;z-index:9999;/* eigen stacking context, onafhankelijk van eventuele transform/overflow op bovenliggende elementen elders in de pagina */ isolation:isolate}
  .wa-float{display:flex;align-items:center;justify-content:center;position:relative;width:54px;height:54px;border-radius:50%;background:var(--wa-bruin);/* donkerbruin — pas aan naar de exacte hex van je 't-bruin' kleur */ box-shadow:0 6px 20px rgba(0, 0, 0, 0.28);text-decoration:none;-webkit-tap-highlight-color:transparent;transform:translateZ(0);transition:transform 0.2s ease, box-shadow 0.2s ease;animation:wa-float-in 0.5s ease 0.3s both}
  .wa-float:active{transform:scale(0.92);box-shadow:0 4px 12px rgba(0, 0, 0, 0.24)}
  /* subtiele ademende ring, geen felle pulse */
  .wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--wa-bruin);opacity:0.55;animation:wa-breathe 2.8s ease-in-out infinite}
  .wa-float svg{width:26px;height:26px;position:relative;z-index:1}
}
@keyframes wa-float-in{from{opacity:0;transform:translateY(16px) scale(0.85)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes wa-breathe{0%{transform:scale(1);opacity:0.5}50%{transform:scale(1.22);opacity:0}100%{transform:scale(1);opacity:0}}
@media (prefers-reduced-motion: reduce){
  .wa-float,.wa-float::before{animation:none}
}
.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(--wit)}

/* --- 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)}