/* Stolk hoofdnavigatie: gedeeld door de homepage (via @import in
   Stolk Schilders.dc.html) en de statische pagina's (scripts/gedeeld.mjs).
   Gedrag: stolk-nav.js en stolk-kleurlab.js. */
:root { --navy: #101827; --ink: #141B29; }
/* ---- Header ---- */
/* De buitenste header blijft transparant; alle navigatie staat in één zwevende
   pill. Eén bewegingstaal: hover 150 ms, menu's 240 ms, drawer 420 ms, steeds
   ease-out zonder doorschieten. Alles via transform/opacity/kleur. */
:root {
  --nav-uit: cubic-bezier(.22, 1, .36, 1);
  --nav-in: cubic-bezier(.4, 0, 1, 1);
  --nav-ivoor: #FAF8F4;
  --nav-rand: rgba(16, 24, 39, .08);
  --nav-brons: #8A6A3B;
}
.site-header { background: transparent; border-bottom: 1px solid transparent; transition: background-color .22s ease, border-color .22s ease; }
.site-nav { overflow: visible; }
.site-nav-binnen {
  position: relative;
  height: 72px !important;
  margin-top: 20px;
  padding: 0 12px 0 14px;
  color: var(--navy);
  background: rgba(250, 248, 244, .84);
  border: 1px solid var(--nav-rand);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 1px 1px rgba(16,24,39,.03), 0 14px 34px -26px rgba(16,24,39,.34);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  transition: transform .32s var(--nav-uit), background-color .32s ease, box-shadow .32s ease, border-color .32s ease;
}
/* Tijdens scrollen blijft de pill zweven: iets hoger, iets voller, iets meer
   schaduw. Geen hoogteverandering, dus geen verschuiving eronder. */
@media (min-width: 1024px) {
  .site-header.is-stuck .site-nav-binnen {
    transform: translate3d(0, -10px, 0);
    background: rgba(250, 248, 244, .94);
    border-color: rgba(16, 24, 39, .1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(16,24,39,.05), 0 18px 40px -24px rgba(16,24,39,.42);
  }
}
.site-header .logo-link,
.site-header .btn-stil { color: var(--navy); }

/* Merkdeel: iets meer gewicht dan de items. */
.kop-merk { gap: 11px; padding: 6px 8px 6px 4px; border-radius: 14px; }
.kop-merk-vlak { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; color: #fff;
  background: #142033; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(16,24,39,.9), 0 6px 14px -8px rgba(16,24,39,.6);
  transition: transform .18s var(--nav-uit), box-shadow .18s ease; }
.kop-merk-vlak svg { width: 18px; height: 18px; }
.kop-merk-naam { font-size: 17.5px; font-weight: 650; letter-spacing: -.022em; color: var(--ink); }
@media (hover: hover) {
  .kop-merk:hover .kop-merk-vlak { transform: translate3d(0, -1px, 0); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(16,24,39,.9), 0 8px 18px -8px rgba(16,24,39,.65); }
}
.kop-merk:focus-visible { box-shadow: 0 0 0 2px var(--nav-ivoor), 0 0 0 4px var(--navy); }

/* Items: rustige tint bij hover, een kort lijntje als actieve sectie. */
.nav-hoofd { gap: 2px !important; }
.nav-link { position: relative; display: inline-flex; align-items: center; height: 38px; padding: 0 12px; border-radius: 11px; font-size: 14.5px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; color: #4A5466;
  transition: color .15s ease, background-color .15s ease; }
.nav-link:hover { color: var(--ink); background: rgba(16,24,39,.045); }
.nav-link.actief { color: var(--ink); }
.nav-link.actief::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 16px; height: 2px; margin-left: -8px; border-radius: 2px; background: var(--navy); transform-origin: center; animation: nav-actief-in .24s var(--nav-uit) both; }
@keyframes nav-actief-in { from { transform: scaleX(.2); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
.nav-link:focus-visible, .nav-menu-knop:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--nav-ivoor), 0 0 0 4px var(--navy); }
.kl-scheiding { margin: 0 8px; }

/* Diensten en Inspiratie: link en aparte knop voor het menu (de link blijft
   gewoon een link). Zelfde vorm voor beide. */
.nav-insp, .nav-dienst { display: inline-flex; align-items: center; border-radius: 11px; transition: background-color .15s ease; }
.nav-insp .nav-insp-link, .nav-dienst .nav-dienst-link { padding-right: 4px; }
.nav-menu-knop { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 38px; margin-right: 2px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: #4A5466; cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.nav-menu-knop svg { width: 14px; height: 14px; transition: transform .24s var(--nav-uit); }
.nav-insp:hover .nav-menu-knop, .nav-dienst:hover .nav-menu-knop, .nav-menu-knop:hover { color: var(--ink); }
.nav-insp:hover, .nav-dienst:hover { background: rgba(16,24,39,.045); }
.nav-insp:hover .nav-link, .nav-dienst:hover .nav-link { background: transparent; }
/* Op een dienstpagina (of in Inspiratie): rustig actief, zachte vlakte en iets donkerdere rand. */
.nav-dienst.is-actief, .nav-insp.is-actief { background: rgba(16,24,39,.05); box-shadow: inset 0 0 0 1px rgba(16,24,39,.12); }
.nav-dienst.is-actief .nav-link, .nav-insp.is-actief .nav-link, .nav-dienst.is-actief .nav-menu-knop, .nav-insp.is-actief .nav-menu-knop { color: var(--ink); }
.nav-dienst.is-actief .nav-link { font-weight: 600; }
html[data-insp="open"] .nav-insp, html[data-dienst="open"] .nav-dienst { background: #EFEBE3; box-shadow: inset 0 0 0 1px rgba(16,24,39,.14); }
html[data-insp="open"] .nav-insp .nav-link, html[data-insp="open"] .nav-insp .nav-menu-knop, html[data-dienst="open"] .nav-dienst .nav-link, html[data-dienst="open"] .nav-dienst .nav-menu-knop { color: var(--ink); background: transparent; }
html[data-insp="open"] .nav-insp .nav-menu-knop svg, html[data-dienst="open"] .nav-dienst .nav-menu-knop svg { transform: rotate(180deg); }
@media (pointer: coarse) { .nav-menu-knop { position: relative; } .nav-menu-knop::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); } }

/* Het mega-menu: opaak ivoor (geen backdrop-filter binnen de pill), direct
   onder de balk, met een onzichtbare brug zodat de muis er zonder gat in kan. */
.insp-mega { display: none; position: absolute; z-index: 5; left: -1px; right: -1px; top: calc(100% + 8px); padding: 24px 26px 18px; text-align: left;
  background: var(--nav-ivoor); border: 1px solid var(--nav-rand); border-radius: 22px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(16,24,39,.04), 0 28px 56px -30px rgba(16,24,39,.38);
  transform-origin: 50% 0; }
.insp-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
html[data-insp] .insp-mega { display: block; visibility: hidden; opacity: 0; transform: translate3d(0, -6px, 0) scale(.985); pointer-events: none;
  transition: opacity .16s var(--nav-in), transform .16s var(--nav-in), visibility 0s linear .16s; }
html[data-insp="open"] .insp-mega { visibility: visible; opacity: 1; transform: none; pointer-events: auto;
  transition: opacity .22s var(--nav-uit), transform .26s var(--nav-uit), visibility 0s; }
.insp-mega-kop { display: flex; align-items: baseline; gap: 16px; padding: 0 4px 18px; }
.insp-mega-eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--nav-brons); }
.insp-mega-intro { margin: 0; font-size: 14.5px; color: #4A5466; }
.insp-mega-kaarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.insp-mega-kaart { display: flex; flex-direction: column; height: 100%; padding: 8px 8px 16px; border: 1px solid rgba(16,24,39,.07); border-radius: 18px; background: #fff; color: inherit; text-decoration: none;
  transition: transform .2s var(--nav-uit), border-color .15s ease, box-shadow .2s ease; }
.insp-mega-beeld { display: block; flex: none; aspect-ratio: 16 / 8.4; overflow: hidden; border-radius: 12px; background: #EFEDE8; }
.insp-mega-beeld picture { display: block; width: 100%; height: 100%; }
.insp-mega-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--nav-uit); }
.insp-mega-tekst { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 14px 8px 0; }
.insp-mega-cat { font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--nav-brons); }
.insp-mega-titel { font-size: 15.5px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.insp-mega-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; font-size: 12.5px; color: #5E6878; }
.insp-mega-meta svg, .insp-mega-alle svg { width: 15px; height: 15px; flex: none; color: var(--navy); transition: transform .18s var(--nav-uit); }
@media (hover: hover) {
  .insp-mega-kaart:hover { transform: translate3d(0, -2px, 0); border-color: rgba(16,24,39,.14); box-shadow: 0 14px 30px -22px rgba(16,24,39,.45); }
  .insp-mega-kaart:hover .insp-mega-img { transform: scale(1.035); }
  .insp-mega-kaart:hover .insp-mega-meta svg, .insp-mega-alle:hover svg { transform: translate3d(3px, 0, 0); }
}
.insp-mega-kaart:focus-visible, .insp-mega-alle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--nav-ivoor), 0 0 0 4px var(--navy); }
.insp-mega-voet { display: flex; justify-content: flex-end; margin-top: 16px; padding: 14px 4px 0; border-top: 1px solid var(--nav-rand); }
.insp-mega-alle { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 6px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none; }

