/* ss-navy-force.css — last-wins navy+cyan + hero readability 20260924j */
:root{
  --ss-navy:#202860;
  --ss-navy-deep:#161c48;
  --ss-cyan:#78c8e0;
  --accent:#eef3fb;
  --accent-hover:#202860;
  --gold:#202860;
  --goud:#202860;
}

html body .btn-cta,
html body a.btn-cta,
html body .btn-primary,
html body a.btn-primary,
html body .hero .btn,
html body header .btn,
html body .site-header .btn,
html body a.btn[href*="advies"],
html body .cta-btn,
html body button.btn-cta{
  background:linear-gradient(180deg,#24306e 0%,#202860 55%,#161c48 100%) !important;
  background-color:#202860 !important;
  color:#fff !important;
  border-color:#161c48 !important;
}

html body .hero-overlay,
.hero-overlay{
  background:
    radial-gradient(ellipse 72% 68% at 50% 42%, rgba(8,12,28,.82) 0%, rgba(15,23,42,.88) 42%, rgba(15,23,42,.94) 72%, #0a1020 100%) !important;
}

html body .hero-bg-img,
.hero-bg-img{
  filter:saturate(.88) contrast(1.04) brightness(.58) !important;
}

html body .hero-content,
.hero-content{
  position:relative;
  z-index:2;
  text-shadow:0 2px 28px rgba(0,0,0,.75),0 1px 6px rgba(0,0,0,.55) !important;
}
html body .hero-content::before{
  content:"";
  position:absolute;
  inset:-2.5rem -3rem;
  background:radial-gradient(ellipse 70% 60% at 50% 45%, rgba(8,12,28,.55) 0%, rgba(8,12,28,.22) 55%, transparent 78%);
  z-index:-1;
  pointer-events:none;
  border-radius:24px;
}
html body .hero-content h1,
.hero-content h1{
  color:#fff !important;
  text-shadow:0 2px 32px rgba(0,0,0,.8),0 1px 4px rgba(0,0,0,.6) !important;
}
html body .hero-content p,
.hero-content p{
  color:rgba(255,255,255,.95) !important;
  text-shadow:0 1px 18px rgba(0,0,0,.65) !important;
}

/* kill leftover gold accents */
html body [style*="C4873B"],
html body [style*="c4873b"],
html body [style*="B8860B"],
html body [style*="b8860b"]{
  /* remapped by attribute rules below when bg/color present */
}
html body [style*="background:#C4873B"],
html body [style*="background: #C4873B"],
html body [style*="background:#c4873b"]{
  background:#202860 !important;
  background-color:#202860 !important;
  color:#fff !important;
}
html body [style*="color:#C4873B"],
html body [style*="color: #C4873B"],
html body [style*="color:#c4873b"]{
  color:#202860 !important;
}

/* ── Logo groot + animatie in header (20260924k) ── */
html{ --header-height:108px; }
html body .site-header,
html body header.site-header{
  height:108px !important;
  background:#fff !important;
}
html body .site-header.scrolled,
html body header.site-header.scrolled,
html body header.site-header.ss-scrolled{
  height:88px !important;
}
html body .logo-link{
  position:relative;
  display:flex !important;
  align-items:center !important;
  overflow:visible !important;
  animation:ssLogoIn .9s cubic-bezier(.22,1,.36,1) both;
}
html body .logo,
html body .logo-link img.logo,
html body .logo-link img{
  height:76px !important;
  width:auto !important;
  max-height:76px !important;
  object-fit:contain !important;
  transform-origin:left center;
  filter:drop-shadow(0 4px 14px rgba(22,28,72,.14));
  transition:height .28s ease, filter .28s ease, transform .28s ease;
}
html body .site-header.scrolled .logo,
html body .site-header.scrolled .logo-link img,
html body header.site-header.ss-scrolled .logo{
  height:60px !important;
  max-height:60px !important;
}
html body .logo-link:hover .logo,
html body .logo-link:hover img{
  transform:scale(1.045);
  filter:drop-shadow(0 8px 20px rgba(74,168,200,.32));
}
html body .logo-link::after{
  content:"";
  position:absolute;
  inset:-8px -16px;
  pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.7) 50%, transparent 62%);
  transform:translateX(-130%);
  animation:ssLogoShine 1.55s ease .35s both;
}
@keyframes ssLogoIn{
  from{opacity:0; transform:translateX(-22px) scale(.82)}
  to{opacity:1; transform:none}
}
@keyframes ssLogoShine{
  to{transform:translateX(130%)}
}
html body .hero-content{ padding-top:118px !important; }
@media (max-width:1023px){
  html{ --header-height:80px; }
  html body .site-header, html body header.site-header{ height:80px !important; }
  html body .logo, html body .logo-link img.logo, html body .logo-link img{
    height:56px !important; max-height:56px !important;
  }
  html body .hero-content{ padding-top:92px !important; }
}
@media (max-width:767px){
  html{ --header-height:72px; }
  html body .site-header, html body header.site-header{ height:72px !important; }
  html body .logo, html body .logo-link img.logo, html body .logo-link img{
    height:48px !important; max-height:48px !important;
  }
}
@media (prefers-reduced-motion:reduce){
  html body .logo-link, html body .logo-link::after{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}

html body .hero-highlight,
.hero-highlight{
  color:#78c8e0 !important;
  -webkit-text-fill-color:#78c8e0 !important;
  background:none !important;
  background-image:none !important;
  text-shadow:0 2px 24px rgba(0,0,0,.7),0 0 1px rgba(0,0,0,.5) !important;
}
/* ── 20260924x: origineel logo + S-helften + leesbare werkwijze ── */
html body .logo-link .logo-svg,
html body svg.logo-svg{
  display:block;
  height:68px;
  width:auto;
  overflow:visible;
}
html body .site-header.scrolled .logo-svg,
html body header.site-header.ss-scrolled .logo-svg{
  height:54px;
}
html body .logo-svg .ss-s-top{
  transform-box:fill-box;
  transform-origin:50% 80%;
  animation:ssSFromTop .95s cubic-bezier(.22,1,.36,1) both;
}
html body .logo-svg .ss-s-bot{
  transform-box:fill-box;
  transform-origin:50% 20%;
  animation:ssSFromBot .95s cubic-bezier(.22,1,.36,1) .16s both;
}
@keyframes ssSFromTop{
  from{opacity:0; transform:translateY(-36px)}
  to{opacity:1; transform:none}
}
@keyframes ssSFromBot{
  from{opacity:0; transform:translateY(36px)}
  to{opacity:1; transform:none}
}

/* Fade-in mag tekst nooit verbergen (wit-op-wit / lege pagina) */
html body .fade-in,
html body .stagger-item,
html body .timeline-item,
html body .timeline-item.fade-in{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

html body .werkwijze-timeline,
html body .timeline,
html body .timeline-content{
  background:#fff !important;
  color:#0f172a !important;
}
html body .timeline-content h2,
html body .timeline-content h3,
html body .werkwijze-timeline h2{
  color:#161c48 !important;
}
html body .timeline-content p,
html body .timeline-content li,
html body .werkwijze-timeline p,
html body .werkwijze-timeline li{
  color:#334155 !important;
}
html body .timeline-number{
  background:linear-gradient(135deg,#161c48,#202860) !important;
  color:#fff !important;
}

html body .werkwijze-section,
html body .werkwijze-inner,
html body .werkwijze-card{
  color:#0f172a !important;
}
html body .werkwijze-card h3,
html body .werkwijze-section h2{
  color:#161c48 !important;
  background:none !important;
}
html body .werkwijze-card li,
html body .werkwijze-card p,
html body .werkwijze-section p{
  color:#334155 !important;
  background:none !important;
}
html body .werkwijze-icon{
  width:64px !important;
  height:64px !important;
  max-width:64px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#161c48,#202860) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 auto 14px !important;
}
html body .werkwijze-icon svg{
  stroke:#fff !important;
  color:#fff !important;
  background:none !important;
  width:28px !important;
  height:28px !important;
}

/* Lichte secties: navy tekst, nooit wit */
html body .solutions-section,
html body .voordelen-section,
html body .faq-section,
html body .reviews-section,
html body .ba-section,
html body .projecten-home,
html body .trust-section,
html body .problem-solution-section,
html body .about-section{
  color:#0f172a !important;
}
html body .solutions-section h2,
html body .solutions-section h3,
html body .voordelen-section h2,
html body .voordelen-section h3,
html body .faq-section h2,
html body .faq-section h3,
html body .reviews-section h2,
html body .about-section h2,
html body .about-section h3{
  color:#161c48 !important;
}
html body .solutions-section p,
html body .voordelen-section p,
html body .faq-section p,
html body .reviews-section p,
html body .about-section p{
  color:#334155 !important;
}

@media (max-width:1023px){
  html body .logo-link .logo-svg,
  html body svg.logo-svg{ height:52px; }
}
@media (max-width:767px){
  html body .logo-link .logo-svg,
  html body svg.logo-svg{ height:44px; }
}
@media (prefers-reduced-motion:reduce){
  html body .logo-svg .ss-s-top,
  html body .logo-svg .ss-s-bot{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

html body .logo-link{ animation:none !important; }
html body .logo-link::after{ content:none !important; display:none !important; }

/* ── 20260924z: orig PNG lockup — navy SANISAFE, cyan S halves ── */
html body .logo-link,
html body .logo,
html body .header-inner,
html body .site-header{
  overflow:visible !important;
}
html body .logo-link{ animation:none !important; }
html body .logo-link::after{ content:none !important; display:none !important; }
html body .logo-link .logo-svg,
html body svg.logo-svg{
  display:block;
  height:72px;
  width:auto;
  overflow:visible;
}
html body .site-header.scrolled .logo-svg,
html body header.site-header.ss-scrolled .logo-svg{
  height:56px;
}
html body .logo-svg .cls-2,
html body .logo-svg .cls-4,
html body .logo-svg .cls-6,
html body .logo-svg .cls-7,
html body .logo-svg .cls-8{
  fill:#202860 !important;
}
html body .logo-svg .cls-1{
  fill:#4aa8c8 !important;
}
html body .logo-svg .cls-3,
html body .logo-svg .cls-5,
html body .logo-svg .ss-s-top,
html body .logo-svg .ss-s-bot{
  fill:#7dd3ea !important;
}
html body .logo-svg .ss-s-top{
  transform-box:fill-box;
  transform-origin:50% 100%;
  animation:ssSFromTop 1.05s cubic-bezier(.22,1,.36,1) both;
}
html body .logo-svg .ss-s-bot{
  transform-box:fill-box;
  transform-origin:50% 0%;
  animation:ssSFromBot 1.05s cubic-bezier(.22,1,.36,1) .18s both;
}
@keyframes ssSFromTop{
  from{opacity:0; transform:translateY(-52px)}
  to{opacity:1; transform:none}
}
@keyframes ssSFromBot{
  from{opacity:0; transform:translateY(52px)}
  to{opacity:1; transform:none}
}

html body .fade-in,
html body .stagger-item,
html body .timeline-item,
html body .timeline-item.fade-in,
html body .hero-fade{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

html body .werkwijze-timeline,
html body .timeline,
html body .timeline-content,
html body .page-content:not(.page-hero){
  background:#fff !important;
  color:#0f172a !important;
}
html body .timeline-content h2,
html body .timeline-content h3,
html body .werkwijze-timeline h2{
  color:#161c48 !important;
}
html body .timeline-content p,
html body .timeline-content li,
html body .werkwijze-timeline p,
html body .werkwijze-timeline li{
  color:#334155 !important;
}
html body .timeline-number{
  background:linear-gradient(135deg,#161c48,#202860) !important;
  color:#fff !important;
}
html body .werkwijze-section,
html body .werkwijze-inner,
html body .werkwijze-card{
  color:#0f172a !important;
}
html body .werkwijze-card h3,
html body .werkwijze-section h2{
  color:#161c48 !important;
  background:none !important;
}
html body .werkwijze-card li,
html body .werkwijze-card p,
html body .werkwijze-section p{
  color:#334155 !important;
  background:none !important;
}
html body .werkwijze-icon{
  width:64px !important;
  height:64px !important;
  max-width:64px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#161c48,#202860) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 auto 14px !important;
}
html body .werkwijze-icon svg{
  stroke:#fff !important;
  color:#fff !important;
  background:none !important;
  width:28px !important;
  height:28px !important;
}

@media (max-width:1023px){
  html body .logo-link .logo-svg,
  html body svg.logo-svg{ height:54px; }
}
@media (max-width:767px){
  html body .logo-link .logo-svg,
  html body svg.logo-svg{ height:46px; }
}
@media (prefers-reduced-motion:reduce){
  html body .logo-svg .ss-s-top,
  html body .logo-svg .ss-s-bot{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}
/* ── 20260924aa: orig lockup + dark-band contrast + S/orbs ── */

html body .logo-link,
html body .logo,
html body .header-inner,
html body .site-header{
  overflow:visible !important;
}
html body .logo-link{ animation:none !important; }
html body .logo-link::after{ content:none !important; display:none !important; }
html body .logo-link .logo-svg,
html body svg.logo-svg{
  display:block;
  height:80px;
  width:auto;
  overflow:visible;
  shape-rendering:geometricPrecision;
}
html body .site-header.scrolled .logo-svg,
html body header.site-header.ss-scrolled .logo-svg{
  height:58px;
}
html body .logo-svg .cls-2,
html body .logo-svg .cls-4,
html body .logo-svg .cls-6,
html body .logo-svg .cls-7,
html body .logo-svg .cls-8{
  fill:#202860 !important;
}
html body .logo-svg .cls-1{
  fill:#4aa8c8 !important;
}
html body .logo-svg .cls-3,
html body .logo-svg .cls-5,
html body .logo-svg .ss-s-top,
html body .logo-svg .ss-s-bot{
  fill:#7dd3ea !important;
}
html body .logo-svg .ss-s-top{
  transform-box:fill-box;
  transform-origin:50% 100%;
  animation:ssSFromTop 1.05s cubic-bezier(.22,1,.36,1) both;
}
html body .logo-svg .ss-s-bot{
  transform-box:fill-box;
  transform-origin:50% 0%;
  animation:ssSFromBot 1.05s cubic-bezier(.22,1,.36,1) .18s both;
}
@keyframes ssSFromTop{
  from{opacity:0; transform:translateY(-42px)}
  to{opacity:1; transform:none}
}
@keyframes ssSFromBot{
  from{opacity:0; transform:translateY(42px)}
  to{opacity:1; transform:none}
}

/* Hero half-circles sit in the hero, not under the header */
html body .hero{
  overflow:hidden !important;
}
html body .hero::before,
html body .hero::after{
  z-index:1 !important;
  border:12px solid rgba(125,211,234,.55) !important;
  background:radial-gradient(circle at 30% 30%, rgba(125,211,234,.35), transparent 70%) !important;
}
html body .hero::before{
  top:14% !important;
  left:-10% !important;
  clip-path:inset(0 0 50% 0) !important;
}
html body .hero::after{
  bottom:6% !important;
  right:-10% !important;
  clip-path:inset(50% 0 0 0) !important;
}

html body .fade-in,
html body .stagger-item,
html body .timeline-item,
html body .timeline-item.fade-in{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

/* Dark bands: white text, never navy/slate from global h2/p */
html body .pricing-block,
html body .garantie-section,
html body .lead-form-section,
html body .page-hero,
html body .cta-section,
html body .hero,
html body .site-footer{
  color:#fff !important;
}
html body .pricing-block,
html body .garantie-section{
  background:linear-gradient(135deg,#161c48 0%,#202860 100%) !important;
}
html body .pricing-block .section-header,
html body .garantie-section .section-header,
html body .lead-form-section .section-header,
html body .cta-section .section-header{
  background:transparent !important;
}
html body .pricing-block h2,
html body .pricing-block h3,
html body .pricing-block .pricing-from,
html body .pricing-block .pricing-price,
html body .pricing-block .pricing-label,
html body .pricing-block li,
html body .pricing-block p,
html body .pricing-note,
html body .garantie-section h2,
html body .garantie-section h3,
html body .garantie-section p,
html body .garantie-section .section-header p,
html body .garantie-card h3,
html body .garantie-card p,
html body .lead-form-section h2,
html body .lead-form-section p,
html body .page-hero h1,
html body .page-hero p,
html body .cta-section h2,
html body .cta-section p{
  color:#fff !important;
  background:none !important;
  -webkit-text-fill-color:#fff !important;
}
html body .garantie-section .section-header p,
html body .pricing-note,
html body .garantie-card p{
  color:rgba(255,255,255,.86) !important;
  -webkit-text-fill-color:rgba(255,255,255,.86) !important;
}
html body .pricing-includes svg{
  stroke:#7dd3ea !important;
}
html body .garantie-badge{
  color:#fff !important;
}

/* Light bands stay navy */
html body .werkwijze-section,
html body .werkwijze-timeline,
html body .timeline,
html body .timeline-content,
html body .solutions-section,
html body .voordelen-section,
html body .faq-section,
html body .reviews-section{
  color:#0f172a !important;
}
html body .werkwijze-section h2,
html body .werkwijze-card h3,
html body .timeline-content h2,
html body .solutions-section h2,
html body .solutions-section h3{
  color:#161c48 !important;
  -webkit-text-fill-color:#161c48 !important;
}
html body .werkwijze-section p,
html body .werkwijze-card li,
html body .werkwijze-card p,
html body .timeline-content p,
html body .timeline-content li{
  color:#334155 !important;
  -webkit-text-fill-color:#334155 !important;
}
html body .werkwijze-icon{
  width:64px !important;
  height:64px !important;
  max-width:64px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#161c48,#202860) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 auto 14px !important;
}
html body .werkwijze-icon svg{
  stroke:#fff !important;
  color:#fff !important;
  background:none !important;
  width:28px !important;
  height:28px !important;
}

@media (max-width:1023px){
  html body .logo-link .logo-svg,
  html body svg.logo-svg{ height:56px; }
}
@media (max-width:767px){
  html body .logo-link .logo-svg,
  html body svg.logo-svg{ height:48px; }
}
@media (prefers-reduced-motion:reduce){
  html body .logo-svg .ss-s-top,
  html body .logo-svg .ss-s-bot,
  html body .hero::before,
  html body .hero::after{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* ── 20260924ab: garantie-kaarten leesbaar ── */
html body .garantie-card{
  background:#fff !important;
  color:#0f172a !important;
  border:1px solid #e8eef6 !important;
}
html body .garantie-card h3{
  color:#161c48 !important;
  -webkit-text-fill-color:#161c48 !important;
  background:none !important;
}
html body .garantie-card p{
  color:#334155 !important;
  -webkit-text-fill-color:#334155 !important;
  background:none !important;
}
html body .garantie-featured{
  background:linear-gradient(160deg,#161c48,#202860) !important;
  border-color:#202860 !important;
}
html body .garantie-featured h3{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
html body .garantie-featured p{
  color:rgba(255,255,255,.86) !important;
  -webkit-text-fill-color:rgba(255,255,255,.86) !important;
}
html body .garantie-section .section-header h2{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* ═══ POLISH-20260924polish: hero fit + clarity + sections ═══ */

/* Hide decorative noise — seniors audience, not sparkles */
html body .hero-particles,
html body .hero-floaters,
html body .hero::before,
html body .hero::after{
  display:none !important;
}

/* Hero: fit CTA in first viewport */
html body .hero{
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
}
html body .hero-content{
  padding-top:calc(var(--header-height, 108px) + 28px) !important;
  padding-bottom:36px !important;
  max-width:920px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
html body .hero-title,
html body .hero-content h1{
  font-size:clamp(1.85rem, 3.6vw, 3rem) !important;
  line-height:1.18 !important;
  margin:0 0 12px !important;
  letter-spacing:-.02em !important;
  max-width:18ch !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
html body .hero-subtitle,
html body .hero-content > p{
  font-size:clamp(1rem, 1.5vw, 1.2rem) !important;
  line-height:1.45 !important;
  margin:0 auto 22px !important;
  max-width:36rem !important;
  opacity:.95 !important;
}

/* Softer overlay — show the bathroom, keep text readable */
html body .hero-overlay,
.hero-overlay{
  background:
    linear-gradient(180deg, rgba(10,16,32,.55) 0%, rgba(10,16,32,.42) 42%, rgba(10,16,32,.72) 100%),
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(8,12,28,.35) 0%, rgba(8,12,28,.55) 100%) !important;
}
html body .hero-bg-img,
.hero-bg-img{
  filter:saturate(.95) contrast(1.06) brightness(.78) !important;
  transform:scale(1.04);
}
html body .hero-content::before{
  inset:-1.5rem -2rem !important;
  background:radial-gradient(ellipse 65% 55% at 50% 40%, rgba(8,12,28,.45) 0%, transparent 70%) !important;
}

/* Badges: compact single row wrap, drop duplicate trust strip */
html body .hero-trust-strip{
  display:none !important;
}
html body .hero-badges{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:8px !important;
  margin:0 0 22px !important;
  max-width:640px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
html body .hero-badges .badge,
html body .hero .badge{
  padding:8px 14px !important;
  font-size:.82rem !important;
  line-height:1.25 !important;
  gap:8px !important;
  background:rgba(255,255,255,.1) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  backdrop-filter:blur(8px);
  border-radius:999px !important;
  color:#fff !important;
  box-shadow:none !important;
}
html body .hero-badges .badge svg,
html body .hero .badge svg{
  width:16px !important;
  height:16px !important;
  flex-shrink:0;
  color:#78c8e0 !important;
  stroke:#78c8e0 !important;
}
/* Hide 4th+ badge on desktop to reduce clutter — keep top 3 */
html body .hero-badges .badge:nth-child(n+4){
  display:none !important;
}

html body .hero-cta{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:12px !important;
  margin:0 !important;
}
html body .hero-cta .btn,
html body .hero-cta .btn-cta,
html body .hero-cta .btn-white{
  padding:14px 26px !important;
  font-size:1.02rem !important;
  border-radius:999px !important;
  min-height:48px !important;
}
html body .hero-cta .btn-white,
html body .hero-cta .btn-premium-outline{
  background:transparent !important;
  color:#fff !important;
  border:1.5px solid rgba(255,255,255,.55) !important;
  box-shadow:none !important;
}
html body .hero-cta .btn-white:hover,
html body .hero-cta .btn-premium-outline:hover{
  background:rgba(255,255,255,.12) !important;
  border-color:#78c8e0 !important;
}
html body .hero-highlight{
  color:#9edaf0 !important;
  -webkit-text-fill-color:#9edaf0 !important;
}

@media (max-width:767px){
  html body .hero-content{
    padding-top:calc(var(--header-height, 72px) + 20px) !important;
    padding-bottom:28px !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
  html body .hero-title,
  html body .hero-content h1{
    font-size:1.65rem !important;
    max-width:none !important;
  }
  html body .hero-badges .badge:nth-child(n+3){
    display:none !important;
  }
  html body .hero-cta{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  html body .hero-cta .btn{
    width:100% !important;
    justify-content:center !important;
  }
}

/* ── Sections below fold ── */
html body .section-header h2,
html body .solutions-section h2,
html body .voordelen-section h2,
html body .werkwijze-section h2,
html body .faq-section h2,
html body .projecten-section h2,
html body .before-after-section h2{
  color:#161c48 !important;
  -webkit-text-fill-color:#161c48 !important;
  letter-spacing:-.02em !important;
}
html body .section-header p,
html body .solutions-section .section-header p,
html body .voordelen-section .section-header p{
  color:#54708a !important;
  -webkit-text-fill-color:#54708a !important;
}

/* Solution / feature cards */
html body .solution-card,
html body .voordeel-card,
html body .werkwijze-card,
html body .project-card,
html body .faq-item{
  border-radius:16px !important;
  border:1px solid #e6eef6 !important;
  box-shadow:0 8px 28px rgba(22,28,72,.06) !important;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
html body .solution-card:hover,
html body .voordeel-card:hover,
html body .werkwijze-card:hover,
html body .project-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(22,28,72,.12) !important;
  border-color:#c5dff0 !important;
}

/* Accent links / more-info */
html body .solution-card a,
html body a.meer-info,
html body .link-accent{
  color:#202860 !important;
}
html body .solution-card a:hover{
  color:#4aa8c8 !important;
}

/* Brands strip quieter */
html body .brands-section,
html body .brands-strip,
html body .merken-section{
  background:#f7fafc !important;
  border-top:1px solid #e8eef6 !important;
  border-bottom:1px solid #e8eef6 !important;
}

/* Problem/solution contrast */
html body .problem-card{
  background:#f8fafc !important;
  border-color:#e2e8f0 !important;
}
html body .solution-side,
html body .safe-card{
  background:linear-gradient(160deg,#f0f7fb 0%,#fff 100%) !important;
  border-color:#c5dff0 !important;
}

/* Lead form CTA button navy */
html body .lead-form-section .btn-cta,
html body .lead-form button[type=submit],
html body .extra-cta .btn-cta{
  background:linear-gradient(180deg,#24306e 0%,#202860 55%,#161c48 100%) !important;
  color:#fff !important;
  border-radius:999px !important;
}

/* Header CTA polish */
html body .site-header .btn,
html body header .btn-cta,
html body .header-cta{
  border-radius:999px !important;
  box-shadow:0 4px 14px rgba(32,40,96,.22) !important;
}

/* WhatsApp icon keep green (brand recognition) */
html body a[href*="wa.me"] svg,
html body a[aria-label*="WhatsApp"] svg,
html body .header-wa{
  color:inherit;
}
/* ── 20260924ac: hero-foto zichtbaar, overlay + positie ── */
html body .hero-bg-img,
.hero-bg-img{
  filter:saturate(1.12) contrast(1.1) brightness(1.1) !important;
  clip-path:none !important;
  object-fit:cover !important;
  object-position:50% 30% !important;
  transform:scale(1.03) !important;
  opacity:1 !important;
}
html body .hero-overlay,
.hero-overlay{
  background:
    radial-gradient(ellipse 64% 58% at 50% 38%,
      rgba(10,16,36,.16) 0%,
      rgba(22,28,72,.32) 48%,
      rgba(22,28,72,.78) 100%) !important;
  opacity:1 !important;
}
html body .hero-content::before{
  background:radial-gradient(ellipse 78% 62% at 50% 40%, rgba(8,12,28,.22) 0%, transparent 70%) !important;
  inset:-1rem -1.2rem !important;
}
html body .hero-content h1,
html body .hero-title,
html body .hero-content h1 span,
html body .hero-title .hero-highlight{
  text-shadow:0 2px 24px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.5) !important;
}
html body .hero-subtitle,
html body .hero-content p{
  text-shadow:0 1px 16px rgba(0,0,0,.55) !important;
}
@media (max-width:767px){
  html body .hero-bg-img,
  .hero-bg-img{
    clip-path:none !important;
    object-position:50% 26% !important;
  }
}
/* ULTIMATE-HERO-20260924p3 */
html body .hero-bg-img,.hero-bg-img{
  filter:saturate(.95) contrast(1.05) brightness(.82) !important;
}
html body .hero-overlay,.hero-overlay{
  background:
    linear-gradient(180deg,rgba(10,16,32,.5) 0%,rgba(10,16,32,.36) 42%,rgba(10,16,32,.68) 100%),
    radial-gradient(ellipse 65% 50% at 50% 40%,rgba(8,12,28,.28),rgba(8,12,28,.5)) !important;
}
html body .hero{min-height:0!important;height:auto!important}
html body .hero-particles,html body .hero-floaters,html body .hero-trust-strip{display:none!important}
html body .hero-badges .badge:nth-child(n+4){display:none!important}
/* NO-CIRCLE-CLIP */
html body .hero-bg-img,.hero-bg-img{clip-path:none!important;border-radius:0!important;}
/* ── 20260924ad: alle hero-foto's zichtbaar, lichtere overlay, betere crop ── */

html body .page-header,
html body header.page-header,
html body section.page-header{
  background-position:50% 32% !important;
  background-size:cover !important;
}
html body .page-header::before,
html body .page-header:before{
  background:linear-gradient(180deg, rgba(22,28,72,.10) 0%, rgba(22,28,72,.22) 100%) !important;
}
html body .page-header[style*="background-image"]::after,
html body .page-header[style*="background"]::after,
html body .page-header[style*="background-image"]:after{
  background:linear-gradient(180deg, rgba(22,28,72,.08) 0%, rgba(22,28,72,.28) 100%) !important;
}
html body .page-header h1,
html body .page-header h1 span,
html body .page-header .revolutionary-text,
html body .page-header p{
  text-shadow:0 2px 22px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4) !important;
}

html body .blog-hero__img{
  opacity:.88 !important;
  filter:saturate(1.08) contrast(1.06) brightness(1.06) !important;
  object-fit:cover !important;
  object-position:50% 32% !important;
}
html body .blog-hero__overlay{
  background:linear-gradient(0deg, rgba(22,28,72,.62) 0%, rgba(22,28,72,.22) 52%, rgba(22,28,72,.10) 100%) !important;
}
html body .blog-hero__title,
html body .blog-hero h1{
  text-shadow:0 2px 22px rgba(0,0,0,.6) !important;
}

html body .page-hero{
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(74,168,200,.22), transparent 55%),
    linear-gradient(135deg,#161c48 0%,#202860 55%,#1e3a5f 100%) !important;
}

/* ── 20260924ae: hero-titels wit, overlay nét sterk genoeg ── */
html body .page-header[style*="background-image"]::after,
html body .page-header[style*="background"]::after,
html body .page-header[style*="background-image"]:after{
  background:linear-gradient(180deg, rgba(22,28,72,.24) 0%, rgba(22,28,72,.42) 100%) !important;
}
html body .page-header::before,
html body .page-header:before{
  background:linear-gradient(180deg, rgba(22,28,72,.14) 0%, rgba(22,28,72,.28) 100%) !important;
}
html body .page-header h1,
html body .page-header h1 span,
html body .page-header .revolutionary-text,
html body .page-header .revolutionary-text span,
html body .page-header .page-title{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:none !important;
  background-image:none !important;
  text-shadow:0 2px 24px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.45) !important;
}
html body .page-header p{
  color:rgba(255,255,255,.94) !important;
  -webkit-text-fill-color:rgba(255,255,255,.94) !important;
  text-shadow:0 1px 16px rgba(0,0,0,.5) !important;
}

/* ═══ POLISH-20260926p5: brands + sections + CTAs ═══ */

/* Merken: rustig grijs, kleur op hover */
html body .brands-strip{
  background:#f7fafc !important;
  padding:28px 0 !important;
  border-top:1px solid #e8eef6 !important;
  border-bottom:1px solid #e8eef6 !important;
}
html body .brands-strip__kicker{
  color:#64748b !important;
  font-size:.78rem !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  margin:0 0 16px !important;
  text-align:center !important;
}
html body .brands-strip__item img{
  filter:grayscale(1) opacity(.72) !important;
  transition:filter .25s ease, opacity .25s ease, transform .25s ease !important;
  max-height:36px !important;
  width:auto !important;
}
html body .brands-strip__item:hover img{
  filter:grayscale(0) opacity(1) !important;
  transform:translateY(-1px);
}

/* Trust icons → cyan, never gold */
html body .trust-block{
  background:#eef3fb !important;
  padding:18px 0 14px !important;
}
html body .trust-item{
  background:#fff !important;
  border:1px solid #c9d9ee !important;
  border-radius:16px !important;
  box-shadow:0 6px 22px rgba(22,28,72,.05) !important;
  padding:18px 16px !important;
}
html body .trust-icon svg,
html body .trust-item svg{
  stroke:#4aa8c8 !important;
  color:#4aa8c8 !important;
}
html body .trust-item .stars svg,
html body .stars svg{
  fill:#78c8e0 !important;
  stroke:#78c8e0 !important;
}
html body .trust-stat-line,
html body .trust-content strong{
  color:#161c48 !important;
}
html body .trust-content span{
  color:#54708a !important;
}

/* Problem → solution */
html body .problem-solution{
  padding:56px 0 !important;
}
html body .ps-card{
  border-radius:18px !important;
  border:1px solid #e6eef6 !important;
  box-shadow:0 10px 32px rgba(22,28,72,.07) !important;
  overflow:hidden !important;
  background:#fff !important;
}
html body .ps-problem{
  border-color:#f1d5d5 !important;
}
html body .ps-solution{
  border-color:#c5dff0 !important;
  background:linear-gradient(180deg,#f5fafc 0%,#fff 40%) !important;
}
html body .ps-label{
  background:#fee2e2 !important;
  color:#991b1b !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  font-size:.72rem !important;
}
html body .ps-label-green,
html body .ps-solution .ps-label{
  background:#dbeafe !important;
  color:#1e3a8a !important;
}
html body .ps-arrow svg{
  stroke:#202860 !important;
}
html body .ps-list-danger li::marker,
html body .ps-list-danger li::before{
  color:#b91c1c !important;
}
html body .ps-list-success li::before{
  color:#202860 !important;
}
html body .ps-card h3{
  color:#161c48 !important;
}
html body .ps-image img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}

/* Solutions cards */
html body .solutions-section{
  padding:56px 0 !important;
  background:#f8fafc !important;
}
html body .solution-card{
  background:#fff !important;
  border-radius:18px !important;
  border:1px solid #e6eef6 !important;
  box-shadow:0 8px 28px rgba(22,28,72,.06) !important;
  overflow:hidden !important;
}
html body .solution-card h3{
  color:#161c48 !important;
}
html body .solution-card a.btn,
html body .solution-card .btn-link,
html body .solution-card a[href]{
  color:#202860 !important;
  font-weight:700 !important;
}

/* Hero phone outline — clearer on dark */
html body .hero-cta .btn-white,
html body .hero-cta .btn-premium-outline{
  border-width:2px !important;
  border-color:rgba(255,255,255,.75) !important;
  background:rgba(255,255,255,.06) !important;
  backdrop-filter:blur(6px);
}
html body .hero-cta .btn-white:hover,
html body .hero-cta .btn-premium-outline:hover{
  background:rgba(255,255,255,.14) !important;
  border-color:#9edaf0 !important;
}

/* Lead form */
html body .lead-form-section{
  background:linear-gradient(145deg,#161c48 0%,#202860 55%,#24306e 100%) !important;
  padding:64px 0 !important;
}
html body .lead-form-section h2,
html body .lead-form-section .section-header h2{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
html body .lead-form-section p,
html body .lead-form-section li{
  color:rgba(255,255,255,.88) !important;
}
html body .lead-form input,
html body .lead-form-section input[type=text],
html body .lead-form-section input[type=email],
html body .lead-form-section input[type=tel]{
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.2) !important;
  background:rgba(255,255,255,.96) !important;
  min-height:48px !important;
}
html body .lead-form button[type=submit],
html body .lead-form-section .btn-cta{
  border-radius:999px !important;
  background:linear-gradient(180deg,#4aa8c8 0%,#2f8fb0 100%) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 8px 24px rgba(0,0,0,.25) !important;
  font-weight:800 !important;
}

/* FAQ */
html body .faq-section{
  padding:56px 0 !important;
}
html body .faq-item,
html body .faq-question,
html body details.faq-item{
  border:1px solid #e6eef6 !important;
  border-radius:14px !important;
  background:#fff !important;
  margin-bottom:10px !important;
}
html body .faq-question,
html body .faq-item button{
  color:#161c48 !important;
  font-weight:700 !important;
}

/* Footer navy */
html body .site-footer{
  background:#0f172a !important;
  color:rgba(255,255,255,.82) !important;
}
html body .site-footer a{
  color:rgba(255,255,255,.78) !important;
}
html body .site-footer a:hover{
  color:#9edaf0 !important;
}
html body .site-footer h3{
  color:#fff !important;
}

/* Section rhythm */
html body .werkwijze-section,
html body .voordelen-section,
html body .garantie-section,
html body .before-after-section,
html body .projecten-section{
  padding-top:56px !important;
  padding-bottom:56px !important;
}

/* TRUST-CONTRAST-p5b */
html body .trust-icon svg{stroke:#202860!important;color:#202860!important}
html body .trust-stat-line,html body .trust-content strong{color:#0f172a!important;font-size:1.15rem!important}
html body .trust-content > span{color:#334155!important}
html body .brands-strip__item img{filter:grayscale(1) opacity(.72)!important}

/* ═══ POLISH-20260926pages: inner pages + forms + diensten ═══ */

/* Page heroes — consistent navy band */
html body .page-hero,
html body section.page-hero{
  background:linear-gradient(135deg,#161c48 0%,#202860 55%,#24306e 100%) !important;
  color:#fff !important;
  padding:calc(var(--header-height,108px) + 36px) 0 48px !important;
  text-align:center !important;
  position:relative !important;
  overflow:hidden !important;
}
html body .page-hero h1,
html body .page-hero .page-title{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-size:clamp(1.75rem,3vw,2.6rem) !important;
  margin:0 0 10px !important;
  letter-spacing:-.02em !important;
}
html body .page-hero p{
  color:rgba(255,255,255,.9) !important;
  -webkit-text-fill-color:rgba(255,255,255,.9) !important;
  max-width:36rem !important;
  margin:0 auto !important;
  font-size:1.05rem !important;
}

/* Forms (offerte / contact / brochure) */
html body .offerte-form,
html body .contact-form,
html body .lead-form,
html body form.ss-form,
html body .form-card,
html body .offerte-card{
  background:#fff !important;
  border:1px solid #e6eef6 !important;
  border-radius:18px !important;
  box-shadow:0 12px 36px rgba(22,28,72,.08) !important;
  padding:28px !important;
}
html body .offerte-form input,
html body .offerte-form select,
html body .offerte-form textarea,
html body .contact-form input,
html body .contact-form select,
html body .contact-form textarea,
html body .form-group input,
html body .form-group select,
html body .form-group textarea,
html body .form-control{
  border:1px solid #d5e0ec !important;
  border-radius:12px !important;
  min-height:48px !important;
  padding:12px 14px !important;
  font-size:1rem !important;
  color:#0f172a !important;
  background:#fff !important;
}
html body .offerte-form textarea,
html body .contact-form textarea,
html body .form-group textarea{
  min-height:120px !important;
}
html body .offerte-form label,
html body .contact-form label,
html body .form-group label{
  color:#161c48 !important;
  font-weight:600 !important;
}
html body .checkbox-group label,
html body .radio-group label,
html body .option-chip{
  border:1px solid #e6eef6 !important;
  border-radius:12px !important;
  background:#f8fafc !important;
  color:#0f172a !important;
}
html body .checkbox-group input:checked + label,
html body .option-chip.is-active,
html body .checkbox-group label:has(input:checked){
  border-color:#78c8e0 !important;
  background:#eef7fb !important;
  color:#161c48 !important;
}
html body .offerte-form button[type=submit],
html body .contact-form button[type=submit],
html body .brochure-form button[type=submit],
html body form .btn-cta,
html body .form-submit .btn{
  background:linear-gradient(180deg,#24306e 0%,#202860 55%,#161c48 100%) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  min-height:52px !important;
  font-weight:800 !important;
  padding:14px 28px !important;
  box-shadow:0 8px 22px rgba(32,40,96,.28) !important;
}

/* Diensten / product cards */
html body .dienst-card,
html body .diensten-card,
html body .service-card,
html body .product-card,
html body .collectie-card,
html body .project-card{
  background:#fff !important;
  border:1px solid #e6eef6 !important;
  border-radius:16px !important;
  box-shadow:0 8px 28px rgba(22,28,72,.06) !important;
  overflow:hidden !important;
  transition:transform .25s ease, box-shadow .25s ease !important;
}
html body .dienst-card:hover,
html body .diensten-card:hover,
html body .service-card:hover,
html body .product-card:hover,
html body .project-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(22,28,72,.12) !important;
  border-color:#c5dff0 !important;
}
html body .dienst-card h3,
html body .diensten-card h3,
html body .service-card h3,
html body .product-card h3{
  color:#161c48 !important;
}
html body .dienst-card a,
html body .diensten-card a.meer,
html body .service-card .btn{
  color:#202860 !important;
  font-weight:700 !important;
}

/* Content pages section headers */
html body .page-content h2,
html body .content-section h2,
html body main h2{
  color:#161c48 !important;
}
html body .page-content p,
html body .content-section p{
  color:#334155 !important;
}

/* Tarieven / pakket cards */
html body .pricing-card,
html body .pakket-card,
html body .tarief-card{
  border-radius:18px !important;
  border:1px solid #e6eef6 !important;
  box-shadow:0 10px 32px rgba(22,28,72,.07) !important;
}
html body .pricing-card.featured,
html body .pakket-card.featured{
  border-color:#202860 !important;
  box-shadow:0 14px 40px rgba(32,40,96,.18) !important;
}

/* Reviews */
html body .review-card{
  border-radius:16px !important;
  border:1px solid #e6eef6 !important;
  background:#fff !important;
}
html body .review-card .stars svg,
html body .review-stars svg{
  fill:#78c8e0 !important;
  stroke:#78c8e0 !important;
}

/* Sidebar info boxes on form pages */
html body .info-box,
html body .offerte-sidebar,
html body .why-box,
html body .contact-aside{
  background:linear-gradient(160deg,#f0f7fb 0%,#fff 100%) !important;
  border:1px solid #c5dff0 !important;
  border-radius:16px !important;
  color:#0f172a !important;
}
html body .info-box h3,
html body .why-box h3,
html body .offerte-sidebar h3{
  color:#161c48 !important;
}
/* ── 20260926af: alle heroes + restgoud ── */
html body .page-header h1,
html body .page-header h1 span,
html body .page-header .revolutionary-text,
html body .page-header .revolutionary-text span,
html body .page-header .page-title,
html body .blog-hero__title,
html body .blog-hero h1,
html body .blog-hero h1 span{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:none !important;
  background-image:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  filter:none !important;
  opacity:1 !important;
  text-shadow:0 2px 28px rgba(0,0,0,.72), 0 1px 4px rgba(0,0,0,.5) !important;
}
html body .page-header[style*="background-image"]::after,
html body .page-header[style*="background"]::after{
  background:linear-gradient(180deg, rgba(22,28,72,.38) 0%, rgba(22,28,72,.55) 100%) !important;
}
html body .page-header::before{
  background:linear-gradient(180deg, rgba(22,28,72,.18) 0%, rgba(22,28,72,.34) 100%) !important;
}
html body .page-header p{
  color:#fff !important;
  -webkit-text-fill-color:rgba(255,255,255,.92) !important;
  text-shadow:0 1px 16px rgba(0,0,0,.55) !important;
}

/* Restgoud / bruin in kaarten en badges */
html body [style*="#8F6124"],
html body [style*="#7A6652"],
html body [style*="#5C4A3A"],
html body [style*="#C4873B"],
html body [style*="#c4873b"]{
  /* cannot override partial inline; PHP swap handles fills */
}
html body .badge-gold,
html body .kicker,
html body .eyebrow{
  color:#161c48 !important;
  background:#eef3fb !important;
}

/* ── 20260926ag: hero-koppen leesbaar op lichte foto ── */
html body .page-header .header-content{
  background:radial-gradient(ellipse 92% 78% at 50% 48%, rgba(8,12,32,.48) 0%, rgba(8,12,32,.12) 68%, transparent 100%) !important;
  padding:28px 20px !important;
  border-radius:20px !important;
}
html body .page-header h1,
html body .page-header .revolutionary-text,
html body .page-header .revolutionary-text span{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:0 2px 32px rgba(0,0,0,.8), 0 0 2px rgba(0,0,0,.6) !important;
}

/* 2026-09-26 desktop: minder witruimte */
@media (min-width:1024px){
  html body .hero-content{padding:8px 0 10px !important}
  html body .hero-content::before{inset:-1.1rem -1.4rem !important}
  html body .hero-badges{margin-bottom:14px !important;gap:8px !important}
  html body .hero-subtitle{margin-bottom:16px !important}
  html body .trust-block{background:#e8f0fa !important;padding:14px 0 12px !important}
  html body .trust-item{background:#fff !important;border:1px solid #c9d9ee !important;padding:12px 14px !important}
  html body .ss-lockup-strip{padding:8px 0 4px !important}
  html body .ss-lockup-tag{margin:0 0 8px !important}
  html body .ss-paden{padding:4px 0 12px !important;margin-top:0 !important}
  html body .ss-pad, html body .ss-pad-copy{min-height:230px !important}
  html body .problem-solution,
  html body .solutions-section,
  html body .werkwijze-section,
  html body .garantie-section,
  html body .voordelen-section,
  html body .faq-section,
  html body .reviews-section,
  html body .extra-cta-section,
  html body .faq-block{padding:28px 0 !important}
  html body .lead-form-section{padding:36px 0 !important}
  html body .section-header{margin-bottom:16px !important}
  html body .viz-cta-section{padding:20px 0 !important}
  html body .viz-cta-banner{padding:24px 28px !important;gap:24px !important}
  html body .pricing-block{padding:32px 0 !important}
}

/* 2026-09-26 tools: 3D-hero navy; ontwerp-tool is licht (page CSS) */
html body .v3d-hero h1,
html body .v3d-hero .v3d-hero-title { color:#fff !important; }
html body .v3d-hero { color:#fff !important; background:#161c48 !important; padding:28px 0 16px !important; }
html body .v3d-hero .hero-highlight { color:#78c8e0 !important; }
html body .v3d-style-swatch { background-size:cover !important; background-position:center !important; }

@media (max-width:900px){
  html body .v3d-hero { padding-top:28px !important; padding-bottom:16px !important; }
  html body .v3d-hero-title { font-size:1.55rem !important; line-height:1.15 !important; }
}

/* 2026-09-27: fotokaarten — witte tekst op overlay, niet de light-tag-regel */
html body .ss-pad-title{
  color:#fff !important;-webkit-text-fill-color:#fff !important;
  text-shadow:0 1px 12px rgba(0,0,0,.35) !important;background:none !important;filter:none !important
}
html body .ss-pad-tag{
  background:#202860 !important;color:#fff !important;-webkit-text-fill-color:#fff !important;
  text-shadow:none !important;filter:none !important
}
html body .ss-pad-btn{
  background:#fff !important;color:#202860 !important;-webkit-text-fill-color:#202860 !important;
  text-shadow:none !important
}
html body .ss-pad-copy{
  background:linear-gradient(180deg,rgba(22,28,72,.2) 0%,rgba(22,28,72,.92) 68%) !important
}
html body .photo-tag{
  color:#fff !important;-webkit-text-fill-color:#fff !important;text-shadow:none !important
}

/* ═══ 20260927b: alle pagina's — overlay-tekst wit, licht navy, geen restgoud ═══ */

/* Foto-heroes met background-image (collectie, tarieven, blog, …) */
html body .page-header[style*="background-image"]::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg, rgba(22,28,72,.52) 0%, rgba(22,28,72,.76) 100%) !important;
}
html body .page-header > *,
html body .page-header .container,
html body .page-header .header-content{
  position:relative !important;
  z-index:2 !important;
}
html body .page-header h1,
html body .page-header h1 span,
html body .page-header .page-title,
html body .page-header .revolutionary-text,
html body .page-header .revolutionary-text span,
html body .page-hero h1,
html body .page-hero h1 span,
html body .page-hero .page-title,
html body .blog-hero__title,
html body .blog-hero h1,
html body .blog-hero h1 span{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:none !important;
  background-image:none !important;
  filter:none !important;
}
html body .page-header p,
html body .page-hero p,
html body .blog-hero__excerpt{
  color:#fff !important;
  -webkit-text-fill-color:rgba(255,255,255,.92) !important;
}

/* Lichte secties: navy, niet bruin van de glob-kicker */
html body .ss-diensten-kicker,
html body .ss-tools-kicker,
html body .ph-eyebrow,
html body .ss-lockup-tag,
html body .detail-label,
html body .section-kicker,
html body .section-tag{
  color:#161c48 !important;
  -webkit-text-fill-color:#161c48 !important;
  background:#eef3fb !important;
  text-shadow:none !important;
  filter:none !important;
}
html body .ss-diensten-head h2,
html body .ss-dienst strong,
html body .ss-tools-head h2,
html body .section-header h2,
html body .solutions-section h2,
html body .solution-content h3,
html body .extra-card h4,
html body .contact-info h2,
html body .contact-card h3,
html body .projecten-home h2,
html body .projecten-home h2 em,
html body .ph-body h3,
html body .service-text h2,
html body .page-content h2,
html body .content-section h2{
  color:#161c48 !important;
  -webkit-text-fill-color:#161c48 !important;
}
html body .ss-diensten-head p:not(.ss-diensten-kicker),
html body .ss-dienst span,
html body .ss-tools-head p:not(.ss-tools-kicker),
html body .section-header p,
html body .ph-lead,
html body .ph-body p,
html body .solution-content p{
  color:#54708a !important;
  -webkit-text-fill-color:#54708a !important;
}

/* Projecten: restgroen/goud → navy */
html body .ph-chip{
  background:#eef3fb !important;
  color:#161c48 !important;
  -webkit-text-fill-color:#161c48 !important;
}
html body .ph-badge-pair,
html body .ph-badge-date{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
html body .ph-btn-primary{
  background:linear-gradient(180deg,#24306e 0%,#202860 55%,#161c48 100%) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
html body .ph-btn-secondary{
  background:#202860 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
html body .ph-btn-ghost{
  color:#202860 !important;
  -webkit-text-fill-color:#202860 !important;
  border-color:#202860 !important;
  background:transparent !important;
}

/* Donkere blokken blijven wit */
html body .garantie-section .section-header h2,
html body .garantie-section h2,
html body .garantie-section h3,
html body .lead-form-section .section-header h2,
html body .lead-form-section h2,
html body .pricing-block h2,
html body .cta-section h2,
html body .cta-content h2{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
html body .garantie-section .section-header p,
html body .lead-form-section .section-header p,
html body .cta-content p{
  color:rgba(255,255,255,.86) !important;
  -webkit-text-fill-color:rgba(255,255,255,.86) !important;
}

/* Ontwerp-tool blijft licht — niet als foto-hero behandelen */
html body section.tool-hero h1{
  color:#161c48 !important;
  -webkit-text-fill-color:#161c48 !important;
  text-shadow:none !important;
  background:none !important;
}
html body section.tool-hero p{
  color:#334155 !important;
  -webkit-text-fill-color:#334155 !important;
  text-shadow:none !important;
}

/* Keuzehulp is donker — wit, geen restgoud en geen navy-op-navy */
html body .kh-section .kh-tag,
html body .kh-section span.kh-tag{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:rgba(255,255,255,.14) !important;
  border-color:rgba(255,255,255,.28) !important;
}
html body .kh-section .kh-header h2,
html body .kh-section h2,
html body .kh-section .kh-step h3{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
html body .kh-section .kh-header p{
  color:rgba(255,255,255,.86) !important;
  -webkit-text-fill-color:rgba(255,255,255,.86) !important;
}

/* ═══ 20260927e: extra pagina's — lichte custom-heroes + restgroen ═══ */
html body .br-title,
html body .br-form-card h2,
html body .br-info h3,
html body .faq-block h1,
html body .vd-hero-title,
html body .vd-lookup-card h2,
html body .vd-section-header h2,
html body .vd-optie-card h4{
  color:#161c48 !important;
  -webkit-text-fill-color:#161c48 !important;
}
html body .br-sub,
html body .br-form-card>p,
html body .vd-hero-sub,
html body .vd-lookup-card>p{
  color:#54708a !important;
  -webkit-text-fill-color:#54708a !important;
}
html body .br-badge,
html body .vd-hero-badge{
  color:#161c48 !important;
  -webkit-text-fill-color:#161c48 !important;
  background:#eef3fb !important;
  border-color:#c5dff0 !important;
}
html body .br-title span,
html body .vd-hero .hero-highlight,
html body section.tool-hero .hero-highlight{
  color:#4aa8c8 !important;
  -webkit-text-fill-color:#4aa8c8 !important;
  text-shadow:none !important;
}
html body .br-free-badge{
  background:#202860 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
html body .vd-btn-pri,
html body .br-submit{
  background:linear-gradient(180deg,#24306e 0%,#202860 55%,#161c48 100%) !important;
  color:#fff !important;
}
html body .vd-optie-icon{
  background:#eef3fb !important;
  color:#202860 !important;
}
html body .vd-section-header h2 i{
  color:#4aa8c8 !important;
}
html body .vd-optie-besparing{
  color:#202860 !important;
}
html body .extra-cta-card h3,
html body .product-card h3,
html body .collectie-card h3{
  color:#161c48 !important;
  -webkit-text-fill-color:#161c48 !important;
}

/* ═══ 20260927f: showcase + restknoppen ═══ */
html body .ps-hero h1,
html body .ps-cta-bottom h2{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
html body .ps-hero h1 span,
html body .ps-hero .stat .num{
  color:#78c8e0 !important;
  -webkit-text-fill-color:#78c8e0 !important;
}
html body .ps-filters a:hover,
html body .ps-filters a.active{
  background:#202860 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border-color:#202860 !important;
}
html body .ps-card .badge{
  background:#202860 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
html body .ps-cta-bottom .btn,
html body .vd-btn-cta,
html body .wiz-btn-small{
  background:linear-gradient(180deg,#24306e 0%,#202860 55%,#161c48 100%) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
html body .ps-card .body h3{
  color:#161c48 !important;
  -webkit-text-fill-color:#161c48 !important;
}
html body .ps-card .voorna,
html body .ph-badge-pair,
html body .case .tag-na{
  background:#4aa8c8 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* SMALLE-TELEFOON-HEADER-20260928 — op 320px is de inhoudsbreedte 288px, maar logo (163) +
   snelcontact (82) + hamburger (44) + tussenruimtes = 309px, en alle drie stonden op
   flex-shrink:0. De header liep 21px buiten beeld, waardoor de telefoon de HELE pagina uitzoomde
   -- ook alle tekst, terwijl er inhoudelijk niets mis was.
   Het snelcontact blijft staan (bewuste keuze sinds 2026-04); het logo wordt hier iets kleiner.
   🪤 Deze regel hoort in DEZE laag: styles.css verliest van de html-body-!important hierboven. */
@media (max-width:380px){
  html body .logo, html body .logo-link img.logo, html body .logo-link img{
    height:38px !important; max-height:38px !important;
  }
  html body .logo-link{ min-width:0 !important; flex-shrink:1 !important; }
}

/* COOKIEBALK-PAST-OP-SMAL-SCHERM-20260928 — de twee knoppen stonden naast elkaar op
   flex-shrink:0 zonder wrap: samen 296px op een positie die pas op 122px begint, dus tot 418px.
   Daardoor bleef de pagina op een 320px-scherm uitzoomen, ook nadat de header was opgelost. */
@media (max-width:380px){
  html body .cookie-actions{
    flex-wrap:wrap !important; justify-content:center !important;
    width:100% !important; flex-shrink:1 !important;
  }
  html body .cookie-actions .btn{ flex:1 1 auto !important; min-width:0 !important; }
}

/* HERO-GLOED-BINNEN-BEELD-20260928 — de gloed achter de herotekst staat op inset:… -2rem en
   steekt dus bewust buiten de container. Op brede schermen is daar ruimte voor; op 320px niet,
   en dan zoomt de telefoon de hele pagina uit. Verticaal blijft de gloed zoals hij was. */
@media (max-width:380px){
  html body .hero-content::before{ inset:-1.5rem 0 !important; }
}

/* LANGE-WOORDEN-20260928 — "Speciale badkamerdiensten": dat ene woord is op 34px letterhoogte
   315px breed terwijl er 288px is, en het brak niet af. Gevolg: de kop stak buiten de pagina en
   de telefoon zoomde alles uit.
   🪤 Eerst opgelost met overflow-wrap:break-word. Dat werkte, maar zag er slecht uit: "badkamer-
      dienst / en", hard afgebroken zonder koppelteken (hyphens:auto levert in de praktijk geen
      afbreekstreepje). Voor Nederlandse samenstellingen is dat geen oplossing.
   Nu: de kop schaalt mee met de schermbreedte, zodat het woord gewoon pást. De harde afbreking
   blijft alleen als laatste vangnet staan voor nog langere woorden. */
@media (max-width:420px){
  html body h1{ font-size:clamp(1.45rem, 8vw, 2.25rem) !important; line-height:1.15 !important; }
  html body h2{ font-size:clamp(1.25rem, 7vw, 1.9rem) !important;  line-height:1.2 !important; }
  html body h3{ font-size:clamp(1.05rem, 5.5vw, 1.4rem) !important; }
  html body h1, html body h2, html body h3{ overflow-wrap:break-word !important; }
}

/* RASTER-EEN-KOLOM-20260928 — rasters stonden op `repeat(3, 1fr)`. Een `1fr`-kolom mag niet
   kleiner worden dan de inhoud die erin staat (`1fr` = `minmax(auto,1fr)`), dus op een
   320px-scherm bleven het twee kolommen van 177px en liep de pagina 75px buiten beeld: de
   telefoon zoomde de hele pagina uit, ook alle tekst.
   🪤 Dit is NIET hetzelfde als het minmax(340px)-geval; daar is de ondergrens expliciet.
      Hier is hij impliciet, en daarom vind je hem niet door op "minmax" te zoeken.
   Onder 560px is één kolom op een telefoon altijd de betere weergave. */
@media (max-width:560px){
  html body .voordelen-grid,
  html body [class$="-grid"],
  html body [class*="-grid "]{
    grid-template-columns:1fr!important;
  }
}

/* SANISAFE-LOGO-PRO-20261005 SANISAFE-LOGO-PRO-VB-20261005 — nieuw logo (strak, verhouding 4,95:1, tekst als paden).
   Geen slagschaduw, geen glans-animatie, geen zweef-vergroting: het logo staat rustig.
   Hoogtes zo gekozen dat de breedte ongeveer gelijk blijft aan het oude logo (smalle telefoon past). */
html body .logo,
html body .logo-link img.logo,
html body .logo-link img{
  height:50px !important; max-height:50px !important; width:auto !important;
  filter:none !important; transition:height .28s ease !important;
}
html body .site-header.scrolled .logo,
html body .site-header.scrolled .logo-link img,
html body header.site-header.ss-scrolled .logo{ height:42px !important; max-height:42px !important; }
html body .logo-link:hover .logo,
html body .logo-link:hover img{ transform:none !important; filter:none !important; }
html body .logo-link::after{ content:none !important; display:none !important; animation:none !important; }
html body .footer-logo{ filter:none !important; height:40px !important; width:auto !important; }
@media (max-width:1023px){
  html body .logo, html body .logo-link img.logo, html body .logo-link img{ height:42px !important; max-height:42px !important; }
}
@media (max-width:767px){
  html body .logo, html body .logo-link img.logo, html body .logo-link img{ height:36px !important; max-height:36px !important; }
}
@media (max-width:380px){
  html body .logo, html body .logo-link img.logo, html body .logo-link img{ height:28px !important; max-height:28px !important; }
}