:root{
  --kws-navy:#07121F;
  --kws-deep-blue:#07115C;
  --kws-blue:#21A9E8;
  --kws-cyan:#58C7F3;
  --kws-green:#5DBB46;
  --whatsapp:#25D366;
  --white:#FFFFFF;
  --light-bg:#F7F8FA;
  --border:#E5E7EB;
  --text:#1F2933;
  --muted:#6B7280;
  --review-yellow:#FACC15;

  /* Hoverstanden van de merkkleuren. Zelfde waarden als altijd, nu met een
     naam in plaats van los in de regel. */
  --kws-blue-hover:#1791CB;
  --kws-green-hover:#4EA33A;
  --whatsapp-hover:#1EB858;
  --kws-green-soft:#8FD47A;    /* alleen als eindpunt van een verloop */

  /* Tekst op de navy ondergrond. Acht bijna gelijke blauwgrijzen, exact de
     waarden die er stonden. Dit hoort eigenlijk terug naar drie stappen,
     maar dat verandert kleuren en die liggen vast. Openstaand punt, zie
     proj-0001-designaudit.md. */
  --on-dark-1:#E6F0F7;
  --on-dark-2:#DCEAF5;
  --on-dark-3:#CFE6F6;
  --on-dark-4:#CFE0EC;
  --on-dark-5:#BCD4E6;
  --on-dark-6:#9FB6C8;
  --on-dark-7:#8FA9BD;
  --on-dark-8:#7F95A8;
  --border-soft:#E3E7EC;

  /* Typeschaal. Elke font-size in dit bestand komt uit deze twaalf stappen.
     Hiervoor stonden er 42 losse waarden in, waarvan veertien binnen drie
     pixels van elkaar. Nieuwe maat nodig? Pas een stap aan of voeg er een toe,
     zet geen losse rem-waarde in een regel. */
  --text-3xs:.68rem;
  --text-2xs:.74rem;
  --text-xs:.82rem;
  --text-sm:.88rem;
  --text-md:.95rem;
  --text-base:1rem;
  --text-lg:1.08rem;
  --text-xl:1.2rem;
  --text-2xl:1.35rem;
  --text-3xl:1.5rem;
  --text-4xl:1.7rem;
  --text-5xl:2rem;

  /* Hoekradii. Vijf stappen, geen losse pixelwaarden. */
  --radius-xs:8px;
  --radius-sm:14px;
  --radius:20px;
  --radius-lg:28px;
  --radius-pill:999px;

  /* Afstand tussen een kop en de lead eronder. Stond op drie plaatsen anders
     (.85 / .7 / niets), waardoor de kop in .kees-copy tegen zijn eigen tekst
     aan plakte. */
  --space-lead:.85rem;

  /* Sectieritme. Hiervoor had elke sectie op elke pagina exact 72px boven en
     onder, waardoor niets groepeerde en niets nadruk kreeg. Drie stappen:
     -tight voor twee secties die bij elkaar horen, -base als standaard,
     -airy voor het moment waarop de pagina zijn punt maakt. */
  --space-section-tight:2.25rem;
  --space-section:3.5rem;
  --space-section-airy:5.5rem;
  --shadow-sm:0 1px 3px rgba(7,18,31,.08), 0 1px 2px rgba(7,18,31,.04);
  --shadow:0 12px 32px rgba(7,18,31,.12);
  --shadow-card:0 8px 24px rgba(7,18,31,.10);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
body{
  font-family:var(--font);
  background:var(--white);
  color:var(--text);
  line-height:1.65;
  font-size:var(--text-base);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
ul{list-style:none}
button{font:inherit;cursor:pointer}

.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--kws-blue);color:#fff;
  padding:.85rem 1.4rem;border-radius:0 0 var(--radius-sm) 0;
  z-index:300;font-weight:700;text-decoration:none;
}
.skip-link:focus{left:0}

