/* Sitebrede verfijning (11 okt 2026), afgeleid van de Google Ads-pagina.
   Wordt door alle pagina's als laatste geladen. Zie verbeterplan-paginas-google-ads-standaard.html (S1–S8, S10).
   Lichte vlakken: .s-white/.s-grey (dienstpagina's), .p-white/.p-grey (home), heroes en het casedocument. */

/* S2 · Koppen in burgundy op lichte vlakken; op paars en burgundy blijven ze wit. */
.hero-copy h1,.ga-hero h1,
.s-white h1,.s-white h2,.s-grey h1,.s-grey h2,
.p-white h2,.p-grey h2,
.cd-doc h1,.cd-doc h2,
.s-white .cbox-kop,.s-grey .cbox-kop,.p-white .cbox-kop,.p-grey .cbox-kop,.ww-sub{color:var(--burgundy);}

/* S3 · Bodytekst op lichte vlakken vol maroon, zonder doorzichtigheid. */
.hero-copy p.body,.s-white p.body,.s-grey p.body,.p-white p.body,.p-grey p.body{opacity:1;color:var(--maroon);}

/* S4 · Eén kleur per functie: limegroen = hoofdactie, burgundy = tweede actie. */
.btn.purple{background:var(--lime);color:var(--maroon);}
.btn.purple:hover{background:color-mix(in oklch,var(--lime) 84%,var(--white));color:var(--maroon);}
.btn.alt{background:var(--burgundy);color:#fff;border:0;}
.btn.alt:hover{background:var(--maroon);color:#fff;}
html body nav .nav-links a.nav-cta{background:var(--lime);color:var(--maroon);border:0;padding:11px 20px;}
html body nav .nav-links a.nav-cta:hover{background:var(--maroon);color:var(--white);}

/* S5 · Eén reviewstijl: sterren en initialen in huisstijl (het Google-logo blijft als bronvermelding). */
.gstars,.pc-stars,.review-stars,.grev .rs{color:var(--purple);}
.gav{background:var(--purple-ink)!important;color:#fff;}
.pc-quotes blockquote{opacity:1;}

/* S7 · Bewijsregel onder de heroknop (zelfde vorm als op Google Ads). */
.ga-proof{display:block;margin-top:14px;font-size:14px;line-height:1.45;max-width:440px;color:var(--maroon);}
.ga-proof-stars{color:var(--purple);letter-spacing:1px;font-size:13px;margin-right:8px;white-space:nowrap;}
.ga-proof b{font-weight:800;}
.ga-proof-name{color:color-mix(in srgb,var(--maroon) 62%,var(--white));white-space:nowrap;}

/* S8 · Kaarten zonder gekleurde linkerrand: dezelfde kaart, rustiger rand rondom. */
.cbox,.p-grey .cbox,.p-white .cbox{border-left:1px solid rgba(25,0,0,.08);}
.s-purple .cbox,.p-purple .cbox{border-left:1px solid rgba(255,255,255,.12);}

/* Homepage hiërarchie (11 okt 2026), vormgeving volgens homepage-concept-hierarchie.html. */
.hl{background:linear-gradient(180deg,transparent 62%,var(--lime) 62%);padding:0 3px;}

/* Bewijs: reviews en case naast elkaar */
.home-proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;margin-top:32px;align-items:stretch;}
.hp-card{background:#fff;border:1px solid rgba(25,0,0,.08);border-radius:18px;padding:30px 32px;box-shadow:0 30px 70px -50px rgba(25,0,0,.45);display:flex;flex-direction:column;}
.hp-score{display:flex;align-items:baseline;gap:14px;}
.hp-score b{font-size:clamp(48px,5vw,60px);font-weight:900;letter-spacing:-.04em;line-height:.9;color:var(--maroon);}
.hp-stars{color:var(--purple);letter-spacing:3px;font-size:18px;}
.hp-src{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:14px;color:color-mix(in srgb,var(--maroon) 62%,var(--white));}
.hp-quote{margin:20px 0 0;padding-top:18px;border-top:1px solid rgba(25,0,0,.08);font-size:16px;line-height:1.55;font-weight:600;color:var(--maroon);}
.hp-quote cite{display:block;margin-top:8px;font-style:normal;font-size:13.5px;font-weight:700;color:color-mix(in srgb,var(--maroon) 62%,var(--white));}
.hp-case{border-top:4px solid var(--purple);}
.hp-case .eyebrow{margin-bottom:8px;}
.hp-case .home-case-kop{font-size:clamp(26px,2.6vw,34px);line-height:1.08;margin:0;color:var(--burgundy);}
.hp-case .case-stats{margin:22px 0 14px;}
.hp-case .case-btn{margin-top:auto;align-self:flex-start;}
.hp-case .case-fine{margin:0 0 24px;}
@media(max-width:900px){.home-proof{grid-template-columns:minmax(0,1fr);}.hp-card{padding:24px 22px;}}

/* Samenwerking: tekst links zonder kaart, drie afspraken als losse kaarten rechts */
.home-samen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start;}
.home-samen .hs-txt .p-title{margin-bottom:22px;}
.home-samen .partnership-lead{font-size:clamp(19px,1.7vw,22px);font-weight:800;line-height:1.4;margin-bottom:14px;}
.home-samen .hs-txt p.body{font-size:17px;line-height:1.65;max-width:540px;}
.home-samen .more{display:inline-flex;margin-top:18px;}
.hs-afspraken .eyebrow{margin-bottom:14px;}
.hs-list{display:grid;gap:12px;background:none;border:0;box-shadow:none;padding:0;max-width:none;}
.hs-list .hs-card{background:#fff;border:1px solid rgba(25,0,0,.08);border-radius:16px;padding:20px 22px;margin:0;box-shadow:0 24px 50px -40px rgba(25,0,0,.4);}
.hs-list .hs-card h3{color:var(--burgundy);}
@media(max-width:900px){.home-samen{grid-template-columns:minmax(0,1fr);}}
.hs-list{margin-top:0;}
.hs-list .usp p{opacity:1;color:var(--maroon);}
.hs-list .hs-card{grid-template-columns:34px minmax(0,1fr);gap:12px;}
.home-samen .partnership-lead{text-wrap:balance;}

/* Dienstenkaarten in glasstijl (11 okt 2026), naar voorbeeld van de NIKA-tabs op Google Ads:
   paars vlak, kaarten van wit glas, wit lettertype, limegroen alleen als accent. */
html #aanpak.glass-diensten .p-title{color:#fff;}
html #aanpak .svc-grid{gap:20px;}
html #aanpak .svc-door,html #aanpak .svc-door.web{
  --service-ink:#fff;
  background:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.3);border-radius:22px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 30px 60px -40px rgba(25,0,0,.55);
  padding:18px 18px 26px;min-height:0;display:flex;flex-direction:column;
  transition:transform .25s,background .25s,border-color .25s;
}
html #aanpak .svc-door::before,html #aanpak .svc-door.web::before{display:none;}
html #aanpak .svc-door:hover,html #aanpak .svc-door:focus-visible{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.55);transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 34px 60px -36px rgba(25,0,0,.6);}
html #aanpak .svc-door:focus-visible{outline:3px solid var(--lime);outline-offset:4px;}
/* beeld als ingelijst venster bovenin de kaart */
html #aanpak .svc-door .service-visual,html #aanpak .svc-door.web .service-visual{
  position:relative;inset:auto;z-index:auto;display:block;height:220px;margin:0 0 22px;
  border-radius:14px;overflow:hidden;background:var(--white);
  -webkit-mask-image:none;mask-image:none;box-shadow:0 18px 40px -26px rgba(25,0,0,.6);
}
html #aanpak .svc-door .service-visual img,html #aanpak .svc-door.web .service-visual img{
  position:absolute;inset:0;width:100%;height:100%;top:0;left:0;object-fit:cover;object-position:50% 0;
  transform:none;border:0;border-radius:0;box-shadow:none;max-width:none;
}
html #aanpak .svc-door.web .service-visual img{object-position:50% 40%;}
/* tekst */
html #aanpak .svc-door > :not(.service-visual){padding:0 10px;}
html #aanpak .svc-door .sd-no,html #aanpak .svc-door.web .sd-no{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin:0 10px;padding:6px 12px;
  background:rgba(25,0,0,.25);border:1px solid rgba(255,255,255,.25);border-radius:999px;
  color:#fff;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
