/* Shared chrome and visual finish across the PHP site. */
:root {
  --ink:#0b343d;
  --deep:#062c35;
  --paper:#f6f8f2;
  --lime:#ccf46d;
  --green:#317967;
  --line:#d3dfd6;
}
html { scroll-padding-top:84px; }
body { color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
.shell { width:min(1280px,calc(100% - 64px)); }
.site-header { height:82px; background:rgba(250,251,247,.97); border-bottom:1px solid #d8e3da; box-shadow:0 5px 20px #133d3010; backdrop-filter:blur(15px); }
.site-header .nav { height:100%; align-items:center; gap:0; }
.site-header .brand-logo { width:182px; }
.site-header .nav nav { align-self:stretch; margin-left:auto; gap:2px; }
.site-header .nav nav a { padding:0 15px; font-size:12px; font-weight:700; color:#31565a; }
.site-header .nav nav a:after { left:15px; right:15px; height:3px; }
.site-header .nav nav a:hover { background:#eef4ec; color:#124e48; }
.site-header .nav-cta { margin-left:17px; background:#0e3b44; min-height:48px; padding:13px 19px; border:1px solid #0e3b44; border-radius:2px; color:#fff; font-size:12px; font-weight:750; gap:18px; box-shadow:none; transition:background-color .22s ease,border-color .22s ease,color .22s ease; }
.site-header .nav-cta span { font-size:19px; transition:opacity .18s ease; }
.site-header--home .nav-cta { background:var(--lime); border-color:var(--lime); color:var(--ink); }
.site-header .nav-cta:is(:hover,:focus-visible) { background:#124f40; border-color:#124f40; color:#fff; }
.site-header .nav-cta:is(:hover,:focus-visible) span { opacity:0; }
.site-header .nav-cta:focus-visible { outline:3px solid #94cc61; outline-offset:3px; }
.site-header .menu-toggle { margin-left:10px; }
.primary-button,.lime-button { min-height:52px; border-radius:2px; font-size:12px; font-weight:750; padding:15px 19px; }
.content-page { background:#fff; }
.finance-page h2,.battery-page h2 { font-weight:690; letter-spacing:-.065em; }
.finance-page h2 { font-size:clamp(36px,3.7vw,55px); line-height:1.03; }
.finance-hero { padding:48px 0 60px; background:#f5f8f1; }
.finance-hero h1 { font-size:clamp(51px,5.2vw,76px); line-height:.97; letter-spacing:-.075em; font-weight:720; }
.finance-hero h1>span { color:#3b7869; }
.finance-hero-photo { min-height:560px; border-radius:2px; }
.finance-page-nav { background:#fff; }
.finance-page-nav>.shell { gap:25px; }
.finance-page-nav a { font-size:11px; font-weight:700; }
.finance-route { border-radius:2px; box-shadow:0 12px 30px #143d3210; }
.finance-route-light { background:#eaf4df; border-top-color:#377765; }
.finance-route .primary-button { margin-top:15px; }
.finance-final { background:#0b343d; }
.battery-hero h1 { font-size:clamp(55px,6.5vw,95px); }
.battery-page .primary-button { font-weight:750; }
.battery-cases article { transition:background .2s; }
.battery-cases article:hover { background:#f3f8ec; }
.site-footer { background:#062b35; color:#e5f0e9; padding:72px 0 0; }
.site-footer .footer-main { grid-template-columns:1.5fr .8fr .8fr; gap:clamp(40px,8vw,110px); padding-bottom:76px; }
.site-footer .footer-wordmark { width:209px; margin-bottom:26px; }
.site-footer .footer-identity>p { color:#c3d8ce; font-size:15px; line-height:1.65; max-width:400px; }
.site-footer .footer-services { margin-top:23px; color:#d0e6d4; font-size:11px; }
.site-footer .footer-services i { background:var(--lime); }
.site-footer .footer-navigation h2 { color:var(--lime); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; margin-bottom:21px; }
.site-footer .footer-navigation>a { font-size:13px; color:#d9e8e0; padding:8px 0; }
.site-footer .footer-navigation .footer-check-link { color:var(--lime); font-weight:800; margin-top:8px; }
.site-footer .footer-bottom { border-top-color:#31505a; padding:23px 0; }
.site-footer .footer-bottom>span,.site-footer .footer-bottom>p,.site-footer .footer-bottom>a { font-size:10px; color:#9cb9ae; }
.knowledge-page,.congestion-page { color:var(--ink); background:#fff; }
.knowledge-page h1,.knowledge-page h2,.knowledge-page h3,.congestion-page h1,.congestion-page h2,.congestion-page h3 { margin-top:0; letter-spacing:-.07em; }
.knowledge-page .eyebrow,.congestion-page .eyebrow { color:#a7d19c; font-size:10px; font-weight:800; letter-spacing:.13em; }
.knowledge-page .home-button,.congestion-page .home-button { min-height:55px; display:inline-flex; align-items:center; justify-content:space-between; gap:26px; padding:15px 20px; border-radius:2px; font-size:12px; font-weight:800; text-decoration:none; transition:background .2s; }
.knowledge-page .home-button span,.congestion-page .home-button span { font-size:21px; line-height:1; }
.knowledge-page .home-button--lime,.congestion-page .home-button--lime { color:var(--ink); background:var(--lime); box-shadow:0 4px 0 #436838; }
.knowledge-page .home-button--dark { color:#fff; background:var(--ink); box-shadow:0 4px 0 #a1c18a; }
.knowledge-hero,.congestion-hero { background:var(--deep); color:#fff; overflow:hidden; }
.knowledge-hero-grid,.congestion-hero-grid { min-height:625px; display:grid; grid-template-columns:1.08fr .75fr; align-items:center; gap:clamp(60px,11vw,175px); padding-block:80px; }
.knowledge-hero h1,.congestion-hero h1 { font-size:clamp(64px,6.3vw,100px); line-height:.92; margin-bottom:27px; }
.knowledge-hero h1 em,.congestion-hero h1 em { color:var(--lime); font-style:normal; }
.knowledge-hero-grid>div>p:not(.eyebrow),.congestion-hero-grid>div>p:not(.eyebrow) { max-width:610px; color:#c8dad2; font-size:16px; line-height:1.72; margin:0 0 30px; }
.knowledge-hero aside,.congestion-hero aside { padding:38px; border:1px solid #688078; border-top:5px solid var(--lime); background:#11424a; box-shadow:20px 25px 0 #002028; }
.knowledge-hero aside span,.congestion-hero aside span { display:block; color:var(--lime); font-size:9px; font-weight:850; letter-spacing:.13em; margin-bottom:42px; }
.knowledge-hero aside strong,.congestion-hero aside strong { display:block; font-size:clamp(28px,3vw,42px); line-height:1.06; letter-spacing:-.06em; }
.knowledge-hero aside p,.congestion-hero aside p { color:#b9d4c8; font-size:13px; line-height:1.7; border-top:1px solid #476b69; margin:30px 0 0; padding-top:22px; }
.knowledge-content,.congestion-explain { padding:clamp(75px,8vw,120px) 0; background:#f5f8f1; }
.knowledge-intro,.congestion-intro { display:grid; grid-template-columns:1fr .7fr; gap:80px; align-items:end; margin-bottom:45px; }
.knowledge-intro .eyebrow,.congestion-intro .eyebrow { color:#4f816d; }
.knowledge-intro h2,.congestion-intro h2 { font-size:clamp(45px,5vw,75px); line-height:1.02; margin:0; }
.congestion-intro h2 em { color:#3c7b68; font-style:normal; }
.knowledge-intro>p,.congestion-intro>p { color:#587267; max-width:470px; font-size:15px; line-height:1.72; margin:0 0 6px; }
.knowledge-grid,.congestion-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.knowledge-grid a,.congestion-cards article { min-height:325px; display:flex; flex-direction:column; padding:28px; background:#fff; border:1px solid #d0ded1; color:var(--ink); text-decoration:none; transition:transform .2s,background .2s,box-shadow .2s; }
.knowledge-grid a:hover { transform:translateY(-5px); background:#edfadf; box-shadow:0 18px 35px #133d3016; }
.knowledge-grid span,.congestion-cards span { color:#4d846d; font-size:10px; font-weight:850; letter-spacing:.11em; }
.knowledge-grid h3,.congestion-cards h3 { font-size:clamp(25px,2.8vw,37px); line-height:1.12; margin:43px 0 16px; }
.knowledge-grid p,.congestion-cards p { color:#60786e; font-size:13px; line-height:1.65; margin:0 0 20px; }
.knowledge-grid b { margin-top:auto; display:flex; justify-content:space-between; align-items:center; font-size:12px; }
.knowledge-grid b i { font-style:normal; font-size:24px; font-weight:400; }
.knowledge-final { background:#d8f1a9; padding:75px 0; }
.knowledge-final>.shell,.congestion-final>.shell { display:flex; justify-content:space-between; align-items:end; gap:50px; }
.knowledge-final .eyebrow { color:#45744d; }
.knowledge-final h2,.congestion-final h2 { font-size:clamp(37px,4.3vw,64px); line-height:1.04; margin-bottom:12px; }
.knowledge-final p:not(.eyebrow),.congestion-final p:not(.eyebrow) { max-width:600px; font-size:14px; line-height:1.7; color:#486d53; margin-bottom:0; }
.knowledge-final .home-button,.congestion-final .home-button { flex:none; }
.congestion-actions { display:flex; flex-wrap:wrap; align-items:center; gap:27px; }
.congestion-actions>a:last-child { color:#e3f0e6; font-size:12px; font-weight:800; text-decoration:none; border-bottom:1px solid #8cb5a7; padding-bottom:5px; }
.congestion-actions>a:last-child span { margin-left:12px; }
.congestion-cards article { border-top:4px solid #77a782; }
.congestion-final { background:var(--deep); padding:77px 0; color:#fff; }
.congestion-final .eyebrow { color:var(--lime); }
.congestion-final p:not(.eyebrow) { color:#c7d9d2; }
@media(max-width:1100px) {
  .site-header .brand-logo { width:162px; }
  .site-header .nav nav a { padding:0 10px; font-size:11px; }
  .site-header .nav-cta { margin-left:8px; padding-inline:14px; }
}
@media(max-width:860px) {
  html { scroll-padding-top:70px; }
  .shell { width:calc(100% - 36px); }
  .site-header { height:70px; }
  .site-header .brand-logo { width:152px; }
  .site-header .nav nav { display:none; position:absolute; top:70px; left:-18px; right:-18px; width:auto; background:#f9fbf6; border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:0 18px 30px #0b342a22; padding:13px 18px 21px; margin:0; flex-direction:column; align-items:stretch; gap:0; }
  .site-header .nav nav.is-open { display:flex; }
  .site-header .nav nav a { padding:14px 6px; border-bottom:1px solid #e2ebe2; font-size:14px; }
  .site-header .nav nav a:last-child { border:0; }
  .site-header .nav nav a:after { display:none; }
  .site-header .nav-cta { margin-left:auto; min-height:40px; padding:9px 12px; font-size:11px; }
  .site-header .menu-toggle { display:block; width:36px; }
  .finance-page-nav>.shell { overflow-x:auto; white-space:nowrap; }
  .site-footer .footer-main { grid-template-columns:1fr 1fr; gap:35px; }
  .site-footer .footer-identity { grid-column:1/-1; }
  .knowledge-hero-grid,.congestion-hero-grid { grid-template-columns:1fr; gap:50px; min-height:0; }
  .knowledge-hero aside,.congestion-hero aside { max-width:580px; }
  .knowledge-intro,.congestion-intro { grid-template-columns:1fr; gap:18px; }
  .knowledge-grid,.congestion-cards { grid-template-columns:1fr 1fr; }
}
@media(max-width:520px) {
  .site-header .brand-logo { width:132px; }
  .site-header .nav-cta { font-size:11px; width:auto; gap:5px; padding:9px 11px; min-height:38px; }
  .site-header .nav-cta span { font-size:15px; }
  .site-header .menu-toggle { margin-left:6px; }
  .finance-hero h1 { font-size:clamp(40px,11vw,54px); }
  .site-footer { padding-top:55px; }
  .site-footer .footer-main { grid-template-columns:1fr; gap:30px; padding-bottom:50px; }
  .site-footer .footer-identity { grid-column:auto; }
  .site-footer .footer-bottom { flex-wrap:wrap; gap:6px 20px; }
  .site-footer .footer-bottom>p { order:3; width:100%; }
  .knowledge-hero-grid,.congestion-hero-grid { padding-block:65px; gap:40px; }
  .knowledge-hero h1,.congestion-hero h1 { font-size:clamp(52px,13vw,72px); }
  .knowledge-hero-grid>div>p:not(.eyebrow),.congestion-hero-grid>div>p:not(.eyebrow) { font-size:14px; }
  .knowledge-hero aside,.congestion-hero aside { padding:27px; box-shadow:10px 13px 0 #002028; }
  .knowledge-content,.congestion-explain { padding:65px 0; }
  .knowledge-intro h2,.congestion-intro h2 { font-size:clamp(40px,11vw,57px); }
  .knowledge-grid,.congestion-cards { grid-template-columns:1fr; }
  .knowledge-grid a,.congestion-cards article { min-height:250px; }
  .knowledge-grid h3,.congestion-cards h3 { margin-top:31px; }
  .knowledge-final>.shell,.congestion-final>.shell { flex-direction:column; align-items:stretch; gap:25px; }
  .knowledge-final .home-button,.congestion-final .home-button { width:100%; }
}

/* Eén rustige letterafstand voor koppen, ook waar paginastijlen strakker tracken. */
main h1 { letter-spacing:-.05em !important; }
main h2 { letter-spacing:-.035em !important; }
main h3 { letter-spacing:-.02em !important; }