/* Offerteknop: navy blijft, met een fijne binnenrand en rustige hover. */
.site-header .kop-offerte { min-height: 44px; padding: 0 18px 0 20px; font-size: 14.5px; font-weight: 550; letter-spacing: -.005em; background: var(--navy); border-color: var(--navy); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px -12px rgba(16,24,39,.7); transition: background-color .15s ease, box-shadow .2s ease, transform .15s ease; }
.site-header .kop-offerte:hover { background: #1B2537; border-color: #1B2537; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 22px -12px rgba(16,24,39,.75); }
.site-header .kop-offerte:focus-visible { box-shadow: 0 0 0 2px var(--nav-ivoor), 0 0 0 4px var(--navy); }
/* Telefoon als rond icoon: het volledige nummer paste niet naast de items in de
   pill (de offerteknop stak er rechts buiten). Nummer staat in label en tooltip. */
.kop-telefoon { align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(16,24,39,.1); border-radius: 999px; color: var(--navy); background: transparent; transition: background-color .15s ease, border-color .15s ease; }
.kop-telefoon:hover { background: rgba(16,24,39,.045); border-color: rgba(16,24,39,.16); }
.kop-telefoon:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--nav-ivoor), 0 0 0 4px var(--navy); }
/* De offerteknop mag op krappere desktopbreedtes zijn korte tekst tonen. */
.kop-cta-kort { display: none; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .kop-telefoon { display: none !important; }
}
/* Krapste desktopbreedte: Mogelijkheden (compact gemarkeerd in navLinks) valt
   uit de balk, zodat alles binnen de pill past. */