html #aanpak .svc-door .sd-no::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);}
html #aanpak .svc-door h3,html #aanpak .svc-door.ads h3,html #aanpak .svc-door.web h3{color:#fff;text-shadow:none;margin:16px 0 6px;font-size:clamp(34px,3.6vw,48px);line-height:1.04;}
html #aanpak .svc-door .svc-kop,html #aanpak .svc-door p,html #aanpak .svc-door.web p,html #aanpak .svc-door strong{color:#fff;opacity:1;}
html #aanpak .svc-door .svc-kop{font-size:19px;font-weight:800;margin-bottom:10px;}
html #aanpak .svc-door .service-terms{margin:16px 10px 22px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22);font-size:14px;}
/* knop: wit glas, limegroen bij hover */
html #aanpak .svc-door .more,html #aanpak .svc-door.web .more{
  margin:auto 10px 0;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;width:auto;
  min-height:48px;padding:13px 20px;border:0;border-radius:8px;background:#fff;color:var(--maroon);
  font-size:15px;font-weight:800;box-shadow:none;transition:background .2s,color .2s;
}
html #aanpak .svc-door .more::after{content:"→";font-size:16px;}
html #aanpak .svc-door:hover .more,html #aanpak .svc-door:focus-visible .more{background:var(--lime);color:var(--maroon);box-shadow:none;}
@media(max-width:700px){html #aanpak .svc-door .service-visual{height:170px;}html #aanpak .svc-door h3{font-size:34px;}}
@media(prefers-reduced-motion:reduce){html #aanpak .svc-door{transition:none;}html #aanpak .svc-door:hover{transform:none;}}
html #stack .pw:first-child #aanpak.glass-diensten{background:var(--purple);color:#fff;}
/* overgang hero → paarse dienstensectie: voorste wolkenlaag in paars, zodat er geen witte band ontstaat */
html body:has(#aanpak.glass-diensten) #heroClouds .hc-front{color:var(--purple);}
/* contrast: lime op glas is te zwak voor kleine tekst; vet wit met een lime stip */
html #aanpak .svc-door .service-terms strong{color:#fff;}
html #aanpak .svc-door .service-terms strong::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);margin-right:8px;vertical-align:2px;}
/* Ruimte dienstensectie: de hero-wolken eindigen boven deze sectie, dus de oude 170px bovenruimte (bedoeld voor wolken over een wit vlak) is hier te veel.
   Onder moet de ruimte de wolkenrand van de volgende sectie (118px overlap) opvangen. Beide schalen mee met de schermhoogte. */
html #stack .pw:first-child #aanpak.glass-diensten{align-items:center;}
html #stack .pw:first-child #aanpak.glass-diensten .pinner{padding-top:clamp(104px,12vh,150px);padding-bottom:calc(118px + clamp(80px,10vh,130px));}
@media(max-width:900px){html #stack .pw:first-child #aanpak.glass-diensten .pinner{padding-top:72px;padding-bottom:calc(66px + 56px);}}
@media(max-width:700px){html #stack .pw:first-child #aanpak.glass-diensten .pinner{padding-top:64px;padding-bottom:calc(64px + 48px);}}
/* Menuknop: ook als het menu op een donker/paars vlak staat (nav.on-dark/.commit) blijft de tekst maroon op lime. */
html body nav.on-dark .nav-links a.nav-cta,html body nav.commit .nav-links a.nav-cta{background:var(--lime);color:var(--maroon);}
html body nav.on-dark .nav-links a.nav-cta:hover,html body nav.commit .nav-links a.nav-cta:hover{background:var(--maroon);color:var(--white);}

/* Contactformulier op touchscreens (15 okt 2026): één scrollvlak (de overlay) in plaats van een scrollende kaart
   in een vaste overlay, en geen inschuif-transform. Voorkomt dat iOS Safari met toetsenbord open tik- en
   invoerposities verschuift. Decoratieve sterren vangen geen tikken. */
.pf-stars,.pf-stars i{pointer-events:none}
.pf-card h3:focus{outline:none}
@media (pointer:coarse),(max-width:900px){
  .pf-ov{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;align-items:flex-start}
  .pf-card{max-height:none;overflow:visible;margin:auto 0;transform:none!important;transition:none}
}