/* Thema Mulder: Mulder-rood uit het logo, zinkgrijs, Bitter als koptekst.
   Het enige opvallende element: de foto in de dakvorm (gevel) bovenaan, zoals het huisje in het logo. */
@font-face {
  font-family: "Bitter";
  src: url("../fonts/bitter-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
:root {
  --brand: #B01240;        /* Mulder-rood, iets donkerder dan het logo voor leesbaar contrast */
  --brand-dark: #8C0E33;
  --on-brand: #FFFFFF;
  --ink: #1F2428;
  --heading: #1F2428;
  --muted: #545D63;
  --link: #9E1039;
  --bg: #FFFFFF;
  --bg-soft: #EEF0F1;      /* licht zink */
  --zinc: #8F989E;         /* zinkgrijs uit het logo, alleen decoratief */
  --line: #D5DADD;
  --field-line: #8F989E;
  --focus: #1F6FB2;
  --header-bg: #FFFFFF;
  --nav-ink: #1F2428;
  --footer-bg: #1F2428;
  --footer-ink: #F2F4F5;
  --footer-line: #3A4146;
  --font-head: "Bitter", Georgia, "Times New Roman", serif;
  --radius: 3px;
}

body { line-height: 1.65; }

.hero { background: var(--bg-soft); padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) 0; overflow: hidden; }
.hero .wrap { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 56rem) { .hero .wrap { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.hero h1 { max-width: 15ch; }
.hero .since { font-family: var(--font-head); font-weight: 600; color: var(--muted); font-size: 1.15rem; margin-bottom: .75rem; }
.hero .copy { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

/* De gevel: foto in de vorm van een huis met puntdak */
.gable { position: relative; align-self: end; }
.gable::before {
  content: ""; position: absolute; inset: -14px -14px 0 -14px;
  background: var(--zinc);
  clip-path: polygon(0 34%, 50% 0, 100% 34%, 100% 100%, 0 100%);
}
.gable picture, .gable img {
  position: relative;
  clip-path: polygon(0 30%, 50% 0, 100% 30%, 100% 100%, 0 100%);
}
.gable img { width: 100%; aspect-ratio: 628 / 330; object-fit: cover; object-position: center 60%; }

.site-footer .legal { color: #C9CED1; }

.sister { border-left: 4px solid var(--zinc); padding: .25rem 0 .25rem 1rem; }

/* Kopband: licht zink met een zinkgrijze daklijn */
:root {
  --band-bg: var(--bg-soft);
  --band-edge: 4px solid var(--zinc);
  --band-ink: var(--ink);
  --band-muted: var(--muted);
  --fact-line: var(--brand);
}
.page-head h1 { max-width: 28ch; }

/* Keurmerken: vakken van gelijke breedte, op mobiel twee naast elkaar */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; max-width: 54rem; }
.badges picture { min-width: 0; height: 6.5rem; padding: .6rem .9rem; }
.badges img { max-width: 100%; }
.badges picture:has(img[src*="keurmerk-kiwa"]) { padding-block: .25rem; }
.badges picture { height: 7rem; }

/* Zusterbedrijf */
.sister-card { display: grid; gap: 1.25rem 2rem; align-items: center; }
@media (min-width: 44rem) { .sister-card { grid-template-columns: auto 1fr; } }
.sister-logo { display: block; justify-self: start; background: #fff; border: 1px solid var(--line); padding: .75rem 1rem; }
.sister-logo img { height: 6rem; width: auto; }
.sister-logo:hover { border-color: var(--brand); }
.sister-card h2 { font-size: 1.45rem; }
.sister-card p { margin-bottom: 1rem; }

/* Rode accenten, spaarzaam */
.hero .since { color: var(--brand); }
.page-head h1::after { content: ""; display: block; width: 3.5rem; height: 4px; background: var(--brand); margin-top: .9rem; }
.prose li::marker { color: var(--brand); font-weight: 700; }
.service-list li:has(a) { padding-right: 1.75rem; }
.service-list li:has(a)::before {
  content: ""; position: absolute; right: .5rem; top: 50%;
  width: .5rem; height: .5rem; border-top: 2px solid var(--brand); border-right: 2px solid var(--brand);
  transform: translateY(-50%) rotate(45deg);
}
.site-footer { border-top: 4px solid var(--brand); }