/* ==========================================================================
   SaniSafe navy redesign — 2026-09-24
   Laadt ALS LAATSTE (na contrast-goud + ss-life). Wit / blauw / donkerblauw,
   grotere tekst, geanimeerde pillen (van boven én van onder).
   ========================================================================== */

:root{
  --header-height:108px;
  --primary:#202860;
  --primary-dark:#161c48;
  --primary-light:#3a4a8c;
  --navy:#161c48;
  --secondary:#4aa8c8;
  --secondary-dark:#2f8fb0;
  --secondary-light:#78c8e0;
  --accent:#eef3fb;
  --accent-dark:#d5e4f4;
  --cream:#eef3fb;
  --cta:#202860;
  --cta-dark:#161c48;
  --cta-hover:#161c48;
  --cta-light:#4aa8c8;
  --text:#0f172a;
  --text-dark:#0b1220;
  --text-light:#334155;
  --text-muted:#64748b;
  --bg:#ffffff;
  --bg-alt:#f4f7fc;
  --bg-accent:#eef3fb;
  --bg-dark:#161c48;
  --bg-gray:#f8fafc;
  --border:#dbe4f0;
  --border-light:#eef2f7;
  --goud-op-donker:#78c8e0;
  --ss-gold:#4aa8c8;
  --ss-teal:#4aa8c8;
  --ss-sky:#3B9DD9;
  --ss-glow:rgba(74,168,200,.28);
  --gradient-primary:linear-gradient(135deg,#161c48 0%,#202860 55%,#4aa8c8 140%);
  --gradient-hero:linear-gradient(180deg,rgba(15,23,42,.62) 0%,rgba(22,28,72,.42) 100%);
  --gradient-pricing:linear-gradient(135deg,#161c48 0%,#202860 100%);
}

html{font-size:18px}
body{
  background:#fff !important;
  background-image:
    radial-gradient(1100px 480px at 8% -10%, rgba(74,168,200,.10), transparent 58%),
    radial-gradient(900px 420px at 96% 0%, rgba(32,40,96,.08), transparent 55%) !important;
  color:#0f172a;
  font-size:1.05rem;
  line-height:1.7;
}
h1,h2,h3,h4{color:#161c48}
h1{font-size:clamp(2.4rem, 6.2vw, 4.4rem) !important; line-height:1.12 !important; letter-spacing:-.03em}
h2{font-size:clamp(2rem, 4.4vw, 3.15rem) !important; line-height:1.18 !important}
h3{font-size:clamp(1.35rem, 2.6vw, 1.85rem) !important}
p{font-size:1.08rem; color:#334155}
.section-header p,
.section-header .lead{font-size:1.22rem !important; color:#475569 !important; max-width:42rem}

/* Header */
.site-header,
header.site-header,
header.main-header,
.topbar{
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 1px 0 #e8eef6, 0 8px 28px rgba(22,28,72,.06) !important;
}
.nav-link,.logo-text,.header-phone{color:#161c48 !important}
.header-cta,.site-header .btn-cta{
  background:#161c48 !important;
  color:#fff !important;
  border-color:#161c48 !important;
}

/* Knoppen: navy i.p.v. goud */
html body .btn-cta,
html body a.btn-cta,
html body button.btn-cta,
html body .btn-premium.btn-cta,
html body a.cta-button,
html body .cta-button{
  background:linear-gradient(135deg,#161c48 0%,#202860 100%) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border-color:#161c48 !important;
  box-shadow:0 10px 28px rgba(22,28,72,.28) !important;
}
html body .btn-cta:hover,
html body a.btn-cta:hover,
html body .cta-button:hover{
  background:linear-gradient(135deg,#0f172a 0%,#161c48 100%) !important;
  color:#fff !important;
}
html body #before-after > .container > div > a{
  background:linear-gradient(135deg,#161c48 0%,#202860 100%) !important;
  border-color:#161c48 !important;
  color:#fff !important;
}

/* Secties: wit / ijsblauw, geen crème/goud */
.trust-section,.trust-block{background:#fff !important}
.solutions-section{background:linear-gradient(180deg,#fff 0%,#eef3fb 100%) !important}
.werkwijze-section{background:#fff !important}
.voordelen-section{background:#f8fafc !important}
.ba-section,.projecten-home{background:linear-gradient(180deg,#eef3fb 0%,#fff 100%) !important}
.faq-section{background:#fff !important}
.reviews-section{background:#f4f7fc !important}
.about-section,.offerte-section,.contact-section,.solution-detail,
.werkwijze-timeline,.privacy-section{
  background:#fff !important;
}
.values-section{background:#eef3fb !important}
.extra-cta-section{background:linear-gradient(180deg,#eef3fb 0%,#fff 100%) !important}
.lead-form-section,
section.lead-form,
.form-section{
  background:linear-gradient(160deg,#161c48 0%,#202860 58%,#1e3a5f 100%) !important;
}
.cta-section,.extra-cta-section.alt,
.numbers-section{
  background:linear-gradient(135deg,#161c48 0%,#202860 70%,#4aa8c8 160%) !important;
}
.pricing-block{
  background:linear-gradient(135deg,#161c48 0%,#202860 100%) !important;
  box-shadow:0 24px 60px rgba(22,28,72,.28) !important;
}
.garantie-section{
  background:linear-gradient(135deg,#161c48 0%,#1e3a5f 100%) !important;
}

html body .hero-highlight,
html body .hero-title .hero-highlight,
html body .section-header h2 em,
html body .section-title span,
html body .revolutionary-text span,
html body .ph-head h2 em{
  background:linear-gradient(90deg,#9ad8ec 0%,#ffffff 42%,#78c8e0 100%) !important;
  background-image:linear-gradient(90deg,#9ad8ec 0%,#ffffff 42%,#78c8e0 100%) !important;
  background-size:300% auto !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  filter:drop-shadow(0 2px 10px rgba(74,168,200,.35)) !important;
}
.ph-eyebrow,.section-eyebrow,.pricing-label{
  color:#4aa8c8 !important;
}

.solution-card:nth-child(1){ box-shadow: inset 0 3px 0 0 #4aa8c8, 0 8px 24px rgba(22,28,72,.08) !important; }
.solution-card:nth-child(2){ box-shadow: inset 0 3px 0 0 #202860, 0 8px 24px rgba(22,28,72,.08) !important; }
.solution-card:nth-child(3){ box-shadow: inset 0 3px 0 0 #78c8e0, 0 8px 24px rgba(22,28,72,.08) !important; }
.voordeel-card:nth-child(odd){ background:linear-gradient(180deg,#fff 70%, #eef3fb 100%) !important; }
.voordeel-card:nth-child(even){ background:linear-gradient(180deg,#fff 70%, #f8fafc 100%) !important; }
.werkwijze-num,.werkwijze-icon,.timeline-number{
  background:linear-gradient(135deg,#161c48,#4aa8c8) !important;
  color:#fff !important;
}
html body .garantie-badge, html body div.garantie-badge{
  background:linear-gradient(135deg,#161c48,#4aa8c8) !important;
  color:#fff !important;
}
.garantie-featured{ background:rgba(74,168,200,.16) !important; border-color:rgba(74,168,200,.45) !important; }

/* Hero: ronde foto + grotere tekst */
.hero{
  background:#161c48 !important;
  min-height:100svh;
  overflow:hidden;
  position:relative;
}
.hero-content{
  padding-top:84px !important;
  padding-bottom:28px !important;
}
.hero-bg-img{
  clip-path:circle(46% at 50% 48%);
  transform:scale(1.08);
  filter:saturate(.88) contrast(1.04) brightness(.58);
}
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;
}
.hero-title{
  font-size:clamp(2.35rem, 5.6vw, 4.05rem) !important;
  line-height:1.08 !important;
  text-shadow:0 8px 40px rgba(0,0,0,.45) !important;
  max-width:18ch;
  margin-left:auto; margin-right:auto;
}
.hero-subtitle{
  font-size:clamp(1.2rem, 2.4vw, 1.55rem) !important;
  font-weight:500 !important;
  border-left-color:#78c8e0 !important;
  max-width:36rem;
}

/* Halve bolletjes — decoratie die van boven/onder binnenkomt */
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  z-index:2;
  pointer-events:none;
  border-radius:50%;
  border:10px solid rgba(120,200,224,.38);
  background:radial-gradient(circle at 32% 28%, rgba(120,200,224,.42), rgba(22,28,72,.0) 68%);
  box-shadow:inset 0 0 40px rgba(120,200,224,.25);
  clip-path:inset(50% 0 0 0);
}
.hero::before{
  width:min(46vw, 460px); height:min(46vw, 460px);
  top:-12%; left:-6%;
  clip-path:inset(0 0 48% 0);
  animation:ssOrbFromTop 1.15s cubic-bezier(.22,1,.36,1) both;
}
.hero::after{
  width:min(52vw, 540px); height:min(52vw, 540px);
  bottom:-18%; right:-8%;
  clip-path:inset(48% 0 0 0);
  animation:ssOrbFromBot 1.15s cubic-bezier(.22,1,.36,1) .18s both;
}
@keyframes ssOrbFromTop{
  from{opacity:0; transform:translateY(-120px) scale(.7)}
  to{opacity:1; transform:translateY(0) scale(1)}
}
@keyframes ssOrbFromBot{
  from{opacity:0; transform:translateY(140px) scale(.7)}
  to{opacity:1; transform:translateY(0) scale(1)}
}

/* Pillen: oneven van boven, even van onder */
.hero-badges{
  gap:12px !important;
  margin-bottom:1.25rem !important;
}
.hero .badge{
  font-size:1.02rem !important;
  font-weight:700 !important;
  padding:12px 20px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.32) !important;
  color:#fff !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  opacity:0;
  animation:ssFromTop .85s cubic-bezier(.22,1,.36,1) forwards;
}
.hero .badge:nth-child(even){ animation-name:ssFromBot; }
.hero .badge:nth-child(1){ animation-delay:.15s }
.hero .badge:nth-child(2){ animation-delay:.28s }
.hero .badge:nth-child(3){ animation-delay:.41s }
.hero .badge:nth-child(4){ animation-delay:.54s }
.hero .badge:nth-child(5){ animation-delay:.67s }
@keyframes ssFromTop{
  from{opacity:0; transform:translateY(-56px) scale(.92)}
  to{opacity:1; transform:translateY(0) scale(1)}
}
@keyframes ssFromBot{
  from{opacity:0; transform:translateY(56px) scale(.92)}
  to{opacity:1; transform:translateY(0) scale(1)}
}
.hero-trust-strip{
  font-size:1.05rem !important;
  padding:16px 28px !important;
  opacity:0;
  animation:ssFromBot .9s cubic-bezier(.22,1,.36,1) .75s forwards;
}
.hero-trust-item{ font-size:1.02rem !important; font-weight:700 !important; }
.hero-cta{ animation:ssFromTop .8s cubic-bezier(.22,1,.36,1) .45s both; }
.hero-cta .btn-lg{ font-size:1.15rem !important; padding:16px 32px !important; }
html body .hero .btn-premium-outline,
html body .hero a.btn-white,
html body .hero .btn-white{
  background:rgba(255,255,255,.12) !important;
  background-image:none !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border:2px solid #78c8e0 !important;
  box-shadow:0 8px 24px rgba(22,28,72,.25) !important;
}
html body .hero .btn-premium-outline:hover,
html body .hero a.btn-white:hover{
  background:#78c8e0 !important;
  color:#161c48 !important;
  -webkit-text-fill-color:#161c48 !important;
}

/* Overige secties: grotere koppen + cards */
.section-header h2,
.ph-head h2,
.ba-section h2,
.solutions-section h2,
.werkwijze-section h2,
.faq-section h2,
.reviews-section h2,
.lead-form-content h2{
  font-size:clamp(2rem, 4.2vw, 3.1rem) !important;
}
.solution-card h3,.voordeel-card h3,.voordeel-card h4,.werkwijze-card h3,.garantie-card h3{
  font-size:1.35rem !important;
}
.solution-content p,.voordeel-card p,.faq-answer,.review-text{
  font-size:1.05rem !important;
}

/* Cookie banner in palet */
.cookie-banner{
  background:#fff !important;
  border-top:3px solid #161c48;
}
.cookie-inner p{ color:#334155 !important; font-size:1rem !important; }
html body .cookie-banner .btn,
html body .cookie-actions .btn,
html body .cookie-banner button,
html body .cookie-banner a.btn{
  border-radius:999px !important;
  font-weight:700 !important;
}
html body .cookie-banner .btn-cta,
html body .cookie-banner button[type="button"]:first-of-type,
html body .cookie-actions .btn:first-child{
  background:#161c48 !important;
  color:#fff !important;
  border-color:#161c48 !important;
}
html body .cookie-banner .btn:not(.btn-cta),
html body .cookie-actions .btn:last-child,
html body .cookie-banner button:last-child{
  background:#fff !important;
  color:#161c48 !important;
  border:2px solid #161c48 !important;
}

html body a[href*="privacy"],
html body .cookie-banner a{
  color:#202860 !important;
}

html body .ps-label{
  background:#eef3fb !important;
  color:#161c48 !important;
}
html body .ps-label-green{
  background:#e8f6fb !important;
  color:#1e5a78 !important;
}

html body .page-hero,
html body section.page-hero{
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(74,168,200,.28), transparent 55%),
    radial-gradient(800px 380px at 92% 18%, rgba(120,200,224,.22), transparent 52%),
    linear-gradient(135deg,#161c48 0%,#202860 48%,#1e3a5f 100%) !important;
}
html body .offerte-form-box,
html body .contact-form-box{
  border-image:none !important;
  border:1px solid #dbe4f0 !important;
  border-top:4px solid #161c48 !important;
  box-shadow:0 20px 50px rgba(22,28,72,.10) !important;
}
html body .offerte-trust-box{
  background:linear-gradient(160deg,#eef3fb 0%,#f8fafc 100%) !important;
}

/* Extra goud-killers met hogere specificiteit dan contrast-goud */
html body .btn-gold,
html body a.btn-gold{
  background:linear-gradient(135deg,#161c48,#202860) !important;
  color:#fff !important;
  border-color:#161c48 !important;
}

/* ── Alle inner pages: page-header / blog / diensten / CTA ─────────── */
html body .page-header,
html body header.page-header,
html body section.page-header{
  position:relative !important;
  isolation:isolate;
}
html body .page-header::before,
html body .page-header:before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:linear-gradient(160deg, rgba(22,28,72,.48) 0%, rgba(32,40,96,.32) 48%, rgba(22,28,72,.58) 100%) !important;
}
html body .page-header[style*="background-image"]::after,
html body .page-header[style*="background-image"]:after{
  background:linear-gradient(180deg, rgba(22,28,72,.52) 0%, rgba(22,28,72,.70) 100%) !important;
}
html body .page-header > *,
html body .page-header .container,
html body .page-header .header-content{
  position:relative !important;
  z-index:1 !important;
}
html body .page-header h1,
html body .page-header h1 span,
html body .page-header .page-title,
html body .page-hero h1,
html body .page-hero h1 span{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
html body .page-header p,
html body .page-hero p{ color:rgba(255,255,255,.9) !important; }

html body .blog-hero,
html body .blog-hero__overlay{
  background:linear-gradient(0deg, rgba(22,28,72,.92) 0%, rgba(22,28,72,.42) 58%, rgba(22,28,72,.15) 100%) !important;
}
html body .blog-hero{ background-color:#161c48 !important; }
html body .blog-hero__badge,
html body .page-header .badge,
html body .dienst-kicker,
html body .section-kicker,
html body .eyebrow,
html body .badge-gold,
html body .kicker{
  background:#161c48 !important;
  color:#fff !important;
  border-color:#161c48 !important;
}

html body .service-intro,
html body .service-details,
html body .blog-body,
html body .privacy-section,
html body .faq-block,
html body .contact-section,
html body .offerte-section,
html body .about-section,
html body .collectie-section,
html body .portfolio-section,
html body .kennisbank-section,
html body .reviews-extra{
  background:#fff !important;
}
html body .cta-section,
html body .blog-cta,
html body .numbers-section{
  background:linear-gradient(135deg,#161c48 0%,#202860 70%,#1e3a5f 100%) !important;
}
html body .cta-button,
html body a.cta-button{
  background:#161c48 !important;
  color:#fff !important;
  box-shadow:0 10px 28px rgba(22,28,72,.28) !important;
}
html body .cta-button.secondary,
html body a.cta-button.secondary{
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
  border:2px solid #78c8e0 !important;
  box-shadow:none !important;
}
html body .step-number,
html body .approach-step .step-number,
html body .timeline-number{
  background:linear-gradient(135deg,#161c48,#4aa8c8) !important;
  color:#fff !important;
}
html body .approach-step{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(120,200,224,.25) !important;
}
html body .detail-label,
html body .blog-hero__badge{
  background:#eef3fb !important;
  color:#161c48 !important;
}
html body .stars,
html body .rating-stars,
html body .stars-large{ color:#4aa8c8 !important; }

html body .btn-outline,
html body a.btn-outline,
html body .btn-white:not(.hero .btn-white){
  color:#161c48 !important;
  border-color:#161c48 !important;
  background:#fff !important;
}
html body .page-header .btn-outline,
html body .page-header a.btn-white,
html body .page-header .btn-white,
html body .cta-section .btn-outline{
  color:#fff !important;
  border-color:#78c8e0 !important;
  background:rgba(255,255,255,.12) !important;
}

html body .lead-form-section,
html body .lead-form-section::before{
  background:linear-gradient(160deg,#161c48 0%,#202860 55%,#1e3a5f 100%) !important;
}
html body .garantie-section,
html body .garantie-section::before{
  background:linear-gradient(135deg,#161c48 0%,#1e3a5f 100%) !important;
}
html body .garantie-card:hover{ border-color:rgba(74,168,200,.5) !important; }
html body .garantie-featured{
  background:rgba(74,168,200,.16) !important;
  border-color:rgba(74,168,200,.45) !important;
  box-shadow:0 12px 40px rgba(22,28,72,.2) !important;
}

html body .trust-icon,
html body .trust-item .trust-icon{
  background:linear-gradient(135deg,#eef3fb,#d5e4f4) !important;
  color:#202860 !important;
}
html body .trust-content strong,
html body .trust-stat-line strong{ color:#202860 !important; }

html body .back-to-top,
html body .back-to-top:hover{
  background:#161c48 !important;
}
html body .header-icon-btn{ background:#eef3fb !important; color:#161c48 !important; }

html body .notice,
html body .alert{ background:#eef3fb !important; border-left-color:#161c48 !important; }

html body .faq-item summary::after{
  background-color:#eef3fb !important;
}
html body .faq-item[open] summary::after{
  background-color:#161c48 !important;
}
html body .faq-item[open] summary{ background:#eef3fb !important; }

.site-footer{ background:#161c48 !important; }

/* ── Polish pass: contrast, restkleuren, checks, cookie, forms ───── */
html body .hero-highlight,
html body .hero-title .hero-highlight{
  background:none !important;
  background-image:none !important;
  -webkit-background-clip:unset !important;
  background-clip:unset !important;
  -webkit-text-fill-color:#d7f3fb !important;
  color:#d7f3fb !important;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.45)) !important;
  animation:none !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 .page-header h1,
html body .page-hero h1{
  text-shadow:0 2px 24px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35) !important;
}
html body .cookie-banner{
  transform:translateY(100%) !important;
  visibility:hidden;
}
html body .cookie-banner.show{
  transform:translateY(0) !important;
  visibility:visible;
}
html body .fa-check,
html body i.fa-check,
html body .ps-list-success li::before,
html body .solution-features li::before,
html body .werkwijze-card li::before,
html body .offerte-trust-box li::before,
html body .lead-form-benefits li::before{
  color:#4aa8c8 !important;
  border-color:#4aa8c8 !important;
}
html body .ph-chip,
html body .detail-label{
  color:#161c48 !important;
  background:#eef3fb !important;
  border-color:#dbe4f0 !important;
}
html body .form-option:has(input:checked),
html body .form-option:has(input:checked) span{
  background:#eef3fb !important;
  border-color:#161c48 !important;
  color:#161c48 !important;
}
html body .blog-hero__overlay{
  background:linear-gradient(0deg, rgba(22,28,72,.90) 0%, rgba(32,40,96,.45) 55%, rgba(22,28,72,.12) 100%) !important;
}
html body .garantie-section{
  background:linear-gradient(135deg,#161c48 0%,#1e3a5f 55%,#202860 100%) !important;
}
html body .lead-form-section{
  background:linear-gradient(160deg,#161c48 0%,#202860 55%,#1e3a5f 100%) !important;
}
html body input:focus,
html body textarea:focus,
html body select:focus{
  border-color:#202860 !important;
  box-shadow:0 0 0 3px rgba(32,40,96,.18) !important;
}
html body button[type=submit],
html body input[type=submit],
html body .form-submit,
html body .lead-form-box .btn-cta{
  background:linear-gradient(135deg,#161c48,#202860) !important;
  color:#fff !important;
  border-color:#161c48 !important;
}
html body .card,
html body .solution-card,
html body .voordeel-card,
html body .review-card,
html body .faq-item,
html body .extra-cta-card{
  border-color:#e8eef6 !important;
}
html body .site-footer a:hover{ color:#78c8e0 !important; }
html body .package-card,
html body .tarief-card,
html body .pricing-card{
  border:1px solid #e8eef6 !important;
  box-shadow:0 10px 32px rgba(22,28,72,.08) !important;
}

.particle,
.btn-premium{ box-shadow:0 8px 28px rgba(22,28,72,.28) !important; }
.btn-premium:hover{ box-shadow:0 14px 36px rgba(22,28,72,.38) !important; }
.badge:hover{ box-shadow:0 8px 22px rgba(74,168,200,.28) !important; }

html body .werkwijze-num{ color:#fff !important; }

@media (max-width:767px){
  html{font-size:17px}
  .hero-bg-img{ clip-path:circle(52% at 50% 42%); }
  .hero .badge{ font-size:.92rem !important; padding:10px 14px !important; white-space:normal !important; }
  .hero-title{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.hero .badge,.hero-trust-strip,.hero-cta,
  html body .logo-link, html body .logo-link::after{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}

/* ── Logo groot + nette header-animatie ─────────────────────────── */
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;
}

/* Restgoud / zwart → navy */
html body [style*="background:#C4873B"],
html body [style*="background: #C4873B"],
html body [style*="background:#c4873b"]{
  background:#161c48 !important;
}
html body [style*="color:#C4873B"],
html body [style*="color: #C4873B"],
html body [style*="color:#c4873b"]{
  color:#4aa8c8 !important;
}
html body [style*="background:#000"],
html body [style*="background:#111"],
html body [style*="background:#0a0a0a"],
html body [style*="background:#1a1a1a"]{
  background:#161c48 !important;
}
html body .btn-premium:not(.btn-premium-outline),
html body .btn-gold,
html body .gold-btn{
  background:linear-gradient(135deg,#161c48,#202860) !important;
  color:#fff !important;
  border-color:#161c48 !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;
  }
}

/* FORCE-APPEND-20260924j */
/* ss-navy-force.css — last-wins navy+cyan + hero readability 20260924j */
:root{
  --ss-navy:#202860;
  --ss-navy-deep:#161c48;
  --ss-cyan:#78c8e0;
  --accent:#202860;
  --accent-hover:#161c48;
  --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;
}