:root{--red:#a80f11;--nav:#af3333;--gold:#f0bb1f;--text:#666;--head:#222;--bg-alt:#fcfcfc}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Open Sans",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.75;color:var(--text);background:#fff}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:1250px;margin:0 auto;padding:0 20px}

/* header */
.topbar{background:var(--red);color:#fff;font-size:11px;font-weight:700}
.topbar .wrap{text-align:right;padding:4px 20px}
.topbar a{color:#fff}
.logo-bar .wrap{display:flex;align-items:center;justify-content:space-between;padding:6px 20px}
.logo{height:38px;width:auto}
.menu-toggle{display:none;background:none;border:0;font-size:26px;color:var(--red);cursor:pointer}
.mainnav{background:var(--nav)}
.mainnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.mainnav a{display:block;color:#fff;font-weight:600;font-size:13px;padding:11px 9px}
.mainnav li:first-child a{padding-left:0}
.mainnav a:hover,.mainnav a.active{text-decoration:none;opacity:.8}

/* home */
.hero img{width:100%;height:clamp(220px,28vw,560px);object-fit:cover}
.band{background:var(--nav) linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/40px 40px;color:#fff}
.band-inner{display:flex;justify-content:space-between;align-items:center;padding:28px 20px;gap:20px}
.band p{margin:0;font-size:22px}
.btn-outline{border:2px solid #fff;color:#fff;border-radius:30px;padding:8px 34px;font-size:11px}
.btn-outline:hover{background:#fff;color:var(--nav);text-decoration:none}
.section-title{text-align:center;font-weight:400;font-size:20px;letter-spacing:.5px;color:var(--head);margin:50px 0 8px}
.line{display:block;width:40px;height:2px;background:var(--gold);margin:14px 0 22px}
.center-line{margin:0 auto 36px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 72px;padding-bottom:60px}
.card{color:var(--head)}
.card img{aspect-ratio:165/137;object-fit:cover;width:100%}
.card span{display:block;margin-top:22px;font-size:14px}
.card:hover{text-decoration:none}.card:hover img{opacity:.9}
.why{background:var(--bg-alt);padding:10px 0 50px}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.usp{display:flex;gap:16px}
.icon{flex:0 0 58px;height:58px;border:1px solid #e5e5e5;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff}
.icon svg{width:22px;height:22px;fill:none;stroke:#333;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.usp h3{margin:0 0 4px;font-size:16px;letter-spacing:1px;color:var(--head);font-weight:600}
.usp p{margin:0}

/* subpages */
.content{padding-top:30px;padding-bottom:20px}
.page-title{color:var(--red);font-weight:400;font-size:24px;margin:0}
.page-title.dark{color:var(--head)}
.subtitle{color:#e2e2e2;margin:6px 0 0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.two-col .media{padding-top:8px}
.text h3,.text h4{color:var(--red);font-size:13px;font-weight:700;margin:16px 0 6px}
.text h3.lead-q{font-size:14px}
.text p{margin:0 0 10px}
.text ul{padding-left:20px}
.text.full{margin-top:40px}
.center{text-align:center;margin:40px 0 30px}
.btn{display:inline-block;background:var(--red);color:#fff;border-radius:40px;padding:16px 50px;font-size:12px}
.btn:hover{text-decoration:none;filter:brightness(1.1)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 2fr;gap:50px}
.form-title{font-weight:400;font-size:18px;color:var(--head);margin:0}
.form label{display:block;font-weight:700;font-size:12px;color:#555;margin-bottom:14px}
.form label span{color:var(--red)}
.form input,.form textarea{display:block;width:100%;margin-top:6px;border:1px solid #e1e1e1;background:#fafafa;padding:10px;font:inherit}
.form input:focus,.form textarea:focus{outline:2px solid var(--gold);background:#fff}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.half{max-width:50%}
.btn-square{background:var(--red);color:#fff;border:0;padding:12px 32px;font:inherit;font-size:12px;cursor:pointer}

/* footer */
.footer{padding:40px 0 50px}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.footer-logo{width:190px;margin-left:30px}
.footer h4{color:var(--red);margin:0 0 10px;font-size:13px}
.footer p{margin:0 0 12px}
.keurmerken{width:290px;margin-top:20px}
.to-top{position:fixed;right:30px;bottom:30px;width:34px;height:34px;background:#c4615c;color:#fff;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:16px}
.to-top:hover{text-decoration:none}

a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media (max-width:820px){
  .menu-toggle{display:block}
  .mainnav ul{display:none;flex-direction:column}
  body.nav-open .mainnav ul{display:flex}
  .mainnav li:first-child a{padding-left:9px}
  .grid{grid-template-columns:1fr 1fr;gap:30px}
  .why-grid,.two-col,.contact-grid,.footer-grid{grid-template-columns:1fr}
  .band-inner{flex-direction:column;text-align:center}
  .half{max-width:100%}.row2{grid-template-columns:1fr}
  .footer-logo{margin-left:0}
}
@media (max-width:480px){.grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formstatus{padding:12px 14px;margin:0 0 16px;font-weight:600}
.formstatus.ok{background:#e8f5e9;color:#1b5e20}
.formstatus.err{background:#fdecea;color:#a80f11}