:root{--green:#35a828;--black:#0b0d0c;--muted:#666;--light:#f5f6f4}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#111;background:#fff}a{color:inherit;text-decoration:none}.wrap{width:min(1160px,92%);margin:auto}
.site-header{background:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 18px #00000012}.nav{height:92px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center}.brand img{width:220px;height:72px;object-fit:contain;object-position:left center}.nav nav{display:flex;align-items:center;gap:24px;font-size:13px;font-weight:800;text-transform:uppercase}.nav nav>a:not(.btn):hover{color:var(--green)}.menu{display:none;border:0;background:none;font-size:26px}
.btn{display:inline-block;border:0;background:var(--green);color:#fff;padding:17px 25px;border-radius:4px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;cursor:pointer}.btn.small{padding:14px 19px}.btn.ghost{background:transparent;border:2px solid #fff}
.hero{height:560px;background:url('assets/hero-roofer.webp') center/cover no-repeat;position:relative;color:#fff}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.63) 40%,rgba(0,0,0,.12) 78%)}.hero-content{height:100%;position:relative;display:flex;align-items:center}.hero h1{font-size:54px;line-height:1.04;margin:12px 0 18px;letter-spacing:-1px}.eyebrow{font-size:13px;font-weight:900;letter-spacing:2px;margin:0}.green{color:var(--green)}.lead{font-size:19px;line-height:1.6;max-width:500px}.actions{display:flex;gap:14px;margin-top:30px}
.benefits{border-bottom:1px solid #e5e5e5}.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:30px 0;gap:25px}.benefit-grid article{display:flex;gap:14px;align-items:center}.benefit-grid span{width:50px;height:50px;border:2px solid var(--green);border-radius:50%;display:grid;place-items:center;color:var(--green);font-size:23px;font-weight:bold}.benefit-grid strong{font-size:16px}.benefit-grid p{font-size:13px;color:var(--muted);margin:6px 0 0;line-height:1.4}
.section{padding:90px 0}.section h2,.project h2{font-size:42px;line-height:1.12;margin:10px 0 18px;max-width:720px}.intro{max-width:760px;color:var(--muted);line-height:1.7}.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;margin-top:42px}.cards article{background:var(--light);padding:28px 22px;min-height:230px;border-top:4px solid var(--green)}.cards b{color:var(--green);font-size:13px}.cards h3{font-size:20px;margin:24px 0 10px}.cards p{font-size:14px;line-height:1.6;color:#555}
.project{background:#f7f7f7;padding:80px 0}.project-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:70px}.project-photo img{width:100%;height:430px;object-fit:cover}.project-copy p{line-height:1.7;color:#555}.text-link{font-weight:900;color:var(--green)}
.reviews{background:#fff}.reviews-head{display:flex;justify-content:space-between;gap:40px;align-items:flex-end}.rating-badge{background:var(--light);border-left:4px solid var(--green);padding:20px 24px;min-width:260px}.rating-badge strong,.rating-badge small{display:block}.rating-badge small{color:#777;margin-top:6px;line-height:1.4}.stars{color:var(--green);letter-spacing:2px;font-size:20px}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}.review-card{border:1px solid #e5e5e5;padding:24px;background:#fff;box-shadow:0 10px 30px #00000008}.review-card p{font-size:15px;line-height:1.65;color:#444;min-height:95px}.review-card strong{display:block;margin-top:14px}.review-card small{display:block;color:#999;margin-top:5px}
.dark{background:var(--black);color:#fff}.two{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}.two p{line-height:1.8;color:#d0d0d0}.guarantee{margin-top:30px;border-left:4px solid var(--green);padding-left:20px}.guarantee strong{font-size:24px;color:#fff}.guarantee small{color:#aaa}
.quote{background:#fff}.quote-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.quote-grid>div>p:last-child{line-height:1.7;color:#666}form{background:#f4f5f3;padding:32px}.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}input,select,textarea{width:100%;padding:15px;border:1px solid #d8d8d8;background:#fff;font:inherit;margin-bottom:14px}textarea{resize:vertical}form small{display:block;color:#777;margin-top:12px;line-height:1.4}
footer{background:#070807;color:#ddd;padding:55px 0 20px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:45px}.footer-grid img{width:240px}.footer-grid strong{color:#fff}.footer-grid p{font-size:14px;line-height:1.8;color:#aaa}.footer-grid a{color:var(--green);font-weight:bold}.bottom{border-top:1px solid #222;margin-top:35px;padding-top:20px;font-size:12px;color:#777}
@media(max-width:850px){.nav{height:78px}.brand img{width:190px;height:58px;object-fit:contain;object-position:left center}.menu{display:block}.nav nav{display:none;position:absolute;top:78px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:22px 5%;gap:0;box-shadow:0 12px 20px #0002}.nav nav.open{display:flex}.nav nav a{padding:14px}.hero{height:570px;background-position:62% center}.hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.42))}.hero h1{font-size:40px}.benefit-grid{grid-template-columns:1fr 1fr}.cards{grid-template-columns:1fr 1fr}.project-grid,.two,.quote-grid{grid-template-columns:1fr;gap:35px}.reviews-head{display:block}.rating-badge{margin-top:20px}.review-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.section{padding:65px 0}}
@media(max-width:520px){.hero h1{font-size:34px}.lead{font-size:16px}.actions{flex-direction:column;align-items:flex-start}.benefit-grid,.cards,.footer-grid,.row,.review-grid{grid-template-columns:1fr}.section h2,.project h2{font-size:33px}.project-photo img{height:300px}.benefit-grid{padding:25px 0}.hero{height:600px}}

/* Definitieve header-logo correctie */
.site-header .brand{
  width: 245px;
  height: 74px;
  display:flex;
  align-items:center;
  overflow:visible;
  flex-shrink:0;
}
.site-header .brand img{
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:245px !important;
  object-fit:contain !important;
  object-position:left center !important;
}
@media (max-width:850px){
  .site-header .nav{height:92px;}
  .site-header .brand{
    width:210px;
    height:76px;
    overflow:visible;
  }
  .site-header .brand img{
    width:100% !important;
    height:100% !important;
    max-width:210px !important;
    max-height:76px !important;
    object-fit:contain !important;
    object-position:left center !important;
  }
}
@media (max-width:520px){
  .site-header .brand{
    width:205px;
    height:74px;
  }
  .site-header .brand img{
    max-width:205px !important;
    max-height:74px !important;
  }
}