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

/* ═══ 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;
}

/* 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{padding:8px 0 6px !important}
  html body .trust-item{padding:10px 12px !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: hero-titel leesbaar op navy + compact */
html body .v3d-hero h1,
html body .v3d-hero .v3d-hero-title,
html body .tool-hero h1,
html body .tool-hero .tool-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,
html body .tool-hero .hero-highlight { color:#78c8e0 !important; }
html body .tool-hero { padding:36px 0 16px !important; }
html body .v3d-style-swatch { background-size:cover !important; background-position:center !important; }

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