:root{--tekst:#1d2a2a;--zacht:#5b6b6a;--accent:#1f6f66;--accent-licht:#e8f2f0;--rand:#dde5e3;--max:60rem}
*{box-sizing:border-box}
body{margin:0;font:1.0625rem/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;color:var(--tekst);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:10}
.site-header{border-bottom:1px solid var(--rand)}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-block:1rem}
.logo img{width:13rem}
nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
nav a{text-decoration:none;color:var(--tekst);font-weight:500;padding:.25rem 0;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current=page]{color:var(--accent);border-color:var(--accent)}
main{padding-block:2.5rem 3rem}
h1,h2,h3{line-height:1.25;color:var(--accent)}
.hero h1{font-size:clamp(2rem,5vw,3rem);margin:0}
.tagline{text-transform:uppercase;letter-spacing:.15em;color:var(--zacht);margin:.25rem 0 1.5rem}
.content{max-width:44rem}
.drijfveren{margin-top:2.5rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem}
.kaart{background:var(--accent-licht);border-radius:.5rem;padding:1.25rem}
.kaart h3{margin-top:0}
.kaart p{margin:0}
.site-footer{background:#f5f8f7;border-top:1px solid var(--rand);padding-block:2rem;font-size:.95rem}
.footer-inner{display:grid;grid-template-columns:8rem 1fr;gap:1.5rem;align-items:start}
.footer-inner img{width:8rem;border-radius:.5rem}
.footer-inner p{margin:0 0 .75rem}
.copy{color:var(--zacht);font-size:.85rem;margin-top:1.5rem}
@media (max-width:30rem){.footer-inner{grid-template-columns:1fr}}