/* Base */
:root{
  --bg-a: #fdfbf9;  /* licht */
  --bg-b: rgba(230, 82, 55, 0.10);  /* 10% van #e65237 */
  --accent-red: #e75234;
  --dark-gray: #444; /* iets lichter donkergrijs */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
  color:#000;
  background:var(--bg-a);
}

/* Layout helpers */
.wrap{width:min(1100px, 92vw); margin:0 auto; padding: clamp(16px, 2vw, 24px);}
.wrap.narrow{width:min(900px, 92vw)}
.grid.two{display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(16px, 4vw, 48px); align-items:center;}
.section{padding: clamp(56px, 8vw, 96px) 0; background:var(--bg-a);}
.section.alt{background:var(--bg-b);}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(6px);
  background: rgba(253,251,249,.8);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between;}
.logo{height:112px; width:auto; display:block} /* verdubbeld logo */
.nav a{
  text-decoration:none; color:#000; font-weight:600; margin-left:1.2rem;
  position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:var(--accent-red); transition:width .25s ease;
}
.nav a:hover::after{width:100%}

/* Hero */
.hero .hero-text h1{
  font-size: clamp(28px, 5vw, 48px);
  line-height:1.15;
  letter-spacing:-.02em;
  color: var(--accent-red);
}
.lead{font-size: clamp(16px, 2.2vw, 20px); opacity:.95}
.hero-photo .photo-mask{
  border-radius: 220px 0 0 220px; /* links halve cirkel, rechts recht */
  overflow:hidden;
  max-width:520px; margin-left:auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.hero-photo img{
  display:block; width:100%; height:auto; object-fit:cover;
}

/* Headings */
h2{
  font-size: clamp(22px, 3.4vw, 34px);
  margin:0 0 12px;
  color: var(--accent-red);
}
.section.alt h2{ color: var(--dark-gray); } /* koppen in gekleurde kaders donkergrijs */
.section:not(.alt) h2{ color: var(--accent-red); }

/* Contact */
.contact-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; align-items:start}
.cta-card{
  padding:22px; border-radius:16px; background:#fff; border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}
.cta-title{font-weight:700; font-size:20px; margin:0 0 12px; color:var(--dark-gray)}
.btn{
  display:inline-block; padding:12px 18px; border-radius: 220px 0 0 220px; font-weight:700;
  text-decoration:none; color:#fff; background:var(--accent-red);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 16px rgba(231,82,52,.25); }
a{color:#000}
a:hover{opacity:.9}

/* Footer */
.site-footer{padding:24px 0; border-top:1px solid rgba(0,0,0,.06); background:var(--bg-a)}
.site-footer .wrap{display:flex; align-items:center; justify-content:space-between}
.logo-footer{height:88px; width:auto} /* verdubbeld logo onderaan */

/* Reveal on scroll */
.reveal{opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease}
.reveal.revealed{opacity:1; transform:none}

/* Responsive */
@media (max-width: 900px){
  .grid.two{grid-template-columns: 1fr;}
  .hero-photo .photo-mask{max-width: 420px; margin: 12px 0 0 0;}
  .contact-grid{grid-template-columns: 1fr;}
}
@media (max-width: 640px){
  .nav{display:none}
  .logo{height:72px}
}