.container{max-width:var(--max);margin:0 auto;padding:0 1.25rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.6rem;border-radius:var(--radius-sm);
  font-weight:700;font-size:var(--text-base);text-decoration:none;
  border:2px solid transparent;line-height:1.2;
  transition:background .18s,color .18s,border-color .18s,transform .15s,box-shadow .18s;
  min-height:50px;text-align:center;
}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--kws-blue);outline-offset:3px;
}
.btn-primary{background:var(--kws-blue);color:#fff;box-shadow:0 8px 20px rgba(33,169,232,.35)}
.btn-primary:hover{background:var(--kws-blue-hover);transform:translateY(-2px)}
.btn-green{background:var(--kws-green);color:#fff;box-shadow:0 8px 20px rgba(93,187,70,.32)}
.btn-green:hover{background:var(--kws-green-hover);transform:translateY(-2px)}
.btn-whatsapp{background:var(--whatsapp);color:#fff}
.btn-whatsapp:hover{background:var(--whatsapp-hover);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--kws-navy);border-color:var(--border)}
.btn-outline:hover{border-color:var(--kws-navy);background:var(--light-bg)}
.btn-outline.on-dark{color:#fff;border-color:rgba(255,255,255,.4)}
.btn-outline.on-dark:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-text{
  display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  font-weight:700;color:var(--kws-blue);padding:.5rem .2rem;min-height:44px;
}
.btn-text:hover{color:var(--kws-deep-blue);text-decoration:underline;text-underline-offset:4px}

.check{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--kws-green);color:#fff;flex:none;font-size:var(--text-xs);font-weight:800}
.tick{color:var(--kws-green);font-weight:800}

/* ---------- Top utility bar ---------- */
.utility-bar{background:var(--kws-navy);color:var(--on-dark-3);font-size:var(--text-xs)}
.utility-inner{max-width:var(--max);margin:0 auto;padding:.5rem 1.25rem;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:center;justify-content:center}
.utility-inner a{color:var(--on-dark-3);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:.4rem}
.utility-inner a:hover{color:#fff}
.utility-inner .sep{color:rgba(207,230,246,.4)}
/* Op een telefoon wordt hier met een duim getikt: 44px minimum voor het
   telefoonnummer en het mailadres, en de losse scheidingsbolletjes eruit
   omdat ze meebreken en een weesteken achterlaten. */
@media (max-width:767px){
  .utility-inner{gap:0 .9rem;padding:0 1.25rem}
  .utility-inner .sep{display:none}
  .utility-inner a{min-height:44px;padding:0 .2rem}
  .utility-tag{width:100%;text-align:center;padding-top:.45rem}
}
.utility-tag{color:var(--kws-cyan);font-weight:700}

/* ---------- Header ---------- */
/* The injected wrapper must not create a containing block, or position:sticky
   on .site-header would be trapped inside it. display:contents removes its box
   so the header behaves as a direct child of <body> and sticks for the whole page. */
#site-header{display:contents}
.site-header{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);transition:transform .35s ease,box-shadow .25s ease}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header.is-stuck{box-shadow:0 6px 20px rgba(7,18,31,.08)}
.header-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:var(--max);margin:0 auto;padding:.7rem 1.25rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.site-header .brand{background:var(--kws-navy);padding:.5rem .85rem;border-radius:var(--radius-sm)}
.brand img{height:36px;width:auto}
.brand .brand-fallback{font-weight:800;font-size:var(--text-xl);color:#fff;letter-spacing:-.01em}
.main-nav{display:none}
.main-nav ul{display:flex;gap:1.1rem}
/* base styling scoped to TOP-LEVEL nav links only, so it never leaks into
   dropdown content (route-cards, links) which set their own padding/borders */
.main-nav>ul>li>a{text-decoration:none;font-weight:600;font-size:var(--text-md);color:var(--kws-navy);padding:.4rem 0;border-bottom:2px solid transparent;transition:color .18s,border-color .18s;white-space:nowrap}
.main-nav>ul>li>a:hover{color:var(--kws-blue);border-bottom-color:var(--kws-blue)}
.main-nav>ul>li>a.active{color:var(--kws-blue)}
.main-nav .has-dropdown>a.active{border-bottom-color:var(--kws-blue)}
.header-actions{display:none;align-items:center;gap:.5rem}
/* Logo en knoppen boven het megamenu (z-index 60). De onzichtbare bovenrand
   van een open menu loopt onder de header door; zonder dit ving die de
   onderste pixels van deze knoppen af zolang een menu open stond. */
.brand,.header-actions{position:relative;z-index:61}
.header-actions .btn{white-space:nowrap;padding:.8rem 1.1rem;font-size:var(--text-md)}
.menu-toggle{display:inline-flex;align-items:center;gap:.5rem;background:var(--kws-navy);color:#fff;border:none;border-radius:var(--radius-xs);padding:.6rem 1rem;font-weight:700;min-height:46px}
.menu-toggle .bars{display:inline-flex;flex-direction:column;gap:4px}
.menu-toggle .bars span{display:block;width:18px;height:2px;background:#fff;border-radius:var(--radius-xs);transition:transform .2s,opacity .2s}
.menu-toggle[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobile-menu{display:none;border-top:1px solid var(--border);background:var(--white);padding:.4rem 1.25rem 1.4rem}
.mobile-menu.is-open{display:block}
.m-acc{display:flex;flex-direction:column}
.m-acc-item{border-top:1px solid var(--border)}
.m-acc-item:first-child{border-top:none}
.m-acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:none;border:none;padding:1rem .25rem;font-weight:700;font-size:var(--text-lg);color:var(--kws-navy);text-align:left;min-height:52px}
.m-acc-btn .m-caret{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s;opacity:.55;flex:none}
.m-acc-btn[aria-expanded="true"] .m-caret{transform:rotate(225deg);opacity:1}
.m-acc-btn.active{color:var(--kws-blue)}
.m-acc-btn:focus-visible{outline:3px solid var(--kws-blue);outline-offset:2px;border-radius:var(--radius-xs)}
.m-acc-panel{display:grid;gap:.1rem;padding:0 0 .7rem .55rem}
.m-acc-panel[hidden]{display:none}
.m-acc-panel a{display:block;padding:.65rem .5rem;text-decoration:none;font-weight:600;font-size:var(--text-base);color:var(--text);border-radius:var(--radius-xs);min-height:44px}
.m-acc-panel a:hover,.m-acc-panel a:focus-visible{color:var(--kws-blue);background:var(--light-bg)}
.mobile-actions{display:grid;grid-template-columns:1fr;gap:.7rem;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--border)}

/* ---------- Mobile sticky quick bar ---------- */
.quick-bar{position:fixed;left:0;right:0;bottom:0;z-index:150;display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:.5rem;padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-top:1px solid var(--border)}
.quick-bar a{display:flex;align-items:center;justify-content:center;gap:.4rem;text-decoration:none;font-weight:800;font-size:var(--text-md);border-radius:var(--radius-sm);min-height:48px}
.quick-bar .qa-call{color:var(--kws-navy);border:2px solid var(--border)}
.quick-bar .qa-wa{color:#fff;background:var(--whatsapp)}
.quick-bar .qa-quote{background:var(--kws-blue);color:#fff}
body{padding-bottom:76px}

/* ---------- Mega dropdown nav ---------- */
.main-nav .has-dropdown>a{display:inline-flex;align-items:center;gap:.4rem}
.main-nav .caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s;opacity:.65}
.main-nav .has-dropdown:hover .caret,.main-nav .has-dropdown:focus-within .caret,.main-nav .has-dropdown.open .caret{transform:translateY(0) rotate(225deg);opacity:1}
/* ---- Large premium mega-dropdowns (DPS nav round) ----
   One wide panel centered under the header; 3 columns with a featured/visual
   block; roomy primary route-cards. Same design family across all menus. */
.main-nav .has-dropdown{position:static}
/* Het menu hing direct tegen de navigatie. Nu staat het zichtbaar 13px onder
   de header, maar die ruimte is een transparante bovenrand van het menu zelf
   die al begint bij de onderkant van het menu-item (50% + de halve itemhoogte
   van 40px). De muis blijft dus over de volle breedte binnen het menu terwijl
   je oversteekt, ook schuin naar een kaart aan de rand. Een los gat tussen
   twee elementen is precies wat het eerder liet verdwijnen. */
.dropdown{position:absolute;top:calc(50% + 20px);left:50%;transform:translateX(-50%) translateY(10px);width:min(1000px,calc(100vw - 48px));max-height:min(80vh,534px);overflow-y:auto;overscroll-behavior:contain;background:#fff;background-clip:padding-box;border:1px solid var(--border);border-top:31px solid transparent;border-radius:21px 21px 20px 20px / 51px 51px 20px 20px;box-shadow:inset 0 1px 0 var(--border),0 26px 44px -14px rgba(7,18,31,.20);padding:22px 28px;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease;z-index:60}
.main-nav .has-dropdown:hover .dropdown,.main-nav .has-dropdown:focus-within .dropdown,.main-nav .has-dropdown.open .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* Brug tussen de onderkant van het menu-item en de onderkant van de header.
   Bestaat alleen zolang dat item open is, dus hij blokkeert geen buren. */
.main-nav>ul>li>a{position:relative}
.main-nav .has-dropdown:hover>a::after,.main-nav .has-dropdown.open>a::after{content:"";position:absolute;left:-40px;right:-40px;top:100%;height:44px}
/* wide premium widths — short in height via horizontal layouts */
.dropdown.dd-diensten{width:min(1180px,calc(100vw - 48px))} /* v2 ronde 2: zes tegels, iets breder zodat "Gevel impregneren" op brede schermen op één regel past */
.dropdown.dd-werkwijze{width:min(900px,calc(100vw - 48px))}
.dropdown.dd-resultaten{width:min(1000px,calc(100vw - 48px))}
.dropdown.dd-over{width:min(900px,calc(100vw - 48px))}
.dropdown.dd-contact{width:min(820px,calc(100vw - 48px))}

.md-top{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin-bottom:1.05rem;padding-bottom:.8rem;border-bottom:1px solid var(--border)}
.md-title{font-size:var(--text-xl);font-weight:800;color:var(--kws-navy);line-height:1}
.md-ctx{color:var(--muted);font-size:var(--text-sm)}
.md-grid{display:grid;grid-template-columns:1.5fr 1fr 1.15fr;gap:1.9rem}
.md-grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.dd-diensten .md-grid2{grid-template-columns:1.12fr 1fr}
.md-onecol{display:flex;flex-direction:column;gap:.55rem}
.md-col{min-width:0;display:flex;flex-direction:column}
.md-col + .md-col{border-left:1px solid var(--border);padding-left:1.3rem}
.md-label{font-size:var(--text-3xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--kws-blue);margin:0 0 .75rem}
/* small light help note (replaces the big dark help block) */
.md-note{margin-top:.9rem;background:var(--light-bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.85rem .95rem;display:flex;flex-direction:column;gap:.15rem}
.md-note strong{font-size:var(--text-sm);color:var(--kws-navy)}
.md-note span{font-size:var(--text-xs);color:var(--muted);line-height:1.45}
.md-note-link{align-self:flex-start;margin-top:.45rem;background:none;border:none;font:inherit;font-weight:700;font-size:var(--text-sm);color:var(--kws-deep-blue);cursor:pointer;padding:0}
.md-note-link:hover{color:var(--kws-blue)}
.dd-contact-links{margin-top:.4rem;border-top:1px solid var(--border);padding-top:.4rem}

/* primary route-cards (roomy, premium) */
.md-cards{display:grid;gap:.85rem}
.primary-service-card{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;min-height:88px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;text-decoration:none;transition:border-color .16s,box-shadow .16s,transform .16s,background .16s}
.primary-service-card:hover{border-color:var(--kws-blue);box-shadow:var(--shadow-card);transform:translateY(-2px);background:linear-gradient(180deg,#fff,rgba(33,169,232,.05))}
.primary-service-card .psc-thumb{flex:none;width:62px;height:62px;border-radius:var(--radius-sm);overflow:hidden;background:var(--light-bg)}
.primary-service-card .psc-thumb img{width:100%;height:100%;object-fit:cover}
.primary-service-card .psc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.18rem}
.primary-service-card .psc-t{font-size:var(--text-base);font-weight:800;color:var(--kws-navy);line-height:1.2}
.primary-service-card .psc-d{font-size:var(--text-xs);color:var(--muted);line-height:1.4}
.primary-service-card .psc-arr{flex:none;align-self:center;color:var(--kws-blue);font-weight:800;font-size:var(--text-lg);transition:transform .16s}
.primary-service-card:hover .psc-arr{transform:translateX(4px)}

/* secondary route links (polished, breathing room) */
.md-links{display:grid;gap:.45rem}
.secondary-service-link{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:12px 14px;min-height:46px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;text-decoration:none;font-weight:700;font-size:var(--text-md);color:var(--kws-navy);transition:border-color .15s,background .15s,transform .15s,box-shadow .15s}
.secondary-service-link:hover{border-color:var(--kws-blue);background:var(--light-bg);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.secondary-service-link .ssl-arr{color:var(--kws-blue);font-weight:800;transition:transform .15s}
.secondary-service-link:hover .ssl-arr{transform:translateX(3px)}

/* --- wide-but-short horizontal layouts --- */
/* 3 primary cards in one row */
.mega-primary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mega-primary-grid .primary-service-card{min-height:88px}
/* secondary services + result routes as wrapping chips */
.mega-secondary-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.mega-secondary-grid .secondary-service-link{flex:0 1 auto;justify-content:flex-start;gap:.5rem;min-height:44px}
/* compact horizontal help strip (replaces the tall dark card) */
.mega-help-strip{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:14px;padding:14px 16px;background:var(--light-bg);border:1px solid var(--border);border-radius:var(--radius-sm)}
.mega-help-strip .mhs-text{font-size:var(--text-sm);color:var(--muted);min-width:0}
.mega-help-strip .mhs-text strong{color:var(--kws-navy);font-weight:700}
.mega-help-strip .mhs-action{flex:none;background:none;border:none;font:inherit;font-weight:700;font-size:var(--text-sm);color:var(--kws-deep-blue);cursor:pointer;padding:0;white-space:nowrap;transition:color .15s}
.mega-help-strip .mhs-action:hover{color:var(--kws-blue)}
/* wide, short before/after banner (Resultaten) */
.md-banner{position:relative;display:block;margin-top:14px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);height:170px;transition:transform .16s,box-shadow .16s}
.md-banner:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.md-banner img{width:100%;height:100%;object-fit:cover}
.md-banner .cap{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1rem .7rem;background:linear-gradient(transparent,rgba(7,18,31,.82));color:#fff;font-weight:700;font-size:var(--text-sm)}
/* 3 contact cards side by side (Contact) */
.mega-contact.contact-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mega-contact.contact-row .mc{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px}
.mega-contact.contact-row .mc:hover{border-color:var(--kws-blue);background:var(--light-bg)}

/* --- premium component refinements (DPS nav round 5) --- */
/* 2-up premium card grid (Werkwijze) */
.mega-primary-grid.two{grid-template-columns:1fr 1fr}
/* result cards with a small preview (Resultaten) */
.mega-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.result-card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:#fff;text-decoration:none;transition:border-color .16s,box-shadow .16s,transform .16s}
.result-card:hover{border-color:var(--kws-blue);box-shadow:var(--shadow-card);transform:translateY(-2px)}
.result-card .rc-thumb{height:104px;overflow:hidden;background:var(--light-bg)}
.result-card .rc-thumb img{width:100%;height:100%;object-fit:cover}
.result-card .rc-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:12px 14px}
.result-card .rc-t{font-weight:800;font-size:var(--text-md);color:var(--kws-navy)}
.result-card .rc-arr{color:var(--kws-blue);font-weight:800;font-size:var(--text-lg);transition:transform .16s}
.result-card:hover .rc-arr{transform:translateX(3px)}
/* split layouts: routes/info + visual/actions (Over KWS, Contact) */
.md-split-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.dd-over .md-split-2{grid-template-columns:1.05fr .95fr}
.md-split-2.contact-split{grid-template-columns:1.05fr .95fr}
.md-routes{display:grid;gap:10px;align-content:start}
/* Ronde 2 (Koen, 2026-10-06): aanvraagknop onder de routes in Over KWS; vult
   de kolom zoals de .dd-cta in Contact, met wat lucht boven de knop. */
.md-routes .btn{width:100%;margin-top:.2rem;padding:.7rem 1rem;min-height:46px;font-size:var(--text-md)}
.md-routes .btn>svg{width:18px;height:18px;flex:none}
/* De foto rekt mee met de routekolom (3 routes + knop), in plaats van 210px
   vast met een gat eronder. */
.dd-over .over-photo{height:auto;min-height:210px}
.dd-over .over-photo img{position:absolute;inset:0;width:100%;height:100%}
.over-photo{position:relative;display:block;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);height:210px;text-decoration:none;transition:transform .16s,box-shadow .16s}
.over-photo:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
/* v2: liggende werkfoto (drone, bus bij een woning) in plaats van het portret;
   iets onder het midden zodat bus en oprit in beeld blijven. */
.over-photo img{width:100%;height:100%;object-fit:cover;object-position:center 60%;display:block}
.over-photo span{position:absolute;left:0;right:0;bottom:0;padding:1.3rem .9rem .65rem;background:linear-gradient(transparent,rgba(7,18,31,.82));color:#fff;font-weight:700;font-size:var(--text-xs)}
/* contact split sides */
.contact-info,.contact-actions{display:flex;flex-direction:column;min-width:0}
.contact-actions{gap:.55rem}
.contact-actions .secondary-service-link{margin:0}
.dd-cta{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;width:100%;padding:.9rem 1rem;margin-bottom:.1rem;border:none;border-radius:var(--radius-sm);font:inherit;font-weight:800;font-size:var(--text-md);cursor:pointer;text-decoration:none;background:var(--kws-blue);color:#fff;box-shadow:0 8px 20px rgba(33,169,232,.28);transition:background .15s,transform .15s}
.dd-cta>svg{width:18px;height:18px;flex:none}
.dd-cta:hover{background:var(--kws-blue-hover);transform:translateY(-1px)}

/* route links with micro-description (Werkwijze) */
.dd-linklist{display:grid;gap:.25rem}
.dd-link{display:block;padding:.7rem .8rem;border-radius:var(--radius-sm);text-decoration:none;transition:background .15s,padding-left .15s}
.dd-link:hover{background:var(--light-bg);padding-left:1.05rem}
.dd-link strong{display:block;font-size:var(--text-md);font-weight:700;color:var(--kws-navy);line-height:1.3}
.dd-link span{display:block;font-size:var(--text-xs);color:var(--muted);line-height:1.4}
.dd-link:hover strong{color:var(--kws-blue)}

/* featured / help / proof block (one per dropdown) */
.md-feature{display:flex;flex-direction:column;gap:.6rem;background:var(--kws-navy);color:#fff;border-radius:var(--radius);padding:1.5rem 1.4rem;height:100%}
.md-feature.light{background:var(--light-bg);color:var(--text);border:1px solid var(--border)}
.md-feature .mf-title{font-size:var(--text-lg);font-weight:800;color:#fff;line-height:1.25}
.md-feature.light .mf-title{color:var(--kws-navy)}
.md-feature p{font-size:var(--text-sm);color:var(--on-dark-5);line-height:1.5;margin:0}
.md-feature.light p{color:var(--muted)}
.md-feature .mf-trust{display:flex;align-items:center;gap:.45rem;font-size:var(--text-xs);font-weight:700;color:var(--on-dark-2)}
.md-feature .mf-trust .stars{color:var(--review-yellow);letter-spacing:1px}
.md-feature .mf-actions{margin-top:auto;display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem}
.md-fbtn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.72rem 1rem;border-radius:var(--radius-xs);font:inherit;font-weight:700;font-size:var(--text-sm);cursor:pointer;text-decoration:none;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);color:#fff;transition:background .15s,border-color .15s}
.md-fbtn:hover{background:rgba(255,255,255,.2)}
.md-fbtn.wa{background:rgba(37,211,102,.18);border-color:rgba(37,211,102,.42)}
.md-fbtn.wa:hover{background:rgba(37,211,102,.3)}
.md-feature.light .md-fbtn{border-color:var(--border);background:#fff;color:var(--kws-deep-blue)}
.md-feature.light .md-fbtn:hover{border-color:var(--kws-blue);color:var(--kws-blue)}
.md-flink{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:var(--text-sm);text-decoration:none;color:var(--on-dark-3)}
.md-feature.light .md-flink{color:var(--kws-deep-blue)}
.md-flink:hover{text-decoration:underline;text-underline-offset:3px}

/* one strong visual block (Resultaten, Over KWS) */
.md-visual{position:relative;display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;transition:transform .16s,box-shadow .16s}
.md-visual:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.md-visual img{width:100%;height:100%;object-fit:cover}
.md-visual .cap{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .9rem .7rem;background:linear-gradient(transparent,rgba(7,18,31,.85));color:#fff;font-weight:700;font-size:var(--text-sm)}
.md-aside-copy{margin-top:.8rem;font-size:var(--text-sm);color:var(--muted);line-height:1.5}

/* "waarom KWS" checklist */
.md-why{display:grid;gap:.75rem}
.md-why-item{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:var(--text-md);color:var(--text)}

/* consistent secondary bottom navigation row */
/* subtle clickable text link (not a full-width button bar) */
.md-bottom{display:inline-flex;align-items:center;gap:.4rem;margin-top:14px;padding:.3rem .1rem;background:none;border:none;border-radius:0;font-weight:700;font-size:var(--text-md);color:var(--kws-deep-blue);text-decoration:none;transition:color .15s}
.md-bottom:hover{color:var(--kws-blue);text-decoration:underline;text-underline-offset:4px}
.md-bottom .arr{transition:transform .15s}
.md-bottom:hover .arr{transform:translateX(3px)}

.mega-grid{display:grid;gap:1.6rem}
.mega-grid.cols3{grid-template-columns:1.65fr .85fr 1.1fr}
.mega-grid.cols2{grid-template-columns:1.45fr 1fr}
.mega-col{min-width:0;display:flex;flex-direction:column}
.mega-col+.mega-col{border-left:1px solid var(--border);padding-left:1.6rem}
.mega-label{font-size:var(--text-2xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--kws-blue);margin:0 0 .9rem}
.mega-label.mt{margin-top:1rem}
.mega-cards{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;flex:1;align-content:space-between}
.svc-card{display:flex;align-items:center;gap:.7rem;padding:.55rem .65rem;min-width:0;border:1px solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:#fff;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s}
.svc-card:hover{border-color:var(--kws-blue);background:var(--light-bg);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.svc-card .thumb{width:48px;height:48px;border-radius:var(--radius-xs);overflow:hidden;flex:none;background:var(--light-bg)}
.svc-card .thumb img{width:100%;height:100%;object-fit:cover}
.svc-card .svc-t{flex:1;min-width:0;font-size:var(--text-md);font-weight:700;color:var(--kws-navy);line-height:1.25}
.svc-card .arr{color:var(--kws-blue);font-weight:800;font-size:var(--text-lg);flex:none;transition:transform .15s}
.svc-card:hover .arr{transform:translateX(3px)}
.mega-links{display:grid;gap:.12rem}
.mega-links a,.mega-links button{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;padding:.6rem .65rem;border-radius:var(--radius-xs);font:inherit;font-size:var(--text-md);font-weight:600;color:var(--kws-navy);text-decoration:none;background:none;border:none;cursor:pointer;transition:background .15s,color .15s,padding-left .15s}
.mega-links a:hover,.mega-links button:hover{background:var(--light-bg);color:var(--kws-blue);padding-left:.95rem}
.mega-links a .di{width:7px;height:7px;border-radius:50%;background:var(--kws-cyan);flex:none}
.mega-ctas{display:grid;gap:.6rem}
.mega-btn{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.68rem 1rem;border-radius:var(--radius-sm);font-weight:700;font-size:var(--text-md);text-decoration:none;transition:background .15s,border-color .15s,transform .15s}
.mega-btn:hover{transform:translateY(-2px)}
.mega-btn.primary{background:var(--kws-blue);color:#fff}
.mega-btn.primary:hover{background:var(--kws-blue-hover)}
.mega-btn.ghost{background:var(--light-bg);color:var(--kws-navy);border:1px solid var(--border)}
.mega-btn.ghost:hover{border-color:var(--kws-navy)}
.mega-contact{display:grid;gap:.15rem}
.mega-contact .mc{display:flex;align-items:center;gap:.7rem;padding:.4rem .4rem;border-radius:var(--radius-xs);text-decoration:none;transition:background .15s}
.mega-contact .mc:hover{background:var(--light-bg)}
.mega-contact .mc .mci{width:34px;height:34px;border-radius:var(--radius-xs);background:rgba(33,169,232,.12);color:var(--kws-blue);display:flex;align-items:center;justify-content:center;flex:none}
.mega-contact .mc.wa .mci{background:rgba(37,211,102,.14);color:var(--whatsapp)}
.mega-contact .mc .mci svg{width:17px;height:17px}
.mega-contact .mc strong{display:block;font-size:var(--text-xs);color:var(--kws-navy);line-height:1.25}
.mega-contact .mc span{font-size:var(--text-xs);color:var(--muted)}
.mega-feature{position:relative;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--kws-navy);color:#fff;display:flex;flex-direction:column;flex:1}
.mega-feature .feat-media{position:relative;height:102px;overflow:hidden;flex:none}
.mega-feature .feat-media img{width:100%;height:100%;object-fit:cover}
.mega-feature .feat-badge{position:absolute;top:.6rem;left:.6rem;background:var(--kws-blue);color:#fff;font-size:var(--text-3xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.28rem .6rem;border-radius:var(--radius-xs);z-index:2}
.mega-feature .feat-body{padding:.9rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.mega-feature.solid .feat-body{padding:1.3rem 1.2rem}
.mega-feature h4{font-size:var(--text-base);font-weight:800;color:#fff;margin:0;line-height:1.25}
.mega-feature .feat-tags{display:flex;flex-wrap:wrap;gap:.35rem}
.mega-feature .feat-tags span{font-size:var(--text-3xs);font-weight:700;color:var(--on-dark-4);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:.2rem .5rem;border-radius:var(--radius-xs)}
.mega-feature p{font-size:var(--text-xs);color:var(--on-dark-5);margin:0}
.mega-feature .feat-btns{margin-top:auto;display:grid;gap:.45rem}
.mega-feature .feat-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-weight:700;font-size:var(--text-sm);padding:.62rem .9rem;border-radius:var(--radius-xs);text-decoration:none;transition:background .15s}
.mega-feature .feat-btn.green{background:var(--kws-green);color:#fff}
.mega-feature .feat-btn.green:hover{background:var(--kws-green-hover)}
.mega-feature .feat-btn.blue{background:var(--kws-blue);color:#fff}
.mega-feature .feat-btn.blue:hover{background:var(--kws-blue-hover)}
.mega-feature .feat-btn.outline{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22)}
.mega-feature .feat-btn.outline:hover{background:rgba(255,255,255,.16)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--radius-sm);border:2px solid var(--border);color:var(--kws-navy);text-decoration:none;transition:background .18s,border-color .18s,color .18s,transform .15s}
.icon-btn svg{width:21px;height:21px;display:block}
.icon-btn:hover{border-color:var(--kws-navy);background:var(--light-bg);transform:translateY(-2px)}
.icon-btn.wa{background:var(--whatsapp);border-color:var(--whatsapp);color:#fff}
.icon-btn.wa:hover{background:var(--whatsapp-hover);border-color:var(--whatsapp-hover)}
.btn-calc{background:#fff;color:var(--kws-deep-blue);border-color:var(--kws-blue);padding:.95rem 1.15rem}
.btn-calc svg{width:18px;height:18px}
.btn-calc:hover{background:var(--kws-blue);color:#fff;border-color:var(--kws-blue);transform:translateY(-2px)}

/* ---------- Generic section ---------- */
.section{padding:var(--space-section) 0}
.section.alt{background:var(--light-bg)}
/* Twee secties met dezelfde achtergrond horen visueel bij elkaar: geen dubbele
   witruimte op de naad. */
.section + .section:not(.alt),
.section.alt + .section.alt{padding-top:var(--space-section-tight)}
/* De slotsectie krijgt lucht, zodat de pagina eindigt in plaats van ophoudt. */
.section.closing{padding-top:var(--space-section-airy);padding-bottom:var(--space-section)}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:var(--text-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--kws-blue);margin-bottom:.85rem}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--kws-blue);border-radius:var(--radius-xs)}
.eyebrow.on-dark{color:var(--kws-cyan)}
.eyebrow.on-dark::before{background:var(--kws-cyan)}
h1,h2,h3{line-height:1.16;letter-spacing:-.015em;color:var(--kws-navy)}
h1{font-size:clamp(2rem,5.5vw,3.3rem);font-weight:800}
h2{font-size:clamp(1.7rem,4.2vw,2.45rem);font-weight:800}
h3{font-size:var(--text-xl);font-weight:700}
.lead{color:var(--muted);font-size:var(--text-lg);max-width:54ch}
h1 + .lead,h2 + .lead,h3 + .lead{margin-top:var(--space-lead)}
.section-head{max-width:640px;margin-bottom:2.2rem}
.center{text-align:center;margin-left:auto;margin-right:auto}

.media{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--light-bg)}
.media img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Hero ---------- */
.hero{background:var(--kws-navy);color:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 85% 10%, rgba(33,169,232,.22), transparent 60%);pointer-events:none}
.hero-grid{display:grid;gap:2rem;padding:2.6rem 0 6rem;position:relative;z-index:1}
.hero h1{color:#fff;text-wrap:balance}
.hero .eyebrow{color:var(--kws-cyan)}
.hero .eyebrow::before{background:var(--kws-cyan)}
.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0 0}
.hero-meta .chip{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--text-xs);font-weight:700;color:var(--on-dark-2);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:.4rem .8rem;border-radius:var(--radius-pill)}
.hero-meta .chip .pin{color:var(--kws-cyan)}
.hero-sub{color:var(--on-dark-5);font-size:var(--text-lg);margin:1rem 0 .4rem;font-weight:600}
.hero-lead{color:var(--on-dark-6);font-size:var(--text-base);margin:.6rem 0 1.6rem;max-width:50ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem}
.hero-bullets{display:grid;gap:.55rem;margin-top:1.7rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.14)}
.hero-bullets li{display:flex;align-items:center;gap:.6rem;font-weight:600;color:var(--on-dark-1);font-size:var(--text-md)}
.hero-visual{position:relative}
.hero-visual .media{aspect-ratio:5/4;border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.08)}
.hero-rating{position:absolute;left:1rem;bottom:1rem;background:#fff;color:var(--text);border-radius:var(--radius-sm);padding:.7rem .9rem;box-shadow:var(--shadow);display:flex;align-items:center;gap:.6rem;z-index:3}
.hero-rating .stars{color:var(--review-yellow);font-size:var(--text-base);letter-spacing:1px}
.hero-rating strong{display:block;font-size:var(--text-md);color:var(--kws-navy)}
.hero-rating span{font-size:var(--text-xs);color:var(--muted)}

/* hero decorative shapes */
.hero-shapes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero-shapes span{position:absolute;display:block}
.hero-shapes .float{animation:floaty 9s ease-in-out infinite}
.hero-shapes .float.slow{animation-duration:13s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.shape-ring{width:190px;height:190px;border:2px solid rgba(88,199,243,.28);border-radius:50%;top:7%;right:5%}
.shape-ring2{width:96px;height:96px;border:2px dashed rgba(255,255,255,.18);border-radius:50%;bottom:14%;left:46%}
.shape-blob{width:280px;height:280px;background:linear-gradient(140deg,rgba(33,169,232,.30),rgba(7,17,92,0));border-radius:46% 54% 60% 40%/46% 40% 60% 54%;top:-70px;right:26%;filter:blur(3px)}
.shape-blob2{width:230px;height:230px;background:radial-gradient(circle at 40% 40%,rgba(93,187,70,.22),transparent 65%);border-radius:50%;bottom:-90px;left:-60px}
.shape-dots{width:150px;height:96px;background-image:radial-gradient(rgba(255,255,255,.24) 1.7px,transparent 1.7px);background-size:16px 16px;bottom:18%;right:7%}
.shape-plus{width:26px;height:26px;top:20%;left:38%;background:linear-gradient(var(--kws-cyan),var(--kws-cyan)) center/100% 2px no-repeat,linear-gradient(var(--kws-cyan),var(--kws-cyan)) center/2px 100% no-repeat;opacity:.5}
.hero-visual::after{content:"";position:absolute;top:-16px;left:-16px;width:84px;height:84px;background:var(--kws-blue);border-radius:var(--radius);z-index:0;opacity:.9;transform:rotate(-6deg)}
.hero-visual::before{content:"";position:absolute;right:-18px;bottom:-18px;width:62%;height:68%;border:2px solid rgba(88,199,243,.45);border-radius:var(--radius-lg);z-index:0}
.hero .hero-visual .media{position:relative;z-index:1;border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-lg)}
.hero-bottom-glow{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:760px;max-width:92%;height:220px;background:radial-gradient(ellipse at 50% 100%,rgba(33,169,232,.32),rgba(33,169,232,0) 70%);pointer-events:none;z-index:1}

/* reusable water-wave divider (hero + page heroes) */
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;z-index:4;line-height:0;pointer-events:none}
.hero-wave svg{display:block;width:100%;height:clamp(54px,7vw,100px)}
.hero-wave.sm svg{height:clamp(44px,5.5vw,78px)}
.hero-wave .w-back{fill:rgba(88,199,243,.45)}
.hero-wave .w-mid{fill:rgba(33,169,232,.28)}
.hero-wave .w-front{fill:var(--white)}

/* ---------- Page hero (subpages) ---------- */
.page-hero{position:relative;background:var(--kws-navy);color:#fff;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 85% 0%, rgba(33,169,232,.20), transparent 60%);pointer-events:none}
.page-hero .container{position:relative;z-index:1;padding:2.6rem 0 5rem}
.page-hero h1{color:#fff;max-width:20ch}
.page-hero .lead{color:var(--on-dark-5);max-width:56ch}
.page-hero .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:var(--text-xs);font-weight:600;color:var(--on-dark-7);margin-bottom:1rem}
.page-hero .crumb a{color:var(--on-dark-3);text-decoration:none}
.page-hero .crumb a:hover{color:#fff;text-decoration:underline}
.page-hero .crumb .sep{opacity:.5}
.page-hero .page-ctas{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.7rem}
.page-hero .eyebrow{color:var(--kws-cyan)}
.page-hero .eyebrow::before{background:var(--kws-cyan)}
.page-hero-grid{display:grid;gap:2rem;align-items:center}

/* rotating image box (Diensten hero) */
.hero-rotator{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.10);aspect-ratio:4/3;background:var(--kws-deep-blue)}
.hero-rotator .slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.hero-rotator .slide.is-active{opacity:1}
.hero-rotator .slide img{width:100%;height:100%;object-fit:cover}
.hero-rotator .cap{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.1rem .85rem;background:linear-gradient(transparent,rgba(7,18,31,.82));color:#fff;font-weight:700;font-size:var(--text-md);display:flex;align-items:center;gap:.5rem}
.hero-rotator .cap::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--kws-cyan);flex:none}
.hero-rotator .dots{position:absolute;top:.8rem;right:.9rem;display:flex;gap:.4rem;z-index:2}
.hero-rotator .dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.45);padding:0;cursor:pointer;transition:width .25s,background .25s}
.hero-rotator .dots button.is-active{background:#fff;width:20px;border-radius:var(--radius-xs)}
@media (min-width:1000px){
  .page-hero-grid{grid-template-columns:1.08fr .92fr;gap:3rem}
}
/* subpage hero visual (static image) — reuses the home-hero accent shapes */
.page-hero .hero-visual{position:relative}
.page-hero .hero-visual .media{aspect-ratio:4/3;border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-lg);border:1px solid rgba(255,255,255,.10);box-shadow:var(--shadow);position:relative;z-index:1}
.page-hero .hero-rating{z-index:3}

/* split detail rows (Diensten) */
.split{display:grid;gap:1.6rem;align-items:center}
.section .split + .split{margin-top:3.2rem}
.split-media .media{aspect-ratio:4/3;border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.split-media{position:relative}
.split-media .stamp{position:absolute;left:1rem;top:1rem;background:var(--kws-deep-blue);color:#fff;font-size:var(--text-2xs);font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:.35rem .75rem;border-radius:var(--radius-xs);box-shadow:0 2px 8px rgba(7,17,92,.4);z-index:2}
.split-copy h2{font-size:clamp(1.5rem,3vw,2rem)}
.split-list{display:grid;gap:.55rem;margin:1.2rem 0 1.4rem}
.split-list li{display:flex;gap:.6rem;align-items:flex-start;font-weight:600;color:var(--text);font-size:var(--text-md)}
.split-ctas{display:flex;flex-wrap:wrap;gap:.7rem}
@media (min-width:880px){
  .split{grid-template-columns:1fr 1fr;gap:3rem}
  .split.reverse .split-media{order:2}
}

/* compact benefits row */
.benefits{display:grid;gap:1rem;margin-top:2.2rem;grid-template-columns:1fr}
/* Vier voordelen paste niet in drie kolommen. Twee bij twee sluit wel. */
.benefit{display:flex;gap:.85rem;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.2rem;box-shadow:var(--shadow-sm)}
.benefit .ico{width:44px;height:44px;border-radius:var(--radius-sm);background:rgba(33,169,232,.12);color:var(--kws-blue);display:flex;align-items:center;justify-content:center;flex:none}
.benefit .ico svg{width:23px;height:23px}
.benefit strong{display:block;font-size:var(--text-base);color:var(--kws-navy)}
.benefit span{font-size:var(--text-sm);color:var(--muted)}
@media (min-width:760px){
  .benefits{grid-template-columns:repeat(3,1fr)}
  /* Vier voordelen pasten niet in drie kolommen en lieten er een alleen
     op de tweede rij achter. Twee bij twee sluit wel. */
  .benefits.benefits-4{grid-template-columns:repeat(2,1fr)}
}

/* info cards (e.g. pricing factors) */
.info-grid{display:grid;gap:1.1rem;margin-top:2.2rem;grid-template-columns:1fr}
.info-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem 1.3rem;box-shadow:var(--shadow-sm)}
.info-card .num{font-size:var(--text-xs);font-weight:800;color:var(--kws-blue);letter-spacing:.04em}
.info-card h3{font-size:var(--text-lg);margin:.4rem 0 .35rem}
.info-card p{color:var(--muted);font-size:var(--text-md)}
@media (min-width:760px){ .info-grid{grid-template-columns:repeat(3,1fr)} }

/* tabbed services (Diensten) */
.tabs{margin-top:2.2rem}
.tab-buttons{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.2rem}
.tab-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.25rem;border:1.5px solid var(--border);background:#fff;border-radius:var(--radius-pill);font-weight:700;font-size:var(--text-md);color:var(--kws-navy);cursor:pointer;transition:background .18s,color .18s,border-color .18s,box-shadow .18s,transform .15s}
.tab-btn .dot{width:8px;height:8px;border-radius:50%;background:var(--kws-cyan);flex:none}
.tab-btn:hover{border-color:var(--kws-blue);color:var(--kws-blue);transform:translateY(-2px)}
.tab-btn.is-active{background:var(--kws-navy);color:#fff;border-color:var(--kws-navy);box-shadow:0 8px 18px rgba(7,18,31,.18)}
.tab-btn:focus-visible{outline:3px solid var(--kws-blue);outline-offset:2px}
.tab-panel{display:none}
.tab-panel.is-active{display:block;animation:tabIn .35s ease}
@keyframes tabIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tab-panel .split{margin-top:0}
.split-copy p.body{margin-top:.85rem;color:var(--muted);font-size:var(--text-md)}
.split-copy p.body + p.body{margin-top:.7rem}

/* ---------- USP strip (dynamic) ---------- */
.usp{margin-top:-1rem;position:relative;z-index:5}
.usp::before{content:"";position:absolute;top:-46px;right:6%;width:120px;height:64px;background-image:radial-gradient(rgba(33,169,232,.35) 1.6px,transparent 1.6px);background-size:15px 15px;opacity:.5;pointer-events:none}
.usp-grid{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.usp-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 1.2rem 1.3rem;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:.7rem;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.usp-card::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--kws-blue),var(--kws-cyan));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.usp-card:hover{transform:translateY(-6px);box-shadow:0 20px 42px rgba(7,18,31,.14)}
.usp-card:hover::after{transform:scaleX(1)}
.usp-card .usp-index{position:absolute;top:1rem;right:1.1rem;font-size:var(--text-xs);font-weight:800;letter-spacing:.04em;color:var(--border-soft)}
.usp-card .ico{width:52px;height:52px;border-radius:var(--radius-sm);background:linear-gradient(135deg,rgba(33,169,232,.16),rgba(88,199,243,.10));color:var(--kws-blue);display:flex;align-items:center;justify-content:center;flex:none;transition:transform .25s ease}
.usp-card:hover .ico{transform:translateY(-2px) scale(1.06) rotate(-4deg)}
.usp-card .ico svg{width:27px;height:27px}
.usp-card.green .ico{background:linear-gradient(135deg,rgba(93,187,70,.20),rgba(93,187,70,.10));color:var(--kws-green)}
.usp-card.green::after{background:linear-gradient(90deg,var(--kws-green),var(--kws-green-soft))}
.usp-card strong{display:block;font-size:var(--text-base);color:var(--kws-navy);line-height:1.25}
.usp-card span{font-size:var(--text-xs);color:var(--muted)}

/* ---------- Services ---------- */
.services-grid{display:grid;gap:1.3rem;margin-top:2.2rem}
.service-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.service-card .media{border-radius:0;aspect-ratio:16/11}
.service-card .media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--kws-blue),var(--kws-cyan))}
.service-body{padding:1.3rem 1.3rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.service-body h3{font-size:var(--text-xl)}
.service-body p{color:var(--muted);font-size:var(--text-md);flex:1}
.service-card.feature{border:2px solid var(--kws-blue)}
.tagline{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;font-size:var(--text-2xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--kws-blue);background:rgba(33,169,232,.1);padding:.3rem .7rem;border-radius:var(--radius-pill);margin-bottom:.2rem}
.services-cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem}

/* ---------- Softwash method ---------- */
.method-grid{display:grid;gap:2rem;margin-top:2rem}
.method-visual .media{aspect-ratio:4/5;border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.method-points{display:grid;gap:.7rem;margin:1.4rem 0}
.method-points li{display:flex;align-items:flex-start;gap:.7rem;font-weight:600;color:var(--text)}
.steps{display:grid;gap:1rem;margin-top:1.6rem;counter-reset:step}
.step{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.15rem 1.2rem;counter-increment:step;display:flex;gap:.9rem;align-items:flex-start}
.step::before{content:counter(step);flex:none;width:34px;height:34px;border-radius:var(--radius-xs);background:var(--kws-navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.step h3{font-size:var(--text-lg);margin-bottom:.15rem}
.step p{color:var(--muted);font-size:var(--text-md)}

/* ---------- Before / after ---------- */
.ba-grid{display:grid;gap:1.3rem;margin-top:2.2rem}
.ba-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s}
.ba-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.ba-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.ba-media img{width:100%;height:100%;object-fit:cover}
.ba-tag{position:absolute;top:.8rem;left:.8rem;background:var(--kws-deep-blue);color:#fff;font-size:var(--text-2xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .75rem;border-radius:var(--radius-xs);box-shadow:0 2px 8px rgba(7,17,92,.4);z-index:2}
.ba-vn{position:absolute;bottom:.7rem;font-size:var(--text-2xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:.28rem .6rem;border-radius:var(--radius-xs);backdrop-filter:blur(3px);z-index:2}
.ba-vn.voor{left:.7rem;background:rgba(7,18,31,.72)}
.ba-vn.na{right:.7rem;background:rgba(33,169,232,.92)}
.ba-body{padding:1.1rem 1.2rem 1.3rem}
.ba-body h3{font-size:var(--text-lg);margin-bottom:.25rem}
.ba-body p{color:var(--muted);font-size:var(--text-md)}
.ba-note{margin-top:1.6rem;display:flex;align-items:center;gap:.6rem;color:var(--muted);font-size:var(--text-md)}

/* ---------- Tool / price CTA ---------- */
.tool{background:var(--kws-navy);color:#fff;border-radius:var(--radius-lg);overflow:hidden}
.tool-grid{display:grid;gap:0}
.tool-copy{padding:2.6rem 1.6rem}
.tool-copy h2{color:#fff}
.tool-copy .lead{color:var(--on-dark-6)}
.tool-list{display:grid;gap:.65rem;margin:1.4rem 0 1.7rem}
.tool-list li{display:flex;align-items:flex-start;gap:.65rem;color:var(--on-dark-1);font-weight:600}
.tool-ctas{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.tool-note{margin-top:1.1rem;font-size:var(--text-xs);color:var(--on-dark-8)}
.tool-visual{position:relative;min-height:220px;background:var(--kws-deep-blue)}
.tool-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}

/* ---------- About / Kees ---------- */
.kees-grid{display:grid;gap:2rem;align-items:center}
.kees-visual .media{aspect-ratio:4/5;border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.kees-quote{margin:1.3rem 0;padding:1.1rem 1.3rem;background:#fff;border-left:4px solid var(--kws-blue);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic;color:var(--kws-navy);font-weight:600;box-shadow:var(--shadow-sm)}
.kees-points{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1rem;margin:1.4rem 0 0}
.kees-points li{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:var(--text-md)}
/* Ronde 2 (Koen, 2026-10-06): ritme in de Over-ons-kaart. De cijfers stonden
   direct op de knop. Nu: punten, dan de cijfers als eigen strook met een
   haarlijn erboven, dan de knop met dezelfde stap (1.8rem) als de secties
   hierboven gebruiken. */
.kees-copy .kws-stats{margin:1.7rem 0 0;padding-top:1.4rem;border-top:1px solid var(--border)}
.kees-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}
/* Op een smalle telefoon braken de twee kolommen punten op drie regels; één kolom leest rustiger. */
@media (max-width:479px){ .kees-points{grid-template-columns:1fr} }

/* value cards (about page) */
.value-grid{display:grid;gap:1.2rem;margin-top:2.2rem}
/* Vier items in drie kolommen liet er een alleen op de tweede rij achter.
   Twee bij twee, en vier op een breed scherm. */
@media (min-width:640px){.value-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.value-grid{grid-template-columns:repeat(4,1fr)}}
.value-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 1.3rem;box-shadow:var(--shadow-sm)}
.value-card .ico{width:46px;height:46px;border-radius:var(--radius-sm);background:rgba(33,169,232,.12);color:var(--kws-blue);display:flex;align-items:center;justify-content:center;margin-bottom:.9rem}
.value-card .ico svg{width:24px;height:24px}
.value-card.green .ico{background:rgba(93,187,70,.14);color:var(--kws-green)}
.value-card h3{font-size:var(--text-lg);margin-bottom:.35rem}
.value-card p{color:var(--muted);font-size:var(--text-md)}

/* stats row */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-top:2.2rem}
.stat{background:var(--kws-navy);color:#fff;border-radius:var(--radius);padding:1.5rem 1.3rem;text-align:center}
.stat strong{display:block;font-size:var(--text-5xl);font-weight:800;color:#fff;line-height:1}
.stat span{display:block;margin-top:.4rem;font-size:var(--text-sm);color:var(--on-dark-5)}

/* ---------- Reviews / trust ---------- */
.trust-assets{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:2rem}
.trust-assets .asset{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.8rem 1rem;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center}
.trust-assets .asset img{height:48px;width:auto;object-fit:contain}
.trust-assets .asset.kroon img{height:64px}
.review-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 1.4rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.9rem}
.review-card .stars{color:var(--review-yellow);font-size:var(--text-lg);letter-spacing:1px}
.review-card blockquote{font-size:var(--text-base);color:var(--text);font-weight:500}
.review-card cite{font-style:normal;font-size:var(--text-sm);color:var(--muted);font-weight:700}
.review-note{margin-top:1.4rem;font-size:var(--text-sm);color:var(--muted);max-width:600px}
.reviews-marquee{margin-top:1.9rem;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--border) transparent;cursor:grab;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.reviews-marquee::-webkit-scrollbar{height:8px}
.reviews-marquee::-webkit-scrollbar-track{background:transparent}
.reviews-marquee::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-pill)}
.reviews-marquee::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.reviews-marquee:focus-visible{outline:3px solid var(--kws-blue);outline-offset:4px;border-radius:var(--radius-sm)}
.reviews-marquee.dragging{cursor:grabbing}
.reviews-track{display:flex;gap:1.2rem;width:max-content;padding:.5rem .3rem 1rem}
.reviews-track .review-card{width:312px;flex:0 0 312px;user-select:none;transition:transform .18s,box-shadow .18s}
.reviews-track .review-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card)}
.review-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto}
.review-foot .gicon{height:22px;width:auto}

/* ---------- Contact ---------- */
.contact-grid{display:grid;gap:1.2rem;margin-top:2.2rem}
.contact-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 1.3rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.5rem}
.contact-card .ico{width:48px;height:48px;border-radius:var(--radius-sm);background:rgba(33,169,232,.12);color:var(--kws-blue);display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}
.contact-card.wa .ico{background:rgba(37,211,102,.14);color:var(--whatsapp)}
.contact-card .ico svg{width:24px;height:24px}
.contact-card h3{font-size:var(--text-lg)}
.contact-card a{font-weight:700;color:var(--kws-blue);text-decoration:none}
.contact-card a:hover{text-decoration:underline;text-underline-offset:3px}
.contact-card p{color:var(--muted);font-size:var(--text-sm)}
.hours{margin-top:.4rem;display:grid;gap:.35rem}
.hours li{display:flex;justify-content:space-between;gap:1rem;font-size:var(--text-md);color:var(--text);border-bottom:1px dashed var(--border);padding:.35rem 0}
.hours li span:last-child{color:var(--muted);font-weight:600}

/* ---------- FAQ ---------- */
.faq-list{margin-top:2rem;display:grid;gap:.75rem;max-width:820px}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-sm);transition:border-color .25s,box-shadow .25s}
.faq-item[open]{border-color:var(--kws-blue);box-shadow:0 12px 30px rgba(33,169,232,.14)}
.faq-item summary{list-style:none;cursor:pointer;padding:1.1rem 3rem 1.1rem 1.3rem;font-weight:700;color:var(--kws-navy);position:relative;font-size:var(--text-base)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:1.3rem;top:50%;width:10px;height:10px;border-right:2.5px solid var(--kws-blue);border-bottom:2.5px solid var(--kws-blue);transform:translateY(-70%) rotate(45deg);transition:transform .3s ease}
.faq-item[open] summary::after{transform:translateY(-20%) rotate(225deg)}
.faq-item summary:hover{color:var(--kws-blue)}
.faq-item .faq-answer{overflow:hidden;transition:height .32s ease;will-change:height;padding:0 1.3rem 1.2rem;color:var(--muted);font-size:var(--text-md)}
.faq-cta{margin-top:1.7rem}

/* ---------- Final CTA ---------- */
.final{background:linear-gradient(135deg,var(--kws-navy),var(--kws-deep-blue));color:#fff;border-radius:var(--radius-lg);padding:3.4rem 1.5rem;text-align:center;position:relative}
.final h2{color:#fff}
.final p{color:var(--on-dark-5);margin:1rem auto 1.8rem;max-width:52ch}
.final-buttons{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}

/* ---------- Vergelijking hogedruk / softwash (werkwijze) ---------- */
/* Twee doorsnedes van dezelfde dakpan naast elkaar. Het verschil zit in de
   wortel in de porie, dus dat is wat de tekening laat zien. Geen cijfers over
   druk of inweektijd: die hebben we niet. */
.compare{display:grid;gap:2rem;margin-top:2.2rem;grid-template-columns:1fr}
.compare-title{font-size:var(--text-xl);display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .7rem;margin-bottom:.9rem}
.compare-tag{font-size:var(--text-xs);font-weight:700;color:var(--kws-deep-blue);background:rgba(88,199,243,.18);padding:.25rem .65rem;border-radius:var(--radius-pill)}
.compare-facts{list-style:none;margin-top:1.2rem;display:grid;gap:.7rem}
.compare-facts li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--text-md);color:var(--text);line-height:1.5}
.compare-facts .check{margin-top:.1rem}
.compare-mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;margin-top:.1rem;border-radius:50%;font-weight:800;font-size:var(--text-md);line-height:1}
.compare-mark.is-no{background:var(--light-bg);border:1px solid var(--border);color:var(--muted)}
@media (min-width:900px){
  .compare{grid-template-columns:1fr 1fr;gap:2.4rem}
}

/* ---------- Ondergronden met pictogram (werkwijze) ---------- */
.surface-grid{display:grid;gap:1.1rem;margin-top:2.2rem;grid-template-columns:1fr}
.surface-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem 1.3rem 1.4rem;box-shadow:var(--shadow-sm)}
.surface-ico{width:52px;height:52px;object-fit:contain;display:block;margin-bottom:.9rem}
.surface-card h3{font-size:var(--text-lg);margin-bottom:.3rem}
.surface-card p{color:var(--muted);font-size:var(--text-md)}
/* Twijfelgevallen was de vijfde kaart in een raster van drie kolommen, dus een
   wees-rij. Het is ook geen ondergrond, dus het is nu een notitie. */
.surface-note{margin-top:1.3rem;padding:1rem 1.2rem;border-left:4px solid var(--kws-blue);background:var(--light-bg);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text);font-size:var(--text-md);max-width:74ch}
.surface-note strong{color:var(--kws-navy)}
.middelen-split,.duo-split,.values-split{margin-top:2.2rem}
/* Tekst naast een beeld staat in dezelfde omkaderde panelen als elders op
   de site, niet los op de achtergrond. */
.split-panels{display:grid;gap:1rem}
.split-panels .panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem 1.5rem;box-shadow:var(--shadow-sm)}
.split-panels .panel h3{font-size:var(--text-lg)}
.split-panels .panel p{color:var(--muted);font-size:var(--text-md);margin-top:.35rem}
.values-col{display:flex;flex-direction:column;justify-content:center}
/* De portretfoto was veel hoger dan de twee rijen kaarten ernaast. */
.values-split .media img{object-position:center 30%}
.value-grid-stack{margin-top:0}
@media (min-width:980px){.value-grid-stack{grid-template-columns:repeat(2,1fr)}}
/* Buurplaatsen zijn links, geen kaarten. Chips die meebreken in plaats van
   een raster dat bij drie of vier items een halve rij overhoudt. */
.plaats-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.plaats-chips a{display:inline-flex;align-items:center;min-height:40px;padding:.5rem .95rem;font-size:var(--text-sm);font-weight:700;color:var(--kws-deep-blue);background:#fff;border:1px solid var(--border);border-radius:var(--radius-pill);text-decoration:none;transition:border-color .15s,background .15s}
.plaats-chips a:hover{border-color:var(--kws-blue);background:var(--light-bg)}
@media (max-width:767px){.plaats-chips a{min-height:44px}}

.callout-figure{margin:0 0 1.6rem}
.callout-figure img{width:100%;height:260px;object-fit:cover;border-radius:var(--radius);display:block}

@media (min-width:640px){
  .surface-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:980px){
  .surface-grid{grid-template-columns:repeat(4,1fr)}
}

/* ---------- Plaatslijst (locaties) ---------- */
/* Was een vinkjeslijst, maar het vinkje betekende daar niets. De kaart die hier
   boven stond is er op 2026-09-18 uit gehaald, zie proj-0001. */
/* Kolommen in plaats van een raster: bij 16 of 17 plaatsen laat een
   raster een halve rij achter, kolommen verdelen zichzelf gelijk. */
.plaatslijst{list-style:none;margin-top:.4rem;column-width:160px;column-gap:1.4rem}
.plaatslijst li{break-inside:avoid}
.plaatslijst a{display:block;padding:.42rem .1rem;color:var(--kws-deep-blue);text-decoration:none;font-weight:600;font-size:var(--text-md);border-bottom:1px solid transparent}
.plaatslijst a:hover{color:var(--kws-blue);border-bottom-color:var(--border)}

@media (max-width:719px){
  .plaatslijst a{min-height:44px;display:flex;align-items:center}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--kws-navy);color:var(--on-dark-4);padding:3rem 0 0}
.footer-grid{display:grid;gap:2rem}
.footer-brand img{height:42px;width:auto;margin-bottom:1rem}
.footer-brand p{color:var(--on-dark-6);font-size:var(--text-md);max-width:34ch}
.footer-region{margin-top:.9rem;display:flex;align-items:center;gap:.5rem;font-size:var(--text-sm);font-weight:600;color:var(--on-dark-4)}
.footer-region .tick{color:var(--kws-cyan)}
.footer-col h2{font-size:var(--text-base);font-weight:800;color:#fff;margin-bottom:.9rem}
.footer-col ul{display:grid;gap:.5rem}
.footer-col a{text-decoration:none;color:var(--on-dark-6);font-size:var(--text-md);display:inline-flex;align-items:center;gap:.5rem;min-height:30px;transition:color .18s}
@media (max-width:767px){
  .footer-col a,.footer-bottom a,.footer-legal a,
  .detail-cross a,.page-hero .crumb a,
  .contact-card a,.hub-cat-head .hub-tag,
  .hub-method a,.btn-text{min-height:44px;display:inline-flex;align-items:center}
  /* De bolletjes van de rotator blijven 8px in beeld, maar krijgen een
     onzichtbaar raakvlak van 44px eromheen. */
  .hero-rotator .dots{gap:0}
  .hero-rotator .dots button{position:relative}
  .hero-rotator .dots button::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
}
.footer-col a:hover{color:var(--kws-cyan)}
.footer-contact a{font-weight:600;color:var(--on-dark-1)}
.footer-bottom{margin-top:2.5rem;border-top:1px solid rgba(255,255,255,.12);padding:1.2rem 0;font-size:var(--text-xs);color:var(--on-dark-8);text-align:center}

/* ---------- Responsive ---------- */
@media (min-width:680px){
  .usp-grid{grid-template-columns:repeat(4,1fr)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .ba-grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(4,1fr)}
  .contact-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
}
@media (min-width:1000px){
  .section{padding:var(--space-section) 0}
  :root{--space-section:4.5rem;--space-section-airy:6.5rem;--space-section-tight:2.75rem}
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:3.2rem;align-items:center;padding:4rem 0 8.5rem}
  .hero-visual .media{aspect-ratio:4/3.4}
  .usp{margin-top:-1.4rem}
  .services-grid{grid-template-columns:repeat(3,1fr)}
  .method-grid{grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:center}
  .steps{grid-template-columns:1fr 1fr}
  .ba-grid{grid-template-columns:repeat(3,1fr)}
  .ba-card.large{grid-column:span 2}
  .tool-grid{grid-template-columns:1.15fr .85fr}
  .tool-copy{padding:3.2rem 2.6rem}
  .kees-grid{grid-template-columns:.85fr 1.15fr;gap:3rem}
  .page-hero .container{padding:3.4rem 0 7rem}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}
}
@media (min-width:1120px){
  .main-nav{display:block}
  .header-actions{display:flex}
  .menu-toggle{display:none}
  .mobile-menu{display:none!important}
  .quick-bar{display:none}
  body{padding-bottom:0}
}

/* ============================================================
   DPS round — request modal, services hub, detail pages,
   button-triggers, calmer mobile.
   ============================================================ */

/* icon inside a primary/text button (e.g. request CTA droplet) */
.btn > svg{width:18px;height:18px;flex:none}

/* buttons reused as styled links/triggers */
button.mega-btn,button.feat-btn,button.qa-quote{font:inherit;border:none;cursor:pointer;width:100%}
.quick-bar button.qa-quote{display:flex;align-items:center;justify-content:center;gap:.4rem;font-weight:800;font-size:var(--text-md);border-radius:var(--radius-sm);min-height:48px;background:var(--kws-blue);color:#fff}

/* ---------- Cleaning-request modal ---------- */
body.modal-open{overflow:hidden}
.modal-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(7,18,31,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .25s ease}
.modal-overlay.is-open{opacity:1}
.modal-overlay[hidden]{display:none}
.modal{background:#fff;border-radius:var(--radius-lg);width:min(720px,100%);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(7,18,31,.5);transform:translateY(16px) scale(.985);transition:transform .25s ease;position:relative}
.modal-overlay.is-open .modal{transform:none}
.modal-close{position:absolute;top:.7rem;right:.7rem;width:42px;height:42px;border-radius:var(--radius-sm);border:none;background:var(--light-bg);color:var(--kws-navy);font-size:var(--text-4xl);line-height:1;display:flex;align-items:center;justify-content:center;z-index:3;transition:background .15s,color .15s}
.modal-close:hover{background:var(--kws-navy);color:#fff}
.modal-head{padding:1.7rem 1.7rem 1rem}
.modal-head h2{font-size:var(--text-3xl)}
.modal-intro{color:var(--muted);margin-top:.6rem;font-size:var(--text-md);max-width:54ch}
.modal-body{padding:0 1.7rem;display:flex}
.aanvraag-frame{width:100%;height:clamp(300px,50vh,440px);border:1px solid var(--border);border-radius:var(--radius);background:var(--light-bg)}
.modal-foot{padding:1.1rem 1.7rem 1.6rem;display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;border-top:1px solid var(--border);margin-top:1.2rem}
.modal-foot-label{font-weight:700;color:var(--kws-navy);font-size:var(--text-md)}
.modal-foot-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-left:auto}
.modal-foot .btn{padding:.7rem 1.1rem;min-height:44px;font-size:var(--text-md)}
@media (max-width:560px){
  .modal-overlay{padding:0;align-items:flex-end}
  .modal{border-radius:var(--radius) var(--radius) 0 0;max-height:94vh;width:100%}
  .modal-head{padding:1.4rem 1.3rem .8rem}
  .modal-body{padding:0 1.3rem}
  .modal-foot{padding:1rem 1.3rem calc(1.2rem + env(safe-area-inset-bottom))}
  .modal-foot-btns{margin-left:0;width:100%}
  .modal-foot-btns .btn{flex:1}
}

/* ---------- Services hub ---------- */
.hub-intro{display:grid;gap:1rem;margin-top:1.4rem;grid-template-columns:1fr}
.hub-method{background:#fff;border:1px solid var(--border);border-left:4px solid var(--kws-blue);border-radius:var(--radius);padding:1.4rem 1.4rem;box-shadow:var(--shadow-sm)}
.hub-method strong{color:var(--kws-navy)}
.hub-method p{color:var(--muted);font-size:var(--text-md);margin-top:.3rem}
.hub-cat{margin-top:2.6rem}
.hub-cat-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.hub-cat-head h2{font-size:clamp(1.4rem,3vw,1.8rem)}
.hub-cat-head .hub-tag{font-size:var(--text-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--kws-blue)}

/* ---------- Detail page ---------- */
.duo{display:grid;gap:1.3rem;margin-top:2.2rem;grid-template-columns:1fr}
.duo .panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.6rem 1.5rem;box-shadow:var(--shadow-sm)}
.duo .panel h3{font-size:var(--text-xl);margin-bottom:.5rem}
.duo .panel p{color:var(--muted);font-size:var(--text-md)}
.duo .panel ul{display:grid;gap:.5rem;margin-top:.8rem}
.duo .panel li{display:flex;gap:.55rem;align-items:flex-start;font-size:var(--text-md);font-weight:600;color:var(--text)}
@media (min-width:760px){ .duo{grid-template-columns:1fr 1fr} }

.callout{background:var(--kws-navy);color:#fff;border-radius:var(--radius-lg);padding:2rem 1.6rem;display:grid;gap:1.1rem;overflow:hidden;position:relative}
.callout .eyebrow{color:var(--kws-cyan)}
.callout .eyebrow::before{background:var(--kws-cyan)}
.callout h2{color:#fff;font-size:clamp(1.4rem,3vw,1.9rem)}
.callout p{color:var(--on-dark-5)}
.callout-list{display:grid;gap:.6rem}
.callout-list li{display:flex;gap:.6rem;align-items:flex-start;color:var(--on-dark-1);font-weight:600;font-size:var(--text-md)}
@media (min-width:880px){ .callout{grid-template-columns:.95fr 1.05fr;gap:2.6rem;padding:2.6rem 2.4rem;align-items:center} }

.req-note{margin-top:1rem;font-size:var(--text-sm);color:var(--muted)}
.detail-cross{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.detail-cross a{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--text-sm);font-weight:700;color:var(--kws-deep-blue);background:var(--light-bg);border:1px solid var(--border);padding:.5rem .9rem;border-radius:var(--radius-pill);text-decoration:none;transition:border-color .15s,background .15s}
.detail-cross a:hover{border-color:var(--kws-blue);background:#fff}

/* concept banner (e.g. Resultaten, ready for later overhaul) */
.concept-banner{display:flex;align-items:flex-start;gap:.7rem;background:rgba(33,169,232,.08);border:1px dashed var(--kws-blue);border-radius:var(--radius);padding:1rem 1.2rem;color:var(--kws-deep-blue);font-size:var(--text-md);margin-top:1.6rem}
.concept-banner strong{color:var(--kws-navy)}

/* ---------- Simplified mega-menu (Populair / Overige / Direct) ---------- */
.mega-grid.cols3{grid-template-columns:1.05fr .92fr 1fr}
.mega-cards.one{grid-template-columns:1fr}
.modal-foot{background:var(--light-bg)}

/* ---------- Results — proof / trust ---------- */
.case-feature{display:grid;gap:0;margin-top:1.4rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}
.case-feature .case-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.case-feature .case-media img{width:100%;height:100%;object-fit:cover}
.case-feature .case-body{padding:1.8rem 1.6rem}
.case-feature .case-kicker{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--text-2xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--kws-blue);background:rgba(33,169,232,.1);padding:.3rem .7rem;border-radius:var(--radius-pill);margin-bottom:.7rem}
.case-feature .case-body h3{font-size:clamp(1.3rem,2.6vw,1.7rem)}
.case-meta{display:grid;gap:.7rem;margin:1.1rem 0 1.4rem}
.case-meta div{display:flex;gap:.7rem;align-items:flex-start}
.case-meta dt{flex:none;width:84px;font-size:var(--text-xs);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding-top:.1rem}
.case-meta dd{font-size:var(--text-md);color:var(--text);font-weight:600}
.case-feature .split-ctas{margin-top:.2rem}
@media (min-width:880px){ .case-feature{grid-template-columns:1.1fr .9fr;align-items:stretch} .case-feature .case-media{aspect-ratio:auto;height:100%} .case-feature .case-body{padding:2.4rem 2.2rem;align-self:center} }

.ba-context{display:grid;gap:.32rem;margin:.55rem 0 .8rem}
.ba-context li{display:flex;gap:.5rem;font-size:var(--text-sm);color:var(--muted);line-height:1.4}
.ba-context li strong{color:var(--kws-navy);font-weight:700;flex:none;min-width:62px}
.ba-body .btn-text{margin-top:.2rem}

/* ============================================================
   Primary service-page template (Dakreiniging) — richer building
   blocks. Reused by other detail pages where it fits.
   ============================================================ */

/* trustbar chips on a dark page-hero */
.page-hero .trustbar{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.page-hero .trustbar .chip{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--text-xs);font-weight:700;color:var(--on-dark-2);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:.4rem .8rem;border-radius:var(--radius-pill)}
.page-hero .trustbar .chip .tick{color:var(--kws-cyan)}

/* problem-recognition grid */
.recog-grid{display:grid;gap:1rem;margin-top:1.4rem;grid-template-columns:1fr}
.recog-card{display:flex;gap:.85rem;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.2rem;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}
.recog-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:var(--kws-blue)}
.recog-card .rc-ico{flex:none;width:36px;height:36px;border-radius:var(--radius-xs);background:rgba(33,169,232,.12);color:var(--kws-blue);display:flex;align-items:center;justify-content:center}
.recog-card .rc-ico svg{width:20px;height:20px}
.recog-card p{font-size:var(--text-md);font-weight:600;color:var(--kws-navy)}
@media (min-width:620px){ .recog-grid{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .recog-grid{grid-template-columns:repeat(3,1fr)} }

/* "kan mijn dak gereinigd worden?" — wel / niet / beoordelen */
.fit-grid{display:grid;gap:1.2rem;margin-top:1.4rem;grid-template-columns:1fr}
.fit-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.fit-head{display:flex;align-items:center;gap:.55rem;padding:.95rem 1.3rem;font-weight:800;color:#fff;font-size:var(--text-base)}
.fit-head svg{width:22px;height:22px;flex:none}
.fit-card.yes .fit-head{background:var(--kws-green)}
.fit-card.no .fit-head{background:var(--kws-navy)}
.fit-card.maybe .fit-head{background:var(--kws-blue)}
.fit-list{padding:1.1rem 1.3rem 1.4rem;display:grid;gap:.6rem}
.fit-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--text-md);color:var(--text)}
.fit-list li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;margin-top:.45rem;background:var(--kws-cyan)}
.fit-card.yes .fit-list li::before{background:var(--kws-green)}
.fit-card.no .fit-list li::before{background:var(--muted)}
@media (min-width:880px){ .fit-grid{grid-template-columns:repeat(3,1fr)} }

/* compact "KWS-aanpak" list (softwash + daktype-check + eerlijk advies) */
.approach-list{display:grid;gap:1rem;margin:1.3rem 0 1.5rem}
.approach-list .ap{border-left:3px solid var(--kws-blue);padding-left:1rem}
.approach-list .ap h3{font-size:var(--text-lg);margin-bottom:.2rem}
.approach-list .ap p{color:var(--muted);font-size:var(--text-md)}

/* process timeline */
.timeline{display:grid;gap:1rem;margin-top:1.6rem;counter-reset:tl}
.timeline.cols4{grid-template-columns:1fr}
@media (min-width:560px){ .timeline.cols4{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .timeline.cols4{grid-template-columns:repeat(4,1fr)} }
.tl-step{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem 1.3rem 1.2rem 3.5rem;box-shadow:var(--shadow-sm);counter-increment:tl}
.tl-step::before{content:counter(tl);position:absolute;left:1.1rem;top:1.2rem;width:34px;height:34px;border-radius:var(--radius-xs);background:var(--kws-navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--text-md)}
.tl-step h3{font-size:var(--text-lg);margin-bottom:.2rem}
.tl-step p{color:var(--muted);font-size:var(--text-md)}
@media (min-width:900px){ .timeline{grid-template-columns:repeat(3,1fr)} }
@media (min-width:900px){ .timeline.cols5{grid-template-columns:repeat(6,1fr)} .timeline.cols5>.tl-step{grid-column:span 2} .timeline.cols5>.tl-step:nth-child(n+4){grid-column:span 3} }
.panel .partner-logo.partner-logo--panel{display:block;height:64px;width:auto;max-width:200px;margin:0 0 .9rem}

/* static proof reviews (no marquee) */
.review-grid{display:grid;gap:1.1rem;margin-top:1.4rem;grid-template-columns:1fr}
@media (min-width:760px){ .review-grid{grid-template-columns:repeat(3,1fr)} }

/* honest nuance note */
.nuance{margin-top:1.2rem;display:flex;gap:.6rem;align-items:flex-start;background:rgba(33,169,232,.08);border:1px solid var(--border);border-left:4px solid var(--kws-blue);border-radius:var(--radius);padding:1rem 1.2rem;color:var(--kws-deep-blue);font-size:var(--text-md);font-weight:600}

/* ============================================================
   FAQ system — service-page CTA card + general FAQ page
   (sticky sidebar on desktop, horizontal pills on mobile, live search).
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* "Staat je vraag er niet tussen?" card under a service FAQ */
.faq-cta-card{margin-top:1.8rem;background:#fff;border:1px solid var(--border);border-left:4px solid var(--kws-blue);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.6rem 1.6rem;display:grid;gap:1rem}
.faq-cta-card h3{font-size:var(--text-xl)}
.faq-cta-card p{color:var(--muted);font-size:var(--text-md);margin-top:.3rem;max-width:56ch}
.faq-cta-card .fcc-actions{display:flex;flex-wrap:wrap;gap:.7rem}
.faq-cta-card .fcc-link{justify-self:start}
@media (min-width:760px){
  .faq-cta-card{grid-template-columns:1.2fr auto;align-items:center}
  .faq-cta-card .fcc-text{grid-column:1 / -1}
}
/* teaser mode (homepage): compact footer with primary CTA + link to full FAQ */
.faq-teaser-foot{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;align-items:center;margin-top:1.6rem}
/* compact (category/teaser) FAQ CTA row — ≤5 questions, then route to full FAQ */
.faq-allcta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:1.7rem}
.faq-allcta .faq-allcta-link{text-align:center}

/* general FAQ page */
.faq-search{position:relative;margin-top:1.6rem;max-width:680px}
.faq-search input{width:100%;padding:.95rem 1rem .95rem 2.9rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);font:inherit;font-size:var(--text-base);background:#fff;color:var(--text)}
.faq-search input:focus-visible{outline:3px solid var(--kws-blue);outline-offset:2px;border-color:var(--kws-blue)}
.faq-search .si{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--muted);width:20px;height:20px;pointer-events:none}
.faq-status{margin-top:.7rem;font-size:var(--text-sm);color:var(--muted);min-height:1.1em}

.faq-layout{display:grid;gap:1.6rem;margin-top:1.6rem;grid-template-columns:1fr}
/* grid items default to min-width:auto; without this the nowrap pills blow out the track */
.faq-nav,.faq-sections{min-width:0}
.faq-cats{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;scrollbar-width:thin}
.faq-cat-btn{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;border:1.5px solid var(--border);background:#fff;border-radius:var(--radius-pill);padding:.6rem 1rem;font-weight:700;font-size:var(--text-sm);color:var(--kws-navy);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.faq-cat-btn:hover{border-color:var(--kws-blue);color:var(--kws-blue)}
.faq-cat-btn.is-active{background:var(--kws-navy);color:#fff;border-color:var(--kws-navy)}
.faq-cat-btn .cnt{font-size:var(--text-2xs);font-weight:800;background:var(--light-bg);color:var(--muted);border-radius:var(--radius-pill);padding:.05rem .45rem;min-width:1.4em;text-align:center}
.faq-cat-btn.is-active .cnt{background:rgba(255,255,255,.22);color:#fff}
.faq-cat-btn:focus-visible{outline:3px solid var(--kws-blue);outline-offset:2px}

.faq-sections .faq-cat{display:none}
.faq-sections .faq-cat.is-active{display:block;animation:tabIn .3s ease}
.faq-sections.searching .faq-cat{display:none}
.faq-sections.searching .faq-cat.search-hit{display:block;animation:none}
.faq-sections .faq-cat .faq-item.hide{display:none}
.faq-cat > h2{font-size:var(--text-2xl);margin-bottom:.3rem}
.faq-cat > .cat-intro{color:var(--muted);font-size:var(--text-md);margin-bottom:1rem}
.faq-cat .faq-list{margin-top:1rem}
.faq-empty{display:none;background:#fff;border:1px dashed var(--kws-blue);border-radius:var(--radius);padding:1.6rem;color:var(--kws-deep-blue);font-weight:600}
.faq-empty.show{display:block}
.faq-empty a{color:var(--kws-blue)}

@media (min-width:900px){
  .faq-layout{grid-template-columns:248px 1fr;align-items:start}
  .faq-nav{position:sticky;top:96px}
  .faq-cats{flex-direction:column;overflow:visible;gap:.35rem;padding-bottom:0}
  .faq-cat-btn{width:100%;justify-content:space-between}
}

/* ---------- Calmer mobile ---------- */
@media (max-width:679px){
  .hero-grid{padding:1.7rem 0 4rem}
  .page-hero .container{padding:1.7rem 0 3.4rem}
  .hero-shapes{opacity:.55}
  :root{--space-section:2.6rem;--space-section-airy:3.6rem;--space-section-tight:1.6rem}
  .hero-ctas,.page-hero .page-ctas{gap:.6rem}
  .services-grid,.ba-grid,.value-grid,.contact-grid,.duo{gap:1rem}
  /* Above the fold stays to max two actions; calling lives in the quick bar. */
  .hero-ctas .supporting{display:none}
}

/* ============================================================
   TEKSTPAGINA'S (privacy, voorwaarden, cookies, bedankt, 404)
   Eén smalle leeskolom. Bewust sober: dit zijn pagina's die
   gelezen moeten kunnen worden, niet pagina's die moeten verkopen.
   ============================================================ */
.legal{max-width:760px;margin:0 auto}
.legal h2{margin:2.4rem 0 .6rem;font-size:var(--text-2xl);line-height:1.3;color:var(--kws-navy)}
.legal h2:first-child{margin-top:0}
.legal h3{margin:1.6rem 0 .4rem;font-size:var(--text-lg);color:var(--kws-navy)}
.legal p{margin:0 0 1rem;color:var(--text);line-height:1.75}
.legal ul,.legal ol{margin:0 0 1.2rem;padding-left:1.3rem;color:var(--text);line-height:1.75}
.legal li{margin-bottom:.4rem}
.legal a{color:var(--kws-deep-blue);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--kws-blue)}
.legal .legal-meta{margin-bottom:2rem;padding:1rem 1.2rem;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--light-bg);color:var(--muted);font-size:var(--text-md)}
.legal .legal-meta p{margin:0;color:inherit}
.legal table{width:100%;border-collapse:collapse;margin:0 0 1.4rem;font-size:var(--text-md)}
.legal th,.legal td{overflow-wrap:anywhere;hyphens:auto}
.legal th,.legal td{padding:.7rem .8rem;border:1px solid var(--border);text-align:left;vertical-align:top}
.legal th{background:var(--light-bg);color:var(--kws-navy);font-weight:600}
.legal .legal-contact{margin-top:2.4rem;padding:1.4rem 1.6rem;border-radius:var(--radius-sm);
  background:var(--light-bg);border:1px solid var(--border)}
.legal .legal-contact p:last-child{margin-bottom:0}

/* Smalle, gecentreerde boodschap: bedankpagina en 404. */
.notice{max-width:620px;margin:0 auto;text-align:center}
.notice .notice-ico{display:inline-flex;align-items:center;justify-content:center;
  width:72px;height:72px;margin-bottom:1.4rem;border-radius:50%;
  background:rgba(93,187,70,.12);color:var(--kws-green)}
.notice .notice-ico.warn{background:rgba(33,169,232,.12);color:var(--kws-blue)}
.notice .notice-ico svg{width:34px;height:34px}
.notice h1{margin:0 0 .8rem}
.notice p{margin:0 auto 1.2rem;max-width:52ch;color:var(--muted);line-height:1.7}
.notice .notice-actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.8rem}
.notice .notice-links{margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid var(--border)}
.notice .notice-links p{margin-bottom:.8rem;font-weight:600;color:var(--kws-navy)}
.notice .notice-links ul{display:flex;flex-wrap:wrap;gap:.5rem .9rem;justify-content:center;
  list-style:none;margin:0;padding:0}
.notice .notice-links a{color:var(--kws-deep-blue);text-decoration:underline;text-underline-offset:2px}

/* Bedrijfsgegevens en juridische links in de footer. */
.footer-nap{margin:.9rem 0 0;font-style:normal;font-size:var(--text-sm);line-height:1.7;color:rgba(255,255,255,.62)}
.footer-legal{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;list-style:none;margin:0 0 .6rem;padding:0}
.footer-legal a{font-size:var(--text-sm);color:rgba(255,255,255,.72);text-decoration:none}
.footer-legal a:hover{color:var(--white);text-decoration:underline;text-underline-offset:2px}
.footer-hours{margin:.6rem 0 0;display:flex;align-items:center;gap:.5rem;font-size:var(--text-sm);color:rgba(255,255,255,.62)}
.footer-hours .tick{color:var(--kws-cyan)}

/* ============================================================
   v2 components (2026-10-06), feedbackronde Kees.
   Markupcontract: AGENTS.md, "v2 components". Pagina's gebruiken deze
   klassen letterlijk; het gedrag staat in main.js, de chrome in layout.js.
   ============================================================ */

/* ---------- Diensten-dropdown: vijf beeldtegels op één rij ----------
   Breed en laag: de vijf hoofddiensten als staande beeldtegels (zelfde
   familie als .result-card, lagere foto) en daaronder één rij met de extra
   diensten als chips en rechts de "Bekijk alle diensten"-link. Vijf liggende
   kaarten met omschrijving pasten niet op 1120px zonder afgebroken titels. */
/* Ronde 2 (Koen, 2026-10-06): zes tegels, dakborstelen is een hoofddienst.
   Zes op een rij van 1016 tot 1124px binnenmaat geeft 159 tot 177px per tegel;
   een titel die niet past (Gevel impregneren op een smal desktopscherm) loopt
   door op een tweede regel en wordt nooit afgekapt. De voet lijnt boven uit,
   zodat de pijl bij de eerste regel blijft staan. */
.mega-service-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.mega-service-grid .result-card{min-width:0}
.mega-service-grid .result-card .rc-thumb{height:88px}
.mega-service-grid .result-card .rc-foot{padding:9px 10px 10px;align-items:flex-start}
.mega-service-grid .result-card .rc-t{font-size:var(--text-sm);line-height:1.25;min-width:0;white-space:normal;letter-spacing:-.01em}
.mega-service-grid .result-card .rc-arr{line-height:1.1}
.md-extras{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.md-extras-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.md-extras-label{font-size:var(--text-3xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:.3rem}
.md-extras .secondary-service-link{min-height:40px;padding:7px 12px;font-size:var(--text-sm);gap:.45rem}
.md-extras .md-bottom{margin-top:0}

/* ---------- Cijfers die oplopen (.kws-stats) ----------
   Klein en aan de zijkant: twee getallen met een streepje ervoor, geen
   kaarten en geen grote cijfers. De statische tekst is al de eindwaarde;
   main.js telt alleen op als beweging mag (motionOK). */
.kws-stats{display:flex;flex-wrap:wrap;gap:.8rem 2rem;margin:1.4rem 0 0;padding:0;font-variant-numeric:tabular-nums}
.kws-stats.is-vertical{flex-direction:column;gap:.9rem}
.kws-stat{margin:0;padding-left:.85rem;border-left:3px solid var(--kws-blue);display:flex;flex-direction:column;gap:.05rem;line-height:1.15}
.kws-stat-num{font-size:var(--text-2xl);font-weight:800;color:var(--kws-navy);letter-spacing:-.01em}
.kws-stat-label{font-size:var(--text-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hero .kws-stats .kws-stat,.page-hero .kws-stats .kws-stat,.kws-stats.on-dark .kws-stat{border-left-color:var(--kws-cyan)}
.hero .kws-stats .kws-stat-num,.page-hero .kws-stats .kws-stat-num,.kws-stats.on-dark .kws-stat-num{color:#fff}
.hero .kws-stats .kws-stat-label,.page-hero .kws-stats .kws-stat-label,.kws-stats.on-dark .kws-stat-label{color:var(--on-dark-6)}

/* ---------- Voor/na-schuif (.ba-slider) ----------
   Beide foto's liggen absoluut in één kader met vaste verhouding, dus niets
   verspringt bij het laden. De "voor"-foto ligt bovenop en wordt met
   clip-path afgesneden op --ba. De range-input ligt onzichtbaar over het
   hele kader (slepen, tikken, pijltjestoetsen) en main.js zet --ba; de lijn
   en de greep lopen mee op dezelfde variabele. Zonder JS: een vaste 50/50. */
.ba-slider{--ba:50%;margin:0}
.ba-slider .ba-frame{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius);background:var(--light-bg);box-shadow:var(--shadow-card);isolation:isolate;user-select:none;-webkit-user-select:none}
.ba-slider.is-portrait .ba-frame{aspect-ratio:4/5}
.ba-slider.is-square .ba-frame{aspect-ratio:1/1}
.ba-slider .ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;margin:0;pointer-events:none}
.ba-slider .ba-before{clip-path:inset(0 calc(100% - var(--ba)) 0 0)}
.ba-slider .ba-frame::before{content:"";position:absolute;top:0;bottom:0;left:var(--ba);width:2px;transform:translateX(-50%);background:#fff;box-shadow:0 0 0 1px rgba(7,18,31,.18);z-index:2;pointer-events:none}
.ba-slider .ba-handle{position:absolute;top:50%;left:var(--ba);width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307121F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5'/%3E%3Cpath d='m15 7 5 5-5 5'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:var(--shadow);z-index:3;pointer-events:none}
.ba-slider .ba-vn{z-index:2;pointer-events:none}
/* De input is 44px breder dan het kader, zodat het midden van de (onzichtbare)
   duim precies op de kliklocatie valt en de lijn onder de vinger blijft. */
.ba-slider .ba-range{position:absolute;top:0;bottom:0;left:-22px;width:calc(100% + 44px);height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;z-index:4;-webkit-appearance:none;appearance:none;background:transparent;touch-action:pan-y}
.ba-slider .ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:44px}
.ba-slider .ba-range::-moz-range-thumb{width:44px;height:44px;border:0}
.ba-slider .ba-frame:focus-within{outline:3px solid var(--kws-blue);outline-offset:3px}
.ba-slider figcaption{margin-top:.8rem;font-size:var(--text-sm);color:var(--muted)}

/* ---------- Video die pas laadt bij klik (.video-facade) ----------
   Tot de klik staat er alleen de poster met een afspeelknop; main.js zet er
   dan een <video> voor in de plaats. Zonder data-video-src: badge "Video
   volgt", geen afspeelknop, knop doet niets. */
.video-facade{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--kws-navy);box-shadow:var(--shadow-card)}
.video-facade-btn{display:block;width:100%;height:100%;margin:0;padding:0;border:0;background:none;color:#fff;text-align:left;cursor:pointer;position:relative;font:inherit}
.video-facade-btn img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.video-facade-btn:hover img,.video-facade-btn:focus-visible img{transform:scale(1.03)}
.video-facade-btn:focus-visible{outline:3px solid var(--kws-blue);outline-offset:-3px}
.video-facade-play{position:absolute;left:50%;top:50%;width:72px;height:72px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.94);box-shadow:var(--shadow);transition:transform .2s,background .2s}
.video-facade-play::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);border-left:22px solid var(--kws-navy);border-top:13px solid transparent;border-bottom:13px solid transparent}
.video-facade-btn:hover .video-facade-play{transform:translate(-50%,-50%) scale(1.06);background:#fff}
.video-facade-label{position:absolute;left:0;right:0;bottom:0;padding:1.8rem 1.1rem .9rem;background:linear-gradient(transparent,rgba(7,18,31,.82));font-weight:700;font-size:var(--text-md);display:flex;align-items:center;gap:.5rem}
.video-facade-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--kws-cyan);flex:none}
.video-facade video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.video-facade.is-pending .video-facade-btn{cursor:default}
.video-facade.is-pending .video-facade-btn:hover img,.video-facade.is-pending .video-facade-btn:focus-visible img{transform:none}
.video-facade.is-pending .video-facade-play{display:none}
.video-facade-badge{position:absolute;top:.9rem;left:.9rem;z-index:2;background:rgba(255,255,255,.94);color:var(--kws-navy);font-size:var(--text-2xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.4rem .75rem;border-radius:var(--radius-xs);box-shadow:var(--shadow-sm);pointer-events:none}

/* ---------- Partners en certificaten (.partner-grid) ----------
   Nooit links. Zonder logo is de naam zelf het woordmerk: vet, navy, met
   de rol als klein label eronder, zodat het een keuze lijkt en geen
   ontbrekende afbeelding. Logo's krijgen een vaste hoogte voor gelijk gewicht,
   zonder grijsfilter. */
.partner-grid{list-style:none;display:flex;flex-wrap:wrap;gap:1rem;margin:1.8rem 0 0;padding:0}
.partner-item{flex:1 1 140px;max-width:300px;min-height:124px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;padding:1.3rem 1.1rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.partner-name{font-size:var(--text-xl);font-weight:800;letter-spacing:-.015em;line-height:1.15;color:var(--kws-navy)}
.partner-role{font-size:var(--text-2xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--kws-blue)}
.partner-logo{height:56px;width:auto;max-width:170px;object-fit:contain;display:block;margin:0 auto .15rem}
.partner-item.is-cert .partner-logo{height:80px}

/* ---------- Zakelijk blok (.zakelijk-block) ----------
   Klein en secundair: een lichte strook met een smalle accentrand, een
   kleinere kop en een outline-knop. Concurreert niet met de aanvraag-CTA.
   Werkt los op de pagina (eigen zijmarge) en binnen een .section/.container. */
.zakelijk-block{padding:0 1.25rem;margin:var(--space-section-tight) 0}
.section .zakelijk-block,.container .zakelijk-block{padding:0;margin:2.2rem 0 0}
.zakelijk-inner{max-width:var(--max);margin:0 auto;display:grid;gap:.5rem 1.6rem;align-items:center;padding:1.3rem 1.4rem;background:var(--light-bg);border:1px solid var(--border);border-left:4px solid var(--kws-deep-blue);border-radius:var(--radius)}
.zakelijk-inner h2{font-size:var(--text-xl);font-weight:800;line-height:1.25}
.zakelijk-inner p{color:var(--muted);font-size:var(--text-md);max-width:60ch}
.zakelijk-inner .btn{justify-self:start;margin-top:.4rem;padding:.75rem 1.2rem;min-height:46px;font-size:var(--text-md)}
@media (min-width:760px){
  .zakelijk-inner{grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:2rem}
  .zakelijk-inner h2{grid-column:1;grid-row:1}
  .zakelijk-inner p{grid-column:1;grid-row:2}
  .zakelijk-inner .btn{grid-column:2;grid-row:1/span 2;align-self:center;margin-top:0}
}

/* ---------- Softwash en heet water naast elkaar (.method-duo) ----------
   Twee gelijken: dezelfde kaart, dezelfde accentkleur, hetzelfde
   pictogramvak. Het enige verschil is het pictogram (druppel / thermometer). */
.method-duo{display:grid;gap:1.2rem;margin-top:2.2rem;grid-template-columns:1fr}
@media (min-width:760px){ .method-duo{grid-template-columns:1fr 1fr;gap:1.4rem} }
.method-card{display:flex;flex-direction:column;gap:.7rem;padding:1.6rem 1.5rem 1.7rem;background:#fff;border:1px solid var(--border);border-top:4px solid var(--kws-blue);border-radius:var(--radius);box-shadow:var(--shadow-sm);min-width:0}
.method-card h3{display:flex;align-items:center;gap:.75rem;font-size:var(--text-xl);margin:0}
.method-card h3::before{content:"";flex:none;width:44px;height:44px;border-radius:var(--radius-sm);background-color:rgba(33,169,232,.12);background-repeat:no-repeat;background-position:center;background-size:24px}
.method-card--softwash h3::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2321A9E8'%3E%3Cpath d='M12 2.5s6.5 7 6.5 11.5a6.5 6.5 0 0 1-13 0C5.5 9.5 12 2.5 12 2.5zm-1.2 9.2a2.6 2.6 0 0 0-1.8 2.5.9.9 0 0 0 1.8 0c0-.5.3-.8.7-1a.9.9 0 1 0-.7-1.5z'/%3E%3C/svg%3E")}
.method-card--heetwater h3::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321A9E8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4.5a2 2 0 0 1 4 0v8.6a4.5 4.5 0 1 1-4 0z'/%3E%3Cpath d='M12 9v7'/%3E%3C/svg%3E")}
.method-card p{color:var(--muted);font-size:var(--text-md);margin:0}
.method-list{display:grid;gap:.5rem;margin:.3rem 0 0;padding:0;list-style:none}
.method-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--text-md);font-weight:600;color:var(--text)}
.method-list li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;margin-top:.55rem;background:var(--kws-blue)}

/* ---------- Downloads (.download-list) ----------
   Een link is een witte kaart met documentpictogram en pijl omlaag; een
   document dat nog niet beschikbaar is (.is-pending) is een span: gestippeld,
   grijs, met het label "volgt". Nooit een dode link. */
.download-list{list-style:none;display:grid;gap:.6rem;margin:1.2rem 0 0;padding:0;max-width:560px}
.download-item{display:flex;align-items:center;gap:.8rem;min-height:54px;padding:.7rem 1rem .7rem .8rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);text-decoration:none;font-weight:700;font-size:var(--text-md);color:var(--kws-navy);transition:border-color .15s,background .15s,transform .15s}
.download-item::before{content:"";flex:none;width:36px;height:36px;border-radius:var(--radius-xs);background:rgba(33,169,232,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321A9E8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center/18px no-repeat}
a.download-item::after{content:"\2193";margin-left:auto;color:var(--kws-blue);font-weight:800;font-size:var(--text-lg);line-height:1;transition:transform .15s}
a.download-item:hover{border-color:var(--kws-blue);background:var(--light-bg);transform:translateY(-1px)}
a.download-item:hover::after{transform:translateY(2px)}
.download-item.is-pending{color:var(--muted);background:var(--light-bg);border-style:dashed;box-shadow:none;cursor:default}
.download-item.is-pending::before{background:rgba(107,114,128,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center/18px no-repeat}
.download-item small{margin-left:auto;font-size:var(--text-3xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--kws-deep-blue);background:rgba(88,199,243,.18);padding:.3rem .6rem;border-radius:var(--radius-pill);white-space:nowrap}
.download-item{flex-wrap:wrap;min-width:0;overflow-wrap:anywhere}


/* ---- v2 keuzes 2026-10-06: menu Werkwijze (A), Resultaten (B+C), Over KWS (B) ---- */
/* Werkwijze, richting A: vier staande beeldkaarten op een rij. */
.dropdown.dd-werkwijze.wa{width:min(1040px,calc(100vw - 48px))}
.wa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.wa-card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:#fff;text-decoration:none;transition:border-color .16s,box-shadow .16s,transform .16s}
.wa-card:hover{border-color:var(--kws-blue);box-shadow:var(--shadow-card);transform:translateY(-2px)}
.wa-media{position:relative;display:block;height:178px;overflow:hidden;background:var(--light-bg)}
.wa-media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.wa-card:hover .wa-media img{transform:scale(1.04)}
.wa-chip{position:absolute;top:10px;left:10px;z-index:2;background:rgba(255,255,255,.94);color:var(--kws-deep-blue);font-size:var(--text-3xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.28rem .55rem;border-radius:var(--radius-xs)}
.wa-body{display:grid;grid-template-columns:1fr auto;column-gap:.6rem;align-items:center;padding:12px 14px 13px}
.wa-t{font-weight:800;font-size:var(--text-base);color:var(--kws-navy);line-height:1.2}
.wa-d{grid-column:1;font-size:var(--text-xs);color:var(--muted);line-height:1.4;margin-top:.15rem}
.wa-arr{grid-column:2;grid-row:1/3;color:var(--kws-blue);font-weight:800;font-size:var(--text-lg);transition:transform .16s}
.wa-card:hover .wa-arr{transform:translateX(4px)}
.dropdown.dd-resultaten.rb{width:min(1040px,calc(100vw - 48px))}
.rb-split{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:stretch}
.rb-feature{display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:#fff;text-decoration:none;transition:border-color .16s,box-shadow .16s,transform .16s}
.rb-feature:hover,.rb-small:hover{border-color:var(--kws-blue);box-shadow:var(--shadow-card);transform:translateY(-2px)}
.rb-body{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:13px 16px 14px}
.rb-t{display:block;font-size:var(--text-lg);font-weight:800;color:var(--kws-navy);line-height:1.2}
.rb-s{display:block;font-size:var(--text-xs);color:var(--muted);line-height:1.4;margin-top:.15rem}
.rb-arr{flex:none;color:var(--kws-blue);font-weight:800;font-size:var(--text-lg);transition:transform .16s}
.rb-feature:hover .rb-arr,.rb-small:hover .rb-arr{transform:translateX(3px)}
.rb-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.rb-small{display:grid;grid-template-columns:118px 1fr auto;gap:0 14px;align-items:center;flex:1;min-width:0;padding-right:14px;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:#fff;text-decoration:none;transition:border-color .16s,box-shadow .16s,transform .16s}
.rb-small .rb-t{font-size:var(--text-base)}
.rb-thumb{position:relative;display:block;align-self:stretch;min-height:96px;overflow:hidden;background:var(--light-bg)}
.rb-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rb-thumb.is-bottom img{inset:auto;bottom:0;left:50%;transform:translateX(-50%);height:280%;width:auto;max-width:none}
.rb-side .md-bottom{margin-top:2px}
.rz-media{position:relative;display:block;height:208px;overflow:hidden;background:var(--light-bg)}
.rz-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rz-media.is-bottom>img{inset:auto;bottom:0;left:50%;transform:translateX(-50%);height:280%;width:auto;max-width:none}
.rz-inset{position:absolute;left:.7rem;bottom:.7rem;z-index:2;display:block;width:120px;height:82px;border-radius:var(--radius-xs);overflow:hidden;border:2px solid #fff;box-shadow:0 6px 16px rgba(7,18,31,.35);background:var(--light-bg)}
.rz-inset img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rz-inset.is-top img{inset:auto;top:-4px;left:50%;transform:translateX(-50%);height:260%;width:auto;max-width:none}
.rz-vn{position:absolute;z-index:2;font-size:var(--text-2xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:.26rem .55rem;border-radius:var(--radius-xs);background:rgba(7,18,31,.72);backdrop-filter:blur(3px)}
.rz-inset .rz-vn{left:.35rem;bottom:.35rem;padding:.16rem .4rem;font-size:var(--text-3xs)}
.rz-vn.na{right:.7rem;top:.7rem;background:rgba(33,169,232,.92)}
.rz-place{position:absolute;left:.7rem;top:.7rem;z-index:2;background:rgba(255,255,255,.94);color:var(--kws-navy);font-size:var(--text-2xs);font-weight:800;letter-spacing:.03em;padding:.26rem .6rem;border-radius:var(--radius-xs)}
.rz-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:12px 14px 13px}
.rz-t{display:block;font-weight:800;font-size:var(--text-base);color:var(--kws-navy);line-height:1.2}
.rz-s{display:block;font-size:var(--text-xs);color:var(--muted);line-height:1.4;margin-top:.12rem}
.rz-arr{flex:none;color:var(--kws-blue);font-weight:800;font-size:var(--text-lg);transition:transform .16s}
/* Resultaten, v2: indeling van B (een groot, twee klein), kaarten van C (na groot, voor als inzet). */
.rb-feature .rz-media{height:222px}
.rb-thumb .rz-inset{width:52px;height:36px;left:.35rem;bottom:.35rem;border-width:2px}
.rb-thumb .rz-inset .rz-vn{left:.15rem;bottom:.15rem;padding:.08rem .25rem;font-size:8px}
.rb-thumb .rz-vn.na{right:.35rem;top:.35rem;padding:.12rem .3rem;font-size:8px}
.rb-small{grid-template-columns:150px 1fr auto}
.rb-thumb.is-bottom img{z-index:0}

/* Over KWS, richting B: donkere merkkaart naast de busfoto, routes als tegels eronder. */
.dropdown.dd-over.ob{width:min(1000px,calc(100vw - 48px))}
.ob-top{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.ob-brand{display:flex;flex-direction:column;gap:.45rem;background:var(--kws-navy);color:#fff;border-radius:var(--radius-sm);padding:17px 22px 17px;min-height:200px}
.ob-eyebrow{font-size:var(--text-3xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--kws-cyan)}
.ob-h{font-size:var(--text-lg);font-weight:800;line-height:1.3;color:#fff;margin:0}
.ob-p{font-size:var(--text-sm);color:var(--on-dark-5);line-height:1.5;margin:0}
.ob-trust{display:flex;flex-wrap:wrap;gap:.2rem .7rem;margin-top:.1rem;font-size:var(--text-2xs);font-weight:700;color:var(--on-dark-2);white-space:nowrap}
.ob-trust span{display:inline-flex;align-items:center;gap:.3rem}
.ob-trust span+span::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--on-dark-7);margin-right:.45rem}
.ob-trust img{width:15px;height:15px}
.ob-trust .star{color:var(--review-yellow)}
.ob-brand .btn{margin-top:auto;align-self:flex-start;padding:.8rem 1.15rem;font-size:var(--text-md);min-height:46px}
.ob-brand .btn{margin-top:.55rem}
.ob-photo{position:relative;display:block;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);min-height:200px;text-decoration:none;transition:transform .16s,box-shadow .16s}
.ob-photo:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.ob-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.ob-photo span{position:absolute;left:0;right:0;bottom:0;padding:1.3rem .9rem .65rem;background:linear-gradient(transparent,rgba(7,18,31,.82));color:#fff;font-weight:700;font-size:var(--text-xs)}
.ob-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.ob-route{display:grid;grid-template-columns:auto 1fr auto;gap:0 .75rem;align-items:center;min-width:0;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;text-decoration:none;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s}
.ob-route:hover{border-color:var(--kws-blue);background:var(--light-bg);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.ob-ico{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:rgba(33,169,232,.12);color:var(--kws-deep-blue)}
.ob-ico svg{width:19px;height:19px}
.ob-t{display:block;font-weight:800;font-size:var(--text-md);color:var(--kws-navy);line-height:1.2}
.ob-d{display:block;font-size:var(--text-2xs);color:var(--muted);line-height:1.35;margin-top:.1rem}
.ob-arr{color:var(--kws-blue);font-weight:800;font-size:var(--text-lg);transition:transform .15s}
.ob-route:hover .ob-arr{transform:translateX(3px)}


/* ---- Reviews, v2 keuze 2026-10-06: A (een review groot) + C (5,0-paneel) + B (carrousel eronder) ---- */
.rv-feat{position:relative;background:var(--kws-navy);color:#fff;border-radius:var(--radius-lg);padding:2.2rem 2rem 1.8rem;display:flex;flex-direction:column;gap:1.2rem;overflow:hidden;box-shadow:var(--shadow)}
.rv-feat::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 85% 10%,rgba(33,169,232,.25),transparent 60%);pointer-events:none}
.rv-feat>*{position:relative;z-index:1}
.rv-feat-mark{width:52px;height:52px;border-radius:var(--radius-sm);background:rgba(88,199,243,.16);color:var(--kws-cyan);display:flex;align-items:center;justify-content:center;font-size:2.4rem;font-weight:800;line-height:1;font-family:Georgia,"Times New Roman",serif;padding-top:.6rem}
.rv-feat .stars{color:var(--review-yellow);font-size:var(--text-lg);letter-spacing:2px}
.rv-feat blockquote{font-size:clamp(1.15rem,1.9vw,1.45rem);font-weight:600;line-height:1.45;color:#fff;letter-spacing:-.01em}
.rv-feat .rv-feat-who{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14)}
.rv-feat cite{font-style:normal;font-weight:700;font-size:var(--text-md);color:var(--on-dark-1)}
.rv-feat cite span{display:block;font-weight:500;font-size:var(--text-xs);color:var(--on-dark-6);margin-top:.15rem}
.rv-feat .gpill{display:inline-flex;align-items:center;gap:.45rem;background:#fff;color:var(--kws-navy);border-radius:var(--radius-pill);padding:.4rem .8rem .4rem .5rem;font-size:var(--text-xs);font-weight:700;white-space:nowrap}
.rv-feat .gpill img{width:20px;height:20px}
.rv-sum{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.8rem 1.6rem;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:1rem}
.rv-sum-google{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:var(--text-sm);color:var(--muted)}
.rv-sum-google img{width:28px;height:28px}
.rv-sum-score{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.rv-sum-score strong{font-size:clamp(3rem,6vw,4.2rem);font-weight:800;line-height:1;color:var(--kws-navy);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rv-sum-score .stars{color:var(--review-yellow);font-size:var(--text-2xl);letter-spacing:2px}
.rv-sum-score .rv-sum-of{display:block;margin-top:.25rem;font-size:var(--text-sm);font-weight:700;color:var(--muted)}
.rv-sum p{color:var(--muted);font-size:var(--text-md)}
.rv-sum-points{display:grid;gap:.5rem;margin:.2rem 0 .4rem}
.rv-sum-points li{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:var(--text-md)}
.rv-sum-points .check{width:22px;height:22px;border-radius:50%;background:rgba(93,187,70,.15);color:var(--kws-green);display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:800;flex:none}
.rv-sum .btn{width:100%;padding:.8rem 1.1rem;min-height:48px;font-size:var(--text-md)}
.rv-sum .btn-outline img{width:18px;height:18px}
.rv-b-nav{display:flex;gap:.5rem;margin-bottom:.3rem}
.rv-b-arrow{width:48px;height:48px;border-radius:50%;border:2px solid var(--border);background:#fff;color:var(--kws-navy);display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s,color .15s,transform .15s}
.rv-b-arrow svg{width:20px;height:20px}
.rv-b-arrow:hover{border-color:var(--kws-blue);color:var(--kws-blue);transform:translateY(-2px)}
.rv-b-track{--gap:1.2rem;display:flex;gap:var(--gap);margin-top:2rem;padding:.5rem .2rem 1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;scroll-padding:0 .2rem;cursor:grab}
.rv-b-track::-webkit-scrollbar{display:none}
.rv-b-track.dragging{cursor:grabbing;scroll-snap-type:none}
.rv-b-track:focus-visible{outline:3px solid var(--kws-blue);outline-offset:4px;border-radius:var(--radius-sm)}
.rv-b-track .review-card{flex:0 0 100%;scroll-snap-align:start;min-height:230px;user-select:none;-webkit-user-select:none}
.rv-b-track .review-card blockquote{font-size:var(--text-md);line-height:1.6}
.rv-b-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.4rem}
.rv-b-dots{display:flex;gap:.45rem;flex-wrap:wrap}
.rv-b-dots button{width:10px;height:10px;padding:0;border-radius:50%;border:none;background:var(--border);transition:background .2s,transform .2s;position:relative}
.rv-b-dots button::after{content:"";position:absolute;inset:-7px}
.rv-b-dots button:hover{background:var(--kws-cyan)}
.rv-b-dots button.is-active{background:var(--kws-blue);transform:scale(1.35)}
.rv-b-status{font-size:var(--text-xs);color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.rv-b-progress{height:3px;border-radius:var(--radius-pill);background:var(--border);margin-top:1rem;overflow:hidden}
.rv-b-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--kws-blue),var(--kws-cyan));border-radius:inherit}
.rv-top{display:grid;gap:1.2rem;margin-top:2.2rem}
.rv-sum{align-self:stretch;justify-content:center}
.rv-b-nav{justify-content:flex-end;margin-top:1.6rem}
.rv-b-track{margin-top:.6rem}
@media (min-width:1000px){.rv-top{grid-template-columns:1fr 360px}}
@media (min-width:680px){.rv-b-track .review-card{flex-basis:calc((100% - var(--gap)) / 2)}}
@media (min-width:1000px){.rv-b-track .review-card{flex-basis:calc((100% - 2 * var(--gap)) / 3)}}
@media (prefers-reduced-motion:reduce){.rv-b-progress{display:none}}

/* Dienstkaarten: de hele kaart is klikbaar (gestrekte link op de "Bekijk ..."-link). */
.service-card{position:relative}
.service-card .btn-text::after{content:"";position:absolute;inset:0;z-index:1}
.service-card:focus-within{outline:3px solid var(--kws-blue);outline-offset:3px}
.service-card .service-body p a{position:relative;z-index:2}

/* Over KWS-menu: Instagram van Kees onder de aanvraagknop. */
.ob-brand .ob-social{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;margin-top:.15rem;font-size:var(--text-xs);font-weight:700;color:var(--on-dark-2);text-decoration:none;transition:color .15s}
.ob-brand .ob-social svg{width:18px;height:18px;flex:none}
.ob-brand .ob-social:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}


/* Diensten, richting C (ronde 2): een groot uitgelicht, vier middelgrote kaarten, de minder gebruikte diensten als knoppen zonder foto. */
.dropdown.dd-diensten.dc{width:min(1040px,calc(100vw - 48px))}
.dc-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:14px;align-items:stretch}
.dc-feature{position:relative;display:block;min-height:330px;border-radius:var(--radius-sm);overflow:hidden;text-decoration:none;color:#fff;transition:transform .16s,box-shadow .16s}
.dc-feature:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.dc-feature>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dc-fbody{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:.35rem;padding:3rem 1.1rem 1.1rem;background:linear-gradient(transparent,rgba(7,18,31,.9))}
.dc-chip{align-self:flex-start;background:var(--kws-blue);color:#fff;font-size:var(--text-3xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .55rem;border-radius:var(--radius-xs)}
.dc-ft{font-size:var(--text-xl);font-weight:800;line-height:1.15}
.dc-fd{font-size:var(--text-sm);color:var(--on-dark-5);line-height:1.45}
.dc-fgo{font-size:var(--text-sm);font-weight:800;color:var(--kws-cyan)}
.dc-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:14px}
.dc-card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:#fff;text-decoration:none;transition:border-color .16s,box-shadow .16s,transform .16s}
.dc-card:hover{border-color:var(--kws-blue);box-shadow:var(--shadow-card);transform:translateY(-2px)}
.dc-media{display:block;flex:1;min-height:92px;overflow:hidden;background:var(--light-bg);position:relative}
.dc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.dc-card:hover .dc-media img{transform:scale(1.04)}
.dc-body{display:block;box-sizing:border-box;padding:9px 36px 10px 12px}
.dc-t{display:block;font-weight:800;font-size:var(--text-base);color:var(--kws-navy);line-height:1.2}
.dc-d{display:none}
.dc-arr{position:absolute;right:12px;bottom:9px;color:var(--kws-blue);font-weight:800;font-size:var(--text-lg);transition:transform .16s}
.dc-card:hover .dc-arr{transform:translateX(3px)}


/* ---- Hero, keuze Koen 2026-10-06 (hero I) ---- */
.hb-rate{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.6rem;font-size:var(--text-sm);color:var(--on-dark-5)}
.hb-rate strong{color:#fff}
.hb-rate .stars{color:var(--review-yellow);letter-spacing:1px}
.hb-rate .tail::before{content:"·";margin-right:.5rem}
.hd .hb-rate .tail,.he .hb-rate .tail{flex-basis:100%}
.hd .hb-rate .tail::before,.he .hb-rate .tail::before{display:none}
/* Hero E: een hoge, bijna staande foto rechts (4:5), de kop links; de beoordeling onder de knoppen achter een dunne lijn, zoals de opsomming eerder. */
.he-grid{align-items:center;padding:3rem 0 6.5rem}
.he-copy h1{font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.08}
.he-copy .hero-ctas{margin-top:1.5rem}
.he-rate{margin-top:1.7rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.14)}
.he-rate .hb-rate{margin-top:0}
.he-visual .media{aspect-ratio:4/5;max-height:600px;margin-inline:auto;width:100%}
.he-visual .media img{width:100%;height:100%;object-fit:cover;object-position:38% 45%}
@media (min-width:980px){.he-grid{grid-template-columns:1fr .85fr;gap:4rem}.he-visual .media{max-width:520px;margin-right:0}}
/* Hero I: een rond keurmerk met draaiende tekst dat over de hoek van de foto valt. */
.hero-visual .hi-seal{position:absolute;z-index:4;left:-3rem;bottom:-.4rem;width:140px;height:140px;border-radius:50%;background:var(--kws-blue);box-shadow:0 10px 28px rgba(7,18,31,.45);display:flex;align-items:center;justify-content:center}
.hi-ring{position:absolute;inset:0;width:100%;height:100%;}
.hi-ring text{fill:#fff;font-size:9.5px;font-weight:800;font-family:inherit}
.hi-core{display:flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;background:#fff;color:var(--kws-deep-blue)}
.hi-core img{width:100%;height:100%;object-fit:contain;padding:9px}
@keyframes hiSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hi-ring{animation:none}}
@media (max-width:979px){.hero-visual .hi-seal{left:.6rem;bottom:.6rem;width:100px;height:100px}.hi-core{width:54px;height:54px}}

/* Roterende claims onder de beoordeling in de hero (de claims uit v1, nu als wisselend element). */
.he-claims{flex-basis:100%;display:flex;align-items:center;gap:1rem;margin-top:.55rem}
.claim-stack{display:grid;flex:1;min-width:0}
.claim-stack .claim{grid-area:1/1;display:flex;align-items:center;gap:.6rem;margin:0;font-weight:700;color:var(--on-dark-1);font-size:var(--text-md);opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.claim-stack .claim.is-on{opacity:1;transform:none}
.claim-dots{display:flex;gap:6px;flex:none}
.claim-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.28);cursor:pointer;transition:background .2s,transform .2s}
.claim-dot.is-on{background:var(--kws-cyan);transform:scale(1.25)}
@media (prefers-reduced-motion:reduce){.claim-stack .claim{transition:none}}
/* Kroon-logo bij Ervaringen en op over-ons */
.rv-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.2rem 2rem;margin-bottom:2.2rem}
.rv-head .section-head{margin-bottom:0}
.rv-kroon{display:block;flex:none;margin-left:auto}
.rv-kroon img{display:block;width:clamp(210px,24vw,300px);height:auto}
.usp-card .ico img{width:34px;height:34px;object-fit:contain}
.partner-item.is-cert .partner-logo{height:auto;max-width:230px}

/* Claims in de hero: zonder puntjes, groter */
.claim-stack .claim{font-size:var(--text-lg)}
.claim-stack .claim .check{flex:none}
/* Kaarten onder de hero (keuze C, zonder nummers) */
.usp-grid{gap:1.2rem}
.uc-card{padding:1.8rem 1.5rem 1.5rem;gap:.9rem;text-decoration:none;color:inherit;min-height:220px}
.uc-card .ico{width:60px;height:60px}
.uc-card strong{font-size:var(--text-lg)}
.uc-card div span{font-size:var(--text-sm);line-height:1.5;display:block;margin-top:.3rem}
.uc-card .uc-more{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;font-weight:800;font-size:var(--text-sm);color:var(--kws-blue)}
.uc-card.green .uc-more{color:#3d8f2b}
.uc-more svg{width:16px;height:16px;transition:transform .2s}
.uc-card:hover .uc-more svg{transform:translateX(5px)}
.uc-card:focus-visible{outline:3px solid var(--kws-blue);outline-offset:3px}
/* Werkwijze A4 v2: keuzeknoppen boven en buiten het donkere paneel; in het paneel twee kolommen die zeggen wanneer softwash en wanneer heet water & hogedruk. */
.v4-tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.1rem}
.v4-tab{padding:.75rem 1.3rem;border-radius:99px;border:2px solid var(--border);background:#fff;color:var(--kws-navy);font:inherit;font-weight:800;font-size:var(--text-md);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.v4-tab:hover{transform:translateY(-2px)}
.v4-tab.is-on{background:var(--kws-blue);border-color:var(--kws-blue);color:#fff;box-shadow:0 10px 22px rgba(33,169,232,.3)}
.v4{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#07121f;box-shadow:var(--shadow-card);min-height:480px;display:flex;align-items:flex-end}
.v4-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}.v4-bg.is-on{opacity:.55}
.v4::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,18,31,.96) 20%,rgba(7,18,31,.55) 70%,rgba(7,18,31,.25))}
.v4-in{position:relative;z-index:2;width:100%;padding:2rem 1.6rem;color:#fff}
.v4-pane{display:none;max-width:700px}.v4-pane.is-on{display:block;animation:v4in .4s ease}
.v4-badge{display:inline-block;padding:.3rem .8rem;border-radius:99px;background:rgba(88,199,243,.16);border:1px solid rgba(88,199,243,.4);color:var(--kws-cyan);font-weight:800;font-size:var(--text-sm)}
.v4-pane h3{color:#fff;margin:.8rem 0 .5rem;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.1}
.v4-pane p{color:var(--on-dark-2);line-height:1.6;margin:0 0 1.2rem}
.v4-when{display:grid;gap:.8rem;margin-bottom:1.4rem}
.v4-w{padding:.9rem 1.1rem;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);opacity:.5;transition:opacity .3s}
.v4-w.is-on{opacity:1;background:rgba(33,169,232,.16);border-color:var(--kws-cyan)}
.v4-w.h.is-on{background:rgba(232,121,58,.18);border-color:#f3a15f}
.v4-w b{display:block;color:#fff;font-size:var(--text-md)}
.v4-w em{display:block;font-style:normal;font-size:var(--text-xs);color:var(--on-dark-5);margin-bottom:.5rem}
.v4-w ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.v4-w li{position:relative;padding-left:1.4rem;font-weight:600;font-size:var(--text-sm);color:var(--on-dark-1)}
.v4-w li::before{content:"✓";position:absolute;left:0;font-weight:800;color:var(--kws-cyan)}.v4-w.h li::before{color:#f3a15f}
.v4-w li.no{color:var(--on-dark-5)}.v4-w li.no::before{content:"–";color:var(--on-dark-5)}
@keyframes v4in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (min-width:760px){.v4-when{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.v4-in{padding:2.6rem 3rem}}

/* ==========================================================================
   Verdieping (keuze Koen 2026-10-07, _keuze/verdieping-2/).
   Overgezet uit de goedgekeurde mockups; per onderdeel een eigen voorvoegsel.
   Markup per onderdeel: CLAUDE.md, "Verdieping components".
   ========================================================================== */

/* ---- slot- (mockup slotblok-a) ---- */
/* slot.css: slotblok onder elke pagina (goedgekeurd: _keuze/verdieping-2/slotblok-a.html).
   Voorvoegsel slot-. Een gesplitst blok: links een echte dronefoto van de bus bij een
   woning (geen gezicht, geen tekst op de foto), rechts de kop en alinea van de pagina,
   drie chips en de twee knoppen. Geen beweging. Mockup-voorvoegsel vd2-slotblok-a is
   hernoemd naar slot (wortel) en slot- (onderdelen). */
.slot{display:grid;overflow:hidden;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--kws-navy),var(--kws-deep-blue));color:#fff;box-shadow:var(--shadow-card)}
.slot-photo{position:relative;margin:0;aspect-ratio:16/10;background:var(--kws-navy);min-width:0}
.slot-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 78%}

.slot-body{padding:2rem 1.25rem 2rem;min-width:0;text-align:left}
.slot-body h2{color:#fff;font-size:clamp(1.6rem,3.6vw,2.2rem)}
.slot-lead{margin-top:1rem;color:var(--on-dark-5);max-width:50ch}
.slot-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.4rem 0 0;padding:0;list-style:none}
.slot-chip{display:flex;align-items:flex-start;gap:.55rem;max-width:100%;padding:.5rem .85rem .5rem .7rem;border-radius:var(--radius-sm);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:var(--on-dark-1);font-size:var(--text-sm);font-weight:600;line-height:1.35}
.slot-chip svg{flex:none;width:18px;height:18px;margin-top:1px;fill:none;stroke:var(--kws-cyan);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.slot-body .final-buttons{justify-content:flex-start;margin-top:1.8rem}
.slot-body .final-buttons .btn{flex:1 1 auto;max-width:24rem}
.slot-body .final-buttons .btn-primary{flex-grow:1.5}

@media (min-width:880px){
  .slot{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
  .slot-photo{aspect-ratio:auto;min-height:100%}
  .slot-photo img{object-position:50% 58%}
  .slot-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,18,31,0) 72%,rgba(7,18,31,.32));pointer-events:none}
  .slot-body{padding:3.2rem 3rem 3.2rem 2.8rem;align-self:center}
}
@media (min-width:880px) and (max-width:1100px){
  .slot-body{padding:2.6rem 2rem}
}

/* ---- ftr- (mockup footer-c) ---- */
/* ftr.css: footer van elke pagina (goedgekeurd: _keuze/verdieping-2/footer-c.html).
   Voorvoegsel ftr-. Twee lagen: een lichte vertrouwensband (badge, 5,0 op Google, ruim 620
   klanten, meer dan 250 projecten, in de stijl van de cijfers op de homepage) boven een
   compacte donkere linkzone met de aanvraagknop. De markup staat in assets/js/layout.js
   (var FOOTER). Mockup-voorvoegsel vd2-footer-c is hernoemd naar ftr (wortel) en ftr- (onderdelen).
   De basisklassen .footer-col / .footer-region / .footer-nap / .footer-hours / .footer-bottom /
   .footer-legal komen nog uit styles.css en worden hier alleen aangevuld. */
.site-footer.ftr{padding-top:0}

.ftr-band{background:var(--light-bg);color:var(--kws-navy);border-top:1px solid var(--border)}
.ftr-band-in{display:grid;gap:1rem;padding-top:1.5rem;padding-bottom:1.25rem}
.ftr-badge{display:flex;align-items:center;gap:1rem;color:var(--kws-navy);text-decoration:none}
.ftr-badge img{flex:none;width:68px;height:68px;object-fit:contain}
.ftr-badge strong{display:block;font-size:var(--text-lg);font-weight:800;line-height:1.2;letter-spacing:-.01em;transition:color .18s}
.ftr-badge small{display:block;margin-top:.2rem;font-size:var(--text-sm);font-weight:500;color:var(--muted)}
.ftr-badge:hover strong{color:var(--kws-blue-hover)}
.ftr-badge:focus-visible{outline:3px solid var(--kws-blue);outline-offset:4px;border-radius:var(--radius-sm)}

.ftr-stats{display:grid;margin:0;padding:0;list-style:none}
.ftr-stats li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .7rem;padding:.7rem 0;border-top:1px solid var(--border)}
.ftr-num{font-size:var(--text-4xl);font-weight:800;line-height:1.1;letter-spacing:-.025em;color:var(--kws-navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.ftr-num small{margin-right:.4rem;font-size:var(--text-sm);font-weight:700;letter-spacing:0;color:var(--muted)}
.ftr-num .ftr-stars{margin-left:.45rem;font-size:.5em;letter-spacing:1px;color:var(--review-yellow);vertical-align:.18em}
.ftr-lab{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--text-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ftr-lab img{width:16px;height:16px;flex:none}

.ftr-dark{position:relative;padding-top:2.5rem}
.ftr-dark::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--kws-blue),var(--kws-cyan),var(--kws-green))}
.ftr-grid{display:grid;gap:2rem 2rem}
.ftr-grid > *{min-width:0}
.ftr-logo{display:block;height:46px;width:auto;margin:0 0 .9rem}
.ftr-lead{margin:0 0 1.1rem;max-width:20ch;font-size:var(--text-lg);font-weight:700;line-height:1.35;color:#fff}
.ftr-cta{padding:.8rem 1.15rem;font-size:var(--text-md);text-align:center}
.ftr-brand .footer-region{margin-top:1rem;font-size:var(--text-xs)}
.ftr-grid h2{margin:0 0 .7rem;font-size:var(--text-md)}
.ftr-grid .footer-col ul{gap:.05rem}
.ftr-grid .footer-col a{font-size:var(--text-sm);min-height:32px}
.ftr-svc{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:.05rem 1.1rem!important}
.ftr-ico{display:inline-flex;flex:none;width:18px;height:18px;color:var(--kws-cyan)}
.ftr-ico svg{display:block;width:18px;height:18px}
.ftr-ico--wa{color:var(--whatsapp)}
.ftr-grid .ftr-main a{font-size:var(--text-md);font-weight:700;color:#fff}
.ftr-grid .ftr-main a:hover{color:var(--kws-cyan)}
.ftr-grid .ftr-quiet a{font-weight:500;color:var(--on-dark-7)}
.ftr-quiet .ftr-ico{color:var(--on-dark-7)}
.ftr-nb{white-space:nowrap}
.ftr-contact .footer-nap{margin-top:.8rem;font-size:var(--text-xs);line-height:1.65}
.ftr-contact .footer-hours{margin-top:.5rem;font-size:var(--text-xs)}

.ftr-bottom{margin-top:2rem;padding:1rem 0 1.2rem;text-align:left}
.ftr-bottom-in{display:flex;flex-direction:column;gap:.4rem}
.ftr-bottom .footer-legal{margin:0;order:-1}
.ftr-bottom p{margin:0}

@media (min-width:560px){
  .ftr-badge strong{font-size:var(--text-xl)}
  .ftr-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  .ftr-stats li{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:.25rem;padding:0 0 0 .9rem;border-top:0;border-left:3px solid var(--kws-blue)}
}
@media (min-width:680px){
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:820px){
  .ftr-bottom-in{flex-direction:row;align-items:center;justify-content:space-between}
  .ftr-bottom .footer-legal{order:0}
}
@media (min-width:900px){
  .ftr-band-in{padding-top:1.9rem;padding-bottom:1.9rem}
  .ftr-stats{gap:1.6rem}
}
/* Badge naast de cijfers pas vanaf 1100px (mockup: 900px). Tussen 900 en 1099px is het
   resterende vak (container min badge min gap) smaller dan de drie nowrap-cijfers
   (.ftr-num), waardoor de laatste 6px buiten het scherm viel. Daaronder blijven de cijfers
   in een rij onder de badge, zoals vanaf 560px al het geval is. */
@media (min-width:1100px){
  .ftr-band-in{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:3rem}
}
@media (min-width:1180px){
  .ftr-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1.45fr) minmax(0,.95fr) minmax(0,1.2fr)}
}
/* Toevoeging bij het overzetten (niet in de mockup): op een telefoon blijven de footerlinks
   44px hoog (CLAUDE.md, grote tikvlakken); de mockup-regel .ftr-grid .footer-col a (32px)
   was specifieker dan de mobiele regel in styles.css. */
@media (max-width:767px){
  .ftr-grid .footer-col a{min-height:44px}
  .ftr-svc{gap:0 1.1rem!important}
}

/* ---- vnstage- (mockup home-voorna-a) ---- */
/* vnstage: homepage Voor & na (Keuze Koen 2026-10-07, _keuze/verdieping-2/home-voorna-a.html).
   Eén grote .ba-slider als podium, met een rij miniaturen die een ander project in
   hetzelfde podium laadt. Voorvoegsel: vnstage- */

.vnstage-head{margin-bottom:1.6rem}
.vnstage-head .lead{max-width:none}

/* Opbouw: telefoon en tablet onder elkaar (podium, miniaturen, knoppen);
   vanaf 1000px podium links en een kolom met miniaturen en knoppen rechts. */
.vnstage-grid{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "side"}
.vnstage-stage{grid-area:stage;position:relative;min-width:0}
.vnstage-side{grid-area:side;min-width:0;display:flex;flex-direction:column;gap:1.4rem}

/* Het podium: de schuif van de site. Op de telefoon 4:3 zodat de staande gevel
   niet plat wordt, vanaf 700px de standaard 16:10 van .ba-slider. */
.vnstage-stage .ba-frame{aspect-ratio:4/3}
.vnstage-stage .ba-img{object-position:var(--pos,50% 50%)}

/* Voor en na naast elkaar, voor paren die niet als schuif kunnen. Zelfde kader. */
.vnstage-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;aspect-ratio:4/3}
.vnstage-duo[hidden]{display:none}
.vnstage-half{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--light-bg);box-shadow:var(--shadow-card)}
.vnstage-half img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}

@media (min-width:700px){
  .vnstage-stage .ba-frame,.vnstage-duo{aspect-ratio:16/10}
}

/* Wisselen: kort uitfaden, alleen als beweging mag. */
@media (prefers-reduced-motion:no-preference){
  .vnstage-stage .ba-img,.vnstage-half img{transition:opacity .18s ease}
  .vnstage-stage.is-wissel .ba-img,.vnstage-stage.is-wissel .vnstage-half img{opacity:.2}
}

/* Miniaturen: knoppen met een mini voor/na (links voor, rechts na) en één woord. */
.vnstage-tabs{display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x proximity;padding:.35rem;margin:0 -.35rem;scrollbar-width:none}
.vnstage-tabs::-webkit-scrollbar{display:none}
.vnstage-tab{flex:1 0 100px;min-width:100px;display:grid;gap:.45rem;align-content:start;padding:.4rem .4rem .5rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;color:var(--kws-navy);font:inherit;text-align:left;cursor:pointer;scroll-snap-align:start;transition:border-color .18s,box-shadow .18s}
.vnstage-tab:hover{border-color:#9ED6F2}
.vnstage-tab[aria-selected="true"]{border-color:var(--kws-blue);box-shadow:0 0 0 1px var(--kws-blue),0 8px 20px rgba(33,169,232,.18)}
.vnstage-thumb{position:relative;display:block;width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--light-bg)}
.vnstage-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vnstage-thumb .is-voor{clip-path:inset(0 50% 0 0)}
.vnstage-thumb::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(7,18,31,.12)}
.vnstage-word{display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding:0 .15rem;font-size:var(--text-sm);font-weight:700;line-height:1.2}
.vnstage-word::after{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:transparent;transition:background .18s}
.vnstage-tab[aria-selected="true"] .vnstage-word::after{background:var(--kws-blue)}

.vnstage-cta{display:flex;flex-wrap:wrap;gap:.75rem}

@media (max-width:479px){
  .vnstage-cta .btn{flex:1 1 100%}
}

/* Vanaf 1000px: podium links, rechts een kolom die precies even hoog is als het podium.
   De kolom ligt absoluut in zijn cel, dus alleen het podium bepaalt de hoogte. */
@media (min-width:1000px){
  .vnstage-grid{grid-template-columns:minmax(0,1fr) 290px;grid-template-areas:"stage side";gap:1.6rem}
  .vnstage-side{position:relative;display:block}
  .vnstage-side-in{position:absolute;inset:0;display:flex;flex-direction:column;gap:1rem}
  .vnstage-tabs{flex:1 1 auto;min-height:0;display:grid;grid-template-rows:repeat(5,minmax(0,1fr));gap:.5rem;overflow:visible;padding:0;margin:0}
  .vnstage-tab{min-width:0;min-height:0;grid-template-columns:92px minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-content:stretch;align-items:center;gap:.85rem;padding:.4rem .7rem .4rem .4rem}
  .vnstage-thumb{width:100%;height:100%;min-height:0;aspect-ratio:auto}
  .vnstage-word{font-size:var(--text-md)}
  .vnstage-cta{flex-direction:column;gap:.6rem}
  .vnstage-cta .btn{width:100%}
}
/* Smalle desktop: podium iets hoger, zodat de miniaturen niet te klein worden. */
@media (min-width:1000px) and (max-width:1199px){
  .vnstage-stage .ba-frame,.vnstage-duo{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  .vnstage-tab,.vnstage-word::after{transition:none}
}

/* ---- aboutx- (mockup home-over-a) ---- */
/* aboutx: homepage Over ons (Keuze Koen 2026-10-07, _keuze/verdieping-2/home-over-a.html).
   Het bestaande Over KWS-blok (.kees-grid) blijft de hoofdzaak, op de vier vinkjes na.
   Eronder staat "Zo beoordelen we je aanvraag" als compact ondersteunend blok: klusfoto
   links, de drie punten rechts. Alle nieuwe klassen beginnen met aboutx-. */
.aboutx-support{display:grid;gap:1.2rem;margin-top:2.6rem;padding:.9rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.aboutx-photo{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:var(--light-bg)}
.aboutx-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}

.aboutx-body{display:flex;flex-direction:column;gap:.35rem;min-width:0;padding:.2rem .35rem .4rem}
.aboutx-body h3{font-size:var(--text-2xl);font-weight:800;letter-spacing:-.015em;line-height:1.2}
.aboutx-intro{margin:0;color:var(--muted);font-size:var(--text-md)}
.aboutx-steps{display:grid;gap:.9rem;margin:.85rem 0 0;padding:0;list-style:none}
.aboutx-steps li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:.8rem;align-items:start;min-width:0}
.aboutx-n{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--kws-navy);color:#fff;font-weight:800;font-size:var(--text-sm);box-shadow:0 0 0 4px rgba(88,199,243,.28)}
.aboutx-steps strong{display:block;color:var(--kws-navy);font-size:var(--text-md);font-weight:700;line-height:1.3}
.aboutx-t{display:block;margin-top:.1rem;color:var(--muted);font-size:var(--text-sm);line-height:1.5}
.aboutx-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1.4rem;margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--border)}
.aboutx-foot p{margin:0;color:var(--muted);font-size:var(--text-sm);line-height:1.45}
.aboutx-foot .btn-text{padding-left:0}

@media (min-width:700px){
  .aboutx-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
}
@media (min-width:900px){
  .aboutx-support{grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);gap:2rem;padding:1rem;align-items:stretch}
  .aboutx-photo{aspect-ratio:auto;min-height:230px}
  .aboutx-body{justify-content:center;padding:.4rem .6rem .4rem 0}
}
/* Bestaande klasse, uit de mockup overgenomen: knoppen in .kees-ctas vullen op de telefoon de breedte. */
@media (max-width:479px){
  .kees-ctas .btn{flex:1 1 100%}
}

/* ---- herken- (mockup dienst-herken-a) ---- */
/* herken-: "Herken je dit?", eerste blok na de hero op de dienstpagina's.
   1:1 overgezet uit _keuze/verdieping-2/dienst-herken-a.html (Koen, 2026-10-07), voorvoegsel vd2-dienst-herken-a- is herken-. */
/* ---------- Versie A: symptoomtegels + keten onder elkaar ---------- */
.herken-grid{list-style:none;display:grid;gap:.9rem;grid-template-columns:minmax(0,1fr)}
.herken-tile{min-width:0}

/* Smalle schermen: foto links, tekst rechts. */
.herken-card{
  display:grid;grid-template-columns:7.2rem minmax(0,1fr);height:100%;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.herken-card:hover{border-color:var(--kws-blue);box-shadow:var(--shadow-card)}
.herken-card:focus-visible{outline:3px solid var(--kws-blue);outline-offset:3px}
.herken-ph{position:relative;overflow:hidden;background:var(--light-bg);min-height:9.2rem}
.herken-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform .5s ease}
/* Dit beeld is de linkerhelft van een voor/na-foto: we tonen alleen de "voor"-kant. */
.herken-ph img.herken-half{inset:auto;left:-1.2%;top:0;width:206%;max-width:none;height:auto;object-fit:fill;transform:translateY(-22%)}

.herken-body{display:flex;flex-direction:column;gap:.3rem;padding:.95rem 1.05rem .9rem;min-width:0}
.herken-title{font-size:var(--text-lg);font-weight:800;color:var(--kws-navy);line-height:1.2;letter-spacing:-.01em}
.herken-line{color:var(--muted);font-size:var(--text-sm);line-height:1.5}
.herken-fix{
  margin-top:auto;padding-top:.55rem;display:flex;align-items:center;gap:.4rem;
  font-size:var(--text-sm);font-weight:700;color:var(--kws-deep-blue);
}
.herken-fix span[aria-hidden]{color:var(--kws-blue);transition:transform .18s}
.herken-card:hover .herken-fix span[aria-hidden]{transform:translateX(3px)}

@media (min-width:560px){
  .herken-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
  .herken-card{display:flex;flex-direction:column}
  .herken-ph{min-height:0;aspect-ratio:4/3}
  .herken-ph img.herken-half{transform:translateY(-16%)}
  .herken-body{padding:1.05rem 1.15rem 1.1rem;flex:1}
}
@media (min-width:980px){
  .herken-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .herken-ph{aspect-ratio:1/1}
  .herken-ph img.herken-half{transform:translateY(-18%)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .herken-card:hover{transform:translateY(-3px)}
  .herken-card:hover .herken-ph img:not(.herken-half){transform:scale(1.05)}
}

/* ---------- De band: zo zit het (oorzaak, gevolg, oplossing) ---------- */
.herken-chain{
  margin-top:1.4rem;background:var(--light-bg);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);
}
/* min-width:0 en max-width:100% zijn de enige toevoeging aan de mockup: op 360 px duwde min-height samen met aspect-ratio de figuur breder dan de kolom. */
.herken-photo{position:relative;margin:0;min-width:0;max-width:100%;min-height:11rem;aspect-ratio:16/8;background:#E9EDF1}
.herken-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:96% 50%}

.herken-flow{padding:1.3rem 1.25rem 1.2rem;min-width:0}
.herken-flowtitle{font-size:var(--text-xl);font-weight:800;line-height:1.2;margin-bottom:1rem}

.herken-steps{list-style:none;display:grid;gap:0}
.herken-step{position:relative;display:grid;grid-template-columns:2rem minmax(0,1fr);column-gap:.9rem;padding-bottom:1.05rem}
.herken-step:last-child{padding-bottom:0}
.herken-step::before{
  content:"";position:absolute;left:calc(1rem - 1px);top:2.2rem;bottom:.2rem;width:2px;border-radius:2px;
  background:linear-gradient(var(--herken-from),var(--herken-to));
}
.herken-step:last-child::before{display:none}
.herken-step[data-soort="oorzaak"]{--herken-tone:#8A95A1;--herken-from:#B9C2CC;--herken-to:var(--kws-blue)}
.herken-step[data-soort="gevolg"]{--herken-tone:var(--kws-blue);--herken-from:var(--kws-blue);--herken-to:var(--kws-green)}
.herken-step[data-soort="oplossing"]{--herken-tone:var(--kws-green)}
.herken-n{
  grid-row:1 / span 2;width:2rem;height:2rem;border-radius:50%;background:#fff;color:var(--kws-navy);
  border:2px solid var(--herken-tone);display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:var(--text-sm);position:relative;z-index:1;
}
.herken-step[data-soort="oplossing"] .herken-n{background:var(--kws-green);border-color:var(--kws-green);color:#fff}
.herken-soort{display:block;font-size:var(--text-2xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--kws-blue-hover);margin-top:.15rem}
.herken-step[data-soort="oorzaak"] .herken-soort{color:var(--muted)}
.herken-step[data-soort="oplossing"] .herken-soort{color:#2F7A1F}
.herken-step h4{font-size:var(--text-lg);font-weight:800;line-height:1.25;color:var(--kws-navy);margin-top:.15rem}
.herken-step p{margin-top:.15rem;color:var(--muted);font-size:var(--text-sm);line-height:1.5}
.herken-links{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.7rem}
.herken-links a{
  display:inline-flex;align-items:center;min-height:2.4rem;font-size:var(--text-sm);font-weight:700;color:var(--kws-deep-blue);
  background:#fff;border:1px solid var(--border);padding:.35rem .85rem;border-radius:var(--radius-pill);text-decoration:none;
  transition:border-color .15s,background .15s;
}
.herken-links a:hover{border-color:var(--kws-blue)}
.herken-links a:focus-visible{outline:3px solid var(--kws-blue);outline-offset:2px}

/* Welke gevels: één smalle regel onderaan de band */
.herken-scope{padding:1rem 1.25rem 1.15rem;border-top:1px solid var(--border);display:grid;gap:.6rem}
.herken-scope h3{font-size:var(--text-md);font-weight:800}
.herken-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.herken-chips li{
  display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-pill);padding:.28rem .75rem .28rem .4rem;font-size:var(--text-xs);font-weight:700;color:var(--kws-navy);
}
.herken-chips .check{width:16px;height:16px;font-size:var(--text-3xs)}
.herken-note{color:var(--muted);font-size:var(--text-xs)}

@media (min-width:640px){
  .herken-photo{aspect-ratio:21/7;min-height:0}
  .herken-flow{padding:1.5rem 1.6rem 1.4rem}
}
@media (min-width:640px){
  .herken-scope{padding:1rem 1.6rem 1.15rem}
}
@media (min-width:980px){
  .herken-chain{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .herken-photo{aspect-ratio:auto;min-height:100%}
  .herken-photo img{object-position:82% 50%}
  .herken-flow{padding:1.6rem 2rem 1.5rem}
  .herken-scope{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem;padding:.95rem 2rem}
}

/* ---- rail- (mockup dienst-stappen-a) ---- */
/* rail-: "Zo werkt het" met een genummerde lijn links en één groot beeld per stap.
   1:1 overgezet uit _keuze/verdieping-2/dienst-stappen-a.html (Koen, 2026-10-07), voorvoegsel vd2-dienst-stappen-a- is rail-. */
/* Zo werkt het, versie A: stappenlijn met één groot beeld per stap. */
.rail-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem}
@media (min-width:1000px){.rail-wrap{grid-template-columns:270px minmax(0,1fr);gap:2.6rem;align-items:start}}

/* ---------- De lijn links ---------- */
.rail-rail{display:none}
.rail-wrap.is-js .rail-rail{display:flex}
.rail-tab{
  --rail-line:#D5DBE2;
  position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.55rem;
  padding:0 .1rem .1rem;background:none;border:0;border-radius:var(--radius-sm);font:inherit;color:var(--kws-navy);text-align:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.rail-tab:focus-visible{outline:3px solid var(--kws-blue);outline-offset:2px}

/* Het lijnstuk voor en na de stip (horizontaal) */
.rail-tab::before,.rail-tab::after{content:"";position:absolute;top:17px;height:2px;width:calc(50% - 18px);background:var(--rail-line);border-radius:2px}
.rail-tab::before{left:-1px;width:calc(50% - 17px)}
.rail-tab::after{right:0}
.rail-tab.is-first::before{display:none}
.rail-tab.is-last::after{display:none}
.rail-tab.is-done::before,.rail-tab.is-done::after,.rail-tab.is-cur::before{--rail-line:var(--kws-blue)}
/* Van stap 5 naar het extra: stippellijn, nooit blauw */
.rail-tab.is-lastcore::after,.rail-tab.is-extra::before{background:none;height:0;border-top:2px dashed #B9C3CD;border-radius:0}

.rail-node{
  position:relative;z-index:1;flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#fff;border:2px solid #CBD3DB;color:var(--kws-navy);font-size:var(--text-md);font-weight:800;line-height:1;
}
.rail-tab:hover .rail-node{border-color:var(--kws-blue)}
.rail-tab.is-done .rail-node{background:var(--kws-blue);border-color:var(--kws-blue);color:transparent}
.rail-tab.is-done .rail-node::after{content:"";position:absolute;left:50%;top:46%;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:translate(-50%,-55%) rotate(45deg)}
.rail-tab.is-cur .rail-node{background:var(--kws-navy);border-color:var(--kws-navy);color:#fff;box-shadow:0 0 0 5px rgba(33,169,232,.24)}
.rail-tab.is-extra .rail-node{border-style:dashed;border-color:#8896A4;font-size:1.2rem;font-weight:700;color:#5B6874}
.rail-tab.is-extra.is-cur .rail-node{border-style:solid;border-color:var(--kws-navy);color:#fff}

.rail-lbl{display:block;min-width:0}
.rail-ls{display:block;font-size:var(--text-2xs);font-weight:700;line-height:1.25;color:var(--muted);overflow-wrap:anywhere}
.rail-ll,.rail-sub{display:none}
.rail-tab.is-done .rail-ls{color:var(--kws-navy)}
.rail-tab.is-cur .rail-ls{color:var(--kws-navy);font-weight:800}
@media (max-width:559px){
  .rail-ls{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .rail-rail{margin:0 -.1rem}
}

/* Verticaal vanaf 1000 px: de lijn loopt langs de stappen */
@media (min-width:1000px){
  .rail-wrap.is-js .rail-rail{flex-direction:column;align-items:stretch}
  .rail-tab{
    flex:none;flex-direction:row;align-items:flex-start;gap:1rem;padding:.8rem .9rem .8rem .55rem;text-align:left;
    transition:background-color .2s;
  }
  .rail-tab:hover{background:var(--light-bg)}
  .rail-tab.is-cur,.rail-tab.is-cur:hover{background:rgba(33,169,232,.1)}
  .rail-tab::before,.rail-tab::after{left:calc(.55rem + 17px);right:auto;width:2px}
  .rail-tab::before{top:-1px;height:calc(.8rem + 1px)}
  .rail-tab::after{top:calc(.8rem + 36px);bottom:0;height:auto}
  .rail-tab.is-lastcore::after,.rail-tab.is-extra::before{width:0;height:auto;border-top:0;border-left:2px dashed #B9C3CD}
  .rail-tab.is-extra::before{height:calc(.8rem + 1px)}
  .rail-lbl{padding-top:.4rem}
  .rail-ls{display:none}
  .rail-ll{display:block;font-size:var(--text-md);font-weight:600;line-height:1.3;color:var(--text)}
  .rail-tab.is-done .rail-ll{color:var(--kws-navy)}
  .rail-tab.is-cur .rail-ll{color:var(--kws-navy);font-weight:800}
  .rail-sub{display:block;margin-top:.1rem;font-size:var(--text-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
}
@media (prefers-reduced-motion:no-preference){
  .rail-tab::before,.rail-tab::after,.rail-node{transition:background-color .35s,border-color .35s,box-shadow .35s}
}

/* ---------- Het podium: alle stappen delen één plek, zodat de hoogte niet verspringt ---------- */
.rail-stage{display:grid;grid-template-columns:minmax(0,1fr)}
.rail-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;align-content:start;align-items:start}
.rail-panel[hidden]{display:none}
@media (min-width:640px){
  .rail-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.9rem}
  .rail-stage.is-js .rail-panel{grid-area:1/1}
  .rail-stage.is-js .rail-panel[hidden]{display:grid;visibility:hidden}
}
@media (prefers-reduced-motion:no-preference){
  .rail-panel.is-on{animation:rail-in .35s ease}
}
@keyframes rail-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Beeld: alleen de foto, geen labels erop */
.rail-media{position:relative;margin:0;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--light-bg);box-shadow:var(--shadow-card)}
.rail-media img{width:100%;height:100%;object-fit:cover;display:block}
.rail-media.is-video{aspect-ratio:auto;overflow:visible;background:none;box-shadow:none}
@media (min-width:640px){.rail-media.is-video{align-self:center}}
.rail-media.is-video .video-facade{width:100%}
.rail-ico{position:absolute;inset:0;display:grid;place-items:center;color:var(--kws-cyan);background:radial-gradient(circle at 84% 8%,rgba(88,199,243,.32),transparent 52%),radial-gradient(circle at 6% 100%,rgba(33,169,232,.26),transparent 56%),linear-gradient(150deg,#0B2744 0%,var(--kws-deep-blue) 100%)}
.rail-ico::before,.rail-ico::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(88,199,243,.26);transform:translate(-50%,-50%)}
.rail-ico::before{width:46%;aspect-ratio:1}
.rail-ico::after{width:72%;aspect-ratio:1;border-color:rgba(88,199,243,.14)}
.rail-ico svg{position:relative;z-index:1;width:28%;min-width:72px;height:auto;aspect-ratio:1;stroke-width:1.4}

/* Tekst naast het beeld */
.rail-text{min-width:0}
@media (min-width:640px){.rail-text{align-self:center}}
.rail-kick{display:block;margin-bottom:.4rem;font-size:var(--text-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--kws-blue-hover)}
.rail-text h3{font-size:var(--text-3xl);line-height:1.15}
.rail-text p{margin-top:.7rem;color:var(--muted);font-size:var(--text-lg);line-height:1.6}
.rail-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0 0;padding:0;list-style:none}
.rail-chips li{padding:.3rem .75rem;border-radius:var(--radius-pill);border:1px solid var(--border);background:#fff;color:var(--kws-navy);font-size:var(--text-sm);font-weight:600}

/* Sealen als extra: wanneer wel, wanneer niet */
.rail-wn{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem;margin-top:1.1rem}
.rail-wn > div{padding:.9rem 1.05rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:#fff}
.rail-wn h4{display:flex;align-items:center;gap:.55rem;font-size:var(--text-md);font-weight:800;color:var(--kws-navy)}
.rail-wn ul{margin:.5rem 0 0;padding:0;list-style:none;display:grid;gap:.35rem}
.rail-wn li{font-size:var(--text-md);line-height:1.45;color:var(--text)}
.rail-wn .is-wel{border-color:rgba(93,187,70,.5);background:rgba(93,187,70,.08)}
.rail-wn .is-niet{background:var(--light-bg)}
.rail-dash{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #8896A4;color:#5B6874;font-weight:800;font-size:var(--text-xs);line-height:1}

/* Vorige en volgende */
.rail-nav{display:none;grid-column:1;grid-row:2;align-items:center;gap:.9rem;margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--border)}
.rail-stage.is-js .rail-nav{display:flex}
.rail-navbtn{min-height:44px;padding:.55rem 1.1rem;font-size:var(--text-md)}
.rail-navbtn[disabled]{opacity:.4;cursor:default;pointer-events:none}
.rail-status{flex:1;min-width:0;text-align:center;font-size:var(--text-sm);font-weight:700;color:var(--kws-navy);line-height:1.3}
@media (max-width:479px){
  .rail-navbtn .rail-nl{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .rail-navbtn{padding:.55rem .9rem}
}

.rail-foot{margin-top:2rem}

/* ---- bewijs- (mockup dienst-bewijs-a) ---- */
/* bewijs-: bewijsblok op de dienstpagina (mini-case naast een Tijdens/Na- of Voor/Na-paar).
   1:1 uit _keuze/verdieping-2/dienst-bewijs-a.html (Koen, 2026-10-07); voorvoegsel vd2-dienst-bewijs-a- is bewijs-. */
.bewijs-case{display:grid;gap:1.6rem;grid-template-columns:minmax(0,1fr)}
.bewijs-fig{order:-1;margin:0;min-width:0}
@media (min-width:900px){
  .bewijs-case{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.4rem;align-items:center}
  .bewijs-fig{order:0}
}

/* De case-kaart */
.bewijs-card{min-width:0;background:#fff;border:1px solid var(--border);border-top:3px solid var(--kws-blue);border-radius:var(--radius);padding:1.35rem 1.4rem 1.25rem;box-shadow:var(--shadow-sm)}
.bewijs-kicker{margin:0 0 .35rem;font-size:var(--text-2xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--kws-blue-hover)}
.bewijs-title{font-size:var(--text-2xl);line-height:1.2}

.bewijs-rows{margin:1rem 0 0}
.bewijs-row{display:grid;grid-template-columns:minmax(0,1fr);gap:.2rem;padding:.8rem 0;border-top:1px solid var(--border-soft)}
.bewijs-row dt{font-size:var(--text-2xs);font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--kws-deep-blue);padding-top:.18rem}
.bewijs-row dd{margin:0;font-size:var(--text-md);line-height:1.5;color:var(--text)}
.bewijs-row.is-result{margin-top:.3rem;padding:.85rem 1rem;border:1px solid rgba(93,187,70,.45);background:rgba(93,187,70,.09);border-radius:var(--radius-sm)}
.bewijs-row.is-result dt{color:#2F7A1F}
.bewijs-row.is-result dd{font-weight:700;color:var(--kws-navy)}
@media (min-width:520px) and (max-width:899px),(min-width:1100px){
  .bewijs-row{grid-template-columns:6.8rem minmax(0,1fr);column-gap:1rem}
  .bewijs-row.is-result{grid-template-columns:5.8rem minmax(0,1fr)}
}
.bewijs-more{margin:1rem 0 0}

/* Het Tijdens/Na-paar. Hetzelfde dak, twee momenten; geen schuif, want de
   twee foto's zijn niet vanuit exact hetzelfde standpunt genomen. */
.bewijs-pair{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;align-items:start}
.bewijs-shot{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--light-bg);box-shadow:var(--shadow-card)}
.bewijs-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
@media (min-width:640px){ .bewijs-shot--na{margin-top:1.8rem} }
@media (min-width:900px){ .bewijs-shot{aspect-ratio:3/4} }
/* Zelfde stijl als Voor en Na bij .ba-slider */
.bewijs-tag{position:absolute;left:.7rem;bottom:.7rem;z-index:2;font-size:var(--text-2xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(7,18,31,.72);padding:.28rem .6rem;border-radius:var(--radius-xs);backdrop-filter:blur(3px)}
.bewijs-tag.is-na{background:rgba(33,169,232,.92)}
.bewijs-arrow{position:absolute;left:50%;top:46%;z-index:3;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:#fff;color:var(--kws-blue);display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);font-weight:800;box-shadow:var(--shadow-card);pointer-events:none}
@media (min-width:640px){ .bewijs-arrow{width:42px;height:42px;top:48%} }

/* Eén foto in plaats van een paar. Alleen voor een dienst waar nog geen eerlijk voor/na- of tijdens/na-paar van
   bestaat (nu dakborstelen). Zonder label op de foto: een label zegt iets over een moment, en dat is er dan niet. */
.bewijs-pair--single{grid-template-columns:minmax(0,1fr);max-width:26rem;margin-inline:auto}

/* ---- dakm- (mockup dak-methodes-a) ---- */
/* dakm-: drie manieren voor een dak (keuze van het daktype, advies, en de lijn fris, schoon, beschermd met foto's).
   1:1 uit _keuze/verdieping-2/dak-methodes-a.html (Koen, 2026-10-07); voorvoegsel vd2-dak-methodes-a- is dakm-.
   Een keuze zet het advies in het aria-live gebied en markeert de passende foto's; zonder keuze staan ze alle drie gelijk.
   Tekst staat nooit op een foto. */

/* Het blok met vraag en advies */
.dakm-stage{display:grid;gap:1.15rem;margin:0 0 2.2rem;padding:1rem;background:var(--light-bg);border:1px solid var(--border-soft);border-radius:var(--radius-lg)}
@media (min-width:600px){ .dakm-stage{padding:1.5rem} }
@media (min-width:900px){ .dakm-stage{gap:1.3rem;padding:1.75rem 2rem} }

/* De vraag en de vier keuzes: een radiogroep */
.dakm-picker{border:0;margin:0;padding:0;min-width:0}
.dakm-q{display:block;margin:0 0 .85rem;padding:0;font-size:var(--text-xl);font-weight:800;line-height:1.25;color:var(--kws-navy)}
.dakm-opts{display:grid;gap:.65rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:480px){ .dakm-opts{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:960px){ .dakm-opts{grid-template-columns:repeat(4,minmax(0,1fr))} }
.dakm-opt{position:relative;display:block;min-width:0}
.dakm-opt input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.dakm-opt-body{display:flex;align-items:center;gap:.8rem;min-height:60px;height:100%;padding:.7rem 1rem;background:#fff;border:2px solid var(--border);border-radius:var(--radius-sm);font-weight:700;color:var(--kws-navy);line-height:1.3}
.dakm-opt-body::before{content:"";flex:none;box-sizing:border-box;width:22px;height:22px;border-radius:50%;border:2px solid #C5CDD6;background:#fff}
.dakm-opt:hover .dakm-opt-body{border-color:var(--kws-blue)}
.dakm-opt input:checked + .dakm-opt-body{border-color:var(--kws-blue);background:#EEF8FD;box-shadow:0 0 0 3px rgba(33,169,232,.14)}
.dakm-opt input:checked + .dakm-opt-body::before{border-color:var(--kws-blue);background:radial-gradient(circle,var(--kws-blue) 0 46%,#fff 52%)}
.dakm-opt input:focus-visible + .dakm-opt-body{outline:3px solid var(--kws-blue);outline-offset:3px}

/* Het advies: de tekst links (aria-live), de aanvraagknoppen rechts */
.dakm-result{display:grid;gap:1.1rem 1.8rem;align-items:center;padding:1.2rem 1.15rem 1.1rem;background:#fff;border:1px solid var(--border);border-top:4px solid var(--kws-blue);border-radius:var(--radius);box-shadow:var(--shadow-card)}
@media (min-width:800px){ .dakm-result{grid-template-columns:minmax(0,1fr) auto;padding:1.3rem 1.6rem} }
.dakm-live{min-width:0}
.dakm-kick{margin:0 0 .35rem;font-size:var(--text-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--kws-blue);line-height:1.35}
.dakm-adv{margin:0;font-size:var(--text-2xl);font-weight:800;line-height:1.2;color:var(--kws-navy)}
@media (min-width:900px){ .dakm-adv{font-size:var(--text-3xl)} }
.dakm-line{margin:.4rem 0 0;font-size:var(--text-md);color:var(--muted);max-width:60ch}
.dakm-cta{display:grid;gap:.65rem;justify-items:start}
.dakm-cta-t{margin:0;font-size:var(--text-md);font-weight:700;color:var(--kws-navy);line-height:1.35}
.dakm-cta-btns{display:flex;flex-wrap:wrap;gap:.7rem}
@media (min-width:800px){
  .dakm-cta{justify-items:end;text-align:right}
  .dakm-cta-btns{justify-content:flex-end}
}
@media (max-width:480px){
  .dakm-cta,.dakm-cta-btns{width:100%}
  .dakm-cta-btns .btn{flex:1 1 100%}
}

/* De lijn van fris naar schoon naar beschermd, met een foto bij elke stap. Op een
   smal scherm staat de lijn links van de kaarten, vanaf 960px ligt hij horizontaal. */
.dakm-steps{--dakm-c1:var(--kws-cyan);--dakm-c2:var(--kws-blue);--dakm-c3:var(--kws-green);position:relative;display:grid;gap:1.6rem;margin:0;padding:0;list-style:none;grid-template-columns:minmax(0,1fr)}
.dakm-step{position:relative;display:flex;flex-direction:column;gap:.9rem;min-width:0;padding-left:2.5rem}
.dakm-step:nth-child(1){--dakm-c:var(--dakm-c1);--dakm-cn:var(--dakm-c2)}
.dakm-step:nth-child(2){--dakm-c:var(--dakm-c2);--dakm-cn:var(--dakm-c3)}
.dakm-step:nth-child(3){--dakm-c:var(--dakm-c3)}
.dakm-step:not(:last-child)::before{content:"";position:absolute;z-index:0;left:19px;top:21px;bottom:calc(-1.6rem - 21px);width:4px;border-radius:2px;background:linear-gradient(180deg,var(--dakm-c),var(--dakm-cn))}
.dakm-mark{position:relative;z-index:1;align-self:flex-start;display:inline-flex;align-items:center;gap:.6rem;margin:0 0 0 -2.5rem;padding:.3rem 1rem .3rem .3rem;background:#fff;border:2px solid var(--dakm-c);border-radius:var(--radius-pill);box-shadow:var(--shadow-sm)}
.dakm-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--kws-navy);color:#fff;font-size:var(--text-sm);font-weight:800;line-height:1}
.dakm-lbl{margin:0;font-size:var(--text-lg);font-weight:800;color:var(--kws-navy);letter-spacing:-.01em;line-height:1}
/* "Ons advies": naast de foto, rechts op de lijn van het label, nooit op de foto zelf */
.dakm-badge{position:absolute;z-index:1;top:.35rem;right:0;display:inline-flex;align-items:center;min-height:30px;padding:0 .85rem;border:2px solid var(--kws-blue);border-radius:var(--radius-pill);background:#EEF8FD;color:var(--kws-deep-blue);font-size:var(--text-xs);font-weight:800;line-height:1}
.dakm-badge[hidden]{display:none}

.dakm-card{display:flex;flex-direction:column;flex:1;min-width:0;overflow:hidden;background:#fff;border:2px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.dakm-photo{position:relative;margin:0;aspect-ratio:4/3;background:var(--light-bg);overflow:hidden}
.dakm-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dakm-body{display:flex;flex-direction:column;gap:.6rem;flex:1;padding:1rem 1.1rem .5rem}
.dakm-ms{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}
.dakm-m{display:block;padding:.65rem .85rem;background:var(--light-bg);border-radius:var(--radius-xs)}
.dakm-m strong{display:block;font-size:var(--text-lg);font-weight:800;line-height:1.25;color:var(--kws-navy)}
.dakm-m span{display:block;margin-top:.15rem;font-size:var(--text-md);line-height:1.45;color:var(--text)}
.dakm-link{margin:auto 0 0}
.dakm-link a{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;font-weight:700;color:var(--kws-blue);text-decoration:none}
.dakm-link a:hover{color:var(--kws-deep-blue);text-decoration:underline;text-underline-offset:4px}
.dakm-link a:focus-visible{outline:3px solid var(--kws-blue);outline-offset:3px;border-radius:4px}

/* Na een keuze */
.dakm-step[data-state="advies"] .dakm-card{border-color:var(--kws-blue);box-shadow:0 0 0 3px rgba(33,169,232,.2),var(--shadow-card)}
.dakm-step[data-state="rest"] .dakm-photo img{filter:saturate(.25) brightness(1.04)}
.dakm-m[data-state="advies"]{background:#EEF8FD;box-shadow:inset 3px 0 0 var(--kws-blue)}

/* Tablet: de lijn blijft verticaal, de kaart wordt foto links, tekst rechts. */
@media (min-width:600px) and (max-width:959px){
  .dakm-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr)}
  .dakm-photo{aspect-ratio:auto;min-height:100%}
  .dakm-body{padding:1.1rem 1.2rem .5rem}
}

/* Vanaf 960px ligt de lijn horizontaal boven drie hoge foto's. */
@media (min-width:960px){
  .dakm-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
  .dakm-step{padding-left:0;gap:1.1rem}
  .dakm-step:not(:last-child)::before{content:none}
  .dakm-steps::before{content:"";position:absolute;z-index:0;left:0;right:0;top:21px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--dakm-c1),var(--dakm-c2) 50%,var(--dakm-c3))}
  .dakm-mark{margin-left:0;padding:.38rem 1.15rem .38rem .38rem}
  .dakm-num{width:30px;height:30px}
  .dakm-badge{top:.45rem}
  .dakm-photo{aspect-ratio:4/5}
}

/* Beweging alleen als dat mag, en alleen een zachte overgang. */
@media (prefers-reduced-motion:no-preference){
  .dakm-opt-body{transition:border-color .15s,background .15s,box-shadow .15s}
  .dakm-opt-body::before{transition:border-color .15s,background .15s}
  .dakm-card{transition:border-color .25s,box-shadow .25s}
  .dakm-photo img{transition:filter .35s ease}
  .dakm-m{transition:background .25s,box-shadow .25s}
  .dakm-live.is-nieuw{animation:dakm-in .3s ease-out}
  @keyframes dakm-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* ---- wstap- (mockup werkwijze-stappen-a) ---- */
/* wstap: werkwijze.html #stappen (Keuze Koen 2026-10-07, _keuze/verdieping-2/werkwijze-stappen-a.html).
   De vier stappen op een rij, met bij stap 1 het hulpje "Zo maak je de foto's". Voorvoegsel: wstap- */

.wstap-line{--wstap-gap:1.5rem;list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:0;grid-template-columns:minmax(0,1fr)}
.wstap-item{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:.9rem;padding-bottom:1.35rem}
.wstap-item:last-child{padding-bottom:0}
.wstap-node{grid-row:1/span 2;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid var(--kws-navy);color:var(--kws-navy);font-weight:800;position:relative;z-index:1}
.wstap-item.is-help .wstap-node{background:var(--kws-navy);color:#fff;box-shadow:0 0 0 5px rgba(33,169,232,.28)}
.wstap-item h3{font-size:var(--text-lg);line-height:1.25;align-self:center;min-height:38px;display:flex;align-items:center}
.wstap-item p{grid-column:2;color:var(--muted);font-size:var(--text-md);margin-top:.15rem}
.wstap-jump{grid-column:2;display:inline-flex;align-items:center;gap:.4rem;margin-top:.55rem;min-height:44px;font-weight:700;font-size:var(--text-sm);color:var(--kws-blue-hover);text-decoration:none}
.wstap-jump:hover{color:var(--kws-deep-blue);text-decoration:underline;text-underline-offset:4px}
.wstap-jump svg{width:16px;height:16px}
/* verbindingslijn, verticaal op een telefoon */
.wstap-item:not(:last-child)::after{content:"";position:absolute;left:18px;top:42px;bottom:4px;border-left:2px dashed #C3CBD4}

/* Het hulpje */
.wstap-help{position:relative;margin-top:2rem;padding:1.4rem 1.25rem 1.5rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius);border-top-left-radius:var(--radius-xs);box-shadow:var(--shadow-card);display:grid;gap:1.4rem}
.wstap-help::before{content:"";position:absolute;left:12px;top:-9px;width:16px;height:16px;transform:rotate(45deg);background:#fff;border-left:1px solid var(--border);border-top:1px solid var(--border)}
.wstap-tag{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.7rem}
.wstap-tag span{display:inline-flex;align-items:center;height:1.6rem;padding:0 .7rem;border-radius:var(--radius-pill);font-size:var(--text-2xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.wstap-tag .t-step{background:var(--kws-navy);color:#fff}
.wstap-intro h3{font-size:var(--text-2xl);line-height:1.18}
.wstap-intro p{color:var(--muted);margin-top:.5rem;font-size:var(--text-md)}
.wstap-intro .wstap-more{margin-top:.9rem;padding:.7rem .85rem;border-radius:var(--radius-sm);background:rgba(33,169,232,.08);color:var(--text);font-size:var(--text-sm);line-height:1.5}

.wstap-shots{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;grid-template-columns:minmax(0,1fr)}
.wstap-shot{margin:0;display:grid;grid-template-columns:92px minmax(0,1fr);gap:.9rem;align-items:center;min-width:0}
.wstap-ph{position:relative;aspect-ratio:1/1;border-radius:var(--radius-sm);overflow:hidden;background:var(--light-bg)}
.wstap-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wstap-shot figcaption b{display:block;color:var(--kws-navy);font-size:var(--text-md);line-height:1.25;margin-bottom:.15rem}
.wstap-shot figcaption span{display:block;color:var(--muted);font-size:var(--text-sm);line-height:1.45}

@media (min-width:560px){
  .wstap-shots{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  .wstap-shot{grid-template-columns:minmax(0,1fr);align-items:start;gap:.7rem}
  .wstap-ph{aspect-ratio:4/5}
  .wstap-help{padding:1.7rem 1.6rem 1.8rem}
}
@media (min-width:1000px){
  .wstap-line{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--wstap-gap)}
  .wstap-item{padding-bottom:0;grid-template-columns:minmax(0,1fr);align-content:start}
  .wstap-node{grid-row:auto}
  .wstap-item h3{grid-column:1;min-height:0;margin-top:.95rem;align-self:start}
  .wstap-item p,.wstap-jump{grid-column:1}
  .wstap-item p{margin-top:.4rem;padding-right:.4rem}
  .wstap-item:not(:last-child)::after{left:calc(38px + .6rem);right:calc(-1 * var(--wstap-gap) + .6rem);top:18px;bottom:auto;border-left:0;border-top:2px dashed #C3CBD4}
  .wstap-help{grid-template-columns:minmax(0,.62fr) minmax(0,1.9fr);gap:2.4rem;padding:2rem 2rem 2.1rem}
  .wstap-help::before{left:10px}
}

/* ---- swx- (mockup softwash-uitleg-a) ---- */
/* swx: werkwijze.html #softwash (Keuze Koen 2026-10-07, _keuze/verdieping-2/softwash-uitleg-a.html).
   Tekst en checklist naast één voor/na-schuif (.ba-slider is-square). Opbouw van .method-grid:
   beeld links, tekst rechts vanaf 1000px. Voorvoegsel: swx- */

.swx-grid{margin-top:0}
.swx-visual{min-width:0;max-width:560px;width:100%;justify-self:center}
.swx-copy{min-width:0}
.swx-copy .method-points{margin-bottom:0}
.swx-copy .method-points li span:last-child{min-width:0}
@media (min-width:1000px){
  .swx-visual{max-width:none;justify-self:stretch}
}

/* ---- thermo- (mockup thermoshock-b) ---- */
/* thermo: werkwijze.html #heetwater en dienst-hogedruk-heetwater.html (Keuze Koen 2026-10-07,
   _keuze/verdieping-2/thermoshock-b.html). Rechtopstaande thermometer naast een hoge foto, de drie
   dingen die de instelling bepalen als korte chips. Voorvoegsel: thermo- */

.thermo-wrap{--hot:#D6336C;--hot-ink:#A3224A;--glass:#EAF1F7}
.thermo-layout{display:grid;gap:1.6rem;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "visual" "chips"}
@media (min-width:960px){
  .thermo-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto 1fr;grid-template-areas:"head visual" "chips visual";gap:2rem 3rem}
}
.thermo-head{grid-area:head;min-width:0}
.thermo-head h2{text-wrap:balance}
.thermo-head .lead{max-width:60ch}
.thermo-visual{grid-area:visual;min-width:0;display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1fr);gap:.8rem}
@media (min-width:640px){.thermo-visual{grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:1.2rem}}
.thermo-chips{grid-area:chips;min-width:0;align-self:start}

/* De hoge foto, zonder iets erop. */
.thermo-photo{position:relative;margin:0;min-width:0;min-height:300px;overflow:hidden;border-radius:var(--radius-lg);background:#DCE3EA;box-shadow:var(--shadow-card)}
.thermo-photo img{position:absolute;inset:0;width:calc(50% + 50%);height:calc(50% + 50%);display:block;object-fit:cover;object-position:80% 66%}

/* De thermometer. */
.thermo-thermo{min-width:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:1.1rem .8rem 1.2rem}
@media (min-width:640px){.thermo-thermo{padding:1.6rem 1.5rem 1.7rem}}
.thermo-label{font-size:var(--text-2xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--kws-blue);margin-bottom:.25rem}
.thermo-thermo h3{font-size:var(--text-2xl);white-space:nowrap}

.thermo-v{--h:300px;--tx:30px;--tl:40px;--tw:14px;--nl:calc(var(--tl) + var(--tw) + 18px);position:relative;height:var(--h);margin:1.5rem 0 2.2rem}
@media (min-width:640px){.thermo-v{--h:400px;--tx:34px;--tl:44px;--tw:18px;margin:1.9rem 0 2.4rem}}

.thermo-ticks{list-style:none}
.thermo-tick{position:absolute;left:0;width:var(--tx);bottom:var(--y);transform:translateY(50%);text-align:right;font-size:var(--text-2xs);font-weight:700;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums}
.thermo-tick::after{content:"";position:absolute;right:-8px;top:50%;width:5px;height:1px;background:#9AA7B5}
.thermo-tick.is-key{color:var(--kws-navy);font-size:var(--text-xs)}

.thermo-tube{position:absolute;left:var(--tl);width:var(--tw);top:0;bottom:0;border-radius:var(--radius-pill);background:var(--glass);box-shadow:0 0 0 4px #F1F5F9,0 0 0 5px var(--border),inset 2px 0 5px rgba(7,18,31,.14)}
.thermo-fill{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:linear-gradient(0deg,#58C7F3,#21A9E8 22%,#7C6FD8 60%,#D6336C);transform-origin:center bottom}
.thermo-fill::after{content:"";position:absolute;top:18px;bottom:18px;left:3px;width:3px;border-radius:3px;background:rgba(255,255,255,.4)}
.thermo-bulb{position:absolute;left:calc(var(--tl) - 5px);bottom:calc((var(--tw) + 10px) / -2);width:calc(var(--tw) + 10px);height:calc(var(--tw) + 10px);border-radius:50%;background:radial-gradient(circle at 34% 30%,#A6E3FB,#58C7F3 46%,#21A9E8);box-shadow:0 0 0 3px #F1F5F9,0 0 0 4px var(--border),inset 0 -4px 6px rgba(7,18,31,.2)}
.thermo-zone{position:absolute;left:calc(var(--tl) - 7px);width:calc(var(--tw) + 14px);bottom:42.857%;height:14.286%;border:3px solid var(--kws-navy);border-radius:10px;background:rgba(255,255,255,.2);box-shadow:0 5px 14px rgba(7,18,31,.28)}

.thermo-note{position:absolute;left:var(--nl);right:0;bottom:var(--y);transform:translateY(50%);font-size:var(--text-xs);line-height:1.3;color:var(--muted)}
.thermo-note.is-gevel{display:block}
.thermo-note.is-gevel span.pill{position:relative;display:inline-block;padding:.38rem .65rem;border-radius:var(--radius-xs);background:var(--kws-navy);color:var(--on-dark-3);font-size:var(--text-2xs);font-weight:600;line-height:1.3;box-shadow:var(--shadow-sm)}
.thermo-note.is-gevel b{display:block;color:#fff;font-size:var(--text-sm);font-weight:800}
.thermo-note.is-gevel span.pill::before{content:"";position:absolute;left:-11px;top:50%;width:11px;height:3px;margin-top:-1.5px;background:var(--kws-navy);border-radius:3px}
.thermo-note.is-bestr{color:var(--hot-ink);font-weight:600}
.thermo-note.is-bestr b{display:block;font-size:var(--text-sm);font-weight:800}
.thermo-note.is-minmax{font-size:var(--text-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.thermo-arrow{position:absolute;left:calc(var(--nl) - 10px);bottom:57.143%;top:0;border-left:2px dashed var(--hot)}
.thermo-arrow::before{content:"";position:absolute;left:-6px;top:-8px;border-bottom:9px solid var(--hot);border-left:5px solid transparent;border-right:5px solid transparent}
@media (min-width:640px){
  .thermo-note{font-size:var(--text-sm)}
  .thermo-note.is-gevel span.pill{font-size:var(--text-xs);padding:.45rem .8rem}
  .thermo-note.is-gevel b{font-size:var(--text-md)}
  .thermo-note.is-bestr b{font-size:var(--text-md)}
}

/* De drie dingen als korte chips. */
.thermo-chips h3{font-size:var(--text-xl);margin-bottom:.8rem}
.thermo-chiplist{list-style:none;display:grid;gap:.7rem;grid-template-columns:minmax(0,1fr)}
.thermo-chip{display:flex;align-items:center;gap:.85rem;padding:.75rem 1.05rem .75rem .75rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}
@media (min-width:640px) and (max-width:959px){.thermo-chiplist{grid-template-columns:repeat(3,minmax(0,1fr))}.thermo-chip{flex-direction:column;align-items:flex-start}}
.thermo-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%}
.thermo-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.thermo-ico--hot{background:rgba(214,51,108,.11);color:var(--hot)}
.thermo-ico--blue{background:rgba(33,169,232,.13);color:var(--kws-deep-blue)}
.thermo-ico--green{background:rgba(93,187,70,.16);color:#3A8A2A}
.thermo-chip strong{display:block;font-size:var(--text-md);line-height:1.25;color:var(--kws-navy)}
.thermo-chip span.t{display:block;margin-top:.1rem;font-size:var(--text-sm);line-height:1.4;color:var(--muted)}

/* De buis vult zich één keer van onder naar boven als de thermometer in beeld komt
   (vanaf 768px, zonder reduced-motion). Anders staat alles er gewoon. */
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .thermo-armed .thermo-fill{transform:scaleY(.02)}
  .thermo-armed .thermo-zone{opacity:0;transform:scaleY(.3)}
  .thermo-armed.thermo-in .thermo-fill{transform:none;transition:transform 1.4s cubic-bezier(.3,.7,.2,1) .1s}
  .thermo-armed.thermo-in .thermo-zone{opacity:1;transform:none;transition:opacity .5s ease 1.1s,transform .8s cubic-bezier(.2,.8,.2,1) 1.1s}
}

/* Optionele doorverwijzing onder de chips (niet op de heetwaterpagina zelf). */
.thermo-more{margin-top:.6rem}
.thermo-more a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:700;font-size:var(--text-sm);color:var(--kws-blue-hover);text-decoration:none}
.thermo-more a:hover{color:var(--kws-deep-blue);text-decoration:underline;text-underline-offset:4px}

/* ---- uitg- (mockup resultaten-uitgelicht-a) ---- */
/* uitg: uitgelicht project op resultaten.html (Keuze Koen 2026-10-07,
   _keuze/verdieping-2/resultaten-uitgelicht-a.html). Eén echt project in het groot, zonder
   feitenstrook: alleen het voor/na-diptiek (twee losse foto's, het kader verschuift ruim
   3 procent, dus geen schuif) en de knoppen. Voorvoegsel: uitg- (mockup: vd2-uitg-). */
.uitg-case{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}

.uitg-pair{display:grid;gap:3px;background:#fff}
.uitg-shot{margin:0;background:#fff}
.uitg-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--light-bg)}
.uitg-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 50%;display:block}

.uitg-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.8rem;padding:1.2rem;border-top:1px solid var(--border);background:var(--light-bg)}

@media (min-width:760px){
  .uitg-pair{grid-template-columns:1fr 1fr}
  .uitg-foot{justify-content:flex-start;padding:1.2rem 1.4rem}
}
@media (max-width:420px){
  .uitg-foot .split-ctas,.uitg-foot .split-ctas .btn{width:100%}
}

/* ---- vnwall- (mockup resultaten-overzicht-a) ---- */
/* vnwall: "Meer voor en na" op resultaten.html (Keuze Koen 2026-10-07,
   _keuze/verdieping-2/resultaten-overzicht-a.html). Beeldwand: drie kolommen in
   metselverband, alles tegelijk zichtbaar. Uitgelijnde paren zijn de .ba-slider van de
   site, de rest staat als paar naast elkaar met Voor/Na eronder. Voorvoegsel: vnwall-
   (mockup: vd2-resultaten-overzicht-a-; de wortel .vd2-resultaten-overzicht-a is .vnwall). */
.vnwall .hub-tag{text-decoration:none}
.vnwall .hub-cat-head{margin-bottom:1.6rem}

.vnwall-wall{display:flex;align-items:flex-start;gap:20px}
.vnwall-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:20px}
.vnwall-item{margin:0;min-width:0}

/* Schuif: de echte component, alleen het kader volgt de verhouding van het paar. */
.vnwall-wall .ba-slider .ba-frame{aspect-ratio:var(--ar);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}

/* Paar naast elkaar: twee losse foto's, geen schuif. */
.vnwall-duo{display:grid;grid-template-columns:1fr 1fr;gap:3px;border-radius:var(--radius-sm);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}
.vnwall-ph{position:relative;aspect-ratio:var(--ar);overflow:hidden;background:var(--light-bg)}
.vnwall-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vnwall-vn{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:.5rem}
.vnwall-vn span{display:block;padding-top:.4rem;border-top:3px solid var(--kws-navy);font-size:var(--text-3xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--kws-navy);line-height:1.2}
.vnwall-vn span.is-na{border-top-color:var(--kws-blue);color:var(--kws-deep-blue)}

/* Eén foto die zelf al schoon naast vuil laat zien. */
.vnwall-solo{border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--light-bg);aspect-ratio:var(--ar)}
.vnwall-solo img{width:100%;height:100%;object-fit:cover}

.vnwall-meer{display:none}

.vnwall-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.6rem;margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--border)}
.vnwall-cta p{margin:0;font-size:var(--text-xl);font-weight:700;color:var(--kws-navy);line-height:1.3}

@media (max-width:979px){
  .vnwall-wall{display:block;columns:2;column-gap:16px}
  .vnwall-col{display:contents}
  .vnwall-item{break-inside:avoid;margin-bottom:16px}
  .vnwall-cta{margin-top:1.6rem}
}
@media (max-width:599px){
  .vnwall-wall{columns:1}
  .vnwall-wall.is-ingeklapt [data-meer]{display:none}
  .vnwall-meer:not([hidden]){display:flex;width:100%;margin-top:.4rem}
  .vnwall-cta .split-ctas,.vnwall-cta .btn{width:100%}
}

/* ---- belofte- (mockup over-verhaal-b) ---- */
/* belofte: vier beloftes met bij elke belofte een echte Google-review (over-ons.html). Alle eigen klassen beginnen met belofte-. */

/* Intro: foto van Kees naast wie we zijn. */
.belofte-intro{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;align-items:center;margin-bottom:2.4rem}
.belofte-photo{margin:0;position:relative;overflow:hidden;border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-card);aspect-ratio:4/3}
.belofte-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.belofte-intro .section-head{margin:0;max-width:600px}
.belofte-intro .lead + .lead{margin-top:.8rem}
.belofte-score{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin-top:1.3rem;padding:.6rem 1rem .6rem .7rem;border:1px solid var(--border);border-radius:var(--radius-pill);background:#fff;box-shadow:var(--shadow-sm)}
.belofte-score img{width:26px;height:26px}
.belofte-score strong{font-size:var(--text-xl);font-weight:800;color:var(--kws-navy);line-height:1}
.belofte-score .stars{color:var(--review-yellow);letter-spacing:1px;font-size:var(--text-base);line-height:1}
.belofte-score span:last-child{font-size:var(--text-sm);font-weight:600;color:var(--muted)}

/* Vier kaarten: boven de belofte, onder de klant. */
.belofte-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem}
.belofte-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.belofte-promise{padding:1.4rem 1.4rem 1.1rem;border-top:4px solid var(--kws-blue)}
.belofte-num{display:block;margin:0 0 .55rem;font-size:var(--text-2xs);font-weight:800;letter-spacing:.12em;color:var(--kws-blue);font-variant-numeric:tabular-nums}
.belofte-promise h3{font-size:var(--text-2xl);margin:0 0 .45rem}
.belofte-promise p{margin:0;color:var(--muted);font-size:var(--text-md);line-height:1.6}
.belofte-echo{position:relative;flex:1;display:flex;flex-direction:column;gap:.6rem;margin:0 .8rem .8rem;padding:1.1rem 1.15rem 1rem 1.15rem;border-radius:var(--radius-sm);background:#F2F8FC}
.belofte-echo::before{content:"\201C";position:absolute;right:.9rem;top:-.1rem;font-size:4.2rem;line-height:1;font-weight:800;color:var(--kws-blue);opacity:.16;pointer-events:none}
.belofte-echo .stars{color:var(--review-yellow);letter-spacing:1px;font-size:var(--text-base);line-height:1}
.belofte-echo blockquote{margin:0;flex:1}
.belofte-echo blockquote p{margin:0;font-size:var(--text-base);font-weight:500;line-height:1.55;color:var(--text)}
.belofte-echo figcaption{display:flex;align-items:center;gap:.5rem;font-size:var(--text-sm);color:var(--muted)}
.belofte-echo figcaption img{width:20px;height:20px;flex:none}
.belofte-echo cite{font-style:normal;font-weight:700;color:var(--kws-navy)}

/* Onderaan: cijfers, link naar Google en de knoppen. */
.belofte-foot{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;align-items:center;margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--border)}
.belofte-foot .kws-stats{margin:0}
.belofte-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.belofte-actions .btn-primary{flex:1 1 240px}
.belofte-google{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:700;color:var(--kws-navy);text-decoration:none}
.belofte-google:hover{color:var(--kws-blue);text-decoration:underline;text-underline-offset:4px}
.belofte-google svg{width:16px;height:16px;flex:none}

@media (min-width:560px){
  .belofte-actions .btn-primary{flex:0 0 auto}
}
@media (min-width:760px){
  .belofte-intro{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:2.6rem}
  .belofte-photo{aspect-ratio:4/5}
  .belofte-photo img{object-position:50% 40%}
  .belofte-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
}
@media (min-width:1000px){
  .belofte-intro{grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);gap:3.2rem}
  .belofte-foot{grid-template-columns:auto minmax(0,1fr)}
  .belofte-actions{justify-content:flex-end}
}
@media (prefers-reduced-motion:no-preference){
  .belofte-card{transition:box-shadow .2s ease,transform .2s ease}
  .belofte-card:hover{box-shadow:var(--shadow-card);transform:translateY(-2px)}
}

/* ---- kanaal- (mockup contact-kanalen-a) ---- */
/* kanaal: plaatscheck met dronefoto en de vijf contactroutes (contact.html). De gekozen plaats gaat mee in de WhatsApp-berichten.
   Eerst een slanke balk: dronefoto van de bus links, rechts "Valt jouw plaats
   erbinnen?" met een keuzelijst en het antwoord. Daaronder de vijf routes, elk
   met precies een kanaal. De gekozen plaats gaat mee in de WhatsApp-berichten.
   Geen afstanden, geen openingstijden, geen adres. Eigen klassen met voorvoegsel
   kanaal-. */

/* Plaatscheck: slanke balk boven de tegels */
.kanaal-place{display:grid;grid-template-columns:minmax(0,1fr);margin:0 0 1.1rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-card);overflow:hidden}
.kanaal-photo{position:relative;margin:0;min-height:150px;background:var(--kws-navy)}
.kanaal-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.kanaal-pbody{min-width:0;padding:1.3rem 1.25rem 1.4rem}
.kanaal-pbody h3{font-size:var(--text-xl);line-height:1.25;color:var(--kws-navy)}
.kanaal-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.8rem 1.6rem;margin-top:.9rem}
.kanaal-sel{flex:0 1 17rem;min-width:min(100%,15rem)}
.kanaal-selwrap{position:relative;display:grid}
.kanaal-selwrap select{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;min-height:54px;padding:.8rem 3rem .8rem 1.05rem;border:2px solid var(--border);border-radius:var(--radius-sm);background:#fff;font:inherit;font-size:var(--text-lg);font-weight:600;color:var(--kws-navy);cursor:pointer}
.kanaal-selwrap select:hover{border-color:var(--kws-blue)}
.kanaal-selwrap select:focus-visible{outline:3px solid var(--kws-blue);outline-offset:3px;border-color:var(--kws-blue)}
.kanaal-selwrap svg{position:absolute;right:1rem;top:50%;width:20px;height:20px;margin-top:-10px;pointer-events:none;color:var(--kws-blue)}
.kanaal-other{display:inline-flex;align-items:center;min-height:44px;margin-top:.2rem;padding:.4rem 0;border:0;background:none;font:inherit;font-size:var(--text-md);font-weight:700;color:var(--kws-blue);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.kanaal-other:hover{color:var(--kws-deep-blue)}

.kanaal-result{flex:1 1 17rem;min-width:0;min-height:6rem}
.kanaal-res{padding:.95rem 1.1rem 1rem;border-radius:var(--radius-sm);border:1px dashed var(--border);background:var(--light-bg)}
.kanaal-yes{border-style:solid;background:rgba(93,187,70,.08);border-color:rgba(93,187,70,.45)}
.kanaal-ask{border-style:solid;background:rgba(33,169,232,.07);border-color:rgba(33,169,232,.35)}
.kanaal-rt{display:flex;align-items:center;gap:.6rem;font-size:var(--text-lg);font-weight:800;color:var(--kws-navy);line-height:1.3}
.kanaal-q{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--kws-blue);color:#fff;font-size:var(--text-xs);font-weight:800}
.kanaal-rp{margin-top:.4rem;color:var(--muted);font-size:var(--text-md)}
.kanaal-links{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0 0;padding:0;list-style:none}
.kanaal-lnk{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.5rem .85rem;border-radius:var(--radius-pill);border:1px solid var(--border);background:#fff;font-size:var(--text-sm);font-weight:700;color:var(--kws-navy);text-decoration:none}
.kanaal-lnk:hover{border-color:var(--kws-blue);color:var(--kws-blue)}
.kanaal-lnk.is-wa{border-color:rgba(37,211,102,.5);color:#127a3a}
.kanaal-lnk.is-wa:hover{border-color:var(--whatsapp);color:#0e6a31}

/* De vijf routes */
.kanaal-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem;margin:0;padding:0;list-style:none}
.kanaal-grid>li{display:flex;min-width:0}

/* Gewone tegel: op een telefoon een rij met icoon links, vanaf 640px een staande kaart. */
.kanaal-tile{flex:1;min-width:0;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;row-gap:.25rem;align-items:start;padding:1.15rem 1.1rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);color:inherit;text-decoration:none}
.kanaal-tile:hover{border-color:var(--kws-blue);box-shadow:var(--shadow-card)}
.kanaal-ico{grid-row:1 / 4;width:46px;height:46px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;background:rgba(33,169,232,.12);color:var(--kws-blue)}
.kanaal-ico svg{width:23px;height:23px}
.kanaal-tile[data-ch="wa"] .kanaal-ico{background:rgba(37,211,102,.14);color:#169c4a}
.kanaal-tile[data-ch="zakelijk"] .kanaal-ico{background:rgba(7,17,92,.08);color:var(--kws-deep-blue)}
.kanaal-tile h3{font-size:var(--text-lg);padding-right:2.4rem}
.kanaal-tile p{color:var(--muted);font-size:var(--text-sm)}
.kanaal-via{display:inline-flex;align-items:center;gap:.45rem;margin-top:.45rem;font-size:var(--text-xs);font-weight:800;letter-spacing:.01em;color:var(--kws-deep-blue)}
.kanaal-via svg{width:16px;height:16px;flex:none}
.kanaal-via .kanaal-w{color:#169c4a}
.kanaal-via .kanaal-b{color:var(--kws-blue)}
.kanaal-arr{position:absolute;top:1rem;right:1rem;width:32px;height:32px;border-radius:50%;background:var(--light-bg);color:var(--kws-navy);display:flex;align-items:center;justify-content:center;font-weight:800;line-height:1}
.kanaal-tile:hover .kanaal-arr{background:var(--kws-blue);color:#fff}

/* Grote tegel: de offerte, het enige antwoord met de hoofdknop. */
.kanaal-feature{flex:1;min-width:0;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.9rem;padding:1.6rem 1.35rem;border-radius:var(--radius-lg);background:var(--kws-navy);color:#fff;box-shadow:var(--shadow)}
.kanaal-feature::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 92% 0%,rgba(33,169,232,.30),transparent 62%);pointer-events:none}
.kanaal-feature>*{position:relative}
.kanaal-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .7rem;border-radius:var(--radius-pill);background:rgba(88,199,243,.14);color:var(--kws-cyan);font-size:var(--text-2xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.kanaal-feature h3{color:#fff;font-size:var(--text-3xl)}
.kanaal-feature p{color:var(--on-dark-3);font-size:var(--text-md);max-width:44ch}
.kanaal-list{display:grid;gap:.55rem;margin:.2rem 0 0;padding:0;list-style:none}
.kanaal-list li{display:flex;align-items:flex-start;gap:.6rem;color:var(--on-dark-2);font-size:var(--text-sm)}
.kanaal-list .check{margin-top:.1rem}
.kanaal-feature .btn{align-self:flex-start;margin-top:auto}

.kanaal-mail{margin:1.5rem 0 0;color:var(--muted);font-size:var(--text-md)}
.kanaal-mail a{font-weight:700;color:var(--kws-blue);text-decoration:none}
.kanaal-mail a:hover{text-decoration:underline;text-underline-offset:3px}

@media (min-width:640px){
  .kanaal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
  .kanaal-grid>li.kanaal-first{grid-column:1 / -1}
  .kanaal-tile{display:flex;flex-direction:column;gap:.3rem;padding:1.4rem 1.3rem 1.25rem}
  .kanaal-ico{margin-bottom:.75rem}
  .kanaal-via{margin-top:auto;padding-top:.8rem}
  .kanaal-feature{padding:2rem 1.8rem}
}
@media (min-width:720px){
  .kanaal-place{grid-template-columns:minmax(200px,.36fr) minmax(0,1fr)}
  .kanaal-photo{min-height:0}
  .kanaal-pbody{padding:1.6rem 1.8rem 1.7rem}
}
@media (min-width:960px){
  .kanaal-grid{grid-template-columns:1.15fr 1fr 1fr;grid-auto-rows:1fr}
  .kanaal-grid>li.kanaal-first{grid-column:1;grid-row:1 / 3}
}
@media (prefers-reduced-motion:no-preference){
  .kanaal-tile{transition:border-color .2s,box-shadow .2s,transform .2s}
  .kanaal-tile:hover{transform:translateY(-3px)}
  .kanaal-arr{transition:background .2s,color .2s,transform .2s}
  .kanaal-tile:hover .kanaal-arr{transform:translateX(2px)}
  .kanaal-lnk,.kanaal-selwrap select{transition:border-color .2s,color .2s}
  .kanaal-result[data-live] .kanaal-res{animation:kanaal-in .28s ease-out}
}
@keyframes kanaal-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---- wgfind- (mockup werkgebied-hub-a) ---- */
/* wgfind: Werkgebied-overzicht (locaties.html), plaats-zoeker en plaatslijst.
   Keuze Koen 2026-10-07, _keuze/verdieping-2/werkgebied-hub-a (voorvoegsel wgfind-).
   Eigenaar: Werkgebied-agent. Markup en gebruik: parts/wgfind.md. */

/* Hero: kop links, zoekkaart rechts */
.wgfind-in{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:2.6rem 1.25rem 5rem;display:grid;gap:2rem;align-items:center}
@media (min-width:1000px){.wgfind-in{grid-template-columns:1fr minmax(0,500px);gap:3.5rem;padding:3.4rem 1.25rem 6.5rem}}
@media (max-width:679px){.wgfind-in{padding:1.7rem 1.25rem 3.8rem}}
.wgfind-in > *{min-width:0}

/* De zoekkaart */
.wgfind-card{background:#fff;color:var(--text);border-radius:var(--radius-lg);padding:1.4rem 1.3rem 1.2rem;box-shadow:var(--shadow);position:relative}
@media (min-width:520px){.wgfind-card{padding:1.8rem 1.8rem 1.4rem}}
.wgfind-card[hidden]{display:none}
.wgfind-card h2{font-size:var(--text-2xl);margin-bottom:1rem}
.wgfind-fs{border:0;margin:0 0 1rem;padding:0;min-width:0}
.wgfind-fs legend{font-size:var(--text-sm);font-weight:700;color:var(--kws-navy);margin-bottom:.5rem;padding:0}
.wgfind-seg{display:inline-flex;gap:.3rem;padding:.3rem;background:var(--light-bg);border:1px solid var(--border);border-radius:var(--radius-pill)}
.wgfind-seg label{position:relative;display:inline-flex}
.wgfind-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.wgfind-seg span{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:.45rem 1.05rem;border-radius:var(--radius-pill);font-weight:700;font-size:var(--text-sm);color:var(--muted)}
.wgfind-seg input:checked + span{background:var(--kws-navy);color:#fff}
.wgfind-seg input:focus-visible + span{outline:3px solid var(--kws-blue);outline-offset:2px}
.wgfind-lbl{display:block;font-size:var(--text-sm);font-weight:700;color:var(--kws-navy);margin-bottom:.45rem}
.wgfind-row{display:flex;gap:.5rem}
.wgfind-field{position:relative;flex:1;min-width:0}
.wgfind-field svg{position:absolute;left:1rem;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.wgfind-input{width:100%;min-height:56px;padding:.8rem 1rem .8rem 2.9rem;font:inherit;font-size:var(--text-lg);font-weight:600;color:var(--kws-navy);background:#fff;border:2px solid var(--border);border-radius:var(--radius-sm)}
.wgfind-input::placeholder{color:#9AA4B0;font-weight:500}
.wgfind-input:focus{outline:none;border-color:var(--kws-blue);box-shadow:0 0 0 4px rgba(33,169,232,.18)}
.wgfind-go{flex:none;min-height:56px;padding:0 1.2rem;border:0;border-radius:var(--radius-sm);background:var(--kws-navy);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.wgfind-go:hover{background:var(--kws-deep-blue)}
.wgfind-go:focus-visible{outline:3px solid var(--kws-blue);outline-offset:3px}

/* Suggesties staan in de flow (de hero knipt af), dus geen zwevend menu */
.wgfind-list{list-style:none;margin:.6rem 0 0;padding:.35rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;box-shadow:var(--shadow-sm)}
.wgfind-list[hidden]{display:none}
.wgfind-opt{display:flex;align-items:center;justify-content:space-between;gap:.8rem;min-height:48px;padding:.55rem .8rem;border-radius:var(--radius-xs);cursor:pointer;color:var(--kws-navy)}
.wgfind-opt b{font-weight:800}
.wgfind-opt .n{font-weight:500}
.wgfind-opt .to{font-size:var(--text-xs);font-weight:700;color:var(--kws-blue);white-space:nowrap;text-align:right}
.wgfind-opt .to.none{color:var(--muted);font-weight:600;white-space:normal}
.wgfind-opt.is-active,.wgfind-opt:hover{background:#EAF6FD}
.wgfind-opt.is-active{box-shadow:inset 3px 0 0 var(--kws-blue)}

.wgfind-fb{margin-top:.8rem;padding:1rem 1.1rem;border-radius:var(--radius-sm);background:#EAF6FD;border:1px solid #CBE9F8;color:var(--text);font-size:var(--text-md)}
.wgfind-fb[hidden]{display:none}
.wgfind-fb strong{display:block;color:var(--kws-navy);font-size:var(--text-base);margin-bottom:.25rem}
.wgfind-fb .acts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.wgfind-fb .btn{min-height:44px;padding:.6rem 1rem;font-size:var(--text-sm)}
.wgfind-fb a:not(.btn){color:var(--kws-deep-blue);font-weight:700}

.wgfind-foot{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--border);font-size:var(--text-sm);color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem}
.wgfind-foot a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;color:#128C4A;font-weight:700;text-decoration:none}
.wgfind-foot a:hover{text-decoration:underline;text-underline-offset:3px}
.wgfind-foot svg{width:18px;height:18px}

/* De lijst: een rij per plaats, beide diensten erachter.
   --wgfind-rows (aantal rijen per kolom) komt uit build-locaties.py: ceil(aantal plaatsen / 2). */
.wgfind-places{list-style:none;display:grid;grid-template-columns:1fr;column-gap:2.6rem;border-top:1px solid var(--border)}
@media (min-width:860px){.wgfind-places{grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(var(--wgfind-rows,9),auto)}}
.wgfind-place{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.4rem 1rem;padding:.75rem 0;border-bottom:1px solid var(--border)}
.wgfind-name{font-weight:800;color:var(--kws-navy);font-size:var(--text-lg);line-height:1.25}
.wgfind-name small{display:block;font-size:var(--text-xs);font-weight:600;color:var(--muted);letter-spacing:.01em}
.wgfind-links{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:flex-end}
.wgfind-links a,.wgfind-links .ask{display:inline-flex;align-items:center;gap:.35rem;min-height:40px;padding:.4rem .85rem;border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:700;text-decoration:none;border:1px solid var(--border);color:var(--kws-deep-blue);background:#fff}
.wgfind-links a:hover{border-color:var(--kws-blue);background:var(--light-bg)}
.wgfind-links a::after{content:"\2192";color:var(--kws-blue);font-weight:800}
.wgfind-links .ask{border-style:dashed;color:var(--muted);font-weight:600}
.wgfind-links .ask::after{content:none}
.wgfind-place.is-hit{background:linear-gradient(90deg,#EAF6FD,transparent)}
@media (max-width:519px){
  .wgfind-place{gap:.4rem .6rem}
  .wgfind-links{gap:.35rem}
  .wgfind-links a,.wgfind-links .ask{min-height:44px;padding:.4rem .7rem}
  .wgfind-row{flex-direction:column}
  .wgfind-go{width:100%}
}
.wgfind-note{margin-top:1.2rem;font-size:var(--text-sm);color:var(--muted)}
.wgfind-note a{color:var(--kws-deep-blue);font-weight:700}
@media (prefers-reduced-motion:no-preference){
  .wgfind-seg span{transition:background .15s,color .15s}
  .wgfind-input{transition:border-color .15s,box-shadow .15s}
  .wgfind-go{transition:background .15s}
  .wgfind-links a{transition:border-color .15s,background .15s}
}

/* ---- lokaal- (mockup locatie-lokaal-a) ---- */
/* lokaal: lokaal bewijsblok op de 33 locatiepagina's (dakreiniging-*.html, gevelreiniging-*.html).
   Keuze Koen 2026-10-07, _keuze/verdieping-2/locatie-lokaal-a (voorvoegsel lokaal-).
   Eigenaar: Werkgebied-agent. Markup en gebruik: parts/lokaal.md. */

/* De tekst per plaats onder de ligging (staat niet in de mockup: de unieke plaatstekst blijft zichtbaar voor bezoekers en zoekmachines) */
.lokaal-tekst{margin-top:.85rem;color:var(--muted);font-size:var(--text-md);max-width:54ch}

/* Uitgelicht project: groot schuifbeeld, daarnaast alleen titel en twee feiten */
.lokaal-feat{display:grid;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}
.lokaal-feat > *{min-width:0}
@media (min-width:720px){.lokaal-feat{grid-template-columns:minmax(0,4fr) minmax(0,5fr)}}
/* Standaard het uitgelijnde Assen-paar (664 x 608); de pagina zet het kader per project inline op de eigen verhouding.
   Het kader vult de hoogte van de rij, zodat een liggend paar naast de tekst geen witte strook overlaat. */
.lokaal-feat > .ba-slider,.lokaal-near > .ba-slider{display:flex;flex-direction:column}
.lokaal-feat .ba-slider .ba-frame,.lokaal-near .ba-slider .ba-frame{flex:1 1 auto;aspect-ratio:664/608;border-radius:0;box-shadow:none}
.lokaal-feat-body{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.8rem;padding:1.5rem 1.4rem 1.7rem}
@media (min-width:960px){.lokaal-feat-body{padding:2.2rem 2.4rem}}
.lokaal-feat-body h3{font-size:clamp(1.4rem,2.4vw,1.8rem);line-height:1.2}
.lokaal-facts{align-self:stretch;display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.2rem;margin:.3rem 0 0;padding-top:1rem;border-top:1px solid var(--border);font-size:var(--text-sm)}
.lokaal-facts dt{color:var(--muted);font-weight:600}
.lokaal-facts dd{margin:0;color:var(--kws-navy);font-weight:700}
/* Alleen waar een project een eerlijk voorbehoud nodig heeft (bijvoorbeeld een uitzonderlijk goed gelukt dak) */
.lokaal-note{margin:0;font-size:var(--text-sm);color:var(--muted)}

.lokaal-tag{display:inline-flex;align-items:center;padding:.26rem .65rem;border-radius:var(--radius-xs);background:#E7F7E2;color:#2F7A1F;font-size:var(--text-3xs);font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.lokaal-tag.near{background:#EAF6FD;color:var(--kws-deep-blue)}

/* Twee kleinere projecten: Voor en Na naast elkaar (geen schuif, de foto's hebben niet hetzelfde kader), ondergrond en titel */
.lokaal-two{display:grid;gap:1.3rem;margin-top:1.3rem}
@media (min-width:760px){.lokaal-two{grid-template-columns:1fr 1fr}}
.lokaal-two > *{min-width:0}
.lokaal-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.lokaal-pair{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3px;background:#fff}
.lokaal-pair figure{position:relative;margin:0;overflow:hidden;background:var(--light-bg);aspect-ratio:4/5}
.lokaal-pair img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lokaal-card-body{display:grid;gap:.3rem;padding:1.05rem 1.25rem 1.3rem}
.lokaal-card-body h3{font-size:var(--text-lg);line-height:1.3}
.lokaal-kicker{font-size:var(--text-2xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* Afsluitvak: buurplaatsen en de vraag-het-gewoon-regel */
.lokaal-around{display:grid;gap:1.3rem 3rem;align-items:center;margin-top:2rem;padding:1.5rem 1.4rem;border-radius:var(--radius);background:var(--light-bg);border:1px solid var(--border-soft)}
.lokaal-around > *{min-width:0}
@media (min-width:860px){.lokaal-around{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);padding:1.9rem 2.1rem}}
.lokaal-around h3{font-size:var(--text-lg)}
.lokaal-around p{color:var(--muted);font-size:var(--text-md);margin-top:.3rem;max-width:50ch}
.lokaal-acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.lokaal-around .plaats-chips{margin-top:0}

/* Werk uit de buurt: dezelfde opzet als het uitgelichte project, voor een plaats zonder eigen projectfoto's */
.lokaal-near{display:grid;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}
.lokaal-near > *{min-width:0}
@media (min-width:720px){.lokaal-near{grid-template-columns:minmax(0,4fr) minmax(0,5fr)}}
.lokaal-near-body{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.8rem;padding:1.5rem 1.4rem 1.7rem}
@media (min-width:760px){.lokaal-near-body{padding:2rem 2.2rem}}
.lokaal-near-body h3{font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.2}
.lokaal-go{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:800;color:var(--kws-deep-blue);text-decoration:none}
.lokaal-go::after{content:"\2192";color:var(--kws-blue)}
.lokaal-go:hover{color:var(--kws-blue)}
.lokaal-go:focus-visible{outline:3px solid var(--kws-blue);outline-offset:3px;border-radius:var(--radius-xs)}

/* ---- impkeuze- (mockup _keuze/verdieping-3/impregneren-b, keuze Koen 2026-10-07 23:43) ----
   Donkere kaart: links de vraag en vier keuzeknoppen (tabs), rechts per keuze een beeld en een kort antwoord. */
.impkeuze-card{background:var(--kws-navy);color:#fff;border-radius:var(--radius-lg);padding:1.8rem 1.25rem 1.9rem;display:grid;gap:1.6rem;overflow:hidden}
.impkeuze-card .eyebrow{color:var(--kws-cyan)}
.impkeuze-card .eyebrow::before{background:var(--kws-cyan)}
.impkeuze-card h2{color:#fff;font-size:clamp(1.45rem,3.2vw,2rem);text-wrap:balance}
.impkeuze-card .lead{color:var(--on-dark-5);font-size:var(--text-base)}
.impkeuze-left,.impkeuze-right{min-width:0}

/* Keuzeknoppen */
.impkeuze-tabs{display:grid;gap:.6rem;margin-top:1.4rem}
.impkeuze-tab{display:flex;align-items:center;gap:.8rem;width:100%;min-height:54px;padding:.75rem 1rem;border-radius:var(--radius-sm);border:1.5px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:var(--on-dark-1);font-weight:600;font-size:var(--text-md);text-align:left;line-height:1.3;transition:background .18s,border-color .18s,color .18s}
.impkeuze-tab:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08)}
.impkeuze-tab:focus-visible{outline:3px solid var(--kws-cyan);outline-offset:3px}
.impkeuze-dot{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.45);position:relative}
.impkeuze-tab[aria-selected="true"]{background:#fff;border-color:#fff;color:var(--kws-navy)}
.impkeuze-tab[aria-selected="true"] .impkeuze-dot{border-color:var(--kws-blue)}
.impkeuze-tab[aria-selected="true"] .impkeuze-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--kws-blue)}

/* Antwoord: beeld en tekst */
.impkeuze-panel[hidden]{display:none}
.impkeuze-shot{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius);background:#0d2236;box-shadow:0 12px 32px rgba(0,0,0,.28)}
.impkeuze-shot img{width:100%;height:100%;object-fit:cover;display:block}
.impkeuze-panel .ba-slider .ba-frame{box-shadow:0 12px 32px rgba(0,0,0,.28)}
.impkeuze-answer{margin-top:1.1rem}
.impkeuze-answer h3{color:#fff;font-size:var(--text-2xl)}
.impkeuze-answer p{margin-top:.35rem;color:var(--on-dark-5);font-size:var(--text-md);max-width:52ch}
.impkeuze-answer .btn-text{color:var(--kws-cyan);margin-top:.2rem}
.impkeuze-answer .btn-text:hover{color:#fff}
.impkeuze-answer .btn-text:focus-visible{outline-color:var(--kws-cyan)}
.impkeuze-cta{margin-top:1.3rem;display:flex;flex-wrap:wrap;gap:.7rem}
.impkeuze-cta .btn:focus-visible{outline-color:var(--kws-cyan)}

@media (prefers-reduced-motion:no-preference){
  .impkeuze-panel.is-in{animation:impkeuze-in .26s ease-out}
  @keyframes impkeuze-in{from{opacity:0}to{opacity:1}}
}
@media (min-width:480px){
  .impkeuze-card{padding:2.2rem 1.8rem}
}
@media (min-width:960px){
  .impkeuze-card{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:3rem;padding:2.6rem 2.4rem;align-items:start}
}

/* ---------- Linkboom (linkboom/index.html, keuze Koen 2026-10-12) ----------
   Link-in-bio pagina voor de Instagram-bio: geen header of footer van de site,
   een kolom op navy. Basis versie A, dienstrijen met foto uit B, reviewkaart uit C.
   Voorvoegsel lb-. De knoppen zijn minimaal 56px hoog, navy tekst op blauw en groen. */
.lb-page{margin:0;min-height:100vh;background:linear-gradient(180deg,var(--kws-navy) 0%,#0B1F4D 55%,var(--kws-deep-blue) 100%);color:#fff}
.lb-wrap{max-width:520px;margin:0 auto;padding:1.6rem 1.25rem 2.2rem;display:flex;flex-direction:column;gap:.8rem}
.lb-top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem;margin-bottom:.4rem}
.lb-logo{display:inline-flex;align-items:center;background:var(--kws-navy);padding:.3rem .5rem;border-radius:var(--radius-sm)}
.lb-logo img{height:52px;width:auto}
.lb-badge{display:flex;align-items:center;gap:.6rem;color:var(--on-dark-3);font-size:var(--text-sm);font-weight:600}
.lb-badge img{width:44px;height:44px}
.lb-page h1{font-size:var(--text-4xl);line-height:1.15;font-weight:800;letter-spacing:-.01em;color:#fff;margin-top:.3rem}
.lb-lead{color:var(--on-dark-3);font-size:var(--text-md);max-width:34ch}
.lb-page h2{font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--kws-cyan);margin:.9rem 0 -.1rem}
.lb-btn{display:flex;align-items:center;justify-content:center;gap:.7rem;width:100%;min-height:56px;padding:.85rem 1.2rem;border-radius:var(--radius-sm);border:2px solid transparent;font-weight:700;font-size:var(--text-lg);line-height:1.2;text-decoration:none;text-align:center;transition:background .18s,transform .15s,color .18s}
.lb-btn svg{width:22px;height:22px;flex:none}
.lb-btn:hover{transform:translateY(-2px)}
.lb-btn-primary{background:var(--kws-blue);color:var(--kws-navy);box-shadow:0 8px 20px rgba(33,169,232,.35)}
.lb-btn-primary:hover{background:var(--kws-cyan)}
.lb-btn-wa{background:var(--whatsapp);color:var(--kws-navy)}
.lb-btn-wa:hover{background:#4BE08A}
.lb-btn-tel{background:rgba(255,255,255,.96);color:var(--kws-navy)}
.lb-btn-tel:hover{background:#fff}
.lb-row{display:flex;align-items:center;gap:.9rem;min-height:64px;padding:.45rem .9rem .45rem .45rem;border-radius:var(--radius-sm);border:2px solid rgba(255,255,255,.4);background:rgba(255,255,255,.06);color:#fff;font-weight:700;text-decoration:none;transition:background .18s,color .18s}
.lb-row:hover{background:#fff;color:var(--kws-navy)}
.lb-row img{width:56px;height:56px;object-fit:cover;border-radius:10px;flex:none}
.lb-row span{flex:1}
.lb-row .arr{width:20px;height:20px;flex:none}
.lb-row.is-plain{padding-left:1.1rem}
.lb-rev{background:#fff;color:var(--text);border-radius:var(--radius);padding:1.2rem 1.2rem 1.1rem;margin:.7rem 0 0}
.lb-score{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem;font-weight:700;color:var(--kws-navy)}
.lb-score strong{font-size:var(--text-3xl);line-height:1}
.lb-stars{color:var(--review-yellow);letter-spacing:1px}
.lb-rev blockquote{font-size:var(--text-md)}
.lb-rev cite{display:block;margin-top:.55rem;font-style:normal;font-size:var(--text-sm);color:var(--muted)}
.lb-proof{text-align:center;color:var(--on-dark-3);font-size:var(--text-sm);margin-top:.2rem}
.lb-soc{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin-top:.6rem}
.lb-soc a{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;text-decoration:none;transition:background .18s,color .18s}
.lb-soc a:hover{background:#fff;color:var(--kws-navy)}
.lb-soc svg{width:24px;height:24px}
.lb-foot{text-align:center;color:var(--on-dark-6);font-size:var(--text-xs);margin-top:.6rem}