/* Stukadoor Gouda: opmaak volgens het merkboek. Kleuren en maten komen uit variables.css */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-tekst);color:var(--zwart);background:var(--creme);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-kop);font-weight:400;line-height:1.05;margin:0;letter-spacing:-.01em;overflow-wrap:break-word}
p{margin:0}
.wrap{max-width:var(--breed);margin:0 auto;padding:0 var(--s-5)}
.label{display:inline-block;font-weight:800;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase}

/* De Streep: één haal met de spaan */
.streep{display:inline-block;width:64px;height:12px;border-radius:var(--r-pil);background:var(--terracotta)}
.streep-groen{background:var(--groen)}

/* Knoppen */
.knop{font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);font-weight:800;font-size:1rem;text-decoration:none;border-radius:var(--r-pil);padding:var(--s-4) var(--s-6);border:0;cursor:pointer;transition:background .15s,color .15s}
.knop-terra{background:var(--terracotta);color:var(--creme)}
.knop-terra:hover{background:var(--terracotta-donker)}
.knop-licht{background:var(--creme);color:var(--groen)}
.knop-licht:hover{background:var(--zand)}
.knop-rand{background:transparent;color:var(--creme);box-shadow:inset 0 0 0 2px var(--creme)}
.knop-rand:hover{background:var(--creme);color:var(--groen)}

/* Kop van de site */
.kop-balk{background:var(--groen);color:var(--creme)}
.kop-balk .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);height:var(--kop-hoogte)}
.merk{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;color:var(--creme)}
.merk img{width:56px;height:auto}
.merk-naam{font-family:var(--font-kop);font-size:1.35rem;line-height:.95}
.merk-naam i{display:inline-block;width:22px;height:7px;border-radius:var(--r-pil);background:var(--terracotta);margin-left:3px;vertical-align:2px}
.menu{display:flex;align-items:center;gap:var(--s-2)}
.menu a{text-decoration:none;font-weight:700;font-size:.92rem;padding:var(--s-2) var(--s-4);border-radius:var(--r-pil);background:var(--groen-licht)}
.menu a:hover{background:var(--creme);color:var(--groen)}
.menu .knop{background:var(--terracotta);padding:var(--s-3) var(--s-5)}
.menu-knop{display:none;background:none;border:0;color:var(--creme);font:inherit;font-weight:800;cursor:pointer;padding:var(--s-2)}

/* Hero */
.hero{background:var(--groen);color:var(--creme);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7);align-items:end;padding-top:var(--s-7)}
.hero-tekst{padding-bottom:var(--s-8)}
.hero .label{color:var(--groen-zacht);margin-bottom:var(--s-5)}
.hero h1{font-size:clamp(3rem,7vw,5.6rem);color:var(--creme)}
.hero h1 span{display:block}
.hero-intro{display:flex;gap:var(--s-4);align-items:flex-start;margin-top:var(--s-6);max-width:470px}
.hero-intro .streep{flex:none;margin-top:9px}
.hero-intro p{font-size:1.1rem}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.hero-beeld{position:relative;align-self:end}
/* Homepage-hero vult het hele scherm (onder de kopbalk) */
@media(min-width:761px){
  .hero .wrap{min-height:calc(100vh - var(--kop-hoogte));min-height:calc(100svh - var(--kop-hoogte));align-items:stretch}
  .hero-tekst{align-self:center;padding-bottom:var(--s-7)}
  .hero-beeld{display:flex;justify-content:flex-end}
  .hero .boog{height:calc(100svh - var(--kop-hoogte) - var(--s-7));max-height:860px;min-height:420px;max-width:100%;aspect-ratio:auto;width:min(100%,calc((100svh - var(--kop-hoogte) - var(--s-7)) * .87))}
}

/* De Boog: kader voor portretten */
.boog{border-radius:240px 240px 0 0;overflow:hidden;background:var(--groen-licht);aspect-ratio:4/4.6}
.boog img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.badge{position:absolute;left:-24px;bottom:var(--s-6);display:flex;align-items:center;gap:var(--s-3);background:var(--creme);color:var(--zwart);border-radius:var(--r-md);padding:var(--s-3) var(--s-5) var(--s-3) var(--s-3);box-shadow:var(--schaduw)}
.badge img{width:72px}
.badge strong{display:block;font-family:var(--font-kop);font-weight:400;font-size:1.5rem;line-height:1}
.badge span{font-size:.85rem;color:var(--grijs)}

/* Vertrouwen-strip */
.strip{background:var(--zand)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4);padding-top:var(--s-5);padding-bottom:var(--s-5)}
.strip div{display:flex;align-items:center;gap:var(--s-3);font-weight:700;font-size:.95rem}
.strip .streep{width:28px;height:9px;flex:none}

