:root{ --ms-green:#015148; --ms-yellow:#F2B707; --ms-red:#BC2A18; --ms-cream:#F3E3D5; --ms-ink:#0E2C27; --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.08); --container:1200px }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--ms-ink); background:var(--ms-cream); line-height:1.6}
h1,h2,h3{font-family:Dosis,Inter,sans-serif; line-height:1.15; margin:0 0 .5rem}
h1{font-size:clamp(2rem,4vw + .5rem,3rem); color:var(--ms-green)}
h2{font-size:clamp(1.4rem,2.2vw + .5rem,2rem); color:var(--ms-green)}
p{margin:.25rem 0 1rem}
a{color:inherit}
img{max-width:100%; height:auto; display:block}
.container{max-width:var(--container); padding:0 1rem; margin-inline:auto}


/* Header */
.ms-header{position:sticky; top:0; z-index:40; backdrop-filter:saturate(110%) blur(6px); background:rgba(243,227,213,.95); border-bottom:1px solid rgba(1,81,72,.12)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:.75rem; height:64px}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none}
.brand-logo{height:40px}
.brand-logo.small{height:28px}
.brand-text{font-family:Dosis,Inter,sans-serif; font-size:1.25rem; letter-spacing:.04em}
.brand-text-wide{letter-spacing:.1em}
.nav-links{display:flex; align-items:center; gap:.5rem}
.nav-links a{padding:.5rem .8rem; border-radius:999px; text-decoration:none; font-weight:600}
.nav-links a:hover{background:rgba(1,81,72,.08)}
.btn{display:inline-block; padding:.75rem 1rem; border-radius:999px; font-weight:700; text-decoration:none}
.btn-cta{background:var(--ms-yellow); color:#3a2b00; box-shadow:var(--shadow)}
.btn-outline{border:2px solid var(--ms-green); color:var(--ms-green)}
.hamburger{display:none; border:0; background:transparent; font-size:1.6rem}
#menu-toggle{display:none}


/* Mobile nav */
@media (max-width: 820px){
	.hamburger{display:block}
	.nav-links{display:none}
	#menu-toggle:checked + .nav-links{display:flex; position:absolute; left:0; right:0; top:64px; flex-direction:column; background:rgba(243,227,213,.98); padding:1rem; border-bottom:1px solid rgba(1,81,72,.12); gap:.25rem}
	#menu-toggle:checked + .nav-links a{padding:.9rem 1rem}
}


/* Hero */
.hero{padding:clamp(1.2rem, 3vw, 2.5rem) 0}
.hero-wrap{display:grid; grid-template-columns:1fr; gap:1rem; align-items:center}
.hero-img{border-radius:var(--radius); box-shadow:var(--shadow)}
.lead{font-size:1rem; opacity:.92}
.cta-row{display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin-top:.5rem}
.note{font-size:.9rem; opacity:.8}
@media (min-width: 900px){ .hero-wrap{grid-template-columns:1.2fr 1fr; gap:2rem} }


/* Secties */
.section{padding:clamp(1.4rem, 3.5vw, 3rem) 0}


/* Grid producten */
.grid{display:grid; gap:1rem; grid-template-columns:1fr}
@media (min-width:600px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{background:white; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column}
.card-img{width:100%; height:200px; object-fit:cover}
.card-body{padding:1rem}
.price{font-weight:800; color:var(--ms-green)}


/* Split */
.split{display:grid; grid-template-columns:1fr; gap:1rem; align-items:center}
@media (min-width: 900px){.split{grid-template-columns:1fr 1fr; gap:2rem}}
.panel{background:white; border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem}
.panel-img{border-radius:var(--radius); box-shadow:var(--shadow)}


/* RichText guards */
.richtext img{max-width:100%; height:auto}
.richtext h2,.richtext h3{font-family:Dosis,Inter,sans-serif; color:var(--ms-green)}


/* Footer */
.ms-footer{margin-top:2rem; background:#0f332f; color:#e9f5f3}
.ms-footer a{color:#e9f5f3}
.footer-grid{display:grid; gap:1rem; grid-template-columns:1fr}
@media (min-width:900px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.small{font-size:.9rem; opacity:.85}