@media (min-width: 1024px) and (max-width: 1159px) {
  .nav-inklap { display: none !important; }
}
@media (min-width: 1024px) and (max-width: 1200px) {
  .nav-link { padding: 0 9px; }
  .kop-cta-lang { display: none; }
  .kop-cta-kort { display: inline; }
  .site-nav-binnen { padding-left: 10px; padding-right: 10px; }
  .kop-merk-naam { font-size: 16.5px; }
}
@media (max-width: 1023px) {
  .site-header,
  .site-header.is-stuck {
    padding-top: env(safe-area-inset-top);
    background: rgba(247,247,245,.965);
    border-bottom-color: rgba(16,24,39,.09);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .site-nav { padding-left: max(14px, env(safe-area-inset-left)) !important; padding-right: max(14px, env(safe-area-inset-right)) !important; }
  .site-nav-binnen,
  .site-header.is-stuck .site-nav-binnen {
    height: 72px !important;
    margin-top: 0;
    padding: 0;
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
  }
  .kop-merk { padding-left: 0; }
}
@media (max-width: 359px) {
  .logo-naam { display: none; }
  .site-nav-binnen { gap: 8px !important; }
}

/* Mobiel menu: Inspiratie als uitklaplijst met de drie nieuwste artikelen. */
.mob-insp { border-radius: 12px; }
.mob-insp-kop { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 12px; border-radius: 12px; font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; }
.mob-insp-kop::-webkit-details-marker { display: none; }
.mob-insp-kop:hover { background: rgba(16,24,39,.05); }
.mob-insp-chev { width: 16px; height: 16px; color: #5E6878; transition: transform .2s var(--nav-uit); }
.mob-insp[open] .mob-insp-chev { transform: rotate(180deg); }
.mob-insp-lijst { display: grid; gap: 2px; padding: 2px 0 8px; }
.mob-insp-item { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 6px 12px; border-radius: 12px; color: inherit; text-decoration: none; }
.mob-insp-item:hover { background: rgba(16,24,39,.05); }
.mob-insp-beeld { flex: none; width: 72px; height: 46px; overflow: hidden; border-radius: 9px; background: #EFEDE8; }
.mob-insp-beeld picture { display: block; width: 100%; height: 100%; }
.mob-insp-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mob-insp-cat { display: block; font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--nav-brons); }
.mob-insp-titel { display: block; font-size: 14px; line-height: 1.35; font-weight: 550; color: var(--ink); }
.mob-insp-alle { display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none; }

/* Offerte-drawer (desktop): hetzelfde formulier als in #contact, als paneel
   van rechts. stolk-nav.js zet data-lade op <html>; zonder JS of op mobiel
   blijft de knop gewoon naar #contact springen. */
.lade-kop { display: none; }
/* Iconen in de keuzeknoppen krimpen niet mee als de tekst breed is (smalle drawer). */
.keuze > svg { flex-shrink: 0; }
.lade-overlay { position: fixed; inset: 0; z-index: 85; background: rgba(16, 24, 39, .34); opacity: 0; transition: opacity .26s var(--nav-in); }
.lade-overlay.is-open { opacity: 1; transition: opacity .36s var(--nav-uit); }
@media (min-width: 1024px) {
  /* Scroll blokkeren via body: die geeft zijn overflow door aan de viewport, dus
     de scrollpositie blijft staan (overflow op html zou hem resetten). */
  html.lade-slot body { overflow: hidden; }
  html[data-lade] .offerte-kaart {
    position: fixed !important; z-index: 90; top: 0; right: 0; bottom: 0; width: min(500px, 100vw); margin: 0;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 0 36px 0 !important; border: 0; border-left: 1px solid var(--nav-rand); border-radius: 0;
    background: var(--nav-ivoor); box-shadow: -40px 0 90px -50px rgba(16,24,39,.55) !important;
    transform: translate3d(100%, 0, 0); transition: transform .28s var(--nav-in);
  }
  html[data-lade="open"] .offerte-kaart { transform: none; transition: transform .42s var(--nav-uit); }
  html[data-lade] .offerte-kaart:focus { outline: none; }
  html[data-lade] .lade-kop { display: block; position: sticky; top: 0; z-index: 3; margin: 0 -36px 22px; padding: 26px 36px 18px; background: var(--nav-ivoor); border-bottom: 1px solid var(--nav-rand); }
  .lade-kop-rij { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .lade-titel { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); }
  .lade-titel::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: #B5843D; }
  .lade-sub { margin: 8px 0 0; max-width: 40ch; font-size: 14.5px; line-height: 1.55; color: #4A5466; }
  .lade-sluit { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin-right: -8px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
  .lade-sluit svg { width: 20px; height: 20px; }
  .lade-sluit:hover { background: rgba(16,24,39,.05); border-color: rgba(16,24,39,.08); }
  .lade-sluit:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--nav-ivoor), 0 0 0 4px var(--navy); }
  /* De knoppen van elke stap blijven onderin zichtbaar. */
  html[data-lade] .offerte-kaart .stap-acties { position: sticky; bottom: 0; z-index: 2; margin: 28px -36px 0 !important; padding: 16px 36px 22px !important; background: var(--nav-ivoor); }
  html[data-lade] .offerte-kaart .keuze, html[data-lade] .offerte-kaart input, html[data-lade] .offerte-kaart textarea, html[data-lade] .offerte-kaart select { background-color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-nav-binnen, .nav-link, .nav-insp, .nav-menu-knop svg, .insp-mega, .insp-mega-kaart, .insp-mega-img, .kop-merk-vlak, .lade-overlay { transition: none !important; }
  html[data-lade] .offerte-kaart { transition: none !important; }
  .site-header.is-stuck .site-nav-binnen { transform: none; }
  .nav-link.actief::after { animation: none; }
}

/* ---- Diensten-menu ----
   Drie rustige kolommen (Binnen, Buiten, Zakelijk en advies) en rechts één
   uitgelichte kaart. Zelfde paneel, rand, schaduw en beweging als Inspiratie. */
.dienst-mega { display: none; position: absolute; z-index: 5; left: -1px; right: -1px; top: calc(100% + 8px); padding: 26px 26px 26px 30px; text-align: left;
  background: var(--nav-ivoor); border: 1px solid var(--nav-rand); border-radius: 22px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(16,24,39,.04), 0 28px 56px -30px rgba(16,24,39,.38);
  transform-origin: 50% 0; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; }
.dienst-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
html[data-dienst] .dienst-mega { display: grid; visibility: hidden; opacity: 0; transform: translate3d(0, -6px, 0) scale(.985); pointer-events: none;
  transition: opacity .16s var(--nav-in), transform .16s var(--nav-in), visibility 0s linear .16s; }
html[data-dienst="open"] .dienst-mega { visibility: visible; opacity: 1; transform: none; pointer-events: auto;
  transition: opacity .22s var(--nav-uit), transform .26s var(--nav-uit), visibility 0s; }
.dienst-kolommen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dienst-kolom { padding: 4px 24px 4px 0; }
.dienst-kolom + .dienst-kolom { padding-left: 24px; border-left: 1px solid var(--nav-rand); }
.dienst-eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--nav-brons); }
.dienst-bij { min-height: 3em; margin: 7px 0 12px; max-width: 30ch; font-size: 13px; line-height: 1.5; color: #5E6878; }
.dienst-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.dienst-link { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; margin-left: -10px; padding: 0 10px; border-radius: 10px;
  font-size: 15px; font-weight: 500; letter-spacing: -.005em; color: #2E3747; text-decoration: none; transition: color .15s ease, background-color .15s ease; }
.dienst-link span { transition: transform .18s var(--nav-uit); }
.dienst-link svg { width: 15px; height: 15px; flex: none; color: var(--navy); opacity: 0; transform: translate3d(-4px, 0, 0); transition: opacity .15s ease, transform .18s var(--nav-uit); }
.dienst-link[aria-current="page"] { color: var(--ink); font-weight: 600; background: rgba(16,24,39,.045); }
.dienst-link[aria-current="page"] svg { opacity: 1; transform: none; }
@media (hover: hover) {
  .dienst-link:hover { color: var(--ink); background: rgba(16,24,39,.035); }
  .dienst-link:hover span { transform: translate3d(3px, 0, 0); }
  .dienst-link:hover svg { opacity: 1; transform: none; }
}
.dienst-link:focus-visible { outline: none; color: var(--ink); box-shadow: 0 0 0 2px var(--nav-ivoor), 0 0 0 4px var(--navy); }
.dienst-link:focus-visible svg { opacity: 1; transform: none; }
.dienst-uitgelicht { display: flex; flex-direction: column; padding: 8px 8px 16px; border: 1px solid rgba(16,24,39,.07); border-radius: 18px; background: #fff; }
.dienst-uitgelicht-beeld { position: relative; display: block; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 12px; background: #EFEDE8; }
.dienst-uitgelicht-beeld picture, .dienst-uitgelicht-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dienst-sfeer { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(250,248,244,.92); font-size: 10.5px; font-weight: 600; color: #3B4556; }
.dienst-uitgelicht-titel { margin: 14px 10px 0; font-size: 16px; font-weight: 650; letter-spacing: -.015em; color: var(--ink); }
.dienst-uitgelicht-tekst { margin: 6px 10px 0; font-size: 13.5px; line-height: 1.55; color: #4A5466; }
.dienst-uitgelicht-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 14px 10px 0; }
.dienst-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 550; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12); transition: background-color .15s ease; }
.dienst-cta svg { width: 15px; height: 15px; transition: transform .18s var(--nav-uit); }
.dienst-cta:hover { background: #1B2537; }
.dienst-cta:hover svg { transform: translate3d(3px, 0, 0); }
.dienst-cta-stil { display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px; font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: underline; text-decoration-color: rgba(16,24,39,.25); text-underline-offset: 4px; transition: text-decoration-color .15s ease; }
.dienst-cta-stil:hover { text-decoration-color: var(--navy); }
.dienst-cta:focus-visible, .dienst-cta-stil:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--nav-ivoor), 0 0 0 4px var(--navy); border-radius: 999px; }
@media (min-width: 1024px) and (max-width: 1199px) {
  .dienst-mega { grid-template-columns: minmax(0, 1fr) 236px; gap: 22px; padding: 22px; }
  .dienst-kolom { padding-right: 16px; }
  .dienst-kolom + .dienst-kolom { padding-left: 16px; }
  .dienst-bij { display: none; }
  .dienst-uitgelicht-acties { flex-direction: column; align-items: flex-start; }
  .dienst-link { font-size: 14px; }
}

/* Mobiel: Diensten als uitklaplijst, per groep. */
.mob-dienst-lijst { display: grid; padding: 0 0 8px; }
.mob-dienst-groep { margin: 10px 0 2px; padding: 0 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nav-brons); }
.mob-dienst-link { display: flex; align-items: center; min-height: 44px; padding: 0 12px 0 24px; border-radius: 12px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; }
.mob-dienst-link:hover { background: rgba(16,24,39,.05); }
.mob-dienst-link[aria-current="page"] { font-weight: 650; background: rgba(16,24,39,.05); }

/* ---- Header van de statische pagina's (Inspiratie, artikelen, diensten) ----
   Zelfde componenten als de homepage, maar zonder Tailwind en dc-runtime. */
.snav-kop { position: sticky; top: 0; z-index: 50; font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); }
.snav { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.snav-balk { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.snav-items, .snav-acties { display: none; }
.snav-mobiel { display: flex; align-items: center; gap: 4px; }
.snav-acties .kop-telefoon { display: none; }
.kop-merk { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.snav-kop .nav-link { text-decoration: none; }
.snav-kop .kop-offerte { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--navy); border-radius: 999px; text-decoration: none; white-space: nowrap; }
.snav-kop .kop-offerte svg { width: 16px; height: 16px; transition: transform .18s var(--nav-uit); }
.snav-kop .kop-offerte:hover svg { transform: translate3d(3px, 0, 0); }
.kop-offerte-mob { min-height: 44px; padding: 0 16px !important; font-size: 14px !important; }
.snav-menuknop { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--navy); cursor: pointer; }
.snav-menuknop svg { width: 24px; height: 24px; }
.snav-menuknop .snav-ico-dicht, .snav-menuknop[aria-expanded="true"] .snav-ico-open { display: none; }
.snav-menuknop[aria-expanded="true"] .snav-ico-dicht { display: inline-flex; }
.snav-menuknop:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); }
.kop-telefoon svg { width: 18px; height: 18px; }
.snav-menu { padding: 8px 0 20px; max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
.snav-menu[hidden] { display: none; }
.snav-menu-kaart { padding: 12px; border: 1px solid var(--line, rgba(16,24,39,.1)); border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(16,24,39,.04), 0 14px 34px -14px rgba(16,24,39,.16); }
.snav-menu .mob-groep { margin-top: 10px; }
.snav-menu .mob-groep:first-child { margin-top: 0; }
.snav-mob-link { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 12px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; }
.snav-mob-link:hover { background: rgba(16,24,39,.05); }
.snav-mob-offerte { font-weight: 650; background: var(--warm, #F3F0EA); }
@media (min-width: 1024px) {
  .snav { padding: 0 32px; }
  .snav-items { display: flex; align-items: center; }
  .snav-acties { display: flex; align-items: center; gap: 8px; }
  .snav-mobiel, .snav-menu { display: none !important; }
}
@media (min-width: 1280px) { .snav-acties .kop-telefoon { display: inline-flex; } }
@media (max-width: 1023px) {
  .snav-kop { background: rgba(247,247,245,.965); border-bottom: 1px solid rgba(16,24,39,.09); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding-top: env(safe-area-inset-top); }
  .snav { padding: 0 max(14px, env(safe-area-inset-left)); }
}
@media (max-width: 359px) { .snav-kop .kop-merk-naam { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .dienst-mega, .dienst-link, .dienst-link span, .dienst-link svg, .dienst-cta svg, .nav-dienst { transition: none !important; }
}

/* Focusringen in de header overal gelijk (de statische pagina's hebben een
   algemene a:focus-visible-regel met een andere ronding). */
.site-header .nav-link:focus-visible, .site-header .nav-menu-knop:focus-visible, .site-header .kop-merk:focus-visible,
.site-header .dienst-link:focus-visible, .site-header .insp-mega-kaart:focus-visible, .site-header .insp-mega-alle:focus-visible,
.site-header .kop-telefoon:focus-visible, .site-header .kop-offerte:focus-visible, .site-header .dienst-cta:focus-visible, .site-header .dienst-cta-stil:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--nav-ivoor), 0 0 0 4px var(--navy);
}
.site-header .nav-link:focus-visible { border-radius: 11px; }
.site-header .nav-menu-knop:focus-visible { border-radius: 9px; }
.site-header .kop-merk:focus-visible { border-radius: 14px; }
.site-header .dienst-link:focus-visible { border-radius: 10px; }
.site-header .insp-mega-kaart:focus-visible { border-radius: 18px; }
.site-header .insp-mega-alle:focus-visible { border-radius: 9px; }
.site-header .kop-telefoon:focus-visible, .site-header .kop-offerte:focus-visible, .site-header .dienst-cta:focus-visible, .site-header .dienst-cta-stil:focus-visible { border-radius: 999px; }