/* Secties */
.sectie{padding:var(--s-9) 0}
.sectie-zand{background:var(--zand)}
.sectie-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-6);align-items:end;margin-bottom:var(--s-7)}
.sectie-kop h2{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.sectie-kop p{color:var(--grijs);font-size:1.08rem;max-width:480px}
.nummer{display:block;font-family:var(--font-kop);color:var(--groen-zacht);font-size:clamp(3rem,6vw,4.6rem);line-height:.9;margin-bottom:var(--s-2)}

/* Grote zin */
.statement{font-family:var(--font-kop);font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.2;max-width:880px}
.statement em{font-style:normal;color:var(--groen-licht)}

/* Dienstkaarten */
.kaarten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
.kaart{display:flex;flex-direction:column;background:var(--zand);border-radius:var(--r-lg);padding:var(--s-6) var(--s-5);text-decoration:none}
.sectie-zand .kaart{background:var(--creme)}
.kaart-vorm{height:88px;margin-bottom:var(--s-5);display:flex;align-items:flex-end}
.kaart h3{font-size:1.45rem;margin-bottom:var(--s-3)}
.kaart p{color:var(--grijs);font-size:.98rem}
.kaart .meer{margin-top:auto;padding-top:var(--s-5);font-weight:800;color:var(--terracotta-donker)}
.vorm-boog{width:64px;height:84px;border-radius:40px 40px 0 0;background:var(--groen)}
.vorm-cirkel{width:80px;height:80px;border-radius:50%;background:var(--terracotta)}
.vorm-streep{width:120px;height:22px;border-radius:var(--r-pil);background:var(--groen)}
.vorm-duo{display:flex;align-items:flex-end;gap:var(--s-2)}
.vorm-duo span:first-child{width:46px;height:84px;border-radius:30px 30px 0 0;background:var(--terracotta)}
.vorm-duo span:last-child{width:30px;height:52px;border-radius:20px 20px 0 0;background:var(--zwart)}

/* Werkwijze met Stucmaatje */
.werkwijze{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-7);align-items:center}
.maatje{background:var(--zand);border-radius:var(--r-lg);padding:var(--s-6);display:flex;justify-content:center}
.maatje img{width:220px}
.stappen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.stap{background:var(--zand-licht);border-radius:var(--r-md);padding:var(--s-5)}
.stap b{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--groen);color:var(--creme);font-family:var(--font-kop);font-weight:400;font-size:1.2rem;margin-bottom:var(--s-3)}
.stap h3{font-size:1.3rem;margin-bottom:var(--s-2)}
.stap p{color:var(--grijs);font-size:.98rem}

/* Reviews */
.reviews-blok{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-6);align-items:stretch}
.score{background:var(--groen);color:var(--creme);border-radius:var(--r-lg);padding:var(--s-6);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-5)}
.score strong{font-family:var(--font-kop);font-weight:400;font-size:4.4rem;line-height:1}
.score .sterren{color:var(--terracotta-licht);letter-spacing:.15em;font-size:1.2rem}
.score img{width:120px;align-self:flex-end}
.review-lijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.review{background:var(--creme);border-radius:var(--r-lg);padding:var(--s-6)}
.review p{font-size:1.05rem}
.review .wie{margin-top:var(--s-4);font-weight:800;font-size:.9rem}
.review .wie span{display:block;font-weight:400;color:var(--grijs)}

/* Garantie */
.garantie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.garantie div{border-top:3px solid var(--zwart);padding-top:var(--s-4)}
.garantie strong{display:block;font-family:var(--font-kop);font-weight:400;font-size:2.6rem;line-height:1;margin-bottom:var(--s-2)}
.garantie p{color:var(--grijs)}

/* Offerte */
.offerte{background:var(--groen);color:var(--creme)}
.offerte .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-7);align-items:center;padding-top:var(--s-9);padding-bottom:var(--s-9)}
.offerte h2{font-size:clamp(2.4rem,4.8vw,3.8rem);margin:var(--s-4) 0}
.offerte .label{color:var(--groen-zacht)}
.offerte-maatje{display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-6)}
.offerte-maatje img{width:110px}
.offerte-maatje a{color:var(--creme);font-weight:800;font-size:1.25rem}
.formulier{background:var(--creme);color:var(--zwart);border-radius:var(--r-lg);padding:var(--s-6)}
.formulier h3{font-size:1.6rem;margin-bottom:var(--s-2)}
.formulier p{color:var(--grijs);margin-bottom:var(--s-5);font-size:.95rem}
.veld{width:100%;font:inherit;font-size:1rem;padding:var(--s-3) var(--s-4);border:2px solid var(--zand);border-radius:var(--r-md);background:var(--zand-licht);margin-bottom:var(--s-3);color:var(--zwart)}
.veld:focus{outline:none;border-color:var(--groen)}
.formulier .knop{width:100%}

/* Voet */
.voet{background:var(--zwart);color:var(--zand);padding:var(--s-8) 0 var(--s-5)}
.voet-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6)}
.voet h4{font-family:var(--font-kop);font-weight:400;font-size:1.2rem;color:var(--creme);margin:0 0 var(--s-3)}
.voet ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-2)}
.voet a{text-decoration:none}
.voet a:hover{color:var(--terracotta-licht)}
.voet .merk{margin-bottom:var(--s-4)}
.voet-onder{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;border-top:1px solid var(--grijs);margin-top:var(--s-7);padding-top:var(--s-4);font-size:.85rem}

@media(max-width:980px){
  .kaarten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .voet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .werkwijze,.reviews-blok{grid-template-columns:minmax(0,1fr)}
  .maatje img{width:170px}
}
@media(max-width:980px){
  .menu{display:none;position:absolute;left:0;right:0;top:var(--kop-hoogte);flex-direction:column;align-items:stretch;background:var(--groen);padding:var(--s-4);z-index:20}
  .menu a{padding:var(--s-3) var(--s-4)}
  .menu.open{display:flex}
  .menu-knop{display:block}
  .kop-balk{position:relative}
}
@media(max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 var(--s-4)}
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:var(--s-5);padding-top:var(--s-6)}
  .hero-tekst{padding-bottom:0}
  .hero-beeld{max-width:380px;margin:0 auto;width:100%}
  .badge{left:0}
  .sectie{padding:var(--s-8) 0}
  .sectie-kop{grid-template-columns:minmax(0,1fr)}
  .kaarten,.stappen,.review-lijst,.garantie,.strip .wrap,.voet-grid{grid-template-columns:minmax(0,1fr)}
  .offerte .wrap{grid-template-columns:minmax(0,1fr);padding-top:var(--s-8);padding-bottom:var(--s-8)}
}